/*
 * DoszCoffee brand skin for the HR system.
 *
 * [CHANGE 2026-07-24] what: light-first shell in the doszcoffee.com.my palette ·
 * why: the first pass recoloured the Nexus dark chrome and read as heavy patches
 * of black beside white content; the website is light-dominant with teal as the
 * accent and dark reserved for deliberate blocks · verify: sidebar and topbar are
 * white with a hairline, the active menu item carries a teal bar on a pale teal
 * ground, and primary buttons are teal pills like the website's "Order now".
 *
 * Loaded AFTER identity.css / backend.css / auth.css. Two layers:
 *   1. token redefinition — every rule in those sheets reads var(--nx-*)
 *   2. explicit overrides for the vendor chrome those tokens do not reach
 * No selector used by JavaScript is touched, and no geometry changes. Removing
 * the single <link> restores the previous identity exactly.
 *
 * Palette from resources/css/app.css on doszcoffee.com.my (24 Jul 2026).
 * Contrast: #00BFB2 is ~2.2:1 on white, so it is never used for text — accent
 * text is #00706A (~5.4:1); the bright teal carries fills, bars and marks.
 */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/instrument-sans-400.woff2') format('woff2'),
       url('fonts/instrument-sans-400.woff') format('woff');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/instrument-sans-500.woff2') format('woff2'),
       url('fonts/instrument-sans-500.woff') format('woff');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/instrument-sans-600.woff2') format('woff2'),
       url('fonts/instrument-sans-600.woff') format('woff');
}

:root {
  /* "navy" is now only used for deliberate dark marks (error codes, dark CTA) */
  --nx-navy:      #0B1B1A;
  --nx-navy-deep: #04302C;
  --nx-navy-line: #DDE6E4;

  --nx-brass:      #00706A;   /* accent TEXT — passes contrast */
  --nx-brass-soft: #00BFB2;   /* accent FILL */
  --nx-steel:      #00A094;

  --nx-ink:       #0B1B1A;
  --nx-slate:     #5A6B69;
  --nx-line:      #DDE6E4;
  --nx-paper:     #F7F9F8;
  --nx-surface:   #FFFFFF;
  --nx-surface-2: #EEF4F3;
  --nx-on-navy:   #E8FAF8;

  --nx-good:    #2C6E52;  --nx-good-bg: #E2EEE8;
  --nx-warn:    #B4632A;  --nx-warn-bg: #FBF1E8;
  --nx-crit:    #A83228;  --nx-crit-bg: #F3E0DD;

  --nx-serif: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nx-sans:  'Instrument Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --nx-radius: 8px;
  --nx-radius-sm: 6px;
  --nx-shadow: 0 1px 2px rgba(11,27,26,.05), 0 8px 28px rgba(11,27,26,.08);

  /* local to this sheet */
  --dz-teal: #00BFB2;
  --dz-teal-ink: #04302C;
  --dz-teal-wash: #E8FAF8;
  --dz-nav-idle: #46524F;
}

/* ============ page ground ============ */
body.default-theme,
body { background: var(--nx-paper) !important; }

/* ============ sidebar: white, not a dark slab ============ */
.sidebar,
.sidebar-header,
.sidebar .sidebar-menu,
.sidebar .sidebar-menu-section {
  background: var(--nx-surface) !important;
}
.sidebar { border-right: 1px solid var(--nx-line) !important; }
.sidebar-header { border-bottom: 1px solid var(--nx-line) !important; }

/* the logo is a colour lockup again — no white-out filter on a white ground */
.sidebar-header img,
.sidebar .sidebar-logo img { filter: none !important; }

.sidebar a,
.sidebar .parent-item-content,
.sidebar .sidebar-menu-item > a,
.sidebar .sidebar-dropdown-menu a {
  color: var(--dz-nav-idle) !important;
  background: transparent !important;
}
.sidebar .parent-item-content i,
.sidebar .sidebar-menu-item > a i { color: var(--nx-slate) !important; }

.sidebar .parent-item-content:hover,
.sidebar .sidebar-menu-item > a:hover,
.sidebar .sidebar-dropdown-menu a:hover {
  background: var(--nx-surface-2) !important;
  color: var(--nx-ink) !important;
}

.sidebar-menu-item.active > .parent-item-content,
.sidebar .parent-item-content.active,
.sidebar .parent-item-content.mm-active,
.sidebar .sidebar-dropdown-menu a.active {
  background: var(--dz-teal-wash) !important;
  color: #00504C !important;
  box-shadow: inset 3px 0 0 var(--dz-teal) !important;
  font-weight: 600;
}
.sidebar-menu-item.active > .parent-item-content i,
.sidebar .parent-item-content.active i,
.sidebar .sidebar-dropdown-menu a.active i { color: var(--nx-brass) !important; }

/* ============ topbar: white with a hairline ============ */
.header,
.main-header,
.header .header-wrapper,
.navbar-top {
  background: var(--nx-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--nx-line) !important;
  color: var(--nx-ink) !important;
}
.header .dropdown-toggle,
.header .btn,
.header .nav-link {
  background: var(--nx-surface) !important;
  background-image: none !important;
  border: 1px solid var(--nx-line) !important;
  color: var(--nx-ink) !important;
  box-shadow: none !important;
}
.header .dropdown-toggle:hover,
.header .btn:hover { background: var(--nx-surface-2) !important; }

/* ============ primary actions: teal pill, like "Order now" ============ */
.btn-add,
.page-content .btn-add,
.page-content .btn-primary,
.page-content .ot-btn-primary,
.modal .btn-primary,
.modal .action-btn,
.btn-primary.ot-btn-primary {
  background: var(--dz-teal) !important;
  background-image: none !important;
  border: 1px solid var(--dz-teal) !important;
  color: var(--dz-teal-ink) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-add:hover,
.page-content .btn-primary:hover,
.page-content .ot-btn-primary:hover,
.modal .btn-primary:hover,
.modal .action-btn:hover { filter: brightness(.95); }

/* dark secondary, like the website's "Order online" */
.page-content .btn-dark,
.page-content .btn-secondary {
  background: var(--nx-ink) !important;
  border-color: var(--nx-ink) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
}

/* row action buttons: pale teal chip, dark teal glyph */
.dropdown-action > a,
.dropdown-action .dropdown-toggle,
.dropdown-action button,
.table .dropdown-toggle.btn {
  background: var(--dz-teal-wash) !important;
  background-image: none !important;
  border: 1px solid #BFEDE8 !important;
  color: var(--nx-brass) !important;
  box-shadow: none !important;
}
.dropdown-action > a:hover,
.dropdown-action .dropdown-toggle:hover { background: #D6F5F1 !important; }
.dropdown-action i { color: var(--nx-brass) !important; }

/* ============ focus ring ============ */
.page-content .form-control:focus,
.page-content .form-select:focus,
.modal .form-control:focus,
.auth-page .login__input:focus {
  border-color: var(--nx-steel) !important;
  box-shadow: 0 0 0 3px rgba(0, 191, 178, .18) !important;
}

/* ============ type: one family, weight carries hierarchy ============ */
.page-content h3,
.page-content h4,
.page-content .card-title,
.modal .modal-header h5 {
  font-weight: 600 !important;
  letter-spacing: -.01em;
}

/* ============================================================
   Sidebar highlight fix
   [CHANGE 2026-07-24] what: colour the TEXT of an active menu item, not just its
   container · why: the theme sets the label colour on the inner <span>, so a rule
   on the parent left white text sitting on the pale teal wash — invisible ·
   verify: expand any parent menu (e.g. Notice Board) — the label reads dark teal
   on the wash, and the submenu behind it is white with a teal bullet, not blue.
   ============================================================ */

.sidebar .parent-item-content.active,
.sidebar .parent-item-content.active *,
.sidebar .parent-item-content.mm-active,
.sidebar .parent-item-content.mm-active *,
.sidebar .parent-item-content[aria-expanded="true"],
.sidebar .parent-item-content[aria-expanded="true"] *,
.sidebar-menu-item.active > .parent-item-content,
.sidebar-menu-item.active > .parent-item-content * {
  color: #00504C !important;
  -webkit-text-fill-color: #00504C !important;
}

/* the icon and the expand chevron follow the label */
.sidebar .parent-item-content.active i,
.sidebar .parent-item-content.active svg,
.sidebar .parent-item-content.mm-active i,
.sidebar .parent-item-content[aria-expanded="true"] i,
.sidebar-menu-item.active > .parent-item-content i {
  color: #00706A !important;
  fill: #00706A !important;
}

/* submenu panel: white ground, never the theme's blue */
.sidebar .sidebar-dropdown-menu,
.sidebar .sub-menu,
.sidebar .collapse,
.sidebar .collapsing,
.sidebar ul ul {
  background: #FFFFFF !important;
}

.sidebar .sidebar-dropdown-menu a,
.sidebar .sub-menu a,
.sidebar ul ul a {
  background: transparent !important;
  color: #46524F !important;
}

.sidebar .sidebar-dropdown-menu a:hover,
.sidebar .sub-menu a:hover,
.sidebar ul ul a:hover {
  background: #EEF4F3 !important;
  color: #0B1B1A !important;
}

.sidebar .sidebar-dropdown-menu a.active,
.sidebar .sidebar-dropdown-menu li.active > a,
.sidebar .sub-menu a.active,
.sidebar .sub-menu li.active > a,
.sidebar ul ul a.active {
  background: #E8FAF8 !important;
  color: #00504C !important;
  font-weight: 600 !important;
}

/* the bullet in front of a submenu item — theme paints it blue */
.sidebar .sidebar-dropdown-menu a::before,
.sidebar .sub-menu a::before,
.sidebar ul ul a::before,
.sidebar .sidebar-dropdown-menu a .dot,
.sidebar .sub-menu a .dot {
  background: #00BFB2 !important;
  background-color: #00BFB2 !important;
  border-color: #00BFB2 !important;
  color: #00BFB2 !important;
}

/* [CHANGE 2026-08-08] AUTH-MOBILE
   what: stack the sign-in card and the footer links, and tighten the card on small screens
   why:  .auth-page is a flex ROW and the footer links are a sibling of the card, so on a phone
         they sat BESIDE the card and pushed the page wider than the screen — the card was cut
         off at the left edge and the page scrolled sideways
   verify: open /sign-in on a phone; the card is fully visible, links sit underneath, no sideways scroll */
.auth-page { flex-direction: column; flex-wrap: wrap; }
.auth-page .auth-container { min-height: 0; width: 100%; padding-left: 0; padding-right: 0; }
.auth-page .form-wrapper { margin-left: auto; margin-right: auto; }
.auth-page .auth-footer-links { margin-top: 6px; }
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 560px) {
  .auth-page { padding: 20px 14px; }
  .auth-page .form-wrapper { padding: 28px 22px !important; border-radius: 12px; }
  .auth-page .auth-footer-links { gap: 16px !important; padding: 16px 12px 22px !important; }
}

/* ============ type: Public Sans at the order.doszcoffee sizes ============
   [CHANGE 2026-10-17] what: the admin uses Public Sans (self-hosted, OFL — the files the order system serves) at the
   order admin's sizes: text 14px, labels / table heads 12px, card titles 18px, page titles 20px · why: Founder 17 Oct
   "swich semua font dan font size. sekarang nampak besar. buat seperti order.doszcoffee" — the screens ran at 16px
   with 24px titles and the theme's Lexend in the sidebar · verify: render a page; body 14px Public Sans, icons intact.
   Undo: delete this block (Instrument Sans above stays loaded). */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/public-sans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/public-sans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/public-sans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/public-sans-Bold.ttf') format('truetype'); }

:root {
  --nx-sans:  'Public Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nx-serif: 'Public Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* every element, icons excluded (icon fonts sit on <i> and on la- / fa- / lni classes) */
body.default-theme,
body.default-theme *:not(i):not([class*="la-"]):not([class^="la"]):not([class*="fa-"]):not([class^="fa"]):not([class*="lni"]):not([class*="icon"]) {
  font-family: var(--nx-sans) !important;
}
body.default-theme { font-size: 14px; line-height: 1.45; }

/* sidebar */
.sidebar .sidebar-menu-item > a, .sidebar .parent-item-content, .sidebar .child-menu-list a,
.sidebar span, .sidebar .nav-title { font-size: 14px !important; }
.sidebar .child-menu-list a, .sidebar .child-menu-list span { font-size: 13px !important; }

/* titles */
.page-content h1, .page-content .h1 { font-size: 22px !important; }
.page-content h2, .page-content .h2, .page-title, .breadcrumb-title { font-size: 20px !important; }
.page-content h3, .page-content .h3 { font-size: 18px !important; }
.card-title, .page-content h4, .page-content .h4 { font-size: 18px !important; font-weight: 500 !important; }
.page-content h5, .page-content .h5, .modal-title { font-size: 16px !important; }
.page-content h6, .page-content .h6 { font-size: 14px !important; }

/* controls */
.btn { font-size: 14px !important; }
.btn-sm, .btn-group-sm > .btn { font-size: 12px !important; }
.form-control, .form-select, .select2-container .select2-selection, input, select, textarea { font-size: 14px !important; }
.form-control-sm, .form-select-sm { font-size: 12.5px !important; }
.form-label, label { font-size: 13px; }

/* tables */
.table td, table.dataTable td { font-size: 14px; }
.table th, table.dataTable th, .table thead td { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .3px; }
.small, small { font-size: 12px; }

/* ============ badge names Bootstrap 5 dropped ============
   [CHANGE 2026-10-17] what: colours for badge-light / badge-info / badge-secondary / badge-dark · why: the admin loads
   Bootstrap 5.2, which no longer has these Bootstrap 4 names (the theme only adds primary/success/warning/danger), so a
   badge using them showed white text with no background · verify: Settings › App Tiles chips, Blackout "Lifted",
   POS mapping "-" are readable. */
.badge.badge-light     { background-color: #F1F4F6; color: #1F2A37; border: 1px solid #D5DCE1; }
.badge.badge-info      { background-color: #E3F1F0; color: #0F5E57; border: 1px solid #B7DCD8; }
.badge.badge-secondary { background-color: #EEF0F2; color: #3B4754; border: 1px solid #D5DCE1; }
.badge.badge-dark      { background-color: #1F2A37; color: #fff; }
a.badge.badge-light:hover, a.badge.badge-light:focus-visible { background-color: #E2E8EC; color: #1F2A37; }

/* ============ print ============
   [CHANGE 2026-10-17] the header Print button prints only the page's content: no sidebar, header, footer, buttons
   or filters; full width; cards without shadows; table rows kept whole. Founder 17 Oct "semua benda penting boleh
   letak button untuk print". */
@media print {
  .sidebar, .header, header, .navbar, .header-section, .main-header, footer, .footer, .no-print,
  .btn, button, .pagination, .dataTables_filter, .dataTables_length, .breadcrumb, .bulletin-marquee,
  .offcanvas, .profile-menu-mobile, form .form-control[type="search"] { display: none !important; }
  body, body.default-theme { background: #fff !important; font-size: 11pt; }
  .main-content, .page-content, .content-wrapper, main, .main, .profile-content { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
  .card { box-shadow: none !important; border: 1px solid #dde6e4 !important; break-inside: avoid; }
  table { font-size: 10pt; } tr { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}