/* =====================================================================
   Satit Valuation System — Modern Theme (Navy & Gold)
   ระบบประเมินครูและบุคลากร โรงเรียนสาธิต มรภ.วไลยอลงกรณ์ฯ
   พัฒนาระบบโดย ดร.สุวิทย์ ฝ่ายสงค์
   ---------------------------------------------------------------------
   ไฟล์นี้เป็น "ชั้นธีม" ที่โหลดทับ Bootstrap และสไตล์เดิมของแต่ละหน้า
   โดยไม่แตะ logic หรือโครงสร้าง HTML เดิม
   ===================================================================== */

:root {
    /* Brand palette */
    --navy-900: #0d1b3e;
    --navy-800: #122452;
    --navy-700: #1a3168;
    --navy-600: #24407f;
    --navy-500: #33529c;
    --gold-600: #b8881f;
    --gold-500: #cca227;
    --gold-400: #e0bf57;
    --gold-100: #f7efd6;

    /* Neutrals */
    --bg: #eef1f8;
    --bg-2: #f6f8fc;
    --surface: #ffffff;
    --ink: #1f2a3d;
    --muted: #67738c;
    --line: #e3e8f2;

    /* Semantic (refined) */
    --success: #1f9d6b;
    --info: #2b8ac9;
    --danger: #d8536b;
    --warning: var(--gold-500);

    /* Shape & motion */
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 8px rgba(13, 27, 62, .06);
    --shadow: 0 8px 24px rgba(13, 27, 62, .09);
    --shadow-lg: 0 16px 40px rgba(13, 27, 62, .14);
    --grad-navy: linear-gradient(120deg, var(--navy-800) 0%, var(--navy-600) 100%);
    --grad-gold: linear-gradient(120deg, var(--gold-500) 0%, var(--gold-400) 100%);
}

/* ---------- Base ---------- */
body {
    font-family: 'Sarabun', 'TH Sarabun New', system-ui, sans-serif !important;
    background: var(--bg) !important;
    color: var(--ink);
    letter-spacing: .1px;
}
.container { position: relative; }
h1, h2, h3, h4, h5, h6 { color: var(--navy-800); font-weight: 700; }
a { color: var(--navy-600); }
a:hover { color: var(--navy-800); }
.text-muted { color: var(--muted) !important; }

/* Make legacy purple/orange text accents read as brand navy/gold */
.text-warning { color: var(--gold-600) !important; }
.text-primary { color: var(--navy-600) !important; }
.text-info    { color: var(--info) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }

/* ---------- Navbar / headers ---------- */
.navbar.header-bg,
.header-bg {
    background: var(--grad-navy) !important;
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.navbar .navbar-brand {
    color: var(--gold-400) !important;
    font-weight: 800;
    letter-spacing: .3px;
}
.navbar .nav-link {
    color: rgba(255, 255, 255, .85) !important;
    font-weight: 500;
    border-radius: 8px;
    padding-inline: .8rem !important;
    transition: background .2s, color .2s;
}
.navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    transition: transform .18s ease, box-shadow .18s ease;
}
.card.shadow-sm, .card.shadow { box-shadow: var(--shadow) !important; }
.card-header { background: var(--bg-2) !important; border-bottom: 1px solid var(--line); font-weight: 600; }

/* Coloured contextual cards keep meaning but get the modern shell */
.border-warning { border-color: var(--gold-400) !important; }
.border-primary { border-color: var(--navy-500) !important; }
.border-info    { border-color: #bfe0f3 !important; }
.border-success { border-color: #bfe8d6 !important; }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; font-weight: 600; padding: .5rem 1.1rem; transition: all .18s ease; }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--grad-navy); border: none;
    box-shadow: 0 4px 12px rgba(26, 49, 104, .28);
}
.btn-primary:hover { filter: brightness(1.08); background: var(--grad-navy); }

.btn-warning {
    background: var(--grad-gold); border: none; color: #4a3a06 !important;
    box-shadow: 0 4px 12px rgba(204, 162, 39, .28);
}
.btn-warning:hover { filter: brightness(1.05); color: #4a3a06; }

.btn-outline-light { border-color: rgba(255,255,255,.6); }
.btn-outline-primary { color: var(--navy-600); border-color: var(--navy-500); }
.btn-outline-primary:hover { background: var(--navy-600); border-color: var(--navy-600); }

.btn-success { background: var(--success); border: none; box-shadow: 0 4px 12px rgba(31,157,107,.25); }
.btn-info    { background: var(--info); border: none; color: #fff; box-shadow: 0 4px 12px rgba(43,138,201,.25); }
.btn-danger  { background: var(--danger); border: none; box-shadow: 0 4px 12px rgba(216,83,107,.25); }
.btn-secondary { background: #5c6b7f; border: none; }

/* ---------- Tables ---------- */
.table { --bs-table-color: var(--ink); }
.table > :not(caption) > * > * { padding: .75rem .8rem; }
.table thead.table-dark th,
.table .table-dark th,
thead.table-dark { background: var(--navy-800) !important; color: #fff !important; border-color: var(--navy-700) !important; }
.table-hover > tbody > tr:hover > * { background: var(--gold-100); }
.table-bordered > :not(caption) > * > * { border-color: var(--line); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; letter-spacing: .2px; padding: .4em .7em; border-radius: 8px; }
.bg-primary { background: var(--navy-600) !important; }
.bg-warning { background: var(--gold-500) !important; color: #4a3a06 !important; }
.bg-success { background: var(--success) !important; }
.bg-info    { background: var(--info) !important; }
.bg-danger  { background: var(--danger) !important; }
.bg-light   { background: var(--bg-2) !important; }

/* ---------- Stat cards (dashboard) ---------- */
.stat-card {
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.stat-card.bg-success { background: linear-gradient(135deg,#1f9d6b,#15805a) !important; }
.stat-card.bg-primary { background: var(--grad-navy) !important; }
.stat-card.bg-info    { background: linear-gradient(135deg,#2b8ac9,#1f6fa6) !important; }
.stat-card.bg-warning { background: var(--grad-gold) !important; color:#4a3a06 !important; }
.stat-card.bg-danger  { background: linear-gradient(135deg,#d8536b,#b73a52) !important; }

/* ---------- Alerts ---------- */
.alert { border: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.alert-success { background: #e7f6ef; color: #14613f; }
.alert-info    { background: #e6f2fb; color: #195a82; }
.alert-warning { background: var(--gold-100); color: #6b5310; }
.alert-danger  { background: #fbe9ec; color: #8f2e41; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 10px; border-color: var(--line); padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 .2rem rgba(36, 64, 127, .15);
}
.form-check-input:checked { background-color: var(--navy-600); border-color: var(--navy-600); }

/* ---------- App-specific legacy classes (re-skinned) ---------- */
.criteria-header, .criteria-main {
    background: var(--grad-navy) !important; color: #fff !important;
    border-radius: var(--radius-sm) !important;
}
.criteria-sub {
    background: var(--gold-100) !important; color: var(--navy-800) !important;
    border-left: 5px solid var(--gold-500) !important; border-radius: var(--radius-sm) !important;
}
.criteria-item-box { border-radius: var(--radius-sm) !important; }
.criteria-item-box:hover { border-color: var(--navy-500) !important; box-shadow: var(--shadow-sm); }
.announcement-box {
    border-left: 5px solid var(--gold-500) !important;
    background: var(--gold-100) !important;
    border-radius: var(--radius-sm) !important;
}
.modal-header { background: var(--grad-navy) !important; color: #fff; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
.modal-content { border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* ---------- Login page ---------- */
.login-body {
    background: var(--grad-navy) !important;
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.login-body::before {
    content: ""; position: fixed; inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(204,162,39,.18), transparent 45%),
                radial-gradient(circle at 85% 80%, rgba(51,82,156,.35), transparent 50%);
    pointer-events: none;
}
.login-container {
    background: rgba(255, 255, 255, .97) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow-lg) !important;
    border-top: 5px solid var(--gold-500);
}
.logo-img { border-color: var(--gold-500) !important; box-shadow: 0 6px 18px rgba(13,27,62,.18); }
.school-name { color: var(--navy-800) !important; }

/* ---------- Misc ---------- */
hr { border-color: var(--line); opacity: 1; }
::selection { background: var(--gold-400); color: var(--navy-900); }
.list-group-item-action:hover { background: var(--bg-2); }