:root {
  --primary:#0d635b; --primary-dark:#084b45; --primary-light:#eaf5f1; --navy:#102b36;
  --gold:#c8a05c; --gold-light:#fcf6e9; --bg:#f6f8fa; --surface:#fff;
  --text:#172f3b; --muted:#73838e; --line:#e3e9ed; --danger:#b84343;
  --success:#14775c; --warning:#9a7029; --radius:16px;
  font-family:Tahoma,'Segoe UI',Arial,sans-serif; color:var(--text); background:var(--bg);
  font-synthesis:none; text-rendering:optimizeLegibility;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0; font-size:14px; line-height:1.85; min-width:320px}
button,input,select,textarea {font:inherit}
button,a,input,select,textarea {-webkit-tap-highlight-color:transparent}
button,a {touch-action:manipulation}
a {color:var(--primary); text-decoration:none}
a:hover {color:var(--primary-dark)}
button {cursor:pointer}
button:disabled {cursor:not-allowed; opacity:.5}
svg {flex-shrink:0; vertical-align:middle}
h1,h2,h3,h4,p {margin-top:0}
h1 {font-size:clamp(25px,3.3vw,42px); line-height:1.6; letter-spacing:-.8px; font-weight:700}
h2 {font-size:23px; line-height:1.7; letter-spacing:-.35px}
h3 {font-size:18px; line-height:1.75}
h4 {font-size:15px}
p {margin-bottom:14px}
small {font-size:12px}
:focus-visible {outline:3px solid #d0ae69; outline-offset:3px}
::selection {background:#d5e9df}
.container {width:min(1160px,calc(100% - 48px)); margin-inline:auto}
.site-header {background:#fff; border-bottom:1px solid var(--line); min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px max(24px,calc((100% - 1160px)/2))}
.brand {display:flex; align-items:center; gap:13px; color:var(--navy); line-height:1.7}
.brand strong {display:block; font-size:19px; font-weight:700}
.brand small,.brand span {color:var(--muted); font-size:12px}
.brand img {width:48px; height:48px; object-fit:contain}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:10px; border:1px solid transparent; padding:10px 20px; font-weight:600; font-size:13px; transition:background .18s,transform .18s,box-shadow .18s; line-height:1.5; white-space:normal}
.btn:hover {transform:translateY(-1px)}
.btn-primary {background:var(--primary); color:#fff; box-shadow:0 5px 12px #0d635b12}
.btn-primary:hover {background:var(--primary-dark); color:#fff}
.btn-secondary {background:#fff; border-color:var(--line); color:var(--text)}
.btn-secondary:hover {background:var(--bg); border-color:#bbc9cb}
.btn-ghost {background:transparent; color:var(--primary)}
.btn-ghost:hover {background:var(--primary-light)}
.btn-danger {background:#fff3f3; border-color:#f4dada; color:var(--danger)}
.btn-sm {min-height:34px; font-size:12px; padding:6px 12px; border-radius:8px}
.btn-icon {padding:10px; min-width:40px}
.card {background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 3px 9px #15394b03; margin-bottom:20px}
.card h2:last-child,.card p:last-child {margin-bottom:0}
.section-title {display:flex; align-items:center; gap:10px; margin-bottom:8px}
.section-title svg {color:var(--primary)}
.muted {color:var(--muted)}
.text-small {font-size:12px}
.text-primary {color:var(--primary)}
.text-danger {color:var(--danger)}
.currency {font-size:.8em; color:var(--muted); font-weight:400; white-space:nowrap}
.alert {background:#edf6f5; border:1px solid #d5e9e4; border-radius:12px; padding:15px 18px; color:#246359; display:flex; align-items:flex-start; gap:10px; font-size:13px; margin-bottom:20px}
.alert svg {margin-top:3px}
.alert p {margin:0}
.alert-warning {background:var(--gold-light); border-color:#efdfbf; color:#8b672e}
.alert-danger,.alert-error {background:#fff2f2; border-color:#f1d6d6; color:var(--danger)}
.alert-info {background:#edf4fa; color:#456882; border-color:#dbe7f1}
.form-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; margin:20px 0}
.field {display:flex; flex-direction:column; gap:7px; min-width:0}
.field label {font-size:13px; font-weight:600; color:var(--text)}
.field label .required,.required {color:var(--danger)}
.field.full,.full-width {grid-column:1/-1}
.input,.select,.textarea,input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea {width:100%; border:1px solid #dce4e9; border-radius:9px; min-height:45px; background:#fff; padding:10px 13px; color:var(--text); transition:border-color .16s,box-shadow .16s}
input:focus,select:focus,textarea:focus {outline:none; border-color:#51948a; box-shadow:0 0 0 3px #0d635b0d}
input::placeholder,textarea::placeholder {color:#9daab3; font-size:12px}
input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=datetime-local] {direction:ltr; text-align:right}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true],.invalid {border-color:var(--danger)!important; background:#fffafa}
input:disabled,select:disabled,textarea:disabled {background:#f3f5f6; color:#8a969e}
textarea {min-height:94px; resize:vertical}
input[type=checkbox],input[type=radio] {accent-color:var(--primary); width:17px; height:17px; vertical-align:middle; margin-left:7px}
input[type=file] {width:100%; padding:12px; background:#f7faf9; border:1px dashed #b9cdc8; border-radius:9px; color:var(--muted); font-size:12px}
.field-hint,.help,.hint {font-size:11px; color:var(--muted); font-weight:400}
.field-error,.error-message {font-size:12px; color:var(--danger); margin:0}
.form-actions {display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; padding-top:22px; border-top:1px solid var(--line)}
.steps {display:flex; gap:14px; align-items:center; justify-content:space-between; padding:22px 0; margin:0 0 20px; list-style:none}
.step {display:flex; align-items:center; gap:9px; color:#8998a2; font-size:12px; position:relative; flex:1}
.step .step-number,.step-number {border:1px solid var(--line); border-radius:50%; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#93a0a9; flex-shrink:0}
.step.active {color:var(--primary); font-weight:700}
.step.active .step-number {background:var(--primary); color:#fff; border-color:var(--primary)}
.step.completed .step-number {background:var(--primary-light); color:var(--primary); border-color:#d7e9e2}
.progress {height:6px; background:#e7eeec; border-radius:8px; overflow:hidden}
.progress>div,.progress>span {display:block; height:100%; background:var(--primary); border-radius:8px; transition:width .3s}
.tag,.badge {display:inline-flex; align-items:center; justify-content:center; border-radius:6px; padding:4px 10px; font-size:11px; font-weight:500; line-height:1.9; white-space:nowrap}
.tag {background:var(--primary-light); color:var(--primary)}
.badge-neutral {background:#eef2f5; color:#647a8c}
.badge-success {background:#eaf5ef; color:#277757}
.badge-warning {background:#fcf2df; color:#956b28}
.badge-danger {background:#fceceb; color:#b65a54}
.table-wrap {overflow-x:auto; border-radius:12px; border:1px solid var(--line); background:#fff; scrollbar-width:thin}
.data-table,.table,table {width:100%; border-collapse:collapse; font-size:12px; text-align:right}
.data-table th,.table th,table th {background:#f8fafb; color:#637886; padding:14px 16px; font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap}
.data-table td,.table td,table td {padding:15px 16px; border-bottom:1px solid #edf0f3; vertical-align:middle}
.data-table tr:last-child td {border-bottom:0}
.data-table tbody tr:hover {background:#fafcfb}
.data-table td strong {display:block; font-weight:600; color:var(--text)}
.data-table td small {display:block; color:var(--muted)}
.empty {padding:55px 20px; text-align:center; color:var(--muted); font-size:13px}
.empty svg {width:42px; height:42px; color:#a6b7bb; margin-bottom:12px}
.empty p {margin:0}
.toolbar {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.toolbar input {max-width:300px}
.toolbar select {width:auto; min-width:140px}
.toolbar .field {flex:1}
.admin-shell {display:flex; min-height:100vh}
.sidebar {width:258px; background:var(--navy); color:#cedbdc; position:fixed; right:0; top:0; bottom:0; display:flex; flex-direction:column; padding:28px 18px; z-index:40; overflow-y:auto}
.sidebar .brand {color:#fff; padding:0 10px 28px; border-bottom:1px solid #ffffff13; margin-bottom:22px}
.sidebar .brand strong {font-size:17px; color:#fff}
.sidebar .brand small,.sidebar .brand span {color:#a4bdc2; font-size:10px}
.sidebar nav {display:flex; flex-direction:column; gap:5px}
.nav-item {display:flex; align-items:center; gap:13px; border:0; border-radius:9px; padding:12px 14px; background:transparent; color:#b6cace; width:100%; text-align:right; font-size:12px; font-weight:500; transition:background .18s,color .18s; margin-bottom:3px}
.nav-item svg {width:18px; height:18px; opacity:.8}
.nav-item:hover {background:#ffffff0b; color:#fff}
.nav-item.active {color:#fff; background:#267569; box-shadow:inset -3px 0 0 #dfc183}
.sidebar-footer {margin-top:auto; padding-top:26px; color:#99b3b9; font-size:11px}
.admin-main {width:calc(100% - 258px); margin-right:258px; min-width:0}
.admin-topbar {height:82px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:18px 36px; gap:16px; position:sticky; top:0; z-index:25}
.admin-topbar h1,.admin-topbar h2 {font-size:17px; margin:0; letter-spacing:0}
.admin-topbar small {color:var(--muted); font-size:11px}
.page-content {padding:30px 36px 50px; max-width:1600px; margin-inline:auto}
.page-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px}
.page-heading h1 {font-size:25px; margin-bottom:2px}
.page-heading p {font-size:12px; color:var(--muted); margin:0}
.stats-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:22px}
.stat-card {padding:22px; background:#fff; border:1px solid var(--line); border-radius:13px; position:relative; min-height:135px; box-shadow:0 3px 10px #15394b02}
.stat-value {font-size:30px; font-weight:700; letter-spacing:-.6px; margin:9px 0 3px; line-height:1.5; color:var(--navy)}
.stat-label {font-size:12px; color:#6e828e}
.stat-icon {width:37px; height:37px; background:#edf6f3; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--primary)}
.stat-card.accent {background:var(--primary); color:#fff; border-color:var(--primary)}
.stat-card.accent .stat-value,.stat-card.accent .stat-label {color:#fff}
.stat-card.accent .stat-icon {background:#ffffff1c; color:#e8f0ed}
.modal-backdrop {position:fixed; inset:0; background:#102b3673; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(3px)}
.modal {background:#fff; border-radius:18px; padding:30px; width:min(900px,100%); max-height:88vh; overflow:auto; box-shadow:0 20px 90px #071c3540}
.modal h2 {margin-bottom:20px}
.modal-header {display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:16px; margin-bottom:20px}
.modal-header h2 {margin:0; font-size:20px}
.modal .close {border:0; background:#f3f6f8; border-radius:50%; width:32px; height:32px; font-size:19px; color:var(--muted)}
.definition-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.definition-grid dt {font-size:11px; color:var(--muted)}
.definition-grid dd {margin:0; font-size:13px; font-weight:600}
.initial-loader {display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; color:var(--muted)}
.loader-mark {width:58px; height:58px; background:var(--primary); color:#fff; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:20px}
#toast-region {position:fixed; left:24px; bottom:24px; z-index:200; width:min(430px,calc(100% - 48px)); pointer-events:none}
.toast {display:flex; align-items:center; gap:12px; padding:15px 18px; margin-top:8px; background:#fff; border:1px solid #cfe4da; border-right:4px solid var(--success); border-radius:12px; box-shadow:0 8px 35px #102b3620; animation:appear .2s ease-out}
.toast p {margin:0; font-size:13px}
.toast>span {color:var(--success)}
.toast-error {border-color:#f1d3d3; border-right-color:var(--danger)}
.toast-error>span {color:var(--danger)}
@keyframes appear {from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
@media(min-width:1500px) {.page-content {padding-top:38px}.stats-grid {gap:22px}}
@media(max-width:1200px) {.stats-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.sidebar {width:230px}.admin-main {margin-right:230px;width:calc(100% - 230px)}.page-content {padding:26px}.admin-topbar {padding-inline:26px}}
@media(max-width:900px) {.stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar {width:200px; padding:20px 10px}.sidebar .brand {gap:8px;padding-inline:6px}.sidebar .brand strong {font-size:14px}.sidebar .brand svg {width:38px}.admin-main {margin-right:200px;width:calc(100% - 200px)}.page-content {padding:22px 18px}.admin-topbar {padding-inline:18px}.nav-item {padding:10px;gap:9px;font-size:11px}.card {padding:22px}.steps {gap:6px}.step {font-size:10px}.step-number {width:27px!important;height:27px!important}.container {width:calc(100% - 36px)}}
@media(max-width:680px) {body {font-size:13px}.site-header {padding:16px 18px;min-height:80px}.brand strong {font-size:15px}.brand small,.brand span {font-size:10px}.brand svg,.brand img {width:40px;height:40px}.site-header .btn {font-size:11px;padding:8px 10px;min-height:37px}.container {width:calc(100% - 28px)}.form-grid {grid-template-columns:1fr;gap:17px}.card {padding:20px 17px;border-radius:12px}.form-actions {flex-wrap:wrap}.steps {overflow:auto;justify-content:flex-start;padding-block:16px}.step {min-width:90px;flex-direction:column;gap:5px;text-align:center;font-size:10px}.sidebar {position:fixed;transform:translateX(100%);width:250px;transition:transform .2s}.sidebar.open,.admin-shell.menu-open .sidebar {transform:translateX(0)}.admin-main {width:100%;margin-right:0}.admin-topbar {height:70px;padding:14px 18px}.page-content {padding:22px 14px 40px}.page-heading {align-items:flex-start;flex-wrap:wrap}.page-heading h1 {font-size:22px}.stats-grid {gap:12px}.stat-card {padding:17px;min-height:120px}.stat-value {font-size:25px}.stat-label {font-size:11px}.toolbar {align-items:stretch;gap:9px}.toolbar input,.toolbar select {max-width:none;width:100%;min-width:100px}.toolbar .btn {flex:1}.modal-backdrop {padding:10px}.modal {padding:21px 16px;max-height:94vh;border-radius:13px}.definition-grid {grid-template-columns:1fr}.data-table th,.data-table td {padding:12px;min-width:100px}#toast-region {left:14px;bottom:14px;width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print {.sidebar,.admin-topbar,.toolbar,.btn,#toast-region {display:none!important}.admin-main {margin:0;width:100%}.page-content {padding:0}.card {box-shadow:none;break-inside:avoid}.table-wrap {overflow:visible;border:0}body {background:white;color:black}}

/* توافق تخطيط الوحدات المستقلة مع المكونات العامة */
.admin-shell > .admin-main {width:auto;margin-right:0}
.admin-shell > .sidebar {width:auto;right:auto;bottom:auto;transform:none}
.site-header > .container {display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;margin:0}
.trainee-shell .brand > span {color:var(--navy);font-size:17px;font-weight:700}
.site-header .brand > span {color:var(--navy);font-size:17px;font-weight:700}
.site-header .brand small {display:block;font-size:11px;font-weight:400;color:var(--muted)}
@media(max-width:800px){.admin-shell > .sidebar{transform:none;width:100%;position:static}.admin-shell > .admin-main{width:100%;margin:0}}
@media(max-width:680px){.site-header .brand > span {font-size:13px}.site-header .brand small {font-size:10px}.site-header > .container {gap:8px}}

@media(max-width:800px){
  .admin-shell > .sidebar{display:block;padding:12px 14px;min-height:0;height:auto}
  .admin-shell .brand-admin{padding:0 4px 10px;margin:0 0 8px}
  .admin-shell .sidebar nav{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}
  .admin-shell .sidebar nav .nav-item{width:auto;flex:0 0 auto;margin:0;padding:9px 10px;font-size:11px}
  .admin-shell .sidebar nav .nav-item span{display:inline}
  .admin-shell .sidebar-bottom{display:block;margin:5px 0 0;padding:0;border:0}
  .admin-shell .sidebar-bottom .nav-item{width:auto;margin:0;padding:5px 10px;font-size:10px;min-height:25px}
  .admin-shell .sidebar-bottom .nav-item span{display:inline}
}

/* شعار المستخدم الأصلي؛ يحافظ العرض على كامل الصورة ونسبة أبعادها. */
.institute-logo{object-fit:contain;background:#fff;border-radius:8px;flex:0 0 auto;width:88px;height:88px}
.brand .institute-logo{width:88px;height:88px}
.brand-admin .brand-mark{width:76px!important;height:76px!important;background:#fff!important;flex:0 0 auto}
.brand-admin .brand-mark .institute-logo{width:76px;height:76px}
.login-head .institute-logo{width:112px;height:112px;margin:0 auto 12px;display:block}
.other-name-label{display:block;margin:10px 0 6px;font-size:.9rem;font-weight:700}
@media(max-width:600px){.brand .institute-logo{width:70px;height:70px}.site-header .brand{gap:8px;font-size:.82rem}.site-header .btn{font-size:.75rem;padding:8px}.brand-admin .brand-mark,.brand-admin .brand-mark .institute-logo{width:66px!important;height:66px!important}}