/* ============================================================
   KWSM — Client Portal shell (header / sidebar / footer) redesign.
   Loaded by each client partial, AFTER app.css. Scoped under the
   existing client root classes with high specificity so it overrides
   app.css without editing it. Every JS hook the client layout needs
   (data-sidebar*, .is-open, data-sidebar-nav-link, .header-logout,
   data-copy-text) is preserved by the partials — this only restyles.
   ============================================================ */

/* ---------------- Shell frame ------------------------------------- */
.client-portal .client-shell { min-height: 100vh; display: flex; background: linear-gradient(180deg, #070a0f, #0b0f14); }
.client-portal .client-main-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ============================================================
   SECTION 1 · Sidebar (.client-sidebar)
   ============================================================ */
.client-portal .client-sidebar {
  width: 290px; flex: 0 0 290px;
  background:
    radial-gradient(120% 40% at 50% 0%, rgba(106,44,134,.10), transparent 60%),
    linear-gradient(180deg, rgba(17,23,32,.98), rgba(9,13,19,.98));
  border-inline-start: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
}
.client-portal .client-sidebar-topbar { display: none; }

/* brand */
.client-portal .client-sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 16px 16px; border-bottom: 1px solid rgba(255,255,255,.06); margin: 0;
}
.client-portal .client-sidebar-logo {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 6px;
  border-radius: 12px; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.34);
  font-size: 0; /* hide the literal "KWSM" text fallback when img present */
}
.client-portal .client-sidebar-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.client-portal .client-sidebar-brand-copy { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.client-portal .client-sidebar-brand-copy strong { color: #fff; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-portal .client-sidebar-brand-copy span { color: #9fb0c3; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* quick-glance panel */
.client-portal .client-sidebar-panel {
  margin: 12px; padding: 13px 14px;
  border: 1px solid rgba(39,170,225,.20); border-radius: 12px;
  background: rgba(39,170,225,.05);
}
.client-portal .client-sidebar-panel-label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #9fb0c3; }
.client-portal .client-sidebar-panel-value { color: #e7eef7; font-size: 14px; font-weight: 700; margin-top: 4px; }
.client-portal .client-sidebar-panel-note { color: #9fb0c3; font-size: 11.5px; line-height: 1.55; margin-top: 6px; }

/* nav */
.client-portal .client-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.client-portal .client-sidebar-nav::-webkit-scrollbar { width: 8px; }
.client-portal .client-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 8px; }
.client-portal .client-sidebar-section-label {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #7e8ea0; padding: 12px 10px 6px;
}
.client-portal .client-sidebar-section-label:first-child { padding-top: 4px; }

.client-portal .uix-client-sidebar-nav .client-sidebar-link,
.client-portal .client-sidebar-link {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr; align-items: center;
  gap: 2px 11px; padding: 9px 12px; margin: 1px 0;
  border: 1px solid transparent; border-radius: 11px;
  text-decoration: none; transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.client-portal .client-sidebar-link-ic {
  grid-row: 1 / 3; grid-column: 1;
  width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #8ea0b2; background: rgba(255,255,255,.04);
  transition: color .14s ease, background .14s ease;
}
.client-portal .client-sidebar-link-label { grid-column: 2; color: #d9e3ea; font-size: 14px; font-weight: 700; }
.client-portal .client-sidebar-link-hint { grid-column: 2; color: #7e8ea0; font-size: 11.5px; line-height: 1.4; }

.client-portal .client-sidebar-link:hover {
  background: rgba(39,170,225,.08); border-color: rgba(39,170,225,.22); transform: translateX(-2px);
}
.client-portal .client-sidebar-link:hover .client-sidebar-link-ic { color: var(--b, #27AAE1); background: rgba(39,170,225,.12); }
.client-portal .client-sidebar-link:hover .client-sidebar-link-label { color: #fff; }
.client-portal .client-sidebar-link.active {
  background: linear-gradient(90deg, rgba(39,170,225,.16), rgba(106,44,134,.16));
  border-color: rgba(39,170,225,.30);
}
.client-portal .client-sidebar-link.active .client-sidebar-link-label { color: #fff; }
.client-portal .client-sidebar-link.active .client-sidebar-link-ic { color: #fff; background: linear-gradient(135deg, var(--p, #6A2C86), var(--b, #27AAE1)); }
.client-portal .client-sidebar-link.active::before {
  content: ""; position: absolute; inset-inline-end: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--b, #27AAE1), var(--p, #6A2C86));
}

/* quick actions */
.client-portal .client-sidebar-quick-actions { padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.client-portal .client-sidebar-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.client-portal .client-sidebar-quick-actions .btn { min-height: 40px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.client-portal .client-sidebar-quick-actions .btn-primary { background: linear-gradient(90deg, var(--p, #6A2C86), var(--b, #27AAE1)); border: none; color: #fff; }
.client-portal .client-sidebar-quick-actions .btn-ghost { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: #e7eef7; }
.client-portal .client-sidebar-quick-actions .btn-ghost:hover { border-color: rgba(39,170,225,.4); background: rgba(39,170,225,.08); color: #fff; }

/* ============================================================
   SECTION 2 · Header — client 3-zone bar (.client-kwsm-bar)
   CLIENT-HEADER-FIX-01: replaces the legacy split header so the
   authenticated client header matches the admin .kwsm-bar shape.
   Uses client-scoped class names (no dependency on admin-shell.css)
   and high-specificity selectors so it overrides the legacy
   .client-header-shell rules in app.css WITHOUT editing app.css.
   NOTE: `display` is intentionally NOT set on the header base, so the
   guest hide rule (body.client-portal-guest .client-header-shell{display:none}
   in client-auth.css) still wins for guest pages. The inner row drives layout.
   ============================================================ */
.client-portal .client-header-shell.client-kwsm-bar {
  position: sticky; top: 0; z-index: 70;
  gap: 0; padding: 0;
  background: rgba(10,14,19,.80);
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}
/* CLIENT-HEADER-FIX-01b: neutralize the legacy app.css ≤980 rule
   `.client-header-shell{display:grid;grid-template-columns:1fr}` that stacks the
   header into a tall block. Scoped to the authenticated variant ONLY, so the
   guest hide rule (body.client-portal-guest .client-header-shell{display:none})
   still wins for guest pages. The inner row is the single layout driver. */
.client-portal .client-header-shell.client-kwsm-bar.client-header-auth { display: block; }
.client-portal .client-header-shell.client-kwsm-bar .client-kwsm-bar-row {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 1200px; margin: 0 auto;
  min-height: 68px; padding: 10px 18px;
}

/* ---- start: sidebar toggle + brand ---- */
.client-portal .client-kwsm-bar .client-kwsm-bar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.client-portal .client-kwsm-bar .client-kwsm-bar-toggle {
  display: none;                 /* visible only on mobile (drawer) */
  width: 40px; height: 40px; flex: 0 0 40px; padding: 0;
  align-items: center; justify-content: center; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
  color: #e7eef7; cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.client-portal .client-kwsm-bar .client-kwsm-bar-toggle:hover { background: rgba(255,255,255,.08); border-color: rgba(39,170,225,.4); }
.client-portal .client-kwsm-bar .client-kwsm-bar-brand {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  text-decoration: none; padding: 4px 6px; border-radius: 12px;
  transition: background .14s ease;
}
.client-portal .client-kwsm-bar .client-kwsm-bar-brand:hover { background: rgba(255,255,255,.04); }
.client-portal .client-kwsm-bar .client-kwsm-bar-logo {
  width: 40px; height: 40px; flex: 0 0 40px; padding: 5px;
  border-radius: 11px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.client-portal .client-kwsm-bar .client-kwsm-bar-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.client-portal .client-kwsm-bar .client-kwsm-bar-brandtext { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.client-portal .client-kwsm-bar .client-kwsm-bar-brandtext strong { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-portal .client-kwsm-bar .client-kwsm-bar-brandtext small { color: #9fb0c3; font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- center: page title + subtitle ---- */
.client-portal .client-kwsm-bar .client-kwsm-bar-center {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.client-portal .client-kwsm-bar .client-kwsm-bar-title {
  margin: 0; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.client-portal .client-kwsm-bar .client-kwsm-bar-subtitle {
  margin: 0; color: #9fb0c3; font-size: 12.5px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- end: status + actions ---- */
.client-portal .client-kwsm-bar .client-kwsm-bar-end { display: flex; align-items: center; gap: 10px; }
.client-portal .client-kwsm-bar .client-kwsm-bar-status {
  display: flex; align-items: center; gap: 16px;
  padding: 6px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.client-portal .client-kwsm-bar .client-kwsm-bar-status-line { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.client-portal .client-kwsm-bar .client-kwsm-bar-status-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7e8ea0; }
.client-portal .client-kwsm-bar .client-kwsm-bar-status strong { color: #e7eef7; font-size: 13px; font-weight: 700; }

.client-portal .client-kwsm-bar .client-kwsm-bar-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 14px; border-radius: 11px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
  border: 1px solid rgba(39,170,225,.24); background: rgba(39,170,225,.10); color: #cfeefc;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.client-portal .client-kwsm-bar .client-kwsm-bar-action:hover { background: rgba(39,170,225,.18); border-color: rgba(39,170,225,.45); transform: translateY(-1px); }
.client-portal .client-kwsm-bar .client-kwsm-bar-logout {
  border-color: rgba(255,107,107,.28); background: rgba(255,107,107,.08); color: #ff9b9b;
}
.client-portal .client-kwsm-bar .client-kwsm-bar-logout:hover { background: rgba(255,107,107,.16); border-color: rgba(255,107,107,.45); color: #fff; }
.client-portal .client-kwsm-bar .client-kwsm-bar-logout-form { display: inline-flex; margin: 0; }
.client-portal .client-kwsm-bar .client-kwsm-bar-guest-actions { display: flex; align-items: center; gap: 8px; }
.client-portal .client-kwsm-bar .client-kwsm-bar-login { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: #e7eef7; }
.client-portal .client-kwsm-bar .client-kwsm-bar-login:hover { border-color: rgba(39,170,225,.4); background: rgba(39,170,225,.08); color: #fff; }

/* focus rings */
.client-portal .client-kwsm-bar a:focus-visible,
.client-portal .client-kwsm-bar button:focus-visible {
  outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(39,170,225,.20)); border-radius: 11px;
}

/* ---- header responsive ---- */
@media (max-width: 980px) {
  /* keep the bar a single horizontal row; only zones change, never direction */
  .client-portal .client-header-shell.client-kwsm-bar .client-kwsm-bar-row {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    align-items: center; justify-content: space-between;
  }
  .client-portal .client-kwsm-bar .client-kwsm-bar-start { flex-direction: row; min-width: 0; }
  .client-portal .client-kwsm-bar .client-kwsm-bar-end { flex-direction: row; }
  .client-portal .client-kwsm-bar .client-kwsm-bar-toggle { display: inline-flex; }
  .client-portal .client-kwsm-bar .client-kwsm-bar-center { display: none; }
  .client-portal .client-kwsm-bar .client-kwsm-bar-status { display: none; }
  .client-portal .client-kwsm-bar .client-kwsm-bar-brandtext small { display: none; }
}
@media (max-width: 560px) {
  .client-portal .client-kwsm-bar .client-kwsm-bar-row { gap: 10px; padding: 8px 14px; }
  /* compact icon-only action buttons; accessible name stays via title/aria-label */
  .client-portal .client-kwsm-bar .client-kwsm-bar-action { width: 44px; min-width: 44px; flex: 0 0 44px; padding: 0; gap: 0; }
  .client-portal .client-kwsm-bar .client-kwsm-bar-action .client-kwsm-bar-action-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .client-portal .client-kwsm-bar * { animation: none !important; transition: none !important; }
}

/* status badges — kept; chip-scoped + generic tones reused across the portal */
.client-portal .client-kwsm-bar-status .badge {
  font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent;
}
.client-portal .badge.badge-on { background: rgba(46,204,113,.15); color: var(--success, #2ecc71); border-color: rgba(46,204,113,.28); }
.client-portal .badge.badge-warn { background: rgba(241,196,15,.15); color: var(--warning, #f1c40f); border-color: rgba(241,196,15,.28); }
.client-portal .badge.badge-off { background: rgba(255,107,107,.15); color: var(--danger, #ff6b6b); border-color: rgba(255,107,107,.28); }
.client-portal .badge.badge-info { background: rgba(39,170,225,.15); color: var(--b, #27AAE1); border-color: rgba(39,170,225,.28); }

/* ============================================================
   SECTION 3 · Footer (.client-footer-shell)
   ============================================================ */
.client-portal .client-footer-shell {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.22);
}
.client-portal .client-footer-brandblock { display: flex; align-items: center; gap: 11px; }
.client-portal .client-footer-logo {
  width: 34px; height: 34px; flex: 0 0 34px; padding: 5px; border-radius: 9px; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.client-portal .client-footer-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.client-portal .client-footer-copy { display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
.client-portal .client-footer-copy strong { color: #e7eef7; font-size: 13px; font-weight: 800; }
.client-portal .client-footer-copy span { color: #9fb0c3; font-size: 12px; }
.client-portal .client-footer-meta { display: flex; align-items: center; gap: 14px; }
.client-portal .client-footer-meta-text { color: #7e8ea0; font-size: 12px; }
.client-portal .client-footer-badge {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: rgba(39,170,225,.08); border: 1px solid rgba(39,170,225,.24);
  color: #bfe9fb; font-size: 12px; font-weight: 600;
}
.client-portal .client-footer-badge svg { color: var(--b, #27AAE1); }
.client-portal .client-footer-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #2ecc71); animation: kwsm-cshell-pulse 2.4s infinite; }

@keyframes kwsm-cshell-pulse { 0%{box-shadow:0 0 0 0 rgba(46,204,113,.5)} 70%{box-shadow:0 0 0 6px rgba(46,204,113,0)} 100%{box-shadow:0 0 0 0 rgba(46,204,113,0)} }

/* focus rings */
.client-portal .client-sidebar a:focus-visible,
.client-portal .client-header-shell a:focus-visible,
.client-portal .client-header-shell button:focus-visible,
.client-portal .client-sidebar button:focus-visible {
  outline: none; box-shadow: var(--shadow-focus, 0 0 0 3px rgba(39,170,225,.20)); border-radius: 10px;
}

/* ---------------- Responsive (drawer under 980px) ----------------- */
@media (max-width: 980px) {
  .client-portal .client-sidebar-topbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .client-portal .client-sidebar-close {
    width: 36px; height: 36px; border-radius: 9px; padding: 0;
    border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04);
    color: #e7eef7; font-size: 20px; cursor: pointer;
  }
}
@media (max-width: 620px) {
  .client-portal .client-footer-shell { flex-direction: column; align-items: flex-start; }
  .client-portal .client-footer-meta-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .client-portal .client-sidebar *, .client-portal .client-footer-badge * { animation: none !important; transition: none !important; }
}

/* ============================================================
   UI-MOBILE-SHELL-01 · Client mobile shell polish
   ============================================================ */
/* Header already carries the KWSM logo; drop the duplicate logo inside the
   sidebar brand and keep the account text branding only. */
.client-portal .client-sidebar-logo { display: none; }

@media (max-width: 980px) {
  /* Clean drawer overlay: the sidebar (and its backdrop) must sit ABOVE the
     sticky header (z-index:70) so it no longer slides under the header and the
     content behind is properly dimmed. Kept below modal/lightbox layers. */
  .client-portal .client-sidebar { z-index: 120; }
  .client-portal .client-sidebar-backdrop { z-index: 110; }
}

@media (max-width: 620px) {
  /* Compact footer: drop the duplicate logo, tidy spacing.
     (Mobile header icon-button sizing is owned by UI-MOBILE-SHELL-02 below.) */
  .client-portal .client-footer-logo { display: none; }
  .client-portal .client-footer-shell { gap: 12px; padding: 14px 16px; }
}

/* ============================================================
   UI-MOBILE-SHELL-02 — SUPERSEDED by CLIENT-HEADER-FIX-01.
   The fragile mobile grid hack (display:grid + direction:ltr override on
   .client-header-shell.client-header-auth) is no longer needed: the new
   .client-kwsm-bar structure (SECTION 2 above) is a single flex row with its
   own ≤980 / ≤560 responsive rules, so mobile zones stay aligned without it.
   ============================================================ */