@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&display=swap');
/* ==========================================================================
   PERFEX CRM - UI MODERNIZATION LAYER
   --------------------------------------------------------------------------
   A purely presentational design-system overlay.

   HOW IT LOADS
   Perfex core already registers this file automatically, last in the admin
   CSS group (application/helpers/assets_helper.php -> "custom-css", which
   depends on "app-css"). Nothing else had to be wired up.

   Cascade order:
     vendor-admin.css -> tailwind.css -> style.css -> custom.css -> theme_style

   GUARANTEES
   - No PHP, JS, markup, route, schema, or build change is required.
   - Nothing is hidden or removed; only repainted and re-spaced.
   - The Theme Style module still wins (it prints an inline style block after
     this file), so any colours an admin configured there keep working.
   - Deleting this single file restores the previous look exactly.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Surfaces - white first */
  --ax-surface:        #ffffff;   /* cards, panels, tables, sidebar */
  --ax-canvas:         #f8fafc;   /* app background behind cards    */
  --ax-subtle:         #f1f5f9;   /* table heads, hovers, wells     */

  /* Text */
  --ax-text:           #0f172a;   /* primary            */
  --ax-text-2:         #475569;   /* secondary / body   */
  --ax-text-3:         #94a3b8;   /* muted / meta       */

  /* Lines */
  --ax-border:         #e2e8f0;
  --ax-border-strong:  #cbd5e1;

  /* Brand - one accent: a deep indigo.
     600 is the anchor; every other step is built around it so the whole
     interface can be re-tinted from this one block. */
  --ax-p-50:  #f2f2fa;
  --ax-p-100: #e4e4f3;
  --ax-p-200: #c8c7e7;
  --ax-p-300: #a4a3d6;
  --ax-p-400: #7a79be;
  --ax-p-500: #5655a5;
  --ax-p-600: #3b3a8f;
  --ax-p-700: #323177;
  --ax-p-800: #2b2a62;
  --ax-p-900: #252450;
  --ax-p-950: #171632;

  /* Semantic - used only to signal meaning, never for decoration */
  --ax-success: #16a34a; --ax-success-bg: #f0fdf4; --ax-success-fg: #15803d; --ax-success-bd: #bbf7d0;
  --ax-danger:  #dc2626; --ax-danger-bg:  #fef2f2; --ax-danger-fg:  #b91c1c; --ax-danger-bd:  #fecaca;
  --ax-warning: #d97706; --ax-warning-bg: #fffbeb; --ax-warning-fg: #b45309; --ax-warning-bd: #fde68a;
  --ax-info:    #0284c7; --ax-info-bg:    #f0f9ff; --ax-info-fg:    #0369a1; --ax-info-bd:    #bae6fd;

  /* Radius - a touch softer all round, which is most of why the reference
     interface reads as calm rather than boxy */
  --ax-r-sm: 6px;
  --ax-r:    8px;
  --ax-r-lg: 12px;
  --ax-r-xl: 14px;

  /* Elevation - restrained, near flat */
  --ax-sh-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --ax-sh-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
  --ax-sh-md: 0 2px 4px -2px rgb(15 23 42 / 0.06), 0 4px 12px -2px rgb(15 23 42 / 0.08);
  --ax-sh-lg: 0 8px 24px -4px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.06);

  /* Focus ring */
  --ax-ring: 0 0 0 3px rgb(59 58 143 / 0.18);
}


/* ==========================================================================
   2. BASE + TYPOGRAPHY
   ========================================================================== */
body {
  background: var(--ax-canvas);
  color: var(--ax-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ax-text);
  font-weight: 600;
  letter-spacing: -0.011em;
}

h1, .h1 { font-size: 24px;   line-height: 1.28; }
h2, .h2 { font-size: 20px;   line-height: 1.30; }
h3, .h3 { font-size: 17px;   line-height: 1.35; }
h4, .h4 { font-size: 15px;   line-height: 1.40; }
h5, .h5 { font-size: 13.5px; line-height: 1.45; }

b, strong { font-weight: 600; color: var(--ax-text); }
hr { border-top-color: var(--ax-border); }

a { color: var(--ax-p-600); }
a:hover, a:focus { color: var(--ax-p-700); }

.text-muted   { color: var(--ax-text-3); }
.text-primary { color: var(--ax-p-600); }
.text-info    { color: var(--ax-info-fg); }
.text-success { color: var(--ax-success-fg); }
.text-danger  { color: var(--ax-danger-fg); }
.text-warning { color: var(--ax-warning-fg); }

/* Keyboard focus always visible */
:focus-visible {
  outline: 2px solid var(--ax-p-600);
  outline-offset: 2px;
}

/* Thin, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
  background-clip: content-box;
}


/* ==========================================================================
   3. BRAND RE-MAP
   Repaints the small set of "primary" utilities the views actually use so the
   accent is consistent everywhere without recompiling Tailwind.
   ========================================================================== */
.tw-bg-primary-50  { background-color: var(--ax-p-50);  }
.tw-bg-primary-100 { background-color: var(--ax-p-100); }
.tw-bg-primary-200 { background-color: var(--ax-p-200); }
.tw-bg-primary-300 { background-color: var(--ax-p-300); }
.tw-bg-primary-400 { background-color: var(--ax-p-400); }
.tw-bg-primary-500 { background-color: var(--ax-p-500); }
.tw-bg-primary-600 { background-color: var(--ax-p-600); }
.tw-bg-primary-700 { background-color: var(--ax-p-700); }
.tw-bg-primary-800 { background-color: var(--ax-p-800); }
.tw-bg-primary-900 { background-color: var(--ax-p-900); }
.tw-bg-primary-950 { background-color: var(--ax-p-950); }
.\!tw-bg-primary-700 { background-color: var(--ax-p-700) !important; }

.tw-text-primary-50  { color: var(--ax-p-50);  }
.tw-text-primary-100 { color: var(--ax-p-100); }
.tw-text-primary-200 { color: var(--ax-p-200); }
.tw-text-primary-300 { color: var(--ax-p-300); }
.tw-text-primary-400 { color: var(--ax-p-400); }
.tw-text-primary-500 { color: var(--ax-p-500); }
.tw-text-primary-600 { color: var(--ax-p-600); }
.tw-text-primary-700 { color: var(--ax-p-700); }
.tw-text-primary-800 { color: var(--ax-p-800); }
.tw-text-primary-900 { color: var(--ax-p-900); }
.tw-text-primary-950 { color: var(--ax-p-950); }

.tw-border-primary-600 { border-color: var(--ax-p-600); }


/* ==========================================================================
   4. LAYOUT SHELL
   The 230px sidebar / 57px header metrics are deliberately unchanged so every
   existing layout calculation, breakpoint and toggle keeps working.
   ========================================================================== */
#wrapper { background: var(--ax-canvas); }

.content { padding: 28px; }

@media (min-width: 1600px) {
  .content { padding: 32px 40px; }
}

/* ---- Header ----------------------------------------------------------- */
#header {
  background: var(--ax-surface);
  border-bottom: 1px solid var(--ax-border);
  box-shadow: none;
}

#header .logo.logo-text {
  color: var(--ax-text);
  letter-spacing: -0.02em;
}

/* Top search - quiet until focused */
#top_search #search_input {
  background-color: var(--ax-subtle) !important;
  border: 1px solid transparent !important;
  color: var(--ax-text) !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#top_search #search_input:hover { background-color: #e9eef5 !important; }
#top_search #search_input:focus {
  background-color: var(--ax-surface) !important;
  border-color: var(--ax-p-400) !important;
  box-shadow: var(--ax-ring) !important;
}

.navbar-nav > li > a { color: var(--ax-text-2); }
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a,
.navbar-nav .open > a:hover,
.navbar-nav .open > a:focus {
  color: var(--ax-text);
  background: transparent;
}
#header li > a.active { background: var(--ax-subtle); }

/* ---- Sidebar ---------------------------------------------------------- */
/* Background / link colour / active colour intentionally carry no
   !important so the Theme Style module can still override them. */
.sidebar {
  background: var(--ax-surface);
  border-right: 1px solid var(--ax-border);
  padding-left: 10px;
  padding-right: 10px;
}
[dir="rtl"] .sidebar {
  border-right: 0;
  border-left: 1px solid var(--ax-border);
}

.sidebar > ul.nav > li { border-left: 0; }
[dir="rtl"] .sidebar > ul.nav > li { border-right: 0; }

.sidebar ul.nav li a {
  color: var(--ax-text-2);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 12px;
  margin-top: 2px;
  border: 1px solid transparent;
  border-radius: var(--ax-r);
  transition: background-color .13s ease, color .13s ease;
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--ax-text-3);
  font-size: 16px;
  margin-right: 12px;
  transition: color .13s ease;
}
[dir="rtl"] .sidebar ul.nav li a i.menu-icon { margin-right: 0; margin-left: 12px; }

/* Replace the old raised "white card" hover with a flat tint */
.sidebar > ul.nav > li:hover a:first-child,
.sidebar > ul.nav > li.active a:first-child {
  background: var(--ax-subtle);
  border-radius: var(--ax-r);
  border: 1px solid transparent;
  box-shadow: none;
}

.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus { color: var(--ax-text); }
.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:focus .menu-icon { color: var(--ax-text-2); }

/* Active top-level item - tinted, not loud */
.sidebar > ul.nav > li.active > a:first-child,
.sidebar > ul.nav > li.active:hover > a:first-child {
  background: var(--ax-p-50);
  border: 1px solid transparent;
  box-shadow: none;
}
.sidebar ul.nav li.active > a { color: var(--ax-p-700); font-weight: 600; }
.sidebar ul.nav li.active > a .menu-icon { color: var(--ax-p-600); }

/* Sub-menu */
.sidebar ul.nav li .nav-second-level { padding-bottom: 4px; }
.sidebar ul.nav li .nav-second-level li a {
  color: var(--ax-text-2);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px 6px 44px;
  border-radius: var(--ax-r-sm);
}
[dir="rtl"] .sidebar ul.nav li .nav-second-level li a { padding: 6px 44px 6px 12px; }

.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
.sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus {
  color: var(--ax-text);
  background: var(--ax-subtle) !important;
}
.sidebar ul.nav li .nav-second-level li.active a {
  color: var(--ax-p-700);
  font-weight: 600;
}

.sidebar .arrow { color: var(--ax-text-3); }

/* Sidebar profile card */
.sidebar-user-profile .profile {
  border-radius: var(--ax-r) !important;
  box-shadow: none !important;
}

/* Sidebar badges */
#side-menu li > a > .badge,
#setup-menu li > a > .badge { font-weight: 600; }

/* Setup / customizer menu */
#setup-menu > li:first-child {
  border-bottom: 1px solid var(--ax-border);
  color: var(--ax-text);
  font-weight: 600;
}
#setup-menu > li > a { padding: 7px 12px; }


/* ==========================================================================
   5. PANELS / CARDS
   White surface, one hairline border, almost no shadow.
   ========================================================================== */
.panel,
.panel_s {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-sh-xs);
  margin-bottom: 24px;
}

.panel-body { padding: 24px; }

.panel-heading {
  background: var(--ax-surface);
  border-bottom: 1px solid var(--ax-border);
  padding: 16px 24px;
  border-top-left-radius: var(--ax-r-lg);
  border-top-right-radius: var(--ax-r-lg);
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ax-text);
  letter-spacing: -0.011em;
}

.panel-footer {
  background: var(--ax-canvas);
  border-top: 1px solid var(--ax-border);
  padding: 14px 24px;
  border-bottom-left-radius: var(--ax-r-lg);
  border-bottom-right-radius: var(--ax-r-lg);
}

/* Tonal panel headings - muted tints instead of saturated blocks */
.panel-default > .panel-heading { background: var(--ax-canvas);     color: var(--ax-text); }
.panel-primary > .panel-heading { background: var(--ax-p-50);       color: var(--ax-p-800); }
.panel-success > .panel-heading { background: var(--ax-success-bg); color: var(--ax-success-fg); }
.panel-info    > .panel-heading { background: var(--ax-info-bg);    color: var(--ax-info-fg); }
.panel-warning > .panel-heading { background: var(--ax-warning-bg); color: var(--ax-warning-fg); }
.panel-danger  > .panel-heading { background: var(--ax-danger-bg);  color: var(--ax-danger-fg); }

.panel > .table + .panel-body,
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive { border-top-color: var(--ax-border); }

.panel_s .hr-panel-heading,
.panel_s .hr-panel-separator,
.panel .hr-panel-heading,
.panel .hr-panel-separator { border-color: var(--ax-border); }

.well {
  background: var(--ax-canvas);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r);
  box-shadow: none;
}


/* ==========================================================================
   6. BUTTONS
   One consistent system: same height, radius, weight and state model.
   ========================================================================== */
.btn,
.btn-group > .btn {
  border-radius: var(--ax-r);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  padding: 8px 14px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color .13s ease, border-color .13s ease,
              color .13s ease, box-shadow .13s ease;
}

.btn-xs, .btn-group > .btn-xs, .btn-group-xs > .btn {
  padding: 3px 8px;   font-size: 11.5px; border-radius: var(--ax-r-sm);
}
.btn-sm, .btn-group > .btn-sm, .btn-group-sm > .btn {
  padding: 5px 11px;  font-size: 12px;   border-radius: var(--ax-r-sm);
}
.btn-lg, .btn-group > .btn-lg, .btn-group-lg > .btn {
  padding: 11px 20px; font-size: 15px;   border-radius: var(--ax-r-lg);
}

.btn:focus, .btn.focus, .btn:focus-visible { box-shadow: var(--ax-ring); outline: none; }
.btn:active, .btn.active { box-shadow: none; }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { opacity: .55; box-shadow: none; }

/* Primary - the single brand action */
.btn-primary {
  background-color: var(--ax-p-600);
  border-color: var(--ax-p-600);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--ax-p-700);
  border-color: var(--ax-p-700);
  color: #fff;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--ax-p-800);
  border-color: var(--ax-p-800);
  color: #fff;
  background-image: none;
}

/* Secondary / default - white with a hairline border */
.btn-default,
.btn-secondary {
  background-color: var(--ax-surface);
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
}
.btn-default:hover, .btn-default:focus, .btn-default.focus,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus {
  background-color: var(--ax-canvas);
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
}
.btn-default:active, .btn-default.active,
.btn-secondary:active, .btn-secondary.active,
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-secondary {
  background-color: var(--ax-subtle);
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
  background-image: none;
}

/* Semantic buttons */
.btn-success { background-color: var(--ax-success); border-color: var(--ax-success); color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
  background-color: #15803d; border-color: #15803d; color: #fff;
}
.btn-danger { background-color: var(--ax-danger); border-color: var(--ax-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
  background-color: #b91c1c; border-color: #b91c1c; color: #fff;
}
.btn-warning { background-color: var(--ax-warning); border-color: var(--ax-warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active {
  background-color: #b45309; border-color: #b45309; color: #fff;
}
.btn-info { background-color: var(--ax-info); border-color: var(--ax-info); color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
  background-color: #0369a1; border-color: #0369a1; color: #fff;
}

/* Tertiary - minimal text / icon action */
.btn-link {
  color: var(--ax-p-600);
  font-weight: 500;
}
.btn-link:hover, .btn-link:focus {
  color: var(--ax-p-700);
  text-decoration: none;
}

.btn > i { vertical-align: middle; }
.btn-group > .btn + .btn { margin-left: -1px; }


/* ==========================================================================
   7. FORMS
   ========================================================================== */
label,
.control-label {
  color: var(--ax-text-2);
  font-weight: 600;
  font-size: 12.5px;
  margin-bottom: 6px;
}

textarea.form-control,
select.form-control,
input.form-control,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
  background-color: var(--ax-surface);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r);
  color: var(--ax-text);
  box-shadow: none;
  transition: border-color .13s ease, box-shadow .13s ease;
}

textarea.form-control:focus,
select.form-control:focus,
input.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus {
  border-color: var(--ax-p-500);
  box-shadow: var(--ax-ring);
  outline: none;
}

.form-control::placeholder { color: var(--ax-text-3); }

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: var(--ax-subtle);
  color: var(--ax-text-3);
  border-color: var(--ax-border);
}

.input-group-addon {
  background-color: var(--ax-canvas);
  border-color: var(--ax-border-strong);
  color: var(--ax-text-2);
  border-radius: var(--ax-r);
}

.help-block { color: var(--ax-text-3); font-size: 12px; }

/* Validation */
.has-error .form-control { border-color: var(--ax-danger); box-shadow: none; }
.has-error .form-control:focus {
  border-color: var(--ax-danger);
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.14);
}
.has-error .control-label,
.has-error .help-block { color: var(--ax-danger-fg); }

.has-success .form-control { border-color: var(--ax-success); }
.has-success .form-control:focus {
  border-color: var(--ax-success);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.14);
}

/* Section separators inside long forms */
fieldset legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--ax-text);
  border-bottom: 1px solid var(--ax-border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* Bootstrap-select pickers inherit the same shell */
.bootstrap-select > .btn.dropdown-toggle {
  background-color: var(--ax-surface);
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
  border-radius: var(--ax-r);
  font-weight: 500;
}
.bootstrap-select.open > .btn.dropdown-toggle {
  border-color: var(--ax-p-500);
  box-shadow: var(--ax-ring);
}


/* ==========================================================================
   8. TABLES
   Quiet header, roomy rows, hairline separators. No columns are touched.
   ========================================================================== */
.table { color: var(--ax-text-2); }

.table > thead > tr > th {
  background: var(--ax-canvas);
  color: var(--ax-text-2);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--ax-border);
  border-top: 0;
  padding: 12px 16px;
  vertical-align: middle;
  white-space: nowrap;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--ax-border);
  padding: 13px 16px;
  vertical-align: middle;
  color: var(--ax-text-2);
}

.table > tbody > tr > td a { font-weight: 500; }

.table-hover > tbody > tr:hover { background-color: var(--ax-canvas); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fcfdfe; }

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td { border-color: var(--ax-border); }

.table > tbody + tbody { border-top-color: var(--ax-border); }

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tbody > tr.active > td,
.table-hover > tbody > tr:hover > .active { background-color: var(--ax-subtle); }

/* ---- DataTables chrome ------------------------------------------------- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r);
  background: var(--ax-surface);
  color: var(--ax-text);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--ax-p-500);
  box-shadow: var(--ax-ring);
  outline: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--ax-text-3); font-size: 12.5px; }

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc { cursor: pointer; }

table.dataTable thead > tr > th.sorting:hover { color: var(--ax-text); }

/* Row selection + bulk actions */
table.dataTable tbody tr.selected,
.table > tbody > tr.selected > td { background-color: var(--ax-p-50); }

/* ---- Pagination -------------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: var(--ax-text-2);
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  margin: 0 2px;
  border-radius: var(--ax-r-sm);
  font-weight: 500;
  padding: 6px 12px;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span { border-radius: var(--ax-r-sm); }

.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--ax-canvas);
  border-color: var(--ax-border-strong);
  color: var(--ax-text);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
  background: var(--ax-p-600);
  border-color: var(--ax-p-600);
  color: #fff;
}
.pagination > .disabled > a,
.pagination > .disabled > span { color: var(--ax-text-3); background: var(--ax-canvas); }


/* ==========================================================================
   9. BADGES / LABELS / STATUS
   Soft tonal chips - readable, never neon.
   ========================================================================== */
.label,
.badge {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-block;
  line-height: 16px;
}

.label-default, .badge-default {
  background: var(--ax-subtle); color: var(--ax-text-2); border-color: var(--ax-border);
}
.label-primary, .badge-primary, .bg-primary {
  background: var(--ax-p-50); color: var(--ax-p-700); border-color: var(--ax-p-200);
}
.label-success, .badge-success, .bg-success {
  background: var(--ax-success-bg); color: var(--ax-success-fg); border-color: var(--ax-success-bd);
}
.label-danger, .badge-danger, .bg-danger {
  background: var(--ax-danger-bg); color: var(--ax-danger-fg); border-color: var(--ax-danger-bd);
}
.label-warning, .badge-warning, .bg-warning {
  background: var(--ax-warning-bg); color: var(--ax-warning-fg); border-color: var(--ax-warning-bd);
}
.label-info, .badge-info, .bg-info {
  background: var(--ax-info-bg); color: var(--ax-info-fg); border-color: var(--ax-info-bd);
}


/* ==========================================================================
   10. DROPDOWNS
   ========================================================================== */
.dropdown-menu {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-sh-lg);
  padding: 6px;
  margin-top: 6px;
}

.dropdown-menu > li > a {
  color: var(--ax-text-2);
  padding: 8px 12px;
  border-radius: var(--ax-r-sm);
  font-weight: 500;
  font-size: 13px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--ax-subtle);
  color: var(--ax-text);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background: var(--ax-p-50);
  color: var(--ax-p-700);
}
.dropdown-menu .divider { background-color: var(--ax-border); margin: 6px 0; }
.dropdown-header {
  color: var(--ax-text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px 4px;
}


/* ==========================================================================
   11. MODALS / DRAWERS
   ========================================================================== */
.modal-content {
  border: 0;
  border-radius: var(--ax-r-xl);
  box-shadow: var(--ax-sh-lg);
  background: var(--ax-surface);
}
.modal-backdrop.in { opacity: .45; background: #0f172a; }

.modal-header {
  border-bottom: 1px solid var(--ax-border);
  padding: 20px 24px;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ax-text);
  letter-spacing: -0.011em;
}
.modal-body { padding: 24px; }
.modal-footer {
  border-top: 1px solid var(--ax-border);
  padding: 16px 24px;
  background: var(--ax-canvas);
  border-bottom-left-radius: var(--ax-r-xl);
  border-bottom-right-radius: var(--ax-r-xl);
}
.modal-header .close {
  opacity: .5;
  font-size: 22px;
  color: var(--ax-text-2);
  text-shadow: none;
}
.modal-header .close:hover { opacity: 1; color: var(--ax-text); }


/* ==========================================================================
   12. TABS
   ========================================================================== */
.nav-tabs { border-bottom: 1px solid var(--ax-border); }
.nav-tabs > li > a {
  color: var(--ax-text-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
  padding: 11px 16px;
  margin-right: 2px;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--ax-border-strong);
  color: var(--ax-text);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ax-p-600);
  color: var(--ax-p-700);
  font-weight: 600;
}

.nav-pills > li > a { border-radius: var(--ax-r); font-weight: 500; color: var(--ax-text-2); }
.nav-pills > li > a:hover { background: var(--ax-subtle); color: var(--ax-text); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus { background: var(--ax-p-600); color: #fff; }


/* ==========================================================================
   13. ALERTS / TOOLTIPS / PROGRESS
   ========================================================================== */
.alert {
  border-radius: var(--ax-r-lg);
  border: 1px solid transparent;
  padding: 14px 18px;
  font-size: 13px;
}
.alert-success { background: var(--ax-success-bg); border-color: var(--ax-success-bd); color: var(--ax-success-fg); }
.alert-danger  { background: var(--ax-danger-bg);  border-color: var(--ax-danger-bd);  color: var(--ax-danger-fg); }
.alert-warning { background: var(--ax-warning-bg); border-color: var(--ax-warning-bd); color: var(--ax-warning-fg); }
.alert-info    { background: var(--ax-info-bg);    border-color: var(--ax-info-bd);    color: var(--ax-info-fg); }

.tooltip-inner {
  background: var(--ax-text);
  border-radius: var(--ax-r-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
}
.tooltip.top .tooltip-arrow    { border-top-color: var(--ax-text); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--ax-text); }
.tooltip.left .tooltip-arrow   { border-left-color: var(--ax-text); }
.tooltip.right .tooltip-arrow  { border-right-color: var(--ax-text); }

.progress {
  background: var(--ax-subtle);
  border-radius: 999px;
  box-shadow: none;
  height: 8px;
}
.progress-bar { border-radius: 999px; box-shadow: none; background-color: var(--ax-p-600); }
.progress-bar-success { background-color: var(--ax-success); }
.progress-bar-danger  { background-color: var(--ax-danger); }
.progress-bar-warning { background-color: var(--ax-warning); }
.progress-bar-info    { background-color: var(--ax-info); }


/* ==========================================================================
   14. DASHBOARD
   ========================================================================== */
.top_stats_wrapper {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-sh-xs);
  padding: 18px 20px 20px;
  height: 100%;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.top_stats_wrapper:hover {
  box-shadow: var(--ax-sh-sm);
  border-color: var(--ax-border-strong);
}

/* KPI figure reads first */
.top_stats_wrapper .tw-font-semibold { color: var(--ax-text); font-size: 15px; }

.widget .panel,
.widget .panel_s { height: auto; }

/* Calendar + chart surfaces line up with the card system */
.fc .fc-scrollgrid,
.fc td, .fc th { border-color: var(--ax-border); }
.fc .fc-col-header-cell-cushion {
  color: var(--ax-text-2);
  font-weight: 600;
  font-size: 12px;
}
.fc .fc-daygrid-day-number { color: var(--ax-text-2); font-size: 12.5px; }
.fc .fc-day-today { background: var(--ax-p-50) !important; }


/* ==========================================================================
   15. MISC SURFACES
   ========================================================================== */
.list-group-item {
  border-color: var(--ax-border);
  background: var(--ax-surface);
  color: var(--ax-text-2);
}
.list-group-item:first-child { border-top-left-radius: var(--ax-r-lg); border-top-right-radius: var(--ax-r-lg); }
.list-group-item:last-child  { border-bottom-left-radius: var(--ax-r-lg); border-bottom-right-radius: var(--ax-r-lg); }

.breadcrumb {
  background: transparent;
  padding: 0 0 10px;
  font-size: 12.5px;
  color: var(--ax-text-3);
}
.breadcrumb > li + li:before { color: var(--ax-text-3); }
.breadcrumb a { color: var(--ax-text-2); }
.breadcrumb a:hover { color: var(--ax-p-600); }

.media { border-color: var(--ax-border); }

.customizer,
#setup-menu-wrapper {
  background: var(--ax-surface);
  border-right: 1px solid var(--ax-border);
}

/* Kanban columns (leads, tasks) keep their structure, gain a cleaner shell */
.kan-ban-col .panel_s,
.kan-ban-col .panel { border-radius: var(--ax-r-lg); }


/* ==========================================================================
   16. RESPONSIVE
   Layout behaviour is unchanged; these only improve density and reach.
   ========================================================================== */
@media (max-width: 1024px) {
  .content { padding: 22px; }
  .panel-body { padding: 20px; }
  .panel-heading { padding: 14px 20px; }
}

@media (max-width: 768px) {
  .content { padding: 16px; }

  .panel,
  .panel_s { border-radius: var(--ax-r); margin-bottom: 16px; }
  .panel-body { padding: 16px; }
  .panel-heading { padding: 13px 16px; }
  .panel-footer { padding: 12px 16px; }

  h1, .h1 { font-size: 20px; }
  h2, .h2 { font-size: 18px; }

  /* Comfortable tap targets */
  .btn { padding: 9px 14px; }
  .btn-xs { padding: 5px 9px; }
  .dropdown-menu > li > a { padding: 10px 12px; }

  /* Tables stay scrollable rather than crushed, so no data disappears */
  .table-responsive {
    border: 0;
    -webkit-overflow-scrolling: touch;
  }
  .table > thead > tr > th,
  .table > tbody > tr > td { padding: 11px 12px; }

  /* Forms stack cleanly */
  .form-group { margin-bottom: 14px; }

  /* Modals use the full sheet on small screens */
  .modal-dialog { margin: 10px; }
  .modal-header { padding: 16px; }
  .modal-body   { padding: 16px; }
  .modal-footer { padding: 12px 16px; }
  .modal-footer .btn { width: 100%; margin: 4px 0 0 0; }

  /* Sidebar sits above the dim overlay when opened */
  .sidebar { box-shadow: var(--ax-sh-lg); z-index: 60; }
}

@media (max-width: 480px) {
  .content { padding: 12px; }
  .top_stats_wrapper { padding: 16px; }
}

/* ==========================================================================
   17. DASHBOARD - PREMIUM KPI + WIDGET POLISH
   Restyles the existing widgets only. No markup, data or logic is touched;
   every number still comes from the same Perfex queries.
   ========================================================================== */

/* ---- KPI cards (Quick Statistics) -------------------------------------- */
/* Perfex renders these as one cramped row: [icon] label ....... 12 / 34
   Restacked here into a proper stat card: label on top, figure large below. */

.top_stats_wrapper {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* undo the inline flex row so label and figure can stack */
.top_stats_wrapper > div:first-child {
  display: block !important;
}

/* label line */
.top_stats_wrapper > div:first-child > div:first-child {
  display: flex !important;
  align-items: center;
  color: var(--ax-text-2);
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
}

/* icon becomes a tinted tile */
.top_stats_wrapper > div:first-child svg {
  box-sizing: border-box;
  width: 34px !important;
  height: 34px !important;
  padding: 7px;
  border-radius: var(--ax-r);
  background: var(--ax-p-50);
  color: var(--ax-p-600) !important;
  margin-right: 11px !important;
  flex: 0 0 auto;
}
[dir="rtl"] .top_stats_wrapper > div:first-child svg {
  margin-right: 0 !important;
  margin-left: 11px !important;
}

/* the figure - now the loudest thing on the card */
.top_stats_wrapper > div:first-child > span {
  display: block;
  margin-top: 14px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ax-text) !important;
}

.top_stats_wrapper .progress {
  height: 6px;
  margin-top: 16px !important;
}

/* equal-height cards across the row */
.quick-stats-invoices,
.quick-stats-leads,
.quick-stats-projects,
.quick-stats-tasks { margin-bottom: 16px; }

/* ---- Widgets ----------------------------------------------------------- */
.widget { margin-bottom: 4px; }

.widget .panel_s,
.widget .panel { margin-bottom: 20px; }

/* Chart panels keep a steady footprint so an empty chart does not collapse
   or leave a ragged column */
#payment-statistics,
#leads_status_stats,
#projects_status_stats { max-width: 100%; }

/* Dashboard section titles */
.dashboard-heading,
.widget .panel-heading .panel-title { font-size: 14px; }

/* Finance overview / overview lists - tighter, more scannable rows */
.widget .list-group-item { padding: 10px 16px; }

/* To-do items */
#widget-todos .panel-body { padding-top: 16px; }

/* Calendar inside the dashboard */
#widget-calendar .fc-toolbar-title { font-size: 15px !important; font-weight: 600; }
#widget-calendar .fc-button {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border-strong);
  color: var(--ax-text-2);
  box-shadow: none;
  text-transform: none;
  font-weight: 500;
  border-radius: var(--ax-r-sm);
}
#widget-calendar .fc-button:hover { background: var(--ax-canvas); color: var(--ax-text); }
#widget-calendar .fc-button-active,
#widget-calendar .fc-button:active {
  background: var(--ax-p-600) !important;
  border-color: var(--ax-p-600) !important;
  color: #fff !important;
}

/* Dashboard options / drag handles stay quiet until needed */
.widget-dragger { opacity: 0; transition: opacity .15s ease; }
.widget:hover .widget-dragger { opacity: .5; }

/* ---- Per-metric accent colours -----------------------------------------
   Each KPI gets its own colour identity (icon tile, tint, progress bar),
   which is what makes a modern CRM dashboard readable at a glance.
   Perfex already gives every card a distinct column class to hook onto. */

#widget-top_stats .quick-stats-invoices .top_stats_wrapper { --k: #e11d48; --k-bg: #fff1f2; }
#widget-top_stats .quick-stats-leads    .top_stats_wrapper { --k: #16a34a; --k-bg: #f0fdf4; }
#widget-top_stats .quick-stats-projects .top_stats_wrapper { --k: #3b3a8f; --k-bg: #f2f2fa; }
#widget-top_stats .quick-stats-tasks    .top_stats_wrapper { --k: #d97706; --k-bg: #fffbeb; }

/* soft tint fading into white - the "glow" that lifts these off the canvas */
#widget-top_stats .top_stats_wrapper {
  background: linear-gradient(180deg, var(--k-bg, #fff) 0%, #fff 58%);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#widget-top_stats .top_stats_wrapper > div:first-child svg {
  background: var(--k-bg) !important;
  color: var(--k) !important;
}

#widget-top_stats .top_stats_wrapper .progress {
  background: color-mix(in srgb, var(--k) 14%, #fff);
}

#widget-top_stats .top_stats_wrapper .progress-bar {
  background-color: var(--k) !important;
}

#widget-top_stats .top_stats_wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--ax-sh-md);
  border-color: color-mix(in srgb, var(--k) 30%, var(--ax-border));
}

/* ---- Percentage chip ---------------------------------------------------
   Surfaces the percentage Perfex already calculates and stores in the
   progress bar's data-percent. No new query, no new logic - it was simply
   never shown. Markup hook: <span class="kpi-pct"> in top_stats.php */

#widget-top_stats .kpi-pct {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -4px;
  margin-left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0;
  background: color-mix(in srgb, var(--k) 13%, #fff);
  color: var(--k);
}
[dir="rtl"] #widget-top_stats .kpi-pct { margin-left: 0; margin-right: 10px; }

/* ---- Watermark icon -----------------------------------------------------
   A large, faded copy of each card's own icon in the corner. Drawn purely
   with CSS (inline SVG data URI), so no markup was added for it. */

#widget-top_stats .top_stats_wrapper {
  position: relative;
  overflow: hidden;
}

#widget-top_stats .top_stats_wrapper::after {
  content: "";
  position: absolute;
  top: -16px;
  right: -16px;
  width: 104px;
  height: 104px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .075;
  pointer-events: none;
  z-index: 0;
}
[dir="rtl"] #widget-top_stats .top_stats_wrapper::after { right: auto; left: -16px; }

/* keep the real content above the watermark */
#widget-top_stats .top_stats_wrapper > div { position: relative; z-index: 1; }

/* ---- Friendlier empty states ------------------------------------------- */
.dataTables_empty,
.no-margin.text-muted,
td.dataTables_empty {
  padding: 34px 16px !important;
  text-align: center;
  color: var(--ax-text-3) !important;
  font-size: 13px;
}

@media (max-width: 768px) {
  .top_stats_wrapper { padding: 16px; }
  .top_stats_wrapper > div:first-child > span { font-size: 23px; margin-top: 10px; }
}


/* ==========================================================================
   18. KANBAN BOARD (Leads / Tasks)
   Perfex already ships this board and its drag-and-drop. Only the paint
   changes here - no transforms on cards, so jQuery UI sortable keeps
   positioning them correctly while dragging.
   ========================================================================== */

.kan-ban-col { width: 320px; margin-right: 14px; }

/* the column shell is just a frame; the heading carries the status colour,
   which admins set themselves - so it is never overridden here */
.kan-ban-col-wrapper > .panel_s {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.kan-ban-col-wrapper .panel-heading {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 0 !important;
  border-radius: var(--ax-r-lg) var(--ax-r-lg) 0 0;
}

.kan-ban-col-wrapper .panel-heading .heading { font-weight: 700; }

/* the "N leads" count reads as a badge, like a modern board */
.kan-ban-col-wrapper .panel-heading small {
  display: inline-block;
  background: rgb(255 255 255 / 0.22);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
}

.kan-ban-content {
  background: var(--ax-canvas);
  border: 1px solid var(--ax-border);
  border-top: 0;
  border-radius: 0 0 var(--ax-r-lg) var(--ax-r-lg);
  padding: 8px;
  min-height: 180px;
}

.kan-ban-content .kanban-empty h4 {
  color: var(--ax-text-3);
  font-size: 13px;
  font-weight: 500;
}

/* ---- Cards -------------------------------------------------------------- */
#kan-ban .panel-body {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r);
  box-shadow: var(--ax-sh-xs);
  margin: 0 0 8px 0;
  padding: 14px 16px;
  transition: box-shadow .14s ease, border-color .14s ease;
}

#kan-ban .panel-body:hover {
  box-shadow: var(--ax-sh-sm);
  border-color: var(--ax-border-strong);
}

/* lead / task title */
#kan-ban .panel-body .lead-name a,
#kan-ban .panel-body .task-name a {
  color: var(--ax-text);
  font-weight: 600;
  font-size: 13.5px;
}
#kan-ban .panel-body .lead-name a:hover,
#kan-ban .panel-body .task-name a:hover { color: var(--ax-p-700); }

/* meta lines (source, value, last contact, created) */
#kan-ban .panel-body p,
#kan-ban .panel-body small { color: var(--ax-text-2); }
#kan-ban .panel-body .bold { color: var(--ax-text); }

/* note / attachment counters */
#kan-ban .panel-body .inline-block.text-muted {
  color: var(--ax-text-3);
  font-size: 12px;
}

/* tags become soft chips */
.kanban-tags .tags-labels,
.kanban-tags .label {
  background: var(--ax-subtle);
  color: var(--ax-text-2);
  border: 1px solid var(--ax-border);
  font-weight: 500;
}

.kan-ban-expand-top {
  background: var(--ax-canvas);
  border-bottom-left-radius: var(--ax-r-sm);
  border-top-right-radius: var(--ax-r);
  color: var(--ax-text-3);
}
.kan-ban-expand-top:hover { color: var(--ax-text-2); background: var(--ax-subtle); }

/* the card belonging to the signed-in user gets a quiet accent edge */
li.lead-kan-ban.current-user-lead .panel-body {
  border-left: 3px solid var(--ax-p-500);
}
[dir="rtl"] li.lead-kan-ban.current-user-lead .panel-body {
  border-left: 1px solid var(--ax-border);
  border-right: 3px solid var(--ax-p-500);
}

/* drop placeholder while dragging */
.ui-state-highlight-kan-ban-kb {
  background: var(--ax-p-50);
  border: 1px dashed var(--ax-p-300);
  border-radius: var(--ax-r);
}

.kanban-leads-sort a { color: var(--ax-text-2); font-weight: 500; }
.kanban-leads-sort a:hover { color: var(--ax-p-600); }

@media (max-width: 768px) {
  .kan-ban-col { width: 280px; margin-right: 10px; }
}


/* ==========================================================================
   19. SIDEBAR ICON COLOURS
   Each module gets its own icon colour so the eye can find a row by colour
   instead of reading every label - the trick 365CRM's sidebar uses.
   Only the icon is tinted; labels, spacing and active states stay as they are,
   so the sidebar still reads as one calm surface rather than a rainbow.
   ========================================================================== */

.sidebar ul.nav > li[class*="menu-item-"] > a i.menu-icon { color: var(--ax-text-3); }

.sidebar ul.nav > li.menu-item-dashboard        > a i.menu-icon { color: #3b3a8f; }
.sidebar ul.nav > li.menu-item-leads            > a i.menu-icon { color: #d97706; }
.sidebar ul.nav > li.menu-item-reminders        > a i.menu-icon { color: #e11d48; }
.sidebar ul.nav > li.menu-item-customers        > a i.menu-icon { color: #0284c7; }
.sidebar ul.nav > li.menu-item-sales            > a i.menu-icon { color: #059669; }
.sidebar ul.nav > li.menu-item-subscriptions    > a i.menu-icon { color: #7c3aed; }
.sidebar ul.nav > li.menu-item-expenses         > a i.menu-icon { color: #ea580c; }
.sidebar ul.nav > li.menu-item-contracts        > a i.menu-icon { color: #0d9488; }
.sidebar ul.nav > li.menu-item-projects         > a i.menu-icon { color: #7c3aed; }
.sidebar ul.nav > li.menu-item-tasks            > a i.menu-icon { color: #16a34a; }
.sidebar ul.nav > li.menu-item-support          > a i.menu-icon { color: #0891b2; }
.sidebar ul.nav > li.menu-item-estimate_request > a i.menu-icon { color: #ca8a04; }
.sidebar ul.nav > li.menu-item-knowledge-base   > a i.menu-icon { color: #0284c7; }
.sidebar ul.nav > li.menu-item-utilities        > a i.menu-icon { color: #64748b; }
.sidebar ul.nav > li.menu-item-reports          > a i.menu-icon { color: #323177; }

/* the colour stays put on hover and while active, so rows never "flicker"
   between coloured and grey as the pointer moves down the list */
.sidebar ul.nav > li[class*="menu-item-"]:hover  > a i.menu-icon,
.sidebar ul.nav > li[class*="menu-item-"].active > a i.menu-icon {
  color: inherit;
}
.sidebar ul.nav > li.menu-item-dashboard:hover        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-dashboard.active       > a i.menu-icon { color: #3b3a8f; }
.sidebar ul.nav > li.menu-item-leads:hover            > a i.menu-icon,
.sidebar ul.nav > li.menu-item-leads.active           > a i.menu-icon { color: #d97706; }
.sidebar ul.nav > li.menu-item-reminders:hover        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-reminders.active       > a i.menu-icon { color: #e11d48; }
.sidebar ul.nav > li.menu-item-customers:hover        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-customers.active       > a i.menu-icon { color: #0284c7; }
.sidebar ul.nav > li.menu-item-sales:hover            > a i.menu-icon,
.sidebar ul.nav > li.menu-item-sales.active           > a i.menu-icon { color: #059669; }
.sidebar ul.nav > li.menu-item-subscriptions:hover    > a i.menu-icon,
.sidebar ul.nav > li.menu-item-subscriptions.active   > a i.menu-icon { color: #7c3aed; }
.sidebar ul.nav > li.menu-item-expenses:hover         > a i.menu-icon,
.sidebar ul.nav > li.menu-item-expenses.active        > a i.menu-icon { color: #ea580c; }
.sidebar ul.nav > li.menu-item-contracts:hover        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-contracts.active       > a i.menu-icon { color: #0d9488; }
.sidebar ul.nav > li.menu-item-projects:hover         > a i.menu-icon,
.sidebar ul.nav > li.menu-item-projects.active        > a i.menu-icon { color: #7c3aed; }
.sidebar ul.nav > li.menu-item-tasks:hover            > a i.menu-icon,
.sidebar ul.nav > li.menu-item-tasks.active           > a i.menu-icon { color: #16a34a; }
.sidebar ul.nav > li.menu-item-support:hover          > a i.menu-icon,
.sidebar ul.nav > li.menu-item-support.active         > a i.menu-icon { color: #0891b2; }
.sidebar ul.nav > li.menu-item-reports:hover          > a i.menu-icon,
.sidebar ul.nav > li.menu-item-reports.active         > a i.menu-icon { color: #323177; }


/* ==========================================================================
   20. TO DO PAGE
   Perfex paints the two column headings as solid saturated blocks
   (tw-bg-warning-400 / tw-bg-info-*). Softened here into the same tonal
   treatment the rest of the app uses, and the lists get a proper card shell.
   Scoped to body.main-todo-page so no other screen is affected.
   ========================================================================== */

body.main-todo-page .todo-body h4 {
  padding: 14px 18px !important;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--ax-r-lg) var(--ax-r-lg) 0 0;
}

body.main-todo-page .todo-body h4[class*="tw-bg-warning"] {
  background: var(--ax-warning-bg) !important;
  color: var(--ax-warning-fg) !important;
  border-color: var(--ax-warning-bd);
}

body.main-todo-page .todo-body h4[class*="tw-bg-info"],
body.main-todo-page .todo-body h4[class*="tw-bg-success"] {
  background: var(--ax-success-bg) !important;
  color: var(--ax-success-fg) !important;
  border-color: var(--ax-success-bd);
}

/* the list below each heading becomes the body of that card */
body.main-todo-page ul.todo {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: 0 0 var(--ax-r-lg) var(--ax-r-lg);
  padding: 8px;
  margin-bottom: 18px;
  min-height: 90px;
}

body.main-todo-page ul.todo > li {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: box-shadow .14s ease, border-color .14s ease;
}

body.main-todo-page ul.todo > li:hover {
  box-shadow: var(--ax-sh-sm);
  border-color: var(--ax-border-strong);
}

/* a finished item reads as done without shouting */
body.main-todo-page ul.finished-todos > li { opacity: .75; }

body.main-todo-page li.no-todos {
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--ax-text-3);
  padding: 26px 12px;
  font-size: 13px;
}
body.main-todo-page li.no-todos:hover { box-shadow: none; }


/* ==========================================================================
   21. SIDEBAR SECTION HEADINGS
   365CRM groups its nav under MAIN / PRODUCTIVITY / BUSINESS. Perfex builds
   the sidebar from a data structure with no concept of groups, so rather than
   injecting fake menu entries (which would render as clickable links and could
   collide with items added by modules), the headings are drawn with ::before
   on the first item of each group. Pure decoration - nothing is added to the
   menu itself, and if a staff member lacks permission for that first item the
   whole item disappears and takes its heading with it.
   ========================================================================== */

.sidebar ul#side-menu > li.menu-item-dashboard::before,
.sidebar ul#side-menu > li.menu-item-tasks::before,
.sidebar ul#side-menu > li.menu-item-customers::before {
  display: block;
  padding: 16px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ax-text-3);
  pointer-events: none;
}

.sidebar ul#side-menu > li.menu-item-dashboard::before { content: "Main"; padding-top: 4px; }
.sidebar ul#side-menu > li.menu-item-tasks::before     { content: "Productivity"; }
.sidebar ul#side-menu > li.menu-item-customers::before { content: "Business"; }

[dir="rtl"] .sidebar ul#side-menu > li.menu-item-dashboard::before,
[dir="rtl"] .sidebar ul#side-menu > li.menu-item-tasks::before,
[dir="rtl"] .sidebar ul#side-menu > li.menu-item-customers::before {
  text-align: right;
}


/* ==========================================================================
   22. TYPOGRAPHY REFINEMENT + FINISH
   The install already ships Inter's variable font ("Inter var") but nothing
   ever asked for it - everything was falling back to the static family. That
   single switch, plus tabular figures and tighter optical tracking, is most of
   what separates "admin template" from "product".
   ========================================================================== */

:root {
  --ax-font: "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .btn-group > .btn,
input, select, textarea, .form-control,
.dropdown-menu, .modal, .panel, .panel_s, .table,
.label, .badge, .nav-tabs, .pagination {
  font-family: var(--ax-font);
}

body {
  font-optical-sizing: auto;
  letter-spacing: -0.006em;
}

/* Optical tracking: the larger the text, the tighter it wants to be. */
h1, .h1 { letter-spacing: -0.022em; }
h2, .h2 { letter-spacing: -0.018em; }
h3, .h3 { letter-spacing: -0.015em; }
h4, .h4 { letter-spacing: -0.012em; }
h5, .h5 { letter-spacing: -0.008em; }

/* Tabular figures - digits share one width, so columns of numbers line up
   instead of wobbling. The quiet tell of a well-built data product. */
.table th, .table td,
.top_stats_wrapper,
.kpi-pct,
.pagination > li > a,
.pagination > li > span,
.dataTables_info,
.panel_s .h4, .panel_s h4 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The headline number on each KPI card */
#widget-top_stats .top_stats_wrapper > div:first-child > span {
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Table headings: small, quiet, evenly spaced.
   DataTables ships its own `table.dataTable thead > tr > th` rule, which is
   more specific than a plain `.table` selector - so it is matched here rather
   than fought with !important. */
.table > thead > tr > th,
table.dataTable thead > tr > th,
table.dataTable > thead > tr > th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ax-text-3);
}

/* Sidebar text sits a touch tighter and calmer */
.sidebar ul.nav li a { letter-spacing: -0.008em; }
.sidebar ul.nav li .nav-second-level li a { letter-spacing: -0.004em; }

/* Buttons read better slightly tightened */
.btn, .btn-group > .btn { letter-spacing: -0.006em; }

/* Form labels: small caps feel, without shouting */
label, .control-label { letter-spacing: .002em; }

/* ---- Finish -------------------------------------------------------------
   Hairlines, motion and depth. Small values on purpose - the goal is that
   nothing announces itself, it just feels settled. */

.panel, .panel_s, .top_stats_wrapper, .modal-content, .dropdown-menu {
  -webkit-font-smoothing: antialiased;
}

/* one consistent easing everywhere something moves */
.btn, .label, .badge, .panel, .panel_s, .top_stats_wrapper,
.table-hover > tbody > tr, .dropdown-menu > li > a,
.sidebar ul.nav li a, .nav-tabs > li > a, .pagination > li > a {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* rows respond immediately but gently */
.table-hover > tbody > tr { transition: background-color .12s cubic-bezier(.4,0,.2,1); }

/* links stop feeling like 1998 */
a { text-decoration: none; transition: color .12s cubic-bezier(.4,0,.2,1); }

/* selection picks up the brand instead of the OS default */
::selection { background: var(--ax-p-100); color: var(--ax-p-900); }


/* ==========================================================================
   23. SETTINGS
   Perfex's settings are far deeper than most CRMs' - the problem was never
   what is in there, it was finding it. The left index becomes a real list of
   rows, and Save follows you down the page instead of hiding at the bottom of
   a long form.
   ========================================================================== */

body.settings .panel-body { padding: 26px 28px; }
body.settings .form-group { margin-bottom: 20px; }

/* ---- Left index --------------------------------------------------------- */
body.settings [class*="settings-group-"] > a {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--ax-r-sm);
  color: var(--ax-text-2);
  transition: background-color .12s cubic-bezier(.4,0,.2,1),
              color .12s cubic-bezier(.4,0,.2,1);
}

body.settings [class*="settings-group-"] > a:hover,
body.settings [class*="settings-group-"] > a:focus {
  background: var(--ax-subtle);
  color: var(--ax-text);
}

/* Perfex marks the open section by ending the class list with
   tw-text-neutral-800 (inactive ones end with -600), so match on the end of
   the attribute rather than *= , which would also catch `hover:` variants. */
body.settings [class*="settings-group-"] > a[class$="tw-text-neutral-800"] {
  background: var(--ax-p-50);
  color: var(--ax-p-700);
  font-weight: 600;
}

body.settings [class*="settings-group-"] > a i,
body.settings [class*="settings-group-"] > a svg {
  color: var(--ax-text-3);
  width: 16px;
}
body.settings [class*="settings-group-"] > a[class$="tw-text-neutral-800"] i,
body.settings [class*="settings-group-"] > a[class$="tw-text-neutral-800"] svg {
  color: var(--ax-p-600);
}

/* ---- Save stays reachable ---------------------------------------------- */
/* These forms run long; sticking the footer to the bottom of the viewport
   means Save is always one click away instead of a scroll away. */
body.settings .panel-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--ax-surface);
  border-top: 1px solid var(--ax-border);
  box-shadow: 0 -6px 16px -10px rgb(15 23 42 / 0.18);
  border-radius: 0 0 var(--ax-r-lg) var(--ax-r-lg);
  padding: 14px 28px;
}

/* On short screens a sticky bar eats too much room, so let it scroll away */
@media (max-height: 620px) {
  body.settings .panel-footer { position: static; box-shadow: none; }
}


/* ==========================================================================
   24. LOGIN PAGES + CUSTOMER PORTAL
   These live outside the admin CSS group, so they never received any of the
   work above. The customer portal matters most: it is the only part of this
   CRM your customers ever see.
   ========================================================================== */

/* ---- Admin login -------------------------------------------------------- */
body.login_admin {
  background: var(--ax-canvas) !important;
  font-family: var(--ax-font);
  letter-spacing: -0.006em;
}

body.login_admin .authentication-form-wrapper h1 {
  color: var(--ax-text);
  letter-spacing: -0.022em;
  font-weight: 600;
}

body.login_admin .authentication-form-wrapper form {
  border-color: var(--ax-border) !important;
  border-radius: var(--ax-r-xl) !important;
  box-shadow: var(--ax-sh-md) !important;
}

body.login_admin .company-logo { margin-bottom: 18px; }

/* ---- Customer login ----------------------------------------------------- */
/* The card here is a .panel_s *inside* the form, which the panel rules in
   section 5 already cover - so nothing is restyled at the form level. Only
   the heading, the button and the field rhythm are adjusted. */
body.customers_login .login-form > .panel_s {
  box-shadow: var(--ax-sh-md);
}

body.customers_login .login-heading {
  color: var(--ax-text);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
}

body.customers_login .login-form .btn-primary,
body.customers_login .login-form button[type="submit"] {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
}

body.customers_login .login-form .form-group { margin-bottom: 18px; }

/* ---- Customer portal ---------------------------------------------------- */
body.customers {
  background: var(--ax-canvas);
  font-family: var(--ax-font);
  color: var(--ax-text-2);
  letter-spacing: -0.006em;
}

body.customers h1, body.customers h2,
body.customers h3, body.customers h4 {
  color: var(--ax-text);
  font-weight: 600;
  letter-spacing: -0.014em;
}

/* the portal's own panels pick up the same surface treatment as the admin */
body.customers .panel,
body.customers .panel_s {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-sh-xs);
}

body.customers .panel-heading {
  background: var(--ax-surface);
  border-bottom: 1px solid var(--ax-border);
}

body.customers .table > thead > tr > th {
  background: var(--ax-canvas);
  color: var(--ax-text-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ax-border);
}

body.customers .table > tbody > tr > td {
  border-top: 1px solid var(--ax-border);
  padding: 12px 14px;
}

body.customers .table td,
body.customers .table th { font-variant-numeric: tabular-nums; }

/* portal navigation */
body.customers .navbar,
body.customers .navbar-default {
  background: var(--ax-surface);
  border-bottom: 1px solid var(--ax-border);
  box-shadow: none;
}


/* ==========================================================================
   25. DISPLAY TYPE + LOGO
   Headings get a display face so they read as a product rather than a form.
   Body text deliberately stays on the locally-bundled Inter var: it is what
   staff read all day, it is already installed, and it costs nothing to load.
   Only the headings pull an extra font, with swap so nothing ever blocks
   rendering - if the network is slow or the CDN is blocked, headings simply
   stay on Inter and the page is unaffected.
   ========================================================================== */

:root {
  --ax-font-display: "Bricolage Grotesque", var(--ax-font);
}

/* Perfex writes most page titles as <h4>, not <h1>, so h4 has to be in here
   or the display face never appears on the headings that actually matter. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.panel-title,
.modal-title,
#header .logo.logo-text,
body.login_admin .authentication-form-wrapper h1,
body.customers_login .login-heading {
  font-family: var(--ax-font-display);
  font-optical-sizing: auto;
}

/* the display face is wider, so it wants a little more negative tracking */
h1, .h1 { letter-spacing: -0.026em; }
h2, .h2 { letter-spacing: -0.022em; }
h3, .h3 { letter-spacing: -0.018em; }

/* ---- Logo area ---------------------------------------------------------- */
/* A logo needs room around it more than it needs size. */
#header #logo { padding-left: 4px; }

#header .logo.logo-text {
  font-family: var(--ax-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.028em;
  color: var(--ax-text);
}
#header .logo.logo-text:hover { color: var(--ax-p-700); }

#header #logo img {
  max-height: 34px;
  width: auto;
  object-fit: contain;
}

body.login_admin .company-logo img,
body.customers .logo img {
  max-height: 42px;
  width: auto;
  object-fit: contain;
}

/* ---- Softer active states ----------------------------------------------- */
/* The reference interface tints its active nav row with the accent at low
   opacity rather than a flat swatch, which keeps the colour from shouting. */
.sidebar > ul.nav > li.active > a:first-child,
.sidebar > ul.nav > li.active:hover > a:first-child {
  background: color-mix(in srgb, var(--ax-p-600) 12%, #fff);
}

.sidebar ul.nav li a { border-radius: 12px; font-size: 14px; }
.sidebar > ul.nav > li:hover a:first-child,
.sidebar > ul.nav > li.active a:first-child { border-radius: 12px; }


/* ==========================================================================
   26. CALM PASS
   Correcting an earlier mistake. Chasing one reference's colourful style put
   rainbow icons in the sidebar, tinted gradients and watermarks on the KPI
   cards. Side by side with a genuinely clean product it reads as busy, not
   premium. Restraint is what makes an interface feel expensive: one accent,
   one grey, and room to breathe. This section quiets everything back down.
   ========================================================================== */

/* ---- Sidebar: one icon colour, accent only where you are ---------------- */
.sidebar ul.nav > li[class*="menu-item-"] > a i.menu-icon,
.sidebar ul.nav > li.menu-item-dashboard        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-leads            > a i.menu-icon,
.sidebar ul.nav > li.menu-item-reminders        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-customers        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-sales            > a i.menu-icon,
.sidebar ul.nav > li.menu-item-subscriptions    > a i.menu-icon,
.sidebar ul.nav > li.menu-item-expenses         > a i.menu-icon,
.sidebar ul.nav > li.menu-item-contracts        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-projects         > a i.menu-icon,
.sidebar ul.nav > li.menu-item-tasks            > a i.menu-icon,
.sidebar ul.nav > li.menu-item-support          > a i.menu-icon,
.sidebar ul.nav > li.menu-item-estimate_request > a i.menu-icon,
.sidebar ul.nav > li.menu-item-knowledge-base   > a i.menu-icon,
.sidebar ul.nav > li.menu-item-utilities        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-reports          > a i.menu-icon,
.sidebar ul.nav > li.menu-item-meetings         > a i.menu-icon,
.sidebar ul.nav > li.menu-item-campaigns        > a i.menu-icon,
.sidebar ul.nav > li.menu-item-notes-center     > a i.menu-icon,
.sidebar ul.nav > li.menu-item-accounting       > a i.menu-icon,
.sidebar ul.nav > li.menu-item-todo             > a i.menu-icon {
  color: var(--ax-text-3);
}

/* the row you are on is the only coloured thing in the list */
.sidebar ul.nav > li[class*="menu-item-"].active > a i.menu-icon,
.sidebar ul.nav > li[class*="menu-item-"].active > a:first-child i.menu-icon {
  color: var(--ax-p-600);
}

.sidebar ul.nav > li[class*="menu-item-"]:hover > a i.menu-icon {
  color: var(--ax-text-2);
}

/* ---- KPI cards: label, number, and nothing else ------------------------- */
#widget-top_stats .top_stats_wrapper {
  background: var(--ax-surface);
  padding: 20px 22px 22px;
}

#widget-top_stats .top_stats_wrapper::after { content: none; }

#widget-top_stats .top_stats_wrapper > div:first-child svg {
  background: transparent !important;
  color: var(--ax-text-3) !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0;
  margin-right: 8px !important;
}
[dir="rtl"] #widget-top_stats .top_stats_wrapper > div:first-child svg {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

#widget-top_stats .top_stats_wrapper > div:first-child > div:first-child {
  color: var(--ax-text-3);
  font-size: 12.5px;
  font-weight: 500;
}

#widget-top_stats .top_stats_wrapper > div:first-child > span {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 600;
  color: var(--ax-text) !important;
}

/* the percentage becomes a quiet caption under the figure, not a badge */
#widget-top_stats .kpi-pct {
  display: block;
  top: 0;
  margin: 6px 0 0 0;
  padding: 0;
  background: transparent;
  color: var(--ax-text-3);
  font-size: 12px;
  font-weight: 500;
}
[dir="rtl"] #widget-top_stats .kpi-pct { margin: 6px 0 0 0; }

/* a hairline instead of a thick coloured bar */
#widget-top_stats .top_stats_wrapper .progress {
  height: 3px;
  margin-top: 16px !important;
  background: var(--ax-subtle);
}

#widget-top_stats .top_stats_wrapper:hover {
  transform: none;
  border-color: var(--ax-border-strong);
  box-shadow: var(--ax-sh-sm);
}

/* ---- Room to breathe ---------------------------------------------------- */
.panel-body { padding: 26px 28px; }
.panel, .panel_s { margin-bottom: 22px; }
.content { padding: 30px 32px; }

@media (max-width: 768px) {
  .panel-body { padding: 18px; }
  .content { padding: 16px; }
}

/* ---- Logo --------------------------------------------------------------- */
#header #logo { padding-left: 2px; }

#header .logo.logo-text {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ax-text);
}

/* ---- Motion ------------------------------------------------------------- */
/* Short, small and only on things you touch. Anything longer than ~200ms on
   an interface people use all day starts to feel slow rather than smooth. */

@keyframes ax-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.content > .row,
#wrapper .content > .panel_s,
#widget-top_stats .top_stats_wrapper {
  animation: ax-rise .28s cubic-bezier(.4, 0, .2, 1) both;
}

/* stagger the KPI row so it settles left to right */
#widget-top_stats [class*="quick-stats-"]:nth-child(1) .top_stats_wrapper { animation-delay: 0ms; }
#widget-top_stats [class*="quick-stats-"]:nth-child(2) .top_stats_wrapper { animation-delay: 45ms; }
#widget-top_stats [class*="quick-stats-"]:nth-child(3) .top_stats_wrapper { animation-delay: 90ms; }
#widget-top_stats [class*="quick-stats-"]:nth-child(4) .top_stats_wrapper { animation-delay: 135ms; }

.table-hover > tbody > tr { transition: background-color .12s cubic-bezier(.4,0,.2,1); }
.sidebar ul.nav li a { transition: background-color .12s cubic-bezier(.4,0,.2,1), color .12s cubic-bezier(.4,0,.2,1); }
.btn { transition: background-color .12s cubic-bezier(.4,0,.2,1), border-color .12s cubic-bezier(.4,0,.2,1), box-shadow .12s cubic-bezier(.4,0,.2,1); }
.dropdown-menu { animation: ax-rise .16s cubic-bezier(.4,0,.2,1) both; }

/* Anyone who has asked their system to reduce motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .content > .row,
  #wrapper .content > .panel_s,
  #widget-top_stats .top_stats_wrapper,
  .dropdown-menu {
    animation: none;
  }
  * { transition-duration: .01ms !important; }
}


/* ==========================================================================
   27. CALENDAR
   FullCalendar ships with a lot of borders and a very tall grid. On the
   dashboard it was 695px on its own - most of a screen for one widget.
   Lighter lines, shorter rows, and events that read as chips.
   ========================================================================== */

.fc { font-size: 12.5px; }

/* toolbar */
.fc .fc-toolbar { margin-bottom: 14px; gap: 8px; }
.fc .fc-toolbar-title {
  font-family: var(--ax-font-display);
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ax-text);
}

.fc .fc-button {
  background: var(--ax-surface);
  border: 1px solid var(--ax-border-strong);
  color: var(--ax-text-2);
  box-shadow: none;
  text-transform: none;
  font-weight: 500;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--ax-r-sm);
}
.fc .fc-button:hover { background: var(--ax-canvas); color: var(--ax-text); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--ax-p-600);
  border-color: var(--ax-p-600);
  color: #fff;
}
.fc .fc-button:focus { box-shadow: var(--ax-ring); }
.fc .fc-button-primary:disabled { opacity: .5; }

/* grid - hairlines instead of heavy rules */
.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th,
.fc td, .fc th { border-color: var(--ax-border); }

.fc .fc-scrollgrid { border-radius: var(--ax-r); overflow: hidden; }

.fc .fc-col-header-cell {
  background: var(--ax-canvas);
  padding: 8px 0;
}
.fc .fc-col-header-cell-cushion {
  color: var(--ax-text-3);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fc .fc-daygrid-day-number {
  color: var(--ax-text-2);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 7px;
}

.fc .fc-day-other .fc-daygrid-day-number { color: var(--ax-text-3); opacity: .55; }

/* today: a soft tint and a solid number, not a yellow block */
.fc .fc-day-today { background: var(--ax-p-50) !important; }
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--ax-p-600);
  color: #fff;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  margin: 4px;
  padding: 3px 6px;
  font-weight: 600;
}

/* events read as chips */
.fc .fc-daygrid-event,
.fc .fc-event {
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 2px;
}
.fc .fc-daygrid-event-dot { border-color: currentColor; }
.fc .fc-event-time { font-weight: 600; opacity: .85; }

/* shorter rows so the month fits without dominating the page */
.fc .fc-daygrid-day-frame { min-height: 54px; }
#widget-calendar .fc .fc-daygrid-day-frame { min-height: 44px; }

.fc .fc-more-link { color: var(--ax-p-600); font-weight: 500; font-size: 11px; }
.fc .fc-popover { border: 1px solid var(--ax-border); border-radius: var(--ax-r); box-shadow: var(--ax-sh-lg); }
.fc .fc-popover-header { background: var(--ax-canvas); color: var(--ax-text); }


/* ==========================================================================
   28. DASHBOARD DENSITY
   The page was 3,252px - four and a half screens - before anything useful
   was read. Trimming the tallest widgets brings the important things above
   the fold without hiding anything.
   ========================================================================== */

.widget .panel_s,
.widget .panel { margin-bottom: 18px; }

.widget .panel-body { padding: 20px 22px; }

/* the calendar was the single tallest thing on the page */
#widget-calendar .fc-view-harness { max-height: 340px; }
#widget-calendar .panel-body { padding: 16px 18px; }

/* charts do not need to be square */
#widget-payments_chart .panel-body,
#widget-leads_chart .panel-body,
#widget-projects_chart .panel-body,
#widget-tickets_chart .panel-body { padding-bottom: 12px; }

/* finance / overview lists: tighter rows, same information */
#widget-finance_overview .panel-body { padding-top: 16px; }
#widget-finance_overview .progress { margin-bottom: 10px; }

#widget-user_data .panel-body { padding-top: 16px; }

/* upcoming events + contracts expiring read as compact lists */
#widget-upcoming_events .panel-body,
#widget-contracts_expiring .panel-body { padding: 16px 20px; }


/* ==========================================================================
   29. LEAD CARDS
   Denser and easier to scan, following the reference layout: name, contact,
   tags, then labelled meta rows, then the value, then the actions.
   ========================================================================== */

#kan-ban .panel-body { padding: 13px 15px; }

/* name line */
#kan-ban .panel-body .lead-name { margin-bottom: 6px; }
#kan-ban .panel-body .lead-name a {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* meta rows sit on a divider, like the reference */
#kan-ban .panel-body .row > .col-md-12:first-child {
  border-top: 1px solid var(--ax-border);
  margin-top: 8px;
  padding-top: 9px;
}

#kan-ban .panel-body p.tw-text-sm {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ax-text-2);
}

#kan-ban .panel-body small { font-size: 11.5px; }

/* tags */
.kanban-tags { margin-top: 8px; }
.kanban-tags .tags-labels,
.kanban-tags .label {
  font-size: 10.5px;
  padding: 3px 8px;
  margin-right: 4px;
  border-radius: 6px;
}

/* the counters at the bottom of a card */
#kan-ban .panel-body .inline-block.text-muted {
  font-size: 11.5px;
  margin-top: 8px;
}

/* column header: name, value, then the count as a badge on the right */
.kan-ban-col-wrapper .panel-heading {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kan-ban-col-wrapper .panel-heading .heading { flex: 1 1 auto; min-width: 0; }
.kan-ban-col-wrapper .panel-heading small { margin-left: auto; }


/* ==========================================================================
   30. KPI CARDS - HIERARCHY
   These four numbers are the first thing anyone reads each morning, so they
   should answer one question instantly: how many, right now.
   The figure was written "18 / 64" with both halves the same weight, which
   makes the eye do arithmetic. Splitting them lets the number that matters
   carry the card, and the total step back into a caption where it belongs.
   ========================================================================== */

#widget-top_stats .top_stats_wrapper {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border-radius: var(--ax-r-lg);
}

/* label row */
#widget-top_stats .top_stats_wrapper > div:first-child > div:first-child {
  color: var(--ax-text-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .002em;
}

#widget-top_stats .top_stats_wrapper > div:first-child svg {
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px !important;
  color: var(--ax-text-3) !important;
  opacity: .8;
}

/* the figure block */
#widget-top_stats .top_stats_wrapper > div:first-child > span {
  display: block;
  margin-top: 12px;
  line-height: 1;
}

/* the number that matters */
#widget-top_stats .kpi-num {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ax-text);
  font-variant-numeric: tabular-nums;
}

/* the total, stepped back */
#widget-top_stats .kpi-of {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ax-text-3);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] #widget-top_stats .kpi-of { margin-left: 0; margin-right: 6px; }

/* share of the total, in the metric's own colour so the bar below has a
   caption rather than being a mystery stripe */
#widget-top_stats .kpi-pct {
  display: block;
  margin: 9px 0 0;
  padding: 0;
  background: transparent;
  color: var(--k, var(--ax-text-3));
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* the bar sits at the foot of the card, always aligned across all four,
   however long the labels wrap */
#widget-top_stats .top_stats_wrapper .progress {
  height: 4px;
  border-radius: 999px;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 14px;
  background: transparent;
  background-clip: content-box;
  box-shadow: none;
}
#widget-top_stats .top_stats_wrapper .progress::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--ax-subtle);
}
#widget-top_stats .top_stats_wrapper .progress {
  position: relative;
  overflow: visible;
}
#widget-top_stats .top_stats_wrapper .progress-bar {
  position: relative;
  z-index: 1;
  height: 4px;
  border-radius: 999px;
  background-color: var(--k) !important;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* a quiet lift on hover - the card is clickable context, not a button */
#widget-top_stats .top_stats_wrapper {
  transition: border-color .15s cubic-bezier(.4,0,.2,1),
              box-shadow .15s cubic-bezier(.4,0,.2,1);
}
#widget-top_stats .top_stats_wrapper:hover {
  border-color: color-mix(in srgb, var(--k) 35%, var(--ax-border));
  box-shadow: var(--ax-sh-sm);
}

/* equal height across the row, whatever the label length */
#widget-top_stats [class*="quick-stats-"] { display: flex; }
#widget-top_stats [class*="quick-stats-"] > .top_stats_wrapper { width: 100%; }

@media (max-width: 768px) {
  #widget-top_stats .kpi-num { font-size: 28px; }
  #widget-top_stats .top_stats_wrapper { padding: 16px; }
}


/* ==========================================================================
   31. FORMS + MODALS
   Every add/edit dialog in the product - lead, task, todo, note, meeting,
   invoice - shares .modal-header / .modal-body / .modal-footer, so one set of
   rules restyles all of them at once. Nothing is added or removed from any
   form: the same fields, the same validation, the same submit.
   ========================================================================== */

/* ---- Dialog shell ------------------------------------------------------- */
.modal-content {
  border-radius: var(--ax-r-lg);
  overflow: hidden;          /* lets the coloured header meet the corners */
  box-shadow: 0 24px 60px -12px rgb(15 23 42 / 0.28),
              0 8px 20px -8px rgb(15 23 42 / 0.16);
}

/* A solid header bar reads as a title bar, and makes it obvious at a glance
   which dialog you are in when several can open over one another. */
.modal-header {
  background: var(--ax-p-600);
  border-bottom: 0;
  padding: 13px 20px;
}

.modal-header .modal-title,
.modal-header h4 {
  color: #fff;
  font-family: var(--ax-font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* close control: a soft square, not a bare × floating in the corner */
.modal-header .close {
  opacity: 1;
  color: #fff;
  text-shadow: none;
  font-size: 20px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: var(--ax-r-sm);
  background: rgb(255 255 255 / 0.16);
  margin-top: -2px;
  transition: background-color .12s cubic-bezier(.4,0,.2,1);
}
.modal-header .close:hover,
.modal-header .close:focus { background: rgb(255 255 255 / 0.3); color: #fff; }

.modal-body { padding: 22px 20px; }

/* ---- Footer ------------------------------------------------------------- */
.modal-footer {
  background: var(--ax-canvas);
  border-top: 1px solid var(--ax-border);
  padding: 13px 20px;
  border-radius: 0;
}
.modal-footer .btn { min-width: 96px; }
.modal-footer .btn + .btn { margin-left: 8px; }

/* ---- Fields ------------------------------------------------------------- */
/* Labels sit close to their field and away from the one above, so the eye
   groups them correctly instead of reading a wall of boxes. */
.modal-body .form-group,
.panel_s .form-group { margin-bottom: 18px; }

.modal-body label,
.modal-body .control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ax-text-2);
}

/* required marker */
.modal-body label .text-danger,
.control-label .text-danger { color: var(--ax-danger); font-weight: 700; }

.modal-body .form-control,
.modal-body .selectpicker + .btn.dropdown-toggle { min-height: 40px; }

.modal-body textarea.form-control { min-height: 92px; }

/* ---- Grouped sub-sections ----------------------------------------------- */
/* Custom-field blocks and similar groups get a quiet panel with an accent
   edge, which is what separates a long form into readable chunks. */
.modal-body fieldset,
.modal-body .custom-fields-wrapper,
.panel_s .custom-fields-wrapper {
  background: var(--ax-canvas);
  border: 1px solid var(--ax-border);
  border-left: 3px solid var(--ax-p-500);
  border-radius: var(--ax-r);
  padding: 16px 18px;
  margin: 4px 0 18px;
}
[dir="rtl"] .modal-body fieldset,
[dir="rtl"] .modal-body .custom-fields-wrapper {
  border-left: 1px solid var(--ax-border);
  border-right: 3px solid var(--ax-p-500);
}

.modal-body fieldset legend {
  font-family: var(--ax-font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ax-text);
  border: 0;
  margin-bottom: 12px;
  padding: 0;
  width: auto;
}

/* ---- Toggles ------------------------------------------------------------ */
/* Perfex renders on/off settings as checkboxes; give them the pill shape
   people now expect from a switch. Behaviour is untouched - it is still the
   same checkbox, so every form still submits exactly what it did before. */
.onoffswitch,
.onoffswitch-label { border-radius: 999px !important; }
.onoffswitch-switch { border-radius: 999px !important; }
.onoffswitch-inner:before { background-color: var(--ax-p-600) !important; }

/* ---- Tabs inside dialogs ------------------------------------------------ */
.modal-body .nav-tabs { margin-bottom: 18px; }

/* ---- Full-page forms ---------------------------------------------------- */
/* The invoice / estimate builders are long pages rather than dialogs; give
   them the same rhythm so the product feels like one thing. */
.panel_s .form-group label,
.panel_s .form-group .control-label { font-size: 12.5px; font-weight: 600; }

#invoice-form .panel_s,
#estimate-form .panel_s,
.invoice-items-table { border-radius: var(--ax-r-lg); }

/* the running totals block */
.invoice-total-row,
#subtotal, #total { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .modal-header { padding: 13px 16px; }
  .modal-body { padding: 18px 16px; }
  .modal-footer { padding: 12px 16px; }
  .modal-footer .btn { width: 100%; margin: 6px 0 0 0; }
}


/* ==========================================================================
   32. RECURRENCE PICKER
   Seven options that are mutually exclusive. Radio buttons in a row are hard
   to hit and harder to scan, so they are drawn as selectable chips - still
   real radios underneath, so keyboard and screen readers work unchanged.
   ========================================================================== */

.meeting-recurrence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meeting-recurrence-option {
  position: relative;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid var(--ax-border-strong);
  border-radius: 999px;
  background: var(--ax-surface);
  color: var(--ax-text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s cubic-bezier(.4,0,.2,1),
              border-color .12s cubic-bezier(.4,0,.2,1),
              color .12s cubic-bezier(.4,0,.2,1);
}

.meeting-recurrence-option:hover {
  border-color: var(--ax-p-400);
  color: var(--ax-text);
}

/* the radio itself is hidden from sight but still focusable and clickable */
.meeting-recurrence-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.meeting-recurrence-option.is-active,
.meeting-recurrence-option:has(input:checked) {
  background: var(--ax-p-600);
  border-color: var(--ax-p-600);
  color: #fff;
}

/* keyboard focus stays visible even though the control is invisible */
.meeting-recurrence-option:focus-within {
  box-shadow: var(--ax-ring);
}


/* ==========================================================================
   33. MOBILE NUMBER FIELD
   Flag and +91 sit inside the field's own border so it reads as one control
   rather than two boxes stuck together. The flag is an emoji - nothing to
   download, nothing to break.
   ========================================================================== */

.ax-phone {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background: var(--ax-surface);
  border: 1px solid var(--ax-border-strong);
  border-radius: var(--ax-r);
  transition: border-color .13s cubic-bezier(.4,0,.2,1),
              box-shadow .13s cubic-bezier(.4,0,.2,1);
}

.ax-phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 12px;
  background: var(--ax-canvas);
  border-right: 1px solid var(--ax-border);
  border-radius: calc(var(--ax-r) - 1px) 0 0 calc(var(--ax-r) - 1px);
  color: var(--ax-text-2);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  user-select: none;
  white-space: nowrap;
}
[dir="rtl"] .ax-phone-prefix { border-right: 0; border-left: 1px solid var(--ax-border); }

/* Indian tricolour drawn in CSS. The flag emoji is not rendered on Windows -
   Chrome falls back to the letters "IN" - so it is painted here instead. No
   image file, so nothing to fail to load. */
.ax-phone-flag {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  background: linear-gradient(#ff9933 0 33.34%, #fff 33.34% 66.67%, #138808 66.67% 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.ax-phone-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border: 1px solid #0a3a8f;
  border-radius: 50%;
}

/* the input gives up its own chrome - the wrapper carries it now */
.ax-phone .ax-phone-input,
.ax-phone input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 9px 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.ax-phone .ax-phone-input:focus { box-shadow: none !important; }

/* focus lights up the whole control, not just the text part */
/* jQuery Validate drops its message in as a sibling of the input, which puts
   it inside the bordered box - Perfex labels it .text-danger, not .error.
   Lift it out and sit it under the field, where every other message on the
   form appears. */
.ax-phone > label,
.ax-phone > .help-block,
.ax-phone > .text-danger {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ax-danger);
}

/* the message needs room, or it lands on the next field's label */
.form-group:has(> .ax-phone > .text-danger) { margin-bottom: 30px; }

.ax-phone:focus-within {
  border-color: var(--ax-p-500);
  box-shadow: var(--ax-ring);
}

/* invalid only after the browser has actually complained, so an empty field
   is not red before anyone has typed in it */
.ax-phone:has(.ax-phone-input:user-invalid) {
  border-color: var(--ax-danger);
}
.ax-phone:has(.ax-phone-input:user-invalid):focus-within {
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.14);
}


/* Print - drop chrome, keep content */
@media print {
  .sidebar, #header, .btn, .no-print { display: none !important; }
  #wrapper { margin: 0 !important; background: #fff !important; }
  .panel, .panel_s { border: 1px solid #ddd !important; box-shadow: none !important; }
}

/* per-card watermark icons (generated from the icons in top_stats.php) */
#widget-top_stats .quick-stats-invoices .top_stats_wrapper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23e11d48'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z'/%3E%3C/svg%3E");
}
#widget-top_stats .quick-stats-leads .top_stats_wrapper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2316a34a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941'/%3E%3C/svg%3E");
}
#widget-top_stats .quick-stats-projects .top_stats_wrapper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%233b3a8f'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75'/%3E%3C/svg%3E");
}
#widget-top_stats .quick-stats-tasks .top_stats_wrapper::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23d97706'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12'/%3E%3C/svg%3E");
}