@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
    --smis-blue-deep: #0F356B;
    --smis-blue: #1557A6;
    --smis-blue-light: #4f83e8;
    --smis-gold: #D9A928;
    --smis-gold-light: #e8c874;
    --smis-white: #ffffff;
    --smis-bg: #F4F7FB;
    --smis-radius: 16px;
    --smis-shadow: 0 8px 24px rgba(11, 61, 145, 0.10);
}

* { box-sizing: border-box; }

body {
    font-family: 'Prompt', 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
    background: var(--smis-bg);
    color: #1c2733;
    margin: 0;
}

.smis-shell { min-height: 100vh; }

/* Sidebar managed by sidebar.css */









/* Topbar managed by sidebar.css */

/* Card managed by sidebar.css */

.smis-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    background: linear-gradient(135deg, var(--smis-blue), var(--smis-blue-light));
}

.smis-stat-icon.gold {
    background: linear-gradient(135deg, var(--smis-gold), var(--smis-gold-light));
}

.smis-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--smis-blue-deep);
}

/* ---------- Login ---------- */
.smis-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, var(--smis-blue-light), var(--smis-blue-deep));
    padding: 1rem;
}

.smis-login-card {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 2.25rem 2rem;
    border-top: 4px solid var(--smis-gold);
}

.smis-login-card h1 {
    color: var(--smis-blue-deep);
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* btn-smis managed by sidebar.css */

/* ---------- Dark mode ---------- */
[data-theme="dark"] body {
    background: #0e1420;
    color: #e6ecf7;
}

[data-theme="dark"] .smis-card,
[data-theme="dark"] .smis-topbar {
    background: rgba(20, 28, 45, 0.85);
    border-color: rgba(201, 154, 46, 0.25);
}

/* Mobile sidebar managed by sidebar.css */

/* =====================================================================
   Home App-Icon Grid (มือถือเป็นหลัก) — แทนที่ sidebar เดิม
   ===================================================================== */

.smis-topbar2 {
    background: linear-gradient(135deg, var(--smis-blue-deep), var(--smis-blue));
    color: #fff;
    padding: 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 12px rgba(11, 61, 145, 0.25);
}

.smis-topbar2 .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
}

.smis-topbar2 .brand i { color: var(--smis-gold-light); font-size: 1.3rem; }

.smis-topbar2 .actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1.3rem;
}

.smis-topbar2 .actions a { color: #fff; text-decoration: none; opacity: 0.9; }
.smis-topbar2 .actions a:hover { opacity: 1; }

/* แถบต้อนรับผู้ใช้ — กรอบโปร่งใสสไตล์ glassmorphism บน topbar */
.smis-welcome {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 0.3rem 1rem 0.3rem 0.3rem;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.smis-welcome img {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.smis-welcome .avatar-fallback {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.smis-welcome .info { line-height: 1.15; }
.smis-welcome .info .name { font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.smis-welcome .info .role { font-size: 0.68rem; opacity: 0.88; white-space: nowrap; }

@media (max-width: 576px) {
    .smis-welcome .info { display: none; }
    .smis-welcome { padding: 0.3rem; }
}

/* Footer ท้ายเว็บ */
.smis-footer {
    background: linear-gradient(135deg, var(--smis-blue-deep), var(--smis-blue));
    color: #fff;
    text-align: center;
    padding: 1.1rem 1rem;
    font-size: 0.82rem;
    margin-top: 2rem;
}
.smis-footer .dev-credit {
    opacity: 0.85;
    font-size: 0.74rem;
    margin-top: 0.25rem;
}

.smis-app-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.1rem 0.9rem 2rem;
}

.smis-app-greeting {
    color: var(--smis-blue-deep);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.smis-app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

@media (min-width: 576px) {
    .smis-app-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) {
    .smis-app-grid { grid-template-columns: repeat(6, 1fr); }
}

.smis-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    padding: 1.2rem 0.4rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(11, 61, 145, 0.08);
    border: 1px solid rgba(11, 61, 145, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    min-height: 108px;
}

.smis-app-tile:active,
.smis-app-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 61, 145, 0.16);
}

.icon-wrap {
    width: 55px;
    height: 55px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.62rem;
    color: #fff;
}

.icon-wrap i {
    color: #fff;
}

/* แถบแจ้งเตือนด่วน — สีเหลืองเน้น + ไอคอนกระพริบ */
.smis-announcement-bar {
    background: linear-gradient(135deg, #fff3c4, #ffe066);
    border: 1px solid #f5c518;
    border-radius: 14px;
    padding: 0.85rem 1.2rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #6b5000;
    box-shadow: 0 3px 10px rgba(245, 197, 24, 0.25);
}

.smis-announcement-bar i {
    font-size: 1.3rem;
    color: #b8860b;
    flex-shrink: 0;
}

.smis-blink {
    animation: smis-blink-anim 1.1s ease-in-out infinite;
}

@keyframes smis-blink-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.smis-app-tile .label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #33415c;
    text-align: center;
    line-height: 1.2;
}

/* ชุดสีไล่โทนสำหรับแต่ละหมวดหมู่ (ทันสมัย ไม่ใช้การ์ตูน) */
.tone-blue   { background: linear-gradient(135deg, #2a6bd6, #0b3d91); }
.tone-gold   { background: linear-gradient(135deg, #e8c874, #c99a2e); }
.tone-green  { background: linear-gradient(135deg, #3ec98f, #1f8f5f); }
.tone-red    { background: linear-gradient(135deg, #ef6b6b, #c0392b); }
.tone-purple { background: linear-gradient(135deg, #9c7bea, #6b46c1); }
.tone-teal   { background: linear-gradient(135deg, #4fd1c5, #14877e); }
.tone-gray   { background: linear-gradient(135deg, #9aa5b1, #667080); }

.smis-app-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #7c8aa0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1.4rem 0 0.6rem;
}

/* =====================================================================
   Status Color System — สีสถานะมาตรฐานทั้งระบบ (เช็กชื่อ/พฤติกรรม/รายงาน)
   ===================================================================== */

:root {
    --status-present:     #16a34a;
    --status-present-bg:  #dcfce7;
    --status-absent:      #dc2626;
    --status-absent-bg:   #fee2e2;
    --status-late:        #d97706;
    --status-late-bg:     #fef3c7;
    --status-leave:       #2563eb;
    --status-leave-bg:    #dbeafe;
    --status-activity:    #7c3aed;
    --status-activity-bg: #ede9fe;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.32em 0.75em;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.76rem;
    white-space: nowrap;
}
.badge-status-present  { background: var(--status-present-bg);  color: var(--status-present); }
.badge-status-absent   { background: var(--status-absent-bg);   color: var(--status-absent); }
.badge-status-late     { background: var(--status-late-bg);     color: var(--status-late); }
.badge-status-leave    { background: var(--status-leave-bg);    color: var(--status-leave); }
.badge-status-activity { background: var(--status-activity-bg); color: var(--status-activity); }

/* ป้ายสีความหมายทั่วไป — ใช้กับสถานะอื่นๆ นอกเหนือจากเช็กชื่อ (พฤติกรรม/เยี่ยมบ้าน/แจ้งเหตุ/SDQ ฯลฯ) */
.badge-status-green  { background: var(--status-present-bg);  color: var(--status-present); }
.badge-status-red    { background: var(--status-absent-bg);   color: var(--status-absent); }
.badge-status-amber  { background: var(--status-late-bg);     color: var(--status-late); }
.badge-status-blue   { background: var(--status-leave-bg);    color: var(--status-leave); }
.badge-status-purple { background: var(--status-activity-bg); color: var(--status-activity); }
.badge-status-gray   { background: #eef1f5; color: #64748b; }

/* ปุ่มเลือกสถานะแบบ pill (ใช้แทน radio ธรรมดาในหน้าเช็กชื่อ) */
.status-picker {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.status-picker input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.status-picker label {
    padding: 0.32em 0.85em;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    color: #64748b;
    background: #fff;
    transition: all 0.15s ease;
    user-select: none;
    display: inline-block;
}
.status-picker label:hover { border-color: #b8c4d6; }
.status-picker input[value="present"]:checked + label { background: var(--status-present); border-color: var(--status-present); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,0.35); }
.status-picker input[value="absent"]:checked  + label { background: var(--status-absent);  border-color: var(--status-absent);  color: #fff; box-shadow: 0 2px 6px rgba(220,38,38,0.35); }
.status-picker input[value="late"]:checked    + label { background: var(--status-late);    border-color: var(--status-late);    color: #fff; box-shadow: 0 2px 6px rgba(217,119,6,0.35); }
.status-picker input[value="leave"]:checked   + label { background: var(--status-leave);   border-color: var(--status-leave);   color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,0.35); }
.status-picker input[value="activity"]:checked + label { background: var(--status-activity); border-color: var(--status-activity); color: #fff; box-shadow: 0 2px 6px rgba(124,58,237,0.35); }
.status-picker input[value="pass"]:checked  + label { background: var(--status-present); border-color: var(--status-present); color: #fff; box-shadow: 0 2px 6px rgba(22,163,74,0.35); }
.status-picker input[value="fail"]:checked  + label { background: var(--status-absent);  border-color: var(--status-absent);  color: #fff; box-shadow: 0 2px 6px rgba(220,38,38,0.35); }
.status-picker input[value="personal_leave"]:checked + label { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,0.35); }
.status-picker input[value="sick_leave"]:checked     + label { background: #db2777; border-color: #db2777; color: #fff; box-shadow: 0 2px 6px rgba(219,39,119,0.35); }

/* แถวตาราง/การ์ด ไฮไลต์อ่อนๆ ตามสถานะ (ใช้ในตารางรายงาน) */
.row-tint-present  { background: var(--status-present-bg) !important; }
.row-tint-absent   { background: var(--status-absent-bg) !important; }
.row-tint-late     { background: var(--status-late-bg) !important; }
.row-tint-leave    { background: var(--status-leave-bg) !important; }
.row-tint-empty    { background: #f4f5f7 !important; }