/* ==========================================================================
   Deasco UI Redesign — "Bringova" theme
   Loaded after custom.css. Restyles the existing Limitless/Bootstrap 4
   components in place (cards, tables, forms, buttons, sidebar, navbar,
   modals, login) — no view markup or business logic is touched here.

   The Outfit font is loaded via a <link> in head-script.php (not @import
   here) so the browser can fetch it in parallel instead of blocking this
   stylesheet's own parse/fetch on a second round-trip.
   ========================================================================== */

:root {
  --d-primary: #2f6fed;
  --d-primary-rgb: 47, 111, 237;
  --d-primary-dark: #2557c4;
  --d-accent-light: #e8f0ff;
  --d-success: #2ec4b6;
  --d-warning: #ff9f1c;
  --d-info: #00b4d8;
  --d-danger: #e5484d;
  --d-bg-body: #f8f6f6;
  --d-bg-card: #ffffff;
  --d-text-main: #2d2525;
  --d-text-muted: #958a8a;
  --d-border-color: #f0e4e4;
  --d-radius-lg: 24px;
  --d-radius-md: 16px;
  --d-radius-sm: 10px;
  --d-shadow: 0 10px 30px rgba(var(--d-primary-rgb), .06), 0 2px 8px rgba(0, 0, 0, .02);
  --d-shadow-sm: 0 10px 30px rgba(var(--d-primary-rgb), .06), 0 2px 8px rgba(0, 0, 0, .02);
  --d-sidebar-shadow: 6px 0 30px rgba(0, 0, 0, .02);
  --d-font: 'Outfit', -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */
html, body {
  background-color: var(--d-bg-body) !important;
}
body {
  font-family: var(--d-font) !important;
  color: var(--d-text-main);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--d-font);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--d-text-main);
}
a { color: var(--d-primary); }
a:hover { color: var(--d-primary-dark); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--d-bg-body); }
::-webkit-scrollbar-thumb { background: var(--d-border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--d-text-muted); }

.content-wrapper { background-color: transparent; }
.content {
  padding: 1.25rem 0rem;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

/* ---------------------------------------------------------------------- */
/* Topbar                                                                  */
/* ---------------------------------------------------------------------- */
.navbar.navbar-dark {
  background-color: var(--d-bg-card) !important;
  border-bottom: 1px solid var(--d-border-color);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
  min-height: 70px;
  padding-left: 0 !important;
}
/* Logo gets its own bordered panel, flush with the navbar's full height and
   lined up with the sidebar's own right border directly beneath it. */
.navbar.navbar-dark .navbar-brand {
  align-self: stretch;
  display: flex;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0 1.75rem;
  border-right: 1px solid var(--d-border-color);
}
.navbar.navbar-dark .navbar-brand a { color: var(--d-text-main) !important; }
.navbar.navbar-dark .navbar-brand img {
  background: var(--d-primary);
  border-radius: var(--d-radius-md);
  padding: 4px;
}
.navbar.navbar-dark .navbar-toggler,
.navbar.navbar-dark .navbar-nav-link { color: var(--d-text-main) !important; }
.navbar.navbar-dark .navbar-nav-link:hover { color: var(--d-primary) !important; }

/* Topbar search bar (visual match to reference's .search-bar) */
.topbar-search { position: relative; width: 280px; max-width: 40vw; }
.topbar-search input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid var(--d-border-color);
  background-color: #fff;
  border-radius: var(--d-radius-md);
  outline: none;
  font-size: .9rem;
  color: var(--d-text-main);
  transition: border-color .2s, box-shadow .2s;
}
.topbar-search input:focus {
  border-color: var(--d-primary);
  box-shadow: 0 0 0 3px rgba(var(--d-primary-rgb), .15);
}
.topbar-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--d-text-muted);
}
@media (max-width: 767.98px) {
  .topbar-search { display: none; }
}

.topbar-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--d-radius-md);
  color: var(--d-text-main);
  background: transparent;
  border: none;
  position: relative;
}
.topbar-icon-btn:hover { background-color: var(--d-accent-light); color: var(--d-primary); }
.topbar-icon-btn .topbar-badge-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-primary);
  border: 2px solid var(--d-bg-card);
}

.dropdown-user .dropdown-menu {
  border-radius: var(--d-radius-md);
  border: 1px solid var(--d-border-color);
  box-shadow: var(--d-shadow);
  padding: 8px;
}
.dropdown-user .dropdown-menu .dropdown-item {
  border-radius: var(--d-radius-sm);
  padding: .55rem .9rem;
  color: var(--d-text-main);
}
.dropdown-user .dropdown-menu .dropdown-item:hover,
.dropdown-user .dropdown-menu .dropdown-item:focus {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
}

/* Modern profile dropdown: avatar + name/role header, danger-styled logout */
.dropdown-user-menu-modern { width: 260px; }
.dropdown-user-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .6rem;
  border-radius: var(--d-radius-sm);
  background-color: var(--d-accent-light);
  margin-bottom: .3rem;
}
.dropdown-user-header img { flex-shrink: 0; object-fit: cover; }
.dropdown-user-name {
  font-weight: 600;
  color: var(--d-text-main);
  font-size: .92rem;
  line-height: 1.25;
}
.dropdown-user-role {
  font-size: .75rem;
  color: var(--d-text-muted);
}
.dropdown-user .dropdown-menu .dropdown-item-danger {
  color: #e5484d;
}
.dropdown-user .dropdown-menu .dropdown-item-danger:hover,
.dropdown-user .dropdown-menu .dropdown-item-danger:focus {
  background-color: rgba(229, 72, 77, .1);
  color: #e5484d;
}

/* bottom footer bar reuses navbar-light */
.navbar.navbar-light {
  background-color: var(--d-bg-card) !important;
  border-top: 1px solid var(--d-border-color);
}

/* ---------------------------------------------------------------------- */
/* Sidebar — light, rounded, pink accents. Icon rail + hover flyout is the */
/* permanent default (head-script.php adds body.sidebar-xs on load).      */
/* ---------------------------------------------------------------------- */
.sidebar-main {
  background-color: var(--d-bg-card) !important;
  border-right: 1px solid var(--d-border-color) !important;
  box-shadow: var(--d-sidebar-shadow);
}
.sidebar-main .sidebar-content,
.sidebar-main .card-sidebar-mobile,
.sidebar-main .sidebar-mobile-toggler {
  background-color: transparent !important;
  color: var(--d-text-main);
}
.sidebar-main .sidebar-user {
  border-bottom: 1px solid var(--d-border-color);
}
.sidebar-main .sidebar-user .media-title,
.sidebar-main .sidebar-user .opacity-50 {
  color: var(--d-text-main) !important;
}

.sidebar-main .nav-sidebar .nav-item > .nav-link {
  color: var(--d-text-main);
  border-radius: var(--d-radius-md);
  margin: 2px 8px;
  font-weight: 500;
  transition: all .2s ease;
}
.sidebar-main .nav-sidebar .nav-item > .nav-link:hover {
  background-color: var(--d-accent-light) !important;
  color: var(--d-primary) !important;
}
.sidebar-main .nav-sidebar .nav-item.nav-item-open > .nav-link,
.sidebar-main .nav-sidebar .nav-item > .nav-link.active {
  background-color: var(--d-accent-light) !important;
  color: var(--d-primary) !important;
}
.sidebar-main .nav-sidebar .nav-group-sub .nav-link {
  color: var(--d-text-main);
  border-radius: var(--d-radius-sm);
}
.sidebar-main .nav-sidebar .nav-group-sub .nav-link:hover,
.sidebar-main .nav-sidebar .nav-group-sub .nav-link.active {
  color: var(--d-primary) !important;
  background-color: var(--d-accent-light) !important;
}

/* Collapsed icon rail (default state) — matches the reference's 48px
   rounded-md icon chip (icon size, radius, hover/active colors), with a
   small caption added below since we're showing names under each icon. */
.sidebar-xs .sidebar-main { width: 6rem !important; }
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: auto;
  min-height: 60px;
  margin: 3px auto;
  padding: 8px 2px !important;
  border-radius: var(--d-radius-md);
}
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link > i {
  font-size: 1.3rem;
  display: block !important;
  position: static !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  color: var(--d-primary);
}
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item > .nav-link > span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 62px;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------------ */
/* Secondary sidebar — the reference's two-tier layout: the currently- */
/* active section's submenu renders as a persistent second column      */
/* (not just a hover popup). Every view already marks its own section  */
/* with .nav-item-open on load (see the inline script at the bottom of */
/* each view, e.g. $("#dashboardview").addClass('nav-item-open')), so   */
/* this is always in sync with whatever page is currently open.        */
/* Hovering a *different* icon still previews its submenu on top, for  */
/* quick access to other sections without leaving the current page.   */
/* ------------------------------------------------------------------ */
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-open > .nav-group-sub,
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-submenu:hover > .nav-group-sub,
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-submenu:focus > .nav-group-sub {
  display: block !important;
  position: fixed;
  top: 70px;
  left: 6rem;
  right: auto;
  bottom: 0;
  width: 15rem;
  height: calc(100vh - 70px);
  overflow-y: auto;
  background-color: var(--d-bg-card) !important;
  border: none !important;
  border-right: 1px solid var(--d-border-color) !important;
  border-radius: 0 !important;
  box-shadow: var(--d-sidebar-shadow) !important;
  padding: 24px 16px;
  z-index: 998;
}
/* a hovered/focused preview should always sit above the persistent panel */
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-submenu:hover > .nav-group-sub,
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-submenu:focus > .nav-group-sub {
  z-index: 999;
  box-shadow: var(--d-shadow) !important;
}
.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-submenu > .nav-group-sub[data-submenu-title]:before {
  content: attr(data-submenu-title);
  display: block;
  color: var(--d-text-muted) !important;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: 1 !important;
  padding: 0 .5rem .9rem !important;
  margin: 0 0 .5rem !important;
  border-bottom: 1px solid var(--d-border-color);
}
.sidebar-xs .sidebar-main .nav-sidebar .nav-group-sub .nav-link {
  padding: .55rem .9rem !important;
  margin-bottom: 2px;
}

/* reserve layout space for the persistent secondary panel */
@media (min-width: 992px) {
  .sidebar-xs .content-wrapper { margin-left: 15rem; }
}

/* Secondary panel show/hide toggle — a small floating handle at the panel's
   edge (independent of the panel itself, so it stays clickable even while
   the panel is hidden). State is remembered via localStorage (see
   head-script.php) since this is a multi-page app, not a single-page demo. */
.sidebar-secondary-toggle-btn {
  position: fixed;
  top: 86px;
  left: calc(6rem + 15rem - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--d-bg-card);
  border: 1px solid var(--d-border-color);
  color: var(--d-text-muted);
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--d-shadow-sm);
  z-index: 1000;
  transition: left .2s ease;
}
.sidebar-secondary-toggle-btn:hover { color: var(--d-primary); border-color: var(--d-primary); }
.sidebar-secondary-toggle-btn i { font-size: .7rem; }

body.sidebar-secondary-collapsed .sidebar-secondary-toggle-btn { left: calc(6rem - 14px); }

/* Collapsed: hide the persistent panel and reclaim its layout space. Hover
   preview still works, so other sections stay reachable at a glance. */
body.sidebar-secondary-collapsed.sidebar-xs .sidebar-main .nav-sidebar > .nav-item-open > .nav-group-sub {
  display: none !important;
}
@media (min-width: 992px) {
  body.sidebar-secondary-collapsed.sidebar-xs .content-wrapper { margin-left: 2rem !important; }
}

/* sidebar goes off-canvas on narrow viewports; don't reserve/force the panel */
@media (max-width: 991.98px) {
  .sidebar-xs .sidebar-main .nav-sidebar > .nav-item-open > .nav-group-sub {
    display: none !important;
  }
  .sidebar-xs .content-wrapper { margin-left: 0; }
}

/* the desktop expand/collapse toggle is redundant now that icon+flyout is
   the fixed design; hide it (mobile toggle stays functional) */
.sidebar-main-toggle { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */
.card {
  border: 1px solid var(--d-border-color);
  border-radius: var(--d-radius-lg) !important;
  box-shadow: var(--d-shadow-sm);
}

/* Dashboard stat tiles (card-custom + stat-icon pattern from the reference) */
.stat-card .card-body { padding: 1.4rem; }
.stat-label {
  color: var(--d-text-muted);
  font-size: .85rem;
  font-weight: 500;
  margin-bottom: .25rem;
}
.stat-value { font-size: 1.7rem; color: var(--d-text-main); }
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--d-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* Colorful gradient variant of the stat cards */
.stat-card-gradient {
  border: none !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card-gradient:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .16);
}
.stat-card-gradient .stat-label-white {
  display: block;
  color: rgba(255, 255, 255, .85);
  font-size: .85rem;
  font-weight: 500;
  margin-bottom: .25rem;
}
.stat-card-gradient .stat-value-white {
  font-size: 1.7rem;
  color: #fff;
}
.stat-icon-white {
  width: 48px;
  height: 48px;
  border-radius: var(--d-radius-md);
  background-color: rgba(255, 255, 255, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Dashboard project mini-cards (Ongoing/Completed Projects, 3 per row)    */
/* ---------------------------------------------------------------------- */
.project-mini-card {
  border: 1px solid var(--d-border-color);
  border-radius: var(--d-radius-md);
  background-color: var(--d-bg-card);
  box-shadow: var(--d-shadow-sm);
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.project-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow);
}
.project-mini-card-top {
  height: 6px;
}
.project-mini-card-top.ongoing { background: linear-gradient(90deg, #2f6fed, #6dd5fa); }
.project-mini-card-top.completed { background: linear-gradient(90deg, #11998e, #38ef7d); }
.project-mini-card-body { padding: 1.1rem 1.2rem; }
.project-mini-id {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--d-text-muted);
  background-color: var(--d-bg-body);
  border-radius: 100px;
  padding: .2rem .6rem;
}
.project-mini-edit {
  color: var(--d-text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.project-mini-edit:hover {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
}
.project-mini-name {
  margin: .6rem 0 .3rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-mini-customer {
  font-size: .8rem;
  color: var(--d-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: .7rem;
}
.project-mini-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--d-text-muted);
  border-top: 1px solid var(--d-border-color);
  padding-top: .6rem;
}
.project-mini-dates i { margin-right: .3rem; opacity: .7; }
.project-mini-empty {
  color: var(--d-text-muted);
  font-size: .85rem;
  padding: 1rem 0;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--d-border-color);
  border-top-left-radius: var(--d-radius-lg) !important;
  border-top-right-radius: var(--d-radius-lg) !important;
  padding: 1.1rem 1.4rem;
}
.card-title { font-weight: 600; }
.card-body { padding: 1.4rem; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn {
  border-radius: var(--d-radius-sm);
  font-weight: 500;
}
.btn-primary {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--d-primary-dark) !important;
  border-color: var(--d-primary-dark) !important;
}
.btn-outline-primary {
  color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--d-primary) !important;
  color: #fff !important;
}
.btn-info { background-color: var(--d-info) !important; border-color: var(--d-info) !important; }
.btn-success { background-color: var(--d-success) !important; border-color: var(--d-success) !important; }
.btn-danger { background-color: var(--d-danger) !important; border-color: var(--d-danger) !important; }
.btn-warning { background-color: var(--d-warning) !important; border-color: var(--d-warning) !important; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
/* Exact match to the reference's .form-control-custom spec: 12px/16px
   padding, .95rem type, border-radius-md (16px), same focus ring. Applies
   to <input>, <select>, and <textarea> alike since they all share the
   .form-control class throughout the project. */
.form-control, .custom-select, select.form-control {
  display: block;
  width: 100%;
  height: auto !important;
  padding: 12px 16px !important;
  font-size: .95rem !important;
  font-weight: 400;
  line-height: 1.5;
  border-radius: var(--d-radius-md) !important;
  border: 1px solid var(--d-border-color) !important;
  background-color: #fff;
  background-clip: padding-box;
  color: var(--d-text-main);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus, .custom-select:focus, select.form-control:focus {
  color: var(--d-text-main);
  background-color: #fff;
  border-color: var(--d-primary) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--d-primary-rgb), .15) !important;
}
.form-control:disabled, .form-control[readonly] {
  background-color: #faf5f5 !important;
}
textarea.form-control { padding: 12px 16px !important; }

/* Icon-prefixed inputs (login, search boxes) need extra left clearance so
   the icon doesn't sit on top of the text — restore Limitless's own offset
   on top of the new uniform padding above. */
.form-group-feedback-left .form-control { padding-left: 2.875rem !important; }
.form-group-feedback-right .form-control { padding-right: 2.875rem !important; }
/* A handful of list pages (e.g. product-list.php) define their own
   .search-bar input with an inline icon; give it the same clearance. Those
   pages also each carry their own local <style> block positioning the icon
   absolutely inside the input — pages that use the same .search-bar markup
   without that local block (e.g. user-list.php) previously rendered the
   icon stacked above the input instead of inset on the left, so that
   positioning is globalized here too. */
.search-bar { position: relative; }
.search-bar input.form-control { padding-left: 2.5rem !important; }
.search-bar > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--d-text-muted);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Modern styling for every other form element type: checkboxes,       */
/* radios, toggle switches (switchery), styled checkboxes (uniform.js) */
/* and file inputs — so the whole form vocabulary matches the theme,   */
/* not just text inputs/selects.                                       */
/* ------------------------------------------------------------------ */

/* Plain native checkboxes/radios (Bootstrap .form-check-input, list-page
   "select" checkboxes, or any un-plugin'd checkbox) — fully custom drawn
   box/dot instead of the tiny default OS control, no JS required. Plugin
   managed checkboxes (uniform.js, switchery) already set their native input
   to opacity:0/position:absolute once initialized, so this is invisible
   there regardless and safe to apply everywhere. */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 19px;
  height: 19px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--d-border-color);
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--d-primary);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: var(--d-primary);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked,
input[type="checkbox"]:indeterminate {
  background-color: var(--d-primary);
  border-color: var(--d-primary);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
}
input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 4.5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--d-primary-rgb), .15);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background-color: var(--d-bg-body);
  border-color: var(--d-border-color);
  cursor: not-allowed;
  opacity: .6;
}
/* :checked and :disabled above share specificity, so on a checkbox that's
   both (e.g. the payslip "Select All" locking every row's checkbox), the
   :disabled rule wins on source order and wipes the teal fill back to a
   near-white background -- leaving the :checked::after tick drawn in solid
   white on a near-white box, i.e. invisible. Force the fill back so the
   tick stays legible; dim with opacity instead to still read as disabled. */
input[type="checkbox"]:checked:disabled,
input[type="radio"]:checked:disabled {
  background-color: var(--d-primary);
  border-color: var(--d-primary);
  cursor: not-allowed;
  opacity: .7;
}
.form-check-input {
  border-color: var(--d-border-color);
}
.form-check-input:checked {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--d-primary-rgb), .15) !important;
  border-color: var(--d-primary) !important;
}

/* The stock theme (components.css) hides every [data-fouc] checkbox/radio
   with visibility:hidden until uniform.js/switchery.js processes it and
   takes over — a "flash of unstyled content" guard. That rule is more
   specific than our plain input[type=checkbox] styling above, so it wins
   regardless of source order. On any page where that plugin never actually
   initializes on a given checkbox (missing script include, selector
   mismatch, an earlier JS error on the page), nothing ever cancels the
   hide and the checkbox is permanently invisible — not just unstyled. Our
   checkbox above needs no JS at all, so force these back to visible instead
   of chasing every page's script tags; if the plugin does run, its own
   inline styles/markup still take over exactly as before. */
input[type="checkbox"][data-fouc],
input[type="radio"][data-fouc] {
  visibility: visible !important;
}

/* ---------------------------------------------------------------------- */
/* Password show/hide toggle — applied automatically to every             */
/* input[type=password] site-wide by the script in include/footer-script. */
/* php, which wraps the field in .password-toggle-wrap and appends the    */
/* .password-toggle-btn eye icon below.                                   */
/* ---------------------------------------------------------------------- */
.password-toggle-wrap {
  position: relative;
}
.password-toggle-wrap .form-control {
  padding-right: 2.75rem;
}
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: .1rem;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--d-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  z-index: 5;
}
.password-toggle-btn:hover,
.password-toggle-btn:focus {
  color: var(--d-primary);
  outline: none;
}

/* uniform.js styled checkboxes/radios (e.g. login "Remember me"). The tick
   is an icomoon glyph painted via the span's `color` (components.css sets
   color: #455A64 by default) — without overriding it here the checkmark
   stays dark gray and nearly invisible against our colored checked
   background instead of showing white. */
.uniform-checker span.checked,
.uniform-choice span.checked {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
  color: #fff !important;
}
.uniform-checker span,
.uniform-choice span {
  border-color: var(--d-border-color) !important;
  border-radius: 5px;
}
.uniform-choice span { border-radius: 50% !important; }

/* switchery.js toggle switches (Settings > Location/Attendance Photo, etc.)
   — the library sets the checked-state color inline via JS, so this needs
   !important to win. It also fills the "on" state with an inset box-shadow
   (not just background-color) during/after its toggle animation, so that
   has to be neutralized too or the library's default green shows through. */
.switchery {
  border-radius: 999px !important;
  box-shadow: none !important;
}
.form-input-switchery:checked ~ .switchery,
.form-input-switchery:checked + .switchery {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
}

/* File inputs (e.g. Settings > Logo, Product > Certificate upload, Delivery
   Order proof-of-delivery image). Chromium's input[type=file] does not
   paint background-color/background-image/border-color/border-style on the
   host element (confirmed: forcing red/lime/yellow inline !important styles
   produced zero visible change) even though getComputedStyle reports them,
   so a true "modern dropzone" look isn't achievable with CSS on the raw
   element alone. Fallback styling here covers the (rare) no-JS case; the
   real visual comes from the .d-file-upload wrapper that head-script.php's
   enhanceFileInput() builds around every input[type=file] at runtime,
   keeping the original input fully intact (same id/name/attrs/listeners)
   but visually hidden underneath the styled box. */
input[type="file"] {
  display: block;
  width: 100%;
  padding: 11px 16px !important;
  font-size: .88rem !important;
  color: var(--d-text-muted);
  border-radius: var(--d-radius-md) !important;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  border: none;
  background-color: var(--d-primary);
  color: #fff;
  font-weight: 500;
  font-size: .82rem;
  padding: 7px 16px;
  border-radius: var(--d-radius-sm);
  margin-right: 14px;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
input[type="file"]::file-selector-button:hover {
  background-color: var(--d-primary-dark);
}
input[type="file"]::file-selector-button:active {
  transform: scale(.96);
}

/* Modern dropzone-style wrapper built by enhanceFileInput() in
   head-script.php. The native input sits on top (opacity 0, full-size) so
   it stays the actual click/drop target and keeps working with every
   existing id/name-based handler in the app; .d-file-upload-visual behind
   it is a plain div, so unlike the native control it fully respects
   background/border/icon styling. */
.d-file-upload {
  position: relative;
  width: 100%;
}
.d-file-upload input[type="file"].d-uploader-enhanced {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.d-file-upload-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background-color: var(--d-accent-light);
  border: 1.5px dashed var(--d-border-color);
  border-radius: var(--d-radius-md);
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.d-file-upload:hover .d-file-upload-visual {
  border-color: var(--d-primary);
  background-color: #fff;
}
.d-file-upload input[type="file"]:focus ~ .d-file-upload-visual {
  border-style: solid;
  border-color: var(--d-primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--d-primary-rgb), .15);
}
.d-file-upload-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 16 12 12 8 16'%3E%3C/polyline%3E%3Cline x1='12' y1='12' x2='12' y2='21'%3E%3C/line%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}
.d-file-upload-text {
  flex: 1 1 auto;
  font-size: .88rem;
  color: var(--d-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.d-file-upload.has-file .d-file-upload-text {
  color: var(--d-text-main);
  font-weight: 500;
}
.d-file-upload-btn {
  flex: none;
  margin-left: 12px;
  padding: 7px 16px;
  background-color: var(--d-primary);
  color: #fff;
  font-weight: 500;
  font-size: .82rem;
  border-radius: var(--d-radius-sm);
  white-space: nowrap;
  transition: background-color .15s ease;
}
.d-file-upload:hover .d-file-upload-btn {
  background-color: var(--d-primary-dark);
}

/* uniform.js's own uploader markup (input[name=bus_logo], #empic, the
   import/export .xlsx pickers) — it already keeps its native input hidden
   (absolute/opacity:0) behind a .filename/.action pair, so this restyles
   that existing structure directly instead of wrapping it again. */
.uniform-uploader {
  width: 100%;
  min-height: 44px;
  padding: 4px 4px 4px 14px;
  background-color: var(--d-accent-light);
  border: 1.5px dashed var(--d-border-color);
  border-radius: var(--d-radius-md);
  transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
.uniform-uploader:hover {
  border-color: var(--d-primary);
  background-color: #fff;
}
.uniform-uploader:focus-within {
  border-style: solid;
  border-color: var(--d-primary);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--d-primary-rgb), .15);
}
.uniform-uploader input[type="file"] {
  outline: none;
}
.uniform-uploader::before {
  content: '';
  order: -1;
  flex: none;
  width: 20px;
  height: 20px;
  align-self: center;
  margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232f6fed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 16 12 12 8 16'%3E%3C/polyline%3E%3Cline x1='12' y1='12' x2='12' y2='21'%3E%3C/line%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
}
.uniform-uploader .filename {
  align-self: center;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  font-size: .88rem;
  color: var(--d-text-muted) !important;
}
.uniform-uploader .action {
  border: none !important;
  background-color: var(--d-primary) !important;
  color: #fff !important;
  font-weight: 500;
  font-size: .82rem;
  padding: 9px 16px !important;
  border-radius: var(--d-radius-sm) !important;
  margin-left: 12px;
  transition: background-color .15s ease;
}
.uniform-uploader:hover .action {
  background-color: var(--d-primary-dark) !important;
}

/* ------------------------------------------------------------------ */
/* Stacked label-above-input form layout (matches the reference site's */
/* form design). Every form across the project already uses the same  */
/* Bootstrap "horizontal form" markup — .form-group.row with a         */
/* .col-form-label + a col-md-*/col-lg-* wrapper around the input — so */
/* overriding that one pattern here restyles every form project-wide   */
/* without editing each view file individually.                       */
/* ------------------------------------------------------------------ */
.form-group.row {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.form-group.row > .col-form-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  text-align: left !important;
  padding: 0 0 .4rem !important;
  margin: 0 !important;
  font-weight: 500;
  font-size: .88rem;
  color: var(--d-text-main);
}
/* Required-field asterisks: ~36 view files write
   "Label<span class="text-danger">*</span>" with no space in the markup
   itself (inconsistent with the majority that do add one), so the asterisk
   sits jammed against the label text. Fixed once here instead of editing
   every file — scoped to labels specifically so it doesn't touch
   .text-danger used elsewhere (error text, badges, etc). */
label span.text-danger {
  margin-left: 4px;
}
.form-group.row > [class*="col-"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.bootstrap-select .dropdown-toggle {
  border-radius: var(--d-radius-sm) !important;
  border-color: var(--d-border-color) !important;
}
/* Select2's default box (36px) is shorter than the modernized .form-control
   (~49px with its 12px/16px padding) — in any row that pairs a select-search
   field against a plain input (e.g. the New User modal's "Link to Employee"
   next to "Confirm Password"), that mismatch made the two columns drift out
   of vertical sync row by row. Matching the height here keeps every row
   aligned regardless of which control type is in it. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--d-radius-sm) !important;
  border-color: var(--d-border-color) !important;
  height: 49px !important;
  /* Bootstrap Limitless's own .select2-selection--single rule (components.css)
     sets padding: .4375rem 0 (7px top/bottom) on top of this — combined with
     the line-height/height: 47px below, that pushed the rendered text and
     arrow 12px past the bottom of the 49px box instead of centering them
     inside it. Zero it out so the fixed height above is the only thing
     controlling the box, matching every other .form-control on the page. */
  padding: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 47px !important;
  padding-left: 14px;
  color: var(--d-text-main);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 47px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 8px;
}
.select2-dropdown { border-radius: var(--d-radius-sm); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--d-primary) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
}

/* ---------------------------------------------------------------------- */
/* Badges / Alerts                                                         */
/* ---------------------------------------------------------------------- */
.badge { border-radius: 100px; font-weight: 600; padding: .4em .8em; }

/* Flash-message alerts (include/alerts.php, loaded on nearly every page):
   soft tinted background + colored left accent + icon, instead of a flat
   solid-color block with white text — easier to read, matches the same
   "soft tint" language used for role badges and modal-header variants. */
.alert {
  position: relative;
  border: none;
  border-left: 4px solid var(--d-primary);
  border-radius: var(--d-radius-md);
  padding: 1rem 1.25rem 1rem 3.25rem;
  box-shadow: var(--d-shadow-sm);
  color: var(--d-text-main);
  font-weight: 500;
}
.alert-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
}
.alert-dismissible { padding-right: 3rem; }
.alert-dismissible .close {
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  padding: 0 !important;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: .6;
  color: inherit;
  transition: background-color .15s ease, opacity .15s ease;
}
.alert-dismissible .close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .06);
}

.alert.bg-success { background: #e6f9f7 !important; border-left-color: var(--d-success); color: #0b6e64 !important; }
.alert.bg-success .alert-icon { color: var(--d-success) !important; }
.alert.bg-danger { background: #fdecec !important; border-left-color: var(--d-danger); color: #a02328 !important; }
.alert.bg-danger .alert-icon { color: var(--d-danger) !important; }
.alert.bg-warning { background: #fff4e5 !important; border-left-color: var(--d-warning); color: #8a5300 !important; }
.alert.bg-warning .alert-icon { color: var(--d-warning) !important; }
.alert.bg-info { background: #e5f9fd !important; border-left-color: var(--d-info); color: #006b80 !important; }
.alert.bg-info .alert-icon { color: var(--d-info) !important; }
.alert.bg-primary { background: var(--d-accent-light) !important; border-left-color: var(--d-primary); color: var(--d-primary-dark) !important; }
.alert.bg-primary .alert-icon { color: var(--d-primary) !important; }
.alert.bg-teal { background: #e6f9f7 !important; border-left-color: #009688; color: #0b6e64 !important; }
.alert.bg-teal .alert-icon { color: #009688 !important; }
.alert.bg-success span,
.alert.bg-danger span,
.alert.bg-warning span,
.alert.bg-info span,
.alert.bg-primary span,
.alert.bg-teal span { color: inherit !important; }

/* ---------------------------------------------------------------------- */
/* Tables / DataTables                                                     */
/* ---------------------------------------------------------------------- */
.table thead th {
  color: var(--d-text-muted);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-top: none;
  border-bottom: 1px solid var(--d-border-color);
}
.table td, .table th { border-color: var(--d-border-color); vertical-align: middle; }
.table-hover tbody tr:hover { background-color: var(--d-accent-light); }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--d-radius-sm);
  border: 1px solid var(--d-border-color);
}
.dataTables_wrapper .paginate_button {
  border-radius: var(--d-radius-sm);
}
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
  background: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------- */
/* Modals — clean/minimal, no gradient banner. A bold color-block header   */
/* reads dated; this uses a plain light header with a slim colored accent  */
/* bar on semantic variants instead, more whitespace throughout, and       */
/* recolors the Close/Save footer buttons (still driven by the same        */
/* bg-danger/bg-success classes every view already uses, just restyled).  */
/* ---------------------------------------------------------------------- */
.modal-content {
  border-radius: var(--d-radius-lg);
  border: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.modal-backdrop {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-backdrop.show { opacity: .55; }

/* Every modal header uses the app's solid theme blue, regardless of which
   bg-success/warning/info/danger class the view happens to put on it — one
   consistent brand color across the whole app instead of per-page variance. */
.modal-header,
.modal-header[class*="bg-"] {
  padding: 1.5rem 1.75rem;
  border-bottom: none !important;
  background: var(--d-primary) !important;
  align-items: center;
}
/* bootstrap_limitless.css's ".modal-header:not([class*=bg-])" rule (higher
   specificity than the plain ".modal-header" above) zeroes padding-bottom
   for any header without a bg-* class — i.e. every "filter popup" modal in
   the app, since those all use the plain blue header instead of
   bg-success/bg-warning. That left the title/icon/close button sitting low
   with a lopsided 24px gap above and none below. Force it back to symmetric. */
.modal-header:not([class*="bg-"]) {
  padding-bottom: 1.5rem !important;
}
.modal-header .modal-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: #fff;
}
/* Several modal titles prefix an icon before the text (e.g.
   <i class="icon-menu7 mr-2"></i> &nbsp;Title) — the icon glyph's own
   metrics sit well above the text baseline without this, so the two look
   misaligned even though both are inside the same flex-centered title. */
.modal-header .modal-title i {
  flex-shrink: 0;
  font-size: 1rem;
}
.modal-header .close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1;
  opacity: 1;
  color: #fff;
  background-color: rgba(255, 255, 255, .18);
  transition: background-color .15s ease, transform .15s ease;
  padding: 0 !important;
  margin: -.4rem -.4rem -.4rem auto !important;
}
.modal-header .close:hover {
  background-color: rgba(255, 255, 255, .3);
  transform: rotate(90deg);
}

.modal-body { padding: 1.75rem; }
/* Two-column modal forms (New User, New Customer, etc: a .row > two
   .col-lg-6 halves) inherit the theme's tight .625rem/10px grid gutter,
   which reads as almost no gap between the left/right field columns once
   the modal is wide. Widen it here, scoped to the outer wrapper only
   (.modal-body > .row, not the nested .form-group.row label/input split
   inside each field, which keeps its own zero-gutter override). */
.modal-body > .row {
  margin-left: -14px;
  margin-right: -14px;
}
.modal-body > .row > [class*="col-"] {
  padding-left: 14px;
  padding-right: 14px;
}

/* Same tight-gutter problem, project-wide: every full-page "New"/"Edit" form
   (customer, product, vendor, project, delivery order, user edit, etc —
   ~30+ views) uses the identical pattern of a .row split into two
   .col-md-6/.col-lg-6 halves of stacked <fieldset> fields, and inherits the
   same cramped .625rem/10px gutter between the left and right field
   columns. Scoped with :has() to rows whose columns directly contain a
   <fieldset> — the consistent marker of this specific layout — so it
   widens exactly these two-column field forms without touching unrelated
   .card-body grids (the Users page's card grid, dashboard stat-card rows,
   etc.) that also live inside a .row but aren't this field-column pattern.
   Uses a descendant combinator (not direct child) since tabbed forms like
   Edit User nest the .row several levels deeper, under
   .card-body > .tab-content > .tab-pane > form. */
.card-body .row:has(> [class*="col-"] > fieldset) {
  margin-left: -14px;
  margin-right: -14px;
}
.card-body .row:has(> [class*="col-"] > fieldset) > [class*="col-"] {
  padding-left: 14px;
  padding-right: 14px;
}

/* bootstrap_limitless.min.css ships .modal-footer:not([class*=bg-]) with
   padding-top:0 and border-top-width:0 — higher specificity than a plain
   .modal-footer rule, so it silently strips the top spacing/divider on
   every modal in the app (none of them put a bg-* class on the footer
   itself). !important needed to actually win here. */
.modal-footer {
  padding: 1.1rem 1.75rem !important;
  border-top: 1px solid var(--d-border-color) !important;
  background-color: var(--d-bg-card);
  gap: .6rem;
}
.modal-footer .btn {
  border-radius: var(--d-radius-sm) !important;
  font-weight: 500;
  padding: .6rem 1.4rem;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Close/Cancel: dismissing a form isn't a destructive action, so a solid
   red block overstates it — a quiet outline button reads correctly instead. */
.modal-footer .btn.bg-danger {
  background-color: transparent !important;
  border: 1px solid var(--d-border-color) !important;
  color: var(--d-text-muted) !important;
}
.modal-footer .btn.bg-danger:hover {
  background-color: var(--d-bg-body) !important;
  border-color: var(--d-text-muted) !important;
  color: var(--d-text-main) !important;
}
/* Save/Confirm: solid brand blue instead of green, so the one primary
   action on the form matches the app's actual accent color. */
.modal-footer .btn.bg-success {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
  color: #fff !important;
}
.modal-footer .btn.bg-success:hover {
  background-color: var(--d-primary-dark) !important;
  border-color: var(--d-primary-dark) !important;
}

/* ---------------------------------------------------------------------- */
/* Tabs (plain + Limitless "solid" segmented tab bars used as list         */
/* toggles/detail-page tabs, e.g. purchase-order-list, project-edit)       */
/* ---------------------------------------------------------------------- */
.nav-tabs { border-bottom-color: var(--d-border-color); }
.nav-tabs .nav-link.active {
  color: var(--d-primary) !important;
  border-color: transparent transparent var(--d-primary) !important;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--d-primary); }

.nav-tabs-solid {
  background-color: var(--d-accent-light) !important;
  border-radius: var(--d-radius-md) !important;
  padding: 4px !important;
}
.nav-tabs-solid .nav-item .nav-link {
  color: var(--d-text-main) !important;
  border: none !important;
  background: transparent !important;
  border-radius: var(--d-radius-sm) !important;
  font-weight: 500;
}
.nav-tabs-solid .nav-item .nav-link.active {
  background-color: var(--d-primary) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------- */
/* Pagination                                                              */
/* ---------------------------------------------------------------------- */
.pagination .page-link {
  border-radius: var(--d-radius-sm);
  margin: 0 2px;
  border-color: var(--d-border-color);
  color: var(--d-text-main);
}
.pagination .page-item.active .page-link {
  background-color: var(--d-primary) !important;
  border-color: var(--d-primary) !important;
}

/* ---------------------------------------------------------------------- */
/* Breadcrumb / page header                                                */
/* ---------------------------------------------------------------------- */
.page-header { background-color: transparent; margin-bottom: 1.1rem; }
.page-header-light { border-bottom: 0 !important; }
.breadcrumb-line {
  background-color: var(--d-bg-card) !important;
  border: 1px solid var(--d-border-color) !important;
  border-bottom: none !important;
  border-radius: var(--d-radius-md) !important;
  box-shadow: var(--d-shadow-sm);
  padding: .55rem .9rem !important;
  margin: 0 !important;
}
.breadcrumb {
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb-item {
  font-size: .85rem;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

/* Plain (non-home) links: subtle rounded hover pill */
.breadcrumb-item a,
a.breadcrumb-item {
  display: inline-flex !important;
  align-items: center;
  color: var(--d-text-muted);
  font-weight: 500;
  padding: .3rem .6rem !important;
  margin: 0 -.6rem;
  border-radius: var(--d-radius-sm);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.breadcrumb-item a:hover,
a.breadcrumb-item:hover {
  color: var(--d-primary);
  opacity: 1 !important;
}

/* Home: icon-only circular chip (collapse the text node, keep the icon) */
.breadcrumb-item:first-child,
.breadcrumb-item:first-child a,
a.breadcrumb-item:first-child {
  font-size: 0 !important;
}
.breadcrumb-item:first-child a,
a.breadcrumb-item:first-child {
  width: 28px;
  height: 28px;
  padding: 0 !important;
  margin: 0 !important;
  justify-content: center;
  border-radius: 50%;
}
.breadcrumb-item:first-child a:hover i,
a.breadcrumb-item:first-child:hover i {
  color: var(--d-primary) !important;
}
.breadcrumb-item:first-child i {
  font-size: .85rem !important;
  margin-right: 0 !important;
  color: var(--d-text-muted);
  transition: color .15s ease;
}

/* Current page */
.breadcrumb-item.active {
  color: var(--d-primary);
  font-weight: 600;
  padding: .3rem .2rem !important;
  margin-left: .15rem;
}

/* Separators between every item after the first (Home) */
.breadcrumb-item + .breadcrumb-item {
  padding-left: .65rem !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  display: inline-block;
  color: var(--d-text-muted);
  opacity: .45;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  padding-right: .55rem;
}

/* ---------------------------------------------------------------------- */
/* Login page                                                              */
/* ---------------------------------------------------------------------- */
.login-split-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Left visual panel */
.login-visual-panel {
  flex: 0 0 44%;
  max-width: 620px;
  position: relative;
  overflow: hidden;
  padding: 4rem 3.5rem;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(155deg, var(--d-primary) 0%, #2557c4 55%, #173f8c 100%);
}
.login-visual-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}
.login-visual-shape-1 { width: 420px; height: 420px; top: -160px; right: -140px; }
.login-visual-shape-2 { width: 300px; height: 300px; bottom: -120px; left: -100px; background: rgba(255, 255, 255, .06); }
.login-visual-content { position: relative; z-index: 1; }
.login-visual-brand-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--d-radius-md);
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}
.login-visual-brand-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.login-visual-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.25rem;
}
.login-visual-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--d-radius-md);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Right form panel */
.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--d-primary-rgb), .05) 0%, transparent 60%),
    var(--d-bg-body);
}

.login-form .card {
  border-radius: var(--d-radius-lg) !important;
  box-shadow: var(--d-shadow);
  padding: 12px;
}
.login-form .form-control {
  padding-top: .9rem;
  padding-bottom: .9rem;
  font-size: 1rem;
}

/* ---------------------------------------------------------------------- */
/* User list (Users page): card grid + infinite scroll                    */
/* ---------------------------------------------------------------------- */
.user-list-toolbar { gap: 1rem; }
.user-list-search { flex: 1 1 320px; max-width: 420px; }
.user-list-selectall {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .85rem;
  color: var(--d-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.user-list-selectall input { margin: 0; cursor: pointer; }

.user-card-col { margin-bottom: 1.25rem; }
.user-card {
  position: relative;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--d-border-color);
  border-top-width: 4px;
  border-top-color: var(--d-primary);
  border-radius: var(--d-radius-md);
  background-color: var(--d-bg-card);
  box-shadow: var(--d-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.user-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow);
}
/* Top border colored by role tier, reusing the dashboard stat-card palette
   so the same role reads the same color everywhere in the app. */
.user-card.role-tier-1 { border-top-color: #7F7FD5; }
.user-card.role-tier-2 { border-top-color: #2f6fed; }
.user-card.role-tier-3 { border-top-color: #11998e; }
.user-card.role-tier-4 { border-top-color: #f7971e; }
.user-card.role-tier-5 { border-top-color: #f857a6; }
.user-card.role-tier-6 { border-top-color: #485563; }
input.user-card-check {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.user-card-top {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-right: 1.5rem;
}
.user-card-avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(135deg, var(--d-primary), var(--d-primary-dark));
}
.user-card-id { min-width: 0; flex: 1 1 auto; }
.user-card-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-username {
  font-size: .8rem;
  color: var(--d-text-muted);
}
.user-card-username:hover { color: var(--d-primary); }
.user-role-badge {
  display: block;
  width: fit-content;
  margin-top: .6rem;
  background-color: var(--d-accent-light);
  color: var(--d-primary);
  font-weight: 600;
  font-size: .7rem;
  border-radius: 100px;
  padding: .3rem .7rem;
}
.user-card-body {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--d-border-color);
}
.user-card-info-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--d-text-muted);
  overflow: hidden;
}
.user-card-info-row + .user-card-info-row { margin-top: .4rem; }
.user-card-info-row i { flex: none; color: var(--d-primary); font-size: .85rem; }
.user-card-info-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--d-border-color);
}
.user-card-status-icons { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.user-card-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.user-card-status-dot.is-active { background-color: var(--d-success); }
.user-card-status-dot.is-inactive { background-color: var(--d-text-muted); }
.user-card-actions { display: flex; align-items: center; gap: .5rem; }
.user-card-actions a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--d-bg-body);
  color: var(--d-text-muted);
  transition: background-color .15s ease, color .15s ease;
}
.user-card-actions a.user-card-action-edit {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
}
.user-card-actions a.user-card-action-log {
  background-color: rgba(0, 180, 216, .12);
  color: var(--d-info);
}
.user-card-actions a:hover {
  background-color: var(--d-primary);
  color: #fff;
}

.user-list-spinner .spinner {
  display: inline-block;
  animation: dUserListSpin .8s linear infinite;
}
@keyframes dUserListSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.login-form .btn-primary {
  padding: .9rem 1.2rem;
  font-weight: 600;
  font-size: 1.02rem;
}
.login-form a { color: var(--d-primary); }
.login-form h4 { font-size: 1.5rem; }

/* Add to Home Screen banner (login screen) */
.install-banner {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.25rem;
  padding: .6rem .7rem .6rem .6rem;
  border-radius: var(--d-radius-md);
  background-color: var(--d-accent-light);
  border: 1px solid rgba(var(--d-primary-rgb), .15);
}
.install-banner-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--d-bg-card);
  color: var(--d-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--d-shadow-sm);
}
.install-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: left;
}
.install-banner-text strong { font-size: .84rem; color: var(--d-text-main); }
.install-banner-text span {
  font-size: .74rem;
  color: var(--d-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.install-banner-btn {
  flex: none;
  border: 0;
  background-color: var(--d-primary);
  color: #fff;
  font-weight: 600;
  font-size: .78rem;
  padding: .45rem 1rem;
  border-radius: 100px;
  transition: background-color .15s ease, transform .15s ease;
}
.install-banner-btn:hover,
.install-banner-btn:focus {
  background-color: var(--d-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}
.install-banner-dismiss {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  background: none;
  color: var(--d-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 50%;
  transition: background-color .15s ease, color .15s ease;
}
.install-banner-dismiss:hover,
.install-banner-dismiss:focus {
  background-color: rgba(0, 0, 0, .06);
  color: var(--d-text-main);
}
@media (max-width: 420px) {
  .install-banner-text span { display: none; }
}

@media (max-width: 991.98px) {
  .login-split-wrapper { display: block; }
  .login-form-panel { min-height: 100vh; }
}

/* ---------------------------------------------------------------------- */
/* Global page loader                                                      */
/* Every view already ships its own #loading-overlay markup plus a legacy  */
/* inline <style> block (dark full-screen backdrop + spinning icon-font    */
/* glyph). Rather than touching 75+ view files individually, these rules   */
/* use !important to win over every one of those per-page copies, so the   */
/* loader gets one consistent, modern look project-wide. Each page's own   */
/* display:none/flex default (and the JS in footer-script.php that toggles */
/* it) is left untouched — only the visual skin changes here.              */
/* ---------------------------------------------------------------------- */
#loading-overlay {
  background-color: rgba(248, 246, 246, .85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#loading-overlay h5 {
  color: var(--d-text-main) !important;
  font-weight: 500 !important;
  font-size: .95rem !important;
  letter-spacing: 0 !important;
  margin-top: 1.1rem !important;
}
#loading-overlay i {
  font-size: 0 !important;
  width: 46px;
  height: 46px;
  display: inline-block;
  box-sizing: border-box;
  border: 4px solid rgba(var(--d-primary-rgb), .15);
  border-top-color: var(--d-primary);
  border-radius: 50%;
  animation: dLoaderSpin .75s linear infinite;
}
@keyframes dLoaderSpin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------- */
/* Floating action button (the bottom-right "+" add button used across     */
/* every list page — product, customer, delivery order, users, etc.)       */
/* ---------------------------------------------------------------------- */
.fab-menu-btn {
  background: linear-gradient(135deg, var(--d-primary), var(--d-primary-dark)) !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(var(--d-primary-rgb), .38), 0 2px 6px rgba(0, 0, 0, .08) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.fab-menu-btn i { color: #fff; }
.fab-menu-btn:hover,
.fab-menu-btn:focus {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px rgba(var(--d-primary-rgb), .48), 0 4px 10px rgba(0, 0, 0, .1) !important;
}
.fab-menu-btn:active {
  transform: translateY(-1px) scale(.96);
}
/* Soft pulsing ring so the primary "add" action reads as inviting rather
   than just sitting there — subtle enough not to be distracting. */
.fab-menu-fixed .fab-menu-btn {
  position: relative;
}
.fab-menu-fixed .fab-menu-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(var(--d-primary-rgb), .45);
  animation: dFabPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes dFabPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--d-primary-rgb), .45); }
  70% { box-shadow: 0 0 0 14px rgba(var(--d-primary-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--d-primary-rgb), 0); }
}

/* ---------------------------------------------------------------------- */
/* Expense subcategory list: card grid + infinite scroll (same pattern as  */
/* the Users page card grid — reuses its spinner animation/class).         */
/* ---------------------------------------------------------------------- */
.expsub-card-col { margin-bottom: 1.25rem; }
.expsub-card {
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--d-border-color);
  border-top-width: 4px;
  border-top-color: var(--d-primary);
  border-radius: var(--d-radius-md);
  background-color: var(--d-bg-card);
  box-shadow: var(--d-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.expsub-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow);
}
.expsub-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.expsub-card-name {
  font-weight: 600;
  font-size: .98rem;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expsub-category-badge {
  flex: none;
  background-color: var(--d-accent-light);
  color: var(--d-primary);
  font-weight: 600;
  font-size: .7rem;
  border-radius: 100px;
  padding: .3rem .7rem;
}
.expsub-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--d-border-color);
}
.expsub-card-actions a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.expsub-card-action-edit {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
}
.expsub-card-action-edit:hover {
  background-color: var(--d-primary);
  color: #fff;
}
.expsub-card-action-delete {
  background-color: rgba(229, 72, 77, .1);
  color: var(--d-danger);
}
.expsub-card-action-delete:hover {
  background-color: var(--d-danger);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Reports section: colored top border accent on each report's main card, */
/* matching the same treatment already used on the user/expense-subcategory */
/* card grids. Scoped to .report-card (added to each view under            */
/* logapp/views/report/) rather than every .card in the app.                */
/* ---------------------------------------------------------------------- */
.card.report-card {
  border-top: 4px solid var(--d-primary);
}

/* ---------------------------------------------------------------------- */
/* Expense category list: card grid + infinite scroll (same pattern as the */
/* expense subcategory / user card grids, minus the parent-category badge  */
/* since categories have no parent of their own).                          */
/* ---------------------------------------------------------------------- */
.expcat-card-col { margin-bottom: 1.25rem; }
.expcat-card {
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--d-border-color);
  border-top-width: 4px;
  border-top-color: var(--d-primary);
  border-radius: var(--d-radius-md);
  background-color: var(--d-bg-card);
  box-shadow: var(--d-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.expcat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow);
}
.expcat-card-name {
  font-weight: 600;
  font-size: .98rem;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expcat-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--d-border-color);
}
.expcat-card-actions a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.expcat-card-action-edit {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
}
.expcat-card-action-edit:hover {
  background-color: var(--d-primary);
  color: #fff;
}
.expcat-card-action-delete {
  background-color: rgba(229, 72, 77, .1);
  color: var(--d-danger);
}
.expcat-card-action-delete:hover {
  background-color: var(--d-danger);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Expense list: card grid + infinite scroll (same pattern as the         */
/* category/subcategory grids), showing category, amount, project, date.  */
/* ---------------------------------------------------------------------- */
.expense-card-col { margin-bottom: 1.25rem; }
.expense-card {
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--d-border-color);
  border-top-width: 4px;
  border-top-color: var(--d-primary);
  border-radius: var(--d-radius-md);
  background-color: var(--d-bg-card);
  box-shadow: var(--d-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.expense-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow);
}
.expense-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.expense-category-badge {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
  font-weight: 600;
  font-size: .7rem;
  border-radius: 100px;
  padding: .3rem .7rem;
}
.expense-card-amount {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--d-text-main);
}
.expense-card-project {
  margin-top: .8rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expense-card-subcategory {
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--d-text-muted);
}
.expense-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--d-border-color);
}
.expense-card-date {
  font-size: .8rem;
  color: var(--d-text-muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.expense-card-actions { display: flex; align-items: center; gap: .5rem; }
.expense-card-actions a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.expense-card-action-edit {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
}
.expense-card-action-edit:hover {
  background-color: var(--d-primary);
  color: #fff;
}
.expense-card-action-delete {
  background-color: rgba(229, 72, 77, .1);
  color: var(--d-danger);
}
.expense-card-action-delete:hover {
  background-color: var(--d-danger);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Generic list-page card component, shared by every remaining card-grid   */
/* list conversion (delivery order/return, purchase, project, service,     */
/* payroll, ...). Keeps the rest of this batch of conversions from each    */
/* needing their own ~80-line bespoke card CSS block — module-specific     */
/* view partials just use these class names directly. */
/* ---------------------------------------------------------------------- */
.list-card-col { margin-bottom: 1.25rem; }
.list-card {
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--d-border-color);
  border-top-width: 4px;
  border-top-color: var(--d-primary);
  border-radius: var(--d-radius-md);
  background-color: var(--d-bg-card);
  box-shadow: var(--d-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow);
}
/* Cycle the top-border accent color across an 8-color palette instead of a
   flat primary blue on every card — restores the visual variety the earlier
   bespoke per-page card grids (vendor/customer/warehouse/product) had
   before they were unified onto this shared component, but generically via
   grid position so it applies to every .list-card in the app without any
   per-page markup or PHP changes. */
.list-card-col:nth-child(8n+1) .list-card { border-top-color: #3b82f6; }
.list-card-col:nth-child(8n+2) .list-card { border-top-color: #10b981; }
.list-card-col:nth-child(8n+3) .list-card { border-top-color: #f59e0b; }
.list-card-col:nth-child(8n+4) .list-card { border-top-color: #ef4444; }
.list-card-col:nth-child(8n+5) .list-card { border-top-color: #8b5cf6; }
.list-card-col:nth-child(8n+6) .list-card { border-top-color: #ec4899; }
.list-card-col:nth-child(8n+7) .list-card { border-top-color: #14b8a6; }
.list-card-col:nth-child(8n+8) .list-card { border-top-color: #f97316; }
.list-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.list-card-id {
  font-weight: 700;
  font-size: .95rem;
  color: var(--d-primary);
}
.list-card-id:hover { color: var(--d-primary-dark); text-decoration: underline; }
.list-card-title {
  margin-top: .6rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card-subtitle {
  margin-top: .2rem;
  font-size: .82rem;
  color: var(--d-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card-info-row {
  margin-top: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--d-text-muted);
  overflow: hidden;
}
.list-card-info-row span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card-badge {
  background-color: var(--d-accent-light);
  color: var(--d-primary);
  font-weight: 600;
  font-size: .68rem;
  border-radius: 100px;
  padding: .25rem .6rem;
  flex: none;
  white-space: nowrap;
}
.list-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--d-border-color);
}
.list-card-meta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .78rem;
  color: var(--d-text-muted);
  min-width: 0;
}
.list-card-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-card-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.list-card-actions a {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  transition: background-color .15s ease, color .15s ease;
}
.list-card-action-primary { background-color: var(--d-accent-light); color: var(--d-primary); }
.list-card-action-primary:hover { background-color: var(--d-primary); color: #fff; }
.list-card-action-info { background-color: rgba(0, 180, 216, .12); color: var(--d-info); }
.list-card-action-info:hover { background-color: var(--d-info); color: #fff; }
.list-card-action-success { background-color: rgba(46, 196, 182, .12); color: var(--d-success); }
.list-card-action-success:hover { background-color: var(--d-success); color: #fff; }
.list-card-action-danger { background-color: rgba(229, 72, 77, .1); color: var(--d-danger); }
.list-card-action-danger:hover { background-color: var(--d-danger); color: #fff; }

.cert-doc-badge {
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--d-border-color);
  border-radius: var(--d-radius-sm);
  padding: .3rem .5rem .3rem .6rem;
  margin: 0 .4rem .4rem 0;
  font-size: 12px;
  color: var(--d-body-color, #495057);
}
.cert-doc-action {
  width: 22px;
  height: 22px;
  margin-left: .35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  transition: background-color .15s ease, color .15s ease;
}
.cert-doc-action-info { background-color: rgba(0, 180, 216, .12); color: var(--d-info); }
.cert-doc-action-info:hover { background-color: var(--d-info); color: #fff; }
.cert-doc-action-primary { background-color: var(--d-accent-light); color: var(--d-primary); }
.cert-doc-action-primary:hover { background-color: var(--d-primary); color: #fff; }
.cert-doc-action-danger { background-color: rgba(229, 72, 77, .1); color: var(--d-danger); }
.cert-doc-action-danger:hover { background-color: var(--d-danger); color: #fff; }

/* ---------------------------------------------------------------------- */
/* Employee picker — modern checkbox-list replacement for the native       */
/* <select multiple> "press CTRL to select" box (payroll-payslip.php's     */
/* Payslip Generate form). Scrollable bordered list, one row per employee. */
/* ---------------------------------------------------------------------- */
.employee-picker {
  max-height: 270px;
  overflow-y: auto;
  border: 1px solid var(--d-border-color);
  border-radius: var(--d-radius-md);
  padding: .4rem;
  background-color: var(--d-bg-card);
}
.employee-picker-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  padding: .5rem .6rem;
  border-radius: var(--d-radius-sm);
  cursor: pointer;
  transition: background-color .15s ease;
}
.employee-picker-item:hover { background-color: var(--d-bg-body); }
.employee-picker-item input[type="checkbox"] { flex-shrink: 0; }
/* Native disabled+checked checkboxes render an almost-invisible washed-out
   checkmark, which reads as "select all did nothing" -- highlight the whole
   row instead so it's unmistakable which employees are included. */
.employee-picker-item.picker-locked-checked {
  background-color: var(--d-accent-light);
}
.employee-picker-item.picker-locked-checked .employee-picker-name {
  color: var(--d-primary);
  font-weight: 600;
}
.employee-picker-name {
  font-size: .86rem;
  color: var(--d-text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-picker-allrow {
  border: 1px solid var(--d-border-color);
  border-radius: var(--d-radius-md);
  margin-bottom: .5rem;
  background-color: var(--d-accent-light);
}

/* ---------------------------------------------------------------------- */
/* Modern alert / confirm modal — replaces native alert()/confirm() popups */
/* everywhere in the app. Injected once into <body> on first use by        */
/* global_assets/theme/js/d-alert.js; every page gets it via footer-script.*/
/* ---------------------------------------------------------------------- */
.d-alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45, 37, 37, .45);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  padding: 1rem;
}
.d-alert-backdrop.show { opacity: 1; visibility: visible; }
.d-alert-box {
  background: var(--d-bg-card);
  border-radius: var(--d-radius-lg);
  box-shadow: var(--d-shadow);
  width: 100%;
  max-width: 400px;
  padding: 1.75rem 1.75rem 1.5rem;
  text-align: center;
  transform: translateY(10px) scale(.97);
  transition: transform .15s ease;
}
.d-alert-backdrop.show .d-alert-box { transform: translateY(0) scale(1); }
.d-alert-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
  font-size: 1.6rem;
}
.d-alert-icon.d-alert-info { background-color: rgba(0, 180, 216, .12); color: var(--d-info); }
.d-alert-icon.d-alert-success { background-color: rgba(46, 196, 182, .12); color: var(--d-success); }
.d-alert-icon.d-alert-warning { background-color: rgba(255, 159, 28, .14); color: #c97400; }
.d-alert-icon.d-alert-danger { background-color: rgba(229, 72, 77, .1); color: var(--d-danger); }
.d-alert-title {
  font-family: var(--d-font);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--d-text-main);
  margin-bottom: .4rem;
}
.d-alert-message {
  font-size: .9rem;
  color: var(--d-text-muted);
  line-height: 1.5;
  margin-bottom: 1.4rem;
  white-space: pre-line;
}
.d-alert-actions {
  display: flex;
  gap: .6rem;
  justify-content: center;
}
.d-alert-actions button {
  font-family: var(--d-font);
  font-weight: 600;
  font-size: .88rem;
  border-radius: var(--d-radius-sm);
  padding: .55rem 1.4rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  flex: 1;
  max-width: 160px;
}
.d-alert-btn-cancel {
  background: var(--d-bg-body);
  border-color: var(--d-border-color) !important;
  color: var(--d-text-main);
}
.d-alert-btn-cancel:hover { background: var(--d-border-color); }
.d-alert-btn-ok {
  background: var(--d-primary);
  color: #fff;
}
.d-alert-btn-ok:hover { background: var(--d-primary-dark); }
.d-alert-btn-danger {
  background: var(--d-danger);
  color: #fff;
}
.d-alert-btn-danger:hover { background: #c73438; }