/* =============================================================================
   tawala-ui-wbrand-portal.css — [tawala WBRAND] 2026-10-19 · job wbrand (P3W0)
   Look A for the pages outside the admin shell: customer portal (/clients/*, help centre), public invoice /
   estimate / proposal pages, customer login / register / forgot password, staff login / forgot password / 2FA /
   reset password. Loaded ONLY when tawala_ui_v2 = 1 AND tawala_ui_look = 'a' (tawala_ui_wbrand_helper.php);
   every rule sits under html.twb-look-a (added by the same helper), so look-off companies never see it.
   Look only: tokens, type, corners, control heights — no layout or behaviour change.
   1 tokens (light + dark)  2 base type  3 sign-in pages  4 portal shell  5 portal content  6 public documents  7 phone
   ============================================================================= */

/* ------------------------------------------------------------------ 1. TOKENS */
html.twb-look-a {
  --a2-font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --a2-navy: #1B3A6B; --a2-navy-h: #152F57; --a2-navy-a: #10264A; --a2-soft: #E3EAF5;
  --a2-amber: #E89B1C; --a2-amber-ink: #8A5600; --a2-amber-soft: #FCF1DD;
  --a2-ink: #14213D; --a2-text: #1F2A44; --a2-muted: #5B6475; --a2-line: #E2E6ED; --a2-field: #C9D0DB; --a2-sub: #F1F4F8; --a2-bg: #F5F7FA; --a2-surface: #FFFFFF;
  --a2-ok: #1E7A46; --a2-ok-bg: #E5F4EA; --a2-bad: #B42318; --a2-bad-bg: #FDECEA;
  --a2-ring: 0 0 0 3px rgba(27, 58, 107, .22);
  /* tawala-tokens.css (sign-in pages + old portal head) */
  --tw-font-sans: var(--a2-font); --tw-font-display: var(--a2-font);
  --tw-primary: #1B3A6B; --tw-primary-hover: #152F57; --tw-primary-active: #10264A; --tw-primary-soft: #E3EAF5; --tw-primary-soft-fg: #152F57;
  --tw-primary-700: #152F57; --tw-purple-700: #152F57; --tw-purple-900: #0B1B36; --tw-cyan-400: #E89B1C;
  --tw-accent: #E89B1C; --tw-accent-hover: #C98414; --tw-accent-soft: #FCF1DD; --tw-accent-soft-fg: #8A5600;
  --tw-text: #14213D; --tw-text-muted: #5B6475; --tw-text-subtle: #8A93A3; --tw-text-link: #1B3A6B;
  --tw-bg: #F5F7FA; --tw-bg-subtle: #F5F7FA; --tw-surface: #FFFFFF; --tw-surface-muted: #F1F4F8; --tw-surface-sunken: #F1F4F8;
  --tw-border: #C9D0DB; --tw-border-subtle: #E2E6ED; --tw-border-strong: #C9D0DB;
  --tw-success: #1E7A46; --tw-success-soft: #E5F4EA; --tw-success-soft-fg: #1E7A46;
  --tw-warning: #E89B1C; --tw-warning-soft: #FCF1DD; --tw-warning-soft-fg: #8A5600;
  --tw-danger: #B42318; --tw-danger-soft: #FDECEA; --tw-danger-soft-fg: #B42318;
  --tw-focus-ring: #1B3A6B; --tw-shadow-focus: 0 0 0 3px rgba(27, 58, 107, .22);
  --tw-radius-sm: 6px; --tw-radius-md: 6px; --tw-radius-lg: 10px;
  /* W4CUST portal tokens */
  --twp-accent: #1B3A6B; --twp-accent-hover: #152F57; --twp-accent-soft: #E3EAF5; --twp-accent-ink: #10264A;
  --twp-ink: #14213D; --twp-text: #1F2A44; --twp-muted: #5B6475; --twp-subtle: #8A93A3;
  --twp-bg: #F5F7FA; --twp-surface: #FFFFFF; --twp-surface-2: #F1F4F8; --twp-border: #E2E6ED; --twp-border-strong: #C9D0DB;
  --twp-good: #1E7A46; --twp-good-bg: #E5F4EA; --twp-warn: #8A5600; --twp-warn-bg: #FCF1DD;
  --twp-bad: #B42318; --twp-bad-bg: #FDECEA; --twp-info: #1B3A6B; --twp-info-bg: #E3EAF5; --twp-neutral: #5B6475; --twp-neutral-bg: #EEF1F5;
  --twp-head: var(--a2-font);
  /* chart colours read by tawala-ui-wbrand.js */
  --twu-chart-1: #1B3A6B; --twu-chart-2: #E89B1C; --twu-chart-3: #2F8F83; --twu-chart-4: #6F8FC2; --twu-chart-5: #B4531A; --twu-chart-6: #8E9BB3;
}
@media (prefers-color-scheme: dark) {
  html.twb-look-a.twp:not(.twp-public) {
    --a2-navy: #4A74B8; --a2-navy-h: #5B86C9; --a2-navy-a: #9DB8E3; --a2-soft: rgba(74, 116, 184, .2);
    --a2-amber: #F0A93B; --a2-amber-ink: #F0A93B; --a2-amber-soft: rgba(240, 169, 59, .16);
    --a2-ink: #EEF2F8; --a2-text: #DCE3EE; --a2-muted: #9AA6BA; --a2-line: #23324C; --a2-field: #34476A; --a2-sub: #16233A; --a2-bg: #0B1322; --a2-surface: #111C2E;
    --a2-ok: #5CC68A; --a2-ok-bg: rgba(92, 198, 138, .14); --a2-bad: #F08A80; --a2-bad-bg: rgba(240, 138, 128, .14);
    --twp-accent: #4A74B8; --twp-accent-hover: #5B86C9; --twp-accent-soft: rgba(74, 116, 184, .2); --twp-accent-ink: #9DB8E3;
    --twp-ink: #EEF2F8; --twp-text: #DCE3EE; --twp-muted: #9AA6BA; --twp-subtle: #6F7D94;
    --twp-bg: #0B1322; --twp-surface: #111C2E; --twp-surface-2: #16233A; --twp-border: #23324C; --twp-border-strong: #34476A;
    --twp-good: #5CC68A; --twp-good-bg: rgba(92, 198, 138, .14); --twp-warn: #F0A93B; --twp-warn-bg: rgba(240, 169, 59, .15);
    --twp-bad: #F08A80; --twp-bad-bg: rgba(240, 138, 128, .14); --twp-info: #9DB8E3; --twp-info-bg: rgba(74, 116, 184, .2); --twp-neutral: #C3CCDA; --twp-neutral-bg: rgba(154, 166, 186, .14);
    --tw-primary: #4A74B8; --tw-text: #EEF2F8; --tw-text-muted: #9AA6BA; --tw-bg: #0B1322; --tw-surface: #111C2E; --tw-border: #34476A; --tw-border-subtle: #23324C; --tw-text-link: #9DB8E3;
    --twu-chart-1: #6F8FC2; --twu-chart-2: #F0A93B; --twu-chart-3: #4DB6A8; --twu-chart-4: #9DB8E3; --twu-chart-5: #E07A4A; --twu-chart-6: #7F8BA3;
  }
}
/* public documents ("paper") stay light, as W4CUST decided */
html.twb-look-a .tw-money-page, html.twb-look-a .twp-paper { --twp-ink: #14213D; --twp-text: #1F2A44; --twp-muted: #5B6475; --twp-surface: #FFFFFF; --twp-surface-2: #F1F4F8; --twp-border: #E2E6ED; --twp-border-strong: #C9D0DB; }

/* --------------------------------------------------------------- 2. BASE TYPE */
html.twb-look-a body, html.twb-look-a body.customers, html.twb-look-a body.tw-page { font-family: var(--a2-font) !important; font-size: 14px; -webkit-font-smoothing: antialiased; font-feature-settings: normal; }
html.twb-look-a body :where(*:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]):not(.glyphicon):not([class^="glyphicon"]):not(code):not(pre):not(kbd):not(.material-icons):not([class*="icon-"]):not(.caret)) { font-family: var(--a2-font) !important; }
html.twb-look-a body :is(input, select, textarea, button) { font-family: var(--a2-font) !important; }
html.twb-look-a body :is(.tw-display, .tw-mono) { font-family: var(--a2-font) !important; letter-spacing: 0 !important; }
html.twb-look-a body :is(table, .table, .money, .amount, .total, .stats-numbers, [class*="-total"]) { font-variant-numeric: tabular-nums; }
html.twb-look-a body a { color: var(--a2-navy); }
html.twb-look-a :focus-visible { outline: 0; box-shadow: var(--a2-ring) !important; }
/* inline text sizes written into markup -> the 5-size scale (22 / 16 / 14 / 13 / 12) */
html.twb-look-a body :is([style*="font-size: 10px"], [style*="font-size:10px"], [style*="font-size: 10.5px"], [style*="font-size:10.5px"], [style*="font-size: 11px"], [style*="font-size:11px"], [style*="font-size: 11.5px"], [style*="font-size:11.5px"]) { font-size: 12px !important; }
html.twb-look-a body :is([style*="font-size: 12.5px"], [style*="font-size:12.5px"], [style*="font-size: 13.5px"], [style*="font-size:13.5px"]) { font-size: 13px !important; }
html.twb-look-a body :is([style*="font-size: 15px"], [style*="font-size:15px"], [style*="font-size: 14.5px"], [style*="font-size:14.5px"]) { font-size: 14px !important; }
html.twb-look-a body :is([style*="font-size: 17px"], [style*="font-size:17px"], [style*="font-size: 18px"], [style*="font-size:18px"], [style*="font-size: 20px"], [style*="font-size:20px"]) { font-size: 16px !important; }
html.twb-look-a body :is([style*="font-size: 24px"], [style*="font-size:24px"], [style*="font-size: 26px"], [style*="font-size:26px"], [style*="font-size: 28px"], [style*="font-size:28px"], [style*="font-size: 30px"], [style*="font-size:30px"]) { font-size: 22px !important; }
html.twb-look-a body [style*="font-weight: 650"], html.twb-look-a body [style*="font-weight:650"], html.twb-look-a body [style*="font-weight: 550"], html.twb-look-a body [style*="font-weight:550"] { font-weight: 600 !important; }
html.twb-look-a body [style*="letter-spacing"] { letter-spacing: 0 !important; }
html.twb-look-a body [style*="#2563EB" i] { color: var(--a2-navy) !important; }

/* ----------------------------------------------------------- 3. SIGN-IN PAGES
   staff + customer login, forgot / reset / set password, staff 2FA (same .auth-grid page, or Perfex's auth head) */
html.twb-look-a .auth-grid { background: var(--a2-bg); }
html.twb-look-a .auth-form__card h1, html.twb-look-a .auth-form h1 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--a2-ink) !important; }
html.twb-look-a .auth-form__card > p { font-size: 14px !important; color: var(--a2-muted) !important; }
html.twb-look-a .auth-form label:not(.auth-checkbox) { font-size: 13px !important; font-weight: 600 !important; color: var(--a2-ink) !important; }
html.twb-look-a :is(.auth-input, .auth-form select.form-control, .auth-form .bootstrap-select > .dropdown-toggle, .auth-form .form-control) {
  height: 36px !important; min-height: 36px; border-radius: 6px !important; border: 1px solid var(--a2-field) !important; font-size: 14px !important; padding: 0 12px; background: var(--a2-surface); color: var(--a2-ink); box-shadow: none;
}
html.twb-look-a :is(.auth-input, .auth-form .form-control):focus { border-color: var(--a2-navy) !important; box-shadow: var(--a2-ring) !important; }
html.twb-look-a .auth-checkbox { font-size: 14px !important; color: var(--a2-text) !important; }
html.twb-look-a .auth-checkbox input { accent-color: var(--a2-navy) !important; }
html.twb-look-a :is(.tw-btn, .auth-form .btn) { height: 36px !important; min-height: 36px; border-radius: 6px !important; font: 600 14px/1 var(--a2-font) !important; letter-spacing: 0 !important; box-shadow: none !important; }
html.twb-look-a .tw-btn:not(.tw-btn--secondary):not(.tw-btn--ghost):not(.btn-default), html.twb-look-a .auth-form .btn-primary { background: var(--a2-navy) !important; border: 1px solid var(--a2-navy) !important; color: #fff !important; }
html.twb-look-a .tw-btn:not(.tw-btn--secondary):not(.tw-btn--ghost):not(.btn-default):hover, html.twb-look-a .auth-form .btn-primary:hover { background: var(--a2-navy-h) !important; border-color: var(--a2-navy-h) !important; }
html.twb-look-a :is(.tw-btn--secondary, .auth-form .btn-default) { background: var(--a2-surface) !important; border: 1px solid var(--a2-field) !important; color: var(--a2-ink) !important; }
html.twb-look-a .auth-form a:not(.btn):not(.tw-btn) { color: var(--a2-navy) !important; }
html.twb-look-a .auth-form > div:first-child a:first-child span { font-size: 16px !important; font-weight: 700 !important; color: var(--a2-ink) !important; }
html.twb-look-a .auth-form > div:first-child a + a, html.twb-look-a .auth-form > div:last-child, html.twb-look-a .auth-form > div:last-child a { color: var(--a2-muted) !important; font-size: 12px !important; }
html.twb-look-a :is(.auth-alert, .auth-form .alert) { border-radius: 8px !important; font-size: 13px !important; }
/* the brand pane: flat navy (the rail colour) instead of the blue-purple gradient; amber glow */
html.twb-look-a .auth-pane { background: #14213D !important; }
html.twb-look-a .auth-pane__halo { opacity: .14 !important; background: radial-gradient(circle at 80% 20%, #E89B1C 0%, transparent 42%) !important; }
html.twb-look-a .auth-pane h2 { font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; }
html.twb-look-a .auth-pane p { font-size: 14px !important; }
html.twb-look-a .auth-pane [style*="border-radius:8px"], html.twb-look-a .auth-pane [style*="border-radius: 8px"] { border-radius: 10px !important; }
html.twb-look-a .auth-pane [style*="border-radius: 11px"] { border-radius: 10px !important; }
/* Perfex's own auth head (2FA code, reset / set password): Bootstrap card page */
html.twb-look-a.twb-auth body { background: var(--a2-bg) !important; color: var(--a2-text) !important; }
html.twb-look-a.twb-auth body :is(h1, h2, h3, h4, .h4) { font-size: 22px !important; font-weight: 600 !important; color: var(--a2-ink) !important; }
html.twb-look-a.twb-auth body .authentication-form-wrapper, html.twb-look-a.twb-auth body .authentication-form, html.twb-look-a.twb-auth body .panel_s, html.twb-look-a.twb-auth body form.tw-bg-white { border-radius: 10px !important; border: 1px solid var(--a2-line) !important; box-shadow: none !important; background: var(--a2-surface); }
html.twb-look-a.twb-auth body :is(.form-control, input[type=text], input[type=password], input[type=email]) { height: 36px !important; border-radius: 6px !important; border: 1px solid var(--a2-field) !important; font-size: 14px !important; box-shadow: none !important; }
html.twb-look-a.twb-auth body :is(.form-control, input):focus { border-color: var(--a2-navy) !important; box-shadow: var(--a2-ring) !important; }
html.twb-look-a.twb-auth body :is(label, .control-label) { font-size: 13px !important; font-weight: 600 !important; color: var(--a2-ink) !important; }
html.twb-look-a.twb-auth body .btn { height: 36px !important; border-radius: 6px !important; font: 600 14px/1 var(--a2-font) !important; box-shadow: none !important; }
html.twb-look-a.twb-auth body :is(.btn-primary, .btn-info) { background: var(--a2-navy) !important; border-color: var(--a2-navy) !important; color: #fff !important; }
html.twb-look-a.twb-auth body .btn-default { background: var(--a2-surface) !important; border: 1px solid var(--a2-field) !important; color: var(--a2-ink) !important; }
html.twb-look-a.twb-auth body a:not(.btn) { color: var(--a2-navy) !important; }
html.twb-look-a.twb-auth body .alert { border-radius: 8px !important; font-size: 13px !important; }
html.twb-look-a.twb-auth body .alert-danger { background: var(--a2-bad-bg) !important; color: var(--a2-bad) !important; border-color: transparent !important; }
html.twb-look-a.twb-auth body .alert-success { background: var(--a2-ok-bg) !important; color: var(--a2-ok) !important; border-color: transparent !important; }
html.twb-look-a.twb-auth body .alert-info { background: var(--a2-soft) !important; color: var(--a2-navy-a) !important; border-color: transparent !important; }

/* ------------------------------------------------------------ 4. PORTAL SHELL */
html.twb-look-a body.customers { background: var(--twp-bg, var(--a2-bg)) !important; color: var(--twp-text, var(--a2-text)); }
html.twb-look-a body.customers :is(h1, h2, h3, h4) { font-family: var(--a2-font) !important; letter-spacing: -.005em; }
html.twb-look-a .twp-top { min-height: 56px; }
html.twb-look-a .twp-logo { border-radius: 6px; font-family: var(--a2-font); }
html.twb-look-a .twp-brand__txt b { font-size: 14px !important; }
html.twb-look-a :is(.twp-brand__txt span, .twp-user__who span) { font-size: 12px !important; }
html.twb-look-a .twp-nav__a { border-radius: 6px !important; font-size: 14px !important; height: 36px; }
html.twb-look-a .twp-nav__a.is-on { background: var(--twp-accent-soft) !important; color: var(--twp-accent) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--a2-amber); }
html.twb-look-a .twp-user__av { border-radius: 6px !important; }
html.twb-look-a .twp-user__badge { font-size: 12px !important; background: var(--a2-amber) !important; color: #14213D !important; }
html.twb-look-a .twp-user__menu .dropdown-menu { border-radius: 8px !important; }
html.twb-look-a .twp-user__menu .dropdown-menu > li > a { font-size: 14px !important; border-radius: 6px; }
html.twb-look-a .customer-top-submenu > li > a { height: 30px !important; border-radius: 6px !important; font-size: 13px !important; }
html.twb-look-a .customer-top-submenu > li.active > a, html.twb-look-a .customer-top-submenu > li > a:hover { border-color: var(--twp-accent) !important; color: var(--twp-accent) !important; }
html.twb-look-a .twp-foot, html.twb-look-a .twp-foot--public { font-size: 12px !important; }
/* the old portal head (pre-W4CUST shell) */
html.twb-look-a .tw-shell__nav a { border-radius: 6px; font-size: 14px; }
html.twb-look-a .tw-shell__nav a.is-active { background: var(--a2-soft) !important; color: var(--a2-navy) !important; }
html.twb-look-a .tw-shell__sec { font-size: 12px; text-transform: none; letter-spacing: 0; }
html.twb-look-a .tw-shell__brand span { font-size: 16px; }

/* --------------------------------------------------------- 5. PORTAL CONTENT */
html.twb-look-a body.customers :is(h1, .h1) { font-size: 22px !important; font-weight: 600 !important; color: var(--twp-ink) !important; }
html.twb-look-a body.customers :is(h2, h3, .h3, .section-heading, .tw-section-heading, .panel-title, .modal-title) { font-size: 16px !important; font-weight: 600 !important; color: var(--twp-ink) !important; }
html.twb-look-a body.customers .section-client-dashboard > h3:first-child, html.twb-look-a body.customers .tw-portal-home h3.tw-font-semibold:first-child { font-size: 22px !important; }
html.twb-look-a body.customers :is(h4, .h4) { font-size: 16px !important; font-weight: 600 !important; }
html.twb-look-a body.customers :is(h5, .h5) { font-size: 14px !important; font-weight: 600 !important; }
html.twb-look-a body.customers :is(small, .small, .help-block, .text-muted) { font-size: 12px; }
html.twb-look-a body.customers .text-muted { color: var(--twp-muted) !important; }
html.twb-look-a body.customers :is(.panel_s, .panel, .tw-card, .card) { border-radius: 10px !important; border: 1px solid var(--twp-border) !important; box-shadow: none !important; }
html.twb-look-a body.customers .panel-heading { background: var(--twp-surface) !important; color: var(--twp-ink) !important; border-color: var(--twp-border) !important; border-radius: 10px 10px 0 0; font-size: 16px; font-weight: 600; }
/* buttons: 36 / 30 px, 6 px corners (no pills) */
html.twb-look-a body.customers .btn { height: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; border-radius: 6px !important; font: 600 14px/1 var(--a2-font) !important; box-shadow: none !important; text-shadow: none !important; }
html.twb-look-a body.customers :is(.btn-sm, .btn-xs) { height: 30px; min-height: 30px; padding: 0 10px; font-size: 13px !important; }
html.twb-look-a body.customers .btn-lg { height: 36px; font-size: 14px !important; }
html.twb-look-a body.customers .btn-block { display: flex; }
html.twb-look-a body.customers :is(.btn-primary, .btn-info) { background: var(--twp-accent) !important; border-color: var(--twp-accent) !important; color: #fff !important; }
html.twb-look-a body.customers :is(.btn-primary, .btn-info):hover { background: var(--twp-accent-hover) !important; border-color: var(--twp-accent-hover) !important; }
html.twb-look-a body.customers .btn-success { background: var(--twp-good) !important; border-color: var(--twp-good) !important; color: #fff !important; }
html.twb-look-a body.customers .btn-default { background: var(--twp-surface) !important; border: 1px solid var(--twp-border-strong) !important; color: var(--twp-ink) !important; }
html.twb-look-a body.customers .btn-danger { background: var(--twp-surface) !important; border: 1px solid var(--twp-bad) !important; color: var(--twp-bad) !important; }
html.twb-look-a body.customers .btn-warning { background: var(--a2-amber) !important; border-color: var(--a2-amber) !important; color: #14213D !important; }
html.twb-look-a body.customers .btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html.twb-look-a body.customers .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
/* fields: 36 px, 6 px, label 13/600 above */
html.twb-look-a body.customers :is(.form-control, .bootstrap-select > .dropdown-toggle, .dataTables_filter input, .dataTables_length select, .input-group-addon) { height: 36px; min-height: 36px; border-radius: 6px !important; border: 1px solid var(--twp-border-strong) !important; font-size: 14px !important; box-shadow: none !important; background-color: var(--twp-surface); color: var(--twp-ink); }
html.twb-look-a body.customers textarea.form-control, html.twb-look-a body.customers select[multiple].form-control { height: auto; min-height: 72px; }
html.twb-look-a body.customers :is(.form-control, .dataTables_filter input):focus { border-color: var(--twp-accent) !important; box-shadow: var(--a2-ring) !important; }
html.twb-look-a body.customers .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html.twb-look-a body.customers .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html.twb-look-a body.customers :is(label, .control-label) { font-size: 13px !important; font-weight: 600 !important; color: var(--twp-ink); text-transform: none !important; letter-spacing: 0 !important; }
html.twb-look-a body.customers :is(.checkbox, .radio) label { font-weight: 400 !important; font-size: 14px !important; }
html.twb-look-a body.customers input[type=checkbox], html.twb-look-a body.customers input[type=radio] { accent-color: var(--twp-accent); }
html.twb-look-a body.customers .checkbox input[type=checkbox]:checked + label::before { background-color: var(--twp-accent) !important; border-color: var(--twp-accent) !important; }
/* tables (UI-A2 tables: 12/600 sentence-case head on soft grey, 13 px rows) */
html.twb-look-a body.customers .table > thead > tr > th { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--twp-muted) !important; background: var(--twp-surface-2) !important; }
html.twb-look-a body.customers .table > tbody > tr > td { font-size: 13px !important; font-variant-numeric: tabular-nums; }
html.twb-look-a body.customers .dataTables_wrapper :is(.dataTables_info, .dataTables_length label, .dataTables_filter label) { font-size: 13px !important; font-weight: 400 !important; color: var(--twp-muted); }
html.twb-look-a body.customers .pagination > li > a, html.twb-look-a body.customers .pagination > li > span, html.twb-look-a body.customers .paginate_button { min-width: 30px; height: 30px; line-height: 28px; padding: 0 8px; border-radius: 6px !important; font-size: 13px !important; }
html.twb-look-a body.customers .pagination > .active > :is(a, span), html.twb-look-a body.customers .paginate_button.current { background: var(--twp-accent) !important; border-color: var(--twp-accent) !important; color: #fff !important; }
/* status pills: 4 px badges, 12/600, token colours (Perfex writes the status colour into style="") */
html.twb-look-a body.customers :is(.label, .badge, [class*="invoice-status-"], [class*="estimate-status-"], [class*="proposal-status-"], [class*="ticket-status-"], .twp-pill) { border-radius: 4px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
html.twb-look-a body.customers .label-success, html.twb-look-a body.customers [style*="color:#84c529" i], html.twb-look-a body.customers [style*="color: #84c529" i], html.twb-look-a body.customers [style*="color:#22c55e" i] { color: var(--twp-good) !important; border-color: transparent !important; }
html.twb-look-a body.customers .label-success { background: var(--twp-good-bg) !important; }
html.twb-look-a body.customers .label-danger, html.twb-look-a body.customers [style*="color:#fc2d42" i], html.twb-look-a body.customers [style*="color: #fc2d42" i], html.twb-look-a body.customers [style*="color:#ef4444" i] { color: var(--twp-bad) !important; border-color: transparent !important; }
html.twb-look-a body.customers .label-danger { background: var(--twp-bad-bg) !important; }
html.twb-look-a body.customers .label-warning, html.twb-look-a body.customers [style*="color:#ff6f00" i], html.twb-look-a body.customers [style*="color: #ff6f00" i], html.twb-look-a body.customers [style*="color:#f97316" i] { color: var(--twp-warn) !important; border-color: transparent !important; }
html.twb-look-a body.customers .label-warning { background: var(--twp-warn-bg) !important; }
html.twb-look-a body.customers :is(.label-info, .label-primary), html.twb-look-a body.customers [style*="color:#03a9f4" i], html.twb-look-a body.customers [style*="color: #03a9f4" i], html.twb-look-a body.customers [style*="color:#3b82f6" i], html.twb-look-a body.customers [style*="color:#2563eb" i], html.twb-look-a body.customers [style*="color:#28b8da" i] { color: var(--twp-info) !important; border-color: transparent !important; }
html.twb-look-a body.customers :is(.label-info, .label-primary) { background: var(--twp-info-bg) !important; }
html.twb-look-a body.customers .label-default { background: var(--twp-neutral-bg) !important; color: var(--twp-neutral) !important; border-color: transparent !important; }
html.twb-look-a body.customers :is(.text-success) { color: var(--twp-good) !important; }
html.twb-look-a body.customers :is(.text-danger) { color: var(--twp-bad) !important; }
html.twb-look-a body.customers :is(.text-warning) { color: var(--twp-warn) !important; }
html.twb-look-a body.customers :is(.text-info, .text-primary) { color: var(--twp-info) !important; }
/* invoice stats + progress */
html.twb-look-a body.customers .progress { height: 6px; border-radius: 999px; background: var(--twp-surface-2); box-shadow: none; }
html.twb-look-a body.customers .progress-bar { background-image: none !important; box-shadow: none; background-color: var(--twp-accent); }
html.twb-look-a body.customers .progress-bar-success { background-color: var(--twp-good) !important; }
html.twb-look-a body.customers .progress-bar-danger { background-color: var(--twp-bad) !important; }
html.twb-look-a body.customers .progress-bar-warning { background-color: var(--a2-amber) !important; }
html.twb-look-a body.customers .stats-numbers { font-size: 14px; font-weight: 600; color: var(--twp-ink); }
/* alerts, tabs, modals, dropzone, wells (help centre, tickets, project area) */
html.twb-look-a body.customers .alert { border-radius: 8px !important; font-size: 14px; }
html.twb-look-a body.customers .alert-info { background: var(--twp-info-bg) !important; color: var(--twp-info) !important; border-color: transparent !important; }
html.twb-look-a body.customers .alert-success { background: var(--twp-good-bg) !important; color: var(--twp-good) !important; border-color: transparent !important; }
html.twb-look-a body.customers .alert-warning { background: var(--twp-warn-bg) !important; color: var(--twp-warn) !important; border-color: transparent !important; }
html.twb-look-a body.customers .alert-danger { background: var(--twp-bad-bg) !important; color: var(--twp-bad) !important; border-color: transparent !important; }
html.twb-look-a body.customers .nav-tabs > li > a { font-size: 14px !important; color: var(--twp-muted); border-radius: 6px 6px 0 0; }
html.twb-look-a body.customers .nav-tabs > li.active > a { color: var(--twp-accent) !important; font-weight: 600; border-bottom-color: var(--a2-amber) !important; }
html.twb-look-a body.customers .modal-content { border-radius: 10px !important; }
html.twb-look-a body.customers .dropdown-menu { border-radius: 8px !important; }
html.twb-look-a body.customers .dropzone { border: 1px dashed var(--twp-border-strong) !important; border-radius: 10px !important; background: var(--twp-surface-2) !important; font-size: 13px; }
html.twb-look-a body.customers .well { border-radius: 10px; background: var(--twp-surface-2); border-color: var(--twp-border); box-shadow: none; }
html.twb-look-a .tw8p-bnr { border-radius: 10px !important; }
html.twb-look-a .tw8p-bnr .btn, html.twb-look-a .article_useful_buttons .btn, html.twb-look-a .ticket-status-inline .label { border-radius: 6px !important; }
html.twb-look-a .kb-search-jumbotron .form-control { border-radius: 6px !important; height: 36px !important; }
html.twb-look-a body.customers .kb-search-jumbotron :is(h1, h2, h3) { font-size: 22px !important; }
html.twb-look-a .panel_s.client-reply { border-left: 3px solid var(--a2-amber) !important; }
html.twb-look-a .twp-pbar__name { font-size: 16px !important; }
/* project area (gantt / calendar / discussions in the portal) */
html.twb-look-a body.customers .gantt .bar { fill: var(--twu-chart-4) !important; }
html.twb-look-a body.customers .gantt .bar-progress { fill: var(--twp-accent) !important; }
html.twb-look-a body.customers .gantt :is(.bar-label, .lower-text, .upper-text) { font-family: var(--a2-font) !important; font-size: 12px !important; }
html.twb-look-a body.customers .fc { font-family: var(--a2-font) !important; font-size: 13px; }
html.twb-look-a body.customers .fc .fc-button-primary { height: 30px; border-radius: 6px !important; font: 600 13px/1 var(--a2-font) !important; background: var(--twp-surface) !important; border: 1px solid var(--twp-border-strong) !important; color: var(--twp-ink) !important; text-transform: none; }
html.twb-look-a body.customers .fc .fc-button-primary.fc-button-active { background: var(--twp-accent) !important; border-color: var(--twp-accent) !important; color: #fff !important; }
html.twb-look-a body.customers .fc .fc-toolbar-title { font-size: 16px !important; font-weight: 600; }

/* -------------------------------------------------------- 6. PUBLIC DOCUMENTS */
html.twb-look-a.twp-public .tw-money-page :is(.invoice-html-pay-now-top, #pay_now, .btn) { height: 36px !important; border-radius: 6px !important; padding: 0 16px !important; font-size: 14px !important; }
html.twb-look-a.twp-public .tw-money-page :is(.btn-success, #pay_now.btn-success, .invoice-html-pay-now-top.btn-success) { background: var(--a2-navy) !important; border-color: var(--a2-navy) !important; color: #fff !important; }
html.twb-look-a.twp-public :is(.invoice-html-status, .estimate-html-status, .proposal-html-status) .label { border-radius: 4px !important; }
html.twb-look-a body.customers :is(.invoice-html-number, .estimate-html-number, .proposal-html-number, h4.bold) { font-size: 16px !important; font-weight: 600 !important; }
html.twb-look-a body.customers .tw-money-page :is(h1, .invoice-html-heading) { font-size: 22px !important; }
html.twb-look-a body.customers .tw-money-page table.items thead th, html.twb-look-a body.customers .tw-money-page .table.items > thead > tr > th { background: var(--a2-navy) !important; color: #fff !important; }

/* ----------------------------------------------------------------- 7. PHONE */
@media (max-width: 600px) {
  html.twb-look-a .auth-form { padding: 20px 16px !important; }
  html.twb-look-a .twp-nav__a { font-size: 13px !important; padding: 0 10px; }
  html.twb-look-a body.customers .btn:not(.btn-block) { max-width: 100%; }
}

/* brand pane text stays white (the generic heading colour rules above must not reach it) */
html.twb-look-a body .auth-grid .auth-pane :is(h1, h2, h3, h4, span, div) { color: #fff !important; }
html.twb-look-a body .auth-grid .auth-pane p { color: rgba(255, 255, 255, .78) !important; }