/* =========================================================================
   KAYAN THEME SKIN
   Reshapes the existing Sneat/Bootstrap admin markup (sidebar, navbar,
   cards, tables, modals, forms, badges, buttons) into the "Kayan" visual
   language, without touching the underlying HTML structure or JS behavior
   (select2, bootstrap-table, dragula, menu ordering, etc. keep working).

   Scope: applied globally via layout.blade.php. Leads pages intentionally
   receive only the shared shell (sidebar/navbar) styling from this file —
   their page-specific markup/behavior is left untouched.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:light;
  --k-canvas:#F6F5F1;
  --k-canvas-raise:#FFFFFF;
  --k-ink:#16150F;
  --k-ink-soft:#6B675C;
  --k-ink-faint:#A8A399;
  --k-glass:rgba(255,255,255,.55);
  --k-glass-strong:rgba(255,255,255,.72);
  --k-glass-card:rgba(255,255,255,.62);
  --k-glass-border:rgba(255,255,255,.95);
  --k-glass-border-soft:rgba(20,20,15,.08);
  --k-hair:rgba(22,21,15,.08);
  --k-primary:#14120C;
  --k-on-primary:#FFFFFF;
  --k-primary-soft:#F1E9D2;
  --k-gold:#C9A227;
  --k-gold-rich:#A9841A;
  --k-gold-soft:#F5EDD3;
  --k-gold-text:#8a6a30;
  --k-coral:#D9634F;
  --k-coral-soft:#F8E7E3;
  --k-blue:#3E6AE1;
  --k-blue-soft:#E7ECFB;
  --k-green:#1E8A45;
  --k-green-soft:#DFF3E4;
  --k-amber:#C9860A;
  --k-amber-soft:#FDF0D5;
  --k-shadow-sm:0 1px 2px rgba(20,20,10,.05);
  --k-shadow-md:0 8px 28px rgba(20,20,10,.08);
  --k-shadow-lg:0 20px 60px rgba(20,20,10,.14);
  --k-radius-lg:22px;
  --k-radius-md:16px;
  --k-radius-sm:11px;
}

html[data-kayan-theme="dark"]{
  color-scheme:dark;
  --k-canvas:#000000;
  --k-canvas-raise:#1C1C1E;
  --k-ink:#F2F2F4;
  --k-ink-soft:#9A9AA1;
  --k-ink-faint:#6C6C70;
  --k-glass:rgba(28,28,30,.68);
  --k-glass-strong:rgba(30,30,32,.85);
  --k-glass-card:rgba(28,28,30,.74);
  --k-glass-border:rgba(255,255,255,.09);
  --k-glass-border-soft:rgba(255,255,255,.08);
  --k-hair:rgba(255,255,255,.09);
  --k-primary:#E3BE5C;
  --k-on-primary:#14120C;
  --k-primary-soft:rgba(227,190,92,.14);
  --k-gold:#E3BE5C;
  --k-gold-rich:#C9A227;
  --k-gold-soft:rgba(227,190,92,.14);
  --k-gold-text:#E3BE5C;
  --k-coral:#FF6E5A;
  --k-coral-soft:rgba(255,110,90,.14);
  --k-blue:#6E93FF;
  --k-blue-soft:rgba(110,147,255,.14);
  --k-green:#3FCB6E;
  --k-green-soft:rgba(63,203,110,.14);
  --k-amber:#E3A93B;
  --k-amber-soft:rgba(227,169,59,.14);
  --k-shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --k-shadow-md:0 8px 28px rgba(0,0,0,.45);
  --k-shadow-lg:0 20px 60px rgba(0,0,0,.6);
}

/* ---------------- BASE ---------------- */
html, body{ background:var(--k-canvas) !important; }
body{
  color:var(--k-ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition:background .25s ease, color .25s ease;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 620px at 90% -10%, rgba(201,162,39,.22), transparent 55%),
    radial-gradient(1000px 560px at -8% 8%, rgba(20,18,12,.08), transparent 55%),
    radial-gradient(800px 500px at 45% 100%, rgba(62,106,225,.08), transparent 60%),
    var(--k-canvas);
}
html[data-kayan-theme="dark"] body::before{
  background:
    radial-gradient(1100px 600px at 88% -8%, rgba(227,190,92,.14), transparent 55%),
    radial-gradient(900px 520px at -10% 10%, rgba(227,190,92,.05), transparent 55%),
    var(--k-canvas);
}
h1,h2,h3,h4,h5,h6{ color:var(--k-ink); font-weight:750; letter-spacing:-.01em; }
a{ color:var(--k-primary); }
::selection{ background:var(--k-gold-soft); color:var(--k-gold-text); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(28,30,33,.15); border-radius:99px; }
html[data-kayan-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); }

/* ---------------- SIDEBAR ---------------- */
.layout-menu, .layout-menu.menu-vertical{
  background:var(--k-glass) !important;
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-right:1px solid var(--k-glass-border-soft) !important;
  box-shadow:none !important;
}
.layout-menu .app-brand{ padding:1.2rem 1.2rem .6rem; }
.layout-menu .app-brand-link{ display:flex; align-items:center; gap:.5rem; }
.layout-menu .app-brand-logo img{ border-radius:10px; }
.layout-menu .btn-group.dropend .btn-primary,
.layout-menu .kws-mobile-only .btn-primary{
  background:var(--k-primary) !important; border-color:var(--k-primary) !important; color:var(--k-on-primary) !important;
  border-radius:14px !important; font-weight:650; font-size:13.5px; box-shadow:var(--k-shadow-sm);
}
/* Workspace switcher: same dropdown-menu rendered twice (see components/menu.blade.php) — dropend
   (side) on desktop, plain dropdown (below) on mobile. Both .kws-desktop-only and .kws-mobile-only
   are .btn-group, which core.css sets to display:inline-flex — must restore that exact value here,
   not block, or the button loses its flex layout (size/alignment) and looks broken. */
.kws-desktop-only{ display:inline-flex; }
.kws-mobile-only{ display:none; }
@media (max-width:1199.98px){
  .kws-desktop-only{ display:none; }
  .kws-mobile-only{ display:inline-flex; }
}
.layout-menu #menu-search{
  border-radius:11px; border:1px solid var(--k-hair); background:var(--k-canvas-raise); color:var(--k-ink);
}
.layout-menu .menu-inner{ padding:0 .5rem; }
/* core.css forces .menu-item/.menu-header to a fixed width:16.25rem regardless of the
   padding above, so they overflow this now-narrower .menu-inner by that padding amount —
   forcing a horizontal scrollbar inside the sidebar. Shrink them to match. */
.layout-menu .menu-inner > .menu-item,
.layout-menu .menu-inner > .menu-header{ width:calc(16.25rem - 1rem); }
.layout-menu .menu-header{
  color:var(--k-ink-faint) !important; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  padding:.9rem .6rem .25rem;
}
.layout-menu .menu-header::before{ display:none; }
.layout-menu .menu-link{
  border-radius:12px; color:var(--k-ink-soft) !important; font-size:14px; font-weight:500;
  padding:.6rem .7rem; margin:1px 0; transition:background .15s ease, color .15s ease;
}
.layout-menu .menu-link:hover{ background:rgba(28,30,33,.06) !important; color:var(--k-ink) !important; }
.layout-menu .menu-item.active > .menu-link,
.layout-menu .menu-item.open > .menu-link.menu-toggle{
  background:var(--k-primary-soft) !important; color:var(--k-primary) !important; font-weight:650;
}
html[data-kayan-theme="dark"] .layout-menu .menu-item.active > .menu-link,
html[data-kayan-theme="dark"] .layout-menu .menu-item.open > .menu-link.menu-toggle{
  color:var(--k-gold-text) !important;
}
.layout-menu .menu-icon{ color:inherit; opacity:.85; }
.layout-menu .menu-sub{ border-left:1px solid var(--k-hair); margin-left:1.1rem; padding-left:.3rem; }
.layout-menu .menu-sub .menu-link{ font-size:13.3px; padding:.5rem .65rem; }
.layout-menu .badge{ border-radius:99px; }
.layout-menu hr.dropdown-divider{ border-color:var(--k-hair); opacity:1; }

/* Off-canvas mobile/tablet sidebar (Sneat's own breakpoint, see core.css ~15464) got two
   scrollbars: the fixed-position #layout-menu aside itself (its content — logo, workspace
   switcher, search box, menu list — is taller than the viewport, and with default
   overflow:visible some mobile browsers still let the outer fixed panel be dragged/scrolled)
   PLUS menu.js's own PerfectScrollbar instance on .menu-inner (the intended, single scroll
   region). Forcing the aside to overflow:hidden leaves .menu-inner as the only scrollable area. */
@media (max-width: 1199.98px){
  #layout-menu.layout-menu{ overflow:hidden; }
  .layout-menu .menu-inner{ min-height:0; overflow-x:hidden; }
}
.dropdown-menu.show{ z-index:10000; }

/* ---------------- NAVBAR / TOPBAR ---------------- */
.layout-navbar{
  background:var(--k-glass-strong) !important;
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--k-glass-border-soft) !important;
  box-shadow:none !important;
}
.layout-navbar .nav-link, .layout-navbar #global-search{ color:var(--k-ink-soft) !important; }
.layout-navbar .nav-item > .nav-link.dropdown-toggle{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--k-glass-border-soft); background:var(--k-glass-card);
}
.layout-navbar .badge.bg-danger{ background:var(--k-coral) !important; }
/* Notification bell unread-count badge: a small dot indicator rather than a number-sized pill. */
#unreadNotificationsCount{
  width:10px !important; height:10px !important;
  min-width:0; padding:0; font-size:0; line-height:0;
}

/* ---------------- DROPDOWNS ---------------- */
.dropdown-menu{
  border-radius:16px !important; border:1px solid var(--k-hair) !important;
  box-shadow:var(--k-shadow-lg) !important; background:var(--k-canvas-raise) !important; padding:6px !important;
}
.dropdown-item{ border-radius:10px; color:var(--k-ink) !important; font-size:13.5px; padding:.55rem .65rem; }
.dropdown-item:hover, .dropdown-item:focus{ background:var(--k-primary-soft) !important; }
.dropdown-divider{ border-color:var(--k-hair); }

/* ---------------- CARDS ---------------- */
.card{
  background:var(--k-glass-card) !important;
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft) !important;
  border-radius:var(--k-radius-lg) !important;
  box-shadow:var(--k-shadow-sm) !important;
  color:var(--k-ink);
}
.card .card-header{ background:transparent !important; border-bottom:1px solid var(--k-hair) !important; font-weight:700; color:var(--k-ink); }
.card .card-body{ color:var(--k-ink); }
.card-title{ color:var(--k-ink); font-weight:700; }

/* ---------------- STAT / DASHBOARD TILES ---------------- */
.dashboard-tile, .card.dashboard-tile{ transition:transform .2s ease, box-shadow .2s ease; }
.dashboard-tile:hover{ transform:translateY(-2px); box-shadow:var(--k-shadow-md) !important; }

/* ---------------- BUTTONS ---------------- */
.btn{ border-radius:12px !important; font-weight:600; }
.btn-primary{ background:var(--k-primary) !important; border-color:var(--k-primary) !important; color:var(--k-on-primary) !important; box-shadow:0 4px 14px rgba(20,18,12,.22); }
.btn-primary:hover, .btn-primary:focus{ filter:brightness(1.08); }
.btn-outline-primary{ border-color:var(--k-primary) !important; color:var(--k-primary) !important; }
.btn-outline-primary:hover{ background:var(--k-primary) !important; color:var(--k-on-primary) !important; }
.btn-label-primary{ background:var(--k-primary-soft) !important; color:var(--k-primary) !important; }
.btn-danger, .btn-label-danger{ background:var(--k-coral) !important; border-color:var(--k-coral) !important; }
.btn-outline-danger{ border-color:var(--k-coral) !important; color:var(--k-coral) !important; }
.btn-success, .btn-label-success{ background:var(--k-green) !important; border-color:var(--k-green) !important; }
.btn-warning, .btn-label-warning{ background:var(--k-amber) !important; border-color:var(--k-amber) !important; color:#fff !important; }
.btn-info, .btn-label-info{ background:var(--k-blue) !important; border-color:var(--k-blue) !important; }

/* ---------------- BADGES ---------------- */
.badge{ border-radius:99px !important; font-weight:700; letter-spacing:.02em; }
.badge.bg-primary, .bg-label-primary{ background:var(--k-primary-soft) !important; color:var(--k-primary) !important; }
.badge.bg-success, .bg-label-success{ background:var(--k-green-soft) !important; color:var(--k-green) !important; }
.badge.bg-danger, .bg-label-danger{ background:var(--k-coral-soft) !important; color:var(--k-coral) !important; }
.badge.bg-warning, .bg-label-warning{ background:var(--k-amber-soft) !important; color:var(--k-amber) !important; }
.badge.bg-info, .bg-label-info{ background:var(--k-blue-soft) !important; color:var(--k-blue) !important; }

/* ---------------- TABLES / BOOTSTRAP-TABLE ---------------- */
.table{ color:var(--k-ink); }
.table thead th{
  border-bottom:1px solid var(--k-hair) !important; color:var(--k-ink-faint); font-size:11.5px;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:transparent !important;
}
.table td, .table th{ border-color:var(--k-hair) !important; vertical-align:middle; }
.table-hover tbody tr:hover{ background:rgba(28,30,33,.045) !important; }
.fixed-table-container, .fixed-table-toolbar{ background:transparent; }
.fixed-table-toolbar .search input, .fixed-table-toolbar .form-control, .fixed-table-toolbar .form-select{
  border-radius:11px !important; border:1px solid var(--k-hair) !important; background:var(--k-canvas-raise) !important;
}
.pagination .page-link{ border-radius:10px !important; margin:0 2px; border:1px solid var(--k-hair) !important; color:var(--k-ink-soft) !important; }
.pagination .page-item.active .page-link{ background:var(--k-primary) !important; border-color:var(--k-primary) !important; color:var(--k-on-primary) !important; }

/* ---------------- FORMS ---------------- */
.form-control, .form-select, .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  border-radius:11px !important; border:1px solid var(--k-hair) !important;
  background:var(--k-canvas-raise) !important; color:var(--k-ink) !important;
}
.form-control:focus, .form-select:focus{ border-color:var(--k-primary) !important; box-shadow:0 0 0 2px var(--k-primary-soft) !important; }
.form-label{ font-size:12px; font-weight:650; color:var(--k-ink-soft); }
.input-group-text{ background:var(--k-canvas) !important; border:1px solid var(--k-hair) !important; color:var(--k-ink-soft); }

/* ---------------- MODALS ---------------- */
.modal-content{ border-radius:20px !important; border:1px solid var(--k-hair) !important; background:var(--k-canvas-raise) !important; box-shadow:var(--k-shadow-lg) !important; }
.modal-header{ border-bottom:1px solid var(--k-hair) !important; }
.modal-footer{ border-top:1px solid var(--k-hair) !important; }
.modal-title{ font-weight:750; color:var(--k-ink); }

/* ---------------- TABS ---------------- */
.nav-tabs{ border-bottom:1px solid var(--k-hair) !important; }
.nav-tabs .nav-link{ border:none !important; border-radius:10px 10px 0 0 !important; color:var(--k-ink-soft) !important; font-weight:600; }
.nav-tabs .nav-link.active{ background:var(--k-primary-soft) !important; color:var(--k-primary) !important; }
.nav-pills .nav-link.active{ background:var(--k-primary) !important; color:var(--k-on-primary) !important; }

/* ---------------- THEME TOGGLE BUTTON ---------------- */
#kayanThemeToggle{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--k-glass-border-soft);
  background:var(--k-glass-card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--k-ink-soft); margin-right:.5rem;
}
#kayanThemeToggle svg{ width:17px; height:17px; }

/* ---------------- LIST TABLES → KAYAN ROW CARDS ----------------
   Applies to every server-side bootstrap-table list in the app (Users,
   Clients, Workspaces, Statuses, Priorities, Contracts, Payslips, etc. —
   they all share this exact #table markup). Pure CSS: sort/pagination/
   column-visibility/search all keep working untouched. */
#table.table{
  border-collapse:separate !important;
  border-spacing:0 9px !important;
}
#table.table thead th{
  padding:.7rem .9rem !important;
}
#table.table tbody tr{ background:transparent; }
#table.table tbody tr td{
  background:var(--k-glass-card) !important;
  border-top:1px solid var(--k-glass-border-soft) !important;
  border-bottom:1px solid var(--k-glass-border-soft) !important;
  padding:.85rem .9rem !important;
  box-shadow:var(--k-shadow-sm);
  transition:background .15s ease;
}
#table.table tbody tr:hover td{ background:var(--k-primary-soft) !important; }
#table.table tbody tr td:first-child{
  border-left:1px solid var(--k-glass-border-soft) !important;
  border-top-left-radius:var(--k-radius-sm) !important;
  border-bottom-left-radius:var(--k-radius-sm) !important;
}
#table.table tbody tr td:last-child{
  border-right:1px solid var(--k-glass-border-soft) !important;
  border-top-right-radius:var(--k-radius-sm) !important;
  border-bottom-right-radius:var(--k-radius-sm) !important;
}
.fixed-table-container{ border:none !important; }
.fixed-table-loading{ background:transparent !important; }

/* Avatars / profile chips commonly rendered inside table cells & cards */
.avatar-initial{ border-radius:12px !important; }
.avatar.avatar-sm .avatar-initial, .avatar-sm .avatar-initial{ border-radius:10px !important; }
img.rounded-circle, .avatar img{ box-shadow:var(--k-shadow-sm); }

/* ---------------- DASHBOARD STAT TILES (x-dashboard.tile) ---------------- */
.dashboard-tile{ border-radius:var(--k-radius-lg) !important; }
.dashboard-tile .avatar .avatar-initial{
  width:40px !important; height:40px !important; display:flex !important;
  align-items:center; justify-content:center; border-radius:12px !important;
}
.dashboard-tile h3{ font-size:26px; letter-spacing:-.02em; }
.dashboard-tile h6{ color:var(--k-ink-soft); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; }

/* ---------------- BREADCRUMBS (used at the top of nearly every page) ---------------- */
.breadcrumb{ margin-bottom:0; }
.breadcrumb-item{ font-size:10px; color:var(--k-ink-faint); font-weight:500; }
.breadcrumb-item a{ color:var(--k-ink-faint); text-decoration:none; }
.breadcrumb-item a:hover{ color:var(--k-primary); }
.breadcrumb-item.active{ color:var(--k-ink); font-weight:650; }
.breadcrumb-item + .breadcrumb-item::before{ color:var(--k-ink-faint); }

/* Small circular icon-only action buttons (create/upload/etc. at page top) */
.btn-sm.btn-primary{ border-radius:12px !important; }

/* ---------------- ADD BUTTON (pill with icon + label — "New Status"/"New Lead"/etc. page-head actions) ---------------- */
.add-btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--k-primary); color:var(--k-on-primary);
  border:none; padding:9px 15px 9px 12px; border-radius:12px; font-size:13.5px; font-weight:650;
  cursor:pointer; box-shadow:0 4px 14px rgba(20,18,12,.22); flex-shrink:0; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.add-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,18,12,.28); color:var(--k-on-primary); }
.add-btn i{ font-size:16px; line-height:1; }
.add-btn span{ white-space:nowrap; }
@media (max-width:860px){
  .add-btn span{ display:none; }
  .add-btn{ padding:10px; border-radius:12px; }
}

/* Icon-chip action buttons living outside .tag-actions/.k-card-actions (e.g. lp-detail-actions on Leads rows) */
.lp-detail-actions a, .lp-detail-actions button{
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--k-ink-faint); background:transparent; border:none; cursor:pointer; text-decoration:none; flex-shrink:0; padding:0;
}
.lp-detail-actions a:hover, .lp-detail-actions .edit:hover{ background:var(--k-primary-soft); color:var(--k-primary); }
.lp-detail-actions .delete:hover, .lp-detail-actions .text-danger:hover{ background:var(--k-coral-soft) !important; color:var(--k-coral) !important; }

/* ---------------- APEXCHARTS (dashboard donuts / income-expense) ---------------- */
.apexcharts-canvas, .apexcharts-canvas *{ font-family:'Inter', sans-serif !important; }
.apexcharts-legend-text{ color:var(--k-ink-soft) !important; font-size:12.5px !important; font-weight:600 !important; }
.apexcharts-tooltip{
  background:var(--k-canvas-raise) !important; border:1px solid var(--k-hair) !important;
  border-radius:12px !important; box-shadow:var(--k-shadow-md) !important; color:var(--k-ink) !important;
}
.apexcharts-tooltip-title{ background:transparent !important; border-bottom:1px solid var(--k-hair) !important; font-weight:700 !important; }
.apexcharts-datalabel, .apexcharts-text{ fill:var(--k-ink) !important; }
.apexcharts-pie-label{ fill:#fff !important; }

/* ---------------- KANBAN BOARDS (projects / tasks / leads) ---------------- */
.kanban-column, .kanban-column-body{
  background:var(--k-glass) !important; border:1px solid var(--k-glass-border-soft) !important;
  border-radius:var(--k-radius-md) !important; backdrop-filter:blur(16px) saturate(150%);
}
.kanban-card{
  background:var(--k-glass-card) !important; border:1px solid var(--k-glass-border-soft) !important;
  border-radius:var(--k-radius-sm) !important; box-shadow:var(--k-shadow-sm) !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.kanban-card:hover{ transform:translateY(-2px); box-shadow:var(--k-shadow-md) !important; }
.kanban-board{ background:transparent !important; }
/* Tasks board view (resources/views/tasks/board_view.blade.php) */
.kanban-tasks .card{ border-radius:var(--k-radius-sm) !important; }

/* ---------------- FULLCALENDAR (Holiday Calendar / Google Calendar sync) ---------------- */
.fc{ font-family:'Inter', sans-serif !important; }
.fc .fc-toolbar-title{ color:var(--k-ink) !important; font-weight:750 !important; font-size:18px !important; }
.fc .fc-button{
  background:var(--k-canvas-raise) !important; border:1px solid var(--k-hair) !important;
  color:var(--k-ink-soft) !important; border-radius:10px !important; box-shadow:none !important;
  text-transform:capitalize !important;
}
.fc .fc-button:hover{ background:var(--k-primary-soft) !important; color:var(--k-primary) !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active{
  background:var(--k-primary) !important; border-color:var(--k-primary) !important; color:var(--k-on-primary) !important;
}
.fc .fc-col-header-cell{ background:transparent !important; }
.fc .fc-col-header-cell-cushion{ color:var(--k-ink-faint) !important; font-size:11.5px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.04em; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid{ border-color:var(--k-hair) !important; }
.fc .fc-daygrid-day-number{ color:var(--k-ink-soft) !important; font-size:13px; }
.fc .fc-day-today{ background:var(--k-primary-soft) !important; }
.fc-event{ border:none !important; border-radius:8px !important; font-size:11.5px !important; font-weight:600 !important; padding:1px 4px; }
#color-legend{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--k-ink-soft); }
.legend-container{ display:flex; gap:14px; flex-wrap:wrap; }
.legend-item{ display:flex; align-items:center; gap:6px; }
.legend-box{ width:11px; height:11px; border-radius:4px; display:inline-block; }
.legend-box.bg-primary{ background:var(--k-primary) !important; }
.legend-box.bg-success{ background:var(--k-green) !important; }
.legend-box.bg-warning{ background:var(--k-amber) !important; }
.legend-box.bg-danger{ background:var(--k-coral) !important; }

/* ---------------- REPORT / SUMMARY CARDS (Reports, HRMS overview strips) ---------------- */
.card.border-0.shadow-sm{ transition:transform .2s ease, box-shadow .2s ease; }
.card.border-0.shadow-sm:hover{ transform:translateY(-2px); }
.card.border-0.shadow-sm .card-body > i[class*="bx-"]{
  width:42px !important; height:42px !important; border-radius:12px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:var(--k-primary-soft) !important; font-size:19px !important; flex-shrink:0;
}

/* ---------------- TIMELINE (Recent Activities feed) ---------------- */
.timeline-point{ border-width:2px !important; }
.timeline-point-primary{ background:var(--k-primary) !important; border-color:var(--k-primary) !important; }
.timeline-point-success{ background:var(--k-green) !important; border-color:var(--k-green) !important; }
.timeline-point-info{ background:var(--k-blue) !important; border-color:var(--k-blue) !important; }
.timeline-point-warning{ background:var(--k-amber) !important; border-color:var(--k-amber) !important; }
.timeline-point-danger{ background:var(--k-coral) !important; border-color:var(--k-coral) !important; }
.timeline .timeline-item:not(:last-child):before{ background-color:var(--k-hair) !important; }
.timeline-header h6{ color:var(--k-ink) !important; }
.timeline-body p, .timeline-header small, .text-muted{ color:var(--k-ink-faint) !important; }

/* ---------------- KAYAN ROW-CARD COMPONENTS (Users / Clients / Workspaces list rows) ----------------
   These power the unified card layout returned by UserController@list,
   ClientController@list and WorkspacesController@list. Actions/links keep
   their original classes (.delete, .viewAssigned, .edit-workspace, etc.)
   so all existing delegated JS handlers keep working unchanged. */

/* Since these rows render inside #table td, undo the row-card wrapper's
   own padding/background so we don't get a "card inside a card" look. */
#table.table tbody tr:has(.k-card-row) td:has(.k-card-row){ padding:.6rem .7rem !important; }

.k-card-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.k-card-avatar{
  width:44px; height:44px; border-radius:13px; flex-shrink:0; overflow:hidden;
  display:block; box-shadow:var(--k-shadow-sm);
}
.k-card-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.k-card-body{ flex:1; min-width:200px; }
.k-card-toprow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.k-card-name{ font-size:14px; font-weight:700; color:var(--k-ink); }
.k-card-email{ display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--k-ink-soft); }
.k-card-email i{ font-size:13px; color:var(--k-ink-faint); }
.k-card-meta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:5px; }
.k-card-meta-chip{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--k-ink-faint); }
.k-card-meta-chip i{ font-size:13px; }
.k-card-counts{ display:flex; gap:6px; flex-shrink:0; }
.k-card-actions{ display:flex; gap:2px; flex-shrink:0; margin-left:auto; }
.k-card-actions a, .k-card-actions button{
  width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--k-ink-faint); background:transparent; border:none; cursor:pointer;
}
.k-card-actions a:hover{ background:var(--k-primary-soft); color:var(--k-primary); }
.k-card-actions button:hover{ background:var(--k-coral-soft); }
.k-count-link{ text-decoration:none; }

/* Status / role / type chips */
.status-chip{ font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:99px; letter-spacing:.03em; white-space:nowrap; }
.status-chip.active{ background:var(--k-green-soft); color:var(--k-green); }
.status-chip.inactive, .status-chip.deactive{ background:var(--k-coral-soft); color:var(--k-coral); }
.role-chip{ font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:99px; letter-spacing:.03em; display:inline-block; margin-bottom:5px; }
.role-chip.admin{ background:var(--k-blue-soft); color:var(--k-blue); }
.role-chip.member{ background:var(--k-gold-soft); color:var(--k-gold-text); }
.type-chip{ font-size:9.5px; font-weight:800; padding:3px 9px; border-radius:99px; letter-spacing:.03em; background:var(--k-blue); color:#fff; display:inline-block; margin-bottom:5px; }

/* Count pills (Projects / Tasks) */
.count-pill{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:52px; height:48px; padding:0 8px; border-radius:12px;
  background:var(--k-primary-soft); color:var(--k-primary); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.count-pill b{ font-size:15px; font-weight:800; line-height:1.3; }

/* Workspaces: avatar groups, not-assigned pill, action buttons, title, toggle */
.ws-avatars{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mini-avatar-img{ width:28px; height:28px; border-radius:9px; overflow:hidden; display:block; margin-left:-6px; box-shadow:0 0 0 2px var(--k-canvas-raise); }
.mini-avatar-img:first-child{ margin-left:0; }
.mini-avatar-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ws-not-assigned{ font-size:9.5px; font-weight:700; padding:4px 10px; border-radius:99px; background:var(--k-primary); color:var(--k-on-primary); }
.ws-act-btn{
  width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--k-ink-faint); background:transparent; text-decoration:none; flex-shrink:0;
}
.ws-act-btn:hover, .ws-act-btn.edit:hover{ background:var(--k-primary-soft); color:var(--k-primary); }
.ws-title{ font-size:14px; font-weight:700; }
.ws-primary-badge{ font-size:9px; font-weight:800; padding:3px 9px; border-radius:99px; background:var(--k-green); color:#fff; letter-spacing:.03em; }
.ws-toggle-switch{ display:inline-flex; cursor:pointer; }
.ws-toggle-switch input{ position:absolute; opacity:0; width:0; height:0; }
.ws-toggle-track{ width:36px; height:20px; border-radius:99px; background:var(--k-hair); position:relative; transition:background .2s ease; display:block; }
.ws-toggle-dot{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:99px; background:#fff; box-shadow:var(--k-shadow-sm); transition:transform .2s ease; }
.ws-toggle-switch input:checked + .ws-toggle-track{ background:var(--k-primary); }
.ws-toggle-switch input:checked + .ws-toggle-track .ws-toggle-dot{ transform:translateX(16px); }

/* ---------------- LEADS: FOLLOW UPS / VOICE NOTES — now styled to match the rest of the site
   (2026-09-15, at the person's request). Previously these tabs/modals had a scoped reset back to
   stock Bootstrap; that block has been removed so .card/.btn-primary/.form-control/.modal-content/
   .badge here simply inherit the same Kayan glass rules already defined above for the rest of the
   app — no new selectors needed for those. A backup of the removed CSS lives at
   public/assets/css/kayan-theme.followups-voicenotes.reset.css.bak for an exact revert. */
#voice_note_recorder{
  background:var(--k-glass-card) !important; backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft) !important; border-radius:var(--k-radius-lg) !important;
}
/* Bootstrap's raw contextual utility classes (.text-primary/-danger/-secondary, .border-success/
   -warning/-info, .bg-light) are never remapped to the Kayan palette site-wide (only the .badge/
   .bg-label-* variants are, via the rules above) — this markup is the one place on the site that
   still leans on the raw utilities directly, so without a scoped remap they render in Bootstrap's
   stock indigo/red/orange/cyan instead of Kayan's gold/coral/amber/blue tokens. Font sizes here
   also default to the 15-16px Sneat base instead of the tighter 11.5-13.5px scale used by the rest
   of this lead page's cards (.ld-info-card, .ld-id-card etc) — matched explicitly below. */
#follow-ups, #voice-notes,
#create_lead_follow_up_modal, #edit_lead_follow_up_modal, #follow_up_voice_note_modal{
  font-size:13px;
}
#follow-ups h6{ font-size:13.5px; }
#follow-ups small, #follow-ups .small,
#voice-notes small, #voice-notes .small{ font-size:11.5px; }
#follow-ups .text-primary{ color:var(--k-primary) !important; }
#follow-ups .text-danger, #voice-notes .text-danger,
#create_lead_follow_up_modal .text-danger, #edit_lead_follow_up_modal .text-danger{ color:var(--k-coral) !important; }
#follow-ups .text-secondary{ color:var(--k-ink-faint) !important; }
#follow-ups .border-success{ border-color:var(--k-green) !important; }
#follow-ups .border-warning{ border-color:var(--k-amber) !important; }
#follow-ups .border-info{ border-color:var(--k-blue) !important; }
#follow-ups .bg-light, #voice-notes .bg-light{ background:var(--k-canvas) !important; }

/* ---------------- LEADS LIST (lp-row cards, matches Kayan mockup) ---------------- */
#table.table tbody tr:has(.lp-row) td:has(.lp-row){ padding:.6rem .7rem !important; }
.lp-row{ display:flex; flex-direction:column; gap:0; position:relative; min-width:0; max-width:100%; }
.lp-row-top{ display:flex; align-items:center; gap:11px; cursor:pointer; }
.lp-avatar{ width:36px; height:36px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; }
.lp-name-block{ flex:1; min-width:0; }
.lp-name{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; color:var(--k-ink); }
.lp-name a{ color:var(--k-ink-faint); }
.lp-email, .lp-subtitle{ font-size:11.5px; color:var(--k-ink-soft); display:flex; align-items:center; gap:4px; }
.lp-quick-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:30px; height:30px; border-radius:6px; color:#fff !important; vertical-align:middle;
}
.lp-quick-icon i{ font-size:18px; }
.lp-quick-icon.call{ background:var(--k-blue); }
.lp-quick-icon.whatsapp{ background:#25D366; }
.lp-source-pill{ font-size:9.5px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--k-primary-soft); color:var(--k-primary); text-transform:capitalize; flex-shrink:0; }
.status-pill-task{ font-size:9.5px; font-weight:800; padding:4px 10px; border-radius:99px; letter-spacing:.02em; flex-shrink:0; white-space:nowrap; }
.status-pill-task.stage-primary{ background:var(--k-primary-soft); color:var(--k-primary); }
.status-pill-task.stage-success{ background:var(--k-green-soft); color:var(--k-green); }
.status-pill-task.stage-warning{ background:var(--k-amber-soft); color:var(--k-amber); }
.status-pill-task.stage-danger{ background:var(--k-coral-soft); color:var(--k-coral); }
.status-pill-task.stage-info{ background:var(--k-blue-soft); color:var(--k-blue); }
.status-pill-task.stage-secondary, .status-pill-task.stage-dark, .status-pill-task.stage-light{ background:var(--k-hair); color:var(--k-ink-soft); }
.lp-expand-btn{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--k-ink-faint); cursor:pointer; background:none; border:none; flex-shrink:0; }
.lp-expand-btn i{ transition:transform .2s ease; }
.lp-row.expanded .lp-expand-btn i{ transform:rotate(180deg); }
.lp-meta-rows-wrap{ display:block; }
.lp-meta-row{ display:flex; align-items:center; gap:14px; margin-top:10px; padding-top:10px; border-top:1px solid var(--k-hair); flex-wrap:wrap; }
.lp-meta-row.lp-meta-row-secondary, .lp-meta-row.lp-meta-row-tertiary{ border-top:none; padding-top:0; margin-top:6px; }
/* Rows 1 & 2 (meta + contact/area) sit side-by-side, spread edge-to-edge, on desktop only —
   the wrapper takes over the top border/spacing so there's one separator above both columns
   instead of one per row; row 3 is unaffected and keeps stacking below as its own row. */
@media (min-width:861px){
  .lp-meta-row:not(.lp-meta-row-tertiary){ justify-content:space-between; }
  .lp-meta-rows-wrap{
    display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
    margin-top:10px; padding-top:10px; border-top:1px solid var(--k-hair);
  }
  .lp-meta-rows-wrap .lp-meta-row{ margin-top:0; padding-top:0; border-top:none; }
}
.lp-meta-item{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--k-ink-faint); }
.lp-agent-compact{ display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.lp-agent-avatar{
  width:24px; height:24px; border-radius:99px; background:var(--k-primary); color:var(--k-on-primary);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0;
}
.lp-agent-name{ font-size:10px; color:var(--k-ink-soft); font-weight:600; white-space:nowrap; max-width:70px; overflow:hidden; text-overflow:ellipsis; }
.lp-stat-field{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lp-stat-field-label{ font-size:9px; font-weight:700; color:var(--k-ink-faint); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.lp-stat-field-value{ font-size:12.5px; font-weight:700; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.lp-detail{ display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--k-hair); max-width:100%; overflow-x:hidden; }
.lp-row.expanded .lp-detail{ display:block; }
.lp-detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px; margin-bottom:12px; }
.lp-detail-field{ background:var(--k-canvas); border-radius:10px; padding:8px 10px; min-width:0; }
.lp-detail-field.full{ grid-column:1 / -1; }
.lp-detail-label{ font-size:9px; font-weight:700; color:var(--k-ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; display:block; }
.lp-detail-value{ font-size:12.5px; color:var(--k-ink); font-weight:600; overflow-wrap:break-word; word-break:break-word;text-wrap:wrap; }
.lp-detail-actions{ display:flex; gap:4px; flex-wrap:wrap; }
/* Stage-tinted row background (very light wash behind the whole card) */
.lp-row.stage-primary{ background:var(--k-primary-soft); border-radius:var(--k-radius-sm); padding:10px; }
.lp-row.stage-success{ background:var(--k-green-soft); border-radius:var(--k-radius-sm); padding:10px; }
.lp-row.stage-warning{ background:var(--k-amber-soft); border-radius:var(--k-radius-sm); padding:10px; }
.lp-row.stage-danger{ background:var(--k-coral-soft); border-radius:var(--k-radius-sm); padding:10px; }
.lp-row.stage-info{ background:var(--k-blue-soft); border-radius:var(--k-radius-sm); padding:10px; }
@media (max-width:640px){
  .lp-detail-grid{ grid-template-columns:minmax(0,1fr); }
  .lp-meta-row{ gap:10px; }
  .lp-meta-row-tertiary{ justify-content:space-between; }
}

/* ---------------- LEAD DETAIL PAGE (ld-*, matches Kayan mockup; Follow Ups / Voice Notes excluded above) ---------------- */
.ld-update-btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--k-primary); color:var(--k-on-primary);
  border:none; padding:9px 16px; border-radius:11px; font-size:13px; font-weight:650; cursor:pointer;
  box-shadow:0 4px 14px rgba(20,18,12,.22); flex-shrink:0; text-decoration:none;
}
.ld-grid{ display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:start; }
/* Mobile swaps Contact Information and Social Links (position + tab-gating): Contact Info
   becomes an always-visible sidebar card, Social Links moves into the Info tab. Each card is
   rendered twice via the same partial (see leads/partials/_contact_info_card.blade.php and
   _social_links_card.blade.php) — one desktop-positioned copy, one mobile-positioned copy —
   and only one of the two is ever shown at a given width. */
.ld-mobile-only{ display:none; }
.ld-desktop-only{ display:block; }
@media (max-width:860px){
  .ld-grid{ grid-template-columns:1fr; }
  .ld-mobile-only{ display:block; }
  .ld-desktop-only{ display:none; }
}
.ld-id-card{
  background:var(--k-glass-card); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft); border-radius:var(--k-radius-lg); padding:24px 20px;
  box-shadow:var(--k-shadow-sm); text-align:center;
}
.ld-avatar-lg{
  width:76px; height:76px; border-radius:99px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:26px; box-shadow:var(--k-shadow-md);
}
.ld-id-name{ font-size:17px; font-weight:750; margin-bottom:3px; color:var(--k-ink); }
.ld-id-company{ font-size:12.5px; color:var(--k-ink-faint); margin-bottom:14px; }
.ld-quick-actions{ display:flex; justify-content:center; gap:10px; margin-bottom:18px; }
.ld-quick-btn{
  width:38px; height:38px; border-radius:99px; border:1.5px solid var(--k-hair); background:var(--k-canvas-raise);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--k-ink-soft);
}
.ld-quick-btn.mail{ border-color:var(--k-primary); color:var(--k-primary); }
.ld-quick-btn.call{ border-color:var(--k-green); color:var(--k-green); }
.ld-quick-btn.whatsapp{ border-color:#25D366; color:#25D366; }
.ld-id-fields{ text-align:left; border-top:1px solid var(--k-hair); padding-top:14px; display:flex; flex-direction:column; gap:11px; }
.ld-id-field-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ld-id-field-label{ font-size:12px; color:var(--k-ink-faint); font-weight:600; }
.ld-id-field-value{ font-size:12.5px; font-weight:650; text-align:right; color:var(--k-ink); }
.ld-social-card{
  background:var(--k-glass-card); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft); border-radius:var(--k-radius-lg); padding:18px; margin-top:16px;
}
.ld-social-card h3{ font-size:14px; font-weight:700; margin:0 0 4px; color:var(--k-ink); }
.ld-social-empty{ font-size:12.5px; color:var(--k-ink-faint); }
.ld-details-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.ld-details-head h2, .ld-details-head h5{ font-size:16px; font-weight:750; margin:0; color:var(--k-ink); }
.ld-tab-group{ display:flex; gap:8px; background:transparent; border-radius:0; padding:0; border:none !important; margin:0 !important; }
/* Outline style matching .btn-outline-primary (the Add Todo button) for visibility, instead of
   the previous flat/borderless segmented-control look. */
.ld-tab.nav-link{
  padding:7px 14px !important; border-radius:8px !important; font-size:12.5px; font-weight:650;
  border:1.5px solid var(--k-primary) !important; color:var(--k-primary) !important; background:transparent !important;
}
.ld-tab.nav-link:hover{ background:var(--k-primary) !important; color:var(--k-on-primary) !important; }
.ld-tab.nav-link.active{ background:var(--k-primary) !important; color:var(--k-on-primary) !important; box-shadow:var(--k-shadow-sm); }
.ld-info-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ld-info-card{
  background:var(--k-glass-card); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft) !important; border-radius:var(--k-radius-lg) !important; padding:18px;
}
.ld-info-card-head{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; margin-bottom:14px; color:var(--k-ink); }
.ld-info-card-head i{ color:var(--k-ink-faint); font-size:16px; }
.ld-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; }
.ld-info-field-label{ font-size:10.5px; color:var(--k-ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; display:block; }
.ld-info-field-value{ font-size:13.5px; font-weight:600; color:var(--k-ink); }
.ld-info-field-value a{ color:var(--k-primary); }
@media (max-width:640px){ .ld-info-two-col, .ld-info-grid{ grid-template-columns:1fr; } }

/* ---------------- MOBILE BOTTOM TAB BAR (global, all pages) ---------------- */
.kayan-mobile-tabbar{ display:none; }
@media (max-width:860px){
  .kayan-mobile-tabbar{
    display:flex; justify-content:space-around; align-items:center;
    position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 12px);
    height:64px; padding:0 6px;
    background:var(--k-glass-strong); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid var(--k-glass-border); border-radius:22px; box-shadow:var(--k-shadow-lg);
    z-index:1050;
  }
  .kayan-mtab{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--k-ink-faint); font-size:10px; font-weight:600; flex:1;
    text-decoration:none !important;
  }
  .kayan-mtab i{ font-size:21px; line-height:1; }
  .kayan-mtab.active{ color:var(--k-primary); }
  /* keep page content clear of the floating bar. The footer is a sibling of
     .content-wrapper (see layout.blade.php), not inside it, so it needs its own clearance too —
     otherwise the fixed tab bar sits on top of the last bit of footer content. */
  .content-wrapper{ padding-bottom:92px !important; }
  .footer{ padding-bottom:92px !important; }
}

/* ---------------- PAGE HEADER (lp-head-row: title + subtitle + actions) ---------------- */
.lp-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.lp-head-text h1{ font-size:24px; font-weight:750; margin:0 0 3px; letter-spacing:-.02em; color:var(--k-ink); }
.lp-head-text p{ margin:0; font-size:13px; color:var(--k-ink-soft); }
.lp-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.lp-head-actions .btn{ width:38px; height:38px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }

/* Leads list, mobile only: drop the bootstrap-table select-row checkbox column — the row cards
   are wide enough already on small screens, and bulk-select isn't a mobile workflow here. */
@media (max-width:860px){
  .leads-index-page .bs-checkbox{ display:none !important; }
}

/* ---------------- COLLAPSIBLE FILTERS PANEL (Filters toggle, used on list pages) ---------------- */
.filters-panel{ margin-bottom:14px; }
.filters-toggle{
  display:flex; align-items:center; gap:8px; width:100%;
  background:var(--k-glass-card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--k-glass-border-soft); border-radius:12px; padding:10px 14px;
  font-size:13.5px; font-weight:650; color:var(--k-ink); cursor:pointer;
}
.filters-toggle i{ font-size:16px; color:var(--k-ink-soft); }
.filters-toggle .f-label{ flex:1; text-align:left; }
.filters-toggle .f-chev{ font-size:16px; color:var(--k-ink-faint); transition:transform .2s ease; }
.filters-panel.open .filters-toggle .f-chev{ transform:rotate(180deg); }
.filters-panel.open .filters-toggle{ border-radius:12px 12px 0 0; border-bottom-color:transparent; }
.filters-body{
  max-height:0; overflow:hidden; transition:max-height .28s ease;
  background:var(--k-glass-card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-left:1px solid var(--k-glass-border-soft); border-right:1px solid var(--k-glass-border-soft);
  border-radius:0 0 12px 12px;
}
.filters-panel.open .filters-body{ max-height:600px; border-bottom:1px solid var(--k-glass-border-soft); }
.filters-body-inner{ padding:14px; }

/* ---------------- TABLE TOOLBAR PILL BUTTONS (Delete Selected / Clear Filters — injected by custom.js) ---------------- */
.fixed-table-toolbar .btn.delete-selected{
  border-radius:99px !important; padding:9px 14px !important; font-size:12.5px !important; font-weight:650 !important;
  background:var(--k-coral-soft) !important; color:var(--k-coral) !important; border-color:rgba(217,99,79,.2) !important;
}
.fixed-table-toolbar .btn[class*="clear-"][class*="-filters"]{
  border-radius:99px !important; padding:9px 14px !important; font-size:12.5px !important; font-weight:650 !important;
  background:var(--k-canvas-raise) !important; color:var(--k-ink-soft) !important; border-color:var(--k-hair) !important;
}
.fixed-table-toolbar .columns.btn-group{ margin-bottom:8px; }

/* ---------------- PAGE HEAD (Dashboard greeting) ---------------- */
.page-head{ margin-bottom:20px; }
.page-head h1{ font-size:26px; font-weight:750; margin:0 0 3px; letter-spacing:-.02em; color:var(--k-ink); }
.page-head p{ margin:0; color:var(--k-ink-soft); font-size:14.5px; }

/* ---------------- DASHBOARD (stat-grid / pipeline / recent activity / upcoming meetings — matches Kayan mockup) ---------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-bottom:16px; }
.stat-card{
  display:block; color:inherit; text-decoration:none;
  background:var(--k-glass-card); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft); border-radius:var(--k-radius-lg);
  padding:18px; box-shadow:var(--k-shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--k-shadow-md); color:inherit; }
.stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon i{ font-size:19px; }
.stat-icon.emerald{ background:var(--k-primary-soft); color:var(--k-primary); }
.stat-icon.gold{ background:var(--k-gold-soft); color:var(--k-gold-text); }
.stat-icon.blue{ background:var(--k-blue-soft); color:var(--k-blue); }
.stat-icon.coral{ background:var(--k-coral-soft); color:var(--k-coral); }
.stat-icon.green{ background:var(--k-green-soft); color:var(--k-green); }
.stat-icon.amber{ background:var(--k-amber-soft); color:var(--k-amber); }
.stat-delta{ font-size:12px; font-weight:700; padding:3px 8px; border-radius:99px; color:var(--k-primary); background:var(--k-primary-soft); }
.stat-num{ font-size:29px; font-weight:800; letter-spacing:-.02em; margin-bottom:2px; color:var(--k-ink); }
.stat-label{ font-size:13px; color:var(--k-ink-soft); font-weight:500; }

.pipeline-card{
  background:var(--k-glass-card); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft); border-radius:var(--k-radius-lg);
  padding:22px 22px 18px; box-shadow:var(--k-shadow-sm); margin-bottom:16px;
}
.pipeline-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:6px; }
.pipeline-head h2{ font-size:16px; font-weight:700; margin:0; color:var(--k-ink); }
.pipeline-head .sub{ font-size:12.5px; color:var(--k-ink-soft); }
.pipeline-track{ position:relative; padding-top:6px; }
.pipeline-line{
  position:absolute; top:24px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--k-gold) 0%, var(--k-gold) var(--fill,0%), var(--k-hair) var(--fill,0%), var(--k-hair) 100%);
}
.pipeline-stages{ display:grid; gap:8px; position:relative; }
.stage{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.stage-dot{
  width:16px; height:16px; border-radius:99px; border:3px solid var(--k-canvas-raise);
  box-shadow:0 0 0 2px var(--k-hair); background:var(--k-ink-faint); z-index:2;
}
.stage.filled .stage-dot{ background:var(--k-gold); box-shadow:0 0 0 2px var(--k-gold-soft); }
.stage-count{ font-size:19px; font-weight:800; color:var(--k-ink); }
.stage-name{ font-size:12px; color:var(--k-ink-soft); font-weight:600; }
.stage-name a{ color:inherit; text-decoration:none; }
.stage-name a:hover{ color:var(--k-primary); text-decoration:underline; }

.grid-2{ display:grid; grid-template-columns:1.15fr 1fr; gap:16px; align-items:start; margin-bottom:16px; }
.panel{
  background:var(--k-glass-card); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft); border-radius:var(--k-radius-lg);
  padding:20px 20px 8px; box-shadow:var(--k-shadow-sm);
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.panel-head h2{ font-size:16px; font-weight:700; margin:0; color:var(--k-ink); }
.panel-head .link{ font-size:12.5px; font-weight:650; color:var(--k-primary); }

.activity{ list-style:none; margin:0; padding:0; }
.activity li{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--k-hair); }
.activity li:last-child{ border-bottom:none; }
.act-dot{ width:9px; height:9px; border-radius:99px; margin-top:6px; flex-shrink:0; }
.act-dot.new{ background:var(--k-primary); }
.act-dot.upd{ background:var(--k-blue); }
.act-dot.del{ background:var(--k-coral); }
.act-body p{ margin:0 0 2px; font-size:13.5px; color:var(--k-ink); }
.act-body span{ font-size:12px; color:var(--k-ink-faint); }

.viewing{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--k-hair); align-items:center; }
.viewing:last-child{ border-bottom:none; }
.v-date{
  width:46px; height:46px; border-radius:12px; background:var(--k-canvas);
  display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid var(--k-hair);
}
.v-date b{ font-size:15px; line-height:1; font-weight:800; color:var(--k-ink); }
.v-date span{ font-size:9.5px; color:var(--k-ink-soft); font-weight:700; text-transform:uppercase; }
.v-body{ flex:1; min-width:0; }
.v-body p{ margin:0 0 2px; font-size:13.5px; font-weight:650; color:var(--k-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v-body span{ font-size:12px; color:var(--k-ink-soft); }
.v-time{ font-size:12px; font-weight:700; color:var(--k-primary); background:var(--k-primary-soft); padding:4px 9px; border-radius:99px; flex-shrink:0; }

@media (max-width:860px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat-card{ padding:14px; border-radius:16px; }
  .stat-num{ font-size:24px; }
  .grid-2{ grid-template-columns:1fr; }
  .pipeline-card{ padding:16px 14px 14px; border-radius:18px; }
  .stage-name{ font-size:9.5px; }
  .stage-count{ font-size:15px; }
  .panel{ padding:16px 14px 6px; border-radius:18px; }
}

/* ---------------- SIDEBAR COLLAPSE TOGGLE (desktop icon-rail mode) ---------------- */
#kayanCollapseBtn{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--k-glass-border-soft);
  background:var(--k-glass-card); align-items:center; justify-content:center; cursor:pointer;
  color:var(--k-ink-soft); flex-shrink:0; margin-inline-start:6px;
}
#kayanCollapseBtn:hover{ color:var(--k-primary); background:var(--k-primary-soft); }
#kayanCollapseBtn i{ font-size:16px; transition:transform .25s ease; }
#layout-menu.menu-collapsed #kayanCollapseBtn i{ transform:rotate(180deg); }
@media (min-width:1200px){
  #kayanCollapseBtn.d-none.d-xl-flex{ display:flex !important; }
  /* core.css only ever pairs its fixed-sidebar content offset (16.25rem) with the
     EXPANDED state (".layout-menu-fixed:not(.layout-menu-collapsed) .layout-page") —
     it has no rule at all for content offset when #layout-menu carries the Menu
     plugin's own "menu-collapsed" class (the one that actually works, see
     #kayanCollapseBtn's click handler in layout.blade.php), so without this the
     content area keeps the old 260px gap after the rail narrows to 84px. */
  #layout-menu.menu-collapsed ~ .layout-page{
    padding-left:5.25rem !important;
    transition:padding-left .25s ease;
  }
  .layout-menu-fixed .layout-page{ transition:padding-left .25s ease; }
  #layout-menu{ transition:width .25s ease; }
}

/* ---------------- TAG ROW LIST (Statuses / Priorities / Lead Sources / Lead Stages) ----------------
   Same technique as .k-card-row: the visual "card" comes from the generic
   #table.table tbody tr td rule (rounded, glass, spaced rows) — these classes
   are layout-only. Existing action classes (.edit-status, .btn.delete, etc.)
   and their JS handlers are untouched, just relocated into .tag-actions. */
#table.table tbody tr:has(.tag-row) td:has(.tag-row){ padding:.65rem .8rem !important; }
.tag-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tag-id{ font-size:11px; color:var(--k-ink-faint); font-weight:700; flex-shrink:0; }
.tag-title{ font-size:13.5px; font-weight:600; color:var(--k-ink); }
.tag-title-wrap{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tag-title-wrap .tag-title{ flex:none; }
.tag-roles{ font-size:10.5px; color:var(--k-ink-faint); }
.tag-preview-pill{
  font-size:10.5px !important; font-weight:700 !important; padding:4px 11px !important; border-radius:99px !important;
  flex-shrink:0; white-space:nowrap; text-transform:uppercase; letter-spacing:.02em;
}
.tag-actions{ display:flex; gap:2px; flex-shrink:0; margin-left:auto; }
.tag-actions a, .tag-actions button{
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--k-ink-faint); background:transparent; border:none; cursor:pointer; text-decoration:none; flex-shrink:0;
}
.tag-actions a:hover{ background:var(--k-primary-soft); color:var(--k-primary); }
.tag-actions button:hover{ background:var(--k-coral-soft); color:var(--k-coral); }

/* Lead Stages: draggable row with handle + order badge (jquery-ui sortable on tbody, unchanged) */
.stage-row{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.stage-drag-handle{ width:18px; flex-shrink:0; cursor:grab; display:flex; align-items:center; justify-content:center; color:var(--k-ink-faint); }
.stage-drag-handle i{ font-size:17px; }
.stage-order-badge{
  width:22px; height:22px; border-radius:7px; background:var(--k-canvas); color:var(--k-ink-soft);
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.drag-banner{
  display:flex; align-items:center; gap:9px; background:var(--k-primary-soft); color:var(--k-primary);
  padding:11px 14px; border-radius:12px; font-size:12.5px; font-weight:600; margin-bottom:14px;
}
.drag-banner i{ font-size:16px; flex-shrink:0; }
#table.table tbody tr.ui-sortable-helper td{ box-shadow:var(--k-shadow-lg) !important; }

/* ---------------- LEADS BULK UPLOAD WIZARD ---------------- */
.wizard-steps{ display:flex; gap:8px; margin-bottom:16px; }
.wizard-step{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 10px; border-radius:12px; font-size:12.5px; font-weight:650;
  background:var(--k-canvas-raise); border:1px solid var(--k-hair); color:var(--k-ink-faint);
}
.wizard-step i{ font-size:14px; flex-shrink:0; }
.wizard-step.active{ background:var(--k-primary); color:var(--k-on-primary); border-color:transparent; box-shadow:0 4px 14px rgba(20,18,12,.24); }
.wizard-step.done{ background:var(--k-primary-soft); color:var(--k-primary); border-color:transparent; }
.wizard-step.disabled{ opacity:.55; }
.info-banner{
  display:flex; align-items:flex-start; gap:9px; background:var(--k-blue-soft); color:var(--k-blue);
  padding:12px 14px; border-radius:12px; font-size:12.5px; font-weight:500; margin-bottom:16px; line-height:1.5;
}
.info-banner i{ font-size:16px; flex-shrink:0; margin-top:1px; }
.upload-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.upload-btn{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:12px;
  font-size:12.5px; font-weight:650; cursor:pointer; text-decoration:none; border:1px solid transparent;
}
.upload-btn.sample{ background:var(--k-green-soft); color:var(--k-green); }
.upload-btn.guide{ background:var(--k-canvas-raise); color:var(--k-ink-soft); border-color:var(--k-hair); }
.file-row{
  display:flex; align-items:center; gap:0; border:1px solid var(--k-hair); border-radius:12px; overflow:hidden;
  margin-bottom:16px; background:var(--k-canvas-raise);
}
.file-row-label{ padding:11px 14px; background:var(--k-canvas); font-size:12.5px; font-weight:650; color:var(--k-ink-soft); flex-shrink:0; border-right:1px solid var(--k-hair); }
.file-row-value{ padding:11px 14px; font-size:12.5px; color:var(--k-ink-faint); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wizard-submit-row{ display:flex; justify-content:center; }
.upload-submit-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--k-primary); color:var(--k-on-primary);
  border:none; padding:12px 22px; border-radius:12px; font-size:13.5px; font-weight:650; cursor:pointer;
  box-shadow:0 4px 14px rgba(20,18,12,.22);
}

/* ---------------- TODOS (todo-*, matches the Kayan glass/gold system —
   the raw rules in custom.css use generic Bootstrap colors/greys and a fixed
   #fff background, which doesn't adapt to dark mode). ---------------- */
.todo-card{
  background:var(--k-glass-card) !important; backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--k-glass-border-soft) !important; border-radius:var(--k-radius-lg) !important; box-shadow:var(--k-shadow-sm) !important;
}
.todo-card:hover{ box-shadow:var(--k-shadow-md) !important; }
.todo-gradient-primary{ background:linear-gradient(135deg, var(--k-gold-rich), var(--k-primary)) !important; }
.todo-gradient-success{ background:linear-gradient(135deg, var(--k-green), var(--k-gold-rich)) !important; }
.todo-counter{ background:rgba(255,255,255,.22) !important; }
.todo-item{
  background:var(--k-canvas-raise) !important; border:1px solid var(--k-hair); box-shadow:none !important;
}
.todo-item:hover{ box-shadow:var(--k-shadow-sm) !important; }
.todo-item.todo-priority-high{ border-left-color:var(--k-coral) !important; }
.todo-item.todo-priority-medium{ border-left-color:var(--k-amber) !important; }
.todo-item.todo-priority-low{ border-left-color:var(--k-green) !important; }
.todo-check-input{ border-color:var(--k-hair); }
.todo-check-input:checked{ background-color:var(--k-green) !important; border-color:var(--k-green) !important; }
.todo-check-input:focus{ box-shadow:0 0 0 .2rem var(--k-green-soft) !important; }
.todo-title{ color:var(--k-ink) !important; font-size:14px; font-weight:650; }
.todo-item.todo-completed .todo-title{ color:var(--k-ink-faint) !important; }
.todo-meta-item{ color:var(--k-ink-faint) !important; font-size:11.5px; }
.todo-priority-badge{ font-size:10.5px; font-weight:700; }
.todo-bg-danger-subtle{ background:var(--k-coral-soft) !important; color:var(--k-coral) !important; }
.todo-bg-warning-subtle{ background:var(--k-amber-soft) !important; color:var(--k-amber) !important; }
.todo-bg-success-subtle{ background:var(--k-green-soft) !important; color:var(--k-green) !important; }
.todo-completed-tag{ color:var(--k-green) !important; font-size:11.5px; }
.todo-action-btn{ background:var(--k-canvas-raise) !important; border-color:var(--k-hair) !important; color:var(--k-ink-faint) !important; }
.todo-drag-handle{ color:var(--k-ink-faint); }
.todo-progress-label{ color:var(--k-ink-soft); font-size:12.5px; }
.todo-progress-value{ color:var(--k-ink); font-weight:650; }
.todo-progress .progress{ background:var(--k-hair) !important; }
.todo-progress .progress-bar{ background:var(--k-primary) !important; }

/* ---------------- MISC SURFACES ---------------- */
.content-wrapper{ background:transparent !important; }
.layout-wrapper, .layout-container, .layout-page, .layout-content-navbar{ background:transparent !important; }
.footer{ background:transparent !important; border-top:1px solid var(--k-hair) !important; color:var(--k-ink-faint) !important; }
.list-group-item{ background:var(--k-glass-card) !important; border-color:var(--k-hair) !important; color:var(--k-ink); }

/* ---------------- BUDGET RANGE SLIDER (leads list + leads report filters) ----------------
   Two overlapping native <input type=range> sharing one visual track — a well-established,
   dependency-free way to build a dual-handle slider without a third-party library. */
.k-range-slider{ padding-top:2px; }
.k-range-slider-value{ font-weight:600; }
.k-range-slider-track-wrap{ position:relative; height:28px; display:flex; align-items:center; }
.k-range-slider-track{ position:absolute; left:0; right:0; height:4px; border-radius:4px; background:var(--k-hair); }
.k-range-slider-fill{ position:absolute; height:4px; border-radius:4px; background:var(--k-gold); }
.k-range-slider-input{
    -webkit-appearance:none; appearance:none;
    position:absolute; left:0; right:0; width:100%; height:28px;
    margin:0; background:transparent; pointer-events:none;
}
.k-range-slider-input::-webkit-slider-runnable-track{ -webkit-appearance:none; background:transparent; height:28px; }
.k-range-slider-input::-moz-range-track{ background:transparent; height:28px; border:none; }
.k-range-slider-input::-webkit-slider-thumb{
    -webkit-appearance:none; pointer-events:auto;
    width:18px; height:18px; margin-top:5px; border-radius:50%;
    background:var(--k-gold); border:2px solid var(--k-on-primary);
    box-shadow:var(--k-shadow-sm); cursor:pointer;
}
.k-range-slider-input::-moz-range-thumb{
    pointer-events:auto; width:18px; height:18px; border-radius:50%;
    background:var(--k-gold); border:2px solid var(--k-on-primary);
    box-shadow:var(--k-shadow-sm); cursor:pointer;
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }