/* ================================================================
   SCHOOL OPERATIONAL PLAN — style.css v6.0
   ================================================================ */
:root{
  --primary:#0f6e5c;--primary-light:#16a085;--primary-dark:#0a4d40;
  --accent:#1f7a8c;--accent-light:#2ba3b8;
  --gold:#b7950b;--gold-light:#e9b949;
  --danger:#c0392b;--warning:#d68910;--success:#1e8449;
  --bg:#eef4f2;--bg-card:#ffffff;--bg-sidebar:#0a3d33;
  --text-main:#1c2833;--text-muted:#7f8c8d;--text-light:#ecf0f1;
  --border:#d5dbd9;--border-light:#e8edeb;
  --shadow:0 2px 12px rgba(0,0,0,0.08);--shadow-md:0 4px 24px rgba(0,0,0,0.12);
  --radius:12px;--radius-sm:8px;
  --sidebar-width:260px;--header-height:60px;
  --transition:0.2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-tap-highlight-color:transparent}
body{font-family:'Tajawal','Cairo',sans-serif;background:var(--bg);color:var(--text-main);direction:rtl;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
input,select,textarea,button{font-family:inherit}
textarea{resize:vertical}
img{max-width:100%}
button{cursor:pointer}
.hidden{display:none!important}
.req{color:var(--danger)}
.mt-10{margin-top:10px}.mt-20{margin-top:20px}

/* ── LOGIN ── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background: linear-gradient(135deg, #c084fc 0%, #7dd3fc 100%);position:relative;overflow:hidden;padding:20px}
.login-bg-shapes{position:absolute;inset:0;pointer-events:none}
.shape{position:absolute;border-radius:50%;opacity:0.08;background:white}
.shape-1{width:400px;height:400px;top:-100px;left:-100px}.shape-2{width:300px;height:300px;bottom:-80px;right:-80px}.shape-3{width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%)}
.login-container{position:relative;z-index:1;width:100%;max-width:480px}
.login-header{text-align:center;margin-bottom:28px;color:white}
.login-logo{width:76px;height:76px;background:rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border:2px solid rgba(255,255,255,0.3)}
.logo-icon{font-size:34px}
.login-header h1{font-size:22px;font-weight:800;margin-bottom:5px}.login-header p{font-size:13px;opacity:0.75}
.login-card{background:white;border-radius:20px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.login-card h2{font-size:20px;font-weight:700;margin-bottom:22px;color:var(--primary);text-align:center}
.login-field-group{margin-bottom:16px}
.login-field-group label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:6px}
.login-field-group input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border-color var(--transition)}
.login-field-group input:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.12)}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:none;border-radius:var(--radius-sm);font-size:16px;font-weight:700;transition:all var(--transition);margin-top:8px;box-shadow:0 4px 15px rgba(26,82,118,0.4)}
.btn-login:hover{transform:translateY(-2px)}.btn-login:disabled{opacity:0.7;transform:none}
.role-info-hint{text-align:center;font-size:12px;color:var(--text-muted);margin-top:14px;padding:10px 14px;background:var(--bg);border-radius:8px;border:1px solid var(--border-light)}
.role-info-hint strong{color:var(--primary)}

/* ── APP LAYOUT ── */
.app{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100vh;z-index:200;overflow-y:auto;overflow-x:hidden;transition:transform 0.25s ease;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent}
.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
.sidebar-header{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:11px;flex-shrink:0}
.sidebar-logo{font-size:24px;width:40px;height:40px;background:rgba(255,255,255,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-school-info{display:flex;flex-direction:column;overflow:hidden}
.sidebar-school-info span:first-child{font-size:13px;font-weight:700;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-school-info span:last-child{font-size:11px;color:rgba(255,255,255,0.5);margin-top:2px}
.sidebar-nav{flex:1;padding:12px 10px;display:flex;flex-direction:column;gap:3px}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:500;color:rgba(255,255,255,0.65);transition:all var(--transition);text-decoration:none;white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,0.08);color:white}
.nav-item.active{background:linear-gradient(135deg,var(--primary-light),var(--accent));color:white;box-shadow:0 4px 12px rgba(46,134,193,0.3)}
.nav-icon{font-size:17px;flex-shrink:0}
.sidebar-footer{padding:14px 10px;border-top:1px solid rgba(255,255,255,0.08);flex-shrink:0}
.user-badge{background:rgba(255,255,255,0.08);border-radius:var(--radius-sm);padding:7px 12px;font-size:12px;color:rgba(255,255,255,0.7);text-align:center;margin-bottom:8px}
.btn-logout{width:100%;padding:9px;background:rgba(192,57,43,0.2);color:#e74c3c;border:1px solid rgba(192,57,43,0.3);border-radius:var(--radius-sm);font-size:13px;transition:all var(--transition)}
.btn-logout:hover{background:rgba(192,57,43,0.35)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199}
.sidebar-overlay.show{display:block}

/* ── MAIN CONTENT ── */
.main-content{flex:1;margin-right:var(--sidebar-width);min-height:100vh;display:flex;flex-direction:column}
.top-header{height:var(--header-height);background:white;border-bottom:1px solid var(--border-light);display:flex;align-items:center;padding:0 20px;gap:14px;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--primary);padding:6px 8px;border-radius:6px;line-height:1;cursor:pointer}
.menu-toggle:hover{background:var(--bg)}
.header-title{flex:1;font-size:17px;font-weight:700;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted);flex-shrink:0}
#header-user-name{display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{width:36px;height:36px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;color:white;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.content-area{flex:1;padding:24px 20px}

/* ── SECTIONS ── */
.section{display:none}.section.active{display:block}
.section-intro{margin-bottom:24px}.section-intro h2{font-size:21px;font-weight:800;color:var(--primary-dark);margin-bottom:5px}.section-intro p{color:var(--text-muted);font-size:13.5px}
.section-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}.section-top h2{font-size:19px;font-weight:800;color:var(--primary-dark)}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:white;border-radius:var(--radius);padding:17px 15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;border-right:4px solid var(--primary-light);transition:transform var(--transition)}
.stat-card:hover{transform:translateY(-3px)}.stat-card.green{border-right-color:var(--accent)}.stat-card.gold{border-right-color:var(--gold-light)}.stat-card.red{border-right-color:var(--danger)}.stat-card.purple{border-right-color:#8e44ad}.stat-card.teal{border-right-color:#16a085}
.stat-icon{font-size:24px}.stat-number{font-size:28px;font-weight:800;color:var(--primary-dark);line-height:1}.stat-label{font-size:12px;color:var(--text-muted);font-weight:500}

/* ── CARDS ── */
.card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border-light)}.card-header h3{font-size:14.5px;font-weight:700;color:var(--primary-dark)}
.dashboard-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
canvas{display:block;max-width:100%;padding:14px}

/* ── BUTTONS ── */
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:none;border-radius:var(--radius-sm);padding:10px 18px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all var(--transition);box-shadow:0 3px 10px rgba(26,82,118,0.25);white-space:nowrap}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px rgba(26,82,118,0.35)}.btn-primary:disabled{opacity:0.65;transform:none}
.btn-secondary{background:var(--bg);color:var(--text-main);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 18px;font-size:13.5px;font-weight:600;transition:all var(--transition)}.btn-secondary:hover{background:var(--border-light)}
.btn-warning{background:linear-gradient(135deg,#e67e22,#f39c12);color:white;border:none;border-radius:var(--radius-sm);padding:10px 18px;font-size:13.5px;font-weight:600;transition:all var(--transition)}
.btn-danger{background:linear-gradient(135deg,var(--danger),#e74c3c);color:white;border:none;border-radius:var(--radius-sm);padding:10px 18px;font-size:13.5px;font-weight:600;transition:all var(--transition)}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:6px;border:none;font-weight:600;transition:all var(--transition);white-space:nowrap;cursor:pointer}
.btn-edit{background:#eaf2ff;color:var(--primary)}.btn-delete{background:#fdecea;color:var(--danger)}.btn-view{background:#e8f8f5;color:var(--accent)}.btn-note{background:#fef9e7;color:var(--warning)}.btn-evidence{background:#f5eef8;color:#7d3c98}.btn-detail{background:#eaf2ff;color:var(--primary)}
.btn-sm:hover{filter:brightness(0.95);transform:translateY(-1px)}

/* ── FORM ── */
.form-group{margin-bottom:14px}.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;color:var(--text-main);background:white;transition:border-color var(--transition);outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.1)}
.form-group textarea{min-height:78px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.filter-bar select,.filter-bar input{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:white;color:var(--text-main);outline:none;transition:border-color var(--transition)}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--primary-light)}.filter-bar input{flex:1;min-width:180px}

/* ── TABLES ── */
.table-wrapper{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:500px}
.data-table thead th{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:white;padding:12px;text-align:right;font-weight:600;font-size:12.5px;white-space:nowrap}
.data-table tbody tr{border-bottom:1px solid var(--border-light);transition:background var(--transition)}.data-table tbody tr:hover{background:#f8fbff}.data-table tbody tr:last-child{border-bottom:none}
.data-table tbody td{padding:10px 12px;vertical-align:middle}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
.badge-success{background:#d5f5e3;color:#1e8449}.badge-warning{background:#fef9e7;color:#b7950b}.badge-danger{background:#fdecea;color:#c0392b}.badge-info{background:#eaf2ff;color:#2471a3}.badge-secondary{background:#f2f3f4;color:#626567}.badge-purple{background:#f5eef8;color:#7d3c98}

/* ── PROGRESS ── */
.progress-bar{height:7px;background:#eaecee;border-radius:4px;overflow:hidden;min-width:60px}
.progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary-light),var(--accent-light));transition:width 0.5s ease}
.progress-wrap{display:flex;align-items:center;gap:8px}.progress-text{font-size:12px;font-weight:700;color:var(--primary);min-width:32px}

/* ── PROGRAMS GRID ── */
.programs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.program-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow);border-top:5px solid var(--primary-light);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);display:flex;flex-direction:column}
.program-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.program-card.status-planning{border-top-color:#95a5a6}.program-card.status-active{border-top-color:var(--primary-light)}.program-card.status-done{border-top-color:var(--accent)}.program-card.status-late{border-top-color:var(--danger)}
.program-card-header{padding:16px 18px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.program-card-title{font-size:15px;font-weight:800;color:var(--primary-dark);line-height:1.3;flex:1}
.program-card-body{padding:0 18px 12px;flex:1}
.program-card-desc{font-size:12.5px;color:var(--text-muted);margin-bottom:12px;line-height:1.6}
.program-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.program-meta-item{font-size:12px;display:flex;align-items:center;gap:5px;color:var(--text-muted)}.program-meta-item strong{color:var(--text-main)}
.program-progress-section{margin-bottom:14px}.program-progress-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:6px;font-weight:600}
.program-indicators{margin-bottom:12px}.program-indicators-title{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:6px}
.program-evidence-section{margin-bottom:12px}.program-evidence-title{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.evidence-chips{display:flex;flex-wrap:wrap;gap:5px}
.evidence-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:#f0f4f8;border:1px solid var(--border);border-radius:20px;font-size:11px;color:var(--text-main);text-decoration:none;transition:all var(--transition)}.evidence-chip:hover{background:#dce8f5;border-color:var(--primary-light);color:var(--primary)}.evidence-chip.no-link{cursor:default}
.ev-delete{color:var(--danger);font-weight:700;cursor:pointer;margin-right:2px;padding:0 2px;line-height:1}.ev-delete:hover{background:rgba(192,57,43,0.1);border-radius:3px}
.program-card-actions{padding:12px 18px 16px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border-light)}

/* ── INDICATORS ── */
.indicators-list{display:flex;flex-direction:column;gap:0;margin-bottom:8px}
.indicator-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--border-light);transition:background var(--transition)}.indicator-row:last-child{border-bottom:none}.indicator-row:hover{background:#f8fbff;border-radius:6px}
.ind-toggle{width:28px;height:28px;flex-shrink:0;border:none;background:none;cursor:pointer;font-size:18px;padding:0;line-height:1;transition:transform 0.15s ease;border-radius:6px}.ind-toggle:hover:not(:disabled){transform:scale(1.2);background:rgba(0,0,0,0.04)}.ind-toggle:disabled{cursor:not-allowed;opacity:0.5}
.ind-text{flex:1;font-size:13px;color:var(--text-main);line-height:1.4}
.ind-delete{height:22px;flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--danger);font-size:11.5px;font-weight:700;padding:0 6px;border-radius:4px;white-space:nowrap;font-family:inherit;transition:background var(--transition)}.ind-delete:hover{background:rgba(192,57,43,0.12)}
.add-indicator-row{display:flex;gap:6px;margin-top:8px;align-items:center}
.ind-input{flex:1;padding:7px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:inherit;transition:border-color var(--transition);outline:none}.ind-input:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.1)}

/* ── TASKS ── */
.tasks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.task-card{background:white;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border-top:4px solid var(--primary-light);transition:transform var(--transition)}.task-card:hover{transform:translateY(-3px)}
.task-card.priority-high{border-top-color:var(--danger)}.task-card.priority-medium{border-top-color:var(--warning)}.task-card.priority-low{border-top-color:var(--accent)}
.task-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:8px}.task-title{font-size:14px;font-weight:700;color:var(--primary-dark);line-height:1.4}
.task-meta{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-muted);margin-bottom:12px}.task-meta span{display:flex;align-items:center;gap:5px}
.task-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.task-status-select{padding:5px 9px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;background:white;font-family:inherit;outline:none}

/* ── KPI ── */
.kpi-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi-card{background:white;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);text-align:center}
.kpi-card-name{font-size:12.5px;color:var(--text-muted);margin-bottom:10px;font-weight:600}
.kpi-circle{width:78px;height:78px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 10px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.kpi-circle-inner{width:58px;height:58px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:var(--primary-dark);position:absolute}
.kpi-values{font-size:11.5px;color:var(--text-muted)}

/* ── UPCOMING ── */
.upcoming-list{padding:10px 14px}
.upcoming-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-light)}.upcoming-item:last-child{border-bottom:none}
.upcoming-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.upcoming-dot.high{background:var(--danger)}.upcoming-dot.medium{background:var(--warning)}.upcoming-dot.low{background:var(--accent)}
.upcoming-info{flex:1;overflow:hidden}.upcoming-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upcoming-due{font-size:11px;color:var(--text-muted);margin-top:2px}
.initiatives-progress-list{padding:14px 18px}
.ini-progress-item{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ini-progress-name{font-size:12.5px;font-weight:600;min-width:140px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-progress-bar{flex:1}

/* ── CALENDAR ── */
.calendar-grid{background:white;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.calendar-header-row{display:grid;grid-template-columns:repeat(7,1fr);background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.calendar-day-name{padding:10px;text-align:center;color:white;font-size:12px;font-weight:700}
.calendar-body{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--border-light);border-top:1px solid var(--border-light)}
.calendar-cell{min-height:80px;padding:5px;border-right:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}.calendar-cell.empty{background:#fafbfc}.calendar-cell.today{background:#eaf4fb}
.calendar-date{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:3px}.calendar-date.today-num{color:white;background:var(--primary);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.calendar-event{font-size:10px;padding:2px 4px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-event.task-event{background:#eaf2ff;color:var(--primary)}.calendar-event.ini-event{background:#e8f8f5;color:var(--accent)}.calendar-event.late-event{background:#fdecea;color:var(--danger)}
.month-nav{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:var(--primary)}.month-nav button{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:5px 10px;font-size:13px;transition:all var(--transition)}.month-nav button:hover{background:var(--border-light)}

/* ── SETTINGS ── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ── DETAIL ── */
.detail-section{margin-bottom:20px}.detail-section h4{font-size:14px;font-weight:700;color:var(--primary-dark);margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--border-light)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-item{background:var(--bg);border-radius:8px;padding:10px 13px}.detail-item-label{font-size:11px;color:var(--text-muted);font-weight:600;margin-bottom:4px}.detail-item-value{font-size:13.5px;font-weight:700;color:var(--text-main)}
.evidence-list-detail{display:flex;flex-direction:column;gap:8px}
.evidence-detail-item{display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--bg);border-radius:8px;border:1px solid var(--border-light)}
.ev-det-icon{font-size:20px;flex-shrink:0}.ev-det-info{flex:1;overflow:hidden}.ev-det-title{font-size:13px;font-weight:700}.ev-det-meta{font-size:11.5px;color:var(--text-muted);margin-top:2px}.ev-det-actions{display:flex;gap:5px;flex-shrink:0}

/* ── EVIDENCE REQUIREMENTS ── */
.requirements-block{margin-top:10px;padding:12px;background:#f7f9fc;border:1px solid var(--border-light);border-radius:10px}
.requirements-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.requirements-header h5{margin:0;font-size:13px;font-weight:800;color:var(--primary-dark)}
.requirements-counter{font-size:12px;font-weight:600;color:var(--text-muted)}
.requirements-list{display:flex;flex-direction:column;gap:8px}
.req-empty{font-size:12.5px;color:var(--text-muted);padding:6px 0}
.req-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--border-light);background:#fff}
.req-main{flex:1;min-width:160px}
.req-name{font-size:13px;font-weight:700;color:var(--text-main);margin-bottom:4px}
.req-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--text-muted)}
.req-status-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
.req-status-missing .req-status-badge,.req-status-badge.req-status-missing{background:#eef1f4;color:#5d6d7e}
.req-status-pending .req-status-badge,.req-status-badge.req-status-pending{background:#fff4e5;color:#b9770e}
.req-status-approved .req-status-badge,.req-status-badge.req-status-approved{background:#e8f8f0;color:#1e8449}
.req-row.req-status-missing{border-color:#d5d8dc}
.req-row.req-status-pending{border-color:#f5cba7}
.req-row.req-status-approved{border-color:#a9dfbf}
.req-status-partial .req-status-badge,.req-status-badge.req-status-partial{background:#eaf2ff;color:#1a5276}
.req-row.req-status-partial{border-color:#aed6f1}
.req-pct{display:inline-flex;align-items:center;margin-inline-start:8px;font-size:12px;font-weight:800;color:var(--primary-dark);background:#eaf2ff;border-radius:999px;padding:2px 8px}
.req-attachments{display:flex;flex-direction:column;gap:6px;margin-top:8px;width:100%}
.req-attachment-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;background:#f7f9fc;border:1px solid var(--border-light)}
.req-attachment-item.is-approved{background:#f4fbf7;border-color:#a9dfbf}
.req-attachment-name{font-size:12.5px;font-weight:700;flex:1;min-width:140px;word-break:break-word}
.req-attachment-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.req-attachment-note{flex-basis:100%}
.req-notes{margin:2px 0 6px}
.ev-note{font-size:12px;font-weight:400;line-height:1.6;color:var(--text-main);white-space:pre-line;word-break:break-word;margin-top:4px;padding:5px 8px;background:#fffbea;border:1px solid #f5e6a8;border-radius:6px}
.ev-note-label{font-weight:700;color:#8a6d00}
.req-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.reports-progress-summary{margin:0 0 14px;font-size:13px;font-weight:700;color:var(--primary-dark)}
.file-preview-list{flex-direction:column;align-items:stretch;gap:8px}
.file-preview-list .file-preview-row{display:flex;align-items:center;gap:10px}
.req-approve-btn{min-width:34px;font-size:12px;font-weight:800;background:#eef1f4;color:#7f8c8d;border:1.5px solid #cfd4d9}
.req-approve-btn.is-approved{background:#27ae60;color:#fff;border-color:#1e8449}
.req-approve-btn:hover{filter:brightness(0.97)}
.req-attach-locked{font-size:11px;color:#1e8449;font-weight:700}
.requirements-footer{margin-top:10px}
.ind-pct-chip{flex-shrink:0;min-width:40px;text-align:center;font-size:11px;font-weight:800;color:var(--primary-dark);background:#eaf2ff;border-radius:6px;padding:3px 6px}
.ind-req-mini{flex-shrink:0;font-size:11px;color:var(--text-muted);font-weight:600}
.ind-detail-pct{margin-inline-start:8px;font-size:12px;font-weight:700;color:var(--primary)}
.indicator-detail-box{padding:12px;margin-bottom:12px;border:1px solid var(--border-light);border-radius:10px;background:#fff}

@media (max-width: 768px) {
  .req-row{flex-direction:column;align-items:stretch}
  .req-actions{justify-content:flex-start}
  .requirements-header{flex-direction:column;align-items:flex-start}
}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;z-index:999;padding:16px;backdrop-filter:blur(4px);overflow-y:auto}
.modal{background:white;border-radius:16px;width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:modalIn 0.2s ease;position:relative}
.modal.modal-lg{max-width:660px}.modal.modal-xl{max-width:800px}
@keyframes modalIn{from{transform:scale(0.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:white;border-radius:16px 16px 0 0;position:sticky;top:0;z-index:1}
.modal-header h3{font-size:16px;font-weight:700}
.modal-close{background:rgba(255,255,255,0.15);border:none;color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background var(--transition);flex-shrink:0}.modal-close:hover{background:rgba(255,255,255,0.3)}
.modal-body{padding:22px}.modal-footer{padding:14px 22px;border-top:1px solid var(--border-light);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

/* ── FILE UPLOAD ── */
.file-upload-area{border:2px dashed var(--border);border-radius:var(--radius-sm);padding:24px 16px;text-align:center;cursor:pointer;transition:all var(--transition);background:#fafbfc}.file-upload-area:hover{border-color:var(--primary-light);background:#eaf2ff}
.file-upload-icon{font-size:30px;margin-bottom:8px}.file-upload-text{font-size:14px;font-weight:600;color:var(--primary);margin-bottom:4px}.file-upload-sub{font-size:12px;color:var(--text-muted)}
.file-preview{margin-top:10px;padding:10px 13px;background:#f0f4f8;border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;font-size:13px;border:1px solid var(--border)}
.file-preview .file-name{flex:1;font-weight:600}.file-preview .file-remove{cursor:pointer;color:var(--danger);font-weight:700;padding:2px 6px;border-radius:4px}
.image-preview{margin-top:10px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}.image-preview img{width:100%;max-height:200px;object-fit:contain;background:#f0f0f0}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}.empty-icon{font-size:48px;margin-bottom:12px;opacity:0.5}.empty-state p{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--text-main)}.empty-state small{font-size:13px}

/* ── MISC ── */
.top-initiative-item{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;border-bottom:1px solid var(--border-light);font-size:13px}.top-initiative-item:last-child{border-bottom:none}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1c2833;color:white;padding:13px 26px;border-radius:50px;font-size:14px;font-weight:600;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,0.25);animation:toastIn 0.3s ease;white-space:nowrap}
@keyframes toastIn{from{bottom:0;opacity:0}to{bottom:24px;opacity:1}}
.toast.success{background:linear-gradient(135deg,#1e8449,#27ae60)}.toast.error{background:linear-gradient(135deg,#c0392b,#e74c3c)}.toast.warning{background:linear-gradient(135deg,#d68910,#f39c12)}.toast.info{background:linear-gradient(135deg,#1a5276,#2e86c1)}

/* ── EVIDENCE SOURCE TOGGLE ── */
.evidence-source-toggle{display:flex;flex-wrap:wrap;gap:10px}
.evidence-source-option{flex:1;min-width:180px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;background:#fafbfc;cursor:pointer;transition:all var(--transition);font-size:13px;font-weight:600;color:var(--text-main)}
.evidence-source-option:hover{border-color:var(--primary-light);background:#eaf2ff}
.evidence-source-option:has(input:checked){border-color:var(--primary);background:#eaf2ff;box-shadow:0 0 0 3px rgba(46,134,193,0.12)}
.evidence-source-option input{accent-color:var(--primary);width:16px;height:16px;flex-shrink:0}
.field-hint{display:block;margin-top:6px;font-size:12px;color:var(--text-muted);line-height:1.5}
#ev-file-input,#rep-file-input{display:block;width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-family:inherit;font-size:13px}
.evidence-view-btn{white-space:nowrap}

/* ════════════════════
   RESPONSIVE — TABLET
   ════════════════════ */
@media(max-width:1100px){
  .programs-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
  .settings-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .dashboard-row{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}

/* ════════════════════
   RESPONSIVE — MOBILE
   ════════════════════ */
@media(max-width:768px){
  :root{--sidebar-width:0px}
  .sidebar{transform:translateX(110%);width:80vw;max-width:300px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.show{display:block}
  .main-content{margin-right:0}
  .menu-toggle{display:flex;align-items:center;justify-content:center}
  .content-area{padding:14px 12px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tasks-grid,.programs-grid{grid-template-columns:1fr}
  .dashboard-row{grid-template-columns:1fr}
  #header-user-name{display:none}
  .filter-bar{flex-direction:column}
  .filter-bar select,.filter-bar input{width:100%;min-width:0}
  .table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table{font-size:12px}.data-table thead th,.data-table tbody td{padding:8px}
  .modal{max-width:100%}
  .modal-overlay{padding:8px;align-items:flex-end}
  .modal{border-radius:16px 16px 0 0;max-height:92vh}
  .form-row{grid-template-columns:1fr}
  .kpi-cards{grid-template-columns:repeat(2,1fr)}
  .program-meta-grid{grid-template-columns:1fr}
  .calendar-day-name{font-size:10px;padding:6px 2px}
  .calendar-cell{min-height:55px;padding:3px}
  .calendar-event{font-size:9px}
  .toast{font-size:13px;padding:11px 18px;white-space:normal;text-align:center;max-width:90vw}
  .btn-primary,.btn-secondary,.btn-warning,.btn-danger{padding:10px 14px;font-size:13px}
  .modal-footer .btn-primary,.modal-footer .btn-secondary{flex:1}
  .section-top{flex-direction:column;align-items:stretch}
  .section-top .btn-primary{width:100%}
  .program-card-actions{flex-wrap:wrap}
  .program-card-actions .btn-sm{flex:1;text-align:center}
  .settings-grid{grid-template-columns:1fr}
  .ind-toggle,.ind-delete{min-width:30px;min-height:30px}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .login-card{padding:22px 18px}
  .kpi-cards{grid-template-columns:1fr 1fr}
  .stat-number{font-size:22px}
  canvas{padding:8px}
}
#login-page {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  z-index: 999999 !important;
  overflow: auto !important;
  padding: 20px !important;
}

#login-page.hidden {
  display: none !important;
}

html.sop-recovery-pending #login-page,
html.sop-recovery-pending #app {
  display: none !important;
}

#password-recovery-page {
  position: fixed !important;
  inset: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  z-index: 1000000 !important;
  overflow: auto !important;
  padding: 20px !important;
}
html.sop-recovery-pending #password-recovery-page,
#password-recovery-page:not(.hidden) {
  display: flex !important;
}
#password-recovery-page.hidden {
  display: none !important;
}
.pr-hint {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: -8px 0 16px;
  line-height: 1.6;
}
.pr-msg {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  line-height: 1.6;
  text-align: center;
}
.pr-msg.pr-error {
  background: #fdecea;
  color: #922b21;
  border: 1px solid #f5b7b1;
}
.pr-msg.pr-success {
  background: #e8f8f5;
  color: #0e6655;
  border: 1px solid #a9dfbf;
}
.pr-cancel-btn {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border: 1.5px solid var(--border);
  background: #fff !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
}

.login-bg-shapes {
  display: none !important;
}

.login-container,
.login-card {
  position: static !important;
  max-width: 420px !important;
  width: 100% !important;
  background: #fff !important;
  color: #111 !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.school-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 20px;
  margin-bottom: 10px;
}
.school-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.school-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.login-school-logo {
  width: 95px !important;
  height: 95px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 15px !important;
}
.login-logo {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.login-school-logo {
  width: 95px !important;
  height: 95px !important;
  object-fit: contain !important;
  background: white !important;
  padding: 10px !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.22) !important;
}

.login-page {
  background: linear-gradient(135deg, #f7f0ff, #eef6ff) !important;
}

.login-container {
  border: 1px solid #eadcff !important;
  box-shadow: 0 18px 45px rgba(139, 92, 246, 0.18) !important;
}

.login-header h1,
#login-school-title {
  color: #6d28d9 !important;
  font-size: 24px !important;
}

.login-header p {
  color: #64748b !important;
}

button,
.login-btn,
#login-btn {
  background: linear-gradient(90deg, #8b5cf6, #60a5fa) !important;
}
/* ===== هوية بألوان الشعار ===== */
:root{
  --logo-navy:#2F5F8F;
  --logo-blue:#6FA8DC;
  --logo-light:#EEF6FC;
  --logo-gray:#F7F9FB;
  --text:#334155;
}

/* القائمة الجانبية */
.sidebar,
.side-menu,
.nav-menu{
  background:linear-gradient(180deg,#EEF6FC,#D9ECF8) !important;
  color:var(--text) !important;
}

/* رفع الشعار للأعلى */
.sidebar-header,
.school-header,
.school-brand,
.logo-area{
  padding-top:12px !important;
  padding-bottom:14px !important;
  min-height:150px !important;
  gap:6px !important;
}

/* الشعار أكبر */
.school-logo,
.header-logo,
.app-logo,
.sidebar-logo img,
.logo-area img{
  width:110px !important;
  height:110px !important;
  object-fit:contain !important;
  background:white !important;
  padding:10px !important;
  border-radius:24px !important;
  box-shadow:0 8px 20px rgba(47,95,143,.18) !important;
}

/* اسم المدرسة مرة واحدة فقط */
.school-name,
#school-name,
.header-title,
.app-title,
.sidebar-title,
.logo-title{
  font-size:22px !important;
  font-weight:800 !important;
  color:#2F5F8F !important;
  margin:0 !important;
  line-height:1.3 !important;
  text-align:center !important;
}

/* إخفاء التكرار في القائمة الجانبية */
.sidebar .school-subtitle:first-of-type,
.sidebar .logo-subtitle:first-of-type,
.sidebar .academic-year:first-of-type{
  display:none !important;
}

/* النص الصغير */
.school-subtitle,
.sidebar-subtitle,
.logo-subtitle,
.academic-year{
  font-size:12px !important;
  color:#5B7285 !important;
  margin:0 !important;
}

/* عناصر القائمة */
.menu-item,
.nav-item{
  color:#2F5F8F !important;
  border-radius:16px !important;
  margin:6px 14px !important;
}

.menu-item.active,
.nav-item.active{
  background:linear-gradient(90deg,#D9ECF8,#FFFFFF) !important;
  color:#2F5F8F !important;
  border:1px solid #BBD7EA !important;
}

/* الأزرار */
button,
.btn,
#login-btn{
  background:linear-gradient(90deg,#2F5F8F,#6FA8DC) !important;
  color:white !important;
  border:none !important;
  border-radius:14px !important;
}

/* أزرار التفاصيل والتعديل والحذف */
.details-btn,
.btn-details{
  background:white !important;
  color:#2F5F8F !important;
  border:1px solid #BBD7EA !important;
}

.edit-btn,
.btn-edit{
  background:#EEF6FC !important;
  color:#2F5F8F !important;
  border:1px solid #BBD7EA !important;
}

.delete-btn,
.btn-delete{
  background:#FFF4F0 !important;
  color:#C36A50 !important;
  border:1px solid #F2B9A8 !important;
}

/* أشرطة التقدم */
.progress-bar,
.progress-fill,
.progress > div,
.bar-fill{
  background:linear-gradient(90deg,#2F5F8F,#6FA8DC) !important;
}

/* علامة الصح */
input[type="checkbox"]{
  accent-color:#2F5F8F !important;
}
/* ===== تنسيق نهائي للقائمة الجانبية ===== */

/* الخلفية بألوان الشعار */
.sidebar{
  background: linear-gradient(180deg, #f4f9fd, #dcecf8) !important;
}

/* ترتيب الهيدر */
.sidebar-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding-top:6px !important;
  padding-bottom:18px !important;
  gap:8px !important;
}

/* الشعار */
.sidebar-logo{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.school-logo{
  width:125px !important;
  height:125px !important;
  object-fit:contain !important;
  background:#ffffff !important;
  padding:8px !important;
  border-radius:26px !important;
  border:1px solid #d7e8f4 !important;
  box-shadow:0 8px 20px rgba(47,95,143,.12) !important;
}

/* اسم المدرسة */
.school-header h1{
  margin:0 !important;
  font-size:24px !important;
  font-weight:800 !important;
  color:#2F5F8F !important;
  text-align:center !important;
}

/* السنة */
#sidebar-year{
  display:block !important;
  margin-top:4px !important;
  font-size:13px !important;
  color:#64748B !important;
  text-align:center !important;
}

/* عناصر القائمة */
.nav-item{
  color:#2F5F8F !important;
  border-radius:14px !important;
  margin:6px 10px !important;
}

.nav-item.active{
  background:linear-gradient(90deg,#2F5F8F,#6FA8DC) !important;
  color:white !important;
  box-shadow:0 6px 14px rgba(47,95,143,.15) !important;
}
/* إصلاح sidebar بعد الكسر */
#sidebar,
.sidebar{
  width: 280px !important;
  min-width: 280px !important;
  height: 100vh !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  z-index: 999 !important;
  background: linear-gradient(180deg,#f4f9fd,#dcecf8) !important;
}

/* محتوى الصفحة لا يدخل تحت القائمة */
.main-content,
.content,
.dashboard-container,
.app-content{
  margin-right: 280px !important;
  width: calc(100% - 280px) !important;
}

/* الهيدر داخل sidebar */
.sidebar-header{
  flex-shrink: 0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  padding:15px 10px !important;
}

/* القائمة */
.sidebar-nav{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:10px !important;
}

/* زر تسجيل الخروج يبقى أسفل */
.logout-btn,
.sidebar-footer{
  margin-top:auto !important;
  padding:14px !important;
}
/* ===== إصلاح نهائي للـ sidebar ===== */

#app{
  display:flex !important;
  flex-direction:row !important;
}

/* القائمة الجانبية */
#sidebar,
.sidebar{
  width:280px !important;
  min-width:280px !important;
  height:100vh !important;
  position:fixed !important;
  right:0 !important;
  top:0 !important;
  background:linear-gradient(180deg,#f4f9fd,#dcecf8) !important;
  overflow-y:auto !important;
  display:flex !important;
  flex-direction:column !important;
}

/* الهيدر داخل القائمة */
.sidebar-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:15px 10px !important;
  gap:8px !important;
}

/* الشعار */
.school-logo{
  width:120px !important;
  height:120px !important;
  object-fit:contain !important;
  background:#fff !important;
  padding:8px !important;
  border-radius:24px !important;
}

/* اسم المدرسة */
.school-header h1{
  margin:0 !important;
  font-size:24px !important;
  color:#2F5F8F !important;
}

/* السنة */
#sidebar-year{
  font-size:13px !important;
  color:#64748B !important;
}

/* القائمة */
.sidebar-nav{
  flex:1 !important;
  display:flex !important;
  flex-direction:column !important;
  padding:12px !important;
}

/* المحتوى الرئيسي */
main,
.main-content,
.content,
.dashboard-container{
  margin-right:280px !important;
  width:calc(100% - 280px) !important;
  padding:20px !important;
}
/* خط أوضح */
body, button, input, select, textarea {
  font-family: "Tajawal", "Cairo", Arial, sans-serif !important;
  font-weight: 500 !important;
}

/* تكبير شعار صفحة الدخول */
/* شعار صفحة الدخول */
.login-school-logo{
  width: 190px !important;
  height: 190px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* شعار الصفحة الرئيسية */
.school-logo{
  width: 170px !important;
  height: 170px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* رفع شعار القائمة للأعلى */
.sidebar-logo{
  margin-top: -18px !important;
  margin-bottom: 10px !important;
  display:flex !important;
  justify-content:center !important;
}

/* رفع شعار تسجيل الدخول */
.login-logo{
  margin-top: -30px !important;
  margin-bottom: 12px !important;
  display:flex !important;
  justify-content:center !important;
}

/* أزرار الشريط الجانبي مثل الصورة بلون أزرق */
/* الشريط الجانبي */
.sidebar{
  background: linear-gradient(180deg,#3B2F63,#5B4B8A) !important;
}

/* رفع عناصر القائمة للأعلى */
.sidebar-header{
  padding-bottom: 8px !important;
  min-height: auto !important;
}

.sidebar-nav{
  margin-top: -10px !important;
  padding-top: 0 !important;
}

/* خلفية الصفحة الرئيسية أبيض */
body,
.app,
.main-content,
.content-area,
.section,
.dashboard-row{
  background: #ffffff !important;
}

/* الكروت */
.card,
.stat-card,
.program-card{
  background: #ffffff !important;
  border: 1px solid #eef2f7 !important;
  box-shadow: 0 8px 25px rgba(91,75,138,.08) !important;
}

/* أزرار القائمة */
.sidebar-nav .nav-item{
  background: rgba(255,255,255,.95) !important;
  color: #3B2F63 !important;
}

.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item:hover{
  background: #3B2F63 !important;
  color: white !important;
}

/* أيقونات القائمة */
.sidebar-nav .nav-icon{
  background: #3B2F63 !important;
  color: white !important;
}

.sidebar-nav .nav-item.active .nav-icon,
.sidebar-nav .nav-item:hover .nav-icon{
  background: white !important;
  color: #3B2F63 !important;
}
.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item:hover {
  background: linear-gradient(90deg,#2F5F8F,#6FA8DC) !important;
  color: white !important;
}

.sidebar-nav .nav-item.active .nav-icon,
.sidebar-nav .nav-item:hover .nav-icon {
  background: white !important;
  color: #2F5F8F !important;
}

/* ألوان التحليلات والتقدم */
.progress-bar,
.progress-fill,
.progress > div,
.bar-fill,
.kpi-progress,
.stat-progress {
  background: linear-gradient(90deg,#2F5F8F,#7C83FD,#F3A6C8) !important;
}
/* تكبير شعار تسجيل الدخول فقط */
.login-logo img,
.login-school-logo {
  width: 240px !important;
  height: 240px !important;
  max-width: 240px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* حذف شعار الصفحة الداخلية / الرئيسية */
.sidebar-logo,
.sidebar .school-logo {
  display: none !important;
}

/* ألوان رسائل النجاح بدل الأخضر */
.toast.success,
.toast-success,
#toast.success {
  background: linear-gradient(90deg,#2F5F8F,#7C83FD,#F3A6C8) !important;
  color: white !important;
}
/* رسائل التنبيه Toast */
.toast,
#toast {
  border-radius: 18px !important;
  padding: 14px 22px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 25px rgba(47,95,143,.18) !important;
  z-index: 1000001 !important;
}

/* نجاح */
.toast.success,
#toast.success {
  background: linear-gradient(90deg,#2F5F8F,#7C83FD,#F3A6C8) !important;
}

/* تحذير */
.toast.warning,
#toast.warning {
  background: linear-gradient(90deg,#F3A6C8,#7C83FD) !important;
}

/* خطأ */
.toast.error,
#toast.error {
  background: linear-gradient(90deg,#C36A50,#F3A6C8) !important;
}
/* =========================
   إصلاح شريط الإنجاز
========================= */
.progress-bar,
.progress {
  background: #EEF2F7 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  height: 10px !important;
}

/* اللون يظهر فقط حسب النسبة */
.progress-fill,
.bar-fill {
  background: linear-gradient(90deg,#2F5F8F,#7C83FD,#F3A6C8) !important;
  height: 100% !important;
  border-radius: 999px !important;
  transition: width .4s ease !important;
}

/* =========================
   تحسين شكل كروت البرامج
========================= */
.program-card {
  background: #ffffff !important;
  border: 1px solid rgba(124,131,253,0.18) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  box-shadow: 
    0 8px 24px rgba(47,95,143,0.08),
    0 2px 8px rgba(124,131,253,0.06) !important;
  transition: all .3s ease !important;
}

/* تأثير عند المرور */
.program-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 
    0 14px 32px rgba(47,95,143,0.12),
    0 4px 12px rgba(243,166,200,0.10) !important;
  border-color: rgba(243,166,200,0.35) !important;
}

/* شريط علوي متدرج للكرت */
.program-card::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 20px;
  margin-bottom: 14px;
  background: linear-gradient(90deg,#2F5F8F,#7C83FD,#F3A6C8);
}

/* تحسين الأزرار داخل الكرت */
.program-card .btn,
.program-card button {
  border-radius: 16px !important;
  font-weight: 700 !important;
}
/* إخفاء الأيقونات نهائياً */
.sidebar-nav .nav-icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ترتيب الزر بعد حذف الأيقونة */
.sidebar-nav .nav-item {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0 !important;
  padding: 16px 24px !important;
}

/* إبقاء النص فقط */
.sidebar-nav .nav-item span:last-child {
  display: block !important;
  width: 100% !important;
}
/* تحسين نسخة الجوال */
@media (max-width: 768px) {

  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    padding: 0;
    margin: 0;
  }

  .app-container,
  .main-content,
  .content,
  #main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* الهيدر */
  .topbar,
  .header,
  .school-header {
    width: 100%;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    padding: 12px;
  }

  .school-header h1,
  .school-title {
    font-size: 22px !important;
    line-height: 1.5;
  }

  .school-header p,
  .school-info {
    font-size: 14px !important;
    line-height: 1.7;
  }

  /* أزرار أعلى الصفحة */
  .floating-buttons,
  .top-buttons {
    position: sticky;
    top: 8px;
    z-index: 999;
    display: flex;
    gap: 10px;
    justify-content: center;
    background: white;
    padding: 8px;
    border-radius: 0 0 16px 16px;
  }

  /* القائمة الجانبية */
  .sidebar,
  .side-menu {
    width: 82vw !important;
    max-width: 330px;
    right: 0;
    left: auto;
    padding: 18px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .sidebar a,
  .side-menu a,
  .nav-item {
    width: 100%;
    min-height: 56px;
    font-size: 17px;
    border-radius: 18px;
    margin-bottom: 12px;
  }

  /* لوحة التحكم */
  #dashboard-stats,
  .dashboard-stats,
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
  }

  .stat-card,
  .dashboard-card {
    width: auto !important;
    min-width: 0 !important;
    padding: 14px 8px !important;
    border-radius: 18px;
    text-align: center;
  }

  .stat-card .number,
  .dashboard-card .number {
    font-size: 26px !important;
  }

  .stat-card .label,
  .dashboard-card .label {
    font-size: 14px !important;
    line-height: 1.5;
  }

  /* كروت البرامج */
  .programs-grid,
  #programs-list,
  .cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100%;
  }

  .program-card,
  .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* الأزرار داخل الكروت */
  .card-actions,
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-actions button,
  .actions button {
    flex: 1 1 45%;
    min-height: 42px;
    font-size: 14px;
  }
}

/* ── Academic year UI + Hijri preview ── */
.header-year-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-inline-start:auto}
.header-year-label{font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.header-year-select{min-width:160px;max-width:280px;padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:12.5px;background:white;color:var(--text-main);outline:none}
.header-year-select:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(15,110,92,0.12)}
.year-readonly-banner{background:#fef6e8;color:#8a5a00;border-bottom:1px solid #f0d9a8;padding:10px 20px;font-size:13px;font-weight:600;text-align:center}
.hijri-preview{margin-top:5px;font-size:11.5px;color:var(--text-muted);min-height:1em;line-height:1.4}
.sy-admin-toolbar{display:flex;justify-content:flex-end;margin-bottom:14px;gap:8px;flex-wrap:wrap}
.sy-admin-form{background:var(--bg);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:16px;margin-bottom:16px}
.sy-admin-form h4{font-size:14px;font-weight:700;color:var(--primary-dark);margin-bottom:12px}
.sy-admin-table{width:100%;min-width:720px}
.sy-admin-table-wrap{overflow-x:auto}
.sy-name-cell,.sy-hijri-cell{font-weight:700;white-space:normal;word-break:break-word;font-variant-numeric:tabular-nums}
.sy-label-cell,.sy-dates-cell{white-space:normal;word-break:break-word;line-height:1.45;font-size:12px}
.sy-text-input{width:100%;font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0.01em}
.sy-current-values{background:#f7faf9;border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px;font-size:13px;line-height:1.6}
.sy-current-label{color:var(--text-muted);font-weight:600;margin-inline-end:6px}
.sy-code{font-family:ui-monospace,Consolas,monospace;font-size:13px;background:#eef3f1;padding:2px 6px;border-radius:4px;unicode-bidi:plaintext}
.field-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--text-muted)}
.calendar-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.calendar-mode-toggle{display:inline-flex;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;background:white}
.cal-mode-btn{border:0;background:transparent;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer;font-family:inherit}
.cal-mode-btn.active{background:var(--primary);color:white}
.cal-today-btn{padding:7px 12px;font-size:12.5px}
.calendar-date-row{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:4px}
.calendar-subdate{font-size:10px;color:var(--text-muted);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:768px){
  .top-header{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px}
  .header-title{flex:1 1 100%;order:1}
  .header-year-wrap{order:2;width:100%;margin-inline-start:0}
  .header-year-select{flex:1;max-width:none}
  .header-user{order:3;margin-inline-start:auto}
  .menu-toggle{order:0}
  .calendar-toolbar{width:100%;justify-content:stretch}
  .month-nav{flex:1;justify-content:center}
}

/* ── Programs: compact responsive grid (3 / 2 / 1) ── */
.programs-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
@media (max-width:1280px){.programs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.programs-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:600px){.programs-grid{grid-template-columns:1fr !important}}
.program-card--compact{min-width:0;container-type:inline-size}
.program-card--compact .program-card-header{padding:0 0 10px}
.program-card--compact .program-card-title{margin:0;font-size:15.5px;overflow-wrap:anywhere}
.program-card--compact .program-card-body{padding:0}
.program-card-desc--clamp{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px}
.program-card-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.program-card-fact{min-width:0;background:#f7f9fc;border:1px solid var(--border-light);border-radius:10px;padding:7px 9px}
.program-card-fact dt{font-size:11px;color:var(--text-muted);font-weight:700;margin-bottom:3px}
.program-card-fact dd{margin:0;font-size:12.5px;font-weight:700;color:var(--text-main);overflow-wrap:anywhere}
.program-card-date{display:block;font-size:11.5px;line-height:1.5}
.program-card-fact--inline{font-size:12px;margin-bottom:8px;background:transparent;border:0;padding:0;color:var(--text-muted)}
.program-card-fact--inline strong{color:var(--text-main)}
.program-card-counts{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.program-card-counts li{font-size:12px;color:var(--text-muted);background:#eef1ff;border-radius:999px;padding:3px 10px}
.program-card-counts strong{color:#2F5F8F;font-weight:800}
.program-card-more{border:1px solid var(--border-light);border-radius:12px;background:#fbfcfe}
.program-card-more>summary{cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:700;color:#2F5F8F;list-style-position:inside;border-radius:12px}
.program-card-more[open]>summary{border-bottom:1px solid var(--border-light);border-radius:12px 12px 0 0}
.program-card-more-body{padding:8px 10px 10px}
.program-card--compact .program-card-actions{padding:12px 0 0;margin-top:auto}
.program-card--compact .program-card-body{display:flex;flex-direction:column;padding-bottom:12px}
.program-card--compact .btn-detail-main{flex:1 1 auto;padding:8px 12px;font-size:12.5px}
.program-card--compact .indicator-row{flex-wrap:wrap}
.program-card--compact .ind-text{min-width:0;overflow-wrap:anywhere}
@container (max-width:300px){
  .program-card-facts{grid-template-columns:1fr}
  .program-card--compact .program-card-header{flex-direction:column-reverse;align-items:flex-start;gap:6px}
}
@media (max-width:420px){.program-card-facts{grid-template-columns:1fr}}

/* ── Program detail: evidence index + jump highlight ── */
.program-card-more>summary:focus-visible,.indicator-detail-summary:focus-visible,.detail-section-summary:focus-visible{outline:3px solid #7C83FD;outline-offset:2px}
.indicator-detail-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;cursor:pointer;margin-bottom:8px;list-style-position:inside}
.indicator-detail-text{flex:1;min-width:0;overflow-wrap:anywhere}
.indicator-detail-tools{display:flex;justify-content:flex-end;margin-bottom:8px}
.detail-section-summary{cursor:pointer;list-style-position:inside}
.detail-section-summary h4{display:inline}
.orphan-evidences{margin-top:10px}
.orphan-evidences-title{font-size:12px;color:var(--text-muted);margin-bottom:6px}
.evidence-list-detail{display:flex;flex-direction:column;gap:8px}
.req-row,.req-attachment-item,.evidence-detail-item{scroll-margin:80px}
.req-row:focus,.req-attachment-item:focus,.evidence-detail-item:focus{outline:none}
.evidence-highlight{animation:evidenceHighlight 2.6s ease;box-shadow:0 0 0 3px #7C83FD !important}
@keyframes evidenceHighlight{0%,60%{background:#fff7d6}100%{background:inherit}}
@media (prefers-reduced-motion:reduce){.evidence-highlight{animation:none;background:#fff7d6}}

/* ── Evidence form: teacher name + named links ── */
.field-error{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--danger)}
.form-group input[aria-invalid="true"],.ev-link-row input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.ev-link-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.ev-link-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--border-light);border-radius:10px;background:#fafbfc}
.ev-link-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:4px}
.ev-link-field input{width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;font-family:inherit;background:#fff;outline:none}
.ev-link-field input:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(46,134,193,0.1)}
.ev-link-remove{height:38px;min-width:38px}
@media (max-width:600px){.ev-link-row{grid-template-columns:1fr}.ev-link-remove{justify-self:start}}
.req-attachment-meta{flex-basis:100%;font-size:11.5px;color:var(--text-muted)}
.ev-teacher strong{color:var(--text-main)}
.ev-teacher.is-unset strong{color:var(--text-muted);font-weight:600}
a.evidence-view-btn{display:inline-flex;align-items:center;text-decoration:none;background:linear-gradient(90deg,#2F5F8F,#6FA8DC);color:#fff;border-radius:14px}
a.evidence-view-btn:focus-visible{outline:3px solid #7C83FD;outline-offset:2px}
.data-table button.evidence-title-link{background:none!important;color:var(--primary-dark)!important;border:0!important;border-radius:4px!important;padding:0;font:inherit;font-weight:700;text-align:start;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.data-table button.evidence-title-link:hover{color:#2F5F8F!important}
.data-table button.evidence-title-link:focus-visible{outline:3px solid #7C83FD;outline-offset:2px}