/* ═══════════════════════════════════════════════════════════
   SOLARIS ERP — Design System v3.0
   Base stylesheet — loads on every admin page.
   DO NOT add module-specific styles here.
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {background:#181824 /*#ecf0f1*/;font-family:'Inter';-webkit-font-smoothing:antialiased;padding:0px}
.page_left {width:calc(100% - 450px);float:left;}
.page_right {width:450px;float:right;min-height: 100vh;border-left:1px solid #ced0d1;background:#fff;}
.no_employer_data_container {padding:12px;background:#f1f5f9;border-radius:4px;font-size:12px;color:var(--t3);text-align:center;border: 1px solid #dfe5eb;margin-bottom: 15px;}
.no_employer_data_container i {display: block;font-size: 18px;color: var(--t4);margin: 0 auto 10px;}
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.module-card { background:var(--surface); border:1px solid #ced0d1; border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.module-card:hover { border-color:var(--border2); box-shadow:var(--shadow-md); }
.module-card-top { padding:18px 20px; display:flex; gap:14px; align-items:flex-start; }
.module-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.module-name { font-family:var(--display); font-size:14px; font-weight:700; color:var(--t); margin-bottom:3px; }
.module-desc { font-size:12px; color:var(--t3); line-height:1.5; }
.module-version { font-family:var(--mono); font-size:9px; color:var(--t4); margin-top:4px; }
.module-card-bottom { padding:12px 20px; border-top:1px solid #ced0d1; display:flex; align-items:center; gap:8px; background:var(--surface2); }
.module-status { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; font-weight:600; }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cat-label { font-family:var(--mono); font-size:9px; letter-spacing:.15em; color:var(--t3); text-transform:uppercase; margin:24px 0 10px 2px; }
.sub-module-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #ced0d1; background:var(--surface); position:relative; }

.sub-module-row:last-child { border-bottom:none; }
.sub-module-row:hover { background:var(--surface2); }
.sub-toggle { width:36px; height:20px; border-radius:10px; background:var(--border); cursor:pointer; position:relative; transition:background .2s; flex-shrink:0; }
.sub-toggle.on { background:#22c55e; }
.sub-toggle-knob { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; }
.sub-toggle.on .sub-toggle-knob { transform:translateX(16px); }
.notif-cat-manufacturing { background: #fdf0e0; color: #92400e; }
.inner_card {padding:15px;}
.inner_card .search_container {padding: 0;}

.apexcharts-yaxis-texts-g {}
.apexcharts-yaxis-texts-g .apexcharts-text {}
.apexcharts-yaxis-texts-g .apexcharts-text tspan {}
.apexcharts-yaxis-texts-g .apexcharts-text title {}

    /* SA topbar (replaces tenant .topbar) */
    .sa-topbar{height:52px;background:#fff;border-bottom:1px solid #e8eaf0;display:flex;align-items:center;padding:0 20px;flex-shrink:0;z-index:50}
    .sa-topbar-section{font-size:11px;font-weight:800;color:#94a3b8;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-right:20px;border-right:1px solid #e8eaf0;margin-right:8px;min-width:90px}
    .sa-h-menu{display:flex;align-items:center;flex:1;overflow-x:auto;scrollbar-width:none}
    .sa-h-menu::-webkit-scrollbar{display:none}
    .sa-h-menu-item{display:flex;align-items:center;gap:7px;padding:0 15px;height:52px;font-size:13px;font-weight:600;color:#64748b;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;transition:all .15s;text-decoration:none}
    .sa-h-menu-item i{font-size:12px;opacity:.7}
    .sa-h-menu-item:hover{color:#1a1a2e;background:#f8fafc}
    .sa-h-menu-item.active{color:#343E7B;border-bottom-color:#343E7B;background:rgba(52,62,123,.03)}
    .sa-h-menu-item.active i{opacity:1}
    .sa-topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto;padding-left:16px;flex-shrink:0}
    .sa-tb-date{font-size:11px;color:#94a3b8;white-space:nowrap;padding-right:12px;border-right:1px solid #e8eaf0}
    .sa-tb-badge{background:#fff0e6;color:#c2610a;font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.05em;border:1px solid #fdd9b5}
    .sa-tb-avatar{width:30px;height:30px;border-radius:8px;background:#0f1729;color:#F69B63;font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center}
    .sa-tb-name{font-size:12px;font-weight:700;color:#374151;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .sa-tb-logout{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:#94a3b8;font-size:15px;cursor:pointer;transition:all .15s;text-decoration:none}
    .sa-tb-logout:hover{color:#dc2626;background:#fee2e2}
    /* SA content */
    .sa-content{}
    /* SA login */
    .sa-login-outer{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f3f4f6}
    .sa-login-card{background:#fff;border:1px solid #e8eaf0;border-radius:14px;padding:40px;width:400px;max-width:92vw;box-shadow:0 8px 32px rgba(0,0,0,.07)}
    .sa-login-logo{text-align:center;margin-bottom:32px}
    .sa-login-logomark{width:52px;height:52px;border-radius:13px;background:#0f1729;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
    /* SA page components */
    .card{background:#fff;border:1px solid #e8eaf0;border-radius:10px;padding:20px;margin-bottom:20px}
    .card-title{font-size:14px;font-weight:700;margin-bottom:16px;color:#0f172a}

    .badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
    .badge-active{background:#dcfce7;color:#15803d}
    .badge-trial{background:#dbeafe;color:#1d4ed8}
    .badge-suspended{background:#fee2e2;color:#b91c1c}
    .badge-cancelled,.badge-inactive{background:#f1f5f9;color:#64748b}
    .badge-unverified{background:#fef3c7;color:#92400e}
    .badge-ok{background:#dcfce7;color:#15803d}
    .badge-error{background:#fee2e2;color:#b91c1c}
    .badge-warning{background:#fef3c7;color:#92400e}
    .btn-primary{background:#343E7B;color:#fff}.btn-primary:hover{background:#2a3266}
    .btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
    .btn-success{background:#059669;color:#fff}.btn-success:hover{background:#047857}
    .btn-ghost{background:#f1f5f9;color:#374151;border:1px solid #e2e8f0}.btn-ghost:hover{background:#e8ecf0} 
    .btn-sm{padding:5px 11px;font-size:12px} 
    .form-label {display:flex;font-size:12px;font-weight:500;margin-bottom:10px;color:#111;align-items: center;gap: 5px;}
    .form-label.red {color: #dd4343;}
    .form-label.full {display:block;}
    .form-label .sub {display:block;font-weight:400;opacity:.6;}
    .form-input:focus{}
    .form-label input[type=checkbox] {}
    /*select.form-input{appearance:auto} */
    

    .err{color:#b91c1c;background:#fee2e2;border:1px solid #fca5a5;padding:10px 14px;border-radius:7px;font-size:13px;margin-bottom:16px}
    .pill {display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#f1f5f9;color:#475569}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
    .empty-state{text-align:center;padding:48px;color:#94a3b8;font-size:13px}
    code{background:#f1f5f9;padding:2px 6px;border-radius:5px;font-size:12px;font-family:'JetBrains Mono',monospace;color:#374151}
    .rp-modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
    .rp-modal.open{display:flex}
    .rp-modal-box{background:#fff;border-radius:12px;padding:28px 32px;width:440px;max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.18)}
    .pagination{display:flex;gap:4px;margin-top:16px;align-items:center;flex-wrap:wrap}
    .pagination a,.pagination span{padding:6px 12px;border-radius:6px;font-size:12px;border:1px solid #e8eaf0;font-weight:600}
    .pagination a{color:#475569}.pagination a:hover{background:#f1f5f9}
    .pagination .current{background:#343E7B;color:#fff;border-color:#343E7B}
    .sa-tab{background:none;border:none;padding:10px 18px;font-size:13px;font-weight:700;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;font-family:inherit}
    .sa-tab:hover{color:#1a1a2e}
    .sa-tab.active{color:#343E7B;border-bottom-color:#343E7B}
    .sa-tab-panel{display:none}.sa-tab-panel.active{display:block}
    .health-card{border-radius:8px;padding:14px 16px;margin-bottom:10px}
    .health-ok{background:#f0fdf4;border:1px solid #bbf7d0}
    .health-warn{background:#fefce8;border:1px solid #fde68a}
    .health-err{background:#fef2f2;border:1px solid #fecaca}
    .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
    .dot-green{background:#22c55e}.dot-red{background:#ef4444}.dot-yellow{background:#eab308}.dot-gray{background:#94a3b8}
    .alert-success{background:#d1fae5;border:1px solid #6ee7b7;color:#065f46;padding:11px 16px;border-radius:7px;margin-bottom:16px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px}
    .alert-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:11px 16px;border-radius:7px;margin-bottom:16px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px}
    .alert-warning{background:#fefce8;border:1px solid #fde68a;color:#92400e;padding:11px 16px;border-radius:7px;margin-bottom:16px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px}
    .alert-info{background:#dbeafe;border:1px solid #93c5fd;color:#1e40af;padding:11px 16px;border-radius:7px;margin-bottom:16px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:9px}
    .sf-row{display:flex;align-items:center;gap:10px;padding:9px 20px;cursor:pointer;transition:background .1s}
    .sf-row:hover{background:#f8fafc}
    .sf-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
    .sf-bar-track{height:3px;border-radius:2px;background:#f1f5f9;flex:1;min-width:40px;overflow:hidden}
    .sf-bar-fill{height:100%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}
    .sf-sub{display:flex;align-items:center;gap:10px;padding:7px 20px 7px 60px;border-top:1px solid #f1f5f9;font-size:12px;color:#475569;background:#fafbfc}
    .sf-chevron{transition:transform .18s;color:#94a3b8}
    .sf-chevron.open{transform:rotate(90deg)}
    .sf-children{display:none;border-top:1px solid #f1f5f9}
    .sf-children.open{display:block}
    

.locked-field {
    background: var(--surface2) !important;
    color: var(--t3) !important;
    cursor: not-allowed !important;
    border-color: var(--border) !important;
}
.locked-notice {
    display: flex; align-items: center; gap: 8px;
    background: #fffbeb; border: 1px solid #fde68a;
    border-radius: var(--radius); padding: 10px 14px;
    font-size: 12.5px; color: #92400e; margin-bottom: 20px;
}
.locked-notice svg { flex-shrink: 0; color: #d97706; }
.upload-zone {
    border: 2px dashed var(--border2);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--surface);
    position: relative;
}
.upload-zone:hover, .upload-zone.drag {
    border-color: var(--primary);
    background: var(--primary-light);
}
.upload-zone.uploading {
    pointer-events: none;
    opacity: .7;
}
.upload-zone-icon { font-size: 32px; margin-bottom: 10px; }
.upload-zone h3 { font-family:var(--display); font-size:15px; font-weight:700; color:var(--t); margin-bottom:6px; }
.upload-zone p { font-size:12.5px; color:var(--t3); }
.upload-zone .hint { font-family:var(--mono); font-size:10px; color:var(--t4); margin-top:8px; }

/* ── CSS VARIABLES ──────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@font-face {
    font-family: 'Product Sans';
    src: url('/fonts/product-sans/ProductSans-Bold.woff2') format('woff2'),
        url('/fonts/product-sans/ProductSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Product Sans';
    src: url('/fonts/product-sans/ProductSans-Regular.woff2') format('woff2'),
        url('/fonts/product-sans/ProductSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.clear {clear:both;}

/* Optional spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spin { animation: spin 0.8s linear infinite; width: 14px; height: 14px; vertical-align: middle; margin-right: 6px; }

:root {
  /* Surfaces */
  --bg:           #f1f5f9;
  --surface:      #ffffff;
  --surface2:     #f8fafc;
  --surface3:     #f1f5f9;
  --border:       #cccccc;
  --border2:      #cbd5e1;

  /* Sidebar */
  --sb-bg:        #ffffff;
  --sb-border:    #e2e8f0;
  --sb-text:      #64748b;
  --sb-text-h:    #1e293b;
  --sb-active-bg: #eff6ff;
  --sb-active:    #3b82f6;
  --sb-section:   #94a3b8;
  --sb-icon:      #94a3b8;

  /* Text */
  --t:  #0f172a;
  --t2: #334155;
  --t3: #64748b;
  --t4: #94a3b8;
  --t5: #cbd5e1;

  /* Brand */
  --primary:       #111;
  --primary-h:     #2563eb;
  --primary-light: #eff6ff;
  --primary-dark:  #1d4ed8;

  /* Semantic */
  --success:       #22c55e;
  --success-h:     #16a34a;
  --success-light: #f0fdf4;
  --warning:       #f59e0b;
  --warning-h:     #d97706;
  --warning-light: #fffbeb;
  --danger:        #ef4444;
  --danger-h:      #dc2626;
  --danger-light:  #fef2f2;
  --info:          #06b6d4;
  --info-light:    #ecfeff;
  --purple:        #8b5cf6;
  --purple-light:  #f5f3ff;
  --pink:          #ec4899;
  --pink-light:    #fdf2f8;
  --orange:        #f97316;
  --orange-light:  #fff7ed;

  /* Aliases */
  --red:         #ef4444;
  --red-h:       #dc2626;
  --red-light:   #fef2f2;
  --green:       #22c55e;
  --green-light: #f0fdf4;
  --amber:       #f59e0b;
  --amber-light: #fffbeb;
  --blue:        #3b82f6;
  --blue-light:  #eff6ff;

  /* Typography */
  --display: 'Inter', sans-serif;
  --body:    'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* Radius */
  --radius-sm: 2px;
  --radius:    6px;
  --radius-lg: 12px;
  --radius-xl: 8px;

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow:      0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-card: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);

  /* Motion */
  --transition:      all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── BASE ───────────────────────────────────────────────── */
html { font-size: 14px; }

.fancybox__container {--fancybox-bg: rgb(24 24 27 / 50%)!important;}

    .sb-parent{cursor:pointer;user-select:none}
    .sb-children{overflow:hidden;max-height:0;transition:max-height .25s ease;padding-left:14px;margin-top:2px}
    .sb-children.open{max-height:500px}
    .sb-child{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 20px;font-size:12.5px;color:var(--sb-text);border-radius:6px;text-decoration:none;transition:var(--transition);margin-bottom:1px;position:relative}
    .sb-child::before{content:'';position:absolute;left:8px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--sb-text);opacity:.4;transform:translateY(-50%)}
    .sb-child:hover{color:var(--sb-text-h);background:var(--sb-active-bg)}
    .sb-child.active{color:var(--sb-active);font-weight:600}
    .sb-child.active::before{background:var(--sb-active);opacity:1}
    .sb-chevron{transition:transform .25s ease;flex-shrink:0}
    .sb-parent.open .sb-chevron{transform:rotate(180deg)}
    /* Bell */
    .tb-notif-wrap{position:relative}
    .tb-notif-btn{position:relative;width:34px;height:34px;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:background .15s}
    .tb-notif-btn:hover {color:#fff;}
    .notif-badge{position:absolute;top:3px;right:3px;min-width:16px;height:16px;background:#e53e3e;color:#fff;font-size:9px;font-weight:700;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;border:2px solid var(--surface,#fff)}
    .notif-badge.show{display:flex}
    .notif-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;width:320px;background:var(--surface);border:1px solid #ced0d1;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.14);z-index:9999;overflow:hidden}
    .notif-dropdown.open{display:block}
    .notif-dd-hdr{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 10px;border-bottom:1px solid #ced0d1}
    .notif-dd-title{font-size:13px;font-weight:600;color:var(--t)}
    .notif-mark-all-btn{font-size:11px;color:var(--primary,#1a56db);background:none;border:none;cursor:pointer;padding:0}
    .notif-mark-all-btn:hover{text-decoration:underline}
    .notif-list{max-height:340px;overflow-y:auto}
    .notif-dd-item{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-bottom:1px solid #ced0d1;cursor:pointer;text-decoration:none;transition:background .12s}
    .notif-dd-item:last-child{border-bottom:none}
    .notif-dd-item:hover{background:var(--surface2)}
    .notif-dd-item.unread{background:rgba(26,86,219,.05)}
    .notif-dd-item.unread:hover{background:var(--surface2)}
    .notif-dd-icon{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
    .ni-blue{background:#e6f1fb;color:#1a56db}.ni-green{background:#eaf3de;color:#1a6b3c}
    .ni-amber{background:#faeeda;color:#b37a00}.ni-red{background:#fcebeb;color:#c0392b}
    .ni-purple{background:#f3e8ff;color:#6b21a8}.ni-gray{background:#f1efe8;color:#5f5e5a}
    .notif-dd-body{flex:1;min-width:0}
    .notif-dd-ttl{font-size:12px;font-weight:600;color:var(--t);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .notif-dd-msg{font-size:11px;color:var(--t3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .notif-dd-time{font-size:10px;color:var(--t4,#aaa);margin-top:3px}
    .notif-unread-dot{width:7px;height:7px;border-radius:50%;background:#1a56db;flex-shrink:0;margin-top:6px}
    .notif-dd-empty{padding:28px 16px;text-align:center}
    .notif-dd-empty-icon{font-size:28px;opacity:.3;margin-bottom:8px}
    .notif-dd-empty-text{font-size:13px;color:var(--t3)}
    .notif-dd-ftr{padding:10px 16px;border-top:1px solid #ced0d1;text-align:center}
    .notif-dd-ftr a{font-size:12px;color:var(--primary,#1a56db);text-decoration:none;font-weight:500}
    .notif-dd-ftr a:hover{text-decoration:underline}
    
/* ── APP SHELL ──────────────────────────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {width: 220px; min-width: 220px;background: #111;display: flex; flex-direction: column;height: 100vh;overflow-y: auto; overflow-x: hidden;transition: var(--transition-slow);z-index: 100;scrollbar-width: none;}
.sidebar::-webkit-scrollbar { display: none; }

.sb-logo {padding: 14px 20px 14px;border-bottom: 1px solid #0b2844;display: flex; align-items: center; gap: 10px;flex-shrink: 0;height: 65px;}
.sb-logo-icon {width: 36px; height: 36px;background: #111;border-radius: 6px;display: flex; align-items: center; justify-content: center;flex-shrink: 0;}
.sb-logo-icon svg { width: 18px; height: 18px; }
.sb-logo-name {font-family:'Inter';font-size: 12px; font-weight: 500; color:#94a3b8;letter-spacing: 0px;}
.sb-logo-tag {font-family: 'Inter'; font-size: 9px;color: #94a3b8; letter-spacing: 0; margin-top: 1px;opacity:.6;}

.sb-nav { flex: 1; padding: 10px; overflow-y: auto; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }

.sb-section {font-family: 'Inter'; font-size: 11px; font-weight: 400;letter-spacing: 0; text-transform: capitalize;color: var(--sb-section);padding: 14px 8px 6px; margin-top: 2px;}
.sb-section:first-child { padding-top: 6px; }

.sb-link {display: flex; align-items: center; gap: 9px;padding: 7px 10px; border-radius: 4px;font-size: 11px; font-weight: 400;color: var(--sb-text); text-decoration: none;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; margin-bottom: 1px;position: relative; cursor: pointer;}
.sb-link svg { width: 16px; height: 16px; color: var(--sb-icon); flex-shrink: 0; transition: var(--transition); }
.sb-link:hover { background: #111; color: #fff; }
.sb-link:hover svg { color:#fff; }
.sb-link.active { background: #111; color: #fff; font-weight: 600; }
.sb-link.active svg { color: #fff; }
.sb-link.active::before {content: '';position: absolute; left: 0; top: 20%; bottom: 20%;width: 2px; background: #111;border-radius: 0; margin-left: -10px;}

.sb-badge {
  margin-left: auto;
  background: var(--danger); color: #fff;
  font-family: 'Inter'; font-size: 9px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px;
  min-width: 18px; text-align: center;
}
.sb-badge.amber { background: var(--warning); }
.sb-badge.green { background: var(--success); }
.sb-badge.gray  { background: var(--border2); color: var(--t3); }

.sb-foot { padding: 10px; border-top: 1px solid #0b2844; flex-shrink: 0; }
.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius);
  cursor: pointer; transition: var(--transition);
}
.sb-user:hover { background: var(--surface3); }
.sb-avatar {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #111 0%, var(--purple) 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 11px; font-weight: 700;
  color: #fff; flex-shrink: 0;
}
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name { font-size: 11px; font-weight: 600; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role {font-family: 'Inter';font-size: 9px;color: #94a3b8;text-transform: capitalize;letter-spacing: 0;opacity: .6;}
.sb-logout {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--t4); transition: var(--transition);
  text-decoration: none; flex-shrink: 0;
}
.sb-logout:hover { background: var(--danger-light); color: var(--danger); }

/* ── MAIN AREA + TOPBAR ─────────────────────────────────── */
.main-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {height: 40px;min-height: 40px;background: #181824;border-bottom: 0px solid #ced0d1;display: flex;align-items: stretch;gap: 0;flex-shrink: 0;z-index: 100;overflow: visible;}
.h-menu-item i {font-size: 15px;flex-shrink: 0;font-weight: 300;display:none; }
.h-menu-item:hover {color: #fff;font-weight: 500;}
.h-menu-item:hover i {font-weight: 900;}

.sb-toggle {
  width: 36px; height: 36px;
  background: none; border: none; border-radius: var(--radius);
  cursor: pointer; color: var(--t3);
  display: none; align-items: center; justify-content: center;
  transition: var(--transition);
}
.sb-toggle:hover { background: var(--surface3); color: var(--t); }
        /* Topbar sits highest */
        .topbar { position: relative; z-index: 200; }

        /* Page content sits above portal dropdowns */
        .page-content { position: relative; z-index: 80; }

        /* Portal container — fixed, zero size, just an anchor */
        #hDropdownsPortal {
            position: fixed;
            top: 0; left: 0;
            width: 0; height: 0;
            z-index: 150;
            pointer-events: none;
        }

        /* Individual portal dropdowns */
        .portal-dropdown {
            position: fixed;
            pointer-events: all;
            display: none;
            min-width: 200px;
            background: var(--surface1, #fff);
            border: 1px solid rgba(52, 105, 231, 0.15);
            border-top:0;
            border-radius: 0 0 6px 6px;
            
            overflow: hidden;
            max-height: 420px;
            overflow-y: auto;
        }
        .portal-dropdown.dd-open {
            display: block;
        }
.portal-dropdown .h-dropdown-item {display: flex;align-items: center;gap: 8px;padding: 12px;font-size: 12px;color: #333;text-decoration: none;transition: background 0.1s;white-space: nowrap;border-bottom: 1px solid #ced0d1;border-radius:0;}
.portal-dropdown .h-dropdown-item:hover {background: #d1d5db;}
.portal-dropdown .h-dropdown-item i {font-size: 12px;color: var(--t3, #9ca3af);width: 14px;flex-shrink: 0;display:none;}
.portal-dropdown .h-dropdown-sep {height: 1px;background: var(--border, #e5e7eb);margin: 4px 0;}
.topbar-title { flex: 1; display: flex; align-items: center; gap: 6px; }
.topbar-page  { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--t); }
.topbar-sep   { color: var(--t5); }
.topbar-sub   { font-size: 13px; color: var(--t3); }
.topbar-right {display: flex;align-items: stretch;overflow: visible;}
.topbar-right > li {font-size: 12px;font-weight: 500;border-left:1px solid #323240;display: flex;align-items: center;gap: 6px;font-family: 'Inter', sans-serif;padding: 0 10px;color:#777c88;}
.topbar-right > li a {display:block;color: #656972;}
.topbar-right > li a .fa-power-off {color: #ff4242;}
.topbar-right > li a:hover {color:#fff;}
.topbar-right > li i {font-size: 16px;}
.tb-date {}
/* .tb-notif, .tb-icon-btn {
  width: 36px; height: 36px;
  background: none; border: none; border-radius: var(--radius);
  cursor: pointer; color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition); position: relative; text-decoration: none;
}
.tb-notif:hover, .tb-icon-btn:hover { background: var(--surface3); color: var(--t); }*/
.tb-notif-dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px;
  background: var(--danger); border-radius: 50%;
  border: 2px solid var(--surface);
}

.page-content {flex: 1; overflow-y: auto; padding:0px;scrollbar-width: thin; scrollbar-color: var(--border2) transparent;z-index: 20;border-radius: 12px 0 0 0;background: #fff; }
.fancybox__content {padding:0!important;}
.fancybox__content .inner_card {padding:0 30px 30px;}
.fancybox_inner_container {min-width: 500px;}
.fancybox_inner_container .title {font-family: 'Inter';font-size: 14px;line-height: 20px;margin-bottom: 20px;font-weight: 600;border-bottom: 1px solid #ced0d1;padding:20px 30px 15px;}

/* ── PAGE HEADER ────────────────────────────────────────── */
h1 {letter-spacing: -.5px;font-family: 'Inter';font-weight: 600;}
.page-header {margin-bottom: 0px;padding: 15px;border-bottom: 0px solid #d1d5db;}
.page-header .page_title_section, .inner_container .title_section .section_title {width:50%;float:left;padding: 0px;}
.page-header .page_title_section h1 {font-size: 16px;color: #111;line-height: normal;font-weight:600;}
.page-header .page_title_section h1 .status-pill, .page-header .page_title_section h1 .type-pill {display: inline-block;font-size: 9px;font-weight: 500;opacity: 1;padding:3px 10px;margin: 0 0 0 3px;border-radius: 20px;font-family: 'Inter';letter-spacing: 0;position: relative;top: -2px;}
.status-pill {display: inline-flex;gap: 5px;align-items: center;font-size: 9px;font-weight: 500;opacity: 1;padding: 3px 10px;margin: 0 0 0 3px;border-radius: 20px;font-family: 'Inter';letter-spacing: 0;}
.status-pill i {}
.status-pill.grey {background: #efefef;color: #999;border: 1px solid #d0d0d0;}
.status-pill.grey i {}
.status-pill.green {background: #36bd60;border: 1px solid #36bd60;color: #fff;}
.status-pill.green i {}
.status-pill.lg_green {background: #e0fbf1;color: #247c27;border: 1px solid #9be3c8;}
.status-pill.red {background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D;}
.status-pill.blue {background: #eff6ff;color: #1d4ed8;border: 1px solid #bcceff;}
.status-pill.amber {background: #FAEEDA; border: 1px solid #EF9F27; color: #633806;}
.status-pill.purple {background: #f2ebff;color: #673AB7;border: 1px solid #ddcff7;}
.page-header .page_title_section h1 > span, .section-title > .sub { display:block; font-size: 13px; color: #111; margin-top: 5px;font-weight: 400;letter-spacing: 0px;opacity:.6;} 
.page-header .page-header-actions, .inner_container .button_section { display: block; gap: 8px; align-items: center;width: 50%;float: right;text-align: right;padding: 0px;}
.page-header .page-header-actions .btn {display:inline-block;margin-left: 5px;}
.page-header .page-header-actions .btn:nth-child(1) {margin-left: 0;}
.inner_container .button_section .btn {float:right;}
.title_section {display: grid;grid-template-columns: 1fr auto;gap: revert-layer;overflow: hidden;border-radius: 0;align-items: center;padding: 15px;}

/* ── CARDS & PANELS ─────────────────────────────────────── */
.section .settings-card {}
.settings-card > .section-title {border-bottom: 1px solid #ced0d1;padding-bottom: 15px;margin-bottom: 15px;}
.settings-card > .section-title i {float:right;font-size: 18px;}
.panel, .settings-card {border: 1px solid #ced0d1;border-radius: 0px;padding: 15px;box-shadow: none;position: relative;overflow: hidden;background: #fff;}
.panel_no_border {border: 0px solid #d1d5db;border-radius: 8px;padding: 30px;box-shadow: none;position: relative;overflow: hidden;background: #fff;}
.panel-header {
  padding: 16px 20px; border-bottom: 1px solid #ced0d1;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
}
.panel-title { font-family: var(--display); font-size: 13.5px; font-weight: 700; color: var(--t); flex: 1; }
.panel-action { font-family: 'Inter'; font-size: 12px; letter-spacing: 0; color: #111; text-decoration: none; font-weight: 400; transition: var(--transition); }
.panel-action:hover { color: var(--primary-h); }
.panel-body { padding: 16px 20px; }
.flex-grid-3 {display:flex;gap:0;border-top: 1px solid #ced0d1;border-bottom: 1px solid #ced0d1;flex-wrap: wrap;}
.flex-grid-3 > * {flex: 0 0 calc((100% - 0px) / 3);}
.flex-grid-3.wc_lsit {box-shadow: none;position: relative;overflow: hidden;background: #fff;}
.flex-grid-3.wc_lsit .wc_box {padding: 15px;border-left:1px solid #ced0d1;}

/* ── STAT CARDS ─────────────────────────────────────────── */
.stat-grid {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap: 10px;overflow: hidden;border-radius: 0;}
.page_left .stat-grid {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.stat-grid > li {-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.stat-grid > li.stat-card {list-style: none;border-radius: 0px;padding: 15px;box-shadow: none;position: relative;overflow: hidden;background: #fff;align-items: center;border: 1px solid #ced0d1;border-radius: 6px;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.stat-grid > li.stat-card a {text-decoration:none;}
.filter-bar { background:#fff; border:1px solid #ced0d1; border-radius:4px; padding:14px 16px; }
.filter-bar-inner { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.filter-group {}
.filter-group-search { flex:1; min-width:200px; }
.small-form-label { font-size:11px; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.search-wrapper { position:relative; }
.search-wrapper .search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:12px; }
.search-wrapper input { padding-left:30px; }
.badge-draft    { background:#f3f4f6; color:#374151; }
.badge-sent     { background:#eff6ff; color:#1d4ed8; }
.badge-approved { background:#f0fdf4; color:#15803d; }
.badge-rejected { background:#fef2f2; color:#b91c1c; }
.badge-converted{ background:#faf5ff; color:#7c3aed; }
.badge-expired  { background:#fff7ed; color:#c2410c; }
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:3px; font-size:11px; font-weight:600; text-transform:capitalize; }

.kpi-skeleton { display:inline-block; width:80px; height:20px; background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:3px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }


.stat-grid > li.stat-card img {height: 40px;width: 40px;float: right;border: 1px solid #999;;border-radius: 10px;padding: 10px;}
.stat-grid > li.stat-card .context {display:flex;gap: 10px;}
.stat-grid > li.stat-card .stat-lbl { font-size: 12px; font-weight: 400; color: #111; margin: 0;font-family: 'Inter'; opacity: .6;margin-bottom: 10px;}
.stat-grid > li.stat-card .context .stat-val {font-weight: 600;font-size: 20px;line-height:20px;margin-bottom: 0px;font-family: "Montserrat", sans-serif;color: #111;}
.stat-grid > li.stat-card .context .compare {display: inline-block;font-size: 10px;line-height: 10px;background: #f5f5f5;padding: 5px;border-radius: 4px;color: #555;font-family: 'Inter';border: 1px solid #dcdcdc;}
.stat-grid > li.stat-card .context a.card_view_link {display:flex;align-items: center;font-size:12px;line-height: 12px;color:#2449e0;text-decoration: none;margin-top: 5px;}
.stat-grid > li.stat-card .context a.card_view_link i {margin:0 0 0 2px;position: relative;top: 1px;}
.stat-grid > li.stat-card .kpi-icon {height: 38px;width: 38px;text-align: center;/*float: right;*/border: 1px solid #ced0d1;border-radius: 6px;padding: 0;font-size: 18px;line-height: 38px;position: relative;top: 1px;background:#fff;color: #111;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.stat-grid > li.stat-card .kpi-icon i {font-size: 18px;line-height: 38px;}
.stat-grid > li.stat-card .kpi-icon a {display:block;color: unset;}
.stat-grid > li.stat-card .kpi-icon a i {text-decoration:none;}
.stat-grid > li.stat-card:hover .kpi-icon {background: #111!important;color: #fff!important;border: 1px solid #111!important;cursor:pointer;}
.stat-grid > li.stat-card .blue::after   { background: linear-gradient(90deg,#3b82f6,#6366f1); }
.stat-grid > li.stat-card .green::after  { background: linear-gradient(90deg,#22c55e,#10b981); }
.stat-grid > li.stat-card .amber::after  { background: linear-gradient(90deg,#f59e0b,#f97316); }
.stat-grid > li.stat-card .red::after    { background: linear-gradient(90deg,#ef4444,#ec4899); }
.stat-grid > li.stat-card .purple::after { background: linear-gradient(90deg,#8b5cf6,#6366f1); }
.stat-grid > li.stat-card .gray::after   { background: var(--border2); }
.stat-grid > li.stat-card:hover {cursor:pointer;border:1px solid #2449e0;}

.stat-val {  }
.stat-lbl {}
.stat-lbl .stat-chg { font-size: 12px;line-height: 12px;font-weight: 400; display:none;}
.chg-up   { color: var(--success); }
.chg-down { color: var(--danger); }
.chg-neu  { color: var(--t4); }

.search_container {padding:15px;display: flex;gap: 10px;border-radius:0px;overflow:hidden;    align-items:center;flex-wrap:wrap;}
.search_container > *{flex:0 0 auto;width:auto;min-width:unset;}
.search_container .label_form_group {display:flex;gap:5px;align-items:center;}
.search_container .dataTables_length {flex: 0 0 auto;}
.search_container .dataTables_length label, .small-form-label {font-size: 12px;opacity: .8;display: flex;align-items: center;gap: 10px;}
.search_container .dataTables_length label {margin: 0;}
.search_container .dataTables_length select {min-width:auto!important;padding: 10px 15px;background: #fff;border: 1px solid #96a5ad;border-radius: 4px;font-family: 'Inter';font-size: 12px;line-height: 16px;color: var(--t);transition: var(--transition);outline: none;appearance: none;}
.search_container .dataTables_filter {}
.search_container .dataTables_filter label {}
.search_container .dataTables_filter label input {}
.search_container .form-input {width: auto;}
.search_container .table-search {}
.search_container .table-search .form-input {width: 100%;}
.search_container .btn {border-radius:4px;}
.inline-form-label {font-size:11px; color:#64748b;margin-bottom:5px;display:block;}
.full {width:100%!important;}
.small {font-size: 12px;}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {display: flex;align-items: center;text-align: center;justify-content: center;background: #f1f5f9;padding: 10px;border-radius: 4px;font-family: 'Inter';font-size: 12px;line-height: 16px;font-weight: 500;cursor: pointer;border: 1px solid #ccc;text-decoration: none;width: auto;color: #111;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.btn.purple {background: rgb(192 202 242 / 15%);cursor: pointer;color: #2449e0;border: 1px solid #bfc9f2;}
.btn_count {display:inline-flex;align-items:center;justify-content:center;line-height: 10px;padding: 3px 5px;border-radius: 8px;background: #F44336;color: #fff;font-size: 10px;font-weight: 500;font-family: 'Plus Jakarta Sans';}
.btn i {margin-right:5px;float: left;font-size: 12px;line-height: 16px;}
.btn i.hgi {font-size: 16px;}
.btn i.right_icon {margin-left:5px;float: right;}
.btn:hover {background:#2449e0;color:#fff;border:1px solid #2449e0;color:#fff;}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn.primary { background: #2449e0; color: #fff;border:1px solid #2449e0;}
.btn-primary:hover { background: var(--primary-h); box-shadow: 0 4px 14px rgba(59,130,246,0.4); transform: translateY(-1px); }

.btn.green {background: #36bd60;color: #fff;border: 1px solid #36bd60;}
.btn-green:hover { background: #2ea453!important;border: 1px solid #2ea453; color:#fff!important; }

.btn.orange {background: #ff5726;color: #fff;border: 1px solid #ff5726;}
.btn-orange:hover { background: #ff5726;border: 1px solid #ff5726; color:#fff; }

.btn-outline { background:#2449e0; color: #fff; border:0; }
.btn-outline:hover { background: var(--surface3); color: var(--t); }
.btn-outline.active { background: #2449e0; color: #fff; border-color: #2449e0; }

.btn-danger  { background: var(--danger);  color: #fff; box-shadow: 0 2px 8px rgba(239,68,68,0.3); }
.btn-danger:hover  { background: var(--danger-h); }
.btn-success { background: var(--success); color: #fff; box-shadow: 0 2px 8px rgba(34,197,94,0.3); }
.btn-success:hover { background: var(--success-h); }
.btn-ghost   { background: transparent; color: var(--t3); border: none; }
.btn-ghost:hover { background: var(--surface3); color: var(--t); }

.btn-sm { height: 42px; padding: 0 12px; font-size: 12px; }
.btn-xs { height: 26px; padding: 0 10px; font-size: 11px; border-radius: var(--radius-sm); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 14px; }
.grid_box_container {display: flex;flex-wrap: wrap;background: #fff;border: 1px solid #ced0d1;border-radius: 6px;overflow: hidden;margin-left: auto;}
.grid_box_container .btn {}
.grid_box_container .btn:hover {}
.grid_box_container .btn.btn-outline {background: transparent;color: #111;opacity: .8;box-shadow: none;}
.grid_box_container .btn.btn-primary.btn-outline {background: #111;color: #fff;opacity: 1;box-shadow: none;border-radius: 0;}

/* ── FORMS ──────────────────────────────────────────────── */
.form-group { margin-bottom: 10px; }
.form-group.flex {gap:10px;}
.form-group.grid {gap:10px;margin: 0;display: grid;grid-template-columns: 1fr auto;}
.form-group .input_sub {font-size: 11px;opacity: .6;display: block;margin-top: 5px;}
.form-label.flex {justify-content: space-between;gap: 5px;}
.form-label.flex a.right_micro_link {font-size: 11px;text-decoration: none;font-weight: 400;opacity: .6;color: #111;}
.form-label.flex a i {}
.small-form-label {}
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-hint   { display: block; font-size: 11.5px; color: var(--t4); margin-top: 4px; }
.form-input {width: 100%; padding:10px 15px;background: #fff; border:1px solid #ccc;border-radius: 4px; font-family: 'Inter';font-size: 12px;line-height: 16px; color: var(--t);transition: var(--transition); outline: none; appearance: none;}
.form-input.zero_radius {border-radius:0;}
.form-group.icon_form {}
.form-group.icon_form i {position: absolute;margin: 12px;color: #111;}
.form-group.icon_form .form-input {padding: 10px 15px 10px 40px;}
.form-input:hover { border-color: var(--border2); }
.form-input:focus { border-color: #111; box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.form-input::placeholder { color: var(--t5); }

select.form-input,.search_container .dataTables_length select {height:38px;min-width: 200px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat: no-repeat; background-position: right 12px center;padding-right: 36px; cursor: pointer;}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;margin-bottom: 10px;}
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;margin-bottom: 10px;}

.form-grid-flex {display: flex;flex-wrap: wrap;gap: 10px;}
.form-grid-flex > * {flex: 0 0 calc((100% - 40px) / 5);}
.form-grid-2 .form-group, .form-grid-3 .form-group {margin-bottom: 0;}
.form-grid-2 .form-group .form-input, .form-grid-3 .form-group .form-input {width:100%;min-width: unset;}
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.input-error   { border-color: var(--danger) !important; }
.input-err-msg { display: block; font-size: 11.5px; color: var(--danger); margin-top: 4px; }

.list_form_input {}
.list_form_input > li {margin-bottom: 0;margin-top: 20px;}
.list_form_input > li:nth-child(1) {margin-top: 0px;}
.list_form_input > li > .label-box {width: calc(100% - 100px);float: left;}
.list_form_input > li > .toggle {float: right;}
.list_form_input > li.form-group {}
.list_form_input > li.form-group .form-label {font-weight: 600;font-family: 'Inter';font-size: 13px;color: #111;}
.list_form_input > li.form-group .instruction {display:block;font-size: 13px;font-family: 'Inter';margin-bottom: 15px;line-height: 18px;opacity: .8;}
.list_form_input > li.form-group .instruction .sub {display:block;font-size: 12px;opacity: .7;}
.list_form_input > li.form-group input, .list_form_input > li .form-group select {}

.search-dropdown-create {justify-content:unset!important;}
.search-dropdown-create i {position: relative!important;margin: 0!important;font-weight: 100!important;}

#dept-filter, #cat-filter, #leave-year {width: 250px;margin-right:0px;}
.tab_container {display:flex;flex-wrap:wrap;background:transparent;border: 1px solid #ced0d1;border-radius: 4px;overflow: hidden;height: 38px;gap: 0px;align-items: center;}
.tab_container .tab_btn {display: flex;align-items: center;gap: 5px;font-family: 'Inter';color: #273042;font-size: 12px;line-height: 18px;font-weight: 500;height: 38px;min-width: 40px;padding: 10px 15px;border:0;border-left: 1px solid #ced0d1;background:#fff;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.tab_container .tab_btn:nth-child(1) {border-left: 0;}
.tab_container .tab_btn i {font-size: 14px;font-weight: 500;}
.tab_container .tab_btn.active, .tab_container .tab_btn:hover {background:rgb(36 73 224 / 15%);cursor:pointer;color: #2449e0;}
.tab_container .btn {font-family: 'Inter';font-size: 12px;line-height: 18px;font-weight: 400;height: 38px;min-width: 40px;padding: 10px 15px;}
.tab_container .btn .btn_content {width:calc(100% - 23px);/*float:left;*/line-height:18px;}
.tab_container .btn .rc-tab-badge {font-size: 10px;line-height: 18px;font-weight: 700;border-radius: 50%;background: #ff3527;color: #fff;width: 18px;height:18px;text-align: center;display:inline-block;float:right;margin-left: 5px;}
.tab_container a.btn {font-family: 'Inter';font-size: 12px;line-height: 12px;font-weight: 400;height: 42px;min-width: 40px;padding: 10px 15px;}
.tab_container .btn i {margin-right:5px;line-height:18px;float:left;}
.tab_container .btn.btn-primary, .tab_container .btn.active, .tab_container .btn:hover, .tab_container .btn.btn-outline.active, .tab_container .btn.btn-outline:hover {background: #111;font-size: 12px;line-height: 12px;color:#fff;box-shadow: none;border-radius: 0;height: 42px;gap: unset;padding: 10px 15px;border-top: 0;border-right: 0;border-left: 1px solid #111;opacity: 1;}
.tab_container .btn:hover i, .tab_container .btn.active i {color:#fff!important;}
.tab_container .btn.btn-outline {background: transparent;color: #111;gap: 0;font-family: 'Inter';font-weight: 400;letter-spacing: 0;border-left: 1px solid #ced0d1;border-radius: 0;}
.tab_container .btn:nth-child(1).btn-outline {border-left:0;}

/* Password input with toggle */
.input-with-toggle { position: relative; display: flex; align-items: center; }
.input-with-toggle .form-input { width: 100%; padding-right: 40px; }
.input-toggle-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--t3); display: flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.input-toggle-btn:hover { color: var(--t); }
.input-toggle-btn svg { width: 16px; height: 16px; pointer-events: none; }

/* ── TABS ───────────────────────────────────────────────── */
/* Universal tab strip — used for settings, forms, profiles */
.form-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid #ced0d1;
  margin-bottom: 24px;
  overflow-x: auto; scrollbar-width: none;
}
.form-tabs::-webkit-scrollbar { display: none; }
.form-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--t3); border: none; background: none;
  cursor: pointer; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: var(--transition);
  margin-bottom: -1px; text-decoration: none;
}
.form-tab:hover  { color: var(--t); }
.form-tab.active { color: #111; border-bottom-color: #111; }
.tab-panel        { display: none; }
.tab-panel.active { display: block; }

/* ── TABLES ─────────────────────────────────────────────── */
.table-panel {background: #fff;border: 0px solid #ced0d1;border-radius: 0px;overflow: hidden;box-shadow: none;margin-bottom:0px;}
.table-panel.no_border {background: transparent;border: 0;border-radius: 0;overflow: hidden;box-shadow: none;margin-bottom: 0;}
.table-toolbar {
  padding: 14px 20px; border-bottom: 1px solid #ced0d1;
  display: flex; align-items: center; gap: 10px; background: var(--surface);
}
.table-body { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead tr { background: var(--surface2); border-bottom: 1px solid #ced0d1; }
.data-table th {
  padding: 10px 16px; text-align: left;
  font-family: 'Inter'; font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--t4); white-space: nowrap;
}
.data-table td { padding: 5px 10px; color: var(--t2); border-bottom: 1px solid #ced0d1; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface2); }
.td-bold { font-weight: 600; color: var(--t); }
.td-code {min-width: 34px;height: 34px;font-family: 'Inter';font-size: 12px;font-weight: 600;padding: 0 5px;line-height: 34px;color: #5a433b;background: rgb(255 193 7 / 25%);text-align: center;border-radius: 4px;border: 1px solid #FFC107;display: inline-block;}
.td-actions { display: flex; gap: 6px; }

.table-search { position: relative; flex: 1;margin-right: 0px;min-width:250px;max-width:250px;flex:1}
.table-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #111; pointer-events: none;margin-right: 10px; }
.table-search-icon i {}
.table-search input {height: 38px; padding: 0 10px 0 35px;background: #fff; border: 1px solid #96a5ad;font-size: 12px; color: var(--t); outline: none; width: 100%;transition: var(--transition);}
.table-search input:focus {border-color: #dbdbdb!important;box-shadow: none !important;}
.dataTables_wrapper .dataTables_info {font-size: 12px;opacity: .8;font-size: 12px;opacity: .6;padding-top:15px!important;padding: 15px;}
.dataTables_wrapper .dataTables_paginate {padding-top: 15px!important;padding: 15px;}

/* ── TAGS / BADGES ──────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-family: 'Inter'; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; border: 1px solid transparent; white-space: nowrap;
}
.tag-green  {background: #16a34a;color: #fff;}
.tag-red    { background: var(--danger-light);  color: var(--danger-h);  border-color: rgba(239,68,68,.2);  }
.tag-amber  { background: var(--warning-light); color: var(--warning-h); border-color: rgba(245,158,11,.2); }
.tag-blue   { background: rgba(59,130,246,.2); color: #2449e0; border-color: rgba(59,130,246,.2); }
.tag-purple { background: var(--purple-light);  color: var(--purple);    border-color: rgba(139,92,246,.2); }
.tag-gray   { background: var(--surface3);      color: var(--t3);        border-color: var(--border); }
.tag-pink   { background: var(--pink-light);    color: var(--pink);      border-color: rgba(236,72,153,.2); }
.tag-orange { color: #F44336; }

.status.tag-green {color: #16a34a;font-size: 12px;font-weight: 600;background:transparent;}

/* ── FLASH MESSAGES ─────────────────────────────────────── */
.flash {padding: 15px; border-radius: 8px;font-size: 14px;margin-bottom: 10px; border: 1px solid transparent;display:grid; grid-template-columns: 1fr 350px;align-items:center;justify-content:space-between;gap: 20px;}
.flash.full {display:block;}
.flash .content_section {display:flex;align-items:center;flex:1;gap: 5px;align-items:flex-start;}
.flash .button_section {display:flex;align-items:center;justify-content:flex-end;gap:0px;}

.flash .title {font-weight: 600;font-size: 12px;width: calc(100% - 25px);float: right;font-family: 'Inter';margin: 0;}
.flash .title .sub {display:block;font-weight: 400;color: #111;font-size: 12px;line-height: 18px;margin-top: 5px;opacity: .6;}
.flash i.alert_icon {font-size: 14px;width: 25px;text-align: left;position: relative;top: 3px;}

.flash.success {background: #e7fff3;color: #065f46;border-color: #b3f3d3;}
.flash.success .title {color:#00a28b;}
.flash.success .title > a {color:#08463d;text-decoration:none;display: block;}
.flash.success .title > .sub {color:#08463d;opacity: .8;margin-top: 0;}
.flash.success i.alert_icon {color:#00a28b;}

.flash.white_success {background: #fff;color: #065f46;border-color: #b3f3d3;}

.flash.error   { background: #fffcf1;  color: #111;  border-color:#ffcd84; }
.flash.error .title {color:#FF9800;}
.flash.error i.alert_icon {color:#FF9800;}
.flash.error .btn.primary {background: #FF9800;color: #fff;border: 1px solid #ff9800;}

.flash.info    { background: #e4f3ff;  color:#3c739e; border-color: #c5e5ff; }
.flash.info .title {color:#2774cc;}
.flash.info i.alert_icon {color:#2774cc;}

.flash.warning { background: #fff6f7; color: #111; border-color: #ffc9cf; }
.flash.warning .title {color:#dd4343;}
.flash.warning i.alert_icon {color:#dd4343;}

.flash.warning.enabled {display: flex;align-items:flex-start; gap: 10px;padding: 15px;background: #f8fafc;border-radius: 6px;border: 1px solid #ced0d1;margin-bottom: 0px;}
.flash.warning.enabled .title {color:#111;}
.flash.warning.enabled i {color:#4caf79;}

.flash.close   { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; font-size: 18px; line-height: 1; opacity: .6; }
.flash.close .title {}
.flash.close i.alert_icon {color:#FF9800;}
.flash.close:hover { opacity: 1; }

/* ── MODALS ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  width: 100%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  transform: scale(0.97) translateY(8px);
  transition: transform .22s cubic-bezier(.4,0,.2,1); overflow: hidden;
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-header { padding: 20px 30px; border-bottom: 1px solid #ced0d1; display: flex; align-items: center; gap: 10px; }
.modal-title  { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--t); flex: 1; }
.modal-close  { width: 24px; height: 24px; border-radius: var(--radius); background: none; border: none; cursor: pointer; color: var(--t3); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.modal-close i {}
.modal-close:hover { background: var(--danger-light); color: var(--danger); }
.modal-body { padding: 20px 30px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #ced0d1; display: flex; gap: 8px; justify-content: flex-end; background: var(--surface2); }

/* ── DRAWERS ────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 520px; max-width: 95vw;
  background: var(--surface);
  border-left: 1px solid #ced0d1;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 501;
  box-shadow: -4px 0 32px rgba(0,0,0,0.12);
}
.drawer.open { transform: translateX(0); }
.drawer-header { padding: 20px 24px; border-bottom: 1px solid #ced0d1; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.drawer-title  { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--t); flex: 1; }
.drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ced0d1; border-radius: 6px;
  background: none; cursor: pointer; color: var(--t2);
  transition: var(--transition);
}
.drawer-close:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.drawer-body   { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-footer { padding: 16px 24px; border-top: 1px solid #ced0d1; display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }

/* ── TOASTS ─────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9998;
}
.toast {
  background: var(--surface); border: 1px solid #ced0d1;
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 380px;
  box-shadow: var(--shadow-md);
  transform: translateX(20px); opacity: 0;
  transition: all .22s ease; font-size: 13px;
}
.toast.show    { transform: translateX(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--success); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid #111; }
.toast.warning { border-left: 3px solid var(--warning); }
.toast-icon    { font-size: 16px; flex-shrink: 0; }
.toast-msg     { flex: 1; color: var(--t); font-weight: 500; }
.toast-close   { background: none; border: none; color: var(--t3); cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; }

/* ── TOGGLES ────────────────────────────────────────────── */
/* Div-based toggle (solaris.js managed) */
.toggle {width: 42px; height: 24px;background: var(--border2); border-radius: 24px;cursor: pointer; transition: var(--transition);position: relative; flex-shrink: 0;display: inline-block;}
.toggle::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; background: #fff;
  border-radius: 50%; transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle.on { background: var(--success); }
.toggle.on::after { transform: translateX(18px); }

/* Label-based toggle (checkbox inside) */
label.toggle {top: 0px;position: relative; display: inline-block;width: 44px; height: 24px;cursor: pointer; flex-shrink: 0;}
label.toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0; }
label.toggle::after { display: none; } /* disable div-toggle pseudo */
.toggle-slider {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc; border-radius: 24px; transition: background 0.2s;
}
.toggle-slider::before {
  content: ""; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: white; border-radius: 50%;
  transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
label.toggle input:checked + .toggle-slider { background: #22c55e; }
label.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

.toggle-wrap { display: flex; align-items: flex-start; gap: 10px;border-bottom: 0px solid #d1d5db;justify-content: space-between; }
.toggle-wrap:last-child { border-bottom: none; }
.toggle-info  { flex: 1; }
.toggle-label { font-size: 13.5px; font-weight: 600; color: var(--t); }
.toggle-desc  { font-size: 12px; color: var(--t3); margin-top: 2px; }



/* ── GRIDS ──────────────────────────────────────────────── */
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-col { display: flex; flex-direction: column; gap: 16px; }

/* ── SPINNERS ───────────────────────────────────────────── */
.spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: #111; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--t3); }
.empty-state-icon { width: 60px; height: 60px; background: var(--surface3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--t4); }
.empty-state h3 {font-family: 'Inter';font-size: 14px;font-weight: 600;color: #333;margin-bottom: 0;line-height: 22px;}
.empty-state h3 .sub  {display:block;font-size: 12px;font-weight:400;opacity:.6;}

/* ── PAGINATION ─────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; padding: 14px 20px; border-top: 1px solid #ced0d1; flex-wrap: wrap; }
.page-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #ced0d1; border-radius: var(--radius); background: var(--surface); color: var(--t2); font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: var(--transition); }
.page-btn:hover { background: var(--surface3); color: var(--t); border-color: var(--border2); }
.page-btn.active { background: #111; color: #fff; border-color: #111; }
.page-info { font-family: 'Inter'; font-size: 10.5px; color: var(--t4); margin-left: 8px; }

/* ── SETUP WIZARD ───────────────────────────────────────── */
.setup-body  { background: var(--bg); }
.setup-shell { display: flex; min-height: 100vh; }
.setup-left  { width: 280px; min-width: 280px; background: var(--surface); border-right: 1px solid #ced0d1; padding: 32px 24px; display: flex; flex-direction: column; }
.setup-logo  { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.setup-logo-icon { width: 40px; height: 40px; background: #111; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.setup-logo-icon svg { width: 20px; height: 20px; }
.setup-logo-name { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--t); }
.setup-steps { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.setup-step  { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius); transition: var(--transition); }
.setup-step.active { background: var(--primary-light); }
.step-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Inter'; font-size: 11px; font-weight: 700; background: var(--border); color: var(--t3); flex-shrink: 0; transition: var(--transition); }
.setup-step.active .step-num { background: #111; color: #fff; }
.setup-step.done   .step-num { background: var(--success); color: #fff; }
.step-label { font-size: 13px; font-weight: 600; color: var(--t3); transition: var(--transition); flex: 1;}
.setup-step.active .step-label { color: #111; }
.setup-step.done   .step-label { color: var(--success-h); }
.step-desc { font-size: 11.5px; color: var(--t4); margin-top: 1px; }
.setup-left-footer { font-size: 11px; color: var(--t4); line-height: 1.7; }
.setup-right { flex: 1; padding: 40px; overflow-y: auto; }
.setup-card { background: var(--surface); border: 1px solid #ced0d1; border-radius: var(--radius-xl); padding: 32px; max-width: 560px; box-shadow: var(--shadow-card); }
.setup-card h2 { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--t); margin-bottom: 6px; }
.setup-card .sub { font-size: 13.5px; color: var(--t3); margin-bottom: 26px; }
.setup-notice { background: var(--primary-light); border: 1px solid rgba(59,130,246,.2); border-radius: var(--radius); padding: 12px 14px; font-size: 12.5px; color: var(--primary-h); display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; }
.req-check { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ced0d1; font-size: 13px; }
.req-check:last-child { border-bottom: none; }
.req-pass { color: var(--success); font-family: 'Inter'; font-size: 11px; font-weight: 700; }
.req-fail { color: var(--danger);  font-family: 'Inter'; font-size: 11px; font-weight: 700; }

/* ── UTILITY CLASSES ────────────────────────────────────── */
/* Layout */
.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-shrink-0   { flex-shrink: 0; }
.min-w-0         { min-width: 0; }
.w-full          { width: 100%; }
.h-full          { height: 100%; }

/* Position */
.relative { position: relative; }
.sticky-left { position: sticky; left: 0; z-index: 1; background: var(--surface); }

/* Text */
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap      { white-space: nowrap; }
.font-mono   { font-family: 'Inter'; }
.font-600    { font-weight: 600; }
.font-700    { font-weight: 700; }

/* Text sizes */
.text-9  { font-size: 9px; }
.text-10 { font-size: 10px; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-xs { font-size: 11px; color: var(--t4); }

/* Text colors */
.text-primary   { color: var(--t); }
.text-secondary { color: var(--t3); }
.text-muted     { color: var(--t4); }
.text-green     { color: var(--green); }
.text-red       { color: var(--red); }
.text-amber     { color: var(--amber); }
.text-blue      { color: var(--blue); }
.text-purple    { color: var(--purple); }

/* Gaps */
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 10px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.ml-auto { margin-left: auto; }

/* Padding */
.p-12  { padding: 12px; }
.p-14  { padding: 14px; }
.p-16  { padding: 16px; }
.p-20  { padding: 20px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8  { padding-top: 8px;  padding-bottom: 8px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }

/* Margin */
.display-none { display: none !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* Borders */
.border-b { border-bottom: 1px solid #ced0d1; }
.border-t  { border-top: 1px solid #ced0d1; }

/* Misc */
.rounded         { border-radius: var(--radius); }
.rounded-lg      { border-radius: var(--radius-lg); }
.rounded-full    { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer  { cursor: pointer; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { position: fixed; left: -240px; top: 0; bottom: 0; box-shadow: var(--shadow-lg); transition: left .28s cubic-bezier(.4,0,.2,1); z-index: 200; }
  .sidebar.open { left: 0; }
  .sb-toggle { display: flex; }
  .page-content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .setup-left { display: none; }
  .setup-right { padding: 24px; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SOLARIS — Payslip Styles
   Append this block to solaris.css
   ============================================================ */

/* ── Page & Print Setup ──────────────────────────────────── */
body.ps-page {
    background: #f0ede8;
    font-family: var(--font, 'Inter', sans-serif);
    font-size: 13px;
    color: #1a1a1a;
    margin: 0;
    padding: 20px 0 40px;
}

@media print {
    body.ps-page {
        background: #fff;
        padding: 0;
    }
    .no-print {
        display: none !important;
    }
    .payslip {
        margin: 0;
        box-shadow: none;
        border: none;
        border-radius: 0;
    }
}

/* ── Print Bar ───────────────────────────────────────────── */
.ps-print-bar {
    max-width: 860px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
}

.ps-btn-print {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 36px;
    background: #1a56db;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.ps-btn-print:hover {
    background: #1648c0;
}

.ps-btn-back {
    padding: 0 16px;
    height: 36px;
    border: 1px solid #ced0d1;
    border-radius: 7px;
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    display: flex;
    align-items: center;
    background: #fff;
    transition: border-color .15s, color .15s;
}

.ps-btn-back:hover {
    border-color: #bbb;
    color: #111;
}

/* ── Payslip Card ────────────────────────────────────────── */
.payslip {
    max-width: 860px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.ps-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 28px 20px;
    border-bottom: 3px solid #1a56db;
    background: #fff;
}

.ps-logo {
    height: 36px;
    display: block;
    margin-bottom: 8px;
}

.ps-company-name {
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: #1a56db;
    line-height: 1.2;
}

.ps-company-addr {
    font-size: 11px;
    color: #777;
    margin-top: 4px;
    line-height: 1.6;
}

.ps-period {
    text-align: right;
}

.ps-period-label {
    font-size: 11px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ps-period-value {
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2px;
}

.ps-period-sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #888;
    margin-top: 2px;
}

/* ── Employment Type Badge ───────────────────────────────── */
.ps-emp-type-badge {
    display: inline-block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.progress_bar {border-radius:20px;height:10px;background:#ecf0f1;transition:width .4s ease;overflow:hidden;margin: 15px 0;}
.progress_bar .progress_bar_fill {border-radius:20px;height:10px;transition:width .4s ease;background: #10B981; background: linear-gradient(90deg, rgba(16, 185, 129, 1) 0%, rgba(81, 207, 165, 1) 35%, rgba(106, 222, 183, 1) 100%);transform:scaleX(0);transform-origin:left center;animation:growProgress 2.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;animation-delay:1.5s;}
.progress_bar.blue {background:#fff;}
.progress_bar.blue .progress_bar_fill {background: #2449e0;background: #10B981; background:linear-gradient(90deg, rgb(36 73 224) 0%, rgb(83 113 235) 35%, rgb(156 176 255) 100%);}
@keyframes growProgress{
    from{
        transform:scaleX(0);
    }
    to{
        transform:scaleX(1);
    }
}

.title_container {gap: 5px;align-items: center;justify-content: space-between;}
.title {font-size: 13px;font-weight: 600;display: block;margin-bottom: 10px;}
.title .sub {font-size: 12px;font-weight: 400;display: block;opacity:.6;margin-top: 5px;}
.progress_header_title_section {}
.progress_header_title_section .title {font-size: 12px;font-weight: 600;display: block;width: 50%;float: left;margin: 0;}
.progress_header_title_section .sub_title {font-size: 12px;font-weight: 400;display: block;width: 50%;float: right;text-align: right;}
.guide_text {font-size: 12px;opacity: .8;}

.view_small_btn {display: inline-flex;gap: 5px;align-items: center;padding: 8px 10px;border-radius: 4px;border: 1px solid #111;background: #fff;font-size: 12px;line-height: 12px;font-family: 'Inter';font-weight: 400;color: #1b4b87;text-decoration: none;transition: all .15s;cursor:pointer;}
.view_small_btn.red, .btn.red {background:#ef4444;border:1px solid #ef4444;color:#fff;}
.view_small_btn.red:hover, .btn.red:hover {background:#ef4444;color:#fff!important;border:1px solid #ef4444;}
.view_small_btn i {position: relative;width: 12px;}
.view_small_btn:hover {background: #111;border:1px solid #111;color:#fff;}
.view_small_btn:hover i {}

.progress_container {}
.converted_opportunity_alert {}
.converted_opportunity_alert .view_small_btn.primary.dead.green {background: #1e8b5f;border: #1e8b5f;color: #fff;}

/*.table_view, .employee_list_view {background:var(--surface);border:1px solid #ced0d1;border-radius:6px;overflow:hidden;}*/
.table_view.data_table {background: transparent;border:0;border-radius:0px;font-family: 'Inter';font-size: 13px;}
.table_view.data_table .list_table {background:var(--surface);border-bottom:1px solid #d9d9d9;overflow:hidden;margin-bottom:0px;border-collapse: separate;border-spacing: 0;width: 100%;}
.table_head, table.dataTable thead th, table.dataTable tfoot th {border-bottom:1px solid #cfcfcf;background:#cadff7;font-size: 12px;font-family: 'Inter';color:#0c314e;font-weight: 500!important;height: 17px;}
.table_view .list_table .table_head .col {padding: 10px 15px;border-left:1px solid #a6c4e6;border-top: 1px solid #a6c4e6;border-bottom: 1px solid #a6c4e6;font-weight: 500;}
.table_view .list_table .table_body .col {padding: 7px 15px;border-left: 1px solid #ced0d1;}
.table_view .list_table .col {}
.table_view .list_table .col1 {border-left: 0;}
.employee_list_view .employee_list_table .table_head .col {padding: 10px 15px;border-right: 1px solid #ced0d1;height: 36px;}
.employee_list_view .employee_list_table .table_body .col {padding: 7px 15px;border-right: 1px solid #ced0d1;height:50px;}
.table_view .list_table .col.col1 {border-left: 0px solid #ced0d1;}
.employee_list_view .employee_list_table {}
.attn_list_view .employee_list_table .table_body {}
.attn_list_view .employee_list_table .table_body .att_dept_row {}
.attn_list_view .employee_list_table .col1, .attn_list_view .employee_list_table .col2, .attn_list_view .employee_list_table .col3, .attn_list_view .employee_list_table .col4, .attn_list_view .employee_list_table .col5, .attn_list_view .employee_list_table .col6, .attn_list_view .employee_list_table .col7, .attn_list_view .employee_list_table .col8, .attn_list_view .employee_list_table .col9, .attn_list_view .employee_list_table .col10, .attn_list_view .employee_list_table .col11 {padding: 7px 15px;border-left: 1px solid #ced0d1;float:left;}


.employee_list_view .employee_list_table .col1 {width: 75px;float: left;text-align: center;}
.employee_list_view .employee_list_table .col2 {width: 15%;float: left;}
.employee_list_view .employee_list_table .col3 {width: 15%;float: left;text-align: left;}
.employee_list_view .employee_list_table .col4 {width: 15%;float: left;}
.employee_list_view .employee_list_table .col5 {width: 15%;float: left;}

.employee_list_view .employee_list_table .col6 {width: 5%;float: left;}
.employee_list_view .employee_list_table .col7 {width: 10%;float: left;text-align: center;}
.employee_list_view .employee_list_table .col8 {width: 10%;float: left;text-align: center;}
.employee_list_view .employee_list_table .col9 {width: 10%;float: right;text-align: center;border-right: 0!important;}
.employee_list_view .employee_list_table .col9 .view_small_btn {position:relative;top:0px;cursor:pointer;}

.attn_list_view .employee_list_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.attn_list_view .employee_list_table .col2 {width: calc(100% - 1310px);float: left;}
.attn_list_view .employee_list_table .col3 {width: 110px;float: left;text-align: center;}
.attn_list_view .employee_list_table .col4 {width: 160px;float: left;}
.attn_list_view .employee_list_table .col4 .btn.sb  {background: rgb(255 87 34 / 15%);color: #FF5722;border:1px solid rgb(255 87 34 / 15%);-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.attn_list_view .employee_list_table .col4 .btn.sb:hover {background: #FF5722;color: #fff;border:1px solid #FF5722;}
.attn_list_view .employee_list_table .col5 {width: 85px;float: left;}
.attn_list_view .employee_list_table .col5 .btn.wfh {background: rgb(103 58 183 / 10%);border-color: #d7c1ff;color: #a16cff;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.attn_list_view .employee_list_table .col5 .btn.wfh:hover, .attn_list_view .employee_list_table .col5 .btn.wfh.act-WFH {background: #a16cff;border-color: #a16cff;color: #fff;}
.attn_list_view .employee_list_table .col6 {width: 170px;float: left;text-align: center;}
.attn_list_view .employee_list_table .col7 {width: 260px;float: left;}
.attn_list_view .employee_list_table .col7 .timing_container {}
.attn_list_view .employee_list_table .col8 {width: 120px;float: left;text-align: center;}
.attn_list_view .employee_list_table .col9 {width: 120px;float: left;text-align: center;}
.attn_list_view .employee_list_table .col10 {width: 120px;float: left;text-align: center;}
.attn_list_view .employee_list_table .col11 {width: 90px;float: right;text-align: center;}
.attn_list_view .employee_list_table .col11 .icon_btn {margin:0 auto;background: transparent;border: 0;padding: 0;position: relative;top: 5px;}
.attn_list_view .employee_list_table .col11 .icon_btn i {font-size: 22px;color: #5b7089;opacity: .5;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.attn_list_view .employee_list_table .col11 .icon_btn:hover {cursor:pointer;}
.attn_list_view .employee_list_table .col11 .icon_btn:hover i {opacity: 1;}

#tab-departments .table-panel {border:0;}
.department_list_view .employee_list_table .col1 {border-left: 0 !important;}
.department_list_view .employee_list_table .table_head .col {padding: 8px 15px;border-left: 0px solid rgb(52 105 231 / 10%);}
.department_list_view .employee_list_table .table_body .col {padding: 7px 15px;border-left: 0px solid rgb(52 105 231 / 10%);min-height:48px;}
.department_list_view .employee_list_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left: 0 !important;}
.department_list_view .employee_list_table .col2 {width: calc(100% - 955px);float: left;}
.department_list_view .employee_list_table .col3 {width: 150px;float: left;text-align: center;}
.department_list_view .employee_list_table .col4 {width: 220px;float: left;}
.department_list_view .employee_list_table .col5 {width: 220px;float: left;}
.department_list_view .employee_list_table .col6 {width: 120px;float: left;text-align: center;}
.department_list_view .employee_list_table .col6 .tag {font-size: 12px;background: rgb(238 246 255);border: 1px solid #ced0d1;color: #111;border-radius: 50%;padding: 0;width: 34px;height: 34px;line-height: 34px;text-align: center;display: block;margin: 0 auto;}
.department_list_view .employee_list_table .col7 {width: 170px;float: right;text-align: center;}
.department_list_view .employee_list_table .col7 .view_small_btn {position: relative;top: 4px;}
.department_list_view .employee_list_table .col7 .view_small_btn i {}
.department_list_view .employee_list_table .col7 .view_small_btn:hover {cursor:pointer;}
.department_list_view .employee_list_table .col7 .view_small_btn:hover i {opacity: 1;}

.designatiin_list_view .employee_list_table .col1 {border-left: 0 !important;}
.designatiin_list_view .employee_list_table .table_head .col {padding: 8px 15px;border-left: 0px solid rgb(52 105 231 / 10%);}
.designatiin_list_view .employee_list_table .table_body .col {padding: 7px 15px;border-left: 0px solid rgb(52 105 231 / 10%);min-height:48px;}
.designatiin_list_view .employee_list_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left: 0 !important;}
.designatiin_list_view .employee_list_table .col2 {width: calc(100% - 1015px);float: left;}
.designatiin_list_view .employee_list_table .col3 {width: 200px;float: left;text-align: center;}
.designatiin_list_view .employee_list_table .col4 {width: 250px;float: left;}
.designatiin_list_view .employee_list_table .col4 .employee_name_row {}
.designatiin_list_view .employee_list_table .col4 .employee_name_row .avatar_container {}
.designatiin_list_view .employee_list_table .col4 .employee_name_row .avatar_container .avatar {}
.designatiin_list_view .employee_list_table .col4 .employee_name_row .avatar_container .emp-stack-fb {}
.designatiin_list_view .employee_list_table .col4 .employee_name_row .employee_name_container {}
.designatiin_list_view .employee_list_table .col4 .employee_name_row .employee_name_container .title {}
.designatiin_list_view .employee_list_table .col4 .employee_name_row .employee_name_container .sub {}

.designatiin_list_view .employee_list_table .col5 {width: 100px;float: left;}
.designatiin_list_view .employee_list_table .col6 {width: 220px;float: left;text-align: center;}
.designatiin_list_view .employee_list_table .col6 .tag {font-size: 12px;background: rgb(238 246 255);border: 1px solid #ced0d1;color: #111;border-radius: 50%;padding: 0;width: 34px;height: 34px;line-height: 34px;text-align: center;display: block;margin: 0 auto;}
.designatiin_list_view .employee_list_table .col7 {width: 170px;float: right;text-align: center;}
.designatiin_list_view .employee_list_table .col7 .view_small_btn {position: relative;top: 4px;}
.designatiin_list_view .employee_list_table .col7 .view_small_btn i {}
.designatiin_list_view .employee_list_table .col7 .view_small_btn:hover {cursor:pointer;}
.designatiin_list_view .employee_list_table .col7 .view_small_btn:hover i {opacity: 1;}

.table_body .data_row:nth-child(1) {border-top:0;}
.attn_list_view .employee_list_table .table_body .data_row .col {height:50px;}
.attn_list_view .employee_list_table .table_body .data_row .col .btn {margin:0 auto;min-width: 36px;text-align: center;display: block;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.attn_list_view .employee_list_table .table_body .data_row .col3 .btn.absent {background: rgb(255 0 0 / 10%);color: #bd1010;border: 1px solid #ffb9b9;}
.attn_list_view .employee_list_table .table_body .data_row .col3 .btn.present {background: #E1F5EE;border: 1px solid #5DCAA5;color: #085041;}
.attn_list_view .employee_list_table .table_body .data_row .col3 .btn.present:hover, .attn_list_view .employee_list_table .table_body .data_row .col3 .btn.present.act-P {background: #085041;border: 1px solid #085041;color: #fff;}
.attn_list_view .employee_list_table .table_body .data_row .col3 .btn.absent:hover, .attn_list_view .employee_list_table .table_body .data_row .col3 .btn.absent.act-A {background: #ff2b2b;color: #fff;border: 1px solid #ff2b2b;}
.attn_list_view .employee_list_table .table_body .data_row .col3 .btn i {}
.attn_list_view .employee_list_table .table_body .data_row .col .btn i {font-weight: 300;}
.attn_list_view .employee_list_table .table_body .data_row .col .btn.act-CL, .attn_list_view .employee_list_table .table_body .data_row .col .btn.act-EL, .attn_list_view .employee_list_table .table_body .data_row .col .btn.act-SL {background: #FF5722;color: #fff;border:1px solid #FF5722;}
.attn_list_view .employee_list_table .table_body .data_row .col .btn.act-CL i, .attn_list_view .employee_list_table .table_body .data_row .col .btn.act-EL i, .attn_list_view .employee_list_table .table_body .data_row .col .btn.act-SL i {font-weight: 600;}

.table_view .list_table.asset_table .table_head .col {}
.table_view .list_table.asset_table .table_body .col {height:50px;}
.table_view .list_table.asset_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.asset_table .col2 {width: calc(100% - 1325px);float: left;}
.table_view .list_table.asset_table .col3 {width: 170px;float: left;}
.table_view .list_table.asset_table .col4 {width: 200px;float: left;}
.table_view .list_table.asset_table .col4 .btn.sb  {background: rgb(255 87 34 / 15%);color: #FF5722;border:1px solid rgb(255 87 34 / 15%);-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.table_view .list_table.asset_table .col4 .btn.sb:hover {background: #FF5722;color: #fff;border:1px solid #FF5722;}
.table_view .list_table.asset_table .col5 {width: 170px;float: left;}
.table_view .list_table.asset_table .col6 {width: 170px;float: left;}
.table_view .list_table.asset_table .col7 {width: 150px;float: left;}
.table_view .list_table.asset_table .col7 .timing_container {}
.table_view .list_table.asset_table .col8 {width: 220px;float: left;text-align: center;}
.table_view .list_table.asset_table .col9 {width: 170px;float: right;text-align: center;}

.table_view .list_table.emp_asset_table .table_head .col {}
.table_view .list_table.emp_asset_table .table_body .col {height:50px;}
.table_view .list_table.emp_asset_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.emp_asset_table .col2 {width: calc(100% - 1125px);float: left;}
.table_view .list_table.emp_asset_table .col3 {width: 200px;float: left;}
.table_view .list_table.emp_asset_table .col4 {width: 170px;float: left;}
.table_view .list_table.emp_asset_table .col5 {width: 170px;float: left;}
.table_view .list_table.emp_asset_table .col6 {width: 170px;float: left;}
.table_view .list_table.emp_asset_table .col7 {width: 170px;float: left;}
.table_view .list_table.emp_asset_table .col8 {width: 170px;float: right;text-align: center;}

.table_view .list_table.asset_config_table .table_head .col {}
.table_view .list_table.asset_config_table .table_body .col {height: 42px;}
.table_view .list_table.asset_config_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.asset_config_table .col2 {width: calc(100% - 865px);float: left;}
.table_view .list_table.asset_config_table .col3 {width: 170px;float: left;text-align: center;}
.table_view .list_table.asset_config_table .col4 {width: 200px;float: left;text-align: center;}
.table_view .list_table.asset_config_table .col5 {width: 130px;float: left;text-align: center;}
.table_view .list_table.asset_config_table .col6 {width: 120px;float: left;text-align: center;}
.table_view .list_table.asset_config_table .col7 {width: 170px;float: right;text-align: center;} 
 
.table_view .list_table.jobs_table .table_head .col {} 
.table_view .list_table.jobs_table .table_body .col {height: 54px;}
.table_view .list_table.jobs_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.jobs_table .col2 {width: calc(100% - 1045px);float: left;}
.table_view .list_table.jobs_table .col3 {width: 220px;float: left;}
.table_view .list_table.jobs_table .col4 {width: 200px;float: left;text-align: center;}
.table_view .list_table.jobs_table .col5 {width: 130px;float: left;text-align: center;}
.table_view .list_table.jobs_table .col6 {width: 120px;float: left;text-align: center;}
.table_view .list_table.jobs_table .col7 {width: 300px;float: right;text-align: center;}

.table_view .list_table.invited_can_table .table_head .col {}
.table_view .list_table.invited_can_table .table_body .col {height: 52px;}
.table_view .list_table.invited_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.invited_can_table .col2 {width: calc(100% - 1435px);float: left;}
.table_view .list_table.invited_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.invited_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.invited_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.invited_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.invited_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.invited_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.invited_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.invited_can_table .col8 {width: 170px;float: right;text-align: center;} 
.table_view .list_table.invited_can_table .col8 .view_small_btn {}
.table_view .list_table.invited_can_table .col8 .view_small_btn i {margin-left: 0;}

.table_view .list_table.applied_can_table .table_head .col {}
.table_view .list_table.applied_can_table .table_body .col {height: 52px;}
.table_view .list_table.applied_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.applied_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.applied_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.applied_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.applied_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.applied_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.applied_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.applied_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.applied_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.applied_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.ai_screening_can_table .table_head .col {}
.table_view .list_table.ai_screening_can_table .table_body .col {height: 52px;}
.table_view .list_table.ai_screening_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.ai_screening_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.ai_screening_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.ai_screening_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.ai_screening_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.ai_screening_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.ai_screening_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.ai_screening_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.ai_screening_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.ai_screening_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.round2_eligible_can_table .table_head .col {}
.table_view .list_table.round2_eligible_can_table .table_body .col {height: 52px;}
.table_view .list_table.round2_eligible_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.round2_eligible_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.round2_eligible_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.round2_eligible_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.round2_eligible_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.round2_eligible_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.round2_eligible_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.round2_eligible_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.round2_eligible_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.round2_eligible_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.selected_can_table .table_head .col {}
.table_view .list_table.selected_can_table .table_body .col {height: 52px;}
.table_view .list_table.selected_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.selected_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.selected_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.selected_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.selected_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.selected_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.selected_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.selected_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.selected_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.selected_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.offer_issued_can_table .table_head .col {}
.table_view .list_table.offer_issued_can_table .table_body .col {height: 52px;}
.table_view .list_table.offer_issued_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.offer_issued_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.offer_issued_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.offer_issued_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.offer_issued_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.offer_issued_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.offer_issued_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.offer_issued_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.offer_issued_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.offer_issued_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.rejected_can_table .table_head .col {}
.table_view .list_table.rejected_can_table .table_body .col {height: 52px;}
.table_view .list_table.rejected_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.rejected_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.rejected_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.rejected_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.rejected_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.rejected_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.rejected_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.rejected_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.rejected_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.rejected_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.onboarded_can_table .table_head .col {}
.table_view .list_table.onboarded_can_table .table_body .col {height: 52px;}
.table_view .list_table.onboarded_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.onboarded_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.onboarded_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.onboarded_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.onboarded_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.onboarded_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.onboarded_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.onboarded_can_table .col6 .progress_bar .progress_bar_fill {} 
.table_view .list_table.onboarded_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.onboarded_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.dropout_can_table .table_head .col {}
.table_view .list_table.dropout_can_table .table_body .col {height: 52px;}
.table_view .list_table.dropout_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.dropout_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.dropout_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.dropout_can_table .col4 {width: 400px;float: left;}
.table_view .list_table.dropout_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.dropout_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.dropout_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.dropout_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.dropout_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.dropout_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.cancelled_can_table .table_head .col {}
.table_view .list_table.cancelled_can_table .table_body .col {height: 52px;}
.table_view .list_table.cancelled_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.cancelled_can_table .col2 {width: calc(100% - 1485px);float: left;}
.table_view .list_table.cancelled_can_table .col3 {width: 200px;float: left;}
.table_view .list_table.cancelled_can_table .col4 {width: 400px;float: left;} 
.table_view .list_table.cancelled_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.cancelled_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.cancelled_can_table .col6 .progress_bar {margin: 5px 0;}
.table_view .list_table.cancelled_can_table .col6 .progress_bar .progress_bar_fill {}
.table_view .list_table.cancelled_can_table .col7 {width: 220px;float: left;} 
.table_view .list_table.cancelled_can_table .col8 {width: 220px;float: right;text-align: center;} 

.table_view .list_table.interviews_can_table .table_head .col {}
.table_view .list_table.interviews_can_table .table_body .col {height: 52px;}
.table_view .list_table.interviews_can_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.interviews_can_table .col2 {width: 200px;float: left;}
.table_view .list_table.interviews_can_table .col3 {width: calc(100% - 1535px);float: left;}
.table_view .list_table.interviews_can_table .col4 {width: 300px;float: left;}
.table_view .list_table.interviews_can_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.interviews_can_table .col6 {width: 200px;float: left;}
.table_view .list_table.interviews_can_table .col7 {width: 160px;float: left;} 
.table_view .list_table.interviews_can_table .col8 {width: 130px;float: left;} 
.table_view .list_table.interviews_can_table .col9 {width: 200px;float: left;} 
.table_view .list_table.interviews_can_table .col10 {width: 100px;float: right;text-align: center;} 

.table_view .list_table.leave_application_table .table_head .col {}
.table_view .list_table.leave_application_table .table_body .col {height: 52px;}
.table_view .list_table.leave_application_table .col1 {width: 75px;float: left;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;}
.table_view .list_table.leave_application_table .col2 {width: 200px;float: left;}
.table_view .list_table.leave_application_table .col3 {width: calc(100% - 1045px);float: left;}
.table_view .list_table.leave_application_table .col4 {width: 300px;float: left;}
.table_view .list_table.leave_application_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.leave_application_table .col6 {width: 200px;float: left;}
.table_view .list_table.leave_application_table .col7 {width: 100px;float: right;text-align: center;} 

.table_view.data_table .list_table.whTypesTable td, .table_view.data_table .list_table.whTypesTable th {box-sizing:border-box;vertical-align:middle;}
.table_view.data_table .list_table.whTypesTable .table_head .col {border-bottom: 0;}
.table_view.data_table .list_table.whTypesTable .table_body .col {align-items:center;height: 44px;}
.table_view.data_table .list_table.whTypesTable .data_row {border: 0;}
.table_view.data_table .list_table.whTypesTable .col1 {width: 5%!important;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;justify-content:center;}
.table_view.data_table .list_table.whTypesTable .col2 {width: 8%!important;text-align: center;justify-content:center;}
.table_view.data_table .list_table.whTypesTable .col3 {width: 18%!important;}
.table_view.data_table .list_table.whTypesTable .col4 {  width:41%!important;word-break:break-word;}
.table_view.data_table .list_table.whTypesTable .col5 {width: 5%!important;text-align: center;justify-content:center;}
.table_view.data_table .list_table.whTypesTable .col6 {width: 7%!important;text-align: center;justify-content:center;}
.table_view.data_table .list_table.whTypesTable .col7 {width: 8%!important;text-align: center;justify-content:center;} 
.table_view.data_table .list_table.whTypesTable .col8 {width: 8%!important;text-align: center;justify-content:center;} 

.table_view.data_table .list_table.stockTable td, .table_view.data_table .list_table.stockTable th {box-sizing:border-box;vertical-align:middle;}
.table_view.data_table .list_table.stockTable .table_head .col {border-bottom: 0;}
.table_view.data_table .list_table.stockTable .table_body .col {align-items:center;height: 44px;}
.table_view.data_table .list_table.stockTable .data_row {border: 0;}
.table_view.data_table .list_table.stockTable .col1 {width: 5%!important;text-align: center;font-size: 12px;font-family: 'Inter';border-left:0;justify-content:center;}
.table_view.data_table .list_table.stockTable .col2 {width: 8%!important;text-align: center;justify-content:center;}
.table_view.data_table .list_table.stockTable .col3 {width: 18%!important;}
.table_view.data_table .list_table.stockTable .col4 {  width:25%!important;word-break:break-word;}
.table_view.data_table .list_table.stockTable .col5 {width: 5%!important;text-align: center;justify-content:center;}
.table_view.data_table .list_table.stockTable .col6 {width: 7%!important;text-align: center;justify-content:center;}
.table_view.data_table .list_table.stockTable .col7 {width: 8%!important;text-align: center;justify-content:center;} 
.table_view.data_table .list_table.stockTable .col8 {width: 8%!important;text-align: center;justify-content:center;} 
.table_view.data_table .list_table.stockTable .col9 {width: 8%!important;text-align: center;justify-content:center;} 
.table_view.data_table .list_table.stockTable .col10 {width: 8%!important;text-align: center;justify-content:center;} 
.table_view.data_table .list_table.stockTable .col11 {width: 8%!important;text-align: center;justify-content:center;} 

.txt_link {display:inline-block;text-decoration:none;cursor:pointer;}
.txt_link i {}

.table_body {}
.table_body .data_row {border-top: 1px solid #ced0d1;font-size: 12px;font-family: 'Inter';}
.attn_list_view .employee_list_table .table_body .data_row {border-bottom: 1px solid #ced0d1;border-top:0;}
.employee_list_view .employee_list_table .table_body .data_row:hover {cursor:pointer;}

.employee_container, .designatiin_list_view .employee_list_table .col4 .employee_name_row .employee_name_container {display:flex;align-items:center;gap:10px;}
.employee_container .avatar_container, .tp-emp-av, .designatiin_list_view .employee_list_table .col4 .employee_name_row .avatar_container .avatar {width:36px;height:36px;border-radius:6px;background:rgb(255 105 57 / 25%);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#111;flex-shrink:0;overflow:hidden;border: 1px solid #ffbda8;}
.employee_container .avatar_container .avatar {width:100%;height:100%;object-fit:cover;border-radius:0px;background-size: cover;background-position: center;background-repeat: no-repeat;}
.employee_container .employee_name_container {}
.employee_container .employee_name_container .emp_stat {display: flex;align-items: center;gap: 5px;font-size: 11px;margin-top: 5px;}
.employee_container .employee_name_container .emp_stat .emp_code {opacity: .6;}
.employee_container .employee_name_container .emp_stat .emp-tag {padding: 2px 5px;border-radius: 4px;font-size: 10px;}
.employee_container .employee_name_container .emp_stat .emp-tag.tag-newacc {background: #e7fff3;color: #065f46;border: 1px solid #acd7c1;}
.employee_container .employee_name_container .emp_stat .emp-tag.tag-nexus { background: #EEEDFE; color: #3C3489;border: 1px solid #9b93e7;font-size: 9px;}
.table_body .title {display:block;font-size: 13px;line-height: 20px;font-weight: 400;color: #111;white-space: nowrap;font-family: 'Inter';opacity: .8;}
.table_body td .title {margin-bottom: 0px!important;font-size: 12px;display:block;}
.table_body td .sub {margin-bottom: 0px!important;font-size: 12px;display:block;font-weight: 400;}
.employee_container .employee_name_container .title, .tp-emp-header .tp-emp-info .tp-emp-name-text {font-weight: 500;opacity: 1;display: block;font-size: 12px;font-weight: 400;color: #111;white-space: nowrap;font-family: 'Inter';line-height: 18px;}
.table_body .sub {display:block;font-size: 12px;line-height: 18px;font-weight: 400;color: #111;opacity:.6;white-space: nowrap;font-family: 'Inter';}
.overflow_table {overflow-x: auto;}
.bulk_emp_table {}
.bulk_emp_table .col1 {width: 5% !important;text-align: center;}
.bulk_emp_table .col2 {}
.bulk_emp_table .col3 {}
.bulk_emp_table .col4 {}
.bulk_emp_table .col5 {}
.bulk_emp_table .col6 {}
.bulk_emp_table .col7 {}
.bulk_emp_table .col8 {}

.employee_grid_view {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.emp_card_view {background:#fff;border:1px solid #ced0d1;border-radius:6px;overflow:hidden;cursor:pointer;transition:all .18s ease;text-align:center;}
.emp_avatar {margin: 30px auto 10px;width:60px;height:60px;border-radius:50%;border:0px solid var(--surface);background:#ccc;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;}
.emp_content {}
.emp_content .emp_name {font-size:13px;font-family: 'Inter';font-weight:600;color:var(--t);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emp_content .emp_name .sub {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.emp_content .emp_status {margin-bottom:12px;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;background:<?= $stBg ?>;color:<?= $stColor ?>}
.emp_content .emp_dept {font-size:11.5px;color:var(--t3);margin-bottom:4px;}

.designations_table .col1 {width: 5%;float: left;text-align: center;}
.designations_table .col2 {width: 20%;float: left;}
.designations_table .col3 {width: 20%;float: left;text-align: left;}
.designations_table .col4 {width: 20%;float: left;}
.designations_table .col5 {width: 5%;float: left;text-align: center;}
.designations_table .col6 {width: 20%;float: left;}
.designations_table .col7 {width: 10%;float: right;text-align: center;border-right: 0 !important;}
.designations_table .col7 .view_small_btn {position: relative;top: 3px;cursor:pointer;}

.designations_table .table_head .col1, .designations_table .table_head .col2, .designations_table .table_head .col3, .designations_table .table_head .col4, .designations_table .table_head .col5, .designations_table .table_head .col6, .designations_table .table_head .col7 {padding: 8px 15px;border-right: 1px solid #ced0d1;}
.designations_table .table_body .col1, .designations_table .table_body .col2, .designations_table .table_body .col3, .designations_table .table_body .col4, .designations_table .table_body .col5, .designations_table .table_body .col6, .designations_table .table_body .col7 {padding: 7px 15px;border-right: 1px solid #ced0d1;height:50px;}

.ps-type-salaried   { background: #e0f2fe; color: #0369a1; }
.ps-type-hourly     { background: #ecfdf5; color: #047857; }
.ps-type-daily_wage { background: #fef3c7; color: #92400e; }
.ps-type-piece_rate { background: #f3e8ff; color: #6b21a8; }
.ps-type-intern     { background: #fce7f3; color: #9d174d; }

/* ── Employee Info Grid ──────────────────────────────────── */
.ps-emp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid #ece9e4;
    background: #faf9f7;
}

.ps-emp-field {
    padding: 10px 16px;
    border-right: 1px solid #ece9e4;
}

.ps-emp-field:last-child,
.ps-emp-field:nth-child(4n) {
    border-right: none;
}

.ps-emp-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 3px;
}

.ps-emp-value {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
}

/* ── Body ────────────────────────────────────────────────── */
.ps-body {
    padding: 20px 28px 24px;
}

/* ── Attendance / Work Summary Cards ────────────────────── */
.ps-summary-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ps-sum-card {
    flex: 1;
    min-width: 90px;
    background: #f8f7f4;
    border: 1px solid #ece9e4;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
}

.ps-sum-card.ps-sum-lop {
    border-color: rgba(192,57,43,.2);
    background: #fff8f7;
}

.ps-sum-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.ps-sum-val {
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.ps-sum-card.ps-sum-lop .ps-sum-val {
    color: #c0392b;
}

/* ── Earnings & Deductions Columns ───────────────────────── */
.ps-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ps-col {
    /* each column */
}

.ps-section-title {
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #888;
    padding-bottom: 8px;
    border-bottom: 1px solid #ece9e4;
    margin-bottom: 6px;
}

.ps-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #f0ede8;
}

.ps-row:last-of-type {
    border-bottom: none;
}

.ps-row-name {
    color: #444;
    font-size: 12px;
}

.ps-row-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
}

.ps-earn { color: #1a6b3c; }
.ps-ded  { color: #c0392b; }

/* Total rows */
.ps-row-total {
    border-top: 2px solid #1a1a1a;
    border-bottom: none;
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
    font-size: 13px;
}

.ps-total-earn {
    border-top-color: #1a6b3c;
    color: #1a6b3c;
}

.ps-total-ded {
    border-top-color: #c0392b;
    color: #c0392b;
}

/* ── Net Pay Banner ──────────────────────────────────────── */
.ps-net {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a56db;
    color: #fff;
    border-radius: 9px;
    padding: 16px 22px;
    margin-top: 20px;
}

.ps-net-label {
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 600;
}

.ps-net-words {
    font-size: 11px;
    opacity: .75;
    margin-top: 2px;
}

.ps-net-amount {
    font-family: var(--display, 'Poppins', sans-serif);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ── Employer Contributions Row ──────────────────────────── */
.ps-employer-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #999;
    padding: 10px 2px 0;
    border-top: 1px solid #ece9e4;
    margin-top: 10px;
}

/* ── Footer ──────────────────────────────────────────────── */
.ps-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 28px;
    border-top: 1px solid #ece9e4;
    background: #faf9f7;
}

.ps-footer-note {
    font-size: 10px;
    color: #aaa;
    line-height: 1.7;
}

.ps-footer-sign {
    text-align: right;
}

.ps-sign-line {
    width: 120px;
    border-top: 1px solid #bbb;
    margin-bottom: 5px;
    margin-left: auto;
}

.ps-sign-name {
    font-size: 11px;
    font-weight: 600;
    color: #444;
}

.ps-sign-company {
    font-size: 10px;
    color: #aaa;
    margin-top: 1px;
}

/* ── Responsive: stack on small screens ──────────────────── */
@media (max-width: 600px) {
    .ps-emp-grid  { grid-template-columns: 1fr 1fr; }
    .ps-cols      { grid-template-columns: 1fr; }
    .ps-net-amount { font-size: 20px; }
    .ps-employer-row { flex-direction: column; gap: 4px; }
}
/* ============================================================
   END Payslip Styles
   ============================================================ */
   
/* ============================================================
   SOLARIS — Payroll Analytics Styles
   Append this block to solaris.css
   ============================================================ */

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.analytics-kpi-card {
    background: var(--surface);
    border: 1px solid #ced0d1;
    border-radius: 10px;
    padding: 16px 18px;
}
.analytics-kpi-label {
    font-size: 11px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.analytics-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--t);
    font-family: 'Inter';
}
.analytics-kpi-green { color: #1a6b3c; }
.analytics-kpi-amber { color: #b37a00; }
.analytics-kpi-red   { color: #c0392b; }
.analytics-kpi-sub {
    font-size: 11px;
    color: var(--t3);
    margin-top: 4px;
}

.analytics-card {
    background: var(--surface);
    border: 1px solid #ced0d1;
    border-radius: 10px;
    overflow: hidden;
}
.analytics-card-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #ced0d1;
    gap: 12px;
    flex-wrap: wrap;
}
.analytics-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t);
}
.analytics-card-sub {
    font-size: 12px;
    color: var(--t3);
    margin-top: 2px;
}
.analytics-chart-wrap {
    padding: 16px 18px;
    position: relative;
}
.analytics-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Chart toggle buttons */
.chart-toggle {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid #ced0d1;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    transition: all .15s;
}
.chart-toggle.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* Mini table under charts */
.analytics-mini-table {
    padding: 0 18px 14px;
}
.mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #ced0d1;
    font-size: 12px;
}
.mini-row:last-child { border-bottom: none; }
.mini-dept  { color: var(--t); flex: 1; }
.mini-count { color: var(--t3); width: 60px; text-align: center; }
.mini-gross { color: var(--t); font-weight: 600; font-family: 'Inter'; width: 100px; text-align: right; }

/* Full analytics table */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.analytics-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid #ced0d1;
    background: var(--surface2);
}
.analytics-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #ced0d1;
    color: var(--t);
    vertical-align: middle;
}
.analytics-table tr:last-child td { border-bottom: none; }
.analytics-table tr:hover td { background: var(--surface2); }

/* Statutory YTD pills */
.stat-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 5px;
}

.analytics-loading {
    text-align: center;
    padding: 24px;
    color: var(--t3);
    font-size: 13px;
}

@media (max-width: 900px) {
    .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-two-col  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .analytics-kpi-grid { grid-template-columns: 1fr; }
}

.panel_card {}
ul {list-style:none;}

/* Dashboard CSS */
.section {padding:15px;}
.section > .title {margin-bottom: 15px;font-size: 13px;line-height: 13px;font-weight: 600;display: flex;justify-content: space-between;align-items: center;font-family: 'inter';}
.modules_section {}
.modules_section .module_list {}
.modules_section .module_list > li {width:calc((100% - 30px) / 4);float:left;margin:0 10px 10px 0;border: 1px solid #ced0d1;border-radius: 6px;padding: 20px;box-shadow: none;position: relative;overflow: hidden;background: #fff;}
.modules_section .module_list > li:nth-child(4n+4) {float:right;margin:0 0 10px 0;}
.modules_section .module_list > li .module_icon {}
.modules_section .module_list > li .module_icon img {}
.modules_section .module_list > li .module_content {}
.modules_section .module_list > li .module_content .title {}
.modules_section .module_list > li .module_content .title .sub {}
.modules_section .module_list > li .module_content .tag {}
.modules_section .module_list > li .module_content .tag.tag-green {}
.modules_section .module_list > li .module_content .tag.tag-grey {}

.sub_module_list {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap: 20px 10px;}
.sub_module_list > li {}
.sub_module_list > li > a {display: grid;gap: 10px;grid-template-columns: 40px 1fr;align-items: flex-start;text-decoration: none;}
.sub_module_list li.mod-locked { filter: grayscale(1); opacity:.5; }
.sub_module_list > li > a .mod-tile-icon {width: 40px;height: 40px;border-radius: 6px;display: flex;line-height: 66px;align-items: center;text-align: center;}
.sub_module_list > li > a .mod-tile-icon i {margin:0;font-size: 18px;}
.sub_module_list > li > a .mod-tile-name {font-size: 12px;font-weight: 500;color: var(--t, #0f172a);text-align: left;line-height: 16px;font-family: 'Inter', sans-serif;}
.sub_module_list > li > a .mod-tile-name .sub {display:block;font-size: 11px;opacity: .6;margin-top: 3px;}

.recent_activity_section {border-bottom:1px solid #ced0d1;}
.recent_activity_section .panel_header {}
.recent_activity_section .panel_header .section_title {}
.recent_activity_section .panel_header .panel-action {width: 100px;display: block;float: right;text-align: right;}
.recent_activity_section .panel_header .panel-action i {}
.recent_activity_section .activity_logs {}
.recent_activity_section .activity_logs .activity_list {display: grid;grid-template-columns: 1fr;gap: 10px;}
.recent_activity_section .activity_logs .activity_list > li {display:flex;gap:10px;}
.recent_activity_section .activity_logs .activity_list > li:nth-child(1) {} 
.recent_activity_section .activity_logs .activity_list > li .points {width: 14px;height: 14px;background: #fff;border: 2px solid #2449e0;border-radius: 50%;}
.recent_activity_section .activity_logs .activity_list > li .activity_content {}
.recent_activity_section .activity_logs .activity_list > li .activity_content .activity_name {font-size: 12px;font-family: 'Inter';margin-bottom: 5px;}
.recent_activity_section .activity_logs .activity_list > li .activity_content .activity_name .module {}
.recent_activity_section .activity_logs .activity_list > li .activity_content .user_details {list-style: none;font-size: 12px;opacity: .6;font-family: 'Inter';display: flex;gap: 5px;}
.recent_activity_section .activity_logs .activity_list > li .activity_content .user_details > li {}
.recent_activity_section .activity_logs .activity_list > li .activity_content .user_details > li:nth-child(1) {}
.recent_activity_section .activity_logs .activity_list > li .activity_content .user_details > li.user_name {}
.recent_activity_section .activity_logs .activity_list > li .activity_content .user_details > li.activity_time {}

/* ============================================================
   END Payroll Analytics Styles
   ============================================================ */
   
/* ============================================================
   SOLARIS — Admin Layout Extracted Styles
   Extracted from resources/views/layouts/admin.php
   Append this block to solaris.css
   ============================================================ */

/* ── Sidebar accordion sub-menu ─────────────────────────── */
.sb-parent {
    cursor: pointer;
    user-select: none;
}

.sb-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    padding-left: 14px;
    margin-top: 2px;
}

.sb-children.open {
    max-height: 400px;
}

.sb-child {display: flex;align-items: center;gap: 8px;padding: 5px 10px 5px 20px;font-size: 11px;color: var(--sb-text);border-radius: 6px;text-decoration: none;transition: var(--transition);margin-bottom: 0px;position: relative;}

.sb-child::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sb-text);
    opacity: 0.4;
    transform: translateY(-50%);
}

.sb-child:hover {
    color: var(--sb-text-h);
    background: var(--sb-active-bg);
}

.sb-child.active {
    color: var(--sb-active);
    font-weight: 600;
}

.sb-child.active::before {
    background: var(--sb-active);
    opacity: 1;
}

.sb-chevron {
    transition: transform .25s ease;
    flex-shrink: 0;
}

.sb-parent.open .sb-chevron,
.sb-parent.active.open .sb-chevron {
    transform: rotate(180deg);
}

/* ── Sidebar dark theme variables ────────────────────────── */
.sidebar-dark {
    --sb-bg:      #1e293b;
    --sb-border:  #334155;
    --sb-text:    #94a3b8;
    --sb-text-h:  #f1f5f9;
    --sb-section: #64748b;
    --sb-icon:    #64748b;
}

.sidebar-colored {
    --sb-border:   rgba(255,255,255,0.15);
    --sb-text:     rgba(255,255,255,0.75);
    --sb-text-h:   #ffffff;
    --sb-section:  rgba(255,255,255,0.45);
    --sb-icon:     rgba(255,255,255,0.55);
    --sb-active:   #ffffff;
    --sb-active-bg:rgba(255,255,255,0.18);
}

/* ============================================================
   END Admin Layout Extracted Styles
   ============================================================ */   
   
/* ============================================================
   SOLARIS — Notification Bell
   Append to solaris.css
   ============================================================ */

.tb-notif-wrap {
    position: relative;
}

.tb-notif {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t2);
    transition: background .15s;
}
.tb-notif:hover { background: var(--surface2); }

.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    background: #c0392b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: var(--surface);
    border: 1px solid #ced0d1;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 9999;
    overflow: hidden;
}

.notif-dropdown-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #ced0d1;
}

.notif-dropdown-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
}

.notif-mark-all {
    font-size: 11px;
    color: var(--blue);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-list {
    max-height: 360px;
    overflow-y: auto;
}

.notif-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 16px;
    border-bottom: 1px solid #ced0d1;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { background: var(--primary-light); }
.notif-item.unread:hover { background: var(--surface2); }

.notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.notif-icon-amber  { background: #faeeda; color: #b37a00; }
.notif-icon-green  { background: #eaf3de; color: #1a6b3c; }
.notif-icon-blue   { background: #e6f1fb; color: #1a56db; }
.notif-icon-red    { background: #fcebeb; color: #c0392b; }

.notif-body { flex: 1; min-width: 0; }
.notif-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--t);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-msg {
    font-size: 11px;
    color: var(--t3);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-time {
    font-size: 10px;
    color: var(--t4);
    margin-top: 3px;
}
.notif-unread-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
    margin-top: 6px;
}

.notif-empty {
    padding: 24px;
    text-align: center;
    font-size: 13px;
    color: var(--t3);
}

.notif-dropdown-ftr {
    padding: 10px 16px;
    border-top: 1px solid #ced0d1;
    text-align: center;
}
.notif-dropdown-ftr a {
    font-size: 12px;
    color: var(--blue);
    text-decoration: none;
}
.notif-dropdown-ftr a:hover { text-decoration: underline; }

/* ============================================================
   END Notification Bell CSS
   ============================================================ */

.notif-cat-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #ced0d1;
    padding-bottom: 0;
}
.notif-cat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t3);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    border-radius: 4px 4px 0 0;
}
.notif-cat-tab:hover { color: var(--t); }
.notif-cat-tab.active {
    color: var(--primary, #1a56db);
    border-bottom-color: var(--primary, #1a56db);
}
.notif-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #e53e3e;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 9px;
    padding: 0 4px;
}

.notif-date-group { margin-bottom: 4px; }
.notif-date-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    padding: 10px 20px 6px;
    background: var(--surface2);
    border-bottom: 1px solid #ced0d1;
}

.notif-full-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 20px;
    border-bottom: 1px solid #ced0d1;
    transition: background .12s;
}
.notif-full-item:last-child { border-bottom: none; }
.notif-full-item:hover { background: var(--surface2); }
.notif-full-item.unread { background: rgba(26,86,219,.04); }
.notif-full-item.unread:hover { background: var(--surface2); }

.notif-full-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
}
.notif-full-body { flex: 1; min-width: 0; }
.notif-full-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
    margin-bottom: 3px;
}
.notif-full-msg {
    font-size: 12px;
    color: var(--t3);
    line-height: 1.6;
}
.notif-full-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.notif-full-time { font-size: 11px; color: var(--t4, #aaa); }

.notif-cat-pill {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.notif-cat-payroll    { background: #e6f1fb; color: #1a56db; }
.notif-cat-leave      { background: #eaf3de; color: #1a6b3c; }
.notif-cat-hr         { background: #f3e8ff; color: #6b21a8; }
.notif-cat-attendance { background: #faeeda; color: #b37a00; }
.notif-cat-system     { background: #f1efe8; color: #5f5e5a; }
.notif-cat-general    { background: #e6f1fb; color: #1a56db; }

.notif-full-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.notif-unread-indicator {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #1a56db;
}

.messages-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 120px);
    border: 1px solid #ced0d1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

/* ── Left sidebar ─────────────────────────────────────── */
.msg-sidebar {
    border-right: 1px solid #ced0d1;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.msg-sidebar-hdr {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #ced0d1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.msg-sidebar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t);
}
.msg-sidebar-actions { display: flex; gap: 4px; }
.msg-icon-btn {
    width: 30px; height: 30px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
    font-size: 13px;
}
.msg-icon-btn:hover { background: var(--surface2); color: var(--t); }

.msg-search {
    padding: 8px 12px;
    border-bottom: 1px solid #ced0d1;
    flex-shrink: 0;
}
.msg-search input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ced0d1;
    border-radius: 8px;
    font-size: 12px;
    background: var(--surface2);
    color: var(--t);
    outline: none;
}
.msg-search input:focus { border-color: var(--primary, #1a56db); }

.msg-conv-list { flex: 1; overflow-y: auto; }

.msg-conv-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #ced0d1;
    transition: background .12s;
    text-decoration: none;
}
.msg-conv-item:hover { background: var(--surface2); }
.msg-conv-item.active { background: var(--primary-light, rgba(26,86,219,.08)); }

.msg-conv-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--primary-light, #e6f1fb);
    color: var(--primary, #1a56db);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    position: relative;
}
.msg-conv-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.msg-conv-avatar.group { background: #f3e8ff; color: #6b21a8; }
.msg-conv-avatar.announcement { background: #eaf3de; color: #1a6b3c; }
.msg-unread-dot {
    position: absolute;
    top: 0; right: 0;
    width: 10px; height: 10px;
    background: #e53e3e;
    border-radius: 50%;
    border: 2px solid var(--surface);
}

.msg-conv-body { flex: 1; min-width: 0; }
.msg-conv-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-conv-preview {
    font-size: 11px;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.msg-conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.msg-conv-time { font-size: 10px; color: var(--t4, #aaa); }
.msg-unread-badge {
    background: #e53e3e;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

.msg-empty-sidebar {
    padding: 24px;
    text-align: center;
    color: var(--t3);
    font-size: 13px;
}

/* ── Right chat area ──────────────────────────────────── */
.msg-main {
    display: flex;
    flex-direction: column;
    background: var(--surface2);
}

.msg-main-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--t3);
    gap: 12px;
}
.msg-main-empty-icon { font-size: 40px; opacity: .25; }
.msg-main-empty-text { font-size: 14px; font-weight: 500; color: var(--t3); }
.msg-main-empty-sub { font-size: 12px; color: var(--t4, #aaa); }

.msg-chat-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid #ced0d1;
    flex-shrink: 0;
}
.msg-chat-hdr-name { font-size: 14px; font-weight: 600; color: var(--t); }
.msg-chat-hdr-sub  { font-size: 11px; color: var(--t3); margin-top: 1px; }

.msg-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msg-bubble-wrap {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 72%;
}
.msg-bubble-wrap.mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.msg-bubble-wrap.theirs { align-self: flex-start; }

.msg-bubble {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 100%;
    word-wrap: break-word;
}
.msg-bubble.mine {
    background: var(--primary, #1a56db);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msg-bubble.theirs {
    background: var(--surface);
    color: var(--t);
    border-bottom-left-radius: 4px;
    border: 1px solid #ced0d1;
}
.msg-bubble.system {
    background: transparent;
    color: var(--t3);
    font-size: 11px;
    text-align: center;
    font-style: italic;
    border: none;
    align-self: center;
    max-width: 100%;
}

.msg-sender-name { font-size: 10px; color: var(--t3); margin-bottom: 3px; }
.msg-time { font-size: 10px; color: var(--t4, #aaa); flex-shrink: 0; margin-bottom: 2px; }

.msg-avatar-sm {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--primary-light, #e6f1fb);
    color: var(--primary, #1a56db);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    flex-shrink: 0;
}

.msg-date-separator {
    text-align: center;
    font-size: 11px;
    color: var(--t3);
    margin: 8px 0;
    position: relative;
}
.msg-date-separator::before,
.msg-date-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--border);
}
.msg-date-separator::before { left: 0; }
.msg-date-separator::after  { right: 0; }

.msg-input-area {
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid #ced0d1;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}
.msg-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid #ced0d1;
    border-radius: 20px;
    font-size: 13px;
    background: var(--surface2);
    color: var(--t);
    outline: none;
    resize: none;
    max-height: 120px;
    line-height: 1.5;
    font-family: inherit;
}
.msg-input:focus { border-color: var(--primary, #1a56db); }
.msg-send-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primary, #1a56db);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s;
}
.msg-send-btn:hover { opacity: .85; }
.msg-send-btn:disabled { opacity: .4; cursor: not-allowed; }

.main-grid {display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}

.section-title {font-family: 'Inter';font-size:13px;font-weight:600;color:var(--t);margin-bottom:12px}
.section-sub {font-family: 'Inter';font-size:11px;font-weight:500;color:var(--t3);margin-left:6px}

.empty-box{background:var(--surface);border:1px solid #ced0d1;border-radius:12px;padding:48px;text-align:center}
.empty-icon{font-size:32px;margin-bottom:12px}
.empty-title{font-size:14px;font-weight:600;color:var(--t)}
.empty-sub{font-size:12px;color:var(--t3);margin-top:4px}

.list-box{background:var(--surface);border:1px solid #ced0d1;border-radius:12px;overflow:hidden}

.employee-row{display:flex;align-items:center;gap:14px;padding:14px 18px}
.row-border{border-top:1px solid #ced0d1}

.avatar{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#111,#6366f1);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.avatar-img{width:100%;height:100%;object-fit:cover}

.emp-info{flex:1;min-width:0}
.emp-name{font-size:13px;font-weight:600;color:var(--t)}
.emp-meta{font-size:11px;color:var(--t3)}

.badge-phase{font-size:10px;font-weight:600;background:#EEF2FF;color:#4338CA;border-radius:6px;padding:3px 8px;white-space:nowrap}

.progress-box{flex-shrink:0}
.progress-header{display:flex;justify-content:space-between;margin-bottom:4px}
.progress-text{font-size:10px;color:var(--t3)}
.progress-percent{font-size:10px;font-weight:600;color:var(--t)}
.progress-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .3s}

.right-col{display:flex;flex-direction:column;gap:16px}

.box{background:var(--surface);border:1px solid #ced0d1;border-radius:12px;overflow:hidden}
.box-header{padding:14px 16px;border-bottom:1px solid #ced0d1;display:flex;align-items:center;justify-content:space-between}
.box-title{font-size:13px;font-weight:700;color:var(--t)}

.list-item{padding:12px 16px}
.item-title{font-size:12px;font-weight:600;color:var(--t)}
.item-sub{font-size:11px;color:var(--t3);margin-top:2px}
.item-footer{display:flex;align-items:center;justify-content:space-between;margin-top:6px}

.tag{font-size:10px;background:#FEF3C7;color:#92400E;border-radius:4px;padding:2px 6px}

.link-sm{font-size:11px;color:#111}
.link-xs{font-size:10px;color:#111}

.empty-small{padding:24px;text-align:center;font-size:12px;color:var(--t3)}

.btn-rel{position:relative}
.badge-count{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center}
/* ── DEPARTMENTS PAGE ────────────────────────────────────────── */
.dept-stat-grid { margin-bottom: 0px; }
.dept-table-search { margin-left: auto; margin-right: 0; max-width: 220px; }
#department_search .dept-table-search, #designation_search .dept-table-search {float: left;margin-right:10px;max-width: 400px;width: 400px;}
#department_search .tab_container {float: left;margin-right:10px;}
#designation_search select {width: 250px;margin-right: 10px;margin-left:0;}
#department_search, #designation_search {width: auto;float: left;}
.department_designation_tab {width: auto;float: left;margin: 10px 10px 10px 0;}

.dept-filter-select { width: 160px; margin-left: 8px; height: 36px; }
.table-count-label { font-family: var(--mono); font-size: 10px; color: var(--t3); margin-left: 12px; }
.dept-desc-text { font-size: 11px; color: var(--t3); margin-top: 2px; }
.dept-head-name { font-size: 12px; color: var(--t2); }
.dept-no-head { font-size: 12px; color: var(--t4); }
.dept-empty { padding: 60px; }
.dept-empty-btn { margin-top: 12px; }
.text-muted { font-size: 12px; color: var(--t4); }
.btn-danger-outline { color: var(--red); border-color: rgba(220,38,38,.3); }
.drawer-subtitle { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.drawer-loading { text-align: center; padding: 40px; color: var(--t4); font-size: 13px; }
.drawer-loading .spinner { margin: 0 auto 12px; }
.drawer-empty { padding: 40px; text-align: center; color: var(--t4); font-size: 13px; }
.drawer-error { padding: 24px; color: var(--red); font-size: 13px; }
.drawer-emp-avatar-wrap     { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.drawer-emp-avatar-fallback { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 700; color: #fff; }
.drawer-emp-avatar-img      { position: absolute; inset: 0; width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }

/* ── EMPLOYEE AVATAR STACK (replace previous emp-stack rules) ── */
.emp-stack-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding:0; }
.emp-stack-btn:hover .emp-stack-label { color: #111; }
.emp-stack { display: flex; align-items: center; }

.emp-stack-wrap { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
.emp-stack-offset { margin-left: -8px; }

.emp-stack-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); display: block; }
.emp-stack-fb  { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; font-family: var(--display); }

.emp-stack-label { font-size: 12px; font-weight: 500; color: var(--t2); white-space: nowrap; }

/* ── EMPLOYEE DRAWER ROWS ────────────────────────────────────── */
.drawer-emp-list { display: flex; flex-direction: column; gap: 0; }
.drawer-emp-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #ced0d1; text-decoration: none; transition: background .15s; border-radius: var(--radius); }
.drawer-emp-row:last-child { border-bottom: none; }
.drawer-emp-row:hover { background: var(--surface2); }
.drawer-emp-avatar { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.drawer-emp-avatar-fallback { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.drawer-emp-info { flex: 1; min-width: 0; }
.drawer-emp-name { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--t); }
.drawer-emp-meta { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.drawer-emp-type { margin-left: 6px; font-size: 9px; }
.drawer-emp-arrow { color: var(--t4); flex-shrink: 0; }

.kpi-grid {
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:20px;
}

.kpi-blue { background:#eff6ff; }
.kpi-green { background:#f0fdf4; }
.kpi-red-light { background:#fdf1f0; }
.kpi-dark { background:#111; }
.kpi-surface { background:var(--surface2); }

.kpi-highlight {
  border-color:#111;
  border-width:2px;
}

.kpi-md { font-size:18px; }
.kpi-sm { font-size:16px; }

.text-red { color:var(--red); }
.text-white { color:#fff; }

.table-search-sm { max-width:220px; }

.chk-sm { width:14px; height:14px; }
.accent-dark { accent-color:#111; }

.emp-subtext {
  font-size:11px;
  color:var(--t3);
}

.td-mono {
  font-family:var(--mono);
  font-size:12px;
}

.net-salary {
  font-family:var(--display);
  font-size:13.5px;
}

.sent-tags {
  display:flex;
  gap:3px;
  flex-wrap:wrap;
}

.hidden { display:none; }

.stat-grid-space { margin-bottom:20px; }
.search-padding { padding:0 0 16px 0; }

.table-search-sm { max-width:220px; }
.ml-auto { margin-left:auto; }

.chk-sm { width:14px; height:14px; }
.accent-dark { accent-color:#111; }

.emp-subtext { font-size:11px; color:var(--t3); }

.td-recipient {
  font-size:12px;
  color:var(--t2);
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.td-error { max-width:240px; }

.text-muted { color:var(--t4); font-size:12px; }

.td-date {
  font-size:12px;
  color:var(--t2);
  white-space:nowrap;
}

.td-by {
  font-size:12px;
  color:var(--t3);
}

.log-count {
  font-family:var(--mono);
  font-size:10px;
  color:var(--t3);
  margin-left:auto;
}

.empty-state-lg { padding:60px; }
.mt-12 { margin-top:12px; }

.hidden { display:none; }

.modal-md { max-width:420px; }

.modal-center {
  text-align:center;
  padding:20px;
}

.mb-12 { margin-bottom:12px; }

.modal-text {
  font-size:13px;
  color:var(--t3);
}

/* ── New Wage Code 2026 Compliance Indicators ─────────────────── */
.wage-code-badge {
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wage-code-ok   { background: var(--success-light); color: var(--success-h); border: 1px solid rgba(34,197,94,.2); }
.wage-code-warn { background: var(--danger-light);  color: var(--danger-h);  border: 1px solid rgba(239,68,68,.2); }

.toolbar-box {
  background: var(--surface);
  border: 1px solid #ced0d1;
  border-radius: var(--radius);
  padding: 10px 14px;
}

.search-md { max-width:280px; }

.form-inline { display: contents; }

.toolbar-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--t3);
  margin-left: auto;
}

/* LEVEL */
.level-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.level-left {
  display:flex;
  align-items:center;
  gap:12px;
}

.level-badge {
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  color:#fff;
}

.level-title {
  font-size:15px;
  font-weight:700;
}

.level-desc {
  font-size:11.5px;
  color:var(--t3);
}

.level-count {
  font-family:var(--mono);
  font-size:11px;
  color:var(--t3);
}

/* EMPTY */
.empty-box {
  padding:16px;
  text-align:center;
  color:var(--t4);
  font-size:12.5px;
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
}

/* USER */
.user-cell {
  display:flex;
  align-items:center;
  gap:10px;
}

.avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  color:var(--c);
  background: color-mix(in srgb, var(--c) 20%, transparent);
  border:1.5px solid color-mix(in srgb, var(--c) 40%, transparent);
}

.user-sub {
  font-size:11.5px;
  color:var(--t3);
}

/* TAG */
.role-tag {
  font-size:10px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
  border-color: color-mix(in srgb, var(--c) 30%, transparent);
}

.inner_title {font-family: 'Inter';font-size: 12px;line-height: 16px;margin-bottom: 10px;font-weight:500;display: flex;justify-content: space-between;align-items: center;}
.inner_title button.view_link {font-size: 11px;font-weight: 400;text-decoration: none;color: #999;border: 0;background: none;display: flex;align-items: center;gap: 5px;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.inner_title button.view_link i {font-size: 13px;}
.inner_title button.view_link:hover {color:#2449e0;cursor:pointer;}

.section_row {}
.section_title {font-family: 'Inter';font-size: 14px;line-height: 20px;margin-bottom: 20px;font-weight:600;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ced0d1;padding: 15px;margin-bottom: 0px;}
.section_title_small {font-family: 'Inter';font-size: 12px;line-height: 20px;margin-bottom: 20px;font-weight:500;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ced0d1;padding:10px 15px;margin-bottom: 0px;}
.section_title_small .btn {font-size:12px;font-weight:400;padding:0;border:0;background:transparent;}
.section_title a.view_link {font-size: 12px;font-weight:400;text-decoration:underline;color:#2449e0;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.section_title button.view_link {font-size: 11px;font-weight: 400;text-decoration: none;color: #999;border: 0;background: none;display: flex;align-items: center;gap: 5px;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.section_title button.view_link i {font-size: 13px;}
.section_title button.view_link:hover {color:#2449e0;cursor:pointer;}
.section_title i {float:right;font-size: 16px;}
.section_title.left-section {}
.section_title .sub {display: block;font-size: 13px;color: #111;line-height: 18px;font-weight: 400;letter-spacing: 0px;opacity: .6;}
.section_row .section_title_sub {font-family: 'Inter';font-size: 13px;opacity: .5;margin-bottom: 10px;}
.section_row .grid_container {}
.section_row .grid_container > li {width: calc((100% - 30px) / 4);margin-right: 10px;float: left;list-style: none;}
.section_row .grid_container > li:nth-child(4n+4) {margin-right:0;float:right;}
.section_row .grid_container > li.settings-card {border: 1px solid #ced0d1;border-radius: 6px;padding: 20px;box-shadow: none;position: relative;overflow: hidden;background: #fff;}
.section_row .grid_container > li.settings-card .content_section {margin-bottom: 15px;}
.section_row .grid_container > li.settings-card .content_section .doc_title {font-family: 'Inter';font-size: 13px;font-weight: 500;width: calc(100% - 100px);float: left;}
.section_row .grid_container > li.settings-card .content_section .doc_title .sub {display: block;font-weight: 400;font-size: 12px;opacity: .5;}
.section_row .grid_container > li.settings-card .content_section .tag {float: right;width: auto;display: block;}
.section_row .grid_container > li.settings-card .content_section .tag.tag-green {}
.section_row .grid_container > li.settings-card .button_section {display:flex;gap:6px;margin-top:auto;}
.section_row .grid_container > li.settings-card .button_section .btn {font-size: 11px;padding: 5px 10px;border-radius: 4px;background: #fafaf7;color: #7788ab;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.section_row .grid_container > li.settings-card .button_section .btn:hover {background: #111;color: #fff;border: 1px solid #111;}
.section_row .grid_container > li.settings-card .button_section .btn i {}

.navigation_header {display:block;align-items:center;margin-bottom:18px;}
.navigation_header.attendance_page .nav_left {width: calc(100% - 500px);float: left;}
.navigation_header.attendance_page .nav_right {width: 500px;float: right;padding: 11px 0;}
.navigation_header .btn {float: left;margin-right: 5px;}
.navigation_header select, .shift_calendar_section .shift_toolbar_section .form-select {width: 200px;margin-right: 10px;float:left;}
.navigation_header.attendance_page .nav_right ul.legend {clear: both;float: right;}
.navigation_header.attendance_page .nav_right ul.legend > li {align-items:center;display:block;float:left;margin-left:10px;list-style:none;}
.navigation_header.attendance_page .nav_right ul.legend > li:nth-child(1) {margin-left:0;}
.navigation_header.attendance_page .nav_right ul.legend > li .color_box {width:20px;height:20px;border-radius:4px;opacity:.5;display:inline-block;margin-right:5px;float: left;}
.navigation_header.attendance_page .nav_right ul.legend > li .txt {font-size:12px;display:inline-block;float: right;font-family: 'Inter';}

.att-month-grid-table {background: var(--surface);border: 1px solid #ced0d1;border-radius: 6px;overflow-x: auto;}
.att-month-grid-table .table_head {}
.att-month-grid-table .table_head .col {font-size: 13px;font-family: 'Inter';font-weight: 600;}
.att-month-grid-table .col1 {width: 75px;text-align: center;border-left: 0px!important;}
.att-month-grid-table .col2 {width: 215px;}
.att-month-grid-table .col {float:left;padding: 8px 15px;border-left: 1px solid #ced0d1;}
.att-month-grid-table .col.center {text-align:center;display: block;font-size: 12px;color: #94a3b8;white-space: nowrap;font-family: 'Inter';}
.att-month-grid-table .att_dept_row, .attn_list_view .employee_list_table .table_body .att_dept_row {background: var(--surface2);padding: 10px 15px;border-bottom: 1px solid #ced0d1;border-top: 1px solid #ced0d1;font-size: 12px;line-height: 12px;font-family: 'Inter';}
.att-month-grid-table .att_dept_row .txt, .attn_list_view .employee_list_table .table_body .att_dept_row .txt {opacity: .6;text-align: left;width: 100%;display: block;}
.att-month-grid-table .att_dept_row .txt i, .attn_list_view .employee_list_table .table_body .att_dept_row .txt i {float: left;margin-right: 5px;}
.att-month-grid-table .att_dept_row .txt .sub, .attn_list_view .employee_list_table .table_body .att_dept_row .txt .sub {display:inline-block;margin-left:5px;}
.att-month-grid-table .table_body .emp_row {border-bottom: 1px solid #ced0d1;}
.att-month-grid-table .table_body .col {height: 50px;padding: 7px 15px;}
.att-month-grid-table .table_body .col.days {padding: 15px 0;font-size: 12px;text-align:center;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.att-month-grid-table .table_body .col.days i {font-size: 20px;line-height: 20px;opacity: .2;position: relative;top: -5px;}
.att-month-grid-table .table_body .col.days:hover {cursor:pointer;background: #d7eaff;}
.att-month-grid-table .table_body .col.days.wo {background: #f8fafc;color: var(--t4);}
.att-month-grid-table .table_body .col.days.holiday {background: rgb(255 87 34 / 15%);color: #FF5722;border-left: 1px solid rgb(255 87 34 / 15%);border-right: 1px solid rgb(255 87 34 / 15%);}
.att-month-grid-table .table_body .col1 {font-size: 12px;line-height: 12px;font-family: 'Inter';}

.att-wrap-container {/*display:flex;background: var(--surface);border: 1px solid #ced0d1;border-radius: 6px;overflow: hidden;*/height:calc(100vh - 0px);min-height:500px;font-family: 'Inter';}
.att-wrap-container .att-left {width:230px;margin-right: 15px;float:left;flex-direction:column;overflow-y:auto;border-right: 0;}
.att-wrap-container .att-right {width: calc(100% - 245px);float: right;display: block;}
.att-wrap-container .day_attn_emp_header {width:calc(100% - 315px);float:left;background: var(--surface);border: 1px solid #ced0d1;border-radius: 6px;overflow: hidden;margin-bottom: 15px;}
.att-wrap-container .day_attn_emp_header .att-frozen {flex-shrink:0;padding:15px;border-bottom:1px solid #ced0d1;display:flex;align-items:center;justify-content:space-between;background:#fff;}
.att-wrap-container .day_attn_emp_header .att-frozen h3 {font-size: 13px;color: var(--t);line-height: normal;}
.att-wrap-container .day_attn_emp_header .att-frozen h3 .sub {display: block;font-size: 12px;color: var(--t3);margin-top: 3px;font-weight: 400;letter-spacing: 0px;}
.att-wrap-container .day_attn_emp_header .att_frozen_sum_row {}
.att-wrap-container .day_attn_emp_header .att_frozen_sum_row > li {width: calc(100% / 6);float: left;list-style: none;}
.att-wrap-container .day_attn_emp_header .att_frozen_sum_row > li:nth-child(6) {float:right;}

.att-wrap-container .att-right .leave_container {}
.att-wrap-container .att-right .leave_container .panel_title, .att-wrap-container .depat_container .panel_title {font-size: 13px;font-weight: 600;color: var(--t);font-family: 'Inter';}
.att-wrap-container .att-right .leave_container ul.leave_type_list {list-style: none;}
.att-wrap-container .att-right .leave_container ul.leave_type_list > li {margin-top: 10px;}
.att-wrap-container .att-right .leave_container ul.leave_type_list > li .leave_initial {width: 30px;height: 30px;display: block;text-align: center;line-height: 30px;font-size: 11px;font-weight: 700;border-radius: 6px;float: left;margin-right: 10px;}
.att-wrap-container .att-right .leave_container ul.leave_type_list > li .leave_title {width: calc(100% - 40px);float: right;text-align: left;font-size: 12px;}
.att-wrap-container .att-right .leave_container ul.leave_type_list > li .leave_title .sub {display:block;font-size: 11px;line-height: 11px;opacity: .6;}
.att-wrap-container .depat_container .panel_title {}
.att-wrap-container .depat_container .dept_list {margin-top: 15px;}
.att-wrap-container .depat_container .dept_list > li {font-size:12px;padding:3px 10px;border-radius:6px;border:1px solid #ced0d1;cursor:pointer;color:#5b7089;font-weight: 400;transition:all .12s;display:inline-block;margin:2px 2px 2px 0-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.att-wrap-container .depat_container .dept_list > li:hover {background: #111;color: #fff;border: 1px solid #111;}
.att-wrap-container .depat_container .dept_list > li.active {background: #111;color: #fff;border: 1px solid #111;font-weight:600}

.att-wrap-container .att-scroll {flex:1;overflow-y:auto;overflow-x:auto;border: 1px solid #ced0d1;border-radius: 6px;background: #fff;}
.att-wrap-container .cal-top, .att-wrap-container .depat_container, .att-wrap-container .leave_container {padding:14px;background: var(--surface);border: 1px solid #ced0d1;border-radius: 6px;overflow: hidden;margin-bottom: 15px;}
.att-wrap-container .leave_container {width: 300px;float: right;}
.att-wrap-container .cal-nr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.att-wrap-container .cal-nb {width: 24px;height: 24px;border-radius: 4px;border: 1px solid #ced0d1;background: #d1d5db;cursor: pointer;font-size: 16px;color: #111;display: flex;align-items: center;justify-content: center;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.att-wrap-container .month_name {font-size: 13px;font-weight: 600;color: var(--t);font-family: 'Inter';}
.att-wrap-container .cal-nb:hover{background:#111;color:#fff;boder:1px solid #111;}
.att-wrap-container .depat_container {}
.att-wrap-container .cal-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:1px}
.att-wrap-container .cal-dh{font-size:9px;font-weight:600;color:var(--t4);padding:3px 0;text-transform:uppercase}
.att-wrap-container .cal-d {font-size:12px;padding:4px 2px;border-radius:5px;cursor:pointer;color:var(--t);position:relative;line-height:1.4}
.att-wrap-container .cal-d:hover{background:var(--surface2)}
.att-wrap-container .cal-d.om{color:var(--t4)}
.att-wrap-container .cal-d.tod{background:#111;color:#fff;font-weight:600}
.att-wrap-container .cal-d.sel{outline:2px solid var(--primary);outline-offset:-1px}
.att-wrap-container .cal-d.tod.sel{outline:2px solid rgba(255,255,255,.7);outline-offset:-2px}
.att-wrap-container .cal-d.ha::after{content:'';width:4px;height:4px;border-radius:50%;background:#22c55e;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.att-wrap-container .sum-row{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid #ced0d1}
.att-wrap-container .sum-cell{padding:10px 6px;text-align:center;border-right:1px solid #ced0d1}
.att-wrap-container .sum-cell:last-child{border-right:none}
.att-wrap-container .sum-n{font-size:17px;font-weight:700;line-height:1}
.att-wrap-container .sum-l{font-size:9.5px;color:var(--t4);margin-top:3px}




/* ═══════════════════════════════════════════════════════════
   SOLARIS HRMS — UI Stylesheet
   Fluid, AJAX-driven, progress-bar UX
   ═══════════════════════════════════════════════════════════ */

/* ── PROGRESS BAR POPUP ─────────────────────────────────── */
.progress-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
  transition: opacity .2s ease;
}
.progress-overlay.show {
  display: flex; pointer-events: all;
}
.progress-popup {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #ced0d1;
  padding: 28px 36px;
  min-width: 320px; max-width: 420px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  transform: translateY(6px) scale(0.98);
  transition: transform .22s ease;
}
.progress-overlay.show .progress-popup {
  transform: translateY(0) scale(1);
}
.progress-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 20px;
}
.progress-title {
  font-family: var(--display);
  font-size: 15px; font-weight: 700;
  color: var(--t); margin-bottom: 4px;
}
.progress-sub {
  font-size: 12.5px; color: var(--t3);
  margin-bottom: 20px; line-height: 1.4;
}
.progress-track {
  width: 100%; height: 6px;
  background: var(--border);
  border-radius: 6px; overflow: hidden;
  margin-bottom: 10px;
}
.progress-fill {
  height: 100%; border-radius: 6px;
  background: #111;
  width: 0%;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.progress-fill.success { background: var(--green); }
.progress-fill.error   { background: var(--red); }
.progress-pct {
  font-family: var(--mono);
  font-size: 11px; color: var(--t3);
  text-align: right; margin-top: 4px;
}
.progress-steps {
  display: flex; flex-direction: column;
  gap: 6px; margin-top: 16px;
  text-align: left;
}
.progress-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--t3);
  transition: color .2s;
}
.progress-step.done  { color: var(--green); }
.progress-step.active { color: var(--t); font-weight: 500; }
.progress-step.error  { color: var(--red); }
.step-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--border); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 8px;
  transition: all .2s;
}
.progress-step.done  .step-dot { background: var(--green); border-color: var(--green); color: #fff; }
.progress-step.active .step-dot { background: #111; border-color: #111; color: #fff; animation: pulse-dot 1s ease infinite; }
.progress-step.error  .step-dot { background: var(--red); border-color: var(--red); color: #fff; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(17,17,17,0); }
}

/* ── TOP LOADING BAR ────────────────────────────────────── */
.top-loader {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10000;
  background: transparent;
  pointer-events: none;
}
.top-loader-fill {
  height: 100%;
  background: linear-gradient(90deg, #111, #c0392b);
  width: 0%;
  transition: width .3s ease;
  border-radius: 0 2px 2px 0;
}

/* ── SKELETON LOADERS ───────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--surface2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row   { height: 48px; width: 100%; margin-bottom: 1px; }
.skeleton-card  { height: 90px; width: 100%; border-radius: 10px; }
.skeleton-text  { height: 14px; border-radius: 4px; }
.skeleton-text.w60  { width: 60%; }
.skeleton-text.w40  { width: 40%; }
.skeleton-text.w80  { width: 80%; }

/* ── AJAX CONTENT AREAS ─────────────────────────────────── */
.ajax-content {
  transition: opacity .18s ease;
}
.ajax-content.loading {
  opacity: 0.4;
  pointer-events: none;
}

/* ── HRMS SPECIFIC COMPONENTS ────────────────────────────── */

/* Employee Card Grid */
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.emp-card {
  background: var(--surface);
  border: 1px solid #ced0d1;
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.emp-card:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.emp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--emp-color, #111);
}
.emp-avatar-lg {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 16px; font-weight: 700;
  color: #fff;
  background: var(--emp-color, #111);
  margin-bottom: 12px;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.2);
}
.emp-card-name {
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  color: var(--t); margin-bottom: 2px;
}
.emp-card-role {
  font-size: 12px; color: var(--t3);
  margin-bottom: 12px;
}
.emp-card-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.emp-card-meta-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--t2);
}
.emp-card-meta-row svg {
  width: 12px; height: 12px;
  color: var(--t4); flex-shrink: 0;
}


/* Leave Calendar */
.leave-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.leave-cal-header {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .1em;
  color: var(--t3); text-align: center;
  padding: 6px 0;
}
.leave-cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 12px; cursor: pointer;
  position: relative;
  transition: var(--transition);
}
.leave-cal-day:hover { background: var(--surface2); }
.leave-cal-day.today { background: #111; color: #fff; font-weight: 700; }
.leave-cal-day.holiday { background: var(--amber-light); color: var(--amber); }
.leave-cal-day.on-leave { background: var(--red-light); color: var(--red); }
.leave-cal-day.week-off { color: var(--t4); }
.leave-cal-day.other-month { color: var(--t4); opacity: 0.4; }
.leave-cal-day .cal-dot {
  position: absolute; bottom: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* Attendance Status Badges */
.att-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-family: var(--mono); font-size: 8.5px;
  font-weight: 500; border: 1px solid;
}
.att-present  { color: var(--green); background: var(--green-light); border-color: rgba(21,128,61,.2); }
.att-absent   { color: var(--red);   background: var(--red-light);   border-color: rgba(192,57,43,.2); }
.att-late     { color: var(--amber); background: var(--amber-light); border-color: rgba(180,83,9,.2); }
.att-half     { color: var(--blue);  background: var(--blue-light);  border-color: rgba(29,78,216,.2); }
.att-leave    { color: #7c3aed;      background: #f5f3ff;            border-color: rgba(124,58,237,.2); }
.att-holiday  { color: var(--amber); background: var(--amber-light); border-color: rgba(180,83,9,.2); }
.att-weekoff  { color: var(--t3);    background: var(--surface2);    border-color: var(--border); }
.att-wfh      { color: var(--blue);  background: var(--blue-light);  border-color: rgba(29,78,216,.2); }

/* Payslip Preview */
.payslip-wrap {
  background: var(--surface);
  border: 1px solid #ced0d1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 680px;
}
.payslip-header {
  background: #111; color: #fff;
  padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.payslip-company { font-family: var(--display); font-size: 16px; font-weight: 700; }
.payslip-period  { font-family: var(--mono); font-size: 10px; opacity: .6; margin-top: 3px; }
.payslip-body    { padding: 24px 28px; }
.payslip-emp-row { display: flex; justify-content: space-between; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #ced0d1; }
.payslip-emp-info .label { font-family: var(--mono); font-size: 9px; color: var(--t3); letter-spacing: .1em; margin-bottom: 2px; }
.payslip-emp-info .value { font-size: 13px; font-weight: 600; color: var(--t); }
.payslip-table  { width: 100%; border-collapse: collapse; }
.payslip-table th { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--t3); text-transform: uppercase; padding: 0 0 8px; border-bottom: 1px solid #ced0d1; }
.payslip-table td { padding: 9px 0; font-size: 13px; color: var(--t2); border-bottom: 1px solid #ced0d1; }
.payslip-table tr:last-child td { border-bottom: none; }
.payslip-table .earning { color: var(--green); }
.payslip-table .deduction { color: var(--red); }
.payslip-net {
  margin-top: 20px;
  background: #111; color: #fff;
  padding: 16px 20px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.payslip-net-label { font-family: var(--display); font-size: 13px; font-weight: 600; }
.payslip-net-amount { font-family: var(--display); font-size: 22px; font-weight: 800; }

/* Org Chart */
.org-wrap { overflow-x: auto; padding: 20px 0; }
.org-node-group { display: flex; justify-content: center; gap: 16px; }
.org-node {
  background: var(--surface);
  border: 1px solid #ced0d1;
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  text-align: center;
  min-width: 160px;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}
.org-node:hover { border-color: var(--border2); box-shadow: var(--shadow); }
.org-node-top { border-top: 3px solid #111; }
.org-node-name { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--t); }
.org-node-title { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.org-connector { border-left: 2px solid var(--border); margin: 0 auto; height: 20px; width: 1px; }

/* Bulk Action Bar */
.bulk-bar {
  position: sticky; bottom: 0;
  background: #111; color: #fff;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 10px;
  border-radius: var(--radius-lg);
  margin-top: 12px;
  opacity: 0; transform: translateY(10px);
  transition: var(--transition);
  pointer-events: none;
}
.bulk-bar.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.bulk-count { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.6); margin-right: auto; }
.bulk-btn {
  padding: 0 14px; height: 32px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: #fff; font-family: var(--display);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; gap: 6px;
}
.bulk-btn:hover { background: rgba(255,255,255,.2); }
.bulk-btn.danger:hover { background: var(--red); border-color: var(--red); }



/* Filter bar */

.filter-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 20px;
  font-size: 12px; font-weight: 500;
  color: var(--t2); cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.filter-chip:hover { border-color: #111; color: var(--t); }
.filter-chip.active { background: #111; color: #fff; border-color: #111; }
.filter-chip.active:hover { background: var(--red); border-color: var(--red); }

/* Inline editable cells */
.editable-cell {
  cursor: pointer;
  padding: 4px 6px; border-radius: 4px;
  transition: background .12s;
}
.editable-cell:hover { background: var(--surface2); }
.editable-cell.editing {
  padding: 0;
}
.editable-cell input, .editable-cell select {
  width: 100%; border: 1px solid #111;
  border-radius: 4px; padding: 3px 7px;
  font-size: 13px; font-family: var(--body);
  outline: none;
}

/* Attendance grid month view */
.att-month-grid {
  display: grid;
  grid-template-columns: 180px repeat(31, 1fr);
  font-size: 11px;
  border: 1px solid #ced0d1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.att-grid-header {
  background: var(--surface2);
  padding: 8px 10px;
  border-bottom: 1px solid #ced0d1;
  border-right: 1px solid #ced0d1;
  font-family: var(--mono);
  font-size: 8px; letter-spacing: .1em;
  color: var(--t3); text-align: center;
}
.att-grid-name {
  padding: 10px 14px;
  border-bottom: 1px solid #ced0d1;
  border-right: 1px solid #ced0d1;
  font-weight: 600; color: var(--t);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.att-grid-cell {
  padding: 6px 2px; text-align: center;
  border-bottom: 1px solid #ced0d1;
  border-right: 1px solid #ced0d1;
  cursor: pointer; transition: background .1s;
  font-size: 9px;
}
.att-grid-cell:hover { background: var(--surface2); }
.att-grid-cell.P { background: rgba(21,128,61,.08); color: var(--green); font-weight: 700; }
.att-grid-cell.A { background: rgba(192,57,43,.08); color: var(--red); font-weight: 700; }
.att-grid-cell.L { background: rgba(124,58,237,.08); color: #7c3aed; font-weight: 700; }
.att-grid-cell.H { background: rgba(180,83,9,.08); color: var(--amber); font-weight: 700; }
.att-grid-cell.WO { background: var(--surface2); color: var(--t4); }

/* Smooth slide-in for panels */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp .22s ease forwards; }

/* Drawer (side panel) */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 520px; max-width: 95vw;
  background: var(--surface);
  border-left: 1px solid #ced0d1;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 501;
  box-shadow: -4px 0 32px rgba(0,0,0,0.12);
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ced0d1;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.drawer-title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--t); flex: 1; }
.drawer-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #ced0d1; border-radius: 6px;
  background: none; cursor: pointer; color: var(--t2);
  transition: var(--transition);
}
.drawer-close:hover { background: var(--red); border-color: var(--red); color: #fff; }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-footer {
  padding: 16px 24px;
  border-top: 1px solid #ced0d1;
  display: flex; gap: 8px; justify-content: flex-end;
  flex-shrink: 0;
}

/* Toast notifications */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9998;
}
.toast {
  background: var(--surface);
  border: 1px solid #ced0d1;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 380px;
  box-shadow: var(--shadow-md);
  transform: translateX(20px);
  opacity: 0;
  transition: all .22s ease;
  font-size: 13px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--blue); }
.toast.warning { border-left: 3px solid var(--amber); }
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-msg  { flex: 1; color: var(--t); font-weight: 500; }
.toast-close { background: none; border: none; color: var(--t3); cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1; }

/* Payroll processing steps */
.payroll-step-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid #ced0d1;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.payroll-step-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #ced0d1;
  transition: background .12s;
}
.payroll-step-item:last-child { border-bottom: none; }
.payroll-step-item.active { background: var(--surface2); }
.payroll-step-item.done   { background: var(--green-light); }
.payroll-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--border); color: var(--t2);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s;
}
.payroll-step-item.done   .payroll-step-num { background: var(--green); color: #fff; }
.payroll-step-item.active .payroll-step-num { background: #111; color: #fff; animation: pulse-dot 1s ease infinite; }
.payroll-step-label { font-weight: 600; color: var(--t); font-size: 13.5px; }
.payroll-step-desc  { font-size: 12px; color: var(--t3); margin-top: 2px; }


/* ── ATTENDANCE DAY VIEW ─────────────────────────────────── */
.adt{width:100%;border-collapse:collapse}
.adt td{padding:9px 14px;border-bottom:1px solid #ced0d1;vertical-align:middle}
.adt tr:last-child td{border-bottom:none}
.adt tr:hover td{background:rgba(0,0,0,.013)}
.dept-sep td{background:var(--surface2);padding:6px 14px;border-top:2px solid var(--border);border-bottom:1px solid #ced0d1}
.dept-lbl {font-size:9.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;gap:6px}
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.divider{width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0;display:inline-block;vertical-align:middle}

/* Time pill */
.time-pill {margin: 0 auto;display: block;align-items: center;border-radius: 4px;overflow: hidden;background: #fff;cursor: pointer;color: #ab8000;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.time-pill:focus-within{ border-color:#111;}
.time-seg {align-items:center;padding:0;transition:background .12s;display: block;width: 50%;}
.time-seg.odd {float: left;}
.time-seg.even {float: right;}
.time-seg.in {border: 1px solid #5DCAA5;width: calc(50% - 5px);border-radius: 4px;}
.time-seg.out {border: 1px solid #ffb9b9;width: calc(50% - 5px);border-radius:4px;}
.time-seg:hover {background:rgba(0,0,0,.04)}
.time-seg:active {background:rgba(0,0,0,.08)}
.time-pill.focus-in .time-seg:first-child {outline: 1px solid #111;outline-offset: -1px;border-radius: 4px 0 0 4px;background: rgb(238 246 255);}
.time-pill.focus-out .time-seg:last-child {outline:2px solid #ef4444;outline-offset:-1px;border-radius:0 6px 6px 0;background:rgba(239,68,68,.05)}
.time-pill.done-in .time-seg:first-child {outline:2px solid #22c55e;outline-offset:-1px;border-radius:6px 0 0 6px;background:rgba(34,197,94,.06)}
.time-pill.done-out .time-seg:last-child {outline:2px solid #22c55e;outline-offset:-1px;border-radius:0 6px 6px 0;background:rgba(34,197,94,.06)}
.time-pill.bio-pill{border-color:#86c44a;background:#EAF3DE}

.time-seg-lbl {display:block;float: left;font-size: 12px;line-height: 34px;font-weight: 600;color: #000;text-transform: capitalize;letter-spacing: 0;font-family: 'Inter';margin-bottom: 0;width: 36px;height: 34px;text-align: center;}
.time-seg.in .time-seg-lbl {background: #E1F5EE;color: #085041;border-radius: 4px 0 0 4px;border-right: 1px solid #5DCAA5;}
.time-seg.out .time-seg-lbl {background: rgb(255 0 0 / 10%);color: #bd1010;border-radius: 4px 0 0 4px;border-right: 1px solid #ffb9b9;}
.time-seg-lbl.bio-lbl{color:#27500A}
.time-val {display: block;width: calc(100% - 36px);font-size: 12px;line-height: 34px;text-align: center;float: right;font-weight: 600;color: var(--t);font-family: 'Inter';cursor: pointer;}
.time-val.placeholder{color:var(--t4);font-weight:400;font-size:12px}
.time-val.bio-val{color:#27500A}
.time-sep{font-size:16px;color:var(--border);font-weight:300;align-self:center;padding:0 2px}
.hrs-badge{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;padding:3px 8px;border-radius:20px;background:var(--surface2);color:var(--t4);border:1px solid #ced0d1;font-family:var(--font-mono)}
.hrs-badge.late-badge{background:#E6F1FB;color:#0C447C;border-color:#85B7EB}
.bio-tag{font-size:9px;padding:1px 5px;border-radius:3px;background:#EAF3DE;color:#27500A;font-weight:700;letter-spacing:.03em}

/* Note link */
.note-link{font-size:11px;color:var(--t4);cursor:pointer;border:none;background:none;padding:0;transition:color .12s;white-space:nowrap}
.note-link:hover{color:var(--primary)}
.note-dot{width:5px;height:5px;border-radius:50%;background:var(--primary);display:inline-block;margin-right:3px;vertical-align:middle}
.s-spin{display:none;width:11px;height:11px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:sspin .6s linear infinite;margin-left:4px;vertical-align:middle}
@keyframes sspin{to{transform:rotate(360deg)}}

/* Time picker popover */
.data_row.hg {
    background: #eff6ff !important;
    outline: 1.5px solid #bfdbfe;
    border-radius: 4px;
    transition: background .15s, outline .15s;
}
 
/* ── Time Picker popup (Fancybox inline content) ── */
.tp-pop {width: 400px;background: #fff;border-radius: 12px;overflow: hidden;padding:0!important;font-family: 'Inter';}
.tp-emp-header {display: block;align-items: flex-start;justify-content: space-between;padding: 30px;background: #f8fafc;border-bottom: 1px solid #ced0d1;gap: 8px;}
.tp-emp-header .tp-emp-info {}
.tp-emp-header .tp-emp-info .tp-emp-name-text {font-size: 13.5px;font-weight: 600;color: #111827;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.tp-emp-header .tp-emp-info .tp-emp-code-text {display: block;font-size: 11px;font-weight: 400;color: #111;opacity: .6;white-space: nowrap;font-family: 'Inter';}

.tp-emp-av {}
.tp-emp-av img.img-cover {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
.tp-shift-row {margin-top: 6px;}
.shift_list {list-style: none;margin: 0;padding:10px 15px;display: block;align-items: center;width: 100%;border-bottom: 1px solid #ced0d1;}
.shift_list > li {display:inline-block;margin-left:10px;font-size: 12px;padding: 0;border-radius: 0;font-weight: 400;background: transparent;color: #5b7089;}
.shift_list > li:nth-child(1) {margin-left:0px;}
.shift-badge {background: #dbeafe;color: #1d4ed8;font-size: 10px;font-weight: 600;padding: 2px 7px;border-radius: 99px;}
.shift-badge-none {display: block;}
.tp-shift-times-text {font-size: 11px;color: #6b7280;}
.tp-emp-dept-text {}
.tp-close-btn {background: none;border: none;font-size: 20px;line-height: 1;color: #9ca3af;cursor: pointer;padding: 0 2px;flex-shrink: 0;transition: color .15s;}
.tp-close-btn:hover { color: #ef4444; }
.tp-body {padding: 14px 14px 8px;}
.tp-title-label {font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .06em;color: #9ca3af;margin-bottom: 8px;}
.tp-display {display: flex;align-items: center;justify-content: center;gap: 4px;font-size: 42px;font-weight: 700;color: #111827;margin-bottom: 10px;letter-spacing: -1px;transition: color .2s;}
.tp-colon { color: #d1d5db; }
.tp-ampm {font-size: 14px;font-weight: 600;color: #6b7280;align-self: flex-end;margin-bottom: 6px;margin-left: 2px;}
 
.tp-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}
 
.tp-preset {
    background: #ecf0f1;
    border: 1px solid #ced0d1;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    padding: 4px 9px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.tp-preset:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
}
 
.tp-wheels {
    display: flex;
    gap: 8px;
}
 
.tp-wheel {
    flex: 1;
}
 
.tp-wheel-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
    text-align: center;
}
 
.tp-wheel-inner {
    height: 110px;
    overflow-y: auto;
    border: 1px solid #ced0d1;
    border-radius: 8px;
    background: #efefef;
    scroll-behavior: smooth;
}
 
.tp-wheel-inner::-webkit-scrollbar { width: 3px; }
.tp-wheel-inner::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
 
.tp-item {
    text-align: center;
    padding: 6px 0;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.tp-item:hover { background: #eff6ff; color: #1d4ed8; }
.tp-item.sel {
    background: #1d4ed8;
    color: #fff;
    font-weight: 700;
    border-radius: 6px;
}
 
.tp-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid #ecf0f1;
}
 
.tp-btns {
    display: flex;
    gap: 8px;
}
 
.tp-btn {
    flex: 1;
    padding: 9px 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid #e5e7eb;
    background: #efefef;
    color: #374151;
    transition: background .13s, border-color .13s, color .13s;
}
.tp-btn:hover { background: #ecf0f1; }
.tp-btn.confirm {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.tp-btn.confirm:hover { background: #1e40af; border-color: #1e40af; }
 
/* Note modal */
.note-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 1040;
    align-items: center;
    justify-content: center;
}
 
.note-modal {
    background: #fff;
    border-radius: 12px;
    width: 480px;
    max-width: 96vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
 
.note-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #ced0d1;
    background: #f8fafc;
    gap: 10px;
}
 
.note-modal-hdr-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
 
.note-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
 
.note-emp-name-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}
 
.note-date-text {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}
 
.note-close-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #9ca3af;
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s;
}
.note-close-btn:hover { color: #ef4444; }
 
.info-strip {
    display: flex;
    border-bottom: 1px solid #ecf0f1;
}
 
.info-strip-cell {
    flex: 1;
    padding: 8px 12px;
    border-right: 1px solid #ecf0f1;
    font-size: 11px;
}
 
.info-strip-label {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    margin-bottom: 2px;
}
 
.info-strip-value { font-size: 12px; color: #374151; font-weight: 500; }
.note-in-time-val, .note-out-time-val { font-size: 12px; color: #374151; font-weight: 500; }
 
.note-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 80px;
    max-height: 280px;
}
 
.comment-loading, .comment-empty, .comment-error {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 20px 0;
}
 
.comment-card {
    background: #efefef;
    border: 1px solid #ced0d1;
    border-radius: 8px;
    padding: 10px 12px;
    transition: opacity .2s;
}
 
.comment-inner { display: flex; justify-content: space-between; gap: 8px; }
.comment-left  { display: flex; gap: 8px; flex: 1; min-width: 0; }
 
.comment-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
 
.comment-body { flex: 1; min-width: 0; }
.comment-name { font-size: 12px; font-weight: 600; color: #111827; }
.comment-meta-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 2px 0 4px; }
.comment-emp-code { font-size: 10px; background: #eff6ff; color: #1d4ed8; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.comment-dept { font-size: 10px; color: #9ca3af; }
.comment-time { font-size: 10px; color: #d1d5db; }
.comment-text { font-size: 12.5px; color: #374151; line-height: 1.5; }
.comment-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
 
.btn-comment-edit,
.btn-comment-delete,
.btn-comment-cancel,
.btn-comment-save {
    border: none;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 3px 9px;
    transition: background .12s;
}
 
.btn-comment-edit   { background: #eff6ff; color: #1d4ed8; }
.btn-comment-edit:hover { background: #dbeafe; }
.btn-comment-delete { background: #fef2f2; color: #ef4444; }
.btn-comment-delete:hover { background: #fee2e2; }
.btn-comment-cancel { background: #ecf0f1; color: #374151; }
.btn-comment-save   { background: #1d4ed8; color: #fff; }
 
.comment-edit-area  { display: none; margin-top: 6px; }
.comment-edit-ta    { width: 100%; border: 1px solid #ced0d1; border-radius: 6px; font-size: 12px; padding: 6px 8px; resize: none; font-family: inherit; }
.comment-edit-btns  { display: flex; gap: 5px; justify-content: flex-end; margin-top: 5px; }
 
.note-add-section { padding: 12px 14px; border-top: 1px solid #ecf0f1; }
.note-view-section { padding: 10px 14px 14px; border-top: 1px solid #ecf0f1; display: none; }
 
.note-textarea {
    width: 100%;
    border: 1px solid #ced0d1;
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    color: #374151;
    transition: border-color .15s;
    box-sizing: border-box;
}
.note-textarea:focus { outline: none; border-color: #93c5fd; }
 
.note-footer-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
 
.btn-note-close {
    background: #ecf0f1;
    border: none;
    border-radius: 7px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
}
 
.btn-note-submit {
    background: #1d4ed8;
    border: none;
    border-radius: 7px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background .13s;
}
.btn-note-submit:hover { background: #1e40af; }
 
.note-locked-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    padding: 4px 0 10px;
}
 
.note-view-footer { display: flex; justify-content: flex-end; }


/* ── ADMIN — SETTINGS ─────────────────────────── */
.snav{display:flex;flex-direction:column;gap:2px}
.snav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);transition:all .15s;border:none;background:none;text-align:left;width:100%}
.snav-item:hover{background:var(--surface2);color:var(--t)}
.snav-item.active{background:var(--primary-light);color:var(--primary)}
.flow-stage{background:var(--surface);border:2px solid var(--border);border-radius:10px;padding:14px 16px;cursor:grab;position:relative;transition:all .15s;user-select:none}
.flow-stage:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.flow-stage.dragging{opacity:.4;border-color:#ef4444;background:#fff8f8;box-shadow:0 12px 32px rgba(239,68,68,.2);cursor:grabbing;transform:scale(0.98)}
.flow-stage.drag-over{border-color:#22c55e;background:#f0fdf4;box-shadow:0 0 0 3px rgba(34,197,94,.15);transform:scale(1.01)}
.flow-stage.drag-over::before{content:'Drop here';position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:#22c55e;white-space:nowrap}
.stage-connector{display:flex;align-items:center;justify-content:center;height:32px;color:var(--t4);font-size:18px;user-select:none;transition:color .15s}
.stage-connector{display:flex;align-items:center;justify-content:center;height:28px;color:var(--t4);font-size:18px;user-select:none}
.cond-badge{font-size:10px;padding:2px 8px;border-radius:10px;background:#E6F1FB;color:#0C447C;font-weight:500}
.id-preview{background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:12px;padding:20px;color:#fff;width:340px;position:relative;overflow:hidden;font-family:Arial,sans-serif}
.id-field{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.7);margin-bottom:6px}
.id-field svg{opacity:.6;flex-shrink:0}


/* ── ATTENDANCE — ATTENDANCE GRID ─────────────────────────── */
.att-month-grid{display:grid;min-width:max-content}
.att-grid-header{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;padding:0 4px;height:34px;line-height:34px;text-align:center;border-bottom:2px solid var(--border);background:var(--surface2);position:sticky;top:0;z-index:4;white-space:nowrap}
.att-grid-cell{font-size:11px;font-weight:600;height:44px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ced0d1;border-right:1px solid #ced0d1;cursor:pointer;transition:background .1s;color:var(--t3);box-sizing:border-box}
.att-grid-cell:hover{filter:brightness(.92)}
.att-grid-cell.P{background:#dcfce7;color:#15803d}
.att-grid-cell.A{background:#fee2e2;color:#dc2626}
.att-grid-cell.L{background:#ede9fe;color:#7c3aed}
.att-grid-cell.H{background:#fef3c7;color:#d97706}
.att-grid-cell.WO{background:var(--surface2);color:var(--t4)}
.att-grid-cell.WH{background:#dbeafe;color:#1d4ed8}
.att-name-cell{height:44px;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:0 10px;border-bottom:1px solid #ced0d1;background:var(--surface);position:sticky;left:0;z-index:1;min-width:200px}
.att-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff}
.att-emp-info{flex:1;min-width:0}
.att-emp-name{font-size:12.5px;font-weight:600;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-emp-id{font-size:10px;color:var(--t4);font-family:var(--mono)}
.att-dept-row{grid-column:1/-1;height:30px;background:linear-gradient(to right,var(--surface2),var(--surface));border-top:1px solid #ced0d1;border-bottom:1px solid #ced0d1;padding:0 14px;font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.att-total-cell{height:44px;box-sizing:border-box;font-size:12px;font-weight:700;color:var(--t);padding:0 10px;border-bottom:1px solid #ced0d1;background:var(--surface2);display:flex;align-items:center;justify-content:center}


/* ── ATTENDANCE — ATTENDANCE DAY PAGE ─────────────────────────── */
.att-wrap{display:flex;gap:0;border:1px solid #ced0d1;border-radius:12px;overflow:hidden;background:var(--surface);height:calc(100vh - 140px);min-height:500px}
.att-left{width:230px;flex-shrink:0;border-right:1px solid #ced0d1;display:flex;flex-direction:column;overflow-y:auto}
.att-right{flex:1;display:flex;flex-direction:column;min-width:0}
/* Frozen top section */
.att-frozen{flex-shrink:0}
/* Scrollable table */
.att-scroll{flex:1;overflow-y:auto;overflow-x:auto}
/* Calendar */
.cal-top{padding:14px;border-bottom:1px solid #ced0d1}
.cal-nav-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-nb{width:24px;height:24px;border-radius:6px;border:1px solid #ced0d1;background:none;cursor:pointer;font-size:13px;color:var(--t3);display:flex;align-items:center;justify-content:center}
.cal-nb:hover{background:var(--surface2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:1px}
.cal-dh{font-size:9px;font-weight:600;color:var(--t4);padding:3px 0;text-transform:uppercase}
.cal-d{font-size:12px;padding:4px 2px;border-radius:5px;cursor:pointer;color:var(--t);position:relative;line-height:1.4}
.cal-d:hover{background:var(--surface2)}
.cal-d.om{color:var(--t4)}
.cal-d.tod{background:var(--primary);color:#fff;font-weight:600}
.cal-d.sel{outline:2px solid var(--primary);outline-offset:-1px}
.cal-d.tod.sel{outline:2px solid #fff;outline-offset:-2px}
.cal-d.ha::after{content:'';width:4px;height:4px;border-radius:50%;background:#22c55e;position:absolute;bottom:0px;left:50%;transform:translateX(-50%)}
.cal-d.tod.ha::after{background:rgba(255,255,255,.8)}
/* Summary row */
.sum-row{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid #ced0d1}
.sum-cell{padding:10px 6px;text-align:center;border-right:1px solid #ced0d1}
.sum-cell:last-child{border-right:none}
.sum-n{font-size:17px;font-weight:700;line-height:1}
.sum-l{font-size:9.5px;color:var(--t4);margin-top:3px}
/* Dept pills */
.dept-section{padding:12px 14px;border-bottom:1px solid #ced0d1}
.dept-pill{font-size:11px;padding:3px 10px;border-radius:20px;border:1px solid #ced0d1;cursor:pointer;color:var(--t3);transition:all .12s;display:inline-block;margin:2px 2px 2px 0}
.dept-pill.active{background:#E6F1FB;border-color:#85B7EB;color:#0C447C;font-weight:600}
/* View toggle */
.vtog{display:flex;border:1px solid #ced0d1;border-radius:8px;overflow:hidden;font-size:12px}
.vtab{padding:6px 14px;cursor:pointer;background:var(--surface);color:var(--t3);border:none;transition:all .12s;text-decoration:none;display:inline-block}
.vtab:hover{background:var(--surface2);color:var(--t)}
.vtab.act{background:var(--primary);color:#fff;font-weight:600}


/* ── EMPLOYEES — _TAB_HRDOCS ─────────────────────────── */
.doc-section { margin-bottom:24px; }
.doc-section-title {
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #ced0d1; 
}
.doc_list {}
.doc_list > li {display: grid;grid-template-columns: 1fr 50px;gap: 10px;align-items: flex-start;}
.doc_list > li.doc-row {padding: 15px;border: 1px solid #ced0d1;border-radius: 6px;height: 70px;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.doc_list > li.doc-row > .content {display: grid;grid-template-columns: 40px 1fr;gap: 10px;}
.doc_list > li.doc-row:hover {}
.doc_list > li.doc-row.issued {}
.doc_list > li.doc-row.pending {}
.doc_list > li.doc-row .doc-icon, .time_line_container .evet_row .event_card .icon_container {width: 40px;height: 40px;border-radius: 6px;display: block;align-items: center;justify-content: center;font-size: 16px;text-align: center;line-height: 40px;border: 1px solid rgb(34 132 255 / 20%);background: rgb(34 132 255 / 15%) !important;float: left;margin-right: 10px;}
.doc_list > li.doc-row .doc-icon i, .time_line_container .evet_row .event_card .icon_container i {font-size: 16px;margin:0;color:#2278e5;}
.doc_list > li.doc-row .doc_title_section {}
.doc_list > li.doc-row .doc_title_section .title {font-size:12px;line-height: 18px;font-weight:400;font-family:'Inter';margin: 0;}
.doc_list > li.doc-row .doc_title_section .sub {display:block;font-size:12px;line-height: 18px;font-weight:400;font-family:'Inter';margin: 0;opacity:.6;}
.required {display:inline-block;font-size:12px;line-height: 12px;font-weight:400;font-family:'Inter';color: red;}
.doc_list > li.doc-row .doc_title_section .error_text {display:block;font-size:12px;line-height: 18px;font-weight:400;font-family:'Inter';color: red;color:rgb(17 17 17 / 60%);}
.doc_list > li.doc-row .doc_title_section .error_text i {color: #ff9b00;}
.doc_list > li.doc-row .doc-toggle {float:right;text-align:right;display: block;position:relative;width:40px;height:20px;}
.doc_list > li.doc-row .doc-toggle input { opacity:0;width:0;height:0;position:absolute; }
.doc_list > li.doc-row .doc-toggle-track {position:absolute;inset:0;background:var(--border);border-radius:10px;cursor:pointer;transition:background .2s;}
.doc-toggle input:checked + .doc-toggle-track { background:#22c55e; }
.doc-toggle-thumb {position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.doc-toggle input:checked ~ .doc-toggle-thumb { transform:translateX(16px); }
.doc-action-area { display:none; }
.doc-action-area .upload_container {background:var(--surface2);border:1px solid #ced0d1;border-radius:6px;padding:15px;height: 70px;display: block;align-items: center;}
.doc-action-area.show { display:block; }
.ob-step {
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:8px;margin-bottom:4px;transition:background .12s;
}
.ob-step:hover { background:var(--surface2); }
.ob-check {
  width:22px;height:22px;border-radius:50%;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  cursor:pointer;transition:all .15s;font-size:11px;
}
.ob-check.done { background:#22c55e;border-color:#22c55e;color:#fff; }
.ob-check.pending { background:var(--surface);border-color:var(--border); }


/* ── EMPLOYEES — EMPLOYEE FORM ─────────────────────────── */
.form-tabs { display:flex; gap:2px; border-bottom:1px solid #ced0d1; margin-bottom:24px; overflow-x:auto; scrollbar-width:none; }
.form-tabs::-webkit-scrollbar { display:none; }
.form-tab  { padding:10px 16px; font-size:13px; font-weight:600; color:var(--t3); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition:var(--transition); }
.form-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.form-tab:hover  { color:var(--t); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.check-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #ced0d1; }
.check-row:last-child { border-bottom:none; }
.check-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
.check-label { font-size:13.5px; font-weight:500; color:var(--t); }
.check-sub   { font-size:12px; color:var(--t3); }


/* ── EMPLOYEES — ONBOARDING ─────────────────────────── */
.table_view .list_table.onboard_active_table .table_head .col {}
.table_view .list_table.onboard_active_table .table_body .col {height:50px;}
.table_view .list_table.onboard_active_table .col {}
.table_view .list_table.onboard_active_table .col1 {width: 75px;float: left;text-align: center;}
.table_view .list_table.onboard_active_table .col2 {width: calc(100% - 1295px);float: left;}
.table_view .list_table.onboard_active_table .col3 {width: 220px;float: left;}
.table_view .list_table.onboard_active_table .col4 {width: 220px;float: left;}
.table_view .list_table.onboard_active_table .col5 {width: 170px;float: left;text-align: center;}
.table_view .list_table.onboard_active_table .col6 {width: 120px;float: left;text-align: center;}
.table_view .list_table.onboard_active_table .col7 {width: 120px;float: left;text-align: center;}
.table_view .list_table.onboard_active_table .col8 {width: 200px;float: left;}
.table_view .list_table.onboard_active_table .col9 {width: 170px;float: right;text-align: center;border-right: 0!important;}
.table_view .list_table.onboard_active_table .col9 .view_small_btn {position:relative;top:3px;cursor:pointer;}

.ob-header{background:#1e293b;border-radius:14px;padding:24px 28px;display:flex;align-items:center;gap:20px;margin-bottom:16px}
.ob-prog-bar{height:8px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin-top:6px;width:300px}
.ob-prog-fill{height:100%;border-radius:4px;background:#22c55e;transition:width .5s ease}
.phase-block{background:var(--surface);border:1px solid #ced0d1;border-radius:12px;margin-bottom:12px;overflow:hidden}
.phase-hdr{display:flex;align-items:center;gap:10px;padding:13px 18px;cursor:pointer;border-bottom:1px solid #ced0d1}
.phase-body{padding:0}
.step-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;border-bottom:1px solid #ced0d1;transition:background .12s}
.step-row:last-child{border-bottom:none}
.step-row:hover{background:var(--surface2)}
.step-row.is-done{opacity:.6}
.step-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;margin-top:2px;border:1.5px solid var(--border);color:var(--t3)}
.step-num.done{background:#22c55e;border-color:#22c55e;color:#fff}
.step-num.pending{background:var(--surface2)}
.step-num.in_progress{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.step-num.rejected{background:#fee2e2;border-color:#ef4444;color:#991b1b}
.step-num.locked{background:var(--surface2);opacity:.4}
.tag-sm{font-size:10px;padding:1px 7px;border-radius:10px;font-weight:500;white-space:nowrap}
.ai-result{border-radius:8px;padding:10px 14px;margin-top:8px;font-size:12px}
.ai-approved{background:#EAF3DE;border:1px solid #97C459;color:#3B6D11}
.ai-review{background:#FAEEDA;border:1px solid #EF9F27;color:#633806}
.ai-rejected{background:#FCEBEB;border:1px solid #F09595;color:#A32D2D}
.upload-zone{border:2px dashed var(--border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:all .15s;margin-top:8px}
.upload-zone:hover{border-color:var(--primary);background:var(--primary-light)}
.action-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid #ced0d1;background:var(--surface);color:var(--t);transition:all .15s}
.action-btn:hover{border-color:var(--primary);color:var(--primary)}
.action-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.action-btn.primary:hover{opacity:.9}
.action-btn.success{background:#22c55e;color:#fff;border-color:#22c55e}
.action-btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}
.conf-meter{height:4px;border-radius:2px;margin-top:4px}


/* ── PAYROLL — PAYSLIP ─────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --t:#111;--t2:#555;--t3:#999;
  --border:#d1d5db;
  --green:#15803d;--red:#c0392b;
  --display:'Poppins',sans-serif;--body:'Inter',sans-serif;--mono:'JetBrains Mono',monospace;
}

.payslip{background:#fff;max-width:740px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 2px 20px rgba(0,0,0,.08)}
.ps-header{background:#111;padding:28px 32px;display:flex;justify-content:space-between;align-items:flex-start}
.co-name{font-family:var(--display);font-size:18px;font-weight:700;color:#fff}
.co-addr{font-size:11px;color:rgba(255,255,255,.45);margin-top:5px;line-height:1.6}
.ps-period{text-align:right}
.ps-period .label{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:rgba(255,255,255,.35);text-transform:uppercase;margin-bottom:4px}
.ps-period .value{font-family:var(--display);font-size:14px;font-weight:700;color:#fff}
.ps-period .sub{font-family:var(--mono);font-size:9.5px;color:rgba(255,255,255,.4);margin-top:3px}

.ps-emp{padding:22px 32px;border-bottom:1px solid #ced0d1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;background:#fafaf8}
.ps-emp-field .lbl{font-family:var(--mono);font-size:8px;letter-spacing:.15em;color:var(--t3);text-transform:uppercase;margin-bottom:3px}
.ps-emp-field .val{font-size:13px;font-weight:600;color:var(--t)}

.ps-body{padding:24px 32px}
.ps-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ps-section-title{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t);padding-bottom:8px;border-bottom:2px solid #111;margin-bottom:12px}
.ps-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #ced0d1;font-size:12.5px}
.ps-row:last-child{border-bottom:none}
.ps-row .name{color:var(--t2)}
.ps-row .amount{font-family:var(--mono);font-weight:600;color:var(--t)}
.ps-row .amount.earn{color:var(--green)}
.ps-row .amount.ded{color:var(--red)}

.ps-summary{margin:24px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ps-sum-card{background:#f9f9f7;border:1px solid #ced0d1;border-radius:8px;padding:14px 16px;text-align:center}
.ps-sum-card .lbl{font-family:var(--mono);font-size:8px;letter-spacing:.15em;color:var(--t3);text-transform:uppercase;margin-bottom:5px}
.ps-sum-card .val{font-family:var(--display);font-size:18px;font-weight:800;color:var(--t)}

.ps-net{background:#111;margin:16px 0;padding:18px 28px;border-radius:10px;display:flex;justify-content:space-between;align-items:center}
.ps-net .label{font-family:var(--display);font-size:14px;font-weight:600;color:rgba(255,255,255,.8)}
.ps-net .amount{font-family:var(--display);font-size:28px;font-weight:800;color:#fff}
.ps-net .words{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.4);margin-top:3px}

.ps-footer{padding:16px 32px;border-top:1px solid #ced0d1;display:flex;align-items:center;justify-content:space-between;background:#fafaf8}
.ps-footer-note{font-size:10.5px;color:var(--t3)}
.ps-footer-sign{text-align:right;font-size:11px;color:var(--t2)}

.print-bar{max-width:740px;margin:0 auto 16px;display:flex;gap:8px;justify-content:flex-end}
.btn-print{padding:0 16px;height:36px;background:#111;color:#fff;border:none;border-radius:7px;font-family:var(--display);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px}
.btn-print:hover{background:var(--red)}
@media print{.print-bar{display:none}.payslip{box-shadow:none;border-radius:0}body{background:#fff;padding:0}}


/* ── PAYROLL — SALARY SETUP ─────────────────────────── */
.preview-row { display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #ced0d1; }
.preview-row:last-child { border-bottom:none; }
.sal-row:hover { background:var(--surface2); }
.sal-row.selected { background:var(--primary-light); }


/* ── UTILITY CLASSES (replaces common inline styles) ─────── */
.flex          { display: flex; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4         { gap: 4px; }
.gap-6         { gap: 6px; }
.gap-8         { gap: 8px; }
.gap-10        { gap: 10px; }
.gap-12        { gap: 12px; }
.gap-14        { gap: 10px; }
.gap-16        { gap: 16px; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0       { min-width: 0; }
.w-full        { width: 100%; }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.font-mono     { font-family: var(--mono); }
.font-600      { font-weight: 600; }
.font-700      { font-weight: 700; }
.truncate      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowrap        { white-space: nowrap; }
.sticky-left   { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.border-b      { border-bottom: 1px solid #ced0d1; }
.border-t      { border-top: 1px solid #ced0d1; }
.rounded       { border-radius: var(--radius); }
.rounded-full  { border-radius: 9999px; }
.overflow-hidden { overflow: hidden; }
.cursor-pointer { cursor: pointer; }

/* Text sizes */
.text-9  { font-size: 9px; }
.text-10 { font-size: 10px; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-xs { font-size: 11px; color: var(--t4); }

/* Text colors */
.text-primary   { color: var(--t); }
.text-secondary { color: var(--t3); }
.text-muted     { color: var(--t4); }
.text-green     { color: #22c55e; }
.text-red       { color: #ef4444; }
.text-amber     { color: #f59e0b; }
.text-blue      { color: #378ADD; }
.text-purple    { color: #7F77DD; }

/* Padding */
.p-12  { padding: 12px; }
.p-14  { padding: 14px; }
.p-16  { padding: 16px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-8  { padding-top: 8px; padding-bottom: 8px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }

/* Margin */
.mb-4  { margin-bottom: 4px; }
.mb-6  { margin-bottom: 6px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.ml-auto { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════
   SOLARIS HRMS — Module Stylesheet
   Loads ONLY on HRMS module routes. Never on base ERP pages.
   Depends on solaris.css being loaded first.
   DO NOT redefine :root, body, or any base component here.
   ═══════════════════════════════════════════════════════════ */


/* ── PROGRESS BAR POPUP ──────────────────────────────────── */
.progress-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center;
}
.progress-overlay.show { display: flex; pointer-events: all; }
.progress-popup {
  background: #fff; border-radius: 14px; border: 1px solid #ced0d1;
  padding: 28px 36px; min-width: 320px; max-width: 420px;
  text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  transform: translateY(6px) scale(0.98); transition: transform .22s ease;
}
.progress-overlay.show .progress-popup { transform: translateY(0) scale(1); }
.progress-icon  { width: 48px; height: 48px; border-radius: 50%; background: var(--surface2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; }
.progress-title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--t); margin-bottom: 4px; }
.progress-sub   { font-size: 12.5px; color: var(--t3); margin-bottom: 20px; line-height: 1.4; }
.progress-track { width: 100%; height: 6px; background: var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.progress-fill  { height: 100%; border-radius: 6px; background: #111; width: 0%; transition: width .35s cubic-bezier(.4,0,.2,1); }
.progress-fill.success { background: var(--green); }
.progress-fill.error   { background: var(--red); }
.progress-pct   { font-family: var(--mono); font-size: 11px; color: var(--t3); text-align: right; margin-top: 4px; }
.progress-steps { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; text-align: left; }
.progress-step  { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--t3); transition: color .2s; }
.progress-step.done   { color: var(--green); }
.progress-step.active { color: var(--t); font-weight: 500; }
.progress-step.error  { color: var(--red); }
.step-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--border); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 8px; transition: all .2s;
}
.progress-step.done  .step-dot { background: var(--green); border-color: var(--green); color: #fff; }
.progress-step.active .step-dot { background: #111; border-color: #111; color: #fff; animation: pulse-dot 1s ease infinite; }
.progress-step.error  .step-dot { background: var(--red); border-color: var(--red); color: #fff; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(17,17,17,0); }
}

/* ── TOP LOADING BAR ─────────────────────────────────────── */
.top-loader { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; background: transparent; pointer-events: none; }
.top-loader-fill { height: 100%; background: linear-gradient(90deg, #111, #c0392b); width: 0%; transition: width .3s ease; border-radius: 0 2px 2px 0; }

/* ── SKELETON LOADERS ────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--surface2) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-row  { height: 48px; width: 100%; margin-bottom: 1px; }
.skeleton-card { height: 90px; width: 100%; border-radius: 10px; }
.skeleton-text { height: 14px; border-radius: 4px; }
.skeleton-text.w60 { width: 60%; }
.skeleton-text.w40 { width: 40%; }
.skeleton-text.w80 { width: 80%; }

/* ── AJAX CONTENT ────────────────────────────────────────── */
.ajax-content { transition: opacity .18s ease; }
.ajax-content.loading { opacity: 0.4; pointer-events: none; }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slideUp .22s ease forwards; }


/* ─────────────────────────────────────────────────────────
   EMPLOYEES
   ───────────────────────────────────────────────────────── */
.emp-form {width:calc(100% - 510px);float:left;}
.employee_preview {width:500px;float:right;}

/* Employee card grid */
.emp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.emp-card {
  background: var(--surface); border: 1px solid #ced0d1;
  border-radius: var(--radius-lg); padding: 20px;
  cursor: pointer; transition: var(--transition);
  position: relative; overflow: hidden;
}
.emp-card:hover { border-color: var(--border2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.emp-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--emp-color, #111); }
.emp-avatar-lg {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 16px; font-weight: 700;
  color: #fff; background: var(--emp-color, #111);
  margin-bottom: 12px; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,0.2);
}
.emp-card-name { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--t); margin-bottom: 2px; }
.emp-card-role { font-size: 12px; color: var(--t3); margin-bottom: 12px; }
.emp-card-meta { display: flex; flex-direction: column; gap: 4px; }
.emp-card-meta-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--t2); }
.emp-card-meta-row svg { width: 12px; height: 12px; color: var(--t4); flex-shrink: 0; }


/* Form tab check rows */
.check-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ced0d1; }
.check-row:last-child { border-bottom: none; }
.check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.check-label { font-size: 13.5px; font-weight: 500; color: var(--t); }
.check-sub   { font-size: 12px; color: var(--t3); }

/* HR Documents */
.doc-section       { margin-bottom: 24px; }
.doc-section-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #ced0d1; }
.doc-row {display: block;align-items: center;padding: 12px 16px;border: 0px solid #ffdddd;border-radius: 8px;margin-bottom: 0px;transition: all .15s;}
.doc-row:hover { border-color: var(--border2); }
.doc-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.doc-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.doc-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.doc-toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: 10px; cursor: pointer; transition: background .2s; }
.doc-toggle input:checked + .doc-toggle-track { background: var(--success); }
.doc-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.doc-toggle input:checked ~ .doc-toggle-thumb { transform: translateX(16px); }
.doc-action-area      { display: none; }
.doc-action-area.show { display: block; }


/* ─────────────────────────────────────────────────────────
   ONBOARDING
   ───────────────────────────────────────────────────────── */
.ob-header   { background: #1e293b; border-radius: 14px; padding: 24px 28px; display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.ob-prog-bar  { height: 8px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; margin-top: 6px; width: 300px; }
.ob-prog-fill { height: 100%; border-radius: 4px; background: var(--success); transition: width .5s ease; }
.phase-block  { background: var(--surface); border: 1px solid #ced0d1; border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.phase-hdr    { display: flex; align-items: center; gap: 10px; padding: 13px 18px; cursor: pointer; border-bottom: 1px solid #ced0d1; }
.phase-body   { padding: 0; }
.step-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px; border-bottom: 1px solid #ced0d1; transition: background .12s; }
.step-row:last-child { border-bottom: none; }
.step-row:hover { background: var(--surface2); }
.step-row.is-done { opacity: .6; }
.step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; margin-top: 2px; border: 1.5px solid var(--border); color: var(--t3); }
.step-num.done        { background: var(--success); border-color: var(--success); color: #fff; }
.step-num.pending     { background: var(--surface2); }
.step-num.in_progress { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.step-num.rejected    { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.step-num.locked      { background: var(--surface2); opacity: .4; }
.tag-sm   { font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 500; white-space: nowrap; }
.ai-result    { border-radius: 8px; padding: 10px 14px; margin-top: 8px; font-size: 12px; }
.ai-approved  { background: #EAF3DE; border: 1px solid #97C459; color: #3B6D11; }
.ai-review    { background: #FAEEDA; border: 1px solid #EF9F27; color: #633806; }
.ai-rejected  { background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D; }
.hrms-upload-zone { border: 1.5px solid var(--border2); border-radius: var(--radius); padding: 14px 16px; text-align: center; cursor: pointer; transition: all .15s; margin-top: 8px; display: block; background: var(--surface2); width: 100%; min-height: 60px; }
.hrms-upload-zone:hover { border-color: var(--primary); background: var(--primary-light); }
.action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid #ced0d1; background: var(--surface); color: var(--t); transition: all .15s; }
.action-btn:hover          { border-color: var(--primary); color: var(--primary); }
.action-btn.primary        { background: var(--primary); color: #fff; border-color: var(--primary); }
.action-btn.primary:hover  { opacity: .9; }
.action-btn.success        { background: var(--success); color: #fff; border-color: var(--success); }
.action-btn.danger         { background: var(--danger);  color: #fff; border-color: var(--danger); }
.conf-meter { height: 4px; border-radius: 2px; margin-top: 4px; }
.ob-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all .15s; font-size: 11px; }
.ob-check.done    { background: var(--success); border-color: var(--success); color: #fff; }
.ob-check.pending { background: var(--surface); border-color: var(--border); }


/* ─────────────────────────────────────────────────────────
   ATTENDANCE — MONTH GRID
   ───────────────────────────────────────────────────────── */
.att-month-grid  { display: grid; min-width: max-content; }
.att-grid-header {
  font-size: 10px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 0 4px; height: 34px; line-height: 34px; text-align: center;
  border-bottom: 2px solid var(--border); background: var(--surface2);
  position: sticky; top: 0; z-index: 4; white-space: nowrap;
}
.att-grid-cell {
  font-size: 11px; font-weight: 600; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #ced0d1; border-right: 1px solid #ced0d1;
  cursor: pointer; transition: background .1s; color: var(--t3);
}
.att-grid-cell:hover { filter: brightness(.92); }
.att-grid-cell.P  { background: #dcfce7; color: #15803d; }
.att-grid-cell.A  { background: #fee2e2; color: #dc2626; }
.att-grid-cell.L  { background: #ede9fe; color: #7c3aed; }
.att-grid-cell.H  { background: #fef3c7; color: #d97706; }
.att-grid-cell.WO { background: var(--surface2); color: var(--t4); }
.att-grid-cell.WH { background: #dbeafe; color: #1d4ed8; }

.att-name-cell { height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-bottom: 1px solid #ced0d1; background: var(--surface); position: sticky; left: 0; z-index: 1; min-width: 200px; }
.att-avatar    { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #fff; }
.att-emp-info  { flex: 1; min-width: 0; }
.att-emp-name  { font-size: 12.5px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-emp-id    { font-size: 10px; color: var(--t4); font-family: var(--mono); }
.att-dept-row  { grid-column: 1/-1; height: 30px; background: linear-gradient(to right, var(--surface2), var(--surface)); border-top: 1px solid #ced0d1; border-bottom: 1px solid #ced0d1; padding: 0 14px; font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.att-total-cell{ height: 44px; font-size: 12px; font-weight: 700; color: var(--t); padding: 0 10px; border-bottom: 1px solid #ced0d1; background: var(--surface2); display: flex; align-items: center; justify-content: center; }

/* Attendance mark popup status buttons */
.att-status-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); background: var(--surface2); color: var(--t3); cursor: pointer; transition: all .15s; }
.att-status-btn:hover { border-color: var(--border2); background: var(--surface); color: var(--t); }
.att-status-btn.active { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
@keyframes att-spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────────────────
   ATTENDANCE — DAY VIEW
   ───────────────────────────────────────────────────────── 
.att-wrap  { display: flex; gap: 0; border: 1px solid #ced0d1; border-radius: 12px; overflow: hidden; background: var(--surface); height: calc(100vh - 140px); min-height: 500px; }
.att-left  { width: 230px; flex-shrink: 0; border-right: 1px solid #ced0d1; display: flex; flex-direction: column; overflow-y: auto; }
.att-right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.att-frozen { flex-shrink: 0; }
.att-scroll { flex: 1; overflow-y: auto; overflow-x: auto; }*/

/* Calendar */
.cal-top { padding: 14px; border-bottom: 1px solid #ced0d1; }
.cal-nr   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-nb   { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #ced0d1; background: none; cursor: pointer; font-size: 13px; color: var(--t3); display: flex; align-items: center; justify-content: center; }
.cal-nb:hover { background: var(--surface2); }
.cal-g  { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 1px; }
.cal-dh { font-size: 9px; font-weight: 600; color: var(--t4); padding: 3px 0; text-transform: uppercase; }
.cal-d  { font-size: 12px; padding: 4px 2px; border-radius: 5px; cursor: pointer; color: var(--t); position: relative; line-height: 1.4; }
.cal-d:hover { background: var(--surface2); }
.cal-d.om  { color: var(--t4); }
.cal-d.tod { background: var(--primary); color: #fff; font-weight: 600; }
.cal-d.sel { outline: 2px solid var(--primary); outline-offset: -1px; }
.cal-d.tod.sel { outline: 2px solid #fff; outline-offset: -2px; }
.cal-d.ha::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--success); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.cal-d.tod.ha::after { background: rgba(255,255,255,.8); }

/* Summary row */
.sum-row  { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid #ced0d1; }
.sum-cell { padding: 10px 6px; text-align: center; border-right: 1px solid #ced0d1; }
.sum-cell:last-child { border-right: none; }
.sum-n { font-size: 17px; font-weight: 700; line-height: 1; }
.sum-l { font-size: 9.5px; color: var(--t4); margin-top: 3px; }

/* Dept pills */
.dept-section { padding: 12px 14px; border-bottom: 1px solid #ced0d1; }
.dp { font-size: 11px; padding: 3px 10px; border-radius: 20px; border: 1px solid #ced0d1; cursor: pointer; color: var(--t3); transition: all .12s; display: inline-block; margin: 2px 2px 2px 0; }
.dp.active { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; font-weight: 600; }

/* View toggle */
.vtog { display: flex; border: 1px solid #ced0d1; border-radius: 8px; overflow: hidden; font-size: 12px; }
.vtab { padding: 6px 14px; cursor: pointer; background: var(--surface); color: var(--t3); border: none; transition: all .12s; text-decoration: none; display: inline-block; }
.vtab:hover { background: var(--surface2); color: var(--t); }
.vtab.act   { background: var(--primary); color: #fff; font-weight: 600; }

/* Day table — employee row */
.adt { width: 100%; border-collapse: collapse; }
.adt td { padding: 9px 14px; border-bottom: 1px solid #ced0d1; vertical-align: middle; }
.adt tr:last-child td { border-bottom: none; }
.adt tr:hover td { background: rgba(0,0,0,.013); }
.dept-sep td { background: var(--surface2); padding: 6px 14px; border-top: 2px solid var(--border); border-bottom: 1px solid #ced0d1; }
.dept-lbl { font-size: 9.5px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .07em; display: flex; align-items: center; gap: 6px; }

/* Avatar */
.av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; }

/* Status buttons */
.sb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; padding: 5px 10px; border-radius: 4px; border: 1px solid #ced0d1; background: var(--surface2); color: var(--t3); cursor: pointer; transition: all .12s; white-space: nowrap; line-height: 24px; user-select: none; }
.sb svg { width: 11px; height: 11px; flex-shrink: 0; opacity: .4; transition: opacity .12s; }
.sb:hover  { border-color: #aaa; color: var(--t); background: var(--surface); transform: translateY(-1px); }
.sb:active { transform: scale(.96); }
.sb.act-P   { background: #EAF3DE; border-color: #86c44a; color: #27500A; } .sb.act-P   svg { opacity: 1; stroke: #27500A; }
.sb.act-A   { background: #FCEBEB; border-color: #F09595; color: #791F1F; } .sb.act-A   svg { opacity: 1; stroke: #791F1F; }
.sb.act-CL  { background: #EEEDFE; border-color: #AFA9EC; color: #3C3489; } .sb.act-CL  svg { opacity: 1; stroke: #3C3489; }
.sb.act-EL  { background: #EAF3DE; border-color: #86c44a; color: #27500A; } .sb.act-EL  svg { opacity: 1; stroke: #27500A; }
.sb.act-SL  { background: #FAEEDA; border-color: #EF9F27; color: #633806; } .sb.act-SL  svg { opacity: 1; stroke: #EF9F27; }
.sb.act-WFH { background: #E1F5EE; border-color: #5DCAA5; color: #085041; } .sb.act-WFH svg { opacity: 1; stroke: #085041; }
.sb.act-L   { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; } .sb.act-L   svg { opacity: 1; stroke: #378ADD; }
.divider    { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex-shrink: 0; display: inline-block; vertical-align: middle; }




/* ─────────────────────────────────────────────────────────
   LEAVE
   ───────────────────────────────────────────────────────── */
.leave-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.leave-cal-header { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--t3); text-align: center; padding: 6px 0; }
.leave-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; cursor: pointer; position: relative; transition: var(--transition); }
.leave-cal-day:hover       { background: var(--surface2); }
.leave-cal-day.today       { background: #111; color: #fff; font-weight: 700; }
.leave-cal-day.holiday     { background: var(--amber-light); color: var(--amber); }
.leave-cal-day.on-leave    { background: var(--red-light); color: var(--red); }
.leave-cal-day.week-off    { color: var(--t4); }
.leave-cal-day.other-month { color: var(--t4); opacity: 0.4; }
.leave-cal-day .cal-dot    { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }


/* ─────────────────────────────────────────────────────────
   ATTENDANCE BADGES
   ───────────────────────────────────────────────────────── */
.att-badge   { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-family: var(--mono); font-size: 8.5px; font-weight: 500; border: 1px solid; }
.att-present { color: var(--green); background: var(--green-light); border-color: rgba(21,128,61,.2); }
.att-absent  { color: var(--red);   background: var(--red-light);   border-color: rgba(192,57,43,.2); }
.att-late    { color: var(--amber); background: var(--amber-light); border-color: rgba(180,83,9,.2); }
.att-half    { color: var(--blue);  background: var(--blue-light);  border-color: rgba(29,78,216,.2); }
.att-leave   { color: #7c3aed; background: #f5f3ff; border-color: rgba(124,58,237,.2); }
.att-holiday { color: var(--amber); background: var(--amber-light); border-color: rgba(180,83,9,.2); }
.att-weekoff { color: var(--t3); background: var(--surface2); border-color: var(--border); }
.att-wfh     { color: var(--blue); background: var(--blue-light); border-color: rgba(29,78,216,.2); }


/* ─────────────────────────────────────────────────────────
   PAYROLL
   ───────────────────────────────────────────────────────── */

/* KPI cards */
.hrms-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 0px; }
.kpi-card { background: var(--surface); border: 1px solid #ced0d1; border-radius: var(--radius-lg); padding: 16px 18px; display: flex; gap: 10px; align-items: center; transition: var(--transition); }
.kpi-card:hover { border-color: var(--border2); box-shadow: var(--shadow); }

.kpi-val  { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--t); line-height: 1; }
.kpi-lbl  { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--t3); text-transform: uppercase; margin-top: 4px; }
.kpi-chg  { font-family: var(--mono); font-size: 9.5px; margin-top: 3px; }

/* Payroll processing steps */
.payroll-step-list { display: flex; flex-direction: column; gap: 0; border: 1px solid #ced0d1; border-radius: var(--radius-lg); overflow: hidden; }
.payroll-step-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #ced0d1; transition: background .12s; }
.payroll-step-item:last-child { border-bottom: none; }
.payroll-step-item.active { background: var(--surface2); }
.payroll-step-item.done   { background: var(--success-light); }
.payroll-step-num  { width: 32px; height: 32px; border-radius: 50%; background: var(--border); color: var(--t2); font-family: var(--mono); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.payroll-step-item.done   .payroll-step-num { background: var(--success); color: #fff; }
.payroll-step-item.active .payroll-step-num { background: #111; color: #fff; animation: pulse-dot 1s ease infinite; }
.payroll-step-label { font-weight: 600; color: var(--t); font-size: 13.5px; }
.payroll-step-desc  { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* Salary setup */
.preview-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #ced0d1; }
.preview-row:last-child { border-bottom: none; }
.sal-row:hover    { background: var(--surface2); }
.sal-row.selected { background: var(--primary-light); }

/* Payslip preview (within ERP, not standalone) */
.payslip-wrap { background: var(--surface); border: 1px solid #ced0d1; border-radius: var(--radius-lg); overflow: hidden; max-width: 680px; }
.payslip-header { background: #111; color: #fff; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; }
.payslip-company { font-family: var(--display); font-size: 16px; font-weight: 700; }
.payslip-period  { font-family: var(--mono); font-size: 10px; opacity: .6; margin-top: 3px; }
.payslip-body    { padding: 24px 28px; }
.payslip-emp-row { display: flex; justify-content: space-between; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #ced0d1; }
.payslip-emp-info .label { font-family: var(--mono); font-size: 9px; color: var(--t3); letter-spacing: .1em; margin-bottom: 2px; }
.payslip-emp-info .value { font-size: 13px; font-weight: 600; color: var(--t); }
.payslip-table   { width: 100%; border-collapse: collapse; }
.payslip-table th { font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; color: var(--t3); text-transform: uppercase; padding: 0 0 8px; border-bottom: 1px solid #ced0d1; }
.payslip-table td { padding: 9px 0; font-size: 13px; color: var(--t2); border-bottom: 1px solid #ced0d1; }
.payslip-table tr:last-child td { border-bottom: none; }
.payslip-table .earning   { color: var(--green); }
.payslip-table .deduction { color: var(--red); }
.payslip-net { margin-top: 20px; background: #111; color: #fff; padding: 16px 20px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; }
.payslip-net-label  { font-family: var(--display); font-size: 13px; font-weight: 600; }
.payslip-net-amount { font-family: var(--display); font-size: 22px; font-weight: 800; }


/* ─────────────────────────────────────────────────────────
   PAYSLIP — STANDALONE PAGE
   Scoped under .payslip-page to avoid any global conflicts
   ───────────────────────────────────────────────────────── */
.payslip-page { background: #f4f4f1; padding: 24px; }
.payslip-page .payslip      { background: #fff; max-width: 740px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,.08); }
.payslip-page .ps-header    { background: #111; padding: 28px 32px; display: flex; justify-content: space-between; align-items: flex-start; }
.payslip-page .co-name      { font-family: var(--display); font-size: 18px; font-weight: 700; color: #fff; }
.payslip-page .co-addr      { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 5px; line-height: 1.6; }
.payslip-page .ps-period    { text-align: right; }
.payslip-page .ps-period .label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; color: rgba(255,255,255,.35); text-transform: uppercase; margin-bottom: 4px; }
.payslip-page .ps-period .value { font-family: var(--display); font-size: 14px; font-weight: 700; color: #fff; }
.payslip-page .ps-period .sub   { font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,.4); margin-top: 3px; }
.payslip-page .ps-emp       { padding: 22px 32px; border-bottom: 1px solid #e8e6e0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; background: #fafaf8; }
.payslip-page .ps-emp-field .lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .15em; color: #999; text-transform: uppercase; margin-bottom: 3px; }
.payslip-page .ps-emp-field .val { font-size: 13px; font-weight: 600; color: #111; }
.payslip-page .ps-body      { padding: 24px 32px; }
.payslip-page .ps-cols      { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.payslip-page .ps-section-title { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #111; padding-bottom: 8px; border-bottom: 2px solid #111; margin-bottom: 12px; }
.payslip-page .ps-row       { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #e8e6e0; font-size: 12.5px; }
.payslip-page .ps-row:last-child { border-bottom: none; }
.payslip-page .ps-row .name   { color: #555; }
.payslip-page .ps-row .amount { font-family: var(--mono); font-weight: 600; color: #111; }
.payslip-page .ps-row .amount.earn { color: #15803d; }
.payslip-page .ps-row .amount.ded  { color: #c0392b; }
.payslip-page .ps-summary   { margin: 24px 0 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.payslip-page .ps-sum-card  { background: #f9f9f7; border: 1px solid #e8e6e0; border-radius: 8px; padding: 14px 16px; text-align: center; }
.payslip-page .ps-sum-card .lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .15em; color: #999; text-transform: uppercase; margin-bottom: 5px; }
.payslip-page .ps-sum-card .val { font-family: var(--display); font-size: 18px; font-weight: 800; color: #111; }
.payslip-page .ps-net       { background: #111; margin: 16px 0; padding: 18px 28px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
.payslip-page .ps-net .label  { font-family: var(--display); font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
.payslip-page .ps-net .amount { font-family: var(--display); font-size: 28px; font-weight: 800; color: #fff; }
.payslip-page .ps-net .words  { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,.4); margin-top: 3px; }
.payslip-page .ps-footer    { padding: 16px 32px; border-top: 1px solid #e8e6e0; display: flex; align-items: center; justify-content: space-between; background: #fafaf8; }
.payslip-page .ps-footer-note { font-size: 10.5px; color: #999; }
.payslip-page .ps-footer-sign { text-align: right; font-size: 11px; color: #555; }
.payslip-page .print-bar    { max-width: 740px; margin: 0 auto 16px; display: flex; gap: 8px; justify-content: flex-end; }
.payslip-page .btn-print    { padding: 0 16px; height: 36px; background: #111; color: #fff; border: none; border-radius: 7px; font-family: var(--display); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.payslip-page .btn-print:hover { background: var(--danger); }
@media print {
  .payslip-page .print-bar { display: none; }
  .payslip-page .payslip { box-shadow: none; border-radius: 0; }
  .payslip-page { background: #fff; padding: 0; }
}


/* ─────────────────────────────────────────────────────────
   BULK ACTION BAR
   ───────────────────────────────────────────────────────── */
.bulk-bar { position: sticky; bottom: 0; background: #111; color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 10px; border-radius: var(--radius-lg); margin-top: 12px; opacity: 0; transform: translateY(10px); transition: var(--transition); pointer-events: none; }
.bulk-bar.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.bulk-count { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.6); margin-right: auto; }
.bulk-btn   { padding: 0 14px; height: 32px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; color: #fff; font-family: var(--display); font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 6px; }
.bulk-btn:hover { background: rgba(255,255,255,.2); }
.bulk-btn.danger:hover { background: var(--danger); border-color: var(--danger); }

/* ─────────────────────────────────────────────────────────
   ORG CHART
   ───────────────────────────────────────────────────────── */
.org-wrap       { overflow-x: auto; padding: 20px 0; }
.org-node-group { display: flex; justify-content: center; gap: 16px; }
.org-node       { background: var(--surface); border: 1px solid #ced0d1; border-radius: var(--radius-lg); padding: 14px 18px; text-align: center; min-width: 160px; position: relative; cursor: pointer; transition: var(--transition); }
.org-node:hover { border-color: var(--border2); box-shadow: var(--shadow); }
.org-node-top   { border-top: 3px solid #111; }
.org-node-name  { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--t); }
.org-node-title { font-size: 11.5px; color: var(--t3); margin-top: 2px; }
.org-connector  { border-left: 2px solid var(--border); margin: 0 auto; height: 20px; width: 1px; }

/* ─────────────────────────────────────────────────────────
   INLINE EDITABLE CELLS
   ───────────────────────────────────────────────────────── */
.editable-cell { cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: background .12s; }
.editable-cell:hover { background: var(--surface2); }
.editable-cell.editing { padding: 0; }
.editable-cell input, .editable-cell select { width: 100%; border: 1px solid #111; border-radius: 4px; padding: 3px 7px; font-size: 13px; font-family: var(--body); outline: none; }

/* ─────────────────────────────────────────────────────────
   HRMS SETTINGS
   ───────────────────────────────────────────────────────── */
.flow-stage { background: var(--surface); border: 2px solid var(--border); border-radius: 10px; padding: 14px 16px; cursor: grab; position: relative; transition: all .15s; user-select: none; }
.flow-stage:hover { border-color: var(--primary); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.flow-stage.dragging  { opacity: .4; border-color: var(--danger); background: #fff8f8; box-shadow: 0 12px 32px rgba(239,68,68,.2); cursor: grabbing; transform: scale(0.98); }
.flow-stage.drag-over { border-color: var(--success); background: var(--success-light); box-shadow: 0 0 0 3px rgba(34,197,94,.15); transform: scale(1.01); }
.flow-stage.drag-over::before { content: 'Drop here'; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--success-h); white-space: nowrap; }
.stage-connector { display: flex; align-items: center; justify-content: center; height: 28px; color: var(--t4); font-size: 18px; user-select: none; }
.cond-badge  { font-size: 10px; padding: 2px 8px; border-radius: 10px; background: #E6F1FB; color: #0C447C; font-weight: 500; }
.id-preview  { background: linear-gradient(135deg,#1e293b,#0f172a); border-radius: 12px; padding: 20px; color: #fff; width: 340px; position: relative; overflow: hidden; }
.id-field    { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.id-field svg { opacity: .6; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════
   HRMS COMPONENT CLASSES
   Replaces all repeated inline styles across HRMS views.
   Add class to element instead of style="".
   ═══════════════════════════════════════════════════════════ */

/* ── EMPLOYEE HEADER (show.php) ─────────────────────────── */
.emp-header-band {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.emp-header-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; font-weight: 700;
  color: #fff; border: 3px solid rgba(255,255,255,0.2);
  flex-shrink: 0; overflow: hidden;
}
.emp-header-avatar-sm {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: #fff; border: 2.5px solid rgba(255,255,255,.2);
  flex-shrink: 0; overflow: hidden;
}
.emp-header-avatar-64 {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; font-weight: 700;
  color: #fff; border: 3px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.emp-header-info { flex: 1; }
.emp-header-name {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: #fff; margin-bottom: 4px;
}
.emp-header-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.emp-header-meta-text { font-size: 13px; color: rgba(255,255,255,.6); }
.emp-header-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); }
.emp-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.emp-header-code { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.5); }
.btn-ghost-white {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
  color: #fff; height: 30px;
}
.btn-ghost-white:hover { background: rgba(255,255,255,.2); }
.btn-ghost-white-muted {
  background: transparent;
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.6); height: 30px;
}

/* Quick stat strip under header */
.emp-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #ced0d1; }
.emp-stat-cell { padding: 14px 20px; border-right: 1px solid #ced0d1; }
.emp-stat-cell:last-child { border-right: none; }
.emp-stat-label { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; color: var(--t3); text-transform: uppercase; margin-bottom: 4px; }
.emp-stat-value { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--t); }

/* ── DETAIL ROWS (overview, personal, etc.) ─────────────── */
.detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid #ced0d1; }
.detail-row:last-child { border-bottom: none; }
.detail-row-sm { display: flex; padding: 9px 0; border-bottom: 1px solid #ced0d1; }
.detail-row-sm:last-child { border-bottom: none; }
.detail-label { font-size: 12px; color: var(--t3); width: 140px; flex-shrink: 0; }
.detail-label-sm { font-size: 12px; color: var(--t3); width: 100px; flex-shrink: 0; }
.detail-value { font-size: 13px; color: var(--t); font-weight: 500; }
.detail-value-mono { font-size: 12px; font-family: var(--mono); color: var(--t); }

/* Compliance check row */
.compliance-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #ced0d1; }
.compliance-row:last-child { border-bottom: none; }

/* ── LEAVE BALANCE BAR ──────────────────────────────────── */
.leave-bar-wrap { margin-bottom: 14px; }
.leave-bar-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.leave-bar-name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--t); }
.leave-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.leave-bar-used { font-family: var(--mono); font-size: 10px; color: var(--t3); }
.leave-bar-track { height: 5px; background: var(--border); border-radius: 5px; overflow: hidden; }
.leave-bar-fill { height: 100%; border-radius: 5px; transition: width .6s ease; }
.leave-bar-footer { display: flex; justify-content: space-between; margin-top: 3px; }
.leave-bar-remaining { font-family: var(--mono); font-size: 9.5px; }
.leave-bar-pending { font-family: var(--mono); font-size: 9.5px; color: var(--amber); }

/* ── CREDENTIAL SECTION ─────────────────────────────────── */
.cred-section { background: var(--surface); border: 1px solid #ced0d1; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.cred-section-hdr { padding: 14px 18px; border-bottom: 1px solid #ced0d1; display: flex; align-items: center; justify-content: space-between; background: var(--surface2); }
.cred-section-title { font-size: 13px; font-weight: 700; color: var(--t); }
.cred-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid #ced0d1; }
.cred-row:last-child { border-bottom: none; }
.cred-label { font-size: 12px; color: var(--t3); font-weight: 600; min-width: 160px; }
.cred-value { font-size: 13px; color: var(--t); font-weight: 500; font-family: var(--mono); flex: 1; }
.cred-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.cred-badge-active { background: #EAF3DE; color: #27500A; }
.cred-badge-warn   { background: #FAEEDA; color: #633806; }
.cred-badge-error  { background: #FCEBEB; color: #791F1F; }
.pin-set-btn { font-size: 12px; padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; }
.pin-input {
  width: 130px; padding: 8px 12px; border-radius: 6px;
  border: 1px solid #ced0d1; font-size: 18px;
  font-family: var(--mono); letter-spacing: 6px;
  text-align: center; color: var(--t); background: var(--surface);
}

/* ── SECTION HEADER (label above a block) ───────────────── */
.section-label {
  font-size: 9.5px; font-weight: 700; color: var(--t4);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px;
}
.section-label-sm {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}

/* ── TABLE HEADER CELL LABEL ────────────────────────────── */
.th-label {
  font-size: 10px; font-weight: 600; color: var(--t3);
  text-transform: uppercase; letter-spacing: .05em;
}

/* ── INFO STRIP (4-col strip inside modals) ─────────────── */
.info-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #ced0d1; border-bottom: 1px solid #ced0d1; flex-shrink: 0; }
.info-strip-cell { padding: 8px 14px; border-right: 1px solid #ced0d1; }
.info-strip-cell:last-child { border-right: none; }
.info-strip-label { font-size: 9px; font-weight: 600; color: var(--t4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.info-strip-value { font-size: 11.5px; font-weight: 600; color: var(--t); font-family: var(--mono); }

/* ── CANTEEN DASHBOARD ──────────────────────────────────── */
.can-hdr  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.can-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.can-stat  { background: var(--surface); border: 1px solid #ced0d1; border-radius: var(--radius); padding: 16px; text-align: center; }
.can-stat-n { font-size: 28px; font-weight: 700; line-height: 1; }
.can-stat-l { font-size: 11px; color: var(--t3); margin-top: 4px; }
.meal-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.meal-card-d { background: var(--surface); border: 1px solid #ced0d1; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.meal-card-hdr { padding: 14px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ced0d1; }
.meal-icon-d { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.meal-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; margin: 10px 16px 0; }
.meal-bar-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.meal-counts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 10px 16px; border-bottom: 1px solid #ced0d1; }
.mc-n { font-size: 18px; font-weight: 700; }
.mc-l { font-size: 10px; color: var(--t3); margin-top: 2px; }
.emp-list { flex: 1; max-height: 220px; overflow-y: auto; }
.emp-list-hdr { padding: 8px 14px; font-size: 10px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; justify-content: space-between; background: var(--surface2); border-bottom: 1px solid #ced0d1; }
.emp-list-hdr-count { font-weight: 400; color: var(--t4); }
.emp-row  { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-bottom: 1px solid #ced0d1; }
.emp-row:last-child { border-bottom: none; }
.emp-av   { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.emp-av img { width: 100%; height: 100%; object-fit: cover; }
.emp-name { font-size: 12px; font-weight: 600; color: var(--t); }
.emp-meta { font-size: 10px; color: var(--t3); margin-top: 1px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.empty-list { padding: 16px; text-align: center; font-size: 12px; color: var(--t4); }

/* ── MEAL STATUS BADGES ─────────────────────────────────── */
.badge-open   { font-size: 10px; padding: 2px 10px; border-radius: var(--radius); background: #EAF3DE; color: #27500A; font-weight: 600; }
.badge-closed { font-size: 10px; padding: 2px 10px; border-radius: var(--radius); background: var(--surface2); color: var(--t3); font-weight: 600; }

/* ── PAYROLL SUMMARY CARDS ──────────────────────────────── */
.kpi-card-highlight { border-color: #111 !important; border-width: 2px !important; }

/* ── PAGE SECTION TITLE ─────────────────────────────────── */
.page-section-title {
  font-size: 20px; font-weight: 700; color: var(--t);
}
.page-section-sub { font-size: 12px; color: var(--t3); }

/* ── VIEW TOGGLE (Day / Month) ──────────────────────────── */
.view-toggle { display: flex; border: 1px solid #ced0d1; border-radius: 8px; overflow: hidden; font-size: 12px; }
.view-toggle-active { padding: 6px 14px; background: var(--primary); color: #fff; font-weight: 600; }
.view-toggle-inactive { padding: 6px 14px; background: var(--surface); color: var(--t3); text-decoration: none; }

/* ── TIME PICKER BODY WRAPPER ───────────────────────────── */
.tp-body { padding: 16px 16px 0; }

/* ── NOTE COUNT BADGE ───────────────────────────────────── */
.note-count { font-size: 10px; color: var(--primary); }

/* ── INLINE AVATAR (small, in tables) ──────────────────── */
.av-32 {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.av-26 {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.av-42 {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  flex-shrink: 0; overflow: hidden;
}
.av-72 {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; font-weight: 700;
  color: #fff; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--border);
}

/* ── FORM AVATAR PREVIEW ────────────────────────────────── */
.form-avatar-preview {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; font-weight: 700;
  color: #fff; overflow: hidden; flex-shrink: 0; border: 2px solid var(--border);
}

/* ── SALARY PANEL (salary_setup.php) ───────────────────── */
.salary-panel {
  position: fixed; top: 64px; right: 0;
  width: 420px; height: calc(100vh - 64px);
  overflow-y: auto; background: var(--surface);
  border-left: 1px solid #ced0d1;
  z-index: 100; padding: 20px; box-sizing: border-box;
}
.salary-main { display: block; padding-right: 440px; }

/* ── PROGRESS BAR (leave balance, salary) ───────────────── */
.prog-bar-4 { height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; }
.prog-bar-5 { height: 5px; background: var(--border); border-radius: 5px; overflow: hidden; }
.prog-bar-6 { height: 6px; background: var(--border); border-radius: 6px; overflow: hidden; }
.prog-bar-fill { height: 100%; border-radius: inherit; transition: width .6s ease; }

/* ── ONBOARDING HEADER ──────────────────────────────────── */
.ob-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }

/* ── LEAVE TYPE TAG (inline colored tag) ────────────────── */
.lt-tag {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; display: inline-block;
}

/* ── TIMELINE DOT ───────────────────────────────────────── */
.timeline-dot {
  position: absolute; left: -26px; top: 10px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--surface); box-shadow: 0 0 0 2px currentColor;
}

/* ── FORM SECTION DIVIDER ───────────────────────────────── */
.form-section-title {
  font-size: 13px; font-weight: 700; color: var(--t); margin-bottom: 12px;
}

/* ── FOOTER ACTION ROW ──────────────────────────────────── */
.form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid #ced0d1; }
.form-footer-right { display: flex; gap: 10px; }

/* ── DAY VIEW DATE HEADER ───────────────────────────────── */
.day-view-hdr { padding: 12px 18px; border-bottom: 1px solid #ced0d1; display: flex; align-items: center; justify-content: space-between; background: var(--surface); }
.day-view-date { font-size: 14px; font-weight: 700; color: var(--t); }
.day-view-hint { font-size: 11px; color: var(--t3); }

/* ── SUMMARY STAT COLORS ────────────────────────────────── */
.sum-present    { color: #22c55e; }
.sum-absent     { color: #ef4444; }
.sum-late       { color: #f59e0b; }
.sum-leave      { color: #7c3aed; }
.sum-wfh        { color: #0891b2; }
.sum-muted      { color: var(--t3); }

/* ── LEAVE APPLICATION ──────────────────────────────────── */
.leave-apply-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; max-width: 900px; }
.days-preview { display: none; margin-bottom: 16px; padding: 12px 16px; background: var(--surface2); border: 1px solid #ced0d1; border-radius: 8px; }
.days-preview-row { display: flex; align-items: center; justify-content: space-between; }
.days-count { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--t); }

/* ── PAYSLIP PREVIEW SECTION HEADER ────────────────────── */
.ps-section-hdr { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--t3); text-transform: uppercase; padding: 10px 0 6px; }

/* ── MONO VALUE DISPLAY ─────────────────────────────────── */
.mono-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--t); }
.mono-val-sm { font-family: var(--mono); font-size: 10.5px; color: var(--t3); }
.mono-val-lg { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--t); }

/* ── CTC INPUT (salary editor) ──────────────────────────── */
.ctc-input { font-size: 18px; font-weight: 700; font-family: var(--mono); height: 48px; }

/* ── MISC REUSABLE ──────────────────────────────────────── */
.panel-padding   { padding: 0 20px; }
.panel-padding-full { padding: 20px; }
.overflow-x-auto { overflow-x: auto; }
.max-w-640 { max-width: 640px; }
.max-w-680 { max-width: 680px; }
.max-w-760 { max-width: 760px; }
.max-w-900 { max-width: 900px; }
.max-w-200 { max-width: 200px; }
.max-w-240 { max-width: 240px; }
.max-w-280 { max-width: 280px; }
.max-w-300 { max-width: 300px; }
.max-w-320 { max-width: 320px; }
.h-36  { height: 36px; }
.h-34  { height: 34px; }
.h-32  { height: 32px; }
.h-30  { height: 30px; }
.h-48  { height: 48px; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.display-none { display: none; }
.text-white { color: #fff; }
.text-white-60 { color: rgba(255,255,255,.6); }
.text-white-50 { color: rgba(255,255,255,.5); }
.opacity-6 { opacity: .6; }
.color-green { color: #22c55e; }
.color-red   { color: #ef4444; }
.color-amber { color: #f59e0b; }
.color-blue  { color: #378ADD; }
.bg-green-light { background: #EAF3DE; color: #27500A; }
.bg-amber-light { background: #FAEEDA; color: #633806; }
.bg-red-light   { background: #FCEBEB; color: #791F1F; }
.bg-blue-light  { background: #E6F1FB; color: #0C447C; }
.bg-surface2    { background: var(--surface2); }
.border-b-2     { border-bottom: 2px solid var(--border); }
.input-mono     { font-family: var(--mono); }
.input-uppercase { text-transform: uppercase; }


/* ═══════════════════════════════════════════════════════════
   HRMS SETTINGS PAGE — Component Classes
   ═══════════════════════════════════════════════════════════ */

/* Admin-only badge in page header */
.admin-only-badge {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: #A32D2D;
  background: #FCEBEB; border: 1px solid #F09595;
  border-radius: 8px; padding: 7px 12px;
}

/* Aria Side Bar */
.aria-ds-head {
    padding: 14px 16px;
    border-bottom: 1px solid #ced0d1;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.aria-ds-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
}
.aria-ds-avatar::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border: 2px solid #fff;
    border-radius: 50%;
}
.aria-ds-info .name { font-size: 13px; font-weight: 700; color: #1e293b; }
.aria-ds-info .status { font-size: 11px; color: #64748b; }
.aria-ds-actions { margin-left: auto; display: flex; gap: 4px; }
.aria-ds-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #f8fafc;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}
.aria-ds-btn:hover { background: #f1f5f9; color: #1e293b; }
.aria_tab_container.tab_container {border: 0;display: grid;grid-template-columns: 1fr 1fr 1fr;align-items: center;}
.aria_tab_container.tab_container .tab_btn {text-align:center;}


/* Tab icon */
.tab-icon { font-size: 14px; line-height: 1; }

/* Statutory deduction boxes (PF / ESIC) */
.statutory-box { border: 1px solid #ced0d1; border-radius: 8px; padding: 14px; }
.statutory-box-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.statutory-box-name { font-size: 13px; font-weight: 600; color: var(--t); }

/* Smaller form label variant */
.form-label-sm { font-size: 11px; }

/* Utility */
.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-14 { margin-bottom: 14px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-20 { margin-top: 20px; }
.gap-2 { gap: 2px; }
.gap-8 { gap: 8px; }
.gap-6 { gap: 6px; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.max-w-90 { max-width: 90px; }
.mb-24 { margin-bottom: 24px; }
.mb-16 { margin-bottom: 16px; }
.w-full { width: 100%; }
.mb-0 { margin-bottom: 0 !important; }

/* Section heading (h2 inside tabs) */
.section-heading { font-size: 16px; font-weight: 700; color: var(--t); }

/* Flow group label */
.flow-group-label {
  font-size: 10px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}

/* Empty dashed placeholder */
.empty-dashed {
  border: 1px dashed var(--border); border-radius: 10px;
  padding: 20px; text-align: center; color: var(--t4); font-size: 12.5px;
}

/* Flow card */
.flow-card { background: var(--surface); border: 1px solid #ced0d1; border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; }
.flow-card-hdr { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.flow-card-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.flow-card-name { font-size: 14px; font-weight: 700; color: var(--t); }
.flow-type-badge { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.flow-type-badge-inactive { background: #F1EFE8; color: #888780; }

/* Flow pipeline */
.flow-pipeline { display: flex; align-items: center; flex-wrap: wrap; overflow-x: auto; padding-bottom: 2px; }
.flow-pipeline-node { font-size: 11px; padding: 5px 11px; border-radius: 20px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.flow-pipeline-start { background: #E6F1FB; color: #0C447C; }
.flow-pipeline-end   { background: #EAF3DE; color: #3B6D11; }
.flow-pipeline-stage { border: 1px solid #ced0d1; background: var(--surface2); color: var(--t); }
.flow-condition-label { font-size: 9px; color: #378ADD; white-space: nowrap; font-weight: 500; }
.flow-optional-label  { font-size: 9px; color: #BA7517; margin-left: 3px; }
.flow-meta { font-size: 11px; color: var(--t4); margin-top: 8px; }

/* Flash banners (info / warning / error strips) */
.flash-banner { border-radius: 10px; padding: 12px 16px; font-size: 12.5px; }
.flash-banner-amber { background: #FAEEDA; border: 1px solid #EF9F27; color: #633806; }
.flash-banner-red   { background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D; }
.flash-banner-blue  { background: #E6F1FB; border: 1px solid #85B7EB; color: #0C447C; }
.flash-banner-link  { color: inherit; font-weight: 600; }

/* Lock status label */
.lock-status-label { font-size: 12px; color: #BA7517; display: flex; align-items: center; gap: 5px; }

/* ID card layout grid */
.id-card-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }

/* ID sample preview strip */
.id-sample-preview { margin-top: 8px; padding: 10px 14px; background: var(--surface2); border-radius: 8px; font-family: var(--mono); font-size: 13px; color: var(--t); }

/* Color picker input */
.color-input { height: 40px; padding: 2px; }

/* ID card live preview */
.id-card-preview-wrap { position: sticky; top: 80px; }
.preview-label { font-size: 12px; font-weight: 600; color: var(--t3); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; }
.preview-hint  { margin-top: 12px; font-size: 11px; color: var(--t4); text-align: center; }
.id-card-preview { background: #1e293b; border-radius: 12px; padding: 20px; color: #fff; width: 100%; position: relative; overflow: hidden; min-height: 200px; }
.id-card-accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #3b82f6; }
.id-card-photo-placeholder { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
.id-card-emp-name  { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.id-card-emp-desg  { font-size: 11px; opacity: .7; margin-bottom: 10px; }
.id-card-emp-code  { font-size: 11px; font-family: monospace; background: rgba(255,255,255,.07); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 10px; }
.id-card-details   { border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.id-card-detail-row { font-size: 11px; opacity: .7; }
.id-card-qr { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* Modal width variant */
.modal-480 { max-width: 480px; }

/* Stage builder */
.stages-builder-wrap { min-height: 60px; }
.stages-empty { text-align: center; padding: 20px; color: var(--t4); font-size: 12px; border: 1px dashed var(--border); border-radius: 8px; }
.stage-row-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.stage-drag-handle { cursor: grab; color: var(--t4); font-size: 16px; line-height: 1; }
.stage-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stage-label-input { flex: 1; font-size: 13px; font-weight: 600; border: none; background: none; color: var(--t); outline: none; border-bottom: 1px solid #ced0d1; }
.stage-remove-btn { background: none; border: none; cursor: pointer; color: var(--t4); font-size: 16px; padding: 0; }
.stage-field-label { font-size: 10px; color: var(--t3); margin-bottom: 4px; }
.stage-select    { width: 100%; font-size: 12px; padding: 6px 8px; border: 1px solid #ced0d1; border-radius: 6px; background: var(--surface); color: var(--t); }
.stage-select-sm { font-size: 11px; padding: 5px 6px; border: 1px solid #ced0d1; border-radius: 6px; background: var(--surface); color: var(--t); }
.stage-cond-grid { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 6px; align-items: center; }


/* ═══════════════════════════════════════════════════════════
   ATTENDANCE DAY TABLE — _day_table.php classes
   ═══════════════════════════════════════════════════════════ */

/* Sticky table header row */
.adt-thead-row { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.adt-th        { padding: 8px 14px; border-bottom: 2px solid var(--border); }
.adt-th-w36    { width: 36px; padding: 8px 14px; border-bottom: 2px solid var(--border); }
.adt-th-w190   { width: 190px; padding: 8px 14px; border-bottom: 2px solid var(--border); }
.adt-th-w60    { width: 60px; padding: 8px 14px; border-bottom: 2px solid var(--border); }

/* Row number cell */
.adt-row-num { font-size: 11px; color: var(--t4); font-weight: 600; }

/* Employee name/code in table */
.adt-emp-name { font-size: 12.5px; font-weight: 600; color: var(--t); line-height: 1.3; }
.adt-emp-code { font-size: 10px; color: var(--t4); font-family: var(--mono); }

/* Leave balance small count */
.leave-bal-sm { font-size: 9.5px; opacity: .6; }

/* Note count span */
.note-count-badge {font-size: 10px;font-weight: 600;color: #ffffff;display: inline-block;background: #ff1100;width: 20px;height: 20px;line-height: 20px;border-radius: 50%;position: relative;top: 3px;}

/* Time picker popover header */
.tp-emp-header { padding: 14px 16px 12px; border-bottom: 1px solid #ced0d1; display: flex; align-items: center; gap: 10px; }
.tp-emp-info   { flex: 1; min-width: 0; }
.tp-emp-name-text { font-size: 12.5px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-emp-dept-text { font-size: 10px; color: var(--t4); margin-top: 1px; }
.tp-shift-row  { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.tp-shift-times-text { font-size: 10px; color: var(--t4); }
.tp-close-btn  { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--t4); padding: 2px; line-height: 1; flex-shrink: 0; }
.tp-title-label { font-size: 9.5px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.tp-ampm       { font-size: 14px; color: var(--t3); margin-left: 4px; }
.tp-footer     { padding: 0 16px 16px; }

/* Note modal */
.note-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9999; align-items: center; justify-content: center; }
.note-modal        { background: var(--surface); border-radius: 14px; width: 480px; max-width: 95vw; overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.note-modal-hdr    { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; flex-shrink: 0; }
.note-modal-hdr-left { display: flex; align-items: center; gap: 12px; }
.note-avatar       { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.note-emp-name-text { font-size: 14px; font-weight: 700; color: var(--t); }
.note-date-text    { font-size: 11.5px; color: var(--t3); }
.note-close-btn    { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ced0d1; background: none; cursor: pointer; font-size: 16px; color: var(--t4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.note-in-time-val  { font-size: 11.5px; font-weight: 600; font-family: var(--mono); color: #22c55e; }
.note-out-time-val { font-size: 11.5px; font-weight: 600; font-family: var(--mono); color: #378ADD; }
.note-comments-list { overflow-y: auto; max-height: 220px; padding: 10px 20px; display: flex; flex-direction: column; gap: 8px; }
.note-add-section  { padding: 12px 20px 16px; border-top: 1px solid #ced0d1; flex-shrink: 0; }
.note-textarea     { width: 100%; padding: 9px 12px; border: 1px solid #ced0d1; border-radius: 8px; font-size: 13px; color: var(--t); background: var(--surface2); resize: none; outline: none; transition: border-color .15s; }
.note-footer-btns  { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.note-view-section { display: none; padding: 12px 20px 16px; border-top: 1px solid #ced0d1; flex-shrink: 0; }
.note-locked-msg   { font-size: 11.5px; color: var(--t4); display: flex; align-items: center; gap: 6px; }
.note-view-footer  { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Note comment card (JS-generated) */
.comment-card      { padding: 10px 12px; border: 1px solid #ced0d1; border-radius: 8px; background: var(--surface2); }
.comment-inner     { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.comment-left      { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.comment-av        { width: 26px; height: 26px; border-radius: 50%; background: #378ADD; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.comment-body      { flex: 1; min-width: 0; }
.comment-name      { font-size: 12px; font-weight: 600; color: var(--t); }
.comment-meta-row  { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.comment-emp-code  { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid #ced0d1; color: var(--t3); font-family: var(--mono); }
.comment-dept      { font-size: 10px; color: var(--t4); }
.comment-time      { font-size: 10px; color: var(--t4); }
.comment-text      { font-size: 13px; color: var(--t); margin-top: 3px; line-height: 1.5; }
.comment-edit-area { display: none; margin-top: 6px; }
.comment-edit-ta   { width: 100%; padding: 7px 10px; border: 1px solid var(--primary); border-radius: 6px; font-size: 12px; color: var(--t); background: var(--surface); resize: none; outline: none; }
.comment-edit-btns { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.comment-actions   { display: flex; gap: 4px; flex-shrink: 0; }
.comment-loading   { text-align: center; color: var(--t4); font-size: 12px; padding: 16px 0; }
.comment-empty     { text-align: center; color: var(--t4); font-size: 12px; padding: 20px 0; }
.comment-error     { text-align: center; color: var(--t4); font-size: 12px; padding: 16px 0; }

/* Generic small action buttons used in comments */
.btn-comment-edit   { font-size: 10px; padding: 2px 8px; border-radius: 4px; border: 1px solid #ced0d1; background: none; cursor: pointer; color: var(--t3); }
.btn-comment-delete { font-size: 10px; padding: 2px 8px; border-radius: 4px; border: none; background: #FCEBEB; color: #791F1F; cursor: pointer; font-weight: 500; }
.btn-comment-cancel { font-size: 11px; padding: 4px 12px; border-radius: 6px; border: 1px solid #ced0d1; background: none; cursor: pointer; color: var(--t); }
.btn-comment-save   { font-size: 11px; padding: 4px 12px; border-radius: 6px; border: none; background: var(--primary); color: #fff; cursor: pointer; font-weight: 600; }
.btn-note-close     { font-size: 12px; padding: 7px 16px; border-radius: 8px; border: 1px solid #ced0d1; background: none; cursor: pointer; color: var(--t); }
.btn-note-submit    { font-size: 12px; padding: 7px 16px; border-radius: 8px; border: none; background: var(--primary); color: #fff; cursor: pointer; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════
   ATTENDANCE DAY TABLE — _day_table.php
   ═══════════════════════════════════════════════════════════ */

/* Table header */
.adt-hdr-row  { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.adt-hdr-cell { padding: 8px 14px; border-bottom: 2px solid var(--border); }
.adt-hdr-hint { font-size: 9px; color: var(--t4); margin-left: 8px; }
.adt-col-num  { width: 36px; }
.adt-col-emp  { width: 190px; }
.adt-col-note { width: 60px; }
.adt-num-cell { font-size: 11px; color: var(--t4); font-weight: 600; }

/* Employee name/code in row */
.adt-emp-name { font-size: 12.5px; font-weight: 600; color: var(--t); line-height: 1.3; }
.adt-emp-code { font-size: 10px; color: var(--t4); font-family: var(--mono); }

/* Dept count in separator */
.dept-lbl-count { font-weight: 400; color: var(--t4); }

/* Leave balance remaining (small inside button) */
.leave-rem { font-size: 9.5px; opacity: .6; }

/* Note count badge */
.note-count { font-size: 10px; color: var(--primary); }

/* Time picker header */
.tp-emp-hdr   { padding: 14px 16px 12px; border-bottom: 1px solid #ced0d1; display: flex; align-items: center; gap: 10px; }
.tp-emp-name  { font-size: 12.5px; font-weight: 600; color: var(--t); }
.tp-emp-dept  { font-size: 10px; color: var(--t4); margin-top: 1px; }
.tp-shift-times { font-size: 10px; color: var(--t4); }
.tp-close-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--t4); padding: 2px; line-height: 1; flex-shrink: 0; }
.tp-title     { font-size: 9.5px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.tp-ampm      { font-size: 14px; color: var(--t3); margin-left: 4px; }
.tp-footer    { padding: 0 16px 16px; }

/* Note modal */
.note-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 9999;
  align-items: center; justify-content: center;
  transition: opacity .15s;
}
.note-overlay.open { display: flex; }
.note-modal {
  background: var(--surface); border-radius: 14px;
  width: 480px; max-width: 95vw; overflow: hidden;
  max-height: 90vh; display: flex; flex-direction: column;
  transform: scale(.94) translateY(8px);
  transition: transform .2s cubic-bezier(.34,1.4,.64,1);
}
.note-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 14px; flex-shrink: 0; }
.note-modal-emp-name { font-size: 14px; font-weight: 700; color: var(--t); }
.note-modal-date { font-size: 11.5px; color: var(--t3); }
.note-modal-close { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #ced0d1; background: none; cursor: pointer; font-size: 16px; color: var(--t4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.color-green { color: #22c55e; }
.color-blue  { color: #378ADD; }

.note-comments-list { overflow-y: auto; max-height: 220px; padding: 10px 20px; display: flex; flex-direction: column; gap: 8px; }
.note-loading { text-align: center; color: var(--t4); font-size: 12px; padding: 16px 0; }

.note-add-section  { padding: 12px 20px 16px; border-top: 1px solid #ced0d1; flex-shrink: 0; }
.note-view-section { padding: 12px 20px 16px; border-top: 1px solid #ced0d1; flex-shrink: 0; }
.note-textarea {
  width: 100%; padding: 9px 12px; border: 1px solid #ced0d1;
  border-radius: 8px; font-size: 13px; color: var(--t);
  background: var(--surface2); resize: none; outline: none;
  font-family: var(--body); transition: border-color .15s;
}
.note-textarea:focus { border-color: var(--primary); }

/* Note comment items */
.note-comment-item { padding: 10px 12px; border: 1px solid #ced0d1; border-radius: 8px; background: var(--surface2); }
.note-comment-name { font-size: 12px; font-weight: 600; color: var(--t); }
.note-comment-text { font-size: 13px; color: var(--t); margin-top: 3px; line-height: 1.5; }
.note-emp-code { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid #ced0d1; color: var(--t3); font-family: var(--mono); }
.note-edit-textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--primary); border-radius: 6px; font-size: 12px; color: var(--t); background: var(--surface); resize: none; outline: none; font-family: var(--body); }
.note-delete-btn { font-size: 10px; padding: 2px 8px; border-radius: 4px; border: none; background: #FCEBEB; color: #791F1F; cursor: pointer; font-weight: 500; }

/* Utility: margin-top:2px shorthand */
.mt-2 { margin-top: 2px; }
.mt-6 { margin-top: 6px; }
.gap-5 { gap: 5px; }
.gap-9 { gap: 9px; }
.gap-12 { gap: 12px; }
.text-10 { font-size: 10px; }


/* ═══════════════════════════════════════════════════════════
   ONBOARDING PAGE — employees/onboarding.php
   ═══════════════════════════════════════════════════════════ */

/* Layout */
.ob-layout { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
.ob-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 10px; }

/* Header */
.ob-emp-name    { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.ob-emp-meta    { font-size: 12px; color: rgba(255,255,255,.55); }
.ob-prog-labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.5); margin-bottom: 4px; }
.ob-header-right { text-align: right; flex-shrink: 0; }
.ob-pct-num    { font-size: 30px; font-weight: 800; color: #fff; }
.ob-steps-left { font-size: 11px; color: rgba(255,255,255,.4); }
.ob-back-link  { display: inline-block; margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.4); text-decoration: none; border: 1px solid rgba(255,255,255,.15); padding: 4px 10px; border-radius: 6px; }
.ob-back-link:hover { color: rgba(255,255,255,.7); }

/* Alerts */
.ob-alert       { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 10px; }
.ob-alert-icon  { font-size: 16px; flex-shrink: 0; }
.ob-alert-dismiss { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--t3); }
.ob-alert-red   { background: #FCEBEB; border: 1px solid #F09595; }
.ob-alert-amber { background: #FAEEDA; border: 1px solid #EF9F27; }
.ob-alert-blue  { background: #E6F1FB; border: 1px solid #85B7EB; }

/* Next step callout */
.ob-next-step  { background: #EAF3DE; border: 1px solid #97C459; border-radius: 10px; padding: 13px 18px; display: flex; align-items: center; gap: 10px; }
.ob-next-icon  { font-size: 20px; flex-shrink: 0; }
.ob-next-label { font-size: 11px; font-weight: 600; color: #3B6D11; text-transform: uppercase; letter-spacing: .05em; }
.ob-next-title { font-size: 14px; font-weight: 700; color: #27500A; }
.ob-next-desc  { font-size: 11.5px; color: #3B6D11; margin-top: 2px; }

/* Phase header */
.phase-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.phase-title { font-size: 13.5px; font-weight: 700; color: var(--t); flex: 1; }
.phase-chev { width: 13px; height: 13px; flex-shrink: 0; transition: transform .2s; }

/* Step */
.step-label.step-done { font-weight: 400; text-decoration: line-through; }
.step-desc       { font-size: 11.5px; color: var(--t3); margin-bottom: 6px; }
.step-rejection-reason { background: #FCEBEB; border: 1px solid #F09595; border-radius: 7px; padding: 8px 12px; margin-top: 6px; font-size: 12px; color: #A32D2D; }

/* AI result */
.ai-result-title { font-weight: 600; font-size: 12px; }
.ai-conf-label   { font-size: 11px; opacity: .7; }
.conf-fill       { height: 4px; border-radius: 2px; }

/* Government API status */
.ob-govt-status { margin-top: 6px; font-size: 11.5px; }
.ob-govt-ok   { color: #3B6D11; }
.ob-govt-fail { color: #A32D2D; }

/* Awaiting / auto note */
.ob-awaiting  { font-size: 12px; color: var(--t3); }
.ob-auto-note { font-size: 12px; color: var(--t3); }
.ob-auto-verify-note { font-size: 12px; color: var(--t3); padding: 8px 0; }
.ob-current-file     { margin-top: 6px; font-size: 12px; color: var(--t3); }
.ob-upload-title { font-size: 13px; font-weight: 600; color: var(--t); margin-top: 2px; }
.ob-upload-hint  { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* Links */
.link-primary { color: var(--primary); text-decoration: none; }
.link-primary:hover { text-decoration: underline; }

/* Sidebar summary */
.ob-summary-card { padding: 18px; }
.ob-summary-title { font-size: 13px; font-weight: 700; color: var(--t); margin-bottom: 14px; }
.ob-phase-summary-row { margin-bottom: 11px; }

/* Pending approvals panel */
.ob-pending-panel { background: #FAEEDA; border: 1px solid #EF9F27; border-radius: 12px; padding: 14px; }
.ob-pending-title { font-size: 12px; font-weight: 600; color: #633806; margin-bottom: 8px; }
.ob-pending-item  { font-size: 12px; color: #854F0B; margin-bottom: 4px; }

/* Quick links */
.ob-quicklinks   { padding: 16px; }
.ob-quick-link   { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--t); font-size: 12.5px; transition: background .12s; margin-bottom: 4px; }
.ob-quick-link:hover { background: var(--surface2); }
.ob-quick-icon   { font-size: 14px; width: 18px; text-align: center; }

/* Upload overlay */
.ob-upload-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9999; align-items: center; justify-content: center; }
.ob-upload-overlay.show { display: flex; }
.ob-upload-popup   { background: var(--surface); border-radius: 14px; padding: 32px 40px; text-align: center; min-width: 280px; }
.ob-upload-popup-title { font-size: 13px; font-weight: 600; color: var(--t); margin-bottom: 8px; }
.ob-upload-popup-msg   { font-size: 12px; color: var(--t3); }

/* Misc */
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.flex-wrap { flex-wrap: wrap; }


/* ═══════════════════════════════════════════════════════════
   ONBOARDING SETTINGS PAGE — onboarding/settings.php
   ═══════════════════════════════════════════════════════════ */

/* settings-card header row with toggle */
.settings-card-hdr-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.settings-card.qoute_calculation_section {border: 0;}

/* AI threshold visualiser */
.ai-threshold-box  { background: var(--surface2); border: 1px solid #ced0d1; border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.ai-threshold-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center; }
.ai-threshold-cell { padding: 12px; }
.ai-threshold-label   { font-size: 11px; color: var(--t3); margin-bottom: 4px; }
.ai-threshold-val     { font-size: 18px; font-weight: 700; }
.ai-threshold-hint    { font-size: 11px; color: var(--t4); margin-top: 4px; }
.ai-threshold-reject  { color: var(--danger); }
.ai-threshold-review  { color: var(--warning); }
.ai-threshold-approve { color: var(--success); }

/* Threshold bar */
.threshold-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
.threshold-bar-reject  { background: var(--danger-light);  transition: width .3s; }
.threshold-bar-review  { background: var(--warning-light); transition: width .3s; }
.threshold-bar-approve { background: var(--success-light); transition: width .3s; }
.threshold-bar-labels  { display: flex; justify-content: space-between; font-size: 10px; color: var(--t3); margin-top: 4px; }

/* API banner */
.ob-api-banner      { background: #E6F1FB; border: 1px solid #85B7EB; border-radius: 10px; padding: 16px 20px; display: flex; gap: 10px; }
.ob-api-banner-icon { font-size: 22px; flex-shrink: 0; }
.ob-api-banner-title { font-size: 13.5px; font-weight: 600; color: #0C447C; margin-bottom: 4px; }
.ob-api-banner-body  { font-size: 12.5px; color: #185FA5; line-height: 1.6; }
.ob-api-link         { color: #0C447C; font-weight: 600; }

/* API key row */
.api-key-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }

/* API test result */
.api-test-result  { margin-top: 8px; font-size: 12px; }
.api-test-pending { color: var(--t3); }
.api-test-ok      { color: var(--success-h); }
.api-test-fail    { color: var(--danger-h); }

/* API info box */
.api-info-box    { background: var(--surface2); border-radius: 8px; padding: 12px 14px; font-size: 12px; color: var(--t3); }
.api-info-title  { font-weight: 600; color: var(--t); margin-bottom: 6px; }
.api-info-steps  { padding-left: 16px; line-height: 1.9; }
.api-info-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ced0d1; }

/* Wide save button */
.btn-save-wide { min-width: 160px; }

/* Utility */
.pb-24   { padding-bottom: 24px; }
.border-r { border-right: 1px solid #ced0d1; }


/* ═══════════════════════════════════════════════════════════
   PAYROLL SETTINGS PAGE — payroll/settings.php
   ═══════════════════════════════════════════════════════════ */

/* 4-column form grid */
.form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.section-felx-content {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;margin-bottom: 0;}
.section-felx-content .contents {}
.section-felx-content .contents .heading {display: block;font-size: 12px;opacity: .6;margin-bottom: 5px;}
.section-felx-content .contents .value {display: block;font-size: 13px;font-weight: 400;}
.flex-grid-4 {}


/* Small input widths */
.max-w-80  { max-width: 80px; }
.max-w-100 { max-width: 100px; }
.gap-6     { gap: 6px; }
.gap-10    { gap: 10px; }

/* Salary structure preview strip */
.salary-preview        { background: var(--surface2); border: 1px solid #ced0d1; border-radius: 8px; padding: 14px 18px; }
.salary-preview-title  { font-weight: 600; margin-bottom: 8px; color: var(--t3); font-size: 12.5px; }
.salary-preview-values { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12.5px; }

/* Small toggle variant (transform:scale(.85) replaced) */
.toggle-sm { transform: scale(.85); transform-origin: right center; }

/* Deduction toggle row (PT, LOP, TDS, payslip options) */
.deduction-toggles    { display: flex; gap: 24px; flex-wrap: wrap; }
.deduction-toggle-item {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 13px;
}

/* Utility */
.mt-16 { margin-top: 16px; }


/* ═══════════════════════════════════════════════════════════
   SALARY SETUP PAGE — payroll/salary_setup.php
   ═══════════════════════════════════════════════════════════ */

/* 4-col stat grid */
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Main layout: table left, fixed panel right */
.salary-main { display: block; padding-right: 440px; }

/* Search input in panel header */
.sal-search-input { height: 30px; max-width: 200px; font-size: 12px; }

/* Table cell styles */
.td-emp-code    { font-family: var(--mono); font-size: 10.5px; color: var(--t3); }
.td-dept        { font-size: 12px; color: var(--t3); }
.sal-ctc-val    { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.sal-monthly-val { font-family: var(--mono); font-size: 12px; color: var(--t3); }
.tag-xs         { font-size: 10px; }
.cursor-pointer { cursor: pointer; }

/* Empty state */
.sal-empty-state { text-align: center; padding: 48px 24px; }
.sal-empty-icon  { font-size: 40px; margin-bottom: 12px; }
.sal-empty-title { font-size: 14px; font-weight: 600; color: var(--t); margin-bottom: 6px; }
.sal-empty-hint  { font-size: 12.5px; color: var(--t3); }

/* Editor meta line */
.ed-meta { font-size: 11.5px; color: var(--t3); }

/* CTC big input */
.ctc-input { font-size: 18px; font-weight: 700; font-family: var(--mono); height: 48px; }

/* Payslip preview section header */
.ps-section-hdr {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--t3); text-transform: uppercase; padding: 10px 0 6px;
}

/* Gross salary subtotal row */
.sal-subtotal-row {
  display: flex; justify-content: space-between;
  padding: 10px 0; border-top: 2px solid var(--border); margin-top: 6px;
}
.sal-subtotal-label { font-size: 13px; font-weight: 700; color: var(--t); }
.sal-subtotal-val   { font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--t); }

/* Net take-home row */
.sal-net-row {
  display: flex; justify-content: space-between;
  padding: 12px 20px; border-top: 2px solid var(--border); margin-top: 6px;
  background: var(--surface2);
  margin-left: -20px; margin-right: -20px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.sal-net-label { font-size: 14px; font-weight: 700; color: var(--t); }
.sal-net-val   { font-family: var(--mono); font-size: 16px; font-weight: 800; color: var(--success); }

/* Utility */
.h-44      { height: 44px; }
.mb-12     { margin-bottom: 12px; }
.mb-14     { margin-bottom: 14px; }
.mb-20     { margin-bottom: 20px; }
.text-primary  { color: var(--t); }
.text-danger   { color: var(--danger); }
.text-13   { font-size: 13px; }
.font-mono { font-family: var(--mono); }
.font-600  { font-weight: 600; }
.text-10   { font-size: 10px; }

.shift_header {margin-bottom: 0px;}
.shift_header .panel_title {}
.shift_header .shift_list {list-style: none;padding: 0;border-bottom: 0;}
.shift_header .shift_list > li {width:calc((100% - 40px) / 5);float:left;margin-right:10px;margin-left:0;margin-bottom:10px;list-style: none;border: 1px solid #ced0d1;border-radius: 6px;padding: 20px 20px 15px 20px;box-shadow: none;position: relative;overflow: hidden;background: #fff;}
.shift_header .shift_list > li:nth-child(5n+5) {float:left;margin-right:0px;}
.shift_header .shift_list > li .shift_details {margin-bottom: 10px;padding-bottom: 20px;border-bottom: 1px solid #ced0d1;}
.shift_header .shift_list > li .shift_details .shift_initials {width: 40px;height: 40px;border-radius: 6px;text-align: center;line-height: 38px;float: left;margin-right: 10px;}
.shift_header .shift_list > li .shift_details .shift_initials .txt {}
.shift_header .shift_list > li .shift_details .shift_info_container {width: calc(100% - 50px);float: RIGHT;text-align: left;}
.shift_header .shift_list > li .shift_details .shift_info_container .shift_title {font-size: 12px;font-weight: 600;color: #111;white-space: nowrap;font-family: 'Inter';}
.shift_header .shift_list > li .shift_details .shift_info_container .shift_title .sub {display: block;font-weight: 400;opacity:.6;}
.shift_header .shift_list > li .shift_action_container {}
.shift_header .shift_list > li .shift_action_container .shift_action_list {list-style: none;}
.shift_header .shift_list > li .shift_action_container .shift_action_list > li {display: inline-block;margin-left: 10px;}
.shift_header .shift_list > li .shift_action_container .shift_action_list > li:nth-child(1) {margin-left: 0;}
.shift_header .shift_list > li .shift_action_container .shift_action_list > li button {background: transparent;border: 0;opacity: .8;}
.shift_header .shift_list > li .shift_action_container .shift_action_list > li button:hover {opacity:1;cursor:pointer;}
.shift_header .shift_list > li .shift_action_container .shift_action_list > li button i {font-size: 14px;}
.shift_calendar_section {}
.shift_calendar_section .shift_toolbar_section {display:block;align-items:center;margin-bottom:12px;}
.shift_calendar_section .shift_toolbar_section .btn {float: left;height: 42px;line-height: 26px;margin-right: 10px;}
.shift_calendar_section .shift_toolbar_section .btn i {margin-right: 7px;float: left;font-size: 14px;line-height: 24px;}
.shift_calendar_section .shift_toolbar_section select {float: left;margin-right: 10px;}
.shift_calendar_section .shift_toolbar_section .form-select {float: left;margin-right: 10px;}
.shift_schedule_container {}

.employee_list_view.leave_type_view .employee_list_table .table_head .col1, .employee_list_view.leave_type_view .employee_list_table .table_head .col2, .employee_list_view.leave_type_view .employee_list_table .table_head .col3, .employee_list_view.leave_type_view .employee_list_table .table_head .col4, .employee_list_view.leave_type_view .employee_list_table .table_head .col5, .employee_list_view.leave_type_view .employee_list_table .table_head .col6, .employee_list_view.leave_type_view .employee_list_table .table_head .col7, .employee_list_view.leave_type_view .employee_list_table .table_head .col8, .employee_list_view.leave_type_view .employee_list_table .table_head .col9, .employee_list_view.leave_type_view .employee_list_table .table_head .col10 {padding: 8px 15px;border-right: 1px solid #ced0d1;}
.employee_list_view.leave_type_view .employee_list_table .col {padding: 7px 15px;height: 48px;border-right: 1px solid #ced0d1;}
.employee_list_view.leave_type_view .employee_list_table .col1 {width: 75px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col2 {width: calc(100% - 1015px);float: left;}
.employee_list_view.leave_type_view .employee_list_table .col2 .leave_color {display: block;width: 24px;height: 24px;border-radius: 6px;float: left;margin-right: 10px;}
.employee_list_view.leave_type_view .employee_list_table .col2 .td-bold {display: block;font-size: 12px;font-weight: 400;color: #111;white-space: nowrap;font-family: 'Inter';opacity: .8;width: calc(100% - 34px);float: right;line-height: 24px;}
.employee_list_view.leave_type_view .employee_list_table .col3 {width: 85px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col4 {width: 185px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col5 {width: 130px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col5 .title {}
.employee_list_view.leave_type_view .employee_list_table .col5 .title .tag {}
.employee_list_view.leave_type_view .employee_list_table .col5 .title .tag.tag-gray {}
.employee_list_view.leave_type_view .employee_list_table .col6 {width: 105px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col7 {width: 95px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col8 {width: 90px;float: left;text-align: center;}
.employee_list_view.leave_type_view .employee_list_table .col9 {width: 100px;float: left;text-align: center;border-right: 1px solid #ced0d1!important;}
.employee_list_view.leave_type_view .employee_list_table .col10 {width: 150px;float: right;text-align: center;border-right: 0!important;}
.employee_list_view.leave_type_view .employee_list_table .col10 .view_small_btn {position:relative;top:3px;cursor:pointer;}

.leave-type-modal {overflow:hidden;padding:0!important;width: 500px;}

.filter_row {}
.filter_row {}

.asset_config_box {}
.asset_config_box .table_view {width:calc(100% - 410px);float:left;}
.asset_config_box .settings-card {width:400px;float:right;}
.asset_spec_container, .assignment_history_box, .maintenance_history_box {width:calc(100% - 410px);float:left;margin-bottom:10px;}
.depreciation_box, .edit_box {width: 400px;float: right;margin-bottom:10px;}

.asset_spec_container {padding:0;overflow: hidden;}
.asset_spec_container .asset_specification_list {}
.asset_spec_container .asset_specification_list > li {font-family:'Inter';width:calc(100% / 3);float:left;}
.asset_spec_container .asset_specification_list > li:nth-child(3n+3) {float:right}
.asset_spec_container .asset_specification_list > li .heading {display:block;border-bottom: 1px solid #ced0d1;border-right: 1px solid #ced0d1;background: #d1d5db;font-size: 13px;color: #111;font-weight: 600;width: 50%;float: left;padding: 8px 15px;}
.asset_spec_container .asset_specification_list > li .value {display:block;display:block;border-bottom: 1px solid #ced0d1;border-right: 1px solid #ced0d1;font-size:13px;font-weight:400;width: 50%;float: right;padding: 8px 15px;}


.cm-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ct);font-size:14px;min-height:100vh}
.cm-header{background:#fff;border-bottom:1px solid var(--cb);padding:18px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.cm-header-left{display:flex;align-items:center;gap:12px}
.cm-icon{width:40px;height:40px;background:var(--cp-light);border-radius:var(--rs);display:flex;align-items:center;justify-content:center}
.cm-icon svg{width:18px;height:18px;color:var(--cp)}
.cm-title{font-size:16px;font-weight:600}.cm-sub{font-size:11px;color:var(--ctm);margin-top:1px}
.cm-actions{display:flex;gap:8px;align-items:center}
.sp{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500}
.sp-dot{width:6px;height:6px;border-radius:50%}
.sp-on{background:var(--cs-bg);color:#1a7a56}.sp-on .sp-dot{background:var(--cs)}
.sp-off{background:var(--cd-bg);color:#9b1c1c}.sp-off .sp-dot{background:var(--cd)}
.sp-dis{background:#ecf0f1;color:var(--ctm)}.sp-dis .sp-dot{background:#9ca3af}

.cm-body{padding:24px 28px;max-width:1080px;margin:0 auto}
.tab-nav{display:flex;gap:2px;background:#f0f1f5;border-radius:var(--r);padding:3px;margin-bottom:24px;width:fit-content}

.tab-btn svg{width:13px;height:13px}

.sc{background:#fff;border:1px solid var(--cb);border-radius:var(--r);padding:14px 16px}
.sc.p{border-left:3px solid var(--cp)}.sc.s{border-left:3px solid var(--cs)}.sc.a{border-left:3px solid var(--ca)}.sc.w{border-left:3px solid var(--cw)}
.sl{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ctm);margin-bottom:4px}
.sv{font-size:20px;font-weight:700}.ss{font-size:10px;color:var(--ctm);margin-top:2px}
.hb{height:5px;background:#e5e7eb;border-radius:3px;margin-top:5px;overflow:hidden}
.hf{height:100%;background:var(--cs);border-radius:3px;transition:width .5s}
.card{background:#fff;border:1px solid var(--cb);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.card-hdr{padding:13px 18px;border-bottom:1px solid var(--cb);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.card-title svg{width:15px;height:15px;color:var(--cp)}
.card-body{padding:18px}
.tr{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--cb)}
.tr:last-child{border-bottom:none;padding-bottom:0}.tr:first-child{padding-top:0}
.tl{font-size:13px;font-weight:500}.td{font-size:11px;color:var(--ctm);margin-top:2px}
.sw{position:relative;width:40px;height:22px;cursor:pointer;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.st{position:absolute;inset:0;background:#d1d5db;border-radius:11px;transition:background .2s}
.sw input:checked~.st{background:var(--cp)}
.sth{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw input:checked~.st~.sth{transform:translateX(18px)}
.gg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gc{border:1px solid var(--cb);border-radius:var(--r);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;transition:border-color .15s}
.gc:hover{border-color:var(--cp-mid)}
.gcl{display:flex;align-items:center;gap:10px}
.gi{width:34px;height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gi svg{width:15px;height:15px}
.ib{background:#eff6ff;color:#1d4ed8}.ig{background:#f0fdf4;color:#16a34a}.ip{background:#faf5ff;color:#7c3aed}.io{background:#fff7ed;color:#c2410c}.it{background:#f0fdfa;color:#0f766e}.ii{background:#eef2ff;color:#4338ca}.igr{background:#efefef;color:#4b5563}
.gn{font-size:12px;font-weight:500}.gttl{font-size:10px;color:var(--ctm)}
.fg{margin-bottom:14px}
.fl{display:block;font-size:10px;font-weight:500;color:var(--ctm);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.fi{width:100%;padding:8px 10px;border:1px solid var(--cb);border-radius:var(--rs);font-size:12px;color:var(--ct);background:#fff;font-family:inherit;transition:border-color .15s}
.fi:focus{outline:none;border-color:var(--cp);box-shadow:0 0 0 3px rgba(52,62,123,.08)}
.fr{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fh{font-size:10px;color:var(--ctm);margin-top:3px}
.test-ok{display:none;align-items:center;gap:6px;background:var(--cs-bg);border:1px solid #a7f3d0;color:#1a7a56;padding:8px 12px;border-radius:var(--rs);font-size:12px;font-weight:500;margin-top:10px}
.test-err{display:none;align-items:center;gap:6px;background:var(--cd-bg);border:1px solid #fecaca;color:#9b1c1c;padding:8px 12px;border-radius:var(--rs);font-size:12px;font-weight:500;margin-top:10px}
.sdiv{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ctm);margin:18px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--cb)}
.ibox{background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--rs);padding:10px 12px;font-size:11px;color:#1d4ed8;margin-bottom:14px;display:flex;gap:7px;line-height:1.5}
.ibox svg{width:13px;height:13px;flex-shrink:0;margin-top:1px}
.cf-badge{display:inline-flex;align-items:center;background:#fffbeb;color:#92400e;border:1px solid #fde68a;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:500;margin-left:6px}
pre.htsnip{background:#f8f9fa;border:1px solid var(--cb);border-radius:var(--rs);padding:12px;font-size:10px;overflow-x:auto;line-height:1.6;color:var(--ct)}
.toast-c{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:6px}
.toast{background:#065f46;color:#fff;padding:8px 14px;border-radius:var(--rs);font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;animation:su .2s ease;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.toast.err{background:#7f1d1d}
@keyframes su{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:768px){.stats-grid,.fr,.fr2,.fr4,.gg{grid-template-columns:1fr}.cm-body{padding:16px}}

.section_list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}
.section_list.one-third {grid-template-columns: 1fr 2fr;}
.section_list.two-third {grid-template-columns: 2fr 1fr;}
.section_list.one-half {grid-template-columns: 1fr 1fr;}
/*.section_list > * {flex:0 0 calc((100% - 20px) / 3);}*/
.section_list > li {}

.hint {font-size: 12px;display: flex;gap: 10px;justify-content: space-between;}
.section_list > li.settings-card {border-radius: 6px;border: 1px solid #ced0d1;box-shadow: none;position: relative;overflow: hidden;background: #fff;padding: 0;}
.section_list > li.settings-card .empty_row {display:block;font-size:12px;border-bottom:1px dashed #dbdbdb;padding: 10px 15px;}
.section_list > li.settings-card .ctc_container {}
.section_list > li.settings-card .ctc_container .form-grid-2 {text-align: center;margin: 0;border-bottom: 1px solid #ced0d1;}
.section_list > li.settings-card .ctc_container .ctc_big {padding: 15px;font-size: 16px;font-family: 'Plus Jakarta Sans';font-weight: 600;}
.section_list > li.settings-card .ctc_container .ctc_big .sub {display:block;font-size: 12px;color: #111;margin-top: 5px;font-weight: 400;letter-spacing: 0px;opacity: .6;}
.section_list > li.settings-card .img_icon_header {display: grid;gap: 10px;grid-template-columns: 48px 1fr;padding: 15px;border-bottom: 1px solid #ced0d1;}
.section_list > li.settings-card .img_icon_header.img {grid-template-columns: auto 1fr;}
.section_list > li.settings-card .img_icon_header .icon_container {border-radius: 6px;height: 48px;overflow: hidden;text-align: center;line-height: 48px;}
.section_list > li.settings-card .img_icon_header .icon_container i {color:#fff;font-size: 24px;line-height: 48px;}
.section_list > li.settings-card .img_icon_header img {}
.section_list > li.settings-card .img_icon_header .title_section {padding: 0;}
.section_list > li.settings-card .img_icon_header .title_section .section_title {padding: 0;border: 0;}
.section_list > li.settings-card .img_icon_header .title_section .section_title .config_container {display: inline-flex;gap: 5px;margin-left: 10px;}
.section_list > li.settings-card .img_icon_header .title_section .section_title .config_container .pill {font-size: 10px;font-weight: 400;padding: 0px 8px;border-radius: 20px;white-space: nowrap;}
.section_list > li.settings-card .img_icon_header .title_section .section_title .config_container .pill i {font-size: 10px;}

.section_title.full {display: block;}
.section_list > li.settings-card .section_title {display: flex;justify-content: space-between;font-size: 13px;line-height: 20px;padding: 10px 15px;}
.section_list > li.settings-card .section_title.full {display: block;}
.section_list > li.settings-card .section_title .sub {display: block;font-size: 12px;color: #111;line-height: 16px;font-weight: 400;letter-spacing: 0px;opacity: .6;text-align: right;}
.section_list > li.settings-card .section_title .sub .sub_sub_text {display: block;font-size: 11px;color: #111;line-height: 11px;font-weight: 400;letter-spacing: 0px;opacity: .8;margin-top: 5px;}
.section_list > li.settings-card .section_title.full .sub {text-align: left;margin-top: 0px;}
.section_list > li.settings-card.sub_item_container {}
.section_list > li.settings-card.sub_item_container .sub_items {}
.section_list > li.settings-card.sub_item_container .sub_items .sub_item_list {}
.section_list > li.settings-card.sub_item_container .sub_item_list > li {display:grid;grid-template-columns: 120px 1fr;border-top:1px dashed #dbdbdb;padding: 10px 15px;font-size: 12px;justify-content: space-between;opacity: .8;align-items: center;}
.section_list > li.settings-card.sub_item_container .sub_item_list > li:nth-child(1) {border-top:0;}
.section_list > li.settings-card.sub_item_container .sub_item_list > li:nth-child(odd) {background: #fff;}
.section_list > li.settings-card.sub_item_container .sub_item_list > li:nth-child(even) {background: #f9f9f9;}
.section_list > li.settings-card.sub_item_container .sub_item_list > li > .value {text-align:right;}
.section_list > li.settings-card.sub_item_container .sub_item_list > li .stat-lbl {}
.section_list > li.settings-card.sub_item_container .sub_item_list > li .stat-val {text-align:right;font-weight: 500; color: var(--t); letter-spacing: -0.5px; line-height: 1; margin-bottom: 5px;}
.section_list > li.settings-card.sub_item_container .sub_item_list > li.total {}
.section_list > li.settings-card.sub_item_container .sub_item_list > li.total .stat-lbl, .sub_item_container .sub_item_list > li.total .stat-val {font-weight: 600;}
.section_list > li.settings-card.sub_item_container .sub_items .button_list {display:flex;flex-wrap: wrap;gap: 0 10px;padding: 15px;border-top: 1px solid #ced0d1;}
.section_list > li.settings-card.sub_item_container .sub_items .button_list > * {flex: 0 0 calc(50% - 5px);}
.section_list > li.settings-card.sub_item_container .sub_items .button_list > li {}

.section_list_full {}
.section_list_full .settings-card {}
.section_list_full .settings-card .form-group {margin-bottom:10px;}
.section_list_full > li {margin-top:10px;}
.section_list_full > li:nth-child(1) {margin-top:10px;}
.inactive {filter: grayscale(1);}
.section_container {}
.section_container .section_list {}
.section_container .section_list li.settings-card {border:0;border-right:1px solid #ced0d1;border-bottom:1px solid #ced0d1;padding: 0;}
.section_container .section_list li.settings-card .section-title, .section_container .section_list li.settings-card .inner_section {padding:15px;margin:0;}
.section_container .section_list li.settings-card .inner_section .api_key_box {display: grid;grid-template-columns: 5fr 1fr 1fr;gap: 10px;}

.empty_box {text-align:center;padding:20px;color:var(--t4);font-size:13px;border:2px dashed var(--border2);border-radius:4px;margin-bottom:15px;}

/* Organisation Chart */
.tree-body { padding: 8px 0; }
.tree-row {
    display: flex;
    align-items: center;
    height: 48px;
    border-radius: 4px;
    padding: 0 10px;
    cursor: pointer;
    transition: background 0.1s;
}
.tree-row:hover { background: var(--surface2); }
.tree-toggle {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 1px solid #ced0d1;
    background: var(--surface2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    color: var(--t2);
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 8px;
    user-select: none;
}
.tree-toggle.leaf { visibility: hidden; }
.tree-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600;
    flex-shrink: 0;
    margin-right: 10px;
    overflow: hidden;
}
.tree-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tree-info { flex: 1; min-width: 0; }
.tree-name { font-size: 13px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-sub  { font-size: 11px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 12px; }
.tree-dept-pill { font-size: 10px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.tree-code { font-size: 11px; color: var(--t3); font-family: monospace; min-width: 60px; }
.tree-count { font-size: 10px; color: var(--t3); background: var(--surface2); border: 1px solid #ced0d1; border-radius: 20px; padding: 1px 7px; white-space: nowrap; }
.tree-children { display: block; }
.tree-children.collapsed { display: none; }
.oc-search-wrap input {
    height: 32px; font-size: 13px; padding: 0 10px;
    border: 1px solid #ced0d1; border-radius: 4px;
    background: var(--surface2); color: var(--t1); width: 200px;
}
.no-emp { padding: 40px; text-align: center; color: var(--t3); font-size: 13px; }

/* ── Aria Sidebar fills .page-right naturally ─────────────── */
.aria-sidebar {display: flex;flex-direction: column;width: 100%;height: calc(100vh - 91px);background: var(--surface1, #fff);overflow: hidden;border: 1px solid #ced0d1;border-radius: 6px;}

/* ── Header ──────────────────────────────────────────── */
.aria-sb-head {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    height: 44px;
    flex-shrink: 0;
}
.aria-sb-tabs {
    display: flex;
    gap: 2px;
    flex: 1;
}
.aria-sb-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--t2, #6b7280);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    white-space: nowrap;
}
.aria-sb-tab:hover { background: var(--surface2, #f5f5f5); color: var(--t1, #111); }
.aria-sb-tab.active {
    background: var(--primary-light, rgba(52,105,231,0.1));
    color: var(--primary, #111);
}
.aria-sb-tab i { font-size: 11px; }

/* ── Panel ────────────────────────────────────────────── */
.aria-sb-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.aria-sb-hidden { display: none !important; }

/* ── Chat messages ────────────────────────────────────── */
.aria-sb-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}
.aria-faq-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--t3, #9ca3af);
    background: var(--surface2, #f5f5f5);
    border-radius: 4px;
    padding: 6px 10px;
    flex-shrink: 0;
}
.aria-faq-notice i { font-size: 10px; }
.aria-sb-msg { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.aria-sb-bot { align-items: flex-start; }
.aria-sb-user { align-items: flex-end; }
.aria-sb-bubble {
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 90%;
}
.aria-sb-bot .aria-sb-bubble {
    background: var(--surface2, #f5f5f5);
    color: var(--t1, #111);
    border-radius: 2px 10px 10px 10px;
}
.aria-sb-user .aria-sb-bubble {
    background: var(--primary, #111);
    color: #fff;
    border-radius: 10px 2px 10px 10px;
}
.aria-sb-time { font-size: 10px; color: var(--t3, #9ca3af); padding: 0 4px; }

/* Typing indicator */
.aria-sb-typing .aria-sb-bubble {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
}
.aria-sb-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--t3, #9ca3af);
    animation: ariaDot 1.2s infinite;
}
.aria-sb-dot:nth-child(2) { animation-delay: 0.2s; }
.aria-sb-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ariaDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Chips */
.aria-sb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
}
.aria-sb-chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--surface2, #f5f5f5);
    color: var(--t2, #6b7280);
    cursor: pointer;
    border: 1px solid var(--border, #e5e7eb);
    transition: background 0.1s;
    white-space: nowrap;
}
.aria-sb-chip:hover {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* Input row */
.aria-sb-input-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--border, #e5e7eb);
    flex-shrink: 0;
}
.aria-sb-textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--t1, #111);
    background: var(--surface1, #fff);
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
    font-family: inherit;
}
.aria-sb-textarea:focus { outline: none; border-color: var(--primary); }
.aria-sb-send {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--primary, #111);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background 0.1s;
}
.aria-sb-send:hover { background: var(--primary-h, #2563eb); }
.aria-sb-send:disabled { background: var(--t3); cursor: not-allowed; }

/* ── Compose tab ──────────────────────────────────────── */
.aria-sb-compose-wrap {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.aria-sb-compose-field { display: flex; flex-direction: column; gap: 4px; }
.aria-sb-label {
    font-size: 11px; font-weight: 600; color: var(--t2);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.aria-sb-select {
    height: 32px;
    border: 1px solid #ced0d1;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    color: var(--t1);
    background: var(--surface1);
}
.aria-sb-compose-btn {
    height: 36px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    flex-shrink: 0;
}
.aria-sb-compose-btn:hover { background: var(--primary-h); }
.aria-sb-compose-result { display: flex; flex-direction: column; gap: 8px; }
.aria-sb-compose-output {
    background: var(--surface2);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--t1);
    white-space: pre-wrap;
    max-height: 260px;
    overflow-y: auto;
}
.aria-sb-compose-actions { display: flex; gap: 6px; }
.aria-sb-action-btn {
    flex: 1; height: 30px; font-size: 12px;
    border: 1px solid #ced0d1; border-radius: 6px;
    background: var(--surface1); color: var(--t2); cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.aria-sb-action-btn:hover { background: var(--surface2); color: var(--t1); }

/* ── Insights tab ─────────────────────────────────────── */
.aria-sb-insights-wrap {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aria-sb-insights-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--t3);
    padding: 20px 0;
    justify-content: center;
}
.aria-sb-insight-card {
    background: var(--surface2);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--t1);
    border-left: 3px solid var(--primary);
    flex-shrink: 0;
}
.aria-sb-insight-card .aria-sb-insight-title {
    font-weight: 600; font-size: 12px; color: var(--t2);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em;
}


.billing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.billing-stat{background:var(--surface2);border-radius:8px;padding:14px 16px}
.billing-stat-label{font-size:11px;color:var(--t3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.billing-stat-value{font-size:22px;font-weight:600;color:var(--t)}
.billing-stat-sub{font-size:11px;color:var(--t3);margin-top:2px}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:8px}
.module-card{background:var(--surface);border:1px solid #ced0d1;border-radius:8px;overflow:hidden;transition:box-shadow .15s}
.module-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06)}
.module-card.active{border-color:var(--success);border-width:1.5px}
.module-card.trial{border-color:var(--warning);border-width:1.5px}
.module-card.locked{opacity:.75}
.module-card-header{padding:14px 16px;display:flex;align-items:flex-start;gap:12px}
.module-icon-wrap{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.module-icon-wrap i{font-size:18px}
.module-card-name{font-size:14px;font-weight:600;color:var(--t);margin-bottom:2px}
.module-card-desc{font-size:11.5px;color:var(--t3);line-height:1.5}
.module-features{padding:0 16px 12px;list-style:none;margin:0}
.module-features li{font-size:11.5px;color:var(--t2);padding:2px 0;display:flex;align-items:center;gap:6px}
.module-features li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--border2);flex-shrink:0}
.module-card-footer{padding:12px 16px;border-top:1px solid #ced0d1;display:flex;align-items:center;justify-content:space-between}
.module-price{font-size:13px;font-weight:600;color:var(--t)}
.module-price-sub{font-size:10px;color:var(--t3)}

.pill-active{background:#EAF3DE;color:#27500A}
.pill-trial{background:#FAEEDA;color:#633806}
.pill-locked{background:var(--surface3);color:var(--t4)}
.pill-suspended{background:#FCEBEB;color:#791F1F}



.usage_list {display: grid;grid-template-columns: 1fr 1fr;gap: 10px 15px;}
.usage_list > li {}
.usage_list > li:nth-child(6n+6) {}
.usage_list > li .heading {display: block;font-size: 13px;font-family: 'Inter';opacity: .8;margin-bottom: 0px;float: left;width: calc(100% - 100px);}
.usage_list > li .values {font-family: 'Product Sans';font-size: 14px;font-weight: 500;color: var(--t);letter-spacing: -0.5px;line-height: 1;margin-top: 0px;margin-bottom: 15px;display: block;float: right;text-align: right;max-width: 100px;}
.usage_list > li i.icon {height: 38px;width: 38px;text-align: center;float: right;border: 1px solid #ced0d1;border-radius: 6px;padding: 0;font-size: 18px;line-height: 38px;position: relative;top: 0;background: #d1d5db;color: #111;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.usage_list > li .usage-bar-wrap {}
.usage_list > li .usage-bar-wrap .usage-bar-track {height: 10px;background: rgb(243 245 249);border-radius: 20px;overflow: hidden;border: 0px solid rgba(52, 105, 231, 0.15);}
.usage_list > li .usage-bar-fill{height:100%;border-radius:2px;transition:width .3s}
.usage_list > li .usage-bar-fill.safe{background:var(--success)}
.usage_list > li .usage-bar-fill.warn{background:#EF9F27}
.usage_list > li .usage-bar-fill.danger{background:var(--danger)}
.cat-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin:20px 0 8px}
.contact-admin{background:var(--surface2);border:1px dashed var(--border2);border-radius:6px;padding:6px 10px;font-size:11px;color:var(--t3);text-align:center}





/* Recruitment */
/* ── Page header ── */
.rc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.rc-header-left h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--t);
    margin: 0;
}
.rc-header-left p {
    font-size: 12px;
    color: var(--t3);
    margin: 2px 0 0;
}
.rc-header-actions { display: flex; gap: 8px; align-items: center; }

/* ── Stats strip ── */
.rc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.rc-stat {
    background: var(--surface);
    border: 1px solid #ced0d1;
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.rc-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.rc-stat-val { font-size: 22px; font-weight: 700; color: var(--t); line-height: 1; }
.rc-stat-lbl { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* ── Active jobs strip ── */
.rc-jobs-strip {
    background: var(--surface);
    border: 1px solid #ced0d1;
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rc-jobs-strip-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    margin-right: 4px;
}
.rc-job-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.rc-job-pill:hover { background: #DBEAFE; }
.rc-job-pill .applicants {
    font-size: 10px;
    background: #1D4ED8;
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
}

/* ── Pipeline tabs ── */
.rc-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 0;
    overflow-x: auto;
    gap: 0;
    background: var(--surface);
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid #ced0d1;
    border-bottom: none;
}
.rc-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    transition: color .15s, border-color .15s;
    position: relative;
}
.rc-tab:hover { color: var(--t2); }
.rc-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.rc-tab-icon { font-size: 12px; }

.rc-tab.active .rc-tab-badge {
    background: var(--primary);
    color: #fff;
}

/* ── Tab panel ── */
.rc-panel {}
.rc-tab-content { display: none; }
.rc-tab-content.active { display: block; }

/* ── Candidate table ── */
.rc-table { width: 100%; border-collapse: collapse; }
.rc-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t3);
    border-bottom: 1px solid #ced0d1;
    background: var(--bg);
    white-space: nowrap;
}
.rc-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #ced0d1;
    vertical-align: middle;
    font-size: 13px;
}
.rc-table tr:last-child td { border-bottom: none; }
.rc-table tr:hover td { background: var(--bg); }

/* ── Candidate cell ── */
.rc-candidate {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rc-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #1D4ED8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.rc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rc-name { font-weight: 600; color: var(--t); font-size: 13px; }
.rc-code { font-size: 11px; color: var(--t3); font-family: var(--mono); }

/* ── AI score badge ── */
.rc-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 700;
}
.rc-score-a  { background: #DCFCE7; color: #15803D; }
.rc-score-b  { background: #DBEAFE; color: #1D4ED8; }
.rc-score-c  { background: #FEF9C3; color: #854D0E; }
.rc-score-d  { background: #FEE2E2; color: #B91C1C; }
.rc-score-na { background: var(--border); color: var(--t3); }

/* ── AI risk badge ── */
.rc-risk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    background: #FEF2F2;
    color: #B91C1C;
}

/* ── Interview status ── */
.rc-interview-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}
.status-pending   { background: #FEF9C3; color: #854D0E; }
.status-confirmed { background: #DCFCE7; color: #15803D; }
.status-completed { background: #DBEAFE; color: #1D4ED8; }
.status-cancelled { background: #FEE2E2; color: #B91C1C; }

/* ── Loading state ── */
.rc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--t3);
    gap: 10px;
    font-size: 13px;
}
.rc-spinner {
    width: 20px; height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.rc-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--t3);
}
.rc-empty i { font-size: 40px; margin-bottom: 12px; display: block; opacity: .3; }
.rc-empty p { font-size: 13px; margin: 0; }

/* ── Action buttons ── */
.rc-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Schedule modal form ── */
.rc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rc-form-group { display: flex; flex-direction: column; gap: 4px; }
.rc-form-group.span2 { grid-column: span 2; }
.rc-form-label { font-size: 11px; font-weight: 600; color: var(--t2); }
.rc-form-input, .rc-form-select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #ced0d1;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--t);
    outline: none;
    background: var(--surface);
}
.rc-form-input:focus, .rc-form-select:focus {
    border-color: var(--primary);
}
textarea.rc-form-input { height: 70px; padding: 8px 10px; resize: vertical; }

/* ── WS connection indicator ── */
.ws-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--t3);
}
.ws-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--t4);
    transition: background .3s;
}
.ws-dot.connected { background: #22c55e; }
.ws-dot.error     { background: #ef4444; }

/* ============================================================
   Session 6.2 — Onboard Tab Styles
   Append to: public/css/hrms.css
   ============================================================ */

/* ── Success banner ─────────────────────────────────────── */
.onboard-success-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 4px;
  margin-bottom: 16px;
}
.osb-icon { font-size: 32px; flex-shrink: 0; }
.osb-body { flex: 1; }
.osb-title { font-size: 15px; font-weight: 600; color: #15803d; }
.osb-sub   { font-size: 13px; color: #166534; margin-top: 2px; }

/* ── Onboard panel ──────────────────────────────────────── */
.ob-onboard-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ob-onboard-intro {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* ── Documents summary chips ────────────────────────────── */
.ob-docs-summary { border-top: 1px solid #ced0d1; padding-top: 16px; }
.ob-docs-summary-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.ob-docs-summary-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
}
.ob-doc-chip.verified   { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.ob-doc-chip.unverified { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.ob-docs-note { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* ── Confirm checklist ──────────────────────────────────── */
.ob-confirm-checklist {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ob-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
.ob-check-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Action row ─────────────────────────────────────────── */
.ob-onboard-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-onboard {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
}
.btn-onboard:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ob-onboard-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Empty state ────────────────────────────────────────── */
.ob-empty-state {
  text-align: center;
  padding: 60px 20px;
}
.ob-empty-icon  { font-size: 40px; margin-bottom: 12px; }
.ob-empty-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.ob-empty-sub   { font-size: 13px; color: var(--text-secondary); max-width: 400px; margin: 0 auto 12px; }
.ob-empty-stage { font-size: 12px; color: var(--text-muted); }

/* ── Stage badge ────────────────────────────────────────── */
.stage-onboarded {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
}


.section_card {background: #fff;padding: 0px;border-bottom: 1px solid #ced0d1;border-radius: 0px;margin-bottom:0px;}
.section_card.small_section {}
.section_card.small_section form {padding:15px;}
.section_card.small_section .inner_section {margin-bottom: 15px;}
.section_card.small_section .inner_section .title {font-size: 12px;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #cccc;color: #2449e0;font-weight: 600;}
.section_card.small_section .flash {padding:15px;border-radius: 6px;font-size: 12px;}
.section_card.small_section .heading_button_section {display: flex;justify-content: space-between;border-bottom: 1px solid #ced0d1;padding-bottom: 15px;margin-bottom: 15px;}
.section_card.small_section .heading_button_section .section_title {border-bottom: 0px solid #dbdbdb;padding-bottom: 0px;}
.section_card.small_section .heading_button_section .small_right_button_section {display: flex;gap: 5px;}
.section_card.small_section .heading_button_section .small_right_button_section .btn {height: 36px;width: 36px;border: 1px solid #999;background: #fff;color: #111;border-radius: 4px;font-weight: 300;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.section_card.small_section .heading_button_section .small_right_button_section .btn i {margin: 0;}
.section_card.small_section .section_title {border-bottom: 1px solid #ced0d1;padding: 15px;margin-bottom: 0px;font-size: 13px;line-height: 13px;}
.notesDisplay {font-size: 12px;line-height: 20px;padding: 10px 15px;background: rgb(255 249 229);margin-bottom: 15px;border-radius: 4px;border: 1px dashed #f1bd22;}
.employee_card {}
.employee_header_section {border-radius: 8px;overflow: hidden;display: grid;grid-template-columns: 76px 1fr;gap: 15px;}
.employee_header_section .emp_avatar_section, .employee_header_section .avatarInitials {position:relative;cursor:pointer;width:76px;height:76px;min-width:76px;min-height:76px;overflow:hidden;background-size:cover;background-position:center center;float:left;margin-right:15px;border-radius:8px;overflow:hidden;}
.employee_header_section .emp_avatar_section img {border-radius:8px;}
.employee_header_section .avatarInitials {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--primary);font-family:var(--display)}
.avatarCameraBadge{
    position:absolute;
    background:rgb(0 0 0 / 50%);
    color:#fff;
    border-radius:8px;
    width:76px;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    pointer-events:none;

    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
}
.green {color:#1e8b5f;}
.avatarSpinner {display:none;position:absolute;inset:0;border-radius:8px;background:rgba(0,0,0,0.25);align-items:center;justify-content:center;z-index:3}
.employee_header_section .employee_name_section {}
.employee_header_section .employee_name_section .name {font-size: 14px;line-height: 20px;color: #111;font-family: 'Inter';font-weight: 600;margin-bottom:10px;}
.employee_header_section .employee_name_section .name .designation {display:block;font-weight: 400;font-size: 12px;line-height: 18px;opacity:.6;}
.employee_header_section .employee_name_section .name .designation .copy_item {display: inline-block;margin-left: 0px;cursor:pointer;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.employee_header_section .employee_name_section .name .designation .copy_item:hover {color:#1e8b5f;}
.employee_header_section .employee_name_section .name .designation .copy_item .green {color:#1e8b5f;}
.employee_header_section .employee_name_section .name .designation .copy_item i {font-size: 12px;line-height: 18px;}
.employee_header_section .employee_name_section ul.feat_list {margin-bottom: 10px;}
.employee_header_section .employee_name_section ul.feat_list > li {}
.employee_header_section .employee_name_section ul.feat_list > li.designation {font-size: 13px;line-height: 20px;opacity: .8;}
.employee_header_section .employee_name_section ul.feat_list > li.department {font-size: 12px;line-height: 18px;opacity: .6;}

.employee_header_section .employee_name_section ul.status_box {display: flex;gap: 5px;}
.employee_header_section .employee_name_section ul.status_box > li {}
.employee_header_section .employee_name_section ul.status_box > li:nth-child(1) {}

.employee_header_section .employee_name_section ul.status_box > li .status {font-size: 11px;line-height: 14px;padding: 4px 6px;font-weight: 400;font-family: 'Inter';border-radius: 3px;letter-spacing: 0px;background: #ecf0f1;color: #555;display:flex;gap:3px;}
.employee_header_section .employee_name_section ul.status_box > li .status i {font-size: 11px;line-height: 14px;}
.employee_header_section .employee_name_section ul.status_box > li .status.gray {background: #ecf0f1;color: #555;border: 1px solid #ccc;}
.employee_header_section .employee_name_section ul.status_box > li .status.green {background: #37b180;color: #fff;border: 1px solid #37b180;}
.employee_header_section .employee_name_section ul.status_box > li .status.lg_green, .summery_chips .chip.lg_green {background: #e0fbf1;color: #247c27;border: 1px solid #9be3c8;}
.employee_header_section .employee_name_section ul.status_box > li .status.red, .summery_chips .chip.red {background: #FCEBEB; border: 1px solid #F09595; color: #A32D2D;}
.employee_header_section .employee_name_section ul.status_box > li .status.amber, .summery_chips .chip.amber {background: #FAEEDA; border: 1px solid #EF9F27; color: #633806;}
.employee_header_section .employee_name_section ul.status_box > li .status.blue, .summery_chips .chip.blue {background: #eff6ff;color: #1d4ed8;border: 1px solid #bcceff;}
.employee_header_section .employee_name_section ul.status_box > li .status.purple, .summery_chips .chip.purple {background: #f2ebff;color: #673AB7;border: 1px solid #ddcff7;}
.employee_header_section .employee_name_section ul.status_box > li .emp_type {}
.employee_header_section .employee_name_section ul.status_box > li .emp_type.candidate {background: #d0eaff;color: #004883;}
.employee_header_section .employee_name_section ul.status_box > li .emp_type.employee {background: #e8dbff;color: #6334b7;}

.employee_card .emp_code {padding: 10px;border-radius: 6px;text-align: center;background: #ecf0f1;font-size: 12px;font-family: 'Inter';letter-spacing: 1px;font-weight: 600;border: 1px solid #ced0d1;margin-bottom: 20px;}
.employee_card .emp_code i {float:left;width:80px;text-align: left;}
.employee_card .emp_code .code {width:calc(100% - 160px);float:left;text-align:center;}
.employee_card .emp_code .copy_item {width:80px;float:right;text-align: right;font-size:12px;color:#111;opacity:.6;cursor:pointer;font-weight:400;letter-spacing: 0;}
.employee_card .emp_stat_list {display: flex;flex-wrap: wrap;gap: 20px 10px;margin-bottom: -20px;}
.employee_card .emp_stat_list > * {flex: 0 0 calc(50% - 5px);}
.employee_card .emp_stat_list > li {}
.employee_card .emp_stat_list > li .heading, .contact_list > li .heading {display: block;font-size: 13px;opacity: .6;margin-bottom: 5px;}
.employee_card .emp_stat_list > li .value,.contact_list > li .value {display: block;font-size: 13px;font-weight: 400;}

.contact_list {list-style:none;padding:0;margin:0;}
.contact_list > li:first-child {margin-top:0;}
.contact_list > li {display:flex;align-items:flex-start;gap:10px;margin-top:10px;}
.contact_list > li i {width:16px;font-size: 16px;}
.contact_list > li .content {display:flex;flex:1;}
.contact_list > li .heading {width:100px;flex-shrink:0;margin:0;font-weight:400;}
.contact_list > li .value {flex:1;word-break:break-word;}
.contact_list > li .value.flex {display: flex;justify-content: space-between;align-items: center;}
.contact_list > li .value.flex .view_button {text-decoration: none;font-weight: 400;color: #111;opacity: .6;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms;}
.contact_list > li .value.flex .view_button:hover {opacity: 1;}

.button_list_flex {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;text-align: center;}
.button_list_flex > li {text-align:center;}
.button_list_flex > li .btn {}
.button_list_flex > li .btn i {}

.hr_document_section {}

.time_line_container {position:relative;padding-left:50px;margin-top: 0px;}
.time_line_container .vertical_line {position: absolute;left: -41px;top: 30px;bottom: 8px;width: 1px;background: var(--border);border-radius: 2px;height: calc(100% - 20px);}
.time_line_container .evet_row {position:relative;margin-top:10px;}
.time_line_container .evet_row:last-child .vertical_line {display:none;}
.time_line_container .evet_row .dot {position:absolute;left:-48px;top:0px;width:16px;height:16px;border-radius:50%;border:3px solid #2449e0;background: #fff;}
.time_line_container .evet_row .event_card {background: #fff;border: 1px solid #ced0d1;border-radius: 8px;padding: 15px;margin-left: 0;}
.time_line_container .evet_row .event_card .icon_container {}
.time_line_container .evet_row .event_card .icon_container .icon {}
.time_line_container .evet_row .event_card .event_content_section {width: calc(100% - 270px);float: left;}
.time_line_container .evet_row .event_card .event_content_section .event_title {font-size: 13px;line-height: 18px;font-weight: 600;font-family: 'Inter';}
.time_line_container .evet_row .event_card .event_content_section .event_title .tag {}
.time_line_container .evet_row .event_card .event_content_section .event_title .desc {margin-top: 2px;display: block;font-size: 12px;font-weight: 400;line-height: 16px;}
.time_line_container .evet_row .event_card .event_content_section .event_title .desc .txt {opacity: .6;color:#111;}
.time_line_container .evet_row .event_card .action_section {width: 200px;float: right;text-align: right;}
.time_line_container .evet_row .event_card .event_content_section .username {margin-top: 10px;font-size: 12px;line-height: 20px;}
.time_line_container .evet_row .event_card .event_content_section .username .title {display: inline-block;font-weight: 600;margin-left: 5px;color: #1b4b87;}
.time_line_container .evet_row .event_card .event_content_section .username .date {display: inline-block;font-size: 12px;font-weight: 400;line-height: 16px;opacity: .6;color:#111;} 
.time_line_container .evet_row .event_card .event_content_section .username .date i {margin: 0 5px;font-size: 4px;position: relative;opacity: .6;top: -2px;}
.bent-line {width: 41px;height: 30px;border-left: 1px solid #ced0d1;border-bottom: 1px solid #ced0d1;border-bottom-left-radius: 14px;position: absolute;left: -41px;margin-top: 16px;}

.summery_chips {display:flex;gap:8px;flex-wrap:wrap;}
.summery_chips .chip {display: flex;align-items: center;gap: 5px;padding: 10px 15px;background: var(--surface);border: 1px solid #ced0d1;border-radius: 4px;font-size: 12px;line-height: 16px;}
.summery_chips .chip .value {font-weight: 700;font-family: 'Plus Jakarta Sans';}
.summery_chips .chip .heading {font-weight: 400;}
.summery_chips .chip.green {}
.summery_chips .chip.red {}
.summery_chips .chip.amber {}
.summery_chips .chip.blue {}
.summery_chips .chip.purple {}

.rc-jobs-strip {margin:10px 0 0;}

/* ── Stage badges ── */
.cd-stage-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius,4px);font-size:12px;font-weight:600;letter-spacing:.3px;}
.stage-applied{background:#e0f2fe;color:#0369a1;}
.stage-screening{background:#fef9c3;color:#92400e;}
.stage-screening-done{background:#d1fae5;color:#065f46;}
.stage-round2{background:#ede9fe;color:#5b21b6;}
.stage-hr-review{background:#fff7ed;color:#9a3412;}
.stage-selected{background:#d1fae5;color:#065f46;}
.stage-rejected{background:#fee2e2;color:#991b1b;}
.stage-offer{background:#dbeafe;color:#1e40af;}
.stage-offer-accepted{background:#d1fae5;color:#065f46;}
.stage-joining{background:#e0f2fe;color:#0369a1;}
.stage-onboarded{background:#d1fae5;color:#065f46;}

/* ── Tabs ── */
.cd-tabs-bar{}
.cd-tab{background:none;border:none;padding:10px 18px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-muted,#6b7280);border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s,border-color .15s;display:flex;align-items:center;gap:7px;}
.cd-tab:hover{color:var(--primary,#2563eb);}
.cd-tab.active{color:var(--primary,#2563eb);border-bottom-color:var(--primary,#2563eb);font-weight:600;}
.cd-tab-disabled{opacity:0.4;cursor:not-allowed!important;pointer-events:none;}
.cd-tab-content{display:none;}
.cd-tab-content.active{display:block;}
.cd-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;font-size:10px;font-weight:700;padding:0 5px;background:#3b82f6;color:#fff;}

/* ── Two-column layout ── */
.cd-two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:900px){.cd-two-col{grid-template-columns:1fr;}}

/* ── Info table ── */
.cd-info-table{width:100%;border-collapse:collapse;font-size:13px;}
.cd-info-table tr{border-bottom:1px solid var(--border-color,#e5e7eb);}
.cd-info-table tr:last-child{border-bottom:none;}
.cd-info-table td{padding:9px 6px;}
.cd-info-label{width:140px;color:var(--text-muted,#6b7280);font-weight:500;}

/* ── Timeline ── */
.cd-timeline-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-color,#e5e7eb);}
.cd-timeline-item:last-child{border-bottom:none;}
.cd-timeline-dot{width:32px;height:32px;border-radius:50%;background:var(--bg-alt,#ecf0f1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;color:var(--text-muted,#6b7280);margin-top:2px;}
.cd-dot-system{background:#ede9fe;color:#7c3aed;}
.cd-dot-hr{background:#dbeafe;color:#2563eb;}
.cd-timeline-body{flex:1;min-width:0;}
.cd-tl-title{font-size:13px;font-weight:600;color:var(--text,#111827);margin-bottom:2px;}
.cd-tl-sub{font-size:12px;color:var(--text-muted,#6b7280);margin-bottom:2px;}
.cd-tl-date{font-size:11px;color:var(--text-muted,#6b7280);}
.cd-tl-desc{font-size:12px;color:var(--text,#374151);margin-top:4px;line-height:1.6;}

/* ── AI Score overview ── */
.cd-score-overview{display:flex;gap:24px;align-items:flex-start;background:var(--bg-alt,#efefef);border:1px solid var(--border-color,#e5e7eb);border-radius:var(--radius,4px);padding:24px;margin-bottom:20px;flex-wrap:wrap;}
.cd-score-circle{position:relative;width:100px;height:100px;flex-shrink:0;}
.cd-score-svg{width:100%;height:100%;}
.cd-score-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.cd-score-num{font-size:22px;font-weight:700;line-height:1;}
.cd-score-grade{font-size:16px;font-weight:700;margin-top:2px;}
.cd-score-meta{display:flex;flex-direction:column;justify-content:center;min-width:160px;}
.cd-dimension-bars{flex:1;min-width:220px;}
.cd-dim-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.cd-dim-label{font-size:12px;width:160px;flex-shrink:0;color:var(--text,#374151);}
.cd-dim-track{flex:1;height:8px;background:var(--border-color,#e5e7eb);border-radius:4px;overflow:hidden;}
.cd-dim-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.cd-dim-val{font-size:12px;font-weight:600;width:36px;text-align:right;}

/* ── Answer blocks ── */
.cd-answer-block{border-bottom:1px solid var(--border-color,#e5e7eb);padding:16px;}
.cd-answer-block:last-child{border-bottom:none;}
.cd-answer-flagged{background:#fff5f5;}
.cd-answer-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;flex-wrap:wrap;}
.cd-answer-num{font-size:11px;font-weight:700;background:var(--bg-alt,#ecf0f1);border-radius:4px;padding:2px 7px;color:var(--text-muted,#6b7280);flex-shrink:0;margin-top:1px;}
.cd-answer-q{flex:1;font-size:13px;font-weight:600;color:var(--text,#111827);}
.cd-answer-score{font-size:13px;font-weight:700;flex-shrink:0;}
.cd-answer-body{padding-left:36px;}
.cd-answer-text{font-size:13px;color:var(--text,#374151);line-height:1.7;white-space:pre-wrap;word-break:break-word;}
.cd-answer-feedback{margin-top:8px;font-size:12px;color:var(--text-muted,#6b7280);padding:8px 10px;background:var(--bg-alt,#efefef);border-left:3px solid #3b82f6;border-radius:0 4px 4px 0;}
.cd-answer-flag-reason{margin-top:8px;font-size:12px;color:#991b1b;padding:6px 10px;background:#fee2e2;border-radius:4px;}

/* ── Misc ── */
.btn-xs{padding:4px 10px;font-size:12px;}
.tag-info{background:#dbeafe;color:#1e40af;}
.tag-warning{background:#fff7ed;color:#9a3412;}
.tag-danger{background:#fee2e2;color:#991b1b;}

/* ── Countdown badge ── */
.capture-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
.capture-countdown.urgent   { background: #fff1f1; color: #dc2626; border: 1px solid #fca5a5; }
.capture-countdown.warning  { background: #fffbeb; color: #d97706; border: 1px solid #fcd34d; }
.capture-countdown.safe     { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; }
.capture-countdown.expired  { background: #efefef; color: #9ca3af; border: 1px solid #ced0d1; }

/* ── Lead row states ── */
.lead-row.captured-by-me    { border-left: 3px solid #3b82f6; }
.lead-row.captured-by-other { background: #fafafa; opacity: 0.85; }
.lead-row.aria-assigned     { border-left: 3px solid #8b5cf6; }
.lead-row.pending           { border-left: 3px solid #f59e0b; }

/* ── Self-assign btn ── */
.btn-capture {
    background: #3b82f6;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.btn-capture:hover { background: #2563eb; }
.btn-capture:disabled { background: #93c5fd; cursor: not-allowed; }

/* ── HR Override Panel (slide-down) ── */
.hr-override-panel {
    display: none;
    background: #f8faff;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 14px 18px;
    margin-top: 8px;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.hr-override-panel.open { display: flex; }

/* ── Round bypass toggles (HR only) ── */
.bypass-strip {
    display: none; /* Hidden by default — shown only in HR lead detail */
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.bypass-strip.visible { display: flex; }
.bypass-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ced0d1;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}
.bypass-toggle.active { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.bypass-toggle:hover  { border-color: #93c5fd; }

/* ── Pipeline stage badge ── */
.stage-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.stage-pending      { background: #fef3c7; color: #92400e; }
.stage-round1       { background: #dbeafe; color: #1e40af; }
.stage-round2       { background: #e0e7ff; color: #3730a3; }
.stage-final        { background: #d1fae5; color: #065f46; }
.stage-offer        { background: #fce7f3; color: #9d174d; }
.stage-joined       { background: #f0fdf4; color: #166534; }
.stage-dropped      { background: #ecf0f1; color: #6b7280; }

/* ── Slide-in panel (Begin Process) ── */
.lead-slideout {
    position: fixed;
    top: 0; right: -480px;
    width: 460px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #ced0d1;
    box-shadow: -4px 0 24px rgba(0,0,0,.08);
    z-index: 9000;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lead-slideout.open { right: 0; }
.slideout-header {
    padding: 16px 20px;
    border-bottom: 1px solid #ecf0f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.slideout-header h3 { font-size: 14px; font-weight: 700; margin: 0; color: #111827; }
.slideout-body { flex: 1; overflow-y: auto; padding: 20px; }
.slideout-footer {
    padding: 14px 20px;
    border-top: 1px solid #ecf0f1;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Tabs ── */
.leads-tab-bar {}
.leads-tab {}
.leads-tab.active {}
.leads-tab-pane { display: none; }
.leads-tab-pane.active { display: block; }

/* ── Score chip ── */
.score-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* ── ARIA nudge banner ── */
.aria-nudge {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #c4b5fd;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: #5b21b6;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.aria-nudge i { font-size: 14px; flex-shrink: 0; }


.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}
.custom-modal-container {
    position: relative;
    background: #fff;
    border-radius: 12px;
    width: 550px;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}
.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #ced0d1;
}
.custom-modal-title {
    font-size: 16px;
    font-weight: 600;
}
.custom-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    color: #6b7280;
}
.custom-modal-close:hover {
    color: #111;
}
.custom-modal-body {
    padding: 20px;
    overflow-y: auto;
}
.custom-modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #ced0d1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.error-banner {
    background: #fee2e2;
    color: #b91c1c;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}



.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}



#avatarContainer {
    transition: filter 0.4s ease, opacity 0.4s ease;
}
#avatarContainer.uploading {
    filter: grayscale(1);
    opacity: 0.5;
}
#avatarContainer.upload-done {
    filter: grayscale(0);
    opacity: 1;
}
 
/* Cropper circular mask */
.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}
.cropper-view-box {
    outline: 2px solid rgba(255,255,255,0.8);
    outline-offset: 0;
}
/* Dim outside the crop area more */
.cropper-modal {
    background-color: rgba(0,0,0,0.65);
}
/* Hide the default dashed lines inside crop area */
.cropper-dashed {
    display: none;
}
/* Hide center crosshair */
.cropper-center {
    display: none;
}



/* Avatar upload spinner */
.avatar-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: avatarSpin 0.7s linear infinite;
}
@keyframes avatarSpin {
    to { transform: rotate(360deg); }
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    background: var(--bg-light);
    border-radius: 8px;
}
.doc-item .btn-ghost {
    background: none;
    border: none;
    cursor: pointer;
}
.text-danger { color: #dc2626; }

.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.progress-container { margin: 16px 0; }
.inline-error { margin-top: 12px; padding: 8px 12px; background: #fee2e2; color: #991b1b; border-radius: 6px; font-size: 13px; }

.complteness_container {}
.complteness_container .header_container {display: flex;justify-content: space-between;align-items: center;}
.complteness_container .header_container .title {font-size: 13px;margin:0;font-family: 'Inter';font-weight:400;}
.complteness_container .header_container .percent {font-family: 'Inter';font-size: 16px;font-weight: 700;}
.complteness_container .missing {font-family: 'Inter';margin-bottom:15px;font-size:12px;color:#111;}
.complteness_container .missing .nx-tag {}

.score_board {}
.score_board .score-header {display:flex;gap:10px;align-items: center;margin-bottom: 10px;}
.score_board .score-header .score_number_box {width: auto;min-width: 115px;padding: 15px 10px;border: 1px solid #ccc;border-radius: 6px;text-align: center;}
.score_board .score-header .score_number_box .score-number {font-size: 18px;font-family: 'Plus Jakarta Sans';font-weight: 500;color: #111;}
.score_board .score-header .score_number_box .score-divider {font-size: 18px;font-family: 'Plus Jakarta Sans';font-weight: 500;color: #999;}
.score_board .score-header .score_number_box .score-total {font-size: 18px;font-family: 'Plus Jakarta Sans';font-weight: 500;color: #999;}
.score_board .score-header .content_section {}
.score_board .score-header .content_section .score-label {display:block;font-family:"Inter";font-size: 14px;line-height: 16px;}
.score_board .score-header .content_section .score-subdesc {display:block;font-family:"Inter";font-size: 12px;line-height: 16px;opacity: .6;margin-top:3px;}
.score_board .risk-level {} 
.score_board .score-progress {}
.score_board .score-progress .risk-label, .performance-breakdown .breakdown-title {font-size: 12px;font-weight: 500;color: #111;}
.score_board .score-progress .risk-pills {display:flex;align-items: center;justify-content: space-between;margin-bottom: 20px;}
.score_board .score-progress .risk-pills .risk-pill {font-size: 12px;opacity: .6;}
.score_board .score-progress .progress_bar {margin: 10px 0;background: #ecf0f1;padding: 0px;height: 18px;position: relative;}
.score_board .score-progress .progress_bar .progress_bar_fill {margin-left: -5px;background: #6396FF;border-radius: 20px;background: linear-gradient(90deg, rgba(99, 150, 255, 1) 0%, rgba(105, 185, 255, 1) 35%, rgba(155, 219, 255, 1) 100%);padding:5px;}
.score_board .score-progress .progress_bar .prog_dots {display:flex;align-items: center;z-index: 9;justify-content: space-between;margin: 5px;position: absolute;top: calc(50% - 5px);left: 0;width: calc(100% - 10px);transform: translateY(-50%);}
.score_board .score-progress .progress_bar .prog_dots .dot {background:#fff;border-radius:50%;width:8px;height:8px;}
.score_board .score-progress .progress_bar .prog_dots .dot:nth-child(2),.score_board .score-progress .progress_bar .prog_dots .dot:nth-child(4) {opacity:.5;}
.score_board .score-categories {display: grid;grid-template-columns: 1fr 1fr;gap: 10px 15px;margin-bottom: 10px;}
.score_board .score-categories.full {grid-template-columns: 1fr;}
.score_board .score-categories .category-item {}
.score_board .score-categories .category-item .category-header {display: flex;font-size: 12px;font-family: 'Inter';align-items: center;justify-content: space-between;}
.score_board .score-categories .category-item .category-header i {display:none;}
.score_board .score-categories .category-item .category-header .category-name {display: block;opacity: .6;}
.score_board .score-categories .category-item .category-header .category-value {display: block;opacity: .8;}
.score_board .score-categories .category-item .category-header .category-value .summery_section {display: flex;align-items: center;gap: 5px;}
.score_board .score-categories .category-item .category-header .category-value .summery_section .values {}
.score_board .score-categories .category-item .category-header .category-value .summery_section .file_count {}
.score_board .score-categories .category-item .category-header .category-value .summery_section .storage-refresh-btn {background: transparent;border: 0;font-size: 12px;color: #2449e0;}
.score_board .score-categories .category-item .category-progress {}
.score_board .score-categories .category-item .category-progress .progress_bar {height: 4px;margin: 10px 0 0;background: #ecf0f1;border-radius: 20px;}
.score_board .score-categories .category-item .category-progress .progress_bar_fill {height: 4px;border-radius: 20px;}

.performance-breakdown {}
.performance-breakdown .breakdown-title {margin-bottom: 15px;display: flex;gap: 5px;;}
.performance-breakdown .breakdown-title .info-tip {font-size: 11px;opacity: .6;line-height: 16px;cursor:pointer;}
.performance-breakdown .breakdown-footer {display: flex;font-size: 12px;font-family: 'Inter';gap:5px;background: #fffcf1;border: 1px solid #ffcd84;padding: 10px;border-radius: 6px;color: #222;}
.performance-breakdown .breakdown-footer i {color:#FF9800;}

.search-spinner {position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e5e7eb;border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite;}

@keyframes spin {to {transform:translateY(-50%) rotate(360deg);}}

.search-dropdown {position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ced0d1;border-top:none;border-radius:0 0 6px 6px;max-height:220px;overflow-y:auto;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.1);}
.search-dropdown-item {padding:10px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center;}
.search-dropdown-item:hover,
.search-dropdown-item.active {background:#f8fafc;}
.search-dropdown-item:last-child {border-bottom:none;}
.search-dropdown-create {gap:5px;justify-content:flex-start;color:#111;font-weight:400;border-top:0 solid #e5e7eb;}
.gst-badge {font-size:11px;background:#f1f5f9;padding:2px 8px;border-radius:4px;color:#64748b;}

#whTypesTable_wrapper { clear: both; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 12px; }
.dataTables_wrapper .dataTables_filter input {border: 1px solid #ced0d1!important;border-radius: 6px!important;padding: 10px 15px 10px 40px!important;font-size: 13px!important;min-width: 250px!important;background-color: #fff!important;font-size: 13px!important;min-width: 250px!important;}
.dataTables_wrapper .dataTables_filter input:before {content:'\f002';position:absolute;}
#whTypesTable_paginate { margin-top: 12px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {background: #fff !important;
    color: #111 !important;
    border-color: #999 !important;
    border-radius: 6px !important;
    min-width: 36px !important;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    display: inline-block !important;
    padding: 0 10px !important;
    text-align: center !important;
    opacity: .5;
    margin: 0 2.5px !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {opacity:1;}
#whTypesTable_info { font-size: 12px; color: var(--t3, #999); margin-top: 8px; }
.dataTables_wrapper .dataTables_length select {padding: 10px 15px!important;background: #fff!important;border: 1px solid #ced0d1!important;border-radius: 6px!important;font-family: 'Inter'!important;font-size: 12px!important;color: var(--t)!important;transition: var(--transition)!important;outline: none!important;appearance: none!important;}

.inv-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.inv-page-header h1{font-size:22px;font-weight:700;color:#0f172a;margin:0}
.inv-page-header h1 span{display:block;font-size:13px;font-weight:400;color:#64748b;margin-top:2px}
.inv-header-actions{display:flex;gap:8px}
.inv-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.inv-kpi-card{background:var(--inv-card);border-radius:var(--inv-radius);padding:16px 18px;border:1px solid var(--inv-border);position:relative;overflow:hidden;transition:box-shadow .2s}
.inv-kpi-card:hover{box-shadow:var(--inv-shadow-lg)}
.inv-kpi-card .kpi-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px}
.inv-kpi-card .kpi-value{font-size:24px;font-weight:700;color:#0f172a;line-height:1.1}
.inv-kpi-card .kpi-label{font-size:12px;color:#64748b;margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.inv-kpi-card.kpi-danger{border-left:3px solid var(--inv-red)}
.inv-kpi-card.kpi-warning{border-left:3px solid var(--inv-amber)}
.inv-kpi-card.kpi-success{border-left:3px solid var(--inv-green)}
.inv-kpi-card.kpi-info{border-left:3px solid var(--inv-blue)}
.inv-kpi-card.kpi-purple{border-left:3px solid var(--inv-purple)}
.inv-wh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-bottom:20px}
.inv-wh-card{background:var(--inv-card);border:1px solid var(--inv-border);border-radius:var(--inv-radius);padding:16px}
.inv-wh-card .wh-name{font-weight:600;font-size:14px;color:#0f172a;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.inv-wh-card .wh-name i{color:var(--inv-blue)}
.inv-wh-card .wh-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.inv-wh-card .wh-stat{text-align:center;padding:6px;background:var(--inv-bg);border-radius:6px}
.inv-wh-card .wh-stat .stat-val{font-weight:700;font-size:15px;color:#0f172a}
.inv-wh-card .wh-stat .stat-lbl{font-size:10px;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px}
.inv-tabs{display:flex;gap:4px;border-bottom:2px solid var(--inv-border);margin-bottom:18px;overflow-x:auto;padding-bottom:0}
.inv-tabs button{padding:9px 16px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:500;color:#64748b;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.inv-tabs button:hover{color:#0f172a}
.inv-tabs button.active{color:var(--inv-blue);border-bottom-color:var(--inv-blue);font-weight:600}
.inv-tabs button .tab-count {background:#e2e8f0;color:#475569;font-size:10px;padding:1px 6px;border-radius:10px;font-weight:600}
.inv-tabs button.active .tab-count{background:#dbeafe;color:var(--inv-blue)}
.inv-panel{display:none}.inv-panel.active{display:block}
.inv-card{background:var(--inv-card);border:1px solid var(--inv-border);border-radius:var(--inv-radius);margin-bottom:16px}
.inv-card-header{padding:14px 18px;border-bottom:1px solid var(--inv-border);display:flex;align-items:center;justify-content:space-between}
.inv-card-header h3{font-size:14px;font-weight:600;color:#0f172a;margin:0}
.inv-card-body{}
.filter-bar {display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;align-items:flex-end;background: transparent;padding: 0px;border-radius:0px;border: 0px solid #dbdbdb;}
.filter-bar .form-group {margin-bottom:0;}
.filter-bar .form-label{}
.filter-bar .fg select,.filter-bar .fg input{}
.inv-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;line-height:1.6;white-space:nowrap}
.badge-outline{border:1px solid #cbd5e1;color:#475569;background:transparent;font-size:11px;padding:1px 6px;border-radius:4px;font-weight:600}
.inv-panel .dataTables_wrapper{font-size:13px}
.inv-panel table.dataTable{border-collapse:collapse!important}
.inv-panel table.dataTable thead th{ }
.inv-panel table.dataTable tbody td{}
.inv-panel table.dataTable tbody tr:hover{background:#f8fafc}
.text-right-block{display:block;text-align:right;font-variant-numeric:tabular-nums}
.text-nowrap{white-space:nowrap}.text-danger{color:var(--inv-red)!important}.text-warning{color:var(--inv-amber)!important}.text-muted{color:#94a3b8!important}.text-sm{font-size:11px!important}.fw-600{font-weight:600!important}
.btn-group-xs{display:flex;gap:4px}
.btn-xs{padding:3px 8px!important;font-size:12px!important}
.btn-outline-primary{color:var(--inv-blue);border:1px solid var(--inv-blue);background:transparent;border-radius:4px;cursor:pointer}
.btn-outline-primary:hover{background:var(--inv-blue);color:#fff}
.btn-outline-success{color:var(--inv-green);border:1px solid var(--inv-green);background:transparent;border-radius:4px;cursor:pointer}
.btn-outline-success:hover{background:var(--inv-green);color:#fff}
.inv-chart-container{position:relative;height:280px;margin-bottom:12px}
.aging-bucket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:18px}
.aging-bucket{text-align:center;padding:14px 10px;border-radius:8px;background:var(--inv-bg);border:1px solid var(--inv-border)}
.aging-bucket .bucket-val{font-size:20px;font-weight:700;color:#0f172a}
.aging-bucket .bucket-amt{font-size:12px;color:#64748b;margin-top:2px}
.aging-bucket .bucket-lbl{font-size:11px;color:#94a3b8;margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
.trace-timeline{position:relative;padding-left:28px}
.trace-timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:#e2e8f0}
.trace-event{position:relative;margin-bottom:16px;padding:12px 16px;background:var(--inv-card);border:1px solid var(--inv-border);border-radius:8px}
.trace-event::before{content:'';position:absolute;left:-22px;top:16px;width:10px;height:10px;border-radius:50%;border:2px solid var(--inv-blue);background:#fff}
.trace-event.evt-receipt::before{border-color:var(--inv-green);background:var(--inv-green)}
.trace-event.evt-issue::before{border-color:var(--inv-red);background:var(--inv-red)}
.trace-event.evt-transfer::before{border-color:var(--inv-blue);background:var(--inv-blue)}
.trace-event .evt-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.trace-event .evt-type{font-weight:600;font-size:13px;color:#0f172a}
.trace-event .evt-date{font-size:11px;color:#94a3b8}
.trace-event .evt-details{font-size:12px;color:#475569}
.alert-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #f1f5f9}
.alert-row:last-child{border-bottom:none}
.alert-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.alert-icon.sev-critical{background:#fef2f2;color:var(--inv-red)}.alert-icon.sev-high{background:#fff7ed;color:var(--inv-amber)}.alert-icon.sev-medium{background:#fffbeb;color:#ca8a04}.alert-icon.sev-low{background:#f0fdf4;color:var(--inv-green)}
.alert-body{flex:1}
.alert-body .alert-title{font-size:13px;font-weight:500;color:#0f172a}
.alert-body .alert-meta{font-size:11px;color:#94a3b8;margin-top:2px}
.inv-modal{padding:24px;max-width:640px}
.inv-modal h2{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--inv-border)}
.inv-modal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.inv-modal .form-row.full{grid-template-columns:1fr}
.inv-modal .fg{display:flex;flex-direction:column;gap:4px}
.inv-modal .fg label{font-size:12px;font-weight:500;color:#475569}
.inv-modal .fg select,.inv-modal .fg input,.inv-modal .fg textarea{border:1px solid var(--inv-border);border-radius:6px;padding:8px 10px;font-size:13px}
.inv-modal .fg textarea{min-height:60px;resize:vertical}
.inv-modal .btn-submit{margin-top:16px;width:100%;padding:10px;border:none;background:var(--inv-blue);color:#fff;font-weight:600;border-radius:8px;cursor:pointer;font-size:14px}
.inv-modal .btn-submit:hover{background:#1d4ed8}
.inv-modal .btn-submit:disabled{background:#94a3b8;cursor:not-allowed}
.inv-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px;height:20px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.txn-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.txn-detail-grid .td-item{padding:8px 0;border-bottom:1px solid #f1f5f9}
.txn-detail-grid .td-item .td-label{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.3px}
.txn-detail-grid .td-item .td-value{font-size:14px;color:#0f172a;font-weight:500;margin-top:2px}
.pi-doc-card{background:var(--inv-card);border:1px solid var(--inv-border);border-radius:var(--inv-radius);padding:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.pi-doc-card .pi-info{flex:1}
.pi-doc-card .pi-docno{font-weight:600;font-size:14px;color:#0f172a}
.pi-doc-card .pi-meta{font-size:12px;color:#64748b;margin-top:2px}
.pi-doc-card .pi-progress{margin-top:6px;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}
.pi-doc-card .pi-progress-bar{height:100%;border-radius:3px;transition:width .3s}
@media(max-width:768px){.inv-kpi-grid{grid-template-columns:repeat(2,1fr)}.inv-wh-grid{grid-template-columns:1fr}.filter-bar{flex-direction:column}.inv-modal .form-row{grid-template-columns:1fr}.txn-detail-grid{grid-template-columns:1fr}}


.number_timeline {}
.number_timeline > li {display: flex;gap: 10px;align-items: center;margin-top: 15px;}

.number_timeline > li .marker {width: 24px;height: 24px;border-radius: 6px;border: 2px solid #2449e0;background: #fff;z-index: 9999;text-align: center;color:#111;font-size: 12px;line-height: 20px;-webkit-transition: 300ms;-moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; margin-bottom: 1px;position: relative; cursor: pointer;}
.number_timeline > li .marker.active {background: #2449e0;color:#fff;}
.number_timeline > li:hover .marker {background: #2449e0;color:#fff;}
.number_timeline > li .timeline-content {}
.number_timeline > li .timeline-content h3 {font-size: 13px;line-height: 20px;font-weight: 400;}

.wc_heading_section {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;}
.wc_heading_section .wc_name {font-size: 14px;line-height: 18px;font-weight: 600;color: #111;}
.wc_heading_section .wc_name .sub {display:block;font-size: 12px;line-height: 16px;font-weight: 400;color: #111;opacity:.6;}
.wc_heading_section .wc_tag {}
.wc_heading_section .wc_tag .status {padding: 5px;border-radius: 4px;display: block;}
.wc_heading_section .wc_tag .status .tag-blue {}
.wc_heading_section .wc_tag .status .tag-orange {}
.wc_heading_section .wc_tag .status .tag-gren {}
.wc_heading_section .wc_tag .status .tag-red {}
.wc_sub {display: flex;gap:15px;margin-bottom:15px;}
.wc_sub > li {font-size: 13px;display: flex;gap: 5px;}
.wc_sub > li .heading {opacity: .6;}
.wc_sub > li .value {}
.cap_list {display: flex;gap:15px;margin-bottom: 15px;}
.cap_list > li {display: flex;gap: 5px;font-size: 13px;line-height: 18px;font-weight: 400;color: #111;}
.cap_list > li .heading {opacity: .6;}
.cap_list > li .value {}
.wc_section {}
.wc_section .title {font-size: 13px;font-weight: 500;line-height: 20px;margin-bottom: 10px;}
.wc_section .hour_list {display: flex;flex-wrap:wrap;gap: 5px 10px;margin-bottom: 15px;}
.wc_section .hour_list > * {flex: 0 0 calc((100% - 10px) / 2);}
.wc_section .hour_list > li {display: flex;gap:10px;font-size: 13px;line-height: 18px;font-weight: 400;color: #111;align-items: center;}
.wc_section .hour_list > li .heading {opacity: .6;}
.wc_section .hour_list > li .heading i {margin-right:5px;}
.wc_section .hour_list > li .value {}

.type-active { background:#337ab7; color:#fff !important; border-color:#337ab7 !important; }
.product-results { position:absolute; z-index:100; background:#fff; border:1px solid #ddd; border-radius:4px; max-height:200px; overflow-y:auto; width:100%; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.product-results div { padding:6px 10px; cursor:pointer; font-size:13px; }
.product-results div:hover { background:#f0f4ff; }

.item_selection_container {}
.item_selection_container .heading_section {display: flex;justify-content: space-between;align-items: center;margin-bottom:15px;}
.item_selection_container .heading_section .section_title {margin-bottom:0;}
.item_selection_container .heading_section .btn {}
#items_container {}
#items_container .item-row {margin-top:10px;}


.kanban-board{}
.kanban-col{}
.kanban-won{border-color:#bbf7d0;background:#f0fdf4}
.kanban-lost{border-color:#fecaca;background:#fef2f2;opacity:.8}
.kanban-col-header{padding:12px 14px;border-bottom:1px solid #e8eaf0;flex-shrink:0;display:flex;justify-content:space-between;align-items:center}
.kanban-col-title{font-size:12px;font-weight:700;color:#374151;text-transform:uppercase;letter-spacing:.05em}
.kanban-col-count{background:#e8eaf0;color:#64748b;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px}
.kanban-col-value{font-size:11px;font-weight:700;color:#64748b}
.kanban-stage-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kanban-cards{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.kanban-cards.drag-over{background:rgba(52,62,123,.05);border-radius:6px}
.kanban-card{background:#fff;border:1px solid #e8eaf0;border-radius:8px;padding:12px;cursor:grab;transition:box-shadow .15s;user-select:none}
.kanban-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.kanban-card.dragging{opacity:.4;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.kanban-card-title a{font-size:13px;font-weight:600;color:#1a1a2e;text-decoration:none;line-height:1.3}
.kanban-card-title a:hover{color:var(--primary)}
.kanban-card-account{font-size:11px;color:#64748b;margin-top:6px;display:flex;align-items:center;gap:5px}
.kanban-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.kanban-card-value{font-size:13px;font-weight:700;color:#059669}
.kanban-card-date{font-size:10px;color:#94a3b8;display:flex;align-items:center;gap:4px}
.kanban-card-date.overdue{color:#dc2626}
.kanban-card-owner{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:#94a3b8}
.kanban-avatar{width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ============================================================
   Read-Only Module Banner
   Add to: public/css/solaris.css
   ============================================================ */

/* Banner shown at top of pages/forms when module not subscribed */
.readonly-module-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 13.5px;
}
.readonly-module-banner > i {
    color: #d97706;
    font-size: 18px;
    flex-shrink: 0;
}
.readonly-module-banner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.readonly-module-banner strong {
    color: #92400e;
    font-weight: 700;
    font-size: 13.5px;
}
.readonly-module-banner span {
    color: #b45309;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Sidebar nav badge for view-only modules */
.sb-readonly-badge {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: #fde68a;
    color: #92400e;
    padding: 1px 5px;
    border-radius: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Dim form fields when in read-only context */
.form-readonly-overlay {
    position: relative;
    pointer-events: none;
    opacity: 0.55;
}
.form-readonly-overlay * {
    cursor: not-allowed !important;
}

/* Sales Dashboard */
/* ── Dashboard Cards ── */
.dash-row-2 { display:grid; grid-template-columns:1fr 320px; gap:16px; }
.dash-card { background:#fff; border:1px solid #ced0d1; border-radius:4px; overflow:hidden; }
.dash-card-wide { /* takes natural width in grid */ }
.dash-card-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #f3f4f6; }
.dash-card-title { font-size:13px; font-weight:600; color:#111827; }
.dash-card-link { font-size:11px; color:#3b82f6; text-decoration:none; }
.dash-card-link:hover { text-decoration:underline; }
.dash-card-body { padding:16px; }
.dash-card-body.p-0 { padding:0; }
.dash-empty { text-align:center; padding:40px; color:#9ca3af; }
.dash-empty i { font-size:28px; margin-bottom:8px; display:block; }
.dash-loading { text-align:center; padding:20px; color:#9ca3af; font-size:13px; }

/* ── Dashboard Table ── */
.text-right { text-align:right; }

/* ── Donut Legend ── */
.donut-legend { width:100%; }
.legend-item { display:flex; align-items:center; justify-content:space-between; padding:4px 0; font-size:11px; }
.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-right:6px; }
.legend-label { flex:1; color:#374151; }
.legend-val { font-weight:600; color:#111; }

/* ── Win/Loss ── */
.win-loss-stats { display:flex; gap:20px; }
.wl-item { text-align:center; }
.wl-val { font-size:22px; font-weight:700; }
.wl-label { font-size:11px; color:#6b7280; }
.wl-won { color:#22c55e; }
.wl-lost { color:#ef4444; }

/* ── Status Badges ── */
.badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:3px; font-size:11px; font-weight:600; text-transform:capitalize; }
.badge-draft     { background:#f3f4f6; color:#374151; }
.badge-sent      { background:#eff6ff; color:#1d4ed8; }
.badge-approved  { background:#f0fdf4; color:#15803d; }
.badge-rejected  { background:#fef2f2; color:#b91c1c; }
.badge-converted { background:#faf5ff; color:#7c3aed; }
.badge-expired   { background:#fff7ed; color:#c2410c; }

/* ── Probability Bar ── */
.prob-bar { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.prob-track { width:50px; height:5px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.prob-fill { height:100%; border-radius:3px; background:#3b82f6; }

@media (max-width:1200px) {
    .kpi-grid { grid-template-columns:repeat(3,1fr); }
    .dash-row-2 { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
}


.back-link{display:inline-flex;align-items:center;gap:6px;color:#6b7280;font-size:12px;text-decoration:none;margin-bottom:4px}
.back-link:hover{color:#111}

.line-item-title .btn {}
.line-item-title .btn:hover {color:#2449e0;} 
.line_item_container .items-header,.line_item_container #itemsBody .item-row {display:flex;gap:0px;align-items:center}
.line_item_container .items-header {background:#efefef;border-bottom:1px solid #ced0d1;font-size:12px;font-weight:500;display: flex;align-items: center;}
.line_item_container #itemsBody {background:#fff;}
.line_item_container #itemsBody .item-row {border-bottom:1px solid #ced0d1;padding:0!important;}
.line_item_container #itemsBody .item-row:hover {background:#fafafa}
.line_item_container #itemsBody .item-row .col {padding:0;height:75px;}
.line_item_container #itemsBody .item-row .col select {min-width: unset;}
.line_item_container .col {border-left:1px solid #ced0d1;height: 100%;padding:10px 15px;}
.line_item_container .col1 {flex: 0 0 50px;height:unset!important;}
.line_item_container .col2 {flex: 1;}
.line_item_container .col3 {flex: 0 0 140px;}
.line_item_container .col4 {flex: 0 0 120px;}
.line_item_container .col5 {flex: 0 0 140px;}
.line_item_container .col6 {flex: 0 0 120px;}
.line_item_container .col7 {flex: 0 0 120px;}
.line_item_container .col8 {flex: 0 0 120px;}
.line_item_container .col9 {flex: 0 0 200px;text-align:right;display: grid;align-items: center;}
.line_item_container .col10 {flex: 0 0 50px;height:unset!important;border-left:0;}
.line_item_container .col:nth-child(1) {border-left:0;}
#itemsBody .item-row .form-input, .no-border .form-input {border:0;}
#itemsBody .item-row .form-input:focus, .no-border .form-input:focus {box-shadow:none;}
textarea.form-input {line-height: 20px;resize:vertical}
#itemsBody .item-row:nth-child(1) {margin-top:0px;}
.ts-container {}
.ts-container .ts_header {display:flex;gap:0;justify-content: space-between;align-items: center;padding: 0 15px;border-bottom: 1px solid #ced0d1;}
.ts-container .ts_header .section_title_small {padding: 0;border:0;}
.ts-container .ts_header .form-group.no-border {margin:0;display:flex;align-items: center;font-size: 12px;}
.ts-container .ts_header .form-group.no-border .form-label {margin:0;flex: 0 0 100px;}
.ts-container .ts_header .form-group.no-border .form-input {padding:0 35px 0 15px;border-left:1px solid #ced0d1;border-right:1px solid #ced0d1;border-radius: 0;}
.ts-container .icon-btn {display: flex;gap: 5px;text-decoration: none;color: #111;opacity: .6;font-size: 12px;align-items: center;}
.ts-container .ts_header .form-group.no-border .icon-btn {padding:0 15px;border-left:0px solid #dbdbdb;border-right:1px solid #ced0d1;height: 38px;}
.ts-container .ts_header .form-group.no-border .termsCharCount {flex: 0 0 85px;font-size: 12px;opacity: .6;text-align: right;}
.ts-container textarea.form-input, .note-container textarea.form-input {padding:15px;line-height:24px;font-size: 12px;}
.ts-container textarea.form-input {opacity:.6}
.qoute_creation_header {display: grid;grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;gap: 10px;margin-bottom: 0px;padding: 15px;background: #eaf4ff;border-bottom: 1px solid #ced0d1;}

.drag-handle{color:#d1d5db;cursor:grab}
.drag-handle:active{cursor:grabbing}
.btn-del-row{background:none;border:none;cursor:pointer;color:#d1d5db;padding:0}
.btn-del-row:hover{color:#ef4444}
.line-total-cell{text-align:right;font-weight:600;font-size:13px;color:#111}
.items-empty{padding:40px;text-align:center;color:#9ca3af}
.items-empty p{margin-top:10px}
.total-breakdown {border:0;border-bottom:1px solid #ced0d1;overflow:hidden;display: grid;grid-template-columns: 1fr;background: #efefef;padding: 15px;gap: 10px;align-items: center;}
.total-breakdown .tb-row {display:flex;justify-content:space-between;font-size:12px;}
.total-breakdown .tb-row:last-child {border-bottom:none}
.tb-total {display:flex;justify-content:space-between;font-weight:700;font-size:16px;background:#efefef;padding:15px;}
.form-input-xs {font-size:12px;padding:5px 8px;height:30px}
.prod-select {font-size:11px}
@media(max-width:1100px){
    .quote-layout{grid-template-columns:1fr}
    .items-header,.item-row{grid-template-columns:28px 1fr 70px 70px 60px 100px 70px 70px 60px 90px 34px;font-size:11px}
}

/* CRM Accouts Show Page */
.acct-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px; }
.as-card { background:#fff;border:1px solid #ced0d1;border-radius:4px;padding:14px 16px;display:flex;gap:12px;align-items:center; }
.as-icon { width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
.as-value { font-size:20px;font-weight:700;color:#111; }
.as-label { font-size:11px;color:#6b7280;font-weight:500; }
.tab-bar { display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:16px; }
.tab-btn { background:none;border:none;padding:10px 16px;cursor:pointer;font-size:13px;font-weight:500;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-2px;display:flex;align-items:center;gap:6px; }

.tab-count { background: #F44336;color: #fff;font-size: 8px;font-weight: 700;width: 14px;height: 14px;text-align: center;line-height: 14px;border-radius: 50%;display: inline-block;}
.detail-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.dg-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9ca3af;margin-bottom:4px; }
.dg-value { font-size:13px;color:#111; }
.contacts-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px; }
.contact-card { background:#fff;border:1px solid #ced0d1;border-radius:4px;padding:14px 16px;display:flex;gap:12px; }
.cc-avatar { width:44px;height:44px;border-radius:50%;background:#1a1a2e;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0; }
.cc-body { flex:1;min-width:0; }
.cc-name { font-size:13px;font-weight:600;color:#111;display:flex;align-items:center;gap:6px;flex-wrap:wrap; }
.cc-primary { font-size:10px;font-weight:700;background:#eff6ff;color:#1d4ed8;padding:1px 6px;border-radius:3px; }
.cc-role { font-size:12px;color:#6b7280;margin-top:2px; }
.cc-contacts { display:flex;flex-direction:column;gap:4px;margin-top:8px; }
.cc-link { font-size:12px;color:#3b82f6;text-decoration:none;display:flex;align-items:center;gap:6px; }
.cc-link:hover { text-decoration:underline; }
.cc-wa { color:#22c55e; }
.sidebar-row { display:grid;grid-template-columns:70px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid #f9fafb;font-size:12px; }
.sidebar-row:last-child { border-bottom:none; }
.sr-label { color:#6b7280;font-weight:500; }
.sr-value { color:#111;font-weight:500; }
.quick-btn { width:100%;background:#f9fafb;border:1px solid #ced0d1;border-radius:4px;padding:8px 12px;text-align:left;cursor:pointer;font-size:13px;color:#374151;display:flex;align-items:center;gap:10px;text-decoration:none; }
.quick-btn:hover { background:#f3f4f6; }
.prob-track { height:5px;background:#e5e7eb;border-radius:3px;overflow:hidden; }
.prob-fill { height:100%;background:#3b82f6;border-radius:3px; }
.activity-timeline { display:flex;flex-direction:column; }
.tl-item { display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #f3f4f6; }
.tl-item:last-child { border-bottom:none; }
.tl-done .tl-title { text-decoration:line-through;color:#9ca3af; }
.tl-icon { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
.tl-body { flex:1; }
.tl-header { display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap; }
.tl-title { font-size:13px;font-weight:600;color:#111; }
.tl-meta { display:flex;align-items:center;gap:5px;flex-wrap:wrap; }
.tl-type { font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:capitalize; }
.tl-done-badge { font-size:10px;font-weight:700;background:#f0fdf4;color:#15803d;padding:2px 7px;border-radius:3px; }
.tl-overdue { font-size:10px;font-weight:700;background:#fef2f2;color:#b91c1c;padding:2px 7px;border-radius:3px; }
.tl-date,.tl-owner { font-size:11px;color:#9ca3af;margin-top:3px; }
.tl-desc { font-size:12px;color:#6b7280;margin-top:5px;line-height:1.5; }
.tl-outcome { font-size:12px;color:#374151;margin-top:5px; }
.act-type-tabs { display:flex;gap:6px;flex-wrap:wrap; }
.att-btn { background:#f3f4f6;border:1px solid #ced0d1;border-radius:4px;padding:5px 10px;font-size:12px;cursor:pointer;color:#374151;display:flex;align-items:center;gap:5px; }
.att-btn.active { background:#1a1a2e;color:#fff;border-color:#1a1a2e; }
.badge { display:inline-flex;align-items:center;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:600;text-transform:capitalize; }
.badge-draft { background:#f3f4f6;color:#374151; }
.badge-sent { background:#eff6ff;color:#1d4ed8; }
.badge-approved { background:#f0fdf4;color:#15803d; }
.badge-rejected { background:#fef2f2;color:#b91c1c; }
.badge-converted { background:#faf5ff;color:#7c3aed; }
.badge-expired { background:#fff7ed;color:#c2410c; }

.empty-state { text-align:center;padding:40px;color:#9ca3af; }
.empty-state p { margin-top:12px; }
@media(max-width:1024px) {
    .acct-stats { grid-template-columns:repeat(2,1fr); }
    .detail-grid { grid-template-columns:1fr 1fr; }
    .contacts-grid { grid-template-columns:1fr; }
}

.lead_contact_list {padding: 15px;}
.lead_contact_list > li {}
.lead_contact_list > li.lead_contact {}
.lead_contact_list > li.lead_contact .user_header_section {margin-bottom: 15px;}
.lead_contact_list > li.lead_contact .user_header_section .user_avatar_section {position: relative;cursor: pointer;width: 100px;height: 100px;min-width: 100px;min-height: 100px;overflow: hidden;background-size: cover;background-position: center center;float: left;margin-right: 15px;border-radius: 8px;overflow: hidden;}
.lead_contact_list > li.lead_contact .user_header_section .user_name_section {width: calc(100% - 115px);float: right;}
.lead_contact_list > li.lead_contact .user_header_section .user_name_section .name {font-size: 14px;line-height: 20px;color: #111;font-family: 'Inter';font-weight: 600;margin-bottom: 10px;}
.lead_contact_list > li.lead_contact .user_header_section .user_name_section .name .designation {display: block;font-weight: 400;font-size: 12px;line-height: 18px;opacity: .6;}
.lead_contact_list > li.lead_contact .user_header_section .user_name_section .status_box {display: flex;gap: 5px;}
.lead_contact_list > li.lead_contact .user_header_section .user_name_section .status_box > li {}
.lead_contact_list > li.lead_contact .user_header_section .user_name_section .status_box > li .status {font-size: 10px;line-height: 10px;padding: 5px 6px;font-weight: 500;font-family: 'Inter';border-radius: 3px;letter-spacing: 0px;background: #ecf0f1;color: #555;display: flex;gap: 3px;}
.lead_contact_list > li.lead_contact .contact_list {}
.lead_contact_list > li.lead_contact .contact_list > li {display: flex;align-items: flex-start;gap: 10px;margin-top: 10px;}
.lead_contact_list > li.lead_contact .contact_list > li i {}
.lead_contact_list > li.lead_contact .contact_list > li .content {}
.lead_contact_list > li.lead_contact .contact_list > li .content .heading {opacity: .6;}
.lead_contact_list > li.lead_contact .contact_list > li .content .heading, .lead_contact_list > li.lead_contact .contact_list > li .content .value {display: block;font-size: 12px;font-weight: 400;}
.lead_contact_list > li.lead_contact .contact_list > li .content .value a {text-decoration: none;color: #111;}

.account_details {}
.account_details .title {font-size: 13px;font-weight: 500;line-height: 18px;margin-bottom: 10px;color: #111;}
.account_details .title .sub {display: block;font-size: 12px;line-height: 16px;color: #111;font-weight: 400;letter-spacing: 0px;opacity: .6;}
.pills_section {display: flex;gap: 5px;margin-bottom:15px;}
.pills_section .status-pill {font-size: 11px;line-height: 12px;font-weight: 500;padding: 5px 8px;border-radius: 4px;font-family: 'Inter';}
.section_title .pills_section {margin-bottom: 0px;}
.section_title .pills_section .status-pill {}


.column_header_selector {padding:15px;border-bottom:1px solid #f3f4f6;background:#f9fafb;flex-shrink:0;}
.sub_text_list {display:flex;gap:10px;opacity: .6;margin-bottom: 15px;background: #f4f4f4;padding: 5px;border-radius: 4px;border: 1px solid #ced0d1;align-items: center;justify-content: space-between;}
.sub_text_list > li {display: flex;gap: 5px;}
.sub_text_list > li > a {display:block;display: block;font-size: 11px;font-weight: 400;text-decoration:none;color:#111;}
.sub_text_list > li .heading {display:block;font-size: 11px;font-weight: 400;opacity:.6;}
.sub_text_list > li .value {display:block;display: block;font-size: 11px;font-weight: 400;}

.account_details .account_feat_list {display: grid;grid-template-columns: 1fr 1fr;gap: 10px 0;margin-bottom: 10px;}
.account_details .account_feat_list > li {}
.account_details .account_feat_list > li .heading {display:block;font-size: 12px;font-weight: 400;opacity:.6;color:#111;}
.account_details .account_feat_list > li .value {display:block;margin-top: 3px;font-size: 12px;font-weight: 400;}
.account_details .account_feat_list > li .value a {text-decoration:none;color:#111;}

.dt-serial { color: #9ca3af; font-size: 12px; font-weight: 600; }
.prob-track { height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.prob-fill  { height: 100%; background: #3b82f6; border-radius: 3px; }
.act-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Reminder alert bar ─────────────────────────────────────── */
.reminder-bar {display: flex;flex-direction: column;gap: 10px;padding: 0 15px;}
.reminder-bar-header {display: flex;align-items: center;justify-content: space-between;font-size: 12px;font-weight: 600;color: #F44336;}
.reminder-bar-header i { margin-right: 5px; }
.reminder-item-list {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;}
.reminder-item-list > li {}
.reminder-item-list > li.reminder-item {display: flex;gap: 5px;padding: 10px;background: rgb(255 0 0 / 10%);border-radius: 4px;border: 1px solid #ffc1c1;align-items: center;}
.reminder-item-list > li.reminder-item:hover { background: #fff7ed; }
.reminder-item-list > li.reminder-item-dot {width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;}
.reminder-item-list > li.reminder-item-dot.overdue  { background: #ef4444; }
.reminder-item-list > li.reminder-item-dot.due-today { background: #f97316; }
.reminder-item-list > li.reminder-item-text { flex: 1; font-size: 12px; color: #d91313; }
.reminder-item-list > li.reminder-item-text strong { font-weight: 600; }
.reminder-item-meta { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.reminder-bar-dismiss {
    background: none; border: none; cursor: pointer;
    font-size: 11px; color: #9ca3af; padding: 0;
}
.reminder-bar-dismiss:hover { color: #ef4444; }
/* Due dot on table rows */
.due-dot {
    display: inline-block;
    width: 7px; height: 7px; border-radius: 50%;
    margin-left: 5px; vertical-align: middle; flex-shrink: 0;
}
.due-dot.overdue   { background: #ef4444; }
.due-dot.due-today { background: #f97316; }

/* ── ARIA Panel ─────────────────────────────────────────────── */
.aria-top-bar {background:linear-gradient(135deg, #181824 0%, #2b2b4a 100%);border-radius:6px;padding:15px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.aria-top-bar-title {color:#e0e7ff;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.aria-top-bar-title i {color:#FFC107;font-size:22px;}
.aria-top-bar-actions {display:flex;gap:8px}
.aria-pill {}
.aria-pill:hover {}
.aria-pill.active {}

/* ── Anomaly strip ──────────────────────────────────────────── */
.anomaly-strip {margin-bottom:0px}
.anomaly-item {display:flex;align-items:flex-start;gap:10px;padding:15px;border-radius:6px;font-size:12px;}
.anomaly-high {background:#fef2f2;border-color:#ef4444;color:#991b1b}
.anomaly-medium {background:#fffbeb;border-color:#f59e0b;color:#92400e}
.anomaly-low {background: #fff0f0;border: 1px solid #ffc2c2;color: #b50a0a;}
.anomaly-item i {font-size:14px;margin-top:1px;flex-shrink:0;}
.anomaly-body {flex:1}
.anomaly-title {font-weight:700;margin-bottom:2px}
.anomaly-detail {color:inherit;opacity:.8}
.anomaly-action {font-style:italic;margin-top:3px;opacity:.7}
.anomaly-dismiss {cursor:pointer;opacity:.5;margin-left:auto;flex-shrink:0}
.anomaly-dismiss:hover {opacity:1}

/* ── Projection widget ──────────────────────────────────────── */
.projection-widget {background:#fff;border:1px solid #ced0d1;border-radius:6px;margin-bottom:16px;overflow:hidden}
.projection-header {display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #ced0d1;cursor:pointer}
.projection-header-left{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#111}
.projection-header-left i{color:#6366f1}
.projection-body{padding:16px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proj-card{background:#f9fafb;border:1px solid #ced0d1;border-radius:6px;padding:14px}
.proj-month{font-size:12px;font-weight:700;color:#374151;margin-bottom:10px}
.proj-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.proj-label{font-size:11px;color:#6b7280}
.proj-val{font-size:12px;font-weight:600}
.proj-commit{color:#059669}
.proj-best{color:#2563eb}
.proj-worst{color:#dc2626}
.proj-deals{font-size:11px;color:#9ca3af;margin-top:6px;padding-top:6px;border-top:1px solid #ced0d1}
.ariaPatterns {padding: 15px;border: 1px solid #ced0d1;border-radius: 4px;background: #fff;}

/* ── Pattern strip ──────────────────────────────────────────── */
.pattern-strip {display: flex;gap: 10px;overflow-x: auto;padding-bottom: 0;margin-bottom: 0;scrollbar-width: none;background: #fff1dd;border: 1px solid #ffe0b2;border-radius: 6px;}
.pattern-strip .txt {font-size: 12px;color: #664e2b;padding: 12px;font-weight:400;}
.pattern-strip::-webkit-scrollbar{display:none}
.pattern-card{background:#fff;border:1px solid #ced0d1;border-radius:6px;padding:12px 14px;min-width:220px;flex-shrink:0;cursor:pointer;transition:box-shadow .15s}
.pattern-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pattern-card-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-size:14px}
.pattern-card-title{font-size:12px;font-weight:700;color:#111;margin-bottom:4px}
.pattern-card-insight{font-size:11px;color:#6b7280;line-height:1.5}

/* ── Lead score badge ───────────────────────────────────────── */
.aria-score-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer}
.asb-vhigh{background:#d1fae5;color:#065f46}
.asb-high{background:#dbeafe;color:#1e40af}
.asb-medium{background:#fef3c7;color:#92400e}
.asb-low{background:#fee2e2;color:#991b1b}
.asb-unknown{background:#f3f4f6;color:#6b7280}

/* ── Chat analysis panel ────────────────────────────────────── */
.aria-panel-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:9999;align-items:flex-end;justify-content:center}
.aria-panel-overlay.open{display:flex}
.aria-panel{background:#fff;width:100%;max-width:580px;max-height:88vh;border-radius:12px 12px 0 0;overflow:hidden;display:flex;flex-direction:column}
.aria-panel-head{padding:16px 20px;background:#1e1b4b;color:#e0e7ff;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.aria-panel-head-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.aria-panel-body{padding:16px 20px;overflow-y:auto;flex:1}
.chat-type-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.ctt{padding:6px 12px;font-size:12px;border:1px solid #ced0d1;border-radius:4px;cursor:pointer;background:#fff;color:#6b7280;transition:all .12s}
.ctt.active{background:#4f46e5;color:#fff;border-color:#4f46e5}
.analysis-result{margin-top:14px}
.ar-sentiment{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:6px;margin-bottom:12px;font-size:13px;font-weight:600}
.ar-positive{background:#d1fae5;color:#065f46}
.ar-neutral{background:#f3f4f6;color:#374151}
.ar-negative{background:#fee2e2;color:#991b1b}
.ar-section{margin-bottom:12px}
.ar-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;margin-bottom:6px}
.ar-chips{display:flex;flex-wrap:wrap;gap:6px}
.ar-chip{padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600}
.ar-chip-obj{background:#fee2e2;color:#991b1b}
.ar-chip-sig{background:#d1fae5;color:#065f46}
.ar-chip-comp{background:#fef3c7;color:#92400e}
.ar-next{background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;padding:10px 14px;font-size:12px;color:#1e40af;font-weight:500}
.ar-delta{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700}
.ar-delta-pos{background:#d1fae5;color:#065f46}
.ar-delta-neg{background:#fee2e2;color:#991b1b}
.ar-delta-neu{background:#f3f4f6;color:#374151}

/* ── Capacity score card ─────────────────────────────────────── */
.capacity-card{background:#fff;border:1px solid #ced0d1;border-radius:6px;padding:14px}
.cap-tier-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:700;margin-bottom:10px}
.cap-tier-very_high{background:#d1fae5;color:#065f46}
.cap-tier-high{background:#dbeafe;color:#1e40af}
.cap-tier-medium{background:#fef3c7;color:#92400e}
.cap-tier-low{background:#fee2e2;color:#991b1b}
.cap-tier-unknown{background:#f3f4f6;color:#6b7280}
.cap-score-bar{height:6px;background:#e5e7eb;border-radius:3px;margin:8px 0;overflow:hidden}
.cap-score-fill{height:100%;border-radius:3px;transition:width .5s ease}
.cap-reasons{font-size:11px;color:#6b7280;margin-top:8px}
.cap-reason-item{display:flex;align-items:flex-start;gap:5px;margin-bottom:3px}
.cap-reason-item i{color:#22c55e;font-size:10px;margin-top:2px;flex-shrink:0}
.cap-credit{background:#f0f9ff;border:1px solid #bae6fd;border-radius:4px;padding:8px 10px;font-size:11px;color:#0c4a6e;margin-top:8px}

/* ── Pitch brief ─────────────────────────────────────────────── */
.aria-pitch-brief{font-size:12px}
.apb-meta{font-size:11px;color:#9ca3af;margin-bottom:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.apb-section{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}
.apb-section:last-child{border-bottom:none;margin-bottom:0}
.apb-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;margin-bottom:5px}
.apb-text{color:#374151;line-height:1.6}
.apb-list{margin:0;padding-left:16px;color:#374151;line-height:1.7}
.apb-highlight{background:#f0fdf4;border-radius:4px;padding:10px 12px;border-left:3px solid #22c55e}
.apb-warn{background:#fffbeb;border-radius:4px;padding:10px 12px;border-left:3px solid #f59e0b}
.apb-avoid{background:#fef2f2;border-radius:4px;padding:10px 12px;border-left:3px solid #ef4444}
.apb-action{background:#eff6ff;border-radius:4px;padding:10px 12px;border-left:3px solid #3b82f6}

/* ── Loading spinner ─────────────────────────────────────────── */
.aria-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:30px;color:#9ca3af;font-size:12px}

/* ── Layout ────────────────────────────────────────────────── */
.prod-create-layout { display:grid; grid-template-columns:250px 1fr; gap:10px; align-items:start; }
.prod-create-right  { display:grid; grid-template-columns:1fr 350px; gap:10px; align-items:start; }

/* ── Step sidebar ──────────────────────────────────────────── */
.prod-steps-sidebar { background:#fff; border:1px solid #ced0d1; border-radius:3px; padding:10px; position:sticky; top:70px; }
.prod-step-btn { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; background:none; border:none; border-radius:4px; cursor:pointer; font-size:13px; color:#666; text-align:left; transition:all .15s; }
.prod-step-btn:hover { background:#f5f5f5; color:#111; }
.prod-step-btn.active { background:#2449e0; color:#fff; }
.prod-step-btn.active .step-label {color:#fff;}
.prod-step-btn.done { color:#16a34a; }
.prod-step-btn.done .step-num { background:#f0fdf4; color:#16a34a; }
.step-num { width:22px; height:22px; border-radius:50%; background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.prod-step-btn.active .step-num { background:rgba(255,255,255,.2); color:#fff; }

.step-check { margin-left:auto; font-size:11px; }

/* ── Step content ──────────────────────────────────────────── */
.prod-step-content { display:none; background:#fff; border:1px solid #ced0d1; border-radius:6px; padding:15px; }
.prod-step-content.active { display:block; }
.step-title { font-size:18px; font-weight:700; margin:0 0 6px; }
.step-desc  { color:#888; font-size:13.5px; margin:0 0 24px; }

/* ── Type selector ─────────────────────────────────────────── */
.type-selector-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.type-card { display:flex; align-items:flex-start; gap:14px; padding:16px; border:2px solid #e8e8e8; border-radius:4px; cursor:pointer; transition:all .15s; position:relative; }
.type-card:hover { border-color:#aaa; }
.type-card input { display:none; }
.type-card.selected { border-color:#111; background:#fafafa; }
.type-card-icon { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.type-card-title { font-weight:700; font-size:14px; margin-bottom:4px; }
.type-card-desc  { font-size:12.5px; color:#555; margin-bottom:4px; }
.type-card-eg    { font-size:11.5px; color:#aaa; }
.type-card-check { position:absolute; top:12px; right:12px; color:#111; font-size:16px; display:none; }
.type-card.selected .type-card-check { display:block; }

.mkan-suggestion-box { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:#eff6ff; border:1px solid #bfdbfe; border-radius:4px; font-size:13px; margin-bottom:20px; }
.mkan-suggestion-box i { color:#2563eb; margin-top:2px; flex-shrink:0; }

/* ── Pricing layout ────────────────────────────────────────── */
.pricing-layout { display:grid; grid-template-columns:1fr 220px; gap:20px; }
.margin-calc { background:#f9fafb; border:1px solid #ced0d1; border-radius:4px; padding:16px; position:sticky; top:70px; }
.margin-calc-title { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#888; margin-bottom:14px; display:flex; align-items:center; gap:6px; }
.margin-row { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-bottom:1px solid #f0f0f0; }
.margin-row:last-child { border-bottom:none; }
.margin-divider { font-weight:600; border-top:1px solid #ddd; padding-top:8px; }
.margin-divider-line { border-top:1px solid #ced0d1; margin:8px 0; }
.margin-pct-val { font-size:16px; font-weight:800; }

/* ── Channel cards ─────────────────────────────────────────── */
.channel-card { border:1px solid #ced0d1; border-radius:4px; overflow:hidden; margin-bottom:12px; }
.channel-card-header { display:flex; align-items:center; gap:14px; padding:16px; }
.channel-icon { width:40px; height:40px; border-radius:8px; display:flex;
                 align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.channel-b2b .channel-icon { background:#eff6ff; color:#1d4ed8; }
.channel-b2c .channel-icon { background:#fdf2f8; color:#be185d; }
.channel-mkt .channel-icon { background:#ecfdf5; color:#065f46; }
.channel-info { flex:1; }
.channel-name { font-size:14px; font-weight:600; }
.channel-desc { font-size:12.5px; color:#888; margin-top:2px; }
.channel-card-fields { padding:0 16px 16px; border-top:1px solid #f5f5f5; }

/* ── Toggle switch ─────────────────────────────────────────── */
.toggle-switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.toggle-switch input { display:none; }
.toggle-track { display:block; width:100%; height:100%; background:#e0e0e0; border-radius:12px; cursor:pointer; transition:background .2s; }
.toggle-switch input:checked + .toggle-track { background:#111; }
.toggle-track::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:3px; left:3px; transition:transform .2s; }
.toggle-switch input:checked + .toggle-track::after { transform:translateX(18px); }
.toggle-label { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; }

/* ── Image upload ──────────────────────────────────────────── */
.img-upload-section { }
.img-upload-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13.5px; }
.img-upload-label span { font-size:12px; color:#aaa; }
.img-drop-zone { border:2px dashed #e0e0e0; border-radius:4px; padding:32px 20px; text-align:center; cursor:pointer; transition:all .15s; }
.img-drop-zone:hover, .img-drop-zone.drag-over { border-color:#888; background:#f9f9f9; }
.img-drop-icon { font-size:28px; color:#ccc; margin-bottom:10px; }
.img-drop-text  { font-size:14px; font-weight:500; color:#555; margin-bottom:4px; }
.img-drop-hint  { font-size:12px; color:#aaa; }
.img-preview { position:relative; display:inline-block; }
.img-preview img { width:120px; height:120px; object-fit:cover; border-radius:4px; border:1px solid #ced0d1; }
.img-remove-btn { position:absolute; top:-6px; right:-6px; background:#fff; border:1px solid #e0e0e0; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; }
.gallery-preview-grid { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.gallery-thumb { position:relative; }
.gallery-thumb img { width:80px; height:80px; object-fit:cover; border-radius:4px; }
.gallery-thumb-remove { position:absolute; top:-5px; right:-5px; background:#fff; border:1px solid #e0e0e0; border-radius:50%; width:18px; height:18px; cursor:pointer; font-size:9px; display:flex; align-items:center; justify-content:center; }

/* ── Attribute builder ─────────────────────────────────────── */
.attr-row { background:#f9f9f9; border:1px solid #ced0d1; border-radius:4px; padding:14px; margin-bottom:12px; }
.attr-row-header { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.attr-values-wrap { }
.attr-value-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:#e8eaf6; color:#3949ab; border-radius:3px; font-size:12.5px; margin:3px; }
.attr-value-tag button { background:none; border:none; cursor:pointer; font-size:10px; color:#9ca3af; padding:0; line-height:1; }

/* ── Product search dropdown ───────────────────────────────── */
.product-search-box { position:relative; margin-bottom:12px; }
.prod-search-dropdown { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e0e0e0; border-radius:4px; max-height:240px; overflow-y:auto; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.prod-search-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid #f5f5f5; }
.prod-search-item:hover { background:#f5f5f5; }
.prod-search-item:last-child { border-bottom:none; }
.added-items-list { }
.added-item-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:#f9f9f9; border:1px solid #ced0d1; border-radius:4px; margin-bottom:8px; }
.added-item-name { flex:1; font-size:13.5px; font-weight:500; }
.added-item-qty  { width:80px; }
.added-item-price { font-size:13px; color:#888; min-width:80px; text-align:right; }
.bundle-override { width:100px; }

/* ── Preview card ──────────────────────────────────────────── */
.preview-card { border:1px solid #ced0d1; border-radius:4px; overflow:hidden; }
.preview-img { height:140px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:32px; overflow:hidden; }
.preview-img img { width:100%; height:100%; object-fit:cover; }
.preview-type  { font-size:10px; font-weight:700; color:#888; padding:8px 10px 0; text-transform:uppercase; letter-spacing:.4px; }
.preview-name  { font-size:13.5px; font-weight:600; padding:4px 10px; color:#111; }
.preview-price { font-size:15px; font-weight:700; padding:2px 10px 8px; color:#111; }
.preview-channels { padding:0 10px 10px; display:flex; gap:4px; }

/* ── Final summary ─────────────────────────────────────────── */
.final-summary { background:#f0fdf4; border:1px solid #86efac; border-radius:4px; padding:16px; margin:20px 0; }
.final-summary h4 { margin:0 0 12px; font-size:14px; color:#15803d; }

/* ── Step nav ──────────────────────────────────────────────── */
.step-nav { display:flex; gap:10px; justify-content:flex-end; margin-top:28px; padding-top:20px; border-top:1px solid #f0f0f0; }
.section-divider { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#888; padding:14px 0 8px; border-top:1px solid #f0f0f0; margin-top:20px; }

.dash-greeting {border-radius: 6px;padding: 15px;margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between;gap: 16px;border:1px solid #ced0d1;}
.dash-greeting .dash-greeting-text-container {}
.dash-greeting .dash-greeting-text-container .title_1 {font-size: 18px;color: #111;line-height: normal;font-weight: 600;}
.dash-greeting .dash-greeting-text-container .title_1 .sub {display:block;font-size: 13px;color: #111;margin-top: 5px;font-weight: 400;letter-spacing: 0px;opacity: .6;}

/* ============================================================
   Bulk Employee Upload — styles
   File: public/css/bulk-upload.css
   Enqueue in bulk_upload.php with:
   <link rel="stylesheet" href="<?php echo url('css/bulk-upload.css') ?>">
   ============================================================ */

/* Custom rendered cell content inside DataTables rows */
.dt-emp-cell { display:flex; align-items:center; gap:10px; }
.emp-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    overflow: hidden; border: 1.5px solid var(--border);
    font-family: var(--display,sans-serif);
}
.emp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.emp-avatar.is-nexus { border-color: #7F77DD; }
.emp-avatar.initials { background: #EEEDFE; color: #3C3489; }
.emp-avatar.no-photo {
    background: var(--bg2);
    border: 1.5px solid var(--border);
}
.dt-identity-text { min-width:0; }
.el1 { font-size: 13px; font-weight: 600; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:180px; }
.el2 { font-size: 11px; color: var(--t3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; max-width:200px; }
.el3 { font-size: 10px; color: var(--t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:200px; }

.missing { color: #BA7517; font-style: italic; }
.missing-icon { color: #EF9F27; font-size: 9px; margin-right: 2px; }


.sp-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.sp-active    { background: #EAF3DE; color: #27500A; } .sp-active .sp-dot { background: #639922; }
.sp-probation { background: #FAEEDA; color: #633806; } .sp-probation .sp-dot { background: #BA7517; }
.sp-exited    { background: #F1EFE8; color: #444441; } .sp-exited .sp-dot { background: #888780; }
.sp-absconded { background: #FCEBEB; color: #791F1F; } .sp-absconded .sp-dot { background: #A32D2D; }
.sp-terminated{ background: #FCEBEB; color: #791F1F; } .sp-terminated .sp-dot { background: #A32D2D; }

.emp-ctc { font-size: 13px; font-weight: 700; font-family: var(--mono); color: var(--t); }
.emp-doj { font-size: 10px; color: var(--t3); margin-top: 2px; }
.emp-blood { font-size: 10px; color: var(--t3); margin-top: 2px; display: flex; align-items: center; gap: 3px; }

.emp-action-btn {
    font-size: 11px; padding: 4px 10px;
    border-radius: 6px; border: 1px solid #ced0d1;
    background: transparent; color: var(--t);
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.emp-action-btn:hover { background: var(--bg2); }
.emp-action-btn.is-queued { background: #E6F1FB; color: #0C447C; border-color: #85B7EB; cursor: default; }

/* DataTables container fit */
#valid-dt_wrapper, #results-dt_wrapper {}
.err-table-shell { border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; }
.err-col-head {
    display: grid; grid-template-columns: 40px 1fr 140px 1fr;
    padding: 7px 14px; border-bottom: 0.5px solid var(--border);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--t3); background: var(--bg2);
}
.err-row {
    display: grid; grid-template-columns: 40px 1fr 140px 1fr;
    align-items: center; padding: 10px 14px;
    border-bottom: 0.5px solid var(--border);
}
.err-row:last-child { border-bottom: none; }
.err-row:hover { background: #fff8f8; }

/* ── Upload stage header bar (template download button) ───── */
.bulk-upload-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.bulk-upload-header-row .settings-card-title { margin-bottom: 2px; }
.bulk-upload-template-btn {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

#drop-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    background: var(--bg2);
    cursor: pointer;
    transition: border-color .2s;
    margin: 16px 0;
}

#file-info-bar {
    display: none;
    background: var(--bg2);
    border: 1px solid #ced0d1;
    border-radius: 6px;
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* ── DataTables length-menu relocated into search_container ─── */
.dt-length-slot { margin-left: auto; }
.dt-length-slot .dataTables_length { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--t3); }
.dt-length-slot .dataTables_length select {
    border: 1px solid #ced0d1;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    background: var(--surface, #fff);
}

/* ── Serial number column ───────────────────────────────────── */
table.dataTable.emp-dt td.dt-serial {
    text-align: center;
    font-size: 12px;
    color: var(--t3);
    font-weight: 600;
}

.contact_header {padding: 15px;display: grid;grid-template-columns: 40px 1fr;align-items: center;gap: 10px;}
.section_list > li.settings-card .contact_header {border-bottom: 1px solid #ced0d1;}
.contact_header .contact_image_container {height: 40px;width: 40px;border-radius: 6px;}
.contact_header .contact_image_container .contact_image {height: 40px;width: 40px;border-radius: 6px;}
.contact_header .contact_details {}
.contact_header .contact_details .title {font-size: 12px;color: #111;font-weight: 600;margin: 0;}
.contact_header .contact_details .title .sub {display:block;font-size: 12px;margin-top: 0px;font-weight: 400;letter-spacing: 0px;opacity: .6;}
.note_container {}
.note_container .title_header {justify-content: space-between;align-items: center;margin-bottom: 15px;}
.note_container .title_header .title {margin-bottom:0;}
.note_container .title_header .btn {background:transparent;border:0;padding:0;font-size:12px;font-weight: 400;opacity: .6;}
.note_container .title_header .btn:hover {color:#111;opacity:1;}
.note_container .notesDisplay {margin-bottom: 0;}
.upload_stat {display: grid;grid-template-columns: 125px 1fr;gap: 10px;align-items: center;width: 200px;text-align: right;}

.modal_container {max-width: 500px;text-align: center;}
.modal_container .title {font-size: 16px;font-weight: 600;margin-bottom: 20px;}
.modal_container .title .sub {}
.modal_container form {}

.inst_list {}
.inst_list > li {margin-top: 10px;display: flex;justify-content: space-between;font-size: 12px;}
.inst_list > li code {font-size: 12px;background: var(--bg);border: 1px solid #e5e5e5;padding: 10px;border-radius: 4px;color: #111;flex: 1;display: flex;justify-content: space-between;}
.inst_list > li strong {}