/* =====================================================================
   CT SMART SCHOOL — Design System
   โรงเรียนบ้านจันทน์หอมตาเสก
   ===================================================================== */

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

:root{
  --ctss-primary:#7C3AED;
  --ctss-primary-dark:#5B21B6;
  --ctss-secondary:#2563EB;
  --ctss-accent:#06B6D4;
  --ctss-success:#10B981;
  --ctss-warning:#F59E0B;
  --ctss-danger:#EF4444;

  --ctss-gradient: linear-gradient(135deg, var(--ctss-primary) 0%, var(--ctss-secondary) 55%, var(--ctss-accent) 100%);

  --ctss-bg:#F5F6FB;
  --ctss-surface:#FFFFFF;
  --ctss-surface-alt:#F9FAFC;
  --ctss-border:#E7E9F3;
  --ctss-text:#1F2333;
  --ctss-text-muted:#6B7280;
  --ctss-sidebar-bg:#181B2E;
  --ctss-sidebar-text:#C7CAE0;

  --ctss-radius:16px;
  --ctss-radius-sm:10px;
  --ctss-shadow:0 8px 24px rgba(31,35,51,.06);
  --ctss-shadow-lg:0 16px 40px rgba(31,35,51,.10);

  --ctss-font-scale:1;
}

[data-theme="dark"]{
  --ctss-bg:#12131E;
  --ctss-surface:#1B1D2E;
  --ctss-surface-alt:#20223A;
  --ctss-border:#2C2F49;
  --ctss-text:#EDEEF7;
  --ctss-text-muted:#9498B8;
  --ctss-sidebar-bg:#0D0E19;
  --ctss-sidebar-text:#A9ADD1;
  --ctss-shadow:0 8px 24px rgba(0,0,0,.35);
  --ctss-shadow-lg:0 16px 40px rgba(0,0,0,.45);
}

/* Font-size control: applies a scale multiplier system-wide */
[data-font="small"]{ --ctss-font-scale:0.9; }
[data-font="normal"]{ --ctss-font-scale:1; }
[data-font="large"]{ --ctss-font-scale:1.15; }
[data-font="xlarge"]{ --ctss-font-scale:1.3; }

html{ font-size: calc(16px * var(--ctss-font-scale)); }

*{ box-sizing:border-box; }

body{
  font-family:'Kanit','Segoe UI',sans-serif;
  background:var(--ctss-bg);
  color:var(--ctss-text);
  transition:background .25s ease,color .25s ease;
  font-size:1rem;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; }

/* ---------- Utility gradient ---------- */
.ctss-gradient{ background:var(--ctss-gradient); }
.ctss-text-gradient{
  background:var(--ctss-gradient);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn-ctss{
  background:var(--ctss-gradient); border:none; color:#fff; font-weight:600;
  padding:.65rem 1.5rem; border-radius:var(--ctss-radius-sm);
  box-shadow:0 6px 16px rgba(124,58,237,.28);
  transition:transform .15s ease, box-shadow .15s ease; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-ctss:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(124,58,237,.35); color:#fff; }
.btn-outline-ctss{
  border:1.5px solid var(--ctss-primary); color:var(--ctss-primary); background:transparent; font-weight:600;
  padding:.6rem 1.4rem; border-radius:var(--ctss-radius-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-align:center;
}
.btn-outline-ctss:hover{ background:var(--ctss-primary); color:#fff; }

.btn-ctss{ justify-content:center; text-align:center; }
.btn-ctss, .btn-outline-ctss{ line-height:1.2; }

/* ---------- Cards ---------- */
.card-ctss{
  background:var(--ctss-surface); border:1px solid var(--ctss-border);
  border-radius:var(--ctss-radius); box-shadow:var(--ctss-shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card-ctss:hover{ box-shadow:var(--ctss-shadow-lg); }

.stat-card{
  border-radius:var(--ctss-radius); padding:1.4rem; color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--ctss-shadow-lg);
}
.stat-card .stat-icon{
  width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.stat-card h3{ font-size:1.9rem; font-weight:800; margin:.4rem 0 0; }
.stat-card p{ margin:0; opacity:.9; font-size:.9rem; }
.stat-card.g1{ background:linear-gradient(135deg,#7C3AED,#5B21B6); }
.stat-card.g2{ background:linear-gradient(135deg,#2563EB,#1D4ED8); }
.stat-card.g3{ background:linear-gradient(135deg,#06B6D4,#0891B2); }
.stat-card.g4{ background:linear-gradient(135deg,#10B981,#059669); }
.stat-card.g5{ background:linear-gradient(135deg,#F59E0B,#D97706); }
.stat-card.g6{ background:linear-gradient(135deg,#EF4444,#DC2626); }

/* ---------- Sidebar (admin) ---------- */
.ctss-sidebar{
  width:260px; background:var(--ctss-sidebar-bg); color:var(--ctss-sidebar-text);
  height:100vh; position:fixed; top:0; left:0; z-index:1030; transition:width .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.ctss-sidebar.collapsed{ width:80px; }
.ctss-sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:1.2rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.ctss-sidebar .brand img{ width:38px;height:38px;border-radius:10px;background:#fff; object-fit:contain; }
.ctss-sidebar .brand-text{ font-weight:800; font-size:1rem; color:#fff; line-height:1.2; }
.ctss-sidebar .brand-text small{ display:block; font-weight:400; font-size:.7rem; color:var(--ctss-sidebar-text); }
.ctss-sidebar nav{
  overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-height:0; padding:.8rem 0;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent;
}
.ctss-sidebar nav::-webkit-scrollbar{ width:6px; }
.ctss-sidebar nav::-webkit-scrollbar-track{ background:transparent; }
.ctss-sidebar nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.ctss-sidebar nav::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35); }
.ctss-sidebar .nav-section-title{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:#666B94; padding:1rem 1.2rem .3rem; }
.ctss-sidebar .nav-link{
  display:flex; align-items:center; gap:.8rem; padding:.65rem 1.2rem; color:var(--ctss-sidebar-text);
  border-radius:0; font-size:.92rem; font-weight:500; border-left:3px solid transparent;
}
.ctss-sidebar .nav-link i, .ctss-sidebar .nav-link svg{ width:18px; flex-shrink:0; }
.ctss-sidebar .nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.ctss-sidebar .nav-link.active{ background:rgba(124,58,237,.18); color:#fff; border-left-color:var(--ctss-accent); }
.ctss-sidebar.collapsed .brand-text, .ctss-sidebar.collapsed .nav-section-title, .ctss-sidebar.collapsed .nav-label{ display:none; }

.ctss-main{ margin-left:260px; transition:margin-left .2s ease; min-height:100vh; display:flex; flex-direction:column; }
.ctss-main.expanded{ margin-left:80px; }

.ctss-topbar{
  background:var(--ctss-surface); border-bottom:1px solid var(--ctss-border);
  padding:.8rem 1.4rem; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1020;
}
.ctss-topbar h5, .ctss-topbar nav, .ctss-topbar nav a{ color:var(--ctss-text); }
.ctss-topbar .btn:not(.btn-light):not(.btn-ctss):not(.btn-outline-ctss),
.ctss-topbar .dropdown-toggle{
  color:var(--ctss-text) !important;
}
.ctss-topbar .border.rounded-pill{ border-color:var(--ctss-border) !important; }
.ctss-content{ padding:1.5rem; flex:1; }

@media (max-width:991.98px){
  .ctss-sidebar{ transform:translateX(-100%); width:260px; }
  .ctss-sidebar.show{ transform:translateX(0); }
  .ctss-main, .ctss-main.expanded{ margin-left:0; }
  .sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1025; display:none; }
  .sidebar-backdrop.show{ display:block; }
}

/* ---------- Forms ---------- */
.form-control, .form-select{
  background:var(--ctss-surface); border:1.5px solid var(--ctss-border); color:var(--ctss-text);
  border-radius:var(--ctss-radius-sm); padding:.65rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--ctss-primary); box-shadow:0 0 0 .2rem rgba(124,58,237,.15); background:var(--ctss-surface); color:var(--ctss-text);
}
.form-label{ font-weight:600; font-size:.88rem; margin-bottom:.4rem; }

/* ---------- Table ---------- */
.table-ctss{ background:var(--ctss-surface); border-radius:var(--ctss-radius); overflow:hidden; }
.table-ctss thead th{ background:var(--ctss-surface-alt); color:var(--ctss-text-muted); font-size:.8rem; text-transform:uppercase; border:none; padding:.9rem 1rem; }
.table-ctss td{ padding:.85rem 1rem; vertical-align:middle; border-color:var(--ctss-border); color:var(--ctss-text); }
.table-responsive-ctss{ overflow-x:auto; border-radius:var(--ctss-radius); box-shadow:var(--ctss-shadow); }

/* ---------- Badge ---------- */
.badge-ctss{ padding:.4em .8em; border-radius:100px; font-weight:600; font-size:.75rem; }

/* ---------- Public site ---------- */
.site-header{ background:var(--ctss-surface); box-shadow:0 2px 12px rgba(0,0,0,.05); position:sticky; top:0; z-index:1030; }
.site-header .navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.site-header .navbar-brand img{ width:44px; height:44px; object-fit:contain; }
.site-header .navbar-brand .name{ font-weight:800; font-size:1rem; line-height:1.2; color:var(--ctss-text); }
.site-header .navbar-brand .name small{ display:block; font-weight:400; font-size:.72rem; color:var(--ctss-text-muted); }
.site-header .nav-link{ font-weight:600; color:var(--ctss-text); padding:.5rem 1rem !important; }
.site-header .nav-link:hover{ color:var(--ctss-primary); }
.site-header .btn:not(.btn-ctss):not(.btn-outline-ctss),
.site-header .dropdown-toggle{ color:var(--ctss-text) !important; }
.site-header .border.rounded-pill{ border-color:var(--ctss-border) !important; }

.hero-section{
  position:relative; color:#fff; padding:5.5rem 0 6rem; overflow:hidden;
  background:var(--ctss-gradient);
}
.hero-section .hero-bg-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero-section::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%),
             radial-gradient(circle at 85% 80%, rgba(255,255,255,.12), transparent 45%);
}
.hero-section .container{ position:relative; z-index:1; }
.hero-section h1{ font-weight:800; font-size:2.6rem; }
.hero-section p.lead{ opacity:.92; font-size:1.15rem; }

.section-title{ font-weight:800; font-size:1.9rem; margin-bottom:.4rem; }
.section-sub{ color:var(--ctss-text-muted); margin-bottom:2rem; }

.news-card{ border-radius:var(--ctss-radius); overflow:hidden; background:var(--ctss-surface); box-shadow:var(--ctss-shadow); border:1px solid var(--ctss-border); height:100%; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.news-card:hover{ transform:translateY(-6px); box-shadow:var(--ctss-shadow-lg); }
.news-card img{ height:190px; width:100%; object-fit:cover; }
.news-card .body{ padding:1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.news-card .cat{ font-size:.72rem; font-weight:700; color:var(--ctss-primary); text-transform:uppercase; letter-spacing:.03em; }
.news-card h5{ font-weight:700; font-size:1.05rem; margin:.4rem 0; }
.news-card .date{ font-size:.78rem; color:var(--ctss-text-muted); margin-bottom:.5rem; }
.news-card p.excerpt{ color:var(--ctss-text-muted); font-size:.9rem; flex:1; }

.gallery-item{ border-radius:var(--ctss-radius-sm); overflow:hidden; position:relative; cursor:pointer; aspect-ratio:1/1; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gallery-item:hover img{ transform:scale(1.08); }

.site-footer{ background:#14162A; color:#B7BADC; }
.site-footer h6{ color:#fff; font-weight:700; margin-bottom:1rem; }
.site-footer a{ color:#B7BADC; }
.site-footer a:hover{ color:#fff; }
.site-footer .bottom-bar{ background:#0D0E19; padding:1rem 0; font-size:.85rem; }

/* ---------- Login page ---------- */
.login-wrapper{ min-height:100vh; display:flex; }
.login-brand-panel{
  flex:1; background:var(--ctss-gradient); color:#fff; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:3rem; position:relative; overflow:hidden;
}
.login-brand-panel::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 15%, rgba(255,255,255,.18), transparent 40%),
             radial-gradient(circle at 85% 85%, rgba(255,255,255,.15), transparent 45%);
}
.login-brand-panel > *{ position:relative; z-index:1; }
.login-brand-panel img.logo{ width:100px; height:100px; object-fit:contain; background:#fff; border-radius:24px; padding:12px; margin-bottom:1.5rem; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.login-brand-panel h2{ font-weight:800; }
.login-form-panel{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--ctss-bg); padding:2rem; }
.login-form-box{ width:100%; max-width:400px; }
@media (max-width:900px){
  .login-brand-panel{ display:none; }
}

/* ---------- Misc ---------- */
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--ctss-text-muted); }
.skeleton{ background:linear-gradient(90deg,var(--ctss-border) 25%,var(--ctss-surface-alt) 37%,var(--ctss-border) 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:8px; }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--ctss-border); border-radius:8px; }

.dropdown-menu{ background:var(--ctss-surface); border-color:var(--ctss-border); color:var(--ctss-text); }
.dropdown-item{ color:var(--ctss-text); }
.dropdown-item:hover{ background:var(--ctss-surface-alt); color:var(--ctss-text); }
.modal-content{ background:var(--ctss-surface); color:var(--ctss-text); border-radius:var(--ctss-radius); }