/* =======================================================
  NAME:     app/ui/ksp.css
  VERSION:  v1.1.0
  UPDATED:  2025-09-20 12:20 by L. Mira
  DESCRIPTION: Global design tokens + utilities + base components for KSP Web Apps.
               Mobile-first & Desktop ready. Theming hooks per department.
               ครอบคลุมทุกแผนก และเข้าธีมเดียวกับ Dashboard v1.8.x

  RECENT CHANGES (keep last 3)
  - v1.1.0 | 2025-09-20 12:20 | feat | mobile-first helpers: hit target, sticky, table-wrap, table--stack, .mobile-only/.desktop-only, safe-area
  - v1.0.0 | 2025-09-20 11:30 | init | design tokens + utilities + base components + theming hooks
======================================================= */

@layer tokens, base, components, utilities, overrides;

@layer tokens {
  :root {
    --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
    --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
    --gray-800:#1f2937; --gray-900:#0f172a;

    --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe; --blue-300:#93c5fd;
    --blue-400:#60a5fa; --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
    --blue-800:#1e40af; --blue-900:#1e3a8a;

    --green-50:#ecfdf5; --green-100:#d1fae5; --green-500:#10b981; --green-600:#059669;
    --yellow-50:#fffbeb; --yellow-100:#fef3c7; --yellow-600:#ca8a04;
    --red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626;

    --color-primary: #2563eb;
    --color-primary-weak: #3b82f6;
    --color-success: #16a34a;
    --color-warning: #ca8a04;
    --color-danger:  #dc2626;
    --color-info:    #0891b2;

    --color-text: var(--gray-900);
    --color-muted: var(--gray-600);

    --bg-body: linear-gradient(160deg,#3A7BD5,#00D2FF,#B2FEFA);
    --bg-card: #ffffff;
    --border-color: var(--gray-200);

    --font-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
    --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-20:20px; --fs-24:24px; --fs-28:28px; --fs-32:32px;
    --fw-400:400; --fw-500:500; --fw-600:600; --fw-700:700;
    --lh-1:1; --lh-1_25:1.25; --lh-1_5:1.5;

    --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px; --space-12:12px;
    --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px;

    --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
    --shadow-sm:0 1px 2px rgba(0,0,0,.06);
    --shadow-md:0 4px 16px rgba(0,0,0,.10);
    --shadow-card:0 8px 30px rgba(0,0,0,.12);
    --shadow-focus:0 0 0 2px color-mix(in oklab, var(--color-primary) 50%, white);

    --dur-100:.1s; --dur-200:.2s; --dur-300:.3s; --dur-500:.5s;
    --ease-standard:cubic-bezier(.2,.0,.2,1);
    --ease-emphasized:cubic-bezier(.2,.0,0,1);

    --z-base:1; --z-content:2; --z-connector:3; --z-active:4; --z-icon:5;
    --z-sticky:100; --z-dropdown:200; --z-modal:1000; --z-toast:1100;

    --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;

    --accent: var(--color-primary);

    /* 📱 Mobile ergonomics */
    --hit-min:44px;                 /* 최소 touch target */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
  }

  [data-dept="hr"]    { --accent:#8b5cf6; }
  [data-dept="store"] { --accent:#0ea5e9; }
  [data-dept="qa_qc"] { --accent:#f97316; }
  [data-dept="accounting"] { --accent:#16a34a; }
}

@layer base {
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin:0; padding: clamp(12px, 2vw, 16px);
    padding-top: max(var(--safe-top), clamp(12px, 2vw, 16px));
    padding-bottom: max(var(--safe-bottom), clamp(12px, 2vw, 16px));
    padding-left: max(var(--safe-left), clamp(12px, 2vw, 16px));
    padding-right: max(var(--safe-right), clamp(12px, 2vw, 16px));
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--bg-body);
    background-attachment: fixed;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  :where(button, [role="button"], a, input, select, textarea, .btn, .tab):focus-visible {
    outline: 2px solid var(--color-primary-weak);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  }
}

@layer components {
  .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(12px, 2vw, 16px); }
  .page-grid { display:grid; gap: var(--space-16); }
  @media (min-width: var(--bp-lg)) { .page-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

  .card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: clamp(14px, 2.5vw, 24px);
  }
  .card--compact { padding: 12px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
  .card--interactive { transition: transform var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard); }
  .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

  .toolbar { display:flex; gap: var(--space-12); align-items:center; margin-bottom: var(--space-16); min-height: var(--hit-min); }
  .toolbar .spacer { flex:1; }
  .sticky-top { position: sticky; top: 0; z-index: var(--z-sticky); background: transparent; backdrop-filter: saturate(1.1) blur(2px); }

  .btn {
    border:0; border-radius: var(--radius-md);
    padding: 10px 14px; cursor: pointer; font-weight: var(--fw-600);
    transition: all var(--dur-200) var(--ease-standard);
    min-height: var(--hit-min); min-width: var(--hit-min);
    -webkit-tap-highlight-color: transparent;
  }
  .btn--sm { padding:8px 10px; font-size: var(--fs-14); border-radius: var(--radius-sm); min-height:40px; }
  .btn--lg { padding:12px 18px; font-size: var(--fs-16); border-radius: var(--radius-lg); min-height:48px; }
  .btn--pill { border-radius: var(--radius-pill); }
  .btn--icon { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; }

  .btn--primary { background: var(--accent); color:#fff; }
  .btn--success { background: var(--color-success); color:#fff; }
  .btn--warning { background: var(--color-warning); color:#fff; }
  .btn--danger  { background: var(--color-danger); color:#fff; }
  .btn--ghost   { background: transparent; color: var(--accent); }
  .btn--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent); }
  .btn--soft    { background: color-mix(in oklab, var(--accent) 12%, white); color: var(--accent); }

  .btn:is(:hover,:focus-visible) { filter: brightness(1.05); }
  .btn:active { transform: translateY(1px); }
  .btn.is-disabled, .btn:disabled { opacity:.6; cursor:not-allowed; }

  .badge { padding:2px 8px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--fw-600); }
  .badge--ok      { background: rgba(34,197,94,.12);  color:#16a34a; }
  .badge--warn    { background: rgba(234,179,8,.12);  color:#ca8a04; }
  .badge--danger  { background: rgba(239,68,68,.12);  color:#dc2626; }
  .badge--info    { background: rgba(14,165,233,.12); color:#0891b2; }
  .badge--accent  { background: color-mix(in oklab, var(--accent) 12%, white); color: var(--accent); }

  .tabs { display:flex; gap: var(--space-12); margin: var(--space-12) 0 var(--space-16); }
  .tab { padding:10px 12px; border-radius: var(--radius-md); cursor:pointer; user-select:none; min-height: var(--hit-min); display:inline-flex; align-items:center; }
  .tab.is-active { background: color-mix(in oklab, var(--accent) 12%, white); color: var(--accent); font-weight: var(--fw-600); }

  .form-row { display:flex; gap: var(--space-12); align-items:center; }
  .input, .select, .textarea {
    width:100%; padding: 10px 12px; border-radius: var(--radius-md);
    border:1px solid var(--border-color); background:#fff; color: var(--color-text);
    transition: border-color var(--dur-200) var(--ease-standard), box-shadow var(--dur-200) var(--ease-standard);
    min-height: var(--hit-min);
  }
  .textarea { min-height: 100px; resize: vertical; }
  .input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-primary-weak);
    box-shadow: var(--shadow-focus);
    outline: none;
  }
  .input.is-invalid { border-color: var(--color-danger); }

  /* Table */
  .table { width:100%; border-collapse: collapse; }
  .table th, .table td { padding: 10px 12px; border-bottom:1px solid var(--border-color); text-align: left; }
  .table thead th { position: sticky; top: 0; background:#fff; z-index: var(--z-sticky); }
  .table--compact th, .table--compact td { padding: 8px 10px; }
  .table .num { text-align: right; }
  .table .muted { color: var(--color-muted); }

  /* Table wrapper for horizontal scroll with touch-friendly behavior */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .table-wrap.is-shadowed {
    --mask: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: var(--mask);
            mask-image: var(--mask);
  }

  /* Stack table on small screens (requires td[data-th] content labels) */
  @media (max-width: 768px) {
    .table--stack { width:100%; border-collapse: separate; border-spacing:0; }
    .table--stack thead { display:none; }
    .table--stack tr { display:block; border:1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: var(--space-12); overflow:hidden; }
    .table--stack td { display:grid; grid-template-columns: 40% 1fr; gap: var(--space-8); padding: 10px 12px; }
    .table--stack td::before { content: attr(data-th); font-weight: var(--fw-600); color: var(--color-muted); }
    .table--stack td:last-child { border-bottom:0; }
  }
}

@layer utilities {
  .flex { display:flex; } .inline-flex { display:inline-flex; }
  .grid { display:grid; }
  .items-center { align-items:center; } .justify-between { justify-content:space-between; }
  .gap-8 { gap: var(--space-8); } .gap-12 { gap: var(--space-12); } .gap-16 { gap: var(--space-16); } .gap-24 { gap: var(--space-24); }
  .p-8 { padding: var(--space-8);} .p-12{padding:var(--space-12);} .p-16{padding:var(--space-16);} .p-24{padding:var(--space-24);}
  .px-12{padding-left:var(--space-12);padding-right:var(--space-12);} .py-8{padding-top:var(--space-8);padding-bottom:var(--space-8);}
  .mt-12{margin-top:var(--space-12);} .mb-16{margin-bottom:var(--space-16);} .m-0{margin:0;}
  .text-xs{font-size: var(--fs-12);} .text-sm{font-size: var(--fs-14);} .text-md{font-size: var(--fs-16);}
  .text-lg{font-size: var(--fs-20);} .text-xl{font-size: var(--fs-24);} .fw-600{font-weight: var(--fw-600);}
  .muted{color: var(--color-muted);}
  .w-100{width:100%;} .h-100{height:100%;}
  .hide{display:none !important;} .scroll-y{overflow-y:auto;} .nowrap{white-space:nowrap;}
  .is-disabled{pointer-events:none; opacity:.6;} .is-loading{cursor:progress;}

  /* Responsive visibility helpers */
  @media (max-width: 768px){ .desktop-only{display:none !important;} }
  @media (min-width: 769px){ .mobile-only{display:none !important;} }
}

@layer overrides { }