:root {
  --blue: #0A5980;
  --blue-dark: #084765;
  --blue-deep: #073f5b;
  --blue-soft: #e6f1fb;
  --teal: #25a18e;
  --teal-dark: #166458;
  --teal-soft: #e9f8f5;
  --orange: #fca634;
  --orange-dark: #955a13;
  --orange-soft: #fff6e9;
  --violet: #7057d2;
  --violet-soft: #f0edff;
  --ink: #17202a;
  --text: #4a5968;
  --muted: #6b7785;
  --line: #d8e0e8;
  --line-soft: #eef2f6;
  --canvas: #f6f8fb;
  --white: #fff;
  --danger: #ca3120;
  --danger-soft: #fceeed;
  --success: #23866f;
  --shadow-sm: 0 .55rem 1.75rem rgba(0, 44, 87, .06);
  --shadow-md: 0 1rem 2.6rem rgba(0, 44, 87, .11);
  --sidebar-width: 17rem;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Cairo", Tahoma, sans-serif; font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
svg { display: block; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid rgba(252, 166, 52, .72); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 0 0 auto; display: flex; width: var(--sidebar-width); min-height: 100vh; padding: 1.25rem 1rem; flex-direction: column; color: #fff; background: radial-gradient(circle at 15% 10%, rgba(37,161,142,.22), transparent 28%), linear-gradient(175deg, #073f6e, #002c57 60%, #012441); box-shadow: -1rem 0 3rem rgba(0,44,87,.14); }
.brand { display: flex; align-items: center; gap: .8rem; min-height: 4rem; padding: .35rem .45rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand img { flex: 0 0 3rem; filter: drop-shadow(0 .4rem .8rem rgba(0,0,0,.16)); }
.brand div { display: flex; min-width: 0; flex-direction: column; }
.brand strong { font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
.brand span { color: rgba(255,255,255,.62); font-size: .68rem; }
.mobile-close { display: none; margin-inline-start: auto; padding: .5rem; border: 0; color: #fff; background: none; cursor: pointer; }
.main-nav { display: flex; min-height: 0; padding-block: 1rem; flex: 1; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.nav-label { padding: .4rem .75rem .5rem; color: rgba(255,255,255,.43); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav-label--secondary { margin-top: 1.1rem; }
.nav-item { position: relative; display: flex; gap: .8rem; align-items: center; min-height: 3.15rem; padding: .65rem .8rem; margin-bottom: .25rem; border: 1px solid transparent; border-radius: .8rem; color: rgba(255,255,255,.72); font-weight: 600; transition: .18s ease; }
.nav-item::before { content: ""; position: absolute; inset-block: .75rem; inset-inline-start: -.98rem; width: .2rem; border-radius: 999px; background: var(--orange); opacity: 0; transform: scaleY(.25); transition: .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.is-active { border-color: rgba(255,255,255,.08); color: #fff; background: linear-gradient(90deg, rgba(1,89,174,.45), rgba(255,255,255,.08)); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.nav-item.is-active::before { opacity: 1; transform: scaleY(1); }
.nav-item .icon { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; }
.nav-item.is-active > .icon:first-child { color: var(--orange); }
.nav-item span { flex: 1; }
.nav-external { width: .85rem !important; color: rgba(255,255,255,.35); }
.sidebar-card { padding: 1rem; margin: .25rem .25rem .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.sidebar-card__icon { display: grid; width: 2.35rem; height: 2.35rem; margin-bottom: .65rem; place-items: center; border-radius: .65rem; color: #fff; background: rgba(37,161,142,.55); }
.sidebar-card strong { display: block; margin-bottom: .25rem; font-size: .78rem; }
.sidebar-card p { margin: 0; color: rgba(255,255,255,.54); font-size: .66rem; line-height: 1.7; }
.sidebar-logout button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: .6rem .8rem; border: 0; border-radius: .75rem; color: rgba(255,255,255,.62); background: transparent; cursor: pointer; transition: .18s ease; }
.sidebar-logout button:hover { color: #fff; background: rgba(202,49,32,.2); }
.main-area { min-height: 100vh; margin-inline-start: 0; margin-inline-end: var(--sidebar-width); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; min-height: 5rem; padding: .75rem clamp(1rem, 3vw, 2.2rem); border-bottom: 1px solid rgba(216,224,232,.78); background: rgba(255,255,255,.88); box-shadow: 0 .35rem 1.2rem rgba(0,44,87,.035); backdrop-filter: blur(15px); }
.menu-button { display: none; padding: .55rem; margin-inline-end: .6rem; border: 1px solid var(--line); border-radius: .7rem; background: #fff; cursor: pointer; }
.topbar__title { display: flex; flex-direction: column; }
.topbar__eyebrow { color: var(--muted); font-size: .67rem; }
.topbar__title strong { font-size: 1.05rem; font-weight: 800; }
.topbar__actions { display: flex; align-items: center; gap: .7rem; margin-inline-start: auto; }
.topbar-link { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid var(--line); border-radius: .75rem; color: var(--text); background: #fff; transition: .18s ease; }
.topbar-link:hover { border-color: #99c7ef; color: var(--blue); background: var(--blue-soft); }
.connection-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .7rem; border-radius: 999px; color: var(--teal-dark); background: var(--teal-soft); font-size: .68rem; font-weight: 700; }
.connection-pill span, .live-dot::before { width: .45rem; height: .45rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 .2rem rgba(37,161,142,.13); }
.admin-chip { display: flex; align-items: center; gap: .65rem; padding-inline-start: .85rem; border-inline-start: 1px solid var(--line); }
.admin-chip__avatar { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .72rem; color: #fff; background: linear-gradient(145deg, var(--blue), var(--blue-dark)); font-size: .88rem; font-weight: 800; }
.admin-chip div { display: flex; flex-direction: column; }
.admin-chip strong { font-size: .75rem; line-height: 1.45; }
.admin-chip small { color: var(--muted); font-size: .6rem; }
.content-wrap { width: min(100%, 104rem); padding: clamp(1.1rem, 2.7vw, 2.2rem); margin-inline: auto; }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2.5rem .25rem .25rem; color: #8692a0; font-size: .65rem; }
.mobile-overlay { display: none; }

.toast { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid #bde8dc; border-radius: .8rem; color: var(--teal-dark); background: #f0fbf8; box-shadow: var(--shadow-sm); }
.toast > span { flex: 1; }
.toast button { padding: .25rem; border: 0; color: inherit; background: none; cursor: pointer; }
.toast--error { border-color: #f2c5c0; color: var(--danger); background: var(--danger-soft); }
.section-kicker { display: block; margin-bottom: .35rem; color: var(--teal-dark); font-size: .7rem; font-weight: 800; letter-spacing: .035em; }
.welcome-banner { position: relative; display: flex; align-items: center; gap: 2rem; min-height: 10.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden; border: 1px solid rgba(1,89,174,.08); border-radius: 1.5rem; background: radial-gradient(circle at 10% 100%, rgba(37,161,142,.14), transparent 29%), linear-gradient(135deg, var(--blue-soft), #fff 60%, var(--teal-soft)); box-shadow: var(--shadow-sm); }
.welcome-banner > div { position: relative; z-index: 2; flex: 1; }
.welcome-banner h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; }
.welcome-banner p { max-width: 44rem; margin: .45rem 0 0; color: var(--text); }
.welcome-banner > a { position: relative; z-index: 2; }
.banner-shape { position: absolute; border-radius: 50%; }
.banner-shape--one { width: 9rem; height: 9rem; inset-block-start: -4rem; inset-inline-start: 6%; background: rgba(1,89,174,.08); }
.banner-shape--two { width: 3rem; height: 3rem; inset-block-end: -1rem; inset-inline-end: 36%; background: rgba(252,166,52,.26); }
.primary-button, .secondary-button, .filter-submit, .approve-button, .reject-button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 2.85rem; padding: .65rem 1.15rem; border: 1px solid transparent; border-radius: .75rem; font-weight: 800; cursor: pointer; transition: .18s ease; }
.primary-button, .filter-submit { color: #fff; background: var(--blue); box-shadow: 0 .65rem 1.35rem rgba(1,89,174,.16); }
.primary-button:hover, .filter-submit:hover { background: var(--blue-dark); transform: translateY(-2px); }
.secondary-button { border-color: var(--line); color: var(--blue); background: #fff; }
.secondary-button:hover { border-color: #99c7ef; background: var(--blue-soft); }
.button.is-loading, button.is-loading { opacity: .65; cursor: wait; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.metric-card { position: relative; display: flex; align-items: center; gap: .9rem; min-height: 8.2rem; padding: 1.2rem; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 1.15rem; background: #fff; box-shadow: var(--shadow-sm); transition: .18s ease; }
.metric-card:hover { border-color: #cbd8e5; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.metric-card::after { content: ""; position: absolute; width: 5rem; height: 5rem; inset-block-start: -2.75rem; inset-inline-start: -2.5rem; border-radius: 50%; background: currentColor; opacity: .05; }
.metric-card__icon { display: grid; flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; place-items: center; border-radius: .9rem; }
.metric-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.metric-card > div > span { color: var(--muted); font-size: .7rem; font-weight: 600; }
.metric-card > div > strong { margin-block: .1rem; color: var(--ink); font-size: 1.75rem; line-height: 1.25; }
.metric-card > div > small { color: var(--muted); font-size: .61rem; }
.metric-card > div > small b { color: currentColor; }
.metric-card > a { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: currentColor; opacity: .72; }
.metric-card > a .icon { width: 1rem; color: #fff; }
.metric-card--blue { color: var(--blue); }.metric-card--blue .metric-card__icon { background: var(--blue-soft); }
.metric-card--teal { color: var(--teal-dark); }.metric-card--teal .metric-card__icon { background: var(--teal-soft); }
.metric-card--orange { color: var(--orange-dark); }.metric-card--orange .metric-card__icon { background: var(--orange-soft); }
.metric-card--violet { color: var(--violet); }.metric-card--violet .metric-card__icon { background: var(--violet-soft); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr); gap: 1rem; margin-top: 1rem; }
.dashboard-grid--bottom { grid-template-columns: minmax(0, 1.7fr) minmax(19rem, .8fr); }
.panel { min-width: 0; padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: 1.15rem; background: #fff; box-shadow: var(--shadow-sm); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.panel-heading h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.panel-heading .section-kicker { margin-bottom: .15rem; }
.panel-chip { padding: .38rem .65rem; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: .62rem; font-weight: 700; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--blue); font-size: .7rem; font-weight: 800; }
.text-link:hover { color: var(--blue-dark); }
.text-link .icon { width: .9rem; }
.bar-chart { display: flex; align-items: flex-end; justify-content: space-around; gap: clamp(.4rem, 2vw, 1.3rem); height: 15rem; padding: 1.5rem .5rem .25rem; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 24%, var(--line-soft) 25%); }
.bar-chart__item { display: flex; align-items: center; flex: 1; height: 100%; max-width: 4.5rem; flex-direction: column; }
.bar-chart__value { color: var(--text); font-size: .62rem; font-weight: 800; }
.bar-chart__track { position: relative; display: flex; align-items: flex-end; width: min(100%, 2rem); height: calc(100% - 2.7rem); margin-block: .3rem; border-radius: .55rem .55rem 0 0; background: var(--blue-soft); }
.bar-chart__track span { width: 100%; min-height: .35rem; border-radius: .55rem .55rem .15rem .15rem; background: linear-gradient(180deg, #1680d5, var(--blue)); box-shadow: 0 .35rem .8rem rgba(1,89,174,.18); animation: rise .7s ease both; }
.bar-chart__item:nth-child(even) .bar-chart__track span { background: linear-gradient(180deg, #47bca9, var(--teal)); }
.bar-chart__item small { color: var(--muted); font-size: .58rem; direction: ltr; }
@keyframes rise { from { height: 0; } }
.pending-list { display: flex; flex-direction: column; }
.pending-list > a { display: flex; align-items: center; gap: .75rem; padding: .75rem .1rem; border-bottom: 1px solid var(--line-soft); transition: .18s ease; }
.pending-list > a:last-child { border-bottom: 0; }
.pending-list > a:hover { padding-inline: .35rem; border-radius: .65rem; background: #fafcff; }
.pending-list__icon { display: grid; flex: 0 0 2.55rem; width: 2.55rem; height: 2.55rem; place-items: center; border-radius: .72rem; }
.is-blue { color: var(--blue); background: var(--blue-soft); }.is-teal { color: var(--teal-dark); background: var(--teal-soft); }.is-orange { color: var(--orange-dark); background: var(--orange-soft); }.is-violet { color: var(--violet); background: var(--violet-soft); }
.pending-list > a > div { display: flex; flex: 1; flex-direction: column; }
.pending-list strong { font-size: .75rem; }.pending-list small { color: var(--muted); font-size: .6rem; }
.pending-list b { display: grid; min-width: 1.75rem; height: 1.75rem; padding-inline: .35rem; place-items: center; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: .7rem; }
.pending-list > a > .icon { width: .85rem; color: #a6b0ba; }
.table-scroll { overflow-x: auto; scrollbar-width: thin; }
.data-table { width: 100%; min-width: 62rem; border-collapse: collapse; }
.data-table th { padding: .7rem .65rem; border-block: 1px solid var(--line-soft); color: var(--muted); background: #fafbfd; font-size: .61rem; font-weight: 700; text-align: start; white-space: nowrap; }
.data-table td { padding: .82rem .65rem; border-bottom: 1px solid var(--line-soft); font-size: .68rem; vertical-align: middle; }
.data-table tbody tr { transition: .15s ease; }.data-table tbody tr:hover { background: #fbfdff; }.data-table tbody tr:last-child td { border-bottom: 0; }
.compact-table { min-width: 42rem; }
.table-title { display: flex; max-width: 18rem; flex-direction: column; font-weight: 700; }
.table-title span { color: var(--blue); font-size: .58rem; }
.number-pill, .heading-count { display: inline-grid; min-width: 1.75rem; height: 1.75rem; padding-inline: .4rem; place-items: center; border-radius: 999px; color: var(--blue-dark); background: var(--blue-soft); font-size: .68rem; font-weight: 800; }
.muted-cell { color: var(--muted); white-space: nowrap; }
.row-link { display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: .6rem; color: var(--blue); background: var(--blue-soft); }
.row-link .icon { width: .9rem; }
.live-dot { display: inline-flex; align-items: center; gap: .4rem; color: var(--teal-dark); font-size: .6rem; font-weight: 700; }.live-dot::before { content: ""; display: block; }
.activity-list { display: flex; flex-direction: column; }
.activity-list > a { display: flex; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line-soft); }
.activity-list > a:last-child { border-bottom: 0; }
.activity-list__icon { display: grid; flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; }
.activity-list > a > div { min-width: 0; }
.activity-list strong { display: block; font-size: .68rem; }.activity-list p { margin: .05rem 0; overflow: hidden; color: var(--text); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }.activity-list small { color: #909ba6; font-size: .54rem; }
.empty-state { display: flex; min-height: 13rem; padding: 2rem 1rem; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.empty-state__icon { display: grid; width: 3.5rem; height: 3.5rem; margin-bottom: .75rem; place-items: center; border-radius: 1rem; color: var(--blue); background: var(--blue-soft); }
.empty-state__icon .icon { width: 1.65rem; height: 1.65rem; }.empty-state h3 { margin: 0 0 .25rem; font-size: .9rem; }.empty-state p { max-width: 24rem; margin: 0; color: var(--muted); font-size: .68rem; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.page-heading h1 { margin: 0; font-size: clamp(1.55rem, 2.5vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.page-heading p { margin: .35rem 0 0; color: var(--muted); }
.filter-bar { display: flex; align-items: center; gap: .65rem; padding: .8rem; margin-bottom: 1rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-sm); }
.search-field { display: flex; align-items: center; gap: .55rem; min-width: 15rem; max-width: 32rem; height: 2.75rem; padding-inline: .8rem; flex: 1; border: 1px solid var(--line); border-radius: .72rem; color: var(--muted); background: #fbfcfe; transition: .18s ease; }
.search-field:focus-within { border-color: #7bb5e7; box-shadow: 0 0 0 .2rem rgba(1,89,174,.08); }
.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .73rem; }
.filter-select { display: flex; align-items: center; gap: .35rem; height: 2.75rem; padding-inline: .6rem; border: 1px solid var(--line); border-radius: .72rem; color: var(--muted); background: #fff; }
.filter-select select { min-width: 9rem; height: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .7rem; cursor: pointer; }
.filter-select .icon { width: 1rem; }
.filter-submit { min-height: 2.75rem; padding-inline: 1.1rem; }
.clear-filter { color: var(--danger); font-size: .65rem; font-weight: 700; white-space: nowrap; }
.list-panel { padding: 0; overflow: hidden; }
.list-summary { display: flex; align-items: center; gap: .35rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: .67rem; }
.list-summary strong { color: var(--ink); font-size: .82rem; }.list-summary span { margin-inline-start: auto; }
.id-chip { display: inline-flex; padding: .32rem .5rem; border-radius: .5rem; color: var(--blue); background: var(--blue-soft); direction: ltr; font-weight: 800; }
.entity-cell { display: flex; align-items: center; gap: .65rem; min-width: 12rem; }
.entity-avatar { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .72rem; color: #fff; background: linear-gradient(145deg, var(--teal), var(--teal-dark)); font-size: .85rem; font-weight: 800; }
.entity-avatar--request { color: var(--blue); background: var(--blue-soft); }
.entity-cell > div { display: flex; min-width: 0; flex-direction: column; }.entity-cell strong { max-width: 16rem; overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }.entity-cell small { color: var(--muted); font-size: .58rem; }
.mode-label { padding: .3rem .5rem; border-radius: .45rem; color: var(--text); background: #f1f4f7; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .55rem; border-radius: 999px; color: var(--muted); background: #f0f2f5; font-size: .59rem; font-weight: 700; white-space: nowrap; }
.status__dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.status--approved, .status--open { color: var(--teal-dark); background: var(--teal-soft); }.status--rejected, .status--closed { color: var(--danger); background: var(--danger-soft); }.status--pending { color: var(--orange-dark); background: var(--orange-soft); }
.table-actions, .quick-actions { display: flex; align-items: center; gap: .3rem; }.quick-actions form { display: flex; }
.icon-button { display: grid; width: 2rem; height: 2rem; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: .58rem; color: var(--text); background: #fff; cursor: pointer; transition: .15s ease; }
.icon-button .icon { width: 1rem; height: 1rem; }.icon-button:hover { border-color: #99c7ef; color: var(--blue); background: var(--blue-soft); }.icon-button--success { border-color: #c9e8df; color: var(--teal-dark); }.icon-button--success:hover { background: var(--teal-soft); }.icon-button--danger { border-color: #f2d0cc; color: var(--danger); }.icon-button--danger:hover { background: var(--danger-soft); }.icon-button:disabled { opacity: .35; cursor: default; }
.request-link { display: block; max-width: 15rem; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.request-link b { margin-inline-end: .25rem; color: var(--blue); }
.pagination { display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 1rem; border-top: 1px solid var(--line-soft); }
.page-button { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid var(--line); border-radius: .62rem; color: var(--blue); background: #fff; }.page-button:hover { background: var(--blue-soft); }.page-button.is-disabled { color: #bac2ca; background: #f6f7f8; }.page-button .icon { width: .9rem; }
.pagination__label { color: var(--muted); font-size: .65rem; }.pagination__label strong { color: var(--ink); }

.breadcrumbs { display: flex; align-items: center; gap: .35rem; margin-bottom: .8rem; color: var(--muted); font-size: .65rem; }.breadcrumbs a { color: var(--blue); font-weight: 700; }.breadcrumbs .icon { width: .7rem; }
.detail-hero, .teacher-profile-hero { display: flex; align-items: center; gap: 1rem; padding: 1.3rem; margin-bottom: 1rem; border: 1px solid rgba(1,89,174,.09); border-radius: 1.2rem; background: radial-gradient(circle at 8% 20%, rgba(37,161,142,.11), transparent 24%), linear-gradient(135deg, var(--blue-soft), #fff 65%); box-shadow: var(--shadow-sm); }
.detail-hero__main { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1; }
.detail-icon { display: grid; flex: 0 0 3.6rem; width: 3.6rem; height: 3.6rem; place-items: center; border-radius: 1rem; color: var(--blue); background: #fff; box-shadow: var(--shadow-sm); }.detail-icon .icon { width: 1.65rem; height: 1.65rem; }
.detail-hero h1, .teacher-profile-hero h1 { max-width: 46rem; margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.9rem); line-height: 1.4; }.detail-badges { display: flex; gap: .35rem; margin-top: .45rem; }
.detail-actions { display: flex; align-items: center; gap: .6rem; }.detail-actions > .quick-actions .icon-button { width: 2.85rem; height: 2.85rem; border-radius: .75rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1rem; align-items: start; }.detail-main, .detail-side { display: grid; gap: 1rem; min-width: 0; }.detail-panel, .side-panel { padding: 1.25rem; }
.long-copy { padding: 1rem; border: 1px solid var(--line-soft); border-radius: .9rem; color: var(--text); background: #fbfcfd; font-size: .78rem; line-height: 2; white-space: pre-wrap; }
.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; margin-top: .8rem; }.info-grid > div { padding: .8rem; border-radius: .8rem; background: var(--canvas); }.info-grid span { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .6rem; }.info-grid span .icon { width: .9rem; }.info-grid strong { display: block; margin-top: .25rem; font-size: .72rem; }
.submission-cards { display: grid; gap: .65rem; }.submission-card { display: flex; align-items: flex-start; gap: .75rem; padding: .9rem; border: 1px solid var(--line-soft); border-radius: .9rem; background: #fff; transition: .15s ease; }.submission-card:hover { border-color: #c7d8e7; box-shadow: var(--shadow-sm); }
.submission-card__avatar { display: grid; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: .75rem; color: #fff; background: linear-gradient(145deg, var(--blue), var(--teal)); font-weight: 800; }.submission-card__body { min-width: 0; flex: 1; }.submission-card__title { display: flex; align-items: center; gap: .5rem; }.submission-card__title strong { font-size: .75rem; }.submission-card__body p { margin: .25rem 0 .35rem; color: var(--text); font-size: .66rem; }.meta-row { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .57rem; }.meta-row span { display: flex; align-items: center; gap: .25rem; }.meta-row .icon { width: .8rem; }
.contact-card { display: flex; align-items: center; gap: .65rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }.contact-avatar { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--blue), var(--teal)); font-weight: 800; }.contact-card div { display: flex; flex-direction: column; }.contact-card strong { font-size: .75rem; }.contact-card small { color: var(--muted); font-size: .6rem; }
.detail-list { margin: .65rem 0 0; }.detail-list > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--line-soft); }.detail-list > div:last-child { border-bottom: 0; }.detail-list dt { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .62rem; }.detail-list dt .icon { width: .9rem; }.detail-list dd { margin: 0; font-size: .65rem; font-weight: 700; text-align: end; }
.price-display { display: flex; align-items: center; justify-content: space-between; padding: .9rem; border-radius: .85rem; background: var(--orange-soft); }.price-display span { color: var(--orange-dark); font-size: .65rem; }.price-display strong { color: var(--orange-dark); font-size: 1.35rem; }.price-display small { font-size: .55rem; }
.mini-list { display: grid; gap: .5rem; }.mini-list > div { display: flex; align-items: center; gap: .55rem; padding: .55rem; border-radius: .7rem; background: var(--canvas); }.mini-list__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; color: var(--blue); background: #fff; }.mini-list__icon .icon { width: .95rem; }.mini-list > div > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }.mini-list strong { font-size: .65rem; }.side-empty { margin: 0; color: var(--muted); font-size: .65rem; text-align: center; }

.teacher-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.teacher-card { padding: 1.15rem; border: 1px solid var(--line-soft); border-radius: 1.05rem; background: #fff; box-shadow: var(--shadow-sm); transition: .18s ease; }.teacher-card:hover { border-color: #bad3e8; box-shadow: var(--shadow-md); transform: translateY(-3px); }.teacher-card__head { display: flex; align-items: flex-start; justify-content: space-between; }.teacher-avatar { display: grid; width: 3.7rem; height: 3.7rem; place-items: center; border-radius: 1.05rem 1.05rem 1.05rem 1.8rem; color: #fff; background: linear-gradient(145deg, var(--blue), var(--teal)); box-shadow: 0 .8rem 1.5rem rgba(1,89,174,.14); font-size: 1.25rem; font-weight: 800; }.teacher-card h2 { margin: .8rem 0 0; font-size: .9rem; }.teacher-card h2 a:hover { color: var(--blue); }.teacher-handle { display: block; color: var(--blue); font-size: .58rem; direction: ltr; text-align: right; }.teacher-card > p { min-height: 3.5rem; margin: .55rem 0; color: var(--text); font-size: .65rem; }.teacher-university { display: flex; align-items: center; gap: .35rem; min-height: 2rem; color: var(--muted); font-size: .62rem; }.teacher-university .icon { width: .9rem; color: var(--teal-dark); }.teacher-card__stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: .65rem; border-block: 1px solid var(--line-soft); }.teacher-card__stats div { display: flex; align-items: baseline; justify-content: center; gap: .25rem; padding: .65rem; }.teacher-card__stats div + div { border-inline-start: 1px solid var(--line-soft); }.teacher-card__stats strong { color: var(--blue); }.teacher-card__stats span { color: var(--muted); font-size: .58rem; }.teacher-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .8rem; }
.profile-avatar { display: grid; flex: 0 0 5rem; width: 5rem; height: 5rem; place-items: center; border: .35rem solid rgba(255,255,255,.85); border-radius: 1.25rem 1.25rem 1.25rem 2.4rem; color: #fff; background: linear-gradient(145deg, var(--blue), var(--teal)); box-shadow: var(--shadow-md); font-size: 1.75rem; font-weight: 800; }.profile-copy { flex: 1; }.profile-copy p { margin: .2rem 0; color: var(--muted); }
.overview-box { padding: 1rem; margin-top: .75rem; border-inline-start: .25rem solid var(--teal); border-radius: .65rem; background: var(--teal-soft); }.overview-box strong { color: var(--teal-dark); font-size: .7rem; }.overview-box p { margin: .25rem 0 0; color: var(--text); font-size: .68rem; }
.subject-list { display: grid; gap: .65rem; }.subject-list article { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem; border: 1px solid var(--line-soft); border-radius: .8rem; }.subject-list__icon { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .7rem; color: var(--blue); background: var(--blue-soft); }.subject-list article > div { min-width: 0; flex: 1; }.subject-list article > div > div { display: flex; align-items: center; gap: .5rem; }.subject-list strong { font-size: .72rem; }.subject-list p { margin: .25rem 0 0; color: var(--muted); font-size: .63rem; }
.simple-table { border: 1px solid var(--line-soft); border-radius: .8rem; overflow: hidden; }.simple-table__head, .simple-table > a { display: grid; grid-template-columns: minmax(0, 1fr) 7rem 9rem; gap: .7rem; align-items: center; padding: .65rem .8rem; }.simple-table__head { color: var(--muted); background: var(--canvas); font-size: .58rem; }.simple-table > a { border-top: 1px solid var(--line-soft); font-size: .65rem; }.simple-table > a:hover { background: #fbfdff; }.simple-table b { margin-inline-end: .25rem; color: var(--blue); }.simple-table small { color: var(--muted); }

.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }.review-card { padding: 1.15rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-sm); }.review-card__head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }.review-card__head > div { display: flex; align-items: center; gap: .4rem; }.review-role, .review-recipient { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); font-size: .62rem; font-weight: 700; }.review-role .icon { width: .9rem; }.review-role--student { color: var(--blue); }.review-role--teacher { color: var(--teal-dark); }.review-arrow { color: #adb6bf; }.review-card blockquote { min-height: 4.5rem; padding: .85rem; margin: .8rem 0 .6rem; border: 0; border-radius: .75rem; color: var(--ink); background: var(--canvas); font-size: .72rem; line-height: 1.9; }.attachment-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .5rem; border-radius: .45rem; color: var(--blue); background: var(--blue-soft); font-size: .58rem; }.attachment-chip .icon { width: .8rem; }.review-meta { display: flex; flex-wrap: wrap; gap: .7rem; padding-block: .55rem; color: var(--muted); font-size: .55rem; }.review-actions { display: flex; align-items: stretch; gap: .55rem; padding-top: .65rem; border-top: 1px solid var(--line-soft); }.approve-button { min-height: 2.45rem; padding-inline: .8rem; color: var(--teal-dark); background: var(--teal-soft); }.approve-button:hover { background: #d7f2eb; }.reject-form { display: flex; min-width: 0; flex: 1; }.reject-form input { min-width: 0; padding: .5rem .6rem; flex: 1; border: 1px solid var(--line); border-inline-end: 0; border-radius: 0 .65rem .65rem 0; outline: 0; font-size: .62rem; }.reject-form input:focus { border-color: #df9a92; }.reject-button { min-height: 2.45rem; padding-inline: .7rem; border-radius: .65rem 0 0 .65rem; color: var(--danger); background: var(--danger-soft); }.rejection-reason { padding: .6rem; margin-block: .35rem; border-radius: .6rem; color: var(--danger); background: var(--danger-soft); font-size: .62rem; }.rejection-reason strong { display: block; font-size: .58rem; }

.error-state { display: flex; min-height: 65vh; align-items: center; justify-content: center; flex-direction: column; text-align: center; }.error-code { color: var(--blue-soft); font-size: clamp(5rem, 15vw, 10rem); font-weight: 800; line-height: .85; }.error-icon { display: grid; width: 4rem; height: 4rem; margin-top: -1rem; place-items: center; border-radius: 1rem; color: var(--blue); background: #fff; box-shadow: var(--shadow-md); }.error-state h1 { margin: 1rem 0 .25rem; }.error-state p { max-width: 30rem; margin: 0 0 1rem; color: var(--muted); }

.login-page { min-height: 100vh; background: #fff; }.login-shell { display: grid; grid-template-columns: minmax(25rem, 1.05fr) minmax(25rem, .95fr); min-height: 100vh; }.login-visual { position: relative; display: flex; min-height: 100vh; padding: clamp(2rem, 5vw, 4rem); overflow: hidden; flex-direction: column; color: #fff; background: radial-gradient(circle at 15% 12%, rgba(37,161,142,.28), transparent 27%), radial-gradient(circle at 90% 88%, rgba(1,89,174,.72), transparent 31%), linear-gradient(145deg, #073f6e, #002c57 72%); }.login-brand { position: relative; z-index: 3; display: flex; align-items: center; gap: .8rem; width: fit-content; }.login-brand img { box-shadow: 0 1rem 2rem rgba(0,0,0,.15); border-radius: 1rem; }.login-brand div { display: flex; flex-direction: column; }.login-brand strong { font-size: 1.55rem; line-height: 1.25; }.login-brand span { color: rgba(255,255,255,.57); font-size: .7rem; }.login-visual__copy { position: relative; z-index: 3; max-width: 42rem; margin-block: auto; padding-block: 4rem; }.login-kicker { display: inline-flex; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #c4eee7; background: rgba(37,161,142,.14); font-size: .7rem; font-weight: 700; }.login-visual h1 { margin: 1.25rem 0; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.25; letter-spacing: -.045em; }.login-visual h1 em { color: var(--orange); font-style: normal; }.login-visual__copy > p { max-width: 35rem; color: rgba(255,255,255,.68); font-size: 1rem; line-height: 1.9; }.login-feature-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }.login-feature-row span { display: flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.62); font-size: .68rem; }.login-feature-row b { color: var(--orange); font-size: .6rem; }.visual-card { position: absolute; z-index: 3; display: flex; min-width: 8rem; padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.13); border-radius: .8rem; flex-direction: column; background: rgba(255,255,255,.09); box-shadow: 0 1rem 2rem rgba(0,0,0,.12); backdrop-filter: blur(12px); }.visual-card span { font-size: 1.15rem; font-weight: 800; }.visual-card small { color: rgba(255,255,255,.58); font-size: .55rem; }.visual-card--one { inset-block-end: 8%; inset-inline-start: 8%; }.visual-card--two { inset-block-start: 18%; inset-inline-end: 7%; }.login-orb { position: absolute; border-radius: 50%; }.login-orb--blue { width: 20rem; height: 20rem; inset-block-end: -9rem; inset-inline-end: -7rem; border: 2rem solid rgba(255,255,255,.035); }.login-orb--teal { width: 7rem; height: 7rem; inset-block-start: 12%; inset-inline-start: -3rem; background: rgba(37,161,142,.17); }.login-orb--orange { width: 1.8rem; height: 1.8rem; inset-block-start: 30%; inset-inline-start: 12%; background: var(--orange); }.login-panel { display: grid; padding: 2rem; place-items: center; background: radial-gradient(circle at 90% 10%, var(--blue-soft), transparent 28%), #fff; }.login-form-wrap { width: min(100%, 27rem); }.login-heading { margin-bottom: 1.65rem; }.login-heading__icon { display: none; }.login-heading h2 { margin: 0; font-size: 1.8rem; }.login-heading p { margin: .3rem 0 0; color: var(--muted); }.form-error { padding: .75rem .9rem; margin-bottom: 1rem; border: 1px solid #efc0ba; border-radius: .7rem; color: var(--danger); background: var(--danger-soft); font-size: .7rem; }.login-form { display: flex; flex-direction: column; }.login-form > label { margin-bottom: .35rem; font-size: .68rem; font-weight: 700; }.input-shell { display: flex; align-items: center; min-height: 3.3rem; padding-inline: .8rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #fbfcfe; transition: .18s ease; }.input-shell:focus-within { border-color: #76b0e2; background: #fff; box-shadow: 0 0 0 .25rem rgba(1,89,174,.08); }.input-shell input { min-width: 0; height: 100%; padding: .7rem; flex: 1; border: 0; outline: 0; background: transparent; }.input-icon { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: .45rem; color: var(--blue); background: var(--blue-soft); font-size: .65rem; font-weight: 800; }.password-toggle { padding: .3rem; border: 0; color: var(--blue); background: transparent; font-size: .6rem; font-weight: 700; cursor: pointer; }.login-submit { display: flex; justify-content: center; align-items: center; gap: .55rem; min-height: 3.35rem; margin-top: .25rem; border: 0; border-radius: .8rem; color: #fff; background: var(--blue); box-shadow: 0 .8rem 1.5rem rgba(1,89,174,.2); font-weight: 800; cursor: pointer; transition: .18s ease; }.login-submit:hover { background: var(--blue-dark); transform: translateY(-2px); }.login-submit span { font-size: 1.1rem; }.login-security { display: flex; justify-content: center; align-items: center; gap: .35rem; margin-top: 1.2rem; color: var(--muted); font-size: .6rem; }.login-security span { color: var(--teal); }

@media (max-width: 1220px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .teacher-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .sidebar { transform: translateX(105%); transition: transform .25s ease; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .mobile-close, .menu-button { display: grid; place-items: center; }
  .mobile-overlay { position: fixed; z-index: 25; inset: 0; display: block; visibility: hidden; background: rgba(0,27,52,.48); opacity: 0; transition: .25s ease; }
  .sidebar-open .mobile-overlay { visibility: visible; opacity: 1; }
  .main-area { margin-inline-end: 0; }
  .dashboard-grid, .dashboard-grid--bottom { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { grid-template-columns: repeat(2, minmax(0,1fr)); }.detail-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .login-shell { grid-template-columns: 1fr; }.login-visual { display: none; }.login-panel { min-height: 100vh; }
}
@media (max-width: 720px) {
  .topbar { min-height: 4.4rem; }.topbar__eyebrow, .connection-pill, .admin-chip div { display: none; }.admin-chip { padding-inline-start: .55rem; }.content-wrap { padding: 1rem; }
  .welcome-banner, .page-heading, .detail-hero, .teacher-profile-hero { align-items: flex-start; flex-direction: column; }.welcome-banner > a, .page-heading > a { width: 100%; }.detail-actions { width: 100%; flex-wrap: wrap; }.detail-actions > form { flex: 1; }.detail-actions .secondary-button { width: 100%; }.detail-actions > .quick-actions { margin-inline-start: auto; }
  .filter-bar { align-items: stretch; flex-direction: column; }.search-field { width: 100%; min-width: 0; max-width: none; }.filter-select { width: 100%; }.filter-select select { width: 100%; }.filter-submit { width: 100%; }
  .teacher-grid, .review-grid { grid-template-columns: 1fr; }.detail-side { grid-template-columns: 1fr; }.detail-side > :last-child:nth-child(odd) { grid-column: auto; }
  .simple-table__head { display: none; }.simple-table > a { grid-template-columns: 1fr auto; }.simple-table > a small { grid-column: 1 / -1; }
  .review-actions { align-items: stretch; flex-direction: column; }.review-actions form:first-child button { width: 100%; }
  .profile-avatar { width: 4.1rem; height: 4.1rem; flex-basis: 4.1rem; }.teacher-profile-hero { align-items: center; text-align: center; }.teacher-profile-hero .detail-badges { justify-content: center; }
}
@media (max-width: 520px) {
  .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 7.3rem; }
  .welcome-banner { min-height: 0; }.welcome-banner h1 { font-size: 1.55rem; }
  .info-grid { grid-template-columns: 1fr; }.submission-card { flex-wrap: wrap; }.submission-card > .quick-actions { width: 100%; justify-content: flex-end; }
  .panel { padding: 1rem; }.list-panel { padding: 0; }.app-footer { align-items: center; flex-direction: column; }
  .login-panel { padding: 1.2rem; }.login-heading { text-align: center; }.login-heading__icon { display: grid; width: 3.3rem; height: 3.3rem; margin: 0 auto .7rem; place-items: center; border-radius: 1rem; color: #fff; background: var(--blue); font-size: 1.1rem; font-weight: 800; }
  .review-card__head { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Stable desktop shell: sidebar participates in layout and never overlays content. */
@media (min-width: 981px) {
  .app-shell { display: flex; align-items: flex-start; direction: rtl; }
  .sidebar { position: sticky; inset: auto; top: 0; height: 100vh; min-height: 0; flex: 0 0 var(--sidebar-width); }
  .main-area { min-width: 0; margin: 0; flex: 1 1 auto; direction: rtl; }
}

/* Moderation controls for website teacher profiles */
.danger-button,.mini-danger{border:0;border-radius:.65rem;color:var(--danger);background:var(--danger-soft);font-weight:800;cursor:pointer}.danger-button{min-height:2.6rem;padding:.55rem .8rem}.mini-danger{padding:.35rem .55rem;font-size:.58rem}.status-choice{display:flex;gap:.35rem;flex-wrap:wrap}.status-choice .secondary-button{min-height:2.55rem;padding:.45rem .65rem}.status-choice .is-current{color:#fff;background:var(--blue);opacity:1}.teacher-avatar--photo,.profile-avatar--photo{object-fit:cover}.moderation-fields,.moderation-videos{display:grid;gap:.6rem}.moderation-fields article,.moderation-videos article{display:flex;align-items:flex-start;gap:.75rem;padding:.8rem;border:1px solid var(--line-soft);border-radius:.8rem}.moderation-fields article>div,.moderation-videos article>div{min-width:0;flex:1}.moderation-fields strong,.moderation-videos strong{font-size:.69rem}.moderation-fields p,.moderation-videos p{margin:.2rem 0;color:var(--text);font-size:.63rem;line-height:1.7;white-space:pre-line}.moderation-fields a,.moderation-videos a{color:var(--blue);font-size:.6rem;word-break:break-all}.moderation-videos article>.status{flex:0 0 auto}
@media(max-width:720px){.moderation-videos article{flex-wrap:wrap}.moderation-videos article>div{flex-basis:100%}.status-choice{width:100%}.status-choice form{flex:1}.status-choice button{width:100%}}

.admin-resource-row{display:flex;align-items:center;gap:.45rem;margin:.45rem 0;flex-wrap:wrap}.admin-resource-row .attachment-chip{margin:0}