@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap');

:root{
  --afaq-primary:#9b2122;
  --afaq-primary-dark:#7f1d1d;
  --afaq-primary-deeper:#4c0c15;
  --afaq-primary-soft:#fff1f2;
  --afaq-primary-line:#efd1d5;
  --afaq-sidebar:#4b1018;
  --afaq-sidebar-2:#31080e;
  --afaq-page:#f4f7f7;
  --afaq-surface:#fff;
  --afaq-border:#dfe8e8;
  --afaq-text:#24383a;
  --afaq-muted:#708184;
  --afaq-success:#137547;
  --afaq-warning:#a15c00;
  --afaq-danger:#b42318;
  --afaq-shadow:0 12px 35px rgba(31,56,58,.075);
  --afaq-shadow-soft:0 7px 24px rgba(31,56,58,.055);
}

*{box-sizing:border-box}
html{background:var(--afaq-page)}
body{
  margin:0!important;
  min-width:320px;
  min-height:100vh;
  color:var(--afaq-text)!important;
  background:var(--afaq-page)!important;
  font-family:'Tajawal',system-ui,sans-serif!important;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:'Tajawal',system-ui,sans-serif!important}
button{cursor:pointer}
a{text-decoration:none}

/* The legacy header is hidden only after the replacement shell is ready. */
.afaq-managed-root>.header-shape,
.afaq-managed-root>.header-bar,
.afaq-managed-root>.topbar,
.afaq-managed-root>header,
.afaq-managed-root#adminPanel>header,
.afaq-managed-root#appShell>header,
.afaq-managed-root#mainApp>header{display:none!important}

.afaq-managed-root{
  min-height:100vh!important;
  padding-right:270px!important;
  padding-top:72px!important;
  background:var(--afaq-page)!important;
  position:relative;
  transition:padding-right .24s ease;
}
.afaq-managed-root.afaq-sidebar-collapsed{padding-right:0!important}
.afaq-managed-root.afaq-sidebar-collapsed .afaq-sidebar{transform:translateX(110%)}
.afaq-managed-root.afaq-sidebar-collapsed .afaq-topbar{right:0}
.afaq-managed-root>main,
.afaq-managed-root>.afaq-content-host,
.afaq-managed-root>div.p-4,
.afaq-managed-root>#editorArea{
  width:100%!important;
  max-width:1680px!important;
  margin:0 auto!important;
}
.afaq-managed-root main.container{
  max-width:1680px!important;
  padding:28px!important;
}

/* Sidebar — same visual language as the accounting system. */
.afaq-sidebar{
  position:fixed;inset:0 0 0 auto;width:270px;
  z-index:10020;
  display:flex;flex-direction:column;
  padding:22px 16px;
  color:#fff;
  background:linear-gradient(180deg,var(--afaq-sidebar),var(--afaq-sidebar-2));
  box-shadow:-8px 0 28px rgba(49,8,14,.12);
  transition:transform .24s ease;
}

.afaq-brand{display:flex;align-items:center;gap:11px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.11)}
.afaq-brand-logo{width:48px;height:48px;flex:0 0 48px;object-fit:contain;padding:4px;background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.17)}
.afaq-brand-copy{min-width:0}
.afaq-brand-copy strong,.afaq-brand-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afaq-brand-copy strong{font-size:17px;font-weight:800;line-height:1.25}
.afaq-brand-copy small{margin-top:4px;color:#ddb9be;font-size:12px}
.afaq-sidebar nav{display:flex;flex-direction:column;gap:5px;padding-top:20px;overflow-y:auto}
.afaq-shell-link{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:11px 13px;border:0;border-radius:11px;
  background:transparent;color:#e3cbd0;
  text-align:right;font-size:14px;font-weight:700;
  transition:.18s ease;
}
.afaq-shell-link svg{width:19px;height:19px;flex:0 0 19px}
.afaq-shell-link:hover,.afaq-shell-link.active{background:rgba(255,255,255,.10);color:#fff}
.afaq-shell-link.active{box-shadow:inset -3px 0 #e7a4ad}
.afaq-sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.11)}
.afaq-mobile-close{display:none;margin-right:auto;width:36px;height:36px;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:transparent;color:#fff}
.afaq-mobile-close svg{width:18px}

/* Top bar */
.afaq-topbar{
  position:fixed;top:0;right:270px;left:0;height:72px;z-index:10010;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 28px;background:#fff;border-bottom:1px solid var(--afaq-border);
  transition:right .24s ease;
}

.afaq-topbar-start{display:flex;align-items:center;gap:12px;min-width:0}
.afaq-menu-button{display:inline-grid;width:40px;height:40px;place-items:center;border:1px solid var(--afaq-border);border-radius:10px;background:#fff;color:#5c343b;flex:0 0 40px;transition:.18s ease}
.afaq-menu-button svg{width:20px;height:20px}
.afaq-menu-button:hover{background:var(--afaq-primary-soft);color:var(--afaq-primary);border-color:var(--afaq-primary-line)}
.afaq-menu-button[aria-expanded="false"]{background:var(--afaq-primary-soft);color:var(--afaq-primary);border-color:var(--afaq-primary-line)}
.afaq-page-icon{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;border-radius:11px;color:var(--afaq-primary);background:var(--afaq-primary-soft)}
.afaq-page-icon svg{width:21px;height:21px}
.afaq-topbar-copy{min-width:0}
.afaq-topbar-copy strong,.afaq-topbar-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.afaq-topbar-copy strong{font-size:16px;font-weight:800;color:#3e3033}
.afaq-topbar-copy small{font-size:12px;color:var(--afaq-muted);margin-top:3px}
.afaq-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:thin}
.afaq-topbar-actions>*{flex:0 0 auto}
.afaq-topbar-actions button,
.afaq-topbar-actions label,
.afaq-topbar-actions select,
.afaq-topbar-actions span[id$="Badge"]{
  min-height:38px;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  margin:0!important;padding:8px 12px!important;
  border:1px solid var(--afaq-border)!important;border-radius:10px!important;
  background:#fff!important;color:#4e3d40!important;box-shadow:none!important;
  font-size:12px!important;font-weight:800!important;white-space:nowrap;
}
.afaq-topbar-actions button:hover,.afaq-topbar-actions label:hover{background:var(--afaq-primary-soft)!important;color:var(--afaq-primary)!important;border-color:var(--afaq-primary-line)!important}
.afaq-topbar-actions .relative{position:relative}
.afaq-topbar-actions .relative>button{width:40px;padding:0!important}
.afaq-topbar-actions .bell-badge{position:absolute!important;top:-4px!important;left:-4px!important;min-width:18px!important;min-height:18px!important;padding:1px 5px!important;border:2px solid #fff!important;border-radius:999px!important;background:var(--afaq-primary)!important;color:#fff!important;font-size:9px!important}

.afaq-subnav{
  margin:18px 28px 0;padding:8px;
  display:flex;align-items:center;gap:7px;overflow-x:auto;
  background:#fff;border:1px solid var(--afaq-border);border-radius:13px;box-shadow:var(--afaq-shadow-soft)
}
.afaq-subnav .nav-btn{min-height:38px;padding:8px 14px!important;border:1px solid #ebefef!important;border-radius:9px!important;background:#f7f9f9!important;color:#64777a!important;font-size:13px!important;font-weight:800!important;box-shadow:none!important}
.afaq-subnav .nav-btn:hover{background:var(--afaq-primary-soft)!important;color:var(--afaq-primary)!important;border-color:var(--afaq-primary-line)!important}
.afaq-subnav .nav-btn.active{background:var(--afaq-primary)!important;color:#fff!important;border-color:var(--afaq-primary)!important;box-shadow:0 6px 14px rgba(155,33,34,.17)!important}

.afaq-page-heading{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin:0 0 22px;padding:0;
}
.afaq-page-heading h1{margin:0;color:#17393b;font-size:28px;line-height:1.25;font-weight:800}
.afaq-page-heading p{margin:6px 0 0;color:var(--afaq-muted);font-size:14px}
.afaq-page-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--afaq-primary);font-size:12px;font-weight:800}
.afaq-page-kicker::before{content:'';width:22px;height:3px;border-radius:99px;background:var(--afaq-primary)}

/* General panels/cards */
.afaq-managed-root .section-card,
.afaq-managed-root .input-card,
.afaq-managed-root .chart-card,
.afaq-managed-root .send-card,
.afaq-managed-root .card,
.afaq-managed-root .doc-card,
.afaq-managed-root .folder-card,
.afaq-managed-root section[class*="bg-white"],
.afaq-managed-root div[class*="bg-white"][class*="shadow"]{
  background:#fff!important;border:1px solid var(--afaq-border)!important;border-radius:16px!important;box-shadow:var(--afaq-shadow)!important
}
.afaq-managed-root .section-card,
.afaq-managed-root .card,
.afaq-managed-root .send-card{padding:20px!important}
.afaq-managed-root .section-card:hover,.afaq-managed-root .card:hover{box-shadow:0 15px 38px rgba(31,56,58,.10)!important}
.afaq-managed-root [class*="rounded-[2rem]"],.afaq-managed-root [class*="rounded-[1.75rem]"]{border-radius:17px!important}
.afaq-managed-root [class*="absolute"][class*="rounded-full"][class*="opacity-50"]{display:none!important}

.afaq-section-title,.afaq-managed-root .section-title,.afaq-managed-root .chart-title{
  display:flex!important;align-items:center!important;gap:9px!important;
  margin:0 0 15px!important;padding:0 0 12px!important;
  border-right:0!important;border-bottom:1px solid #edf1f1!important;
  color:#30494b!important;font-size:14px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;font-style:normal!important
}
.afaq-section-title::before,.afaq-managed-root .section-title::before,.afaq-managed-root .chart-title::before{
  content:'';width:4px;height:19px;border-radius:4px;background:var(--afaq-primary);flex:0 0 4px
}
.afaq-inline-icon{width:17px;height:17px;display:inline-grid;place-items:center;flex:0 0 17px;color:currentColor}
.afaq-inline-icon svg{width:17px;height:17px}

/* Instruction/status panels */
.afaq-managed-root .alert-box,
.afaq-managed-root .alert-banner,
.afaq-managed-root .afaq-info-panel{
  display:flex;align-items:flex-start;gap:13px;
  padding:15px 16px!important;margin-bottom:20px!important;
  border:1px solid var(--afaq-primary-line)!important;border-right:4px solid var(--afaq-primary)!important;
  border-radius:12px!important;background:#fff8f8!important;box-shadow:none!important;color:#4c3c3f!important
}
.afaq-managed-root .alert-box>span,.afaq-managed-root .alert-banner>span{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border-radius:10px;background:var(--afaq-primary-soft);color:var(--afaq-primary);font-size:0!important}
.afaq-managed-root .alert-box>span::before,.afaq-managed-root .alert-banner>span::before{content:'i';font-size:15px;font-family:Georgia,serif;font-weight:900}
.afaq-managed-root .alert-box p,.afaq-managed-root .alert-banner p{margin:0!important;color:#4c3c3f!important;font-size:13px!important;line-height:1.8!important}

/* Stats — icon tile + clean typography */
.afaq-managed-root .stat-card{
  min-height:108px;display:flex!important;align-items:center!important;gap:14px!important;
  padding:18px!important;text-align:right!important;
  background:#fff!important;border:1px solid var(--afaq-border)!important;border-radius:16px!important;box-shadow:var(--afaq-shadow)!important;overflow:hidden!important
}
.afaq-managed-root .stat-card::before{display:none!important}
.afaq-stat-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px;border-radius:13px;color:var(--afaq-primary);background:var(--afaq-primary-soft)}
.afaq-stat-icon svg{width:23px;height:23px}
.afaq-stat-copy{min-width:0;flex:1}
.afaq-stat-copy p,.afaq-stat-copy span{color:var(--afaq-muted)!important;font-size:13px!important;font-weight:700!important;margin:0!important}
.afaq-stat-copy h2,.afaq-stat-copy strong{display:block;margin:5px 0 0!important;color:#263b3d!important;font-size:24px!important;font-weight:800!important;line-height:1.15!important}
.afaq-managed-root .stat-card:hover{transform:translateY(-2px)!important;box-shadow:0 16px 38px rgba(31,56,58,.11)!important}

/* Forms */
.afaq-managed-root label{color:#3b595b!important;font-size:13px!important;font-weight:700!important}
.afaq-managed-root .styled-input,
.afaq-managed-root .styled-select,
.afaq-managed-root .si,
.afaq-managed-root .num-input,
.afaq-managed-root .pos-amount,
.afaq-managed-root .pos-note,
.afaq-managed-root .pos-date,
.afaq-managed-root .note-textarea,
.afaq-managed-root input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.afaq-managed-root select,
.afaq-managed-root textarea{
  border:1px solid #cedddd!important;border-radius:9px!important;background:#fff!important;color:#213c3e!important;box-shadow:none!important;outline:none!important
}
.afaq-managed-root input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
.afaq-managed-root select:focus,.afaq-managed-root textarea:focus{
  border-color:#c56673!important;box-shadow:0 0 0 3px rgba(155,33,34,.09)!important
}
.afaq-managed-root input[type="file"]{padding:8px!important;border:1px dashed #cfdada!important;border-radius:10px!important;background:#f9fbfb!important}
.afaq-managed-root input[type="file"]::file-selector-button{margin-left:10px;padding:8px 12px;border:0;border-radius:8px;background:var(--afaq-primary-soft);color:var(--afaq-primary);font-weight:800}

/* Buttons — flat, restrained and consistent */
.afaq-managed-root .btn-primary,
.afaq-managed-root .btn-navy,
.afaq-managed-root .btn-red,
.afaq-managed-root button[class*="from-red-"],
.afaq-managed-root button[class*="bg-red-800"],
.afaq-managed-root button[class*="bg-red-700"]{
  min-height:40px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  padding:10px 16px!important;border:0!important;border-radius:10px!important;
  background:var(--afaq-primary)!important;color:#fff!important;box-shadow:0 6px 14px rgba(155,33,34,.17)!important;
  font-size:13px!important;font-weight:800!important;transition:.18s ease!important
}
.afaq-managed-root .btn-primary:hover,.afaq-managed-root .btn-navy:hover,.afaq-managed-root .btn-red:hover,.afaq-managed-root button[class*="from-red-"]:hover{background:var(--afaq-primary-dark)!important;transform:none!important}
.afaq-managed-root .btn-ghost{min-height:40px!important;border:1px solid var(--afaq-border)!important;border-radius:10px!important;background:#fff!important;color:#496265!important}
.afaq-managed-root button[class*="bg-blue-"],.afaq-managed-root button[class*="bg-indigo-"]{background:#3d566a!important;border-radius:10px!important;box-shadow:none!important}
.afaq-managed-root button[class*="bg-teal-"]{background:#356b65!important;border-radius:10px!important;box-shadow:none!important}
.afaq-managed-root .tab-btn,.afaq-managed-root .type-chip,.afaq-managed-root .lh-chip,.afaq-managed-root .filter-btn{
  min-height:40px!important;padding:9px 14px!important;border:1px solid #e3eaea!important;border-radius:9px!important;background:#f7f9f9!important;color:#617477!important;box-shadow:none!important;font-weight:800!important
}
.afaq-managed-root .tab-btn.active,.afaq-managed-root .type-chip.active,.afaq-managed-root .lh-chip.active,.afaq-managed-root .filter-btn.active{
  background:var(--afaq-primary)!important;color:#fff!important;border-color:var(--afaq-primary)!important;box-shadow:0 6px 14px rgba(155,33,34,.16)!important
}

/* Tables */
.afaq-managed-root table{width:100%;border-collapse:collapse!important}
.afaq-managed-root th,.afaq-managed-root td{padding:12px 13px!important;border-bottom:1px solid #eaf0f0!important;text-align:right!important}
.afaq-managed-root th{background:#f7fafa!important;color:#587174!important;font-size:12px!important;font-weight:800!important}
.afaq-managed-root tbody tr:hover{background:#fbfdfd!important}
.afaq-managed-root .overflow-x-auto:has(table){border:1px solid var(--afaq-border)!important;border-radius:13px!important;background:#fff!important}

/* Dashboard/chart panels */
.afaq-managed-root .chart-card{padding:20px!important;background:#fff!important}
.afaq-managed-root .chart-card canvas{max-height:100%!important}
#remindersWidget>div{border-radius:12px!important;box-shadow:none!important}

/* Operations page */
#appContent.afaq-managed-root .send-card{border-top:0!important}
#appContent.afaq-managed-root #foldersGrid{gap:14px!important}
#appContent.afaq-managed-root .folder-card{position:relative;padding:18px!important;text-align:right!important;display:grid!important;grid-template-columns:44px 1fr!important;gap:4px 12px!important;align-items:center!important;border:1px solid var(--afaq-border)!important;background:#fff!important}
#appContent.afaq-managed-root .folder-card>div:first-child{grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;margin:0!important;border-radius:12px;background:var(--afaq-primary-soft);font-size:0!important;color:var(--afaq-primary)}
#appContent.afaq-managed-root .folder-card>div:first-child::before{content:'';width:22px;height:18px;border:2px solid currentColor;border-radius:3px;display:block;box-shadow:inset 0 5px 0 -3px currentColor}
#appContent.afaq-managed-root .folder-card h4{margin:0!important;font-size:14px!important;color:#294244!important}
#appContent.afaq-managed-root .folder-count{grid-column:2;margin:3px 0 0!important;justify-self:start;background:#f1f5f5!important;color:#6c7f80!important}
#appContent.afaq-managed-root .folder-card.active{border-color:#dfb0b7!important;background:#fffafa!important}
#appContent.afaq-managed-root .folder-card:hover{transform:translateY(-2px)!important;border-color:#dca5ad!important;box-shadow:0 13px 30px rgba(31,56,58,.10)!important}
#appContent.afaq-managed-root .timeline-header{top:90px!important;padding:14px 16px!important;border:1px solid #3f5557!important;border-radius:13px!important;background:#263d40!important}
#appContent.afaq-managed-root #filesView>div[class*="bg-white/60"]{background:#f8fbfb!important;border:1px solid var(--afaq-border)!important;border-radius:15px!important;box-shadow:none!important}
#appContent.afaq-managed-root .msg-bubble{border-radius:14px 14px 3px 14px!important;border:1px solid var(--afaq-border)!important;box-shadow:var(--afaq-shadow-soft)!important}

/* Reminders */
#mainApp.afaq-managed-root>.p-4{max-width:1450px!important;padding:28px!important}
#mainApp.afaq-managed-root #statsRow{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#mainApp.afaq-managed-root .doc-card{border-right:0!important;overflow:hidden!important}
#mainApp.afaq-managed-root .doc-card .card-header{padding:16px!important;background:#fff!important;border-right:4px solid var(--afaq-primary)!important}
#mainApp.afaq-managed-root .doc-card.expired .card-header{border-right-color:#ef4444!important}
#mainApp.afaq-managed-root .doc-card.critical .card-header{border-right-color:#f97316!important}
#mainApp.afaq-managed-root .doc-card.soon .card-header{border-right-color:#eab308!important}
#mainApp.afaq-managed-root .doc-card.ok .card-header{border-right-color:#22c55e!important}
#mainApp.afaq-managed-root .modal-box{border-radius:17px!important;border:1px solid var(--afaq-border)!important;box-shadow:0 25px 70px rgba(0,0,0,.22)!important}

/* Letter builder */
#appShell.afaq-managed-root{display:block!important}
#appShell.afaq-managed-root>#editorArea{padding:28px!important;overflow:visible!important;display:block!important;max-width:1680px!important}
.afaq-letter-layout{display:grid;grid-template-columns:minmax(420px,580px) minmax(0,1fr);gap:20px;align-items:start}
.afaq-letter-layout>.w-full{max-width:none!important;max-height:none!important;overflow:visible!important}
#appShell.afaq-managed-root .card{padding:18px!important}
#appShell.afaq-managed-root #previewCol{z-index:10100!important}
#appShell.afaq-managed-root .preview-toolbar{border-radius:14px 14px 0 0!important}
#appShell.afaq-managed-root #sidebar{background:#263d40!important}

/* Login/lock/loading */
#lockScreen,#pinScreen,#loginScreen{background:radial-gradient(circle at top right,#f4dfe2,transparent 38%),linear-gradient(135deg,#fafcfc,#eaf1f1)!important}
#lockScreen .login-card,#pinScreen .login-card,#loginScreen>div{
  border:1px solid var(--afaq-border)!important;border-top:7px solid var(--afaq-primary)!important;border-radius:22px!important;box-shadow:0 25px 70px rgba(55,18,25,.17)!important
}
#lockScreen img,#pinScreen img,#loginScreen img{background:#fff!important;border:1px solid #edf0f0!important;border-radius:16px!important;padding:7px!important;object-fit:contain!important}
#loadingScreen,#loadScreen{background:var(--afaq-sidebar-2)!important}
.spinner{border-color:var(--afaq-primary)!important;border-top-color:transparent!important}

.afaq-mobile-overlay{display:none;position:fixed;inset:0;z-index:10015;background:rgba(0,0,0,.43)}

@media(max-width:1100px){
  .afaq-topbar{padding:0 18px}.afaq-topbar-copy small{display:none}
  .afaq-letter-layout{grid-template-columns:1fr}
}
@media(max-width:850px){
  .afaq-managed-root,.afaq-managed-root.afaq-sidebar-collapsed{padding-right:0!important}
  .afaq-sidebar,.afaq-managed-root.afaq-sidebar-collapsed .afaq-sidebar{transform:translateX(110%)}
  .afaq-sidebar.open,.afaq-managed-root.afaq-sidebar-collapsed .afaq-sidebar.open{transform:translateX(0)}
  .afaq-mobile-close,.afaq-menu-button{display:inline-grid}
  .afaq-topbar,.afaq-managed-root.afaq-sidebar-collapsed .afaq-topbar{right:0;padding:0 13px}
  .afaq-page-icon{display:none}
  .afaq-topbar-copy strong{font-size:14px}
  .afaq-topbar-actions{gap:6px;max-width:58vw}
  .afaq-topbar-actions button,.afaq-topbar-actions label,.afaq-topbar-actions select{min-height:36px;padding:7px 9px!important}
  .afaq-mobile-overlay.show{display:block}
  .afaq-subnav{margin:12px 13px 0}
  .afaq-managed-root main.container,#mainApp.afaq-managed-root>.p-4,#appShell.afaq-managed-root>#editorArea{padding:18px 13px!important}
  .afaq-page-heading{align-items:flex-start;flex-direction:column;margin-bottom:18px}
  .afaq-page-heading h1{font-size:24px}
  #mainApp.afaq-managed-root #statsRow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:600px){
  .afaq-topbar-copy small{display:none}.afaq-topbar-actions{max-width:54vw}
  .afaq-topbar-actions button,.afaq-topbar-actions label{font-size:0!important;width:38px;padding:0!important}
  .afaq-topbar-actions .afaq-inline-icon{width:18px;height:18px}
  .afaq-topbar-actions select{max-width:112px}
  .afaq-managed-root .grid-cols-4,.afaq-managed-root .md\:grid-cols-3{grid-template-columns:1fr!important}
  #mainApp.afaq-managed-root #statsRow{grid-template-columns:1fr!important}
  .afaq-managed-root .stat-card{min-height:92px}
  .afaq-letter-layout{display:block}
}
@media print{
  .afaq-sidebar,.afaq-topbar,.afaq-mobile-overlay,.afaq-subnav,.afaq-page-heading{display:none!important}
  .afaq-managed-root{padding:0!important}
}

/* v3 — professional authentication screens, installation control, and stronger mobile layout */
html,body{overflow-x:hidden}
#lockScreen,#pinScreen,#loginScreen{
  padding:22px!important;
  overflow-y:auto!important;
  background:
    radial-gradient(circle at 88% 6%,rgba(155,33,34,.15),transparent 32%),
    radial-gradient(circle at 10% 92%,rgba(75,16,24,.10),transparent 30%),
    linear-gradient(145deg,#fbfdfd 0%,#eef4f3 100%)!important;
}
.afaq-auth-card{
  width:min(440px,100%)!important;
  max-width:440px!important;
  margin:auto!important;
  padding:32px 34px 28px!important;
  text-align:center!important;
  background:#fff!important;
  border:1px solid var(--afaq-border)!important;
  border-top:6px solid var(--afaq-primary)!important;
  border-radius:22px!important;
  box-shadow:0 25px 70px rgba(55,18,25,.16)!important;
}
.afaq-auth-logo{
  display:block!important;
  width:min(260px,78%)!important;
  height:auto!important;
  max-height:145px!important;
  margin:0 auto 14px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  object-fit:contain!important;
  box-shadow:none!important;
  background:transparent!important;
}
#lockScreen .afaq-auth-logo,#pinScreen .afaq-auth-logo,#loginScreen .afaq-auth-logo{
  width:min(260px,78%)!important;height:auto!important;max-height:145px!important;
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important
}
.afaq-auth-title{margin:0!important;color:#263b3d!important;font-size:25px!important;font-weight:900!important;line-height:1.3!important}
.afaq-auth-description{margin:7px auto 23px!important;max-width:330px;color:var(--afaq-muted)!important;font-size:14px!important;font-weight:500!important;line-height:1.7!important}
.afaq-auth-form{display:grid!important;gap:10px!important;text-align:right!important}
.afaq-auth-label{display:block!important;margin:3px 2px 0!important;color:#3b5558!important;font-size:13px!important;font-weight:800!important}
.afaq-auth-input-wrap{position:relative!important;display:block!important}
.afaq-auth-input-icon{position:absolute;z-index:2;top:50%;right:14px;transform:translateY(-50%);width:19px;height:19px;color:#7d9092;pointer-events:none}
.afaq-auth-input-icon svg{display:block;width:100%;height:100%}
.afaq-auth-input-wrap .login-input{padding-right:44px!important}
.afaq-auth-card .login-input{
  width:100%!important;min-height:48px!important;padding:12px 14px!important;
  border:1px solid #cad8d8!important;border-radius:11px!important;
  background:#fff!important;color:#263b3d!important;outline:none!important;
  font-size:15px!important;font-weight:600!important;text-align:right!important;letter-spacing:normal!important;
  box-shadow:none!important;transition:border-color .18s,box-shadow .18s!important
}
.afaq-auth-card .login-input[dir="ltr"]{text-align:left!important}
.afaq-auth-card .login-input:focus{border-color:#be6571!important;box-shadow:0 0 0 3px rgba(155,33,34,.09)!important}
.afaq-auth-primary{
  width:100%!important;min-height:48px!important;margin-top:6px!important;padding:11px 16px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:11px!important;background:var(--afaq-primary)!important;color:#fff!important;
  font-size:15px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(155,33,34,.20)!important;transition:.18s ease!important
}
.afaq-auth-primary:hover{background:var(--afaq-primary-dark)!important}
.afaq-auth-primary:active{transform:scale(.985)!important}
.afaq-auth-error{margin:2px 0 0!important;padding:10px 12px!important;border:1px solid #f1b9bf!important;border-radius:10px!important;background:#fff2f3!important;color:#a51f2e!important;text-align:center!important;font-size:12px!important;font-weight:800!important}
.afaq-auth-install{
  width:100%!important;min-height:44px!important;margin:16px 0 0!important;padding:9px 14px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  border:1px solid #e0b7bd!important;border-radius:11px!important;background:var(--afaq-primary-soft)!important;color:var(--afaq-primary-dark)!important;
  font-size:13px!important;font-weight:900!important;box-shadow:none!important;transition:.18s ease!important
}
.afaq-auth-install:hover{background:#f9e3e6!important;border-color:#d79ba4!important}
.afaq-auth-install svg{width:19px;height:19px;flex:0 0 19px}
.afaq-auth-install[disabled]{opacity:.65;cursor:default}
.afaq-auth-text-button{display:inline-block!important;margin:15px auto 0!important;padding:3px!important;border:0!important;background:transparent!important;color:#6c7f80!important;font-size:12px!important;font-weight:700!important;text-decoration:underline!important;box-shadow:none!important}
.afaq-pin-input{text-align:center!important;direction:ltr!important;letter-spacing:.65em!important;font-size:24px!important;font-weight:900!important;padding-right:calc(14px - .65em)!important}

.afaq-install-help-backdrop{position:fixed;inset:0;z-index:11050;display:grid;place-items:center;padding:18px;background:rgba(22,35,37,.58);backdrop-filter:blur(5px)}
.afaq-install-help-card{position:relative;width:min(420px,100%);padding:28px 22px 22px;text-align:center;background:#fff;border:1px solid var(--afaq-border);border-radius:20px;box-shadow:0 26px 75px rgba(0,0,0,.28);color:var(--afaq-text)}
.afaq-install-help-card>.afaq-install-help-icon{width:52px;height:52px;display:grid;place-items:center;margin:0 auto 9px;border-radius:14px;background:var(--afaq-primary-soft);color:var(--afaq-primary)}
.afaq-install-help-card svg{width:25px;height:25px}
.afaq-install-help-card h2{margin:8px 0;color:#263b3d;font-size:21px;font-weight:900}
.afaq-install-help-card p{margin:0 0 18px;color:var(--afaq-muted);font-size:14px;line-height:1.9}
.afaq-install-help-card .afaq-install-help-ok{width:100%;min-height:44px;border:0;border-radius:10px;background:var(--afaq-primary);color:#fff;font-weight:900}
.afaq-install-help-close{position:absolute;top:10px;left:10px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:#f1f5f3;color:#495f61}
.afaq-install-help-close svg{width:18px;height:18px}

/* Eliminate duplicated privacy icons: the page keeps one dedicated dynamic icon. */
#btnTogglePrivacy>.afaq-inline-icon{display:none!important}

/* Mobile content tuning across all pages. */
.afaq-managed-root,.afaq-managed-root *{min-width:0}
.afaq-managed-root .overflow-x-auto{max-width:100%}
.afaq-managed-root table{white-space:nowrap}
.afaq-managed-root p,.afaq-managed-root label,.afaq-managed-root button,.afaq-managed-root a{overflow-wrap:anywhere}

@media(max-width:850px){
  .afaq-managed-root{padding-top:64px!important}
  .afaq-topbar{height:64px!important}
  .afaq-sidebar{width:min(88vw,300px)!important;padding:18px 14px!important}
  .afaq-brand-copy strong{font-size:16px!important}.afaq-brand-copy small{font-size:11px!important}
  .afaq-page-heading{margin-bottom:16px!important}
  .afaq-page-heading h1{font-size:22px!important}
  .afaq-page-heading p{font-size:13px!important;line-height:1.7!important}
  .afaq-managed-root main.container,#mainApp.afaq-managed-root>.p-4,#appShell.afaq-managed-root>#editorArea{padding:16px 12px!important}
  .afaq-managed-root .section-card,.afaq-managed-root .card,.afaq-managed-root .send-card,.afaq-managed-root .chart-card{padding:15px!important}
  .afaq-managed-root .alert-box,.afaq-managed-root .alert-banner,.afaq-managed-root .afaq-info-panel{padding:13px!important;gap:10px!important}
  .afaq-managed-root .alert-box p,.afaq-managed-root .alert-banner p{font-size:12.5px!important;line-height:1.75!important}
  .afaq-managed-root .chart-card{height:auto!important;min-height:330px!important}
  .afaq-managed-root .modal,.afaq-managed-root [id$="Modal"]{padding:10px!important}
  .afaq-managed-root [id$="Modal"]>div,.afaq-managed-root .modal-box{max-width:calc(100vw - 20px)!important;border-radius:15px!important}
}
@media(max-width:600px){
  #lockScreen,#pinScreen,#loginScreen{padding:14px!important;align-items:flex-start!important}
  .afaq-auth-card{margin:auto!important;padding:24px 18px 20px!important;border-radius:18px!important}
  .afaq-auth-logo,#lockScreen .afaq-auth-logo,#pinScreen .afaq-auth-logo,#loginScreen .afaq-auth-logo{width:min(225px,76%)!important;max-height:122px!important;margin-bottom:10px!important}
  .afaq-auth-title{font-size:22px!important}
  .afaq-auth-description{margin-bottom:18px!important;font-size:13px!important}
  .afaq-auth-card .login-input{min-height:47px!important;font-size:16px!important}
  .afaq-auth-primary{min-height:47px!important;font-size:14px!important}
  .afaq-auth-install{margin-top:13px!important}
  .afaq-install-help-card{padding:25px 17px 18px;border-radius:17px}

  .afaq-topbar{padding:0 10px!important;gap:8px!important}
  .afaq-topbar-start{gap:8px!important}
  .afaq-topbar-copy strong{font-size:13px!important}
  .afaq-menu-button{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .afaq-topbar-actions{max-width:53vw!important;gap:5px!important}
  .afaq-topbar-actions button,.afaq-topbar-actions label{width:38px!important;height:38px!important;min-height:38px!important;padding:0!important;font-size:0!important;border-radius:9px!important}
  .afaq-topbar-actions button .afaq-inline-icon,.afaq-topbar-actions label .afaq-inline-icon{width:18px!important;height:18px!important}
  .afaq-topbar-actions select{height:38px!important;max-width:105px!important;padding:6px 8px!important;font-size:11px!important}
  .afaq-subnav{margin:10px 10px 0!important;padding:6px!important}
  .afaq-subnav .nav-btn{min-height:36px!important;padding:7px 10px!important;font-size:12px!important}
  .afaq-page-heading h1{font-size:20px!important}
  .afaq-page-heading p{font-size:12.5px!important}
  .afaq-managed-root .stat-card{min-height:88px!important;padding:14px!important;gap:11px!important}
  .afaq-stat-icon{width:42px!important;height:42px!important;flex-basis:42px!important}
  .afaq-stat-copy h2,.afaq-stat-copy strong{font-size:21px!important}
  .afaq-section-title,.afaq-managed-root .section-title,.afaq-managed-root .chart-title{font-size:13px!important;margin-bottom:12px!important;padding-bottom:10px!important}
  .afaq-managed-root input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),.afaq-managed-root select,.afaq-managed-root textarea{font-size:16px!important}
  .afaq-managed-root th,.afaq-managed-root td{padding:10px!important;font-size:12px!important}
  #appContent.afaq-managed-root #foldersGrid{grid-template-columns:1fr!important}
  #appContent.afaq-managed-root .folder-card{padding:14px!important}
  .afaq-managed-root .grid[class*="grid-cols"]{gap:12px!important}
}

/* v4.1 — harmonize the user/role badge with the AFAQ brand palette */
.afaq-topbar-actions #roleBadge{
  background:var(--afaq-primary-soft)!important;
  color:var(--afaq-primary)!important;
  border-color:var(--afaq-primary-line)!important;
}

/* v4.6: invisible permission marker retained only for sidebar admin-access sync. */
.afaq-admin-access-marker{
  position:fixed!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:0!important;border:0!important;
  overflow:hidden!important;clip-path:inset(50%)!important;
  opacity:0!important;pointer-events:none!important;
}


/* v4.7 — phone usability: clear manager shortcuts + compact official-letter workspace */
.afaq-mobile-dashboard-actions{display:none}

@media screen and (max-width:700px){
  /* لوحة المدير: لا نخفي الوظائف المهمة داخل شريط علوي ضيق. */
  #appContent.afaq-managed-root .afaq-mobile-dashboard-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 16px!important;
  }
  #appContent.afaq-managed-root .afaq-mobile-dashboard-action{
    min-height:58px;
    display:flex!important;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:11px 13px!important;
    border:1px solid var(--afaq-border)!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#3d4f51!important;
    box-shadow:var(--afaq-shadow-soft)!important;
    font-size:14px!important;
    font-weight:800!important;
    text-align:right;
  }
  #appContent.afaq-managed-root .afaq-mobile-dashboard-action:active{transform:scale(.98)}
  #appContent.afaq-managed-root .afaq-mobile-dashboard-action-icon{
    width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;
    border-radius:10px;background:var(--afaq-primary-soft);font-size:17px;
  }
  /* نفس الأزرار موجودة الآن بوضوح داخل الصفحة، لذلك لا نكرر أزرار الهيدر على الهاتف. */
  #appContent.afaq-managed-root .afaq-topbar-actions button{display:none!important}
  #appContent.afaq-managed-root .afaq-topbar-actions{max-width:0!important;overflow:hidden!important}

  /* الكتب الرسمية: عنوان مدمج ومساحة أكبر للمحتوى على الهاتف. */
  #appShell.afaq-managed-root .afaq-page-heading{display:none!important}
  #appShell.afaq-managed-root>#editorArea{padding-top:10px!important}
  #appShell.afaq-managed-root .afaq-topbar{gap:6px!important}
  #appShell.afaq-managed-root .afaq-topbar-start{gap:6px!important;flex:1 1 auto!important;min-width:0!important}
  #appShell.afaq-managed-root .afaq-topbar-copy{max-width:92px!important;min-width:0!important}
  #appShell.afaq-managed-root .afaq-topbar-copy strong{font-size:12.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #appShell.afaq-managed-root .afaq-topbar-actions{max-width:none!important;flex:0 0 auto!important;overflow:visible!important}
  #appShell.afaq-managed-root .afaq-letter-layout{width:100%!important;margin:0!important}
  #appShell.afaq-managed-root .afaq-letter-layout>div:first-child{width:100%!important;max-width:none!important}
  #appShell.afaq-managed-root .card{width:100%!important}
}

@media screen and (max-width:390px){
  #appContent.afaq-managed-root .afaq-mobile-dashboard-actions{gap:8px}
  #appContent.afaq-managed-root .afaq-mobile-dashboard-action{min-height:54px;padding:9px 10px!important;font-size:13px!important}
  #appShell.afaq-managed-root .afaq-topbar-copy{max-width:76px!important}
  #appShell.afaq-managed-root .afaq-topbar-copy strong{font-size:12px!important}
}