/* ===========================================================================
   REYDAAR CRM — "Calm" design system, Reydaar edition  (2026-10-19)
   Calm design system adapted to Perfex 3.0.6,
   recoloured to the reydaar.com palette (violet #6254E7, deep violet #3B3663,
   orange #FF7426, logo blue #135486) with Rubik (text) and Nunito (headings).

   Presentation only: no markup, form field, class or behaviour changes.
   Perfex auto-loads this file after its own CSS (admin, portal, auth pages).
   Rollback: delete this file for the stock Perfex look.

   Map:  0 tokens · 1 base & type · 2 focus · 3 header · 4 sidebar
         5 setup panel · 6 page & cards · 7 dashboard · 8 buttons · 9 forms
         10 tables · 11 badges & alerts · 12 tabs · 13 dropdowns, modals,
         popovers (stacking) · 14 misc widgets · 15 auth pages
         16 client portal · 17 responsive · 18 compact pass · 20 staff login
         21 calm navigation · 22 client documents · 23 client portal login
         30 Perfex 3.0.6 fixes
   =========================================================================== */

/* fonts: self-hosted (no request to Google from staff or client browsers) */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/reydaar/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("../fonts/reydaar/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/reydaar/rubik-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/reydaar/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* 0. TOKENS ---------------------------------------------------------------- */
:root {
  --font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Nunito", "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bg: #F7F7FB;            /* page */
  --surface: #FFFFFF;       /* cards */
  --subtle: #F5F4FA;        /* inputs at rest, table heads */
  --hover: #F0EFF8;
  --border: #E7E6F0;
  --border-strong: #D6D4E5;

  --fg: #1C1937;            /* 16.9:1 on white */
  --fg-2: #3B3663;          /* 11.1:1 — reydaar.com heading colour */
  --muted: #696687;         /* 5.4:1 on white, 5.1:1 on --bg — reydaar.com body text */

  --primary: #6254E7;       /* 5.3:1 with white text — reydaar.com theme colour */
  --primary-hover: #4F41D4;
  --primary-soft: #EFEDFD;
  --primary-soft-fg: #3F31B5;  /* 7.8:1 on soft */
  --ring: rgba(98, 84, 231, .28);

  --accent: #FF7426;        /* reydaar.com orange: decoration only, never text on white */
  --brand-blue: #135486;    /* logo */

  /* pastel pairs (fg >= 4.5:1 on its bg) */
  --mint: #E6F6EE;      --mint-fg: #17603F;
  --sky: #E7F0FC;       --sky-fg: #1E4E8C;
  --lavender: #EFEDFD;  --lavender-fg: #3F31B5;
  --peach: #FFEEE3;     --peach-fg: #9A4614;
  --rose: #FCE9EC;      --rose-fg: #A3283F;
  --butter: #FBF4D9;    --butter-fg: #7A5B05;
  --gray: #F0EFF8;      --gray-fg: #3B3663;

  --danger: #C2362F;        /* 5.0:1 with white */

  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --sh-xs: 0 1px 2px rgba(28, 25, 55, .04);
  --sh-sm: 0 1px 2px rgba(28, 25, 55, .05), 0 1px 3px rgba(28, 25, 55, .04);
  --sh-md: 0 6px 16px -4px rgba(28, 25, 55, .10), 0 2px 4px -2px rgba(28, 25, 55, .05);
  --sh-lg: 0 18px 40px -12px rgba(28, 25, 55, .22), 0 4px 10px -4px rgba(28, 25, 55, .06);

  --sidebar-w: 240px;
  --header-h: 63px;         /* Perfex positions several things off 63px */
}

/* 1. BASE & TYPE ----------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body, body.app, body.customers, body.login_admin {
  font-family: var(--font) !important;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#wrapper, .content { background: var(--bg) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#side-menu li a, #setup-menu > li > a, .navbar-nav > li > a, .btn, input, select, textarea, .popover, .tooltip {
  font-family: var(--font) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--fg); font-family: var(--font-head) !important; font-weight: 700; letter-spacing: -.005em; }
h4, .h4 { font-size: 17px; }
.bold, b, strong { font-weight: 600; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
.text-muted { color: var(--muted) !important; }
.text-dark { color: var(--fg) !important; }
.text-success { color: #15803D !important; }
.text-danger { color: #B42318 !important; }
.text-warning { color: #A15C07 !important; }
.text-info { color: #1D4ED8 !important; }
/* Sentence case everywhere: uppercase labels read as shouting and wrap more.
   Core sets uppercase on many individual elements, so neutralise it globally. */
.text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }
#header *, #menu *, #setup-menu-wrapper *, #wrapper *, .modal *, .dropdown-menu *,
body.customers *, body.login_admin * { text-transform: none !important; }
#wrapper .fc button, #wrapper .fc .fc-button { text-transform: capitalize !important; }
/* timestamps never break */
.todo-date, .text-has-action, time, .date, small.text-muted { white-space: nowrap; }
hr { border-top-color: var(--border); }
::selection { background: var(--primary-soft); color: var(--primary-soft-fg); }

/* 2. FOCUS — no ring on mouse click, a clear ring for keyboard users ------- */
a:focus, button:focus, .btn:focus, .btn:active:focus, .btn.active:focus,
input:focus, select:focus, textarea:focus, [tabindex]:focus,
.nav > li > a:focus, #side-menu li a:focus, .dropdown-toggle:focus {
  outline: none !important;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible,
.nav > li > a:focus-visible, #side-menu li a:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px !important;
}
.btn:focus, .btn:active, .btn.active { box-shadow: none; }

/* 3. HEADER ---------------------------------------------------------------- */
#header {
  background: var(--surface) !important;
  filter: none !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 1030;
}
#header .hide-menu {
  float: left;
  width: 52px;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  color: var(--muted);
  cursor: pointer;
}
#header .hide-menu i {
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: var(--r);
  font-size: 15px;
  transition: background .15s, color .15s;
}
#header .hide-menu:hover i { background: var(--hover); color: var(--fg); }
#logo {
  height: var(--header-h);
  padding: 0 12px 0 0;
  display: flex; align-items: center;
}
/* The uploaded logo is white-on-transparent (made for the old dark header).
   Render it as a dark mark so it reads on white. */
#logo img, .small-logo img, .company-logo img, .navbar-brand.logo img, .navbar-brand img {
  filter: brightness(0) saturate(100%) opacity(.86);
}
#logo img { height: 30px !important; margin: 0 !important; }

.navbar-nav > li > a,
#header .navbar-nav > li > a {
  color: var(--fg-2) !important;
  height: var(--header-h);
  line-height: var(--header-h);
  padding: 0 10px;
  font-size: 14px;
  background: transparent !important;
}
#header .navbar-right > li.icon > a > i,
#header .navbar-right > li > a > i.fa {
  font-size: 16px;
  width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: var(--r);
  color: var(--muted);
  transition: background .15s, color .15s;
}
#header .navbar-right > li > a:hover > i.fa { background: var(--hover); color: var(--fg); }
.navbar-nav > li a > .icon-total-indicator,
#header .badge {
  top: 12px; right: 2px;
  min-width: 18px; height: 18px; line-height: 14px;
  padding: 2px 5px;
  font: 600 11px/14px var(--font);
  border-radius: 999px;
  background: var(--danger) !important;
  color: #fff !important;
  border: 2px solid var(--surface);
}
.header-user-profile img, #header .profile img, img.staff-profile-image-small {
  width: 32px !important; height: 32px !important;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border);
}

/* Search */
#top_search { padding: 0; }
#top_search input#search_input,
#search_input {
  height: 38px;
  width: 340px;
  margin-top: 12px;
  padding: 0 12px;
  border-radius: var(--r);
  border: 1px solid var(--border) !important;
  background: var(--subtle) !important;
  color: var(--fg) !important;
  box-shadow: none !important;
  font-size: 14px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#search_input::placeholder { color: var(--muted); opacity: 1; }
#search_input:focus {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
#top_search_button button {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
/* Live results: one solid panel; nothing painted when empty */
#search_results { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#search_results:empty, #search-history:not(:has(li)) { display: none !important; }
#search_results > *, #search-history, #top_search .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
}
#search_results a, #search-history a { color: var(--fg-2) !important; }
#search_results li a:hover, #search-history li a:hover { background: var(--hover) !important; }

/* Desktop header bar: flex so icons align and the avatar sits far right */
@media (min-width: 769px) {
  #header nav .navbar-right {
    display: flex !important;
    align-items: center;
    float: right;
    margin-right: 12px;
  }
  #header nav .navbar-right > li { float: none; }
  #header nav .navbar-right > li.header-user-profile { order: 99; margin-left: 6px; }
}

/* 4. SIDEBAR --------------------------------------------------------------- */
aside#menu, #menu {
  width: var(--sidebar-w) !important;
  background: #FBFBFC !important;
  border-right: 1px solid var(--border);
}
@media (min-width: 769px) {
  aside#menu.sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    z-index: 20;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: margin-left .2s ease;
  }
  body.admin #wrapper { margin-left: var(--sidebar-w) !important; transition: margin-left .2s ease; }
  body.hide-sidebar:not(.show-sidebar) #menu { margin-left: calc(-1 * var(--sidebar-w)) !important; }
  body.hide-sidebar:not(.show-sidebar) #wrapper { margin-left: 0 !important; }
}
#side-menu, #side-menu.nav, #side-menu ul.nav, #side-menu li,
#side-menu li.active, #side-menu li .nav-second-level li {
  background: transparent !important;
  border: 0 !important;
}
#side-menu { padding: 10px 10px 24px; }

/* Rows */
#side-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 1px 0;
  padding: 0 10px !important;
  border-radius: var(--r) !important;
  color: var(--fg-2) !important;
  font-size: 14px !important;
  font-weight: 500;
  text-transform: none !important;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
#side-menu li a i.menu-icon {
  float: none; display: inline-block;
  width: 18px; margin: 0;
  font-size: 15px;
  text-align: center;
  color: #8A919C;
  transition: color .12s;
}
#side-menu .menu-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#side-menu .arrow, #setup-menu .arrow {
  float: none !important;
  margin-left: auto;
  padding: 0 !important;
  font-size: 13px;
  color: #9AA1AC;
  transition: transform .15s;
}
#side-menu > li > a:hover, #side-menu.nav > li > a:focus {
  background: var(--hover) !important;
  color: var(--fg) !important;
}
#side-menu > li > a:hover i.menu-icon { color: var(--fg-2); }
#side-menu > li.active > a {
  background: var(--primary-soft) !important;
  color: var(--primary-soft-fg) !important;
  font-weight: 600;
}
#side-menu > li.active > a i.menu-icon,
#side-menu > li.active > a .arrow { color: var(--primary-soft-fg); }
#side-menu .badge, #side-menu .menu-badge {
  margin-left: auto;
  background: var(--gray) !important; color: var(--gray-fg) !important;
  font-weight: 600; border-radius: 999px;
}

/* Sub-menus: flat list on a hairline guide, no pills floating off-grid */
#side-menu .nav-second-level {
  margin: 2px 0 6px 19px !important;
  padding: 2px 0 2px 10px !important;
  border-left: 1px solid var(--border) !important;
}
#side-menu li .nav-second-level li a,
#side-menu li .nav-second-level li.active a {
  display: flex !important;
  align-items: center;
  height: 32px;
  margin: 1px 0 !important;
  padding: 0 10px !important;
  border-radius: var(--r-sm) !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-size: 13.5px !important;
  font-weight: 500;
  white-space: nowrap;
}
#side-menu li .nav-second-level li a:hover {
  background: var(--hover) !important;
  color: var(--fg) !important;
}
#side-menu li .nav-second-level li.active a {
  background: var(--surface) !important;
  color: var(--primary-soft-fg) !important;
  font-weight: 600;
  box-shadow: var(--sh-xs), 0 0 0 1px var(--border);
}
#side-menu li .nav-second-level li a i { margin-right: 8px; width: 14px; color: #9AA1AC; }

/* "Welcome …" line + logout icon (logout lives in the profile menu) */
#side-menu li.dashboard_user {
  padding: 6px 10px 4px !important;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted) !important;
}
#side-menu li.dashboard_user .top-left-logout { display: none !important; }

/* Quick create: a real button with a plus, not a floating gavel */
#side-menu li.quick-links {
  position: static !important;
  left: auto; top: auto;
  padding: 6px 0 10px !important;
}
#side-menu li.quick-links .dropdown-toggle {
  display: flex !important;
  align-items: center; justify-content: center; gap: 8px;
  height: 36px;
  padding: 0 12px !important;
  line-height: 1 !important;
  border-radius: var(--r) !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600;
  opacity: 1 !important;
  box-shadow: var(--sh-sm);
  transition: background .15s;
}
#side-menu li.quick-links .dropdown-toggle:hover { background: var(--primary-hover) !important; }
#side-menu li.quick-links .dropdown-toggle > i { display: none !important; }
#side-menu li.quick-links .dropdown-toggle::before { content: "\f067"; font: normal 12px/1 FontAwesome; }
#side-menu li.quick-links .dropdown-toggle::after { content: "Quick create"; }
.nav li.quick-links .dropdown-quick-links.open a.dropdown-toggle i { transform: none; }
#side-menu li.quick-links .dropdown-menu {
  width: 100%;
  margin: 6px 0 0 !important;
  padding: 4px !important;
}
#side-menu li.quick-links .dropdown-menu::before,
#side-menu li.quick-links .dropdown-menu::after { display: none !important; }
#side-menu li.quick-links .dropdown-menu li a {
  padding: 8px 10px !important;
  font-size: 14px !important;
  color: var(--fg-2) !important;
}
#side-menu li.quick-links .dropdown-menu li a i { color: var(--muted); margin-right: 6px; }

/* 5. SETUP PANEL ----------------------------------------------------------- */
#setup-menu-wrapper {
  position: fixed !important;
  top: var(--header-h) !important;
  bottom: 0 !important;
  left: 0;
  width: var(--sidebar-w) !important;
  min-height: 0 !important;          /* beats Perfex's inline JS min-height */
  height: auto !important;
  overflow-y: auto;
  background: var(--surface) !important;
  border-right: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  z-index: 25;
}
#setup-menu, #setup-menu li, #setup-menu .nav-second-level li,
#setup-menu .nav-second-level li:first-child {
  background: transparent !important;
  border: 0 !important;
}
#setup-menu { padding: 6px 10px 24px; }
#setup-menu > li:first-child {
  display: flex; align-items: center;
  height: 52px;
  margin: 0 -10px 8px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--border) !important;
}
#setup-menu .customizer-heading {
  position: static !important;
  order: -1;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
#setup-menu .close-customizer {
  margin: 0 !important;
  width: 32px; height: 32px; padding: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  border-radius: var(--r) !important;
  color: var(--muted) !important;
  background: transparent !important;
}
#setup-menu .close-customizer:hover { background: var(--hover) !important; color: var(--fg) !important; }
#setup-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 1px 0;
  padding: 0 10px !important;
  border-radius: var(--r) !important;
  color: var(--fg-2) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500;
  text-transform: none !important;
  white-space: nowrap;
}
#setup-menu > li > a:hover,
#setup-menu li > a:focus { background: var(--hover) !important; color: var(--fg) !important; }
#setup-menu > li.active > a {
  background: var(--primary-soft) !important;
  color: var(--primary-soft-fg) !important;
  font-weight: 600;
}
#setup-menu .nav-second-level {
  margin: 2px 0 6px 19px !important;
  padding: 2px 0 2px 10px !important;
  border-left: 1px solid var(--border) !important;
}
#setup-menu li .nav-second-level li a,
#setup-menu li .nav-second-level li.active a {
  display: flex !important;
  align-items: center;
  height: 32px;
  margin: 1px 0 !important;
  padding: 0 10px !important;
  border-radius: var(--r-sm) !important;
  color: var(--muted) !important;
  background: transparent !important;
  font-size: 13.5px !important;
  white-space: nowrap;
}
#setup-menu li .nav-second-level li a:hover { background: var(--hover) !important; color: var(--fg) !important; }
#setup-menu li .nav-second-level li.active a {
  color: var(--primary-soft-fg) !important;
  font-weight: 600;
  background: var(--primary-soft) !important;
}
/* Icons for setup sections (the markup ships none) */
#setup-menu > li > a::before {
  font: normal 15px/1 FontAwesome;
  width: 18px; text-align: center;
  color: #8A919C;
  content: "\f111";  /* fallback dot */
  font-size: 6px;
}
#setup-menu > li:first-child > a::before { content: none; }
#setup-menu > li.menu-item-staff > a::before            { content: "\f0c0"; font-size: 15px; }
#setup-menu > li.menu-item-customers > a::before        { content: "\f2c0"; font-size: 15px; }
#setup-menu > li.menu-item-support > a::before          { content: "\f1cd"; font-size: 15px; }
#setup-menu > li.menu-item-leads > a::before            { content: "\f0e7"; font-size: 15px; }
#setup-menu > li.menu-item-finance > a::before          { content: "\f19c"; font-size: 15px; }
#setup-menu > li.menu-item-contracts > a::before        { content: "\f15c"; font-size: 15px; }
#setup-menu > li.menu-item-estimate_request > a::before { content: "\f0f6"; font-size: 15px; }
#setup-menu > li.menu-item-modules > a::before          { content: "\f12e"; font-size: 15px; }
#setup-menu > li.menu-item-email-templates > a::before  { content: "\f0e0"; font-size: 15px; }
#setup-menu > li.menu-item-custom-fields > a::before    { content: "\f0ae"; font-size: 15px; }
#setup-menu > li.menu-item-gdpr > a::before             { content: "\f132"; font-size: 15px; }
#setup-menu > li.menu-item-roles > a::before            { content: "\f084"; font-size: 15px; }
#setup-menu > li.menu-item-menu-options > a::before     { content: "\f0c9"; font-size: 15px; }
#setup-menu > li.menu-item-theme-style > a::before      { content: "\f1fc"; font-size: 15px; }
#setup-menu > li.menu-item-settings > a::before         { content: "\f013"; font-size: 15px; }
#setup-menu > li:last-child > a::before                 { content: "\f059"; font-size: 15px; }
#setup-menu > li.active > a::before { color: var(--primary-soft-fg); }

/* 6. PAGE & CARDS ---------------------------------------------------------- */
.content { padding: 24px 28px 40px !important; }
.panel_s, .panel, .top_stats_wrapper, .panel-default {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xs) !important;
  margin-bottom: 20px;
}
/* never create stacking contexts on cards: menus inside must escape them */
.panel_s, .panel, .top_stats_wrapper { transform: none !important; z-index: auto !important; filter: none !important; }
.panel_s > .panel-body, .panel > .panel-body { padding: 20px; background: transparent !important; }
.panel-heading, .panel-default > .panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.panel-footer { background: var(--subtle) !important; border-top: 1px solid var(--border) !important; border-radius: 0 0 var(--r-lg) var(--r-lg) !important; }
.hr-panel-heading, .hr-panel-heading-dashboard { border-top: 1px solid var(--border) !important; margin: 12px -20px 16px !important; }
/* Page toolbar (the buttons row above lists) */
.panel-body._buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-body._buttons > .btn, .panel-body._buttons > .btn-group, .panel-body._buttons > .pull-left,
.panel-body._buttons > .pull-right, .panel-body._buttons > div { margin: 0 !important; }
.panel-body._buttons > .pull-right, .panel-body._buttons > .display-block { margin-left: auto !important; }

/* 7. DASHBOARD ------------------------------------------------------------- */
.widget-dragger { opacity: 0; transition: opacity .15s; }
.widget:hover .widget-dragger { opacity: .5; }
.widget .panel-body > p.padding-5,
.widget .panel-body > p:first-of-type.bold,
.home-summary .panel-body > p.bold {
  margin: 0;
  padding: 2px 0 !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}
.widget .panel-body.padding-10 { padding: 18px 20px !important; }

/* KPI cards */
.top_stats_wrapper {
  position: relative;
  min-height: 132px;
  padding: 18px 18px 16px !important;
}
.top_stats_wrapper > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px !important;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.top_stats_wrapper > p > i {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  font-size: 15px;
  background: var(--mint); color: var(--mint-fg);
}
.top_stats_wrapper > p > span.pull-right {
  order: 3;
  float: none !important;
  width: 100%;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.quick-stats-invoices .top_stats_wrapper > p > i { background: var(--peach); color: var(--peach-fg); }
.quick-stats-leads .top_stats_wrapper > p > i { background: var(--lavender); color: var(--lavender-fg); }
.quick-stats-projects .top_stats_wrapper > p > i { background: var(--sky); color: var(--sky-fg); }
.quick-stats-tasks .top_stats_wrapper > p > i { background: var(--butter); color: var(--butter-fg); }

/* progress bars (KPI cards, finance overview, everywhere) */
.progress {
  height: 6px !important;
  background: #EEF0F3 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.progress-bar { box-shadow: none !important; border-radius: 999px; background-color: var(--primary); }
.progress-bar-success { background-color: #34A06F !important; }
.progress-bar-info { background-color: #5B8DEF !important; }
.progress-bar-warning { background-color: #E0A93B !important; }
.progress-bar-danger { background-color: #E07A6F !important; }
.progress-bar-default, .progress-bar[style*="background-color:#"] { opacity: .9; }

/* Finance overview row text */
.widget .text-stats-wrapper, .finance-summary .text-stats-wrapper { font-size: 13.5px; }

/* Chart cards: give canvases breathing room */
.widget canvas.chart { max-width: 100%; }

/* Calendar (FullCalendar 3) */
.fc-toolbar h2 { font-size: 18px !important; font-weight: 600; color: var(--fg); }
.fc button, .fc .fc-button, .fc-state-default {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg-2) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500;
  text-transform: capitalize;
}
.fc .fc-button-group > .fc-button { border-radius: 0 !important; margin: 0 -1px 0 0 !important; }
.fc .fc-button-group > .fc-button:first-child { border-radius: var(--r) 0 0 var(--r) !important; }
.fc .fc-button-group > .fc-button:last-child { border-radius: 0 var(--r) var(--r) 0 !important; }
.fc .fc-state-active, .fc .fc-button.fc-state-active {
  background: var(--primary-soft) !important; color: var(--primary-soft-fg) !important; border-color: #BFE3CF !important;
}
.fc th, .fc td, .fc-unthemed .fc-divider, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead { border-color: var(--border) !important; }
.fc-unthemed td.fc-today { background: #F5FBF8 !important; }
.fc-day-header { padding: 8px 0 !important; font-size: 12px; font-weight: 600; color: var(--muted); }
.fc-event { border-radius: var(--r-sm) !important; border: 0 !important; padding: 1px 4px; font-size: 12px; }

/* 8. BUTTONS --------------------------------------------------------------- */
.btn {
  height: auto;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border-radius: var(--r);
  border: 1px solid transparent;
  white-space: nowrap;
  text-shadow: none !important;
  box-shadow: var(--sh-xs);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-lg { padding: 10px 18px; font-size: 15px; }
.btn-sm { padding: 5px 11px; font-size: 13px; line-height: 18px; }
.btn-xs { padding: 2px 8px; font-size: 12px; line-height: 16px; border-radius: var(--r-sm); }
.btn-default {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg-2) !important;
}
.btn-default:hover, .btn-default:focus, .btn-default.active, .open > .dropdown-toggle.btn-default {
  background: var(--subtle) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
}
/* Perfex uses .btn-info as its primary action */
.btn-info, .btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info.active, .btn-primary:hover, .btn-primary:focus, .btn-primary.active,
.open > .dropdown-toggle.btn-info, .open > .dropdown-toggle.btn-primary {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}
.btn-success { background: #1A7F4B !important; border-color: #1A7F4B !important; color: #fff !important; }
.btn-success:hover, .btn-success:focus { background: #166A3F !important; border-color: #166A3F !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus { background: #A92D27 !important; border-color: #A92D27 !important; }
.btn-warning { background: var(--butter) !important; border-color: #EEDC9A !important; color: var(--butter-fg) !important; }
.btn-warning:hover { background: #F7EBC0 !important; }
.btn-link { box-shadow: none; color: var(--primary); }
.btn-icon { padding: 7px 10px; }
.btn.disabled, .btn[disabled] { opacity: .5; box-shadow: none; }
.btn-group > .btn { box-shadow: none; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }

/* 9. FORMS ----------------------------------------------------------------- */
label, .control-label { font-size: 13.5px; font-weight: 500; color: var(--fg-2); margin-bottom: 6px; }
.form-control {
  height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
textarea.form-control { height: auto; min-height: 76px; }
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
.form-control::placeholder { color: #9AA1AC; }
.form-control[disabled], .form-control[readonly] { background: var(--subtle); color: var(--muted); }
.has-error .form-control { border-color: #E5847B; box-shadow: 0 0 0 3px rgba(194, 54, 47, .15); }
.has-error .help-block, p.text-danger, label.error, .text-danger.error { color: #B42318 !important; font-size: 13px; }
.input-group-addon {
  background: var(--subtle);
  border-color: var(--border-strong);
  color: var(--muted);
  border-radius: var(--r);
}
.input-group-btn > .btn { height: 38px; padding-top: 0; padding-bottom: 0; box-shadow: none; }
.input-group .form-control:first-child, .input-group-addon:first-child { border-radius: var(--r) 0 0 var(--r); }
.input-group .form-control:last-child, .input-group-addon:last-child { border-radius: 0 var(--r) var(--r) 0; }
/* bootstrap-select */
.bootstrap-select > .dropdown-toggle, .bootstrap-select .btn.dropdown-toggle {
  height: 38px;
  padding: 8px 12px !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--fg) !important;
  box-shadow: var(--sh-xs) !important;
}
.bootstrap-select.open > .dropdown-toggle, .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
.bootstrap-select .dropdown-menu li a { padding: 7px 10px; border-radius: var(--r-sm); }
.bootstrap-select .dropdown-menu li.selected a, .bootstrap-select .dropdown-menu li.active a {
  background: var(--primary-soft) !important; color: var(--primary-soft-fg) !important;
}
.bootstrap-select .bs-searchbox .form-control { height: 34px; }
/* Pickers (e.g. "Add Item") size themselves to their longest option and, when
   opening upward, to all the space above — running over the header. Cap both:
   at most half the viewport minus the header, so an upward list always ends
   below the header, and a sensible width with one-line description previews. */
.bootstrap-select > .dropdown-menu {
  max-width: min(560px, calc(100vw - 32px));
  max-height: min(460px, 62vh) !important;
}
.bootstrap-select > .dropdown-menu > .inner {
  max-height: calc(min(460px, 62vh) - 58px) !important;
  overflow-y: auto !important;
}
.bootstrap-select.dropup > .dropdown-menu { max-height: min(460px, calc(50vh - 80px)) !important; }
.bootstrap-select.dropup > .dropdown-menu > .inner { max-height: calc(min(460px, calc(50vh - 80px)) - 58px) !important; }
.bootstrap-select .dropdown-menu li a { white-space: normal; }
.bootstrap-select .dropdown-menu li a .text { display: block; font-weight: 500; color: var(--fg); }
.bootstrap-select .dropdown-menu li a small.text-muted, .bootstrap-select .dropdown-menu li a .text small {
  display: block;
  margin-top: 1px;
  padding-left: 0 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--muted) !important;
}
.bootstrap-select .dropdown-menu li.dropdown-header {
  padding: 10px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-soft-fg);
}
.checkbox label, .radio label { font-weight: 400; color: var(--fg-2); }
.checkbox input[type=checkbox]:checked + label::before, .checkbox-primary input[type=checkbox]:checked + label::before {
  background: var(--primary) !important; border-color: var(--primary) !important;
}
.checkbox label::before, .radio label::before { border-color: var(--border-strong) !important; border-radius: 5px; }
.onoffswitch-label { border-radius: 999px !important; }
.radio-primary input[type="radio"] + label::after,
.radio-primary input[type="radio"]:checked + label::after,
.radio input[type="radio"]:checked + label::after { background-color: var(--primary) !important; }
.radio-primary input[type="radio"]:checked + label::before,
.radio input[type="radio"]:checked + label::before { border-color: var(--primary) !important; }
/* the old 5px focus ring on custom checkboxes / radios: keyboard only */
.radio input:focus + label::before, .checkbox input:focus + label::before { outline: none !important; }
.radio input:focus-visible + label::before, .checkbox input:focus-visible + label::before {
  outline: 2px solid var(--primary) !important; outline-offset: 2px !important;
}

/* Sticky save bar on long forms (invoice, estimate, settings…):
   span the content area exactly, whatever the sidebar width or state. */
.btn-bottom-toolbar:not(.modal .btn-bottom-toolbar) {
  left: var(--sidebar-w);
  right: 0;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px 28px !important;
  background: var(--surface) !important;    /* solid: content must not ghost through */
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -6px 16px -10px rgba(16, 24, 40, .18) !important;
  z-index: 1020;                             /* above page content, below header (1030) and menus */
  transition: left .2s ease;
}
body.hide-sidebar:not(.show-sidebar) .btn-bottom-toolbar:not(.modal .btn-bottom-toolbar) { left: 0; }
@media (max-width: 768px) {
  .btn-bottom-toolbar:not(.modal .btn-bottom-toolbar) { left: 0; padding: 10px 16px !important; }
}

/* 10. TABLES --------------------------------------------------------------- */
.table { color: var(--fg-2); margin-bottom: 0; }
.table > thead > tr > th, table.dataTable thead th,
.table.items thead > tr > th {      /* core forces white text here (old dark header bar) */
  background: #FAFAFB !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: 0 !important;
  white-space: nowrap;
  vertical-align: middle !important;
}
.table > thead > tr > th:first-child { border-top-left-radius: var(--r); }
.table > thead > tr > th:last-child { border-top-right-radius: var(--r); }
.table > tbody > tr > td {
  padding: 12px !important;
  border-top: 1px solid var(--border) !important;
  vertical-align: middle !important;
  font-size: 14px;
}
/* Short values never break mid-word: dates, numbers, invoice numbers, names.
   Columns that no longer fit fold into DataTables' "+" row (Responsive). */
table.dataTable > tbody > tr > td { white-space: nowrap; vertical-align: top !important; }
table.dataTable > tbody > tr.child td, table.dataTable > tbody > tr > td.child { white-space: normal; }
.table-hover > tbody > tr:hover > td, .table > tbody > tr:hover > td { background: #FAFBFC; }
.table > tbody > tr.selected > td, .table > tbody > tr.active > td { background: #F3FAF6 !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
/* Row actions: visible on hover with a mouse, always visible on touch */
.row-options { font-size: 13px; color: var(--muted); }
.row-options a { color: var(--muted); }
.row-options a:hover { color: var(--primary); }
@media (hover: none) { .row-options { display: block !important; visibility: visible !important; opacity: 1 !important; } }
/* DataTables chrome */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  height: 34px !important;
  border-radius: var(--r) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--ring) !important; }
.dataTables_info { color: var(--muted) !important; font-size: 13px; }
td.dataTables_empty { color: var(--fg-2) !important; padding: 28px 12px !important; text-align: center; }
.pagination > li > a, .pagination > li > span {
  margin: 0 2px;
  min-width: 32px; height: 32px; line-height: 30px;
  padding: 0 10px;
  text-align: center;
  border-radius: var(--r) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--fg-2) !important;
  font-size: 13px;
}
.pagination > li > a:hover { background: var(--hover) !important; }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > span {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--fg) !important;
  font-weight: 600;
  box-shadow: var(--sh-xs);
}
.pagination > .disabled > a { color: #B8BEC7 !important; }
.dt-buttons .btn, .table-loading { box-shadow: none; }
/* Responsive "+" expander: room for it, and a calm round control */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child {
  position: relative;
  padding-left: 38px !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
  top: 50% !important;
  left: 10px !important;
  width: 18px !important; height: 18px !important;
  margin-top: -9px;
  line-height: 18px !important;
  font: 600 14px/18px var(--font) !important;
  text-indent: 0 !important;
  border-radius: 50% !important;
  background: var(--primary-soft) !important;
  color: var(--primary-soft-fg) !important;
  box-shadow: none !important;
  border: 0 !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before {
  background: var(--primary) !important; color: #fff !important;
}

/* 11. BADGES, LABELS, ALERTS ---------------------------------------------- */
.label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none !important;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* a status dot so state is not carried by colour alone */
.label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.label-default { background: var(--gray) !important; color: var(--gray-fg) !important; border-color: #E3E6EA; }
.label-success { background: var(--mint) !important; color: var(--mint-fg) !important; border-color: #CBEBD9; }
.label-info, .label-primary { background: var(--sky) !important; color: var(--sky-fg) !important; border-color: #CFE0F7; }
.label-warning { background: var(--butter) !important; color: var(--butter-fg) !important; border-color: #F0E3AE; }
.label-danger { background: var(--rose) !important; color: var(--rose-fg) !important; border-color: #F5CDD4; }
/* Labels coloured inline by Perfex from the database (project / task / lead /
   ticket statuses): the stored colour stays on the dot and border, the text is
   drawn dark so light colours like #03a9f4 stay readable. */
.label[style*="color"] { background: #fff !important; -webkit-text-fill-color: var(--fg-2); }
/* Same for plain status text Perfex colours inline (project / task / ticket
   statuses in tables and summaries): dark text, stored colour on a dot. */
#wrapper .content span[style*="color:#"]:not(.label):not(.fa),
#wrapper .content p.font-medium[style*="color"] {
  -webkit-text-fill-color: var(--fg-2);
  white-space: nowrap;
}
#wrapper .content span[style*="color:#"]:not(.label):not(.fa)::before,
#wrapper .content p.font-medium[style*="color"]::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.input-group-addon { color: var(--fg-2) !important; white-space: nowrap; }
.badge { font-family: var(--font); font-weight: 600; border-radius: 999px; }
.alert {
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  padding: 12px 16px;
  box-shadow: none;
  font-size: 14px;
}
.alert-success { background: var(--mint); color: var(--mint-fg); border-color: #CBEBD9; }
.alert-info { background: var(--sky); color: var(--sky-fg); border-color: #CFE0F7; }
.alert-warning { background: var(--butter); color: var(--butter-fg); border-color: #F0E3AE; }
.alert-danger { background: var(--rose); color: var(--rose-fg); border-color: #F5CDD4; }
/* Perfex flash messages (alert_float) */
.float-alert.alert {
  box-shadow: var(--sh-lg) !important;
  border-radius: var(--r-lg) !important;
  z-index: 10050 !important;
}

/* 12. TABS ----------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs > li > a {
  margin: 0 20px -1px 0;
  padding: 10px 2px;
  border: 0 !important;
  border-radius: 0;
  color: var(--muted);
  background: transparent !important;
  font-weight: 500;
  white-space: nowrap;
}
.nav-tabs > li > a:hover { color: var(--fg); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--fg) !important;
  box-shadow: inset 0 -2px 0 var(--primary);
  background: transparent !important;
}
.nav-tabs > li > a i.menu-icon { float: none; display: inline-block; margin-right: 6px; font-size: 14px; width: auto; }
/* Settings / profile left navs */
.navbar-pills.nav-tabs, .nav-stacked { border: 0; }
.nav-stacked > li > a, .navbar-pills.nav-tabs > li > a {
  margin: 1px 0 !important;
  padding: 8px 12px !important;
  border-radius: var(--r) !important;
  color: var(--fg-2) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.nav-stacked > li > a:hover, .navbar-pills.nav-tabs > li > a:hover { background: var(--hover) !important; }
.nav-stacked > li.active > a, .navbar-pills.nav-tabs > li.active > a {
  background: var(--primary-soft) !important;
  color: var(--primary-soft-fg) !important;
  font-weight: 600;
}

/* 13. DROPDOWNS, MODALS, POPOVERS — and their stacking -------------------- */
.dropdown-menu {
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  font-size: 14px;
  z-index: 1060;                    /* above cards, sticky header, sidebar */
}
.dropdown-menu > li > a {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background: var(--hover) !important;
  color: var(--fg) !important;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover {
  background: var(--primary-soft) !important; color: var(--primary-soft-fg) !important;
}
.dropdown-menu .divider { background: var(--border); margin: 4px 0; }
#header .dropdown-menu { z-index: 1070; }
/* menus inside cards/tables must never be clipped by their container */
.panel_s, .panel-body, .dataTables_wrapper { overflow: visible; }
.table-responsive .dropdown-menu, .dataTables_wrapper .dropdown-menu { z-index: 1065; }
.bootstrap-select.open, .dropdown.open, .btn-group.open { z-index: 1061; }

.modal-backdrop.in { opacity: 1 !important; background: rgba(17, 24, 39, .42) !important; }
.modal-content {
  border: 0 !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-lg) !important;
  overflow: visible;                 /* select menus near the bottom must not be clipped */
}
.modal-header {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface) !important;
}
.modal-header .modal-title, .modal-title { font-size: 16px !important; font-weight: 600; color: var(--fg) !important; }
.modal-header .close {
  width: 30px; height: 30px; margin-top: -3px !important;
  border-radius: var(--r);
  opacity: .6; text-shadow: none;
}
.modal-header .close:hover { background: var(--hover); opacity: 1; }
.modal-body { padding: 20px !important; }
.modal-footer {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 14px 20px !important;
  background: var(--subtle) !important;
  border-top: 1px solid var(--border) !important;
}
.popover {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  z-index: 10060;                    /* popovers can open from inside modals */
}
.popover-title { background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 600; }
.tooltip { z-index: 10070; }
.tooltip-inner {
  background: #111827;
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font-size: 12.5px;
  max-width: 260px;
}
.tooltip.top .tooltip-arrow { border-top-color: #111827; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #111827; }
.tooltip.left .tooltip-arrow { border-left-color: #111827; }
.tooltip.right .tooltip-arrow { border-right-color: #111827; }
/* date / colour pickers opened from forms and modals */
/* pop-ups only: in Perfex `.datepicker` / `.colorpicker` are the INPUT fields themselves,
   so they must not get a z-index (they floated above dialogs and menus) */
.xdsoft_datetimepicker, .colorpicker.dropdown-menu, .daterangepicker { z-index: 10080 !important; }
.xdsoft_datetimepicker {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  font-family: var(--font) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--primary) !important; box-shadow: none !important; color: #fff !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover { background: var(--primary-soft) !important; color: var(--primary-soft-fg) !important; }
/* the chat widget sits under dialogs, never over them */
#pusherChatBox, .chatbox, #frame, [id^="chat_box"], .chat-wrapper { z-index: 1040 !important; }

/* 14. MISC WIDGETS --------------------------------------------------------- */
.activity-feed .feed-item { border-left-color: var(--border) !important; }
.activity-feed .feed-item::after { background: var(--primary) !important; border-color: #fff !important; }
.kan-ban-col .panel-heading, .kanban-col .panel-heading { border-radius: var(--r-lg) var(--r-lg) 0 0 !important; }
.kan-ban-content-wrapper .panel-body, .kanban-item, li.lead-kan-ban, li.task {
  border-radius: var(--r) !important;
}
.well { background: var(--subtle); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; }
.list-group-item { border-color: var(--border); }
.list-group-item:first-child { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.list-group-item:last-child { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.dropzone, .dz-default {
  border: 1.5px dashed var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  background: var(--subtle) !important;
}
#newsfeed { box-shadow: var(--sh-lg); }
/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: #CDD2D9 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CDD2D9; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 15. AUTH PAGES (staff login, client login/registration) ------------------ */
body.login_admin {
  background:
    radial-gradient(1000px 520px at 12% -10%, #E3F4EB 0%, transparent 60%),
    radial-gradient(900px 480px at 100% 110%, #ECE9FB 0%, transparent 55%),
    var(--bg) !important;
  min-height: 100vh;
}
body.login_admin .authentication-form-wrapper { margin-top: 8vh; }
body.login_admin .company-logo { text-align: center; padding: 0 0 8px; }
body.login_admin .company-logo img { max-height: 56px; width: auto; }
body.login_admin .authentication-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 28px 28px 20px !important;
  margin-top: 24px !important;
}
body.login_admin .authentication-form h1 {
  margin: 0 0 22px;
  font-size: 22px;
  text-align: center;
  color: var(--fg);
}
body.login_admin .form-control { height: 42px; }
body.login_admin .btn { height: 42px; font-weight: 600; }

/* 16. CLIENT PORTAL -------------------------------------------------------- */
body.customers .navbar-default.header, body.customers .navbar.header {
  background: var(--surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  min-height: 64px;
}
body.customers .navbar-default .navbar-nav > li > a {
  height: auto !important;
  line-height: 20px !important;
  padding: 22px 12px !important;
  color: var(--fg-2) !important;
  font-weight: 500;
}
body.customers .navbar-default .navbar-nav > li > a:hover,
body.customers .navbar-default .navbar-nav > .active > a {
  color: var(--primary-soft-fg) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--primary);
}
body.customers .navbar-brand { height: 64px; display: flex; align-items: center; }
body.customers .navbar-brand img { max-height: 34px; }
body.customers #content, body.customers .section-client-dashboard { padding-top: 24px; }
body.customers .panel_s .panel-body h4, body.customers .section-heading { color: var(--fg); font-weight: 600; }
body.customers footer, body.customers .footer {
  background: transparent !important;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

/* 17. RESPONSIVE ----------------------------------------------------------- */
/* Tablet & phone: the sidebar becomes an overlay drawer, never a push */
@media (max-width: 768px) {
  .content { padding: 16px !important; min-width: 0 !important; }
  aside#menu.sidebar, #menu {
    position: fixed !important;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: min(288px, 86vw) !important;
    margin-left: calc(-1 * min(288px, 86vw)) !important;
    max-height: none;
    overflow-y: auto;
    z-index: 1035;
    box-shadow: var(--sh-lg);
    transition: margin-left .22s ease;
  }
  body.show-sidebar #menu, body.page-small.show-sidebar #menu { margin-left: 0 !important; }
  #wrapper, body.page-small #wrapper, body.page-small.show-sidebar #wrapper,
  body.show-sidebar #wrapper { margin-left: 0 !important; }
  body.show-sidebar #wrapper:after { background-color: rgba(17, 24, 39, .42) !important; z-index: 1034 !important; }
  #setup-menu-wrapper { width: min(288px, 86vw) !important; z-index: 1036; }

  /* compact top bar: one logo, search as a full-width row under the bar */
  #header { height: auto !important; }
  #logo { display: none !important; }
  .small-logo { display: flex !important; align-items: center; height: var(--header-h); }
  #header nav .navbar-right {
    display: block !important;
    float: none !important;
    clear: both;
    margin: 0 !important;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  #header nav .navbar-right:not(:has(#top_search)) { display: none !important; }
  #header nav .navbar-right > li { display: none !important; }
  #header nav .navbar-right > li#top_search { display: block !important; float: none; width: 100%; }
  #header nav .navbar-right #search_input { width: 100% !important; margin: 0 !important; }
  #header nav .navbar-right #search_results > *, #header nav .navbar-right .dropdown-menu {
    left: 0 !important; right: 0 !important; width: auto !important;
  }
  #header .hide-menu { width: 48px; }
  .small-logo img { height: 26px !important; }
  #header .mobile-menu .mobile-menu-toggle { color: var(--fg-2) !important; }
  #mobile-collapse.mobile-navbar { box-shadow: var(--sh-lg); border-bottom: 1px solid var(--border); }
  /* search moves into #mobile-search under the bar */
  #mobile-search {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px !important;
  }
  #mobile-search > ul { margin: 0 !important; }
  #mobile-search #search_input, #mobile-search input {
    width: 100% !important;
    margin: 0 !important;
  }
  #mobile-search #search_results > *, #mobile-search .dropdown-menu { left: 0 !important; right: 0 !important; width: auto !important; }

  /* KPI cards in a tidy 2-up grid */
  .top_stats_wrapper { min-height: 0; }
  .top_stats_wrapper > p > span.pull-right { font-size: 22px; }

  /* dialogs: near full-width sheets */
  .modal-dialog { margin: 8px !important; width: auto !important; }
  .modal-content { border-radius: var(--r-lg) !important; }
  .modal-footer .btn { margin-bottom: 4px; }

  /* toolbars: main actions full width (core), icon buttons stay compact */
  .panel-body._buttons > .pull-right, .panel-body._buttons > .display-block { margin-left: 0 !important; }
  .panel-body._buttons > .display-block { display: flex !important; flex-wrap: wrap; gap: 6px; text-align: left !important; }
  .panel-body._buttons > .display-block > * { margin: 0 !important; }
  .panel-body._buttons .display-block .btn, .panel-body._buttons .btn-group .btn,
  .panel-body._buttons .dropdown > .btn, .panel-body._buttons .btn-icon {
    display: inline-block !important; width: auto !important; min-width: 40px; margin: 0 4px 4px 0 !important;
  }
  .btn { padding: 8px 14px; }   /* >= 38px touch targets */
}
@media (max-width: 480px) {
  .content { padding: 12px !important; }
  .panel_s > .panel-body, .panel > .panel-body { padding: 16px; }
  h4, .h4 { font-size: 16px; }
}
/* tooltips only help with a mouse; on touch they stick and cover content */
@media (hover: none), (pointer: coarse) { .tooltip { display: none !important; } }

/* ===========================================================================
   18. COMPACT & RESPONSIVE PASS  (2026-10-08, from live feedback)
   Less chrome, less scrolling, nothing wider than the screen.
   =========================================================================== */

/* 18.1 Nothing may scroll sideways. `clip` (not hidden) keeps the sticky header working. */
html, body { overflow-x: clip; }
img, video, iframe, canvas, svg { max-width: 100%; }
img { height: auto; }

/* 18.2 One border per card. Core draws a second border on every .panel-body
   (`.panel_s .panel-body {border:1px solid #dce1ef}`), so cards were boxes in boxes. */
.panel_s .panel-body {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.panel_s > .panel-body + .panel-body { border-top: 1px solid var(--border) !important; margin-top: 0 !important; }
/* cards nested inside cards (e.g. estimate/invoice side column) become plain sections */
.panel_s .panel_s {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}
.panel_s .panel_s > .panel-body { padding: 0 !important; }

/* 18.3 Tighter rhythm everywhere */
.content { padding: 20px 24px 32px !important; }
.panel_s, .panel, .top_stats_wrapper { margin-bottom: 16px; }
.panel_s > .panel-body, .panel > .panel-body { padding: 16px 18px; }
.form-group { margin-bottom: 14px; }
label, .control-label { margin-bottom: 4px; }
hr { margin: 14px 0; }
.mtop30 { margin-top: 20px !important; }
.table > tbody > tr > td { padding: 10px 12px !important; }
.table > thead > tr > th, table.dataTable thead th { padding: 9px 12px !important; }

/* 18.4 Sticky save bar never covers the end of a form */
body:has(.btn-bottom-toolbar) .content { padding-bottom: 96px !important; }
.btn-bottom-pusher { height: 0; margin: 0; }

/* 18.5 Dashboard ------------------------------------------------------------ */
.screen-options-btn {
  top: 14px !important;
  right: 24px !important;
  padding: 4px 12px !important;
  font-size: 13px;
  color: var(--fg-2) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow: none !important;
}
.screen-options-area { border-radius: var(--r-lg); border-color: var(--border) !important; box-shadow: none !important; }

/* KPI cards: icon + label on one line, figure below, bar at the foot.
   Same height for every card whatever the label length. */
.top_stats_wrapper { min-height: 0 !important; padding: 14px 16px !important; position: relative; }
.top_stats_wrapper > p {
  flex-wrap: nowrap !important;
  overflow: hidden;
  height: 30px;
  margin: 0 0 40px !important;
  font-size: 13px;
}
.top_stats_wrapper > p > i { width: 30px !important; height: 30px !important; flex: none; font-size: 14px; border-radius: 8px; }
.top_stats_wrapper > p > span.pull-right {
  position: absolute;
  left: 16px;
  top: 52px;
  width: auto !important;
  font-size: 24px !important;
}

/* Finance overview: percentage on the label's line, bar right under it */
.home-summary hr { margin: 10px 0 12px !important; }
.home-summary .text-stats-wrapper a { margin-bottom: 0 !important; font-size: 13.5px; }
.home-summary .progress-finance-status {
  margin: -20px 0 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.home-summary .progress-finance-status .progress { margin-top: 6px !important; }
/* chart cards a little shorter */
.widget .relative[style*="height:250px"], .widget .relative[style*="height: 250px"] { height: 220px !important; }

/* 18.6 Images & previews ------------------------------------------------------ */
#settings-form .panel-body .row img.img-responsive,
#settings-form .panel-body img.img { max-height: 64px; width: auto; }
#settings-form .favicon img { max-height: 40px !important; }
[class*="-html-logo"] img, .invoice-html-logo img, .estimate-html-logo img, .proposal-html-logo img {
  max-height: 52px;
  width: auto;
  mix-blend-mode: multiply;          /* the dark logo file has a white box */
}
.media-object, .media-left img { max-width: 48px; }
.panel-body img:not(.img-responsive):not(.staff-profile-image-small):not(.client-profile-image-small) { max-width: 100%; }
.preview-top-wrapper { margin-bottom: 8px; }

/* Client portal footer: core pins it over the page (navbar-fixed-bottom) */
body.customers footer.navbar-fixed-bottom, body.customers footer.footer {
  position: relative !important;
  height: auto !important;
  background: var(--surface) !important;
  margin-top: 24px;
  z-index: auto;
}

/* 18.7 Dialogs: compact, and never wider than the screen --------------------- */
.modal-dialog { max-width: calc(100vw - 24px); }
.modal-header { padding: 12px 16px !important; }
.modal-header .modal-title, .modal-title { font-size: 15px !important; }
.modal-body { padding: 16px !important; }
.modal-footer { padding: 10px 16px !important; }
.modal-footer .btn + .btn { margin-left: 6px; }

/* 18.8 Menus stay on screen ---------------------------------------------------- */
.dropdown-menu { max-width: calc(100vw - 24px); }

@media (max-width: 767px) {
  /* dialogs become bottom sheets (auto top margin keeps tall ones scrollable) */
  .modal.in { display: flex !important; flex-direction: column; padding: 0 !important; }
  .modal.in .modal-dialog {
    margin: auto 0 0 !important;
    width: 100% !important;
    max-width: none;
    transform: none !important;
  }
  .modal-content { border-radius: 16px 16px 0 0 !important; }
  .modal-header { border-radius: 16px 16px 0 0; }
  .modal-footer { border-radius: 0; }
  .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .modal-footer .btn { margin: 0 !important; }

  /* menus: wrap long entries instead of pushing off-screen */
  .dropdown-menu > li > a { white-space: normal; }
  .bootstrap-select > .dropdown-menu { min-width: 100% !important; }

  /* KPI cards: 2 × 2 grid, label above figure */
  #widget-top_stats > .row { margin: 0 -6px; }
  #widget-top_stats > .row > [class*="quick-stats-"] { width: 50%; float: left; padding: 0 6px; }
  .top_stats_wrapper { padding: 12px !important; margin-bottom: 12px; }
  .top_stats_wrapper > p {
    display: block !important;
    height: auto;
    min-height: 2.6em;
    margin: 0 0 6px !important;
    white-space: normal;
    line-height: 1.3;
    font-size: 12.5px;
  }
  .top_stats_wrapper > p > i { display: none !important; }
  .top_stats_wrapper > p > span.pull-right {
    position: static;
    display: block;
    margin-top: 4px;
    font-size: 20px !important;
  }
  .screen-options-btn { top: 8px !important; right: 15px !important; }
  #widget-top_stats { margin-top: 28px; }

  .panel_s > .panel-body, .panel > .panel-body { padding: 14px; }
  .widget .relative[style*="height:250px"], .widget .relative[style*="height: 250px"] { height: 200px !important; }
}
@media (max-width: 480px) {
  /* match Bootstrap's -15px row margins so rows don't poke past the edge */
  .content { padding: 12px 15px 24px !important; }
}

/* 18.9 Overflow fixes found by the 360/390px sweep */
/* a full .row inside the flex toolbar must take the full width, not its content width */
.panel-body._buttons > .row, .panel-body._buttons > .clearfix, .panel-body._buttons > #stats-top {
  flex: 1 1 100%; width: 100%; min-width: 0;
}
/* panel-heading dividers bleed exactly to the card edge, matching the new padding */
.hr-panel-heading, .hr-panel-heading-dashboard { margin: 12px -18px 14px !important; }
@media (max-width: 767px) {
  .hr-panel-heading, .hr-panel-heading-dashboard { margin: 10px -14px 12px !important; }
  /* client portal tables (payments, statements) scroll inside themselves */
  body.customers .table:not(.dataTable) { display: block; width: 100%; overflow-x: auto; }
  body.customers .invoice-payments-table td, body.customers .invoice-payments-table th { white-space: nowrap; }
}
/* pickers never exceed their container; long selections end in "…" */
.bootstrap-select, .bootstrap-select > .dropdown-toggle { max-width: 100%; }
.bootstrap-select .filter-option, .bootstrap-select .filter-option-inner,
.bootstrap-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  #project_view_name { float: none !important; width: 100% !important; max-width: 100%; }
}
/* phone header: timer / notification icons Perfex moves into .mobile-icon-menu
   (were white-on-white with leftover dark-theme borders) */
.mobile-icon-menu > li { border: 0 !important; }
.mobile-icon-menu > li > a { color: var(--fg-2) !important; background: transparent !important; }
.mobile-icon-menu > li > a i.fa { color: var(--muted) !important; font-size: 17px; }
.mobile-icon-menu .icon-total-indicator { background: var(--danger) !important; color: #fff !important; }
@media (max-width: 767px) {
  /* KPI grid: equal-height cards in clean rows */
  #widget-top_stats > .row { display: flex; flex-wrap: wrap; }
  #widget-top_stats > .row > [class*="quick-stats-"] { display: flex; }
  #widget-top_stats .top_stats_wrapper { flex: 1; }
}
@media (max-width: 767px) {
  /* figure sits on the same baseline in every card, whatever the label length */
  #widget-top_stats .top_stats_wrapper { display: flex; flex-direction: column; }
  #widget-top_stats .top_stats_wrapper > p {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
  }
}
/* header always contains its floated children (on phones it collapsed to 1px and
   content showed through) */
#header { display: flow-root; min-height: var(--header-h); }
/* save bar: actions on the right on every screen size (core centres them on phones) */
.btn-bottom-toolbar { text-align: right !important; }
/* tag input looks like every other field */
ul.tagit {
  min-height: 38px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  box-shadow: var(--sh-xs);
}
ul.tagit li.tagit-new { padding: 4px 2px; border: 0 !important; }
ul.tagit li.tagit-new input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
ul.tagit li.tagit-choice {
  background: var(--primary-soft) !important; color: var(--primary-soft-fg) !important;
  border: 0 !important; border-radius: 999px !important; font-weight: 500;
}
@media (min-width: 768px) {
  /* long KPI labels wrap onto a second line beside the icon instead of clipping */
  .top_stats_wrapper > p { white-space: normal !important; line-height: 1.25; height: 34px; font-size: 12.5px; }
}

/* ===========================================================================
   20. STAFF LOGIN — split screen (markup: views/authentication/my_login_admin.php)
   =========================================================================== */
body.rd-auth { background: var(--surface) !important; margin: 0; }
.rd-auth .auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr);
  min-height: 100vh;
}
/* image side */
.rd-auth .auth-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px 44px;
  color: #fff;
  background-color: #0B1F17;
  background-size: cover;
  background-position: center;
}
.rd-auth .auth-visual-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 20, 14, .55) 0%, rgba(5, 20, 14, .10) 38%, rgba(5, 20, 14, .88) 100%),
    linear-gradient(90deg, rgba(5, 20, 14, .35), rgba(5, 20, 14, 0) 60%);
}
.rd-auth .auth-visual > :not(.auth-visual-shade) { position: relative; }
.rd-auth .auth-visual-top img { height: 34px !important; width: auto; filter: none !important; }
.rd-auth .auth-kicker {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .72) !important;
}
/* rotating headline: four lines cross-fade, 4 s each */
.rd-auth .auth-rotator {
  position: relative;
  height: 2.5em;
  max-width: 540px;
  margin: 0 0 22px;
  font-size: 32px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff !important;
}
.rd-auth .auth-rotator span {
  position: absolute; left: 0; top: 0; right: 0;
  opacity: 0;
  animation: authRotate 16s infinite;
}
.rd-auth .auth-rotator span:nth-child(2) { animation-delay: 4s; }
.rd-auth .auth-rotator span:nth-child(3) { animation-delay: 8s; }
.rd-auth .auth-rotator span:nth-child(4) { animation-delay: 12s; }
@keyframes authRotate {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: none; }
  22%  { opacity: 1; transform: none; }
  26%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; }
}
.rd-auth .auth-dots { display: flex; gap: 6px; }
.rd-auth .auth-dots i {
  width: 22px; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .28);
  animation: authDot 16s infinite;
}
.rd-auth .auth-dots i:nth-child(2) { animation-delay: 4s; }
.rd-auth .auth-dots i:nth-child(3) { animation-delay: 8s; }
.rd-auth .auth-dots i:nth-child(4) { animation-delay: 12s; }
@keyframes authDot { 0%, 24% { background: #fff; } 26%, 100% { background: rgba(255, 255, 255, .28); } }
@media (prefers-reduced-motion: reduce) {
  .rd-auth .auth-rotator span, .rd-auth .auth-dots i { animation: none; }
  .rd-auth .auth-rotator span:first-child { opacity: 1; }
}
/* form side */
.rd-auth .auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 28px 28px;
  background: var(--surface);
}
body.rd-auth .auth-card.authentication-form {
  width: 100%;
  max-width: 380px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rd-auth .auth-logo { margin-bottom: 32px; }
.rd-auth .auth-logo img { height: 34px !important; width: auto; filter: none !important; }
.rd-auth h1 {
  margin: 0 0 6px !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  text-align: left !important;
  color: var(--fg) !important;
  letter-spacing: -.02em;
}
.rd-auth .auth-sub { margin: 0 0 26px; color: var(--muted); font-size: 14.5px; }
.rd-auth .form-group { margin-bottom: 16px; }
.rd-auth .form-control { height: 44px !important; font-size: 15px; }
.rd-auth .auth-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 2px 0 20px;
  font-size: 13.5px;
}
.rd-auth .auth-row .checkbox { margin: 0; }
.rd-auth .auth-row a { font-weight: 500; }
.rd-auth .btn-info { height: 44px !important; font-size: 15px !important; font-weight: 600 !important; }
.rd-auth .auth-foot { margin: 36px 0 0; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .rd-auth .auth-split { grid-template-columns: 1fr; }
  .rd-auth .auth-visual { display: none; }
  .rd-auth .auth-panel { justify-content: flex-start; padding-top: 12vh; }
}

/* ===========================================================================
   21. CALM NAVIGATION — no bold jumps, no chips, no heavy hover fills
   =========================================================================== */
#side-menu > li > a, #setup-menu > li > a { transition: background-color .12s, color .12s; }
#side-menu > li > a:hover, #side-menu.nav > li > a:focus,
#setup-menu > li > a:hover, #setup-menu li > a:focus {
  background: rgba(17, 24, 39, .04) !important;
  color: var(--fg) !important;
}
#side-menu > li.active > a, #setup-menu > li.active > a {
  font-weight: 500 !important;                 /* same weight as rest: no text jump */
  background: var(--primary-soft) !important;
  color: var(--primary-soft-fg) !important;
}
/* sub-items: plain text; current one marked on the guide line, not a floating chip */
#side-menu li .nav-second-level li a, #setup-menu li .nav-second-level li a { position: relative; font-weight: 400 !important; }
#side-menu li .nav-second-level li a:hover, #setup-menu li .nav-second-level li a:hover {
  background: transparent !important;
  color: var(--fg) !important;
}
#side-menu li .nav-second-level li.active a, #setup-menu li .nav-second-level li.active a {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--primary-soft-fg) !important;
  font-weight: 500 !important;
}
#side-menu li .nav-second-level li.active a::before, #setup-menu li .nav-second-level li.active a::before {
  content: "";
  position: absolute;
  left: -11px; top: 7px; bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--primary);
}
/* header icons and dropdown items: light touch */
#header .navbar-right > li > a:hover > i.fa { background: rgba(17, 24, 39, .05); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: rgba(17, 24, 39, .04) !important; }

/* ===========================================================================
   22. CLIENT DOCUMENT PAGES — estimate / invoice (public links sent to clients)
   =========================================================================== */
body.viewinvoice #content > .container, body.viewestimate #content > .container { max-width: 1060px; }
/* core indents the document with col-md-10 + offset-1: use the full card */
body.customers .panel_s > .panel-body > .col-md-10.col-md-offset-1 { width: 100%; margin-left: 0; float: none; padding: 0; }
body.viewinvoice #content .panel_s, body.viewestimate #content .panel_s {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-sm) !important;
}
body.viewinvoice #content .panel_s > .panel-body, body.viewestimate #content .panel_s > .panel-body { padding: 36px 40px !important; }
body.customers address { line-height: 1.6; color: var(--fg-2); margin-bottom: 0; }
body.customers .transaction-html-info-col-right address { margin-top: 2px; }
/* items: short columns never wrap ("CGST 9.00%" stays on one line) */
body.customers table.items th, body.customers table.items td:not(.description) { white-space: nowrap; }
body.customers table.items td.description { min-width: 240px; }
body.customers table.items td { vertical-align: top !important; }
/* totals: compact block on the right, total row emphasised */
body.customers .panel-body .col-md-6.col-md-offset-6 { width: auto; min-width: 360px; float: right; margin-left: 0; }
body.customers .panel-body .col-md-6.col-md-offset-6 table td { padding: 9px 0 9px 24px !important; border-top: 1px solid var(--border) !important; }
body.customers .panel-body .col-md-6.col-md-offset-6 table tr:first-child td { border-top: 0 !important; }
body.customers .panel-body .col-md-6.col-md-offset-6 table td .bold { font-weight: 500; color: var(--muted); }
body.customers .panel-body .col-md-6.col-md-offset-6 table tr:last-child td {
  font-size: 17px; font-weight: 650; color: var(--fg);
  border-top: 2px solid var(--fg) !important;
}
body.customers .panel-body .col-md-6.col-md-offset-6 table tr:last-child td .bold { color: var(--fg); font-weight: 650; }
body.customers [class*="-html-total-to-words"] p { color: var(--muted); font-weight: 500; }
body.customers [class*="-html-note"], body.customers [class*="-html-terms-and-conditions"] { color: var(--fg-2); line-height: 1.65; }
@media (max-width: 767px) {
  body.viewinvoice #content .panel_s > .panel-body, body.viewestimate #content .panel_s > .panel-body { padding: 20px 16px !important; }
  body.customers .transaction-html-info-col-right { text-align: left !important; margin-top: 18px; }
  body.customers .panel-body .col-md-6.col-md-offset-6 { float: none; min-width: 0; width: 100%; }
  body.customers table.items td.description { min-width: 200px; }
}

/* ===========================================================================
   23. CLIENT PORTAL — login split screen + top menu
   (markup: views/themes/perfex/views/my_login.php; visuals reuse §20)
   =========================================================================== */
/* login page is full-screen like the staff login: no portal header/footer */
body.customers_login { background: var(--surface) !important; }
body.customers_login .navbar.header, body.customers_login footer, body.customers_login .footer { display: none !important; }
body.customers_login #content { padding: 0 !important; }
body.customers_login #content > .container { width: 100%; max-width: none; padding: 0; }
body.customers_login #content > .container > .row { margin: 0; }
.rd-auth-client .auth-card { width: 100%; max-width: 380px; }
.rd-auth-client .auth-logo a { display: inline-block; }
.rd-auth-client .auth-row .checkbox label { padding-left: 4px; }
.rd-auth-client .auth-alt { margin: 20px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.rd-auth-client .auth-alt a, .rd-auth-client .auth-foot a { font-weight: 500; }
.rd-auth-client .auth-foot a { color: var(--muted); }
.rd-auth-client .auth-foot a:hover { color: var(--fg); }

/* top menu: one line, quiet hover; the stock theme turns "Login" into an
   inline white button with a 90px line-height, which wraps it to a 2nd row */
body.customers .navbar-default .navbar-nav > li > a { white-space: nowrap; }
body.customers .navbar-default .navbar-nav > li > a:hover { box-shadow: none; color: var(--fg) !important; }
body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a {
  display: block;
  line-height: 20px !important;
  margin: 14px 0 14px 8px;
  padding: 7px 16px !important;
  border-radius: 999px;
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none;
}
body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover { background: var(--primary-hover) !important; }
@media (max-width: 767px) {
  body.customers .navbar-default .navbar-nav > li > a { padding: 11px 16px !important; }
  body.customers .navbar-default .navbar-nav > .active > a { box-shadow: inset 2px 0 0 var(--primary); }
  body.customers .navbar-default .navbar-nav > li.customers-nav-item-login > a { margin: 8px 16px 12px; text-align: center; }
  body.customers .navbar-collapse { border-top: 1px solid var(--border) !important; box-shadow: none !important; }
}
/* knowledge base: search field and button share one height; list not double-indented */
body.customers .kb-search-input, body.customers .kb-search-button { height: 46px !important; }
body.customers .kb-search-button { padding: 0 20px !important; line-height: 46px !important; margin: 0 !important; }
body.customers .kb-search-icon { top: 0 !important; height: 46px !important; line-height: 46px !important; z-index: 3; }
body.customers .col-md-12:has(> .article_group_wrapper) { padding-left: 0; padding-right: 0; }
body.customers .article_group_wrapper { padding: 14px 0; }


/* ===========================================================================
   30. PERFEX 3.0.6 FIXES
   =========================================================================== */
/* 30.1 Layout. In 3.0.6 the logo is the first row of the sidebar and the header
   lives inside #wrapper, so the sidebar runs full height from the top. */
@media (min-width: 769px) {
  aside#menu.sidebar { top: 0 !important; padding: 0 !important; }
}
aside#menu, #menu { padding: 0 !important; }
#side-menu { padding-top: 0 !important; }
#side-menu > li:first-child {
  margin: 0 -10px 8px !important;   /* undo core -tw-mx-2, span the full sidebar */
  background: transparent !important;
  position: sticky; top: 0; z-index: 2;
}
#menu #logo {
  height: var(--header-h) !important;
  padding: 0 20px !important;
  background: #FBFBFC;
  border-bottom: 1px solid var(--border);
}
#menu #logo a { display: flex; align-items: center; }
/* The uploaded admin logo is white (made for a dark sidebar). Show the blue logo
   uploaded as "Company logo (dark)" instead. If the logo is replaced in
   Setup → Settings → General, update this file name. */
#menu #logo img {
  content: url("../../uploads/company/789995bc1c24303abe72a06ac7145a09.png");
  filter: none !important;
  height: 30px !important; width: auto !important; max-width: 180px;
}

/* 30.2 Tailwind "primary" (blue in core) → Reydaar violet */
.tw-text-primary-600, .hover\:tw-text-primary-600:hover, .\!tw-text-primary-600 { color: var(--primary) !important; }
.tw-text-primary-700, .hover\:tw-text-primary-700:hover { color: var(--primary-hover) !important; }
.tw-bg-primary-600 { background-color: var(--primary) !important; }
.group:hover .group-hover\:\!tw-bg-primary-700, .tw-group:hover .group-hover\:\!tw-bg-primary-700 { background-color: var(--primary-hover) !important; }
.tw-bg-primary-50, .tw-bg-primary-100 { background-color: var(--primary-soft) !important; }
.tw-ring-primary-500, .focus\:tw-ring-primary-500:focus { --tw-ring-color: var(--ring) !important; }
.tw-border-primary-500, .tw-border-primary-600 { border-color: var(--primary) !important; }

/* 30.3 Core blue (#2563eb) left in style.css */
.dropzone .dz-message { color: var(--primary); }
.dropzone .dz-preview .dz-image, .dz-details, .dz-details:hover { background: var(--primary); }
.task-user:hover, .task-user:active { border-color: var(--primary); }
.task-info-col { border-color: var(--border) !important; border-radius: var(--r); }
.jquery-comments .highlight-background { background: var(--primary) !important; }
.jquery-comments .textarea-wrapper .textarea:focus { border-color: var(--primary); }

/* 30.4 Header quick-create "+" : brand button, keyboard focus ring */
#header li.icon > a > span.tw-rounded-full { background: var(--primary) !important; box-shadow: var(--sh-sm); }
#header li.icon > a:hover > span.tw-rounded-full { background: var(--primary-hover) !important; }

/* 30.5 Contrast: Perfex 3 fills (bg-*) carry white text at 2.3–2.9:1 */
.bg-warning:not(.progress-bar) { background-color: #B45309 !important; color: #fff !important; }   /* 5.0:1 */
.bg-success:not(.progress-bar) { background-color: #15803D !important; color: #fff !important; }   /* 5.0:1 */
.bg-info:not(.progress-bar)    { background-color: #0369A1 !important; color: #fff !important; }   /* 5.9:1 */
.bg-danger:not(.progress-bar)  { background-color: var(--danger) !important; color: #fff !important; }
/* header notification count: red like every other "new" counter */
#header .bg-warning.tw-rounded-full { background-color: var(--danger) !important; box-shadow: 0 0 0 2px var(--surface); }
/* payment receipt amount block */
.payment-preview-wrapper { background: var(--mint) !important; color: var(--mint-fg) !important; border: 1px solid #CBEBD9; border-radius: var(--r-lg) !important; }
/* rows Perfex flags red (expired contracts, overdue…): darker red text, same tint */
.table > tbody > tr.danger > td, table.dataTable tbody tr.danger td { color: #B42318 !important; }
/* Tailwind neutral-500 links/labels (report menus, hints) were 4.45:1 */
.tw-text-neutral-500, .tw-text-neutral-400 { color: var(--muted) !important; }
/* active rows (modules list) */
.table > tbody > tr.info > td, table.dataTable tbody tr.info td { color: var(--sky-fg) !important; }
/* file manager (Utilities → Media) folder tree */
/* (the folder tree sits on elFinder's grey panel: light text, 6.6:1) */
.elfinder .elfinder-navbar-dir { color: #fff !important; }

/* 30.6 Staff / client login: brand panel instead of a photo. Same violet as
   reydaar.com, darkest where the text sits (bottom-left), logo rings echoed
   as soft circles, one orange spark. */
.rd-auth .auth-visual-brand {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 116, 38, .55) 0 7px, transparent 8px),
    repeating-radial-gradient(circle at 100% 0%, rgba(255,255,255,.07) 0 2px, transparent 2px 46px),
    linear-gradient(20deg, #221E45 0%, #3B3388 38%, #6254E7 78%, #8F86F0 100%) !important;
}
.rd-auth .auth-visual-brand .auth-visual-shade {
  background: linear-gradient(180deg, rgba(20, 17, 45, 0) 45%, rgba(20, 17, 45, .45) 100%);
}
.rd-auth .auth-dots i { background: rgba(255, 255, 255, .35); }
.rd-auth .auth-logo img { height: 38px !important; }
.rd-auth .btn-primary { height: 44px !important; font-size: 15px !important; font-weight: 600 !important; }

/* 30.7 KPI cards, 3.0.6 markup (div label + span figure, not 2.8.2's p > i).
   Label in full on its own line (may wrap), the figure large underneath, bar at
   the foot; equal heights in a row. */
#widget-top_stats .top_stats_wrapper { display: flex; flex-direction: column; height: 100%; padding: 16px !important; }
#widget-top_stats .top_stats_wrapper > div:first-child {
  flex-direction: column; align-items: flex-start !important; gap: 8px; margin-top: 0 !important; flex: 1;
}
#widget-top_stats .top_stats_wrapper > div:first-child > div,
#widget-top_stats .top_stats_wrapper > div:first-child > div > span.tw-truncate {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  color: var(--fg-2) !important; font-size: 13.5px; line-height: 1.3;
}
#widget-top_stats .top_stats_wrapper > div:first-child > div > svg {
  flex: none; width: 30px !important; height: 30px !important; padding: 6px; border-radius: 8px;
}
#widget-top_stats .quick-stats-invoices svg { background: var(--peach); color: var(--peach-fg) !important; }
#widget-top_stats .quick-stats-leads svg { background: var(--lavender); color: var(--lavender-fg) !important; }
#widget-top_stats .quick-stats-projects svg { background: var(--sky); color: var(--sky-fg) !important; }
#widget-top_stats .quick-stats-tasks svg { background: var(--butter); color: var(--butter-fg) !important; }
#widget-top_stats .top_stats_wrapper > div:first-child > span {
  font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--fg) !important; line-height: 1.1;
}
#widget-top_stats > .row { display: flex; flex-wrap: wrap; }
#widget-top_stats > .row > [class*="quick-stats-"] { display: flex; margin-bottom: 12px !important; }
#widget-top_stats > .row > [class*="quick-stats-"] > .top_stats_wrapper { flex: 1; min-width: 0; margin-bottom: 0; }
@media (max-width: 767px) {
  #widget-top_stats > .row > [class*="quick-stats-"] { width: 50% !important; float: none; padding: 0 6px; }
  #widget-top_stats .top_stats_wrapper { padding: 12px !important; }
  #widget-top_stats .top_stats_wrapper > div:first-child > div > svg { display: none; }
  #widget-top_stats .top_stats_wrapper > div:first-child > div, 
  #widget-top_stats .top_stats_wrapper > div:first-child > div > span.tw-truncate { font-size: 12.5px; }
  #widget-top_stats .top_stats_wrapper > div:first-child > span { font-size: 20px; }
}

/* 30.8 Phone header (3.0.6): the search box flexes instead of a fixed 340px, so
   the icon menu and the ⌄ toggle stay on screen */
@media (max-width: 767px) {
  #header nav > div { align-items: center; }
  #header nav > div > div:first-child { min-width: 0; }
  #top_search { min-width: 0; flex: 1 1 auto !important; }
  #top_search input#search_input, #search_input { width: 100% !important; min-width: 0; margin-top: 0 !important; }
  #top_search_button { top: 50% !important; margin-top: 0 !important; transform: translateY(-50%); }
  #header .mobile-menu { margin-left: 6px !important; margin-right: 8px; display: flex; align-items: center; }
  #header .mobile-icon-menu { margin-top: 0 !important; }
  #header .mobile-menu-toggle { margin: 0 !important; padding: 8px !important; }
}

/* file manager: selected folder keeps white text */
.elfinder .elfinder-navbar-dir.ui-state-active, .elfinder .elfinder-navbar-dir.ui-state-hover { color: #fff !important; }
@media (max-width: 767px) {
  /* two-line label slot, so figures line up across a row whatever the label length */
  #widget-top_stats .top_stats_wrapper > div:first-child > div { min-height: 2.6em; align-items: flex-start !important; }
  #widget-top_stats { margin-bottom: 4px; }
}

/* 30.9 Client portal header (3.0.6): links are inline there, so their padding
   spilled above the bar; centre logo, links and avatar on one 64px line */
@media (min-width: 768px) {
  body.customers .navbar.header .navbar-collapse { display: flex !important; align-items: center; justify-content: flex-end; height: 64px; }
  body.customers .navbar.header .navbar-nav { display: flex; align-items: center; margin: 0 !important; float: none; }
  body.customers .navbar.header .navbar-nav > li { float: none; }
  body.customers .navbar.header .navbar-nav > li > a { display: flex !important; align-items: center; height: 64px; padding: 0 12px !important; line-height: 1 !important; }
  body.customers .navbar.header .navbar-brand { display: flex; align-items: center; height: 64px; padding: 0 !important; }
  body.customers .navbar.header .navbar-brand img { height: 32px !important; width: auto; }
}
body.customers .navbar.header .navbar-nav > li > a { display: block; }

/* 30.10 Client-facing documents on phones: the action row (PDF · portal ·
   decline · accept) wraps instead of pushing "Accept" off the screen */
@media (max-width: 767px) {
  .preview-sticky-container .tw-flex.tw-items-end.tw-space-x-2 { flex-wrap: wrap; gap: 8px; }
  .preview-sticky-container .tw-flex.tw-items-end.tw-space-x-2 > * { margin: 0 !important; }
  .preview-sticky-container .tw-flex.tw-items-end.tw-space-x-2 > .accept { flex: 1 1 100%; }
}
/* portal summaries: status text coloured inline from settings → dark text + dot */
body.customers dt[style*="color"], body.customers .tw-font-medium[style*="color"] {
  -webkit-text-fill-color: var(--fg-2);
}
body.customers dt[style*="color"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0;
  border-radius: 50%; background: currentColor; vertical-align: middle;
}
/* progress bars that print their % in white */
.progress-bar-success { background-color: #15803D !important; }

/* 30.11 Phone overflow leftovers from the 390px sweep */
.bootstrap-select .filter-option-inner-inner { overflow: hidden; text-overflow: ellipsis; }
.elfinder-button-search input { max-width: calc(100% - 8px); }
@media (max-width: 767px) {
  #wrapper .content .sm\:tw-flex > * { max-width: 100%; min-width: 0; }
  #wrapper .content .sm\:tw-flex > .sm\:tw-border-r { width: auto !important; }
}


/* ===========================================================================
   31. CA (ACCOUNTANT) DASHBOARD — modules/reydaar_tweaks/views/ca_dashboard.php
   body.rd-ca is added by the module for the "Chartered Accountant (CA)" role.
   =========================================================================== */
body.rd-ca #side-menu .quick-links,
body.rd-ca .screen-options-btn,
body.rd-ca #header .header-newsfeed,
body.rd-ca #header .header-todo,
body.rd-ca #header .header-timers { display: none !important; }

.ca-gst .panel-body { padding: 24px !important; }
.ca-gst-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ca-gst-title { margin: 0 0 4px !important; font-size: 20px !important; font-weight: 650 !important; color: var(--fg) !important; }
.ca-gst-sub { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 560px; }
.ca-gst-month { flex: 0 0 200px; }
.ca-gst-month .form-control { height: 40px; }
.ca-gst-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ca-gst-stats > div { background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.ca-gst-stats span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.ca-gst-stats strong { display: block; font-size: 20px; font-weight: 650; color: var(--fg); white-space: nowrap; }
.ca-gst-stats small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.ca-gst-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ca-gst-actions form { margin: 0; }
.ca-gst-actions .btn { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.ca-gst-table th, .ca-gst-table td { white-space: nowrap; vertical-align: middle !important; }
.ca-gst-table td.ca-client { white-space: normal; min-width: 180px; }
.ca-gst-table tr.ca-cancelled td { color: var(--muted); text-decoration: line-through; }
.ca-gst-table tr.ca-cancelled td:last-child, .ca-gst-table tr.ca-cancelled td:nth-last-child(2) { text-decoration: none; }
.ca-gst-empty { padding: 24px 0; color: var(--muted); text-align: center; }
@media (max-width: 991px) { .ca-gst-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ca-gst .panel-body { padding: 16px !important; }
  .ca-gst-head { flex-direction: column; }
  .ca-gst-month { flex: none; width: 100%; }
  .ca-gst-stats strong { font-size: 17px; }
  .ca-gst-actions .btn { width: 100%; justify-content: center; }
  .ca-gst-actions form { width: 100%; }
}
.ca-gst-table td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ca-gst .ca-gst-table > tbody > tr > td.ca-client { min-width: 150px; white-space: normal !important; }
.ca-gst .ca-gst-table > thead > tr > th, .ca-gst .ca-gst-table > tbody > tr > td { padding: 10px 8px !important; }
.ca-gst .ca-gst-table > thead > tr > th:first-child, .ca-gst .ca-gst-table > tbody > tr > td:first-child { padding-left: 0 !important; }
.ca-gst .ca-gst-table > thead > tr > th:last-child, .ca-gst .ca-gst-table > tbody > tr > td:last-child { padding-right: 0 !important; }
.ca-gst-table .ca-status-inline { display: none !important; }
@media (max-width: 1199px) {
  .ca-gst-table .ca-status { display: none; }
  .ca-gst-table .ca-status-inline { display: block !important; margin-top: 4px; }
}
/* phones: each invoice becomes a compact card */
@media (max-width: 767px) {
  .ca-gst-table thead { display: none; }
  .ca-gst-table, .ca-gst-table tbody { display: block; }
  .ca-gst-table tr {
    display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
    padding: 12px 0; border-top: 1px solid var(--border);
  }
  .ca-gst .ca-gst-table > tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal !important; min-width: 0; }
  .ca-gst .ca-gst-table > tbody > tr > td.ca-client { grid-column: 1 / -1; order: -1; font-weight: 600; color: var(--fg); }
  .ca-gst-table td:nth-child(1) { order: 1; }
  .ca-gst .ca-gst-table > tbody > tr > td.ca-total { order: 2; text-align: right !important; }
  .ca-gst-table td:nth-child(3) { order: 3; }
  .ca-gst-table td:nth-child(4) { order: 4; }
  .ca-gst-table td:last-child { order: 5; }
  .ca-gst-table td:nth-child(3)::before { content: "Taxable "; color: var(--muted); }
  .ca-gst-table td:nth-child(4)::before { content: "GST "; color: var(--muted); }
  .ca-gst .ca-gst-table > tbody > tr > td:nth-child(4) { text-align: right !important; }
  .ca-gst .ca-gst-table > tbody > tr > td.ca-status { display: none; }
  .ca-gst-table td:last-child { grid-column: 1 / -1; }
  .ca-gst-table td:last-child .btn { width: 100%; }
}

/* ===========================================================================
   32. SALES REPORT, SALES GROWTH CHART, CA "FILED" TICKS, DOCUMENTS
   (modules/reydaar_tweaks/views/sales_report.php, sales_growth.php, documents.php)
   =========================================================================== */
/* segmented switch: Month | Financial year | Custom, All | Not filed | Filed */
.rd-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border-radius: 10px; flex-wrap: wrap; }
.rd-seg a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--fg-2) !important; white-space: nowrap; text-decoration: none !important; }
.rd-seg a:hover { color: var(--fg) !important; }
.rd-seg a.active { background: var(--surface); color: var(--fg) !important; box-shadow: 0 1px 2px rgba(17, 24, 39, .08); }

.rd-report .panel-body { padding: 24px !important; }
.rd-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rd-report-title { margin: 0 0 4px !important; font-size: 20px !important; font-weight: 650 !important; color: var(--fg) !important; }
.rd-report-sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
.rd-report-head .rd-report-sub { margin: 0; }
.rd-report-filter, .rd-doc-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 18px; }
.rd-report-filter label, .rd-doc-upload label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.rd-report-filter .form-control, .rd-doc-upload .form-control { height: 38px; min-width: 170px; }
.rd-report-filter .btn, .rd-doc-upload .btn { height: 38px; }
.rd-report-note { font-size: 12.5px; color: var(--muted); align-self: center; }
.rd-report-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rd-report-table th, .rd-report-table td { white-space: nowrap; }
.rd-report-table tr.rd-empty-month td { color: var(--muted); }
.rd-report-table tfoot th { border-top: 2px solid var(--fg) !important; color: var(--fg) !important; font-weight: 650 !important; }
@media (max-width: 1199px) { .rd-report-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .rd-report .panel-body { padding: 16px !important; }
  .rd-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-report-filter label, .rd-doc-upload label { flex: 1 1 100%; }
  .rd-report-filter .form-control, .rd-doc-upload .form-control { width: 100%; min-width: 0; }
}

/* admin dashboard: sales growth */
.rd-growth .panel-body { padding: 20px 24px !important; }
.rd-growth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rd-growth-title { margin: 0 0 4px !important; font-size: 16px !important; font-weight: 650 !important; color: var(--fg) !important; }
.rd-growth-title small { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.rd-growth-kpi { margin: 0; font-size: 13.5px; color: var(--fg-2); }
.rd-growth-kpi span { color: var(--muted); }
.rd-growth-kpi em { font-style: normal; font-weight: 600; margin-left: 6px; padding: 1px 8px; border-radius: 999px; }
.rd-growth-kpi em.up { background: var(--mint); color: var(--mint-fg); }
.rd-growth-kpi em.down { background: var(--rose); color: var(--rose-fg); }
.rd-growth-chart { position: relative; height: 280px; }
.rd-growth-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 500; }

/* CA dashboard: filed filter + tick */
.ca-gst-filter { margin-bottom: 10px; }
.ca-gst .ca-actions { white-space: nowrap; }
.ca-gst .ca-actions > * { display: inline-block; vertical-align: middle; margin-left: 6px; }
.ca-filed-form { margin: 0; }
.ca-filed { background: var(--surface); border: 1px solid var(--border-strong) !important; color: var(--fg-2) !important; }
.ca-filed.is-filed { background: var(--mint) !important; border-color: transparent !important; color: var(--mint-fg) !important; font-weight: 600; }
@media (max-width: 767px) {
  .ca-gst .ca-gst-table > tbody > tr > td.ca-actions { display: flex; gap: 8px; }
  .ca-gst .ca-actions > * { margin: 0; flex: 1; }
  .ca-gst .ca-actions .btn { width: 100%; }
}

/* documents */
.rd-doc-file .form-control { padding-top: 7px; min-width: 240px; }
.rd-doc-fy { margin: 22px 0 8px !important; font-size: 14px !important; font-weight: 650 !important; color: var(--fg) !important; }
.rd-doc-list { list-style: none; margin: 0; padding: 0; }
.rd-doc-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.rd-doc-list li > .fa { color: var(--muted); font-size: 16px; }
.rd-doc-meta { flex: 1; min-width: 0; }
.rd-doc-meta strong { display: block; color: var(--fg); font-weight: 600; }
.rd-doc-meta small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.rd-doc-list form { margin: 0; }
.rd-doc-del { color: var(--rose-fg) !important; }
/* phones: each month becomes a small card (label before each figure) */
@media (max-width: 767px) {
  .rd-report-table thead { display: none; }
  .rd-report-table, .rd-report-table tbody, .rd-report-table tfoot { display: block; }
  .rd-report-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
  .rd-report .rd-report-table > tbody > tr > td, .rd-report .rd-report-table > tfoot > tr > th {
    display: block; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal;
  }
  .rd-report-table tr > :first-child { grid-column: 1 / -1; font-weight: 650; color: var(--fg); }
  .rd-report-table tr > :nth-child(2)::before { content: "Invoices "; }
  .rd-report-table tr > :nth-child(3)::before { content: "Sales "; }
  .rd-report-table tr > :nth-child(4)::before { content: "GST "; }
  .rd-report-table tr > :nth-child(5)::before { content: "Invoiced "; }
  .rd-report-table tr > :nth-child(6)::before { content: "Received "; }
  .rd-report-table tr > :not(:first-child)::before { color: var(--muted); font-weight: 400; }
  .rd-report-table tfoot tr { border-top: 2px solid var(--fg); }
}
/* CA workspace: no quick-create menu in the header (the CA never creates records) */
body.rd-ca #header .navbar-nav.visible-md.visible-lg { display: none !important; }
@media (max-width: 767px) {
  /* Bootstrap draws a border round .table-responsive on phones; the CA / report
     tables become cards there, so the frame was an empty box above the first card */
  .ca-gst .table-responsive, .rd-report .table-responsive { border: 0 !important; margin-bottom: 0; }
}