/* =====================================================================
   VisionSchools — shared UI design system (served from _content/UI/css/ui.css)
   Modern, responsive, bilingual (RTL/LTR via CSS logical properties).
   Brand: maroon primary + gold accent. Works portrait & landscape.
   ===================================================================== */

:root {
    /* Brand — sampled from the VisionSchools logo (indigo/violet "V", dominant #6060a8),
       paired with a warm amber accent for a modern, attractive look. */
    --vs-primary: #5b57a6;       /* logo indigo */
    --vs-primary-600: #4a4790;   /* hover */
    --vs-primary-700: #3a3873;   /* dark */
    --vs-primary-050: #eeedf8;   /* light tint (active bg) */
    --vs-accent: #f5a524;        /* amber accent */
    --vs-accent-600: #d98d10;

    /* Surfaces & text */
    --vs-bg: #f4f5f7;
    --vs-surface: #ffffff;
    --vs-surface-2: #fafafb;
    --vs-border: #e6e8ec;
    --vs-text: #1f2430;
    --vs-text-muted: #6b7280;

    /* Status */
    --vs-success: #1b7a3d;
    --vs-danger: #b00020;
    --vs-warning: #b7791f;
    --vs-info: #29527a;

    /* Shape & motion */
    --vs-radius: 14px;
    --vs-radius-sm: 10px;
    --vs-radius-pill: 999px;
    --vs-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --vs-shadow: 0 6px 20px rgba(16, 24, 40, .08);
    --vs-shadow-lg: 0 18px 40px rgba(16, 24, 40, .16);
    --vs-ring: 0 0 0 3px rgba(122, 31, 61, .18);
    --vs-transition: .18s ease;

    --vs-font: "Cairo", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
}

/* ---- Base ---------------------------------------------------------- */
html, body {
    font-family: var(--vs-font);
    background: var(--vs-bg);
    color: var(--vs-text);
    font-size: 14px;               /* compact, modern base */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--vs-text); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.4rem; margin: 0 0 .9rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a { color: var(--vs-primary); text-decoration: none; }
a:hover { color: var(--vs-primary-600); text-decoration: underline; }

/* ---- Cards -------------------------------------------------------- */
.vs-card {
    background: var(--vs-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius);
    box-shadow: var(--vs-shadow-sm);
    padding: 1.25rem 1.4rem;
    margin: 0 0 1.25rem;
    transition: box-shadow var(--vs-transition), transform var(--vs-transition);
}
.vs-card:hover { box-shadow: var(--vs-shadow); }
.vs-card[dir="rtl"] { text-align: right; }

.vs-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem; padding-bottom: .75rem;
    border-bottom: 1px solid var(--vs-border);
}
.vs-card-header h3 { margin: 0; font-size: 1.12rem; }

/* Definition-list health/info grid */
.vs-health { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.vs-health dt { font-weight: 600; color: var(--vs-text-muted); }
.vs-health dd { margin: 0; }

.vs-error { color: var(--vs-danger); font-weight: 600; }
.vs-muted { color: var(--vs-text-muted); }

/* ---- Buttons ------------------------------------------------------ */
.vs-btn, .vs-lang-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    cursor: pointer; border: 1px solid var(--vs-primary);
    background: var(--vs-primary); color: #fff;
    border-radius: var(--vs-radius-sm); padding: .55rem 1.05rem;
    font-family: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2;
    min-height: 42px; transition: background var(--vs-transition), box-shadow var(--vs-transition), transform var(--vs-transition);
}
.vs-btn:hover { background: var(--vs-primary-600); border-color: var(--vs-primary-600); }
.vs-btn:active { transform: translateY(1px); }
.vs-btn:focus-visible, .vs-lang-toggle:focus-visible { outline: none; box-shadow: var(--vs-ring); }
.vs-btn:disabled { opacity: .55; cursor: not-allowed; }

.vs-btn-outline { background: transparent; color: var(--vs-primary); }
.vs-btn-outline:hover { background: var(--vs-primary-050); }
.vs-btn-accent { background: var(--vs-accent); border-color: var(--vs-accent); color: #2a2000; }
.vs-btn-accent:hover { background: var(--vs-accent-600); border-color: var(--vs-accent-600); }
.vs-btn-ghost { background: transparent; color: var(--vs-text); border-color: var(--vs-border); }
.vs-btn-ghost:hover { background: var(--vs-surface-2); }
.vs-btn-sm { padding: .35rem .7rem; min-height: 34px; font-size: .82rem; }

.vs-lang-toggle {
    background: transparent; color: var(--vs-primary);
    border-color: var(--vs-primary); padding: .4rem .85rem; min-height: 38px;
}
.vs-lang-toggle:hover { background: var(--vs-primary-050); }

/* ---- Badges / chips ---------------------------------------------- */
.vs-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .6rem; border-radius: var(--vs-radius-pill);
    font-size: .76rem; font-weight: 700; background: var(--vs-primary-050); color: var(--vs-primary);
}
.vs-badge-success { background: #e6f4ea; color: var(--vs-success); }
.vs-badge-danger { background: #fbe7ea; color: var(--vs-danger); }
.vs-badge-warning { background: #fdf3e2; color: var(--vs-warning); }

/* ---- Tables ------------------------------------------------------- */
/* A list table sits on its own white surface (card look) so it stands out from
   the grey page background. border-collapse:separate lets the corners round. */
.vs-table {
    width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem;
    background: var(--vs-surface); border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-sm); overflow: hidden;
}
.vs-table th, .vs-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--vs-border); text-align: start; }
.vs-table tbody tr:last-child td { border-bottom: none; }  /* clean rounded bottom edge */
.vs-table thead th {
    background: var(--vs-surface-2); color: var(--vs-text-muted);
    font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
    position: sticky; top: 0;
}
.vs-table tbody tr { transition: background var(--vs-transition); }
.vs-table tbody tr:hover { background: var(--vs-primary-050); }
/* When already inside a card or scroll-wrap, don't stack a second surface. */
.vs-card .vs-table, .vs-table-wrap .vs-table { border: 0; border-radius: 0; box-shadow: none; }
.vs-table-wrap { overflow-x: auto; border-radius: var(--vs-radius-sm); }

/* ---- Stat tiles (dashboard) -------------------------------------- */
.vs-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }

/* ---- Forms -------------------------------------------------------- */
.vs-field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.vs-field label { font-weight: 600; font-size: .88rem; color: var(--vs-text); }
.vs-field input, .vs-field select, .vs-field textarea,
.form-control, .form-select {
    padding: .6rem .8rem; border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-sm); font-size: 1rem; font-family: inherit;
    background: var(--vs-surface); color: var(--vs-text);
    transition: border-color var(--vs-transition), box-shadow var(--vs-transition);
}
.vs-field input:focus, .vs-field select:focus, .vs-field textarea:focus,
.form-control:focus, .form-select:focus {
    outline: none; border-color: var(--vs-primary); box-shadow: var(--vs-ring);
}

/* ---- Auth scaffolding -------------------------------------------- */
.vs-auth {
    max-width: 420px; margin: 7vh auto; padding: 2.2rem;
    background: var(--vs-surface); border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius); box-shadow: var(--vs-shadow-lg);
}
.vs-auth h1 { font-size: 1.5rem; margin: 0 0 1.4rem; text-align: center; }
.vs-auth-logo { display: block; height: 56px; margin: 0 auto 1rem; }

/* ---- Toasts ------------------------------------------------------- */
.vs-toasts { position: fixed; bottom: 1rem; inset-inline-end: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 1100; }
.vs-toast {
    padding: .8rem 1.1rem; border-radius: var(--vs-radius-sm); color: #fff; max-width: 340px;
    box-shadow: var(--vs-shadow-lg); font-weight: 500; animation: vs-toast-in .25s ease;
}
@keyframes vs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vs-toast-success { background: var(--vs-success); }
.vs-toast-error { background: var(--vs-danger); }
.vs-toast-info { background: var(--vs-info); }

/* ---- Loading overlay --------------------------------------------- */
.vs-loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1200; }
.vs-spinner { width: 46px; height: 46px; border: 5px solid var(--vs-primary-050); border-top-color: var(--vs-primary); border-radius: 50%; animation: vs-spin .8s linear infinite; }
@keyframes vs-spin { to { transform: rotate(360deg); } }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 640px) {
    .vs-card { padding: 1rem 1.1rem; border-radius: var(--vs-radius-sm); }
    .vs-auth { margin: 4vh 1rem; padding: 1.5rem; }
    .vs-stats { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; }

    /* Keep tables full-width; cell text wraps so they never overflow the page.
       (A block/scroll table would shrink to content width and look narrow.) */
    .vs-table { font-size: .86rem; }
    .vs-table th, .vs-table td { padding: .55rem .55rem; }
    /* Genuinely wide tables opt into horizontal scroll via .vs-table-wrap. */
    .vs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Page header (title + Add button) wraps rather than overflowing. */
    .vs-card-header { flex-wrap: wrap; row-gap: .5rem; }
    /* Never let a page cause horizontal scroll of the whole shell. */
    .main-page-content { overflow-x: hidden; }
    h1 { font-size: 1.2rem; }
}

/* Landscape phones: tighten vertical rhythm so content fits */
@media (max-height: 480px) and (orientation: landscape) {
    .vs-auth { margin: 1.5vh auto; padding: 1.25rem; }
    .vs-auth-logo { height: 40px; }
    h1 { margin-bottom: .5rem; }
}

@media print { .vs-toasts, .vs-loading-overlay { display: none !important; } }