/*
 * 1ASN Professional Enterprise UI — production-safe post-build layer
 * Version 2026.07.21
 *
 * This stylesheet intentionally sits after the compiled Tailwind bundle.
 * It standardises the visual system without changing React, Firebase,
 * Firestore, Google Drive integration, routing, roles, or application data.
 */

:root {
  --ui-primary-950: #08264a;
  --ui-primary-900: #0b315e;
  --ui-primary-800: #10447e;
  --ui-primary-700: #1557a0;
  --ui-primary-600: #1769c2;
  --ui-primary-500: #2180e5;
  --ui-primary-100: #dbeafe;
  --ui-primary-50: #eff6ff;

  --ui-success-700: #047857;
  --ui-success-100: #d1fae5;
  --ui-success-50: #ecfdf5;
  --ui-warning-700: #b45309;
  --ui-warning-100: #fef3c7;
  --ui-warning-50: #fffbeb;
  --ui-danger-700: #b42318;
  --ui-danger-100: #fee4e2;
  --ui-danger-50: #fef3f2;

  --ui-ink: #101828;
  --ui-ink-soft: #344054;
  --ui-muted: #667085;
  --ui-muted-light: #98a2b3;
  --ui-border: #d0d5dd;
  --ui-border-soft: #e4e7ec;
  --ui-canvas: #f5f7fa;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f9fafb;

  --ui-radius-xs: 6px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 14px;
  --ui-radius-xl: 18px;

  --ui-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ui-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --ui-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --ui-shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.14);
  --ui-ring: 0 0 0 4px rgba(33, 128, 229, 0.14);

  --ui-sidebar-width: 280px;
  --ui-sidebar-collapsed: 76px;
  --ui-header-height: 66px;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ui-canvas);
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ui-ink);
  background: var(--ui-canvas) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { min-height: 100vh; }

::selection {
  color: #fff;
  background: var(--ui-primary-700);
}

/* Remove the compiled global transition-all behaviour. */
*, *::before, *::after { transition-property: none; }

a, button, input, select, textarea, summary,
[role="button"], [tabindex]:not([tabindex="-1"]) {
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--ui-primary-600) !important;
  outline-offset: 2px !important;
  box-shadow: var(--ui-ring) !important;
}

button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: translateY(1px);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ui-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  transform: translateY(-160%);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary-950);
  color: #fff;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--ui-shadow-lg);
}
.ui-skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Typography and density
   -------------------------------------------------------------------------- */

.font-black { font-weight: 800 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-display { font-family: inherit !important; }

h1, h2, h3, h4, h5, h6 {
  color: var(--ui-ink);
  letter-spacing: -0.018em !important;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.text-slate-900 { color: var(--ui-ink) !important; }
.text-slate-800 { color: #1d2939 !important; }
.text-slate-700 { color: var(--ui-ink-soft) !important; }
.text-slate-600 { color: #475467 !important; }
.text-slate-500 { color: var(--ui-muted) !important; }
.text-slate-400 { color: var(--ui-muted-light) !important; }

.tracking-widest,
[class*="tracking-[0.18em]"],
[class*="tracking-[0.22em]"] {
  letter-spacing: 0.08em !important;
}

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */

.ui-app-shell {
  background: var(--ui-canvas) !important;
}

.ui-app-shell > aside,
aside.ui-sidebar {
  width: var(--ui-sidebar-width) !important;
  background: var(--ui-surface) !important;
  border-right: 1px solid var(--ui-border-soft) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ui-app-shell > aside[class*="w-24"],
aside.ui-sidebar[class*="w-24"] {
  width: var(--ui-sidebar-collapsed) !important;
}

aside.ui-sidebar > div:first-child {
  min-height: var(--ui-header-height);
  padding: 12px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid var(--ui-border-soft) !important;
}

aside.ui-sidebar > div:first-child div[class*="bg-gradient"] {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, var(--ui-primary-800), var(--ui-primary-600)) !important;
  border: 0 !important;
  box-shadow: 0 5px 14px rgba(21, 87, 160, 0.18) !important;
  font-size: 14px !important;
}

aside.ui-sidebar nav {
  padding: 16px 12px 24px !important;
  margin-top: 0 !important;
}

aside.ui-sidebar nav > div {
  margin-bottom: 17px !important;
}

aside.ui-sidebar nav h3 {
  color: #667085 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
}

aside.ui-sidebar nav h3 + p,
aside.ui-sidebar nav button p,
aside.ui-sidebar nav a p {
  display: none !important;
}

aside.ui-sidebar nav button,
aside.ui-sidebar nav a,
aside.ui-sidebar nav [role="button"] {
  min-height: 42px;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #475467 !important;
  background: transparent !important;
  box-shadow: none !important;
}

aside.ui-sidebar nav button:hover,
aside.ui-sidebar nav a:hover,
aside.ui-sidebar nav [role="button"]:hover {
  color: var(--ui-primary-800) !important;
  background: var(--ui-primary-50) !important;
  border-color: #dbeafe !important;
}

aside.ui-sidebar nav button > div[class*="w-8"],
aside.ui-sidebar nav a > div[class*="w-8"] {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  color: #667085 !important;
  background: #f2f4f7 !important;
}

aside.ui-sidebar nav button:hover > div[class*="w-8"],
aside.ui-sidebar nav a:hover > div[class*="w-8"] {
  color: var(--ui-primary-700) !important;
  background: #dbeafe !important;
}

aside.ui-sidebar nav button.ui-nav-active,
aside.ui-sidebar nav a.ui-nav-active,
aside.ui-sidebar nav [aria-current="page"] {
  color: var(--ui-primary-900) !important;
  background: #eaf3ff !important;
  border-color: #cfe3fb !important;
  box-shadow: inset 3px 0 0 var(--ui-primary-600) !important;
}

aside.ui-sidebar nav .ui-nav-active > div[class*="w-8"],
aside.ui-sidebar nav [aria-current="page"] > div[class*="w-8"] {
  color: #fff !important;
  background: var(--ui-primary-700) !important;
}

aside.ui-sidebar nav .ui-nav-active > div:first-child,
aside.ui-sidebar nav [aria-current="page"] > div:first-child {
  background: none !important;
  box-shadow: none !important;
}

aside.ui-sidebar nav span[class*="rounded-full"] {
  border: 1px solid #bfdbfe !important;
  color: var(--ui-primary-800) !important;
  background: #eff6ff !important;
}

aside.ui-sidebar > div:last-child {
  padding: 12px !important;
  border-top: 1px solid var(--ui-border-soft) !important;
  background: #fff !important;
}

aside.ui-sidebar > div:last-child > div {
  border-radius: 10px !important;
  border-color: var(--ui-border-soft) !important;
  box-shadow: none !important;
}

.ui-main-shell,
.ui-app-shell > main {
  min-width: 0;
  background: var(--ui-canvas) !important;
}

.ui-main-shell > header,
header.ui-topbar {
  min-height: var(--ui-header-height) !important;
  padding: 10px 24px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid var(--ui-border-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}

header.ui-topbar div[class*="w-10"][class*="bg-indigo"] {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  color: var(--ui-primary-700) !important;
  background: var(--ui-primary-50) !important;
}

header.ui-topbar h1 {
  font-size: 17px !important;
  font-weight: 700 !important;
}

header.ui-topbar input {
  min-height: 40px !important;
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: 9px !important;
  color: var(--ui-ink) !important;
  background: #f9fafb !important;
  box-shadow: none !important;
}

header.ui-topbar input:hover { border-color: #c7ced8 !important; }
header.ui-topbar input:focus {
  border-color: var(--ui-primary-500) !important;
  background: #fff !important;
  box-shadow: var(--ui-ring) !important;
}

header.ui-topbar button {
  border-radius: 8px !important;
}

header.ui-topbar button[class*="bg-slate-100"] {
  color: #475467 !important;
  background: #f2f4f7 !important;
  border: 1px solid #e4e7ec !important;
}

.ui-main-scroll {
  padding: 24px !important;
  background: var(--ui-canvas) !important;
}

.ui-content-container {
  max-width: 1480px !important;
  margin-inline: auto !important;
  gap: 20px !important;
}

/* Page context/banner: convert the decorative dark hero into a professional
   page header panel. */
.ui-page-context {
  min-height: 92px;
  padding: 20px 22px 20px 26px !important;
  border: 1px solid var(--ui-border-soft) !important;
  border-left: 4px solid var(--ui-primary-600) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-ink) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
  overflow: hidden;
}

.ui-page-context::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 230px;
  height: 230px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(33, 128, 229, 0.08), transparent 68%);
  pointer-events: none;
}

.ui-page-context > div[class*="absolute"],
.ui-page-context > [class*="absolute"] {
  opacity: 0.35;
}

.ui-page-context p,
.ui-page-context h1,
.ui-page-context h2,
.ui-page-context h3,
.ui-page-context span {
  color: inherit !important;
}

.ui-page-context p:first-child {
  color: var(--ui-primary-700) !important;
}

.ui-page-context h2 {
  margin-top: 3px !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}

.ui-page-context h2 + p {
  color: var(--ui-muted) !important;
}

.ui-page-context > div:last-child > div {
  border: 1px solid var(--ui-border-soft) !important;
  color: var(--ui-ink-soft) !important;
  background: var(--ui-surface-soft) !important;
  border-radius: 9px !important;
}

/* --------------------------------------------------------------------------
   Surfaces, panels and dashboard cards
   -------------------------------------------------------------------------- */

.apple-card,
.card-modern,
.glass,
.ui-panel,
main div[class*="bg-white"][class*="rounded-3xl"],
main div[class*="bg-white"][class*="rounded-2xl"],
main section[class*="bg-white"][class*="rounded-3xl"],
main section[class*="bg-white"][class*="rounded-2xl"],
main div[class*="bg-white"][class*="rounded-[2rem]"],
main div[class*="bg-white"][class*="rounded-[3rem]"] {
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

.glass {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
}

.ui-panel:hover,
.apple-card:hover,
.card-modern:hover {
  box-shadow: var(--ui-shadow-sm) !important;
}

main [class*="rounded-[3rem]"] { border-radius: var(--ui-radius-xl) !important; }
main [class*="rounded-[2.5rem]"] { border-radius: var(--ui-radius-xl) !important; }
main [class*="rounded-[2rem]"] { border-radius: var(--ui-radius-lg) !important; }
main [class*="rounded-3xl"] { border-radius: var(--ui-radius-lg) !important; }
main [class*="rounded-2xl"] { border-radius: var(--ui-radius-md) !important; }

main [class*="shadow-xl"],
main [class*="shadow-2xl"] {
  box-shadow: var(--ui-shadow-md) !important;
}

/* Neutralise decorative gradients inside authenticated application pages. */
.ui-app-shell main [class*="from-indigo-"][class*="to-blue-"],
.ui-app-shell main [class*="from-indigo-"][class*="to-purple-"],
.ui-app-shell main [class*="from-purple-"][class*="to-indigo-"] {
  --tw-gradient-from: var(--ui-primary-700) !important;
  --tw-gradient-to: var(--ui-primary-600) !important;
}

.ui-stat-card {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

.ui-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ui-primary-600);
}

.ui-stat-card [class*="text-3xl"],
.ui-stat-card [class*="text-4xl"] {
  color: var(--ui-ink) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

.ui-section-heading {
  margin-bottom: 16px;
}

.ui-section-heading h2,
.ui-section-heading h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Buttons and controls
   -------------------------------------------------------------------------- */

button, a[role="button"] {
  font-weight: 600;
}

button[class*="rounded-xl"],
a[class*="rounded-xl"],
button[class*="rounded-2xl"],
a[class*="rounded-2xl"] {
  border-radius: 9px !important;
}

button[class*="bg-indigo-"],
a[class*="bg-indigo-"],
button[class*="bg-blue-600"],
a[class*="bg-blue-600"] {
  border: 1px solid var(--ui-primary-700) !important;
  color: #fff !important;
  background: var(--ui-primary-700) !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
}

button[class*="bg-indigo-"]:hover,
a[class*="bg-indigo-"]:hover,
button[class*="bg-blue-600"]:hover,
a[class*="bg-blue-600"]:hover {
  border-color: var(--ui-primary-900) !important;
  background: var(--ui-primary-800) !important;
  box-shadow: var(--ui-shadow-sm) !important;
  transform: none !important;
}

button[class*="bg-emerald-"],
a[class*="bg-emerald-"] {
  border: 1px solid #047857 !important;
  background-image: none !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

button[class*="bg-red-"],
button[class*="bg-rose-"],
a[class*="bg-red-"],
a[class*="bg-rose-"] {
  border: 1px solid var(--ui-danger-700) !important;
  background-image: none !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

button[class*="bg-white"],
a[class*="bg-white"],
button[class*="bg-slate-100"],
a[class*="bg-slate-100"] {
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-ink-soft) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

button[class*="bg-white"]:hover,
a[class*="bg-white"]:hover,
button[class*="bg-slate-100"]:hover,
a[class*="bg-slate-100"]:hover {
  border-color: #98a2b3 !important;
  background: #f9fafb !important;
}

/* Forms */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  min-height: 42px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-sm) !important;
  color: var(--ui-ink) !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
}

textarea {
  min-height: 108px;
  line-height: 1.55;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--ui-muted-light) !important;
  opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover {
  border-color: #98a2b3 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
select:focus,
textarea:focus {
  border-color: var(--ui-primary-500) !important;
  outline: none !important;
  box-shadow: var(--ui-ring) !important;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--ui-primary-700);
}

label {
  color: var(--ui-ink-soft) !important;
  font-weight: 600;
}

.ui-form-section {
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

/* --------------------------------------------------------------------------
   Tables, lists, tabs and badges
   -------------------------------------------------------------------------- */

.ui-table-shell,
div:has(> table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  border-radius: var(--ui-radius-lg);
}

table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

thead {
  position: sticky;
  top: 0;
  z-index: 3;
}

thead th {
  min-height: 44px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  color: #475467 !important;
  background: #f8fafc !important;
  border-top: 1px solid var(--ui-border-soft) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr { background: #fff; }
tbody tr:nth-child(even) { background: #fcfcfd; }
tbody tr:hover { background: #f5f9ff !important; }

td {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid var(--ui-border-soft) !important;
  color: #344054;
  vertical-align: middle;
}

th:first-child, td:first-child { padding-left: 18px !important; }
th:last-child, td:last-child { padding-right: 18px !important; }

.ui-tabs {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: 10px !important;
  background: #f2f4f7 !important;
}

.ui-tabs button,
.ui-tabs a {
  min-height: 36px;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.ui-tab-active {
  color: var(--ui-primary-900) !important;
  background: #fff !important;
  border-color: var(--ui-border-soft) !important;
  box-shadow: var(--ui-shadow-xs) !important;
}

span[class*="rounded-full"][class*="bg-"],
div[class*="rounded-full"][class*="bg-"] {
  border: 1px solid rgba(102, 112, 133, 0.14);
  font-weight: 600;
}

.bg-indigo-50 { background-color: var(--ui-primary-50) !important; }
.text-indigo-600, .text-indigo-700 { color: var(--ui-primary-700) !important; }
.border-indigo-100, .border-indigo-200 { border-color: #bfdbfe !important; }

/* --------------------------------------------------------------------------
   Dialogs, notifications, landing and authentication pages
   -------------------------------------------------------------------------- */

[role="dialog"],
.ui-dialog {
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: var(--ui-radius-xl) !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-lg) !important;
}

.fixed.inset-0[class*="bg-black"],
.fixed.inset-0[class*="backdrop"] {
  background: rgba(16, 24, 40, 0.58) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ui-public-page {
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.8), rgba(255,255,255,0) 420px),
    #fff !important;
}

.ui-public-page header {
  border-bottom: 1px solid rgba(228, 231, 236, 0.9) !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

.ui-public-page [class*="from-indigo-"][class*="to-blue-"],
.ui-public-page [class*="from-indigo-"][class*="to-purple-"] {
  --tw-gradient-from: var(--ui-primary-800) !important;
  --tw-gradient-to: var(--ui-primary-600) !important;
}

.ui-login-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(33,128,229,0.11), transparent 30rem),
    linear-gradient(145deg, #f8fafc 0%, #eef4fb 100%) !important;
}

.ui-login-card {
  border: 1px solid var(--ui-border-soft) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 20px 55px rgba(16,24,40,0.12) !important;
}

/* --------------------------------------------------------------------------
   Scrollbars and motion
   -------------------------------------------------------------------------- */

* { scrollbar-width: thin; scrollbar-color: #b8c1cc transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b8c1cc;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: #98a2b3;
  background-clip: padding-box;
}

.animate-pulse { animation-duration: 1.8s !important; }
.animate-spin { animation-duration: 0.8s !important; }

/* --------------------------------------------------------------------------
   Responsive behaviour
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
  :root { --ui-sidebar-width: 264px; }
  .ui-main-scroll { padding: 20px !important; }
  header.ui-topbar { padding-inline: 18px !important; }
}

@media (max-width: 1023px) {
  .ui-main-shell, .ui-app-shell > main { width: 100%; }
  .ui-main-scroll { padding: 18px !important; }
  .ui-page-context { padding: 18px 20px !important; }
}

@media (max-width: 767px) {
  :root {
    --ui-radius-lg: 12px;
    --ui-radius-xl: 14px;
  }

  header.ui-topbar {
    min-height: 60px !important;
    padding: 8px 12px !important;
  }

  .ui-main-scroll { padding: 14px !important; }
  .ui-content-container { gap: 14px !important; }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  button, a[role="button"] { min-height: 40px; }

  table { min-width: 720px; }
  th, td { padding-block: 11px !important; }

  main div[class*="p-8"],
  main section[class*="p-8"] { padding: 18px !important; }
  main div[class*="p-10"],
  main section[class*="p-10"] { padding: 20px !important; }

  main div[class*="gap-8"] { gap: 18px !important; }
  main div[class*="space-y-8"] > :not(:last-child) { margin-bottom: 18px !important; }
}

@media (max-width: 420px) {
  .ui-main-scroll { padding: 10px !important; }
  h1[class*="text-4xl"] { font-size: 30px !important; }
  h1[class*="text-3xl"] { font-size: 27px !important; }
  main div[class*="px-6"] { padding-inline: 15px !important; }
  main div[class*="py-6"] { padding-block: 15px !important; }
}

@media (prefers-contrast: more) {
  :root {
    --ui-border: #667085;
    --ui-border-soft: #98a2b3;
  }
  button, input, select, textarea { border-width: 2px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body { background: #fff !important; }
  header, aside, .ui-skip-link { display: none !important; }
  main { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .ui-main-scroll { padding: 0 !important; }
  div[class*="shadow"], section[class*="shadow"] { box-shadow: none !important; }
  table { min-width: 0 !important; }
  thead { position: static; }
}

/* ========================================================================== 
   1ASN HUMANIZED PROFESSIONAL LAYER
   Version 2026.07.21-h1
   Higher contrast, warmer surfaces, clearer hierarchy, less template-like UI.
   ========================================================================== */

:root {
  --ui-primary-950: #102a43;
  --ui-primary-900: #163a5f;
  --ui-primary-800: #1d4f7a;
  --ui-primary-700: #25679d;
  --ui-primary-600: #2f7fbe;
  --ui-primary-500: #4096d0;
  --ui-primary-100: #dceeff;
  --ui-primary-50: #f0f7ff;

  --ui-accent-700: #0f766e;
  --ui-accent-100: #ccfbf1;
  --ui-accent-50: #f0fdfa;
  --ui-warm-700: #a15c07;
  --ui-warm-100: #ffedc2;
  --ui-warm-50: #fff9ed;

  --ui-ink: #17212f;
  --ui-ink-soft: #354255;
  --ui-muted: #59677a;
  --ui-muted-light: #748297;
  --ui-border: #cbd3dd;
  --ui-border-soft: #e1e6ec;
  --ui-canvas: #f4f6f8;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-surface-warm: #fffdf9;

  --ui-radius-sm: 9px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;
  --ui-shadow-xs: 0 1px 2px rgba(16, 42, 67, .05), 0 1px 1px rgba(16, 42, 67, .025);
  --ui-shadow-sm: 0 4px 14px rgba(16, 42, 67, .075);
  --ui-shadow-md: 0 12px 34px rgba(16, 42, 67, .10);
  --ui-ring: 0 0 0 4px rgba(47, 127, 190, .16);
  --ui-sidebar-width: 296px;
}

body {
  color: var(--ui-ink) !important;
  background:
    radial-gradient(circle at 88% -10%, rgba(64, 150, 208, .055), transparent 28rem),
    var(--ui-canvas) !important;
  line-height: 1.5;
}

/* Strong baseline contrast. These declarations repair pale utility colours
   inherited from the old theme without flattening semantic colours. */
.text-slate-950, .text-gray-950 { color: #111827 !important; }
.text-slate-900, .text-gray-900 { color: var(--ui-ink) !important; }
.text-slate-800, .text-gray-800 { color: #263445 !important; }
.text-slate-700, .text-gray-700 { color: var(--ui-ink-soft) !important; }
.text-slate-600, .text-gray-600 { color: #4b5a6d !important; }
.text-slate-500, .text-gray-500 { color: #5f6e82 !important; }
.text-slate-400, .text-gray-400 { color: #718096 !important; }
.text-slate-300, .text-gray-300 { color: #8793a5 !important; }

/* Do not allow legacy white text to disappear on surfaces converted to white. */
:is(.ui-panel, .ui-stat-card, .ui-form-section, .ui-login-card, .ui-page-context)
  :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,span):not([class*="bg-"]) {
  color: inherit;
}

.ui-panel,
.ui-stat-card,
.ui-form-section,
.ui-login-card,
.ui-page-context {
  color: var(--ui-ink) !important;
}

/* Humanised navigation: preserve useful descriptions rather than presenting
   an austere icon list. */
aside.ui-sidebar nav h3 + p,
aside.ui-sidebar nav button p,
aside.ui-sidebar nav a p {
  display: block !important;
  margin-top: 2px !important;
  color: #758398 !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

aside.ui-sidebar nav button,
aside.ui-sidebar nav a,
aside.ui-sidebar nav [role="button"] {
  min-height: 52px;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}

aside.ui-sidebar nav button > div[class*="w-8"],
aside.ui-sidebar nav a > div[class*="w-8"] {
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
}

aside.ui-sidebar nav .ui-nav-active p,
aside.ui-sidebar nav [aria-current="page"] p {
  color: #55718d !important;
}

aside.ui-sidebar > div:first-child {
  min-height: 74px;
  padding: 14px 17px !important;
}

aside.ui-sidebar > div:first-child div[class*="bg-gradient"] {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #1d4f7a, #2f7fbe) !important;
  box-shadow: 0 7px 18px rgba(29, 79, 122, .20) !important;
}

/* A softer top bar with strong readable utility text. */
header.ui-topbar {
  min-height: 70px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 1px 0 rgba(16,42,67,.025) !important;
}

header.ui-topbar :is(p,span,small) { color: #536276; }
header.ui-topbar h1 { color: var(--ui-ink) !important; font-size: 18px !important; }
header.ui-topbar input::placeholder { color: #6b788b !important; }

.ui-main-scroll {
  padding: 26px 28px 34px !important;
}

.ui-content-container {
  max-width: 1460px !important;
  gap: 22px !important;
}

/* Page header: informational rather than decorative. */
.ui-page-context {
  min-height: 108px;
  padding: 23px 25px 23px 28px !important;
  border: 1px solid #dbe3ec !important;
  border-left: 5px solid var(--ui-primary-600) !important;
  background:
    linear-gradient(100deg, rgba(240,247,255,.95), rgba(255,255,255,.98) 44%, rgba(240,253,250,.62)) !important;
  box-shadow: 0 5px 18px rgba(16,42,67,.055) !important;
}

.ui-page-context p:first-child {
  color: #25679d !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
}

.ui-page-context h2 {
  color: #17212f !important;
  font-size: clamp(20px, 2vw, 24px) !important;
  line-height: 1.28 !important;
}

.ui-page-context h2 + p,
.ui-page-context p:not(:first-child) {
  color: #566579 !important;
  max-width: 76ch;
  line-height: 1.55 !important;
}

/* Cards: more tactile, less synthetic. */
.apple-card,
.card-modern,
.glass,
.ui-panel,
.ui-stat-card,
.ui-form-section {
  border-color: #dde3ea !important;
  box-shadow: 0 2px 7px rgba(16,42,67,.045) !important;
}

.ui-panel:hover,
.apple-card:hover,
.card-modern:hover,
.ui-stat-card:hover {
  border-color: #cfd8e3 !important;
  box-shadow: 0 8px 22px rgba(16,42,67,.075) !important;
}

.ui-stat-card {
  min-height: 140px;
  padding-top: 20px !important;
  background:
    linear-gradient(145deg, #ffffff 20%, #fbfdff 100%) !important;
}

.ui-stat-card::before {
  top: 18px;
  bottom: 18px;
  left: 0;
  height: auto;
  width: 4px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, var(--ui-primary-500), var(--ui-accent-700));
}

.ui-stat-card :is(p,span):not([class*="bg-"]) { color: #59677a !important; }
.ui-stat-card [class*="text-3xl"],
.ui-stat-card [class*="text-4xl"],
.ui-stat-card [class*="text-5xl"] {
  color: #17212f !important;
  font-size: clamp(28px, 2.4vw, 34px) !important;
  font-weight: 700 !important;
}

/* Section titles and explanatory text. */
main :is(h1,h2,h3,h4) { color: var(--ui-ink); }
main h1 { line-height: 1.2; }
main :is(h2,h3) + p { color: #5a687b; }
main .ui-panel :is(h2,h3,h4) { color: #1c2939 !important; }
main .ui-panel :is(p,small) { line-height: 1.55; }

/* Buttons: clear hierarchy and comfortable targets. */
button, a[role="button"] {
  min-height: 40px;
  font-weight: 600;
  letter-spacing: -.005em;
}

button[class*="bg-indigo-"],
a[class*="bg-indigo-"],
button[class*="bg-blue-600"],
a[class*="bg-blue-600"] {
  border-color: #215f92 !important;
  background: linear-gradient(180deg, #327fba, #25679d) !important;
  color: #fff !important;
  box-shadow: 0 2px 5px rgba(37,103,157,.18) !important;
}

button[class*="bg-indigo-"]:hover,
a[class*="bg-indigo-"]:hover,
button[class*="bg-blue-600"]:hover,
a[class*="bg-blue-600"]:hover {
  background: linear-gradient(180deg, #296fa7, #1d547f) !important;
  box-shadow: 0 5px 12px rgba(37,103,157,.22) !important;
  transform: translateY(-1px) !important;
}

button[class*="bg-emerald-"], a[class*="bg-emerald-"] {
  color: #fff !important;
  background: #0f766e !important;
}

button[class*="bg-red-"], button[class*="bg-rose-"],
a[class*="bg-red-"], a[class*="bg-rose-"] {
  color: #fff !important;
  background: #b42318 !important;
}

button[class*="bg-amber-"], a[class*="bg-amber-"] {
  color: #573000 !important;
  border-color: #f0c36b !important;
  background: #fff2cf !important;
}

/* Inputs: labels and helper text are deliberately darker than placeholders. */
label {
  color: #354255 !important;
  font-size: 13px;
  font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  min-height: 44px;
  border-color: #bdc7d3 !important;
  color: #17212f !important;
  background: #fff !important;
}

input::placeholder, textarea::placeholder {
  color: #78869a !important;
}

select:invalid { color: #66758a !important; }
option { color: #17212f; background: #fff; }

.ui-form-section {
  padding: max(18px, 2vw) !important;
  background: linear-gradient(180deg, #fff, #fffdf9) !important;
}

/* Tables remain data-dense but no longer look clinical. */
.ui-table-shell,
div:has(> table) {
  border: 1px solid #dce3eb;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16,42,67,.035);
}

thead th {
  color: #435267 !important;
  background: #f2f6fa !important;
  border-top: 0 !important;
  font-size: 10.5px !important;
}

tbody tr:nth-child(even) { background: #fafcfe; }
tbody tr:hover { background: #eef7ff !important; }

td {
  color: #334155 !important;
  line-height: 1.45;
}

td :is(.text-slate-400,.text-gray-400) { color: #67768a !important; }

/* Semantic badges with readable foregrounds. */
:is(span,div)[class*="rounded-full"][class*="bg-green-"],
:is(span,div)[class*="rounded-full"][class*="bg-emerald-"] {
  color: #086146 !important;
  border-color: #a7e3cf !important;
  background: #e7f8f1 !important;
}

:is(span,div)[class*="rounded-full"][class*="bg-yellow-"],
:is(span,div)[class*="rounded-full"][class*="bg-amber-"] {
  color: #7a4200 !important;
  border-color: #efd08d !important;
  background: #fff5d8 !important;
}

:is(span,div)[class*="rounded-full"][class*="bg-red-"],
:is(span,div)[class*="rounded-full"][class*="bg-rose-"] {
  color: #9b1c14 !important;
  border-color: #f0bbb6 !important;
  background: #fff0ef !important;
}

:is(span,div)[class*="rounded-full"][class*="bg-blue-"],
:is(span,div)[class*="rounded-full"][class*="bg-indigo-"] {
  color: #194f7c !important;
  border-color: #b8d8f0 !important;
  background: #eaf5fd !important;
}

:is(span,div)[class*="rounded-full"][class*="bg-slate-"],
:is(span,div)[class*="rounded-full"][class*="bg-gray-"] {
  color: #465568 !important;
  border-color: #d2d9e2 !important;
  background: #f1f4f7 !important;
}

/* Friendly empty/loading/error states where the app already exposes them. */
.ui-empty-state,
.ui-feedback-state {
  padding: 32px 24px !important;
  border: 1px dashed #c7d1dc !important;
  border-radius: 16px !important;
  color: #526176 !important;
  background: #fbfcfe !important;
  text-align: center;
}

.ui-feedback-state[data-tone="success"] {
  border-color: #a7e3cf !important;
  background: #f0fdf8 !important;
}
.ui-feedback-state[data-tone="warning"] {
  border-color: #efd08d !important;
  background: #fffaf0 !important;
}
.ui-feedback-state[data-tone="danger"] {
  border-color: #f0bbb6 !important;
  background: #fff5f4 !important;
}

/* Dialog readability. */
[role="dialog"], .ui-dialog {
  color: var(--ui-ink) !important;
  border-radius: 20px !important;
}
[role="dialog"] :is(h1,h2,h3,h4) { color: #17212f !important; }
[role="dialog"] :is(p,label,small) { color: #526176; }

/* Authentication: warm and reassuring, not a generic purple template. */
.ui-login-page {
  background:
    radial-gradient(circle at 8% 5%, rgba(64,150,208,.15), transparent 30rem),
    radial-gradient(circle at 92% 100%, rgba(15,118,110,.09), transparent 28rem),
    linear-gradient(145deg, #f7fafc 0%, #eef4f7 100%) !important;
}

.ui-login-card {
  color: var(--ui-ink) !important;
  border-color: #d5dde6 !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(16,42,67,.14) !important;
}
.ui-login-card :is(h1,h2,h3) { color: #17212f !important; }
.ui-login-card :is(p,span):not([class*="bg-"]) { color: #58677a; }

/* Sidebar collapsed mode should not expose clipped descriptions. */
aside.ui-sidebar[class*="w-24"] nav button p,
aside.ui-sidebar[class*="w-24"] nav a p,
.ui-app-shell > aside[class*="w-24"] nav button p,
.ui-app-shell > aside[class*="w-24"] nav a p {
  display: none !important;
}

@media (max-width: 1279px) {
  :root { --ui-sidebar-width: 280px; }
}

@media (max-width: 767px) {
  .ui-main-scroll { padding: 14px 12px 24px !important; }
  .ui-page-context { min-height: 0; padding: 19px 18px 19px 21px !important; }
  .ui-stat-card { min-height: 124px; }
  .ui-panel:hover, .ui-stat-card:hover { transform: none; }
}

@media print {
}


/* Stable text rendering and deterministic contrast */
body, button, input, select, textarea { font-synthesis: none; }

:is(.ui-panel, .ui-stat-card, .ui-form-section, .ui-login-card, .ui-page-context)
  :is(h1,h2,h3,h4,h5,h6,p,label,small,strong,span)[class*="text-white"] {
  color: var(--ui-ink) !important;
  text-shadow: none !important;
}

:is(button, a, [role="button"])[class*="bg-indigo-"],
:is(button, a, [role="button"])[class*="bg-blue-"],
:is(button, a, [role="button"])[class*="bg-emerald-"],
:is(button, a, [role="button"])[class*="bg-red-"],
:is(button, a, [role="button"])[class*="bg-rose-"] { color: #fff !important; }

:is(button, a, [role="button"])[class*="bg-"]
  :is(span,p,strong,small)[class*="text-white"] { color: inherit !important; }

.recharts-responsive-container {
  min-width: 1px !important;
  min-height: 1px !important;
}
:is(.ui-panel, .ui-stat-card, .card-modern, .apple-card),
:is(.ui-panel, .ui-stat-card, .card-modern, .apple-card) > * { min-width: 0; }


/* Dedicated MyASN importer entry in the application navigation. */
.ui-myasn-import-link {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: calc(100% - 16px);
  min-height: 58px;
  margin: 4px 8px;
  padding: 10px 11px;
  border: 1px solid rgba(142, 177, 207, .32);
  border-radius: 13px;
  color: #dceaf5 !important;
  background: rgba(255,255,255,.065);
  text-decoration: none !important;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.ui-myasn-import-link:hover {
  color: #fff !important;
  border-color: rgba(122, 191, 236, .62);
  background: rgba(64, 150, 208, .18);
  transform: translateY(-1px);
}
.ui-myasn-import-link:focus-visible {
  outline: 3px solid rgba(125, 211, 252, .48);
  outline-offset: 2px;
}
.ui-myasn-import-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #d9f2ff;
  background: rgba(77, 168, 226, .18);
}
.ui-myasn-import-icon svg { width: 21px; height: 21px; }
.ui-myasn-import-copy {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.ui-myasn-import-copy strong {
  overflow: hidden;
  color: inherit !important;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-myasn-import-copy small {
  overflow: hidden;
  margin-top: 4px;
  color: #9fb7ca !important;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-myasn-import-badge {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: #dff8ee !important;
  background: rgba(16, 185, 129, .2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
aside.ui-sidebar[class*="w-24"] .ui-myasn-import-link,
.ui-app-shell > aside[class*="w-24"] .ui-myasn-import-link {
  justify-content: center;
  width: 52px;
  min-height: 52px;
  margin-inline: auto;
  padding: 7px;
}
aside.ui-sidebar[class*="w-24"] .ui-myasn-import-copy,
aside.ui-sidebar[class*="w-24"] .ui-myasn-import-badge,
.ui-app-shell > aside[class*="w-24"] .ui-myasn-import-copy,
.ui-app-shell > aside[class*="w-24"] .ui-myasn-import-badge { display: none; }