/* =========================================================
   Warehouse Manager UI
   Clean Professional Dark Dashboard - Brighter Navy Version
   PC + Mobile Optimized
   ========================================================= */

:root{
  --bg:#101b32;
  --bg2:#17233b;
  --panel:#18243a;
  --panel2:#1d2d49;
  --panel3:#111d33;

  --text:#f8fafc;
  --muted:#a9b7cc;
  --muted2:#7f8ea5;

  --line:rgba(171,190,220,.22);
  --line2:rgba(171,190,220,.38);

  --primary:#2563eb;
  --primary2:#0ea5e9;
  --green:#22c55e;
  --amber:#f59e0b;
  --red:#ef4444;

  --radius:16px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* =========================
   RESET
========================= */

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{
  width:100%;
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  font-family:Arial,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.18),transparent 34%),
    linear-gradient(180deg,#101b32 0%,#13203a 48%,#17233b 100%);
}

body.modal-open{
  overflow:hidden !important;
  height:100vh !important;
}

button,
input,
select,
textarea{
  font-family:inherit;
}

button{
  cursor:pointer;
}

button:disabled{
  opacity:.52;
  cursor:not-allowed;
}

.hidden{
  display:none!important;
}

.text-center{
  text-align:center;
}

.muted-text{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* Chống mobile tự zoom khi bấm input */
input,
select,
textarea{
  font-size:16px;
}

/* =========================
   APP
========================= */

.app-shell{
  width:100%;
  min-height:100vh;
  padding:12px;
  padding-bottom:calc(18px + var(--safe-bottom));
}

/* =========================
   LOGIN
========================= */

.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at top left,rgba(56,189,248,.24),transparent 38%),
    linear-gradient(135deg,#101b32,#17233b 60%,#123b55);
}

.login-card{
  width:100%;
  max-width:420px;
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
}

.login-logo{
  margin-bottom:16px;
}

.login-card h2{
  margin:0 0 8px;
  font-size:24px;
  letter-spacing:-.03em;
}

.login-card p{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.45;
}

.login-card .form-group{
  margin-bottom:15px;
}

.login-btn{
  width:100%;
  margin-top:8px;
}

.login-note{
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

/* =========================
   BUTTON
========================= */

.btn{
  min-height:40px;
  border:1px solid transparent;
  border-radius:12px;
  padding:0 14px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  transition:.15s ease;
  touch-action:manipulation;
}

.btn:active,
.quick-btn:active,
.area-item:active,
.toggle-btn:active,
.shelf-actions button:active,
.link-btn:active{
  transform:scale(.985);
}

.btn.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;
  border-color:rgba(255,255,255,.1);
}

.btn.ghost,
.btn.dark{
  background:#121f36;
  color:#e2e8f0;
  border-color:var(--line);
}

.btn.soft{
  background:rgba(37,99,235,.18);
  color:#bfdbfe;
  border-color:rgba(96,165,250,.34);
}

.btn.small{
  min-height:34px;
  padding:0 11px;
  font-size:12px;
  border-radius:10px;
}

#btnOpenLogs,
#btnOpenExportStats,
#btnRefresh,
#btnExportExcel,
#btnExportAllExcel{
  background:#1b2a44;
  color:#e2e8f0;
  border:1px solid var(--line);
}

#btnOpenLogs:hover,
#btnOpenExportStats:hover,
#btnRefresh:hover,
#btnExportExcel:hover,
#btnExportAllExcel:hover{
  background:#243756;
}

#btnLogout{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
}

.icon-btn{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#121f36;
  color:#fff;
  font-size:22px;
  line-height:1;
}

.link-btn{
  border:1px solid rgba(96,165,250,.26);
  background:rgba(37,99,235,.15);
  color:#93c5fd;
  font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  min-height:32px;
}

.link-btn.danger{
  color:#fca5a5;
  border-color:rgba(239,68,68,.32);
  background:rgba(239,68,68,.14);
}

/* =========================
   HEADER - PC PROFESSIONAL
========================= */

.app-header{
  min-height:78px;
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:18px;
  padding:13px 15px;
  display:grid;
  grid-template-columns:minmax(300px,1fr) auto;
  align-items:center;
  gap:14px;
}

.header-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.app-logo{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  color:#fff;
  font-weight:900;
  letter-spacing:.4px;
  box-shadow:0 10px 24px rgba(14,165,233,.2);
}

.app-header h1{
  margin:0;
  font-size:17px;
  line-height:1.22;
  color:#fff;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-header p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.user-box{
  width:132px;
  min-height:40px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#121f36;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.user-box strong{
  color:#fff;
  font-size:12px;
  line-height:1.15;
}

.user-box span{
  margin-top:2px;
  color:#38bdf8;
  font-size:10px;
  text-transform:uppercase;
  font-weight:900;
}

.header-actions .btn{
  min-height:40px;
  height:40px;
  min-width:92px;
  padding:0 11px;
  border-radius:12px;
  font-size:13px;
}

/* =========================
   SEARCH
========================= */

.search-panel{
  margin-top:10px;
  background:rgba(24,36,58,.94);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.search-box{
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#111d33;
  border:1px solid var(--line);
  border-radius:13px;
  padding:0 13px;
  min-width:0;
}

.search-icon{
  color:var(--muted);
  font-size:20px;
}

.search-box input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
}

.search-box input::placeholder{
  color:#7f8ea5;
}

.search-actions{
  display:grid;
  grid-template-columns:118px 118px;
  gap:8px;
}

/* =========================
   LAYOUT
========================= */

.main-layout{
  margin-top:12px;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
  position:sticky;
  top:12px;
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}

.sidebar-section + .sidebar-section{
  margin-top:16px;
}

.section-title{
  margin:0 0 9px;
  font-size:11px;
  font-weight:900;
  color:#a9b7cc;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.area-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.area-item{
  width:100%;
  min-height:62px;
  border:1px solid rgba(171,190,220,.18);
  background:#121f36;
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  color:var(--text);
  overflow:hidden;
  transition:.15s ease;
}

.area-item:hover{
  background:#192843;
  border-color:var(--line2);
}

.area-item.active{
  background:linear-gradient(135deg,rgba(37,99,235,.28),rgba(14,165,233,.16));
  border-color:rgba(96,165,250,.72);
  box-shadow:inset 3px 0 0 #38bdf8;
}

.area-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#0ea5e9;
  color:#fff;
  font-weight:900;
}

.area-item strong{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.18;
}

.area-item small{
  display:block;
  margin-top:3px;
  color:#a9b7cc;
  font-size:11px;
  line-height:1.28;
}

.quick-btn{
  width:100%;
  min-height:40px;
  border:1px solid rgba(171,190,220,.18);
  background:#121f36;
  border-radius:13px;
  color:#d7e0ee;
  font-weight:800;
  font-size:13px;
  margin-bottom:7px;
  text-align:left;
  padding:0 12px;
  transition:.15s ease;
}

.quick-btn:hover{
  background:#1c2e4d;
  color:#fff;
  border-color:var(--line2);
}

.sidebar-note{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:#121f36;
  border:1px dashed rgba(171,190,220,.28);
}

.sidebar-note strong{
  font-size:12px;
  color:#fff;
}

.sidebar-note p{
  margin:6px 0 0;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}

/* =========================
   CONTENT
========================= */

.content{
  min-width:0;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.summary-card{
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:16px;
  padding:11px 13px;
  min-width:0;
}

.summary-card:nth-child(1){border-left:3px solid #2563eb;}
.summary-card:nth-child(2){border-left:3px solid #f59e0b;}
.summary-card:nth-child(3){border-left:3px solid #22c55e;}
.summary-card:nth-child(4){border-left:3px solid #06b6d4;}

.summary-label{
  display:block;
  font-size:11px;
  color:var(--muted);
  font-weight:800;
  line-height:1.25;
}

.summary-card strong{
  display:block;
  margin-top:4px;
  font-size:23px;
  color:#fff;
  letter-spacing:-.04em;
}

.content-header{
  margin-top:10px;
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
}

.content-header h2{
  margin:0;
  font-size:18px;
  color:#fff;
  letter-spacing:-.02em;
}

.content-header p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

.view-toggle{
  width:240px;
  display:flex;
  background:#111d33;
  padding:4px;
  border-radius:13px;
  border:1px solid var(--line);
}

.toggle-btn{
  flex:1;
  min-height:34px;
  border:0;
  background:transparent;
  border-radius:10px;
  padding:0 10px;
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.toggle-btn.active{
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  color:#fff;
}

/* =========================
   WAREHOUSE GRID
========================= */

.warehouse-grid{
  margin-top:12px;
  display:grid;
  gap:14px;
}

.warehouse-row-map{
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  overflow:hidden;
}

.warehouse-row-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px;
}

.warehouse-row-title h3{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}

.warehouse-row-title small{
  color:#bfdbfe;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.row-badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 13px;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.ktp-shelf-wrap{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.ktp-shelf-block{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(17,29,51,.72);
  padding:12px;
}

.ktp-shelf-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
}

.ktp-shelf-title strong{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  background:rgba(37,99,235,.22);
  color:#bfdbfe;
  border:1px solid rgba(96,165,250,.32);
  font-size:12px;
  font-weight:900;
}

.ktp-shelf-title span{
  color:#bfdbfe;
  font-size:12px;
  font-weight:800;
}

.shelf-map{
  display:grid;
  gap:10px;
}

.ktp-slot-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.twenty-slot-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.four-slot-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* =========================
   LOCATION BOX
========================= */

.shelf-box{
  min-width:0;
  min-height:128px;
  border:1.5px solid var(--line);
  border-radius:16px;
  background:#122038;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  position:relative;
  transition:.15s ease;
}

.shelf-box:hover{
  transform:translateY(-1px);
  border-color:var(--line2);
}

.shelf-box.empty{
  border-color:#16a34a;
  background:linear-gradient(180deg,#122038 0%,rgba(6,78,35,.72) 100%);
}

.shelf-box.used{
  border-color:#d97706;
  background:linear-gradient(180deg,#122038 0%,rgba(92,45,10,.72) 100%);
}

.shelf-box.full{
  border-color:#dc2626;
  background:linear-gradient(180deg,#122038 0%,rgba(95,18,18,.72) 100%);
}

.shelf-box::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:3px;
}

.shelf-box.empty::before{background:#22c55e;}
.shelf-box.used::before{background:#f59e0b;}
.shelf-box.full::before{background:#ef4444;}

.shelf-top{
  padding:8px 9px;
  background:rgba(24,36,58,.82);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:6px;
  min-width:0;
}

.shelf-top strong{
  color:#fff;
  font-size:15px;
  line-height:1.15;
  font-weight:900;
}

.shelf-top span{
  color:#a9b7cc;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shelf-content{
  padding:7px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.shelf-empty{
  width:100%;
  min-height:44px;
  border:1px dashed rgba(34,197,94,.66);
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#bbf7d0;
  background:rgba(6,78,35,.38);
  font-weight:900;
  letter-spacing:.05em;
  font-size:13px;
}

.shelf-stock-list{
  width:100%;
  display:grid;
  gap:7px;
}

.shelf-stock-item{
  background:rgba(24,36,58,.9);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  min-width:0;
}

.shelf-stock-item strong{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.shelf-stock-item span{
  display:block;
  margin-top:3px;
  color:#d7e0ee;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  word-break:break-word;
}

.shelf-stock-item b{
  display:inline-flex;
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  background:#111d33;
  color:#fff;
  border:1px solid var(--line);
  font-size:10px;
}

.shelf-more{
  color:#93c5fd;
  font-size:12px;
  font-weight:800;
}

.shelf-actions{
  padding:7px;
  border-top:1px solid var(--line);
  background:rgba(24,36,58,.78);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.shelf-actions button{
  min-height:32px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#111d33;
  color:#e2e8f0;
  font-weight:800;
  font-size:12px;
}

.shelf-actions button:hover{
  background:#243756;
  color:#fff;
}

/* =========================
   TABLE
========================= */

.table-panel,
.search-result-panel{
  margin-top:12px;
  background:rgba(24,36,58,.96);
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
}

.panel-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.panel-heading h3{
  margin:0 0 10px;
  font-size:16px;
  color:#fff;
}

.panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.table-wrap{
  width:100%;
  overflow:auto;
  border-radius:14px;
  -webkit-overflow-scrolling:touch;
}

.data-table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
  font-size:13px;
}

.data-table th{
  background:#111d33;
  color:#d7e0ee;
  font-size:11px;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:11px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

.data-table td{
  padding:10px;
  border-bottom:1px solid var(--line);
  color:#e2e8f0;
  vertical-align:top;
}

.data-table tr:hover td{
  background:rgba(36,55,86,.58);
}

/* =========================
   MODAL
========================= */

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.68);
  z-index:50;
  display:grid;
  place-items:end center;
  padding:10px;
  padding-bottom:calc(10px + var(--safe-bottom));
  backdrop-filter:blur(5px);
  overscroll-behavior:contain;
}

.modal{
  width:100%;
  max-height:92vh;
  overflow:auto;
  background:#18243a;
  border-radius:22px 22px 18px 18px;
  border:1px solid var(--line);
  box-shadow:0 28px 80px rgba(0,0,0,.52);
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

.modal.large{
  width:100%;
}

.modal-header{
  padding:15px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:0;
  background:#18243a;
  z-index:1;
}

.modal-header h3{
  margin:0;
  font-size:18px;
  color:#fff;
}

.modal-header p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
}

.modal-body{
  padding:16px;
}

.modal-footer{
  padding:13px 16px;
  border-top:1px solid var(--line);
  background:#111d33;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  position:sticky;
  bottom:0;
}

.modal-footer .btn{
  width:100%;
}

.modal-footer .btn.primary{
  order:1;
}

.modal-footer .btn.ghost{
  order:2;
}

/* =========================
   FORM
========================= */

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}

.form-group{
  display:grid;
  gap:7px;
}

.form-group.full{
  grid-column:1/-1;
}

.form-group label{
  font-size:13px;
  color:#d7e0ee;
  font-weight:800;
}

.form-group label span{
  color:#fb7185;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  min-height:46px;
  border:1px solid var(--line);
  background:#111d33;
  border-radius:13px;
  padding:0 13px;
  outline:0;
  color:#fff;
}

.form-group textarea{
  padding-top:12px;
  resize:vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#7f8ea5;
}

.form-group select option{
  background:#111d33;
  color:#fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:rgba(96,165,250,.9);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}

.form-note{
  background:#111d33;
  border:1px dashed var(--line2);
  color:#d7e0ee;
  border-radius:14px;
  padding:12px;
  font-size:13px;
  line-height:1.5;
}

/* =========================
   INFO / EMPTY
========================= */

.empty-state{
  background:#111d33;
  border:1px dashed var(--line2);
  color:var(--muted);
  padding:22px;
  text-align:center;
  border-radius:16px;
  font-weight:800;
}

.info-box,
.move-info{
  background:#111d33;
  border:1px solid var(--line);
  border-radius:15px;
  padding:13px;
  margin-bottom:14px;
}

.info-box strong{
  display:block;
  font-size:15px;
  color:#fff;
}

.info-box p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* =========================
   TOAST / LOADING
========================= */

.toast{
  position:fixed;
  left:12px;
  right:12px;
  bottom:calc(14px + var(--safe-bottom));
  z-index:80;
  background:#111d33;
  color:#fff;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(0,0,0,.42);
  font-size:14px;
  font-weight:800;
  text-align:center;
}

.loading-overlay{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(5px);
  display:grid;
  place-items:center;
  text-align:center;
}

.loader{
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid #1e3a8a;
  border-top-color:#60a5fa;
  animation:spin .8s linear infinite;
}

.loading-overlay p{
  margin-top:58px;
  color:#d7e0ee;
  font-weight:800;
}

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

/* =========================
   MOBILE TABLE CARD
========================= */

@media(max-width:760px){
  .search-result-panel .table-wrap,
  .table-panel .table-wrap,
  #detailContent .table-wrap{
    overflow:visible;
  }

  .search-result-panel .data-table,
  .search-result-panel .data-table thead,
  .search-result-panel .data-table tbody,
  .search-result-panel .data-table tr,
  .search-result-panel .data-table th,
  .search-result-panel .data-table td,
  .table-panel .data-table,
  .table-panel .data-table thead,
  .table-panel .data-table tbody,
  .table-panel .data-table tr,
  .table-panel .data-table th,
  .table-panel .data-table td,
  #detailContent .data-table,
  #detailContent .data-table thead,
  #detailContent .data-table tbody,
  #detailContent .data-table tr,
  #detailContent .data-table th,
  #detailContent .data-table td{
    display:block;
    width:100%;
    min-width:0;
  }

  .search-result-panel .data-table thead,
  .table-panel .data-table thead,
  #detailContent .data-table thead{
    display:none;
  }

  .search-result-panel .data-table tbody,
  .table-panel .data-table tbody,
  #detailContent .data-table tbody{
    display:grid;
    gap:10px;
  }

  .search-result-panel .data-table tr,
  .table-panel .data-table tr,
  #detailContent .data-table tr{
    background:#111d33;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
  }

  .search-result-panel .data-table td,
  .table-panel .data-table td,
  #detailContent .data-table td{
    border:0;
    padding:6px 0;
    display:grid;
    grid-template-columns:86px 1fr;
    gap:10px;
    word-break:break-word;
  }

  .search-result-panel .data-table td::before,
  .table-panel .data-table td::before,
  #detailContent .data-table td::before{
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  .search-result-panel .data-table td:nth-child(1)::before{content:"Vị trí";}
  .search-result-panel .data-table td:nth-child(2)::before{content:"Mã hàng";}
  .search-result-panel .data-table td:nth-child(3)::before{content:"PO";}
  .search-result-panel .data-table td:nth-child(4)::before{content:"Màu";}
  .search-result-panel .data-table td:nth-child(5)::before{content:"Size";}
  .search-result-panel .data-table td:nth-child(6)::before{content:"Số kiện";}
  .search-result-panel .data-table td:nth-child(7)::before{content:"Khách";}
  .search-result-panel .data-table td:nth-child(8)::before{content:"Thao tác";}

  .table-panel .data-table td:nth-child(1)::before{content:"Vị trí";}
  .table-panel .data-table td:nth-child(2)::before{content:"Khu vực";}
  .table-panel .data-table td:nth-child(3)::before{content:"Dãy";}
  .table-panel .data-table td:nth-child(4)::before{content:"Kệ/Ô";}
  .table-panel .data-table td:nth-child(5)::before{content:"Mã hàng";}
  .table-panel .data-table td:nth-child(6)::before{content:"PO";}
  .table-panel .data-table td:nth-child(7)::before{content:"Số kiện";}
  .table-panel .data-table td:nth-child(8)::before{content:"Ghi chú";}
  .table-panel .data-table td:nth-child(9)::before{content:"Thao tác";}

  #detailContent .data-table td:nth-child(1)::before{content:"Mã hàng";}
  #detailContent .data-table td:nth-child(2)::before{content:"PO";}
  #detailContent .data-table td:nth-child(3)::before{content:"Màu";}
  #detailContent .data-table td:nth-child(4)::before{content:"Size";}
  #detailContent .data-table td:nth-child(5)::before{content:"Số kiện";}
  #detailContent .data-table td:nth-child(6)::before{content:"Khách";}
  #detailContent .data-table td:nth-child(7)::before{content:"Ghi chú";}
  #detailContent .data-table td:nth-child(8)::before{content:"Thao tác";}

  .search-result-panel .data-table td:last-child,
  .table-panel .data-table td:last-child,
  #detailContent .data-table td:last-child{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-top:10px;
  }

  .search-result-panel .data-table td:last-child::before,
  .table-panel .data-table td:last-child::before,
  #detailContent .data-table td:last-child::before{
    width:86px;
    flex:0 0 86px;
    padding-top:8px;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1200px){
  .app-header{
    grid-template-columns:1fr;
  }

  .header-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .user-box{
    width:100%;
  }

  .header-actions .btn{
    width:100%;
    min-width:0;
  }
}

@media(max-width:1100px){
  .main-layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:static;
  }

  .area-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .twenty-slot-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .search-panel{
    grid-template-columns:1fr;
  }

  .search-actions{
    width:100%;
    grid-template-columns:1fr 1fr;
  }

  .summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .content-header{
    grid-template-columns:1fr;
  }

  .view-toggle{
    width:100%;
  }

  .ktp-shelf-wrap{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .app-shell{
    padding:8px;
    padding-bottom:calc(14px + var(--safe-bottom));
  }

  .app-header{
    min-height:auto;
    padding:11px;
    border-radius:16px;
    gap:10px;
  }

  .header-left{
    gap:9px;
  }

  .app-logo{
    width:38px;
    height:38px;
    flex-basis:38px;
    border-radius:12px;
    font-size:13px;
  }

  .app-header h1{
    font-size:15px;
    white-space:normal;
  }

  .app-header p{
    font-size:11px;
  }

  .header-actions{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .user-box{
    grid-column:1/-1;
    align-items:flex-start;
    min-height:36px;
  }

  .header-actions .btn{
    min-height:36px;
    height:36px;
    font-size:12px;
    border-radius:11px;
  }

  #btnLogout{
    grid-column:1/-1;
  }

  .search-box{
    height:42px;
  }

  .sidebar{
    padding:10px;
    border-radius:16px;
  }

  .area-list{
    grid-template-columns:1fr 1fr;
  }

  .area-item{
    min-height:58px;
    padding:8px;
  }

  .area-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .area-item strong{
    font-size:12px;
  }

  .area-item small{
    display:none;
  }

  .quick-btn{
    min-height:36px;
    font-size:12px;
  }

  .sidebar-note{
    display:none;
  }

  .summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .summary-card{
    padding:9px 10px;
  }

  .summary-card strong{
    font-size:20px;
  }

  .content-header{
    padding:10px;
  }

  .ktp-slot-grid,
  .twenty-slot-grid,
  .four-slot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .shelf-box{
    min-height:116px;
  }

  .shelf-empty{
    min-height:40px;
    font-size:13px;
  }

  .shelf-actions button{
    min-height:32px;
    font-size:12px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .modal-backdrop{
    padding:8px;
    padding-bottom:calc(8px + var(--safe-bottom));
  }

  .modal{
    border-radius:18px;
    max-height:94vh;
  }
}

@media(min-width:641px){
  .modal-backdrop{
    place-items:center;
    padding:18px;
  }

  .modal{
    width:min(620px,100%);
    border-radius:22px;
  }

  .modal.large{
    width:min(980px,100%);
  }

  .modal-footer{
    display:flex;
    justify-content:flex-end;
  }

  .modal-footer .btn{
    width:auto;
  }

  .modal-footer .btn.primary,
  .modal-footer .btn.ghost{
    order:initial;
  }

  .toast{
    left:auto;
    right:22px;
    bottom:22px;
    width:auto;
    text-align:left;
  }
}

@media(min-width:1360px){
  .app-shell{
    max-width:1480px;
    margin:0 auto;
  }
}

/* =========================
   SCROLLBAR
========================= */

*::-webkit-scrollbar{
  width:8px;
  height:8px;
}

*::-webkit-scrollbar-track{
  background:#111d33;
}

*::-webkit-scrollbar-thumb{
  background:#3f5273;
  border-radius:999px;
}

*::-webkit-scrollbar-thumb:hover{
  background:#526789;
}

/* =========================
   QUICK JUMP PANEL
========================= */

.quick-jump-panel{
  margin-top:10px;
  background:rgba(24,36,58,.94);
  border:1px solid var(--line);
  border-radius:18px;
  padding:10px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
}

.quick-jump-title{
  min-width:0;
}

.quick-jump-title strong{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.2;
}

.quick-jump-title span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}

.quick-jump-controls{
  display:grid;
  grid-template-columns:150px 130px 96px;
  gap:8px;
  align-items:center;
}

.quick-jump-controls select{
  height:40px;
  border:1px solid var(--line);
  background:#111d33;
  color:#fff;
  border-radius:12px;
  padding:0 10px;
  outline:0;
  font-size:16px;
}

.row-highlight{
  animation:rowPulse 1.8s ease;
}

@keyframes rowPulse{
  0%{
    box-shadow:0 0 0 0 rgba(56,189,248,.75);
    border-color:#38bdf8;
  }
  45%{
    box-shadow:0 0 0 6px rgba(56,189,248,.14);
    border-color:#38bdf8;
  }
  100%{
    box-shadow:none;
  }
}

@media(max-width:640px){
  .quick-jump-panel{
    grid-template-columns:1fr;
    gap:9px;
    padding:10px;
  }

  .quick-jump-title span{
    display:none;
  }

  .quick-jump-controls{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .quick-jump-controls .btn{
    grid-column:1 / -1;
    min-height:38px;
  }
}

#btnJumpRow{
  display:none;
}

/* =========================
   BACK TO TOP BUTTON - FIX MOBILE
========================= */

.back-top-btn{
  position:fixed !important;
  right:14px !important;
  bottom:calc(82px + var(--safe-bottom,0px)) !important;
  z-index:99999 !important;

  width:48px !important;
  height:48px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:999px !important;

  background:linear-gradient(135deg,#2563eb,#0ea5e9) !important;
  color:#fff !important;
  font-size:24px !important;
  font-weight:900 !important;
  line-height:1 !important;

  box-shadow:0 16px 38px rgba(0,0,0,.42) !important;
  display:grid !important;
  place-items:center !important;
}

.back-top-btn.hidden{
  display:none !important;
}

.back-top-btn:active{
  transform:scale(.96);
}

@media(max-width:640px){
  .back-top-btn{
    right:12px !important;
    bottom:calc(76px + var(--safe-bottom,0px)) !important;
    width:46px !important;
    height:46px !important;
    font-size:22px !important;
  }
}

/* =========================
   TRANSFER PENDING
========================= */

.pending-btn{
  border-color:rgba(245,158,11,.38) !important;
  color:#fde68a !important;
}

.link-btn.transfer{
  color:#fde68a;
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.35);
}

.link-btn.transfer:hover{
  background:rgba(245,158,11,.24);
  color:#fff;
}

#pendingTransferContent .data-table td{
  vertical-align:middle;
}

#completeTransferInfo b{
  color:#fff;
}
/* =========================
   HIGHLIGHT ADD STOCK BUTTON
========================= */

#btnOpenAddStock{
  position:relative;
  min-height:50px;
  padding:0 16px;
  border:1px solid rgba(56,189,248,.7) !important;
  border-radius:15px !important;
  background:
    linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%) !important;
  color:#fff !important;
  font-size:14px;
  font-weight:900;
  text-align:left;
  box-shadow:
    0 14px 30px rgba(14,165,233,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
}

#btnOpenAddStock::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),transparent 58%);
  pointer-events:none;
}

#btnOpenAddStock::after{
  content:"＋";
  position:absolute;
  right:13px;
  top:50%;
  width:26px;
  height:26px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:18px;
  font-weight:900;
  transform:translateY(-50%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}

#btnOpenAddStock:hover{
  background:
    linear-gradient(135deg,#1d4ed8 0%,#0284c7 100%) !important;
  border-color:rgba(125,211,252,.95) !important;
  box-shadow:
    0 18px 38px rgba(14,165,233,.36),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform:translateY(-1px);
}

#btnOpenAddStock:active{
  transform:scale(.985);
}

/* Mobile: nút to hơn, dễ bấm hơn */
@media(max-width:640px){
  #btnOpenAddStock{
    min-height:48px;
    font-size:13px;
    text-align:center;
    padding:0 44px 0 14px;
  }

  #btnOpenAddStock::after{
    right:12px;
    width:24px;
    height:24px;
    font-size:16px;
  }
}

/* =========================
   LOG SEARCH
========================= */

.log-search-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}

.log-search-box{
  height:42px;
}

.log-search-bar .btn{
  min-height:42px;
}

@media(max-width:760px){
  .log-search-bar{
    grid-template-columns:1fr;
  }

  .log-search-bar .btn{
    width:100%;
  }
}



/* =========================
   EXPORT STATS
========================= */

.export-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.export-summary-card{
  background:#111d33;
  border:1px solid var(--line);
  border-radius:15px;
  padding:12px 14px;
}

.export-summary-card:nth-child(1){
  border-left:3px solid #38bdf8;
}

.export-summary-card:nth-child(2){
  border-left:3px solid #f59e0b;
}

.export-summary-card span{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.export-summary-card strong{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:24px;
  letter-spacing:-.04em;
}

.export-search-bar{
  margin-top:0;
}

.export-stats-table{
  min-width:1120px;
}

.export-stats-table td:nth-child(10),
.export-stats-table th:nth-child(10){
  text-align:right;
}

#btnExportStatsExcel{
  border-color:rgba(34,197,94,.36);
  color:#bbf7d0;
  background:rgba(34,197,94,.13);
}

@media(max-width:760px){
  .export-summary-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .export-summary-card{
    padding:10px;
  }

  .export-summary-card strong{
    font-size:21px;
  }
}

/* =========================================================
   HD SCREEN UI FIX - WAREHOUSE CELLS
   Giữ Lầu 1 + chỉnh ô Kho TP cho màn hình HD 1366x768.
   ========================================================= */

/* Màn hình PC phổ thông/HD: cho tầng rộng hơn, tránh 3 tầng bị ép ngang */
.ktp-shelf-wrap{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Màn hình rất rộng mới hiển thị 3 tầng cùng một hàng */
@media(min-width:1500px){
  .ktp-shelf-wrap{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .ktp-slot-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Giảm độ chiếm chỗ của sidebar trên HD để phần sơ đồ rộng hơn */
@media(min-width:1101px) and (max-width:1399px){
  .main-layout{
    grid-template-columns:248px minmax(0,1fr);
    gap:12px;
  }

  .sidebar{
    padding:12px;
  }

  .area-item{
    min-height:56px;
    padding:8px;
  }

  .area-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
    border-radius:10px;
  }

  .area-item strong{
    font-size:12px;
  }

  .area-item small{
    font-size:10px;
    line-height:1.2;
  }
}

/* Ô vị trí: cao hơn, chữ gọn hơn, không làm khuất nút Chi tiết / Thêm */
.shelf-box{
  min-height:148px;
  contain:layout paint;
}

.shelf-top{
  padding:7px 8px;
  grid-template-columns:1fr;
  gap:3px;
}

.shelf-top strong{
  font-size:16px;
}

.shelf-top span{
  text-align:left;
  font-size:10px;
  max-width:100%;
}

.shelf-content{
  padding:8px;
  align-items:stretch;
}

.shelf-empty{
  min-height:52px;
  align-self:center;
  white-space:nowrap;
  font-size:13px;
  letter-spacing:.02em;
}

.shelf-stock-list{
  gap:6px;
  align-self:start;
}

.shelf-stock-item{
  padding:7px 8px;
}

.shelf-stock-item strong{
  font-size:13px;
}

.shelf-stock-item span{
  font-size:10.5px;
  line-height:1.22;
}

.shelf-stock-item b{
  margin-top:4px;
  font-size:9.5px;
  padding:3px 6px;
}

.shelf-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(96,165,250,.16);
  border:1px solid rgba(96,165,250,.28);
  color:#bfdbfe;
  font-size:11px;
}

.shelf-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px;
  padding:7px;
}

.shelf-actions button{
  min-width:0;
  min-height:34px;
  padding:0 6px;
  font-size:11.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* HD: giữ 4 ô mỗi hàng trong từng tầng, các tầng rộng hơn nhờ 2 cột */
@media(min-width:1101px) and (max-width:1499px){
  .ktp-slot-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
  }

  .warehouse-row-map{
    padding:12px;
  }

  .ktp-shelf-block{
    padding:10px;
  }
}

/* Tablet / màn hình hẹp: mỗi tầng chiếm trọn hàng, ô không bị méo */
@media(max-width:1100px){
  .ktp-shelf-wrap{
    grid-template-columns:1fr;
  }

  .ktp-slot-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .shelf-box{
    min-height:138px;
  }

  .shelf-empty{
    min-height:46px;
    font-size:12px;
  }
}

@media(max-width:640px){
  .ktp-slot-grid,
  .twenty-slot-grid,
  .four-slot-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .shelf-box{
    min-height:132px;
  }

  .shelf-actions button{
    font-size:11px;
    padding:0 4px;
  }
}

/* =========================================================
   HD SCREEN FINAL FIX - FROM USER 4 FILES
   Bản này giữ nguyên Lầu 1 và chỉ tinh chỉnh hiển thị ô cho HD.
   ========================================================= */

@media (min-width:1101px) and (max-width:1499px){
  .app-shell{
    max-width:100%;
    padding:8px;
    padding-bottom:calc(14px + var(--safe-bottom));
  }

  .main-layout{
    grid-template-columns:246px minmax(0,1fr);
    gap:10px;
  }

  .sidebar{
    top:8px;
    padding:10px;
    border-radius:16px;
  }

  .area-item{
    min-height:52px;
    padding:8px;
    gap:8px;
  }

  .area-icon{
    width:30px;
    height:30px;
    flex-basis:30px;
    border-radius:10px;
    font-size:13px;
  }

  .area-item strong{
    font-size:12px;
  }

  .area-item small{
    display:none;
  }

  .quick-btn{
    min-height:36px;
    font-size:12px;
    margin-bottom:6px;
  }

  .warehouse-grid{
    gap:12px;
  }

  .warehouse-row-map{
    padding:10px;
    border-radius:18px;
  }

  .warehouse-row-title{
    margin-bottom:10px;
  }

  .content-header{
    padding:10px 12px;
  }

  .content-header p{
    font-size:11px;
    line-height:1.35;
  }

  /* Màn hình HD: 2 tầng / hàng để từng ô rộng hơn */
  .ktp-shelf-wrap{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px;
  }

  .ktp-shelf-block{
    padding:10px;
    border-radius:16px;
  }

  .ktp-shelf-title{
    margin-bottom:8px;
  }

  .ktp-slot-grid{
    grid-template-columns:repeat(4,minmax(88px,1fr)) !important;
    gap:8px;
  }

  .twenty-slot-grid{
    grid-template-columns:repeat(4,minmax(108px,1fr)) !important;
    gap:9px;
  }

  .four-slot-grid{
    grid-template-columns:repeat(4,minmax(108px,1fr)) !important;
    gap:9px;
  }

  .shelf-box{
    min-height:156px;
    border-radius:14px;
  }

  .shelf-top{
    padding:7px 8px;
    grid-template-columns:auto minmax(0,1fr);
    gap:5px;
  }

  .shelf-top strong{
    font-size:15px;
    line-height:1.12;
    white-space:nowrap;
  }

  .shelf-top span{
    font-size:9px;
    line-height:1.15;
    text-align:right;
    max-width:100%;
  }

  .shelf-content{
    padding:7px;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .shelf-empty{
    min-height:50px;
    padding:0 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
  }

  .shelf-stock-list{
    gap:6px;
  }

  .shelf-stock-item{
    padding:6px 7px;
    border-radius:11px;
  }

  .shelf-stock-item strong{
    font-size:13px;
    line-height:1.12;
  }

  .shelf-stock-item span{
    font-size:10.5px;
    line-height:1.18;
  }

  .shelf-stock-item b{
    margin-top:4px;
    padding:2px 6px;
    font-size:9.5px;
  }

  .shelf-more{
    font-size:11px;
    line-height:1.15;
  }

  .shelf-actions{
    padding:6px;
    gap:6px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

  .shelf-actions button{
    min-width:0;
    min-height:34px;
    padding:0 5px;
    font-size:11px;
    line-height:1.12;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    text-align:center;
  }
}

@media (min-width:1500px){
  .ktp-shelf-wrap{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .ktp-slot-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@media (max-width:640px){
  .shelf-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:nowrap;
  }

  .shelf-actions button{
    white-space:normal;
    line-height:1.12;
  }
}

/* =========================================================
   MOVE PICKER FIX - chọn vị trí chuyển theo từng bước
   ========================================================= */

.move-picker-box{
  margin-bottom:14px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#111d33;
}

.move-picker-label{
  display:block;
  margin-bottom:10px;
  color:#d7e0ee;
  font-weight:900;
  font-size:13px;
}

.move-picker-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}

.move-picker-box .form-group input,
.move-picker-box .form-group select{
  background:#0f1b31;
}

.move-selected-info{
  margin-top:12px;
  padding:12px;
  border:1px dashed var(--line2);
  border-radius:14px;
  background:rgba(15,27,49,.86);
}

.move-selected-info span{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.move-selected-info strong{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:15px;
}

.move-selected-info p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.move-selected-info.selected{
  border-style:solid;
  border-color:rgba(34,197,94,.55);
  background:rgba(6,78,35,.22);
}

.move-selected-info.selected span{
  color:#bbf7d0;
}

.move-selected-info.selected p{
  color:#d7e0ee;
}

@media(max-width:640px){
  .move-picker-grid{
    grid-template-columns:1fr;
  }

  .move-picker-box{
    padding:11px;
  }
}