/* shadcn/ui Zinc-inspired presentation for the existing PHP/vanilla JS UI.
   Keep map node colors and geometry user-controlled. Loaded after legacy styles. */
:root {
  color-scheme: light;
  --background: #ffffff; --foreground: #09090b;
  --card: #ffffff; --secondary: #f4f4f5; --muted-foreground: #71717a;
  --border: #e4e4e7; --ring: #a1a1aa; --primary-foreground: #fafafa;
  --primary: #18181b; --primary2: #3f3f46;
  --bg: #fafafa; --panel: var(--card); --text: var(--foreground);
  --muted: var(--muted-foreground); --line: var(--border); --canvas-dot: #d4d4d8;
  --shadow: 0 4px 12px #0000000d; --radius: 8px;
}
html[data-theme=dark] {
  color-scheme: dark;
  --background: #09090b; --foreground: #fafafa; --card: #09090b;
  --secondary: #27272a; --muted-foreground: #a1a1aa; --border: #27272a;
  --ring: #71717a; --primary: #fafafa; --primary2: #d4d4d8;
  --primary-foreground: #18181b; --bg: #101012; --panel: var(--card);
  --text: var(--foreground); --muted: var(--muted-foreground);
  --line: var(--border); --canvas-dot: #27272a; --shadow: 0 4px 12px #0004;
}
html[data-theme] body { background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; }
html[data-theme] body :is(button,input,select,textarea,a) { -webkit-tap-highlight-color: transparent; }
html[data-theme] body :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 3px;
}
html[data-theme] body :is(input,textarea)::placeholder { color: var(--muted-foreground); }
html[data-theme] body :is(.btn,.icon-btn,.library-theme-toggle,.library-logout,.bulk-action,.bulk-select-toggle) {
  border: 1px solid var(--border); border-radius: 6px; background: var(--card);
  color: var(--foreground); font-weight: 500; box-shadow: 0 1px 2px #0000000a;
  transition: background-color .15s, border-color .15s;
}
html[data-theme] body :is(.btn,.icon-btn,.library-theme-toggle,.library-logout,.bulk-action,.bulk-select-toggle):hover { background: var(--secondary); color: var(--foreground); border-color: var(--border); }
html[data-theme] body :is(.btn.primary,.tool.shortcut.new-map,.workspace-login) { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); box-shadow: 0 1px 2px #0002; }
html[data-theme] body :is(.btn.primary,.tool.shortcut.new-map,.workspace-login):hover { background: var(--primary2); color: var(--primary-foreground); transform: none; }
html[data-theme] body :is(.btn.ghost,.tool.shortcut.open-map,.tool.active,.tool:hover,.library-nav.active,.library-nav:hover,.folder-row.active,.folder-row:hover,.check,.choice:hover) { background: var(--secondary); color: var(--foreground); }
html[data-theme] body :is(.library-page,.library-main,.login-page) { background: var(--background); color: var(--foreground); }
html[data-theme] body :is(.library-sidebar,.leftbar) { background: var(--bg); border-color: var(--border); }
html[data-theme] body :is(.topbar,.inspector,.tabs,.library-search,.library-actions select,.bulk-select-bar,.map-usage) { background: var(--card); color: var(--foreground); border-color: var(--border); }
html[data-theme] body :is(.library-brand,.brand,.library-topbar h1,.library-user b,.library-path b,.map-card-title b,.new-map-card b,.folder-delete-option b) { color: var(--foreground); }
html[data-theme] body :is(.library-topbar h1,.login-card h2) { font-weight: 600; letter-spacing: -.035em; }
html[data-theme] body :is(.library-nav,.folder-row,.tool,.map-usage,.crumbs,.zoom-controls,.focus-toggle,.minimap) { border-radius: var(--radius); }
html[data-theme] body :is(.library-nav,.folder-row) { font-weight: 500; }
html[data-theme] body :is(.library-nav strong,.map-card-badge,.library-user>span,.avatar,.library-dialog-icon,.login-icon) { background: var(--secondary); color: var(--foreground); box-shadow: none; }
html[data-theme] body :is(.library-search,.library-actions select) { border: 1px solid var(--border); border-radius: 6px; }
html[data-theme] body :is(.library-search input,.library-actions select) { color: var(--foreground); }
html[data-theme] body .map-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px #00000008; transition: border-color .15s, box-shadow .15s; }
html[data-theme] body .map-card:hover,html[data-theme] body .map-card.menu-open { border-color: var(--ring); box-shadow: var(--shadow); transform: none; }
html[data-theme] body .map-card-preview { background-color: var(--bg); background-image: radial-gradient(var(--canvas-dot) .8px,transparent .8px); }
html[data-theme] body .new-map-card { border: 1px dashed var(--border); border-radius: 12px; color: var(--muted); background: var(--background); }
html[data-theme] body .new-map-card:hover { background: var(--secondary); border-color: var(--ring); color: var(--foreground); }
html[data-theme] body :is(.card-favorite,.map-select,.card-menu,.library-dialog,.modal,.bulk-delete-dialog) { background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); }
html[data-theme] body :is(.card-menu,.library-dialog,.modal,.bulk-delete-dialog) { box-shadow: 0 16px 48px #0002; }
html[data-theme] body :is(.card-menu button:hover,.map-card-title>[data-menu]:hover,.library-dialog-close:hover) { background: var(--secondary); color: var(--foreground); }
html[data-theme] body :is(.library-dialog h2,.library-dialog label,.modal h2,.bulk-delete-dialog h2,.library-dialog-actions .btn:not(.primary):not(.danger-button),.bulk-delete-actions .btn:not(.danger-button)) { color: var(--foreground); }
html[data-theme] body :is(.library-dialog h2,.modal h2) { font-family: var(--ui-font); font-weight: 600; letter-spacing: -.025em; }
html[data-theme] body :is(.library-dialog>p,.login-subtitle,.login-security,.login-help,.map-card-meta,.bulk-selected-count) { color: var(--muted); }
html[data-theme] body :is(.library-dialog input:not([type=checkbox]),.library-dialog select,.panel input:not([type=checkbox]):not([type=range]):not([type=color]),.panel select,.panel textarea,.modal input:not([type=checkbox]):not([type=range]):not([type=color]),.modal select,.modal textarea) { background: var(--background); color: var(--foreground); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 1px 2px #00000008; }
html[data-theme] body :is(.library-dialog input,.library-dialog select):focus { border-color: var(--ring); box-shadow: none; }
html[data-theme] body :is(input[type=checkbox],input[type=range]) { accent-color: var(--primary); }
html[data-theme] body .tabs button { font-weight: 500; }
html[data-theme] body .tabs button.active { color: var(--foreground); box-shadow: inset 0 -2px var(--primary); }
html[data-theme] body .login-panel { background: var(--background); color: var(--foreground); }
html[data-theme] body .login-visual { background: #18181b; color: #fafafa; border-right: 1px solid #27272a; }
html[data-theme] body .login-orb { display: none; }
html[data-theme] body .login-message h1 { font-weight: 600; letter-spacing: -.055em; }
html[data-theme] body .login-message p { color: #a1a1aa; }
html[data-theme] body .eyebrow { background: #27272a; border-color: #3f3f46; border-radius: 6px; font-weight: 500; }
html[data-theme] body .login-card h2,html[data-theme] body .mobile-login-brand { color: var(--foreground); }
html[data-theme] body .login-icon { border: 1px solid var(--border); border-radius: 12px; }
html[data-theme] body .workspace-login { border-radius: 6px; }
html[data-theme] body .workspace-login small { color: inherit; opacity: .75; }
html[data-theme] body .workspace-symbol { background: transparent; }
html[data-theme] body .preview-node { background: #fafafa; color: #18181b; border: 1px solid #d4d4d8; border-radius: 6px; box-shadow: none; }
html[data-theme] body .root-node { background: #3f3f46; color: #fafafa; border-color: #52525b; }
html[data-theme] body .preview-line { background: #71717a; }
html[data-theme] body .login-help:before { border-color: var(--border); }
html[data-theme] body .sidebar-version { padding: 4px 11px 0; color: var(--muted-foreground); font-size: 11px; line-height: 1.5; font-weight: 400; letter-spacing: .02em; }
html[data-theme] body .card-favorite.active { color: #d97706; }
html[data-theme] body :is(.card-menu .danger,.bulk-action.danger) { color: #dc2626; }
html[data-theme=dark] body :is(.card-menu .danger,.bulk-action.danger) { color: #f87171; }
@media(prefers-reduced-motion:reduce) { html[data-theme] body *,html[data-theme] body *::before,html[data-theme] body *::after { scroll-behavior: auto; transition: none; animation: none; } }

/* Explicit UI sizing prevents browser default font preferences from inflating controls.
   Map node typography continues to use each node's own saved size. */
html[data-theme] body { font-size: 14px; line-height: 1.5; }
html[data-theme] body :is(.btn,.icon-btn,.library-theme-toggle,.library-logout,.bulk-action,.bulk-select-toggle) {
  min-height: 36px; padding: 7px 12px; font-size: 13px; line-height: 20px;
}
html[data-theme] body .icon-btn { width: 36px; padding: 7px; }
html[data-theme] body .library-actions { gap: 10px; margin: 24px 0 20px; align-items: center; }
html[data-theme] body .library-search { height: 36px; padding: 0 11px; }
html[data-theme] body .library-search input { padding: 7px 0; font-size: 13px; line-height: 20px; }
html[data-theme] body .library-actions select { height: 36px; padding: 0 30px 0 11px; font-size: 13px; line-height: 20px; }
html[data-theme] body .library-topbar h1 { font-size: 26px; line-height: 1.25; }
html[data-theme] body .library-topbar p { font-size: 13px; line-height: 1.5; }
html[data-theme] body .map-card-title b { font-size: 14px; line-height: 20px; }
html[data-theme] body .new-map-card b { font-size: 14px; line-height: 20px; }
html[data-theme] body .new-map-card small { font-size: 12px; line-height: 18px; }
html[data-theme] body .new-map-card span { width: 36px; height: 36px; }
html[data-theme] body .new-map-card svg { width: 18px; height: 18px; }
html[data-theme] body :is(.zoom-controls button,.focus-toggle) { font-size: 12px; line-height: 18px; padding: 7px 10px; }
html[data-theme] body :is(.library-dialog h2,.modal h2,.bulk-delete-dialog h2) { font-size: 20px; line-height: 1.3; }
html[data-theme] body :is(.library-dialog input:not([type=checkbox]),.library-dialog select,.modal input:not([type=checkbox]):not([type=range]):not([type=color]),.modal select,.modal textarea) { font-size: 13px; line-height: 20px; padding: 8px 10px; }
@media(max-width:760px) {
  html[data-theme] body .library-topbar h1 { font-size: 22px; }
  html[data-theme] body .library-topbar p { font-size: 12px; }
  html[data-theme] body :is(.library-theme-toggle,.library-logout) { width: 36px; padding: 7px; }
  html[data-theme] body .library-actions :is(.btn,select),html[data-theme] body .library-search { min-height: 40px; height: 40px; }
}

/* Complete theme coverage where legacy dark selectors have higher specificity. */
html[data-theme] body .new-map-card span { background: var(--secondary); color: var(--foreground); border: 1px solid var(--border); border-radius: 8px; }
html[data-theme] body .back-editor strong { background: var(--secondary); color: var(--foreground); }
html[data-theme] body .card-favorite.active { background: var(--secondary); color: #d97706; }
html[data-theme] body .map-card.is-selected { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring); }
html[data-theme] body .map-card.is-selected .map-select { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
html[data-theme] body .node-context-menu button:hover { background: var(--secondary); color: var(--foreground); }
html[data-theme] body .btn svg { flex-shrink: 0; margin-right: 0; }
html[data-theme] body button:disabled { opacity: .5; cursor: not-allowed; }
html[data-theme] body .library-search:focus-within { border-color: var(--ring); box-shadow: 0 0 0 2px var(--ring); }
html[data-theme] body .library-search input:focus-visible { outline: none; }
html[data-theme] body .library-dialog,html[data-theme] body .modal { max-height: calc(100dvh - 36px); overflow-y: auto; }
html[data-theme] body .library-sidebar { overflow-y: auto; }
html[data-theme] body .library-actions { flex-wrap: wrap; }
html[data-theme] body .library-search { min-width: 180px; }
html[data-theme] body .folder-item:focus-within .folder-delete { opacity: 1; }
@media(max-width:760px) {
 html[data-theme] body .library-nav { gap: 0; min-width: 0; }
 html[data-theme] body .library-nav>span,html[data-theme] body .library-nav>strong { display: none; }
 html[data-theme] body .library-nav svg { flex-shrink: 0; }
 html[data-theme] body .sidebar-version { padding: 8px 0 0; font-size: 9px; text-align: center; overflow-wrap: anywhere; }
 html[data-theme] body .folder-item { grid-template-columns: 18px; justify-content: center; gap: 0; }
 html[data-theme] body .folder-item>span,html[data-theme] body .folder-item>.folder-delete { display: none; }
 html[data-theme] body .folder-heading { display: flex; justify-content: center; padding: 0 0 8px; }
 html[data-theme] body .folder-heading>span { display: none; }
}