/*
 * Unqud theme layer on top of Tabler (https://tabler.io, MIT).
 * Loaded after tabler(.rtl).min.css. Keep this file small: brand tokens,
 * the application shell, and a bridge so legacy --unq-* variables follow Tabler.
 */

@font-face {
    font-family: "Alexandria";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/unqud/alexandria-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/unqud/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-bs-theme="light"] {
    /* Brand: taken from the Unqud logo. */
    --unq-brand: #8f4bd8;
    --unq-brand-rgb: 143, 75, 216;
    --unq-brand-accent: #9bdc28;

    /* Neutral graphite for marks; the sidebar follows the page theme. */
    --unq-graphite: #111113;
    --unq-sidebar-bg: #ffffff;
    --unq-sidebar-border: #e6e7eb;
    --unq-sidebar-fg: #3f3f46;
    --unq-sidebar-muted: #71717a;
    --unq-sidebar-hover: rgba(var(--unq-brand-rgb), 0.06);
    --unq-sidebar-active-bg: rgba(var(--unq-brand-rgb), 0.1);
    --unq-sidebar-active-fg: #5b2a91;
    --unq-sidebar-line: #ececf0;

    --tblr-primary: var(--unq-brand);
    --tblr-primary-rgb: var(--unq-brand-rgb);
    --tblr-primary-fg: #ffffff;
    --tblr-primary-text-emphasis: #5b2a91;
    --tblr-primary-bg-subtle: #f3ecfb;
    --tblr-primary-border-subtle: #dcc6f3;
    --tblr-link-color: #7a3cc2;
    --tblr-link-color-rgb: 122, 60, 194;
    --tblr-link-hover-color: #5b2a91;
    --tblr-link-hover-color-rgb: 91, 42, 145;
    --tblr-border-active-color: var(--unq-brand);

    --tblr-font-sans-serif: "Inter", "Alexandria", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);

    /* Same tokens for the LeptonX/Bootstrap pieces still rendered by ABP. */
    --bs-primary: var(--unq-brand);
    --bs-primary-rgb: var(--unq-brand-rgb);
    --bs-link-color: var(--tblr-link-color);
    --bs-link-hover-color: var(--tblr-link-hover-color);
    --lpx-primary: var(--unq-brand);
}

html[lang^="ar"],
[dir="rtl"] {
    --tblr-font-sans-serif: "Alexandria", "Inter", "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --bs-font-sans-serif: var(--tblr-font-sans-serif);
    --bs-body-font-family: var(--tblr-font-sans-serif);
}

[data-bs-theme="dark"] {
    /* Neutral graphite dark mode (zinc scale) instead of Tabler's default grays. */
    --tblr-body-bg: #09090b;
    --tblr-body-bg-rgb: 9, 9, 11;
    --tblr-bg-surface: #111113;
    --tblr-bg-surface-secondary: #18181b;
    --tblr-bg-surface-tertiary: #1f1f23;
    --tblr-bg-forms: #111113;
    --tblr-border-color: #27272a;
    --tblr-border-color-translucent: rgba(255, 255, 255, 0.08);
    --tblr-body-color: #e4e4e7;
    --tblr-body-color-rgb: 228, 228, 231;
    --tblr-emphasis-color: #fafafa;
    --tblr-heading-color: #fafafa;
    --tblr-secondary-color: #a1a1aa;
    --tblr-tertiary-color: #71717a;
    --tblr-active-bg: rgba(255, 255, 255, 0.06);

    --tblr-primary: #a774e6;
    --tblr-primary-rgb: 167, 116, 230;
    --tblr-link-color: #bb94ec;
    --tblr-link-color-rgb: 187, 148, 236;
    --tblr-link-hover-color: #d2b7f3;
    --tblr-link-hover-color-rgb: 210, 183, 243;
    --bs-primary: #a774e6;
    --bs-primary-rgb: 167, 116, 230;
}

/* Dark mode: the sidebar turns graphite together with the page. */
html[data-bs-theme="dark"] {
    --unq-sidebar-bg: #0c0c0e;
    --unq-sidebar-border: #27272a;
    --unq-sidebar-fg: rgba(255, 255, 255, 0.82);
    --unq-sidebar-muted: rgba(255, 255, 255, 0.55);
    --unq-sidebar-hover: rgba(255, 255, 255, 0.05);
    --unq-sidebar-active-bg: rgba(255, 255, 255, 0.08);
    --unq-sidebar-active-fg: #ffffff;
    --unq-sidebar-line: rgba(255, 255, 255, 0.08);
}

.unq-logo-on-dark,
html[data-bs-theme="dark"] .unq-logo-on-light {
    display: none !important;
}

html[data-bs-theme="dark"] .unq-logo-on-dark {
    display: inline-block !important;
}

/*
 * Legacy bridge: pages still reference --unq-admin-* and --unq-* tokens.
 * Pointing them at Tabler keeps every page on one palette in light and dark.
 */
:root,
[data-bs-theme] {
    --unq-admin-canvas: var(--tblr-body-bg);
    --unq-admin-surface: var(--tblr-bg-surface);
    --unq-admin-surface-rgb: var(--tblr-body-bg-rgb, 255, 255, 255);
    --unq-admin-surface-raised: var(--tblr-bg-surface);
    --unq-admin-surface-muted: var(--tblr-bg-surface-secondary);
    --unq-admin-text: var(--tblr-body-color);
    --unq-admin-text-strong: var(--tblr-emphasis-color);
    --unq-admin-text-muted: var(--tblr-secondary-color);
    --unq-admin-muted: var(--tblr-secondary-color);
    --unq-admin-subtle: var(--tblr-tertiary-color);
    --unq-admin-border: var(--tblr-border-color);
    --unq-admin-border-strong: var(--tblr-border-color-translucent);
    --unq-admin-primary: var(--tblr-primary);
    --unq-admin-primary-hover: var(--tblr-primary-darken);
    --unq-admin-primary-soft: var(--tblr-primary-lt);
    --unq-admin-violet: var(--tblr-primary);
    --unq-admin-coral: var(--tblr-orange);
    --unq-admin-success: var(--tblr-success);
    --unq-admin-warning: var(--tblr-warning);
    --unq-admin-danger: var(--tblr-danger);
    --unq-admin-info: var(--tblr-info);
    --unq-admin-shadow: var(--tblr-box-shadow);
    --unq-admin-shadow-xs: none;
    --unq-admin-shadow-sm: var(--tblr-box-shadow-sm);
    --unq-admin-shadow-md: var(--tblr-box-shadow);
    --unq-admin-shadow-float: var(--tblr-box-shadow-lg);
    --unq-admin-radius: var(--tblr-border-radius);
    --unq-admin-radius-sm: var(--tblr-border-radius);
    --unq-admin-radius-md: var(--tblr-border-radius-lg);
    --unq-admin-radius-lg: var(--tblr-border-radius-lg);
    --unq-admin-transition: 150ms ease;
    --unq-admin-header-height: 3.5rem;

    --unq-ink: var(--tblr-body-color);
    --unq-ink-strong: var(--tblr-emphasis-color);
    --unq-muted: var(--tblr-secondary-color);
    --unq-subtle: var(--tblr-tertiary-color);
    --unq-canvas: var(--tblr-body-bg);
    --unq-surface: var(--tblr-bg-surface);
    --unq-surface-soft: var(--tblr-bg-surface-secondary);
    --unq-line: var(--tblr-border-color);
    --unq-line-strong: var(--tblr-border-color-translucent);
    --unq-primary-50: var(--tblr-primary-lt);
    --unq-primary-100: var(--tblr-primary-lt);
    --unq-primary-200: var(--tblr-primary-200);
    --unq-primary-500: var(--tblr-primary);
    --unq-primary-600: var(--tblr-primary);
    --unq-primary-700: var(--tblr-primary-darken);
    --unq-primary-800: var(--tblr-primary-darken);
    --unq-navy: var(--unq-graphite);
    --unq-sky: var(--tblr-azure);
    --unq-amber: var(--tblr-warning);
    --unq-success: var(--tblr-success);
    --unq-danger: var(--tblr-danger);
    --unq-shadow-xs: none;
    --unq-shadow-sm: var(--tblr-box-shadow-sm);
    --unq-shadow-md: var(--tblr-box-shadow);
    --unq-radius-sm: var(--tblr-border-radius);
    --unq-radius-md: var(--tblr-border-radius-lg);
    --unq-radius-lg: var(--tblr-border-radius-lg);
    --unq-radius-xl: var(--tblr-border-radius-xl);
    --unq-transition: 150ms ease;
}

body {
    font-family: var(--tblr-body-font-family);
    background: var(--tblr-body-bg);
}

html[lang^="ar"] body,
[dir="rtl"] body {
    letter-spacing: 0;
}

/* Application shell */

.unq-shell-skip {
    position: absolute;
    inset-inline-start: 1rem;
    top: -4rem;
    z-index: 1100;
    padding: 0.5rem 0.875rem;
    border-radius: var(--tblr-border-radius);
    color: #fff;
    background: var(--tblr-primary);
}

.unq-shell-skip:focus {
    top: 1rem;
    color: #fff;
}

.unq-sidebar {
    --tblr-navbar-bg: var(--unq-sidebar-bg);
    --tblr-navbar-border-color: var(--unq-sidebar-border);
    --tblr-navbar-active-bg: var(--unq-sidebar-active-bg);
    --tblr-navbar-color: var(--unq-sidebar-fg);
    --tblr-navbar-hover-color: var(--unq-sidebar-active-fg);
    --tblr-navbar-active-color: var(--unq-sidebar-active-fg);
    color: var(--unq-sidebar-fg);
    background: var(--unq-sidebar-bg);
    border-inline-end: 1px solid var(--unq-sidebar-border);
}

.unq-sidebar .nav-link {
    color: var(--unq-sidebar-fg);
}

.unq-sidebar .nav-link:hover {
    color: var(--unq-sidebar-active-fg);
    background: var(--unq-sidebar-hover);
}

.unq-sidebar .navbar-toggler {
    color: var(--unq-sidebar-fg);
}

.unq-sidebar .navbar-brand img {
    height: 2rem;
    width: auto;
}

.unq-sidebar__workspace {
    margin: 0.25rem 0.75rem 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--unq-sidebar-line);
    border-radius: var(--tblr-border-radius);
    color: var(--unq-sidebar-fg);
    background: var(--unq-sidebar-hover);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.unq-sidebar__workspace small {
    display: block;
    color: var(--unq-sidebar-muted);
}

.unq-sidebar__workspace strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unq-sidebar .nav-link-icon {
    display: inline-flex;
    justify-content: center;
}

.unq-sidebar .nav-link-icon i {
    font-size: 0.95rem;
}

.unq-nav .nav-item.active > .nav-link,
.unq-nav .nav-link.active {
    color: var(--unq-sidebar-active-fg);
    background: var(--tblr-navbar-active-bg);
    font-weight: var(--tblr-font-weight-medium);
}

.unq-nav .nav-link.active {
    box-shadow: inset 3px 0 0 var(--unq-brand-accent);
}

[dir="rtl"] .unq-nav .nav-link.active {
    box-shadow: inset -3px 0 0 var(--unq-brand-accent);
}

.unq-nav-toggle__chevron {
    margin-inline-start: auto;
    font-size: 0.65rem;
    opacity: 0.6;
    transition: transform 150ms ease;
}

.unq-nav-toggle.collapsed .unq-nav-toggle__chevron {
    transform: rotate(-90deg);
}

[dir="rtl"] .unq-nav-toggle.collapsed .unq-nav-toggle__chevron {
    transform: rotate(90deg);
}

.unq-nav-sub {
    padding-inline-start: 1.25rem;
}

.unq-nav-sub .nav-link {
    padding-block: 0.45rem;
    font-size: 0.8125rem;
}

.unq-nav-sub .nav-link-icon {
    display: none;
}

.unq-sidebar__footer {
    padding: 0.75rem;
    border-top: 1px solid var(--unq-sidebar-line);
}

.unq-sidebar__footer .nav-link {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
}

.unq-avatar {
    color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
    font-weight: 600;
}

.unq-user-name {
    font-weight: var(--tblr-font-weight-medium);
}

.unq-assistant-context {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.unq-theme-toggle [data-unq-theme-icon][hidden] {
    display: none !important;
}

/* Keep ABP page alerts aligned with the page container. */
#AbpPageAlerts:empty {
    display: none;
}

.unq-topbar__crumbs .breadcrumb {
    margin: 0;
    padding: 0;
    background: none;
    font-size: 0.8125rem;
}

/* Global footer (rendered by the GlobalFooter layout hook). */
.unqud-global-footer {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid var(--unq-line);
    color: var(--unq-muted);
    font-size: 0.75rem;
}

.unqud-global-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.unqud-global-footer__mark {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.375rem;
    color: #fff;
    background: var(--unq-navy);
    font-size: 0.7rem;
    font-weight: 700;
}

.unqud-global-footer a {
    color: inherit;
    font-weight: 600;
}

.unq-theme-toggle {
    border: 0;
    background: none;
}

/* Floating back-to-top button (public pages). */
.unq-back-to-top {
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 1030;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: var(--tblr-primary);
    box-shadow: 0 10px 24px -8px rgba(var(--unq-brand-rgb), 0.6);
    font-size: 1.1rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}

.unq-back-to-top[hidden] {
    display: none;
}

.unq-back-to-top.is-visible {
    opacity: 1;
    transform: none;
}

.unq-back-to-top:hover {
    background: var(--tblr-primary-darken);
}

.unq-back-to-top:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--tblr-primary) 45%, transparent);
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .unq-back-to-top {
        bottom: 1rem;
        inset-inline-end: 1rem;
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .unq-back-to-top {
        transition: none;
    }
}

/*
 * Solid Bootstrap badges do not set a text colour in Tabler, so dark text landed on dark fills.
 * Give every solid fill a readable foreground unless the markup chose one explicitly.
 */
.badge:is(.bg-success, .bg-danger, .bg-primary, .bg-info, .bg-secondary, .bg-dark,
          .bg-green, .bg-red, .bg-blue, .bg-azure, .bg-purple, .bg-teal, .bg-indigo):not([class*="text-"]) {
    color: #ffffff;
}

.badge:is(.bg-warning, .bg-yellow, .bg-light):not([class*="text-"]) {
    color: #1f2937;
}

/*
 * The LeptonX layout bundle paints html/body #161616, and Tabler fixes body at 100% height.
 * Together they pushed the global footer below the body onto that dark canvas in light mode.
 * Let the page grow and give the canvas the theme's own background.
 */
html {
    background-color: var(--tblr-body-bg);
}

body.unq-admin-body {
    height: auto;
    min-height: 100vh;
}

/*
 * Bootstrap's pagination reads --bs-pagination-* tokens that stay white under Tabler's dark mode.
 * Point every pagination (DataTables included) at the theme tokens so it follows light and dark.
 */
.pagination {
    --bs-pagination-color: var(--tblr-body-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-color: var(--tblr-primary);
    --bs-pagination-hover-bg: rgba(var(--unq-brand-rgb), 0.08);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--tblr-primary);
    --bs-pagination-focus-bg: rgba(var(--unq-brand-rgb), 0.08);
    --bs-pagination-active-color: #ffffff;
    --bs-pagination-active-bg: var(--tblr-primary);
    --bs-pagination-active-border-color: var(--tblr-primary);
    --bs-pagination-disabled-color: var(--tblr-secondary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
}

html[data-bs-theme="dark"] :is(.dataTables_wrapper, .dt-container) :is(.dataTables_paginate, .dataTables_info, .dataTables_length,
    .dataTables_filter, .dt-paging, .dt-info, .dt-length, .dt-search, .row) {
    background: transparent !important;
    color: var(--tblr-secondary) !important;
}

html[data-bs-theme="dark"] :is(.dataTables_wrapper, .dt-container) .page-link {
    background: transparent !important;
    color: var(--tblr-body-color) !important;
    border-color: transparent !important;
}

html[data-bs-theme="dark"] :is(.dataTables_wrapper, .dt-container) .page-item.active .page-link {
    background: var(--tblr-primary) !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] :is(.dataTables_wrapper, .dt-container) .page-item.disabled .page-link {
    color: var(--tblr-secondary) !important;
    opacity: 0.6;
}

html[data-bs-theme="dark"] :is(.dataTables_wrapper, .dt-container) :is(.form-select, .form-control, select, input) {
    background-color: var(--tblr-bg-forms, var(--tblr-bg-surface)) !important;
    color: var(--tblr-body-color) !important;
    border-color: var(--tblr-border-color) !important;
}

/* Table cards that hard-code white surfaces in their page CSS. */
html[data-bs-theme="dark"] :is(.teacher-lessons-table-card, .tl-attachments-menu, .tl-attachments-item, .tl-upload-zone__file-pill) {
    background: var(--tblr-bg-surface) !important;
    border-color: var(--tblr-border-color) !important;
}

/* Teacher dashboard: "needs your attention" columns and today's timetable rows. */
.teacher-attention {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-lg, 10px);
    background: var(--tblr-border-color);
    overflow: hidden;
}

.teacher-attention__col {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--tblr-bg-surface);
}

.teacher-attention__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.teacher-attention__head strong {
    color: var(--tblr-emphasis-color, var(--tblr-body-color));
    font-size: 1.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.teacher-attention__list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.teacher-attention__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-body-color);
    text-decoration: none;
}

.teacher-attention__list a:hover {
    background: color-mix(in srgb, var(--tblr-primary) 7%, transparent);
}

.teacher-attention__list small {
    display: block;
    color: var(--tblr-secondary);
    font-size: 0.75rem;
}

.teacher-attention__empty {
    margin: 0;
    color: var(--tblr-secondary);
    font-size: 0.875rem;
}

.teacher-schedule__today > td {
    background: color-mix(in srgb, var(--tblr-primary) 6%, transparent);
}

@media (max-width: 991.98px) {
    .teacher-attention {
        grid-template-columns: 1fr;
    }
}