/* Warehouse EXP Date — Premium UI System v21.14.0
   Loaded last. Pure presentation layer; no functional behavior. */

/* ===== Premium palette / page canvas ===== */
body.warehouse-app{
  --premium-ink:#170f16;
  --premium-plum:#4a1737;
  --premium-plum-2:#74124a;
  --premium-pink:#d71d78;
  --premium-teal:#0a8e7e;
  --premium-blue:#315b93;
  --premium-line:color-mix(in srgb,var(--border) 72%,transparent);
  --premium-shadow:0 24px 70px -48px rgba(40,15,31,.58);
  --premium-shadow-sm:0 12px 34px -26px rgba(40,15,31,.42);
  --premium-ring:0 0 0 1px color-mix(in srgb,var(--brand) 8%,transparent);
  background:
    radial-gradient(circle at 88% -8%,rgba(215,29,120,.08),transparent 27%),
    radial-gradient(circle at 8% 14%,rgba(10,142,126,.045),transparent 22%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg-main) 97%,#fff),var(--bg-main));
}
body[data-theme="dark"].warehouse-app{
  --premium-ink:#f7f2f5;
  --premium-line:rgba(255,255,255,.07);
  --premium-shadow:0 26px 74px -48px rgba(0,0,0,.86);
  --premium-shadow-sm:0 14px 38px -28px rgba(0,0,0,.76);
  background:
    radial-gradient(circle at 92% -4%,rgba(255,78,174,.10),transparent 25%),
    radial-gradient(circle at 7% 14%,rgba(23,191,165,.055),transparent 22%),
    linear-gradient(180deg,#171318,#1b171d 44%,#1c181e);
}

/* ===== App frame ===== */
.warehouse-app .erp-container{
  max-width:1680px;
  margin-inline:auto;
  padding:18px 20px 34px;
}
.warehouse-app .erp-header{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  gap:22px;
  margin-bottom:16px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:
    radial-gradient(circle at 8% 20%,rgba(255,255,255,.08),transparent 19%),
    linear-gradient(122deg,#321529 0%,#48152f 42%,#6c1042 75%,#81104d 100%);
  box-shadow:0 30px 74px -44px rgba(56,8,35,.84),inset 0 1px 0 rgba(255,255,255,.08);
}
.warehouse-app .erp-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  inset-inline-start:-190px;
  top:-250px;
  border-radius:50%;
  background:rgba(255,255,255,.055);
  box-shadow:120px 90px 0 -60px rgba(255,255,255,.028);
}
.warehouse-app .erp-header::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:260px;
  height:260px;
  inset-inline-end:-90px;
  bottom:-170px;
  border-radius:50%;
  background:rgba(237,28,145,.12);
  filter:blur(2px);
}

/* ===== Engraved brand lockup ===== */
.warehouse-app .brand-lockup{gap:16px;align-items:center;min-width:320px}
.warehouse-app .brand-logo-shell{
  position:relative;
  width:72px;
  height:72px;
  padding:8px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -12px 26px rgba(20,4,14,.16),
    0 20px 36px -24px rgba(0,0,0,.78);
}
.warehouse-app .brand-logo-shell::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 20px rgba(0,0,0,.16);
  pointer-events:none;
}
.warehouse-app .brand-logo-shell .system-logo{filter:drop-shadow(0 8px 12px rgba(0,0,0,.24))}
.warehouse-app .brand-company-kicker{
  color:#fbe8f2;
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.warehouse-app .erp-header h1{font-size:28px;letter-spacing:-.6px;text-shadow:0 2px 18px rgba(0,0,0,.16)}
.warehouse-app .erp-header h1 em{color:#ff72be}
.warehouse-app .brand-subtitle{color:rgba(255,255,255,.72);font-weight:650;line-height:1.65}
.warehouse-app .warehouse-name-display{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:7px;
  padding:5px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* ===== Header actions ===== */
.warehouse-app .header-actions{gap:8px;align-content:start}
.warehouse-app .header-actions .btn,
.warehouse-app .header-select-with-icon,
.warehouse-app .current-user-pill,
.warehouse-app .active-site-selector,
.warehouse-app .offline-queue-pill{
  min-height:43px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.075);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}
.warehouse-app .header-actions .btn:hover,
.warehouse-app .header-select-with-icon:hover,
.warehouse-app .current-user-pill:hover,
.warehouse-app .offline-queue-pill:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.17);
}
.warehouse-app .header-actions select{color:#fff;background:transparent}
.warehouse-app .header-actions select option{color:var(--text-main);background:var(--surface)}
.warehouse-app .notification-count-badge{box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* ===== Navigation ===== */
.warehouse-app .nav-tabs{
  gap:7px;
  margin:0 0 18px;
  padding:7px;
  border:1px solid var(--premium-line);
  border-radius:21px;
  background:color-mix(in srgb,var(--surface) 93%,transparent);
  box-shadow:var(--premium-shadow-sm),inset 0 1px 0 color-mix(in srgb,#fff 70%,transparent);
  backdrop-filter:blur(18px);
}
.warehouse-app .tab-btn{
  min-height:48px;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:14px;
  color:var(--text-muted);
  background:transparent;
  font-weight:800;
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.warehouse-app .tab-btn:hover{
  color:var(--brand-strong);
  background:color-mix(in srgb,var(--brand-soft) 52%,var(--surface));
  border-color:color-mix(in srgb,var(--brand) 10%,var(--border));
  transform:translateY(-1px);
}
.warehouse-app .tab-btn.active{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-strong));
  border-color:color-mix(in srgb,var(--brand-strong) 70%,transparent);
  box-shadow:0 12px 24px -18px rgba(122,16,77,.86),inset 0 1px 0 rgba(255,255,255,.14);
}

/* ===== Universal card language ===== */
.warehouse-app .card,
.warehouse-app .chart-card,
.warehouse-app .settings-card,
.warehouse-app .reports-mode-card,
.warehouse-app .reports-toolbar,
.warehouse-app .reports-chart-card,
.warehouse-app .reports-insight-card,
.warehouse-app .reports-table-card,
.warehouse-app .audit-table-card,
.warehouse-app .erp-table-container,
.warehouse-app .scanner-section,
.warehouse-app .barcode-scanner-bar,
.warehouse-app .dashboard-status-card,
.warehouse-app .kpi-card,
.warehouse-app .metric-card{
  border-color:var(--premium-line);
  box-shadow:var(--premium-shadow-sm),inset 0 1px 0 color-mix(in srgb,#fff 62%,transparent);
}
.warehouse-app .settings-card,
.warehouse-app .chart-card,
.warehouse-app .reports-mode-card,
.warehouse-app .reports-toolbar,
.warehouse-app .reports-chart-card,
.warehouse-app .reports-insight-card,
.warehouse-app .reports-table-card,
.warehouse-app .audit-table-card,
.warehouse-app .erp-table-container{
  border-radius:22px;
  background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--surface-soft) 62%,var(--surface)));
}
.warehouse-app .kpi-card,
.warehouse-app .metric-card,
.warehouse-app .dashboard-status-card{
  border-radius:20px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.warehouse-app .kpi-card:hover,
.warehouse-app .metric-card:hover,
.warehouse-app .dashboard-status-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand) 17%,var(--border));
  box-shadow:0 20px 42px -30px rgba(65,22,48,.45);
}

/* ===== Dashboard ===== */
.warehouse-app .dashboard-shell{gap:18px}
.warehouse-app .dashboard-topbar{padding:4px 2px 2px}
.warehouse-app .dashboard-title-block h2{letter-spacing:-.4px}
.warehouse-app .dashboard-hero{
  border-radius:26px;
  border-color:rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.10),transparent 22%),
    linear-gradient(130deg,#35172c,#65113f 64%,#891251);
  box-shadow:0 28px 60px -40px rgba(72,10,45,.72);
}
.warehouse-app .dashboard-health-ring{filter:drop-shadow(0 18px 26px rgba(20,4,12,.20))}
.warehouse-app .dashboard-live-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}

/* ===== Inputs / selectors ===== */
.warehouse-app input,
.warehouse-app select,
.warehouse-app textarea{
  min-height:44px;
  border-radius:13px;
  border-color:var(--premium-line);
  background:color-mix(in srgb,var(--surface) 92%,var(--surface-soft));
  box-shadow:inset 0 1px 1px rgba(35,16,28,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.warehouse-app input:hover,
.warehouse-app select:hover,
.warehouse-app textarea:hover{border-color:color-mix(in srgb,var(--brand) 18%,var(--border))}
.warehouse-app input:focus,
.warehouse-app select:focus,
.warehouse-app textarea:focus{
  border-color:color-mix(in srgb,var(--brand-strong) 65%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 9%,transparent),0 8px 20px -18px rgba(122,16,77,.48);
}

/* ===== Buttons ===== */
.warehouse-app .btn{
  min-height:42px;
  border-radius:12px;
  font-weight:850;
  letter-spacing:-.05px;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;
}
.warehouse-app .btn:hover{transform:translateY(-1px)}
.warehouse-app .btn:active{transform:translateY(0)}
.warehouse-app .btn-blue,
.warehouse-app .btn-purple{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-strong));
  box-shadow:0 13px 26px -20px rgba(122,16,77,.78),inset 0 1px 0 rgba(255,255,255,.14);
}
.warehouse-app .btn-green{
  border-color:transparent;
  background:linear-gradient(135deg,#087d70,#0fa48c);
  box-shadow:0 13px 26px -20px rgba(8,125,112,.65),inset 0 1px 0 rgba(255,255,255,.15);
}
.warehouse-app .btn-neutral{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 72%,transparent)}

/* ===== Tables ===== */
.warehouse-app table{border-collapse:separate;border-spacing:0}
.warehouse-app th{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-soft) 92%,var(--surface)),var(--surface-soft));
  color:color-mix(in srgb,var(--text-main) 72%,var(--text-muted));
  font-size:11px;
  font-weight:900;
  letter-spacing:.05px;
}
.warehouse-app td{background:color-mix(in srgb,var(--surface) 98%,transparent)}
.warehouse-app tbody tr:hover td{background:color-mix(in srgb,var(--brand-soft) 34%,var(--surface))}
.warehouse-app tbody tr:last-child td{border-bottom-color:transparent}
.warehouse-app .code-chip,
.warehouse-app .qty-pill,
.warehouse-app .location-tag,
.warehouse-app .category-badge,
.warehouse-app .status-badge{
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.warehouse-app .item-name-link{font-weight:850;text-underline-offset:3px}

/* ===== Scanner / operation areas ===== */
.warehouse-app .barcode-scanner-bar{
  border-radius:22px;
  padding:16px;
  background:
    radial-gradient(circle at 98% 10%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 25%),
    linear-gradient(160deg,var(--surface),var(--surface-soft));
}
.warehouse-app .scanner-input-group input{min-height:48px}
.warehouse-app .scanner-mode-select,
.warehouse-app .filter-select{border-radius:13px}

/* ===== Settings / admin ===== */
.warehouse-app .settings-layout{gap:18px}
.warehouse-app .settings-nav{
  border-radius:20px;
  border-color:var(--premium-line);
  box-shadow:var(--premium-shadow-sm);
  background:color-mix(in srgb,var(--surface) 96%,transparent);
}
.warehouse-app .settings-nav-btn{border-radius:12px;transition:background .16s ease,color .16s ease,transform .16s ease}
.warehouse-app .settings-nav-btn:hover{transform:translateX(-1px)}
.warehouse-app .settings-nav-btn.active{background:linear-gradient(135deg,var(--brand-soft),color-mix(in srgb,var(--brand-soft) 50%,var(--surface)));color:var(--brand-strong)}

/* ===== Modal architecture ===== */
.warehouse-app .modal-overlay{
  background:rgba(23,12,20,.54);
  backdrop-filter:blur(12px) saturate(112%);
}
.warehouse-app .modal-card{
  border-color:color-mix(in srgb,var(--brand) 9%,var(--border));
  border-radius:26px;
  box-shadow:0 36px 90px -46px rgba(15,5,11,.78),inset 0 1px 0 color-mix(in srgb,#fff 74%,transparent);
}
.warehouse-app .item-modal-head,
.warehouse-app .confirm-modal-head{
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand-soft) 36%,var(--surface)),var(--surface));
}
.warehouse-app .close-btn{border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.warehouse-app .item-card-avatar{
  border-radius:15px;
  background:linear-gradient(145deg,var(--brand-soft),color-mix(in srgb,var(--brand-soft) 54%,var(--surface)));
}

/* ===== WhatsApp premium state ===== */
#whatsappReportModal .whatsapp-setup-card{
  border-radius:22px;
  box-shadow:0 18px 42px -34px color-mix(in srgb,var(--setup-accent) 54%,transparent),inset 0 1px 0 rgba(255,255,255,.52);
}
#whatsappReportModal .whatsapp-secret-row{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.56)}
#whatsappReportModal .whatsapp-direct-send-btn{min-width:180px}

/* ===== Subtle embedded brand watermark ===== */
.warehouse-app #inventorySection,
.warehouse-app #dashboardSection,
.warehouse-app #reportsSection,
.warehouse-app #masterSection,
.warehouse-app #auditSection,
.warehouse-app #settingsSection{
  position:relative;
}
.warehouse-app #inventorySection::before,
.warehouse-app #dashboardSection::before,
.warehouse-app #reportsSection::before,
.warehouse-app #masterSection::before,
.warehouse-app #auditSection::before,
.warehouse-app #settingsSection::before{
  content:"";
  position:absolute;
  z-index:0;
  width:190px;
  height:190px;
  inset-inline-end:18px;
  top:18px;
  background:url("../assets/warehouse-exp-mark.svg") center/contain no-repeat;
  opacity:.018;
  filter:grayscale(1);
  pointer-events:none;
}
.warehouse-app #inventorySection>* ,
.warehouse-app #dashboardSection>* ,
.warehouse-app #reportsSection>* ,
.warehouse-app #masterSection>* ,
.warehouse-app #auditSection>* ,
.warehouse-app #settingsSection>*{position:relative;z-index:1}

/* ===== Dark mode refinements ===== */
body[data-theme="dark"].warehouse-app .nav-tabs,
body[data-theme="dark"].warehouse-app .settings-nav,
body[data-theme="dark"].warehouse-app .modal-card{
  box-shadow:0 22px 54px -38px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.035);
}
body[data-theme="dark"].warehouse-app .settings-card,
body[data-theme="dark"].warehouse-app .chart-card,
body[data-theme="dark"].warehouse-app .reports-mode-card,
body[data-theme="dark"].warehouse-app .reports-toolbar,
body[data-theme="dark"].warehouse-app .erp-table-container{
  background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-soft) 72%,var(--surface)));
}
body[data-theme="dark"].warehouse-app input,
body[data-theme="dark"].warehouse-app select,
body[data-theme="dark"].warehouse-app textarea{box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}

/* ===== Responsive polish ===== */
@media (max-width:1100px){
  .warehouse-app .erp-container{padding-inline:14px}
  .warehouse-app .erp-header{padding:18px;border-radius:24px}
  .warehouse-app .brand-lockup{min-width:0}
  .warehouse-app .erp-header h1{font-size:23px}
  .warehouse-app .brand-logo-shell{width:64px;height:64px;border-radius:21px}
  .warehouse-app .nav-tabs{border-radius:18px}
}

@media (max-width:760px){
  body.warehouse-app{background:linear-gradient(180deg,var(--bg-main),color-mix(in srgb,var(--bg-main) 96%,var(--brand-soft)))}
  .warehouse-app .erp-container{padding:8px 8px calc(var(--mobile-nav-h,70px) + env(safe-area-inset-bottom) + 14px)}
  .warehouse-app .erp-header{padding:13px;border-radius:20px;box-shadow:0 20px 46px -34px rgba(56,8,35,.82)}
  .warehouse-app .brand-logo-shell{width:54px;height:54px;padding:6px;border-radius:18px}
  .warehouse-app .erp-header h1{font-size:18px}
  .warehouse-app .warehouse-name-display{font-size:9px;margin-top:4px}
  .warehouse-app .header-actions .btn,
  .warehouse-app .header-select-with-icon,
  .warehouse-app .current-user-pill,
  .warehouse-app .active-site-selector,
  .warehouse-app .offline-queue-pill{border-radius:12px;background:rgba(255,255,255,.085)}
  .warehouse-app .nav-tabs{background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 -16px 42px -26px rgba(35,14,28,.42);border-radius:0}
  .warehouse-app .tab-btn{min-height:52px;border-radius:13px}
  .warehouse-app .settings-card,
  .warehouse-app .chart-card,
  .warehouse-app .reports-mode-card,
  .warehouse-app .reports-toolbar,
  .warehouse-app .reports-chart-card,
  .warehouse-app .reports-insight-card,
  .warehouse-app .reports-table-card,
  .warehouse-app .audit-table-card,
  .warehouse-app .erp-table-container{border-radius:17px;box-shadow:0 12px 30px -26px rgba(40,15,31,.34)}
  .warehouse-app .kpi-card,
  .warehouse-app .metric-card,
  .warehouse-app .dashboard-status-card{border-radius:16px}
  .warehouse-app .modal-card{border-radius:22px 22px 0 0;box-shadow:0 -24px 64px -34px rgba(20,8,16,.56)}
  .warehouse-app #inventorySection::before,
  .warehouse-app #dashboardSection::before,
  .warehouse-app #reportsSection::before,
  .warehouse-app #masterSection::before,
  .warehouse-app #auditSection::before,
  .warehouse-app #settingsSection::before{width:120px;height:120px;opacity:.012}
}

@media (max-width:430px){
  .warehouse-app .erp-container{padding-inline:6px}
  .warehouse-app .erp-header{border-radius:17px}
  .warehouse-app .brand-logo-shell{width:48px;height:48px;border-radius:16px}
  .warehouse-app .brand-company-kicker{padding-inline:6px}
  .warehouse-app .tab-btn{min-width:70px;padding-inline:7px;font-size:8.5px}
  .warehouse-app .btn{min-height:42px}
}