/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --bg-0: #0a0d14;
  --bg-1: #111520;
  --bg-2: #161c30;
  --bg-3: #1a2235;
  --border-1: #1e2540;
  --border-2: #2a3450;
  --text-1: #e8eeff;
  --text-2: #b0bedc;     /* secondary (WCAG AA on bg-0)  */
  --text-3: #7a8bb0;     /* tertiary / hints             */
  --text-muted: #8090b0;
  --accent: #4a9eff;
  --success: #68d391;
  --warning: #f6ad55;
  --danger: #fc8181;
  --gold: #c9a227;

  --stone-ice:   #63b3ed;
  --stone-fire:  #fc8181;
  --stone-wind:  #f6ad55;
  --stone-water: #3182ce;
}

/* ── Base ────────────────────────────────────────────────── */
body { background:var(--bg-0); color:#e0e4f0; }
a { color:var(--accent); }
a:hover { color:#7bbfff; }

/* ── Utility — text contrast ─────────────────────────────── */
.t-1 { color: var(--text-1) !important; }
.t-2 { color: var(--text-2) !important; }
.t-3 { color: var(--text-3) !important; }
.t-muted { color: var(--text-muted) !important; }

/* ── Utility — icon-only buttons (visually hidden label) ── */
.btn-icon { display:inline-flex; align-items:center; justify-content:center; }
.visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Utility — scroll fade for overflow tables ───────────── */
.scroll-x-fade { position:relative; overflow-x:auto; }
.scroll-x-fade::after {
  content:""; position:sticky; top:0; right:0; width:28px; height:100%;
  background:linear-gradient(to right, transparent, var(--bg-1));
  pointer-events:none; display:block;
}

/* ── Chip / badge base ───────────────────────────────────── */
.chip {
  display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap;
  background:#111428; border:1px solid var(--border-1);
  border-radius:14px; padding:2px 10px; font-size:.72rem;
}
.chip-lg { padding:3px 12px; font-size:.78rem; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-3); }
.empty-state .empty-icon { font-size:2.75rem; opacity:.35; margin-bottom:.75rem; }
.empty-state .empty-title { color:var(--text-2); margin-bottom:.25rem; font-weight:500; }
.empty-state .empty-sub { font-size:.85rem; color:var(--text-3); margin-bottom:1.25rem; }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar { background:#0d1020!important; border-bottom:1px solid #1e2540; }
.navbar-brand { color:#c9a227!important; font-weight:700; letter-spacing:.5px; }
.nav-link { color:#8090b0!important; }
.nav-link:hover,.nav-link.active { color:#4a9eff!important; }
.navbar-toggler { border-color:#2a3450!important; }
.navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(160,176,220,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background:#111520; border:1px solid #1e2540; border-radius:12px; }
.card-header { background:#161c30; border-bottom:1px solid #1e2540; font-weight:600; color:#e8eeff; }

/* ── Tables ──────────────────────────────────────────────── */
.table { color:#dde4f8; }
.table thead th { background:#161c30; color:#6db3ff; border-color:#1e2540; }
.table td,.table th { border-color:#1e2540; vertical-align:middle; }
.table td { color:#dde4f8; }
.table > :not(caption) > * > * { background-color: transparent !important; }
.table tbody tr { background:#111520 !important; }
.table tbody tr:nth-child(odd) { background:#141826 !important; }
.table tbody tr:hover { background:#1a2235 !important; }
.table tfoot tr { background:#161c30 !important; }
.table .text-muted { color:#c0cadf !important; }

/* ── Forms ───────────────────────────────────────────────── */
.form-label { color:#b0bedc !important; }
.form-control,.form-select { background:#161c30; color:#e0e4f0; border-color:#2a3450; }
.form-control:focus { background:#161c30; color:#e0e4f0; border-color:#4a9eff; box-shadow:0 0 0 .2rem rgba(74,158,255,.2); }
.form-control::placeholder { color:#4a5470; }
input[type=date],input[type=datetime-local],
.form-control[type=date],.form-control[type=datetime-local] { color-scheme:dark; color:#e0e4f0; }

/* ── Input group ──────────────────────────────────────────── */
.input-group .btn-outline-secondary {
  background:#1e2540;
  border-color:#2a3450;
  color:#8090b0;
}
.input-group .btn-outline-secondary:hover {
  background:#2a3355;
  border-color:#3a4470;
  color:#e0e4f0;
}
input[type=number] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
.amount-input {
  width: 130px !important;
  text-align: right;
  height: 44px !important;
  font-size: .95rem !important;
  background: #0d1020 !important;
  border-color: #2a2d40 !important;
  color: #e2e8f0 !important;
  border-radius: 6px 0 0 6px !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.amount-input:focus {
  background: #1a2040 !important;
  border-color: #4a9eff !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(74,158,255,.2) !important;
}
.amount-input:not(:placeholder-shown) {
  background: #0f1830 !important;
  border-color: #3a4060 !important;
  color: #fff !important;
}
.qty-input { width:55px!important; text-align:center; padding:2px 4px!important; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary { background:#2272c3; border-color:#2272c3; }
.btn-primary:hover { background:#1a5fa8; border-color:#1a5fa8; }

/* Destructive emphasis — clear warning visual */
.btn-destructive {
  position:relative;
  box-shadow: 0 0 0 1px rgba(252,129,129,.25);
}
.btn-destructive:hover {
  box-shadow: 0 0 0 2px rgba(252,129,129,.45);
  transform: translateY(-1px);
}
.btn-danger { background:#c04050; border-color:#c04050; color:#fff; }
.btn-danger:hover { background:#a03040; border-color:#a03040; color:#fff; }

/* ── Stat cards ──────────────────────────────────────────── */
.stat-card { background:linear-gradient(135deg,#111520,#161c30); border:1px solid #1e2540; border-radius:12px; padding:20px; }
.stat-card .stat-label { color:#b0bedc; font-size:.85rem; font-weight:500; margin-bottom:6px; }
.stat-label { color:#b0bedc; font-size:.85rem; font-weight:500; margin-bottom:6px; }
.stat-number { font-size:1.8rem; font-weight:700; color:#c9a227; }

/* ── Misc ────────────────────────────────────────────────── */
.text-muted { color:#b0bedc !important; }
/* Amount = gold/neutral; diff (separate) = green/red so they don't visually merge */
.badge-amount { background:#1a1408; color:#f6c90e; font-size:.85rem; padding:3px 8px; border-radius:6px; font-family:monospace; font-weight:600; border:1px solid #c9a22733; }
.diff-up   { background:rgba(104,211,145,.12); color:#7ce0a4; font-size:.72rem; padding:2px 7px; border-radius:5px; font-family:monospace; font-weight:700; margin-left:4px; border:1px solid rgba(104,211,145,.25); }
.diff-down { background:rgba(252,129,129,.12); color:#fc9c9c; font-size:.72rem; padding:2px 7px; border-radius:5px; font-family:monospace; font-weight:700; margin-left:4px; border:1px solid rgba(252,129,129,.25); }
.badge-char { display:inline-flex; align-items:center; gap:4px; background:#141826; border:1px solid #1e2540; border-radius:6px; padding:2px 7px; font-size:.78rem; white-space:nowrap; }
.badge-char .char-name { color:#6db3ff; }
.badge-char .char-amount { color:#7ee8a4; font-family:monospace; font-weight:600; }
.last-value-badge { background:#141826; border:1px solid #2a3450; border-radius:5px; padding:1px 6px; font-size:.72rem; font-family:monospace; color:#6db3ff; cursor:pointer; user-select:none; transition:background .2s,border-color .2s; }
.last-value-badge:hover { background:#1a2235; border-color:#4a9eff; color:#9dcfff; }
.alert-success { background:#0f2a1a; border-color:#1a4a2d; color:#68d391; }

/* ── Dropdown ────────────────────────────────────────────── */
.dropdown-item { color:#b0bedc; font-size:.875rem; padding:8px 16px; }
.dropdown-item:hover { background:#1a2235; color:#e0e4f0; }
.dropdown-item.text-danger { color:#fc8181!important; }
.dropdown-item.text-danger:hover { background:#2a1010; }

/* ── Stone tabs ──────────────────────────────────────────── */
.stone-tab-btn { background:transparent!important; border-color:transparent!important; font-size:.85rem; color:var(--tab-color)!important; }
.stone-tab-btn:hover:not(.active) { background:#161c30!important; border-color:transparent!important; }
.stone-tab-btn.active { background:#111520!important; border-color:#1e2540!important; border-bottom-color:#111520!important; }

/* ── Stock session row (mobile-friendly) ─────────────────── */
.stock-session-head {
  display:flex; align-items:center; gap:0;
  border-bottom:1px solid #1a1e30;
}
.stock-session-date {
  min-width:130px; padding:8px 14px;
  border-right:1px solid #1a1e30;
  display:flex; flex-direction:column; justify-content:center;
  text-decoration:none;
}
.stock-session-summary { flex:1 1 auto; padding:8px 14px; min-width:0; }
.stock-session-actions { display:flex; align-items:center; gap:4px; padding:6px 8px; }

@media (max-width:640px) {
  .stock-session-head { flex-wrap:wrap; }
  .stock-session-date { flex:1 1 auto; border-right:none; border-bottom:1px solid #1a1e30; }
  .stock-session-actions { border-left:none; border-bottom:1px solid #1a1e30; order:-1; margin-left:auto; }
  .stock-session-summary { flex:1 1 100%; border-top:none; }
}

/* ── Filter pills (machine / server / status) ───────────── */
.filter-pills { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.filter-pill {
  background:#0d1428; border:1px solid #1e2540; color:var(--text-2);
  border-radius:999px; padding:4px 12px; font-size:.78rem; font-weight:500;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.filter-pill:hover { background:#141c3a; color:var(--text-1); border-color:#2a3a6a; }
.filter-pill.active {
  background:rgba(74,158,255,.15); border-color:var(--accent);
  color:var(--accent); font-weight:600;
  box-shadow: 0 0 0 1px rgba(74,158,255,.3) inset;
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination { gap:2px; }
.pagination .page-link { background:#141826; border-color:#2a3450; color:#6080c0; border-radius:6px!important; font-size:.82rem; padding:4px 10px; }
.pagination .page-link:hover { background:#1e2540; border-color:#3a4460; color:#a0b4e8; }
.pagination .page-item.active .page-link { background:#2a3a6a; border-color:#3a4a80; color:#c8d8ff; }
.pagination .page-item.disabled .page-link { background:#101420; border-color:#1e2540; color:#2a3450; }
.pagination-wrap { padding:16px 0 4px; }

/* ── Back button ─────────────────────────────────────────── */
.btn-back {
  display:inline-flex; align-items:center; gap:.25rem;
  background:transparent;
  color:var(--text-2);
  border:1px solid var(--border-1);
  border-radius:8px;
  padding:.32rem .7rem;
  font-size:.82rem;
  font-weight:500;
  transition: all .15s ease;
}
.btn-back:hover {
  background:var(--bg-2);
  color:var(--text-1);
  border-color:var(--border-2);
  transform: translateX(-2px);
}
.btn-back:active { transform: translateX(-1px); }
.btn-back i { font-size:.85rem; transition: transform .15s ease; }
.btn-back:hover i { transform: translateX(-2px); }

/* ── Stock group pill (dashboard server breakdown) ──────── */
.stk-group {
  background:#0d1224;
  border:1px solid #1e2540;
  border-radius:8px;
  padding:.3rem .55rem .35rem;
  display:inline-flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}
.stk-group-label {
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  opacity:.85;
}
.stk-group-label i { font-size:.62rem; }

/* ═════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE OPTIMIZATIONS
   ═════════════════════════════════════════════════════════════ */

/* iOS: ป้องกัน input zoom เมื่อ focus (ต้อง ≥16px) */
@media (max-width: 768px) {
  .form-control, .form-select, input, select, textarea { font-size: 16px; }
  .form-control-sm, .form-select-sm { font-size: 14px; }
}

/* ── Tablet & Phone (≤ 768px) ──────────────────────────────── */
@media (max-width: 768px) {
  /* Container — ลด padding ข้าง */
  .container { padding-left: .6rem !important; padding-right: .6rem !important; }
  .container.py-3 { padding-top: .6rem !important; padding-bottom: .6rem !important; }

  /* Typography */
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.12rem; }
  h4 { font-size: 1.02rem; }
  h5 { font-size: .94rem; }

  /* Navbar */
  .navbar { padding: .35rem .25rem; }
  .navbar-brand { font-size: .92rem; gap: .35rem !important; }
  .navbar-brand img { height: 28px !important; width: 28px !important; }
  .navbar-collapse {
    background:#0d1020; border:1px solid #1e2540;
    border-radius:10px; padding:.4rem .5rem; margin-top:.4rem;
  }
  .navbar-nav .nav-link {
    padding:.55rem .25rem !important; font-size:.92rem; border-bottom:1px solid #14182a;
  }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom:none; }
  .dropdown-menu { max-width:94vw; }

  /* Cards — กระชับขึ้น */
  .card { border-radius:10px; }
  .card-body { padding:.7rem .75rem !important; }
  .card-header { padding:.5rem .75rem !important; font-size:.88rem; }
  .card-body.py-3 { padding-top:.7rem !important; padding-bottom:.7rem !important; }

  /* Stat cards */
  .stat-card { padding:12px !important; border-radius:10px; }
  .stat-number { font-size:1.4rem !important; }
  .stat-label { font-size:.78rem; }

  /* Tables — เล็กลงและ scroll x ได้ */
  .table { font-size:.78rem; }
  .table th, .table td { padding:.35rem .45rem !important; }
  .table-responsive, .scroll-x-fade, [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
  }

  /* Forms */
  .form-label { font-size:.85rem; margin-bottom:.25rem; }
  .form-control, .form-select { min-height:40px; border-radius:8px; }
  .form-control-sm, .form-select-sm { min-height:34px; }
  /* date inputs ใน filter bar (override inline style:width:140px) */
  input[type="date"].form-control-sm {
    width:auto !important; min-width:0 !important; max-width:none !important;
    flex:1 1 110px;
  }
  /* amount input */
  .amount-input { width:100% !important; max-width:160px; }

  /* Buttons — touch target */
  .btn { min-height:38px; padding:.4rem .75rem; }
  .btn-sm { min-height:32px; padding:.3rem .6rem; font-size:.82rem; }
  .btn-lg { min-height:46px; }
  .btn i { font-size:.95rem; }

  /* Filter / Report pills */
  .filter-pill, .rep-pill {
    padding:5px 11px; font-size:.74rem; min-height:30px;
    display:inline-flex; align-items:center;
  }

  /* Stone tabs */
  .stone-tab-btn { font-size:.78rem; padding:.35rem .55rem; }

  /* Chip */
  .chip { font-size:.68rem; padding:2px 8px; }

  /* Sticky columns — บางลง */
  th[style*="sticky"], td[style*="sticky"] {
    font-size:.74rem;
  }

  /* gap utilities — เล็กลง */
  .gap-3 { gap:.5rem !important; }
  .gap-2 { gap:.4rem !important; }

  /* Back-to-top button */
  #back-to-top { bottom:14px !important; right:12px !important; padding:7px 10px !important; }

  /* Dropdown menu inside navbar */
  .navbar .dropdown-menu {
    background:#0d1020 !important; border:none !important;
    box-shadow:none !important; padding-left:.5rem;
  }
  .navbar .dropdown-item { padding:.4rem .5rem; font-size:.85rem; }

  /* Pagination */
  .pagination .page-link { padding:6px 10px; font-size:.8rem; }
  .pagination-wrap { padding:10px 0; }

  /* Stock-session row */
  .stock-session-date { min-width:0; padding:6px 10px; }
  .stock-session-summary { padding:6px 10px; }

  /* Empty state */
  .empty-state { padding:2rem .5rem; }
  .empty-state .empty-icon { font-size:2.2rem; }

  /* Reports filter card — wrap วันที่กับปุ่ม */
  form.card .card-body.d-flex { gap:.4rem !important; }

  /* ลด letter-spacing ของหัวเรื่องที่ทำให้ overflow */
  .navbar-brand { letter-spacing:.2px; }
}

/* ── Phone (≤ 480px) ────────────────────────────────────────── */
@media (max-width: 480px) {
  body { font-size:.9rem; }
  h1 { font-size:1.3rem; }
  h2 { font-size:1.15rem; }
  h3 { font-size:1.05rem; }
  h4 { font-size:.98rem; }

  .container { padding-left:.5rem !important; padding-right:.5rem !important; }

  .navbar-brand { font-size:.85rem; }
  .navbar-brand img { height:26px !important; width:26px !important; }

  .table { font-size:.72rem; }
  .table th, .table td { padding:.28rem .35rem !important; }

  .card-body { padding:.6rem !important; }
  .card-header { padding:.4rem .6rem !important; font-size:.82rem; }

  .stat-number { font-size:1.2rem !important; }
  .stat-card { padding:10px !important; }

  /* hide labels marked as desktop-only */
  .d-hide-xs, .hide-mobile { display:none !important; }

  /* button rows wrap and fill row */
  .btn-row-mobile-stack .btn { flex:1 1 auto; }

  /* compact filter bar */
  form.card .card-body { padding:.5rem !important; }
  .rep-pill { font-size:.7rem; padding:4px 9px; min-height:28px; }
  .filter-pill { font-size:.7rem; padding:4px 9px; min-height:28px; }

  /* KPI tiles in 2 cols max */
  .lv-tile, .lv-kpi { padding:6px 8px !important; font-size:.75rem; }

  /* Key hex code: ตัดให้สั้นบนมือถือ */
  .key-code {
    display:inline-block; max-width:88px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    vertical-align:bottom;
  }
}

/* tablet width: shorter key */
@media (max-width: 768px) and (min-width: 481px) {
  .key-code {
    display:inline-block; max-width:120px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    vertical-align:bottom;
  }
}

/* ── Utility: scrollable rows hint shadow on right edge ──── */
@media (max-width: 768px) {
  [style*="overflow-x:auto"]::after,
  [style*="overflow-x: auto"]::after {
    /* ไม่ override อันที่มี ::after อยู่แล้ว (เช่น .scroll-x-fade) */
  }
}

/* ── Print / very wide: ไม่ทำอะไร, ให้ desktop style ทำงานเดิม ── */