/* ==========================================================================
   AK Trading ERP - shared design layer (Phase 1)
   Loaded last in <head> on app pages. Never on printed or customer documents.

   How it works
   - Tokens use the --akd- prefix. --ak-* is already taken with other meanings
     (whatsapp.html, proforma.html, akerp-design.css).
   - The Tailwind CDN appends its <style> after this file at runtime, and some
     pages have <style> in <body>. So rules start with :root to win by
     specificity instead of by load order.
   - Almost nothing here is !important. That is on purpose: inline styles,
     the page .dark rules and the phone rules in ak-mobile.css / mobile.css
     keep winning. The few !important uses are marked.
   - Sizes live in a min-width:769px block, so phones keep their own layout.
   - Everything except tokens is inside @media screen, so print is untouched.
   - Do not add a selector like [class*="bg-"]: repair-list status badges use
     .bg-p .bg-d .bg-w .bg-r .bg-q .bg-g .bg-c .bg-x .bg-n and must keep colour.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --akd-font: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;

  /* Type scale */
  --akd-fs-xs: 11px;   /* badges */
  --akd-fs-sm: 12px;   /* labels, table headers */
  --akd-fs-md: 13px;   /* buttons, dense text */
  --akd-fs-base: 14px; /* body */
  --akd-fs-lg: 16px;
  --akd-fs-xl: 20px;
  --akd-fs-2xl: 24px;
  --akd-fs-3xl: 28px;

  /* Three corner sizes. Pills and avatars stay fully round. */
  --akd-r-sm: 4px;   /* chips, small controls */
  --akd-r-md: 8px;   /* buttons, inputs */
  --akd-r-lg: 8px;   /* cards, modals (phase 3: one radius) */

  /* Neutrals (same steps as Tailwind gray, the most used scale) */
  --akd-n-0: #ffffff;
  --akd-n-50: #f9fafb;
  --akd-n-100: #f3f4f6;
  --akd-n-200: #e5e7eb;
  --akd-n-300: #d1d5db;
  --akd-n-400: #9ca3af;
  --akd-n-500: #6b7280;
  --akd-n-600: #4b5563;
  --akd-n-700: #374151;
  --akd-n-800: #1f2937;
  --akd-n-900: #111827;

  /* Roles that flip in dark mode */
  --akd-bg: var(--akd-n-100);
  --akd-surface: var(--akd-n-0);
  --akd-surface-2: var(--akd-n-50);
  --akd-hover: var(--akd-n-100);
  --akd-line: var(--akd-n-200);
  --akd-line-strong: var(--akd-n-300);
  --akd-text: var(--akd-n-800);
  --akd-text-2: var(--akd-n-600);
  --akd-muted: var(--akd-n-500);

  /* AK orange.
     --akd-brand is the exact brand colour: logo, stripe, borders, focus.
     White on it is only 3.66:1, so anything holding white text uses
     --akd-accent (same hue, 4.88:1, passes AA). */
  --akd-brand: #e8542f;
  --akd-accent: #c9431e;
  --akd-accent-hover: #a83315;
  --akd-accent-text: #b83a19;
  --akd-accent-tint: #fdeee9;
  --akd-accent-tint-2: #fbdcd2;
  --akd-accent-line: #f5bcab;
  --akd-ring: rgba(232, 84, 47, .25);

  /* Status only */
  --akd-success: #15803d;
  --akd-success-tint: #dcfce7;
  --akd-warning: #b45309;
  --akd-warning-tint: #fef3c7;
  --akd-danger: #c81e1e;
  --akd-danger-hover: #a51616;
  --akd-danger-tint: #fee2e2;

  --akd-shadow: 0 1px 2px rgba(17, 24, 39, .06);
  --akd-row: 42px;
  --akd-gutter: 24px;
  --akd-btn-text: var(--akd-n-700);
}

/* :root.dark is more specific than the block above and than page .dark rules.
   Surfaces match the #111827/#1f2937/#374151 the pages already use in dark. */
:root.dark {
  --akd-bg: var(--akd-n-900);
  --akd-surface: var(--akd-n-800);
  --akd-surface-2: #263244;
  --akd-hover: var(--akd-n-700);
  --akd-line: var(--akd-n-700);
  --akd-line-strong: var(--akd-n-600);
  --akd-text: #f3f4f6;
  --akd-text-2: #d1d5db;
  --akd-muted: var(--akd-n-400);
  --akd-accent-text: #f4896b;
  --akd-accent-tint: rgba(232, 84, 47, .16);
  --akd-accent-tint-2: rgba(232, 84, 47, .26);
  --akd-accent-line: rgba(232, 84, 47, .45);
  --akd-ring: rgba(232, 84, 47, .35);
  --akd-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --akd-btn-text: var(--akd-text);
}

/* --------------------------------------------------------------------------
   2. Page variables re-pointed at tokens
   This is what fixes sales.html and consignment.html (--primary was #714B67,
   tickets 193 and 169), accounting-reports (#7c3aed), sms, social, treasury.
   Screen only: printed pages keep their own values.
   -------------------------------------------------------------------------- */
@media screen {
:root {
  --primary: var(--akd-accent);
  --primary-dark: var(--akd-accent-hover);
  --primary-light: var(--akd-accent-tint);
  --primary-bg: var(--akd-accent-tint);
  --op: var(--akd-accent);
  --opd: var(--akd-accent-hover);
  --opl: var(--akd-accent-tint);
  --orange: var(--akd-accent);
  --ak: var(--akd-accent);
  --ak-d: var(--akd-accent-hover);
  --sms-primary: var(--akd-accent);
  --sm-primary: var(--akd-accent);
  --chatter-primary: var(--akd-accent);
  --success: var(--akd-success);
  --danger: var(--akd-danger);
  --warning: var(--akd-warning);
}
/* Tokens of /static/css/akerp-design.css (inventory, product-detail).
   Doubled :root so these win whichever file loads last. */
:root:root {
  --ak-brand: var(--akd-accent);
  --ak-brand-hover: var(--akd-accent-hover);
  --ak-brand-bg: var(--akd-accent-tint);
  --ak-brand-text: var(--akd-accent-text);
  --ak-brand-border: var(--akd-accent-line);
  --ak-r-sm: var(--akd-r-md);
  --ak-r-md: var(--akd-r-md);
  --ak-r-lg: var(--akd-r-lg);
  --ak-r-xl: var(--akd-r-lg);
}
:root.dark {
  /* In dark, --primary is mostly used as text on a dark surface */
  --primary: var(--akd-accent-text);
  --orange: var(--akd-accent-text);
}
/* Neutrals: light mode only, because .dark{--bg:...} in settings.html has the
   same specificity as :root and would otherwise lose. */
:root:not(.dark) {
  --bg: var(--akd-bg);
  --border: var(--akd-line);
  --border-light: var(--akd-line);
  --bd: var(--akd-line);
  --text: var(--akd-text);
  --tx: var(--akd-text);
  --text-muted: var(--akd-muted);
  --tm: var(--akd-muted);
  --muted: var(--akd-muted);
}
} /* end @media screen */

@media screen {

/* --------------------------------------------------------------------------
   3. Font
   Most pages set * {font-family:Inter}, so body alone is not enough.
   This selector beats * and body but loses to a class, so Font Awesome,
   Tabler icons and .font-mono keep their own font.
   -------------------------------------------------------------------------- */
html body,
html body *:not(code, pre, kbd, samp) { font-family: var(--akd-font); }
/* !important: akerp-design.css forces Inter on body */
html body { font-family: var(--akd-font) !important; }
html body { -webkit-font-smoothing: antialiased; }

/* Neutral page background. Light only: pages without dark rules stay readable.
   This also removes the pastel purple gradient behind apps.html. */
:root:not(.dark) body { background: var(--akd-bg); color: var(--akd-text); }

/* Rainbow strip removed (phase 3). !important beats its inline style. */
#ak-topbar { display: none !important; }

:root { accent-color: var(--akd-accent); }
:root button:focus-visible,
:root a:focus-visible,
:root [role="button"]:focus-visible { outline: 2px solid var(--akd-brand); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Corners (3 sizes). rounded-full stays.
   -------------------------------------------------------------------------- */
:root .rounded-sm, :root .rounded { border-radius: var(--akd-r-sm); }
:root .rounded-md, :root .rounded-lg { border-radius: var(--akd-r-md); }
:root .rounded-xl, :root .rounded-2xl, :root .rounded-3xl { border-radius: var(--akd-r-lg); }
:root .rounded-t-xl, :root .rounded-t-2xl { border-top-left-radius: var(--akd-r-lg); border-top-right-radius: var(--akd-r-lg); }
:root .rounded-b-xl, :root .rounded-b-2xl { border-bottom-left-radius: var(--akd-r-lg); border-bottom-right-radius: var(--akd-r-lg); }

:root .card, :root .panel, :root .stat-card, :root .app-card,
:root .modal-box, :root .modal-content { border-radius: var(--akd-r-lg); }
:root .stat-icon, :root .dot-menu, :root .o-menu-dropdown { border-radius: var(--akd-r-md); }

:root .btn, :root .btn-primary, :root .btn-p, :root .btn-outline, :root .btn-secondary,
:root .btn-danger-sm, :root .o-btn, :root .header-btn, :root .tbtn,
:root .form-input, :root .form-control, :root .field-input, :root .field-select,
:root .s-input, :root .s-select, :root .o-form-input, :root .modal-input { border-radius: var(--akd-r-md); }

/* --------------------------------------------------------------------------
   5. Accent: Tailwind orange (#f97316 family) to AK orange, everywhere.
   Orange tints stay orange, so a status drawn with them keeps its meaning.
   -------------------------------------------------------------------------- */
:root .bg-orange-400, :root .bg-orange-500, :root .bg-orange-600 { background-color: var(--akd-accent); }
:root .bg-orange-700 { background-color: var(--akd-accent-hover); }
:root .bg-orange-50 { background-color: var(--akd-accent-tint); }
:root .bg-orange-100 { background-color: var(--akd-accent-tint-2); }
:root .text-orange-500, :root .text-orange-600, :root .text-orange-700, :root .text-orange-800 { color: var(--akd-accent-text); }
:root .border-orange-400, :root .border-orange-500, :root .border-orange-600 { border-color: var(--akd-brand); }
:root .border-orange-200, :root .border-orange-300 { border-color: var(--akd-accent-line); }
:root .hover\:bg-orange-500:hover, :root .hover\:bg-orange-600:hover, :root .hover\:bg-orange-700:hover { background-color: var(--akd-accent-hover); }
:root .hover\:bg-orange-50:hover { background-color: var(--akd-accent-tint); }
:root .hover\:bg-orange-100:hover { background-color: var(--akd-accent-tint-2); }
:root .hover\:text-orange-500:hover, :root .hover\:text-orange-600:hover, :root .hover\:text-orange-700:hover { color: var(--akd-accent-text); }
:root .hover\:border-orange-300:hover, :root .hover\:border-orange-400:hover, :root .hover\:border-orange-500:hover { border-color: var(--akd-accent-line); }

/* --------------------------------------------------------------------------
   6. Buttons
   Scoped to button, a and input: bg-blue-500 on a span or div is an avatar,
   a grade badge or a status, and keeps its colour.
   -------------------------------------------------------------------------- */

/* Primary: AK orange, white text */
:root .btn-primary, :root .btn-p, :root .o-btn-primary, :root .btn-orange,
:root .btn-blue, :root .btn-green, :root .btn-success,
:root button.bg-blue-500, :root button.bg-blue-600, :root button.bg-blue-700, :root button.bg-blue-800,
:root a.bg-blue-500, :root a.bg-blue-600, :root a.bg-blue-700,
:root button.bg-indigo-500, :root button.bg-indigo-600, :root button.bg-indigo-700,
:root a.bg-indigo-500, :root a.bg-indigo-600,
:root button.bg-purple-500, :root button.bg-purple-600, :root button.bg-purple-700,
:root a.bg-purple-500, :root a.bg-purple-600,
:root button.bg-violet-500, :root button.bg-violet-600,
:root button.bg-green-500, :root button.bg-green-600, :root button.bg-green-700,
:root a.bg-green-500, :root a.bg-green-600,
:root button.bg-teal-500, :root button.bg-teal-600 {
  background-color: var(--akd-accent);
  border-color: var(--akd-accent);
  color: #fff;
}
:root .btn-primary:hover, :root .btn-p:hover, :root .o-btn-primary:hover, :root .btn-orange:hover,
:root .btn-blue:hover, :root .btn-green:hover, :root .btn-success:hover,
:root button.hover\:bg-blue-600:hover, :root button.hover\:bg-blue-700:hover, :root button.hover\:bg-blue-900:hover,
:root a.hover\:bg-blue-600:hover, :root a.hover\:bg-blue-700:hover,
:root button.hover\:bg-indigo-600:hover, :root button.hover\:bg-indigo-700:hover,
:root button.hover\:bg-purple-600:hover, :root button.hover\:bg-purple-700:hover,
:root a.hover\:bg-purple-600:hover, :root a.hover\:bg-purple-700:hover,
:root button.hover\:bg-green-600:hover, :root button.hover\:bg-green-700:hover,
:root a.hover\:bg-green-600:hover, :root a.hover\:bg-green-700:hover,
:root button.hover\:bg-teal-700:hover,
:root button[class*="bg-gradient"]:hover {
  background-color: var(--akd-accent-hover);
}
/* Gradient buttons (molopay, pos, purchases) become flat */
:root button.bg-gradient-to-r, :root button.bg-gradient-to-br, :root a.bg-gradient-to-r {
  background-image: none;
  background-color: var(--akd-accent);
  color: #fff;
}

/* Inline orange buttons with white text fail AA. !important beats the inline style. */
:root button[style*="background:#f97316"], :root button[style*="background:#e85d04"],
:root button[style*="background:#ea580c"], :root button[style*="background:#e8542f"] {
  background: var(--akd-accent) !important;
}

/* Secondary: neutral */
:root .btn-outline, :root .btn-secondary, :root .o-btn-secondary, :root .tbtn {
  background-color: var(--akd-surface);
  color: var(--akd-n-700);
  border: 1px solid var(--akd-line-strong);
}
:root.dark .btn-outline, :root.dark .btn-secondary, :root.dark .o-btn-secondary, :root.dark .tbtn { color: var(--akd-text); }
:root .btn-outline:hover, :root .btn-secondary:hover, :root .o-btn-secondary:hover, :root .tbtn:hover {
  background-color: var(--akd-hover);
  border-color: var(--akd-n-400);
  color: var(--akd-text);
}
/* Blue, purple and indigo tinted buttons are secondary actions, not statuses */
:root button.bg-blue-50, :root button.bg-blue-100, :root button.bg-indigo-50, :root button.bg-indigo-100,
:root button.bg-purple-50, :root button.bg-purple-100 {
  background-color: var(--akd-hover);
  color: var(--akd-n-700);
}
:root button.hover\:bg-blue-100:hover, :root button.hover\:bg-blue-200:hover, :root button.hover\:bg-blue-50:hover,
:root a.hover\:bg-blue-100:hover,
:root button.hover\:bg-purple-100:hover, :root button.hover\:bg-purple-200:hover, :root button.hover\:bg-purple-50:hover {
  background-color: var(--akd-accent-tint);
}

/* Destructive: red. White on Tailwind red-500 is 3.76:1, this token passes AA. */
:root .btn-danger, :root .btn-red, :root .o-btn-danger,
:root button.bg-red-500, :root button.bg-red-600, :root button.bg-red-700 {
  background-color: var(--akd-danger);
  border-color: var(--akd-danger);
  color: #fff;
}
:root .btn-danger:hover, :root .btn-red:hover, :root .o-btn-danger:hover,
:root button.hover\:bg-red-600:hover, :root button.hover\:bg-red-700:hover { background-color: var(--akd-danger-hover); }
:root .btn-danger-sm { color: var(--akd-danger); }

/* Page rule ".dark button:not(...)" recolours text with !important and a long
   selector. :not(#\#) adds id weight so filled buttons keep white text. */
:root.dark .btn-primary:not(#\#), :root.dark .btn-p:not(#\#), :root.dark .o-btn-primary:not(#\#),
:root.dark .btn-orange:not(#\#), :root.dark .btn-blue:not(#\#), :root.dark .btn-green:not(#\#),
:root.dark .btn-success:not(#\#), :root.dark .btn-danger:not(#\#), :root.dark .btn-red:not(#\#) { color: #fff !important; }

/* Links, tabs and focus that used Bootstrap or Tailwind blue */
:root button.text-blue-500, :root button.text-blue-600, :root button.text-blue-700,
:root a.text-blue-500, :root a.text-blue-600, :root a.text-blue-700, :root a.text-blue-800,
:root button.text-purple-600, :root a.text-purple-600, :root button.text-indigo-600, :root a.text-indigo-600,
:root .tab-active, :root .tab-btn.active { color: var(--akd-accent-text); }
:root .tab-active, :root .tab-btn.active { border-bottom-color: var(--akd-brand); }
:root button.border-blue-500, :root button.border-blue-600, :root button.border-purple-600,
:root .border-b-2.border-blue-500, :root .border-b-2.border-purple-600 { border-color: var(--akd-brand); }
:root .border-blue-200 { border-color: var(--akd-accent-line); }
:root a.hover\:text-blue-600:hover, :root a.hover\:text-blue-700:hover, :root button.hover\:text-blue-600:hover { color: var(--akd-accent-text); }
:root .stat-card.active { border-color: var(--akd-brand); }

/* Top navigation (ak-header.js injects these after this file) */
:root .akh-top { background: var(--akd-brand); }
:root .akh-link.active, :root .akh-di.active, :root .nav-item.active {
  background: var(--akd-accent-tint);
  color: var(--akd-accent-text);
}
:root .akh-sr input:focus { border-color: var(--akd-brand); box-shadow: 0 0 0 3px var(--akd-ring); }

/* --------------------------------------------------------------------------
   7. Page headers
   -------------------------------------------------------------------------- */
/* Pale or translucent text on the band falls under AA; plain white passes */
:root .text-orange-100, :root .ak-header-sub { color: #fff; }
:root .tkt112-sub { opacity: 1; }
:root .tkt112-stat:hover, :root .tkt112-stat.active { border-color: var(--akd-brand); }
:root .tkt112-stat.active { box-shadow: 0 0 0 2px var(--akd-ring); }
:root .tkt138-chip.active { background: var(--akd-accent); border-color: var(--akd-accent); color: #fff; }
:root .tkt138-chip:hover:not(.active) { border-color: var(--akd-brand); color: var(--akd-accent-text); }

/* Tailwind gradient bands that hold white text become flat orange:
   page headers and modal headers (blue, teal, purple, pink on purchases, pos). */
:root .bg-gradient-to-r.text-white,
:root header.bg-gradient-to-r,
:root .bg-gradient-to-r[class*="from-orange-"],
:root .bg-gradient-to-br[class*="from-orange-"] {
  background-image: none;
  background-color: var(--akd-accent);
}
/* Coloured KPI tiles (dashboard, inventory) become one dark neutral, so orange
   is the only accent. Their pale text stays readable. */
:root .bg-gradient-to-br.text-white:not([class*="from-orange-"]) {
  background-image: none;
  background-color: var(--akd-n-700);
}


/* Floating chat button (chat-widget.js injects with id selectors) */
:root #ak-chat-btn, :root #ak-chat-mini, :root .ak-popup-header, :root .ak-avatar {
  background: var(--akd-accent);
}
:root #ak-chat-hide { background: var(--akd-danger); }
:root #ak-chat-mini:hover { background: var(--akd-accent-hover); }
:root .ak-message-repair { color: var(--akd-accent-text); }
:root .ak-popup-footer a { background: var(--akd-accent); }
:root .ak-popup-footer a:hover { background: var(--akd-accent-hover); }

/* --------------------------------------------------------------------------
   8. Forms. Colour and focus only: mobile.css owns input sizes on phones.
   -------------------------------------------------------------------------- */
:root input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [style*="border:none"], [style*="border: none"]):focus,
:root select:focus,
:root textarea:focus {
  outline: none;
  border-color: var(--akd-brand);
  box-shadow: 0 0 0 3px var(--akd-ring);
}
:root .focus\:ring-blue-500:focus, :root .focus\:ring-orange-400:focus, :root .focus\:ring-orange-500:focus,
:root .focus\:ring-orange-300:focus, :root .focus\:ring-indigo-500:focus, :root .focus\:ring-purple-500:focus {
  --tw-ring-color: var(--akd-ring);
}
:root .focus\:border-orange-500:focus, :root .focus\:border-blue-500:focus { border-color: var(--akd-brand); }

/* --------------------------------------------------------------------------
   9. Cards and modals
   Colours are only set for light mode: pages own their dark surfaces.
   -------------------------------------------------------------------------- */
:root:not(.dark) .card, :root:not(.dark) .panel { border-color: var(--akd-line); }
:root .card-shadow, :root .glass { box-shadow: var(--akd-shadow); }
:root .stat-card { box-shadow: var(--akd-shadow); }
:root:not(.dark) .modal-header, :root:not(.dark) .modal-footer { border-color: var(--akd-line); }

/* --------------------------------------------------------------------------
   10. Tables. Only list tables, so layout tables and previews are left alone.
   -------------------------------------------------------------------------- */
:root:not(.dark) .tbl thead th, :root:not(.dark) .o-list-table thead th, :root:not(.dark) .rtable thead th,
:root:not(.dark) table.w-full thead th, :root:not(.dark) table.min-w-full thead th {
  background-color: var(--akd-n-50);
  color: var(--akd-n-600);
  border-bottom-color: var(--akd-line);
}
:root:not(.dark) .tbl tbody tr:hover, :root:not(.dark) .o-list-table tbody tr:hover,
:root:not(.dark) .rtable tbody tr:hover, :root:not(.dark) table.w-full tbody tr:hover { background-color: var(--akd-n-50); }

/* --------------------------------------------------------------------------
   11. Sizes, desktop only. Phones keep ak-mobile.css, mobile.css and @media.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
  html body { font-size: var(--akd-fs-base); }

  :root .text-xs { font-size: var(--akd-fs-sm); line-height: 16px; }
  :root .text-sm { font-size: var(--akd-fs-md); line-height: 20px; }
  :root .text-base { font-size: var(--akd-fs-base); line-height: 22px; }
  :root .text-lg { font-size: var(--akd-fs-lg); line-height: 24px; }
  :root .text-xl { font-size: var(--akd-fs-xl); line-height: 28px; }
  :root .text-2xl { font-size: var(--akd-fs-2xl); line-height: 32px; }
  :root .text-3xl { font-size: var(--akd-fs-3xl); line-height: 36px; }

  :root .btn-primary, :root .btn-p, :root .o-btn, :root .btn-outline, :root .btn-secondary,
  :root .header-btn, :root .tbtn { font-size: var(--akd-fs-md); font-weight: 600; }

  :root .tbl thead th, :root .o-list-table thead th, :root .rtable thead th,
  :root table.w-full thead th, :root table.min-w-full thead th {
    font-size: var(--akd-fs-xs);  /* small uppercase, as on repair-list and sav-list */
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  /* Lucide swaps <i> for <svg>, so page rules on ".tbtn i" never applied */
  :root .tbtn svg { width: 15px; height: 15px; }

  :root .tbl tbody td, :root .o-list-table tbody td, :root .rtable tbody td,
  :root table.w-full tbody td, :root table.min-w-full tbody td {
    height: var(--akd-row);
    vertical-align: middle;
  }
}

/* --------------------------------------------------------------------------
   12. Page shell (phase 3): one bar, one header row, one tab row.
   ak-shell.js tags the existing elements with .akp-*. Colours apply at every
   width, sizes only from 769px. !important is needed here: most bars carry
   inline styles or a later page <style>.
   -------------------------------------------------------------------------- */

/* Header row: colours, all widths */
:root .akp-head {
  background: var(--akd-surface) !important;
  background-image: none !important;
  color: var(--akd-text) !important;
  border-bottom: 1px solid var(--akd-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
:root .akp-title, :root .akp-head h1 { color: var(--akd-text) !important; }
:root .akp-sub { color: var(--akd-muted) !important; opacity: 1 !important; }

:root .akp-head .akp-btn {
  background: var(--akd-surface) !important;
  background-image: none !important;
  color: var(--akd-btn-text) !important;
  border: 1px solid var(--akd-line-strong) !important;
  box-shadow: none !important;
  opacity: 1;
  transform: none !important;
}
:root .akp-head .akp-btn svg, :root .akp-head .akp-btn i { color: inherit !important; }
:root .akp-head .akp-btn:hover { background: var(--akd-hover) !important; color: var(--akd-text) !important; }
:root .akp-head .akp-btn.akp-pri, :root .akp-head .akp-pri {
  background: var(--akd-accent) !important;
  border-color: var(--akd-accent) !important;
  color: #fff !important;
}
:root .akp-head .akp-btn.akp-pri:hover, :root .akp-head .akp-pri:hover { background: var(--akd-accent-hover) !important; color: #fff !important; }
:root.dark .akp-head .akp-btn.akp-pri:not(#\#) { color: #fff !important; }

/* Tabs: colours, all widths */
:root .akp-tabs { background: var(--akd-surface) !important; background-image: none !important; box-shadow: none !important; }
:root .akp-tl > * { color: var(--akd-muted) !important; background: transparent !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
:root .akp-tl > *:hover { color: var(--akd-text) !important; }
:root .akp-tl > :is(.active, .tab-active, .on, .act, .border-orange-500, [aria-selected="true"], [style*="background:#fff"]),
:root .akp-tl > :has(> .active) { color: var(--akd-accent-text) !important; }

/* Wrapper tabs (dropdown label inside the tab): colours, all widths */
:root .akp-tl > div > :is(button, span, .nav-item, .ph-nav-item):first-child { background: transparent !important; color: inherit !important; }
/* Strips and brand bars that phones still show */
.ph-bar-top, .header-gradient { display: none !important; }
:root .top-nav, :root[data-akp="accounting-reports"] .topbar {
  background: var(--akd-surface) !important;
  background-image: none !important;
  color: var(--akd-text) !important;
  border-bottom: 1px solid var(--akd-line);
  box-shadow: none;
}
:root .top-nav :is(a, span), :root[data-akp="accounting-reports"] .topbar span { color: var(--akd-text-2) !important; opacity: 1 !important; }

@media (min-width: 769px) {

  /* Global bar */
  :root #ak-minibar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
    padding: 0 var(--akd-gutter) !important;
    flex-wrap: nowrap;
    background: var(--akd-surface) !important;
    border-bottom: 1px solid var(--akd-line) !important;
  }
  :root #ak-minibar > div:first-child { display: flex; align-items: center; gap: 10px !important; min-width: 0; flex: 0 1 auto; }
  :root #ak-minibar > div:first-child > :first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--akd-r-md) !important;
    background: var(--akd-brand) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700;
    text-decoration: none;
  }
  :root #ak-minibar > div:first-child > div:nth-child(2) > div:first-child { font-size: 14px !important; font-weight: 600 !important; color: var(--akd-text) !important; white-space: nowrap; }
  :root #ak-minibar > div:first-child > div:nth-child(2) > div:nth-child(2) { display: none; }
  :root #ak-minibar > div:first-child > div:nth-child(3) {
    display: block;
    padding-left: 10px !important;
    margin-left: 0 !important;
    border-left: 1px solid var(--akd-line) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--akd-text-2) !important;
    white-space: nowrap;
  }
  :root #ak-minibar > div:first-child > div:nth-child(3) i { display: none; }
  :root #ak-minibar .akb-right { display: flex; align-items: center; gap: 8px !important; flex: 0 0 auto; }
  :root #ak-minibar .akb-right input {
    box-sizing: border-box;
    width: 220px !important;
    height: 32px;
    font-size: 13px !important;
    background-color: var(--akd-surface-2) !important;
    border: 1px solid var(--akd-line) !important;
    border-radius: var(--akd-r-md) !important;
    color: var(--akd-text) !important;
  }
  :root .akb-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--akd-r-md);
    color: var(--akd-muted);
    cursor: pointer;
  }
  :root .akb-bell:hover { background: var(--akd-hover); color: var(--akd-text); }
  :root .akb-bell #akhBadge {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--akd-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
  }
  /* The chip and the second bell were fixed over the page. In the bar they flow. */
  :root #ak-minibar #akProfileChip { position: relative; top: auto; right: auto; }
  :root #ak-minibar #akProfileChip .ak48btn {
    height: 32px;
    box-sizing: border-box;
    padding: 2px 8px 2px 2px;
    background: transparent;
    border: 0;
    border-radius: var(--akd-r-md);
    box-shadow: none;
  }
  :root #ak-minibar #akProfileChip .ak48btn:hover { background: var(--akd-hover); }
  :root #ak-minibar #akProfileChip .ak48av { width: 28px; height: 28px; }
  :root #ak-minibar #akProfileChip .ak48name { color: var(--akd-text); font-weight: 500; }
  :root #ak-minibar #aknb-wrap { position: relative; top: auto; right: auto; }
  :root #ak-minibar #aknb-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: var(--akd-r-md);
    box-shadow: none;
    font-size: 0;
    color: var(--akd-muted);
  }
  :root #ak-minibar #aknb-btn::before { content: "@"; font-size: 16px; font-weight: 600; }
  :root #ak-minibar #aknb-btn:hover { background: var(--akd-hover); color: var(--akd-text); }
  :root #ak-minibar #aknb-badge { font-size: 10px; }

  /* Tagged elements the bar replaces */
  :root:root .akp-hide.akp-hide { display: none !important; }
  :root .akp-hide + * { margin-left: 0 !important; }

  /* Header row */
  :root .akp-head {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 12px;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 56px;
    margin: 0 !important;
    padding: 6px var(--akd-gutter) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }
  /* Tailwind wrappers inside a header follow the row and its gutter */
  :root .akp-head > :is(.max-w-7xl, .max-w-6xl, .max-w-full, div[style*="max-width"]) {
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  :root .akp-head > :only-child { width: 100%; padding: 0 !important; height: auto !important; }
  :root .akp-wrap { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px !important; width: 100%; height: auto !important; padding: 0 !important; }
  :root .akp-title, :root .akp-head h1 {
    margin: 0;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    white-space: nowrap;
  }
  :root .akp-sub {
    margin: 0;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :root .akp-head .akp-btn, :root .akp-head .akp-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    padding: 0 12px !important;
    margin: 0;
    border-radius: var(--akd-r-md) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
  }
  :root .akp-head > div:last-child:not(:first-child),
  :root .akp-head > :is(.max-w-7xl, .max-w-6xl) > .flex > div:last-child { gap: 8px !important; }

  /* Tab row, standalone or inside the header */
  :root .akp-tabs, :root .akp-ti {
    display: flex !important;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0 !important;
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    max-width: none;
    margin: 0 !important;
    background: transparent;
    border-radius: 0 !important;
  }
  :root .akp-tabs {
    width: auto;
    padding: 0 var(--akd-gutter) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--akd-line) !important;
  }
  :root .akp-ti {
    order: 9;
    flex: 0 0 calc(100% + 2 * var(--akd-gutter));
    width: calc(100% + 2 * var(--akd-gutter));
    margin: 6px calc(-1 * var(--akd-gutter)) -6px !important;
    padding: 0 var(--akd-gutter) !important;
    border: 0 !important;
    border-top: 1px solid var(--akd-line) !important;
  }
  :root .akp-tabs > .akp-tl, :root .akp-tabs > div > .akp-tl {
    display: flex !important;
    align-items: stretch;
    gap: 0 !important;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  :root .akp-tl > * {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 40px;
    min-height: 0;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: none;
    flex: 0 0 auto;
  }
  :root .akp-tl > *:first-child { margin-left: -12px !important; }
  :root .akp-tl > :is(.active, .tab-active, .on, .act, .border-orange-500, [aria-selected="true"], [style*="background:#fff"]),
  :root .akp-tl > :has(> .active) {
    font-weight: 600 !important;
    border-bottom-color: var(--akd-brand) !important;
  }

  /* Wrapper tabs: the wrapper is the tab, the control inside is its label */
  :root .akp-tl > div > :is(button, span, .nav-item, .ph-nav-item):first-child {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    color: inherit !important;
    font: inherit;
  }

  :root .akp-head:has(+ .akp-tabs) { border-bottom: 0 !important; }

  /* ---- Page gutter: the header row sets it, the content follows ---- */
  :root body > :is(.max-w-7xl, .max-w-6xl) { max-width: none; padding-left: var(--akd-gutter); padding-right: var(--akd-gutter); }
  :root body > :is(.content, .ct, .cnt, .page, .dash, .stats-bar, .o-cp, .abar, .action-bar, .wrap, main, .main, #PV > .cp),
  :root #PV > .cp {
    max-width: none;
    padding-left: var(--akd-gutter) !important;
    padding-right: var(--akd-gutter) !important;
  }
  :root body > .wrap, :root body > .page { margin-left: 0; margin-right: 0; }
  :root body > .abar, :root body > .action-bar, :root #PV > .cp { min-height: 56px; box-sizing: border-box; padding-top: 6px !important; padding-bottom: 6px !important; }
  :root body > div.bg-white.border-b > .max-w-7xl { max-width: none; padding-left: var(--akd-gutter); padding-right: var(--akd-gutter); }
  :root .tkt112-stats, :root .tkt112-toolbar, :root .tkt112-list { margin-left: var(--akd-gutter) !important; margin-right: var(--akd-gutter) !important; }
  :root .qc-stats-row { padding-left: var(--akd-gutter) !important; padding-right: var(--akd-gutter) !important; margin: 0 !important; }
  :root[data-akp="treasury"] :is(.stats, .layout) { padding-left: var(--akd-gutter); padding-right: var(--akd-gutter); }
  :root[data-akp="payroll-structures"] body > div[style*="max-width:1200px"] { max-width: none !important; padding: 16px var(--akd-gutter) !important; }

  /* A chrome shrink must not leave content sized for the old bars */
  :root[data-akp="ai-assistant"] [style*="100vh"] { height: calc(100vh - 140px) !important; }
  :root[data-akp="repair-intake"] .main-grid { height: calc(100vh - 108px); }
  :root[data-akp="repair-intake"] .o-chatter { height: calc(100vh - 108px); }
  :root[data-akp="payroll"] .dash { height: calc(100vh - 92px); }
  :root[data-akp="chat"] .flex[style*="100vh"] { height: calc(100vh - 108px) !important; }

  /* Second action in a toolbar stays neutral */
  :root .action-bar .btn-warning { background: var(--akd-surface); color: var(--akd-btn-text); border: 1px solid var(--akd-line-strong); }


  /* ---- Cards ---- */
  :root .card, :root .panel, :root .stat-card { box-shadow: var(--akd-shadow); }
  :root .bg-white.shadow, :root .bg-white.shadow-sm, :root .bg-white.shadow-md { box-shadow: var(--akd-shadow); }

  /* ---- Tables ---- */
  :root :is(.tbl, .o-list-table, .rtable, .data-table, .o-table, .user-table, table.w-full, table.min-w-full) thead th {
    font-size: var(--akd-fs-xs);
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: nowrap;
  }
  :root :is(.tbl, .o-list-table, .rtable, .data-table, .o-table, .user-table, table.w-full, table.min-w-full) tbody td {
    height: var(--akd-row);
    box-sizing: border-box;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--akd-fs-md);
    vertical-align: middle;
  }
}

/* ---- Page-specific: only what the shared rules cannot reach ---- */
@media (min-width: 769px) {
  /* accounting: the Apps link closes the tab row */
  :root .top-bar.akp-tl > .ra { margin-left: auto !important; }
  :root .top-bar.akp-tl > :nth-child(2) { margin-left: -12px !important; }
  :root .sub-bar .bc { font-size: 18px; font-weight: 600; color: var(--akd-text); }
  :root .sub-bar .bc span { font-size: 13px; font-weight: 400; color: var(--akd-muted); }

  /* delivery, settings: the title leads, it does not float in the middle */
  :root .topnav.akp-head { justify-content: flex-start; }
  :root .topnav.akp-head > div:not(.akp-ti):not(#akBell) { flex: 0 1 auto; text-align: left; margin-right: auto; }
  :root .topnav-back.akp-btn { width: 32px; padding: 0 !important; margin-right: 12px; }
  :root .topnav.akp-head .akp-pri { margin-left: auto; }

  /* reports: period choice was white on the band */
  :root .topbar.akp-head .topbar-left { display: flex; align-items: center; gap: 12px; }
  :root .topbar.akp-head .period-tabs { display: inline-flex; gap: 0; margin-left: auto; margin-right: 8px; background: var(--akd-hover); border-radius: var(--akd-r-md); padding: 2px; }
  :root .topbar.akp-head .period-tab { height: 28px; padding: 0 12px; background: transparent; border: 0; border-radius: var(--akd-r-sm); color: var(--akd-text-2); font-size: 13px; font-weight: 500; }
  :root .topbar.akp-head .period-tab.active { background: var(--akd-surface); color: var(--akd-accent-text); box-shadow: var(--akd-shadow); }

  /* tasks: the header sits in the page container, so it bleeds out of it */
  :root[data-akp="tasks"] .akp-head { margin: -16px calc(-1 * var(--akd-gutter)) 16px !important; }
  :root[data-akp="tasks"] :is(#viewListBtn, #viewKanbanBtn).bg-orange-500 { background: var(--akd-hover); color: var(--akd-text); }

  /* repair-detail: its bar lives inside .wrap */
  :root[data-akp="repair-detail"] .wrap { padding-left: var(--akd-gutter) !important; padding-right: var(--akd-gutter) !important; }
  :root[data-akp="repair-detail"] .header-bar {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 56px;
    margin: -18px calc(-1 * var(--akd-gutter)) 16px;
    padding: 8px var(--akd-gutter);
    background: var(--akd-surface);
    backdrop-filter: none;
  }
  :root[data-akp="repair-detail"] .header-bar-inner { width: 100%; max-width: none; gap: 8px; }
  :root[data-akp="repair-detail"] .header-bar .btn { height: 32px; padding: 0 12px; font-size: 13px; }
  :root[data-akp="repair-detail"] .crumb { font-size: 13px; }
  :root[data-akp="repair-detail"] #hbCode { font-size: 18px; color: var(--akd-text) !important; }

  /* Repair lists carry two lines per row: tighter than the 40-44px of one-line tables */
  :root:is([data-akp="repair-list"], [data-akp="qc-control"], [data-akp="sav-list"]) table tbody td {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: var(--akd-fs-md);
    line-height: 16px;
  }
  :root:is([data-akp="repair-list"], [data-akp="qc-control"], [data-akp="sav-list"]) table tbody td > * { line-height: 16px; margin-top: 0; margin-bottom: 0; }
  :root[data-akp="stock-dashboard"] table tbody td { height: var(--akd-row); padding-top: 6px; padding-bottom: 6px; font-size: var(--akd-fs-md); }

  /* inventory, product-detail: akerp-design.css styles these with !important */
  :root:root header .akp-ti.akp-ti { padding: 0 var(--akd-gutter) !important; gap: 0 !important; }
  :root:root header .akp-tl > .tab-btn.tab-btn {
    padding: 0 12px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--akd-muted) !important;
    font-weight: 500 !important;
  }
  :root:root header .akp-tl > .tab-btn.tab-btn:hover { color: var(--akd-text) !important; }
  :root:root header .akp-tl > .tab-btn.tab-active {
    border-bottom-color: var(--akd-brand) !important;
    color: var(--akd-accent-text) !important;
    font-weight: 600 !important;
  }
  :root:root header[class*="from-orange-500"] a.akp-btn.akp-btn {
    padding: 0 12px !important;
    background: var(--akd-surface) !important;
    border: 1px solid var(--akd-line-strong) !important;
    border-radius: var(--akd-r-md) !important;
    color: var(--akd-btn-text) !important;
    box-shadow: none !important;
  }
  :root:root header .akp-title.akp-title { font-size: 18px !important; line-height: 24px !important; }

  /* callcenter, consignment: the module tabs sit in the header */
  :root .akp-ti > :is(.ak-tab, .header-btn):last-child:not(.active) { margin-left: auto !important; }

  /* payroll: the dropdown wrapper is the tab, its first child the label */
  :root .ph-nav { padding: 0 var(--akd-gutter) !important; min-height: 40px; }
  :root .ph-nav .ph-nav-left { overflow: visible; }
  :root .ph-dropdown > .ph-nav-item { padding: 0 !important; background: transparent !important; color: inherit !important; font-size: 13px; }
  :root .ph-nav-item:hover { background: transparent; }

  /* crm: same pattern */
  :root .navbar.akp-tabs { background: var(--akd-surface) !important; }
  :root .navbar.akp-tabs .nav-item { color: inherit !important; background: transparent !important; padding: 0 !important; }
  :root .navbar.akp-tabs > a { color: var(--akd-accent-text) !important; }

  /* sales: submenu items hold their own dropdown */
  :root .tkt112-hero-row1 { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  :root .tkt112-title { gap: 0; }
  :root .tkt112-actions { gap: 8px; }
  :root .tkt112-hero .tkt112-hero-tabs { padding-top: 0; }
}

/* Empty states: a quiet readable message, never a faint or oversized one */
:root :is(.empty, .empty-state, .o-empty, .panel-empty) { color: var(--akd-muted); }
:root :is(.empty, .empty-state, .o-empty, .panel-empty) :is(p, h3, h4) { color: inherit; opacity: 1; }
:root :is(.empty, .empty-state, .o-empty, .panel-empty) > svg { max-width: 40px; max-height: 40px; opacity: .6; }
:root :is(.empty, .empty-state, .o-empty, .panel-empty) > i { font-size: 32px; opacity: .6; }
/* payroll-payruns writes #d1d5db inline: under 2:1 on the page background */
:root #view-list > div[style*="#d1d5db"], :root #view-list > div[style*="#d1d5db"] p { color: var(--akd-muted) !important; }
:root .empty-state .btn i { font-size: 13px; margin: 0; }

/* tech-performance: its view switch is a tab row, not a filled pill */
:root[data-akp="tech-performance"] .tab.active { background: transparent; color: var(--akd-accent-text); box-shadow: inset 0 -2px 0 var(--akd-brand); border-radius: 0; }

/* dashboard: KPI tiles are cards like everywhere else. Orange stays an accent. */
:root[data-akp="dashboard"] .bg-gradient-to-br.text-white {
  background: var(--akd-surface);
  background-image: none;
  border: 1px solid var(--akd-line);
  box-shadow: var(--akd-shadow);
  color: var(--akd-text);
}
:root[data-akp="dashboard"] .bg-gradient-to-br.text-white * { color: inherit; }
:root[data-akp="dashboard"] .bg-gradient-to-br.text-white [class*="bg-white"] { background: var(--akd-hover); }

/* login: an empty grey box and two faint circles were all that was left of a demo */
:root[data-akp="login"] body > .absolute.inset-0.opacity-10 { display: none; }
:root[data-akp="login"] .mt-6.bg-gray-50 { display: none; }

/* rbac-admin used its own orange */
:root[data-akp="rbac-admin"] { --brand: var(--akd-accent); }

/* Dark: page rows that hard-code white, and the header akerp-design.css forces white */
:root.dark body > :is(.abar, .action-bar, .o-cp), :root.dark #PV > .cp { background: var(--akd-surface); border-color: var(--akd-line); color: var(--akd-text); }
:root.dark body > :is(.abar, .action-bar) > div > span { color: var(--akd-text) !important; }
:root:root:root header.bg-gradient-to-r.akp-head.akp-head { background: var(--akd-surface) !important; background-image: none !important; border-bottom-color: var(--akd-line) !important; box-shadow: none !important; }
:root:root:root header.akp-head .akp-title.akp-title { color: var(--akd-text) !important; }
:root:root:root header.akp-head .akp-sub.akp-sub { color: var(--akd-muted) !important; }
:root:root:root header.bg-gradient-to-r.akp-head a.akp-btn.akp-btn { background: var(--akd-surface) !important; color: var(--akd-btn-text) !important; }
:root.dark .app-card { background: var(--akd-surface); border-color: var(--akd-line); }

/* Read-only notice on payroll rules and structures gets its own line, all widths */
:root body > .action-bar { flex-wrap: wrap; }
:root body > .action-bar > div[style*="#fff3bf"] { order: 9; flex: 0 0 100%; box-sizing: border-box; margin: 6px 0 0 !important; }

/* Launcher */
:root .app-card { border: 1px solid var(--akd-line); box-shadow: none; transform: none !important; }
:root .app-card:hover { border-color: var(--akd-line-strong); box-shadow: var(--akd-shadow); }
:root .app-card > :first-child[class*="from-"], :root .app-icon[class] { background-image: none; background-color: var(--akd-accent-tint); border-radius: var(--akd-r-md); }
:root .app-card > :first-child :is(i, svg) { color: var(--akd-accent-text); }
/* Category keeps only a small icon tint, so modules stay easy to find */
:root .app-card > :first-child[class*="from-blue"], :root .app-card > :first-child[class*="from-indigo"], :root .app-card > :first-child[class*="from-cyan"], :root .app-card > :first-child[class*="from-sky"] { background-color: rgba(37, 99, 235, .1); }
:root .app-card > :first-child[class*="from-blue"] :is(i, svg), :root .app-card > :first-child[class*="from-indigo"] :is(i, svg), :root .app-card > :first-child[class*="from-cyan"] :is(i, svg), :root .app-card > :first-child[class*="from-sky"] :is(i, svg) { color: #2563eb; }
:root .app-card > :first-child[class*="from-green"], :root .app-card > :first-child[class*="from-emerald"], :root .app-card > :first-child[class*="from-teal"] { background-color: rgba(21, 128, 61, .1); }
:root .app-card > :first-child[class*="from-green"] :is(i, svg), :root .app-card > :first-child[class*="from-emerald"] :is(i, svg), :root .app-card > :first-child[class*="from-teal"] :is(i, svg) { color: #15803d; }
:root .app-card > :first-child[class*="from-purple"], :root .app-card > :first-child[class*="from-violet"], :root .app-card > :first-child[class*="from-pink"], :root .app-card > :first-child[class*="from-rose"] { background-color: rgba(124, 58, 237, .1); }
:root .app-card > :first-child[class*="from-purple"] :is(i, svg), :root .app-card > :first-child[class*="from-violet"] :is(i, svg), :root .app-card > :first-child[class*="from-pink"] :is(i, svg), :root .app-card > :first-child[class*="from-rose"] :is(i, svg) { color: #7c3aed; }
:root.dark .app-card > :first-child[class*="from-blue"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-indigo"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-cyan"] :is(i, svg) { color: #93c5fd; }
:root.dark .app-card > :first-child[class*="from-green"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-emerald"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-teal"] :is(i, svg) { color: #86efac; }
:root.dark .app-card > :first-child[class*="from-purple"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-violet"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-pink"] :is(i, svg), :root.dark .app-card > :first-child[class*="from-rose"] :is(i, svg) { color: #c4b5fd; }

@media (min-width: 769px) {
  :root .header-bar.sticky {
    height: 52px;
    box-sizing: border-box;
    background: var(--akd-surface) !important;
    border-bottom: 1px solid var(--akd-line);
    box-shadow: none;
    backdrop-filter: none;
  }
  :root .header-bar.sticky > .max-w-7xl { max-width: none; height: 100%; padding: 0 var(--akd-gutter); }
  :root .header-bar.sticky .w-10 { width: 28px; height: 28px; border-radius: var(--akd-r-md); background-image: none; background-color: var(--akd-brand); }
  :root .header-bar.sticky .w-10 span { font-size: 12px; }
  :root .header-bar.sticky h1 { font-size: 14px; font-weight: 600; color: var(--akd-text); }
  :root .header-bar.sticky h1 + p { display: none; }
  :root .header-bar.sticky #appSearch { width: 220px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13px; background-color: var(--akd-surface-2); }
  :root .header-bar.sticky .bg-white\/60 { background: transparent; }
  /* apps has its own user menu with logout, so the floating chip is a duplicate */
  :root[data-akp="apps"] #akProfileChip, :root[data-akp="apps-v2"] #akProfileChip { display: none; }

  :root .grid:has(> .app-card) {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
  }
  :root .app-card {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    min-height: 64px;
    padding: 12px !important;
    text-align: left;
    border-radius: var(--akd-r-md);
  }
  :root .app-card.hidden, :root .app-card[style*="display: none"], :root .app-card[style*="display:none"] { display: none !important; }
  :root .app-card > :first-child {
    grid-row: 1 / span 2;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: var(--akd-r-md);
  }
  :root .app-card svg { width: 18px; height: 18px; }
  :root .app-card h3 { align-self: end; font-size: 13px; line-height: 18px; color: var(--akd-text); }
  :root .app-card p { align-self: start; font-size: 12px; line-height: 16px; color: var(--akd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

} /* end @media screen */

/* The bar added by ak-shell.js never reaches paper */
@media print { #ak-minibar.ak-inj { display: none !important; } }