/* GENERATED by tools/build-css.js - do not edit; edit the source files and re-run. */

/* ===== design-system.css ===== */
/* =========================================================
   QIMMA DESIGN SYSTEM — المرحلة 1: توحيد التصميم بالكامل
   Loaded after theme_style.php so brand colors remain dynamic.
   ========================================================= */

:root {
    /* Existing brand/theme tokens are intentionally inherited from style.css + theme_style.php. */
    /* Surfaces */
    --surface: var(--theme-surface,var(--white));
    --surface-soft: var(--surface-soft);
    --surface-muted: var(--surface-muted);

    /* Semantic extensions */
    --text-soft: var(--text-soft);
    --warning: var(--warning);
    --info: var(--info);

    /* Borders & focus */
    --border-strong: var(--border-strong);
    --focus-ring: color-mix(in srgb, var(--primary) 20%, transparent);

    /* Radius */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Shadows */
    --shadow-xs: var(--theme-shadow-xs,0 1px 2px rgba(18,55,45,.04));
    --shadow-sm: var(--theme-shadow-sm,0 4px 12px rgba(18,55,45,.06));
    --shadow-md: var(--theme-shadow-md,0 10px 24px rgba(18,55,45,.08));
    --shadow-lg: var(--theme-shadow-lg,0 18px 40px rgba(18,55,45,.12));

    /* Layout */
    --content-max: 1180px;
    --dashboard-sidebar-width: 250px;
    --header-height: 70px;
    --control-height: 44px;
}

/* ---------- Global normalization ---------- */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: var(--fs-md, 1rem);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--text);
}

.container {
    width: min(100%, var(--content-max));
    padding-inline: var(--space-5);
}

/* ---------- Buttons ---------- */
.btn {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    box-shadow: var(--shadow-xs);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: var(--shadow-sm);
}

.btn-outline {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline:hover {
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-accent:hover {
    filter: brightness(.96);
    box-shadow: var(--shadow-sm);
}

.btn-block {
    min-height: 48px;
}

/* ---------- Inputs / forms ---------- */
.form-group {
    margin-bottom: var(--space-5);
}

.form-group label {
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1.5;
}

.form-control {
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

textarea.form-control {
    min-height: 120px;
    padding-block: var(--space-3);
    resize: vertical;
}

.form-control:hover {
    border-color: var(--border-strong);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
    background: var(--surface);
}

select.form-control {
    cursor: pointer;
}

/* ---------- Alerts ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 13px var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.65;
}

.alert-error {
    background: #fff2f2;
    color: var(--danger);
    border: 1px solid #f2cccc;
}

.alert-success {
    background: #eef9f1;
    color: var(--primary);
    border: 1px solid #c5e7cf;
}

.alert-info {
    background: #eff6fd;
    color: #175d9e;
    border: 1px solid #c9def3;
}

/* ---------- Badges / statuses ---------- */
.badge {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-pending { background: #fff6e5; color: #966000; }
.badge-active,
.badge-paid,
.badge-published { background: #eaf8ef; color: var(--primary); }
.badge-rejected,
.badge-cancelled,
.badge-failed { background: #fff0f0; color: var(--danger); }
.badge-neutral { background: var(--surface-muted); color: var(--muted); }

/* ---------- Cards ---------- */
.course-card,
.stat-card,
.auth-card,
.feature-card,
.feature-card-h,
.profile-form-card,
.profile-hero-card,
.q-card,
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.course-card,
.feature-card,
.feature-card-h,
.q-card,
.card {
    overflow: hidden;
}

.course-card:hover,
.feature-card:hover,
.feature-card-h:hover,
.card-hover:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: var(--shadow-md);
}

.stat-card {
    padding: var(--space-6);
}

/* keep product cards visually stable; only a subtle lift */
.course-card-hover:hover {
    transform: translateY(-3px);
}

.course-card-hover:hover .course-cover-img {
    transform: scale(1.025);
}

/* ---------- Section / page headings ---------- */
.section-title {
    color: var(--primary-dark);
    font-weight: 900;
    line-height: 1.3;
}

.section-title::after {
    width: 44px;
    height: 3px;
    margin-top: 10px;
    border-radius: var(--radius-pill);
}

.dash-topbar {
    margin-bottom: var(--space-7);
    gap: var(--space-4);
}

.dash-main {
    padding: clamp(20px, 3vw, 32px);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-trail {
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    color: var(--muted);
    font-size: var(--fs-sm);
}

.breadcrumb-trail a {
    color: var(--muted);
}

.breadcrumb-trail a:hover {
    color: var(--primary);
}

.breadcrumb-trail .breadcrumb-sep {
    color: var(--border-strong);
}

/* ---------- Data tables ---------- */
table.data-table,
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.data-table th {
    padding: 13px var(--space-4);
    background: var(--surface-soft);
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: 900;
    line-height: 1.5;
}

.data-table td {
    padding: 14px var(--space-4);
    border-bottom: 1px solid var(--surface-muted);
    color: var(--text);
    font-size: var(--fs-sm);
    vertical-align: middle;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 2.5%, var(--surface));
}

/* ---------- Dashboard shell ---------- */
.dash-layout {
    background: var(--bg);
}

.dash-sidebar {
    width: var(--dashboard-sidebar-width);
    background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary-deep) 100%);
}

.dash-sidebar-logo {
    min-height: 82px;
    padding: 16px;
    margin-bottom: 4px;
}

.dash-nav li:nth-child(odd) a,
.dash-nav li:nth-child(even) a {
    background: transparent;
}

.dash-nav a {
    min-height: 46px;
    margin: 2px 10px;
    padding: 0 12px;
    border-inline-start: 3px solid transparent;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.78);
    font-size: var(--fs-sm);
    gap: 11px;
}

.dash-nav a:hover {
    background: rgba(255,255,255,.07);
    color: var(--white);
}

.dash-nav a.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)) !important;
    border-inline-start-color: var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent-on-dark, var(--accent)) !important;
}

.dash-nav .dash-nav-icon svg,
.dash-nav-group-btn svg {
    width: 18px;
    height: 18px;
}

.dash-nav-sub {
    margin-inline: 10px;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.12);
    overflow: hidden;
}

.dash-nav .dash-nav-sub a {
    margin: 0;
    border-radius: 0;
}

.dash-nav-group-btn {
    min-height: 46px;
    margin: 2px 10px;
    padding-inline: 12px;
    border-radius: var(--radius-sm);
    gap: 11px;
    font-size: var(--fs-sm);
}

.dash-nav-group.has-active:not(.open) > .dash-nav-group-btn {
    border-inline-end-color: transparent;
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--radius-sm);
}

.dash-nav-logout {
    min-height: 42px;
    margin: 12px 16px 8px;
    border-radius: var(--radius-sm);
}

/* ---------- Dashboard top bar ---------- */
.dash-top-strip {
    min-height: var(--header-height);
    box-shadow: var(--shadow-xs);
}

.dash-top-strip-app .dash-top-strip-inner,
.dash-top-strip-guest .dash-top-strip-inner {
    min-height: var(--header-height);
    padding-block: 10px;
}

.dash-top-search {
    min-height: 42px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    border-color: var(--border);
}

.dash-top-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.dash-top-icon-btn,
.dash-top-avatar {
    width: 40px;
    height: 40px;
}

.dash-top-icon-btn {
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.dash-top-icon-btn:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    border-color: var(--border-strong);
}

.dash-top-profile {
    min-height: 44px;
    border-inline-start-color: var(--border);
}

.dash-top-profile:hover {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.dash-user-dropdown {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ---------- Footer ---------- */
.site-footer-v2 {
    margin-top: var(--space-10);
}

.footer-grid {
    gap: var(--space-7);
    padding-block: var(--space-9) var(--space-7);
}

.footer-logo img,
.footer-logo svg.q-brand {
    border-radius: var(--radius-xs);
}

/* ---------- Modals ---------- */
.logout-modal-overlay {
    background: rgba(7,46,33,.48);
    backdrop-filter: blur(2px);
}

.logout-modal-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    box-shadow: var(--shadow-lg);
}

/* ---------- Mobile consistency ---------- */
@media (max-width: 900px) {
    :root {
        --dashboard-sidebar-width: 250px;
    }

    .dash-main {
        padding: 20px 16px;
    }

    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 600px) {
    .container {
        padding-inline: 14px;
    }

    .btn {
        min-height: 42px;
        padding-inline: 14px;
    }

    .stat-card {
        padding: 18px;
    }

    .logout-modal-box {
        width: min(92vw, 420px);
        padding: 22px 18px;
    }
}

/* Reduce motion for users who request it. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   QIMMA SHARED EXPERIENCE — المرحلة 1A
   صفحات ومكونات مشتركة: public header/footer, auth, content pages,
   navigation, alerts, typography and responsive rhythm.
   ========================================================= */

:root {
    --q-content-max: 1180px;
    --q-reading-max: 820px;
    --q-form-max: 520px;
    --q-control-radius: 12px;
    --q-card-radius: 18px;
    --q-section-space: clamp(34px, 5vw, 64px);
}

.q-skip-link {
    position: fixed;
    inset-inline-start: 16px;
    top: 12px;
    z-index: 9999;
    transform: translateY(-180%);
    opacity: 0;
    pointer-events: none;
    padding: 10px 14px;
    background: var(--primary-dark);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-weight: 800;
    line-height: 1.35;
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    transition: transform .18s ease, opacity .18s ease;
}
.q-skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    color: var(--white);
    outline: 3px solid color-mix(in srgb, var(--primary) 70%, white);
    outline-offset: 3px;
}

.q-site-body { min-width: 320px; }
.q-main-content { min-height: 60vh; }
.q-flash-container { margin-top: var(--space-4); }
.q-flash-container .alert { margin-bottom: var(--space-3); }

/* Shared page heading */
.q-content-page { padding-block: var(--q-section-space); }
.q-narrow-page { max-width: var(--q-reading-max); margin-inline: auto; }
.q-narrow-page-sm { max-width: var(--q-form-max); }
.q-page-heading { margin-bottom: var(--space-7); }
.q-page-heading h1 { margin: 0; color: var(--primary-dark); font-size: clamp(1.55rem, 2.8vw, 2.15rem); line-height: 1.25; letter-spacing: -.02em; }
.q-page-heading p { margin: 10px 0 0; max-width: 720px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.8; }
.q-page-heading-centered { text-align: center; }
.q-page-heading-centered p { margin-inline: auto; }

/* Search form used on shared search page */
.q-search-form {
    width: min(100%, 720px);
    margin: 0 auto var(--space-7);
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.q-search-form .form-control { min-width: 0; flex: 1; }
.q-search-form .btn { flex: 0 0 auto; }

/* Auth */
.q-auth-page { min-height: calc(100vh - var(--header-height)); align-items: flex-start; padding-top: clamp(36px, 6vw, 72px); padding-bottom: var(--space-9); }
.q-auth-page .auth-card { width: min(100%, 520px); border-radius: var(--q-card-radius); padding: clamp(24px, 4vw, 34px); }
.q-auth-page .auth-card h2 { margin-top: 4px; letter-spacing: -.02em; }
.q-auth-page .auth-card .form-group + .form-group { margin-top: 2px; }
.q-auth-page .auth-footer { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.q-auth-page .auth-card-logo { margin-bottom: var(--space-5); }
.q-auth-page .btn-block { width: 100%; }

/* Public header */
.dash-top-strip-guest { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.dash-top-strip-guest .dash-top-strip-inner { max-width: var(--q-content-max); margin-inline: auto; }
.dash-top-guest-nav { align-items: center; gap: 4px; }
.dash-top-guest-nav a { position: relative; border-radius: 10px; padding: 9px 11px; color: var(--text-soft); font-weight: 800; }
.dash-top-guest-nav a::after { content: ""; position: absolute; inset-inline: 11px; bottom: 4px; height: 2px; border-radius: 99px; background: var(--primary); transform: scaleX(0); transform-origin: center; transition: transform .18s ease; }
.dash-top-guest-nav a:hover { background: var(--surface-soft); color: var(--primary-dark); }
.dash-top-guest-nav a.is-active { color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.dash-top-guest-nav a.is-active::after { transform: scaleX(1); }
.dash-top-logo { flex: 0 0 auto; max-width: 180px; }
.dash-top-logo img, .dash-top-logo svg.q-brand { max-width: 100%; height: 42px; object-fit: contain; }
.dash-top-actions { align-items: center; }
.guest-lang-btn { color: var(--text-soft); font-weight: 800; border-radius: 10px; }
.guest-lang-btn:hover { background: var(--surface-soft); color: var(--primary); }
.guest-login-btn, .guest-register-btn { min-height: 42px; }
.guest-register-icon { font-size: 14px; line-height: 1; }

/* App header */
.dash-top-strip-app { background: var(--surface); border-bottom: 1px solid var(--border); }
.dash-top-strip-app .dash-top-strip-inner { max-width: none; padding-inline: clamp(14px, 2vw, 26px); }


.dash-top-search { flex: 1; max-width: 440px; }
.dash-top-actions { margin-inline-start: auto; }
.dash-top-icon-btn, .dash-top-language { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.dash-top-profile { border-radius: 12px; }

/* Shared sidebar rhythm */
.dash-sidebar { border-inline-end: 1px solid rgba(255,255,255,.08); }
.dash-sidebar-logo { padding-inline: 18px; }
.dash-nav > ul { padding-block: 8px 14px; }
.dash-nav > ul > li { margin-block: 2px; }
.dash-nav a, .dash-nav-group-btn { min-height: 44px; }
.dash-nav-group-btn { width: calc(100% - 20px); color: rgba(255,255,255,.82); background: transparent; border: 1px solid transparent; cursor: pointer; }
.dash-nav-group-btn:hover { background: rgba(255,255,255,.07); color: var(--white); }
.dash-nav-sub { margin-top: 2px; }

/* Footer */
.q-site-footer { border-top: 1px solid rgba(255,255,255,.06); }
.q-site-footer .footer-grid { max-width: var(--q-content-max); margin-inline: auto; }
.q-footer-contact-icon { vertical-align: -2px; margin-inline-end: 5px; opacity: .9; }
.q-site-footer .footer-col h4 { margin-bottom: 12px; }
.q-site-footer .footer-col ul { display: grid; gap: 8px; }
.q-site-footer .footer-col li { line-height: 1.6; }
.q-site-footer .footer-social { margin-top: 14px; }
.q-footer-bottom .container { max-width: var(--q-content-max); margin-inline: auto; }

/* Shared content blocks on policy/help pages */
.q-content-page .section-title { margin-bottom: var(--space-5); }
.q-content-page .card,
.q-content-page .auth-card,
.q-content-page .content-card { border-radius: var(--q-card-radius); }
.q-content-page p, .q-content-page li { line-height: 1.9; }
.q-content-page ul, .q-content-page ol { padding-inline-start: 1.4rem; }

/* Consistent action rows */
.q-action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: var(--space-6); }
.q-action-row-start { justify-content: flex-start; }
.q-action-row-end { justify-content: flex-end; }

/* Generic surface divider */
.q-divider { height: 1px; background: var(--border); border: 0; margin-block: var(--space-6); }

/* Focus consistency */
.dash-top-strip a:focus-visible,
.dash-top-strip button:focus-visible,
.dash-sidebar a:focus-visible,
.dash-sidebar button:focus-visible,
.q-site-footer a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Shared mobile behavior */
@media (max-width: 900px) {
    .dash-top-strip-guest .dash-top-strip-inner { min-height: 64px; }
    .dash-top-guest-nav { order: 5; width: 100%; }
    .q-content-page { padding-block: 34px 48px; }
    .q-page-heading { margin-bottom: 24px; }
    .q-search-form { margin-bottom: 24px; }
}

@media (max-width: 700px) {
    .q-page-heading h1 { font-size: 1.5rem; }
    .q-search-form { flex-direction: column; }
    .q-search-form .btn { width: 100%; }
    .dash-top-actions { gap: 6px; }
    .dash-top-profile-text { display: none; }
    .dash-top-profile { padding-inline: 4px; }
    .dash-top-icon-btn, .dash-top-avatar { width: 38px; height: 38px; }
    .q-site-footer .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .q-auth-page { padding-top: 28px; }
    .q-auth-page .auth-card { border-radius: 16px; box-shadow: var(--shadow-sm); }
    .dash-top-strip-guest .dash-top-strip-inner { gap: 8px; }
    .dash-top-logo { max-width: 140px; }
}

.q-site-footer .q-footer-contact-item { display:flex; align-items:center; gap:4px; }
.q-site-footer .q-footer-contact-item a { color:inherit; }
.q-site-footer .q-footer-contact-item a:hover { color:var(--accent-on-dark,var(--accent)); }

.q-public-main { min-height: 60vh; }


/* ===== shared-pages-v2.css ===== */
/* =========================================================
   QIMMA SHARED PAGES V2 — final shared visual polish
   ========================================================= */
:root{
  --q-border-soft: color-mix(in srgb, var(--border) 74%, transparent);
  --q-surface-hover: color-mix(in srgb, var(--primary) 4%, var(--surface));
  --q-control-h: 46px;
}

/* Page rhythm */
.q-page-intro{margin:0 auto var(--space-7);max-width:700px;text-align:center;color:var(--muted);font-size:var(--fs-sm);line-height:1.9}
.q-shared-card{background:var(--surface);border:1px solid var(--q-border-soft);border-radius:var(--q-card-radius);box-shadow:var(--shadow-sm)}
.q-shared-card:focus-within{border-color:color-mix(in srgb, var(--primary) 42%, var(--border));box-shadow:0 0 0 4px var(--focus-ring),var(--shadow-sm)}
.q-link{color:var(--primary);font-weight:700;text-decoration-thickness:1px;text-underline-offset:3px}
.q-link:hover{color:var(--primary-dark)}
.q-link-strong{font-weight:850}

/* Auth */
.q-auth-page{
  display:flex;
  justify-content:center;
  margin:0 auto;
  padding-block:24px 48px;
  min-height:calc(100vh - var(--header-height));
}
.q-auth-page .auth-card{margin-inline:auto;background:var(--surface);border:1px solid var(--q-border-soft);box-shadow:var(--shadow-md)}

/* Password visibility control — one professional treatment across the platform */
.q-password-field{position:relative;display:block}
.q-password-field .form-control{padding-inline-end:46px}
.q-password-toggle{
  position:absolute;
  inset-inline-end:10px;
  top:calc(50% - 17px);   /* centred without transform: the global button:active rules replace any transform and used to push the eye away from the pointer mid-click */
  width:34px;
  height:34px;
  transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.q-password-toggle:hover{background:var(--surface-muted);color:var(--primary)}
/* the eye must not move while it is pressed (otherwise the click lands on the input below it and nothing happens) */
.q-password-toggle,.q-password-toggle:hover,.q-password-toggle:focus,.q-password-toggle:active{transform:none!important}
.q-password-toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px}
.q-password-toggle svg{width:19px;height:19px;display:block}

/* Keep public pages tight to the shared header; spacing belongs to each section, not the page shell. */
.q-public-main{padding-top:0!important;margin-top:0!important}
.q-auth-page .auth-card h2{font-size:clamp(1.35rem,3vw,1.7rem);color:var(--primary-dark);line-height:1.3;margin-bottom:var(--space-6)}
.q-auth-page .form-group{margin-bottom:18px}
.q-auth-page .form-group label{display:block}
.q-auth-page .form-control{width:100%;min-height:var(--q-control-h)}
.q-form-hint{display:block;margin-top:6px;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}
.q-check-row{display:flex;align-items:flex-start;gap:10px}
.q-check-row input{width:18px;height:18px;flex:0 0 18px;margin-top:3px;accent-color:var(--primary)}
.q-check-label{margin:0!important;font-size:var(--fs-sm);font-weight:550!important;line-height:1.75}
.q-auth-forgot{text-align:end;margin-top:6px}.q-auth-forgot a{color:var(--muted);font-size:var(--fs-sm)}.q-auth-forgot a:hover{color:var(--primary)}
.q-auth-page .auth-footer{text-align:center;color:var(--muted)}
.q-auth-page .auth-footer .q-link{white-space:nowrap}

/* Guest header */
.dash-top-strip-guest{isolation:isolate}
.dash-top-strip-guest .dash-top-strip-inner{position:relative}
.dash-top-logo{display:flex;align-items:center;min-height:44px}
.dash-top-logo img,.dash-top-logo svg.q-brand{max-height:44px}
.dash-top-guest-nav{flex:0 1 auto}
.dash-top-guest-nav a{white-space:nowrap}
.guest-register-btn{gap:7px}
.guest-register-icon{flex:0 0 16px;margin:0;vertical-align:middle}
.guest-menu-toggle{position:relative;z-index:221}
@media(max-width:900px){
  .dash-top-strip-guest .dash-top-strip-inner{flex-wrap:wrap}
  .dash-top-guest-nav{order:10;inset-inline:0;top:100%;width:100%;}
  .dash-top-strip-guest.mobile-open .dash-top-guest-nav{display:flex}
}

/* Forms and action rows */
.q-form-label{display:block;margin-bottom:8px;font-size:var(--fs-sm);font-weight:850;color:var(--text)}
.q-action-row{margin-top:0}
.q-action-row .btn{min-height:40px}

/* Contact */
.q-contact-card{padding:24px clamp(18px,3vw,30px)}
.q-contact-item{margin:0;padding:14px 0;border-bottom:1px solid var(--q-border-soft);font-size:var(--fs-base);line-height:1.75}
.q-contact-item-last{border-bottom:0;padding-bottom:0}
.q-contact-action{margin-top:7px}
.q-empty-inline{text-align:center;color:var(--muted);margin:8px 0}

/* Legal/prose pages */
.q-prose-page{padding-bottom:clamp(48px,7vw,76px)}
.q-prose-page .q-page-heading{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--q-border-soft)}
.q-prose-paragraph{margin:0 0 17px;line-height:2;color:var(--text)}
.q-prose-heading{margin:30px 0 10px;padding-inline-start:12px;border-inline-start:3px solid var(--accent);color:var(--primary-dark);font-size:var(--fs-md);line-height:1.5}

/* Sitemap */
.q-sitemap-card{overflow:hidden;padding:8px 0}
.q-sitemap-list{list-style:none;margin:0;padding:0}
.q-sitemap-list li{border-bottom:1px solid var(--q-border-soft)}
.q-sitemap-list li:last-child{border-bottom:0}
.q-sitemap-link{display:flex;align-items:center;gap:10px;padding:14px 18px;color:var(--text);font-weight:750}
.q-sitemap-link:hover{background:var(--q-surface-hover);color:var(--primary-dark)}
.q-sitemap-arrow{color:var(--primary);font-weight:900}

/* Certificate verification */
.q-v2-page{max-width:var(--q-content-max)}
.q-v2-page-public{max-width:900px}
.q-v2-page-admin{max-width:1100px}
.q-v2-hero{margin-bottom:8px}
.q-v2-hero h1{color:var(--primary-dark)}
.q-certificate-result{padding:clamp(22px,4vw,32px)}
.q-certificate-result h2{color:var(--primary-dark)}
.q-verify-card{padding:22px}
.q-verify-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.q-verify-form .btn{justify-self:start}
.q-verify-admin-section{margin-top:34px}
.q-verify-admin-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.q-section-title{margin:0;color:var(--primary-dark)}
.q-verify-admin-head .q-action-row{gap:8px;margin:0}
.q-table-scroll{overflow-x:auto;border:1px solid var(--q-border-soft);border-radius:var(--radius-md);background:var(--surface)}
.q-table-scroll .data-table{min-width:760px}
.q-nowrap{white-space:nowrap}

/* Shared table polish */
.q-content-page .data-table{border-radius:var(--radius-md);overflow:hidden}
.q-content-page .data-table th{font-weight:850}
.q-content-page .data-table td,.q-content-page .data-table th{padding:12px 14px}

/* Footer */
.q-site-footer{margin-top:var(--space-10)}
.q-site-footer .footer-logo{display:flex;align-items:center;min-height:42px}
.q-site-footer .footer-desc-short{color:rgba(255,255,255,.72)}
.q-site-footer .footer-col ul{margin:0;padding:0;list-style:none}
.q-site-footer .footer-col a{transition:color .18s ease,opacity .18s ease}
.q-site-footer .footer-col a:hover{color:#fff;opacity:.95}
.q-site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.09)}
.q-site-footer .footer-bottom-inner{gap:12px}

/* Mobile shared rhythm */
@media(max-width:700px){
  .q-page-intro{margin-bottom:24px}
  .q-contact-card{padding:18px}
  .q-prose-heading{margin-top:26px}
  .q-verify-admin-head{align-items:flex-start}
  .q-verify-admin-head .q-action-row{width:100%;justify-content:flex-start}
  .q-verify-admin-head .q-action-row .btn{flex:1 1 auto}
}
@media(max-width:480px){
  .q-auth-page{padding-top:18px}
  .q-auth-page .auth-card{padding:20px 16px}
  .q-sitemap-link{padding:13px 14px}
  .q-verify-admin-head .q-action-row .btn{width:100%}
  .q-contact-item{font-size:var(--fs-sm)}
}

/* Final shell normalization: no accidental top gap above shared pages */
html, body { margin: 0; padding: 0; }
.q-site-body { margin: 0; padding: 0; }
.dash-layout, .dash-top-strip { margin-top: 0; }



/* =========================================================
   QIMMA — FINAL TOP EDGE / HEADER RHYTHM
   The first visible platform element must start at the viewport edge.
   Never create a pre-header gap. Content spacing belongs below the header.
   ========================================================= */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
body.q-site-body {
  margin: 0 !important;
  padding: 0 !important;
}
body > .q-skip-link {
  position: fixed !important;
}
body > .dash-layout,
body > .dash-top-strip-guest {
  margin: 0 !important;
  padding: 0 !important;
  inset-block-start: auto !important;
  transform: none !important;
}
.dash-main-col > .dash-top-strip {
  margin-block-start: 0 !important;
}
/* Deliberate breathing room AFTER the header only. */
.dash-main {
  margin-block-start: 0 !important;
  padding-block-start: 36px !important;
}
.q-public-main {
  margin-block-start: 0 !important;
}
.q-auth-page {
  margin-block-start: 0 !important;
  padding-block-start: clamp(28px, 4.5vw, 56px);
}
@media (max-width: 700px) {
  .dash-main { padding-block-start: 24px !important; }
  .q-auth-page { padding-block-start: 24px; }
}


/* ===== shared-dashboard-v3.css ===== */
/* =========================================================
   QIMMA SHARED DASHBOARD V3 — global visual consistency
   Applies to all authenticated dashboards and shared logged-in pages.
   ========================================================= */
.dash-layout{min-height:100vh;background:var(--bg)}
.dash-main-col{min-width:0;min-height:100vh}
.dash-main{
  padding-block:clamp(24px,3vw,36px);
  padding-inline:clamp(16px,2.4vw,32px);
  background:var(--bg);
}
.dash-main > :first-child{margin-top:0}
.dash-top-strip-app{
  box-shadow:0 1px 0 color-mix(in srgb,var(--border) 82%,transparent),0 8px 22px rgba(16,57,45,.035);
}
.dash-top-strip-app .dash-top-strip-inner{min-height:70px}
.dash-top-search{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.dash-top-search:focus-within{
  border-color:color-mix(in srgb,var(--primary) 35%,var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 9%,transparent)
}
.dash-top-icon-btn,.dash-top-language,.dash-top-profile{transition:background .18s ease,color .18s ease,border-color .18s ease}
.dash-top-icon-btn:focus-visible,.dash-top-language:focus-visible,.dash-top-profile:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.dash-nav a,.dash-nav-group-btn{transition:background .18s ease,color .18s ease,border-color .18s ease}
.dash-nav a.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent)}
.dash-nav-sub{border-top:1px solid rgba(255,255,255,.055)}
.logout-modal-box{border:1px solid var(--q-border-soft);box-shadow:0 28px 75px rgba(12,45,34,.24)}
.q-main-content{min-width:0}
@media(max-width:900px){
  .dash-main{padding-block:22px 30px;padding-inline:14px}
  .dash-top-strip-app .dash-top-strip-inner{min-height:64px}
}
@media(max-width:560px){
  .dash-main{padding-inline:12px}
}
/* Same minimum height for the main area in both page layouts. */
.dash-main.q-main-content{min-height:calc(100vh - 72px)}
/* Two-column dashboard area (latest items + side list); one column on small screens. */
.q-dash-two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start;min-width:0}
@media (max-width:900px){.q-dash-two-col{grid-template-columns:minmax(0,1fr)}}
body.teacher-portal-page .q-dash-two-col .q-table-wrap .data-table{min-width:0;width:100%}


/* ===== unified-navigation-v1.css ===== */
/* =========================================================
   QIMMA UNIFIED NAVIGATION V1
   Primary sections stay in the green sidebar.
   Contextual pages move into the horizontal bar below the header.
   ========================================================= */
:root{
  --q-nav-green:var(--theme-sidebar-start,var(--primary-dark));
  --q-nav-green-deep:var(--theme-sidebar-end,var(--primary-deep));
  --q-nav-green-bottom:var(--theme-sidebar-end,var(--primary-deep));
  --q-nav-accent:var(--accent,var(--accent));
  --q-nav-surface:var(--surface,#fff);
  --q-nav-bg:var(--bg,var(--surface-soft));
  --q-nav-border:var(--border,var(--surface-muted));
}

/* Sidebar: primary navigation only */
.dash-sidebar{
  background:linear-gradient(180deg,var(--q-nav-green-deep) 0%,var(--q-nav-green) 52%,var(--q-nav-green-bottom) 100%) !important;
}
.dash-nav > ul{padding-block:10px 16px !important}
.dash-nav-item{margin:2px 10px !important}
.dash-nav-main-link{
  min-height:52px !important;
  height:52px !important;
  padding-inline:14px !important;
  gap:11px !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  color:rgba(255,255,255,.9) !important;
  font-weight:800 !important;
  text-decoration:none !important;
  display:flex !important;
  align-items:center !important;
}
.dash-nav-main-link:hover{
  background:rgba(255,255,255,.075) !important;
  color:#fff !important;
}
.dash-nav-item.is-active .dash-nav-main-link,
.dash-nav-main-link.active{
  background:linear-gradient(90deg,rgba(255,255,255,.035),color-mix(in srgb, var(--accent) 16%, transparent)) !important;
  color:var(--q-nav-accent) !important;
  border-inline-end:3px solid var(--q-nav-accent) !important;
  box-shadow:none !important;
}
.dash-nav-icon{flex:0 0 20px !important;width:20px !important;height:20px !important;display:grid;place-items:center}
.dash-nav-icon svg{display:block !important}
.dash-nav-label{min-width:0;flex:1}
.dash-nav-badge{margin-inline-start:auto !important}

/* Remove legacy nested-navigation presentation completely */
.dash-nav-group,
.dash-nav-group-btn,
.dash-nav-sub{display:none !important}

/* Context bar below header */
.q-context-nav{
  position:relative;
  z-index:50;
  background:var(--q-nav-surface);
  border-bottom:1px solid var(--q-nav-border);
  box-shadow:0 3px 14px rgba(17,56,44,.045);
}
.q-context-nav-inner{
  min-height:76px;
  max-width:1440px;
  margin-inline:auto;
  padding:10px clamp(14px,2.4vw,30px);
  display:flex;
  align-items:center;
  gap:22px;
}
.q-context-nav-heading{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:140px;
  color:var(--primary-dark,var(--primary-dark));
}
.q-context-nav-heading-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  color:var(--primary,var(--primary));
  background:color-mix(in srgb,var(--primary,var(--primary)) 9%,white);
  border:1px solid color-mix(in srgb,var(--primary,var(--primary)) 13%,white);
}
.q-context-nav-heading-icon svg{width:21px;height:21px}
.q-context-nav-heading small{display:block;color:var(--muted,var(--muted-2));font-size:11px;font-weight:700;line-height:1.2;margin-bottom:2px}
.q-context-nav-heading strong{display:block;font-size:14px;font-weight:900;white-space:nowrap}
.q-context-nav-links{
  min-width:0;flex:1;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(7,91,69,.25) transparent;
  padding-block:2px;
}
.q-context-nav-links::-webkit-scrollbar{height:5px}
.q-context-nav-links::-webkit-scrollbar-thumb{background:rgba(7,91,69,.22);border-radius:999px}
.q-context-nav-link{
  flex:0 0 auto;
  min-height:48px;
  padding:0 15px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-soft,var(--muted-2));
  text-decoration:none;
  border:1px solid transparent;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.q-context-nav-link:hover{
  background:var(--surface-soft,#f2f7f4);
  color:var(--primary-dark,var(--primary-dark));
  border-color:var(--q-nav-border);
}
.q-context-nav-link.is-active{
  color:var(--primary,var(--primary));
  background:color-mix(in srgb,var(--primary,var(--primary)) 7%,white);
  border-color:color-mix(in srgb,var(--primary,var(--primary)) 20%,white);
  box-shadow:inset 0 -3px 0 var(--q-nav-accent);
}
.q-context-nav-icon{width:19px;height:19px;display:grid;place-items:center;opacity:.82}
.q-context-nav-link.is-active .q-context-nav-icon{opacity:1}
.q-context-nav-icon svg{width:18px;height:18px}

/* Logged-in pages get a measured gap after the context bar, never above the header. */
.dash-main-col > .dash-main{padding-top:clamp(22px,2.4vw,32px) !important}
.q-context-nav + .dash-main{padding-top:clamp(18px,2vw,28px) !important}

/* Public pages viewed while logged in */
.dash-main-col > .q-public-main,
.dash-main-col > .q-main-content{padding-top:clamp(22px,2.4vw,32px)}

@media(max-width:900px){
  .q-context-nav-inner{min-height:66px;padding:8px 12px;gap:12px}
  .q-context-nav-heading{min-width:44px}
  .q-context-nav-heading > span:last-child{display:none}
  .q-context-nav-heading-icon{width:40px;height:40px}
  .q-context-nav-link{min-height:44px;padding-inline:13px;font-size:12px}
  .dash-nav-main-link{min-height:50px !important;height:50px !important}
}
@media(max-width:560px){
  .q-context-nav-inner{gap:8px}
  .q-context-nav-heading{display:none}
  .q-context-nav-links{width:100%}
  .q-context-nav-link{min-height:42px;padding-inline:12px;gap:7px}
  .dash-main-col > .dash-main,
  .dash-main-col > .q-public-main,
  .dash-main-col > .q-main-content{padding-top:18px !important}
}

@media(prefers-reduced-motion:reduce){
  .dash-nav-main-link,.q-context-nav-link{transition:none !important}
}


/* Shared context actions / embedded AI page */
.q-page-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.q-page-title-row h2{margin:0}
.q-ai-back-btn{flex:0 0 auto}
.q-ai-generator-page .q-plain-header{margin-bottom:20px}
.q-ai-generator-page .feature-card{box-shadow:var(--shadow-sm,0 8px 24px rgba(20,60,48,.05));border:1px solid var(--border,var(--surface-muted))}
@media(max-width:700px){.q-page-title-row{align-items:flex-start}.q-ai-back-btn{width:100%;justify-content:center}}


/* ===== unified-navigation-v2.css ===== */
/* =========================================================
   QIMMA UNIFIED NAVIGATION V2 — final ordering/polish
   This layer only refines navigation grouping, icons and state.
   ========================================================= */

/* The green sidebar is a primary-section navigator; no chevrons/arrows. */
.dash-nav .dash-nav-chevron,
.dash-nav .dash-nav-group-btn::before,
.dash-nav .dash-nav-group-btn::after,
.dash-nav .dash-nav-main-link::before,
.dash-nav .dash-nav-main-link::after{
  display:none !important;
  content:none !important;
}

/* One neutral treatment for primary items; active state carries the visual priority. */
.dash-nav li:nth-child(odd) a,
.dash-nav li:nth-child(even) a{
  background:transparent !important;
}
.dash-nav-item{position:relative}
.dash-nav-main-link{box-shadow:none !important}
.dash-nav-item:not(.is-active) .dash-nav-main-link:hover{
  background:rgba(255,255,255,.075) !important;
}

/* Context navigation: icons are semantic, compact and consistent. */
.q-context-nav-link .q-context-nav-icon svg{
  stroke-linecap:round;
  stroke-linejoin:round;
}
.q-context-nav-link.is-active{
  font-weight:900;
}

/* Keep the context bar horizontally usable without squeezing the first/last items. */
.q-context-nav-links{scroll-padding-inline:10px}

/* Mobile: keep items tap-friendly while allowing natural horizontal scrolling. */
@media (max-width: 700px){
  .q-context-nav-links{gap:5px}
  .q-context-nav-link{min-height:44px}
}


/* ===== unified-navigation-v3.css ===== */
/* QIMMA UNIFIED NAVIGATION V3 — stacked context navigation
   Main section title first, contextual pages second.
   Text-only secondary navigation for a cleaner hierarchy. */
.q-context-nav{
  position:relative;
  z-index:50;
  background:var(--q-nav-surface,#fff);
  border-bottom:1px solid var(--q-nav-border,var(--surface-muted));
  box-shadow:0 3px 14px rgba(17,56,44,.045);
}
.q-context-nav-inner{
  min-height:0;
  max-width:1440px;
  margin-inline:auto;
  padding:18px clamp(16px,2.4vw,32px) 0;
  display:block;
}
.q-context-nav-heading{
  display:block;
  min-width:0;
  margin:0;
  padding:0 0 12px;
  color:var(--primary-dark,var(--primary-dark));
  text-align:start;
}
.q-context-nav-heading strong{
  display:block;
  font-size:clamp(18px,1.55vw,23px);
  line-height:1.3;
  font-weight:950;
  white-space:normal;
  margin:0;
}
.q-context-nav-heading-icon,
.q-context-nav-heading small{display:none !important}
.q-context-nav-links{
  width:100%;
  min-width:0;
  display:flex;
  align-items:stretch;
  gap:4px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(7,91,69,.22) transparent;
  border-top:1px solid rgba(7,91,69,.075);
  padding:5px 0 0;
}
.q-context-nav-link{
  position:relative;
  flex:0 0 auto;
  min-height:48px;
  padding:0 16px;
  border:0;
  border-radius:10px 10px 0 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-soft,var(--muted-2));
  background:transparent;
  text-decoration:none;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.q-context-nav-link:hover{
  color:var(--primary-dark,var(--primary-dark));
  background:var(--surface-soft,#f5f8f6);
}
.q-context-nav-link.is-active{
  color:var(--primary,var(--primary));
  background:color-mix(in srgb,var(--primary,var(--primary)) 6%,white);
  box-shadow:inset 0 -3px 0 var(--q-nav-accent,var(--accent));
}
.q-context-nav-icon{display:none !important}
.q-context-nav-link:focus-visible{
  outline:2px solid var(--primary,var(--primary));
  outline-offset:-2px;
}
@media(max-width:900px){
  .q-context-nav-inner{padding:16px 14px 0}
  .q-context-nav-heading{padding-bottom:10px}
  .q-context-nav-heading strong{font-size:19px}
  .q-context-nav-link{min-height:46px;padding-inline:13px;font-size:12px}
}
@media(max-width:560px){
  .q-context-nav-inner{padding:14px 10px 0}
  .q-context-nav-heading strong{font-size:17px}
  .q-context-nav-links{padding-top:4px}
  .q-context-nav-link{min-height:44px;padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){
  .q-context-nav-link{transition:none !important}
}

/* Compact, consistent tabs for the merged administration + public learning-content section. */
[data-context-nav-group="grp_content"] .q-context-nav-links{gap:2px}
[data-context-nav-group="grp_content"] .q-context-nav-link{min-height:44px;padding-inline:10px;font-size:12px}
@media(max-width:900px){
  [data-context-nav-group="grp_content"] .q-context-nav-link{min-height:42px;padding-inline:9px;font-size:11.5px}
}
@media(max-width:560px){
  [data-context-nav-group="grp_content"] .q-context-nav-links{gap:3px}
  [data-context-nav-group="grp_content"] .q-context-nav-link{min-height:42px;padding-inline:10px;font-size:12px}
}