/*
 * The ONLY global stylesheet in the plugin. Every rule here either defines
 * an --aurora-* theme variable or targets a specific WordPress structural ID
 * to frame the native content. No element/tag resets, no utility classes —
 * so it cannot leak onto or restyle WordPress's own page content the way the
 * old plugin's Tailwind preflight did.
 *
 * Theme colors live here as plain CSS variables we fully control. Dark mode
 * is a single class on <html> (.aurora-dark) that swaps the variable values.
 */

/* Palette carried over from the original plugin's design tokens: a zinc
   neutral scale with a blue/indigo accent, large rounded surfaces. */
:root {
  --aurora-sidebar-w: 264px;
  --aurora-toolbar-h: 56px;
  /* SiteShell.vue's taskbar, shown only while a window is minimized
     (html.aurora-has-taskbar toggles the bottom space reserved for it). */
  --aurora-taskbar-h: 56px;
  /* Space between the sidebar card and the browser's left/top/bottom
     edges (Sidebar.vue) — the toolbar and #wpcontent offsets below add
     the same amount so nothing overlaps the floating sidebar. */
  --aurora-sidebar-gap: 16px;
  /* Breathing room between page content and the right browser edge. */
  --aurora-gutter-r: 44px;

  --aurora-radius: 14px;
  --aurora-radius-lg: 24px;

  /* Light theme */
  --aurora-app-bg: #fafafa;        /* zinc-50  */
  /* Flat fallback for the handful of consumers that need a solid color
     (--aurora-app-bg itself may be a gradient once a theme preset applies). */
  --aurora-app-bg-solid: #fafafa;
  --aurora-bg: #ffffff;            /* frame    */
  --aurora-card-bg: #fafafa;       /* zinc-50  */
  /* Dashboard cards specifically (AuroraCard.vue) — a step further from
     --aurora-frame-bg than --aurora-card-bg so they read as distinct
     surfaces against the Dashboard's own frame, not a near-identical tone. */
  --aurora-card-bg-deep: #f0f0f2;
  --aurora-bg-subtle: #f4f4f5;     /* zinc-100 */
  --aurora-text: #18181b;          /* zinc-900 */
  --aurora-text-muted: #71717a;    /* zinc-500 */
  --aurora-border: #e4e4e7;        /* zinc-200 */
  --aurora-card-border: #ececef;
  --aurora-frame-bg: #ffffff;      /* native-page content panel */
  --aurora-frame-border: #e0e0e3;
  --aurora-accent: rgb(71 114 250);
  --aurora-accent-soft: rgb(71 114 250 / 0.1);
  --aurora-accent-text: #ffffff;

  /* Overridden by the font-picker setting (see SiteShell.vue::applyFontFamily);
     this is the fallback when no Google Font has been chosen. */
  --aurora-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Minified menu: the toolbar's collapse button toggles this class; every
   layout offset derives from --aurora-sidebar-w, so this one override
   reflows the toolbar and content automatically. */
html.aurora-collapsed {
  --aurora-sidebar-w: 68px;
}

html.aurora-dark {
  /* Dark theme — the immersive near-black look of the original */
  --aurora-app-bg: #09090b;        /* zinc-950 */
  --aurora-app-bg-solid: #09090b;
  --aurora-bg: #18181b;            /* zinc-900 frame */
  --aurora-card-bg: #1f1f23;       /* slightly elevated */
  --aurora-card-bg-deep: #131316;
  --aurora-bg-subtle: #27272a;     /* zinc-800 */
  --aurora-text: #f4f4f5;          /* zinc-100 */
  --aurora-text-muted: #a1a1aa;    /* zinc-400 */
  --aurora-border: #27272a;        /* zinc-800 */
  --aurora-card-border: #2e2e33;
  --aurora-frame-bg: #1c1c20;      /* slightly elevated panel */
  --aurora-frame-border: #34343b;
  --aurora-accent: rgb(125 158 255);
  --aurora-accent-soft: rgb(125 158 255 / 0.14);
}

/* --- Framing: only applies once the Vue shell has signalled ready --- */

html.aurora-ready,
html.aurora-ready body {
  background: var(--aurora-app-bg);
  /* Fixed so the gradient stays pinned to the viewport instead of
     scrolling with document height — the sidebar/toolbar are also
     position:fixed and paint no background of their own (see
     Sidebar.vue/Toolbar.vue), so this one gradient plane has to line up
     with them at every scroll position to read as a single unified
     background instead of a seam between "sidebar" and "page". */
  background-attachment: fixed;
  font-family: var(--aurora-font-family);
}

/* !important here defeats WordPress's own responsive #wpcontent margin
   rules (.auto-fold / folded menu states live in media queries at equal
   specificity). This is positioning the frame, not restyling content.
   The toolbar clearance lives here (on #wpcontent, which holds everything)
   rather than on #wpbody, so content rendered above #wpbody — like the
   takeover dashboard — also clears the fixed toolbar. */
html.aurora-ready #wpcontent {
  margin-left: calc(var(--aurora-sidebar-w) + var(--aurora-sidebar-gap) * 2) !important;
  padding-left: 0 !important;
  padding-top: var(--aurora-toolbar-h);
  transition: margin-left 0.2s ease;
}

/* The block editor (Gutenberg) doesn't live inside #wpcontent's normal
   box model — it renders its own skeleton as position:fixed, inset:0,
   completely independent of the margin-left above. Left unchecked it
   spans the full viewport and renders underneath the (higher z-index)
   sidebar and toolbar. Inset it the same amount #wpcontent gets. */
html.aurora-ready .interface-interface-skeleton {
  left: calc(var(--aurora-sidebar-w) + var(--aurora-sidebar-gap) * 2) !important;
  top: var(--aurora-toolbar-h) !important;
  transition: left 0.2s ease;
}

/* Aurora's own toolbar is skipped on the block editor (SiteShell.vue) —
   its own toolbar sits flush against the top instead, so no toolbar
   height needs to be reserved here; just the same top gap the sidebar
   gets, so the two line up. */
html.aurora-ready.aurora-no-toolbar .interface-interface-skeleton {
  top: var(--aurora-sidebar-gap) !important;
}

html.aurora-ready #wpbody-content {
  background: var(--aurora-frame-bg);
  color: var(--aurora-text);
  border: 1px solid var(--aurora-frame-border);
  border-radius: var(--aurora-radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: 16px var(--aurora-gutter-r) 24px 24px;
  padding: 32px;
  min-height: calc(100vh - var(--aurora-toolbar-h) - 40px);
  box-sizing: border-box;
  /* WP core sets #wpbody-content { float: left; width: 100% }, which (with
     box-sizing left alone) ignores the margin above and overflows past the
     right edge by margin-left + margin-right. Force it back to shrink-to-fit
     so the margin is actually respected. */
  float: none;
  width: auto;
}

/* SiteShell.vue's taskbar docks along the bottom edge only while a window
   is minimized — push content up by its height so pages stop above it
   instead of rendering underneath. */
html.aurora-has-taskbar #wpbody-content {
  margin-bottom: calc(24px + var(--aurora-taskbar-h));
}
html.aurora-has-taskbar .aurora-dashboard-frame {
  margin-bottom: calc(24px + var(--aurora-taskbar-h));
}

/* macOS-style title bar (windowChrome.js). Most pages get it injected as
   the first child of #wpbody-content — negative margins cancel the 32px
   padding above so it spans edge-to-edge like a real window title bar. */
.aurora-winbar {
  display: flex;
  align-items: center;
  gap: 8px;
}
#wpbody-content > .aurora-winbar {
  margin: -32px -32px 20px -32px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--aurora-frame-border);
  border-top-left-radius: var(--aurora-radius-lg);
  border-top-right-radius: var(--aurora-radius-lg);
}
.aurora-winbar__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
}
.aurora-winbar__dot:hover {
  filter: brightness(1.15);
}
.aurora-winbar__dot--close {
  background: #ff5f57;
}
.aurora-winbar__dot--minimize {
  background: #febc2e;
}
.aurora-winbar__dot--maximize {
  background: #28c840;
}

/* The Dashboard bypasses #wpbody-content (DashboardTakeover.php renders
   it into a separate sibling — see windowChrome.js), so it never got the
   card frame every other page has. windowChrome.js wraps the bar + the
   dashboard's mount point in this div to give it the same treatment. */
.aurora-dashboard-frame {
  background: var(--aurora-frame-bg);
  border: 1px solid var(--aurora-frame-border);
  border-radius: var(--aurora-radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  margin: 16px var(--aurora-gutter-r) 24px 24px;
  box-sizing: border-box;
}
.aurora-dashboard-frame > .aurora-winbar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--aurora-frame-border);
  border-top-left-radius: var(--aurora-radius-lg);
  border-top-right-radius: var(--aurora-radius-lg);
}

/* Yellow dot: on the Dashboard itself there's nowhere further "home" to
   send it, so minimize just collapses the frame down to the title bar in
   place — everywhere else, minimize navigates to the dashboard instead
   (see windowChrome.js) and SiteShell.vue's taskbar offers a way back. */
html.aurora-minimized #aurora-admin-dashboard-root {
  display: none !important;
}

/* Green dot: hide Aurora's own chrome (sidebar/toolbar) and let the
   content reclaim the full browser window, like restoring a real OS
   window to fullscreen. */
html.aurora-maximized .sidebar,
html.aurora-maximized .toolbar {
  display: none !important;
}
html.aurora-ready.aurora-maximized #wpcontent {
  margin-left: 0 !important;
}
html.aurora-ready.aurora-maximized .interface-interface-skeleton {
  left: 0 !important;
}
html.aurora-maximized .aurora-taskbar {
  left: 0 !important;
}

/* The settings page renders its own two boxed panels, so drop the outer
   content frame there — leaving just those panels on the dark backdrop.
   No background here: #wpbody-content is inset from the sidebar/gutter,
   not the full viewport, so painting var(--aurora-app-bg) on it computes
   its own independent (and visibly mismatched) gradient instance instead
   of sharing the one fixed gradient plane painted on html/body. */
html.aurora-ready body.toplevel_page_aurora-admin #wpbody-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/*
 * Native WordPress pages are fully dark-themed by a dedicated stylesheet
 * (admin/assets/native-dark.css), enqueued only on native pages and gated
 * on dark mode. It restyles WP's postboxes, forms, tables, buttons, etc.
 * Keeping that large surface in one isolated, native-only file means it
 * can never leak onto Aurora's own pages or affect light mode.
 */