:root{
  --ink:#1C2B39;
  --ink-soft:#334455;
  --ink-2:#24384a;
  --paper:#EEF1EE;
  --paper-card:#FFFFFF;
  --seal:#A8763E;
  --seal-dark:#8A5F2F;
  --seal-soft:#F1E4D2;
  --green:#2F6F5E;
  --green-soft:#E1EEE9;
  --alert:#B0413E;
  --alert-soft:#F5E1DF;
  --line:#DCDED6;
  --font-display:'Amiri', serif;
  --font-body:'IBM Plex Sans Arabic', sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  margin:0;
}
h1,h2,h3,.display-font{font-family:var(--font-display);}
::selection{background:var(--seal-soft);}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .folder-tab:focus-visible{
  outline:3px solid var(--seal);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- Loader ---------- */
#globalLoader{
  position:fixed; inset:0; background:var(--ink); z-index:2000;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  color:#fff;
}
.loader-seal{
  width:56px;height:56px;border-radius:50%;border:3px dashed var(--seal);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-size:22px; color:var(--seal);
  animation:spin 2.4s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Auth screen ---------- */
#authWrapper{
  min-height:100vh; display:flex;
}
.auth-hero{
  flex:1 1 46%;
  background:
    radial-gradient(circle at 20% 20%, rgba(168,118,62,.20), transparent 40%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 60%, #16222e 100%);
  color:#f4f1ea;
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 56px;
  position:relative;
  overflow:hidden;
}
.auth-hero::after{
  content:'';
  position:absolute; inset-inline-end:-120px; bottom:-120px;
  width:340px; height:340px; border-radius:50%;
  border:1px dashed rgba(241,228,210,.18);
}
.hero-seal{
  width:78px;height:78px;border-radius:50%;
  border:2px solid var(--seal);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-size:34px; color:var(--seal);
  margin-bottom:28px;
  transform:rotate(-4deg);
}
.auth-hero h1{font-size:2.6rem; line-height:1.3; margin-bottom:16px;}
.auth-hero p{color:#c9cfd6; font-size:1.02rem; max-width:440px; line-height:1.9;}
.hero-points{list-style:none; padding:0; margin-top:32px; display:flex; flex-direction:column; gap:14px;}
.hero-points li{display:flex; align-items:flex-start; gap:12px; color:#dfe3e8; font-size:.94rem;}
.hero-points i{color:var(--seal); margin-top:3px;}

.auth-panel{
  flex:1 1 54%;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--paper-card);
  border-radius:14px;
  padding:40px 36px;
  box-shadow:0 20px 50px rgba(28,43,57,.10);
  border:1px solid var(--line);
}
.auth-card h2{font-size:1.5rem; margin-bottom:6px;}
.auth-card .sub{color:#6b7684; font-size:.9rem; margin-bottom:26px;}
.form-label{font-weight:600; font-size:.86rem; color:var(--ink-soft);}
.form-control, .form-select{
  border-radius:8px; border:1px solid var(--line); padding:.62rem .85rem; font-family:var(--font-body);
}
.form-control:focus, .form-select:focus{
  border-color:var(--seal); box-shadow:0 0 0 .18rem var(--seal-soft);
}
.btn-seal{
  background:var(--seal); border-color:var(--seal); color:#fff; font-weight:600;
}
.btn-seal:hover{background:var(--seal-dark); border-color:var(--seal-dark); color:#fff;}
.btn-outline-seal{border-color:var(--seal); color:var(--seal); font-weight:600;}
.btn-outline-seal:hover{background:var(--seal); color:#fff;}
.auth-switch{text-align:center; margin-top:20px; font-size:.88rem; color:#6b7684;}
.auth-switch a{color:var(--seal-dark); font-weight:600; text-decoration:none; cursor:pointer;}
#authAlert{display:none;}

/* ---------- App shell ---------- */
#appWrapper{display:none; min-height:100vh;}
.sidebar{
  width:250px; min-width:250px; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; padding:26px 0 20px;
  position:fixed; inset-inline-start:0; top:0; bottom:0; z-index:100;
  transition:transform .2s ease;
}
.sidebar-brand{display:flex; align-items:center; gap:12px; padding:0 22px 26px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:18px;}
.seal-mark{
  width:42px;height:42px;border-radius:50%; border:2px solid var(--seal);
  display:flex;align-items:center;justify-content:center; font-family:var(--font-display); color:var(--seal); font-size:20px; flex:none;
}
.brand-name{font-family:var(--font-display); font-size:1.15rem; line-height:1.1;}
.brand-sub{font-size:.72rem; color:#9aa4ae;}
.folder-nav{display:flex; flex-direction:column; gap:4px; padding:0 0 0 0;}
.folder-tab{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:12px 22px; margin-inline-end:16px;
  border-radius:10px 0 0 10px; background:transparent; border:none;
  color:rgba(255,255,255,.72); text-align:start; font-family:var(--font-body); font-size:.92rem; font-weight:500;
  cursor:pointer; width:calc(100% + 16px);
  transition:background .16s ease, color .16s ease, margin .16s ease;
}
.folder-tab i{font-size:1.05rem; width:20px; text-align:center;}
.folder-tab:hover{background:rgba(255,255,255,.06); color:#fff;}
.folder-tab.active{
  background:var(--paper); color:var(--ink); margin-inline-end:0;
  box-shadow:-8px 0 16px rgba(0,0,0,.14);
}
[dir="rtl"] .folder-tab.active{box-shadow:8px 0 16px rgba(0,0,0,.14);}
.folder-tab.active::before{
  content:''; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:4px; background:var(--seal); border-radius:4px;
}
.sidebar-footer{margin-top:auto; padding:16px 22px 0;}
.company-chip{
  background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.2); border-radius:8px;
  padding:10px 12px; font-size:.78rem; color:#c9cfd6;
}

.main-area{margin-inline-start:250px; flex:1; min-height:100vh; display:flex; flex-direction:column;}
.topbar{
  height:70px; background:var(--paper-card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:50;
}
.topbar-title{font-family:var(--font-display); font-size:1.35rem; color:var(--ink);}
.topbar-user{display:flex; align-items:center; gap:14px;}
.user-meta{text-align:end;}
.user-name{font-weight:600; font-size:.9rem;}
.user-role{font-size:.74rem; color:#8a92a0;}
.btn-burger{border:1px solid var(--line); background:#fff; border-radius:8px; width:38px; height:38px;}

.content{padding:28px; flex:1;}
.view{display:none; animation:fadein .25s ease;}
.view.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.card-block{
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:22px;
}
.stat-card{
  background:var(--paper-card); border:1px solid var(--line); border-radius:12px; padding:20px 22px;
  display:flex; align-items:center; gap:16px; position:relative; overflow:hidden;
}
.stat-icon{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none;
}
.stat-num{font-family:var(--font-display); font-size:1.9rem; line-height:1;}
.stat-label{font-size:.8rem; color:#8a92a0; margin-top:4px;}

.section-title{font-family:var(--font-display); font-size:1.2rem; margin-bottom:2px;}
.section-hint{font-size:.82rem; color:#8a92a0; margin-bottom:18px;}

.stamp{
  display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:20px;
  font-size:.74rem; font-weight:700; border:1.5px dashed; transform:rotate(-2deg);
}
.stamp-active{color:var(--green); border-color:var(--green); background:var(--green-soft);}
.stamp-inactive{color:var(--alert); border-color:var(--alert); background:var(--alert-soft);}

.list-row{
  display:flex; align-items:center; justify-content:space-between; padding:13px 14px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:8px; background:#fff; cursor:pointer; transition:border-color .15s ease;
}
.list-row:hover{border-color:var(--seal);}
.list-row.selected{border-color:var(--seal); background:var(--seal-soft);}
.list-row .rname{font-weight:600; font-size:.92rem;}
.list-row .rmeta{font-size:.74rem; color:#8a92a0;}

.table thead th{
  font-size:.76rem; color:#8a92a0; font-weight:700; border-bottom:2px solid var(--line); text-transform:none;
}
.table td{vertical-align:middle; font-size:.88rem; border-color:var(--line);}
.avatar-chip{
  width:34px;height:34px;border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; flex:none;
}
.perm-group{border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:12px;}
.perm-group h6{font-family:var(--font-display); font-size:1rem; margin-bottom:10px; color:var(--ink);}
.form-check{margin-bottom:6px;}
.empty-state{text-align:center; padding:50px 20px; color:#8a92a0;}
.empty-state i{font-size:2.2rem; color:var(--line); margin-bottom:10px; display:block;}
.modal-content{border-radius:14px; border:none;}
.modal-header{border-bottom:1px solid var(--line);}
.modal-header .modal-title{font-family:var(--font-display);}
.badge-perm-count{background:var(--seal-soft); color:var(--seal-dark); font-weight:700;}

@media (max-width:991px){
  .sidebar{transform:translateX(100%);}
  [dir="rtl"] .sidebar{transform:translateX(100%);}
  .sidebar.open{transform:translateX(0);}
  .main-area{margin-inline-start:0;}
}
@media print{
  body *{visibility:hidden;}
  #reportPrintArea, #reportPrintArea *{visibility:visible;}
  #reportPrintArea{position:absolute; inset-inline-start:0; top:0; width:100%;}
  .no-print{display:none !important;}
}
.report-title{font-family:var(--font-display); font-size:1.3rem; margin-bottom:4px;}
.report-meta{font-size:.8rem; color:#8a92a0; margin-bottom:16px;}
.report-table th{background:var(--paper);}