:root{
    --ink:#12233F;
    --ink-2:#1E3A63;
    --paper:#F5F6F8;
    --surface:#FFFFFF;
    --line:#E4E7EC;
    --muted:#6B7280;
    --gold:#C08A2E;
    --gold-soft:#F7EEDD;
    --success:#1F7A54;
    --success-soft:#E7F5EE;
    --danger:#B3432E;
    --danger-soft:#FBEAE6;
    --pending:#8A6D1D;
    --pending-soft:#FBF3DD;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    font-family:'IBM Plex Sans Arabic', sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:'Cairo',sans-serif;}
  .mono{font-family:'IBM Plex Mono',monospace; direction:ltr; display:inline-block;}

  /* ---- App shell ---- */
  .app{display:flex; min-height:100vh;}
  .sidebar{
    width:248px; flex-shrink:0;
    background:var(--ink);
    color:#E7ECF4;
    display:flex; flex-direction:column;
    padding:22px 16px;
  }
  .brand{display:flex; align-items:center; gap:10px; padding:0 6px 22px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:18px;}
  .brand-mark{width:34px; height:34px; border-radius:8px; background:linear-gradient(155deg,var(--gold),#8f6a1f); display:flex; align-items:center; justify-content:center; font-family:'Cairo'; font-weight:800; color:var(--ink); font-size:15px;}
  .brand-name{font-family:'Cairo'; font-weight:700; font-size:14.5px; color:#fff;}
  .brand-sub{font-size:11px; color:#9FB0C9;}

  .nav-group{margin-bottom:18px;}
  .nav-label{font-size:10.5px; color:#7C8EA9; padding:0 10px 6px; letter-spacing:.04em;}
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:8px; font-size:13.5px; color:#C9D4E4;
    cursor:pointer; transition:.15s; margin-bottom:2px; font-weight:500;
  }
  .nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
  .nav-item.active{background:rgba(192,138,46,.16); color:#F1D9A8; font-weight:600;}
  .nav-item .dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; flex-shrink:0;}

  .topbar{
    height:64px; background:var(--surface); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; padding:0 26px;
  }
  .topbar-title{font-family:'Cairo'; font-weight:700; font-size:16px;}
  .topbar-title span{color:var(--muted); font-weight:400; font-size:12.5px; display:block; margin-top:1px;}
  .profile{display:flex; align-items:center; gap:10px;}
  .avatar{width:34px; height:34px; border-radius:50%; background:var(--ink-2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; font-family:'Cairo';}
  .profile-meta{text-align:right; line-height:1.25;}
  .profile-meta b{font-size:12.5px; display:block;}
  .profile-meta small{color:var(--muted); font-size:11px;}
  .m365-badge{display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:3px 8px; border-radius:6px;}

  .main{flex:1; display:flex; flex-direction:column; min-width:0;}
  .content{padding:26px 30px; flex:1;}
  .screen{display:none;}
  .screen.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

  /* ---- Cards / generic ---- */
  .grid{display:grid; gap:16px;}
  .cards-4{grid-template-columns:repeat(4,1fr);}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px;}
  .stat-label{font-size:12px; color:var(--muted); margin-bottom:8px;}
  .stat-value{font-family:'Cairo'; font-weight:800; font-size:26px;}
  .stat-value.gold{color:var(--gold);}
  .stat-value.success{color:var(--success);}
  .stat-value.danger{color:var(--danger);}

  .section-head{display:flex; align-items:center; justify-content:space-between; margin:26px 0 14px;}
  .section-head h2{font-size:16px; margin:0;}
  .btn{
    border:none; border-radius:8px; padding:9px 16px; font-family:'IBM Plex Sans Arabic'; font-weight:600;
    font-size:13px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px;
  }
  .btn-primary{background:var(--ink); color:#fff;}
  .btn-primary:hover{background:var(--ink-2);}
  .btn-gold{background:var(--gold); color:#2B1E05;}
  .btn-gold:hover{filter:brightness(1.06);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn-ghost:hover{background:var(--paper);}
  .btn-sm{padding:6px 12px; font-size:12px;}

  table{width:100%; border-collapse:collapse;}
  .table-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
  th{text-align:right; font-size:11.5px; color:var(--muted); font-weight:600; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--line);}
  td{padding:13px 16px; font-size:13px; border-bottom:1px solid var(--line);}
  tr:last-child td{border-bottom:none;}
  tr:hover td{background:#FAFBFC;}

  .badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:6px; font-size:11.5px; font-weight:600;}
  .badge-pending{background:var(--pending-soft); color:var(--pending);}
  .badge-success{background:var(--success-soft); color:var(--success);}
  .badge-danger{background:var(--danger-soft); color:var(--danger);}
  .badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}

  /* ---- Stepper (signature element) ---- */
  .stepper{display:flex; align-items:flex-start; gap:0; padding:6px 4px;}
  .step{display:flex; flex-direction:column; align-items:center; flex:1; position:relative;}
  .step-line{position:absolute; top:13px; right:50%; width:100%; height:2px; background:var(--line); z-index:0;}
  .step:first-child .step-line{display:none;}
  .step-line.done{background:var(--success);}
  .step-line.rejected{background:var(--danger);}
  .step-dot{width:26px; height:26px; border-radius:50%; background:var(--surface); border:2px solid var(--line); z-index:1; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--muted);}
  .step-dot.done{background:var(--success); border-color:var(--success); color:#fff;}
  .step-dot.current{background:var(--surface); border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft);}
  .step-dot.rejected{background:var(--danger); border-color:var(--danger); color:#fff;}
  .step-label{font-size:11px; margin-top:7px; color:var(--muted); text-align:center; max-width:90px;}
  .step-label.active{color:var(--ink); font-weight:600;}

  /* ---- Modal ---- */
  .modal-overlay{position:fixed; inset:0; background:rgba(18,35,63,.45); display:none; align-items:center; justify-content:center; z-index:50;}
  .modal-overlay.open{display:flex;}
  .modal{background:#fff; border-radius:14px; width:520px; max-width:92vw; max-height:85vh; overflow-y:auto; padding:24px;}
  .modal h3{margin:0 0 4px;}
  .modal .sub{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px;}
  .field input, .field select, .field textarea{
    width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px;
    font-family:'IBM Plex Sans Arabic'; background:var(--paper);
  }
  .field textarea{min-height:70px; resize:vertical;}
  .modal-actions{display:flex; gap:8px; justify-content:flex-start; margin-top:18px;}

  .rejector-note{background:var(--gold-soft); border:1px solid #EAD8AF; border-radius:8px; padding:10px 12px; font-size:12px; color:#5A4310; margin-top:10px;}
  .empty{text-align:center; padding:50px 20px; color:var(--muted); font-size:13px;}
  .toolbar{display:flex; gap:8px; margin-bottom:14px;}
  .chip{padding:6px 14px; border-radius:20px; font-size:12.5px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:500;}
  .chip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

  /* ---- Ring indicators (Home screen) ---- */
  .rings-row{display:flex; gap:18px;}
  .ring-card{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:30px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:.15s;}
  .ring-card:hover{box-shadow:0 6px 20px rgba(18,35,63,.08); transform:translateY(-2px);}
  .ring-wrap{width:136px; height:136px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:16px;}
  .ring-inner{position:relative; width:104px; height:104px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1;}
  .ring-inner b{font-family:'Cairo'; font-size:30px; font-weight:800; color:var(--ink);}
  .ring-title{font-size:14px; font-weight:700; color:var(--ink);}
  .ring-sub{font-size:11.5px; color:var(--muted); margin-top:3px;}

  .quick-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .quick-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; cursor:pointer; transition:.15s; display:flex; flex-direction:column; gap:10px;}
  .quick-card:hover{border-color:var(--gold); box-shadow:0 6px 16px rgba(192,138,46,.1);}
  .quick-icon{width:36px; height:36px; border-radius:9px; background:var(--gold-soft); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:17px;}
  .quick-name{font-size:13px; font-weight:700;}
  .quick-desc{font-size:11px; color:var(--muted); margin-top:-6px;}

  /* ---- Vertical timeline (tracker modal) ---- */
  .timeline{padding:4px 4px 4px 0;}
  .tl-item{display:flex; gap:12px; position:relative; padding-bottom:22px;}
  .tl-item:last-child{padding-bottom:0;}
  .tl-rail{display:flex; flex-direction:column; align-items:center; width:26px; flex-shrink:0;}
  .tl-dot{width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--muted); flex-shrink:0; z-index:1;}
  .tl-dot.done{background:var(--success); border-color:var(--success); color:#fff;}
  .tl-dot.current{background:#fff; border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft);}
  .tl-dot.rejected{background:var(--danger); border-color:var(--danger); color:#fff;}
  .tl-dot.final-ok{background:var(--ink); border-color:var(--ink); color:#fff;}
  .tl-line{flex:1; width:2px; background:var(--line); margin-top:2px;}
  .tl-line.done{background:var(--success);}
  .tl-line.rejected{background:var(--danger);}
  .tl-content{padding-top:1px;}
  .tl-label{font-size:13px; font-weight:700; color:var(--ink);}
  .tl-date{font-size:11.5px; color:var(--muted); margin-top:2px;}
  .tl-date.pending{color:var(--gold); font-weight:600;}