/*
 * ═══════════════════════════════════════════════════════════════
 *  SWIFT BACKOFFICE — DESIGN SYSTEM v1.0
 *  All backoffice development must follow these rules.
 * ═══════════════════════════════════════════════════════════════
 *
 *  COLORS
 *  ──────
 *  Sidebar bg       #0a1e35
 *  Sidebar hover    rgba(255,255,255,0.05)
 *  Sidebar active   rgba(44,166,164,0.14)
 *  Accent           #2ca6a4
 *  Accent dark      #249e9c
 *  Navy             #0f2a44
 *  Surface          #ffffff
 *  Background       #f0f2f5
 *  Border           #e9eaec
 *  Text primary     #111827
 *  Text secondary   #6b7280
 *  Text muted       #9ca3af
 *
 *  TYPOGRAPHY
 *  ──────────
 *  Font             -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
 *  Section labels   9px / 800 / 1.8px tracking / uppercase / rgba(255,255,255,.25)
 *  Nav items        13px / 500 / white-space: nowrap
 *  Nav active       13px / 650 / white
 *  Page title       15px / 800 / #0f2a44
 *  Card title       14px / 700 / #0f2a44
 *  Body             13px / 400–500 / #374151
 *  Micro label      11px / 500 / #9ca3af
 *
 *  LAYOUT
 *  ──────
 *  Sidebar width    240px (fixed, never flex)
 *  Content padding  24px
 *  Card gap         16px
 *
 *  RADII
 *  ─────
 *  Cards / panels   12px
 *  Buttons          8px
 *  Inputs           8px
 *  Badges / tags    999px
 *
 *  SHADOWS
 *  ───────
 *  Panels           0 1px 3px rgba(0,0,0,0.04)
 *  Cards hover      0 4px 16px rgba(15,42,68,0.08)
 *  Modal / gate     0 20px 60px rgba(0,0,0,0.35)
 *
 *  TRANSITIONS
 *  ───────────
 *  Interactive      0.15s ease (all color/bg transitions)
 *  Accordion        0.2s ease (max-height)
 *
 *  RULES (must follow in every backoffice page)
 *  ────────────────────────────────────────────
 *  1.  No wrapped text — white-space: nowrap + text-overflow: ellipsis everywhere
 *  2.  Consistent radii — cards 12px, buttons 8px, badges 999px
 *  3.  Every hover state must change border-color or background
 *  4.  Active nav: 3px teal left border + teal-tinted bg
 *  5.  All interactive elements: cursor:pointer + transition 0.15s
 *  6.  Shadows are subtle only — no hard drop shadows
 *  7.  Section labels: uppercase, letter-spaced, muted
 *  8.  Password gate on every direct-access backoffice URL
 *  9.  All backoffice pages: noindex, nofollow
 *  10. No website chrome (nav bar, footer, consultation popup)
 *  11. SVG icons preferred over emoji in UI elements
 *  12. Symmetry — equal padding/gap on both sides of any group
 *
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #374151;
    -webkit-font-smoothing: antialiased;
}

/* ── Password gate ── */
.bo-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #060f1a 0%, #0a1e35 60%, #0c2540 100%);
    align-items: center;
    justify-content: center;
}
.bo-gate.visible { display: flex; }
.bo-gate-card {
    background: #fff;
    border-radius: 14px;
    padding: 40px 36px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.bo-gate-logo { height: 52px; margin-bottom: 26px; width: auto; }
.bo-gate-title { font-size: 17px; font-weight: 800; color: #0f2a44; margin-bottom: 6px; }
.bo-gate-sub { font-size: 12.5px; color: #9ca3af; margin-bottom: 28px; }
.bo-gate-input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}
.bo-gate-input:focus { border-color: #2ca6a4; }
.bo-gate-err { font-size: 12px; color: #dc2626; min-height: 18px; margin-bottom: 8px; }
.bo-gate-btn {
    width: 100%;
    padding: 12px;
    background: #2ca6a4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.bo-gate-btn:hover { background: #249e9c; }

/* ── Shared iframe-page base (pages loaded inside the shell) ── */
.bo-frame-page {
    min-height: 100vh;
    background: #dde3ea;
}

/* ── Compact page header (used by all backoffice sub-pages) ── */
.bo-page-hdr {
    background: #edf0f4;
    padding: 18px 28px 16px;
    border-bottom: 1px solid #c8cfd8;
    border-left: 4px solid #2ca6a4;
    display: flex;
    align-items: center;
    gap: 14px;
}
.bo-page-hdr-icon {
    width: 36px; height: 36px; min-width: 36px;
    background: rgba(44,166,164,0.12);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #2ca6a4;
    flex-shrink: 0;
}
.bo-page-hdr-info { min-width: 0; flex: 1; }
.bo-page-hdr-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #2ca6a4;
    margin-bottom: 2px;
    white-space: nowrap;
}
.bo-page-hdr-title {
    font-size: 15px; font-weight: 800; color: #1a2e44;
    white-space: nowrap; letter-spacing: -.2px;
}
.bo-page-hdr-sub {
    font-size: 12px; color: #7a8a9b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}

/* ── Suppress website chrome when loaded in backoffice context ── */
#consultation-popup, .consultation-trigger, .cta-float,
.pop-out-btn, [id*="popup"], [class*="popup"],
#nav-placeholder, #footer-placeholder,
.site-header, .site-footer, .main-nav {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE LAYER (≤ 768px)
   Applies to every backoffice sub-page that loads this CSS.
   Goals: 44px tap targets, single-column layout, no horizontal scroll.
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { font-size: 14px; }

    /* Page header: stack icon + title vertically, allow wrapping */
    .bo-page-hdr {
        padding: 14px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .bo-page-hdr-title  { font-size: 15px; white-space: normal; }
    .bo-page-hdr-eyebrow{ font-size: 10px; }
    .bo-page-hdr-sub    { font-size: 12px; white-space: normal; }

    /* Forms: full width inputs, 44px min height */
    input.bo-input,
    select.bo-select,
    textarea.bo-input,
    .bo-input,
    .bo-select {
        font-size: 16px;       /* prevents iOS zoom on focus */
        min-height: 44px;
        padding: 11px 13px;
    }
    button, .btn, .action-btn, .radio-btn, .chk-item {
        min-height: 44px;
    }

    /* Two-column tool layouts → stack to single column */
    .doc-layout,
    .qb-layout,
    .ft-layout,
    .mb-layout,
    .s85-layout,
    .cf-layout,
    .fp-layout,
    .twocol,
    [class*="-layout"][class*="grid"] {
        display: block !important;
        padding: 12px !important;
    }
    .doc-left, .doc-right,
    .ft-left,  .ft-right,
    .mb-left,  .mb-right,
    .s85-left, .s85-right,
    .cf-left,  .cf-right,
    .fp-left,  .fp-right {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
    }

    /* Form cards: tighter padding */
    .doc-form-card,
    .form-card,
    .card,
    .panel,
    [class*="-card"] {
        padding: 14px !important;
    }

    /* Sticky preview panels — unstick on mobile so user scrolls naturally */
    .qb-quote-panel,
    .doc-right,
    .preview-wrapper,
    [class*="sticky"] {
        position: static !important;
        max-height: none !important;
    }

    /* Action bars: scroll horizontally instead of cramming */
    .preview-actions,
    .action-bar,
    .toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Tables get horizontal scroll wrapper */
    .table-wrap,
    .scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table { min-width: 600px; }

    /* Document preview: shrink page to fit */
    .doc-sheet, .preview-sheet {
        transform: scale(0.85);
        transform-origin: top left;
        width: 117% !important;        /* compensate so it fills width after scale */
        margin-bottom: -10% !important;
    }

    /* Modals: full-screen on phones */
    .modal,
    .sign-modal,
    .modal-card {
        max-width: 100% !important;
        margin: 12px !important;
    }

    /* Grid auto-collapse — catches .g2/.g3/.g4, grid-2, grid-3, grid-4, and inline grids */
    .g2, .g3, .g4,
    [class*="grid-2"],
    [class*="grid-3"],
    [class*="grid-4"],
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* T1-OVP / Section 85 wide tables — wrap in horizontal scroll */
    .mgrid-wrap, .table-scroll, .wide-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mgrid { font-size: 11px !important; }

    /* Opex row, ratio rows etc with mixed fixed widths → stack */
    .opex-row, .ratio-row, .tile-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* Letterhead / hero strip with 3 columns → stack */
    .lhw {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    /* Field rows side-by-side → stack */
    .field-row,
    .form-row,
    .row-flex {
        flex-direction: column;
        gap: 10px;
    }
}

/* Even tighter on small phones (≤ 480px) */
@media (max-width: 480px) {
    .bo-page-hdr { padding: 12px 14px; }
    .bo-page-hdr-icon { width: 32px; height: 32px; min-width: 32px; }
    .bo-page-hdr-title  { font-size: 14px; }
    .bo-page-hdr-eyebrow{ font-size: 9px; letter-spacing: 1.2px; }
    .bo-page-hdr-sub    { font-size: 11.5px; }

    .doc-sheet, .preview-sheet {
        transform: scale(0.72);
        width: 139% !important;
        margin-bottom: -28% !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL PRINT — applies to every backoffice page that loads this CSS
   Hides every UI panel; only the content sheet prints.
═══════════════════════════════════════════════════════════ */
@media print {
    @page { size: letter; margin: 0.6in; }
    html, body {
        background: #fff !important;
        margin: 0 !important; padding: 0 !important;
        height: auto !important; overflow: visible !important;
    }

    /* Hide all UI chrome */
    .bo-gate, .bo-page-hdr,
    .bo-topbar, .mo-topbar, .sidebar, .sb-backdrop,
    .doc-left, .preview-actions, .action-bar, .toolbar,
    #docSettings, #panelToggle, #settingsToggle, .panel-toggle,
    .sign-modal-backdrop, .sign-iframe-modal,
    .cra-iframe-wrap, .copy-toast,
    .form-card, .input-panel, .left-panel, .controls,
    button, .btn, .action-btn,
    .no-print, [data-no-print],
    .ft-controls, .mb-controls, .s85-controls,
    .cf-controls, .fp-controls,
    .floating-toolbar, .toolbar-strip {
        display: none !important;
    }

    /* Layouts: collapse so only the preview shows */
    .doc-layout, .ft-layout, .mb-layout, .s85-layout,
    .cf-layout, .fp-layout, .twocol, .layout {
        padding: 0 !important; margin: 0 !important;
        display: block !important;
        height: auto !important; overflow: visible !important;
    }
    .doc-right, .ft-right, .mb-right, .s85-right,
    .cf-right, .fp-right, .preview-col, .output-col {
        width: 100% !important; max-width: 100% !important;
        display: block !important;
        height: auto !important; overflow: visible !important;
        padding: 0 !important; margin: 0 !important;
        flex: none !important;
    }
    .preview-wrapper, .preview-area {
        background: #fff !important; padding: 0 !important;
        border-radius: 0 !important; display: block !important;
        height: auto !important; min-height: unset !important;
        overflow: visible !important; flex: none !important;
        margin: 0 !important;
    }

    /* Printable sheet fills printable area; @page margin is the actual margin */
    .doc-sheet, .preview-sheet, .print-sheet, .report-sheet {
        box-shadow: none !important; max-width: 100% !important;
        border-radius: 0 !important; border: none !important;
        min-height: unset !important; height: auto !important;
        overflow: visible !important;
        margin: 0 !important; width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Avoid breaking these elements across pages */
    .doc-letterhead, .letterhead, .report-header,
    h1, h2, h3, table, .summary-card { page-break-inside: avoid; }
    .doc-section-hdr, .section-title { page-break-after: avoid; }

    /* Hide-when-printing utility class */
    .print-hide { display: none !important; }

    * { overflow: visible !important; }
}