:root {
  --ink: #17211b;
  --muted: #66736b;
  --canvas: #f3f5f1;
  --panel: #ffffff;
  --line: #dfe5dc;
  --forest: #173f2b;
  --forest-2: #245b40;
  --lime: #d9f764;
  --violet: #635bff;
  --mint: #2a9d75;
  --amber: #d68b1f;
  --coral: #dc654c;
  --danger: #b33d32;
  --action-receive-bg: #d7f5e7;
  --action-receive-ink: #0d6645;
  --action-usage-bg: #d9ecff;
  --action-usage-ink: #175c8a;
  --action-damage-bg: #ffe1ba;
  --action-damage-ink: #74442b;
  --action-move-bg: #e8ddff;
  --action-move-ink: #5b3f8f;
  --action-transfer-bg: #ffe0eb;
  --action-transfer-ink: #8c3659;
  --action-count-bg: #d9f4f0;
  --action-count-ink: #17675f;
  --action-guide-bg: #d9f764;
  --action-guide-ink: #173f2b;
  --shadow: 0 18px 55px rgba(31, 51, 39, 0.07);
  --radius: 18px;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

html[data-theme="ocean"] { --forest: #123e5c; --forest-2: #1f668d; --lime: #78e6d1; --mint: #168bad; --canvas: #f1f7f8; --line: #d8e5e8; }
html[data-theme="plum"] { --forest: #432651; --forest-2: #754484; --lime: #efb8ff; --mint: #9b54a8; --canvas: #f8f3f8; --line: #eaddea; }
html[data-theme="sunset"] { --forest: #5b3025; --forest-2: #92503b; --lime: #ffd076; --mint: #be643e; --canvas: #f8f3ef; --line: #eadfd6; }
html[data-action-palette="soft"] { --action-receive-bg: #e5f3e9; --action-receive-ink: #37674b; --action-usage-bg: #e6f0f7; --action-usage-ink: #3d647c; --action-damage-bg: #f8ead8; --action-damage-ink: #76583b; --action-move-bg: #eee9f7; --action-move-ink: #635879; --action-transfer-bg: #f7e7ed; --action-transfer-ink: #765263; --action-count-bg: #e3f1ef; --action-count-ink: #416c67; --action-guide-bg: #eef3d8; --action-guide-ink: #506139; }
html[data-action-palette="contrast"] { --action-receive-bg: #087443; --action-receive-ink: #fff; --action-usage-bg: #075f9a; --action-usage-ink: #fff; --action-damage-bg: #a64018; --action-damage-ink: #fff; --action-move-bg: #633ba3; --action-move-ink: #fff; --action-transfer-bg: #9b2454; --action-transfer-ink: #fff; --action-count-bg: #056a63; --action-count-ink: #fff; --action-guide-bg: #5f6900; --action-guide-ink: #fff; }
html[data-font="modern"] { --font-body: "Sukhumvit Set", "Leelawadee UI", Tahoma, sans-serif; --font-display: var(--font-body); }
html[data-font="rounded"] { --font-body: ui-rounded, "SF Pro Rounded", "Thonburi", Tahoma, sans-serif; --font-display: var(--font-body); }
html[data-font="serif"] { --font-body: ui-serif, "Th Sarabun New", "Noto Serif Thai", Georgia, serif; --font-display: var(--font-body); }

* { box-sizing: border-box; }
html { font-family: var(--font-body); color: var(--ink); background: var(--canvas); }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
small { color: var(--muted); }
.block { display: block; margin-top: 3px; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 8px; color: var(--forest-2); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; z-index: 40; display: flex; height: 100vh; flex-direction: column; padding: 24px 16px; overflow-y: auto; color: #f6fbf7; background: var(--forest); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 25px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--forest); background: var(--lime); font-size: 1.25rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.brand strong { display: block; font-size: 1.25rem; letter-spacing: .06em; }
.brand small { display: block; color: #aebdb2; font-size: .72rem; }
.nav { display: grid; gap: 5px; }
.nav-section { margin: 15px 12px 3px; color: rgba(216,228,220,.55); font-size: .6rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 12px; color: #d8e4dc; font-size: .9rem; transition: .18s ease; }
.nav-link:hover, .nav-link:focus-visible { color: white; background: rgba(255,255,255,.09); outline: none; transform: translateX(2px); }
.nav-link.active { color: white; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 var(--lime); }
.nav-link.nav-primary { margin-bottom: 4px; color: var(--forest); background: var(--lime); font-weight: 850; }
.nav-link.nav-primary:hover, .nav-link.nav-primary:focus-visible { color: var(--forest); background: white; }
.nav-link.nav-primary > span { color: var(--forest); }
.nav-link > span { display: grid; width: 23px; place-items: center; color: var(--lime); font-size: 1.05rem; }
.nav-link b { margin-left: auto; min-width: 21px; padding: 3px 6px; border-radius: 999px; color: var(--forest); background: var(--lime); font-size: .68rem; text-align: center; }
.sidebar-bottom { display: grid; gap: 10px; margin-top: auto; padding-top: 24px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 10px 0; border-top: 1px solid rgba(255,255,255,.12); min-width: 0; }
.sidebar-user span:last-child { min-width: 0; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: .82rem; }
.sidebar-user small { color: #9fb0a4; font-size: .68rem; }
.avatar { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--forest-2); font-weight: 800; list-style: none; }
.avatar::-webkit-details-marker { display: none; }

.main-column { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; height: 72px; align-items: center; gap: 18px; padding: 0 clamp(18px, 4vw, 48px); border-bottom: 1px solid rgba(223,229,220,.85); background: rgba(243,245,241,.88); backdrop-filter: blur(18px); }
.topbar-title { font-weight: 750; }
.topbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.icon-button { position: relative; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; }
.icon-button i { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 2px 5px; border-radius: 99px; color: white; background: var(--coral); font-size: .62rem; font-style: normal; }
.menu-toggle { display: none; }
.user-menu { position: relative; }
.user-popover { position: absolute; top: 45px; right: 0; display: grid; width: 230px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.user-popover > strong { padding: 9px 10px 11px; border-bottom: 1px solid var(--line); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; }
.user-popover a, .user-popover button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; }
.user-popover a:hover, .user-popover button:hover { background: var(--canvas); }

.content { width: min(1380px, 100%); margin: auto; padding: 34px clamp(18px, 4vw, 48px) 64px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.page-heading h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.page-heading p:last-child { margin: 9px 0 0; color: var(--muted); }
.page-guide { margin-bottom: 22px; overflow: visible; }
.page-guide > summary { display: flex; min-height: 74px; align-items: center; gap: 13px; padding: 14px 18px; list-style: none; cursor: pointer; }
.page-guide > summary::-webkit-details-marker { display: none; }
.page-guide-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--action-guide-ink); background: var(--action-guide-bg); font-size: 1.05rem; font-weight: 900; }
.page-guide-summary { min-width: 0; }
.page-guide-summary strong, .page-guide-summary small { display: block; }
.page-guide-summary strong { margin-bottom: 3px; font-size: .88rem; }
.page-guide-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-guide-toggle { flex: 0 0 auto; margin-left: auto; padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--forest-2); background: white; font-size: .7rem; font-weight: 800; }
.page-guide[open] > summary { border-bottom: 1px solid var(--line); }
.page-guide-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 24px; padding: 22px; }
.page-guide-section h2 { margin: 0 0 13px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.page-guide-section ol { display: grid; gap: 10px; margin: 0; padding-left: 24px; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.page-guide-section li::marker { color: var(--forest-2); font-weight: 900; }
.page-guide-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.page-guide-examples article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf9; }
.page-guide-examples small, .page-guide-examples code, .page-guide-examples p { display: block; }
.page-guide-examples small { margin-bottom: 5px; font-size: .65rem; font-weight: 800; }
.page-guide-examples code { overflow-wrap: anywhere; color: var(--forest-2); background: #edf4ee; font-size: .73rem; font-weight: 800; line-height: 1.45; }
.page-guide-examples p { margin: 7px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.page-guide-notes { grid-column: 1 / -1; padding: 13px 15px; border-left: 4px solid var(--amber); border-radius: 8px; background: #fffaf0; }
.page-guide-notes strong { font-size: .76rem; }
.page-guide-notes ul { display: grid; gap: 5px; margin: 7px 0 0; padding-left: 19px; color: #685a32; font-size: .7rem; line-height: 1.45; }
.button-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; font-weight: 750; font-size: .84rem; transition: .16s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(31,51,39,.1); }
.button:focus-visible, .task-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--forest-2) 28%, transparent); outline-offset: 3px; }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; box-shadow: none; }
.button.primary { border-color: var(--forest); color: white; background: var(--forest); }
.button.primary:hover { background: var(--forest-2); }
.button.secondary { background: white; }
.button.danger { border-color: #f0c9c4; color: var(--danger); background: #fff8f7; }
.button.small { min-height: 32px; padding: 6px 10px; font-size: .75rem; }
.button.wide { width: 100%; min-height: 48px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; }
.panel-heading h2 { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.panel-heading a { color: var(--forest-2); font-size: .82rem; font-weight: 750; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.metric-card { position: relative; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); }
.metric-card::after { position: absolute; right: -24px; bottom: -30px; width: 90px; height: 90px; border-radius: 50%; background: currentColor; content: ""; opacity: .09; }
.metric-card > span, .metric-card > small { display: block; color: var(--muted); font-size: .77rem; }
.metric-card strong { display: block; margin: 13px 0 6px; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 500; color: var(--ink); }
.metric-card.violet { color: var(--violet); border-top: 4px solid var(--violet); }
.metric-card.mint { color: var(--mint); border-top: 4px solid var(--mint); }
.metric-card.amber { color: var(--amber); border-top: 4px solid var(--amber); }
.metric-card.coral { color: var(--coral); border-top: 4px solid var(--coral); }
.dashboard-grid, .detail-grid, .settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.span-2 { grid-column: span 2; }
.quick-actions { margin-top: 18px; }
.dashboard-primary-actions { margin: 0 0 18px; border-color: color-mix(in srgb, var(--forest-2) 24%, var(--line)); }
.action-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 0 20px 22px; }
.action-grid a { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fafbf9; }
.action-grid a:hover { border-color: #afc8b7; background: #f4f8f3; }
.action-grid b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--forest); background: var(--lime); }
.action-grid .action-receive > b, .item-card-action-grid .action-receive > b, .task-card.action-receive .task-icon { color: var(--action-receive-ink); background: var(--action-receive-bg); }
.action-grid .action-usage > b, .item-card-action-grid .action-usage > b, .task-card.action-usage .task-icon { color: var(--action-usage-ink); background: var(--action-usage-bg); }
.action-grid .action-damage > b, .item-card-action-grid .action-damage > b, .task-card.action-damage .task-icon { color: var(--action-damage-ink); background: var(--action-damage-bg); }
.action-grid .action-move > b, .item-card-action-grid .action-move > b, .task-card.action-move .task-icon { color: var(--action-move-ink); background: var(--action-move-bg); }
.action-grid .action-transfer > b, .item-card-action-grid .action-transfer > b, .task-card.action-transfer .task-icon { color: var(--action-transfer-ink); background: var(--action-transfer-bg); }
.action-grid .action-count > b, .item-card-action-grid .action-count > b, .task-card.action-count .task-icon { color: var(--action-count-ink); background: var(--action-count-bg); }
.action-grid strong, .action-grid span, .action-grid small { display: block; }
.action-grid span { font-size: .8rem; font-weight: 750; }
.action-grid small { margin-top: 3px; font-size: .65rem; font-weight: 500; }
.low-stock-list { display: grid; padding: 0 20px 20px; }
.low-stock-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.low-stock-list span > * { display: block; }
.low-stock-list small { margin-top: 3px; }
.low-stock-list b { color: var(--coral); }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { padding: 12px 18px; color: var(--muted); background: #f7f9f6; font-size: .68rem; letter-spacing: .045em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 18px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: #fbfcfa; }
.table-link { color: var(--forest-2); font-weight: 800; }
.empty-cell { height: 130px; color: var(--muted); text-align: center; }
.item-cell { display: flex; align-items: center; gap: 10px; }
.item-cell strong, .item-cell small { display: block; }
.item-thumb { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; overflow: hidden; border-radius: 10px; color: var(--forest); background: #e9f1ea; font-weight: 900; }
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.number { font-variant-numeric: tabular-nums; font-weight: 800; }
.positive { color: #147552; }
.negative { color: var(--danger); }
.status { display: inline-flex; align-items: center; width: max-content; padding: 5px 9px; border-radius: 999px; color: #4f5e55; background: #edf1ed; font-size: .67rem; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.status.active, .status.posted, .status.received, .status.adjusted, .status.approved { color: #146346; background: #dff3e8; }
.status.draft, .status.counting { color: #64520d; background: #f8edbd; }
.status.in_transit, .status.partially_received, .status.pending_approval { color: #4050a0; background: #e4e7ff; }
.status.archived, .status.cancelled, .status.reversed, .status.rejected { color: #8b443d; background: #f8e2df; }

.filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(170px, 260px) auto; gap: 10px; margin-bottom: 16px; }
.item-list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 16px; }
.item-list-toolbar .filter-bar { margin-bottom: 0; }
.item-filter-bar { grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(135px, 1fr)) auto; }
.item-list-toolbar-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.item-list-display-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.item-sort-control { display: flex; align-items: center; gap: 7px; }
.item-sort-control .form-control { width: auto; min-width: 175px; min-height: 42px; padding-block: 7px; font-size: .73rem; font-weight: 750; }
.item-sort-control .button { min-height: 42px; padding: 8px 12px; white-space: nowrap; }
.item-sort-control .item-sort-submit { border-color: var(--forest); box-shadow: 0 4px 12px color-mix(in srgb, var(--forest) 18%, transparent); }
.item-view-switcher { display: flex; align-items: center; gap: 8px; }
.item-view-switcher > span { color: var(--muted); font-size: .7rem; font-weight: 750; }
.item-view-toggle { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.item-view-toggle button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 7px 11px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .73rem; font-weight: 800; }
.item-view-toggle button:hover { color: var(--forest-2); }
.item-view-toggle button[aria-pressed="true"] { color: white; background: var(--forest); box-shadow: 0 4px 12px color-mix(in srgb, var(--forest) 20%, transparent); }
.item-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); align-items: start; gap: 16px; }
.item-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.item-card:hover { border-color: color-mix(in srgb, var(--forest-2) 35%, var(--line)); box-shadow: 0 20px 48px color-mix(in srgb, var(--forest) 12%, transparent); transform: translateY(-2px); }
.item-card-main { display: flex; min-width: 0; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
.item-card-media { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; color: var(--forest); background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 18%, white), var(--canvas)); font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; }
.item-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.item-card-media .status { position: absolute; top: 12px; right: 12px; }
.item-card-body { display: grid; flex: 1; align-content: start; gap: 14px; padding: 18px; }
.item-card-heading { min-width: 0; }
.item-card-heading h2 { display: -webkit-box; margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.12rem; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.item-card-heading p { margin: 5px 0 0; color: var(--forest-2); font-size: .72rem; font-weight: 850; }
.item-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.item-card-meta div { min-width: 0; padding: 10px; border-radius: 10px; background: var(--canvas); }
.item-card-meta small, .item-card-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card-meta small { margin-bottom: 4px; font-size: .62rem; }
.item-card-meta strong { font-size: .76rem; }
.item-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 2px; border-top: 1px solid var(--line); }
.item-card-footer span { color: var(--muted); font-size: .68rem; }
.item-card-footer strong { color: var(--forest-2); font-size: .78rem; }
.item-card-actions { display: grid; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 48%, white); }
.item-card-actions-title { color: var(--muted); font-size: .66rem; letter-spacing: .02em; }
.item-card-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.item-card-action-grid a { display: flex; min-width: 0; min-height: 40px; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: .69rem; font-weight: 800; text-decoration: none; transition: border-color .14s ease, background .14s ease; }
.item-card-action-grid a:hover, .item-card-action-grid a:focus-visible { border-color: var(--forest-2); background: color-mix(in srgb, var(--lime) 9%, white); outline: 0; }
.item-card-action-grid b { display: grid; flex: 0 0 auto; width: 23px; height: 23px; place-items: center; border-radius: 7px; color: var(--forest); background: var(--lime); font-size: .78rem; }
.item-card-action-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-card-more-actions { position: relative; }
.item-card-more-actions > summary { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 6px 9px; border-radius: 8px; color: var(--forest-2); font-size: .68rem; font-weight: 800; list-style: none; cursor: pointer; }
.item-card-more-actions > summary::-webkit-details-marker { display: none; }
.item-card-more-actions > summary:hover, .item-card-more-actions > summary:focus-visible { background: color-mix(in srgb, var(--lime) 10%, transparent); outline: 0; }
.item-card-more-actions[open] > summary span { transform: rotate(180deg); }
.item-card-more-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 7px; }
.item-card-more-actions > div a { min-width: 0; padding: 8px 9px; border-radius: 8px; color: var(--muted); background: white; font-size: .67rem; font-weight: 750; text-decoration: none; }
.item-card-more-actions > div a:hover, .item-card-more-actions > div a:focus-visible { color: var(--forest-2); outline: 2px solid color-mix(in srgb, var(--forest-2) 20%, transparent); }
.item-card-more-actions > div b { display: inline-block; width: 18px; color: var(--forest-2); }
.item-list-pagination { margin-top: 16px; }
.item-list-view[hidden] { display: none; }
.report-toolbar { display: grid; gap: 12px; margin-bottom: 16px; }
.report-filter-bar { grid-template-columns: repeat(4, minmax(150px, 1fr)); margin-bottom: 0; }
.report-filter-bar > .button { justify-self: start; }
.report-toolbar .item-view-switcher { justify-self: end; }
.stock-list-view[hidden] { display: none; }
.stock-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.stock-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.stock-card:hover { box-shadow: 0 20px 48px color-mix(in srgb, var(--forest) 12%, transparent); transform: translateY(-2px); }
.stock-card-main { color: inherit; text-decoration: none; }
.stock-card-media { position: relative; display: grid; aspect-ratio: 1; place-items: center; overflow: hidden; color: var(--forest); background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 18%, white), var(--canvas)); font-size: 2.5rem; font-weight: 850; }
.stock-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.stock-card-media .status { position: absolute; top: 12px; right: 12px; }
.stock-card-body { display: grid; gap: 10px; padding: 18px; }
.stock-card-body .eyebrow { margin: 0; }
.stock-card-body h2 { display: -webkit-box; margin: 0; overflow: hidden; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.stock-card-quantity { color: var(--forest-2); font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.stock-card-quantity small { font-size: .74rem; }
.stock-card dl { display: grid; gap: 0; margin: 2px 0 0; }
.stock-card dl div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .72rem; }
.stock-card dt { color: var(--muted); }
.stock-card dd { margin: 0; text-align: right; }
.stock-location-breakdown summary { color: var(--forest-2); font-size: .72rem; font-weight: 800; cursor: pointer; }
.stock-location-breakdown ul { display: grid; gap: 0; min-width: 270px; margin: 8px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); list-style: none; }
.stock-location-breakdown li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px; }
.stock-location-breakdown li + li { border-top: 1px solid var(--line); }
.stock-location-breakdown li span > * { display: block; }
.stock-location-breakdown li small { margin-top: 2px; color: var(--muted); }
.stock-location-breakdown li strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stock-card-breakdown { margin-top: auto; padding: 0 18px 18px; }
.stock-card-breakdown ul { min-width: 0; }
.form-panel { max-width: 980px; padding: clamp(22px, 4vw, 40px); }
.standard-form { padding-bottom: 68px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; align-content: start; gap: 7px; color: var(--ink); font-size: .78rem; font-weight: 750; }
.field.full { grid-column: 1 / -1; }
.field > span i { color: var(--coral); font-style: normal; }
.field small { font-weight: 400; line-height: 1.4; }
.form-control { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #cad4cc; border-radius: 10px; color: var(--ink); background: white; outline: none; transition: .15s ease; }
.form-control:focus { border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36,91,64,.12); }
.locked-item-defaults { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.locked-item-defaults > div { padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--canvas) 55%, white); }
.locked-item-defaults small, .locked-item-defaults strong { display: block; }
.locked-item-defaults strong { margin-top: 4px; color: var(--forest-2); font-size: .84rem; }
.locked-item-defaults p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .7rem; }
textarea.form-control { resize: vertical; }
select[multiple].form-control { min-height: 120px; }
.item-code-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.item-code-input-row .button { min-height: 43px; white-space: nowrap; }
.item-code-generator-status { color: var(--forest-2); }
.item-code-generator-status.is-error { color: var(--danger); }
.item-picker { display: grid; gap: 10px; }
.item-picker-trigger { display: grid; width: 100%; min-height: 72px; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 9px 13px; border: 1px solid #cad4cc; border-radius: 12px; color: var(--ink); background: white; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.item-picker-trigger:hover { border-color: color-mix(in srgb, var(--forest-2) 55%, #cad4cc); }
.item-picker-trigger:focus-visible, .item-picker-trigger[aria-expanded="true"] { border-color: var(--forest-2); outline: 0; box-shadow: 0 0 0 3px rgba(36,91,64,.12); }
.item-picker-trigger[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent); }
.item-picker-trigger-media, .item-picker-option-media { position: relative; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 10px; color: var(--forest); background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 24%, white), var(--canvas)); font-family: var(--font-display); font-weight: 850; }
.item-picker-trigger-media { width: 52px; height: 52px; font-size: 1.35rem; }
.item-picker-trigger-media img, .item-picker-option-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item-picker-trigger-copy, .item-picker-option-copy { display: grid; min-width: 0; gap: 4px; }
.item-picker-trigger-copy strong, .item-picker-trigger-copy small, .item-picker-option-copy strong, .item-picker-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-picker-trigger-copy strong { font-size: .83rem; }
.item-picker-trigger-copy small { color: var(--muted); font-size: .69rem; font-weight: 550; }
.item-picker-arrow { color: var(--forest-2); font-size: 1.2rem; transition: transform .15s ease; }
.item-picker-trigger[aria-expanded="true"] .item-picker-arrow { transform: rotate(180deg); }
.item-picker-panel { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--canvas) 55%, white); box-shadow: 0 18px 45px rgba(31,51,39,.10); }
.item-picker-panel[hidden] { display: none; }
.item-picker-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; }
.item-picker-search { padding-inline: 14px; }
.item-picker-close { display: grid; min-height: 43px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: white; font-size: 1.3rem; cursor: pointer; }
.item-picker-close:hover, .item-picker-close:focus-visible { color: var(--ink); border-color: var(--forest-2); outline: 0; }
.item-picker-count { margin: 10px 2px 8px; color: var(--muted); font-size: .67rem; font-weight: 600; }
.item-picker-results { display: grid; max-height: 360px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 2px; overflow-y: auto; }
.item-picker-option { display: grid; min-width: 0; min-height: 82px; grid-template-columns: 58px minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; text-align: left; cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.item-picker-option:hover { border-color: var(--forest-2); background: color-mix(in srgb, var(--lime) 7%, white); transform: translateY(-1px); }
.item-picker-option:focus-visible { border-color: var(--forest-2); outline: 3px solid color-mix(in srgb, var(--forest-2) 18%, transparent); }
.item-picker-option.is-selected { border-color: var(--forest-2); background: color-mix(in srgb, var(--lime) 12%, white); }
.item-picker-option-media { width: 58px; height: 58px; font-size: 1.25rem; }
.item-picker-option-copy strong { display: -webkit-box; overflow: hidden; font-size: .75rem; line-height: 1.35; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.item-picker-option-copy small { color: var(--forest-2); font-size: .68rem; }
.item-picker-check { color: var(--forest-2); font-size: 1rem; opacity: 0; }
.item-picker-option.is-selected .item-picker-check { opacity: 1; }
.item-picker-empty { margin: 8px 0 0; padding: 24px 12px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); background: white; text-align: center; font-size: .74rem; font-weight: 550; }
.item-picker-empty[hidden], .item-picker-option[hidden] { display: none; }
.tag-chip-options.form-control { display: flex; min-height: 0; flex-wrap: wrap; gap: 10px; padding: 2px 0; border: 0; background: transparent; }
.tag-chip-options > div { min-width: 0; }
.tag-chip-options label { --tag-chip-bg: #e7f1eb; --tag-chip-ink: #2b6c55; position: relative; display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 9px 16px; border: 2px solid transparent; border-radius: 999px; color: var(--tag-chip-ink); background: var(--tag-chip-bg); font-size: .82rem; font-weight: 750; line-height: 1.2; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tag-chip-options > div:nth-child(5n + 2) label { --tag-chip-bg: #e8ecf8; --tag-chip-ink: #50669b; }
.tag-chip-options > div:nth-child(5n + 3) label { --tag-chip-bg: #f7eed3; --tag-chip-ink: #896d18; }
.tag-chip-options > div:nth-child(5n + 4) label { --tag-chip-bg: #eee5f4; --tag-chip-ink: #77508d; }
.tag-chip-options > div:nth-child(5n + 5) label { --tag-chip-bg: #dff0f2; --tag-chip-ink: #2e747c; }
.tag-chip-options label:hover { transform: translateY(-1px); }
.tag-chip-options label::before { width: 0; overflow: hidden; content: "\2713"; font-size: 1rem; font-weight: 900; opacity: 0; transition: width .15s ease, opacity .15s ease; }
.tag-chip-options label.is-selected { border-color: var(--tag-chip-ink); box-shadow: 0 0 0 4px rgba(23, 63, 43, .07); }
.tag-chip-options label.is-selected::before { width: 1em; opacity: 1; }
.tag-chip-options input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; opacity: 0; }
.tag-chip-options label:has(input:focus-visible) { outline: 3px solid rgba(36, 91, 64, .22); outline-offset: 2px; }
.image-paste-box { display: flex; min-height: 82px; align-items: center; gap: 12px; padding: 12px; border: 1px dashed #aebdb2; border-radius: 11px; color: var(--muted); background: #f8faf7; cursor: copy; transition: border-color .16s ease, background .16s ease; }
.image-paste-box:hover, .field:focus-within .image-paste-box { border-color: var(--forest-2); background: #f3f8f3; }
.image-paste-box.has-image { border-style: solid; border-color: var(--mint); }
.image-paste-box.has-error { border-color: var(--danger); background: #fff8f7; }
.image-paste-copy { display: grid; gap: 3px; min-width: 0; }
.image-paste-copy strong { color: var(--ink); font-size: .76rem; }
.image-paste-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-paste-box.has-error [data-image-paste-status] { color: var(--danger); }
.image-new-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.image-new-previews:empty { display: none; }
.image-new-card { position: relative; display: block; width: 64px; height: 58px; flex: 0 0 auto; overflow: hidden; border-radius: 8px; background: var(--line); }
.image-new-card img { width: 100%; height: 100%; object-fit: cover; }
.image-new-card button { position: absolute; top: 3px; right: 3px; display: grid; width: 20px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: white; background: rgba(18,31,23,.78); font-size: 1rem; line-height: 1; }
.existing-image-gallery { display: grid; grid-template-columns: repeat(5, minmax(90px, 1fr)); gap: 10px; margin-top: 3px; }
.existing-image-card { display: grid; gap: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 11px; background: white; transition: opacity .16s ease, border-color .16s ease, box-shadow .16s ease; }
.existing-image-card.is-primary { border-color: var(--forest-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--forest-2) 13%, transparent); }
.image-preview-button { display: block; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.existing-image-card img { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; }
.existing-image-card label { display: flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 700; cursor: pointer; }
.primary-image-choice { color: var(--forest-2); }
.remove-image-choice { color: var(--danger); }
.existing-image-card.marked-for-removal { border-color: var(--danger); opacity: .45; }
kbd { padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: var(--ink); background: white; font-family: inherit; font-size: .68rem; }
.form-actions { display: flex; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.sticky-form-actions { position: fixed; right: max(clamp(18px, 4vw, 48px), env(safe-area-inset-right)); bottom: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 29; margin: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--forest-2) 24%, var(--line)); border-radius: 14px; background: color-mix(in srgb, white 92%, transparent); box-shadow: 0 16px 42px rgba(31,51,39,.2); backdrop-filter: blur(16px); }
.form-errors, .errorlist { padding: 10px 12px; border-radius: 9px; color: #8f2e27; background: #fff0ee; font-size: .75rem; font-weight: 600; list-style: none; }
.form-errors { margin-bottom: 20px; }
.errorlist { margin: 0; }
.inline-form { display: flex; align-items: center; gap: 6px; min-width: 180px; }
.inline-form .form-control { min-height: 34px; padding: 5px 8px; }
.reversal-form { display: flex; align-items: end; gap: 12px; max-width: 700px; margin: -8px 0 18px; padding: 18px; }
.reversal-form .field { flex: 1; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.branch-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 22px; }
.branch-card h2 { margin: 10px 0 4px; font-family: var(--font-display); font-weight: 500; }
.branch-card p { margin: 0 0 10px; color: var(--muted); }
.branch-card > a { grid-column: 2; color: var(--forest-2); font-size: .78rem; font-weight: 800; }
.branch-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--forest); background: var(--lime); font-size: 1.2rem; }
.branch-locations { margin-top: 18px; }
.simple-list { margin: 0; padding: 0 22px 22px; list-style: none; }
.simple-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); }
.simple-list li span > * { display: block; }
.list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.list-actions .button { display: inline-flex; }
.list-actions form { margin: 0; }
.field-label-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-label-action > a { color: var(--primary); font-size: .82rem; font-weight: 700; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 24px; }
.tag-cloud span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 99px; color: var(--forest-2); background: #eaf2eb; font-size: .75rem; font-weight: 750; }
.tag-cloud a { padding-left: 8px; border-left: 1px solid currentColor; font-size: .68rem; }
.item-overview { grid-column: span 1; padding: 24px; }
.large-item-thumb { display: grid; width: 100%; aspect-ratio: 1; place-items: center; margin-bottom: 22px; overflow: hidden; border-radius: 14px; color: var(--forest); background: linear-gradient(135deg, #e5eee6, #f8faef); font-family: var(--font-display); font-size: 5rem; }
.large-item-thumb > button { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.large-item-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.item-image-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: -12px 0 18px; }
.item-image-strip button { position: relative; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.item-image-strip img { width: 100%; aspect-ratio: 1; border: 2px solid white; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.item-image-strip span { position: absolute; right: 4px; bottom: 6px; padding: 2px 5px; border-radius: 99px; color: white; background: var(--forest); font-size: .55rem; font-weight: 800; }
.item-overview dl, .detail-list { margin: 0; }
.item-overview dl div, .detail-list div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: .75rem; }
dd { margin: 0; font-size: .8rem; font-weight: 700; text-align: right; }
.item-overview > p { color: var(--muted); font-size: .8rem; line-height: 1.65; }
.timeline { padding: 0 24px 24px; }
.timeline > div { display: flex; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.timeline > div > b { display: grid; width: 36px; height: 30px; place-items: center; border-radius: 8px; color: var(--forest); background: var(--lime); font-size: .73rem; }
.timeline span > * { display: block; }
.timeline small { margin-top: 4px; }
.revision-history-heading, .revision-timeline > .revision-row { display: grid; grid-template-columns: 40px minmax(150px, .75fr) minmax(360px, 1.5fr) auto; gap: 16px; }
.revision-history-heading { padding: 8px 24px; color: var(--muted); border-top: 1px solid var(--line); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.revision-timeline > .revision-row { align-items: start; }
.revision-meta { min-width: 0; }
.revision-preview { min-width: 0; }
.revision-preview summary { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--forest-2); background: var(--panel); font-size: .72rem; font-weight: 800; cursor: pointer; list-style: none; }
.revision-preview summary::-webkit-details-marker { display: none; }
.revision-preview summary::before { content: "▸"; transition: transform .15s ease; }
.revision-preview[open] summary::before { transform: rotate(90deg); }
.revision-preview summary span { display: grid; min-width: 21px; height: 21px; place-items: center; border-radius: 99px; color: var(--forest); background: var(--lime); font-size: .65rem; }
.revision-diff { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.revision-diff-row { display: grid; grid-template-columns: minmax(115px, .8fr) repeat(2, minmax(130px, 1fr)); }
.revision-diff-row > * { min-width: 0; margin: 0; padding: 9px 10px; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.45; }
.revision-diff-row + .revision-diff-row { border-top: 1px solid var(--line); }
.revision-diff-row > * + * { border-left: 1px solid var(--line); }
.revision-diff-heading { color: var(--muted); background: var(--table-head); }
.revision-diff-row del, .revision-diff-row ins { display: block; text-decoration: none; }
.revision-diff-row del { color: #8c3027; background: #fff1ed; }
.revision-diff-row ins { color: #17613e; background: #eaf7ef; font-weight: 750; }
.revision-no-changes { margin: 10px 0 0; padding: 10px; border-radius: 9px; color: var(--muted); background: var(--table-head); font-size: .72rem; }
.revision-row > form { justify-self: end; }
.transfer-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; margin-bottom: 18px; padding: 28px; }
.transfer-route > div { display: grid; justify-items: center; gap: 7px; text-align: center; }
.route-dot { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: var(--forest); background: var(--lime); font-weight: 900; }
.route-dot.destination { color: white; background: var(--forest); }
.route-line { color: var(--muted); }
.route-line b { margin: 0 10px; color: var(--forest-2); }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 24px; padding: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .77rem; }
.pagination-links { display: flex; align-items: center; gap: 24px; }
.pagination a { color: var(--forest-2); font-weight: 800; }
.pagination-jump { display: flex; align-items: center; gap: 7px; }
.pagination-jump label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pagination-jump input[type="number"] { width: 64px; min-height: 34px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); font: inherit; font-variant-numeric: tabular-nums; text-align: center; }
.pagination-jump input[type="number"]:focus { border-color: var(--forest-2); outline: 3px solid color-mix(in srgb, var(--forest-2) 14%, transparent); }
.pagination-jump button { min-height: 34px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--forest-2); background: var(--panel); font: inherit; font-weight: 800; cursor: pointer; }
.pagination-jump button:hover { border-color: var(--forest-2); background: color-mix(in srgb, var(--lime) 9%, white); }
.pagination.pagination-compact { justify-content: flex-start; gap: 12px 18px; padding: 0; border-top: 0; }
.pagination-compact .pagination-links { gap: 14px; }
.pagination-compact .pagination-jump label > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.empty-state { padding: 50px 22px; color: var(--muted); text-align: center; }
.empty-state.compact { padding: 24px 8px; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-grid article { padding: 24px; }
.help-grid article > b { color: var(--mint); font-family: var(--font-display); font-size: 1.5rem; }
.help-grid h2 { margin: 18px 0 8px; font-family: var(--font-display); font-weight: 500; }
.help-grid p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.notification-list article { display: flex; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.notification-list article.unread { background: #f5faed; }
.notification-list p { margin: 5px 0; color: var(--muted); }
.notification-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--forest); background: var(--lime); }
.messages { position: fixed; top: 82px; right: 22px; z-index: 100; display: grid; gap: 8px; width: min(400px, calc(100vw - 44px)); }
.toast { padding: 13px 16px; border: 1px solid #cdd9ce; border-radius: 12px; color: #23452f; background: #edfaef; box-shadow: var(--shadow); font-size: .8rem; }
.toast.error { border-color: #efc2bd; color: #7b2e27; background: #fff1ef; }

.auth-shell { display: grid; grid-template-columns: minmax(360px, .9fr) 1.1fr; min-height: 100vh; background: var(--panel); }
.auth-panel { padding: clamp(32px, 6vw, 90px); }
.auth-visual { position: relative; display: flex; min-height: 100vh; flex-direction: column; justify-content: space-between; overflow: hidden; color: white; background: var(--forest); }
.auth-visual::before, .auth-visual::after { position: absolute; border: 1px solid color-mix(in srgb, var(--lime) 28%, transparent); border-radius: 50%; content: ""; }
.auth-visual::before { right: -180px; bottom: -170px; width: 500px; height: 500px; }
.auth-visual::after { right: -60px; bottom: -50px; width: 260px; height: 260px; background: color-mix(in srgb, var(--lime) 10%, transparent); }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 1.35rem; letter-spacing: .1em; }
.auth-visual > div { position: relative; z-index: 1; }
.auth-visual .eyebrow { color: var(--lime); }
.auth-visual h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 5.2vw, 5rem); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.auth-visual p:not(.eyebrow) { max-width: 520px; margin-top: 25px; color: rgba(255,255,255,.76); font-size: 1rem; line-height: 1.7; }
.auth-visual > small { position: relative; z-index: 1; color: rgba(255,255,255,.62); }
.auth-form-panel { display: grid; place-items: center; background: var(--canvas); }
.auth-form { width: min(430px, 100%); }
.auth-form h2 { margin: 0; font-family: var(--font-display); font-size: 2.35rem; font-weight: 500; }

.theme-settings-form { display: grid; max-width: 1100px; gap: 18px; }
.theme-settings-section { padding: clamp(22px, 4vw, 34px); overflow: visible; }
.theme-settings-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.theme-settings-heading h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; }
.theme-settings-heading p { margin: 0; color: var(--muted); font-size: .82rem; }
.settings-step { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--forest); background: var(--lime); font-size: .8rem; font-weight: 850; }
.choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-choice-grid, .font-choice-grid, .action-palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.action-palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-choice, .font-choice, .action-palette-choice { position: relative; min-width: 0; cursor: pointer; }
.theme-choice > input, .font-choice > input, .action-palette-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-choice-card, .font-choice-card, .action-palette-card { display: grid; height: 100%; min-height: 148px; align-content: start; padding: 16px; border: 2px solid var(--line); border-radius: 15px; background: white; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.theme-choice:hover .theme-choice-card, .font-choice:hover .font-choice-card, .action-palette-choice:hover .action-palette-card { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(31,51,39,.08); }
.theme-choice input:checked + .theme-choice-card, .font-choice input:checked + .font-choice-card, .action-palette-choice input:checked + .action-palette-card { border-color: var(--forest-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest-2) 14%, transparent); }
.theme-choice input:focus-visible + .theme-choice-card, .font-choice input:focus-visible + .font-choice-card, .action-palette-choice input:focus-visible + .action-palette-card { outline: 3px solid color-mix(in srgb, var(--forest-2) 25%, transparent); outline-offset: 2px; }
.theme-choice-card strong, .font-choice-card strong, .action-palette-card strong { margin-top: 13px; font-size: .82rem; }
.theme-choice-card small, .font-choice-card small, .action-palette-card small { margin-top: 5px; line-height: 1.45; }
.action-palette-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.action-palette-icons i { display: grid; aspect-ratio: 1; place-items: center; border-radius: 8px; font-style: normal; font-weight: 900; }
.action-palette-icons i:nth-child(1) { color: var(--action-receive-ink); background: var(--action-receive-bg); }
.action-palette-icons i:nth-child(2) { color: var(--action-usage-ink); background: var(--action-usage-bg); }
.action-palette-icons i:nth-child(3) { color: var(--action-damage-ink); background: var(--action-damage-bg); }
.action-palette-icons i:nth-child(4) { color: var(--action-move-ink); background: var(--action-move-bg); }
.action-palette-icons i:nth-child(5) { color: var(--action-transfer-ink); background: var(--action-transfer-bg); }
.action-palette-icons i:nth-child(6) { color: var(--action-count-ink); background: var(--action-count-bg); }
[data-action-palette-preview="soft"] { --action-receive-bg: #e5f3e9; --action-receive-ink: #37674b; --action-usage-bg: #e6f0f7; --action-usage-ink: #3d647c; --action-damage-bg: #f8ead8; --action-damage-ink: #76583b; --action-move-bg: #eee9f7; --action-move-ink: #635879; --action-transfer-bg: #f7e7ed; --action-transfer-ink: #765263; --action-count-bg: #e3f1ef; --action-count-ink: #416c67; }
[data-action-palette-preview="contrast"] { --action-receive-bg: #087443; --action-receive-ink: #fff; --action-usage-bg: #075f9a; --action-usage-ink: #fff; --action-damage-bg: #a64018; --action-damage-ink: #fff; --action-move-bg: #633ba3; --action-move-ink: #fff; --action-transfer-bg: #9b2454; --action-transfer-ink: #fff; --action-count-bg: #056a63; --action-count-ink: #fff; }
.theme-swatches { display: grid; grid-template-columns: 1.35fr 1fr .8fr; height: 54px; overflow: hidden; border-radius: 10px; }
.theme-swatches i { background: var(--preview-primary); }
.theme-swatches i:nth-child(2) { background: var(--preview-secondary); }
.theme-swatches i:nth-child(3) { background: var(--preview-accent); }
[data-theme-preview="forest"] { --preview-primary: #173f2b; --preview-secondary: #245b40; --preview-accent: #d9f764; }
[data-theme-preview="ocean"] { --preview-primary: #123e5c; --preview-secondary: #1f668d; --preview-accent: #78e6d1; }
[data-theme-preview="plum"] { --preview-primary: #432651; --preview-secondary: #754484; --preview-accent: #efb8ff; }
[data-theme-preview="sunset"] { --preview-primary: #5b3025; --preview-secondary: #92503b; --preview-accent: #ffd076; }
.font-choice-card b { font-size: 1.65rem; font-weight: 650; }
.font-choice-card[data-font-preview="system"] { font-family: Inter, ui-sans-serif, sans-serif; }
.font-choice-card[data-font-preview="modern"] { font-family: "Sukhumvit Set", "Leelawadee UI", Tahoma, sans-serif; }
.font-choice-card[data-font-preview="rounded"] { font-family: ui-rounded, "SF Pro Rounded", "Thonburi", Tahoma, sans-serif; }
.font-choice-card[data-font-preview="serif"] { font-family: ui-serif, "Th Sarabun New", Georgia, serif; }
.favicon-settings-grid { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr); gap: 18px; }
.favicon-preview-card, .favicon-upload-field { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.favicon-preview-card { display: flex; align-items: center; gap: 15px; }
.favicon-preview-card strong, .favicon-preview-card small, .favicon-upload-field > label, .favicon-upload-field > small { display: block; }
.favicon-preview-card small, .favicon-upload-field > small { margin-top: 5px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.favicon-preview-frame { display: grid; flex: 0 0 auto; width: 72px; height: 72px; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); }
.favicon-preview-frame img { width: 54px; height: 54px; object-fit: contain; }
.favicon-upload-field > label { margin-bottom: 8px; font-size: .76rem; font-weight: 800; }
.favicon-upload-field input[type="file"] { display: block; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--canvas); font: inherit; font-size: .72rem; }
.favicon-clear-option { display: flex !important; align-items: flex-start; gap: 8px; margin: 14px 0 0 !important; color: var(--danger); font-weight: 650 !important; line-height: 1.45; cursor: pointer; }
.favicon-clear-option input { flex: 0 0 auto; margin-top: 2px; }
.theme-save-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 14px 40px rgba(31,51,39,.14); backdrop-filter: blur(16px); }
.theme-save-bar p { margin: 0; }
.theme-save-bar p strong, .theme-save-bar p small { display: block; }
.theme-save-bar p strong { font-size: .82rem; }
.theme-save-bar p small { margin-top: 3px; font-size: .7rem; }
.access-filter { grid-template-columns: minmax(240px, 1fr) auto; }
.member-identity { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.member-identity span:last-child { min-width: 0; }
.member-identity strong, .member-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-chips { display: flex; max-width: 360px; flex-wrap: wrap; gap: 5px; }
.access-chips span { padding: 4px 7px; border-radius: 99px; color: var(--forest-2); background: #eaf2eb; font-size: .65rem; font-weight: 750; }
.role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 22px; }
.role-card h2 { margin: 0 0 5px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.role-card p { margin: 0; color: var(--muted); font-size: .75rem; }
.role-card > .button { grid-column: 1 / -1; }
.role-permission-form { display: grid; max-width: 1180px; gap: 18px; }
.role-name-panel, .permission-panel { padding: 24px; }
.role-name-panel { max-width: 620px; }
.permission-selected-count { padding: 6px 10px; border-radius: 999px; color: var(--forest-2); background: color-mix(in srgb, var(--lime) 25%, white); font-size: .7rem; font-weight: 800; }
.permission-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 0 24px 20px; }
.permission-sections { display: grid; gap: 14px; padding: 0 24px 24px; }
.permission-section { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--canvas) 45%, white); }
.permission-section[hidden], .permission-card[hidden] { display: none; }
.permission-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.permission-section h3, .permission-section p { margin: 0; }
.permission-section h3 { font-family: var(--font-display); font-size: 1rem; }
.permission-section p { margin-top: 4px; color: var(--muted); font-size: .7rem; }
.permission-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.permission-card { display: flex; min-width: 0; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.permission-card:has(input:checked) { border-color: var(--forest-2); background: color-mix(in srgb, var(--lime) 8%, white); }
.permission-card input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--forest-2); }
.permission-card span, .permission-card strong, .permission-card small, .permission-card code { display: block; min-width: 0; }
.permission-card strong { font-size: .76rem; }
.permission-card small { margin-top: 4px; line-height: 1.4; }
.permission-card code { margin-top: 7px; overflow: hidden; color: var(--forest-2); background: transparent; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.auth-form > .muted { margin: 8px 0 28px; }
.auth-form .field { margin-bottom: 17px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font-size: .72rem; font-weight: 750; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.sso-button { margin-bottom: 4px; }

.identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.identity-card, .identity-action-panel, .identity-history { padding: 24px; }
.identity-card dl { display: grid; gap: 14px; margin: 0; }
.identity-card dl > div { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.identity-card dt { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.identity-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.identity-action-panel { margin-bottom: 18px; }
.identity-action-panel h2, .identity-history h2 { margin-top: 0; font-family: var(--font-display); }
.identity-warning { margin-bottom: 18px; padding: 16px 18px; border: 1px solid #edcc91; border-radius: 12px; color: #6d4d12; background: #fff8e8; }
.identity-warning p { margin: 5px 0 0; }

code { padding: 3px 6px; border-radius: 6px; background: #eef1ed; font-size: .72rem; }
.sidebar-backdrop { display: none; }
.global-search { display:flex; width:min(300px,28vw); border:1px solid var(--line); border-radius:999px; background:white; }
.global-search input { min-width:0; flex:1; padding:9px 14px; border:0; outline:0; background:transparent; }
.global-search button { padding:0 13px; border:0; color:var(--muted); background:transparent; cursor:pointer; }
.search-result { display:flex; gap:10px; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; }
.search-result span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.evidence-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px; margin:12px 0 18px; }
.evidence-grid button { min-width:0; padding:0; border:0; color:var(--ink); background:transparent; text-align:left; cursor:zoom-in; }
.evidence-grid img { display:block; width:100%; aspect-ratio:1; margin-bottom:6px; object-fit:cover; border:1px solid var(--line); border-radius:12px; }
.evidence-grid small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evidence-item { display: grid; min-width: 0; gap: 7px; align-content: start; }
.evidence-item > button { width: 100%; }
.evidence-item video { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; background: #142019; object-fit: contain; }
.evidence-item form .button { width: 100%; cursor: pointer; }
.evidence-edit summary { color: var(--forest-2); font-size: .68rem; font-weight: 800; cursor: pointer; }
.evidence-edit form { display: grid; gap: 6px; margin-top: 7px; }
.evidence-edit .form-control { min-width: 0; padding: 7px; font-size: .62rem; }
.image-lightbox { box-sizing: border-box; width: min(94vw, 1200px); max-width: calc(100vw - 32px); height: min(calc(100vh - 32px), 900px); height: min(calc(100dvh - 32px), 900px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; overflow: hidden; background: transparent; }
.image-lightbox::backdrop { background: rgba(4, 13, 9, .82); backdrop-filter: blur(5px); }
.image-lightbox-frame { position: relative; display: grid; width: 100%; height: 100%; box-sizing: border-box; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
.image-lightbox img { display: block; max-width: 100%; max-height: 100%; place-self: center; border-radius: 14px; object-fit: contain; box-shadow: 0 28px 90px rgba(0,0,0,.45); }
.image-lightbox p { max-width: min(800px, 86vw); margin: 0; overflow: hidden; color: white; text-align: center; text-overflow: ellipsis; white-space: nowrap; justify-self: center; }
.image-lightbox-close { position: absolute; z-index: 1; top: 20px; right: 20px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: white; background: rgba(10,20,15,.75); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.upload-form { padding-top:16px; border-top:1px solid var(--line); }
.transaction-summary-card .detail-list { padding: 0 24px 22px; }
.transaction-summary-card .detail-list div { align-items: flex-start; padding: 12px 0; line-height: 1.45; }
.transaction-summary-card .detail-list div:last-child { border-bottom: 0; }
.transaction-summary-card .detail-list dt { flex: 0 0 42%; }
.transaction-summary-card .detail-list dd { min-width: 0; overflow-wrap: anywhere; }
.transaction-evidence-card { display: flex; min-width: 0; flex-direction: column; }
.transaction-evidence-card .evidence-grid { flex: 1; align-content: start; margin: 0; padding: 0 24px 22px; }
.transaction-evidence-card .empty-state { display: grid; min-height: 96px; place-items: center; padding: 18px; }
.transaction-evidence-card .upload-form { display: grid; gap: 14px; margin: 0; padding: 20px 24px 22px; }
.transaction-evidence-card .upload-form p { display: grid; gap: 8px; margin: 0; }
.transaction-evidence-card .upload-form label { color: var(--ink); font-size: .78rem; font-weight: 750; line-height: 1.45; }
.transaction-evidence-card .upload-form .form-control { min-width: 0; }
.transaction-evidence-card .upload-form .button { justify-self: start; }
.approval-form { margin-bottom:18px; border-left:4px solid var(--amber); }
.approval-form-body { display: grid; gap: 16px; padding: 0 24px 24px; }

.workflow-steps { display: grid; max-width: 760px; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px; margin: 0 0 28px; }
.workflow-steps > span { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.workflow-steps b { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: .75rem; }
.workflow-steps small { color: inherit; font-size: .7rem; font-weight: 750; white-space: nowrap; }
.workflow-steps > i { height: 2px; background: var(--line); }
.workflow-steps .done, .workflow-steps .active { color: var(--forest-2); }
.workflow-steps .done b, .workflow-steps .active b { border-color: var(--forest-2); color: white; background: var(--forest-2); }
.workflow-steps .done + i { background: var(--forest-2); }

.v2-form-panel .standard-form { padding-top: 0; }
.v2-item-selection-panel .panel-heading { padding: clamp(22px, 3vw, 30px); padding-bottom: 16px; }
.v2-item-selection-panel .v2-item-form { gap: 20px; padding: 8px clamp(22px, 3vw, 30px) clamp(24px, 3vw, 32px); }
.v2-item-selection-panel .form-actions { margin-top: 2px; padding-top: 18px; }
.v2-item-form { display: grid; gap: 18px; }
.v2-selected-item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 18px; padding: 18px; }
.v2-selected-item-media { display: grid; width: 84px; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 16px; color: var(--forest); background: var(--canvas); font-size: 1.8rem; font-weight: 850; }
.v2-selected-item-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.v2-selected-item h2, .v2-selected-item p { margin: 0; }
.v2-selected-item h2 { font-family: var(--font-display); font-size: 1.3rem; }
.v2-selected-item p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: .76rem; }
.v2-transaction-form { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; }
.v2-form-section { padding: 24px; border-bottom: 1px solid var(--line); }
.v2-form-section .section-heading { margin-bottom: 18px; }
.v2-balance-options > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-balance-options > div > div { min-width: 0; }
.v2-balance-options label { display: flex; min-height: 72px; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; font-size: .78rem; font-weight: 750; cursor: pointer; }
.v2-balance-options label:has(input:checked) { border-color: var(--forest-2); background: color-mix(in srgb, var(--lime) 10%, white); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest-2) 12%, transparent); }
.v2-balance-options input[type="radio"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; accent-color: var(--forest-2); }
.v2-damage-value { display: grid; align-content: center; gap: 4px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--coral) 32%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--coral) 6%, white); }
.v2-damage-value small, .v2-damage-value span { color: var(--muted); }
.v2-damage-value strong { color: var(--danger); font-family: var(--font-display); font-size: 1.5rem; }
.v2-evidence-field em { color: var(--danger); font-style: normal; }
.v2-file-selection { display: grid; gap: 5px; margin-top: 8px; color: var(--forest-2); font-size: .7rem; }
.v2-transaction-form > .form-actions { padding: 18px 24px; }
.cancel-transaction-form { display: flex; min-width: min(100%, 360px); align-items: center; gap: 8px; }
.cancel-transaction-form .form-control { min-width: 160px; }

.work-center-heading { max-width: 850px; margin-bottom: 34px; }
.task-section { margin-bottom: 34px; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.section-heading p { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.section-number { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--forest); background: var(--lime); font-size: .8rem; font-weight: 900; }
.task-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.task-card-grid.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.task-card { display: grid; min-height: 190px; grid-template-rows: auto 1fr auto; gap: 17px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.task-card:hover { border-color: color-mix(in srgb, var(--forest-2) 45%, var(--line)); transform: translateY(-3px); box-shadow: 0 22px 55px rgba(31,51,39,.12); }
.task-card > span:nth-child(2) { display: block; }
.task-card strong, .task-card small { display: block; }
.task-card strong { font-family: var(--font-display); font-size: 1.15rem; }
.task-card small { margin-top: 7px; line-height: 1.5; }
.task-card > b { color: var(--forest-2); font-size: .74rem; }
.task-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; color: var(--forest); background: var(--lime); font-size: 1.3rem; font-weight: 900; }
.task-card-warning .task-icon { color: var(--action-damage-ink); background: var(--action-damage-bg); }
.task-card-positive .task-icon { color: var(--action-receive-ink); background: var(--action-receive-bg); }
.task-card-featured { min-height: 170px; background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--canvas) 76%, white)); }
.advanced-actions { margin-top: 5px; box-shadow: none; }
.advanced-actions > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; list-style: none; cursor: pointer; }
.advanced-actions > summary::-webkit-details-marker { display: none; }
.advanced-actions summary span > * { display: block; }
.advanced-actions summary small { margin-top: 4px; font-weight: 400; }
.advanced-actions summary b { color: var(--forest-2); font-size: .72rem; }
.advanced-actions[open] summary b::after { content: " ↓"; }
.advanced-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 24px 24px; }
.advanced-actions > div a { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.advanced-actions > div strong, .advanced-actions > div small { display: block; }
.advanced-actions > div small { margin-top: 5px; }

.next-action-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 18px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--forest-2) 32%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--lime) 10%, white); box-shadow: var(--shadow); }
.next-action-card.blocked { border-color: #efbdb6; background: #fff6f4; }
.next-action-card.complete { border-color: #b9dec9; background: #f1fbf5; }
.next-action-card.inactive { border-color: var(--line); background: #f7f8f6; }
.next-action-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: var(--forest); background: var(--lime); font-size: 1.25rem; font-weight: 900; }
.next-action-card.blocked .next-action-icon { color: white; background: var(--danger); }
.next-action-card.complete .next-action-icon { color: white; background: var(--mint); }
.next-action-card.inactive .next-action-icon { color: var(--muted); background: var(--line); }
.next-action-copy h2, .next-action-copy p { margin: 0; }
.next-action-copy h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.next-action-copy p:not(.eyebrow) { margin-top: 6px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.next-action-copy small { display: block; margin-top: 6px; line-height: 1.45; }
.next-action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.transaction-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.technical-details { margin-top: 18px; }
.technical-details-heading { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.technical-details-heading h2, .technical-details-heading p { margin: 0; }
.technical-details-heading h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 650; }
.technical-details-heading p { margin-top: 4px; color: var(--muted); font-size: .75rem; }

.count-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; margin-bottom: 18px; padding: 24px; }
.count-progress-copy { display: flex; align-items: center; gap: 16px; }
.count-progress-copy h2, .count-progress-copy p { margin: 0; }
.count-progress-copy h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.count-progress-copy p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: .78rem; }
.count-progress-icon { display: grid; flex: 0 0 auto; width: 54px; height: 54px; place-items: center; border-radius: 15px; color: var(--forest); background: var(--lime); font-size: .82rem; font-weight: 900; }
.progress-track { grid-column: 1 / -1; height: 9px; overflow: hidden; border-radius: 99px; background: var(--line); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--forest-2); transition: width .25s ease; }
.count-summary { display: flex; gap: 28px; }
.count-summary span > * { display: block; }
.count-summary strong { font-family: var(--font-display); font-size: 1.35rem; }
.count-summary small { margin-top: 2px; }
.count-actions { display: flex; align-items: center; justify-content: flex-end; }
.count-table-panel .panel-heading { border-bottom: 1px solid var(--line); }
.count-table tr.is-counted { background: #fbfdfb; }
.count-line-form input { width: 110px; }

@media (max-width: 1150px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .action-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .detail-grid, .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .theme-choice-grid, .font-choice-grid, .action-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .favicon-settings-grid { grid-template-columns: 1fr; }
  .role-grid, .permission-checks.form-control, .permission-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-filter-bar, .report-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: transform .2s ease; box-shadow: 20px 0 55px rgba(0,0,0,.2); }
  body.menu-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(10,25,16,.4); }
  body.menu-open .sidebar-backdrop { display: block; }
  .menu-toggle { display: grid; }
  .topbar { height: 62px; }
  .global-search { width:min(230px,45vw); }
  .content { padding-top: 24px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-grid, .detail-grid, .settings-grid { grid-template-columns: 1fr; }
  .identity-grid { grid-template-columns: 1fr; }
  .span-2, .item-overview { grid-column: auto; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { min-height: 310px; padding: 32px; }
  .auth-visual h1 { font-size: 2.6rem; }
  .auth-visual > small { display: none; }
  .auth-form-panel { padding: 42px 24px; }
  .theme-save-bar { align-items: flex-start; flex-direction: column; }
  .page-guide-body { grid-template-columns: 1fr; }
  .page-guide-notes { grid-column: auto; }
  .next-action-card { grid-template-columns: auto 1fr; }
  .next-action-buttons { grid-column: 1 / -1; justify-content: flex-start; }
  .count-progress { grid-template-columns: 1fr; }
  .count-actions, .count-summary { justify-content: flex-start; }
  .task-card-grid.compact-grid { grid-template-columns: 1fr; }
  .item-list-toolbar { grid-template-columns: 1fr; }
  .item-list-toolbar-controls { align-items: flex-start; flex-direction: column-reverse; }
  .item-list-display-controls { width: 100%; margin-left: 0; justify-content: space-between; }
  .item-view-switcher { justify-content: flex-end; }
  .revision-history-heading { display: none; }
  .revision-timeline > .revision-row { grid-template-columns: 40px minmax(0, 1fr); }
  .revision-preview, .revision-row > form { grid-column: 2; }
  .revision-row > form { justify-self: start; }
}

@media (max-width: 600px) {
  .metric-grid, .card-grid, .help-grid { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .item-filter-bar, .report-filter-bar { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .standard-form { padding-bottom: 82px; }
  .sticky-form-actions { right: 14px; left: 14px; bottom: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .sticky-form-actions .button { flex: 1; }
  .item-picker-results { grid-template-columns: 1fr; }
  .item-code-input-row { grid-template-columns: 1fr; }
  .item-code-input-row .button { width: 100%; }
  .transfer-route { grid-template-columns: 1fr; }
  .route-line { transform: rotate(90deg); margin: 8px 0; }
  .content { padding-inline: 14px; }
  .global-search { display:none; }
  .panel { border-radius: 14px; }
  .theme-choice-grid, .font-choice-grid { grid-template-columns: 1fr; }
  .role-grid, .permission-checks.form-control, .permission-card-grid, .action-palette-grid { grid-template-columns: 1fr; }
  .permission-toolbar, .locked-item-defaults { grid-template-columns: 1fr; }
  .locked-item-defaults p { grid-column: auto; }
  .existing-image-gallery { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
  .theme-save-bar { bottom: 8px; }
  .item-card-grid, .stock-card-grid { grid-template-columns: 1fr; }
  .item-list-display-controls, .item-sort-control { width: 100%; }
  .item-list-display-controls { align-items: stretch; flex-direction: column; }
  .item-sort-control .form-control { min-width: 0; flex: 1; }
  .item-view-switcher { align-items: stretch; flex-direction: column; }
  .item-list-toolbar-controls, .item-list-toolbar-controls .pagination { width: 100%; }
  .item-list-toolbar-controls .pagination { align-items: flex-start; flex-direction: column; }
  .pagination { gap: 12px; }
  .pagination-links { width: 100%; justify-content: space-between; gap: 10px; }
  .pagination-jump { width: 100%; justify-content: center; }
  .item-view-toggle button { flex: 1; justify-content: center; }
  .page-guide > summary { align-items: flex-start; }
  .page-guide-summary small { white-space: normal; }
  .page-guide-toggle { display: none; }
  .page-guide-examples { grid-template-columns: 1fr; }
  .transaction-summary-card .detail-list { padding: 0 18px 18px; }
  .transaction-evidence-card .evidence-grid { padding: 0 18px 18px; }
  .transaction-evidence-card .upload-form { padding: 18px; }
  .task-card-grid, .advanced-actions > div { grid-template-columns: 1fr; }
  .task-card { min-height: 150px; }
  .workflow-steps { gap: 6px; }
  .workflow-steps small { display: none; }
  .next-action-card { grid-template-columns: 1fr; }
  .next-action-buttons { grid-column: auto; }
  .next-action-buttons form, .next-action-buttons .button { width: 100%; }
  .v2-selected-item { grid-template-columns: 68px minmax(0, 1fr); }
  .v2-selected-item-media { width: 68px; }
  .v2-selected-item > .button { grid-column: 1 / -1; }
  .v2-balance-options > div { grid-template-columns: 1fr; }
  .cancel-transaction-form { display: grid; width: 100%; }
  .cancel-transaction-form .form-control { min-width: 0; }
  .count-summary { width: 100%; justify-content: space-between; gap: 12px; }
  .count-progress { padding: 18px; }
  .revision-diff-heading { display: none; }
  .revision-diff-row { grid-template-columns: 1fr 1fr; }
  .revision-diff-row > strong { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .revision-diff-row > del { border-left: 0; }
  .revision-diff-row > del::before, .revision-diff-row > ins::before { display: block; margin-bottom: 3px; color: var(--muted); font-size: .62rem; font-weight: 800; }
  .revision-diff-row > del::before { content: "ก่อนแก้"; }
  .revision-diff-row > ins::before { content: "หลังแก้"; }
}

@media print {
  .sidebar, .topbar, .page-heading .button, .filter-bar, .item-view-switcher, .messages, .image-lightbox { display: none !important; }
  .app-shell { display: block; }
  .content { width: 100%; padding: 0; }
  .panel { border: 0; box-shadow: none; }
}