/* Selan v44 - staff visibility, contrast, and responsive usability */
:root { color-scheme: light; }

.app-shell,
.app-workspace,
.app-content,
.app-main {
  min-width: 0 !important;
  max-width: 100% !important;
}

.app-content,
.app-main {
  color: #253047 !important;
  -webkit-text-fill-color: currentColor;
}

/* Staff content must never inherit the shell's pale text on white surfaces. */
.app-main :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200),
.app-main :is(article, section, table, form, dialog) {
  --staff-body-text: #253047;
}

.app-main :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200)
  :is(h1, h2, h3, h4, h5, h6, p, label, strong, dt, dd, th, td, li) {
  color: var(--staff-body-text) !important;
  -webkit-text-fill-color: var(--staff-body-text) !important;
}

.app-main :is(.bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200)
  :is(.text-slate-400, .text-slate-500, .text-slate-600) {
  color: #536179 !important;
  -webkit-text-fill-color: #536179 !important;
}

/* Restore readable text on every solid action/status surface. */
.app-main :is(
  button, a, [role="button"], span
):is(
  .bg-brand-primary, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900,
  .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900,
  .bg-blue-600, .bg-blue-700, .bg-blue-800,
  .bg-emerald-600, .bg-emerald-700, .bg-green-600, .bg-green-700,
  .bg-rose-600, .bg-rose-700,
  .bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-slate-950
),
.app-main :is(
  button, a, [role="button"], span
):is(
  .bg-brand-primary, .bg-violet-600, .bg-violet-700, .bg-violet-800, .bg-violet-900,
  .bg-purple-600, .bg-purple-700, .bg-purple-800, .bg-purple-900,
  .bg-blue-600, .bg-blue-700, .bg-blue-800,
  .bg-emerald-600, .bg-emerald-700, .bg-green-600, .bg-green-700,
  .bg-rose-600, .bg-rose-700,
  .bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-slate-950
) * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  stroke: currentColor;
}

.app-main input,
.app-main select,
.app-main textarea {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  background-color: #fff;
}

.app-main input::placeholder,
.app-main textarea::placeholder {
  color: #7b879b !important;
  -webkit-text-fill-color: #7b879b !important;
  opacity: 1;
}

.app-main thead,
.app-main thead th {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

.app-main thead:is(.bg-violet-800, .bg-violet-900, .bg-slate-800, .bg-slate-900),
.app-main thead:is(.bg-violet-800, .bg-violet-900, .bg-slate-800, .bg-slate-900) th {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.dashboard-view > *,
.dashboard-view :is(.rounded-lg, .rounded-xl, .rounded-2xl) {
  min-width: 0;
}

.app-main button,
.app-main a[role="button"],
.app-main [role="button"] {
  overflow: visible;
  white-space: normal;
}

@media (max-width: 900px) {
  html, body, #root { width: 100%; max-width: 100vw; overflow-x: hidden; }

  .app-topbar {
    min-height: 60px !important;
    height: auto !important;
    padding: 10px 12px 10px 58px !important;
  }

  .app-topbar > div:first-child { min-width: 0; max-width: 65vw; }
  .app-topbar > div:first-child > div { min-width: 0; }

  .app-main {
    width: 100% !important;
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
  }

  .app-main > * { min-width: 0 !important; max-width: 100% !important; }
  .app-main .grid { min-width: 0; }

  .app-main :is(.grid-cols-2, .grid-cols-3, .grid-cols-4),
  .dashboard-view :is(.grid-cols-2, .grid-cols-3, .grid-cols-4) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app-main :is(.flex-row, .sm\:flex-row) {
    max-width: 100%;
  }

  .app-main button,
  .app-main a[role="button"],
  .app-main [role="button"],
  .app-main input,
  .app-main select {
    min-height: 44px;
  }

  .app-main button,
  .app-main a[role="button"],
  .app-main [role="button"] {
    line-height: 1.25 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .app-main :is(.overflow-x-auto, [class*="overflow-x-auto"]) {
    width: 100%;
    max-width: calc(100vw - 24px);
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .app-main table {
    width: max-content !important;
    min-width: 680px !important;
    font-size: 11px;
  }

  .app-main th,
  .app-main td {
    padding: 9px 10px !important;
    white-space: nowrap;
    vertical-align: top;
  }

  .app-main .fixed.inset-0 {
    padding: 8px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }

  .app-main .fixed.inset-0 > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 14px !important;
  }

  .app-sidebar.mobile-open {
    width: min(88vw, 320px) !important;
    max-width: calc(100vw - 24px) !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .app-sidebar.mobile-open > .flex-1 {
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar.mobile-open .flex-1 button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
  }

  .app-sidebar.mobile-open .flex-1 button,
  .app-sidebar.mobile-open .flex-1 button * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
}

@media (max-width: 480px) {
  .app-main { padding-left: 9px !important; padding-right: 9px !important; }
  .app-main :is(.p-8, .p-7, .p-6) { padding: 14px !important; }
  .app-main :is(.p-5, .p-4) { padding: 11px !important; }
  .app-main :is(h1, .text-2xl) { font-size: 20px !important; line-height: 1.25 !important; }
  .app-main table { min-width: 620px !important; }
}