/**
 * 4px Grid System
 * ทุกขนาด (spacing, padding, margin, height) ต้องหาร 4 ลงตัว
 *
 * หลักการ:
 * - Base unit = 4px
 * - ทุกค่าเป็นตัวคูณของ 4
 * - ทำให้ UI สม่ำเสมอและ align กันอย่างสวยงาม
 */

:root {
  /* ========================================
     Base Unit
     ======================================== */
  --grid: 4px;

  /* ========================================
     Spacing Scale
     sp-{n} = 4px × n
     ======================================== */
  --sp-0: 0;
  --sp-1: 4px;    /* 4 × 1 */
  --sp-2: 8px;    /* 4 × 2 */
  --sp-3: 12px;   /* 4 × 3 */
  --sp-4: 16px;   /* 4 × 4 */
  --sp-5: 20px;   /* 4 × 5 */
  --sp-6: 24px;   /* 4 × 6 */
  --sp-7: 28px;   /* 4 × 7 */
  --sp-8: 32px;   /* 4 × 8 */
  --sp-9: 36px;   /* 4 × 9 */
  --sp-10: 40px;  /* 4 × 10 */
  --sp-11: 44px;  /* 4 × 11 */
  --sp-12: 48px;  /* 4 × 12 */
  --sp-14: 56px;  /* 4 × 14 */
  --sp-16: 64px;  /* 4 × 16 */
  --sp-18: 72px;  /* 4 × 18 */
  --sp-20: 80px;  /* 4 × 20 */
  --sp-24: 96px;  /* 4 × 24 */
  --sp-25: 100px; /* 4 × 25 */

  /* ========================================
     Component Heights
     ======================================== */
  --h-input: 40px;      /* 4 × 10 - input, select */
  --h-input-lg: 44px;   /* 4 × 11 - large input */
  --h-button: 44px;     /* 4 × 11 - button */
  --h-button-sm: 32px;  /* 4 × 8  - small button */
  --h-header: 60px;     /* 4 × 15 - header */
  --h-menu: 44px;       /* 4 × 11 - menu item */
  --h-submenu: 40px;    /* 4 × 10 - submenu item */
  --h-card-min: 128px;  /* 4 × 32 - min card height */

  /* ========================================
     Table Row Heights
     ======================================== */
  --h-row-compact: 28px;    /* 4 × 7  - สถิติ, ข้อมูลเยอะ */
  --h-row-dense: 32px;      /* 4 × 8  - ตารางรายงาน compact */
  --h-row-standard: 36px;   /* 4 × 9  - header ตาราง */
  --h-row-comfortable: 40px; /* 4 × 10 - ตารางข้อมูลทั่วไป */
  --h-row-spacious: 44px;   /* 4 × 11 - รายการหลัก, touch-friendly */

  /* ========================================
     Border Radius
     ======================================== */
  --radius-sm: 4px;   /* 4 × 1 */
  --radius-md: 8px;   /* 4 × 2 */
  --radius-lg: 12px;  /* 4 × 3 */
  --radius-xl: 16px;  /* 4 × 4 */
  --radius-full: 9999px;

  /* ========================================
     Container Widths
     ======================================== */
  --container-sm: 640px;   /* 4 × 160 */
  --container-md: 768px;   /* 4 × 192 */
  --container-lg: 1024px;  /* 4 × 256 */
  --container-xl: 1200px;  /* 4 × 300 */
  --container-2xl: 1440px; /* 4 × 360 */

  /* ========================================
     Sidebar
     ======================================== */
  --sidebar-width: 240px;  /* 4 × 60 */

  /* ========================================
     Gap / Gutter
     ======================================== */
  --gap-xs: 4px;   /* 4 × 1 */
  --gap-sm: 8px;   /* 4 × 2 */
  --gap-md: 12px;  /* 4 × 3 */
  --gap-lg: 16px;  /* 4 × 4 */
  --gap-xl: 20px;  /* 4 × 5 */
  --gap-2xl: 24px; /* 4 × 6 */

  /* ========================================
     Content Padding
     ======================================== */
  --content-padding: 20px;         /* 4 × 5 - desktop */
  --content-padding-mobile: 16px;  /* 4 × 4 - mobile */

  /* ========================================
     Font Sizes (สำหรับ reference)
     ======================================== */
  --text-xs: 12px;   /* 4 × 3 */
  --text-sm: 14px;   /* ไม่หาร 4 ลงตัว แต่เป็นมาตรฐาน */
  --text-base: 16px; /* 4 × 4 */
  --text-lg: 18px;   /* ไม่หาร 4 ลงตัว แต่เป็นมาตรฐาน */
  --text-xl: 20px;   /* 4 × 5 */
  --text-2xl: 24px;  /* 4 × 6 */

  /* ========================================
     Line Heights
     ======================================== */
  --leading-tight: 20px;   /* 4 × 5 */
  --leading-normal: 24px;  /* 4 × 6 */
  --leading-relaxed: 28px; /* 4 × 7 */
  --leading-loose: 32px;   /* 4 × 8 */

  /* ========================================
     Icon Sizes
     ======================================== */
  --icon-xs: 16px;  /* 4 × 4 */
  --icon-sm: 20px;  /* 4 × 5 */
  --icon-md: 24px;  /* 4 × 6 */
  --icon-lg: 32px;  /* 4 × 8 */
  --icon-xl: 40px;  /* 4 × 10 */
}

/* ========================================
   Utility Classes (optional)
   ======================================== */

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--sp-1) !important; }
.p-2 { padding: var(--sp-2) !important; }
.p-3 { padding: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }
.p-5 { padding: var(--sp-5) !important; }
.p-6 { padding: var(--sp-6) !important; }

/* Padding X (left & right) */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.px-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }
.px-6 { padding-left: var(--sp-6) !important; padding-right: var(--sp-6) !important; }

/* Padding Y (top & bottom) */
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.py-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }
.py-6 { padding-top: var(--sp-6) !important; padding-bottom: var(--sp-6) !important; }

/* Margin */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--sp-1) !important; }
.m-2 { margin: var(--sp-2) !important; }
.m-3 { margin: var(--sp-3) !important; }
.m-4 { margin: var(--sp-4) !important; }
.m-5 { margin: var(--sp-5) !important; }
.m-6 { margin: var(--sp-6) !important; }

/* Margin X */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
.mx-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
.mx-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
.mx-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.my-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.my-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
.my-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }

/* Gap */
.gap-1 { gap: var(--sp-1) !important; }
.gap-2 { gap: var(--sp-2) !important; }
.gap-3 { gap: var(--sp-3) !important; }
.gap-4 { gap: var(--sp-4) !important; }
.gap-5 { gap: var(--sp-5) !important; }
.gap-6 { gap: var(--sp-6) !important; }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Heights */
.h-input { height: var(--h-input) !important; }
.h-button { height: var(--h-button) !important; }
.h-menu { height: var(--h-menu) !important; }
.h-table-row { height: var(--h-table-row) !important; }