/* components.css — UI kit styles (see docs/FRONTEND.md) */
/* Buttons */
.btn{--b:var(--surface);--bh:var(--surface-3);--c:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--touch);padding:0 var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--b);color:var(--c);font-weight:600;font-size:var(--fs-md);line-height:1;
  transition:transform var(--dur) var(--ease),background var(--dur),box-shadow var(--dur),border-color var(--dur);user-select:none;-webkit-tap-highlight-color:transparent;text-decoration:none!important;position:relative}
.btn:hover{background:var(--bh)} .btn:active{transform:scale(.97)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn-primary{--b:var(--brand);--bh:var(--brand-600);--c:#fff;border-color:transparent;box-shadow:0 6px 16px -6px rgba(79,70,229,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-ghost{--b:transparent;--bh:var(--brand-soft);border-color:transparent;--c:var(--text-2)}
.btn-soft{--b:var(--brand-soft);--bh:var(--surface-3);--c:var(--brand-text);border-color:transparent}
.btn-danger{--b:var(--danger);--bh:#b91c1c;--c:#fff;border-color:transparent}
.btn-sm{min-height:36px;padding:0 var(--s-3);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-lg{min-height:52px;font-size:var(--fs-lg);border-radius:var(--r-lg)}
.btn-block{display:flex;width:100%}
.btn-icon{width:var(--touch);padding:0}.btn-icon.btn-sm{width:36px}
.btn .spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.icon{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:var(--s-4);position:relative}
.card-glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-border);box-shadow:var(--shadow-md)}
.card-flat{box-shadow:none;background:var(--surface-2)}
.card-click{cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.card-click:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-300)}
.card-click:active{transform:scale(.99)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.card-title{font-size:var(--fs-lg);font-weight:700}
.card.pad-0{padding:0}.card.pad-lg{padding:var(--s-6)}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-4)}
.field>label,.label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)}
.input,.select,.textarea{width:100%;min-height:var(--touch);padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--text);
  transition:border-color var(--dur),box-shadow var(--dur);appearance:none;-webkit-appearance:none}
.textarea{padding:var(--s-3);min-height:96px;resize:vertical;line-height:var(--lh)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--brand-400)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);outline:none}
.input.invalid,.field.invalid .input{border-color:var(--danger)}
.select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>.icon.lead{position:absolute;left:12px;color:var(--text-3);pointer-events:none}
.input-wrap>.input.has-lead{padding-left:40px}
.input-wrap>.trail{position:absolute;right:2px}
.input-wrap>.input.has-trail{padding-right:46px}
.hint{font-size:var(--fs-xs);color:var(--text-3)} .error{font-size:var(--fs-sm);color:var(--danger);display:flex;gap:6px;align-items:center}
.switch{position:relative;display:inline-flex;align-items:center;gap:var(--s-3);min-height:var(--touch);cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch .track{width:44px;height:26px;border-radius:var(--r-full);background:var(--line-strong);transition:background var(--dur);position:relative;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease)}
.switch input:checked+.track{background:var(--brand)} .switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{outline:3px solid var(--focus);outline-offset:2px}

/* Chips / badges / avatar */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s-3);border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);font-weight:500;color:var(--text-2);transition:all var(--dur) var(--ease);white-space:nowrap}
button.chip:hover{border-color:var(--brand-400)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip .x{margin-left:2px;opacity:.7}
.chips{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;padding:2px 0} .chips::-webkit-scrollbar{display:none} .chips.wrap{flex-wrap:wrap;overflow:visible}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;background:var(--surface-3);color:var(--text-2);line-height:1.6;white-space:nowrap}
.badge-brand{background:var(--brand-soft);color:var(--brand-text)} .badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)} .badge-danger{background:var(--danger-bg);color:var(--danger)} .badge-info{background:var(--info-bg);color:var(--info)}
.avatar{--sz:40px;width:var(--sz);height:var(--sz);border-radius:50%;display:inline-grid;place-items:center;flex:none;font-weight:700;font-size:calc(var(--sz)*.4);color:#fff;
  background:linear-gradient(135deg,var(--h1,#6366f1),var(--h2,#4338ca));box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}

/* Skeleton / empty / spinner */
.skeleton{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--skeleton-a) 25%,var(--skeleton-b) 50%,var(--skeleton-a) 75%);background-size:200% 100%;animation:shimmer 1.6s linear infinite;min-height:1em}
.skeleton.circle{border-radius:50%}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-10) var(--s-4);color:var(--text-2)}
.empty .ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text);margin-bottom:var(--s-2)}
.empty .ico .icon{width:30px;height:30px} .empty h3{color:var(--text)} .empty p{max-width:34ch;margin:0}
.spinner-lg{width:32px;height:32px;border:3px solid var(--brand-soft);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite}

/* Tabs */
.tabs{display:flex;gap:2px;padding:4px;border-radius:var(--r-md);background:var(--surface-3);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;min-height:38px;padding:0 var(--s-4);border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;transition:all var(--dur) var(--ease)}
.tab[aria-selected=true]{background:var(--surface);color:var(--brand-text);box-shadow:var(--shadow-sm)}

/* Modal + sheet */
.overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--s-4);animation:fadeIn .15s;backdrop-filter:blur(3px)}
.modal{width:min(100%,460px);max-height:90dvh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:var(--s-5);animation:popIn .22s var(--ease)}
.modal.wide{width:min(100%,720px)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.modal-foot{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-5);flex-wrap:wrap}
.overlay.sheet-o{align-items:flex-end;padding:0}
.sheet{width:min(100%,640px);max-height:88dvh;overflow:auto;background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;border:1px solid var(--line);border-bottom:0;box-shadow:var(--shadow-lg);padding:var(--s-2) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));animation:sheetUp .28s var(--ease)}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:6px auto var(--s-3)}
@media (min-width:700px){.overlay.sheet-o{align-items:center;padding:var(--s-4)}.sheet{border-radius:var(--r-xl);border-bottom:1px solid var(--line)}.sheet::before{display:none}}

/* Toasts */
.toasts{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 var(--s-4)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(100%,420px);padding:12px 16px;border-radius:var(--r-md);background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);animation:popIn .25s var(--ease);font-size:var(--fs-sm);font-weight:500;border-left:4px solid var(--brand-400)}
.toast.ok{border-left-color:var(--ok)} .toast.error{border-left-color:var(--danger)} .toast.warn{border-left-color:var(--warn)}
:root[data-theme=dark] .toast{background:#e8ecf8;color:#0f172a}
@media (min-width:900px){.toasts{bottom:24px;left:var(--rail-w)}}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--s-2);flex-wrap:wrap}
.pager .pg{min-width:var(--touch);min-height:var(--touch);padding:0 10px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:var(--fs-sm)}
.pager .pg[aria-current=page]{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .pg[disabled]{opacity:.4}

/* Stat tiles / lists / banner */
.stat{display:flex;flex-direction:column;gap:2px;padding:var(--s-4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.stat b{font-size:var(--fs-2xl);line-height:1.1;font-variant-numeric:tabular-nums} .stat span{color:var(--text-2);font-size:var(--fs-sm)}
.list{display:flex;flex-direction:column}
.list-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line);min-height:var(--touch)} .list-item:last-child{border-bottom:0}
.banner{padding:10px var(--s-4);font-size:var(--fs-sm);font-weight:600;text-align:center;background:var(--brand-soft);color:var(--brand-text)}
.banner.warn{background:var(--warn-bg);color:var(--warn)} .banner.danger{background:var(--danger-bg);color:var(--danger)} .banner.ok{background:var(--ok-bg);color:var(--ok)}
.alert{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--info-bg);color:var(--text);font-size:var(--fs-sm);align-items:flex-start}
.alert.error{background:var(--danger-bg)} .alert.ok{background:var(--ok-bg)} .alert.warn{background:var(--warn-bg)}
.alert .icon{margin-top:2px}
.divider{height:1px;background:var(--line);margin:var(--s-4) 0;border:0}
.page-in{animation:fadeIn .25s var(--ease)}