:root{
  --paper:#F7F4EC; --paper-2:#EFEADA; --card:#FFFFFF;
  --ink:#1B2430; --ink-soft:#5B6472; --line:#E2DCC8;
  --gold:#B8863E; --gold-dim:#8C6529; --cream:#1B2430; --muted:#5B6472;
  --axis1:#B8863E; --axis2:#2F8F72; --axis3:#7C63C2;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  font-family:'Almarai',sans-serif;
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
}
html{scroll-behavior:smooth;}
.wrap{max-width:1100px; margin:0 auto; padding:0 1.5rem;}
h1,h2,h3{font-family:'Tajawal',sans-serif; font-weight:800;}

/* ---------- scroll reveal (paired with js/reveal.js) ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- NAV ---------- */
nav{
  border-bottom:1px solid var(--line);
  padding:1.1rem 0;
  position:sticky; top:0; z-index:50;
  background:rgba(247,244,236,.85);
  backdrop-filter:blur(10px);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between;}
.logo-row{display:flex; align-items:center; gap:12px;}
.logo{width:40px; height:40px; border-radius:50%; border:2px solid var(--gold); object-fit:cover; display:block;}
.logo-text{font-family:'Tajawal',sans-serif; font-weight:800; font-size:18px;}
.nav-links{display:flex; gap:1.5rem; align-items:center;}
.nav-links a{color:var(--muted); text-decoration:none; font-size:14px; transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.btn{
  display:inline-block; background:var(--ink); color:var(--paper);
  font-weight:700; padding:10px 26px; border-radius:999px;
  text-decoration:none; font-size:14px; border:none; cursor:pointer;
  font-family:'Almarai',sans-serif;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(27,36,48,.18);}
.btn-outline{background:transparent; border:1.5px solid var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn:disabled{opacity:0.5; cursor:not-allowed; transform:none;}

/* ---------- HERO ---------- */
.hero{padding:6rem 0 4.5rem; text-align:center; position:relative;}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 50% 0%, rgba(184,134,62,.10), transparent 60%);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold); font-size:13px; font-weight:700; letter-spacing:1px; margin-bottom:1.1rem;
  animation:fadeUp .7s ease both;
}
.hero h1{
  font-size:44px; line-height:1.35; margin-bottom:1.25rem; max-width:800px; margin-inline:auto;
  animation:fadeUp .8s ease both .1s;
}
.hero h1 span{color:var(--gold);}
.hero p{
  color:var(--muted); font-size:17px; max-width:620px; margin:0 auto 2rem;
  animation:fadeUp .8s ease both .2s;
}
.hero-ctas{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  animation:fadeUp .8s ease both .3s;
}

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

/* ---------- SECTIONS ---------- */
.section{padding:4.5rem 0; border-top:1px solid var(--line);}
.section-head{text-align:center; margin-bottom:3rem;}
.section-head .eyebrow{color:var(--gold); font-size:12.5px; font-weight:700; margin-bottom:8px; display:block;}
.section-head h2{font-size:28px; margin-bottom:12px;}
.section-head p{color:var(--muted); max-width:600px; margin:0 auto; font-size:15px;}

/* ---------- PROBLEM / SOLUTION ---------- */
.problem-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center;}
@media (max-width:800px){.problem-grid{grid-template-columns:1fr;}}
.problem-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.75rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.problem-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(27,36,48,.08);}
.problem-card.old{opacity:0.75;}
.problem-card h3{font-size:15px; margin-bottom:1rem; color:var(--muted);}
.flow-step{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; color:var(--muted);}
.flow-step.repeat{color:#C15B4A;}
.flow-arrow{color:var(--gold); text-align:center; font-size:24px;}

/* ---------- TAM STEPS (connected timeline) ---------- */
.tam-steps{
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:2rem;
  position:relative;
}
.tam-steps::before{
  content:''; position:absolute; top:28px; left:8%; right:8%; height:2px;
  background:var(--line); z-index:0;
}
@media (max-width:900px){.tam-steps{grid-template-columns:repeat(3,1fr);} .tam-steps::before{display:none;}}
@media (max-width:520px){.tam-steps{grid-template-columns:1fr;}}
.tam-step{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:1.1rem 0.9rem; text-align:center; position:relative; z-index:1;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tam-step:hover{transform:translateY(-5px); box-shadow:0 14px 28px rgba(184,134,62,.15); border-color:var(--gold);}
.tam-step .num{
  width:28px; height:28px; border-radius:50%; background:var(--gold); color:var(--paper);
  font-family:'Tajawal',sans-serif; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
}
.tam-step .label{font-size:12.5px; font-weight:700; line-height:1.5;}

/* ---------- AXES ---------- */
.axes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
@media (max-width:800px){.axes-grid{grid-template-columns:1fr;}}
.axis-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1.5rem; border-top:3px solid var(--axis-color);
  transition:transform .3s ease, box-shadow .3s ease;
}
.axis-card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(27,36,48,.10);}
.axis-card .weight{font-family:'Tajawal',sans-serif; font-weight:800; font-size:30px; color:var(--axis-color);}
.axis-card h3{font-size:16px; margin:10px 0 8px;}
.axis-card p{color:var(--muted); font-size:13.5px;}

footer{border-top:1px solid var(--line); padding:2.5rem 0; text-align:center; color:var(--muted); font-size:13px;}

/* ---------- AUTH PAGES ---------- */
.auth-wrap{min-height:calc(100vh - 73px); display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem;}
.auth-card{
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:2.5rem;
  width:100%; max-width:400px; box-shadow:0 24px 48px rgba(27,36,48,.08);
  animation:fadeUp .6s ease both;
}
.auth-card .logo{width:56px; height:56px; margin:0 auto 1.25rem; display:block;}
.auth-card h1{font-size:22px; text-align:center; margin-bottom:6px;}
.auth-card .sub{color:var(--muted); font-size:13.5px; text-align:center; margin-bottom:2rem;}
.field{margin-bottom:1.1rem;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
.field input{
  width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
  padding:11px 14px; border-radius:10px; font-size:14px; font-family:'Almarai',sans-serif;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,134,62,.15);}
.auth-submit{width:100%; margin-top:0.5rem; padding:12px;}
.auth-alert{
  background:rgba(193,91,74,0.08); border:1px solid #C15B4A; color:#C15B4A;
  font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:1.1rem; display:none;
}
.auth-alert.show{display:block;}
.auth-foot{text-align:center; margin-top:1.5rem; font-size:12.5px; color:var(--muted);}

/* ---------- ORG DASHBOARD ---------- */
.org-section{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.75rem; margin-bottom:1.5rem;}
.org-section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.org-section-head h2{font-size:16px;}
.org-section-head .btn{padding:6px 16px; font-size:12.5px;}
.doc-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.doc-row:last-child{border-bottom:none;}
.doc-row .doc-title{display:flex; align-items:center; gap:10px;}
.doc-type{background:var(--paper-2); color:var(--muted); font-size:10.5px; padding:2px 8px; border-radius:999px; text-transform:uppercase;}
.doc-actions a{color:var(--gold); text-decoration:none; font-size:12.5px; margin-inline-start:12px; transition:color .2s;}
.doc-actions a:hover{color:var(--gold-dim);}
.doc-empty{color:var(--muted); font-size:13px; text-align:center; padding:1.5rem 0;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
}


/* axis style  */

  .crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:2rem 0 1.5rem;}
  .crumbs a{color:var(--muted); text-decoration:none; transition:color .2s;}
  .crumbs a:hover{color:var(--ink);}
  .crumbs .sep{opacity:.5;}
  .crumbs .current{color:var(--ink); font-weight:700;}

  .axis-header{
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:1.75rem 2rem; margin-bottom:2rem;
    border-inline-start:4px solid var(--axis-color, var(--gold));
  }
  .axis-header .badge{
    width:56px; height:56px; border-radius:14px; flex-shrink:0;
    background:var(--axis-color, var(--gold)); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Tajawal',sans-serif; font-weight:800; font-size:22px;
  }
  .axis-header h1{font-size:22px; margin-bottom:4px;}
  .axis-header .meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);}
  .axis-header .weight-pill{
    background:var(--paper-2); color:var(--axis-color, var(--gold)); font-weight:700;
    padding:3px 12px; border-radius:999px; font-size:12.5px;
  }

  /* ---------- NEW: axis score block (ring + status pill) ---------- */
  .axis-score-block{
    margin-inline-start:auto; display:flex; align-items:center; gap:14px;
  }
  @media (max-width:640px){.axis-score-block{margin-inline-start:0; width:100%; border-top:1px solid var(--line); padding-top:1rem;}}
  .axis-score-ring{
    width:64px; height:64px; border-radius:50%; flex-shrink:0; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:conic-gradient(var(--ring-color, var(--gold)) calc(var(--pct,0) * 1%), var(--line) 0);
    transition:background 1.2s cubic-bezier(.2,.8,.2,1);
  }
  .axis-score-ring::before{content:''; position:absolute; inset:6px; background:var(--card); border-radius:50%;}
  .axis-score-ring .num{position:relative; font-family:'Tajawal',sans-serif; font-weight:800; font-size:15px;}
  .axis-status-pill{
    display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
    padding:6px 14px; border-radius:999px; white-space:nowrap;
  }
  .axis-status-pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}

  .summary-panel{
    background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,247,250,.88));
    border:1px solid var(--line); border-radius:22px; padding:1.5rem 1.6rem; margin-bottom:1.8rem;
    box-shadow:0 18px 36px rgba(23,35,52,.06);
  }
  .summary-kicker{
    display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:12px;
  }
  .summary-kicker::before{
    content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--axis-color, var(--gold)); box-shadow:0 0 0 5px rgba(143,156,170,.12);
  }
  .summary-panel h2{
    margin:0 0 14px; font-size:20px; line-height:1.6; color:var(--ink);
  }
  .summary-panel p{
    margin:0; max-width:760px; color:var(--muted); line-height:1.9; font-size:14px;
  }
  .summary-metrics{
    margin-top:1.2rem; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
  }
  .summary-metric{
    background:var(--paper-2); border:1px solid rgba(20,31,42,.06); border-radius:14px; padding:12px 14px;
  }
  .summary-metric .label{font-size:11px; color:var(--muted); margin-bottom:4px;}
  .summary-metric .value{font-size:18px; font-weight:800; color:var(--ink);}
  @media (max-width:700px){.summary-metrics{grid-template-columns:1fr;}}

  .sub-section{margin-bottom:2.5rem;}
  .sub-head{display:flex; align-items:baseline; gap:10px; margin-bottom:1.1rem;}
  .sub-head .letter{
    width:30px; height:30px; border-radius:8px; background:var(--axis-color, var(--gold));
    color:#fff; font-family:'Tajawal',sans-serif; font-weight:800; font-size:14px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .sub-head h2{font-size:16.5px;}
  .sub-head .count{font-size:12.5px; color:var(--muted);}

  .indicator-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  @media (max-width:700px){.indicator-grid{grid-template-columns:1fr;}}

  .indicator-card{
    display:flex; align-items:center; gap:16px;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:1.1rem 1.3rem; text-decoration:none; color:inherit;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    opacity:0; transform:translateY(14px); animation:cardIn .5s ease forwards;
  }
  .indicator-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 32px rgba(27,36,48,.10);
    border-color:var(--axis-color, var(--gold));
  }
  .indicator-card .code{
    font-family:'Tajawal',sans-serif; font-weight:800; font-size:16px;
    color:var(--axis-color, var(--gold));
    background:var(--paper-2); width:52px; height:52px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .indicator-card .name{font-size:14px; font-weight:700; line-height:1.5;}

  /* ---------- NEW: per-indicator score ring (replaces the plain arrow) ---------- */
  .indicator-ring{
    width:44px; height:44px; border-radius:50%; flex-shrink:0; position:relative;
    display:flex; align-items:center; justify-content:center; margin-inline-start:auto;
    background:conic-gradient(var(--ring-color, var(--gold)) calc(var(--pct,0) * 1%), var(--line) 0);
    transition:background 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .indicator-ring::before{content:''; position:absolute; inset:4px; background:var(--card); border-radius:50%;}
  .indicator-ring .num{position:relative; font-family:'Tajawal',sans-serif; font-weight:800; font-size:12px;}

  @keyframes cardIn{ to{opacity:1; transform:translateY(0);} }

  .pending-state{
    background:var(--card); border:1px dashed var(--line); border-radius:16px;
    padding:3rem 2rem; text-align:center; color:var(--muted);
  }
  .pending-state .icon{font-size:32px; margin-bottom:12px; opacity:.6;}
  .pending-state h3{color:var(--ink); font-size:16px; margin-bottom:6px; font-family:'Tajawal',sans-serif;}
  .pending-state p{font-size:13.5px; max-width:360px; margin:0 auto;}

  .back{font-size:13px; color:var(--muted); text-decoration:none; display:inline-block; margin:0.5rem 0 3rem; transition:color .2s;}
  .back:hover{color:var(--ink);}
/* end axis style */
/*dashbourd css style */
.who{display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--muted);}
.who button{
  background:none; border:1px solid var(--line); color:var(--muted); font-size:12.5px;
  padding:7px 16px; border-radius:999px; cursor:pointer; font-family:'Almarai',sans-serif; transition:all .2s ease;
}
.who button:hover{border-color:var(--ink); color:var(--ink);}

.dash-switch{display:flex; gap:8px; margin:2.2rem 0 1.5rem; flex-wrap:wrap;}
.dash-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  padding:8px 18px; border-radius:999px; text-decoration:none; cursor:pointer; border:none;
  font-family:'Almarai',sans-serif; transition:all .2s ease;
}
.dash-pill.current{background:var(--ink); color:#fff;}
.dash-pill.link{background:var(--card); border:1px solid var(--line); color:var(--ink-soft, var(--muted));}
.dash-pill.link:hover{border-color:var(--gold); color:var(--ink);}

.exec-header{border-radius:20px; margin-bottom:1.5rem; background:var(--card); border:1px solid var(--line);}
.exec-brand-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1rem 1.75rem; border-bottom:1px solid var(--line);}
.exec-brand-row .torus-mark{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); font-weight:700;}
.exec-brand-row .torus-mark img{width:20px; height:20px; border-radius:5px;}
.exec-brand-row .report-date{font-size:11px; color:var(--muted);}

.exec-main{display:flex; align-items:center; gap:2rem; flex-wrap:wrap; padding:1.75rem;}
.exec-identity{display:flex; align-items:center; gap:14px;}
.exec-identity img, .exec-identity .fallback{
  width:56px; height:56px; border-radius:16px; border:2px solid var(--org-color, var(--gold));
  object-fit:cover; background:var(--paper-2); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Tajawal',sans-serif; font-weight:900; font-size:20px; color:var(--org-color, var(--gold));
}
.exec-identity h1{font-size:19px; margin-bottom:5px;}
.exec-identity .type-chip{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--org-color, var(--gold));
  background:var(--paper-2); padding:3px 10px; border-radius:999px;
}

.overall-block{display:flex; align-items:center; gap:1.25rem; margin-inline-start:auto;}
@media (max-width:720px){.overall-block{margin-inline-start:0; width:100%; border-top:1px solid var(--line); padding-top:1.25rem;}}

.ring-lg{
  width:96px; height:96px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;
  background:conic-gradient(var(--ring-color, var(--gold)) calc(var(--pct,0) * 1%), var(--paper-2) 0);
  transition:background 1.4s cubic-bezier(.2,.8,.2,1);
}
.ring-lg::before{content:''; position:absolute; inset:9px; background:var(--card); border-radius:50%;}
.ring-lg .num{position:relative; font-family:'Tajawal',sans-serif; font-weight:900; font-size:22px;}
.ring-lg .num small{font-size:10px; font-weight:700; color:var(--muted); display:block;}
.overall-text .label{font-size:11px; color:var(--muted); margin-bottom:3px;}
.overall-text .verdict{font-family:'Tajawal',sans-serif; font-weight:800; font-size:16px;}
.overall-text .note{font-size:11px; color:var(--muted); margin-top:4px; max-width:230px; line-height:1.6;}

.compare-panel{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.75rem; margin-bottom:1.5rem;}
.compare-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:8px;}
.compare-head h2{font-size:14.5px; font-weight:700; color:var(--ink);}
.compare-head .sub{font-size:11.5px; color:var(--muted);}
.compare-row{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.compare-row:last-child{margin-bottom:0;}
.compare-label{width:230px; flex-shrink:0; font-size:12.5px; font-weight:700; line-height:1.4;}
.compare-label .weight{font-weight:400; color:var(--muted); font-size:11px;}
.compare-track{flex:1; height:10px; background:var(--paper-2); border-radius:999px; overflow:hidden; position:relative;}
.compare-fill{height:100%; border-radius:999px; width:0%; transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.compare-score{width:34px; text-align:left; font-family:'Tajawal',sans-serif; font-weight:800; font-size:14px; flex-shrink:0;}
@media (max-width:700px){.compare-row{flex-wrap:wrap;} .compare-label{width:100%;}}

.summary-strip{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0.9rem; margin:0 0 1.5rem;}
.mini-kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0.9rem 1rem;}
.mini-kpi .label{display:block; font-size:10.5px; color:var(--muted); margin-bottom:8px;}
.mini-kpi .value{display:flex; align-items:flex-end; justify-content:space-between; gap:8px;}
.mini-kpi .num{font-family:'Tajawal',sans-serif; font-weight:800; font-size:23px; line-height:1; color:var(--ink);}
.mini-kpi .num.status-red{color:#C15B4A;} .mini-kpi .num.status-yellow{color:#A9821F;} .mini-kpi .num.status-green{color:#2F8F72;}
.mini-kpi .unit{font-size:10.5px; color:var(--muted); padding-bottom:3px;}
@media (max-width:760px){.summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:500px){.summary-strip{grid-template-columns:1fr;}}

.axis-block{background:var(--card); border:1px solid var(--line); border-radius:18px; margin-bottom:1.25rem; overflow:hidden;}
.axis-block-head{display:flex; align-items:center; gap:1.25rem; padding:1.4rem 1.75rem; flex-wrap:wrap; border-inline-start:4px solid var(--axis-color, var(--gold)); background:var(--paper);}
.ring-md{
  width:64px; height:64px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--ring-color, var(--axis-color)) calc(var(--pct,0) * 1%), var(--line) 0);
  transition:background 1.1s cubic-bezier(.2,.8,.2,1);
}
.ring-md::before{content:''; position:absolute; inset:6px; background:var(--card); border-radius:50%;}
.ring-md .num{position:relative; font-family:'Tajawal',sans-serif; font-weight:800; font-size:14px;}
.ring-md .num small{font-size:8.5px; color:var(--muted); display:block; font-weight:700;}

.axis-block-title{font-size:15px; font-weight:700; margin-bottom:3px;}
.axis-block-weight{font-size:11.5px; color:var(--muted);}
.axis-status-pill{margin-inline-start:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; flex-shrink:0;}
.axis-status-pill.red{background:rgba(193,91,74,.1); color:#C15B4A;}
.axis-status-pill.yellow{background:rgba(200,160,40,.12); color:#A9821F;}
.axis-status-pill.green{background:rgba(47,143,114,.1); color:#2F8F72;}
.axis-status-pill.pending{background:var(--paper-2); color:var(--muted);}
.axis-status-pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.axis-indicators{padding:1.25rem 1.75rem 1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
.ind-card{display:flex; align-items:center; gap:12px; padding:1rem 1.1rem; background:var(--paper); border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; transition:border-color .2s ease, transform .2s ease;}
.ind-card:hover{transform:translateY(-2px); border-color:var(--ring-color);}

.ring-sm{
  width:46px; height:46px; border-radius:50%; flex-shrink:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--ring-color, var(--gold)) calc(var(--pct,0) * 1%), var(--line) 0);
}
.ring-sm::before{content:''; position:absolute; inset:4px; background:var(--paper); border-radius:50%;}
.ring-sm .num{position:relative; font-family:'Tajawal',sans-serif; font-weight:800; font-size:12px;}
.ind-card-body{flex:1; min-width:0;}
.ind-card-code{font-size:10px; font-weight:700; color:var(--muted); margin-bottom:2px; letter-spacing:.3px;}
.ind-card-name{font-size:12px; font-weight:700; line-height:1.35; margin-bottom:4px;}
.ind-card-issue{font-size:10.5px; line-height:1.5; color:var(--muted);}
.ind-card-issue strong{color:var(--ink); font-weight:700;}

.axis-pending-note{padding:2rem; text-align:center; color:var(--muted); font-size:13px;}

.final-analysis{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.75rem; margin-bottom:2rem;}
.final-analysis-head{display:flex; align-items:center; gap:10px; margin-bottom:1.25rem;}
.final-analysis-head .fa-icon{width:34px; height:34px; border-radius:10px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
.final-analysis-head h2{font-size:15.5px;}
.final-analysis-head .sub{font-size:11.5px; color:var(--muted);}

.fa-priority-list{margin-bottom:1.25rem;}
.fa-priority-row{display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--line);}
.fa-priority-row:last-child{border-bottom:none;}
.fa-rank{
  width:24px; height:24px; border-radius:7px; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Tajawal',sans-serif; font-weight:800; font-size:11px; color:#fff;
}
.fa-rank.red{background:#C15B4A;} .fa-rank.yellow{background:#A9821F;} .fa-rank.green{background:#2F8F72;}
.fa-priority-text{flex:1;}
.fa-priority-text .title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px;}
.fa-priority-text .title{font-size:13px; font-weight:700;}
.fa-axis-tag{font-size:10px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--paper-2); color:var(--muted);}
.fa-priority-text .desc{font-size:12px; color:var(--muted); line-height:1.6;}
.fa-priority-score{font-family:'Tajawal',sans-serif; font-weight:800; font-size:14px; flex-shrink:0; padding-top:2px;}

.fa-summary{background:var(--paper); border-radius:14px; padding:1.35rem 1.5rem; font-size:13px; color:var(--ink-soft, var(--muted)); line-height:1.85;}
.fa-summary strong{color:var(--ink);}

.back{font-size:13px; color:var(--muted); text-decoration:none; display:inline-block; margin:0.5rem 0 3rem; transition:color .2s;}
.back:hover{color:var(--ink);}
/* end dashbourd style */
/* start of indicator style */
  .crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin:2rem 0 1.5rem; flex-wrap:wrap;}
  .crumbs a{color:var(--muted); text-decoration:none;}
  .crumbs .sep{opacity:.5;}
  .crumbs .current{color:var(--cream); font-weight:700;}

  .ind-header{background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:1.75rem 2rem; margin-bottom:1.5rem; border-inline-start:4px solid var(--axis-color, var(--gold));}
  .ind-header-top{display:flex; align-items:center; gap:18px; margin-bottom:1.5rem;}
  .ind-header .badge{width:56px; height:56px; border-radius:14px; flex-shrink:0; background:var(--axis-color, var(--gold)); color:#0c1b30; display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:800; font-size:15px;}
  .ind-header h1{font-size:20px; margin-bottom:4px;}
  .ind-header .sub{font-size:13px; color:var(--muted);}

  .tam-tracker{display:flex; align-items:center; overflow-x:auto;}
  .tam-tracker .dot-wrap{display:flex; align-items:center; flex:1; min-width:70px;}
  .tam-tracker .dot{width:26px; height:26px; border-radius:50%; background:var(--navy-900); color:var(--muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Tajawal',sans-serif; font-weight:800; font-size:11.5px; border:2px solid var(--card-border);}
  .tam-tracker .dot-wrap.done .dot{background:var(--axis-color, var(--gold)); border-color:var(--axis-color, var(--gold)); color:#0c1b30;}
  .tam-tracker .dot-wrap.current .dot{background:var(--navy-950); border-color:var(--axis-color, var(--gold)); color:var(--axis-color, var(--gold));}
  .tam-tracker .line{flex:1; height:2px; background:var(--card-border); margin:0 4px;}
  .tam-tracker .line.done{background:var(--axis-color, var(--gold));}
  .tam-tracker .stage-label{font-size:10.5px; color:var(--muted); margin-top:6px; text-align:center; display:block; white-space:nowrap;}
  .tam-tracker .dot-wrap.current .stage-label{color:var(--cream); font-weight:700;}

  .tabs-bar{display:flex; gap:4px; border-bottom:1px solid var(--card-border); margin-bottom:2rem; overflow-x:auto;}
  .tab-btn{background:none; border:none; cursor:pointer; padding:12px 20px; font-family:'Almarai',sans-serif; font-size:14px; font-weight:700; color:var(--muted); position:relative; white-space:nowrap;}
  .tab-btn.active{color:var(--cream);}
  .tab-btn.active::after{content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--axis-color, var(--gold));}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}

  /* Survey — add form */
  .add-inline{background:var(--navy-900); border:1px dashed var(--card-border); border-radius:14px; padding:1.2rem 1.4rem; margin-bottom:1.5rem;}
  .add-inline textarea, .add-inline input, .add-inline select{width:100%; background:var(--navy-950); border:1px solid var(--card-border); color:var(--cream); padding:10px 12px; border-radius:10px; font-size:13.5px; font-family:'Almarai',sans-serif; margin-bottom:10px;}
  .add-inline textarea:focus, .add-inline input:focus, .add-inline select:focus{outline:none; border-color:var(--gold);}
  .opt-entry-row{display:grid; grid-template-columns:1fr 100px; gap:8px; margin-bottom:8px; align-items:center;}
  .opt-entry-row input[type=number]{margin-bottom:0; text-align:center;}
  .opt-entry-row .opt-label{font-size:12px; color:var(--muted); margin-bottom:0;}

  /* Survey — question card */
  .q-card{background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:1.3rem 1.5rem; margin-bottom:18px;}
  .q-row-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px;}
  .q-text{font-size:15px; font-weight:700; flex:1;}
  .q-type{font-size:11px; color:var(--muted); background:var(--navy-900); padding:3px 10px; border-radius:999px; flex-shrink:0; white-space:nowrap;}
  .q-actions{display:flex; gap:10px; align-items:center; flex-shrink:0;}
  .q-actions a{color:var(--gold); text-decoration:none; font-size:12px;}
  .q-actions .del{color:#e2685c;}

  .stat-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:1.1rem;}
  @media (max-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr);}}
  @media (max-width:560px){.stat-grid{grid-template-columns:repeat(3,1fr);}}
  .stat-cell{background:var(--navy-900); border-radius:10px; padding:9px 6px; text-align:center;}
  .stat-cell .v{font-family:'Tajawal',sans-serif; font-weight:800; font-size:15px; color:var(--axis-color, var(--gold));}
  .stat-cell .l{font-size:10px; color:var(--muted); margin-top:2px;}

  .freq-table{width:100%; border-collapse:collapse; margin-bottom:1.1rem; font-size:12.5px;}
  .freq-table th{text-align:right; color:var(--muted); font-weight:700; padding:6px 8px; border-bottom:1px solid var(--card-border); font-size:11px;}
  .freq-table td{padding:6px 8px; border-bottom:1px solid var(--card-border); color:var(--cream);}
  .freq-table tr:last-child td{border-bottom:none;}
  .freq-bar-cell{position:relative;}
  .freq-bar-cell .bar-bg{position:absolute; inset:4px 8px; background:var(--navy-900); border-radius:4px; z-index:0;}
  .freq-bar-cell .bar-fill{position:absolute; top:4px; bottom:4px; right:8px; background:var(--axis-color, var(--gold)); opacity:.35; border-radius:4px; z-index:1;}
  .freq-bar-cell span{position:relative; z-index:2;}

  .chart-switcher{display:flex; gap:6px; margin-bottom:10px;}
  .chart-switcher button{background:var(--navy-900); border:1px solid var(--card-border); color:var(--muted); font-size:11.5px; padding:5px 14px; border-radius:999px; cursor:pointer; font-family:'Almarai',sans-serif;}
  .chart-switcher button.active{background:var(--axis-color, var(--gold)); color:#0c1b30; border-color:transparent; font-weight:700;}
  .q-chart-wrap{max-width:520px; height:220px;}

  .edit-results-panel{background:var(--navy-900); border-radius:10px; padding:14px; margin-top:10px;}
  .edit-results-panel .btn{padding:6px 16px; font-size:12px;}

  /* Documents */
  .doc-row{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--card-border); font-size:13.5px;}
  .doc-row:last-child{border-bottom:none;}
  .doc-title{display:flex; align-items:center; gap:10px;}
  .doc-type{background:var(--navy-900); color:var(--muted); font-size:10.5px; padding:2px 8px; border-radius:999px; text-transform:uppercase;}
  .doc-actions a{color:var(--gold); text-decoration:none; font-size:12.5px; margin-inline-start:12px;}
  .doc-empty{color:var(--muted); font-size:13px; text-align:center; padding:1.5rem 0;}

  /* Analysis (base rules kept; overridden/extended below) */
  .analysis-top{display:grid; grid-template-columns:220px 1fr; gap:2rem; margin-bottom:2rem;}
  @media (max-width:750px){.analysis-top{grid-template-columns:1fr;}}
  .score-ring{width:180px; height:180px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; position:relative; background:conic-gradient(var(--axis-color, var(--gold)) calc(var(--pct,0) * 1%), var(--navy-900) 0);}
  .score-ring::before{content:''; position:absolute; inset:14px; background:var(--card); border-radius:50%;}
  .score-ring .num{position:relative; font-family:'Tajawal',sans-serif; font-weight:900; font-size:38px; color:var(--cream);}
  .score-ring .num small{font-size:14px; font-weight:700; color:var(--muted);}
  .status-badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; padding:5px 14px; border-radius:999px; margin-top:12px;}
  .status-badge.red{background:rgba(226,104,90,.12); color:#e2685c;}
  .status-badge.yellow{background:rgba(227,179,65,.12); color:#e3b341;}
  .status-badge.green{background:rgba(87,199,133,.12); color:#57c785;}
  .status-badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}

  .analysis-field{margin-bottom:1.5rem;}
  .analysis-field label{display:flex; align-items:center; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--cream);}
  .analysis-field label .edit-link{font-size:12px; font-weight:400; color:var(--gold); cursor:pointer;}
  .analysis-field p{color:var(--muted); font-size:14px; line-height:1.8;}
  .analysis-field textarea{width:100%; background:var(--navy-900); border:1px solid var(--card-border); color:var(--cream); padding:12px 14px; border-radius:10px; font-size:14px; font-family:'Almarai',sans-serif; display:none;}

  .analysis-section{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:1.5rem 1.75rem; margin-bottom:1.5rem;}
  .analysis-section h2{font-size:15px; margin-bottom:1rem;}
  .stat-row{display:flex; gap:1.5rem; margin-bottom:1.25rem; flex-wrap:wrap;}
  .stat-box{background:var(--navy-900); border-radius:12px; padding:12px 18px; text-align:center; flex:1; min-width:110px;}
  .stat-box .stat-num{font-family:'Tajawal',sans-serif; font-weight:800; font-size:22px; color:var(--axis-color, var(--gold));}
  .stat-box .stat-label{font-size:11.5px; color:var(--muted); margin-top:2px;}

  .remeasure-note{background:var(--navy-900); border-radius:12px; padding:14px 18px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px;}
  .back{font-size:13px; color:var(--muted); text-decoration:none; display:inline-block; margin:0.5rem 0 3rem;}
  .empty-note{color:var(--muted); font-size:13px; text-align:center; padding:1.5rem 0;}

  /* ================= NEW: global polish ================= */
  .ind-header{background:linear-gradient(135deg, var(--card), color-mix(in srgb, var(--axis-color, var(--gold)) 7%, var(--card)));}
  .tab-btn:hover{color:var(--cream);}
  .q-card{transition:border-color .2s ease;}
  .q-card:hover{border-color:var(--axis-color, var(--gold));}
  .stat-cell{transition:transform .2s ease;}
  .stat-cell:hover{transform:translateY(-2px);}
  .add-inline{transition:border-color .2s ease;}
  .add-inline:focus-within{border-color:var(--axis-color, var(--gold));}

  /* ================= NEW: Meetings tab redesign ================= */
  .meeting-stats-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:1.75rem;}
  .meeting-stat-box{background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:14px 20px; flex:1; min-width:130px; text-align:center;}
  .meeting-stat-box .num{font-family:'Tajawal',sans-serif; font-weight:800; font-size:24px; color:var(--axis-color, var(--gold));}
  .meeting-stat-box .lbl{font-size:11.5px; color:var(--muted); margin-top:4px;}

  .meeting-charts-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:2rem;}
  @media (max-width:750px){.meeting-charts-row{grid-template-columns:1fr;}}
  .meeting-chart-card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:1.25rem 1.4rem;}
  .meeting-chart-card h3{font-size:13px; color:var(--muted); margin-bottom:12px; font-weight:700;}
  .meeting-chart-card .chart-wrap{height:200px; position:relative;}
  .coverage-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none;}
  .coverage-center .pct{font-family:'Tajawal',sans-serif; font-weight:900; font-size:22px; color:var(--cream);}
  .coverage-center .lbl{font-size:10px; color:var(--muted); margin-top:2px;}

  .roster-section{margin-bottom:2rem;}
  .roster-head{display:flex; align-items:baseline; gap:8px; margin-bottom:1rem;}
  .roster-head h3{font-size:14px; color:var(--cream); font-weight:700;}
  .roster-head .sub{font-size:11.5px; color:var(--muted);}
  .roster-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:10px;}
  .roster-card{
    background:var(--card); border:1px solid var(--card-border); border-radius:14px; padding:12px 14px;
    display:flex; align-items:center; gap:12px; transition:border-color .25s ease, transform .2s ease;
  }
  .roster-card:hover{transform:translateY(-2px);}
  .roster-card.complete{border-color:#57c785;}
  .roster-ring{
    --pct:0; --ring-color:#e3b341; width:40px; height:40px; border-radius:50%; flex-shrink:0; position:relative;
    background:conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--navy-900) 0);
    display:flex; align-items:center; justify-content:center;
  }
  .roster-ring::before{content:''; position:absolute; inset:4px; background:var(--card); border-radius:50%;}
  .roster-ring span{position:relative; z-index:1; font-family:'Tajawal',sans-serif; font-weight:800; font-size:11px; color:var(--cream);}
  .roster-info{flex:1; min-width:0;}
  .roster-role{font-size:12.5px; font-weight:700; color:var(--cream); margin-bottom:2px; line-height:1.4;}
  .roster-count{font-size:11px; color:var(--muted);}
  .roster-check{color:#57c785; font-size:15px; flex-shrink:0;}

  .meeting-card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:1.2rem 1.4rem; margin-bottom:12px; display:flex; gap:14px; align-items:flex-start; transition:border-color .2s ease;}
  .meeting-card:hover{border-color:var(--axis-color, var(--gold));}
  .meeting-avatar{width:46px; height:46px; border-radius:12px; background:var(--navy-900); color:var(--axis-color, var(--gold)); display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:800; font-size:16px; flex-shrink:0;}
  .meeting-body{flex:1; min-width:0;}
  .meeting-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
  .meeting-title{font-size:14.5px; font-weight:700; margin-bottom:3px; color:var(--cream);}
  .meeting-date{font-size:12px; color:var(--muted);}
  .meeting-del{color:var(--muted); text-decoration:none; font-size:12px; flex-shrink:0; transition:color .2s ease;}
  .meeting-del:hover{color:#e2685c;}
  .meeting-attendees{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0;}
  .chip{background:var(--navy-900); color:var(--muted); font-size:11.5px; padding:4px 12px; border-radius:999px; border:1px solid var(--card-border);}
  .meeting-notes{font-size:13px; color:var(--muted); line-height:1.7;}

  /* ================= NEW: Documents tab overview ================= */
  .doc-overview-row{display:flex; gap:14px; margin-bottom:1.75rem; flex-wrap:wrap;}
  .doc-overview-card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:1.1rem 1.3rem; flex:1; min-width:140px; display:flex; align-items:center; gap:14px;}
  .doc-overview-ring{--pct:0; --ring-color:#e3b341; width:56px; height:56px; border-radius:50%; flex-shrink:0; position:relative; background:conic-gradient(var(--ring-color) calc(var(--pct)*1%), var(--navy-900) 0);}
  .doc-overview-ring::before{content:''; position:absolute; inset:6px; background:var(--card); border-radius:50%;}
  .doc-overview-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:800; font-size:12.5px; color:var(--cream);}
  .doc-overview-text .num{font-family:'Tajawal',sans-serif; font-weight:800; font-size:20px; color:var(--cream);}
  .doc-overview-text .lbl{font-size:11.5px; color:var(--muted); margin-top:2px;}

  .doc-group-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
  .doc-group-progress{font-size:11px; color:var(--muted);}
  .doc-progress-bar{height:4px; background:var(--navy-900); border-radius:999px; overflow:hidden; margin-bottom:10px;}
  .doc-progress-fill{height:100%; background:var(--axis-color, var(--gold)); border-radius:999px; transition:width .3s ease;}

  /* ================= NEW: Analysis tab redesign ================= */
  .analysis-overview-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:1.75rem;}
  @media (max-width:900px){.analysis-overview-row{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.analysis-overview-row{grid-template-columns:1fr;}}
  .ov-card{background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:1.1rem; text-align:center;}
  .ov-ring{--pct:0; --ring-color:#57c785; width:70px; height:70px; border-radius:50%; margin:0 auto 10px; position:relative; background:conic-gradient(var(--ring-color) calc(var(--pct)*1%), var(--navy-900) 0);}
  .ov-ring::before{content:''; position:absolute; inset:7px; background:var(--card); border-radius:50%;}
  .ov-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:800; font-size:13px; color:var(--cream);}
  .ov-card .lbl{font-size:11.5px; color:var(--muted);}

  .score-hero{background:var(--card); border:1px solid var(--card-border); border-radius:20px; padding:2rem; display:flex; align-items:center; gap:2.5rem; margin-bottom:1.75rem; flex-wrap:wrap;}
  .score-hero .score-ring{width:200px; height:200px;}
  .score-hero .score-ring .num{font-size:44px;}
  .tam-mini-label{font-size:12px; color:var(--muted); margin-top:16px;}

  .analysis-charts-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:1.5rem;}
  @media (max-width:800px){.analysis-charts-row{grid-template-columns:1fr;}}
/* end indicator style */
/* /* start of orgnization style /* */

.who{display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--muted);}
  .who button{
    background:none; border:1px solid var(--line); color:var(--muted); font-size:12.5px;
    padding:7px 16px; border-radius:999px; cursor:pointer; font-family:'Almarai',sans-serif; transition:all .2s ease;
  }
  .who button:hover{border-color:var(--ink); color:var(--ink);}

  /* ---------- Page shell: sidebar + content ---------- */
  .org-shell{display:grid; grid-template-columns:280px 1fr; gap:1.75rem; align-items:start; margin-top:2rem; margin-bottom:3rem;}
  @media (max-width:900px){.org-shell{grid-template-columns:1fr;}}

  /* ---------- Sidebar ---------- */
  .org-sidebar{
    background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.75rem;
    position:sticky; top:88px; overflow:hidden;
    animation:fadeUp .5s ease both;
  }
  @media (max-width:900px){.org-sidebar{position:static;}}
  .org-sidebar::before{
    content:''; position:absolute; top:-50px; right:-50px; width:140px; height:140px; border-radius:50%;
    background:var(--org-color, var(--gold)); opacity:.06;
  }
  .sb-identity{position:relative; z-index:1; text-align:center; margin-bottom:1.5rem;}
  .sb-identity img, .sb-identity .fallback{
    width:76px; height:76px; border-radius:22px; border:2.5px solid var(--org-color, var(--gold));
    object-fit:cover; background:var(--paper-2); margin:0 auto 14px; display:flex;
    align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:900;
    font-size:28px; color:var(--org-color, var(--gold));
  }
  .sb-identity h1{font-size:17px; margin-bottom:8px; line-height:1.4;}
  .sb-type-badge{
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
    color:var(--org-color, var(--gold)); background:var(--paper-2); padding:5px 13px; border-radius:999px;
    cursor:pointer; border:none; font-family:'Almarai',sans-serif; transition:all .2s ease;
  }
  .sb-type-badge:hover{background:color-mix(in srgb, var(--org-color, var(--gold)) 12%, var(--paper-2));}
  .sb-type-badge.unmapped{color:#C15B4A; background:rgba(193,91,74,.08);}

  .sb-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:1.5rem; position:relative; z-index:1;}
  .sb-stat{background:var(--paper); border-radius:12px; padding:12px 6px; text-align:center;}
  .sb-stat .num{font-family:'Tajawal',sans-serif; font-weight:800; font-size:18px;}
  .sb-stat .label{font-size:10px; color:var(--muted); margin-top:2px;}

  .sb-edit-btn{
    width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft, var(--muted));
    font-size:12.5px; font-weight:700; padding:10px; border-radius:12px; cursor:pointer;
    font-family:'Almarai',sans-serif; transition:all .2s ease; margin-bottom:1.5rem; position:relative; z-index:1;
  }
  .sb-edit-btn:hover{border-color:var(--gold); color:var(--ink);}

  .sb-nav{display:flex; flex-direction:column; gap:4px; position:relative; z-index:1;}
  .sb-nav-item{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:12px;
    font-size:13.5px; font-weight:700; color:var(--ink-soft, var(--muted)); cursor:pointer;
    background:none; border:none; text-align:right; font-family:'Almarai',sans-serif;
    transition:all .2s ease; width:100%;
  }
  .sb-nav-item .ic{width:20px; text-align:center; opacity:.7;}
  .sb-nav-item:hover{background:var(--paper);}
  .sb-nav-item.active{background:var(--ink); color:#fff;}
  .sb-nav-item.active .ic{opacity:1;}
  .sb-nav-item .count{
    margin-inline-start:auto; background:var(--paper-2); color:var(--muted); font-size:10.5px;
    padding:1px 8px; border-radius:999px;
  }
  .sb-nav-item.active .count{background:rgba(255,255,255,.15); color:#fff;}

  .sb-dash-link{
    display:flex; align-items:center; justify-content:center; gap:8px; margin-top:1.5rem;
    background:var(--gold); color:#fff; font-size:12.5px; font-weight:700; padding:11px; border-radius:12px;
    cursor:pointer; border:none; font-family:'Almarai',sans-serif; transition:all .2s ease; position:relative; z-index:1; width:100%;
  }
  .sb-dash-link:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(184,134,62,.3);}

  .back{font-size:13px; color:var(--muted); text-decoration:none; display:inline-block; margin-top:1.25rem; transition:color .2s;}
  .back:hover{color:var(--ink);}

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

  /* ---------- Content area ---------- */
  .org-content{min-width:0;}
  .content-panel{display:none; animation:fadeUp .4s ease both;}
  .content-panel.active{display:block;}
  .panel-heading{font-size:19px; margin-bottom:1.5rem;}

  /* ---------- Edit-org modal-style panel ---------- */
  .edit-org-panel{
    background:var(--card); border:1px solid var(--line); border-radius:20px; padding:0;
    max-height:0; opacity:0; overflow:hidden; margin-bottom:0;
    transition:max-height .4s ease, opacity .3s ease, margin-bottom .4s ease, padding .4s ease;
  }
  .edit-org-panel.open{max-height:900px; opacity:1; margin-bottom:1.75rem; padding:1.75rem 2rem;}
  .edit-org-panel h2{font-size:15px; margin-bottom:1.25rem;}
  .eo-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
  @media (max-width:600px){.eo-row{grid-template-columns:1fr;}}
  .field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px;}
  .field input{
    width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
    padding:10px 13px; border-radius:10px; font-size:13.5px; font-family:'Almarai',sans-serif;
    transition:border-color .2s ease;
  }
  .field input:focus{outline:none; border-color:var(--gold);}
  .field input[type=file]{padding:8px 12px; color:var(--muted); font-size:12.5px;}

  .type-select-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px;}
  @media (max-width:560px){.type-select-grid{grid-template-columns:repeat(2,1fr);}}
  .type-option{
    border:1.5px solid var(--line); border-radius:12px; padding:10px 8px; text-align:center;
    cursor:pointer; transition:all .2s ease; background:var(--paper);
  }
  .type-option:hover{border-color:var(--opt-color, var(--gold));}
  .type-option.selected{border-color:var(--opt-color, var(--gold)); background:var(--paper-2);}
  .type-option .t-icon{width:28px; height:28px; margin:0 auto 6px; font-size:10px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Tajawal',sans-serif; font-weight:800;}
  .type-option span{font-size:11.5px; font-weight:700;}

  .color-row{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
  .color-row input[type=color]{width:44px; height:38px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:2px; cursor:pointer;}
  .color-row span{font-size:13px; color:var(--muted);}
  .eo-actions{display:flex; gap:10px;}
  .eo-alert{
    background:rgba(193,91,74,0.08); border:1px solid #C15B4A; color:#C15B4A;
    font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:1rem; display:none;
  }
  .eo-alert.show{display:block;}
  .eo-hint{font-size:11.5px; color:var(--muted); margin-top:-8px; margin-bottom:14px;}

  /* ---------- Axes ---------- */
  .axis-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
  @media (max-width:820px){.axis-nav{grid-template-columns:1fr;}}
  .axis-nav-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.75rem;
    border-top:3px solid var(--axis-color); text-decoration:none; display:block; color:inherit;
    transition:transform .3s ease, box-shadow .3s ease;
    opacity:0; transform:translateY(16px); animation:cardIn .5s ease forwards;
  }
  .axis-nav-card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(27,36,48,.10);}
  .axis-nav-card .weight{font-family:'Tajawal',sans-serif; font-weight:800; font-size:28px; color:var(--axis-color); margin-bottom:10px;}
  .axis-nav-card h3{font-size:16px; margin-bottom:8px;}
  .axis-nav-card p{color:var(--muted); font-size:13px; line-height:1.6;}
  .axis-nav-card .arrow{color:var(--axis-color); font-size:13px; margin-top:14px; font-weight:700; transition:transform .25s ease;}
  .axis-nav-card:hover .arrow{transform:translateX(4px);}
  [dir="rtl"] .axis-nav-card:hover .arrow{transform:translateX(-4px);}
  @keyframes cardIn{ to{opacity:1; transform:translateY(0);} }

  /* ---------- Proposal layout ---------- */
  .proposal-shell{display:flex; flex-direction:column; gap:1.5rem;}
  .proposal-hero{
    background:linear-gradient(135deg, var(--card), color-mix(in srgb, var(--org-color, var(--gold)) 9%, var(--card)));
    border:1px solid var(--line); border-radius:26px; padding:2rem; position:relative; overflow:hidden;
  }
  .proposal-hero::before{
    content:''; position:absolute; width:260px; height:260px; border-radius:50%; right:-85px; top:-100px;
    background:var(--org-color, var(--gold)); opacity:.08; filter:blur(0px);
  }
  .proposal-hero::after{
    content:''; position:absolute; width:200px; height:200px; border-radius:50%; left:-65px; bottom:-80px;
    background:var(--axis3, var(--gold)); opacity:.07;
  }
  .eyebrow{position:relative; z-index:1; display:inline-block; padding:7px 14px; border-radius:999px;
    background:rgba(255,255,255,.45); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.3px;}
  .proposal-hero h1{position:relative; z-index:1; font-size:clamp(26px, 3vw, 40px); margin:18px 0 12px; line-height:1.3;}
  .proposal-hero p{position:relative; z-index:1; color:var(--muted); font-size:15px; line-height:1.8; max-width:820px; margin:0;}
  .hero-badges{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
  .hero-badges span{
    display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:var(--paper);
    border:1px solid var(--line); font-size:12px; color:var(--ink-soft, var(--muted)); font-weight:700;
  }
  .hero-badges .dot{width:8px; height:8px; border-radius:50%; background:var(--org-color, var(--gold)); display:inline-block;}

  .summary-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem;}
  @media (max-width:820px){.summary-grid{grid-template-columns:1fr;}}
  .summary-card{
    background:var(--card); border:1px solid var(--line); border-radius:20px; padding:1.4rem 1.2rem;
    display:flex; flex-direction:column; gap:10px; min-height:150px;
  }
  .summary-card small{color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:.2px;}
  .summary-card strong{font-family:'Tajawal',sans-serif; font-size:32px; line-height:1; color:var(--org-color, var(--gold));}
  .summary-card p{font-size:13px; line-height:1.7; color:var(--muted); margin:0;}

  .proposal-panel{
    background:var(--card); border:1px solid var(--line); border-radius:22px; padding:1.5rem 1.4rem;
  }
  .proposal-panel h2{font-size:18px; margin:0 0 1rem;}
  .timeline-table{width:100%; border-collapse:collapse; font-size:13px; overflow:hidden; border-radius:14px;}
  .timeline-table th, .timeline-table td{padding:12px 10px; border-bottom:1px solid var(--line); text-align:right;}
  .timeline-table th{background:var(--paper); color:var(--ink-soft, var(--muted)); font-size:12px; }
  .timeline-table td strong{font-size:13.5px;}
  .timeline-table tr:last-child td{border-bottom:none;}
  .timeline-table .tag{display:inline-block; padding:5px 10px; border-radius:999px; background:var(--paper-2); color:var(--ink-soft, var(--muted)); font-size:11.5px; font-weight:700;}

  .dimension-grid{display:grid; grid-template-columns:1fr; gap:1.1rem;}
  .dimension-block{
    background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:1.25rem 1.2rem;
  }
  .dimension-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:1rem; flex-wrap:wrap;}
  .dimension-head h3{font-size:17px; margin:0;}
  .dimension-weight{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(184,134,62,.08); color:var(--org-color, var(--gold)); font-size:11.5px; font-weight:800;}
  .metric-row{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;}
  @media (max-width:700px){.metric-row{grid-template-columns:1fr;}}
  .metric-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem; display:flex; gap:12px; align-items:flex-start;
    transition:transform .2s ease, border-color .2s ease;
  }
  .metric-card:hover{transform:translateY(-2px); border-color:var(--gold);}
  .metric-score{min-width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--org-color, var(--gold)); font-family:'Tajawal',sans-serif; font-weight:900; font-size:18px;}
  .metric-card strong{display:block; font-size:13.5px; margin-bottom:4px;}
  .metric-card small{display:block; font-size:11.5px; color:var(--muted); line-height:1.6;}

  .weight-panel{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; margin-top:1rem;}
  @media (max-width:820px){.weight-panel{grid-template-columns:repeat(2, minmax(0, 1fr));}}
  @media (max-width:500px){.weight-panel{grid-template-columns:1fr;}}
  .weight-box{
    background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:0.9rem 0.8rem;
    text-align:center;
  }
  .weight-box strong{display:block; font-size:22px; color:var(--org-color, var(--gold)); font-family:'Tajawal',sans-serif;}
  .weight-box span{font-size:11.5px; color:var(--muted); display:block; margin-top:4px; line-height:1.5;}

  .proposal-note{
    background:rgba(184,134,62,.05); border:1px solid rgba(184,134,62,.18); border-radius:14px; padding:1rem 1.1rem;
    color:var(--ink-soft, var(--muted)); line-height:1.8; font-size:13px; margin-top:1rem;
  }

  /* ---------- Info ---------- */
  .org-section{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.75rem;}
  .org-section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
  .org-section-head h2{font-size:16px;}
  .org-section-head .btn{padding:6px 16px; font-size:12.5px;}
  #infoDisplay{color:var(--muted); font-size:14px; line-height:1.85;}
  #infoTextarea{
    width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
    padding:12px 14px; border-radius:10px; font-family:'Almarai',sans-serif; font-size:14px;
    transition:border-color .2s ease;
  }
  #infoTextarea:focus{outline:none; border-color:var(--gold);}

  /* ---------- People ---------- */
  .people-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; flex-wrap:wrap; gap:10px;}
  .people-filters{display:flex; gap:6px;}
  .p-filter{
    background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 14px;
    font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:all .2s ease;
  }
  .p-filter.active{background:var(--ink); border-color:var(--ink); color:#fff;}
  .people-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  @media (max-width:700px){.people-grid{grid-template-columns:1fr;}}
  .person-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.4rem;
    display:flex; gap:14px; position:relative;
    transition:transform .25s ease, box-shadow .25s ease;
    opacity:0; transform:translateY(14px); animation:cardIn .45s ease forwards;
  }
  .person-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px rgba(27,36,48,.08);}
  .person-avatar{
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    background:var(--paper-2); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Tajawal',sans-serif; font-weight:800; font-size:16px;
  }
  .person-body{flex:1; min-width:0;}
  .person-name{font-size:14.5px; font-weight:700; margin-bottom:2px;}
  .person-role{font-size:12.5px; color:var(--gold); margin-bottom:8px; font-weight:700;}
  .person-contact{font-size:12px; color:var(--muted); line-height:1.8;}
  .person-contact a{color:var(--muted); text-decoration:none;}
  .person-contact a:hover{color:var(--ink);}
  .person-notes{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.7; border-top:1px solid var(--line); padding-top:8px;}
  .met-toggle{
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
    padding:4px 10px; border-radius:999px; cursor:pointer; margin-top:10px; transition:all .2s ease; border:none;
    font-family:'Almarai',sans-serif;
  }
  .met-toggle.pending{background:rgba(200,160,40,.12); color:#A9821F;}
  .met-toggle.met{background:rgba(47,143,114,.1); color:#2F8F72;}
  .met-toggle .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
  .person-delete{
    position:absolute; top:12px; left:12px; background:none; border:none;
    font-size:13px; color:var(--muted); cursor:pointer; opacity:0; transition:opacity .2s ease, color .2s ease;
  }
  .person-card:hover .person-delete{opacity:1;}
  .person-delete:hover{color:#C15B4A;}
  .add-person-panel{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.6rem;
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .4s ease, opacity .3s ease, margin-bottom .4s ease;
  }
  .add-person-panel.open{max-height:900px; opacity:1; margin-bottom:1.5rem;}
  .add-person-panel h2{font-size:15px; margin-bottom:1.1rem;}
  .p-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
  @media (max-width:560px){.p-row{grid-template-columns:1fr;}}
  .add-person-panel input, .add-person-panel textarea{
    width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
    padding:10px 13px; border-radius:10px; font-size:13.5px; font-family:'Almarai',sans-serif;
    transition:border-color .2s ease;
  }
  .add-person-panel input:focus, .add-person-panel textarea:focus{outline:none; border-color:var(--gold);}
  .add-person-panel textarea{margin-bottom:10px;}
  .p-actions{display:flex; gap:8px;}
  .people-empty{background:var(--card); border:1px dashed var(--line); border-radius:16px; padding:2.5rem; text-align:center; color:var(--muted);}

  /* ---------- Documents ---------- */
  .file-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
  .file-card{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:1.2rem 1rem; text-align:center; cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    opacity:0; transform:translateY(14px); animation:cardIn .45s ease forwards;
    position:relative;
  }
  .file-card:hover{transform:translateY(-5px); box-shadow:0 16px 30px rgba(27,36,48,.10); border-color:var(--gold);}
  .file-icon{
    width:48px; height:48px; border-radius:12px; margin:0 auto 12px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Tajawal',sans-serif; font-weight:800; font-size:12px; color:#fff;
  }
  .file-icon.pdf{background:#C15B4A;}
  .file-icon.docx{background:#3E6BC1;}
  .file-icon.pptx{background:#D9822B;}
  .file-icon.txt, .file-icon.default{background:#7C8494;}
  .file-icon.img{background:var(--gold);}
  .file-name{font-size:12.5px; font-weight:700; line-height:1.4; margin-bottom:4px; word-break:break-word;}
  .file-meta{font-size:11px; color:var(--muted);}
  .file-delete{
    position:absolute; top:8px; left:8px; background:var(--card); border:1px solid var(--line);
    width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; color:var(--muted); opacity:0; transition:opacity .2s ease, color .2s ease, border-color .2s ease;
  }
  .file-card:hover .file-delete{opacity:1;}
  .file-delete:hover{color:#C15B4A; border-color:#C15B4A;}
  .doc-empty{color:var(--muted); font-size:13px; text-align:center; padding:2.5rem 0;}
  .upload-drop{
    border:1.5px dashed var(--line); border-radius:14px; padding:2rem; text-align:center;
    color:var(--muted); font-size:13.5px; cursor:pointer; transition:border-color .25s ease, background .25s ease;
    margin-bottom:1.5rem;
  }
  .upload-drop:hover, .upload-drop.dragover{border-color:var(--gold); background:rgba(184,134,62,.04);}
  .upload-drop .icon{font-size:22px; margin-bottom:8px; display:block;}

  /* ---------- Preview modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(27,36,48,.55); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:2rem;
    opacity:0; transition:opacity .25s ease;
  }
  .modal-overlay.show{display:flex; opacity:1;}
  .modal-box{
    background:var(--card); border-radius:18px; width:100%; max-width:640px; max-height:85vh;
    overflow:hidden; display:flex; flex-direction:column;
    transform:scale(.94); transition:transform .25s ease;
    box-shadow:0 30px 60px rgba(0,0,0,.25);
  }
  .modal-overlay.show .modal-box{transform:scale(1);}
  .modal-head{display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line);}
  .modal-head h3{font-size:14.5px;}
  .modal-close{background:none; border:none; font-size:20px; color:var(--muted); cursor:pointer; line-height:1;}
  .modal-close:hover{color:var(--ink);}
  .modal-body{padding:0; overflow:auto; flex:1; background:var(--paper);}
  .modal-body img{width:100%; display:block;}
  .modal-body iframe{width:100%; height:70vh; border:none;}
  .modal-fallback{padding:3rem 2rem; text-align:center;}
  .modal-fallback .big-icon{
    width:72px; height:72px; border-radius:16px; margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif;
    font-weight:800; font-size:16px; color:#fff;
  }
  .modal-fallback p{color:var(--muted); font-size:13px; margin-bottom:18px;}
  .modal-foot{padding:1rem 1.4rem; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}
/* end of orgnization style */
/* start or orghnizations style */
  .who{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted);}
  .who button{
    background:none; border:1px solid var(--line); color:var(--muted); padding:7px 16px;
    border-radius:999px; font-size:12.5px; cursor:pointer; font-family:'Almarai',sans-serif;
    transition:all .2s ease;
  }
  .who button:hover{border-color:var(--ink); color:var(--ink);}

  .page-head{display:flex; justify-content:space-between; align-items:center; margin:2.5rem 0 1.75rem; flex-wrap:wrap; gap:12px;}
  .page-head h1{font-size:24px;}

  /* ---------- Type filter pills ---------- */
  .type-filters{display:flex; gap:8px; margin-bottom:2.25rem; flex-wrap:wrap;}
  .type-pill{
    display:flex; align-items:center; gap:8px;
    background:var(--card); border:1px solid var(--line); border-radius:999px;
    padding:8px 18px; font-size:13px; font-weight:700; color:var(--ink-soft, var(--muted));
    cursor:pointer; transition:all .25s ease; font-family:'Almarai',sans-serif;
  }
  .type-pill .dot{width:8px; height:8px; border-radius:50%; background:var(--pill-color, var(--muted));}
  .type-pill:hover{border-color:var(--pill-color, var(--gold)); color:var(--ink);}
  .type-pill.active{background:var(--pill-color, var(--ink)); border-color:var(--pill-color, var(--ink)); color:#fff;}
  .type-pill.active .dot{background:#fff;}
  .type-pill .count{font-size:11px; opacity:.75;}

  /* ---------- Type sections ---------- */
  .type-section{margin-bottom:2.5rem; opacity:0; transform:translateY(14px); animation:fadeUp .5s ease forwards;}
  .type-section-head{display:flex; align-items:center; gap:12px; margin-bottom:1.1rem;}
  .type-icon{
    width:38px; height:38px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Tajawal',sans-serif; font-weight:800; font-size:13px; color:#fff;
    background:var(--type-color, var(--gold));
  }
  .type-section-head h2{font-size:16.5px;}
  .type-section-head .type-desc{font-size:12.5px; color:var(--muted);}
  .type-section-line{flex:1; height:1px; background:var(--line);}

  @keyframes fadeUp{ to{opacity:1; transform:translateY(0);} }

  /* ---------- Org grid / cards ---------- */
  .org-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
  @media (max-width:820px){.org-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.org-grid{grid-template-columns:1fr;}}

  .org-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.5rem;
    border-top:3px solid var(--card-color, var(--gold)); cursor:pointer; text-decoration:none; display:block;
    color:inherit; position:relative; overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
    opacity:0; transform:translateY(16px); animation:cardIn .5s ease forwards;
  }
  .org-card::before{
    content:''; position:absolute; top:-40px; left:-40px; width:100px; height:100px; border-radius:50%;
    background:var(--card-color, var(--gold)); opacity:.06; transition:transform .4s ease;
  }
  .org-card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(27,36,48,.10);}
  .org-card:hover::before{transform:scale(1.6);}
  @keyframes cardIn{ to{opacity:1; transform:translateY(0);} }

  .org-card .org-logo{
    width:48px; height:48px; border-radius:50%; object-fit:cover;
    border:2px solid var(--card-color, var(--gold)); margin-bottom:12px; display:block; background:var(--paper-2);
    position:relative; z-index:1;
  }
  .org-card .org-logo-fallback{
    width:48px; height:48px; border-radius:50%; border:2px solid var(--card-color, var(--gold));
    margin-bottom:12px; display:flex; align-items:center; justify-content:center;
    font-family:'Tajawal',sans-serif; font-weight:800; color:var(--card-color, var(--gold));
    background:var(--paper-2); position:relative; z-index:1;
  }
  .org-card h3{font-size:16px; margin-bottom:4px; position:relative; z-index:1;}
  .org-card .org-meta{font-size:12px; color:var(--muted); position:relative; z-index:1;}
  .org-card .type-tag{
    position:absolute; top:1.2rem; left:1.2rem; z-index:1;
    font-size:10.5px; font-weight:700; color:var(--card-color, var(--gold));
    background:var(--paper-2); padding:3px 10px; border-radius:999px;
  }

  .empty-state{background:var(--card); border:1px dashed var(--line); border-radius:16px; padding:3rem; text-align:center; color:var(--muted); margin-bottom:2rem;}

  /* ---------- Create panel ---------- */
  .create-panel{
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.75rem;
    max-height:0; opacity:0; overflow:hidden; margin-bottom:0;
    transition:max-height .4s ease, opacity .3s ease, margin-bottom .4s ease;
  }
  .create-panel.open{max-height:900px; opacity:1; margin-bottom:2rem;}
  .create-panel h2{font-size:16px; margin-bottom:1.25rem;}
  .field{margin-bottom:1.1rem;}
  .field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
  .field input, .field select{
    width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink);
    padding:11px 14px; border-radius:10px; font-size:14px; font-family:'Almarai',sans-serif;
    transition:border-color .2s ease;
  }
  .field input:focus, .field select:focus{outline:none; border-color:var(--gold);}
  .field input[type=file]{padding:9px 12px; color:var(--muted); font-size:13px;}

  .type-select-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
  @media (max-width:560px){.type-select-grid{grid-template-columns:repeat(2,1fr);}}
  .type-option{
    border:1.5px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center;
    cursor:pointer; transition:all .2s ease; background:var(--paper);
  }
  .type-option:hover{border-color:var(--opt-color, var(--gold));}
  .type-option.selected{border-color:var(--opt-color, var(--gold)); background:var(--paper-2);}
  .type-option .type-icon{width:32px; height:32px; margin:0 auto 8px; font-size:11px;}
  .type-option span{font-size:12px; font-weight:700;}

  .color-row{display:flex; align-items:center; gap:10px;}
  .color-row input[type=color]{width:44px; height:38px; border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:2px; cursor:pointer;}
  .color-row span{font-size:13px; color:var(--muted);}
  .create-actions{display:flex; gap:10px; margin-top:0.5rem;}
/* end of orgnizations style */
/* ---------- Score breakdown (Analysis tab) ---------- */
.breakdown-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:0.5rem;}
@media (max-width:760px){.breakdown-grid{grid-template-columns:1fr;}}
.breakdown-card{
  background:var(--paper); border:1px solid var(--card-border); border-radius:16px;
  padding:1.2rem 1.3rem; display:flex; align-items:center; gap:14px;
  transition:transform .2s ease, border-color .2s ease;
}
.breakdown-card:hover{transform:translateY(-2px);}
.breakdown-card.no-data{opacity:.55;}
.breakdown-ring{
  --pct:0; --ring-color:#8ea2ba; width:58px; height:58px; border-radius:50%; flex-shrink:0; position:relative;
  background:conic-gradient(var(--ring-color) calc(var(--pct)*1%), var(--navy-900) 0);
}
.breakdown-ring::before{content:''; position:absolute; inset:5px; background:var(--card); border-radius:50%;}
.breakdown-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Tajawal',sans-serif; font-weight:800; font-size:13px; color:var(--cream);}
.breakdown-body{flex:1; min-width:0;}
.breakdown-label{font-size:13px; font-weight:700; color:var(--cream); margin-bottom:2px;}
.breakdown-weight{font-size:11px; color:var(--muted);}
.breakdown-note{font-size:11px; color:var(--muted); margin-top:4px;}
.breakdown-formula{font-size:11.5px; color:var(--muted); margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--card-border);}
.attendee-select{display:flex; flex-wrap:wrap; gap:8px;}
.attendee-chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--navy-900);
  border:1px solid var(--card-border); border-radius:999px; padding:7px 14px;
  font-size:12.5px; color:var(--muted); cursor:pointer; transition:all .2s ease;
}
.attendee-chip input{accent-color:var(--gold); cursor:pointer;}
.attendee-chip.active{background:var(--axis-color, var(--gold)); border-color:transparent; color:#0c1b30; font-weight:700;}
/* ==========================================
   ORGANIZATION PEOPLE / CLIENT ACCOUNTS
   ========================================== */

.add-person-panel .field {
  flex: 1;
  min-width: 0;
}

.add-person-panel .field label {
  display: block;
  font-weight: 800;
  margin-bottom: 7px;
  color: var(--ink);
}

.add-person-panel select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d8dee8;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

.add-person-panel select:focus {
  outline: none;
  border-color: var(--org-color, #B8863E);
}

#passwordHint {
  display: block;
  margin-top: 6px;
  line-height: 1.7;
  color: #7C8494;
  font-size: 12px;
}

.person-login-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.person-login-badge.active-login {
  background: #e9f7ef;
  color: #238653;
}

.person-login-badge.no-login {
  background: #f1f3f6;
  color: #7C8494;
}

.person-disabled {
  opacity: .7;
}

.person-disabled .person-avatar {
  filter: grayscale(1);
}
/* =========================================================
   DIAGNOSTIC MEETINGS
========================================================= */

.meetings-table-wrap {
  margin-top: 24px;
  background: var(--navy-800, #102d49);
  border: 1px solid #244765;
  border-radius: 14px;
  overflow: hidden;
}

.meetings-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #244765;
}

.meetings-table-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.meetings-table-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}


/* TABLE */

.meeting-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.meeting-records-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1050px;
}

.meeting-records-table th {
  text-align: right;
  padding: 13px 14px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid #244765;
  white-space: nowrap;
}

.meeting-records-table td {
  padding: 15px 14px;
  font-size: 12.5px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.meeting-records-table tbody tr:last-child td {
  border-bottom: 0;
}

.meeting-records-table tbody tr:hover {
  background: rgba(255,255,255,.02);
}

.meeting-record-title {
  font-weight: 800;
  margin-bottom: 4px;
}

.meeting-record-date {
  color: var(--muted);
  font-size: 11px;
}

.meeting-summary-cell {
  max-width: 280px;
  line-height: 1.7;
}

.meeting-note-small {
  color: var(--muted);
  line-height: 1.6;
  max-width: 220px;
}


/* ATTENDEES */

.meeting-person-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  margin: 2px;
  border: 1px solid #31536f;
  border-radius: 20px;
  font-size: 11px;
  white-space: nowrap;
}


/* FILE BUTTONS */

.meeting-files-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meeting-file-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid #31536f;
  border-radius: 7px;
  text-decoration: none;
  font-size: 11px;
  color: var(--gold);
  white-space: nowrap;
}

.meeting-file-link:hover {
  border-color: var(--gold);
}


/* SCORE */

.meeting-score-value {
  font-weight: 800;
  font-size: 14px;
  color: var(--gold);
}

.meeting-score-empty {
  color: var(--muted);
  font-size: 11px;
}

.meeting-score-action {
  display: block;
  color: var(--gold);
  text-decoration: none;
  font-size: 10.5px;
  margin-top: 5px;
}


/* ROW ACTIONS */

.meeting-row-actions {
  display: flex;
  gap: 8px;
}

.meeting-action-btn {
  border: 0;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  padding: 0;
}

.meeting-action-btn.delete {
  color: #e2685c;
}


/* FORM */

.meeting-form-panel {
  display: none;
  margin-top: 20px;
  padding: 22px;
  border: 1px solid #284b68;
  border-radius: 14px;
  background: var(--navy-800, #102d49);
}

.meeting-form-panel.open {
  display: block;
}

.meeting-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}

.meeting-form-header h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.meeting-form-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.meeting-form-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
}

.meeting-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
}

.meeting-field {
  margin-bottom: 17px;
}

.meeting-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.meeting-field-help {
  color: var(--muted);
  font-size: 11px;
  margin: -2px 0 9px;
}

.meeting-field input,
.meeting-field textarea {
  width: 100%;
}

.meeting-field textarea {
  resize: vertical;
}


/* PEOPLE SELECT */

.meeting-people-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.meeting-person-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #284b68;
  border-radius: 9px;
  padding: 10px;
  cursor: pointer;
  transition: .15s ease;
}

.meeting-person-option:hover {
  border-color: var(--gold);
}

.meeting-person-option.active {
  border-color: var(--gold);
  background: rgba(217,178,92,.07);
}

.meeting-person-option input {
  width: auto;
}

.meeting-person-info strong {
  display: block;
  font-size: 12px;
}

.meeting-person-info span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
}


/* FILE UPLOAD */

.meeting-files-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.meeting-upload-box {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px dashed #31536f;
  border-radius: 10px;
}

.meeting-upload-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(217,178,92,.1);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
}

.meeting-upload-content {
  flex: 1;
}

.meeting-upload-content strong,
.meeting-upload-content span {
  display: block;
}

.meeting-upload-content strong {
  font-size: 12px;
}

.meeting-upload-content span {
  color: var(--muted);
  font-size: 10.5px;
  margin: 3px 0 7px;
}

.meeting-upload-content input {
  font-size: 11px;
  max-width: 100%;
}

.meeting-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}


/* EMPTY */

.meeting-table-empty {
  padding: 35px;
  text-align: center;
  color: var(--muted);
}


/* RESPONSIVE */

@media (max-width: 700px) {
  .meeting-form-grid,
  .meeting-files-grid {
    grid-template-columns: 1fr;
  }

  .meetings-table-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
.meetings-table-wrap {
  margin-top: 24px;
  background: #ffffff;
  border: 1px solid #e3e7ec;
  border-radius: 14px;
  overflow: hidden;
}

.meetings-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid #e3e7ec;
}

.meeting-records-table th {
  text-align: right;
  padding: 13px 14px;
  font-size: 11px;
  color: #7b8492;
  font-weight: 700;
  background: #f7f8fa;
  border-bottom: 1px solid #e3e7ec;
  white-space: nowrap;
}

.meeting-records-table td {
  padding: 15px 14px;
  font-size: 12.5px;
  color: #243247;
  vertical-align: top;
  border-bottom: 1px solid #edf0f3;
}

.meeting-records-table tbody tr:hover {
  background: #fafbfc;
}
.meeting-form-panel {
  display: none;
  margin-top: 20px;
  padding: 22px;

  background: #ffffff;
  border: 1px solid #e3e7ec;
  border-radius: 14px;

  color: #243247;
}
/* =========================================================
   SURVEY WORKSPACE
========================================================= */

.survey-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.survey-stat-card,
.survey-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.survey-stat-card {
  padding: 18px;
}

.survey-stat-card span,
.survey-stat-card small {
  display: block;
  color: var(--muted);
}

.survey-stat-card strong {
  display: block;
  margin: 8px 0 4px;
  font-size: 26px;
}

.survey-admin-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.survey-panel {
  padding: 20px;
  margin-bottom: 18px;
}

.survey-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 18px;
}

.survey-section-head h3 {
  margin: 0 0 6px;
}

.survey-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.survey-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.survey-person-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.survey-person-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.survey-person-check {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: transparent;
}

.survey-person-card:has(input:checked) {
  border-color: var(--gold);
}

.survey-person-card:has(input:checked)
.survey-person-check {
  background: var(--gold);
  color: #fff;
}

.survey-person-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.survey-person-info small {
  color: var(--muted);
}

.survey-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.survey-field input,
.survey-link-row input {
  width: 100%;
}

.survey-switch-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  cursor: pointer;
}

.survey-share-box {
  padding: 15px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.survey-share-box p {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.survey-link-row {
  display: flex;
  gap: 10px;
}

.survey-status-badge,
.survey-count-badge {
  padding: 6px 11px;
  border-radius: 20px;
  font-size: 12px;
  background: rgba(87, 199, 133, .12);
}

.survey-status-badge.closed {
  background: rgba(142, 162, 186, .12);
}

.survey-assigned-title {
  margin-bottom: 10px;
  font-weight: 700;
}

.survey-assigned-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.survey-assigned-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.survey-assigned-card span {
  color: var(--muted);
  font-size: 11px;
}

.survey-question-card {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.survey-question-card:last-child {
  border-bottom: 0;
}

.survey-question-number,
.survey-answer-number {
  flex: 0 0 auto;
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(184, 134, 62, .12);
  font-weight: 700;
}

.survey-question-body {
  flex: 1;
}

.survey-question-text {
  font-weight: 700;
  line-height: 1.8;
}

.survey-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.survey-option-chip {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
}

.survey-response-table {
  min-width: 720px;
}

.survey-responses-list {
  overflow-x: auto;
}

.survey-response-head,
.survey-response-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 2fr)
    1fr
    .7fr
    1.3fr
    .9fr;
  gap: 12px;
  align-items: center;
}

.survey-response-head {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 11px;
}

.survey-response-row {
  padding: 13px 12px;
  border-top: 1px solid var(--line);
}

.survey-response-row strong,
.survey-response-row small {
  display: block;
}

.survey-response-row small {
  margin-top: 4px;
  color: var(--muted);
}

.survey-response-status {
  font-size: 12px;
}

.survey-response-status.completed {
  font-weight: 700;
}

.survey-response-score {
  font-weight: 800;
}

.survey-details-btn,
.survey-details-close {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--gold);
  font-family: inherit;
}

.survey-details-close {
  font-size: 24px;
}

.survey-answer-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.survey-selected-answer {
  margin-top: 8px;
  color: var(--muted);
}

.survey-answer-score {
  font-weight: 800;
}

@media (max-width: 900px) {

  .survey-stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .survey-admin-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {

  .survey-stats-grid,
  .survey-people-grid {
    grid-template-columns: 1fr;
  }

  .survey-link-row {
    flex-direction: column;
  }

}
/* =========================================================
   DOCUMENTS WORKSPACE — ENHANCED
========================================================= */

#panel-documents {
  padding-top: 10px;
}

.documents-workspace {
  display: flex;
  flex-direction: column;
  gap: 22px;
}


/* ---------------------------------------------------------
   PAGE HEADER
--------------------------------------------------------- */

.documents-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;

  padding: 26px 28px;

  background: #ffffff;
  border: 1px solid rgba(24, 39, 57, 0.08);
  border-radius: 18px;

  box-shadow:
    0 8px 30px rgba(24, 39, 57, 0.04);
}

.documents-page-head > div:first-child {
  flex: 1;
  min-width: 0;
}

.documents-eyebrow {
  margin-bottom: 7px;

  font-size: 12px;
  font-weight: 800;

  color: var(--axis-color, #b8863e);

  letter-spacing: 0.3px;
}

.documents-page-head h2 {
  margin: 0;

  font-family: 'Tajawal', sans-serif;
  font-size: 26px;
  font-weight: 800;

  color: #172333;
}

.documents-page-head p {
  max-width: 720px;

  margin: 8px 0 0;

  font-size: 13px;
  line-height: 1.9;

  color: #7a8797;
}


/* ---------------------------------------------------------
   AVERAGE SCORE
--------------------------------------------------------- */

.documents-head-score {
  flex: 0 0 auto;

  min-width: 180px;

  padding: 17px 20px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(184, 134, 62, 0.09),
      rgba(184, 134, 62, 0.025)
    );

  border: 1px solid rgba(184, 134, 62, 0.18);
  border-radius: 16px;
}

.documents-head-score span {
  display: block;

  margin-bottom: 7px;

  font-size: 11px;
  font-weight: 700;

  color: #7a8797;
}

.documents-head-score strong {
  font-size: 29px;
  font-weight: 800;

  color: var(--axis-color, #b8863e);
}

.documents-head-score small {
  margin-inline-start: 3px;

  font-size: 11px;

  color: #9ba5b1;
}


/* ---------------------------------------------------------
   STATISTICS
--------------------------------------------------------- */

.documents-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.documents-stat-card {
  position: relative;

  min-height: 116px;

  padding: 19px 20px;

  background: #ffffff;

  border: 1px solid rgba(24, 39, 57, 0.07);
  border-radius: 16px;

  overflow: hidden;

  box-shadow:
    0 5px 18px rgba(24, 39, 57, 0.03);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.documents-stat-card::before {
  content: '';

  position: absolute;
  top: 0;
  right: 0;

  width: 4px;
  height: 100%;

  background: var(--axis-color, #b8863e);
}

.documents-stat-card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 28px rgba(24, 39, 57, 0.06);
}

.documents-stat-card span {
  display: block;

  margin-bottom: 11px;

  font-size: 12px;
  font-weight: 700;

  color: #84909f;
}

.documents-stat-card strong {
  display: inline-block;

  font-size: 27px;
  font-weight: 800;

  color: #172333;
}

.documents-stat-card small {
  display: block;

  margin-top: 5px;

  font-size: 11px;

  color: #a0a8b3;
}


/* ---------------------------------------------------------
   MAIN PANEL
--------------------------------------------------------- */

.documents-main-panel {
  padding: 0;

  background: transparent;

  border: none;
}

.documents-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 16px;

  padding: 0 3px;
}

.documents-section-head h3 {
  margin: 0;

  font-family: 'Tajawal', sans-serif;
  font-size: 19px;
  font-weight: 800;

  color: #172333;
}

.documents-section-head p {
  margin: 4px 0 0;

  font-size: 12px;

  color: #8b96a4;
}

.documents-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 38px;
  height: 34px;

  padding: 0 11px;

  background: rgba(184, 134, 62, 0.09);

  border: 1px solid rgba(184, 134, 62, 0.17);
  border-radius: 10px;

  font-size: 13px;
  font-weight: 800;

  color: var(--axis-color, #b8863e);
}


/* ---------------------------------------------------------
   DOCUMENT GROUP
--------------------------------------------------------- */

.documents-group {
  margin-bottom: 18px;

  background: #ffffff;

  border: 1px solid rgba(24, 39, 57, 0.07);
  border-radius: 18px;

  overflow: hidden;

  box-shadow:
    0 5px 20px rgba(24, 39, 57, 0.025);
}

.documents-group-head {
  padding: 18px 22px;

  background:
    linear-gradient(
      90deg,
      rgba(184, 134, 62, 0.065),
      rgba(255, 255, 255, 0.3)
    );

  border-bottom: 1px solid rgba(24, 39, 57, 0.06);
}

.documents-group-head h3 {
  margin: 0;

  font-size: 15px;
  font-weight: 800;

  color: #253448;
}

.documents-group-head span {
  display: block;

  margin-top: 4px;

  font-size: 11px;

  color: #919aa6;
}

.documents-group-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px;

  padding: 18px;
}


/* ---------------------------------------------------------
   DOCUMENT CARD
--------------------------------------------------------- */

.document-evaluation-card {
  display: flex;
  flex-direction: column;

  background: #fbfcfd;

  border: 1px solid rgba(24, 39, 57, 0.08);
  border-radius: 15px;

  overflow: hidden;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.document-evaluation-card:hover {
  transform: translateY(-1px);

  border-color: rgba(184, 134, 62, 0.24);

  box-shadow:
    0 8px 22px rgba(24, 39, 57, 0.05);
}


/* ---------------------------------------------------------
   CARD HEADER
--------------------------------------------------------- */

.document-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 17px 18px;

  background: #ffffff;

  border-bottom: 1px solid rgba(24, 39, 57, 0.06);
}

.document-card-title {
  display: flex;
  align-items: flex-start;
  gap: 11px;

  min-width: 0;
}

.document-card-title h4 {
  margin: 0;

  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;

  color: #263649;
}

.document-card-title > div > span {
  display: block;

  margin-top: 2px;

  font-size: 10.5px;

  color: #9aa4b0;
}


/* ---------------------------------------------------------
   STATUS
--------------------------------------------------------- */

.document-status-dot {
  flex: 0 0 auto;

  width: 9px;
  height: 9px;

  margin-top: 6px;

  border-radius: 50%;

  background: #c5ccd4;
}

.document-status-dot.evaluated {
  background: #53b982;

  box-shadow:
    0 0 0 4px rgba(83, 185, 130, 0.11);
}

.document-status-dot.pending {
  background: #d8a94d;

  box-shadow:
    0 0 0 4px rgba(216, 169, 77, 0.10);
}


/* ---------------------------------------------------------
   SCORE BADGE
--------------------------------------------------------- */

.document-score-badge {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: baseline;
  justify-content: center;

  min-width: 58px;

  padding: 7px 9px;

  background: #f3f5f7;

  border-radius: 10px;

  font-size: 17px;
  font-weight: 800;

  color: #a3acb6;
}

.document-score-badge.has-score {
  background: rgba(184, 134, 62, 0.09);

  color: var(--axis-color, #b8863e);
}

.document-score-badge small {
  margin-inline-start: 2px;

  font-size: 9px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   BODY
--------------------------------------------------------- */

.document-card-body {
  display: flex;
  flex-direction: column;
  gap: 15px;

  padding: 17px 18px 18px;
}

.document-form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.document-form-field label {
  font-size: 11px;
  font-weight: 800;

  color: #596779;
}

.document-form-field input,
.document-form-field textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 10px 11px;

  background: #ffffff;

  border: 1px solid #e3e7eb;
  border-radius: 10px;

  outline: none;

  font-family: inherit;
  font-size: 12px;

  color: #27374a;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.document-form-field input:focus,
.document-form-field textarea:focus {
  border-color: rgba(184, 134, 62, 0.55);

  box-shadow:
    0 0 0 3px rgba(184, 134, 62, 0.08);
}

.document-form-field textarea {
  min-height: 78px;

  resize: vertical;

  line-height: 1.7;
}


/* ---------------------------------------------------------
   SCORE INPUT
--------------------------------------------------------- */

.document-score-input {
  display: flex;
  align-items: center;

  max-width: 150px;

  background: #ffffff;

  border: 1px solid #e3e7eb;
  border-radius: 10px;

  overflow: hidden;
}

.document-score-input input {
  flex: 1;

  min-width: 0;

  padding: 10px 11px;

  border: 0;

  background: transparent;

  text-align: center;

  font-weight: 800;
}

.document-score-input span {
  padding-inline-end: 10px;

  font-size: 10px;

  color: #a0a8b2;
}


/* ---------------------------------------------------------
   FILE AREA
--------------------------------------------------------- */

.document-file-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 13px;

  background: #ffffff;

  border: 1px dashed #d9dee4;
  border-radius: 11px;
}

.document-file-info {
  display: flex;
  align-items: center;
  gap: 10px;

  min-width: 0;
}

.document-file-icon {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  background: rgba(184, 134, 62, 0.08);

  border-radius: 9px;

  font-size: 9px;
  font-weight: 800;

  color: var(--axis-color, #b8863e);
}

.document-file-info strong {
  display: block;

  font-size: 11px;
  font-weight: 800;

  color: #37475a;
}

.document-file-info span {
  display: block;

  max-width: 300px;

  margin-top: 2px;

  font-size: 9.5px;
  line-height: 1.5;

  color: #98a2ae;
}

.document-file-actions {
  display: flex;
  align-items: center;
  gap: 7px;

  flex: 0 0 auto;
}

.document-file-actions .btn {
  min-height: 32px;

  padding: 7px 11px;

  font-size: 10.5px;

  border-radius: 8px;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.document-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  padding-top: 2px;
}

.document-card-footer .btn {
  min-width: 110px;

  padding: 9px 15px;

  border-radius: 9px;

  font-size: 11px;
}

.document-save-status {
  margin-inline-end: auto;

  font-size: 10px;
  font-weight: 700;

  color: #53a977;
}


/* ---------------------------------------------------------
   EMPTY
--------------------------------------------------------- */

.documents-empty {
  padding: 45px 20px;

  background: #ffffff;

  border: 1px dashed #d9dee4;
  border-radius: 15px;

  text-align: center;

  font-size: 13px;

  color: #8f99a6;
}


/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media (max-width: 1100px) {

  .documents-stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .documents-group-list {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .documents-page-head {
    flex-direction: column;
    align-items: stretch;

    padding: 21px;
  }

  .documents-head-score {
    width: auto;
  }

  .documents-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .documents-group-list {
    padding: 12px;
  }

  .document-file-area {
    align-items: flex-start;
    flex-direction: column;
  }

  .document-file-actions {
    width: 100%;
  }

}
/* =========================================================
   SUB-AXIS RATING CONTROLS
========================================================= */

.subaxis-rating-choice {
  display: inline-flex;
  position: relative;
  cursor: pointer;
}

.subaxis-rating-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subaxis-rating-choice span {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #d5dce3;
  border-radius: 9px;

  background: #ffffff;
  color: #465568;

  font-weight: 700;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.subaxis-rating-choice:hover span {
  border-color: var(--axis-color);
  transform: translateY(-1px);
}

.subaxis-rating-choice input:checked + span {
  background: var(--axis-color);
  border-color: var(--axis-color);
  color: #ffffff;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, .12);
}

.document-rating-scale,
.meeting-rating-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.document-card-head {
  cursor: pointer;
}

.document-score-badge.has-score {
  min-width: 72px;
  text-align: center;
}

.document-rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-rating-summary button {
  border: 0;
  background: transparent;
  color: var(--axis-color);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
}