*{box-sizing:border-box}
        body{
            font-family:Segoe UI,Inter,Arial,sans-serif;
            margin:0;
            background:var(--bg);
            color:var(--text);
            line-height:1.5;
        }

        /* ── guest top bar ── */
        .topbar{
            background:var(--nav-bg);
            border-bottom:1px solid var(--nav-border);
            box-shadow:0 2px 12px rgba(27,58,107,.08);
        }
        .topbar::after{
            content:'';
            display:block;
            height:3px;
            background:linear-gradient(90deg,var(--teal) 0%,var(--primary) 100%);
        }
        .nav-wrap{
            max-width:1200px;
            margin:0 auto;
            padding:8px 20px;
            display:flex;
            gap:14px;
            align-items:center;
            flex-wrap:wrap;
        }
        .topbar nav{display:flex;gap:2px;margin-left:auto}
        .topbar nav a{
            color:var(--nav-text);
            text-decoration:none;
            font-size:13.5px;
            font-weight:500;
            padding:8px 13px;
            border-radius:8px;
        }

        /* ── app shell (sidebar + main) ── */
        .app-shell{display:flex;min-height:100vh}
        .sidebar{
            width:300px;
            flex-shrink:0;
            background:var(--nav-bg);
            border-right:1px solid var(--nav-border);
            display:flex;
            flex-direction:column;
            padding:18px 12px 16px;
            position:sticky;
            top:0;
            align-self:flex-start;
            min-height:100vh;
            box-shadow:2px 0 12px rgba(27,58,107,.06);
        }
        .sidebar::after{
            content:'';
            position:absolute;
            left:0;right:0;top:0;
            height:3px;
            background:linear-gradient(90deg,var(--teal) 0%,var(--primary) 100%);
        }
        .sidebar .brand{
            display:block;
            text-decoration:none;
            padding:16px 14px 20px;
            margin-top:6px;
        }
        .sidebar .brand .brand-logo{
            margin:0 auto;
            object-position:center center;
        }
        .brand-logo{
            display:block;
            width:100%;
            height:auto;
            max-width:var(--logo-max-width,836px);
            object-fit:contain;
            object-position:left center;
        }
        .sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1}
        .sidebar nav a{
            display:flex;
            align-items:center;
            gap:11px;
            color:var(--nav-text);
            text-decoration:none;
            font-size:13.5px;
            font-weight:500;
            padding:10px 14px;
            border-radius:8px;
            transition:background .15s,color .15s;
        }
        .nav-icon{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:20px;
            height:20px;
            flex-shrink:0;
            color:var(--icon-color, var(--primary));
        }
        .nav-icon svg{width:18px;height:18px;display:block}
        .sidebar nav a:hover{background:#E8F6F8;color:var(--teal-dark)}
        .sidebar nav a:hover .nav-icon{color:var(--teal-dark)}
        .sidebar nav a.active{background:var(--teal);color:#fff}
        .sidebar nav a.active .nav-icon{color:#fff}
        .sidebar-footer{
            margin-top:16px;
            padding-top:14px;
            border-top:1px solid var(--nav-border);
        }
        .sidebar-footer .user-info{
            display:block;
            color:var(--nav-text-muted);
            font-size:12px;
            margin-bottom:10px;
            word-break:break-word;
        }
        .sidebar-footer button{width:100%}
        .main-area{flex:1;min-width:0}
        .container{max-width:1200px;margin:28px auto;padding:0 20px}

        /* ── cards ── */
        .card{
            background:var(--surface);
            padding:20px 22px;
            border-radius:var(--radius);
            border:1px solid var(--border);
            box-shadow:0 4px 20px rgba(11,30,56,.07);
            margin-bottom:18px;
        }

        /* ── page heading row ── */
        .page-head{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            margin-bottom:18px;
        }
        .page-head h2{margin:0;font-size:22px;color:var(--primary)}
        .page-head p{margin:4px 0 0;font-size:13px;color:var(--muted)}

        /* ── KPI stats ── */
        .stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:20px}
        .stat{
            padding:18px 16px;
            border-radius:var(--radius);
            background:var(--surface);
            border:1px solid var(--border);
            border-left:5px solid var(--teal);
            box-shadow:0 2px 10px rgba(11,30,56,.05);
        }
        .stat strong{font-size:30px;font-weight:700;color:var(--primary);display:block;line-height:1.1}
        .stat span{font-size:13px;color:var(--muted)}
        .stat-overdue{border-left-color:#DC2626}
        .stat-overdue strong{color:#B91C1C}
        /* ── Compact financial KPI cards ── */
        .kpi-section{margin-bottom:24px}
        .kpi-grid{
            display:grid;
            grid-template-columns:repeat(auto-fill,minmax(172px,1fr));
            gap:10px;
        }
        .kpi-card{
            display:flex;
            align-items:flex-start;
            gap:10px;
            padding:10px 12px;
            border-radius:10px;
            background:var(--surface);
            border:1px solid var(--border);
            box-shadow:0 1px 4px rgba(11,30,56,.04);
        }
        .kpi-icon{
            flex-shrink:0;
            width:34px;
            height:34px;
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .kpi-icon svg{width:17px;height:17px}
        .kpi-content{flex:1;min-width:4.5rem}
        .kpi-label{
            display:block;
            font-size:11px;
            font-weight:600;
            color:var(--muted);
            line-height:1.25;
            margin-bottom:2px;
        }
        .kpi-value{
            display:block;
            font-size:16px;
            font-weight:700;
            line-height:1.25;
            font-variant-numeric:tabular-nums;
            white-space:normal;
            overflow:visible;
            word-break:normal;
        }
        .kpi-hint{
            display:block;
            font-size:10px;
            color:var(--muted);
            margin-top:2px;
            line-height:1.2;
        }
        .kpi-invoiced .kpi-icon{background:#EFF6FF;color:#1D4ED8}
        .kpi-invoiced .kpi-value{color:#1D4ED8}
        .kpi-sales .kpi-icon{background:#EFF6FF;color:#2563EB}
        .kpi-sales .kpi-value{color:#1D4ED8}
        .kpi-count .kpi-icon{background:#EEF2F7;color:var(--primary)}
        .kpi-count .kpi-value{color:var(--primary)}
        .kpi-payments .kpi-icon{background:#F0FDFA;color:#0F766E}
        .kpi-payments .kpi-value{color:#0F766E}
        .kpi-cost .kpi-icon{background:#FFF7ED;color:#C2410C}
        .kpi-cost .kpi-value{color:#B45309}
        .kpi-expense .kpi-icon{background:#F5F3FF;color:#6D28D9}
        .kpi-expense .kpi-value{color:#6D28D9}
        .kpi-profit .kpi-icon{background:#F0FDF4;color:#15803D}
        .kpi-profit .kpi-value{color:#15803D}
        .kpi-loss .kpi-icon{background:#FEF2F2;color:#B91C1C}
        .kpi-loss .kpi-value{color:#B91C1C}
        .badge-overdue{
            display:inline-block;
            padding:2px 8px;
            border-radius:6px;
            background:#FEF2F2;
            color:#B91C1C;
            font-size:12px;
            font-weight:600;
        }
        .badge-warn{
            display:inline-block;
            padding:2px 8px;
            border-radius:6px;
            background:#FEF3C7;
            color:#B45309;
            font-size:12px;
            font-weight:600;
        }
        .badge{
            display:inline-block;
            padding:3px 9px;
            border-radius:6px;
            font-size:11px;
            font-weight:600;
            line-height:1.3;
        }
        .badge-approved{background:#DCFCE7;color:#166534}
        .badge-paid{background:#DCFCE7;color:#166534}
        .badge-partial{background:#FEF3C7;color:#92400E}
        .badge-unpaid{background:#FEE2E2;color:#991B1B}
        .badge-muted{background:#F3F4F6;color:#4B5563}
        .badge-info{background:#E0F7FA;color:#00695C}
        .status-toggles{display:flex;flex-wrap:wrap;gap:10px}
        .status-toggle-form{margin:0}
        .status-pill{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:10px 18px;
            border-radius:999px;
            border:2px solid var(--border);
            background:#fff;
            color:var(--primary);
            font:600 13px/1 inherit;
            cursor:pointer;
            transition:background .15s,border-color .15s,color .15s;
        }
        .status-pill:hover{border-color:var(--teal);color:var(--teal-dark)}
        .status-pill.is-on{
            background:var(--teal);
            border-color:var(--teal);
            color:#fff;
        }
        .filter-form{margin-top:12px;padding-top:16px;border-top:1px solid var(--border)}
        .filter-form-row{align-items:end}
        .filter-form-row label{margin-bottom:0}
        .filter-form-row label input{margin-bottom:0}
        .filter-form-action{display:flex;align-items:flex-end}
        .filter-form-action .btn-teal{width:100%;margin:0;white-space:nowrap}
        @media(max-width:899px){
            .filter-form-row .filter-form-action{margin-top:14px}
        }
        .filter-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
        .filter-pill{
            display:inline-flex;
            align-items:center;
            padding:8px 14px;
            border-radius:999px;
            border:1.5px solid var(--border);
            background:#fff;
            color:var(--primary);
            font-size:13px;
            font-weight:600;
            text-decoration:none;
            transition:background .15s,border-color .15s,color .15s;
        }
        .filter-pill:hover{border-color:var(--teal);color:var(--teal-dark)}
        .filter-pill.is-active{background:var(--teal);border-color:var(--teal);color:#fff}
        .client-picker-wrap{position:relative}
        .client-picker-head{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
        .client-picker-head label{flex:1;min-width:220px}
        .client-picker-add-btn{flex-shrink:0;white-space:nowrap}
        .client-quick-add{
            display:none;
            margin-top:12px;padding:14px 16px;background:#F4F7FB;border-radius:var(--radius);
            border:1px solid var(--border);
        }
        .client-quick-add.is-open{display:block}
        .catalog-add-wrap{position:relative;margin:10px 0 14px}
        .catalog-add-field-label{display:block;margin:0 0 8px;font-weight:600;font-size:13px;color:var(--primary-dark)}
        .catalog-add-field-label .catalog-add-search{margin-top:5px;margin-bottom:0}
        .catalog-picker-list,.catalog-add-list{
            list-style:none;margin:4px 0 0;padding:0;
            background:#fff;border:1px solid var(--border);border-radius:var(--radius);
            box-shadow:0 8px 24px rgba(15,30,46,.12);
            max-height:240px;overflow:auto;position:absolute;left:0;right:0;z-index:120;
        }
        .catalog-picker-list li,.catalog-add-list li{
            display:flex;justify-content:space-between;gap:12px;
            padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;
        }
        .catalog-picker-list li:last-child,.catalog-add-list li:last-child{border-bottom:none}
        .catalog-picker-list li:hover,.catalog-add-list li:hover{background:#E8F6F8}
        .catalog-picker-list li strong,.catalog-add-list li strong{font-size:14px;color:var(--primary)}
        .catalog-picker-list li span,.catalog-add-list li span{font-size:13px;color:var(--teal-dark);font-weight:600;white-space:nowrap}
        .catalog-picker-empty{padding:12px;color:var(--muted);font-size:13px;cursor:default}
        .catalog-add-input-wrap{position:relative}
        .catalog-search-icon{
            position:absolute;left:12px;top:50%;transform:translateY(-50%);
            width:18px;height:18px;color:var(--muted);pointer-events:none;
        }
        .catalog-add-search{width:100%;padding:10px 12px 10px 40px;font-size:14px}
        .form-field-error{color:#DC2626;margin:8px 0 0;font-size:13px}
        .line-items-list{margin-bottom:8px}
        .line-items-empty{padding:12px 0;font-size:13px;text-align:center}
        .line-item-row{
            padding:10px 0;border-bottom:1px solid var(--border);
        }
        .line-item-row:last-child{border-bottom:none}
        .line-item-grid{
            display:grid;
            grid-template-columns:28px minmax(0,1fr) 72px 96px 100px 32px;
            gap:8px 10px;align-items:start;
        }
        .line-no{
            font-size:12px;font-weight:700;color:var(--muted);
            padding-top:10px;text-align:center;
        }
        .line-item-main{display:flex;flex-direction:column;gap:6px;min-width:0}
        .line-item-main .item-name,.line-item-main .item-description{margin:0}
        .line-item-main .item-description{min-height:36px;resize:vertical}
        .line-item-label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:600}
        .line-item-qty input,.line-item-price input{width:100%;padding:8px 10px}
        .line-item-amount{padding-top:18px;text-align:right}
        .line-item-amount .item-line-total{font-size:14px;color:var(--primary);white-space:nowrap}
        .line-item-remove{
            margin-top:18px;width:32px;height:32px;padding:0;border:none;border-radius:8px;
            background:#FEE2E2;color:#DC2626;font-size:20px;line-height:1;cursor:pointer;
        }
        .line-item-remove:hover{background:#FECACA}
        @media(max-width:760px){
            .line-item-grid{
                grid-template-columns:24px minmax(0,1fr) 64px 80px;
                grid-template-areas:
                    "no main main main"
                    "no qty price amount"
                    "no remove remove remove";
            }
            .line-no{grid-area:no}
            .line-item-main{grid-area:main}
            .line-item-qty{grid-area:qty}
            .line-item-price{grid-area:price}
            .line-item-amount{grid-area:amount;padding-top:0}
            .line-item-remove{grid-area:remove;margin-top:0;justify-self:end}
        }
        .pdf-viewer-body{margin:0;background:var(--bg);min-height:100dvh;display:flex;flex-direction:column}
        .pdf-viewer-toolbar{
            position:sticky;top:0;z-index:50;background:var(--nav-bg);
            border-bottom:1px solid var(--nav-border);padding:10px 14px;
            padding-top:max(10px, env(safe-area-inset-top));
        }
        .pdf-viewer-toolbar-inner{display:flex;flex-wrap:wrap;gap:8px;max-width:1100px;margin:0 auto}
        .pdf-viewer-frame-wrap{flex:1;min-height:0;display:flex;flex-direction:column}
        .pdf-viewer-frame{
            flex:1;width:100%;min-height:calc(100dvh - 72px);border:0;background:#fff;
        }
        .pdf-viewer-fallback{text-align:center;padding:12px;font-size:13px}
        .powered-by-wrap{text-align:center;margin:18px 0 0;padding:8px 0}
        .powered-by-logo{display:inline-block;max-width:220px;height:auto;max-height:48px;width:auto}
        .doc-actions-mobile .btn,.doc-actions-mobile .btn-outline,.doc-actions-mobile .btn-secondary{min-height:44px}
        @media(max-width:640px){
            .doc-actions-mobile{display:grid;grid-template-columns:1fr 1fr;gap:8px}
            .doc-actions-mobile .share-dropdown,.doc-actions-mobile form{display:contents}
            .doc-actions-mobile .share-dropdown-btn,.doc-actions-mobile .btn,.doc-actions-mobile .btn-outline,.doc-actions-mobile .btn-secondary{width:100%;justify-content:center}
            .pdf-viewer-toolbar-inner{display:grid;grid-template-columns:1fr 1fr}
            .pdf-viewer-toolbar .pdf-download-btn{grid-column:1 / -1}
        }
        .client-picker-list{
            position:absolute;
            z-index:30;
            left:0;
            right:0;
            margin:4px 0 0;
            padding:4px 0;
            list-style:none;
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:9px;
            box-shadow:0 8px 24px rgba(11,30,56,.12);
            max-height:220px;
            overflow-y:auto;
        }
        .client-picker-list li{
            padding:10px 12px;
            cursor:pointer;
            border-bottom:1px solid var(--border);
            display:flex;
            flex-direction:column;
            gap:2px;
        }
        .client-picker-list li:last-child{border-bottom:none}
        .client-picker-list li:hover{background:#E8F6F8}
        .client-picker-list li strong{font-size:14px;color:var(--primary)}
        .client-picker-list li span{font-size:12px;color:var(--muted)}
        .client-picker-empty{padding:12px;color:var(--muted);font-size:13px;cursor:default}
        .payment-summary{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:12px;
            margin:4px 0 16px;
            padding:14px;
            background:#F4F7FB;
            border-radius:9px;
            border:1px solid var(--border);
        }
        .payment-summary strong{display:block;font-size:16px;color:var(--primary);margin-top:4px}
        .text-ok{color:#166534}
        .text-warn{color:#B45309}
        @media(max-width:720px){.payment-summary{grid-template-columns:1fr}}
        .dashboard-charts{
            display:grid;
            grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
            gap:18px;
            margin-top:4px;
            margin-bottom:18px;
            align-items:stretch;
        }
        .dashboard-charts > .dashboard-chart-card{
            margin-bottom:0;
            min-width:0;
            display:flex;
            flex-direction:column;
        }
        .chart-card-title{
            margin:0 0 8px;
            font-size:17px;
            font-weight:700;
            color:var(--primary);
            line-height:1.35;
            letter-spacing:.01em;
        }
        .sales-line-chart{
            width:100%;
            min-height:200px;
            background:#FAFCFE;
            border:1px solid var(--border);
            border-radius:10px;
            padding:8px 4px 4px;
        }
        .sales-line-chart svg{
            width:100%;
            height:auto;
            display:block;
        }
        .sales-line-axis{fill:var(--muted);font-family:Segoe UI,Arial,sans-serif}
        .sales-line-label{fill:var(--muted);font-family:Segoe UI,Arial,sans-serif}
        .pie-chart-stack{
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:14px;
            flex:1;
        }
        .pie-chart-ring{
            width:180px;
            height:180px;
            border-radius:50%;
            flex-shrink:0;
            box-shadow:0 4px 16px rgba(11,30,56,.1);
        }
        .pie-chart-ring--solid{display:block}
        .dashboard-charts .pie-chart-ring{width:160px;height:160px}
        .pie-chart-ring--empty{
            background:#EEF2F7 !important;
            border:2px dashed var(--border);
            width:120px;
            height:120px;
        }
        .pie-breakdown{
            list-style:none;
            margin:0;
            padding:0;
            width:100%;
            max-width:280px;
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        .pie-breakdown li{
            display:flex;
            align-items:center;
            gap:10px;
            font-size:14px;
            color:var(--text);
        }
        .pie-breakdown li strong{color:var(--primary-dark);font-weight:600}
        .pie-swatch{
            width:12px;
            height:12px;
            border-radius:3px;
            flex-shrink:0;
        }
        .pie-total-footer{
            margin:4px 0 0;
            font-size:15px;
            color:var(--primary);
            text-align:center;
            padding-top:10px;
            border-top:2px solid var(--border);
            width:100%;
            max-width:280px;
        }
        .pie-total-footer strong{font-size:17px}
        .pie-chart-empty{
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:12px;
        }
        .presence-online{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#166534;font-size:13px}
        .presence-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:#22C55E;
            box-shadow:0 0 0 3px rgba(34,197,94,.25);
        }
        @media(max-width:960px){.dashboard-charts{grid-template-columns:1fr}}
        .dashboard-credit{
            margin:32px 0 8px;
            padding:20px 16px;
            text-align:center;
        }
        .dashboard-credit p{
            margin:0;
            font-size:13px;
            color:var(--muted);
            letter-spacing:.02em;
        }
        .dashboard-credit strong{color:var(--primary);font-weight:600}

        /* ── typography helpers ── */
        .muted{color:var(--muted);font-size:13px}
        h2{color:var(--primary)}

        /* ── form controls ── */
        label{display:block;font-weight:600;font-size:13px;color:var(--primary-dark);margin-bottom:2px}
        input,select,textarea{
            width:100%;
            padding:10px 12px;
            border:1.5px solid var(--border);
            border-radius:9px;
            margin-top:5px;
            margin-bottom:14px;
            font:inherit;
            font-size:14px;
            background:#fff;
            color:var(--text);
            transition:border-color .15s,box-shadow .15s;
        }
        input:focus,select:focus,textarea:focus{
            border-color:var(--teal);
            outline:2px solid var(--ring);
            outline-offset:0;
        }
        textarea{min-height:100px;resize:vertical}

        /* ── buttons ── */
        button,.btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:6px;
            background:var(--primary);
            color:#fff;
            border:none;
            padding:10px 18px;
            border-radius:9px;
            text-decoration:none;
            cursor:pointer;
            font:600 13.5px/1 inherit;
        }
        button:hover,.btn:hover{background:var(--primary-dark)}
        .btn-teal{background:var(--teal)}
        .btn-teal:hover{background:var(--teal-dark)}
        .btn-secondary{background:#4B5563}
        .btn-secondary:hover{background:#374151}
        .btn-danger{background:#DC2626}
        .btn-danger:hover{background:#B91C1C}
        .btn-outline{
            background:#fff;
            color:var(--primary);
            border:1.5px solid var(--border);
        }
        .btn-outline:hover{border-color:var(--teal);color:var(--teal)}
        .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}

        /* ── tables ── */
        .table-wrap{overflow-x:auto}
        table{width:100%;border-collapse:collapse}
        thead tr{background:linear-gradient(90deg,var(--primary),var(--primary-light))}
        th{
            padding:11px 13px;
            text-align:left;
            font-size:13px;
            font-weight:700;
            color:#fff;
            white-space:nowrap;
        }
        td{
            padding:10px 13px;
            font-size:14px;
            border-bottom:1px solid var(--border);
            vertical-align:middle;
        }
        tbody tr:last-child td{border-bottom:none}
        tbody tr:nth-child(even){background:#F4F7FB}
        tbody tr:hover td{background:#E8F4FD}
        td a{color:var(--teal-dark);text-decoration:none;font-weight:600}
        td a:hover{color:var(--primary);text-decoration:underline}

        /* ── catalog items (mobile-friendly edit) ── */
        .catalog-item-details summary{list-style:none;cursor:pointer;color:var(--teal-dark);font-weight:600}
        .catalog-item-details summary::-webkit-details-marker{display:none}
        .catalog-item-edit-toggle{display:inline-flex;align-items:center;gap:6px}
        .catalog-edit-panel{
            margin-top:12px;
            padding:14px;
            background:#F4F7FB;
            border-radius:10px;
            border:1px solid var(--border);
        }
        .catalog-delete-form{margin-top:10px}
        .catalog-edit-panel .btn-teal,
        .catalog-edit-panel .btn-danger{width:100%}

        /* ── grid helper ── */
        .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
        .row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
        .document-date-fields{
            display:grid;
            grid-template-columns:1fr;
            gap:0;
        }
        @media(min-width:900px){
            .document-date-fields{
                grid-template-columns:repeat(2,minmax(0,1fr));
                gap:16px;
            }
            .document-date-fields.filter-form-row{
                grid-template-columns:repeat(3,minmax(0,1fr));
                align-items:end;
            }
        }
        .document-form .row > label,
        .document-form .row > .client-picker-wrap,
        .document-date-fields > label,
        .filter-form .row > label,
        .filter-form .row-3 > label,
        .filter-form .document-date-fields > label{min-width:0;max-width:100%}
        .date-input-wrap{
            display:block;
            width:100%;
            max-width:100%;
            min-width:0;
            overflow:hidden;
        }
        .date-input-wrap input[type="date"],
        .date-input-wrap input[type="datetime-local"],
        .date-input-wrap input[type="month"]{margin-bottom:0}
        input[type="date"],
        input[type="datetime-local"],
        input[type="time"],
        input[type="month"]{
            display:block;
            width:100%;
            max-width:100%;
            min-width:0;
            min-inline-size:0;
            -webkit-min-logical-width:0;
            box-sizing:border-box;
        }
        input[type="date"]::-webkit-date-and-time-value,
        input[type="datetime-local"]::-webkit-date-and-time-value{
            min-width:0;
            text-align:left;
        }
        input[type="date"]::-webkit-datetime-edit,
        input[type="date"]::-webkit-datetime-edit-fields-wrapper,
        input[type="datetime-local"]::-webkit-datetime-edit,
        input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper{
            padding:0;
            min-width:0;
        }
        .date-field-input[type="text"]{
            font-variant-numeric:tabular-nums;
            letter-spacing:0;
        }

        /* ── alert banners ── */
        .alert{padding:12px 16px;border-radius:9px;border-left:5px solid;margin-bottom:14px}
        .alert-success{border-color:#22C55E;background:#F0FDF4;color:#166534}
        .alert-error{border-color:#EF4444;background:#FEF2F2;color:#991B1B}
        .alert-info{border-color:var(--teal);background:#F0FAFB;color:var(--primary)}

        /* ── pending banner ── */
        .pending-banner{
            background:#FFF7ED;
            border:1px solid #FED7AA;
            border-left:5px solid #F97316;
            border-radius:9px;
            padding:14px 18px;
            margin-top:14px;
        }
        .pending-banner strong{color:#9A3412}
        .pending-banner p{margin:4px 0 0;color:#7C2D12;font-size:13px}

        /* ── auth pages ── */
        .auth-shell{max-width:480px;margin:40px auto}
        .auth-shell-wide{max-width:800px;margin:40px auto}
        .auth-logo{text-align:center;margin-bottom:18px}
        .auth-logo .brand-logo{
            width:100%;
            max-width:380px;
            height:auto;
            margin:0 auto;
        }
        .topbar .brand-logo{
            max-width:260px;
        }
        /* ── share dropdown ── */
        .share-dropdown{position:relative;display:inline-block}
        .share-dropdown summary{list-style:none;cursor:pointer}
        .share-dropdown summary::-webkit-details-marker{display:none}
        .share-dropdown-btn{display:inline-flex;align-items:center;gap:7px}
        .share-dropdown-btn .share-icon,.share-dropdown-btn .chevron-icon{width:16px;height:16px}
        .share-dropdown-btn .chevron-icon{opacity:.7}
        .share-dropdown-menu{
            position:absolute;
            top:calc(100% + 6px);
            right:0;
            min-width:200px;
            background:var(--surface);
            border:1px solid var(--border);
            border-radius:10px;
            box-shadow:0 8px 24px rgba(11,30,56,.12);
            z-index:500;
            overflow:visible;
            padding:6px;
        }
        .share-dropdown[open] .share-dropdown-menu{display:block}
        .share-dropdown .wa-icon{width:20px;height:20px;flex-shrink:0}
        .share-dropdown-item{
            display:flex;
            align-items:center;
            gap:10px;
            width:100%;
            padding:10px 12px;
            border:none;
            border-radius:7px;
            background:transparent;
            color:var(--text);
            font:500 13.5px/1 inherit;
            text-decoration:none;
            cursor:pointer;
            text-align:left;
        }
        .share-dropdown-item svg{width:17px;height:17px;flex-shrink:0}
        .share-dropdown-item:hover{background:#F4F7FB}
        .share-whatsapp svg{stroke:#25D366}
        .share-email svg{stroke:var(--primary)}
        .share-dropdown-form{margin:0;display:block;width:100%}
        .actions .share-dropdown-form{flex:none!important;width:100%}
        .share-dropdown-hint{margin:0;padding:8px 12px 10px;font-size:12px;line-height:1.4}
        .page-head,.actions,.card:has(.share-dropdown[open]){overflow:visible}
        .document-totals-preview{
            margin:16px 0;
            padding:14px 16px;
            background:#F4F7FB;
            border:1px solid var(--border);
            border-radius:10px;
            max-width:320px;
            margin-left:auto;
        }
        .document-totals-preview table{width:100%}
        .document-totals-preview td{padding:5px 0;font-size:14px}
        .document-totals-preview .total-row td{font-weight:700;color:var(--primary);border-top:2px solid var(--primary);padding-top:8px}
        .dashboard-mobile-actions{
            display:none;
            position:sticky;
            top:56px;
            z-index:120;
            background:var(--bg);
            padding:10px 0 12px;
            margin:-4px 0 12px;
            border-bottom:1px solid var(--border);
        }
        .dashboard-mobile-actions .actions{margin:0}
        .profit-positive{color:#166534;font-weight:700}
        .profit-negative{color:#DC2626;font-weight:700}
        .auth-shell .card,.auth-shell-wide .card{border-top:4px solid var(--teal)}
        .auth-footer{text-align:center;margin-top:14px}

        /* ── section titles inside cards ── */
        .section-title{
            font-size:13px;
            font-weight:700;
            text-transform:uppercase;
            letter-spacing:.6px;
            color:var(--primary);
            margin:20px 0 8px;
            padding-bottom:6px;
            border-bottom:2px solid var(--teal);
            display:inline-block;
        }

.catalog-add-field-label{
    display:block;
    margin:12px 0 8px;
    font-weight:600;
    font-size:13px;
    color:var(--primary-dark);
}
.catalog-add-field-label .catalog-add-search{margin-top:5px;margin-bottom:0}
.form-field-error{color:#DC2626;margin:8px 0 0;font-size:13px}

/* ── performance ── */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
.card{content-visibility:visible}
.table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* ── mobile shell (hidden on desktop) ── */
.mobile-topbar{
    display:none;
    align-items:center;
    gap:12px;
    padding:10px 14px;
    background:var(--nav-bg);
    border-bottom:1px solid var(--nav-border);
    position:sticky;
    top:0;
    z-index:300;
    width:100%;
}
.mobile-topbar::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--teal) 0%,var(--primary) 100%);
}
.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    border:none;
    flex-shrink:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.nav-toggle svg{
    width:22px;
    height:22px;
    display:block;
    pointer-events:none;
}
.mobile-topbar-link{
    display:none;
    flex-shrink:0;
    padding:8px 12px;
    border-radius:8px;
    font-size:.875rem;
    font-weight:600;
    color:var(--nav-text);
    text-decoration:none;
    background:#E8F6F8;
}
.mobile-topbar-link.active,
.mobile-topbar-link:hover{
    background:var(--teal);
    color:#fff;
}
.sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,30,46,.45);
    z-index:280;
    opacity:0;
    transition:opacity .2s ease;
    pointer-events:none;
}
body.nav-open{overflow:hidden;overscroll-behavior:none;touch-action:none}
html.nav-open{overflow:hidden;height:100%;overscroll-behavior:none}
body.nav-open .main-area,
body.nav-open .app-shell{overflow:hidden;touch-action:none}

/* ── responsive ── */
@media(max-width:1100px){
            .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
            .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
        }
@media(max-width:980px){
            .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
            .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        }
@media(max-width:1024px){
    .mobile-topbar{display:flex!important}
    .mobile-topbar-link{display:inline-flex;align-items:center}
    .mobile-topbar .brand-logo{max-width:min(220px,58vw);max-height:42px;width:auto}
    .nav-toggle{display:inline-flex!important}
    .sidebar-backdrop{display:block}
    .app-shell{flex-direction:column}
    .sidebar .sidebar-brand{display:none!important}
    .sidebar{
        position:fixed;
        left:0;
        top:0;
        bottom:0;
        width:min(300px,88vw);
        min-height:100dvh;
        max-height:100dvh;
        z-index:290;
        transform:translateX(-100%);
        transition:transform .22s ease;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
        padding:18px 12px 16px;
        box-shadow:4px 0 24px rgba(11,30,56,.15);
    }
    body.nav-open .sidebar{transform:translateX(0)}
    body.nav-open .sidebar-backdrop{opacity:1;pointer-events:auto}
    .sidebar .brand{padding:16px 14px 20px;margin-top:6px;max-width:none}
    .sidebar nav{
        flex-direction:column;
        flex-wrap:nowrap;
        order:unset;
        margin-top:0;
    }
    .sidebar nav a{min-height:44px;padding:12px 14px}
    .sidebar-footer{
        margin-top:auto;
        padding-top:14px;
        border-top:1px solid var(--nav-border);
        margin-left:0;
        flex-direction:column;
        align-items:stretch;
    }
    .sidebar-footer .user-info{display:block}
    .sidebar-footer button{width:100%;min-height:44px}
    .main-area{width:100%;max-width:100%;overflow-x:clip}
    .container{margin:16px auto;padding:0 14px;max-width:100%}
    .card{padding:16px;overflow-x:clip;max-width:100%}
    .document-form,.filter-form{max-width:100%}
    .row,.row-3{grid-template-columns:1fr}
    .document-date-fields,
    .document-date-fields.filter-form-row{grid-template-columns:1fr;gap:0}
    .document-form .row.document-head-row{grid-template-columns:1fr;gap:0}
    .client-picker-head label{min-width:0}
    .page-head{flex-direction:column;align-items:flex-start}
    .actions{width:100%}
    .actions .btn,.actions button,.actions form:not(.share-dropdown-form){flex:1 1 auto}
    .actions form[style*="display:contents"]{display:contents!important}
    .dashboard-mobile-actions{display:block}
    .dashboard-desktop-actions{display:none!important}
    .share-dropdown-menu{
        position:fixed;
        left:14px;
        right:14px;
        top:auto;
        bottom:auto;
        min-width:0;
        max-width:calc(100vw - 28px);
    }
    body.nav-open .share-dropdown[open] .share-dropdown-menu{display:none!important}
    th,td{font-size:13px;padding:9px 10px}
    .filter-pill{padding:10px 14px;min-height:44px}
    .status-pill{min-height:44px}
    .table-wrap.list-table-wrap{overflow-x:visible}
    .list-table-mobile thead{display:none}
    .list-table-mobile,
    .list-table-mobile tbody,
    .list-table-mobile tr,
    .list-table-mobile td{display:block;width:100%;max-width:100%}
    .list-table-mobile tr{
        margin-bottom:14px;
        border:1px solid var(--border);
        border-radius:12px;
        padding:12px 14px;
        background:var(--surface);
        box-sizing:border-box;
    }
    .list-table-mobile tbody tr:nth-child(even),
    .list-table-mobile tbody tr:hover td{background:var(--surface)}
    .list-table-mobile td{
        border-bottom:none;
        padding:7px 0;
        text-align:right;
        word-break:break-word;
        overflow-wrap:anywhere;
    }
    .list-table-mobile td::before{
        content:attr(data-label);
        float:left;
        max-width:45%;
        font-weight:600;
        font-size:12px;
        color:var(--muted);
        text-transform:uppercase;
        letter-spacing:.04em;
        text-align:left;
    }
    .list-table-mobile td[colspan]{text-align:center}
    .list-table-mobile td[colspan]::before{display:none}
    .list-table-mobile td.list-table-actions{
        text-align:left;
        padding-top:12px;
        margin-top:8px;
        border-top:1px solid var(--border);
    }
    .list-table-mobile td.list-table-actions::before{display:none}
}
@media(max-width:768px){
    input[type="date"],
    input[type="datetime-local"],
    input[type="month"],
    .date-field-input[type="text"]{
        font-size:14px;
        padding:10px 10px;
        letter-spacing:0;
        width:100%!important;
        max-width:100%!important;
    }
    .date-input-wrap{
        width:100%;
        max-width:100%;
    }
    .document-date-fields,
    .document-date-fields.filter-form-row{grid-template-columns:1fr!important;gap:0}
    .catalog-table-wrap{overflow-x:visible}
    .catalog-items-table thead{display:none}
    .catalog-items-table,
    .catalog-items-table tbody,
    .catalog-items-table tr,
    .catalog-items-table td{display:block;width:100%}
    .catalog-items-table tr{
        margin-bottom:14px;
        border:1px solid var(--border);
        border-radius:12px;
        padding:12px 14px;
        background:var(--surface);
    }
    .catalog-items-table tbody tr:nth-child(even),
    .catalog-items-table tbody tr:hover td{background:var(--surface)}
    .catalog-items-table td{
        border-bottom:none;
        padding:7px 0;
        text-align:right;
    }
    .catalog-items-table td::before{
        content:attr(data-label);
        float:left;
        font-weight:600;
        font-size:12px;
        color:var(--muted);
        text-transform:uppercase;
        letter-spacing:.04em;
    }
    .catalog-items-table td[colspan]{text-align:center}
    .catalog-items-table td[colspan]::before{display:none}
    .catalog-items-table td.catalog-item-actions{
        text-align:left;
        padding-top:12px;
        margin-top:8px;
        border-top:1px solid var(--border);
    }
    .catalog-items-table td.catalog-item-actions::before{display:none}
    .catalog-item-details,
    .catalog-edit-panel{width:100%;box-sizing:border-box}
    .catalog-edit-panel .row{grid-template-columns:1fr}
}
@media(max-width:480px){
    .auth-logo .brand-logo{max-width:280px}
    .topbar .brand-logo{max-width:210px}
}
@media(min-width:1025px){
    .mobile-topbar,
    .sidebar-backdrop{display:none!important}
    .nav-toggle{display:none!important}
    .dashboard-mobile-actions{display:none!important}
    .dashboard-desktop-actions{display:flex!important}
}
@media(max-width:600px){
    .stats{grid-template-columns:1fr}
    .page-head h2{font-size:19px}
    .actions .btn,.actions .btn-outline,.actions button{width:100%}
    .share-dropdown{width:100%}
    .share-dropdown summary{width:100%}
    .share-dropdown-btn{width:100%;justify-content:center}
}
@media(max-width:480px){
            .stats{grid-template-columns:1fr}
            .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .kpi-value{font-size:15px}
        }
@media(hover:none) and (pointer:coarse){
    button,.btn,.sidebar nav a,.filter-pill,.status-pill{min-height:44px}
}

/* ── Public landing (estivoic.com) ── */
.landing-page{max-width:960px;margin:0 auto;padding-bottom:24px}
.landing-hero{margin-bottom:18px;border-top:4px solid var(--teal)}
.landing-hero-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:24px;
    align-items:center;
}
.landing-eyebrow{
    margin:0 0 6px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--teal-dark);
}
.landing-title{
    margin:0 0 8px;
    font-size:clamp(28px,5vw,38px);
    line-height:1.15;
    color:var(--primary);
}
.landing-lead{
    margin:0 0 10px;
    font-size:18px;
    font-weight:600;
    color:var(--primary-light);
}
.landing-desc{margin:0 0 18px;font-size:15px;line-height:1.55;color:var(--muted)}
.landing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.landing-price{margin:0;font-size:13px}
.landing-logo{max-width:100%;height:auto;display:block}
.landing-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:18px;
}
.landing-feature h3{margin:0 0 6px;font-size:16px;color:var(--primary)}
.landing-feature p{margin:0;font-size:13px;line-height:1.45}
.landing-cta{text-align:center;border-top:4px solid var(--primary)}
.landing-footer{text-align:center;font-size:12px;margin-top:14px}
.landing-footer a{color:var(--teal-dark);font-weight:600;text-decoration:none}
.landing-footer a:hover{text-decoration:underline}
@media(max-width:768px){
    .landing-hero-grid{grid-template-columns:1fr}
    .landing-hero-visual{order:-1}
    .landing-features{grid-template-columns:1fr}
    .landing-actions .btn,.landing-actions .btn-outline{width:100%}
}

/* ── pagination (quotes, invoices, clients lists) ── */
.pagination-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:12px;
}
.pagination-summary{margin:0;font-size:14px}
.pagination-links{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pagination-btn,
.pagination-page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:8px;
    text-decoration:none;
    color:var(--text);
    font-size:14px;
    font-weight:600;
    background:#fff;
}
.pagination-btn:hover,
.pagination-page:hover{
    border-color:var(--teal);
    color:var(--teal-dark);
}
.pagination-page.is-active,
.pagination-page.is-active:hover{
    background:var(--teal);
    border-color:var(--teal);
    color:#fff;
}
.pagination-btn.is-disabled,
.pagination-btn.is-disabled:hover{
    opacity:.45;
    cursor:not-allowed;
    border-color:var(--border);
    color:var(--muted);
}
.pagination-ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:36px;
    color:var(--muted);
    font-size:14px;
}
@media(max-width:640px){
    .pagination-nav{flex-direction:column;align-items:flex-start}
    .pagination-links{width:100%}
}

/* Laravel default pagination without Tailwind — shrink icons, hide duplicate row */
nav[role="navigation"][aria-label*="Pagination"]:not(:has(.pagination-nav)) svg{
    width:1.25rem!important;
    height:1.25rem!important;
    max-width:1.25rem;
    vertical-align:middle;
}
nav[role="navigation"][aria-label*="Pagination"]:not(:has(.pagination-nav)) > div:first-of-type{
    display:none!important;
}
nav[role="navigation"][aria-label*="Pagination"]:not(:has(.pagination-nav)) > div:last-of-type{
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
}