:root {
  --accent: #111111;
  --accent-dark: #111111;
  --accent-soft: #f2f2f2;
  --primary-background: #111111;
  --focus-ring: #111111;
  --primary-hover-background: #2a2a2a;
  --primary-font-size: 12px;
  --primary-font-weight: 700;
  --primary-height: var(--control-h);
  --primary-radius: 999px;
  --primary-text: #ffffff; /* Koyu yazıya dönüş: yalnız bu değeri değiştirin. */
  --ink: #18181b;
  --muted: #71717a;
  --line: #ececec;
  --canvas: #fafafa;
  --paper: #ffffff;
  --warning: #c88525;
  --warning-soft: #fff4df;
  --success: #276749;
  --success-soft: #e8f5ed;
  --danger: #bd5a4a;
  --danger-soft: #fff0ed;
  --sidebar: #fafafa;
  --sidebar-dark: #f5f5f5;
  --shadow: none;
  --card-radius: 18px;
  --control-radius: 12px;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; flex: 0 0 76px; width: 76px; height: 100vh; background: var(--sidebar); color: var(--ink); border-right: 1px solid #f0f0f0; overflow: visible; z-index: 30; }
.brand { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; height: 67px; flex: 0 0 67px; padding: 0; border-bottom: 1px solid #f3f3f3; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 850; font-size: 19px; letter-spacing: -.07em; }
.brand-mark span { color: #bbb; }
.brand-name { display: none; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.02; }
.brand-name strong { font-weight: 760; }
.brand-name small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .18em; }
.sidebar-caption { display: none; padding: 31px 26px 12px; color: #a1a1aa; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.nav-list { display: grid; justify-items: start; align-self: stretch; width: 100%; gap: 6px; padding: 14px 0 0 16px; overflow: visible; }
.nav-item { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 0; width: max-content; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: #52525b; text-align: left; font-size: 0; font-weight: 530; transition: background .35s ease, box-shadow .35s ease, gap .45s var(--motion-ease); }
.nav-item:hover, .nav-item:focus-visible { gap: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.08); z-index: 5; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.8; }
.nav-item span { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 13.5px; font-weight: 500; transition: max-width .45s var(--motion-ease), opacity .3s ease .08s; }
.nav-item:hover span, .nav-item:focus-visible span { max-width: 180px; opacity: 1; }
.nav-item.active:hover, .nav-item.active:focus-visible { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.sidebar-bottom { margin-top: auto; padding: 18px 13px 17px; }
.help-card { display: flex; gap: 10px; align-items: flex-start; padding: 14px 13px; border: 1px solid #dce1e5; border-radius: 10px; background: #f8f9fa; }
.help-icon { display: grid; place-items: center; flex: 0 0 23px; height: 23px; border-radius: var(--control-radius); background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.help-card strong, .help-card span { display: block; }
.help-card strong { font-size: 12px; }
.help-card span { margin-top: 4px; color: #73808a; font-size: 11px; line-height: 1.42; }
.sidebar-user { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 15px 7px 0; border-top: 1px solid var(--line); }
.user-avatar, .top-avatar { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 750; }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user strong { font-size: 11px; }
.sidebar-user small { margin-top: 3px; color: #8b979f; font-size: 10px; }
.user-dots { margin-left: auto; font-weight: 800; letter-spacing: .05em; }
.main-wrap { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 67px; padding: 0 40px; border-bottom: 1px solid #f3f3f3; background: var(--canvas); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; }
.breadcrumb { color: #8c9aa1; }
.slash { color: #bdc6ca; }
.topbar strong { font-weight: 670; }
.preview-pill { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.topbar-divider { width: 1px; height: 23px; margin: 0 8px; background: var(--line); }
.top-avatar { flex-basis: 32px; height: 32px; font-size: 12px; }
.mobile-menu { display: none !important; }
.mobile-menu-close { display: none !important; margin-left: auto; flex: 0 0 34px; width: 34px; height: 34px; font-size: 25px; line-height: 1; }
.page { max-width: 1240px; margin: 0 auto; padding: 44px 42px 65px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.eyebrow { margin: 0 0 8px; color: var(--accent-dark); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(28px, 2.8vw, 36px); letter-spacing: -.03em; line-height: 1.2; font-weight: 500; }
.lead { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.heading-actions { display: flex; gap: 10px; align-items: center; padding-top: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 680; font-size: 12px; white-space: nowrap; }
.button.primary { font-size: var(--primary-font-size); font-weight: var(--primary-font-weight); height: var(--primary-height); min-height: var(--primary-height); border-radius: var(--primary-radius); }
.button svg { width: 15px; height: 15px; }
.demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: fit-content; max-width: 100%; margin-bottom: 23px; padding: 8px 16px; border: 1px solid #eeeeee; border-radius: 999px; background: var(--canvas); color: #52525b; font-size: 12px; }
.demo-banner-content { display: flex; align-items: center; gap: 10px; }
.demo-banner svg { flex: 0 0 18px; width: 18px; height: 18px; }
.demo-banner strong { font-weight: 770; }
.demo-banner span { font-size: 12px; line-height: 1.55; }
.demo-banner button { flex: none; border: 0; background: transparent; color: var(--accent-dark); font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 23px; }
.stat-card, .panel { border: 1px solid #ededed; border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--shadow); }
.stat-card { min-height: 108px; padding: 14px 16px 13px; box-shadow: none; }
.stat-top { display: flex; justify-content: space-between; align-items: flex-start; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 620; }
.stat-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.stat-icon svg { width: 17px; height: 17px; }
.stat-card strong { display: block; margin-top: 7px; font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.stat-foot { display: block; margin-top: 7px; color: #9aa7ac; font-size: 10px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, .8fr); gap: 17px; }
.panel { min-width: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 26px 14px; }
.panel-head h2, .section-title { margin: 0; font-size: 17px; letter-spacing: -.02em; font-weight: 550; }
.panel-head p { margin: 5px 0 0; color: #a1a1aa; font-size: 11px; }
.text-link { padding: 3px 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { text-decoration: underline; }
.text-link:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 12px 21px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--canvas); color: var(--muted); font-size: 10px; font-weight: 770; letter-spacing: .075em; white-space: nowrap; text-transform: uppercase; }
td { padding: 15px 21px; border-bottom: 1px solid #eef1f2; color: #506069; font-size: 12px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #fff9f5; }
.product-cell { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.product-avatar { display: none; }
.product-cell strong, .product-cell small { display: block; }
.product-cell strong { color: #2d3d45; font-size: 12px; font-weight: 700; }
.product-cell small { margin-top: 4px; color: #98a6ad; font-size: 10px; }
.number { color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-dark); font-size: 10px; font-weight: 720; }
.tag.warn { background: var(--warning-soft); color: #a06c21; }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.archive-action { color: var(--danger); border-color: var(--danger); }
.tag.neutral { background: #eef2f4; color: #617782; }
.tag .tag-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.alert-list { padding: 0 26px 10px; }
.alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid #f4f4f5; }
.alert-symbol { display: block; width: 8px; min-width: 8px; height: 8px; flex: 0 0 8px; margin-right: 6px; border-radius: 50%; background: #ef4444; font-size: 0; }
.alert-row strong { display: block; color: var(--ink); font-size: 12px; line-height: 1.3; font-weight: 500; }
.alert-row small { display: block; margin-top: 5px; color: #a1a1aa; font-size: 11px; line-height: 1.4; }
.alert-row .number { margin-left: auto; font-size: 11px; color: #a1a1aa; font-weight: 400; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 31px 0 14px; }
.section-heading span { color: #95a3aa; font-size: 11px; }
.warehouse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.warehouse-card { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--card-radius); background: #fff; box-shadow: none; text-align: left; }
.warehouse-card:hover { border-color: #ffa680; }
.warehouse-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.warehouse-icon svg { width: 18px; height: 18px; }
.warehouse-card strong { display: block; margin-top: 11px; color: #33464e; font-size: 13px; }
.warehouse-card span { display: block; margin-top: 5px; color: #9aa7ac; font-size: 11px; }
.warehouse-card footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; min-width: 0; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eff2f2; color: #687c83; font-size: 11px; }
.warehouse-card .warehouse-metrics { display: grid; gap: 3px; min-width: 0; margin-top: 0; }
.warehouse-card .warehouse-metrics span { margin-top: 0; white-space: nowrap; font-size: 10px; }
.warehouse-card footer b { flex: none; white-space: nowrap; }
.warehouse-card footer b { color: var(--accent-dark); }
.toolbar { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.movement-toolbar { border-top: 1px solid var(--line); }
.search-box { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 340px; min-width: 190px; padding: 0 11px; height: 35px; border: 1px solid var(--line); border-radius: var(--control-radius); color: var(--muted); }
.search-box svg { width: 15px; height: 15px; flex: none; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-box input::placeholder { color: #a4b1b6; }
.filter-input { flex: 1; min-width: 190px; height: 35px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--control-radius); outline: 0; background: #fff; color: var(--ink); font-size: 12px; }
.filter-input::placeholder { color: #a4b1b6; }
.filter-select { height: 35px; min-width: 150px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: var(--control-radius); background: white; color: var(--muted); font-size: 12px; }
.table-count { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.load-more { display: flex; justify-content: center; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.pagination .button { min-width: 76px; padding: 8px 12px; }
.inline-error { margin: 14px 20px 0; padding: 10px 12px; border-radius: var(--control-radius); background: #fff2ef; color: #9d4f43; font-size: 11px; }
.inline-error button { margin-left: 5px; border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.empty-state { display: grid; justify-items: center; align-content: center; min-height: 300px; padding: 28px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #f4f4f5; color: var(--accent); }
.empty-icon svg { width: 24px; height: 24px; }
.empty-state strong { margin-top: 15px; color: #3a4f56; font-size: 14px; }
.empty-state p { max-width: 340px; margin: 7px 0 0; color: #8a9ba2; font-size: 12px; line-height: 1.55; }
.activity-time { display: block; margin-top: 4px; color: #a7b2b7; font-size: 10px; }
.activity-title { color: #3b4d55; font-weight: 680; }
.period-toggle { display: flex; gap: 6px; padding: 0 26px; }
.product-view-toggle {
  margin: 15px 20px 0;
  padding-inline: 0;
}
.period-button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #71838b; font-size: 11px; font-weight: 700; cursor: pointer; }

.period-button.active, .period-button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.movement-summary-meta { padding: 12px 26px; color: var(--muted); font-size: 11px; }
.result-count, .selection-bar .result-count, .quick-stock-summary.result-count, .warehouse-card .warehouse-metrics .result-count, .alert-group-title.result-count { color: #8b9aa1; font-size: 11px; font-weight: 400; }
.movement-summary-meta strong, .result-count strong { display: inline; margin: 0; color: #34444c; font-size: 16px; }
.movement-summary-list { padding: 0 20px 10px; }
.movement-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.movement-summary-row:hover { background: #fff9f5; }
.movement-summary-row strong, .movement-summary-row small { display: block; }
.movement-summary-row strong { color: #3b4d55; font-size: 12px; }
.movement-summary-row small { margin-top: 4px; color: #98a6ad; font-size: 10px; }
.movement-summary-row .number { flex: none; font-size: 11px; }
.movement-in { color: #2d8a68; }
.movement-out { color: #b35b47; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(24,24,27,.18); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mobile-backdrop { display: none; position: fixed; inset: 0; z-index: 19; background: rgba(25,31,36,.35); }
.detail-drawer { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); padding: 25px; border-left: 1px solid #ececec; background: #fff; box-shadow: -16px 0 48px rgba(0,0,0,.08); transform: translateX(48px); opacity: 0; visibility: hidden; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, visibility 0s linear .55s; overflow: hidden; }
.detail-drawer.open { transform: none; opacity: 1; visibility: visible; transition: transform .72s cubic-bezier(.22,1,.36,1), opacity .55s ease, visibility 0s; }
.product-action-modal { width: min(460px, calc(100vw - 36px)); max-height: calc(100dvh - 36px); padding: 0; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--paper); color: var(--ink); font: inherit; box-shadow: none; overflow: auto; }
.product-action-modal::backdrop { background: rgba(22,42,48,.48); }
.product-action-modal-body { padding: 24px; }
.product-action-modal h2 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.product-action-modal p { margin: 13px 0 24px; color: var(--muted); line-height: 1.6; }
.product-action-modal-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.product-action-modal [data-change-warehouse-defaults], #warehouse-defaults-form .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.product-action-modal:has(.warehouse-archive-confirmation) { width: min(640px, calc(100vw - 36px)); }
.warehouse-archive-confirmation .product-action-modal-actions { flex-wrap: nowrap; align-items: center; }
.warehouse-archive-confirmation .product-action-modal-actions > .text-link { margin-right: auto; text-align: left; }
.warehouse-archive-confirmation .product-action-modal-actions > .button { flex-shrink: 0; }
.warehouse-archive-confirmation h2, .warehouse-archive-confirmation .text-link { white-space: normal; overflow-wrap: anywhere; }
.warehouse-archive-confirmation [data-archive-product-sample] { display: inline; min-height: 0; padding: 0; font: inherit; }
.warehouse-archive-confirmation #warehouse-archive-products { max-height: 180px; overflow: auto; overflow-wrap: anywhere; margin-bottom: 24px; }
@media (max-width: 480px) {
  .warehouse-archive-confirmation .product-action-modal-actions { flex-direction: column; align-items: stretch; }
  .warehouse-archive-confirmation .product-action-modal-actions > .text-link { margin-right: 0; }
}
.product-change-list { margin: 18px 0; padding-left: 22px; overflow-wrap: anywhere; line-height: 1.7; }
.product-edit-history { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.product-edit-history span { color: var(--muted); font-size: 12px; }
.product-edit-section, #stock-correction-form { min-width: 0; }
#stock-correction-form textarea { box-sizing: border-box; width: 100%; min-height: 88px; font: inherit; }
@media (max-width: 1024px) { .product-edit-section input, .product-edit-section select, #stock-correction-form input, #stock-correction-form select, #stock-correction-form textarea { max-width: 100%; min-width: 0; } .product-edit-section button, #stock-correction-form button { min-height: 44px; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head small { color: #8b9da3; font-weight: 750; letter-spacing: .08em; }
.icon-button { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: var(--control-radius); }
.drawer-product { display: flex; gap: 13px; align-items: center; margin: 28px 0; }
.drawer-product .product-avatar { flex-basis: 49px; height: 49px; font-size: 16px; }
.drawer-product h2 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.04em; }
.drawer-product p { margin: 0; color: #92a1a7; font-size: 12px; }
.drawer-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.drawer-section h3 { margin: 0 0 14px; font-size: 13px; }
.detail-row { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; color: #8b9da3; font-size: 12px; }
.detail-row strong { color: var(--ink); font-weight: 690; text-align: right; }
.drawer-note { margin-top: 23px; padding: 12px; border-radius: 8px; background: #fff8f3; color: #745245; font-size: 11px; line-height: 1.5; }
.draft-intro { margin: 22px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.draft-form { display: grid; align-content: start; gap: 15px; }
.draft-field { display: grid; align-content: start; margin: 0; padding: 0; gap: 6px; color: #40505a; font-size: 12px; font-weight: 700; }
.draft-field input, .draft-field select { width: 100%; min-height: 39px; padding: 0 11px; border: 1px solid #cfd6da; border-radius: var(--control-radius); background: #fff; color: var(--ink); font-weight: 400; }
.production-plan [data-component-source] { min-height: 44px; }
.draft-form .button { margin-top: 0; }
.edit-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.edit-form-actions .button { min-width: 0; min-height: 44px; padding-inline: 8px; white-space: normal; text-align: center; }
.draft-preview { margin-top: 20px; padding: 16px; border: 1px solid #efd3be; border-radius: 9px; background: #fff9f5; }
.draft-preview h3 { margin: 0 0 10px; font-size: 13px; }
.draft-preview .detail-row { border-top: 1px solid #f4e4d9; }
.recipe-components-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.recipe-components-heading h3 { margin: 0; font-size: 13px; }
#recipe-components { display: grid; gap: 12px; }
.recipe-component-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfb; }
.recipe-component-quantity { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.recipe-remove { justify-self: end; font-size: 11px; }
.recipe-add-component { position: sticky; bottom: -25px; z-index: 1; display: block; width: calc(100% + 10px); margin: 4px -5px 0; padding: 11px 5px 14px; background: #fff; text-align: left; }
.draft-preview h3:not(:first-child) { margin-top: 20px; }
.warehouse-detail-title { display: flex; gap: 12px; align-items: center; margin: 26px 0 6px; }
.warehouse-detail-title .warehouse-icon { flex: 0 0 46px; height: 46px; }
.warehouse-detail-title h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.04em; }
.warehouse-detail-title p { margin: 0; color: var(--muted); font-size: 12px; }
.warehouse-stock-list { display: grid; gap: 0; }
.warehouse-stock-list .detail-row { border-bottom: 1px solid var(--line); }
.warehouse-stock-list .detail-row strong { white-space: nowrap; }
.warehouse-stock-list .assigned-zero { color: var(--muted); }
.warehouse-stock-list .assigned-zero small { display: block; color: var(--muted); font-size: 10px; }
.assigned-heading { margin: 22px 0 8px; font-size: 12px; }
.warehouse-detail-actions { display: flex; margin-top: 20px; }
.movement-detail-title { display: flex; gap: 13px; align-items: center; margin: 28px 0 20px; }
.movement-detail-title .stat-icon { flex: 0 0 44px; height: 44px; }
.movement-detail-title h2 { margin: 0 0 5px; font-size: 19px; letter-spacing: -.04em; }
.movement-detail-title p { margin: 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .warehouse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page { padding: 30px; } }
@media (max-width: 900px) { .topbar { position: sticky; top: 0; z-index: 18; } .sidebar { align-items: stretch; width: min(280px, calc(100vw - 48px)); position: fixed; left: 0; transform: translateX(-100%); transition: transform .22s; } .sidebar.open { transform: translateX(0); } .mobile-backdrop:not([hidden]) { display: block; } .mobile-menu { display: grid !important; }
.mobile-menu-close { display: grid !important; place-items: center; } .topbar { padding: 0 18px; } .page { padding: 24px 17px 50px; } .page-heading { flex-direction: column; } .heading-actions { padding-top: 0; } .warehouse-grid { grid-template-columns: 1fr; } .demo-banner { align-items: flex-start; } .preview-pill { font-size: 0; } .preview-dot { margin-right: 0; } .topbar-divider { margin: 0 1px; } }
@media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr; gap: 10px; } .stat-card { min-height: 90px; padding: 14px; } .stat-card strong { font-size: 44px; } .stat-label { font-size: 11px; } .period-toggle { flex-wrap: wrap; } .movement-summary-card .panel-head { align-items: flex-start; flex-wrap: wrap; } .movement-summary-card .panel-head > div { min-width: 0; flex: 1 1 100%; } .movement-summary-card .text-link { margin-left: auto; } .movement-summary-row { align-items: flex-start; } .movement-summary-row > span:first-child { min-width: 0; overflow-wrap: anywhere; } .movement-summary-row .number { white-space: nowrap; } .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; } .search-box { grid-column: 1 / -1; max-width: none; width: 100%; } .filter-input { grid-column: 1 / -1; flex: none; min-width: 0; width: 100%; } .filter-select { width: 100%; min-width: 0; padding-right: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .table-count { margin-left: 0; } .demo-banner { display: block; } .demo-banner button { margin: 10px 0 0 28px; padding: 0; } .detail-drawer { padding: 18px max(18px, env(safe-area-inset-right)) 24px max(18px, env(safe-area-inset-left)); } .recipe-component-quantity { grid-template-columns: 1fr; } .recipe-add-component { position: static; width: 100%; margin: 4px 0 0; padding-bottom: 11px; } }
@media (max-width: 500px) { .toolbar { grid-template-columns: minmax(0, 1fr); } .search-box, .filter-input { grid-column: 1; } }
@media (max-width: 500px) {
  .product-select { display: inline-grid; place-items: center; width: 24px; min-width: 24px; height: 32px; margin-right: 6px; vertical-align: middle; }
  .product-select input { width: 20px; height: 20px; margin: 0; }
  .selection-bar { width: 100%; flex-wrap: wrap; }
  .selection-bar .button { flex: 1 1 auto; }
  .product-table-scroll { overflow-x: hidden; }
  .product-table { table-layout: fixed; }
  .product-table th:first-child, .product-table td:first-child { width: 68%; }
  .product-table th:last-child, .product-table td:last-child { width: 32%; }
  .product-table th, .product-table td { padding-left: 12px; padding-right: 12px; }
  .product-table .product-cell { min-width: 0; }
  .product-table .product-cell span { min-width: 0; }
  .product-table .product-cell strong {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  .product-table .product-stock {
    white-space: nowrap;
    text-align: right;
  }
  .product-table th:last-child { text-align: right; }
  .product-table .product-cell strong .tag { white-space: normal; }
  #critical-threshold-form input { min-height: 44px; }
  .critical-bulk-modal input, .critical-bulk-modal .button { min-height: 44px; }
}
.selection-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 12px 14px; border: 1px solid #f0c8b2; border-radius: 9px; background: var(--accent-soft); }
.selection-bar span { font-weight: 700; }
.selection-bar small { color: var(--danger); margin-right: auto; }
.product-select { position: relative; display: inline-flex; align-items: center; margin-right: 8px; }
.product-select input:focus-visible + .product-select-box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.product-select input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.product-select-box { display: inline-block; width: 18px; height: 18px; border: 1px solid #aeb9bf; border-radius: 4px; background: #fff; }
.product-select input:checked + .product-select-box { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px #fff; }
.bulk-archive-list { margin: 0 0 22px; padding-left: 20px; color: var(--muted); line-height: 1.7; }

.quick-stock-page { padding: 24px; }
.quick-stock-intro { margin: 0 0 20px; }
.quick-stock-intro h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.04em; }
.quick-stock-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.quick-stock-page .draft-form { max-width: none; }
.quick-stock-summary { margin: 0 0 13px; color: var(--muted); font-size: 11px; font-weight: 700; }
.quick-stock-preview { margin-top: 22px; }
.quick-stock-preview .table-scroll { margin: 0; }
.quick-stock-preview table { width: 100%; min-width: 0; table-layout: auto; }
.quick-stock-preview th, .quick-stock-preview td { padding-left: 16px; padding-right: 16px; }
.quick-stock-preview td { vertical-align: top; }
.quick-stock-preview td:first-child { width: 34%; white-space: normal; }
.quick-stock-preview td:nth-child(2) { width: 22%; white-space: normal; }
.quick-stock-preview td strong, .quick-stock-code { display: block; }
.quick-stock-code { margin-top: 4px; color: var(--muted); font-size: 10px; }
#quick-stock-file { min-height: 44px; padding: 8px; }
.quick-stock-apply { width: 100%; margin-top: 16px; }
.transfer-page { padding: 24px; }
.transfer-warehouse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.transfer-item { display: grid; grid-template-columns: 1.5fr .8fr 1fr auto; gap: 12px; align-items: end; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; }
.transfer-available { color: var(--muted); font-size: 11px; padding-bottom: 12px; }
.telegram-panel { margin-top: 20px; }
.telegram-manual-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 18px 21px 21px; }
.telegram-manual-form label { display: grid; gap: 6px; min-width: 0; color: #52646c; font-size: 12px; }
.telegram-manual-form input, .telegram-manual-form select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--control-radius); font: inherit; }
.telegram-manual-form #telegram-manual-hint { grid-column: 1 / -1; grid-row: 2; margin: -6px 0 0; color: var(--muted); font-size: 11px; }
.telegram-manual-form .inline-error { grid-column: 1 / -1; }
.telegram-manual-form > .button { justify-self: start; }
.telegram-table td { vertical-align: middle; }
.telegram-table td:first-child strong { color: #354850; }
.telegram-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.telegram-actions .button { min-height: 32px; padding-inline: 10px; }
.telegram-switch { display: inline-flex; align-items: center; gap: 7px; color: #52646c; font-size: 11px; white-space: nowrap; cursor: pointer; }
.telegram-switch input { width: 16px; height: 16px; accent-color: var(--accent); }
.telegram-stale { margin-bottom: 12px; padding: 11px 14px; border: 1px solid #f1ddbb; border-radius: 8px; background: #fffaf0; color: #805f2d; font-size: 12px; }
.telegram-history { display: grid; gap: 0; margin: 0; padding: 0 21px; list-style: none; }
.telegram-history li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid #eef1f2; color: #42545c; font-size: 12px; }
.telegram-history time { flex: none; color: #8b9ba1; font-size: 10px; }
.telegram-history-more { padding: 8px 21px 14px; }
.telegram-empty-history { padding: 0 21px 18px; color: var(--muted); font-size: 12px; }
.telegram-table .inline-error { margin: 12px; }
@media (max-width: 700px) {
  .telegram-manual-form { grid-template-columns: 1fr; padding: 16px 15px; }
  .telegram-manual-form #telegram-manual-hint { grid-row: auto; }
  .telegram-manual-form > .button { width: 100%; }
  .telegram-panel .panel-head { align-items: flex-start; padding: 17px 15px; }
  .telegram-table, .telegram-table tbody { display: block; width: 100%; min-width: 0; }
  .telegram-table thead { display: none; }
  .telegram-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; padding: 14px 15px; border-top: 1px solid var(--line); }
  .telegram-table td { min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .telegram-table td:first-child { grid-column: 1 / -1; }
  .telegram-table td:last-child { grid-column: 1 / -1; }
  .telegram-table td:nth-child(2)::before { content: 'ID '; color: #8b9aa2; }
  .telegram-actions { gap: 6px; }
  .telegram-actions .button { white-space: normal; }
}
@media (max-width: 500px) { .transfer-warehouse-grid, .transfer-item { grid-template-columns: 1fr; } .transfer-item .text-link { min-height: 40px; } .transfer-page .button, .transfer-page select, .transfer-page input { min-height: 44px; } }
@media (max-width: 1024px) {
  #menu-button, #mobile-menu-close, .icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .period-button, .button, .filter-select, .search-box, .toolbar select, .toolbar input:not([type="checkbox"]), .draft-form select, .draft-form input:not([type="checkbox"]), .product-action-modal-actions .button { min-height: 44px; }
  .search-box input { height: 100%; min-height: 44px; }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .product-select { min-width: 32px; min-height: 44px; justify-content: center; }
  .product-action-modal-body input:not([type="checkbox"]) { min-height: 44px; }
}
@media (max-width: 500px) {
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-left .breadcrumb, .topbar-left .slash { display: none; }
  #breadcrumb-page { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table-scroll:has(> .movement-table), .table-scroll:has(> .recipe-table) { overflow-x: hidden; }
  .movement-table, .recipe-table, .movement-table tbody, .recipe-table tbody { display: block; width: 100%; min-width: 0; }
  .movement-table thead, .recipe-table thead { display: none; }
  .recipe-table:has([data-select-visible-recipes]) thead { display: block; }
  .recipe-table:has([data-select-visible-recipes]) thead th:first-child { grid-column: 1 / -1; padding: 0; }
  .recipe-table:has([data-select-visible-recipes]) thead th:not(:first-child) { display: none; }
  .movement-table tr, .recipe-table tr { display: grid; gap: 7px 8px; padding: 13px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
  .movement-table td, .recipe-table td { min-width: 0; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .movement-table .tag, .recipe-table .tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .movement-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .movement-table td:first-child { grid-column: 1 / 3; grid-row: 1; }
  .movement-table td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; font-weight: 750; }
  .movement-table td:nth-child(2), .movement-table td:nth-child(3), .movement-table td:nth-child(5) { grid-row: 2; color: var(--muted); font-size: 11px; line-height: 1.4; }
  .movement-table td:nth-child(2) { grid-column: 1; }
  .movement-table td:nth-child(3) { grid-column: 2; }
  .movement-table td:nth-child(5) { grid-column: 3; }
  .movement-table td:nth-child(5)::before { content: '· '; }
  .movement-table .activity-time { display: none; }
  .recipe-table tr { grid-template-columns: minmax(0, 1fr) auto; }
  .recipe-table td:first-child { grid-column: 1; grid-row: 1; }
  .recipe-table td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; }
  .recipe-table td:nth-child(2), .recipe-table td:nth-child(3) { grid-row: 2; color: var(--muted); font-size: 11px; line-height: 1.4; }
  .recipe-table td:nth-child(2) { grid-column: 1; }
  .recipe-table td:nth-child(3) { grid-column: 2; text-align: right; }
  .recipe-table td:nth-child(3)::before { content: '· '; }
}
.product-edit-history small { display: block; margin-top: 2px; color: #6d7f86; }
.product-history-full { max-height: none; overflow: visible; margin: 8px 0 12px; }
[data-open-product-history] { margin-top: 8px; min-height: 44px; }
.drawer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.drawer-actions .button { min-height: 44px; }
.drawer-actions .button:not(.primary)[aria-expanded="true"] { border-color: var(--accent-dark); }
.recipe-actions-section .drawer-actions { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.recipe-actions-section .drawer-actions .button { min-width: 0; white-space: normal; }
.recipe-actions-section .recipe-component-row, .recipe-actions-section .draft-field { min-width: 0; }
.recipe-actions-section input, .recipe-actions-section select { min-width: 0; max-width: 100%; }
.recipe-actions-section .drawer-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recipe-actions-section .drawer-actions .button { white-space: normal; line-height: 1.2; padding-left: 6px; padding-right: 6px; }
.recipe-plan-shortcut { margin-top: var(--control-gap); }
.recipe-more-actions > summary { cursor: pointer; min-height: var(--control-h); display: list-item; align-content: center; }
.recipe-secondary-actions { display: flex; flex-wrap: wrap; gap: var(--control-gap); margin-top: var(--control-gap); }
.product-actions-section [data-edit-container]:not(:empty), .product-actions-section [data-correction-container]:not(:empty) { margin-top: 16px; }
.product-photo-area { margin: 8px 0 22px; }
.product-photo-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.product-photo-open img, .product-photo-empty { display: block; width: 100%; max-height: 220px; border-radius: 10px; object-fit: contain; background: #f1f4f3; }
.product-photo-empty { display: grid; place-items: center; height: 130px; color: var(--muted); }
.product-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.product-photo-actions .button { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.product-photo-preview, .product-photo-large { display: block; width: 100%; max-height: 65dvh; object-fit: contain; margin: 16px 0; border-radius: 8px; }

.account-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.account-card { width: min(100%, 440px); padding: 28px; }
.account-card h1 { margin-bottom: 24px; }
.account-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.account-user { padding: 20px; border-bottom: 1px solid var(--border, #e5e7eb); }
.account-user .account-controls { margin-top: 12px; }
.account-secret { overflow-wrap: anywhere; user-select: all; font-size: 1.25rem; }

.account-telegram-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 4px 0; padding: 3px 8px; border-radius: 999px; background: var(--canvas); color: var(--muted); font-size: 11px; line-height: 1.4; vertical-align: middle; }
.actor-telegram { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.actor-telegram svg { display: block; flex: none; }
.account-telegram-badge.linked { background: var(--success-soft); color: var(--success); }
.account-telegram-badge svg { width: 13px; height: 13px; flex: none; }

/* Beside v2 overview summary cards. */
.summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 16px; margin-bottom: 28px; }
.summary-strip button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 128px; padding: 22px 24px; border: 1px solid #ededed; border-radius: var(--card-radius); background: var(--paper); color: var(--muted); font-size: 13px; transition: background-color .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease; }
.summary-strip strong { margin-left: 0; font-size: 44px; font-weight: 400; letter-spacing: -.04em; color: var(--accent); line-height: 1; }
.summary-strip button span[aria-hidden] { position: absolute; top: 20px; right: 22px; color: #c4c4c8; transition: transform .22s ease, color .22s ease; }
.summary-strip button:not(:disabled):hover { transform: translateY(-2px); border-color: #d4d4d8; box-shadow: 0 8px 22px rgba(0,0,0,.06); background: var(--paper); }
.summary-strip button:not(:disabled):hover span[aria-hidden] { transform: translateX(3px); color: var(--accent); }

/* 17-P1 shared presentation */
.avatar-controls { position: relative; }
.top-avatar { width: 44px; height: 44px; min-height: 44px; border: 0; font-size: 17px; }
.avatar-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; min-width: 210px; max-width: calc(100vw - 36px); padding: 7px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--shadow); }
.avatar-menu button, .avatar-menu a { display: block; width: 100%; min-height: 44px; border: 0; border-radius: 6px; padding: 10px 12px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
.avatar-menu button:hover, .avatar-menu a:hover, .avatar-menu :focus-visible { background: var(--accent-soft); }

.dashboard-grid > .panel:not(.movement-summary-card) { padding: 0 21px 21px; }
.dashboard-grid > .panel:not(.movement-summary-card) .alert-list { padding-left: 0; padding-right: 0; }
.alert-group-title { margin: 18px 0 8px; padding: 0 26px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: none; }
.product-name-selection { display: flex; align-items: center; gap: 8px; min-width: 0; }
.product-name-selection .product-cell { min-width: 0; }
.product-select { flex: 0 0 44px; min-width: 44px; width: 44px; height: 44px; min-height: 44px; justify-content: center; margin: 0; }
.tag.success { background: var(--success-soft); color: var(--success); }
.tag.role-admin { background: #ede9fa; color: #625090; }
.tag.role-warehouse-manager { background: #e5effc; color: #285b99; }
.tag.role-staff { background: #def4ef; color: #226d64; }
.warehouse-card .warehouse-icon, .person-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 750; }
.avatar-blue { background: var(--avatar-blue-surface) !important; color: var(--avatar-blue-text) !important; }
.avatar-green { background: var(--avatar-green-surface) !important; color: var(--avatar-green-text) !important; }
.avatar-purple { background: var(--avatar-purple-surface) !important; color: var(--avatar-purple-text) !important; }
.avatar-orange { background: var(--avatar-orange-surface) !important; color: var(--avatar-orange-text) !important; }
.avatar-rose { background: var(--avatar-rose-surface) !important; color: var(--avatar-rose-text) !important; }
.pagination { flex-wrap: wrap; gap: 8px; }
.pagination .button { min-width: 44px; min-height: 44px; }
.pagination form, .pagination label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pagination input { width: 64px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--control-radius); padding: 8px; }
[data-pagination-error] { flex-basis: 100%; color: var(--danger); }
.searchable-select { position: relative; min-width: 0; width: 100%; }
.searchable-input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--paper); color: var(--ink); padding: 10px 12px 10px 34px !important; font-weight: 400; }
.searchable-input:disabled { opacity: .6; }
.searchable-mark { position: absolute; left: 12px; top: 12px; z-index: 1; font-size: 20px; line-height: 1; color: var(--muted); pointer-events: none; }
.searchable-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; left: 0; top: 0; padding: 0 !important; }
.searchable-options { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; z-index: 50; max-height: 270px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; background: var(--paper); color: var(--ink); font-weight: 400; }
.searchable-options [role="option"] { padding: 12px; min-height: 44px; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.searchable-options [role="option"]:hover, .searchable-options [aria-selected="true"] { background: var(--accent-soft); }
.searchable-options p { margin: 8px; font-size: 12px; }
.panel:not(.detail-drawer):has(.searchable-select) { overflow: visible; }
.toolbar .searchable-select { flex: 1; max-width: 240px; }
.draft-field, .transfer-item > *, .manual-output-fields { min-width: 0; }
.manual-output-fields { display: grid; gap: 15px; }
.row-remove { min-height: 44px; margin-top: 0 !important; }
.row-add, .recipe-add-component { position: static; width: auto; justify-self: center; margin: 8px 0; min-height: 44px; padding: 10px 16px; background: var(--paper); }
.password-control { display: flex; position: relative; min-width: 0; }
.password-control input { min-width: 0; padding-right: 50px; }
.password-eye { position: absolute; right: 1px; top: 0; width: 44px; height: 100%; min-height: 44px; border: 0; border-radius: var(--control-radius); background: transparent; color: var(--ink); cursor: pointer; }
.password-control input { min-height: 44px; }
.import-help { font-size: 12px; color: var(--muted); line-height: 1.6; }
.import-example { margin-bottom: 14px; }
.import-example summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--accent-dark); }
.account-user { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.person-identity { display: flex; gap: 12px; flex: 1; min-width: 180px; }
.person-avatar { flex: 0 0 40px; }
.person-identity small { display: block; margin: 5px 0; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.person-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.person-notifications { display: grid; gap: 8px; max-width: 220px; font-size: 12px; }
.person-notifications small { color: var(--muted); }
.notification-switch { display: flex; gap: 8px; align-items: center; min-height: 44px; }
.notification-switch input { appearance: none; width: 38px; height: 22px; border-radius: 20px; background: #adb6bd; position: relative; cursor: pointer; }
.notification-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; }
.notification-switch input:checked { background: var(--success); }
.notification-switch input:checked::after { left: 19px; }
.notification-switch input:disabled { opacity: .5; cursor: not-allowed; }
.person-actions { max-width: 100%; }
.person-action-list { display: grid; gap: 8px; margin-top: 8px; }
.person-actions summary { cursor: pointer; min-height: 44px; }
.person-actions .danger-action { color: var(--danger); }
.account-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.account-card dt { color: var(--muted); }
.account-card dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #identity-label { font-size: 12px; max-width: 210px; overflow-wrap: anywhere; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .searchable-select { max-width: none; }
  .account-user { flex-direction: column; gap: 16px; }
  .person-actions, .person-notifications { width: 100%; max-width: none; }

  .transfer-item { grid-template-columns: minmax(0, 1fr); }
  .row-remove { width: 100%; }
}
/* P2: compact summary chips and grouped people controls. */

.person-identity { flex: 0 1 330px; }
.account-user { gap: 20px; }
.person-actions { align-self: center; }
.person-action-list { display: flex; flex-wrap: wrap; gap: 6px; }
.person-action-list .icon-button { width: 44px; height: 44px; padding: 8px; font-size: 20px; }
.telegram-logo { width: 16px; height: 16px; vertical-align: middle; }
.notification-switch input:checked { background: #22c55e; }
.warehouse-card-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.warehouse-card-group .warehouse-card { width: 100%; flex: 1; }
.warehouse-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.production-warehouse-setting { margin: 16px 0; padding: 20px; }
.setting-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.setting-form .draft-field { flex: 1 1 220px; }
@media (max-width: 760px) {
  .person-identity { flex: 0 1 auto; }

}
.person-action-list .icon-button { position: relative; overflow: visible; }
.person-action-list .icon-button:is(:hover, :focus-visible)::after { content: attr(aria-label); position: absolute; z-index: 30; bottom: calc(100% + 6px); right: 0; width: max-content; max-width: 220px; padding: 6px 9px; border-radius: 6px; background: var(--ink); color: white; font-size: 12px; font-weight: 500; pointer-events: none; }
:root {
  --drawer-control-surface: #fff;
  --placeholder: #9aa0a6;
}
.detail-drawer {
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
  --muted: var(--panel-muted);
}
.detail-drawer :is(small, .drawer-product p) { color: var(--muted); }
.detail-drawer .text-link { color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) { .detail-drawer { transition: none; } }
input::placeholder, textarea::placeholder, .searchable-input::placeholder { color: var(--placeholder); opacity: 1; }
.searchable-mark svg { width: 18px; height: 18px; display: block; }
.product-action-modal-body :is(.inline-error, [data-account-error], [data-p2-error]):empty,
.inline-error[hidden] { display: none; }
.account-user[data-user-card] { display: grid; grid-template-columns: minmax(180px, 1fr) 170px 520px; align-items: center; gap: 20px; }
.person-identity { align-items: center; min-width: 0; }
.person-notifications { max-width: none; align-self: center; gap: 2px; }
.person-switches { display: flex; align-items: center; gap: 12px; }
.person-notifications > small { font-size: 11px; font-weight: 400; }
.person-actions { justify-self: end; align-self: center; }
.person-action-list { display: grid; grid-template-columns: 76px 64px 120px 134px 58px; gap: 8px; margin-top: 0; }
.person-action-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.person-action-list .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 44px; border-radius: 999px; padding: 10px; font-size: 12px; }
.person-action-list svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 2; }
.panel:has([data-user-card]) > .panel-head { padding-bottom: 8px; }
.panel > [data-account-error]:empty { display: none; }
@media (max-width: 1280px) {
  .account-user[data-user-card] { grid-template-columns: minmax(180px, 1fr) auto; }
  .account-user[data-user-card] .person-actions { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .account-user[data-user-card] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .person-actions { justify-self: start; }
  .person-action-list { justify-content: flex-start; }
  .person-action-label { display: none; }
  .person-action-list .icon-button { width: 44px; }
}
/* Readable section surfaces and solid form controls. */
.detail-drawer {
  --danger: var(--panel-danger);
  --warning: var(--panel-warning);
}
.detail-drawer :is(.detail-row, .empty-state p, .product-cell small, .activity-time, th, .tag.neutral) { color: var(--muted); }
.detail-drawer .tag.warn { color: var(--warning); }
.detail-drawer .movement-in { color: var(--success); }
.detail-drawer .movement-out { color: var(--danger); }
.detail-drawer input::placeholder, .detail-drawer textarea::placeholder { color: var(--placeholder); }

.detail-drawer .telegram-history time { color: var(--muted); }

/* P3b: shared geometry for desktop and mobile controls. */
:root { --control-h: 44px; --control-gap: 8px; --section-gap: 20px; }
.button, .period-button, .icon-button, .filter-input, .filter-select, .search-box,
.toolbar input:not([type="checkbox"]), .toolbar select,
.draft-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .draft-field select,
.searchable-input, .telegram-manual-form input, .telegram-manual-form select,
.product-action-modal-body input:not([type="checkbox"]):not([type="radio"]), .pagination input {
  box-sizing: border-box; height: var(--control-h); min-height: var(--control-h); margin-block: 0;
}
.button, .period-button { padding-block: 0; }
.icon-button { width: var(--control-h); min-width: var(--control-h); }
.search-box { align-items: center; }
.search-box input { height: 100%; min-height: 0; }
.heading-actions, .toolbar, .account-controls, .telegram-actions, .edit-form-actions { align-items: center; gap: var(--control-gap); }
.recipe-component-quantity, .transfer-warehouse-grid, .transfer-item { align-items: end; }
.searchable-mark { top: 50%; transform: translateY(-50%); display: flex; }
.password-eye { height: var(--control-h); min-height: var(--control-h); display: grid; place-items: center; color: var(--muted); }
.password-eye svg { width: 22px; height: 22px; }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pagination { justify-content: space-between; gap: 12px; }
.pagination-detail { margin-right: auto; color: var(--muted); }
.pagination .pagination-controls { margin: 0; gap: var(--control-gap); justify-content: flex-end; }
.pagination .button { min-width: var(--control-h); padding: 0 12px; }
.pagination input { width: 54px; padding: 0 8px; text-align: center; }
.pagination-total { white-space: nowrap; }
[data-pagination-error]:empty { display: none; }
[data-pagination-error] { width: 100%; text-align: right; }
/* The same section-card component decorates detail sections and creation forms. */
.panel-section-card, .detail-drawer .panel-section-card {
  margin: 0; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--card-radius); background: var(--paper); color: var(--ink); min-width: 0;
}
.panel-content > .panel-section-card { margin-bottom: var(--section-gap); }
.panel-content > .recipe-plan-shortcut { margin-bottom: var(--section-gap); }
.panel-section-card:not(.draft-form) > h3 { margin-bottom: 14px; }
.panel-section-card > h3 { margin: 0; color: var(--muted); font-size: 12px; font-weight: 750; }
.panel-section-card .detail-row + .detail-row,
.panel-section-card .product-edit-history + .product-edit-history { border-top: 1px solid var(--line); }
.panel-section-card:not(.draft-form) > .draft-field + .draft-field { margin-top: 15px; }
/* A grid already supplies field spacing, including forms inside section cards. */
.panel-section-card .draft-form > .draft-field { margin: 0; padding: 0; }
.panel-section-card.drawer-product, .panel-section-card.movement-detail-title { margin-top: 20px; }
.detail-drawer .panel-content > .draft-form:has(> .drawer-section) { background: transparent; border: 0; padding: 0; }
.detail-drawer .panel-content > .draft-form:has(> .drawer-section) > h3 { display: none; }
.panel-action-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: nowrap;
  gap: var(--control-gap); margin-top: 0; padding: 16px;
  background: #fff; border-top: 1px solid var(--line);
}
.panel-action-bar .button { min-width: 0; flex: 0 1 auto; white-space: nowrap; height: var(--control-h); min-height: var(--control-h); }
.panel-action-bar > :nth-child(2) { margin-left: auto; }
.panel-action-bar > [data-panel-submit] { margin-left: auto; }
.detail-drawer .drawer-section:has(> [data-edit-container]:empty):has(> [data-correction-container]:empty),
.detail-drawer .drawer-section:has(> [data-recipe-edit-container]:empty) { display: none; }
.role-picker { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.role-picker legend { margin-bottom: 10px; font-size: 12px; color: var(--muted); font-weight: 750; }
.role-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--paper); cursor: pointer; min-height: var(--control-h); }
.role-card:has(input:checked) { border-color: var(--primary-background); box-shadow: inset 0 0 0 1px var(--primary-background); }
.role-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.role-card input[type="radio"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; margin: 0; accent-color: var(--primary-background); }
.role-card strong { display: block; font-size: 13px; }
.role-card small, .account-username { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.product-action-modal-body p { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .pagination { padding-inline: 12px; }
  .pagination .pagination-controls { width: 100%; justify-content: center; }
  .panel-section-card { padding: 12px; }
  .panel-action-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-action-bar > [data-close-drawer] { grid-column: 1; align-self: start; }
  .panel-action-bar > .button { width: 100%; margin-left: 0; padding-inline: 8px; white-space: normal; line-height: 1.2; }
  .panel-action-bar > :not([data-close-drawer]) { justify-self: stretch; }
  .heading-actions { flex-wrap: wrap; }
}

.detail-drawer { display: flex; flex-direction: column; overflow: hidden; padding: 0; width: min(430px, 100vw); }
.detail-drawer > .drawer-head { position: sticky; top: 0; z-index: 5; flex: 0 0 auto; gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.drawer-head h2 { flex: 1; margin: 0; min-width: 0; font-size: 20px; overflow-wrap: anywhere; }
.detail-drawer.panel-scrolled > .drawer-head { box-shadow: none; }
.panel-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 16px; }
.detail-drawer > .panel-action-bar { position: relative; bottom: auto; flex: 0 0 auto; margin-top: 0; }
.detail-drawer button[hidden] { display: none; }
.detail-drawer .drawer-section:has(> [data-product-action-error]:empty):not(:has(h3)):not(:has(button)) { display: none; }

.product-action-modal-body h2 svg { width: 22px; height: 22px; vertical-align: middle; }

/* P4 shared slots, filter reset and in-card actions. */
.searchable-input::placeholder { font-weight: 400; }
.searchable-select:has(.searchable-clear) .searchable-input { padding-right: 44px !important; }
.searchable-clear { position: absolute; right: 2px; top: 2px; height: 40px; width: 40px; border: 0; background: transparent; color: var(--muted); font-size: 20px; }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: 12px; font-weight: 400; }
.field-error:empty { display: none; }
.warehouse-card-group { position: relative; }
.warehouse-card-group .warehouse-actions { position: absolute; top: 14px; right: 16px; }
.warehouse-actions .icon-button svg { width: 20px; height: 20px; }

.production-plan .warehouse-stock-list, .manual-output-fields:not([hidden]) { display: grid; gap: 15px; }
@media (max-width: 700px) {
  .person-action-list { grid-template-columns: repeat(5, 44px); }
  .person-action-slot .icon-button { width: 44px; padding: 8px; }
}

/* P4 fix: one close control and one panel scroll owner, including iOS. */
html { scrollbar-gutter: stable; overflow-y: auto; }
html.page-scroll-locked { overflow: hidden; }
html.page-scroll-locked > body { position: fixed; overflow: hidden; }
.close-button, .icon-button.close-button, .mobile-menu-close.close-button {
  display: grid; place-items: center; flex: 0 0 32px;
  width: 32px; min-width: 32px; height: 32px; min-height: 32px;
  margin-left: auto; padding: 0; border: 0; border-radius: 999px;
  cursor: pointer;
}
.close-button svg { width: 18px; height: 18px; }
.dialog-head { display: flex; align-items: center; gap: 8px; }
.dialog-head h2 { flex: 1; min-width: 0; }
.panel-header-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding-inline: 8px; }
.panel-header-action svg { width: 18px; height: 18px; }
.detail-drawer .manual-output-fields[hidden] { display: none; }
.detail-drawer .panel-content .product-history-full { max-height: none; overflow: visible; }

@media (min-width: 901px) { .mobile-menu-close.close-button { display: none; } }

/* P5 review: one palette for all panel/dialog descendants, including popups. */
:root {
  --panel-muted: #71717a;
  --panel-danger: #9d4032;
  --panel-warning: #855911;
  --avatar-blue-surface: #e4efff; --avatar-blue-text: #315d91;
  --avatar-green-surface: #e8f5ed; --avatar-green-text: #276749;
  --avatar-purple-surface: #ede9fa; --avatar-purple-text: #625090;
  --avatar-orange-surface: #f2f2f2; --avatar-orange-text: #18181b;
  --avatar-rose-surface: #fbe9ee; --avatar-rose-text: #974860;
}
.detail-drawer, .product-action-modal, .panel {
  --muted: var(--panel-muted);
  --danger: var(--panel-danger);
  --warning: var(--panel-warning);
  --success: #226647;
  --neutral-surface: #eef2f4;
  --neutral-text: #505d68;
  --role-surface: #ede9fa;
  --role-text: #625090;
  --placeholder: #505d68;
  --primary-background: #111111;
  --primary-hover-background: #2a2a2a;
  --danger-hover: #dc2626;
  --button-text: #52525b;
  --button-hover: #f4f4f5;
  --tooltip-surface: #273038;
  --tooltip-text: #fff;
  --switch-surface: #6d7882;
  --switch-thumb: #fff;
  color-scheme: light;
  color: var(--ink);
}
:is(.detail-drawer, .product-action-modal, .panel) :is(
  .detail-row strong, .product-cell strong, .number, .activity-title,
  .empty-state strong, .telegram-table td:first-child strong,
  .movement-summary-meta strong, .movement-summary-row strong,
  .warehouse-card strong, .draft-field, .telegram-manual-form label
) { color: var(--ink); }
:is(.detail-drawer, .product-action-modal, .panel) :is(
  small, .detail-row, .drawer-product p, .panel-head p, .empty-state p,
  .product-cell small, .activity-time, th, td, .telegram-history li,
  .telegram-history time, .role-picker legend, .role-card small,
  .account-username, .panel-section-card > h3, .movement-summary-meta,
  .table-count, .pagination, .warehouse-card span, .warehouse-card footer,
  .telegram-switch, .search-box
) { color: var(--muted); }
:is(.detail-drawer, .product-action-modal, .panel) :is(.role-card, .recipe-component-row, .recipe-add-component, .warehouse-card, .panel-action-bar) {
  background: var(--paper); color: var(--ink);
}
:is(.detail-drawer, .product-action-modal, .panel) :is(.draft-preview, .drawer-note) {
  background: var(--accent-soft); color: var(--accent-dark); border-color: var(--line);
}
:is(.detail-drawer, .product-action-modal, .panel) .inline-error { background: var(--danger-soft); color: var(--danger); }
:is(.detail-drawer, .product-action-modal, .panel) :is(.tag.neutral, .product-photo-empty, .product-photo-open img, th) { background: var(--neutral-surface); }
:is(.detail-drawer, .product-action-modal, .panel) .tag.neutral { color: var(--neutral-text); }
:is(.detail-drawer, .product-action-modal, .panel) .tag.warn { color: var(--warning); }
:is(.detail-drawer, .product-action-modal, .panel) .tag.role-admin { background: var(--role-surface); color: var(--role-text); }
:is(.detail-drawer, .product-action-modal, .panel) .movement-in { color: var(--success); }
:is(.detail-drawer, .product-action-modal, .panel) .movement-out { color: var(--danger); }
:is(.detail-drawer, .product-action-modal, .panel) :is(tbody tr.clickable:hover, .movement-summary-row:hover) { background: var(--accent-soft); }
:is(.detail-drawer, .product-action-modal, .panel) :is(td, .telegram-history li, .movement-summary-row, .draft-preview .detail-row, .account-user) { border-color: var(--line); }
:is(.detail-drawer, .product-action-modal, .panel) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  background: var(--drawer-control-surface); color: var(--ink); border-color: var(--line);
}
:is(.detail-drawer, .product-action-modal, .panel) :is(input, textarea)::placeholder { color: var(--placeholder); }
:is(.detail-drawer, .product-action-modal, .panel) .notification-switch input { background: #adb6bd; }
:is(.detail-drawer, .product-action-modal, .panel) .notification-switch input:checked { background: #22c55e; }
:is(.detail-drawer, .product-action-modal, .panel) .notification-switch input::after { background: white; }
:is(.detail-drawer, .product-action-modal, .panel) .person-action-list .icon-button:is(:hover, :focus-visible)::after {
  background: var(--tooltip-surface); color: var(--tooltip-text);
}
/* P5: material only; retain the dock, section geometry and scroll ownership. */
.detail-drawer > .drawer-head,
.detail-drawer > .panel-action-bar,
.detail-drawer .panel-section-card {
  background: var(--paper);
}
.detail-drawer .panel-content { background: transparent; }
.detail-drawer input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.detail-drawer select, .detail-drawer textarea {
  background: var(--drawer-control-surface);
  color: var(--ink);
}
:root { --filter-font-size: 12px; --filter-placeholder: #9aa0a6; }
.toolbar { flex-wrap: wrap; }
.toolbar .search-box { min-width: 0; flex-basis: 190px; }
.search-box { width: 100%; max-width: none; background: var(--drawer-control-surface); }
:is(.detail-drawer, .product-action-modal, .panel, .toolbar) .search-box input.filter-control[type="search"] {
  flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent;
}
.toolbar .searchable-select { min-width: 0; flex-basis: 190px; }
.toolbar .filter-control {
  font-size: var(--filter-font-size);
  font-weight: 400;
}
.toolbar .filter-control::placeholder { color: var(--filter-placeholder); opacity: 1; font-weight: 400; }

/* Shared button matrix: opaque token paint keeps contrast consistent.
   Base, variants, then states. Disabled retains contrast without opacity. */
:root {
  --button-text: #52525b;
  --button-hover: #f4f4f5;
  --button-active: #ececec;
  --button-danger-text: #9d4032;
  --danger-hover: #dc2626;
  --button-danger-active: #6e291f;
  --button-primary-active: #000000;
}
.button, .icon-button, .close-button {
  --button-rest-background: var(--paper);
  --button-rest-text: var(--button-text);
  --button-state-hover: var(--button-hover);
  --button-state-active: var(--button-active);
  background: var(--button-rest-background);
  color: var(--button-rest-text);
  border-color: #e4e4e7;
  border-radius: 999px;
  opacity: 1;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .18s var(--motion-ease);
}
.button.primary {
  --button-rest-background: var(--primary-background);
  --button-rest-text: var(--primary-text);
  --button-state-hover: var(--primary-hover-background);
  --button-state-active: var(--button-primary-active);
  background: var(--primary-background); color: var(--primary-text);
  border-color: var(--primary-background);
}
.button.danger-action, .button.archive-action,
.button[data-production-cancel] {
  --button-rest-text: var(--button-danger-text);
  border-color: var(--button-danger-text);
}

.button.compact { padding-inline: 8px; }
/* Heading creation actions rest in grey; submit actions remain black. */
.button.primary[data-open-form] {
  --button-rest-background: #f1f1f1;
  --button-rest-text: #3f3f46;
  --button-state-hover: var(--accent);
  background: var(--button-rest-background); color: var(--button-rest-text); border-color: #e7e7e7;
}
/* State specificity exceeds variant paint, including filled dialog actions. */
:is(.button, .icon-button, .close-button):hover:not(:disabled) {
  background: var(--button-state-hover); color: var(--button-rest-text); border-color: #a1a1aa;
}
:is(.button, .icon-button, .close-button):active:not(:disabled) {
  background: var(--button-state-active); color: var(--button-rest-text); transform: scale(.97);
}
.button.primary:not(:disabled):hover, .button.primary:where([data-open-form]):not(:disabled):focus-visible {
  background: var(--button-state-hover); color: #ffffff; border-color: var(--button-state-hover);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
.button:not(.primary):not(.danger-action):not(.archive-action):not([data-production-cancel]):not(:disabled):hover { color: var(--accent); }
:is(.button.danger-action, .button.archive-action, .button[data-production-cancel]):not(:disabled):hover {
  background: var(--danger-hover); border-color: var(--danger-hover); color: #fff;
}
.icon-button:not(:disabled):hover { background: #f2f2f2; color: var(--accent); transform: scale(1.06); }
.period-button { transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .18s var(--motion-ease); }
.period-button:where(:not(.active):not([aria-pressed="true"])):not(:disabled):hover { background: #f4f4f5; color: var(--accent); border-color: #a1a1aa; }
.button.primary:not(:disabled):active,
:is(.button, .icon-button, .close-button, .period-button, .summary-strip button):not(:disabled):active { transform: scale(.97); }
:is(.button, .icon-button, .close-button):focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
.button[data-open-form]:disabled,
:is(.button, .icon-button, .close-button):disabled {
  background: var(--canvas); color: var(--muted); border-color: var(--line); opacity: 1; cursor: not-allowed; box-shadow: none; transform: none; transition: none;
}

/* P6 geometry tiers; P5 material and state paint remain authoritative. */
:root { --control-compact-h: 32px; }
@media (max-width: 1024px) and (pointer: coarse) {
  :root { --control-compact-h: 44px; }
}
.button.compact, .panel-header-action, .row-remove,
.recipe-add-component, .selection-bar .button,
.warehouse-actions .button {
  height: var(--control-compact-h); min-height: var(--control-compact-h);
  padding: 0 8px; font-size: 13px;
}
.period-button { height: var(--control-compact-h); min-height: var(--control-compact-h); }
.pagination { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pagination .pagination-controls { justify-content: center; flex-wrap: wrap; }
.pagination-detail { order: 2; text-align: center; margin-right: 0; }
.profile-card { max-width: 640px; }
.profile-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.profile-identity h2 { margin: 0; }
.profile-identity .person-avatar { width: 56px; height: 56px; font-size: 24px; flex-basis: 56px; }
.profile-card .detail-row + .detail-row { border-top: 1px solid var(--line); }
.profile-shortcuts { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.inline-edit-row { align-items: center; flex-wrap: wrap; }
.inline-edit-row > [data-inline-value] { display: flex; align-items: center; gap: 8px; }
.inline-edit-row [hidden] { display: none; }
.inline-edit-form { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; max-width: 100%; }
.inline-edit-form label { flex: 1 1 100px; min-width: 0; }
.inline-edit-form input { width: 100%; box-sizing: border-box; }
.inline-edit-form .inline-error { flex-basis: 100%; margin: 0; }
.inline-edit-form .inline-error:empty { display: none; }
.inline-edit-row svg { width: 14px; height: 14px; margin-right: 4px; }
.panel-section-card h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.detail-identity { flex: 1; min-width: 0; }
.detail-identity p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.product-photo-area { display: flex; align-items: center; gap: 12px; }
.product-photo-open, .product-photo-empty { width: 64px; height: 64px; min-height: 64px; flex: 0 0 64px; }
.product-photo-open img { width: 64px; height: 64px; object-fit: cover; }
.product-photo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.product-photo-actions .button { height: var(--control-compact-h); min-height: var(--control-compact-h); padding: 0 8px; }
.person-action-list { grid-template-columns: repeat(5, 96px); }
.person-action-slot .icon-button { width: 96px; min-width: 96px; height: var(--control-compact-h); min-height: var(--control-compact-h); justify-content: center; gap: 4px; padding: 2px 4px; }
.person-action-label { display: block; white-space: normal; text-align: center; font-size: 12px; line-height: 1.15; }
.disabled-reason { position: relative; display: inline-flex; }
.disabled-tooltip {
  position: fixed; z-index: 1000; box-sizing: border-box;
  width: max-content; max-width: min(220px, calc(100vw - 16px));
  padding: 8px 10px; border-radius: 8px;
  background: var(--tooltip-surface); color: var(--tooltip-text);
  box-shadow: none;
  font-size: 12px; font-weight: 400; line-height: 1.4; text-align: center;
  overflow-wrap: anywhere;
}
.disabled-tooltip[hidden] { display: none; }
.disabled-tooltip::before {
  content: ''; position: absolute; left: 0; right: 0; height: 8px;
  bottom: -8px;
}
.disabled-tooltip::after {
  content: ''; position: absolute; top: 100%; left: var(--tooltip-arrow-left);
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: var(--tooltip-surface);
}
.disabled-tooltip[data-side="below"]::before { bottom: auto; top: -8px; }
.disabled-tooltip[data-side="below"]::after {
  top: auto; bottom: 100%; border-top-color: transparent;
  border-bottom-color: var(--tooltip-surface);
}
@media (max-width: 700px) {
  .person-action-list { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  .person-action-slot .icon-button { width: 100%; min-width: 0; height: 48px; min-height: 48px; flex-direction: column; }
  .person-action-label { display: block; font-size: 11px; }
}

.person-action-slot .icon-button svg { width: 16px; height: 16px; flex-basis: 16px; }
.person-action-list .person-action-slot .icon-button { font-weight: 400; }
.person-action-slot .person-action-label { color: inherit; font-size: 10px; font-weight: 400; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.warehouse-actions .icon-button { width: var(--control-compact-h); min-width: var(--control-compact-h); }
.panel-header-action svg { width: 14px; height: 14px; flex: 0 0 14px; }
.product-photo-empty { font-size: 11px; text-align: center; }

/* P9: aligned profile values and shared inline pencil slot. */
.profile-card .detail-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; align-items: center; }
.profile-card .detail-row > strong { grid-column: 2; text-align: left; }
.profile-card .inline-edit-row > [data-inline-value]:not([hidden]) { display: contents; }
.profile-card [data-inline-value] > strong { grid-column: 2; text-align: left; }
.profile-card .inline-edit-pencil { grid-column: 3; }
.profile-card .inline-edit-form { grid-column: 2 / 4; }
.inline-edit-row .inline-edit-pencil { width: 32px; min-width: 32px; padding: 0; }
.inline-edit-row .inline-edit-pencil svg { margin: 0; }

/* Product views reserve the same columns even when archive filters are absent. */
.toolbar.product-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 64px; }
.product-toolbar > .search-box, .product-toolbar > .searchable-select, .product-toolbar > .filter-select { width: 100%; min-width: 0; max-width: none; }
.product-toolbar > #product-sort, .product-toolbar > .searchable-select:has(#product-sort) { grid-column: 4; }
.product-toolbar > .table-count { grid-column: 5; }
.product-sort-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.product-sort-control > span { flex: none; }
.product-sort-control > select { flex: 1; width: 100%; min-width: 0; }
.product-toolbar > .product-sort-control { grid-column: 4; }
.movement-toolbar > .filter-select { flex: 1 0 190px; min-width: 190px; }
@media (max-width: 1100px) {
  .toolbar.product-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-toolbar > .search-box { grid-column: 1; }
  .product-toolbar > #product-sort, .product-toolbar > .searchable-select:has(#product-sort) { grid-column: 2; }
  .product-toolbar > .table-count { grid-column: 1 / -1; }
  .product-toolbar > .product-sort-control { grid-column: 2; }
}
@media (max-width: 500px) {
  .toolbar.product-toolbar { grid-template-columns: minmax(0, 1fr); }
  .product-toolbar > #product-sort, .product-toolbar > .searchable-select:has(#product-sort) { grid-column: 1; }
  .product-toolbar > .product-sort-control { grid-column: 1; }
  .movement-toolbar > .filter-select { min-width: 0; }
}
.panel-header-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--control-gap); min-width: 0; }
.stock-io-toggle { display: flex; gap: 6px; }
.stock-io-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.draft-field input.derived:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: var(--canvas); color: var(--muted); }
@media (max-width: 500px) { .stock-io-fields { grid-template-columns: minmax(0, 1fr); } }

/* + ux-wave4 madde 17: telefonda plan satırında ad ve sayılar alt alta. */
@media (max-width: 500px) { .production-plan-result .warehouse-stock-list .detail-row { display: grid; } .production-plan-result .warehouse-stock-list .detail-row strong { white-space: normal; } }

/* Overview product shortcuts inherit the existing alert typography and palette. */
.alert-row .alert-product-link { color: inherit; font: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; }

/* arama kutusu odak çerçevesi kutunun tamamında */
.search-box input:focus-visible { outline: none; } .search-box:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* + tek odak çerçevesi (Hakan 17.10): tarayıcı varsayılanı mavi çerçeve çıkan öğeler aynı halkada */
:is(textarea, summary, a, tr.clickable, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
tr.clickable:focus-visible { outline-offset: -2px; }

/* Reuse the existing panel/card/type system for read-only depot headings. */
.depot-group { min-width: 0; margin-bottom: 20px; }
.depot-group h2, .depot-group .detail-row span { overflow-wrap: anywhere; }
.depot-group .detail-row strong { white-space: nowrap; }
.depot-group summary { cursor: pointer; }
@media (max-width: 600px) {
  .depot-group .detail-row { flex-wrap: wrap; gap: 6px; }
  .depot-group .warehouse-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Small screens retain the existing menu drawer and stacked page flow. */
@media (max-width: 900px) {
  .sidebar .brand { justify-content: flex-start; padding: 0 18px; }
  .sidebar .brand-name { display: block; }
  .sidebar .nav-list { padding: 14px 12px; }
  .sidebar .nav-item { width: 100%; gap: 12px; border-radius: 999px; }
  .sidebar .nav-item span { max-width: none; opacity: 1; }
  .sidebar .nav-item:hover, .sidebar .nav-item:focus-visible { box-shadow: none; }

  .summary-strip button { padding: 18px 14px; }
  .summary-strip strong { font-size: 36px; }
  .summary-strip button span[aria-hidden] { top: 14px; right: 12px; }
}
@media (max-width: 500px) {
  .summary-strip { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .summary-strip button { min-height: 112px; padding: 18px 22px; }
  .summary-strip strong { font-size: 44px; }
  .demo-banner { border-radius: 18px; }
  .panel-head { padding: 20px 18px 14px; }
  .period-toggle { padding-inline: 18px; }
  .product-view-toggle { padding-inline: 0; }
  .movement-summary-meta { padding-inline: 18px; }
  .dashboard-grid > .panel:not(.movement-summary-card) { padding-inline: 18px; }
  .dashboard-grid > .panel:not(.movement-summary-card) .panel-head,
  .dashboard-grid > .panel:not(.movement-summary-card) .alert-list { padding-inline: 0; }
  .alert-group-title { padding-inline: 0; }
}
/* Authentication pages use the same type, controls and white card surface. */
.account-card > p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.account-card a { color: var(--accent); text-underline-offset: 3px; }
.account-card textarea { width: 100%; min-height: 88px; padding: 12px; border: 1px solid var(--line); border-radius: var(--control-radius); font: inherit; resize: vertical; }
.account-card small { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
#login-error, #signup-result { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#login-error { color: var(--danger); }
:is(.period-button, .summary-strip button):disabled { background: #f4f4f5; color: var(--muted); border-color: var(--line); cursor: not-allowed; transition: none; transform: none; box-shadow: none; }
/* Approved page transitions: the old page ends before the new page appears. */
#page-content { view-transition-name: khan-page; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(khan-page) { animation: khanOut .24s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(khan-page) { animation: khanIn .45s cubic-bezier(.22,1,.36,1) .26s both; }
::view-transition-image-pair(khan-page) { isolation: auto; }
::view-transition-old(khan-page), ::view-transition-new(khan-page) { mix-blend-mode: normal; }
::view-transition-group(khan-page) { animation-duration: 0s; }
@keyframes khanOut { to { opacity: 0; transform: translateY(14px); } }
@keyframes khanIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.drawer-backdrop:not([hidden]) { animation: khanFade .45s ease both; }
@keyframes khanFade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 901px) {
  html.page-scroll-locked .sidebar { position: fixed; top: 0; left: 0; height: 100vh; }
  html.page-scroll-locked .main-wrap { margin-left: 76px; }
}
@property --sb-a { syntax: '<number>'; inherits: true; initial-value: .13; }
@property --sb-b { syntax: '<number>'; inherits: true; initial-value: 4.5; }
html { transition: --sb-a .9s cubic-bezier(.4,0,.2,1), --sb-b .45s linear; }
html.khan-scrolling { --sb-a: .36; --sb-b: 3; transition: --sb-a .35s ease, --sb-b .25s linear; }
*::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; border: 0; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb { background-color: rgba(24,24,27,var(--sb-a)); border: calc(var(--sb-b) * 1px) solid transparent; background-clip: padding-box; border-radius: 999px; min-height: 40px; }
html.khan-sb-hover { --sb-a: .5; --sb-b: 2.5; transition: --sb-a .35s ease, --sb-b .25s linear; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(khan-page), ::view-transition-new(khan-page) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :is(.button, .icon-button, .close-button, .period-button, .summary-strip button):not(:disabled):is(:hover, :active, :focus-visible),
  .summary-strip button:hover span[aria-hidden] { transform: none !important; }
}

/* HID scan queue: use the existing palette and fit the mobile drawer. */
.barcode-stock { min-width: 0; }
.barcode-stock > .drawer-note:first-child { margin-top: 0; }
.barcode-stock .draft-field { margin-top: 12px; }
.barcode-stock > .draft-form { margin-top: 12px; }
.barcode-stock input:not([type="checkbox"]), .barcode-stock select { width: 100%; min-width: 0; }
.barcode-stock input[type="checkbox"] { width: auto; accent-color: var(--primary-background); }
#barcode-scan-input { min-height: 48px; font-size: 18px; border-color: var(--focus-ring); }
#barcode-scan-message { overflow-wrap: anywhere; color: var(--muted); }
.barcode-stock-items { list-style: none; margin: 16px 0 0; padding: 0; }
.barcode-stock-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.barcode-stock-row > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.barcode-stock-row small { display: block; margin-top: 4px; color: var(--muted); }
.barcode-stock-row .edit-form-actions { flex-wrap: wrap; }
.barcode-stock-row.scan-highlight { background: var(--success-soft); }

/* Shared select chevron uses the existing panel-muted colour.
   Visible native controls only; (0,4,2) beats the drawer/panel background
   shorthand's (0,4,1), including the input branch inside :is(). Keep last. */
:root body select:not(.searchable-native):not([hidden]):not([aria-hidden="true"]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent calc(50% - .75px), var(--panel-muted) calc(50% - .75px), var(--panel-muted) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(135deg, transparent calc(50% - .75px), var(--panel-muted) calc(50% - .75px), var(--panel-muted) calc(50% + .75px), transparent calc(50% + .75px));
  background-repeat: no-repeat;
  background-position: calc(100% - 17px) 50%, calc(100% - 13px) 50%;
  background-size: 4px 5px;
  padding-right: 36px;
}

/* Catalog wizard: keep tables within the existing panel at narrow widths. */
.catalog-import-fields { border: 0; margin: 0; padding: 0; min-width: 0; }