/* Taakid styles — one file, in the order the pages apply them.
   Base layout first, then the website menu, worker app and manager app, then the design system (.tk),
   then page groups. A ":where(...)" scope only limits where a section applies; it adds no priority. */

/* ===== app ===== */
:root {
  --bg: #f8f4f6;
  --surface: #ffffff;
  --surface-soft: #f6edf2;
  --primary: #79003d;
  --primary-dark: #57002c;
  --primary-light: #f0d4e2;
  --accent: #f5bd57;
  --accent-soft: #fff5df;
  --ink: #211822;
  --muted: #746a71;
  --danger: #b83232;
  --danger-soft: #fbe9e7;
  --success: #13795b;
  --warning: #9a6700;
  --border: #dce4e1;
  --shadow: 0 10px 30px rgba(19, 48, 55, .08);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --tap: 48px;
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: radial-gradient(circle at top right, rgba(245,189,87,.22), transparent 28rem), linear-gradient(180deg, #fff, var(--bg)); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.language-switch { position: fixed; z-index: 30; inset: max(.7rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) auto auto; min-height: 38px; display: inline-grid; place-items: center; padding: .45rem .75rem; color: var(--primary); background: #fff7e8; border: 1px solid rgba(245,189,87,.75); border-radius: var(--radius-sm); box-shadow: 0 8px 20px rgba(9,27,33,.12); font-size: .82rem; font-weight: 900; text-decoration: none; }
[dir="rtl"] .language-switch { inset-inline-start: max(.7rem, env(safe-area-inset-left)); inset-inline-end: auto; }
.app-shell { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-3), env(safe-area-inset-bottom)); }
.visually-hidden { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted, .form-hint { color: var(--muted); }
.form-hint { margin: 0; font-size: .82rem; line-height: 1.6; }
.field-hint { color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.4; }
h1, h2, p { margin-top: 0; }
svg { width: 24px; height: 24px; fill: currentColor; }

.button { min-height: var(--tap); border: 0; border-radius: var(--radius-sm); padding: .75rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; color: var(--ink); background: #e7ecea; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:disabled { opacity: .58; cursor: wait; }
.button--primary { color: white; background: var(--primary); box-shadow: inset 0 -3px 0 rgba(87,0,44,.2); }
.button--primary:active { background: var(--primary-dark); }
.button--danger-quiet { color: var(--danger); background: var(--danger-soft); }
.button--reject { color: white; background: var(--danger); }
.button--quiet { background: #edf0ef; }
.button--outline { color: var(--primary); background: transparent; border: 1px solid var(--primary); }
.flash-stack { position: fixed; z-index: 20; inset: max(12px, env(safe-area-inset-top)) 16px auto; max-width: 448px; margin: auto; }
.flash { padding: .8rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); background: var(--surface); }
.flash--error { color: var(--danger); border-inline-start: 4px solid var(--danger); }
.flash--success { color: var(--success); border-inline-start: 4px solid var(--success); }
.brand-mark { position: relative; width: 52px; height: 52px; border-radius: 16px; background: var(--primary); margin: 0 auto; }
.brand-mark::before { content: ""; position: absolute; width: 22px; height: 16px; border: 3px solid white; border-radius: 6px; inset: 18px 15px; }
.brand-mark::after { content: ""; position: absolute; width: 7px; height: 7px; background: white; border-radius: 50%; inset: 24px 23px; }
.brand-mark span { position: absolute; width: 13px; height: 5px; background: white; border-radius: 3px 3px 0 0; inset: 14px 20px; }
.brand-mark--small { width: 32px; height: 32px; border-radius: 10px; margin: 0; transform: scale(.72); transform-origin: center; }
.brand-logo { display: block; flex: 0 0 auto; object-fit: contain; border-radius: var(--radius-sm); background: white; }
.brand-logo--auth { width: 88px; height: 88px; margin: 0 auto; box-shadow: 0 8px 24px rgba(121,0,61,.14); }
.brand-logo--nav { width: 34px; height: 34px; border: 1px solid rgba(121,0,61,.12); }
.brand-logo--workspace { width: 54px; height: 54px; border: 1px solid var(--border); box-shadow: var(--shadow); }
.brand-logo--empty { width: 74px; height: 74px; margin: 0 auto; border: 1px solid var(--border); box-shadow: var(--shadow); }

.login-page .app-shell { display: grid; place-items: center; }
.auth-card { width: 100%; background: var(--surface); padding: var(--space-5) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); text-align: center; }
.auth-card--brand { max-width: 760px; overflow: hidden; padding: 0; text-align: initial; }
.auth-media { height: clamp(150px, 25vw, 230px); overflow: hidden; background: var(--primary-dark); }
.auth-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.auth-panel { padding: var(--space-5) var(--space-4); text-align: center; }
.auth-card h1 { margin: var(--space-3) 0 .2rem; font-size: 1.7rem; }
.stack-form { display: grid; gap: .55rem; text-align: right; margin-top: var(--space-4); }
.stack-form input, .stack-form select, .filters input, .filters select, .document-fields input, .document-fields select, textarea { width: 100%; min-height: var(--tap); padding: .7rem .8rem; color: var(--ink); background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
textarea { resize: vertical; line-height: 1.55; }
.stack-form .button { margin-top: var(--space-2); }
.stack-form--wide { max-width: 720px; }

.collector-page .app-shell { display: flex; }
.collector { flex: 1; min-height: calc(100dvh - max(2rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))); display: flex; flex-direction: column; position: relative; }
.collector__header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; color: var(--primary); font-weight: 800; }
.collector__brand { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .35rem; }
.collector-logout { min-width: 48px; min-height: 44px; padding: .25rem .4rem; display: flex; align-items: center; gap: .25rem; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; }
.collector-logout svg { width: 20px; height: 20px; }
.collector-logout span { display: flex; flex-direction: column; line-height: 1.1; }
.collector-logout strong { font-size: .76rem; }
.collector-logout small { margin-top: .15rem; font-size: .58rem; font-weight: 500; direction: ltr; }
.collector-today-link { min-height: 36px; display: inline-flex; align-items: center; padding: .45rem .65rem; color: var(--primary); background: var(--accent-soft); border: 1px solid rgba(245,189,87,.72); border-radius: var(--radius-sm); font-size: .78rem; font-weight: 900; text-decoration: none; }
.collector-face { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.collector-face[hidden] { display: none; }
.document-fields { display: grid; gap: .7rem; margin: var(--space-3) 0 var(--space-2); padding: var(--space-3); background: linear-gradient(180deg, #fffdf8, #fcf7fa); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.document-fields--standalone { width: 100%; margin-top: var(--space-4); background: var(--surface); }
.document-fields label { display: grid; gap: .35rem; color: var(--ink); font-size: .86rem; font-weight: 800; }
.collector-face-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: .2rem; }
.collector-face-header h2 { margin: 0; font-size: 1.25rem; }
.collector-face-header p { margin: .1rem 0 0; color: var(--muted); font-size: .82rem; font-weight: 800; direction: ltr; }
.supplier-field { position: relative; }
.supplier-picker { position: absolute; z-index: 12; inset: calc(100% + 6px) 0 auto; max-height: 260px; overflow: auto; padding: .35rem; display: grid; gap: .25rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 14px 34px rgba(9,27,33,.18); }
.supplier-picker[hidden] { display: none; }
.supplier-choice { width: 100%; min-width: 0; min-height: 58px; display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; color: var(--ink); background: white; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-align: start; }
.supplier-choice[hidden] { display: none; }
.supplier-choice:hover { background: var(--surface-soft); }
.supplier-choice.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.supplier-choice strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.supplier-avatar--choice { width: 40px; height: 40px; color: white; background: var(--primary); font-size: .95rem; }
.supplier-preview { display: flex; align-items: center; gap: .65rem; padding: .6rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.supplier-preview strong, .supplier-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-preview small { margin-top: .1rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.supplier-avatar--collector { width: 48px; height: 48px; color: white; background: var(--primary); font-size: 1.1rem; }
.payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; padding: .7rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.payment-fields[hidden] { display: none; }
.payment-fields label:first-child, .payment-fields label:last-child { grid-column: 1 / -1; }
.collector-secondary-action { width: 100%; margin-bottom: var(--space-2); }
.capture-state { flex: 1; display: grid; place-items: center; padding-bottom: 44px; }
.capture-state[hidden] { display: none; }
.capture-options { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: stretch; }
.capture-button { min-height: 190px; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; color: white; background: var(--primary); box-shadow: 0 12px 34px rgba(121,0,61,.2); cursor: pointer; text-align: center; }
.capture-button--upload { color: var(--primary); background: var(--accent-soft); border: 2px solid var(--accent); box-shadow: var(--shadow); }
.capture-button svg { width: 46px; height: 46px; margin-bottom: .45rem; }
.capture-button strong { font-size: 1.12rem; }
.capture-button small, .collector-actions small, .success-message small { display: block; opacity: .76; font-size: .86rem; font-weight: 500; direction: ltr; }
.preview-state { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.preview-state[hidden] { display: none; }
.preview-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.preview-topline strong { color: var(--primary); font-size: .95rem; }
.preview-topline .button { min-height: 40px; padding: .55rem .8rem; }
.preview-add-actions { display: flex; gap: .4rem; align-items: center; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; overflow: auto; max-height: calc(100dvh - 370px); padding-bottom: .1rem; }
.preview-card { position: relative; min-height: 180px; overflow: hidden; border-radius: var(--radius); background: #10242a; box-shadow: var(--shadow); }
.preview-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-card span { position: absolute; inset: .45rem auto auto .45rem; min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(121,0,61,.9); font-size: .82rem; font-weight: 800; }
.preview-remove { position: absolute; inset: .45rem .45rem auto auto; min-height: 32px; padding: .25rem .55rem; border: 0; border-radius: 999px; color: white; background: rgba(184,50,50,.92); font-size: .78rem; font-weight: 800; }
.collector-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-2); }
.collector-actions .button { min-height: 60px; flex-direction: column; }
.upload-status { min-height: 24px; text-align: center; color: var(--muted); }
.upload-status.is-error { color: var(--danger); }
.success-message { position: absolute; z-index: 5; inset: 50% 12px auto; transform: translateY(-50%); padding: 1.4rem; border-radius: var(--radius); color: var(--success); background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.success-check { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto .7rem; border-radius: 50%; color: white; background: var(--success); font-size: 1.4rem; }

.review-header, .workspace-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.review-header h1, .workspace-header h1 { margin: 0; font-size: 1.5rem; }
.workspace-header p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.workspace-title { min-width: 0; display: flex; align-items: center; gap: .75rem; }
.workspace-title > div { min-width: 0; }
.eyebrow { color: var(--primary); font-size: .78rem; font-weight: 800; }
.icon-button { width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
.header-actions { display: flex; align-items: center; gap: .35rem; }
.header-actions .button { min-height: 40px; padding: .55rem .75rem; font-size: .82rem; }
.export-menu { position: relative; }
.export-menu summary { min-height: 40px; display: inline-flex; align-items: center; padding: .55rem .75rem; color: white; background: var(--primary); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 900; cursor: pointer; list-style: none; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu__content { position: absolute; z-index: 20; inset: calc(100% + .4rem) 0 auto auto; min-width: 190px; display: grid; gap: .25rem; padding: .4rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 16px 40px rgba(9,27,33,.18); }
.export-menu__content a { min-height: 38px; display: flex; align-items: center; padding: .45rem .6rem; color: var(--ink); background: var(--surface-soft); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 900; text-decoration: none; }
.export-menu__content a:hover { color: white; background: var(--primary); }
.header-tabs { display: flex; align-items: center; gap: .35rem; padding: .25rem; background: rgba(255,255,255,.76); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.header-tabs a { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: .45rem .7rem; color: var(--ink); background: var(--surface-soft); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 900; text-decoration: none; white-space: nowrap; }
.header-tabs a:hover { color: white; background: var(--primary); }
.filter-panel, .queue-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--space-3); overflow: hidden; }
.filter-panel summary, .queue-panel summary { min-height: var(--tap); padding: .8rem 1rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; }
.filter-panel summary span { color: var(--muted); font-size: .78rem; font-weight: 500; }
.filters { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
.filters label { display: grid; gap: .35rem; font-size: .86rem; font-weight: 700; }
.field-pair, .filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.archive-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.archive-summary div { padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); }
.archive-summary strong { display: block; font-size: 1.35rem; line-height: 1; color: var(--primary); }
.archive-summary span { display: block; margin-top: .35rem; color: var(--muted); font-size: .82rem; }
.archive-filters { margin-bottom: var(--space-3); background: rgba(255,255,255,.95); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.archive-filters summary { list-style: none; cursor: pointer; }
.archive-filters summary::-webkit-details-marker { display: none; }
.filter-body { padding: 0 var(--space-3) var(--space-3); }
.filter-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); }
.filter-heading h2 { margin: 0; font-size: 1.1rem; }
.filter-heading span, .clear-filters { color: var(--primary); font-weight: 800; text-decoration: none; }
.clear-filters { display: inline-block; margin-bottom: var(--space-2); }
.quick-ranges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--space-3); }
.quick-ranges a { min-height: 36px; padding: .45rem .75rem; display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: white; font-size: .84rem; font-weight: 800; text-decoration: none; }
.quick-ranges a.is-active { color: white; background: var(--primary); border-color: var(--primary); }
.filters--archive { padding: 0; border: 0; }
.file-manager { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-3); align-items: start; }
.file-manager--grid { grid-template-columns: 1fr; }
.document-grid-panel, .document-inspector { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.file-toolbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: 1px solid var(--border); }
.file-toolbar h2 { margin: 0; font-size: 1.05rem; }
.file-toolbar span { color: var(--muted); font-size: .86rem; font-weight: 800; }
.document-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem; padding: var(--space-3); }
.document-card { position: relative; display: grid; gap: .65rem; padding: .65rem; color: var(--ink); background: white; border: 1px solid var(--border); border-radius: var(--radius); }
.document-card__link { display: grid; gap: .65rem; color: inherit; text-decoration: none; }
.document-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.document-card__thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #10242a; border-radius: var(--radius-sm); }
.document-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.document-card__thumb em { position: absolute; inset: .4rem .4rem auto auto; padding: .22rem .5rem; color: white; background: rgba(20,43,54,.82); border-radius: 999px; font-size: .72rem; font-style: normal; font-weight: 900; }
.supplier-avatar { overflow: hidden; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--primary); border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font-weight: 900; }
.supplier-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.supplier-avatar span { line-height: 1; }
.supplier-avatar--card { position: absolute; inset: auto .55rem .55rem auto; width: 42px; height: 42px; box-shadow: 0 6px 18px rgba(9,27,33,.24); }
.supplier-avatar--large { width: 64px; height: 64px; font-size: 1.45rem; }
.user-avatar { background: var(--accent); color: var(--primary-dark); }
.user-avatar--admin { width: 44px; height: 44px; font-size: 1rem; }
.user-avatar--page { width: 38px; height: 38px; font-size: .9rem; }
.amount-conflict { color: var(--danger)!important; font-weight: 900!important; }
.supplier-profile { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-3); padding: .75rem; background: var(--surface-soft); border-radius: var(--radius); }
.supplier-profile span { color: var(--muted); font-size: .74rem; font-weight: 900; }
.supplier-profile h2 { margin: .1rem 0; font-size: 1.05rem; }
.supplier-profile p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; }
.document-card__body { display: grid; gap: .18rem; min-width: 0; }
.document-card__body strong, .document-card__body span, .document-card__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-card__body span, .document-card__body small { color: var(--muted); font-size: .78rem; font-weight: 700; }
.document-card .status { justify-self: start; }
.document-delete { position: absolute; inset: .7rem auto auto .7rem; min-height: 34px; padding: .25rem .6rem; color: var(--danger); background: rgba(251,233,231,.94); border: 0; border-radius: 999px; font-size: .76rem; font-weight: 900; cursor: pointer; }
.document-delete:hover { color: white; background: var(--danger); }
.document-inspector { position: sticky; top: var(--space-3); padding: var(--space-3); }
.inspector-preview button { width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: #10242a; cursor: pointer; }
.inspector-preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.inspector-title { margin: var(--space-3) 0 var(--space-2); }
.inspector-title h2 { margin: 0; font-size: 1.1rem; }
.inspector-title p { margin: .25rem 0 0; color: var(--muted); font-weight: 800; }
.inspector-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-3); }
.inspector-meta { display: grid; gap: .5rem; margin: 0 0 var(--space-3); }
.inspector-meta div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .55rem .65rem; background: var(--surface-soft); border-radius: var(--radius-sm); }
.inspector-meta dt { color: var(--muted); font-size: .76rem; font-weight: 800; }
.inspector-meta dd { margin: 0; color: var(--ink); font-size: .82rem; font-weight: 900; text-align: left; direction: ltr; }
.inspector-meta__note { display: grid!important; align-items: start!important; }
.inspector-meta__note dd { width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; text-align: right; direction: rtl; }
.note-reader-button { width: 100%; padding: .2rem 0; color: inherit; background: transparent; border: 0; text-align: inherit; cursor: zoom-in; }
.note-reader-button span { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-reader-button small { display: block; margin-top: .45rem; color: var(--primary); font-size: .72rem; font-weight: 900; }
.read-dialog { width: min(92vw, 680px); max-height: min(86dvh, 720px); padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 70px rgba(9,27,33,.28); }
.read-dialog::backdrop { background: rgba(9,27,33,.58); }
.read-dialog__shell { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(86dvh, 720px); }
.read-dialog__shell header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.read-dialog__body { overflow: auto; padding: var(--space-4); font-size: 1.25rem; font-weight: 800; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; text-align: right; direction: rtl; }
.document-pages { padding: var(--space-2); background: var(--surface-soft); border-radius: var(--radius); }
.document-pages h2 { margin-bottom: var(--space-2); font-size: 1rem; }
.page-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .5rem; }
.page-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; min-height: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: #10242a; cursor: pointer; padding: 0; }
.page-thumb.is-current { border-color: var(--primary); }
.page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-thumb span { position: absolute; inset: auto .45rem .45rem auto; padding: .25rem .55rem; color: var(--primary); background: rgba(255,255,255,.9); border-radius: 999px; font-size: .78rem; font-weight: 900; }
.document-dialog { width: min(94vw, 980px); height: min(92dvh, 820px); padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: 0 24px 70px rgba(9,27,33,.28); }
.document-dialog::backdrop { background: rgba(9,27,33,.62); }
.dialog-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dialog-shell header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.dialog-shell header strong { font-size: 1rem; }
.dialog-shell .icon-button { font-size: 1.8rem; line-height: 1; }
.dialog-shell img { width: 100%; height: 100%; object-fit: contain; background: #10242a; }
.review-card { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.photo-stage { height: min(58dvh, 520px); display: grid; place-items: center; overflow: hidden; background: #10242a; border-radius: var(--radius); box-shadow: var(--shadow); }
.photo-stage a, .photo-stage img { display: block; width: 100%; height: 100%; }
.photo-stage img { object-fit: contain; }
.photo-meta { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: center; padding: .8rem .15rem; color: var(--muted); font-size: .78rem; }
.status { display: inline-flex; align-items: center; min-height: 25px; padding: .15rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.status--needs_info { color: var(--warning); background: #fff3cd; }
.status--saved, .status--archived, .status--drive-synced { color: var(--success); background: #dff4e9; }
.status--drive-sync_failed { color: var(--danger); background: var(--danger-soft); }
.status--drive-local_only { color: var(--muted); background: #edf0ef; }
.rejection-note { padding: .7rem; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); font-size: .86rem; }
.photo-nav { display: flex; justify-content: space-between; }
.review-actions { position: fixed; z-index: 10; inset: auto 0 0; width: min(100%, 480px); margin: auto; padding: .7rem max(1rem, env(safe-area-inset-right)) max(.7rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); display: grid; grid-template-columns: 1.2fr 1fr; gap: .7rem; background: rgba(247,244,237,.94); border-top: 1px solid var(--border); backdrop-filter: blur(10px); }
.review-actions .button { min-height: 56px; }
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--ink); margin: var(--space-3) 0 .4rem; }
.thumbnail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; padding: var(--space-3); border-top: 1px solid var(--border); }
.thumbnail-card { position: relative; height: 150px; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: #10242a; }
.thumbnail-card.is-current { border-color: var(--primary); }
.thumbnail-card img { width: 100%; height: 100%; object-fit: cover; }
.thumbnail-card .status { position: absolute; inset: auto .4rem .4rem auto; }
.thumbnail-card em { position: absolute; inset: .4rem .4rem auto auto; padding: .22rem .5rem; color: white; background: rgba(20,43,54,.82); border-radius: 999px; font-size: .72rem; font-style: normal; font-weight: 900; }
.queue-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: 0 var(--space-3) var(--space-3); font-size: .82rem; text-align: center; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: .7rem; margin-top: var(--space-3); }
.admin-page .app-shell, .review-page .app-shell { max-width: 1120px; }
.document-detail { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.document-detail__meta, .document-page-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.document-detail__meta { position: sticky; top: var(--space-3); display: grid; justify-items: center; gap: .75rem; padding: var(--space-3); text-align: center; }
.document-detail__meta h2 { margin: 0; font-size: 1.25rem; }
.document-detail__meta .inspector-meta { width: 100%; margin: 0; text-align: initial; }
.document-pages-view { display: grid; gap: var(--space-3); }
.document-page-card { overflow: hidden; }
.document-page-card header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-3); border-bottom: 1px solid var(--border); }
.document-page-card header .button { min-height: 36px; padding: .45rem .65rem; font-size: .78rem; }
.page-actions { display: flex; align-items: center; gap: .45rem; }
.page-actions form { margin: 0; }
.button--danger { color: var(--danger); background: #fbe9e7; border-color: #f5c6c1; }
.button--danger:hover { color: white; background: var(--danger); border-color: var(--danger); }
.page-upload-meta { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; align-items: center; text-align: start; }
.page-upload-meta .supplier-avatar { grid-row: 1 / 3; }
.page-upload-meta strong, .page-upload-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-upload-meta small { color: var(--muted); font-size: .76rem; font-weight: 800; direction: ltr; }
.document-page-card img { width: 100%; max-height: 78dvh; object-fit: contain; display: block; background: #10242a; }
.page-jump-nav { position: fixed; z-index: 9; inset: auto 50% max(12px, env(safe-area-inset-bottom)); transform: translateX(50%); display: flex; align-items: center; gap: .45rem; padding: .45rem; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.page-jump-nav a { width: 38px; height: 38px; display: grid; place-items: center; color: var(--primary); background: var(--surface-soft); border-radius: 50%; font-size: .86rem; font-weight: 900; text-decoration: none; }
.page-jump-nav a:hover { color: white; background: var(--primary); }
.admin-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.admin-summary div { padding: var(--space-3); background: var(--primary); color: white; border-radius: var(--radius); box-shadow: var(--shadow); border-top: 4px solid var(--accent); }
.admin-summary strong { display: block; font-size: 1.55rem; line-height: 1; }
.admin-summary span { display: block; margin-top: .35rem; opacity: .82; font-size: .82rem; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.admin-panel { margin-bottom: var(--space-3); padding: var(--space-3); background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.admin-panel h2 { margin-bottom: var(--space-3); font-size: 1.1rem; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.settings-nav { position: sticky; top: var(--space-3); display: grid; gap: .35rem; padding: .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.settings-nav a { min-height: 42px; display: flex; align-items: center; padding: .55rem .7rem; color: var(--muted); border-radius: var(--radius-sm); font-weight: 900; text-decoration: none; }
.settings-nav a.is-active, .settings-nav a:hover { color: var(--primary); background: var(--surface-soft); }
.settings-main { min-width: 0; }
.tab-panel[hidden] { display: none; }
.access-list { display: grid; gap: .65rem; }
.access-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr) auto auto; gap: .75rem; align-items: center; padding: .8rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.access-row strong, .access-row small { display: block; }
.access-row small { margin-top: .15rem; color: var(--muted); font-weight: 700; }
.storage-plan { display: grid; gap: .5rem; margin-top: var(--space-3); padding: .8rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.storage-plan strong { color: var(--primary); }
.storage-plan code { display: block; overflow-x: auto; padding: .55rem .65rem; direction: ltr; text-align: left; color: var(--ink); background: var(--surface-soft); border-radius: var(--radius-sm); font-size: .82rem; }
.storage-plan small { color: var(--muted); font-weight: 700; }
.user-list { display: grid; gap: .8rem; }
.user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem 1rem; align-items: start; padding: .85rem 1rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.user-row.is-disabled { opacity: .7; background: #f6f8f7; }
.user-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .35rem .55rem; }
.user-main strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.08rem; }
.user-main small { flex-basis: 100%; color: var(--muted); font-size: .82rem; font-weight: 800; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.inline-form input, .inline-form select { min-height: 42px; padding: .55rem .65rem; color: var(--ink); background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.inline-form .button, .user-row > form > .button { min-height: 42px; padding: .55rem .75rem; white-space: nowrap; }
.user-row .button, .user-row input, .user-row select { font-size: .9rem; }
.user-menu { min-width: 0; }
.user-menu[open] { grid-column: 1 / -1; }
.user-menu summary { width: fit-content; min-height: 38px; margin-inline-start: auto; padding: .45rem .7rem; color: var(--primary); background: var(--accent-soft); border: 1px solid rgba(245,189,87,.65); border-radius: var(--radius-sm); font-size: .9rem; font-weight: 900; cursor: pointer; list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu__content { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .65rem; margin-top: .75rem; padding: .75rem; background: #fbfaf9; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.admin-action-form { align-items: end; padding: .65rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.admin-action-form label { display: grid; gap: .3rem; min-width: 0; color: var(--muted); font-size: .76rem; font-weight: 900; }
.user-role-form { grid-template-columns: minmax(96px, .8fr) minmax(130px, 1fr) auto; }
.user-danger-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: flex-start; padding: .55rem; background: #fff7f6; border: 1px solid #f7d8d4; border-radius: var(--radius-sm); }
.user-danger-actions .button { min-height: 42px; }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-list span { padding: .45rem .7rem; background: var(--surface-soft); border-radius: 999px; font-size: .86rem; font-weight: 700; }
.supplier-list { display: grid; gap: .75rem; }
.supplier-card { display: grid; grid-template-columns: auto minmax(120px, .9fr) minmax(200px, 1fr) minmax(240px, 1.1fr) auto; align-items: center; gap: .75rem; padding: .75rem; background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.supplier-avatar--admin { width: 54px; height: 54px; font-size: 1.2rem; }
.supplier-card__main { display: grid; gap: .15rem; min-width: 0; }
.supplier-card__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supplier-card__main small { color: var(--muted); font-weight: 800; }
.supplier-logo-form, .supplier-name-form, .admin-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.supplier-logo-form input, .supplier-name-form input, .admin-search-form input { min-height: 42px; padding: .5rem; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.supplier-logo-form .button, .supplier-name-form .button, .admin-search-form .button { min-height: 42px; padding: .55rem .75rem; white-space: nowrap; }
.admin-search-form { margin-bottom: var(--space-3); max-width: 520px; }
.supplier-delete-form .button { min-height: 42px; padding: .55rem .75rem; }
.stock-product-list { grid-template-columns: 1fr; }
.stock-product-card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .85rem 1rem;
  padding: 1rem;
}
.stock-product-card .supplier-card__main {
  align-self: center;
  padding-inline-end: .35rem;
}
.stock-product-card .supplier-card__main strong { font-size: 1.15rem; }
.stock-product-name-form {
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 1.2fr) minmax(105px, .7fr) minmax(125px, .8fr) minmax(120px, .8fr) auto;
  align-items: end;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.stock-product-name-form label {
  display: grid;
  gap: .3rem;
  min-width: 0;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
}
.stock-product-card .supplier-logo-form {
  grid-column: 1 / span 2;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 520px;
}
.stock-product-card .supplier-delete-form {
  justify-self: start;
}
.stock-product-card .supplier-delete-form .button {
  min-width: 88px;
}
.stock-notice { display: grid; gap: .25rem; margin-bottom: var(--space-3); padding: var(--space-3); color: var(--primary); background: var(--accent-soft); border: 1px solid rgba(245,189,87,.7); border-radius: var(--radius); box-shadow: var(--shadow); }
.stock-notice strong { font-size: 1rem; }
.stock-notice span { color: var(--muted); font-size: .84rem; font-weight: 800; }
.stock-notice--done { background: #f6fffa; border-color: rgba(26,127,90,.28); }
.stock-counter .workspace-header { margin-bottom: var(--space-3); }
.stock-counter .document-fields { margin-top: var(--space-3); }
.stock-collector-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; }
.stock-collector-form label { min-width: 0; }
.stock-collector-form .button { min-height: var(--tap); }
.stock-worker-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .35fr); gap: var(--space-2); align-items: stretch; margin-bottom: var(--space-3); }
.stock-select-panel { display: grid; gap: var(--space-2); padding: var(--space-3); background: linear-gradient(180deg, #fffdf8, #fcf7fa); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stock-scan-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stock-select-panel .stock-scan-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.stock-search-field { display: grid; gap: .45rem; min-width: 0; }
.stock-search-field label { color: var(--muted); font-size: .78rem; font-weight: 900; }
.stock-search-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; padding: .35rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stock-search-control input { min-height: 48px; padding: .65rem .75rem; color: var(--ink); background: white; border: 0; border-radius: calc(var(--radius-sm) - 4px); font-weight: 900; }
.stock-search-control input:focus { outline: 2px solid var(--primary-light); outline-offset: 0; }
.stock-search-control .button { min-height: 48px; }
.stock-product-choice { align-items: flex-start; text-align: start; }
.stock-product-choice > span:last-child { display: grid; gap: .1rem; min-width: 0; }
.stock-product-choice small { overflow: hidden; color: var(--muted); font-size: .72rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: end; }
.stock-selected-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; padding-top: var(--space-2); border-top: 1px solid var(--border); }
.stock-selected-form label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 900; }
.stock-selected-form input { min-height: 48px; padding: .65rem .75rem; color: var(--ink); background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 900; }
.stock-product-preview { grid-column: 1 / -1; }
.stock-scan-button { min-height: 150px; display: grid; place-items: center; align-content: center; gap: .35rem; padding: var(--space-3); color: white; background: var(--primary); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer; text-align: center; }
.stock-scan-button svg { width: 34px; height: 34px; }
.stock-scan-button strong { font-size: 1.08rem; }
.stock-scan-button span { font-size: .78rem; font-weight: 800; opacity: .86; }
.stock-progress-card { display: grid; place-items: center; align-content: center; gap: .2rem; min-height: 150px; padding: var(--space-2); color: white; background: var(--primary); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; }
.stock-progress-card strong { font-size: 2rem; line-height: 1; }
.stock-progress-card span { max-width: 7rem; font-size: .8rem; font-weight: 900; opacity: .9; }
.stock-list, .stock-article-list { display: grid; gap: var(--space-2); }
.stock-check-card, .stock-article-row { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stock-check-card.is-counted { border-color: rgba(26,127,90,.35); background: linear-gradient(180deg, #fff, #f6fffa); }
.stock-check-card__main { display: grid; gap: .3rem; }
.stock-check-card__main strong, .stock-article-row strong { color: var(--ink); font-size: 1.08rem; }
.stock-check-card__main small, .stock-article-row small { color: var(--muted); font-size: .8rem; font-weight: 800; }
.stock-count-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; align-items: end; }
.stock-count-form label, .stock-article-form label { display: grid; gap: .3rem; color: var(--muted); font-size: .76rem; font-weight: 900; }
.stock-count-form input, .stock-article-form input, .stock-date-filter input, .system-stock-form input { min-height: 44px; padding: .6rem .7rem; color: var(--ink); background: white; border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 900; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.panel-title-row h2 { margin: 0; }
.stock-article-row { grid-template-columns: 1fr auto auto; align-items: end; }
.stock-article-row__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border); }
.stock-article-row__summary small { flex-basis: 100%; }
.stock-article-row .supplier-logo-form { grid-column: 1 / -1; }
.stock-article-form { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(170px, 1.2fr) repeat(3, minmax(120px, .8fr)) auto; gap: .5rem; align-items: end; }
.stock-date-filter { grid-template-columns: minmax(180px, 1fr) auto; align-items: end; }
.stock-finish-panel { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 8; margin-top: var(--space-3); padding: .65rem; background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stock-finish-panel .button { width: 100%; min-height: 56px; }
.stock-table-panel { overflow: hidden; }
.stock-table-wrap { overflow-x: auto; }
.stock-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: right; }
.stock-table th, .stock-table td { padding: .75rem .65rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.stock-table th { color: var(--muted); background: var(--surface-soft); font-size: .76rem; font-weight: 900; }
.stock-table td { font-weight: 900; }
.stock-table td small { display: block; margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.stock-table tr.has-difference td { background: #fff8f6; }
.stock-table tr.is-matching td { background: #f6fffa; }
.stock-table tr.is-missing td { background: #fbf7fa; color: var(--muted); }
.system-stock-form { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: .35rem; align-items: center; min-width: 170px; }
.system-stock-form .button { min-height: 40px; padding: .45rem .6rem; }

@media (max-width: 350px) {
  .app-shell { padding-inline: .65rem; }
  .capture-button strong { font-size: 1.25rem; }
  .photo-stage { height: 52dvh; }
}

@media (max-width: 680px) {
  .admin-grid { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; grid-template-columns: 1fr; }
  .admin-summary { grid-template-columns: repeat(2, 1fr); }
  .user-row, .user-menu__content { grid-template-columns: 1fr; }
  .access-row { grid-template-columns: 1fr; }
  .supplier-card { grid-template-columns: auto minmax(0, 1fr); }
  .supplier-logo-form, .supplier-name-form, .supplier-delete-form { grid-column: 1 / -1; }
  .inline-form, .user-role-form { grid-template-columns: 1fr; }
  .stock-worker-tools, .stock-scan-form, .stock-search-control, .stock-selected-form, .stock-collector-form, .stock-count-form, .stock-article-row, .stock-article-form, .stock-date-filter { grid-template-columns: 1fr; }
  .stock-progress-card { min-height: 88px; }
  .stock-scan-button { min-height: 118px; }
  .panel-title-row { align-items: stretch; flex-direction: column; }
  .system-stock-form { min-width: 150px; }
  .workspace-header { align-items: flex-start; flex-direction: column; }
  .workspace-title { align-items: flex-start; }
  .brand-logo--workspace { width: 46px; height: 46px; }
  .header-actions { width: 100%; justify-content: space-between; }
  .header-tabs { flex: 1; min-width: 0; overflow-x: auto; box-shadow: none; }
}

@media (max-width: 860px) {
  .file-manager { grid-template-columns: 1fr; }
  .document-inspector { position: static; }
  .document-detail { grid-template-columns: 1fr; }
  .document-detail__meta { position: static; }
}

@media (max-width: 560px) {
  .archive-summary { grid-template-columns: 1fr; }
  .filters--archive .field-pair { grid-template-columns: 1fr; }
  .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .75rem; gap: .65rem; }
  .document-card { padding: .5rem; }
  .payment-fields { grid-template-columns: 1fr; }
  .capture-options { grid-template-columns: 1fr; }
  .capture-button { min-height: 140px; }
}

@media (prefers-reduced-motion: no-preference) {
  .success-message { animation: pop-in .18s ease-out; }
  @keyframes pop-in { from { opacity: 0; transform: translateY(-45%) scale(.96); } }
}

/* ===== admin-refresh ===== */
.language-bar { display:flex; justify-content:flex-end; padding:8px 16px; min-height:54px; }
body .language-bar .language-switch { position:static; inset:auto; box-shadow:none; min-height:38px; z-index:auto; font-size:14px; }
.collector__header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:10px; padding-bottom:12px; }
.collector__brand { position:static; left:auto; transform:none; min-width:0; justify-content:center; }
.collector__brand span { min-width:0; overflow-wrap:anywhere; }
.collector-today-link { white-space:normal; overflow-wrap:anywhere; }
.admin-refresh .app-shell { max-width:1440px; padding:16px 24px 48px; }
.admin-refresh .workspace-header { margin-bottom:24px; }
.admin-refresh h1 { font-size:28px; }
.admin-refresh h2 { font-size:21px; margin:0 0 20px; }
.admin-refresh .workspace-title p { font-size:15px; }
.admin-refresh .settings-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.admin-refresh .settings-nav { position:sticky; top:16px; border:0; border-radius:0; box-shadow:none; padding:0; background:transparent; }
.admin-refresh .settings-nav a { font-size:15px; padding:10px 12px; border-radius:6px; margin:2px 0; }
.admin-refresh .settings-nav a[href^="#create"] { font-size:14px; padding-block:6px; font-weight:500; }
.admin-refresh .settings-main { min-width:0; }
.admin-refresh .admin-panel { border:0; box-shadow:none; border-radius:0; padding:0; background:transparent; }
.admin-refresh .tab-panel[hidden] { display:none !important; }
.admin-refresh .user-row,.admin-refresh .supplier-card,.admin-refresh .access-row { display:flex; align-items:center; gap:16px; padding:16px 8px; margin:0; border:0; border-bottom:1px solid #ded9dc; border-radius:0; background:transparent; box-shadow:none; min-width:0; }
.admin-refresh .user-main { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:4px 12px; align-items:center; flex:1; min-width:0; }
.admin-refresh .user-main .user-avatar { grid-row:1 / 3; width:48px; height:48px; }
.admin-refresh .user-main small { grid-column:2 / 4; font-size:14px; }
.admin-refresh .user-main strong,.admin-refresh .supplier-card strong,.admin-refresh .access-row strong { font-size:17px; overflow-wrap:anywhere; }
.admin-refresh .supplier-card__main,.admin-refresh .access-row > div { flex:1; min-width:0; }
.admin-refresh .supplier-avatar--admin { width:48px; height:48px; flex-shrink:0; }
.admin-refresh .status { font-size:12px; padding:4px 9px; }
.admin-refresh .button { font-size:15px; min-height:42px; padding:9px 15px; border-radius:6px; width:auto; }
.admin-refresh input,.admin-refresh select { width:100%; min-width:0; font-size:16px; padding:10px 12px; min-height:44px; border-radius:6px; }
.admin-refresh label { font-size:14px; font-weight:600; display:grid; gap:7px; min-width:0; }
.admin-refresh .admin-filters,.admin-refresh .admin-search-form { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.admin-refresh .admin-filters label { flex:1 1 150px; }
.admin-refresh .admin-search-form input { flex:1; width:auto; }
.admin-refresh .admin-pagination { display:flex; gap:18px; align-items:center; margin:14px 0; font-size:14px; }
.admin-refresh .stack-form { max-width:640px; }
.admin-refresh .section-add { margin-bottom:18px; display:inline-flex; }
.admin-refresh .settings-nav a { padding-block:8px; }
.admin-refresh .admin-drawer { position:fixed; inset:0; margin-inline-start:auto; margin-inline-end:0; margin-block:0; width:min(540px,100%); max-width:100%; height:100dvh; max-height:100dvh; padding:24px; border:0; border-radius:0; overflow-y:auto; background:#fff; color:#211822; }
.admin-drawer::backdrop { background:rgba(20,16,20,.4); }
.admin-refresh .admin-drawer header { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:20px; }
.admin-refresh .admin-drawer header button { width:40px; height:40px; border:1px solid #ddd; background:#fff; font-size:26px; border-radius:6px; }
.admin-refresh .admin-drawer form,.admin-refresh .admin-drawer .admin-action-form { display:grid; grid-template-columns:1fr; gap:12px; padding:18px 0; border:0; border-bottom:1px solid #eee; border-radius:0; background:transparent; }
.admin-refresh .admin-drawer form > button { justify-self:start; margin:0; }
.admin-refresh .admin-drawer .user-menu__content { display:block; padding:0; border:0; }
.admin-refresh .admin-drawer .user-danger-actions { display:flex; flex-wrap:wrap; gap:12px; background:transparent; }
.admin-refresh .notice { font-size:14px; padding:12px; background:#fff7dc; color:#554619; border-inline-start:3px solid #f5bd57; }
.admin-refresh .metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:32px; }
.admin-refresh .metric-grid a { display:grid; gap:10px; color:#211822; text-decoration:none; border-top:3px solid #79003d; padding:16px 0; }
.admin-refresh .metric-grid strong { font-size:28px; overflow-wrap:anywhere; }
.admin-refresh .metric-grid span { font-size:14px; }
.admin-refresh .admin-facts { margin:0 0 30px; }
.admin-refresh .admin-facts > div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid #ded9dc; }
.admin-refresh .admin-facts dd { margin:0; font-weight:700; }
.admin-refresh .activity-table { overflow:auto; }
.admin-refresh table { width:100%; border-collapse:collapse; font-size:14px; }
.admin-refresh th,.admin-refresh td { text-align:start; padding:12px; border-bottom:1px solid #ddd; }
.admin-refresh .flash-stack { position:static; margin-bottom:16px; width:auto; }
@media(max-width:760px) {
 .admin-refresh .app-shell { padding:12px; }
 .admin-refresh .settings-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
 .admin-refresh .settings-nav { position:static; display:flex; overflow:auto; white-space:nowrap; gap:6px; padding-bottom:8px; }
 .admin-refresh .settings-nav a { flex-shrink:0; }
 .admin-refresh .user-row,.admin-refresh .supplier-card { gap:8px; }
 .admin-refresh .user-main { grid-template-columns:36px minmax(0,1fr); }
 .admin-refresh .user-main .user-avatar { width:36px; height:36px; }
 .admin-refresh .user-main .status { grid-column:2; justify-self:start; }
 .admin-refresh .user-main small { grid-column:2; }
 .admin-refresh .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ===== workspaces ===== */
.taakid-identity { background: white; padding: 20px 32px 0; }
.companies-page .app-shell { width: min(1180px, calc(100% - 32px)); max-width: 1180px; margin-inline: auto; }
.taakid-identity img { display: block; width: 100%; height: 130px; object-fit: contain; }
.companies-header { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding-block: 20px; border-bottom: 1px solid #dde3e2; }
.companies-header h1 { font-size: 26px; margin: 0; }
.companies-header img { object-fit: contain; max-width: 200px; }
.companies-header form { margin-inline-start: auto; }
.company-section { padding-block: 24px; border-bottom: 1px solid #dde3e2; }
.company-section h2 { font-size: 22px; }
.company-section summary { cursor: pointer; font-weight: 700; padding-block: 12px; }
.company-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); gap: 16px; }
.company-tile { border: 1px solid #dde3e2; border-radius: 8px; padding: 20px; background: white; display: grid; gap: 12px; min-width: 0; }
.company-tile img { object-fit: contain; }
.company-tile h3 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.company-tile a { overflow-wrap: anywhere; font-size: 14px; }
.company-form { display: grid; gap: 16px; max-width: 640px; padding-block: 16px; }
.company-form label { display: grid; gap: 8px; font-size: 16px; }
.company-form input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #cad3d1; border-radius: 6px; background: white; font: inherit; color: #241d24; box-sizing: border-box; }
.company-form input:focus-visible { outline: 2px solid #79003d; outline-offset: 2px; }
.company-form input[type=file] { font-size: 14px; }
.companies-page a { color: #79003d; text-underline-offset: 3px; }
.company-form .company-checkbox { display: flex; align-items: center; }
.company-checkbox input { width: 20px; height: 20px; min-height: 20px; }
.company-brand-preview { object-fit: contain; background: white; width: 112px; height: 112px; }
.developer-page .app-shell { max-width:none; }
.developer-header { align-items:flex-start; }
.developer-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.developer-summary article { display:grid; gap:5px; padding:20px; border:1px solid #e5dfe4; border-radius:12px; background:#fff; }
.developer-summary strong { color:#79003d; font-size:28px; }
.developer-summary span { color:#716872; font-size:13px; }
.developer-panel { padding:22px; border:1px solid #e5dfe4; border-radius:12px; background:#fff; }
.developer-panel .section-heading p { margin:5px 0 0; color:#716872; }
.developer-table-wrap { overflow:auto; }
.developer-table { width:100%; border-collapse:collapse; min-width:850px; }
.developer-table th,.developer-table td { padding:13px 12px; border-bottom:1px solid #eee8ed; text-align:start; vertical-align:middle; }
.developer-table th { color:#716872; font-size:12px; font-weight:700; }
.developer-table td:first-child { display:flex; align-items:center; gap:10px; }
.developer-table td:first-child img { border-radius:9px; object-fit:contain; background:#faf7f9; }
.developer-table td:first-child span { display:grid; gap:2px; }
.developer-table small { color:#817782; }
.developer-table form { margin:0; }
.status-pill { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.status-pill--ok { color:#17643a; background:#e8f7ef; }
.status-pill--warning { color:#8a4c00; background:#fff3dd; }
.developer-boundary { margin-top:18px; padding:18px 20px; border-inline-start:4px solid #79003d; background:#f8f1f5; border-radius:8px; }
.developer-boundary p { margin:7px 0 0; color:#5f5560; }
.mobile-web-only { max-width:680px; margin:8vh auto; text-align:center; border:1px solid #eadfe6; border-radius:16px; padding:34px; background:#fff; }
.mobile-web-only img { object-fit:contain; }
.mobile-web-only form { margin-top:20px; }
@media (max-width: 600px) {
  .companies-header { gap: 12px; }
  .companies-header h1 { font-size: 22px; }
  .companies-header img { width: 130px; height: 60px; }
  .companies-header form { margin-inline-start: 0; }
}

/* ===== navigation — only on: .management-shell ===== */
.management-shell:where(.management-shell) { --nav-width:240px; background:#f8f9fa; }
.management-shell:where(.management-shell) .navigation-host { position:fixed; inset-block:0; inset-inline-start:0; width:var(--nav-width); z-index:40; background:#fff; border-inline-end:1px solid #e4e1e4; }
:where(.management-shell) .app-navigation { display:flex; flex-direction:column; height:100%; min-height:0; padding:20px 14px 12px; box-sizing:border-box; }
:where(.management-shell) .navigation-brand { display:flex; align-items:center; gap:10px; padding:0 10px 20px; color:#79003d; text-decoration:none; font-size:23px; font-weight:800; flex-shrink:0; }
:where(.management-shell) .navigation-brand img { object-fit:contain; flex-shrink:0; border-radius:6px; }
:where(.management-shell) .navigation-brand small { display:block; font-size:10px; color:#706972; margin-top:3px; font-weight:600; }
:where(.management-shell) .app-navigation nav { overflow:auto; min-height:0; flex:1; }
:where(.management-shell) .navigation-group { margin:0 0 18px; }
:where(.management-shell) .navigation-group h2 { font-size:11px !important; font-weight:700; color:#827b84; margin:0 12px 6px !important; line-height:1.6; }
:where(.management-shell) .navigation-group a { display:flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:6px; color:#49414c; font-size:14px; font-weight:550; text-decoration:none; line-height:1.45; border-inline-start:3px solid transparent; transition:background-color .15s,color .15s; }
:where(.management-shell) .navigation-group a:hover { background:#f4f2f4; color:#79003d; }
:where(.management-shell) .navigation-group a.is-current { background:#f5eaf0; color:#79003d; border-inline-start-color:#79003d; font-weight:750; }
:where(.management-shell) .navigation-account { border-top:1px solid #e9e4e8; padding:14px 10px 0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }
:where(.management-shell) .navigation-account > span { flex:1; overflow-wrap:anywhere; color:#6b626d; }
:where(.management-shell) .navigation-account button { border:0; padding:8px 0; color:#79003d; background:transparent; cursor:pointer; font-size:12px; }
.management-shell:where(.management-shell) .workspace-topbar { position:sticky; top:0; margin-inline-start:var(--nav-width); height:64px; display:flex; align-items:center; gap:12px; padding:10px 28px; background:#ffffffed; border-bottom:1px solid #e8e4e8; z-index:25; box-sizing:border-box; }
:where(.management-shell) .workspace-context { font-size:13px; color:#746b76; flex:1; }
.management-shell:where(.management-shell) .workspace-topbar .language-switch { position:static; inset:auto; min-height:36px; padding:6px 12px; box-shadow:none; font-size:13px; background:#fff; border-color:#ded7df; border-radius:6px; }
.management-shell:where(.management-shell) .app-shell { width:auto; max-width:none; margin:0; margin-inline-start:var(--nav-width); padding:28px 32px 48px; }
.management-shell:where(.management-shell) .workspace-header, .management-shell:where(.management-shell) .att-header { margin-bottom:24px; align-items:center; gap:16px; }
.management-shell:where(.management-shell) .workspace-title .brand-logo, .management-shell:where(.management-shell) .workspace-title .eyebrow, .management-shell:where(.management-shell) .att-brand img, .management-shell:where(.management-shell) .att-brand small { display:none; }
.management-shell:where(.management-shell) h1 { font-size:26px; line-height:1.4; margin:0; }
.management-shell:where(.management-shell) .workspace-title p { font-size:14px; margin-top:5px; font-weight:400; }
.management-shell:where(.management-shell) .header-tabs, .management-shell:where(.management-shell) .workspace-header .header-actions > form, .management-shell:where(.management-shell) .att-header > a { display:none; }
.management-shell.admin-refresh:where(.management-shell) .settings-nav, .management-shell.stock-page:where(.management-shell) .settings-nav { display:none; }
.management-shell.admin-refresh:where(.management-shell) .settings-layout, .management-shell.stock-page:where(.management-shell) .settings-layout { display:block; }
.management-shell:where(.management-shell) .header-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.management-shell[data-page="main.configuration"]:where(.management-shell) .workspace-header .header-actions { display:none; }
.management-shell:where(.management-shell) .section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.management-shell:where(.management-shell) .section-heading h2, .management-shell:where(.management-shell) .section-heading .section-add { margin:0; }
.management-shell:where(.management-shell) .header-actions .button, .management-shell:where(.management-shell) .export-menu summary { min-height:40px; padding:8px 14px; font-size:14px; border-radius:6px; }
.management-shell:where(.management-shell) .archive-summary { display:flex; flex-wrap:wrap; gap:28px; border-bottom:1px solid #e1dce1; margin-bottom:24px; padding-bottom:20px; }
.management-shell:where(.management-shell) .archive-summary > div { background:transparent; color:#211822; border:0; border-radius:0; padding:0; box-shadow:none; min-width:100px; }
.management-shell:where(.management-shell) .archive-summary strong { font-size:25px; }
.management-shell:where(.management-shell) .archive-summary span { color:#766e78; font-size:13px; }
.management-shell:where(.management-shell) .archive-filters { border-radius:6px; box-shadow:none; }
.management-shell:where(.management-shell) .filter-heading { padding:14px 18px; }
.management-shell:where(.management-shell) .filter-heading h2 { font-size:17px; }
.management-shell:where(.management-shell) .filter-heading span { font-size:12px; }
.management-shell:where(.management-shell) .filters button, .management-shell:where(.management-shell) .filters .button { min-height:42px; font-size:14px; padding:9px 18px; border-radius:6px; width:auto; }
.management-shell:where(.management-shell) .filters { gap:14px; }
.management-shell:where(.management-shell) .filters input, .management-shell:where(.management-shell) .filters select { min-width:0; min-height:42px; font-size:15px; }
.management-shell:where(.management-shell) .filters label { font-size:13px; }
.management-shell:where(.management-shell) .quick-ranges a { font-size:13px; padding:7px 12px; }
.management-shell:where(.management-shell) :is(a,button,input,select,summary):focus-visible { outline:3px solid #bc81a0; outline-offset:3px; }
:where(.management-shell) #open-navigation { display:none; min-height:40px; padding:8px 12px; border:1px solid #ddd3dc; color:#79003d; background:white; border-radius:6px; font:inherit; cursor:pointer; }
:where(.management-shell) #navigation-dialog { padding:0; border:0; width:min(320px,88vw); max-width:88vw; height:100dvh; max-height:100dvh; margin:0; inset-block:0; inset-inline-start:0; inset-inline-end:auto; background:#fff; color:#211822; }
:where(.management-shell) #navigation-dialog::backdrop { background:rgba(25,17,24,.4); }
:where(.management-shell) #mobile-navigation-host { height:100%; }
:where(.management-shell) #close-navigation { position:absolute; inset-inline-end:12px; top:12px; border:0; background:#f6f3f5; width:36px; height:36px; border-radius:6px; font-size:24px; z-index:1; cursor:pointer; }
:where(.management-shell) #navigation-dialog .navigation-brand { padding-inline-end:32px; }
:where(.management-shell) .skip-content { position:fixed; top:-100px; inset-inline-start:260px; z-index:100; background:#fff; color:#79003d; padding:12px; }
:where(.management-shell) .skip-content:focus { top:8px; }
:where(.management-shell) #workspace-content { scroll-margin-top:80px; }
.management-shell:where(.management-shell) .tab-panel { scroll-margin-top:80px; }
@media(max-width:900px) {
 .management-shell:where(.management-shell) .workspace-topbar { margin:0; height:60px; padding:8px 16px; }
 .management-shell:where(.management-shell) .app-shell { margin:0; padding:22px 16px 40px; }
 .management-shell:where(.management-shell) .navigation-host { position:static; width:auto; }
 .js-navigation .management-shell:where(.management-shell) .navigation-host { display:none; }
 .js-navigation :where(.management-shell) #open-navigation { display:block; }
 .management-shell:where(.management-shell) .workspace-header { flex-wrap:wrap; }
 .management-shell:where(.management-shell) h1 { font-size:23px; }
 .management-shell:where(.management-shell) .header-actions { width:100%; justify-content:flex-start; }
 .management-shell:where(.management-shell) .archive-summary { gap:22px; }
 .management-shell:where(.management-shell) .field-pair { grid-template-columns:minmax(0,1fr); }
 .management-shell:where(.management-shell) .settings-layout { display:block; }
 .management-shell:where(.management-shell) .settings-nav { position:static; }
 :where(.management-shell) .skip-content { inset-inline-start:16px; }
}
@media(prefers-reduced-motion:reduce) { :where(.management-shell) .navigation-group a { transition:none; } }

/* ===== worker-layout — only on: .worker-shell ===== */
.worker-shell:where(.worker-shell) { background:#f7f8fa; }
.worker-shell:where(.worker-shell) .app-shell { display:block; width:100%; max-width:580px; padding:16px 18px 32px; margin:0 auto; }
:where(.worker-shell) .worker-header { display:flex; gap:12px; align-items:center; margin-bottom:18px; }
:where(.worker-shell) .worker-brand { display:flex; align-items:center; gap:8px; flex:1; min-width:0; color:#79003d; font-size:21px; }
:where(.worker-shell) .worker-brand img { object-fit:contain; flex-shrink:0; border-radius:6px; }
:where(.worker-shell) .worker-language, :where(.worker-shell) .worker-account summary { min-height:44px; display:flex; align-items:center; padding:8px 10px; border:1px solid #dfd8df; border-radius:6px; color:#79003d; background:#fff; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
:where(.worker-shell) .worker-account { position:relative; flex-shrink:0; }
:where(.worker-shell) .worker-account summary { list-style:none; }
:where(.worker-shell) .worker-account summary::-webkit-details-marker { display:none; }
:where(.worker-shell) .worker-account[open] summary { background:#f4eaf0; }
:where(.worker-shell) .worker-account-menu { position:absolute; inset-inline-end:0; top:calc(100% + 8px); width:min(280px,calc(100vw - 36px)); padding:8px; background:#fff; border:1px solid #ded8df; border-radius:8px; box-shadow:0 12px 28px #21182220; z-index:60; }
:where(.worker-shell) .worker-account-menu > strong { display:block; padding:10px; overflow-wrap:anywhere; font-size:14px; color:#706773; }
:where(.worker-shell) .worker-account-menu a, :where(.worker-shell) .worker-account-menu button { display:block; width:100%; padding:12px 10px; text-align:start; color:#211822; background:none; border:0; font:inherit; font-size:15px; text-decoration:none; border-radius:4px; cursor:pointer; }
:where(.worker-shell) .worker-account-menu button { color:#a42d39; border-top:1px solid #eee; }
:where(.worker-shell) .worker-account-menu a:hover, :where(.worker-shell) .worker-account-menu button:hover { background:#f6f2f5; }
:where(.worker-shell) .worker-tabs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-bottom:1px solid #dfd8df; margin-bottom:20px; }
:where(.worker-shell) .worker-tabs a { min-height:48px; display:flex; justify-content:center; align-items:center; padding:10px 6px; border-bottom:3px solid transparent; color:#766d77; text-decoration:none; text-align:center; font-size:15px; font-weight:600; }
:where(.worker-shell) .worker-tabs a[aria-current] { color:#79003d; border-bottom-color:#79003d; }
:where(.worker-shell) .worker-day { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 18px; font-size:15px; }
:where(.worker-shell) .worker-day span { font-size:13px; color:#766d77; }
.worker-shell:where(.worker-shell) .collector { min-height:0; }
.worker-shell:where(.worker-shell) .document-fields { margin:0 0 12px; padding:18px; background:#fff; border:1px solid #e0dce1; border-radius:8px; box-shadow:none; gap:14px; }
.worker-shell:where(.worker-shell) .document-fields label > span, .worker-shell:where(.worker-shell) .document-fields label { font-size:15px; }
.worker-shell:where(.worker-shell) input:not([type=hidden]):not([type=file]), .worker-shell:where(.worker-shell) select { min-width:0; min-height:46px; font-size:16px; border-radius:6px; }
.worker-shell:where(.worker-shell) .supplier-preview { border-radius:6px; padding:12px; min-height:68px; }
.worker-shell:where(.worker-shell) .supplier-preview .supplier-avatar { width:42px; height:42px; flex-shrink:0; }
.worker-shell:where(.worker-shell) .supplier-preview strong { font-size:15px; }
.worker-shell:where(.worker-shell) .supplier-choice { min-height:56px; padding:10px; }
.worker-shell:where(.worker-shell) .supplier-choice strong { font-size:15px; overflow-wrap:anywhere; }
.worker-shell:where(.worker-shell) .collector-secondary-action { min-height:44px; padding:10px 14px; font-size:15px; border-radius:6px; margin:0 0 16px; }
.worker-shell:where(.worker-shell) .capture-state { flex:initial; padding:0; margin:0; }
.worker-shell:where(.worker-shell) .capture-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.worker-shell:where(.worker-shell) .capture-button { min-height:144px; border-radius:8px; padding:16px 10px; box-shadow:none; }
.worker-shell:where(.worker-shell) .capture-button svg { width:32px; height:32px; margin:0 0 6px; }
.worker-shell:where(.worker-shell) .capture-button strong { font-size:16px; line-height:1.4; }
.worker-shell:where(.worker-shell) .capture-button small { font-size:12px; line-height:1.4; }
.worker-shell:where(.worker-shell) .capture-options:has(> :only-child) { grid-template-columns:minmax(0,1fr); }
.worker-shell:where(.worker-shell) .button { min-height:44px; font-size:15px; border-radius:6px; padding:10px 14px; }
.worker-shell:where(.worker-shell) .stock-collector-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.worker-shell:where(.worker-shell) .collector-actions { gap:12px; }
.worker-shell:where(.worker-shell) .preview-topline { flex-wrap:wrap; gap:10px; margin-block:16px; }
.worker-shell:where(.worker-shell) .preview-add-actions { display:flex; gap:8px; }
.worker-shell:where(.worker-shell) .stock-finish-panel { position:static; margin-top:18px; border:0; border-top:1px solid #ddd; padding:18px 0 0; box-shadow:none; background:transparent; border-radius:0; }
.worker-shell:where(.worker-shell) .flash-stack { position:static; margin-bottom:12px; width:auto; }
.worker-shell:where(.worker-shell) .workspace-header .brand-logo, .worker-shell:where(.worker-shell) .workspace-header .eyebrow, .worker-shell:where(.worker-shell) .workspace-header .header-actions { display:none; }
.worker-shell:where(.worker-shell) .workspace-header h1 { font-size:22px; }
.worker-shell:where(.worker-shell) .workspace-header p { font-size:14px; }
.worker-shell:where(.worker-shell) .archive-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:12px 0 18px; margin-bottom:20px; border-bottom:1px solid #ddd; }
.worker-shell:where(.worker-shell) .archive-summary > div { padding:0; border:0; background:transparent; box-shadow:none; border-radius:0; min-width:0; }
.worker-shell:where(.worker-shell) .archive-summary strong { font-size:24px; }
.worker-shell:where(.worker-shell) .archive-summary span { font-size:12px; }
.worker-shell:where(.worker-shell) :is(a,button,summary,input,select,label[tabindex]):focus-visible { outline:3px solid #ba81a0; outline-offset:3px; }
@media(max-width:360px) { .worker-shell:where(.worker-shell) .app-shell { padding-inline:12px; } :where(.worker-shell) .worker-header { gap:6px; } :where(.worker-shell) .worker-brand { font-size:18px; gap:5px; } :where(.worker-shell) .worker-brand img { width:32px; height:32px; } }
/* Private attendance uses the same compact, single-column worker shell. */
.worker-shell:where(.worker-shell) .personal-attendance { padding: 20px 0; }
.worker-shell:where(.worker-shell) .personal-attendance h1 { font-size: 24px; margin: 0 0 16px; }
.worker-shell:where(.worker-shell) .personal-attendance h2 { font-size: 20px; overflow-wrap: anywhere; }
.worker-shell:where(.worker-shell) .personal-date { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.worker-shell:where(.worker-shell) .personal-date label { grid-column: 1 / -1; }
.worker-shell:where(.worker-shell) .personal-date input { min-width: 0; width: 100%; }
.worker-shell:where(.worker-shell) .personal-result { padding: 24px 0; border-block: 1px solid #dedade; margin: 20px 0; }
.worker-shell:where(.worker-shell) .personal-result .status { max-width: 100%; white-space: normal; font-size: 16px; }
:where(.worker-shell) .worker-tabs > a:only-child { grid-column: 1 / -1; }

/* ===== worker-app — only on: .worker-shell, .manager-app ===== */
/* Phone app look for workers: soft colored cards, burgundy attendance card, dark tab bar. */
.worker-shell:where(.worker-shell, .manager-app), .manager-app:where(.worker-shell, .manager-app) {
  --wa-bg:#f6f3f5; --wa-ink:#211822; --wa-muted:#766d77; --wa-line:#e6dfe5;
  --wa-brand:#79003d; --wa-brand-ink:#fbeaf0; --wa-brand-soft:#ed93b1;
  --wa-amber:#fac775; --wa-amber-ink:#412402; --wa-amber-soft:#faeeda;
  --wa-blue:#b5d4f4; --wa-blue-ink:#042c53;
  --wa-teal:#9fe1cb; --wa-teal-ink:#04342c;
  --wa-lavender:#cecbf6; --wa-lavender-ink:#26215c;
  --wa-pink:#f4c0d1; --wa-pink-ink:#4b1528;
  --wa-dark:#241d24; --wa-radius:24px;
  background:var(--wa-bg);
}
.worker-shell:where(.worker-shell, .manager-app) .app-shell { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
.worker-shell:where(.worker-shell, .manager-app) .worker-header { margin-bottom:14px; }
.worker-shell:where(.worker-shell, .manager-app) .worker-language { border-radius:999px; padding-inline:14px; border-color:var(--wa-line); }
:where(.worker-shell, .manager-app) .worker-brand { text-decoration:none; }

/* Bottom tab bar */
:where(.worker-shell, .manager-app) .wa-tabbar { position:fixed; z-index:50; inset-inline:max(14px, calc(50% - 280px)); bottom:max(14px, env(safe-area-inset-bottom)); display:flex; justify-content:space-around; gap:4px; padding:7px; background:var(--wa-dark); border-radius:999px; box-shadow:0 14px 30px #21182233; }
:where(.worker-shell, .manager-app) .wa-tabbar a { flex:1; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#cfc6cd; text-decoration:none; font-size:11px; font-weight:600; border-radius:999px; }
:where(.worker-shell, .manager-app) .wa-tabbar svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:where(.worker-shell, .manager-app) .wa-tabbar a[aria-current] { color:#72243e; background:var(--wa-brand-ink); }

/* Home */
:where(.worker-shell, .manager-app) .wa-home { display:grid; gap:16px; padding-top:4px; }
:where(.worker-shell, .manager-app) .wa-hello { display:flex; align-items:center; gap:12px; }
:where(.worker-shell, .manager-app) .wa-hello-text { flex:1; min-width:0; }
:where(.worker-shell, .manager-app) .wa-hello h1 { margin:0; font-size:19px; color:var(--wa-ink); overflow-wrap:anywhere; }
:where(.worker-shell, .manager-app) .wa-hello p { margin:2px 0 0; font-size:13px; color:var(--wa-muted); }
:where(.worker-shell, .manager-app) .wa-avatar { position:relative; flex-shrink:0; width:46px; height:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--wa-pink); color:#72243e; font-weight:800; font-size:18px; text-decoration:none; }
:where(.worker-shell, .manager-app) .wa-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
:where(.worker-shell, .manager-app) .wa-round { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; border:1px solid var(--wa-line); background:#fff; color:var(--wa-brand); font-weight:800; text-decoration:none; }

:where(.worker-shell, .manager-app) .wa-hero { background:var(--wa-brand); color:var(--wa-brand-ink); border-radius:var(--wa-radius); padding:18px; }
:where(.worker-shell, .manager-app) .wa-hero h2 { margin:12px 0 2px; font-size:25px; line-height:1.2; color:#fff; }
:where(.worker-shell, .manager-app) .wa-hero p { margin:0; color:var(--wa-brand-soft); font-size:14px; }
:where(.worker-shell, .manager-app) .wa-chip { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--wa-brand-ink); color:#72243e; font-size:12px; font-weight:700; }
:where(.worker-shell, .manager-app) .wa-hero-actions { display:flex; gap:10px; margin-top:16px; }
:where(.worker-shell, .manager-app) .wa-btn { flex:1; min-height:48px; display:grid; place-items:center; padding:10px; border-radius:16px; font-weight:800; font-size:15px; text-decoration:none; text-align:center; }
:where(.worker-shell, .manager-app) .wa-btn--light { background:var(--wa-brand-ink); color:#72243e; }
:where(.worker-shell, .manager-app) .wa-btn--ghost { border:1px solid var(--wa-brand-soft); color:var(--wa-brand-ink); }

:where(.worker-shell, .manager-app) .wa-week { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
:where(.worker-shell, .manager-app) .wa-day { display:grid; justify-items:center; gap:2px; padding:8px 0 7px; min-width:0; overflow:hidden; white-space:nowrap; border:1px solid var(--wa-line); border-radius:18px; background:#fff; font-size:11px; color:var(--wa-muted); }
:where(.worker-shell, .manager-app) .wa-day b { font-size:16px; color:var(--wa-ink); }
:where(.worker-shell, .manager-app) .wa-day i { width:6px; height:6px; border-radius:50%; background:transparent; }
:where(.worker-shell, .manager-app) .wa-day[data-mark=present] i { background:#1d9e75; }
:where(.worker-shell, .manager-app) .wa-day[data-mark=check] i { background:#ef9f27; }
:where(.worker-shell, .manager-app) .wa-day.is-today { background:var(--wa-dark); border-color:var(--wa-dark); color:#cfc6cd; }
:where(.worker-shell, .manager-app) .wa-day.is-today b { color:#fff; }
:where(.worker-shell, .manager-app) .wa-day.is-today[data-mark=none] i { background:#5f5e5a; }
:where(.worker-shell, .manager-app) .wa-day.is-future { opacity:.55; }

:where(.worker-shell, .manager-app) .wa-section { margin:6px 0 -4px; font-size:18px; color:var(--wa-ink); }
:where(.worker-shell, .manager-app) .wa-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
:where(.worker-shell, .manager-app) .wa-card { display:flex; flex-direction:column; gap:4px; min-height:104px; padding:16px; border-radius:var(--wa-radius); text-decoration:none; }
:where(.worker-shell, .manager-app) .wa-card--tall { grid-row:span 2; min-height:220px; }
:where(.worker-shell, .manager-app) .wa-card strong { margin-top:10px; font-size:20px; line-height:1.2; }
:where(.worker-shell, .manager-app) .wa-card b { font-size:28px; line-height:1.1; }
:where(.worker-shell, .manager-app) .wa-card small { font-size:13px; font-weight:600; }
:where(.worker-shell, .manager-app) .wa-card .wa-chip { align-self:flex-start; }
:where(.worker-shell, .manager-app) .wa-fab { margin-top:auto; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; }
:where(.worker-shell, .manager-app) .wa-fab svg { width:22px; height:22px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:where(.worker-shell, .manager-app) .wa-card--amber { background:var(--wa-amber); color:var(--wa-amber-ink); }
:where(.worker-shell, .manager-app) .wa-card--amber .wa-chip { background:var(--wa-amber-soft); color:#633806; }
:where(.worker-shell, .manager-app) .wa-card--amber .wa-fab { background:var(--wa-amber-ink); } :where(.worker-shell, .manager-app) .wa-card--amber .wa-fab svg { stroke:var(--wa-amber-soft); }
:where(.worker-shell, .manager-app) .wa-card--blue { background:var(--wa-blue); color:var(--wa-blue-ink); }
:where(.worker-shell, .manager-app) .wa-card--teal { background:var(--wa-teal); color:var(--wa-teal-ink); }
:where(.worker-shell, .manager-app) .wa-card--teal .wa-chip { background:#e1f5ee; color:#085041; }
:where(.worker-shell, .manager-app) .wa-card--teal .wa-fab { background:var(--wa-teal-ink); } :where(.worker-shell, .manager-app) .wa-card--teal .wa-fab svg { stroke:#e1f5ee; }
:where(.worker-shell, .manager-app) .wa-card--lavender { background:var(--wa-lavender); color:var(--wa-lavender-ink); }
:where(.worker-shell, .manager-app) .wa-card--pink { background:var(--wa-pink); color:var(--wa-pink-ink); }
:where(.worker-shell, .manager-app) .wa-card:active, :where(.worker-shell, .manager-app) .wa-btn:active, :where(.worker-shell, .manager-app) .wa-list a:active { transform:scale(.98); }

/* Profile */
:where(.worker-shell, .manager-app) .wa-profile { display:grid; justify-items:center; text-align:center; padding:12px 0 4px; }
:where(.worker-shell, .manager-app) .wa-avatar--big { width:88px; height:88px; font-size:34px; }
:where(.worker-shell, .manager-app) .wa-profile h1 { margin:12px 0 0; font-size:22px; overflow-wrap:anywhere; }
:where(.worker-shell, .manager-app) .wa-profile p { margin:2px 0 0; color:var(--wa-muted); font-size:14px; }
:where(.worker-shell, .manager-app) .wa-list { list-style:none; margin:0; padding:6px; background:#fff; border-radius:var(--wa-radius); border:1px solid var(--wa-line); }
:where(.worker-shell, .manager-app) .wa-list li + li { border-top:1px solid var(--wa-line); }
:where(.worker-shell, .manager-app) .wa-list a { display:flex; align-items:center; gap:12px; padding:12px 10px; color:var(--wa-ink); text-decoration:none; }
:where(.worker-shell, .manager-app) .wa-list-icon { width:42px; height:42px; flex-shrink:0; display:grid; place-items:center; border-radius:14px; min-height:0; padding:0; }
:where(.worker-shell, .manager-app) .wa-list-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:where(.worker-shell, .manager-app) .wa-list-text { flex:1; min-width:0; display:grid; }
:where(.worker-shell, .manager-app) .wa-list-text strong { font-size:15px; }
:where(.worker-shell, .manager-app) .wa-list-text small { color:var(--wa-muted); font-size:13px; }
:where(.worker-shell, .manager-app) .wa-state { width:10px; height:10px; border-radius:50%; }
:where(.worker-shell, .manager-app) .wa-state--ok { background:#1d9e75; } :where(.worker-shell, .manager-app) .wa-state--wait { background:#ef9f27; }
:where(.worker-shell, .manager-app) .wa-logout button { width:100%; min-height:50px; border:1px solid #f0c4c4; background:#fff; color:#a32d2d; border-radius:16px; font:inherit; font-weight:800; cursor:pointer; }
:where(.worker-shell, .manager-app) .wa-note { margin:0; text-align:center; font-size:12px; color:var(--wa-muted); }

/* Existing worker pages pick up the same softer shapes. */
.worker-shell:where(.worker-shell, .manager-app) .att-badge, .worker-shell:where(.worker-shell, .manager-app) .document-fields, .worker-shell:where(.worker-shell, .manager-app) .personal-result { border-radius:var(--wa-radius); }
.worker-shell:where(.worker-shell, .manager-app) .att-badge { border-top:0; box-shadow:none; border:1px solid var(--wa-line); }
.worker-shell:where(.worker-shell, .manager-app) .att-direction-actions .button { min-height:56px; border-radius:16px; font-size:17px; }
.worker-shell:where(.worker-shell, .manager-app) .att-times { background:var(--wa-bg); border-radius:18px; padding:10px; }
.worker-shell:where(.worker-shell, .manager-app) .capture-button { border-radius:var(--wa-radius); }
.worker-shell:where(.worker-shell, .manager-app) .capture-button--upload { background:var(--wa-amber-soft); border-color:var(--wa-amber); }
.worker-shell:where(.worker-shell, .manager-app) .worker-tabs { border:0; background:#fff; border-radius:999px; padding:4px; gap:4px; border:1px solid var(--wa-line); }
.worker-shell:where(.worker-shell, .manager-app) .worker-tabs a { min-height:42px; border:0; border-radius:999px; }
.worker-shell:where(.worker-shell, .manager-app) .worker-tabs a[aria-current] { background:var(--wa-brand); color:#fff; }
.worker-shell:where(.worker-shell, .manager-app) .button { border-radius:14px; }
@media (min-width:600px) { :where(.worker-shell, .manager-app) .wa-hero h2 { font-size:28px; } }

/* Manager phone screen (company dashboard in the app). */
.manager-app:where(.worker-shell, .manager-app) { background:var(--wa-bg); }
.manager-app:where(.worker-shell, .manager-app) .app-shell { max-width:580px; margin:0 auto; padding:16px 18px calc(110px + env(safe-area-inset-bottom)); }
.manager-app:where(.worker-shell, .manager-app) .mobile-management { display:flex; gap:8px; justify-content:flex-end; padding:10px 18px 0; max-width:580px; margin:0 auto; }
.manager-app:has(.wa-tabbar):where(.worker-shell, .manager-app) .mobile-management > a:first-child, .manager-app:has(.wa-tabbar):where(.worker-shell, .manager-app) .mobile-management form { display:none; }
.manager-app:where(.worker-shell, .manager-app) .mobile-management a { padding:8px 14px; border:1px solid var(--wa-line); border-radius:999px; background:#fff; color:var(--wa-brand); font-weight:700; text-decoration:none; font-size:14px; }
:where(.worker-shell, .manager-app) .wa-stats .wa-card { min-height:96px; }
:where(.worker-shell, .manager-app) .wa-card--coral { background:#f5c4b3; color:#4a1b0c; }
:where(.worker-shell, .manager-app) .wa-count { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 7px; margin-inline-start:6px; border-radius:999px; background:var(--wa-brand); color:#fff; font-size:13px; vertical-align:middle; }
:where(.worker-shell, .manager-app) .wa-todo { min-height:0; gap:6px; color:inherit; }
:where(.worker-shell, .manager-app) .wa-todo-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
:where(.worker-shell, .manager-app) .wa-todo-head strong { margin:0; font-size:16px; }
:where(.worker-shell, .manager-app) .wa-todo .wa-hero-actions { margin-top:6px; }
:where(.worker-shell, .manager-app) .wa-todo .wa-hero-actions form { flex:1; display:flex; }
:where(.worker-shell, .manager-app) .wa-card--lavender.wa-todo { color:var(--wa-lavender-ink); }
:where(.worker-shell, .manager-app) .wa-chip--lavender { background:#eeedfe; color:#3c3489; }
:where(.worker-shell, .manager-app) .wa-btn { border:0; font:inherit; font-weight:800; cursor:pointer; width:100%; }
:where(.worker-shell, .manager-app) .wa-btn--dark { background:var(--wa-lavender-ink); color:#eeedfe; }
:where(.worker-shell, .manager-app) .wa-btn--outline { background:transparent; border:1px solid currentColor; color:inherit; }
:where(.worker-shell, .manager-app) .wa-btn--danger { background:#fff; border:1px solid #f0c4c4; color:#a32d2d; }
:where(.worker-shell, .manager-app) .wa-empty { margin:0; padding:14px; text-align:center; color:var(--wa-muted); font-size:14px; background:#fff; border-radius:18px; border:1px dashed var(--wa-line); }
:where(.worker-shell, .manager-app) .wa-list li > .wa-empty { border:0; }
:where(.worker-shell, .manager-app) .wa-list b { font-size:14px; color:var(--wa-muted); }
:where(.worker-shell, .manager-app) .wa-avatar--small { width:40px; height:40px; font-size:15px; }
:where(.worker-shell, .manager-app) .wa-account-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
:where(.worker-shell, .manager-app) .wa-account-row form { display:flex; }
:where(.worker-shell, .manager-app) .wa-manager .wa-section { margin-top:10px; }
:where(.worker-shell, .manager-app) .wa-review { display:grid; gap:8px; margin-top:4px; }
:where(.worker-shell, .manager-app) .wa-review input { min-height:42px; border-radius:12px; border:1px solid #e9c98a; padding:8px 12px; font:inherit; background:#fffaf0; }
:where(.worker-shell, .manager-app) .wa-btn--amber { background:var(--wa-amber-ink); color:var(--wa-amber-soft); }
:where(.worker-shell, .manager-app) .wa-card--amber.wa-todo { color:var(--wa-amber-ink); }
:where(.worker-shell, .manager-app) .wa-more { text-align:end; font-weight:800; color:var(--wa-brand); text-decoration:none; font-size:14px; }
:where(.worker-shell, .manager-app) .wa-note a { color:var(--wa-brand); font-weight:700; }
:where(.worker-shell, .manager-app) .wa-delete button { width:100%; background:none; border:0; color:#a32d2d; font:inherit; font-size:13px; text-decoration:underline; cursor:pointer; padding:8px; }
:where(.worker-shell, .manager-app) .wa-setup { min-height:0; gap:8px; color:var(--wa-lavender-ink); }
:where(.worker-shell, .manager-app) .wa-setup ol { margin:0; padding-inline-start:20px; display:grid; gap:6px; }
:where(.worker-shell, .manager-app) .wa-setup li a { color:inherit; font-weight:800; }
:where(.worker-shell, .manager-app) .wa-setup li.is-done a { text-decoration:line-through; opacity:.6; }
:where(.worker-shell, .manager-app) .wa-share { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--wa-line); border-radius:var(--wa-radius); padding:14px 16px; }
:where(.worker-shell, .manager-app) .wa-share div { display:grid; }
:where(.worker-shell, .manager-app) .wa-share small { color:var(--wa-muted); font-weight:600; }
:where(.worker-shell, .manager-app) .wa-share b { font-size:22px; color:var(--wa-brand); }
:where(.worker-shell, .manager-app) .wa-btn--brand { background:var(--wa-brand); color:#fff; width:auto; padding-inline:18px; }
:where(.worker-shell, .manager-app) .wa-card--coral.wa-todo { color:#4a1b0c; }
:where(.worker-shell, .manager-app) .wa-switch-row { display:flex; align-items:center; gap:12px; padding:12px 10px; cursor:pointer; }
:where(.worker-shell, .manager-app) .wa-toggle { appearance:none; width:50px; height:30px; border-radius:999px; background:#e0d6dc; position:relative; flex-shrink:0; cursor:pointer; transition:background .2s; }
:where(.worker-shell, .manager-app) .wa-toggle::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:inset-inline-start .2s; }
:where(.worker-shell, .manager-app) .wa-toggle:checked { background:#1d9e75; }
:where(.worker-shell, .manager-app) .wa-toggle:checked::after { inset-inline-start:23px; }
:where(.worker-shell, .manager-app) .wa-toggle:disabled { opacity:.5; }

/* ---------- Illustrations and richer cards (2026-10-08) ---------- */
:where(.worker-shell, .manager-app) .wa-hero { position:relative; overflow:hidden; }
:where(.worker-shell, .manager-app) .wa-hero > :not(.wa-hero-art) { position:relative; z-index:1; }
:where(.worker-shell, .manager-app) .wa-hero-art { position:absolute; inset-inline-end:-8px; top:-6px; opacity:.95; pointer-events:none; }
:where(.worker-shell, .manager-app) .wa-hero h2, :where(.worker-shell, .manager-app) .wa-hero p { max-width:calc(100% - 70px); }
:where(.worker-shell, .manager-app) .wa-card--tall { position:relative; overflow:hidden; }
:where(.worker-shell, .manager-app) .wa-card-art { position:absolute; inset-inline-end:-8px; bottom:4px; pointer-events:none; }
:where(.worker-shell, .manager-app) .wa-card--tall > :not(.wa-card-art) { position:relative; z-index:1; }
:where(.worker-shell, .manager-app) .wa-month { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); background:#fff; border:1px solid var(--wa-line); border-radius:var(--wa-radius); padding:12px 6px; }
:where(.worker-shell, .manager-app) .wa-month > div { display:grid; justify-items:center; gap:2px; text-align:center; }
:where(.worker-shell, .manager-app) .wa-month > div + div { border-inline-start:1px solid var(--wa-line); }
:where(.worker-shell, .manager-app) .wa-month b { font-size:20px; color:var(--wa-ink); font-variant-numeric:tabular-nums; }
:where(.worker-shell, .manager-app) .wa-month small { font-size:12px; color:var(--wa-muted); font-weight:600; }
:where(.worker-shell, .manager-app) .wa-dot { width:10px; height:10px; border-radius:50%; }
:where(.worker-shell, .manager-app) .wa-dot--teal { background:#1d9e75; } :where(.worker-shell, .manager-app) .wa-dot--lavender { background:#7f77dd; } :where(.worker-shell, .manager-app) .wa-dot--coral { background:#d85a30; }
:where(.worker-shell, .manager-app) svg.tk-illus { display:block; width:auto; height:auto; filter:drop-shadow(0 6px 10px #2118221f); }

/* ---------- Manager phone screen: faces, weekly chart, rate ring ---------- */
:where(.worker-shell, .manager-app) .wa-faces { display:flex; margin-top:8px; }
:where(.worker-shell, .manager-app) .wa-face { position:relative; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
  background:#fff; color:var(--wa-teal-ink); font-size:12px; font-weight:800; border:2px solid var(--wa-teal); margin-inline-start:-8px; }
:where(.worker-shell, .manager-app) .wa-face:first-child { margin-inline-start:0; }
:where(.worker-shell, .manager-app) .wa-face img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
:where(.worker-shell, .manager-app) .wa-face--more { background:var(--wa-teal-ink); color:#fff; }
:where(.worker-shell, .manager-app) .wa-chart-card { background:#fff; border:1px solid var(--wa-line); border-radius:var(--wa-radius); padding:16px; display:grid; gap:14px; }
:where(.worker-shell, .manager-app) .wa-chart-card header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
:where(.worker-shell, .manager-app) .wa-chart-card header div { display:grid; }
:where(.worker-shell, .manager-app) .wa-chart-card header strong { font-size:16px; }
:where(.worker-shell, .manager-app) .wa-chart-card header small { color:var(--wa-muted); font-size:12.5px; }
:where(.worker-shell, .manager-app) .wa-ring { --rate:0; width:78px; height:78px; border-radius:50%; display:grid; place-content:center; text-align:center; flex-shrink:0;
  background:radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(#1d9e75 calc(var(--rate) * 1%), #e1f5ee 0); }
:where(.worker-shell, .manager-app) .wa-ring b { font-size:17px; line-height:1; }
:where(.worker-shell, .manager-app) .wa-ring small { font-size:9px; color:var(--wa-muted); max-width:56px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:where(.worker-shell, .manager-app) .wa-bars { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; align-items:end; height:130px; }
:where(.worker-shell, .manager-app) .wa-bar { height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; }
:where(.worker-shell, .manager-app) .wa-bar i { width:100%; max-width:26px; border-radius:10px; background:#cecbf6; }
:where(.worker-shell, .manager-app) .wa-bar.is-today i { background:#79003d; }
:where(.worker-shell, .manager-app) .wa-bar-value { font-size:11px; font-weight:800; color:var(--wa-muted); }
:where(.worker-shell, .manager-app) .wa-bar small { font-size:11px; color:var(--wa-muted); font-weight:700; }
:where(.worker-shell, .manager-app) .wa-bar.is-today small, :where(.worker-shell, .manager-app) .wa-bar.is-today .wa-bar-value { color:#79003d; }

/* Page header inside the worker app: back to home, page title, company, language. */
.worker-shell:where(.worker-shell, .manager-app) .wa-pagehead { display:flex; align-items:center; gap:12px; margin:4px 0 16px; }
:where(.worker-shell, .manager-app) .wa-pagehead-text { flex:1; min-width:0; display:grid; gap:2px; }
:where(.worker-shell, .manager-app) .wa-pagehead-text small { display:flex; align-items:center; gap:6px; color:var(--wa-muted, #766d77); font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.worker-shell, .manager-app) .wa-pagehead-text small img { width:18px; height:18px; object-fit:contain; border-radius:4px; }
:where(.worker-shell, .manager-app) .wa-pagehead-text strong { font-size:24px; line-height:1.15; font-weight:800; color:var(--wa-ink, #1f1a20); }
:where(.worker-shell, .manager-app) .wa-round--back svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
[dir=rtl] :where(.worker-shell, .manager-app) .wa-round--back svg { transform:scaleX(-1); }
:where(.worker-shell, .manager-app) .wa-state--off { background:#d9ccd4; }
.tk.tk:where(.worker-shell, .manager-app) input.wa-toggle[type=checkbox] { width:50px; height:30px; min-width:50px; min-height:0; padding:0; margin:0; border:0; border-radius:999px; }
/* Manager home: language sits in the greeting, so the top strip is not needed. */
.manager-app:has(.wa-tabbar):where(.worker-shell, .manager-app) .mobile-management { display:none; }
:where(.worker-shell, .manager-app) .wa-hello .wa-round + .wa-round { margin-inline-start:-4px; }
.tk.tk.worker-shell:where(.worker-shell, .manager-app) .wa-pagehead .worker-language { padding:0; border-radius:50%; min-height:0; }

/* First-day welcome: three steps on one screen. */
:where(.worker-shell, .manager-app) .wa-steps { list-style:none; margin:16px 0; padding:0; display:grid; gap:12px; }
:where(.worker-shell, .manager-app) .wa-step { background:#fff; border:1px solid var(--wa-line); border-radius:var(--wa-radius); padding:16px; display:grid; gap:10px; }
:where(.worker-shell, .manager-app) .wa-step header { display:flex; align-items:center; gap:12px; }
:where(.worker-shell, .manager-app) .wa-step-dot { width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--wa-line); color:var(--wa-ink); font-weight:800; }
:where(.worker-shell, .manager-app) .wa-step.is-current { border-color:var(--wa-brand); box-shadow:0 0 0 3px var(--wa-brand-ink); }
:where(.worker-shell, .manager-app) .wa-step.is-current .wa-step-dot { background:var(--wa-brand); color:#fff; }
:where(.worker-shell, .manager-app) .wa-step.is-done .wa-step-dot { background:#1d9e75; color:#fff; }
:where(.worker-shell, .manager-app) .wa-step p { margin:0; color:var(--wa-muted); }
:where(.worker-shell, .manager-app) .wa-step .stack-form { display:grid; gap:10px; }
:where(.worker-shell, .manager-app) .wa-step .stack-form label { display:grid; gap:4px; font-weight:600; font-size:14px; }
:where(.worker-shell, .manager-app) .wa-welcome-done { display:flex; justify-content:center; min-height:54px; border-radius:999px; }

/* ===== legacy-workspace — only on: .management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"] ===== */
/* Keep legacy work surfaces aligned with the new navigation and administration. */
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) {
  --radius:8px; --radius-sm:6px;
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) :is(input,select,textarea,button,label,form,section,article) { min-width:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) :is(.button,.export-menu summary) {
  min-height:44px; padding:10px 16px; border-radius:6px; font-size:15px;
  font-weight:600; line-height:1.4; white-space:normal; text-align:center;
  box-shadow:none; max-width:100%;
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .button:disabled { cursor:not-allowed; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) :is(.button--quiet,.button--outline):hover:not(:disabled) { background:#f4edf1; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .button--primary:hover:not(:disabled) { background:#610031; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) :is(input:not([type=hidden]):not([type=checkbox]),select,textarea) {
  min-height:44px; padding:10px 12px; border:1px solid #d5d0d5;
  border-radius:6px; color:#251f27; background:#fff; font-size:16px; max-width:100%;
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) input[type=file] { width:100%; font-size:14px; padding:6px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) input::file-selector-button {
  border:0; border-radius:4px; padding:8px 10px; margin-inline-end:10px;
  background:#f0edf0; color:#493342; font:inherit; cursor:pointer;
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) label { text-align:start; font-size:14px; font-weight:600; line-height:1.5; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) :is(h2,h3) { font-size:20px; line-height:1.5; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) :is(.admin-panel,.document-grid-panel,.document-detail__meta) {
  border:0; border-radius:0; background:transparent; box-shadow:none;
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-panel { padding:0; margin-block:0 28px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stack-form { text-align:start; gap:16px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stack-form label { display:grid; gap:6px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stack-form > .button { justify-self:start; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .panel-title-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-block:20px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .panel-title-row h2 { margin:0; flex:1; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-search-form { width:min(100%,440px); grid-template-columns:minmax(0,1fr) auto; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .archive-filters { border:0; border-block:1px solid #ded9df; background:transparent; border-radius:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .filter-heading { padding-inline:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .filter-body { padding:16px 0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .filter-actions { display:flex; flex-wrap:wrap; gap:10px; grid-column:1 / -1; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .file-toolbar { padding:16px 0; border-bottom:1px solid #ded9df; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .file-toolbar h2 { font-size:19px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .file-toolbar > span { flex-shrink:0; white-space:nowrap; font-size:13px; }
.document-page:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .page-jump-nav { inset:auto auto 16px 50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); overflow-x:auto; border-radius:8px; gap:6px; padding:6px; }
.document-page:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .page-jump-nav a { flex:0 0 40px; width:40px; height:40px; border-radius:5px; }
.document-page:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-page-card { scroll-margin-top:80px; }
.document-page:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .app-shell { padding-bottom:100px; }
.document-page:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .read-dialog__body { text-align:start; direction:inherit; font-size:20px; font-weight:400; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-grid {
  grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); padding:20px 0; gap:18px;
}
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card { padding:12px; gap:12px; box-shadow:none; border-radius:8px; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card__link { gap:12px; align-content:start; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card__body { gap:6px; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card__body strong { font-size:18px; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card__body :is(span,small) { font-size:14px; font-weight:400; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card__body .document-note { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; overflow-wrap:anywhere; }
:is(.management-shell,.review-page.worker-shell):where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card .status { border-radius:5px; padding:5px 9px; font-size:12px; min-height:0; align-self:start; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-delete { position:static; width:auto; min-height:40px; border-radius:6px; font-size:14px; padding:8px 12px; background:#fff; color:#ac2424; border:1px solid #edcccc; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-card > form { border-top:1px solid #ece7ec; padding-top:10px; text-align:end; align-self:end; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-detail { grid-template-columns:minmax(240px,310px) minmax(0,1fr); gap:24px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-detail__meta { top:88px; padding:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .inspector-meta > div { background:#fff; border-radius:6px; padding:12px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .inspector-meta :is(dt,dd) { font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-page-card { box-shadow:none; border-radius:8px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-page-card header { flex-wrap:wrap; gap:10px; padding:12px 16px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-page-card header h2 { font-size:17px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .export-menu__content { inset-inline-end:0; inset-inline-start:auto; min-width:220px; max-width:calc(100vw - 32px); gap:2px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .export-menu__content a { font-size:14px; font-weight:500; min-height:44px; background:transparent; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .export-menu__content a:hover { background:#f4edf1; color:#79003d; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-summary { display:flex; flex-wrap:wrap; gap:24px; padding-block:0 20px; border-bottom:1px solid #ded9df; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-summary > div { min-width:100px; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; color:#251f27; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-summary strong { font-size:26px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-summary span { font-size:14px; color:#6c626e; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-date-filter { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-date-filter label { display:grid; gap:6px; width:min(100%,280px); }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-table { font-size:14px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-table :is(th,td) { padding:14px; text-align:start; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .system-stock-form { grid-template-columns:minmax(110px,180px) auto; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-create { border-block:1px solid #ded9df; padding:16px 0; margin-bottom:28px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-create > summary { cursor:pointer; color:#79003d; font-size:16px; font-weight:600; padding:8px 0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-create .stack-form { max-width:800px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-create .product-image-field { grid-column:1 / -1; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-product-card { display:block; padding:18px; border-radius:8px; background:#fff; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-identity { display:flex; gap:14px; align-items:center; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-identity .supplier-avatar { width:56px; height:56px; flex-shrink:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-identity strong { font-size:18px; overflow-wrap:anywhere; white-space:normal; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-identity small { font-size:14px; line-height:1.6; font-weight:400; overflow-wrap:anywhere; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-editor { margin-top:14px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-editor > summary { color:#79003d; cursor:pointer; font-size:15px; font-weight:600; padding:10px 0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-editor[open] > summary { border-bottom:1px solid #e7e1e7; margin-bottom:16px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-product-name-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0; margin:0; border:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-product-name-form label { display:grid; gap:6px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-product-name-form > button { justify-self:start; grid-column:1 / -1; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-editor .supplier-logo-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding-block:18px; margin-top:18px; border-block:1px solid #e7e1e7; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .supplier-logo-form label { display:grid; gap:6px; flex:1 1 240px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-danger-actions { display:flex; flex-wrap:wrap; align-items:start; gap:12px; margin-top:18px; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-danger-actions .supplier-delete-form { margin:0; }
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-danger-actions small { display:block; max-width:280px; margin-top:6px; font-size:13px; color:#706673; }
@media(max-width:1050px) { .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-detail { grid-template-columns:minmax(0,1fr); } .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-detail__meta { position:static; } }
@media(max-width:600px) {
  .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-create .stack-form, .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .stock-product-name-form { grid-template-columns:minmax(0,1fr); }
  .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .panel-title-row { align-items:stretch; }
  .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .panel-title-row .admin-search-form { width:100%; }
  .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .document-page-card header > div { display:flex; flex-wrap:wrap; gap:8px; }
  .management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .product-editor .supplier-logo-form button { width:100%; }
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .admin-action-form .account-attendance-permission {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
}
.management-shell:where(.management-shell, [data-page="main.collector_today"], [data-page="main.document_detail"]) .account-attendance-permission input[type=checkbox] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  accent-color: #79003d;
}

/* ===== taakid-ui ===== */
/* Taakid design system — one look for every page (website, worker screens, mobile apps).
   Loaded last; `.tk.tk` raises priority over the older page stylesheets without !important. */
.tk {
  --tk-brand:#79003d; --tk-brand-dark:#5a002d; --tk-brand-soft:#fbeaf0; --tk-brand-ink:#72243e;
  --tk-bg:#f6f3f5; --tk-surface:#fff; --tk-line:#ebe3e8; --tk-line-strong:#d9ccd4;
  --tk-ink:#211822; --tk-muted:#766d77;
  --tk-amber:#fac775; --tk-amber-soft:#faeeda; --tk-amber-ink:#412402;
  --tk-blue:#b5d4f4; --tk-blue-soft:#e6f1fb; --tk-blue-ink:#042c53;
  --tk-teal:#9fe1cb; --tk-teal-soft:#e1f5ee; --tk-teal-ink:#04342c;
  --tk-lavender:#cecbf6; --tk-lavender-soft:#eeedfe; --tk-lavender-ink:#26215c;
  --tk-coral:#f5c4b3; --tk-coral-soft:#faece7; --tk-coral-ink:#4a1b0c;
  --tk-green:#1d9e75; --tk-red:#a32d2d; --tk-red-soft:#fcebeb;
  --tk-radius:20px; --tk-radius-sm:14px; --tk-shadow:0 1px 2px #2118220a, 0 8px 24px #2118220d;
}
.tk.tk { background:var(--tk-bg); color:var(--tk-ink); }
.tk.tk.management-shell { background:var(--tk-bg); }

/* ---------- Buttons ---------- */
.tk.tk .button, .tk.tk button.button, .tk.tk a.button {
  min-height:44px; padding:10px 18px; border-radius:var(--tk-radius-sm); border:1px solid transparent;
  font-weight:700; font-size:15px; line-height:1.2; box-shadow:none; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .15s, border-color .15s, color .15s, transform .1s;
}
.tk.tk .button:active { transform:scale(.98); }
.tk.tk .button--primary { background:var(--tk-brand); color:#fff; }
.tk.tk .button--primary:hover { background:var(--tk-brand-dark); }
.tk.tk .button--secondary { background:var(--tk-amber); color:var(--tk-amber-ink); }
.tk.tk .button--secondary:hover { background:#f5b955; }
.tk.tk .button--quiet { background:var(--tk-surface); color:var(--tk-brand); border-color:var(--tk-line-strong); }
.tk.tk .button--quiet:hover { background:var(--tk-brand-soft); border-color:#e8bfd0; }
.tk.tk .button--outline { background:transparent; color:var(--tk-brand); border-color:var(--tk-brand); }
.tk.tk .button--outline:hover { background:var(--tk-brand-soft); }
.tk.tk .button--danger { background:var(--tk-red); color:#fff; }
.tk.tk .button--danger-quiet { background:var(--tk-red-soft); color:var(--tk-red); border-color:#f3cccc; }
.tk.tk .button--danger-quiet:hover { background:#f9dada; }
.tk.tk .button:disabled, .tk.tk .button[aria-disabled=true] { opacity:.5; cursor:not-allowed; transform:none; }
.tk.tk .icon-button { border-radius:12px; }

/* ---------- Fields ---------- */
.tk.tk input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
.tk.tk select, .tk.tk textarea {
  min-height:46px; padding:10px 14px; border:1px solid var(--tk-line-strong); border-radius:12px;
  background:#fff; color:var(--tk-ink); font-size:15px; box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
.tk.tk textarea { min-height:84px; }
.tk.tk :is(input,select,textarea):focus { outline:none; border-color:var(--tk-brand); box-shadow:0 0 0 4px #79003d1f; }
.tk.tk label { color:var(--tk-ink); }
.tk.tk input[type=checkbox], .tk.tk input[type=radio] { accent-color:var(--tk-brand); width:18px; height:18px; }

/* ---------- Page headers ---------- */
.tk.tk :is(.workspace-header, .att-header) { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.tk.tk :is(.workspace-header, .att-header) h1 { font-size:clamp(22px, 3vw, 28px); font-weight:800; color:var(--tk-ink); margin:0; }
.tk.tk .workspace-title p { color:var(--tk-muted); margin:4px 0 0; }
.tk.tk .att-header .att-badge-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0; }

/* ---------- Cards & panels ---------- */
.tk.tk :is(.admin-panel, .att-roster, .insights-card, .document-grid-panel, .document-detail__meta, .settings-card, .auth-card) {
  background:var(--tk-surface); border:1px solid var(--tk-line); border-radius:var(--tk-radius); box-shadow:var(--tk-shadow);
}
.tk.tk.management-shell .admin-panel, .tk.tk .att-roster { padding:22px; margin-block:0 22px; }
.tk.tk .admin-panel h2, .tk.tk .att-roster h2 { font-size:19px; font-weight:800; }
.tk.tk .notice { background:var(--tk-amber-soft); color:#633806; border:0; border-radius:var(--tk-radius-sm); padding:12px 16px; }
.tk.tk .muted, .tk.tk .form-hint, .tk.tk .field-hint { color:var(--tk-muted); }

/* ---------- Colored metric tiles (admin, archive, attendance) ---------- */
.tk.tk :is(.metric-grid, .archive-summary, .att-summary, .insights-stats) { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:24px; border:0; padding:0; background:transparent; }
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article) {
  display:grid; gap:6px; align-content:start; padding:18px; border:0; border-radius:var(--tk-radius); box-shadow:none;
  text-decoration:none; min-height:104px; background:var(--tk-blue); color:var(--tk-blue-ink);
}
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article) :is(strong) { font-size:30px; line-height:1.05; font-weight:800; color:inherit; order:-1; }
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article) :is(span) { font-size:14px; font-weight:700; color:inherit; opacity:.9; margin:0; }
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article):nth-child(5n+2) { background:var(--tk-teal); color:var(--tk-teal-ink); }
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article):nth-child(5n+3) { background:var(--tk-amber); color:var(--tk-amber-ink); }
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article):nth-child(5n+4) { background:var(--tk-lavender); color:var(--tk-lavender-ink); }
.tk.tk :is(.metric-grid > a, .archive-summary > div, .att-summary > div, .insights-stats > article):nth-child(5n+5) { background:var(--tk-coral); color:var(--tk-coral-ink); }
.tk.tk .metric-grid > a:hover { transform:translateY(-2px); transition:transform .15s; }
.tk.tk .att-summary .att-present strong, .tk.tk .att-summary .att-absent strong { color:inherit; }

/* Key/value facts */
.tk.tk .admin-facts { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:4px 18px; }
.tk.tk .admin-facts > div { border-bottom:1px solid var(--tk-line); padding:14px 0; }
.tk.tk .admin-facts > div:last-child { border-bottom:0; }

/* ---------- Tabs / segmented controls ---------- */
.tk.tk :is(.att-shift-tabs, .header-tabs, .worker-tabs, .admin-tabs, .quick-ranges, .att-filters) {
  display:flex; flex-wrap:wrap; gap:4px; padding:5px; background:#fff; border:1px solid var(--tk-line); border-radius:999px; box-shadow:none;
}
.tk.tk :is(.att-shift-tabs, .header-tabs, .worker-tabs, .admin-tabs, .quick-ranges, .att-filters) > :is(a, button) {
  flex:1 1 auto; min-height:40px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  padding:6px 16px; border:0; border-radius:999px; background:transparent; color:var(--tk-muted); font-weight:700; font-size:14px; text-decoration:none; cursor:pointer;
}
.tk.tk :is(.att-shift-tabs, .header-tabs, .worker-tabs, .admin-tabs, .quick-ranges, .att-filters) > :is(a, button) small { font-size:11px; font-weight:600; opacity:.8; }
.tk.tk :is(.att-shift-tabs, .header-tabs, .worker-tabs, .admin-tabs, .quick-ranges, .att-filters) > :is(a, button):hover { background:var(--tk-brand-soft); color:var(--tk-brand); }
.tk.tk :is(.att-shift-tabs, .header-tabs, .worker-tabs, .admin-tabs, .quick-ranges, .att-filters) > :is([aria-current], [aria-pressed=true], [aria-selected=true], .is-active, .is-current) {
  background:var(--tk-brand); color:#fff;
}

/* ---------- Status pills ---------- */
.tk.tk :is(.status, .status-pill, .att-state, .att-review-state) { border-radius:999px; padding:4px 12px; font-size:12px; font-weight:800; min-height:0; }
.tk.tk .status--saved, .tk.tk .status--archived, .tk.tk .status--drive-synced { background:var(--tk-teal-soft); color:#085041; }
.tk.tk .status--needs_info { background:var(--tk-amber-soft); color:#633806; }
.tk.tk .status--drive-sync_failed { background:var(--tk-red-soft); color:var(--tk-red); }
.tk.tk .status--drive-local_only { background:#f1eff0; color:var(--tk-muted); }

/* ---------- Tables ---------- */
.tk.tk :is(.activity-table, .att-table-wrap) { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); overflow:auto; }
.tk.tk :is(.activity-table, .att-table-wrap) table { width:100%; border-collapse:collapse; font-size:14px; }
.tk.tk :is(.activity-table, .att-table-wrap) thead th { background:var(--tk-brand); color:#fff; font-weight:700; padding:12px 14px; text-align:start; }
.tk.tk :is(.activity-table, .att-table-wrap) td, .tk.tk .att-table-wrap tbody th { padding:11px 14px; border-bottom:1px solid #f1eaee; }
.tk.tk :is(.activity-table, .att-table-wrap) tbody tr:nth-child(even) { background:#fcf9fb; }
.tk.tk :is(.activity-table, .att-table-wrap) tbody tr:hover { background:var(--tk-brand-soft); }

/* ---------- Messages ---------- */
.tk.tk .flash { border:0; border-radius:var(--tk-radius-sm); padding:12px 16px; font-weight:700; box-shadow:var(--tk-shadow); }
.tk.tk .flash--success { background:var(--tk-teal-soft); color:#085041; border-inline-start:5px solid var(--tk-green); }
.tk.tk .flash--error { background:var(--tk-red-soft); color:var(--tk-red); border-inline-start:5px solid var(--tk-red); }
.tk.tk :is(.empty-state, .att-empty) { color:var(--tk-muted); background:#fff; border:1px dashed var(--tk-line-strong); border-radius:var(--tk-radius); padding:22px; text-align:center; }

/* ---------- Lists of people, suppliers, phones ---------- */
.tk.tk :is(.user-row, .supplier-card, .att-phone-row, .att-worker, .document-card) { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); box-shadow:none; transition:border-color .15s, box-shadow .15s; }
.tk.tk :is(.user-row, .supplier-card, .att-phone-row, .att-worker, .document-card):hover { border-color:#e3c3d2; box-shadow:var(--tk-shadow); }
.tk.tk .att-phone-row { padding:14px 16px; margin-bottom:10px; }
.tk.tk .att-phone-row--pending { border-inline-start:5px solid #d9a300; }
.tk.tk :is(.supplier-avatar, .att-avatar, .user-avatar) { border-radius:50%; }
.tk.tk .att-worker[data-state=present] { border-top:5px solid var(--tk-green); }
.tk.tk .att-worker[data-state=departed] { border-top:5px solid #ef9f27; }
.tk.tk .att-worker[data-state=absent] { border-top:5px solid #e0d6dc; }
.tk.tk .att-worker[data-state=incomplete] { border-top:5px solid var(--tk-red); }

/* ---------- Management navigation ---------- */
.tk.tk.management-shell .navigation-host { background:#fff; border-inline-end:1px solid var(--tk-line); }
.tk.tk .navigation-group a { border-radius:12px; border-inline-start:0; font-weight:600; }
.tk.tk .navigation-group a:hover { background:var(--tk-brand-soft); color:var(--tk-brand); }
.tk.tk .navigation-group a.is-current { background:var(--tk-brand); color:#fff; }
.tk.tk.management-shell .workspace-topbar { background:#ffffffeb; border-bottom:1px solid var(--tk-line); backdrop-filter:blur(8px); }
.tk.tk.management-shell .workspace-topbar .language-switch, .tk.tk #open-navigation { border-radius:999px; border:1px solid var(--tk-line-strong); background:#fff; color:var(--tk-brand); font-weight:700; padding:6px 14px; min-height:38px; }

/* ---------- Login ---------- */
.tk.tk .auth-card { overflow:hidden; }
.tk.tk .auth-card .button--primary { width:100%; min-height:50px; font-size:16px; }
.tk.tk .language-switch { border-radius:999px; background:#fff; border-color:var(--tk-line-strong); box-shadow:var(--tk-shadow); }

/* ---------- Worker capture page ---------- */
.tk.tk .collector-secondary-action { border-radius:var(--tk-radius-sm); background:#fff; }
.tk.tk .supplier-preview { border-radius:var(--tk-radius-sm); background:var(--tk-lavender-soft); border-color:transparent; }
.tk.tk .supplier-preview .supplier-avatar--collector { background:var(--tk-lavender-ink); }
.tk.tk .capture-button--camera { background:var(--tk-brand); border:0; }
.tk.tk .capture-button--upload { background:var(--tk-amber); color:var(--tk-amber-ink); border:0; }
.tk.tk .capture-button--upload svg { fill:var(--tk-amber-ink); }
.tk.tk .document-fields > label > span, .tk.tk .document-fields > label { font-weight:700; }
.tk.tk .preview-grid img, .tk.tk .document-card__thumb { border-radius:14px; }
.tk.tk .success-message { border-radius:var(--tk-radius); }

/* ---------- Owner dashboard hero ---------- */
.tk.tk .insights-hero { background:var(--tk-brand); border-radius:var(--tk-radius); }

@media (max-width:600px) {
  .tk.tk :is(.att-shift-tabs, .header-tabs, .admin-tabs, .quick-ranges) { border-radius:18px; }
  .tk.tk :is(.att-shift-tabs, .header-tabs, .admin-tabs, .quick-ranges) > :is(a, button) { border-radius:14px; flex-basis:40%; }
  .tk.tk.management-shell .admin-panel, .tk.tk .att-roster { padding:16px; }
}
/* Attendance summary colors carry meaning: present green, left amber, absent coral, missing departure lavender. */
.tk.tk .att-summary > div.att-present { background:var(--tk-teal); color:var(--tk-teal-ink); }
.tk.tk .att-summary > div.att-absent { background:var(--tk-coral); color:var(--tk-coral-ink); }
.tk.tk .att-summary > div:nth-child(5) { background:var(--tk-lavender); color:var(--tk-lavender-ink); }
/* Stock summary uses the same colored tiles. */
.tk.tk .admin-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:24px; border:0; padding:0; }
.tk.tk .admin-summary > div { display:grid; gap:6px; padding:18px; border:0; border-radius:var(--tk-radius); background:var(--tk-blue); color:var(--tk-blue-ink); min-height:96px; align-content:start; }
.tk.tk .admin-summary > div strong { font-size:28px; font-weight:800; color:inherit; }
.tk.tk .admin-summary > div span { font-size:14px; font-weight:700; color:inherit; }
.tk.tk .admin-summary > div:nth-child(2) { background:var(--tk-teal); color:var(--tk-teal-ink); }
.tk.tk .admin-summary > div:nth-child(3) { background:var(--tk-amber); color:var(--tk-amber-ink); }
.tk.tk .admin-summary > div:nth-child(4) { background:var(--tk-coral); color:var(--tk-coral-ink); }
.tk.tk .admin-summary > div:nth-child(5) { background:var(--tk-teal-soft); color:var(--tk-teal-ink); }
.tk.tk .admin-summary > div:nth-child(6) { background:var(--tk-lavender); color:var(--tk-lavender-ink); }
/* In-page section links become chips. */
.tk.tk .att-nav { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 20px; }
.tk.tk .att-nav a { padding:8px 16px; border-radius:999px; background:#fff; border:1px solid var(--tk-line-strong); color:var(--tk-brand); font-weight:700; font-size:14px; text-decoration:none; }
.tk.tk .att-nav a:hover { background:var(--tk-brand-soft); }
/* Plain table headers inside cards (stock results etc.). */
.tk.tk .admin-panel table thead th, .tk.tk .settings-card table thead th { background:var(--tk-brand-soft); color:var(--tk-brand-ink); }
/* File pickers */
.tk.tk input[type=file] { font-size:14px; color:var(--tk-muted); max-width:100%; }
.tk.tk input[type=file]::file-selector-button { margin-inline-end:12px; padding:10px 16px; border:0; border-radius:12px; background:var(--tk-amber-soft); color:#633806; font-weight:700; cursor:pointer; }
.tk.tk input[type=file]::file-selector-button:hover { background:var(--tk-amber); }

/* ---------- Worker pages on phones ---------- */
.tk.tk.worker-shell .archive-summary { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:0; border:0; margin-bottom:16px; }
.tk.tk.worker-shell .archive-summary > div { min-height:0; padding:12px; border-radius:16px; }
.tk.tk.worker-shell .archive-summary strong { font-size:22px; }
.tk.tk.worker-shell .archive-summary span { font-size:12px; }
.tk.tk.worker-shell .workspace-header { margin-bottom:12px; }
.tk.tk.worker-shell .workspace-header h1 { font-size:22px; }
.tk.tk.worker-shell .att-badge { padding:22px 18px; }
.tk.tk.worker-shell .att-badge h1 { font-size:22px; margin:8px 0 4px; }
.tk.tk.worker-shell .att-badge h2 { font-size:17px; color:var(--tk-muted); }
.tk.tk.worker-shell .att-badge-brand { width:56px; height:56px; }
.tk.tk.worker-shell .att-phone-registration { display:grid; gap:12px; text-align:start; }
.tk.tk.worker-shell .att-phone-registration label { display:grid; gap:6px; font-weight:700; }
.tk.tk.worker-shell .att-phone-registration .button { width:100%; min-height:50px; }
.tk.tk.worker-shell .att-state { display:inline-block; margin:6px 0; }
/* My attendance */
.tk.tk.worker-shell .personal-attendance { padding-top:4px; }
.tk.tk.worker-shell .personal-attendance h1 { font-size:24px; margin-bottom:2px; }
.tk.tk.worker-shell .personal-attendance h2 { font-size:15px; color:var(--tk-muted); margin:0 0 14px; }
.tk.tk.worker-shell .personal-date { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:14px; }
.tk.tk.worker-shell .personal-result { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:16px; margin:12px 0; border-block:1px solid var(--tk-line); }
.tk.tk.worker-shell .personal-result > .status { display:inline-block; padding:8px 14px; font-size:14px; background:#f1eff0; color:var(--tk-muted); }
.tk.tk.worker-shell .personal-result > .status--saved { background:var(--tk-teal-soft); color:#085041; }
.tk.tk .att-visit { border-top:1px solid var(--tk-line); padding:12px 0; }
.tk.tk .att-visit strong { color:var(--tk-brand); }
/* Check-in screen */
.tk.tk.worker-shell .att-checkin .att-direction-actions .button--primary { background:var(--tk-teal-ink); }
.tk.tk.worker-shell .att-checkin .att-direction-actions .button--quiet:not(:disabled) { background:var(--tk-amber); color:var(--tk-amber-ink); border-color:transparent; }
.tk.tk.worker-shell .att-checkin .att-direction-actions .button:disabled { background:#f1eff0; color:#b3aab0; border-color:transparent; }

/* ---------- Login ---------- */
.tk.tk.login-page .auth-card--brand { max-width:440px; margin:auto; border-radius:28px; }
.tk.tk.login-page .taakid-identity { background:var(--tk-brand-soft); padding:18px 24px; }
.tk.tk.login-page .taakid-identity img { height:56px; width:auto; margin:auto; }
.tk.tk.login-page .auth-panel { padding:22px 24px 26px; }
.tk.tk.login-page .brand-logo--auth { width:64px; height:64px; border-radius:18px; box-shadow:var(--tk-shadow); }
.tk.tk.login-page .auth-card h1 { font-size:24px; margin:12px 0 2px; }
.tk.tk.login-page .stack-form { display:grid; gap:8px; margin-top:18px; text-align:start; }
.tk.tk.login-page .stack-form label { font-weight:700; font-size:14px; margin-top:6px; text-align:start; }
.tk.tk.login-page .stack-form input { width:100%; }
.tk.tk.login-page .stack-form .button { margin-top:12px; }
.tk.tk.login-page .auth-panel a { color:var(--tk-brand); font-weight:700; }

/* ---------- Onboarding (platform admin) ---------- */
.tk.tk .tk-form-card { display:grid; gap:18px; max-width:720px; background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:22px; }
.tk.tk .tk-form-card fieldset { border:0; margin:0; padding:0; display:grid; gap:12px; }
.tk.tk .tk-form-card legend { display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; margin-bottom:6px; }
.tk.tk .tk-form-card label { display:grid; gap:6px; font-weight:700; }
.tk.tk .tk-form-card small { color:var(--tk-muted); font-weight:500; }
.tk.tk .tk-step { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tk-brand); color:#fff; font-size:15px; }
.tk.tk .tk-wide { width:100%; min-height:52px; font-size:16px; }
.tk.tk .tk-errors { max-width:720px; background:var(--tk-red-soft); color:var(--tk-red); border-radius:var(--tk-radius-sm); padding:12px 16px; margin-bottom:16px; font-weight:700; }
.tk.tk .tk-errors p { margin:4px 0; }
.tk.tk .tk-sheet-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.tk.tk .tk-once { background:var(--tk-amber-soft); color:#633806; border-radius:var(--tk-radius-sm); padding:10px 14px; font-weight:700; max-width:760px; }
.tk.tk .tk-sheet { max-width:760px; background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:26px; display:grid; gap:20px; }
.tk.tk .tk-sheet header { display:flex; align-items:center; gap:14px; }
.tk.tk .tk-sheet header img { border-radius:16px; object-fit:contain; background:var(--tk-bg); }
.tk.tk .tk-sheet h1 { margin:0; font-size:26px; }
.tk.tk .tk-sheet header p { margin:2px 0 0; color:var(--tk-muted); }
.tk.tk .tk-sheet-code { background:var(--tk-brand); color:#fff; border-radius:var(--tk-radius); padding:18px 22px; display:grid; gap:4px; }
.tk.tk .tk-sheet-code span { font-weight:700; opacity:.85; }
.tk.tk .tk-sheet-code strong { font-size:34px; letter-spacing:1px; }
.tk.tk .tk-sheet-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.tk.tk .tk-sheet-grid > div { background:var(--tk-lavender-soft); border-radius:var(--tk-radius-sm); padding:16px; }
.tk.tk .tk-sheet-grid h2 { margin:0 0 8px; font-size:17px; color:var(--tk-lavender-ink); }
.tk.tk .tk-sheet dl { margin:0; display:grid; gap:4px; }
.tk.tk .tk-sheet dt { font-size:13px; color:var(--tk-muted); }
.tk.tk .tk-sheet dd { margin:0 0 6px; font-weight:800; font-size:16px; overflow-wrap:anywhere; }
.tk.tk .tk-secret { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; background:#fff; border-radius:8px; padding:4px 8px; display:inline-block; }
.tk.tk .tk-steps { display:grid; gap:8px; padding-inline-start:22px; }
@media print {
  .no-print, .navigation-host, .workspace-topbar, .flash-stack { display:none !important; }
  .tk.tk.management-shell .app-shell { margin:0; padding:0; }
  .tk.tk .tk-sheet { border:0; }
}

/* ---------- Public pages (privacy, support, deletion) ---------- */
.tk.tk.public-page .app-shell { max-width:820px; margin:0 auto; padding:24px 18px 48px; display:block; }
.tk.tk .tk-public { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:24px; line-height:1.7; }
.tk.tk .tk-public-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.tk.tk .tk-public-head img { height:40px; width:auto; }
.tk.tk .tk-public-head nav { display:flex; flex-wrap:wrap; gap:8px; }
.tk.tk .tk-public-head nav a { padding:6px 14px; border-radius:999px; background:var(--tk-brand-soft); color:var(--tk-brand); font-weight:700; text-decoration:none; font-size:14px; }
.tk.tk .tk-public h1 { font-size:26px; }
.tk.tk .tk-public h2 { font-size:18px; margin-top:22px; color:var(--tk-brand); }
.tk.tk .tk-public footer { margin-top:26px; font-size:13px; }
.tk.tk .tk-faq details { border:1px solid var(--tk-line); border-radius:var(--tk-radius-sm); padding:12px 16px; margin-bottom:8px; }
.tk.tk .tk-faq summary { font-weight:800; cursor:pointer; }
.tk.tk svg.tk-illus { width:auto; height:auto; margin:0; flex-shrink:0; }

/* ---------- Website overview: welcome banner and 7-day chart ---------- */
.tk.tk .tk-welcome { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--tk-brand); color:#fbeaf0; border-radius:24px; padding:24px 26px; margin-bottom:22px; }
.tk.tk .tk-welcome h2 { color:#fff; font-size:clamp(22px, 3vw, 28px); margin:2px 0 4px; }
.tk.tk .tk-welcome p { margin:0; color:#ed93b1; }
.tk.tk .tk-welcome-date { font-weight:700; font-size:13px; opacity:.9; }
.tk.tk .tk-welcome-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tk.tk .tk-button-light { background:#ffffff1f; color:#fff; border-color:#ffffff40; }
.tk.tk .tk-button-light:hover { background:#ffffff33; }
.tk.tk .tk-welcome-art { width:180px; height:auto; flex-shrink:0; }
.tk.tk .tk-week-card { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); padding:18px 20px; margin-bottom:26px; }
.tk.tk .tk-week-card header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.tk.tk .tk-week-card h2 { margin:0; font-size:18px; }
.tk.tk .tk-legend { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tk-muted); font-weight:700; }
.tk.tk .tk-legend i { width:12px; height:12px; border-radius:4px; display:inline-block; margin-inline-start:8px; }
.tk.tk .tk-legend-docs, .tk.tk .tk-bar-docs { background:#85b7eb; }
.tk.tk .tk-legend-present, .tk.tk .tk-bar-present { background:#1d9e75; }
.tk.tk .tk-week { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; }
.tk.tk .tk-week-day { display:grid; justify-items:center; gap:4px; }
.tk.tk .tk-week-bars { height:140px; width:100%; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.tk.tk .tk-week-bars i { width:min(18px, 40%); border-radius:8px 8px 4px 4px; }
.tk.tk .tk-week-day small { font-weight:800; color:var(--tk-muted); }
.tk.tk .tk-week-day span { font-size:11.5px; color:var(--tk-muted); }
.tk.tk .tk-week-day.is-today small { color:var(--tk-brand); }
@media (max-width:640px) { .tk.tk .tk-welcome-art { display:none; } .tk.tk .tk-week-bars { height:110px; } .tk.tk .tk-week-day span { display:none; } }

/* ---------- Page intro with illustration and numbered steps (capture page) ---------- */
.tk.tk .tk-page-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--tk-amber-soft);
  border-radius:var(--tk-radius); padding:14px 16px; margin-bottom:16px; }
.tk.tk .tk-page-intro h1 { margin:0; font-size:22px; color:var(--tk-amber-ink); }
.tk.tk .tk-page-intro p { margin:4px 0 0; color:#633806; font-size:14px; }
.tk.tk .tk-step-title { display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; margin:14px 0 10px; color:var(--tk-ink); }

/* ---------- Archive cards: grid on computers, compact rows on phones ---------- */
.tk.tk .document-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.tk.tk .document-card { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:0; }
.tk.tk .document-card__link { display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }
.tk.tk .document-card__thumb { position:relative; aspect-ratio:4/3; overflow:hidden; background:#f1ecef; border-radius:0; }
.tk.tk .document-card__thumb > img { width:100%; height:100%; object-fit:cover; border-radius:0; }
.tk.tk .document-card__thumb em { position:absolute; top:10px; inset-inline-end:10px; font-style:normal; font-size:12px; font-weight:800;
  background:#211822cc; color:#fff; padding:3px 10px; border-radius:999px; }
.tk.tk .document-card__thumb .supplier-avatar--card { position:absolute; bottom:10px; inset-inline-start:10px; width:40px; height:40px;
  border:3px solid #fff; background:var(--tk-brand); color:#fff; font-weight:800; }
.tk.tk .document-card__body { display:grid; gap:4px; padding:14px 16px 10px; }
.tk.tk .document-card__supplier { font-size:16.5px; font-weight:800; }
.tk.tk .document-card__type { justify-self:start; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; background:var(--tk-blue-soft); color:var(--tk-blue-ink); }
.tk.tk .type--paiement_fournisseur { background:var(--tk-teal-soft); color:#085041; }
.tk.tk .type--bon_livraison { background:var(--tk-amber-soft); color:#633806; }
.tk.tk .type--recu { background:var(--tk-lavender-soft); color:var(--tk-lavender-ink); }
.tk.tk .type--depense { background:var(--tk-coral-soft); color:var(--tk-coral-ink); }
.tk.tk .type--autre, .tk.tk .type--paper { background:#f1eff0; color:var(--tk-muted); }
.tk.tk .document-card__amount { font-size:20px; font-weight:800; color:var(--tk-ink); font-variant-numeric:tabular-nums; }
.tk.tk .document-card__amount small { font-size:12px; color:var(--tk-muted); font-weight:700; }
.tk.tk .document-card__amount.amount-conflict { color:var(--tk-red); }
.tk.tk .document-card__who, .tk.tk .document-card__time { font-size:13px; color:var(--tk-muted); }
.tk.tk .document-card > .document-card__link > .status { position:absolute; top:10px; inset-inline-start:10px; }
.tk.tk .document-card form { padding:0 16px 12px; }
.tk.tk .document-delete { background:none; border:0; color:var(--tk-red); font:inherit; font-size:13px; font-weight:700; cursor:pointer; padding:4px 0; }
@media (max-width:600px) {
  .tk.tk .document-grid { grid-template-columns:1fr; gap:10px; }
  .tk.tk .document-card__link { display:grid; grid-template-columns:84px minmax(0, 1fr); gap:12px; padding:10px; align-items:start; }
  .tk.tk .document-card__thumb { aspect-ratio:3/4; border-radius:14px; }
  .tk.tk .document-card__thumb .supplier-avatar--card { width:30px; height:30px; bottom:6px; inset-inline-start:6px; font-size:12px; border-width:2px; }
  .tk.tk .document-card__thumb em { top:6px; inset-inline-end:6px; font-size:11px; padding:2px 8px; }
  .tk.tk .document-card__body { padding:2px 0 0; gap:3px; }
  .tk.tk .document-card__amount { font-size:18px; }
  .tk.tk .document-card > .document-card__link > .status { top:auto; bottom:12px; inset-inline-start:auto; inset-inline-end:12px; }
  .tk.tk .document-card form { padding:0 12px 10px; text-align:end; }
}

/* ---------- Document details ---------- */
.tk.tk .document-detail__meta { padding:20px; }
.tk.tk .document-detail__meta .supplier-avatar--large { width:72px; height:72px; font-size:28px; background:var(--tk-brand); color:#fff; box-shadow:0 0 0 6px var(--tk-brand-soft); }
.tk.tk .inspector-meta { display:grid; gap:0; margin:6px 0 0; width:100%; background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius-sm); overflow:hidden; }
.tk.tk .inspector-meta > div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 14px; background:none; border-radius:0; border-bottom:1px solid var(--tk-line); }
.tk.tk .inspector-meta > div:last-child { border-bottom:0; }
.tk.tk .inspector-meta dt { color:var(--tk-muted); font-size:13px; font-weight:700; }
.tk.tk .inspector-meta dd { margin:0; font-weight:800; text-align:end; overflow-wrap:anywhere; }
.tk.tk .inspector-meta dd.tk-amount { font-size:20px; color:var(--tk-brand); font-variant-numeric:tabular-nums; }
.tk.tk .inspector-meta dd.tk-amount small { font-size:12px; color:var(--tk-muted); }
.tk.tk .document-page-card { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); overflow:hidden; box-shadow:none; }
.tk.tk .document-page-card img { border-radius:0; }
.tk.tk .document-page-card header { flex-wrap:wrap; gap:10px; padding:12px 14px; }
.tk.tk .page-upload-meta { flex:1 1 180px; }
.tk.tk .page-upload-meta small { white-space:normal; color:var(--tk-muted); }
@media (max-width:600px) { .tk.tk .page-actions { width:100%; } .tk.tk .page-actions .button { flex:1; } }
.tk.tk .page-jump-nav { border-radius:999px; box-shadow:var(--tk-shadow); }
.tk.tk.worker-shell .page-jump-nav { bottom:calc(96px + env(safe-area-inset-bottom)); }
/* Coloured capture buttons keep white text even though labels are dark elsewhere. */
.tk.tk .capture-button--camera, .tk.tk .capture-button--camera :is(strong, small, span) { color:#fff; }
.tk.tk .capture-button--camera svg { fill:#fff; }
.tk.tk .tk-stock-intro { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--tk-teal-soft); border-radius:var(--tk-radius-sm); padding:12px 14px; }
.tk.tk .tk-stock-intro h2 { color:var(--tk-teal-ink); margin:0; }
.tk.tk .tk-stock-intro p { color:#085041; margin:4px 0 0; font-size:13.5px; }
/* Messages on standalone pages (login…) sit below the language button instead of covering it. */
.tk.tk:not(.management-shell):not(.worker-shell) .flash-stack { top:calc(64px + env(safe-area-inset-top)); }

/* Check-in inside the worker app: the page header already names the page and company. */
.tk.tk.worker-shell .att-checkin { margin:0 auto 24px; padding:18px 16px 22px; background:#fff; border:1px solid var(--tk-line, #e6dfe5); border-radius:28px; }
.tk.tk.worker-shell .att-checkin-brand { display:none; }
.tk.tk.worker-shell .att-welcome { justify-content:flex-start; text-align:start; gap:14px; padding:12px; margin:0 0 6px; border-radius:20px; background:var(--tk-brand-soft, #fbeaf0); }
.tk.tk.worker-shell .att-welcome-avatar { width:58px; height:58px; font-size:24px; border-width:3px; }
.tk.tk.worker-shell .att-welcome-text h2 { font-size:19px; margin:0; color:var(--tk-ink, #211822); }
.tk.tk.worker-shell .att-welcome-text .att-welcome-greeting { display:block; font-size:13px; font-weight:600; color:var(--tk-muted, #766d77); }
.tk.tk.worker-shell .att-welcome-text p { margin:2px 0 0; font-size:13px; }
.tk.tk.worker-shell .att-clock strong { font-size:54px; letter-spacing:-1px; }
/* Phone not yet approved: guided card instead of a bare sentence. */
.tk.tk .att-locked { display:grid; justify-items:center; gap:12px; text-align:center; padding:8px 4px; }
.tk.tk .att-locked h2 { margin:0; font-size:21px; }
.tk.tk .att-locked p { margin:0; color:var(--tk-muted, #766d77); }
.tk.tk .att-locked ol { list-style:none; margin:4px 0; padding:0; display:grid; gap:8px; width:100%; text-align:start; counter-reset:step; }
.tk.tk .att-locked li { counter-increment:step; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--tk-surface-2, #f6f3f5); font-weight:600; }
.tk.tk .att-locked li::before { content:counter(step); flex-shrink:0; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--tk-brand, #79003d); color:#fff; font-size:14px; }
.tk.tk .att-locked .button { width:100%; min-height:52px; border-radius:999px; }
.tk.tk .empty-state__art { display:block; margin:0 auto 8px; }
.tk.tk .empty-state { border-style:solid; border-color:var(--tk-line); background:linear-gradient(180deg, var(--tk-blue-soft), #fff 60%); }

/* Sign-in: company first (the worker recognises their shop), Taakid small at the bottom. */
.tk.tk.login-page .tk-login { padding:0; }
.tk.tk .tk-login-hero { position:relative; isolation:isolate; display:grid; justify-items:center; gap:4px; padding:28px 24px 30px; text-align:center; color:#fff;
  background:radial-gradient(circle at 15% 20%, #ffffff14 0 60px, transparent 61px), radial-gradient(circle at 92% 80%, #ed93b126 0 80px, transparent 81px), linear-gradient(160deg, #9a1a57, var(--tk-brand) 60%); }
/* The company's photo, under a wine layer so the white name stays readable on any photo. */
.tk.tk .tk-login-photo { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.tk.tk .tk-login-hero--photo::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, #79003d73, #79003df0 85%); }
.tk.tk .tk-login-hero h1 { color:#fff; font-size:26px; margin:10px 0 0; text-shadow:0 1px 8px #21182240; }
.tk.tk .tk-login-hero p { color:#f9d6e3; margin:0 0 14px; padding-inline:44px; max-width:100%; box-sizing:border-box; }
.tk.tk .tk-login-logo { width:104px; height:104px; border-radius:28px; background:#fff; padding:9px; object-fit:contain; display:block; box-shadow:0 12px 28px #21182259; }
.tk.tk .tk-login-art { position:absolute; z-index:2; inset-inline-end:12px; bottom:-34px; }
.tk.tk .tk-login-art svg { width:84px; height:84px; }
.tk.tk .tk-login-help { margin:14px 0 0; font-size:13px; color:var(--tk-muted); text-align:center; }
.tk.tk .tk-login-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; }
.tk.tk .tk-login-links:empty { display:none; }
.tk.tk .tk-login-links a { display:inline-flex; min-height:44px; align-items:center; padding:0 14px; border-radius:999px; background:var(--tk-brand-soft); color:var(--tk-brand); font-weight:700; text-decoration:none; font-size:14px; }
.tk.tk .tk-login-foot { padding:12px; border-top:1px solid var(--tk-line); background:#fff; }
.tk.tk .tk-login-foot img { display:block; height:26px; width:auto; margin:auto; opacity:.85; }
.tk.tk .att-locked h2 { color:var(--tk-ink); font-size:22px; }
.tk.tk .empty-state__art { display:flex; justify-content:center; }
.tk.tk .empty-state { text-align:center; }
/* Worker archive: the app header already shows the company; keep the heading flush with the cards. */
.tk.tk.worker-shell .workspace-title { gap:0; padding:0; }
.tk.tk.worker-shell .workspace-title .brand-logo, .tk.tk.worker-shell .workspace-title .eyebrow { display:none; }
.tk.tk.worker-shell .workspace-title h1 { font-size:20px; margin:0; }
.tk.tk.worker-shell .workspace-header { display:block; padding:0; margin:4px 0 12px; }
.tk.tk.worker-shell .workspace-title { width:100%; justify-content:flex-start; text-align:start; }
/* Manager screens in the app: no language strip above, a floating tab bar below. */
.tk.tk.manager-app .app-shell { padding-top:18px; padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
.tk.tk.manager-app .att-brand img, .tk.tk.manager-app .workspace-title .brand-logo { width:48px; height:48px; border-radius:14px; }
/* Phone archive counters: one compact row instead of three big tiles. */
@media (max-width:600px) {
  .tk.tk .archive-summary { grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .tk.tk .archive-summary > div { padding:12px; min-height:0; border-radius:16px; }
  .tk.tk .archive-summary strong { font-size:22px; }
  .tk.tk .archive-summary span { font-size:12px; }
}
.tk.tk .mobile-web-only { margin:8px auto 0; text-align:center; display:grid; justify-items:center; gap:10px; }
.tk.tk .mobile-web-only h1 { font-size:24px; margin:0; }
.tk.tk .mobile-web-only p { margin:0 0 6px; color:var(--tk-muted); }
.tk.tk .mobile-web-only .button { border-radius:999px; min-height:50px; padding-inline:22px; }

/* ===== Admin panel (website management shell) ===== */
/* Sidebar: company first, icons, every item reachable. */
.tk.tk.management-shell .app-navigation { padding:16px 12px 12px; }
.tk.tk .navigation-brand { gap:12px; padding:6px 8px 16px; margin-bottom:6px; border-bottom:1px solid var(--tk-line); font-size:17px; line-height:1.2; color:var(--tk-ink); }
.tk.tk .navigation-brand img { width:44px; height:44px; padding:4px; border-radius:14px; background:#fff; border:1px solid var(--tk-line); }
.tk.tk .navigation-brand span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk.tk .navigation-brand small { font-size:11px; color:var(--tk-muted); font-weight:600; margin-top:3px; }
.tk.tk .app-navigation nav { padding-top:8px; scrollbar-width:thin; }
.tk.tk .navigation-group { margin-bottom:12px; }
.tk.tk .navigation-group h2 { text-transform:uppercase; letter-spacing:.04em; font-size:10.5px !important; margin:0 10px 4px !important; }
.tk.tk .navigation-group a { gap:11px; min-height:38px; padding:7px 10px; font-size:14px; color:#4a404b; }
.tk.tk .navigation-group a .nav-icon { width:19px; height:19px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.tk.tk .navigation-group a.is-current .nav-icon { opacity:1; }
.tk.tk .navigation-account { gap:10px; padding:12px 6px 0; flex-wrap:nowrap; }
.tk.tk .navigation-avatar { width:36px; height:36px; flex:0 0 36px !important; display:grid; place-items:center; border-radius:50%; background:var(--tk-pink, #f4c0d1); color:var(--tk-brand-ink); font-weight:800; font-size:15px; }
.tk.tk .navigation-account > span:nth-child(2) { display:grid; min-width:0; color:var(--tk-ink); font-weight:700; font-size:13px; }
.tk.tk .navigation-account small { color:var(--tk-muted); font-weight:500; font-size:11px; }
.tk.tk .navigation-account button { padding:8px 10px; border-radius:10px; font-weight:700; }
.tk.tk .navigation-account button:hover { background:var(--tk-brand-soft); }
/* The sidebar already lists every page: no repeated tab bars inside pages. */
.tk.tk.management-shell .header-tabs { display:none; }
/* Pages whose old stylesheet adds room for a language strip. */
.tk.tk.management-shell.attendance-page .app-shell { padding:28px 32px 48px; }
@media (max-width:900px) { .tk.tk.management-shell.attendance-page .app-shell { padding:20px 16px 40px; } }

/* Team list: initials in capitals, colour by role. */
.tk.tk .user-avatar, .tk.tk .admin-user-avatar { text-transform:uppercase; }
.tk.tk a:not([class]):is([href*="clear"], .link-reset) { color:var(--tk-brand); }

/* Developer mode counters in the Taakid colours. */
.tk.tk .developer-summary > :nth-child(5n+1), .tk.tk .dev-summary > :nth-child(5n+1) { background:var(--tk-blue); border-color:transparent; }
.tk.tk .developer-summary > :nth-child(5n+2), .tk.tk .dev-summary > :nth-child(5n+2) { background:var(--tk-teal); border-color:transparent; }
.tk.tk .developer-summary > :nth-child(5n+3), .tk.tk .dev-summary > :nth-child(5n+3) { background:var(--tk-lavender); border-color:transparent; }
.tk.tk .developer-summary > :nth-child(5n+4), .tk.tk .dev-summary > :nth-child(5n+4) { background:var(--tk-amber); border-color:transparent; }
.tk.tk .developer-summary > :nth-child(5n+5), .tk.tk .dev-summary > :nth-child(5n+5) { background:var(--tk-coral); border-color:transparent; }

/* Attendance settings: cards side by side on wide screens. */
@media (min-width:1200px) {
  .tk.tk.management-shell .att-settings-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; align-items:start; }
  .tk.tk.management-shell .att-settings-grid > * { margin:0; }
  .tk.tk.management-shell .att-settings-grid > .att-wide { grid-column:1 / -1; }
}
/* Clients (groups) page. */
.tk.tk .company-add { margin-bottom:20px; }
.tk.tk .company-add summary { cursor:pointer; font-weight:700; color:var(--tk-brand); }
.tk.tk .company-add .company-form { display:grid; gap:12px; max-width:520px; margin-top:14px; }
.tk.tk .company-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.tk.tk .client-card { display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--tk-radius); background:#fff; border:1px solid var(--tk-line); text-decoration:none; color:var(--tk-ink); box-shadow:var(--tk-shadow); transition:transform .15s, border-color .15s; }
.tk.tk .client-card:hover { transform:translateY(-2px); border-color:var(--tk-brand-soft); }
.tk.tk .client-card__icon { width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; border-radius:16px; background:var(--tk-lavender); color:var(--tk-lavender-ink); font-weight:800; font-size:20px; }
.tk.tk .company-grid > .client-card:nth-child(4n+2) .client-card__icon { background:var(--tk-teal); color:var(--tk-teal-ink); }
.tk.tk .company-grid > .client-card:nth-child(4n+3) .client-card__icon { background:var(--tk-amber); color:var(--tk-amber-ink); }
.tk.tk .company-grid > .client-card:nth-child(4n+4) .client-card__icon { background:var(--tk-coral); color:var(--tk-coral-ink); }
.tk.tk .client-card__text { display:grid; gap:2px; }
.tk.tk .client-card__text strong { font-size:17px; }
.tk.tk .client-card__text small { color:var(--tk-brand); font-weight:700; }
.tk.tk .user-avatar > span { text-transform:uppercase; }
.tk.tk .edit-summary { display:inline-flex; align-items:center; min-height:36px; padding:6px 14px; border-radius:999px; background:var(--tk-brand-soft); color:var(--tk-brand); font-weight:700; font-size:14px; cursor:pointer; list-style:none; }
.tk.tk .edit-summary::-webkit-details-marker { display:none; }
.tk.tk .att-month { display:flex; align-items:center; justify-content:center; gap:16px; width:max-content; margin:4px auto 18px; padding:6px; border-radius:999px; background:#fff; border:1px solid var(--tk-line); }
.tk.tk .att-month .button { min-width:40px; min-height:40px; padding:0; border-radius:50%; }
.tk.tk .att-month .is-disabled { opacity:.35; pointer-events:none; }
.tk.tk .att-month strong { min-width:150px; text-align:center; }
.tk.tk .att-empty-state:not([hidden]) { display:grid; justify-items:center; gap:10px; padding:28px 16px; text-align:center; color:var(--tk-muted); background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); }
.tk.tk .att-empty { padding:28px 12px !important; color:var(--tk-muted); }
/* Sidebar account: name on one line, short logout. */
.tk.tk .navigation-account > span:nth-child(2) bdi { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk.tk .navigation-account > span:nth-child(2) { flex:1; }
.tk.tk .navigation-account form { flex-shrink:0; }
.tk.tk .navigation-account small { white-space:nowrap; }
/* Clients page add-group box, identity page. */
.tk.tk .company-add { padding:16px 20px; }
.tk.tk .identity-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); align-items:start; }
.tk.tk .identity-grid .company-section { margin:0; padding:22px; border:1px solid var(--tk-line); }
.tk.tk .identity-card { display:grid; gap:16px; }
.tk.tk .company-brand-preview { width:120px; height:120px; object-fit:contain; padding:10px; border-radius:24px; background:#fff; border:1px solid var(--tk-line); box-shadow:var(--tk-shadow); }
.tk.tk .identity-card .company-form, .tk.tk .identity-grid .company-form { display:grid; gap:14px; }
.tk.tk .chip-list { list-style:none; padding:0; margin:8px 0 16px; display:flex; flex-wrap:wrap; gap:8px; }
.tk.tk .chip-list li { padding:6px 14px; border-radius:999px; background:var(--tk-lavender-soft); color:var(--tk-lavender-ink); font-weight:700; font-size:14px; }
.tk.tk .chip-list li:nth-child(3n+2) { background:var(--tk-teal-soft); color:var(--tk-teal-ink); }
.tk.tk .chip-list li:nth-child(3n+3) { background:var(--tk-amber-soft); color:var(--tk-amber-ink); }
.tk.tk .identity-grid details summary { cursor:pointer; font-weight:700; color:var(--tk-brand); }
.tk.tk .navigation-logout { width:38px; height:38px; display:grid; place-items:center; padding:0 !important; border-radius:12px !important; border:1px solid var(--tk-line) !important; }
.tk.tk .navigation-logout svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[dir=rtl] .tk.tk .navigation-logout svg { transform:scaleX(-1); }
.tk.tk.management-shell .workspace-title { gap:0; padding-inline:0; }
/* Supplier balance: invoices − payments. */
.tk.tk .supplier-balance { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:13px; color:var(--tk-muted); }
.tk.tk .supplier-balance b { color:var(--tk-ink); }
.tk.tk .supplier-balance__due { padding:2px 10px; border-radius:999px; font-weight:700; }
.tk.tk .supplier-balance__due--owed { background:var(--tk-amber-soft); color:var(--tk-amber-ink); }
.tk.tk .supplier-balance__due--clear { background:var(--tk-teal-soft); color:var(--tk-teal-ink); }
.tk.tk .supplier-total { display:inline-block; margin-inline-start:10px; padding:4px 12px; border-radius:999px; background:var(--tk-amber-soft); color:var(--tk-amber-ink); font-size:13px; font-weight:700; }
.tk.tk .duplicate-badge { display:inline-block; width:max-content; padding:2px 10px; border-radius:999px; background:var(--tk-coral-soft); color:var(--tk-coral-ink); font-size:12px; font-weight:700; }
.tk.tk .upload-status.is-warning { color:var(--tk-amber-ink); background:var(--tk-amber-soft); border-radius:12px; padding:10px 12px; font-weight:600; }
.tk.tk .amount-hint:not([hidden]) { display:block; margin-top:6px; padding:6px 10px; border-radius:10px; background:var(--tk-teal-soft); color:var(--tk-teal-ink); font-weight:600; font-size:13px; }
/* Role and tasks of an account (Team page). */
.tk.tk .role-fields { border:1px solid var(--tk-line); border-radius:var(--tk-radius-sm); padding:12px 14px; margin:0; display:grid; gap:10px; }
.tk.tk .role-fields legend { font-weight:700; padding:0 6px; }
.tk.tk .role-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; }
.tk.tk .role-choice { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--tk-line); border-radius:14px; cursor:pointer; background:#fff; }
.tk.tk .role-choice:has(input:checked) { border-color:var(--tk-brand); background:var(--tk-brand-soft); }
.tk.tk .role-choice span { display:grid; gap:2px; }
.tk.tk .role-choice small { color:var(--tk-muted); font-size:12px; font-weight:500; }
.tk.tk .role-tasks { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 12px; border-radius:12px; background:var(--tk-surface-2, #f6f3f5); }
.tk.tk .role-tasks > span { font-weight:700; font-size:13px; color:var(--tk-muted); }
.tk.tk .role-tasks label { display:flex; align-items:center; gap:6px; font-weight:600; }
.tk.tk .role-fields:has(input[name=role][value=employee]:not(:checked)) .role-tasks { display:none; }
/* Team page (website and app) and one-time password sheet. */
.tk.tk .section-actions { display:flex; flex-wrap:wrap; gap:8px; }
.tk.tk .team-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tk.tk .team-person { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:14px; background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); }
.tk.tk .team-person.is-off { opacity:.6; }
.tk.tk .team-person__text { flex:1; min-width:150px; display:grid; gap:2px; }
.tk.tk .team-person__text small { color:var(--tk-muted); }
.tk.tk .team-person__actions { display:flex; flex-wrap:wrap; gap:8px; }
.tk.tk .team-person__actions .button { min-height:40px; border-radius:999px; font-size:14px; }
.tk.tk .team-add-form { display:grid; gap:14px; max-width:620px; padding:20px; }
.tk.tk .team-add-form label { display:grid; gap:6px; font-weight:700; }
.tk.tk .tk-sheet-table { width:100%; border-collapse:collapse; margin:16px 0; }
.tk.tk .tk-sheet-table th, .tk.tk .tk-sheet-table td { padding:10px 12px; border-bottom:1px solid var(--tk-line); text-align:start; }
.tk.tk .tk-sheet-table .tk-secret { font-family:ui-monospace, Menlo, monospace; font-weight:700; }
/* Anything marked hidden stays hidden, whatever older stylesheets say. */
.tk.tk [hidden] { display:none !important; }
.tk.tk .wa-step .stack-form label { text-align:start; }
.tk.tk .wa-welcome { padding-bottom:110px; }
.tk.tk .team-person__actions .button--quiet { background:var(--tk-brand-soft); color:var(--tk-brand); border-color:transparent; padding-inline:16px; }
.tk.tk .team-person__actions form { margin:0; }

/* ===== attendance — only on: [data-page^="attendance"] ===== */
.attendance-page:where([data-page^="attendance"]) { background: #f7f7f8; }
:where([data-page^="attendance"]) .att-connection-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: 8px; color: var(--ink); background: white; box-shadow: 0 16px 48px #0003; }
:where([data-page^="attendance"]) .att-connection-dialog::backdrop { background: #21182280; }
:where([data-page^="attendance"]) .att-connection-dialog h2 { font-size: 21px; margin-bottom: 14px; }
:where([data-page^="attendance"]) .att-connection-dialog p { font-size: 16px; line-height: 1.7; }
:where([data-page^="attendance"]) .att-connection-dialog .att-badge-actions { justify-content: flex-start; }
:where([data-page^="attendance"]) .att-badge-actions { flex-wrap: wrap; }
.attendance-page:where([data-page^="attendance"]) .app-shell { max-width: 1240px; padding: 64px 28px 40px; }
:where([data-page^="attendance"]) .att-header, :where([data-page^="attendance"]) .att-brand, :where([data-page^="attendance"]) .att-person, :where([data-page^="attendance"]) .att-toolbar, :where([data-page^="attendance"]) .att-toolbar form, :where([data-page^="attendance"]) .att-roster form, :where([data-page^="attendance"]) .att-scan-actions, :where([data-page^="attendance"]) .att-code-row, :where([data-page^="attendance"]) .att-badge-actions { display: flex; align-items: center; gap: 16px; }
:where([data-page^="attendance"]) .att-header { justify-content: space-between; margin-bottom: 24px; }
:where([data-page^="attendance"]) .att-brand img { object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: white; }
:where([data-page^="attendance"]) .att-brand small, :where([data-page^="attendance"]) .att-station small { color: var(--muted); font-size: 12px; }
:where([data-page^="attendance"]) .att-header h1 { font-size: 28px; margin: 4px 0 0; }
:where([data-page^="attendance"]) .att-nav { display: flex; gap: 28px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
:where([data-page^="attendance"]) .att-nav a { color: var(--muted); text-decoration: none; padding: 14px 0; }
:where([data-page^="attendance"]) .att-nav .selected { color: var(--primary); border-bottom: 3px solid var(--primary); font-weight: 700; }
:where([data-page^="attendance"]) .att-summary { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); background: white; border-block: 1px solid var(--border); margin-bottom: 28px; }
:where([data-page^="attendance"]) .att-summary div { padding: 22px 26px; border-inline-end: 1px solid var(--border); }
:where([data-page^="attendance"]) .att-summary span { display: block; font-size: 15px; color: var(--muted); }
:where([data-page^="attendance"]) .att-summary strong { font-size: 36px; display: block; margin-top: 8px; }
:where([data-page^="attendance"]) .att-present strong { color: var(--success); }:where([data-page^="attendance"]) .att-absent strong { color: #ad433a; }
:where([data-page^="attendance"]) .att-toolbar { flex-wrap: wrap; margin-bottom: 20px; gap: 12px; }
.attendance-page:where([data-page^="attendance"]) input, .attendance-page:where([data-page^="attendance"]) select { min-width: 0; max-width: 100%; height: 44px; padding: 8px 12px; border: 1px solid #cfd3d3; border-radius: 6px; background: white; font-size: 15px; color: var(--ink); }
.attendance-page:where([data-page^="attendance"]) .button { min-height: 44px; font-size: 14px; }
:where([data-page^="attendance"]) .att-filters { display: flex; background: #e9eaec; padding: 4px; border-radius: 6px; }
:where([data-page^="attendance"]) .att-filters button { border: 0; background: transparent; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
:where([data-page^="attendance"]) .att-filters button[aria-pressed=true] { background: white; color: var(--primary); box-shadow: 0 1px 3px #0001; }
:where([data-page^="attendance"]) #att-search { flex: 1; min-width: 180px; }
:where([data-page^="attendance"]) .att-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
:where([data-page^="attendance"]) .att-worker { background: white; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
:where([data-page^="attendance"]) .att-person { padding: 20px; min-height: 104px; }:where([data-page^="attendance"]) .att-person>div:last-child { min-width: 0; }
:where([data-page^="attendance"]) .att-avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: var(--surface-soft); color: var(--primary); display: grid; place-items: center; font-size: 23px; font-weight: 700; overflow: hidden; }
:where([data-page^="attendance"]) .att-avatar img { width: 100%; height: 100%; object-fit: cover; }
:where([data-page^="attendance"]) .att-person h2 { font-size: 17px; margin: 0 0 8px; overflow-wrap: anywhere; }
:where([data-page^="attendance"]) .att-state { font-size: 12px; color: #a03e36; background: #fff0ed; padding: 4px 8px; border-radius: 4px; display: inline-block; }
:where([data-page^="attendance"]) [data-state=present] .att-state { color: #127358; background: #e3f4ed; }
:where([data-page^="attendance"]) [data-state=departed] .att-state { color: #604a13; background: #fff3cc; }
:where([data-page^="attendance"]) [data-state=incomplete] .att-state { color:#604a13; background:#fff3cc; }
:where([data-page^="attendance"]) .att-worker footer { flex-wrap: wrap; }
:where([data-page^="attendance"]) .att-times { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
:where([data-page^="attendance"]) .att-times dt { color: var(--muted); font-size: 16px; }
:where([data-page^="attendance"]) .att-times dd { margin: 8px 0 0; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
:where([data-page^="attendance"]) .att-direction-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
:where([data-page^="attendance"]) .att-direction-actions .button { min-height: 76px; font-size: 22px; }
@media (max-width:600px) { :where([data-page^="attendance"]) .att-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } :where([data-page^="attendance"]) .att-filters { flex-wrap: wrap; } }
:where([data-page^="attendance"]) .att-worker footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid #eee; font-size: 13px; color: var(--muted); }
:where([data-page^="attendance"]) .att-worker footer b { margin-inline-start: 8px; color: var(--ink); }:where([data-page^="attendance"]) .att-worker a { color: var(--primary); text-decoration: none; font-weight: 600; }
:where([data-page^="attendance"]) .att-station { margin-top: 32px; border-block: 1px solid var(--border); padding: 28px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
:where([data-page^="attendance"]) .att-station h2, :where([data-page^="attendance"]) .att-roster h2 { font-size: 20px; margin: 6px 0 10px; }:where([data-page^="attendance"]) .att-station p { font-size: 14px; color: var(--muted); }
:where([data-page^="attendance"]) .att-scan-actions { flex-wrap: wrap; justify-content: flex-end; }:where([data-page^="attendance"]) .att-scan-actions label { cursor: pointer; }
:where([data-page^="attendance"]) #att-reader { max-width: 420px; grid-column: 1/-1; width: 100%; margin: auto; }:where([data-page^="attendance"]) #att-reader:empty { display: none; }
:where([data-page^="attendance"]) #att-code-form { grid-column: 1/-1; max-width: 600px; width: 100%; }:where([data-page^="attendance"]) #att-code-form label { display: block; font-size: 14px; margin-bottom: 8px; }:where([data-page^="attendance"]) .att-code-row input { flex: 1; }
:where([data-page^="attendance"]) #att-result { grid-column: 1/-1; margin: 0; font-weight: 700; }:where([data-page^="attendance"]) #att-result.error { color: #ad433a; }:where([data-page^="attendance"]) #att-result.success { color: var(--success); }
:where([data-page^="attendance"]) .att-roster { padding-top: 28px; }:where([data-page^="attendance"]) .att-roster select { flex: 1; }:where([data-page^="attendance"]) .att-roster form { max-width: 600px; }
:where([data-page^="attendance"]) [hidden] { display: none !important; }
:where([data-page^="attendance"]) .att-empty { padding: 28px 0; grid-column: 1/-1; color: var(--muted); }
:where([data-page^="attendance"]) .att-phone-list { margin-top: 16px; }:where([data-page^="attendance"]) .att-phone-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--border); }:where([data-page^="attendance"]) .att-phone-row small { color:var(--muted); }:where([data-page^="attendance"]) .att-phone-row strong { overflow-wrap:anywhere; }:where([data-page^="attendance"]) .att-badge form { display:grid; gap:16px; }:where([data-page^="attendance"]) .att-badge input { width:100%; min-width:0; padding:12px; border:1px solid var(--border); border-radius:6px; }:where([data-page^="attendance"]) .att-checkin-success { color:var(--success); font-size:20px; font-weight:700; }:where([data-page^="attendance"]) .att-nav { flex-wrap:wrap; }:where([data-page^="attendance"]) .att-preview-link { margin-top:20px; }
:where([data-page^="attendance"]) .att-badge { margin: 64px auto 24px; border: 1px solid #ddd; padding: 24px; text-align: center; background: white; border-top: 5px solid var(--primary); border-radius: 8px; }:where([data-page^="attendance"]) .att-badge-brand { width: 90px; display: block; margin: auto; }:where([data-page^="attendance"]) .att-badge-avatar { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; }:where([data-page^="attendance"]) .att-badge h1 { font-size: 24px; overflow-wrap: anywhere; }:where([data-page^="attendance"]) .att-badge small { display: block; overflow-wrap: anywhere; font-size: 10px; }:where([data-page^="attendance"]) .att-badge-actions { justify-content: center; }
@media(max-width:900px) { :where([data-page^="attendance"]) .att-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .attendance-page:where([data-page^="attendance"]) .app-shell { padding: 58px 16px 24px; }:where([data-page^="attendance"]) .att-header h1 { font-size: 21px; }:where([data-page^="attendance"]) .att-brand { gap: 10px; }:where([data-page^="attendance"]) .att-brand img { width: 46px; height: 46px; }:where([data-page^="attendance"]) .att-header { gap: 8px; }:where([data-page^="attendance"]) .att-summary div { padding: 14px 10px; }:where([data-page^="attendance"]) .att-summary span { font-size: 12px; }:where([data-page^="attendance"]) .att-summary strong { font-size: 28px; }:where([data-page^="attendance"]) .att-grid { grid-template-columns: 1fr; }:where([data-page^="attendance"]) .att-toolbar form { width: 100%; gap: 8px; }:where([data-page^="attendance"]) .att-toolbar form input { flex: 1; }:where([data-page^="attendance"]) .att-station { grid-template-columns: 1fr; }:where([data-page^="attendance"]) .att-scan-actions { justify-content: flex-start; }:where([data-page^="attendance"]) .att-code-row { gap: 8px; }:where([data-page^="attendance"]) .att-nav { gap: 18px; font-size: 14px; } }
@media print { :where([data-page^="attendance"]) .language-switch, :where([data-page^="attendance"]) .att-badge-actions { display: none; }:where([data-page^="attendance"]) .att-badge { break-inside: avoid; margin: 0; } }
:where([data-page^="attendance"]) .att-phone-registration { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 16px; align-items: end; margin-block: 20px; }
:where([data-page^="attendance"]) .att-phone-registration label { display: grid; gap: 8px; min-width: 0; }
:where([data-page^="attendance"]) .att-invitation { max-width: 1040px; margin-inline: auto; }
:where([data-page^="attendance"]) .att-invitation header { margin-block: 24px; }
:where([data-page^="attendance"]) .att-invitation h1 { font-size: 26px; line-height: 1.4; }
:where([data-page^="attendance"]) .att-invitation h2 { font-size: 20px; overflow-wrap: anywhere; }
:where([data-page^="attendance"]) .att-invitation-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: 32px; }
:where([data-page^="attendance"]) .att-activation-qr { width: 320px; max-width: 100%; aspect-ratio: 1; background: white; }
:where([data-page^="attendance"]) .att-activation-qr svg { display: block; width: 100%; height: 100%; fill: initial; }
:where([data-page^="attendance"]) .att-invitation-details { min-width: 0; }
:where([data-page^="attendance"]) .att-invitation-details p { line-height: 1.7; margin-top: 0; }
:where([data-page^="attendance"]) .att-invitation-details label { display: block; margin-bottom: 8px; font-weight: 700; }
:where([data-page^="attendance"]) .att-invitation-details input { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 16px; }
:where([data-page^="attendance"]) .att-invitation-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 16px; }
:where([data-page^="attendance"]) .att-invitation-actions .button { min-height: 44px; }
:where([data-page^="attendance"]) .att-invitation-warning { padding: 16px; border-inline-start: 4px solid #b27600; background: #fff6de; line-height: 1.7; }
:where([data-page^="attendance"]) #activation-link-status { min-height: 28px; }
@media (max-width: 760px) {
  :where([data-page^="attendance"]) .att-invitation-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  :where([data-page^="attendance"]) .att-activation-qr { justify-self: center; }
  :where([data-page^="attendance"]) .att-invitation-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}
:where([data-page^="attendance"]) .att-phone-registration input, :where([data-page^="attendance"]) .att-phone-registration select { width: 100%; min-width: 0; min-height: 44px; }
@media (max-width: 700px) { :where([data-page^="attendance"]) .att-phone-registration { grid-template-columns: minmax(0,1fr); } }
:where([data-page^="attendance"]) .att-rule-note { text-align:start; font-size:16px; line-height:1.6; padding:12px; background:#fff5d9; border-inline-start:3px solid #e5b34a; }
:where([data-page^="attendance"]) .att-note-label { display:grid; gap:8px; text-align:start; margin:16px 0; font-size:16px; }
:where([data-page^="attendance"]) .att-note-label textarea { width:100%; box-sizing:border-box; min-height:80px; }
:where([data-page^="attendance"]) .att-visits { text-align:start; }
:where([data-page^="attendance"]) .att-visit { border-top:1px solid var(--border); padding:12px 0; font-size:15px; line-height:1.7; }
:where([data-page^="attendance"]) .att-visit p { white-space:pre-wrap; overflow-wrap:anywhere; margin:6px 0; }
:where([data-page^="attendance"]) .att-shift-name, :where([data-page^="attendance"]) .att-department-name { font-size:15px; margin:12px 20px; }
:where([data-page^="attendance"]) .att-toolbar form { flex-wrap:wrap; min-width:0; }
:where([data-page^="attendance"]) .att-toolbar form select { width:auto; max-width:100%; min-width:0; }
:where([data-page^="attendance"]) .att-toolbar form input[type="date"] { min-width:150px; }
@media(max-width:600px) {
  :where([data-page^="attendance"]) .att-toolbar form { display:grid; grid-template-columns:auto minmax(0,1fr); }
  :where([data-page^="attendance"]) .att-toolbar form input[type="date"], :where([data-page^="attendance"]) .att-toolbar form select { width:100%; min-width:0; }
  :where([data-page^="attendance"]) .att-toolbar form button { grid-column:2; justify-self:end; }
}
:where([data-page^="attendance"]) .att-worker > .att-visits { padding:0 20px 12px; }
:where([data-page^="attendance"]) .att-roster form.att-shift-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(170px,2fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
:where([data-page^="attendance"]) .att-shift-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
:where([data-page^="attendance"]) .att-shift-tabs a { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 16px; border:1px solid var(--border); border-radius:6px; color:var(--ink); text-decoration:none; background:white; font-size:16px; }
:where([data-page^="attendance"]) .att-shift-tabs a[aria-current="page"] { background:var(--primary); color:white; border-color:var(--primary); }
:where([data-page^="attendance"]) .att-shift-tabs small { font-size:13px; }
:where([data-page^="attendance"]) .att-team-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 16px; scroll-margin-top:90px; }
:where([data-page^="attendance"]) .att-team-heading>div:first-child { display:flex; align-items:center; gap:12px; }
:where([data-page^="attendance"]) .att-team-heading .att-filters button { min-height:40px; font-size:14px; }
:where([data-page^="attendance"]) .att-team-heading h2 { margin:0; font-size:20px; }
:where([data-page^="attendance"]) #att-visible-count { font-size:16px; color:var(--muted); font-variant-numeric:tabular-nums; }
:where([data-page^="attendance"]) .att-team-grid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; align-items:start; margin-bottom:24px; }
:where([data-page^="attendance"]) .att-team-grid .att-worker { min-width:0; border-top:3px solid #b74740; }
:where([data-page^="attendance"]) .att-team-grid .att-worker[data-state="present"] { border-top-color:#168361; }
:where([data-page^="attendance"]) .att-team-grid .att-worker[data-state="departed"] { border-top-color:#68737d; }
:where([data-page^="attendance"]) .att-team-grid .att-worker[data-state="incomplete"] { border-top-color:#b77b13; }
:where([data-page^="attendance"]) .att-team-grid .att-person { flex-direction:column; gap:10px; padding:16px 12px 12px; text-align:center; }
:where([data-page^="attendance"]) .att-team-grid .att-person>div:last-child { width:100%; }
:where([data-page^="attendance"]) .att-team-grid .att-avatar { width:64px; height:64px; }
:where([data-page^="attendance"]) .att-team-grid .att-person h2 { font-size:16px; line-height:1.4; min-height:45px; margin:0 0 6px; display:flex; align-items:center; justify-content:center; overflow-wrap:anywhere; }
:where([data-page^="attendance"]) .att-team-grid .att-state { font-size:12px; min-height:30px; line-height:1.4; display:flex; align-items:center; justify-content:center; padding:5px; }
:where([data-page^="attendance"]) .att-team-grid footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:8px; text-align:center; }
:where([data-page^="attendance"]) .att-team-grid footer span { min-width:0; font-size:12px; }
:where([data-page^="attendance"]) .att-team-grid footer b { display:block; margin:4px 0 0; font-size:17px; font-variant-numeric:tabular-nums; }
:where([data-page^="attendance"]) .att-team-grid .att-visit-details { padding:10px 12px; }
:where([data-page^="attendance"]) .att-team-grid .att-shift-name, :where([data-page^="attendance"]) .att-team-grid .att-department-name { margin:10px 0; font-size:13px; overflow-wrap:anywhere; }
:where([data-page^="attendance"]) #att-no-match { padding:24px 0; color:var(--muted); }
:where([data-page^="attendance"]) .att-visit-details { border-top:1px solid var(--border); padding:12px 20px; }
:where([data-page^="attendance"]) .att-visit-details summary { cursor:pointer; color:var(--primary); font-size:14px; font-weight:600; }
@media(max-width:760px) {
  :where([data-page^="attendance"]) .att-shift-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  :where([data-page^="attendance"]) .att-shift-tabs a { flex-direction:column; justify-content:center; gap:4px; padding:10px 8px; text-align:center; }
}
@media(max-width:480px) { :where([data-page^="attendance"]) .att-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } :where([data-page^="attendance"]) .att-team-grid .att-person { padding:12px 8px 10px; } }
@media(max-width:340px) { :where([data-page^="attendance"]) .att-team-grid { grid-template-columns:minmax(0,1fr); } }
:where([data-page^="attendance"]) .att-checkin { max-width:520px; }
:where([data-page^="attendance"]) .att-checkin-brand { display:flex; align-items:center; justify-content:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--border); }
:where([data-page^="attendance"]) .att-checkin-brand img { width:48px; height:48px; object-fit:contain; }
:where([data-page^="attendance"]) .att-checkin-brand h1 { margin:0; font-size:21px; }
:where([data-page^="attendance"]) .att-welcome { display:flex; align-items:center; gap:20px; padding:24px 0; text-align:start; }
:where([data-page^="attendance"]) .att-welcome-avatar { position:relative; display:grid; place-items:center; flex:none; width:96px; height:96px; overflow:hidden; border-radius:50%; border:3px solid #f7bf58; background:#f5eaf0; color:var(--primary); font-size:36px; font-weight:700; }
:where([data-page^="attendance"]) .att-welcome-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
:where([data-page^="attendance"]) .att-welcome-avatar img[hidden] { display:none; }
:where([data-page^="attendance"]) .att-welcome-text { min-width:0; flex:1; }
:where([data-page^="attendance"]) .att-welcome-text h2 { margin:0; font-size:24px; line-height:1.4; overflow-wrap:anywhere; }
:where([data-page^="attendance"]) .att-welcome-greeting { display:block; font-size:16px; font-weight:500; color:var(--muted); margin-bottom:4px; }
:where([data-page^="attendance"]) .att-welcome-text p { margin:6px 0 0; color:var(--muted); font-size:14px; }
:where([data-page^="attendance"]) .att-checkin .att-note-label { text-align:start; }
@media(max-width:400px) { :where([data-page^="attendance"]) .att-checkin { padding:20px 16px; } :where([data-page^="attendance"]) .att-welcome { gap:14px; } :where([data-page^="attendance"]) .att-welcome-avatar { width:80px; height:80px; } :where([data-page^="attendance"]) .att-welcome-text h2 { font-size:22px; } }
:where([data-page^="attendance"]) .att-shift-row select, :where([data-page^="attendance"]) .att-shift-row input[type="number"] { width:100%; min-width:0; }
:where([data-page^="attendance"]) .att-roster { scroll-margin-top:90px; }
@media(max-width:600px) { :where([data-page^="attendance"]) .att-roster form.att-shift-row { grid-template-columns:minmax(0,1fr) auto; } :where([data-page^="attendance"]) .att-shift-row label { grid-column:1/-1; overflow-wrap:anywhere; } }

/* Phone requests, workplace location and offline attendance (2026-10-08). */
:where([data-page^="attendance"]) .att-count { display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:#a03e36; color:#fff; font-size:12px; line-height:20px; text-align:center; }
:where([data-page^="attendance"]) .att-state--ok { color:#127358; background:#e3f4ed; }
:where([data-page^="attendance"]) .att-state--wait { color:#604a13; background:#fff3cc; }
:where([data-page^="attendance"]) .att-state--no { color:#a03e36; background:#fff0ed; }
:where([data-page^="attendance"]) .att-phone-row--pending { border-inline-start:4px solid #d9a300; }
:where([data-page^="attendance"]) .att-phone-row .att-badge-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0; }
:where([data-page^="attendance"]) .att-roster form.att-site-form { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:12px; max-width:520px; }
:where([data-page^="attendance"]) .att-site-form #site-locate, :where([data-page^="attendance"]) .att-site-form #site-status, :where([data-page^="attendance"]) .att-site-form label:nth-of-type(3), :where([data-page^="attendance"]) .att-site-form .button--primary { grid-column:1/-1; }
:where([data-page^="attendance"]) .att-site-form #site-status:empty { display:none; }
:where([data-page^="attendance"]) .att-site-form label { display:grid; gap:4px; }
:where([data-page^="attendance"]) .att-site-form input { width:100%; box-sizing:border-box; }
:where([data-page^="attendance"]) .att-queue { color:#604a13; background:#fff3cc; padding:8px 10px; border-radius:6px; font-size:14px; }
:where([data-page^="attendance"]) .att-checkin-error { color:#a03e36; }
:where([data-page^="attendance"]) .att-location-note { font-size:13px; }
:where([data-page^="attendance"]) .att-visit p.att-evidence { white-space:normal; }
:where([data-page^="attendance"]) .att-evidence { font-size:13px; margin:4px 0; padding:4px 8px; border-radius:4px; }
:where([data-page^="attendance"]) .att-evidence--ok { color:#127358; background:#e3f4ed; }
:where([data-page^="attendance"]) .att-evidence--check { color:#604a13; background:#fff3cc; }
:where([data-page^="attendance"]) .att-flag { display:inline-block; margin-inline-start:4px; font-size:12px; color:#604a13; background:#fff3cc; padding:4px 8px; border-radius:4px; }

/* Phase 2: review, corrections, lateness and monthly timesheet (2026-10-08). */
:where([data-page^="attendance"]) .att-lead { color:var(--muted); max-width:720px; }
:where([data-page^="attendance"]) .att-review-tabs { margin:12px 0 16px; }
:where([data-page^="attendance"]) .att-review-list { display:grid; gap:12px; }
:where([data-page^="attendance"]) .att-review-card { background:#fff; border:1px solid #eadfe5; border-inline-start:5px solid #d9a300; border-radius:16px; padding:14px 16px; display:grid; gap:8px; }
:where([data-page^="attendance"]) .att-review-card--accepted { border-inline-start-color:#1d9e75; }
:where([data-page^="attendance"]) .att-review-card--rejected { border-inline-start-color:#a32d2d; opacity:.85; }
:where([data-page^="attendance"]) .att-review-card header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
:where([data-page^="attendance"]) .att-review-card header div { display:grid; gap:2px; }
:where([data-page^="attendance"]) .att-review-card header span { color:var(--muted); font-size:14px; }
:where([data-page^="attendance"]) .att-review-state { font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:#fff3cc; color:#604a13 !important; white-space:nowrap; }
:where([data-page^="attendance"]) .att-review-card--accepted .att-review-state { background:#e3f4ed; color:#127358 !important; }
:where([data-page^="attendance"]) .att-review-card--rejected .att-review-state { background:#fff0ed; color:#a03e36 !important; }
:where([data-page^="attendance"]) .att-review-why, :where([data-page^="attendance"]) .att-review-decision { margin:0; font-size:14px; }
:where([data-page^="attendance"]) .att-review-decision { color:var(--muted); }
:where([data-page^="attendance"]) .att-review-form { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; }
:where([data-page^="attendance"]) .att-review-form input { min-height:42px; min-width:0; }
:where([data-page^="attendance"]) .att-review-edit, :where([data-page^="attendance"]) .att-correct-link { font-size:14px; font-weight:700; color:#79003d; }
:where([data-page^="attendance"]) .att-correction { font-size:14px; margin:6px 0; }
:where([data-page^="attendance"]) .att-edit-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:620px; }
:where([data-page^="attendance"]) .att-edit-form label { display:grid; gap:4px; }
:where([data-page^="attendance"]) .att-edit-form small { color:var(--muted); }
:where([data-page^="attendance"]) .att-edit-reason, :where([data-page^="attendance"]) .att-edit-form .button { grid-column:1/-1; }
:where([data-page^="attendance"]) .att-late { display:inline-block; margin:4px 0; padding:3px 10px; border-radius:999px; background:#fff0ed; color:#a03e36; font-size:13px; font-weight:700; }
:where([data-page^="attendance"]) .att-month { display:flex; align-items:center; justify-content:center; gap:16px; margin:12px 0; font-size:18px; }
:where([data-page^="attendance"]) .att-month strong { min-width:180px; text-align:center; text-transform:capitalize; }
:where([data-page^="attendance"]) .att-alert { background:#fff3cc; color:#604a13; padding:10px 14px; border-radius:12px; }
:where([data-page^="attendance"]) .att-alert a { font-weight:700; color:#79003d; }
:where([data-page^="attendance"]) .att-table-wrap { overflow-x:auto; background:#fff; border:1px solid #eadfe5; border-radius:16px; }
:where([data-page^="attendance"]) .att-table { width:100%; border-collapse:collapse; font-size:14px; }
:where([data-page^="attendance"]) .att-table th, :where([data-page^="attendance"]) .att-table td { padding:10px 12px; text-align:center; border-bottom:1px solid #f0e8ec; white-space:nowrap; }
:where([data-page^="attendance"]) .att-table thead th { background:#79003d; color:#fff; font-weight:700; }
:where([data-page^="attendance"]) .att-table tbody th { text-align:start; display:grid; }
:where([data-page^="attendance"]) .att-table tbody th small { color:var(--muted); font-weight:400; font-size:12px; }
:where([data-page^="attendance"]) .att-cell-warn { color:#a03e36; font-weight:700; }
:where([data-page^="attendance"]) .att-cell-check { color:#604a13; font-weight:700; background:#fff8e1; }
:where([data-page^="attendance"]) .att-row-rejected td { text-decoration:line-through; color:var(--muted); }
:where([data-page^="attendance"]) .att-detail summary { cursor:pointer; font-weight:700; margin:16px 0 10px; }
@media(max-width:600px) { :where([data-page^="attendance"]) .att-review-form, :where([data-page^="attendance"]) .att-edit-form { grid-template-columns:1fr; } }
/* Phase 3: attendance controls and selfies */
:where([data-page^="attendance"]) .att-roster form.att-rules-form { display:grid; gap:14px; max-width:640px; align-items:stretch; }
:where([data-page^="attendance"]) .att-switch { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid #eadfe5; border-radius:14px; background:#fff; cursor:pointer; }
:where([data-page^="attendance"]) .att-switch input { margin-top:3px; width:20px; height:20px; accent-color:#79003d; flex-shrink:0; }
:where([data-page^="attendance"]) .att-switch span { display:grid; gap:2px; }
:where([data-page^="attendance"]) .att-switch small { color:var(--muted); }
:where([data-page^="attendance"]) .att-rules-form > label:not(.att-switch) { display:grid; gap:6px; font-weight:700; max-width:260px; }
:where([data-page^="attendance"]) .att-selfie { width:96px; height:96px; object-fit:cover; border-radius:16px; display:block; margin:6px 0; background:#f1eff0; }
:where([data-page^="attendance"]) .att-selfie-dialog { border:0; border-radius:24px; padding:18px; width:min(92vw, 420px); }
:where([data-page^="attendance"]) .att-selfie-dialog::backdrop { background:#21182299; }
:where([data-page^="attendance"]) .att-selfie-dialog h2 { margin:0 0 10px; font-size:19px; }
:where([data-page^="attendance"]) .att-selfie-dialog video { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:18px; background:#241d24; transform:scaleX(-1); }
:where([data-page^="attendance"]) .att-app-only { background:#fff3cc; color:#604a13; border-radius:12px; padding:10px 14px; font-weight:700; }

/* ---------- Check-in screen (live clock, place card, round buttons) ---------- */
:where([data-page^="attendance"]) .att-checkin { text-align:center; }
:where([data-page^="attendance"]) .att-clock { display:grid; gap:2px; margin:6px 0 14px; }
:where([data-page^="attendance"]) .att-clock strong { font-size:46px; line-height:1; font-weight:800; letter-spacing:1px; color:#211822; font-variant-numeric:tabular-nums; }
:where([data-page^="attendance"]) .att-clock span { color:var(--muted); font-size:14px; text-transform:capitalize; }
:where([data-page^="attendance"]) .att-place { display:flex; align-items:center; gap:10px; text-align:start; background:#fbeaf0; border-radius:18px; padding:10px 14px; margin-bottom:12px; }
:where([data-page^="attendance"]) .att-place-art .tk-illus { filter:none; }
:where([data-page^="attendance"]) .att-place strong { display:block; color:#72243e; font-size:15px; }
:where([data-page^="attendance"]) .att-place small { color:#8a5a6c; font-size:12.5px; }
:where([data-page^="attendance"]) .att-direction-actions { display:grid; grid-template-columns:1fr 1fr; gap:16px; justify-items:center; margin:16px 0 8px; }
:where([data-page^="attendance"]) .att-round { width:min(132px, 36vw); aspect-ratio:1; border-radius:50%; border:0; display:grid; place-content:center; justify-items:center; gap:6px;
  font:inherit; font-size:17px; font-weight:800; cursor:pointer; transition:transform .12s, box-shadow .2s; }
:where([data-page^="attendance"]) .att-round svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
:where([data-page^="attendance"]) .att-round--in { background:#0f6e56; color:#fff; box-shadow:0 0 0 10px #e1f5ee; }
:where([data-page^="attendance"]) .att-round--out { background:#fac775; color:#412402; box-shadow:0 0 0 10px #faeeda; }
:where([data-page^="attendance"]) .att-round:active { transform:scale(.96); }
:where([data-page^="attendance"]) .att-round:disabled { background:#efeaed; color:#b5aab0; box-shadow:0 0 0 10px #f7f3f5; cursor:not-allowed; }
:where([data-page^="attendance"]) .att-timeline { display:grid; grid-template-columns:1fr 1fr; gap:10px; background:none !important; padding:0 !important; }
:where([data-page^="attendance"]) .att-timeline > div { background:#f6f3f5; border-radius:16px; padding:10px; }
:where([data-page^="attendance"]) .att-timeline dt { font-size:12px; color:var(--muted); font-weight:700; }
:where([data-page^="attendance"]) .att-timeline dd { margin:2px 0 0; font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; }
:where([data-page^="attendance"]) .att-note-box { text-align:start; margin-top:10px; }
:where([data-page^="attendance"]) .att-note-box summary { cursor:pointer; color:#79003d; font-weight:700; font-size:14px; padding:6px 0; }
:where([data-page^="attendance"]) .att-checkin #checkin-result { font-weight:700; }
:where([data-page^="attendance"]) .att-checkin #checkin-result.att-checkin-success { color:#0f6e56; background:#e1f5ee; border-radius:12px; padding:8px 12px; }
:where([data-page^="attendance"]) .att-checkin #checkin-result.att-checkin-error { background:#fff0ed; border-radius:12px; padding:8px 12px; }

/* ===== dashboard — only on: .manager-app, [data-page="workspaces.dashboard"] ===== */
:where(.manager-app, [data-page="workspaces.dashboard"]) .insights {max-width:1120px;margin:auto;padding:12px 0 32px;color:#30242b}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-hero {border-radius:26px;padding:28px;background:linear-gradient(120deg,#650038,#940750);color:white;margin-bottom:20px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-hero h1 {font-size:clamp(25px,5vw,36px);margin:8px 0}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-hero p {opacity:.9;line-height:1.7}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-hero a {color:white;display:inline-block;padding:8px 0}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-stats article, :where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card {background:#fff;border:1px solid #eedfe7;border-radius:20px;padding:20px;box-shadow:0 5px 20px #55002a07}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-stats span {color:#705c68;font-size:14px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-stats strong {display:block;font-size:32px;color:#79003d;margin-top:8px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-companies {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights h2 {font-size:20px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights small {font-size:14px;color:#796571}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-company {display:flex;align-items:center;gap:14px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-company img {object-fit:contain;border-radius:14px;border:1px solid #eee}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-company h2, :where(.manager-app, [data-page="workspaces.dashboard"]) .insights-company p {margin:3px 0}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card dl {display:flex;justify-content:space-between;gap:12px;margin:24px 0}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card dt {font-size:12px;color:#705c68}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card dd {margin:6px 0;font-size:24px;font-weight:700}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card .button {width:100%;min-height:48px;border-radius:14px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-row {display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid #f1e8ed;padding:16px 0;overflow-wrap:anywhere}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-row span:last-child {font-size:13px;color:#786473}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card>a:last-child {display:block;padding-top:20px;color:#79003d}:where(.manager-app, [data-page="workspaces.dashboard"]) .mobile-management {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:white;border-bottom:1px solid #eadce4;flex-wrap:wrap}:where(.manager-app, [data-page="workspaces.dashboard"]) .mobile-management a, :where(.manager-app, [data-page="workspaces.dashboard"]) .mobile-management button {color:#79003d;font-size:14px;min-height:44px;display:flex;align-items:center;background:none;border:0}:where(.manager-app, [data-page="workspaces.dashboard"]) .mobile-management form {margin:0}@media(max-width:640px){:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-stats {grid-template-columns:repeat(2,minmax(0,1fr))}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-companies {grid-template-columns:1fr}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-hero {padding:22px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights-card {padding:18px}:where(.manager-app, [data-page="workspaces.dashboard"]) .insights {padding-top:0}}

/* ===== photo-camera — only on: [data-page="main.collect"] ===== */
:where([data-page="main.collect"]) .photo-camera { width:min(640px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:16px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); overflow:auto; }
:where([data-page="main.collect"]) .photo-camera::backdrop { background:#181318b3; }
:where([data-page="main.collect"]) .photo-camera header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
:where([data-page="main.collect"]) .photo-camera h2 { margin:0; font-size:20px; }
:where([data-page="main.collect"]) .photo-camera video { display:block; width:100%; height:min(56dvh,520px); object-fit:contain; background:#161616; border-radius:4px; }
:where([data-page="main.collect"]) .photo-camera__status { min-height:24px; font-size:16px; line-height:1.5; margin:12px 0; }
:where([data-page="main.collect"]) .photo-camera__actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
:where([data-page="main.collect"]) .photo-camera__actions button { min-height:48px; white-space:normal; font-size:16px; }
@media(max-width:420px) { :where([data-page="main.collect"]) .photo-camera__actions { grid-template-columns:1fr; } }

/* ===== Responsable rights (Team page) ===== */
.tk.tk .role-rights { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; padding:12px; border-radius:12px; background:var(--tk-lavender-soft); }
.tk.tk .role-rights > span { grid-column:1 / -1; font-weight:700; font-size:13px; color:var(--tk-lavender-ink); }
.tk.tk .role-rights > small { grid-column:1 / -1; }
.tk.tk .role-rights label { display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:12px; background:#fff; cursor:pointer; }
.tk.tk .role-rights label span { display:grid; gap:2px; }
.tk.tk .role-rights label small { color:var(--tk-muted); font-size:12px; font-weight:500; }
.tk.tk .role-fields:has(input[name=role][value=manager]:not(:checked)) .role-rights { display:none; }

/* ===== Feedback: busy buttons, messages, offline bar ===== */
.tk.tk .is-busy { position:relative; color:transparent !important; pointer-events:none; }
.tk.tk .is-busy::after { content:''; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%;
  border:2.5px solid currentColor; border-color:rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent; animation:tk-spin .7s linear infinite; }
.tk.tk .button--quiet.is-busy::after, .tk.tk .button--outline.is-busy::after, .tk.tk .button--danger-quiet.is-busy::after { border-color:var(--tk-brand) var(--tk-brand) transparent transparent; }
@keyframes tk-spin { to { transform:rotate(360deg); } }
.tk.tk .flash { display:flex; align-items:flex-start; gap:10px; transition:opacity .4s, transform .4s; }
.tk.tk .flash.is-leaving { opacity:0; transform:translateY(-6px); }
.tk.tk .flash-close { margin-inline-start:auto; flex-shrink:0; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:inherit; font-size:20px; line-height:1; cursor:pointer; }
.tk.tk .flash-close:hover { background:rgba(0,0,0,.06); }
.tk.tk .offline-bar { position:fixed; z-index:60; inset-inline:12px; top:max(10px, env(safe-area-inset-top)); margin:auto; max-width:460px; padding:10px 14px;
  border-radius:999px; background:var(--tk-ink); color:#fff; font-weight:700; font-size:14px; text-align:center; box-shadow:var(--tk-shadow); }
@media (prefers-reduced-motion: reduce) { .tk.tk .is-busy::after { animation-duration:2s; } .tk.tk .flash { transition:none; } }

/* ===== Language menu: globe button + list of full names ===== */
.tk.tk .lang-menu { position:relative; flex-shrink:0; }
.tk.tk .lang-menu > summary { list-style:none; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px;
  border-radius:999px; background:#fff; border:1px solid var(--tk-line); box-shadow:0 1px 2px #2118220a; color:var(--tk-ink);
  font-weight:700; font-size:14px; cursor:pointer; user-select:none; transition:background .15s, border-color .15s; }
.tk.tk .lang-menu > summary::-webkit-details-marker { display:none; }
.tk.tk .lang-menu > summary:hover, .tk.tk .lang-menu[open] > summary { border-color:var(--tk-brand); background:var(--tk-brand-soft); }
.tk.tk .lang-menu svg { fill:none; flex-shrink:0; }
.tk.tk .lang-menu > summary > svg:first-child { color:var(--tk-brand); }
.tk.tk .lang-menu__chevron { color:var(--tk-muted); transition:transform .2s; }
.tk.tk .lang-menu[open] .lang-menu__chevron { transform:rotate(180deg); }
.tk.tk .lang-menu__list { position:absolute; z-index:70; top:calc(100% + 6px); inset-inline-end:0; min-width:170px; padding:6px;
  display:grid; gap:2px; background:#fff; border:1px solid var(--tk-line); border-radius:16px; box-shadow:0 12px 32px #21182226;
  animation:lang-menu-in .16s ease-out; }
.tk.tk .lang-menu__list a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:0 12px;
  border-radius:10px; color:var(--tk-ink); font-weight:600; font-size:15px; text-decoration:none; }
.tk.tk .lang-menu__list a:hover { background:var(--tk-brand-soft); }
.tk.tk .lang-menu__list a[aria-current] { color:var(--tk-brand); font-weight:800; }
.tk.tk .lang-menu--round > summary { height:40px; }
.tk.tk .wa-account-row .lang-menu__list, .tk.tk .wa-language-row .lang-menu__list { top:auto; bottom:calc(100% + 6px); }
@keyframes lang-menu-in { from { opacity:0; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tk.tk .lang-menu__list { animation:none; } }
.tk.tk .language-bar { display:flex; justify-content:flex-end; padding:12px 16px 0; }
.tk.tk .workspace-topbar .lang-menu { margin-inline-start:auto; }
.tk.tk .wa-language-row { display:flex; align-items:center; gap:12px; padding:12px 10px; }
.tk.tk .wa-language-row .wa-list-text { flex:1; min-width:0; }
.tk.tk .wa-account-row .lang-menu { align-self:center; }

/* ===== Arabic / small screens pass ===== */
.tk.tk.worker-shell .att-badge.att-checkin .att-locked h2 { color:var(--tk-ink); font-size:22px; }
.tk.tk .wa-hello h1 bdi { white-space:nowrap; }
.tk.tk .wa-hello h1 { overflow-wrap:anywhere; }
.tk.tk.worker-shell .worker-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tk.tk.worker-shell .att-phone-card { margin-top:0; padding:22px 18px; border-radius:28px; }
.tk.tk .att-phone-art { display:flex; justify-content:center; margin-bottom:6px; }
.tk.tk .team-person .wa-avatar { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:50%;
  background:var(--tk-pink, #f4c0d1); color:var(--tk-brand-ink); font-weight:800; font-size:17px; overflow:hidden; }

/* ===== Motion: small, quick, and off when the phone asks for less motion ===== */
@media (prefers-reduced-motion: no-preference) {
  .tk.tk main.app-shell { animation:tk-enter .28s ease-out both; }
  @keyframes tk-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  .tk.tk :is(.button, .wa-btn, .wa-card, a.wa-card, .wa-tabbar a, .lang-menu > summary, .team-person, .client-card,
             .document-card, .att-round, .capture-button, .role-choice, .wa-list a) {
    transition:transform .12s ease, box-shadow .2s ease, background-color .15s ease, color .15s ease;
  }
  .tk.tk :is(.button, .wa-btn, a.wa-card, .wa-tabbar a, .lang-menu > summary, .client-card, .att-round, .capture-button,
             .role-choice, .wa-list a):active { transform:scale(.97); }
  @media (hover:hover) {
    .tk.tk :is(.client-card, .document-card, a.wa-card, .team-person):hover { transform:translateY(-2px); box-shadow:var(--tk-shadow); }
  }
}
.tk.tk :is(a, button, input, select, textarea, summary):focus-visible { outline:3px solid #bc81a0; outline-offset:2px; }

/* Three-language pass: calmer line breaks and narrow-screen fixes. */
.tk.tk :where(h1, h2, h3, .wa-hello strong) { text-wrap:balance; }
.tk.tk :where(p, small, li, .muted) { text-wrap:pretty; }
.tk.tk :where(.wa-btn, .button) { text-wrap:balance; }
.tk.tk .wa-btn--brand[data-share-mode] { white-space:nowrap; }
@media (max-width:560px) {
  .tk.tk .team-person__actions { flex-basis:100%; display:grid; grid-template-columns:1fr 1fr; }
  .tk.tk .team-person__actions .button { width:100%; padding-inline:10px; text-align:center; }
}
/* Wide tables scroll sideways on phones; a soft edge shows there is more. */
.tk.tk .att-table-wrap { -webkit-overflow-scrolling:touch;
  background:linear-gradient(to right, #fff 30%, #fff0) left / 24px 100% no-repeat local,
             linear-gradient(to left, #fff 30%, #fff0) right / 24px 100% no-repeat local,
             radial-gradient(farthest-side at 0 50%, #3b0a2a26, #0000) left / 12px 100% no-repeat scroll,
             radial-gradient(farthest-side at 100% 50%, #3b0a2a26, #0000) right / 12px 100% no-repeat scroll, #fff; }
.tk.tk .att-table-wrap tbody tr:nth-child(odd) { background:transparent; }
.tk.tk .att-table-wrap .att-table :is(th, td, th small) { white-space:nowrap; }
.tk.tk .att-table tbody th small { display:block; }
/* In phone headers the language button is just the globe; Profile keeps one full language row. */
.tk.tk .lang-menu--round > summary { width:40px; padding:0; justify-content:center; }
.tk.tk .lang-menu--round > summary :is(.lang-menu__current, .lang-menu__chevron) { display:none; }
.tk.tk.worker-shell:has(.wa-language-row) .worker-header .lang-menu { display:none; }
/* Developer mode: per-company edits on the client page. */
.tk.tk .company-tile.is-off { opacity:.65; }
.tk.tk .dev-actions { border-top:1px solid var(--tk-line); padding-top:10px; }
.tk.tk .dev-actions > summary { cursor:pointer; font-weight:700; color:var(--tk-brand); }
.tk.tk .dev-actions form { display:grid; gap:6px; margin-top:10px; }
.tk.tk .dev-actions label { display:grid; gap:4px; font-weight:600; font-size:14px; }
.tk.tk .navigation-account__me { display:grid; min-width:0; color:inherit; text-decoration:none; border-radius:10px; padding:2px 4px; }
.tk.tk .navigation-account__me:hover { background:var(--tk-brand-soft); }
.tk.tk .navigation-account__me small { color:var(--tk-muted); }
/* My account (managers, administrators, owners). */
.tk.tk .tk-account { max-width:640px; display:grid; gap:18px; }
.tk.tk .tk-account__head { display:flex; align-items:center; gap:16px; }
.tk.tk .tk-account__head h1 { margin:0; font-size:26px; }
.tk.tk .tk-account__head p { margin:2px 0 0; color:var(--tk-muted); }
.tk.tk .tk-account__avatar { width:64px; height:64px; flex-shrink:0; display:grid; place-items:center; border-radius:50%;
  background:var(--tk-brand-soft); color:var(--tk-brand); font-size:26px; font-weight:800; }
.tk.tk .tk-account__card { margin:0; background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); }
.tk.tk .tk-account__card > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--tk-line); }
.tk.tk .tk-account__card > div:last-child { border-bottom:0; }
.tk.tk .tk-account__card dt { font-weight:700; color:var(--tk-muted); }
.tk.tk .tk-account__card dd { margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-weight:600; }
.tk.tk .tk-account__chip { padding:3px 10px; border-radius:999px; background:var(--tk-brand-soft); color:var(--tk-brand); font-size:13px; }
.tk.tk .tk-account__out { justify-self:start; }
.tk.tk .navigation-account__me { display:flex; align-items:center; gap:10px; flex:1; }
.tk.tk .main-shop-card { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px; margin-bottom:16px; text-decoration:none; color:inherit;
  border:2px dashed var(--tk-brand); border-radius:var(--tk-radius); background:#fff; }
.tk.tk .main-shop-card img { border-radius:12px; object-fit:contain; }
.tk.tk .main-shop-card > span:nth-child(2) { flex:1; min-width:180px; display:grid; gap:2px; }
.tk.tk .main-shop-card small { color:var(--tk-muted); }
/* Developer home: open any company from the menu; switch bar inside a company. */
.tk.tk .navigation-companies form { margin:0; }
.tk.tk .navigation-companies button { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:10px;
  background:transparent; color:inherit; font:inherit; font-weight:700; text-align:start; cursor:pointer; }
.tk.tk .navigation-companies button:hover { background:var(--tk-brand-soft); }
.tk.tk .navigation-companies img { border-radius:6px; object-fit:contain; background:#fff; }
.tk.tk .navigation-companies span { display:grid; min-width:0; }
.tk.tk .navigation-companies small { color:var(--tk-muted); font-weight:600; }
.tk.tk .dev-switch { display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border-radius:999px; text-decoration:none;
  background:var(--tk-brand-soft); color:var(--tk-brand); }
.tk.tk .dev-switch b { white-space:nowrap; }
/* "Forgot password?" requests for managers and the developer. */
.tk.tk .pw-requests { margin:0 0 16px; padding:14px 16px; background:#fff; border:2px solid var(--tk-brand-soft); border-radius:var(--tk-radius); }
.tk.tk .pw-requests h2 { margin:0 0 8px; font-size:17px; display:flex; align-items:center; gap:8px; }
.tk.tk .pw-requests ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.tk.tk .pw-requests li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.tk.tk .pw-requests li > span { display:grid; }
.tk.tk .pw-requests small { color:var(--tk-muted); }
.tk.tk .pw-requests form { margin:0; }

/* ===== Welcome page (company code) and "request an account" ===== */
.tk.tk.welcome-page { background:var(--tk-bg); min-height:100dvh; }
.tk.tk.welcome-page .app-shell { max-width:none; padding:0 16px 32px; }
.tk.tk .taki-welcome { max-width:420px; margin:8px auto 0; padding:8px 20px 32px; display:grid; gap:16px; }
@media (min-width:640px) {
  .tk.tk .taki-welcome { margin-top:24px; padding:28px 34px 36px; background:var(--tk-surface); border-radius:28px; border:1px solid var(--tk-line); box-shadow:var(--tk-shadow); }
}
.tk.tk .taki-welcome__art { display:grid; place-items:center; margin-bottom:-6px; }
.tk.tk .taki-welcome__title { margin:0; font-size:clamp(32px, 8.5vw, 42px); line-height:1.06; font-weight:900; letter-spacing:-.02em; color:var(--tk-ink); }
.tk.tk .taki-welcome__title span { color:var(--tk-brand); }
.tk.tk .taki-welcome__lead { margin:0; color:var(--tk-muted); font-size:16px; line-height:1.55; }
.tk.tk .taki-welcome__form { display:grid; gap:12px; margin-top:6px; }
.tk.tk .taki-welcome__form input { height:58px; border-radius:18px; border:2px solid var(--tk-line-strong); background:#fff; padding:0 18px; font-size:19px; font-weight:700;
  text-align:center; letter-spacing:.04em; color:var(--tk-ink); transition:border-color .15s, box-shadow .15s; }
.tk.tk .taki-welcome__form input::placeholder { color:var(--tk-muted); font-weight:600; letter-spacing:0; }
.tk.tk .taki-welcome__form input:focus { outline:0; border-color:var(--tk-brand); box-shadow:0 0 0 4px var(--tk-brand-soft); }
.tk.tk .taki-welcome__start { display:grid; place-items:center; height:58px; border:0; border-radius:18px; color:#fff; font-weight:800; font-size:18px; text-decoration:none;
  background:var(--tk-brand); box-shadow:0 8px 20px #79003d33; cursor:pointer; transition:transform .12s, background .15s; }
.tk.tk .taki-welcome__start:hover { background:var(--tk-brand-dark); }
.tk.tk .taki-welcome__start:active { transform:scale(.98); }
.tk.tk .taki-welcome__more { margin:4px 0 0; text-align:center; color:var(--tk-muted); font-size:15px; }
.tk.tk .taki-welcome__more a { color:var(--tk-brand); font-weight:800; text-decoration:none; }
.tk.tk .taki-welcome__error { margin:0; padding:10px 14px; border-radius:14px; background:#fde8ec; color:#a3123d; font-weight:600; }
.tk.tk .taki-request-form { display:grid; gap:12px; }
.tk.tk .taki-request-form label { display:grid; gap:6px; font-weight:700; color:var(--tk-ink); }
.tk.tk .taki-request-form :is(input, select, textarea) { min-height:50px; border-radius:14px; border:2px solid var(--tk-line-strong); background:#fff; padding:10px 14px; font:inherit; font-weight:600; }
.tk.tk .taki-request-form :is(input, select, textarea):focus { outline:0; border-color:var(--tk-brand); box-shadow:0 0 0 4px var(--tk-brand-soft); }
.tk.tk .taki-request-form__trap { position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
/* Welcome: Taakid says hello from a speech bubble; the four friends show what the app does. */
.tk.tk .taki-welcome__art--small { margin-bottom:-10px; }
.tk.tk .tk-hello { display:grid; justify-items:center; gap:2px; }
.tk.tk .tk-hello__bubble { position:relative; padding:8px 18px; border-radius:18px; background:var(--tk-brand-soft); color:var(--tk-brand); font-weight:900; font-size:17px;
  animation:taki-pop .5s cubic-bezier(.2,1.5,.4,1) both .15s; }
.tk.tk .tk-hello__bubble::after { content:""; position:absolute; bottom:-7px; inset-inline-start:calc(50% - 7px); width:14px; height:14px; background:inherit; border-radius:3px; transform:rotate(45deg); }
.tk.tk .tk-family { list-style:none; margin:4px 0 0; padding:14px 6px 10px; display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; border-top:1px solid var(--tk-line); }
.tk.tk .tk-family li { display:grid; justify-items:center; gap:2px; font-size:13px; font-weight:800; color:var(--tk-muted); text-align:center; }
@keyframes taki-pop { from { transform:scale(.3); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .tk.tk .tk-hello__bubble { animation:none; } }
/* Developer: requests from the welcome page. */
.tk.tk .company-requests__list { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.tk.tk .company-request { display:grid; gap:10px; padding:16px; background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); }
.tk.tk .company-request header { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.tk.tk .company-request header small { color:var(--tk-muted); }
.tk.tk .company-request dl { margin:0; display:grid; gap:4px; }
.tk.tk .company-request dl div { display:flex; justify-content:space-between; gap:8px; }
.tk.tk .company-request dt { color:var(--tk-muted); font-weight:600; }
.tk.tk .company-request dd { margin:0; font-weight:700; }
.tk.tk .company-request__message { margin:0; padding:10px; background:#faf5f8; border-radius:10px; }
.tk.tk .company-request__actions { display:flex; flex-wrap:wrap; gap:8px; }
.tk.tk .company-request__actions form { margin:0; }

/* ---------- The Taakid family (characters in empty pages and page art) ---------- */
.tk.tk svg.tk-char, :where(.worker-shell, .manager-app) svg.tk-char { filter:none; overflow:visible; }
.tk.tk .tk-empty-char { display:block; width:max-content; margin:0 auto 6px; }
.tk.tk .tk-empty-line { text-align:center; padding:18px 8px; }
@keyframes tk-char-blink { 0%, 94%, 100% { transform:scaleY(1); } 97% { transform:scaleY(.1); } }
@keyframes tk-char-bob { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.tk.tk .tk-char__eyes { transform-box:fill-box; transform-origin:center; animation:tk-char-blink 5s infinite; }
.tk.tk .tk-char--happy .tk-char__body { animation:tk-char-bob 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tk.tk .tk-char__eyes, .tk.tk .tk-char .tk-char__body { animation:none; } }
/* On wine backgrounds Taakid keeps his real wine colour, with a thin white outline so he stays visible. */
.tk.tk :is(.tk-login-art, .wa-hero-art) svg.tk-char--taki { filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.tk.tk .company-cover-preview { display:block; width:100%; height:140px; object-fit:cover; border-radius:16px; }
/* A character says hello on its own page (closable). Each one has its own soft colour. */
.tk.tk .tk-guide { position:relative; display:flex; align-items:center; gap:10px; margin:10px 0 14px; padding:12px; border-radius:22px; background:var(--guide-bg, #fbeaf0); }
.tk.tk .tk-guide[hidden] { display:none; }
.tk.tk .tk-guide__char { flex-shrink:0; }
.tk.tk .tk-guide__char svg { width:clamp(72px, 22vw, 104px); height:clamp(72px, 22vw, 104px); }
.tk.tk .tk-guide__bubble { position:relative; margin:0; flex:1; min-width:0; padding:12px 14px; padding-inline-end:34px; background:#fff; border-radius:18px; box-shadow:0 4px 14px #2118220f; display:grid; gap:3px; font-size:14px; line-height:1.45; color:var(--tk-muted); text-align:start; }
.tk.tk .tk-guide__bubble::before { content:""; position:absolute; top:calc(50% - 7px); inset-inline-start:-6px; width:14px; height:14px; background:#fff; border-radius:3px; transform:rotate(45deg); }
.tk.tk .tk-guide__bubble strong { color:var(--guide-ink, #79003d); font-size:16px; font-weight:900; }
.tk.tk .tk-guide__close { position:absolute; top:16px; inset-inline-end:16px; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:var(--guide-bg, #fbeaf0); color:var(--tk-muted); font-size:20px; line-height:1; cursor:pointer; }
.tk.tk .tk-guide--waraqa { --guide-bg:#fde8f0; --guide-ink:#b03a6a; }
.tk.tk .tk-guide--saa { --guide-bg:#fff2d6; --guide-ink:#9a6400; }
.tk.tk .tk-guide--sundooq { --guide-bg:#e0f5ee; --guide-ink:#1f7a5c; }
.tk.tk .tk-guide--yawm { --guide-bg:#fbe3ec; --guide-ink:#79003d; }
.tk.tk .tk-guide--taki { --guide-bg:#f6e6ee; --guide-ink:#79003d; }
/* Phones: small text buttons get a finger-sized tap area (about 44px) without looking bigger. */
.tk.tk :is(.att-correct-link, .att-review-edit, .clear-filters, .att-visit-details > summary, .att-table td a) { display:inline-flex; align-items:center; min-height:44px; padding-inline:6px; }
/* iPhones zoom into any field whose text is under 16px and leave the page shifted sideways: on touch screens
   every field is at least 16px (the bigger company-code field keeps its own size). */
@media (pointer: coarse) {
  .tk.tk :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):not(.taki-welcome__form input) { font-size:16px !important; }
}
/* Two-step sign-in setup (developer account). */
.tk.tk .two-step { text-align:start; }
.tk.tk .two-step__steps { padding-inline-start:20px; display:grid; gap:6px; }
.tk.tk .two-step__qr { display:grid; place-items:center; margin:10px 0; }
.tk.tk .two-step__qr svg { width:200px; height:200px; }
.tk.tk .two-step__codes { display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 18px; padding-inline-start:22px; font-size:17px; }