/*
 * Profusion Connect CRM — global application shell
 * A compact, modern foundation for every Django CRM module.
 */

:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sidebar-width: 16.5rem;
  --sidebar-collapsed-width: 4.75rem;
  --sidebar-background: #222222;
  --topbar-height: 4.25rem;
  --content-max: 1600px;
  --radius-sm: .45rem;
  --radius-md: .7rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05), 0 4px 14px rgb(15 23 42 / .035);
  --shadow-md: 0 12px 30px rgb(15 23 42 / .1), 0 2px 8px rgb(15 23 42 / .05);
  --shadow-lg: 0 24px 60px rgb(15 23 42 / .16);
  --navy-950: #101828;
  --navy-900: #172033;
  --navy-800: #24324a;
  --slate-700: #344054;
  --slate-600: #475467;
  --slate-500: #667085;
  --slate-400: #98a2b3;
  --slate-300: #d0d5dd;
  --slate-200: #e4e7ec;
  --slate-100: #f2f4f7;
  --slate-50: #f8fafc;
  --surface: #fff;
  --canvas: #f6f8fb;
  --primary: #48bb80;
  --primary-hover: #38a86e;
  --primary-soft: #e8f8ef;
  --success: #087443;
  --success-soft: #e8f7ef;
  --warning: #b54708;
  --warning-soft: #fff4e5;
  --danger: #b42318;
  --danger-soft: #ffebe9;
  --info: #155eef;
  --info-soft: #eaf2ff;
  --text: #1d2939;
  --muted: #667085;
  --border: #e4e7ec;
  --focus: 0 0 0 3px rgb(72 187 128 / .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--canvas); font-family: var(--font-sans); font-size: .9375rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img, svg { max-width: 100%; }
:focus-visible { outline: 0; box-shadow: var(--focus); }

/* Application frame */
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); padding: 1.15rem .85rem; color: #d0d5dd; background: var(--sidebar-background); border-right: 1px solid rgb(255 255 255 / .06); transition: width .2s ease, transform .2s ease; }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; min-height: 2rem; padding: 0 .7rem 1.3rem; color: #fff; font-size: 1.05rem; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.sidebar-brand-logo { display: block; width: 11rem; height: auto; max-height: 3.1rem; object-fit: contain; object-position: left center; }
.sidebar-brand-mark { display: grid; flex: 0 0 2rem; place-items: center; width: 2rem; height: 2rem; color: #fff; background: var(--primary); border-radius: .65rem; box-shadow: 0 6px 14px rgb(72 187 128 / .25); }
.sidebar-section { margin: 1.1rem .7rem .4rem; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: .2rem; }
.sidebar-nav a, .sidebar-nav button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .68rem .75rem; color: #fff; background: transparent; border: 0; border-radius: .55rem; font-size: .875rem; text-align: left; transition: color .15s ease, background .15s ease; }
.sidebar-nav a:hover, .sidebar-nav button:hover, .sidebar-nav .active { color: #fff; background: rgb(255 255 255 / .1); }
.sidebar-nav .active { box-shadow: inset 3px 0 var(--primary); }
.sidebar-nav svg, .sidebar-nav i { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; color: currentColor; }
.sidebar > nav.sidebar-nav a > span:first-child { display: inline-flex; flex: 0 0 1.15rem; align-items: center; justify-content: center; width: 1.15rem; height: 1rem; font-size: 0; line-height: 1; }
.sidebar > nav.sidebar-nav a > span:first-child::before { font-family: "Font Awesome 6 Free"; font-size: .9rem; font-weight: 900; }
.sidebar > nav.sidebar-nav a[href*="dashboard"] > span:first-child::before { content: "\f3fd"; }
.sidebar > nav.sidebar-nav a[href*="organisation"] > span:first-child::before { content: "\f1ad"; }
.sidebar > nav.sidebar-nav a[href*="contacts"] > span:first-child::before { content: "\f0c0"; }
.sidebar > nav.sidebar-nav a[href*="documents"] > span:first-child::before { content: "\f07c"; }
.sidebar > nav.sidebar-nav a[href*="quotes"] > span:first-child::before { content: "\f573"; }
.sidebar > nav.sidebar-nav a[href*="invoices"] > span:first-child::before { content: "\f571"; }
.sidebar > nav.sidebar-nav a[href*="payments"] > span:first-child::before { content: "\f53d"; }
.sidebar > nav.sidebar-nav a[href*="tasks"] > span:first-child::before { content: "\f0ae"; }
.sidebar > nav.sidebar-nav a[href*="workflows"] > span:first-child::before { content: "\f542"; }
.sidebar > nav.sidebar-nav a[href*="reports"] > span:first-child::before { content: "\f201"; }
.sidebar-footer { position: absolute; right: .85rem; bottom: 1rem; left: .85rem; padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / .08); }
.sidebar-logout-form { margin: .2rem 0 0; }
.sidebar-logout { width: 100%; color: #fff !important; }
.sidebar-toggle { position: absolute; right: -.7rem; top: 4.8rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; color: var(--slate-600); background: #fff; border: 1px solid var(--border); border-radius: 50%; box-shadow: var(--shadow-sm); }
.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
.sidebar-collapsed .sidebar-brand span, .sidebar-collapsed .sidebar-section, .sidebar-collapsed .sidebar-nav a span, .sidebar-collapsed .sidebar-nav button span, .sidebar-collapsed .sidebar-footer { display: none; }
.sidebar-collapsed .sidebar-brand, .sidebar-collapsed .sidebar-nav a, .sidebar-collapsed .sidebar-nav button { justify-content: center; padding-right: .65rem; padding-left: .65rem; }
.sidebar-collapsed .main-frame { margin-left: var(--sidebar-collapsed-width); }
.main-frame { min-height: 100vh; margin-left: var(--sidebar-width); transition: margin-left .2s ease; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; height: var(--topbar-height); padding: 0 clamp(1rem, 3vw, 2.25rem); background: rgb(255 255 255 / .92); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.topbar-start { display: flex; align-items: center; gap: .75rem; }
.topbar-organisation-mark { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; color: var(--slate-600); border: 1px solid var(--slate-300); border-radius: .45rem; }
.topbar-organisation-logo { display: block; width: auto; max-width: 8rem; height: 2.35rem; object-fit: contain; object-position: left center; }
.topbar-title { color: var(--navy-950); font-size: 1rem; font-weight: 700; }
.mobile-menu { display: none; }
.content { width: min(100%, var(--content-max)); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.5rem); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.page-header h1 { margin: 0; color: var(--navy-950); font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.2; letter-spacing: -.035em; }
.page-header p { margin: .35rem 0 0; color: var(--muted); } .page-header .eyebrow { display: none; }
.breadcrumb { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; color: var(--muted); font-size: .8rem; }
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter-bar { margin-bottom: 1.25rem; } .filter-submit { display: flex; align-items: end; } .notices { margin-bottom: 1.25rem; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.pagination-summary { color: var(--muted); font-size: .85rem; }
.activity-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); } .activity-row:last-child { border-bottom: 0; }

/* Reusable surfaces and metrics */
.card, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-body, .panel-body { padding: 1.25rem; }
.card-header, .panel-header, .card-footer, .panel-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.card-header, .panel-header { border-bottom: 1px solid var(--border); }
.card-footer, .panel-footer { border-top: 1px solid var(--border); }
.card-title, .panel-title { margin: 0; color: var(--navy-950); font-size: .98rem; font-weight: 750; }
.card-subtitle { margin: .2rem 0 0; color: var(--muted); font-size: .8125rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.metric-card { position: relative; overflow: hidden; padding: 1.2rem; }
.metric-card::after { display: none; }
.metric-label { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.metric-value { margin: .35rem 0 .5rem; color: var(--navy-950); font-size: 1.75rem; font-weight: 780; letter-spacing: -.045em; }
.metric-change { position: relative; z-index: 1; display: inline-flex; gap: .3rem; align-items: center; font-size: .78rem; font-weight: 700; }
.text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-muted { color: var(--muted) !important; }
.grid { display: grid; gap: 1.25rem; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tables and financial documents */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.table-wrap > table {
  width: max-content;
  min-width: 100%;
}

.table-wrap th,
.table-wrap td {
  white-space: nowrap;
}
.invoice-actions-wrap { overflow-x: auto; overflow-y: hidden; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
caption { padding: 1rem; color: var(--muted); text-align: left; }
th { color: var(--slate-600); background: var(--slate-50); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:hover { background: #fbfcfe; } tbody tr:last-child td { border-bottom: 0; }
.table-compact th, .table-compact td { padding: .6rem .75rem; }
.actions-column, .actions-cell { width: 7rem; text-align: right; } .action-menu { position: relative; display: inline-block; } .action-menu summary { list-style: none; } .action-menu summary::-webkit-details-marker { display: none; } .action-menu-panel { position: fixed; top: 0; left: 0; z-index: 200; display: grid; min-width: 9rem; padding: .35rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .action-menu-panel a, .action-menu-panel button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .65rem; color: var(--slate-700); background: transparent; border: 0; border-radius: var(--radius-sm); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; } .action-menu-panel a:hover, .action-menu-panel button:hover { color: var(--navy-950); background: var(--slate-50); } .action-menu-panel button { color: var(--danger); }
.numeric, .amount, .currency { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.invoice-document { max-width: 1000px; margin: 0 auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 0; border-bottom: 0; }
.invoice-brand img { display: block; width: auto; max-width: 260px; max-height: 90px; object-fit: contain; object-position: left top; }
.invoice-meta { display: grid; gap: 10px; color: var(--muted); font-size: .875rem; text-align: right; } .invoice-meta strong { color: var(--text); }
.invoice-totals { display: grid; gap: .6rem; min-width: 15rem; margin-left: auto; padding: 1.25rem; background: var(--slate-50); border-radius: var(--radius-md); }
.card .invoice-totals { padding: 1.25rem; background: var(--slate-50); border-radius: var(--radius-md); }
.invoice-document table th { background: transparent; }
.invoice-document tbody tr:hover { background: transparent; }
.invoice-document > .card-body { padding: 0; }
.invoice-document > .card-body > p:first-child { margin-top: 20px; }
.invoice-total-row { display: flex; justify-content: space-between; gap: 1rem; } .invoice-total-row.grand-total { padding-top: .75rem; color: var(--navy-950); border-top: 2px solid var(--border); font-size: 1.15rem; font-weight: 800; }

/* Controls */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; } .form-col-12 { grid-column: span 12; } .form-col-6 { grid-column: span 6; } .form-col-4 { grid-column: span 4; }
.form-group { display: grid; gap: .4rem; } label { color: var(--slate-700); font-size: .8125rem; font-weight: 700; } .required-marker { color: var(--primary); font-weight: 800; } .optional-marker { color: var(--muted); font-size: .75rem; font-weight: 600; }
input, select, textarea { width: 100%; color: var(--text); background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius-sm); padding: .65rem .75rem; transition: border-color .15s ease, box-shadow .15s ease; }
.contact-select { max-height: 2.75rem; }
.task-status-in-progress { color: var(--warning) !important; background: var(--warning-soft) !important; }
input::placeholder, textarea::placeholder { color: var(--slate-400); } input:hover, select:hover, textarea:hover { border-color: var(--slate-400); } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary); box-shadow: var(--focus); }
textarea { min-height: 7rem; resize: vertical; } .help-text, .form-text { color: var(--muted); font-size: .78rem; } .is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgb(180 35 24 / .2) !important; } .error-text { color: var(--danger); font-size: .78rem; } .field-error { margin-left: .35rem; font-size: .75rem; font-weight: 600; }
.organisation-logo-preview { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 12rem; min-height: 8rem; padding: 1rem 2.5rem 1rem 1rem; background: var(--slate-50); border: 1px solid var(--border); border-radius: var(--radius-md); }
.logo-form-group { margin-bottom: 1.25rem; }
.organisation-logo-preview img { display: block; max-width: 18rem; max-height: 8rem; object-fit: contain; }
.organisation-logo-clear { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: #fff; background: var(--danger); border: 0; border-radius: 50%; cursor: pointer; }
.organisation-logo-clear:hover { background: #a5281c; }
.organisation-logo-upload { display: block; }
.organisation-logo-upload[hidden] { display: none; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.45rem; padding: .55rem .9rem; color: var(--slate-700); background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius-sm); font-size: .875rem; font-weight: 700; line-height: 1.2; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn:hover { color: var(--navy-950); background: var(--slate-50); border-color: var(--slate-400); } .btn:active { transform: translateY(1px); }
.btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 5px rgb(72 187 128 / .25); } .btn-primary:hover { color: #fff; background: var(--primary-hover); border-color: var(--primary-hover); }
.line-remove-cell { width: 4.5rem; text-align: center; } .line-remove-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; color: var(--danger); background: transparent; cursor: pointer; font-size: 1.15rem; } .line-remove-cell > input { position: absolute; width: 1px; height: 1px; opacity: 0; } .line-remove-button:hover { color: #8f1d14; }
.btn-secondary { color: #fff; background: var(--navy-800); border-color: var(--navy-800); } .btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); } .btn-success { color: #fff; background: var(--success); border-color: var(--success); }
.btn-sm { min-height: 2rem; padding: .4rem .65rem; font-size: .78rem; } .btn-lg { min-height: 2.8rem; padding: .7rem 1.1rem; } .btn-icon { width: 2.45rem; padding: 0; }

/* Status, feedback and overlays */
.badge, .status { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; padding: .25rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.badge-primary, .status-open, .status-requested, .status-issued, .status-sent, .status-converted { color: #175cd3; background: #eff8ff; } .badge-success, .status-paid, .status-active, .status-accepted, .status-approved, .status-complete, .status-completed { color: var(--success); background: var(--success-soft); } .badge-warning, .status-pending, .status-part_paid, .status-in-progress, .status-in_progress, .status-review, .status-negotiation { color: var(--warning); background: var(--warning-soft); } .badge-danger, .status-overdue, .status-inactive, .status-unpaid, .status-rejected { color: var(--danger); background: var(--danger-soft); } .badge-neutral, .status-draft, .status-cancelled, .status-canceled, .status-expired, .status-void { color: var(--slate-600); background: var(--slate-100); }
.badge { gap: 0; } .badge::before { display: none; }
.alert { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: var(--radius-md); } .alert-info { color: #1849a9; background: var(--info-soft); border-color: #b2ccff; } .alert-success { color: var(--success); background: var(--success-soft); border-color: #abefc6; } .alert-warning { color: var(--warning); background: var(--warning-soft); border-color: #fedf89; } .alert-danger { color: var(--danger); background: var(--danger-soft); border-color: #fecdca; }
.toast-stack { position: fixed; left: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .65rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; color: #fff; background: var(--success); border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in .2s ease-out; }
.toast-error, .toast-danger, .toast-warning, .toast-info { background: var(--danger); }
.toast-close { flex: 0 0 auto; padding: 0; color: #fff; background: transparent; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgb(16 24 40 / .58); } .modal-backdrop[hidden] { display: none; } .modal { width: min(100%, 34rem); max-height: min(90vh, 48rem); overflow: auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .modal-lg { width: min(100%, 60rem); } .modal-header, .modal-body, .modal-footer { padding: 1.2rem 1.35rem; } .modal-header { display: flex; justify-content: space-between; border-bottom: 1px solid var(--border); } .modal-footer { display: flex; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--border); }
.modal-no-dividers .modal-header, .modal-no-dividers .modal-footer { border: 0; }
.modal-no-dividers .modal-header { padding: 1rem 1.35rem .35rem; }
.modal-no-dividers .modal-body { padding: .25rem 1.35rem; }
.modal-no-dividers .modal-body p { margin: .45rem 0; }
.modal-no-dividers .modal-footer { padding: .55rem 1.35rem 1rem; }
.modal-backdrop[id*="delete"] .modal-header, .modal-backdrop[id*="delete"] .modal-footer { border: 0; }
.modal-backdrop[id*="delete"] .modal-header { padding: 1rem 1.35rem .35rem; }
.modal-backdrop[id*="delete"] .modal-body { padding: .25rem 1.35rem; }
.modal-backdrop[id*="delete"] .modal-body p { margin: .45rem 0; }
.modal-backdrop[id*="delete"] .modal-footer { padding: .55rem 1.35rem 1rem; }
.empty-state, .loading-state { display: grid; place-items: center; min-height: 12rem; padding: 2rem; color: var(--muted); text-align: center; } .empty-state-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .75rem; color: var(--primary); background: var(--primary-soft); border-radius: 50%; } .spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid var(--slate-200); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.auth-shell { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1rem; background: radial-gradient(circle at top left, var(--primary-soft) 0, transparent 34rem), var(--canvas); }
.auth-brand { position: fixed; top: 2rem; left: 2rem; color: var(--navy-950); }
.auth-card { width: min(100%, 28rem); padding: clamp(1.5rem, 5vw, 2.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.auth-card h1 { margin: .65rem 0 .5rem; color: var(--navy-950); font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.15; letter-spacing: -.04em; }
.auth-lede { margin: 0 0 1.5rem; color: var(--muted); }
.auth-form { display: grid; gap: 1rem; }
.auth-form p { display: grid; gap: .4rem; margin: 0; }
.auth-link { display: inline-block; margin-top: 1.25rem; font-size: .875rem; font-weight: 700; }
.skeleton { background: linear-gradient(90deg, var(--slate-100) 25%, #fff 50%, var(--slate-100) 75%); background-size: 200% 100%; border-radius: var(--radius-sm); animation: shimmer 1.5s infinite; } @keyframes shimmer { to { background-position: -200% 0; } }

/* Utility classes */
.d-flex { display: flex !important; } .align-center { align-items: center !important; } .justify-between { justify-content: space-between !important; } .gap-1 { gap: .5rem !important; } .gap-2 { gap: 1rem !important; } .mb-0 { margin-bottom: 0 !important; } .mt-2 { margin-top: 1rem !important; } .w-100 { width: 100% !important; }
.details-list { display: grid; grid-template-columns: minmax(9rem, 36%) 1fr; gap: .75rem 1rem; margin: 0; }
.details-list dt { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.details-list dd { margin: 0; }

@media (max-width: 1100px) { .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  :root { --topbar-height: 3.8rem; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); } .sidebar-open .sidebar { transform: translateX(0); } .main-frame, .sidebar-collapsed .main-frame { margin-left: 0; }
  .mobile-menu { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--slate-700); background: transparent; border: 0; border-radius: var(--radius-sm); } .mobile-menu:hover { background: var(--slate-100); }
  .content { padding: 1.1rem; } .page-header, .invoice-header { flex-direction: column; } .page-actions { width: 100%; } .page-actions .btn { flex: 1; }
  .metrics-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; } .form-col-6, .form-col-4 { grid-column: span 12; } .invoice-totals { width: 100%; min-width: 0; } .card-header, .panel-header { align-items: flex-start; flex-direction: column; }
  th, td { padding: .7rem .65rem; } .topbar-actions .hide-mobile { display: none; }
  .auth-brand { position: static; align-self: start; margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.alert[hidden] { display: none; }
@page { size: A4; margin: 0; }
@media print { body { background: #fff; } .sidebar, .topbar, .page-actions, .btn { display: none !important; } .main-frame { margin: 0; } .content { padding: 18mm !important; } .card, .panel, .invoice-document { box-shadow: none; } .invoice-document { max-width: none; } .invoice-document .invoice-totals { padding: 0; background: transparent; border-radius: 0; } }