/* =============================================================
   MITSUYA E-COMMERCE — OFFICIAL COLOUR THEME  (client-approved)
   Palette: https://coolors.co/d81727-828282-1d3557-ffffff-f1f6f9
   Requirement: พื้นหลัง = เทาอ่อน/ขาว · ไฮไลท์ = แดง
   ใช้ไฟล์นี้เป็น source of truth ของทุกหน้าจอ Mitsuya
   วิธีใช้:  <link rel="stylesheet" href=".../Theme/mitsuya-theme.css">
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  /* ---------- 1) Brand palette (client hex — อย่าแก้) ---------- */
  --c-red:    #D81727;   /* highlight / accent */
  --c-gray:   #828282;   /* secondary text   */
  --c-navy:   #1D3557;   /* structure        */
  --c-white:  #FFFFFF;   /* surface          */
  --c-light:  #F1F6F9;   /* page background  */

  /* ---------- 2) Derived shades ---------- */
  --red-800:#8E0E18; --red-700:#B0121E; --red-600:#D81727; --red-500:#E3414C;
  --red-100:#FAD3D7; --red-50:#FCE9EB;
  --navy-800:#14253E; --navy-700:#16273F; --navy-600:#1D3557; --navy-500:#2C4A73;
  --navy-200:#B9C6D8; --navy-100:#D5DEEA; --navy-50:#E9EEF4;
  --gray-700:#5E5E5E; --gray-500:#828282; --gray-400:#A7ACB2; --gray-300:#C9CDD3;

  /* ---------- 3) Semantic tokens (ใช้ตัวนี้เวลาออกแบบ) ---------- */
  --bg:            #F1F6F9;   /* page background — เทาอ่อน */
  --surface:       #FFFFFF;   /* cards / panels — ขาว */
  --surface-2:     #F7FAFC;   /* zebra / subtle fill */

  --highlight:     #D81727;   /* ★ ไฮไลท์แดง: CTA, active, key number */
  --highlight-hover:#B0121E;
  --highlight-soft:#FCE9EB;   /* red tint background */

  --ink:           #1D3557;   /* headings / ตัวอักษรหลัก (navy) */
  --ink-2:         #3E4C61;   /* body text */
  --muted:         #828282;   /* secondary text */

  --line:          #E1E8EF;   /* borders */
  --line-2:        #EDF1F5;   /* subtle dividers */

  --sidebar:       #1D3557;   /* navy frame */
  --sidebar-ink:   #C2D0E2;
  --sidebar-active:#D81727;   /* red active item */

  --ok:   #1A8A5A;  --ok-soft:#E3F4EC;
  --warn: #B7791F;  --warn-soft:#FBF0DC;
  --danger:#D81727; --danger-soft:#FCE9EB;
  --info: #1D3557;  --info-soft:#E9EEF4;

  --focus-ring: 0 0 0 3px rgba(216,23,39,.28);
  --shadow:    0 1px 2px rgba(29,53,87,.06), 0 4px 16px rgba(29,53,87,.06);
  --shadow-lg: 0 14px 44px rgba(20,37,62,.18);
  --radius:    12px;
  --radius-sm: 8px;
  --font: 'Sarabun','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ---------- 4) Back-compat aliases (ให้ prototype เดิม drop-in ได้) ----------
     แทนที่ :root ของ style.css เดิมด้วยไฟล์นี้แล้วสีจะอัปเดตตามธีม */
  --brand: var(--navy-600);  --brand-700: var(--navy-700);  --brand-50: var(--navy-50);
  --accent: var(--highlight);  --accent-700: var(--highlight-hover);
  --ink-3: var(--muted);
  --card: var(--surface);
}

/* =============================================================
   BASE
   ============================================================= */
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--ink-2);
      font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ color:var(--ink); font-weight:800; line-height:1.25; }
a{ color:var(--highlight); text-decoration:none; }
::selection{ background:var(--highlight-soft); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px;
      border-radius:10px; border:1.5px solid transparent; font-family:inherit;
      font-size:14px; font-weight:700; cursor:pointer; transition:.14s; white-space:nowrap; }
.btn-sm{ height:32px; padding:0 12px; font-size:13px; border-radius:8px; }
.btn-lg{ height:48px; padding:0 24px; font-size:15px; }

/* ★ primary = red highlight */
.btn-primary{ background:var(--highlight); color:#fff; }
.btn-primary:hover{ background:var(--highlight-hover); }
.btn-primary:focus-visible{ box-shadow:var(--focus-ring); outline:none; }

/* navy = structural action */
.btn-navy{ background:var(--navy-600); color:#fff; }
.btn-navy:hover{ background:var(--navy-700); }

/* ghost / secondary */
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy-200); background:var(--surface-2); }

/* outline-red */
.btn-outline{ background:var(--surface); color:var(--highlight); border-color:var(--highlight); }
.btn-outline:hover{ background:var(--highlight-soft); }

.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ background:var(--highlight-hover); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* =============================================================
   SURFACES
   ============================================================= */
.card, .panel{ background:var(--surface); border:1px solid var(--line);
               border-radius:var(--radius); box-shadow:var(--shadow); }
.panel-head{ display:flex; align-items:center; gap:10px; padding:15px 18px;
             border-bottom:1px solid var(--line); }
.panel-head h2{ font-size:15px; margin:0; }
.panel-body{ padding:18px; }

/* =============================================================
   BADGES / PILLS / CHIPS
   ============================================================= */
.badge{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px;
        border-radius:999px; font-size:11.5px; font-weight:700; }
.badge-red{   background:var(--highlight-soft); color:var(--highlight); }
.badge-navy{  background:var(--navy-50);  color:var(--navy-600); }
.badge-gray{  background:#EFEFEF;          color:var(--gray-700); }
.badge-ok{    background:var(--ok-soft);   color:var(--ok); }
.badge-warn{  background:var(--warn-soft); color:var(--warn); }

.pill{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700;
       background:var(--highlight-soft); color:var(--highlight); }

/* =============================================================
   TABLES — navy header, red key accents
   ============================================================= */
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--surface);
           border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.tbl thead th{ background:var(--navy-600); color:#fff; text-align:left;
                    padding:12px 14px; font-size:12.5px; font-weight:700; }
table.tbl tbody td{ padding:11px 14px; border-top:1px solid var(--line-2); }
table.tbl tbody tr:nth-child(even){ background:var(--surface-2); }
table.tbl tbody tr:hover{ background:var(--highlight-soft); }

/* =============================================================
   FORMS — red focus ring
   ============================================================= */
.input, input[type=text], input[type=number], input[type=date], input[type=email], select, textarea{
  width:100%; height:42px; border:1.5px solid var(--line); border-radius:10px; padding:0 12px;
  font-family:inherit; font-size:14px; color:var(--ink); background:var(--surface); outline:none; }
textarea{ height:auto; padding:10px 12px; }
.input:focus, input:focus, select:focus, textarea:focus{ border-color:var(--highlight); box-shadow:var(--focus-ring); }
label.field-label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px; }

/* =============================================================
   APP SHELL — navy sidebar, red active
   ============================================================= */
.app{ display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.app-sidebar{ background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column; }
.app-sidebar .brand{ display:flex; align-items:center; gap:10px; padding:18px;
                     border-bottom:1px solid rgba(255,255,255,.10); color:#fff; font-weight:800; font-size:17px; }
.app-sidebar .brand .mark{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
                           background:var(--highlight); color:#fff; font-weight:800; }
.app-sidebar nav{ padding:12px 10px; display:flex; flex-direction:column; gap:2px; }
.app-sidebar nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
                    font-size:13.5px; font-weight:600; color:var(--sidebar-ink); }
.app-sidebar nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.app-sidebar nav a.active{ background:var(--sidebar-active); color:#fff; }   /* ★ red active */

.app-topbar{ height:62px; background:var(--surface); border-bottom:1px solid var(--line);
             display:flex; align-items:center; gap:14px; padding:0 24px; }
.app-topbar h1{ font-size:18px; margin:0; }
.app-main{ display:flex; flex-direction:column; min-width:0; }
.app-content{ padding:22px 24px; }

/* =============================================================
   HELPERS
   ============================================================= */
.text-red{ color:var(--highlight); }
.text-navy{ color:var(--navy-600); }
.text-muted{ color:var(--muted); }
.hl{ color:var(--highlight); font-weight:700; }              /* inline red highlight */
.bg-light{ background:var(--bg); } .bg-white{ background:var(--surface); }
.accent-bar{ border-left:4px solid var(--highlight); padding-left:12px; }  /* red accent bar */
.divider{ height:1px; background:var(--line); border:0; margin:16px 0; }