/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --sidebar-width:    268px;
    --topbar-height:    64px;

    /* Vivid palette */
    --violet:   #7C3AED;
    --violet-l: #8B5CF6;
    --indigo:   #4F46E5;
    --rose:     #F43F5E;
    --pink:     #EC4899;
    --cyan:     #06B6D4;
    --teal:     #0D9488;
    --emerald:  #10B981;
    --amber:    #F59E0B;
    --orange:   #F97316;
    --blue:     #3B82F6;

    /* Semantic aliases */
    --accent-primary:  var(--violet);
    --accent-green:    var(--emerald);
    --accent-orange:   var(--amber);
    --accent-red:      var(--rose);
    --accent-purple:   var(--violet-l);
    --accent-blue:     var(--blue);
    --accent-teal:     var(--cyan);

    --body-bg:      #F4F5FA;
    --card-bg:      #FFFFFF;
    --text-dark:    #18103A;
    --text-muted:   #6B7280;
    --border-color: #E5E7EB;

    --shadow-sm:  0 1px 3px rgba(124,58,237,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:  0 4px 16px rgba(124,58,237,.10), 0 2px 6px rgba(0,0,0,.05);
    --shadow-lg:  0 8px 32px rgba(124,58,237,.14), 0 4px 12px rgba(0,0,0,.06);
    --shadow-xl:  0 20px 56px rgba(124,58,237,.16), 0 8px 20px rgba(0,0,0,.08);

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
    background: var(--body-bg);
    font-family: 'Inter', 'Segoe UI', -apple-system, sans-serif;
    color: var(--text-dark);
    font-size: .875rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { font-weight: 700; letter-spacing: .01em; transition: all .18s cubic-bezier(.4,0,.2,1) !important; border-radius: var(--r-sm) !important; }

.btn-primary  { background: linear-gradient(135deg,#7C3AED,#4F46E5) !important; border:none !important; color:#fff !important; box-shadow:0 4px 16px rgba(124,58,237,.4) !important; }
.btn-primary:hover  { background: linear-gradient(135deg,#8B5CF6,#6366F1) !important; transform:translateY(-1px); box-shadow:0 6px 22px rgba(124,58,237,.5) !important; }
.btn-primary:active { transform:translateY(0) !important; }

.btn-success  { background: linear-gradient(135deg,#10B981,#059669) !important; border:none !important; color:#fff !important; box-shadow:0 4px 16px rgba(16,185,129,.35) !important; }
.btn-success:hover  { transform:translateY(-1px); box-shadow:0 6px 22px rgba(16,185,129,.45) !important; }

.btn-danger   { background: linear-gradient(135deg,#F43F5E,#E11D48) !important; border:none !important; color:#fff !important; box-shadow:0 4px 16px rgba(244,63,94,.35) !important; }
.btn-danger:hover   { transform:translateY(-1px); box-shadow:0 6px 22px rgba(244,63,94,.45) !important; }

.btn-warning  { background: linear-gradient(135deg,#F59E0B,#D97706) !important; border:none !important; color:#fff !important; box-shadow:0 4px 16px rgba(245,158,11,.35) !important; }
.btn-warning:hover  { transform:translateY(-1px); box-shadow:0 6px 22px rgba(245,158,11,.45) !important; }

.btn-info     { background: linear-gradient(135deg,#06B6D4,#0891B2) !important; border:none !important; color:#fff !important; box-shadow:0 4px 16px rgba(6,182,212,.35) !important; }
.btn-info:hover     { transform:translateY(-1px); box-shadow:0 6px 22px rgba(6,182,212,.45) !important; }

.btn-outline-secondary { border: 1.5px solid var(--border-color) !important; color: var(--text-muted) !important; background:#fff !important; }
.btn-outline-secondary:hover { border-color: var(--violet) !important; color: var(--violet) !important; background: rgba(124,58,237,.04) !important; }

.text-primary  { color: var(--violet) !important; }
.border-primary{ border-color: var(--violet) !important; }

/* Soft badges */
.badge { font-weight: 700; letter-spacing: .03em; }
.badge-soft-primary   { background:rgba(124,58,237,.1)  !important; color:#6D28D9 !important; }
.badge-soft-success   { background:rgba(16,185,129,.1)  !important; color:#047857 !important; }
.badge-soft-danger    { background:rgba(244,63,94,.1)   !important; color:#BE123C !important; }
.badge-soft-warning   { background:rgba(245,158,11,.1)  !important; color:#B45309 !important; }
.badge-soft-info      { background:rgba(6,182,212,.1)   !important; color:#0E7490 !important; }
.badge-soft-secondary { background:rgba(107,114,128,.1) !important; color:#6B7280 !important; }
.badge-soft-purple    { background:rgba(139,92,246,.1)  !important; color:#7C3AED !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
    position: fixed; top:0; left:0; bottom:0;
    z-index: 1030;
    display: flex; flex-direction: column;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
    box-shadow: 4px 0 30px rgba(79,46,220,.25);
}
#sidebar::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 120% 40% at 50% 0%,   rgba(255,255,255,.08) 0%, transparent 55%),
        radial-gradient(ellipse 80%  60% at 0%   100%, rgba(6,182,212,.12)  0%, transparent 55%);
    pointer-events: none;
}
#sidebar > * { position: relative; z-index: 1; }
#sidebar::-webkit-scrollbar { width: 3px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Brand */
.sidebar-brand {
    padding: 1.6rem 1.75rem;
    display: flex; align-items: center; gap: 1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    position: relative; overflow: hidden;
}
.sidebar-brand::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
}
.sidebar-brand .brand-logo {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.1));
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: #fff; flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
}
.sidebar-brand .brand-name { color: #fff; font-weight: 800; font-size: .93rem; line-height: 1.2; letter-spacing: -.015em; }
.sidebar-brand .brand-sub  { color: rgba(186,230,253,.55); font-size: .63rem; display: block; margin-top: 2px; }

/* Company banner */
.sidebar-company-banner {
    padding: 10px 1.75rem;
    background: rgba(0,0,0,.18);
    border-bottom: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(4px);
}

.sidebar-company-banner .banner-label {
    font-size: .58rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(186,230,253,.5); margin-bottom: 2px;
}
.sidebar-company-banner .banner-name {
    color: #fff; font-size: .8rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-company-banner .banner-switch {
    background: none; border: none; padding: 0;
    color: rgba(186,230,253,.65); font-size: .65rem; font-weight: 700;
    white-space: nowrap; cursor: pointer; font-family: inherit; transition: color .18s; flex-shrink: 0;
}
.sidebar-company-banner .banner-switch:hover { color: #fff; }

/* Section labels */
.sidebar-section-label {
    padding: 1.1rem 1.5rem .3rem;
    font-size: .59rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(165,243,252,.45);
}

/* Nav links */
.sidebar-nav { padding: .35rem 0; }
.sidebar-nav .nav-item { margin: 2px 10px; }
.sidebar-nav .nav-link {
    color: rgba(186,230,253,.8);
    padding: .58rem 1rem;
    border-radius: 10px;
    display: flex; align-items: center; gap: .75rem;
    font-size: .835rem; font-weight: 500;
    transition: all .18s cubic-bezier(.4,0,.2,1);
    text-decoration: none;
}
.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    transform: translateX(2px);
}
.sidebar-nav .nav-link:hover .nav-icon { color: #fff; }
.sidebar-nav .nav-link.active {
    background: rgba(255,255,255,.18);
    color: #fff;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #67E8F9, 0 4px 14px rgba(0,0,0,.15);
    backdrop-filter: blur(8px);
}
.sidebar-nav .nav-link.active .nav-icon { color: #67E8F9; }
.sidebar-nav .nav-link .nav-icon { width: 18px; text-align: center; font-size: .84rem; flex-shrink: 0; color: rgba(164,232,252,.5); transition: color .18s; }
.sidebar-nav .nav-link .badge { margin-left: auto; font-size: .6rem; padding: 2px 6px; background: rgba(255,255,255,.15) !important; color: #fff !important; }

/* Sidebar footer */
.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.12);
}

/* ── Main Content ──────────────────────────────────────────────────────────── */
#main-content { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }

/* ── Topbar ────────────────────────────────────────────────────────────────── */
#topbar {
    height: var(--topbar-height);
    background: linear-gradient(135deg, rgba(255,255,255,.97) 0%, rgba(236,254,255,.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(8,145,178,.12);
    display: flex; align-items: center;
    padding: 0 1.75rem;
    position: sticky; top:0; z-index:1020; gap:1rem;
    box-shadow: 0 2px 16px rgba(8,145,178,.1), 0 1px 0 rgba(8,145,178,.06);
}
.topbar-search { position: relative; flex: 0 1 300px; }
.topbar-search input {
    background: rgba(236,254,255,.8);
    border: 1.5px solid rgba(8,145,178,.2);
    border-radius: 10px; padding: .44rem .9rem .44rem 2.4rem;
    font-size: .8rem; color: var(--text-dark); width: 100%;
    font-family: inherit; transition: all .2s;
}
.topbar-search input:focus { outline:none; border-color:#0891B2; background:#fff; box-shadow:0 0 0 4px rgba(8,145,178,.1); }
.topbar-search input::placeholder { color: #A5F3FC; }
.topbar-search .search-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:#22D3EE; font-size:.7rem; }
.topbar-actions { display:flex; align-items:center; gap:.45rem; margin-left:auto; }
.topbar-btn {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(236,254,255,.8); border: 1.5px solid rgba(8,145,178,.2);
    display: flex; align-items: center; justify-content: center;
    color: #0891B2; position: relative; cursor: pointer;
    transition: all .18s; text-decoration: none;
}
.topbar-btn:hover { background: linear-gradient(135deg,#0891B2,#0E7490); color:#fff; border-color:transparent; box-shadow:0 4px 16px rgba(8,145,178,.4); transform:translateY(-1px); }
.topbar-btn .notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--rose); border-radius:50%; border:2px solid #fff; }
.user-dropdown-btn {
    display:flex; align-items:center; gap:.5rem;
    background:rgba(236,254,255,.8); border:1.5px solid rgba(8,145,178,.2); border-radius:10px;
    padding:.3rem .75rem .3rem .4rem; cursor:pointer; transition:all .2s; text-decoration:none;
}
.user-dropdown-btn:hover { border-color:#0891B2; box-shadow:0 0 0 3px rgba(8,145,178,.12); }
.user-dropdown-btn img { width:29px; height:29px; border-radius:50%; object-fit:cover; border:2px solid rgba(8,145,178,.35); }
.user-dropdown-btn .user-name { font-size:.79rem; font-weight:700; color:var(--text-dark); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em; }
.user-dropdown-btn .user-role { font-size:.62rem; color:var(--text-muted); display:block; }

/* ── Page Content ──────────────────────────────────────────────────────────── */
.page-content { padding: 1.75rem; flex: 1; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }
.page-header h1 { font-size:1.35rem; font-weight:800; color:var(--text-dark); margin:0; letter-spacing:-.025em; }
.page-header .breadcrumb { font-size:.72rem; margin:0; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
    background: var(--card-bg);
    border: 1.5px solid #EDEDF5;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .22s, transform .22s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
    background: linear-gradient(135deg, #FAFAFA, #F5F3FF);
    border-bottom: 1.5px solid #EDEDF5;
    padding: .9rem 1.3rem;
    font-weight: 700; font-size: .86rem;
    display: flex; align-items: center; gap: .5rem;
    color: var(--text-dark); letter-spacing: -.01em;
}
.card-icon { width: 30px; height: 30px; border-radius: 8px; display:flex; align-items:center; justify-content:center; font-size:.78rem; }

/* ── KPI Cards ─────────────────────────────────────────────────────────────── */
.kpi-card {
    border-radius: var(--r-lg); padding: 1.4rem;
    display: flex; align-items: flex-start; gap: 1.1rem;
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
    position: relative; overflow: hidden;
    background: var(--card-bg);
    border: 1.5px solid #EDEDF5;
    box-shadow: var(--shadow-sm);
    height: 100%;
}
.kpi-card::after {
    content: '';
    position: absolute; bottom: -35px; right: -25px;
    width: 120px; height: 120px; border-radius: 50%;
    background: currentColor; opacity: .05; pointer-events: none;
}
.kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kpi-card.kpi-card-colored { border:none !important; }
.kpi-card.kpi-card-colored:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.kpi-icon {
    width: 58px; height: 58px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; flex-shrink: 0; position: relative; overflow: hidden;
}
.kpi-icon::before {
    content: '';
    position: absolute; top:0; left:0; right:0; height:50%;
    background: rgba(255,255,255,.22); border-radius: inherit;
}
.kpi-label { font-size:.67rem; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.28rem; }
.kpi-value { font-size:2.1rem; font-weight:900; color:var(--text-dark); line-height:1; letter-spacing:-.04em; }
.kpi-trend { font-size:.7rem; margin-top:.3rem; font-weight:600; }

.card-border-primary { border-top:3px solid var(--violet)   !important; }
.card-border-success { border-top:3px solid var(--emerald)  !important; }
.card-border-danger  { border-top:3px solid var(--rose)     !important; }
.card-border-warning { border-top:3px solid var(--amber)    !important; }
.card-border-info    { border-top:3px solid var(--cyan)     !important; }
.card-border-purple  { border-top:3px solid var(--violet-l) !important; }

/* ── Deadline Alert Bar ────────────────────────────────────────────────────── */
.deadline-alert-bar {
    background: #FFF1F3; border:1.5px solid rgba(244,63,94,.2); border-left:4px solid var(--rose);
    border-radius:var(--r-md); padding:.85rem 1.1rem; margin-bottom:1.5rem;
    display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
    box-shadow:0 4px 16px rgba(244,63,94,.07);
}
.alert-pill { display:inline-flex; align-items:center; gap:.35rem; padding:4px 11px; border-radius:20px; font-size:.69rem; font-weight:700; cursor:pointer; text-decoration:none; transition:all .18s; }
.alert-pill:hover { transform:translateY(-1px); }

/* ── Expiry / Status ───────────────────────────────────────────────────────── */
.badge-status { padding:4px 11px; border-radius:20px; font-size:.68rem; font-weight:700; }
.expiry-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:700; }
.expiry-expired  { color:#9CA3AF; }
.expiry-critical { color:var(--rose); }
.expiry-warning  { color:var(--amber); }
.expiry-info     { color:var(--blue); }
.expiry-ok       { color:var(--emerald); }

/* ── Visa Tracker ──────────────────────────────────────────────────────────── */
.visa-tracker { display:flex; flex-direction:column; gap:1rem; }
.visa-tracker-row { display:flex; flex-direction:column; gap:.3rem; }
.visa-tracker-label { display:flex; justify-content:space-between; font-size:.71rem; font-weight:700; color:var(--text-muted); }
.visa-tracker-days { font-size:1rem; font-weight:800; }
.progress { height:8px; border-radius:20px; background:rgba(124,58,237,.1); overflow:visible; }
.progress-bar { border-radius:20px; background:linear-gradient(90deg,#7C3AED,#EC4899); box-shadow:0 2px 8px rgba(124,58,237,.35); position:relative; }
.progress-bar::after { content:''; position:absolute; top:1px; left:5px; right:5px; height:3px; background:rgba(255,255,255,.45); border-radius:20px; }

/* ── Copy field ──────────────────────────────────────────────────────────── */
.copy-field { display:inline-flex; align-items:center; gap:.4rem; background:#F5F3FF; border:1.5px solid rgba(124,58,237,.2); border-radius:7px; padding:4px 10px; font-size:.74rem; font-family:'JetBrains Mono','Fira Code',monospace; cursor:pointer; transition:all .18s; color:var(--text-dark); }
.copy-field:hover { border-color:var(--violet); color:var(--violet); background:rgba(124,58,237,.06); box-shadow:0 0 0 3px rgba(124,58,237,.1); }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
.nav-tabs { border-bottom:2px solid var(--border-color); }
.nav-tabs .nav-link { color:var(--text-muted); font-size:.82rem; font-weight:600; padding:.65rem 1.1rem; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; border-radius:0; transition:all .18s; }
.nav-tabs .nav-link:hover { color:var(--text-dark); background:transparent; }
.nav-tabs .nav-link.active { color:var(--violet); border-bottom-color:var(--violet); background:transparent; font-weight:700; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { font-size:.83rem; border-collapse:separate; border-spacing:0; }
.table thead tr { background:linear-gradient(135deg,#4C1D95 0%,#7C3AED 45%,#EC4899 80%,#F97316 100%); }
.table th { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.95) !important; border:none !important; white-space:nowrap; background:transparent !important; padding-top:.75rem; padding-bottom:.75rem; }
.table thead th:first-child { border-radius:12px 0 0 0; }
.table thead th:last-child  { border-radius:0 12px 0 0; }
.table td { vertical-align:middle; border-color:rgba(124,58,237,.06); }
.table tbody tr { transition:background .12s; }
.table tbody tr:nth-child(even) { background:rgba(124,58,237,.025); }
.table tbody tr:nth-child(odd)  { background:#fff; }
.table-hover tbody tr:hover { background:rgba(124,58,237,.06) !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input { border:1.5px solid rgba(124,58,237,.2); border-radius:9px; padding:.38rem .85rem; font-size:.8rem; background:#F5F3FF; font-family:inherit; transition:all .2s; color:var(--text-dark); }
.dataTables_wrapper .dataTables_filter input:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(124,58,237,.12); background:#fff; }
.dataTables_wrapper .dataTables_length select { border:1.5px solid rgba(124,58,237,.2); border-radius:9px; padding:.32rem .6rem; font-size:.8rem; font-family:inherit; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:8px !important; font-size:.8rem !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background:linear-gradient(135deg,#7C3AED,#4F46E5) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 4px 12px rgba(124,58,237,.4) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) { background:rgba(124,58,237,.08) !important; border-color:var(--violet) !important; color:var(--violet) !important; }
table.dataTable thead th, table.dataTable thead td { background:transparent !important; }

/* ── Note Feed ─────────────────────────────────────────────────────────────── */
.note-feed { display:flex; flex-direction:column; gap:.75rem; }
.note-item { background:#fff; border:1.5px solid #EDEDF5; border-radius:var(--r-md); padding:1rem 1.1rem; position:relative; transition:box-shadow .2s; }
.note-item:hover { box-shadow:var(--shadow-md); }
.note-item.pinned { border-left:3px solid var(--amber); box-shadow:0 4px 16px rgba(245,158,11,.08); }
.note-item.private { background:#FFFBEB; border-color:rgba(245,158,11,.3); }
.note-meta { font-size:.71rem; color:var(--text-muted); display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.note-content { font-size:.84rem; margin-top:.4rem; color:var(--text-dark); line-height:1.6; }

/* ── Timeline ──────────────────────────────────────────────────────────────── */
.timeline { position:relative; padding-left:1.85rem; }
.timeline::before { content:''; position:absolute; left:.5rem; top:0; bottom:0; width:2px; background:linear-gradient(180deg,#7C3AED,rgba(236,72,153,.3)); border-radius:2px; }
.timeline-item { position:relative; margin-bottom:1.35rem; }
.timeline-dot { position:absolute; left:-1.65rem; top:.3rem; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px var(--violet),0 4px 10px rgba(124,58,237,.3); z-index:1; background:linear-gradient(135deg,#7C3AED,#EC4899); }
.timeline-content { background:#fff; border:1.5px solid #EDEDF5; border-radius:var(--r-sm); padding:.85rem 1.1rem; }
.timeline-date { font-size:.7rem; color:var(--text-muted); font-weight:600; }

/* ── Kanban ────────────────────────────────────────────────────────────────── */
.kanban-board { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:start; }
.kanban-col { background:rgba(124,58,237,.04); border:1.5px solid rgba(124,58,237,.1); border-radius:var(--r-md); padding:.9rem; min-height:200px; }
.kanban-col-header { font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; margin-bottom:.9rem; display:flex; align-items:center; gap:.4rem; }
.kanban-card { background:#fff; border:1.5px solid #EDEDF5; border-radius:var(--r-sm); padding:.85rem; margin-bottom:.5rem; cursor:grab; transition:box-shadow .2s,transform .2s; font-size:.82rem; }
.kanban-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px) rotate(.3deg); }
.kanban-card .task-title { font-weight:700; margin-bottom:.35rem; letter-spacing:-.01em; }
.kanban-card .task-meta { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ── Status Stepper ────────────────────────────────────────────────────────── */
.status-stepper { display:flex; overflow-x:auto; padding-bottom:.5rem; }
.status-step { display:flex; flex-direction:column; align-items:center; gap:.35rem; flex:1; min-width:75px; position:relative; cursor:pointer; }
.status-step::after { content:''; position:absolute; top:15px; left:50%; width:100%; height:2px; background:rgba(124,58,237,.12); z-index:0; }
.status-step:last-child::after { display:none; }
.step-circle { width:32px; height:32px; border-radius:50%; border:2px solid #EDEDF5; background:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; z-index:1; transition:all .22s; }
.status-step.done .step-circle   { background:linear-gradient(135deg,#10B981,#059669); border-color:transparent; color:#fff; box-shadow:0 4px 12px rgba(16,185,129,.4); }
.status-step.active .step-circle { background:linear-gradient(135deg,#7C3AED,#EC4899); border-color:transparent; color:#fff; box-shadow:0 4px 16px rgba(124,58,237,.5),0 0 0 4px rgba(124,58,237,.12); }
.step-label { font-size:.59rem; text-align:center; color:var(--text-muted); font-weight:700; letter-spacing:.02em; }
.status-step.active .step-label { color:var(--violet); }
.status-step.done   .step-label { color:var(--emerald); }

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.form-label { font-size:.79rem; font-weight:700; color:var(--text-dark); margin-bottom:.35rem; letter-spacing:-.01em; }
.form-control, .form-select { border:1.5px solid var(--border-color); border-radius:var(--r-sm); font-size:.84rem; padding:.5rem .85rem; transition:border-color .18s,box-shadow .18s; background:#fff; font-family:inherit; color:var(--text-dark); }
.form-control:focus, .form-select:focus { border-color:var(--violet); outline:none; box-shadow:0 0 0 4px rgba(124,58,237,.1); }
.form-control[readonly] { background:#F5F3FF; cursor:pointer; }
.form-control::placeholder { color:#67E8F9; }
.form-section-title { font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); padding-bottom:.5rem; border-bottom:1.5px solid var(--border-color); margin-bottom:1rem; }

/* Select2 */
.select2-container--bootstrap-5 .select2-selection { border:1.5px solid var(--border-color) !important; border-radius:var(--r-sm) !important; min-height:40px !important; font-size:.84rem !important; font-family:inherit !important; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection { border-color:var(--violet) !important; box-shadow:0 0 0 4px rgba(124,58,237,.1) !important; }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background:linear-gradient(135deg,#7C3AED,#EC4899) !important; }
.select2-dropdown { border:1.5px solid rgba(124,58,237,.2) !important; border-radius:var(--r-sm) !important; box-shadow:var(--shadow-lg) !important; }

/* Flatpickr */
.flatpickr-day.selected { background:linear-gradient(135deg,#7C3AED,#EC4899) !important; border-color:transparent !important; box-shadow:0 4px 12px rgba(124,58,237,.4) !important; }
.flatpickr-day:hover { background:rgba(124,58,237,.1) !important; border-color:transparent !important; }

/* Toastr */
.toast-success { background:linear-gradient(135deg,#10B981,#059669) !important; box-shadow:0 8px 24px rgba(16,185,129,.3) !important; border-radius:12px !important; }
.toast-error   { background:linear-gradient(135deg,#F43F5E,#E11D48) !important; box-shadow:0 8px 24px rgba(244,63,94,.3) !important;  border-radius:12px !important; }
.toast-warning { background:linear-gradient(135deg,#F59E0B,#D97706) !important; box-shadow:0 8px 24px rgba(245,158,11,.3) !important; border-radius:12px !important; }
.toast-info    { background:linear-gradient(135deg,#7C3AED,#EC4899) !important; box-shadow:0 8px 24px rgba(124,58,237,.3) !important; border-radius:12px !important; }
#toast-container > div { border-radius:12px !important; padding:12px 16px !important; }

/* Dropzone */
.dropzone { border:2px dashed rgba(124,58,237,.25) !important; border-radius:var(--r-lg) !important; background:rgba(124,58,237,.02) !important; min-height:100px !important; transition:all .2s; }
.dropzone:hover, .dropzone.dz-drag-hover { border-color:var(--violet) !important; background:rgba(124,58,237,.05) !important; box-shadow:0 0 0 4px rgba(124,58,237,.1) !important; }
.dropzone .dz-message { font-size:.85rem; color:var(--text-muted); font-family:inherit; }

/* SweetAlert2 */
.swal2-popup { border-radius:var(--r-xl) !important; box-shadow:var(--shadow-xl) !important; font-family:inherit !important; }
.swal2-title { font-size:1.1rem !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--text-dark) !important; }
.swal2-confirm { background:linear-gradient(135deg,#7C3AED,#4F46E5) !important; border-radius:var(--r-sm) !important; font-weight:700 !important; box-shadow:0 4px 14px rgba(124,58,237,.4) !important; }
.swal2-cancel  { background:rgba(107,114,128,.1) !important; border-radius:var(--r-sm) !important; color:var(--text-muted) !important; font-weight:700 !important; }

/* Dropdowns */
.dropdown-menu { border:1.5px solid rgba(124,58,237,.1) !important; border-radius:var(--r-md) !important; box-shadow:var(--shadow-xl) !important; background:#fff !important; padding:.4rem !important; }
.dropdown-item { border-radius:var(--r-sm) !important; font-size:.84rem !important; font-weight:500 !important; padding:.5rem .875rem !important; transition:all .15s !important; color:var(--text-dark) !important; }
.dropdown-item:hover { background:rgba(124,58,237,.07) !important; color:var(--violet) !important; }

/* Alerts */
.alert { border-radius:var(--r-md) !important; border:none !important; font-size:.84rem !important; font-weight:500 !important; }
.alert-warning { background:rgba(245,158,11,.08) !important; color:#92400E !important; border-left:4px solid var(--amber)   !important; }
.alert-danger  { background:rgba(244,63,94,.07)  !important; color:#9F1239 !important; border-left:4px solid var(--rose)    !important; }
.alert-success { background:rgba(16,185,129,.07)  !important; color:#065F46 !important; border-left:4px solid var(--emerald) !important; }
.alert-info    { background:rgba(124,58,237,.07)  !important; color:#4C1D95 !important; border-left:4px solid var(--violet)  !important; }

/* Pagination */
.pagination .page-link { border-radius:var(--r-sm) !important; border:1.5px solid var(--border-color) !important; font-size:.82rem !important; font-weight:600 !important; transition:all .18s !important; color:var(--text-muted) !important; }
.pagination .page-link:hover { background:rgba(124,58,237,.08) !important; border-color:var(--violet) !important; color:var(--violet) !important; }
.pagination .page-item.active .page-link { background:linear-gradient(135deg,#7C3AED,#4F46E5) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 4px 12px rgba(124,58,237,.4) !important; }

/* Scrollbars */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(124,58,237,.2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(124,58,237,.4); }

/* Misc */
.text-muted { color:var(--text-muted) !important; }
hr { border-color:var(--border-color) !important; opacity:1 !important; }
.invalid-feedback { font-size:.75rem !important; font-weight:600 !important; }
.form-control.is-invalid, .form-select.is-invalid { border-color:var(--rose) !important; }
.form-control.is-invalid:focus { box-shadow:0 0 0 4px rgba(244,63,94,.12) !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.show { transform: translateX(0); }
    #sidebar.show + #sidebar-overlay { display: block !important; }
    #main-content { margin-left: 0; }
    .kanban-board { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .kanban-board { grid-template-columns: 1fr; }
    .page-content { padding: 1rem; }
}