/* assets/css/style.css — Urban Arts Warehouse v2 */
:root {
  --wh-dark:   #111827;
  --wh-darker: #0d1117;
  --wh-accent: #e53935;
  --wh-amber:  #f59e0b;
  --wh-card:   #1f2937;
  --wh-border: #374151;
  --wh-text:   #e5e7eb;
  --wh-muted:  #9ca3af;
  --nav-h:     56px;
}
*,*::before,*::after{box-sizing:border-box}
body.wh-body{background:var(--wh-dark);color:var(--wh-text);font-family:'Segoe UI',system-ui,sans-serif;font-size:.9rem;min-height:100vh}

/* Navbar */
.wh-navbar{background:var(--wh-darker)!important;border-bottom:2px solid var(--wh-accent);height:var(--nav-h)}
.wh-navbar .nav-link{color:var(--wh-muted)!important;padding:.4rem .7rem;border-radius:6px;transition:.18s;font-size:.85rem}
.wh-navbar .nav-link:hover,.wh-navbar .nav-link.active{color:#fff!important;background:rgba(229,57,53,.15)}
.wh-navbar .nav-link.active{color:var(--wh-accent)!important}
.wh-badge-branch{background:var(--wh-amber);color:#000;font-size:.73rem;padding:.3em .6em;border-radius:20px}

/* Page */
.wh-page-wrap{padding-top:calc(var(--nav-h) + 1rem);padding-bottom:4.5rem;min-height:100vh}

/* Cards */
.wh-card{background:var(--wh-card);border:1px solid var(--wh-border);border-radius:10px;padding:1.2rem}
.wh-card-header{border-bottom:1px solid var(--wh-border);margin:-1.2rem -1.2rem 1rem;padding:.8rem 1.2rem;background:rgba(229,57,53,.07);border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem}
.wh-card-header h5{margin:0;font-size:.95rem;font-weight:600;color:#fff}

/* Stat cards */
.wh-stat{border-radius:10px;padding:1.1rem 1.3rem;position:relative;overflow:hidden}
.wh-stat .stat-icon{font-size:2.4rem;opacity:.14;position:absolute;right:.8rem;bottom:.4rem}
.wh-stat .stat-val{font-size:1.75rem;font-weight:700;line-height:1.1}
.wh-stat .stat-lbl{font-size:.73rem;color:rgba(255,255,255,.7);margin-top:.2rem;text-transform:uppercase;letter-spacing:.05em}
.bg-stat-red   {background:linear-gradient(135deg,#c62828,#e53935);color:#fff}
.bg-stat-amber {background:linear-gradient(135deg,#e65100,#f59e0b);color:#fff}
.bg-stat-blue  {background:linear-gradient(135deg,#1565c0,#1e88e5);color:#fff}
.bg-stat-green {background:linear-gradient(135deg,#1b5e20,#43a047);color:#fff}
.bg-stat-purple{background:linear-gradient(135deg,#4a148c,#8e24aa);color:#fff}
.bg-stat-teal  {background:linear-gradient(135deg,#006064,#00838f);color:#fff}

/* Tables */
.table{color:var(--wh-text)}
.table>:not(caption)>*>*{background:transparent;border-color:var(--wh-border);padding:.5rem .65rem}
.table thead th{color:var(--wh-muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;background:rgba(0,0,0,.2);border-bottom-width:1px}
.table-hover tbody tr:hover>*{background:rgba(255,255,255,.04)}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{background:var(--wh-card);color:var(--wh-text);border:1px solid var(--wh-border);border-radius:6px;padding:.25rem .6rem}
.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{color:var(--wh-muted)!important}
.page-link{background:var(--wh-card)!important;border-color:var(--wh-border)!important;color:var(--wh-text)!important}
.page-item.active .page-link{background:var(--wh-accent)!important;border-color:var(--wh-accent)!important}
div.dt-buttons{margin-bottom:.5rem}
.dt-button{background:var(--wh-card)!important;color:var(--wh-text)!important;border:1px solid var(--wh-border)!important;border-radius:6px!important;font-size:.78rem!important;padding:.3rem .75rem!important}

/* Forms */
.form-control,.form-select{background:var(--wh-darker)!important;border:1px solid var(--wh-border)!important;color:var(--wh-text)!important;border-radius:7px}
.form-control:focus,.form-select:focus{border-color:var(--wh-accent)!important;box-shadow:0 0 0 3px rgba(229,57,53,.2)!important}
.form-label{color:var(--wh-muted);font-size:.81rem;margin-bottom:.3rem}
.input-group-text{background:var(--wh-border)!important;border-color:var(--wh-border)!important;color:var(--wh-muted)}

/* Buttons */
.btn-accent{background:var(--wh-accent);border-color:var(--wh-accent);color:#fff}
.btn-accent:hover{background:#c62828;border-color:#c62828;color:#fff}

/* Modals */
.modal-content{background:var(--wh-card);border:1px solid var(--wh-border);border-radius:12px}
.modal-header{border-bottom:1px solid var(--wh-border)}
.modal-footer{border-top:1px solid var(--wh-border)}
.modal-title{font-size:.95rem;font-weight:600}
.btn-close{filter:invert(1) brightness(2)}

/* Badges */
.badge-status-pending{background:#856404;color:#fff}
.badge-status-approved{background:#155724;color:#fff}
.badge-status-rejected{background:#721c24;color:#fff}
.badge-stock-low{background:var(--wh-accent);color:#fff}
.badge-stock-ok{background:#1b4332;color:#d1fae5}
.badge-branch{background:#1e3a5f;color:#bfdbfe}
tr.low-stock td{color:#fbbf24!important}

/* Footer */
.wh-footer{background:var(--wh-darker);border-top:1px solid var(--wh-border);position:fixed;bottom:0;width:100%;z-index:900}

/* PWA install banner */
#pwa-banner{display:none;position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:#1f2937;border:1px solid var(--wh-accent);border-radius:10px;padding:.75rem 1.2rem;z-index:9999;box-shadow:0 4px 24px rgba(0,0,0,.5);gap:.75rem;align-items:center;max-width:420px;width:90%}

/* Barcode print */
.barcode-label{background:#fff;color:#000;padding:8px;border:1px solid #ddd;border-radius:4px;text-align:center;display:inline-block;margin:4px}

@media(max-width:576px){
  .wh-stat .stat-val{font-size:1.35rem}
  .wh-card{padding:.85rem}
  .table{font-size:.78rem}
}
@media print{
  .wh-navbar,.wh-footer,.btn,.no-print,#pwa-banner{display:none!important}
  .wh-page-wrap{padding-top:0}
  body{background:#fff;color:#000}
  .table>:not(caption)>*>*{color:#000;border-color:#ccc}
  .barcode-label{border:1px solid #999}
}