/* =============================================================================
   Cohin Inventory System — Terminal View
   Alternate UI (dark "industrial terminal" look) designed in Claude Design.
   Scoped entirely under #terminalView so it never leaks into the classic UI;
   it reads/writes the same real state (js/modules/state.js etc.) as the
   classic table, it just presents it differently.
   ============================================================================= */

#terminalView {
  --t-bg: #0B0E13;
  --t-bg-deep: #07090d;
  --t-panel: #0D1117;
  --t-card: #12161D;
  --t-table: #0F131A;
  --t-border: #232A35;
  --t-border-soft: #1E242E;
  --t-row-border: #171C24;
  --t-ink: #E6E9EE;
  --t-ink-soft: #A6AFBB;
  --t-ink-faint: #8A94A1;
  --t-ink-dim: #69737F;
  --t-ink-dimmer: #5A6572;
  --t-accent: #38BDF8;
  --t-amber: #E8C547;
  --t-green: #4ADE80;
  --t-red: #F87171;
  --t-pink: #E489B0;
  --t-star: #F59E0B;
  --t-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --t-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --t-display: 'Sora', 'Segoe UI', sans-serif;

  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  flex-direction: column;
  height: 100vh;
  min-height: 620px;
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--t-sans);
  font-size: 16px;
  overflow: hidden;
}

body.terminal-active #terminalView { display: flex; }
body.terminal-active .container,
body.terminal-active #bg-particles { display: none !important; }

#terminalView * { box-sizing: border-box; }
#terminalView a { color: var(--t-accent); text-decoration: none; }
#terminalView a:hover { color: #7dd3fc; }
#terminalView input, #terminalView select, #terminalView button, #terminalView textarea { font-family: inherit; }
#terminalView ::placeholder { color: var(--t-ink-dimmer); }
#terminalView button { font-family: var(--t-sans); }
#terminalView .t-mono { font-family: var(--t-mono); }
#terminalView h2, #terminalView .t-brand-name { font-family: var(--t-display); }

@keyframes t-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Lock screen --- */
#terminalView .t-lock {
  position: absolute; inset: 0; z-index: 60; background: var(--t-bg-deep);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
#terminalView .t-lock-card {
  width: 100%; max-width: 350px; background: var(--t-card); border: 1px solid var(--t-border);
  border-radius: 12px; padding: 26px 24px; box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
#terminalView .t-brand { display: flex; align-items: center; gap: 9px; }
#terminalView .t-brand-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--t-accent); box-shadow: 0 0 10px var(--t-accent); }
#terminalView .t-brand-name { font-weight: 700; letter-spacing: .14em; font-size: 18px; }
#terminalView .t-brand-sub { font-family: var(--t-mono); font-size: 12.5px; letter-spacing: .16em; color: var(--t-ink-dim); margin-top: 6px; }
#terminalView .t-lock-card h2 { margin: 18px 0 5px; font-size: 20px; font-weight: 600; }
#terminalView .t-lock-card p { margin: 0 0 15px; font-size: 18px; color: var(--t-ink-faint); line-height: 1.5; }
#terminalView .t-input {
  width: 100%; background: var(--t-bg); border: 1px solid #2B3441; border-radius: 7px;
  padding: 10px 12px; color: var(--t-ink); font-family: var(--t-mono); font-size: 20px; outline: 0;
}
#terminalView .t-lock-input { letter-spacing: .2em; }
#terminalView .t-btn-primary {
  width: 100%; margin-top: 12px; background: var(--t-accent); color: #04202e; border: 0;
  border-radius: 7px; padding: 10px; font-size: 16px; font-weight: 700; cursor: pointer;
}
#terminalView .t-lock-error { margin-top: 10px; font-family: var(--t-mono); font-size: 20px; color: var(--t-red); min-height: 1em; }
#terminalView .t-dev-line { margin-top: 14px; font-family: var(--t-mono); font-size: 12.5px; color: var(--t-ink-dimmer); text-align: center; }

/* --- Shell layout --- */
#terminalView .t-body { display: flex; flex: 1; min-height: 0; }
#terminalView .t-sidebar { width: 196px; flex: none; display: flex; flex-direction: column; background: var(--t-bg-deep); border-right: 1px solid var(--t-border-soft); }
#terminalView .t-sidebar-head { padding: 16px 15px 13px; border-bottom: 1px solid var(--t-border-soft); }
#terminalView .t-sidebar-sub { font-family: var(--t-mono); font-size: 12px; letter-spacing: .16em; color: var(--t-ink-dim); margin-top: 5px; }
#terminalView .t-nav { display: flex; flex-direction: column; gap: 2px; padding: 9px 7px; flex: 1; overflow: auto; }
#terminalView .t-nav-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px;
  border-radius: 5px; border: 0; border-left: 2px solid transparent; background: transparent; color: var(--t-ink-soft);
  font-size: 15.5px; font-weight: 400; cursor: pointer; text-align: left; width: 100%;
}
#terminalView .t-nav-btn .t-nav-count { font-family: var(--t-mono); font-size: 16px; color: var(--t-ink-dim); }
#terminalView .t-nav-btn.is-active { background: rgba(56,189,248,.09); color: var(--t-ink); border-left-color: var(--t-accent); font-weight: 600; }
#terminalView .t-sidebar-foot { padding: 11px 15px; border-top: 1px solid var(--t-border-soft); font-family: var(--t-mono); font-size: 12px; line-height: 1.7; color: var(--t-ink-dimmer); }

#terminalView .t-main { flex: 1; display: flex; min-width: 0; }
#terminalView .t-main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#terminalView .t-toolbar {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-bottom: 1px solid var(--t-border-soft);
  background: var(--t-panel); flex-wrap: wrap;
}
#terminalView .t-search {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 180px; max-width: 320px;
  background: var(--t-card); border: 1px solid var(--t-border); border-radius: 6px; padding: 5px 9px;
}
#terminalView .t-search-icon { font-family: var(--t-mono); font-size: 20px; color: var(--t-ink-dimmer); }
#terminalView .t-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--t-ink); font-family: var(--t-mono); font-size: 18px; }
#terminalView .t-select {
  background: var(--t-card); border: 1px solid var(--t-border); border-radius: 6px; padding: 5px 8px;
  color: var(--t-ink); font-family: var(--t-mono); font-size: 20px; max-width: 170px;
}
#terminalView .t-toggle-btn { background: var(--t-card); border: 1px solid var(--t-border); border-radius: 6px; padding: 5px 9px; color: var(--t-ink-soft); font-family: var(--t-mono); font-size: 20px; cursor: pointer; }
#terminalView .t-toggle-btn.is-on { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: var(--t-star); }
#terminalView .t-spacer { flex: 1; }
#terminalView .t-shift-btn { background: rgba(56,189,248,.1); border: 1px solid rgba(56,189,248,.3); border-radius: 6px; padding: 5px 10px; color: var(--t-accent); font-family: var(--t-mono); font-size: 20px; cursor: pointer; }
#terminalView .t-toolbar-user { display: flex; align-items: center; gap: 7px; padding-left: 9px; border-left: 1px solid var(--t-border-soft); }
#terminalView .t-avatar { width: 25px; height: 25px; border-radius: 5px; background: #232A35; display: flex; align-items: center; justify-content: center; font-family: var(--t-mono); font-size: 13.5px; color: var(--t-ink-soft); }
#terminalView .t-lock-btn { background: transparent; border: 1px solid var(--t-border); border-radius: 5px; padding: 4px 7px; color: var(--t-ink-faint); font-size: 20px; cursor: pointer; }
#terminalView .t-back-btn { background: transparent; border: 1px solid var(--t-border); border-radius: 5px; padding: 4px 9px; color: var(--t-ink-faint); font-size: 20px; cursor: pointer; }

#terminalView .t-screen { flex: 1; overflow: auto; padding: 16px; min-height: 0; }
#terminalView .t-screen h2 { margin: 0 0 3px; font-size: 18px; font-weight: 600; }
#terminalView .t-screen-sub { margin: 0 0 14px; font-size: 18px; color: var(--t-ink-faint); }

/* --- Inventory screen --- */
#terminalView .t-inv-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#terminalView .t-stats { padding: 14px 16px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 9px; }
#terminalView .t-stat-card { background: var(--t-card); border: 1px solid var(--t-border); border-radius: 7px; padding: 10px 12px; }
#terminalView .t-stat-label { font-family: var(--t-mono); font-size: 12px; letter-spacing: .12em; color: var(--t-ink-dim); }
#terminalView .t-stat-row { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
#terminalView .t-stat-value { font-family: var(--t-mono); font-size: 27px; font-weight: 700; }
#terminalView .t-stat-note { font-family: var(--t-mono); font-size: 12.5px; color: var(--t-ink-dim); }

#terminalView .t-inv-heading { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 14px 16px 9px; }
#terminalView .t-shown-label { font-family: var(--t-mono); font-size: 16px; color: var(--t-ink-dim); }
#terminalView .t-legend { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
#terminalView .t-legend-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--t-mono); font-size: 12px; letter-spacing: .07em; color: var(--t-ink-faint); }
#terminalView .t-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
#terminalView .t-btn-accent { background: var(--t-accent); color: #04202e; border: 0; border-radius: 6px; padding: 6px 11px; font-size: 18px; font-weight: 600; cursor: pointer; }
#terminalView .t-btn-ghost { background: var(--t-card); color: var(--t-ink); border: 1px solid #323B49; border-radius: 6px; padding: 6px 11px; font-size: 18px; font-weight: 600; cursor: pointer; }

#terminalView .t-table-wrap { flex: 1; min-height: 0; margin: 0 16px 16px; border: 1px solid var(--t-border); border-radius: 8px; background: var(--t-table); display: flex; flex-direction: column; overflow: hidden; }
#terminalView .t-thead { display: grid; grid-template-columns: 20px minmax(96px,1.1fr) minmax(0,2fr) 78px 62px; align-items: center; padding: 7px 12px; background: var(--t-card); border-bottom: 1px solid var(--t-border); font-family: var(--t-mono); font-size: 12px; letter-spacing: .11em; color: var(--t-ink-dim); }
#terminalView .t-thead > span:nth-child(4), #terminalView .t-thead > span:nth-child(5) { text-align: right; }
#terminalView .t-tbody { flex: 1; overflow: auto; }
#terminalView .t-row { display: grid; grid-template-columns: 20px minmax(96px,1.1fr) minmax(0,2fr) 78px 62px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--t-row-border); position: relative; cursor: pointer; }
#terminalView .t-row.is-selected { background: rgba(56,189,248,.07); }
#terminalView .t-row-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
#terminalView .t-row-star { font-family: var(--t-mono); font-size: 16px; color: var(--t-star); }
#terminalView .t-row-code { font-family: var(--t-mono); font-size: 18px; font-weight: 500; padding: 8px 8px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#terminalView .t-row-pills { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; padding: 6px 8px 6px 0; align-items: center; }
#terminalView .t-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--t-mono); font-size: 16px; border-radius: 4px; padding: 2px 6px 2px 5px; white-space: nowrap; border: 1px solid transparent; }
#terminalView .t-pill-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
#terminalView .t-pill-loc { font-size: 11px; color: var(--t-ink-faint); margin-left: 1px; vertical-align: super; }
#terminalView .t-row-more { font-family: var(--t-mono); font-size: 16px; color: var(--t-ink-dimmer); }
#terminalView .t-row-total { font-family: var(--t-mono); font-size: 18px; font-weight: 700; text-align: right; }
#terminalView .t-row-moved { font-family: var(--t-mono); font-size: 12.5px; color: var(--t-ink-dim); text-align: right; }
#terminalView .t-table-more { padding: 12px; text-align: center; }
#terminalView .t-table-empty { padding: 40px 20px; text-align: center; color: var(--t-ink-dim); }
#terminalView .t-table-empty-title { font-family: var(--t-mono); font-size: 20px; letter-spacing: .1em; }
#terminalView .t-table-empty-sub { font-size: 18px; margin-top: 6px; }

/* --- Drawer --- */
#terminalView .t-drawer { width: 338px; flex: none; background: var(--t-panel); border-left: 1px solid var(--t-border); display: flex; flex-direction: column; min-height: 0; }
#terminalView .t-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--t-border-soft); }
#terminalView .t-drawer-code { font-family: var(--t-mono); font-size: 16px; font-weight: 700; word-break: break-all; }
#terminalView .t-drawer-sub { font-size: 20px; color: var(--t-ink-faint); margin-top: 3px; }
#terminalView .t-drawer-close { background: transparent; border: 0; color: var(--t-ink-dim); font-size: 20px; cursor: pointer; }
#terminalView .t-drawer-body { flex: 1; overflow: auto; }
#terminalView .t-drawer-section { padding: 13px 15px; border-bottom: 1px solid var(--t-border-soft); }
#terminalView .t-drawer-section:last-child { border-bottom: 0; }
#terminalView .t-drawer-label { font-family: var(--t-mono); font-size: 12px; letter-spacing: .12em; color: var(--t-ink-dim); margin-bottom: 8px; }
#terminalView .t-total-row { display: flex; align-items: baseline; justify-content: space-between; }
#terminalView .t-total-value { font-family: var(--t-mono); font-size: 27px; font-weight: 700; color: var(--t-accent); }
#terminalView .t-sub-row { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--t-mono); font-size: 16px; color: var(--t-ink-dim); }
#terminalView .t-pallet-label { margin-top: 10px; font-family: var(--t-mono); font-size: 12.5px; color: var(--t-ink-faint); }
#terminalView .t-entry-list { display: flex; flex-direction: column; gap: 6px; }
#terminalView .t-entry { display: flex; align-items: center; justify-content: space-between; gap: 9px; border-radius: 6px; padding: 7px 9px; border: 1px solid transparent; }
#terminalView .t-entry-value { font-family: var(--t-mono); font-size: 14.5px; }
#terminalView .t-entry-remark { font-size: 13.5px; color: var(--t-ink-faint); margin-top: 2px; word-break: break-word; }
#terminalView .t-entry-qty { font-family: var(--t-mono); font-size: 20px; font-weight: 700; text-align: right; }
#terminalView .t-entry-loc { font-family: var(--t-mono); font-size: 12px; color: var(--t-ink-faint); margin-top: 2px; text-align: right; }
#terminalView .t-empty-note { font-family: var(--t-mono); font-size: 13.5px; color: var(--t-ink-dimmer); padding: 6px 0; }
#terminalView .t-log-item { }
#terminalView .t-log-what { font-size: 14.5px; color: #D4D9E0; line-height: 1.4; }
#terminalView .t-log-when { font-family: var(--t-mono); font-size: 12px; color: var(--t-ink-dim); margin-top: 2px; }
#terminalView .t-drawer-actions { display: flex; gap: 6px; padding: 11px 15px; border-top: 1px solid var(--t-border-soft); }
#terminalView .t-drawer-actions .t-btn-accent, #terminalView .t-drawer-actions .t-btn-ghost { flex: 1; padding: 8px; }

/* --- Searchable code combobox (replaces native <datalist>, which drops its
   own popup on re-render and behaves inconsistently across browsers — same
   reason the classic UI has its own custom combobox instead of a datalist) */
#terminalView .t-combo-wrap { position: relative; }
#terminalView .t-combo-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--t-card); border: 1px solid var(--t-border); border-radius: 6px; max-height: 220px; overflow-y: auto; z-index: 60; box-shadow: 0 12px 28px rgba(0,0,0,.45); }
#terminalView .t-combo-option { padding: 8px 10px; font-family: var(--t-mono); font-size: 13.5px; color: var(--t-ink); cursor: pointer; }
#terminalView .t-combo-option.is-highlighted, #terminalView .t-combo-option:hover { background: rgba(56,189,248,.14); }

/* --- Movement date-range panel (mirrors the classic "Mark items with
   movement" options: enable, From/To date+time, mark-vs-filter mode) --- */
#terminalView .t-move-panel { width: 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 10px 16px; background: var(--t-panel); border-bottom: 1px solid var(--t-border-soft); }
#terminalView .t-move-panel .t-field input, #terminalView .t-move-panel .t-field select { background: var(--t-card); border: 1px solid #2B3441; border-radius: 6px; padding: 6px 8px; color: var(--t-ink); font-family: var(--t-mono); font-size: 13px; outline: 0; }

/* --- Forms (deliveries / withdrawals) --- */
#terminalView .t-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 10px; background: var(--t-card); border: 1px solid var(--t-border); border-radius: 8px; padding: 14px; }
#terminalView .t-field { display: flex; flex-direction: column; gap: 5px; }
#terminalView .t-field-label { font-family: var(--t-mono); font-size: 12px; letter-spacing: .1em; color: var(--t-ink-dim); }
#terminalView .t-field input { background: var(--t-bg); border: 1px solid #2B3441; border-radius: 6px; padding: 7px 9px; color: var(--t-ink); font-family: var(--t-mono); font-size: 18px; outline: 0; width: 100%; }
#terminalView .t-field-btn-wrap { display: flex; align-items: flex-end; }
#terminalView .t-field-btn-wrap button { width: 100%; }
#terminalView .t-list-wrap { margin-top: 14px; border: 1px solid var(--t-border); border-radius: 8px; overflow: hidden; }
#terminalView .t-list-head { display: grid; padding: 7px 12px; background: var(--t-card); font-family: var(--t-mono); font-size: 12px; letter-spacing: .1em; color: var(--t-ink-dim); }
#terminalView .t-list-row { display: grid; align-items: center; padding: 7px 12px; border-top: 1px solid var(--t-row-border); font-family: var(--t-mono); font-size: 20px; }
#terminalView .t-list-empty { padding: 22px; text-align: center; font-family: var(--t-mono); font-size: 13.5px; color: var(--t-ink-dimmer); }
#terminalView .t-list-remove { background: transparent; border: 0; color: var(--t-ink-dim); cursor: pointer; font-size: 16px; }
#terminalView .t-confirm-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
#terminalView .t-btn-warn { background: var(--t-amber); color: #241d01; border: 0; border-radius: 7px; padding: 9px 16px; font-size: 15.5px; font-weight: 700; cursor: pointer; }
#terminalView .t-btn-accent-lg { background: var(--t-accent); color: #04202e; border: 0; border-radius: 7px; padding: 9px 16px; font-size: 15.5px; font-weight: 700; cursor: pointer; }
#terminalView .t-btn-accent-lg:disabled, #terminalView .t-btn-warn:disabled { opacity: .5; cursor: default; }
#terminalView .t-confirm-note { font-family: var(--t-mono); font-size: 13.5px; color: var(--t-ink-dim); }
#terminalView .t-form-error { font-family: var(--t-mono); font-size: 13.5px; color: var(--t-red); margin-top: 8px; }

/* --- Variance --- */
#terminalView .t-var-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 9px; margin-bottom: 13px; }
#terminalView .t-table-generic { border: 1px solid var(--t-border); border-radius: 8px; overflow: hidden; }
#terminalView .t-tg-head { display: grid; padding: 7px 12px; background: var(--t-card); font-family: var(--t-mono); font-size: 12px; letter-spacing: .1em; color: var(--t-ink-dim); }
#terminalView .t-tg-row { display: grid; align-items: center; padding: 7px 12px; border-top: 1px solid var(--t-row-border); font-family: var(--t-mono); font-size: 20px; }

/* --- History --- */
#terminalView .t-hist-filters { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
#terminalView .t-hist-filters input[type=date], #terminalView .t-hist-filters select { background: var(--t-card); border: 1px solid #2B3441; border-radius: 6px; padding: 6px 9px; color: var(--t-ink); font-family: var(--t-mono); font-size: 14.5px; outline: 0; }
#terminalView .t-hist-reset { background: var(--t-card); border: 1px solid #2B3441; border-radius: 6px; padding: 6px 12px; color: var(--t-ink-soft); font-size: 18px; cursor: pointer; }
#terminalView .t-hist-table-wrap { flex: 1; min-height: 0; border: 1px solid var(--t-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
#terminalView .t-hist-body { flex: 1; overflow: auto; }
#terminalView .t-hist-row { display: grid; grid-template-columns: 150px 118px minmax(140px,1fr) minmax(200px,2.4fr); align-items: start; padding: 7px 12px; border-top: 1px solid var(--t-row-border); font-size: 14.5px; }
#terminalView .t-hist-when { font-family: var(--t-mono); font-size: 16px; color: var(--t-ink-faint); }
#terminalView .t-hist-action { font-family: var(--t-mono); font-size: 12.5px; letter-spacing: .06em; }
#terminalView .t-hist-code { font-family: var(--t-mono); font-size: 20px; }
#terminalView .t-hist-details { color: var(--t-ink-soft); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: block; max-height: 36px; }

/* --- Reports --- */
#terminalView .t-report-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
#terminalView .t-btn-green { background: var(--t-green); color: #06210F; border: 0; border-radius: 7px; padding: 9px 15px; font-size: 15.5px; font-weight: 700; cursor: pointer; }
#terminalView .t-btn-outline { background: var(--t-card); color: var(--t-ink); border: 1px solid #323B49; border-radius: 7px; padding: 9px 15px; font-size: 15.5px; font-weight: 600; cursor: pointer; }
#terminalView .t-btn-outline-soft { background: var(--t-card); color: var(--t-ink-soft); border: 1px solid var(--t-border); border-radius: 7px; padding: 9px 15px; font-size: 15.5px; cursor: pointer; }

/* --- Settings --- */
#terminalView .t-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--t-card); border: 1px solid var(--t-border); border-radius: 8px; margin-bottom: 9px; }
#terminalView .t-settings-title { font-size: 15.5px; font-weight: 600; }
#terminalView .t-settings-note { font-size: 14.5px; color: var(--t-ink-faint); margin-top: 2px; }
#terminalView .t-settings-cta { flex: none; border-radius: 6px; padding: 7px 13px; font-size: 18px; font-weight: 600; cursor: pointer; border: 1px solid #323B49; background: var(--t-card); color: var(--t-ink); }
#terminalView .t-settings-cta.is-danger { background: rgba(248,113,113,.12); color: var(--t-red); border-color: rgba(248,113,113,.35); }
#terminalView .t-settings-foot { margin-top: 16px; font-family: var(--t-mono); font-size: 12.5px; color: var(--t-ink-dimmer); line-height: 1.8; }

/* --- Edit modal --- */
#terminalView .t-modal-backdrop { position: absolute; inset: 0; z-index: 50; background: rgba(4,6,10,.7); display: flex; align-items: center; justify-content: center; padding: 22px; }
#terminalView .t-modal-card { width: 100%; max-width: 560px; max-height: 86vh; overflow: auto; background: var(--t-card); border: 1px solid #2B3441; border-radius: 11px; padding: 20px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
#terminalView .t-modal-card h2 { margin: 0 0 3px; font-size: 18px; font-weight: 600; }
#terminalView .t-modal-code { font-family: var(--t-mono); font-size: 14.5px; color: var(--t-accent); margin-bottom: 14px; }
#terminalView .t-modal-preview { margin-top: 9px; font-family: var(--t-mono); font-size: 13.5px; color: var(--t-ink-faint); }
#terminalView .t-modal-preview strong { color: var(--t-ink); font-weight: 700; }
#terminalView .t-modal-entries { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
#terminalView .t-modal-entry-row { display: grid; grid-template-columns: 86px minmax(120px,1fr) 74px; gap: 8px; align-items: center; }
#terminalView .t-modal-entry-val { font-family: var(--t-mono); font-size: 20px; color: var(--t-ink-soft); }
#terminalView .t-modal-entry-row input { background: var(--t-bg); border: 1px solid #2B3441; border-radius: 6px; padding: 6px 8px; font-family: var(--t-mono); font-size: 20px; outline: 0; min-width: 0; }
#terminalView .t-modal-actions { display: flex; gap: 7px; margin-top: 18px; justify-content: flex-end; }
#terminalView .t-btn-cancel { background: var(--t-card); color: var(--t-ink-soft); border: 1px solid #2B3441; border-radius: 6px; padding: 8px 14px; font-size: 18px; cursor: pointer; }
#terminalView .t-btn-save { background: var(--t-accent); color: #04202e; border: 0; border-radius: 6px; padding: 8px 16px; font-size: 18px; font-weight: 700; cursor: pointer; }

/* Toasts reuse the classic app's real #toastStack (js/modules/ui.js showToast)
   rather than a separate implementation — it already renders above this view. */

/* --- Misc --- */
#terminalView .t-highlight { background: rgba(56,189,248,.25); color: inherit; border-radius: 2px; }
#terminalView ::-webkit-scrollbar { width: 9px; height: 9px; }
#terminalView ::-webkit-scrollbar-thumb { background: #2b3441; border-radius: 5px; }
#terminalView ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 860px) {
  #terminalView .t-sidebar { display: none; }
  #terminalView .t-drawer { position: absolute; right: 0; top: 0; bottom: 0; z-index: 40; box-shadow: -20px 0 40px rgba(0,0,0,.4); }
}