:root {
--navy: #1E3A8A;
--navy-700: #1f4496;
--navy-50: #EEF3FF;
--blue: #2F6FED;
--blue-100: #dbe6ff;
--blue-200: #1D4ED8;
--gray-bg: #F2F4F7;
--gray2-bg: #F9FAFB;
--border: #D0D5DD;
--border-soft: #F3F4F6;
--text: #1E293B;
--text2: #4B5563;
--text3: #64748B;
--muted: #9CA3AF;
--muted-2: #6B7280;
--white: #fff;
--ok: #22C55E;
--ok-bg: #F0FDF4;
--warn: #F29D00;
--warn2: #EA580C;
--warn-bg: #FFF7ED;
--danger: #B42318;
--danger-bg: #FEF3F2;
--info: #2563EB;
--info-bg: #EFF6FF;
--pending: #7935D3;
--pending-bg: #FAF5FF;
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
--shadow-md: 0 4px 8px -2px rgba(16,24,40,.1),0 2px 4px -2px rgba(16,24,40,.06);
--shadow-lg: 0 12px 24px -6px rgba(16,24,40,.12),0 4px 8px -4px rgba(16,24,40,.07);
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 16px;
--font: 'Dubai';
--sidebar-w: 248px;
}
/* ── SELF-HOSTED: Dubai ─────────────────── */
@font-face {
font-family: 'Dubai';
src: url('/fonts/Dubai/Dubai-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap; /* shows text immediately while font loads */
}
@font-face {
font-family: 'Dubai';
src: url('/fonts/Dubai/Dubai-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Dubai';
src: url('/fonts/Dubai/Dubai-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/**/
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
html, body {
height: 100%
}
body {
font-family: 'Dubai' !important;
color: var(--text);
background: var(--gray-bg);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased
}
body.rtl {
direction: rtl
}
/* Uniform content surface (app-wide): the whole content area uses the gray page
background; cards/panels bring their own white. Overrides the LeptonX theme's
white content wrapper so every page has a single, consistent background. */
.lpx-content-wrapper, .lpx-content-container, .content-wrapper, .main {
background: var(--gray-bg) !important
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none
}
input, select, textarea {
font-family: inherit;
font-size: 14px
}
::-webkit-scrollbar {
width: 10px;
height: 10px
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 8px;
border: 2px solid var(--gray-bg)
}
::-webkit-scrollbar-track {
background: transparent
}
/* ── Top bar ───────────────────────── */
.topbar {
height: 60px;
background: var(--white);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 20px;
gap: 16px;
position: sticky;
top: 0;
z-index: 50
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
color: var(--navy);
font-size: 16px;
letter-spacing: -.02em;
white-space: nowrap
}
.brand .logo-mark {
width: 30px;
height: 30px;
border-radius: 7px;
background: linear-gradient(135deg,var(--navy),var(--blue));
display: grid;
place-items: center;
color: #fff;
font-size: 15px;
font-weight: 800
}
.brand .sub {
color: var(--muted);
font-weight: 600;
font-size: 11px;
border-left: 1px solid var(--border);
padding-left: 10px;
margin-left: 2px
}
.topbar .spacer {
flex: 1
}
.topbar .tb-actions {
display: flex;
align-items: center;
gap: 8px
}
.icon-btn {
width: 38px;
height: 38px;
border-radius: 9px;
display: grid;
place-items: center;
color: var(--muted);
border: 1px solid transparent
}
.icon-btn:hover {
background: var(--gray-bg);
color: var(--navy)
}
.lang-pill {
border: 1px solid var(--border);
border-radius: 9px;
padding: 8px 12px;
font-weight: 700;
color: var(--navy);
font-size: 13px;
display: flex;
gap: 6px;
align-items: center
}
.user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 8px 5px 5px;
border-radius: 30px;
border: 1px solid var(--border)
}
.user-chip:hover {
background: var(--gray-bg)
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg,#2F6FED,#18377E);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-size: 12px
}
.user-chip .nm {
font-weight: 700;
font-size: 13px;
white-space: nowrap
}
.notif-dot {
position: relative
}
.notif-dot::after {
content: '5';
position: absolute;
top: 2px;
right: 3px;
background: var(--danger);
color: #fff;
font-size: 9px;
font-weight: 700;
width: 14px;
height: 14px;
border-radius: 50%;
display: grid;
place-items: center
}
/* ── Program tabs ──────────────────── */
.progtabs {
background: var(--navy);
padding: 0 20px;
display: flex;
align-items: stretch;
gap: 2px;
position: sticky;
z-index: 40;
overflow-x: auto;
scrollbar-width: none
}
.progtabs::-webkit-scrollbar {
display: none
}
.progtab {
padding: 13px 20px;
color: rgba(255,255,255,.62);
font-weight: 700;
font-size: 13.5px;
white-space: nowrap;
border-bottom: 3px solid transparent;
display: flex;
align-items: center;
gap: 9px;
transition: .15s
}
.progtab .pt-ico {
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255,255,255,.12);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 800;
color: #fff
}
.progtab:hover {
color: #fff;
background: rgba(255,255,255,.05)
}
.progtab.active {
color: #fff;
border-bottom-color: var(--blue);
background: rgba(255,255,255,.08)
}
.progtab.active .pt-ico {
background: var(--blue)
}
/* ── Layout ────────────────────────── */
.shell {
display: flex;
min-height: calc(100vh - 60px - 49px)
}
.sidebar {
width: var(--sidebar-w);
background: var(--white);
border-right: 1px solid var(--border);
padding: 16px 12px;
flex-shrink: 0;
overflow-y: auto
}
.side-group {
margin-bottom: 6px
}
.side-label {
font-size: 10.5px;
font-weight: 800;
color: var(--muted-2);
text-transform: uppercase;
letter-spacing: .08em;
padding: 14px 12px 6px
}
.side-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 6px;
color: var(--text2);
font-weight: 500;
font-size: 14px;
margin-bottom: 4px;
border: 1px solid transparent;
cursor: pointer;
}
.side-item .si-ico {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text2 )
}
.side-item:hover {
background: var(--gray-bg)
}
.side-item.active {
background: var(--navy-50);
color: var(--navy);
font-weight: 700;
border-color: #dbe6ff
}
.side-item.active .si-ico {
color: var(--navy)
}
.side-item .si-badge {
margin-left: auto;
background: var(--gray-bg);
color: var(--muted);
font-size: 11px;
font-weight: 700;
padding: 1px 8px;
border-radius: 20px
}
body.rtl .side-item .si-badge {
margin-left: 0;
margin-right: auto
}
.side-item.active .si-badge {
background: #fff;
color: var(--navy)
}
.main {
flex: 1;
padding: 26px 30px;
overflow-x: hidden;
min-width: 0
}
.page-head {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 8px;
flex-wrap: wrap
}
.page-head .breadcrumb {
font-size: 12.5px;
color: var(--muted);
margin-bottom: 6px;
font-weight: 500;
padding: 0;
background: none;
border-radius: 0;
display: block
}
.breadcrumb {
font-size: 12.5px;
color: var(--muted);
margin-bottom: 6px;
font-weight: 500
}
.breadcrumb b {
color: var(--navy)
}
.page-title {
font-size: 25px;
font-weight: 800;
color: var(--navy);
letter-spacing: -.02em
}
.page-sub {
color: var(--muted-2);
font-size: 14px;
max-width: 680px
}
.page-head .ph-actions {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center
}
body.rtl .page-head .ph-actions {
margin-left: 0;
margin-right: auto
}
/* ── Buttons ───────────────────────── */
.btn {
padding: 9px 16px;
border-radius: 9px;
font-weight: 700;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 7px;
transition: .15s;
white-space: nowrap
}
.btn-primary {
background: var(--navy);
color: #fff
}
.btn-primary:hover {
background: var(--navy-700)
}
.btn-ghost {
background: #fff;
border: 1px solid var(--border);
color: var(--text)
}
.btn-ghost:hover {
background: var(--gray-bg)
}
.btn-blue {
background: var(--blue);
color: #fff
}
.btn-blue:hover {
filter: brightness(1.05)
}
.btn-sm {
padding: 6px 11px;
font-size: 12.5px
}
.btn svg {
width: 16px;
height: 16px
}
/* ── Toolbar / search ──────────────── */
.toolbar {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap
}
.search {
flex: 1;
min-width: 200px;
position: relative
}
.search input {
width: 100%;
padding: 10px 14px 10px 40px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
outline: none
}
body.rtl .search input {
padding: 10px 40px 10px 14px
}
.search input:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-100)
}
.search svg {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 17px;
color: var(--muted-2)
}
body.rtl .search svg {
left: auto;
right: 13px
}
.seg-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: 9px;
overflow: hidden
}
.seg-toggle button {
padding: 9px 11px;
color: var(--muted);
display: grid;
place-items: center
}
.seg-toggle button.active {
background: var(--navy-50);
color: var(--navy)
}
.seg-toggle svg {
width: 17px;
height: 17px
}
.filter-pill {
border: 1px solid var(--border);
border-radius: 9px;
padding: 9px 13px;
color: var(--text);
font-weight: 600;
font-size: 13px;
display: flex;
gap: 7px;
align-items: center;
background: #fff
}
.filter-pill svg {
width: 15px;
height: 15px;
color: var(--muted)
}
.filter-pill.active {
background: var(--navy-50);
border-color: #dbe6ff;
color: var(--navy)
}
.filter-pill.active svg {
color: var(--navy)
}
/* ── Cards ─────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(248px,1fr));
gap: 16px
}
.ecard {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow-sm);
transition: .15s;
position: relative
}
.ecard:hover {
box-shadow: var(--shadow-md);
border-color: var(--border);
transform: translateY(-1px)
}
.ecard .ec-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px
}
.ec-ico {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
flex-shrink: 0
}
.ec-ico svg {
width: 18px;
height: 18px
}
.ec-title {
font-weight: 700;
font-size: 15px;
color: var(--text)
}
.ec-kebab {
margin-left: auto;
color: var(--muted-2);
padding: 2px
}
body.rtl .ec-kebab {
margin-left: 0;
margin-right: auto
}
.ec-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 13px
}
.ec-row .lab {
color: var(--muted);
display: flex;
align-items: center;
gap: 7px
}
.ec-row .lab svg {
width: 14px;
height: 14px
}
.ec-row .val {
font-weight: 800;
color: var(--navy);
font-size: 15px
}
/* ── Stat cards ────────────────────── */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
gap: 14px;
margin-bottom: 24px
}
.stat {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
}
.stat .s-ico {
width: 36px;
height: 36px;
border-radius: 9px;
display: grid;
place-items: center;
margin-bottom: 12px
}
.stat .s-ico svg {
width: 19px;
height: 19px
}
.stat .s-val {
font-size: 30px !important;
font-weight: 700;
color: var(--text);
line-height: 36px;
}
.stat .s-lab {
color: var(--muted);
font-size: 10px;
font-weight: 400;
margin-top: 4px;
}
.stat .s-trend {
font-size: 10px;
font-weight: 700;
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 4px
}
.s-trend.up {
color: var(--ok)
}
.s-trend.down {
color: var(--danger)
}
/* ── Tables ────────────────────────── */
.tbl-wrap {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm)
}
table {
width: 100%;
border-collapse: collapse
}
.table thead th {
background: var(--gray2-bg);
text-align: left;
padding: 12px 24px;
font-size: 10px;
font-weight: 700;
color: var(--text3);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap
}
body.rtl thead th {
text-align: right
}
tbody td {
padding: 14px 24px;
font-size: 14px;
vertical-align: middle
}
tbody tr:hover {
background: #fafbfc
}
.cell-strong {
font-weight: 700;
color: var(--text)
}
.cell-with-ava {
display: flex;
align-items: center;
gap: 11px
}
.cell-sub {
color: var(--muted);
font-size: 12px
}
/* ── Badges ────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 700;
white-space: nowrap
}
.badge::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor
}
.b-ok {
background: var(--ok-bg);
color: var(--ok)
}
.b-warn {
background: var(--warn-bg);
color: var(--warn)
}
.b-danger {
background: var(--danger-bg);
color: var(--danger)
}
.b-info {
background: var(--info-bg);
color: var(--info)
}
.b-pending {
background: var(--pending-bg);
color: var(--pending)
}
.b-muted {
background: var(--gray-bg);
color: var(--muted)
}
.badge.no-dot::before {
display: none
}
.perm-chip {
display: inline-block;
padding: 2px 9px;
border-radius: 6px;
background: var(--navy-50);
color: var(--navy);
font-size: 11.5px;
font-weight: 700;
margin: 2px 3px 2px 0
}
/* ── Forms ─────────────────────────── */
.form-card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 26px;
box-shadow: var(--shadow-sm);
max-width: 980px
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 26px
}
.fg-full {
grid-column: 1/-1
}
.field label {
display: block;
font-weight: 700;
font-size: 13px;
color: var(--text);
margin-bottom: 6px
}
.field label .req {
color: var(--danger)
}
.field .hint {
color: var(--muted-2);
font-size: 11.5px;
margin-top: 4px
}
.inp, .sel, .txta {
width: 100%;
padding: 10px 13px;
border: 1px solid var(--border);
border-radius: 9px;
background: #fff;
outline: none;
color: var(--text)
}
.inp:focus, .sel:focus, .txta:focus {
border-color: var(--blue);
box-shadow: 0 0 0 3px var(--blue-100)
}
.inp::placeholder, .txta::placeholder {
color: var(--muted-2)
}
.txta {
resize: vertical;
min-height: 90px
}
.sel {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
padding-right: 36px
}
body.rtl .sel {
background-position: left 11px center;
padding-right: 13px;
padding-left: 36px
}
.file-inp {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--border);
border-radius: 9px;
overflow: hidden
}
.file-inp .fchoose {
background: var(--gray-bg);
padding: 10px 14px;
font-weight: 700;
color: var(--text);
border-right: 1px solid var(--border)
}
.file-inp .fname {
padding: 10px 13px;
color: var(--muted-2)
}
.range-row {
display: flex;
gap: 10px
}
.range-row .inp {
flex: 1
}
.form-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border-soft)
}
body.rtl .form-foot {
justify-content: flex-start
}
.switch {
position: relative;
width: 42px;
height: 24px;
flex-shrink: 0
}
.switch input {
opacity: 0;
width: 0;
height: 0
}
.switch .sl {
position: absolute;
inset: 0;
background: var(--border);
border-radius: 30px;
transition: .2s
}
.switch .sl::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: .2s;
box-shadow: var(--shadow-sm)
}
.switch input:checked + .sl {
background: var(--navy)
}
.switch input:checked + .sl::before {
transform: translateX(18px)
}
.toggle-row {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: #fff;
margin-bottom: 10px
}
.toggle-row .tr-txt {
flex: 1
}
.toggle-row .tr-name {
font-weight: 700;
font-size: 13.5px
}
.toggle-row .tr-desc {
color: var(--muted);
font-size: 12.5px;
margin-top: 2px
}
/* ── Wizard ────────────────────────── */
.wizard-steps {
display: flex;
gap: 0;
margin-bottom: 26px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 6px;
overflow-x: auto;
box-shadow: var(--shadow-sm)
}
.wstep {
flex: 1;
min-width: 120px;
padding: 10px 12px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 9px;
color: var(--muted);
font-weight: 700;
font-size: 12.5px;
white-space: nowrap;
transition: .15s
}
.wstep .wn {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--gray-bg);
color: var(--muted);
display: grid;
place-items: center;
font-size: 11.5px;
flex-shrink: 0
}
.wstep.active {
background: var(--navy-50);
color: var(--navy)
}
.wstep.active .wn {
background: var(--navy);
color: #fff
}
.wstep.done .wn {
background: var(--ok);
color: #fff
}
.wstep.done {
color: var(--text)
}
/* ── Curriculum builder ────────────── */
.curr-module {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
overflow: hidden
}
.cm-head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(0deg,#fafbfc,#fff)
}
.cm-grip {
color: var(--muted-2);
cursor: grab
}
.cm-grip svg {
width: 18px;
height: 18px
}
.cm-num {
width: 26px;
height: 26px;
border-radius: 7px;
background: var(--navy);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 12px
}
.cm-title {
font-weight: 700;
font-size: 14.5px
}
.cm-meta {
color: var(--muted);
font-size: 12px;
margin-top: 1px
}
.cm-actions {
margin-left: auto;
display: flex;
gap: 6px
}
body.rtl .cm-actions {
margin-left: 0;
margin-right: auto
}
.cm-lessons {
padding: 6px 16px 14px 52px;
border-top: 1px solid var(--border-soft)
}
body.rtl .cm-lessons {
padding: 6px 52px 14px 16px
}
.lesson-row {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
border: 1px solid var(--border-soft);
border-radius: 9px;
margin-top: 8px;
background: #fff
}
.lesson-row .lt-ico {
width: 30px;
height: 30px;
border-radius: 7px;
display: grid;
place-items: center;
flex-shrink: 0
}
.lt-video {
background: var(--info-bg);
color: var(--info)
}
.lt-reading {
background: var(--pending-bg);
color: var(--pending)
}
.lt-quiz {
background: var(--warn-bg);
color: var(--warn)
}
.lt-ico svg {
width: 15px;
height: 15px
}
.lesson-row .lr-name {
font-weight: 600;
font-size: 13.5px
}
.lesson-row .lr-meta {
color: var(--muted);
font-size: 12px
}
.lesson-row .lr-actions {
margin-left: auto;
display: flex;
gap: 4px
}
body.rtl .lesson-row .lr-actions {
margin-left: 0;
margin-right: auto
}
.add-inline {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border: 1.5px dashed var(--border);
border-radius: 9px;
color: var(--navy);
font-weight: 700;
font-size: 13px;
margin-top: 8px;
width: 100%;
justify-content: center
}
.add-inline:hover {
background: var(--navy-50);
border-color: var(--blue)
}
.add-inline svg {
width: 16px;
height: 16px
}
/* ── Quiz / question builder ───────── */
.q-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
margin-bottom: 14px;
box-shadow: var(--shadow-sm)
}
.q-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px
}
.q-num {
width: 26px;
height: 26px;
border-radius: 7px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
font-weight: 800;
font-size: 12px
}
.q-type-tag {
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
background: var(--pending-bg);
color: var(--pending)
}
.q-opt {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 13px;
border: 1px solid var(--border-soft);
border-radius: 9px;
margin-top: 8px
}
.q-opt.correct {
border-color: var(--ok);
background: var(--ok-bg)
}
.q-opt .qo-mark {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--border);
flex-shrink: 0;
display: grid;
place-items: center
}
.q-opt.correct .qo-mark {
border-color: var(--ok);
background: var(--ok)
}
.q-opt.correct .qo-mark svg {
width: 12px;
height: 12px;
color: #fff
}
.q-opt .qo-text {
flex: 1;
font-size: 13.5px
}
.q-opt .qo-correct-lab {
font-size: 11px;
font-weight: 700;
color: var(--ok)
}
/* ── Misc ──────────────────────────── */
.section-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 26px 0 14px;
display: flex;
align-items: center;
gap: 8px
}
.section-title:first-child {
margin-top: 0
}
.section-title svg {
width: 18px;
height: 18px;
flex-shrink: 0
}
/* Right-aligned muted counter, e.g. "128 responses" next to a section heading. */
.section-title .section-title-meta {
margin-inline-start: auto;
color: var(--muted);
font-size: 12px;
font-weight: 500
}
.badge svg {
width: 13px;
height: 13px
}
.note {
background: var(--info-bg);
border: 1px solid #b9ddff;
border-radius: 10px;
padding: 13px 16px;
color: var(--info);
font-size: 13px;
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 18px
}
.note svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px
}
.note.warn {
background: var(--warn-bg);
border-color: #fce4b8;
color: var(--warn)
}
.empty {
text-align: center;
padding: 60px 20px;
color: var(--muted)
}
.empty .e-ico {
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--gray-bg);
display: grid;
place-items: center;
margin: 0 auto 16px;
color: var(--muted-2)
}
.empty .e-ico svg {
width: 26px;
height: 26px
}
.empty h3 {
font-size: 16px;
color: var(--text);
margin-bottom: 6px
}
.empty p {
font-size: 13.5px;
max-width: 380px;
margin: 0 auto 16px
}
.kebab {
color: var(--muted-2);
padding: 4px;
border-radius: 6px
}
.kebab:hover {
background: var(--gray-bg);
color: var(--text)
}
.kebab svg {
width: 18px;
height: 18px
}
.pager {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 18px
}
.pager button {
width: 34px;
height: 34px;
border: 1px solid var(--border);
border-radius: 8px;
display: grid;
place-items: center;
color: var(--muted);
background: #fff
}
.pager button:hover {
background: var(--gray-bg)
}
.pager button.active {
background: var(--navy);
color: #fff;
border-color: var(--navy)
}
.counter-card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 16px
}
.counter-card .cc-ico {
width: 44px;
height: 44px;
border-radius: 11px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
flex-shrink: 0
}
.counter-card .cc-ico svg {
width: 22px;
height: 22px
}
.counter-card .cc-body {
flex: 1
}
.counter-card .cc-name {
font-weight: 700;
font-size: 14px
}
.counter-card .cc-desc {
color: var(--muted);
font-size: 12.5px;
margin-top: 2px
}
.counter-card .cc-edit {
display: flex;
align-items: center;
gap: 8px
}
.counter-card .cc-val {
width: 84px;
text-align: center;
font-weight: 800;
font-size: 16px;
color: var(--navy);
padding: 8px;
border: 1px solid var(--border);
border-radius: 9px
}
.counter-card .cc-unit {
color: var(--muted);
font-weight: 600;
font-size: 13px;
min-width: 48px
}
.price-tier {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
margin-bottom: 12px;
box-shadow: var(--shadow-sm)
}
.price-tier .pt-ico {
width: 42px;
height: 42px;
border-radius: 11px;
background: linear-gradient(135deg,var(--navy),var(--blue));
color: #fff;
display: grid;
place-items: center;
flex-shrink: 0;
font-weight: 800
}
.price-tier .pt-body {
flex: 1
}
.price-tier .pt-name {
font-weight: 700;
font-size: 14px
}
.price-tier .pt-sub {
color: var(--muted);
font-size: 12.5px
}
.price-tier .pt-price {
font-size: 20px;
font-weight: 800;
color: var(--navy)
}
.price-tier .pt-price small {
font-size: 12px;
color: var(--muted);
font-weight: 600
}
.doc-row {
display: flex;
align-items: center;
gap: 13px;
padding: 13px 16px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 10px;
margin-bottom: 10px
}
.doc-row .dr-ico {
width: 36px;
height: 36px;
border-radius: 9px;
background: var(--danger-bg);
color: var(--danger);
display: grid;
place-items: center;
flex-shrink: 0
}
.doc-row .dr-ico svg {
width: 18px;
height: 18px
}
.doc-row .dr-body {
flex: 1
}
.doc-row .dr-name {
font-weight: 700;
font-size: 13.5px
}
.doc-row .dr-meta {
color: var(--muted);
font-size: 12px;
margin-top: 1px
}
/* ── Charts ────────────────────────── */
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 16px;
margin-bottom: 24px
}
.chart-card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-sm)
}
.chart-card.span2 {
grid-column: span 2
}
.chart-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px
}
.chart-title {
font-weight: 700;
font-size: 14px;
color: var(--text)
}
.chart-sub {
font-size: 12px;
color: var(--muted)
}
.chart-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
margin-top: 14px
}
.chart-legend .li {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--text2)
}
.chart-legend .li b {
color: var(--text2)
}
.chart-legend .dot {
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0
}
.donut-wrap {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap
}
.donut-center {
font-size: 24px;
line-height: 24px;
font-weight: 700;
fill: var(--text)
}
.donut-center-sub {
font-size: 8px;
font-weight: 700;
fill: var(--muted);
line-height: 12px;
text-transform: uppercase;
}
@media(max-width:720px) {
.chart-card.span2 {
grid-column: span 1
}
}
/* ── Form builder ──────────────────── */
.fb-layout {
display: grid;
grid-template-columns: 230px 1fr;
gap: 18px;
align-items: start
}
.fb-palette {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadow-sm);
position: sticky;
top: 130px
}
.fb-palette h4 {
font-size: 11px;
font-weight: 800;
color: var(--muted-2);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 10px
}
.fb-chip {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border: 1px solid var(--border-soft);
border-radius: 9px;
margin-bottom: 7px;
font-size: 13px;
font-weight: 600;
cursor: grab;
background: #fff
}
.fb-chip:hover {
border-color: var(--blue);
background: var(--navy-50)
}
.fb-chip .fc-ico {
width: 26px;
height: 26px;
border-radius: 7px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
flex-shrink: 0
}
.fb-chip .fc-ico svg {
width: 14px;
height: 14px
}
.fb-canvas {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow-sm)
}
.fb-field {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--border-soft);
border-radius: 10px;
margin-bottom: 10px;
background: #fff;
position: relative
}
.fb-field:hover {
border-color: var(--border)
}
.fb-field .ff-grip {
color: var(--muted-2);
cursor: grab
}
.fb-field .ff-grip svg {
width: 16px;
height: 16px
}
.fb-field .ff-type {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--pending-bg);
color: var(--pending);
display: grid;
place-items: center;
flex-shrink: 0
}
.fb-field .ff-type svg {
width: 16px;
height: 16px
}
.fb-field .ff-body {
flex: 1;
min-width: 0
}
.fb-field .ff-label {
font-weight: 700;
font-size: 13.5px
}
.fb-field .ff-meta {
font-size: 12px;
color: var(--muted);
margin-top: 1px
}
.fb-field .ff-tags {
display: flex;
gap: 5px;
align-items: center
}
.menu-pop {
position: absolute;
right: 12px;
top: 46px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-lg);
padding: 6px;
z-index: 20;
min-width: 180px
}
body.rtl .menu-pop {
right: auto;
left: 12px
}
.menu-pop .mi {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 7px;
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap
}
.menu-pop .mi:hover {
background: var(--gray-bg)
}
.menu-pop .mi.danger {
color: var(--danger)
}
.menu-pop .mi svg {
width: 15px;
height: 15px;
color: var(--muted)
}
.menu-pop .mi.danger svg {
color: var(--danger)
}
.menu-pop .sep {
height: 1px;
background: var(--border-soft);
margin: 4px 0
}
@media(max-width:720px) {
.fb-layout {
grid-template-columns: 1fr
}
.fb-palette {
position: static
}
}
/* ── Program structure tree ────────── */
.mp-block {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden
}
.mp-head {
display: flex;
align-items: center;
gap: 13px;
padding: 16px 18px;
background: linear-gradient(135deg,var(--navy),var(--navy-700));
color: #fff
}
.mp-head .mp-ico {
width: 38px;
height: 38px;
border-radius: 10px;
background: rgba(255,255,255,.15);
display: grid;
place-items: center;
flex-shrink: 0
}
.mp-head .mp-ico svg {
width: 20px;
height: 20px
}
.mp-head .mp-name {
font-weight: 800;
font-size: 16px
}
.mp-head .mp-meta {
font-size: 12px;
opacity: .8;
margin-top: 1px
}
.mp-head .mp-actions {
margin-left: auto;
display: flex;
gap: 8px
}
body.rtl .mp-head .mp-actions {
margin-left: 0;
margin-right: auto
}
.mp-head .mp-actions .btn-ghost {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.2);
color: #fff
}
.mp-cats {
padding: 14px 18px
}
.cat-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-soft);
border-radius: 10px;
margin-bottom: 9px;
background: #fff
}
.cat-row .cr-ico {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
flex-shrink: 0
}
.cat-row .cr-ico svg {
width: 16px;
height: 16px
}
.cat-row .cr-body {
flex: 1
}
.cat-row .cr-name {
font-weight: 700;
font-size: 13.5px
}
.cat-row .cr-meta {
font-size: 12px;
color: var(--muted)
}
.cat-row .cr-count {
background: var(--navy-50);
color: var(--navy);
font-weight: 800;
font-size: 12px;
padding: 3px 11px;
border-radius: 20px
}
/* ── Settings sections ─────────────── */
.set-section {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
overflow: hidden
}
.set-shead {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 18px;
border-bottom: 1px solid var(--border-soft)
}
.set-shead .ss-ico {
width: 34px;
height: 34px;
border-radius: 9px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center
}
.set-shead .ss-ico svg {
width: 17px;
height: 17px
}
.set-shead .ss-name {
font-weight: 800;
font-size: 14.5px
}
.set-shead .ss-master {
margin-left: auto
}
body.rtl .set-shead .ss-master {
margin-left: 0;
margin-right: auto
}
.set-body {
padding: 8px 18px 16px
}
.set-row {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 0;
border-bottom: 1px solid var(--border-soft)
}
.set-row:last-child {
border-bottom: none
}
.set-row .sr-body {
flex: 1
}
.set-row .sr-name {
font-weight: 600;
font-size: 13.5px
}
.set-row .sr-desc {
font-size: 12.5px;
color: var(--muted);
margin-top: 1px
}
.set-row .sr-control {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px
}
.mini-inp {
width: 120px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px
}
.mini-sel {
padding: 7px 28px 7px 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13px;
background: #fff;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center
}
/* ── Counters grouped ──────────────── */
.counter-group {
margin-bottom: 8px
}
.counter-mini-grid {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
gap: 12px
}
.cmini {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 11px;
padding: 14px;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 12px
}
.cmini .cm-ico {
width: 38px;
height: 38px;
border-radius: 9px;
display: grid;
place-items: center;
flex-shrink: 0
}
.cmini .cm-ico svg {
width: 18px;
height: 18px
}
.cmini .cm-body {
flex: 1;
min-width: 0
}
.cmini .cm-name {
font-weight: 700;
font-size: 13px
}
.cmini .cm-edit {
display: flex;
align-items: center;
gap: 6px
}
.cmini .cm-val {
width: 62px;
text-align: center;
font-weight: 800;
font-size: 14px;
color: var(--navy);
padding: 6px;
border: 1px solid var(--border);
border-radius: 8px
}
.cmini .cm-unit {
font-size: 11px;
color: var(--muted);
min-width: 42px
}
.stat-readonly .cm-val {
border: none;
background: var(--gray-bg)
}
/* ── Trip detail / bookings ────────── */
.tab-row {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px
}
.tab-row button {
padding: 10px 16px;
font-weight: 700;
font-size: 13.5px;
color: var(--muted);
border-bottom: 2px solid transparent
}
.tab-row button.active {
color: var(--navy);
border-bottom-color: var(--navy)
}
.cap-bar {
height: 8px;
border-radius: 6px;
background: var(--gray-bg);
overflow: hidden;
margin-top: 6px
}
.cap-bar > span {
display: block;
height: 100%;
border-radius: 6px
}
.mobile-only {
display: none
}
.menu-toggle {
display: none
}
/* ── Responsive ────────────────────── */
@media(max-width:1024px) {
.main {
padding: 22px
}
.form-grid {
grid-template-columns: 1fr
}
}
@media(max-width:860px) {
.sidebar {
position: fixed;
left: 0;
top: 109px;
bottom: 0;
z-index: 45;
transform: translateX(-100%);
transition: .25s;
box-shadow: var(--shadow-lg)
}
body.rtl .sidebar {
left: auto;
right: 0;
transform: translateX(100%)
}
.sidebar.open {
transform: translateX(0)
}
.menu-toggle {
display: grid
}
.brand .sub {
display: none
}
.user-chip .nm {
display: none
}
.scrim {
display: none;
position: fixed;
inset: 109px 0 0;
background: rgba(16,24,40,.4);
z-index: 44
}
.scrim.show {
display: block
}
}
@media(max-width:560px) {
.main {
padding: 16px
}
.page-title {
font-size: 21px
}
.topbar {
padding: 0 14px;
gap: 10px
}
.lang-pill, .topbar .notif-dot {
display: none
}
.card-grid {
grid-template-columns: 1fr
}
.form-card {
padding: 18px
}
}
/* ── Learner View (preview) ────────── */
.lp-frame {
background: linear-gradient(180deg,#eef1f6,#e6eaf1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: inset 0 2px 12px rgba(16,24,40,.05)
}
.lp-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: 18px;
align-items: start
}
.lp-card {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-sm)
}
.lp-player {
background: #0e2138;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg)
}
.lp-stage {
position: relative;
aspect-ratio: 16/9;
background: radial-gradient(620px 300px at 30% 25%,rgba(89,140,196,.30),transparent 60%),linear-gradient(150deg,#21456c,#142a44)
}
.lp-stage::before {
content: '';
position: absolute;
inset: 0;
opacity: .10;
background-image: linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
background-size: 42px 42px;
-webkit-mask-image: radial-gradient(circle at 50% 45%,#000 30%,transparent 75%);
mask-image: radial-gradient(circle at 50% 45%,#000 30%,transparent 75%)
}
.lp-dim {
position: absolute;
inset: 0;
background: rgba(8,18,30,.22)
}
.lp-btl {
position: absolute;
top: 14px;
left: 14px;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
color: #cfe0f3;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
padding: 5px 10px;
border-radius: 30px;
backdrop-filter: blur(8px);
z-index: 3
}
.lp-btr {
position: absolute;
top: 14px;
right: 14px;
font-size: 11px;
font-weight: 600;
color: #dbe7f4;
background: rgba(15,31,51,.45);
border: 1px solid rgba(255,255,255,.12);
padding: 5px 10px;
border-radius: 30px;
z-index: 3
}
.lp-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 44px 14px 14px;
background: linear-gradient(180deg,transparent,rgba(15,31,51,.55) 32%,rgba(15,31,51,.92));
z-index: 4
}
.lp-qcard {
background: #fff;
border-radius: var(--radius);
padding: 14px;
box-shadow: var(--shadow-lg)
}
.lp-qtop {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px
}
.lp-cp {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
color: var(--warn);
background: var(--warn-bg);
border: 1px solid #f0d3a0;
padding: 4px 9px;
border-radius: 30px
}
.lp-q {
font-weight: 700;
font-size: 14px;
margin-bottom: 10px;
color: var(--text)
}
.lp-opts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px
}
.lp-opt {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border: 1.5px solid var(--border-soft);
border-radius: 9px;
font-size: 13px;
font-weight: 500;
color: var(--text);
background: #fff
}
.lp-opt.sel {
border-color: var(--navy);
background: var(--navy-50)
}
.lp-rad {
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid var(--border);
flex-shrink: 0;
display: grid;
place-items: center
}
.lp-opt.sel .lp-rad {
border-color: var(--navy)
}
.lp-opt.sel .lp-rad::after {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--navy)
}
.lp-bar {
background: #11253a;
padding: 11px 14px 12px;
border-top: 1px solid rgba(255,255,255,.05)
}
.lp-tl {
position: relative;
height: 8px;
border-radius: 30px;
background: rgba(255,255,255,.14);
margin-bottom: 11px
}
.lp-tlw {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 79%;
border-radius: 30px;
background: linear-gradient(90deg,#5b9bd8,#a9d0f2)
}
.lp-knob {
position: absolute;
left: 79%;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.45);
transform: translate(-50%,-50%)
}
.lp-pin {
position: absolute;
left: 79%;
top: 50%;
width: 12px;
height: 12px;
background: var(--warn);
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.4);
transform: translate(-50%,-50%) rotate(45deg);
z-index: 2
}
.lp-ctrls {
display: flex;
align-items: center;
gap: 13px;
color: #cdd9e6
}
.lp-ctrls svg {
width: 18px;
height: 18px
}
.lp-time {
font-size: 12px;
font-weight: 600;
color: #aebccb
}
.lp-spd {
font-size: 11px;
font-weight: 700;
border: 1px solid rgba(255,255,255,.16);
padding: 3px 9px;
border-radius: 30px
}
.lp-lec {
padding: 16px 18px
}
.lp-bc {
font-size: 11.5px;
color: var(--muted-2);
font-weight: 600;
margin-bottom: 6px
}
.lp-lec h3 {
font-size: 18px;
font-weight: 800;
color: var(--navy);
letter-spacing: -.01em;
margin-bottom: 6px
}
.lp-lec p {
font-size: 13px;
color: var(--muted);
line-height: 1.6
}
.lp-res {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px
}
.lp-chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
font-weight: 600;
color: var(--navy);
background: var(--navy-50);
border: 1px solid #dbe6ff;
padding: 6px 11px;
border-radius: 30px
}
.lp-chip svg {
width: 13px;
height: 13px
}
.lp-path {
padding: 0
}
.lp-pathh {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 13px;
border-bottom: 1px solid var(--border-soft)
}
.lp-ring {
position: relative;
width: 50px;
height: 50px;
flex-shrink: 0
}
.lp-ring .pc {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 800;
color: var(--navy)
}
.lp-spine {
padding: 6px 16px 16px;
position: relative
}
.lp-sec {
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
color: var(--muted-2);
text-transform: uppercase;
padding: 13px 0 7px 36px
}
.lp-node {
position: relative;
padding: 10px 10px 10px 36px;
border-radius: 9px;
margin-bottom: 7px
}
.lp-node:hover {
background: var(--gray-bg)
}
.lp-ic {
position: absolute;
left: 0;
top: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
border: 2px solid var(--border);
color: var(--muted-2);
z-index: 2
}
.lp-ic svg {
width: 13px;
height: 13px
}
.lp-node::before {
content: '';
position: absolute;
left: 12px;
top: -7px;
width: 2px;
height: 17px;
background: var(--border);
z-index: 1
}
.lp-node.first::before {
display: none
}
.lp-node.done .lp-ic {
background: var(--ok);
border-color: var(--ok);
color: #fff
}
.lp-node.done::before {
background: #bfe3cd
}
.lp-node.active .lp-ic {
background: var(--navy);
border-color: var(--navy);
color: #fff
}
.lp-node.active {
background: var(--navy-50)
}
.lp-node.lock {
opacity: .6
}
.lp-node.quiz .lp-ic {
border-radius: 8px;
background: var(--warn-bg);
border-color: #f0d3a0;
color: var(--warn)
}
.lp-node.quiz.done .lp-ic {
background: var(--ok);
border-color: var(--ok);
color: #fff
}
.lp-nt {
font-weight: 700;
font-size: 13px;
color: var(--text)
}
.lp-node.lock .lp-nt {
color: var(--muted)
}
.lp-nm {
font-size: 11px;
color: var(--muted-2);
margin-top: 2px
}
.lp-sub {
position: relative;
margin: 1px 0 1px 36px;
padding: 6px 10px 6px 24px;
border-left: 2px dashed var(--border);
font-size: 11px;
color: var(--muted);
display: flex;
align-items: center
}
.lp-sub::before {
content: '';
position: absolute;
left: -6px;
top: 50%;
width: 9px;
height: 9px;
background: var(--warn);
border: 2px solid #fff;
transform: translateY(-50%) rotate(45deg)
}
.lp-sub.done::before {
background: var(--ok)
}
.lp-exam {
margin-top: 8px;
padding: 14px;
border-radius: var(--radius);
background: linear-gradient(150deg,var(--navy),var(--navy-700));
color: #dfe9f3;
position: relative;
overflow: hidden
}
.lp-exam .r {
display: flex;
align-items: center;
gap: 11px
}
.lp-exam .sh {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
display: grid;
place-items: center;
color: #fff;
flex-shrink: 0
}
.lp-exam .sh svg {
width: 18px;
height: 18px
}
.lp-exam .et {
font-size: 13.5px;
font-weight: 800;
color: #fff
}
.lp-exam .em {
font-size: 11px;
color: #b7c8da;
margin-top: 1px
}
.lp-exam .bz {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px
}
.lp-exam .b {
font-size: 10px;
font-weight: 700;
color: #dbe7f4;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
padding: 4px 9px;
border-radius: 30px;
display: inline-flex;
align-items: center;
gap: 5px
}
.lp-exam .b svg {
width: 11px;
height: 11px
}
.lp-hero {
background: linear-gradient(135deg,var(--navy),var(--navy-700));
color: #fff;
border-radius: var(--radius-lg);
padding: 20px 22px;
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px
}
.lp-hero h3 {
font-size: 20px;
font-weight: 800;
letter-spacing: -.01em
}
.lp-hero p {
font-size: 13px;
opacity: .85;
margin-top: 3px
}
.lp-tier {
font-size: 11px;
font-weight: 800;
color: #fff;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.22);
padding: 6px 12px;
border-radius: 30px;
white-space: nowrap
}
.lp-stat {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 12px;
margin-bottom: 16px
}
.lp-s {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow-sm)
}
.lp-s .v {
font-size: 24px;
font-weight: 800;
color: var(--navy)
}
.lp-s .l {
font-size: 12px;
color: var(--muted);
font-weight: 600;
margin-top: 3px
}
.lp-cont {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid var(--border-soft);
border-radius: 11px;
margin-bottom: 10px;
background: #fff
}
.lp-cic {
width: 38px;
height: 38px;
border-radius: 9px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
flex-shrink: 0
}
.lp-cic svg {
width: 18px;
height: 18px
}
.lp-prog {
height: 6px;
border-radius: 30px;
background: var(--gray-bg);
overflow: hidden;
margin-top: 5px
}
.lp-prog > span {
display: block;
height: 100%;
border-radius: 30px;
background: linear-gradient(90deg,var(--blue),var(--navy))
}
.lp-bdg {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 8px
}
.lp-b {
text-align: center;
padding: 12px 6px;
border-radius: 11px;
border: 1px solid var(--border-soft);
background: #fff
}
.lp-b.lock {
opacity: .4
}
.lp-bic {
width: 34px;
height: 34px;
border-radius: 50%;
margin: 0 auto 6px;
display: grid;
place-items: center;
background: var(--warn-bg);
color: var(--warn)
}
.lp-bic svg {
width: 17px;
height: 17px
}
.lp-bn {
font-size: 9.5px;
color: var(--muted);
font-weight: 600
}
.lp-cat {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
gap: 14px
}
.lp-cc {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: .15s
}
.lp-cc:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px)
}
.lp-cch {
height: 80px;
background: linear-gradient(135deg,var(--navy),var(--blue));
position: relative
}
.lp-cch::after {
content: '';
position: absolute;
inset: 0;
opacity: .16;
background-image: linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
background-size: 24px 24px
}
.lp-ccb {
padding: 13px 14px
}
.lp-ccb h4 {
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
color: var(--text)
}
.lp-ccb .m {
font-size: 12px;
color: var(--muted)
}
.tab-row button svg {
width: 15px;
height: 15px;
vertical-align: -3px;
margin-right: 3px
}
@media(max-width:980px) {
.lp-grid {
grid-template-columns: 1fr
}
.lp-opts {
grid-template-columns: 1fr
}
.lp-stat {
grid-template-columns: repeat(2,1fr)
}
}
/* ── Flow builder ──────────────────── */
.flow-wrap {
display: grid;
grid-template-columns: 1fr 360px;
gap: 18px;
align-items: start
}
.flow-build {
min-width: 0
}
.fstage {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-soft);
border-radius: 11px;
background: #fff;
margin-bottom: 9px;
box-shadow: var(--shadow-sm)
}
.fstage.section {
background: linear-gradient(0deg,#fafbfc,#fff);
border-color: var(--border)
}
.fst-grip {
color: var(--muted-2);
cursor: grab;
flex-shrink: 0
}
.fst-grip svg {
width: 16px;
height: 16px
}
.fst-ico {
width: 34px;
height: 34px;
border-radius: 9px;
display: grid;
place-items: center;
flex-shrink: 0
}
.fst-ico svg {
width: 17px;
height: 17px
}
.fst-body {
flex: 1;
min-width: 0
}
.fst-name {
font-weight: 700;
font-size: 13.5px
}
.fst-meta {
font-size: 12px;
color: var(--muted);
margin-top: 1px
}
.fst-gate {
display: flex;
align-items: center;
gap: 9px;
font-size: 11.5px;
color: var(--muted);
font-weight: 600;
flex-shrink: 0
}
.fst-actions {
display: flex;
gap: 4px;
flex-shrink: 0
}
.fpal {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px
}
.fpal .chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 700;
color: var(--navy);
background: var(--navy-50);
border: 1px dashed #c3d4f5;
padding: 8px 12px;
border-radius: 9px
}
.fpal .chip svg {
width: 15px;
height: 15px
}
.fpal .chip:hover {
background: #dbe6ff;
border-color: var(--blue)
}
.fpreview-card {
position: sticky;
top: 130px
}
/* ── Learner: proctored exam ───────── */
.lp-cam {
position: relative;
aspect-ratio: 16/10;
border-radius: var(--radius);
overflow: hidden;
background: radial-gradient(380px 220px at 50% 35%,rgba(89,140,196,.28),transparent 60%),linear-gradient(150deg,#21456c,#142a44);
display: grid;
place-items: center
}
.lp-cam-grid {
position: absolute;
inset: 0;
opacity: .10;
background-image: linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
background-size: 34px 34px
}
.lp-cam-face {
width: 96px;
height: 96px;
border-radius: 50%;
border: 2px dashed rgba(255,255,255,.5);
display: grid;
place-items: center;
color: rgba(255,255,255,.85);
z-index: 1
}
.lp-cam-face svg {
width: 54px;
height: 54px
}
.lp-cam-tag {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: #d6ffe6;
background: rgba(6,118,71,.55);
border: 1px solid rgba(255,255,255,.2);
padding: 5px 10px;
border-radius: 30px;
backdrop-filter: blur(6px)
}
.lp-cam-tag svg {
width: 13px;
height: 13px
}
.lp-rec {
position: absolute;
right: 12px;
top: 12px;
z-index: 2;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .04em;
color: #fff;
background: rgba(180,35,24,.85);
padding: 4px 9px;
border-radius: 30px
}
.lp-chk {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
font-size: 13px;
color: var(--text);
border-bottom: 1px solid var(--border-soft)
}
.lp-chk:last-child {
border-bottom: none
}
.lp-chkb {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--border);
flex-shrink: 0;
display: grid;
place-items: center;
color: #fff
}
.lp-chkb.on {
background: var(--ok);
border-color: var(--ok)
}
.lp-chkb svg {
width: 12px;
height: 12px
}
.lp-hud {
display: flex;
flex-wrap: wrap;
gap: 7px
}
.lp-hud-i {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: var(--navy);
background: var(--navy-50);
border: 1px solid #dbe6ff;
padding: 5px 9px;
border-radius: 30px
}
.lp-hud-i svg {
width: 12px;
height: 12px
}
.lp-hud-i.warn {
color: var(--warn);
background: var(--warn-bg);
border-color: #f0d3a0
}
/* ── Learner: webinars / leaderboard / certs ───────── */
.lp-web-badge {
position: absolute;
left: 12px;
top: 12px;
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
color: #fff;
background: rgba(0,0,0,.28);
border: 1px solid rgba(255,255,255,.25);
padding: 4px 9px;
border-radius: 30px;
backdrop-filter: blur(6px)
}
.lp-lead {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 10px;
border-radius: 9px;
margin-bottom: 5px
}
.lp-lead.me {
background: var(--navy-50);
border: 1px solid #dbe6ff
}
.lp-rank {
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11.5px;
font-weight: 800;
background: var(--gray-bg);
color: var(--muted);
flex-shrink: 0
}
.lp-rank.r1 {
background: #fef3c7;
color: #b45309
}
.lp-rank.r2 {
background: #e7eaee;
color: #475467
}
.lp-rank.r3 {
background: #fde7d3;
color: #b54708
}
.lp-cert {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 16px;
box-shadow: var(--shadow-sm)
}
.lp-cert-top {
display: flex;
align-items: flex-start;
gap: 12px
}
.lp-cert-seal {
width: 42px;
height: 42px;
border-radius: 11px;
background: linear-gradient(135deg,var(--navy),var(--blue));
color: #fff;
display: grid;
place-items: center;
flex-shrink: 0
}
.lp-cert-seal svg {
width: 22px;
height: 22px
}
@media(max-width:980px) {
.flow-wrap {
grid-template-columns: 1fr
}
.fpreview-card {
position: static
}
}
/* ── Modals / toast (interactive layer) ───────── */
.btn-danger-solid {
background: var(--danger, #B42318);
border: 1px solid var(--danger, #B42318);
color: #fff
}
.btn-danger-solid:hover,
.btn-danger-solid:focus,
.btn-danger-solid:active {
background: #912018;
border-color: #912018;
color: #fff;
filter: none
}
.modal-scrim {
position: fixed;
inset: 0;
background: rgba(16,24,40,.55);
display: grid;
place-items: center;
z-index: 200;
padding: 20px;
opacity: 0;
transition: .18s;
backdrop-filter: blur(2px)
}
.modal-scrim.show {
opacity: 1
}
.modal-scrim .modal {
background: #fff;
border-radius: var(--radius-lg);
width: 100%;
max-width: 640px;
max-height: 88vh;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
transform: translateY(10px) scale(.99);
transition: .18s
}
.modal-scrim.show .modal {
transform: none
}
.modal-scrim .modal.wide {
max-width: 840px
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-soft);
position: sticky;
top: 0;
background: #fff;
border-radius: var(--radius-lg) var(--radius-lg) 0 0
}
.modal-scrim .modal-title {
font-weight: 800;
font-size: 16.5px;
color: var(--navy);
letter-spacing: -.01em
}
.modal-scrim .modal-body {
padding: 20px;
overflow-y: auto
}
.modal-scrim .modal-body .form-grid {
gap: 16px 22px
}
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 14px 20px;
border-top: 1px solid var(--border-soft)
}
/* Design-system confirmation dialog (used by ndConfirmModal / abp.message.confirm
via adpf-confirm.js). The dialog element must NOT use the class `modal`:
Bootstrap's .modal is position:fixed / top:0 / height:100%, which would pin it to
the viewport's top-left and defeat the scrim's grid centering. Everything the
dialog needs is therefore declared here rather than on `.modal-scrim .modal`. */
.modal-scrim.nd-confirm-scrim {
z-index: 1055
}
.nd-confirm-dialog {
background: #fff;
border-radius: var(--radius-lg);
width: 100%;
max-width: 640px;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-lg);
transform: translateY(10px) scale(.99);
transition: .18s
}
.modal-scrim.nd-confirm-scrim.show .nd-confirm-dialog {
transform: none
}
.nd-confirm-dialog .modal-body {
padding: 20px
}
.nd-confirm-dialog .icon-btn {
width: 34px;
height: 34px;
border: none;
background: transparent;
color: var(--muted);
border-radius: 8px;
display: grid;
place-items: center;
cursor: pointer
}
.nd-confirm-dialog .icon-btn:hover {
background: var(--gray-bg);
color: var(--text)
}
.nd-confirm-body {
display: flex;
gap: 13px;
align-items: flex-start
}
.nd-confirm-icon {
background: var(--danger-bg);
color: var(--danger);
flex-shrink: 0
}
.nd-confirm-icon.is-neutral {
background: var(--navy-50);
color: var(--navy)
}
.nd-confirm-message {
font-size: 13.5px;
color: var(--text);
line-height: 1.55
}
.nd-confirm-hint {
font-size: 13.5px;
color: var(--muted);
line-height: 1.55
}
.nd-confirm-hint:empty {
display: none
}
.nd-confirm-dialog .modal-foot .btn {
cursor: pointer;
box-shadow: none
}
.nd-confirm-dialog .modal-foot .btn svg {
width: 18px;
height: 18px
}
/* Design-system toast (used by abp.notify via adpf-notify.js) */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%,14px);
background: var(--navy);
color: #fff;
padding: 11px 18px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font), 'Dubai', sans-serif;
font-size: 13.5px;
font-weight: 600;
box-shadow: var(--shadow-lg);
z-index: 999999;
opacity: 0;
transition: .24s;
max-width: min(420px, 92vw);
pointer-events: auto;
cursor: pointer;
direction: inherit;
text-align: start
}
.toast.show {
opacity: 1;
transform: translate(-50%,0)
}
.toast svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #7ee0a8
}
.toast.toast-info svg {
color: #93C5FD
}
.toast.toast-warn svg,
.toast.toast-warning svg {
color: #FBBF24
}
.toast.toast-error svg {
color: #FCA5A5
}
.toast.toast-success svg {
color: #7ee0a8
}
/* Hide classic toastr — notifications use .toast above */
#toast-container {
display: none !important
}
/* ── progress bar ─────────────── */
.prog {
height: 8px;
border-radius: 6px;
background: var(--border-soft);
overflow: hidden;
width: 100%
}
.prog > span {
display: block;
height: 100%;
border-radius: 6px;
transition: width .3s
}
.prog.sm {
height: 6px
}
/* ── registered profile ───────── */
.rp-head {
display: flex;
align-items: center;
gap: 16px;
background: var(--navy-50);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 16px 18px
}
.rp-prog {
margin-bottom: 14px
}
.rp-path {
display: flex;
flex-direction: column;
gap: 6px
}
.rp-sec {
font-weight: 800;
color: var(--navy);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: .05em;
margin: 12px 0 2px
}
.rp-step {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
border: 1px solid var(--border-soft);
border-radius: 10px;
background: #fff
}
.rp-step.done {
background: var(--ok-bg);
border-color: #bbf7d0
}
.rp-step.active {
background: var(--info-bg);
border-color: #bae0ff
}
.rp-step.todo {
opacity: .72
}
.rp-dot {
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
flex-shrink: 0;
background: var(--border);
color: #fff
}
.rp-step.done .rp-dot {
background: var(--ok)
}
.rp-step.active .rp-dot {
background: var(--info);
box-shadow: 0 0 0 4px rgba(23,92,211,.16)
}
.rp-dot svg {
width: 13px;
height: 13px
}
.rp-ic {
flex-shrink: 0
}
.rp-ic svg {
width: 17px;
height: 17px
}
.rp-t {
font-weight: 700;
font-size: 13.5px;
color: var(--text)
}
.rp-m {
font-size: 11.5px;
color: var(--muted)
}
.rp-tag {
font-size: 10.5px;
font-weight: 800;
padding: 3px 9px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap
}
.rp-tag.done {
background: var(--ok);
color: #fff
}
.rp-tag.active {
background: var(--info);
color: #fff
}
.rp-tag.todo {
background: var(--gray-bg);
color: var(--muted)
}
@media(max-width:920px) {
.rp-grid {
grid-template-columns: 1fr !important
}
}
/* ── manual review ────────────── */
.rv-route {
display: flex;
align-items: stretch;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 18px
}
.rv-zone {
flex: 1;
min-width: 150px;
border-radius: 12px;
padding: 12px 14px;
border: 1px solid
}
.rv-zone.ok {
background: var(--ok-bg);
border-color: #bbf7d0
}
.rv-zone.warn {
background: var(--warn-bg);
border-color: #fde68a
}
.rv-zone.danger {
background: var(--danger-bg);
border-color: #fecaca
}
.rv-pct {
font-size: 18px;
font-weight: 800;
color: var(--text)
}
.rv-lab {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 13px;
margin-top: 3px
}
.rv-zone.ok .rv-lab {
color: var(--ok)
}
.rv-zone.warn .rv-lab {
color: var(--warn)
}
.rv-zone.danger .rv-lab {
color: var(--danger)
}
.rv-lab svg {
width: 15px;
height: 15px
}
.rv-sub {
font-size: 11.5px;
color: var(--muted);
margin-top: 2px
}
.rv-arrow {
display: flex;
align-items: center;
color: var(--muted-2);
font-weight: 800;
font-size: 18px
}
.rv-card {
display: flex;
align-items: center;
gap: 16px;
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
background: #fff
}
.rv-doc {
width: 46px;
height: 46px;
border-radius: 10px;
background: var(--navy-50);
color: var(--navy);
display: grid;
place-items: center;
flex-shrink: 0
}
.rv-doc svg {
width: 22px;
height: 22px
}
.rv-body {
flex: 1;
min-width: 0
}
.rv-name {
font-weight: 800;
color: var(--navy);
font-size: 14px
}
.rv-meta {
font-size: 12px;
color: var(--muted);
margin-top: 1px
}
.rv-flag {
font-size: 11.5px;
color: var(--warn);
display: flex;
align-items: center;
gap: 5px;
margin-top: 5px
}
.rv-flag svg {
width: 13px;
height: 13px
}
.rv-conf {
text-align: center;
flex-shrink: 0
}
.rv-confnum {
font-size: 20px;
font-weight: 800
}
.rv-acts {
display: flex;
flex-direction: column;
gap: 6px;
flex-shrink: 0;
width: 142px
}
.rv-acts .btn {
justify-content: flex-start
}
@media(max-width:820px) {
.rv-card {
flex-wrap: wrap
}
.rv-acts {
flex-direction: row;
width: auto;
flex-wrap: wrap
}
}
/* ── AI decision band ─────────── */
.ai-band {
display: flex;
height: 36px;
border-radius: 9px;
overflow: hidden;
border: 1px solid var(--border-soft);
width: 100%;
min-width: 260px
}
.ai-seg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: #fff;
min-width: 0;
line-height: 1.15;
padding: 0 4px;
text-align: center;
overflow: hidden
}
.ai-seg small {
font-weight: 600;
opacity: .92;
font-size: 9.5px
}
.ai-seg.danger {
background: var(--danger)
}
.ai-seg.warn {
background: var(--warn)
}
.ai-seg.ok {
background: var(--ok)
}
.fst-actions .kebab[disabled] {
opacity: .3;
pointer-events: none
}
/* ── question options (per-type) ── */
.q-opts-box {
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 12px;
background: var(--gray-bg)
}
.qo-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px
}
.qo-row:last-of-type {
margin-bottom: 0
}
.qo-mark {
width: 16px;
height: 16px;
flex-shrink: 0
}
.qo-match {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px
}
.qo-match .inp {
flex: 1
}
.qo-link {
color: var(--muted-2);
flex-shrink: 0
}
.qo-link svg {
width: 16px;
height: 16px
}
.qo-ord {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--navy);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 12px;
flex-shrink: 0
}
.qo-imgs {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 10px
}
@media(max-width:600px) {
.qo-imgs {
grid-template-columns: repeat(2,1fr)
}
}
.qo-img {
border: 1px solid var(--border);
border-radius: 10px;
padding: 8px;
background: #fff
}
.qo-img.correct {
border-color: var(--ok);
box-shadow: 0 0 0 2px var(--ok-bg)
}
.qo-imgbox {
height: 64px;
border-radius: 8px;
background: var(--gray-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: var(--muted-2);
font-size: 11px
}
.qo-imgbox svg {
width: 20px;
height: 20px
}
.qo-imgmark {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
margin-top: 6px;
color: var(--text)
}
.q-opts-box code {
background: var(--navy-50);
color: var(--navy);
padding: 1px 5px;
border-radius: 4px;
font-size: 12px
}
.rte {
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden
}
.rte-bar {
display: flex;
align-items: center;
gap: 2px;
padding: 5px 6px;
background: var(--gray-bg);
border-bottom: 1px solid var(--border-soft)
}
.rte-bar button {
width: 28px;
height: 26px;
border: none;
background: transparent;
border-radius: 6px;
color: var(--muted);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center
}
.rte-bar button:hover {
background: #fff;
color: var(--navy)
}
.rte-bar button svg {
width: 15px;
height: 15px
}
.rte-sep {
width: 1px;
height: 16px;
background: var(--border);
margin: 0 4px
}
.rte-area {
border: none !important;
border-radius: 0 !important;
min-height: 64px
}
.lec-up {
display: flex;
align-items: center;
gap: 12px;
border: 1.5px dashed var(--border);
border-radius: 10px;
padding: 14px;
color: var(--muted);
background: var(--gray-bg)
}
.lec-up > svg {
width: 26px;
height: 26px;
color: var(--navy);
flex-shrink: 0
}
.scale5 {
display: flex;
gap: 8px;
flex-wrap: wrap
}
.sc-pt {
flex: 1;
min-width: 92px;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 9px;
text-align: center;
background: #fff
}
.sc-n {
display: inline-flex;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--pending-bg);
color: var(--pending);
font-weight: 800;
font-size: 12px;
align-items: center;
justify-content: center;
margin-bottom: 5px
}
.sc-l {
display: block;
font-size: 11.5px;
color: var(--muted);
font-weight: 600;
line-height: 1.25
}
.svq-list {
display: flex;
flex-direction: column;
gap: 8px
}
.svq {
display: flex;
align-items: center;
gap: 10px
}
.svq-n {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--navy-50);
color: var(--navy);
font-weight: 800;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.sdist-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 5px
}
.sdist-l {
width: 118px;
font-size: 12px;
color: var(--muted);
flex-shrink: 0
}
.sdist-bar {
flex: 1;
height: 8px;
background: var(--gray-bg);
border-radius: 5px;
overflow: hidden
}
.sdist-bar span {
display: block;
height: 100%;
background: var(--blue);
border-radius: 5px
}
.sdist-v {
width: 38px;
text-align: right;
font-size: 12px;
font-weight: 700;
color: var(--text)
}
.att-seg {
display: inline-flex;
gap: 6px
}
.att-seg button {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border);
background: #fff;
border-radius: 8px;
padding: 6px 11px;
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
cursor: pointer
}
.att-seg button svg {
width: 14px;
height: 14px
}
.att-seg button.on {
background: var(--ok-bg);
border-color: var(--ok);
color: var(--ok)
}
.att-seg button.off {
background: var(--danger-bg);
border-color: var(--danger);
color: var(--danger)
}
.docprev-img {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--gray-bg);
padding: 30px;
text-align: center;
color: var(--muted)
}
.docprev-img > svg {
width: 54px;
height: 54px;
color: var(--muted-2)
}
.dp-glare {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 12px;
color: var(--warn);
background: var(--warn-bg);
padding: 5px 10px;
border-radius: 8px
}
.dp-glare svg {
width: 14px;
height: 14px
}
.ds-survey {
margin-top: 18px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 16px;
box-shadow: var(--shadow-sm)
}
.ds-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px
}
.ds-head .btn svg {
width: 15px;
height: 15px
}
/* ---- CMS ---- */
.cms-list {
display: flex;
flex-direction: column;
gap: 8px
}
.cms-sec {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 10px 14px;
box-shadow: var(--shadow-sm)
}
.cms-grip {
color: var(--muted-2);
cursor: grab;
display: inline-flex
}
.cms-grip svg {
width: 16px;
height: 16px
}
.cms-ic {
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.cms-ic svg {
width: 18px;
height: 18px
}
.cms-body {
flex: 1;
min-width: 0
}
.cms-name {
font-weight: 700;
font-size: 13.5px;
color: var(--text)
}
.cms-meta {
font-size: 11.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.cms-slides {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
gap: 12px
}
.cms-slide {
display: flex;
gap: 12px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 12px;
box-shadow: var(--shadow-sm)
}
.cms-slide-thumb {
position: relative;
border-radius: 8px;
background: linear-gradient(135deg,var(--navy),var(--blue));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.cms-slide-thumb svg {
width: 22px;
height: 22px;
opacity: .85
}
.cms-slide-thumb.web {
width: 150px;
height: 58px
}
.cms-slide-thumb.mobile {
width: 74px;
height: 96px
}
.cms-slide-tag {
position: absolute;
bottom: 5px;
right: 6px;
font-size: 9.5px;
font-weight: 700;
background: rgba(0,0,0,.35);
padding: 1px 5px;
border-radius: 5px
}
.cms-slide-body {
flex: 1;
min-width: 0
}
.cms-slide-h {
font-weight: 700;
font-size: 13px;
color: var(--text)
}
.cms-slide-s {
font-size: 11.5px;
color: var(--muted);
margin-top: 1px
}
.size-hint {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--info);
background: var(--info-bg);
border-radius: 7px;
padding: 3px 9px;
margin-right: 6px
}
.size-hint svg {
width: 13px;
height: 13px
}
.faq-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--border-soft)
}
.faq-row:last-child {
border-bottom: none
}
.faq-q {
flex: 1;
min-width: 0
}
/* ---- Profile ---- */
.pf-head {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 16px 18px;
box-shadow: var(--shadow-sm)
}
.pf-ava {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--navy);
color: #fff;
font-weight: 800;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.pf-name {
font-weight: 800;
font-size: 17px;
color: var(--text)
}
.pf-id {
font-size: 12px;
color: var(--muted);
display: flex;
align-items: center;
gap: 5px;
margin-top: 2px
}
.pf-id svg {
width: 13px;
height: 13px
}
.pf-alert {
display: flex;
align-items: center;
gap: 12px;
background: var(--warn-bg);
border: 1px solid #FEDF89;
border-radius: 12px;
padding: 12px 16px;
margin-top: 12px
}
.pf-alert > svg {
width: 22px;
height: 22px;
color: var(--warn);
flex-shrink: 0
}
.pf-life {
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 14px 18px;
box-shadow: var(--shadow-sm);
margin-top: 12px
}
.pf-life-h {
font-size: 11px;
font-weight: 800;
color: var(--muted-2);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 12px
}
.pf-steps {
display: flex;
align-items: center;
gap: 6px
}
.pf-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0
}
.pf-dot {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 13px;
background: var(--gray-bg);
color: var(--muted-2);
border: 2px solid var(--border)
}
.pf-dot svg {
width: 16px;
height: 16px
}
.pf-step.done .pf-dot {
background: var(--ok-bg);
color: var(--ok);
border-color: var(--ok)
}
.pf-step.cur .pf-dot {
background: var(--navy);
color: #fff;
border-color: var(--navy)
}
.pf-sl {
font-size: 11.5px;
font-weight: 600;
color: var(--muted)
}
.pf-step.cur .pf-sl {
color: var(--navy);
font-weight: 700
}
.pf-line {
flex: 1;
height: 2px;
background: var(--border);
min-width: 24px
}
/* ---- CMS Home redesign ---- */
.cms-pageset {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg,var(--navy-50),#fff);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 14px 18px;
margin-bottom: 18px
}
.cms-ps-l {
display: flex;
align-items: center;
gap: 12px;
min-width: 0
}
.cms-ps-ic {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--navy);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}
.cms-ps-ic svg {
width: 19px;
height: 19px
}
.cms-ps-t {
font-weight: 800;
font-size: 14.5px;
color: var(--text)
}
.cms-ps-s {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 520px
}
.cms-ps-r {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0
}
.cms-blocks {
display: flex;
flex-direction: column;
gap: 10px
}
.cms-block {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 12px 16px;
box-shadow: var(--shadow-sm);
transition: border-color .15s
}
.cms-block:hover {
border-color: var(--border)
}
.cms-reorder {
display: flex;
flex-direction: column;
gap: 1px
}
.cms-reorder .kebab {
width: 24px;
height: 20px
}
.cms-block-body {
flex: 1;
min-width: 0
}
.cms-block-name {
font-weight: 700;
font-size: 14px;
color: var(--text)
}
.cms-block-sum {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px
}
.cms-block-act {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0
}
.cms-add {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
padding: 14px;
border: 1.5px dashed var(--border);
border-radius: 12px;
background: var(--gray-bg)
}
.cms-add-l {
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
margin-right: 2px
}
.cms-add-btn {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border);
background: #fff;
border-radius: 8px;
padding: 6px 11px;
font-size: 12.5px;
font-weight: 600;
color: var(--navy);
cursor: pointer
}
.cms-add-btn:hover {
background: var(--navy-50);
border-color: var(--navy)
}
.cms-add-btn svg {
width: 14px;
height: 14px
}
/* block thumbnails */
.bthumb {
width: 66px;
height: 46px;
border-radius: 8px;
background: var(--gray-bg);
border: 1px solid var(--border-soft);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px;
position: relative;
overflow: hidden
}
.bt-hero {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
background: linear-gradient(135deg,var(--navy),var(--blue))
}
.bt-hero .bt-bar {
height: 5px;
width: 70%;
background: rgba(255,255,255,.85);
border-radius: 3px
}
.bt-hero .bt-bar.sm {
width: 45%;
background: rgba(255,255,255,.55)
}
.bt-hero .bt-pill {
height: 8px;
width: 30%;
background: #fff;
border-radius: 5px;
margin-top: 2px
}
.bt-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px
}
.bt-grid i {
background: var(--navy-50);
border-radius: 3px;
display: block
}
.bt-gal i {
background: linear-gradient(135deg,var(--blue),var(--pending));
border-radius: 3px;
display: block
}
.bt-gal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px
}
.bt-proc {
gap: 6px
}
.bt-proc i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--navy);
position: relative
}
.bt-proc i + i::before {
content: "";
position: absolute;
left: -6px;
top: 50%;
width: 6px;
height: 2px;
background: var(--border);
transform: translateY(-50%)
}
.bt-text {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px
}
.bt-text span {
height: 4px;
border-radius: 2px;
background: var(--muted-2)
}
.bt-text span:nth-child(1) {
width: 90%
}
.bt-text span:nth-child(2) {
width: 70%
}
.bt-text span:nth-child(3) {
width: 80%
}
.bt-quote {
font-size: 34px;
font-weight: 800;
color: var(--navy);
line-height: 1
}
.bt-stat {
font-size: 16px;
font-weight: 800;
color: var(--ok)
}
.bt-cta {
background: var(--navy-50)
}
.bt-cta .bt-pill {
height: 12px;
width: 60%;
background: var(--navy);
border-radius: 6px
}
.iv-legend {
display: flex;
gap: 18px;
margin: 4px 0 12px;
font-size: 12.5px;
color: var(--muted)
}
.iv-legend i {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 3px;
margin-right: 6px;
vertical-align: -1px;
border: 1px solid
}
.iv-legend i.o {
background: var(--ok-bg);
border-color: #C7EBD3
}
.iv-legend i.b {
background: var(--navy-50);
border-color: #C7D4F2
}
.iv-legend i.d {
background: #F2F4F7;
border-color: #E6E9EF
}
.iv-grid {
display: flex;
flex-wrap: wrap;
gap: 16px
}
.iv-day {
flex: 1 1 240px;
min-width: 240px;
border: 1px solid #E6E9EF;
border-radius: 14px;
padding: 14px;
background: #fff
}
.iv-day-h {
font-weight: 700;
color: var(--navy);
font-size: 13px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 7px
}
.iv-day-h svg {
width: 16px;
height: 16px
}
.iv-col {
display: flex;
flex-direction: column;
gap: 8px
}
.iv-slot {
border: 1px solid #E6E9EF;
border-radius: 9px;
padding: 8px 11px
}
.iv-slot.o {
background: var(--ok-bg);
border-color: #C7EBD3
}
.iv-slot.b {
background: var(--navy-50);
border-color: #C7D4F2
}
.iv-slot.d {
background: #F2F4F7;
border-color: #E6E9EF
}
.iv-slot .t {
font-weight: 700;
font-size: 12.5px;
color: var(--text)
}
.iv-slot .s {
font-size: 11.5px;
color: var(--muted);
margin-top: 2px
}
.iv-sec {
font-size: 14px;
font-weight: 700;
color: var(--navy);
margin: 20px 0 10px
}
table.iv-cal td {
vertical-align: top
}
.iv-chk-row {
display: flex;
flex-wrap: wrap;
gap: 8px
}
.iv-chk {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #E6E9EF;
border-radius: 8px;
padding: 6px 11px;
font-size: 13px;
cursor: pointer
}
/* Helper Utilities */
.mb-12 {
margin-bottom: 12px;
}
.mb-10 {
margin-bottom: 10px;
}
.p-0 {
padding: 0 !important;
}
.p-14 {
padding: 14px !important;
}
.max-w-780 {
max-width: 780px;
}
.max-w-240 {
max-width: 240px;
}
.max-w-260 {
max-width: 260px;
}
.max-w-340 {
max-width: 340px;
}
.flex-gap-4 {
display: flex;
gap: 4px;
}
.flex-wrap-gap-6 {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.flex-wrap-gap-20 {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.align-center-gap-8 {
display: flex;
align-items: center;
gap: 8px;
}
.card-divider-top {
margin-top: 10px;
border-top: 1px solid var(--border-soft);
padding-top: 10px;
}
.card-actions-row {
display: flex;
gap: 6px;
margin-top: 12px;
}
.actions-end {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.w-36 {
width: 36px;
}
.w-40 {
width: 40px;
}
.w-130 {
width: 130px;
}
.w-220 {
width: 220px;
}
.w-140-m-0 {
width: 140px;
margin: 0;
}
.w-240-gray-bg {
width: 240px;
background: var(--gray-bg) !important;
}
.icon-bg-info {
background: var(--info-bg) !important;
color: var(--info) !important;
}
.icon-bg-navy {
background: var(--navy-50) !important;
color: var(--navy) !important;
}
.icon-bg-ok {
background: var(--ok-bg) !important;
color: var(--ok) !important;
}
.icon-bg-pending {
background: var(--pending-bg) !important;
color: var(--pending) !important;
}
.icon-bg-warn {
background: var(--warn-bg) !important;
color: var(--warn) !important;
}
.icon-bg-danger-shrink {
background: var(--danger-bg) !important;
color: var(--danger) !important;
flex-shrink: 0;
}
.opt-row-flex {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.rule-row-flex {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.survey-q-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--border-soft);
}
.notif-channel-label {
display: flex;
align-items: center;
gap: 9px;
font-weight: 600;
font-size: 13px;
}
.user-email-text {
font-size: 12.5px;
color: var(--text);
margin: 4px 0;
word-break: break-all;
}
.learner-path-heading {
font-weight: 800;
color: var(--navy);
font-size: 15px;
}
.learner-path-sub {
font-size: 11.5px;
color: var(--muted-2);
font-weight: 600;
margin-top: 2px;
}
.form-card-dashed {
max-width: none;
padding: 14px;
box-shadow: none;
border-style: dashed;
}
.form-card-p16 {
max-width: none;
padding: 16px;
}
.form-card-p18 {
max-width: none;
padding: 18px;
}
.form-card-p6-16 {
max-width: none;
padding: 6px 16px;
}
.form-card-p14-16 {
max-width: none;
padding: 14px 16px;
}
.tbl-wrap .table > thead {
background-color: var(--gray-bg);
}
.tbl-wrap .dataTables_wrapper .dataTables_scroll th {
text-align: start;
padding: 11px 16px;
font-size: 11.5px;
font-weight: 800;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
border: none;
}
/* Busy overlay: transparent (no gray bar); dots on ::before only. */
.abp-block-area,
.abp-block-area.abp-block-area-busy {
background: transparent !important;
background-color: transparent !important;
opacity: 1 !important;
box-shadow: none !important;
border: none !important;
color: transparent !important;
font-size: 0 !important;
}
.abp-block-area.abp-block-area-busy::after {
content: none !important;
display: none !important;
visibility: hidden !important;
font-size: 0 !important;
color: transparent !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
.abp-block-area.abp-block-area-busy::before {
content: "" !important;
display: block !important;
width: 12px !important;
height: 12px !important;
max-width: none !important;
border: none !important;
border-radius: 50% !important;
background: var(--blue) !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
box-shadow: -22px 0 var(--blue), 22px 0 var(--blue) !important;
animation: abpDotFlashing 0.6s infinite alternate !important;
}
@keyframes abpDotFlashing {
0% { background: color-mix(in srgb, var(--blue) 25%, transparent); box-shadow: -22px 0 var(--blue), 22px 0 color-mix(in srgb, var(--blue) 25%, transparent); }
50% { background: var(--blue); box-shadow: -22px 0 color-mix(in srgb, var(--blue) 25%, transparent), 22px 0 color-mix(in srgb, var(--blue) 25%, transparent); }
100% { background: color-mix(in srgb, var(--blue) 25%, transparent); box-shadow: -22px 0 color-mix(in srgb, var(--blue) 25%, transparent), 22px 0 var(--blue); }
}
.rtl .modal-footer {
flex-direction: row-reverse;
justify-content: flex-start;
}