/* =========================================================================
   Tz Mobile — ธีม "ส้ม-ขาว" (Orange Studio)
   Loaded after app.css. app.css keeps the original design + functional rules;
   this file is the visual layer (colours, type, radius, shadows, layout shell).
   ========================================================================= */
:root{
  /* orange ramp */
  --o-50:#FFF7F1; --o-100:#FFEDDF; --o-200:#FFD9BD; --o-300:#FDB98A; --o-400:#F8934F;
  --o-500:#F07426; --o-600:#E8600F; --o-700:#C94D08; --o-800:#B5450B; --o-900:#7A300C;
  /* neutrals (warm) */
  --ink:#23201D; --ink-2:#4B443F; --muted:#8A7F77; --line:#F0E6DE; --line-2:#E6D9CE;
  --paper:#FFF9F4; --surface:#FFFFFF;
  /* app tokens used by the original CSS */
  --accent:var(--o-600); --accent-dark:var(--o-800); --accent-soft:var(--o-50); --accent-line:var(--o-200);
  --gold:#A77A06; --gold-soft:#FBF1D6;
  --rust:#D12E2E; --rust-soft:#FDECEC;
  --pos:#138A4B; --pos-soft:#E6F6EC;
  --blue:#2F5BB8; --blue-soft:#EAF0FB;
  --radius:14px;
  --sh-1:0 1px 2px rgba(96,48,16,.05), 0 2px 8px rgba(96,48,16,.04);
  --sh-2:0 10px 30px rgba(120,60,20,.10);
  --sh-o:0 8px 18px rgba(232,96,15,.28);
  --grad:linear-gradient(135deg,#F7893A 0%,#EC6515 55%,#D8500A 100%);
  --font-head:'Prompt','IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
}

html,body{background:var(--paper);}
body{
  color:var(--ink);
  background:
    radial-gradient(900px 480px at 105% -8%, rgba(255,210,175,.55) 0%, rgba(255,210,175,0) 62%),
    radial-gradient(700px 420px at -10% 110%, rgba(255,226,204,.45) 0%, rgba(255,226,204,0) 60%),
    var(--paper);
  background-attachment:fixed;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.ic{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:middle;}
::selection{background:var(--o-200);}

/* ---------------- layout shell ---------------- */
#app{min-height:100vh;display:flex;}
.sidebar{
  width:256px;flex:0 0 256px;background:#FFFFFF;color:var(--ink);
  border-right:1px solid var(--line);padding:16px 14px;
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
  box-shadow:4px 0 24px rgba(120,60,20,.04);
}
.brand{
  position:relative;overflow:hidden;background:var(--grad);border:none;border-radius:18px;
  padding:16px 16px 15px 16px;margin:0 0 14px 0;display:flex;align-items:center;gap:12px;
  box-shadow:var(--sh-o);
}
.brand::before,.brand::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none;}
.brand::before{width:120px;height:120px;right:-38px;top:-50px;}
.brand::after{width:70px;height:70px;right:34px;bottom:-44px;background:rgba(255,255,255,.10);}
.brand-logo{width:40px;height:40px;border-radius:12px;background:#FFFFFF;color:var(--o-600);display:flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;z-index:1;box-shadow:0 4px 10px rgba(120,40,0,.18);}
.brand-logo .ic{width:22px;height:22px;}
.brand-text{min-width:0;position:relative;z-index:1;}
.brand-name{font-family:var(--font-head);font-size:17px;font-weight:700;color:#FFFFFF;letter-spacing:.2px;line-height:1.25;overflow-wrap:anywhere;}
.brand-sub{font-size:11.5px;color:rgba(255,255,255,.92);margin-top:2px;}

/* sidebar children never shrink (brand has overflow:hidden, which would let flex squash it) — the sidebar scrolls instead */
.brand,.sidebar-foot{flex:0 0 auto;}
nav{flex:1 0 auto;display:flex;flex-direction:column;gap:2px;margin:0;}
.nav-group{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.4px;padding:14px 12px 6px 12px;}
.nav-group:first-child{padding-top:4px;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;border-left:none;
  color:var(--ink-2);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
}
.nav-item .ic{color:#B3A79E;transition:color .15s;}
.nav-item:hover{background:var(--o-50);color:var(--o-800);}
.nav-item:hover .ic{color:var(--o-600);}
.nav-item.active{background:var(--grad);color:#FFFFFF;font-weight:600;box-shadow:var(--sh-o);}
.nav-item.active .ic{color:#FFFFFF;}
.nav-dot{display:none;}

.sidebar-foot{border-top:1px solid var(--line);margin-top:12px;padding:14px 4px 2px 4px;}
.user-card{display:flex;align-items:center;gap:10px;background:var(--o-50);border:1px solid var(--o-100);border-radius:14px;padding:10px;}
.avatar{width:38px;height:38px;border-radius:12px;background:var(--grad);color:#FFFFFF;font-family:var(--font-head);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 4px 10px rgba(232,96,15,.25);}
.user-card .who{min-width:0;flex:1;}
.user-card .who .n{font-weight:600;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere;line-height:1.3;}
.user-card .who .r{font-size:11.5px;color:var(--o-800);margin-top:1px;overflow-wrap:anywhere;}
.user-actions{display:flex;gap:6px;margin-top:10px;}
.user-actions .btn{flex:1;justify-content:center;}

.main{flex:1;min-width:0;padding:26px 34px 60px 34px;}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
.page-head{display:flex;align-items:center;gap:14px;min-width:0;}
.page-ic{width:46px;height:46px;border-radius:14px;background:#FFFFFF;border:1px solid var(--o-100);color:var(--o-600);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);flex:0 0 auto;}
.page-ic .ic{width:22px;height:22px;}
.page-title{font-family:var(--font-head);font-size:24px;font-weight:700;color:var(--ink);line-height:1.2;}
.page-sub{color:var(--muted);font-size:12.5px;margin-top:3px;display:flex;align-items:center;gap:6px;}
.page-sub .ic{width:14px;height:14px;color:var(--o-500);}
.branch-filter{position:relative;}
.branch-filter > .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--o-600);pointer-events:none;z-index:1;width:17px;height:17px;}
.branch-filter .s2{min-width:210px;padding:10px 14px 10px 38px;border-radius:12px;border-color:var(--line-2);background:#FFFFFF;box-shadow:var(--sh-1);font-weight:500;}
.branch-filter .s2.is-disabled{opacity:1;cursor:default;background:var(--o-50);}
.m-appbar,.nav-overlay{display:none;}

/* ---------------- cards ---------------- */
.cards{gap:14px;margin-bottom:20px;}
.card{
  position:relative;overflow:hidden;background:#FFFFFF;border:1px solid var(--line);border-radius:18px;
  padding:16px 18px 16px 18px;box-shadow:var(--sh-1);transition:transform .15s, box-shadow .15s;min-width:0;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
.card-ic{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:11px;background:var(--o-50);color:var(--o-600);display:flex;align-items:center;justify-content:center;}
.card-ic .ic{width:19px;height:19px;}
.card.has-ic .card-label{padding-right:44px;}
.card-label{font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:8px;line-height:1.4;}
.card-value{font-family:var(--font-head);font-size:25px;font-weight:700;color:var(--ink);letter-spacing:.1px;line-height:1.2;overflow-wrap:anywhere;}
.card-value.pos{color:var(--pos);}
.card-value.neg{color:var(--rust);}
.card-note{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.45;}
.card.hero{background:var(--grad);border-color:transparent;box-shadow:var(--sh-o);}
.card.hero::after{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.13);right:-50px;bottom:-70px;pointer-events:none;}
.card.hero .card-label,.card.hero .card-note{color:rgba(255,255,255,.9);}
.card.hero .card-value{color:#FFFFFF;}
.card.hero .card-ic{background:rgba(255,255,255,.2);color:#FFFFFF;}
.panel-body .cards .card{box-shadow:none;background:var(--paper);}
.panel-body .cards .card:hover{transform:none;box-shadow:none;}

/* ---------------- panels + tables ---------------- */
.panel{background:#FFFFFF;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-1);margin-bottom:20px;overflow:hidden;}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--line);gap:12px;}
.panel-title{font-family:var(--font-head);font-size:16px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px;}
.panel-title::before{content:'';width:4px;height:18px;border-radius:4px;background:var(--grad);flex:0 0 auto;}
.panel-body{padding:18px 20px;}
.panel-body.flush{padding:0;}
table{font-size:13.5px;}
th{background:#FFF8F2;color:#8C7D72;font-size:12px;font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line);letter-spacing:.2px;}
td{padding:12px 16px;border-bottom:1px solid #F6EEE8;}
tr:hover td{background:#FFFAF6;}
.num{font-family:inherit;font-variant-numeric:tabular-nums;}
.mono{font-family:'IBM Plex Mono',monospace;}
.empty-row td{color:var(--muted);padding:34px;background:#FFFFFF !important;}
.panel-body .cards{margin-bottom:0;}

/* ---------------- tags (pill + dot) ---------------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.5;}
.tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.tag.instock,.tag.paid{background:var(--pos-soft);color:var(--pos);}
.tag.sold,.tag.inactive{background:#F1EEEB;color:#7A716A;}
.tag.out,.tag.overdue,.tag.partial-overdue{background:var(--rust-soft);color:var(--rust);}
.tag.pending,.tag.installment{background:var(--gold-soft);color:#8D6604;}
.tag.partial,.tag.cash{background:var(--blue-soft);color:var(--blue);}
.tag.transfer{background:var(--o-100);color:var(--o-800);}
.tag.role{background:var(--o-50);color:var(--o-800);}
.tag.role::before{display:none;}

/* ---------------- buttons / links ---------------- */
button{font-family:inherit;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:9px 16px;font-size:13.5px;font-weight:600;border:1px solid transparent;background:var(--ink);color:#FFFFFF;transition:transform .12s, box-shadow .15s, background .15s, border-color .15s, color .15s;}
.btn .ic{width:17px;height:17px;}
.btn:hover{background:#000;}
.btn.primary{background:linear-gradient(135deg,#F07426 0%,#D24D09 100%);color:#FFFFFF;box-shadow:0 6px 14px rgba(232,96,15,.28);}
.btn.primary:hover{background:linear-gradient(135deg,#F58334 0%,#DB550C 100%);transform:translateY(-1px);box-shadow:0 10px 20px rgba(232,96,15,.32);}
.btn.primary:active{transform:none;}
.btn.ghost{background:#FFFFFF;color:var(--ink-2);border-color:var(--line-2);}
.btn.ghost:hover{background:var(--o-50);border-color:var(--o-300);color:var(--o-800);}
.btn.danger{background:#FFFFFF;color:var(--rust);border-color:#F4C7C7;}
.btn.danger:hover{background:var(--rust-soft);}
.btn.small{padding:6px 12px;font-size:12.5px;border-radius:10px;}
.btn.small.primary{box-shadow:0 4px 10px rgba(232,96,15,.24);}
.btn[disabled],.btn[disabled]:hover{opacity:.45;transform:none;box-shadow:none;cursor:not-allowed;}
.link-btn{color:var(--o-800);font-weight:600;text-decoration:none;font-size:12.5px;}
.link-btn:hover{text-decoration:underline;}

/* ---------------- toolbar + form controls ---------------- */
.toolbar{gap:10px;}
.toolbar input[type=text],.toolbar select,input[type=date],.form-row input:not([type=checkbox]):not([type=radio]),.form-row select,.form-row textarea{
  border:1px solid var(--line-2);border-radius:11px;background:#FFFFFF;color:var(--ink);font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.toolbar input[type=text]{padding:9px 13px 9px 36px;min-width:230px;font-size:13.5px;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C94D08' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 12px 50%/16px 16px;}
input[type=date]{padding:7px 10px;font-size:13px;}
.form-row input:not([type=checkbox]):not([type=radio]),.form-row select,.form-row textarea{padding:10px 12px;font-size:14px;}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,textarea:focus{outline:none;border-color:var(--o-500) !important;box-shadow:0 0 0 3px rgba(240,116,38,.16);}
input[type=checkbox],input[type=radio]{accent-color:var(--o-600);}
input[type=file]{font-family:inherit;font-size:12.5px;}
input[type=file]::file-selector-button{font-family:inherit;border:1px solid var(--o-200);background:var(--o-50);color:var(--o-800);border-radius:9px;padding:6px 12px;margin-right:10px;cursor:pointer;font-weight:600;}
.form-row{margin-bottom:14px;}
.form-row label{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-bottom:6px;}
.form-grid{gap:0 14px;}
.form-actions{gap:10px;margin-top:20px;}
.hint{font-size:12px;color:var(--muted);line-height:1.55;}
.check-chip{border-radius:999px;border-color:var(--line-2);background:#FFFFFF;padding:7px 13px;font-size:13px;transition:border-color .15s, background .15s;}
.check-chip:hover{border-color:var(--o-300);}
.check-chip:has(input:checked){border-color:var(--o-500);background:var(--o-50);color:var(--o-900);}
.radio-stack label{border-radius:13px;border-color:var(--line-2);padding:12px 14px;transition:border-color .15s, background .15s;}
.radio-stack label:has(input:checked){border-color:var(--o-500);background:var(--o-50);}
.preview-box{background:var(--o-50);border:1px solid var(--o-100);border-radius:14px;padding:12px 14px;}
.preview-box .row{padding:3px 0;}

/* select2 look */
.s2{border-radius:11px;border-color:var(--line-2);padding:9px 13px;font-size:13.5px;}
.form-row .s2{padding:10px 12px;font-size:14px;}
.s2:hover{border-color:var(--o-300);}
.s2:focus,.s2.open{border-color:var(--o-500);box-shadow:0 0 0 3px rgba(240,116,38,.16);}
.s2-arrow{border-top-color:var(--o-600);}
.s2-panel{border-radius:14px;border-color:var(--line);box-shadow:0 16px 40px rgba(90,45,15,.18);}
.s2-search{border-radius:10px;border-color:var(--line-2);padding:8px 11px;}
.s2-search:focus{border-color:var(--o-500);box-shadow:0 0 0 3px rgba(240,116,38,.14);}
.s2-opt{border-radius:9px;margin:1px 6px;padding:8px 10px;}
.s2-opt.active{background:var(--o-50);}
.s2-opt.selected{color:var(--o-800);background:var(--o-100);}

/* ---------------- modal + toast ---------------- */
.modal-backdrop{background:rgba(35,31,28,.5);z-index:100;padding:40px 16px;}
.modal{
  border-radius:22px;padding:24px 26px 24px 26px;max-width:540px;
  border-top:5px solid transparent;
  background:linear-gradient(#FFFFFF,#FFFFFF) padding-box, var(--grad) border-box;
  box-shadow:0 28px 70px rgba(60,28,8,.28);
}
.modal.wide{max-width:780px;}
.modal h3{font-family:var(--font-head);font-size:19px;font-weight:700;margin:0 0 6px 0;color:var(--ink);}
.modal .modal-sub{font-size:12.5px;color:var(--muted);margin-bottom:18px;line-height:1.6;}
.toast{background:#23201D;border-radius:14px;padding:12px 18px 12px 16px;box-shadow:0 14px 32px rgba(35,31,28,.3), inset 4px 0 0 var(--o-500);font-size:13.5px;bottom:24px;z-index:150;max-width:calc(100vw - 32px);}

/* ---------------- pager ---------------- */
.pager{background:#FFFFFF;border-top:1px solid var(--line);padding:12px 18px;color:var(--muted);font-size:12.5px;}
.pager-ctrl{gap:8px;}
.pager-ctrl .btn.small{padding:6px 10px;}
.pager-ctrl .s2{padding:6px 10px;font-size:12.5px;border-radius:10px;}

/* ---------------- users & permissions ---------------- */
.perm-matrix th.role-col{background:#FFF3EA;color:var(--o-900);}
.perm-matrix tr.grp td{background:#FFF8F2;color:var(--o-900);font-family:var(--font-head);font-weight:600;font-size:12.5px;}
.perm-matrix input[type=checkbox]{accent-color:var(--o-600);width:18px;height:18px;}
.sticky-save{background:#FFFFFF;border-top:1px solid var(--line);}

/* ---------------- login ---------------- */
.auth{min-height:100vh;width:100%;display:flex;background:var(--paper);}
.auth-hero{flex:1.15;position:relative;overflow:hidden;background:var(--grad);color:#FFFFFF;display:flex;align-items:center;padding:56px 56px;}
.auth-hero::before,.auth-hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;}
.auth-hero::before{width:520px;height:520px;right:-180px;top:-200px;background:rgba(255,255,255,.12);}
.auth-hero::after{width:360px;height:360px;left:-140px;bottom:-160px;background:rgba(255,255,255,.10);}
.auth-hero-inner{position:relative;z-index:1;max-width:520px;}
.auth-logo{width:62px;height:62px;border-radius:18px;background:#FFFFFF;color:var(--o-600);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(120,40,0,.25);margin-bottom:22px;}
.auth-logo .ic{width:32px;height:32px;}
.auth-shop{font-family:var(--font-head);font-size:15px;font-weight:600;letter-spacing:.4px;opacity:.95;margin-bottom:8px;}
.auth-hero h1{font-family:var(--font-head);font-size:40px;line-height:1.2;font-weight:700;margin:0 0 14px 0;}
.auth-hero p{font-size:15px;line-height:1.7;opacity:.95;margin:0 0 26px 0;}
.auth-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.auth-feats li{display:flex;align-items:center;gap:12px;font-size:14.5px;}
.auth-feats .ic{width:34px;height:34px;padding:8px;border-radius:11px;background:rgba(255,255,255,.18);}
.auth-deco{position:absolute;right:48px;bottom:40px;width:210px;opacity:.95;z-index:1;}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px;}
.auth-card{width:100%;max-width:400px;background:#FFFFFF;border:1px solid var(--line);border-radius:24px;padding:34px 32px;box-shadow:var(--sh-2);}
.auth-card h2{font-family:var(--font-head);font-size:26px;font-weight:700;margin:0 0 6px 0;}
.auth-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:24px;}
.in-ic{position:relative;}
.in-ic > .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--o-600);width:18px;height:18px;pointer-events:none;}
.in-ic input{padding-left:42px !important;}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);padding:6px;border-radius:8px;cursor:pointer;display:flex;}
.pw-toggle:hover{color:var(--o-700);background:var(--o-50);}
.auth-card .btn.primary{width:100%;padding:12px 16px;font-size:15px;border-radius:13px;margin-top:6px;}
.login-err{color:var(--rust);font-size:13px;background:var(--rust-soft);border-radius:10px;padding:9px 12px;margin:2px 0 12px 0;}
.demo-box{margin-top:22px;border-top:1px dashed var(--line-2);padding-top:16px;}
.demo-chip{border-radius:13px;border-color:var(--line);background:var(--o-50);padding:10px 12px;margin-bottom:8px;gap:10px;}
.demo-chip:hover{border-color:var(--o-400);background:var(--o-100);}
.demo-chip .avatar{width:32px;height:32px;border-radius:10px;font-size:13px;box-shadow:none;}
.demo-chip .d-main{flex:1;min-width:0;text-align:left;}
.demo-chip .d-main strong{display:block;font-size:13px;}
.auth-foot{margin-top:22px;text-align:center;font-size:12px;color:var(--muted);}
.loading-screen{padding:80px 20px;color:var(--muted);}
.no-access{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}

/* ---------------- charts ---------------- */
.chart-wrap{position:relative;}
.chart-svg .bar{fill:#E8600F;transition:fill .12s;pointer-events:none;}
.chart-svg .bar-hit{fill:transparent;cursor:pointer;outline:none;}
.chart-svg .bar-hit:hover + .bar,.chart-svg .bar-hit:focus + .bar,.chart-svg g.hov .bar{fill:#F58334;}
.chart-svg .grid{stroke:#F0E6DE;stroke-width:1;}
.chart-svg .base{stroke:#E1D3C7;stroke-width:1;}
.chart-svg .tick{fill:#9A8E85;font-size:11px;font-variant-numeric:tabular-nums;}
.chart-tip{position:fixed;z-index:160;pointer-events:none;background:#23201D;color:#FFFFFF;border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.35;box-shadow:0 10px 24px rgba(35,31,28,.28);transform:translate(-50%,-110%);white-space:nowrap;display:none;}
.chart-tip strong{display:block;font-family:var(--font-head);font-size:14px;font-weight:600;}
.chart-tip span{color:#E9DDD4;}
.barlist{display:grid;gap:12px;}
.barlist-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr auto;align-items:center;gap:14px;}
.barlist-name{font-size:13.5px;color:var(--ink-2);font-weight:500;overflow-wrap:anywhere;}
.barlist-track{height:14px;border-radius:999px;background:var(--o-50);overflow:hidden;}
.barlist-fill{height:100%;border-radius:0 4px 4px 0;background:#E8600F;min-width:2px;}
.barlist-val{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;min-width:70px;text-align:right;}
.seg{display:inline-flex;background:#FFF3EA;border:1px solid var(--o-100);border-radius:12px;padding:3px;gap:2px;flex-wrap:wrap;}
.seg .btn.small{border-radius:9px;box-shadow:none;border-color:transparent;}
.seg .btn.small.ghost{background:transparent;color:var(--ink-2);}
.seg .btn.small.ghost:hover{background:#FFFFFF;}

/* ---------------- responsive ---------------- */
@media(max-width:1100px){
  .main{padding:22px 22px 56px 22px;}
}
@media(max-width:820px){
  #app{flex-direction:column;}
  .m-appbar{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
    background:var(--grad);color:#FFFFFF;padding:10px 14px;box-shadow:0 6px 18px rgba(232,96,15,.25);
  }
  .m-appbar .mb-btn{background:rgba(255,255,255,.18);border:none;color:#FFFFFF;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
  .m-appbar .mb-btn .ic{width:22px;height:22px;}
  .m-appbar .mb-brand{display:flex;align-items:center;gap:9px;min-width:0;flex:1;}
  .m-appbar .mb-logo{width:32px;height:32px;border-radius:10px;background:#FFFFFF;color:var(--o-600);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
  .m-appbar .mb-name{font-family:var(--font-head);font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .m-appbar .avatar{width:36px;height:36px;border-radius:11px;background:#FFFFFF;color:var(--o-700);box-shadow:none;cursor:pointer;}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:288px;max-width:86vw;height:100%;flex-direction:column;
    padding:16px 14px;overflow-y:auto;overflow-x:hidden;transform:translateX(-104%);transition:transform .22s ease;
    z-index:90;border-right:none;box-shadow:12px 0 40px rgba(60,28,8,.18);align-items:stretch;
  }
  body.nav-open .sidebar{transform:none;}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(35,31,28,.45);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s;}
  body.nav-open .nav-overlay{opacity:1;pointer-events:auto;}
  .brand{padding:14px;margin:0 0 12px 0;}
  nav{flex-direction:column;flex:1 0 auto;}
  .nav-item{border-bottom:none;white-space:normal;padding:11px 12px;}
  .sidebar-foot{display:block;}
  .main{padding:18px 14px 50px 14px;}
  .topbar{margin-bottom:16px;}
  .page-ic{width:40px;height:40px;border-radius:12px;}
  .page-title{font-size:20px;}
  .branch-filter{width:100%;}
  .branch-filter .s2{width:100%;min-width:0;}
  .toolbar input[type=text]{min-width:0;width:100%;}
  .card{padding:14px 14px;border-radius:16px;}
  .card-value{font-size:20px;}
  .card-ic{width:30px;height:30px;top:12px;right:12px;border-radius:9px;}
  .card-ic .ic{width:16px;height:16px;}
  .card.has-ic .card-label{padding-right:34px;}
  .card.hero{grid-column:1 / -1;}
  .panel{border-radius:16px;}
  .panel-head{padding:14px 14px;}
  .panel-body{padding:14px;}
  .modal{padding:20px 18px;border-radius:20px;}
  .auth{flex-direction:column;}
  .auth-hero{flex:none;padding:34px 22px 64px 22px;}
  .auth-hero h1{font-size:28px;}
  .auth-hero p{font-size:14px;margin-bottom:0;}
  .auth-feats,.auth-deco{display:none;}
  .auth-main{margin-top:-40px;padding:0 14px 30px 14px;align-items:flex-start;}
  .auth-card{padding:26px 20px;border-radius:22px;}
  .barlist-row{grid-template-columns:1fr auto;}
  .barlist-track{grid-column:1 / -1;order:3;}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}

/* ---------------- table cell helpers (rich product cells, no-wrap columns) ---------------- */
.nw,td.num,.panel-body.flush > table td:first-child{white-space:nowrap;}
.p-cell{min-width:190px;}
.p-name{font-weight:600;color:var(--ink);line-height:1.35;}
.p-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45;}
.bat{color:var(--pos);font-weight:600;}
.acc-cell{min-width:120px;max-width:230px;}
.mini-chip{display:inline-block;background:#F7F2EE;border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11px;line-height:1.6;margin:2px 4px 2px 0;color:var(--ink-2);white-space:nowrap;}
.meta-cell{font-size:12px;line-height:1.55;min-width:170px;}
.auth-main{position:relative;z-index:2;}
.user-actions{flex-wrap:nowrap;}
.user-actions .btn{padding:7px 8px;font-size:12px;gap:5px;}
.user-actions .btn .ic{width:15px;height:15px;}
/* sticky action column: stays visible while a wide table scrolls sideways (direct rows only) */
.panel-body.flush > table.sticky-end > tbody > tr:not(.detail-row) > td:last-child, .panel-body.flush > table:not(.perm-matrix):has(> thead > tr > th:last-child:empty) > tbody > tr:not(.detail-row) > td:last-child{position:sticky;right:0;z-index:1;background:#FFFFFF;box-shadow:-10px 0 12px -12px rgba(90,45,15,.35);}
.panel-body.flush > table.sticky-end > thead > tr > th:last-child, .panel-body.flush > table:not(.perm-matrix):has(> thead > tr > th:last-child:empty) > thead > tr > th:last-child{position:sticky;right:0;z-index:1;background:#FFF8F2;box-shadow:-10px 0 12px -12px rgba(90,45,15,.35);}
.panel-body.flush > table.sticky-end > tbody > tr:not(.detail-row):hover > td:last-child, .panel-body.flush > table:not(.perm-matrix):has(> thead > tr > th:last-child:empty) > tbody > tr:not(.detail-row):hover > td:last-child{background:#FFFAF6;}
.panel-body.flush > table.sticky-end > tbody > tr.empty-row > td:last-child, .panel-body.flush > table:not(.perm-matrix):has(> thead > tr > th:last-child:empty) > tbody > tr.empty-row > td:last-child{position:static;box-shadow:none;}
th{padding:11px 13px;}
td{padding:12px 13px;}
.act-cell{white-space:nowrap;}
.acts{display:flex;gap:12px;margin-top:7px;}
.big-search{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line-2);border-radius:12px;font-family:inherit;font-size:14px;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C94D08' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") no-repeat 14px 50%/17px 17px;}
/* plain inputs outside .form-row (add-to-list rows, qty in sale rows) */
.in{padding:10px 12px;border:1px solid var(--line-2);border-radius:11px;font-family:inherit;font-size:14px;background:#FFFFFF;color:var(--ink);box-sizing:border-box;}
.sale-acc-row label{display:block;margin-bottom:4px;}

.sale-acc-row .in{padding:8px 10px;}