/* ============================================================
   SmartiQo — Dark-blue brand background (matches logo #0863A9)
   Applied site-wide via <link> in every page <head>.
   To re-tint the whole site later, change --sq-bg-1 / --sq-bg-2.
   ============================================================ */
:root {
  --sq-bg-1: #0a2e5c; /* deep logo-navy */
  --sq-bg-2: #063b6e; /* slightly brighter logo-blue */

  /* Brand accent palette (derived from logo blue #0863A9) */
  --sq-blue: #0863a9;      /* primary accent = logo blue */
  --sq-blue-dark: #064b80; /* hover / pressed */
  --sq-tint: #eff6fe;      /* faint blue wash (hover bg) */
  --sq-tint2: #e2eefb;     /* selected bg */
  --sq-ink: #0a2e5c;       /* navy text on white */
  --sq-line: #d7e3f2;      /* soft blue-grey border */
}

/* Main page backdrop → dark blue everywhere */
html,
body,
body.app-grey,
#__next,
main {
  background: linear-gradient(160deg, var(--sq-bg-1) 0%, var(--sq-bg-2) 100%) !important;
  background-attachment: fixed !important;
}

/* Let the full-height app wrapper reveal the dark-blue body behind it */
body.app-grey > div[style*="min-height:100vh"],
body.app-grey > div[style*="min-height: 100vh"] {
  background: transparent !important;
}

/* ============================================================
   UI / UX POLISH — panels & accents tuned to the navy backdrop
   ============================================================ */

/* Main configurator card: let it float cleanly on the navy */
.m-5.p-5.bg-white.rounded-md {
  border-radius: 20px !important;
  border: 1px solid rgba(8, 99, 169, 0.1) !important;
  box-shadow: 0 24px 60px -18px rgba(3, 18, 45, 0.55),
              0 4px 14px rgba(3, 18, 45, 0.25) !important;
}

/* Selectable PANELS — the big option tiles (Touch Panel / Edge / Color …) */
.cursor-pointer.rounded-lg.border.shadow-md {
  border-radius: 14px !important;
  border: 1.5px solid var(--sq-line) !important;
  color: var(--sq-ink) !important;
  box-shadow: 0 2px 8px rgba(10, 46, 92, 0.08) !important;
  transition: border-color 0.18s ease, background-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.15s ease !important;
}
.cursor-pointer.rounded-lg.border.shadow-md:hover {
  border-color: var(--sq-blue) !important;
  background: var(--sq-tint) !important;
  box-shadow: 0 10px 24px rgba(8, 99, 169, 0.22) !important;
}
/* Selected panel (app adds .border-blue-600) */
.cursor-pointer.rounded-lg.border-blue-600 {
  border-color: var(--sq-blue) !important;
  background: var(--sq-tint2) !important;
  box-shadow: 0 0 0 3px rgba(8, 99, 169, 0.18),
              0 10px 24px rgba(8, 99, 169, 0.2) !important;
}

/* Icon swatch tiles (50×50 pickers) */
.bg-white.rounded-md.cursor-pointer.border.shadow {
  border: 1.5px solid var(--sq-line) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              box-shadow 0.15s ease !important;
}
.bg-white.rounded-md.cursor-pointer.border.shadow:hover {
  border-color: var(--sq-blue) !important;
  background: var(--sq-tint) !important;
  box-shadow: 0 6px 14px rgba(8, 99, 169, 0.22) !important;
}
.bg-white.rounded-md.cursor-pointer.border-blue-600 {
  border-color: var(--sq-blue) !important;
  background: var(--sq-tint2) !important;
  box-shadow: 0 0 0 3px rgba(8, 99, 169, 0.18) !important;
}

/* Inner grey trays → soft blue-grey so they belong to the theme
   (:not(body) keeps the dark-blue page background intact) */
.app-grey:not(body) {
  background: #eef3fb !important;
}

/* Primary buttons → logo blue */
.MuiButton-containedPrimary {
  background-color: var(--sq-blue) !important;
}
.MuiButton-containedPrimary:hover {
  background-color: var(--sq-blue-dark) !important;
}

/* Orders / Cart pages: their content sits in a bare transparent container
   (no white card like the configurator/dashboards have), which would leave
   dark text sitting on the navy. Give it its own readable white sheet.
   Home & dashboards have no .MuiContainer, so they are unaffected. */
.MuiContainer-root.MuiContainer-maxWidthXl {
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px -18px rgba(3, 18, 45, 0.55),
              0 4px 14px rgba(3, 18, 45, 0.25) !important;
  padding: 24px !important;
  margin: 20px auto !important;
}