/**
 * AdSchool Premium UI — Design Tokens
 * Phase 1 — Foundation
 *
 * S2 (Synergy) aesthetic on S3 (Kalkio) canvas.
 * Import this FIRST — all other premium-ui files depend on these variables.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    /* ── Brand — set dynamically by theme.css (Theme controller)  ── */
    /* Fallbacks apply only before theme.css resolves.               */
    /* To change the school colour: Settings → Backend Theme → Primary Color */
    --pu-primary:          var(--color-brand-600, #3b6ea5);
    --pu-primary-dark:     var(--color-brand-700, #2f5a88);
    --pu-primary-darker:   var(--color-brand-800, #24476b);
    --pu-primary-light:    var(--color-brand-50,  #eef5fb);
    --pu-primary-muted:    var(--color-brand-100, #d0e4f5);
    --pu-primary-border:   var(--color-brand-200, #a3c9eb);
    --pu-primary-shadow:   rgba(59, 110, 165, .18); /* updated live by JS */

    /* ── Surfaces (S3 canvas approach) ─────────────── */
    --pu-page-bg:          #eceef3;   /* S3 cool gray — cards float on this */
    --pu-surface:          #ffffff;   /* cards, sidebar, header */
    --pu-surface-alt:      #f6f8fb;
    --pu-surface-hover:    #f3f4f6;

    /* ── Borders ────────────────────────────────────── */
    --pu-border:           #e5e7eb;
    --pu-border-light:     #f0f2f5;
    --pu-border-focus:     var(--color-brand-500, #4f83bc);

    /* ── Text ───────────────────────────────────────── */
    --pu-text-primary:     #111827;
    --pu-text-secondary:   #6b7280;
    --pu-text-muted:       #9ca3af;
    --pu-text-inverse:     #ffffff;

    /* ── Semantic ───────────────────────────────────── */
    --pu-success:          #22c55e;
    --pu-success-light:    #dcfce7;
    --pu-warning:          #f59e0b;
    --pu-warning-light:    #fef3c7;
    --pu-danger:           #ef4444;
    --pu-danger-light:     #fee2e2;
    --pu-info:             #3b82f6;
    --pu-info-light:       #dbeafe;

    /* ── Radius ─────────────────────────────────────── */
    --pu-radius-sm:        3px;
    --pu-radius-md:        5px;
    --pu-radius-lg:        5px;
    --pu-radius-xl:        8px;
    --pu-radius-pill:      999px;

    /* ── Shadow (S3 floating card feel) ─────────────── */
    --pu-shadow-xs:        0 1px 2px rgba(0, 0, 0, .04);
    --pu-shadow-sm:        0 2px 10px rgba(0, 0, 0, .06);
    --pu-shadow-md:        0 4px 16px rgba(0, 0, 0, .08);
    --pu-shadow-hover:     0 8px 28px var(--pu-primary-shadow, rgba(59,110,165,.18));

    /* ── Typography ─────────────────────────────────── */
    --pu-font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Transitions ────────────────────────────────── */
    --pu-transition:       all 150ms ease;
    --pu-transition-slow:  all 250ms ease;
}

/* ── Global font override ───────────────────────────── */
body,
.content-wrapper,
.main-header,
.main-sidebar,
.modal,
.dropdown-menu,
input, select, textarea, button {
    font-family: var(--pu-font) !important;
}

/* ── Global link colour — uses brand-700 so links stay visible
     even when the user picks a light/pastel custom theme.
     brand-700 is always L−11 from the chosen colour.          ── */
.content-wrapper a,
.box a,
.modal-body a {
    color: var(--pu-primary-dark);
}
.content-wrapper a:hover,
.content-wrapper a:focus,
.box a:hover,
.box a:focus,
.modal-body a:hover,
.modal-body a:focus {
    color: var(--pu-primary-darker);
}
/* Exclude buttons, nav, and other styled anchors from the override */
.btn, a.btn,
.pp-btn, a.pp-btn,
.nav a, .navbar a,
.main-sidebar a,
.main-header a,
.dropdown-menu a,
.breadcrumb a,
.pagination a,
a.theme-link,
a.template-custom-large,
.box-header a,
.box-tools a {
    color: inherit;
}

/* ── Settings menu active/hover — override --bs-hover-color (brand-100)
     which is invisible on light backgrounds for pastel themes.       ── */
.tablists li a.active,
.tablists li a:hover {
    color: var(--pu-primary-dark) !important;
}

/* ── S3 Canvas — page background ───────────────────── */
body.hold-transition,
.wrapper,
.content-wrapper,
.right-side {
    background-color: var(--pu-page-bg) !important;
}

/* ── Cards / boxes float on the canvas ─────────────── */
/* AdminLTE .box → white card with soft shadow, no border */
.box {
    background: var(--pu-surface) !important;
    border: none !important;
    border-radius: var(--pu-radius-lg) !important;
    box-shadow: var(--pu-shadow-sm) !important;
    transition: box-shadow 200ms ease;
}
.box:hover {
    box-shadow: var(--pu-shadow-md) !important;
}
.box-header {
    border-bottom: 1px solid var(--pu-border-light) !important;
    border-radius: var(--pu-radius-lg) var(--pu-radius-lg) 0 0 !important;
    /* Flex replaces AdminLTE's absolute-positioned box-tools approach.
       Vertically centers the title and box-tools on the same row. */
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    gap: 10px !important;
}
.box-header .box-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--pu-text-primary) !important;
    font-family: var(--pu-font) !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
/* box-tools: override absolute positioning, push to right edge */
.box-header > .box-tools {
    position: static !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.box-footer {
    background: var(--pu-surface-alt) !important;
    border-top: 1px solid var(--pu-border-light) !important;
    border-radius: 0 0 var(--pu-radius-lg) var(--pu-radius-lg) !important;
}

/* ── Nav tabs custom ────────────────────────────────── */
.nav-tabs-custom {
    background: var(--pu-surface) !important;
    border-radius: var(--pu-radius-lg) !important;
    box-shadow: var(--pu-shadow-sm) !important;
    border: none !important;
}
.nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--pu-border-light) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    border-top: 3px solid var(--pu-primary) !important;
    color: var(--pu-primary) !important;
}

/* ── Content header / breadcrumb area ──────────────── */
.content-header {
    padding: 16px 24px 0 !important;
}
.content-header h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--pu-text-primary) !important;
    letter-spacing: -0.3px;
}
.breadcrumb {
    background: transparent !important;
    font-size: 12px !important;
    color: var(--pu-text-muted) !important;
}
.breadcrumb > li + li::before {
    color: var(--pu-text-muted) !important;
}
.breadcrumb > .active {
    color: var(--pu-text-secondary) !important;
}

/* ── Section content padding ────────────────────────── */
.content {
    padding: 16px 24px 24px !important;
}

/* ── Small info boxes (dashboard stat boxes) ────────── */
.info-box {
    border-radius: var(--pu-radius-lg) !important;
    box-shadow: var(--pu-shadow-sm) !important;
    border: none !important;
    background: var(--pu-surface) !important;
}
.info-box .info-box-icon {
    border-radius: var(--pu-radius-lg) 0 0 var(--pu-radius-lg) !important;
}

/* ── Small boxes ────────────────────────────────────── */
.small-box {
    border-radius: var(--pu-radius-lg) !important;
    box-shadow: var(--pu-shadow-sm) !important;
}
.small-box:hover {
    box-shadow: var(--pu-shadow-hover) !important;
}

/* ── Modal improvements ─────────────────────────────── */
.modal-content {
    border-radius: var(--pu-radius-lg) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
}
.modal-header {
    border-radius: var(--pu-radius-lg) var(--pu-radius-lg) 0 0 !important;
    border-bottom: 1px solid var(--pu-border-light) !important;
}
.modal-footer {
    border-radius: 0 0 var(--pu-radius-lg) var(--pu-radius-lg) !important;
    border-top: 1px solid var(--pu-border-light) !important;
    background: var(--pu-surface-alt) !important;
}

/* ── Buttons — consistent 3-tier hierarchy ───────────── */

/* Tier 1: Base — standard action/form button */
.btn {
    display: inline-flex;           /* no !important — allows style="display:none" to work */
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: var(--pu-radius-md) !important;
    font-family: var(--pu-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    /* line-height matches height so text stays centered even when display
       falls back to inline-block (e.g. overridden by a higher-specificity rule) */
    line-height: 34px !important;
    white-space: nowrap !important;
    transition: var(--pu-transition) !important;
    vertical-align: middle !important;
}

/* Tier 2: Small — filter/search/header action buttons */
.btn.btn-sm,
.btn-group-sm > .btn {
    height: 30px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
    line-height: 30px !important;
}

/* btn-md (custom class in codebase) — same as base */
.btn.btn-md {
    height: 34px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 34px !important;
}

/* Full-width — height inherited from size modifier */
.btn.btn-block {
    width: 100% !important;
    /* Bootstrap 3 forces display:block !important on btn-block.
       We must counter it with !important so flex alignment works.
       Trade-off: style="display:none" won't hide btn-block buttons;
       use .hidden / $.hide() via class toggle instead if needed. */
    display: flex !important;
}

/* Tier 3: btn-xs (icon-only table buttons) — handled in components.css */

/* ── Button colors ───────────────────────────────────── */
.btn-primary {
    background: var(--pu-primary) !important;
    border-color: var(--pu-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--pu-primary-dark) !important;
    border-color: var(--pu-primary-dark) !important;
    box-shadow: 0 4px 12px var(--pu-primary-shadow) !important;
    transform: translateY(-1px);
    color: #fff !important;
}
.btn-default {
    background: var(--pu-surface) !important;
    border-color: var(--pu-border) !important;
    color: var(--pu-text-secondary) !important;
}
.btn-default:hover {
    background: var(--pu-surface-hover) !important;
    border-color: var(--pu-border) !important;
    color: var(--pu-text-primary) !important;
}
.btn-info {
    background: var(--pu-info) !important;
    border-color: var(--pu-info) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}
.btn-success {
    background: var(--pu-success) !important;
    border-color: var(--pu-success) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.btn-danger {
    background: var(--pu-danger) !important;
    border-color: var(--pu-danger) !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.btn-warning {
    background: var(--pu-warning) !important;
    border-color: var(--pu-warning) !important;
    color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}

/* ── Form controls ──────────────────────────────────── */
.form-control {
    border-radius: var(--pu-radius-md) !important;
    border-color: var(--pu-border) !important;
    font-family: var(--pu-font) !important;
    font-size: 13px !important;
    color: var(--pu-text-primary) !important;
    background: var(--pu-surface) !important;
    transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.form-control:focus {
    border-color: var(--pu-border-focus) !important;
    box-shadow: 0 0 0 3px var(--pu-primary-shadow, rgba(59,110,165,.12)) !important;
    outline: none !important;
}

/* ── Alerts ─────────────────────────────────────────── */
.alert {
    border-radius: var(--pu-radius-md) !important;
    border: none !important;
    font-size: 13px !important;
}

/* ── Dropdown menus ─────────────────────────────────── */
.dropdown-menu {
    border-radius: var(--pu-radius-md) !important;
    border: 1px solid var(--pu-border) !important;
    box-shadow: var(--pu-shadow-md) !important;
    font-family: var(--pu-font) !important;
    font-size: 13px !important;
}
.dropdown-menu > li > a {
    color: var(--pu-text-secondary) !important;
    padding: 8px 16px !important;
    transition: background 120ms ease !important;
}
.dropdown-menu > li > a:hover {
    background: var(--pu-surface-hover) !important;
    color: var(--pu-text-primary) !important;
}

/* ── Labels / badges ────────────────────────────────── */
.label, .badge {
    border-radius: var(--pu-radius-sm) !important;
    font-family: var(--pu-font) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
}

/* ── Fix Bootstrap 3 select.input-sm forcing text out of view ── */
select.input-sm {
    height: auto !important;
    line-height: normal !important;
    padding: 4px 8px !important;
}