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

:root {
  color-scheme: light;
  --font-sans: Poppins, 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;
  --surface-dark: #0A1836;
  --sidebar-background: var(--surface-dark);
  --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);
  --slate-400: #98a2b3;
  --slate-300: #d0d5dd;
  --slate-200: #e4e7ec;
  --slate-100: #f2f4f7;
  --slate-50: #f8fafc;
  --surface: #fff;
  --canvas: #f7f9fc;
  --primary: #0A1836;
  --primary-hover: #16496b;
  --primary-soft: #e8f5fb;
  --accent-warm: #FFBC7D;
  --accent-magenta: #CC3366;
  --success: #087443;
  --success-soft: #e8f7ef;
  --warning: #b54708;
  --warning-soft: #fff4e5;
  --danger: #b42318;
  --danger-soft: #ffebe9;
  --info: #155eef;
  --info-soft: #eaf2ff;
  --text: #344054;
  --muted: #667085;
  --border: #e4e7ec;
  --focus: 0 0 0 3px rgb(63 164 208 / .25);
}

*, *::before, *::after { box-sizing: border-box; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--slate-100); }
*::-webkit-scrollbar-thumb { background: #2f4a73; border: 0; border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #46658f; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: var(--slate-100); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #2f4a73 var(--slate-100); }
}
html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--text); background: var(--canvas); font-family: var(--font-sans); font-size: .9375rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.turbo-progress-bar { position: fixed; z-index: 10000; top: 0; left: 0; height: 3px; background: var(--primary); box-shadow: 0 0 10px rgb(63 164 208 / .55); }
html.crm-navigation-loading { cursor: progress; }
html.crm-navigation-loading a, html.crm-navigation-loading button { cursor: progress; }
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-icon { display: none; width: 2.35rem; height: 2.35rem; border-radius: .65rem; object-fit: cover; }
.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(63 164 208 / .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: calc(.68rem - 5px) .75rem; color: #fff; background: transparent; border: 0; border-radius: 0; font-size: .875rem; text-align: left; transition: color .15s ease, background .15s ease; }
/* Django admin loads its own `a:link` rule after this file. Keep every
   Fieldforce control-panel sidebar item white, including inactive links. */
.control-app .sidebar-nav a, .control-app .sidebar-nav button,
.control-app .sidebar-nav a i, .control-app .sidebar-nav button i { color: #fff; }
.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-account { display: flex; align-items: center; gap: .65rem; min-width: 0; margin: 0 0 .7rem; padding: 0 .15rem; color: #fff; }
.sidebar-account-avatar { display: grid; flex: 0 0 2rem; place-items: center; width: 2rem; height: 2rem; color: var(--surface-dark); background: #fff; border-radius: 50%; font-size: .8rem; font-weight: 800; line-height: 1; }
.sidebar-account-copy { display: grid; min-width: 0; gap: .1rem; }
.sidebar-account-copy strong { overflow: hidden; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-copy small { overflow: hidden; color: var(--slate-300); font-size: .62rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logout-form { margin: .2rem 0 0; }
.sidebar-logout { width: 100%; color: var(--surface-dark) !important; background: #fff !important; border-color: #fff !important; box-shadow: 0 2px 5px rgb(0 0 0 / .18); }
.sidebar-logout:hover { color: var(--surface-dark) !important; background: #f2f4f7 !important; border-color: #f2f4f7 !important; }
.sidebar-stop-impersonating-form { margin: 0 0 .55rem; }
.sidebar-stop-impersonating-button { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .5rem .65rem; color: #fff; background: transparent; border: 1px solid rgb(255 255 255 / .28); border-radius: .45rem; font: inherit; font-size: .72rem; font-weight: 700; cursor: pointer; }
.sidebar-stop-impersonating-button i { font-size: .72rem; }
.sidebar-stop-impersonating-button:hover { color: var(--surface-dark); background: #fff; border-color: #fff; }
.sidebar-toggle { position: absolute; right: -.7rem; top: 4.8rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; color: var(--text); 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-brand-logo, .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-icon { display: block; }
.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: 0; box-shadow: 0 7px 18px -15px rgb(15 23 42 / .55); 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(--text); 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(--text); 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(--text); 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; }
.pagination-buttons { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
.pagination-buttons .btn { min-width: 2.2rem; justify-content: center; }
.pagination-page.is-active { color: #fff; background: var(--primary); border-color: var(--primary); pointer-events: none; }
.pagination-buttons .is-disabled { color: var(--slate-400); background: var(--slate-50); cursor: not-allowed; opacity: .7; }
.pagination-ellipsis { min-width: 1.5rem; color: var(--muted); text-align: center; }
.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: 0; 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(--text); 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(--text); 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)); }
.dashboard-activity-stack, .metrics-grid + .grid.grid-2 { grid-template-columns: minmax(0, 1fr); }
.dashboard-quick-action-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.dashboard-quick-action-group { display: grid; align-content: start; gap: .75rem; min-width: 0; }
.dashboard-quick-action-heading h3 { margin: 0; color: var(--text); font-size: .875rem; }
.dashboard-quick-action-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.dashboard-quick-action-buttons { display: flex; flex-wrap: wrap; gap: .55rem; }
.dashboard-quick-action-buttons .btn { justify-content: flex-start; }

/* 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(--text); 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; visibility: hidden; 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 form { margin: 0; } .action-menu-panel a, .action-menu-panel button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .65rem; color: var(--text); 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(--text); background: var(--slate-50); } .action-menu-panel button { color: var(--danger); } .action-menu-panel button.action-menu-neutral { color: var(--text); } .action-menu-panel button.action-menu-neutral:hover { color: var(--text); background: var(--slate-50); } .action-menu-panel button.action-menu-danger { 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(--text); border-top: 2px solid var(--border); font-size: 1.15rem; font-weight: 800; }
.section18-document { display: flex; flex-direction: column; width: min(100%, 900px); min-height: 1120px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem); color: var(--text); background: #fff; box-shadow: var(--shadow-sm); }
.section18-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; min-height: 6rem; }
.section18-header time { font-size: 1rem; }
.section18-brand { display: grid; place-items: center; min-width: 10rem; font-size: 1.35rem; }
.section18-brand img { display: block; width: auto; max-width: 220px; max-height: 95px; object-fit: contain; }
.section18-heading { margin: 2.5rem 0 3rem; text-align: center; text-transform: uppercase; }
.section18-heading h2 { margin: .3rem 0; font-size: 1.35rem; line-height: 1.3; }
.section18-heading h3 { margin: 3.5rem 0 0; font-size: 1.15rem; }
.section18-details { display: grid; gap: .8rem; margin: 0; }
.section18-details > div { display: grid; grid-template-columns: minmax(12rem, auto) 1fr; gap: .35rem; }
.section18-details dt { font-weight: 800; }
.section18-details dt::after { content: ":"; }
.section18-details dd { margin: 0; }
.section18-declaration { margin: 1.5rem 0; line-height: 1.55; }
.section18-signature { display: grid; grid-template-columns: auto minmax(12rem, 20rem); align-items: end; justify-content: start; gap: .4rem; margin: .5rem 0 1.25rem; }
.section18-signature > span:first-child { font-weight: 800; }
.section18-signature-line { height: 1.8rem; border-bottom: 1px solid var(--text); }
.section18-signature small { grid-column: 2; color: var(--muted); }
.section18-note { line-height: 1.5; }
.section18-footer { display: grid; gap: .35rem; margin-top: auto; padding-top: 2rem; color: var(--text); text-align: center; }

/* Controls */
.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; } .form-grid > .form-group { align-self: start; align-content: start; } .form-col-12 { grid-column: span 12; } .form-col-8 { grid-column: span 8; } .form-col-6 { grid-column: span 6; } .form-col-4 { grid-column: span 4; }
.form-section-heading { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.form-section-heading h3 { margin: 0 0 .25rem; color: var(--text); font-size: .95rem; }
.form-group { display: grid; gap: .5rem; margin: 0; } label { color: var(--text); font-size: .8125rem; font-weight: 700; line-height: 1.35; } .required-marker { color: var(--primary); font-weight: 800; } .optional-marker { color: var(--muted); font-size: .75rem; font-weight: 600; }
.field-tooltip { position: relative; display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-left: .35rem; color: var(--primary-hover); background: var(--primary-soft); border: 1px solid rgb(63 164 208 / .45); border-radius: 50%; cursor: help; font-size: .68rem; font-weight: 800; line-height: 1; vertical-align: .05rem; }
.field-tooltip::after { position: absolute; bottom: calc(100% + .5rem); left: 50%; z-index: 50; width: max-content; max-width: min(18rem, calc(100vw - 2rem)); padding: .55rem .7rem; color: #fff; background: var(--surface-dark); border-radius: var(--radius-sm); content: attr(data-tooltip); font-size: .75rem; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; text-align: left; transform: translate(-50%, .25rem); transition: opacity .15s ease, transform .15s ease; }
.field-tooltip::before { position: absolute; bottom: calc(100% + .2rem); left: 50%; z-index: 51; border: .3rem solid transparent; border-top-color: var(--surface-dark); content: ""; opacity: 0; pointer-events: none; transform: translate(-50%, .25rem); transition: opacity .15s ease, transform .15s ease; }
.field-tooltip:hover::after, .field-tooltip:hover::before, .field-tooltip:focus-visible::after, .field-tooltip:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
 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; }
input[type="checkbox"], input[type="radio"] { appearance: none; display: inline-grid; flex: 0 0 auto; place-content: center; width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; color: #fff; background: #fff; border: 1.5px solid var(--slate-400); border-radius: .3rem; cursor: pointer; vertical-align: middle; }
input[type="checkbox"]::before { width: .62rem; height: .62rem; content: ""; background: currentColor; clip-path: polygon(14% 44%, 0 59%, 39% 100%, 100% 18%, 84% 4%, 38% 70%); transform: scale(0); transition: transform .12s ease-in-out; }
input[type="checkbox"]:checked { color: #fff; background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:indeterminate { background: var(--primary); border-color: var(--primary); }
input[type="checkbox"]:indeterminate::before { width: .62rem; height: .14rem; background: currentColor; clip-path: none; transform: scale(1); }
input[type="radio"] { border-radius: 50%; }
input[type="radio"]::before { width: .55rem; height: .55rem; content: ""; background: currentColor; border-radius: 50%; transform: scale(0); transition: transform .12s ease-in-out; }
input[type="radio"]:checked { color: #fff; background: var(--primary); border-color: var(--primary); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; }
 .contact-select { max-height: 2.75rem; }
 .form-check { display: flex; align-items: flex-start; gap: .55rem; min-height: 1.35rem; }
 .form-check label { margin-top: .08rem; cursor: pointer; }
.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(--text); 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(--text); 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(10 24 54 / .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(--surface-dark); border-color: var(--surface-dark); } .btn-danger { color: #fff; background: var(--danger); border-color: var(--danger); } .btn-success { color: #fff; background: var(--success); border-color: var(--success); }
.cm-table-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cm-table-row-actions form { margin: 0; }
.cm-table-row-actions .btn { width: 2rem; min-width: 2rem; height: 2rem; padding: 0; color: var(--primary); background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius-sm); box-shadow: none; }
.cm-table-row-actions .btn:hover, .cm-table-row-actions .btn:focus-visible { color: var(--primary-hover); background: var(--slate-50); border-color: var(--slate-400); box-shadow: none; }
.cm-table-row-actions .cm-table-action-danger { color: var(--danger); }
.cm-table-row-actions .cm-table-action-danger:hover, .cm-table-row-actions .cm-table-action-danger:focus-visible { color: #8f1c13; background: var(--slate-50); }
.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, .status-failed { color: var(--danger); background: var(--danger-soft); } .badge-neutral, .status-draft, .status-cancelled, .status-canceled, .status-expired, .status-void { color: var(--text); background: var(--slate-100); }
.cm-publish-toggle { display: inline-flex; align-items: center; width: 2.35rem; height: 1.35rem; padding: .1rem; color: inherit; background: transparent; border: 0; border-radius: 999px; cursor: pointer; transition: box-shadow .15s ease; }
.cm-publish-toggle:hover { background: transparent; }
.cm-publish-toggle:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
.cm-modal-toggle { position: relative; display: inline-flex; align-items: center; width: 2.35rem; height: 1.35rem; padding: .1rem; color: inherit; background: transparent; border: 0; border-radius: 999px; cursor: pointer; }
.cm-modal-toggle:hover { background: transparent; }
.cm-modal-toggle:focus-within { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
.cm-modal-toggle input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cm-toggle-track { position: relative; display: inline-flex; align-items: center; width: 2.15rem; height: 1.15rem; padding: .15rem; background: var(--slate-300); border-radius: 999px; transition: background .15s ease; }
.cm-toggle-thumb { display: block; width: .85rem; height: .85rem; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgb(15 23 42 / .25); transform: translateX(0); transition: transform .15s ease; }
.cm-publish-toggle[aria-checked="true"] .cm-toggle-track { background: var(--primary); }
.cm-publish-toggle[aria-checked="true"] .cm-toggle-thumb { transform: translateX(.85rem); }
.cm-modal-toggle input:checked + .cm-toggle-track { background: var(--primary); }
.cm-modal-toggle input:checked + .cm-toggle-track .cm-toggle-thumb { transform: translateX(.85rem); }
.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; inset: auto; top: auto; right: auto; left: 1rem; bottom: 1rem; z-index: 2147483647; display: grid; gap: .65rem; width: min(24rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); margin: 0; padding: 0; color: inherit; background: transparent; border: 0; overflow: visible; pointer-events: none; }
@supports selector(:popover-open) { .toast-stack:not(:popover-open) { display: none; } .toast-stack:popover-open { display: grid; } }
.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); } }
@keyframes fieldforce-modal-slide-in { from { opacity: 0; transform: translateY(1rem) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fieldforce-modal-slide-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(1rem) scale(.985); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; overflow: hidden; background: rgb(16 24 40 / .58); } .modal-backdrop[hidden] { display: none; } .modal-backdrop:not([hidden]) .modal { animation: fieldforce-modal-slide-in .2s ease-out both; } .modal-backdrop.is-closing .modal { animation: fieldforce-modal-slide-out .2s ease-in both; } .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; }
.cm-dialog { width: min(42rem, calc(100% - 2rem)); padding: 0; overflow: hidden; background: transparent; border: 0; }
.cm-dialog[open] > * { animation: fieldforce-modal-slide-in .2s ease-out both; }
.cm-dialog.is-closing > * { animation: fieldforce-modal-slide-out .2s ease-in both; }
.cm-dialog::backdrop { background: rgb(10 24 54 / .55); }
.modal-backdrop.is-closing .modal,
.cm-dialog.is-closing > * { pointer-events: none; }
.modal.is-scrollbar-animating, .cm-dialog.is-scrollbar-animating > .cm-form, .cm-dialog.is-scrollbar-animating .card-body { scrollbar-width: none; }
.modal.is-scrollbar-animating::-webkit-scrollbar, .cm-dialog.is-scrollbar-animating > .cm-form::-webkit-scrollbar, .cm-dialog.is-scrollbar-animating .card-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop:not([hidden]) .modal,
  .modal-backdrop.is-closing .modal,
  .cm-dialog[open] > *,
  .cm-dialog.is-closing > * { animation: none; }
}
.cm-form { max-height: min(90vh, 48rem); overflow: auto; }
.cm-form .card-body { display: grid; gap: 1rem; }
.form-group > label:has(> input[type="checkbox"]), .form-group > label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.cm-form .card-body > label:has(> input[type="checkbox"]), .cm-form .card-body > label:has(> input[type="radio"]) { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.cm-form .card-header h2 { margin: 0; font-size: 1.05rem; }
.cm-question-settings, .cm-question-options { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--slate-50); }
.cm-question-settings h3, .cm-question-options h3 { margin: 0; color: var(--text); font-size: .95rem; }
.cm-question-settings > #cm-question-type-settings { display: grid; gap: 1rem; margin-top: .85rem; }
.cm-question-options-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cm-question-options-heading p { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; }
.cm-question-option-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto !important; }
.cm-question-option-row input { min-width: 0; }
.cm-preview-incomplete-notice { margin: 0 0 1.25rem; padding: .8rem 1rem; color: var(--warning); background: var(--warning-soft); border: 1px solid #fedf89; border-radius: var(--radius-md); font-size: .875rem; }
.cm-question-conditions { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--slate-50); }
.cm-condition-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
#cm-question-condition-list { display: grid; gap: .75rem; }
.cm-condition-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto; align-items: end; gap: .75rem; padding: .85rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.cm-condition-field { display: grid; min-width: 0; gap: .4rem; }
.cm-condition-field select, .cm-condition-field input { min-width: 0; width: 100%; }
.cm-condition-no-value, .cm-condition-hint { color: var(--muted); font-size: .82rem; }
.cm-condition-footer { margin-top: .85rem; }
.cm-option-footer { margin-top: .85rem; }
.cm-builder-save-count { display: inline-block; min-width: 1.3rem; padding: 0 .4rem; margin-left: .45rem; border-radius: 999px; background: rgba(255,255,255,.28); font-size: .78rem; line-height: 1.5; }
.cm-unsaved-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #d97706; margin-left: .45rem; vertical-align: middle; }
@media (max-width: 560px) { .cm-question-option-row { grid-template-columns: 1fr 1fr !important; } .cm-question-option-row [data-option-remove] { grid-column: 1 / -1; justify-self: start; } .cm-question-options-heading { align-items: center; } }
@media (max-width: 760px) { .cm-condition-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cm-condition-remove { justify-self: start; } }
@media (max-width: 480px) { .cm-condition-settings, .cm-condition-row { grid-template-columns: 1fr; } }
.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: 3rem 1rem; background: linear-gradient(135deg, #0A1836 0%, #16496b 48%, #3FA4D0 100%); }
.auth-frame { display: grid; justify-items: center; width: min(100%, 30rem); }
.auth-brand { position: static; justify-content: center; width: 100%; margin: 0 0 1.75rem; padding: 0; color: #fff; background: transparent; border-radius: 0; box-shadow: none; }
.auth-brand .sidebar-brand-logo { width: min(100%, 18rem); max-height: none; }
.auth-card { width: min(100%, 28rem); padding: clamp(1.5rem, 5vw, 2.5rem); background: var(--surface); border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.auth-card h1 { margin: .65rem 0 .5rem; color: var(--text); 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; }
.selection-column { width: 3rem; text-align: center !important; }
.expense-table-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: var(--slate-50); }
.expense-table-toolbar .form-check { align-items: center; margin-right: .35rem; }
.selection-count { color: var(--muted); font-size: .82rem; }
.table-filter-row th { padding: .45rem .65rem; background: #fff; vertical-align: top; }
.table-filter-row input, .table-filter-row select { min-width: 7rem; padding: .45rem .55rem; font-size: .78rem; }
.table-filter-row[hidden] { display: none; }
.expense-form-card { max-width: 58rem; margin: 0 auto; }
.expense-form-card .card-body { padding: clamp(1.25rem, 3vw, 2rem); }
.expense-receipt-panel { display: grid; gap: .85rem; margin: -2rem -2rem 1.25rem; padding: 1.25rem 2rem; background: var(--slate-50); border-bottom: 1px solid var(--border); }
.expense-receipt-dropzone { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 5.5rem; padding: 1rem 1.25rem; background: #fff; border: 1px dashed var(--slate-400); border-radius: var(--radius-md); cursor: pointer; }
.expense-receipt-dropzone:hover, .expense-receipt-dropzone:focus-within { border-color: var(--primary); background: var(--primary-soft); }
.expense-receipt-dropzone > i { color: var(--primary); font-size: 1.5rem; }
.expense-receipt-copy { display: grid; gap: .2rem; flex: 1; }
.expense-receipt-copy small { color: var(--muted); font-size: .78rem; }
.expense-receipt-dropzone .error-text { color: var(--danger); }
.expense-receipt-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.expense-receipt-filename { max-width: 14rem; overflow: hidden; color: var(--muted); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.expense-receipt-current { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.expense-receipt-title { margin: 0 0 .25rem; color: var(--text); font-weight: 800; }
.expense-receipt-current .help-text { margin: .25rem 0 0; }
.expense-add-field-link { display: flex; align-items: center; width: 100%; min-height: 3rem; margin: .65rem 0 0; padding: .75rem 1rem; color: var(--text); background: #fff; border: 0; border-radius: 0; font-size: .875rem; font-weight: 750; box-shadow: var(--shadow-sm); transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.expense-add-field-link::after { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-left: auto; color: var(--primary-hover); content: "+"; font-size: 1.35rem; font-weight: 500; line-height: 1; }
.expense-add-field-link:hover { color: var(--text); background: var(--slate-50); box-shadow: var(--shadow-md); }
.expense-add-field-link[aria-expanded="true"] { color: var(--text); background: var(--primary-soft); border-radius: 0; box-shadow: 0 2px 8px rgb(15 23 42 / .07); }
.expense-add-field-link[aria-expanded="true"]::after { content: "−"; }
.expense-add-field-link.is-error { color: var(--danger); }
.expense-optional-field { display: grid; grid-template-rows: 0fr; max-height: 0; margin: 0; overflow: hidden; opacity: 0; transition: grid-template-rows .26s ease, max-height .26s ease, opacity .2s ease, margin .26s ease; }
.expense-optional-field.is-visible { grid-template-rows: 1fr; max-height: 30rem; margin: 0 0 .75rem; opacity: 1; }
.expense-optional-panel-body { min-height: 0; overflow: hidden; padding: 0 1rem; background: #fff; border: 0; border-radius: 0; box-shadow: 0 8px 18px rgb(15 23 42 / .08); transition: padding .26s ease, box-shadow .18s ease; }
.expense-optional-field.is-visible { overflow: visible; }
.expense-optional-field.is-visible .expense-optional-panel-body { padding: 1rem; overflow: visible; }
.expense-coming-soon-body { background: var(--slate-100); color: var(--text); }
.expense-coming-soon-message { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .7rem .85rem; background: var(--slate-200); color: var(--text); }
.expense-coming-soon-message p { margin: 0; font-size: .82rem; font-weight: 650; }
.expense-coming-soon-badge { padding: .2rem .5rem; color: var(--text); background: var(--slate-300); border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.expense-coming-soon-body input:disabled, .expense-coming-soon-body select:disabled { color: var(--muted); background: var(--slate-200); border-color: var(--slate-300); cursor: not-allowed; }
.expense-coming-soon-body .form-check-group label { color: var(--muted); }
.expense-form-card .form-grid { row-gap: 1.25rem; }
.expense-primary-fields { margin-top: .5rem; }
.expense-amount-panel { margin: 1.25rem 0 1.25rem; padding: 1.25rem; background: rgb(248 250 252 / .65); border: 0; border-radius: var(--radius-md); }
.expense-amount-row { display: flex; align-items: flex-end; gap: 1rem; }
.expense-amount-field { flex: 1; }
.expense-currency-field { flex: 0 0 10rem; }
.expense-amount-panel > .expense-add-field-link { margin-top: .75rem; }
.expense-amount-panel > .expense-optional-field { margin: 0; }
.form-check-group { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.form-check-group label { margin-right: 1rem; cursor: pointer; }
.expense-billable-row { margin-top: 1rem; }
.expense-billable-row.is-hidden { display: none; }
.expense-section { margin-bottom: 1rem; overflow: hidden; border: 0; border-radius: var(--radius-md); background: var(--surface); }
.expense-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; color: var(--text); font-weight: 750; cursor: pointer; list-style: none; }
.expense-section > summary::-webkit-details-marker { display: none; }
.expense-section > summary::before { width: 1.2rem; color: var(--primary); content: "+"; font-size: 1.2rem; line-height: 1; }
.expense-section[open] > summary::before { content: "−"; }
.expense-section-meta { color: var(--muted); font-size: .75rem; font-weight: 600; }
.expense-section-body { padding: 1rem; border-top: 1px solid var(--border); background: rgb(248 250 252 / .45); }
.input-display { display: flex; align-items: center; min-height: 2.55rem; padding: .65rem .75rem; color: var(--text); background: var(--slate-100); border: 1px solid var(--slate-300); border-radius: var(--radius-sm); font-weight: 750; }

.project-status-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.project-status-filter { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; color: var(--text); background: var(--surface); border: 1px solid var(--slate-300); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-size: .85rem; }
.project-status-filter:hover, .project-status-filter.is-active { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.project-list-filter { margin-bottom: 1rem; }
.project-filter-row { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.project-filter-row .form-group:first-child { flex: 1 1 20rem; }
.project-filter-row .form-group:nth-child(2), .project-filter-row .form-group:nth-child(3) { flex: 0 1 13rem; }
.project-filter-row .form-group { margin: 0; }
.project-table-progress, .project-detail-progress progress { display: block; width: 8rem; height: .35rem; margin-top: .45rem; overflow: hidden; appearance: none; background: var(--slate-200); border: 0; border-radius: 999px; }
.project-table-progress::-webkit-progress-bar, .project-detail-progress progress::-webkit-progress-bar { background: var(--slate-200); border-radius: inherit; }
.project-table-progress::-webkit-progress-value, .project-detail-progress progress::-webkit-progress-value { background: var(--primary); border-radius: inherit; }
.project-table-progress::-moz-progress-bar, .project-detail-progress progress::-moz-progress-bar { background: var(--primary); border-radius: inherit; }
.tag-pill, .member-chip { display: inline-flex; padding: .2rem .45rem; color: var(--text); background: var(--slate-100); border-radius: 999px; font-size: .75rem; line-height: 1.2; }
.member-chip { margin: .1rem; }
.project-form-card { max-width: 64rem; margin-inline: auto; }
.project-form-section > .card-title { margin-bottom: 1.25rem; }
.project-progress-field input[type="range"] { width: 100%; padding: 0; border: 0; box-shadow: none; accent-color: var(--primary); }
.project-progress-field.is-task-calculated { opacity: .7; }
.project-detail-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.project-detail-progress progress { width: 100%; height: .65rem; margin: 0; }
.detail-list { display: grid; gap: .85rem; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(8rem, .45fr) 1fr; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.detail-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.detail-list dt { color: var(--muted); font-weight: 650; }
.detail-list dd { margin: 0; color: var(--slate-900); font-weight: 650; }

/* Organisation subscription billing */
.billing-tabs .btn { min-width: 8.5rem; }
.subscription-package-card { overflow: hidden; }
.subscription-package-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.subscription-package-copy > p { max-width: 52rem; color: var(--muted); }
.subscription-package-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.subscription-package-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.25rem, 2vw, 1.65rem); }
.subscription-package-heading .eyebrow { margin: 0 0 .2rem; color: var(--primary-hover); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.subscription-package-icon { display: grid; flex: 0 0 3rem; place-items: center; width: 3rem; height: 3rem; color: var(--primary-hover); background: var(--primary-soft); border-radius: 50%; font-size: 1.15rem; }
.subscription-feature-list { display: grid; gap: .65rem; margin: 1.35rem 0; padding: 0; list-style: none; }
.subscription-feature-list li { display: flex; align-items: flex-start; gap: .65rem; }
.subscription-feature-list i { margin-top: .25rem; color: var(--primary); }
.billing-profile-summary { margin-bottom: 0; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; }
.subscription-package-price { display: flex; align-items: stretch; flex-direction: column; justify-content: center; gap: .8rem; padding: 1.4rem; background: var(--slate-50); box-shadow: var(--shadow-sm); text-align: center; }
.subscription-package-price > .badge { align-self: center; }
.subscription-package-price > div { display: grid; gap: .1rem; margin-top: .35rem; }
.subscription-package-price > div strong { color: var(--text); font-size: 2rem; line-height: 1.1; }
.subscription-package-price > div span, .subscription-package-price > p { color: var(--muted); font-size: .82rem; }
.subscription-package-price > p { margin: 0 0 .5rem; }
.subscription-package-price form { display: grid; }
.subscription-edit-link { color: var(--text); font-size: .82rem; font-weight: 700; }
.btn.disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.billing-details-card .form-grid { row-gap: 1.15rem; }
.billing-form-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.payfast-redirect-card { max-width: 42rem; margin: 5rem auto; text-align: center; }
.payfast-redirect-card h1 { margin: 1rem 0 .35rem; color: var(--text); font-size: 1.5rem; }
.payfast-redirect-card form { margin-top: 1.25rem; }
.confirmation-card { max-width: 48rem; margin-inline: auto; text-align: center; }
.confirmation-card .card-body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.confirmation-card h2 { margin: .9rem 0 .3rem; color: var(--text); }
.confirmation-card > p { color: var(--muted); }
.confirmation-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 50%; font-size: 1.3rem; }
.confirmation-mark.success { color: var(--success); background: var(--success-soft); }
.confirmation-mark.pending { color: var(--warning); background: var(--warning-soft); }
.confirmation-mark.failed { color: var(--danger); background: var(--danger-soft); }
.confirmation-details { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: left; }
.billing-receipt { max-width: 62rem; margin-inline: auto; }
.billing-receipt .card-body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.billing-receipt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.billing-receipt-header h2 { margin: 0; color: var(--text); letter-spacing: -.04em; }
.billing-receipt-header h2 span { color: var(--primary-hover); }
.billing-receipt-header p, .billing-receipt-header div:last-child span { margin: .2rem 0 0; color: var(--muted); }
.billing-receipt-header div:last-child { display: grid; text-align: right; }
.billing-receipt-parties { margin-bottom: 2rem; }
.billing-receipt-parties h3 { margin: 0 0 .55rem; color: var(--muted); font-size: .75rem; letter-spacing: .07em; text-transform: uppercase; }
.billing-receipt-parties p { color: var(--muted); }

/* Superuser control panel */
.control-app .sidebar-nav a[href*="control/clients"] > i { color: currentColor; }
.control-client-table-card { overflow: visible; }
.control-client-filter { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(11rem, 14rem); align-items: end; gap: 1rem; margin: 0; padding: 1rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.control-form-section { padding-top: .25rem; }
.control-form-section:not(:first-child) { margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.control-form-section h3 { margin: 0; color: var(--text); font-size: 1rem; }
.control-form-section p { margin: .2rem 0 0; color: var(--muted); font-size: .8125rem; }
.table-secondary { margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.control-client-results { position: relative; overflow: visible; }
.control-client-results.is-loading { pointer-events: none; }
.control-client-results.is-loading .table-wrap, .control-client-results.is-loading .pagination, .control-client-results.is-loading .empty-state { opacity: .48; }
.control-client-results .action-menu-panel button:disabled { color: var(--slate-400); cursor: not-allowed; }
.control-client-results .action-menu-panel button:disabled:hover { color: var(--slate-400); background: transparent; }
.control-client-results .action-menu-panel button[data-impersonate-client], .control-client-results .action-menu-panel button[data-edit-client] { color: var(--text); }
.control-client-results .action-menu-panel button[data-impersonate-client]:hover, .control-client-results .action-menu-panel button[data-edit-client]:hover { color: var(--text); background: var(--slate-50); }
.control-client-results .action-menu-panel button[data-delete-client] { color: var(--danger); }
.modal-close, .cm-dialog [data-dialog-cancel].icon-button, .cm-filter-drawer-header .icon-button { display: inline-flex; flex: 0 0 2.25rem; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; padding: 0; color: #fff; background: var(--primary, #0b1b3a); border: 0; border-radius: 50%; font-size: 0; line-height: 1; }
.modal-close::before, .cm-dialog [data-dialog-cancel].icon-button::before, .cm-filter-drawer-header .icon-button::before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-size: 1.15rem; font-weight: 900; line-height: 1; }
.modal-close:hover, .cm-dialog [data-dialog-cancel].icon-button:hover, .cm-filter-drawer-header .icon-button:hover { color: #fff; background: var(--primary-hover, #16496b); }
html.modal-open, body.modal-open { overflow: hidden; }
.modal-body .errorlist { margin: 0; padding-left: 1.1rem; color: var(--danger); }
.control-app .modal-lg { width: min(100%, 58rem); }
.control-app .modal-header { align-items: flex-start; }
.control-app .modal-header .card-title { font-size: 1.05rem; }
.control-app .modal-body.form-grid { row-gap: 1.1rem; }
.sidebar-stop-impersonating { margin-bottom: .35rem; }
.sidebar-stop-impersonating button { color: #fff !important; background: rgb(63 164 208 / .18) !important; box-shadow: inset 3px 0 var(--primary); }
.impersonation-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; color: var(--warning); background: var(--warning-soft); border-radius: 999px; font-size: .7rem; font-weight: 800; }
.control-settings-card { max-width: 64rem; }
.control-settings-form .form-grid { row-gap: 1.15rem; }
.control-settings-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.credential-state { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .75rem; }
.credential-state .fa-check { color: var(--success); }
.credential-state .fa-xmark { color: var(--danger); }
.settings-audit { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; }

/* Campaign workspace and its Campaign Manager sub-services */
.campaign-workspace { display: grid; gap: 1.25rem; }
.campaign-subnav { display: flex; flex-wrap: wrap; gap: .45rem; padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.campaign-subnav a { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .8rem; color: var(--muted); border-radius: var(--radius-md); font-size: .8rem; font-weight: 700; text-decoration: none; }
.campaign-subnav a:hover, .campaign-subnav a.active { color: var(--primary); background: var(--slate-50); }
.campaign-list-card, .campaign-overview-card { overflow: hidden; }
.campaign-filter { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(12rem, 15rem) auto; align-items: end; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.campaign-status { display: inline-flex; align-items: center; width: max-content; padding: .25rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.campaign-status-draft { color: var(--muted); background: var(--slate-100); }
.campaign-status-active { color: #146c46; background: #e6f6ed; }
.campaign-status-paused { color: #8a5a00; background: #fff3d6; }
.campaign-status-completed { color: #245d90; background: #e6f1fb; }
.campaign-status-archived, .campaign-status-closed { color: #8c3942; background: #fbeaec; }
.campaign-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.campaign-detail-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.35rem, 2vw, 1.8rem); letter-spacing: -.04em; }
.campaign-detail-heading p:not(.eyebrow) { max-width: 58rem; margin: .35rem 0 0; color: var(--muted); }
.campaign-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.campaign-service-card { display: block; color: var(--text); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.campaign-service-card:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.campaign-service-card > i { color: var(--primary-hover); font-size: 1.1rem; }
.campaign-service-card h3 { margin: .85rem 0 .35rem; font-size: 1rem; }
.campaign-service-card p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.campaign-overview-card { max-width: 60rem; }
.detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.detail-list div { padding: .9rem; background: var(--slate-50); border-radius: var(--radius-md); }
.detail-list dt { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.detail-list dd { margin: .25rem 0 0; color: var(--text); font-weight: 700; }
.inline-form { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.inline-form label { flex-basis: 100%; margin-bottom: -.4rem; }
.inline-form select { min-width: 18rem; flex: 1; }
.choice-list { display: grid; gap: .55rem; padding: .75rem; background: var(--slate-50); border: 1px solid var(--border); border-radius: var(--radius-md); }
.choice-list label { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--text); font-weight: 500; }

@media (max-width: 900px) { .campaign-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campaign-filter { grid-template-columns: 1fr 1fr; } .campaign-filter .page-actions { grid-column: span 2; } }
@media (max-width: 600px) { .campaign-service-grid, .detail-list, .campaign-filter { grid-template-columns: 1fr; } .campaign-filter .page-actions { grid-column: auto; } .campaign-detail-heading { flex-direction: column; } .inline-form select { min-width: 0; width: 100%; } .campaign-subnav { overflow-x: auto; flex-wrap: nowrap; } .campaign-subnav a { white-space: nowrap; } }

@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(--text); 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; }
  .expense-receipt-panel { margin: -1.25rem -1.25rem 1.25rem; padding: 1rem 1.25rem; } .expense-receipt-dropzone { align-items: flex-start; flex-wrap: wrap; } .expense-receipt-filename { flex-basis: 100%; margin-left: 2.35rem; } .expense-amount-row { align-items: stretch; flex-direction: column; gap: .75rem; } .expense-currency-field { flex-basis: auto; }
  .metrics-grid, .grid-2, .grid-3 { grid-template-columns: 1fr; } .form-col-8, .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; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .pagination-buttons { justify-content: flex-start; }
  .pagination-edge span { display: none; }
  .section18-document { min-height: 0; padding: 1.5rem; }
  .section18-header { grid-template-columns: 1fr; text-align: center; }
  .section18-header > span { display: none; }
  .section18-heading { margin: 1.5rem 0 2rem; }
  .section18-heading h3 { margin-top: 2rem; }
  .section18-details > div { grid-template-columns: 1fr; gap: .15rem; }
  .control-client-filter { grid-template-columns: 1fr; }
  .subscription-package-layout { grid-template-columns: 1fr; }
  .billing-form-actions { align-items: stretch; flex-direction: column-reverse; }
  .billing-form-actions .btn { width: 100%; }
  .billing-receipt-header { flex-direction: column; }
  .billing-receipt-header div:last-child { text-align: left; }
  .control-settings-actions { align-items: stretch; flex-direction: column; }
  .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, .section18-page-header, .section18-payment-warning, .billing-receipt-actions { display: none !important; } .main-frame { margin: 0; } .content { padding: 18mm !important; } .card, .panel, .invoice-document, .section18-document { box-shadow: none; } .invoice-document { max-width: none; } .invoice-document .invoice-totals { padding: 0; background: transparent; border-radius: 0; } .section18-document { width: 100%; min-height: calc(297mm - 36mm); padding: 0; } }