/**
 * Optical Shop Management System - Custom Styles
 * Font: LINE Seed Sans TH | Theme: Modern Blue-White
 */

/* LINE Seed Sans TH - @font-face declarations */
@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../../font/LINESeedSansTH_W_Th.woff2') format('woff2'),
       url('../../font/LINESeedSansTH_W_Th.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../../font/LINESeedSansTH_W_Rg.woff2') format('woff2'),
       url('../../font/LINESeedSansTH_W_Rg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../../font/LINESeedSansTH_W_Bd.woff2') format('woff2'),
       url('../../font/LINESeedSansTH_W_Bd.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../../font/LINESeedSansTH_W_XBd.woff2') format('woff2'),
       url('../../font/LINESeedSansTH_W_XBd.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../../font/LINESeedSansTH_W_He.woff2') format('woff2'),
       url('../../font/LINESeedSansTH_W_He.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Apply font to body */
body {
  font-family: 'LINE Seed Sans TH', 'Sarabun', sans-serif;
}

/* Custom color palette - Blue-White theme */
:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
}

/* Mobile-first responsive utilities */
@media (max-width: 640px) {
  .sidebar-collapse {
    transform: translateX(-100%);
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Sidebar: grouped navigation (details/summary) */
.nav-side-details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.nav-side-details > summary::-webkit-details-marker {
  display: none;
}
.nav-side-details > summary .nav-side-chevron {
  transition: transform 0.2s ease;
}
.nav-side-details[open] > summary .nav-side-chevron {
  transform: rotate(90deg);
}
.nav-side-details[open] > summary {
  background-color: rgba(255, 255, 255, 0.12);
}