/* Iconic ERP theme for People (on top of the Velzon template). Design based on the V13 prototype. */
:root, :root[data-bs-theme=light] {
  --ic-bg:#f6f6f8; --ic-surface:#fff; --ic-text:#17171b; --ic-muted:#73737c; --ic-line:#e7e7ec;
  --ic-brand:#6d4aff; --ic-brand-2:#8d77ff; --ic-brand-w:#f2efff; --ic-dark:#17171b;
  --ic-green:#168b63; --ic-amber:#af6d06; --ic-red:#c43d48; --ic-blue:#2e6fc8;
  --vz-font-sans-serif: 'Outfit', system-ui, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-bg: var(--ic-bg);
  --vz-body-bg-image: none;
  --vz-body-color: var(--ic-text);
  --vz-border-color: var(--ic-line);
  --vz-primary: #6d4aff; --vz-primary-rgb: 109,74,255; --vz-link-color: #6d4aff; --vz-link-hover-color:#5636e0;
  --vz-primary-bg-subtle:#f2efff; --vz-primary-text-emphasis:#4b2fd0;
  --vz-card-bg: #fff; --vz-card-bg-fill:#fff;
  --vz-header-bg: #fff; --vz-header-item-color: #17171b;
}
:root[data-sidebar=dark], [data-sidebar=dark] {
  --vz-vertical-menu-bg:#17171b; --vz-vertical-menu-border:#29292f;
  --vz-vertical-menu-item-color:#9a9aa3; --vz-vertical-menu-item-hover-color:#fff;
  --vz-vertical-menu-item-active-color:#fff; --vz-vertical-menu-item-active-bg:#29272f; --vz-vertical-menu-item-bg:#222228;
  --vz-vertical-menu-sub-item-color:#9a9aa3; --vz-vertical-menu-sub-item-hover-color:#fff; --vz-vertical-menu-sub-item-active-color:#fff;
  --vz-vertical-menu-title-color:#5f5f68; --vz-vertical-menu-box-shadow:none;
}
html, body { font-family: var(--vz-font-sans-serif) !important; }
button, input, optgroup, select, textarea, .btn, .form-control, .form-select, .table, .dataTables_wrapper, .dropdown-menu, .modal, .nav-link, .badge { font-family: var(--vz-font-sans-serif) !important; }
body { background: var(--ic-bg) !important; background-image: none !important; color: var(--ic-text); font-size: 14px; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--vz-font-sans-serif); letter-spacing: -.01em; color: var(--ic-text); }

/* Sidebar */
.iconic-sidebar { background: #17171b !important; border-right: 1px solid #29292f; }
.iconic-sidebar .navbar-brand-box { background: #17171b; padding: 14px 18px 8px; text-align: left; }
.iconic-brand-link { display:flex; align-items:center; gap:10px; text-decoration:none; height:56px; }
.iconic-brandmark { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; font:700 16px Georgia,serif; background:linear-gradient(145deg,#6d4aff,#917cff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); flex:none; }
.iconic-brand-text { color:#fff; font-weight:750; letter-spacing:-.02em; line-height:1.1; }
.iconic-brand-text small { display:block; color:#6e6e77; font-size:9px; letter-spacing:.11em; text-transform:uppercase; margin-top:2px; font-weight:700; }
[data-sidebar-size=sm] .iconic-brand-text, [data-sidebar-size=sm] .iconic-mode-switch { display:none !important; }
.iconic-mode-switch { position:relative; z-index:5; display:grid; grid-template-columns:1fr 1fr; gap:3px; background:#222227; border:1px solid #2f2f35; border-radius:9px; padding:3px; margin:6px 6px 10px; }
.iconic-mode-switch button { border:0; background:transparent; color:#8a8a93; border-radius:7px; padding:7px 4px; font-size:11px; font-weight:700; cursor:pointer; }
.iconic-mode-switch button.active { background:#34343b; color:#fff; }
html[data-iconic-mode=management] .iconic-mode-me { display:none !important; }
html[data-iconic-mode=me] .iconic-mode-management { display:none !important; }
.iconic-sidebar .navbar-nav .menu-title { padding: 14px 20px 6px !important; }
.iconic-sidebar .navbar-nav .menu-title span { font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:800; color:#5f5f68; }
.iconic-sidebar .navbar-nav .nav-link { display:flex !important; align-items:center; gap:2px; margin:1px 10px; padding:8px 10px !important; border-radius:8px; font-size:13px; font-weight:560; color:#9a9aa3 !important; transition:background .15s, color .15s; }
.iconic-sidebar .navbar-nav .nav-link i { font-size:17px; color:inherit !important; }
.iconic-sidebar .navbar-nav .nav-link:hover { background:#222228; color:#e7e7ea !important; }
.iconic-sidebar .navbar-nav .nav-link.active { background:#29272f !important; color:#fff !important; box-shadow: inset 2px 0 0 #6d4aff; }
.iconic-badge { background:#6d4aff; color:#fff; border-radius:999px; font-size:10px; padding:3px 7px; font-weight:700; }

/* Two-line sidebar items: label with a line of live context underneath (Rishin, 18 Sep 2026) */
.iconic-sidebar .navbar-nav .nav-link { align-items:flex-start; gap:10px; }
.iconic-sidebar .navbar-nav .nav-link i { line-height:1.35; }
.iconic-sidebar .navbar-nav .nav-link .iconic-nav-text { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.iconic-sidebar .navbar-nav .nav-link .iconic-nav-text .t { line-height:1.35; }
.iconic-sidebar .navbar-nav .nav-link .iconic-nav-text .s { font-size:10.5px; font-weight:500; color:#68686f; line-height:1.3; margin-top:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iconic-sidebar .navbar-nav .nav-link:hover .iconic-nav-text .s,
.iconic-sidebar .navbar-nav .nav-link.active .iconic-nav-text .s { color:#9a9aa3; }
.iconic-sidebar .navbar-nav .nav-link .iconic-badge { align-self:center; }
.iconic-sidebar .navbar-nav .nav-link.has-sub { padding-top:7px !important; padding-bottom:7px !important; }

/* The menu must scroll on its own: the template's SimpleBar is not initialised on
   this sidebar, so #scrollbar just overflowed and the bottom items were unreachable. */
.iconic-sidebar { display:flex !important; flex-direction:column; }
.iconic-sidebar .navbar-brand-box { flex:0 0 auto; }
.iconic-sidebar #scrollbar { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.iconic-sidebar #scrollbar::-webkit-scrollbar { width:6px; }
.iconic-sidebar #scrollbar::-webkit-scrollbar-track { background:transparent; }
.iconic-sidebar #scrollbar::-webkit-scrollbar-thumb { background:#33333b; border-radius:99px; }
.iconic-sidebar #scrollbar::-webkit-scrollbar-thumb:hover { background:#44444e; }
.iconic-sidebar #scrollbar { scrollbar-width:thin; scrollbar-color:#33333b transparent; }
.iconic-sidebar .navbar-nav { padding-bottom:18px; }
.iconic-sidebar .sidebar-background { display:none; }
/* the mode switch sits outside the scroll area, so it stays put while the menu scrolls */
.iconic-sidebar .iconic-mode-switch { flex:0 0 auto; margin:0 16px 8px; }
/* collapsed (icon-only) sidebar: the subtitle would overflow the rail */
[data-sidebar-size="sm"] .iconic-sidebar .navbar-nav .nav-link .iconic-nav-text .s { display:none; }

/* Top bar */
#page-topbar { background:#fff !important; border-bottom:1px solid var(--ic-line); box-shadow:none !important; }
#page-topbar .navbar-header { height:64px; }
.btn-topbar, .header-item { color: var(--ic-text) !important; }

/* Content */
.page-content { padding-top: calc(64px + 24px) !important; }
.page-title-box { background: transparent !important; box-shadow:none !important; padding: 0 0 16px !important; border:0 !important; margin: 0 !important; }
.page-title-box h4 { font-size:22px !important; font-weight:750; text-transform:none !important; letter-spacing:-.02em; }
.card { border:1px solid var(--ic-line) !important; border-radius:14px !important; box-shadow: 0 1px 2px rgba(16,16,24,.04), 0 12px 36px rgba(16,16,24,.045) !important; background:#fff !important; }
.card-header { background:#fff !important; border-bottom:1px solid var(--ic-line) !important; border-radius:14px 14px 0 0 !important; }
.card-title { font-weight:700; letter-spacing:-.01em; }
.btn { border-radius:9px; font-weight:600; }
.btn-primary, .btn-soft-primary:hover { background:#6d4aff !important; border-color:#6d4aff !important; color:#fff !important; }
.btn-primary:hover { background:#5a37f0 !important; border-color:#5a37f0 !important; }
.btn-soft-primary { background:#f2efff !important; color:#6d4aff !important; border-color:transparent !important; }
.form-control, .form-select { border-radius:9px; border-color:var(--ic-line); }
.form-control:focus, .form-select:focus { border-color:#8d77ff; box-shadow:0 0 0 3px rgba(109,74,255,.15); }
.table > :not(caption) > * > * { border-bottom-color: #efeff3; }
.table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ic-muted); font-weight:700; background:#fafafd; }
.badge.bg-success, .badge.bg-success-subtle { background:#ebf8f3 !important; color:#168b63 !important; }
.badge.bg-danger, .badge.bg-danger-subtle { background:#fff0f2 !important; color:#c43d48 !important; }
.badge.bg-warning, .badge.bg-warning-subtle { background:#fff5df !important; color:#af6d06 !important; }
.modal-content { border-radius:14px; border:1px solid var(--ic-line); }
.footer { background:transparent !important; color:var(--ic-muted); border-top:1px solid var(--ic-line); }
.alert { border-radius:10px; }
.text-primary { color:#6d4aff !important; }
.bg-primary { background-color:#6d4aff !important; }

/* ---- Phone and small tablet (Rishin, 18 Sep 2026) -------------------------
   Staff will mostly open this on a phone, so every grid the new pages use
   collapses to one or two columns and the side panels go full width. */
@media (max-width: 767.98px) {
  .page-content { padding-left: 12px !important; padding-right: 12px !important; }
  h4 { font-size: 20px !important; }

  /* dashboards and stat rows */
  .dh-tiles, .dh-week, .cp-stats, .cp-practices, .sk-grid4, .sk-stages,
  .ap-tiles, .pb-tiles, .lv-tiles, .mw-tiles, .md-tiles, .wk-days,
  .rt-weeks, .mr-weeks, .mw-week, .mr-grid, .sk-kpis, .lv-kpis, .dhd-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .dh-week > div, .mw-week > div, .wk-days > a { border-right: 0 !important; border-bottom: 1px solid #f2f2f6; }

  /* rows that put everything on one line on a desktop */
  .sk-row, .lv-row, .dh-row, .cp-person > summary { flex-wrap: wrap !important; }
  .sk-who, .lv-who { width: 100% !important; }
  .sk-bar { width: 100%; flex-basis: 100%; }
  .sk-nums { gap: 14px; }

  /* side panels */
  .dh-drawer, .sk-drawer, .lv-drawer { width: 100% !important; max-width: 100% !important; }

  /* tabs and toolbars wrap instead of overflowing */
  .rt-tabs, .mr-tabs, .mr-switch, .sk-tabs, .cp-tabs, .wk-nav, .rt-nav, .mw-actions { flex-wrap: wrap !important; }
  .rt-nav input[type=date], .wk-nav input[type=date], .cp-search, .sk-search, .ap-search, .pb-search { width: 100%; min-width: 0 !important; }

  /* wide tables scroll sideways rather than squashing */
  .ap-table, .pb-table, .md-card .md-row { font-size: 12.5px; }
  .table-responsive, .dataTables_wrapper { overflow-x: auto; }
}

@media (max-width: 479.98px) {
  .dh-tiles, .cp-stats, .sk-grid4, .sk-stages, .ap-tiles, .pb-tiles,
  .lv-tiles, .mw-tiles, .md-tiles, .dh-week, .mw-week, .wk-days,
  .rt-weeks, .mr-weeks, .cp-practices { grid-template-columns: 1fr !important; }
  .sk-kpis, .lv-kpis, .dhd-stats { grid-template-columns: 1fr 1fr !important; }
}