html[data-locked] body > :not(.page-load-failure,.page-loading) { display:none !important; }
html:not([data-locked]) .page-loading,html[data-load-failed] .page-loading { display:none; }
.page-loading,.page-load-failure {
  width:min(calc(100% - 32px),460px); margin:clamp(32px,14vh,140px) auto 0;
  padding:24px; text-align:center; background:#fff;
  border:1px solid var(--line,#d7e4df); border-radius:16px;
}
.page-load-failure { color:#813520; }
.page-load-failure button { display:block; margin:12px auto 0; }
[hidden] { display:none !important; }
.login-page,.dashboard-page { margin:0; min-height:100vh; background:#eff5ef; color:#203d32; font-family:Yekan,system-ui,sans-serif; }
.login-page { display:grid; place-items:center; padding:20px; box-sizing:border-box; background:radial-gradient(ellipse at 90% 0,#d8eadc,#f5f8f4 65%); }
.login-card { width:min(100%,460px); box-sizing:border-box; padding:clamp(20px,5vw,38px); background:#fff; border:1px solid #dbe9df; border-radius:22px; box-shadow:0 18px 60px #23493612; }
.workspace-brand { display:flex; align-items:center; gap:10px; font-weight:800; color:#20684c; font-size:20px; }
.workspace-brand svg { width:24px; height:24px; }
.login-card h1 { margin:24px 0 4px; font-size:27px; }
.login-card p { margin:0 0 20px; color:#486454; }
.login-card label { display:block; margin:12px 0 5px; }
.login-card input,.role-picker select { width:100%; box-sizing:border-box; border:1px solid #bfd3c7; border-radius:9px; padding:10px 12px; font:inherit; background:#fff; color:inherit; }
.login-card input { min-height:44px; }
.login-card button { width:100%; padding:11px; border:0; border-radius:10px; background:#226548; color:white; font:inherit; font-weight:700; margin-top:22px; cursor:pointer; }
.login-card button:disabled { opacity:.6; }
.login-card .login-error { background:#fff2ed; color:#8b3525; padding:10px 14px; border-radius:9px; }
.setup-names { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dashboard-page .kartabl { width:min(1100px,100%); margin:auto; padding:clamp(18px,5vw,42px); box-sizing:border-box; }
.kartabl-hero { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:clamp(18px,4vw,32px); border-radius:20px; background:#185740; color:#fff; }
.kartabl-hero h1 { margin:6px 0; color:inherit; }
.kartabl-hero p { color:#e1f1e7; margin:0; }
.role-picker { min-width:180px; }
.role-picker select { margin-top:5px; }
.kartabl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); gap:12px; }
.kartabl-link { display:flex; flex-direction:column; justify-content:center; min-height:68px; gap:5px; padding:14px 16px; background:#fff; color:#195a41; text-decoration:none; border:1px solid #d2e3d8; border-radius:13px; }
.kartabl-link:hover { border-color:#4a8b6d; background:#f9fcfa; }
.kartabl-link small { color:#486454; }
.kartabl h2 { margin-top:26px; }
.kartabl .notice { margin-top:14px; }
.kartabl :focus-visible,.login-card :focus-visible { outline:3px solid #bb7b21; outline-offset:3px; }
#taskList li { margin-block:8px; }
#taskList a,#dashboardTasks>a { color:#195a41; }


.permission-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-block:12px}
.permission-feature-group{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.permission-feature-group h4,.permission-feature-group p{margin:0 0 6px}
.permission-feature-group label{display:flex;gap:7px;align-items:flex-start;margin-block:5px}
.permission-feature-group input[type=checkbox]{width:auto;flex:none;margin-block-start:4px}

/* Shared workspace controls and surfaces */
:root {
  --ink:#193d35; --muted:#50675f; --green:#16624f; --line:#d8e5df;
  --bg:#f2f6f4; --soft:#e5f1eb; --danger:#a2352d; --radius:16px;
}
body { color:var(--ink); background:var(--bg); }
body>.appbar {
  display:grid; grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center; gap:12px; padding:9px max(20px,calc((100vw - 1272px)/2));
  top:0; background:#fff; backdrop-filter:none;
}
.appbar .appbrand { font-size:18px; gap:8px; min-height:44px; }
.appbar .appbrand>svg,.workspace-brand>svg {
  width:36px; height:36px; padding:7px; color:#fff; background:var(--green); border-radius:11px;
}
.appbar nav { justify-content:center; gap:4px; }
.appbar nav a { min-height:44px; padding:7px 11px; color:var(--muted); }
.appbar nav a svg { width:18px; height:18px; }
.appbar nav a.current { color:#114f3f; background:var(--soft); font-weight:700; }
.workspace-account { display:flex; align-items:center; gap:5px; min-width:0; }
.workspace-user {
  max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:13px; color:var(--muted); margin-inline-end:4px;
}
.appbar .workspace-icon {
  display:grid; place-items:center; flex:none; width:44px; height:44px;
  padding:0; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--ink); box-shadow:none; text-decoration:none;
}
.appbar .workspace-icon:hover,.appbar .workspace-icon[aria-current] { background:var(--soft); }
.appbar .account-logout { color:var(--danger); }
.appbar .account-logout:hover { background:#fbece8; }
.workspace-account-error { max-width:780px; margin:12px auto; }
.workspace-skip {
  position:fixed; z-index:100; top:8px; inset-inline-start:12px; padding:8px 14px;
  border-radius:8px; background:#fff; color:var(--green); transform:translateY(-160%);
}
.workspace-skip:focus { transform:none; }
:where(a,button,input,select,textarea,summary,[tabindex="0"]):focus-visible {
  outline:2px solid #126d59; outline-offset:3px;
}
body:not(.login-page) main { max-width:1320px; }
.panel,dialog { color:var(--ink); }
.panel,.productcard,.dash-panel { box-shadow:0 4px 16px #173e2e08; }
.summary:empty,.error:empty,.notice:empty { display:none; }
.appbar~main p { overflow-wrap:anywhere; }
.page-base .stat[aria-pressed="true"] { border-color:#73ab96; background:var(--soft); color:#114f3f; }
.login-page {
  background:radial-gradient(ellipse at 88% 4%,#d9ebe3 0,transparent 55%),var(--bg);
}
.login-card { border-color:var(--line); }
.login-card .workspace-brand { font-size:17px; }
.login-card h1 { margin-block:22px 6px; }
.login-card p { color:var(--muted); }
.login-card button { background:var(--green); min-height:46px; }
.login-card input:hover { border-color:#6e9e8d; }
#loginPending { margin-block:12px 0; }
.login-retry { display:inline-block; margin-top:8px; }
@media(max-width:1050px) {
  .workspace-user { max-width:105px; }
  .appbar nav a { padding-inline:7px; font-size:14px; }
}
@media(max-width:900px) {
  body>.appbar { position:relative; grid-template-columns:minmax(0,1fr) max-content; padding:8px 12px; gap:5px; }
  .appbar nav { display:flex; grid-column:1/-1; grid-row:2; flex-wrap:wrap; justify-content:flex-start; }
  .appbar nav a { flex:1 1 auto; justify-content:center; gap:4px; }
  .appbar .appbrand { font-size:16px; }
  .appbar .workspace-account { justify-content:end; }
}
@media(max-width:500px) {
  .appbar nav { gap:2px; }
  .appbar nav a { flex-direction:column; padding:5px 3px; font-size:11px; gap:2px; }
  .appbar nav a svg { width:16px; height:16px; }
  .workspace-user { max-width:78px; }
  .workspace-account { gap:0; }
  .appbar .workspace-icon { width:40px; }
  .page-base .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-base .stat { min-width:0; padding:8px 10px; }
  .page-base .stat small { overflow-wrap:anywhere; }
}
.page-base .base-sections { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.base-cashboxes { text-decoration:none; }
.base-cashboxes strong { font-size:16px!important; }
.base-cashboxes:hover { border-color:#73ab96; }
.page-base .base-sections .stat small { font-size:13px; }
.page-base #baseBreadcrumbs { min-height:0; }
.page-base .pagehead p,.page-staff .pagehead p { font-size:14px; color:var(--muted); }
.page-base .pagehead,.page-staff .pagehead { gap:12px; flex-wrap:wrap; }
.page-backup main { max-width:900px!important; }
.page-backup .panel > p { color:var(--muted); }
.page-backup #backupFile { display:block; margin-block:6px 10px; }
.dash-kicker { font-size:13px; }
@media(max-width:650px) {
  .page-base .base-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-base .base-sections .stat { min-width:0; min-height:58px; }
  .page-base .base-sections .stat strong { font-size:17px; }
}

/* Keep form actions within reach when a long dialog scrolls. */
dialog[open] { scroll-padding-block-end:84px; }
dialog[open] .actions,dialog[open] .modalfoot {
  position:sticky; z-index:2; bottom:0; padding-block:10px;
  background:#fff; border-block-start:1px solid var(--line); box-shadow:0 20px 0 #fff;
}
dialog[open] .actions button,dialog[open] .modalfoot button { min-height:44px; }
#productDialog[open] .modalfoot,.staffmodal[open] .modalfoot { bottom:0; }