/* =============================================================================
 * tujar-redesign-components.css  —  sidebar + topbar + buttons/badges/cards
 * -----------------------------------------------------------------------------
 * Consumes the --tc-* tokens from tujar-redesign.css. CSS only — no markup or
 * JS changes. sidebar_menu.php / header.php are untouched; state classes
 * (.active, .expand) are still toggled by their existing inline scripts, this
 * file only restyles them.
 *
 * Load order (see head.php):
 *   ekka.css  ->  tujar-redesign.css  ->  tujar-redesign-components.css
 * ui-interactions.css is injected later by header.php, so the few rules that
 * fight it (#sidebar-toggler, .ec-mobile-back, .dash-card hover) use !important
 * on purpose / deliberately avoid it. Ekka's selectors are deep (.btn.btn-x =
 * 0,2,0, skins up to 0,5,2), so !important is used broadly here by design.
 * ============================================================================= */

:root {
  /* brief calls this --tc-shadow-soft; keep that spelling working */
  --tc-shadow-soft: var(--tc-shadow-sm);
  /* rightward-casting shadow for the fixed sidebar's free edge */
  --tc-shadow-sidebar: 10px 0 30px color-mix(in srgb, var(--tc-brand-deep) 7%, transparent);
  /* darker primary gradient for :hover / :active on filled primary buttons */
  --tc-grad-primary-hover: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tc-primary) 82%, var(--tc-white)),
    color-mix(in srgb, var(--tc-primary) 62%, var(--tc-black))
  );
  /* Primary copy is pure black — override the token file's plum-tinted ink.
     Secondary text stays on --tc-ink-soft / --tc-text-secondary. */
  --tc-ink: #000;

  /* Floating-panel shell geometry (see SHELL / FLOATING LAYOUT section) */
  --tc-shell-gap: 18px;     /* canvas gutter around header + sidebar */
  --tc-header-h: 64px;      /* fixed height of the header panel      */
  --tc-sidebar-w: 250px;    /* Ekka's sidebar width                  */
}

/* =============================================================================
 * SHELL / FLOATING LAYOUT
 * -----------------------------------------------------------------------------
 * The header and sidebar become detached rounded panels sitting on a tinted
 * canvas, with a --tc-shell-gap gutter around them and between them. They stay
 * position:fixed (Ekka's ec-header-fixed / ec-sidebar-fixed) — only the box
 * model changes: top/left/right/bottom offsets + the matching space reserved
 * on .ec-page-wrapper / .content so nothing overlaps.
 *
 * Ekka reference: header was top:0;left:0;right:0 with .ec-page-wrapper
 * padding-top:5.4rem; sidebar was inset:0 (width 250px) with .ec-page-wrapper
 * padding-left:15.6rem. Both of those are recalculated below.
 * ========================================================================== */

/* Tinted canvas visible in the gaps */
body,
#body,
.wrapper {
  background: var(--tc-background) !important;
}

/* --- Header becomes a rounded gradient panel --------------------------- */
.ec-main-header {
  top: var(--tc-shell-gap) !important;
  right: var(--tc-shell-gap) !important;
  height: var(--tc-header-h) !important;
  min-height: var(--tc-header-h) !important;
  padding: 0 var(--tc-space-5) !important;
  border: 0 !important;
  border-radius: var(--tc-radius-4xl) !important;   /* symmetric 28px — no clipped corner on a wide bar */
  background: var(--tc-grad-header) !important;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tc-brand-deep) 22%, transparent) !important;
  overflow: visible !important;   /* let the user dropdown escape downward */
}
.ec-main-header .navbar {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.ec-main-header .navbar-right .navbar-nav { margin: 0 !important; height: 100% !important; }

/* Desktop-only company name, centered in the header bar — .ec-header-brand
   (logo + its own name span) is mobile-only, so this is a separate element
   shown only at >=768px to avoid rendering the name twice on mobile. */
.ec-header-company-name-desktop {
  display: none;
}
@media (min-width: 768px) {
  .ec-header-company-name-desktop {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    font-weight: 700;
    color: var(--tc-ink);
    background: #ffffff;
    padding: 6px 16px;
    border-radius: var(--tc-corner-md);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tc-brand-deep) 22%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
    pointer-events: none;
  }
}

/* header sits on a dark panel now → white controls */
.ec-main-header .sidebar-toggle,
.ec-main-header .ec-mobile-back a,
.ec-main-header .user-menu .dropdown-toggle > span,
.ec-main-header .user-menu .dropdown-toggle::after {
  color: #ffffff !important;
}
.ec-main-header .sidebar-toggle:hover,
.ec-main-header .ec-mobile-back a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
}
.ec-main-header .sidebar-toggle:active,
.ec-main-header .ec-mobile-back a:active {
  background: rgba(255, 255, 255, 0.22) !important;
}
.ec-main-header .user-menu .user-image {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28) !important;
}
.ec-main-header .user-menu .dropdown-toggle:hover .user-image,
.ec-main-header .user-menu.show .user-image {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;
}

/* reserve the header's height + gap on the content column (all widths) */
.ec-header-fixed .ec-page-wrapper {
  padding-top: calc(var(--tc-shell-gap) + var(--tc-header-h)) !important;
}

/* --- Desktop: sidebar offset + header cleared past it ------------------ */
@media (min-width: 768px) {
  .ec-main-header,
  .ec-sidebar-fixed .ec-main-header {
    left: calc(var(--tc-shell-gap) + var(--tc-sidebar-w) + var(--tc-shell-gap)) !important;
    padding-left: var(--tc-space-5) !important;   /* kill Ekka's 15.6rem */
  }

  .ec-left-sidebar,
  .ec-sidebar-fixed .ec-left-sidebar,
  .ec-left-sidebar.ec-bg-sidebar {
    top: var(--tc-shell-gap) !important;
    left: var(--tc-shell-gap) !important;
    bottom: var(--tc-shell-gap) !important;
    right: auto !important;
    width: var(--tc-sidebar-w) !important;
    height: auto !important;
  }
  .ec-left-sidebar .sidebar {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  .ec-left-sidebar .ec-navigation { height: calc(100% - 72px) !important; }

  /* content column: reserve sidebar width + gap on the left; the visual
     gutter itself lives on .content so it composes cleanly */
  .ec-sidebar-fixed .ec-page-wrapper,
  .ec-sidebar-fixed-offcanvas .ec-page-wrapper {
    padding-left: calc(var(--tc-shell-gap) + var(--tc-sidebar-w)) !important;
  }
  .ec-content-wrapper .content,
  .content {
    padding: var(--tc-shell-gap) var(--tc-shell-gap) 40px !important;
  }

  /* manual collapse (hamburger): sidebar slides out, so reclaim its gutter */
  body.sidebar-collapse .ec-page-wrapper,
  body.sidebar-collapse-out .ec-page-wrapper {
    padding-left: var(--tc-shell-gap) !important;
  }
  body.sidebar-collapse .ec-main-header,
  body.sidebar-collapse-out .ec-main-header {
    left: var(--tc-shell-gap) !important;
  }

  /* -------------------------------------------------------------------------
   * The 75px icon-rail (.sidebar-minified) is disabled by the floating
   * layout. ekka.js still adds the class on load for 768-991px viewports
   * (and the width branch of its toggle handler), which is why the nav text
   * "disappears until you toggle" — .sidebar-minified sets nav <span>
   * opacity:0 while our width:250px override keeps the panel full-width.
   * Force every minified variant to render exactly like the expanded sidebar.
   * ----------------------------------------------------------------------- */
  body.sidebar-minified .ec-left-sidebar,
  body.sidebar-minified-out .ec-left-sidebar,
  body.sidebar-minified .ec-left-sidebar:hover,
  body.sidebar-minified .ec-left-sidebar.ec-bg-sidebar {
    width: var(--tc-sidebar-w) !important;
    margin-right: 0 !important;
    transform: translateX(0) !important;
  }
  body.sidebar-minified .ec-left-sidebar .nav > li > a > span,
  body.sidebar-minified .ec-left-sidebar .nav > li > a > .caret,
  body.sidebar-minified .ec-left-sidebar .nav-text,
  body.sidebar-minified .ec-left-sidebar .caret,
  body.sidebar-minified .ec-left-sidebar .ec-brand-name {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.sidebar-minified .ec-left-sidebar .nav li.has-sub .collapse > .sub-menu,
  body.sidebar-minified .ec-left-sidebar .nav li.has-sub.expand .collapse > .sub-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }
  body.sidebar-minified .ec-left-sidebar .nav li.has-sub.expand .collapse > .sub-menu li {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.sidebar-minified .ec-page-wrapper,
  body.sidebar-minified-out .ec-page-wrapper {
    padding-left: calc(var(--tc-shell-gap) + var(--tc-sidebar-w)) !important;
  }
  body.sidebar-minified .ec-main-header,
  body.sidebar-minified-out .ec-main-header {
    left: calc(var(--tc-shell-gap) + var(--tc-sidebar-w) + var(--tc-shell-gap)) !important;
  }
}

/* --- Narrow / pre-mobile: sidebar is off-canvas, header spans the gutter - */
@media (max-width: 767.98px) {
  .ec-main-header,
  .ec-sidebar-fixed .ec-main-header {
    left: var(--tc-shell-gap) !important;
    padding-left: var(--tc-space-4) !important;
    padding-right: var(--tc-space-4) !important;
  }
  .ec-content-wrapper .content,
  .content { padding: 14px 12px 32px !important; }
}

/* =============================================================================
 * SIDEBAR
 * ========================================================================== */

/* --- Shell: force one light skin for every page, regardless of the
 *     body-level .ec-sidebar-light / .ec-sidebar-dark / (none) class -------- */
.ec-left-sidebar {
  background: var(--tc-surface) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Floating panel: all four corners rounded + an all-around soft shadow, only
 * while the sidebar is actually on-screen. Ekka slides it off for
 * .sidebar-collapse / .sidebar-mobile-out — exclude only those. (.sidebar-
 * minified is forced back to the expanded look further down, so it keeps the
 * radius + shadow.) */
body:not(.sidebar-collapse):not(.sidebar-collapse-out):not(.sidebar-mobile-out) .ec-left-sidebar {
  border-radius: var(--tc-radius-4xl) !important;   /* symmetric 28px on all corners */
  box-shadow: var(--tc-shadow-md) !important;
}

/* Hidden states slide the sidebar out by 100% of its own width instead of
 * Ekka's hard-coded 251px / 15.6rem, so it fully clears the viewport whatever
 * its real width is. translateX is used (% = element width) because a
 * percentage margin-left would resolve against the parent, not the sidebar.
 *
 * NOTE: nearly all of Ekka's docked-sidebar geometry lives in
 * @media (min-width: 768px); the unscoped base rule is the MOBILE (off-canvas)
 * state. So the transform overrides below are split the same way — otherwise a
 * blanket translateX(0) would pin the drawer open on phones. */
.ec-left-sidebar,
.ec-left-sidebar.ec-bg-sidebar {
  margin-left: 0 !important;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out !important;
  /* Keep the sidebar above the fixed white topbar (z-index 15) and the tools
   * overlay (17) in EVERY toggle state — Ekka otherwise drops it to z-index 15
   * (== header) in the .sidebar-minified rail state, letting the now-opaque
   * header background paint over the sidebar's top-left corner. */
  z-index: 20 !important;
}

/* Desktop / tablet: docked by default, only the collapse toggle pushes it out */
@media (min-width: 768px) {
  .ec-left-sidebar,
  .ec-left-sidebar.ec-bg-sidebar {
    transform: translateX(0) !important;   /* neutralises Ekka's base translateX(-251px) */
  }
  body.sidebar-collapse .ec-left-sidebar,
  body.sidebar-collapse .ec-left-sidebar.ec-bg-sidebar {
    transform: translateX(-100%) !important;
  }
  body.sidebar-collapse-out .ec-left-sidebar,
  body.sidebar-collapse-out .ec-left-sidebar.ec-bg-sidebar {
    transform: translateX(0) !important;
  }
}

/* Phone: off-canvas until Ekka adds .sidebar-mobile-in */
@media (max-width: 767.98px) {
  .ec-left-sidebar,
  .ec-left-sidebar.ec-bg-sidebar {
    transform: translateX(-100%) !important;
  }
  body.sidebar-mobile-in .ec-left-sidebar,
  body.sidebar-mobile-in .ec-left-sidebar.ec-bg-sidebar {
    transform: translateX(0) !important;
  }
}

.ec-left-sidebar .sidebar,
.ec-sidebar-light .sidebar,
.ec-sidebar-dark .sidebar {
  background: var(--tc-surface) !important;
  border-right: 0 !important;
}

.ec-left-sidebar .ec-navigation {
  scrollbar-width: thin;
  scrollbar-color: var(--tc-border) transparent;
}
.ec-left-sidebar .ec-navigation::-webkit-scrollbar { width: 8px; }
.ec-left-sidebar .ec-navigation::-webkit-scrollbar-thumb {
  background: var(--tc-border);
  border-radius: var(--tc-radius-pill);
}

/* --- Brand block ------------------------------------------------------------ */
.ec-left-sidebar .ec-brand {
  margin: 0 14px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid var(--tc-border-subtle) !important;
}
.ec-left-sidebar .ec-brand a {
  height: 64px !important;
  justify-content: center !important;
}

/* --- Top-level nav items -------------------------------------------------- */
.ec-left-sidebar .sidebar-inner {
  margin-top: 12px !important;
  padding: 0 !important;
}

.ec-left-sidebar .sidebar-inner > li > .sidenav-item-link {
  margin: 2px 12px !important;
  padding: 11px 14px !important;
  border-radius: var(--tc-radius-md) !important;
  color: #000 !important;
  font-size: var(--tc-text-base) !important;
  font-weight: var(--tc-weight-bold) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: var(--tc-transition) !important;
}

/* kill Ekka's 5px magenta accent bar — the pill replaces it */
.ec-left-sidebar .sidebar-inner > li > a::before { display: none !important; }

/* icons */
.ec-left-sidebar .nav > li > a .mdi {
  width: 22px !important;
  margin-right: 12px !important;
  color: var(--tc-text-secondary) !important;
  font-size: 1.2rem !important;
  line-height: 1 !important;
  transition: color var(--tc-duration) var(--tc-ease) !important;
}

/* hover */
.ec-left-sidebar .sidebar-inner > li > .sidenav-item-link:hover {
  background: var(--tc-state-hover) !important;
  color: var(--tc-primary) !important;
}
.ec-left-sidebar .sidebar-inner > li > .sidenav-item-link:hover .mdi {
  color: var(--tc-primary) !important;
}

/* active + open-parent */
.ec-left-sidebar .sidebar-inner > li.active > .sidenav-item-link,
.ec-left-sidebar .sidebar .nav > li.active > .sidenav-item-link {
  background: var(--tc-brand-soft) !important;
  color: var(--tc-primary) !important;
  font-weight: var(--tc-weight-extra) !important;
  box-shadow: inset 0 0 0 1px var(--tc-brand-border) !important;
}
.ec-left-sidebar .sidebar-inner > li.active > .sidenav-item-link .mdi,
.ec-left-sidebar .sidebar .nav > li.active > .sidenav-item-link .mdi {
  color: var(--tc-primary) !important;
}
.ec-left-sidebar .sidebar-inner > li.active > .sidenav-item-link .nav-text {
  font-weight: var(--tc-weight-extra) !important;
}
.ec-left-sidebar .sidebar-inner > li.expand > .sidenav-item-link {
  color: var(--tc-primary) !important;
}

/* --- Caret (submenu chevron) — recolor only, keep Ekka's rotation --------- */
.ec-left-sidebar .caret,
.ec-left-sidebar .caret::before {
  color: var(--tc-text-secondary) !important;
  opacity: 1 !important;
}
.ec-left-sidebar li.active > a .caret::before,
.ec-left-sidebar li.expand > a .caret::before {
  color: var(--tc-primary) !important;
}

/* --- Submenu ------------------------------------------------------------- */
.ec-left-sidebar .sidebar .sub-menu,
.ec-sidebar-light .sidebar .sub-menu,
.ec-sidebar-dark .sidebar .sub-menu {
  margin: 4px 12px 6px 26px !important;
  padding: 4px 0 4px 12px !important;
  background: transparent !important;
  border-left: 1px dashed var(--tc-border) !important;
}

.ec-left-sidebar .sidebar .sub-menu > li > a {
  margin: 1px 0 !important;
  padding: 8px 12px !important;
  border-radius: var(--tc-radius-sm) !important;
  color: #000 !important;
  font-size: var(--tc-text-sm) !important;
  font-weight: var(--tc-weight-medium) !important;
  transition: var(--tc-transition) !important;
}
.ec-left-sidebar .sidebar .sub-menu > li > a .nav-text { margin: 0 !important; }

.ec-left-sidebar .sidebar .sub-menu > li > a:hover,
.ec-sidebar-light .sidebar .sub-menu > li > a:hover,
.ec-sidebar-dark .sidebar .sub-menu > li > a:hover {
  background: var(--tc-state-hover) !important;
  color: var(--tc-primary) !important;
}

.ec-left-sidebar .sidebar .sub-menu > li.active > a,
.ec-left-sidebar .sidebar .sub-menu > li > a.active,
.ec-sidebar-light .sidebar .sub-menu > li.active > a,
.ec-sidebar-dark .sidebar .sub-menu > li.active > a {
  background: var(--tc-brand-soft) !important;
  color: var(--tc-primary) !important;
  font-weight: var(--tc-weight-extra) !important;
}

/* --- Separators: replace bare <hr> defaults --------------------------------- */
.ec-left-sidebar .sidebar-inner hr,
.ec-left-sidebar .sidebar hr {
  height: 0 !important;
  margin: 10px 16px !important;
  border: 0 !important;
  border-top: 1px solid var(--tc-border-subtle) !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* =============================================================================
 * TOPBAR
 * ========================================================================== */

/* NB: the header's box (bg gradient, radius, position, white controls,
 * white avatar ring) is set in the SHELL / FLOATING LAYOUT section above.
 * What's left here is shape/spacing that doesn't depend on the panel colour. */

/* --- Sidebar toggle (hamburger) ----------------------------------------- */
.ec-main-header .sidebar-toggle {
  border: 0 !important;
  border-radius: var(--tc-radius-md) !important;
  transition: var(--tc-transition) !important;
}

/* --- Mobile back button ------------------------------------------------- */
.ec-main-header .ec-mobile-back a {
  border-radius: var(--tc-radius-md) !important;
  transition: var(--tc-transition) !important;
}

/* --- Right cluster ----------------------------------------------------- */
.ec-main-header .navbar-right .navbar-nav {
  align-items: center !important;
  gap: var(--tc-space-1) !important;
}

/* User-menu caret (Bootstrap draws the triangle via border-color:currentColor;
 * SHELL sets it white) */
.ec-main-header .user-menu .dropdown-toggle::after {
  display: inline-block !important;
  align-self: center !important;
  margin-left: 6px !important;
  transition: color var(--tc-duration) var(--tc-ease) !important;
}

/* --- User avatar (initials) ------------------------------------------------ */
.ec-main-header .user-menu .user-image {
  background: var(--tc-grad-primary) !important;
  color: var(--tc-white) !important;
  border-radius: var(--tc-radius-pill) !important;
  font-weight: var(--tc-weight-bold) !important;
  transition: var(--tc-transition) !important;
}

/* --- Dropdown menu -------------------------------------------------------- */
.ec-main-header .ec-dropdown-menu,
.ec-main-header .navbar-right .navbar-nav li > .dropdown-menu {
  width: 280px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 1px solid var(--tc-border-soft) !important;
  border-radius: var(--tc-corner-2xl) !important;
  box-shadow: var(--tc-shadow-lg) !important;
  overflow: hidden !important;
}

.ec-main-header .dropdown-menu .dropdown-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--tc-space-2-5) !important;
  padding: var(--tc-space-4) !important;
  background: var(--tc-brand-soft) !important;
  border-bottom: 1px solid var(--tc-border-soft) !important;
  color: var(--tc-ink) !important;
}
.ec-main-header .dropdown-menu .dropdown-header .img-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 auto !important;
  border-radius: var(--tc-radius-pill) !important;
  background: var(--tc-grad-primary) !important;
  color: var(--tc-white) !important;
  font-weight: var(--tc-weight-bold) !important;
}
.ec-main-header .dropdown-menu .dropdown-header .d-inline-block {
  color: var(--tc-ink) !important;
  font-weight: var(--tc-weight-bold) !important;
  line-height: 1.35 !important;
}
.ec-main-header .dropdown-menu .dropdown-header small {
  color: var(--tc-ink-soft) !important;
  font-weight: var(--tc-weight-regular) !important;
}

.ec-main-header .dropdown-menu > li a {
  margin: 6px !important;
  padding: 10px 12px !important;
  border-radius: var(--tc-radius-sm) !important;
  color: var(--tc-ink-soft) !important;
  font-size: var(--tc-text-md) !important;
  font-weight: var(--tc-weight-medium) !important;
  transition: var(--tc-transition) !important;
}
.ec-main-header .dropdown-menu > li a:hover {
  background: var(--tc-state-hover) !important;
  color: var(--tc-primary) !important;
}

.ec-main-header .dropdown-menu .dropdown-footer {
  margin-top: 0 !important;
  background: var(--tc-surface) !important;
  border-top: 1px solid var(--tc-border-soft) !important;
}
.ec-main-header .dropdown-menu .dropdown-footer > a { padding: 12px !important; }
.ec-main-header .dropdown-menu .dropdown-footer .mdi {
  margin-right: 8px !important;
  color: var(--tc-primary) !important;
}

/* =============================================================================
 * BUTTONS   targets: .btn and every .btn-* variant found in the admin PHP
 *   .btn-primary(71) .btn-outline-success(54) .btn-outline-success00(37)
 *   .btn-danger(25) .btn-pill(20) .btn-secondary(8) .btn-outline-success0(3)
 *   .btn-success .btn-default .btn-flat .btn-outline-secondary .btn-link
 * ========================================================================== */

/* --- Base: clipped-corner shape, real transition, confident weight ---------- */
.btn {
  border-radius: var(--tc-corner-md) !important;   /* 13 13 13 5 — signature clip */
  border: 1px solid transparent !important;
  font-weight: var(--tc-weight-extra) !important;
  letter-spacing: 0.01em !important;
  transition: var(--tc-transition) !important;      /* Ekka sets transition:none */
}
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled):not(.disabled) { transform: translateY(0); }

/* focus ring on the brand instead of Bootstrap blue */
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn {
  outline: none !important;
  box-shadow: var(--tc-ring-focus) !important;
}

/* size + shape variants */
.btn-sm,
.btn-group-sm > .btn { border-radius: var(--tc-radius-sm) !important; }
.btn.btn-pill { border-radius: var(--tc-radius-pill) !important; }   /* was a fake 10px */
.btn.btn-square { border-radius: 0 !important; }

/* keep segmented groups seamless (our !important radius would break the seam) */
.btn-group > .btn { border-radius: 0 !important; }
.btn-group > .btn:first-child:not(:last-child) {
  border-top-left-radius: var(--tc-radius-md) !important;
  border-bottom-left-radius: var(--tc-radius-md) !important;
}
.btn-group > .btn:last-child:not(:first-child) {
  border-top-right-radius: var(--tc-radius-md) !important;
  border-bottom-right-radius: var(--tc-radius-md) !important;
}
.input-group > .btn { border-radius: 0 !important; }
.input-group > .btn:last-child {
  border-top-right-radius: var(--tc-radius-md) !important;
  border-bottom-right-radius: var(--tc-radius-md) !important;
}

/* --- Primary: gradient fill + brand shadow -------------------------------- */
.btn.btn-primary,
.btn.btn-outline-success0,
.btn-outline-success0 {
  background: var(--tc-grad-primary) !important;
  border-color: color-mix(in srgb, var(--tc-primary) 82%, var(--tc-black)) !important;
  color: var(--tc-white) !important;
  box-shadow: var(--tc-shadow-button-primary) !important;
}
.btn.btn-primary:hover,
.btn.btn-outline-success0:hover,
.btn-outline-success0:hover {
  background: var(--tc-grad-primary-hover) !important;
  border-color: color-mix(in srgb, var(--tc-primary) 70%, var(--tc-black)) !important;
  color: var(--tc-white) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--tc-brand-deep) 24%, transparent) !important;
}

/* --- Secondary / outline: primary text, soft fill, brand border --------- */
.btn.btn-outline-success,
.btn.btn-outline-primary,
.btn.btn-secondary,
.btn.btn-outline-secondary,
.btn-outline-success00,
.btn.btn-default,
.btn.btn-flat {
  background: var(--tc-brand-soft) !important;
  border-color: var(--tc-brand-border) !important;
  color: var(--tc-primary) !important;
  box-shadow: none !important;
}
.btn.btn-outline-success:hover,
.btn.btn-outline-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-outline-secondary:hover,
.btn-outline-success00:hover,
.btn.btn-default:hover,
.btn.btn-flat:hover {
  background: color-mix(in srgb, var(--tc-primary) 12%, var(--tc-white)) !important;
  border-color: color-mix(in srgb, var(--tc-primary) 32%, transparent) !important;
  color: var(--tc-primary) !important;
  box-shadow: var(--tc-shadow-button) !important;
}

/* --- Status-coloured solids: keep the semantic hue, add the polish ------- */
.btn.btn-danger {
  background: var(--tc-danger) !important;
  border-color: var(--tc-danger) !important;
  color: var(--tc-white) !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--tc-danger) 26%, transparent) !important;
}
.btn.btn-danger:hover {
  background: color-mix(in srgb, var(--tc-danger) 88%, var(--tc-black)) !important;
  border-color: color-mix(in srgb, var(--tc-danger) 88%, var(--tc-black)) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--tc-danger) 32%, transparent) !important;
}
.btn.btn-success {
  background: var(--tc-success) !important;
  border-color: var(--tc-success) !important;
  color: var(--tc-white) !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--tc-success) 26%, transparent) !important;
}
.btn.btn-success:hover {
  background: color-mix(in srgb, var(--tc-success) 88%, var(--tc-black)) !important;
  border-color: color-mix(in srgb, var(--tc-success) 88%, var(--tc-black)) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--tc-success) 32%, transparent) !important;
}
.btn.btn-warning {
  background: var(--tc-warning) !important;
  border-color: var(--tc-warning) !important;
  color: var(--tc-ink) !important;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--tc-warning) 28%, transparent) !important;
}
.btn.btn-warning:hover {
  background: color-mix(in srgb, var(--tc-warning) 90%, var(--tc-black)) !important;
  border-color: color-mix(in srgb, var(--tc-warning) 90%, var(--tc-black)) !important;
}

/* --- Link button ------------------------------------------------------- */
.btn.btn-link,
.btn-link {
  color: var(--tc-primary) !important;
  font-weight: var(--tc-weight-bold) !important;
  text-decoration-color: color-mix(in srgb, var(--tc-primary) 40%, transparent) !important;
  text-underline-offset: 3px;
  box-shadow: none !important;
}
.btn.btn-link:hover,
.btn-link:hover { color: var(--tc-brand-deep) !important; }

/* --- Disabled -------------------------------------------------------------- */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
.btn-check:disabled + .btn {
  opacity: 0.5 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: grayscale(0.2);
}

/* -----------------------------------------------------------------------------
 * Single-action table row -> icon button (React .admin-viewall-table__
 * action-button--icon: one action per row is an icon-only ghost button, no
 * visible label). CSS-only — font-size:0 collapses the "Edit" text node to
 * nothing; the ::before icon has its own font-size, so it's unaffected.
 * onclick="editMode(...)" / id="btnEditpr..." markup and handlers untouched.
 * Targets the system-code list pages (action_type, roles, main_type,
 * payment_term, payment_status, product, reasons, sector_type, source_info,
 * stage, ticket_status, evalcode) — every "Edit" button there is the row's
 * only action. Kept .btn-outline-success00's existing brand-soft look
 * (--tc-primary text/border) rather than React's plain white ghost, so it
 * matches the rest of this app's buttons instead of introducing a second
 * "ghost" language. */
button[id^="btnEditpr"] {
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--tc-radius-sm) !important;
}
button[id^="btnEditpr"]::before {
  font-family: "Material Design Icons";
  content: "\F3EB";   /* mdi-pencil */
  font-size: 16px;
  line-height: 1;
}

/* =============================================================================
 * BADGES / STATUS PILLS   targets: .badge + .badge-* (solid-fill, matching
 *   the existing <span class="mb-2 mr-2 badge badge-success"> usage)
 * ========================================================================== */

.badge {
  padding: 5px 10px !important;
  border-radius: var(--tc-radius-pill) !important;
  font-size: var(--tc-text-xs) !important;          /* 10px */
  font-weight: var(--tc-weight-black) !important;
  line-height: 1.4 !important;
  letter-spacing: var(--tc-tracking-wide) !important;
  text-transform: uppercase !important;
  vertical-align: middle;
}
.btn .badge { top: 0 !important; }

.badge.badge-success  { background: var(--tc-success) !important; color: var(--tc-white) !important; }
.badge.badge-danger   { background: var(--tc-danger)  !important; color: var(--tc-white) !important; }
.badge.badge-info     { background: var(--tc-info)    !important; color: var(--tc-white) !important; }
.badge.badge-warning  { background: var(--tc-warning) !important; color: var(--tc-ink)  !important; }
.badge.badge-primary  { background: var(--tc-primary) !important; color: var(--tc-white) !important; }  /* was blue */
.badge.badge-purple   { background: var(--tc-secondary-indigo) !important; color: var(--tc-white) !important; }
.badge.badge-dark     { background: var(--tc-ink)    !important; color: var(--tc-white) !important; }
.badge.badge-secondary{ background: var(--tc-text-secondary) !important; color: var(--tc-white) !important; }
.badge.badge-light    { background: var(--tc-brand-soft) !important; color: var(--tc-brand-deep) !important; }
.badge.badge-default,
.badge:not([class*="badge-"]) {
  background: var(--tc-surface-3) !important;
  color: var(--tc-ink-soft) !important;
  box-shadow: inset 0 0 0 1px var(--tc-border-soft) !important;
}

/* =============================================================================
 * CARDS   targets: .card, .card-default(67), .card-mini(33), .dash-card,
 *   .card-header, .box
 *   NOTE: ui-interactions.css owns .ec-dash-row .dash-card hover (transform +
 *   box-shadow) — so dash cards are excluded from our shadow overrides.
 * ========================================================================== */

.card {
  border-radius: var(--tc-corner-2xl) !important;   /* 22 22 22 7 */
  border: 1px solid var(--tc-border-subtle) !important;
  background: var(--tc-surface) !important;
}
.card:not(.dash-card):not(.card-mini) {
  box-shadow: var(--tc-shadow-soft) !important;
}

/* main panel card — bigger radius + a real shadow, corners matched on header/footer */
.card.card-default,
.card-default {
  border-radius: var(--tc-corner-3xl) !important;   /* 24 24 24 8 */
  border-color: var(--tc-border-subtle) !important;
  box-shadow: var(--tc-shadow-md) !important;
}
.card-default > .card-header:first-child,
.card-default > .card-header-border-bottom:first-child {
  border-top-left-radius: var(--tc-radius-3xl) !important;
  border-top-right-radius: var(--tc-radius-3xl) !important;
}
.card-default > .card-footer:last-child {
  border-bottom-right-radius: var(--tc-radius-3xl) !important;
  border-bottom-left-radius: 8px !important;
}

/* mini / stat cards */
.card-mini {
  border-radius: var(--tc-corner-2xl) !important;
  border: 1px solid var(--tc-border-subtle) !important;
}
.card-mini:not(.dash-card) { box-shadow: var(--tc-shadow-soft) !important; }

.dash-card {
  border-radius: var(--tc-corner-xl) !important;
  border: 1px solid var(--tc-border-subtle) !important;
  background:
    linear-gradient(145deg,
      var(--tc-white),
      color-mix(in srgb, var(--tc-primary) 5%, var(--tc-white))) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--tc-brand-deep) 7%, transparent) !important;
  transition: var(--tc-transition) !important;
}
.dash-card:hover {
  border-color: var(--tc-brand-border) !important;
  box-shadow: var(--tc-shadow-md) !important;
}
.dash-card > button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.dash-card .card-body,
.dash-card .crd-bdy {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "value  icon"
    "label  icon";
  align-items: start;
  column-gap: var(--tc-space-3);
  row-gap: 4px;
  padding: var(--tc-space-4) !important;
  min-height: 112px;
}
.dash-card .card-body > div:not(.alert) { display: contents; }

.dash-card .card-body h2,
.dash-card .card-body .h2 {
  grid-area: value;
  margin: 0 0 2px !important;
  color: var(--tc-ink) !important;
  font-size: var(--tc-text-xl) !important;
  font-weight: var(--tc-weight-black) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}
.dash-card .card-body p {
  grid-area: label;
  margin: 0 !important;
  color: var(--tc-ink) !important;
  font-size: var(--tc-text-sm) !important;
  font-weight: var(--tc-weight-extra) !important;
  letter-spacing: var(--tc-tracking-wide) !important;
  text-transform: uppercase;
  line-height: 1.4 !important;
}
.dash-card .card-body span.mdi,
.dash-card .card-body > span {
  grid-area: icon;
  position: static !important;
  inset: auto !important;
  align-self: center;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--tc-corner-lg) !important;
  border: 1px solid var(--tc-brand-border) !important;
  background: color-mix(in srgb, var(--tc-primary) 12%, var(--tc-white)) !important;
  color: var(--tc-brand-deep) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.dash-card.card-1 .card-body { min-height: 0; }
.dash-card.card-1 .card-body h2,
.dash-card.card-1 .card-body .h2 { font-size: var(--tc-text-lg) !important; }

/* headers / titles */
.card-header,
.card-default > .card-header,
.card .card-header {
  background: var(--tc-surface) !important;
  border-bottom: 1px solid var(--tc-border-soft) !important;
}
.card .card-header h2,
.card .card-header .h2,
.card-default .card-header h2,
.card-default .card-header .h2 {
  color: var(--tc-ink) !important;
  font-size: var(--tc-text-lg) !important;
  font-weight: var(--tc-weight-extra) !important;
  letter-spacing: -0.01em !important;
}

/* generic .box container */
.box {
  border-radius: var(--tc-corner-2xl) !important;
  border: 1px solid var(--tc-border-subtle) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow-soft) !important;
}

/* =============================================================================
 * FORM CONTROLS   ported from React .admin-input / .admin-drawer__field
 *   Covers every field styling path in the admin:
 *     .form-control(123) .form-control0(148) .form-select
 *     custom classes: input/select/textarea .brdme .inputme .goDFocus
 *     wrappers: .field-input > * , .form-field-input *
 *     bare input/select/textarea in .ec-content-wrapper and .modal-body
 *     Tom Select (.ts-wrapper box)
 *   Sizing (height / width / inline styles) left untouched — box look only.
 * ========================================================================== */
.form-control:not(.btn),
.form-control0:not(.btn),
.form-select,
input.brdme:not(.btn), select.brdme, textarea.brdme,
input.inputme:not(.btn), select.inputme, textarea.inputme,
input.goDFocus:not(.btn), select.goDFocus, textarea.goDFocus,
.field-input > input:not(.btn), .field-input > select, .field-input > textarea,
.form-field-input input:not(.btn), .form-field-input select, .form-field-input textarea,
.ec-content-wrapper textarea,
.ec-content-wrapper select,
.modal-body textarea,
.modal-body select,
.ec-content-wrapper input:not([type]):not(.btn),
.modal-body input:not([type]):not(.btn),
.ec-content-wrapper input[type="text"]:not(.btn), .modal-body input[type="text"]:not(.btn),
.ec-content-wrapper input[type="email"], .modal-body input[type="email"],
.ec-content-wrapper input[type="password"], .modal-body input[type="password"],
.ec-content-wrapper input[type="search"], .modal-body input[type="search"],
.ec-content-wrapper input[type="tel"], .modal-body input[type="tel"],
.ec-content-wrapper input[type="url"], .modal-body input[type="url"],
.ec-content-wrapper input[type="number"], .modal-body input[type="number"],
.ec-content-wrapper input[type="date"], .modal-body input[type="date"],
.ec-content-wrapper input[type="datetime-local"], .modal-body input[type="datetime-local"],
.ec-content-wrapper input[type="month"], .modal-body input[type="month"],
.ec-content-wrapper input[type="week"], .modal-body input[type="week"],
.ec-content-wrapper input[type="time"], .modal-body input[type="time"] {
  border: 1px solid var(--tc-border-input) !important;
  border-radius: var(--tc-corner-md) !important;
  padding: var(--tc-space-2) var(--tc-space-3) !important;   /* 8 12 — React .admin-input */
  background-color: color-mix(in srgb, var(--tc-primary) 2%, var(--tc-white)) !important;
  color: var(--tc-ink) !important;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--tc-brand-deep) 3%, transparent) !important;
  transition:
    border-color var(--tc-duration) var(--tc-ease),
    background-color var(--tc-duration) var(--tc-ease),
    box-shadow var(--tc-duration) var(--tc-ease) !important;
}

.form-control:not(.btn):focus,
.form-control0:not(.btn):focus,
.form-select:focus,
input.brdme:not(.btn):focus, select.brdme:focus, textarea.brdme:focus,
input.goDFocus:not(.btn):focus, select.goDFocus:focus, textarea.goDFocus:focus,
.field-input > input:not(.btn):focus, .field-input > select:focus, .field-input > textarea:focus,
.form-field-input input:not(.btn):focus, .form-field-input select:focus, .form-field-input textarea:focus,
.ec-content-wrapper textarea:focus,
.ec-content-wrapper select:focus,
.modal-body textarea:focus,
.modal-body select:focus,
.ec-content-wrapper input:not([type]):not(.btn):focus,
.modal-body input:not([type]):not(.btn):focus,
.ec-content-wrapper input[type="text"]:not(.btn):focus, .modal-body input[type="text"]:not(.btn):focus,
.ec-content-wrapper input[type="email"]:focus, .modal-body input[type="email"]:focus,
.ec-content-wrapper input[type="password"]:focus, .modal-body input[type="password"]:focus,
.ec-content-wrapper input[type="search"]:focus, .modal-body input[type="search"]:focus,
.ec-content-wrapper input[type="tel"]:focus, .modal-body input[type="tel"]:focus,
.ec-content-wrapper input[type="url"]:focus, .modal-body input[type="url"]:focus,
.ec-content-wrapper input[type="number"]:focus, .modal-body input[type="number"]:focus,
.ec-content-wrapper input[type="date"]:focus, .modal-body input[type="date"]:focus,
.ec-content-wrapper input[type="datetime-local"]:focus, .modal-body input[type="datetime-local"]:focus,
.ec-content-wrapper input[type="time"]:focus, .modal-body input[type="time"]:focus {
  outline: none !important;
  border: 1px solid var(--tc-primary) !important;
  background-color: var(--tc-white) !important;
  box-shadow: var(--tc-ring-focus) !important;
}

.form-control:not(.btn)::placeholder,
.form-control0:not(.btn)::placeholder,
input.brdme:not(.btn)::placeholder, textarea.brdme::placeholder,
.field-input > input:not(.btn)::placeholder,
.form-field-input input:not(.btn)::placeholder,
.ec-content-wrapper textarea::placeholder,
.ec-content-wrapper input:not(.btn)::placeholder,
.modal-body input:not(.btn)::placeholder,
.modal-body textarea::placeholder {
  color: var(--tc-text-secondary) !important;
  opacity: 1;
}

/* Disabled / read-only — clearly-distinct grey fill + muted text + hairline
   border so it reads as inactive against a white card AND against the faintly
   tinted active field. Single rule; the .field-input.blur-item …pe-none
   selectors are folded in here, not a rival. */
.form-control:not(.btn):disabled, .form-control:not(.btn)[readonly],
.form-control0:not(.btn):disabled, .form-control0:not(.btn)[readonly],
.form-select:disabled,
input.brdme:not(.btn):disabled, input.brdme:not(.btn)[readonly],
select.brdme:disabled, textarea.brdme[readonly],
.field-input > input:not(.btn):disabled, .field-input > input:not(.btn)[readonly],
.field-input > select:disabled,
.field-input.blur-item input.pe-none,
.field-input.blur-item select.pe-none,
.field-input.blur-item textarea.pe-none,
.ts-wrapper.disabled {
  background-color: color-mix(in srgb, var(--tc-text-secondary) 14%, var(--tc-white)) !important;
  border-color: color-mix(in srgb, var(--tc-text-secondary) 28%, transparent) !important;
  color: var(--tc-text-secondary) !important;
  -webkit-text-fill-color: var(--tc-text-secondary) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
}

/* Form <select>s get ONE brand chevron; native OS arrow suppressed so no page
   shows a double arrow. Scoped to form contexts — DataTables length menus and
   stray selects keep their native arrow. (.posrv > select keeps its own
   position further down; Tom Select wrappers are <div>, unaffected.) */
.form-select,
select.form-control,
select.form-control0,
.field-input select,
.form-field-input select,
.form-group select,
select.custom-select-arrow,
select.brdme,
select.goDFocus,
select.inputme {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364185c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 11px !important;
  padding-right: 34px !important;
}

/* -----------------------------------------------------------------------------
 * Kill Ekka's blue focus ring (rgba(136,170,243,.25)). Ekka sets it
 * non-!important on .form-control/.form-control0/.form-select/textarea/
 * .form-check-input :focus, so !important here wins regardless of specificity
 * and catches anything the box rule above missed.
 * --------------------------------------------------------------------------- */
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  box-shadow: var(--tc-ring-focus) !important;
}
input[type="checkbox"]:focus,
input[type="radio"]:focus,
.form-check-input:focus,
.checks:focus,
.ts-control:focus,
.ts-control input:focus,
.ts-wrapper input:focus {
  border-color: var(--tc-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Checkboxes / radios — brand accent (native) + Ekka's appearance:none box */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--tc-primary);
}
.form-check-input:checked {
  background-color: var(--tc-primary) !important;
  border-color: var(--tc-primary) !important;
}

/* -----------------------------------------------------------------------------
 * Tom Select — box matches a native field; .ts-control is flex-centred inside
 * .ts-wrapper so Ekka's top:10px offset hack is no longer needed.
 * --------------------------------------------------------------------------- */
.ts-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px !important;
  border: 1px solid var(--tc-border-input) !important;
  border-radius: var(--tc-corner-md) !important;
  background-color: color-mix(in srgb, var(--tc-primary) 2%, var(--tc-white)) !important;
  transition:
    border-color var(--tc-duration) var(--tc-ease),
    box-shadow var(--tc-duration) var(--tc-ease) !important;
}
.ts-wrapper .ts-control {
  top: 0 !important;
  width: 100%;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
}
/* selected value stays on one line and truncates, like a native <select> */
.ts-wrapper.single .ts-control > .item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Tom Select's internal type-to-search <input> must NOT pick up the field box
   treatment (border/tint/min-height) — that's what drew a line through the
   selected value. Keep it invisible; the box is the .ts-wrapper. */
.ts-wrapper .ts-control input,
.ec-content-wrapper .ts-wrapper input,
.modal-body .ts-wrapper input,
.ts-dropdown input {
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--tc-ink) !important;
  font-size: inherit !important;
}
/* the a11y-hidden original <select> must stay 1px / borderless despite the
   broad select rules above */
select.ts-hidden-accessible,
.ts-hidden-accessible {
  min-height: 0 !important;
  height: 1px !important;
  border: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.ts-wrapper.focus {
  border-color: var(--tc-primary) !important;
  background-color: var(--tc-white) !important;
  box-shadow: var(--tc-ring-focus) !important;
}
.ts-wrapper.single .ts-control {
  padding-right: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364185c' d='M6 8.825c-.2 0-.4-.1-.5-.25l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0L6 6.975l2.7-2.8c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.3 3.3c-.1.15-.3.25-.5.25z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  background-size: 11px !important;
}
.ts-dropdown {
  margin-top: 4px;
  border: 1px solid var(--tc-border-subtle) !important;
  border-radius: var(--tc-corner-md) !important;
  box-shadow: var(--tc-shadow-soft) !important;
  background: var(--tc-surface) !important;
  overflow: hidden;
  max-width: 100vw;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 8px 12px !important;
  color: var(--tc-ink) !important;
}
.ts-dropdown .no-results,
.ts-dropdown .create {
  color: var(--tc-text-secondary) !important;
}
.ts-dropdown .option:hover {
  background-color: var(--tc-state-hover) !important;
}
.ts-dropdown .option.active,
.ts-dropdown .option.selected {
  background-color: var(--tc-brand-soft) !important;
  color: var(--tc-primary) !important;
}

/* fields with an overlay type-icon (request_details.php / addticket.php:
   .posrv wraps a label + field + span.office / span.kkiusers) */
.posrv > select,
.posrv > select.form-control,
.posrv > select.form-control0 {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364185c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 9px !important;
  padding-right: 46px !important;
}
.posrv > input:not(.btn):not([type="hidden"]),
.posrv .ts-wrapper {
  padding-right: 34px !important;
}
.posrv .office,
.posrv .kkiusers {
  position: absolute;
  top: 50% !important;
  bottom: auto !important;
  left: auto !important;
  right: 32px !important;
  transform: translateY(-50%);
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--tc-text-secondary) !important;
  pointer-events: none;
  z-index: 3;
}
.posrv .office.kkiusers,
.posrv .kkiusers {
  right: 12px !important;
}

/* --- centralised from per-page inline <style> blocks ------------------------- */

/* height util that was duplicated inline on 11 pages */
.inputme { height: 40px; }

/* dense-grid compact field variant — same visual language as the main FORM
   CONTROLS treatment, just a smaller scale (replaces reports/request_details/
   addticket's hardcoded .form-control0 { font-size:12px; padding:0 }) */
.tc-field-compact {
  border: 1px solid var(--tc-border-input) !important;
  border-radius: var(--tc-corner-md) !important;
  background-color: color-mix(in srgb, var(--tc-primary) 2%, var(--tc-white)) !important;
  color: var(--tc-ink) !important;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--tc-brand-deep) 3%, transparent) !important;
  padding: var(--tc-space-1) var(--tc-space-2) !important;
  font-size: var(--tc-text-smd) !important;
}
.tc-field-compact:focus {
  outline: none !important;
  border: 1px solid var(--tc-primary) !important;
  background-color: var(--tc-white) !important;
  box-shadow: var(--tc-ring-focus) !important;
}

/* JS-toggled "open" state on the fake search-selects (reports / userList-code):
   match the real focus treatment instead of a bare #9d258f border */
.dropdown-active {
  border: 1px solid var(--tc-primary) !important;
  box-shadow: var(--tc-ring-focus) !important;
}

/* Drop Ekka's hard 3px magenta bar on the left of every field wrapper —
   not part of the React field language. */
.form-field-wrapper::before {
  display: none !important;
}

/* Segmented radio-pill toggle — was copy-pasted inline on 4 pages
   (contact_profile / comp_profile live; activities / reports were dead copies).
   Also used as a class on the task "is_completed" <select>s. */
.radio-pill,
.radio_container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-brand-faint);
  box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
}
.radio-pill input[type="radio"],
.radio_container input[type="radio"] {
  appearance: none;
  display: none;
}
.radio-pill .label,
.radio_container .label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 34px;
  text-align: center;
  overflow: hidden;
  border-radius: var(--tc-radius-pill);
  background: transparent;
  font-size: var(--tc-text-smd);
  color: var(--tc-text-secondary);
  transition: 0.3s linear;
  cursor: pointer;
}
.radio-pill input[type="radio"]:checked + label,
.radio_container input[type="radio"]:checked + label {
  background: var(--tc-primary);
  color: var(--tc-white);
  font-weight: var(--tc-weight-black);
  transition: 0.3s;
}

/* =============================================================================
 * FORM FIELDS — MOBILE  (centralised from #ContactF / #team_div per-page blocks)
 * ========================================================================== */
@media (max-width: 767.98px) {
  /* 44px min tap target + 16px to stop iOS zoom */
  .form-control,
  .form-control0,
  .form-select,
  input.brdme, select.brdme, textarea.brdme,
  input.inputme, select.inputme, textarea.inputme,
  input.goDFocus, select.goDFocus, textarea.goDFocus,
  .field-input > input, .field-input > select, .field-input > textarea,
  .form-field-input input, .form-field-input select, .form-field-input textarea,
  .ec-content-wrapper textarea, .ec-content-wrapper select,
  .modal-body textarea, .modal-body select,
  .h38, .inputme,
  .ts-wrapper {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* stack label above field */
  .form-row0 {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 1rem;
  }
  .form-lbl0,
  .form-lbl00 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 0 0.35rem !important;
    font-size: 14px;
    font-weight: var(--tc-weight-semibold);
  }
  .form-field-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .form-field-input > input,
  .form-field-input > select,
  .form-field-input > textarea,
  .form-field-input .field-input > input,
  .form-field-input .field-input > select,
  .form-field-input .field-input > textarea,
  .form-field-input .ts-wrapper,
  .form-field-input .ts-control {
    width: 100% !important;
  }

  .radio-pill,
  .radio_container {
    flex-wrap: wrap;
    border-radius: 12px;
    gap: 0.25rem;
  }
}
@media (max-width: 374.98px) {
  .radio-pill .label,
  .radio_container .label {
    width: 64px;
    font-size: 11px;
  }
}

/* =============================================================================
 * jQuery UI DATEPICKER   (#dateDays on addticket / old_details / request_details)
 * -----------------------------------------------------------------------------
 * No React source. Designed to match the reskin (rounded, soft shadow,
 * brand header, pill-ish day cells). jQuery UI's smoothness theme loads from
 * a CDN AFTER this file, so every property needs !important.
 * JUDGMENT CALLS (flag for review):
 *   - header uses --tc-grad-header (dark magenta) + white text
 *   - prev/next arrows redrawn as CSS chevrons (the .ui-icon sprite can't be
 *     recoloured cleanly)
 *   - day cells centre-aligned (smoothness right-aligns) and given
 *     --tc-corner-md so hover/selected read as rounded chips
 *   - "today" = --tc-brand-soft fill (chose the fill over a dot indicator)
 *   - "selected" = --tc-primary fill + --tc-corner-md (chose the field corner
 *     over a full pill)
 *   - popup width bumped 17em -> 18.5em so days breathe
 * ========================================================================== */
.ui-datepicker {
  width: 18.5em !important;
  padding: 6px !important;
  border: 1px solid var(--tc-border-subtle) !important;
  border-radius: var(--tc-corner-xl) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow-lg) !important;
  font-family: var(--tc-font-sans) !important;
  font-size: 13px !important;
  color: var(--tc-ink) !important;
  z-index: 1060 !important;
}
.ui-datepicker .ui-datepicker-header {
  position: relative !important;
  padding: 8px 6px !important;
  margin-bottom: 6px !important;
  border: 0 !important;
  border-radius: var(--tc-corner-md) !important;
  background: var(--tc-grad-header) !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.4em !important;
  line-height: 1.9em !important;
  text-align: center !important;
  font-weight: var(--tc-weight-bold) !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-title select {
  color: var(--tc-ink) !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  font: inherit !important;
  margin: 0 2px !important;
}
/* prev / next — hide the sprite icon, draw a clean white chevron */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute !important;
  top: 6px !important;
  width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: var(--tc-radius-sm) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  cursor: pointer !important;
}
.ui-datepicker .ui-datepicker-prev { left: 6px !important; }
.ui-datepicker .ui-datepicker-next { right: 6px !important; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 6px !important;
  left: auto !important;
  right: auto !important;
  background: rgba(255, 255, 255, 0.28) !important;
}
.ui-datepicker .ui-datepicker-prev-hover { left: 6px !important; }
.ui-datepicker .ui-datepicker-next-hover { right: 6px !important; }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: none !important;
}
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 0 2px 2px !important;
}
.ui-datepicker .ui-datepicker-prev::before {
  transform: translate(-30%, -50%) rotate(45deg) !important;
}
.ui-datepicker .ui-datepicker-next::before {
  transform: translate(-70%, -50%) rotate(-135deg) !important;
}
/* weekday header row */
.ui-datepicker table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; }
.ui-datepicker th {
  padding: 6px 2px !important;
  border: 0 !important;
  color: var(--tc-text-secondary) !important;
  font-size: 10px !important;
  font-weight: var(--tc-weight-bold) !important;
  letter-spacing: var(--tc-tracking-wide) !important;
  text-transform: uppercase !important;
}
.ui-datepicker td { padding: 1px !important; border: 0 !important; }
.ui-datepicker td span,
.ui-datepicker td a {
  display: block !important;
  padding: 7px 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: var(--tc-radius-md) !important;
  background: transparent !important;
  color: var(--tc-ink) !important;
  font-weight: var(--tc-weight-semibold) !important;
}
.ui-datepicker td a.ui-state-hover {
  background: var(--tc-state-hover) !important;
  color: var(--tc-ink) !important;
}
.ui-datepicker td .ui-state-highlight {          /* today */
  background: var(--tc-brand-soft) !important;
  color: var(--tc-primary) !important;
  font-weight: var(--tc-weight-bold) !important;
}
.ui-datepicker td .ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a {  /* selected */
  background: var(--tc-primary) !important;
  color: #fff !important;
  font-weight: var(--tc-weight-bold) !important;
}
.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-state-disabled span {       /* past dates + disabled Fridays */
  opacity: 0.4 !important;
  color: var(--tc-text-secondary) !important;
  background: transparent !important;
  cursor: not-allowed !important;
  font-weight: var(--tc-weight-semibold) !important;
}

/* =============================================================================
 * intl-tel-input v11.0.9   (#phone on old_details.php, separateDialCode:true)
 * -----------------------------------------------------------------------------
 * No React source. NB: v11.0.9 uses the OLD class names — .intl-tel-input,
 * .flag-container, .selected-flag, .country-list, .country — NOT the .iti__*
 * names from newer versions. There is no country-search box in v11.
 * addticket.php loads the assets but never inits it, so this only affects
 * old_details.php. Its CSS loads before this file, so !important is belt-and-
 * braces, not strictly required.
 * JUDGMENT CALLS (flag for review):
 *   - the dial-code / flag button gets a faint --tc-surface-2 fill + a
 *     --tc-border-input right seam so it reads as an attached input-group
 *     prefix rather than a plain overlay (alternative: fully transparent)
 *   - country list uses --tc-corner-lg + --tc-shadow-lg (matches dropdown
 *     menus elsewhere); overflow-y set to auto (was `scroll`, always-on bar)
 * ========================================================================== */
.intl-tel-input.separate-dial-code .selected-flag {
  width: 52px !important;
  background: var(--tc-surface-2) !important;
  border-right: 1px solid var(--tc-border-input) !important;
  border-radius: var(--tc-radius-md) 0 0 var(--tc-radius-md) !important;
}
.intl-tel-input.separate-dial-code .flag-container:hover .selected-flag {
  background: color-mix(in srgb, var(--tc-primary) 6%, var(--tc-white)) !important;
}
.intl-tel-input.separate-dial-code .selected-dial-code {
  padding-left: 6px !important;
  color: var(--tc-text-secondary) !important;
  font-weight: var(--tc-weight-semibold) !important;
}
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code input[type="text"],
.intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 62px !important;
}
.intl-tel-input .selected-flag .iti-arrow {
  border-top-color: var(--tc-text-secondary) !important;
}
.intl-tel-input .selected-flag .iti-arrow.up {
  border-bottom-color: var(--tc-text-secondary) !important;
}
.intl-tel-input .country-list {
  margin-top: 4px !important;
  border: 1px solid var(--tc-border-subtle) !important;
  border-radius: var(--tc-corner-lg) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow-lg) !important;
  overflow-y: auto !important;
  max-height: 220px !important;
}
.intl-tel-input .country-list .country {
  padding: 8px 12px !important;
  color: var(--tc-ink) !important;
}
.intl-tel-input .country-list .country.highlight {
  background: var(--tc-state-hover) !important;
}
.intl-tel-input .country-list .country .dial-code {
  color: var(--tc-text-secondary) !important;
}
.intl-tel-input .country-list .divider {
  border-bottom: 1px solid var(--tc-border-subtle) !important;
}

/* =============================================================================
 * DATATABLES   (DataTables 1.10/1.11 + dataTables.bootstrap5 integration)
 * -----------------------------------------------------------------------------
 * Grep of the admin PHP:
 *   - tables are #responsive-data-table[/1/2/000/P/A/D/Tick/Ev]; <table> classes
 *     are just `table` / `tablenNr` / `table-striped o-tbl`.
 *   - init is mostly bare .DataTable() (Bootstrap-5 defaults) or with
 *     order / scrollX:true / columnDefs / drawCallback.
 *   - Responsive extension CSS+JS are loaded but NOT activated anywhere
 *     (no `responsive:true`, no .responsive/.dt-responsive class; several
 *     configs pass `responsive:false`). The .dtr-* rules below are therefore
 *     defensive only.
 *   - DT wraps everything in .dataTables_wrapper, usually nested inside an
 *     Ekka .card-default > .card-body.
 * CSS only — no PHP / no DataTables config touched.
 * ========================================================================== */

/* --- Wrapper: a contained data-panel ------------------------------------- */
.dataTables_wrapper {
  padding: var(--tc-space-4) !important;
  background: var(--tc-surface) !important;
  border: 1px solid var(--tc-border-subtle) !important;
  border-radius: var(--tc-corner-xl) !important;   /* 19 19 19 6 */
  box-shadow: var(--tc-shadow-soft) !important;
}
/* nested in an Ekka card the card already elevates — go flat + faint tint */
.card .dataTables_wrapper,
.card-body .dataTables_wrapper {
  box-shadow: none !important;
  background: var(--tc-surface-3) !important;
  border-color: var(--tc-border-soft) !important;
}
.dataTables_wrapper > .row { align-items: center; }
.dataTables_wrapper > .row:first-child { margin-bottom: var(--tc-space-3); }
.dataTables_wrapper > .row:last-child { margin-top: var(--tc-space-3); }

/* --- Length menu + search: match the established input styling ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input.form-control,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length select.form-select {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--tc-border-input) !important;
  border-radius: var(--tc-corner-md) !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink) !important;
  box-shadow: none !important;
  transition: var(--tc-transition) !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none !important;
  border-color: var(--tc-primary) !important;
  box-shadow: var(--tc-ring-focus) !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--tc-text-secondary) !important;
  font-size: var(--tc-text-sm) !important;
  font-weight: var(--tc-weight-bold) !important;
}

/* --- Header ------------------------------------------------------------- */
table.dataTable thead th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  padding: var(--tc-space-3) var(--tc-space-3-5) !important;
  background: var(--tc-surface-head) !important;
  color: #000 !important;
  font-size: var(--tc-text-2xs) !important;            /* 9px overline */
  font-weight: var(--tc-weight-black) !important;      /* 900 */
  letter-spacing: var(--tc-tracking-wider) !important; /* 0.08em */
  text-transform: uppercase !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--tc-border) !important;
  white-space: nowrap;
}
table.dataTable thead th:first-child {
  border-start-start-radius: var(--tc-radius-md);
  border-end-start-radius: var(--tc-radius-md);
}
table.dataTable thead th:last-child {
  border-start-end-radius: var(--tc-radius-md);
  border-end-end-radius: var(--tc-radius-md);
}

/* sort arrows — tint, keep positions */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
  color: var(--tc-text-secondary) !important;
  opacity: 0.3 !important;
}
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::after {
  color: var(--tc-primary) !important;
  opacity: 1 !important;
}

/* --- Rows ------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tc-ink);
  --bs-table-border-color: var(--tc-border-subtle);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: var(--tc-surface-2);
  --bs-table-striped-color: var(--tc-ink);
  --bs-table-hover-bg: var(--tc-surface-hover);
  --bs-table-hover-color: var(--tc-ink);
}
table.dataTable tbody td,
table.dataTable tbody th {
  padding: var(--tc-space-3) var(--tc-space-3-5) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--tc-border-soft) !important;   /* subtle read too faint in-page */
  color: var(--tc-ink) !important;
  vertical-align: middle !important;
}
table.dataTable tbody tr:last-child > td,
table.dataTable tbody tr:last-child > th { border-bottom: 0 !important; }
table.dataTable tbody tr { transition: background var(--tc-duration) var(--tc-ease); }
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > th { background: var(--tc-surface-hover) !important; }
table.dataTable.stripe tbody tr.odd > td,
table.dataTable.stripe tbody tr.odd > th,
table.dataTable.display tbody tr.odd > td { background-color: var(--tc-surface-2) !important; }

/* --- Info text ------------------------------------------------------- */
.dataTables_wrapper .dataTables_info {
  padding-top: var(--tc-space-2) !important;
  color: var(--tc-text-secondary) !important;
  font-size: var(--tc-text-sm) !important;
}

/* --- Pagination ---------------------------------------------------------- */
.dataTables_wrapper .dataTables_paginate ul.pagination {
  gap: 4px;
  margin: 0 !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  border: 1px solid var(--tc-border-subtle) !important;
  border-radius: var(--tc-radius-md) !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink-soft) !important;
  font-weight: var(--tc-weight-bold) !important;
  transition: var(--tc-transition) !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
  background: var(--tc-state-hover) !important;
  border-color: color-mix(in srgb, var(--tc-primary) 28%, transparent) !important;
  color: var(--tc-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  border-color: var(--tc-primary) !important;
  border-radius: var(--tc-radius-pill) !important;
  background: var(--tc-primary) !important;
  color: var(--tc-white) !important;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--tc-primary) 30%, transparent) !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  opacity: 0.45 !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink-subtle) !important;
}
.dataTables_wrapper .dataTables_paginate .page-item .page-link:focus {
  outline: none !important;
  box-shadow: var(--tc-ring-focus) !important;
}

/* --- Processing indicator --------------------------------------------- */
.dataTables_wrapper .dataTables_processing {
  border: 1px solid var(--tc-border-soft) !important;
  border-radius: var(--tc-corner-md) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow-soft) !important;
  color: var(--tc-ink-soft) !important;
}

/* --- scrollX tables (e.g. activities.php: scrollX:true) --------------- */
.dataTables_scrollHead table.dataTable { margin-bottom: 0 !important; }
.dataTables_scrollHead thead th { border-bottom: 1px solid var(--tc-border) !important; }
.dataTables_scrollBody { border: 0 !important; }
.dataTables_scrollBody table.dataTable { margin-top: 0 !important; }

/* In scroll mode DataTables sizes the inner tables to their content width, so a
 * table with little data stops short and leaves dead space on the right. Make
 * the scroll containers + inner tables fill the wrapper; with the shared
 * table-layout the columns just distribute the slack. */
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody { width: 100% !important; }
.dataTables_wrapper .dataTables_scrollHeadInner,
.dataTables_wrapper .dataTables_scrollHeadInner > table.dataTable,
.dataTables_wrapper .dataTables_scrollBody > table.dataTable { width: 100% !important; }

/* DataTables clones <thead> into .dataTables_scrollBody purely for column-width
 * sync. It is meant to be visually invisible — but our header paint (bg +
 * vertical padding + border) turned that clone into an empty tinted band under
 * the real header. Flatten it back to zero height without removing it. */
.dataTables_scrollBody > table > thead > tr > th,
.dataTables_scrollBody > table > thead > tr > td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
  color: transparent !important;
}
.dataTables_scrollBody > table > thead > tr > th:first-child,
.dataTables_scrollBody > table > thead > tr > th:last-child {
  border-radius: 0 !important;
}

/* --- Responsive extension (defensive — not active in current configs) --- */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before,
table.dataTable.dtr-column > tbody > tr > td.control::before,
table.dataTable.dtr-column > tbody > tr > th.control::before {
  border: 0 !important;
  background: var(--tc-primary) !important;
  color: var(--tc-white) !important;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tc-primary) 30%, transparent) !important;
}
table.dataTable > tbody > tr.child,
table.dataTable > tbody > tr.child:hover > td {
  background: var(--tc-surface-3) !important;
}
table.dataTable > tbody > tr.child ul.dtr-details { border: 0 !important; }
table.dataTable > tbody > tr.child ul.dtr-details > li {
  padding: var(--tc-space-2) 0 !important;
  border-bottom: 1px solid var(--tc-border-subtle) !important;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0 !important; }
.dtr-modal .dtr-modal-content {
  border-radius: var(--tc-corner-2xl) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow-lg) !important;
}
.dtr-modal .dtr-modal-close {
  border-radius: var(--tc-radius-md) !important;
  color: var(--tc-ink-soft) !important;
}

/* Horizontally-scrolling DataTables (inside a .table-responsive / the custom
   .table-responsive00, which Ekka only makes scrollable < 768px): the wrapper's
   parent does the scrolling; the .dataTables_wrapper just grows to its table's
   width so its border / tint / radius travel the full scroll extent instead of
   ending mid-scroll and letting the page scroll sideways. The length/search +
   info/pagination rows are pinned left and left-aligned so they stay usable at
   any panel width. */
.table-responsive00 {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Bootstrap's .overflow-hidden utility (ekka.css, !important) is stacked onto
   .table-responsive on several profile tabs (comp_profile / contact_profile /
   comp_code / fetch_clist_code) — it clips the table instead of letting
   .table-responsive scroll it. Give horizontal scroll back. */
.table-responsive.overflow-hidden {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.table-responsive > .dataTables_wrapper,
.table-responsive00 > .dataTables_wrapper {
  width: -moz-max-content !important;
  width: max-content !important;
  min-width: 100% !important;
}
.table-responsive > .dataTables_wrapper > .row,
.table-responsive00 > .dataTables_wrapper > .row {
  position: sticky;
  left: 0;
  z-index: 1;
  justify-content: flex-start !important;
  gap: 12px;
  background: var(--tc-surface);
}
.card .table-responsive > .dataTables_wrapper > .row,
.card-body .table-responsive > .dataTables_wrapper > .row,
.card .table-responsive00 > .dataTables_wrapper > .row,
.card-body .table-responsive00 > .dataTables_wrapper > .row {
  background: var(--tc-surface-3);
}

/* =============================================================================
 * RESPONSIVE TABLE → CARD LIST (mobile, <768px)   generic building block: any
 * DataTables-driven admin table can opt into this card list on mobile via
 * assets/js/rtable-cards.js — RtableCards.attach('#my-table', {...}). The
 * list/visibility mechanics (.rtable-cards / .rtable-desktop-only /
 * .rtable-active) stay page-agnostic; the card itself is the reusable
 * .tc-record-card component below — same class structure on every page,
 * only the config (icon/headline/status/detail fields) differs per page.
 * ========================================================================= */
.rtable-cards {
  display: none;
  margin-top: var(--tc-space-4);
}

.tc-record-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--tc-surface);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  transition: background-color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.tc-record-card:hover {
  background-color: var(--tc-surface-hover);
}
.tc-record-card:active {
  transform: scale(0.98);
  background-color: var(--tc-surface-hover);
}

/* Leading icon chip — one per PAGE (what kind of record this list is),
   not per row. Falls back to a neutral generic icon when a page doesn't
   configure one; never left blank. */
.tc-record-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 18px;
  margin-top: 1px;
  background-color: color-mix(in srgb, var(--tc-primary) 14%, transparent);
  color: var(--tc-primary);
}

.tc-record-card__body {
  flex: 1;
  min-width: 0;
}

.tc-record-card__headline-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.tc-record-card__id {
  font-size: 11px;
  color: var(--tc-text-secondary);
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.tc-record-card__headline {
  font-weight: 900;
  font-size: 14px;
  color: var(--tc-ink);
  line-height: 1.4;
  min-width: 0;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.tc-record-card__flag-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--tc-danger);
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Status/priority pill — optional; only rendered when a page configures a
   status field. Not every table has one, and that's fine. */
.tc-record-card__status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--tc-radius-pill);
  margin-top: 6px;
  white-space: nowrap;
}

/* Remaining columns — always rendered as de-emphasized label:value rows,
   regardless of how many there are or what they contain. Fully generic,
   no per-page decision needed here. */
.tc-record-card__details {
  margin-top: 2px;
}
.tc-record-card__detail {
  font-size: 12px;
  color: var(--tc-text-secondary);
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-record-card__detail-label {
  font-weight: 700;
  color: var(--tc-ink);
}

@keyframes tcRecordCardFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tc-record-card--enter {
  animation: tcRecordCardFadeIn 0.3s ease both;
}

@media (max-width: 767.98px) {
  .rtable-cards {
    display: block !important;
  }
  .rtable-desktop-only {
    display: none !important;
  }
  /* Undo the desktop "grow to max-content" scroll-panel trick (line ~1861)
     for tables whose mobile view is cards, not horizontal scroll — with the
     table hidden, max-content would otherwise size the wrapper to the widest
     nowrap detail/headline (.tc-record-card__detail/__headline) and scroll
     the page sideways instead of just wrapping the cards to 100% width. */
  .dataTables_wrapper.rtable-active {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =============================================================================
 * TEXT COLOUR
 * -----------------------------------------------------------------------------
 * Primary copy = pure #000. Only "notes" and very secondary text stay muted
 * (--tc-ink-soft / --tc-text-secondary / .text-muted / small / labels / th /
 * DataTables info). Scoped to .ec-content-wrapper so sidebar + topbar chrome
 * are untouched; links keep their brand colour.
 * ========================================================================== */

/* Block/cell-level only — inline <span>/<b> inherit this, so text that carries
 * its own colour (status text, badges, inline style="color:…") is left alone. */
.ec-content-wrapper,
.ec-content-wrapper p,
.ec-content-wrapper li,
.ec-content-wrapper dd,
.ec-content-wrapper dt,
.ec-content-wrapper h1, .ec-content-wrapper h2, .ec-content-wrapper h3,
.ec-content-wrapper h4, .ec-content-wrapper h5, .ec-content-wrapper h6,
.ec-content-wrapper .h1, .ec-content-wrapper .h2, .ec-content-wrapper .h3,
.ec-content-wrapper .h4, .ec-content-wrapper .h5, .ec-content-wrapper .h6,
.ec-content-wrapper .card-body,
.ec-content-wrapper .card-body p,
.ec-content-wrapper .card .card-header h2,
.ec-content-wrapper .form-control,
.ec-content-wrapper .form-select,
.ec-content-wrapper .breadcrumb,
.ec-content-wrapper .breadcrumbs,
.ec-content-wrapper .card-title,
.ec-content-wrapper .card-header,
.ec-content-wrapper td,
.ec-content-wrapper th,
table.dataTable tbody td,
table.dataTable tbody th,
table.dataTable thead th,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  color: #000 !important;
}

/* The only things that stay muted — genuinely secondary / meta text */
.ec-content-wrapper .text-muted,
.ec-content-wrapper .text-secondary,
.ec-content-wrapper small,
.ec-content-wrapper .small,
.ec-content-wrapper .card-subtitle,
.ec-content-wrapper .card-note,
.ec-content-wrapper .note,
.ec-content-wrapper .notes,
.ec-content-wrapper [class*="-note"],
.ec-content-wrapper .dataTables_info,
.ec-content-wrapper .dataTables_filter label,
.ec-content-wrapper .dataTables_length label {
  color: var(--tc-text-secondary) !important;
}

/* Form-field labels — pure #000 text, kept bold + lightly tracked. Bare
   <label> only inside a <form>, never the radio-pill (.label) or a checkbox
   label (.form-check-label). */
.ec-content-wrapper .form-label,
.ec-content-wrapper .col-form-label,
.ec-content-wrapper .form-lbl,
.ec-content-wrapper .form-lbl0,
.ec-content-wrapper .form-lbl00,
.ec-content-wrapper .form_label,
.ec-content-wrapper form label:not(.label):not(.form-check-label),
.modal-body form label:not(.label):not(.form-check-label) {
  color: #000 !important;
  font-weight: var(--tc-weight-extra) !important;
  letter-spacing: var(--tc-tracking-wide) !important;
}

/* links keep brand colour, not black */
.ec-content-wrapper a:not(.btn):not(.page-link):not(.nav-link):not(.sidenav-item-link) {
  color: var(--tc-primary);
}

/* =============================================================================
 * MODALS  —  SweetAlert 1.1.3 (legacy swal()) + Bootstrap .modal
 * -----------------------------------------------------------------------------
 * swal() usage in the admin PHP: mostly swal("Title","text","warning") field
 * validations, swal("Warning","…","error") auth errors, and swal({…}) confirms
 * with type:"success"/"warning", showCancelButton, confirmButtonText 'Ok'/'Yes',
 * cancelButtonText 'No'. No input prompts in use (styled defensively anyway).
 *
 * header.php RE-loads sweetalert.min.css *after* this file, and ekka.css already
 * carries `.sweet-alert button{background:#9d258f!important}` + an h2 override —
 * so every SweetAlert rule here is !important and wins on source order.
 * CSS only: positioning / negative margins / animation shapes are left intact.
 * ========================================================================== */

/* --- Overlay ---------------------------------------------------------------- */
.sweet-overlay {
  background: color-mix(in srgb, var(--tc-brand-deep) 55%, transparent) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
}

/* --- Box ----------------------------------------------------------------- */
.sweet-alert {
  padding: 22px 22px 18px !important;
  border-radius: var(--tc-corner-2xl) !important;
  background: var(--tc-surface) !important;
  box-shadow: var(--tc-shadow-xl) !important;
  font-family: inherit !important;
}
.sweet-alert h2 {
  margin: 8px 0 10px !important;
  color: var(--tc-ink) !important;
  font-size: var(--tc-text-xl) !important;
  font-weight: var(--tc-weight-extra) !important;
  line-height: 1.3 !important;
}
.sweet-alert p {
  color: var(--tc-text-secondary) !important;
  font-size: var(--tc-text-base) !important;
  font-weight: var(--tc-weight-regular) !important;
  line-height: 1.65 !important;
}

/* --- Buttons: reuse the primary / secondary treatment --------------------- */
.sweet-alert button {
  margin: 22px 5px 0 !important;
  padding: 10px 22px !important;
  border: 1px solid transparent !important;
  border-radius: var(--tc-corner-md) !important;
  font-size: var(--tc-text-md) !important;
  font-weight: var(--tc-weight-extra) !important;
  box-shadow: none !important;
  transition: var(--tc-transition) !important;
}
.sweet-alert button.confirm {
  background: var(--tc-grad-primary) !important;
  border-color: color-mix(in srgb, var(--tc-primary) 82%, var(--tc-black)) !important;
  color: var(--tc-white) !important;
  box-shadow: var(--tc-shadow-button-primary) !important;
}
.sweet-alert button.confirm:hover {
  background: var(--tc-grad-primary-hover) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--tc-brand-deep) 24%, transparent) !important;
}
.sweet-alert button.cancel {
  background: var(--tc-brand-soft) !important;
  border-color: var(--tc-brand-border) !important;
  color: var(--tc-primary) !important;
}
.sweet-alert button.cancel:hover {
  background: color-mix(in srgb, var(--tc-primary) 12%, var(--tc-white)) !important;
  box-shadow: var(--tc-shadow-button) !important;
}
.sweet-alert button:focus {
  outline: none !important;
  box-shadow: var(--tc-ring-focus) !important;
}
.sweet-alert button:hover { transform: translateY(-1px); }
.sweet-alert button[disabled] { opacity: 0.5 !important; transform: none !important; }

/* --- Input prompt (defensive) ------------------------------------------- */
.sweet-alert input {
  height: 42px !important;
  border: 1px solid var(--tc-border-input) !important;
  border-radius: var(--tc-corner-md) !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink) !important;
  font-size: var(--tc-text-md) !important;
  box-shadow: none !important;
}
.sweet-alert input:focus {
  border-color: var(--tc-primary) !important;
  box-shadow: var(--tc-ring-focus) !important;
}
.sweet-alert .sa-input-error::before,
.sweet-alert .sa-input-error::after,
.sweet-alert .sa-error-container .icon { background-color: var(--tc-danger) !important; }
.sweet-alert .sa-error-container { background: var(--tc-danger-soft) !important; }

/* --- Icons: keep the semantic hue, add a soft ring + shadow ------------- */
.sweet-alert .sa-icon {
  margin: 6px auto 16px !important;
  border-width: 4px !important;
}
.sweet-alert .sa-icon.sa-warning {
  border-color: var(--tc-warning) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tc-warning) 26%, transparent) !important;
}
.sweet-alert .sa-icon.sa-warning .sa-body,
.sweet-alert .sa-icon.sa-warning .sa-dot { background-color: var(--tc-warning) !important; }

.sweet-alert .sa-icon.sa-error {
  border-color: var(--tc-danger) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tc-danger) 26%, transparent) !important;
}
.sweet-alert .sa-icon.sa-error .sa-line { background-color: var(--tc-danger) !important; }

.sweet-alert .sa-icon.sa-info {
  border-color: var(--tc-info) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tc-info) 26%, transparent) !important;
}
.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after { background-color: var(--tc-info) !important; }

.sweet-alert .sa-icon.sa-success {
  border-color: var(--tc-success) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tc-success) 26%, transparent) !important;
}
.sweet-alert .sa-icon.sa-success .sa-line { background-color: var(--tc-success) !important; }
.sweet-alert .sa-icon.sa-success .sa-placeholder {
  border-color: color-mix(in srgb, var(--tc-success) 22%, transparent) !important;
}
/* NB: .sa-success::before / ::after / .sa-fix stay white — they mask the
   checkmark reveal animation and must match the box background (#fff). */

/* =============================================================================
 * BOOTSTRAP .modal   (14 files: contact/company detail viewers, task/ticket
 *   editors, send-sms, history, notes — .modal-content / -header / -body /
 *   -footer / -title, plus #modal-add-contact / #modal-contact / .modal-lg)
 * ========================================================================== */

.modal-content {
  border: 1px solid var(--tc-border-subtle) !important;
  border-radius: var(--tc-corner-2xl) !important;
  background: var(--tc-surface) !important;
  box-shadow:
    var(--tc-shadow-xl),
    inset 0 3px 0 var(--tc-primary) !important;   /* brand cap, replaces Ekka's header border-top */
}
.modal-content > .modal-header:first-child {
  border-top-left-radius: var(--tc-radius-2xl) !important;
  border-top-right-radius: var(--tc-radius-2xl) !important;
}
.modal-content > .modal-footer:last-child {
  border-bottom-right-radius: var(--tc-radius-2xl) !important;
  border-bottom-left-radius: 7px !important;
}
.modal-header {
  border-top: 0 !important;
  border-bottom: 1px solid var(--tc-border-soft) !important;
  background: var(--tc-surface) !important;
  padding: var(--tc-space-4) var(--tc-space-5) !important;
}
.modal-title {
  color: var(--tc-ink) !important;
  font-size: var(--tc-text-lg) !important;
  font-weight: var(--tc-weight-extra) !important;
  letter-spacing: -0.01em !important;
}
.modal-body {
  padding: var(--tc-space-5) !important;
  background: var(--tc-surface) !important;
  color: var(--tc-ink) !important;
}
.modal-footer {
  border-top: 1px solid var(--tc-border-soft) !important;
  background: var(--tc-surface) !important;
  padding: var(--tc-space-3) var(--tc-space-5) !important;
}

/* --- Backdrop: soft tinted dark instead of harsh #000 ------------------- */
.modal-backdrop {
  background-color: var(--tc-brand-deep) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}
.modal-backdrop.show { opacity: 0.55 !important; }   /* still fades 0 -> .55 */

@media (min-width: 768px) {
  .ec-main-header #sidebar-toggler,
  .ec-main-header .sidebar-toggle,
  #sidebar-toggler,
  button.sidebar-toggle {
    display: none !important;
  }

  .ec-left-sidebar,
  .ec-left-sidebar.ec-bg-sidebar,
  .ec-sidebar-fixed .ec-left-sidebar,
  body.sidebar-collapse .ec-left-sidebar,
  body.sidebar-collapse-out .ec-left-sidebar,
  body.sidebar-minified .ec-left-sidebar,
  body.sidebar-minified-out .ec-left-sidebar,
  body.sidebar-minified .ec-left-sidebar:hover,
  body.sidebar-mobile-in .ec-left-sidebar,
  body.sidebar-mobile-out .ec-left-sidebar {
    position: fixed !important;
    top: var(--tc-shell-gap) !important;
    left: var(--tc-shell-gap) !important;
    bottom: var(--tc-shell-gap) !important;
    right: auto !important;
    width: var(--tc-sidebar-w) !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(0) !important;
    z-index: 20 !important;
  }

  .ec-sidebar-fixed .ec-page-wrapper,
  .ec-sidebar-fixed-offcanvas .ec-page-wrapper,
  body.sidebar-collapse .ec-page-wrapper,
  body.sidebar-collapse-out .ec-page-wrapper,
  body.sidebar-minified .ec-page-wrapper,
  body.sidebar-minified-out .ec-page-wrapper {
    padding-left: calc(var(--tc-shell-gap) + var(--tc-sidebar-w)) !important;
  }
  .ec-main-header,
  .ec-sidebar-fixed .ec-main-header,
  body.sidebar-collapse .ec-main-header,
  body.sidebar-collapse-out .ec-main-header,
  body.sidebar-minified .ec-main-header,
  body.sidebar-minified-out .ec-main-header {
    left: calc(var(--tc-shell-gap) + var(--tc-sidebar-w) + var(--tc-shell-gap)) !important;
  }
}

.ec-left-sidebar .sidebar {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}
.ec-left-sidebar .ec-navigation { height: calc(100% - 72px) !important; }

.ec-left-sidebar .nav > li > a > span,
.ec-left-sidebar .nav > li > a > .caret,
.ec-left-sidebar .nav-text,
.ec-left-sidebar .caret,
.ec-left-sidebar .ec-brand-name {
  opacity: 1 !important;
  visibility: visible !important;
}
body.sidebar-minified .ec-left-sidebar .nav li.has-sub .collapse > .sub-menu {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
}

@media (max-width: 767.98px) {
  .ec-left-sidebar,
  .ec-left-sidebar.ec-bg-sidebar,
  body.sidebar-mobile-out .ec-left-sidebar,
  body.sidebar-collapse .ec-left-sidebar,
  body.sidebar-collapse-out .ec-left-sidebar,
  body.sidebar-minified .ec-left-sidebar,
  body.sidebar-minified-out .ec-left-sidebar {
    position: fixed !important;
    top: var(--tc-shell-gap) !important;
    bottom: var(--tc-shell-gap) !important;
    left: var(--tc-shell-gap) !important;
    right: auto !important;
    width: min(84vw, var(--tc-sidebar-w)) !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(calc(-100% - var(--tc-shell-gap) - 6px)) !important;
    z-index: 1050 !important;
    box-shadow: var(--tc-shadow-lg) !important;
  }
  body.sidebar-mobile-in .ec-left-sidebar,
  body.sidebar-mobile-in .ec-left-sidebar.ec-bg-sidebar {
    transform: translateX(0) !important;
  }

  .ec-page-wrapper,
  .ec-sidebar-fixed .ec-page-wrapper,
  body.sidebar-collapse .ec-page-wrapper,
  body.sidebar-collapse-out .ec-page-wrapper,
  body.sidebar-minified .ec-page-wrapper,
  body.sidebar-minified-out .ec-page-wrapper {
    padding-left: 0 !important;
  }
  .ec-main-header,
  .ec-sidebar-fixed .ec-main-header,
  body.sidebar-collapse .ec-main-header,
  body.sidebar-collapse-out .ec-main-header,
  body.sidebar-minified .ec-main-header,
  body.sidebar-minified-out .ec-main-header {
    left: var(--tc-shell-gap) !important;
  }

  .ec-main-header .navbar {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-left: 12px !important;
    padding-right: 10px !important;
  }
  .ec-main-header .navbar .search-form { display: none !important; }

  .ec-main-header .ec-mobile-back,
  .ec-main-header #sidebar-toggler,
  .ec-main-header .navbar .sidebar-toggle,
  #sidebar-toggler,
  button.sidebar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 !important;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: var(--tc-corner-md) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    line-height: 1 !important;
    -webkit-tap-highlight-color: transparent;
  }
  .ec-main-header .ec-mobile-back { order: 0; margin: 0 8px 0 0 !important; }
  .ec-main-header #sidebar-toggler,
  .ec-main-header .navbar .sidebar-toggle,
  #sidebar-toggler,
  button.sidebar-toggle { order: 3; margin: 0 0 0 8px !important; }

  .ec-main-header .ec-mobile-back a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
  }
  .ec-main-header .ec-mobile-back a:active,
  .ec-main-header .ec-mobile-back a:hover {
    background: transparent;
    color: #fff;
    transform: none;
  }
  .ec-main-header .ec-mobile-back:active,
  .ec-main-header #sidebar-toggler:active,
  .ec-main-header .sidebar-toggle:active {
    background: rgba(255, 255, 255, 0.26) !important;
    transform: scale(0.94);
  }
  .ec-main-header #sidebar-toggler::before,
  .ec-main-header .navbar .sidebar-toggle::before,
  .ec-main-header .sidebar-offcanvas-toggle::before {
    content: "" !important;
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
    font-size: 0 !important;
  }
  .ec-main-header #sidebar-toggler::after,
  .ec-main-header .navbar .sidebar-toggle::after { content: none !important; }

  .ec-header-brand {
    display: inline-flex !important;
    align-items: center;
    order: 1;
    flex: 0 0 auto;
    margin-right: auto !important;
    padding: 5px 9px;
    border-radius: var(--tc-corner-md);
    background: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tc-brand-deep) 22%, transparent);
  }
  .ec-header-brand img {
    display: block;
    height: 24px;
    width: auto;
  }
  .ec-header-company-name {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  .ec-main-header .navbar-right { order: 2; flex: 0 0 auto; }

  body.sidebar-mobile-in .tc-drawer-scrim {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.ec-tools-sidebar-overlay { display: none !important; }

.tc-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: color-mix(in srgb, var(--tc-brand-deep) 50%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.ec-header-brand { display: none; }

.tc-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: var(--tc-space-5);
  padding: clamp(18px, 3vw, 30px) clamp(16px, 3vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--tc-radius-5xl);
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 90% 8%,
      color-mix(in srgb, var(--tc-accent) 20%, transparent), transparent 18rem),
    var(--tc-grad-header);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: 0 26px 58px color-mix(in srgb, var(--tc-brand-deep) 20%, transparent);
  color: #fff;
}
.tc-overview::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  inset-block-start: -230px;
  inset-inline-end: -90px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(255, 255, 255, 0.035), 0 0 0 112px rgba(255, 255, 255, 0.025);
}
.tc-overview__cards {
  position: relative;
  z-index: 1;
  margin: 0;
  row-gap: 8px;
}

.tc-stat-card {
  --tc-stat-accent: color-mix(in srgb, var(--tc-primary) 58%, var(--tc-white));
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  margin: 0;
  min-width: 0;
  min-height: 142px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tc-corner-2xl);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.065));
  color: #fff;
  text-align: start;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.tc-stat-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  inset-block-end: -55px;
  inset-inline-end: -28px;
  border-radius: 50%;
  background: var(--tc-stat-accent);
  filter: blur(3px);
  opacity: .12;
}
.tc-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.09));
}
.tc-stat-card--ads        { --tc-stat-accent: var(--tc-accent); }
.tc-stat-card--services   { --tc-stat-accent: var(--tc-secondary-indigo, #463086); }
.tc-stat-card--properties { --tc-stat-accent: color-mix(in srgb, var(--tc-primary) 60%, var(--tc-white)); }
.tc-stat-card--success    { --tc-stat-accent: var(--tc-success); }
.tc-stat-card--danger     { --tc-stat-accent: var(--tc-danger); }
.tc-stat-card > .alert { grid-column: 1 / -1; margin: 0 0 4px; }
.tc-stat-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--tc-stat-accent), transparent 62%);
  border-radius: var(--tc-corner-lg);
  background: color-mix(in srgb, var(--tc-stat-accent), transparent 84%);
  color: var(--tc-stat-accent);
  font-size: 21px;
  line-height: 1;
}
.tc-stat-card__icon svg { width: 21px; height: 21px; }
.tc-stat-card__copy { display: grid; min-width: 0; }
.tc-stat-card__copy small {
  color: color-mix(in srgb, var(--tc-primary) 9%, rgba(255, 255, 255, 0.69));
  font-size: 11px;
  font-weight: 800;
}
.tc-stat-card__copy strong {
  margin-top: 6px;
  font-size: var(--tc-text-2xl);
  font-weight: 900;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.tc-stat-card__copy span {
  margin-top: 10px;
  color: color-mix(in srgb, var(--tc-primary) 8%, rgba(255, 255, 255, 0.57));
  font-size: 10px;
  line-height: 1.5;
}
.tc-stat-card__arrow { width: 17px; height: 17px; font-size: 17px; color: rgba(255, 255, 255, 0.56); }

.tc-info-card {
  display: grid;
  align-content: start;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--tc-brand-shadow);
  border-radius: var(--tc-corner-2xl);
  background: color-mix(in srgb, var(--tc-primary) 3%, var(--tc-white));
}
.tc-info-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
}
.tc-info-card__head > span,
.tc-info-card__icon,
.card-icon-info > i {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: var(--tc-corner-md, 13px 13px 13px 5px);
  background: color-mix(in srgb, var(--tc-primary) 13%, var(--tc-white));
  color: var(--tc-brand-deep);
  font-size: 19px;
  line-height: 1;
}
.tc-info-card__head svg,
.tc-info-card__icon svg { width: 19px; height: 19px; }
.tc-info-card__head > div { display: grid; gap: 3px; min-width: 0; }
.tc-info-card__head strong {
  color: color-mix(in srgb, var(--tc-primary) 23%, var(--tc-black));
  font-size: 13px;
  font-weight: 900;
}
.tc-info-card__head small {
  color: var(--tc-text-secondary);
  font-size: 9px;
  line-height: 1.45;
}