/*
 * TatMakarna ERP design system — layered on AdminLTE 4 / Bootstrap 5.3.
 * Tokens first; component overrides below. See docs/design-system.md.
 */

:root,
[data-bs-theme="light"] {
  /* Brand tokens (--tm-primary*, --tm-accent*, --tm-brand-*, --tm-sidebar-*) live in css/brand/<customer>.css,
     selected with settings.BRAND. This file holds the neutral, semantic and component layer only. */

  /* Neutrals (slightly warm) */
  --tm-bg: #f4f3ef;
  --tm-surface: #ffffff;
  --tm-surface-muted: #f9f8f5;
  --tm-border: #e3e0d8;
  --tm-border-strong: #cfcbc0;
  --tm-text: #1c2230;
  --tm-text-muted: #5d6474;
  --tm-text-subtle: #8a8f9b;

  /* Semantic */
  --tm-success: #157347;
  --tm-success-subtle: #e3f3ea;
  --tm-warning: #a35a00;
  --tm-warning-subtle: #fdf0dc;
  --tm-danger: #b42318;
  --tm-danger-subtle: #fde8e6;
  --tm-info: #0b6e8a;
  --tm-info-subtle: #e2f2f7;
  --tm-simulated: #6b3fa0;
  --tm-simulated-subtle: #f1eaf9;

  /* Type & spacing */
  --tm-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tm-radius: 6px;
  --tm-radius-lg: 10px;
  --tm-shadow-sm: 0 1px 2px rgba(20, 28, 45, 0.06);
  --tm-shadow: 0 1px 3px rgba(20, 28, 45, 0.08), 0 4px 12px rgba(20, 28, 45, 0.04);
  --tm-shadow-lg: 0 12px 40px rgba(20, 28, 45, 0.18);

  /* Bootstrap bridge */
  --bs-primary: var(--tm-primary);
  --bs-primary-rgb: var(--tm-primary-rgb);
  --bs-primary-bg-subtle: var(--tm-primary-subtle);
  --bs-link-color: var(--tm-primary);
  --bs-link-color-rgb: var(--tm-primary-rgb);
  --bs-link-hover-color: var(--tm-primary-hover);
  --bs-body-font-family: var(--tm-font-sans);
  --bs-body-font-size: 0.875rem;
  --bs-body-line-height: 1.45;
  --bs-body-color: var(--tm-text);
  --bs-body-bg: var(--tm-bg);
  --bs-secondary-color: var(--tm-text-muted);
  --bs-tertiary-bg: var(--tm-bg);
  --bs-border-color: var(--tm-border);
  --bs-border-radius: var(--tm-radius);
  --bs-border-radius-lg: var(--tm-radius-lg);
  --bs-focus-ring-color: rgba(var(--tm-primary-rgb), 0.28);
  --bs-success: var(--tm-success);
  --bs-danger: var(--tm-danger);
  --lte-sidebar-width: 248px;
}

[data-bs-theme="dark"] {
  --tm-bg: #11151c;
  --tm-surface: #181d26;
  --tm-surface-muted: #1d232e;
  --tm-border: #2b3240;
  --tm-border-strong: #3a4354;
  --tm-text: #e6e9ef;
  --tm-text-muted: #a3aab8;
  --tm-text-subtle: #7b8394;
  --tm-success: #4cc38a;
  --tm-success-subtle: #15291f;
  --tm-warning: #f0a849;
  --tm-warning-subtle: #33240f;
  --tm-danger: #f2766b;
  --tm-danger-subtle: #3a1916;
  --tm-info: #5cc0dc;
  --tm-info-subtle: #11292f;
  --tm-simulated: #b896e6;
  --tm-simulated-subtle: #2a1f3a;
}

/* ------------------------------------------------------------------ base */

html { -webkit-font-smoothing: antialiased; }
body { background: var(--tm-bg); color: var(--tm-text); font-feature-settings: "tnum" 1; }
.app-main { background: var(--tm-bg); }
.font-mono, code.tm-code { font-family: var(--tm-font-mono); font-size: 0.8125rem; }
.tm-code { color: var(--tm-text); background: none; padding: 0; white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.text-muted, .text-body-secondary { color: var(--tm-text-muted) !important; }
.small-caps { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tm-text-subtle); font-weight: 600; }
:focus-visible { outline: 2px solid rgba(var(--tm-primary-rgb), 0.55); outline-offset: 2px; }
.visually-hidden-focusable:focus { position: fixed !important; top: 8px; left: 8px; z-index: 2000; background: var(--tm-surface); padding: 8px 12px; border-radius: var(--tm-radius); box-shadow: var(--tm-shadow); }

/* ------------------------------------------------------------------ buttons */

.btn { --bs-btn-font-size: 0.8125rem; --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-weight: 500; border-radius: var(--tm-radius); display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.75rem; }
.btn-lg { --bs-btn-padding-y: 0.55rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 0.9375rem; }
.btn-primary {
  --bs-btn-bg: var(--tm-primary); --bs-btn-border-color: var(--tm-primary);
  --bs-btn-hover-bg: var(--tm-primary-hover); --bs-btn-hover-border-color: var(--tm-primary-hover);
  --bs-btn-active-bg: var(--tm-primary-hover); --bs-btn-active-border-color: var(--tm-primary-hover);
  --bs-btn-disabled-bg: var(--tm-primary); --bs-btn-disabled-border-color: var(--tm-primary);
  --bs-btn-focus-shadow-rgb: var(--tm-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0d1420; --bs-btn-hover-color: #0d1420; --bs-btn-active-color: #0d1420; --bs-btn-disabled-color: #0d1420; }
.btn-outline-primary {
  --bs-btn-color: var(--tm-primary); --bs-btn-border-color: var(--tm-primary);
  --bs-btn-hover-bg: var(--tm-primary); --bs-btn-hover-border-color: var(--tm-primary);
  --bs-btn-active-bg: var(--tm-primary-hover); --bs-btn-active-border-color: var(--tm-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--tm-primary-rgb);
}
.btn-secondary-tm {
  --bs-btn-color: var(--tm-text); --bs-btn-bg: var(--tm-surface); --bs-btn-border-color: var(--tm-border-strong);
  --bs-btn-hover-color: var(--tm-text); --bs-btn-hover-bg: var(--tm-surface-muted); --bs-btn-hover-border-color: var(--tm-border-strong);
  --bs-btn-active-bg: var(--tm-border); --bs-btn-active-color: var(--tm-text); --bs-btn-active-border-color: var(--tm-border-strong);
  --bs-btn-disabled-color: var(--tm-text-subtle); --bs-btn-disabled-bg: var(--tm-surface); --bs-btn-disabled-border-color: var(--tm-border);
  box-shadow: var(--tm-shadow-sm);
}
.btn-ghost {
  --bs-btn-color: var(--tm-text-muted); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--tm-text); --bs-btn-hover-bg: var(--tm-surface-muted); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--tm-border); --bs-btn-active-border-color: transparent;
}
.btn-danger { --bs-btn-bg: var(--tm-danger); --bs-btn-border-color: var(--tm-danger); }
.btn .kbd-hint { font-family: var(--tm-font-mono); font-size: 0.6875rem; opacity: 0.7; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; line-height: 1.2; }

/* ------------------------------------------------------------------ forms */

.form-label { font-weight: 500; font-size: 0.8125rem; margin-bottom: 0.25rem; color: var(--tm-text); }
.form-control, .form-select { font-size: 0.875rem; border-color: var(--tm-border-strong); border-radius: var(--tm-radius); background-color: var(--tm-surface); }
.form-control:focus, .form-select:focus { border-color: var(--tm-primary); box-shadow: 0 0 0 3px rgba(var(--tm-primary-rgb), 0.18); }
.form-control-sm, .form-select-sm { font-size: 0.8125rem; }
.form-text { font-size: 0.75rem; color: var(--tm-text-muted); }
.invalid-feedback { font-size: 0.75rem; }
.form-check-input:checked { background-color: var(--tm-primary); border-color: var(--tm-primary); }
.input-group-text { background: var(--tm-surface-muted); border-color: var(--tm-border-strong); font-size: 0.8125rem; color: var(--tm-text-muted); }
.required::after { content: " *"; color: var(--tm-danger); }

/* ------------------------------------------------------------------ cards / surfaces */

.card { --bs-card-bg: var(--tm-surface); --bs-card-border-color: var(--tm-border); --bs-card-border-radius: var(--tm-radius-lg); --bs-card-cap-bg: transparent; box-shadow: var(--tm-shadow-sm); }
.card-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--tm-border); display: flex; align-items: center; gap: 0.5rem; }
.card-header .card-title { font-size: 0.875rem; font-weight: 600; margin: 0; }
.card-body { padding: 1rem; }
.surface { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow-sm); }

/* ------------------------------------------------------------------ shell */

.app-header { background: var(--tm-surface) !important; border-bottom: 1px solid var(--tm-border); box-shadow: none; min-height: 3.25rem; }
.app-header .nav-link { color: var(--tm-text-muted); }
.app-header .nav-link:hover { color: var(--tm-text); }
.app-sidebar { background: var(--tm-sidebar-bg) !important; box-shadow: none !important; border-right: 1px solid rgba(255, 255, 255, 0.04);
  --lte-sidebar-color: var(--tm-sidebar-text); --lte-sidebar-hover-bg: var(--tm-sidebar-hover); --lte-sidebar-hover-color: #fff;
  --lte-sidebar-active-color: #fff; --lte-sidebar-menu-active-bg: var(--tm-sidebar-active); --lte-sidebar-menu-active-color: #fff;
  --lte-sidebar-header-color: var(--tm-sidebar-muted); --lte-sidebar-submenu-color: var(--tm-sidebar-text);
  --lte-sidebar-submenu-active-color: #fff; --lte-sidebar-submenu-active-bg: var(--tm-sidebar-active);
  --lte-sidebar-submenu-hover-bg: var(--tm-sidebar-hover); --lte-sidebar-submenu-hover-color: #fff; }
.app-sidebar .sidebar-brand { border-bottom: 1px solid rgba(255, 255, 255, 0.06); height: 3.25rem; justify-content: flex-start; padding-left: 1rem; }
.app-sidebar .sidebar-brand .brand-image { display: none; }
.app-sidebar .sidebar-brand .brand-text { font-weight: 400 !important; color: #fff; }
.app-sidebar .sidebar-menu .nav-link { border-radius: var(--tm-radius); font-size: 0.8125rem; padding: 0.45rem 0.75rem; position: relative; }
.app-sidebar .sidebar-menu .nav-item.active > .nav-link::before,
.app-sidebar .sidebar-menu .nav-link.active::before { content: ""; position: absolute; left: -0.5rem; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--tm-accent); }
.app-sidebar .nav-header { font-size: 0.65rem !important; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding-top: 1rem !important; }
.app-sidebar .nav-badge { font-size: 0.625rem; font-weight: 500; }
.app-sidebar .nav-badge.text-bg-secondary { background: rgba(255, 255, 255, 0.08) !important; color: var(--tm-sidebar-muted) !important; }
.app-footer { background: transparent; border-top: 1px solid var(--tm-border); color: var(--tm-text-subtle); font-size: 0.75rem; padding: 0.625rem 1rem; }

.brand-mark { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-mark__glyph { width: 40px; height: 28px; border-radius: 50% / 55%; background: var(--tm-brand-red); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; box-shadow: 0 2px 0 var(--tm-brand-green); font-family: Georgia, "Times New Roman", serif; }
.brand-mark__logo { height: 34px; width: auto; display: block; }
.brand-mark__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-mark__text strong { font-size: 0.875rem; font-weight: 600; color: #fff; }
.brand-mark__text span { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tm-sidebar-muted); }

/* Environment / data provenance banner */
.env-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; font-size: 0.75rem; font-weight: 500;
  color: var(--tm-simulated); background: repeating-linear-gradient(135deg, var(--tm-simulated-subtle) 0 12px, transparent 12px 24px), var(--tm-surface);
  border-bottom: 1px solid color-mix(in srgb, var(--tm-simulated) 30%, transparent); }

/* Connection indicator */
.conn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--tm-text-muted); padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--tm-border); background: var(--tm-surface); }
.conn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-text-subtle); }
.conn--live .conn__dot { background: var(--tm-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-success) 22%, transparent); }
.conn--reconnecting .conn__dot { background: var(--tm-warning); animation: tm-pulse 1.2s infinite; }
.conn--offline { color: var(--tm-danger); border-color: color-mix(in srgb, var(--tm-danger) 35%, transparent); background: var(--tm-danger-subtle); }
.conn--offline .conn__dot { background: var(--tm-danger); }
@keyframes tm-pulse { 50% { opacity: 0.35; } }

/* ------------------------------------------------------------------ page */

.page { padding: 1.25rem 1.5rem 2rem; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-header__title { font-size: 1.25rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.page-header__subtitle { color: var(--tm-text-muted); margin: 0.15rem 0 0; font-size: 0.8125rem; }
.page-header__crumbs { font-size: 0.75rem; color: var(--tm-text-subtle); margin-bottom: 0.2rem; }
.page-header__crumbs a { color: var(--tm-text-subtle); text-decoration: none; }
.page-header__crumbs a:hover { color: var(--tm-primary); }
.page-header__actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------------ tables */

.tm-table-wrap { background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.tm-table-scroll { overflow: auto; max-height: var(--tm-table-max-height, calc(100vh - 290px)); min-height: 160px; }
.tm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.tm-table thead th { position: sticky; top: 0; z-index: 2; background: var(--tm-surface-muted); color: var(--tm-text-muted); font-weight: 600; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--tm-border); white-space: nowrap; text-align: left; }
.tm-table thead th.num { text-align: right; }
.tm-table tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--tm-border); vertical-align: middle; }
.tm-table tbody tr:last-child td { border-bottom: none; }
.tm-table tbody tr { transition: background-color 0.08s; }
.tm-table tbody tr:hover { background: var(--tm-surface-muted); }
.tm-table tbody tr.is-selected { background: var(--tm-primary-subtle); box-shadow: inset 3px 0 0 var(--tm-primary); }
.tm-table tbody tr.is-clickable { cursor: pointer; }
.tm-table tbody tr:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(var(--tm-primary-rgb), 0.55); }
.tm-table tbody tr.is-muted td { color: var(--tm-text-subtle); }
.tm-table tbody tr.is-flash { animation: tm-flash 1.6s ease-out; }
@keyframes tm-flash { 0% { background: var(--tm-accent-subtle); } 100% { background: transparent; } }
.tm-table .cell-primary { font-weight: 500; color: var(--tm-text); }
.tm-table code, .tm-table .text-nowrap { white-space: nowrap; }
.tm-table .cell-sub { display: block; color: var(--tm-text-subtle); font-size: 0.75rem; }
.tm-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--tm-border); background: var(--tm-surface-muted); font-size: 0.75rem; color: var(--tm-text-muted); flex-wrap: wrap; }

.toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--tm-border); flex-wrap: wrap; }
.toolbar .search { position: relative; min-width: 260px; flex: 1 1 260px; max-width: 420px; }
.toolbar .search i { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--tm-text-subtle); pointer-events: none; }
.toolbar .search input { padding-left: 2rem; }
.toolbar .search kbd { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; background: var(--tm-surface-muted); color: var(--tm-text-subtle); border: 1px solid var(--tm-border); }

/* Quantity progress inside table cells */
.qty-bar { height: 4px; border-radius: 2px; background: var(--tm-border); overflow: hidden; margin-top: 4px; min-width: 80px; }
.qty-bar > span { display: block; height: 100%; background: var(--tm-primary); }
.qty-bar > span.is-full { background: var(--tm-success); }
.qty-bar > span.is-over { background: var(--tm-danger); }

/* ------------------------------------------------------------------ status */

.status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.71875rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--neutral { color: var(--tm-text-muted); background: var(--tm-surface-muted); border-color: var(--tm-border); }
.status--info { color: var(--tm-info); background: var(--tm-info-subtle); }
.status--primary { color: var(--tm-primary); background: var(--tm-primary-subtle); }
.status--success { color: var(--tm-success); background: var(--tm-success-subtle); }
.status--warning { color: var(--tm-warning); background: var(--tm-warning-subtle); }
.status--danger { color: var(--tm-danger); background: var(--tm-danger-subtle); }
.status--simulated { color: var(--tm-simulated); background: var(--tm-simulated-subtle); border: 1px dashed color-mix(in srgb, var(--tm-simulated) 60%, transparent); }
.status--muted { color: var(--tm-text-subtle); background: transparent; border-color: var(--tm-border); text-decoration: line-through; }

.source-tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; max-width: 100%; font-size: 0.71875rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: var(--tm-radius); }
.source-tag--fixture { color: var(--tm-simulated); background: var(--tm-simulated-subtle); border: 1px dashed color-mix(in srgb, var(--tm-simulated) 55%, transparent); }
.source-tag--live { color: var(--tm-success); background: var(--tm-success-subtle); }
.source-tag--none { color: var(--tm-warning); background: var(--tm-warning-subtle); }

/* ------------------------------------------------------------------ feedback states */

.state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1rem; color: var(--tm-text-muted); gap: 0.4rem; }
.state__icon { font-size: 1.75rem; color: var(--tm-text-subtle); }
.state__title { font-weight: 600; color: var(--tm-text); font-size: 0.9375rem; }
.state--error .state__icon { color: var(--tm-danger); }
.skeleton { display: block; height: 0.8rem; border-radius: 4px; background: linear-gradient(90deg, var(--tm-border) 0%, var(--tm-surface-muted) 50%, var(--tm-border) 100%); background-size: 200% 100%; animation: tm-shimmer 1.2s infinite linear; }
@keyframes tm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.notice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.65rem 0.85rem; border-radius: var(--tm-radius); font-size: 0.8125rem; border: 1px solid; }
.notice i { font-size: 1rem; line-height: 1.2; }
.notice--info { background: var(--tm-info-subtle); color: var(--tm-info); border-color: color-mix(in srgb, var(--tm-info) 25%, transparent); }
.notice--warning { background: var(--tm-warning-subtle); color: var(--tm-warning); border-color: color-mix(in srgb, var(--tm-warning) 25%, transparent); }
.notice--danger { background: var(--tm-danger-subtle); color: var(--tm-danger); border-color: color-mix(in srgb, var(--tm-danger) 25%, transparent); }
.notice--success { background: var(--tm-success-subtle); color: var(--tm-success); border-color: color-mix(in srgb, var(--tm-success) 25%, transparent); }
.notice--simulated { background: var(--tm-simulated-subtle); color: var(--tm-simulated); border-color: color-mix(in srgb, var(--tm-simulated) 30%, transparent); border-style: dashed; }
.notice__body { color: var(--tm-text); }
.notice__body strong { color: inherit; }

/* ------------------------------------------------------------------ KPI tiles */

.kpi { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; height: 100%; text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--tm-border-strong); }
.kpi__label { font-size: 0.75rem; color: var(--tm-text-muted); font-weight: 500; display: flex; align-items: center; gap: 0.35rem; }
.kpi__value { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: 0.71875rem; color: var(--tm-text-subtle); }
.kpi--attention .kpi__value { color: var(--tm-warning); }

/* ------------------------------------------------------------------ overlays */

/* Bootstrap modals (centred, header/footer fixed, scrollable body, full-screen on phones). */
.modal { --bs-modal-border-radius: var(--tm-radius-lg); --bs-modal-bg: var(--tm-surface); --bs-modal-border-color: var(--tm-border);
  --bs-modal-header-padding: 0.875rem 1.1rem; --bs-modal-padding: 1.1rem; --bs-modal-footer-gap: 0.5rem; }
.modal-backdrop { --bs-backdrop-opacity: 0.42; --bs-backdrop-bg: #0d121c; }
.modal-header { border-bottom: 1px solid var(--tm-border); align-items: flex-start; }
.modal-title { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.modal-subtitle { font-size: 0.75rem; color: var(--tm-text-muted); margin-top: 0.15rem; overflow-wrap: anywhere; }
.modal-body { overflow-x: hidden; overscroll-behavior: contain; }
.modal-footer { background: var(--tm-surface-muted); border-top: 1px solid var(--tm-border); flex-wrap: wrap; }
.modal-footer > * { margin: 0; }
.modal-footer--confirm { background: var(--tm-warning-subtle); }
.modal-lg { --bs-modal-width: 880px; }
.modal-xl { --bs-modal-width: 1000px; }
.modal-loading { display: flex; align-items: center; justify-content: center; min-height: 160px; }
@media (max-width: 575.98px) { .modal-footer .btn { flex: 1 1 auto; justify-content: center; } }
@keyframes tm-fade { from { opacity: 0; } }
@keyframes tm-slide { from { transform: translateX(24px); opacity: 0; } }

.tm-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: 0.5rem; width: min(380px, calc(100vw - 2rem)); }
.tm-toast { background: var(--tm-surface); border: 1px solid var(--tm-border); border-left: 4px solid var(--tm-info); border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-lg); padding: 0.65rem 0.85rem; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8125rem; animation: tm-slide 0.16s ease-out; }
.tm-toast--success { border-left-color: var(--tm-success); }
.tm-toast--danger { border-left-color: var(--tm-danger); }
.tm-toast--warning { border-left-color: var(--tm-warning); }
.tm-toast--simulated { border-left-color: var(--tm-simulated); }

.tm-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius-lg); box-shadow: var(--tm-shadow-lg); padding: 0.35rem; z-index: 1040; }
.tm-menu__item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.45rem 0.6rem; border-radius: var(--tm-radius); border: 0; background: none; color: var(--tm-text); font-size: 0.8125rem; text-align: left; text-decoration: none; }
.tm-menu__item:hover, .tm-menu__item:focus-visible { background: var(--tm-surface-muted); }
.tm-menu__sep { height: 1px; background: var(--tm-border); margin: 0.35rem 0; }

/* Definition list used in detail panels */
.dl-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.8125rem; margin: 0; }
.dl-grid dt { color: var(--tm-text-muted); font-weight: 400; }
.dl-grid dd { margin: 0; }

/* Auth pages */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--tm-bg); }
.auth__brand { background: var(--tm-sidebar-bg); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth__brand { background: radial-gradient(120% 90% at 0% 0%, #1b3a73 0%, var(--tm-sidebar-bg) 60%); }
.auth__brand::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tm-brand-red) 0 70%, var(--tm-brand-green) 70% 100%); }
.auth__brand::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 460px; height: 460px; border-radius: 50%; border: 56px solid rgba(209, 154, 42, 0.12); }
.auth__logo { height: 120px; margin-bottom: 1.75rem; display: block; width: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35)); }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth__card { width: min(400px, 100%); }
.auth__title { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.25rem; }
.auth__mobile-logo { display: none; }
.auth__mobile-logo .auth__logo { height: 72px; filter: none; margin-bottom: 1.5rem; }
@media (max-width: 899.98px) { .auth { grid-template-columns: 1fr; } .auth__brand { display: none; } .auth__mobile-logo { display: block; } }

/* Line board (tracking). minmax(min(100%, …)) lets a single column shrink below the minimum on phones. */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.board__line { min-width: 0; }
.board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tm-border); flex-wrap: wrap; }
.board__title { font-size: 0.875rem; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__sub { font-size: 0.75rem; color: var(--tm-text-muted); }
.board__total { font-size: 0.75rem; color: var(--tm-text-muted); text-align: right; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.track-item { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--tm-border); cursor: pointer; min-width: 0; outline: none; }
li:last-child > .track-item { border-bottom: 0; }
.track-item:hover { background: var(--tm-surface-muted); }
.track-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--tm-primary-rgb), 0.55); }
.track-item__title { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.track-item__meta { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; font-size: 0.75rem; color: var(--tm-text-muted); }
.track-item__meta > .truncate { min-width: 0; flex: 1 1 auto; }
.track-item__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-width: 0; }
.track-item__wo { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; color: var(--tm-text-muted); }
.track-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.qty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0.15rem 0 0; }
.qty-grid > div { min-width: 0; }
.qty-grid dt { font-size: 0.6875rem; font-weight: 500; color: var(--tm-text-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.qty-grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }
.qty-grid__unit { font-weight: 400; font-size: 0.75rem; color: var(--tm-text-muted); }
.track-progress { height: 6px; border-radius: 3px; background: var(--tm-border); overflow: hidden; }
.track-progress > span { display: block; height: 100%; background: var(--tm-primary); transition: width 0.3s; }
.track-progress > span.is-full { background: var(--tm-success); }

/* Dialog content layouts */
.plan-dialog { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.25rem; }
.plan-dialog__order { padding: 0.9rem; background: var(--tm-surface-muted); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); align-self: start; min-width: 0; }
.plan-dialog__form { min-width: 0; }
.plan-dialog__plan { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--tm-border); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.detail-grid > * { min-width: 0; }
.detail-grid__full { grid-column: 1 / -1; }
.dl-grid dd { min-width: 0; overflow-wrap: anywhere; }
.copy-code { display: inline-flex; align-items: center; gap: 0.15rem; max-width: 100%; min-width: 0; }
.copy-code__value { white-space: normal; overflow-wrap: anywhere; user-select: all; }
.copy-code__btn { --bs-btn-padding-y: 0; --bs-btn-padding-x: 0.3rem; flex: none; }
.barcode-dialog { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 1.25rem; }
.barcode-dialog__main, .barcode-dialog__preview { min-width: 0; }
.barcode-dialog__preview { display: flex; flex-direction: column; gap: 0.75rem; }
.barcode-dialog__create { border: 1px solid var(--tm-border); border-radius: var(--tm-radius); padding: 0.75rem 0.9rem; margin: 0; }
.barcode-dialog__create legend { float: none; width: auto; padding: 0 0.25rem; margin: 0; font-size: 0.6875rem; }
.barcode-dialog__batches { display: flex; flex-direction: column; gap: 0.35rem; max-height: 220px; overflow-y: auto; }
.barcode-batch { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; text-align: left; padding: 0.45rem 0.6rem;
  border: 1px solid var(--tm-border); border-radius: var(--tm-radius); background: var(--tm-surface); color: var(--tm-text); min-width: 0; }
.barcode-batch:hover { background: var(--tm-surface-muted); }
.barcode-batch.is-selected { border-color: var(--tm-primary); box-shadow: inset 3px 0 0 var(--tm-primary); background: var(--tm-primary-subtle); }
.barcode-batch__values { font-size: 0.8125rem; overflow-wrap: anywhere; }
.barcode-batch__meta { font-size: 0.71875rem; color: var(--tm-text-muted); }
.label-preview { position: relative; width: 100%; overflow: hidden; border-radius: var(--tm-radius); background: repeating-conic-gradient(var(--tm-surface-muted) 0 25%, var(--tm-surface) 0 50%) 0 0 / 16px 16px; border: 1px dashed var(--tm-border-strong); }
.label-preview__sheet { position: absolute; top: 1px; left: 0; transform-origin: top left; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.label-preview--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1rem; min-height: 180px; }
@media (max-width: 767.98px) {
  .plan-dialog, .detail-grid, .barcode-dialog { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 1rem 1rem 1.5rem; }
  .toolbar .search { min-width: 0; flex-basis: 100%; max-width: none; }
}

/* Permission matrix */
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; }

/* Utility */
.gap-1-5 { gap: 0.375rem !important; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-help { cursor: help; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}