/* ==========================================================================
   POPs application theme
   --------------------------------------------------------------------------
   A presentation layer that sits on top of Metronic / Bootstrap 5.3.

   Loaded last (see Areas/App/Views/Layout/_Layout.cshtml) so it wins on equal
   specificity without needing !important. Every colour resolves from a
   Bootstrap CSS variable, so the light and dark themes both keep working.

   Two goals:
     1. Density - the RAD-tool defaults are built for marketing pages, not for
                  data entry. Padding is cut roughly 40% so more of a record
                  fits on screen without the UI feeling cramped.
     2. Polish  - consistent field heights, quieter chrome, clearer grouping,
                  so screens read as a deliberate product rather than
                  generated scaffolding.

   Note: the Metronic root font-size is 12px, so 1rem == 12px throughout.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Field metrics. Produces a ~31px control instead of the ~40px default. */
  --pops-input-padding-y: 0.45rem;
  --pops-input-padding-x: 0.7rem;
  --pops-input-font-size: 1rem;
  --pops-input-radius: 0.375rem;
  --pops-input-height: 2.6rem;
  --pops-label-font-size: 0.95rem;
  --pops-label-gap: 0.3rem;
  /* Grid rhythm inside forms. */
  --pops-row-gap-y: 0.85rem;
  --pops-row-gap-x: 1rem;
  --pops-section-gap: 1.35rem;
  /* Surfaces. */
  --pops-hairline: var(--bs-gray-300);
  --pops-muted: var(--bs-gray-600);
  --pops-heading: var(--bs-gray-800);
  --pops-subtle-bg: var(--bs-gray-100);
  --pops-focus-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}
/* --------------------------------------------------------------------------
   2. Form controls
   -------------------------------------------------------------------------- */
.form-label {
  margin-bottom: var(--pops-label-gap);
  font-size: var(--pops-label-font-size);
  font-weight: 600;
  line-height: 1.35;
  color: var(--bs-gray-700);
}
/* Required fields get a marker rather than relying on the browser to complain
   only after a failed save. */
.form-label.required::after,
label.required::after {
  content: "*";
  margin-inline-start: 0.2rem;
  color: var(--bs-danger);
  font-weight: 700;
}
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
  min-height: var(--pops-input-height);
  padding: var(--pops-input-padding-y) var(--pops-input-padding-x);
  font-size: var(--pops-input-font-size);
  font-weight: 500;
  border-radius: var(--pops-input-radius);
  border-color: var(--pops-hairline);
  transition: border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}
.form-select:not(.form-select-sm):not(.form-select-lg) {
  padding-inline-end: 2.1rem;
  background-position: right 0.7rem center;
}
textarea.form-control {
  min-height: 0;
  line-height: 1.45;
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: var(--pops-focus-ring);
}
/* Read-only "picked" values (lookup pickers, computed fields) should read as
   information, not as a broken input. */
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--pops-subtle-bg);
  color: var(--bs-gray-700);
  opacity: 1;
}
.form-control-sm,
.form-select-sm {
  min-height: 2.15rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.92rem;
  border-radius: 0.3rem;
}
/* Lookup pickers: the Pick/Clear buttons should match the field height exactly
   instead of inheriting the oversized default button padding. */
.input-group > .btn {
  --bs-btn-padding-y: var(--pops-input-padding-y);
  --bs-btn-padding-x: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--pops-input-font-size);
}
.input-group > .btn > i {
  font-size: 0.95rem;
  padding-inline-end: 0;
}
/* Metronic's form-check-custom is a flex row, so the default float-based top
   margin only pushes the box out of alignment. Left alone for plain
   .form-check, which is used by the permission trees and still needs it. */
.form-check.form-check-custom {
  min-height: auto;
  margin-bottom: 0;
}
.form-check.form-check-custom .form-check-input {
  margin-top: 0;
}
.form-check-label {
  font-size: var(--pops-input-font-size);
  font-weight: 500;
  color: var(--bs-gray-800);
}
.form-text,
.form-hint {
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--pops-muted);
}
.invalid-feedback,
.field-validation-error {
  font-size: 0.88rem;
}
/* --------------------------------------------------------------------------
   3. Form layout primitives
   --------------------------------------------------------------------------
   Used by the create/edit modals to lay fields out in 2-3 columns grouped
   under section headings, instead of one long single column.
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pops-row-gap-x);
  row-gap: var(--pops-row-gap-y);
  align-items: start;
}
/* Span helpers. Everything collapses to full width on small screens. */
.form-grid > .fg-3,
.form-grid > .fg-4,
.form-grid > .fg-6,
.form-grid > .fg-8,
.form-grid > .fg-9,
.form-grid > .fg-12 {
  grid-column: span 12;
  min-width: 0;
}
@media (min-width: 768px) {
  .form-grid > .fg-3 {
    grid-column: span 3;
  }
  .form-grid > .fg-4 {
    grid-column: span 4;
  }
  .form-grid > .fg-6 {
    grid-column: span 6;
  }
  .form-grid > .fg-8 {
    grid-column: span 8;
  }
  .form-grid > .fg-9 {
    grid-column: span 9;
  }
  .form-grid > .fg-12 {
    grid-column: span 12;
  }
}
/* Fields kept in the DOM for the API contract but not shown must not reserve a
   grid track. Declared after the span helpers so it wins. */
.form-grid > [hidden] {
  display: none;
}
/* A checkbox has no label above it, so on its own it floats to the top of the
   row. Give it the height of a real field and sink it to the baseline. */
.form-grid > .fg-check {
  display: flex;
  align-items: center;
  min-height: var(--pops-input-height);
  align-self: end;
}
/* Grouping. A section is a titled band of related fields. */
.form-section {
  border: 0;
  padding: 0;
  margin: 0 0 var(--pops-section-gap) 0;
  min-width: 0;
}
.form-section:last-child {
  margin-bottom: 0;
}
.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin: 0 0 0.75rem 0;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pops-muted);
}
/* The trailing rule gives the eye a clear band boundary without a heavy box. */
.form-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--pops-hairline);
}
/* An inline panel is a form nested inside a form: creating a customer without leaving
   the order you are typing. The tint separates it from the fields around it. */
.form-inline-panel {
  border: 1px solid var(--pops-hairline);
  border-radius: 0.875rem;
  background-color: var(--pops-subtle-bg);
}
.form-section-title > i {
  font-size: 1rem;
  color: var(--bs-primary);
}
/* Audit/system fields are present for traceability but are rarely the point of
   the screen, so they read one step quieter. */
.form-section--meta .form-control,
.form-section--meta .form-select {
  background-color: var(--pops-subtle-bg);
}
.form-section--meta .form-label {
  color: var(--pops-muted);
  font-weight: 500;
}
/* --------------------------------------------------------------------------
   4. Modals
   -------------------------------------------------------------------------- */
.modal {
  --bs-modal-padding: 1.35rem;
  --bs-modal-header-padding: 1rem 1.35rem;
  --bs-modal-border-radius: 0.6rem;
  --bs-modal-inner-border-radius: 0.6rem;
  --bs-modal-box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.175);
}
.modal-header {
  background-color: var(--pops-subtle-bg);
  border-bottom: 1px solid var(--pops-hairline);
}
.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pops-heading);
}
/* Keep the save/cancel pair reachable on tall records without scrolling the
   whole dialog first. */
.modal-body {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}
.modal-footer {
  padding: 0.85rem 1.35rem;
  gap: 0.5rem;
  background-color: var(--pops-subtle-bg);
  border-top: 1px solid var(--pops-hairline);
}
.modal-footer > * {
  margin: 0;
}
/* Wider dialogs for the multi-column forms. modal-xxl is also declared in
   ModalStyles.css, which only the Default theme loads; repeating it here makes
   it available to every theme. */
.modal-xxl {
  max-width: 95%;
  width: 95%;
}
/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn:not(.btn-sm):not(.btn-lg):not(.btn-icon):not(.btn-close) {
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--pops-input-radius);
}
.btn-sm {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: 0.92rem;
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.3rem;
}
.btn i {
  padding-inline-end: 0.3rem;
}
.btn-icon i {
  padding-inline-end: 0;
}
/* --------------------------------------------------------------------------
   6. Cards and page chrome
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--pops-hairline);
  border-radius: 0.6rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.card > .card-header {
  min-height: 3.75rem;
  padding: 0.75rem 1.35rem;
  border-bottom: 1px solid var(--pops-hairline);
}
.card > .card-header .card-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pops-heading);
}
.card > .card-body {
  padding: 1.25rem 1.35rem;
}
.card > .card-footer {
  padding: 0.85rem 1.35rem;
  border-top: 1px solid var(--pops-hairline);
}
/* Page titles sit closer to their content. */
.app-toolbar .page-heading,
.app-toolbar .page-title {
  letter-spacing: -0.015em;
}
/* --------------------------------------------------------------------------
   7. Tables
   --------------------------------------------------------------------------
   Grids are the primary surface in this application, so row height matters
   more here than anywhere else.
   -------------------------------------------------------------------------- */
.table:not(.table-borderless) > :not(caption) > * > * {
  padding: 0.55rem 0.7rem;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
.table > thead > tr > th {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pops-muted);
  vertical-align: top;
  background-color: var(--pops-subtle-bg);
  border-bottom: 1px solid var(--pops-hairline);
}
table.dataTable > tbody > tr > td {
  font-size: 1rem;
  vertical-align: middle;
}
table.dataTable > tbody > tr:hover > td {
  background-color: rgba(var(--bs-primary-rgb), 0.04);
}
/* DataTables chrome: length menu, search box, pagination. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  min-height: 2.15rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.92rem;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  font-size: 0.92rem;
  color: var(--pops-muted);
}
.table.dataTable.dtr-column > tbody > tr > td.control:before {
  content: "";
}
.page-link {
  border-radius: 0.3rem;
}
/* --------------------------------------------------------------------------
   8. Tabs, badges, alerts
   -------------------------------------------------------------------------- */
.nav-tabs .nav-link {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}
.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--pops-input-radius);
}
.alert p:last-child,
.alert ul:last-child {
  margin-bottom: 0;
}
/* --------------------------------------------------------------------------
   9. Dark theme adjustments
   --------------------------------------------------------------------------
   The gray ramp inverts under [data-bs-theme=dark], so gray-100 is already a
   dark surface. These rules only fix the few places where a light-mode
   assumption would otherwise read wrong.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --pops-hairline: var(--bs-gray-300);
  --pops-subtle-bg: var(--bs-gray-200);
  --pops-heading: var(--bs-gray-900);
}
[data-bs-theme="dark"] .card {
  box-shadow: none;
}