/*
 * HASAD visual system
 * The authenticated product inherits the calm green, ivory and restrained gold
 * language of the login experience. The login gate itself is intentionally untouched.
 */
#app{
  --hasad-topbar-height:76px;
  /* One shared height for the sidebar HASAD block and every department header (targeting head, accounting top). */
  --department-heading-height:116px;
  --ink:#17332c;
  --muted:#5c6a64;
  --line:#d8e1dd;
  --paper:#f4f6f2;
  --white:#fffefa;
  --green:#095a47;
  --green2:#0c7259;
  --mint:#eaf5f0;
  --gold:#c8a55b;
  --red:#a74343;
  /* رمز التحذير الوسيط (برتقالي) لحالات «تحتاج متابعة» في نبض حصاد والرقابة؛ أُضيف لأن الطبقة لم تكن تحمله. */
  --amber:#b76b13;
  --hasad-green-950:#041f1b;
  --hasad-green-900:#063b35;
  --hasad-green-800:#095a47;
  --hasad-green-700:#0c7259;
  --hasad-green-100:#eaf5f0;
  --hasad-ivory-50:#fffefa;
  --hasad-ivory-100:#fbfaf7;
  --hasad-ivory-200:#f4f2ea;
  --hasad-gold-500:#c8a55b;
  --hasad-gold-300:#dabb74;
  --navy:#063b35;
  --text:#17332c;
  --brand:#0c7259;
  /* HQ-0057: legal-hearing-roll.css (and any older sheet) reads --primary; it was defined nowhere. */
  --primary:var(--hasad-green-700);
  --surface:#fff;
  --surface-muted:#f4f6f2;
  --lens-t:#0c7259;
  --lens-c:#095a47;
  --lens-m:#3f7d6a;
  --lens-x:#c8a55b;
  --hasad-shadow-sm:0 1px 2px rgba(4,31,27,.04),0 5px 16px rgba(4,31,27,.045);
  --hasad-shadow-md:0 14px 34px rgba(4,31,27,.08);
  min-height:100vh;
  color:var(--ink);
  background:#f5f7f5;
  font-family:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}
body:has(#app:not(.hidden)){
  background:#f5f7f5;
  color:#17332c;
}

/* Permanent product chrome */
#app .workspace{background:transparent}
#app .topbar{
  min-height:76px;
  height:76px;
  padding-inline:26px;
  border-bottom:1px solid #dfe7e3;
  background:#fffefa;
  box-shadow:none;
  backdrop-filter:none;
}
#app .topbar-communication-dock,
#app .profile-button,
#app .back-button{
  border-color:#d8e1dd;
  border-radius:10px;
  background:rgba(255,255,255,.82);
  box-shadow:none;
}
#app .topbar-control-icon,
#app .profile-action-icon{color:var(--hasad-green-800)}
#app .avatar{border-radius:9px;background:var(--hasad-green-100);color:var(--hasad-green-800)}
#app .profile-menu-panel{
  border-color:#d8e1dd;
  border-radius:12px;
  background:#fffefa;
  box-shadow:var(--hasad-shadow-md);
}
#app .profile-menu-panel button:hover{background:#f4f6f2}
#app .view{max-width:1760px;padding:22px 28px 34px}
#app .view.has-organization-sidebar{max-width:none;padding:0}

/* Final HASAD shell: one calm green sidebar and no duplicate department ribbon. */
#app .organization-navigation-stack,
#app .organization-navigation-stack[data-active-department]{
  --org-accent:#c8a252;
  --org-deep:#064c3f;
  --org-soft:#eef6f2;
  --org-glow:rgba(200,162,82,.18);
  height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
#app .organization-navigation-stack::before,
#app .organization-navigation-stack::after{display:none}
#app .has-organization-sidebar{--organization-sidebar-width:236px}
#app .organization-primary-nav{
  padding:0 11px 14px;
  border:0;
  border-inline-end:1px solid #c5d9cf;
  border-radius:0;
  background:
    radial-gradient(circle at 88% 9%,rgba(255,255,255,.48),transparent 18rem),
    linear-gradient(180deg,#e9f3ed 0%,#deece4 48%,#d5e7dd 100%);
  box-shadow:-10px 0 34px rgba(3,45,38,.08);
}
#app .organization-primary-nav::before{
  height:2px;
  background:linear-gradient(90deg,transparent,#d0ad63 50%,transparent);
}
#app .organization-sidebar-head{
  height:var(--department-heading-height);
  min-height:var(--department-heading-height);
  margin:0 -1px 10px;
  padding:20px 11px 16px;
  border-bottom:1px solid rgba(4,76,63,.15);
  color:#064c3f;
}
#app .organization-sidebar-head strong{
  display:grid;
  gap:5px;
  overflow:visible;
  color:#064c3f;
  font:900 34px/1 "Cairo","Segoe UI",sans-serif;
  letter-spacing:0;
  text-shadow:none;
}
#app .organization-sidebar-head strong small{
  color:#805f20;
  font:800 11px/1 "Segoe UI",sans-serif;
  letter-spacing:.42em;
  text-align:center;
}
#app .organization-sidebar-compact-toggle{
  border-color:rgba(6,76,63,.25);
  border-radius:6px;
  background:rgba(255,253,246,.46);
  color:#064c3f;
}
#app .organization-sidebar-compact-toggle:hover,
#app .organization-sidebar-compact-toggle:focus-visible{border-color:#b78c38;background:#fffaf0}
#app .organization-primary-track{gap:5px;padding-block:3px}
#app .organization-primary-item,
#app .organization-primary-item[class*="department-"]{
  --item-accent:#d0ad63;
  --item-deep:#064c3f;
  min-height:55px;
  padding:8px 10px;
  border-color:transparent;
  border-radius:8px;
  background:transparent;
  color:#075847;
  box-shadow:none;
}
#app .organization-primary-item::before{display:none}
#app .organization-primary-icon{
  width:30px;
  height:30px;
  border:0;
  border-radius:0;
  color:#a5792a;
  background:transparent;
  box-shadow:none;
}
#app .organization-primary-icon svg{width:20px;height:20px;stroke-width:1.7}
#app .organization-primary-item b{font-size:.76rem;font-weight:850;text-shadow:none}
#app .organization-primary-item i{display:none}
#app .organization-primary-item:hover,
#app .organization-primary-item:focus-visible{
  transform:none;
  border-color:rgba(9,90,71,.16);
  background:rgba(255,255,255,.38);
  color:#064c3f;
}
#app .organization-primary-item.active{
  border-color:#c9a348;
  background:linear-gradient(135deg,#438673,#347562);
  color:#fffdf6;
  box-shadow:none;
}
#app .organization-primary-item.active .organization-primary-icon{color:#f0d18e}
#app .organization-navigation-stack .department-context-nav{
  padding:0 24px;
  border:0;
  border-bottom:1px solid #dde6e1;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
#app .organization-navigation-stack .department-context-item{
  min-width:auto;
  min-height:50px;
  padding:10px 14px;
  border:0;
  border-radius:0;
  color:#64766e;
  background:transparent;
}
#app .organization-navigation-stack .department-context-item.active{
  border:0;
  color:#064c3f;
  background:transparent;
  box-shadow:inset 0 -2px #c8a252;
}

/* Shared surfaces, controls and document actions. */
#app .page-head{margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid rgba(9,90,71,.12)}
#app .page-head h1{color:var(--hasad-green-900);font-size:clamp(1.35rem,2vw,1.75rem)}
#app .page-head p{color:var(--muted)}
/* شارة الترويسة (eyebrow) بحبر شارة «قيد الاعتماد» نفسه: ‎#805f20 على العاجي ≥5.2:1 بدل الذهبي ‎#c8a55b (2.31:1). */
#app .eyebrow{color:#805f20}
#app :is(.card,.panel){
  border-color:#dce4e0;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--hasad-shadow-sm);
}
#app .card.accent{
  background:linear-gradient(145deg,var(--hasad-green-800),var(--hasad-green-900));
  box-shadow:0 10px 24px rgba(6,59,53,.15);
}
#app .panel-head{gap:14px}
#app .panel-head h2{color:var(--hasad-green-900);font-weight:850}
#app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  border-color:#d5dfda;
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  box-shadow:none;
}
#app :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:var(--hasad-green-700);
  outline:0;
  box-shadow:0 0 0 3px rgba(12,114,89,.10);
}
#app :is(.primary,.secondary,.danger,.print-button,.hasad-document-button,.aw-button,.aw-primary){
  min-height:38px;
  border-radius:9px;
  box-shadow:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
#app .primary{
  border:1px solid var(--hasad-green-800);
  background:linear-gradient(180deg,var(--hasad-green-700),var(--hasad-green-800));
  color:#fff;
}
#app .primary:hover{background:var(--hasad-green-900);transform:translateY(-1px)}
#app .secondary,
#app .print-button,
#app .hasad-document-button{
  border:1px solid #cbdad4;
  background:#fff;
  color:var(--hasad-green-800);
}
#app :is(.secondary,.print-button,.hasad-document-button):hover{
  border-color:rgba(9,90,71,.40);
  background:var(--hasad-green-100);
}
#app .hasad-word-button .hasad-word-icon,
#app .hasad-word-icon{
  border-radius:4px;
  background:var(--hasad-green-800);
  color:#fff;
}
#app .badge{background:#eef3f0;color:#496158}
#app .badge:is(.approved,.active,.verified,.clean){background:#e3f2eb;color:#0b654f}
#app .badge:is(.pending,.pending_approval,.review){background:#fbf2df;color:#805f20}
#app .table-wrap{border-color:#d8e1dd;border-radius:10px;box-shadow:none}
#app table th{background:#f4f6f2;color:#52665e;font-weight:800}
#app table td{border-bottom-color:#e7ece9}
#app table tbody tr:hover{background:#fbfaf7}
#app .notice.info{border-color:#cfe2d9;background:#eef7f3;color:#205d4b}

/* حلقة تركيز واحدة لكل عنصر تفاعلي في الغلاف (≥3:1 على العاجي والنعناعي)، وأغمق على الشريط الجانبي الأخضر. */
#app :is(button,a[href],[role="button"],[role="menuitem"],[role="tab"],summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--hasad-green-700,#0c7259);outline-offset:2px}
#app .organization-primary-nav :is(button,a[href],[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:var(--org-deep,#064c3f)}
/* R2: rings of items that fill a clipping container are drawn inside the item, so the container cannot cut them
   (Chromium: .organization-primary-track cut 4px on each side; the claims wrapper cut the row ring). */
#app .organization-primary-track :is(button,a[href],[role="button"],[tabindex]:not([tabindex="-1"])):focus-visible{outline-offset:-4px}
#app tr.collection-claim-open-row[tabindex]:not([tabindex="-1"]):focus-visible{outline-offset:-2px}
/* رابط التخطي: مخفي بصرياً حتى يصل إليه التركيز، بخصائص منطقية ليعمل في الاتجاهين. */
#app .skip-link{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:200;padding:10px 16px;border-radius:9px;background:var(--hasad-green-800);color:#fff;font-weight:800;text-decoration:none;white-space:nowrap;clip-path:inset(50%);overflow:hidden}
#app .skip-link:focus-visible{clip-path:none;overflow:visible;outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px var(--hasad-green-800)}
/* منطقة المحتوى هدف تركيز برمجي فقط؛ لا حلقة حول الحاوية كاملة. */
#app #view[tabindex="-1"]:focus{outline:none}
/* عنوان الصفحة هدف تركيز برمجي لإعلان قارئات الشاشة فقط؛ لا مربع مرئي حوله (تبقى الإتاحة لأنه يتلقى التركيز فعلاً). */
#app :is(h1,h2)[tabindex="-1"]:is(:focus,:focus-visible){outline:none;box-shadow:none}
/* حقل نموذج يُخفى بالخاصية hidden يجب أن يختفي فعلاً (تخطيط label:grid كان يُبقي حقل «سبب التغيير» الفارغ ظاهراً). */
.modal-form [hidden]{display:none!important}

/* Legacy department landing cards also use one identity; their structure stays intact. */
#app :is(.department-portal-card,.department-page),
#app :is(.department-portal-card,.department-page)[class]{
  --department:#0c7259;
  --department-deep:#063b35;
  --department-accent:#0c7259;
  --department-soft:#eaf5f0;
}
#app .department-portal-card{
  border-color:#d8e1dd;
  border-radius:16px;
  background:radial-gradient(circle at 50% -15%,rgba(12,114,89,.08),transparent 48%),linear-gradient(155deg,#fff 12%,#fbfaf7 100%);
  box-shadow:var(--hasad-shadow-sm);
}
#app .department-portal-card:hover{transform:translateY(-3px);box-shadow:var(--hasad-shadow-md)}
#app :is(.department-portal-icon,.department-page-icon){
  border-radius:14px;
  color:#f4dda4;
  background:linear-gradient(145deg,var(--hasad-green-700),var(--hasad-green-900));
  box-shadow:0 9px 20px rgba(6,59,53,.15);
}
#app .department-page-head{
  border-color:#d8e1dd;
  border-radius:14px;
  background:linear-gradient(145deg,#fffefa,#f4f6f2);
  box-shadow:var(--hasad-shadow-sm);
}
#app .department-section-group-title{color:var(--hasad-green-800)}

/* Meetings and unified reports may use semantic warning colours, never section blue/purple. */
#app .legal-meeting-summary article{
  border-color:#d8e1dd;
  background:linear-gradient(145deg,#fff,#f4f6f2);
}
#app .legal-meeting-summary strong{color:var(--hasad-green-800)}
#app .meeting-handoff-status{background:#eaf5f0;color:var(--hasad-green-800)}
#app .meeting-outcome{border-inline-start-color:var(--hasad-green-700);background:#eef7f3}
#app .meeting-history article{border-inline-start-color:var(--hasad-green-700)}
#app .vc-stage{border-top-color:var(--hasad-green-700)}
#app .vc-stage.lens-t{border-top-color:var(--hasad-green-700)}
#app .vc-stage.lens-c{border-top-color:var(--hasad-green-800)}
#app .vc-stage.lens-m{border-top-color:#3f7d6a}
#app .vc-stage.lens-x{border-top-color:var(--hasad-gold-500);background:#fffdf7}
#app .vc-line-positive{stroke:var(--hasad-green-700)}

/* Department workspaces follow the same quiet white, green and gold reference. */
#app .targeting-workspace{
  --text:#17332c;
  --navy:#064c3f;
  --gold:#c8a252;
  border:0;
  background:#f5f7f5;
  color:#17332c;
}
#app .department-workspace-main{background:#f5f7f5}
#app .targeting-workspace-head{
  min-height:var(--department-heading-height);
  height:var(--department-heading-height);
  padding:18px 30px 12px;
  border-radius:0;
  border-bottom:0;
  background:#fffefa;
  color:#064c3f;
}
#app .targeting-workspace-head h1{margin:3px 0 0;color:#043f35;font-size:clamp(25px,2.1vw,34px);font-weight:900}
#app .targeting-eyebrow{color:#b3832e}
#app .targeting-workspace-tabs-row{border-bottom:1px solid #dde6e1;background:#fffefa}
#app .targeting-workspace-tabs-row>.targeting-workspace-tabs{border-bottom:0}
#app .targeting-workspace-tabs{
  justify-content:flex-start;
  gap:8px;
  padding:0 25px;
  border-bottom:1px solid #dde6e1;
  background:#fffefa;
}
#app .workspace-document-tool{color:#64766e}
#app .workspace-document-tool:hover,#app .workspace-document-tool:focus-visible{border-color:#d8e3de;background:#eaf5f0;color:#064c3f}
#app .workspace-document-tool .hasad-word-icon{background:var(--hasad-green-800);color:#fff}
#app .targeting-workspace-tabs button{
  min-height:54px;
  padding:12px 16px;
  border-radius:0;
  color:#64766e;
}
#app .targeting-workspace-tabs button:hover{background:transparent;color:#064c3f}
#app .targeting-workspace-tabs button[aria-current="page"]{
  background:transparent;
  color:#064c3f;
  box-shadow:inset 0 -2px #c8a252;
}
#app .targeting-workspace-sections{
  gap:6px;
  padding:8px 24px;
  border-bottom:0;
  background:#f5f7f5;
}
#app .targeting-workspace-sections:empty{display:none}
#app .targeting-workspace-sections button{
  border:1px solid transparent;
  border-radius:8px;
  color:#66776f;
  background:transparent;
}
#app .targeting-workspace-sections button[aria-current="page"]{
  border-color:#b9ddcf;
  background:#e9f5f0;
  color:#08705b;
  box-shadow:none;
}
#app .targeting-workspace [data-workspace-body]{padding-inline:24px;background:#f5f7f5}
#app .targeting-kpi{border-color:#d8e1dd;border-inline-start-color:var(--hasad-gold-500);color:var(--hasad-green-900);box-shadow:var(--hasad-shadow-sm)}
#app .targeting-workspace :is(.panel,.campaign-file,.agent-command-shell>*,.outbound-lead-row){border-color:#d8e1dd;box-shadow:var(--hasad-shadow-sm)}
#app .targeting-workspace thead th{background:#f4f6f2;color:#405b51}

/* Accounting keeps its compact information architecture and adopts HASAD colours. */
#app .accounting-workspace{
  --aw-navy:#063b35;
  --aw-gold:#c8a55b;
  --aw-line:#d8e1dd;
  border-color:var(--aw-line);
  border-top:0;
  background:#f4f6f2;
  color:#17332c;
}
#app .aw-sidebar{
  background:
    radial-gradient(circle at 16% 7%,rgba(251,250,247,.09),transparent 17rem),
    radial-gradient(circle at 90% 16%,rgba(200,165,91,.13),transparent 14rem),
    linear-gradient(155deg,#063b35,#042b27 72%,#041f1b);
}
#app .aw-brand strong{color:#e1c783}
#app .aw-sidebar nav button{color:#dce9e4;border-radius:7px}
#app .aw-sidebar nav button span{color:#cdb77d}
#app .aw-sidebar nav button[aria-current]{border-inline-start-color:var(--aw-gold);background:rgba(251,250,247,.10);color:#fff3d2}
#app .aw-top h1,
#app .aw-panel h2,
#app .aw-kpis strong{color:var(--hasad-green-900)}
#app .aw-primary{border-color:var(--hasad-green-800);background:var(--hasad-green-800);color:#fff}
#app .aw-primary:hover{background:var(--hasad-green-900)}
#app .aw-button{border-color:#cbdad4;color:var(--hasad-green-800)}
#app .accounting-workspace :is(button,input,select,textarea):focus-visible{outline:2px solid var(--aw-navy);outline-offset:2px}
#app .accounting-workspace :is(.aw-kpis small,.aw-top p,.aw-empty,.aw-report-heading p){color:var(--muted)}
#app :is(.aw-kpis small,.aw-top p,.aw-report-heading p){font-size:12px}
#app .aw-ribbon button,
#app .accounting-workspace th{background:#f4f6f2;color:#50645c}
#app .aw-kpis>section{border-color:var(--aw-line);border-top-color:var(--aw-gold);border-radius:9px}
#app .aw-panel{border-color:var(--aw-line);border-radius:9px}
#app .aw-status-posted,
#app .aw-status-paid,
#app .aw-status-matched{background:#e7f3ed;color:#24634f}

/* Claims register: one framed claim, three lines.
   Line 1 (identity strip, 8 cells): 1 number · 2 date · 3 subject · 4 status · 5 client · 6 debtor · 7 value · 8 owner.
   Line 2: 9 claim position (right) · 10 next action (left).   Line 3: 11 client position (right) · 12 debtor position (left).
   The row is emitted by collectionClaimRows (app.js); the next action lives only in cell 10. */
@media screen{
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table-wrap{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:0;border-radius:0;background:transparent}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table,
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table thead,
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody{display:block;width:100%;min-width:0}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table thead{position:sticky;top:0;z-index:4;margin-bottom:8px;overflow:hidden;border:1px solid #d8e1dd;border-radius:9px;background:#f4f6f2}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table thead tr,
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr{display:grid;grid-template-columns:minmax(104px,.85fr) minmax(88px,.7fr) minmax(120px,1.1fr) minmax(88px,.7fr) minmax(130px,1.1fr) minmax(120px,1.1fr) minmax(92px,.8fr) minmax(92px,.8fr)}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table thead th{position:static;padding:10px 12px;border:0;background:transparent;color:#50645c;font-size:.71rem;text-align:start}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody{display:grid;gap:10px;background:transparent}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr{overflow:hidden;border:1px solid #b9d0c7;border-radius:11px;background:#fff;box-shadow:0 0 0 1px rgba(9,90,71,.035),0 5px 16px rgba(4,31,27,.06)}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr:nth-child(even){border-color:#afcbbf;background:#f3faf6}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr:hover{border-color:#8fb9a9;background:#fff;box-shadow:0 0 0 1px rgba(9,90,71,.08),0 8px 22px rgba(4,31,27,.09)}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td{display:block;width:auto!important;min-width:0!important;padding:12px;border:0;background:#fff;line-height:1.5}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr:nth-child(even) td{background:#f3faf6}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(9),
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(11){grid-column:1/5}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(9),
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(11){border-inline-end:1px solid #b9d0c7}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(10),
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(12){grid-column:5/9}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claim-box{margin:0;padding:10px 16px!important;overflow:visible;border-radius:0;box-shadow:none}
  #app .collection-claim-box-title{padding:0 0 6px;border:0;background:transparent;color:var(--hasad-green-800);font-size:.78rem;font-weight:900;text-align:center}
  #app .collection-claim-red-reason{margin-top:6px;color:#b42318;font-size:.8rem;font-weight:800;text-align:start}
  #app .collection-team-profile td{padding:0 12px 14px;border-top:0}
  #app .collection-team-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
  #app .collection-team-metric{display:grid;gap:4px;align-content:start;padding:10px 12px;border:1px solid #d6e4dd;border-radius:10px;background:#fff}
  #app .collection-team-metric>span{color:#5f7a6f;font-size:.78rem;font-weight:800}
  #app .collection-team-metric>b{font-size:1.15rem;font-weight:900;color:var(--hasad-green-800)}
  #app .collection-team-metric small{color:#5f7a6f;font-size:.76rem;font-weight:700}
  #app .collection-team-metric.warn>b{color:#a15c07}
  #app .collection-team-metric.bad>b{color:#b42318}
  #app .collection-team-metric.bad{border-color:#f1b5ad;background:#fffafa}
  #app .collection-team-waiting{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.8rem;font-weight:700;color:#35564a}
  #app .collection-team-bars{display:flex;align-items:flex-end;gap:4px;height:34px}
  #app .collection-team-bars i{flex:1;border-radius:3px 3px 0 0;background:#2f7d5b}
  #app .collection-team-bars i.b1{height:10%}
  #app .collection-team-bars i.b2{height:20%}
  #app .collection-team-bars i.b3{height:30%}
  #app .collection-team-bars i.b4{height:40%}
  #app .collection-team-bars i.b5{height:50%}
  #app .collection-team-bars i.b6{height:60%}
  #app .collection-team-bars i.b7{height:70%}
  #app .collection-team-bars i.b8{height:80%}
  #app .collection-team-bars i.b9{height:90%}
  #app .collection-team-bars i.b10{height:100%}
  #app .collection-team-bars i.zero{background:#d6e4dd}
  #app .collection-team-bars i.rest{opacity:.45}
  @media (max-width:1180px){#app .collection-team-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
  #app .collection-team-states{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  #app .collection-team-state{display:grid;gap:6px;align-content:start;padding:10px 12px;border:1px solid #d6e4dd;border-radius:10px;background:#fbfdfc}
  #app .collection-team-state.has-red{border-color:#f1b5ad;background:#fffafa}
  #app .collection-team-state.is-empty{opacity:.65}
  #app .collection-team-state-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0;border:0;background:transparent;color:var(--hasad-green-800);font:inherit;font-weight:900;cursor:pointer}
  #app .collection-team-state-head b{font-size:1.15rem}
  #app .collection-team-state-red{color:#b42318;font-size:.82rem;font-weight:900}
  #app .collection-team-state-ok,#app .collection-team-state-note{color:#5f7a6f;font-size:.78rem;font-weight:700}
  @media (max-width:1180px){#app .collection-team-states{grid-template-columns:repeat(2,minmax(0,1fr))}}
  #app .collection-team-kinds{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
  #app .collection-team-kind{display:inline-flex;gap:4px;align-items:center;padding:3px 10px;border:1px solid #f1b5ad;border-radius:999px;background:#fff5f4;color:#b42318;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
  #app .collection-team-kind b{font-size:.9rem}
  #app .collection-team-kind:hover,#app .collection-team-kind:focus-visible{background:#fde4e1;outline-offset:2px}
  #app button.collection-position-edit{display:block;width:100%;margin:0;font-family:inherit;line-height:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
  #app button.collection-position-edit:hover,#app button.collection-position-edit:focus-visible{text-decoration-style:solid;outline-offset:2px}
  #app .collection-claim-box-body{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}
  #app .collection-claim-position-box .collection-claim-box-body{grid-template-columns:1fr}
  #app .collection-claim-box-line{display:grid;align-content:start;gap:4px;min-width:0;padding:10px 12px}
  #app .collection-claim-box-line small{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0;color:#4e675e;font-size:.68rem}
  #app .collection-follow-date{margin:0!important;color:var(--muted)!important;font-size:.75rem;white-space:nowrap}
  #app .collection-claim-box-line>b{color:#17332c;font-size:.8rem;line-height:1.65}
  #app .collection-claim-box-text{padding:10px 12px;color:#17332c;font-size:.84rem;font-weight:600;line-height:1.75}
  #app .collection-claim-box.is-escalated .collection-claim-box-title{background:transparent;color:#b42318}
  #app .collection-claim-box.is-escalated .collection-claim-box-text,#app .collection-claim-box.is-escalated .collection-claim-box-line b,#app .collection-claim-box.is-escalated .collection-follow-date{color:#8a1f12!important;font-weight:900}
  #app .collection-follow-next.is-overdue .collection-follow-date{color:var(--red)!important;font-weight:900}
}

@media screen and (max-width:1180px){
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table thead{display:none}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(n){grid-column:auto;grid-row:auto}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(n+9){grid-column:1/-1}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(-n+8)::before{display:block;margin-bottom:5px;color:#718078;font-size:.64rem;font-weight:800}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(1)::before{content:"رقم المطالبة"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(2)::before{content:"تاريخ المطالبة"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(3)::before{content:"موضوع المطالبة"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(4)::before{content:"الحالة"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(5)::before{content:"الموكّل"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(6)::before{content:"المدين"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(7)::before{content:"قيمة المطالبة"}
  html[dir="rtl"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(8)::before{content:"المسؤول"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(1)::before{content:"Claim number"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(2)::before{content:"Claim date"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(3)::before{content:"Claim subject"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(4)::before{content:"Status"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(5)::before{content:"Client"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(6)::before{content:"Debtor"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(7)::before{content:"Claim value"}
  html[dir="ltr"] #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody td:nth-child(8)::before{content:"Responsible"}
}

@media screen and (max-width:760px){
  #app .organization-navigation-stack,
  #app .organization-navigation-stack[data-active-department]{height:auto}
  #app .targeting-workspace-head{height:auto;min-height:0}
}

@media screen and (max-width:720px){
  #app .topbar{padding-inline:10px}
  #app .view{padding:16px 12px 26px}
  #app .view.has-organization-sidebar{padding:0}
  #app .organization-navigation-stack{border-radius:0}
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr{grid-template-columns:1fr 1fr}
}

@media screen and (max-width:480px){
  #app :is(.collection-claims-index,.client-claim-roll) .collection-claims-table tbody tr{grid-template-columns:1fr}
}

@media print{
  #app{background:#fff}
}
/* Department header (title + tabs) shares the sidebar HASAD block's exact height, so both bottom edges align
 * without enlarging the top bar. Desktop only; the mobile stack keeps its own auto heights. */
@media screen and (min-width:761px){
  #app{--department-tabs-height:54px}
  #app .targeting-workspace-head{flex-basis:calc(var(--department-heading-height) - var(--department-tabs-height));height:calc(var(--department-heading-height) - var(--department-tabs-height));min-height:0;padding-block:0;align-items:center}
  #app .targeting-workspace-head h1{margin:0;line-height:1.2}
  #app .targeting-workspace-tabs-row{flex:0 0 var(--department-tabs-height);height:var(--department-tabs-height);box-sizing:border-box}
  #app .targeting-workspace-tabs-row>.targeting-workspace-tabs{padding-block:0;align-items:center}
  #app .accounting-workspace .aw-top{flex-basis:calc(var(--department-heading-height) - var(--department-tabs-height));height:calc(var(--department-heading-height) - var(--department-tabs-height));padding-block:0;align-items:center}
  #app .accounting-workspace .aw-section-tabs-row{flex:0 0 var(--department-tabs-height);height:var(--department-tabs-height);box-sizing:border-box;border-top:0}
  #app .accounting-workspace .aw-section-tabs-row>.aw-section-tabs{padding-block:0;align-items:center}
}