/* RESET */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f7fb;
    color: #1f2937;
}

/* HEADER */
.top-header {
    background:#ffffff;
    color:#0f172a;
    padding:0;
    border-bottom:1px solid #e5e7eb;
    box-shadow:0 4px 16px rgba(15,23,42,.06);
}

.header-content {
    max-width: 1300px;
    margin: 0 auto;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.company-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.header-flex {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-nav {
    display:flex;
    gap:14px;
}
.dashboard-row {
    display:grid;
    grid-template-columns: 35% 65%;
    gap:20px;
    margin-bottom:24px;
}

.kpi-square {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.top-nav a {
    color:#334155;
    text-decoration:none;
    padding:9px 14px;
    border-radius:8px;
    background:#f8fafc;
    font-size:14px;
    font-weight:600;
}

.top-nav a:hover {
    background:#eef4ff;
    color:#1d4ed8;
}
.brand-text h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
}

.brand-text p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

/* MAIN CONTENT */
.main-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* WELCOME CARD */
.welcome-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.welcome-card h2 {
    margin: 0 0 10px;
    color: #0f172a;
}

.welcome-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

/* MODULE GRID */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.module-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
    border: 2px solid transparent;
}

.module-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.module-card.invoice:hover {
    border-color: #2563eb;
}

.module-card.payroll:hover {
    border-color: #16a34a;
}

.module-card.vendor:hover {
    border-color: #d97706;
}

.module-icon {
    font-size: 42px;
    margin-bottom: 18px;
}

.module-card h3 {
    margin: 0 0 12px;
    font-size: 24px;
    color: #0f172a;
}

.module-card p {
    margin: 0 0 20px;
    color: #64748b;
    line-height: 1.6;
}

/* STATUS BADGES */
.module-status {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.module-status.ready {
    background: #dcfce7;
    color: #166534;
}

.module-status.upcoming {
    background: #fef3c7;
    color: #92400e;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .top-header {
        padding: 20px;
    }

    .brand-block {
        flex-direction: column;
        align-items: flex-start;
    }

    .company-logo {
        height: 60px;
    }

    .brand-text h1 {
        font-size: 24px;
    }

    .main-container {
        padding: 24px 16px;
    }

    .welcome-card,
    .module-card {
        padding: 24px;
    }
}

/* =========================
   EXECUTIVE KPI CARDS
========================= */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.kpi-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    min-height: 120px;   /* reduced from 180px */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpi-icon {
    font-size: 34px;     /* reduced from 42px */
    line-height: 1;
    margin-bottom: 10px;
}

.kpi-card h3 {
    margin: 0 0 6px 0;
    font-size: 18px;     /* reduced from 22px */
    font-weight: 700;
    color: #0f172a;
}

.kpi-card p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

.kpi-card .kpi-value {
    color: #0f172a;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

/* Tablet */
@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .kpi-card {
        min-height: auto;
        padding: 18px 20px;
    }
}

.dashboard-row {
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 20px;
    margin-bottom: 30px;
}

.kpi-square {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.kpi-square .kpi-card {
    min-height: 100px;
}

@media (max-width: 900px) {

    .dashboard-row {
        grid-template-columns: 1fr;
    }

    .kpi-square {
        grid-template-columns: 1fr;
    }

}
.kpi-grid-financial {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:20px;
}

.mini-metric {
    background:#f8fafc;
    border-radius:12px;
    padding:16px;
}

.metric-label {
    display:block;
    font-size:13px;
    color:#64748b;
    margin-bottom:8px;
}

.metric-value {
    font-size:24px;
    font-weight:700;
    color:#0f172a;
}

.welcome-card canvas {
    height: 300px !important;
}
#vendorChart {
    height: 300px !important;
}

.summary-strip {
    display:flex;
    gap:16px;
    margin-bottom:20px;
}

.summary-item {
    flex:1;
    background:white;
    border-radius:12px;
    padding:14px 18px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.summary-label {
    display:block;
    font-size:12px;
    color:#64748b;
    margin-bottom:6px;
}

.summary-value {
    display:block;
    font-size:22px;
    font-weight:700;
    color:#0f172a;
}

/* ==========================================
   CEO DASHBOARD
========================================== */

.ceo-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:22px;
}

.ceo-header h2{
    margin:4px 0 8px;
    color:#0f172a;
    font-size:30px;
}

.ceo-header p{
    max-width:760px;
    margin:0;
    color:#64748b;
    line-height:1.5;
}

.company-admin-panel{
    margin:0 0 24px;
    padding:22px;
    border:1px solid #dbe7f5;
    border-radius:18px;
    background:linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%);
}

.company-admin-heading h3{ margin:4px 0 6px; color:#102a56; }
.company-admin-heading p{ margin:0; color:#64748b; }
.company-admin-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.company-admin-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:14px;
    padding:18px;
    border:1px solid #d4e2f5;
    border-radius:14px;
    background:#fff;
    color:#172033;
    text-decoration:none;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.company-admin-card:hover{ transform:translateY(-2px); border-color:#8eb8f3; box-shadow:0 12px 24px rgba(30,64,175,.1); }
.company-admin-card strong,.company-admin-card small{ display:block; }
.company-admin-card small{ margin-top:4px; color:#64748b; line-height:1.45; }
.company-admin-card b{ color:#2563eb; white-space:nowrap; }
.company-admin-icon{ display:grid; width:44px; height:44px; place-items:center; border-radius:12px; background:#eaf2ff; font-size:22px; }

.letterhead-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;padding:24px;border-radius:18px;background:linear-gradient(135deg,#102a6b,#1e40af);color:#fff;box-shadow:0 12px 30px rgba(30,64,175,.2)}
.letterhead-hero h2{margin:5px 0 7px;color:#fff;font-size:28px}.letterhead-hero p{margin:0;color:#dbeafe;line-height:1.5}.letterhead-hero .eyebrow{color:#bfdbfe!important}.letterhead-hero .secondary{background:#fff;color:#1e3a8a;border-color:#fff}
.letterhead-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:20px;margin-bottom:22px}
.letterhead-upload-card,.letterhead-preview-card,.letterhead-history-card,.letterhead-marks-card{background:#fff;border:1px solid #dbe4f0;border-radius:16px;box-shadow:0 7px 22px rgba(15,23,42,.06)}
.letterhead-upload-card{padding:22px}.letterhead-step,.letterhead-process-note{display:flex;align-items:center;gap:12px}.letterhead-step>span,.letterhead-process-note>span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#1e40af;color:#fff;font-weight:850}.letterhead-step strong,.letterhead-step small,.letterhead-process-note strong,.letterhead-process-note small{display:block}.letterhead-step small,.letterhead-process-note small{margin-top:3px;color:#64748b;line-height:1.4}
.letterhead-dropzone{display:grid;place-items:center;gap:7px;margin:18px 0;padding:30px 18px;border:2px dashed #93b4df;border-radius:14px;background:#f8fbff;text-align:center;cursor:pointer;transition:.2s}.letterhead-dropzone:hover{border-color:#2563eb;background:#eff6ff}.letterhead-dropzone input{position:absolute;opacity:0;pointer-events:none}.letterhead-dropzone small{color:#64748b;max-width:100%;overflow-wrap:anywhere}.letterhead-upload-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#dbeafe;color:#1d4ed8;font-size:26px;font-weight:900}
.letterhead-process-note{padding:13px;border-radius:12px;background:#f8fafc}.letterhead-process-note>span{background:#dbeafe;color:#1e40af}.letterhead-generate-button{width:100%;margin-top:18px;padding:13px 18px;border:0;border-radius:10px;background:#2563eb;color:#fff;font:inherit;font-weight:800;cursor:pointer}.letterhead-generate-button:hover{background:#1d4ed8}.letterhead-generate-button:disabled{opacity:.65;cursor:wait}
.letterhead-field{display:grid;gap:7px;margin:0 0 18px;color:#334155;font-size:13px;font-weight:800}.letterhead-field select{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#172033;font:inherit}.letterhead-field small{color:#64748b;font-weight:500}
.letterhead-preview-card{overflow:hidden}.letterhead-preview-card img{display:block;width:100%;height:340px;object-fit:contain;background:#eef2f7}.letterhead-preview-card div{padding:16px}.letterhead-preview-card strong,.letterhead-preview-card small{display:block}.letterhead-preview-card small{margin-top:4px;color:#64748b}
.letterhead-history-card{padding:20px}.letterhead-history-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:15px}.letterhead-history-heading h3{margin:4px 0 0;color:#102a56}.letterhead-history-heading>span{color:#64748b;font-size:13px}.letterhead-history-table-wrap{overflow-x:auto}.letterhead-history-table{width:100%;border-collapse:collapse;min-width:760px}.letterhead-history-table th{padding:11px 12px;background:#f1f5f9;color:#475569;font-size:11px;text-align:left;text-transform:uppercase;letter-spacing:.05em}.letterhead-history-table td{padding:12px;border-bottom:1px solid #e8edf4;color:#334155;font-size:13px;vertical-align:middle}.letterhead-history-table td strong,.letterhead-history-table td small{display:block}.letterhead-history-table td small{margin-top:3px;color:#64748b}.letterhead-history-table tr:last-child td{border-bottom:0}.letterhead-history-table td:last-child{text-align:right}.letterhead-empty{text-align:center!important;color:#64748b!important;padding:28px!important}
.letterhead-marks-card{margin-bottom:22px;padding:20px}.letterhead-mark-form{display:grid;grid-template-columns:1.1fr .85fr 1.2fr auto;align-items:end;gap:12px;padding:15px;border-radius:12px;background:#f8fafc}.letterhead-mark-form label{display:grid;gap:6px;color:#475569;font-size:12px;font-weight:800}.letterhead-mark-form input,.letterhead-mark-form select{min-width:0;padding:10px 11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#172033;font:inherit}.letterhead-mark-form input[type=file]{padding:8px}.letterhead-mark-form button,.letterhead-mark-item button{padding:10px 14px;border:0;border-radius:8px;background:#1e40af;color:#fff;font-weight:800;cursor:pointer}.letterhead-mark-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:15px}.letterhead-mark-item{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid #dbe4f0;border-radius:11px}.letterhead-mark-item img{width:86px;height:58px;object-fit:contain;background:#f8fafc;border-radius:7px}.letterhead-mark-item strong,.letterhead-mark-item small{display:block}.letterhead-mark-item small{margin-top:3px;color:#64748b}.letterhead-mark-item button{padding:8px 10px;background:#fff;color:#b42318;border:1px solid #fecaca}.letterhead-downloads{display:flex;justify-content:flex-end;gap:7px}.letterhead-downloads .ceo-export-btn{margin-top:0;padding:7px 10px}.letterhead-downloads .secondary{background:#fff;color:#1e40af;border:1px solid #93b4df}.letterhead-downloads form{margin:0}.letterhead-delete-button{padding:7px 10px;border:1px solid #fecaca;border-radius:8px;background:#fff;color:#b42318;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.letterhead-delete-button:hover{background:#fff1f2}
.letterhead-use-button{display:inline-block;margin-top:8px;color:#1d4ed8;font-size:12px;font-weight:850;text-decoration:none}.letterhead-use-button:hover{text-decoration:underline}
.letterhead-exact-preview-button{padding:12px 15px;border:1px solid #2563eb;border-radius:9px;background:#eff6ff;color:#1d4ed8;font-weight:850;cursor:pointer}.letterhead-exact-preview-button:disabled{opacity:.65;cursor:wait}
.letterhead-editor-card{margin-bottom:22px;padding:22px;background:#fff;border:1px solid #bfdbfe;border-radius:16px;box-shadow:0 8px 25px rgba(30,64,175,.09)}
.letterhead-editor-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);gap:20px}.letterhead-editor-fields{display:grid;gap:13px}.letterhead-editor-fields label{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:800}.letterhead-editor-fields input,.letterhead-editor-fields select,.letterhead-editor-fields textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#172033;font:inherit}.letterhead-editor-fields textarea{min-height:330px;resize:vertical;line-height:1.55}.letterhead-editor-fields input:focus,.letterhead-editor-fields select:focus,.letterhead-editor-fields textarea:focus{outline:3px solid #dbeafe;border-color:#2563eb}.letterhead-editor-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.45fr);align-items:end;gap:12px}.letterhead-body-label>span{display:flex;justify-content:space-between;gap:12px}.letterhead-body-label small{color:#64748b;font-weight:600}.letterhead-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.letterhead-editor-actions .letterhead-generate-button{width:auto;margin:0}.letterhead-clear-button{padding:12px 15px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#475569;font-weight:800;cursor:pointer}.letterhead-editor-help{margin:0;color:#64748b;font-size:12px;line-height:1.5}
.letterhead-live-preview{position:relative;min-height:0;aspect-ratio:210/297;overflow:hidden;border:1px solid #dbe4f0;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(15,23,42,.08)}.letterhead-live-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.letterhead-preview-copy{position:absolute;inset:19% 9% 11%;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;padding-right:4px;color:#1e293b;font-family:Arial,sans-serif;font-size:9px;line-height:1.5;white-space:pre-wrap;tab-size:4;scrollbar-width:thin}.letterhead-preview-copy strong{display:block;margin-bottom:12px;text-align:center;font-size:12px}.letterhead-preview-copy time{display:block;margin-bottom:9px;font-size:9px}.letterhead-preview-copy b{display:block;margin-bottom:9px;font-size:9px}.letterhead-preview-copy span{display:block}.letterhead-section-label{display:flex;align-items:center;gap:12px;margin:7px 0 18px;color:#64748b;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.letterhead-section-label:before,.letterhead-section-label:after{content:"";height:1px;flex:1;background:#dbe4f0}
.letterhead-live-preview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#525659}
.letterhead-date-options{margin:0;padding:13px;border:1px solid #dbe4f0;border-radius:10px;background:#f8fafc}.letterhead-date-options legend{padding:0 5px;color:#334155;font-size:12px;font-weight:850}.letterhead-date-toggle{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;justify-content:flex-start;gap:8px!important;margin-bottom:11px}.letterhead-date-toggle input{width:auto!important;margin:0}.letterhead-date-grid{display:grid;grid-template-columns:1.1fr .8fr 1fr;gap:10px;transition:opacity .2s}.letterhead-date-grid.is-disabled{opacity:.45}
.letterhead-format-toolbar{display:flex!important;align-items:center;justify-content:flex-start!important;flex-wrap:wrap;gap:6px!important;padding:7px;border:1px solid #cbd5e1;border-bottom:0;border-radius:9px 9px 0 0;background:#f8fafc}.letterhead-format-toolbar button{padding:5px 9px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#172033;cursor:pointer}.letterhead-format-toolbar button:hover{border-color:#2563eb;color:#1d4ed8}.letterhead-format-toolbar em{margin-left:auto;color:#64748b;font-size:11px;font-style:normal}.letterhead-format-toolbar+textarea{border-radius:0 0 9px 9px!important}.letterhead-preview-copy>span{text-align:justify}.letterhead-preview-copy>span>span{display:block}.letterhead-preview-copy>span b,.letterhead-preview-copy>span i,.letterhead-preview-copy>span u{font-size:inherit}
.letterhead-preview-copy>span.letterhead-preview-table-row{display:grid;grid-template-columns:28% 1fr;text-align:left}.letterhead-preview-copy>span.letterhead-preview-table-row>span{display:block;min-width:0}
.letterhead-approval-options{margin:0;padding:13px;border:1px solid #dbe4f0;border-radius:10px}.letterhead-approval-options legend{padding:0 5px;color:#334155;font-size:12px;font-weight:850}.letterhead-approval-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.letterhead-approval-grid .is-disabled{opacity:.45}.letterhead-preview-marks{position:absolute;left:9%;right:9%;bottom:11%;z-index:4;display:flex;align-items:flex-end;gap:10px;pointer-events:none}.letterhead-preview-marks img{max-width:18%;max-height:10%;object-fit:contain;pointer-events:auto}
.letterhead-live-preview.custom-mark-placement .letterhead-preview-marks{inset:0}.letterhead-live-preview.custom-mark-placement .letterhead-preview-marks img{position:absolute;z-index:4;max-width:18%;max-height:10%;cursor:move;touch-action:none;user-select:none}.letterhead-live-preview.custom-mark-placement #letterhead-preview-signature{left:9.5%;top:78%}.letterhead-live-preview.custom-mark-placement #letterhead-preview-stamp{left:28%;top:78%}
.letterhead-preview-marks[hidden],.letterhead-preview-marks img[hidden]{display:none!important}
.letterhead-clear-mark{margin-top:9px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#475569;font-size:12px;font-weight:800;cursor:pointer}.letterhead-clear-mark:hover{border-color:#dc2626;color:#b91c1c;background:#fff7f7}
.letterhead-placement-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0;padding:11px;border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc}.letterhead-placement-choice legend{padding:0 5px;color:#334155;font-size:12px;font-weight:850}.letterhead-placement-choice label{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px!important;margin:0;padding:9px;border:1px solid #dbe4f0;border-radius:8px;background:#fff;color:#334155;font-size:12px;font-weight:750;cursor:pointer}.letterhead-placement-choice input{width:auto!important;margin:0}.letterhead-placement-choice label:has(input:checked){border-color:#2563eb;background:#eff6ff;color:#1d4ed8}
.letterhead-repository-link{display:flex;align-items:center;justify-content:space-between;gap:18px}.letterhead-repository-link h3{margin:4px 0 5px;color:#102a56}.letterhead-repository-link p:last-child{margin:0;color:#64748b}
.letterhead-downloads .letterhead-edit-button{background:#ecfdf3;color:#067647;border-color:#a6f4c5}
.approval-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}.approval-upload-card{display:grid;gap:14px;padding:21px;border:1px solid #bfdbfe;border-radius:16px;background:#fff;box-shadow:0 7px 22px rgba(15,23,42,.06)}.approval-upload-card.stamp{border-color:#c7d2fe}.approval-upload-card h3{margin:4px 0;color:#102a56}.approval-upload-card p:last-child{margin:0;color:#64748b;font-size:13px}.approval-upload-card label{display:grid;gap:6px;color:#334155;font-size:12px;font-weight:800}.approval-upload-card input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;font:inherit}.approval-upload-card small{color:#64748b;font-weight:500}.approval-upload-card button{padding:12px;border:0;border-radius:9px;background:#1e40af;color:#fff;font-weight:850;cursor:pointer}.approval-upload-card.stamp button{background:#4338ca}

.eyebrow{
    margin:0;
    color:#2563eb !important;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.ceo-period{
    min-width:230px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:14px 16px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.ceo-period span,
.ceo-period strong{
    display:block;
}

.ceo-period span{
    color:#0f172a;
    font-size:18px;
    font-weight:800;
}

.ceo-period strong{
    margin-top:4px;
    color:#64748b;
    font-size:12px;
}

.ceo-export-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:12px;
    background:#2563eb;
    color:white;
    text-decoration:none;
    border:none;
    border-radius:8px;
    padding:9px 12px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}

.ceo-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.ceo-kpi-grid.compact{
    margin-top:6px;
}

.ceo-kpi-card{
    min-height:132px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:18px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.ceo-kpi-card.accent{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.ceo-kpi-card span,
.ceo-kpi-card small{
    display:block;
}

.ceo-kpi-card span{
    color:#64748b;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.ceo-kpi-card strong{
    display:block;
    margin:10px 0 8px;
    color:#0f172a;
    font-size:24px;
    line-height:1.1;
}

.ceo-kpi-card small{
    color:#64748b;
    font-size:12px;
    line-height:1.4;
}

.ceo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

.ceo-grid-primary{
    grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
}

.ceo-panel{
    min-height:390px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:20px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.ceo-panel-large{
    min-height:430px;
}

.panel-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}

.panel-title h3{
    margin:0 0 5px;
    color:#0f172a;
    font-size:18px;
}

.panel-title p{
    margin:0;
    color:#64748b;
    font-size:13px;
    line-height:1.4;
}

.ceo-panel canvas{
    width:100% !important;
    height:315px !important;
}

.ceo-panel-large canvas{
    height:350px !important;
}

.insight-list{
    display:grid;
    gap:12px;
}

.insight-item{
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f8fafc;
    padding:13px 14px;
}

.insight-item span,
.insight-item small{
    display:block;
}

.insight-item span{
    color:#64748b;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.insight-item strong{
    display:block;
    margin:6px 0;
    color:#0f172a;
    font-size:20px;
}

.insight-item small{
    color:#64748b;
    line-height:1.4;
}

/* ==========================================
   TASK MANAGEMENT PREVIEW
========================================== */

.task-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:22px;
    margin-bottom:20px;
}

.task-header h2{
    margin:4px 0 8px;
    color:#0f172a;
    font-size:30px;
}

.task-header p{
    max-width:780px;
    margin:0;
    color:#64748b;
    line-height:1.5;
}

.task-flow{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.flow-step{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:16px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.flow-step.active{
    border-color:#bfdbfe;
    background:#eff6ff;
}

.flow-step span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#2563eb;
    color:white;
    font-size:13px;
    font-weight:800;
}

.flow-step strong,
.flow-step small{
    display:block;
}

.flow-step strong{
    margin:10px 0 6px;
    color:#0f172a;
}

.flow-step small{
    color:#64748b;
    line-height:1.4;
}

.task-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(320px, .65fr);
    gap:18px;
    margin-bottom:18px;
}

.task-grid .wide{
    min-width:0;
}

.task-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin-bottom:18px;
}

.task-kpi{
    min-height:112px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#ffffff;
    padding:16px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.task-kpi span,
.task-kpi small{
    display:block;
    color:#64748b;
}

.task-kpi span{
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.task-kpi strong{
    display:block;
    margin-top:10px;
    color:#0f172a;
    font-size:24px;
}

.task-kpi small{
    margin-top:6px;
    font-size:13px;
}

.task-panel{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:20px;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
}

.mini-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border-radius:8px;
    background:#eef4ff;
    color:#1e3a8a;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}

.tracker-table-wrap{
    width:100%;
    overflow-x:auto;
}

.tracker-table{
    width:100%;
    min-width:1180px;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid #dbe4f0;
    border-radius:8px;
    overflow:hidden;
}

.tracker-table th{
    background:#102a6b;
    color:#ffffff;
    font-size:12px;
    font-weight:800;
    text-align:left;
    padding:10px;
    white-space:nowrap;
}

.tracker-table td{
    border-top:1px solid #e5e7eb;
    padding:8px;
    vertical-align:top;
    background:#ffffff;
    font-size:13px;
}

.tracker-table input,
.tracker-table select,
.tracker-table textarea{
    width:100%;
    min-width:120px;
    border:1px solid #dbe4f0;
    border-radius:6px;
    padding:8px;
    font:inherit;
    color:#172033;
}

.tracker-table textarea{
    min-height:62px;
    resize:vertical;
}

.tracker-table button{
    border:0;
    border-radius:7px;
    background:#2563eb;
    color:#ffffff;
    padding:9px 12px;
    font-weight:800;
    cursor:pointer;
}

.task-table{
    display:grid;
    gap:8px;
}

.task-row{
    display:grid;
    grid-template-columns:1.5fr 1fr .8fr .8fr .8fr;
    gap:12px;
    align-items:center;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:12px;
}

.task-head{
    background:#f8fafc;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.task-row strong,
.task-row small{
    display:block;
}

.task-row small{
    margin-top:3px;
    color:#64748b;
}

.task-row mark{
    display:inline-block;
    background:#dcfce7;
    color:#166534;
    border-radius:999px;
    padding:5px 8px;
    font-size:12px;
    font-weight:800;
}

.project-cost-table .task-row{
    grid-template-columns:1.4fr 1fr .85fr .85fr .85fr .85fr .75fr;
}

.task-row mark.health-yellow{
    background:#fef3c7;
    color:#92400e;
}

.task-row mark.health-red{
    background:#fee2e2;
    color:#991b1b;
}

.project-board{
    display:grid;
    gap:18px;
}

.project-card{
    border:1px solid #dbe4f0;
    border-radius:8px;
    background:#ffffff;
    padding:16px;
}

.project-card-head{
    display:flex;
    justify-content:space-between;
    gap:14px;
    align-items:flex-start;
    border-bottom:1px solid #e5e7eb;
    padding-bottom:12px;
    margin-bottom:14px;
}

.project-card-head h4{
    margin:0;
    color:#0f172a;
    font-size:26px;
    line-height:1.15;
}

.project-title-link{
    color:#0f172a;
    text-decoration:none;
}

.project-title-link:hover{
    color:#2563eb;
}

.project-header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.ceo-export-btn.secondary{
    background:#64748b;
}

.project-card-head p{
    margin:5px 0 0;
    color:#64748b;
}

.project-card-head mark{
    display:inline-block;
    background:#dcfce7;
    color:#166534;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.project-card-head mark.health-yellow{
    background:#fef3c7;
    color:#92400e;
}

.project-card-head mark.health-red{
    background:#fee2e2;
    color:#991b1b;
}

.project-meta-grid,
.project-cost-strip{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:14px;
}

.project-cost-strip{
    grid-template-columns:repeat(5, minmax(0, 1fr));
}

.project-meta-grid div,
.project-cost-strip div{
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:10px;
    min-height:72px;
    background:#f8fafc;
}

.project-meta-grid span,
.project-cost-strip span{
    display:block;
    color:#64748b;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.project-meta-grid strong,
.project-cost-strip strong{
    display:block;
    margin-top:6px;
    color:#0f172a;
    font-size:15px;
}

.project-task-list{
    display:grid;
    gap:8px;
    margin-top:6px;
}

.project-task-head,
.project-task-row{
    display:grid;
    grid-template-columns:1.35fr 1fr .9fr .7fr .7fr .7fr .7fr;
    gap:10px;
    align-items:center;
}

.project-task-head{
    color:#64748b;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:0 10px;
}

.project-task-row{
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:10px;
    background:#ffffff;
}

.project-task-row strong,
.project-task-row small{
    display:block;
}

.project-task-row small{
    margin-top:3px;
    color:#64748b;
}

.task-lifecycle-line{
    grid-column:1 / -1;
    color:#64748b;
    font-size:13px;
}

.project-task-row-edit{
    align-items:start;
}

.task-inline-form{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    border-top:1px solid #e5e7eb;
    margin-top:8px;
    padding-top:10px;
}

.task-inline-form input,
.task-inline-form select{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:8px;
    min-height:38px;
}

.task-inline-form button{
    border:none;
    border-radius:8px;
    background:#2563eb;
    color:#ffffff;
    font-weight:800;
    padding:8px 10px;
}

.reassign-form{
    grid-template-columns:minmax(0, 1fr) 130px;
    border-top:none;
    margin-top:0;
    padding-top:0;
}

.reassign-form button{
    background:#64748b;
}

.project-files-strip{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    border-top:1px solid #e5e7eb;
    margin-top:14px;
    padding-top:12px;
    color:#64748b;
}

.project-files-strip strong{
    color:#0f172a;
}

.project-files-strip span{
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:6px 9px;
    background:#f8fafc;
}

.task-empty{
    border:1px dashed #cbd5e1;
    border-radius:8px;
    color:#64748b;
    padding:18px;
    text-align:center;
}

.upload-preview{
    display:grid;
    gap:12px;
}

.task-panel > .upload-preview{
    margin-top:14px;
    padding:18px;
    border:1px solid #dbe4f0;
    border-radius:12px;
    background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
}

.upload-preview label{
    color:#334155;
    font-size:13px;
    font-weight:800;
}

.upload-preview input,
.upload-preview select,
.upload-preview textarea{
    width:100%;
    border:1px solid #cbd5e1;
    border-radius:8px;
    padding:11px 12px;
    min-height:44px;
    box-sizing:border-box;
    background:#ffffff;
    color:#172033;
    font:inherit;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.upload-preview input:focus,
.upload-preview select:focus,
.upload-preview textarea:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.13);
}

.upload-preview input::placeholder,
.upload-preview textarea::placeholder{
    color:#94a3b8;
}

.upload-preview textarea{
    min-height:96px;
    resize:vertical;
}

.upload-preview button{
    margin-top:6px;
    border:none;
    border-radius:8px;
    background:#2563eb;
    color:white;
    min-height:44px;
    padding:11px 15px;
    font-weight:800;
    cursor:pointer;
    transition:background .15s ease, transform .15s ease;
}

.upload-preview button:hover{
    background:#1d4ed8;
}

.upload-preview button:active{
    transform:translateY(1px);
}

.task-form-pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.task-form-pair > div{
    display:grid;
    align-content:start;
    gap:7px;
    min-width:0;
}

.task-check{
    display:flex !important;
    align-items:center;
    gap:8px;
    color:#334155;
    font-size:13px;
    font-weight:800;
}

.task-check input{
    width:auto;
    min-height:0;
}

.compact-form{
    border-bottom:1px solid #e5e7eb;
    margin-bottom:18px;
    padding-bottom:18px;
}

.task-panel > .compact-form{
    margin-bottom:14px;
    padding-bottom:18px;
}

.compact-form:last-child{
    border-bottom:none;
    margin-bottom:0;
    padding-bottom:0;
}

.client-view-note{
    margin-top:18px;
    border:1px solid #bfdbfe;
    border-radius:8px;
    background:#eff6ff;
    padding:14px;
}

.client-view-note strong,
.client-view-note span{
    display:block;
}

.client-view-note strong{
    color:#1e3a8a;
}

.client-view-note span{
    margin-top:8px;
    color:#475569;
    line-height:1.45;
}

.client-list{
    display:grid;
    gap:10px;
}

.client-list div{
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f8fafc;
    padding:12px;
}

.client-list strong,
.client-list span{
    display:block;
}

.client-list span{
    margin-top:4px;
    color:#64748b;
    font-size:13px;
}

.smart-blueprint{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.smart-blueprint div{
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f8fafc;
    padding:14px;
}

.smart-blueprint strong,
.smart-blueprint span{
    display:block;
}

.smart-blueprint span{
    margin-top:8px;
    color:#64748b;
    line-height:1.45;
}

.activity-grid span{
    border-top:1px solid #e5e7eb;
    padding-top:8px;
}

.access-blueprint{
    grid-template-columns:1fr 1fr;
}

@media(max-width:1100px){
    .company-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .letterhead-workspace{grid-template-columns:1fr}
    .letterhead-editor-grid{grid-template-columns:1fr}.letterhead-live-preview{min-height:620px}
    .letterhead-mark-form{grid-template-columns:1fr 1fr}.letterhead-mark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ceo-kpi-grid,
    .task-kpi-grid,
    .ceo-grid,
    .ceo-grid-primary,
    .task-flow,
    .task-grid,
    .project-meta-grid,
    .project-cost-strip,
    .smart-blueprint{
        grid-template-columns:1fr 1fr;
    }

    .project-task-head,
    .project-task-row,
    .task-inline-form{
        grid-template-columns:1.4fr 1fr .8fr .8fr;
    }

    .project-task-head span:nth-child(5),
    .project-task-head span:nth-child(6),
    .project-task-head span:nth-child(7),
    .project-task-row span:nth-child(5),
    .project-task-row span:nth-child(6),
    .project-task-row span:nth-child(7){
        display:none;
    }
}

@media(max-width:760px){
    .company-admin-grid{ grid-template-columns:1fr; }
    .letterhead-hero{flex-direction:column}.letterhead-history-heading{align-items:flex-start;flex-direction:column}
    .letterhead-editor-row{grid-template-columns:1fr}.letterhead-editor-actions{justify-content:stretch}.letterhead-editor-actions .letterhead-generate-button{flex:1}.letterhead-live-preview{min-height:470px}
    .letterhead-date-grid{grid-template-columns:1fr}
    .letterhead-approval-grid{grid-template-columns:1fr}
    .approval-upload-grid{grid-template-columns:1fr}
    .letterhead-mark-form,.letterhead-mark-grid{grid-template-columns:1fr}.letterhead-mark-item{grid-template-columns:76px minmax(0,1fr)}.letterhead-mark-item form{grid-column:1/-1}.letterhead-mark-item button{width:100%}
    .ceo-header,
    .task-header{
        flex-direction:column;
    }

    .ceo-period{
        width:100%;
    }

    .ceo-kpi-grid,
    .task-kpi-grid,
    .ceo-grid,
    .ceo-grid-primary,
    .task-flow,
    .task-grid,
    .project-meta-grid,
    .project-cost-strip,
    .smart-blueprint{
        grid-template-columns:1fr;
    }

    .ceo-panel,
    .ceo-panel-large{
        min-height:360px;
    }

    .task-row{
        grid-template-columns:1fr;
    }

    .project-cost-table .task-row,
    .project-task-head,
    .project-task-row,
    .task-inline-form,
    .reassign-form,
    .task-form-pair{
        grid-template-columns:1fr;
    }

    .project-task-head{
        display:none;
    }

    .project-task-row span:nth-child(5),
    .project-task-row span:nth-child(6),
    .project-task-row span:nth-child(7){
        display:block;
    }
}
.top-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.nav-left{
    display:flex;
    gap:20px;
}

.nav-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.user-badge{
    background:#f2f4f8;
    padding:8px 14px;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
}

.logout-btn{
    background:#dc3545;
    color:white !important;
    padding:8px 16px;
    border-radius:6px;
    text-decoration:none;
}
.user-table{
    width:100%;
    border-collapse:collapse;
}

.user-table th{
    position:sticky;
    top:0;
    z-index:10;
    background:#f4f6f8;
    text-align:left;
    padding:12px;
}

.user-table td{
    padding:12px;
    border-bottom:1px solid #ececec;
}

.status-active{
    background:#d1fae5;
    color:#065f46;
    padding:4px 10px;
    border-radius:12px;
}

.status-disabled{
    background:#fee2e2;
    color:#991b1b;
    padding:4px 10px;
    border-radius:12px;
}

/* ==========================================
   DREAMWORTH ONE LOGIN
========================================== */

.login-body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        #0f172a 0%,
        #1e3a8a 100%
    );
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.login-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:30px;
}

.login-card{
    width:100%;
    max-width:520px;
    background:white;
    border-radius:24px;
    padding:35px 45px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,0.25);
}

.login-logo{
    height:110px;
    width:auto;
    margin-bottom:20px;
}

.login-title{
    margin:0;
    font-size:34px;
    font-weight:800;
    color:#0f172a;
}

.login-subtitle{
    margin-top:10px;
    color:#2563eb;
    font-size:16px;
    font-weight:600;
}

.login-description{
    margin-top:12px;
    margin-bottom:30px;
    color:#64748b;
    font-size:14px;
}

.login-form{
    text-align:left;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#334155;
}

.form-group input{
    width:100%;
    padding:14px 16px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:15px;
    transition:all .2s ease;
}

.form-group input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,0.12);
}

.login-btn{
    width:100%;
    border:none;
    border-radius:12px;
    padding:15px;
    background:#2563eb;
    color:white;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s ease;
}

.login-btn:hover{
    background:#1d4ed8;
    transform:translateY(-1px);
}

.employee-portal-link{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:12px;
    padding:13px;
    border:1px solid #bfdbfe;
    border-radius:12px;
    background:#eff6ff;
    color:#1d4ed8;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:all .2s ease;
}

.employee-portal-link:hover{
    background:#dbeafe;
    transform:translateY(-1px);
}

.login-error{
    margin-top:20px;
    background:#fee2e2;
    color:#991b1b;
    padding:12px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
}

.login-footer{
    margin-top:25px;
    font-size:12px;
    color:#94a3b8;
}

@media(max-width:600px){

    .login-card{
        padding:30px 24px;
    }

    .login-title{
        font-size:28px;
    }

    .login-logo{
        height:70px;
    }

}
/* ==========================================
   TOAST NOTIFICATIONS
========================================== */

#toast-container{
    position:fixed;
    top:20px;
    right:20px;
    z-index:99999;

    display:flex;
    flex-direction:column;
    gap:12px;
}

.toast{
    min-width:320px;
    max-width:420px;

    padding:14px 18px;

    border-radius:12px;

    color:white;

    font-size:14px;
    font-weight:600;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.18);

    animation:toastSlide .35s ease;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

/* SUCCESS */

.toast-success{
    background:#16a34a;
}

/* ERROR */

.toast-error{
    background:#dc2626;
}

/* WARNING */

.toast-warning{
    background:#d97706;
}

/* INFO */

.toast-info{
    background:#2563eb;
}

@keyframes toastSlide{

    from{
        opacity:0;
        transform:translateX(50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}
/* ==========================================
   HEADER PROFILE AREA
========================================== */

.notification-bell{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#f8fafc;
    color:#d97706;

    font-size:18px;

    cursor:pointer;
}

.profile-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    background:#f8fafc;
    border:1px solid #e5e7eb;

    padding:8px 14px;

    border-radius:12px;

    min-width:140px;
}

.profile-name{
    font-size:14px;
    font-weight:700;
    color:#0f172a;
}

.profile-role{
    font-size:12px;
    color:#64748b;
}

.logout-btn{
    background:#dc2626;
    color:white !important;

    padding:10px 18px;

    border-radius:10px;

    font-weight:600;
}

.logout-btn:hover{
    background:#b91c1c;
}
/* ==========================================
   HEADER V2
========================================== */

.header-top-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    max-width:1500px;
    margin:0 auto;
    padding:14px 30px 8px;
}

.header-nav-row{
    display:flex;
    justify-content:flex-start;
    max-width:1500px;
    margin:0 auto;
    padding:0 30px 14px;
}

.brand-section{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.company-logo{
    height:52px;
    width:auto;
}

.brand-text h1{
    margin:0;
    color:#0f172a;
    font-size:24px;
    font-weight:700;
    line-height:1.15;
}

.brand-text p{
    margin-top:3px;
    color:#64748b;
    font-size:13px;
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

.top-nav{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-start;
}

.top-nav a{
    background:#f8fafc;
    color:#334155;
    text-decoration:none;
    padding:9px 14px;
    border-radius:10px;
    font-weight:600;
    transition:all .2s ease;
}

.top-nav a.active{
    background:#2563eb;
    color:#ffffff;
}

/* Proposals */
.proposal-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 30px;margin-bottom:22px;border-radius:20px;background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;box-shadow:0 16px 40px rgba(15,23,42,.18)}
.proposal-hero h2{margin:2px 0 8px;font-size:30px}.proposal-hero p{margin:0;max-width:720px;color:#dbeafe}.proposal-hero .eyebrow{color:#93c5fd}
.proposal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}.proposal-form-card,.proposal-preview-card,.proposal-history-card{background:#fff;border-radius:18px;box-shadow:0 5px 20px rgba(15,23,42,.08);padding:24px}
.proposal-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.proposal-section-heading h3{margin:2px 0 0;color:#0f172a;font-size:22px}.proposal-section-heading>span{font-size:12px;color:#64748b}
.proposal-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.proposal-fields-grid label,.proposal-notes{display:flex;flex-direction:column;gap:7px;color:#334155;font-size:13px;font-weight:700}.proposal-fields-grid input,.proposal-fields-grid select,.proposal-notes textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:10px;padding:11px 12px;background:#fff;color:#0f172a;font:inherit;font-weight:500}.proposal-notes{margin-top:16px}.proposal-notes textarea{resize:vertical}
.proposal-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:18px;padding:28px 20px;border:2px dashed #93c5fd;border-radius:14px;background:#eff6ff;color:#1e3a8a;cursor:pointer}.proposal-dropzone:hover{background:#dbeafe}.proposal-dropzone input{position:absolute;opacity:0;pointer-events:none}.proposal-dropzone small{margin-top:5px;color:#64748b;font-weight:500}.proposal-upload-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:9px;border-radius:50%;background:#2563eb;color:white;font-size:24px}
.proposal-preserve-note{display:flex;gap:12px;align-items:flex-start;margin:15px 0;padding:13px 15px;border-radius:11px;background:#f8fafc;color:#475569;font-size:13px}.proposal-preserve-note strong{white-space:nowrap;color:#0f172a}.proposal-generate-button{width:100%;border:0;border-radius:11px;padding:13px 18px;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}.proposal-generate-button:hover{background:#1d4ed8}.proposal-generate-button:disabled{opacity:.65;cursor:wait}
.proposal-preview-card img{display:block;width:100%;border:1px solid #e2e8f0;border-radius:10px;box-shadow:0 5px 14px rgba(15,23,42,.1)}.proposal-preview-card div{display:flex;flex-direction:column;gap:4px;margin-top:14px}.proposal-preview-card small{color:#64748b}.proposal-history-card{margin-top:22px}.proposal-table-wrap{overflow-x:auto}.proposal-table{width:100%;border-collapse:collapse}.proposal-table th{padding:11px;text-align:left;color:#475569;background:#f8fafc;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.proposal-table td{padding:13px 11px;border-bottom:1px solid #e2e8f0;vertical-align:top;color:#334155}.proposal-table td strong,.proposal-table td small{display:block}.proposal-table td small{margin-top:3px;color:#94a3b8}.proposal-status{display:inline-block;padding:5px 9px;border-radius:99px;background:#e0e7ff;color:#3730a3;font-size:12px;font-weight:700}.proposal-actions{display:flex;gap:7px;flex-wrap:wrap}.proposal-actions a{padding:6px 8px;border-radius:7px;background:#eff6ff;color:#1d4ed8;text-decoration:none;font-size:12px;font-weight:700}.proposal-empty{text-align:center;color:#64748b;padding:28px!important}
@media(max-width:900px){.proposal-layout{grid-template-columns:1fr}.proposal-preview-card{display:none}.proposal-hero{align-items:flex-start;flex-direction:column}.proposal-fields-grid{grid-template-columns:1fr}}

.top-nav a:hover{
    background:#eef4ff;
    color:#1d4ed8;
    transform:translateY(-1px);
}

.top-nav a.active:hover{
    background:#1d4ed8;
    color:#ffffff;
}
/* ==========================================
   USERS MODULE
========================================== */

.page-header-card{
    background:white;
    padding:24px 30px;
    border-radius:16px;
    margin-bottom:24px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.page-header-card h2{
    margin:0;
    color:#0f172a;
}

.page-header-card p{
    margin-top:8px;
    color:#64748b;
}

.content-card,
.form-card{
    background:white;
    padding:24px;
    border-radius:16px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.content-card:has(table){
    max-height:78vh;
    overflow:auto;
}

.primary-btn{
    background:#2563eb;
    color:white;
    text-decoration:none;
    border:none;
    padding:12px 18px;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
}

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

.secondary-btn{
    background:#f1f5f9;
    color:#334155;
    text-decoration:none;
    padding:10px 14px;
    border-radius:10px;
    margin-left:8px;
}

.action-btn{
    background:#2563eb;
    color:white;
    text-decoration:none;
    padding:8px 12px;
    border-radius:8px;
    font-size:13px;
    margin-right:6px;
}

.role-admin,
.role-payroll,
.role-invoice,
.role-vendor{
    padding:6px 10px;
    border-radius:12px;
    font-size:13px;
    font-weight:600;
}

.role-admin{
    background:#dbeafe;
    color:#1d4ed8;
}

.role-payroll{
    background:#ede9fe;
    color:#6d28d9;
}

.role-invoice{
    background:#dcfce7;
    color:#15803d;
}

.role-vendor{
    background:#ffedd5;
    color:#c2410c;
}

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

.form-group input,
.form-group select{
    width:100%;
    padding:12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
}

.top-nav a{
    color:#334155;
    text-decoration:none;
    padding:9px 14px;
    border-radius:10px;
    transition:.25s;
    font-weight:600;
    background:#f8fafc;
}

.top-nav a:hover{
    background:#eef4ff;
    color:#1d4ed8;
}

.top-nav a.active{
    background:#2563eb;
    color:#ffffff;
    box-shadow:none;
}

.nav-menu{position:relative;z-index:30}.nav-menu summary{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;background:#f8fafc;color:#334155;font-weight:600;cursor:pointer;list-style:none;transition:.25s;white-space:nowrap}.nav-menu summary::-webkit-details-marker{display:none}.nav-menu summary:hover{background:#eef4ff;color:#1d4ed8}.nav-menu summary.active{background:#2563eb;color:#fff}.nav-menu summary span{font-size:10px;transition:transform .2s}.nav-menu[open] summary span{transform:rotate(180deg)}.nav-menu-panel{position:absolute;top:calc(100% + 8px);left:0;display:grid;width:270px;padding:8px;border:1px solid #dbe4f0;border-radius:13px;background:#fff;box-shadow:0 15px 35px rgba(15,23,42,.18)}.top-nav .nav-menu-panel a{display:grid;gap:3px;padding:11px 12px;background:#fff;border-radius:9px;color:#334155}.top-nav .nav-menu-panel a:hover{background:#eff6ff;color:#1d4ed8}.top-nav .nav-menu-panel a.active{background:#dbeafe;color:#1e40af}.nav-menu-panel strong{font-size:13px}.nav-menu-panel small{color:#64748b;font-size:11px;font-weight:500}

@media(max-width:760px){.nav-menu{position:static}.nav-menu-panel{position:fixed;top:auto;right:14px;left:14px;width:auto;z-index:100}}