@font-face{font-family:FataYekan;src:url('/assets/fonts/Yekan.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
/* FataERP 0.2.19 design token layer: intentionally lightweight, zero external dependencies. */
@font-face{font-family:CustomFata;src:url('/design/font') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{--design-font:FataYekan,Tahoma,Arial,sans-serif;--design-scale:1;--design-radius:16px;--design-nav-width:258px;--glass-blur:10px;--glass-opacity:.84;--button-blur:6px;--button-opacity:.83;--design-title-size:24px;--design-menu-size:13px}
body,button,input,select,textarea{font-family:var(--design-font)!important}
body{font-size:calc(14px * var(--design-scale))}
.page-head h1{font-size:var(--design-title-size)}
.sidebar .nav-subitem,.sidebar .nav-item{font-size:var(--design-menu-size)}
.sidebar{width:var(--design-nav-width);background:var(--sidebar)}
.panel,.kpi,.nav-group,.fi-sample{border-radius:var(--design-radius)}
/* Theme colors override legacy dark-only hardcodes in one scoped layer. */
body{background:var(--bg);color:var(--txt)}
.topbar{background:var(--sidebar);color:var(--txt)}
.panel,.kpi{background:var(--card);color:var(--txt);border-color:var(--line)}
.kpi:not(.gold) strong,.kpi-label,.panel h2,.panel h3,th,td,select,textarea,input,label,.nav-subitem,.nav-item{color:var(--txt)}
.kpi-label,.nav-caption,.breadcrumbs,.muted{color:var(--muted)}
th{background:var(--sidebar);color:var(--txt)}
td,th{border-color:var(--line)}
tr:hover td{background:color-mix(in srgb,var(--accent) 7%,var(--card))}
input,select,textarea{background:color-mix(in srgb,var(--sidebar) 88%,var(--card));border-color:var(--line)}
.company-pill,.date-chip,.quick-links>a,.nav-subitem:hover{background:color-mix(in srgb,var(--accent) 7%,var(--sidebar));color:var(--txt);border-color:var(--line)}
.nav-group-head,.nav-subitem{color:var(--txt)}
.button.secondary{background:var(--card);color:var(--txt);border-color:var(--line)}
.button:not(.secondary){color:#151719}
/* Backdrop filters only on high-level surfaces; avoid layout thrash on table rows. */
body.design-glass .sidebar,body.design-glass .topbar{background:var(--glass-sidebar);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
body.design-glass .panel,body.design-glass .kpi{background:var(--glass-panel);box-shadow:0 8px 30px #00000010,inset 0 1px 0 #ffffff12}
body.design-glass .panel{border:1px solid color-mix(in srgb,var(--line) 75%,white)}
body.design-glass-buttons .button{background:var(--glass-button);-webkit-backdrop-filter:blur(var(--button-blur));backdrop-filter:blur(var(--button-blur));box-shadow:inset 0 1px 0 #ffffff38,0 4px 12px #00000017}
body.design-glass-buttons .button.secondary{color:var(--txt);background:var(--glass-secondary)}
/* Free scrolling in tiny viewports; touch-friendly controls. */
.design-mini{background:var(--demo-bg)!important;color:var(--demo-text)!important;border-radius:16px;padding:22px;border:1px solid var(--line);display:grid;gap:12px;max-width:650px}
.design-mini strong{color:var(--demo-accent)!important;font-size:22px}
.design-mini button{color:#111820;background:var(--demo-accent);max-width:160px;padding:11px;border-radius:10px}
.design-brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px}
.design-brand-form{display:grid;gap:12px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:14px}
.design-brand-form img{max-width:100%;height:65px;object-fit:contain;object-position:right center}
.design-brand-form input{width:100%;height:auto}
.design-nav-logo{max-width:100%;max-height:100%;object-fit:contain}
.design-font-upload{padding:14px;margin-top:18px;border:1px solid var(--line);border-radius:14px}
.design-font-upload form{display:flex;flex-wrap:wrap;align-items:end;gap:14px}
.design-font-upload form label{flex:1 1 240px}
.design-font-upload input{height:auto}
/* Invoice designer: separate control rails and real print preview link. */
.fi-studio{display:grid;grid-template-columns:minmax(150px,1fr) minmax(200px,1.7fr) minmax(230px,1.1fr);gap:14px;align-items:start}
.fi-studio>aside,.fi-studio>.fi-canvas,.fi-studio>.fi-controls{min-width:0;padding:14px;background:var(--sidebar);border:1px solid var(--line);border-radius:12px}
.fi-canvas{overflow:auto}
.fi-sample{background:#fff;color:#171717;max-width:470px;margin:0 auto;box-shadow:0 8px 32px #0002;padding:15px;min-width:210px;direction:rtl}
.fi-sample header{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;border:1px solid #888;border-radius:9px;padding:12px;margin-bottom:8px}
.fi-sample .fi-fake-row{border:1px solid #bbb;padding:8px;margin:3px 0;border-radius:4px;font-size:12px}
.fi-sample .fi-fake-row:nth-child(even){background:#f5f5f5}
.fi-sample footer{border:1px solid #aaa;padding:10px;font-size:12px}
.fi-controls form{display:grid;gap:12px}
.fi-controls label{margin:0;min-width:0}
.fi-controls input[type=checkbox]{width:18px;height:18px}
.fi-controls input[type=range]{accent-color:var(--accent)}
.fi-controls .button{white-space:normal}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1020px){.fi-studio{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.fi-controls{grid-column:1/-1}}
@media(max-width:740px){.fi-studio{grid-template-columns:1fr}.fi-controls{grid-column:auto}.sidebar{width:min(var(--design-nav-width),85vw);right:calc(-1 * min(var(--design-nav-width),85vw) - 15px)}.sidebar.sidebar-open{right:0}.panel{overflow:visible}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
@supports not (backdrop-filter:blur(1px)){body.design-glass .sidebar,body.design-glass .topbar{background:var(--sidebar)}body.design-glass-buttons .button{background:var(--accent)}}

/* A single printable template: preview of the customer payment information. */
.fi-payment-fields{display:grid;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;margin:12px 0}
.fi-payment-fields legend{font-weight:700;padding:0 7px}
.fi-payment-fields label{display:grid;gap:6px}
.fi-payment-fields label:first-of-type{display:flex;gap:8px;align-items:center}
.fi-fake-payment{display:grid;gap:5px;margin:7px 0;border:1px solid #c84147;border-radius:7px;padding:8px;color:#9f2730;background:#fff9f9;overflow-wrap:anywhere}
.fi-fake-payment span:empty,.fi-fake-payment small:empty{display:none}
@media(max-width:920px){.fi-studio{grid-template-columns:1fr}.fi-canvas{order:0}.fi-controls{order:1}.fi-elements{order:2}}

/* v0.2.20.1 editor usability: grouped responsive controls, progressive disclosure */
.design-groups,.fi-editor-groups{display:grid;gap:10px;grid-column:1/-1;margin:6px 0 14px}.design-group,.fi-editor-section{border:1px solid var(--line,#394456);border-radius:12px;background:color-mix(in srgb,var(--card,#141b24) 70%,transparent);overflow:hidden}.design-group>summary,.fi-editor-section>summary{cursor:pointer;padding:13px 16px;font-weight:750;list-style-position:inside;color:var(--txt,#f5f5f5);outline-offset:-2px}.design-group[open]>summary,.fi-editor-section[open]>summary{border-bottom:1px solid var(--line,#394456)}.design-group-body,.fi-editor-fields{padding:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.fi-editor-payment fieldset{border:0;border-radius:0;margin:0}.design-group label,.fi-editor-section label{min-width:0}.fi-studio .fi-controls{position:relative}.fi-fake-payment{background:#fbfbfb;color:#292929;border-color:#b8b8b8}.fi-editor-section summary:hover,.design-group summary:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}@media(max-width:560px){.design-group-body,.fi-editor-fields{grid-template-columns:1fr}.fi-studio{gap:8px}}
[hidden]{display:none!important}