/* v1.19.185: shared look of the round-3 screens (permissions, price lists, tax, warehouses, cheques).
   The modules use the names card, text, accent, surface and soft; the app themes use the bg, cream and gold variables, so they are mapped here. */
:root{--card:#0e1b15;--surface:#0e1b15;--text:#e0f0ea;--accent:#0d9e6e;--soft:rgba(13,158,110,.14);}
html.light{--card:#f7faf8;--surface:#f7faf8;--text:#0d2018;--accent:#0a8a5e;--soft:rgba(10,138,94,.14);}

.ax-ov{background:rgba(0,0,0,.78)!important;padding:56px 12px 16px!important;align-items:flex-start!important;overflow:auto;}
.ax-panel{background:var(--card)!important;color:var(--cream)!important;border:1px solid var(--border)!important;border-radius:13px!important;padding:18px!important;margin:0 auto;font-family:'Tajawal',sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.45)!important;max-height:none!important;}
.ax-panel .ax-title,.ax-panel h3{color:var(--gold2)!important;font-size:17px!important;font-weight:800!important;margin:0!important;}
.ax-panel input:not([type=checkbox]):not([type=radio]),.ax-panel select,.ax-panel textarea{background:var(--bg2)!important;color:var(--cream)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:9px 11px!important;font-family:inherit;font-size:14px!important;min-height:40px;box-sizing:border-box;}
.ax-panel input:focus,.ax-panel select:focus{outline:none;border-color:var(--gold)!important;}
.ax-panel input[type=checkbox]{width:20px;height:20px;accent-color:var(--gold);flex-shrink:0;}
.ax-panel select option{background:var(--card);color:var(--cream);}
.ax-panel .btn{min-height:40px;justify-content:center;}
.ax-panel .btn-sm{min-height:34px;}
.ax-panel .btn-out{color:var(--cream2);}
.ax-panel .btn-gold{color:#080f0d;}
.ax-panel table{width:100%;border-collapse:collapse;}
.ax-panel th{color:var(--muted);background:var(--bg2);}
.ax-panel td,.ax-panel th{border-bottom:1px solid var(--border)!important;color:var(--cream);}
.ax-panel td .btn{margin:2px;}
.ax-panel .t-muted,.ax-panel .ax-muted{color:var(--muted);}
.ax-note{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);border-radius:9px;padding:9px 12px;font-size:12.5px;line-height:1.6;color:var(--cream2);}
.ax-info{background:var(--soft);border:1px solid var(--border);border-radius:10px;color:var(--cream);line-height:1.7;}
.ax-info>div:first-child{color:var(--gold2);font-weight:800;}
.ax-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.ax-grid-btns{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;}
.ax-grid-btns .btn{justify-content:flex-start;width:100%;}
.ax-chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;background:var(--soft);color:var(--gold2);}
@media(max-width:640px){
  .ax-panel{padding:14px!important;}
  .ax-panel td,.ax-panel th{padding:8px 6px!important;font-size:12.5px!important;}
  .ax-panel .btn{padding:8px 12px;}
}

/* v1.19.184: features hub, products strip, side-menu flyouts */
.ax-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.ax-card{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:12px;}
.ax-chip-off{background:rgba(150,150,150,.18);color:var(--muted);}
.ax-strip{margin-bottom:6px;}
.ax-wh-chip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 12px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);color:var(--cream);font-family:inherit;font-size:12.5px;cursor:pointer;}
.ax-wh-chip span{color:var(--muted);font-size:11px;}
.ni{position:relative;}
.ni-chev{margin-inline-start:auto;padding:2px 8px;font-size:12px;color:var(--muted);opacity:.7;cursor:pointer;}
.ni:hover .ni-chev,.ni.on .ni-chev{opacity:1;color:var(--gold2);}
.ax-fly{position:fixed;z-index:100002;min-width:190px;background:var(--card);border:1px solid var(--border);border-radius:11px;padding:6px;box-shadow:0 12px 36px rgba(0,0,0,.5);}
.ax-fly-item{display:block;width:100%;text-align:start;padding:9px 12px;border:0;background:transparent;color:var(--cream);font-family:inherit;font-size:13.5px;font-weight:600;border-radius:8px;cursor:pointer;}
.ax-fly-item:hover{background:var(--soft);color:var(--gold2);}


/* v1.19.185: polish */
body.sandbox-on .ax-ov{padding-top:104px!important;}
.ax-svg{width:20px;height:20px;flex-shrink:0;}
.ax-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--gold2);flex-shrink:0;}
.ax-ico-s{width:20px;height:20px;background:transparent;}
.ax-ico-s .ax-svg{width:16px;height:16px;}
.ax-new{margin-inline-start:auto;padding:1px 7px;border-radius:20px;font-size:10px;font-weight:800;background:var(--gold);color:#05120d;}
.ax-muted,.ax-panel .t-muted,.ax-card .ax-muted{color:var(--cream2)!important;opacity:.82;}
.ni-chev{font-size:13px;}
@media(max-width:700px){.ni-chev{padding:8px 12px;font-size:15px;}}

/* motion (all of it switched off for people who asked for less motion) */
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fxSlide{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@keyframes fxRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ax-ov{animation:fxFade .16s ease-out;}
.ax-panel{animation:fxPop .2s ease-out;}
.ax-fly{animation:fxSlide .14s ease-out;}
.ax-card{animation:fxRise .32s ease-out both;animation-delay:calc(var(--i,0)*45ms);transition:border-color .15s,transform .15s;}
.ax-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.ax-wh-chip,.ax-fly-item,.ax-panel .btn{transition:background .15s,border-color .15s,transform .1s;}
.ax-wh-chip:hover{border-color:var(--gold);}
.ax-panel .btn:active,.ax-wh-chip:active{transform:scale(.97);}
@media(prefers-reduced-motion:reduce){.ax-ov,.ax-panel,.ax-fly,.ax-card,.ax-wh-chip,.ax-fly-item,.ax-panel .btn{animation:none!important;transition:none!important;}}

/* tables become cards on phones (labels come from fxTableLabels in file 68) */
@media(max-width:640px){
  .ax-panel table.ax-t,.ax-panel table.ax-t tbody{display:block;width:100%;}
  .ax-panel table.ax-t thead{display:none;}
  .ax-panel table.ax-t tr{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:6px 10px;margin-bottom:9px;}
  .ax-panel table.ax-t td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0!important;border-bottom:1px dashed var(--border)!important;padding:7px 0!important;font-size:13px!important;text-align:end;}
  .ax-panel table.ax-t td:last-child{border-bottom:0!important;}
  .ax-panel table.ax-t td::before{content:attr(data-label);color:var(--cream2);opacity:.75;font-size:11.5px;font-weight:700;text-align:start;flex-shrink:0;}
  .ax-panel table.ax-t td[data-label='']{flex-wrap:wrap;justify-content:flex-start;}
  .ax-panel table.ax-t td[data-label='']::before{display:none;}
  .ax-panel table.ax-t tr.ax-t-note{background:transparent;border-style:dashed;text-align:center;}
  .ax-panel table.ax-t tr.ax-t-note td{display:block;text-align:center;}
}

/* v1.19.186: side menu order: name | arrow | shortcut in fixed places, group captions */
.ni > .ni-icon{order:0;}
.ni > span:not(.ni-icon):not(.sh-badge):not(.ni-chev):not(.ax-new){order:1;flex:1 1 auto;}
.ni > .ni-chev{order:2;margin-inline-start:0;padding:2px 5px;flex:0 0 auto;}
.ni > .sh-badge,.ni > .ax-new{order:3;margin-inline-start:auto;flex:0 0 auto;min-width:46px;text-align:center;}
@media(max-width:700px){.ni > .ni-chev{padding:6px 10px;margin:-6px 0;}}
.ni-group{padding:15px 18px 5px;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--muted);opacity:.85;}
.ni-group:first-of-type{padding-top:6px;}

/* v1.19.187: quick-create button, little bars */
.ax-qc-btn{position:fixed;left:20px;bottom:108px;z-index:100001;width:48px;height:48px;border-radius:50%;border:0;background:var(--gold);color:#05120d;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s;}
.ax-qc-btn:hover{transform:scale(1.07);}
.ax-qc-btn svg{transition:transform .2s;}
.ax-qc-btn.open svg{transform:rotate(45deg);}
.ax-qc-menu{position:fixed;left:20px;bottom:166px;z-index:100002;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 12px 36px rgba(0,0,0,.5);animation:fxRise .16s ease-out;}
.ax-qc-title{padding:6px 12px 4px;font-size:11px;font-weight:800;color:var(--muted);}
.ax-bar{display:block;height:5px;border-radius:5px;background:var(--border);overflow:hidden;margin-top:5px;width:100%;}
.ax-bar b{display:block;height:100%;border-radius:5px;background:var(--gold);transition:width .4s;}
.ax-bar-credit.warn b{background:#f59e0b;}
.ax-bar-credit.bad b{background:#ef4444;}
.ax-wh-chip{min-width:120px;}
.ax-bars{display:flex;gap:8px;align-items:flex-end;height:78px;margin:0 0 12px;padding:4px 2px;}
.ax-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px;}
.ax-bar-col em{font-style:normal;font-size:11px;font-weight:800;color:var(--cream);}
.ax-bar-col b{display:block;width:100%;max-width:46px;min-height:3px;border-radius:5px 5px 2px 2px;background:var(--gold);opacity:.85;transition:height .4s;}
.ax-bar-col b.bad{background:#ef4444;}
.ax-bar-col i{font-style:normal;font-size:10px;color:var(--cream2);opacity:.8;white-space:nowrap;}
@media(max-width:700px){.ax-qc-btn{left:18px;bottom:104px;}.ax-qc-menu{left:18px;bottom:162px;}}
@media(prefers-reduced-motion:reduce){.ax-qc-btn,.ax-qc-btn svg,.ax-qc-menu,.ax-bar b,.ax-bar-col b{animation:none!important;transition:none!important;}}

/* v1.19.189: the side menu never scrolls sideways (that was the thin green bar under the last item: a horizontal scroll bar) */
#app .sidebar,#app .sidebar .nav{overflow-x:hidden!important;}
.ni > .ni-chev{color:var(--gold2);opacity:.9;font-size:14px;}
.ni:hover > .ni-chev{opacity:1;}