/* WMS Lite — Soft Warehouse theme */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary-color: #5578d9;
    --primary-hover: #4162bf;
    --success-color: #43b77b;
    --success-hover: #329b65;
    --danger-color: #e56b73;
    --danger-hover: #cc4e58;
    --warning-color: #f1b95b;
    --secondary-color: #71809b;
    --secondary-hover: #5a6984;
    --bg-color: #f4f7fb;
    --card-bg: #ffffff;
    --text-main: #1e2b44;
    --text-muted: #71809b;
    --border-color: #dce4f0;
    --soft-blue: #edf3ff;
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { min-width: 320px; }
body { font-family: var(--font-family); background: var(--bg-color); color: var(--text-main); line-height: 1.5; font-size: 14px; }
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: none; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 22px; }
.row { display: flex; flex-wrap: wrap; margin: -8px; }
.col-md-3,.col-md-4,.col-md-5,.col-md-8 { padding: 8px; width: 100%; }
@media (min-width: 768px) { .col-md-3{width:25%}.col-md-4{width:33.333%}.col-md-5{width:41.666%}.col-md-8{width:66.666%} }

/* Navbar: one compact bar, menu opens on demand */
.app-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--border-color); box-shadow: 0 3px 16px rgba(55,75,115,.06); backdrop-filter: blur(10px); }
.app-nav-inner { max-width: 1280px; min-height: 64px; margin: auto; padding: 0 22px; display: flex; align-items: center; gap: 14px; }
.app-nav-brand { color: var(--primary-color); font-size: 1.18rem; font-weight: 800; letter-spacing: -.04em; margin-right: auto; }
.app-nav-hamburger { width: 42px; height: 40px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--soft-blue); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; transition: .2s; }
.app-nav-hamburger:hover,.app-nav-hamburger.open { background: #dfe9ff; border-color: #b8c9f2; }
.app-nav-hamburger span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--primary-color); transition: .2s; }
.app-nav-menu { display: none; position: absolute; top: 58px; right: 22px; width: min(260px, calc(100vw - 44px)); padding: 8px; background: #fff; border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 16px 36px rgba(44,62,100,.16); }
.app-nav-menu.open { display: grid; animation: menu-in .16s ease-out; }
.app-nav-menu a { padding: 10px 12px; border-radius: 10px; color: var(--text-muted); font-weight: 600; }
.app-nav-menu a:hover,.app-nav-menu a.active { color: var(--primary-color); background: var(--soft-blue); }
.app-nav-menu a.app-nav-danger { color: var(--danger-color); }
@keyframes menu-in { from {opacity:0; transform:translateY(-5px)} to {opacity:1; transform:translateY(0)} }

/* Compatibility for pages not yet migrated to app-nav */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--border-color); box-shadow: 0 3px 16px rgba(55,75,115,.06); }
.nav-container { max-width: 1280px; min-height: 64px; margin: auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { color: var(--primary-color); font-size: 1.18rem; font-weight: 800; }
.nav-menu { display: flex; gap: 3px; flex-wrap: wrap; }
.nav-menu a { color: var(--text-muted); padding: 8px 10px; border-radius: 9px; font-weight: 600; }
.nav-menu a:hover,.nav-menu a.active { background: var(--soft-blue); color: var(--primary-color); }
@media (max-width: 900px) { .navbar .nav-menu { display:none; } }

/* Cards remain visually rounded, while dropdown menus may extend beyond their bounds. */
.card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; box-shadow: 0 5px 22px rgba(50,70,110,.06); margin-bottom: 18px; overflow: visible; }
.card:has(.ms-wrap) { position: relative; z-index: 20; }
.card-header { padding: 15px 20px; background: #f8faff; border-bottom: 1px solid var(--border-color); }
.card-body { padding: 20px; }

h1,h2,h3,h4,h5 { letter-spacing: -.025em; }
h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
.header-action { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin: 26px 0 18px; }

.form-group { margin-bottom: 14px; }
label { display:block; margin-bottom:6px; font-weight:600; color: var(--text-main); font-size:.86rem; }
.form-control { width:100%; padding:10px 13px; border:1px solid var(--border-color); border-radius:10px; background:#fff; color:var(--text-main); font:inherit; transition:.2s; }
.form-control:focus { outline:none; border-color:#9eb4eb; box-shadow:0 0 0 4px rgba(85,120,217,.12); }
.form-control-lg,.search-box { padding:13px 15px; font-size:1rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:11px; padding:10px 16px; color:#fff; font:600 .9rem var(--font-family); cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; }
.btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 5px 12px rgba(55,75,120,.13); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-primary{background:var(--primary-color)}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
.btn-success{background:var(--success-color)}.btn-success:hover:not(:disabled){background:var(--success-hover)}
.btn-danger{background:var(--danger-color)}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}
.btn-secondary{background:var(--secondary-color)}.btn-secondary:hover:not(:disabled){background:var(--secondary-hover)}
.btn-ghost { background:#eef2f8; color:var(--secondary-color); }.btn-ghost:hover:not(:disabled){background:#e1e7f1}
.btn-block{display:flex;width:100%}.btn-sm{padding:6px 10px;font-size:.8rem}.btn-lg{padding:12px 20px;font-size:1rem}

.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.clean-table,.dest-group-table { width:100%; border-collapse:separate; border-spacing:0; white-space:nowrap; }
.clean-table th,.clean-table td,.dest-group-table th,.dest-group-table td { padding:10px 13px; text-align:left; border-bottom:1px solid #e7edf5; }
.clean-table th,.dest-group-table th { background:#f8faff; color:var(--text-muted); font-size:.76rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.clean-table tbody tr,.dest-group-table tbody tr { transition:background .15s; }
.clean-table tbody tr:hover,.dest-group-table tbody tr:hover { background:#f6f9ff; }
.clean-table tbody tr:last-child td,.dest-group-table tbody tr:last-child td { border-bottom:0; }
.clean-table th[data-col],.dest-group-table th[data-col] { cursor:pointer; user-select:none; }
.clean-table th[data-col]:hover,.dest-group-table th[data-col]:hover { color:var(--primary-color); }
.si,.sort-icon { color:#a2aec1; margin-left:4px; font-size:.7rem; }

.badge { display:inline-flex; align-items:center; justify-content:center; min-height:25px; padding:4px 9px; border-radius:20px; font-size:.75rem; font-weight:700; }
.badge-success{background:#e0f6ea;color:#228054}.badge-warning{background:#fff1ca;color:#9a6512}.badge-danger{background:#ffe4e6;color:#ae3e48}.badge-info{background:#e4efff;color:#3564ae}.badge-location{background:#f1f5fa;color:#3c587f;border:1px solid #ccdaeb}
.alert { padding:12px 16px; border-radius:11px; margin-bottom:15px; font-weight:600; }.alert-success{background:#e0f6ea;color:#228054;border:1px solid #bcebd2}.alert-danger{background:#ffe4e6;color:#ae3e48;border:1px solid #ffcbd0}.alert-warning{background:#fff3ce;color:#946117;border:1px solid #f8dc88}

/* Multi-select: desktop panel is allowed to escape card overflow */
.ms-wrap { position:relative; display:block; width:100%; }
.ms-toggle { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:10px 13px; border:1px solid var(--border-color); border-radius:11px; background:#fff; cursor:pointer; user-select:none; }
.ms-toggle:hover,.ms-toggle.open { border-color:#9eb4eb; box-shadow:0 0 0 3px rgba(85,120,217,.08); }
.ms-toggle .ms-arrow { color:var(--primary-color); font-size:.65rem; transition:.2s; }.ms-toggle.open .ms-arrow{transform:rotate(180deg)}
.ms-selections { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-main); }.ms-ph,.ms-placeholder{color:var(--text-muted);font-weight:400}
.ms-panel { display:none; position:absolute; z-index:500; left:0; right:0; top:calc(100% + 6px); min-width:220px; max-height:320px; overflow:hidden; flex-direction:column; background:#fff; border:1px solid var(--border-color); border-radius:13px; box-shadow:0 16px 34px rgba(35,55,95,.18); }
.ms-panel.open,.ms-panel.show{display:flex}.ms-search{padding:9px;border-bottom:1px solid var(--border-color);background:#fbfcff}.ms-search input{width:100%;padding:8px 10px;border:1px solid var(--border-color);border-radius:8px;font:inherit;font-size:.82rem}.ms-list{overflow-y:auto;max-height:245px;padding:5px 0}.ms-list label{display:flex;align-items:center;gap:8px;padding:7px 12px;margin:0;font-size:.82rem;font-weight:500;white-space:nowrap;cursor:pointer}.ms-list label:hover{background:var(--soft-blue)}.ms-list input{width:16px;height:16px;accent-color:var(--primary-color)}.ms-empty{padding:12px;color:var(--text-muted);font-size:.82rem}

/* custom modal */
body.modal-open{overflow:hidden}.modal-overlay{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:18px;background:rgba(26,39,65,.48)}.modal-overlay.open{display:flex}.modal-box{width:100%;max-width:460px;padding:21px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(25,40,75,.25);animation:modal-in .16s ease-out}.modal-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);padding-bottom:12px}.modal-head h3{font-size:1.1rem}.modal-close{border:0;background:transparent;color:var(--text-muted);font-size:1.6rem;cursor:pointer}.modal-msg{padding:20px 0;white-space:pre-line}.modal-actions{display:flex;justify-content:flex-end;gap:9px}@keyframes modal-in{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

.text-center{text-align:center}.text-right{text-align:right}.text-muted{color:var(--text-muted)}.text-danger{color:var(--danger-color)}.text-success{color:var(--success-color)}.text-primary{color:var(--primary-color)}.text-white{color:#fff!important}.font-weight-bold{font-weight:700}.text-sm{font-size:.82rem}.text-monospace{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.bg-light{background:var(--bg-color)}.bg-white{background:#fff}.bg-primary{background:var(--primary-color)}.bg-success{background:var(--success-color)}.bg-danger{background:var(--danger-color)}.float-right{float:right}.d-flex{display:flex}.justify-content-between{justify-content:space-between}.align-items-center{align-items:center}.align-items-end{align-items:flex-end}.w-100{width:100%}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}.mb-0{margin-bottom:0}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}.ml-2{margin-left:.5rem}.p-0{padding:0!important}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}

.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--bg-color)}.login-container{width:100%;max-width:400px;padding:15px}.login-card{background:#fff;padding:30px;border-radius:18px;box-shadow:0 8px 30px rgba(50,70,110,.1)}.login-title{text-align:center;font-size:1.5rem;margin-bottom:5px}.login-subtitle{text-align:center;font-size:.9rem;color:var(--text-muted);margin-bottom:25px}.print-only{display:none}

/* Mobile: turn every marked table into easy-to-scan cards; preserve existing mobile filter design */
@media (max-width:640px) {
    .container{padding:0 12px}.card{border-radius:15px;margin-bottom:12px}.card-body{padding:14px}.header-action{margin:18px 0 13px;align-items:flex-start}.header-action h2{width:100%}
    .app-nav-inner{min-height:57px;padding:0 14px}.app-nav-menu{top:53px;right:14px;width:min(260px,calc(100vw - 28px))}
    .ms-panel{min-width:0;max-height:280px}.ms-list{max-height:205px}
    table[data-card]{display:block;white-space:normal}table[data-card] thead{display:none}table[data-card] tbody,table[data-card] tr,table[data-card] td{display:block;width:100%}table[data-card] tr{margin-bottom:10px;padding:10px 12px;border:1px solid var(--border-color);border-radius:13px;background:#fff;box-shadow:0 2px 8px rgba(50,70,110,.04)}table[data-card] td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:5px 0;border:0;text-align:right;white-space:normal}table[data-card] td::before{content:attr(data-label);font-weight:700;color:var(--text-muted);font-size:.72rem;text-align:left;text-transform:uppercase;letter-spacing:.03em}table[data-card] td:first-child{padding-top:0}table[data-card] td:last-child{padding-bottom:0}
    .clean-table:not([data-card]) th,.clean-table:not([data-card]) td{padding:8px 10px;font-size:.8rem}
    .btn{min-height:40px}.dest-group-title{margin:14px 0 7px!important;border-radius:8px;padding:8px 12px!important;font-size:.95rem!important}.dest-group-table th,.dest-group-table td{padding:8px 9px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.app-nav,.navbar,.no-print{display:none!important}.print-only{display:block}.card{box-shadow:none}.dest-group-title{margin:12px 0 6px}}