/* ==========================================================================
   Theme Orbit — Client Portal
   Targets the ACTUAL selectors the customer-facing portal renders
   (verified against the real shipped source, assets/themes/perfex/
   css/style.css, and the real templates in application/views/themes/
   perfex/ — not guessed from a screenshot): body (flex column layout,
   #f8fafc background), nav.navbar.navbar-default.header (top nav),
   footer (site footer), plus the same generic Bootstrap/Tailwind
   component classes theme.css already covers (loaded alongside this
   file — see theme_orbit_render_customer_assets() in the module's PHP
   helper). This file only adds what theme.css has no selectors for at
   all: the portal's own page chrome.
   ========================================================================== */

body{
  background:var(--o-bg-base) !important;
  color:var(--o-text-hi);
  font-family:var(--o-font-body);
}
h1,h2,h3,h4{font-family:var(--o-font-display); color:var(--o-text-hi); font-weight:600;}

/* ---- Top nav (nav.navbar.navbar-default.header) ----
   Verified: application/views/themes/perfex/template_parts/
   navigation.php renders this exact class combination; core's own
   rule (assets/themes/perfex/css/style.css) hardcodes background:
   white, border-bottom:#e2e8f0, link color:#334155 — none of which
   are theme-aware. */
.navbar-default{
  background:color-mix(in srgb, var(--o-surface) 92%, transparent) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--o-border);
}
.navbar-default .navbar-nav > li > a{color:var(--o-text-mid) !important;}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{color:var(--o-text-hi) !important;}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{color:var(--o-c1) !important;}
.navbar-default .navbar-toggle .icon-bar{background:var(--o-text-mid);}

/* Mode toggle button, reused as-is from the admin topbar (same <li>
   markup via theme_orbit_mode_toggle_html()) — but that markup's own
   CSS (.header-theme-toggle > a{display:flex;...} in theme.css) has
   lower specificity (1 class) than this portal's own navbar link rule
   (.navbar-default .navbar-nav > li > a{display:inline; line-height:
   85px} — 3 classes), so it silently lost here. Found live: the <a>
   rendered as a stretched inline element (139px tall instead of a
   compact icon), dragging the WHOLE nav row to 190px. Scoped
   specifically to this navbar context, more specific than the rule it
   needs to beat. */
.navbar-default .navbar-nav > li.header-theme-toggle > a{
  display:inline-flex !important;
  align-items:center;
  line-height:normal;
  height:85px;
}

/* ---- Footer ----
   Core hardcodes background:#f1f5f9, border-top:#e2e8f0 (assets/
   themes/perfex/css/style.css) — same invisible-in-light/wrong-in-
   dark pattern found repeatedly on the admin side. */
footer{
  background:var(--o-bg-elevated) !important;
  border-top:1px solid var(--o-border);
  color:var(--o-text-low);
}
footer a{color:var(--o-c1);}

/* ---- File upload dropzone (Files tab) ----
   Found live (a genuinely visible bug, not a screenshot artifact —
   confirmed via computed style too): the drop-to-upload box stayed a
   near-white rgb(251,253,255) box on an otherwise dark page. Traced
   to the actual source (assets/themes/perfex/css/style.css):
   form.dropzone{background-color:#fbfdff;border:1px dashed #c0ccda;
   border-radius:6px;} — hardcoded, portal-only (this exact rule isn't
   in the admin-side stylesheet; admin's own dropzone usages use
   different classes/contexts not confirmed to have the same issue,
   so scoped this fix here rather than assume). */
form.dropzone{
  background-color:var(--o-surface-2) !important;
  border-color:var(--o-border-strong) !important;
}
.dropzone .dz-message{color:var(--o-c1);}

/* ---- Client profile avatar (nav dropdown trigger) ----
   Same treatment as the admin-side staff avatars — a themed ring
   around the real uploaded/placeholder image, verified against
   navigation.php: <img class="client-profile-image-small">. */
.client-profile-image-small{
  border:2px solid var(--o-surface);
  box-shadow:0 0 0 1px var(--o-border), var(--o-shadow-card);
}

/* ---- Sub-menu (Files/Calendar tabs shown above the main content on
   logged-in customer pages) ----
   Verified: application/views/themes/perfex/index.php renders
   ul.submenu.customer-top-submenu with no styling of its own beyond
   Bootstrap Tailwind utilities. */
.submenu.customer-top-submenu{border-bottom:1px solid var(--o-border); margin-bottom:18px; padding-bottom:2px;}
.submenu.customer-top-submenu > li > a{color:var(--o-text-mid); font-weight:600; padding:10px 4px; margin-right:18px;}
.submenu.customer-top-submenu > li > a:hover{color:var(--o-c1);}

/* ---- Invoice/Estimate/Proposal view + reply panels ----
   Verified: these views/client reply threads render inside a plain
   .panel > .panel-body, already covered by theme.css's generic
   .panel.panel-default rule (loaded alongside this file) for the
   card treatment — nothing further needed here. */