/* ═══════════════════════════════════════════════════════════════
   gs-pages.css — Light green theme + RTL for BlazorSchool pages
   Copy to: wwwroot/css/gs-pages.css
   Add to index.html:
     <link rel="stylesheet" href="css/gs-pages.css" />
   ═══════════════════════════════════════════════════════════════ */

:root {
    --gs-p1:     #52b788;
    --gs-p2:     #74c69d;
    --gs-p3:     #95d5b2;
    --gs-p4:     #b7e4c7;
    --gs-p5:     #d8f3dc;
    --gs-text:   #1b4332;
    --gs-accent: #40916c;
}

/* ── Card headers (replaces bg-primary) ───────────────────────── */
.gs-card-header {
    background: linear-gradient(135deg, var(--gs-p1) 0%, var(--gs-p2) 55%, var(--gs-p3) 100%);
    border-bottom: none;
    border-radius: .375rem .375rem 0 0;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(52,183,136,.25);
    color: var(--gs-text);
}
.gs-card-header h3,
.gs-card-header h4,
.gs-card-header h5 { color: var(--gs-text); font-weight: 700; margin: 0; }

/* ── XTabs header must NEVER get the green gradient ───────────── */
/* BlazorXTabs renders: class="xtabs-header card-header"          */
/* This rule wins over .gs-card-header because it is more specific */
.xtabs-header.card-header,
.xtabs-header.card-header.gs-card-header {
    background: #ffffff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 0 !important;
}

/* Force black text on all XTabs tab elements */
.xtabs-header,
.xtabs-header a,
.xtabs-header button,
.xtabs-header span,
.xtabs-header li,
.xtabs-header .nav-link,
.xtabs-header .nav-link:hover,
.xtabs-header .nav-link:focus,
.xtabs-header .nav-link.active {
    color: #212529 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ── Page banner (DailyAttendance top header) ─────────────────── */
.gs-page-header {
    background: linear-gradient(135deg, var(--gs-p1) 0%, var(--gs-p2) 55%, var(--gs-p3) 100%);
    color: var(--gs-text);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(52,183,136,.3);
}
.gs-page-header h2,
.gs-page-header h4,
.gs-page-header h5 { color: var(--gs-text); font-weight: 700; }

/* ── Page section titles ──────────────────────────────────────── */
.gs-page-title { color: var(--gs-accent) !important; font-weight: 700; }

/* ── Table headers (replaces table-dark thead) ────────────────── */
.gs-table-head th {
    background: linear-gradient(135deg, var(--gs-p1) 0%, var(--gs-p2) 100%) !important;
    color: var(--gs-text) !important;
    border-color: rgba(255,255,255,.3) !important;
    position: sticky;
    top: 0;
    z-index: 1;
    font-weight: 600;
}

/* ── Buttons (replaces btn-primary) ──────────────────────────── */
.gs-btn-primary {
    background: linear-gradient(135deg, var(--gs-p1) 0%, var(--gs-p2) 100%);
    border: 1px solid var(--gs-accent);
    color: var(--gs-text);
    border-radius: 6px;
    padding: .45rem 1.2rem;
    font-weight: 600;
    transition: all .2s;
    box-shadow: 0 2px 6px rgba(52,183,136,.2);
    cursor: pointer;
}
.gs-btn-primary:hover,
.gs-btn-primary:focus {
    background: linear-gradient(135deg, var(--gs-p2) 0%, var(--gs-p3) 100%);
    color: var(--gs-text);
    box-shadow: 0 4px 12px rgba(52,183,136,.35);
    transform: translateY(-1px);
}
.gs-btn-primary:disabled { opacity: .6; transform: none; cursor: not-allowed; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge.gs-badge { background: var(--gs-p1) !important; color: var(--gs-text); }

/* ── Form focus ───────────────────────────────────────────────── */
.form-select:focus,
.form-control:focus {
    border-color: var(--gs-p2);
    box-shadow: 0 0 0 .2rem rgba(116,198,157,.3);
}

/* ── Cards ────────────────────────────────────────────────────── */
.card { border-radius: .5rem; border: 1px solid rgba(116,198,157,.2); }

/* ── Selection card ───────────────────────────────────────────── */
.selection-card {
    background: linear-gradient(180deg, var(--gs-p5) 0%, #fff 100%);
    border-inline-start: 4px solid var(--gs-p2);
}

/* ── Student cards ────────────────────────────────────────────── */
.student-card.present {
    border-inline-start: 4px solid var(--gs-p1);
    background: var(--gs-p5);
}
.student-card.absent {
    border-inline-start: 4px solid #dc3545;
    background: #fff8f8;
}

/* ── Save / action buttons ────────────────────────────────────── */
.save-button {
    background: linear-gradient(135deg, var(--gs-p1) 0%, var(--gs-p2) 100%) !important;
    border: 1px solid var(--gs-accent) !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    box-shadow: 0 4px 12px rgba(52,183,136,.3) !important;
    color: var(--gs-text) !important;
    transition: all .3s ease !important;
}
.save-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(52,183,136,.4) !important;
}

/* ── Stats cards ──────────────────────────────────────────────── */
.stats-card {
    background: linear-gradient(135deg, var(--gs-p5) 0%, #fff 100%);
    border: 1px solid var(--gs-p4);
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   RTL — Bootstrap 5 uses logical properties BUT its utility
   classes (ms-*, me-*, text-start, text-end) are NOT logical.
   Setting dir="rtl" on .page fixes native HTML but Bootstrap
   utilities need these overrides.
   ═══════════════════════════════════════════════════════════════ */

[dir="rtl"] { text-align: right; }

/* Spacing */
[dir="rtl"] .ms-1,.ms-1[dir="rtl"]  { margin-right:.25rem!important; margin-left:0!important; }
[dir="rtl"] .ms-2,.ms-2[dir="rtl"]  { margin-right:.5rem!important;  margin-left:0!important; }
[dir="rtl"] .ms-3,.ms-3[dir="rtl"]  { margin-right:1rem!important;   margin-left:0!important; }
[dir="rtl"] .ms-4,.ms-4[dir="rtl"]  { margin-right:1.5rem!important; margin-left:0!important; }
[dir="rtl"] .ms-auto                 { margin-right:auto!important;   margin-left:0!important; }
[dir="rtl"] .me-1,.me-1[dir="rtl"]  { margin-left:.25rem!important;  margin-right:0!important; }
[dir="rtl"] .me-2,.me-2[dir="rtl"]  { margin-left:.5rem!important;   margin-right:0!important; }
[dir="rtl"] .me-3,.me-3[dir="rtl"]  { margin-left:1rem!important;    margin-right:0!important; }
[dir="rtl"] .me-4,.me-4[dir="rtl"]  { margin-left:1.5rem!important;  margin-right:0!important; }
[dir="rtl"] .ps-4                    { padding-right:1.5rem!important; padding-left:0!important; }
[dir="rtl"] .pe-4                    { padding-left:1.5rem!important;  padding-right:0!important; }

/* Text alignment */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end   { text-align: left  !important; }

/* Flex — reverse row direction */
[dir="rtl"] .d-flex:not(.flex-column) { flex-direction: row-reverse; }
[dir="rtl"] .justify-content-between  { flex-direction: row-reverse; }

/* Keep these LTR even in RTL context */
[dir="rtl"] .form-switch,
[dir="rtl"] .spinner-border,
[dir="rtl"] .form-check.form-switch { direction: ltr; }

/* Form checkboxes */
[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}
[dir="rtl"] .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

/* Tables */
[dir="rtl"] table { direction: rtl; }
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }

/* Alerts */
[dir="rtl"] .alert { text-align: right; }

/* Borders — use logical property so they auto-flip */
.selection-card,
.student-card.present,
.student-card.absent {
    border-left: none !important;
    border-right: none !important;
}

/* ── Force inputs/selects to inherit dir from html ─────────────
   Needed because some browsers don't propagate dir to form controls */
input, select, textarea, .form-control, .form-select {
    direction: inherit;
    text-align: inherit;
}