:root{--navy:#204a63;--blue:#4d91c6;--green:#2aa876;--green2:#68b68c;--ink:#183448;--muted:#6c7d89;--bg:#f3f7f8;--card:#fff;--line:#dce7ea;--soft:#eaf6f1;--danger:#bf4a4a;--warn:#a66e14;--radius:18px;--shadow:0 14px 38px rgba(24,52,72,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}
body:before{content:"";position:fixed;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--blue),var(--green));z-index:99}
.container{width:100%;max-width:none;margin:0;padding-inline:clamp(14px,3vw,46px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:800;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn.primary{color:#fff;background:linear-gradient(135deg,var(--navy),#2d6a83)}.btn.green{color:#fff;background:linear-gradient(135deg,var(--green),#188061)}.btn.soft{color:var(--navy);background:#e8f1f5;border:1px solid #d4e1e7}.btn.danger{color:#fff;background:var(--danger)}.btn:disabled{opacity:.55;cursor:not-allowed}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:18px}
.input,.select,.textarea{width:100%;border:1px solid #cfdee3;border-radius:12px;background:#fff;padding:12px 13px;color:var(--ink);outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(42,168,118,.12)}.textarea{min-height:100px;resize:vertical}.label{display:block;font-size:13px;font-weight:800;margin:0 0 7px}.field-help{display:block;margin-top:6px;font-size:12px;line-height:1.6;color:var(--muted)}.field-help.notice{color:#8a5c08;background:#fff7e6;border:1px solid #f1d59a;border-radius:10px;padding:8px 10px}.input.input-error{border-color:#bf4a4a;box-shadow:0 0 0 3px rgba(191,74,74,.10)}.input.input-ok{border-color:#2aa876}.availability{display:block;margin-top:6px;font-size:12px;font-weight:700}.availability.error{color:#a83939}.availability.ok{color:#177556}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.muted{color:var(--muted)}.tiny{font-size:12px}.tag{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;background:#e9f3f6;color:var(--navy)}.tag.green{background:#e6f6ef;color:#177556}.tag.warn{background:#fff3dc;color:#90600b}.tag.red{background:#fde9e9;color:#a83939}
/* auth */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:34px 0}.auth-wrap{width:min(1050px,calc(100% - 28px));display:grid;grid-template-columns:1.02fr .98fr;overflow:hidden}.auth-brand{padding:44px;background:linear-gradient(150deg,var(--navy),#285f76 62%,var(--green));color:#fff;position:relative;min-height:610px}.auth-brand:after{content:"";position:absolute;inset:auto -70px -100px auto;width:320px;height:320px;border:1px solid rgba(255,255,255,.18);border-radius:50%}.logo-mark{width:76px;height:76px;border-radius:24px;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:38px;border:1px solid rgba(255,255,255,.22)}.auth-brand h1{font-size:38px;margin:22px 0 10px}.auth-brand p{line-height:1.9;color:#e7f4f4}.brand-points{display:grid;gap:12px;margin-top:28px}.brand-point{display:flex;gap:11px;align-items:flex-start;background:rgba(255,255,255,.10);padding:13px;border-radius:14px}.auth-panel{padding:42px;background:#fff}.auth-panel h2{margin:0 0 7px;font-size:27px}.tabs{display:flex;gap:8px;background:#eef4f6;padding:5px;border-radius:13px;margin:22px 0}.tab-btn{flex:1;border:0;background:transparent;padding:10px;border-radius:10px;font-weight:800;color:var(--muted)}.tab-btn.active{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(24,52,72,.08)}.form-stack{display:grid;gap:13px}.demo-box{margin-top:20px;padding:14px;border-radius:14px;background:#f2f8f6;border:1px dashed #a9d9c5}.demo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.demo-login{border:1px solid #d5e6e1;background:#fff;border-radius:10px;padding:8px;font-size:12px;color:var(--navy);font-weight:800}
.remember-login{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:13px;font-weight:800;cursor:pointer;user-select:none}.remember-login input{width:18px;height:18px;accent-color:var(--green);cursor:pointer}.remember-login span{line-height:1.4}
/* app */
.app-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.header-row{height:70px;display:flex;align-items:center;gap:16px}.brand-mini{display:flex;align-items:center;gap:10px;min-width:max-content}.brand-mini .mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--navy),var(--green));color:#fff;display:grid;place-items:center;font-size:22px}.brand-mini strong{display:block}.brand-mini small{color:var(--muted)}.main-nav{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}.nav-btn{border:0;background:transparent;padding:10px 12px;border-radius:10px;color:#546b79;font-weight:800;white-space:nowrap}.nav-btn.active,.nav-btn:hover{background:#e9f3f6;color:var(--navy)}.header-actions{display:flex;align-items:center;gap:8px;min-width:max-content}.user-pill{display:flex;align-items:center;gap:9px;border-right:1px solid var(--line);padding-right:12px}.avatar{width:38px;height:38px;border-radius:13px;background:#e2f3ec;color:#167758;display:grid;place-items:center;font-weight:900}.app-main{padding:26px 0 60px}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.page-head h1{margin:0 0 6px;font-size:27px}
.school-banner{background:linear-gradient(120deg,var(--navy),#2b657e);color:#fff;padding:22px;border-radius:20px;position:relative;overflow:hidden}
.school-banner:after{content:"";position:absolute;left:-60px;bottom:-100px;width:250px;height:250px;border:1px solid rgba(255,255,255,.18);border-radius:50%}.school-banner h2{margin:0 0 6px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.kpi{padding:18px}.kpi-top{display:flex;align-items:center;justify-content:space-between}.kpi-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#e7f4ef;font-size:21px}.kpi b{font-size:29px;display:block;margin-top:9px}.section{margin-top:22px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title h2{font-size:20px;margin:0}.employee-grid,.assignment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.employee-card,.assignment-card{padding:17px}.employee-top{display:flex;justify-content:space-between;gap:12px}.employee-name{font-weight:900;font-size:17px}.progress{height:9px;background:#e7eef1;border-radius:999px;overflow:hidden;margin-top:10px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:inherit}.card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.assignment-card{position:relative;transition:.2s}.assignment-card:hover{transform:translateY(-3px);border-color:#acd6c5}.assignment-card h3{font-size:16px;margin:11px 0 5px}.assignment-card .count{position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:11px;background:#e8f4f0;color:#167556;display:grid;place-items:center;font-weight:900}.assignment-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#e6f2f7,#e5f6ee);display:grid;place-items:center;font-size:24px}.table-wrap{overflow:auto;border-radius:16px;border:1px solid var(--line);background:#fff}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{padding:13px 14px;border-bottom:1px solid #e9eff1;text-align:right}.table th{font-size:12px;color:#5f7380;background:#f6f9fa}.table tr:last-child td{border-bottom:0}.empty{padding:38px;text-align:center;color:var(--muted)}
/* detail */
.detail-layout{display:grid;grid-template-columns:1fr 340px;gap:18px}.work-list{display:grid;gap:12px}.work-item{padding:15px;display:flex;align-items:center;justify-content:space-between;gap:14px}.work-main{display:flex;gap:12px;align-items:flex-start}.file-icon{width:44px;height:44px;border-radius:13px;background:#eaf3f6;display:grid;place-items:center;font-size:22px;flex:0 0 auto}.note-box{padding:17px;background:#f1f8f5;border:1px solid #cde8dc;border-radius:16px}.timeline{display:grid;gap:10px}.timeline-item{border-right:3px solid var(--green);padding:10px 12px;background:#fff;border-radius:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
/* modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(8,29,42,.58);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.28)}.modal-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-head h3{margin:0}.modal-body{padding:20px}.modal-foot{padding:15px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-start;gap:9px}.dropzone{border:2px dashed #b8d3dd;border-radius:15px;padding:22px;text-align:center;background:#f7fafb}.preview-frame{width:100%;height:70vh;border:0;background:#eef3f5;border-radius:13px}.preview-img{display:block;max-width:100%;max-height:70vh;margin:auto;border-radius:13px}.toast-wrap{position:fixed;left:20px;bottom:20px;z-index:200;display:grid;gap:8px}.toast{background:#173e52;color:#fff;padding:12px 15px;border-radius:12px;box-shadow:var(--shadow);min-width:250px}.toast.error{background:#a33c3c}
.auth-logo {
  width: 170px;
  height: 170px;
  object-fit: contain;
  display: block;
  margin: 0 auto 5px;
}

.auth-logo-wrap {
width: 210px;
height: 210px;
margin: 0 auto 22px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 12px 35px rgba(255, 255, 255, 0.22),
0 8px 24px rgba(0, 0, 0, 0.10),
0 0 0 10px rgba(255, 255, 255, 0.08);
backdrop-filter: blur(4px);
}



.brand-mini {
display: flex;
align-items: center;
gap: 10px;
min-width: 240px;
}

.header-logo {
width: 170px;
height: 170px;
object-fit: contain;
flex-shrink: 0;
}

.header-brand-text {
display: flex;
flex-direction: column;
gap: 2px;
}

.header-brand-text strong {
font-size: 19px;
font-weight: 800;
color: #173f59;
line-height: 1.2;
}

.header-brand-text span {
font-size: 18;
color: #1b3542;
line-height: 1.4;
}

@media (max-width: 700px) {
.brand-mini {
min-width: auto;
gap: 7px;
}

.header-logo {
width: 70px;
height: 70px;
}

.header-brand-text strong {
font-size: 15px;
}

.header-brand-text span {
display: none;
}
}

@media (max-width: 600px) {
.auth-logo-wrap {
width: 165px;
height: 165px;
margin: 0 auto 18px;
}

.auth-logo {
width: 112px;
height: 112px;
}
}

@media (max-width: 600px) {
  .auth-logo {
    width: 130px;
    height: 130px;
  }
}

.subscription-countdown {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 18px;
  padding: 12px 16px;
  border: 1px solid #dce8eb;
  border-radius: 14px;
  background: #f7fbfc;
  color: #244b53;
  font-size: 14px;
}

.subscription-countdown.show {
  display: flex;
}

.subscription-countdown.warning {
  border-color: #ead7a3;
  background: #fffaf0;
  color: #755a16;
}

.subscription-countdown.danger {
  border-color: #efc2c2;
  background: #fff5f5;
  color: #a33131;
}

.subscription-countdown strong {
  font-size: 15px;
}

@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-brand{min-height:auto}.auth-panel{padding:28px}.kpis{grid-template-columns:repeat(2,1fr)}.employee-grid,.assignment-grid{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr}.user-pill span{display:none}}
@media(max-width:600px){
  .container{width:100%;padding-inline:12px}
  .auth-brand{padding:28px}.auth-brand h1{font-size:31px}.grid2,.grid3{grid-template-columns:1fr}.demo-list{grid-template-columns:1fr}.header-row{height:auto;min-height:68px;flex-wrap:wrap;padding:10px 0}.main-nav{order:3;width:100%}.header-actions .btn{display:none}.kpis,.employee-grid,.assignment-grid{grid-template-columns:1fr}.page-head{flex-direction:column}
  
  /* تقوية وضوح اسم المدرسة */
.school-banner h2{
  font: weight 700px;;
}

/* المعلومات تحت اسم المدرسة */
.school-banner > div{
  font: weight 800;;
}

/* عناوين الإحصائيات: الموظفون، الشواهد... */
.kpi .muted{
  font-weight:800;
  color:rgb(24, 60, 78);
}

/* عناوين الأقسام مثل متابعة الطاقم */
.section-title h2{
  font-weight:900;
}
  
  .school-banner{padding: 20px;}
  .work-item{align-items:flex-start;flex-direction:column}
  .modal{border-radius:18px}
  .modal-backdrop{padding:8px}}

/* navigation drawer + polished UX */
.menu-btn{width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:22px;box-shadow:0 5px 16px rgba(24,52,72,.07);transition:.2s}
.menu-btn:hover{transform:translateY(-1px);border-color:#add3c5;background:#f6fbf9}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(8,29,42,.54);backdrop-filter:blur(3px);z-index:999;opacity:0;visibility:hidden;transition:.24s}
.sidebar-backdrop.open{opacity:1;visibility:visible}
.sidebar{position:fixed;z-index:1000;top:0;right:0;width:min(350px,90vw);height:100dvh;background:#fff;box-shadow:-20px 0 60px rgba(16,48,65,.22);transform:translateX(106%);transition:transform .28s ease;display:flex;flex-direction:column}
.sidebar.open{transform:translateX(0)}
.sidebar-head{padding:20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(145deg,#f7fbfc,#edf7f3)}
.sidebar-brand{display:flex;align-items:center;gap:11px;min-width:0}.sidebar-brand img{width:56px;height:56px;object-fit:contain}.sidebar-brand div{min-width:0}.sidebar-brand strong{display:block;color:var(--navy);font-size:18px}.sidebar-brand small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.sidebar-user{margin:14px;padding:14px;border-radius:15px;background:linear-gradient(135deg,var(--navy),#2c6b80);color:#fff;display:flex;gap:11px;align-items:center}.sidebar-user .avatar{background:rgba(255,255,255,.18);color:#fff}.sidebar-user small{display:block;color:#dcecf1;margin-top:2px}
.sidebar-nav{padding:4px 14px 14px;display:grid;gap:6px;overflow:auto}.side-link{width:100%;border:0;background:transparent;color:#456170;border-radius:13px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:right;font-weight:800;transition:.18s}.side-link:hover,.side-link.active{background:#e8f5ef;color:#15765a}.side-link .side-icon{width:31px;height:31px;border-radius:10px;background:#edf4f6;display:grid;place-items:center;font-size:16px}.side-link.active .side-icon{background:#d7eee4}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:14px}.logout-link{color:#a33c3c}.logout-link:hover{background:#fdeeee;color:#9c3030}
body.drawer-open{overflow:hidden}.main-nav{display:none!important}
.header-row{justify-content:space-between}.header-brand-area{display:flex;align-items:center;gap:12px}.header-actions{margin-inline-start:auto}
.app-main{min-height:calc(100vh - 70px)}
.page-head{padding-top:4px}.page-head>div:first-child{max-width:850px}.page-head h1{letter-spacing:-.3px}
.card{transition:border-color .18s,box-shadow .18s}.employee-card:hover,.assignment-card:hover{box-shadow:0 17px 44px rgba(24,52,72,.14)}
.profile-hero{padding:22px;background:linear-gradient(135deg,var(--navy),#2e6b82);color:#fff;border-radius:20px;display:flex;align-items:center;gap:16px;margin-bottom:18px}.profile-hero .avatar{width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.18);color:#fff;font-size:20px}.profile-hero h2{margin:0 0 4px}.profile-hero p{margin:0;color:#dcebf0}
.form-note{padding:14px 16px;border-radius:12px;background:#f0f7f4;border:1px solid #d6ebe2;color:#386b58;font-size:15px;font: weight 700px;line-height:1.8;}
.readonly-box{background:#f3f6f7!important;color:#687b86!important}
.staff-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
@media(max-width:700px){.header-logo{width:44px;height:44px}.header-row{flex-wrap:nowrap}.user-pill span{display:none}.profile-hero{align-items:flex-start}.page-head{gap:12px}.page-head h1{font-size:23px}}


.permission-list{display:grid;gap:12px}.permission-card{padding:18px}.permission-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}.permission-row:last-child{border-bottom:0}.switch{position:relative;width:48px;height:27px;display:inline-block}.switch input{display:none}.switch span{position:absolute;inset:0;background:#cfdde2;border-radius:999px;transition:.2s}.switch span:after{content:"";position:absolute;width:21px;height:21px;top:3px;right:3px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:after{transform:translateX(-21px)}.privacy-banner{padding:15px 17px;border:1px solid #cde8dc;background:#f0faf6;border-radius:15px;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}.share-chip{display:inline-flex;gap:6px;align-items:center;padding:6px 9px;border-radius:999px;background:#eaf4f7;color:var(--navy);font-size:12px;font-weight:800}.access-select{min-width:170px}

.notification-btn{position:relative;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:14px;display:grid;place-items:center;font-size:21px;cursor:pointer}.notification-btn:hover{background:#eef7f4}.notification-badge{position:absolute;top:-5px;left:-5px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#d94747;color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid #fff}
.trial-banner{width:min(1180px,calc(100% - 28px));margin:14px auto 0;padding:16px 18px;border-radius:18px;background:#f8fbff;border:1px solid #d8e8f8;box-shadow:0 8px 24px rgba(35,89,125,.07);display:flex;gap:18px;align-items:center;justify-content:space-between}
.trial-banner__content{display:flex;gap:12px;align-items:flex-start;min-width:0}
.trial-banner__icon{width:42px;height:42px;border-radius:13px;background:#e8f3fc;color:#1f6fae;display:grid;place-items:center;flex:0 0 auto;font-size:20px}
.trial-banner__text{min-width:0}.trial-banner strong{display:block;color:#1f4b63;font-size:15px;margin-bottom:3px}.trial-banner span{display:block;color:#607887;font-size:13px;line-height:1.65}
.trial-banner__side{display:flex;align-items:center;gap:10px;flex:0 0 auto}.trial-countdown{white-space:nowrap;font-weight:900;color:#1f4b63;background:#fff;border:1px solid #d8e8f8;border-radius:12px;padding:9px 12px}.trial-subscribe-btn{white-space:nowrap}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.plan-card{padding:20px;position:relative}.plan-card.featured{border:2px solid var(--green);transform:translateY(-3px)}.plan-price{font-size:30px;font-weight:900;margin:12px 0}.plan-price small{font-size:13px;color:var(--muted)}.best-label{position:absolute;top:12px;left:12px;background:var(--green);color:#fff;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900}.notification-list{display:grid;gap:10px}.notification-item{padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer}.notification-item.unread{background:#edf8f4;border-color:#a8d9c7}.notification-item-head{display:flex;justify-content:space-between;gap:12px}.notification-item p{margin:7px 0 0}.notification-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.subscription-blocked{text-align:center;padding:34px}.subscription-blocked .lock{font-size:50px}.subscription-status-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff1c0;color:#745900;font-weight:900;font-size:12px}.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.admin-stat{padding:16px}.admin-stat b{display:block;font-size:26px;margin-top:6px}.admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.admin-toolbar .input,.admin-toolbar .select{width:auto;min-width:190px}.status-chip{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}.status-chip.trial{background:#e8f3fc;color:#1f6fae}.status-chip.active{background:#e8f7ef;color:#14734e}.status-chip.expired,.status-chip.trial_expired{background:#fff1e8;color:#a34b18}.status-chip.suspended{background:#ffe9eb;color:#a3202d}.admin-actions{display:flex;gap:6px;flex-wrap:wrap}.admin-actions .btn{padding:7px 9px;font-size:11px}@media(max-width:900px){.admin-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.plans-grid{grid-template-columns:1fr}.trial-banner{align-items:stretch;flex-direction:column;padding:14px}.trial-banner__side{width:100%;justify-content:space-between;flex-wrap:wrap}.trial-countdown{flex:1;text-align:center}.trial-subscribe-btn{flex:1}.header-actions .notification-btn{display:grid}.user-pill span{display:none}}


.support-form-card{max-width:820px;padding:22px;margin-inline:auto}.support-school-box{padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#f6f9fa;color:var(--navy);font-weight:800}.support-ticket-grid{display:grid;gap:12px}.support-ticket-card{padding:16px;border:1px solid var(--line);border-radius:15px;background:#fff}.support-ticket-card.unread{border-color:#a8d9c7;background:#f1faf6}.support-ticket-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.support-ticket-detail{display:grid;gap:12px}.support-ticket-detail-row{padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#f8fafb}.support-ticket-detail-row b{display:block;margin-bottom:5px}.support-status{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}.support-status.new{background:#e8f3fc;color:#1f6fae}.support-status.in_progress{background:#fff3dc;color:#90600b}.support-status.resolved{background:#e6f6ef;color:#177556}.support-status.closed{background:#eef1f3;color:#5d6c75}.support-attachment-note{font-size:12px;color:var(--muted);margin-top:6px}.support-admin-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.support-admin-toolbar .input,.support-admin-toolbar .select{width:auto;min-width:190px}

.independent-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#eef9f5;color:#176b59;font-size:12px;font-weight:900;border:1px solid #cfe6df}.school-request-note{padding:14px;border-radius:14px;background:#f6faf8;border:1px solid #dcebe5;color:#47675d}
@media print{.app-header,.btn,.card-actions,.header-actions{display:none!important}.app-main{padding:0}.card{box-shadow:none}.container{width:100%}}

.retention-notice{
  width:min(1180px,calc(100% - 28px));
  margin:9px auto 0;
  padding:10px 14px;
  border-radius:14px;
  background:#fffdf7;
  border:1px solid #eee3c9;
  display:flex;
  align-items:center;
  gap:9px;
  color:#665a43;
}
.retention-notice__icon{
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:#f7f0df;
  color:#79663b;
  font-size:15px;
}
.retention-notice strong{display:inline;font-size:13px;margin:0;color:#665a43}
.retention-notice span{display:inline;font-size:12px;line-height:1.6;color:#8a806b;margin-inline-start:5px}
@media(max-width:600px){
  .retention-notice{width:calc(100% - 18px);padding:10px 12px;border-radius:12px;align-items:flex-start}
  .retention-notice__icon{width:28px;height:28px;font-size:14px}
  .retention-notice strong,.retention-notice span{display:block;margin:0}
  .retention-notice strong{font-size:13px}
  .retention-notice span{font-size:12px}
}

.site-footer {
margin-top: 48px;
padding: 26px 20px;
background:
linear-gradient(135deg, #173f59, #0f6f68);
color: #ffffff;
border-top: 4px solid #cda84a;
}

.footer-inner {
width: min(1180px, calc(100% - 24px));
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 24px;
align-items: center;
}

.footer-brand {
display: flex;
flex-direction: column;
gap: 6px;
}

.footer-brand strong {
font-size: 17px;
font-weight: 900;
}

.footer-brand span {
font-size: 13px;
color: rgba(255, 255, 255, 0.72);
}

.footer-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.footer-links a {
min-width: 0;
padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
transition: 0.2s ease;
}

.footer-links a:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.28);
}

.footer-icon {
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.12);
display: grid;
place-items: center;
flex: 0 0 auto;
}

.footer-links a span:last-child {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}

.footer-links small {
font-size: 11px;
color: rgba(255, 255, 255, 0.72);
}

.footer-links b {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 900px) {
.footer-inner {
grid-template-columns: 1fr;
}

.footer-links {
grid-template-columns: 1fr;
}
}

@media (max-width: 600px) {
.site-footer {
margin-top: 34px;
padding: 22px 12px;
}

.footer-inner {
width: 100%;
}

.footer-brand {
text-align: center;
}
}




/* =========================================================
   BASMAT ADAA — PROFESSIONAL UI SYSTEM V1
   تحسين بصري فقط مع المحافظة على الوظائف والهوية
   ========================================================= */
:root{
  --navy:#173f59;
  --navy-2:#245b74;
  --blue:#3c86b8;
  --green:#13866f;
  --green2:#2da58d;
  --ink:#173247;
  --muted:#6f818d;
  --bg:#f5f7fa;
  --card:#ffffff;
  --line:#e2e9ee;
  --soft:#eef5f7;
  --danger:#b6404b;
  --warn:#9a6717;
  --radius:16px;
  --shadow:0 8px 28px rgba(21,50,69,.075);
  --shadow-hover:0 16px 38px rgba(21,50,69,.12);
}

body{
  background:
    radial-gradient(circle at 95% 0%,rgba(19,134,111,.045),transparent 28rem),
    linear-gradient(180deg,#f8fafb 0,#f4f7f9 34rem,#f5f7fa 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body:before{
  height:3px;
  background:linear-gradient(90deg,var(--navy),var(--green2),#c7a64c);
}

button,a,input,select,textarea{
  transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(19,134,111,.19);
  outline-offset:2px;
}

.card{
  border-color:rgba(218,228,234,.9);
  box-shadow:var(--shadow);
}

.btn{
  min-height:42px;
  padding:10px 16px;
  border-radius:11px;
  letter-spacing:0;
  box-shadow:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--navy),var(--navy-2));box-shadow:0 8px 18px rgba(23,63,89,.16)}
.btn.green{background:linear-gradient(135deg,var(--green),#0d715f);box-shadow:0 8px 18px rgba(19,134,111,.15)}
.btn.soft{background:#f4f8fa;border-color:#dbe5ea;color:var(--navy)}
.btn.soft:hover{background:#eaf2f5;border-color:#cbdbe2}

.input,.select,.textarea{
  border-color:#d7e1e7;
  border-radius:11px;
  padding:12px 14px;
  box-shadow:0 1px 0 rgba(20,47,65,.02);
}
.input:hover,.select:hover,.textarea:hover{border-color:#bfd0d8}

/* صفحة الدخول */
.auth-shell{padding:28px 0}
.auth-wrap{
  width:min(1080px,calc(100% - 28px));
  border:1px solid rgba(214,226,232,.9);
  box-shadow:0 28px 80px rgba(18,47,65,.13);
}
.auth-brand{
  padding:48px;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,255,255,.14),transparent 18rem),
    linear-gradient(145deg,#173f59 0%,#205d70 58%,#13866f 100%);
}
.auth-panel{padding:46px}
.auth-panel h2{font-size:28px;letter-spacing:-.4px}
.tabs{background:#f1f5f7;border:1px solid #e4ebef}
.tab-btn.active{box-shadow:0 5px 14px rgba(23,63,89,.07)}

/* الهيدر */
.app-header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(219,228,234,.92);
  box-shadow:0 5px 20px rgba(20,47,65,.045);
  backdrop-filter:blur(18px) saturate(145%);
}
.header-row{
  height:auto;
  min-height:78px;
  padding-block:9px;
  gap:14px;
}
.header-brand-area{gap:11px;min-width:0}
.brand-mini{min-width:0;gap:10px}
.header-logo{
  width:52px;
  height:52px;
  filter:drop-shadow(0 5px 10px rgba(20,47,65,.08));
}
.header-brand-text{gap:1px;min-width:0}
.header-brand-text strong{
  font-size:17px;
  color:var(--navy);
  letter-spacing:-.25px;
}
.header-brand-text>span{
  display:block;
  max-width:min(420px,42vw);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  color:#738591;
}
.menu-btn,.notification-btn,.icon-btn{
  border-color:#dce5ea;
  box-shadow:0 4px 14px rgba(22,53,72,.055);
}
.menu-btn:hover,.notification-btn:hover,.icon-btn:hover{
  background:#f0f7f5;
  border-color:#bfd9d1;
  color:var(--green);
}
.header-actions{gap:10px}
.user-pill{
  border-right:0;
  padding:5px 8px 5px 5px;
  border-radius:14px;
  background:#f7f9fa;
  border:1px solid #e4ebef;
}
.user-pill .avatar{width:39px;height:39px;border-radius:12px}
.user-pill strong{font-size:13px}
.user-pill small{display:block;font-size:11px;margin-top:1px}

/* العد التنازلي داخل الهيدر */
.subscription-countdown{
  display:none;
  width:max-content;
  max-width:100%;
  min-height:0;
  margin:4px 0 0;
  padding:3px 8px;
  gap:5px;
  align-items:center;
  justify-content:flex-start;
  border:1px solid #cfe6df;
  border-radius:999px;
  background:#eff9f6;
  color:#176b59;
  font-size:10.5px;
  line-height:1.35;
  box-shadow:none;
  white-space:nowrap;
}
.subscription-countdown.show{display:inline-flex}
.subscription-countdown span{font-weight:600}
.subscription-countdown strong{font-size:10.5px;font-weight:900}
.subscription-countdown.warning{
  border-color:#ead9ae;
  background:#fff9ec;
  color:#846019;
}
.subscription-countdown.danger{
  border-color:#ecc8cd;
  background:#fff3f4;
  color:#a63b47;
}

/* شريط التجربة */
.trial-banner{
  width:min(1120px,calc(100% - 28px));
  margin:13px auto 0;
  padding:12px 14px;
  border-radius:15px;
  background:linear-gradient(135deg,#f5fbff,#f2faf7);
  border:1px solid #dbe9e7;
  box-shadow:0 7px 22px rgba(25,73,83,.055);
}
.trial-banner__icon{
  width:36px;height:36px;border-radius:11px;
  background:#e7f4f1;color:var(--green);
}
.trial-banner strong{font-size:13px;margin-bottom:1px}
.trial-banner span{font-size:12px;line-height:1.5}
.trial-banner__side{gap:8px}
.trial-subscribe-btn{min-height:37px;padding:8px 13px;font-size:12px}

/* تنبيه الاحتفاظ بالملفات: صغير وخارج الهيدر */
.retention-row{
  display:flex;
  justify-content:flex-start;
  padding-top:9px;
}
.retention-notice{
  width:auto;
  max-width:min(560px,100%);
  margin:0;
  padding:8px 10px;
  border-radius:12px;
  background:#fffdf8;
  border:1px solid #ece2ca;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#665b46;
  box-shadow:0 4px 14px rgba(94,75,38,.04);
}
.retention-notice__icon{
  width:28px;height:28px;border-radius:9px;
  background:#f7efdc;color:#7c6837;font-size:14px;
}
.retention-notice__copy{min-width:0;line-height:1.35}
.retention-notice strong{
  display:block;
  margin:0;
  font-size:11.5px;
  color:#655a44;
  font-weight:900;
}
.retention-notice span{
  display:block;
  margin:1px 0 0;
  font-size:10.5px;
  color:#90836b;
  line-height:1.35;
}

/* المحتوى والبطاقات */
.app-main{padding:22px 0 56px}
.page-head{margin-bottom:17px;align-items:center}
.page-head h1{font-size:25px;letter-spacing:-.45px}
.page-head p{margin-top:4px}
.school-banner{
  padding:22px 24px;
  border-radius:18px;
  background:
    radial-gradient(circle at 7% 12%,rgba(255,255,255,.12),transparent 15rem),
    linear-gradient(125deg,#173f59,#245f74 60%,#187d70);
  box-shadow:0 15px 34px rgba(23,63,89,.14);
}
.kpis{gap:12px;margin:16px 0}
.kpi{padding:16px;border-radius:15px}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.kpi-icon{width:40px;height:40px;border-radius:12px}
.kpi b{font-size:27px}
.section{margin-top:20px}
.employee-grid,.assignment-grid{gap:12px}
.employee-card,.assignment-card{padding:16px;border-radius:15px}
.employee-card:hover,.assignment-card:hover{
  transform:translateY(-2px);
  border-color:#c6ddd6;
  box-shadow:var(--shadow-hover);
}
.employee-name{font-size:16px}
.progress{height:7px;background:#e9eff2}
.table-wrap{border-color:#e0e8ed;box-shadow:0 5px 18px rgba(23,63,89,.035)}
.table th{background:#f7f9fa;color:#617783;font-weight:900}
.table tr:hover td{background:#fbfcfd}

/* القائمة الجانبية */
.sidebar{
  width:min(340px,91vw);
  box-shadow:-26px 0 70px rgba(18,45,62,.22);
}
.sidebar-head{background:linear-gradient(145deg,#fafcfd,#eff7f4);padding:18px}
.sidebar-user{margin:12px 14px;padding:13px;border-radius:14px}
.sidebar-nav{gap:5px}
.side-link{padding:11px 13px;border-radius:11px}
.side-link:hover,.side-link.active{background:#eaf5f1;color:#116e5a}

/* النوافذ والتنبيهات */
.modal{border-radius:19px;border:1px solid rgba(224,232,237,.9)}
.modal-head{padding:16px 19px;background:#fbfcfd}
.modal-body{padding:19px}
.modal-foot{padding:13px 19px;background:#fbfcfd}
.notification-item{border-radius:12px}
.notification-item:hover{border-color:#bfd9d1;transform:translateY(-1px)}
.notification-item.unread{background:#f0faf6;border-color:#b7ddce}

/* الفوتر */
.site-footer{
  margin-top:42px;
  padding:24px 20px;
  background:linear-gradient(135deg,#153a52,#0f6e66);
  border-top:3px solid #c7a64c;
}
.footer-links a{border-radius:12px}

@media(max-width:900px){
  .header-brand-text>span{max-width:34vw}
  .subscription-countdown span{display:none}
  .auth-brand{padding:36px}
  .auth-panel{padding:32px}
}

@media(max-width:700px){
  .header-row{min-height:68px;padding-block:7px;gap:8px}
  .header-logo{width:43px;height:43px}
  .header-brand-text strong{font-size:14px}
  .header-brand-text>span{display:block;max-width:42vw;font-size:10.5px}
  .subscription-countdown{margin-top:2px;padding:2px 7px;font-size:9.5px}
  .subscription-countdown strong{font-size:9.5px}
  .menu-btn,.notification-btn{width:40px;height:40px;border-radius:11px}
  .header-actions{gap:6px}
  .user-pill{padding:3px;background:transparent;border:0}
  .user-pill .avatar{width:36px;height:36px}
  .retention-row{padding-top:7px}
  .retention-notice{max-width:100%;padding:7px 9px}
  .retention-notice span{display:none}
  .trial-banner{width:calc(100% - 20px);padding:11px 12px}
  .trial-banner__text span{display:none}
  .app-main{padding-top:17px}
}

@media(max-width:480px){
  .header-brand-text>span{max-width:33vw}
  .subscription-countdown span{display:none}
  .subscription-countdown strong{font-size:9px}
  .retention-notice strong{font-size:10.5px}
  .page-head h1{font-size:22px}
}

/* المشرف العام */
.executive-school-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.executive-school-card{padding:18px;position:relative}
.executive-school-card h3{margin:8px 0 5px;font-size:17px}
.executive-school-card .school-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.executive-staff-section{margin-top:18px}
.executive-staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.executive-staff-card{padding:16px;cursor:pointer}
.executive-staff-card:hover{transform:translateY(-2px);border-color:#bfd9d1;box-shadow:var(--shadow-hover)}
.executive-role-badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:#edf5f8;color:var(--navy);font-size:11px;font-weight:900;margin-top:7px}
.executive-breadcrumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:14px;font-size:12px;color:var(--muted)}
.executive-breadcrumb button{border:0;background:transparent;color:var(--green);font-weight:900;padding:0;cursor:pointer}
.executive-empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:900px){.executive-school-grid,.executive-staff-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.executive-school-grid,.executive-staff-grid{grid-template-columns:1fr}}

/* ===== تعديلات نهائية للهيدر ولوحة المدرسة ===== */

/* تكبير شعار الهيدر */
.header-logo{
  width:80px !important;
  height:80px !important;
}

/* اسم منصة بصمة أداء */
.header-brand-text strong{
  font-size:18px !important;
  font-weight:900 !important;
  color:#b42a11 !important;
}

/* اسم المدرسة في الهيدر */
.header-brand-text > span{
  font-size:18px !important;
  font-weight:800 !important;
  color:#284c5f !important;
}

/* اسم المدرسة داخل البانر */
.school-banner h2{
  font-weight:900 !important;
  font-size:24px !important;
}

/* الموظفون - الشواهد - بانتظار المراجعة - متوسط الاكتمال */
.kpi .muted{
  font-weight:800 !important;
  color:#204153 !important;
  font-size:18px !important;
}

/* وضوح النص المكتوب داخل الحقول */
.input,
.select,
.textarea{
  color:#183448 !important;
  font-size:15px !important;
  font-weight:700 !important;
}

/* النص الإرشادي قبل الكتابة */
.input::placeholder,
.textarea::placeholder{
  color:#394d5a !important;
  font-weight:500 !important;
  opacity:1 !important;
}

/* عناوين الحقول: الاسم الكامل، رقم الجوال... */
.label{
  color:#345c72 !important;
  font-size:14px !important;
  font-weight:800 !important;
}



/* ===== مشاركة ملف الأداء عبر رابط عام آمن ===== */
.performance-share-card{max-width:860px;margin-inline:auto;padding:22px}
.performance-share-status{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#f8fafb;margin-bottom:16px}
.performance-share-link-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.performance-share-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.public-share-shell{min-height:100vh;background:linear-gradient(180deg,#f8fafb,#f2f6f7);padding:26px 0 50px}
.public-share-header{width:min(1120px,calc(100% - 28px));margin:0 auto 18px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}
.public-share-brand{display:flex;align-items:center;gap:11px}.public-share-brand img{width:54px;height:54px;object-fit:contain}.public-share-brand strong{display:block;color:var(--navy);font-size:18px}.public-share-brand small{display:block;color:var(--muted);margin-top:2px}
.public-share-main{width:min(1120px,calc(100% - 28px));margin:0 auto}
.public-share-hero{padding:22px 24px;border-radius:18px;background:linear-gradient(125deg,#173f59,#245f74 60%,#187d70);color:#fff;box-shadow:0 15px 34px rgba(23,63,89,.14);margin-bottom:18px}
.public-share-hero h1{margin:0 0 6px;font-size:25px}.public-share-hero p{margin:0;color:#e0eef1}
.public-share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.public-share-item{padding:17px;cursor:pointer}.public-share-item:hover{transform:translateY(-2px);border-color:#c6ddd6;box-shadow:var(--shadow-hover)}
.public-share-item h3{font-size:15px;margin:11px 0 5px}.public-share-item .count{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:11px;background:#e8f4f0;color:#167556;font-weight:900}
.public-share-back{margin-bottom:14px}
.public-share-work-list{display:grid;gap:11px}.public-share-work{padding:15px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.public-share-error{max-width:720px;margin:70px auto;padding:32px;text-align:center}
@media(max-width:800px){.public-share-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.performance-share-link-row{grid-template-columns:1fr}.public-share-grid{grid-template-columns:1fr}.public-share-work{align-items:flex-start;flex-direction:column}.public-share-header{align-items:flex-start}.public-share-brand img{width:46px;height:46px}}


/* =========================================================
   BASMAT ADAA — FINAL BRAND PALETTE
   متوافق مع ألوان الشعار:
   الأزرق الرئيسي: #184b8f
   الأخضر الثانوي: #72a67f
   ========================================================= */
:root{
  --navy:#184b8f;
  --navy-2:#123d75;
  --blue:#2f6fb3;
  --green:#72a67f;
  --green2:#8fba99;
  --ink:#17324f;
  --muted:#6f8192;
  --bg:#f5f8fb;
  --card:#ffffff;
  --line:#dce6ef;
  --soft:#edf4f9;
  --danger:#b6404b;
  --warn:#9a6717;
  --radius:16px;
  --shadow:0 9px 28px rgba(24,75,143,.09);
  --shadow-hover:0 17px 40px rgba(24,75,143,.14);
}

/* الخلفية العامة */
body{
  background:
    radial-gradient(circle at 96% 0%,rgba(114,166,127,.10),transparent 30rem),
    radial-gradient(circle at 4% 8%,rgba(24,75,143,.06),transparent 26rem),
    linear-gradient(180deg,#f9fbfd 0,#f3f7fa 38rem,#f5f8fb 100%);
  color:var(--ink);
}

body:before{
  background:linear-gradient(90deg,#184b8f,#72a67f);
}

/* الأزرار */
.btn.primary{
  background:linear-gradient(135deg,#184b8f,#2f6fb3);
  box-shadow:0 8px 18px rgba(24,75,143,.18);
}
.btn.green{
  background:linear-gradient(135deg,#72a67f,#5c916a);
  box-shadow:0 8px 18px rgba(114,166,127,.18);
}
.btn.soft{
  color:#184b8f;
  background:#eef4f9;
  border-color:#d6e2ec;
}
.btn.soft:hover{
  background:#e4edf5;
  border-color:#bfd1e1;
}

/* الحقول */
.input,.select,.textarea{
  color:#17324f !important;
  border-color:#cfdeea;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:#72a67f;
  box-shadow:0 0 0 3px rgba(114,166,127,.18);
}
.input::placeholder,.textarea::placeholder{
  color:#718292 !important;
}
.label{
  color:#184b8f !important;
}

/* صفحة الدخول */
.auth-brand{
  background:
    radial-gradient(circle at 16% 10%,rgba(255,255,255,.15),transparent 18rem),
    linear-gradient(145deg,#123d75 0%,#184b8f 58%,#72a67f 100%);
}
.logo-mark,
.brand-mini .mark{
  background:linear-gradient(135deg,#184b8f,#72a67f);
}

/* الهيدر */
.app-header{
  border-bottom-color:#dce6ef;
  box-shadow:0 5px 20px rgba(24,75,143,.055);
}
.header-brand-text strong,
.header-brand-text > strong{
  color:#184b8f !important;
}
.header-brand-text > span{
  color:#557086 !important;
}
.menu-btn,
.notification-btn,
.icon-btn{
  color:#184b8f;
  border-color:#d8e4ed;
}
.menu-btn:hover,
.notification-btn:hover,
.icon-btn:hover{
  color:#5c916a;
  background:#f1f7f3;
  border-color:#c8ddce;
}
.avatar{
  background:#e8f2ea;
  color:#557e61;
}

/* البانرات الرئيسية */
.school-banner,
.profile-hero,
.sidebar-user,
.public-share-hero{
  background:
    radial-gradient(circle at 7% 12%,rgba(255,255,255,.13),transparent 15rem),
    linear-gradient(125deg,#123d75,#184b8f 60%,#72a67f);
  box-shadow:0 15px 34px rgba(24,75,143,.16);
}

/* الإحصائيات والبطاقات */
.kpi-icon{
  background:#e9f2eb;
  color:#557e61;
}
.kpi .muted{
  color:#345a78 !important;
}
.assignment-icon{
  background:linear-gradient(135deg,#eaf1f8,#e9f3eb);
}
.assignment-card .count,
.public-share-item .count{
  background:#e9f3eb;
  color:#557e61;
}
.progress span{
  background:linear-gradient(90deg,#184b8f,#72a67f);
}
.employee-card:hover,
.assignment-card:hover,
.executive-staff-card:hover,
.public-share-item:hover{
  border-color:#bdd6c3;
  box-shadow:var(--shadow-hover);
}

/* البطاقات الصغيرة والشارات */
.tag,
.share-chip,
.executive-role-badge{
  background:#eaf1f8;
  color:#184b8f;
}
.tag.green,
.independent-badge{
  background:#eaf4ec;
  color:#557e61;
  border-color:#d1e3d5;
}
.side-link:hover,
.side-link.active{
  background:#eaf4ec;
  color:#557e61;
}
.side-link.active .side-icon{
  background:#dcebdd;
}

/* العد التنازلي */
.subscription-countdown{
  border-color:#d1e3d5;
  background:#eff6f1;
  color:#557e61;
}
.subscription-countdown.warning{
  border-color:#ead9ae;
  background:#fff9ec;
  color:#846019;
}
.subscription-countdown.danger{
  border-color:#ecc8cd;
  background:#fff3f4;
  color:#a63b47;
}

/* شريط التجربة */
.trial-banner{
  background:linear-gradient(135deg,#f4f8fd,#f2f8f3);
  border-color:#d9e6df;
}
.trial-banner__icon{
  background:#e7f1e9;
  color:#557e61;
}
.trial-banner strong,
.trial-countdown{
  color:#184b8f;
}
.trial-countdown{
  border-color:#d8e4ed;
}

/* التنبيهات والنوافذ */
.notification-item.unread,
.support-ticket-card.unread{
  background:#f0f7f2;
  border-color:#bdd8c3;
}
.notification-item:hover{
  border-color:#bfd1e1;
}
.modal-backdrop{
  background:rgba(10,35,66,.60);
}

/* الروابط العامة */
.public-share-brand strong{
  color:#184b8f;
}

/* الفوتر */
.site-footer{
  background:linear-gradient(135deg,#123d75,#184b8f 62%,#5f936c);
  border-top:3px solid #72a67f;
}

/* تحسينات تصحيحية */
.form-note{
  background:#f0f7f2;
  border-color:#d4e6d8;
  color:#416a4b;
  font-weight:700;
}
.school-banner h2{
  color:#ffffff;
}
.school-banner > div{
  color:rgba(255,255,255,.86);
}

/* هوفر عناصر القائمة */
.nav-btn.active,.nav-btn:hover{
  background:#eaf1f8;
  color:#184b8f;
}

/* لون الروابط والحالات النشطة */
.executive-breadcrumb button{
  color:#557e61;
}
.switch input:checked+span{
  background:#72a67f;
}
.plan-card.featured{
  border-color:#72a67f;
}
.best-label{
  background:#72a67f;
}

/* تركيز الوصول */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline-color:rgba(114,166,127,.30);
}


/* ===== نقل إدارة المدرسة + ضبط اتجاه الأيقونات للعربية ===== */
.btn,.side-link,.brand-point,.card-actions button,.admin-actions button{direction:rtl}
.btn .action-icon,.side-link .side-icon{display:inline-grid;place-items:center;flex:0 0 auto;order:0}
.btn .action-label{order:1}
.manager-transfer-note{padding:13px 14px;border:1px solid #d6e4ef;border-radius:13px;background:#f5f9fd;color:#345a78;line-height:1.75;margin-bottom:14px}
.manager-transfer-current{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:#f8fafc;margin-bottom:14px}
.manager-transfer-current .avatar{flex:0 0 auto}
.manager-transfer-warning{padding:12px 14px;border:1px solid #efd7a3;border-radius:12px;background:#fff9ec;color:#7e5b16;font-size:13px;line-height:1.7}
.transfer-history-list{display:grid;gap:9px;margin-top:12px}.transfer-history-item{padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}

.transfer-management-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:16px;align-items:start}
.transfer-management-card{padding:22px}.transfer-management-side{padding:20px;position:sticky;top:96px}
.transfer-email-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.transfer-email-row .btn{min-width:150px}
.transfer-target-box{display:none;margin-top:13px;padding:14px;border:1px solid #cfe2d4;border-radius:14px;background:#f2f8f4}
.transfer-target-box.show{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.transfer-target-person{display:flex;align-items:center;gap:11px;min-width:0}.transfer-target-person>div:last-child{min-width:0}
.transfer-target-person b,.transfer-target-person .tiny{overflow-wrap:anywhere}
.transfer-security-list{display:grid;gap:10px;margin-top:14px}.transfer-security-item{display:flex;gap:9px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:#f7f9fb;border:1px solid var(--line)}
.transfer-security-item .security-icon{width:28px;height:28px;border-radius:9px;background:#eaf1f8;color:var(--navy);display:grid;place-items:center;flex:0 0 auto}
.transfer-confirm-email{direction:ltr;text-align:center;font-weight:900;color:var(--navy);background:#eef4f9;border:1px solid #d6e3ed;border-radius:12px;padding:11px;margin:12px 0;overflow-wrap:anywhere}
.transfer-danger-title{display:flex;align-items:center;gap:9px;color:#9b3e24}.transfer-danger-title .action-icon{width:34px;height:34px;border-radius:11px;background:#fff0eb;display:grid;place-items:center}
.transfer-entry-card{margin-top:16px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-color:#d8e4ed;background:linear-gradient(135deg,#f7fbff,#f5faf6)}
.transfer-entry-copy{display:flex;align-items:flex-start;gap:11px;min-width:0}.transfer-entry-copy .entry-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#184b8f,#72a67f);color:#fff;display:grid;place-items:center;flex:0 0 auto;font-size:19px}
.transfer-entry-copy h3{margin:0 0 4px;font-size:17px}.transfer-entry-copy p{margin:0;line-height:1.7}
@media(max-width:850px){.transfer-management-grid{grid-template-columns:1fr}.transfer-management-side{position:static}.transfer-email-row{grid-template-columns:1fr}.transfer-email-row .btn{width:100%}}


.previous-portfolio-section{margin-top:30px;padding-top:22px;border-top:1px dashed var(--line)}
.previous-portfolio-section .assignment-card{background:#fbfcfd}
.previous-portfolio-section .assignment-card:hover{border-color:#d9e3e9;box-shadow:var(--shadow)}

/* ===== Basmat Adaa 2.0 Professional UI ===== */
:root{--gold:#cda849;--gold-soft:#fff8e6;--surface:#f5f8fa;--success:#168663}
body{background:radial-gradient(circle at 90% 0,rgba(52,92,114,.09),transparent 28%),radial-gradient(circle at 5% 20%,rgba(205,168,73,.08),transparent 25%),#f4f7f9}
.app-header{box-shadow:0 8px 30px rgba(24,52,72,.07)}
.premium-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px;border-radius:26px;background:linear-gradient(135deg,#234f68,#345c72 58%,#247a70);color:#fff;box-shadow:0 24px 60px rgba(32,74,99,.22)}
.premium-hero:after{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.16);border-radius:50%;left:-90px;bottom:-180px}
.premium-hero h1{font-size:clamp(25px,3vw,38px);margin:6px 0}.premium-hero p{margin:0;color:#e8f1f5}.hero-eyebrow{display:inline-flex;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.13);font-size:12px;font-weight:900}
.hero-ring{--p:0;width:128px;height:128px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at center,#345c72 57%,transparent 58%),conic-gradient(var(--gold) calc(var(--p)*1%),rgba(255,255,255,.18) 0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hero-ring b{font-size:28px}.hero-ring span{display:block;font-size:11px;color:#edf3f6}
.smart-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}
.smart-kpi{border:1px solid var(--line);background:rgba(255,255,255,.94);border-radius:20px;padding:18px;text-align:right;color:var(--ink);box-shadow:0 12px 34px rgba(24,52,72,.08);transition:.2s}
.smart-kpi:hover{transform:translateY(-4px);border-color:#bdcfd8;box-shadow:0 18px 42px rgba(24,52,72,.14)}.smart-kpi small,.smart-kpi em{display:block}.smart-kpi small{font-weight:900;color:#5b7180}.smart-kpi b{display:block;font-size:30px;margin:7px 0}.smart-kpi em{font-style:normal;font-size:11px;color:var(--muted)}.smart-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#edf5f8,#f8f1df);display:grid;place-items:center;font-size:21px}
.dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px}.premium-panel{padding:20px}.chart-bars{display:grid;gap:14px}.chart-row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr 44px;align-items:center;gap:10px;font-size:13px}.chart-track{height:10px;background:#edf1f3;border-radius:999px;overflow:hidden}.chart-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#345c72,#2aa876,#cda849)}
.leader-list{display:grid;gap:9px}.leader-row{width:100%;border:1px solid #e4ecef;border-radius:14px;background:#fff;padding:11px;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;text-align:right}.leader-row:hover{background:#f6faf8}.leader-rank{font-size:22px}.leader-row small{display:block;color:var(--muted);margin-top:3px}.leader-row strong{color:#167556}
.activity-feed{display:grid;gap:10px}.activity-entry{display:flex;gap:11px;padding:11px;border-radius:14px;background:#f8fafb;border:1px solid #e7eef1}.activity-entry>span{width:36px;height:36px;border-radius:11px;background:#fff;display:grid;place-items:center}.activity-entry p{margin:3px 0;font-size:13px}.activity-entry small{color:var(--muted)}
.insight-list{display:grid;gap:10px}.insight-list>div{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;background:#f8fafb}.insight-list p{margin:0;line-height:1.7}
.motivation-banner{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1px solid #ead9aa;background:linear-gradient(135deg,#fffaf0,#fff);border-radius:18px}.motivation-banner>span{font-size:26px}.motivation-banner b{color:#765a16}.motivation-banner p{margin:4px 0 0;color:#756d5c;font-size:13px}
.optional-work-card{border:1.5px dashed var(--gold)!important;background:linear-gradient(145deg,#fff,#fffaf0)!important}.optional-work-card .assignment-icon{background:var(--gold-soft)}.optional-tag{background:#fff0c6;color:#80600d;margin-inline-start:5px}
.employee-card{position:relative;overflow:hidden}.employee-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(var(--navy),var(--green))}
@media(max-width:1000px){.smart-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:600px){.premium-hero{padding:22px;align-items:flex-start}.hero-ring{width:96px;height:96px}.hero-ring b{font-size:22px}.smart-kpis{grid-template-columns:1fr 1fr}.smart-kpi{padding:14px}.dashboard-grid{grid-template-columns:1fr}.chart-row{grid-template-columns:90px 1fr 40px}.personal-hero .hero-ring{display:none}}
@media print{body{background:#fff}.premium-hero{color:#111;background:#fff;border:1px solid #ddd;box-shadow:none}.smart-kpi,.premium-panel{box-shadow:none}.sidebar,.trial-banner,.retention-notice,.site-footer{display:none!important}}


/* ===== بطاقات الاشتراك: السعر الأساسي والسعر بعد الخصم ===== */
.pricing-intro{max-width:720px;margin:0 auto 34px;text-align:center}
.pricing-intro h2{margin:10px 0 8px;color:var(--navy);font-size:clamp(24px,3vw,34px);font-weight:950}
.pricing-intro p{margin:0;color:var(--muted);line-height:1.8}
.pricing-offer{display:inline-flex;padding:7px 14px;border:1px solid rgba(205,168,73,.38);border-radius:999px;background:#fff8e6;color:#80600d;font-size:12px;font-weight:900}
.professional-plans{gap:22px;align-items:stretch;max-width:1120px;margin:0 auto}
.pricing-card{position:relative;display:flex;flex-direction:column;min-height:545px;padding:28px 24px 22px;overflow:visible;border:1px solid #dfe8ee;border-radius:24px;background:radial-gradient(circle at 100% 0,rgba(24,75,143,.075),transparent 34%),#fff;box-shadow:0 18px 50px rgba(24,75,143,.09);transform:none}
.pricing-card:hover{transform:translateY(-7px);border-color:#bfd1e1;box-shadow:0 26px 65px rgba(24,75,143,.15)}
.pricing-card.popular-plan{z-index:2;border:2px solid #cda849;background:radial-gradient(circle at 100% 0,rgba(205,168,73,.18),transparent 36%),linear-gradient(180deg,#fffdf7,#fff);box-shadow:0 25px 65px rgba(205,168,73,.19);transform:translateY(-9px)}
.pricing-card.popular-plan:hover{transform:translateY(-16px)}
.pricing-card.annual-plan{border-color:rgba(114,166,127,.62);background:radial-gradient(circle at 100% 0,rgba(114,166,127,.16),transparent 36%),#fff}
.top-plan-badge{position:absolute;top:-15px;left:50%;min-width:150px;padding:8px 17px;transform:translateX(-50%);border-radius:999px;background:linear-gradient(135deg,#b88d23,#d3b252);color:#fff;box-shadow:0 10px 26px rgba(205,168,73,.30);font-size:12px;font-weight:950;text-align:center}
.top-plan-badge.annual-badge{background:linear-gradient(135deg,#527f5d,#72a67f);box-shadow:0 10px 26px rgba(114,166,127,.28)}
.plan-card-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.plan-card-head .plan-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:15px;background:linear-gradient(135deg,#edf4fa,#eff6f1);font-size:23px}
.plan-card-head h3{margin:0;color:var(--navy);font-size:21px;font-weight:950}
.plan-card-head p{margin:4px 0 0;color:var(--muted);font-size:13px}
.discount-chip{align-self:flex-start;padding:6px 11px;border-radius:9px;background:#eaf7ef;color:#527f5d;font-size:12px;font-weight:950}
.pricing-area{margin:22px 0 12px;padding:18px;border:1px solid #e5edf2;border-radius:18px;background:rgba(248,250,252,.86)}
.old-price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;color:#84939d;font-size:12px;font-weight:800}
.old-price-row del{color:#969fa5;font-size:18px;font-weight:900;text-decoration-color:#c84c54;text-decoration-thickness:2px}
.new-price-row{display:flex;align-items:flex-end;gap:9px;color:var(--navy)}
.new-price-row strong{font-size:54px;line-height:.95;font-weight:950;letter-spacing:-2px}
.new-price-row>div{display:flex;flex-direction:column;padding-bottom:3px}
.new-price-row span{color:var(--ink);font-size:16px;font-weight:900}
.new-price-row small{margin-top:2px;color:#5e8d68;font-size:11px;font-weight:900}
.saving-note{margin-bottom:18px;padding:9px 12px;border-radius:11px;background:#fff8e8;color:#80600d;font-size:12px;text-align:center}
.plan-features{display:grid;gap:11px;padding:0;margin:0 0 24px;list-style:none;text-align:right}
.plan-features li{position:relative;padding-right:27px;color:#4f6574;font-size:13px;line-height:1.65}
.plan-features li:before{content:"";background-image:url("assets/icons/check.svg");background-size:19px 19px;background-position:center;background-repeat:no-repeat;position:absolute;top:1px;right:0;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;background-color:#e9f3eb;color:#557e61;font-size:11px;font-weight:950}
.plan-subscribe-btn{width:100%;min-height:49px;margin-top:auto;border:0;border-radius:14px;background:linear-gradient(135deg,#184b8f,#2f6fb3);color:#fff;box-shadow:0 13px 28px rgba(24,75,143,.20);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;font-weight:950}
.plan-subscribe-btn:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(24,75,143,.28)}
.plan-subscribe-btn.popular-btn{background:linear-gradient(135deg,#b58a22,#d0ad4f);box-shadow:0 13px 28px rgba(205,168,73,.28)}
.plan-subscribe-btn.annual-btn{background:linear-gradient(135deg,#557f60,#72a67f);box-shadow:0 13px 28px rgba(114,166,127,.25)}
.secure-payment{margin-top:11px;color:#84939d;font-size:11px;text-align:center}
@media(max-width:760px){.professional-plans{grid-template-columns:1fr;max-width:520px}.pricing-card,.pricing-card.popular-plan{min-height:auto;transform:none}.pricing-card.popular-plan:hover,.pricing-card:hover{transform:translateY(-5px)}}


/* ===== Basmat Adaa Diamond UI Refresh ===== */
:root{
  --navy:#163d63;
  --blue:#2f80ed;
  --green:#24b47e;
  --green2:#75cfaa;
  --gold:#d6a542;
  --ink:#183749;
  --muted:#698090;
  --bg:#f4f8fc;
  --card:#ffffff;
  --line:#d9e5ef;
  --soft:#eef6ff;
  --danger:#c34848;
  --warn:#aa7417;
  --radius:20px;
  --shadow:0 18px 45px rgba(17,52,84,.10);
}
body{
  background:
    radial-gradient(circle at top right, rgba(47,128,237,.10), transparent 32%),
    radial-gradient(circle at bottom left, rgba(36,180,126,.08), transparent 28%),
    linear-gradient(180deg,#f9fcff 0%, #f2f7fb 100%);
}
.auth-brand:after,.school-banner:after{display:none!important}
.auth-wrap,.card,.modal,.table-wrap,.support-ticket-card,.notification-item{border-color:#e2ebf3}
.auth-brand{background:linear-gradient(145deg,#163d63 0%,#1d5a86 58%,#24b47e 100%)!important;padding:48px 42px!important}
.auth-logo-wrap{
  width:172px!important;height:172px!important;margin:0 auto 20px!important;border-radius:34px!important;
  background:rgba(255,255,255,.98)!important;border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 18px 40px rgba(8,31,51,.18), inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.auth-logo{width:122px!important;height:122px!important;margin:0 auto!important}
.auth-brand h1{font-size:42px!important;font-weight:950!important;letter-spacing:-.5px;margin:0 0 12px!important;text-align:center}
.auth-brand p{font-size:15px;line-height:1.95;color:#e7f4fb!important;text-align:center}
.brand-points{gap:14px!important}
.brand-point{padding:15px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.16)!important;background:rgba(255,255,255,.10)!important;backdrop-filter:blur(8px)}
.brand-point strong{display:block;font-size:15px}
.auth-panel{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important}
.tabs{background:#edf4fa!important;padding:6px!important;border-radius:15px!important}
.tab-btn{border-radius:12px!important}
.tab-btn.active{box-shadow:0 10px 24px rgba(28,75,112,.11)!important}
.btn{border-radius:14px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(14,43,69,.08);transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(14,43,69,.12)}
.btn.primary{background:linear-gradient(135deg,#18486e,#2f80ed)!important}
.btn.green{background:linear-gradient(135deg,#1d9f76,#24b47e)!important}
.btn.soft{background:#f4f9fd!important;color:#173e5a!important;border:1px solid #d8e6f1!important}
.input,.select,.textarea{border-color:#d6e2eb!important;background:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.input:focus,.select:focus,.textarea:focus{border-color:#2f80ed!important;box-shadow:0 0 0 4px rgba(47,128,237,.10)!important}
.app-header{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(215,227,239,.88)!important;
  box-shadow:0 6px 26px rgba(11,46,72,.06)!important;
}
.header-row{height:82px!important}
.header-brand-area{gap:14px!important}
.menu-btn,.notification-btn,.icon-btn{
  width:46px;height:46px;border-radius:16px!important;border:1px solid #dfe9f1!important;
  background:#fff!important;color:#286fae!important;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(17,52,84,.08)!important;
}
.menu-btn:hover,.notification-btn:hover,.icon-btn:hover{background:#f4f9fd!important}
.brand-mini{gap:14px!important;min-width:auto!important}
.header-logo{
  width:60px!important;height:60px!important;padding:6px;border-radius:18px!important;background:#fff;
  border:1px solid #e7eff6;box-shadow:0 8px 18px rgba(17,52,84,.08)!important;
}
.header-brand-text{gap:4px!important}
#headerSchool{display:block;font-size:17px!important;font-weight:950!important;color:#173e5a!important;line-height:1.3}
#headerRole{font-size:12px;color:#6d8594!important}

.subscription-countdown{
  display:flex!important;
  align-items:center;
  gap:8px;
  min-height:34px;
  max-width:fit-content;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#eef7ff,#eefaf4)!important;
  border:1px solid #d6e7f4!important;
  color:#8F200A!important;
  font-size:12px;
  font-weight:700;
  box-shadow:none!important
}
.user-pill{padding-right:14px!important;border-right:1px solid #e1eaf1!important}
.avatar{
  background:linear-gradient(135deg,#eaf4ff,#e6f7ef)!important;color:#1a875d!important;
  border:1px solid #d9e8f0!important;box-shadow:0 8px 18px rgba(17,52,84,.06)
}
.sidebar-head{background:linear-gradient(145deg,#f9fcff,#eef7f3)!important}
.sidebar{box-shadow:-20px 0 65px rgba(16,48,65,.18)!important}
.sidebar-user{background:linear-gradient(135deg,#163d63,#246891 68%,#24b47e)!important;border:1px solid rgba(255,255,255,.08)}
.side-link{border:1px solid transparent}
.side-link:hover,.side-link.active{background:#f1f8ff!important;color:#195481!important;border-color:#dbe9f4!important}
.side-link .side-icon,.kpi-icon,.assignment-icon,.file-icon,.smart-icon,.trial-banner__icon,.retention-notice__icon,.footer-icon,.logo-mark,.action-icon{
  position:relative;display:inline-flex!important;align-items:center;justify-content:center;overflow:hidden
}
.side-link .side-icon{
  width:36px!important;height:36px!important;border-radius:12px!important;
  background:linear-gradient(135deg,#edf6ff,#e8f8f1)!important;color:#2c76ba!important;
  border:1px solid #d7e6f0
}
.side-link.active .side-icon{background:linear-gradient(135deg,#dff1ff,#dff5ea)!important;color:#168565!important}
.page-head{padding:6px 0 0!important}
.page-head h1{font-size:29px!important;letter-spacing:-.5px}
.section{margin-top:24px!important}
.section-title{padding-bottom:10px;border-bottom:1px solid #e5edf4!important;margin-bottom:14px!important}
.section-title h2{font-size:21px!important}
.school-banner{
  background:linear-gradient(135deg,#163d63,#23628f 62%,#24b47e)!important;
  padding:24px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 20px 42px rgba(22,61,99,.16)
}
.kpi,.employee-card,.assignment-card,.work-item,.note-box,.permission-card,.admin-stat,.plan-card,.support-form-card,.support-ticket-card,.public-share-item,.public-share-work,.executive-staff-card{
  border:1px solid #e4edf5!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
  box-shadow:0 12px 34px rgba(14,43,69,.07)!important;
}
.kpi:hover,.employee-card:hover,.assignment-card:hover,.work-item:hover,.public-share-item:hover{transform:translateY(-2px)}
.kpi-icon{background:linear-gradient(135deg,#edf6ff,#e6f7f0)!important;color:#1f6eb1!important;border:1px solid #d9e9f3}
.assignment-icon{background:linear-gradient(135deg,#edf6ff,#eefbf5)!important;color:#1a8b68!important;border:1px solid #d9e9f3}
.file-icon{background:linear-gradient(135deg,#ecf5ff,#f2f8ff)!important;color:#2c78c5!important;border:1px solid #d9e8f2}
.smart-kpi{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;border:1px solid #e5edf5!important;box-shadow:0 10px 24px rgba(14,43,69,.07)!important}
.smart-icon{background:linear-gradient(135deg,#edf6ff,#e8f8f1)!important;color:#1974b6!important;border:1px solid #dae7f2;border-radius:13px;padding:8px}
.table th{background:#f7fbff!important;color:#567083!important}
.notification-item.unread,.support-ticket-card.unread{background:#f1faff!important;border-color:#c8def5!important}
.notification-btn{font-size:0!important}
.notification-badge{box-shadow:0 6px 15px rgba(217,71,71,.25)}
.trial-banner{
  background:linear-gradient(135deg,#ffffff,#f7fbff)!important;border:1px solid #d8e8f8!important;
  box-shadow:0 10px 28px rgba(35,89,125,.08)!important
}
.trial-banner__icon{background:linear-gradient(135deg,#e8f3fc,#edf9f2)!important;color:#1f6fae!important;border:1px solid #d8e8f8}
.trial-countdown{background:#fff!important}
.retention-notice{background:linear-gradient(135deg,#ffffff,#fbfefe)!important;border-color:#dfeaf1!important;box-shadow:0 10px 24px rgba(14,43,69,.05)}
.retention-notice__icon{background:linear-gradient(135deg,#edf6ff,#e8f8f1)!important;color:#1d79be!important;border-radius:12px;padding:7px;border:1px solid #d8e7f1}
.site-footer{background:#103550!important;color:#ebf4fa!important}
.footer-inner{border-top:1px solid rgba(255,255,255,.08)!important}
.footer-links a{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important}
.footer-links a:hover{background:rgba(255,255,255,.11)!important}
.footer-icon{
  width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.12)!important;color:#ffffff!important;
  border:1px solid rgba(255,255,255,.10)
}
.plan-card.featured{border-color:#24b47e!important;box-shadow:0 18px 42px rgba(36,180,126,.14)!important}
.plan-card-head .plan-icon{width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#edf4fa,#eff6f1)!important;color:#1b76ba!important;border:1px solid #d7e8f0}
.subscription-blocked{background:linear-gradient(180deg,#fff,#fbfdff)}
.subscription-blocked .lock{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#edf6ff,#e8f8f1);color:#2a70b3;margin-inline:auto;margin-bottom:10px}
.public-share-header{box-shadow:0 8px 26px rgba(11,46,72,.06)}
.public-share-brand img{width:58px;height:58px;padding:6px;background:#fff;border:1px solid #e4edf5;border-radius:18px;box-shadow:0 8px 18px rgba(17,52,84,.08)}
.logo-mark{width:78px!important;height:78px!important;border-radius:22px!important;background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08))!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important}
.bm-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;line-height:1;flex:0 0 auto}
.bm-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.notification-btn .bm-icon{width:21px;height:21px}
.logo-mark .bm-icon,.kpi-icon .bm-icon,.assignment-icon .bm-icon,.trial-banner__icon .bm-icon,.retention-notice__icon .bm-icon,.footer-icon .bm-icon,.side-icon .bm-icon,.file-icon .bm-icon,.smart-icon .bm-icon,.plan-icon .bm-icon{width:20px;height:20px}
.brand-point b,.brand-point span:first-child{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:11px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.16);font-size:0;flex:0 0 auto}
.profile-hero{background:linear-gradient(135deg,#163d63,#23628f 62%,#24b47e)!important;box-shadow:0 18px 42px rgba(22,61,99,.16)}
.form-note{background:#f3f9ff!important;border:1px solid #d8e8f8!important;color:#335a76!important}
.action-icon,.footer-icon,.side-icon,.kpi-icon,.assignment-icon,.file-icon,.trial-banner__icon,.retention-notice__icon,.smart-icon,.plan-icon,.logo-mark{font-size:0!important}
#publicShareBack .bm-icon{margin-left:6px}
@media(max-width:760px){
  .auth-brand{padding:36px 24px!important}
  .auth-logo-wrap{width:150px!important;height:150px!important;border-radius:30px!important}
  .auth-logo{width:108px!important;height:108px!important}
  .header-row{height:76px!important}
  .header-logo{width:54px!important;height:54px!important}
  #headerSchool{font-size:15px!important}
  .user-pill span{display:none!important}
}


/* ===== Basmat Adaa Legendary Manager Analytics + Replaceable Icon Pack ===== */
.bm-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;line-height:1;flex:0 0 auto}
.bm-icon img{display:block;width:100%;height:100%;object-fit:contain}
.side-icon .bm-icon,.smart-icon .bm-icon,.file-icon .bm-icon,.assignment-icon .bm-icon,.footer-icon .bm-icon,.activity-entry>span .bm-icon,.insight-list>div>span .bm-icon{width:100%;height:100%}

/* الهيدر الاحترافي المعتمد */
.app-header{
  position:sticky;top:0;z-index:50;
  background:
    radial-gradient(circle at 18% -40%,rgba(47,128,237,.32),transparent 42%),
    linear-gradient(118deg,#082d4c 0%,#0b456d 54%,#09616c 100%)!important;
  border:0!important;box-shadow:0 15px 38px rgba(5,37,63,.23)!important;color:#fff;
}
.app-header:after{content:"";position:absolute;right:0;left:0;bottom:-4px;height:4px;background:linear-gradient(90deg,#d7a63f 0%,#f1ce74 28%,#2f80ed 70%,#24b47e 100%);box-shadow:0 3px 12px rgba(47,128,237,.24)}
.app-header .header-row{height:88px!important}
.app-header #headerSchool,
.app-header #headerUser{color:#f1ce74!important}
.app-header #headerRole,.app-header .muted{color:#000000!important}
.app-header .header-logo{background:rgba(255,255,255,.98)!important;border:1px solid rgba(255,255,255,.45)!important;box-shadow:0 12px 28px rgba(0,0,0,.18)!important}
.app-header .menu-btn,.app-header .notification-btn{
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.08))!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:0 10px 24px rgba(0,0,0,.14)!important;
}
.app-header .menu-btn:hover,.app-header .notification-btn:hover{background:linear-gradient(145deg,#169caa,#0e7c96)!important}
.app-header .user-pill{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-right-color:rgba(255,255,255,.18)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.12)!important;
  border-radius:14px!important;
}
.app-header .avatar{background:linear-gradient(135deg,#1aa7b3,#2f80ed)!important;color:#fff!important;border-color:rgba(255,255,255,.28)!important}
.app-header .subscription-countdown{background:rgba(255,255,255,.11)!important;border-color:rgba(255,255,255,.18)!important;color:#f5d47c!important;backdrop-filter:blur(8px)}

/* شبكة الرسوم العمودية */
.analytics-section{margin-top:26px}
.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.analytics-card{position:relative;overflow:hidden;padding:22px;border:1px solid #dce8f2;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#f9fcff 100%);box-shadow:0 18px 45px rgba(17,52,84,.09)}
.analytics-card:before{content:"";position:absolute;right:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#d6a542,#2f80ed,#24b47e)}
.analytics-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.analytics-title{display:flex;gap:11px;align-items:flex-start;min-width:0}.analytics-title>.bm-icon{width:42px;height:42px}.analytics-title h3{margin:1px 0 4px;font-size:18px;color:#173f59}.analytics-title p{margin:0;color:#728696;font-size:12px;line-height:1.6}
.analytics-total{display:inline-flex;flex-direction:column;align-items:center;min-width:62px;padding:8px 10px;border:1px solid #d8e6f1;border-radius:14px;background:#f3f8fd;color:#1e5c89}.analytics-total b{font-size:20px}.analytics-total small{font-size:10px;color:#7890a1}
.vchart-scroll{overflow-x:auto;padding:5px 1px 4px;scrollbar-width:thin;scrollbar-color:#bfd1df transparent}
.vchart-bars{height:255px;display:grid;grid-template-columns:repeat(var(--bars),minmax(62px,1fr));gap:10px;align-items:end;min-width:calc(var(--bars)*72px);padding:27px 8px 0;border-bottom:1px solid #dfe9f1;background:repeating-linear-gradient(to top,transparent 0,transparent 49px,rgba(34,91,130,.065) 50px)}
.vbar-item{height:100%;display:grid;grid-template-rows:1fr 48px;align-items:end;text-align:center;min-width:0}
.vbar-column{height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}
.vbar-fill{position:relative;width:min(40px,72%);height:var(--height);min-height:5px;border-radius:13px 13px 6px 6px;background:linear-gradient(180deg,#2f80ed,#2466a5);box-shadow:0 10px 22px rgba(47,128,237,.18);transition:height .45s ease,transform .2s}
.vbar-item:nth-child(4n+2) .vbar-fill{background:linear-gradient(180deg,#24b47e,#168663);box-shadow:0 10px 22px rgba(36,180,126,.17)}
.vbar-item:nth-child(4n+3) .vbar-fill{background:linear-gradient(180deg,#d9ad45,#ba7c16);box-shadow:0 10px 22px rgba(214,165,66,.18)}
.vbar-item:nth-child(4n+4) .vbar-fill{background:linear-gradient(180deg,#7b70d8,#4e58a9);box-shadow:0 10px 22px rgba(93,88,180,.17)}
.vbar-fill:hover{transform:translateY(-3px)}
.vbar-value{position:absolute;top:-25px;right:50%;transform:translateX(50%);font-size:12px;font-weight:950;color:#173f59;white-space:nowrap}
.vbar-label{align-self:start;padding-top:8px;font-size:11px;font-weight:800;color:#637b8c;line-height:1.35;overflow:hidden;display:-webkit-box;line-clamp:2; -webkit-line-clamp:2;-webkit-box-orient:vertical}
.analytics-empty{height:220px;display:grid;place-items:center;color:#7a8f9e;text-align:center}
.top-item-callout{display:flex;align-items:center;gap:11px;margin-top:14px;padding:12px 14px;border:1px solid #ecd9a3;border-radius:16px;background:linear-gradient(135deg,#fffaf0,#fff);color:#6c551c}.top-item-callout>.bm-icon{width:39px;height:39px}.top-item-callout b{display:block;color:#765816}.top-item-callout small{color:#8d7d58}

/* لوحة التميز بلا رموز بدائية */
.leader-row{grid-template-columns:48px 1fr auto!important;padding:13px!important;border-radius:17px!important;transition:.2s;box-shadow:0 7px 18px rgba(18,53,83,.045)}
.leader-row:hover{transform:translateY(-2px);border-color:#c9dbe7;background:linear-gradient(135deg,#fff,#f5faff)!important}
.leader-rank{width:42px;height:42px;display:grid;place-items:center;font-size:0!important}.leader-rank .bm-icon{width:42px;height:42px}
.insight-list>div>span,.activity-entry>span,.motivation-banner>span{font-size:0!important}.insight-list>div>span .bm-icon,.activity-entry>span .bm-icon,.motivation-banner>span .bm-icon{width:34px;height:34px}

/* بطاقات الطاقم التفاعلية */
.employee-grid{gap:18px!important}
.staff-card{position:relative;overflow:hidden;padding:20px!important;border:1px solid #dfe9f2!important;border-radius:23px!important;background:linear-gradient(145deg,#fff 0%,#f8fcff 70%,#f2faf6 100%)!important;box-shadow:0 17px 42px rgba(18,53,83,.09)!important;transition:transform .22s,box-shadow .22s,border-color .22s}
.staff-card:before{content:""!important;position:absolute!important;right:0!important;left:auto!important;top:0!important;width:5px!important;height:100%!important;background:linear-gradient(180deg,#d6a542,#2f80ed,#24b47e)!important}
.staff-card:hover{transform:translateY(-5px)!important;box-shadow:0 25px 58px rgba(18,53,83,.14)!important;border-color:#c7dbe9!important}
.staff-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px}
.staff-avatar-wrap{position:relative}.staff-avatar{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#173f63,#2f80ed 60%,#24b47e);color:#fff;font-size:17px;font-weight:950;box-shadow:0 12px 24px rgba(31,100,154,.20)}
.staff-live-dot{position:absolute;left:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:#24b47e;border:3px solid #fff;box-shadow:0 3px 8px rgba(36,180,126,.25)}
.staff-card-copy{min-width:0}.staff-card-copy h3{margin:0 0 5px;font-size:17px;color:#173f59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-card-copy p{margin:0;color:#738796;font-size:12px;line-height:1.5}
.staff-reviewer-badge{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:4px 8px;border-radius:999px;background:#e8f8f1;color:#167a59;border:1px solid #ccecdf;font-size:10px;font-weight:900}.staff-reviewer-badge .bm-icon{width:15px;height:15px}
.staff-progress-ring{--progress:0;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#fff 57%,transparent 59%),conic-gradient(#24b47e calc(var(--progress)*1%),#e4edf3 0);box-shadow:inset 0 0 0 1px #e2ebf2}.staff-progress-ring b{display:block;font-size:17px;color:#173f59;line-height:1}.staff-progress-ring small{display:block;font-size:9px;color:#7b8e9c;margin-top:3px}
.staff-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0 13px}.staff-stat{display:flex;align-items:center;gap:7px;padding:9px;border:1px solid #e1eaf2;border-radius:14px;background:rgba(255,255,255,.78)}.staff-stat>.bm-icon{width:27px;height:27px}.staff-stat b{display:block;color:#173f59;font-size:15px;line-height:1}.staff-stat small{display:block;color:#8092a0;font-size:9px;margin-top:3px}
.staff-last-activity{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:13px;background:#f3f8fc;color:#687f8e;font-size:11px}.staff-last-activity>.bm-icon{width:22px;height:22px}.staff-card .card-actions{margin-top:14px}.staff-card .card-actions .btn{flex:1;min-width:125px}.staff-card .card-actions .bm-icon{width:18px;height:18px}

@media(max-width:1050px){.analytics-grid{grid-template-columns:1fr}}
@media(max-width:700px){
 .app-header .header-row{height:78px!important}.analytics-card{padding:17px}.vchart-bars{height:235px}.staff-card-head{grid-template-columns:auto minmax(0,1fr)}.staff-progress-ring{grid-column:1/-1;justify-self:stretch;width:100%;height:46px;border-radius:14px;background:linear-gradient(90deg,#e4edf3,#e4edf3);position:relative;overflow:hidden}.staff-progress-ring:before{content:"";position:absolute;right:0;top:0;bottom:0;width:calc(var(--progress)*1%);background:linear-gradient(90deg,#2f80ed,#24b47e)}.staff-progress-ring>span{position:relative;z-index:1;display:flex;gap:7px;align-items:center;color:#173f59}.staff-progress-ring b,.staff-progress-ring small{display:inline}.staff-stats{grid-template-columns:1fr 1fr}.staff-stat:last-child{grid-column:1/-1}}


#headerUser{
  color:#46474D !important;
  font-size:15px;
  font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
}

#headerRole{
  color:#46474D !important;
  font-size:12px;
  font-weight:700;
}

/* كبسولة العد التنازلي */
.subscription-countdown{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:42px;
  padding:8px 16px !important;
  margin-top:6px;

  border-radius:999px !important;

  background:linear-gradient(
    135deg,
    rgba(20,92,142,.82),
    rgba(12,117,139,.70)
  ) !important;

  border:1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 20px rgba(0,30,60,.18) !important;

  color:#ffffff !important;
  font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;
}

/* عبارة: متبقي على انتهاء الاشتراك */
.subscription-countdown span{
  display:block !important;
  color:#dcecf7 !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.4;
  white-space:nowrap;
}

/* عدد الأيام والساعات */
.subscription-countdown strong{
  display:inline-flex;
  align-items:center;
  color:#f6c85f !important;
  font-size:14px !important;
  font-weight:900 !important;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.20);
}

/* تحسين وضوح النصوص الثانوية داخل الموقع */
.card .muted,
.card .tiny,
.table .muted,
.table .tiny,
.assignment-card .muted,
.assignment-card .tiny,
.employee-card .muted,
.employee-card .tiny{
  color:#526979 !important;
  opacity:1 !important;
  font-weight:700 !important;
  line-height:1.65;
}

/* تكبير النصوص الصغيرة قليلًا */
.tiny{
  font-size:13px !important;
}

/* النص أسفل أرقام بطاقات الملخص مثل: 0 ملفات مكتملة */
.smart-kpi em{
  display:block;
  margin-top:3px;

  color:#496274 !important;
  font-size:13px !important;
  font-weight:800 !important;
  font-style:normal;
  line-height:1.5;
  opacity:1 !important;
}

/* عناوين بطاقات الملخص */
.smart-kpi small{
  color:#284f68 !important;
  font-size:14px !important;
  font-weight:900 !important;
}

/* النصوص الصغيرة في لوحة التميز والنشاط */
.leader-row small,
.activity-entry small{
  color:#526979 !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  opacity:1 !important;
}



/* ===== إصلاحات يوليو 2026: وضوح الواجهة ورفع الشواهد ===== */
.brand-points{
  display:grid!important;
  gap:14px!important;
  margin-top:30px!important;
}
.brand-point{
  position:relative;
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center!important;
  gap:14px!important;
  min-height:84px;
  padding:16px 17px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.085))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 28px rgba(3,31,52,.12)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  overflow:hidden;
}
.brand-point::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:4px;
  background:linear-gradient(180deg,#f3c85f,#44b7e9,#39c897);
  opacity:.95;
}
.brand-point>b,.brand-point>span:first-child{
  width:44px!important;
  height:44px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.12))!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(0,24,44,.15)!important;
}
.brand-point>div{min-width:0}
.brand-point strong,.brand-point>div>b{
  display:block!important;
  margin:0 0 5px!important;
  color:#fff!important;
  font-size:15.5px!important;
  font-weight:950!important;
  line-height:1.45!important;
  text-shadow:0 1px 3px rgba(0,21,39,.22);
}
.brand-point .tiny,.brand-point small{
  display:block!important;
  margin:0!important;
  color:#eaf6ff!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.75!important;
  opacity:1!important;
  text-shadow:0 1px 2px rgba(0,24,44,.18);
}

/* تحسين وضوح النصوص الثانوية في البطاقات والجداول */
.card .muted,.card .tiny,.table .muted,.table .tiny,
.assignment-card .muted,.assignment-card .tiny,
.employee-card .muted,.employee-card .tiny,
.performance-share-card .muted,.public-share-main .muted{
  color:#526b7d!important;
  opacity:1!important;
  font-weight:700!important;
  line-height:1.7!important;
}
.tiny{font-size:13px!important}

/* نافذة إضافة الشاهد */
.dropzone{
  position:relative;
  padding:26px 20px!important;
  border:2px dashed #9fc7df!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f7fbff,#f2fbf7)!important;
  color:#274f69!important;
}
.dropzone:hover{border-color:#2f80ed!important;background:linear-gradient(135deg,#eef7ff,#edf9f3)!important}
.dropzone input[type="file"]{max-width:100%;color:#274f69;font-weight:800}
.modal .label{color:#23465d!important;font-size:14px!important}
.modal .textarea{min-height:118px}
.performance-share-card{border-top:4px solid transparent!important;border-image:linear-gradient(90deg,#d6a542,#2f80ed,#24b47e) 1!important}

@media(max-width:600px){
  .brand-point{grid-template-columns:40px minmax(0,1fr);min-height:78px;padding:14px!important;gap:12px!important}
  .brand-point>b,.brand-point>span:first-child{width:40px!important;height:40px!important}
  .brand-point strong,.brand-point>div>b{font-size:14.5px!important}
  .brand-point .tiny,.brand-point small{font-size:12.5px!important}
}


/* ===== تحسينات الواجهة المعتمدة | 2026-08-10 ===== */
:root{
  --ink:#142f42;
  --muted:#526a78;
  --bg:#f5f8fa;
  --line:#d6e2e8;
  --shadow:0 12px 34px rgba(16,47,68,.085);
}
body{color:var(--ink);background:linear-gradient(180deg,#f7fafc 0%,#f3f7f9 100%)}
.muted,.tiny.muted,.field-help{color:#5b7180}
.page-head h1,.section-title h2,.employee-name,.assignment-card h3{color:#173f59}
.card{border-color:#d7e3e9;box-shadow:0 12px 32px rgba(17,52,73,.075)}
.table th{color:#425f71;background:#f2f7f9}
.table td{color:#203d50}
.bm-icon{width:20px;height:20px;color:inherit}
.bm-icon svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-link .side-icon{
  width:34px;height:34px;border-radius:10px;
  background:#f3f7f9!important;color:#315e78!important;
  border:1px solid #e0e9ee;
}
.side-link:hover .side-icon{background:#eaf3f8!important;color:#1e658f!important}
.side-link.active .side-icon{
  background:#e7f5ef!important;color:#168565!important;border-color:#cde9dd!important;
}
.action-icon,.kpi-icon,.assignment-icon,.file-icon,.smart-icon,.trial-banner__icon,.retention-notice__icon,.footer-icon,.logo-mark{color:#245f80}
.btn.primary .bm-icon,.btn.green .bm-icon,.btn.danger .bm-icon{color:#fff}
.app-header #headerSchool{color:#f4d98a!important;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.app-header #headerUser{
  color:#ffffff!important;
  font-size:14px!important;
  font-weight:900!important;
  text-shadow:0 1px 2px rgba(0,0,0,.22)!important;
}
.app-header #headerRole{
  color:#cfe6f1!important;
  font-size:11.5px!important;
  font-weight:700!important;
  text-shadow:none!important;
}
.app-header .header-brand-text>span,.app-header .brand-mini small{color:#d2e5ee!important}
.app-header .user-pill{
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(10px);
}
.app-header .avatar{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;
}
.personal-hero h1{
  font-size:clamp(20px,2.1vw,29px)!important;
  line-height:1.35;
  margin:5px 0!important;
}
.personal-hero .hero-eyebrow{font-size:11px;padding:5px 9px}
.personal-hero p{font-size:13px;color:#edf5f8!important}
.permission-card{overflow:hidden}
.permission-save-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:16px -18px -18px;padding:14px 18px;
  border-top:1px solid #dfe8ed;background:#f7fafc;
}
.permission-save-row .btn{min-width:145px}
.permission-dirty{color:#936512!important;font-weight:800}
.permission-saved{color:#177556!important;font-weight:800}
@media(max-width:700px){
  .permission-save-row{align-items:stretch;flex-direction:column}
  .permission-save-row .btn{width:100%}
}

/* ===== كروت عناصر الأداء والشواهد الفاخرة | 2026-08-10 ===== */
.assignment-grid{
  gap:18px!important;
  align-items:stretch;
}
.assignment-card{
  --card-accent:#2f80ed;
  position:relative;
  isolation:isolate;
  min-height:248px;
  padding:22px 20px 18px!important;
  border:1px solid #dbe6ec!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 100% 0,rgba(47,128,237,.07),transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfdfe 100%)!important;
  box-shadow:0 12px 34px rgba(17,52,73,.075)!important;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.assignment-card:nth-child(3n+2){--card-accent:#24a879}
.assignment-card:nth-child(3n){--card-accent:#d6a542}
.assignment-card:hover{
  transform:translateY(-5px)!important;
  border-color:color-mix(in srgb,var(--card-accent) 35%,#dbe6ec)!important;
  box-shadow:0 20px 48px rgba(14,49,71,.14)!important;
}
.assignment-card-accent{
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--card-accent),color-mix(in srgb,var(--card-accent) 35%,#fff));
  z-index:2;
}
.assignment-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:17px;
}
.assignment-card .assignment-icon{
  width:56px!important;
  height:56px!important;
  border-radius:17px!important;
  color:var(--card-accent)!important;
  background:color-mix(in srgb,var(--card-accent) 8%,#fff)!important;
  border:1px solid color-mix(in srgb,var(--card-accent) 18%,#e8eef2)!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--card-accent) 10%,transparent)!important;
}
.assignment-card .assignment-icon .bm-icon{width:26px!important;height:26px!important}
.assignment-card .count{
  position:static!important;
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  background:#f2f7fa!important;
  border:1px solid #dce8ee!important;
  color:#345d72!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.assignment-card.has-evidence .count{
  background:#eaf8f2!important;
  border-color:#cbeade!important;
  color:#177556!important;
}
.assignment-card-body{flex:1;min-width:0}
.assignment-card h3{
  margin:0 0 12px!important;
  font-size:17px!important;
  line-height:1.65!important;
  color:#163d56!important;
  letter-spacing:-.1px;
}
.assignment-summary{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:30px;
}
.assignment-evidence-state,.assignment-note-count{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:29px;
  padding:5px 9px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  border:1px solid transparent;
}
.assignment-evidence-state .bm-icon,.assignment-note-count .bm-icon{width:15px!important;height:15px!important}
.assignment-evidence-state.ready{background:#eaf8f2;color:#177556;border-color:#ceeadd}
.assignment-evidence-state.empty{background:#f2f6f8;color:#667e8c;border-color:#e0e8ec}
.assignment-note-count{background:#eef5fb;color:#316f98;border-color:#d8e8f3}
.assignment-optional-note{
  margin-top:10px;
  padding:8px 10px;
  border-radius:11px;
  background:#fff8e8;
  color:#8b681a;
  border:1px solid #f1dfad;
  font-size:11px;
  line-height:1.6;
}
.assignment-card-footer{
  margin:18px -20px -18px;
  padding:13px 20px;
  border-top:1px solid #e6edf1;
  background:linear-gradient(180deg,rgba(247,250,252,.55),#f7fafc);
}
.assignment-open-btn{
  width:100%;
  justify-content:space-between!important;
  min-height:40px;
  border:1px solid #dbe7ed!important;
  background:#fff!important;
  color:#234f69!important;
  box-shadow:0 5px 14px rgba(23,63,89,.055)!important;
}
.assignment-open-btn:hover{
  border-color:color-mix(in srgb,var(--card-accent) 30%,#dbe7ed)!important;
  color:var(--card-accent)!important;
  background:color-mix(in srgb,var(--card-accent) 3%,#fff)!important;
}
.assignment-open-btn .bm-icon{width:17px!important;height:17px!important;transform:rotate(180deg)}

/* الشواهد: كل شاهد بطاقة مستقلة وواضحة */
.work-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px!important;
  align-items:stretch;
}
.evidence-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:190px;
  padding:18px!important;
  border:1px solid #dbe6ec!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fff 0%,#fbfdfe 100%)!important;
  box-shadow:0 10px 28px rgba(17,52,73,.07)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:space-between!important;
  gap:16px!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
.evidence-card:hover{
  transform:translateY(-3px)!important;
  border-color:#c7dbe5!important;
  box-shadow:0 17px 38px rgba(17,52,73,.11)!important;
}
.evidence-card-accent{
  position:absolute;
  right:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,#2f80ed,#55a8df);
}
.evidence-card.is-reviewed .evidence-card-accent{background:linear-gradient(180deg,#24a879,#55c49a)}
.evidence-main{align-items:flex-start!important;gap:13px!important;min-width:0}
.evidence-file-icon{
  width:48px!important;height:48px!important;
  border-radius:15px!important;
  background:#eef6fb!important;
  border:1px solid #dae9f2!important;
  color:#2f78a6!important;
  flex:0 0 auto!important;
}
.evidence-card.is-reviewed .evidence-file-icon{
  background:#edf9f4!important;
  border-color:#d4eee2!important;
  color:#1c8665!important;
}
.evidence-file-icon .bm-icon{width:22px!important;height:22px!important}
.evidence-content{min-width:0;flex:1}
.evidence-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:9px;flex-wrap:wrap}
.evidence-title{font-size:15px;line-height:1.6;color:#173f59;overflow-wrap:anywhere}
.evidence-status{
  display:inline-flex;align-items:center;gap:5px;
  border-radius:999px;padding:4px 8px;
  font-size:10.5px;font-weight:900;white-space:nowrap;
}
.evidence-status .bm-icon{width:13px!important;height:13px!important}
.evidence-status.reviewed{background:#eaf8f2;color:#177556;border:1px solid #cde9dc}
.evidence-status.pending{background:#fff6e5;color:#8e6412;border:1px solid #f0dcad}
.evidence-meta{
  display:flex;flex-wrap:wrap;gap:7px 12px;
  margin-top:9px;color:#667d8a;font-size:11px;font-weight:700;
}
.evidence-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow-wrap:anywhere}
.evidence-meta .bm-icon{width:14px!important;height:14px!important;color:#63879b}
.evidence-description{
  margin-top:11px;padding:10px 11px;
  border-radius:11px;background:#f6f9fb;
  border:1px solid #e5edf1;color:#405d6d;
  font-size:12px;line-height:1.75;overflow-wrap:anywhere;
}
.evidence-actions{
  margin-top:auto!important;
  padding-top:13px;
  border-top:1px solid #e8eef2;
}
.evidence-actions .btn{min-height:37px;padding-inline:12px!important;font-size:12px!important}
.evidence-actions .btn.soft{background:#f2f7fa!important;border-color:#dce8ee!important}
.evidence-actions .bm-icon{width:16px!important;height:16px!important}

/* نفس الروح للعرض العام */
.public-share-item{
  border-radius:20px!important;
  border:1px solid #dbe6ec!important;
  box-shadow:0 10px 28px rgba(17,52,73,.07)!important;
}
.public-share-work{
  border-radius:18px!important;
  border:1px solid #dbe6ec!important;
  box-shadow:0 8px 24px rgba(17,52,73,.065)!important;
}

@media(max-width:1050px){
  .work-list{grid-template-columns:1fr}
}
@media(max-width:700px){
  .assignment-grid{gap:14px!important}
  .assignment-card{min-height:224px;padding:18px 16px 16px!important;border-radius:19px!important}
  .assignment-card-footer{margin:16px -16px -16px;padding:12px 16px}
  .assignment-card .assignment-icon{width:50px!important;height:50px!important}
  .assignment-card h3{font-size:15.5px!important}
  .work-list{grid-template-columns:1fr;gap:13px!important}
  .evidence-card{min-height:0;padding:15px!important;border-radius:17px!important}
  .evidence-title-row{display:block}
  .evidence-status{margin-top:7px}
  .evidence-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .evidence-actions .btn{width:100%;justify-content:center!important}
  .evidence-actions .btn:only-child{grid-column:1/-1}
}

/* Independent school join requests - resilient empty/error state */
.school-requests-state{padding:34px 22px!important;text-align:center;border:1px solid #dce8ee!important;background:linear-gradient(180deg,#fff 0%,#f9fcfd 100%)!important}
.school-requests-state h3{margin:10px 0 6px;color:#153b54}
.school-requests-state p{max-width:620px;margin:0 auto 16px;line-height:1.8}
.school-requests-state-icon{width:50px;height:50px;margin:0 auto;border-radius:16px;display:grid;place-items:center;background:#eaf6f1;color:#147457;font-size:24px;font-weight:900;border:1px solid #cfe9df}


/* ===== ثيم التباين الذهبي | 2026-08-10 ===== */
:root{
  --gold:#f1ce74;
  --gold-strong:#e6b94c;
  --ink:#17384d;
  --muted:#456273;
}
/* النصوص فوق الخلفيات الداكنة: لا أسود فوق الأزرق/الأخضر */
.auth-brand h1,
.auth-brand .brand-point strong,
.auth-brand .brand-point>div>b,
.school-banner h2,
.profile-hero h2,
.personal-hero h1,
.personal-hero h2{
  color:var(--gold)!important;
  text-shadow:0 1px 3px rgba(0,0,0,.18);
}
.auth-brand>p,
.auth-brand .brand-point .tiny,
.auth-brand .brand-point small,
.school-banner p,
.school-banner .muted,
.profile-hero p,
.profile-hero .muted,
.personal-hero p,
.personal-hero .muted{
  color:#f3f8fb!important;
  opacity:1!important;
}
/* اسم المستخدم والتكليف في الهيدر */
.app-header #headerUser{
  color:var(--gold)!important;
  font-size:14px!important;
  font-weight:950!important;
  text-shadow:0 1px 3px rgba(0,0,0,.22)!important;
}
.app-header #headerRole{
  color:#fff8e2!important;
  font-size:11.5px!important;
  font-weight:800!important;
  opacity:1!important;
}
.app-header #headerSchool{color:var(--gold)!important}
/* النصوص على الخلفيات البيضاء تبقى داكنة عالية التباين */
.card,.auth-panel,.modal,.table-wrap{color:#17384d}
.card .muted,.card .tiny,.table .muted,.table .tiny,
.page-head .muted,.section-title .muted,.field-help{
  color:#456273!important;
  opacity:1!important;
}
.page-head h1,.section-title h2,.employee-name,.assignment-card h3,
.evidence-title,.analytics-title h3,.staff-card-copy h3{
  color:#173f59!important;
}
/* بطاقات واجهة الدخول أوضح وأكثر فخامة */
.brand-point{
  border-color:rgba(241,206,116,.36)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08))!important;
}
.brand-point::after{background:linear-gradient(180deg,#f1ce74,#e7b94f,#24b47e)!important}
.brand-point>b,.brand-point>span:first-child{
  color:var(--gold)!important;
  border-color:rgba(241,206,116,.28)!important;
  background:rgba(255,255,255,.13)!important;
}
@media(max-width:700px){
  .app-header #headerUser{font-size:13px!important}
  .app-header #headerRole{font-size:10.5px!important}
}

/* ===== v16 focused fixes: notifications + platform pagination ===== */
.notification-item{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.notification-item:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(8,45,76,.10);border-color:rgba(215,166,63,.55)}
.notification-item:focus{outline:2px solid #d7a63f;outline-offset:2px}
.notification-item-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.notification-open-hint{font-size:12px;font-weight:800;color:#b6831f;white-space:nowrap}
.notification-target-row{animation:notificationTargetPulse 2.4s ease 1;background:rgba(215,166,63,.12)!important}
@keyframes notificationTargetPulse{0%,100%{box-shadow:inset 0 0 0 0 rgba(215,166,63,0)}35%{box-shadow:inset 0 0 0 2px rgba(215,166,63,.62)}}
.admin-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 2px 0;border-top:1px solid rgba(8,45,76,.08);margin-top:12px}
.admin-pager-info,.admin-page-number{font-size:13px;font-weight:700;color:#536879}
.admin-pager-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:640px){.admin-pager{justify-content:center}.admin-pager-info{width:100%;text-align:center}.admin-pager-actions{justify-content:center}}


/* v17 — رسالة نجاح استرداد كلمة المرور */
.reset-success-card{
  text-align:center;
  padding:8px 4px 2px;
}
.reset-success-icon{
  width:58px;height:58px;margin:0 auto 14px;
  border-radius:50%;display:grid;place-items:center;
  background:#e8f6ef;color:#147a55;font-size:30px;font-weight:900;
  border:1px solid #c9eadb;
}
.reset-success-card h3{margin:0 0 10px;color:#12364a;font-size:21px}
.reset-success-card p{margin:7px 0;color:#405867;line-height:1.8}
.reset-success-email{
  display:inline-block;max-width:100%;margin:7px auto 10px;padding:9px 13px;
  border-radius:12px;background:#f4f8fa;border:1px solid #dce8ee;
  color:#0d4f72;font-weight:800;direction:ltr;overflow-wrap:anywhere;
}
.reset-success-note{
  margin-top:12px!important;padding:12px 14px;border-radius:13px;
  background:#fff8e8;border:1px solid #eed89b;color:#5f4b1f!important;
}

.footer-credit-title{
  font-size:14px!important;
  font-weight:700;
  line-height:1.5;
}