*{box-sizing:border-box;margin:0;padding:0}
:root{
  --font-ui: var(--font-sans);
  --bg-1: var(--neutral-bg);
  --bg-2: var(--neutral-bg-alt);
  --bg-app: var(--neutral-bg);
  --surface-2: var(--neutral-surface-2);
  --surface-3: var(--neutral-surface-3);
  --border-strong: var(--neutral-border-hover);
  --line-soft: rgba(221,230,240,.72);
  --muted-strong: var(--text-muted-strong);
  --radius-xl: var(--radius-2xl);
  --shell-max: 1440px;
  --transition-fast: var(--transition-base);
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: 1.6;
  color-scheme: light;
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-1);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.3), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 18%);
  mix-blend-mode:screen;
}
a{text-decoration:none;color:inherit}
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
/* Attendance Grouping & Reports */
.att-team-section {
    transition: transform 0.2s;
}
.att-team-section:hover {
    border-color: var(--att-primary) !important;
}
.report-sidebar .form-control {
    background: var(--surface);
    border-color: #cbd5e1;
}
.report-sidebar .btn {
    padding: 10px;
}
@media print {
    @page {
        size: A4 portrait;
        margin: 5mm;
    }
    body { background: white !important; font-size: 9pt !important; }
    body * { visibility: hidden; }
    #timesheet-result-container, #timesheet-result-container * { visibility: visible; }
    #timesheet-result-container { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
        padding: 0 !important;
        margin: 0 !important;
    }
    .no-print, .btn, .report-sidebar, .admin-tabs-container, .topbar, .tabs, .toolbar, .stats { display: none !important; }
    
    .timesheet-header { margin-bottom: 5mm !important; }
    .timesheet-header h2 { font-size: 14pt !important; margin: 0 !important; }
    .timesheet-header .text-muted { font-size: 8pt !important; }
    
    .att-stats-grid { 
        display: grid !important; 
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 5px !important; 
        margin-bottom: 5mm !important; 
    }
    .att-stat-card { 
        border: 1px solid #ddd !important; 
        border-top: 3px solid #10b981 !important; 
        padding: 5px !important; 
        text-align: center !important;
    }
    .att-stat-label { font-size: 7pt !important; text-transform: uppercase !important; }
    .att-stat-val { font-size: 12pt !important; font-weight: bold !important; }
    
    table { 
        width: 100% !important; 
        border-collapse: collapse !important; 
        border: 0.5pt solid #000 !important; 
        table-layout: auto !important;
    }
    th { 
        background: #f0f0f0 !important; 
        font-size: 8pt !important; 
        padding: 4px !important; 
        border: 0.5pt solid #000 !important;
    }
    td { 
        font-size: 8pt !important; 
        padding: 3px 5px !important; 
        border: 0.5pt solid #ccc !important; 
        line-height: 1.1 !important;
    }
    
    .att-badge { 
        font-size: 7pt !important; 
        padding: 1px 3px !important; 
        border: 0.5pt solid #ddd !important;
        display: inline-block !important;
    }
    
    /* Extra compaction for the date column */
    td div { font-size: 7pt !important; }
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

/* Utilities */
.section-shell{
  display:grid;
  gap:16px;
  padding:22px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(218,227,238,.94);
  background:
    radial-gradient(circle at top right, rgba(31,95,166,.05), transparent 26%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.95)),
    linear-gradient(120deg,rgba(31,95,166,.04),rgba(44,122,105,.03) 55%,rgba(185,137,44,.03));
  box-shadow:0 20px 48px rgba(19,34,56,.07);
}
.section-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:4px
}
.section-head h3,.section-head h2{margin:0;font-family:var(--font-brand)}
.section-head h3{
  font-size:18px;
  letter-spacing:-0.01em;
}
.section-head > div:first-child{
  display:grid;
  gap:4px;
}
.section-head > div:first-child::before{
  content:"SECTION";
  display:inline-flex;
  width:max-content;
  padding:4px 10px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary-strong);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.section-note{font-size:12px;color:var(--muted);max-width:72ch;line-height:1.5}
.section-head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.text-muted-xs{font-size:12px;color:var(--ink-muted)}
.text-brand-xs{font-size:12px;color:var(--primary);font-weight:700}
.card-pad-xl{padding:20px}
.card-pad-lg{padding:12px}
.mt-0{margin-top:0}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.mt-15{margin-top:15px}
.mb-8{margin-bottom:8px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.mb-16{margin-bottom:16px}
.mb-0{margin-bottom:0}
.mb-20{margin-bottom:20px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.ml-10{margin-left:10px}.w-full{width:100%}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-between-gap8{display:flex;justify-content:space-between;gap:8px;align-items:center}
.width-150{width:150px}
.maxh-60vh-auto{max-height:60vh;overflow:auto}
.maxh-260-auto{max-height:260px;overflow:auto}
.modal-maxw-860{max-width:860px}
.maxw-980{max-width:980px}
.maxw-900{max-width:900px}
.maxw-880{max-width:880px}
.maxw-840{max-width:840px}
.maxw-760{max-width:760px}
.maxw-720{max-width:720px}
.paper-preview-frame-wrap{position:relative;min-height:320px;border:1px dashed #d7e2ef;border-radius:14px;background:#fdfefe}
.paper-preview-frame{width:100%;height:100%;border:0}
.paper-preview-empty{min-height:320px;display:flex;align-items:center;justify-content:center}
.progress-track{height:10px;background:#edf2f7;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),#2a86ff);border-radius:999px}
.progress-bar-transition{transition:width .2s ease}
.helper-text{font-size:12px;color:var(--ink-muted)}
.helper-text-strong{font-size:12px;color:var(--ink-muted);font-weight:600}
.field-hint-sm{font-size:12px;color:var(--ink-muted)}
.drag-drop-box{border:2px dashed #ccc;padding:30px;text-align:center;cursor:pointer;border-radius:10px}
.preview-actions{display:flex;justify-content:space-between;gap:10px;align-items:center}
.preview-actions-wrap{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.preview-actions-start{display:flex;justify-content:flex-start;margin-top:0}
.info-box-tight{margin-top:0;margin-bottom:8px}
.section-stack-10{margin-top:10px}
.section-stack-12{margin-top:12px}
.section-stack-14{margin-top:14px}
.section-stack-15{margin-top:15px}
.section-stack-16{margin-bottom:16px}
.page-size-wrap{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 14px 16px;color:var(--muted);font-size:13px}
.page-size-select{min-width:92px;padding:8px 10px;border:1px solid var(--border-mid);border-radius:10px;background:var(--surface)}
.modal-maxw-1100{max-width:1100px}
.modal-maxw-980{max-width:980px}
.modal-maxw-900{max-width:900px}
.modal-maxw-880{max-width:880px}
.modal-maxw-840{max-width:840px}
.modal-maxw-760{max-width:760px}
.modal-maxw-720{max-width:720px}
.modal-maxw-700{max-width:700px}
.modal-section-spaced{margin-bottom:14px}
.modal-actions-start{justify-content:flex-start;margin-top:0}
.modal-actions-spread{justify-content:space-between;flex-wrap:wrap}
.modal-actions-row{display:flex;gap:8px;flex-wrap:wrap}
.label-stack{font-weight:600;margin-bottom:8px}
.label-stack-sm{font-size:12px;color:var(--ink-muted);margin-bottom:10px}
.hidden-file-input{display:none}

/* Components */
.app{max-width:var(--shell-max);margin:0 auto;padding:24px 16px}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  letter-spacing: -0.02em; /* تقليل التباعد قليلاً ليعطي طابعاً عصرياً */
  color: var(--text);
  font-weight: 700;
}
h1{font-size:24px;font-weight:700}
.topbar{
  position:sticky;top:12px;z-index:40;
  display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:10px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:12px 14px;box-shadow:var(--shadow);
}
.topbar-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center;width:100%;justify-content:space-between}
.topbar-actions-main,.topbar-actions-more{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.topbar-more{position:relative}
.topbar-more > summary{
  list-style:none;cursor:pointer;padding:8px 12px;border-radius:12px;border:1px solid var(--border-mid);background:var(--surface);
  font-size:13px;font-weight:600;color:#4e5d73
}
.topbar-more > summary::-webkit-details-marker{display:none}
.topbar-more[open] > summary{background:var(--surface-tint);border-color:#c8d9ee;color:var(--primary)}
.topbar-more-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:flex;gap:8px;flex-wrap:wrap;
  min-width:min(640px, calc(100vw - 40px));padding:12px;background:var(--surface);border:1px solid var(--border-light);border-radius:16px;
  box-shadow:0 18px 44px rgba(17,34,68,.12)
}
.btn{
  min-height: 42px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid #d6dee8;
  background: var(--surface);
  color: #243043;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.tab:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(31,95,166,.18)
}
.btn:hover{box-shadow:0 8px 18px rgba(17,34,68,.10)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);color:var(--surface);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-strong)}
.btn-danger{background:var(--danger-soft);color:#c0392b;border-color:#f1caca}
.btn-danger:hover{background:#ffe6e6}
.btn-success{background:var(--success-soft);color:var(--success);border-color:#b7dfba}
.btn-sm{min-height:34px;padding:5px 11px;font-size:12px}
.btn-brand{background:var(--primary-soft);color:var(--primary);border-color:#c8d9ee}
.btn-brand:hover{background:#dce9f8;border-color:#b5cbed}
.btn-xs{min-height:28px;padding:3px 8px;font-size:11px;border-radius:8px}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-outline:hover{background:var(--bg-2);border-color:var(--border-strong)}
.btn-warning{background:var(--gold-soft);color:#8d6c00;border-color:#f0dbaa}
.btn-warning:hover{background:#f7e8c4}.btn-outline,.btn-warning,.btn-brand{font-family:var(--font-ui)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.stats-compact{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-2)}
.stat{
  background:var(--surface);border-radius:var(--radius-md);padding:var(--space-4);border:1px solid var(--border);
  cursor:pointer;transition:all var(--transition-fast);
  box-shadow:var(--shadow-sm)
}
.stats-compact .stat{padding:var(--space-3) var(--space-4);min-height:88px}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#c7d7ec}
.stat-label{font-size:var(--text-xs);color:var(--ink-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.05em;font-weight:var(--weight-bold)}
.stat-value{font-size:var(--text-2xl);font-weight:var(--weight-extrabold);letter-spacing:-0.03em;font-family:var(--font-brand);color:var(--text)}
.loading-spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
.loading-spinner-xs{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.flex-column{display:flex;flex-direction:column}
.flex-gap-10{display:flex;gap:10px}
.flex-gap-20{display:flex;gap:20px}
.flex-center-pad20{display:flex;align-items:center;justify-content:center;padding:20px}
.flex-center-pad40{display:flex;align-items:center;justify-content:center;padding:40px}
.flex-center-column{display:flex;flex-direction:column;align-items:center;justify-content:center}
.flex-gap-4{display:flex;gap:4px}.gap-10{gap:10px}
.tabs{
  display:flex;gap:6px;margin-bottom:10px;padding:6px;background:rgba(255,255,255,.8);
  border:1px solid rgba(220,229,240,.8);border-radius:var(--radius-md);overflow-x:auto;/* backdrop-filter:blur(10px); */ background: var(--surface);
  box-shadow:var(--shadow-sm);
}
.tab{
  padding: 12px 22px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--muted-strong);
  border: 0;
  background: transparent;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  white-space: nowrap;
  font-family: var(--font-ui);
}
.tab:hover{background:var(--primary-soft);color:var(--primary)}
.tab.active{color:var(--primary);background:var(--surface);box-shadow:var(--shadow-sm), 0 0 0 1px rgba(31,95,166,0.1);font-weight:700}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center;padding:4px 0}
.employee-toolbar{
  display:grid;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.employee-toolbar .toolbar-group{
  display:grid;
  gap:8px;
  width:100%;
}
.employee-toolbar .toolbar-label{
  font-size:11px;color:var(--ink-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;min-width:88px
}
.employee-toolbar .filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:8px;
}
.employee-toolbar .filter-field{
  display:grid;
  gap:6px;
}
.employee-toolbar .toolbar-inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.employee-toolbar .toolbar-inline-actions .btn{
  margin:0;
}
.employee-more-menu{
  position:relative;
}
.employee-more-menu summary{
  list-style:none;
  cursor:pointer;
}
.employee-more-menu summary::-webkit-details-marker{
  display:none;
}
.employee-more-panel{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:190px;
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid var(--border-mid);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  z-index:20;
}
.employee-more-panel .btn{
  width:100%;
  text-align:left;
}
@media(max-width:900px){
  .emp-summary-row{
    flex-direction:column;
    align-items:stretch;
  }
  .employee-more-menu-inline{
    align-self:flex-end;
  }
}
.employee-toolbar .field-label{
  font-size:11px;
  color:var(--ink-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.employee-toolbar input,
.employee-toolbar select{
  width:100%;
  min-width:0;
  flex:none;
}
.toolbar input,.toolbar select{
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(17,34,68,.03);
  min-width: 160px;
  flex: 1 1 160px;
  transition: all var(--transition-fast);
  font-family: var(--font-ui);
}
.toolbar input:focus,.toolbar select:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:#7ea8da;box-shadow:0 0 0 3px rgba(31,95,166,.12)
}
.card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm)
}
.table-page-section{
  gap:14px;
}
.table-page-toolbar{
  margin-bottom:0;
  padding:14px 16px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.table-page-meta{
  display:grid;
  gap:10px;
}
.emp-summary-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.emp-summary-row #emp-summary{
  flex:1;
}
.table-page-meta .filter-chips{
  margin:0;
}
.table-page-meta [id$="-bulk-actions"]:empty,
.table-page-meta #employee-bulk-actions:empty,
.table-page-meta #request-bulk-actions:empty{
  display:none;
}
.table-page-summary{
  margin-bottom:0;
  min-height:48px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid #e5edf7;
  background:linear-gradient(180deg,#fbfdff,#f6f9fd);
}
.table-page-summary strong{
  font-size:18px;
  color:#163254;
}
.table-page-card{
  border-radius:24px;
  border:1px solid #e4ebf4;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:0 14px 28px rgba(17,34,68,.05);
}
.table-card{
  padding:0;
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at top left, rgba(31,95,166,.04), transparent 22%),
    linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:0 18px 40px rgba(17,34,68,.06);
}
.table-page-shell{
  padding:18px;
}
.table-page-toolbar-frame{
  padding:0 0 14px;
  margin-bottom:14px;
  border-bottom:1px solid #edf2f8;
}
.table-page-toolbar-frame .report-toolbar-actions .btn,
.table-page-toolbar-frame .report-toolbar-controls > .btn,
.table-page-toolbar-frame .report-toolbar-export .btn{
  min-height:40px;
}
.table-page-stats{
  margin-bottom:16px;
}
.table-scroll{overflow-x:auto;border-radius:16px}
.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:650px}
.data-table th{
  background: #f8fbff;
  padding: 16px 15px;
  text-align: left;
  font-weight: 700;
  color: var(--muted-strong);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-ui);
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table td{
  padding: 16px 15px;
  border-bottom: 1px solid #f0f4f8;
  vertical-align: middle; /* جعل المحاذاة في المنتصف تعطي شكلاً أكثر تناسقاً */
  color: var(--text);
  font-size: 13.5px;
}
.data-table tr:hover td {
  background: #f4f8fd; /* لون أغمق قليلاً لتمييز الصف عند المرور بالماوس */
  transition: background var(--transition-fast);
}
.data-table tbody tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.b-approved{background:#e8f5e9;color:var(--success)}
.b-pending{background:#fff8e1;color:#f57f17}
.b-rejected{background:#ffebee;color:var(--danger)}
.b-success{background:#e8f5e9;color:var(--success);border:1px solid #c8e6c9}
.b-warning{background:#fff3e0;color:#ef6c00;border:1px solid #ffe0b2}
.b-danger{background:#ffebee;color:var(--danger);border:1px solid #ffcdd2}
.b-info{background:#e3f2fd;color:#1565c0;border:1px solid #bbdefb}
.tone-danger .stat-icon-shell { background: #fee2e2; color: #dc2626; }
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;line-height:1;background:var(--avatar-bg,#e3f2fd);color:var(--avatar-fg,var(--primary))}
.avatar.avatar-sm{width:42px;height:42px;font-size:14px;flex:none}
.avatar.avatar-xl{width:84px;height:84px;border-radius:18px;font-size:28px;flex:none}
.avatar-photo-xl{width:84px;height:84px;border-radius:18px;object-fit:cover;border:1px solid var(--border-light);background:var(--surface);flex:none}
.muted-text{font-size:12px;color:#6f7d93;line-height:1.3}
.muted-text.is-danger{color:var(--danger)}
.stack-actions{display:flex;gap:6px;flex-wrap:wrap}
.stack-actions.is-top{align-items:flex-start}
.stack-actions.is-spaced{margin-top:8px}
.stack-actions.is-between{justify-content:space-between;align-items:center}
.stack-block{display:grid;gap:8px}
.ms-6{margin-left:6px}
.emp-cell{display:flex;align-items:center;gap:9px}
.emp-cell-compact{align-items:flex-start;gap:10px}
.emp-cell-body{display:grid;gap:4px;min-width:0}
.emp-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2}
.emp-subline{font-size:12px;color:#6f7d93;line-height:1.3}
.emp-meta-row{display:flex;gap:6px;flex-wrap:wrap}
.emp-inline-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:2px;
}
.emp-inline-meta .emp-chip{
  background:var(--surface-tint);
  color:#4d647f;
}
.emp-chip{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#f4f8fd;
  border:1px solid #dde8f4;color:#56708f;font-size:11px;font-weight:600
}
.detail-profile{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.85fr);
  gap:14px;
  padding:16px;
  border-radius:22px;
  background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%);
  border:1px solid #dbe6f3;
  box-shadow:var(--shadow)
}
.detail-profile-primary{
  min-width:0;
}
.detail-profile-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.detail-profile-avatar{
  width:84px;
  height:84px;
  border-radius:20px;
  overflow:hidden;
  flex:none;
  border:1px solid #e5edf6;
  box-shadow:0 12px 28px rgba(17,34,68,.08);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-profile-avatar img{width:100%;height:100%;object-fit:cover}
.detail-profile-name{font-size:20px;line-height:1.08;font-weight:800;letter-spacing:-0.03em;color:#1d2d44}
.detail-profile-sub{margin-top:6px;color:var(--ink-strong);font-size:13px}
.detail-profile-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.detail-profile-side{
  display:grid;
  gap:10px;
  align-content:start
}
.detail-summary-card,
.detail-status-card{
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid #dde7f2;
  box-shadow:0 8px 20px rgba(17,34,68,.04);
}
.detail-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.detail-summary-item{
  display:grid;
  gap:3px;
  padding:8px 0;
}
.detail-summary-item label,
.detail-status-card label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-muted);
}
.detail-summary-item strong,
.detail-status-card strong{
  font-size:22px;
  line-height:1.05;
  color:#183150;
}
.detail-summary-item span,
.detail-status-card span{
  font-size:12px;
  color:#6f7d93;
}
.detail-status-card{
  display:grid;
  gap:4px;
}
.detail-sections{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}
.detail-section-card{
  padding:14px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow)
}
.detail-section-card.full{grid-column:1 / -1}
.detail-section-card h4{margin:0 0 10px;font-size:15px}
.detail-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.detail-section-heading h4{margin:0}
.timeline-toggle-btn{
  min-width:82px;
  justify-content:center;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}
.detail-field{
  padding:12px 14px;
  border:1px solid #e7edf5;
  border-radius:var(--radius-sm);
  background:#fbfdff
}
.detail-field label{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--ink-muted);
  margin-bottom:4px
}
.detail-field span{display:block;font-size:13px;font-weight:600;color:#1f3354;word-break:break-word}
.detail-badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.detail-progress{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.detail-progress-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--ink-strong);
  font-weight:600;
}
.detail-progress-bar{
  height:10px;
  border-radius:999px;
  background:#ecf2f8;
  overflow:hidden;
}
.detail-progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),#2aa19a);
}
.detail-shell{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:24px;
  background:linear-gradient(180deg,var(--surface) 0%,#f8fbff 100%);
  border:1px solid #e2eaf3;
  box-shadow:0 18px 40px rgba(17,34,68,.05);
}
.detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:18px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  border:1px solid #e5edf6;
}
.detail-header.is-compact{
  padding:0;
  background:transparent;
  border:0;
}
.detail-header-main{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  flex:1 1 320px;
}
.detail-header-main > div{min-width:0}
.detail-header-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.detail-header-meta{
  margin-top:4px;
  color:#6f7d93;
}
.detail-quick-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.detail-content{
  padding:20px;
}
.employee-identity-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin-bottom:14px;
  border-radius:16px;
  border:1px solid #e1e9f3;
  background:linear-gradient(180deg,#fafdff,#f3f8ff);
}
.employee-identity-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.employee-identity-avatar .avatar{
  width:42px;
  height:42px;
  border-radius:var(--radius-xs);
  font-size:16px;
}
.employee-identity-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.employee-identity-copy strong{
  font-size:16px;
  color:#1d2d44;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-identity-copy span{
  font-size:12px;
  color:var(--ink-strong);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-identity-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.employee-identity-meta .badge{
  background:#eaf2fd;
  color:#215592;
}
.detail-header-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:flex-end;
  flex:1 1 260px;
}
.detail-header.is-compact .detail-header-actions{
  width:100%;
  justify-content:flex-end;
}
.company-detail-shell{
  position:relative;
  overflow:hidden;
}
.company-detail-shell::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg,var(--primary),#2c7a69,#b9892c);
}
.company-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:20px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.5), transparent 36%),
    linear-gradient(135deg, var(--primary) 0%, #2b6bc0 52%, #2a8c7b 100%);
  color:var(--surface);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 44px rgba(17,34,68,.12);
}
.company-hero-main{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:280px;
}
.company-hero-avatar{
  width:68px;
  height:68px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.04em;
  flex:none;
}
.company-hero-copy h3{
  margin:0;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-0.03em;
  font-family:var(--font-brand);
  font-weight:800;
}
.company-hero-kicker{
  display:inline-flex;
  align-items:center;
  margin-bottom:8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:var(--surface);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.company-hero-subtitle{
  margin-top:8px;
  color:rgba(255,255,255,.84);
  font-size:13px;
}
.company-hero-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.company-hero-badges .badge{
  background:rgba(255,255,255,.16);
  color:var(--surface);
  border:1px solid rgba(255,255,255,.18);
}
.company-hero-aside{
  display:grid;
  gap:10px;
  min-width:220px;
  align-content:start;
}
.company-hero-panel{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:var(--surface);
}
.company-hero-panel-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.88;
}
.company-hero-panel strong{
  font-size:18px;
  line-height:1.15;
}
.company-copy-value{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:var(--surface);
  font-size:22px;
  font-weight:800;
  line-height:1.1;
  cursor:pointer;
  text-align:left;
  letter-spacing:-0.03em;
}
.company-copy-value:hover{
  text-decoration:underline;
}
.company-hero-panel span{
  font-size:12px;
  color:rgba(255,255,255,.82);
}
.company-hero-aside .detail-header-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.company-actions-dropdown{
  position:relative;
}
.company-actions-dropdown > summary{
  list-style:none;
  cursor:pointer;
}
.company-actions-dropdown > summary::-webkit-details-marker{display:none}
.company-actions-dropdown[open] > summary{
  background:var(--surface-tint);
  border-color:#c8d9ee;
  color:var(--primary);
}
.company-actions-dropdown-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:30;
  display:grid;
  gap:8px;
  min-width:180px;
  padding:10px;
  background:var(--surface);
  border:1px solid #dfe8f3;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(17,34,68,.14);
}
.company-actions-dropdown-panel .btn{
  width:100%;
  justify-content:flex-start;
}
.company-content{
  display:grid;
  gap:14px;
  padding:2px 2px 4px;
}
.detail-subtabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.detail-subtabs .btn{min-width:120px}
.detail-timeline{
  display:grid;
  gap:10px;
}
.timeline-item{
  display:grid;
  grid-template-columns:14px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.timeline-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:6px;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(31,95,166,.12);
}
.timeline-dot.is-success{background:var(--success);box-shadow:0 0 0 4px rgba(46,125,50,.12)}
.timeline-dot.is-warning{background:#f57f17;box-shadow:0 0 0 4px rgba(245,127,23,.12)}
.timeline-dot.is-danger{background:var(--danger);box-shadow:0 0 0 4px rgba(198,40,40,.12)}
.timeline-card{
  padding:12px 14px;
  border-radius:14px;
  background:#f8fbff;
  border:1px solid #e3eaf4;
}
.timeline-card strong{display:block;font-size:13px;color:#1f3354}
.timeline-card span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.signal-list{display:grid;gap:8px}
.signal-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid #e3eaf4;
  background:#fbfdff;
}
.signal-item strong{display:block;font-size:13px}
.signal-item span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.signal-item .badge{white-space:nowrap}
.leave-balance-block{display:grid;gap:4px}
.request-date-block{display:grid;gap:4px}
.request-date-block strong{display:block}
.request-date-block span{display:block;font-size:11px;color:#6f7d93}
.leave-bar{height:6px;border-radius:3px;background:#eef1f7;overflow:hidden;flex:1}
.leave-bar-fill{height:100%;border-radius:3px}
.bar-wrap{display:flex;align-items:center;gap:8px}
.bar-lbl{font-size:11px;color:var(--ink-muted);min-width:55px}
.alert{
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:var(--shadow-xs);
}
.alert-warning{background:linear-gradient(180deg,#fffbef,#fff7e0);color:#7b5100;border-color:#f2d89b}
.alert-success{background:linear-gradient(180deg,#f4fbf5,#ecf8ee);color:#20703a;border-color:#c9e7ce}
.alert-info{background:linear-gradient(180deg,#f5f9ff,#edf4fd);color:#1f4d85;border-color:#d9e5f4}
/* Advanced Notification Hub */
.alert-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
}
.alert-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.alert-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-soft);
  box-shadow: var(--shadow-sm);
  background: var(--surface-1);
}

.alert-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
  opacity: 0.6;
}

.alert-card.is-danger::before { background: var(--danger); }
.alert-card.is-warning::before { background: var(--warning); }
.alert-card.is-info::before { background: var(--info); }
.alert-card.is-success::before { background: var(--success); }

.alert-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-soft);
  color: var(--primary);
}

.alert-card.is-danger .alert-card-icon { background: #fee2e2; color: var(--danger); }
.alert-card.is-warning .alert-card-icon { background: #fef3c7; color: var(--warning); }
.alert-card.is-info .alert-card-icon { background: #e0f2fe; color: var(--info); }

.alert-card-body {
  flex: 1;
}

.alert-card-body strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.alert-card-body span {
  display: block;
  font-size: 13px;
  color: var(--muted-strong);
  line-height: 1.4;
}

.alert-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert-action-btn {
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.alert-action-btn:hover {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
}

.alert-dismiss-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.alert-dismiss-btn:hover {
  background: #fee2e2;
  color: var(--danger);
}

#notif-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger);
  color: var(--surface);
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-xs);
  animation: pulse-notif 2s infinite;
}

@keyframes pulse-notif {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}



















/* Modern Employee Profile Styles */
.profile-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: fadeIn 0.4s ease-out;
}

.profile-identity-card {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--surface);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.profile-identity-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 50%;
  pointer-events: none;
}

.profile-avatar-large {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--surface);
  backdrop-filter: blur(10px);
}

.profile-main-info h2 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 4px 0;
  letter-spacing: -0.5px;
}

.profile-main-info p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-status-badge {
  position: absolute;
  top: 32px;
  right: 32px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-tabs-nav {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 6px;
  border-radius: var(--radius-md);
  width: fit-content;
}

.profile-tab-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-strong);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-tab-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--primary);
}

.profile-tab-btn.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.profile-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.profile-info-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-info-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f8fafc;
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-info-label {
  font-size: 13px;
  color: var(--muted-strong);
  font-weight: 500;
}

.profile-info-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
}

.profile-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.bulk-toolbar{

  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding:12px 14px;
  border:1px solid #dbe6f3;
  border-radius:16px;
  background:linear-gradient(180deg,#f8fbff,#f4f9ff);
  box-shadow:var(--shadow);
  margin:12px 0 14px;
}
.bulk-toolbar-main{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.bulk-toolbar-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.bulk-toolbar-title strong{font-size:13px;color:#1f3354}
.bulk-toolbar-title span{font-size:12px;color:var(--muted)}
.bulk-toolbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.bulk-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #d7e4f2;
  background:var(--surface);
  color:var(--primary);
  font-size:12px;
  font-weight:700;
}
.selection-cell{
  width:42px;
  text-align:center !important;
}
.selection-checkbox{
  width:16px;
  height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-overlay.hidden{display:none}
.modal{
  background:linear-gradient(180deg,var(--surface) 0%,#f7fbff 100%);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  width:100%;
  max-width:550px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-strong);
  border:1px solid rgba(220,229,240,.9)
}
.modal h2{font-size:var(--text-lg);margin-bottom:18px;letter-spacing:-0.01em}
.form-group{margin-bottom:var(--space-3)}
.form-group label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--ink-muted);margin-bottom:var(--space-1)}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:9px 12px;border:1px solid var(--border-mid);border-radius:10px;font-size:13px;background:var(--surface)
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.info-box{background:linear-gradient(180deg,#f8fafd,#f3f8fd);border-radius:12px;padding:11px 14px;margin-bottom:12px;border:1px solid #e2ebf7}
.info-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0}
/* ── Bulk Import ── */
.modal-overlay#modal-bulk-import-leaves .modal{
  width:min(1400px,97vw);
  max-width:min(1400px,97vw);
  max-height:92vh;
  overflow:auto;
}
.bulk-import-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.bulk-import-header h2{margin-bottom:4px}
.bulk-import-header .text-muted-xs{margin:0}
.bulk-import-employee-section{background:var(--surface);border:1px solid var(--border-mid, #d0d7e3);border-radius:14px;padding:10px;margin-bottom:10px}
.bulk-import-emp-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bulk-import-emp-search-wrap{display:flex;align-items:center;gap:8px;flex:1;background:var(--neutral-bg, #f3f6fb);border:1px solid var(--border-mid, #d0d7e3);border-radius:10px;padding:9px 12px;transition:border-color 0.15s,box-shadow 0.15s}
.bulk-import-emp-search-wrap:focus-within{border-color:var(--primary, #1f5fa6);box-shadow:0 0 0 3px rgba(31,95,166,0.10)}
.bulk-import-emp-search-wrap input{flex:1;border:none;background:transparent;font-size:14px;color:var(--ink, #102033);outline:none;padding:0}
.bulk-import-emp-search-wrap input::placeholder{color:var(--ink-muted, #7a8599)}
.bulk-import-emp-count{font-size:11px;font-weight:600;color:var(--ink-muted, #66778f);white-space:nowrap}
#bulk-import-emp{width:100%;border:1px solid var(--border-mid, #d0d7e3);border-radius:10px;font-size:14px;background:var(--surface);color:var(--ink, #102033);outline:none;padding:10px 12px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s;appearance:auto;-webkit-appearance:auto}
#bulk-import-emp:focus{border-color:var(--primary, #1f5fa6);box-shadow:0 0 0 3px rgba(31,95,166,0.10)}
#bulk-import-emp option{padding:8px 12px;font-size:14px}
.bulk-import-rows-header{display:flex;justify-content:space-between;align-items:center;margin:14px 0 8px}
.bulk-import-rows-title{font-size:12px;font-weight:700;color:var(--ink-muted, #66778f);text-transform:uppercase;letter-spacing:0.06em}
.bulk-import-add-row{border:1.5px dashed var(--border-mid, #d0d7e3);background:transparent;color:var(--ink-muted, #66778f);padding:6px 16px;border-radius:12px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s}
.bulk-import-add-row:hover{border-color:var(--primary, #1f5fa6);color:var(--primary, #1f5fa6);background:var(--primary-subtle, #f3f8fd)}
#bulk-import-rows{max-height:54vh;overflow-y:auto;margin-bottom:6px;background:var(--neutral-bg, #f3f6fb);border-radius:14px;padding:12px;border:1px solid var(--border-light, #e8edf5)}
#bulk-import-rows:empty{display:none}
.bulk-import-row{display:grid;grid-template-columns:120px 120px 180px 180px 100px minmax(220px,1fr) auto;gap:10px;align-items:center;margin-bottom:10px;background:var(--surface);border-radius:12px;padding:10px 12px;border:1px solid var(--border-light, #e8edf5);transition:border-color 0.15s,box-shadow 0.15s}
.bulk-import-row:last-child{margin-bottom:0}
.bulk-import-row:focus-within{border-color:var(--primary, #1f5fa6);box-shadow:0 0 0 3px rgba(31,95,166,0.08)}
.bulk-import-row select,.bulk-import-row input{font-size:13px;padding:9px 10px;border:1px solid var(--border-light, #e8edf5);border-radius:8px;background:var(--surface);color:var(--ink, #102033);outline:none;transition:border-color 0.12s}
.bulk-import-row select:focus,.bulk-import-row input:focus{border-color:var(--primary, #1f5fa6);box-shadow:0 0 0 3px rgba(31,95,166,0.08)}
.bulk-import-row select.bulk-import-row-type{width:100%;min-width:0;font-size:12px;font-weight:700;color:var(--ink-muted, #66778f);text-transform:uppercase;letter-spacing:0.04em;cursor:pointer;appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366778f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;padding-right:24px}
.bulk-import-row select.bulk-import-row-type:hover{color:var(--ink, #102033)}
.bulk-import-row select.bulk-import-leave-type{width:100%;min-width:0;font-size:12px;cursor:pointer;appearance:none;-webkit-appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366778f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center;padding-right:20px}
.bulk-import-date-group{display:flex;align-items:center;gap:4px;position:relative}
.bulk-import-date-group input[type="date"]{width:100%;min-width:0}
.bulk-import-date-group .bulk-import-day{font-size:10px;font-weight:700;color:var(--primary, #1f5fa6);background:var(--primary-light, #e8f1fb);border-radius:6px;padding:2px 6px;line-height:1.5;text-transform:uppercase;letter-spacing:0.03em}
.bulk-import-row input[type="date"]{width:100%;min-width:0}
.bulk-import-row input[type="number"]{width:100%;min-width:0;text-align:center}
.bulk-import-row input[type="text"]{width:100%;min-width:0}
.bulk-import-row .btn{margin-bottom:0;padding:8px 10px;font-size:12px;white-space:nowrap;line-height:1.3;border-radius:8px;font-weight:600}
#bulk-import-summary{font-size:12px;color:var(--ink-muted, #66778f);padding:6px 4px 2px}
#bulk-import-summary strong{color:var(--ink, #102033);font-weight:600}
@media(max-width:900px){
  .bulk-import-header{flex-direction:column;gap:10px}
  .bulk-import-header .form-group{min-width:0;width:100%}
  .bulk-import-emp-header{flex-direction:column;align-items:stretch}
  .bulk-import-emp-count{text-align:right}
  #bulk-import-rows{max-height:50vh;padding:8px}
  .bulk-import-row{grid-template-columns:1fr 1fr;gap:8px;padding:8px 9px}
  .bulk-import-date-group{grid-column:1 / -1}
  .bulk-import-row input[type="text"]{grid-column:1 / -1}
  .bulk-import-row .btn{grid-column:2}
}
@media(max-width:620px){
  .bulk-import-row{grid-template-columns:1fr}
  .bulk-import-row .btn{grid-column:1}
}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.filter-chips:empty{display:none;margin:0}
#employee-bulk-actions:empty{display:none}
#emp-summary{
  margin:0 0 8px;
  padding:10px 14px;
  line-height:1.45;
}
#emp-summary strong{
  font-size:14px;
  color:#1f3354;
}
.filter-chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;border:1px solid #d9e4f0;background:#f8fbff;
  color:#30445f;font-size:12px;font-weight:600
}
.filter-chip button{
  border:0;background:transparent;color:var(--primary);cursor:pointer;font-weight:700;padding:0;line-height:1
}
.request-notes{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.4;min-width:220px}
.request-notes .muted-text{font-size:11px}
.main-leave-groups{display:flex;flex-direction:column;gap:12px;padding:2px}
.main-leave-emp-group{border:1px solid #cfd8e6;border-radius:14px;background:#eef2f8;overflow:visible; /* Changed from hidden to visible so dropdowns are not clipped */}
.main-leave-emp-summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:800;color:#1f3354;display:flex;justify-content:space-between;align-items:center;border-radius:14px;}
.main-leave-emp-summary::-webkit-details-marker{display:none}
.main-leave-emp-body{padding:12px 14px;border-top:1px solid #dbe3ef;display:flex;flex-direction:column;gap:12px}
.main-leave-card{border:1px solid #d6e0ee;border-left:5px solid #2d8a3f;border-radius:12px;background:#fff;padding:14px}
.main-leave-top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.main-leave-date{font-weight:800;color:#1f3354;font-size:18px}
.main-leave-meta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.main-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf3fb;color:#28466e;font-size:12px;font-weight:700}
.main-leave-notes{margin-top:8px}
.main-leave-actions{margin-top:8px}
.q-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700}
.q-badge .status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.q-badge.badge-pending,.q-badge.badge-pending_supervisor,.q-badge.badge-pending_hr{background:#fff7e8;color:#9a6700}
.q-badge.badge-approved,.q-badge.badge-encashed{background:#e9f8ef;color:#1f7a44}
.q-badge.badge-rejected{background:#ffecef;color:#b42318}
@media(max-width:900px){
  .main-leave-emp-summary{padding:12px}
  .main-leave-card{padding:11px}
  .main-leave-date{font-size:14px}
}
.hidden{display:none}
.empty{text-align:center;padding:2.5rem;color:#aaa}
.workspace-note{
  margin-top:6px;
  font-size:12px;
  color:var(--ink-muted);
  max-width:56ch;
}
.app-shell{
  display:grid;
  gap:12px;
}
.workspace-banner-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;
  row-gap:8px;
  min-width:0;
  flex:1 1 0;
  align-items:center;
}
.workspace-brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
}
.workspace-brand-copy{
  display:grid;
  gap:5px;
}
.workspace-brand-wordmark{
  width:min(166px,100%);
  height:auto;
}
.workspace-banner-copy{
  display:grid;
  gap:4px;
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  max-width:620px;
}
.workspace-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px, 440px);
  align-items:flex-start;
  gap:16px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(220,229,240,.9);
  background:
    linear-gradient(120deg, rgba(31,95,166,.10), rgba(44,122,105,.08) 46%, rgba(185,137,44,.08)),
    linear-gradient(180deg,var(--surface) 0%,#f8fbff 100%);
  box-shadow:var(--shadow-strong);
}
.workspace-banner h2{
  margin:0;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-0.02em;
}
.workspace-banner p{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}
.workspace-banner-meta{
  display:grid;
  gap:8px;
  justify-items:stretch;
  align-self:stretch;
  min-width:0;
  width:min(340px,100%);
}
.workspace-meta-inline{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  color:var(--muted);
  font-size:11px;
}
.workspace-meta-inline #user-email{
  display:none;
}
.workspace-meta-inline .badge-role{
  padding:3px 9px;
  font-size:10px;
  letter-spacing:.05em;
}
.workspace-icon-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.workspace-icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border-radius:14px;
  border:1px solid var(--border-mid);
  background:linear-gradient(180deg,var(--surface),#f6f9fd);
  color:#2d4d7c;
  box-shadow:var(--shadow-xs);
  cursor:pointer;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.workspace-icon-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.workspace-icon-btn:hover{
  
  border-color:#b9cce2;
  box-shadow:0 10px 20px rgba(17,34,68,.08);
}
.workspace-icon-btn.is-danger{
  color:#c0392b;
  border-color:#f0c4c4;
  background:linear-gradient(180deg,var(--surface),#fff5f5);
}
.workspace-icon-btn .badge,
.workspace-icon-btn #notif-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--danger);
  color:var(--surface);
  font-size:10px;
  font-weight:700;
  border:2px solid var(--surface);
}
.workspace-icon-btn #notif-count:empty{
  display:none;
}
.workspace-banner-meta .badge{
  background:linear-gradient(180deg,#eff5fb,#e6eef8);
  color:var(--primary);
  border:1px solid #d7e6f6;
}
.state-panel{
  display:grid;
  gap:8px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:var(--shadow-xs);
}
.state-panel strong{
  font-size:14px;
}
.state-panel p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.state-panel-loading{border-color:#d5e3f5;background:linear-gradient(180deg,#f9fbfe,#eef5fd)}
.state-panel-empty{border-color:#e1e9f4;background:linear-gradient(180deg,var(--surface),#f7faff)}
.state-panel-error{border-color:#f0caca;background:linear-gradient(180deg,#fffafa,#fff1f1)}
.state-panel-success{border-color:#cbe7ce;background:linear-gradient(180deg,#fbfffb,#eef9ef)}
.state-panel-inline{margin-bottom:12px}
.state-panel-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.section-toolbar-panel{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid #dde8f4;
  background:linear-gradient(120deg,var(--surface),#f7fbff);
}
.section-toolbar-panel h4,
.section-toolbar-panel h5{
  margin:0;
  letter-spacing:-0.02em;
}
.section-toolbar-panel h4{
  font-size:15px;
}
.section-toolbar-panel p{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.section-toolbar-panel .report-toolbar-actions{
  align-items:center;
}
.empty-state-card{
  box-shadow:none;
}
.empty-state-card .state-panel-actions{
  margin-top:2px;
}
.dashboard-empty{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  border-radius:14px;
  border:1px dashed #d7e2ef;
  background:linear-gradient(180deg,#fbfdff,#f6f9fd);
  color:var(--muted);
  text-align:center;
}
.saved-view-bar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
}
.saved-view-bar select{
  min-width:220px;
  padding:9px 12px;
  border:1px solid var(--border-mid);
  border-radius:10px;
  background:var(--surface);
}
.saved-view-bar .btn{
  padding:8px 12px;
}
.employee-head{
  margin-bottom:10px;
}
.employee-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.employee-kpi-card{
  padding:18px 20px;
  border-radius:22px;
  border:1px solid #e3eaf4;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:0 16px 30px rgba(17,34,68,.05);
}
.employee-kpi-card span{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6f7d93;
}
.employee-kpi-card strong{
  display:block;
  margin-top:10px;
  font-size:38px;
  line-height:1;
  color:var(--ink);
}
.employee-kpi-card small{
  display:block;
  margin-top:10px;
  font-size:12px;
  color:var(--ink-strong);
}
.employee-kpi-card.is-primary{border-top:4px solid var(--primary)}
.employee-kpi-card.is-warning{border-top:4px solid #d97706}
.employee-kpi-card.is-success{border-top:4px solid var(--success)}
.employee-kpi-card.is-neutral{border-top:4px solid #8a94a6}
.employee-head-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.saved-view-bar.saved-view-compact{
  margin-bottom:0;
}
.saved-view-bar.saved-view-compact select{
  min-width:210px;
}
.section-actions-more .topbar-more-menu{
  min-width:min(520px, calc(100vw - 40px));
}
.alert-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}
.alert-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #dfe7f1;
  background:rgba(255,255,255,.9);
  color:#36506e;
  font-size:12px;
  box-shadow:0 8px 20px rgba(17,34,68,.04);
  cursor:default;
}
button.alert-pill{cursor:pointer}
.alert-pill strong{font-size:12px;color:#1e3550}
.alert-pill .badge{white-space:nowrap}
.alert-pill.is-warning{border-color:#f3d9a3;background:#fffaf0}
.alert-pill.is-danger{border-color:#f0b3b7;background:#fff7f8}
.alert-pill.is-success{border-color:#bfe0c2;background:#f6fff7}
.alert-pill.is-info{border-color:#d7e6f6;background:#f8fbff}
.search-results{
  display:grid;
  gap:10px;
  margin-top:10px;
  max-height:min(58vh,520px);
  overflow:auto;
  padding-right:4px;
}
.search-result{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #dde6f1;
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  box-shadow:0 8px 20px rgba(19,34,56,.04)
}
.search-result strong{display:block;font-size:13px}
.search-result span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.search-result .btn{white-space:nowrap}
.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:var(--card,var(--surface));border-radius:12px;padding:14px 20px;box-shadow:0 10px 40px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;gap:12px;min-width:280px;max-width:360px;pointer-events:auto;border-left:4px solid var(--primary,var(--primary));animation:toastIn .3s ease}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}
.toast.info{border-left-color:#1565c0}
.toast.warning{border-left-color:#8a5b00}
.toast-icon{width:24px;height:24px;flex-shrink:0}
.toast.success .toast-icon{color:var(--success)}
.toast.error .toast-icon{color:var(--danger)}
.toast.info .toast-icon{color:#1565c0}
.toast.warning .toast-icon{color:#8a5b00}
.toast-message{font-size:14px;font-weight:500;color:var(--text,#1e293b)}
.toast-close{margin-left:auto;background:none;border:none;color:var(--muted,#94a3b8);cursor:pointer;padding:4px;opacity:.6;font-size:18px;line-height:1;transition:opacity .2s}
.toast-close:hover{opacity:1}
.toast.hiding{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}
.pagination{display:flex;justify-content:center;gap:5px;margin-top:15px;padding:10px}
.pagination button{padding:5px 10px;border-radius:5px;border:1px solid var(--border-mid);background:var(--surface);cursor:pointer;min-width:32px}
.pagination button.active{background:linear-gradient(180deg,#2a6ec1,var(--primary));color:var(--surface);border-color:var(--primary)}
.table-page-card .pagination{
  margin-top:0;
  padding:14px 16px 16px;
  border-top:1px solid #eef2f7;
}
.detail-page-section{
  gap:14px;
}
.detail-page-top{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.detail-page-back{
  min-height:42px;
  padding-inline:16px;
  border-radius:14px;
}
.detail-page-card{
  margin-top:0;
  border-radius:24px;
  border:1px solid #e4ebf4;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:0 14px 28px rgba(17,34,68,.05);
}
.loading{
  text-align:center;
  padding:20px;
  color:#5b6d84;
  border:1px solid #d9e5f4;
  border-radius:16px;
  background:linear-gradient(180deg,#f9fbfe,#eef5fd);
}
/* Auth styles moved to auth-shared.css */
.chart-container{height:300px;margin-bottom:20px}
.report-table{width:100%;font-size:12px}
.report-table td,.report-table th{padding:6px 8px}
.scheduled-reports-empty{
  padding:14px;
  border:1px dashed var(--line);
  border-radius:12px;
  color:var(--muted);
  background:#fbfcfe;
}
.scheduled-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.badge.badge-muted{
  background:#eef2f7;
  color:#5f6f85;
}
img,iframe,canvas,svg,video{max-width:100%}
.logo-preview{display:flex;align-items:center;justify-content:center;min-height:84px;border:1px dashed var(--border-mid);border-radius:8px;background:#fafbfd;padding:8px;overflow:hidden}
.logo-preview img{max-width:100%;max-height:68px;object-fit:contain}
.paper-preview{
  position:relative;min-height:220px;background:var(--surface);border:1px solid #d7e2ef;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
  padding:16px;overflow:hidden
}
.paper-preview::before{
  content:"";position:absolute;inset:10px;border:1px dashed #e0e8f2;border-radius:10px;pointer-events:none
}
.paper-header{display:flex;align-items:center;justify-content:flex-start;min-height:72px;position:relative;z-index:1}
.paper-logo-box{border:1px solid var(--border-mid);background:#fafbfd;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.paper-logo-box img{width:100%;height:100%;object-fit:contain}
.paper-lines{margin-top:10px;display:grid;gap:6px}
.paper-line{height:8px;border-radius:999px;background:#edf3fa}
.paper-line.short{width:55%}
.paper-line.medium{width:72%}
.paper-line.small{width:38%}
.badge-role{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#e8f1fc;color:var(--primary);font-size:11px;font-weight:700}
.empty{background:var(--surface);border:1px dashed #dbe4ef;border-radius:12px}
.empty.empty-compact{padding:12px}
.detail-profile-main{min-width:0}

/* Feature Components */
.calendar-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;
  margin-bottom:16px;padding:12px 14px;background:linear-gradient(180deg,var(--surface),#f7fbff);
  border:1px solid #e2ebf7;border-radius:16px;box-shadow:var(--shadow-xs)
}
.calendar-toolbar h3{flex:1;text-align:center;font-size:18px;font-weight:700;color:#1f3354}
.calendar-toolbar input[type="date"], 
input[type="date"] {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-ui);
  color: var(--text);
  font-size: 13px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
input[type="date"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31,95,166,0.12);
  outline: none;
}
.calendar-weekday{font-size:11px;font-weight:700;text-transform:uppercase;color:#6f7d93;letter-spacing:.04em}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  padding:10px;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfdff,#f7fbff);
  border:1px solid #e4ebf5
}
.calendar-cell{
  min-height:92px;border:1px solid #e4ebf3;border-radius:16px;padding:10px;background:linear-gradient(180deg,var(--surface),#fbfdff);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;cursor:pointer
}
.calendar-cell:hover{box-shadow:0 10px 18px rgba(17,34,68,.07);border-color:#bfd1e6}
.calendar-cell.is-today{background:linear-gradient(180deg,#f3f8ff,#eaf3ff);border-color:#b7d0ef}
.calendar-cell.is-selected{background:linear-gradient(180deg,#f4fbf4,#e8f5e9);border-color:#a5d6a7}
.calendar-cell.is-weekend{background:linear-gradient(180deg,#fcfdff,#f7f9fc)}
.calendar-cell.has-expiry{border-color:#e4c98e;box-shadow:inset 0 0 0 1px rgba(185,137,44,.08)}
.calendar-day{
  font-weight:800;
  font-size:14px;
  color:#20314d;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--surface-tint)
}
.calendar-cell.is-today .calendar-day{background:var(--primary);color:var(--surface)}
.calendar-cell.is-selected .calendar-day{background:#2c7a69;color:var(--surface)}
.calendar-signals{display:grid;gap:4px;margin-top:6px}
.calendar-count{margin-top:6px;font-size:11px;color:var(--primary);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.calendar-count.is-empty{color:#9aa7ba;font-weight:600}
.calendar-signals .calendar-count{margin-top:0}
.calendar-count.is-expiry{color:#b26b00}
.calendar-count.is-company-expiry{color:#8a6420}
.calendar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-right:4px}
.calendar-dot.is-expiry{background:#d97706}
.calendar-dot.is-company-expiry{background:#b9892c}
.calendar-section{display:grid;gap:8px;margin-top:12px}
.calendar-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6f7d93}
.leave-list{display:grid;gap:8px;margin-top:10px}
.leave-item{
  padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,var(--surface),#f8fbff);border:1px solid #e3eaf4;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap
}
.leave-item.is-top{align-items:flex-start}
.leave-item strong{color:#1b2c4d}
.leave-item .leave-item-main{flex:1;min-width:0}
.leave-item .leave-item-note{margin-top:2px}
.leave-item .leave-item-preview{margin-top:10px}
.leave-item .leave-item-meta{display:flex;gap:6px;flex-wrap:wrap}
.doc-preview-frame{width:100%;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--border-light);background:var(--surface)}
.request-employee-cell{cursor:pointer;transition:transform .15s ease}
.request-employee-cell:hover{transform:translateY(-1px)}
.import-preview-status.is-danger{color:var(--danger)}
.import-preview-status.is-warning{color:#b7791f}
.employee-sync-panel{margin-bottom:12px}
.employee-sync-counter{font-size:12px;color:#6f7d93}
.employee-sync-progress{height:8px;background:#eaf0f8;border-radius:999px;overflow:hidden;margin-top:8px}
.employee-sync-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),#2a86ff);border-radius:999px;transition:width .2s ease}
.employee-sync-report{margin-top:10px;font-size:12px;line-height:1.5}
.employee-files-card{padding:12px;margin-bottom:12px}
.employee-files-title{margin-bottom:10px}
.employee-files-list{margin-top:8px}
.employee-files-heading{margin-top:10px}
.employee-files-heading.is-lg{margin-top:16px}
.modal-section-title{
  font-size:12px;
  font-weight:800;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:2px 0 10px;
}
.field-hint{
  font-size:12px;
  color:var(--ink-muted);
  margin-top:4px;
}
.toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.toggle-chip{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #dce5f0;border-radius:12px;background:linear-gradient(180deg,#fdfefe,#f5f9ff)
}
.toggle-chip input{width:16px;height:16px}
.toggle-chip span{font-size:13px;font-weight:600;color:#30445f}
.company-report-order-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.company-report-order-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid #dce5f0;
  border-radius:14px;
  background:linear-gradient(180deg,#fbfdff,#f5f9ff);
}
.company-report-order-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.company-report-order-index{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:10px;
  background:#eaf2fb;
  color:var(--primary);
  font-weight:700;
  font-size:12px;
  flex:none;
}
.company-report-order-text{
  display:grid;
  gap:2px;
  min-width:0;
}
.company-report-order-text strong{
  font-size:13px;
  color:var(--ink);
}
.company-report-order-text span,
.company-report-order-summary,
.company-report-order-empty{
  font-size:12px;
  color:var(--muted);
}
.company-report-order-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.company-report-order-row .btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.dashboard-settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px
}
.dashboard-settings-field{
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid #dce5f0;
  border-radius:14px;
  background:linear-gradient(180deg,#fdfefe,#f5f9ff)
}
.dashboard-settings-field label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#6f7d93
}
.dashboard-settings-field input[type="text"],
.dashboard-settings-field textarea,
.dashboard-settings-field select{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--border-mid);
  border-radius:10px;
  background:var(--surface);
  color:#243043
}
.dashboard-settings-field textarea{min-height:88px;resize:vertical}
.dashboard-settings-field .field-hint{margin-top:0}
.dashboard-settings-preview{
  font-size:12px;
  color:#6f7d93;
  line-height:1.45
}
.dashboard-preset-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px
}
.dashboard-preset-note{
  font-size:12px;
  color:var(--muted)
}
.dashboard-order-list{
  display:grid;
  gap:10px
}
.dashboard-order-item{
  padding:12px;
  border:1px solid #e1e8f2;
  border-radius:14px;
  background:#fbfdff;
  display:grid;
  gap:10px
}
.dashboard-order-item.is-dragging{
  opacity:.55;
  border-style:dashed;
  box-shadow:0 10px 24px rgba(17,34,68,.08)
}
.dashboard-order-item-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center
}
.dashboard-order-item-meta{
  min-width:0;
  display:grid;
  gap:2px
}
.dashboard-order-item-meta strong{
  font-size:13px;
  color:#243043
}
.dashboard-order-item-meta span{
  font-size:12px;
  color:var(--ink-muted)
}
.dashboard-order-item-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}
.dashboard-drag-handle{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #d6dfeb;
  background:var(--surface);
  cursor:grab;
  font-weight:900;
  color:#51637d;
  line-height:1
}
.dashboard-drag-handle:active{cursor:grabbing}
.dashboard-order-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px
}
.dashboard-scope-group{
  display:grid;
  gap:8px
}
.dashboard-scope-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.scope-chip{
  border:1px solid #d5deea;
  background:var(--surface);
  color:#4a5b73;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer
}
.scope-chip.is-active{
  background:#e5f0fb;
  border-color:#b8d0ee;
  color:var(--primary)
}
.scope-chip--all{
  background:#f4f8fd
}
.scope-chip--all.is-active{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--surface)
}
.row-actions{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center
}
.row-actions-menu{
  position:relative;
  z-index:40;
  display:inline-flex;
  align-items:flex-start;
}
.row-actions-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px
}
.row-actions-menu.is-open .row-actions-trigger{background:var(--surface-tint);border-color:#c8d9ee;color:var(--primary)}
.row-actions-trigger{
  min-width:38px;
  padding-left:10px;
  padding-right:10px;
}
.row-actions-trigger-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
}
.row-actions-caret{font-size:10px;line-height:1;opacity:.75}
.row-actions-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  display:none;
  gap:6px;
  padding:10px;
  border:1px solid var(--border-light);
  border-radius:14px;
  background:var(--surface);
  box-shadow: 0 15px 45px rgba(0,0,0,0.18);
  min-width:200px;
  max-width:280px;
  max-height:350px;
  overflow:auto;
  z-index:99999;
  pointer-events: auto;
}
.row-actions-menu.is-open .row-actions-menu-panel{display:grid}
.row-actions-menu-panel .btn{width:100%;justify-content:flex-start; border:none; background:transparent; font-weight: 600; padding: 10px 14px;}
.row-actions-menu-panel .btn:hover{background:var(--bg-1); color:var(--primary);}

/* Keep action menu layer above table cells */
.data-table tr.row-actions-row-open{
  position:relative;
  z-index:120;
}
.data-table td[data-label="Actions"]{
  position:relative;
  overflow:visible !important;
}

.row-actions-menu-panel .btn{
  min-height: 0;
  padding: 11px 12px;
  border-radius: 10px;
  box-shadow: none;
}
.dashboard-hero{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);gap:16px;align-items:stretch;
  padding:20px;border-radius:24px;background:
    radial-gradient(circle at top right, rgba(31,95,166,.10), transparent 30%),
    radial-gradient(circle at bottom left, rgba(42,161,154,.10), transparent 28%),
    linear-gradient(180deg,var(--surface) 0%,#f6faff 100%);
  color:var(--ink);box-shadow:0 24px 60px rgba(17,34,68,.08);position:relative;overflow:hidden;
  border:1px solid #e3eaf4
}
.dashboard-hero.is-compact{padding:14px}
.dashboard-hero::after{
  content:"";position:absolute;inset:0 auto auto 0;height:4px;width:100%;
  background:linear-gradient(90deg,var(--primary) 0%,#2aa19a 58%,#c89f44 100%);
  box-shadow:0 8px 24px rgba(31,95,166,.12)
}
.dashboard-hero h4{font-size:26px;line-height:1.05;margin:8px 0 10px;letter-spacing:-0.03em}
.dashboard-hero.is-compact h4{font-size:22px}
.dashboard-hero p{color:#5f6f84;max-width:58ch}
.dashboard-hero .badge-role{
  background:#e9f2ff;
  color:var(--primary);
  border:1px solid #c9dff6
}
.dashboard-hero-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px
}
.dashboard-hero-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #d9e4f0;
  background:var(--surface);
  color:#51637d;
  font-size:12px;
  font-weight:700
}
.dashboard-hero-chip.is-emerald{
  border-color:#caece6;
  background:#eefbf8;
  color:#24766f
}
.dashboard-hero-chip.is-gold{
  border-color:#f1e0b9;
  background:#fff8e8;
  color:#9b711b
}
.dashboard-hero-chip .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2aa19a;
  box-shadow:0 0 0 4px rgba(42,161,154,.10)
}
.dashboard-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.dashboard-kpi{
  padding:13px;border-radius:18px;background:linear-gradient(180deg,var(--surface),#f8fbff);border:1px solid #e4ebf4;
  box-shadow:0 10px 24px rgba(17,34,68,.05);
  position:relative;overflow:hidden
}
.dashboard-kpi::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),#2aa19a,#c89f44)
}
.dashboard-hero.is-compact .dashboard-kpi{padding:10px}
.dashboard-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted)}
.dashboard-kpi-value{font-size:28px;font-weight:800;line-height:1.05;margin-top:6px;color:var(--ink)}
.dashboard-hero.is-compact .dashboard-kpi-value{font-size:24px}
.dashboard-kpi-note{font-size:12px;color:var(--ink-strong);margin-top:6px}
.dashboard-side{
  display:grid;gap:10px;align-content:start;padding:16px;border-radius:20px;background:#f8fbff;
  border:1px solid #e3eaf4;backdrop-filter:blur(10px)
}
.dashboard-side-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted)}
.dashboard-side-item{
  padding:12px 13px;border-radius:16px;background:var(--surface);border:1px solid #e4ebf4;
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start;box-shadow:0 8px 20px rgba(17,34,68,.04)
}
.dashboard-side-item strong{display:block;font-size:13px;margin-bottom:3px;color:var(--ink)}
.dashboard-side-item span{font-size:12px;color:var(--ink-strong)}
.dashboard-signal-badge{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--primary);
  background:#eaf2fc;
  border:1px solid #d7e6f6;
  flex:none
}
.dashboard-signal-badge.is-emerald{color:#2a7f77;background:#e9f8f5;border-color:#caece6}
.dashboard-signal-badge.is-gold{color:#996f19;background:#fff8e7;border-color:#f1e0b9}
.icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid #d9e4f0;
  background:var(--surface-tint);
  color:var(--primary);
  flex:none
}
.icon-badge svg{
  width:16px;
  height:16px;
  fill:currentColor;
  display:block
}
.icon-badge-expiry{background:#fff8e8;border-color:#f1e0b9;color:#9b711b}
.icon-badge-request{background:#eefbf8;border-color:#caece6;color:#24766f}
.icon-badge-leave{background:var(--surface-tint);border-color:#d7e6f6;color:var(--primary)}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0
}
.dashboard-focus-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px
}
.dashboard-focus-card{
  padding:12px 13px;
  border-radius:16px;
  background:#f9fcff;
  border:1px solid #e4ebf4;
  /* backdrop-filter:blur(10px); */ background: var(--surface);
  box-shadow:0 8px 20px rgba(17,34,68,.04)
}
.dashboard-focus-card strong{display:block;font-size:13px;margin-bottom:4px;color:var(--ink)}
.dashboard-focus-card span{font-size:12px;color:var(--ink-strong)}
.dashboard-mini-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}
.dashboard-mini-stats .badge{
  background:var(--surface-tint);
  border:1px solid #d7e6f6;
  color:var(--primary)
}
.dashboard-chart-card{
  margin-top:16px;padding:18px;border-radius:22px;background:
    linear-gradient(180deg,var(--surface),#f7fbff);
  border:1px solid var(--border-light);box-shadow:0 16px 40px rgba(17,34,68,.06)
}
.dashboard-chart-card.is-compact{padding:14px}
.dashboard-trend-card{
  margin-top:14px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  border:1px solid var(--border-light);
  box-shadow:0 16px 40px rgba(17,34,68,.06)
}
.dashboard-trend-card.is-compact{padding:14px}
.dashboard-chart-head{
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px
}
.dashboard-chart-head > div{min-width:220px}
.dashboard-chart-head h4{margin:0;font-size:17px;letter-spacing:-0.02em;color:var(--ink)}
.dashboard-chart-head p{font-size:12px;color:var(--muted);max-width:60ch}
.dashboard-chart-wrap{height:320px;margin-top:10px}
.dashboard-trend-wrap{height:190px;margin-top:10px}
.dashboard-empty{padding:14px;border-radius:14px;background:#fbfdff;border:1px dashed #dbe4ef;color:var(--muted)}
.dashboard-command{
  display:grid;
  gap:16px;
}
.dashboard-command-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.dashboard-command-head h4{
  font-size:28px;
  line-height:1.04;
  margin:8px 0 10px;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.dashboard-command-head p{
  color:#5f6f84;
  max-width:62ch;
}
.dashboard-command-head .badge-role{
  background:#e9f2ff;
  color:var(--primary);
  border:1px solid #c9dff6;
}
.dashboard-top-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.dashboard-top-card{
  padding:16px 18px;
  border-radius:20px;
  border:1px solid #e3eaf4;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:0 14px 30px rgba(17,34,68,.05);
}
.dashboard-top-card span{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6f7d93;
}
.dashboard-top-card strong{
  display:block;
  margin-top:8px;
  font-size:34px;
  line-height:1;
  color:var(--ink);
}
.dashboard-top-card small{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:var(--ink-strong);
}
.dashboard-top-card.is-primary{border-top:4px solid var(--primary)}
.dashboard-top-card.is-warning{border-top:4px solid #2aa19a}
.dashboard-top-card.is-alert{border-top:4px solid #c89f44}
.dashboard-top-card.is-neutral{border-top:4px solid #6f7d93}
.dashboard-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr);
  gap:16px;
}
.dashboard-panel{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  border:1px solid var(--border-light);
  box-shadow:0 16px 40px rgba(17,34,68,.06);
}
.dashboard-panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.dashboard-panel-head h5{
  margin:0;
  font-size:20px;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.dashboard-panel-head p{
  margin-top:4px;
  font-size:12px;
  color:#6f7d93;
  max-width:58ch;
}
.dashboard-panel-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface-tint);
  border:1px solid #d7e6f6;
  color:var(--primary);
  font-size:12px;
  font-weight:700;
}
.dashboard-alert-list{
  display:grid;
  gap:10px;
}
.dashboard-alert-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:18px;
  border:1px solid #e4ebf5;
  background:var(--surface);
}
.dashboard-alert-item.is-danger{border-color:#f0d0d0;background:linear-gradient(180deg,var(--surface),#fff7f7)}
.dashboard-alert-item.is-warning{border-color:#eadbb8;background:linear-gradient(180deg,var(--surface),#fffaf0)}
.dashboard-alert-item.is-info{border-color:#d7e6f6;background:linear-gradient(180deg,var(--surface),#f8fbff)}
.dashboard-alert-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.dashboard-alert-copy strong{
  font-size:14px;
  color:var(--ink);
}
.dashboard-alert-copy span{
  font-size:12px;
  color:#3e5673;
  font-weight:700;
}
.dashboard-alert-copy small{
  font-size:12px;
  color:#6f7d93;
}
.dashboard-action-grid{
  display:grid;
  gap:10px;
}
.dashboard-action-card{
  width:100%;
  text-align:left;
  padding:14px 15px;
  border-radius:18px;
  border:1px solid #e2eaf4;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-action-card:hover{
  
  border-color:#c7d8ee;
  box-shadow:0 12px 24px rgba(17,34,68,.08);
}
.dashboard-action-card strong{
  display:block;
  font-size:14px;
  color:var(--ink);
}
.dashboard-action-card span{
  display:block;
  margin-top:5px;
  font-size:12px;
  color:var(--ink-strong);
  line-height:1.5;
}
.dashboard-expiry-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.dashboard-expiry-column{
  display:grid;
  gap:10px;
}
.dashboard-expiry-title{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6f7d93;
}
.dashboard-expiry-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #e4ebf5;
  background:var(--surface);
}
.dashboard-expiry-item strong{
  display:block;
  font-size:13px;
  color:var(--ink);
}
.dashboard-expiry-item span,
.dashboard-expiry-item small{
  display:block;
  font-size:12px;
  color:var(--ink-strong);
}
.dashboard-expiry-item small{
  white-space:nowrap;
}
.dashboard-trend-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.dashboard-reference-shell{
  display:grid;
  gap:18px;
}
.dashboard-reference-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,1fr) 290px;
  gap:16px;
  align-items:start;
}
.dashboard-reference-card{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--border-light);
  background:var(--surface);
  box-shadow:0 10px 28px rgba(17,34,68,.05);
}
.dashboard-reference-card-chart{
  min-height:330px;
}
.dashboard-reference-card-list{
  min-height:330px;
}
.dashboard-reference-rail{
  display:grid;
  gap:16px;
}
.dashboard-reference-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.dashboard-reference-head h4{
  margin:0;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--ink);
}
.dashboard-link-btn{
  border:0;
  background:transparent;
  color:#4f7fc8;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.dashboard-company-chart-layout{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:18px;
  align-items:center;
}
.dashboard-company-chart-wrap{
  height:190px;
}
.dashboard-company-legend{
  display:grid;
  gap:12px;
}
.dashboard-company-legend-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:flex-start;
}
.dashboard-company-legend-item strong{
  display:block;
  font-size:12px;
  color:#1d3353;
}
.dashboard-company-legend-item span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:#6b7b92;
}
.dashboard-company-swatch{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:4px;
}
.dashboard-company-swatch.is-1{background:#5b8def}
.dashboard-company-swatch.is-2{background:#8b6de9}
.dashboard-company-swatch.is-3{background:#7acb93}
.dashboard-company-swatch.is-4{background:#f2bf59}
.dashboard-reference-line-wrap{
  height:230px;
}
.dashboard-request-list{
  display:grid;
  gap:12px;
}
.dashboard-request-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid #edf2f7;
}
.dashboard-request-item:last-child{
  border-bottom:0;
}
.dashboard-request-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.dashboard-request-main .dashboard-request-avatar{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary) 0%, #3a7bd5 100%);
  color:var(--surface) !important;
  font-size:11px;
  font-weight:800;
  line-height:1;
  padding:0;
  box-shadow:var(--shadow-xs);
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.dashboard-request-main strong{
  display:block;
  font-size:13px;
  color:var(--ink);
}
.dashboard-request-main span{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:#6b7b92;
}
.dashboard-department-list{
  display:grid;
  gap:12px;
}
.dashboard-department-item{
  display:grid;
  gap:8px;
}
.dashboard-department-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}
.dashboard-department-meta strong{
  color:#1d3353;
}
.dashboard-department-meta span{
  color:#6b7b92;
}
.dashboard-department-bar{
  height:8px;
  border-radius:999px;
  background:#edf2f8;
  overflow:hidden;
}
.dashboard-department-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#2b6bc0;
}
.dashboard-quick-list{
  display:grid;
  gap:10px;
}
.dashboard-quick-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #e8eef6;
  background:var(--surface);
  cursor:pointer;
  color:#1d3353;
}
.dashboard-quick-item strong{
  color:#8aa0bf;
}
.dashboard-reference-alerts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.dashboard-reference-alert{
  display:grid;
  gap:8px;
  min-height:94px;
  padding:18px;
  border-radius:20px;
  border:1px solid var(--border-light);
  background:var(--surface);
  cursor:pointer;
  text-align:left;
}
.dashboard-reference-alert strong{
  font-size:15px;
  color:#1d3353;
}
.dashboard-reference-alert span{
  font-size:13px;
  color:#6b7b92;
}
.dashboard-reference-alert.is-warning{background:#fffaf0;border-color:#f0dfb8}
.dashboard-reference-alert.is-danger{background:#fff5f5;border-color:#f1d2d2}
.dashboard-reference-alert.is-success{background:#f4fbf5;border-color:#cfe6d2}
.dashboard-reference-alert.is-info{background:#f5f9ff;border-color:#d6e3f5}
.dashboard-insight-bar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px
}
.dashboard-insight{
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,#fafdff,#f4f8fd);
  border:1px solid #e3eaf4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)
}
.dashboard-insight strong{display:block;font-size:14px;color:#1f3354}
.dashboard-insight span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.admin-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.admin-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow);
}
.admin-card h4{margin:0 0 6px;font-size:15px}
.admin-card p{color:var(--muted);font-size:12px}
.admin-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.admin-card-actions .btn{width:auto}
.admin-stat-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.admin-stat{
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,#f8fbff,var(--surface-tint));
  border:1px solid #e3eaf4;
}
.admin-stat strong{display:block;font-size:14px;color:#1f3354}
.admin-stat span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.portal-supervisor-shell{
  display:grid;
  gap:14px;
}
.portal-supervisor-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.portal-supervisor-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.portal-supervisor-panel{
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow);
}
.portal-supervisor-panel-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.portal-supervisor-status-grid{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.portal-supervisor-switch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dce6f2;
  background:#fff;
  font-weight:600;
  color:var(--text);
}
.portal-supervisor-switch input{accent-color:var(--primary)}
.portal-supervisor-scope-row{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-top:10px;
}
.portal-supervisor-team-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:10px 12px;
  padding:12px;
  border-radius:16px;
  border:1px solid #dce6f2;
  background:#fff;
  max-height:320px;
  overflow:auto;
}
.portal-supervisor-team-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.portal-supervisor-team-divider{
  height:1px;
  background:var(--border-light);
  margin:4px 0;
  grid-column:1 / -1;
}
.portal-supervisor-permission-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #dce6f2;
  background:#f7fbff;
}
.portal-supervisor-toolbar-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.portal-supervisor-permission-toolbar select{
  min-width:190px;
}
.portal-supervisor-permission-list{
  display:grid;
  gap:12px;
  margin-top:12px;
}
.portal-supervisor-permission-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.portal-supervisor-summary-chip{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #dbe5f1;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  box-shadow:var(--shadow-xs);
}
.portal-supervisor-summary-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.portal-supervisor-summary-chip strong{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  line-height:1.1;
}
.portal-supervisor-summary-sub{
  font-size:12px;
  color:var(--muted-strong);
  line-height:1.3;
}
.portal-supervisor-permission-group{
  padding:14px;
  border-radius:18px;
  border:1px solid var(--border-light);
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:var(--shadow);
}
.portal-supervisor-permission-group-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.portal-supervisor-permission-group-head .badge{
  white-space:nowrap;
}
.portal-supervisor-permission-group strong{
  font-size:14px;
  color:var(--text);
}
.portal-supervisor-permission-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:10px 12px;
}
.portal-supervisor-permission-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #dbe5f1;
  background:#fff;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  line-height:1.35;
}
.portal-supervisor-permission-item input{
  margin-top:1px;
  accent-color:var(--primary);
}
.portal-supervisor-permission-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.portal-supervisor-permission-name{
  font-size:12px;
  color:var(--text);
}
.report-metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.report-metric-card{
  padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--surface),#f8fbff);
  border:1px solid #e4eaf3;box-shadow:var(--shadow)
}
@keyframes dashboardFloatIn{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.dashboard-hero,.dashboard-chart-card,.dashboard-trend-card,.dashboard-side-item,.dashboard-focus-card,.dashboard-insight{
  animation:dashboardFloatIn .55s ease both
}
.report-metric-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.report-metric-value{font-size:26px;font-weight:800;letter-spacing:-0.03em;margin-top:6px;color:var(--text)}
.report-metric-note{font-size:12px;color:var(--muted);margin-top:6px}
.company-import-grid{display:grid;gap:12px}
.company-import-grid .card{margin:0}
.report-hero{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.85fr);gap:14px;align-items:stretch;
  padding:18px;border-radius:24px;background:
    radial-gradient(circle at top right, rgba(31,95,166,.10), transparent 30%),
    radial-gradient(circle at bottom left, rgba(44,122,105,.10), transparent 26%),
    radial-gradient(circle at top left, rgba(185,137,44,.06), transparent 20%),
    linear-gradient(180deg,var(--surface) 0%,#f8fbff 100%);
  border:1px solid #dbe6f3;box-shadow:var(--shadow-strong);margin-bottom:16px
}
.report-hero h4{font-size:24px;letter-spacing:-0.03em;margin:8px 0 10px}
.report-hero p{color:#52627b}
.report-hero .badge-role{
  background:#e9f2ff;
  color:var(--primary);
  border:1px solid #c9dff6
}
.report-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.report-pill{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid #dbe4ef;
  background:var(--surface);color:#30445f;font-size:12px;font-weight:600
}
.report-hero-aside{
  display:grid;gap:10px;align-content:start;padding:14px;border-radius:20px;background:linear-gradient(180deg,#f8fbff,var(--surface-tint));border:1px solid var(--border-light)
}
.report-hero-stat{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:16px;background:var(--surface);border:1px solid #e3eaf4;box-shadow:0 8px 20px rgba(17,34,68,.04)
}
.report-hero-stat strong{display:block;font-size:13px;color:var(--ink)}
.report-hero-stat span{display:block;font-size:12px;color:var(--muted)}
.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.report-grid.full-width{grid-template-columns:1fr}
.report-card{
  padding:14px;border-radius:18px;background:linear-gradient(180deg,var(--surface),#f8fbff);border:1px solid var(--border-light);box-shadow:0 14px 34px rgba(17,34,68,.05)
}
.report-card.full{grid-column:1 / -1}
.report-card h4{margin:0 0 10px;font-size:15px}
.company-report-stack{display:flex;flex-direction:column;gap:14px}
.company-report-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(100%, 1120px);
  margin:0 auto;
}
.company-report-overview{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.72fr);
  gap:14px;
  align-items:stretch;
}
.company-report-overview-card{
  position:relative;
  overflow:hidden;
  padding:16px;
  border-radius:24px;
  border:1px solid #dbe5f1;
  background:
    radial-gradient(circle at top right, rgba(31,95,166,.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(44,122,105,.10), transparent 28%),
    linear-gradient(135deg,var(--surface) 0%,#f5f9ff 100%);
  box-shadow:0 20px 48px rgba(17,34,68,.06);
}
.company-report-overview-card::after{
  content:"";
  position:absolute;
  top:18px;
  right:18px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events:none;
}
.company-report-overview-eyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(200,216,236,.9);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#1b4f90;
}
.company-report-overview-card h4{margin:14px 0 10px;font-size:28px;line-height:1.08;letter-spacing:-0.04em;color:#15304f;max-width:620px}
.company-report-overview-card p{margin:0;max-width:660px;color:#52627b;font-size:14px;line-height:1.65}
.company-report-highlights{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.company-report-highlight{
  display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;border:1px solid #dce6f2;background:rgba(255,255,255,.86);
  font-size:12px;font-weight:700;color:#42556f
}
.company-report-kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start;
}
.company-report-kpi{
  padding:12px 12px;
  border-radius:18px;
  border:1px solid #e2eaf4;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:0 12px 28px rgba(17,34,68,.04)
}
.company-report-kpi strong{display:block;font-size:28px;line-height:1.02;color:#14304f}
.company-report-kpi span{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--ink-strong);text-transform:uppercase;letter-spacing:.06em}
.company-report-kpi small{display:block;margin-top:6px;font-size:12px;color:#6c7e97;line-height:1.45}
.company-report-company{
  position:relative;
  padding:14px;
  border:1px solid #e2eaf4;
  border-radius:22px;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:0 12px 28px rgba(17,34,68,.04);
}
.company-report-company::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:22px 0 0 22px;
  background:linear-gradient(180deg,#2b6bc0,#2c7a69);
}
.company-report-company-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid #edf2f7;
}
.company-report-company-title{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.company-report-company-index{
  width:38px;
  height:38px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#ecf4ff,#dcecff);
  border:1px solid #c8d9ee;
  color:var(--primary);
  font-size:13px;
  font-weight:800;
  flex:none;
}
.company-report-company-head h4{
  margin:0;
  font-size:20px;
  line-height:1.15;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.company-report-company-head p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.company-report-company-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.company-report-company-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.company-report-summary-item{
  padding:9px 10px;
  border-radius:16px;
  border:1px solid #e7edf5;
  background:#f9fbfe;
}
.company-report-summary-item label{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#72829a;
}
.company-report-summary-item strong{
  display:block;
  margin-top:5px;
  font-size:16px;
  color:var(--ink);
  line-height:1.35;
  word-break:break-word;
}
.company-report-meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  margin-bottom:12px;
}
.company-report-meta-card{
  padding:9px 10px;
  border-radius:16px;
  border:1px solid #edf2f7;
  background:var(--surface);
}
.company-report-meta-card label{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#72829a;
}
.company-report-meta-card strong{
  display:block;
  margin-top:5px;
  font-size:14px;
  color:var(--ink);
  line-height:1.5;
  word-break:break-word;
}
.company-report-meta-note{
  margin-top:10px;
  font-size:12px;
  color:var(--ink-strong);
}
.company-report-docs-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.company-report-docs-head h5{
  margin:0;
  font-size:14px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.company-report-docs-head p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--ink-strong);
}
.company-report-docs-badge{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:var(--surface-tint);
  border:1px solid #dbe6f3;
  font-size:12px;
  font-weight:700;
  color:#30445f;
}
.company-report-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.company-report-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  padding:9px 10px;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfdff,#f5f9fd);
  border:1px solid #e6edf6;
}
.company-report-line.is-empty{
  background:var(--surface);
}
.company-report-line-main{min-width:0}
.company-report-line-status{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:170px;
  text-align:right;
}
.company-report-line-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.company-report-line-title{
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  line-height:1.35;
  word-break:break-word;
}
.company-report-line-sub{
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
  line-height:1.55;
}
.company-report-line-dates{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.company-report-line-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid #e1eaf4;
  font-size:11px;
  font-weight:700;
  color:#58708d;
}
.company-report-line-date{
  font-size:13px;
  font-weight:700;
  color:#27405f;
}
.company-report-line-note{
  font-size:11px;
  color:#72829a;
}

/* Responsive Rules */
@media (max-width: 1100px){
  .company-report-overview{grid-template-columns:1fr}
  .company-report-company-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .company-report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .company-report-meta-grid{grid-template-columns:1fr}
  .company-report-line{grid-template-columns:1fr}
  .company-report-line-status{align-items:flex-start;text-align:left;min-width:0}
  .company-report-docs-head{flex-direction:column;align-items:flex-start}
}
@media (max-width: 640px){
  .company-report-overview-card{padding:18px}
  .company-report-overview-card h4{font-size:24px}
  .company-report-kpis{grid-template-columns:1fr}
  .company-report-company-summary{grid-template-columns:1fr}
  .company-report-company-title{flex-direction:column}
  .company-report-company-head{flex-direction:column}
  .company-report-sortbar-controls{width:100%}
  .company-report-sortbar-controls select{flex:1;min-width:0}
  .dashboard-top-strip{grid-template-columns:1fr}
  .dashboard-main-grid{grid-template-columns:1fr}
  .dashboard-trend-layout{grid-template-columns:1fr}
  .admin-grid{grid-template-columns:1fr}
  .admin-card-actions{flex-direction:column;align-items:stretch}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar > *{width:100%}
  .toolbar select,.toolbar input{min-width:0;width:100%}
  .report-table-wrap{max-height:none}
  .report-table{min-width:640px}
}
.report-table-wrap{overflow:auto;max-height:min(72vh,720px);border-radius:14px;border:1px solid #e8edf5}
.report-table{width:100%;font-size:12px;border-collapse:separate;border-spacing:0;min-width:720px}
.report-table th{background:#f7faff;color:var(--ink-strong);font-size:11px;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;z-index:2}
.report-table th,.report-table td{padding:8px 10px;border-bottom:1px solid #eef2f7;text-align:left}
.report-table tbody tr:last-child td{border-bottom:0}
.report-table td{word-break:break-word}
.report-serial-header,.report-serial-cell{
  width:42px;
  min-width:42px;
  max-width:42px;
  text-align:center !important;
  font-weight:700;
}
.report-sort-header{padding:0 !important}
.report-sort-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.report-sort-btn:hover{background:#eef5ff;color:var(--primary)}
.report-sort-header.is-active .report-sort-btn{color:var(--primary);font-weight:700}
.report-sort-header.is-active .report-sort-btn span{display:inline-flex;align-items:center;gap:6px}
.report-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:14px
}
.detail-section-card{
  display:grid;
  gap:12px;
  padding:20px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow)
}
.report-chart-card.full{grid-column:1 / -1}
.report-chart-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap
}
.report-chart-head h4{margin:0;font-size:15px}
.report-chart-head p{margin-top:4px;color:var(--muted);font-size:12px}
.report-chart-wrap{height:280px}
.report-chart-wrap.tall{height:320px}
.report-recommendations{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px
}
.report-recommendation{
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  border:1px solid #dde6f1;
  box-shadow:0 8px 20px rgba(19,34,56,.04)
}
.report-recommendation strong{
  display:block;
  margin-bottom:4px;
  color:var(--text)
}
.report-recommendation span{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.5
}
.report-quality-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:14px
}
.report-quality-item{
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,#fefefe,#f6f9fd);
  border:1px solid #e3eaf4
}
.report-quality-item strong{display:block;font-size:16px;color:var(--ink)}
.report-quality-item span{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.report-focus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
  margin-top:14px
}
.report-focus-card{
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid #dfe7f1;
  box-shadow:0 8px 20px rgba(17,34,68,.04)
}
.report-focus-card strong{display:block;font-size:13px;color:var(--ink)}
.report-focus-card span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
.report-collapsible{
  margin-top:14px;
  border-radius:18px;
  border:1px solid #dfe7f1;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:var(--shadow)
}
.report-collapsible > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:14px 16px
}
.report-collapsible > summary::-webkit-details-marker{display:none}
.report-collapsible[open] > summary{border-bottom:1px solid #e8edf5}
.report-collapsible-body{padding:14px 16px}
.report-collapsible-subtitle{margin-top:4px;color:var(--muted);font-size:12px}
.report-settings-panel{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  border:1px solid #dde8f4;
  box-shadow:0 12px 28px rgba(17,34,68,.05);
  margin-bottom:12px
}
.report-settings-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap
}
.report-settings-head h4{margin:0;font-size:15px}
.report-settings-head p{margin-top:4px;color:var(--muted);font-size:12px;max-width:760px}
.report-settings-note{margin-top:10px;color:#52627b;font-size:12px}
.company-report-filter-shell{
  display:grid;
  gap:12px;
  margin:14px 0 12px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfdff,#f5f9fe);
  border:1px solid #e1e9f3;
}
.company-report-filter-bar{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.company-report-filter-stat{
  min-width:120px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid #e4ebf5;
}
.company-report-filter-stat strong{
  display:block;
  font-size:24px;
  line-height:1.05;
  color:#14304f;
}
.company-report-filter-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:#72829a;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.company-report-filter-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
}
.company-report-filter-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid #dbe6f3;
  color:#3f5674;
  font-size:12px;
  font-weight:700;
}
.company-report-filter-chip.is-empty{
  background:#f8fbff;
  color:#6d7d93;
}
.company-report-filter-presets{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.company-report-preset{
  border:1px solid #d5e1ee;
  background:var(--surface);
  color:#30445f;
  border-radius:999px;
  padding:8px 12px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.company-report-preset:hover{
  background:#eef5ff;
  border-color:#c7d8ee;
  color:var(--primary);
  
}
.company-report-preset.is-active{
  background:linear-gradient(180deg,#2b6bc0,var(--primary));
  border-color:var(--primary);
  color:var(--surface);
}
.company-report-sortbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid #e1e9f3;
  background:linear-gradient(180deg,#fbfdff,#f5f9fe);
}
.company-report-sortbar-label strong{
  display:block;
  font-size:13px;
  color:var(--ink);
}
.company-report-sortbar-label span{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:#6f7d93;
}
.company-report-sortbar-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.company-report-sortbar-controls select{
  min-height:36px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid #d2deeb;
  background:var(--surface);
  color:#20314d;
  min-width:170px;
}
.report-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.report-settings-group{
  padding:12px;
  border-radius:16px;
  background:var(--surface);
  border:1px solid #e3eaf4
}
.report-settings-group h5{margin:0 0 10px;font-size:13px;color:var(--ink)}
.report-settings-group-spaced{margin-top:12px}
.report-settings-actions-spaced{margin:0 0 10px}
.report-settings-note-spaced{margin-top:10px}
.report-filter-grid-spaced{margin-top:12px}
.report-pagination-spaced{margin-top:12px}
.report-custom-fields{display:grid;gap:12px;margin-top:10px}
.report-custom-field-group h6{
  margin:0 0 8px;
  font-size:12px;
  color:#52627b;
  text-transform:uppercase;
  letter-spacing:.06em
}
.report-filters-panel{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface),#f9fbfe);
  border:1px solid #dde8f4;
  box-shadow:0 10px 24px rgba(17,34,68,.04);
  margin-bottom:12px
}
.report-filters-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px
}
.report-filters-head h5{margin:0;font-size:14px;color:var(--ink)}
.report-filters-head p{margin:4px 0 0;color:var(--muted);font-size:12px;max-width:700px}
.report-filters-modal{
  max-width:980px;
  padding:24px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.96)),
    radial-gradient(circle at top right, rgba(31,95,166,.08), transparent 28%);
}
.report-filters-modal-title{
  margin-bottom:14px;
}
.report-filters-hero{
  margin-bottom:16px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid #dbe7f5;
  background:
    linear-gradient(180deg,#fbfdff,#f3f8fe);
  color:#30445f;
  font-size:13px;
  line-height:1.55;
}
.report-filters-panel.report-filters-panel-modal{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,var(--surface) 0%,#f8fbff 100%);
  border:1px solid #dce7f3;
  box-shadow:0 14px 34px rgba(17,34,68,.05);
}
.report-filters-panel-modal .report-settings-group-spaced{
  margin-top:12px;
}
.report-filters-panel-modal .report-filters-head{
  margin-bottom:16px;
}
.report-filters-panel-modal .report-filters-head h5{
  font-size:18px;
  letter-spacing:-0.02em;
}
.report-filters-panel-modal .report-filters-head p{
  font-size:13px;
  max-width:58ch;
}
.report-filters-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#f5f9ff;
  border:1px solid #d8e5f4;
  color:#47627f;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.report-filters-panel-modal .report-filter-section{
  margin-top:0;
  padding:14px;
  border-radius:20px;
}
.report-filters-panel-modal .report-filter-grid{
  gap:14px;
}
.report-filters-panel-modal .report-filter-field{
  padding:14px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
}
.report-date-inline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:stretch;
}
.report-date-inline input[type="date"]{
  width:100%;
  min-height:46px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid #d7e2ef;
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  color:#30445f;
  box-shadow:inset 0 1px 2px rgba(17,34,68,.03);
}
.report-date-inline input[type="date"]:focus{
  outline:none;
  border-color:#7ea8da;
  box-shadow:0 0 0 3px rgba(31,95,166,.12);
}
.report-date-inline input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.75;
  cursor:pointer;
}
.report-date-inline .btn{
  align-self:stretch;
  min-height:46px;
  padding:0 16px;
  border-radius:14px;
  border-color:#d7e2ef;
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  color:#30445f;
  box-shadow:0 1px 1px rgba(17,34,68,.03);
}
.report-date-inline .btn:hover{
  border-color:#c4d7ec;
  background:#f8fbff;
}
.report-filters-footer{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e4ebf5;
}
.report-filters-footer .btn-primary{
  padding-inline:16px;
}
.report-filters-footer .btn:last-child{
  margin-left:auto;
}
.report-filter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:12px;
}
.report-filter-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e2eaf4;
  background:var(--surface);
}
.report-filter-field select,
.report-filter-field input{
  width:100%;
  min-height:38px;
}
.report-filter-field select[multiple]{min-height:110px}
.report-filter-field label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:800;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:.05em
}
.report-filter-field span{
  display:block;
  font-size:11px;
  color:#74819a
}
.report-dropdown-host{
  position:relative;
  width:100%;
}
.report-dropdown-trigger{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #d7e2ef;
  border-radius:12px;
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  color:#20314d;
  cursor:pointer;
}
.report-dropdown-trigger:hover{
  border-color:#c4d7ec;
  box-shadow:0 8px 18px rgba(17,34,68,.06);
}
.report-dropdown-trigger strong{
  font-size:13px;
  font-weight:700;
}
.report-dropdown-trigger small{
  color:#6e7b93;
  font-weight:600;
}
.report-filter-trigger{
  align-items:center;
}
.report-filter-trigger-main{
  display:block;
  min-width:0;
  flex:1;
}
.report-filter-trigger-value{
  display:block;
  color:#4f6481;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.report-filter-trigger-value.is-empty{
  color:#72829a;
}
.report-filter-trigger-caret{
  flex:none;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  color:#5c7390;
  font-size:12px;
}
.report-filter-trigger:hover .report-filter-trigger-caret{
  background:#f4f8fd;
  border-color:#dce8f5;
}
.employee-filter-trigger{
  min-height:48px;
  align-items:center;
  padding:10px 12px;
}
.employee-filter-trigger-main{
  display:grid;
  gap:4px;
  min-width:0;
  flex:1;
}
.employee-filter-trigger-head{
  display:none;
}
.employee-filter-trigger-values{
  display:block;
  min-width:0;
}
.employee-filter-trigger-pill{
  display:block;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  color:#4f6481;
  font-size:13px;
  font-weight:600;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.employee-filter-trigger-pill.is-empty{
  background:transparent;
  border:0;
  color:#72829a;
  padding:0;
  font-weight:600;
}
.employee-filter-trigger-caret{
  flex:none;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  color:#5c7390;
  font-size:12px;
}
.employee-filter-trigger:hover .employee-filter-trigger-caret{
  background:#f4f8fd;
  border-color:#dce8f5;
}
.employee-filter-menu{
  width:min(520px, calc(100vw - 24px));
  max-height:min(420px, calc(100vh - 120px));
  padding:10px;
  border-radius:16px;
  border-color:#d6e3f0;
  box-shadow:0 22px 48px rgba(17,34,68,.18);
}
.employee-filter-menu-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.employee-filter-menu-head strong{
  display:block;
  font-size:13px;
  color:var(--ink);
}
.employee-filter-menu-head span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#72829a;
}
.employee-filter-menu .report-dropdown-search{
  margin-bottom:10px;
}
.employee-filter-menu .report-dropdown-actions{
  margin:0 0 10px;
}
.employee-filter-menu .report-dropdown-list{
  gap:6px;
}
.employee-filter-menu .report-dropdown-item{
  width:100%;
  justify-content:flex-start;
  padding:10px 11px;
  border-radius:12px;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.employee-filter-menu .report-dropdown-item:hover{
  border-color:#c9dbef;
  background:#f8fbff;
}
.employee-filter-menu .report-dropdown-item.is-selected{
  border-color:#bfd4eb;
  background:linear-gradient(180deg,#f8fbff,#eef5fd);
  box-shadow:inset 0 0 0 1px rgba(31,95,166,.04);
}
.employee-filter-menu .report-dropdown-check{display:none}
.employee-filter-menu .report-dropdown-text{
  flex:1 1 auto;
  width:100%;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
.report-dropdown-menu{
  position:fixed;
  z-index:1000; /* رفع المستوى لضمان الظهور فوق كل شيء */
  top:0;
  left:0;
  width:auto;
  box-sizing:border-box;
  min-width:260px;
  max-height:320px;
  overflow:auto;
  padding:10px;
  border-radius:var(--radius-md);
  border:1px solid var(--border-strong);
  background:var(--surface);
  box-shadow:var(--shadow-strong);
  transform-origin:top left;
  animation: dropdownFadeIn 0.2s ease-out;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.report-dropdown-menu.report-filter-menu{
  width:min(520px, calc(100vw - 24px));
  max-height:min(420px, calc(100vh - 120px));
  padding:10px;
  border-radius:16px;
  border-color:#d6e3f0;
  box-shadow:0 22px 48px rgba(17,34,68,.18);
}
.report-filter-menu .report-dropdown-search{
  margin-bottom:10px;
}
.report-filter-menu .report-dropdown-actions{
  margin:0 0 10px;
}
.report-filter-menu .report-dropdown-list{
  gap:6px;
}
.report-filter-menu .report-dropdown-item{
  width:100%;
  justify-content:flex-start;
  padding:10px 11px;
  border-radius:12px;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.report-filter-menu .report-dropdown-item:hover{
  border-color:#c9dbef;
  background:#f8fbff;
}
.report-filter-menu .report-dropdown-item.is-selected{
  border-color:#bfd4eb;
  background:linear-gradient(180deg,#f8fbff,#eef5fd);
  box-shadow:inset 0 0 0 1px rgba(31,95,166,.04);
}
.report-filter-menu .report-dropdown-check{
  display:none;
}
.report-filter-menu .report-dropdown-text{
  flex:1 1 auto;
  width:100%;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
.report-dropdown-menu.hidden{display:none}
.report-dropdown-menu[data-placement="above"]{
  top:auto;
  bottom:auto;
  transform-origin:bottom left;
}
.report-dropdown-search{
  width:100%;
  min-height:36px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d7e2ef;
  background:var(--surface);
  margin-bottom:8px;
  font-size:13px;
}
.report-dropdown-actions{
  display:flex;
  gap:8px;
  margin:10px 0 10px;
  flex-wrap:wrap
}
.report-dropdown-list{
  display:grid;
  gap:8px
}
.report-dropdown-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  text-align:left;
  transition: all var(--transition-fast);
}
.report-dropdown-item:hover{
  background: var(--primary-soft);
  color: var(--primary-strong);
  border-color: var(--primary-soft);
}
.report-dropdown-item.is-selected{
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-weight: 700;
}
.report-dropdown-item.hidden{display:none}
.report-dropdown-check{
  flex:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.report-dropdown-check input{
  width:16px;
  height:16px;
  margin:0;
}
.report-dropdown-text{
  flex:1;
  margin:0;
  font-size:13px;
  color:#30445f;
  line-height:1.35;
  font-weight:600;
  word-break:break-word;
}
.report-custom-field-group.hidden{display:none}
.toggle-chip.hidden{display:none}
.report-filter-section{
  display:grid;
  gap:14px;
  margin-top:12px;
  padding:14px;
  border:1px solid #e4ebf5;
  border-radius:18px;
  background:linear-gradient(180deg,var(--surface) 0%,#f8fbff 100%);
}
.report-filter-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.report-filter-section-head h6{
  margin:0;
  font-size:13px;
  color:var(--ink)
}
.report-filter-section-head p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted)
}
.report-settings-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.report-empty{padding:14px;border-radius:14px;border:1px dashed #dbe4ef;background:#fbfdff;color:var(--muted)}
.report-shell{
  padding:20px;
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(31,95,166,.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(44,122,105,.06), transparent 22%),
    linear-gradient(180deg,var(--surface) 0%,#f8fbff 100%);
}
.report-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid #dde8f4;
  background:linear-gradient(120deg,var(--surface),#f7fbff);
  margin-bottom:14px;
}
.report-toolbar h3{margin:0;font-size:18px;letter-spacing:-0.02em}
.report-toolbar p{margin-top:4px;color:var(--muted);font-size:12px}
.report-toolbar-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.report-toolbar-action-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.report-toolbar-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.report-mode-select{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid #dbe6f3;
  background:linear-gradient(180deg,var(--surface),#f7fbff);
  box-shadow:0 8px 20px rgba(17,34,68,.04);
}
.report-mode-select-text{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.report-mode-select select{
  min-width:124px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid #cfdceb;
  border-radius:12px;
  background:var(--surface);
  color:#20314d;
  font-weight:700;
}
.report-toolbar-export{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:6px;
  border-radius:16px;
  border:1px solid #dbe6f3;
  background:linear-gradient(180deg,var(--surface),#f8fbff);
  box-shadow:0 8px 20px rgba(17,34,68,.04);
}
.report-toolbar-export .btn,
.report-toolbar-controls > .btn{
  min-height:38px;
}
.report-meta-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.report-meta-row .badge{background:var(--surface-tint);color:var(--primary);border:1px solid #d7e6f6}
.report-insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.report-insight{
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,var(--surface),#fafcff);
  border:1px solid #e5edf6;
  box-shadow:0 8px 20px rgba(17,34,68,.04);
}
.report-insight strong{display:block;font-size:22px;line-height:1.1}
.report-insight span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.company-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.company-kpi-card{
  padding:14px 16px;
  border-radius:18px;
  background:var(--surface);
  border:1px solid #e5edf6;
  box-shadow:0 12px 26px rgba(17,34,68,.05);
  position:relative;
  overflow:hidden;
}
.company-kpi-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:4px;
  background:var(--primary);
}
.company-kpi-card strong{display:block;font-size:24px;line-height:1.05}
.company-kpi-card span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.company-kpi-card.kpi-red::before{background:var(--danger)}
.company-kpi-card.kpi-amber::before{background:#d97706}
.company-kpi-card.kpi-green::before{background:#2c7a69}
.company-section-card{
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  border:1px solid #e3ebf4;
  box-shadow:0 14px 32px rgba(17,34,68,.05);
}
.company-section-card-docs{
  border-top:4px solid var(--primary);
}
.company-upload-item-card{
  padding:14px;
  background:var(--surface);
}
.company-upload-preview-frame{
  width:100%;
  height:280px;
  border:1px solid var(--border-light);
  border-radius:12px;
  background:var(--surface);
  margin-top:10px;
}
.company-upload-actions{
  margin:10px 0 0;
}
.company-upload-error{
  margin-top:10px;
}
.company-more-details{
  margin-top:12px;
}
.company-more-details summary{
  cursor:pointer;
  color:var(--primary);
  font-weight:700;
}
.company-more-details-grid{
  margin-top:12px;
}
.company-notes-block{
  margin-top:12px;
}
.company-doc-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.report-table-toolbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.report-table-toolbar-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.empty-state-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:18px;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfdff 0%,#f5f9ff 100%);
  border:1px dashed #cdd9e8;
  color:var(--muted);
}
.empty-state-title{font-size:15px;font-weight:700;color:#23374f}
.empty-state-desc{font-size:13px;line-height:1.55;max-width:56ch}
.empty-state-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.report-table .empty-state-card{width:100%}
@media (max-width: 900px){
  .app{padding:14px 10px}
  .topbar{align-items:flex-start;padding:12px}
  .topbar-brand{width:100%;justify-content:center}
  .topbar-right{width:100%;justify-content:stretch}
  .topbar-right .btn{flex:1 1 140px}
  .topbar-actions-main{width:100%}
  .topbar-more{width:100%}
  .topbar-more-menu{position:static;min-width:0;width:100%;margin-top:8px}
  .tabs{overflow-x:auto;white-space:nowrap;padding-bottom:4px}
  .tab{white-space:nowrap}
  .form-row{grid-template-columns:1fr}
  .modal{max-width:100%}
  table{min-width:unset}
  .card{overflow:visible}
  .table-scroll{overflow-x:auto;overflow-y:visible}
  .calendar-toolbar{justify-content:flex-start}
  .calendar-toolbar h3{order:-1;width:100%;text-align:left}
  .calendar-grid{gap:4px}
  .calendar-cell{min-height:78px;padding:6px}
  .toolbar input,.toolbar select{flex:1 1 100%;min-width:0}
  .toolbar .btn{flex:1 1 100%}
  .stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .company-report-filter-bar{grid-template-columns:1fr}
  .company-report-filter-stat{min-width:0}
  .section-head{align-items:flex-start}
  .data-table,.data-table thead,.data-table tbody,.data-table tr,.data-table th,.data-table td{display:block;width:100%}
  .data-table thead{display:none}
  .data-table tr{
    margin:0 0 10px;border:1px solid var(--border-light);border-radius:14px;overflow:visible;background:var(--surface);
    box-shadow:0 8px 20px rgba(17,34,68,.04)
  }
  .data-table td{
    display:grid;grid-template-columns:minmax(96px,.42fr) minmax(0,1fr);gap:10px;align-items:start;
    padding:10px 12px;border-bottom:1px solid #eef2f7
  }
  .data-table td::before{
    content:attr(data-label);
    color:var(--ink-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    line-height:1.4
  }
  .data-table td > *{justify-self:end;text-align:right}
  .data-table td:last-child{border-bottom:0}
  .data-table td .emp-cell,
  .data-table td .bar-wrap,
.data-table td .leave-item,
.data-table td .info-box,
.data-table td .badge,
.data-table td .btn{
    justify-self:end
  }
  .row-actions{justify-content:flex-end}
  .row-actions-menu-panel{min-width:180px;max-width:calc(100vw - 28px)}
  .dashboard-hero,.report-hero,.report-grid,.dashboard-main-grid,.dashboard-trend-layout,.dashboard-expiry-grid{grid-template-columns:1fr}
  .report-filter-grid{grid-template-columns:1fr}
  .report-toolbar{padding:12px}
  .report-shell{padding:14px}
  .dashboard-focus-grid,.dashboard-insight-bar{grid-template-columns:1fr}
  .admin-grid,.admin-stat-row{grid-template-columns:1fr}
  .dashboard-chart-wrap{height:260px}
  .dashboard-trend-wrap{height:160px}
  .report-chart-grid,.report-recommendations{grid-template-columns:1fr}
  .report-chart-wrap,.report-chart-wrap.tall{height:240px}
  .report-table{min-width:620px}
  .bulk-toolbar{align-items:stretch}
  .bulk-toolbar-actions,.bulk-toolbar-main{width:100%}
  .bulk-toolbar-actions .btn{flex:1 1 120px}
}
@media (max-width: 700px){
  .app{padding:10px 8px}
  .workspace-banner{padding:14px}
  .workspace-banner-main{
    min-width:0;
    width:100%;
    grid-template-columns:1fr;
  }
  .workspace-brand{
    align-items:flex-start;
    grid-column:auto;
    grid-row:auto;
  }
  .workspace-banner-copy{
    grid-column:auto;
    grid-row:auto;
    max-width:none;
  }
  .workspace-note{max-width:none}
  .dashboard-hero{
    padding:14px;
    border-radius:20px;
    gap:12px
  }
  .dashboard-hero h4{font-size:21px}
  .dashboard-hero-chips{margin-bottom:8px}
  .dashboard-hero-chip{padding:5px 9px;font-size:11px}
  .dashboard-kpi-grid,.dashboard-top-strip{grid-template-columns:1fr}
  .dashboard-focus-grid{grid-template-columns:1fr}
  .dashboard-side{padding:12px}
  .dashboard-side-item{padding:10px 11px}
  .dashboard-chart-card,.dashboard-trend-card{padding:14px;border-radius:18px}
  .dashboard-chart-wrap{height:220px}
  .dashboard-trend-wrap{height:150px}
  .report-shell{padding:12px;border-radius:18px}
  .report-hero{
    padding:14px;
    border-radius:18px
  }
  .report-hero h4{font-size:21px}
  .report-hero-aside{padding:12px}
  .report-hero-stat{padding:10px}
  .report-metric-grid,.report-insight-grid{grid-template-columns:1fr}
  .report-settings-grid{grid-template-columns:1fr}
  .report-chart-grid,.report-recommendations{grid-template-columns:1fr}
  .report-chart-wrap,.report-chart-wrap.tall{height:220px}
  .report-card{padding:12px}
  .report-table{min-width:560px}
  .report-toolbar-actions,
  .report-toolbar-controls,
  .report-toolbar-export{width:100%}
  .report-mode-select{width:100%;justify-content:space-between}
  .report-mode-select select{flex:1}
  .report-toolbar-controls > .btn,
  .report-toolbar-export .btn{flex:1 1 110px}
}
@media (max-width: 560px){
  body{font-size:13px}
  .app{padding:8px}
  .topbar{position:static;top:auto;border-radius:16px;padding:10px}
  .topbar-brand{justify-content:flex-start}
  .tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
    white-space:normal;
  }
  .tab{
    width:100%;
    text-align:center;
    white-space:normal;
  }
  .topbar-right,
  .topbar-actions-main,
  .topbar-actions-more,
  .workspace-banner-meta,
  .workspace-banner-main,
  .employee-head-tools,
  .saved-view-bar,
  .modal-actions,
  .section-head-actions,
  .report-toolbar-action-group,
  .calendar-toolbar,
  .bulk-toolbar-actions{
    width:100%;
  }
  .workspace-banner-meta,
  .employee-head-tools,
  .saved-view-bar,
  .section-head-actions,
  .calendar-toolbar,
  .modal-actions,
  .detail-header-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .employee-identity-bar{
    flex-direction:column;
    align-items:flex-start;
  }
  .employee-identity-meta{
    justify-content:flex-start;
  }
  .employee-identity-copy strong,
  .employee-identity-copy span{
    white-space:normal;
  }
  .workspace-brand{
    width:100%;
  }
  .workspace-brand-copy{
    min-width:0;
  }
  .workspace-banner-main{
    grid-template-columns:1fr;
  }
  .workspace-meta-inline,
  .workspace-icon-actions{
    justify-content:flex-start;
  }
  .topbar-right .btn,
  .topbar-more > summary,
  .section-head-actions .btn,
  .employee-head-tools .btn,
  .saved-view-bar .btn,
  .saved-view-bar select,
  .detail-header-actions .btn,
  .detail-subtabs .btn,
  .company-actions-dropdown,
  .company-actions-dropdown > summary,
  .calendar-toolbar .btn,
  .calendar-toolbar input[type="date"],
  .modal-actions .btn,
  .report-toolbar-actions .btn,
  .report-toolbar-controls > .btn,
  .report-toolbar-export .btn,
  .report-mode-select,
  .bulk-toolbar-actions .btn{
    width:100%;
  }
  .topbar-right .btn,
  .topbar-more,
  .topbar-actions-main,
  .topbar-actions-main .btn,
  .detail-header-main,
  .detail-header-actions,
  .report-toolbar-action-group,
  .report-toolbar-controls,
  .report-toolbar-export{
    flex:1 1 100%;
  }
  .topbar-more-menu{
    padding:10px;
    gap:8px;
  }
  .topbar-more-menu .btn{flex:1 1 100%}
  .modal-overlay{
    padding:10px;
    align-items:flex-end;
  }
  .modal{
    padding:16px;
    border-radius:18px;
    max-height:min(88vh,calc(100dvh - 20px));
  }
  .stats{grid-template-columns:1fr 1fr}
  .stats-compact{grid-template-columns:1fr 1fr}
  .detail-profile,
  .detail-sections,
  .detail-grid,
  .report-mode-select,
  .report-hero-aside,
  .company-kpi-grid{
    grid-template-columns:1fr;
  }
  .detail-header{
    padding:14px;
  }
  .detail-header-main{
    flex-direction:column;
  }
  .detail-profile{
    padding:14px;
    border-radius:18px;
  }
  .detail-profile-head{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .detail-profile-avatar{
    width:76px;
    height:76px;
    border-radius:18px;
  }
  .detail-profile-name{font-size:22px}
  .detail-profile-meta{justify-content:center}
  .detail-summary-grid{
    grid-template-columns:1fr;
  }
  .detail-section-card{padding:12px}
  .employee-list-table tr{
    position:relative;
  }
  .employee-list-table td[data-label="Employee"]{
    padding:12px;
    background:linear-gradient(180deg,#f9fbff,#f4f8fd);
  }
  .employee-list-table td[data-label="Employee"]::before,
  .employee-list-table td[data-label="Actions"]::before,
  .employee-list-table td[data-label="Select"]::before{
    content:none;
  }
  .employee-list-table td[data-label="Employee"],
  .employee-list-table td[data-label="Actions"],
  .employee-list-table td[data-label="Select"]{
    grid-template-columns:1fr;
  }
  .employee-list-table td[data-label="Employee"] > *,
  .employee-list-table td[data-label="Actions"] > *,
  .employee-list-table td[data-label="Select"] > *{
    justify-self:start;
    text-align:left;
  }
  .employee-list-table .emp-cell{
    width:100%;
    gap:12px;
  }
  .employee-list-table .emp-cell .avatar{
    width:42px;
    height:42px;
    font-size:14px;
    flex:none;
  }
  .employee-list-table .emp-cell-body{
    gap:6px;
    width:100%;
  }
  .employee-list-table .emp-name-row{
    justify-content:space-between;
    align-items:flex-start;
    gap:6px;
  }
  .employee-list-table .emp-name-row b{
    font-size:14px;
    line-height:1.3;
  }
  .employee-list-table .emp-subline{
    font-size:12px;
  }
  .employee-list-table .selection-cell{
    position:static;
    padding:10px 12px 0;
    border-bottom:0;
    background:transparent;
  }
  .employee-list-table .selection-cell .selection-checkbox{
    width:18px;
    height:18px;
  }
  .employee-list-table .row-actions,
  .employee-list-table .row-actions-menu,
  .employee-list-table .row-actions-menu > summary,
  .employee-list-table td[data-label="Actions"] .btn{
    width:100%;
  }
  .employee-list-table .row-actions{
    justify-content:stretch;
  }
  .employee-list-table .row-actions-menu{
    display:flex;
  }
  .employee-list-table .row-actions-menu > summary{
    justify-content:center;
  }
  .company-hero{
    padding:14px;
    border-radius:18px;
  }
  .company-hero-main{
    min-width:0;
    width:100%;
    flex-direction:column;
  }
  .company-hero-aside{
    min-width:0;
    width:100%;
  }
  .company-hero-copy h3,
  .company-copy-value{
    font-size:20px;
    word-break:break-word;
  }
  .company-actions-dropdown{
    position:static;
  }
  .company-actions-dropdown-panel{
    position:static;
    min-width:0;
    margin-top:8px;
    width:100%;
  }
  .data-table td{
    grid-template-columns:1fr;
    gap:4px;
  }
  .data-table td > *,
  .data-table td .emp-cell,
  .data-table td .bar-wrap,
  .data-table td .leave-item,
  .data-table td .info-box,
  .data-table td .badge,
  .data-table td .btn{
    justify-self:start;
    text-align:left;
  }
  .emp-cell{
    align-items:flex-start;
  }
  .report-table-wrap{
    overflow:visible;
    max-height:none;
    border:0;
  }
  .report-table,
  .report-table thead,
  .report-table tbody,
  .report-table tr,
  .report-table th,
  .report-table td{
    display:block;
    width:100%;
  }
  .report-table{
    min-width:0;
    border-spacing:0;
  }
  .report-table thead{
    display:none;
  }
  .report-table tr{
    margin:0 0 10px;
    border:1px solid var(--border-light);
    border-radius:14px;
    overflow:hidden;
    background:var(--surface);
    box-shadow:0 8px 20px rgba(17,34,68,.04);
  }
  .report-table td{
    display:grid;
    grid-template-columns:minmax(92px,.42fr) minmax(0,1fr);
    gap:8px;
    padding:10px 12px;
    border-bottom:1px solid #eef2f7;
    text-align:left;
  }
  .report-table td::before{
    content:attr(data-label);
    color:var(--ink-muted);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    line-height:1.4;
  }
  .report-table td > *{
    justify-self:end;
    text-align:right;
  }
  .report-table td[colspan]{
    display:block;
  }
  .report-table td[colspan]::before{
    content:none;
  }
  .report-table td select,
  .report-table td .btn{
    max-width:100%;
  }
  .report-table td:last-child{
    border-bottom:0;
  }
  .report-table .empty-state-card{
    width:100%;
  }
  .search-result{
    flex-direction:column;
  }
  .search-result .btn{width:100%}
  .toast{
    left:10px;
    right:10px;
    bottom:10px;
  }
  .pagination{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
  .company-report-overview-card h4,
  .dashboard-hero h4,
  .report-hero h4{
    font-size:20px;
  }
}
@media (max-width: 420px){
  .stats{grid-template-columns:1fr}
  .stats-compact{grid-template-columns:1fr}
  .app{padding:6px}
  .tabs{
    grid-template-columns:1fr;
  }
  .employee-list-table td[data-label="Employee"]{
    padding:10px;
  }
  .employee-list-table .emp-cell{
    gap:10px;
  }
  .employee-list-table .emp-cell .avatar{
    width:38px;
    height:38px;
    font-size:13px;
  }
  .employee-list-table .emp-inline-meta{
    gap:4px;
  }
  .employee-list-table .emp-inline-meta .emp-chip{
    padding:3px 7px;
    font-size:10px;
  }
  .topbar,
  .workspace-banner,
  .card,
  .dashboard-hero,
  .report-hero,
  .report-shell{
    border-radius:16px;
  }
  .tabs{
    padding:4px;
    gap:6px;
  }
  .workspace-brand{
    flex-direction:column;
    align-items:flex-start;
  }
  .tab{
    padding:9px 12px;
    font-size:12px;
  }
  .btn{
    padding:9px 12px;
  }
  .modal{
    padding:14px;
  }
  .calendar-cell{
    min-height:74px;
    padding:6px;
  }
  .data-table td{
    padding:9px 10px;
  }
  .report-table td{
    grid-template-columns:1fr;
    gap:4px;
    padding:9px 10px;
  }
  .report-table td > *{
    justify-self:start;
    text-align:left;
  }
  .row-actions-menu-panel{
    min-width:0;
    width:min(calc(100vw - 24px), 280px);
    max-width:calc(100vw - 24px);
  }
}

/* Reference UI alignment */
.app-shell-reskin{
  grid-template-columns:240px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.app-main{
  min-width:0;
  display:grid;
  gap:22px;
}
.app-sidebar{
  position:sticky;
  top:24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  height:calc(100vh - 48px);
  padding:22px 16px 16px;
  border-radius:22px;
  border:1px solid rgba(220,229,240,.92);
  background:var(--surface);
  box-shadow:0 10px 30px rgba(17,34,68,.06);
  transition: width var(--transition-fast), padding var(--transition-fast);
  z-index: 1000;
}
.app-sidebar-brand{
  display:grid;
  gap:10px;
  padding:6px 6px 2px;
}
.app-sidebar-wordmark{
  width:min(140px,100%);
  height:auto;
}
.app-sidebar-caption{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}
.app-sidebar-nav{
  flex: 1 1 auto;
  display:grid;
  gap:8px;
  align-content:start;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.app-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.app-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.app-nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:#5a6b82;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.app-nav-link:hover{
  background:#f4f8fd;
  border-color:#deebf8;
  color:var(--primary);
  transform:translateX(2px);
}
.app-nav-link.active{
  background:#edf4ff;
  border-color:#d4e1f2;
  color:var(--primary);
  box-shadow:none;
}
.app-nav-link-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f5f7fb;
  color:currentColor;
  transition: all var(--transition-fast);
}
.app-nav-link-icon svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.app-sidebar-profile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  border:1px solid #e2eaf3;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.app-profile-avatar{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:linear-gradient(180deg,#2c6ac0,var(--primary));
  color:var(--surface);
  font-weight:800;
  letter-spacing:.04em;
}
.app-profile-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.app-profile-copy strong{
  font-size:16px;
}
.app-profile-copy #user-email{
  overflow:hidden;
  text-overflow:ellipsis;
}
.workspace-banner{
  grid-template-columns:minmax(0,1fr) minmax(380px, 520px);
  gap:20px;
  padding:24px 26px;
  border-radius:22px;
  border:1px solid rgba(220,229,240,.95);
  background:var(--surface);
  box-shadow:0 10px 28px rgba(17,34,68,.06);
}
.workspace-banner-main{
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}
.workspace-banner-mobile{
  display:none;
  align-items:center;
  gap:14px;
}
.workspace-nav-trigger{
  display:none;
}
.workspace-brand{
  display:none;
}
.workspace-banner-copy{
  grid-column:auto;
  grid-row:auto;
  gap:6px;
}
.workspace-context{
  display:inline-flex;
  width:max-content;
  padding:5px 10px;
  border-radius:999px;
  background:#eef4ff;
  color:var(--primary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.workspace-banner h2{
  font-size:22px;
}
.workspace-banner p{
  font-size:13px;
}
.workspace-banner-meta{
  width:auto;
  gap:12px;
}
.workspace-search-shell{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid #dce6f2;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:var(--shadow-xs);
}
.workspace-search-shell svg{
  width:18px;
  height:18px;
  fill:#8697ae;
}
.workspace-search-shell input{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  outline:none;
}
.workspace-search-shell input[onclick]{
  cursor:pointer;
}
.workspace-search-shell input::placeholder{
  color:#8a9bb2;
}
.workspace-search-shortcut{
  padding:6px 10px;
  border-radius:12px;
  border:1px solid #e1e9f3;
  background:#f8fbff;
  font-size:12px;
  color:#7c8da4;
  white-space:nowrap;
}
.workspace-icon-actions{
  gap:12px;
}
.topbar{
  position:static;
  margin-bottom:0;
  padding:20px 22px;
  border-radius:20px;
  border:1px solid rgba(220,229,240,.95);
  background:var(--surface);
  box-shadow:0 8px 24px rgba(17,34,68,.05);
}
.topbar-right{
  gap:16px;
}
.topbar-actions-main .btn,
.topbar-more > summary{
  min-height:54px;
  padding:12px 18px;
  border-radius:16px;
  font-size:14px;
}
.topbar-actions-main .btn{
  min-width:184px;
}
.topbar-more > summary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,var(--surface),#fbfdff);
}
.tabs-shell{display:none}
.tabs{
  margin-bottom:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.tab{
  position:relative;
  padding:14px 18px 12px;
  border-radius:16px 16px 0 0;
}
.tab.active{
  background:transparent;
  box-shadow:none;
}
.tab.active::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,#2b6bc0,var(--primary));
}
.dashboard-summary-shell{
  display:grid;
  gap:14px;
}
.stats{
  margin-bottom:0;
}
.stats-compact{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.stat{
  min-height:172px;
  padding:22px 20px;
  border-radius:20px;
  border:1px solid rgba(224,232,241,.95);
  border-top-width:1px;
  background:var(--surface);
  box-shadow:0 8px 22px rgba(17,34,68,.04);
}
.stats-compact .stat{
  min-height:172px;
  padding:22px 20px;
}
.stat-label{
  margin-bottom:12px;
  font-size:var(--text-xs);
  color:#73839a;
  letter-spacing:.08em;
}
.stat-value{
  font-size:42px;
  line-height:1;
}
.stat-note{
  display:block;
  margin-top:10px;
  color:var(--muted);
}
.stat-primary{
  box-shadow:0 16px 30px rgba(31,95,166,.08);
}
.stat-warning{
  background:linear-gradient(180deg,#fffaf0,#fffdfa);
}
.stat-success{
  background:linear-gradient(180deg,#f6fbf6,#fdfffd);
}
.stat-danger{
  background:linear-gradient(180deg,#fff6f6,#fffdfd);
}
#alert-zone{
  display:grid;
}
.alert-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.alert-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:82px;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid #e2eaf3;
  background:var(--surface);
  box-shadow:none;
  text-align:left;
}
button.alert-pill{
  width:100%;
  cursor:pointer;
}
.alert-pill strong{
  font-size:15px;
}
.alert-pill.is-warning{
  background:linear-gradient(180deg,#fffaf0,#fffdf8);
  border-color:#f0dfb8;
}
.alert-pill.is-danger{
  background:linear-gradient(180deg,#fff5f5,#fffafb);
  border-color:#f1d2d2;
}
.alert-pill.is-success{
  background:linear-gradient(180deg,#f4fbf5,#fbfffb);
  border-color:#cfe6d2;
}
.alert-pill.is-info{
  background:linear-gradient(180deg,#f5f9ff,#fbfdff);
  border-color:#d6e3f5;
}
#section-dashboard .card{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

@media (max-width: 1180px){
  .app-shell-reskin{
    grid-template-columns:1fr;
  }
  .dashboard-reference-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-reference-rail{
    grid-column:1 / -1;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-reference-alerts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .app-sidebar{
    position:fixed;
    top:14px;
    left:14px;
    bottom:14px;
    z-index:90;
    width:min(320px, calc(100vw - 28px));
    min-height:auto;
    transform:translateX(calc(-100% - 24px));
    transition:transform .22s ease, box-shadow .22s ease;
  }
  #main-app.sidebar-open .app-sidebar{
    transform:translateX(0);
    box-shadow:0 26px 60px rgba(10,24,45,.18);
  }
  #main-app.sidebar-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(10,24,45,.28);
    backdrop-filter:blur(3px);
    z-index:80;
  }
  .workspace-nav-trigger{
    display:inline-flex;
  }
  .workspace-banner-mobile{
    display:flex;
  }
  .workspace-brand{
    display:flex;
  }
  .workspace-banner{
    grid-template-columns:1fr;
  }
}

@media (max-width: 860px){
  .dashboard-reference-grid,
  .dashboard-reference-rail,
  .dashboard-reference-alerts,
  .dashboard-company-chart-layout{
    grid-template-columns:1fr;
  }
  .workspace-banner{
    padding:18px;
    border-radius:22px;
  }
  .workspace-banner-mobile{
    justify-content:space-between;
  }
  .workspace-banner-meta{
    grid-template-columns:1fr;
  }
  .workspace-search-shell{
    grid-template-columns:auto minmax(0,1fr);
  }
  .workspace-search-shortcut{
    display:none;
  }
  .topbar{
    padding:16px;
  }
  .topbar-right,
  .topbar-actions-main{
    width:100%;
  }
  .topbar-actions-main{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  }
  .topbar-more{
    width:100%;
  }
  .topbar-more > summary{
    width:100%;
  }
  .topbar-more-menu{
    position:static;
    min-width:0;
    width:100%;
    margin-top:10px;
  }
}

@media (max-width: 640px){
  .app{padding:12px}
  .tabs-shell,
  .topbar,
  .workspace-banner{
    border-radius:20px;
  }
  .tab{
    padding:12px 14px 10px;
  }
  .stats-compact,
  .alert-strip,
  .dashboard-reference-alerts{
    grid-template-columns:1fr;
  }
  .topbar-actions-main{
    grid-template-columns:1fr;
  }
  .employee-kpi-grid{
    grid-template-columns:1fr;
  }
  .topbar-actions-main .btn{
    min-width:0;
    width:100%;
  }
  .workspace-banner h2{
    font-size:18px;
  }
  .stat{
    min-height:148px;
  }
  .stat-value{
    font-size:34px;
  }
}

/* 2026 Dashboard Reference Reskin */
body{
  background:
    radial-gradient(circle at top left, rgba(43,107,192,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(122,203,147,.08), transparent 24%),
    linear-gradient(180deg,#f8fafc 0%, #f2f5fa 100%);
}
.app{
  max-width:1600px;
}
.app-shell-reskin{
  grid-template-columns:1fr;
  gap:16px;
}
.app-sidebar{
  position:fixed;
  top:24px;
  left:max(16px, calc((100vw - 1600px) / 2 + 16px));
  width:235px;
  height:calc(100vh - 48px);
  gap:16px;
  padding:20px 16px 16px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(231,237,244,.8);
  background:rgba(255, 255, 255, 0.95);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:40;
  display:flex;
  flex-direction:column;
}
.app-main{
  margin-left:251px;
}
.app-sidebar-brand{
  padding:8px 8px 2px;
}
.app-sidebar-brand-mark{
  display:grid;
  justify-items:center;
  gap:6px;
}
.app-sidebar-brand-copy{
  display:grid;
  gap:8px;
  justify-items:center;
}
.app-sidebar-wordmark{
  width:min(126px,100%);
}
.app-sidebar-caption{
  font-size:10px;
  letter-spacing:.12em;
  color:var(--muted);
  text-align:center;
  text-transform:uppercase;
  font-weight:700;
  opacity:0.8;
}
.app-sidebar-nav{
  gap:5px;
}
.app-nav-link{
  min-height:48px;
  padding:10px 14px;
  border-radius:var(--radius-md);
  color:var(--muted-strong);
  font-weight:600;
  letter-spacing:-.01em;
  transition:all var(--transition-fast);
  border:1px solid transparent;
  display:flex;align-items:center;gap:12px;
}
.app-nav-link:hover{
  background:var(--primary-soft);
  color:var(--primary);
}
.app-nav-link.active{
  background:var(--primary-soft);
  border-color:rgba(31,95,166,0.1);
  color:var(--primary);
  font-weight:700;
  box-shadow:var(--shadow-xs);
}
.app-nav-link.active::before {
  content: "";
  position: absolute;
  left: 6px;
  width: 4px;
  height: 16px;
  background: var(--primary);
  border-radius: 99px;
}
.app-nav-link-icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.8);
  color:currentColor;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-xs);
}
.app-nav-link.active .app-nav-link-icon {
  background:var(--primary);
  color:var(--surface);
}
.app-sidebar-profile{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  box-shadow:var(--shadow-sm);
  margin-top:auto;
}
.app-profile-avatar{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg,#2d6cc0,#235ca7);
  color:var(--surface);
  font-weight:800;
  line-height:1;
  flex:none;
}
.app-profile-copy{
  min-width:0;
  display:grid;
  gap:3px;
}
.app-profile-copy strong{
  font-size:13px;
  font-weight:700;
  color:#20344f;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.app-profile-copy span{
  color:#7f90a5;
}
#sidebar-user-email{
  display:block;
  max-width:100%;
  font-size:11px;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#sidebar-user-role{
  display:flex;
  align-items:center;
  min-width:0;
}
#sidebar-user-role .badge-role{
  max-width:100%;
}
.workspace-banner{
  grid-template-columns:minmax(0,1fr) minmax(340px, 460px);
  gap:14px;
  padding:14px 18px;
  border-radius:20px;
}
.workspace-banner-copy{
  gap:3px;
}
.workspace-context{
  order:2;
  background:transparent;
  padding:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:#7f94af;
}
.workspace-banner h2{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
}
.workspace-banner p{
  margin:0;
  font-size:11px;
  color:#7c8da4;
}
.workspace-banner-meta{
  gap:6px;
}
.workspace-search-shell{
  display:none;
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
}
.workspace-search-shortcut{
  display:none;
}
.workspace-icon-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.workspace-icon-btn{
  width:42px;
  height:42px;
  border-radius:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dfe7f1;
  background:var(--surface);
  color:#547093;
  box-shadow:none;
  padding:0;
}
.workspace-icon-btn-shell{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#f4f8fd;
}
.workspace-icon-btn svg{
  width:16px;
  height:16px;
  fill:currentColor;
}
.workspace-icon-btn-notif{
  position:relative;
}
.workspace-icon-btn-notif .workspace-icon-btn-shell{
  background:#eef4ff;
  color:#2e64b6;
}
.workspace-icon-btn-notif:hover{
  border-color:#d6e2f0;
  background:#fbfdff;
}
.workspace-user-card{
  display:none;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:6px 10px 6px 6px;
  border:1px solid #e3eaf3;
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.workspace-user-avatar{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(180deg,#f1f5fb,#e2ebf7);
  color:var(--primary);
  font-weight:800;
  font-size:12px;
}
.workspace-user-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.workspace-user-copy strong{
  font-size:13px;
  color:#1b2f4a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.workspace-user-copy .badge-role{
  margin-top:0;
  width:max-content;
}
.workspace-user-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#8ea0b7;
}
.workspace-user-chevron svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.topbar{
  padding:14px 18px;
  border-radius:20px;
}
.workspace-logout-btn{
  width:auto;
  min-width:98px;
  padding:0 14px 0 8px;
  gap:10px;
  justify-content:flex-start;
  border-radius:14px;
  border-color:#f1d7d7;
  background:linear-gradient(180deg,var(--surface),#fff8f8);
  color:#c45b5b;
}
.workspace-logout-btn .workspace-icon-btn-shell{
  background:#fff1f1;
  color:#d94d4d;
}
.workspace-logout-btn:hover{
  border-color:#ebc7c7;
  background:#fff6f6;
}
.workspace-logout-label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}
.topbar-right{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.topbar-actions-main{
  gap:10px;
}
.topbar-actions-main .btn{
  min-width:0;
  min-height:48px;
  padding:11px 16px;
  border-radius:14px;
  font-weight:700;
}
.topbar-actions-main .btn::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.8px solid currentColor;
  display:inline-block;
  margin-right:8px;
  vertical-align:-3px;
}
.topbar-actions-main .btn.btn-primary::before{
  content:"+";
  width:18px;
  height:18px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  line-height:1;
}
.topbar-more{
  min-width:128px;
}
.topbar-more > summary{
  min-height:48px;
  padding:11px 16px;
  border-radius:14px;
  font-weight:700;
}
.topbar-more > summary::after{
  content:"\25BE";
  margin-left:8px;
  font-size:11px;
}
.dashboard-summary-shell{
  gap:16px;
}
.dashboard-summary-shell.hidden{
  display:none;
}
.stats-compact{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.stat{
  position:relative;
  min-height:142px;
  padding:18px 20px;
  border-radius:22px;
  overflow:hidden;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.stat::after{
  content:"";
  position:absolute;
  inset:auto -12px -26px auto;
  width:92px;
  height:92px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.78), rgba(255,255,255,0));
  pointer-events:none;
}
.stat:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.stat-copy{
  display:grid;
  gap:14px;
}
.stat-head{
  display:flex;
  align-items:center;
  gap:14px;
}
.stat-icon{
  width:56px;
  height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#edf4ff;
  color:#2b6bc0;
}
.stat-icon svg{
  width:26px;
  height:26px;
  fill:currentColor;
}
.stat-label{
  margin-bottom:0;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
  color:#687b96;
}
.stat-value{
  font-size:46px;
  font-weight:800;
  color:#122844;
}
.stat-note{
  margin-top:12px;
  font-size:13px;
}
.stat-warning .stat-icon{
  background:#fff6e8;
  color:#f59e0b;
}
.stat-success .stat-icon{
  background:#f0fbf3;
  color:#8b5cf6;
}
.stat-danger .stat-icon{
  background:#fff3f3;
  color:#ef4444;
}
.alert-strip{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.alert-pill{
  min-height:88px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:20px;
  box-shadow:var(--shadow-xs);
}
.alert-pill strong{
  font-size:14px;
  line-height:1.3;
}
.alert-pill span:not(.badge){
  font-size:12px;
  color:#71839c;
}
.alert-pill .badge{
  margin-top:auto;
}
.section-shell{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
#section-dashboard .section-head{
  display:none;
}
.dashboard-reference-grid{
  grid-template-columns:minmax(0,1.06fr) minmax(0,1.06fr) minmax(0,.96fr) 290px;
  gap:16px;
}
.dashboard-reference-card{
  border-radius:22px;
  box-shadow:var(--shadow-xs);
}
.dashboard-reference-card-chart,
.dashboard-reference-card-list{
  min-height:310px;
}
.dashboard-reference-head h4{
  font-size:17px;
}
.dashboard-link-btn{
  padding:7px 12px;
  border-radius:12px;
  border:1px solid #dce6f2;
  background:var(--surface);
  color:#4d7fca;
}
.dashboard-company-chart-layout{
  grid-template-columns:190px minmax(0,1fr);
}
.dashboard-request-item{
  padding:12px 0;
  align-items:center;
}
.dashboard-request-main .dashboard-request-avatar{
  width:38px;
  height:38px;
}
.dashboard-request-status{
  display:inline-flex;
  align-items:center;
}
.dashboard-request-status .badge{
  white-space:nowrap;
}
.dashboard-quick-item{
  padding:13px 14px;
  border-radius:15px;
}
.dashboard-quick-item strong{
  font-size:18px;
}
.dashboard-reference-alerts{
  gap:16px;
}
.dashboard-reference-alert{
  min-height:98px;
  padding:16px 18px;
  border-radius:20px;
  box-shadow:var(--shadow-xs);
}
.dashboard-reference-alert strong{
  font-size:15px;
}
.dashboard-reference-alert span{
  font-size:12px;
}

@media (max-width: 1180px){
  .app-main{
    margin-left:0;
  }
  .workspace-icon-actions{
    grid-template-columns:auto minmax(0,1fr) auto;
  }
}
@media (max-width: 860px){
  .workspace-icon-actions{
    grid-template-columns:1fr;
  }
  .workspace-user-card{
    order:3;
  }
  .workspace-logout-btn{
    width:100%;
    justify-content:center;
  }
  .alert-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .app-shell-reskin{
    gap:12px;
  }
  .workspace-banner,
  .topbar{
    padding:16px;
  }
  .workspace-banner h2{
    font-size:18px;
  }
  .workspace-user-card{
    grid-template-columns:auto minmax(0,1fr);
  }
  .workspace-user-chevron{
    display:none;
  }
  .workspace-logout-label{
    display:none;
  }
  .workspace-logout-btn{
    width:46px;
    min-width:0;
    padding:0;
    justify-content:center;
  }
  .stats-compact,
  .alert-strip,
  .dashboard-reference-alerts{
    grid-template-columns:1fr;
  }
  .stat{
    min-height:136px;
    padding:18px;
  }
  .stat-icon{
    width:50px;
    height:50px;
  }
  .stat-value{
    font-size:38px;
  }
}

/* Print Styles */
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:var(--surface)}
  #auth-container,.topbar,.tabs,.toolbar,.stats,#alert-zone,.no-print,.modal-overlay{display:none !important}
  #main-app > div[id^="section-"]{display:none !important}
  #section-reports{display:block !important}
  #section-reports .section-head,
  #section-reports .report-toolbar-actions,
  #section-reports .report-settings-panel,
  #section-reports .report-filters-panel,
  #section-reports .report-table-toolbar{display:none !important}
  #section-reports .report-shell{padding:0;box-shadow:none;background:var(--surface);border:0}
  #section-reports .report-card,
  #section-reports .report-chart-card,
  #section-reports .report-recommendation,
  #section-reports .report-focus-card{box-shadow:none}
  #section-reports .report-chart-wrap,
  #section-reports .report-chart-wrap.tall{height:220px}
  #section-reports .report-collapsible{break-inside:avoid}
  #main-app{max-width:none;padding:0}
}


/* Expiry Center UI Enhancements */
.btn-icon:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary-soft);
    
}

.btn-icon svg { width: 18px; height: 18px; fill: currentColor; }

/* Movement Modal Styling */
.movement-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.type-btn {
    padding: 16px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.type-btn.active.type-in { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.type-btn.active.type-out { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }

.modal-head-restyle { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
.select-modern, .input-modern, .textarea-modern { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); transition: all 0.2s; font-size: 14px; }
.select-modern:focus, .input-modern:focus, .textarea-modern:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); outline: none; }
.type-icon svg { width: 32px; height: 32px; fill: currentColor; margin-bottom: 8px; }
.type-label { font-weight: 700; font-size: 14px; }
.btn-glow:hover { box-shadow: 0 0 20px rgba(31, 95, 166, 0.4); }

/* --- Refined Save Passport UI --- */
.custody-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr);  }

.custody-timeline-mini { position: relative; padding-left: 32px; }
.custody-timeline-mini::before { content: ''; position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.custody-timeline-item { position: relative; padding-bottom: 24px; display: block; }
.timeline-marker { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--surface); background: var(--muted); z-index: 1; box-shadow: 0 0 0 2px var(--border); }
.timeline-marker.is-in, .timeline-marker.is-success { background: var(--success); box-shadow: 0 0 0 2px var(--success-soft); }
.timeline-marker.is-out, .timeline-marker.is-danger { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-soft); }
.timeline-content { background: var(--surface); padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); transition: all 0.2s; }
.custody-timeline-item:hover .timeline-content { border-color: var(--primary-soft); box-shadow: var(--shadow-xs); }
.timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.timeline-header strong { font-size: 13px; color: var(--text); }
.timeline-body p { margin: 0; font-size: 13px; color: var(--muted-strong); }

.btn-secondary { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.btn-secondary:hover { background: #e2e8f0; color: #1e293b; }

.custody-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

.expiry-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    min-width: unset;
    transition: all 0.2s ease;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(31,95,166,0.1);
    cursor: pointer;
}

.expiry-action-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(31,95,166,0.15);
    background: var(--primary);
    color: var(--surface);
}

.status-badge-flex {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 11px;
    white-space: nowrap;
}

.status-badge-flex.b-rejected {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid rgba(198,40,40,0.1);
}

.status-badge-flex.b-pending {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid rgba(217,119,6,0.1);
}

.status-badge-flex.b-approved {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid rgba(46,125,50,0.1);
}

.status-icon-warn {
    color: #f59e0b;
    font-size: 14px;
}

.status-icon-danger {
    color: #ef4444;
    font-size: 14px;
}

.report-table td {
    vertical-align: middle;
    padding: 12px 16px;
}

.company-name-bold {
    font-weight: 700;
    color: var(--text);
    font-size: 13.5px;
    display: block;
    margin-bottom: 2px;
}

.doc-label-sub {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

/* Mobile Responsiveness & Adaptive UI */

/* 1. Sidebar Toggle for Mobile */
@media (max-width: 992px) {
    .app-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 1001; /* Ensure it's above overlay */
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 20px 0 50px rgba(0,0,0,0.1);
        background: white;
        width: 280px;
        display: flex !important; /* Force display on mobile when active */
    }

    .app-sidebar.active {
        left: 0;
    }

    .app-main {
        margin-left: 0 !important;
        padding: 12px !important;
    }

    .workspace-banner-mobile {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }
}

/* 2. Responsive Table to Cards Conversion */
@media (max-width: 768px) {
    .report-table thead, 
    .data-table thead {
        display: none; /* Hide headers on mobile */
    }

    .report-table tr, 
    .data-table tr {
        display: block;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        margin-bottom: 16px;
        padding: 12px;
        box-shadow: var(--shadow-xs);
    }

    .report-table td, 
    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--line-soft);
        text-align: right;
    }

    .report-table td:last-child, 
    .data-table td:last-child {
        border-bottom: 0;
        justify-content: center;
        padding-top: 12px;
    }

    /* Add labels before data using data-label attribute */
    .report-table td::before, 
    .data-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--muted);
        text-align: left;
        font-size: 12px;
        text-transform: uppercase;
    }

    /* 3. Stats Grid Adjustment */
    .stats {
        grid-template-columns: 1fr 1fr !important; /* 2 columns on mobile */
    }

    /* 4. Toolbar Stack */
    .toolbar, .table-page-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .toolbar > *, .table-page-toolbar > * {
        width: 100% !important;
    }

    .portal-supervisor-summary{
        grid-template-columns:1fr;
    }

    .portal-supervisor-header{
        flex-direction:column;
    }

    .portal-supervisor-permission-toolbar{
        align-items:stretch;
    }

    .portal-supervisor-toolbar-actions{
        width:100%;
    }

    .portal-supervisor-toolbar-actions select,
    .portal-supervisor-toolbar-actions .btn{
        width:100%;
    }

    .portal-supervisor-permission-grid{
        grid-template-columns:1fr;
    }

    .portal-supervisor-permission-summary{
        grid-template-columns:1fr;
    }

    .portal-supervisor-team-list{
        grid-template-columns:1fr;
        max-height:260px;
    }
    
    .workspace-banner-copy h2 {
        font-size: 18px;
    }
    
    .workspace-banner-meta {
        display: none; /* Hide search/notif in banner to save space, can be moved to menu */
    }
}

@media (max-width: 480px) {
    .stats {
        grid-template-columns: 1fr !important; /* 1 column on very small screens */
    }
}

/* Final Mobile Polish - Compact Header & Cards */
@media (max-width: 768px) {
    /* 1. Shrink the massive white header */
    .workspace-banner {
        padding: 10px 15px !important;
        margin-bottom: 10px !important;
        min-height: auto !important;
    }

    .workspace-banner-copy h2, 
    .workspace-banner-copy p, 
    .workspace-context {
        display: none !important; /* Hide redundant text on mobile */
    }

    .workspace-banner-main {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .workspace-brand-wordmark {
        height: 24px !important; /* Make logo smaller on mobile */
    }

    /* 2. Compact Stats Cards */
    .stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Force 2 columns */
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .stat {
        padding: 10px !important;
        min-height: auto !important;
    }

    .stat-value {
        font-size: 20px !important;
        margin-bottom: 2px !important;
    }

    .stat-label {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    .helper-text {
        font-size: 10px !important;
    }

    /* 3. Global Adjustments */
    .section-shell {
        padding: 10px !important;
        gap: 10px !important;
    }

    .app-main {
        padding-top: 5px !important;
    }
}

/* --- Save Passport (New UI) --- */
.custody-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.custody-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
    border-radius: var(--radius-lg);
}

.stat-icon-shell {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.tone-primary .stat-icon-shell { background: var(--primary-soft); color: var(--primary); }
.tone-warning .stat-icon-shell { background: var(--warning-soft); color: var(--warning); }
.tone-info .stat-icon-shell { background: var(--surface-tint); color: var(--primary-strong); }

.stat-copy { display: grid; gap: 4px; }
.stat-main { display: flex; align-items: baseline; gap: 8px; }
.stat-trend { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.trend-up { background: var(--success-soft); color: var(--success); }

.custody-row .emp-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--surface-tint);
    color: var(--primary);
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custody-row .emp-name { font-weight: 700; color: var(--text); font-size: 14px; }
.custody-row .emp-sub { font-size: 11px; color: var(--muted); }

.text-mono { font-family: 'SF Mono', 'Fira Code', monospace; letter-spacing: 0.05em; font-weight: 500; }
.badge-pill { border-radius: 999px; padding: 4px 12px; }

.row-actions { display: flex; gap: 4px; }
.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--muted);
}

.btn-icon:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary-soft);
    
}

.custody-stat-card {
    min-height: 120px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s;
}

.custody-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.stat-icon-shell {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-app);
    flex: none;
}

.stat-icon-shell svg { width: 32px; height: 32px; }

.tone-primary .stat-icon-shell { background: #e0e7ff; color: #4338ca; }
.tone-warning .stat-icon-shell { background: #fef3c7; color: #d97706; }
.tone-info .stat-icon-shell { background: #dcfce7; color: #15803d; }

.stat-label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); color: var(--text); line-height: 1; }

.recent-tx-card {
    margin-top: 30px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.section-title-modern {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-strong);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title-modern::before {
    content: '';
    width: 4px;
    height: 20px;
    background: var(--primary);
    border-radius: 2px;
}

.emp-avatar-sm {
    background: linear-gradient(135deg, var(--primary-soft), var(--surface)) !important;
    border: 1px solid var(--primary-soft);
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }

/* Save Passport Pro Features - Premium Redesign */
.filter-bar-pro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 40px rgba(31, 38, 135, 0.08);
  margin-bottom: 24px;
  align-items: flex-end;
  position: relative;
  z-index: 100; /* Ensure it stays above the table */
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding-left: 2px;
}

.filter-bar-pro input, 
.filter-bar-pro select {
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #f1f5f9;
  background: #f8fafc;
  padding: 0 16px;
  font-size: 14px;
  color: #334155;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.filter-bar-pro input:hover, 
.filter-bar-pro select:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.filter-bar-pro input:focus, 
.filter-bar-pro select:focus {
  background: white;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
  outline: none;
}

.filter-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  min-width: 240px;
}

.column-picker-wrap {
  position: relative;
}

.column-picker-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  padding: 18px;
  z-index: 1000;
  min-width: 260px; /* Increased width */
  display: none;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(15px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.column-picker-menu.show {
  display: block;
}

.column-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
  color: #475569;
  white-space: nowrap; /* Prevent text cutting */
}

.column-item:hover {
  background: #eff6ff;
  color: #2563eb;
}

.column-item input {
  width: 18px;
  height: 18px;
  accent-color: #3b82f6;
  cursor: pointer;
}

.search-highlight {
  background: #fef08a;
  color: #854d0e;
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-export {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: white !important;
  border: none !important;
  padding: 0 20px !important;
  height: 44px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  letter-spacing: 0.5px !important;
}

.btn-secondary-glass {
  background: white !important;
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  height: 44px !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  font-weight: 600 !important;
}

/* Fix Stats Cards Icons */
.custody-stat-card .stat-icon-shell {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custody-stat-card .stat-icon-shell svg {
  width: 32px;
  height: 32px;
}













/* Timeline override fix */
.custody-timeline-item { position: relative; padding-bottom: 24px; display: block; }
.custody-timeline-item:hover .timeline-content { border-color: var(--primary-soft); box-shadow: var(--shadow-xs); }




/* Premium Alert Components */
.premium-alert {
  background: linear-gradient(135deg, #fff5f5 0%, var(--surface) 100%);
  border: 1px solid #fee2e2;
  border-left: 6px solid #ef4444;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(239, 68, 68, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
  transition: var(--transition-fast);
}

/* Scheduled report exclusions and recipients */
#modal-scheduled-report .scheduled-modal {
  max-width: min(840px, 96vw);
  background: var(--bg-app);
  padding: 0;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: var(--shadow-strong);
  border-radius: var(--radius-xl);
}

#modal-scheduled-report .scheduled-modal-head {
  padding: 24px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#modal-scheduled-report .scheduled-modal-title-wrap {
  display: grid;
  gap: 4px;
}

#modal-scheduled-report .scheduled-modal h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

#modal-scheduled-report .scheduled-modal-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

#modal-scheduled-report .scheduled-preview-btn {
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-weight: 600;
  transition: all var(--transition-fast);
}

#modal-scheduled-report .scheduled-preview-btn:hover {
  background: var(--primary);
  color: var(--surface);
}

#modal-scheduled-report .scheduled-modal-body {
  padding: 24px 32px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#modal-scheduled-report .scheduled-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast);
}

#modal-scheduled-report .scheduled-card:hover {
  border-color: var(--border-strong);
}

#modal-scheduled-report .scheduled-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#modal-scheduled-report .scheduled-section-label svg {
  color: var(--primary);
  opacity: 0.8;
}

#modal-scheduled-report .form-row {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  background: transparent;
  border: none;
}

#modal-scheduled-report .scheduled-grid-2 { grid-template-columns: 1fr 1fr; }
#modal-scheduled-report .scheduled-grid-4 { grid-template-columns: repeat(4, 1fr); }
#modal-scheduled-report .scheduled-full-row { grid-template-columns: 1fr; }
#modal-scheduled-report .scheduled-exclude-row { grid-template-columns: repeat(3, 1fr); gap: 12px; }

#modal-scheduled-report .form-group {
  display: grid;
  gap: 6px;
}

#modal-scheduled-report .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-strong);
}

#modal-scheduled-report .form-group input,
#modal-scheduled-report .form-group select,
#modal-scheduled-report .form-group textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 14px;
  width: 100%;
  transition: all var(--transition-fast);
  background: var(--surface-2);
}

#modal-scheduled-report .form-group input:focus,
#modal-scheduled-report .form-group select:focus,
#modal-scheduled-report .form-group textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

#modal-scheduled-report .scheduled-indicator {
  margin: 0 32px 16px;
  padding: 10px 16px;
  background: var(--success-soft);
  color: var(--success) !important;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

#modal-scheduled-report .scheduled-exclude-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

#modal-scheduled-report .scheduled-switch-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 0;
}

#modal-scheduled-report .scheduled-switch-wrap input { display: none; }

#modal-scheduled-report .scheduled-switch-ui {
  width: 44px;
  height: 24px;
  background: var(--border-strong);
  border-radius: 20px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#modal-scheduled-report .scheduled-switch-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#modal-scheduled-report .scheduled-switch-wrap input:checked + .scheduled-switch-ui {
  background: var(--primary);
}

#modal-scheduled-report .scheduled-switch-wrap input:checked + .scheduled-switch-ui::after {
  left: calc(100% - 21px);
}

#modal-scheduled-report .scheduled-switch-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

#modal-scheduled-report .scheduled-footer-actions {
  padding: 20px 32px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#modal-scheduled-report .btn-save-scheduled {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
  color: var(--surface);
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(31, 95, 166, 0.2);
}

#modal-scheduled-report .btn-save-scheduled:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(31, 95, 166, 0.3);
}

#modal-scheduled-report .scheduled-exclude-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#modal-scheduled-report .scheduled-exclude-chip {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--primary);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

#modal-scheduled-report .scheduled-exclude-chip:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

#modal-scheduled-report .report-dropdown-host {
  position: relative;
  width: 100%;
}

#modal-scheduled-report .report-dropdown-trigger {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

#modal-scheduled-report .report-dropdown-trigger:hover {
  background: var(--surface);
  border-color: var(--primary);
}

#modal-scheduled-report .report-filter-trigger-value {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}

#modal-scheduled-report .report-filter-trigger-value.is-empty {
  color: var(--muted);
}

#modal-scheduled-report .report-filter-trigger-caret {
  font-size: 10px;
  color: var(--muted);
  transition: transform var(--transition-fast);
}

#modal-scheduled-report .report-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px; /* Fixed width to prevent overlapping/cramping */
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#modal-scheduled-report .report-dropdown-menu.hidden {
  display: none !important;
}

#modal-scheduled-report .report-dropdown-search {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-1) !important;
  width: 100%;
}

#modal-scheduled-report .report-dropdown-actions {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}

#modal-scheduled-report .report-dropdown-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#modal-scheduled-report .report-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition-fast);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

#modal-scheduled-report .report-dropdown-item:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

#modal-scheduled-report .report-dropdown-item.is-selected {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

#modal-scheduled-report .scheduled-exclude-chip strong {
  margin-left: 4px;
  opacity: 0.6;
  font-size: 14px;
}

#modal-scheduled-report .scheduled-email-section {
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  min-height: auto;
  visibility: visible !important;
}

#modal-scheduled-report .scheduled-email-section .scheduled-section-label {
  padding: 20px 20px 10px;
  margin-bottom: 0;
}

#modal-scheduled-report .scheduled-composer-frame {
  border: 1px solid var(--border);
  border-left: none;
  border-right: none;
  background: var(--surface);
  display: flex !important;
  flex-direction: column !important;
}

#modal-scheduled-report .scheduled-composer-row {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  min-height: 46px;
  background: var(--surface);
}

#modal-scheduled-report .scheduled-composer-label {
  width: 80px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-strong);
  flex-shrink: 0;
}

#modal-scheduled-report .scheduled-recipient-input-wrap,
#modal-scheduled-report .scheduled-subject-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#modal-scheduled-report .scheduled-recipient-input-wrap textarea,
#modal-scheduled-report .scheduled-subject-input-wrap input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  min-height: unset !important;
  font-weight: 500;
  width: 100% !important;
  display: block !important;
}

#modal-scheduled-report .scheduled-recipient-input-wrap .field-icon {
  color: var(--muted);
  opacity: 0.6;
}

#modal-scheduled-report .scheduled-add-me-btn {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

#modal-scheduled-report .scheduled-add-me-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

#modal-scheduled-report .scheduled-variable-toolbar {
  padding: 10px 20px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}

#modal-scheduled-report .toolbar-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-strong);
  text-transform: uppercase;
  margin-right: 4px;
}

#modal-scheduled-report .variable-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

#modal-scheduled-report .variable-pill:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  transform: translateY(-1px);
}

#modal-scheduled-report .scheduled-email-section .scheduled-help-text {
  padding: 12px 20px;
  background: var(--bg-app);
  border-top: 1px solid var(--border);
}

#modal-scheduled-report .scheduled-subject-input-wrap input,
#modal-scheduled-report .scheduled-recipient-input-wrap textarea {
  width: 100% !important;
  color: var(--text) !important;
  font-size: 14px !important;
}

#modal-scheduled-report .scheduled-subject-input-wrap input::placeholder,
#modal-scheduled-report .scheduled-recipient-input-wrap textarea::placeholder,
#modal-scheduled-report .scheduled-body-input-wrap textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.7;
}

#modal-scheduled-report .scheduled-body-input-wrap {
  background: var(--surface);
  min-height: 200px;
}

#modal-scheduled-report .scheduled-body-input-wrap textarea {
  width: 100% !important;
  min-height: 200px !important;
  border: none !important;
  padding: 24px 20px !important;
  font-family: inherit;
  font-size: 15px !important;
  line-height: 1.6;
  color: var(--text);
  background: transparent !important;
  display: block !important;
  resize: vertical;
}

@media (max-width: 800px) {
  #modal-scheduled-report .scheduled-grid-4,
  #modal-scheduled-report .scheduled-exclude-row {
    grid-template-columns: 1fr 1fr;
  }
  
  #modal-scheduled-report .report-dropdown-menu {
    width: 100%; /* Full width on smaller screens */
  }
}

@media (max-width: 600px) {
  #modal-scheduled-report .scheduled-grid-2,
  #modal-scheduled-report .scheduled-grid-4,
  #modal-scheduled-report .scheduled-exclude-row,
  #modal-scheduled-report .scheduled-delivery-row {
    grid-template-columns: 1fr;
  }
  
  #modal-scheduled-report .scheduled-modal-head,
  #modal-scheduled-report .scheduled-footer-actions {
    padding: 16px;
  }
  
  #modal-scheduled-report .scheduled-modal-body {
    padding: 16px;
  }
}
.premium-alert:hover {
  box-shadow: 0 12px 36px rgba(239, 68, 68, 0.12);
  transform: translateY(-2px);
}
.premium-alert-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(239, 68, 68, 0.1);
  background: rgba(239, 68, 68, 0.02);
}
.premium-alert-title {
  color: #991b1b;
  font-weight: 700;
  font-family: var(--font-brand);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.premium-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #ef4444;
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}
.premium-alert-body {
  padding: 24px;
}
.premium-alert-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}
.premium-alert-table th {
  text-align: left;
  padding: 0 12px 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #b91c1c;
  letter-spacing: 0.05em;
}
.premium-alert-table td {
  padding: 16px 12px;
  background: white;
  border-top: 1px solid #fee2e2;
  border-bottom: 1px solid #fee2e2;
}
.premium-alert-table td:first-child {
  border-left: 1px solid #fee2e2;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-weight: 600;
  color: #111827;
}
.premium-alert-table td:last-child {
  border-right: 1px solid #fee2e2;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: right;
}



/* Premium Vertical Timeline */
.v-timeline {
  position: relative;
  padding: 20px 0;
  max-width: 600px;
  margin: 0 auto;
}
.v-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}
.v-timeline-item {
  position: relative;
  padding-left: 50px;
  margin-bottom: 30px;
}
.v-timeline-dot {
  position: absolute;
  left: 12px;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 0 0 2px #e5e7eb;
  z-index: 1;
}

/* Dashboard Modernization */
.dashboard-hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.hero-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.hero-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-soft);
}

.hero-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  margin-bottom: 4px;
}

.hero-stat-card.tone-success .hero-stat-icon { background: #ecfdf5; color: #10b981; }
.hero-stat-card.tone-warning .hero-stat-icon { background: #fffbeb; color: #f59e0b; }
.hero-stat-card.tone-danger .hero-stat-icon { background: #fef2f2; color: #ef4444; }
.hero-stat-card.tone-info .hero-stat-icon { background: #eff6ff; color: #3b82f6; }

.hero-stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.hero-stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-strong);
}

.hero-stat-trend {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trend-up { color: #10b981; }
.trend-down { color: #ef4444; }

.dashboard-grid-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .dashboard-grid-main { grid-template-columns: 1fr; }
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.dashboard-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-card-head h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.dashboard-alert-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-alert-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.dashboard-alert-item:hover {
  background: var(--surface);
  border-color: var(--primary-soft);
  transform: translateX(4px);
}

.alert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.alert-dot.is-danger { background: var(--danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }
.alert-dot.is-warning { background: var(--warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1); }

.alert-info-main {
  flex: 1;
}

.alert-info-main strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.alert-info-main span {
  font-size: 12px;
  color: var(--muted);
}

.alert-badge-days {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
}

.alert-badge-days.is-danger { background: #fee2e2; color: var(--danger); }
.alert-badge-days.is-warning { background: #fef3c7; color: #92400e; }

.v-timeline-dot.is-in { background: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2); }
.v-timeline-dot.is-out { background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); }
.v-timeline-content {
  background: white;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: var(--transition-fast);
}
.v-timeline-item:hover .v-timeline-content {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateX(4px);
}
.v-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.v-timeline-type {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}
.v-timeline-type.is-in { background: #ecfdf5; color: #065f46; }
.v-timeline-type.is-out { background: #fef2f2; color: #991b1b; }
.v-timeline-date {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}
.v-timeline-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
  font-size: 14px;
}
.v-timeline-note {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;
}
.v-timeline-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}



/* Passport Custody Premium Styling */
.filter-bar-pro {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}
.filter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.filter-group input, .filter-group select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  transition: var(--transition-fast);
  background: white;
}
.filter-group input:focus, .filter-group select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(31, 95, 166, 0.1);
  outline: none;
}
.custody-row:hover td {
  background: var(--surface-tint) !important;
}
.emp-avatar-sm {
  width: 32px;
  height: 32px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}
.btn-icon:hover {
  background: var(--surface-3);
  color: var(--primary);
}
.btn-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}


.premium-thead th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 12px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.text-mono { font-family: var(--font-mono); font-size: 12px; }


.custody-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.custody-stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-xs);
}
.custody-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.custody-stat-card .stat-icon-shell {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--primary);
}
.custody-stat-card.tone-primary .stat-icon-shell { background: var(--primary-soft); color: var(--primary); }
.custody-stat-card.tone-danger .stat-icon-shell { background: var(--danger-soft); color: var(--danger); }
.custody-stat-card.tone-info .stat-icon-shell { background: var(--accent-soft); color: var(--accent); }
.custody-stat-card .stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted-strong);
  display: block;
  margin-bottom: 4px;
}
.custody-stat-card .stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-brand);
}
.stat-trend {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}
.trend-up { background: var(--success-soft); color: var(--success); }



/* Calendar Premium Styling */
.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--surface-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.calendar-toolbar h3 {
  flex: 1;
  text-align: center;
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
.calendar-grid {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}
.calendar-weekday {
  text-align: center;
  padding: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted-strong);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.calendar-cell {
  min-height: 100px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.calendar-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--primary-soft);
  background: var(--surface-2);
}
.calendar-cell.is-today {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.calendar-cell.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
}
.calendar-cell.is-weekend {
  background: #fcfdfe;
}
.calendar-day {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface-3);
  transition: var(--transition-fast);
}
.calendar-cell.is-today .calendar-day {
  background: var(--primary);
  color: white;
}
.calendar-cell.is-selected .calendar-day {
  background: var(--accent);
  color: white;
}
.calendar-signals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.calendar-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-badge.is-leave { background: var(--primary-soft); color: var(--primary); border: 1px solid rgba(31, 95, 166, 0.1); }
.calendar-badge.is-expiry { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(198, 40, 40, 0.1); }
.calendar-badge.is-company { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(185, 137, 44, 0.1); }
.calendar-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.calendar-info-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.calendar-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}



/* Calendar Pro Layout Improvements */
.calendar-layout-pro {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.calendar-main-col {
  flex: 1;
  min-width: 0;
}
.calendar-side-col {
  width: 420px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
}
@media (max-width: 1280px) {
  .calendar-layout-pro {
    flex-direction: column;
  }
  .calendar-side-col {
    width: 100%;
    position: static;
  }
}
.calendar-info-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.calendar-info-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}
.calendar-section-title {
  margin-top: 16px;
  padding: 6px 12px;
  background: var(--surface-3);
  border-radius: 8px;
  font-size: 11px;
  color: var(--muted-strong);
}
.leave-item {
  padding: 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--border);
  transition: var(--transition-fast);
}
.leave-item:hover {
  border-color: var(--primary-soft);
  box-shadow: var(--shadow-xs);
}



/* Sidebar Event List Refinements */
.leave-item {
  position: relative;
  padding-left: 20px !important;
  overflow: hidden;
}
.leave-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--primary);
  opacity: 0.8;
}
.leave-item.is-expiry::before { background: var(--danger); }
.leave-item.is-company::before { background: var(--gold); }

.event-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--primary);
  flex-shrink: 0;
}
.event-content {
  flex: 1;
  min-width: 0;
}
.event-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.calendar-info-header {
  padding: 16px;
  background: linear-gradient(135deg, var(--surface-3), white);
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.calendar-date-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calendar-date-display .day-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-strong);
}
.calendar-date-display .full-date {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

/* Email Preview Modal */
.email-preview-modal {
  background: var(--bg-app);
  padding: 0;
  overflow: hidden;
  border: none;
  box-shadow: var(--shadow-strong);
  border-radius: var(--radius-xl);
}

.email-preview-header {
  padding: 20px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.email-preview-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.btn-close-preview {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.email-preview-body {
  padding: 24px;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preview-field {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.preview-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted-strong);
  width: 60px;
}

.preview-value.subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.preview-content-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
}

.preview-message {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  flex: 1;
  margin-bottom: 30px;
}

.preview-attachment-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.preview-attachment-box svg {
  color: var(--primary);
}

.attachment-info {
  display: flex;
  flex-direction: column;
}

.attachment-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.attachment-size {
  font-size: 11px;
  color: var(--muted);
}

/* --- Modern Employee Profile View --- */
.profile-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
}

.profile-action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-identity-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: linear-gradient(145deg, var(--surface) 0%, #f6f9fc 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.profile-identity-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.profile-avatar-large {
  width: 90px;
  height: 90px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 100%);
  color: var(--primary);
  font-size: 32px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(31,95,166,0.12);
  flex: none;
}

.profile-main-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.profile-main-info h2 {
  margin: 0;
  font-size: 26px;
  color: var(--text);
  letter-spacing: -0.03em;
  font-weight: 800;
}

.profile-identity-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.profile-main-info p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 14px;
}

.profile-main-info p svg {
  color: var(--primary);
}

.profile-status-badge {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-2);
  color: var(--muted-strong);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.profile-status-badge.is-active {
  background: var(--success-soft);
  color: var(--success);
  border-color: #c8e6c9;
}

.profile-status-badge.is-archived {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: #ffcdd2;
}

.profile-tabs-nav {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  box-shadow: var(--shadow-xs);
}

.profile-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted-strong);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.profile-tab-btn:hover {
  background: var(--bg-1);
  color: var(--primary);
}

.profile-tab-btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
}

.profile-content-area {
  min-height: 300px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.profile-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(17,34,68,0.03);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.profile-info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.profile-info-card h4 {
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
}

.profile-info-card h4 svg {
  color: var(--primary);
}

.profile-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.profile-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.profile-info-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.profile-info-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}


/* Document Profile Additions */
.profile-progress-wrapper { width: 100%; }
.profile-progress-bar { width: 100%; height: 6px; background: var(--bg-1); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.profile-progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.5s ease; }
.profile-info-card[onclick]:hover { border-color: var(--primary) !important; background: #eff6ff !important; }

/* =====================================================
   COMPANIES PAGE — MISSING LAYOUT CLASSES
   ===================================================== */

/* KPI grid used on both the Companies list summary
   and inside the company detail stat row */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

/* Inner flex layout inside each hero-stat-card
   (icon sits beside value+label) */
.hero-stat-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}

/* Horizontal group of action buttons inside
   the company document table rows */
.company-doc-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Body wrapper inside the company detail card
   — gives consistent vertical spacing */
.company-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.company-actions-area {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin-left: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.company-key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 18px;
}

.company-key-row {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  min-width: 0;
}

.company-key-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.company-key-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .company-actions-area {
    margin-left: 0;
    justify-content: flex-start;
  }

  .company-key-grid {
    grid-template-columns: 1fr;
  }
}
/* --- FINAL PREMIUM MOBILE UI ENHANCEMENTS --- */
/* --- MEDIUM SCREEN OPTIMIZATION (SMALL LAPTOPS) --- */
@media (max-width: 1280px) and (min-width: 769px) {
    .app-shell-reskin {
        grid-template-columns: 88px 1fr;
        gap: 12px;
    }

    .app-sidebar {
        padding: 22px 10px;
    }

    .app-sidebar-wordmark, .app-sidebar-caption, .app-nav-link span:not(.app-nav-link-icon), .app-sidebar-profile .app-profile-copy {
        display: none;
    }

    .app-nav-link {
        justify-content: center;
        padding: 8px;
    }

    .app-nav-link-icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }
}

/* --- FINAL PREMIUM MOBILE UI ENHANCEMENTS --- */
@media (max-width: 768px) {
    .app-shell-reskin {
        grid-template-columns: 1fr;
        display: block;
    }

    /* 1. Sidebar Modern Drawer */
    .app-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px;
        height: 100vh;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 10000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 20px !important;
    }

    .app-sidebar.active {
        left: 0;
        box-shadow: 20px 0 50px rgba(0,0,0,0.1);
    }

    .app-main {
        padding: 10px;
    }
    
    .workspace-banner {
        padding: 12px 16px;
    }

    .app-sidebar-nav {
        padding: 20px 0 !important;
    }

    .app-nav-link {
        padding: 14px 18px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
    }

    /* 2. Banner Optimization */
    .workspace-banner {
        border-bottom: 1px solid var(--att-border) !important;
        background: white !important;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .workspace-banner-copy h2 {
        display: block !important; /* Re-enable title */
        font-size: 16px !important;
        margin: 0;
    }

    .workspace-banner-copy p, .workspace-context {
        display: none !important;
    }

    /* 3. Action Bar / Top Bar */
    .workspace-banner-meta {
        display: flex !important;
        gap: 8px;
    }

    .workspace-search-shell {
        display: none !important; /* Hide search on mobile header to save space */
    }

    /* 4. Employee Attendance Specific */
    .attendance-hub-container {
        padding-top: 10px !important;
    }

    .shift-timer-display {
        font-size: 48px !important;
        margin: 20px 0 !important;
    }

    /* 5. Generic Table Fix for Mobile */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -10px;
        padding: 0 10px;
    }

    /* Floating Navigation Trigger */
    .workspace-nav-trigger {
        width: 44px;
        height: 44px;
        background: var(--bg-app);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
    }
}
.stat:focus-visible,.filter-chip:focus-visible,.day-chip:focus-visible,.dash-list-item:focus-visible,.dash-action-btn:focus-visible,.quick-filter-btn:focus-visible,.report-dropdown-item:focus-visible,.toast-close:focus-visible,.pagination button:focus-visible,.alert-action-btn:focus-visible,.alert-dismiss-btn:focus-visible,.workspace-icon-btn:focus-visible,.workspace-user-card:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,95,166,.18)}

/* --- Employee Custody Redesign --- */
.employee-custody-shell{display:grid;gap:20px;max-width:1260px;margin-inline:auto}
.employee-custody-hero,.employee-custody-profile-hero,.employee-custody-side-card,.employee-custody-document-card,.employee-custody-summary-card,.employee-custody-modal-panel,.employee-custody-modal-head-note{background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-sm)}
.employee-custody-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);gap:18px;padding:24px;background:radial-gradient(circle at top right,rgba(31,95,166,.10),transparent 34%),linear-gradient(180deg,var(--surface),var(--primary-subtle))}
.employee-custody-hero-copy,.employee-custody-profile-copy{display:grid;gap:10px}
.employee-custody-kicker{display:inline-flex;width:fit-content;padding:6px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.employee-custody-hero h2,.employee-custody-profile h3{margin:0;color:var(--text);font-family:'Outfit','Inter',sans-serif;letter-spacing:-.03em}
.employee-custody-hero h2{font-size:clamp(28px,3vw,40px);line-height:1.05}
.employee-custody-profile h3{font-size:clamp(22px,2.2vw,30px);line-height:1.08}
.employee-custody-hero p,.employee-custody-profile p,.employee-custody-modal-head p{margin:0;max-width:68ch;color:var(--muted);line-height:1.65}
.employee-custody-hero-actions,.employee-custody-profile-actions{display:flex;flex-wrap:wrap;gap:10px}
.employee-custody-hero-panel{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
.employee-custody-panel-card,.employee-custody-summary-card{padding:16px;display:grid;gap:6px}
.employee-custody-panel-card{background:rgba(255,255,255,.72);border:1px solid var(--border);border-radius:18px}
.employee-custody-panel-card span,.employee-custody-summary-label,.employee-custody-side-title span,.employee-custody-section-head span,.employee-custody-modal-head-note span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.employee-custody-panel-card strong,.employee-custody-summary-card strong{font-size:30px;line-height:1;color:var(--text);font-family:'Outfit','Inter',sans-serif}
.employee-custody-summary-card.is-primary{background:var(--primary-soft);border-color:rgba(31,95,166,.16)}
.employee-custody-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.employee-custody-summary-card{background:var(--surface)}
.employee-custody-layout{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.employee-custody-main{display:grid;gap:16px}
.employee-custody-toolbar{display:grid;grid-template-columns:minmax(240px,1.35fr) repeat(3,minmax(170px,1fr));gap:12px;align-items:end;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm)}
.employee-custody-field{display:grid;gap:8px}
.employee-custody-field label,.employee-custody-section-head h3,.employee-custody-side-title h4,.employee-custody-modal-head h2,.employee-custody-document-identity h4,.employee-custody-empty-state h3{margin:0;font-family:'Inter',system-ui,sans-serif}
.employee-custody-field label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.employee-custody-field input,.employee-custody-field select,.employee-custody-modal-fields input,.employee-custody-modal-fields select,.employee-custody-modal-panel textarea{min-height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);padding:10px 12px;color:var(--text)}
.employee-custody-field input:focus,.employee-custody-field select:focus,.employee-custody-modal-fields input:focus,.employee-custody-modal-fields select:focus,.employee-custody-modal-panel textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.employee-custody-toolbar-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.employee-custody-doc-list,.employee-custody-profile-main{display:grid;gap:10px}
.employee-custody-document-card{padding:18px;display:grid;gap:14px;transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.employee-custody-document-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(31,95,166,.18)}
.employee-custody-document-card.is-compact{padding:16px}
.employee-custody-document-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.employee-custody-document-identity{display:grid;gap:8px}
.employee-custody-document-identity h4{font-size:18px;color:var(--text)}
.employee-custody-document-identity p{margin:0;color:var(--muted);font-size:13px}
.employee-custody-document-identity p span{color:var(--muted-strong)}
.employee-custody-doc-badges{display:flex;flex-wrap:wrap;gap:8px}
.employee-custody-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;line-height:1}
.employee-custody-chip.tone-primary{background:var(--primary-soft);color:var(--primary)}
.employee-custody-chip.tone-success{background:var(--success-soft);color:var(--success)}
.employee-custody-chip.tone-warning{background:var(--warning-soft);color:var(--warning)}
.employee-custody-chip.tone-info{background:var(--primary-subtle);color:var(--primary)}
.employee-custody-document-meta{display:grid;grid-template-columns:repeat(2,minmax(80px,1fr));gap:10px;min-width:190px}
.employee-custody-document-meta div,.employee-custody-summary-card{background:var(--primary-subtle);border:1px solid rgba(31,95,166,.10);border-radius:16px}
.employee-custody-document-meta div{padding:12px;display:grid;gap:4px}
.employee-custody-document-meta span{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.employee-custody-document-meta strong{font-size:18px;line-height:1;color:var(--text);font-family:'Outfit','Inter',sans-serif}
.employee-custody-document-body{display:grid;gap:12px}
.employee-custody-item-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.employee-custody-item-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--border);background:var(--bg-app)}
.employee-custody-item-list li strong{color:var(--text);font-size:13px}
.employee-custody-item-list li span,.employee-custody-empty-inline{color:var(--muted);font-size:12px}
.employee-custody-item-more{justify-content:center!important;color:var(--primary)!important;font-weight:800}
.employee-custody-document-note{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.employee-custody-document-actions{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.employee-custody-actions-left,.employee-custody-actions-right{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.employee-custody-actions-right{justify-content:flex-end}
.employee-custody-file-name{display:inline-block;max-width:220px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.employee-custody-file-name.has-file{color:var(--success);font-weight:600}
.employee-custody-upload{display:none}
.employee-custody-side{display:grid;gap:14px;position:sticky;top:20px}
.employee-custody-side-card{padding:18px;display:grid;gap:12px}
.employee-custody-side-title,.employee-custody-section-head{display:grid;gap:4px}
.employee-custody-side-title h4,.employee-custody-section-head h3,.employee-custody-modal-head h2{font-size:18px;color:var(--text)}
.employee-custody-section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.employee-custody-section-head--row .btn{width:auto;white-space:nowrap}
.employee-custody-step-list{margin:0;padding-left:18px;display:grid;gap:10px;color:var(--text);line-height:1.55}
.employee-custody-progress{display:grid;gap:10px}
.employee-custody-progress-bar{width:100%;height:10px;border-radius:999px;background:var(--primary-soft);overflow:hidden}
.employee-custody-progress-bar span{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.employee-custody-progress p{margin:0;color:var(--muted);font-size:13px}
.employee-custody-side-list{display:grid;gap:8px}
.employee-custody-side-item{display:grid;gap:3px;padding:12px 14px;text-align:left;border-radius:14px;border:1px solid var(--border);background:var(--bg-app);color:var(--text);cursor:pointer;transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
.employee-custody-side-item:hover{transform:translateY(-1px);border-color:rgba(31,95,166,.18);box-shadow:var(--shadow-xs)}
.employee-custody-side-item strong{font-size:13px}
.employee-custody-side-item span{color:var(--muted);font-size:12px}
.employee-custody-empty-state{padding:24px;border-radius:20px;border:1px dashed rgba(31,95,166,.22);background:var(--primary-subtle);display:grid;gap:8px}
.employee-custody-empty-state h3{font-size:18px;color:var(--text)}
.employee-custody-empty-state p{margin:0;color:var(--muted);line-height:1.6}
.employee-custody-empty-inline{padding:10px 12px;border-radius:14px;background:var(--primary-subtle)}
.employee-custody-profile{display:grid;gap:16px}
.employee-custody-profile-hero{padding:22px;display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:16px;align-items:center;background:radial-gradient(circle at top right,rgba(31,95,166,.08),transparent 30%),linear-gradient(180deg,var(--surface),var(--primary-subtle))}
.employee-custody-stats--profile{grid-template-columns:repeat(4,minmax(0,1fr))}
.employee-custody-profile-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.62fr);gap:16px;align-items:start}
.employee-custody-profile-side{display:grid;gap:14px}
.employee-custody-fact-list,.employee-custody-mini-bars{display:grid;gap:10px}
.employee-custody-fact-list div,.employee-custody-mini-bars div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--bg-app)}
.employee-custody-fact-list span,.employee-custody-mini-bars span{color:var(--muted);font-size:12px}
.employee-custody-fact-list strong,.employee-custody-mini-bars strong{color:var(--text);font-size:13px}
.modal-maxw-1400{max-width:1400px}
.employee-custody-modal{width:min(1520px,98vw);padding:0;max-height:calc(100vh - 24px);overflow:auto}
.employee-custody-modal--xl{min-height:unset}
.employee-custody-modal-head{display:flex;justify-content:space-between;gap:16px;padding:20px 24px 8px;align-items:flex-start}
.employee-custody-modal-head-note{padding:14px 16px;display:grid;gap:4px;min-width:200px;background:var(--primary-subtle)}
.employee-custody-modal-head-note strong{color:var(--text);font-size:14px}
.employee-custody-modal-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px;padding:20px 24px 24px;align-items:start}
.employee-custody-modal-panel{padding:18px;display:grid;gap:14px;min-height:0}
.employee-custody-modal-panel--items{background:linear-gradient(180deg,var(--surface),var(--primary-subtle))}
.employee-custody-modal-panel--items .employee-custody-modal-helper{position:sticky;top:0;z-index:1}
.employee-custody-modal-grid{grid-template-columns:1fr}
.employee-custody-modal-section{display:grid;gap:10px}
.employee-custody-modal-fields{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(220px,1.1fr) minmax(180px,.9fr) minmax(280px,1.2fr);gap:12px;align-items:end}
.employee-custody-modal-fields>div{display:grid;gap:8px;min-width:0}
.employee-custody-modal-fields label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.employee-custody-modal-fields input,
.employee-custody-modal-fields select,
.employee-custody-modal-fields textarea{height:50px;min-height:50px;box-sizing:border-box}
.custody-notes-inline textarea{height:50px;min-height:50px;max-height:50px;resize:none;line-height:1.35;padding-top:12px;padding-bottom:12px}
.custody-employee-picker-shell{position:relative;display:block}
.custody-employee-picker-shell input[type="search"]{padding-right:34px;-webkit-appearance:none;appearance:none;background-image:none}
.custody-employee-picker-shell input[type="search"]::-webkit-search-decoration,
.custody-employee-picker-shell input[type="search"]::-webkit-search-cancel-button,
.custody-employee-picker-shell input[type="search"]::-webkit-search-results-button,
.custody-employee-picker-shell input[type="search"]::-webkit-search-results-decoration{display:none}
.custody-employee-chevron{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--muted);font-size:11px;line-height:1;transition:transform .15s ease,color .15s ease}
.custody-employee-picker-shell.is-open .custody-employee-chevron{transform:translateY(-50%) rotate(180deg);color:var(--primary)}
.custody-employee-options{position:absolute;left:0;right:0;top:calc(100% + 6px);width:100%;max-width:100%;box-sizing:border-box;max-height:220px;overflow:auto;overflow-x:hidden;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:6px}
.custody-employee-option{width:100%;max-width:100%;box-sizing:border-box;text-align:left;display:grid;gap:2px;padding:9px 10px;border:0;background:transparent;border-radius:8px;color:var(--text);cursor:pointer}
.custody-employee-option:hover,.custody-employee-option.is-active{background:var(--primary-subtle)}
.custody-employee-option.is-kb-active{outline:1px solid rgba(31,95,166,.35);background:var(--primary-subtle)}
.custody-employee-option small{color:var(--muted)}
.custody-employee-option em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.custody-employee-option.is-empty{cursor:default;color:var(--muted)}
.employee-custody-section-head--numbered{display:flex;align-items:flex-start;gap:12px}
.employee-custody-section-no{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--primary);color:var(--surface);font-size:12px;font-weight:800;line-height:1;margin-top:2px}
.employee-custody-modal-helper{padding:12px 14px;border-radius:14px;background:var(--bg-app);color:var(--muted);font-size:13px;line-height:1.55}
.employee-custody-item-table-head{display:grid;gap:8px;padding:10px 12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface)}
.employee-custody-item-table-head .head-line-1{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr .45fr .5fr;gap:10px}
.employee-custody-item-table-head span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.employee-custody-item-rows{display:grid;gap:12px;max-height:calc(100vh - 420px);overflow:auto;padding-right:4px}
.employee-custody-item-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr .45fr .5fr;gap:10px;align-items:end;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}
.employee-custody-item-row:hover{border-color:rgba(31,95,166,.24);box-shadow:var(--shadow-xs)}
.employee-custody-item-row button{justify-self:end;min-height:44px}
.employee-custody-item-row input{min-height:44px;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--text)}
.employee-custody-row-remove{min-width:74px;padding:8px 10px}
.employee-custody-item-actions{display:flex;justify-content:flex-start}
.employee-custody-modal-actions{padding:6px 24px 24px}
@media (max-width:1100px){
  .employee-custody-hero,.employee-custody-layout,.employee-custody-profile-grid,.employee-custody-modal-grid{grid-template-columns:1fr}
  .employee-custody-toolbar{grid-template-columns:1fr 1fr}
  .employee-custody-toolbar-actions{grid-column:1 / -1;justify-content:flex-start}
  .employee-custody-item-rows{max-height:none}
  .employee-custody-item-table-head .head-line-1,.employee-custody-item-row{grid-template-columns:1fr 1fr 1fr}
  .employee-custody-item-row button{grid-column:3}
}
@media (max-width:768px){
  .employee-custody-stats,.employee-custody-stats--profile,.employee-custody-hero-panel{grid-template-columns:1fr 1fr}
  .employee-custody-toolbar,.employee-custody-modal-fields,.employee-custody-item-row{grid-template-columns:1fr}
  .employee-custody-item-table-head{display:none}
  .employee-custody-item-row button{justify-self:stretch}
  .employee-custody-document-actions{grid-template-columns:1fr}
  .employee-custody-actions-left,.employee-custody-actions-right{flex-wrap:wrap}
  .employee-custody-actions-right{justify-content:flex-start}
  .employee-custody-document-top,.employee-custody-profile-hero,.employee-custody-modal-head{grid-template-columns:1fr;display:grid}
  .employee-custody-document-meta{grid-template-columns:1fr 1fr;min-width:0}
  .employee-custody-side{position:static}
  .employee-custody-modal{width:min(100vw - 16px, 100vw);max-height:calc(100vh - 16px)}
  .employee-custody-modal-head-note{min-width:0}
}
/* Payroll workspace */
#section-payroll .payroll-page-shell{
  display:grid;
  gap:16px;
}

#section-payroll .payroll-card{
  border:1px solid var(--border, #e2e8f0);
  border-radius:16px;
}

#section-payroll .payroll-run-summary{
  background:var(--bg-app, #f8fafc);
  border:1px solid var(--border, #e2e8f0);
  border-radius:12px;
  padding:12px;
}

#section-payroll .table-wrap {
  overflow-x: auto;
}

#section-payroll .payroll-table {
  min-width: 960px;
}

#section-payroll .payroll-table th{
  position: sticky;
  top: 0;
  z-index: 1;
}

#section-payroll .payroll-table td{
  white-space: nowrap;
}

#section-payroll .payroll-table td:last-child{
  white-space: normal;
}

@media (max-width: 900px) {
  #section-payroll .toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  #section-payroll .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Responsive Tables & Sticky Column */
.table-scroll {
  overflow-x: auto;
  position: relative;
  width: 100%;
}
.data-table, .report-table {
  width: 100%;
  border-collapse: collapse;
}
@media (min-width: 768px) {
  .table-scroll th:first-child,
  .table-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--surface) !important;
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15);
  }
  .table-scroll th:first-child {
    z-index: 12;
    background-color: #f8fbff !important;
  }
}