/* ═══════════════════════════════════════════════
   MTBD Platform — Apple/iOS 18 Inspired Design
   ═══════════════════════════════════════════════ */

:root {
  --primary: #099af2;
  --primary-hover: #0785d4;
  --primary-light: #e8f4fd;
  --primary-soft: rgba(9,154,242,.08);
  --success: #34c759;
  --warning: #ff9f0a;
  --danger: #ff3b30;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-elevated: rgba(255,255,255,.72);
  --border: rgba(0,0,0,.08);
  --border-light: rgba(0,0,0,.04);
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #aeaeb2;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nav-h: 48px;
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--primary-light); color: var(--primary); }

/* ── Loading ── */
.app-loading { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.app-loading__spinner, .spinner {
  width:24px; height:24px; border:2.5px solid var(--border); border-top-color:var(--primary);
  border-radius:50%; animation:spin .7s linear infinite;
}
.spinner--sm { width:14px; height:14px; border-width:2px; display:inline-block; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ══════════════════════════
   Layout
   ══════════════════════════ */
.app-layout { display:flex; flex-direction:column; min-height:100vh; }
.app-main { flex:1; padding:20px 32px 40px; width:100%; }

/* ══════════════════════════
   Top Nav — Frosted Glass
   ══════════════════════════ */
.topnav {
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:var(--surface-elevated); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
}
.topnav__inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; gap:24px;
}
.topnav__left { display:flex; align-items:center; gap:28px; }
.topnav__logo {
  display:flex; align-items:center;
  border:none; background:none; cursor:pointer; padding:0;
}
.topnav__logo-img { height:28px; object-fit:contain; }
.topnav__links { display:flex; align-items:center; gap:1px; }
.topnav__link {
  border:none; background:none; cursor:pointer;
  font-family:var(--font); font-size:12.5px; font-weight:500;
  color:var(--text-secondary); padding:6px 12px; border-radius:8px;
  transition:all var(--transition); letter-spacing:-0.1px;
}
.topnav__link:hover { color:var(--text); background:var(--primary-soft); }
.topnav__link--active { color:var(--primary); background:var(--primary-light); font-weight:600; }
.topnav__right { display:flex; align-items:center; gap:14px; }

/* ── Data Status Indicator ── */
.data-status { position:relative; }
.data-status__btn {
  display:flex; align-items:center; gap:6px;
  border:none; background:none; cursor:pointer;
  font-family:var(--font); font-size:11px; font-weight:500;
  color:var(--text-muted); padding:4px 8px; border-radius:8px;
  transition:all var(--transition);
}
.data-status__btn:hover { background:rgba(0,0,0,.04); color:var(--text-secondary); }
.data-status__dot {
  width:7px; height:7px; border-radius:50%;
  animation:pulse-dot 2s ease infinite;
}
.data-status__dot--ok { background:var(--success); }
.data-status__dot--warn { background:var(--warning); }
.data-status__dot--err { background:var(--danger); }
.data-status__dot--pending { background:var(--text-muted); }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.data-status__label { letter-spacing:-.1px; }

.data-status__panel {
  position:absolute; top:calc(100% + 8px); right:0;
  width:320px; background:white; border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  z-index:200; overflow:hidden;
}
.data-status__panel-header {
  padding:12px 14px; border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between;
}
.data-status__panel-header h4 { font-size:13px; font-weight:600; }
.data-status__panel-summary { display:flex; gap:6px; margin-top:3px; }
.data-status__badge {
  font-size:10px; font-weight:600; padding:1px 7px; border-radius:10px;
}
.data-status__badge--ok { background:#e8faf0; color:var(--success); }
.data-status__badge--warn { background:#fff8e1; color:#e67700; }
.data-status__badge--err { background:#fff1f0; color:var(--danger); }
.data-status__panel-meta { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--text-muted); }
.data-status__list { padding:6px 0; max-height:360px; overflow-y:auto; }
.data-status__row {
  display:flex; align-items:center; gap:8px;
  padding:5px 14px; font-size:12px;
}
.data-status__row:hover { background:rgba(0,0,0,.02); }
.data-status__row-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.data-status__row-dot--ok { background:var(--success); }
.data-status__row-dot--warn { background:var(--warning); }
.data-status__row-dot--err { background:var(--danger); }
.data-status__row-dot--pending { background:var(--text-muted); }
.data-status__row-error { font-size:10px; color:var(--danger); font-weight:600; }
.data-status__row-ms--slow { color:var(--warning); font-weight:600; }
.data-status__row-ms--bad { color:var(--danger); font-weight:600; }
.data-status__row-label { flex:1; font-weight:500; }
.data-status__row-count { color:var(--text-muted); font-size:11px; min-width:60px; text-align:right; }
.data-status__row-ms { color:var(--text-muted); font-size:11px; min-width:36px; text-align:right; }
.data-status__backdrop { position:fixed; inset:0; z-index:199; }
.data-status__spin { animation:spin .6s linear infinite; }
.account-wrap { position:relative; }
.topnav__user {
  display:flex; align-items:center; gap:8px;
  border:none; background:none; cursor:pointer; padding:4px 8px;
  border-radius:var(--radius); transition:all var(--transition);
  font-family:var(--font);
}
.topnav__user:hover { background:rgba(0,0,0,.04); }
.topnav__avatar {
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #6dd5fa);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.topnav__avatar--img { object-fit:cover; background:none; width:28px; height:28px; }
.topnav__user-info { display:flex; flex-direction:column; }
.topnav__user-name { font-size:11.5px; font-weight:600; color:var(--text); line-height:1.2; text-align:left; }
.topnav__user-email { font-size:10px; color:var(--text-muted); line-height:1.2; text-align:left; }
.topnav__caret { font-size:11px; color:var(--text-muted); transition:transform var(--transition); }
.topnav__caret--open { transform:rotate(180deg); }

/* ── Account Panel ── */
.account-panel {
  position:absolute; top:calc(100% + 8px); right:0;
  width:280px; background:white; border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  z-index:200; overflow:hidden;
}
.account-panel__header {
  display:flex; align-items:center; gap:12px;
  padding:16px; border-bottom:1px solid var(--border-light);
}
.account-panel__avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #6dd5fa);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; flex-shrink:0;
}
.account-panel__avatar--img { object-fit:cover; background:none; width:40px; height:40px; }
.account-panel__name { font-size:14px; font-weight:600; }
.account-panel__email { font-size:12px; color:var(--text-muted); }
.account-panel__section { padding:10px 16px; border-bottom:1px solid var(--border-light); }
.account-panel__row {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 0; font-size:12.5px;
}
.account-panel__label { color:var(--text-muted); }
.account-panel__value { font-weight:600; }
.account-panel__footer { padding:8px; }
.account-panel__signout {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:none; background:none; cursor:pointer;
  font-family:var(--font); font-size:12.5px; font-weight:500;
  color:var(--danger); border-radius:var(--radius);
  transition:background var(--transition);
}
.account-panel__signout:hover { background:rgba(255,59,48,.06); }
.account-panel__actions { padding:4px 8px; border-bottom:1px solid var(--border-light); }
.account-panel__action {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 10px; border:none; background:none; cursor:pointer;
  font-family:var(--font); font-size:12.5px; font-weight:500;
  color:var(--text-secondary); border-radius:var(--radius);
  transition:background var(--transition);
}
.account-panel__action:hover { background:rgba(0,0,0,.04); color:var(--text); }
.account-panel__view-select {
  font-family:var(--font); font-size:12px; font-weight:600;
  padding:3px 8px; border:1px solid var(--border); border-radius:6px;
  background:white; color:var(--primary); cursor:pointer;
  outline:none; transition:border-color var(--transition);
}
.account-panel__view-select:focus { border-color:var(--primary); }
.account-backdrop { position:fixed; inset:0; z-index:199; }

/* ── Account Settings Modal ── */
.settings-section { display:flex; flex-direction:column; gap:4px; }
.settings-photo { display:flex; align-items:center; gap:14px; }
.settings-photo__avatar {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary), #6dd5fa);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; flex-shrink:0;
}
.settings-photo__avatar--img { object-fit:cover; background:none; width:52px; height:52px; }
.settings-photo__btn { cursor:pointer; }
.btn--disabled { opacity:.4; pointer-events:none; }
.settings-msg {
  font-size:12px; padding:8px 12px; border-radius:var(--radius);
  background:#e8faf0; color:var(--success);
  display:flex; align-items:center; gap:6px;
}
.settings-msg i { font-size:15px; flex-shrink:0; }
.settings-msg--err { background:#fff1f0; color:var(--danger); }
/* Password field with eye toggle */
.pw-field { position:relative; }
.pw-field__input { padding-right:36px !important; }
.pw-field__eye {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  border:none; background:none; cursor:pointer; padding:4px;
  color:var(--text-muted); font-size:16px; border-radius:4px;
  transition:color var(--transition);
}
.pw-field__eye:hover { color:var(--text); }

/* User status toggle */
.user-status-btn {
  font-family:var(--font); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:20px; border:none; cursor:pointer;
  transition:all var(--transition);
}
.user-status-btn--active { background:#e8faf0; color:var(--success); }
.user-status-btn--active:hover { background:#d1f5e0; }
.user-status-btn--inactive { background:#fff1f0; color:var(--danger); }
.user-status-btn--inactive:hover { background:#ffe0de; }

.settings-org-note {
  font-size:11.5px; color:var(--text-muted); text-align:center;
  padding-top:4px; border-top:1px solid var(--border-light);
}

/* ══════════════════════════
   Login
   ══════════════════════════ */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg); padding:16px; }
.login-card {
  background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  padding:44px 36px; width:100%; max-width:360px;
}
.login-header { text-align:center; margin-bottom:32px; }
.login-title { font-size:22px; font-weight:700; letter-spacing:-0.5px; }
.login-subtitle { font-size:13px; color:var(--text-muted); margin-top:4px; }
.login-form { display:flex; flex-direction:column; gap:14px; }

/* ══════════════════════════
   Page Layout
   ══════════════════════════ */
.page-view { display:flex; min-height:calc(100vh - var(--nav-h) - 40px); gap:0; }
.page-view--with-panel { gap:24px; }
.page-view--with-panel .page-content { flex:1; min-width:0; }
.page-view--split { display:flex; gap:0; }
.page-view--stacked { display:flex; flex-direction:column; }
.page-view--calendar { flex-direction:column; min-height:calc(100vh - var(--nav-h) - 40px); }
.page-content { flex:1; overflow-y:auto; }

.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header__actions { display:flex; align-items:center; gap:10px; }
.page-title { font-size:24px; font-weight:700; letter-spacing:-0.5px; }
.page-subtitle { font-size:12px; color:var(--text-muted); margin-top:1px; }

/* ══════════════════════════
   Tabs
   ══════════════════════════ */
.tabs { display:flex; gap:2px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.tabs--compact { border-bottom:none; margin-bottom:8px; }
.tabs__item {
  padding:8px 14px; border:none; background:none; cursor:pointer;
  font-size:13px; font-weight:500; color:var(--text-muted);
  border-bottom:2px solid transparent; transition:all var(--transition);
  font-family:var(--font); letter-spacing:-0.1px;
}
.tabs__item:hover { color:var(--text-secondary); }
.tabs__item--active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.tabs__info {
  display:inline-flex; align-items:center; margin-left:3px;
  color:var(--text-muted); font-size:12px; cursor:help;
  vertical-align:middle; position:relative; top:-0.5px;
}
.tabs__info:hover { color:var(--primary); }

/* ══════════════════════════
   Forms
   ══════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group--full { grid-column:1 / -1; }
.form-label { font-size:11.5px; font-weight:600; color:var(--text-secondary); letter-spacing:.2px; }
.form-input, .form-select, .form-textarea {
  padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius);
  font-size:13px; font-family:var(--font); color:var(--text);
  background:var(--surface); transition:all var(--transition);
  outline:none; width:100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
}
.form-input--sm, .form-select--sm { padding:6px 10px; font-size:12px; }
.form-textarea { min-height:60px; resize:vertical; }
.form-textarea--sm { min-height:40px; }
.form-error { color:var(--danger); font-size:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-grid--compact { gap:8px; }
.form-grid--inline { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.form-grid--inline .form-group { min-width:120px; }
.input-prefix { display:flex; }
.input-prefix span {
  display:flex; align-items:center; padding:0 10px;
  background:var(--bg); border:1px solid var(--border); border-right:0;
  border-radius:var(--radius) 0 0 var(--radius); font-size:12px; color:var(--text-muted); white-space:nowrap;
}
.input-prefix .form-input { border-radius:0 var(--radius) var(--radius) 0; }

/* ══════════════════════════
   Buttons
   ══════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:5px; padding:7px 14px;
  border:1px solid var(--border); border-radius:var(--radius); cursor:pointer;
  font-size:12.5px; font-weight:500; font-family:var(--font);
  background:var(--surface); color:var(--text); transition:all var(--transition);
  white-space:nowrap; letter-spacing:-0.1px;
}
.btn:hover { background:var(--bg); }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.btn--primary { background:var(--primary); color:white; border-color:var(--primary); }
.btn--primary:hover { background:var(--primary-hover); }
.btn--secondary { background:var(--bg); border-color:var(--border); color:var(--text-secondary); }
.btn--danger { background:var(--danger); color:white; border-color:var(--danger); }
.btn--danger:hover { opacity:.9; }
.btn--ghost { background:none; border-color:transparent; color:var(--text-secondary); }
.btn--ghost:hover { background:var(--bg); color:var(--text); }
.btn--sm { padding:5px 10px; font-size:12px; }
.btn--xs { padding:3px 6px; font-size:11px; }
.btn--full { width:100%; justify-content:center; }
.btn__badge {
  background:white; color:var(--primary); font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:10px; margin-left:2px;
}

/* ══════════════════════════
   Tags
   ══════════════════════════ */
.tag {
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:500; background:var(--bg); color:var(--text-secondary);
}
.tag--sm { padding:2px 8px; font-size:10px; }
.tag--blue { background:#e8f4fd; color:#099af2; }
.tag--green { background:#e8faf0; color:#34c759; }
.tag--purple { background:#f3e8ff; color:#8b5cf6; }
.tag--orange { background:#fff4e5; color:#e67700; }
.tag--pink { background:#fce7f3; color:#be185d; }
.tag--teal { background:#e6fcf5; color:#0d9488; }
.tag--amber { background:#fff8e1; color:#92400e; }

/* ══════════════════════════
   Filter Bar
   ══════════════════════════ */
.filter-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; margin-bottom:12px; gap:16px;
}
.filter-bar__left { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.filter-bar__right { flex-shrink:0; display:flex; align-items:center; gap:10px; }
.filter-toggle {
  display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-secondary);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.filter-toggle input {
  width:16px; height:16px; cursor:pointer; accent-color:var(--primary);
  border-radius:5px; -webkit-appearance:none; appearance:none;
  border:1.5px solid rgba(0,0,0,.2); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--transition); flex-shrink:0;
}
.filter-toggle input:checked {
  background:var(--primary); border-color:var(--primary);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5L6 10L10.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}
.filter-toggle input:hover { border-color:var(--primary); }

/* ══════════════════════════
   Search
   ══════════════════════════ */
.search-bar { position:relative; margin-bottom:12px; }
.search-bar--compact { padding:0 12px; margin-bottom:8px; }
.search-bar--inline { margin-bottom:0; }
.search-bar__icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:15px; }
.search-bar--compact .search-bar__icon { left:24px; }
.search-bar__input { padding-left:36px !important; }

/* ══════════════════════════
   Data Table
   ══════════════════════════ */
.data-table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.data-table--compact .data-table__th,
.data-table--compact .data-table__td { padding:6px 10px; font-size:12px; }
.data-table__th {
  text-align:left; padding:8px 12px; font-size:10.5px; font-weight:600;
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border); background:#fafafa; position:sticky; top:0; z-index:1;
  white-space:nowrap; resize:horizontal; overflow:hidden;
}
.data-table__th--noresize { resize:none; }
.data-table__td {
  padding:6px 10px; border-bottom:1px solid var(--border-light); font-size:13px; vertical-align:middle;
  max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.data-table__td--mono { font-family:var(--font); font-size:12px; letter-spacing:-0.2px; color:var(--text-secondary); }
.data-table__td--center, .data-table__th--center { text-align:center; }
.data-table__pin {
  position:sticky; z-index:2; background:white;
}
.data-table__th.data-table__pin { z-index:3; background:#fafafa; }
.data-table__row:hover .data-table__pin { background:rgba(9,154,242,.03); }
.data-table__row--selected .data-table__pin { background:var(--primary-light); }
.data-table__row--selected:hover .data-table__pin { background:var(--primary-light); }
/* Fixed-width columns (numbers, checkboxes, images, tags) should not truncate */
.data-table__td--fixed { max-width:none; overflow:visible; white-space:normal; }
.data-table__td:has(.cb),
.data-table__td:has(.data-table__img),
.data-table__td:has(.data-table__img-placeholder),
.data-table__td:has(.tag-group),
.data-table__td:has(.tag-pill) { max-width:none; overflow:visible; }
.data-table__row { transition:background var(--transition); }
.data-table__row:hover { background:rgba(9,154,242,.03); }
.data-table__row--clickable { cursor:pointer; }
.data-table__row--selected { background:var(--primary-light) !important; }
.data-table__row--oos { opacity:.4; }
.data-table__img { width:36px; height:36px; object-fit:contain; border-radius:6px; }
.data-table__img-placeholder {
  width:36px; height:36px; border-radius:6px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:14px;
}
.data-table__empty { text-align:center; padding:40px; color:var(--text-muted); font-size:13px; }
.text-danger { color:var(--danger); }
.text-warning { color:var(--warning); }
.text-muted { color:var(--text-muted); }
.mono { font-family:var(--font); font-size:12px; }
.link { color:var(--primary); text-decoration:none; }
.link:hover { text-decoration:underline; }

.cb {
  width:16px; height:16px; cursor:pointer; accent-color:var(--primary);
  border-radius:5px; -webkit-appearance:none; appearance:none;
  border:1.5px solid rgba(0,0,0,.2); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all var(--transition); flex-shrink:0;
  vertical-align:middle; margin:0;
}
.cb:checked {
  background:var(--primary); border-color:var(--primary);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5L6 10L10.5 4.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}
.cb:hover { border-color:var(--primary); }

/* Tag pills (abbreviated, inline) */
.tag-group { display:flex; gap:4px; flex-wrap:wrap; }
.tag-pill {
  display:inline-block; font-size:10px; font-weight:600; padding:2px 7px;
  border-radius:6px; letter-spacing:.2px; line-height:1.3;
  background:#f0f0f0; color:var(--text-muted);
}
.tag-pill--le { background:#f3e8ff; color:#7c3aed; }
.tag-pill--ac { background:#fff4e5; color:#e67700; }
.tag-pill--disc { background:#fff1f0; color:var(--danger); }
.status-select {
  font-size:11px !important; padding:4px 8px !important;
  border-radius:8px; font-weight:600; border:none;
}

/* ══════════════════════════
   Inventory Table + Selection
   ══════════════════════════ */
.inv-table-wrap {
  max-height:380px; overflow-y:auto; border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius-lg); background:var(--surface);
}
.selection-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; margin-top:4px;
}
.selection-bar__left { display:flex; align-items:center; gap:12px; }
.selection-bar__right { display:flex; align-items:center; gap:16px; }
.selection-bar__count { font-size:13px; color:var(--text-secondary); }

/* ══════════════════════════
   Screenshot / Preview Grid
   ══════════════════════════ */
.screenshot-section { padding:8px 0 40px; }
.screenshot-section__title {
  font-size:14px; font-weight:600; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.screenshot-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 16px; color:var(--text-muted); text-align:center; font-size:13px;
  border:2px dashed var(--border); border-radius:var(--radius-xl);
}

.product-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  gap:14px;
}
.product-card {
  background:var(--surface); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-lg);
  overflow:hidden; transition:all var(--transition); position:relative;
}
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.product-card--oos { opacity:.35; }
.product-card__img-wrap {
  position:relative; background:#f7f7f8;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1; overflow:hidden;
}
.product-card__img { width:70%; height:70%; object-fit:contain; }
.product-card__img-placeholder { font-size:36px; color:var(--border); }
.product-card__tag {
  position:absolute; top:8px; right:8px; font-size:9px; font-weight:600;
  padding:2px 7px; border-radius:6px;
}
.product-card__body { padding:10px 12px 12px; }
.product-card__model { font-size:13px; font-weight:600; line-height:1.3; margin-bottom:1px; }
.product-card__color { font-size:12px; color:var(--text-secondary); margin-bottom:2px; }
.product-card__sku { font-size:9.5px; font-family:var(--font); color:var(--text-muted); margin-bottom:6px; letter-spacing:-0.1px; }
.product-card__stats { display:flex; justify-content:space-between; align-items:center; font-size:11.5px; }
.product-card__size { color:var(--text-muted); }
.product-card__stock { font-weight:600; }
.product-card__book { width:calc(100% - 16px); margin:0 8px 8px; }
.product-card__cart-btn {
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border-radius:8px;
  background:var(--primary); color:white; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; transition:all var(--transition);
  box-shadow:none;
}
.product-card__cart-btn:hover { background:var(--primary-hover); transform:scale(1.08); }
.product-card__cart-btn:active { transform:scale(.95); }

/* Minimal view: no borders, centered text */
.product-grid--minimal { gap:10px; }
.product-grid--minimal .product-card { border:none; box-shadow:none; background:transparent; }
.product-grid--minimal .product-card:hover { box-shadow:none; transform:none; }
.product-grid--minimal .product-card__img-wrap {
  background:#f7f7f8; border-radius:var(--radius-lg);
  border:none;
}
.product-grid--minimal .product-card__body { padding:8px 4px 4px; text-align:center; }
.product-grid--minimal .product-card__stats { justify-content:center; gap:8px; }
.product-grid--minimal .tag-group { justify-content:center; }

/* ══════════════════════════
   Side Panel (Cart)
   ══════════════════════════ */
.side-panel {
  width:320px; flex-shrink:0; border:1px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg);
  max-height:calc(100vh - var(--nav-h) - 40px);
  position:sticky; top:calc(var(--nav-h) + 20px);
  box-shadow:var(--shadow); overflow:hidden;
}
.side-panel__header { padding:14px 16px; border-bottom:1px solid var(--border-light); }
.side-panel__header h3 { font-size:14px; font-weight:600; }
.side-panel__meta { font-size:11px; color:var(--text-muted); }
.side-panel__section { padding:12px 16px; border-bottom:1px solid var(--border-light); }
.side-panel__items { flex:1; overflow-y:auto; padding:8px; }
.side-panel__empty { text-align:center; padding:28px 8px; font-size:12px; color:var(--text-muted); }
.side-panel__actions { padding:12px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }

.cart-item { border:1px solid var(--border-light); border-radius:var(--radius); padding:10px; margin-bottom:6px; }
.cart-item__header { display:flex; align-items:center; gap:8px; }
.cart-item__info { flex:1; min-width:0; }
.cart-item__img { width:32px; height:32px; object-fit:contain; border-radius:6px; flex-shrink:0; }
.cart-item__sku { font-family:var(--font); font-size:11px; font-weight:600; display:block; }
.cart-item__remove { border:none; background:none; cursor:pointer; color:var(--text-muted); font-size:14px; padding:2px; }
.cart-item__remove:hover { color:var(--danger); }
.cart-item__meta { font-size:10.5px; color:var(--text-muted); }
.cart-item__qty { display:flex; align-items:center; gap:4px; margin-top:6px; }
.cart-item__qty-input { width:48px; text-align:center; padding:3px; border:1px solid var(--border); border-radius:6px; font-size:12px; }
.cart-item__avail { font-size:10px; color:var(--text-muted); margin-left:auto; }

/* ══════════════════════════
   Split View (List + Detail)
   ══════════════════════════ */
.list-panel {
  width:260px; border-right:1px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column; overflow-y:auto;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.list-panel__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border-light);
}
.list-panel__header h3 { font-size:14px; font-weight:600; }
.list-panel__items { flex:1; overflow-y:auto; }
.list-panel__item {
  display:block; width:100%; text-align:left; padding:10px 16px;
  border:none; background:none; border-bottom:1px solid var(--border-light);
  cursor:pointer; transition:background var(--transition); font-family:var(--font);
}
.list-panel__item:hover { background:var(--primary-soft); }
.list-panel__item--active { background:var(--primary-light); border-left:3px solid var(--primary); }
.list-panel__item-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.list-panel__item-id { font-family:var(--font); font-size:11px; font-weight:600; color:var(--primary); }
.list-panel__item-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-panel__item-date { font-size:10.5px; color:var(--text-muted); }
.list-panel__empty { text-align:center; padding:28px; font-size:12px; color:var(--text-muted); }

.detail-panel { flex:1; overflow-y:auto; }
.detail-panel__content { padding:24px; }
.detail-panel__bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.detail-panel__actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-bottom:32px; }
.op-id { font-family:var(--font); font-size:15px; font-weight:700; color:var(--primary); }

/* ══════════════════════════
   Section Cards
   ══════════════════════════ */
.section-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:14px;
}
.section-card--clickable { cursor:pointer; transition:all var(--transition); }
.section-card--clickable:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.section-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-card__title { font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.section-card__empty { text-align:center; padding:20px; font-size:12px; color:var(--text-muted); }

/* ── Meta grid ── */
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 28px; }
.meta-grid--compact { gap:4px 16px; }
.meta-item { display:flex; flex-direction:column; }
.meta-item--full { grid-column:1 / -1; }
.meta-label { font-size:10.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; }
.meta-value { font-size:13px; font-weight:500; }

/* ── Delivery cards ── */
.delivery-card { border:1px solid var(--border-light); border-radius:var(--radius); padding:12px; margin-bottom:8px; }
.delivery-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.delivery-card__label { font-weight:600; font-size:13px; }
.delivery-form { border:1px solid var(--border-light); border-radius:var(--radius); padding:12px; margin-bottom:8px; }
.delivery-form__head { display:flex; justify-content:space-between; margin-bottom:8px; font-size:12px; font-weight:600; }

/* ── Attached bookings ── */
.attached-booking {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  border:1px solid var(--border-light); border-radius:var(--radius); margin-bottom:4px;
}
.attached-booking__bn { font-family:var(--font); font-size:12px; font-weight:600; color:var(--primary); }
.attached-booking__title { font-size:13px; color:var(--text-secondary); }
.attached-booking__meta { font-size:11px; color:var(--text-muted); margin-left:auto; }

/* ══════════════════════════
   Bookings
   ══════════════════════════ */
.booking-list { display:flex; flex-direction:column; gap:4px; }
.booking-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.booking-card__header {
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  cursor:pointer; transition:background var(--transition);
}
.booking-card__header:hover { background:var(--primary-soft); }
.booking-card__left { display:flex; align-items:center; gap:10px; }
.booking-card__right { display:flex; align-items:center; gap:16px; }
.booking-card__bn { font-family:var(--font); font-size:12px; font-weight:700; color:var(--primary); }
.booking-card__title { font-size:13px; font-weight:500; }
.booking-card__meta { font-size:11px; color:var(--text-muted); }
.booking-card__items { border-top:1px solid var(--border-light); }

/* ══════════════════════════
   Mockups
   ══════════════════════════ */
.mockup-list { display:flex; flex-direction:column; gap:8px; }
.mockup-card { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.mockup-card__left { flex:1; }
.mockup-card__top { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.mockup-card__title { font-weight:600; font-size:14px; }
.mockup-card__meta { display:flex; gap:16px; font-size:12px; color:var(--text-muted); }
.mockup-card__items { margin-top:8px; display:flex; flex-direction:column; gap:2px; }
.mockup-card__item { display:flex; gap:12px; font-size:12px; background:var(--bg); padding:5px 10px; border-radius:6px; }
.mockup-card__actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.history-item { display:flex; align-items:center; gap:8px; font-size:12px; padding:4px 0; }

/* ══════════════════════════
   Operations
   ══════════════════════════ */
.ops-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.ops-header__left { display:flex; align-items:center; gap:12px; }
.ops-content { padding:16px 0; }

.pipeline-group__header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pipeline-group__qty {
  background:var(--primary); color:white; font-size:11px; font-weight:700;
  padding:2px 10px; border-radius:20px; min-width:32px; text-align:center;
}
.pipeline-group__delivery { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:4px; }
.pipeline-group__bd { font-size:12px; color:var(--text-muted); }

/* ══════════════════════════
   Modal
   ══════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.3); backdrop-filter:blur(4px);
  z-index:200; display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal {
  background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column;
}
.modal--lg { max-width:700px; }
.modal__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border-light);
}
.modal__header h3 { font-size:16px; font-weight:600; }
.modal__close { border:none; background:none; cursor:pointer; font-size:18px; color:var(--text-muted); padding:4px; border-radius:6px; }
.modal__close:hover { background:var(--bg); }
.modal__body { padding:22px; overflow-y:auto; flex:1; }
.modal__footer { display:flex; justify-content:flex-end; gap:8px; padding:14px 22px; border-top:1px solid var(--border-light); }

/* ══════════════════════════
   Empty & Loading States
   ══════════════════════════ */
/* ── Error banner ── */
.error-banner {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin-bottom:12px;
  background:#fff1f0; border:1px solid rgba(255,59,48,.15);
  border-radius:var(--radius); font-size:12px; color:var(--danger);
}
.error-banner i { font-size:16px; flex-shrink:0; }
.error-banner span { flex:1; }

.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 16px; color:var(--text-muted); }
.empty-state__icon { font-size:44px; opacity:.15; margin-bottom:12px; }
.loading-state { display:flex; align-items:center; justify-content:center; padding:48px; }

/* ══════════════════════════
   Calendar
   ══════════════════════════ */
.calendar {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; flex:1; display:flex; flex-direction:column; min-height:0;
}
.calendar__nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; border-bottom:1px solid var(--border-light);
}
.calendar__nav-btns { display:flex; align-items:center; gap:2px; }
.calendar__month { font-size:15px; font-weight:700; letter-spacing:-0.3px; }
.calendar__grid { flex:1; display:flex; flex-direction:column; overflow-y:auto; }
.calendar__weekdays { display:grid; grid-template-columns:repeat(7, 1fr); border-bottom:1px solid var(--border-light); }
.calendar__weekday {
  text-align:center; font-size:10.5px; font-weight:600; color:var(--text-muted);
  padding:6px 0; text-transform:uppercase; letter-spacing:.5px;
}
.calendar__week { display:grid; grid-template-columns:repeat(7, 1fr); border-bottom:1px solid var(--border-light); min-height:80px; }
.calendar__day {
  padding:4px 6px; border-right:1px solid var(--border-light); cursor:pointer;
  transition:background var(--transition); position:relative; overflow:hidden;
}
.calendar__day:last-child { border-right:none; }
.calendar__day:hover { background:var(--primary-soft); }
.calendar__day--today { box-shadow:inset 0 0 0 2px var(--primary); border-radius:2px; }
.calendar__day--other { opacity:.25; }
.calendar__day--weekend { background:rgba(0,0,0,.015); }
.calendar__day-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.calendar__day-num { font-size:12px; font-weight:600; }
.calendar__day--today .calendar__day-num { color:var(--primary); font-weight:800; }
.calendar__day-caps { display:flex; gap:3px; }
.calendar__day-jobs { display:flex; flex-direction:column; gap:1px; }
.calendar__day-more { font-size:9px; color:var(--text-muted); }

.cap-badge { font-size:8px; font-weight:600; padding:0 4px; border-radius:4px; white-space:nowrap; }
.cap-badge--uv { background:#e8f4fd; color:var(--primary); }
.cap-badge--laser { background:#f3e8ff; color:#8b5cf6; }
.cap-badge--full { background:#fff1f0; color:var(--danger); }

.job-bar {
  font-size:9px; font-weight:600; padding:2px 6px; border-radius:5px;
  color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; transition:opacity var(--transition);
}
.job-bar:hover { opacity:.85; }
.job-bar--uv { background:var(--primary); }
.job-bar--laser { background:#8b5cf6; }
.job-bar--done { opacity:.4; }
.job-bar--selected { box-shadow:0 0 0 2px var(--warning); }

.cal-panel {
  background:var(--surface); border-top:1px solid var(--border);
  min-height:260px; border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.cal-panel__content { padding:12px 16px; overflow-y:auto; max-height:200px; }
.cal-panel__empty { text-align:center; padding:24px; font-size:13px; color:var(--text-muted); }
.cal-panel__list { display:flex; flex-direction:column; gap:4px; }
.cal-panel__list-item {
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  border:1px solid var(--border-light); border-radius:var(--radius); font-size:12px;
  cursor:pointer; transition:all var(--transition);
}
.cal-panel__list-item:hover { background:var(--primary-soft); }
.cal-panel__list-title { font-weight:600; min-width:100px; }

.job-timeline { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.job-timeline__step {
  display:flex; align-items:center; gap:4px; padding:3px 10px;
  border-radius:20px; font-size:10px; font-weight:600;
  background:var(--bg); color:var(--text-muted);
}
.job-timeline__step--done { background:#e8faf0; color:var(--success); }
.job-timeline__step i { font-size:12px; }

/* ══════════════════════════
   Toggle (iOS style)
   ══════════════════════════ */
.toggle-label { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.toggle-input { width:16px; height:16px; cursor:pointer; accent-color:var(--primary); }

/* ══════════════════════════
   View toggle
   ══════════════════════════ */
.view-toggle { display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.view-toggle__btn {
  border:none; background:var(--surface); padding:5px 10px; cursor:pointer;
  font-size:16px; color:var(--text-muted); transition:all var(--transition);
}
.view-toggle__btn:not(:last-child) { border-right:1px solid var(--border); }
.view-toggle__btn--active { background:var(--primary-light); color:var(--primary); }
.view-toggle__btn:hover { background:var(--bg); }