/* K-Brain light theme: sourced from k-brain/packages/ui/src/tokens.css.
   Scoped to beheer; the customer widget and its preview retain their styling. */
body.admin {
  --background: #f5f6fa;
  --foreground: #202432;
  --card: #fff;
  --primary: #3452ff;
  --primary-foreground: #fff;
  --secondary: #e9ecf3;
  --muted-background: #eceff5;
  --muted-foreground: #5e6575;
  --accent-soft: #edf0ff;
  --accent-foreground: #304bd6;
  --border: #dce0e9;
  --input: #8790a7;
  --ring: #3452ff;
  --success: #286348;
  --success-soft: #e6f3eb;
  --danger: #a33736;
  --danger-soft: #ffebeb;
  --selection: #dce3ff;
  --radius: 12px;
  --line: var(--border);
  --paper: var(--card);
  --muted: var(--muted-foreground);
  --accent: var(--primary);
  --accent-hover: #2942d9;
  --focus: var(--ring);
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  scrollbar-color: #b5bccd var(--background);
}
.admin ::selection { background: var(--selection); color: var(--foreground); }
.adminShell { display: grid; grid-template-columns: 216px minmax(0,1fr); min-height: 100dvh; }
.adminSidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 20px 12px; background: var(--card); border-right: 1px solid var(--border); }
.adminBrand { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px; margin-bottom: 20px; color: var(--foreground); text-decoration: none; font-size: 16px; font-weight: 700; }
.adminBrandMark { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: #fff; background: var(--primary); font-size: 18px; font-weight: 700; }
.adminSidebar nav { display: grid; gap: 4px; }
.adminNav { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--muted-foreground); font-size: 14px; font-weight: 500; }
.adminNav svg { width: 18px; height: 18px; flex-shrink: 0; }
.adminNav:hover { background: var(--accent-soft); color: var(--accent-foreground); }
.adminNav.active { background: var(--primary); color: #fff; }
.adminSidebarFooter { margin-top: auto; border-top: 1px solid var(--border); padding: 16px 8px 0; color: var(--muted-foreground); font-size: 12px; }
.adminWorkspace { min-width: 0; }
.adminTopbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; padding: 0 32px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.adminContext { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.adminContext strong { font-size: 15px; }
.adminContext > span:not(.adminBrandMark), .adminMode { font-size: 13px; color: var(--muted-foreground); }
.mobileBrand, .adminMobileNav { display: none; }
.admin main { max-width: 1400px; padding: 32px; }
.admin main > header { border: 0; padding-bottom: 24px; }
.admin h1 { font-size: 30px; letter-spacing: -.03em; }
.admin h2 { font-size: 20px; }
.admin h3 { font-size: 17px; }
.admin header .headerLead { color: var(--foreground); font-size: 15px; }
.admin header p { font-size: 14px; }
.admin main > section { margin-bottom: 24px; }
.admin .intro, .admin .overviewSection { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.admin .intro { grid-template-columns: minmax(0,.65fr) minmax(0,1.5fr); gap: 32px; }
.admin #detail { padding: 4px 0 24px; border-bottom: 0; scroll-margin-top: 160px; }
.admin #customerForm, .admin #customerOverview { scroll-margin-top: 100px; }
.admin .fields { gap: 12px; }
.admin button, .admin a.button { font-size: 14px; border-radius: 8px; }
.admin input { border-color: var(--input); color: var(--foreground); }
.admin input:hover { border-color: var(--primary); }
.admin input::placeholder { color: var(--muted-foreground); }
.admin button:active, .admin a.button:active { background: #2439bf; }
.admin button.secondary, .admin a.button.secondary { color: var(--foreground); border-color: var(--border); background: var(--card); }
.admin button.secondary:hover, .admin a.button.secondary:hover { background: var(--accent-soft); border-color: #b8c3ff; }
.admin button.danger { color: var(--danger); background: transparent; }
.admin button.danger:hover { color: var(--danger); background: var(--danger-soft); border-color: #e4b5b5; }
.admin .customerList { border: 0; border-radius: 0; }
.admin .customer { color: var(--foreground); padding: 16px; min-height: 80px; }
.admin .customer:hover { background: #f5f6fa; }
.admin .customer.active { background: var(--accent-soft); }
.admin .customer.active strong { color: var(--accent-foreground); }
.admin .customer strong { font-size: 15px; }
.admin .metrics b { font-size: 22px; }
.admin .detailGrid { gap: 24px; }
.admin .office { padding: 20px; }
.admin .officeTitle strong { font-size: 16px; }
.admin .integration { color: var(--foreground); background: var(--card); border: 1px solid var(--border); padding: 24px; }
.admin .integration p { color: var(--muted-foreground); }
.admin .integration > code { color: var(--foreground); }
.admin .integration pre { color: var(--foreground); background: var(--muted-background); }
.admin .integration .button { background: var(--primary); color: #fff; border-color: transparent; }
.admin .integration .button:hover { background: var(--accent-hover); }
.admin .integration a:focus-visible { outline-color: var(--ring); }
.admin .notice { top: 84px; color: var(--success); background: var(--success-soft); border-color: #b7d7c4; }
.admin .notice.error { color: var(--danger); background: var(--danger-soft); border-color: #e4b5b5; }
.admin .syncPanel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 20px; }
.skipLink { position: absolute; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); padding: 12px 16px; background: var(--primary); color: #fff; border-radius: 8px; }
.skipLink:focus { transform: translateY(0); }
@media(max-width:1200px) {
  .admin .intro { grid-template-columns: 1fr; gap: 20px; }
  .admin .detailGrid { grid-template-columns: minmax(0,1fr) minmax(270px,.65fr); }
  .admin .source { flex-direction: column; }
  .admin .source .itemActions { justify-content: flex-start; }
}
@media(max-width:900px) {
  .adminShell { grid-template-columns: 180px minmax(0,1fr); }
  .adminBrand { font-size: 14px; gap: 8px; }
  .admin main { padding: 24px; }
  .adminTopbar { padding-inline: 24px; }
  .admin .detailGrid { display: block; }
  .admin .integration { margin-top: 24px; }
  .admin .fields { grid-template-columns: 1fr; align-items: stretch; }
}
@media(max-width:768px) {
  .adminShell { display: block; }
  .adminSidebar { display: none; }
  .adminTopbar { height: auto; min-height: 64px; padding: 12px 16px; flex-wrap: wrap; gap: 8px 16px; }
  .adminContext { align-items: center; gap: 10px; }
  .adminContext > span:not(.adminBrandMark), .adminMode { display: none; }
  .mobileBrand { display: grid; }
  .adminMobileNav { display: flex; gap: 4px; }
  .adminMobileNav a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px; color: var(--muted-foreground); text-decoration: none; font-size: 14px; }
  .adminMobileNav a:hover { color: var(--primary); }
  .admin main { padding: 24px 16px 48px; }
  .admin h1 { font-size: 26px; }
  .admin .intro, .admin .overviewSection { padding: 20px; }
  .admin .notice { top: 80px; }
  .admin .detailHead { flex-direction: column; }
  .admin .itemActions { justify-content: flex-start; }
}
@media(max-width:400px) {
  .admin .intro, .admin .overviewSection { padding: 16px; }
  .admin .customer { padding: 14px 0; }
  .adminContext strong { font-size: 14px; }
}
.admin .customer { border-radius: 0; }

.adminTools{display:flex;align-items:center;gap:16px}.adminTools button{min-height:40px;padding:8px 12px}.admin #newCustomer{grid-template-columns:minmax(0,.65fr) minmax(0,1.5fr)}.admin #newCustomer .fields{grid-template-columns:repeat(2,minmax(0,1fr))}.formActions{display:flex;align-items:center;gap:12px;margin-top:24px}.admin #detail .backLink{display:inline-block;color:var(--accent-foreground);text-underline-offset:4px;font-size:14px;margin-bottom:24px}.admin #detailName{margin-bottom:8px;outline-offset:5px}.admin .adminNav[aria-current="page"]{background:var(--primary);color:#fff}@media(max-width:1050px){.admin #newCustomer{grid-template-columns:1fr}}@media(max-width:768px){.adminTools{width:100%;justify-content:flex-end}.adminTopbar{position:relative}.admin .notice{top:8px}.admin #newCustomer .fields{grid-template-columns:1fr}.admin .formActions{flex-wrap:wrap}.admin .formActions .button,.admin .formActions button{flex:1;min-width:120px}}

.admin .detailGrid h2{font-size:17px;margin-bottom:16px}

.admin .customerRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--border)}.admin .customerRow:last-child{border-bottom:0}.admin .customerRow .customer{border:0;padding:12px 16px;min-height:92px;width:100%;border-radius:8px}.admin .customerActions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:470px}.admin .customerActions button,.admin .customerActions .button{font-size:13px;padding:10px 12px;min-height:44px}.admin .customerActions button:disabled{cursor:not-allowed;opacity:.6}.admin .customerRow .lastSync{font-size:12px;line-height:1.5;margin-top:8px}.admin .customerRow .metrics{min-width:65px}.admin .copyFallback{padding:20px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin:20px 0}.copyHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.copyHeader label{margin:0}.admin #copyCode{display:block;width:100%;font:13px/1.6 ui-monospace,monospace;color:var(--foreground);background:var(--muted-background);border:1px solid var(--input);border-radius:8px;padding:12px;resize:vertical;margin-bottom:12px}.admin #copyCode:focus-visible{outline:3px solid var(--ring);outline-offset:3px}@media(max-width:1250px){.admin .customerRow{grid-template-columns:1fr;gap:8px}.admin .customerActions{max-width:none;justify-content:flex-start;padding:0 16px 8px}}@media(max-width:560px){.admin .customerRow .customer{padding:8px 0;gap:12px}.admin .customerActions{padding:0 0 8px;gap:8px}.admin .customerActions button,.admin .customerActions .button{flex:1 1 140px}.admin .customerRow .lastSync{max-width:26ch}}

.admin .syncProgress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;margin:0 0 24px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:8px}
.admin .syncProgress strong{font-size:14px}
.admin .syncProgress progress,.admin .syncRun progress{width:100%;height:12px;accent-color:var(--primary)}
.admin .syncProgress small{grid-column:1/-1;color:var(--muted-foreground);font-size:12px}
.admin .syncHistory{margin-top:8px}
.admin .syncHistory>header{padding:0 0 16px;border:0}
.admin .syncHistory>header h1{font-size:22px}
.admin .syncRun{display:grid;gap:8px;padding:16px 0;border-bottom:1px solid var(--border)}
.admin .syncRunHead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.admin .syncRunHead strong{font-size:14px}
.admin .syncRunHead span{font-size:12px;color:var(--muted-foreground)}
.admin .syncRun.running .syncRunHead span{color:var(--accent-foreground)}
.admin .syncRun.error .syncRunHead span{color:var(--danger)}
.admin .syncRun>small,.admin .syncRun p{margin:0;color:var(--muted-foreground);font-size:12px}
@media(max-width:560px){.admin .syncProgress{padding:14px;gap:8px}.admin .syncRunHead{align-items:flex-start}}
.admin .settingsSection{max-width:760px;padding:24px 0}
.admin .settingsSection>header{padding:0 0 20px;border:0}
.admin .settingsSection>header h1{font-size:24px}
.admin .settingsSection form{display:grid;gap:24px}
.admin .settingsField{display:grid;gap:8px;max-width:520px}
.admin .settingsField label{font-weight:600}
.admin .settingsField select,.admin .settingsField textarea{width:100%;border:1px solid var(--input);border-radius:8px;background:var(--card);color:var(--foreground);font:inherit;padding:10px 12px}
.admin .settingsField textarea{resize:vertical;line-height:1.5}
.admin .settingsField small{color:var(--muted-foreground);font-size:12px}
.admin #settingsForm>button{justify-self:start}
@media(max-width:560px){.admin .settingsSection{padding:16px 0}.admin #settingsForm>button{width:100%}}

/* Keep imported content and translated labels inside their containers. */
.admin .adminTools, .adminMobileNav { flex-wrap: wrap; }
.admin .adminTools { min-width: 0; }
.admin #signedInUser, .admin h1, .admin .syncRun, .admin .notice,
.admin .googleAdminReview { overflow-wrap: anywhere; }
.admin .syncRunHead, .admin .googleAdminReview > div { min-width: 0; }
.admin textarea, .admin select { max-width: 100%; }
@media (max-width: 768px) {
  body.admin { font-size: 16px; }
  .admin input, .admin textarea, .admin select { font-size: 16px; }
}