/* Canonical KIFNA UI v2. Presentation only: no data, navigation or permission changes.
   Generic element rules stay at element specificity so component rules (password eye clearance, invalid borders) still win. */
@import url('/brand/tokens.css');
@font-face{font-family:Cairo;src:url('/brand/Cairo.ttf') format('truetype');font-style:normal;font-weight:200 1000;font-display:swap}
:root{--red:var(--kifna-red);--ink:var(--kifna-ink);--muted:var(--kifna-muted);--line:var(--kifna-line);--bg:var(--kifna-canvas);--brand:var(--kifna-red);--primary:var(--kifna-red);color-scheme:light}
body{background:var(--kifna-canvas);color:var(--kifna-ink);font-family:Cairo,system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit;font-size:1rem;line-height:1.5;max-width:100%;min-width:0;box-sizing:border-box}
button,input:where(:not([type=checkbox]):not([type=radio])),select{min-height:var(--kifna-touch-target);border-radius:var(--kifna-control-radius)}
input:where(:not([type=checkbox]):not([type=radio])),textarea,select{border:1px solid var(--kifna-control-border);background:var(--kifna-surface);color:var(--kifna-ink);padding:12px 14px}
input::placeholder,textarea::placeholder{color:var(--kifna-muted);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--kifna-red)}
button{font-weight:700;letter-spacing:normal;white-space:normal;overflow-wrap:break-word;transition:background-color .15s,border-color .15s,box-shadow .15s}
button:disabled,input:disabled,textarea:disabled,select:disabled{cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--kifna-red);outline-offset:3px}
:where(a){text-underline-offset:.2em}
h1,h2,h3,h4{color:inherit;line-height:1.4;letter-spacing:normal;overflow-wrap:break-word}
h1{font-size:var(--kifna-type-headline);font-weight:800}h2{font-size:var(--kifna-type-section);font-weight:700}h3{font-size:var(--kifna-type-title);font-weight:700}
.primary,button.primary{background:var(--kifna-red);border-color:var(--kifna-red);color:white;box-shadow:none;min-height:var(--kifna-button-height);font-weight:700}
.primary:hover:not(:disabled),button.primary:hover:not(:disabled){background:var(--kifna-deep-red)}
button.secondary,.kw button.kw-secondary{background:var(--kifna-surface);color:var(--kifna-ink);border-color:var(--kifna-control-border)}
button.secondary:hover:not(:disabled),.kw button.kw-secondary:hover:not(:disabled){background:var(--kifna-hover)}
button.danger{color:var(--kifna-deep-red);border-color:var(--kifna-deep-red)}
.kifna-wordmark{display:block;width:126px;height:auto;object-fit:contain}
.brand,.wordmark{display:flex;align-items:flex-start;gap:12px;flex-direction:column}
.brand small,.wordmark>span{font-size:12px;color:var(--kifna-muted);letter-spacing:normal}
.side,.sidebar{background:var(--kifna-surface);color:var(--kifna-ink);border-inline-end:1px solid var(--kifna-line)}
.side .nav button,.merchant-sidebar nav button{color:var(--kifna-muted);font-weight:600;min-height:48px;border-radius:12px;line-height:1.5}
.side .nav button:hover,.side .nav button.selected,.merchant-sidebar nav button.active{background:var(--kifna-blush);color:var(--kifna-deep-red);border-color:transparent}
.side .nav button.selected,.merchant-sidebar nav button.active{font-weight:700}
.side .side-footer,.side .brand-name small,.merchant-shell,.kw{--muted:var(--kifna-muted);--line:var(--kifna-line)}
.side .side-footer{color:var(--kifna-muted);border-color:var(--kifna-line)}
.merchant-sidebar nav svg{color:currentColor}.merchant-sidebar .wordmark{font-size:inherit}.merchant-sidebar .sidebar-bottom{line-height:1.6}
.auth-story,.brand-panel{background:var(--kifna-red);color:white}
.auth-story :is(h1,h2,h3,small),.brand-panel :is(h1,h2,h3,small){color:white}
.auth-story .kifna-wordmark,.brand-panel .kifna-wordmark{filter:brightness(0) invert(1)}
.auth-card,.table-wrap,.order-card,.product,.merchant-availability,.metrics>div,.kw-panel,.kw-records,.kw-settings-list,.kw-summary,.kw-layout form,.kw-zone-form{border-radius:var(--kifna-card-radius);box-shadow:0 2px 6px #171a2005}
.content,.merchant-main,.kw,.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap{min-width:0}
.merchant-main .page-header h1,.content .heading h1{font-size:var(--kifna-type-headline);font-weight:800;letter-spacing:normal;line-height:1.4}
.merchant-main .page-header p,.kw-note,.kw-list-head p{line-height:1.6;color:var(--kifna-muted)}
.merchant-main .eyebrow,.kw-eyebrow{font-size:12px;font-weight:600;letter-spacing:normal;color:var(--kifna-muted)}
.kw button,.kw input:where(:not([type=checkbox]):not([type=radio])),.kw select,.merchant-toolbar button,.merchant-toolbar select{min-height:48px}
.kw .kw-fields,.kw .kw-panel,.kw .kw-summary{padding:24px}
.kw-fields>.field,.merchant-toolbar{margin-bottom:16px}
.kw-savebar{padding:16px 24px;border-color:var(--kifna-line);box-shadow:none}
.kw-tabs button{font-weight:600;line-height:1.5}.kw-tabs .selected{color:var(--kifna-deep-red);border-bottom-color:var(--kifna-red)}
.kw-segmented{background:var(--kifna-hover);border-radius:12px;gap:4px}.kw-segmented .selected{color:var(--kifna-deep-red);box-shadow:none}
.kw-steps .current{background:var(--kifna-blush);color:var(--kifna-deep-red)}
.kw-steps .done>span{background:var(--kifna-success-bg);color:var(--kifna-success)}
.kw-message{background:var(--kifna-success-bg);color:var(--kifna-success);border-color:var(--kifna-line)}
.kw-message.kw-error,.kw-field-error{color:var(--kifna-deep-red)}.kw-message.kw-error{background:var(--kifna-blush)}
/* Keep native table semantics and every column; scroll the existing wrapper on phones.
   Screen only: printed finance documents keep their own table layout. */
@media screen{
.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;border:1px solid var(--kifna-line);background:var(--kifna-surface)}
.table-wrap table,.table-scroll table,.fin-table-wrap table,.finance-table-wrap table,.merchant-table-wrap table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;margin:0;font-size:14px;line-height:1.5}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table th,:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table td{box-sizing:border-box;padding:14px 16px;text-align:start;vertical-align:middle;border-bottom:1px solid var(--kifna-line);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table thead th{height:56px;font-size:13px;font-weight:700;color:var(--kifna-muted);background:var(--kifna-hover);position:sticky;top:0;z-index:1;white-space:normal}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table tbody td{min-height:56px;background:var(--kifna-surface)}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table tbody tr:nth-child(even)>td{background:#fafbfc}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table tbody tr:hover>td,:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table tbody tr:focus-within>td{background:var(--kifna-blush)}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table tbody tr[aria-selected=true]>td{background:var(--kifna-blush)}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table tbody tr:last-child>td{border-bottom:0}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table button{min-height:48px;font-size:13px;padding:8px 12px}
:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table :where(.numeric,.num){text-align:end}
}
:where(.money,.numeric,.num,[data-money]){font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}
.badge,.status{font-size:12px;font-weight:700;line-height:1.4;border-radius:10px;padding:7px 12px;max-width:100%}
.badge.good,.status.delivered,.status.ready{background:var(--kifna-success-bg);color:var(--kifna-success)}
.badge.warn,.status.pending,.status.preparing,.status.accepted{background:var(--kifna-warning-bg);color:var(--kifna-warning)}
.badge.blue,.status.on_the_way,.status.picked_up{background:var(--kifna-info-bg);color:var(--kifna-info)}
.badge.bad,.status.cancelled,.status.rejected{background:var(--kifna-blush);color:var(--kifna-deep-red)}
.merchant-order.needs-action{border-block-start-color:var(--kifna-red)}
.kw-empty{padding:40px 24px}.kw-empty p{margin-bottom:20px;color:var(--kifna-muted)}
.kw-store-name h3,.kw-settings-row h3{font-size:16px;font-weight:700}.kw-store-name p,.kw-settings-row p{font-size:14px;line-height:1.6}
@media(max-width:800px){.kifna-wordmark{width:108px}.merchant-main .page-header h1,.content .heading h1{font-size:24px}.topbar .row{flex-wrap:wrap}.topbar .row>*{max-width:100%}}
@media(max-width:600px){.kw .kw-fields,.kw .kw-panel,.kw .kw-summary{padding:18px}.kw-savebar{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.merchant-toolbar label{min-width:0;max-width:100%}.kw-choice-search{flex-wrap:wrap}.kw-choice-search input{min-width:0;flex-basis:160px}.kw-settings-row{padding:20px 18px}.kw-steps li{line-height:1.5}}
@media screen and (max-width:800px){.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap{border-radius:12px}:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table th,:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table td{padding:12px}}
@media screen and (max-width:600px){:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table th,:is(.table-wrap,.table-scroll,.fin-table-wrap,.finance-table-wrap,.merchant-table-wrap) table td{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(forced-colors:active){button,input,select,textarea,.badge,.status{border:1px solid ButtonText}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid Highlight}}