@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: #f7f6f3;
    color: #1a1a1a;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Subtle branded background watermark */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 85% 15%, rgba(0,0,0,0.018) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 85%, rgba(0,0,0,0.012) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Watermark only on login (see .login-container::after below) */

header, main, .status-hint { position: relative; z-index: 1; }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: #000;
    color: #fff;
}

.logo {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-right label {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#user-select {
    background: #222;
    color: #fff;
    border: 1px solid #444;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}
#user-select:focus { outline: 2px solid #888; outline-offset: 2px; }

main {
    padding: 32px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Workflow Stepper */
.workflow-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    position: relative;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid #ccc;
    color: #999;
    background: #fff;
    flex-shrink: 0;
}

.step.active .step-number {
    border-color: #000;
    color: #000;
    background: #000;
    color: #fff;
}

.step.complete .step-number {
    border-color: #2e7d32;
    background: #2e7d32;
    color: #fff;
}

.step-content {
    display: flex;
    flex-direction: column;
}

.step-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
}

.step.active .step-title { color: #000; }
.step.complete .step-title { color: #2e7d32; }

.step-desc {
    font-size: 11px;
    color: #999;
    margin-top: 1px;
}

.step-connector {
    flex: 0 0 40px;
    height: 2px;
    background: #e0e0e0;
    margin: 0 8px;
}

.step-connector.complete { background: #2e7d32; }

/* Status hint banner */
.status-hint {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-hint.info {
    background: #f0f4f8;
    border: 1px solid #d0dbe7;
    color: #2c5282;
}

.status-hint.success {
    background: #f0faf0;
    border: 1px solid #c6e6c6;
    color: #2e7d32;
}

.status-hint.warning {
    background: #fefce8;
    border: 1px solid #e8e0a8;
    color: #92600e;
}

/* Batch Cards */
.batch-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 12px;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #ccc;
    transition: box-shadow 0.15s;
}
.batch-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.batch-card.pending { border-left-color: #d32f2f; }
.batch-card.dept_approved { border-left-color: #f9a825; }
.batch-card.exported { border-left-color: #2e7d32; }
.batch-card.partial { border-left-color: #e65100; }

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

.batch-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    letter-spacing: 0.02em;
}

.batch-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.batch-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* Status Badges */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge.pending { background: #fce4ec; color: #c62828; }
.badge.dept_approved, .badge.dept-approved { background: #fff8e1; color: #e65100; }
.badge.accounting_approved, .badge.accounting-approved { background: #e8f5e9; color: #2e7d32; }
.badge.exported { background: #e8f5e9; color: #2e7d32; }
.badge.flagged { background: #fce4ec; color: #c62828; }
.badge.manual, .badge.acknowledged { background: #fff3e0; color: #e65100; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: opacity 0.15s;
}
.btn-approve { background: #000; color: #fff; }
.btn-flag { background: #d32f2f; color: #fff; }
.btn-acknowledge { background: #e65100; color: #fff; }
.btn-export { background: #000; color: #fff; }
.btn-review {
    background: transparent;
    border: 1px solid #000;
    color: #000;
}
.btn:hover { opacity: 0.8; }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Filter Tabs */
.tabs {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.tab {
    padding: 10px 20px;
    font-size: 12px;
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: #000; }
.tab.active {
    color: #000;
    border-bottom-color: #000;
    font-weight: 600;
}

/* Invoice Table */
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}
.invoice-table th {
    text-align: left;
    padding: 10px 14px;
    background: #fafaf8;
    color: #666;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #e5e5e5;
}
.invoice-table td {
    padding: 6px 14px;
    border-bottom: 1px solid #f0f0ee;
    color: #333;
    font-size: 12px;
}
.invoice-table tr:hover { background: #fafaf8; }
.invoice-table .amount { text-align: right; font-family: 'SF Mono', 'Cascadia Code', monospace; }

.invoice-number {
    color: #000;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}
.invoice-number:hover { text-decoration: underline; }

/* Expanded Row */
.expanded-row {
    background: #fafaf8;
    display: none;
}
.expanded-row.visible { display: table-row; }

.expanded-content {
    padding: 20px;
}

.detail-grid {
    display: flex;
    gap: 32px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.detail-item label {
    display: block;
    color: #999;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}
.detail-item span { color: #1a1a1a; font-size: 13px; }

.row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.comment-input {
    background: #fff;
    border: 1px solid #ddd;
    color: #1a1a1a;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    width: 220px;
}
.comment-input:focus { outline: 2px solid #000; outline-offset: 1px; }

/* Manual/flagged row indicators */
tr.manual-row td:first-child { border-left: 3px solid #e65100; }
tr.flagged-row td:first-child { border-left: 3px solid #d32f2f; }

/* Bulk action bar */
.bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    margin-bottom: 16px;
}
.bulk-bar .selected-count { color: #666; font-size: 13px; margin-left: 8px; }

/* Uniform action-button heights regardless of label length or border */
.bulk-bar .btn {
    box-sizing: border-box;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    font-size: 12px;
    white-space: nowrap;
}
.bulk-bar .btn-icon { padding: 0; width: 34px; }
.bulk-bar .btn-icon svg { width: 16px; height: 16px; display: block; }

/* Export actions dropdown (native <details>) */
.bulk-dropdown { position: relative; display: inline-block; }
.bulk-dropdown > summary {
    list-style: none;
    cursor: pointer;
    box-sizing: border-box;
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: #000;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    user-select: none;
}
.bulk-dropdown > summary::-webkit-details-marker { display: none; }
.bulk-dropdown > summary::after { content: '\25BE'; font-size: 10px; opacity: 0.7; }
.bulk-dropdown[open] > summary::after { content: '\25B4'; }
.bulk-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-width: 220px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    z-index: 30;
    overflow: hidden;
    padding: 4px 0;
}
.bulk-menu button, .bulk-menu a {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    background: none;
    border: none;
    font-size: 13px;
    color: #1a1a1a;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.bulk-menu button:hover, .bulk-menu a:hover { background: #f5f5f5; }
.bulk-menu .menu-sep { border-top: 1px solid #eee; margin: 4px 0; }

/* Invoice search modal results */
.isr-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    line-height: 1.3;
    color: #1a1a1a;
}
.isr-row.clickable { cursor: pointer; }
.isr-row.clickable:hover { background: #f7f7f7; }
.isr-num { font-weight: 600; min-width: 130px; font-size: 13px; }
.isr-dept { color: #666; min-width: 70px; font-size: 13px; }
.isr-amount { color: #666; min-width: 80px; font-size: 13px; }
.isr-status { color: #666; font-size: 13px; }
.isr-status .manual { color: #e65100; }
.isr-hint { margin-left: auto; font-size: 11px; }
.isr-hint.on-page { color: #1976d2; }
.isr-hint.off-page { color: #aaa; }

/* Invoice comments */
.comments-block { margin: 10px 0 0; }
.comments-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.comment-item {
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
}
.comment-meta { color: #888; font-size: 11px; margin-bottom: 2px; }
.comment-text { color: #1a1a1a; white-space: pre-wrap; }
.comment-add { display: flex; gap: 8px; align-items: center; }
.comment-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}

/* Drag-to-move: tab drop targets */
.tabs .tab.tab-drop-target {
    outline: 2px dashed #1976d2;
    outline-offset: -2px;
    background: #e8f1fc;
}
tr[draggable="true"] { cursor: grab; }

/* GL combobox */
.gl-input {
    background: #fff;
    color: #1a1a1a;
    border: 1px solid #ddd;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    width: 120px;
}
.gl-input:focus { outline: 2px solid #000; outline-offset: 1px; }

/* Summary stats */
.stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e5e5e5;
    flex: 1;
}
.stat-value { font-size: 28px; font-weight: 700; color: #000; }
.stat-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

/* Shipment detail table inside expanded row */
.shipment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 8px;
}
.shipment-table th {
    text-align: left;
    padding: 6px 10px;
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.shipment-table td {
    padding: 6px 10px;
    color: #444;
}

/* Compact shipment lines — aligned grid */
.expanded-content.compact {
    padding: 10px 20px;
}

.shipment-grid {
    display: table;
    width: 100%;
    font-size: 12px;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    border-spacing: 0;
}

.shipment-line {
    display: table-row;
    color: #444;
}

.shipment-header {
    color: #999;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.shipment-line:not(.shipment-header):hover {
    background: #f5f5f0;
}

.shipment-cell {
    display: table-cell;
    padding: 3px 10px 3px 0;
    white-space: nowrap;
    vertical-align: top;
}

.shipment-cell:last-child {
    padding-right: 0;
}

.shipment-awb {
    font-weight: 600;
    color: #1a1a1a;
}

.shipment-route {
    color: #666;
}

.shipment-name {
    color: #555;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shipment-xc {
    color: #666;
}

.xc-import {
    color: #c62828;
    font-weight: 500;
}

.shipment-pdf {
    color: #000;
    font-weight: 500;
    text-decoration: underline;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
}

/* XC charges display (legacy) */
.xc-grid {
    display: flex;
    gap: 16px;
    margin: 8px 0;
    padding: 10px 12px;
    background: #fff8f0;
    border: 1px solid #f0e0c8;
    border-radius: 4px;
}

/* Sort links */
.sort-link {
    color: #666;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.sort-link:hover { color: #000; }

/* Pagination */
.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 16px 0;
}
.page-link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    border: 1px solid #ddd;
    background: #fff;
    font-family: inherit;
    transition: all 0.15s;
}
.page-link:hover { color: #000; border-color: #000; }
.page-link.active { background: #000; color: #fff; border-color: #000; }

/* Page heading */
h2 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    color: #888;
}
.empty-state code {
    background: #f0f0ee;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* ── Modal ── */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.modal-overlay.visible { opacity: 1; }

.modal-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 24px 48px rgba(0,0,0,0.15);
    transform: translateY(8px);
    transition: transform 0.2s ease;
    text-align: center;
}
.modal-overlay.visible .modal-box { transform: translateY(0); }

.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.modal-icon.success { background: #e8f5e9; color: #2e7d32; }
.modal-icon.warning { background: #fff8e1; color: #e65100; }
.modal-icon.error { background: #fce4ec; color: #c62828; }

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.modal-message {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 24px;
}

.modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    margin-bottom: 20px;
    transition: border-color 0.15s;
}
.modal-input:focus { outline: none; border-color: #000; }

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: inherit;
    letter-spacing: 0.02em;
    transition: opacity 0.15s;
}
.modal-btn:hover { opacity: 0.85; }

.modal-btn-confirm {
    background: #000;
    color: #fff;
}

.modal-btn-cancel {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
}

.modal-btn-alt {
    background: transparent;
    border: 1px solid #999;
    color: #333;
}

/* ── Toasts ── */

#toast-container {
    position: fixed;
    top: 72px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: #fff;
    border: 1px solid #e5e5e5;
    color: #1a1a1a;
}
.toast.visible { opacity: 1; transform: translateX(0); }

.toast-success {
    border-left: 4px solid #2e7d32;
}
.toast-warning {
    border-left: 4px solid #e65100;
}
.toast-error {
    border-left: 4px solid #c62828;
}
.toast-info {
    border-left: 4px solid #1565c0;
}
.toast-nudge {
    border-left: 4px solid #000;
    background: #fafaf8;
}

.toast-message { flex: 1; }

.toast-close {
    background: none;
    border: none;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.toast-close:hover { color: #000; }

/* ── Progress Bar ── */

.progress-bar-track {
    width: 100%;
    height: 6px;
    background: #f0f0ee;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 16px;
}

.progress-bar-fill {
    height: 100%;
    background: #000;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ── Login Page ── */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 40px 20px;
}

.login-card {
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.login-brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 12px;
    color: #999;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 40px;
}

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

.login-field {
    margin-bottom: 20px;
}

.login-field label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 6px;
}

.login-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.15s;
}

.login-field input:focus {
    outline: none;
    border-color: #000;
}

.login-field input::placeholder {
    color: #bbb;
}

.login-btn {
    width: 100%;
    padding: 12px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 8px;
}

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

.login-error {
    background: #fce4ec;
    color: #c62828;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 24px;
    border: 1px solid #f0c0c0;
}

/* ── Header Auth ── */

.header-user {
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.header-role {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-logout {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.15s;
}

.header-logout:hover {
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   Portal nav + content (core/templates/base.html)
   The new combined-portal base uses <nav> + role-aware classes
   that don't match the legacy <header> selectors above.
   ============================================================ */

nav {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 14px 32px;
    background: #000;
    color: #fff;
    position: relative;
    z-index: 10;
}

nav a {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    transition: color 0.15s;
}
nav > a:hover { color: #fff; }

nav a.logo {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: #fff;
    margin-right: 8px;
}

nav .admin-dropdown {
    position: relative;
}

nav .admin-dropdown > summary {
    cursor: pointer;
    list-style: none;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    padding: 2px 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
nav .admin-dropdown > summary::-webkit-details-marker { display: none; }
nav .admin-dropdown > summary::after {
    content: '\25BE';
    font-size: 10px;
    opacity: 0.6;
}
nav .admin-dropdown[open] > summary { color: #fff; }
nav .admin-dropdown[open] > summary::after { content: '\25B4'; opacity: 0.9; }

nav .admin-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    min-width: 200px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    z-index: 20;
    overflow: hidden;
    padding: 4px 0;
}
nav .admin-menu a {
    display: block;
    padding: 10px 18px;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.2;
    border: none;
}
nav .admin-menu a + a { border-top: 1px solid #f0f0ee; }
nav .admin-menu a:hover { background: #fafaf8; color: #000; }

nav .who {
    margin-left: auto;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.02em;
    text-transform: none;
}

nav button.link {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.15s;
}
nav button.link:hover {
    border-color: #fff;
    color: #fff;
}

/* ── Portal page content typography ── */

main a {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0,0,0,0.3);
    transition: text-decoration-color 0.15s, opacity 0.15s;
}
main a:hover {
    text-decoration-color: #000;
    opacity: 0.85;
}

main table a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
}
main table a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

main h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
    color: #1a1a1a;
}

main h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-top: 32px;
    margin-bottom: 12px;
    color: #333;
    text-transform: uppercase;
}

main > p {
    color: #555;
    font-size: 14px;
    margin-bottom: 16px;
}

main p.warning {
    background: #fefce8;
    border: 1px solid #e8e0a8;
    color: #92600e;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 16px;
}

main p.error {
    background: #fce4ec;
    border: 1px solid #f0c0c0;
    color: #c62828;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 16px;
}

main .success-box {
    background: #e8f5e9;
    border: 1px solid #c6e6c6;
    color: #2e7d32;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 20px;
}
main .success-box code {
    display: inline-block;
    margin-top: 8px;
    background: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    font-size: 13px;
    color: #000;
    border: 1px solid #c6e6c6;
    user-select: all;
}

main small { color: #888; font-size: 12px; }

main p.hint, main .hint {
    color: #777;
    font-size: 12px;
    margin: 6px 0 16px;
    font-style: italic;
}

/* ── Portal forms (stacked: label → input → button) ── */

main > form {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 22px 26px;
    margin-bottom: 20px;
    max-width: 520px;
}

main > form > label {
    display: block;
    margin-bottom: 16px;
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
}

main > form > label > input[type="text"],
main > form > label > input[type="email"],
main > form > label > input[type="password"],
main > form > label > input[type="date"],
main > form > label > input[type="number"],
main > form > label > select,
main > form > fieldset input[type="text"],
main > form > fieldset input[type="email"],
main > form > fieldset input[type="password"],
main > form > fieldset input[type="date"],
main > form > fieldset input[type="number"],
main > form > fieldset select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

main > form > select,
main > form > input[type="text"],
main > form > input[type="email"],
main > form > input[type="password"],
main > form > input[type="date"],
main > form > input[type="number"] {
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    color: #1a1a1a;
    background: #fff;
    min-height: 40px;
    line-height: 1.2;
}
main > form > select:focus,
main > form > input:focus { outline: none; border-color: #000; }

main > form > label > input:focus,
main > form > fieldset input:focus,
main > form > label > select:focus {
    outline: none;
    border-color: #000;
}

main > form > fieldset {
    border: none;
    padding: 0;
    margin-bottom: 16px;
}

main > form > fieldset > legend {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    margin-bottom: 8px;
    padding: 0;
}

main > form > fieldset > label,
main > form > label.checkbox-label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
}

main > form > fieldset input[type="checkbox"],
main > form > label > input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
}

main > form > button[type="submit"] {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 11px 24px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 4px;
    min-height: 40px;
}

main > form#generate-form,
main > form.inline-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    max-width: none;
}
main > form#generate-form > button[type="submit"],
main > form.inline-form > button[type="submit"] {
    margin-top: 0;
    flex: 0 0 auto;
    align-self: flex-end;
}
main > form#generate-form > select,
main > form.inline-form > select { margin-top: 0; min-width: 160px; flex: 0 0 auto; }

/* Labels inside an inline-form: inline-flex column so they flow horizontally */
main > form.inline-form > label {
    display: inline-flex !important;
    flex-direction: column;
    align-items: stretch;
    margin: 0 !important;
    gap: 4px;
    flex: 0 0 auto;
    width: auto;
    text-transform: uppercase;
    font-size: 11px;
    color: #666;
    letter-spacing: 0.07em;
    font-weight: 500;
}
main > form.inline-form > label > input,
main > form.inline-form > label > select {
    width: 180px;
    min-width: 0;
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #1a1a1a;
    font-size: 14px;
    display: block;
}

/* Hint text inside an inline-form wraps to a new line below the row */
main > form.inline-form > p {
    flex-basis: 100%;
    margin: 0;
    color: #888;
    font-size: 12px;
}
main > form > button[type="submit"]:hover { opacity: 0.85; }

main > form > button.danger,
main > form > button[type="submit"].danger {
    background: #d32f2f;
}

/* ── Inline action forms (inside tables) ── */

main table form {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    max-width: none;
}

main table form > button[type="submit"] {
    background: transparent;
    border: 1px solid #ddd;
    color: #333;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 4px;
    transition: all 0.15s;
}
main table form > button.danger {
    color: #c62828;
    border-color: #f0c0c0;
}
main table form > button:hover {
    background: #fafaf8;
    border-color: #000;
}
main table form > button.danger:hover {
    background: #fce4ec;
    border-color: #c62828;
    color: #c62828;
}

main table details {
    display: inline-block;
    margin-right: 4px;
}
main table details > summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #333;
}
main table details > summary::-webkit-details-marker { display: none; }
main table details > summary:hover {
    background: #fafaf8;
    border-color: #000;
}
main table details[open] > summary {
    background: #fafaf8;
    border-color: #000;
}
main table details[open] form {
    display: block;
    margin-top: 10px;
    padding: 12px;
    background: #fafaf8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    min-width: 220px;
}
main table details[open] form label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: #333;
    text-transform: none;
    letter-spacing: 0;
}
main table details[open] form input[type="password"],
main table details[open] form input[type="text"] {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    font-family: inherit;
}
main table details[open] form > button[type="submit"] {
    margin-top: 8px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

/* ── Portal tables ── */

main table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    font-size: 13px;
}

main table th {
    text-align: left;
    padding: 10px 14px;
    background: #fafaf8;
    color: #666;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #e5e5e5;
}

main table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0ee;
    color: #333;
    vertical-align: top;
}

main table tr:last-child td { border-bottom: none; }
main table tbody tr:hover { background: #fafaf8; }

main table code {
    background: #f0f0ee;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    color: #000;
}

main table .role {
    display: inline-block;
    background: #eef0f5;
    color: #2c4870;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    margin-right: 4px;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid #d8dee9;
}

/* ── Replen: key/value grid (run detail) ── */

main dl.kv-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 4px 24px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 24px;
    max-width: 640px;
    font-size: 13px;
}
main dl.kv-grid dt {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid #f5f4f0;
}
main dl.kv-grid dd {
    color: #1a1a1a;
    font-size: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f4f0;
}
main dl.kv-grid > dt:last-of-type,
main dl.kv-grid > dd:last-of-type { border-bottom: none; }
main dl.kv-grid .muted { color: #888; font-size: 12px; }

/* ── Status badges ── */

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}
.status-badge.status-running    { background: #fff4e0; color: #b45309; border-color: #f5dbb1; }
.status-badge.status-success,
.status-badge.status-completed  { background: #e8f5e9; color: #2e7d32; border-color: #c6e6c6; }
.status-badge.status-ready,
.status-badge.status-converted  { background: #e3eef9; color: #1e3a8a; border-color: #c7daf3; }
.status-badge.status-failed     { background: #fce4ec; color: #c62828; border-color: #f0c0c0; }
.status-badge.status-pushed     { background: #d1e7d1; color: #1a5a1f; border-color: #aed1ae; }

/* ── Replen runs table ── */

main table.runs-table th.num,
main table.runs-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
main table.runs-table td.ts { white-space: nowrap; color: #444; font-variant-numeric: tabular-nums; }
main table.runs-table .trigger-by { font-weight: 500; }
main table.runs-table .trigger-user { color: #888; font-size: 12px; }
main table.runs-table .check-cell { text-align: center; }
main table.runs-table .check {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid #c6e6c6;
}
main table.runs-table td.empty {
    text-align: center;
    padding: 28px 0;
    color: #999;
    font-style: italic;
}

/* ── Info / running banner ── */

main .info-box {
    background: #fff7ec;
    border: 1px solid #f4dca8;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
}
main .info-box .info-box-meta {
    color: #856404;
    font-size: 12px;
    margin-top: 2px;
}
main .info-box strong { color: #6b3f00; }

.spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid #f4dca8;
    border-top-color: #b45309;
    border-radius: 50%;
    animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

main > form > button.is-loading {
    opacity: 0.7;
    cursor: progress;
    position: relative;
}
main > form > button.is-loading::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    animation: spin 0.85s linear infinite;
}

/* ── Watermark, scoped to login only ── */

.login-container {
    position: relative;
}
.login-container::after {
    content: 'CAMILLA AND MARC';
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 72px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(0,0,0,0.025);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ============================================================
 * Analytics module additions
 * ============================================================ */

/* Header strip on every analytics page: title + freshness pill */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}
.analytics-header h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
}
.analytics-header .subtitle {
    color: #666;
    font-size: 13px;
    margin-top: 2px;
}

/* Freshness pill , green if cube refreshed <12h ago, amber 12-36h, red >36h */
.freshness-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.freshness-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.freshness-pill.fresh { background: #e8f5e9; color: #2e7d32; }
.freshness-pill.stale { background: #fff3e0; color: #b86200; }
.freshness-pill.danger { background: #fdecea; color: #c62828; }

/* KPI deltas */
.kpi-delta {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
}
.kpi-delta.up { color: #2e7d32; }
.kpi-delta.up::before { content: '+ '; }
.kpi-delta.down { color: #c62828; }
.kpi-delta.down::before { content: '- '; }

/* Filter bar. Shopify-style: horizontal flex at full body width, wraps to
   next line when it runs out of room. No horizontal scroll. Each control
   sits next to the others on the same row when there's space.
   max-width: none is to defeat the pre-existing 'main > form { max-width:
   520px }' rule that otherwise clamps every form. */
.date-range {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.date-range label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    color: #666;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}
.date-range input[type="date"],
.date-range input[type="text"],
.date-range input[type="number"],
.date-range input[type="email"],
.date-range select,
.date-range label > input,
.date-range label > select {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    color: #1a1a1a;
    min-width: 0;
    min-height: 0;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}
.date-range input[type="number"] { width: 100px; }
.date-range input[type="text"] { width: 200px; }
/* Submit button inside the bar matches the chip sizing, not the portal's
   tall hero button style */
.date-range button[type="submit"],
.date-range > button {
    margin: 0;
    padding: 6px 14px;
    min-height: 0;
    font-size: 12px;
    letter-spacing: normal;
    text-transform: none;
}
.date-range > span { color: #888; font-size: 12px; }
.date-range .btn { padding: 6px 14px; font-size: 12px; }
.date-range .preset {
    padding: 6px 12px;
    border: 1px solid #d4d4d4;
    border-radius: 14px;
    font-size: 12px;
    color: #444;
    text-decoration: none;
    background: #fff;
    white-space: nowrap;
}
.date-range .preset:hover { background: #f0f0f0; }
.date-range .preset.active { background: #000; color: #fff; border-color: #000; }


/* Empty cube state , no data extracted yet, or after a wipe */
.empty-cube {
    padding: 48px;
    text-align: center;
    background: #fff;
    border: 1px dashed #d4d4d4;
    border-radius: 8px;
    color: #888;
}
.empty-cube h2 { font-size: 18px; color: #444; margin-bottom: 8px; }
.empty-cube p { font-size: 13px; margin-bottom: 16px; }

/* Loading state on buttons (AJAX submits) */
button.is-loading,
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
button.is-loading::after,
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ana-spin 0.7s linear infinite;
}
@keyframes ana-spin {
    to { transform: rotate(360deg); }
}

/* Chart panels , consistent card around each chart */
.chart-panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.chart-panel h2 {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

/* Two-column layout for compact reports */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* What-changed-this-week card */
.what-changed {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.what-changed h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #666;
    margin-bottom: 12px;
}
.what-changed ul { list-style: none; padding: 0; }
.what-changed li {
    padding: 8px 0;
    font-size: 14px;
    color: #1a1a1a;
    border-bottom: 1px solid #f0f0f0;
}
.what-changed li:last-child { border-bottom: 0; }
.what-changed li strong { font-weight: 600; }

/* Responsive: mobile breakpoint */
@media (max-width: 768px) {
    .stats-row { flex-direction: column; gap: 8px; }
    .grid-2col { grid-template-columns: 1fr; }
    .analytics-header { flex-direction: column; align-items: flex-start; }

    /* Tables in chart panels become horizontally scrollable */
    .chart-panel table {
        display: block;
        overflow-x: auto;
        min-width: 720px;
    }

    /* Charts: a reasonable minimum height so Plotly can lay them out */
    .chart-panel [id^="chart-"] { min-height: 320px; }
}

/* All-reports link list on landing page */
.report-list {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 8px 0;
}
.report-list a {
    display: block;
    padding: 12px 20px;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.report-list a:last-child { border-bottom: 0; }
.report-list a:hover { background: #f7f6f3; }
.report-list .report-desc {
    color: #888;
    font-size: 12px;
    margin-top: 2px;
}

/* ============================================================
 * Analytics polish: categorised landing + report sub-nav + tables
 * ============================================================ */

/* Compact back-link strip at the top of every report page. The
   categorised report list lives on /analytics/ so the back link is the
   only nav each report needs. */
.analytics-back {
    margin-bottom: 16px;
    font-size: 12px;
}
.analytics-back a {
    color: #666;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background: #fff;
    display: inline-block;
    transition: border-color 0.12s, color 0.12s;
}
.analytics-back a:hover {
    color: #1a1a1a;
    border-color: #1a1a1a;
}

/* Landing: grouped report cards (one column of group sections, each with a
   responsive grid of cards) */
.report-group {
    margin: 24px 0;
}
.report-group-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}
.report-group-header h2 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1a1a1a;
}
.report-group-header .blurb {
    color: #888;
    font-size: 12px;
}
.report-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.report-card {
    display: block;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.report-card:hover {
    border-color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.report-card .title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.report-card .desc {
    color: #666;
    font-size: 12px;
    line-height: 1.45;
}

/* Re-usable analytics table class. Replaces the inline-styled <table>s
   scattered through the report templates. */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.analytics-table thead th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    color: #666;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fafafa;
}
.analytics-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.analytics-table tbody tr:hover { background: #fafafa; }
.analytics-table tbody tr:last-child td { border-bottom: 0; }
.analytics-table th.right,
.analytics-table td.right { text-align: right; }
.analytics-table th.center,
.analytics-table td.center { text-align: center; }
.analytics-table .mono {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
}
.analytics-table tfoot td {
    padding: 8px 10px;
    border-top: 2px solid #ddd;
    font-weight: 600;
    background: #fafafa;
}
.analytics-table .desc-cell { max-width: 280px; }
.analytics-table .num-cell { font-variant-numeric: tabular-nums; }

/* Compact variant used for dense tables (basket, churn) */
.analytics-table.compact thead th { padding: 6px 8px; font-size: 10px; }
.analytics-table.compact tbody td { padding: 4px 8px; font-size: 12px; }

/* Reset h2 in chart-panel to consistent style */
.chart-panel h2 {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 8px;
}

/* Smaller margin between stacked panels */
.chart-panel + .chart-panel { margin-top: 16px; }

/* Soft callout for inline tips/captions below charts */
.caption {
    color: #666;
    font-size: 12px;
    margin-top: 10px;
    line-height: 1.5;
}

/* Default polish for any <table> rendered inside .chart-panel. Inline
   styles on individual rows/cells still override; this just gives a
   uniform header look and zebra-hover without needing to touch every
   report template. */
.chart-panel > table,
.chart-panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.chart-panel table thead th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    color: #666;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fafafa;
}
.chart-panel table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
}
.chart-panel table tbody tr { transition: background 0.08s; }
.chart-panel table tbody tr:hover { background: #fafafa; }
.chart-panel table tbody tr:last-child td { border-bottom: 0; }
.chart-panel table tfoot td {
    padding: 8px 10px;
    border-top: 2px solid #ddd;
    font-weight: 600;
    background: #fafafa;
}

/* Home page module cards */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.home-card {
  display: block;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  color: #000;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.home-card:hover {
  border-color: #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.home-card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.home-card-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}