.location-empty-table{width:100%;border-collapse:collapse;margin-top:10px;table-layout:auto}
.location-empty-table th,.location-empty-table td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.location-empty-table th:first-child,.location-empty-table td:first-child{width:80px;text-align:center}

.mv-toolbar{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));align-items:center}
.mv-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;align-items:center}
.mv-column-dropdown-wrap{position:relative;display:inline-flex;justify-self:start}
.mv-columns{display:none;position:absolute;top:calc(100% + 10px);left:0;z-index:220;width:296px;max-width:min(320px,calc(100vw - 16px));max-height:360px;padding:10px;border:1px solid color-mix(in srgb,var(--line) 82%, transparent);border-radius:12px;background:var(--panel);box-shadow:0 16px 32px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);grid-template-columns:1fr;gap:8px}
.mv-columns.align-right{left:auto;right:0}
.mv-columns.open{display:grid}
.mv-columns-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 6px;border-bottom:1px solid var(--line)}
.mv-columns-head strong{font-size:12px;letter-spacing:.2px}
.mv-columns-head small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.mv-columns-actions{display:flex;gap:4px}
.mv-columns-actions button{border:0;background:transparent;color:var(--primary);font-size:11px;cursor:pointer;padding:3px 4px;border-radius:6px}
.mv-columns-actions button:hover{background:color-mix(in srgb,var(--primary) 12%, transparent)}
.mv-columns-list{overflow:auto;max-height:252px;display:grid;gap:4px;padding-right:2px;scrollbar-gutter:stable;scroll-behavior:smooth}
.mv-columns-list label{font-size:12px;display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;line-height:1.3;padding:7px 8px;border-radius:8px;cursor:pointer}
.mv-columns-list label em{font-size:10px;font-style:normal;color:var(--muted)}
.mv-columns-list label.is-selected{background:color-mix(in srgb,#f43f5e 12%, transparent)}
.mv-columns-list label:hover{background:color-mix(in srgb,var(--primary) 10%, transparent)}
.mv-columns label span{word-break:break-word}
.mv-columns-foot{border-top:1px solid var(--line);padding-top:8px;display:flex;justify-content:flex-end}
.th-filter-wrap{display:flex;align-items:center;gap:6px;position:relative}
.th-filter-btn{border:0;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;padding:0 2px;display:inline-flex;align-items:center;gap:3px}
.th-filter-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 14px}
.th-filter-icon svg{width:14px;height:14px;display:block;fill:currentColor}
.th-filter-btn.active{color:var(--primary);font-weight:700}
.th-filter-count{font-size:10px;background:var(--primary);color:#fff;border-radius:999px;padding:1px 5px;line-height:1.2}
.th-filter-dropdown{position:fixed;top:0;left:0;z-index:120;width:min(220px,calc(100vw - 16px));max-height:min(320px,calc(100vh - 16px));background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.th-filter-search{width:100%;margin-bottom:7px;font-size:12px;padding:7px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.th-filter-actions{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.th-filter-actions button{border:0;background:transparent;color:var(--primary);font-size:11px;cursor:pointer;padding:2px 0}
.th-filter-options{max-height:200px;overflow:auto;display:grid;gap:4px}
.th-filter-options label{display:flex;gap:6px;font-size:12px;align-items:center}
.movement-results{display:grid;gap:10px;min-width:0}
.table-wrap-full{max-width:100%;overflow-x:auto;overflow-y:visible}
.table-wrap-full table{min-width:1100px}
.table-wrap-full th,.table-wrap-full td{padding:7px 10px;font-size:12px;line-height:1.3}
.table-wrap-full th{position:relative;overflow:visible}
.mv-pagination{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.mv-mobile-only{display:none}

@media (max-width: 899px){
  .mv-mobile-only{display:inline-flex}
  .mv-filters{display:none}
  .mv-filters.open{display:grid}
  .mv-column-dropdown-wrap{width:100%}
  .mv-column-dropdown-wrap [data-mv-action='columns']{width:100%}
  .mv-columns{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;max-height:74vh;border-radius:16px 16px 0 0;padding:8px 10px 10px;z-index:260}
  .mv-columns::before{content:"";width:36px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 6px;display:block}
  .mv-columns-head{padding:0 2px 6px;gap:6px}
  .mv-columns-head strong{font-size:12px}
  .mv-columns-head small{font-size:10px;line-height:1.25}
  .mv-columns-actions button{font-size:10px;padding:2px 4px}
  .mv-columns-list{max-height:calc(74vh - 132px);gap:3px}
  .mv-columns-list label{grid-template-columns:20px 1fr auto;font-size:12px;padding:7px 8px;min-height:46px}
  .mv-columns-list label em{font-size:9px;padding:1px 4px;border-radius:999px;background:color-mix(in srgb,var(--line) 45%, transparent)}
  .mv-columns-list input[type="checkbox"]{width:18px;height:18px}
  .mv-columns-foot{position:sticky;bottom:0;background:var(--panel);padding:8px 0 0}
  .mv-columns-foot .btn-ghost{width:100%;padding:7px 10px;font-size:12px}
}

.search-modal-open #page-search.search-modal{
  position:fixed;
  inset:0;
  z-index:80;
  margin:0;
  border-radius:0;
  overflow:auto;
}
.search-modal-open #page-search .search-layout{max-width:980px;margin:18px auto;}
.search-modal-open #searchInput.search-lg{font-size:22px;padding:18px;}
.recent-searches{margin-top:4px}


.anomaly-toolbar{
  margin-top:8px;
  margin-bottom:14px;
  gap:10px;
}
#page-anomaly,
#page-anomaly .card,
#page-anomaly #anomalyTable{
  max-width:100%;
  overflow:hidden;
}
#page-anomaly .anomaly-table-wrap{
  border-radius:12px;
  overflow-x:auto;
  overflow-y:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
#page-anomaly .anomaly-table-wrap table{
  min-width:980px;
  width:max-content;
  max-width:none;
}
#page-anomaly .anomaly-table-wrap thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#fff5f5;
}
#page-anomaly .anomaly-table-wrap th,
#page-anomaly .anomaly-table-wrap td{
  padding:10px 12px;
  font-size:13px;
  vertical-align:top;
  white-space:nowrap;
}
#page-anomaly .anomaly-table-wrap tbody td:nth-child(3),
#page-anomaly .anomaly-table-wrap tbody td:nth-child(4),
#page-anomaly .anomaly-table-wrap tbody td:nth-child(6){
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.3;
}
#page-anomaly .mv-pagination{
  max-width:100%;
  overflow:hidden;
}
@media (max-width: 899px){
  .anomaly-toolbar{
    margin-bottom:12px;
  }
  #page-anomaly .anomaly-table-wrap th,
  #page-anomaly .anomaly-table-wrap td{
    padding:7px 8px;
    font-size:11px;
  }
  #page-anomaly .anomaly-table-wrap table{
    min-width:820px;
  }
  #page-anomaly .anomaly-table-wrap tbody td:nth-child(3),
  #page-anomaly .anomaly-table-wrap tbody td:nth-child(4),
  #page-anomaly .anomaly-table-wrap tbody td:nth-child(6){
    min-width:170px;
  }
}

@media (max-width: 768px){
  #page-anomaly{
    min-height:calc(100dvh - 120px);
  }
  #page-anomaly .anomaly-table-wrap{
    min-height:420px;
  }
}

@media (min-width: 900px){
  #page-anomaly .anomaly-table-wrap{
    height:calc(100dvh - 300px);
    max-height:calc(100dvh - 300px);
  }
}

#page-stats .page-title{margin-bottom:12px}
#page-stats{display:flex;flex-direction:column;gap:12px;min-height:calc(100dvh - 120px)}
#page-stats > .row{margin:0}
#page-stats select,#page-stats input{height:40px;border-radius:12px}
#page-stats .grid.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
#page-stats .metric{padding:14px}
#page-stats .metric .k{font-size:12px}
#page-stats .metric .v{font-size:clamp(18px,3vw,28px);line-height:1.15}
#page-stats .summary-card .v{font-size:clamp(14px,2.4vw,22px)}
.stats-breakdown-grid{margin-top:16px}
.stats-breakdown-grid .summary-card{padding:12px;border-radius:12px}
.stats-breakdown-grid .summary-card .k{font-size:12px}
.stats-insight-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px;margin-top:16px}
.stats-toolbar{grid-template-columns:minmax(0,1fr) 180px 140px;align-items:end;gap:10px;margin:4px 0 6px}
.stats-search-field{display:grid;gap:6px;min-width:0}
.stats-search-field span{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.stats-toolbar input{min-width:0;border:1px solid var(--line);background:var(--panel);padding:0 12px}
.stats-toolbar select{font-size:12px;padding:0 28px 0 10px}
.stats-table-shell{flex:1;min-height:0;display:flex}
.stats-table-wrap{flex:1;min-height:calc(100dvh - 360px);max-height:calc(100dvh - 360px);overflow:auto}
.stats-table-wrap table{min-width:980px;width:100%;table-layout:fixed}
.stats-table-wrap tbody td{background:#fff}
.stats-table-wrap thead th{position:sticky;top:0;z-index:3;background:#f3e2e5;color:#b31217}
.stats-table-wrap th,.stats-table-wrap td{padding:11px 12px;vertical-align:middle}
.stats-table-wrap th:nth-child(1),.stats-table-wrap td:nth-child(1){width:15%}
.stats-table-wrap th:nth-child(2),.stats-table-wrap td:nth-child(2){width:14%}
.stats-table-wrap th:nth-child(3),.stats-table-wrap td:nth-child(3){width:40%}
.stats-table-wrap th:nth-child(4),.stats-table-wrap td:nth-child(4){width:11%}
.stats-table-wrap th:nth-child(5),.stats-table-wrap td:nth-child(5){width:12%;text-align:center}
.stats-table-wrap td:nth-child(1),.stats-table-wrap td:nth-child(2),.stats-table-wrap td:nth-child(4){white-space:normal;word-break:break-word;overflow-wrap:anywhere;line-height:1.35}
.stats-table-wrap td:nth-child(3){white-space:normal;word-break:break-word;overflow-wrap:anywhere;line-height:1.35}
.stats-table-wrap td:nth-child(3) .nama-barang{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stats-table-wrap .action-cell{text-align:center}
.stats-pagination{margin-top:8px}
.stats-top-gap{margin-top:18px}
body.dark .stats-table-wrap tbody td{background:var(--panel)}

@media (min-width:900px){
  #page-stats{gap:14px;min-height:calc(100dvh - 92px)}
  #page-stats .grid.stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
  .stats-breakdown-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .stats-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .stats-toolbar{grid-template-columns:minmax(360px,1fr) 200px 150px;margin-top:10px;margin-bottom:8px}
  .stats-table-wrap{min-height:calc(100dvh - 320px);max-height:calc(100dvh - 320px)}
}

.stats-toolbar + .table-wrap.table-wrap-full{margin-top:14px}
@media (max-width:899px){
  .stats-toolbar{grid-template-columns:1fr;gap:8px;align-items:stretch}
  .stats-search-field,.stats-toolbar select{width:100%}
  .stats-table-wrap{min-height:calc(100dvh - 420px);max-height:calc(100dvh - 420px)}
  .stats-pagination{flex-direction:column;align-items:flex-start;gap:10px}
}

#page-statistics{display:flex;flex-direction:column;gap:14px}
.stats-filter-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.stats-toggle{display:flex;gap:8px;flex-wrap:wrap}
.stats-toggle .btn-ghost.active{background:var(--bg-soft);border-color:var(--line-strong)}
.st-bars{display:flex;flex-direction:column;gap:4px;min-width:140px}
.st-bar{height:8px;border-radius:999px;min-width:2px}
.st-bar.in{background:#16a34a}
.st-bar.out{background:#f97316}
.stats-rank-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.stats-rank-grid .card{padding:12px;border-radius:12px}
.stats-rank-grid ol{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.stats-rank-grid li{display:flex;justify-content:space-between;gap:10px}

#page-settings{display:flex;flex-direction:column;gap:16px}
.settings-layout{display:flex;flex-direction:column;gap:16px}
.settings-card{border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 8px rgba(15,23,42,.05);padding:16px}
.settings-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.settings-head i{width:18px;height:18px;color:#334155}
.settings-head h4{margin:0;font-size:15px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-item{display:grid;gap:3px}
.settings-item small{font-size:11px;color:var(--muted)}
.settings-item strong{font-size:14px}
.settings-status{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:13px}
.status-dot{width:9px;height:9px;border-radius:999px;display:inline-block}
.status-dot.ok{background:#22c55e}.status-dot.error{background:#ef4444}.status-dot.loading{background:#f59e0b}
.settings-list{display:grid;gap:10px}
.settings-source-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 92%,#fff)}
.settings-source-main{display:flex;gap:8px;align-items:flex-start}
.settings-source-main i{width:16px;height:16px;margin-top:2px;color:#475569}
.settings-source-main small{display:block;color:var(--muted);font-size:11px}
.settings-source-meta{text-align:right;display:grid;gap:4px}
.settings-source-meta span{font-size:12px;font-weight:600}
.settings-source-meta em{font-size:11px;font-style:normal;padding:2px 8px;border-radius:999px}
.settings-source-meta em.ok{background:#dcfce7;color:#166534}
.settings-source-meta em.empty{background:#f1f5f9;color:#334155}
.settings-source-meta em.error{background:#fee2e2;color:#991b1b}
.settings-actions{margin-top:12px;gap:8px}
.settings-feature-list{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.settings-feature-list li{display:flex;align-items:center;gap:7px;font-size:13px}
.settings-feature-list i{width:16px;height:16px;color:#475569}
.settings-note{color:var(--muted);font-size:11px}
.settings-desc{margin:2px 0 0;font-size:13px}

@media (max-width:899px){
  .settings-grid,.settings-feature-list{grid-template-columns:1fr}
}


#page-locations{display:grid;grid-template-columns:1.7fr .9fr;gap:12px;align-items:start}
#page-locations > .page-title,#locationsSummary,#page-locations > .mv-toolbar,#locationDetail{grid-column:1/-1;min-width:0}
#locationsTable,#locationsEmpty{min-width:0}
#locationsTable .card,#locationsEmpty .card{height:100%;display:flex;flex-direction:column}
#locationsTable .table-wrap,#locationsEmpty .table-wrap{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
#locationsTable .table-wrap table{min-width:860px}
#locationsEmpty .table-wrap table{min-width:520px}
#page-locations .table-wrap{max-height:360px;overflow:auto}
#page-locations table th{position:sticky;top:0;z-index:3;background:#f3e2e5;color:#b31217;border-bottom:1px solid #d9b8bf}
#page-locations #locationsTable th,#page-locations #locationsTable td,#page-locations #locationsEmpty th,#page-locations #locationsEmpty td{padding:6px 8px;font-size:11.5px;line-height:1.25}
#page-locations .table-wrap-full table{min-width:760px}
#locationsFilters{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
#locationDetail .table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;max-width:100%}
#locationDetail .table-wrap.table-wrap-full{overflow-x:auto;overflow-y:auto}
#locationDetail .table-wrap table{min-width:980px}
#locationDetail th,#locationDetail td{white-space:nowrap}
#locationDetail .card{min-width:0}

#locationsEmpty .table-wrap{max-height:360px}
#locationsEmpty th,#locationsEmpty td{padding:5px 7px;font-size:11px}
#locationsTable th,#locationsTable td{font-size:12px}
@media (max-width:1100px){#page-locations{grid-template-columns:1fr}#locationsTable .table-wrap table{min-width:760px}#locationsEmpty .table-wrap table{min-width:480px}}
.insight-card{background:linear-gradient(180deg,#f7fafc,#fff);border:1px solid #e8edf4;border-radius:14px;padding:12px 14px;margin-bottom:12px}
.insight-group h4{margin:6px 0;font-size:13px}
.insight-group ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.insight-group li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4}
.insight-dot{color:#64748b;font-weight:700}
.insight-card strong{color:#0f766e}
body.dark .insight-card{background:linear-gradient(180deg,#0f172a,#111827);border-color:#334155;color:#e2e8f0}
body.dark .insight-group h4{color:#f8fafc}
body.dark .insight-group li{color:#cbd5e1}
body.dark .insight-dot{color:#94a3b8}
body.dark .insight-card strong{color:#5eead4}
@media (max-width:768px){.insight-card{padding:10px}.insight-group li{font-size:12px}}

@media (max-width: 899px){
  .mv-toolbar{grid-template-columns:1fr}
}

@media (max-width:768px){
  #page-locations{gap:10px}
  #locationsSummary{grid-template-columns:1fr}
  #locationsFilters{grid-template-columns:1fr}
  #page-locations .mv-toolbar{grid-template-columns:1fr}
  #locationsTable .table-wrap table{min-width:640px}
  #locationsEmpty .table-wrap table{min-width:360px}
  #locationDetail .table-wrap table{min-width:900px}
  #locationsTable .mv-pagination{flex-direction:column;align-items:flex-start}
}

/* Stok Minus layout tuning */
#page-stok-minus{display:flex;flex-direction:column;gap:12px;min-height:calc(100dvh - 110px)}
#stokMinusTable{display:flex;flex-direction:column;flex:1;min-height:0}
#stokMinusTable .stokminus-card{display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;gap:12px}
#stokMinusTable .stokminus-toolbar{grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(140px,1fr)) auto;gap:12px;align-items:end}
#stokMinusTable .stokminus-toolbar input,#stokMinusTable .stokminus-toolbar select,#stokMinusTable .stokminus-toolbar button{height:42px}
#stokMinusTable .stokminus-export{padding:0 14px;white-space:nowrap}
#stokMinusTable .stokminus-table-wrap{flex:1;min-height:calc(100dvh - 380px);max-height:calc(100dvh - 380px);overflow:auto;-webkit-overflow-scrolling:touch}
#stokMinusTable .stokminus-table-wrap table{min-width:1120px}
#stokMinusTable .stokminus-table-wrap thead th{position:sticky;top:0;z-index:3;background:#f3e2e5;color:#b31217;border-bottom:1px solid #d9b8bf}
#stokMinusTable .stokminus-table-wrap th,#stokMinusTable .stokminus-table-wrap td{padding:11px 12px;font-size:13px;line-height:1.45;vertical-align:middle;white-space:nowrap}
#stokMinusTable .stokminus-table-wrap .col-nama{min-width:290px}
#stokMinusTable .stokminus-table-wrap .cell-nama{max-width:460px;overflow:hidden;text-overflow:ellipsis}
#stokMinusTable .stokminus-badge{padding:5px 10px;font-size:12px;font-weight:700}
#stokMinusTable .stokminus-track-btn{padding:7px 12px}
#stokMinusTable .stokminus-pagination{margin-top:auto;padding-top:4px}

@media (max-width: 899px){
  #page-stok-minus{min-height:calc(100dvh - 100px)}
  #stokMinusTable .stokminus-card{padding:12px;gap:10px}
  #stokMinusTable .stokminus-toolbar{grid-template-columns:1fr;gap:10px}
  #stokMinusTable .stokminus-toolbar > *{width:100%}
  #stokMinusTable .stokminus-table-wrap{min-height:calc(100dvh - 500px);max-height:calc(100dvh - 500px)}
  #stokMinusTable .stokminus-table-wrap th,#stokMinusTable .stokminus-table-wrap td{padding:10px;font-size:12px}
  #stokMinusTable .stokminus-table-wrap .col-nama{min-width:240px}
  #stokMinusTable .stokminus-badge{font-size:11px}
  #stokMinusTable .stokminus-pagination{flex-direction:column;align-items:flex-start;gap:10px}
}


/* Cycle Count */
#page-cycle-count{min-width:0}
#page-cycle-count #cycleCountApp,
#page-cycle-count .cc-grid,
#page-cycle-count .cc-card{min-width:0}
.cc-grid{display:grid;grid-template-columns:320px 1fr;gap:16px}
.cc-card{border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.cc-session-list{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.cc-session{border:1px solid var(--line,#e7e7e7);background:var(--card,#fff);border-radius:12px;padding:10px;text-align:left}
.cc-session.active{border-color:#2563eb}
.cc-stepper{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cc-step{padding:6px 10px;border-radius:999px;background:#f3f4f6}
.cc-step.on{background:#dbeafe;color:#1d4ed8}
.cc-form{display:grid;gap:10px}
.cc-form input,.cc-form textarea{border:1px solid var(--line,#ddd);border-radius:12px;padding:10px}
.cc-chip{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.cc-chip span{background:#eef2ff;border-radius:999px;padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.cc-cocok{background:#f0fdf4}
.cc-plus{background:#fff7ed}
.cc-minus{background:#fef2f2}
.cc-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px;z-index:1200}
.cc-modal-card{width:min(980px,100%);max-height:90dvh;overflow:auto;background:var(--card,#fff);border-radius:16px;padding:12px}
.cc-chip label{display:inline-flex;align-items:center;gap:6px;background:#eef2ff;border-radius:999px;padding:6px 10px}
#page-cycle-count .row{flex-wrap:wrap}
#page-cycle-count .table-wrap{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#page-cycle-count .table-wrap table{min-width:760px}
#page-cycle-count th,
#page-cycle-count td{
  white-space:nowrap;
  font-size:12px;
}

@media (max-width:900px){
  .cc-grid{grid-template-columns:1fr}
  .cc-session-list{max-height:38vh}
}

@media (max-width:768px){
  #page-cycle-count{padding:10px}
  #page-cycle-count .page-title{font-size:16px}
  #page-cycle-count .cc-card{padding:10px}
  #page-cycle-count .section-header{gap:8px}
  #page-cycle-count .section-header .btn-primary{width:100%}
  #page-cycle-count .cc-step{font-size:11px;padding:6px 8px}
  #page-cycle-count .cc-form input,
  #page-cycle-count .cc-form textarea{font-size:14px}
  #page-cycle-count .cc-chip span{max-width:100%;word-break:break-word}
  #page-cycle-count .table-wrap table{min-width:620px}
  #page-cycle-count .row button{flex:1 1 auto}
}

#locationsFilters #locSearchInput,
#locationsFilters #locSkuSearchInput{
  height:44px;
  border:1px solid #d7dee8;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius:12px;
  padding:0 14px;
  font-weight:500;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#locationsFilters #locSearchInput::placeholder,
#locationsFilters #locSkuSearchInput::placeholder{
  color:#7a8799;
}
#locationsFilters #locSearchInput:focus,
#locationsFilters #locSkuSearchInput:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
  background:#fff;
  outline:none;
}
body.dark #locationsFilters #locSearchInput,
body.dark #locationsFilters #locSkuSearchInput{
  background:#0f172a;
  border-color:#334155;
  color:#e2e8f0;
}

@media (min-width:900px){
  #locationsSummary{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  #locationsSummary .metric{
    border-radius:14px;
    padding:16px;
  }
  #locationsSummary .metric .k{font-size:12px;letter-spacing:.2px}
  #locationsSummary .metric .v{font-size:clamp(24px,2.1vw,30px);line-height:1.2}
}

.archive-layout{display:grid;gap:14px}
.archive-section{display:grid;gap:12px}
.archive-filter-card{margin-top:4px}
.archive-table-card{margin-top:8px}
.archive-filters{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.archive-table-wrap{max-height:520px}
.archive-table-wrap thead th{position:sticky;top:0;z-index:3;background:#f3e2e5;color:#b31217}
@media (max-width:899px){
  .archive-layout{gap:12px}
  .archive-filters{grid-template-columns:1fr}
}


/* Login view styles */
:root {
  --login-bg: var(--bg, #f3f4f6);
  --login-text: var(--text, #111827);
  --login-card-bg: var(--panel, #ffffff);
  --login-card-border: color-mix(in srgb, var(--line, #e5e7eb) 78%, #ffffff 22%);
  --login-card-shadow: 0 16px 34px color-mix(in srgb, var(--text, #0f172a) 10%, transparent);

  --login-title: var(--text, #111827);
  --login-subtitle: var(--muted, #6b7280);
  --login-label: var(--text, #111827);

  --login-social-bg: var(--panel, #ffffff);
  --login-social-border: color-mix(in srgb, var(--line, #d1d5db) 82%, var(--panel, #ffffff) 18%);
  --login-social-text: var(--text, #111827);

  --login-divider: color-mix(in srgb, var(--muted, #9ca3af) 85%, var(--panel, #ffffff) 15%);
  --login-divider-line: color-mix(in srgb, var(--line, #e5e7eb) 84%, var(--panel, #ffffff) 16%);

  --login-input-bg: var(--panel, #ffffff);
  --login-input-border: color-mix(in srgb, var(--primary-2, #dc2626) 35%, var(--line, #d1d5db) 65%);
  --login-input-text: var(--text, #111827);
  --login-input-placeholder: #8b95a5;
  --login-input-icon: var(--primary-2, #dc2626);
  --login-eye: var(--muted, #6b7280);

  --login-error-bg: color-mix(in srgb, var(--danger, #dc2626) 12%, #ffffff 88%);
  --login-error-border: color-mix(in srgb, var(--danger, #dc2626) 35%, #e5e7eb 65%);
  --login-error-text: color-mix(in srgb, var(--danger, #dc2626) 80%, #111827 20%);

  --login-signup-text: var(--muted, #6b7280);
  --login-signup-link: var(--primary-2, #dc2626);
}

body.dark {
  --login-bg: var(--bg, #020617);
  --login-text: #f8fafc;
  --login-card-bg: color-mix(in srgb, var(--panel, #0f172a) 92%, #020617 8%);
  --login-card-border: color-mix(in srgb, var(--line, #334155) 74%, #0f172a 26%);
  --login-card-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);

  --login-title: #f8fafc;
  --login-subtitle: #cbd5e1;
  --login-label: #f8fafc;

  --login-social-bg: color-mix(in srgb, var(--panel, #0f172a) 84%, #020617 16%);
  --login-social-border: color-mix(in srgb, var(--line, #334155) 76%, #1e293b 24%);
  --login-social-text: #f8fafc;

  --login-divider: #f43f5e;
  --login-divider-line: color-mix(in srgb, var(--line, #334155) 72%, #0f172a 28%);

  --login-input-bg: color-mix(in srgb, var(--panel, #0f172a) 86%, #020617 14%);
  --login-input-border: color-mix(in srgb, var(--primary-2, #ef4444) 42%, var(--line, #334155) 58%);
  --login-input-text: #f8fafc;
  --login-input-placeholder: #94a3b8;
  --login-input-icon: #f43f5e;
  --login-eye: #cbd5e1;

  --login-error-bg: color-mix(in srgb, var(--danger, #ef4444) 18%, #020617 82%);
  --login-error-border: color-mix(in srgb, var(--danger, #ef4444) 45%, #1e293b 55%);
  --login-error-text: #fecaca;

  --login-signup-text: #cbd5e1;
  --login-signup-link: #f87171;
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--login-bg);
  color: var(--login-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-shell {
  width: 100%;
  max-width: 430px;
}

.login-form-panel {
  width: 100%;
  padding: 34px 28px 36px;
  border-radius: 18px;
  background: var(--login-card-bg);
  border: 1px solid var(--login-card-border);
  box-shadow: var(--login-card-shadow);
}

.login-head {
  margin-bottom: 28px;
}

.login-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.app-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--login-card-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

body.dark .app-icon {
  background: #e5e7eb;
}

.app-icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-brand-text {
  min-width: 0;
}

.login-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--login-title);
}

.login-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--login-subtitle);
}

.btn-social {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--login-social-border);
  background: var(--login-social-bg);
  color: var(--login-social-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
}

.google-icon,
.btn-social svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.divider {
  margin: 28px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--login-divider);
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--login-divider-line);
}

.form-error {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--login-error-bg);
  border: 1px solid var(--login-error-border);
  color: var(--login-error-text);
  font-size: 13px;
  line-height: 1.4;
}

.form-error:not([hidden]) {
  display: flex;
}

.form-error[hidden] {
  display: none !important;
}

.form-error i,
.form-error svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.form-field {
  margin-bottom: 18px;
}

.form-field label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--login-label);
}

.input-wrap {
  width: 100%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--login-input-border);
  background: var(--login-input-bg);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.input-wrap:hover {
  border-color: color-mix(in srgb, var(--primary-2, #dc2626) 55%, var(--login-input-border) 45%);
}

.input-wrap:focus-within {
  border-color: var(--primary-2, #dc2626);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-2, #dc2626) 18%, transparent);
}

.input-icon {
  width: 18px;
  height: 18px;
  margin-left: 16px;
  margin-right: 12px;
  flex: 0 0 auto;
  color: var(--login-input-icon);
}

.form-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 14px 0 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--login-input-text);
  font-size: 14px;
}

.form-input::placeholder {
  color: var(--login-input-placeholder);
}

.password-toggle {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--login-eye);
  cursor: pointer;
}

.password-toggle svg,
.password-toggle i {
  width: 20px;
  height: 20px;
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 14px;
  color: var(--login-text);
}

.remember-checkbox {
  appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--primary-2, #dc2626);
}

.login-btn {
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--primary-2, #dc2626);
  background: var(--primary-color, var(--primary-2, #dc2626));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}

.login-btn:hover {
  background: var(--primary-2, #dc2626);
}

.login-btn:disabled,
.login-btn.is-loading {
  opacity: 0.92;
  filter: brightness(0.85);
  cursor: not-allowed;
}

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: login-spin 0.75s linear infinite;
}

 .btn-spinner[hidden] {
  display: none;
}

@keyframes login-spin {
  to {
    transform: rotate(360deg);
  }
}

.signup-line {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--login-signup-text);
}

.signup-line a {
  color: var(--login-signup-link);
  font-weight: 600;
}

@media (max-width: 640px) {
  .login-page {
    padding: 16px;
  }

  .login-shell {
    max-width: 100%;
  }

  .login-form-panel {
    padding: 30px 22px 34px;
  }

  .app-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }
}