/* ============================================================
   i9amati — Design system
   Mobile-first, terracotta/cream palette
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --c-bg: #F5EFE6;
  --c-bg-alt: #EDE4D3;
  --c-paper: #FAF6EE;
  --c-ink: #1F2A2E;
  --c-ink-soft: #4A5256;
  --c-ink-muted: #8A8478;
  --c-line: #D9CFB8;
  --c-line-soft: #E5DCC7;
  --c-terracotta: #C84B31;
  --c-terracotta-deep: #9E3A24;
  --c-saffron: #D9A441;
  --c-teal: #1F5F5B;
  --c-teal-deep: #143F3D;
  --c-success: #4F7C4A;
  --c-warning: #C8841F;
  --c-danger: #B23A3A;
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(31,42,46,.06);
  --shadow-md: 0 4px 18px rgba(31,42,46,.08);
  --shadow-lg: 0 18px 50px rgba(31,42,46,.14);
  --sidebar-w: 240px;
}

/* ============================================
   THEMES — applied via [data-theme="..."] on <html>
   ============================================ */

/* Theme 1: Sahara (default) — already defined in :root above */

/* Theme 2: Médina nocturne — dark Moroccan night */
[data-theme="medina"] {
  --c-bg: #14181F;
  --c-bg-alt: #1C2230;
  --c-paper: #1E2530;
  --c-ink: #F4ECD8;
  --c-ink-soft: #C9C1B0;
  --c-ink-muted: #8A8478;
  --c-line: #2C3445;
  --c-line-soft: #232A38;
  --c-terracotta: #E36A4A;
  --c-terracotta-deep: #C84B31;
  --c-saffron: #E8B85A;
  --c-teal: #4FB8B0;
  --c-teal-deep: #1F5F5B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
}

/* Theme 3: Atlantique — Mediterranean cool, ocean breeze */
[data-theme="atlantique"] {
  --c-bg: #F1F4F1;
  --c-bg-alt: #E2E9E5;
  --c-paper: #FAFCFA;
  --c-ink: #14282E;
  --c-ink-soft: #38535A;
  --c-ink-muted: #7A8A8E;
  --c-line: #C3D0D0;
  --c-line-soft: #D6DEDB;
  --c-terracotta: #E08566;
  --c-terracotta-deep: #C66747;
  --c-saffron: #C8966A;
  --c-teal: #2C7C76;
  --c-teal-deep: #1A5550;
}

/* Theme 4: Zellige — rich emerald + ivory + gold */
[data-theme="zellige"] {
  --c-bg: #F5F0E1;
  --c-bg-alt: #EAE0C8;
  --c-paper: #FAF4E4;
  --c-ink: #1A332A;
  --c-ink-soft: #2D5546;
  --c-ink-muted: #7C8A7F;
  --c-line: #D4CDA8;
  --c-line-soft: #E2DDC0;
  --c-terracotta: #B8523A;
  --c-terracotta-deep: #8E3A26;
  --c-saffron: #D4A04A;
  --c-teal: #1A5C44;
  --c-teal-deep: #0F3F2D;
}

/* Theme 5: Parchemin — minimal newspaper / notary office */
[data-theme="parchemin"] {
  --c-bg: #F8F5F0;
  --c-bg-alt: #EFEAE2;
  --c-paper: #FCFAF6;
  --c-ink: #1F1F1F;
  --c-ink-soft: #4A4A4A;
  --c-ink-muted: #8A8A8A;
  --c-line: #D8D2C8;
  --c-line-soft: #E8E4DD;
  --c-terracotta: #B85A3F;
  --c-terracotta-deep: #8E3F28;
  --c-saffron: #B8943A;
  --c-teal: #2C5C5A;
  --c-teal-deep: #1A3F3D;
}

/* Print: always force Sahara cream + ink for ink-friendly PDFs */
@media print {
  :root, [data-theme] {
    --c-bg: #FFFFFF !important;
    --c-bg-alt: #F5F0E5 !important;
    --c-paper: #FFFFFF !important;
    --c-ink: #1F2A2E !important;
    --c-ink-soft: #4A5256 !important;
    --c-ink-muted: #6A6258 !important;
    --c-line: #D9CFB8 !important;
    --c-line-soft: #E5DCC7 !important;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--c-bg); color: var(--c-ink);
  font-family: var(--f-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-weight: 500; font-size: 14px; letter-spacing: .01em;
  transition: all .15s ease;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--c-ink); color: var(--c-bg); }
.btn-primary:hover { background: var(--c-terracotta); transform: translateY(-1px); }
.btn-accent { background: var(--c-terracotta-deep); color: white; }
.btn-accent:hover { background: var(--c-terracotta); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover { background: var(--c-paper); border-color: var(--c-ink); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-icon { padding: 9px; border-radius: var(--r-md); width: 38px; height: 38px; justify-content: center; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.eyebrow {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-muted); font-weight: 500;
}

/* ===== Brand ===== */
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-display); font-size: 22px; font-weight: 500;
  letter-spacing: -.02em; color: var(--c-ink); line-height: 1;
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  flex-shrink: 0;
  /* The animated logo SVG is embedded as background. The HTML "i" inside is hidden. */
  background-image: url("../img/logo-animated.svg?v=17");
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px rgba(200,75,49,.28);
  /* Hide the legacy "i" letter inside */
  font-size: 0;
  color: transparent;
  overflow: hidden;
}
.brand-mark::after {
  /* No longer needed — the dot is part of the SVG now */
  display: none;
}
.brand-9 { color: var(--c-terracotta); font-style: italic; }

/* ===== Pills ===== */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid;
}
.pill-paid    { background: rgba(79,124,74,.12); color: var(--c-success); border-color: rgba(79,124,74,.3); }
.pill-pending { background: rgba(200,132,31,.12); color: var(--c-warning); border-color: rgba(200,132,31,.3); }
.pill-overdue { background: rgba(178,58,58,.12); color: var(--c-danger); border-color: rgba(178,58,58,.3); }
.pill-owner   { background: rgba(31,95,91,.12); color: var(--c-teal); border-color: rgba(31,95,91,.3); }
.pill-renter  { background: rgba(217,164,65,.18); color: #8B6620; border-color: rgba(217,164,65,.4); }
.pill-vacant  { background: rgba(138,132,120,.12); color: var(--c-ink-muted); border-color: rgba(138,132,120,.3); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ===== Cards / Stats ===== */
.card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.card-padless { padding: 0; overflow: hidden; }

.stat {
  position: relative;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.stat-label {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-ink-muted); margin-bottom: 14px;
}
.stat-value {
  font-family: var(--f-display); font-size: 30px; font-weight: 500;
  letter-spacing: -.02em; line-height: 1.05;
}
.stat-delta { margin-top: 10px; font-size: 12.5px; color: var(--c-ink-muted); }
.stat-delta strong { color: var(--c-success); font-weight: 600; }
.stat-delta.neg strong { color: var(--c-danger); }
.stat.featured {
  background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink);
}
.stat.featured .stat-label { color: rgba(245,239,230,.6); }
.stat.featured .stat-delta { color: rgba(245,239,230,.7); }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-ink-muted);
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-alt);
  white-space: nowrap;
}
.table tbody td {
  padding: 14px 16px; font-size: 14px;
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--c-bg-alt); }

/* ============================================================
   APP SHELL — sidebar + main, mobile-first
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* Placeholder skeletons — visible BEFORE JS replaces them, prevents layout flicker */
#sidebar-mount {
  background: var(--c-paper);
  border-right: 1px solid var(--c-line);
  height: 100vh;
  position: sticky; top: 0;
  /* Skeleton items (CSS-only) */
  background-image:
    linear-gradient(var(--c-bg-alt), var(--c-bg-alt)),  /* brand block */
    linear-gradient(var(--c-bg-alt), var(--c-bg-alt)),
    linear-gradient(var(--c-bg-alt), var(--c-bg-alt)),
    linear-gradient(var(--c-bg-alt), var(--c-bg-alt)),
    linear-gradient(var(--c-bg-alt), var(--c-bg-alt));
  background-repeat: no-repeat;
  background-position:
    16px 24px,       /* brand */
    16px 90px,
    16px 130px,
    16px 170px,
    16px 210px;
  background-size:
    140px 36px,
    calc(100% - 32px) 32px,
    calc(100% - 32px) 32px,
    calc(100% - 32px) 32px,
    calc(100% - 32px) 32px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
#topbar-mount {
  height: 64px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--c-line-soft);
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.sidebar {
  background: var(--c-paper);
  border-right: 1px solid var(--c-line);
  padding: 22px 16px;
  display: flex; flex-direction: column;
  gap: 18px;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  z-index: 30;
  transition: transform .25s ease;
}
.sidebar .brand { padding: 6px 8px 12px; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-section-label {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-muted); padding: 8px 12px 4px;
}
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; color: var(--c-ink-soft);
  transition: all .15s ease;
  font-weight: 500;
}
.nav-link:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.nav-link.active { background: var(--c-ink); color: var(--c-bg); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
.nav-label { flex: 1; }
.nav-badge {
  background: var(--c-terracotta);
  color: white;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  letter-spacing: 0;
}
.nav-link.active .nav-badge {
  background: var(--c-saffron);
  color: var(--c-ink);
}

.main {
  min-width: 0;
  padding: 24px 32px 64px;
  position: relative;
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 0 22px;
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: 28px;
}
.topbar .search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.topbar .search:focus-within {
  border-color: var(--c-terracotta);
  box-shadow: 0 0 0 3px rgba(200,75,49,.12);
}
.topbar .search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 14px;
}

/* ===== Search results dropdown ===== */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 70vh; overflow-y: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 16px 50px rgba(31,42,46,.14);
  display: none;
  z-index: 100;
  padding: 4px;
}
.search-results.open { display: block; animation: searchIn .15s ease-out; }
@keyframes searchIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-loading, .search-empty {
  padding: 24px 18px;
  text-align: center;
  font-size: 13.5px;
  color: var(--c-ink-muted);
}
.search-group { padding: 6px 0 8px; }
.search-group + .search-group { border-top: 1px solid var(--c-line-soft); }
.search-group-title {
  padding: 8px 14px 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: 500;
}
.search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-ink);
  transition: background .12s;
}
.search-item:hover { background: var(--c-bg-alt); }
.search-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  color: white;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 500; font-size: 12px;
  flex-shrink: 0;
}
.search-icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--c-bg-alt);
  color: var(--c-ink-muted);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.search-logo {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background-size: cover; background-position: center;
  flex-shrink: 0;
}
.search-item-body { flex: 1; min-width: 0; }
.search-item-title {
  font-weight: 500; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-item-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-ink-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mobile: full width dropdown */
@media (max-width: 600px) {
  .search-results { max-height: 65vh; }
}
/* User info block (name + role pill) — sits left of the avatar circle */
.user-info {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin-left: auto;
  padding-right: 4px;
  flex-shrink: 0;
}
.user-info-name {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--c-ink);
  line-height: 1.1;
  max-width: 180px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
}
.user-role-pill.role-admin       { background: rgba(200,75,49,.12); color: #6E2515; }
.user-role-pill.role-superviseur { background: rgba(31,95,91,.13); color: #143F3D; }
.user-role-pill.role-resident    { background: rgba(217,164,65,.18); color: #6B5111; }

.topbar .avatar-wrap { position: relative; flex-shrink: 0; }
.topbar .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-ink); color: var(--c-saffron);
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 500; font-size: 14px;
  flex-shrink: 0; cursor: pointer;
  border: 2px solid transparent;
  background-size: cover; background-position: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden;
}
.topbar .avatar:hover {
  border-color: var(--c-saffron);
  box-shadow: 0 4px 12px rgba(217,164,65,.25);
}
.topbar .avatar:active { transform: scale(0.96); }
.topbar .avatar.avatar-has-photo {
  background-color: var(--c-bg-alt);
  color: transparent;
}

/* On mobile: hide name, keep just the pill + avatar */
@media (max-width: 600px) {
  .user-info-name { display: none; }
  .user-info { gap: 0; padding-right: 0; }
  .user-role-pill { font-size: 9px; padding: 2px 7px; }
}
@media (max-width: 420px) {
  .user-info { display: none; }
}

.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 230px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(31,42,46,.12);
  padding: 6px;
  display: none;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  z-index: 100;
}
.avatar-menu.open {
  display: block;
  animation: avatarMenuIn .15s ease-out forwards;
}
@keyframes avatarMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.avatar-menu-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: 4px;
}
.avatar-menu-name {
  font-weight: 500; font-size: 14px; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar-menu-role {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-terracotta); margin-top: 4px;
}
.avatar-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--c-ink);
  text-decoration: none;
  transition: background .15s;
}
.avatar-menu-item:hover { background: var(--c-bg-alt); }
.avatar-menu-item svg { color: var(--c-ink-muted); flex-shrink: 0; }
.avatar-menu-item:hover svg { color: var(--c-terracotta); }
.avatar-menu-sep {
  height: 1px; background: var(--c-line-soft);
  margin: 6px 8px;
}

/* ===== Language toggle ===== */
.lang-toggle {
  display: inline-flex; align-items: center;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.lang-toggle [data-lang] {
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--c-ink-muted);
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  font-weight: 500;
  transition: all .15s;
  min-width: 32px;
}
.lang-toggle [data-lang]:hover { color: var(--c-ink); }
.lang-toggle [data-lang].active {
  background: var(--c-terracotta);
  color: var(--c-bg);
}

/* Compact lang toggle on small screens */
@media (max-width: 800px) {
  .lang-toggle {
    padding: 2px;
    font-size: 10.5px;
  }
  .lang-toggle [data-lang] {
    padding: 4px 8px;
    min-width: 28px;
  }
}

.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Page head */
.page-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 16px;
  margin-bottom: 28px;
}
.page-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: -.025em; line-height: 1.05;
}
.page-title em { color: var(--c-terracotta); font-style: italic; font-weight: 500; }
.page-subtitle { color: var(--c-ink-muted); font-size: 14px; margin-top: 8px; }

/* Animations */
@keyframes fadeUp { from {opacity:0; transform:translateY(12px);} to {opacity:1; transform:translateY(0);} }
.fade-up { animation: fadeUp .45s ease both; }
.fade-up-1 { animation-delay: .05s; }
.fade-up-2 { animation-delay: .12s; }

/* Loading state */
.loading {
  display: grid; place-items: center;
  padding: 60px 20px;
  color: var(--c-ink-muted); font-size: 14px;
}
.spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--c-line);
  border-top-color: var(--c-terracotta);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-bottom: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center; padding: 50px 20px;
  color: var(--c-ink-muted); font-size: 14px;
}
.empty-state svg { display: block; margin: 0 auto 14px; opacity: .4; }

/* Toast */
.toast-wrap {
  position: fixed; top: 18px; right: 18px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--c-ink); color: var(--c-bg);
  padding: 14px 18px; border-radius: var(--r-md);
  font-size: 13.5px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  animation: fadeUp .25s ease both;
  max-width: 420px;
}
.toast.success { background: var(--c-success); }
.toast.error   { background: var(--c-danger); }

/* ============================================================
   MOBILE — sidebar becomes slide-in drawer
   ============================================================ */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(31,42,46,.5);
  z-index: 25;
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  #sidebar-mount {
    /* On mobile the sidebar is an off-canvas drawer — no skeleton needed */
    display: none;
  }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-toggle { display: inline-flex; }
  .main { padding: 18px 18px 60px; }
  .page-head { gap: 12px; }
  .topbar { padding-top: 4px; gap: 10px; }
  .topbar .search { max-width: none; }
  .stat { padding: 18px; }
  .stat-value { font-size: 26px; }
}

@media (max-width: 600px) {
  .topbar .search input { font-size: 16px; } /* avoid iOS zoom */
  .table thead { display: none; }
  .table tbody tr {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 12px; padding: 14px 12px;
    border-bottom: 1px solid var(--c-line-soft);
  }
  .table tbody td { padding: 4px 0; border: none; font-size: 13.5px; }
  .table tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--c-ink-muted); font-size: 10px;
    text-transform: uppercase; letter-spacing: .12em;
    display: block; margin-bottom: 2px;
    font-family: var(--f-mono); font-weight: 500;
  }
  .table tbody td[data-label].full { grid-column: 1 / -1; }

  /* Avatar dropdown: full-width-ish on mobile, anchored properly */
  .avatar-menu {
    right: 0;
    left: auto;
    min-width: 240px;
    max-width: calc(100vw - 24px);
  }
}

/* Bg noise for landing */
.bg-noise::before {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 1; opacity: .32;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.16  0 0 0 0 0.18  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================
 * CHATBOT WIDGET — floating button + drawer
 * ============================================ */
.chatbot-fab {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  right: 24px;
  z-index: 950;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 20px;
  background: var(--c-terracotta);
  color: white;
  border: none;
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(200,75,49,.35), 0 2px 6px rgba(0,0,0,.1);
  transition: all .2s;
}
.chatbot-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200,75,49,.45);
}
.chatbot-fab:active { transform: scale(0.95); }
.chatbot-fab-label { font-weight: 500; }

@media (max-width: 600px) {
  .chatbot-fab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
    right: 16px;
    padding: 12px 18px;
    font-size: 13.5px;
  }
}

.chatbot-drawer {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  right: 24px;
  width: 380px;
  height: min(640px, calc(100vh - 80px));
  z-index: 960;
  background: var(--c-paper);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(31,42,46,.25), 0 0 0 1px rgba(31,42,46,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.18,.89,.32,1.28), opacity .2s;
}
.chatbot-drawer.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
@media (max-width: 600px) {
  .chatbot-drawer {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    right: 12px;
    left: 12px;
    width: auto;
    height: min(80vh, 600px);
  }
}

.chatbot-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--c-ink);
  color: white;
}
.chatbot-head-info { display: flex; align-items: center; gap: 12px; }
.chatbot-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-terracotta);
  color: white;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 18px; font-weight: 500;
  font-style: italic;
}
.chatbot-title { font-family: var(--f-display); font-size: 15px; font-weight: 500; }
.chatbot-status {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: .08em; opacity: 0.8;
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}
.chatbot-close {
  background: transparent; border: none;
  color: white; opacity: 0.7;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  cursor: pointer; transition: all .15s;
}
.chatbot-close:hover { opacity: 1; background: rgba(255,255,255,.1); }

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--c-bg);
}

.chatbot-msg {
  display: flex; flex-direction: column;
  max-width: 92%;
}
.chatbot-msg-user { align-self: flex-end; align-items: flex-end; }
.chatbot-msg-bot  { align-self: flex-start; align-items: flex-start; }

.chatbot-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
}
.chatbot-msg-user .chatbot-bubble {
  background: var(--c-terracotta);
  color: white;
  border-bottom-right-radius: 4px;
}
.chatbot-msg-bot .chatbot-bubble {
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.chatbot-typing {
  display: inline-flex; gap: 4px;
}
.chatbot-typing span {
  width: 6px; height: 6px;
  background: var(--c-ink-muted);
  border-radius: 50%;
  animation: chatbot-typing-pulse 1.2s infinite;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatbot-typing-pulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.85); }
  30% { opacity: 1; transform: scale(1); }
}

/* Contact cards inside bot messages */
.chatbot-contacts {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px;
}
.chatbot-contact {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.contact-row-1 {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; margin-bottom: 4px;
}
.contact-verified {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-teal);
  color: white;
  font-size: 9px; font-weight: bold;
}
.contact-stars { font-size: 10.5px; margin-left: auto; }
.contact-notes {
  font-size: 12px; color: var(--c-ink-muted);
  line-height: 1.4; margin-bottom: 6px;
}
.contact-address {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--c-ink-muted); margin-bottom: 8px;
}
.contact-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.contact-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: 11.5px;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.contact-btn-call {
  background: var(--c-terracotta); color: white;
}
.contact-btn-call:hover { background: var(--c-terracotta-deep); }
.contact-btn-wa {
  background: #25D366; color: white;
}
.contact-btn-wa:hover { background: #1cb054; }

/* Suggestion chips below messages */
.chatbot-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px 0;
  background: var(--c-bg);
  max-height: 80px; overflow-y: auto;
}
.chatbot-chips:empty { padding: 0; }
.chatbot-chip {
  padding: 6px 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font: inherit; font-size: 12px;
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.chatbot-chip:hover {
  background: var(--c-terracotta);
  color: white;
  border-color: var(--c-terracotta);
}

.chatbot-form {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}
.chatbot-form input {
  flex: 1;
  padding: 10px 14px;
  background: var(--c-bg-alt);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit; font-size: 14px;
  outline: none;
  transition: all .15s;
}
.chatbot-form input:focus {
  background: white;
  border-color: var(--c-terracotta);
  box-shadow: 0 0 0 3px rgba(200,75,49,.12);
}
#chatbot-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-terracotta);
  color: white; border: none;
  display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
#chatbot-send:hover { background: var(--c-terracotta-deep); }
#chatbot-send:active { transform: scale(0.92); }

/* Hide chatbot when printing */
@media print {
  .chatbot-fab, .chatbot-drawer { display: none !important; }
}

/* ============================================
 * Topbar language toggle (always visible, between search and avatar)
 * ============================================ */
.topbar-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--c-bg-alt);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  font-weight: 600;
  flex-shrink: 0;
}
.topbar-lang-toggle button {
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  border: none;
}
.topbar-lang-toggle button:hover { color: var(--c-ink); }
.topbar-lang-toggle button.active {
  background: var(--c-terracotta);
  color: white;
}

/* Hide on very small phones to save space — fall back to dropdown */
@media (max-width: 480px) {
  .topbar-lang-toggle { display: none; }
}

/* Avatar dropdown language pills */
.avatar-menu-lang {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
}
.avatar-menu-lang-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-ink-soft);
}
.avatar-menu-lang-pills {
  display: inline-flex; gap: 2px;
  background: var(--c-bg-alt);
  border-radius: 999px;
  padding: 2px;
}
.avatar-menu-lang-pills button {
  padding: 3px 9px;
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-ink-muted);
  cursor: pointer;
  border: none;
}
.avatar-menu-lang-pills button.active {
  background: var(--c-terracotta);
  color: white;
}

/* Print: hide topbar-only chrome */
@media print {
  .topbar-lang-toggle, .avatar-menu-lang { display: none !important; }
}