/* ==========================================================================================================================
   Presentation layer (Phase 6) — ONE stylesheet, loaded LAST on every portal / sign-in page:
     1. the language + theme buttons     2. Profile / Settings page pieces     3. LIGHT theme     4. RTL (Arabic) layer
   It is a controlled OVERRIDE layer on top of the existing (dark, left-to-right) stylesheets — not a rewrite and not a per-language copy.
   Dark is the default and is untouched. The light theme re-defines the existing colour variables and then overrides the (few) dark
   surfaces / light-on-dark text colours, listed below. The RTL layer only mirrors what is physically directional; flex / grid / text
   already follow `dir`, media (logo, photos, video, the player) is never mirrored.
   ========================================================================================================================== */

html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}

/* ---------------------------------------------------------------------------------------------- 1. preference buttons */
.epc-prefs{display:flex;align-items:center;gap:6px;margin-inline-end:8px}
.epc-prefs__btn{min-height:36px;padding:4px 12px;border:1px solid var(--border,rgba(164,179,249,.3));border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .12s ease}
.epc-prefs__btn:hover{background:rgba(164,179,249,.16)}
.epc-prefs__btn:focus-visible{outline:3px solid #8fb0ff;outline-offset:2px}
.epc-prefs--inline{margin:0 8px;flex:none}
.epc-prefs--inline .epc-prefs__btn{color:inherit;min-height:32px;padding:2px 10px;font-size:12px}
.epc-login-nav__menu a,.epc-login-nav__actions a{white-space:nowrap}
.epc-login-nav__actions{flex-wrap:nowrap;align-items:center}
.epc-prefs--floating{position:fixed;z-index:1000;bottom:12px;inset-inline-end:12px;margin:0;padding:4px;border-radius:999px;background:rgba(1,8,38,.7);backdrop-filter:blur(6px);color:#fff}
@media (max-width:780px){.epc-prefs{margin-inline-end:4px;gap:4px}.epc-prefs__btn{min-height:34px;padding:3px 9px;font-size:12px}}
@media (max-width:420px){.epc-prefs__btn{padding:3px 7px}}

/* ------------------------------------------------------------------------------------------ 2. Profile / Settings pieces */
.p6-personal .p6-identity{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.p6-avatar{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#284adc,#8b4df6);color:#fff;font-weight:800;font-size:20px;flex:none}
.p6-name{font-size:20px;overflow-wrap:anywhere}
.p6-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin:0}
.p6-kv{display:grid;gap:2px;margin:0}.p6-kv dt{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.p6-kv dd{margin:0;overflow-wrap:anywhere}
.p6-overall{margin:16px 0 8px}
.p6-form{display:grid;gap:18px;max-width:560px}
.p6-choice{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;display:grid;gap:8px}
.p6-choice legend{padding:0 6px;font-weight:700}
.p6-option{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer}
.p6-option:hover{background:rgba(164,179,249,.12)}
.p6-option input{margin-top:4px;accent-color:#4d7cff}
.p6-option small{display:block;color:var(--muted)}
.p6-option:focus-within{outline:2px solid #8fb0ff}

/* ============================================================================================================ 3. LIGHT THEME */
html[data-theme="light"]{
  --epc-navy:#eef2f9;--navy-2:#e2e9f6;--white:#0f1b3d;--muted:#55627f;--card:#ffffff;--border:rgba(15,27,61,.14);--light-blue:#284adc;
  --shadow:0 10px 30px rgba(15,27,61,.10);--cream:#0f1b3d;
}
html[data-theme="light"] body{background:linear-gradient(135deg,#f4f7fc,#e7edf8);color:#0f1b3d}
html[data-theme="light"] a{color:inherit}
html[data-theme="light"] .dashboard-main a:not([class]){color:#1f3fbf}
html[data-theme="light"] :focus-visible{outline-color:#284adc}
html[data-theme="light"] .skip-link{background:#0f1b3d;color:#fff}

/* logo: the shipped logo is white for the dark sidebar */
/* legacy dark-wordmark tint for the LUMORA logo only: an uploaded Academy logo (data-academy-brand-logo=academy) is an image whose pixels must never be themed */
html[data-theme="light"] .epc-login-brand img:not([data-academy-brand-logo="academy"]),html[data-theme="light"] .brand img:not([data-academy-brand-logo="academy"]),html[data-theme="light"] .mobile-brand img:not([data-academy-brand-logo="academy"]){filter:brightness(.16) saturate(2.2)}

/* sidebar + navigation */
html[data-theme="light"] .dashboard-sidebar{background:#ffffff;border-color:var(--border);box-shadow:4px 0 24px rgba(15,27,61,.06)}
html[data-theme="light"] .side-nav a{color:#33415f}
html[data-theme="light"] .side-nav a:hover{background:rgba(40,74,220,.10);color:#0f1b3d}
html[data-theme="light"] .side-nav a.active{background:linear-gradient(125deg,#315cf8,#284adc);color:#fff}
html[data-theme="light"] .side-nav a.active .nav-soon,html[data-theme="light"] .side-nav a .nav-soon{color:inherit}
html[data-theme="light"] .sidebar-card{background:#f1f5fd;border-color:var(--border)}
html[data-theme="light"] .sidebar-card p{color:var(--muted)}
html[data-theme="light"] .sidebar-card .button{color:#0f1b3d;border-color:rgba(15,27,61,.25);background:#fff}
html[data-theme="light"] .mobile-bottom-nav{background:rgba(255,255,255,.97);border-color:var(--border)}
html[data-theme="light"] .mobile-bottom-nav a,html[data-theme="light"] .mobile-bottom-nav button{color:#44506b}
html[data-theme="light"] .mobile-bottom-nav a.active{color:#284adc}
html[data-theme="light"] .drawer-backdrop:not([hidden]){background:rgba(15,27,61,.45)}
html[data-theme="light"] .icon-button{color:#0f1b3d}
html[data-theme="light"] .dashboard-header h1,html[data-theme="light"] .profile strong{color:#0f1b3d}
html[data-theme="light"] footer{color:var(--muted)}
html[data-theme="light"] .epc-prefs--floating{background:rgba(255,255,255,.85);color:#0f1b3d}

/* surfaces: panels, cards, tables */
html[data-theme="light"] .panel,html[data-theme="light"] .stat-card,html[data-theme="light"] .sl-card,html[data-theme="light"] .p5-card,html[data-theme="light"] .ib-section,
html[data-theme="light"] .pl-nav,html[data-theme="light"] .item-list article,html[data-theme="light"] .epc-denied-card,html[data-theme="light"] .epc-placeholder{background:#ffffff;border-color:var(--border);box-shadow:0 2px 10px rgba(15,27,61,.05)}
html[data-theme="light"] .welcome{background:linear-gradient(110deg,#dfe8ff,#eef3ff);border-color:var(--border);color:#0f1b3d}
html[data-theme="light"] .welcome p,html[data-theme="light"] .page-title p{color:#44506b}
html[data-theme="light"] .pl-stage{background:#ffffff;border-color:var(--border)}
html[data-theme="light"] .cp,html[data-theme="light"] .cp-nav{background:#ffffff}
html[data-theme="light"] .report-grid article,html[data-theme="light"] .action-grid a,html[data-theme="light"] .action-grid button{background:#f4f7fd;color:#0f1b3d;border-color:var(--border)}
html[data-theme="light"] .stat-card p,html[data-theme="light"] .person-list small,html[data-theme="light"] .item-list small,html[data-theme="light"] .item-list time{color:var(--muted)}
html[data-theme="light"] .stat-card strong{color:#0f1b3d}
html[data-theme="light"] .table-wrap tr{background:#f7f9fd}
html[data-theme="light"] th{color:#44506b}
html[data-theme="light"] td{border-color:rgba(15,27,61,.10)}
html[data-theme="light"] .adm-row-click:hover{background:rgba(40,74,220,.08)}
html[data-theme="light"] .table-wrap td::before{color:var(--muted)}
html[data-theme="light"] .adm-state,html[data-theme="light"] .sl-empty,html[data-theme="light"] .adm-muted,html[data-theme="light"] .sl-muted,html[data-theme="light"] .adm-count,
html[data-theme="light"] .adm-foot-note,html[data-theme="light"] .adm-list small,html[data-theme="light"] .adm-cell-main small,html[data-theme="light"] .adm-pagehead p,
html[data-theme="light"] .p5-note,html[data-theme="light"] .p6-kv dt,html[data-theme="light"] .p6-option small,html[data-theme="light"] .pl-section h2 span{color:var(--muted)}
html[data-theme="light"] .adm-state h3,html[data-theme="light"] .sl-empty strong,html[data-theme="light"] .adm-h2{color:#0f1b3d}
html[data-theme="light"] .pl-item{color:#1b2a4d}
html[data-theme="light"] .pl-item.is-current,html[data-theme="light"] .cp-lesson.is-active{background:rgba(40,74,220,.12);border-color:rgba(40,74,220,.4);color:#0f1b3d}
html[data-theme="light"] .cp-lesson{color:#1b2a4d}
html[data-theme="light"] .cp-lesson:hover{background:rgba(40,74,220,.07)}
html[data-theme="light"] .pl-state{background:rgba(15,27,61,.08);color:#33415f}
html[data-theme="light"] .pl-state--open{background:rgba(40,74,220,.14);color:#1f3fbf}
html[data-theme="light"] .pl-state--done{color:#14733a}
html[data-theme="light"] .pl-item .pl-icon{color:#44506b}
html[data-theme="light"] .sl-cover--none{background:linear-gradient(135deg,#c9d8ff,#e8edff 60%,#ffe2c0)}
html[data-theme="light"] .adm-cover{background:#eef2f9}

/* progress bars */
html[data-theme="light"] .sl-progress{background:rgba(15,27,61,.10);border-color:rgba(15,27,61,.10)}
html[data-theme="light"] .sl-progress b{color:#0f1b3d;text-shadow:0 0 3px #fff}

/* forms */
html[data-theme="light"] .adm-field input,html[data-theme="light"] .adm-field select,html[data-theme="light"] .adm-field textarea,
html[data-theme="light"] .adm-search,html[data-theme="light"] .adm-select select,html[data-theme="light"] .search,html[data-theme="light"] .add-course input,
html[data-theme="light"] .add-course textarea,html[data-theme="light"] .add-course select{background:#ffffff;color:#0f1b3d;border-color:rgba(15,27,61,.25)}
html[data-theme="light"] .adm-search input,html[data-theme="light"] .search input{color:#0f1b3d}
html[data-theme="light"] .adm-search,html[data-theme="light"] .search{color:var(--muted)}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#7a86a1}
html[data-theme="light"] .adm-select option,html[data-theme="light"] select option{color:#0f1b3d;background:#fff}
html[data-theme="light"] .adm-field label,html[data-theme="light"] .adm-field>span,html[data-theme="light"] .add-course label{color:#33415f}
html[data-theme="light"] .adm-field small{color:var(--muted)}
html[data-theme="light"] .adm-tabs{background:#ffffff;border-color:var(--border)}
html[data-theme="light"] .adm-tabs button{color:#44506b}
html[data-theme="light"] .adm-tabs button[aria-selected="true"]{background:linear-gradient(135deg,#315cf7,#284adc);color:#fff}
html[data-theme="light"] .adm-tab-count{color:inherit}

/* buttons (primary / green / red / blue keep their coloured fill and white text) */
html[data-theme="light"] .adm-btn:not(.adm-btn--primary):not(.adm-btn--green):not(.adm-btn--red):not(.adm-btn--blue){background:#ffffff;color:#0f1b3d;border-color:rgba(15,27,61,.28)}
html[data-theme="light"] .adm-btn:not(.adm-btn--primary):not(.adm-btn--green):not(.adm-btn--red):not(.adm-btn--blue):hover:not(:disabled){background:#eef2fb}
html[data-theme="light"] .adm-btn:disabled{opacity:.55}
html[data-theme="light"] .button-ghost,html[data-theme="light"] .small-button{background:#ffffff;color:#0f1b3d;border:1px solid rgba(15,27,61,.28)}
html[data-theme="light"] .epc-prefs__btn{border-color:rgba(15,27,61,.28)}
html[data-theme="light"] .epc-prefs__btn:hover{background:rgba(40,74,220,.10)}

/* badges, pills, notices (text darkened for the light background) */
html[data-theme="light"] .adm-badge--blue,html[data-theme="light"] .p5-pill--blue{background:rgba(40,74,220,.12);color:#1f3fbf}
html[data-theme="light"] .adm-badge--amber,html[data-theme="light"] .p5-pill--amber,html[data-theme="light"] .sl-pill--amber{background:rgba(214,140,0,.16);color:#8a5a00}
html[data-theme="light"] .adm-badge--red,html[data-theme="light"] .p5-pill--red,html[data-theme="light"] .sl-pill--red{background:rgba(214,52,71,.13);color:#b3202f}
html[data-theme="light"] .adm-badge--green,html[data-theme="light"] .p5-pill--green,html[data-theme="light"] .sl-pill--green{background:rgba(23,150,74,.14);color:#0f6a35}
html[data-theme="light"] .adm-badge--grey,html[data-theme="light"] .p5-pill,html[data-theme="light"] .sl-pill{background:rgba(15,27,61,.09);color:#33415f}
html[data-theme="light"] .adm-badge--purple{background:rgba(139,77,246,.14);color:#6a2cc0}
html[data-theme="light"] .adm-notice{background:rgba(40,74,220,.07);border-color:rgba(40,74,220,.25);color:#1b2a4d}
html[data-theme="light"] .adm-notice--warn{background:rgba(214,140,0,.10);border-color:rgba(214,140,0,.4);color:#6b4600}
html[data-theme="light"] .adm-notice--error{background:rgba(214,52,71,.08);border-color:rgba(214,52,71,.4);color:#8f1a27}
html[data-theme="light"] .adm-stat-unavail{color:var(--muted)}
html[data-theme="light"] .p5-notif{border-color:var(--border)}
html[data-theme="light"] .p5-notif.is-unread{background:rgba(40,74,220,.07);border-color:rgba(40,74,220,.45)}
html[data-theme="light"] .p5-notif p{color:#33415f}
html[data-theme="light"] .p5-option:hover,html[data-theme="light"] .p6-option:hover{background:rgba(40,74,220,.07)}
html[data-theme="light"] .side-nav .nav-badge{color:#1a1200}

/* modals, drawers, toasts */
html[data-theme="light"] .adm-drawer,html[data-theme="light"] .adm-modal{background:#ffffff;color:#0f1b3d;border-color:var(--border);box-shadow:0 24px 60px rgba(15,27,61,.25)}
html[data-theme="light"] .adm-backdrop.is-open{background:rgba(15,27,61,.5)}
html[data-theme="light"] .adm-layer-x{color:#0f1b3d}
html[data-theme="light"] .adm-layer-head p,html[data-theme="light"] .adm-confirm-text{color:#33415f}
html[data-theme="light"] .adm-section h3{color:#0f1b3d}
html[data-theme="light"] .adm-prose,html[data-theme="light"] .adm-bullets{color:#1b2a4d}
html[data-theme="light"] .adm-kv dt{color:var(--muted)}
html[data-theme="light"] .adm-list li{border-color:var(--border)}
html[data-theme="light"] .adm-empty-inline{color:var(--muted)}

/* builder / preview */
html[data-theme="light"] .ib-crumb,html[data-theme="light"] .ib-crumb a{color:#44506b}
html[data-theme="light"] .ib-section{border-color:var(--border)}
html[data-theme="light"] .ib-num,html[data-theme="light"] .ib-q-num,html[data-theme="light"] .cp-file-icon{background:rgba(40,74,220,.14);color:#1f3fbf}
html[data-theme="light"] .cp-head p,html[data-theme="light"] .cp-desc,html[data-theme="light"] .cp-crumb{color:#33415f}
html[data-theme="light"] .cp-lesson-icon{color:#284adc}
/* the video player stays dark in both themes (it is a video surface); only its surroundings follow the theme */
html[data-theme="light"] .epcp{box-shadow:0 4px 18px rgba(15,27,61,.18)}

/* stat-card tone icons keep their fills; text on them stays white */
html[data-theme="light"] .stat-icon,html[data-theme="light"] .list-icon{color:#fff}

/* ============================================================================================================== 4. RTL LAYER */
/* the shell: sidebar on the right, content margin on the right, drawer slides in from the right */
html[dir="rtl"] .dashboard-sidebar{inset:0 0 0 auto;border-right:0;border-left:1px solid var(--border)}
html[dir="rtl"] body[data-portal="student"] .dashboard-main{margin-left:0;margin-right:238px}
html[dir="rtl"] body[data-portal="admin"] .dashboard-main{margin-left:0;margin-right:230px}
html[dir="rtl"] body[data-portal="instructor"] .dashboard-main{margin-left:0;margin-right:250px}
html[dir="rtl"] .skip-link{left:auto;right:8px}
html[dir="rtl"] .drawer-close,html[dir="rtl"] .notification-button,html[dir="rtl"] .rating,html[dir="rtl"] .side-nav .nav-badge,html[dir="rtl"] .session-list article>b{margin-left:0;margin-right:auto}
html[dir="rtl"] .page-title{margin-right:0;margin-left:auto}
html[dir="rtl"] .avatar{margin-right:0;margin-left:7px}
html[dir="rtl"] .session-list p span{margin-left:0;margin-right:10px}
html[dir="rtl"] .student-list .status{margin-left:0;margin-right:53px}
html[dir="rtl"] .welcome-art i,html[dir="rtl"] .welcome-art span{right:auto;left:15px}
html[dir="rtl"] .earnings-decoration{right:auto;left:18px}
html[dir="rtl"] .notification-button b,html[dir="rtl"] .course-image span{right:auto;left:1px}
html[dir="rtl"] .notification-button{border-left:0;border-right:1px solid var(--border)}
html[dir="rtl"] .side-nav a span{margin:0}
@media (max-width:780px){
  html[dir="rtl"] .dashboard-sidebar{transform:translateX(105%);box-shadow:none}
  html[dir="rtl"] .dashboard-sidebar.open{transform:none;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
  html[dir="rtl"] body[data-portal] .dashboard-main{margin-right:0;margin-left:0}
}
/* tables and text: start-aligned in the reading direction */
html[dir="rtl"] th,html[dir="rtl"] .table-wrap .course-cell,html[dir="rtl"] .pl-item,html[dir="rtl"] .cp-lesson,html[dir="rtl"] .table-wrap td::before{text-align:start}
html[dir="rtl"] .table-wrap td{text-align:end}
@media (min-width:601px){html[dir="rtl"] .table-wrap td{text-align:start}}
/* lists / nested indents */
html[dir="rtl"] .adm-bullets,html[dir="rtl"] .ib-problems,html[dir="rtl"] .ib-checklist ul,html[dir="rtl"] .cp-text ul{padding-left:0;padding-right:20px}
html[dir="rtl"] .ib-checklist ul.ib-checks{padding-right:0}
html[dir="rtl"] .ib-checks li.is-sub{margin-left:0;margin-right:20px}
html[dir="rtl"] .cp-questions{padding-left:0;padding-right:22px}
html[dir="rtl"] .ib-exam{margin-left:0;margin-right:12px}
html[dir="rtl"] .ib-exam::before{left:auto;right:-22px}
html[dir="rtl"] .pl-exam-item{margin-left:0;margin-right:16px}
html[dir="rtl"] .cp-exam-item{margin-left:0;margin-right:18px}
html[dir="rtl"] .cp-exam-item::before{left:auto;right:-10px;border-left:0;border-right:2px solid rgba(164,179,249,.35);border-bottom-left-radius:0;border-bottom-right-radius:6px}
html[dir="rtl"] .cp-nav{border-right:0;border-left:1px solid var(--border)}
html[dir="rtl"] .cp--stacked .cp-nav,html[dir="rtl"] .cp-nav.is-stacked{border-left:0}
/* progress bars fill from the reading start */
html[dir="rtl"] .sl-progress span{inset:0 0 0 auto}
/* drawers open from the right in LTR; from the left in RTL. Toasts follow the reading end. */
html[dir="rtl"] .adm-backdrop{justify-content:flex-start}
html[dir="rtl"] .adm-drawer{margin-left:0;margin-right:auto;border-radius:0 16px 16px 0;transform:translateX(-24px)}
html[dir="rtl"] .adm-backdrop.is-open .adm-drawer{transform:none}
html[dir="rtl"] .adm-toasts{right:auto;left:16px}
@media (max-width:780px){html[dir="rtl"] .adm-toasts{left:16px;right:16px}}
/* forms: text entered in Latin scripts (emails, phones, URLs, codes) stays readable left-to-right while aligning to the start */
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="url"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="password"],html[dir="rtl"] input[type="datetime-local"]{direction:ltr;text-align:right}
html[dir="rtl"] .p6-kv dd[dir="ltr"]{unicode-bidi:plaintext}
/* directional glyphs used as text (← → ›) read correctly when mirrored by the browser's bidi handling; keep breadcrumbs' separators sensible */
html[dir="rtl"] .ib-crumb span[aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}
/* the video player is a media surface: its controls keep their conventional left-to-right timeline */
html[dir="rtl"] .epcp{direction:ltr}
html[dir="rtl"] .epcp .epcp-poster-title,html[dir="rtl"] .epcp .epcp-poster-text,html[dir="rtl"] .epcp .epcp-hint{direction:rtl}
/* sign-in / registration pages: mirror the two-column hero */
html[dir="rtl"] .epc-login-layout,html[dir="rtl"] .epc-register-layout{direction:rtl}