/* Shared visual corrections for both portals, loaded after each portal's own stylesheet.
   Scope: type, flat surfaces, one radius scale. Layout and behaviour stay in the original bundles. */

:root {
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --default-font-family: var(--font-sans);
  --text-xs: 12px;
  --font-weight-black: 700;
  --font-weight-extrabold: 700;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 12px;
}

html, body, button, input, select, textarea {
  font-family: var(--font-sans);
}

/* Amounts, dates, times and plate numbers line up in columns. */
body {
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

/* Minimum readable sizes for an all-day work tool. */
.text-\[7\.5px\], .text-\[8px\], .text-\[8\.5px\], .text-\[9px\], .text-\[9\.25px\], .text-\[9\.5px\], .text-\[9\.75px\] { font-size: 11px; }
.text-\[10px\], .text-\[10\.25px\], .text-\[10\.5px\], .text-\[10\.75px\], .text-\[11px\] { font-size: 12px; }
.text-\[11\.5px\] { font-size: 12.5px; }

/* Flat surfaces: gradients become the solid colour they ended on. */
[class*="bg-gradient-to-"] {
  background-image: none !important;
  background-color: var(--tw-gradient-to, var(--tw-gradient-from));
}
[class*="bg-[linear-gradient(180deg"],
[class*="bg-[linear-gradient(135deg,#f"],
[class*="bg-[linear-gradient(135deg,rgba(15"],
[class*="bg-[radial-gradient"] {
  background-image: none !important;
  background-color: #fff;
}
[class*="bg-[linear-gradient(180deg,#f8fafc_0%,#f1f5f9"],
[class*="bg-[linear-gradient(180deg,rgba(248,250,252,0.94)_0%,rgba(241,245,249"],
[class*="bg-[linear-gradient(180deg,rgba(248,250,252,0.98)_0%,rgba(241,245,249"],
[class*="bg-[linear-gradient(180deg,#fbfdff"],
[class*="bg-[radial-gradient(circle_at_top,#eff6ff"] { background-color: #f4f6f9; }
[class*="bg-[linear-gradient(180deg,rgba(248,250,252,0.42)"] { background-color: transparent; }
[class*="bg-[linear-gradient(180deg,#19283f"] { background-color: #172338; }
[class*="bg-[linear-gradient(135deg,rgba(15,23,42"] { background-color: #172338; }
[class*="bg-[linear-gradient(135deg,#10b981"] { background-image: none !important; background-color: #058a5f; }
[class*="bg-[linear-gradient(135deg,#0ea5e9"] { background-image: none !important; background-color: #2563eb; }

/* Amber and orange gradient buttons are secondary actions: outlined, not lit up. */
[class*="bg-[linear-gradient(180deg,#fde68a"],
[class*="bg-[linear-gradient(180deg,#fcd34d"],
[class*="to-orange-4"],
[class*="to-orange-35"] {
  background-color: #fff !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

/* Lines separate content; decorative glows and inner highlights go. */
.shadow, .shadow-sm, .shadow-md,
[class*="shadow-[inset_0_1px_0"],
[class*="shadow-[0_1px_1px"],
[class*="shadow-[0_1px_3px"],
[class*="shadow-[0_8px"],
[class*="shadow-[0_10px"],
[class*="shadow-[0_16px"],
[class*="shadow-[0_18px"],
[class*="shadow-emerald"] {
  --tw-shadow: 0 0 #0000 !important;
}

/* Buttons respond with colour, not by floating upward. */
[class*="hover:-translate-y"]:hover { translate: none !important; }

/* One radius scale: 6px controls, 10px panels, 12px dialogs; pills stay round. */
.rounded-\[7px\], .rounded-\[8px\], .rounded-\[9px\] { border-radius: 6px; }
.rounded-\[10px\], .rounded-\[11px\], .rounded-\[12px\] { border-radius: 10px; }
.rounded-\[14px\], .rounded-\[16px\], .rounded-\[18px\], .rounded-\[22px\], .rounded-\[24px\] { border-radius: 12px; }
.rounded-t-\[16px\] { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* Keyboard focus is always visible. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 639px) {
  html[data-portal="customer"] #root header > .flex:first-child > div { display: none; }
  html[data-portal="customer"] main .flex:has(> input[type="date"]:not([aria-label])) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-portal="customer"] main input[type="date"]:not([aria-label]) {
    grid-column: 1 / -1;
    width: 100%;
  }
  html[data-portal="customer"] main .flex:has(> input[type="date"]:not([aria-label])) > select {
    width: 100%;
  }

  html[data-portal="customer"] main .grid:has(> div > .flex[class~="py-[18px]"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-portal="customer"] main .grid:has(> div > .flex[class~="py-[18px]"]) > div > .flex.items-center {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }
  html[data-portal="customer"] main .grid:has(> div > .flex[class~="py-[18px]"]) > div > .flex.items-center > .min-w-0 {
    width: 100%;
  }

  html[data-portal="customer"] main .grid:has(> div > .flex[class~="py-[18px]"]) .min-w-0 > :last-child {
    font-size: 18px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
  }
  html[data-portal="customer"] main [class~="sm:grid-cols-6"] > button {
    flex-direction: column;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
  }
  html[data-portal="customer"] main .flex:has(> .flex > input[type="date"][aria-label]) {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  html[data-portal="customer"] main .flex:has(> input[type="date"][aria-label]) {
    width: 100%;
    min-width: 0;
  }
  html[data-portal="customer"] main input[type="date"][aria-label] {
    width: calc((100% - 22px) / 2);
    min-width: 0;
    padding-inline: 5px;
  }
}

@media (max-width: 767px) {
  html[data-portal="manager"] { --app-scale: 1 !important; }
  html[data-portal="manager"] #root {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    transform: none;
  }
  html[data-portal="manager"] #root > div > aside[style*="width: 208px"] {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
  }
  html[data-portal="manager"] #root > div > div > header { padding-inline: 10px; }
  html[data-portal="manager"] header > .pointer-events-none { display: none; }
  html[data-portal="manager"] header > .ml-3 { max-width: 140px; padding: 5px; }
  html[data-portal="manager"] header > .ml-3 > span:not(:first-child) { display: none; }
  html[data-portal="manager"] .bm-order-layout {
    flex-direction: column;
    overflow-y: auto;
    gap: 12px;
    padding: 6px;
  }
  html[data-portal="manager"] .bm-order-editor {
    width: 100% !important;
    min-height: 720px;
    flex: none;
  }
  html[data-portal="manager"] .bm-order-results {
    width: 100%;
    min-height: 480px;
    flex: none;
  }
  html[data-portal="manager"] .bm-order-results > div:first-child { overflow-x: auto; }
  html[data-portal="manager"] .bm-order-layout .overscroll-contain,
  html[data-portal="manager"] .bm-settlement-layout .overscroll-contain {
    overscroll-behavior: auto;
  }
  html[data-portal="manager"] .bm-settlement-layout {
    flex-direction: column;
    overflow-y: auto;
  }
  html[data-portal="manager"] .bm-settlement-layout > section {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 420px;
  }
  html[data-portal="manager"] .bm-settlement-layout > section:first-child { min-height: 280px; }
}