/* ============================================================
   EEIS PWA – style.css
   Base layer. Canonical color/shadow/radius/font/header tokens now
   live in ONE place: css/rebrand.css's :root (loaded after this file
   in includes/head.php), which also aliases the legacy --clr-* names
   this file's selectors use — see that file for the single source of
   truth. This block keeps only tokens rebrand.css does NOT define.
   ============================================================ */

/* ── 1. DESIGN TOKENS (non-color tokens only — see note above) ── */
:root {
  /* Semantic status colors — no rebrand.css alias exists for these */
  --clr-success: #22c55e;
  --clr-danger: #ef4444;
  --clr-warn: #f59e0b;
  --clr-info: #38bdf8;

  --r-full: 9999px;

  /* Typography scale */
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-2xl: 22px;

  --tabs-h: 44px;

  /* Network HUD moved into Settings + nav badges — no longer a fixed
     top bar, so this spacing collapses to 0 (kept as vars since many
     calc() offsets elsewhere still reference them). */
  --net-hud-h: 0px;
  --net-hud-gap: 0px;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  font-family: var(--font-base);
  font-size: var(--fs-md);
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  direction: ltr;
  text-align: left;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: var(--fs-md);
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

svg {
  flex-shrink: 0;
}

.hidden {
  display: none !important;
}

/* ── 3. APP SHELL ─────────────────────────────────────────── */
#app {
  position: fixed;
  top: calc(var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--clr-bg);
  overflow: hidden;
}

.screen.active {
  display: flex;
  /* A very short fade so switching screens reads as smooth rather than an
     abrupt cut — short enough that it never feels like added delay (the
     screen is already interactive immediately; only its opacity animates). */
  animation: screen-fade-in .12s ease-out;
}

@keyframes screen-fade-in {
  from { opacity: .4; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active { animation: none; }
}

/* ── 4. HEADER ────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--sp-sm);
  background: var(--clr-surface);
  border-bottom: 1.5px solid var(--clr-border);
  gap: var(--sp-xs);
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  min-width: 36px;
}

.header-right {
  justify-content: flex-end;
}

.header-title {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

.header-title span {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-title small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 5. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: 9px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dk));
  color: #fff;
  border-color: var(--clr-primary);
  box-shadow: 0 4px 12px rgba(182, 58, 49, .3);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  display: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--clr-primary-dk), #6b1e18);
  border-color: var(--clr-primary-dk);
  box-shadow: 0 6px 16px rgba(182, 58, 49, .4);
}

.btn-primary:active {
  background: #6b1e18;
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .3);
}

.btn-secondary {
  background: var(--clr-surface-3);
  color: var(--clr-text);
  border-color: var(--clr-border-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.btn-secondary:hover {
  background: var(--clr-surface-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.btn-secondary:active {
  background: var(--clr-surface);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.btn-danger {
  background: linear-gradient(135deg, var(--clr-danger), #c82020);
  color: #fff;
  border-color: var(--clr-danger);
  box-shadow: 0 4px 12px rgba(239, 68, 68, .3);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #c82020, #a01010);
  border-color: #c82020;
  box-shadow: 0 6px 16px rgba(239, 68, 68, .4);
}

.btn-danger:active {
  background: #a01010;
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, .3);
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
}

.btn-warning:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #d97706;
  box-shadow: 0 6px 16px rgba(245, 158, 11, .4);
}

.btn-warning:active {
  background: #b45309;
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, .3);
}

.btn-full {
  width: 100%;
}

.btn-small {
  padding: 6px 12px;
  font-size: var(--fs-sm);
}

.btn-chip {
  padding: 5px 12px;
  font-size: var(--fs-sm);
  border-radius: var(--r-full);
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  color: var(--clr-text-sub);
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.btn-icon:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}

.btn-icon:active {
  background: var(--clr-surface-3);
  transform: scale(0.95);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

.btn-icon.primary {
  color: var(--clr-primary);
}

.btn-icon.primary:hover {
  background: rgba(182, 58, 49, .15);
}

.btn:disabled,
.btn-icon:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 6. BOTTOM NAVIGATION ─────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: none;
  align-items: stretch;
  background: var(--clr-surface);
  border-top: 1.5px solid var(--clr-border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .3);
}

.bottom-nav.visible {
  display: flex;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--clr-text-muted);
  letter-spacing: .2px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 8px 0 6px;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-tab svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.nav-tab-label {
  display: block;
  max-width: 100%;
  line-height: 1.05;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nav-tab.active {
  color: var(--clr-primary);
}

.nav-tab:hover {
  color: var(--clr-text-sub);
}

.nav-tab.active:hover {
  color: var(--clr-primary);
}

/* Profile avatar in nav */
.nav-profile-avatar-wrap {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--clr-surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-profile-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  object-fit: cover;
}

.nav-profile-avatar-fallback {
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-sub);
}

/* Screens with nav get bottom padding */
#screen-main,
#screen-projects,
#screen-all-tasks,
#screen-attendance,
#screen-profile,
#screen-cmms-ai,
#screen-warehouse,
#screen-quotations,
#screen-support {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 18px);
}

/* ── 7. SPLASH SCREEN ─────────────────────────────────────── */
#screen-splash {
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.splash-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.splash-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  border: 2px solid transparent;
}

.splash-ring-1 {
  border-color: var(--clr-border-2);
}

.splash-ring-2 {
  inset: 8px;
  border-color: var(--clr-primary);
  opacity: .35;
}

.splash-logo-wrap {
  width: 120px;
  height: 120px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border: 2px solid var(--clr-border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  position: relative;
}

.splash-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--r-full);
  padding: 2px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
}

.splash-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--r-lg);
  z-index: 1;
}

.splash-texts {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.splash-company {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: 1px;
}

.splash-tagline {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  max-width: 240px;
}

.splash-dots {
  display: flex;
  gap: 6px;
}

.splash-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--clr-border-2);
}

.splash-dot:first-child {
  background: var(--clr-primary);
}

.splash-brand {
  position: absolute;
  bottom: 24px;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  letter-spacing: .5px;
}

/* Unused orbs – hidden */
.splash-orb {
  display: none;
}

/* ── 8. LOGIN SCREEN ──────────────────────────────────────────
   The actual login layout/responsiveness lives in css/login-layout.css,
   scoped under #screen-login so it can't be won by anything unscoped.
   This section used to duplicate the same class names unscoped (twice —
   see git history), which fought login-layout.css's responsive
   breakpoints on specificity/load-order and was the root cause of the
   login screen intermittently losing its mobile layout. Removed. */

/* ── 9. FORM ELEMENTS ─────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-text-sub);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text);
  font-size: var(--fs-md);
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  direction: ltr;
  text-align: left;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a8aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  direction: ltr;
  text-align: left;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.form-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.form-actions {
  display: flex;
  gap: var(--sp-sm);
  justify-content: flex-end;
  padding-top: var(--sp-xs);
}

.form-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-border), transparent);
  margin: var(--sp-sm) 0;
}

.req {
  color: var(--clr-danger);
}

.error-msg {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(239, 68, 68, .12);
  border: 1.5px solid rgba(239, 68, 68, .3);
  color: #f87171;
  font-size: var(--fs-sm);
  box-shadow: 0 2px 6px rgba(239, 68, 68, .2);
}

.success-msg {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(34, 197, 94, .12);
  border: 1.5px solid rgba(34, 197, 94, .3);
  color: #4ade80;
  font-size: var(--fs-sm);
  box-shadow: 0 2px 6px rgba(34, 197, 94, .2);
}

/* AI helper */
.ai-text-helper {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: 4px;
}

.ai-correct-btn {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-primary);
  padding: 3px 8px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--clr-primary);
  background: rgba(182, 58, 49, .08);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(182, 58, 49, .15);
}

.ai-correct-btn:hover {
  background: rgba(182, 58, 49, .18);
  box-shadow: 0 2px 6px rgba(182, 58, 49, .25);
}

.ai-text-helper-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Recurring fields */
.recurring-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid rgba(180, 80, 70, .28);
  background: linear-gradient(145deg, rgba(14, 24, 32, .96), rgba(14, 24, 32, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 2px 6px rgba(0, 0, 0, .18);
  cursor: pointer;
  position: relative;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease;
}

input[type="checkbox"]:hover {
  border-color: rgba(220, 100, 90, .48);
}

input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #c44038, #8f2e26);
  border-color: rgba(220, 100, 90, .44);
  box-shadow: 0 8px 16px rgba(182, 58, 49, .24);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(40deg);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .14);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--clr-primary);
}

/* ── 10. TABS ─────────────────────────────────────────────── */
.pg-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.pg-tabs::-webkit-scrollbar {
  display: none;
}

.pg-tab-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: -1px;
  position: relative;
}

.pg-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-primary);
  opacity: 0;
}

.pg-tab-btn.active {
  color: var(--clr-primary);
}

.pg-tab-btn.active::after {
  opacity: 1;
}

.pg-tab-btn:hover {
  color: var(--clr-text-sub);
}

.pg-tab-btn.active:hover {
  color: var(--clr-primary);
}

.pg-tab-count {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  padding: 1px 6px;
  border-radius: var(--r-full);
  min-width: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.pg-tab-btn.active .pg-tab-count {
  background: rgba(182, 58, 49, .18);
  color: var(--clr-primary);
}

.pg-tab-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.pg-tab-panel.active {
  display: flex;
  flex-direction: column;
}

/* Detail tabs */
.detail-tab-host {
  display: flex;
  flex-direction: column;
}

.detail-tab-bar {
  display: flex;
  border-bottom: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.detail-tab-bar::-webkit-scrollbar {
  display: none;
}

.detail-tab-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: -1px;
  position: relative;
}

.detail-tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--clr-primary);
  opacity: 0;
}

.detail-tab-btn.active {
  color: var(--clr-primary);
}

.detail-tab-btn.active::after {
  opacity: 1;
}

.detail-tab-panel {
  display: none;
}

.detail-tab-panel.active {
  display: block;
}

.detail-tab-body {
  padding: var(--sp-md);
}

.tab-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  padding: 1px 5px;
  border-radius: var(--r-full);
  min-width: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* ── 11. FILTER BAR ───────────────────────────────────────── */
.pg-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  flex-wrap: wrap;
}

.pg-filter-row {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.search-box {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 0 10px;
  height: 36px;
}

.search-box:focus-within {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15);
}

.search-box svg {
  width: 16px;
  height: 16px;
  color: var(--clr-text-muted);
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: none;
  background: none;
  color: var(--clr-text);
  font-size: var(--fs-sm);
  outline: none;
  height: 100%;
  min-width: 0;
}

.search-box input::placeholder {
  color: var(--clr-text-muted);
}

.filter-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a8aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  direction: ltr;
}

.filter-select:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15);
}

.filter-toggle-btn {
  position: relative;
  flex-shrink: 0;
}

.filter-active-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--clr-primary);
}

/* ── 12. STATS STRIP ──────────────────────────────────────── */
.pg-stats-strip {
  display: flex;
  align-items: center;
  background: var(--clr-surface);
  border-bottom: 1.5px solid var(--clr-border);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.pg-stat-cell {
  flex: 1;
  padding: 10px 12px;
  text-align: center;
  border-right: 1.5px solid var(--clr-border);
}

.pg-stat-cell:last-child {
  border-right: none;
}

.pg-stat-num {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
}

.pg-stat-lbl {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── 13. PROGRESS BAR ─────────────────────────────────────── */
.progress-wrap {
  background: var(--clr-surface-3);
  border-radius: var(--r-full);
  overflow: hidden;
  height: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-lt));
  border-radius: var(--r-full);
  min-width: 2px;
  box-shadow: 0 0 8px rgba(182, 58, 49, .4);
}

/* ── 14. LIST ROWS ────────────────────────────────────────── */
.pg-scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.pg-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-xs) var(--sp-sm);
}

.pg-list-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px var(--sp-sm);
  background: var(--clr-surface);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  cursor: pointer;
  margin-bottom: var(--sp-xs);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.pg-list-row:hover {
  background: var(--clr-surface-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.pg-list-row:active {
  background: var(--clr-surface-3);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.pg-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.pg-row-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text);
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pg-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.pg-row-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.pg-row-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Status dots */
.pg-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--clr-text-muted);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.pg-dot-green {
  background: var(--clr-success);
  box-shadow: 0 0 6px rgba(34, 197, 94, .4);
}

.pg-dot-red {
  background: var(--clr-danger);
  box-shadow: 0 0 6px rgba(239, 68, 68, .4);
}

.pg-dot-yellow {
  background: var(--clr-warn);
  box-shadow: 0 0 6px rgba(245, 158, 11, .4);
}

.pg-dot-blue {
  background: var(--clr-primary);
  box-shadow: 0 0 6px rgba(182, 58, 49, .4);
}

/* Badges */
.pg-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  border: 1.5px solid var(--clr-border);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.pg-badge-ok {
  background: rgba(34, 197, 94, .15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, .3);
  box-shadow: 0 2px 6px rgba(34, 197, 94, .2);
}

.pg-badge-pending {
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .25);
  box-shadow: 0 2px 6px rgba(245, 158, 11, .2);
}

.pg-badge-gray {
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.pg-badge-warn {
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .25);
  box-shadow: 0 2px 6px rgba(245, 158, 11, .2);
}

/* Chips */
.pg-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  border: 1.5px solid var(--clr-border);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Empty & loading states */
.pg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 48px var(--sp-lg);
  color: var(--clr-text-muted);
  text-align: center;
  flex: 1;
}

.pg-empty svg {
  width: 40px;
  height: 40px;
  opacity: .35;
}

.pg-empty strong {
  font-size: var(--fs-lg);
  color: var(--clr-text-sub);
}

.pg-empty small {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.pg-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 32px var(--sp-lg);
  color: var(--clr-text-muted);
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: 40px;
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
  flex: 1;
}

/* Spinner – no animation, just shows a ring */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--clr-border-2);
  border-top-color: var(--clr-primary);
  border-radius: var(--r-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── 15. TASK ROWS ────────────────────────────────────────── */
.pg-task-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: 10px var(--sp-sm);
  background: var(--clr-surface);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  cursor: pointer;
  margin-bottom: var(--sp-xs);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.pg-task-row:hover {
  background: var(--clr-surface-2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.pg-task-row:active {
  background: var(--clr-surface-3);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.pg-task-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--clr-border-2);
  border-radius: var(--r-xs);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-surface-2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.pg-task-check.checked {
  background: linear-gradient(135deg, var(--clr-success), #16a34a);
  border-color: var(--clr-success);
  box-shadow: 0 2px 6px rgba(34, 197, 94, .3);
}

.pg-task-check.checked::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.pg-task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pg-task-heading {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pg-task-heading.done {
  color: var(--clr-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--clr-text-muted);
}

.pg-task-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.task-delete-btn {
  color: var(--clr-text-muted);
  padding: 4px;
  border-radius: var(--r-xs);
  flex-shrink: 0;
  opacity: .5;
}

.task-delete-btn:hover {
  color: var(--clr-danger);
  opacity: 1;
}

/* ── 16. DETAIL SCREEN ────────────────────────────────────── */
.detail-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding-bottom: var(--sp-md);
}

.detail-section {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.detail-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 10px var(--sp-md);
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border-bottom: 1.5px solid var(--clr-border);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--clr-border);
}

.detail-field {
  padding: 10px var(--sp-md);
  background: var(--clr-surface);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-field.full {
  grid-column: 1 / -1;
}

.detail-field label {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.detail-field span {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  word-break: break-word;
}

.detail-actions {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  flex-shrink: 0;
}

.detail-actions .btn {
  flex: 1;
}

.detail-subsection-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 8px 0 4px;
}

/* ── 17. PROJECT DETAIL PROGRESS ──────────────────────────── */
.project-detail-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--clr-surface);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.pdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
}

.pdp-pct {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
}

.pdp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.pdp-stat-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.pdp-stat-card svg {
  color: var(--clr-primary);
  margin-top: 2px;
}

.pdp-stat-nums {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.2;
}

.pdp-stat-nums span {
  font-size: var(--fs-md);
  color: var(--clr-text-muted);
  font-weight: 400;
}

.pdp-stat-label {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin-top: 2px;
}

/* ── 18. AVATARS ──────────────────────────────────────────── */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--clr-border-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.avatar-initials {
  background: linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface-2));
  color: var(--clr-text-sub);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--clr-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.avatar-stack {
  display: flex;
  align-items: center;
  gap: -6px;
}

.avatar-stack .avatar,
.avatar-stack .avatar-initials {
  width: 24px;
  height: 24px;
  font-size: 9px;
  margin-left: -6px;
  border-width: 1.5px;
}

.avatar-stack .avatar:first-child,
.avatar-stack .avatar-initials:first-child {
  margin-left: 0;
}

.avatar-more {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface-2));
  color: var(--clr-text-muted);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--clr-border);
  margin-left: -6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

/* Member cards */
.member-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
}

.member-card {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  background: var(--clr-surface-2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.member-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text-sub);
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.member-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-card-body strong {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card-body small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-empty {
  padding: var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  text-align: center;
}

/* ── 19. LINKED ITEMS ─────────────────────────────────────── */
.linked-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
}

.linked-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.linked-item:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.linked-item:active {
  background: var(--clr-surface);
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.linked-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.linked-item-head strong {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linked-item-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  border: 1.5px solid var(--clr-border);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.linked-item-badge.ok {
  background: rgba(34, 197, 94, .15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, .3);
  box-shadow: 0 2px 6px rgba(34, 197, 94, .2);
}

.linked-item-meta {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.linked-item-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.linked-empty {
  padding: var(--sp-lg);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  text-align: center;
}

/* ── 20. TASK DETAIL COMPONENTS ───────────────────────────── */
.task-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.task-comment-form textarea {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  resize: vertical;
  min-height: 72px;
  outline: none;
  line-height: 1.5;
  width: 100%;
  direction: ltr;
  text-align: left;
}

.task-comment-form textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15);
}

.task-comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-sm);
}
.task-comment-actions .btn:first-child { margin-inline-end: auto; }

/* Staged image thumbnails in the composer, before the comment is sent. */
.task-comment-images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.task-comment-images-preview:empty { display: none; }
.task-comment-image-chip {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--clr-border);
}
.task-comment-image-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.task-comment-image-chip__file {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  background: var(--clr-surface-2, #f4f8fb);
  color: var(--clr-text-sub, #6b7c8c);
}
.task-comment-image-chip__file small {
  font-size: 9px;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.task-comment-image-chip__remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.task-comment-card {
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.task-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: 5px;
}

.task-comment-head strong {
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.task-comment-head small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.task-comment-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.task-comment-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}
.task-comment-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary, #b63a31);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.task-comment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.task-comment-image-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--clr-border);
  cursor: zoom-in;
  transition: transform .12s ease;
}
.task-comment-image-thumb:hover { transform: scale(1.04); }
.task-comment-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--clr-border);
  border-radius: 8px;
  background: var(--clr-surface-2, #f4f8fb);
  color: var(--clr-text-sub, #6b7c8c);
  font-size: var(--fs-xs, 12px);
  text-decoration: none;
  max-width: 220px;
}
.task-comment-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-comment-file-chip:hover { background: var(--clr-surface-3, #e9eff5); }

.task-comment-body {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  line-height: 1.5;
  word-break: break-word;
}

.task-inline-actions {
  display: flex;
  gap: var(--sp-xs);
}

.task-link-btn {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-primary);
  background: rgba(182, 58, 49, .08);
  border: 1.5px solid rgba(182, 58, 49, .2);
  border-radius: var(--r-xs);
  padding: 2px 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(182, 58, 49, .15);
}

.task-link-btn:hover {
  background: rgba(182, 58, 49, .15);
  box-shadow: 0 2px 6px rgba(182, 58, 49, .25);
}

.task-link-btn.danger {
  color: var(--clr-danger);
  background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .2);
  box-shadow: 0 1px 3px rgba(239, 68, 68, .15);
}

.task-link-btn.danger:hover {
  background: rgba(239, 68, 68, .15);
  box-shadow: 0 2px 6px rgba(239, 68, 68, .25);
}

.task-timeline {
  position: relative;
}
.task-timeline::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--clr-border);
}

/* A colored icon badge per activity kind replaces the old plain dot, so
   status/comment/file/other activity read apart from each other at a
   glance instead of one identical marker for every entry. */
.task-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px var(--sp-sm);
  margin-bottom: 2px;
  position: relative;
}

.task-timeline-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--clr-surface);
}

.task-timeline-body { min-width: 0; }

.task-timeline-text {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
}

.task-timeline-meta {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.task-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.task-file-item:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.task-file-item strong {
  display: block;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  margin-bottom: 2px;
}

.task-file-item small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.task-file-item span {
  font-size: var(--fs-xs);
  color: var(--clr-primary);
  font-weight: 600;
  white-space: nowrap;
}

.task-file-delete-btn {
  color: var(--clr-danger);
  opacity: .6;
  padding: 4px;
  border-radius: var(--r-xs);
}

.task-file-delete-btn:hover {
  opacity: 1;
}

.task-empty-block {
  padding: var(--sp-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.task-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.task-mini-muted {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.task-note-card {
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.task-note-card strong {
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.task-note-card div {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
}

.task-note-card small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Task assignees in form */
.task-assignee-option {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 8px var(--sp-sm);
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface-2);
  margin-bottom: var(--sp-xs);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.task-assignee-option:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.task-assignee-option input[type="checkbox"] {
  flex-shrink: 0;
}

.task-assignee-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-assignee-option strong {
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.task-assignee-option small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* ── 21. MEMBERS SECTION ──────────────────────────────────── */
.members-section {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.members-section::-webkit-scrollbar {
  display: none;
}

.members-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--clr-text-muted);
  white-space: nowrap;
}

/* ── 22. PAGER ────────────────────────────────────────────── */
.card-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-top: 1.5px solid var(--clr-border);
  background: var(--clr-surface);
  margin-top: var(--sp-xs);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .1);
}

.card-pager-btn {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text-sub);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.card-pager-btn:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.card-pager-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.card-pager-info {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-pager-info small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* ── 23. TOAST ────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: var(--clr-surface-3);
  border: 1.5px solid var(--clr-border-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  z-index: 9999;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.toast.success {
  background: #14532d;
  border-color: #166534;
  color: #4ade80;
}

.toast.error {
  background: #450a0a;
  border-color: #7f1d1d;
  color: #f87171;
}

.toast.info {
  background: #0c2d4a;
  border-color: #1e4a72;
  color: #7dd3fc;
}

.toast.warn {
  background: #451a03;
  border-color: #78350f;
  color: #fde68a;
}

/* ── 24. DIALOG / CONFIRM ─────────────────────────────────── */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  padding: var(--sp-md);
}

.dialog-overlay.show {
  display: flex;
}

.dialog-box {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border-2);
  border-radius: var(--r-xl);
  padding: var(--sp-xl) var(--sp-lg);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.dialog-box h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
}

.dialog-box p {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  line-height: 1.5;
}

.dialog-required-row label {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  margin-bottom: 5px;
  display: block;
}

.dialog-required-row input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text);
  font-size: var(--fs-md);
  outline: none;
  direction: ltr;
  text-align: left;
}

.dialog-required-row input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15);
}

.dialog-required-row input.invalid {
  border-color: var(--clr-danger);
}

.dialog-actions {
  display: flex;
  gap: var(--sp-sm);
  justify-content: flex-end;
}

/* ── 24.5. MODAL SHEETS ───────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 5000;
  padding: 0;
}

.modal-overlay:not(.hidden) {
  display: flex;
}

.modal-overlay.open {
  display: flex;
}

.modal-sheet {
  background: var(--clr-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-sheet-large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
  border-bottom: 1.5px solid var(--clr-border);
  flex-shrink: 0;
  background: var(--clr-surface);
  gap: var(--sp-md);
}

.modal-header h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0;
}

.modal-close-btn {
  flex-shrink: 0;
  margin-left: auto;
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-lg);
}

/* ── 25. GLOBAL LOADER ────────────────────────────────────── */
.global-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 25, 41, .8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 8000;
}

.global-loader-overlay.show {
  display: flex;
}

.global-loader-box {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border-2);
  border-radius: var(--r-lg);
  padding: var(--sp-xl) 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7);
}

.global-loader-box span {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.global-loader-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--clr-border-2);
  border-top-color: var(--clr-primary);
  border-radius: var(--r-full);
  animation: spin 0.8s linear infinite;
}

/* ── 26. NOTIFICATIONS ────────────────────────────────────── */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--clr-danger), #c82020);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(239, 68, 68, .4), 0 0 0 2px var(--clr-surface);
}

/* Work order start-time alarm — keeps pulsing on the notification bell
   until the user opens that specific notification (stopNotificationAlarm
   in app.js), unlike a normal unread badge which is static. */
.notif-badge--alarm {
  animation: notifAlarmPulse 1s ease-in-out infinite;
}
@keyframes notifAlarmPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(239, 68, 68, .4), 0 0 0 2px var(--clr-surface); }
  50% { transform: scale(1.35); box-shadow: 0 2px 14px rgba(239, 68, 68, .8), 0 0 0 4px var(--clr-surface); }
}

.notif-banner {
  /* Was position: static, sitting in normal flow as the first child of
     <body> ahead of every .screen. Every .screen is position: absolute,
     and CSS paints positioned boxes after in-flow ones within the same
     stacking context regardless of z-index — so every screen (and the
     os-shell's own fixed header/taskbar) silently painted over this bar
     no matter how high its z-index was set. Taken out of flow here with
     its own fixed position, it now stacks on its own terms instead of
     losing by default.
     z-index above the taskbar/AI dock/gadget sidebar (~4000) and the
     splash screen (9000), but below real modal overlays (5000+) and the
     app's true full-screen gates (offline, PWA install, 9999-10050) —
     a dismissible nudge should never block those. */
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 4900;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  padding-top: calc(var(--sp-sm) + env(safe-area-inset-top, 0px));
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border-bottom: 1.5px solid var(--clr-border);
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.notif-banner.hidden { display: none; }

.notif-banner span {
  flex: 1;
}

.notif-banner button {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--r-full);
}

.notif-banner #btn-notif-allow {
  background: var(--clr-primary);
  color: #fff;
}

.notif-banner #btn-notif-dismiss {
  color: var(--clr-text-muted);
  background: none;
  font-size: 18px;
  line-height: 1;
}

.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 200;
}

.notif-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: linear-gradient(180deg, rgba(19, 29, 37, .98), rgba(10, 18, 34, .98));
  border-top: 2px solid var(--clr-border-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .6);
}

.notif-drawer-handle {
  width: 36px;
  height: 4px;
  background: var(--clr-border-2);
  border-radius: var(--r-full);
  margin: 10px auto 0;
  flex-shrink: 0;
}

.notif-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-md) var(--sp-md) var(--sp-xs);
  flex-shrink: 0;
}

.notif-drawer-header h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-text);
}

.notif-drawer-header small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.notif-drawer-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.notif-drawer-subtitle {
  font-size: var(--fs-xs);
  color: #9cb6d5;
  padding: 0 var(--sp-md) var(--sp-sm);
  flex-shrink: 0;
  line-height: 1.65;
}

.notif-list {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-xs) var(--sp-sm);
}

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: 60px 40px;
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.notif-empty svg {
  width: 64px;
  height: 64px;
  opacity: .25;
  color: var(--clr-text-muted);
}

.notif-empty strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text-sub);
}

.notif-empty span {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.notif-item {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  background: var(--clr-surface-2);
  margin-bottom: var(--sp-xs);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  position: relative;
  align-items: flex-start;
}

.notif-item:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}

.notif-item.unread {
  border-left: 3px solid var(--clr-primary);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .2), 0 0 0 1px rgba(182, 58, 49, .1);
  background: rgba(182, 58, 49, .05);
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--clr-primary);
  box-shadow: 0 0 6px rgba(182, 58, 49, .6);
}

.notif-item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--clr-border);
  color: #e8eef5;
  font-size: 18px;
  font-weight: 800;
}

.notif-item-icon svg {
  width: 20px;
  height: 20px;
  color: var(--clr-primary);
}

.notif-item.notif-success .notif-item-icon {
  background: linear-gradient(135deg, rgba(34, 197, 94, .15), rgba(34, 197, 94, .08));
  border-color: rgba(34, 197, 94, .3);
}

.notif-item.notif-success .notif-item-icon svg {
  color: var(--clr-success);
}

.notif-item.notif-warning .notif-item-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(245, 158, 11, .08));
  border-color: rgba(245, 158, 11, .3);
}

.notif-item.notif-warning .notif-item-icon svg {
  color: var(--clr-warn);
}

.notif-item.notif-danger .notif-item-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, .15), rgba(239, 68, 68, .08));
  border-color: rgba(239, 68, 68, .3);
}

.notif-item.notif-danger .notif-item-icon svg {
  color: var(--clr-danger);
}

.notif-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.notif-item-title {
  font-size: 15px;
  font-weight: 700;
  color: #e8eef5;
  line-height: 1.4;
}

.notif-item-body-text {
  font-size: 13px;
  color: #b6c9e0;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notif-item-meta {
  font-size: 12px;
  color: #7f98b7;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.notif-item-meta svg {
  width: 12px;
  height: 12px;
  opacity: .6;
}

/* Notification UX refresh (kept specific to override generic card styles) */
body .notif-drawer {
  overflow: hidden;
}

body .notif-drawer .notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

body .notif-drawer .notif-item {
  width: 100%;
  margin: 0;
  text-align: left;
  min-height: 84px;
}

body .notif-drawer .notif-item-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  margin-top: 10px;
  flex-shrink: 0;
  background: rgba(180, 140, 130, .40);
}

body .notif-drawer .notif-item-dot.live {
  background: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .16);
}

body .notif-drawer .notif-drawer-subtitle {
  padding: 0 var(--sp-md) 10px;
  border-bottom: 1px solid rgba(180, 80, 70, .16);
  margin-bottom: 4px;
}

@media (min-width: 992px) {
  body .notif-backdrop {
    background: rgba(3, 7, 15, .45);
  }

  body .notif-drawer {
    top: 14px;
    bottom: 14px;
    left: auto;
    right: 14px;
    width: min(460px, calc(100vw - 28px));
    max-height: none;
    border-radius: 22px;
    border-top-width: 1px;
  }

  body .notif-drawer .notif-drawer-handle {
    display: none;
  }

  body .notif-drawer .notif-list {
    width: auto;
    margin: 0;
  }
}

/* ── 27. PWA BANNERS ──────────────────────────────────────── */
.network-status {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 8px var(--sp-md);
  background: linear-gradient(135deg, #1a1a2e, #0f0f1e);
  border-bottom: 1.5px solid var(--clr-border);
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  z-index: 6000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.network-status.online {
  background: linear-gradient(135deg, #052e16, #022418);
  color: #4ade80;
}

.network-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--clr-danger);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(239, 68, 68, .6);
}

.network-status.online .network-dot {
  background: var(--clr-success);
  box-shadow: 0 0 8px rgba(34, 197, 94, .6);
}

/* Now embedded as a static card inside Settings (Tools screen), not a
   fixed top bar. */
.net-mini-hud {
  position: relative;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: auto;
  padding: 14px 16px;
  background: rgba(4, 12, 31, 0.92);
  border: 1px solid rgba(180, 80, 70, .16);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.net-mini-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1.5px;
  background: transparent;
  overflow: hidden;
}

.net-mini-progress::before {
  content: '';
  position: absolute;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #60a5fa, #34d399, transparent);
  opacity: 0;
}

.net-mini-hud.loading .net-mini-progress::before {
  opacity: 0.95;
  animation: netHudLoad 1s linear infinite;
}

@keyframes netHudLoad {
  0% {
    left: -40%;
  }

  100% {
    left: 100%;
  }
}

.net-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(180, 80, 70, .22);
  background: rgba(7, 17, 42, 0.56);
  color: #d9e3f5;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.net-chip svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.net-chip.online-ok {
  border-color: rgba(34, 197, 94, 0.45);
  color: #a7f3bf;
}

.net-chip.online-bad {
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

.net-chip.vpn-on {
  border-color: rgba(245, 158, 11, 0.5);
  color: #fcd34d;
}

.net-chip.vpn-off {
  border-color: rgba(56, 189, 248, 0.45);
  color: #bae6fd;
}

@media (max-width: 768px) {
  .net-mini-hud {
    padding: 12px;
    gap: 6px;
  }

  .net-chip {
    padding: 5px 9px;
    font-size: 11px;
  }
}

/* Compact network status badge shown in the nav (sidebar + mobile menu),
   linking through to the full status panel in Settings. */
.nav-net-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(228, 235, 241, .75);
  background: var(--surface, #fff);
  color: var(--ink, #1a1a2e);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.nav-net-badge:hover {
  background: var(--surface-blue, #edf4fa);
}

.nav-net-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--clr-danger, #ef4444);
  box-shadow: 0 0 6px rgba(239, 68, 68, .5);
  flex-shrink: 0;
}

.nav-net-badge__dot.is-online {
  background: var(--clr-success, #22c55e);
  box-shadow: 0 0 6px rgba(34, 197, 94, .5);
}

.nav-net-badge__text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft, #6b7280);
  font-weight: 500;
}

/* Full-screen install gate — replaces the old dismissible top banner
   (which was landing behind fixed OS-shell elements after that redesign).
   z-index deliberately clears os-shell.css's highest layer (4500) so it
   can never end up behind the taskbar/Start menu/splash. */
.pwa-install-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--navy-dark, #0f2438), var(--navy, #16324f));
}
.pwa-install-gate__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pwa-install-gate__icon {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  margin-bottom: 18px;
}
.pwa-install-gate__title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}
.pwa-install-gate__subtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
  line-height: 1.5;
  margin: 0 0 22px;
}
.pwa-install-gate__benefits {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  text-align: left;
}
.pwa-install-gate__benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 10px 14px;
}
.pwa-install-gate__benefits li svg {
  flex-shrink: 0;
  color: #34d399;
}
.pwa-install-gate__install {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-full, 999px);
}
.pwa-install-gate__skip {
  margin-top: 14px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
  cursor: pointer;
}
.pwa-install-gate__skip:hover { color: #fff; }

@media (max-width: 480px) {
  .pwa-install-gate__icon { width: 72px; height: 72px; }
  .pwa-install-gate__title { font-size: 19px; }
}

.pwa-install-action {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dk));
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(182, 58, 49, .3);
}

.pwa-install-action:hover {
  background: linear-gradient(135deg, var(--clr-primary-dk), #6b1e18);
  box-shadow: 0 4px 12px rgba(182, 58, 49, .4);
}

.pwa-install-dismiss {
  color: var(--clr-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.pwa-install-dismiss svg {
  width: 16px;
  height: 16px;
}

/* App-update prompt — a centered modal popup (not a thin top strip) so
   it's impossible to miss: a new version is ready and worth stopping
   for, unlike routine toasts. Always centered regardless of screen
   size, unlike the bottom-sheet .modal-overlay pattern used elsewhere. */
.pwa-update-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-md, 16px);
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  animation: pwaUpdateFadeIn .2s ease;
}
.pwa-update-overlay.hidden { display: none; }
.pwa-update-dialog {
  width: 100%;
  max-width: 360px;
  background: var(--clr-surface, #fff);
  border-radius: var(--r-xl, 18px);
  padding: 28px 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: pwaUpdatePopIn .25s cubic-bezier(.34, 1.56, .64, 1);
}
.pwa-update-dialog__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-primary-soft, rgba(255, 107, 87, .12));
  color: var(--clr-primary, #ff6b57);
}
.pwa-update-dialog__icon svg { width: 26px; height: 26px; }
.pwa-update-dialog h3 {
  margin: 0 0 6px;
  font-size: var(--fs-lg, 18px);
  font-weight: 800;
  color: var(--clr-text, #16324f);
}
.pwa-update-dialog p {
  margin: 0 0 20px;
  font-size: var(--fs-sm, 13.5px);
  color: var(--clr-text-sub, #6b7c8c);
}
.pwa-update-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pwa-update-dialog__actions .btn { width: 100%; }
@keyframes pwaUpdateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwaUpdatePopIn {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 27.5. EXPORT/IMPORT MODALS ───────────────────────────── */
.export-section,
.import-section,
.qr-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.export-section-title,
.import-section-title,
.qr-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-xs);
}

.export-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.export-option-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.export-option-item:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.export-option-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-primary);
}

.export-option-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--clr-border);
}

.export-option-icon svg {
  width: 20px;
  height: 20px;
  color: var(--clr-primary);
}

.export-option-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-option-copy strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.export-option-copy small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.export-format-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.export-format-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.export-format-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.export-format-radio input:checked+.export-format-card {
  background: rgba(182, 58, 49, .1);
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15), 0 2px 8px rgba(0, 0, 0, .2);
}

.export-format-card:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.export-format-card svg {
  width: 32px;
  height: 32px;
  color: var(--clr-primary);
}

.export-format-card strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.export-format-card small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Import Styles */
.import-file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  padding: var(--sp-xl) var(--sp-md);
  background: var(--clr-surface-2);
  border: 2px dashed var(--clr-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  text-align: center;
}

.import-file-drop:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
}

.import-file-drop.drag-over {
  background: rgba(182, 58, 49, .1);
  border-color: var(--clr-primary);
}

.import-file-drop svg {
  width: 40px;
  height: 40px;
  color: var(--clr-text-muted);
}

.import-file-drop strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.import-file-drop small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.import-file-info {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(182, 58, 49, .08);
  border: 1.5px solid rgba(182, 58, 49, .2);
  border-radius: var(--r-md);
  margin-top: var(--sp-xs);
}

.import-file-info svg {
  width: 32px;
  height: 32px;
  color: var(--clr-primary);
  flex-shrink: 0;
}

.import-file-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.import-file-info-text strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.import-file-info-text small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.import-duplicate-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.import-duplicate-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.import-duplicate-item:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.import-duplicate-item input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-primary);
}

.import-duplicate-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid;
}

.import-duplicate-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.import-duplicate-copy strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.import-duplicate-copy small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.import-progress {
  padding: var(--sp-md);
  background: var(--clr-surface-2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
}

.import-progress p {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  margin-top: var(--sp-xs);
  text-align: center;
}

.import-result {
  padding: var(--sp-md);
  background: rgba(34, 197, 94, .1);
  border: 1.5px solid rgba(34, 197, 94, .3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.import-result.error {
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .3);
}

/* QR Print Styles */
.qr-size-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-sm);
}

.qr-size-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.qr-size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-md) var(--sp-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.qr-size-radio input:checked+.qr-size-card {
  background: rgba(182, 58, 49, .1);
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15), 0 2px 8px rgba(0, 0, 0, .2);
}

.qr-size-card:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.qr-size-preview {
  background: linear-gradient(135deg, var(--clr-surface-3), var(--clr-surface));
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-xs);
}

.qr-size-card strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.qr-size-card small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.qr-checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  cursor: pointer;
  border-radius: var(--r-sm);
}

.qr-checkbox-option:hover {
  background: var(--clr-surface-2);
}

.qr-checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-primary);
}

.qr-checkbox-option span {
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.form-select,
.form-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text);
  font-size: var(--fs-sm);
  outline: none;
  direction: ltr;
  text-align: left;
}

.form-select:focus,
.form-input:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .15);
}

/* ── 28. PROFILE SCREEN ───────────────────────────────────── */
.profile-container {
  gap: var(--sp-md);
}

.profile-hero {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.profile-hero-main {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.profile-avatar-wrap {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: var(--r-full);
  overflow: hidden;
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border: 2px solid var(--clr-border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  position: relative;
}

.profile-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--r-full);
  padding: 2px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .4;
}

.profile-avatar {
  width: 68px;
  height: 68px;
  object-fit: cover;
}

.profile-avatar-fallback {
  font-size: 24px;
  font-weight: 700;
  color: var(--clr-text-sub);
}

.profile-avatar-wrap {
  overflow: visible;
}

.profile-avatar-edit-btn {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid var(--surface, #fff);
  background: var(--coral, #ff6b57);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.profile-gender-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--clr-text-muted, var(--ink-muted));
}

.profile-gender-inline select {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--clr-border, var(--line));
  background: var(--bg-surface, var(--surface));
  color: var(--clr-text, var(--ink));
}

.profile-main-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-main-info h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-text);
}

.profile-main-info p {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
}

.profile-main-email {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.profile-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.profile-chip {
  flex: 1;
  min-width: 120px;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.profile-chip label {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.profile-chip strong {
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.profile-grid-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}

.profile-meta-list {
  display: flex;
  flex-direction: column;
}

.profile-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--sp-md);
  border-bottom: 1.5px solid var(--clr-border);
  gap: var(--sp-md);
}

.profile-meta-item:last-child {
  border-bottom: none;
}

.profile-meta-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.profile-meta-value {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  text-align: right;
}

.profile-security-ok {
  color: var(--clr-success);
}

.profile-password-form {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.profile-version-row {
  padding: var(--sp-sm) 0;
  text-align: center;
}

.app-version-label {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.profile-admin-card {
  margin-top: var(--sp-sm);
}

/* Theme selector */
.profile-theme-btn-row {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
}

.profile-theme-btn-row select {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  font-size: var(--fs-md);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ── 29. ATTENDANCE ───────────────────────────────────────── */
.att-header-strip {
  background: var(--clr-surface);
  border-bottom: 1.5px solid var(--clr-border);
  padding: var(--sp-md);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.att-clock-card {
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-xl);
  padding: var(--sp-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.att-time-display {
  font-size: 40px;
  font-weight: 700;
  color: var(--clr-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.att-date-display {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
}

.att-clock-actions {
  display: flex;
  gap: var(--sp-sm);
  width: 100%;
  max-width: 320px;
}

.att-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.att-status-pill.in {
  background: rgba(34, 197, 94, .12);
  color: var(--clr-success);
  box-shadow: 0 2px 8px rgba(34, 197, 94, .3);
}

.att-status-pill.out {
  background: rgba(239, 68, 68, .12);
  color: var(--clr-danger);
  box-shadow: 0 2px 8px rgba(239, 68, 68, .3);
}

.att-history-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-sm);
}

.att-record-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-xs);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.att-record-date {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.att-record-meta {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}

.att-record-hours {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  font-weight: 600;
}

/* ── 30. WAREHOUSE / TOOLS ────────────────────────────────── */
.tools-menu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md);
}

.tools-section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-text-muted);
  margin-top: var(--sp-sm);
  padding: 0 var(--sp-xs);
}

.tool-card {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.tool-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--clr-primary), var(--clr-accent));
  opacity: 0;
}

.tool-card:hover {
  background: var(--clr-surface-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  transform: translateX(4px);
}

.tool-card:hover::before {
  opacity: 1;
}

.tool-card:active {
  background: var(--clr-surface-3);
  transform: translateX(2px) translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.tool-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .2);
}

.tool-card-icon svg {
  color: var(--clr-primary);
  width: 24px;
  height: 24px;
}

.tool-card-icon--green {
  background: linear-gradient(135deg, rgba(34, 197, 94, .08), rgba(34, 197, 94, .15));
  border-color: rgba(34, 197, 94, .25);
  box-shadow: 0 2px 8px rgba(34, 197, 94, .2);
}

.tool-card-icon--green svg {
  color: var(--clr-success);
}

.tool-card-icon--blue {
  background: linear-gradient(135deg, rgba(182, 58, 49, .08), rgba(182, 58, 49, .15));
  border-color: rgba(182, 58, 49, .25);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .2);
}

.tool-card-icon--blue svg {
  color: var(--clr-primary);
}

.tool-card-icon--amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, .08), rgba(245, 158, 11, .15));
  border-color: rgba(245, 158, 11, .25);
  box-shadow: 0 2px 8px rgba(245, 158, 11, .2);
}

.tool-card-icon--amber svg {
  color: var(--clr-warn);
}

.tool-card-icon--red {
  background: linear-gradient(135deg, rgba(239, 68, 68, .08), rgba(239, 68, 68, .15));
  border-color: rgba(239, 68, 68, .25);
  box-shadow: 0 2px 8px rgba(239, 68, 68, .2);
}

.tool-card-icon--red svg {
  color: var(--clr-danger);
}

.tool-card-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool-card-copy strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text);
}

.tool-card-copy small {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  line-height: 1.4;
}

.tool-card-arrow {
  width: 20px;
  height: 20px;
  color: var(--clr-text-muted);
  flex-shrink: 0;
  opacity: .5;
}

.tool-card:hover .tool-card-arrow {
  opacity: 1;
  color: var(--clr-primary);
}

/* ─── Roles & Permissions (Admin only) ──────────────────── */
.rp-tabs {
  display: flex;
  gap: var(--sp-xs);
  margin-bottom: var(--sp-md);
  border-bottom: 1.5px solid var(--clr-border);
}

.rp-tab {
  background: none;
  border: none;
  padding: var(--sp-sm) var(--sp-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.rp-tab.active {
  color: var(--clr-primary);
  border-bottom-color: var(--clr-primary);
}

.rp-panel.hidden {
  display: none;
}

.rp-empty {
  padding: var(--sp-lg);
  text-align: center;
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}

.rp-user-block {
  border-bottom: 1px solid var(--clr-border);
}

.rp-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-xs);
}

.rp-status-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.rp-status-active {
  background: rgba(34, 197, 94, .15);
  color: var(--clr-success);
}

.rp-status-inactive {
  background: rgba(239, 68, 68, .15);
  color: var(--clr-danger);
}

.rp-edit-btn {
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  flex-shrink: 0;
}

.rp-user-edit {
  padding: var(--sp-sm) var(--sp-xs) var(--sp-md);
}

.rp-user-edit.hidden {
  display: none;
}

.rp-user-edit .rp-edit-name,
.rp-user-edit .rp-edit-email,
.rp-user-edit .rp-edit-password {
  width: 100%;
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  color: var(--clr-text);
  font-size: var(--fs-sm);
}

.rp-user-edit .btn {
  margin-top: var(--sp-xs);
}

.rp-user-perms {
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1.5px dashed var(--clr-border);
}

.rp-user-perms.hidden {
  display: none;
}

.rp-perm-note {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin: 0 0 var(--sp-sm);
}

.rp-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rp-user-info strong {
  font-size: var(--fs-sm);
}

.rp-user-info small {
  color: var(--clr-text-muted);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-role-select,
.rp-perm-select {
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 6px 10px;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  flex-shrink: 0;
}

.rp-role-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.rp-group {
  margin-bottom: var(--sp-lg);
}

.rp-group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-xs);
}

.rp-perm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--clr-border);
}

.rp-perm-name {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
}

/* ─── Dashboard ──────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.dash-stat-card {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  position: relative;
}

.dash-stat-card .tool-card-arrow {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
}

.dash-stat-value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--clr-text);
}

.dash-stat-sub {
  color: var(--clr-text-muted);
}

.dash-status-bars,
.dash-notif-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
}

.dash-status-row,
.dash-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-xs) 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: var(--fs-sm);
}

.dash-status-row:last-child,
.dash-notif-row:last-child {
  border-bottom: none;
}

.dash-status-count {
  font-weight: 700;
  color: var(--clr-primary);
}

.dash-notif-row small {
  color: var(--clr-text-muted);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Warehouse: Product Cards ──────────────────────────── */
.wh-product-card {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  margin-bottom: var(--sp-sm);
}

.wh-product-card:hover {
  background: var(--clr-surface-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

.wh-product-card:active {
  background: var(--clr-surface-3);
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.wh-product-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.wh-product-card__icon-wrap svg {
  color: var(--clr-primary);
}

.wh-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wh-product-card__name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.wh-sku {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  font-family: 'Courier New', monospace;
  background: var(--clr-surface-2);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--clr-border);
}

.wh-product-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.wh-price-main {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
}

.wh-price-cost {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  white-space: nowrap;
}

.wh-product-card__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── Warehouse: Invoice Cards ──────────────────────────── */
.wh-invoice-card {
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  margin-bottom: var(--sp-sm);
}

.wh-invoice-card:hover {
  background: var(--clr-surface-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transform: translateY(-2px);
}

.wh-invoice-card:active {
  background: var(--clr-surface-3);
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.wh-invoice-card__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wh-invoice-card__number {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-text);
  font-family: 'Courier New', monospace;
}

.wh-invoice-card__meta {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wh-invoice-card__dates {
  display: flex;
  gap: var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.wh-invoice-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.wh-invoice-card__total {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--clr-primary);
  white-space: nowrap;
}

.wh-invoice-card__total small {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--clr-text-muted);
}

/* ─── Tag Chips ─────────────────────────────────────────── */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--clr-surface-3);
  color: var(--clr-text-muted);
  border: 1px solid var(--clr-border);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}

.tag-chip--success {
  background: rgba(34, 197, 94, .12);
  color: var(--clr-success);
  border-color: rgba(34, 197, 94, .25);
}

.tag-chip--danger {
  background: rgba(239, 68, 68, .12);
  color: var(--clr-danger);
  border-color: rgba(239, 68, 68, .25);
}

.tag-chip--warn {
  background: rgba(245, 158, 11, .12);
  color: var(--clr-warn);
  border-color: rgba(245, 158, 11, .25);
}

.tag-chip--info {
  background: rgba(182, 58, 49, .12);
  color: var(--clr-accent);
  border-color: rgba(182, 58, 49, .25);
}

.tag-chip--neutral {
  background: var(--clr-surface-2);
  color: var(--clr-text-sub);
  border-color: var(--clr-border);
}

/* ── 31. TASK FORM CONTEXT ────────────────────────────────── */
.task-form-context {
  padding: var(--sp-sm);
}

.task-form-context .detail-grid {
  gap: 1px;
}

/* ── 32. EQUIPMENT FORM ───────────────────────────────────── */
.cmms-section {
  border-top: 1px solid var(--clr-border);
  padding-top: var(--sp-md);
}

.cmms-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.cmms-toggle-row:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.cmms-toggle-row label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
  cursor: pointer;
}

/* \u2500\u2500 32.5. UTILITY CLASSES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
\n.price-highlight {
  \n font-size: var(--fs-lg);
  \n font-weight: 700;
  \n color: var(--clr-primary);
  \n text-shadow: 0 1px 2px rgba(182, 58, 49, .15);
  \n
}

\n\n.full {
  grid-column: 1 / -1;
}

\n\n.hidden {
  display: none !important;
}

\n\n

/* -- 33. (removed) Dark theme variants -- dead code: no reachable UI
   ever set [data-theme], confirmed by repo-wide grep. Single canonical
   light theme lives in rebrand.css. -- */

/* ── 34. RESPONSIVE ───────────────────────────────────────── */
/* Mobile-first: small screens */
@media (max-width: 479px) {

  /* Warehouse filter bar — stack on mobile */
  #wh-panel-products .pg-filter-bar .search-box,
  #wh-panel-invoices .pg-filter-bar .search-box {
    flex: 1 1 100%;
    order: 0;
  }

  #wh-panel-products .pg-filter-bar .filter-select,
  #wh-panel-invoices .pg-filter-bar .filter-select {
    flex: 1 1 calc(50% - 4px);
    max-width: none !important;
    min-width: 0;
  }

  /* Print screen — compact on mobile */
  .print-container {
    padding: var(--sp-sm);
    gap: var(--sp-sm);
  }

  .print-card-body {
    padding: var(--sp-sm);
  }

  .print-section {
    padding: var(--sp-sm);
  }

  .print-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    padding: 8px;
  }

  .print-preview-card {
    padding: 8px;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 480px) {
  .detail-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .member-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }

  .profile-grid-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  :root {
    --nav-h: 64px;
  }

  .bottom-nav {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border: 1.5px solid var(--clr-border);
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .4);
  }

  /* .detail-actions is now in normal flow – no centering override needed */
  .modal-sheet {
    border-radius: var(--r-xl);
    max-height: 85vh;
  }

  .modal-overlay {
    align-items: center;
    padding: var(--sp-md);
  }
}

/* ── 35. SAFE AREA / NOTCH ────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  }

  .toast {
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  }

  #screen-main,
  #screen-projects,
  #screen-all-tasks,
  #screen-attendance,
  #screen-profile,
  #screen-cmms-ai,
  #screen-warehouse,
  #screen-quotations,
  #screen-support {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  }

  /* .detail-actions is now in normal flow – no safe-area bottom offset needed */
}

/* ── 36. SCROLLBARS ───────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--clr-border-2) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--clr-border-2);
  border-radius: var(--r-full);
  border: 1px solid var(--clr-surface);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--clr-primary);
}

/* ── 37. FOCUS OUTLINES ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--clr-primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* ── 38. SELECTION ─────────────────────────────────────────── */
::selection {
  background: rgba(182, 58, 49, .25);
  color: var(--clr-text);
}

::-moz-selection {
  background: rgba(182, 58, 49, .25);
  color: var(--clr-text);
}

/* ── 39. EXPORT/IMPORT/QR MODALS ──────────────────────────── */
/* Export Section */
.export-section {
  margin-bottom: var(--sp-md);
}

.export-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--clr-text-sub);
  margin-bottom: var(--sp-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}

.export-section-title svg {
  width: 14px;
  height: 14px;
  opacity: .7;
}

/* Export Options */
.export-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.export-option-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.export-option-item:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .15);
}

.export-option-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
}

.export-option-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(182, 58, 49, .15), rgba(182, 58, 49, .08));
  border: 1.5px solid rgba(182, 58, 49, .2);
}

.export-option-icon svg {
  width: 18px;
  height: 18px;
  color: var(--clr-primary);
}

.export-option-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-option-label strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.export-option-label span {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Export Filters */
.export-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* Export Format Options */
.export-format-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}

.export-format-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  cursor: pointer;
}

.export-format-card:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
}

.export-format-card input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-primary);
}

.export-format-card input[type="radio"]:checked~.export-format-label {
  color: var(--clr-primary);
  font-weight: 600;
}

.export-format-card:has(input:checked) {
  border-color: var(--clr-primary);
  background: rgba(182, 58, 49, .08);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .12);
}

.export-format-label {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  font-weight: 500;
}

/* Import File Drop Zone */
.import-file-drop {
  border: 2px dashed var(--clr-border);
  border-radius: var(--r-md);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  background: var(--clr-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
}

.import-file-drop:hover {
  border-color: var(--clr-primary);
  background: rgba(182, 58, 49, .03);
}

.import-file-drop.drag-over {
  border-color: var(--clr-primary);
  background: rgba(182, 58, 49, .08);
  box-shadow: 0 0 0 4px rgba(182, 58, 49, .12);
}

.import-file-drop svg {
  width: 48px;
  height: 48px;
  color: var(--clr-primary);
  opacity: .6;
}

.import-file-drop p {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  margin: 0;
}

.import-file-drop small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Import File Info */
.import-file-info {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
}

.import-file-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(182, 58, 49, .15), rgba(182, 58, 49, .08));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.import-file-icon svg {
  width: 20px;
  height: 20px;
  color: var(--clr-primary);
}

.import-file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.import-file-details strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-file-details small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

/* Import Duplicate Options */
.import-duplicate-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.import-duplicate-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  cursor: pointer;
  position: relative;
}

.import-duplicate-item:hover {
  background: var(--clr-surface-3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.import-duplicate-item input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
}

.import-duplicate-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid;
}

.import-duplicate-item:nth-child(1) .import-duplicate-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, .06));
  border-color: rgba(245, 158, 11, .25);
  color: var(--clr-warn);
}

.import-duplicate-item:nth-child(2) .import-duplicate-icon {
  background: linear-gradient(135deg, rgba(182, 58, 49, .12), rgba(182, 58, 49, .06));
  border-color: rgba(182, 58, 49, .25);
  color: var(--clr-primary);
}

.import-duplicate-item:nth-child(3) .import-duplicate-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, .12), rgba(239, 68, 68, .06));
  border-color: rgba(239, 68, 68, .25);
  color: var(--clr-danger);
}

.import-duplicate-icon svg {
  width: 16px;
  height: 16px;
}

.import-duplicate-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.import-duplicate-label strong {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
}

.import-duplicate-label span {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  line-height: 1.3;
}

/* Import Progress */
.import-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
}

.import-progress-bar-wrap {
  height: 6px;
  background: var(--clr-surface);
  border-radius: var(--r-full);
  overflow: hidden;
  border: 1px solid var(--clr-border);
}

.import-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
  border-radius: var(--r-full);
  width: 0%;
  transition: width 0.3s ease;
}

.import-status {
  font-size: var(--fs-xs);
  color: var(--clr-text-sub);
  text-align: center;
}

/* Import Result */
.import-result {
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: rgba(34, 197, 94, .08);
  border-color: rgba(34, 197, 94, .3);
  font-size: var(--fs-sm);
  color: var(--clr-text);
}

.import-result.error {
  background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .3);
}

/* QR Size Options */
.qr-size-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
}

.qr-size-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  cursor: pointer;
}

.qr-size-card:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
}

.qr-size-card:has(input:checked) {
  border-color: var(--clr-primary);
  background: rgba(182, 58, 49, .08);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .12);
}

.qr-size-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--clr-surface);
  border: 1.5px solid var(--clr-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-size-preview::before {
  content: '';
  width: 40%;
  height: 40%;
  background: var(--clr-text-muted);
  opacity: .3;
}

.qr-size-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.qr-size-card label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--clr-text-sub);
  cursor: pointer;
}

.qr-size-card:has(input:checked) label {
  color: var(--clr-primary);
}

/* QR Include Options */
.qr-include-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}

.qr-checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.qr-checkbox-option:hover {
  background: var(--clr-surface-2);
}

.qr-checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--clr-primary);
}

.qr-checkbox-option label {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  cursor: pointer;
}

/* QR Equipment List */
.qr-equipment-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: var(--sp-xs);
  background: var(--clr-surface);
}

/* Error Message */
.error-message {
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: rgba(239, 68, 68, .08);
  border: 1.5px solid rgba(239, 68, 68, .3);
  color: var(--clr-danger);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}

.error-message svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── 39. QR SCANNER SCREEN ────────────────────────────────── */
#screen-qr-scanner {
  background: var(--clr-bg);
}

.scanner-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md);
  max-width: 600px;
  margin: 0 auto;
}

/* Scanner Card */
.scanner-card {
  background: var(--clr-surface);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--clr-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  overflow: hidden;
}

.scanner-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: linear-gradient(135deg, var(--clr-surface-2), var(--clr-surface-3));
  border-bottom: 1.5px solid var(--clr-border);
}

.scanner-card-header svg {
  flex-shrink: 0;
  color: var(--clr-primary);
}

.scanner-card-header h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-text);
  margin: 0 0 4px 0;
}

.scanner-card-header p {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Scanner Preview */
.scanner-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scanner-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-preview canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Scanner Overlay */
.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  z-index: 2;
  pointer-events: none;
}

.scanner-frame {
  position: relative;
  width: 240px;
  height: 240px;
  border-radius: var(--r-md);
}

.scanner-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid var(--clr-primary);
  box-shadow: 0 0 16px rgba(182, 58, 49, .6);
}

.scanner-corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: var(--r-md);
}

.scanner-corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: var(--r-md);
}

.scanner-corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: var(--r-md);
}

.scanner-corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: var(--r-md);
}

.scanner-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--clr-primary), transparent);
  animation: scanner-sweep 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(182, 58, 49, .8);
}

@keyframes scanner-sweep {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }

  50% {
    transform: translateY(240px);
    opacity: 1;
  }
}

.scanner-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-xs) var(--sp-md);
  background: rgba(0, 0, 0, .8);
  border-radius: var(--r-full);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(182, 58, 49, .3);
}

.scanner-hint svg {
  color: var(--clr-primary);
  flex-shrink: 0;
}

/* Scanner Inactive State */
.scanner-inactive {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  background: linear-gradient(135deg, var(--clr-surface), var(--clr-surface-2));
  z-index: 1;
}

.scanner-inactive-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(182, 58, 49, .15), rgba(182, 58, 49, .08));
  border: 1.5px solid rgba(182, 58, 49, .25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scanner-inactive-icon svg {
  width: 40px;
  height: 40px;
  color: var(--clr-primary);
}

.scanner-inactive h4 {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text);
  margin: 0;
}

.scanner-inactive p {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin: 0;
  text-align: center;
  max-width: 240px;
}

/* Scanner Success State */
.scanner-success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  background: linear-gradient(135deg, rgba(34, 197, 94, .12), rgba(34, 197, 94, .08));
  z-index: 3;
  animation: scanner-success-fade 0.3s ease;
}

@keyframes scanner-success-fade {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scanner-success-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-success), #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(34, 197, 94, .4);
}

.scanner-success-icon svg {
  width: 40px;
  height: 40px;
  color: #fff;
}

.scanner-success h4 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-success);
  margin: 0;
}

.scanner-success p {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  margin: 0;
  text-align: center;
  max-width: 280px;
}

/* Scanner Controls */
.scanner-controls {
  padding: var(--sp-md);
  display: flex;
  gap: var(--sp-sm);
}

/* Scanner Search Form */
.scanner-search-form {
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap svg {
  position: absolute;
  left: var(--sp-sm);
  color: var(--clr-text-muted);
  pointer-events: none;
}

.search-input-wrap .form-input {
  padding-left: 40px;
}

/* Scanner Results */
.scanner-results {
  border-top: 1.5px solid var(--clr-border);
  padding: var(--sp-md);
}

.scanner-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text-sub);
}

.scanner-results-count {
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(182, 58, 49, .3);
}

.scanner-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  max-height: 300px;
  overflow-y: auto;
}

.scanner-result-item {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.scanner-result-item:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .15);
  transform: translateY(-1px);
}

.scanner-result-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(182, 58, 49, .15), rgba(182, 58, 49, .08));
  border: 1.5px solid rgba(182, 58, 49, .25);
}

.scanner-result-icon svg {
  width: 20px;
  height: 20px;
  color: var(--clr-primary);
}

.scanner-result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.scanner-result-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scanner-result-meta {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 40. BARCODE PRINT SCREEN ─────────────────────────────── */
#screen-barcode-print {
  background: var(--clr-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: stretch;
}

/* Barcode Inline Note */
.bc-inline-note {
  grid-column: 1 / -1;
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: rgba(182, 58, 49, .08);
  border: 1.5px solid rgba(182, 58, 49, .25);
  font-size: var(--fs-xs);
  color: var(--clr-text-sub);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.bc-inline-note strong {
  color: var(--clr-primary);
  font-weight: 600;
  font-family: 'Courier New', monospace;
  font-size: var(--fs-sm);
}

/* Barcode Item List */
.bc-item-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  max-height: 400px;
  overflow-y: auto;
  padding: var(--sp-xs);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface);
}

.bc-item-card {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  cursor: pointer;
  position: relative;
}

.bc-item-card:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
  box-shadow: 0 2px 8px rgba(182, 58, 49, .15);
  transform: translateY(-1px);
}

.bc-item-card.selected {
  border-color: var(--clr-primary);
  background: rgba(182, 58, 49, .08);
  box-shadow: 0 0 0 2px rgba(182, 58, 49, .15);
}

.bc-item-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--clr-primary);
  flex-shrink: 0;
}

.bc-item-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(182, 58, 49, .15), rgba(182, 58, 49, .08));
  border: 1.5px solid rgba(182, 58, 49, .25);
}

.bc-item-icon svg {
  width: 20px;
  height: 20px;
  color: var(--clr-primary);
}

.bc-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bc-item-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--clr-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.bc-item-code {
  font-family: 'Courier New', monospace;
  background: var(--clr-surface);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  border: 1px solid var(--clr-border);
  color: var(--clr-text-sub);
}

.bc-item-project {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bc-item-project svg {
  width: 12px;
  height: 12px;
  opacity: .6;
}

.bc-item-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.bc-item-status.status-incomplete {
  background: rgba(239, 68, 68, .12);
  color: var(--clr-danger);
  border: 1px solid rgba(239, 68, 68, .25);
}

.bc-item-status.status-complete {
  background: rgba(34, 197, 94, .12);
  color: var(--clr-success);
  border: 1px solid rgba(34, 197, 94, .25);
}

.bc-item-status.status-active {
  background: rgba(182, 58, 49, .12);
  color: var(--clr-primary);
  border: 1px solid rgba(182, 58, 49, .25);
}

/* Barcode Preview Grid */
.bc-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--clr-surface);
  border-radius: var(--r-md);
  border: 1.5px solid var(--clr-border);
}

.bc-preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  position: relative;
}

.bc-preview-qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 150px;
  background: #fff;
}

.bc-preview-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.bc-preview-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #0d1929;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bc-preview-code {
  font-size: var(--fs-xs);
  color: #555;
  font-family: 'Courier New', monospace;
}

.bc-preview-id {
  font-size: 10px;
  color: #999;
  font-weight: 500;
}

/* Barcode Empty State */
.bc-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: 60px 40px;
  text-align: center;
}

.bc-empty-state svg {
  width: 64px;
  height: 64px;
  color: var(--clr-text-muted);
  opacity: .25;
}

.bc-empty-state strong {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--clr-text-sub);
}

.bc-empty-state span {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  max-width: 300px;
}

/* Barcode Count Badge */
#bc-selected-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(182, 58, 49, .3);
  margin-left: auto;
}

/* Barcode Checkbox Labels */
.bc-item-section .form-group label,
#bc-item-section .form-group label {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  font-weight: 500;
  transition: all 0.2s ease;
}

.bc-item-section .form-group label:hover,
#bc-item-section .form-group label:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
  box-shadow: 0 2px 6px rgba(182, 58, 49, .15);
  transform: translateY(-1px);
}

.bc-item-section .form-group label input[type="checkbox"],
#bc-item-section .form-group label input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

/* QR Settings Checkbox Label */
#screen-barcode-print .detail-section .form-group label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0;
}

#screen-barcode-print .detail-section .form-group label:has(input[type="checkbox"]):hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-primary);
  box-shadow: 0 2px 6px rgba(182, 58, 49, .15);
  transform: translateY(-1px);
}

/* Print Preview Adjustments */
@media print {

  #screen-barcode-print .app-header,
  #screen-barcode-print .form-container>.detail-section:not(#bc-preview-section) {
    display: none !important;
  }

  #bc-preview-section {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
  }

  .bc-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80mm, 1fr));
    gap: 3mm;
    padding: 4mm;
    page-break-inside: avoid;
  }

  .bc-preview-card {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}


/* ══════════════════════════════════════════════════════════════
   WAREHOUSE SCREEN — Project cards & Item cards
══════════════════════════════════════════════════════════════ */

/* Project card & Item card — replaced by redesign section below */
/* (legacy rules removed to avoid cascade conflicts) */

/* ─── Warehouse Transaction History Modal ───────────────── */
.modal-sheet-large {
  max-width: 900px;
  width: 95%;
}

.pg-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--clr-text-muted);
}

.pg-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
}

/* ------------------------------------------------------------
   UNIFIED STYLES � Warehouse & Quotations Screens
------------------------------------------------------------ */

/* --- Unified Modal & Form Styling ------------------------ */
#modal-wh-item-form,
#modal-q-form {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.form-fieldset {
  border: none;
  padding: 0 0 16px 0;
  margin: 0 0 16px 0;
  border-bottom: 1px solid var(--clr-border-2);
}

.form-fieldset:last-of-type {
  border-bottom: none;
}

.form-fieldset>legend {
  font-weight: 600;
  font-size: 14px;
  color: var(--clr-text);
  margin-bottom: 12px;
  padding: 0;
}

/* --- Unified Item Row Styling ------------------------- */
.q-item-row,
.ti-item-row {
  animation: slideIn 0.3s ease-in-out;
  background: var(--clr-surface-2);
  padding: 12px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--clr-border);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Unified Totals Box ------------------------------ */
.q-totals-box,
.wh-totals-box {
  background: var(--clr-surface-3);
  border-radius: var(--r-sm);
  padding: 12px;
  margin: 16px 0;
  border: 1px solid var(--clr-border);
}

.q-total-row,
.wh-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: var(--clr-text-sub);
}

.q-total-row strong,
.wh-total-row strong {
  font-weight: 600;
  color: var(--clr-text);
}

.q-total-final,
.wh-total-final {
  border-top: 1px solid var(--clr-border-2);
  padding-top: 12px;
  font-size: 16px;
  color: var(--clr-primary-lt);
}

.q-total-final strong,
.wh-total-final strong {
  color: var(--clr-primary-lt);
  font-size: 18px;
}

/* --- Unified Button Styles -------------------------- */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-weight: 500;
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}

.btn-sm:hover {
  background: var(--clr-surface-3);
  border-color: var(--clr-border-2);
}

.btn-sm.secondary {
  background: var(--clr-surface-2);
  color: var(--clr-text-sub);
}

.btn-sm.secondary:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

/* --- Search Bar Unification -------------------------- */
.pg-filter-bar {
  display: flex;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  background: var(--clr-surface);
  border-radius: var(--r-sm);
}

.search-box {
  display: flex;
  align-items: center;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-sm);
  gap: var(--sp-sm);
}

.search-box svg {
  color: var(--clr-text-muted);
  width: 18px;
  height: 18px;
}

.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--clr-text);
  font-size: 14px;
  padding: var(--sp-sm) 0;
}

.search-box input::placeholder {
  color: var(--clr-text-muted);
}

.search-box input:focus {
  outline: none;
}

/* --- Print Media Styles ------------------------------ */
@media print {
  @page {
    size: auto;
    margin: 10mm;
  }

  html,
  body {
    width: auto !important;
    min-width: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  .app-sidebar,
  .app-sidebar__reopen {
    display: none !important;
  }

  .no-print,
  .pg-tabs,
  .pg-filter-bar,
  .app-header,
  .bottom-nav {
    display: none !important;
  }

  #screen-warehouse,
  #screen-quotations {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    background: #fff !important;
  }

  body.app-shell-sidebar-active,
  body.app-shell-sidebar-active.app-shell-sidebar-collapsed {
    padding-left: 0 !important;
  }

  body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash),
  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .screen:not(#screen-login):not(#screen-splash) {
    padding: 0 !important;
  }

  #screen-quotations,
  #screen-quotations .q-view-shell,
  #screen-quotations #q-view-detail {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .q-detail-content,
  #q-detail-content {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .q-detail-content .quotation-paper,
  #q-detail-content .quotation-paper,
  #q-detail-content .quotation-paper * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .q-detail-content .quotation-paper,
  #q-detail-content .quotation-paper {
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #q-detail-content .quotation-paper table tr,
  #q-detail-content .quotation-paper table td,
  #q-detail-content .quotation-paper table th,
  #q-detail-content .quotation-paper img,
  #q-detail-content .quotation-paper div[style*='background:'] {
    background: #fff !important;
  }

  #q-detail-content .quotation-paper a,
  #q-detail-content .quotation-paper a:visited {
    color: inherit !important;
    text-decoration: none !important;
  }

  #q-detail-content .quotation-paper a[href]::after,
  #q-detail-content .quotation-paper a[href^='mailto:']::after,
  #q-detail-content .quotation-paper a[href^='http']::after {
    content: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   EQUIPMENT QR STICKERS
═══════════════════════════════════════════════════════════ */
.eqs-item-card {
  background: var(--clr-surface-2);
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color .15s;
}

.eqs-item-card.eqs-item--selected {
  border-color: var(--clr-primary-lt);
  background: rgba(182, 58, 49, .06);
}

.eqs-notes-input:focus {
  outline: none;
  border-color: var(--clr-primary-lt) !important;
  box-shadow: 0 0 0 2px rgba(182, 58, 49, .18);
}

#screen-eq-stickers .eqs-form-container {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#screen-eq-stickers .eqs-item-list {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
}

#screen-eq-stickers .eqs-item-top {
  width: 100%;
}

#screen-eq-stickers .eqs-item-name {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#screen-eq-stickers .eqs-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#screen-eq-stickers .eqs-preview-grid {
  max-height: 52vh;
  overflow-y: auto;
  align-content: flex-start;
}

#screen-eq-stickers #eqs-preview-section {
  overflow: visible;
}

#screen-eq-stickers .eqs-action-inner {
  flex-wrap: wrap;
}

#screen-eq-stickers #eqs-selected-count {
  white-space: nowrap;
}

/* ── In-app sticker preview card ── */
.eqs-preview-card {
  width: 200px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #111;
}

.eqs-preview-card {
  max-width: 100%;
}

.eqs-prev-name {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
}

.eqs-prev-sub {
  font-size: 10px;
  color: #555;
  text-align: center;
  word-break: break-word;
}

.eqs-prev-code {
  font-size: 11px;
  font-weight: 700;
  color: #1565c0;
  letter-spacing: .05em;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.eqs-prev-divider {
  width: 100%;
  border: none;
  border-top: 1px dashed #ccc;
  margin: 2px 0;
}

.eqs-prev-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  width: 100%;
}

.eqs-prev-hint {
  font-size: 8px;
  color: #999;
  text-align: center;
  letter-spacing: .04em;
}

.eqs-prev-notes {
  font-size: 10px;
  color: #555;
  text-align: center;
  word-break: break-word;
  background: #fffbe6;
  border: 1px solid #ffe082;
  border-radius: 3px;
  padding: 4px 6px;
  width: 100%;
}

@media (max-width: 768px) {
  #screen-eq-stickers .eqs-form-container {
    padding: 12px;
    padding-bottom: 220px;
  }

  #screen-eq-stickers .eqs-filter-row,
  #screen-eq-stickers .eqs-settings-row {
    grid-template-columns: 1fr;
  }

  #screen-eq-stickers .eqs-item-list,
  #screen-eq-stickers .eqs-preview-grid {
    max-height: none;
    overflow: visible;
  }

  #screen-eq-stickers .eqs-item-card {
    padding: 10px 12px;
  }

  #screen-eq-stickers #eqs-action-bar {
    position: static;
    bottom: auto;
    padding: 0 8px;
  }

  #screen-eq-stickers .eqs-action-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  #screen-eq-stickers #eqs-selected-count {
    display: block;
    text-align: center;
  }

  #screen-eq-stickers #btn-eqs-preview,
  #screen-eq-stickers #btn-eqs-print {
    width: 100%;
  }

  .eqs-preview-card {
    width: min(200px, calc(100vw - 48px));
  }
}

/* ═══════════════════════════════════════════════════════════
   WAREHOUSE + QUOTATIONS REDESIGN
═══════════════════════════════════════════════════════════ */
/* Dead in practice (operations-layout.css's own #screen-warehouse,
   #screen-quotations rule has equal specificity and loads later, so it
   wins) — retuned to light anyway so this isn't a dark-flash trap if the
   cascade order ever changes. */
#screen-warehouse,
#screen-quotations {
  background:
    radial-gradient(circle at top right, rgba(255,107,87,.07), transparent 34%),
    radial-gradient(circle at top left, rgba(66,100,130,.05), transparent 26%),
    linear-gradient(180deg, #eaf1f8 0%, #eaf1f8 42%, #f5f8fb 100%);
}

/* each sub-view fills the screen and lets its list scroll */
.wh-view-shell,
.q-view-shell {
  flex: 1 1 auto;
  min-height: 0;
  /* critical for flex-child scrolling */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wh-screen-header,
.q-screen-header {
  position: relative;
  background: linear-gradient(180deg, rgba(19, 29, 37, .96), rgba(14, 24, 32, .92));
  border-bottom-color: rgba(180, 80, 70, .22);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.wh-screen-header::after,
.q-screen-header::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 100, 90, .55), transparent);
}

.wh-screen-header .header-title span,
.q-screen-header .header-title span {
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -.03em;
}

.wh-screen-header .header-title small,
.q-screen-header .header-title small {
  color: #a8bdd4;
}

.wh-filter-bar,
.q-filter-bar {
  margin: 14px 14px 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(19, 29, 37, .96), rgba(14, 24, 32, .92));
  border: 1px solid rgba(180, 80, 70, .18);
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .03);
}

.wh-search-box,
.q-search-box {
  min-height: 50px;
  padding: 0 16px;
  border-radius: 18px;
  background: rgba(14, 24, 32, .32);
  border: 1px solid rgba(180, 80, 70, .16);
}

.wh-search-box svg,
.q-search-box svg {
  color: #a8bdd4;
}

.wh-search-box:focus-within,
.q-search-box:focus-within {
  border-color: rgba(182, 58, 49, .42);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .14);
}

.wh-list,
.q-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  gap: 12px;
  /* bottom padding must clear the floating nav (~70 px) + breathing room */
  padding: 14px 12px calc(var(--nav-h) + 80px);
}

#q-detail-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(var(--nav-h) + 60px);
}

#screen-warehouse .pg-empty,
#screen-quotations .pg-empty,
#screen-warehouse .pg-loading,
#screen-quotations .pg-loading {
  margin: 4px 14px 24px;
  border-radius: 26px;
  border: 1px solid var(--line, #e4ebf1);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-card, 0 14px 30px rgba(47,76,101,.10));
}

.wh-type-tabs {
  margin: 14px 14px 0;
  padding: 8px;
  gap: 8px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(19, 29, 37, .96), rgba(14, 24, 32, .92));
  border: 1px solid rgba(180, 80, 70, .18);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
  overflow-x: auto;
}

.wh-type-tabs .pg-tab-btn {
  min-width: max-content;
  border-radius: 16px;
  padding: 10px 14px;
}

/* ── Shared base for project/quotation cards ──
   Superseded in practice by the higher-specificity #screen-warehouse/
   #screen-quotations-scoped rules in operations-layout.css (loaded later,
   ID+class beats plain class), but kept in sync with the light theme and
   the overflow:visible fix so it's not a latent dark/clipping trap if the
   cascade ever changes. */
.wh-project-card,
.quotation-project-card,
.quotation-item {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--clr-border, #d8e3ec);
  background: var(--clr-surface, #fff);
  box-shadow: var(--shadow-card, 0 4px 14px rgba(47,76,101,.08));
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color: var(--clr-text, #344f67);
}

.wh-project-card::before,
.quotation-project-card::before,
.quotation-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, var(--clr-primary-lt, #d45f55), var(--clr-primary, #b63a31) 48%, var(--clr-primary-dk, #8f2e26) 100%);
}

.wh-project-card:active,
.quotation-project-card:active,
.quotation-item:active {
  transform: scale(.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
}

/* ══════════════════════════════════════════════════
   WAREHOUSE ITEM CARD — fully independent styles
   Column layout: body on top, actions bar at bottom
══════════════════════════════════════════════════ */
.wh-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(160deg, #1e2d3a 0%, #141e28 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color: #e8eef5;
  overflow: visible;
  /* never clip children */
}

.wh-item-card:hover {
  border-color: rgba(212, 95, 85, .35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .38);
}

.wh-item-card:active {
  transform: scale(.98);
}

/* colour accent bar on the left */
.wh-item-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(180deg, #d45f55, #8f2e26 100%);
}

.wh-item-card--material::before {
  background: linear-gradient(180deg, #f8c86b, #d97706 100%);
}

.wh-item-card--equipment::before {
  background: linear-gradient(180deg, #d45f55, #8f2e26 100%);
}

.wh-item-card--tool::before {
  background: linear-gradient(180deg, #34d399, #059669 100%);
}

/* ── Body ─────────────────────────────────────── */
.wh-item-card__body {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 10px 18px;
  gap: 8px;
  flex: 1 1 auto;
}

/* top row: name block + qty badge */
.wh-item-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wh-item-card__thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--clr-border, #e4ebf1);
}

/* eyebrow: type label above the name */
.wh-item-card__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7a9ab5;
  line-height: 1.2;
  margin-bottom: 4px;
}

/* item name */
.wh-item-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  color: #dce8f4;
  line-height: 1.4;
}

/* quantity badge */
.wh-item-card__qty {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(212, 95, 85, .15);
  border: 1px solid rgba(212, 95, 85, .30);
  color: #ffb8b0;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

/* chips row */
.wh-item-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* optional description */
.wh-item-card__desc {
  font-size: 12px;
  color: #7a9ab5;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ── Actions bar ──────────────────────────────── */
.wh-item-card__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  background: rgba(0, 0, 0, .12);
  border-radius: 0 0 16px 16px;
}

.wh-item-card__actions .btn-icon {
  width: 34px;
  height: 34px;
  color: #7a9ab5;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
}

.wh-item-card__actions .btn-icon:hover {
  color: #dce8f4;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(212, 95, 85, .28);
}

.wh-item-card__actions .btn-icon--danger {
  color: #f87171;
}

.wh-item-card__actions .btn-icon--danger:hover {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .30);
}

/* ── Icon box ── */
.wh-project-card__icon,
.quotation-project-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(182, 58, 49, .22), rgba(143, 46, 38, .14));
  border: 1px solid rgba(220, 100, 90, .20);
  /* Explicit icon colour — always visible */
  color: #d45f55;
}

/* ── Body: flex-basis AUTO so it always shows content ── */
.wh-project-card__body,
.quotation-project-card__body,
.quotation-item__body {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

/* ── Eyebrow label ── */
.wh-project-card__eyebrow,
.quotation-project-card__eyebrow,
.quotation-item__eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: #a8bdd4;
  line-height: 1.3;
}

/* ── Primary name / title ── */
.wh-project-card__name,
.quotation-project-card__title,
.quotation-item__number {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #e8eef5;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Meta chips row ── */
.wh-project-card__meta,
.quotation-project-card__meta,
.quotation-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.quotation-item__meta {
  color: #a8bdd4;
  font-size: 11px;
}

.quotation-item__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quotation-item__meta span+span::before {
  content: "•";
  color: #6a8aaa;
}

/* ── Aside (right column: count badge + arrow) ── */
.wh-project-card__aside,
.quotation-project-card__aside,
.quotation-item__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Count badge ── */
.wh-project-card__count,
.quotation-project-card__count {
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(182, 58, 49, .90), rgba(143, 46, 38, .90));
  color: #fff;
  /* explicit white – always visible */
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(143, 46, 38, .28);
}

.wh-project-card__arrow,
.quotation-project-card__aside>svg {
  color: #a8bdd4;
}

/* ── Quotation total ── */
.quotation-item__total {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #d45f55;
  /* explicit */
  letter-spacing: -.02em;
  white-space: nowrap;
}

.quotation-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  border: 1px solid transparent;
}

.quotation-status-chip--draft {
  background: rgba(150, 150, 160, .14);
  color: #e8eef5;
  border-color: rgba(150, 150, 160, .20);
}

.quotation-status-chip--sent {
  background: rgba(14, 165, 233, .14);
  color: #7dd3fc;
  border-color: rgba(14, 165, 233, .24);
}

.quotation-status-chip--accepted {
  background: rgba(34, 197, 94, .14);
  color: #91f0b2;
  border-color: rgba(34, 197, 94, .24);
}

.quotation-status-chip--rejected {
  background: rgba(239, 68, 68, .14);
  color: #ffb0b0;
  border-color: rgba(239, 68, 68, .24);
}

.q-detail-content {
  padding: 22px 18px 90px !important;
  background:
    radial-gradient(circle at top, rgba(182, 58, 49, .08), transparent 28%),
    linear-gradient(180deg, rgba(14, 24, 32, .98), rgba(14, 24, 32, .98));
}

.q-detail-content .quotation-paper {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px;
  background: #fff;
  color: #222;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  border-radius: 28px;
  border: 1px solid #d8e1ed;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
}

body.app-shell-sidebar-active .q-detail-content .quotation-paper {
  max-width: none;
  width: 100%;
  padding: 18px;
  border-radius: 20px;
}

body.app-shell-sidebar-active .q-detail-content {
  padding: 14px 10px 82px !important;
}

body.app-shell-sidebar-active .quotation-paper__hero {
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 14px;
}

body.app-shell-sidebar-active .quotation-paper__footer {
  grid-template-columns: 1fr;
  gap: 14px;
}

.quotation-paper__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 16px;
  margin-bottom: 14px;
  align-items: start;
  border-bottom: 2px solid #eef2f6;
  padding-bottom: 12px;
}

.quotation-paper__company {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.quotation-paper__logo {
  width: 90px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.quotation-paper__company-copy {
  font-size: 13px;
  color: #57687b;
  line-height: 1.55;
}

.quotation-paper__company-copy a {
  color: #1976d2;
  text-decoration: none;
}

.quotation-paper__summary {
  text-align: right;
}

.quotation-paper__eyebrow {
  font-size: 12px;
  color: #6b7a8c;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quotation-paper__number {
  margin-top: 4px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: #1f2f46;
  overflow-wrap: anywhere;
}

.quotation-paper__dates {
  margin-top: 6px;
  font-size: 12px;
  color: #57687b;
  line-height: 1.5;
}

.quotation-paper__recipient {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: #f5f7fb;
  border: 1px solid #e0e6ef;
  border-radius: 14px;
  font-size: 12px;
  color: #324255;
  line-height: 1.6;
}

.quotation-paper__recipient-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}

.quotation-paper__table-wrap {
  margin-bottom: 12px;
}

.quotation-paper__table {
  width: 100%;
  border-collapse: collapse;
  color: #000;
}

.quotation-paper__table thead tr {
  background: #fff;
  color: #000;
}

.quotation-paper__table th {
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid #d7dde6;
  color: #000;
}

.quotation-paper__table th:first-child {
  text-align: left;
}

.quotation-paper__table th:not(:first-child) {
  text-align: center;
}

.quotation-paper__row--alt {
  background: #fafafa;
}

.quotation-paper__cell {
  padding: 7px 10px;
  border: 1px solid #d7dde6;
  font-size: 12px;
  vertical-align: top;
  color: #000;
}

.quotation-paper__cell--center {
  text-align: center;
  vertical-align: middle;
}

.quotation-paper__cell--right {
  text-align: right;
  vertical-align: middle;
}

.quotation-paper__cell--strong {
  font-weight: 700;
}

.quotation-paper__table-item {
  display: grid;
  gap: 8px;
  align-items: start;
}

.quotation-paper__table-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #d7dde6;
  border-radius: 8px;
  background: #f5f7fb;
}

.quotation-paper__table-name {
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}

.quotation-paper__table-meta {
  margin-top: 3px;
  font-size: 10px;
  color: #000;
  line-height: 1.5;
}

.quotation-paper__table-description {
  margin-top: 4px;
  font-size: 10px;
  color: #000;
  line-height: 1.5;
  white-space: pre-wrap;
}

.quotation-paper__mobile-list {
  display: none;
}

.quotation-paper__item-card {
  padding: 14px;
  border: 1px solid #d7dde6;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  box-shadow: 0 10px 20px rgba(30, 58, 93, .08);
}

.quotation-paper__item-card+.quotation-paper__item-card {
  margin-top: 12px;
}

.quotation-paper__item-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.quotation-paper__item-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #d7dde6;
  background: #f5f7fb;
}

.quotation-paper__item-copy {
  min-width: 0;
}

.quotation-paper__item-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  color: #223146;
}

.quotation-paper__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  font-size: 11px;
  color: #6b7a8c;
  line-height: 1.5;
}

.quotation-paper__item-description {
  margin-top: 8px;
  color: #4b5b6d;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.quotation-paper__item-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.quotation-paper__item-stats>div {
  padding: 10px 12px;
  border-radius: 14px;
  background: #eef4fb;
  display: grid;
  gap: 4px;
}

.quotation-paper__item-stats small {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7a8c;
}

.quotation-paper__item-stats strong {
  font-size: 14px;
  color: #203350;
}

.quotation-paper__footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quotation-paper__totals {
  align-self: flex-end;
  width: 100%;
  max-width: 320px;
}

.quotation-paper__notes {
  padding: 10px 14px;
  background: #f9fbfe;
  border-left: 4px solid #1b66c8;
  border-radius: 8px;
}

.quotation-paper__notes-title {
  font-weight: 700;
  color: #21324a;
  margin-bottom: 6px;
  font-size: 13px;
}

.quotation-paper__notes-body {
  font-size: 12px;
  color: #495a6c;
  white-space: pre-wrap;
  line-height: 1.55;
}

.quotation-paper__totals {
  background: #f5f7fb;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  padding: 12px 14px;
}

.quotation-paper__total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #495a6c;
}

.quotation-paper__total-row--vat {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d8e0ea;
}

.quotation-paper__total-row--grand {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 800;
  color: #1b66c8;
}

.quotation-paper__brand-strip {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #dce4ee;
}

.quotation-paper__brand-strip-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.quotation-paper__brand-strip-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.quotation-paper__brand-strip-logos img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.quotation-paper__empty {
  padding: 18px;
  border: 1px solid #d7dde6;
  border-radius: 16px;
  text-align: center;
  color: #7a8796;
}

.quotation-paper__empty--table {
  border-radius: 0;
}

@media (min-width: 1024px) {

  .wh-filter-bar,
  .q-filter-bar,
  .wh-type-tabs,
  .wh-list,
  .q-list,
  #q-detail-content {
    width: calc(100% - 36px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }

  .wh-filter-bar,
  .q-filter-bar,
  .wh-type-tabs {
    margin-top: 18px;
  }

  .wh-list,
  .q-list {
    padding: 18px 0 calc(var(--nav-h) + 42px);
    gap: 16px;
  }

  .wh-project-list,
  .q-project-list,
  .q-quotation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    align-content: start;
  }

  .wh-items-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    align-content: start;
    gap: 14px;
  }

  .wh-project-list>.pg-loading,
  .q-project-list>.pg-loading,
  .q-quotation-list>.pg-loading,
  .wh-items-list>.pg-loading,
  .wh-project-list>.pg-error,
  .q-project-list>.pg-error,
  .q-quotation-list>.pg-error,
  .wh-items-list>.pg-error {
    grid-column: 1 / -1;
  }

  .wh-project-card,
  .quotation-project-card,
  .quotation-item {
    padding: 18px 20px;
    gap: 18px;
    border-radius: 22px;
  }

  .wh-item-card {
    border-radius: 20px;
  }

  .wh-item-card__body {
    padding: 18px 18px 14px 22px;
  }

  .wh-item-card__actions {
    padding: 10px 14px 14px 22px;
    gap: 8px;
  }

  .wh-item-card__actions .btn-icon {
    width: 36px;
    height: 36px;
  }

  .wh-project-card__name,
  .quotation-project-card__title,
  .quotation-item__number {
    font-size: 16px;
    line-height: 1.45;
    white-space: normal;
    overflow: hidden;
    text-overflow: unset;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .wh-item-card__name {
    font-size: 16px;
    -webkit-line-clamp: 2;
  }

  .wh-project-card__meta,
  .quotation-project-card__meta,
  .quotation-item__meta {
    gap: 8px;
    margin-top: 8px;
  }

  .quotation-item__meta {
    font-size: 12px;
  }

  .quotation-item__aside {
    min-width: 180px;
  }

  .quotation-item__total {
    font-size: 17px;
  }

  #q-detail-content {
    padding: 28px 0 calc(var(--nav-h) + 48px) !important;
  }

  .q-detail-content .quotation-paper {
    max-width: 1120px !important;
    padding: 28px !important;
  }
}

@media (max-width: 768px) {
  .bottom-nav {
    top: calc(var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px) + var(--header-h, 52px) + 8px);
    bottom: 8px;
    left: 8px;
    right: auto;
    width: 74px;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px 6px;
    border-radius: 24px;
  }

  .nav-tab {
    flex: 0 0 auto;
    width: 100%;
    min-height: 62px;
    padding: 8px 4px;
    gap: 4px;
  }

  .nav-tab-label {
    font-size: 9px;
    line-height: 1.15;
  }

  .nav-tab-ai {
    background: linear-gradient(180deg, rgba(182, 58, 49, .18), rgba(143, 46, 38, .12));
  }

  .wh-filter-bar,
  .q-filter-bar,
  .wh-type-tabs {
    margin: 10px 10px 0 84px;
    border-radius: 20px;
    padding: 10px;
  }

  .wh-list,
  .q-list {
    padding: 10px 10px 18px 84px;
  }

  .wh-project-card,
  .quotation-project-card,
  .quotation-item {
    border-radius: 16px;
    padding: 11px 13px;
    gap: 10px;
  }

  .wh-item-card {
    border-radius: 16px;
  }

  .wh-item-card__body {
    padding: 13px 13px 10px 17px;
  }

  .wh-item-card__actions {
    padding: 8px 10px 10px 17px;
    gap: 6px;
  }

  .wh-item-card__actions .btn-icon {
    width: 32px;
    height: 32px;
  }

  .wh-project-card__icon,
  .quotation-project-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .wh-project-card__name,
  .quotation-project-card__title,
  .quotation-item__number {
    font-size: 13px;
  }

  .wh-item-card__name {
    font-size: 14px;
  }

  .wh-project-card__count,
  .quotation-project-card__count {
    min-width: 30px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 10px;
  }

  .quotation-item__total {
    font-size: 14px;
  }

  .q-detail-content {
    padding: 12px 10px 18px !important;
  }

  #screen-main,
  #screen-projects,
  #screen-all-tasks,
  #screen-attendance,
  #screen-profile,
  #screen-cmms-ai,
  #screen-warehouse,
  #screen-quotations,
  #screen-support {
    padding-left: 84px;
    padding-bottom: 12px;
  }

  .detail-actions {
    left: 84px;
    right: 8px;
    bottom: 8px;
  }

  .q-detail-content .quotation-paper {
    padding: 16px;
    border-radius: 24px;
  }

  .quotation-paper__hero,
  .quotation-paper__footer {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.app-shell-sidebar-active .quotation-paper__hero,
  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .quotation-paper__hero,
  body.app-shell-sidebar-active .quotation-paper__footer,
  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .quotation-paper__footer {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quotation-paper__company {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  body.app-shell-sidebar-active .quotation-paper__company,
  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .quotation-paper__company {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .quotation-paper__logo {
    width: 72px;
  }

  .quotation-paper__company-copy {
    font-size: 15px;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .quotation-paper__summary {
    text-align: left;
  }

  .quotation-paper__brand-strip {
    margin-top: 22px;
    padding-top: 14px;
  }

  .quotation-paper__number {
    font-size: 20px;
  }

  .quotation-paper__recipient {
    padding: 12px 14px;
    border-radius: 14px;
  }

  .quotation-paper__table-wrap {
    display: none;
  }

  .quotation-paper__mobile-list {
    display: block;
  }

  .quotation-paper__totals {
    border-radius: 18px;
  }

  .quotation-paper__total-row--grand {
    font-size: 17px;
  }
}

@media (max-width: 390px) {
  .bottom-nav {
    width: 68px;
    left: 6px;
    top: calc(var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px) + var(--header-h, 52px) + 6px);
    bottom: 6px;
    padding: 7px 5px;
  }

  .nav-tab {
    min-height: 58px;
  }

  .nav-tab-label {
    font-size: 8px;
  }

  .wh-filter-bar,
  .q-filter-bar,
  .wh-type-tabs,
  #screen-main,
  #screen-projects,
  #screen-all-tasks,
  #screen-attendance,
  #screen-profile,
  #screen-cmms-ai,
  #screen-warehouse,
  #screen-quotations,
  #screen-support {
    padding-left: 78px;
  }

  .wh-filter-bar,
  .q-filter-bar,
  .wh-type-tabs {
    margin-left: 78px;
  }

  .wh-list,
  .q-list {
    padding-left: 78px;
  }

  .detail-actions {
    left: 78px;
  }
}

/* ═══════════════════════════════════════════════════════════
   APP-WIDE UNIFIED DESIGN LAYER
═══════════════════════════════════════════════════════════ */
:root {
  /* Retuned to the canonical light palette (css/rebrand.css) — these
     tokens are not aliased there, so their values must match here
     directly rather than delegate via var(). */
  --ui-shell-bg:
    radial-gradient(circle at top right, rgba(255, 107, 87, .07), transparent 30%),
    radial-gradient(circle at top left, rgba(66, 100, 130, .05), transparent 24%),
    linear-gradient(180deg, #eaf1f8 0%, #f5f8fb 46%, #eaf1f8 100%);
  --ui-panel-bg: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 248, 251, .98));
  --ui-panel-bg-soft: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(237, 244, 250, .96));
  --ui-panel-bg-tint: linear-gradient(145deg, rgba(237, 244, 250, .96), rgba(245, 248, 251, .96));
  --ui-border-soft: rgba(66, 100, 130, .14);
  --ui-border-strong: rgba(66, 100, 130, .24);
  --ui-shadow-card: 0 12px 30px rgba(47, 76, 101, .07);
  --ui-shadow-panel: 0 8px 20px rgba(47, 76, 101, .10);
  --ui-input-bg: rgba(66, 100, 130, .05);
}

body {
  background: #eaf1f8;
}
:root[data-theme="dark"] body {
  background: #0e1820;
}

.screen {
  background: var(--ui-shell-bg);
}

.screen:not(#screen-splash):not(#screen-login) {
  background-attachment: fixed;
}

.app-header {
  position: relative;
  background: linear-gradient(180deg, rgba(19, 29, 37, .97), rgba(14, 24, 32, .94));
  border-bottom-color: rgba(180, 80, 70, .22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .20);
  backdrop-filter: blur(12px);
}

.app-header::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 100, 90, .62), transparent);
}

.header-title span {
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: -.03em;
}

.header-title small {
  color: #c09090;
}

.btn-primary {
  background: linear-gradient(135deg, #c44038, #8f2e26);
  border-color: rgba(220, 100, 90, .42);
  box-shadow: 0 10px 20px rgba(182, 58, 49, .28);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #b63a31, #7a2520);
}

.btn-secondary {
  background: linear-gradient(145deg, rgba(28, 42, 73, .96), rgba(14, 24, 32, .96));
  border-color: rgba(180, 80, 70, .24);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
}

.btn-icon {
  background: rgba(14, 24, 32, .26);
  border: 1px solid rgba(180, 80, 70, .14);
  border-radius: 14px;
}

.btn-icon:hover {
  background: rgba(19, 29, 37, .92);
  border-color: rgba(220, 100, 90, .28);
}

.btn-icon.primary {
  color: #d45f55;
  background: rgba(182, 58, 49, .12);
  border-color: rgba(182, 58, 49, .24);
}

.bottom-nav {
  left: 12px;
  right: 12px;
  bottom: 10px;
  width: auto;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0));
  border-radius: 24px;
  border: 1px solid var(--ui-border-soft);
  background: linear-gradient(180deg, rgba(19, 29, 37, .98), rgba(14, 24, 32, .96));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .26);
  backdrop-filter: blur(16px);
  padding: 6px 6px env(safe-area-inset-bottom, 0);
}

.nav-tab {
  border-radius: 18px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-tab.active {
  color: #d45f55;
  background: rgba(182, 58, 49, .14);
}

.nav-tab:hover {
  background: rgba(19, 29, 37, .72);
}

.nav-tab-ai {
  background: linear-gradient(180deg, rgba(182, 58, 49, .22), rgba(143, 46, 38, .16));
  border: 1px solid rgba(220, 100, 90, .22);
}

.nav-tab-ai.active {
  background: linear-gradient(180deg, rgba(182, 58, 49, .28), rgba(143, 46, 38, .2));
  color: #ffd6d1;
}

.nav-profile-avatar-wrap {
  background: linear-gradient(145deg, rgba(26, 42, 53, .96), rgba(19, 29, 37, .98));
  border: 1px solid rgba(180, 80, 70, .18);
}

.pg-tabs,
.detail-tab-bar,
.pg-filter-bar,
.pg-filter-row,
.members-section,
.pg-stats-strip {
  margin: 14px 14px 0;
  border: 1px solid var(--ui-border-soft);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(19, 29, 37, .96), rgba(14, 24, 32, .94));
  box-shadow: 0 14px 30px rgba(0, 0, 0, .16);
  border-bottom: none;
}

.pg-tabs,
.detail-tab-bar {
  padding: 6px;
  gap: 6px;
}

.pg-tab-btn,
.detail-tab-btn {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom: none;
  color: #a8bdd4;
}

.pg-tab-btn::after,
.detail-tab-btn::after {
  display: none;
}

.pg-tab-btn.active,
.detail-tab-btn.active {
  color: #e8eef5;
  background: linear-gradient(135deg, rgba(182, 58, 49, .22), rgba(143, 46, 38, .20));
  box-shadow: inset 0 0 0 1px rgba(220, 100, 90, .18), 0 6px 12px rgba(143, 46, 38, .16);
}

.pg-tab-count,
.tab-badge {
  background: rgba(14, 24, 32, .86);
  color: #c09090;
  box-shadow: none;
}

.pg-tab-btn.active .pg-tab-count,
.detail-tab-btn.active .tab-badge {
  background: rgba(182, 58, 49, .18);
  color: #cfe7ff;
}

.pg-filter-bar,
.pg-filter-row {
  padding: 12px;
  gap: 10px;
}

.search-box {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--ui-input-bg);
  border-color: rgba(180, 80, 70, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.search-box svg {
  color: #a8bdd4;
}

.search-box:focus-within {
  border-color: rgba(182, 58, 49, .48);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .14);
}

.filter-select,
.form-group input,
.form-group select,
.form-group textarea,
.dialog-required-row input,
.task-comment-form textarea {
  background: var(--ui-input-bg);
  border-color: rgba(180, 80, 70, .18);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.filter-select,
.form-group input,
.form-group select,
.dialog-required-row input {
  min-height: 42px;
}

.form-group select,
.filter-select,
.profile-theme-btn-row select {
  padding-right: 38px;
  background-image:
    linear-gradient(145deg, rgba(14, 24, 32, .12), rgba(14, 24, 32, .12)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d45f55' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 12px center;
  background-size: auto, 14px;
}

.form-group textarea,
.task-comment-form textarea {
  min-height: 92px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.dialog-required-row input:focus,
.task-comment-form textarea:focus,
.filter-select:focus {
  border-color: rgba(182, 58, 49, .48);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .14);
}

.form-container,
.detail-container,
.detail-tab-body,
.scanner-container,
.att-history-list,
.notif-list {
  padding: 16px;
  gap: 14px;
}

.pg-list {
  gap: 12px;
  padding: 16px 14px calc(var(--nav-h) + 28px);
}

.pg-empty,
.pg-loading,
.notif-empty,
.member-empty,
.linked-empty,
.task-empty-block {
  border: 1px solid var(--ui-border-soft);
  border-radius: 26px;
  background: var(--ui-panel-bg-soft);
  box-shadow: var(--ui-shadow-card);
}

.pg-list-row,
.pg-task-row,
.linked-item,
.task-comment-card,
.task-note-card,
.task-file-item,
.member-card,
.att-record-row,
.pdp-stat-card,
.task-assignee-option,
.notif-item,
.import-file-info,
.import-duplicate-item,
.import-progress,
.qr-size-card,
.qr-equipment-list,
.scanner-card,
.profile-info-card,
.profile-password-card,
.profile-admin-card,
.att-header-strip,
.att-clock-card {
  background: var(--ui-panel-bg);
  border-color: var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
}

.pg-list-row,
.pg-task-row,
.linked-item,
.att-record-row,
.notif-item,
.task-comment-card,
.task-note-card,
.task-file-item,
.member-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

.pg-list-row::before,
.pg-task-row::before,
.linked-item::before,
.att-record-row::before,
.notif-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #d45f55, #b63a31 48%, #8f2e26 100%);
}

.pg-list-row:hover,
.pg-task-row:hover,
.linked-item:hover,
.task-comment-card:hover,
.task-note-card:hover,
.task-file-item:hover,
.member-card:hover,
.att-record-row:hover,
.notif-item:hover,
.task-assignee-option:hover,
.scanner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 38px rgba(0, 0, 0, .24);
}

.pg-row-title,
.pg-task-heading,
.linked-item-head strong,
.task-comment-head strong,
.task-note-card strong,
.member-card-body strong,
.notif-item-title,
.att-record-date,
.pdp-stat-nums,
.detail-field span {
  color: var(--ink, #1f2d3d);
}

.pg-row-meta,
.pg-task-meta,
.linked-item-meta,
.task-comment-body,
.task-note-card div,
.member-card-body small,
.notif-item-body-text,
.notif-item-meta,
.att-record-meta,
.att-record-hours,
.detail-field label {
  color: var(--ink-soft, #5b6b7f);
}

.detail-section,
.project-detail-progress,
.dialog-box,
.modal-sheet,
.notif-drawer {
  background: var(--ui-panel-bg-soft);
  border-color: var(--ui-border-soft);
  box-shadow: var(--ui-shadow-panel);
}

.detail-section,
.project-detail-progress,
.dialog-box,
.modal-sheet {
  border-radius: 28px;
}

.detail-section-title,
.modal-header,
.scanner-card-header,
.notif-drawer-header {
  background: linear-gradient(135deg, rgba(19, 29, 37, .96), rgba(14, 24, 32, .94));
  border-bottom-color: rgba(180, 80, 70, .18);
}

.detail-section-title,
.modal-header h3,
.scanner-card-header h3,
.notif-drawer-header h3 {
  color: #e8eef5;
}

.detail-grid {
  background: rgba(182, 58, 49, .18);
}

.detail-field {
  background: rgba(14, 24, 32, .74);
}

.detail-actions {
  position: fixed !important;
  z-index: 200 !important;
  left: 12px;
  right: 12px;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 10px);
  border: 1px solid var(--ui-border-soft);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(19, 29, 37, .98), rgba(14, 24, 32, .96));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
}

.pg-stats-strip {
  padding: 8px;
  gap: 8px;
}

.pg-stat-cell {
  border-right: none;
  border-radius: 18px;
  background: rgba(14, 24, 32, .26);
  border: 1px solid rgba(180, 80, 70, .14);
}

.pg-stat-num {
  color: #e8eef5;
}

.pg-stat-lbl {
  color: #a8bdd4;
}

.progress-wrap,
.import-progress-bar-wrap {
  height: 8px;
  background: rgba(14, 24, 32, .58);
  border: 1px solid rgba(180, 80, 70, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.progress-bar,
.import-progress-bar {
  background: linear-gradient(90deg, #b63a31, #d45f55);
}

.members-section {
  padding: 10px 14px;
}

.members-label,
.tools-section-label {
  color: #a8bdd4;
}

.member-card-avatar,
.avatar-initials,
.avatar-more {
  background: linear-gradient(145deg, rgba(26, 42, 53, .96), rgba(19, 29, 37, .96));
  border-color: rgba(180, 80, 70, .18);
}

.linked-item-badge,
.profile-chip,
.tag-chip,
.pg-chip {
  background: rgba(14, 24, 32, .86);
  border-color: rgba(180, 80, 70, .16);
  color: #a8bdd4;
  box-shadow: none;
}

.profile-hero,
.att-clock-card,
.att-header-strip,
.notif-drawer,
.dialog-box,
.scanner-card,
.tool-card {
  border: 1px solid var(--ui-border-soft);
  box-shadow: var(--ui-shadow-panel);
}

.profile-hero,
.att-clock-card,
.att-header-strip {
  background: var(--ui-panel-bg-tint);
}

.profile-chip {
  border-radius: 999px;
}

.profile-grid-layout,
.member-grid,
.pdp-stats {
  gap: 12px;
}

.tool-card {
  background: var(--ui-panel-bg);
  border-radius: 24px;
  border-color: var(--ui-border-soft);
  box-shadow: var(--ui-shadow-card);
}

.tool-card::before {
  opacity: 1;
  width: 4px;
  background: linear-gradient(180deg, #d45f55, #b63a31 48%, #8f2e26 100%);
}

.tool-card:hover {
  transform: translateY(-2px);
}

.tool-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.tool-card-copy strong {
  font-size: 14px;
}

.tool-card-copy small {
  color: #a8bdd4;
}

@media (max-width: 480px) {
  .bottom-nav {
    left: 6px;
    right: auto;
    top: calc(var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px) + var(--header-h, 52px) + 6px);
    bottom: 6px;
    width: 68px;
    height: auto;
    border-radius: 18px;
    padding: 6px 5px;
  }

  .nav-tab {
    gap: 2px;
    padding: 7px 2px;
    font-size: 9px;
    letter-spacing: 0;
    min-height: 58px;
  }

  .nav-tab svg,
  .nav-profile-avatar-wrap,
  .nav-profile-avatar {
    width: 20px;
    height: 20px;
  }

  .nav-profile-avatar-fallback {
    font-size: 10px;
  }

  .nav-tab-label {
    min-height: 18px;
  }

  .tools-menu {
    gap: 12px;
    padding: 12px 10px 16px;
  }

  .tools-section-label {
    padding: 0 2px;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .07em;
  }

  .tool-card {
    gap: 12px;
    padding: 14px 12px;
    border-radius: 18px;
    align-items: flex-start;
  }

  .tool-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .tool-card-icon svg {
    width: 22px;
    height: 22px;
  }

  .tool-card-copy {
    gap: 3px;
    padding-top: 1px;
  }

  .tool-card-copy strong {
    font-size: 13px;
    line-height: 1.2;
  }

  .tool-card-copy small {
    font-size: 11px;
    line-height: 1.45;
  }

  .tool-card-arrow {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
}

@media (max-width: 390px) {
  .bottom-nav {
    left: 4px;
    right: auto;
    top: calc(var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px) + var(--header-h, 52px) + 4px);
    bottom: 4px;
    width: 64px;
  }

  .nav-tab {
    font-size: 8px;
  }

  .nav-tab-label {
    min-height: 17px;
  }

  .tool-card {
    gap: 10px;
    padding: 12px 10px;
  }

  .tool-card-icon {
    width: 46px;
    height: 46px;
  }

  .tool-card-copy strong {
    font-size: 12px;
  }

  .tool-card-copy small {
    font-size: 10px;
  }

  .tool-card-arrow {
    display: none;
  }
}

.att-status-pill,
.task-link-btn,
.ai-correct-btn {
  border-radius: 999px;
}

.modal-overlay,
.dialog-overlay,
.notif-backdrop {
  background: rgba(3, 7, 15, .70);
  backdrop-filter: blur(10px);
}

.modal-sheet,
.dialog-box,
.notif-drawer {
  border: 1px solid var(--ui-border-soft);
}

.toast {
  border-radius: 18px;
  border: 1px solid rgba(220, 100, 90, .18);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px);
}

.notif-badge {
  box-shadow: 0 6px 12px rgba(239, 68, 68, .24);
}

.splash-center {
  border: 1px solid var(--ui-border-soft);
  box-shadow: 0 24px 52px rgba(0, 0, 0, .24);
}

/* Dead in practice today (loading-layout.css's #screen-splash wins on
   specificity/load-order), but retuned to the light palette anyway so
   this isn't a dark-flash trap if the cascade order ever changes.
   (The equivalent #screen-login rule that used to sit here was removed —
   see css/login-layout.css, which owns the login screen's background.) */
#screen-splash {
  background:
    radial-gradient(circle at center top, rgba(255,107,87,.08), transparent 26%),
    radial-gradient(circle at 20% 20%, rgba(66,100,130,.05), transparent 18%),
    linear-gradient(180deg, #eef4fa 0%, #e4eef7 54%, #dce8f3 100%);
}

.app-version-label {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.splash-center {
  min-width: min(92vw, 420px);
  padding: 28px 22px;
  gap: 18px;
}

.splash-ring-wrap,
.splash-logo-wrap {
  width: 136px;
  height: 136px;
}

.splash-ring-1 {
  border-color: rgba(180, 80, 70, .20);
}

.splash-ring-2 {
  inset: 10px;
  border-color: rgba(220, 100, 90, .30);
}

.splash-logo-wrap {
  background: linear-gradient(145deg, rgba(32, 49, 85, .98), rgba(14, 23, 42, .98));
  border-color: rgba(180, 80, 70, .20);
}

.splash-logo-img {
  width: 92px;
  height: 92px;
}

.splash-company {
  font-size: 24px;
  letter-spacing: .08em;
}

.splash-tagline {
  font-size: 12px;
  max-width: 280px;
  color: #93afcf;
}

.splash-dots {
  gap: 8px;
}

.splash-dot {
  width: 8px;
  height: 8px;
}

@media (max-width: 768px) {
  .header-title span {
    font-size: 17px;
  }

  .header-title small {
    font-size: 10px;
  }

  .tool-card-copy strong {
    font-size: 13px;
  }

  .tool-card-copy small,
  .search-box input,
  .filter-select,
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 12px;
  }

  .splash-center {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.splash-brand,
.app-version-label {
  color: #8ca5c4;
}

.splash-center {
  background: linear-gradient(145deg, rgba(19, 29, 37, .94), rgba(10, 17, 31, .94));
  border-radius: 30px;
  backdrop-filter: blur(18px);
}

.splash-logo-wrap {
  box-shadow: 0 18px 36px rgba(0, 0, 0, .20);
}

@media (max-width: 768px) {
  .bottom-nav {
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 20px;
  }

  .pg-tabs,
  .detail-tab-bar,
  .pg-filter-bar,
  .pg-filter-row,
  .members-section,
  .pg-stats-strip {
    margin: 10px 10px 0;
    border-radius: 20px;
  }

  .pg-tabs,
  .detail-tab-bar,
  .pg-filter-bar,
  .pg-filter-row,
  .members-section,
  .pg-stats-strip,
  .form-container,
  .detail-container,
  .detail-tab-body,
  .scanner-container,
  .att-history-list,
  .notif-list,
  .pg-list {
    padding-left: 10px;
    padding-right: 10px;
  }

  .pg-filter-bar,
  .pg-filter-row {
    flex-wrap: wrap;
  }

  .pg-filter-bar .search-box,
  .pg-filter-row .search-box {
    flex: 1 1 100%;
    width: 100%;
  }

  .pg-filter-bar .filter-select,
  .pg-filter-row .filter-select {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  .pg-stats-strip {
    flex-wrap: wrap;
  }

  .pg-stat-cell {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .detail-grid,
  .member-grid,
  .profile-grid-layout,
  .pdp-stats {
    grid-template-columns: 1fr;
  }

  .detail-actions {
    left: 8px;
    right: 8px;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 8px);
    border-radius: 18px;
    padding: 10px;
  }

  .tool-card,
  .pg-list-row,
  .pg-task-row,
  .linked-item,
  .task-comment-card,
  .task-note-card,
  .task-file-item,
  .member-card,
  .att-record-row,
  .notif-item,
  .detail-section,
  .dialog-box,
  .modal-sheet,
  .profile-hero,
  .att-clock-card,
  .att-header-strip,
  .scanner-card,
  .splash-center {
    border-radius: 20px;
  }
}

@media (min-width: 769px) {
  .bottom-nav {
    left: max(24px, calc(50vw - 430px));
    right: auto;
    bottom: 14px;
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    transform: none;
  }

  .detail-actions {
    left: max(24px, calc(50vw - 430px));
    right: auto;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 12px);
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    transform: none;
  }

  #screen-main,
  #screen-projects,
  #screen-all-tasks,
  #screen-attendance,
  #screen-profile,
  #screen-cmms-ai,
  #screen-warehouse,
  #screen-quotations,
  #screen-support {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0) + 34px);
  }
}

/* --- Unified Filter/Search Layout -------------------- */
.pg-filter-bar,
.pg-filter-row,
.wh-filter-bar,
.q-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pg-filter-bar>.search-box,
.pg-filter-row>.search-box,
.wh-filter-bar>.search-box,
.q-filter-bar>.search-box,
.pg-filter-bar>.wh-search-box,
.pg-filter-bar>.q-search-box,
.pg-filter-row>.wh-search-box,
.pg-filter-row>.q-search-box {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
  width: auto;
}

.pg-filter-bar>.filter-select,
.pg-filter-row>.filter-select,
.pg-filter-bar>input.filter-select,
.pg-filter-row>input.filter-select {
  flex: 0 1 220px;
  min-width: 160px;
  max-width: 100%;
}

.pg-filter-bar>.btn,
.pg-filter-row>.btn,
.pg-filter-bar>.btn-sm,
.pg-filter-row>.btn-sm {
  min-height: 44px;
  flex: 0 0 auto;
}

.pg-filter-bar>.btn-icon,
.pg-filter-row>.btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  flex: 0 0 auto;
  border: 1px solid rgba(180, 80, 70, .18);
  background: var(--ui-input-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.pg-filter-bar>.btn-icon:hover,
.pg-filter-row>.btn-icon:hover {
  background: rgba(26, 42, 53, .92);
}

.pg-filter-bar>.pg-badge,
.pg-filter-row>.pg-badge,
.pg-filter-bar>span,
.pg-filter-row>span {
  max-width: 100%;
}

@media (min-width: 769px) {

  .pg-filter-bar,
  .pg-filter-row,
  .wh-filter-bar,
  .q-filter-bar {
    padding: 14px 16px;
    gap: 12px;
  }

  .pg-filter-bar>.search-box,
  .pg-filter-row>.search-box,
  .wh-filter-bar>.search-box,
  .q-filter-bar>.search-box,
  .pg-filter-bar>.wh-search-box,
  .pg-filter-bar>.q-search-box,
  .pg-filter-row>.wh-search-box,
  .pg-filter-row>.q-search-box {
    flex-basis: 420px;
  }

  .pg-filter-bar>.filter-select,
  .pg-filter-row>.filter-select,
  .pg-filter-bar>input.filter-select,
  .pg-filter-row>input.filter-select {
    min-width: 180px;
    max-width: 240px;
  }
}

/* --- Global Sidebar Shell -------------------------------- */
body.app-shell-sidebar-active {
  --shell-sidebar-width: 292px;
}

.app-sidebar {
  position: fixed;
  inset: calc(12px + var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px)) auto 12px 12px;
  width: var(--shell-sidebar-width, 292px);
  z-index: 180;
}

#screen-splash.active~.app-sidebar,
#screen-login.active~.app-sidebar {
  display: none !important;
}

.app-sidebar.hidden {
  display: none !important;
}

.app-sidebar__panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(14, 24, 32, .98), rgba(14, 24, 32, .98));
  border: 1px solid rgba(180, 80, 70, .18);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
  overflow-x: hidden;
  overflow-y: auto;
}

.app-sidebar__panel::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar__panel::-webkit-scrollbar-thumb {
  background: rgba(180, 80, 70, .24);
  border-radius: 999px;
}

.app-sidebar__panel::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar__brand-block,
.app-sidebar__screen-summary,
.app-sidebar__section {
  position: relative;
  z-index: 1;
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-sidebar__brand-row {
  display: flex;
  align-items: center;
  border-radius: 20px;
}

@media (min-width: 769px) {
  .bottom-nav {
    left: max(24px, calc(50vw - 430px));
    right: auto;
    bottom: 14px;
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    transform: none;
  }

  .detail-actions {
    left: max(24px, calc(50vw - 430px));
    right: auto;
    bottom: 16px;
    width: min(860px, calc(100vw - 48px));
    max-width: none;
    transform: none;
  }
}

@media (max-width: 768px) {
  #screen-main,
  #screen-projects,
  #screen-all-tasks,
  #screen-attendance,
  #screen-profile,
  #screen-cmms-ai,
  #screen-warehouse,
  #screen-quotations,
  #screen-support,
  #screen-tools,
  #screen-notifications,
  #screen-notification-settings,
  #screen-roles-permissions,
  #screen-daily-checklist-templates,
  #screen-daily-checklist-form,
  #screen-daily-checklist-run,
  #screen-daily-checklist-my,
  #screen-eq-stickers,
  #screen-changelog,
  #screen-equipment-detail,
  #screen-project-detail,
  #screen-task-detail,
  #screen-equipment-form,
  #screen-project-form,
  #screen-task-form {
    padding-bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 32px) !important;
  }

  .detail-actions {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    width: auto !important;
    z-index: 95 !important;
  }
}

/* --- Unified Filter/Search Layout -------------------- */
.pg-filter-bar,
.pg-filter-row,
.wh-filter-bar,
.q-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pg-filter-bar>.search-box,
.pg-filter-row>.search-box,
.wh-filter-bar>.search-box,
.q-filter-bar>.search-box,
.pg-filter-bar>.wh-search-box,
.pg-filter-bar>.q-search-box,
.pg-filter-row>.wh-search-box,
.pg-filter-row>.q-search-box {
  flex: 1 1 320px;
  min-width: min(100%, 280px);
  width: auto;
}

.pg-filter-bar>.filter-select,
.pg-filter-row>.filter-select,
.pg-filter-bar>input.filter-select,
.pg-filter-row>input.filter-select {
  flex: 0 1 220px;
  min-width: 160px;
  max-width: 100%;
}

.pg-filter-bar>.btn,
.pg-filter-row>.btn,
.pg-filter-bar>.btn-sm,
.pg-filter-row>.btn-sm {
  min-height: 44px;
  flex: 0 0 auto;
}

.pg-filter-bar>.btn-icon,
.pg-filter-row>.btn-icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  flex: 0 0 auto;
  border: 1px solid rgba(180, 80, 70, .18);
  background: var(--ui-input-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.pg-filter-bar>.btn-icon:hover,
.pg-filter-row>.btn-icon:hover {
  background: rgba(26, 42, 53, .92);
}

.pg-filter-bar>.pg-badge,
.pg-filter-row>.pg-badge,
.pg-filter-bar>span,
.pg-filter-row>span {
  max-width: 100%;
}

@media (min-width: 769px) {

  .pg-filter-bar,
  .pg-filter-row,
  .wh-filter-bar,
  .q-filter-bar {
    padding: 14px 16px;
    gap: 12px;
  }

  .pg-filter-bar>.search-box,
  .pg-filter-row>.search-box,
  .wh-filter-bar>.search-box,
  .q-filter-bar>.search-box,
  .pg-filter-bar>.wh-search-box,
  .pg-filter-bar>.q-search-box,
  .pg-filter-row>.wh-search-box,
  .pg-filter-row>.q-search-box {
    flex-basis: 420px;
  }

  .pg-filter-bar>.filter-select,
  .pg-filter-row>.filter-select,
  .pg-filter-bar>input.filter-select,
  .pg-filter-row>input.filter-select {
    min-width: 180px;
    max-width: 240px;
  }
}

/* --- Global Sidebar Shell -------------------------------- */
body.app-shell-sidebar-active {
  --shell-sidebar-width: 292px;
}

.app-sidebar {
  position: fixed;
  inset: calc(12px + var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px)) auto 12px 12px;
  width: var(--shell-sidebar-width, 292px);
  z-index: 180;
}

#screen-splash.active~.app-sidebar,
#screen-login.active~.app-sidebar {
  display: none !important;
}

.app-sidebar.hidden {
  display: none !important;
}

.app-sidebar__panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(14, 24, 32, .98), rgba(14, 24, 32, .98));
  border: 1px solid rgba(180, 80, 70, .18);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .34);
  backdrop-filter: blur(18px);
  overflow-x: hidden;
  overflow-y: auto;
}

.app-sidebar__panel::-webkit-scrollbar {
  width: 6px;
}

.app-sidebar__panel::-webkit-scrollbar-thumb {
  background: rgba(180, 80, 70, .24);
  border-radius: 999px;
}

.app-sidebar__panel::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar__brand-block,
.app-sidebar__screen-summary,
.app-sidebar__section {
  position: relative;
  z-index: 1;
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-sidebar__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-sidebar__toggle,
.app-sidebar__reopen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(180, 80, 70, .20);
  background: rgba(19, 29, 37, .88);
  color: #e8eef5;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
}

.app-sidebar__toggle:hover,
.app-sidebar__reopen:hover {
  background: rgba(26, 42, 53, .96);
}

.app-sidebar__toggle svg,
.app-sidebar__reopen svg {
  width: 18px;
  height: 18px;
}

.app-sidebar__brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(26, 42, 53, .96), rgba(14, 24, 32, .96));
  padding: 6px;
  border: 1px solid rgba(180, 80, 70, .16);
}

.app-sidebar__brand-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.app-sidebar__brand-copy strong {
  font-size: 16px;
  line-height: 1.15;
  color: #e8eef5;
}

.app-sidebar__brand-copy span {
  font-size: 12px;
  line-height: 1.45;
  color: #a8bdd4;
}

.app-sidebar__screen-summary {
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(19, 29, 37, .95), rgba(14, 24, 32, .95));
  border: 1px solid rgba(180, 80, 70, .14);
}

.app-sidebar__eyebrow,
.app-sidebar__section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a8bdd4;
}

.app-sidebar__title {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: #e8eef5;
  overflow-wrap: anywhere;
}

.app-sidebar__subtitle {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #a8bdd4;
}

.app-sidebar__section {
  display: grid;
  gap: 10px;
}

.app-sidebar__section--quick {
  flex: 0 0 auto;
}

.app-sidebar__section--nav {
  flex: 0 0 auto;
}

.app-sidebar__section--actions {
  min-height: 0;
  flex: 0 0 auto;
}

.app-sidebar__nav.bottom-nav {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.app-sidebar__nav .nav-tab {
  justify-content: flex-start;
  flex-direction: row;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border-radius: 18px;
  color: #a8bdd4;
}

.app-sidebar__nav .nav-tab svg,
.app-sidebar__nav .nav-profile-avatar-wrap,
.app-sidebar__nav .nav-profile-avatar {
  width: 22px;
  height: 22px;
}

.app-sidebar__nav .nav-tab-label {
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
}

.app-sidebar__nav .nav-tab.active {
  color: #fff;
  background: var(--clr-primary, #2563eb);
  box-shadow: none;
}

.app-sidebar__nav .nav-tab:hover {
  background: rgba(26, 42, 53, .88);
  color: #e8eef5;
}

.app-sidebar__shortcuts,
.app-sidebar__actions {
  display: grid;
  gap: 8px;
}

.app-sidebar__actions {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.app-sidebar__shortcut,
.app-sidebar__action {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(180, 80, 70, .14);
  background: rgba(10, 17, 30, .56);
  color: #d5e5f8;
  text-align: left;
}

.app-sidebar__shortcut svg,
.app-sidebar__action svg {
  width: 20px;
  height: 20px;
}

.app-sidebar__shortcut span,
.app-sidebar__action-label {
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.app-sidebar__shortcut:hover,
.app-sidebar__action:hover {
  background: rgba(26, 42, 53, .92);
  border-color: rgba(220, 100, 90, .24);
}

.app-sidebar__shortcut.active,
.app-sidebar__action--primary {
  background: var(--clr-primary, #2563eb);
  border-color: transparent;
  color: #fff;
}

.app-sidebar__action--hero {
  min-height: 52px;
  background: var(--clr-primary, #2563eb);
  border-color: transparent;
  box-shadow: none;
  color: #fff;
}

.app-sidebar__action--secondary {
  background: rgba(19, 29, 37, .88);
}

.app-sidebar__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.app-sidebar__empty {
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed var(--line, #e4ebf1);
  background: var(--surface-soft, #f5f8fb);
  color: var(--ink-muted, #9aa9b6);
  font-size: 12px;
  line-height: 1.6;
}

/* Equal breathing room on both sides of the content region that remains
   right of the sidebar — previously the right side only had 12px against
   24px on the left, which read as content "pushed" toward the sidebar. */
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) {
  padding: 24px 24px 24px calc(var(--shell-sidebar-width, 292px) + 24px) !important;
}

body.app-shell-sidebar-active.app-shell-sidebar-collapsed .screen:not(#screen-login):not(#screen-splash) {
  padding-left: 24px !important;
}

body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .app-header,
body.app-shell-sidebar-active .bottom-nav:not(.app-sidebar__nav) {
  display: none !important;
}

body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .pg-tabs,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .detail-tab-bar,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .pg-filter-bar,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .pg-filter-row,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .wh-filter-bar,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .q-filter-bar,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .members-section,
body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) .pg-stats-strip {
  margin-top: 0;
}

body.app-shell-sidebar-active .detail-actions {
  left: calc(var(--shell-sidebar-width, 292px) + 24px);
  right: 12px;
  bottom: 12px;
  width: auto;
  transform: none;
}

body.app-shell-sidebar-active.app-shell-sidebar-collapsed .detail-actions {
  left: 12px;
}

body.app-shell-sidebar-active.app-shell-sidebar-collapsed .app-sidebar {
  transform: translateX(calc(-100% - 24px));
  pointer-events: none;
}

.app-sidebar {
  transition: transform .24s ease, opacity .2s ease;
}

.app-sidebar__reopen {
  position: fixed;
  left: 12px;
  top: calc(12px + var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px));
  z-index: 181;
}

@media (max-width: 1199px) {
  body.app-shell-sidebar-active {
    --shell-sidebar-width: 132px;
  }

  .app-sidebar {
    inset: calc(10px + var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px)) auto 10px 10px;
  }

  .app-sidebar__panel {
    padding: 12px 10px;
    gap: 12px;
    border-radius: 24px;
  }

  .app-sidebar__brand-copy,
  .app-sidebar__subtitle {
    display: none;
  }

  .app-sidebar__section-title {
    display: block;
    text-align: center;
    font-size: 10px;
    letter-spacing: .08em;
    line-height: 1.25;
    color: #a8bdd4;
  }

  .app-sidebar__screen-summary {
    padding: 10px 8px;
    text-align: center;
  }

  .app-sidebar__eyebrow {
    display: none;
  }

  .app-sidebar__title {
    margin-top: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .app-sidebar__brand {
    justify-content: center;
  }

  .app-sidebar__brand-logo {
    width: 40px;
    height: 40px;
  }

  .app-sidebar__nav .nav-tab,
  .app-sidebar__shortcut,
  .app-sidebar__action {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    padding: 10px 8px;
    min-height: 68px;
    text-align: center;
  }

  .app-sidebar__nav .nav-tab {
    flex-direction: column;
  }

  .app-sidebar__nav .nav-tab-label,
  .app-sidebar__shortcut span,
  .app-sidebar__action-label {
    font-size: 11px;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) {
    padding-left: calc(var(--shell-sidebar-width, 108px) + 18px) !important;
  }

  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .screen:not(#screen-login):not(#screen-splash) {
    padding-left: 10px !important;
  }

  body.app-shell-sidebar-active .detail-actions {
    left: calc(var(--shell-sidebar-width, 108px) + 18px);
    right: 10px;
    bottom: 10px;
  }

  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .detail-actions {
    left: 10px;
  }

  .app-sidebar__brand-row {
    justify-content: center;
  }

  .app-sidebar__toggle,
  .app-sidebar__reopen {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
}

@media (max-width: 768px) {
  body.app-shell-sidebar-active {
    --shell-sidebar-width: 122px;
  }

  .app-sidebar {
    inset: 8px auto 8px 8px;
  }

  .app-sidebar__panel {
    padding: 10px 8px;
    gap: 10px;
    border-radius: 22px;
  }

  .app-sidebar__section-title {
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .06em;
  }

  .app-sidebar__brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .app-sidebar__nav .nav-tab,
  .app-sidebar__shortcut,
  .app-sidebar__action {
    min-height: 66px;
    padding: 9px 6px;
    border-radius: 16px;
  }

  .app-sidebar__nav .nav-tab svg,
  .app-sidebar__shortcut svg,
  .app-sidebar__action svg,
  .app-sidebar__nav .nav-profile-avatar-wrap,
  .app-sidebar__nav .nav-profile-avatar {
    width: 18px;
    height: 18px;
  }

  .app-sidebar__nav .nav-tab-label,
  .app-sidebar__shortcut span,
  .app-sidebar__action-label {
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.app-shell-sidebar-active .screen:not(#screen-login):not(#screen-splash) {
    padding: 8px 8px 8px calc(var(--shell-sidebar-width, 88px) + 16px) !important;
  }

  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .screen:not(#screen-login):not(#screen-splash) {
    padding: 8px !important;
  }

  body.app-shell-sidebar-active .detail-actions {
    left: calc(var(--shell-sidebar-width, 88px) + 16px);
    right: 8px;
    bottom: 8px;
  }

  body.app-shell-sidebar-active.app-shell-sidebar-collapsed .detail-actions {
    left: 8px;
  }

  .app-sidebar__reopen {
    left: 8px;
    top: calc(8px + var(--net-hud-h) + var(--net-hud-gap) + env(safe-area-inset-top, 0px));
  }
}

@media print {
  .app-sidebar {
    display: none !important;
  }
}

@media (min-width: 1024px) {

  .pg-filter-bar,
  .pg-filter-row,
  .wh-filter-bar,
  .q-filter-bar,
  .pg-tabs,
  .detail-tab-bar,
  .members-section,
  .pg-stats-strip,
  .pg-list,
  .form-container,
  .detail-container,
  .detail-tab-body,
  .att-history-list,
  .notif-list,
  .scanner-container {
    width: min(1280px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
  }

  .pg-list,
  .att-history-list,
  .notif-list {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {

  .pg-filter-bar,
  .pg-filter-row,
  .wh-filter-bar,
  .q-filter-bar {
    gap: 10px;
  }

  .pg-filter-bar>.search-box,
  .pg-filter-row>.search-box,
  .wh-filter-bar>.search-box,
  .q-filter-bar>.search-box,
  .pg-filter-bar>.wh-search-box,
  .pg-filter-bar>.q-search-box,
  .pg-filter-row>.wh-search-box,
  .pg-filter-row>.q-search-box {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .pg-filter-bar>.filter-select,
  .pg-filter-row>.filter-select,
  .pg-filter-bar>input.filter-select,
  .pg-filter-row>input.filter-select {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    max-width: none;
  }

  .pg-filter-bar>.btn:not(.btn-icon),
  .pg-filter-row>.btn:not(.btn-icon),
  .pg-filter-bar>.btn-sm:not(.btn-icon),
  .pg-filter-row>.btn-sm:not(.btn-icon) {
    min-width: 120px;
  }
}

.cmms-ai-container {
  --cmms-ai-ink: #e8eef5;
  --cmms-ai-soft: #a8bdd4;
  --cmms-ai-line: rgba(180, 80, 70, .16);
  --cmms-ai-panel: linear-gradient(180deg, rgba(19, 29, 37, .98), rgba(14, 24, 32, .98));
  display: grid;
  gap: 18px;
  position: relative;
}

.cmms-ai-container::before {
  content: '';
  position: absolute;
  inset: 8px 18px auto;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(182, 58, 49, .18), rgba(182, 58, 49, 0));
  filter: blur(18px);
  pointer-events: none;
}

.cmms-ai-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr);
  gap: 18px;
  align-items: stretch;
}

.cmms-ai-hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(182, 58, 49, .18), transparent 30%),
    linear-gradient(135deg, rgba(19, 29, 37, .94), rgba(14, 24, 32, .98) 68%);
  border: 1px solid rgba(180, 80, 70, .16);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cmms-ai-hero::after {
  content: '';
  position: absolute;
  inset: auto -20% -40% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 58, 49, .16), transparent 65%);
}

.cmms-ai-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  margin-bottom: 18px;
  color: #ffd6d1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(220, 100, 90, .16);
}

.cmms-ai-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: center;
  margin-bottom: 18px;
}

.cmms-ai-hero-copy h3,
.cmms-ai-hero h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--cmms-ai-ink);
}

.cmms-ai-hero-copy p,
.cmms-ai-hero p {
  margin: 0;
  max-width: 42ch;
  color: var(--cmms-ai-soft);
  line-height: 1.7;
  font-size: 15px;
}

.cmms-ai-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cmms-ai-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(220, 100, 90, .16);
  color: #dceeff;
  font-size: 12px;
  font-weight: 700;
}

.cmms-ai-signal {
  position: relative;
  width: 180px;
  height: 180px;
  margin-left: auto;
}

.cmms-ai-signal-core,
.cmms-ai-signal-ring {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.cmms-ai-signal-core {
  width: 72px;
  height: 72px;
  background: radial-gradient(circle at 30% 30%, #ffd6d1, #d45f55 48%, #8f2e26 100%);
  box-shadow: 0 0 0 10px rgba(182, 58, 49, .08), 0 0 50px rgba(182, 58, 49, .30);
}

.cmms-ai-signal-ring {
  border: 1px solid rgba(220, 100, 90, .22);
}

.cmms-ai-signal-ring-a {
  width: 118px;
  height: 118px;
}

.cmms-ai-signal-ring-b {
  width: 164px;
  height: 164px;
}

.cmms-ai-signal-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 100, 90, .50), transparent);
}

.cmms-ai-signal-line-a {
  inset: 35% 12% auto;
}

.cmms-ai-signal-line-b {
  inset: auto 18% 30%;
}

.cmms-ai-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cmms-ai-stat-card {
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(14, 24, 32, .42);
  border: 1px solid rgba(180, 80, 70, .12);
  backdrop-filter: blur(8px);
}

.cmms-ai-stat-card-primary {
  background: linear-gradient(180deg, rgba(182, 58, 49, .18), rgba(14, 24, 32, .50));
}

.cmms-ai-stat-card small {
  display: block;
  color: var(--cmms-ai-soft);
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cmms-ai-stat-card strong {
  font-size: 34px;
  line-height: 1;
  color: var(--cmms-ai-ink);
}

.cmms-ai-command-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(19, 29, 37, .98), rgba(7, 14, 29, .98));
  border: 1px solid var(--cmms-ai-line);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .24);
}

.cmms-ai-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cmms-ai-panel-subtitle {
  margin: 6px 0 0;
  color: var(--cmms-ai-soft);
  font-size: 13px;
  line-height: 1.6;
}

.cmms-ai-loading {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(182, 58, 49, .14);
  color: #ffd6d1;
  font-size: 12px;
  font-weight: 700;
}

.cmms-ai-reply {
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(19, 29, 37, .96), rgba(14, 24, 32, .96));
  border: 1px solid rgba(180, 80, 70, .14);
  color: var(--cmms-ai-ink);
  white-space: pre-wrap;
  line-height: 1.8;
  min-height: 180px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cmms-ai-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cmms-ai-quick-btn {
  border-radius: 999px;
  min-height: 40px;
  padding-left: 14px;
  padding-right: 14px;
}

.cmms-ai-form {
  display: grid;
  gap: 10px;
}

.cmms-ai-form-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cmms-ai-soft);
}

.cmms-ai-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 96px;
  border-radius: 18px;
  background: rgba(14, 24, 32, .88);
  border: 1px solid rgba(180, 80, 70, .16);
  color: #ffffff;
  caret-color: #ffffff;
  padding: 14px 16px;
  line-height: 1.7;
}

.cmms-ai-form textarea::placeholder {
  color: rgba(232, 238, 245, .62);
}

.cmms-ai-form textarea:focus {
  outline: none;
  border-color: rgba(182, 58, 49, .42);
  box-shadow: 0 0 0 3px rgba(182, 58, 49, .14);
}

.cmms-ai-form-actions {
  justify-content: flex-end;
}

.cmms-ai-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cmms-ai-list-card {
  min-height: 280px;
  padding: 18px;
  border-radius: 24px;
  background: var(--cmms-ai-panel);
  border: 1px solid var(--cmms-ai-line);
}

.cmms-ai-list-card-reminders {
  background:
    linear-gradient(180deg, rgba(102, 28, 22, .28), rgba(14, 24, 32, .98));
}

.cmms-ai-list-card-tasks {
  background:
    linear-gradient(180deg, rgba(143, 46, 38, .18), rgba(14, 24, 32, .98));
}

.cmms-ai-list-card-notifications {
  background:
    linear-gradient(180deg, rgba(102, 28, 22, .16), rgba(14, 24, 32, .98));
}

.cmms-ai-card-head {
  margin-bottom: 14px;
}

.cmms-ai-card-head p {
  margin: 6px 0 0;
  color: var(--cmms-ai-soft);
  font-size: 13px;
}

.cmms-ai-list {
  display: grid;
  gap: 10px;
}

.cmms-ai-list-item {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(180, 80, 70, .12);
}

.cmms-ai-list-item strong,
.cmms-ai-list-item p,
.cmms-ai-list-item small {
  display: block;
}

.cmms-ai-list-item strong {
  color: var(--cmms-ai-ink);
}

.cmms-ai-list-item p {
  margin: 6px 0;
  color: #a8bdd4;
}

.cmms-ai-list-item small,
.cmms-ai-empty {
  color: var(--cmms-ai-soft);
}

.cmms-ai-empty {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px dashed rgba(180, 80, 70, .16);
}

@media (max-width: 1080px) {

  .cmms-ai-stage,
  .cmms-ai-board {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cmms-ai-hero-grid {
    grid-template-columns: 1fr;
  }

  .cmms-ai-signal {
    width: 140px;
    height: 140px;
    margin: 8px 0 0;
  }

  .cmms-ai-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Daily Check Mark (تشيك مارك يومي)
   ============================================================ */
.dc-progress-wrap {
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--clr-border);
}

.dc-item-list,
.dc-item-list-inline {
  display: flex;
  flex-direction: column;
}

.dc-group-header {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 14px 16px 6px;
}

.dc-item-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--clr-border);
  cursor: pointer;
  transition: background .15s ease;
}

.dc-item-row:hover {
  background: var(--clr-surface-2);
}

.dc-item-row:active {
  background: var(--clr-surface-3);
}

.dc-item-check-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-border-2);
  background: transparent;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.dc-item-row.dc-item-checked .dc-item-check-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: #16a34a;
  color: #fff;
}

.dc-item-row.dc-item-issue .dc-item-check-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #d97706;
  color: #fff;
}

.dc-item-check-btn svg {
  width: 16px;
  height: 16px;
}

.dc-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dc-item-main strong {
  font-size: var(--fs-md);
  color: var(--clr-text);
}

.dc-item-main small {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.dc-item-comment {
  font-size: var(--fs-sm);
  color: var(--clr-text-sub);
  background: var(--clr-surface-2);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  margin: 2px 0 0;
}

.dc-item-eq-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  color: var(--clr-primary);
  border: 1px solid var(--clr-primary);
  border-radius: 999px;
  padding: 1px 8px;
}

.dc-item-flag-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-item-row.dc-item-issue .dc-item-flag-btn {
  color: #f59e0b;
}

.dc-item-flag-btn svg {
  width: 16px;
  height: 16px;
}

.dcf-item-row {
  margin-bottom: 12px;
}

.dcf-items-preview {
  margin-top: 16px;
}
.dcf-preview-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-text-muted, #6b7c8c);
  margin-bottom: 8px;
}
.dcf-preview-group {
  background: var(--clr-surface-2, #f4f8fb);
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: var(--r-md, 12px);
  padding: 10px 14px;
  margin-bottom: 10px;
}
.dcf-preview-eq {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--clr-text, #16324f);
  margin-bottom: 6px;
}
.dcf-preview-eq svg { flex-shrink: 0; color: var(--clr-primary, #ff6b57); }
.dcf-preview-items {
  margin: 0;
  padding-inline-start: 20px;
  font-size: 12.5px;
  color: var(--clr-text-sub, #47607a);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Generic padded wrapper for content placed directly inside .detail-section
   — that class itself has no padding (relies on children like .detail-grid
   supplying their own), so unwrapped content sat flush against its edges
   and got clipped by the section's overflow:hidden. */
.detail-section-pad {
  padding: var(--sp-md);
}

/* Work Order Checklist tab */
.twc-template-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.twc-template-row select {
  flex: 1;
  min-width: 120px;
  padding: 9px 10px;
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: var(--r-md, 10px);
  background: var(--clr-surface, #fff);
  color: var(--clr-text, #16324f);
  font-size: 13px;
}
.twc-template-row .btn { flex-shrink: 0; }
.twc-item-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: var(--r-md, 12px);
  margin-bottom: 8px;
  background: var(--clr-surface, #fff);
}
.twc-item-row.is-checked {
  background: var(--clr-surface-2, #f4f8fb);
  border-color: var(--clr-success, #16a34a);
}
.twc-item-check-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.twc-item-check-wrap input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--clr-success, #16a34a);
}
.twc-item-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.twc-item-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--clr-text, #16324f);
}
.is-checked .twc-item-name {
  text-decoration: line-through;
  color: var(--clr-text-muted, #6b7c8c);
}
.twc-item-desc {
  font-size: 12px;
  color: var(--clr-text-sub, #47607a);
}
.twc-item-meta {
  font-size: 11px;
  color: var(--clr-success, #16a34a);
  font-weight: 600;
}

.changelog-card {
  background: linear-gradient(160deg, var(--clr-surface-2), var(--clr-surface));
  border: 1.5px solid var(--clr-border);
  border-left: 3px solid var(--clr-primary);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 14px;
  box-shadow: var(--shadow-sm);
}

.changelog-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.changelog-version-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dk));
  border-radius: 999px;
  padding: 3px 12px;
}

.changelog-date {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
}

.changelog-card-title {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
  color: var(--clr-text);
}

.changelog-list {
  margin: 0 0 10px;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.changelog-list li {
  font-size: var(--fs-md);
  color: var(--clr-text-sub);
  line-height: 1.5;
}

.changelog-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--clr-border);
}

.dc-linked-task-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--clr-info);
  text-decoration: none;
    right: 0 !important;
    width: 100% !important;
    height: var(--nav-h) !important;
    flex-direction: row !important;
    border-radius: 0 !important;
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: var(--clr-surface) !important;
    border-top: 1.5px solid var(--clr-border) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .3) !important;
    z-index: 100 !important;
  }

  .bottom-nav:not(.app-sidebar__nav) .nav-tab {
    flex: 1 !important;
    width: auto !important;
    min-height: 100% !important;
    padding: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
  }

  .bottom-nav:not(.app-sidebar__nav) .nav-tab svg {
    width: 22px !important;
    height: 22px !important;
  }

  .bottom-nav:not(.app-sidebar__nav) .nav-tab-label {
    font-size: 10px !important;
    line-height: 1 !important;
    min-height: auto !important;
  }

  /* Remove the left margin/padding that was added for the floating rail */
  .wh-filter-bar,
  .q-filter-bar,
  .wh-type-tabs {
    margin-left: 10px !important;
  }

  .wh-list,
  .q-list {
    padding-left: 10px !important;
  }
  /* NOTE: pre-existing structural issue found while auditing this file —
     this stray closing brace suggests the block above (from
     .dc-linked-task-badge through here) was originally meant to be wrapped
     in a mobile-only @media query whose opening tag was lost at some
     earlier edit, so these !important rules currently apply at all
     viewport widths instead of mobile-only. Left as-is (unscoped) to avoid
     changing live behavior outside this pass's scope — flagged for the
     user to decide whether to fix separately. */

/* ============================================================
   Spacing scale — the only tokens from this former "NATIVE APP
   DESIGN SYSTEM" block that aren't superseded by rebrand.css's
   canonical :root (colors/radius/shadow/header/nav all now live
   there — see the top of this file).
   ============================================================ */
:root {
  --sp-xs: 6px;
  --sp-sm: 10px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
}

body {
  background: radial-gradient(circle at 12% -8%, #273d73 0, transparent 30rem), var(--clr-bg);
  letter-spacing: .005em;
}

.screen {
  background: transparent;
}

.app-header {
  min-height: var(--header-h);
  padding: 0 max(var(--sp-md), env(safe-area-inset-left, 0px));
  background: rgba(10, 16, 32, .82);
  border-color: var(--clr-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.header-title { text-align: start; padding-inline: 4px; }
.header-title span { font-size: clamp(16px, 3vw, 19px); letter-spacing: -.02em; }
.header-title small { margin-top: 1px; color: var(--clr-text-muted); font-size: 11px; }

.btn, .btn-icon, .filter-select, input, select, textarea {
  min-height: 44px;
}

.btn {
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:active, .btn-icon:active, .nav-tab:active { transform: scale(.96); }
.btn-primary { background: linear-gradient(135deg, #ff7369, #dd453f); box-shadow: 0 9px 20px rgba(222, 69, 63, .26); }
.btn-secondary { background: rgba(140, 164, 209, .11); border-color: var(--clr-border-2); }
.btn-icon { border-radius: 14px; color: var(--clr-text-sub); }
.btn-icon.primary { border-radius: 14px; box-shadow: 0 8px 16px rgba(222, 69, 63, .24); }

:is(button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(124, 156, 255, .72);
  outline-offset: 2px;
}

.pg-tabs {
  padding: 8px var(--sp-md) 10px;
  gap: 8px;
  background: rgba(10, 16, 32, .72);
  border-bottom: 1px solid var(--clr-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab-btn { min-height: 36px; border-radius: 999px; padding: 0 14px; font-size: 12px; font-weight: 700; }
.pg-tab-btn.active { background: rgba(255, 102, 92, .16); color: #ffd1cd; border-color: rgba(255, 102, 92, .3); }
.pg-tab-count { padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.1); }

.pg-tab-panel, .form-container, .detail-container, .tasks-container, .milestones-container { padding: var(--sp-md); }
.pg-filter-bar { gap: 10px; padding: 4px 0 14px; }
.search-box, .filter-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border: 1px solid var(--clr-border);
  background: rgba(22, 33, 58, .82);
  border-radius: 14px;
  color: var(--clr-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.search-box { min-height: 46px; padding-inline: 14px; }
.search-box:focus-within { border-color: rgba(124,156,255,.8); box-shadow: 0 0 0 3px rgba(124,156,255,.13); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { padding: 11px 13px; }
.filter-toggle-btn { background: rgba(124,156,255,.11); border: 1px solid var(--clr-border); }

.pg-row, .project-card, .task-card, .detail-section, .stat-card, .dashboard-card,
.warehouse-card, .q-card, .support-card, .profile-card, .changelog-card {
  border: 1px solid var(--clr-border);
  background: linear-gradient(145deg, rgba(27, 40, 68, .96), rgba(16, 26, 45, .96));
  box-shadow: var(--shadow-sm);
}
.pg-row, .project-card, .task-card { border-radius: var(--r-lg); }
.pg-row { padding: 15px; margin-bottom: 10px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pg-row:hover, .project-card:hover, .task-card:hover { transform: translateY(-2px); border-color: rgba(157,180,216,.35); box-shadow: var(--shadow-md); }
.pg-row-title, .project-card-title, .task-card-title { font-size: 15px; letter-spacing: -.01em; }
.pg-row-meta, .pg-row-sub, .task-card-meta { color: var(--clr-text-muted); }

.status-badge, .badge, .chip, .pg-status { border-radius: 999px; font-weight: 700; letter-spacing: .02em; }

table { border-collapse: separate; border-spacing: 0 7px; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--clr-surface-2); color: var(--clr-text-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
tbody tr { background: rgba(22,33,58,.65); box-shadow: 0 1px 0 var(--clr-border); }
td, th { padding: 12px 14px; }
tbody td:first-child, thead th:first-child { border-radius: 12px 0 0 12px; }
tbody td:last-child, thead th:last-child { border-radius: 0 12px 12px 0; }

.modal-overlay, .modal-backdrop { background: rgba(1, 6, 17, .68); backdrop-filter: blur(8px); }
.modal, .modal-content, .dialog, .bottom-sheet, .sheet-content {
  border: 1px solid var(--clr-border-2);
  background: #131e34;
  box-shadow: var(--shadow-lg);
  border-radius: 24px;
}

.app-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  min-width: 56px;
  height: 56px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff7369, #dc453f);
  box-shadow: 0 14px 28px rgba(222,69,63,.34), 0 2px 4px rgba(0,0,0,.32);
  font-size: 13px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.app-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(222,69,63,.42); }
.app-fab svg { width: 21px; height: 21px; }

.bottom-nav:not(.app-sidebar__nav).visible {
  background: rgba(16, 26, 45, .92) !important;
  border-color: var(--clr-border) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.bottom-nav:not(.app-sidebar__nav) .nav-tab { position: relative; color: var(--clr-text-muted); }
.bottom-nav:not(.app-sidebar__nav) .nav-tab.active { color: var(--clr-primary-lt); }
.bottom-nav:not(.app-sidebar__nav) .nav-tab.active::before { content: ''; position: absolute; top: 5px; width: 24px; height: 3px; border-radius: 99px; background: var(--clr-primary); }

@media (min-width: 769px) {
  .app-fab { bottom: 28px; right: 32px; }
  .pg-tab-panel, .form-container, .detail-container, .tasks-container, .milestones-container { padding: 22px clamp(22px, 3vw, 42px); }
  .app-header { padding-inline: clamp(22px, 3vw, 42px); }
  .app-sidebar__panel { background: #0f172a; border-right: 1px solid #1e293b; }
}

html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .header-title { text-align: start; }
html[dir="rtl"] .app-fab { left: max(18px, env(safe-area-inset-left, 0px)); right: auto; }
html[dir="rtl"] .app-sidebar__panel { border-right: 0; border-left: 1px solid var(--clr-border); }
html[dir="rtl"] .btn svg:not(.no-mirror),
html[dir="rtl"] .header-left svg { transform: scaleX(-1); }
html[dir="rtl"] tbody td:first-child, html[dir="rtl"] thead th:first-child { border-radius: 0 12px 12px 0; }
html[dir="rtl"] tbody td:last-child, html[dir="rtl"] thead th:last-child { border-radius: 12px 0 0 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 480px) {
  .app-header { padding-inline: 10px; }
  .header-right { gap: 1px; }
  .header-right .btn-icon:not(.primary):nth-of-type(3),
  .header-right .btn-icon:not(.primary):nth-of-type(4) { display: none; }
  .app-fab { width: 56px; padding: 0; border-radius: 50%; }
  .app-fab span { display: none; }
}

/* ============================================================
   Team Feed — internal employee timeline
   ============================================================ */
.tf-shell { max-width: 640px; margin-inline: auto; width: 100%; }

.tf-composer {
  padding: 14px;
  margin-bottom: 16px;
  background: var(--clr-surface, #fff);
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(52,79,103,.065));
}
.tf-composer__row { display: flex; gap: 10px; align-items: flex-start; }
.tf-composer__row textarea {
  flex: 1;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: 12px;
  font: inherit;
  resize: vertical;
}
.tf-composer__footer { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tf-composer__footer select {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--clr-border, #e4ebf1);
  font-size: 12.5px;
}
.tf-composer__photo-name { font-size: 11px; color: var(--clr-text-muted, #7c8a99); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tf-post {
  padding: 14px;
  margin-bottom: 12px;
  background: var(--clr-surface, #fff);
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(52,79,103,.065));
}
.tf-post--hidden { opacity: .6; border-style: dashed; }
.tf-post__head { display: flex; align-items: center; gap: 10px; }
.tf-post__head-copy { min-width: 0; flex: 1; }
.tf-post__head-copy strong { display: block; font-size: 13.5px; }
.tf-post__head-copy small { color: var(--clr-text-muted, #7c8a99); font-size: 11px; }
.tf-post__hidden-badge {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px;
  background: #fde8e8; color: #c22b2b; flex-shrink: 0;
}
.tf-post__menu { display: flex; gap: 2px; flex-shrink: 0; }
.tf-post__content { margin: 10px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-post__photo { margin-top: 10px; width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; }
.tf-post__footer { display: flex; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--clr-border, #e4ebf1); }
.tf-post__like-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 0; border-radius: 999px;
  background: var(--clr-surface-2, #f5f8fb); color: var(--clr-text-muted, #7c8a99);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.tf-post__like-btn--active { background: rgba(255, 107, 87, .14); color: var(--coral, #ff6b57); }

/* ============================================================
   AI Assistant — chat UI
   ============================================================ */
.ai-chat-shell {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin-inline: auto;
  width: 100%;
  height: 100%;
}
.ai-chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
}
.ai-msg { display: flex; }
.ai-msg--user { justify-content: flex-end; }
.ai-msg--assistant { justify-content: flex-start; }
.ai-msg__bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ai-msg--user .ai-msg__bubble {
  background: var(--coral, #ff6b57);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg--assistant .ai-msg__bubble {
  background: var(--clr-surface, #fff);
  border: 1px solid var(--clr-border, #e4ebf1);
  color: var(--clr-text, #344f67);
  border-bottom-left-radius: 4px;
}
.ai-msg__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-msg__action {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
}
.ai-msg__action--ok { background: #e3f7ea; color: #17803d; }
.ai-msg__action--error { background: #fde8e8; color: #c22b2b; }
.ai-msg__action code { font-family: inherit; }
.ai-msg__typing { display: flex; gap: 4px; padding: 6px 4px; }
.ai-msg__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--clr-text-muted, #9aa9b6);
  animation: aiTypingBounce 1.1s ease-in-out infinite;
}
.ai-msg__typing span:nth-child(2) { animation-delay: .15s; }
.ai-msg__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiTypingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.ai-chat-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  background: var(--clr-surface, #fff);
  border: 1px solid var(--clr-border, #e4ebf1);
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 10px 24px rgba(52,79,103,.065));
}
.ai-chat-composer textarea {
  flex: 1;
  max-height: 140px;
  padding: 9px 10px;
  border: 0;
  resize: none;
  font: inherit;
  background: transparent;
  color: var(--clr-text, #344f67);
}
.ai-chat-composer textarea:focus { outline: none; }
.ai-chat-composer .btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}