/* ============================================================
   RevSight Design System — iMDsoft Brand Theme
   ============================================================ */

:root {
  /* Primary */
  --color-primary: #9B00E0;
  --color-primary-hover: #7D00B5;
  --color-primary-light: #F3E5FC;
  --color-primary-subtle: #FAF0FE;

  /* Secondary */
  --color-secondary: #2E323E;
  --color-secondary-hover: #1F232D;
  --color-secondary-light: #E8E9EC;

  /* Accent */
  --color-accent: #00dea6;
  --color-accent-light: #E6FBF5;

  /* Semantic */
  --color-success: #00C896;
  --color-success-light: #E6FBF5;
  --color-danger: #C0392B;
  --color-danger-light: #FBEAE8;
  --color-warning: #E6A817;
  --color-warning-light: #FFF8E5;
  --color-info: #00AADD;
  --color-info-light: #E5F5FC;

  /* Neutrals */
  --color-neutral-900: #1E2130;
  --color-neutral-700: #4A4D5C;
  --color-neutral-500: #7C7F8E;
  --color-neutral-400: #A8ABB5;
  --color-neutral-200: #DFE1E6;
  --color-neutral-100: #EDEEF2;
  --color-neutral-50: #F5F6F8;
  --color-white: #FFFFFF;

  /* Sidebar */
  --sidebar-bg: linear-gradient(180deg, #2E323E 0%, #001337 100%);
  --sidebar-text: #B0B5C0;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-bg: rgba(155, 0, 224, 0.30);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-display: 'Inter', 'Segoe UI', Helvetica, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(30, 33, 48, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 33, 48, 0.08);
  --shadow-lg: 0 8px 24px rgba(30, 33, 48, 0.12);
  --shadow-focus: 0 0 0 3px rgba(155, 0, 224, 0.25);
}


/* ============================================================
   Base & Typography
   ============================================================ */

html, body {
  font-family: var(--font-body);
  background-color: var(--color-neutral-50);
  color: var(--color-neutral-900);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-neutral-900);
  font-weight: 400;
}

h1:focus {
  outline: none;
}

h3 {
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
}

h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-neutral-900);
  font-weight: 600;
}


/* ============================================================
   Links
   ============================================================ */

a, .btn-link {
  color: var(--color-primary);
  transition: color 150ms ease;
}

a:hover, .btn-link:hover {
  color: var(--color-primary-hover);
}


/* ============================================================
   Buttons — Override Bootstrap
   ============================================================ */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all 150ms ease;
  font-size: 0.875rem;
}

.btn-primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover, .btn-primary:active {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

.btn-secondary {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}

.btn-secondary:hover, .btn-secondary:active {
  background-color: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
  color: var(--color-neutral-900);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.btn-danger:hover, .btn-danger:active {
  background-color: #A93226;
  border-color: #A93226;
  color: #fff;
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: #fff;
}

.btn-warning:hover, .btn-warning:active {
  background-color: #CC9412;
  border-color: #CC9412;
  color: #fff;
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--color-neutral-700);
  border-color: var(--color-neutral-400);
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-success);
}

.btn-outline-success:hover, .btn-outline-success:active {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-outline-danger:hover, .btn-outline-danger:active {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: var(--shadow-focus);
}


/* ============================================================
   Forms — Inputs, Selects, Textareas
   ============================================================ */

.form-control, .form-select {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  border: 1.5px solid var(--color-neutral-400);
  border-radius: var(--radius-md);
  color: var(--color-neutral-900);
  background-color: var(--color-white);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) {
  border-color: var(--color-neutral-500);
}

.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-control:disabled, .form-select:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-500);
}

.form-control::placeholder {
  color: var(--color-neutral-500);
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-neutral-700);
  margin-bottom: 0.25rem;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-input {
  border-color: var(--color-neutral-400);
  border-radius: var(--radius-sm);
}

.form-control-sm {
  font-size: 0.875rem;
  border-radius: var(--radius-md);
}

.content {
  padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
  outline: none;
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.15);
}

.invalid {
  outline: none;
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.validation-message {
  color: var(--color-danger);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}


/* ============================================================
   Cards — Override Bootstrap
   ============================================================ */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card-header {
  background-color: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-200);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
}

.card-header.bg-white {
  background-color: var(--color-neutral-50) !important;
}

.card-header h6 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-900);
}

.card-body {
  padding: 1rem;
}

.card-footer {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-neutral-200);
}

.card-footer.bg-white {
  background-color: var(--color-white) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}


/* ============================================================
   Tables — Override Bootstrap
   ============================================================ */

.table {
  font-size: 0.9375rem;
  color: var(--color-neutral-900);
  border-color: var(--color-neutral-200);
}

.table > thead {
  background-color: var(--color-neutral-50);
}

.table > thead > tr > th {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-neutral-700);
  text-transform: none;
  border-bottom: 2px solid var(--color-neutral-200);
  padding: 0.75rem 1rem;
}

/* ---- Registers: a bounded scroll viewport with a pinned header ----
   Replaces Bootstrap's .table-responsive for the two register tables.

   Both the sticky header and a permanently visible horizontal scrollbar depend on this box being
   shorter than the page. A sticky cell sticks to the top of its nearest *scrollport*, and the
   horizontal scrollbar lives on that scrollport's bottom edge — so if the box is allowed to grow
   until every row fits, the header scrolls away with the document and the scrollbar ends up below
   the last row. Capping the height against the viewport puts both on screen permanently.

   .table-responsive cannot do this: it sets overflow-x only, which is still enough to make the
   element a scrollport, so a sticky thead inside it silently does nothing at all. */
.table-scroll {
  overflow: auto;
  /* The subtrahend approximates the height of everything the register pages put above the table —
     content padding, heading, lead paragraph, the KPI row and the toolbar card — plus a little
     breathing room. It is an estimate, not a measurement: if a page grows a taller header, retune
     it there by setting the variable rather than editing this rule. Deliberately no min-height —
     a floor would pad a two-row table with blank space, and the cap only becomes uncomfortable on
     a window too short to use anyway. */
  max-height: calc(100vh - var(--table-scroll-offset, 17rem));
  /* The card this sits in is rounded; without this the table's corners square off over it. */
  border-radius: inherit;
}

.table-scroll > .table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* thead's background paints behind the row, not the cell; a sticky cell leaves that behind and
     the body rows show straight through it as they pass under. The cell needs its own opaque fill. */
  background-color: var(--color-neutral-50);
  /* And its border-bottom detaches for the same reason — Bootstrap's reboot sets
     border-collapse: collapse, under which collapsed borders belong to the table, not the cell.
     An inset shadow is drawn by the cell itself and travels with it. */
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--color-neutral-200);
}

/* Between the md and lg breakpoints the toolbar wraps onto a second line, so the header above the
   table is taller and the cap has to come down to match. */
@media (max-width: 991.98px) {
  .table-scroll {
    --table-scroll-offset: 22rem;
  }
}

/* Below md the sidebar stacks on top of the content instead of beside it, so the height above the
   table is no longer a constant this rule can know. Drop the cap and let the document scroll —
   which also means the header stops sticking, because the box no longer scrolls vertically. */
@media (max-width: 767.98px) {
  .table-scroll {
    max-height: none;
  }
}

.table > tbody > tr > td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-color: var(--color-neutral-200);
  /* The registers hold e-mail addresses, document filenames and cost strings with no spaces to
     break at, and an unbreakable token sets its column's minimum width. `anywhere` rather than
     `break-word` on purpose: only `anywhere` feeds back into the min-content size the auto table
     layout measures, which is the number that decides whether the table fits the content column. */
  overflow-wrap: anywhere;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--color-neutral-50);
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--color-primary-subtle);
}

.table-danger > td, .table-danger > th,
tr.table-danger > td, tr.table-danger > th {
  background-color: var(--color-danger-light) !important;
  border-left: 3px solid var(--color-danger);
}


/* ============================================================
   Badges — Override Bootstrap
   ============================================================ */

.badge {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-full);
  padding: 0.3em 0.75em;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-neutral-900) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
  color: #fff !important;
}

.bg-secondary {
  background-color: var(--color-neutral-400) !important;
}

.text-dark {
  color: var(--color-neutral-900) !important;
}


/* ============================================================
   List Groups — Override Bootstrap
   ============================================================ */

.list-group-item {
  border-color: var(--color-neutral-200);
  color: var(--color-neutral-900);
  font-size: 0.9375rem;
  transition: background-color 100ms ease;
}

.list-group-item-action:hover {
  background-color: var(--color-primary-subtle);
}

.list-group-item-danger {
  background-color: var(--color-danger-light) !important;
  color: var(--color-neutral-900);
  border-left: 3px solid var(--color-danger);
}


/* ============================================================
   Tabs — Override Bootstrap
   ============================================================ */

.nav-tabs {
  border-bottom: 2px solid var(--color-neutral-200);
}

.nav-tabs .nav-link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-neutral-500);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.5rem 1rem;
  transition: color 150ms ease, border-color 150ms ease;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  color: var(--color-neutral-700);
  background-color: var(--color-neutral-50);
  border-color: transparent;
  border-bottom-color: var(--color-neutral-400);
}

.nav-tabs .nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--color-primary);
}


/* ============================================================
   Dialogs / Modals
   ============================================================ */

dialog {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0;
  max-width: 480px;
}

dialog::backdrop {
  background-color: rgba(30, 33, 48, 0.5);
}

dialog .p-3 {
  font-family: var(--font-body);
  color: var(--color-neutral-900);
}


/* ============================================================
   Spinner & Loading
   ============================================================ */

.spinner-border.text-primary {
  color: var(--color-primary) !important;
}

.loading-progress {
  position: absolute;
  display: block;
  width: 8rem;
  height: 8rem;
  inset: 20vh 0 auto 0;
  margin: 0 auto 0 auto;
}

.loading-progress circle {
  fill: none;
  stroke: var(--color-neutral-200);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--color-primary);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-family: var(--font-body);
  color: var(--color-neutral-700);
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
  content: var(--blazor-load-percentage-text, "Loading");
}


/* ============================================================
   Text Utilities — Override Bootstrap
   ============================================================ */

.text-primary {
  color: var(--color-primary) !important;
}

.text-muted, .text-body-secondary {
  color: var(--color-neutral-500) !important;
}

.fw-medium {
  font-weight: 500;
}

.fw-semibold {
  font-weight: 600;
}

small, .small {
  font-size: 0.875rem;
}


/* ============================================================
   Pagination Buttons
   ============================================================ */

.btn-outline-primary:disabled {
  color: var(--color-neutral-400);
  border-color: var(--color-neutral-200);
}


/* ============================================================
   Error UI
   ============================================================ */

#blazor-error-ui {
  color-scheme: light only;
  background: var(--color-accent-light);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(30, 33, 48, 0.15);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-family: var(--font-body);
  color: var(--color-neutral-900);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger);
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
  border-radius: var(--radius-md);
}

.blazor-error-boundary::after {
  content: "An error has occurred."
}

code {
  color: var(--color-primary-hover);
  font-family: var(--font-mono);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--color-neutral-500);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* ============================================================
   Input Groups — fix border-radius on group children
   ============================================================ */

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* ============================================================
   Chart Color Overrides (SVG in Reports)
   ============================================================ */

svg polyline[stroke="#0d6efd"] {
  stroke: var(--color-primary);
}

svg circle[fill="#0d6efd"] {
  fill: var(--color-primary);
}