/* ===== YBN shared styles (owner + tenant) — no framework ===== */
:root {
  color-scheme: dark;
  --bg: #080807; --bg-alt: #111009; --card: #18160f; --card-hover: #252014;
  --line: #493b1d; --line-strong: #806629;
  --text: #f9f4e5; --muted: #aaa291;
  --brand: #f4c542; --brand-strong: #ffe399; --brand-dim: rgba(244,197,66,.14);
  --danger: #f97066; --danger-dim: rgba(249,112,102,.14);
  --ok: #86efac; --ok-dim: rgba(34,197,94,.14);
  --warn: #fdba74; --warn-dim: rgba(249,115,22,.14);
  --ring: rgba(244,197,66,.56);
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
  --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --shadow-card: 0 16px 40px rgba(0,0,0,.36), inset 0 1px rgba(255,237,169,.04);
  --transition: .18s ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text); position: relative;
  background:
    radial-gradient(ellipse 68% 40% at 50% -12%, rgba(201,147,24,.24), transparent 68%),
    radial-gradient(circle at 100% 0, rgba(255,222,125,.06), transparent 29%), var(--bg);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before, body::after {
  content: ""; pointer-events: none; position: fixed; z-index: -1; width: 34vw; aspect-ratio: 1;
  border: 1px solid rgba(244,197,66,.075); transform: rotate(45deg);
}
body::before { top: -18vw; right: -13vw; box-shadow: 0 0 110px rgba(244,197,66,.08); }
body::after { bottom: -20vw; left: -14vw; }
h1, h2, h3, p { margin: 0; }
h1 {
  font-size: clamp(24px, 4vw, 34px); font-weight: 600; letter-spacing: -.02em;
  background: linear-gradient(105deg, #fff9df, #f4c542 52%, #a77c1d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: 19px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
small { color: var(--muted); }
#welcome, .muted-panel p { color: var(--muted); margin-top: 6px; line-height: 1.5; }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::selection { background: rgba(244,197,66,.35); }

/* ===== Buttons ===== */
button {
  border: 0; border-radius: var(--radius-sm); min-height: 42px; padding: 0 18px; color: #191304;
  background: linear-gradient(135deg, #b98719, #ffe49a 50%, #d19d28);
  font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 7px 18px rgba(216,159,28,.16);
  transition: transform var(--transition), filter var(--transition), box-shadow var(--transition), opacity var(--transition);
}
@media (hover: hover) { button:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 9px 22px rgba(216,159,28,.26); } }
button:active:not(:disabled) { transform: scale(.97); }
button:disabled { opacity: .5; cursor: wait; }
.secondary { background: rgba(255,240,185,.03); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
@media (hover: hover) { .secondary:hover:not(:disabled) { background: var(--card-hover); border-color: var(--line-strong); box-shadow: none; filter: none; } }
.danger { background: var(--danger); color: #32100c; box-shadow: none; }
.compact { min-height: 34px; padding: 0 12px; font-size: 13.5px; }

/* ===== Notice (sticky toast so it's visible while scrolling) ===== */
.notice {
  position: sticky; top: 10px; z-index: 40; margin: 12px 0; padding: 14px 16px; line-height: 1.5;
  border-radius: var(--radius-md); backdrop-filter: blur(10px); animation: slide-in .22s ease;
  background: var(--danger-dim); border: 1px solid rgba(240,68,56,.3); color: #ffb4a8;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.notice.error { background: var(--danger-dim); border-color: rgba(240,68,56,.3); color: #ffb4a8; }
.notice.success { background: var(--ok-dim); border-color: rgba(34,197,94,.38); color: var(--ok); }
.notice.warning { background: var(--warn-dim); border-color: rgba(249,115,22,.38); color: var(--warn); }
.login-card .notice { position: static; box-shadow: none; }

/* ===== Login ===== */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 18px; }
.login-card {
  width: min(420px, 100%); display: grid; gap: 14px; padding: 32px 28px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(34,29,15,.96), var(--card));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), 0 0 80px rgba(244,197,66,.06);
}
.login-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand), transparent 70%); }
.login-card p:not(.notice) { color: var(--muted); line-height: 1.5; }
.login-card label { color: var(--muted); font-size: 14px; }

/* ===== Inputs ===== */
input, select, textarea {
  min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-alt); color: var(--text); padding: 0 12px; font: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { width: 100%; padding: 10px 12px; margin-top: 8px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(244,197,66,.14); }
input[type="file"] { padding: 9px 10px; width: 100%; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13.5px; }
.login-card input, .filter-grid input, .filter-grid select { width: 100%; }

/* ===== Topbar / titles ===== */
.topbar, .section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.topbar { margin-bottom: var(--space-lg); padding: 8px 0 20px; border-bottom: 1px solid rgba(244,197,66,.2); position: relative; }
.topbar::after { content: ""; position: absolute; inset: auto 0 -1px auto; width: min(220px, 36%); height: 2px; background: linear-gradient(90deg, transparent, var(--brand), #fff0b3); }
.topbar-actions, .form-actions, .inline-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-actions input { min-width: 210px; }
.section-title { margin-bottom: 4px; }

/* ===== Owner (platform) layout ===== */
.shell {
  width: min(1440px, 100%); min-height: 100vh; margin: 0 auto;
  padding: var(--space-lg) 18px calc(var(--space-lg) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; column-gap: var(--space-lg);
}
.shell > .topbar, .shell > .notice { grid-column: 1 / -1; }
.shell > .dashboard-section { grid-column: 2; min-width: 0; }
.section-nav {
  grid-column: 1; grid-row: 3 / span 20; align-self: start; display: grid; gap: 6px; padding: 8px;
  position: sticky; top: 12px; z-index: 5; transition: width var(--transition);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(18,16,10,.9);
  backdrop-filter: blur(14px); box-shadow: var(--shadow-card);
}
.sidebar-toggle { width: 100%; min-height: 36px; }
.nav-button, .nav-link {
  width: 100%; text-align: right; background: transparent; border: 1px solid transparent;
  color: var(--muted); font-weight: 600; box-shadow: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.section-nav.collapsed { width: 54px; }
.section-nav.collapsed .nav-label { display: none; }
.section-nav.collapsed .nav-button { padding-inline: 0; text-align: center; }
@media (hover: hover) { .nav-button:hover:not(.active), .nav-link:hover:not(.active) { color: var(--text); background: rgba(255,255,255,.04); filter: none; box-shadow: none; } }
.nav-button.active { background: var(--brand-dim); border-color: rgba(244,197,66,.45); color: var(--brand); box-shadow: inset 3px 0 var(--brand); }
.dashboard-section, .dashboard-view { display: none; }
.dashboard-section.active, .dashboard-view.active { display: block; animation: fade-in .2s ease; }
@media (min-width: 821px) {
  .shell { height: 100vh; overflow: hidden; }
  .section-nav { max-height: calc(100vh - 128px); overflow-y: auto; }
  .dashboard-section.active { max-height: calc(100vh - 128px); overflow-y: auto; padding-left: 4px; }
}

/* ===== Tenant layout (sidebar on the right, RTL) ===== */
.tenant-dashboard-shell {
  display: grid; direction: ltr; grid-template-columns: minmax(0, 1fr) 250px; grid-template-areas: "content sidebar";
  gap: var(--space-lg); width: min(1480px, 100%); height: auto; min-height: 100vh; overflow: visible; padding-inline: 18px;
}
.tenant-dashboard-shell > .sidebar-toggle { display: none; }
.tenant-sidebar {
  grid-area: sidebar; direction: rtl; position: sticky; top: 16px; align-self: start;
  display: flex; flex-direction: column; max-height: calc(100vh - 32px); overflow: auto; padding: 14px 10px;
  background: #100e08; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.sidebar-brand { padding: 8px 10px 16px; border-bottom: 1px solid var(--line); }
.sidebar-brand strong { display: block; margin-top: 5px; color: var(--brand-strong); overflow-wrap: anywhere; }
.tenant-nav { display: grid; gap: 5px; padding: 14px 0; }
.tenant-nav .nav-link { padding: 0 14px; }
.nav-link.active { color: var(--brand); background: var(--brand-dim); border-color: rgba(244,197,66,.38); box-shadow: inset -3px 0 var(--brand); }
.sidebar-footer { margin-top: auto; padding: 12px 2px 0; border-top: 1px solid var(--line); }
.sidebar-footer button { width: 100%; }
.tenant-content { grid-area: content; direction: rtl; min-width: 0; padding-bottom: 40px; }
.tenant-topbar { margin-top: 8px; }
.sidebar-backdrop, .tabbar { display: none; }

/* ===== Panels / metrics ===== */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: var(--space-md); }
.metric, .panel {
  background: linear-gradient(145deg, rgba(30,27,17,.96), rgba(17,15,10,.98));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  transition: border-color var(--transition), transform var(--transition);
}
.metric { padding: 18px; position: relative; overflow: hidden; }
.metric::after { content: ""; position: absolute; inset: auto auto -55px -35px; width: 130px; height: 130px; background: radial-gradient(circle, rgba(244,197,66,.16), transparent 70%); pointer-events: none; }
@media (hover: hover) { .metric:hover { border-color: rgba(244,197,66,.45); transform: translateY(-2px); } }
.metric span { color: var(--muted); font-size: 13px; display: block; }
.metric strong { display: block; margin-top: 8px; font-size: 26px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.panel { padding: 20px; margin-top: var(--space-md); overflow: hidden; position: relative; }
.panel::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 2%, rgba(244,197,66,.56), transparent 58%); }
.detail-card { padding: 16px; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(10,9,6,.4); }
.detail-card p { color: var(--muted); margin-top: 9px; line-height: 1.65; }
.detail-card p strong { color: var(--brand-strong); margin-inline-start: 8px; }
.detail-card button { margin-top: 10px; }
.settings-grid, .statistics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.statistics-grid .detail-card { margin: 0; }
.statistics-grid .detail-card p { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.05); }
.statistics-grid .detail-card p:last-child { border-bottom: 0; }
.tiers, .provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: var(--space-md); }
.tier { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-md); display: grid; gap: 4px; align-content: start; background: rgba(255,255,255,.015); transition: border-color var(--transition), transform var(--transition); }
@media (hover: hover) { .tier:hover { border-color: rgba(244,197,66,.4); transform: translateY(-2px); } }
.tier strong { font-weight: 600; overflow-wrap: anywhere; }
.tier span { color: var(--brand); font-size: 21px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.tier button { margin-top: 8px; }

/* ===== Badges ===== */
.badge { display: inline-block; background: var(--brand-dim); color: var(--brand); padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.badge-completed, .badge-approved, .badge-edit_approved { background: var(--ok-dim); color: var(--ok); }
.badge-pending, .badge-processing { background: var(--warn-dim); color: var(--warn); }
.badge-failed, .badge-rejected, .badge-canceled { background: var(--danger-dim); color: var(--danger); }
.badge-active, .badge-low { background: var(--ok-dim); color: var(--ok); }
.badge-medium { background: var(--warn-dim); color: var(--warn); }
.badge-disabled, .badge-high { background: var(--danger-dim); color: var(--danger); }
input[type="checkbox"], td input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--brand); cursor: pointer; }
.status { color: var(--brand); font-weight: 600; }

/* ===== Tables ===== */
.table-wrap { overflow: auto; margin-top: var(--space-md); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; border-radius: var(--radius-md); }
.table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.sticky-table { max-height: min(62vh, 680px); }
.tenant-dashboard-shell .table-wrap { max-height: min(62vh, 680px); }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 13px 12px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; background: #1b180f; color: var(--muted); font-weight: 600; font-size: 12.5px; letter-spacing: .4px; }
tr:last-child td { border-bottom: none; }
@media (hover: hover) { tbody tr:hover td { background: rgba(244,197,66,.035); } }
td strong { display: block; font-weight: 600; }
td small { color: var(--muted); }
td input { min-height: 38px; }
.pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); flex-wrap: wrap; }
.empty-state { color: var(--muted); text-align: center; padding: var(--space-lg) 0 6px; }
.analytics-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.compact-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.compact-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.compact-list li:last-child { border-bottom: 0; }
.compact-list small { color: var(--muted); white-space: nowrap; }
.form-actions:has(#analytics-segment-name) { width: 100%; margin-top: var(--space-md); padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(244,197,66,.04); }
.form-actions:has(#analytics-segment-name)::before { content: "حفظ الشريحة"; width: 100%; color: var(--brand); font-weight: 700; }
#analytics-segment-name { flex: 1 1 300px; min-height: 48px; border-color: rgba(244,197,66,.65); }

/* ===== Forms ===== */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; align-items: end; }
.dashboard-controls { display: flex; gap: 10px; margin-top: var(--space-md); flex-wrap: wrap; }
.dashboard-controls select, .dashboard-controls input { min-width: min(280px, 100%); flex: 1; }
.form-grid, .split-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin-top: var(--space-md); }
.form-grid small, .stack-form small, .form-hint { color: var(--muted); font-size: 12px; }
.wide { grid-column: 1 / -1; }
.stack-form { display: grid; gap: 12px; align-content: start; padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(14,13,9,.72), rgba(34,29,15,.45)); }
.security-details { max-height: min(58vh, 620px); overflow: auto; margin: var(--space-md) 0 0; padding: var(--space-md); direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; color: #d9e6ff; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.muted-panel { color: var(--muted); }

.media-upload-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: var(--space-md); }
.media-upload-form label { flex: 1 1 280px; }
.media-upload-form button { flex: 0 0 auto; }
.media-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: var(--space-md); }
.media-asset-card { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.018); }
.media-asset-card div { min-width: 0; }
.media-asset-card strong, .media-asset-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-asset-card small { color: var(--muted); margin-top: 4px; }
.media-card-actions { grid-column: 2; display: flex; gap: 6px; align-items: center; }
.catalog-image-stack { position: relative; display: inline-grid; place-items: center; width: 62px; height: 62px; flex: 0 0 62px; border-radius: 13px; overflow: hidden; background: #0b0a07; border: 1px solid rgba(244,197,66,.25); }
.catalog-image-stack .catalog-image-base, .catalog-image-stack .catalog-image-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.catalog-image-stack .catalog-image-frame { z-index: 2; pointer-events: none; }
.catalog-image-stack.preview { width: min(220px, 60vw); height: min(220px, 60vw); margin: 8px auto; }
.catalog-frame-preview { display: grid; place-items: center; min-height: 230px; }
.catalog-frame-settings { align-items: stretch; }
.bot-frame-preview-row { display: flex; align-items: center; gap: 18px; }
.bot-frame-preview-row .catalog-frame-preview { min-height: 110px; flex: 0 0 110px; }
.bot-frame-preview-row .catalog-image-stack.preview { width: 92px; height: 92px; margin: 0; }
.bot-frame-preview-row .muted-panel { margin: 0; }
.field-disabled { opacity: .55; }
.catalog-app-layout { align-items: start; }
.catalog-search-bar { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 8px; margin-top: var(--space-md); }
.catalog-service-picker { max-height: 390px; }
.catalog-service-picker input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.catalog-app-name { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.catalog-app-name .catalog-image-stack { width: 42px; height: 42px; flex-basis: 42px; border-radius: 10px; }
.catalog-app-name span { min-width: 0; }
.catalog-app-name strong, .catalog-app-name small { overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.catalog-application-scroll { max-height: min(68vh, 760px); overflow-x: hidden; overflow-y: auto; padding: 5px; scrollbar-gutter: stable; }
.catalog-application-table { display: block; min-width: 0; width: 100%; }
.catalog-application-table thead { display: none; }
.catalog-application-table tbody, .catalog-application-table tr, .catalog-application-table td { display: block; width: 100%; }
.catalog-application-table td { padding: 0; border: 0; white-space: normal; }
.catalog-app-row + .catalog-app-row { margin-top: 9px; }
.catalog-app-row.selected-row { position: sticky; top: 0; z-index: 4; padding-bottom: 4px; background: #141109; }
.catalog-application-card { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.16)); cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); }
.catalog-application-card:hover, .catalog-application-card:focus-visible { border-color: rgba(244,197,66,.55); background: rgba(244,197,66,.045); outline: none; transform: translateY(-1px); }
.catalog-application-card.selected { border-color: var(--brand); background: linear-gradient(145deg, rgba(244,197,66,.13), rgba(244,197,66,.035)); box-shadow: inset 3px 0 0 var(--brand), 0 8px 24px rgba(0,0,0,.18); }
.catalog-app-card-head { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.catalog-app-card-head .catalog-image-stack { width: 50px; height: 50px; flex-basis: 50px; border-radius: 12px; }
.catalog-app-card-title { min-width: 0; }
.catalog-app-card-title strong, .catalog-app-card-title small, .catalog-app-card-title code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-app-card-title strong { font-size: 15px; }
.catalog-app-card-title small { color: var(--muted); margin-top: 2px; }
.catalog-app-card-title code { color: rgba(244,197,66,.76); direction: ltr; text-align: right; font-size: 11px; margin-top: 3px; }
.catalog-status-badge { display: inline-flex; align-items: center; gap: 6px; align-self: start; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.catalog-status-badge i { width: 7px; height: 7px; border-radius: 50%; background: #777; box-shadow: 0 0 0 3px rgba(119,119,119,.12); }
.catalog-status-badge.active { color: #89e7a7; border-color: rgba(65,190,105,.3); background: rgba(65,190,105,.08); }
.catalog-status-badge.active i { background: #4bd276; box-shadow: 0 0 0 3px rgba(75,210,118,.13); }
.catalog-app-card-chips, .catalog-app-card-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.catalog-app-card-chips span { padding: 5px 9px; border: 1px solid rgba(244,197,66,.16); border-radius: 999px; background: rgba(244,197,66,.055); color: var(--muted); font-size: 11px; }
.catalog-app-card-actions { padding-top: 2px; }
.catalog-app-card-actions button { flex: 1 1 120px; }
.catalog-app-card-actions .visibility-toggle { color: var(--muted); background: rgba(255,255,255,.025); }
.catalog-mobile-back { display: none; }

/* Local services use the same compact card language as the application catalog. */
.local-service-scroll { max-height: min(68vh, 760px); overflow-x: hidden; overflow-y: auto; padding: 5px; scrollbar-gutter: stable; }
.local-service-table { display: block; min-width: 0 !important; width: 100%; }
.local-service-table thead { display: none; }
.local-service-table tbody, .local-service-table tr, .local-service-table td { display: block; width: 100%; }
.local-service-table td { padding: 0; border: 0; white-space: normal; }
.local-service-row + .local-service-row { margin-top: 9px; }
.local-service-row.selected-row { position: sticky; top: 0; z-index: 4; padding-bottom: 4px; background: #141109; }
.local-service-card { display: grid; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(255,255,255,.025), rgba(0,0,0,.16)); cursor: pointer; transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition); }
.local-service-card:hover, .local-service-card:focus-visible { border-color: rgba(244,197,66,.55); background: rgba(244,197,66,.045); outline: none; transform: translateY(-1px); }
.local-service-card.selected { border-color: var(--brand); background: linear-gradient(145deg, rgba(244,197,66,.13), rgba(244,197,66,.035)); box-shadow: inset 3px 0 0 var(--brand), 0 8px 24px rgba(0,0,0,.18); }
.local-service-card-head { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 11px; align-items: center; }
.local-service-card-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(244,197,66,.28); border-radius: 12px; background: linear-gradient(145deg, rgba(244,197,66,.16), rgba(0,0,0,.2)); font-size: 22px; }
.local-service-card-title { min-width: 0; }
.local-service-card-title strong, .local-service-card-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-service-card-title strong { font-size: 15px; }
.local-service-card-title small { color: var(--muted); margin-top: 3px; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.local-service-card-chips, .local-service-card-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.local-service-card-chips span { padding: 5px 9px; border: 1px solid rgba(244,197,66,.16); border-radius: 999px; background: rgba(244,197,66,.055); color: var(--muted); font-size: 11px; }
.local-service-card-actions { padding-top: 2px; }
.local-service-card-actions button { flex: 1 1 120px; }
.local-mobile-back { display: none; }
#catalog-app-detail code { direction: ltr; unicode-bidi: plaintext; color: var(--brand-strong); }
.application-icon-import { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(244,197,66,.025); }
.application-icon-import h3 { margin: 0; }
.button-like { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.icon-candidate-grid { display: grid; gap: 9px; }
.icon-candidate-card { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(0,0,0,.2); }
.icon-candidate-card div { min-width: 0; }
.icon-candidate-card strong, .icon-candidate-card small, .icon-candidate-card code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-candidate-card small { color: var(--muted); margin: 3px 0; }
.icon-candidate-card code { direction: ltr; text-align: right; color: var(--brand); }
.inline-search-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.inline-search-control button { min-width: 82px; }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== Tablet / mobile ===== */
@media (max-width: 820px) {
  .shell { display: block; height: auto; overflow: visible; padding: 16px 12px calc(90px + env(safe-area-inset-bottom)); }
  .section-nav {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; width: auto; max-height: none; margin: 0;
    position: fixed; inset: auto 0 0 0; z-index: 40; border-width: 1px 0 0; border-radius: 18px 18px 0 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(14,12,8,.95);
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav .sidebar-toggle { display: none; }
  .section-nav .nav-button {
    flex: 0 0 auto; width: auto; min-width: 78px; min-height: 56px; padding: 4px 10px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 18px; line-height: 1; white-space: nowrap; text-align: center;
  }
  .section-nav .nav-label { font-size: 11.5px; line-height: 1.2; }
  .section-nav .nav-button.active { box-shadow: none; }
  .section-nav .nav-button.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand); }
  .section-nav.collapsed { width: auto; }
  .section-nav.collapsed .nav-label { display: inline; }
  .section-nav.collapsed .nav-button { padding-inline: 10px; text-align: center; }
  .dashboard-section.active { max-height: none; }
  .sticky-table, .tenant-dashboard-shell .table-wrap { max-height: none; }

  .tenant-dashboard-shell { display: block; direction: rtl; padding: 14px 12px calc(84px + env(safe-area-inset-bottom)); }
  .tenant-sidebar {
    position: fixed; z-index: 60; inset: 10px 10px 10px auto; width: min(300px, 84vw); max-height: none;
    transform: translateX(115%); transition: transform .25s ease; box-shadow: -20px 0 60px rgba(0,0,0,.6);
  }
  .tenant-sidebar.open { transform: none; }
  .tenant-sidebar.open ~ .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); animation: fade-in .2s ease; }
  .tenant-topbar { margin-top: 0; padding-bottom: 14px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 40;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(14,12,8,.94); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
  }
  .tab {
    min-height: 54px; padding: 4px 0; display: grid; gap: 2px; place-items: center; align-content: center;
    background: transparent; color: var(--muted); box-shadow: none; font-size: 11.5px; border-radius: var(--radius-sm); position: relative;
  }
  .tab span { font-size: 18px; line-height: 1; }
  .tab.active { color: var(--brand); background: var(--brand-dim); box-shadow: none; border-color: transparent; }
  .tab.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: var(--brand); }
  .metric strong { font-size: 22px; }
  .inline-actions input { min-width: 0; width: 100%; flex: 1; }
  table { min-width: 620px; }
}
@media (max-width: 560px) {
  .shell { padding-inline: 10px; }
  .panel { padding: 14px; border-radius: var(--radius-md); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .split-panel { grid-template-columns: 1fr; }
  .analytics-columns { grid-template-columns: 1fr; }
  .topbar .secondary { padding: 0 12px; }
  input, select, textarea { font-size: 16px; } /* prevents iOS zoom on focus */
  button { min-height: 44px; }
  .compact { min-height: 38px; }
  .form-actions button, .filter-grid button { flex: 1; }
  .media-upload-form button { width: 100%; }
  .catalog-search-bar { grid-template-columns: 1fr 1fr; }
  .catalog-search-bar input { grid-column: 1 / -1; }
  .bot-frame-preview-row { align-items: flex-start; flex-direction: column; }
  .icon-candidate-card { grid-template-columns: 52px minmax(0, 1fr); }
  .icon-candidate-card button { grid-column: 1 / -1; }
  .catalog-app-layout > .stack-form:last-child { order: -1; }
  .catalog-mobile-back { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
  .catalog-application-scroll { max-height: 58vh; }
  .catalog-app-card-head { grid-template-columns: 46px minmax(0, 1fr); }
  .catalog-app-card-head .catalog-image-stack { width: 46px; height: 46px; }
  .catalog-status-badge { grid-column: 2; justify-self: start; }
  .split-panel:has(> #local-service-form) > .stack-form:last-child { order: -1; }
  .local-mobile-back { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
  .local-service-scroll { max-height: 58vh; }
  .local-service-card-head { grid-template-columns: 46px minmax(0, 1fr); }
  .local-service-card-icon { width: 46px; height: 46px; }
  .local-service-card-head .catalog-status-badge { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* ===== v3: owner desktop scroll fix + catalog layout ===== */
@media (min-width: 821px) {
  /* explicit rows: header / notice / content (fills the rest of the screen exactly) */
  .shell:not(.tenant-dashboard-shell) { grid-template-rows: auto auto minmax(0, 1fr); }
  .shell:not(.tenant-dashboard-shell) > .topbar { grid-row: 1; }
  .shell:not(.tenant-dashboard-shell) > .notice { grid-row: 2; margin-top: 0; }
  .shell:not(.tenant-dashboard-shell) > .section-nav { grid-row: 3; max-height: 100%; overflow-y: auto; }
  .shell:not(.tenant-dashboard-shell) > .dashboard-section.active {
    grid-row: 3; align-self: stretch; min-height: 0; max-height: none; overflow-y: auto; padding: 0 4px 24px 6px;
  }
  .dashboard-section > .panel:first-child { margin-top: 0; }

  /* catalog: add-form and local-services list side by side, aligned at the top */
  .split-panel:has(> #local-service-form) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split-panel:has(> #local-service-form) table { min-width: 560px; }
  #section-catalog .table-wrap { max-height: min(60vh, 620px); }
}

/* ===== v3: admin dashboard ===== */
.detail-card {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.search-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  font-size: 0.9rem;
}

.detail-grid span {
  opacity: 0.7;
  margin-left: 0.25rem;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.badge-completed { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.badge-pending   { background: rgba(241, 196, 15, 0.15); color: #f1c40f; }
.badge-failed, .badge-rejected { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }