/* Агровсесвіт · «Світлий робочий» (28.09.2026).
   Останній шар стилів: спільна оболонка й базові елементи для всіх сторінок.
   Кольори й розміри беруться з tokens.css; тут — лише форма й ієрархія. */

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--color-text);background:var(--color-bg)}
html body h1,html body h2,html body h3{letter-spacing:-.012em;color:var(--color-text)}
html body :focus-visible{outline:2px solid var(--color-green);outline-offset:2px}

/* ——— Бічне меню ——— */
html body .sidebar{width:var(--size-sidebar);padding:16px 12px 14px;background:var(--color-surface);border-right:1px solid var(--color-border)}
html body .brand{font-size:18px;font-weight:700;letter-spacing:-.02em;gap:10px;padding:6px 8px;margin:0 0 14px}
html body .brand small{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--color-text-secondary)}
html body .brand-mark{width:28px;height:32px}
html body .sidebar .nav-section{margin:18px 10px 4px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--color-muted)}
html body .sidebar nav>a{min-height:36px;padding:7px 10px;margin:1px 0;gap:10px;border-radius:8px;font-size:14px;font-weight:450;color:var(--color-text-secondary)}
html body .sidebar nav>a>span{width:18px;flex:0 0 18px}
html body .sidebar nav .ui-icon{width:18px;height:18px;stroke-width:1.75}
html body .sidebar nav>a:hover{background:var(--color-surface-secondary);color:var(--color-text)}
html body .sidebar nav>a.active{background:var(--color-light-green);color:var(--color-text);font-weight:600;box-shadow:none}
html body .sidebar nav>a.active .ui-icon{color:var(--color-green)}
html body .sidebar-art{display:none}
html body .sidebar-tools{margin:18px 8px 8px;padding-top:12px}
html body .sidebar-bottom{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--color-border)}

/* ——— Верхня панель і заголовок сторінки ——— */
html body main{margin-left:var(--size-sidebar);padding:0 32px 28px}
html body .topbar{position:sticky;top:0;z-index:var(--z-sticky);height:var(--size-topbar);margin:0 -32px;padding:0 32px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--color-border)}
html body .global-search-trigger{background:var(--color-surface-secondary);border-color:transparent;border-radius:8px;min-height:36px;color:var(--color-text-secondary)}
html body .global-search-trigger:hover{border-color:var(--color-border-strong);background:var(--color-surface)}
html body .page-heading{min-height:0;padding:26px 0 18px;align-items:flex-end}
html body .page-heading h1{font-size:var(--font-h1);font-weight:650;letter-spacing:-.022em;line-height:1.2;margin:0}
html body .page-heading p{margin:6px 0 0;font-size:14px;color:var(--color-text-secondary)}
html body[data-page] .header-landscape,html body[data-page] .header-slogan{display:none}
html body[data-page=dashboard] .page-heading>div:first-child{max-width:none}

/* ——— Картки, панелі ——— */
html body .ui-card,html body .panel,html body .ui-kpi{border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:none;background:var(--color-surface)}
html body .ui-card-heading h2,html body .panel h2{font-size:17px;font-weight:600}

/* Показники: головний акцент сторінки — велика цифра; іконка стає тихою */
html body .ui-kpi{gap:12px;padding:18px 20px}
html body .ui-kpi-icon{width:32px;height:32px;flex:0 0 32px;border-radius:8px;background:var(--color-surface-secondary);color:var(--color-text-secondary)}
html body .ui-kpi-icon .ui-icon{width:18px;height:18px}
html body .ui-kpi.ui-tone-warning .ui-kpi-icon{background:var(--color-warning-bg);color:var(--color-warning-text)}
html body .ui-kpi.ui-tone-danger .ui-kpi-icon{background:var(--color-danger-bg);color:var(--color-danger-text)}
html body .ui-kpi h3{font-size:13px;font-weight:500;color:var(--color-text-secondary);margin:0 0 4px}
html body .ui-kpi strong{font-size:clamp(24px,2vw,30px);font-weight:650;letter-spacing:-.02em;line-height:1.15}

/* ——— Кнопки й поля ——— */
html body button,html body .button{font-family:inherit;font-weight:550;border-radius:8px;letter-spacing:0}
html body button:not(.primary):not([class*=chip]):not([role=tab]):hover{border-color:var(--color-border-strong)}
html body .primary,html body button.primary{background:var(--color-green);border-color:var(--color-green);color:var(--color-on-primary)}
html body .primary:hover,html body button.primary:hover{background:var(--color-green-hover);border-color:var(--color-green-hover);color:var(--color-on-primary)}
html body input:not([type=checkbox]):not([type=radio]):not([type=range]),html body select,html body textarea{font-family:inherit;border-color:var(--color-border-strong);border-radius:8px}
html body input:not([type=checkbox]):not([type=radio]):focus,html body select:focus,html body textarea:focus{border-color:var(--color-green);box-shadow:0 0 0 3px var(--color-focus);outline:0}
html body input[type=checkbox],html body input[type=radio]{accent-color:var(--color-green)}

/* ——— Таблиці ——— */
html body table{font-variant-numeric:tabular-nums}
html body th{background:var(--color-table-head);color:var(--color-text-secondary);font-size:12px;font-weight:550;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--color-border)}
html body td{border-bottom-color:var(--color-border)}
html body tbody tr:hover>td{background:var(--color-row-hover)}
html body .orders-table th,html body .ord-head,html body .rs2-label,html body .rs2-mres-h,html body .product-category{text-transform:none;letter-spacing:0}

/* ——— Вкладки розділів (Товари та ін.) ——— */
html body .pw-tabs{border-bottom:1px solid var(--color-border);gap:4px}
html body .pw-tabs a{font-weight:500;color:var(--color-text-secondary)}
html body .pw-tabs a[aria-current=page]{color:var(--color-text);font-weight:600}

/* ——— Повідомлення, завантаження ——— */
html body #toast{border-radius:10px;background:var(--color-text);color:#fff;box-shadow:var(--shadow-menu)}
html body .ui-loading span,html body .skeleton{background:var(--color-skeleton)}

@media(max-width:1250px){html body main{margin-left:220px;padding:0 24px 24px}html body .topbar{margin:0 -24px;padding:0 24px}html body .sidebar{width:220px}}
@media(min-width:761px) and (max-width:1050px){html body main{margin-left:76px}html body .sidebar{width:76px;padding:16px 10px}html body .sidebar nav>a{justify-content:center;padding:9px}html body .sidebar .nav-section{display:none}}
@media(max-width:760px){html body main{margin-left:0;padding:0 16px 20px}html body .topbar{margin:0 -16px;padding:0 16px;height:56px}html body .page-heading{padding:18px 0 14px}html body .page-heading h1{font-size:22px}html body .sidebar.open{width:270px}}
@media(prefers-reduced-motion:reduce){html body *{transition:none!important;animation:none!important}}

/* ——— Згортання меню ——— */
html body .nav-collapse{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;margin:auto 0 0;padding:7px 10px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--color-text-secondary);font-size:13px;font-weight:500;text-align:left;cursor:pointer}
html body .nav-collapse:hover{background:var(--color-surface-secondary);color:var(--color-text)}
html body .nav-collapse .ui-icon{width:18px;height:18px;transition:transform var(--duration-hover)}
html body .nav-collapse b{font-weight:500}
html body .nav-collapse+.sidebar-bottom{margin-top:8px}
@media(min-width:1051px){
  html body.nav-collapsed .sidebar{width:68px;padding:16px 10px 14px}
  html body.nav-collapsed main{margin-left:68px}
  html body.nav-collapsed .brand{justify-content:center;padding:6px 0}
  html body.nav-collapsed .brand>span:last-child,html body.nav-collapsed .sidebar nav>a>b,html body.nav-collapsed .sidebar .nav-section,html body.nav-collapsed .sidebar-tools,html body.nav-collapsed .sidebar-bottom,html body.nav-collapsed .nav-collapse b{display:none}
  html body.nav-collapsed .sidebar nav>a,html body.nav-collapsed .nav-collapse{justify-content:center;padding:9px}
  html body.nav-collapsed .sidebar nav>a+p.nav-section+a,html body.nav-collapsed .sidebar nav>p.nav-section{margin:0}
  html body.nav-collapsed .nav-collapse .ui-icon{transform:rotate(180deg)}
  html body.nav-collapsed .sidebar nav>a{position:relative}
  html body.nav-collapsed .sidebar nav>a:hover:after,html body.nav-collapsed .sidebar nav>a:focus-visible:after{display:block;content:attr(aria-label);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:6px 10px;border-radius:8px;background:var(--color-text);color:#fff;font-size:12px;font-weight:500;box-shadow:var(--shadow-menu);z-index:var(--z-dropdown);pointer-events:none}
  html body.nav-collapsed .sidebar{overflow:visible}
}
@media(max-width:1050px){html body .nav-collapse{display:none}}

/* ——— Залишок у картці замовлення ——— */
html body .ord-line-stock{display:block;margin-top:2px;color:var(--color-green-hover)}
html body .ord-line-stock.is-zero{color:var(--color-warning-text)}
html body .ord-line-stock.is-neg{color:var(--color-danger-text)}

/* ——— Вибір товару з картинками ——— */
html body dialog.op-dialog{width:min(880px,94vw);max-width:none;height:min(780px,90vh);max-height:none;padding:0;border:0;border-radius:14px;background:var(--color-surface);box-shadow:0 24px 64px rgba(16,24,40,.22);overflow:hidden}
html body dialog.op-dialog::backdrop{background:var(--color-backdrop)}
.op-box{display:flex;flex-direction:column;height:100%}
.op-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 10px}
.op-head h2{margin:0;font-size:19px;font-weight:650}
html body .op-close{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;background:none;box-shadow:none;border-radius:8px;color:var(--color-text-secondary);cursor:pointer}
html body .op-close:hover{background:var(--color-surface-secondary);color:var(--color-text)}
.op-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:4px 22px 12px;border-bottom:1px solid var(--color-border)}
.op-search{flex:1 1 320px;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--color-border-strong);border-radius:8px;color:var(--color-text-secondary)}
.op-search:focus-within{border-color:var(--color-green);box-shadow:0 0 0 3px var(--color-focus)}
.op-search .ui-icon{width:16px;height:16px;flex:none}
html body .op-search input{flex:1;min-width:0;height:38px;border:0!important;outline:0;box-shadow:none!important;padding:0;background:transparent;font-size:14px}
html body .op-tools select{flex:0 1 240px;min-height:40px}
.op-check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--color-text-secondary)}
.op-hint{margin:0;padding:8px 22px 0;font-size:12.5px;color:var(--color-text-secondary)}
.op-list{flex:1;overflow-y:auto;padding:10px 14px 14px;display:grid;gap:6px;align-content:start}
html body .op-row{display:grid;grid-template-columns:auto 56px minmax(0,1fr) auto 90px;align-items:center;gap:14px;width:100%;min-height:72px;padding:8px 12px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);box-shadow:none;text-align:left;font:inherit;font-weight:400;color:var(--color-text);cursor:pointer}
html body .op-list:not([aria-multiselectable]) .op-row{grid-template-columns:56px minmax(0,1fr) auto 90px}
html body .op-row:hover,html body .op-row:focus-visible{border-color:var(--color-green);background:var(--color-row-hover)}
html body .op-row.is-on{border-color:var(--color-green);background:var(--color-very-light-green)}
.op-tick{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--color-border-strong);border-radius:5px;background:var(--color-surface);color:#fff}
.op-row.is-on .op-tick{background:var(--color-green);border-color:var(--color-green)}
.op-tick .ui-icon{width:14px;height:14px;stroke-width:2.5}
.op-img{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--color-border);border-radius:8px;background:#fff;overflow:hidden;color:var(--color-muted)}
.op-img img{width:100%;height:100%;object-fit:contain}
.op-img .ui-icon{width:22px;height:22px}
.op-main{display:grid;gap:3px;min-width:0}
.op-main b{font-weight:600;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.op-main small{font-size:12.5px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-price{font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.op-stock{text-align:right;font-size:13.5px;font-weight:600;color:var(--color-green-hover);white-space:nowrap;font-variant-numeric:tabular-nums}
.op-stock small{font-weight:500;color:var(--color-text-secondary)}
.op-stock.is-neg{color:var(--color-danger-text)}
.op-stock.is-zero{color:var(--color-warning-text)}
.op-empty{padding:32px;text-align:center;color:var(--color-text-secondary)}
.op-foot{display:flex;align-items:center;gap:10px;padding:12px 22px;border-top:1px solid var(--color-border);background:var(--color-surface)}
.op-count{flex:1;font-size:13px;color:var(--color-text-secondary)}
@media(max-width:640px){html body dialog.op-dialog{width:100vw;height:100dvh;border-radius:0}html body .op-row,html body .op-list:not([aria-multiselectable]) .op-row{grid-template-columns:auto 44px minmax(0,1fr);grid-template-areas:"t i m" "t i p"}html body .op-list:not([aria-multiselectable]) .op-row{grid-template-columns:44px minmax(0,1fr)}.op-img{width:44px;height:44px}.op-price{display:none}.op-stock{grid-column:-2;text-align:left}}
/* Поле вибору товару в діалогах */
html body .op-field{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:5px 10px;border:1px solid var(--color-border-strong);border-radius:8px;background:var(--color-surface);box-shadow:none;text-align:left;font:inherit;font-weight:400;color:var(--color-text);cursor:pointer}
html body .op-field:hover{border-color:var(--color-green)}
.op-field .op-img{width:34px;height:34px;flex:none;border-radius:6px}
.op-field .op-img .ui-icon{width:16px;height:16px}
.op-field-text{display:grid;min-width:0;flex:1}
.op-field-text b{font-weight:550;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-field-text small{font-size:12px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-field.is-empty .op-field-text b{font-weight:400;color:var(--color-text-secondary)}
.op-field>.ui-icon{width:16px;height:16px;flex:none;color:var(--color-text-secondary)}