/* HOP Chafe' Accounting — storefront ledger visual layer. */
@media screen {
  :root {
    --bg: #f4f1e8;
    --panel: #fffef9;
    --panel-subtle: #f9f7ef;
    --ink: #26332b;
    --muted: #657067;
    --line: #d9d8cd;
    --line-strong: #bbbdb2;
    --brand: #285d42;
    --brand-2: #3f7a56;
    --brand-deep: #173c2b;
    --brand-soft: #e7efe5;
    --cream: #fbf1d7;
    --amber: #d9a441;
    --amber-soft: #f8e9bd;
    --espresso: #3b2c26;
    --danger: #ad413c;
    --warning: #8a6116;
    --shadow: 0 14px 38px rgba(47, 54, 45, .07);
    --shadow-soft: 0 3px 12px rgba(47, 54, 45, .05);
    --radius: 12px;
  }

  html { background: var(--bg); }
  body {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    background: linear-gradient(rgba(53, 77, 61, .025) 1px, transparent 1px), var(--bg);
    background-size: 100% 32px;
  }
  ::selection { color: #fff; background: var(--brand-2); }
  a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  a, button, summary { touch-action: manipulation; }
  .app { grid-template-columns: 272px minmax(0, 1fr); }
  .main { background: transparent; }

  .sidebar {
    width: auto;
    padding: 30px 18px 22px;
    gap: 26px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .24) transparent;
    background: var(--brand-deep);
    border-right: 0;
    box-shadow: 8px 0 26px rgba(24, 43, 32, .08);
  }
  .sidebar::-webkit-scrollbar { width: 5px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, .24); }
  .sidebar::after {
    content: "";
    position: absolute;
    right: -84px;
    bottom: 90px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .025), 0 0 0 56px rgba(255, 255, 255, .02);
    pointer-events: none;
  }
  .logo {
    position: relative;
    z-index: 1;
    gap: 13px;
    padding: 0 8px 24px;
    border-bottom: 1px dashed rgba(255, 255, 255, .22);
  }
  .logo-badge {
    position: relative;
    width: 45px;
    height: 49px;
    border-radius: 50% 50% 12px 12px;
    color: var(--brand-deep);
    background: var(--amber);
    box-shadow: inset 0 -5px 0 rgba(90, 58, 18, .12);
  }
  .logo-badge::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 15px;
    width: 11px;
    height: 14px;
    border: 3px solid var(--amber);
    border-left: 0;
    border-radius: 0 8px 8px 0;
  }
  .logo-copy { min-width: 0; }
  .logo strong { font-size: 21px; letter-spacing: -.35px; }
  .logo span { margin-top: 0; color: #c6d7cc; font-size: 12px; }
  .nav { position: relative; z-index: 1; gap: 5px; }
  .nav a {
    position: relative;
    min-width: 0;
    min-height: 50px;
    padding: 12px 13px;
    color: #d5e1d9;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    transition: color .18s ease, background .18s ease, transform .18s ease;
  }
  .nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); transform: translateX(2px); }
  .nav a.active {
    color: var(--brand-deep);
    background: var(--amber-soft);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: inset 4px 0 0 var(--amber);
  }
  .nav .ico { display: grid; place-items: center; width: 24px; }
  .nav .ico svg { width: 20px; height: 20px; }
  .side-profile {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 18px 8px 0;
    border-top: 1px dashed rgba(255, 255, 255, .22);
  }
  .profile-avatar { color: var(--brand-deep); background: var(--amber-soft); border: 0; font-weight: 700; }
  .side-profile small { color: #afc3b6; }
  .side-profile strong { color: #fff; }

  .topbar {
    position: sticky;
    min-height: 88px;
    padding: 16px 32px 18px;
    background: rgba(255, 254, 249, .96);
    border-bottom: 0;
    box-shadow: 0 6px 18px rgba(38, 51, 43, .035);
    backdrop-filter: blur(12px);
  }
  .topbar::after {
    content: "";
    position: absolute;
    right: 32px;
    bottom: 0;
    left: 32px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
  }
  .topbar-copy { min-width: 220px; }
  .topbar h1 { font-size: 20px; line-height: 1.35; color: var(--espresso); }
  .topbar small { color: var(--muted); }
  .top-actions { gap: 8px; }
  .top-actions form { display: flex; order: 4; }
  .top-actions .badge { order: 3; }
  .button-icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
  .button-icon svg { width: 17px; height: 17px; }
  .status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: currentColor; }
  summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #cddfce;
    border-radius: 8px;
    color: var(--brand);
    background: var(--brand-soft);
  }
  .badge.offline { color: #8f3f3a; background: #fff3ef; border-color: #efd1cb; }

  .content { max-width: 1580px; padding: 34px 34px 52px; }
  .page-head { align-items: flex-end; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
  .page-head h2 { color: var(--espresso); font-size: clamp(25px, 2.3vw, 32px); letter-spacing: -.6px; }
  .page-head p { max-width: 72ch; color: var(--muted); }
  .controls { align-items: flex-end; }

  .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-soft); }
  .section { padding: 24px; }
  .section-title { padding-bottom: 13px; border-bottom: 1px dashed var(--line); }
  .section-title h3 { color: var(--espresso); font-size: 17px; }
  .kpis { gap: 14px; margin-bottom: 20px; }
  .kpi { min-height: 150px; padding: 22px 20px 19px; border-top: 4px solid var(--brand-2); box-shadow: none; }
  .kpi:nth-child(2) { border-top-color: #6f8d72; }
  .kpi:nth-child(3) { border-top-color: var(--amber); }
  .kpi:nth-child(4) { border-top-color: var(--espresso); }
  .kpi.highlight { color: #fff; background: var(--brand); border-color: var(--brand); border-top-color: var(--amber); box-shadow: var(--shadow); }
  .kpi .label { color: var(--muted); font-size: 13px; font-weight: 600; }
  .kpi .value { margin: 12px 0 7px; color: var(--espresso); font-size: clamp(27px, 2.5vw, 38px); line-height: 1.15; }
  .kpi .hint { color: var(--muted); }
  .kpi.highlight .value { color: #fff; }
  .kpi.highlight .label, .kpi.highlight .hint { color: #dce9df; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .9fr); gap: 18px; }
  .trend { height: 235px; background: repeating-linear-gradient(to top, transparent 0 54px, #ecebe3 54px 55px); }
  .trend-col i { background: #9bb8a2; }
  .trend-col:hover i, .trend-col:focus i { background: var(--brand); }
  .trend-col:focus em { display: block; }
  .trend-col:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
  .bar-track { background: #ecebe3; }
  .bar-fill { background: var(--brand-2); }
  .stat-line { border-bottom-style: dashed; }

  .quick { gap: 0; }
  .quick button {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 70px;
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px dashed var(--line);
    border-radius: 0;
    color: var(--ink);
    background: transparent;
  }
  .quick button:last-child { border-bottom: 0; }
  .quick button:hover { padding-left: 9px; background: var(--panel-subtle); }
  .quick-icon { display: grid !important; place-items: center; width: 40px; height: 40px; padding: 0 !important; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
  .quick-icon svg { width: 21px; height: 21px; }
  .quick-copy { display: block !important; padding: 0 !important; }
  .quick-copy strong, .quick-copy small { display: block; }
  .quick-copy strong { font-size: 14px; }
  .quick-copy small { margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
  .dashboard-footnote { padding: 10px 14px; border-left: 3px solid var(--amber); color: var(--muted); background: rgba(255, 254, 249, .6); }

  .btn { min-height: 44px; border-radius: 8px; font-weight: 600; transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:active:not(:disabled) { transform: translateY(0); filter: brightness(.94); }
  .btn.primary { color: #fff; background: var(--brand); border: 1px solid var(--brand); box-shadow: 0 4px 10px rgba(40, 93, 66, .12); }
  .btn.primary:hover { color: #fff; background: var(--brand-deep); border-color: var(--brand-deep); }
  .btn.ghost { color: var(--ink); background: var(--panel); border-color: var(--line-strong); }
  .btn.ghost:hover { color: var(--brand-deep); background: var(--brand-soft); border-color: #99ad9c; }
  .btn.danger { color: var(--danger); background: #fff8f6; border-color: #e8c0bc; }
  .btn:disabled { opacity: .6; cursor: wait; transform: none; }
  input, select, textarea { accent-color: var(--brand); }
  .controls select, .controls input, .field input, .field select, .field textarea { min-height: 46px; color: var(--ink); background: #fff; border-color: var(--line-strong); border-radius: 8px; }
  .field label { color: #405248; font-size: 13px; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: #92a497; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(63, 122, 86, .15); }
  .field input[readonly] { background: #f1f1ea; border-style: dashed; }
  .form-card { padding: 26px 28px; }
  .form-section { padding: 25px 0; border-bottom-style: dashed; }
  .form-section h3 { color: var(--espresso); font-size: 18px; }
  .calc-strip { border-color: #cfdacb; border-radius: 8px; background: var(--brand-soft); }
  .calc-strip strong { color: var(--brand-deep); font-variant-numeric: tabular-nums; }
  .form-actions { border-top-style: dashed; }

  .table-wrap { border-radius: 9px; border-color: var(--line); box-shadow: none; scrollbar-color: #a9b4aa #eeece4; }
  .table th, .table td { padding: 14px 15px; }
  .table th { position: sticky; top: 0; z-index: 1; color: #3f4d44; background: #edece4; border-bottom: 1px solid var(--line-strong); }
  .table tbody tr:nth-child(even) { background: #fbfaf4; }
  .table tbody tr:hover { background: #f1f4ea; }
  .table .total { color: var(--brand-deep); }
  .empty { color: var(--muted); background: var(--panel-subtle); }
  .notice { color: #6a4e17; background: var(--cream); border-color: #e8d6a7; border-radius: 8px; }
  .green-dot { background: var(--brand-2); }
  .summary-box { background: var(--espresso); border-radius: 9px; }
  .summary-box .row { border-bottom-color: rgba(255, 255, 255, .17); }
  .summary-box .good { color: #a9dfb5; }
  .ledger-card { box-shadow: var(--shadow); }
  .ledger-heading { background: var(--brand-deep); border-bottom: 4px solid var(--amber); }
  .ledger-kicker { color: var(--amber-soft); }
  .ledger-tools, .ledger-actions { background: #f7f6ef; }
  .ledger-panel-head { background: #eeede5; }
  .income-panel .ledger-panel-head { box-shadow: inset 4px 0 0 var(--brand-2); }
  .expense-panel .ledger-panel-head { box-shadow: inset 4px 0 0 var(--amber); }
  .ledger-entry, .ledger-spacer { border-bottom-style: dashed; }
  .ledger-total-row.grand { color: var(--brand-deep); background: var(--brand-soft); }
  .ledger-carry-row { background: var(--cream); border-color: #e8d6a7; }
  .carry-field input { background: #fffaf0; border-color: #d8bd77 !important; }
  .mobile-nav { box-shadow: 0 -10px 28px rgba(38, 51, 43, .1); }
  .toast { border-left: 4px solid var(--amber); border-radius: 8px; background: var(--brand-deep); }
  .toast.error { border-left-color: #f0a09b; background: #7b342f; }
  .skip-link { border-color: var(--brand); border-radius: 6px; color: var(--brand-deep); }

  .hop-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(20px, 4vw, 54px);
    border-top: 7px solid var(--amber);
    background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .08) 0 2px, transparent 3px) 0 0 / 26px 26px, var(--brand-deep);
  }
  .login-shell { display: grid; grid-template-columns: minmax(300px, .92fr) minmax(360px, 1.08fr); width: min(900px, 100%); min-height: 550px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; background: var(--panel); box-shadow: 0 28px 90px rgba(7, 24, 15, .32); }
  .login-brand-panel { display: flex; flex-direction: column; padding: 42px; color: #fff; background: var(--brand); border-right: 5px solid var(--amber); }
  .login-brand-lockup { display: flex; align-items: center; gap: 14px; }
  .login-brand-lockup > span:last-child { display: grid; line-height: 1.15; }
  .login-brand-lockup strong { font-size: 21px; }
  .login-brand-lockup small { margin-top: 4px; color: #cfdfd3; letter-spacing: .08em; }
  .login-brand-copy { margin: auto 0 32px; }
  .login-brand-copy p { margin: 0 0 10px; color: var(--amber-soft); font-size: 14px; }
  .login-brand-copy h1 { margin: 0; color: #fff; font-size: clamp(34px, 4vw, 48px); line-height: 1.18; letter-spacing: -1px; }
  .login-capabilities { display: grid; gap: 10px; margin: 0; padding: 20px 0 0; border-top: 1px dashed rgba(255, 255, 255, .35); list-style: none; }
  .login-capabilities li { display: flex; align-items: center; gap: 10px; color: #e2ece5; font-size: 13px; }
  .login-capabilities li::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--amber); border-radius: 50%; }
  .login-form-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 6vw, 64px); }
  .login-form-heading { margin-bottom: 28px; }
  .login-form-heading h2 { margin: 0 0 7px; color: var(--espresso); font-size: 30px; }
  .login-form-heading p { margin: 0; color: var(--muted); }
  .login-mobile-mark { display: none; }
  .login-form-panel .field { margin-bottom: 18px; }
  .login-form-panel .field label { margin-bottom: 7px; font-weight: 600; }
  .login-form-panel .field input { min-height: 50px; }
  .login-form-panel .btn { width: 100%; min-height: 50px; margin-top: 5px; }
  .login-error { margin-bottom: 20px; padding: 12px 14px; border: 1px solid #e7bdb8; border-left: 4px solid var(--danger); border-radius: 8px; color: #883934; background: #fff2ef; }
  .login-help { margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

  @media (max-width: 1250px) {
    .app { grid-template-columns: 232px minmax(0, 1fr); }
    .sidebar { padding-inline: 12px; }
    .topbar { align-items: flex-start; flex-direction: column; padding-inline: 24px; }
    .topbar::after { right: 24px; left: 24px; }
    .top-actions { justify-content: flex-start; }
    .content { padding: 28px 24px 46px; }
  }
  @media (min-width: 761px) and (max-height: 900px) {
    .sidebar { padding: 18px 12px 14px; gap: 14px; }
    .logo { gap: 10px; padding: 0 8px 12px; }
    .logo-badge { width: 40px; height: 43px; font-size: 22px; }
    .logo strong { font-size: 18px; }
    .logo span { font-size: 12px; }
    .nav { gap: 3px; }
    .nav a { min-height: 42px; padding: 8px 10px; gap: 10px; font-size: 13px; }
    .nav .ico { flex-basis: 20px; }
    .nav .ico svg { width: 20px; height: 20px; }
    .side-profile { margin-top: 10px; padding: 12px 6px 0; }
    .profile-avatar { width: 34px; height: 34px; }
    .side-profile small { font-size: 11px; }
    .side-profile strong { font-size: 13px; }
  }
  @media (min-width: 761px) and (max-height: 700px) {
    .sidebar { padding-block: 10px; gap: 8px; }
    .logo { padding-bottom: 8px; }
    .logo-badge { width: 36px; height: 39px; font-size: 20px; }
    .logo strong { font-size: 17px; }
    .logo span { font-size: 11px; }
    .nav { gap: 2px; }
    .nav a { min-height: 36px; padding-block: 5px; font-size: 12px; }
    .nav .ico svg { width: 18px; height: 18px; }
    .side-profile { margin-top: 4px; padding-top: 8px; }
    .profile-avatar { width: 30px; height: 30px; }
  }
  @media (max-width: 900px) {
    .login-shell { grid-template-columns: minmax(270px, .85fr) minmax(330px, 1.15fr); }
    .login-brand-panel { padding: 34px 30px; }
    .login-form-panel { padding: 38px; }
  }
  @media (max-width: 760px) {
    body { background-size: 100% 28px; }
    .topbar { align-items: flex-start; flex-direction: column; padding: 14px 16px 16px; }
    .topbar::after { right: 16px; left: 16px; }
    .topbar-copy small { display: none; }
    .top-actions { width: 100%; justify-content: flex-start; }
    .top-actions form { order: 4; margin-left: auto; }
    .top-actions .badge { order: 5; min-height: 0; width: 100%; padding: 3px 0 0; border: 0; background: transparent; }
    .top-actions .badge.offline { background: transparent; }
    .top-actions .top-export { display: none; }
    .top-actions .btn { min-height: 42px; }
    .content { padding: 24px 16px 112px; }
    .page-head { align-items: stretch; padding-bottom: 16px; }
    .page-head h2 { font-size: 25px; }
    .page-head .controls { width: 100%; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi { min-height: 136px; padding: 18px 15px; }
    .section, .form-card { padding: 20px; }
    .form-section { padding: 22px 0; }
    .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    .mobile-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 254, 249, .98); }
    .mobile-nav::-webkit-scrollbar { display: none; }
    .mobile-nav > a, .mobile-more > summary { min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 4px; border-radius: 8px; color: var(--muted); font-size: 10px; text-align: center; cursor: pointer; list-style: none; }
    .mobile-more > summary::-webkit-details-marker { display: none; }
    .mobile-more { position: relative; min-width: 0; }
    .mobile-more > summary b { display: block; width: 21px; height: 21px; margin: 0; }
    .mobile-more > summary b svg { width: 21px; height: 21px; }
    .mobile-more > summary.active { color: var(--brand-deep); background: var(--brand-soft); }
    .mobile-more[open] > summary { color: var(--brand-deep); background: var(--amber-soft); }
    .mobile-more-menu { position: absolute; right: 0; bottom: calc(100% + 13px); width: min(290px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 48px rgba(25, 46, 34, .2); }
    .mobile-more-menu::after { content: ""; position: absolute; right: 26px; bottom: -7px; width: 13px; height: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); transform: rotate(45deg); }
    .mobile-more-menu a { position: relative; z-index: 1; min-height: 48px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; color: var(--ink); font-size: 13px; text-align: left; }
    .mobile-more-menu a .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--brand); background: var(--brand-soft); }
    .mobile-more-menu a .ico svg { width: 19px; height: 19px; }
    .mobile-more-menu a.active { color: var(--brand-deep); background: var(--amber-soft); font-weight: 700; }
    .mobile-nav a b { margin: 0; line-height: 1; }
    .mobile-nav a.active { color: var(--brand-deep); background: var(--brand-soft); }
    .mobile-nav > a.active::after { content: ""; width: 18px; height: 3px; border-radius: 4px; background: var(--amber); }
    input, select, textarea { font-size: 16px; }
    .table th { position: static; }
    .login-shell { grid-template-columns: 1fr; min-height: 0; }
    .login-brand-panel { display: none; }
    .login-form-panel { padding: 34px 28px; }
    .login-mobile-mark { display: grid; place-items: center; width: 46px; height: 50px; margin-bottom: 22px; border-radius: 50% 50% 12px 12px; color: var(--brand-deep); background: var(--amber); font-size: 22px; font-weight: 700; }
  }
  @media (max-width: 480px) {
    .hop-login { padding: 18px; }
    .login-form-panel { padding: 30px 22px; }
    .login-form-heading h2 { font-size: 27px; }
    .top-actions .btn { padding-inline: 10px; font-size: 12px; }
    .top-actions form { margin-left: 0; }
    .top-actions form .btn { width: 42px; overflow: hidden; color: transparent; gap: 0; }
    .top-actions form .button-icon { color: var(--ink); }
    .kpis { grid-template-columns: 1fr; }
    .kpi { min-height: 125px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}

@media print { .button-icon { display: none !important; } }

/* Inventory entry table: compact enough for daily use without affecting report tables. */
@media screen {
  #page-inventory .inventory-table-wrap {
    max-height: none;
    overflow: hidden;
  }
  #page-inventory .inventory-table {
    min-width: 0;
    table-layout: fixed;
  }
  #page-inventory .inventory-table th,
  #page-inventory .inventory-table td {
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.35;
  }
  #page-inventory .inventory-table th:nth-child(1) { width: 40%; }
  #page-inventory .inventory-table th:nth-child(2),
  #page-inventory .inventory-table th:nth-child(3) { width: 15%; }
  #page-inventory .inventory-table th:nth-child(4) { width: 30%; }
  #page-inventory .inventory-table input {
    width: 100%;
    max-width: 72px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13px;
    box-sizing: border-box;
  }
  #page-inventory .inventory-table .inventory-unit-input {
    width: 100%;
    max-width: 150px;
    text-align: left;
  }
  #page-inventory .inventory-table .ingredient-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 760px) {
    #page-inventory .inventory-table th,
    #page-inventory .inventory-table td {
      padding: 6px 4px;
      font-size: 11.5px;
    }
    #page-inventory .inventory-table th {
      white-space: normal;
      line-height: 1.25;
    }
    #page-inventory .inventory-table th:nth-child(1) { width: 38%; }
    #page-inventory .inventory-table th:nth-child(2),
    #page-inventory .inventory-table th:nth-child(3) { width: 16%; }
    #page-inventory .inventory-table th:nth-child(4) { width: 30%; }
    #page-inventory .inventory-table input {
      max-width: none;
      min-height: 32px;
      padding: 5px 4px;
      font-size: 12px;
    }
  }
}