/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
    background-color: #e6f9ec;
}

.btn-primary {
    background-color: #4caf50;
    border-color: #4caf50;
}

.navbar, .card {
    background-color: #f4fff7;
}

.text-primary {
    color: #388e3c !important;
}


/* Custom styles - loaded after Bootstrap */
.invalid-job {
  background-color: #dc3545 !important;
  color: white !important;
  border: 2px solid #b02a37 !important;
}

.list-group .list-group-item.invalid-job {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border-color: #f5c6cb !important;
  border-left: 5px solid #dc3545 !important;
}

.list-group .list-group-item.invalid-job:hover {
  background-color: #f1b0b7 !important;
}

.whois-popover {
  max-width: 800px;
}

/* Domain/subdomain status badges (domain_statuses/_badges.html.haml): the
   "x" to remove one only appears on hover, so a row with several statuses
   assigned doesn't show a delete control on every single one all the time. */
.status-badge {
  display: inline-flex;
  align-items: center;
}

.status-badge .status-remove {
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.35em;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.status-badge:hover .status-remove {
  opacity: 1;
}

/* Passive/Active module tinting */
.list-group .list-group-item.module-passive {
  background-color: #eaf1fb;
}

.list-group .list-group-item.module-passive:hover {
  background-color: #dbe7f8;
}

.list-group .list-group-item.module-active {
  background-color: #fbeaea;
}

.list-group .list-group-item.module-active:hover {
  background-color: #f8dbdb;
}

.list-group .list-group-item.module-commercial {
  background-color: #fdf3d9;
}

.list-group .list-group-item.module-commercial:hover {
  background-color: #fbe8b8;
}

/* Grey out disabled or error modules */
.list-group .list-group-item.module-inactive {
  filter: grayscale(60%);
  opacity: 0.6;
}

.list-group .list-group-item.module-inactive:hover {
  opacity: 0.8;
}

/* Enhanced Sidebar Styles */

/* The nav stays put while the main column scrolls.

   Three parts, none of them optional:

   - `align-self: flex-start` is what makes the stickiness work at all. The
     sidebar is a flex item of `main.d-flex`, so it stretches to the full
     height of the row by default — and an element that already fills its
     containing block has nowhere to travel, so `position: sticky` alone is
     a no-op. This is why the nav used to scroll away on a long project or
     job-log page.
   - `height: 100vh` (replacing the `min-height: 100vh` that used to sit
     inline on the element) keeps the `mt-auto` account block pinned to the
     bottom of the viewport rather than to the bottom of the page.
   - `overflow-y: auto` covers an admin with every section expanded, where
     the nav itself is taller than the viewport. Without it the account
     block and sign-out link would be unreachable.

   `position: fixed` would also hold the nav in place, but it takes the
   element out of the flex row, so the main column loses its 280px offset
   and slides underneath. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: 280px;
  height: 100vh;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Condensed mode: an icon-only rail for when the sidebar's full width isn't
   worth the screen space. Toggled by the "sidebar" Stimulus controller
   (app/javascript/controllers/sidebar_controller.js), which also persists
   the preference in localStorage. `.sidebar-label` marks every bit of text
   (nav labels, the brand title, account name/email, the footer) that has no
   room in a 72px rail; icons (`.bi`) and the toggle button are the only
   things a `.sidebar-condensed` sidebar keeps. Width lives here rather than
   inline on the element specifically so this rule can override it — an
   inline `style="width: ..."` on the <nav> would otherwise win over any
   external stylesheet rule regardless of specificity. */
.sidebar.sidebar-condensed {
  width: 72px;
}

/* !important is required here, not just belt-and-braces: several
   `.sidebar-label` elements (the account name/email block, the
   unauthenticated-state panel) are also Bootstrap `.d-flex`/`.d-flex-column`
   containers, and Bootstrap's display utilities are themselves declared
   `!important`. A plain `display: none` here would lose to `.d-flex` despite
   this selector's higher specificity — `!important` ignores specificity. */
.sidebar.sidebar-condensed .sidebar-label {
  display: none !important;
}

.sidebar.sidebar-condensed .nav-link-sidebar,
.sidebar.sidebar-condensed .btn-sidebar-toggle {
  justify-content: center;
}

.sidebar.sidebar-condensed .nav-link-sidebar .me-1,
.sidebar.sidebar-condensed .nav-link-sidebar .me-2,
.sidebar.sidebar-condensed .btn-sidebar-toggle .me-1,
.sidebar.sidebar-condensed .btn-sidebar-toggle .me-2 {
  margin-right: 0 !important;
}

.sidebar.sidebar-condensed .ms-3 {
  margin-left: 0 !important;
}

/* The brand link is neither a `.nav-link-sidebar` nor a `.btn-sidebar-toggle`,
   so the margin rule above never reached it. Harmless while the brand was a
   glyph, visible now that it is a 40px logo: with the wordmark hidden, the
   leftover right margin pushes it off-centre in the 72px rail. */
.sidebar.sidebar-condensed .sidebar-brand {
  justify-content: center;
}

.sidebar.sidebar-condensed .sidebar-brand .me-2 {
  margin-right: 0 !important;
}

.btn-sidebar-toggle {
  transition: all 0.2s ease;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.btn-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  transform: translateX(5px);
}

.btn-sidebar-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(129, 199, 132, 0.4);
  color: white !important;
}

.nav-link-sidebar {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.nav-link-sidebar:hover {
  color: white !important;
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateX(3px);
}

.nav-link-sidebar.active {
  color: white !important;
  background: rgba(255, 255, 255, 0.25) !important;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-chevron {
  transition: transform 0.2s ease;
  font-size: 0.8rem;
}

.btn-sidebar-toggle[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
}

/* Smooth collapse animations */
.collapse {
  transition: all 0.3s ease;
}

/* Badge styling */
.badge {
  font-size: 0.7rem;
  padding: 0.25em 0.5em;
}

/* Focus indicators for accessibility */
.nav-link-sidebar:focus,
.btn-sidebar-toggle:focus {
  outline: 2px solid #81c784;
  outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Not sticky on a phone: a full-viewport-tall nav with its own scrollbar
     would leave no room for the page behind it. */
  .sidebar {
    width: 100% !important;
    position: static;
    height: auto;
    overflow-y: visible;
  }
}
/* Settings forms (/admin/settings, /module_settings, a module's own page).
   The controls sit in a table cell, which is as wide as the column — a
   two-digit page limit in a 700px-wide input reads as a mistake, and a
   Save button a screen away from the label it belongs to is a long trip.
   Capped rather than fixed so they still shrink on a narrow viewport. */
.setting-control {
    max-width: 26rem;
}

/* Retained for anything that genuinely wants a narrow control. The module
   settings form no longer uses it: its Save buttons only form a column if every
   input area is the same width, because the button sits immediately after the
   input inside a joined input-group. */
.setting-control-narrow {
    max-width: 11rem;
}

.setting-control-wide {
    max-width: 34rem;
}

/* Bootstrap checks and switches keep their default blue, which is the only
   blue on a green UI. Matches .btn-primary above. */
.form-check-input:checked {
    background-color: #4caf50;
    border-color: #4caf50;
}

.form-check-input:focus {
    border-color: #a5d6a7;
    box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
}

/* Report preview (reports/show). The report's own stylesheet lives in
   ReportRenderer and ships inside the standalone HTML/PDF downloads; this is
   only what the same markup needs when it's inlined into an app page, so it
   deliberately restyles nothing the app already handles. */
.report-body > :first-child {
  margin-top: 0;
}

.report-body h1 {
  font-size: 1.6rem;
  border-bottom: 2px solid #2e7d32;
  padding-bottom: 0.3rem;
}

.report-body h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.2rem;
}

.report-body h3 {
  font-size: 1.1rem;
  margin-top: 1.5rem;
  color: #2e7d32;
}

.report-body h4,
.report-body h5 {
  font-size: 0.85rem;
  margin-top: 1.1rem;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
}

.report-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.875rem;
}

.report-body th,
.report-body td {
  border: 1px solid #dee2e6;
  padding: 0.3rem 0.45rem;
  text-align: left;
  vertical-align: top;
}

.report-body th {
  background: #f0f5f1;
}

.report-body pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 0.5rem;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 22rem;
  overflow-y: auto;
}

/* Finding severity chips.

   A pale tint with a saturated left marker rather than a saturated fill: the
   ramp in FindingsHelper::SEVERITY_FILL is chosen for colourblind *separation*,
   and three of the five do not meet text contrast as a background (amber is
   1.67:1 against the page). The marker carries the colour, the text stays
   readable, and the icon and word carry the meaning for anyone who cannot
   distinguish the marker at all. */
.finding-severity {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.15em 0.5em 0.15em 0.4em;
    border-radius: 0.25rem;
    border-left: 3px solid currentColor;
    white-space: nowrap;
}

.finding-severity-critical { color: #8f1d1d; background-color: #fbe9e9; }
.finding-severity-high     { color: #8a4520; background-color: #fdefe7; }
.finding-severity-medium   { color: #7a5600; background-color: #fdf6e3; }
.finding-severity-low      { color: #2b4979; background-color: #eaf0fa; }
.finding-severity-info     { color: #5a5854; background-color: #f1f0ee; }