/*
 * Knowledge Gate look for the whole platform (client item 6).
 *
 * From the approved kgate reference: light airy background, navy headings,
 * Nunito text with Baloo 2 headings, large rounded cards with a soft shadow,
 * pill-shaped buttons and menu items, and more breathing room. Brand colours
 * stay those set in Settings → Theme (--theme-color, --primary-color…), so a
 * school's colours carry through; this layer only sets shape, type and space.
 * Loaded last in both the staff and the student layouts.
 */
:root {
    --kg-bg: #f7f9fd;
    --kg-fg: #1c2540;
    --kg-muted: #66728f;
    --kg-border: #e3e8f2;
    --kg-secondary: #eef2fa;
    --kg-shadow: 0 12px 30px -14px rgba(40, 60, 110, .30);
    --kg-radius: 20px;
    --kg-display: "Baloo 2", "Nunito", system-ui, sans-serif;
    --kg-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Type */
body, .content-wrapper, .sidebar, .navbar, .modal-content, .form-control, .btn, table, .dropdown-menu, .select2-container {
    font-family: var(--kg-sans);
}
body { background: var(--kg-bg); color: var(--kg-fg); }
.page-title, .card-title, .modal-title, h1, h2, h3 {
    font-family: var(--kg-display);
    letter-spacing: -.01em;
}
.page-header .page-title { font-size: 1.6rem; font-weight: 800; color: var(--kg-fg); }
.card .card-title { font-size: 1.15rem; font-weight: 800; }
html[dir="rtl"] body, html[dir="rtl"] .content-wrapper, html[dir="rtl"] .sidebar { font-family: "Nunito", "Tajawal", "Segoe UI", Tahoma, sans-serif; }

/* Page and spacing */
.content-wrapper { background: var(--kg-bg); padding: 1.75rem clamp(1rem, 2.4vw, 2.25rem); }
.page-header { margin-bottom: 1.25rem; }
.grid-margin { margin-bottom: 1.5rem; }

/* Cards */
.content-wrapper .card {
    border: 1px solid var(--kg-border);
    border-radius: var(--kg-radius);
    box-shadow: var(--kg-shadow);
    background: #fff;
}
.content-wrapper .card .card-body { padding: clamp(1.1rem, 2vw, 1.75rem); }

/* Buttons and inputs */
.content-wrapper .btn { border-radius: 999px; font-weight: 700; }
.content-wrapper .btn-sm, .content-wrapper .btn-xs { border-radius: 999px; }
.content-wrapper .btn-icon, .content-wrapper .btn.btn-rounded { border-radius: 50%; }
.content-wrapper .form-control, .content-wrapper .custom-select, .content-wrapper .select2-container .select2-selection {
    border-radius: 12px;
    border-color: var(--kg-border);
}
.content-wrapper .form-control:focus { box-shadow: 0 0 0 3px rgba(80, 120, 220, .15); }
.content-wrapper label { font-weight: 700; color: var(--kg-fg); }

/* Tables */
.content-wrapper .table thead th {
    background: var(--kg-secondary);
    border-bottom: 0;
    color: var(--kg-fg);
    font-weight: 800;
    text-transform: none;
}
.content-wrapper .table thead th:first-child { border-top-left-radius: 12px; }
.content-wrapper .table thead th:last-child { border-top-right-radius: 12px; }
.content-wrapper .table td, .content-wrapper .table th { border-color: var(--kg-border); }
.content-wrapper .fixed-table-toolbar .btn-group .btn { border-radius: 10px; }

/* Sidebar: rounded pills for items, clear active state */
.sidebar .nav .nav-item { padding-inline: .6rem; }
.sidebar .nav .nav-item > .nav-link { border-radius: 14px; transition: background .15s; }
.sidebar .nav .nav-item > .nav-link:hover { background: var(--kg-secondary); }
.sidebar .nav .nav-item.active { background: transparent; }
.sidebar .nav .nav-item.active > .nav-link { background: var(--kg-secondary); }
.sidebar .nav .nav-item .nav-link .menu-title { font-weight: 700; }
.sidebar .nav.sub-menu .nav-item .nav-link { border-radius: 10px; }

/* Navbar */
.navbar .navbar-menu-wrapper { box-shadow: 0 1px 0 var(--kg-border); }

/* Modals and dropdowns */
.modal-content { border-radius: var(--kg-radius); border: 0; box-shadow: 0 30px 60px -20px rgba(20, 30, 70, .35); }
.dropdown-menu { border-radius: 14px; border-color: var(--kg-border); box-shadow: var(--kg-shadow); }

/* Badges */
.content-wrapper .badge { border-radius: 999px; font-weight: 700; }

/* Phones and tablets: full-width cards, no side scroll */
@media (max-width: 767px) {
    .content-wrapper { padding: 1rem; }
    .content-wrapper .card { border-radius: 16px; }
    .page-header { flex-wrap: wrap; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar .nav .nav-item > .nav-link { transition: none; }
}

/* Buttons joined to an input keep a square inner edge */
.content-wrapper .input-group > .input-group-append > .btn,
.content-wrapper .input-group > .input-group-append .file-upload-browse { border-radius: 0 12px 12px 0; }
.content-wrapper .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html[dir="rtl"] .content-wrapper .input-group > .input-group-append > .btn { border-radius: 12px 0 0 12px; }