/**
 * WarehouseOS — Dashboard & Feature Stylesheet
 * Styles for KPI cards, widgets, tables, reports, opname, lokasi
 * Version: 2.5.1
 */

  /* ─── DASHBOARD ───────────────────────────────────── */
  .kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 28px; }
  .kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    position: relative; overflow: hidden;
  }
  .kpi-card::before {
    content:''; position:absolute; top:0;left:0;right:0; height:2px;
  }
  .kpi-card.green::before { background: var(--accent); }
  .kpi-card.blue::before  { background: var(--accent2); }
  .kpi-card.orange::before{ background: var(--warn); }
  .kpi-card.red::before   { background: var(--danger); }
  .kpi-label { font-size: 11px; color: var(--text3); font-family: var(--mono); letter-spacing: 0.1em; margin-bottom: 10px; }
  .kpi-value { font-size: 30px; font-family: var(--mono); font-weight: 700; }
  .kpi-value.green { color: var(--accent); }
  .kpi-value.blue  { color: var(--accent2); }
  .kpi-value.orange{ color: var(--warn); }
  .kpi-value.red   { color: var(--danger); }
  .kpi-sub { font-size: 11px; color: var(--text3); margin-top: 6px; }
  .kpi-icon { position:absolute; right:16px; top:16px; opacity:0.12; font-size:36px; }

  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
  }
  .widget-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
  }
  .widget-title { font-size: 12px; font-family: var(--mono); font-weight: 700; color: var(--text2); letter-spacing: 0.08em; }

  /* mini table */
  .mini-table { width: 100%; border-collapse: collapse; }
  .mini-table th { font-size: 10px; color: var(--text3); font-family: var(--mono); letter-spacing: 0.1em; padding: 10px 20px; text-align: left; background: var(--surface2); }
  .mini-table td { font-size: 13px; padding: 10px 20px; border-top: 1px solid var(--border); }
  .mini-table tr:hover td { background: rgba(255,255,255,0.02); }
  .tag {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-family: var(--mono); font-weight: 700;
  }
  .tag-ok   { background: rgba(0,229,160,0.12); color: var(--accent); }
  .tag-low  { background: rgba(255,123,61,0.12); color: var(--warn); }
  .tag-out  { background: rgba(255,61,90,0.12);  color: var(--danger); }
  .tag-in   { background: rgba(0,145,255,0.12);  color: var(--accent2); }

  /* activity */
  .activity-list { padding: 4px 0; }
  .activity-item { display: flex; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--border); align-items: flex-start; }
  .act-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink:0; margin-top:2px; }
  .act-icon.in  { background: rgba(0,145,255,0.15); }
  .act-icon.out { background: rgba(255,123,61,0.15); }
  .act-icon.adj { background: rgba(0,229,160,0.15); }
  .act-body { flex:1; }
  .act-text { font-size: 13px; margin-bottom: 3px; }
  .act-text strong { font-weight: 600; }
  .act-time { font-size: 11px; color: var(--text3); font-family: var(--mono); }

  /* ─── TABLE PAGE (Barang/Transaksi) ─────────────── */
  .page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .page-head h1 { font-family: var(--mono); font-size: 18px; font-weight: 700; flex:1; }
  .search-box {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    width: 220px;
  }
  .search-box input { background: none; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; font-family: var(--sans); }
  .search-box svg { color: var(--text3); flex-shrink:0; }

  .data-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
  .data-table { width: 100%; border-collapse: collapse; }
  .data-table th {
    padding: 12px 16px; font-size: 10px; color: var(--text3);
    font-family: var(--mono); letter-spacing: 0.1em; text-align: left;
    background: var(--surface2); border-bottom: 1px solid var(--border);
  }
  .data-table td {
    padding: 13px 16px; font-size: 13.5px;
    border-top: 1px solid var(--border);
    vertical-align: middle;
  }
  .data-table tr:hover td { background: rgba(255,255,255,0.018); }
  .stock-bar-wrap { display:flex; align-items:center; gap:8px; }
  .stock-bar-bg { flex:1; height:4px; background: var(--border); border-radius:2px; }
  .stock-bar { height:4px; border-radius:2px; }
  .action-btn {
    background: none; border: 1px solid var(--border); border-radius: 5px;
    color: var(--text2); padding: 5px 10px; font-size: 12px; cursor: pointer;
    transition: all 0.15s;
  }
  .action-btn:hover { border-color: var(--accent); color: var(--accent); }
  .action-btn.del:hover { border-color: var(--danger); color: var(--danger); }

  /* ─── FORM MODAL ──────────────────────────────────── */
  .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.7); z-index: 100;
    align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 480px; max-width: 95vw;
    padding: 28px;
    animation: modalIn 0.2s ease;
  }
  @keyframes modalIn { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }
  .modal-title { font-family: var(--mono); font-size: 15px; font-weight: 700; margin-bottom: 20px; }
  .form-group { margin-bottom: 16px; }
  .form-label { font-size: 11px; color: var(--text3); font-family: var(--mono); letter-spacing: 0.1em; margin-bottom: 6px; display:block; }
  .form-input, .form-select {
    width: 100%; padding: 10px 12px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 13.5px;
    font-family: var(--sans); outline: none;
    transition: border-color 0.15s;
  }
  .form-input:focus, .form-select:focus { border-color: var(--accent); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

  /* ─── LAPORAN ─────────────────────────────────────── */
  .report-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
  .report-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer; transition: all 0.15s;
    display: flex; flex-direction: column; gap: 10px;
  }
  .report-card:hover { border-color: var(--accent2); }
  .report-card-icon { font-size: 28px; }
  .report-card-title { font-family: var(--mono); font-size: 13px; font-weight: 700; }
  .report-card-desc { font-size: 12px; color: var(--text3); }

  /* chart bars */
  .bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; padding: 0 20px 0; }
  .bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .bar { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.4s ease; }
  .bar-label { font-size: 10px; color: var(--text3); font-family: var(--mono); }

  /* ─── NOTIF ────────────────────────────────────────── */
  .notif-bar {
    background: rgba(255,123,61,0.1); border: 1px solid rgba(255,123,61,0.25);
    border-radius: 8px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; margin-bottom: 20px;
  }
  .notif-bar svg { color: var(--warn); flex-shrink:0; }

  /* ─── LOKASI ───────────────────────────────────────── */
  .rak-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; margin-bottom: 24px; }
  .rak {
    aspect-ratio: 1;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; cursor: pointer; transition: all 0.15s;
    font-family: var(--mono); font-size: 11px; font-weight: 700;
  }
  .rak.penuh   { background: rgba(0,229,160,0.12); border-color: rgba(0,229,160,0.3); color: var(--accent); }
  .rak.sebagian{ background: rgba(0,145,255,0.1);  border-color: rgba(0,145,255,0.25); color: var(--accent2); }
  .rak.kosong  { background: var(--surface2); color: var(--text3); }
  .rak.pilih   { background: rgba(255,123,61,0.12); border-color: rgba(255,123,61,0.3); color: var(--warn); }
  .rak:hover   { transform: scale(1.05); }
  .rak-pct     { font-size: 10px; font-weight: 400; }

  .rak-legend { display: flex; gap: 20px; margin-bottom: 20px; }
  .leg-item { display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text2); }
  .leg-dot  { width:10px; height:10px; border-radius:3px; }

  /* ─── DETAIL PANEL (slide-in) ─────────────────────── */
  .detail-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.55); z-index: 200;
    backdrop-filter: blur(3px);
  }
  .detail-overlay.open { display: block; }
  .detail-panel {
    position: fixed; top: 0; right: -640px; bottom: 0; width: 620px;
    background: var(--surface); border-left: 1px solid var(--border);
    z-index: 201; display: flex; flex-direction: column;
    transition: right 0.28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }
  .detail-panel.open { right: 0; }
  .detail-panel-head {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
  }
  .detail-panel-body { flex: 1; overflow-y: auto; padding: 0; }
  .detail-section { padding: 20px 24px; border-bottom: 1px solid var(--border); }
  .detail-section-title {
    font-size: 10px; font-family: var(--mono); letter-spacing: 0.12em;
    color: var(--text3); margin-bottom: 14px; font-weight: 700;
  }
  .detail-meta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .detail-meta-item { }
  .detail-meta-label { font-size: 10px; color: var(--text3); font-family: var(--mono); margin-bottom: 4px; }
  .detail-meta-val { font-size: 14px; font-weight: 600; }

  /* SN list */
  .sn-toolbar {
    display: flex; gap: 8px; margin-bottom: 12px; align-items: center;
  }
  .sn-input {
    flex: 1; padding: 8px 12px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 6px; color: var(--text); font-size: 13px;
    font-family: var(--mono); outline: none;
  }
  .sn-input:focus { border-color: var(--accent); }
  .sn-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
  .sn-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--mono); font-size: 12px;
  }
  .sn-item .sn-num { flex: 1; font-weight: 700; letter-spacing: 0.05em; }
  .sn-item .sn-status { font-size: 10px; }
  .sn-item .sn-trx { font-size: 10px; color: var(--text3); }
  .sn-item .sn-del {
    background: none; border: none; cursor: pointer;
    color: var(--text3); font-size: 14px; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s;
  }
  .sn-item .sn-del:hover { color: var(--danger); }
  .sn-item.status-tersedia { border-left: 3px solid var(--accent); }
  .sn-item.status-keluar   { border-left: 3px solid var(--warn); opacity: 0.7; }

  .sn-counter {
    font-size: 11px; color: var(--text3); font-family: var(--mono);
    display: flex; gap: 16px; margin-bottom: 10px;
  }
  .sn-counter span { display: flex; align-items: center; gap: 5px; }

  /* trx SN selector */
  .trx-sn-section { margin-top: 12px; }
  .trx-sn-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 8px; }
  .trx-sn-grid.mode-masuk { display: block; }
  .trx-sn-chip {
    padding: 4px 10px; border-radius: 4px;
    background: var(--surface2); border: 1px solid var(--border);
    font-family: var(--mono); font-size: 11px; cursor: pointer;
    transition: all 0.12s;
  }
  .trx-sn-chip.selected { background: rgba(0,229,160,0.15); border-color: var(--accent); color: var(--accent); }
  .trx-sn-chip.unavail  { opacity: 0.35; cursor: default; }

  @media(max-width:600px){
    /* Modal transaksi fullscreen di HP */
    #modal-trx .modal {
      width: 100vw !important;
      max-width: 100vw !important;
      max-height: 100vh !important;
      height: 100vh !important;
      border-radius: 0 !important;
      margin: 0 !important;
    }
    /* Info sesi lebih compact */
    #modal-trx .modal > div:nth-child(2) {
      padding: 10px 14px !important;
    }
    /* Sembunyikan filter kategori di mobile - hemat space */
    #trx-kat-filter { display: none !important; }
    /* SN grid lebih tinggi & chip lebih besar di HP */
    .trx-sn-grid {
      max-height: 200px !important;
      gap: 8px !important;
    }
    /* Mode masuk: hilangkan max-height agar bulk input terlihat */
    .trx-sn-grid.mode-masuk,
    .trx-sn-grid[style*="display:block"] {
      max-height: none !important;
      display: block !important;
      overflow: visible !important;
    }
    .trx-sn-chip {
      padding: 8px 12px !important;
      font-size: 12px !important;
      border-radius: 6px !important;
    }
    /* Qty buttons lebih besar */
    .scan-qty-btn {
      width: 48px !important;
      height: 48px !important;
      font-size: 22px !important;
    }
    .scan-qty-input {
      height: 48px !important;
      font-size: 18px !important;
    }
    /* Tombol tambah ke keranjang lebih tinggi */
    #trx-add-cart-btn {
      padding: 14px !important;
      font-size: 14px !important;
    }
    /* Konfirmasi btn lebih tinggi */
    #trx-confirm-btn {
      padding: 14px !important;
      font-size: 14px !important;
    }
    /* Cart list lebih tinggi */
    #trx-cart-list {
      max-height: 200px !important;
    }
    /* Search input lebih besar */
    #trx-barang-search {
      font-size: 15px !important;
      padding: 12px 14px !important;
    }
    /* Padding section lebih compact */
    #modal-trx .modal > div:nth-child(3) {
      padding: 12px 14px !important;
    }
    #modal-trx .modal > div:nth-child(4),
    #modal-trx .modal > div:nth-child(5) {
      padding: 10px 14px !important;
    }
  }