@tailwind base;
@tailwind components;
@tailwind utilities;

/* =========================================================
   Hard isolation from WP admin CSS.
   Everything inside #backreload-root is reset to neutral
   defaults so Tailwind classes work as designed.
   ========================================================= */

/* Take over the WP admin content area cleanly. Zero all the padding /
   margin layers WP adds around the content wrapper.

   Two body-class patterns to match:
     - `toplevel_page_backreload` — when the user is on the top-level menu
        item (Dashboard).
     - `backreload_page_<submenu-slug>` — when the user is on any submenu
        (Backups, Restore, Migrate, etc.). WP generates these
        automatically from add_submenu_page() calls. Without matching
        the submenu pattern too, the resets only fire on the top-level
        page and the submenus inherit WP's default padding — the
        reported "extra gap between WP sidebar and BackReload app" bug.

   The attribute selector `[class*="backreload_page_"]` matches any
   submenu under our plugin without us having to enumerate each slug. */
.toplevel_page_backreload #wpcontent,
body[class*="backreload_page_"] #wpcontent     { padding-left: 0 !important; }

.toplevel_page_backreload #wpbody-content,
body[class*="backreload_page_"] #wpbody-content{ padding: 0 !important; }

.toplevel_page_backreload #wpbody-content .update-nag,
.toplevel_page_backreload #wpbody-content .notice,
.toplevel_page_backreload #wpbody-content .updated,
.toplevel_page_backreload #wpbody-content .error,
.toplevel_page_backreload #wpbody-content > .wrap > h1.wp-heading-inline,
.toplevel_page_backreload #screen-meta,
.toplevel_page_backreload #screen-meta-links,
body[class*="backreload_page_"] #wpbody-content .update-nag,
body[class*="backreload_page_"] #wpbody-content .notice,
body[class*="backreload_page_"] #wpbody-content .updated,
body[class*="backreload_page_"] #wpbody-content .error,
body[class*="backreload_page_"] #wpbody-content > .wrap > h1.wp-heading-inline,
body[class*="backreload_page_"] #screen-meta,
body[class*="backreload_page_"] #screen-meta-links { display: none !important; }

.toplevel_page_backreload #wpfooter,
body[class*="backreload_page_"] #wpfooter { display: none !important; }

.toplevel_page_backreload .wrap,
body[class*="backreload_page_"] .wrap { margin: 0 !important; padding: 0 !important; }

.toplevel_page_backreload #wpbody,
body[class*="backreload_page_"] #wpbody { padding-top: 0 !important; }

#backreload-root {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  color: #0e1116 !important;
  background: #f7f8f9 !important;
  margin: 0 !important;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 32px);
  /* No overflow-x:hidden — it breaks sticky positioning in nested flex contexts.
     Children use min-w-0 to prevent horizontal overflow instead. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
  /* Brand-tint native form-control highlights (selected dates in the
     datetime-local popup, checkbox/radio marks, range sliders, etc.).
     The native picker itself is browser-chrome and can't be redesigned,
     but accent-color hijacks its highlight color in every modern engine
     (Chrome 93+, Firefox 92+, Safari 15.4+). Falls back to the browser
     default on older engines — purely cosmetic. */
  accent-color: #1dd1a1;
}

/* Box model reset for everything inside our app */
#backreload-root,
#backreload-root *,
#backreload-root *::before,
#backreload-root *::after {
  box-sizing: border-box;
}

/* Reset WP admin button styles — this is the big one */
#backreload-root button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#backreload-root button:focus {
  outline: none;
  box-shadow: none;
}

/* Reset typography that WP admin styles aggressively */
#backreload-root h1,
#backreload-root h2,
#backreload-root h3,
#backreload-root h4,
#backreload-root h5,
#backreload-root h6 {
  all: unset;
  display: block;
  color: inherit;
  font-family: inherit;
}
#backreload-root p {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
#backreload-root a {
  color: inherit;
  text-decoration: none;
  background: transparent;
}
#backreload-root a:focus,
#backreload-root a:hover {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  outline: none;
}

/* Reset lists */
#backreload-root ul,
#backreload-root ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
#backreload-root li { margin: 0; }

/* Reset form controls so Tailwind owns them */
#backreload-root input,
#backreload-root select,
#backreload-root textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  color: inherit;
  background: #fff;
  border: 1px solid #dfe2e6;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  box-shadow: none;
  min-height: 0;
}
#backreload-root input[type="checkbox"],
#backreload-root input[type="radio"] {
  width: auto;
  height: auto;
  margin: 0;
  border: 1px solid #c3c8ce;
  background: #fff;
  box-shadow: none;
}
#backreload-root input:focus,
#backreload-root select:focus,
#backreload-root textarea:focus {
  outline: none;
  box-shadow: none;
}
#backreload-root input[type="range"] {
  background: transparent;
  border: none;
}

/* Reset tables — WP admin loves to style these */
#backreload-root table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  background: transparent;
}
#backreload-root th,
#backreload-root td {
  padding: 0;
  text-align: left;
  font-weight: inherit;
  vertical-align: middle;
}

/* SVG sizing safety */
#backreload-root svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Dialog overlay must escape WP admin z-index stack */
#backreload-root .backreload-dialog { z-index: 100000; }

/* Toast slide-in animation */
@keyframes backreload-slide-in {
  from { opacity: 0; transform: translateY(8px) translateX(8px); }
  to   { opacity: 1; transform: translateY(0)   translateX(0); }
}

/* Header is now in-flow at all breakpoints (see Layout.tsx for the
   reasoning). No padding-top compensation needed — the header takes its
   own h-14 (56px) of space naturally as a flex child, and content
   starts beneath it. Keeping this comment so the change isn't reverted
   without context. */
