:root {
    --bg: #f8f9fa;
    --bg2: #ffffff;
    --bg3: #f1f3f5;
    --bg4: #e9ecef;
    --border: #dee2e6;
    --border2: #ced4da;
    --text: #212529;
    --text2: #495057;
    --text3: #6c757d;
    --accent: #2563eb;
    --accent2: #1d4ed8;
    --accent-glow: rgba(37,99,235,0.1);
    --success: #16a34a;
    --success-bg: rgba(22,163,74,0.1);
    --warn: #d97706;
    --warn-bg: rgba(217,119,6,0.1);
    --danger: #dc2626;
    --danger-bg: rgba(220,38,38,0.1);
    --info: #0284c7;
    --info-bg: rgba(2,132,199,0.1);
    --radius: 8px;
    --radius-lg: 12px;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'Consolas', 'Courier New', monospace;
    --sidebar: 260px;
    --topbar: 56px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    height: 100%;
    overflow: hidden;
  }

  #app {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }

  #sidebar {
    width: var(--sidebar);
    min-width: var(--sidebar);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    height: 100%;
  }

  #main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  /* Three real columns rather than an absolutely-positioned centre. The old
     centre block was out of flow, so the title and the action cluster grew
     underneath it and collided on anything narrower than a desktop. Each
     region now owns its track and shrinks instead of overlapping. */
  #topbar {
    height: var(--topbar);
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: grid;
    /* Equal side tracks, so the company block lands on the bar's true midpoint
       instead of being pushed along by whichever side has more in it. Plain
       1fr is minmax(auto, 1fr): the tracks share the slack, but neither can be
       squeezed below its own content, so the controls stay intact. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
    flex-shrink: 0;
    z-index: 99;
  }

  /* min-width:0 overrides the automatic minimum, which is what lets the side
     tracks shrink to match each other; without it the title's own width sets a
     floor and the centre drifts off the midpoint again. */
  #topbar-left { min-width: 0; overflow: hidden; }

  #topbar-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
    line-height: 1.25;
    gap: 2px;
  }
  #topbar-center > * { max-width: 100%; min-width: 0; }
  #page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar-company-meta { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

  #topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
  }
  #topbar-actions > * { flex-shrink: 0; }

  /* Compact pill controls for the bar. Sized against the 56px bar rather than
     inheriting the full-size form control, which was far too tall here. */
  .topbar-select,
  .toolbar-company-meta select {
    width: auto;
    height: 30px;
    padding: 0 30px 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text2);
    background-color: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    line-height: normal;
  }
  /* The centre block stacks two lines inside 56px, so its control is smaller
     again — at the single-line size the stack filled the bar edge to edge with
     no breathing room. */
  .toolbar-company-meta select {
    height: 22px;
    line-height: normal;
    font-size: 11.5px;
    padding: 0 24px 0 10px;
    /* Capped so the centre track can shrink. The longest option
       ("Current: 2026-2027 (Edit)") is otherwise a hard floor on the track
       width, and the grid resolves that by letting the columns overlap. */
    max-width: 150px;
  }
  .topbar-select:hover,
  .toolbar-company-meta select:hover {
    border-color: var(--border2);
    background-color: var(--bg3);
    color: var(--text);
  }

  #user-info {
    display: none;               /* toggled to flex once a user is known */
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
    min-width: 0;
  }
  /* A display name can be as long as the company's own name; cap it rather
     than letting it push the buttons off the bar. */
  #user-name {
    font-weight: 600;
    color: var(--text2);
    font-size: 13px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The role is the part that actually varies between sessions, so it stays
     visible after the (often redundant) display name is dropped. */
  #user-role-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent);
    background: var(--accent-glow);
    border: 1px solid var(--accent);
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
  }

  /* Progressive disclosure. A 1366px laptop cannot fit the page title, the
     company block and five controls at full width, so labels drop before
     anything is allowed to collide. Every control keeps its title/aria-label,
     so an icon-only button is still identifiable and still clickable. */
  @media (max-width: 1500px) {
    #topbar { padding: 0 16px; gap: 12px; }
    #user-name { max-width: 150px; }
  }

  @media (max-width: 1400px) {
    /* Below this the centre cannot sit on the midpoint while the name is also
       shown — there is not enough width for equal side tracks, and the shortfall
       comes out as an overlap. The name is the part that gives way: it repeats
       the company name above it, and the role badge plus the tooltip on the
       identity block still say who is signed in. */
    #user-name { display: none; }
  }

  @media (max-width: 1280px) {
    /* Button labels go first — an action is still identifiable from its icon
       plus title/aria-label. The status chip keeps its text, because an
       icon-only chip reads as an empty box rather than a state. */
    #topbar-actions .btn .btn-label { display: none; }
    #topbar-actions .btn { padding: 6px 10px; }
    .toolbar-company-name { font-size: 16px; }
    #user-name { display: none; }
  }

  @media (max-width: 1200px) {
    /* Hidden outright rather than clipped to "Dash…". The sidebar already
       highlights the active page, so nothing is actually lost. */
    #page-title { display: none; }
  }

  @media (max-width: 1150px) {
    /* The centre block itself has to give way now, or equal side tracks leave
       it wider than the space between them. The "FY: 2026-2027" caption is the
       redundant half — the selector beside it already names the year. */
    .toolbar-company-fy { display: none; }
    .toolbar-company-meta select { max-width: 150px; }
  }

  @media (max-width: 1000px) {
    .toolbar-company-meta select { max-width: 130px; }
  }

  @media (max-width: 1100px) {
    /* Below this the action cluster no longer fits an equal side track, and
       the overflow pushes back into the company block. The role badge is the
       next thing that can go: the tooltip on the identity block still carries
       the name and role. */
    #user-role-badge { display: none; }
    #user-info { padding-left: 0; border-left: none; }
  }

  @media (max-width: 900px) {
    #topbar-actions { gap: 6px; }
  }

  #content {
    flex: 1;
    padding: 24px;
    background: var(--bg);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .page {
    display: none !important;
    width: 100%;
    height: 100%;
  }

  .page.active {
    display: block !important;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .sidebar-logo { padding: 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
  .logo-icon { width: 40px; height: 40px; flex-shrink: 0; overflow: hidden; }
  .logo-icon img { width: 100%; height: 100%; object-fit: contain; }
  .logo-text { font-size: 18px; font-weight: 700; color: var(--text); }
  .logo-sub { font-size: 11px; color: var(--text3); }
  .sidebar-section { padding: 2px 0; border-radius: 8px; margin: 2px 8px; transition: background 0.25s ease; }
  .sidebar-section.expanded { background: var(--bg3); }
  .sidebar-section.no-toggle { background: none; }
  .sidebar-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text3); text-transform: uppercase; padding: 10px 14px 6px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: color 0.2s; }
  .sidebar-label:hover { color: var(--accent); }
  .sidebar-label::after { content: '▸'; font-size: 11px; transition: transform 0.25s ease; }
  .sidebar-section.expanded .sidebar-label::after { transform: rotate(90deg); }
  .sidebar-section.expanded .sidebar-label { color: var(--accent); }
  .sidebar-section.no-toggle .sidebar-label { cursor: default; }
  .sidebar-section.no-toggle .sidebar-label::after { display: none; }
  .sidebar-section .sidebar-items { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .sidebar-section.expanded .sidebar-items { max-height: 600px; }
  .sidebar-section.no-toggle .sidebar-items { max-height: none; overflow: visible; }
  .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; color: var(--text2); font-size: 14px; transition: all 0.2s; border-left: 3px solid transparent; text-decoration: none; }
  .nav-item:hover { background: var(--bg3); color: var(--text); }
  .nav-item.active { background: var(--accent-glow); color: var(--accent); border-left-color: var(--accent); }
  .nav-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
  .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); margin-top: auto; }

  .admin-tab-bar { display: none; padding: 0 24px; background: var(--bg2); border-bottom: 1px solid var(--border); gap: 0; overflow-x: auto; white-space: nowrap; flex-shrink: 0; }
  .admin-tab-bar.visible { display: flex; }
  .admin-tab { padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--text3); cursor: pointer; border: none; background: none; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
  .admin-tab:hover { color: var(--text); background: var(--bg3); }
  .admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-glow); }

  #page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text2);
    letter-spacing: 0.2px;
  }

  .toolbar-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
  }

  .toolbar-company-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .toolbar-company-fy {
    font-size: 12px;
    color: var(--text3);
    white-space: nowrap;
  }

  .card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 20px;
  }
  .card:last-child { margin-bottom: 0; }
  .card-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

  @media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    #sidebar { position: fixed; transform: translateX(-100%); transition: transform 0.3s; }
    #sidebar.open { transform: translateX(0); }
    #main { margin-left: 0; }
    /* Two tracks below tablet: the company block leads, actions follow. */
    #topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 12px; }
    #topbar-left { display: none; }
    #topbar-center { align-items: flex-start; text-align: left; }
    .toolbar-company { white-space: normal; }
    .toolbar-company-name {
      font-size: 15px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
  .stat-label { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
  .stat-value { font-size: 28px; font-weight: 800; color: var(--text); line-height: 1.2; }
  .stat-accent { color: var(--accent); }
  .stat-success { color: var(--success); }
  .stat-warn { color: var(--warn); }
  .stat-danger { color: var(--danger); }

  .form-group { margin-bottom: 16px; }
  .form-row { display: grid; gap: 16px; }
  .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .form-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 968px) {
    .form-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .form-row.cols-3 { grid-template-columns: 1fr; }
  }

  @media (max-width: 576px) {
    .form-row.cols-2, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr; }
  }

  label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; }
  input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="time"], input[type="file"],
  select, textarea {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--border2);
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg2);
  }
  input:disabled, select:disabled, textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  input::placeholder, textarea::placeholder { color: var(--text3); }

  /* Every select carries the same chevron. The native control renders a
     different arrow on each platform, so one drawn mark keeps the forms
     looking like a single system. The glyph is inlined as a data URI: the
     page blocks external stylesheet assets, and an <img> cannot live inside
     a <select> anyway. */
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236c757d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
  }
  /* Arabic flips the layout, so the chevron moves with it. */
  body.rtl select {
    padding-right: 14px;
    padding-left: 38px;
    background-position: left 14px center;
  }
  select:disabled { cursor: not-allowed; }
  /* The compact bar controls sit tighter than a form field. */
  .topbar-select { background-position: right 11px center; }
  .toolbar-company-meta select { background-position: right 9px center; background-size: 10px 7px; }
  body.rtl .topbar-select,
  body.rtl .toolbar-company-meta select {
    padding-right: 12px;
    padding-left: 30px;
    background-position: left 11px center;
  }
  /* A multiple/size select is a list, not a dropdown: no chevron, no pointer. */
  select[multiple], select[size]:not([size="1"]) {
    background-image: none;
    padding-right: 14px;
    cursor: default;
  }
  textarea { resize: vertical; min-height: 80px; }
  .checkbox-group { display: flex; align-items: center; gap: 8px; }
  .checkbox-group input[type="checkbox"] { width: auto; margin: 0; }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    white-space: nowrap;
    background: var(--bg3);
    color: var(--text);
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  .btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
  .btn-primary:hover { background: var(--accent2); }
  .btn-secondary { background: var(--bg3); color: var(--text); border-color: var(--border); }
  .btn-secondary:hover { background: var(--bg4); border-color: var(--border2); }
  .btn-success { background: var(--success); color: white; border-color: var(--success); }
  .btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
  .btn-warn { background: var(--warn); color: white; border-color: var(--warn); }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2); }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3); background: var(--bg3); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 10; }
  td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text2); }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--bg3); }
  .td-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .td-actions { text-align: right; white-space: nowrap; }
  /* A heading must sit directly over its own data. Marking a th .td-num gives
     it the same right alignment as the numbers below it, but headings keep the
     interface font rather than inheriting the tabular mono face. */
  th.td-num { font-family: inherit; font-variant-numeric: normal; }

  /* Daily Attendance dense table: 11 columns need tighter cells */
  .att-daily-table th,
  .att-daily-table td { padding: 10px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .att-daily-table td:last-child { white-space: normal; }
  .att-daily-table .badge { padding: 3px 8px; font-size: 10px; }

  /* Leave Management: 8 columns, one of which is free-text notes. Without a
     cap the notes column stretches and squeezes Balance and Actions out of
     line with their headings. */
  .lv-table th,
  .lv-table td { padding: 10px 12px; }
  .lv-table td:nth-child(7) {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lv-table th:nth-child(6),
  .lv-table td:nth-child(6) { width: 1%; white-space: nowrap; }

  .badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
  .badge-success { background: var(--success-bg); color: var(--success); }
  .badge-warn { background: var(--warn-bg); color: var(--warn); }
  .badge-danger { background: var(--danger-bg); color: var(--danger); }
  .badge-info { background: var(--info-bg); color: var(--info); }
  .badge-default { background: var(--bg4); color: var(--text2); }

  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); overflow-y: auto; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); margin: auto; }
  .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
  .modal-title { font-size: 18px; font-weight: 700; color: var(--text); }
  .modal-body { padding: 24px; overflow-y: auto; flex: 1; }
  .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0; background: var(--bg3); }
  .modal-close { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 24px; padding: 4px; border-radius: var(--radius); line-height: 1; }
  .modal-close:hover { background: var(--bg4); color: var(--text); }

  .form-section-title { font-size: 14px; font-weight: 700; margin: 24px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--border); color: var(--text); }
  .form-section-title:first-of-type { margin-top: 0; }

  .attachment-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  .attachment-item { background: var(--bg3); padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 12px; display: flex; align-items: center; gap: 8px; }
  /* The uploaded-documents list stacks full width so a long file name has
     room to truncate rather than squashing the View/Delete buttons. */
  #emp-docs-existing .attachment-item { width: 100%; margin-bottom: 6px; }

  .expiry-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    background: var(--danger-bg);
    color: var(--danger);
    margin-left: 4px;
  }

  #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
  .toast { background: var(--text); color: white; padding: 14px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 500; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: slideIn 0.3s ease; pointer-events: auto; max-width: 400px; word-wrap: break-word; }
  .toast-success { background: var(--success); }
  .toast-error { background: var(--danger); }
  .toast-warn { background: var(--warn); color: var(--text); }
  @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

  .loading { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: var(--text3); }
  .loading::after { content: ''; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 10px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--text3); }
  .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }

  .section-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
  .section-head h2 { font-size: 24px; font-weight: 700; color: var(--text); margin: 0 0 4px 0; }
  .section-head p { font-size: 14px; color: var(--text2); margin: 0; }

  .filter-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }

  /* Ambient status, not a control: no chrome, just a coloured glyph. The SVG
     inherits currentColor, so the state is carried by one colour change. */
  .file-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    line-height: 0;
    padding: 0;
    background: none;
    border: none;
  }
  .file-status.active  { color: var(--success); }
  .file-status.warning { color: var(--warn); }
  /* The tick only makes sense once a connection is established. */
  .file-status .fs-tick { opacity: 0; }
  .file-status.active .fs-tick { opacity: 1; }

  /* Announced to screen readers and shown on hover, without taking up space. */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .dept-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 4px;
    font-size: 13px;
  }

  .dept-tag button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 16px;
    line-height: 1;
    padding: 0;
    margin-left: 4px;
  }

  .payslip-editor {
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
  }

  .payslip-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .payslip-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .payslip-col-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    padding-bottom: 8px;
  }

  .payslip-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 58px 58px 34px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }

  .payslip-line.deduction-line {
    grid-template-columns: minmax(0, 1fr) 100px 34px;
  }

  .payslip-line input[type="text"],
  .payslip-line input[type="number"] {
    min-width: 0;
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    box-sizing: border-box;
    outline: none;
  }

  .payslip-line input[readonly] {
    background: var(--bg4);
    cursor: default;
  }

  .payslip-line input[type="number"] { text-align: right; }

  .payslip-line label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    white-space: nowrap;
  }

  .payslip-line label input[type="checkbox"] {
    width: auto;
    margin: 0;
  }

  .payslip-netbox {
    margin-top: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius);
    text-align: center;
    color: white;
  }

  .email-guide {
    background: var(--bg3);
    padding: 16px;
    border-radius: var(--radius);
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.6;
  }

  .email-guide code {
    background: var(--bg4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 12px;
  }

  /* The fiscal-year selector is styled entirely with the other bar controls,
     in .toolbar-company-meta select. An ID rule used to sit here restating its
     font, padding and width; being more specific it silently won, and the 4px
     vertical padding it forced left a 12px content box for 14px text, clipping
     the glyphs along the bottom. Its max-width outranked the responsive cap in
     the same way. Nothing about this control is specific enough to need an ID
     rule, so there is none — see the [9] check in tests/validate.js. */

  /* RTL Support for Arabic */
  body.rtl { direction: rtl; text-align: right; }
  body.rtl #sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--border); }
  body.rtl #main { margin-left: 0; margin-right: 240px; }
  body.rtl .nav-icon { margin-right: 0; margin-left: 8px; }
  body.rtl .modal-close { right: auto; left: 16px; }
  body.rtl .td-actions { text-align: left; }
  body.rtl .td-num { text-align: left; }
  body.rtl .toast-container { right: auto; left: 20px; }
  body.rtl .badge { margin-left: 0; margin-right: 4px; }

  /* Offline indicator */
  body.app-offline::after {
    content: 'Offline — changes will sync when reconnected';
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--warn); color: #fff; text-align: center;
    padding: 6px; font-size: 12px; z-index: 10000;
  }