@import url("halldin-tokens.css");

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
a { color: inherit; }
input, textarea, select {
  font-family: inherit; background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 8px 10px;
  width: 100%; margin-bottom: 10px; font-size: 14px;
}
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 10px 0 4px; }
button { font-family: inherit; cursor: pointer; }

/* -- Login (mirrors diamond/silver) -- */
#login-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
#login-form { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 40px 36px; width: 100%; max-width: 360px; text-align: center; }
#login-form h1 { font-family: var(--font-display); font-weight: 400; }
#login-form button { width: 100%; padding: 12px; border-radius: var(--radius); border: none; background: var(--gold); color: var(--ground); font-weight: 600; }
.error { color: var(--critical); font-size: 13px; }

/* -- App shell -- */
#app-view { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--surface-line); padding: 24px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; text-decoration: none; cursor: pointer; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.brand-word { font-family: var(--font-display); font-size: 16px; }
.brand-word small { display: block; color: var(--ink-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.tabs { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tab-btn { text-align: left; background: none; border: none; color: var(--ink-dim); padding: 10px 12px; border-radius: var(--radius); font-size: 14px; }
.tab-btn.active { background: var(--surface-raised); color: var(--gold-bright); }
.sidebar-foot { display: flex; flex-direction: column; gap: 8px; }
.lang-toggle { display: flex; gap: 4px; margin-bottom: 6px; }
.lang-btn { flex: 1; background: transparent; border: 1px solid var(--surface-line); color: var(--ink-dim); border-radius: var(--radius); padding: 6px; font-size: 12px; }
.lang-btn.active { background: var(--gold); color: var(--ground); border-color: var(--gold); }
.lang-toggle-corner { position: fixed; top: 20px; right: 20px; margin-bottom: 0; z-index: 10; }
.switch-section-link, #logout-btn { color: var(--ink-dim); text-decoration: none; background: transparent; border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 8px; text-align: center; font-size: 13px; }

main { padding: 28px 32px; overflow-x: hidden; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.panel-header { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.panel-header input, .panel-header select { width: auto; min-width: 180px; margin-bottom: 0; }
.primary-btn { background: var(--gold); color: var(--ground); border: none; border-radius: var(--radius); padding: 10px 16px; font-weight: 600; font-size: 13px; }
.secondary-btn { background: transparent; border: 1px solid var(--surface-line); color: var(--ink-dim); border-radius: var(--radius); padding: 10px 16px; font-size: 13px; }
.mini-btn { background: var(--surface-raised); border: 1px solid var(--surface-line); color: var(--ink); border-radius: var(--radius); padding: 4px 10px; font-size: 12px; }
.check-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.check-toggle input { width: auto; margin: 0; }

/* -- Tables (shared with diamond/silver's mobile card-view trick) -- */
.table-wrap { overflow-x: auto; border: 1px solid var(--surface-line); border-radius: var(--radius); }
.lot-table { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--surface); }
.lot-table th, .lot-table td { padding: .5rem .7rem; border-top: 1px solid var(--surface-line); text-align: left; white-space: nowrap; }
.lot-table thead th { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-muted); background: var(--surface-raised); border-bottom: 1.5px solid var(--gold); border-top: none; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: rgba(198, 161, 91, .045); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot-warn { background: var(--critical); }

/* -- Badges / metrics -- */
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius); font-size: 12px; background: var(--neutral-bg); }
.badge-call { background: var(--critical-bg); color: var(--critical); font-weight: 600; }
.badge-ok { background: var(--positive-bg); color: var(--positive); }
.summary-bar, .metrics-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.metric { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 12px 18px; min-width: 140px; }
.metric-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: 4px; }
.metric-value { font-size: 18px; font-weight: 600; color: var(--gold-bright); }
.muted { color: var(--ink-muted); }

/* -- Jobs kanban -- */
.status-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.status-column h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 0 0 10px; }
.job-cards { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }
.job-card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.job-card:hover { border-color: var(--gold); }
.job-card-alert { border-color: var(--critical); }
.job-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.job-card-value { margin-top: 6px; font-weight: 600; color: var(--gold-bright); }

/* -- Modals -- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal-card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 28px; width: 100%; max-width: 480px; position: relative; }
.modal-wide { max-width: 700px; }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--ink-muted); font-size: 22px; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.job-type-toggle { display: flex; gap: 8px; margin-bottom: 6px; }
.job-type-btn { flex: 1; background: var(--surface-raised); border: 1px solid var(--surface-line); color: var(--ink-dim); border-radius: var(--radius); padding: 10px; font-size: 13px; }
.job-type-btn.active { background: var(--gold); color: var(--ground); border-color: var(--gold); font-weight: 600; }

.client-picker { position: relative; }
.typeahead-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface-raised); border: 1px solid var(--surface-line); border-radius: var(--radius); max-height: 200px; overflow-y: auto; z-index: 5; }
.typeahead-item { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.typeahead-item:hover { background: var(--surface-line); }
.selected-client { padding: 8px 10px; background: var(--positive-bg); color: var(--positive); border-radius: var(--radius); margin-bottom: 10px; }
details summary { cursor: pointer; font-size: 12px; color: var(--ink-muted); margin-bottom: 8px; }

.job-detail-grid, .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; font-size: 14px; }
.job-detail-grid .label, .profile-grid .label { display: block; font-size: 10px; text-transform: uppercase; color: var(--ink-muted); }

.photo-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.photo-gallery img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--surface-line); }

.cert-list { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
.cert-list li { padding: 6px 0; border-bottom: 1px solid var(--surface-line); }

.scan-qr-btn { background: var(--surface-raised); border: 1px solid var(--surface-line); color: var(--gold-bright); border-radius: var(--radius); padding: 10px; font-size: 13px; font-weight: 600; }

.scanner-card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 20px; width: 100%; max-width: 420px; text-align: center; }
#qr-scanner-video { width: 100%; border-radius: var(--radius); background: #000; margin-bottom: 12px; max-height: 60vh; }
#qr-scanner-status { color: var(--ink-dim); font-size: 13px; margin-bottom: 14px; }

.qr-preview-row { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.qr-preview-img { width: 100px; height: 100px; border-radius: var(--radius); border: 1px solid var(--surface-line); background: #fff; padding: 4px; }

.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.inventory-card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 16px; cursor: pointer; position: relative; }
.inventory-card:hover { border-color: var(--gold); }
.inventory-card-sold { opacity: 0.6; }
.inventory-card-status { position: absolute; top: 10px; right: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); background: var(--neutral-bg); padding: 2px 8px; border-radius: var(--radius); }
.inventory-card h3 { margin: 4px 30px 4px 0; font-size: 15px; }
.inventory-card-price { margin-top: 8px; font-weight: 600; color: var(--gold-bright); }

.export-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.danger-btn { border-color: var(--critical); color: var(--critical); }
.danger-btn:hover { background: var(--critical-bg); }

.email-send-group { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.lang-pick { display: flex; gap: 4px; }
.lang-pick button { background: var(--gold); color: var(--ground); border: none; border-radius: var(--radius); padding: 8px 12px; font-size: 12px; font-weight: 600; }
.lang-pick button:hover { background: var(--gold-bright); }

.kind-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.kind-btn { background: var(--surface-raised); border: 1px solid var(--surface-line); color: var(--ink-dim); border-radius: var(--radius); padding: 8px 18px; font-size: 13px; }
.kind-btn.active { background: var(--gold); color: var(--ground); border-color: var(--gold); font-weight: 600; }

/* -- Phones -- */
@media (max-width: 980px) {
  #app-view { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tabs { flex-direction: row; flex-wrap: wrap; }
  .status-columns { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  main { padding: 18px 14px; }
  .table-wrap { overflow-x: visible; border: none; }
  .lot-table, .lot-table tbody, .lot-table tr { display: block; width: 100%; }
  .lot-table thead { display: none; }
  .lot-tbody tr { display: block; margin-bottom: 10px; border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--surface); padding: 4px 12px; }
  .lot-table td { display: block; padding: 7px 0; border-top: none; border-bottom: 1px solid var(--surface-line); white-space: normal; text-align: left; }
  .lot-table td:last-child { border-bottom: none; }
  .lot-table td::before { content: attr(data-label); display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin-bottom: 2px; }
  .lot-table td:not([data-label])::before { content: none; margin-bottom: 0; }
  .modal-card { padding: 20px; }
}