/**
 * assets/css/nhw-theme.css
 * Unified Central Design System - โรงเรียนนาแห้ววิทยา
 * ระบบจัดการธีม สไตล์ และโทนสีกลางของทั้งระบบ (หน้าหลัก, ระบบครู, ระบบนักเรียน, แอดมิน)
 */

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

:root {
  /* -----------------------------------------------------------------
   * 1. สีอัตลักษณ์ประจำโรงเรียน (School Identity Colors)
   * สามารถปรับแต่งได้จากจุดนี้ หรือผ่านหน้าตั้งค่า Admin
   * ----------------------------------------------------------------- */
  --nhw-primary: #ef6c00;             /* สีส้ม/แสด นาแห้ววิทยา */
  --nhw-primary-hover: #d85d00;
  --nhw-primary-light: #fff3e0;
  --nhw-primary-rgb: 239, 108, 0;

  --nhw-secondary: #1a237e;           /* สีกรมท่า/น้ำเงิน */
  --nhw-secondary-hover: #121858;
  --nhw-secondary-light: #e8eaf6;
  --nhw-secondary-rgb: 26, 35, 126;

  --nhw-accent: #0288d1;              /* สีฟ้าไฮไลต์ */
  --nhw-success: #2e7d32;
  --nhw-warning: #f57f17;
  --nhw-danger: #c62828;
  --nhw-info: #00838f;

  /* -----------------------------------------------------------------
   * 2. พื้นหลังและตัวอักษร (Backgrounds & Typography)
   * ----------------------------------------------------------------- */
  --nhw-font-main: 'Kanit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nhw-bg-page: #f8f9fa;
  --nhw-card-bg: #ffffff;
  --nhw-text-main: #2c3e50;
  --nhw-text-muted: #6c757d;
  --nhw-border-color: #e9ecef;

  /* -----------------------------------------------------------------
   * 3. รัศมีความโค้งและเงา (Border Radius & Shadows)
   * ----------------------------------------------------------------- */
  --nhw-radius-sm: 6px;
  --nhw-radius-md: 12px;
  --nhw-radius-lg: 18px;
  --nhw-radius-full: 9999px;

  --nhw-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --nhw-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --nhw-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --nhw-transition: all 0.25s ease-in-out;
}

/* =================================================================
 * Global Typography & Baseline
 * ================================================================= */
body {
  font-family: var(--nhw-font-main) !important;
  color: var(--nhw-text-main);
  background-color: var(--nhw-bg-page);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--nhw-font-main) !important;
  font-weight: 600;
  color: #1e293b;
}

/* =================================================================
 * Unified Component Styles (UI Components)
 * ================================================================= */

/* Cards */
.nhw-card, .card.nhw-style {
  background: var(--nhw-card-bg);
  border: 1px solid var(--nhw-border-color);
  border-radius: var(--nhw-radius-md);
  box-shadow: var(--nhw-shadow-card);
  transition: var(--nhw-transition);
  overflow: hidden;
}

.nhw-card:hover {
  box-shadow: var(--nhw-shadow-hover);
}

.nhw-card-header {
  background: transparent;
  border-bottom: 1px solid var(--nhw-border-color);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--nhw-secondary);
}

/* Buttons */
.nhw-btn-primary, .btn-nhw-primary {
  background-color: var(--nhw-primary) !important;
  border-color: var(--nhw-primary) !important;
  color: #ffffff !important;
  font-weight: 500;
  border-radius: var(--nhw-radius-sm);
  padding: 0.5rem 1.25rem;
  transition: var(--nhw-transition);
}

.nhw-btn-primary:hover, .btn-nhw-primary:hover {
  background-color: var(--nhw-primary-hover) !important;
  border-color: var(--nhw-primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--nhw-primary-rgb), 0.3);
}

.nhw-btn-secondary, .btn-nhw-secondary {
  background-color: var(--nhw-secondary) !important;
  border-color: var(--nhw-secondary) !important;
  color: #ffffff !important;
  font-weight: 500;
  border-radius: var(--nhw-radius-sm);
  padding: 0.5rem 1.25rem;
  transition: var(--nhw-transition);
}

.nhw-btn-secondary:hover, .btn-nhw-secondary:hover {
  background-color: var(--nhw-secondary-hover) !important;
  border-color: var(--nhw-secondary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.nhw-btn-outline, .btn-nhw-outline {
  background-color: transparent !important;
  border: 1.5px solid var(--nhw-primary) !important;
  color: var(--nhw-primary) !important;
  font-weight: 500;
  border-radius: var(--nhw-radius-sm);
  transition: var(--nhw-transition);
}

.nhw-btn-outline:hover, .btn-nhw-outline:hover {
  background-color: var(--nhw-primary) !important;
  color: #ffffff !important;
}

/* Badges */
.nhw-badge {
  padding: 0.35rem 0.75rem;
  font-size: 0.825rem;
  font-weight: 500;
  border-radius: var(--nhw-radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.nhw-badge-primary {
  background-color: var(--nhw-primary-light);
  color: var(--nhw-primary-hover);
}

.nhw-badge-secondary {
  background-color: var(--nhw-secondary-light);
  color: var(--nhw-secondary);
}

.nhw-badge-success {
  background-color: #e8f5e9;
  color: var(--nhw-success);
}

.nhw-badge-warning {
  background-color: #fff8e1;
  color: var(--nhw-warning);
}

.nhw-badge-danger {
  background-color: #ffebee;
  color: var(--nhw-danger);
}

/* Tables */
.nhw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--nhw-radius-sm);
  overflow: hidden;
}

.nhw-table thead th {
  background-color: var(--nhw-secondary);
  color: #ffffff;
  font-weight: 500;
  padding: 0.85rem 1rem;
  border: none;
}

.nhw-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--nhw-border-color);
}

.nhw-table tbody tr:hover {
  background-color: rgba(var(--nhw-primary-rgb), 0.03);
}

/* Form Inputs Focus Ring */
.form-control:focus, .form-select:focus {
  border-color: var(--nhw-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--nhw-primary-rgb), 0.25) !important;
}