/* PharmaPOS UI layer: layout, header/footer, toasts, dialogs, table helpers. Loaded after site.css. */
html,body{min-height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto;width:100%}
[hidden]{display:none!important}

/* header / announcement / footer (white-label) */
.announce{background:var(--acc);color:var(--acc-fg);text-align:center;padding:6px 12px;font-size:13px}
.top{position:sticky;top:0;background:var(--bg);z-index:20}
.top .brand{display:flex;align-items:center;gap:10px;color:var(--fg)!important}
.top .brand img{height:32px;max-width:150px;object-fit:contain}
.top .brand .mark,.pv .mark{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--acc);color:var(--acc-fg);flex:none}
.top .brand small,.pv small{display:block;line-height:1.1;color:var(--muted);font-weight:400}
.top nav a{padding:4px 2px;border-bottom:2px solid transparent}
.top nav a.on{border-color:var(--acc);color:var(--acc)}
.menu{display:none;background:none;border:1px solid var(--line);border-radius:6px;font-size:18px;padding:2px 10px;color:var(--fg);cursor:pointer}
@media(max-width:860px){
  .menu{display:block;margin-left:auto}
  .top nav{display:none;order:5;width:100%;flex-direction:column;gap:6px}
  .top.open nav{display:flex}
  .who{order:4;width:100%;flex-wrap:wrap}
}
.foot{border-top:1px solid var(--line);padding:14px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:24px}
.foot .links{display:flex;gap:14px;flex-wrap:wrap}

/* buttons & general feel */
.btn{transition:filter .15s,transform .05s}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}
.btn.danger{background:var(--bad);color:#fff}
button.loading{opacity:.65;cursor:wait;pointer-events:none}
button.loading::after{content:"";display:inline-block;width:12px;height:12px;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
a.tile{transition:border-color .15s,transform .15s}a.tile:hover{transform:translateY(-2px)}
tbody tr:hover td{background:var(--soft)}
.check{flex-direction:row;align-items:center;gap:8px;color:var(--fg);font-size:14px}

/* progress bar for fetch calls */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--acc);z-index:1001;opacity:0;transition:width .4s,opacity .3s}
#bar.on{width:85%;opacity:1}

/* toasts */
#toasts{position:fixed;top:14px;right:14px;z-index:1000;display:flex;flex-direction:column;gap:8px;max-width:min(92vw,380px)}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:8px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.15);animation:tin .2s ease}
.toast.error{border-left-color:var(--bad)}.toast.warn{border-left-color:var(--warn)}
.toast .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--acc);color:var(--acc-fg);flex:none}
.toast.error .ic{background:var(--bad);color:#fff}.toast.warn .ic{background:var(--warn);color:#fff}
.toast .tx{flex:1;word-break:break-word}
.toast .x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:18px;line-height:1}
.toast.out{opacity:0;transform:translateX(12px);transition:.2s}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}}

/* confirm / alert dialog */
dialog.modal{border:1px solid var(--line);border-radius:12px;padding:20px;width:min(92vw,420px);background:var(--bg);color:var(--fg);box-shadow:0 20px 50px rgba(0,0,0,.3)}
dialog.modal::backdrop{background:rgba(0,0,0,.45)}
dialog.modal h3{margin:0 0 8px;font-size:17px}
dialog.modal p{margin:0 0 16px;white-space:pre-line;color:var(--muted)}
dialog.modal .row{display:flex;gap:8px;justify-content:flex-end}

/* tables */
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--fg)}
th.asc::after{content:" \25B2";font-size:10px}th.desc::after{content:" \25BC";font-size:10px}
.tfilter{margin:0 0 8px;width:260px}
td.empty{text-align:center;color:var(--muted);padding:28px}

/* branding page, login, error page */
.brand-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
@media(max-width:900px){.brand-grid{grid-template-columns:1fr}}
.colorrow{display:flex;gap:8px}.colorrow input[type=color]{padding:0;width:44px;height:38px}
.pv-note{background:var(--acc);color:var(--acc-fg);font-size:12px;text-align:center;padding:4px;border-radius:6px;margin-bottom:8px}
.pv-head{display:flex;align-items:center;gap:10px;padding:10px 0;margin-bottom:8px;border-bottom:1px solid var(--line)}
.pv-head img{height:32px;max-width:150px;object-fit:contain}
.pv-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px;border-top:1px solid var(--line);margin-top:12px;padding-top:8px}
.login .logo{display:block;max-height:64px;max-width:100%;margin:0 auto 12px}
.errbox{text-align:center;margin:8vh auto;max-width:520px}
.errbox .code{font-size:64px;font-weight:700;color:var(--acc);line-height:1}
@media print{.announce,.foot,#toasts,#bar{display:none!important}}