/* Global styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    /* Font smoothing — cleaner text edges on macOS / iOS Safari and modern
       Chrome. Standard SaaS polish; no functional impact. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    background: #1f2937;
    color: white;
    transition: width 0.25s ease;
    /* Desktop sidebar must anchor to the viewport so .sidebar-profile
       (margin-top: auto, pinned to bottom of the flex column) stays
       reachable on long pages. Without this, .sidebar is a flex child
       that stretches to match .layout's height — on a claim detail page
       with 389 photos, .layout grows well past 100vh, and the profile
       dropdown ends up at the bottom of the page rather than the bottom
       of the viewport. Sticky keeps the sidebar viewport-anchored;
       overflow-y: auto handles the case where sidebar content itself
       exceeds viewport height (e.g. many nav items, expanded org menu).
       Mobile @media (max-width: 900px) overrides position to fixed
       separately and is unaffected. */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;        /* overrides existing overflow: hidden — */
                             /* horizontal stays hidden via the property below */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-collapsed .sidebar {
    width: 70px;
}

.sidebar-collapsed .sidebar span,
.sidebar-collapsed .sidebar .menu-text,
.sidebar-collapsed .sidebar .sidebar-org-name {
    display: none;
}

/* Sidebar header: logo toggles collapse.
   Equal 15px padding on all sides so the logo has symmetric breathing
   room from the top edge as it does from the left edge ("even steven"). */
.sidebar-header {
    padding: 15px;
}

.sidebar-header img {
    display: block;
}

.toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    margin-right: 10px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 15px;
    font-size: 14px;
}

.sidebar-nav a,
.sidebar-profile a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 0 -12px;
}

.sidebar-nav a:hover,
.sidebar-profile a:hover {
    background-color: rgba(255,255,255,0.06);
}

/* Bottom-pinned profile section: org name (collapsible toggle) + menu of
   admin/account links. margin-top: auto pushes it to the bottom of the
   .sidebar flex column. Slightly darker background creates subtle visual
   separation from the main nav above without a hard divider line. */
.sidebar-profile {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: 16px 15px 20px;
    background: rgba(0, 0, 0, 0.15);
    font-size: 14px;
}

/* The toggle button — full-row click target with org name + chevron.
   Default state is collapsed (.sidebar-profile-menu hidden); clicking
   adds .profile-expanded to the parent which reveals the menu. */
.sidebar-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 4px 8px;
    margin: 0 -8px;
    font-family: inherit;
    text-align: left;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}
.sidebar-profile-toggle:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.sidebar-profile-chevron {
    color: #a0aec0;
    font-size: 14px;
    margin-left: 8px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.sidebar-profile.profile-expanded .sidebar-profile-chevron {
    transform: rotate(180deg);
}

.sidebar-org-name {
    display: block;
    color: #a0aec0;
    font-size: 11px;
    line-height: 1.3;
    max-width: 140px;
    word-wrap: break-word;
    padding: 0 2px;
}

/* Collapsible menu — Settings/Team/Logout. max-height transition gives
   smooth slide; margin-top transitions in alongside so collapsed state
   has zero footprint above the parent's bottom padding. */
.sidebar-profile-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: max-height 0.15s ease, margin-top 0.15s ease;
}
.sidebar-profile.profile-expanded .sidebar-profile-menu {
    max-height: 200px;
    margin-top: 12px;
}

/* Edge case: when the org has no company_name, the toggle button is omitted
   server-side and .profile-no-toggle is added to the section. The menu
   stays visible always — users still need access to Settings/Team/Logout. */
.sidebar-profile.profile-no-toggle .sidebar-profile-menu {
    max-height: none;
    margin-top: 0;
    overflow: visible;
}

.sidebar-collapsed .nav-section-label {
    display: none;
}

.nav-section-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-top: 15px;
}

.logout-link {
    color: #f87171;
}

.content {
    flex: 1;
    /* Allow this flex item to shrink below its content's intrinsic min-content
       width. Without this, a wide child (e.g. .claims-table-wrap holding a
       table with min-width: 1200px) forces .content to expand past the
       viewport, the body scrolls horizontally, and any overflow-x:auto on the
       child becomes a no-op (the child got all the room it asked for). With
       min-width: 0, .content respects its parent flex-row's available space,
       letting the child's overflow-x:auto engage as the actual scroll
       container — which is what sticky-positioned descendants anchor against.
       Canonical flex-item idiom for "this item contains scrollable content." */
    min-width: 0;
    padding: 30px;
    background: #f9fafb;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.dashboard-title {
    margin: 0;
    font-weight: 700;
    font-size: 1.5rem;
}

.brand-badge {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #1f2937;
    color: #fff;
    border-radius: 6px;
}

/* Form layout (edit claim, etc.) */
.form-wrapper {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
}

.form-card {
    width: 100%;
    max-width: 900px;
    background: white;
    padding: 45px;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.full-width {
    grid-column: span 2;
}

.section-label {
    grid-column: span 2;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-top: 10px;
    margin-bottom: 5px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* New Claim form: short currency-style input */
.short-input {
    width: 180px;
}

/* New Claim form: one row for DOL + Loss Type + Deductible */
.form-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}
.form-row > div {
    display: flex;
    flex-direction: column;
}
.form-row label {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}
.form-row input,
.form-row select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
}
.form-row input:focus,
.form-row select:focus {
    border-color: #2563eb;
    outline: none;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group input,
.form-group select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    transition: border 0.2s ease;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #2563eb;
    outline: none;
}

.form-actions {
    grid-column: span 2;
    margin-top: 30px;
}

.btn-primary {
    padding: 12px 20px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary:hover {
    background: #1e40af;
}

.btn-secondary {
    padding: 8px 16px;
    background: #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    color: #111827;
    font-size: 14px;
}

/* Form textarea and section divider (edit claim) */
.section-divider {
    grid-column: span 2;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}
.section-divider h3 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.form-textarea {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
}
.form-textarea:focus {
    border-color: #2563eb;
    outline: none;
}

/* Dashboard filter tabs */
.dashboard-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.dashboard-filters a {
    padding: 6px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: #3b82f6;
    background: transparent;
    transition: all 0.2s ease;
}

.dashboard-filters a:hover {
    background: #e2e8f0;
}

.dashboard-filters a.active {
    background: #1e293b;
    color: #ffffff;
}

/* Claim detail header badges */
.claim-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.badge {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  /* Phase 8.15: pills wrap to multi-line on overflow rather than punch
     out of their parent card. Real-world content like "Carrier: Homesite
     Insurance Company (Progressive Program)" or long carrier-issued claim
     numbers blew past dashboard card width on iPhone portrait — the pill
     row would extend beyond the card boundary and clip awkwardly. Wrap
     beats ellipsis here: full info visibility is the operator preference,
     and `border-radius: 999px` still reads as a pill even when wrapped
     to 2-3 lines (line-height tightened to keep the pill compact). The
     `overflow-wrap: anywhere` + `word-break: break-word` combination
     breaks long unbroken tokens (claim numbers, emails, URLs) at any
     character rather than letting them push past the container.
     `max-width: 100%` is the load-bearing rule — without it, a pill in
     a flex parent can still grow past 100% of its parent's content box
     because `white-space: normal` alone doesn't cap intrinsic width. */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
  transition: all 0.2s ease;
}

.badge:hover {
  transform: translateY(-1px);
}

.badge-gray {
  background-color: #e5e7eb;
  color: #374151;
}

.badge-blue {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge-yellow {
  background-color: #fef3c7;
  color: #92400e;
}

/* Slate-200 / slate-800. Was dark gunmetal (#1f2937 / white) prior to
   the 2026-05-15 pill-color unification. Operator wanted dashboard
   card pills and claim detail header pills to look identical — they
   were the same class, but the dashboard had a scoped slate override
   while the claim detail used the base dark. Now both use the same
   light base. The status pill dropdown (.claim-status-select) shares
   this class and tracks the color automatically — its chevron SVG and
   focus outline both moved to dark to remain visible against the new
   light background. ~14:1 contrast on slate-800-on-slate-200; well
   above WCAG AA's 4.5:1 minimum. */
.badge-dark {
  background-color: #e2e8f0;
  color: #1e293b;
}

.badge-green {
  background-color: #dcfce7;
  color: #166534;
}

.badge-purple {
  background-color: #ede9fe;
  color: #5b21b6;
}

.badge-status-lead {
  background-color: #2b6cb0;
  color: white;
}

/* Status pill <select> on claim detail header. Inherits .badge padding/font and
   .badge-dark or .badge-status-lead background — added on top so the interactive
   dropdown reads as the same chip as the read-only badges. Native select chrome
   is removed; a small chevron is drawn via inline SVG to signal interactivity.
   Chevron + focus outline both use slate-800 (#1e293b) to match the new
   light .badge-dark background (changed from gunmetal in the 2026-05-15
   pill-color unification). On the .badge-status-lead path (yellow/amber
   background), slate-800 still has comfortable contrast. */
.claim-status-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 6px 28px 6px 14px;       /* extra right room for the chevron */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231e293b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}
.claim-status-select:focus {
  outline: 2px solid rgba(30, 41, 59, 0.4);
  outline-offset: 1px;
}
/* Open-dropdown options — browser native, can't fully restyle, but ensure
   readable text against typical OS popup white background. */
.claim-status-select option {
  color: #111827;
  background-color: #ffffff;
}

.table-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.table-link:hover {
  text-decoration: underline;
}

.btn-small {
  background: #1f2937;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  margin-right: 6px;
}

.btn-small:hover {
  opacity: 0.85;
}

.actions-cell {
  white-space: nowrap;
}

/* Auth / Login – full clean break: body is the ONLY centering container */
html, body {
    height: 100%;
    margin: 0;
}

body.auth-body {
    /* min-height: 100vh makes the flex centering above actually work — without
       it, body height = content height, so align-items: center is a no-op and
       the login card renders at the top of the page where iPhone Safari's URL
       bar covers the logo. With 100vh, the card sits in the vertical middle
       of the viewport with breathing room above and below. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f7fb;
}

/* SaaS-style login card (Stripe / Linear / Notion / Vercel pattern) */
.login-container {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 420px;
    margin: 120px auto;
}

.auth-card {
    width: 380px;
    padding: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    text-align: center;
}

.auth-logo {
    height: 48px;
    margin-bottom: 20px;
}

.auth-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 25px;
}

.auth-error {
    font-size: 14px;
    color: #dc3545;
    margin-bottom: 16px;
}

.auth-forgot {
    text-align: right;
    margin-bottom: 20px;
}

.auth-forgot a {
    font-size: 14px;
    color: #6c757d;
    text-decoration: none;
}

.auth-forgot a:hover {
    text-decoration: underline;
}

.auth-card .form-group {
    margin-bottom: 18px;
    text-align: left;
}

.auth-card .form-control {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    box-sizing: border-box;
}

.auth-card .form-control:focus {
    border-color: #2563eb;
    outline: none;
}

.auth-card .btn.btn-dark {
    padding: 12px;
    background: #1f2937;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.auth-card .btn.btn-dark:hover {
    background: #374151;
}

.auth-card .w-100 {
    width: 100%;
}

/* login-page: no flex — body is the only centering container */
.login-page {
    display: block;
    width: 100%;
}

.login-container .login-box {
    width: 100%;
}

.login-box {
    width: 100%;
    text-align: center;
}

.login-box input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.login-box button {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.login-box button:hover {
    background: #1d4ed8;
}

.brand-block {
    margin-bottom: 10px;
}

.brand-block h2 {
    font-weight: 700;
    margin-bottom: 8px;
}

.brand-block p {
    font-size: 18px;
    color: #6c757d;
}

/* Form inside login-box */
.login-box .form-control {
    width: 100%;
    padding: 20px 12px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    box-sizing: border-box;
}

.login-box .form-control:focus {
    border-color: #2563eb;
    outline: none;
}

.login-box label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #374151;
    text-align: left;
}

.login-box .text-end a {
    font-size: 14px;
    color: #6c757d;
    text-decoration: none;
}

.login-box .text-end a:hover {
    text-decoration: underline;
}

.login-box .auth-error {
    font-size: 14px;
    color: #dc3545;
    margin-bottom: 16px;
}

.login-box .auth-message {
    font-size: 14px;
    color: #198754;
    margin-bottom: 16px;
}

.login-box .btn.btn-primary {
    padding: 12px;
    background: #e7686a;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.login-box .btn.btn-primary:hover {
    background: #d95a5c;
}

/* ===== LOGIN BRAND LOGO ===== */

.brand-logo {
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 25px auto;
}

/* =========================================
   SaaS LOGIN CLEANUP (non-breaking override)
   ========================================= */

body.auth-body {
    background: #f6f7fb;
}

/* Main login card */
.login-container {
    max-width: 420px;
    margin: 0 auto;
    padding: 50px 48px;
    border-radius: 14px;
    background: white;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* Ensure form fills card */
.login-container .login-box {
    width: 100%;
}

/* Logo sizing (typical SaaS auth logo) */
.brand-logo {
    width: 300px;
    height: auto;
    display: block;
    margin: 0 auto 24px auto;
}

/* Improve spacing for subtitle */
.brand-block p {
    margin-bottom: 24px;
}

/* Better input spacing */
.login-box input {
    margin-bottom: 16px;
}

/* Login button refinement */
.login-box button {
    height: 44px;
    font-weight: 600;
}

/* ---- Atomic destructive UI primitives (also in claim_detail.css for legacy detail-page rules) ---- */
.btn-danger {
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}
.btn-danger:hover { background: #b91c1c; }

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1002;
}
.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    min-width: 360px;
    max-width: 90vw;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}
.hidden { display: none !important; }

/* ---- Danger Zone (Edit Claim page) ---- */
.danger-zone {
    margin-top: 32px;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 20px 24px;
    background: #fef2f2;
}
.danger-zone h3 {
    margin: 0 0 12px 0;
    color: #b91c1c;
    font-size: 16px;
    font-weight: 600;
}
.danger-zone-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.danger-zone-title {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
}
.danger-zone-help {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #6b7280;
}

/* Address link → Google Maps. Used on the claim detail header (where the
   whole address is the click target). Inherits parent color so it does not
   look like a default blue link; underline appears on hover. */
.claim-address-link {
    color: inherit;
    text-decoration: none;
}
.claim-address-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Small Maps icon button next to the dashboard address. Explicit, intentional
   click target — the address text itself is plain (so row-click navigates to
   the claim detail page). The icon's onclick has stopPropagation so clicking
   it opens Google Maps without also triggering row navigation. */
.address-maps-icon {
    color: #9ca3af;
    margin-left: 8px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
}
.address-maps-icon:hover {
    color: #4b5563;
}

/* === Mobile sidebar: hamburger + slide-in overlay (Action 11) ===
   Wide viewports (>900px): sidebar always visible in its flex slot.
   Narrow viewports (<=900px): hamburger button shows top-left; sidebar
   slides in from the left as an overlay with a semi-transparent backdrop.
   Plain Bootstrap Icons (bi-list, bi-x-lg) for hamburger / close glyphs. */

.sidebar-toggle {
    display: none; /* hidden at wide viewports; shown via @media below */
    position: fixed;
    top: 8px;
    left: 8px;
    width: 44px;
    height: 44px;
    background: #1f2937;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    z-index: 1002;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.sidebar-toggle:hover {
    background: #374151;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (max-width: 900px) {
    /* Floating logo button toggles open/close on mobile. Always visible at
       all sidebar states — the in-sidebar logo is hidden when sidebar is
       open (rule below) so there's no visual duplicate. */
    .sidebar-toggle {
        display: flex;
    }
    /* Sidebar leaves the flex flow and becomes a slide-in overlay panel.
       Default: translateX(-100%) — fully off-screen left. Body class
       sidebar-mobile-open transitions it to translateX(0). */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        /* Two-line height: 100vh is the fallback for older browsers; 100dvh
           wins where supported (iOS Safari 15.4+, Chrome 108+, Firefox 101+,
           all GA by 2022-2023). 100vh on iOS refers to the layout viewport
           which includes the area behind the URL bar — the sidebar's bottom
           ~80px would sit hidden behind it on first load. 100dvh = dynamic
           viewport, excludes the URL bar so the sidebar sizes to the actual
           visible area. */
        height: 100vh;
        height: 100dvh;
        width: 280px;
        /* Internal scroll so .sidebar-profile (margin-top: auto, pinned to
           bottom) is reachable when the visible area is smaller than the
           sidebar's intrinsic content height — pinch-zoom, short phones,
           URL bar visible, or the org-dropdown expand pushing menu content
           past the visible area. Overrides the y-axis portion of the base
           .sidebar's `overflow: hidden` shorthand; overflow-x stays hidden. */
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1001;
    }
    .sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }
    .sidebar-mobile-open .sidebar-backdrop {
        display: block;
        opacity: 1;
    }
    /* When sidebar is open, hide the entire in-sidebar header (which only
       contains the logo). The floating logo button stays visible top-left
       and serves both open and close roles — no visual duplicate, and no
       empty 56px header space at the top of the slid-out sidebar. */
    .sidebar-mobile-open .sidebar-header {
        display: none;
    }
    /* With .sidebar-header hidden, .sidebar-nav becomes the first visible
       child at the top of the sidebar. Push its content down past the
       floating logo button (top: 8px + 44px height = 52px bottom edge) so
       the button doesn't overlap "Dashboard" / first nav item. 60px gives
       8px breathing room. Overrides the default `.sidebar-nav { padding:
       20px 15px }` for top only; sides + bottom stay at 15/20. */
    .sidebar-mobile-open .sidebar-nav {
        padding-top: 60px;
    }
    /* Disable desktop "icon-only collapse" behavior on mobile — labels
       always show inside the slid-out sidebar. The logo-click toggle still
       fires (existing JS) but visually does nothing here. */
    .sidebar-collapsed .sidebar {
        width: 280px;
    }
    .sidebar-collapsed .sidebar span,
    .sidebar-collapsed .sidebar .menu-text {
        display: inline;
    }
    .sidebar-collapsed .sidebar .sidebar-org-name {
        display: block;
    }
    .sidebar-collapsed .nav-section-label {
        display: block;
    }
    /* Main content gets the full viewport width (sidebar is overlaid, not
       in flex flow). Extra top padding clears the fixed hamburger button
       (44px height + 8px top + 12px breathing = 64px). */
    .content {
        padding-top: 64px;
    }
}

/* ---- Signup form: PA + attorney credential fieldsets ----
   Migration 044. Each fieldset is hidden by default (.hidden in the
   markup) and toggled by static/js/signup.js based on the org_type
   dropdown selection. The fieldset itself drops the browser-default
   inset border/margin so it visually flows with the rest of the
   stacked .form-control inputs. */
.signup-credentials {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 18px 0;
    background: #f9fafb;
}

.signup-credentials legend {
    padding: 0 6px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.signup-credentials-help {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}