/* ==========================================================================
   MoU Management System - UI theme
   ========================================================================== */

:root {
  /* Brand */
  --brand-900: #001f3f;
  --brand-800: #002a52;
  --brand-700: #003366;
  --brand-600: #0a4a8f;
  --brand-500: #1565c0;
  --brand-050: #eaf1fa;

  /* Neutrals */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-100: #e9eef5;
  --surface: #ffffff;
  --app-bg: #f1f5f9;

  /* Status */
  --ok-600: #0f8a52;
  --ok-050: #e6f6ee;
  --warn-600: #b45309;
  --warn-050: #fdf3e3;
  --bad-600: #c62828;
  --bad-050: #fdeaea;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .07);
  --shadow-lg: 0 18px 45px rgba(15, 23, 42, .13);
}

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--app-bg);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}

h2 {
  text-align: center;
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container1,
.page-shell {
  width: min(1560px, 94%);
  margin: auto;
}

.page-shell {
  padding: 1.75rem 0 3rem;
}

/* A Bootstrap .row carries negative side margins, which would push the page
   wider than the viewport when dropped straight into the shell. */
.page-shell > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Page header ------------------------------------------------------------- */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-head__title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.page-head__title i {
  color: var(--brand-700);
}

.page-head__subtitle {
  margin-top: .25rem;
  font-size: .92rem;
  color: var(--ink-500);
}

/* Per-report accent applied to the header icon and the panel's top rule */
.accent-ok      .page-head__title i { color: var(--ok-600); }
.accent-warn    .page-head__title i { color: #d08700; }
.accent-bad     .page-head__title i { color: var(--bad-600); }
.accent-info    .page-head__title i { color: var(--brand-500); }

/* --------------------------------------------------------------------------
   Panel: the standard "one card holding one table" wrapper
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-700);
}

.accent-ok   .panel::before { background: linear-gradient(90deg, var(--ok-600), #38b27b); }
.accent-warn .panel::before { background: linear-gradient(90deg, #d08700, #f0b429); }
.accent-bad  .panel::before { background: linear-gradient(90deg, var(--bad-600), #e05656); }
.accent-info .panel::before { background: linear-gradient(90deg, var(--brand-700), var(--brand-500)); }

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.1rem;
}

.panel__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}

/* Empty state shown inside a table body */
.empty-state {
  padding: 2.5rem 1rem !important;
  text-align: center !important;
  color: var(--ink-500) !important;
  white-space: normal !important;
}

.empty-state i {
  display: block;
  font-size: 1.9rem;
  opacity: .35;
  margin-bottom: .5rem;
}

/* Stat cards -------------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand-700);
}

.stat-card--active::before  { background: var(--ok-600); }
.stat-card--soon::before    { background: #e0a021; }
.stat-card--expired::before { background: var(--bad-600); }

.stat-card__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.stat-card__value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
  margin-top: .2rem;
}

.stat-card__icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.9rem;
  opacity: .12;
}

/* Toolbar ----------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.toolbar .toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.toolbar form {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.custom-header,
.card-header {
  background-color: var(--brand-700);
  color: #fff;
  border-bottom: none;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  border-color: var(--ink-100);
  margin-bottom: 0;
}

.table thead th {
  background: var(--brand-700);
  color: #fff;
  white-space: nowrap;
  vertical-align: middle;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-color: rgba(255, 255, 255, .12);
  padding: .85rem .75rem;
}

.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table thead th:last-child  { border-top-right-radius: var(--radius-md); }

.table td {
  white-space: nowrap;
  vertical-align: middle;
  font-size: .9rem;
  color: var(--ink-700);
  text-align: left;
  padding: .7rem .75rem;
  border-color: var(--ink-100);
}

/* Long free-text columns wrap instead of stretching the table */
.table .col-title {
  white-space: normal;
  min-width: 200px;
  max-width: 420px;
  line-height: 1.35;
}

.table .col-partner {
  white-space: normal;
  min-width: 150px;
  max-width: 240px;
  line-height: 1.35;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: #fafbfd;
  background-color: #fafbfd;
}

.table tbody tr {
  transition: background-color .15s ease;
}

.table tbody tr:hover > * {
  background-color: var(--brand-050) !important;
}

/* Sorting arrows from the DataTables Bootstrap 5 theme */
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_desc::before {
  color: rgba(255, 255, 255, .85);
}

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-active  { background: var(--ok-050);   color: var(--ok-600);   border-color: rgba(15, 138, 82, .2); }
.status-soon    { background: var(--warn-050); color: var(--warn-600); border-color: rgba(180, 83, 9, .2); }
.status-expired { background: var(--bad-050);  color: var(--bad-600);  border-color: rgba(198, 40, 40, .2); }
.status-unknown { background: #f1f5f9;         color: var(--ink-500);  border-color: var(--ink-300); }
.status-info    { background: var(--brand-050); color: var(--brand-600); border-color: rgba(10, 74, 143, .2); }

/* Monetary figures line up better with tabular numerals */
.cell-money {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-900);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.btn-sm {
  --bs-btn-padding-y: .3rem;
  --bs-btn-padding-x: .55rem;
}

.btn-primary {
  background-color: var(--brand-700);
  border: 1px solid var(--brand-700);
  font-size: 13px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-900);
  border-color: var(--brand-900);
}

.btn-success {
  background-color: var(--ok-600);
  border: 1px solid var(--ok-600);
  font-size: 13px;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #0b6f42;
  border-color: #0b6f42;
}

.btn-outline-primary {
  color: var(--brand-700);
  border-color: var(--ink-300);
  background: var(--surface);
}

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

/* Row action buttons */
td .btn-sm i {
  font-size: .95rem;
}

td .btn-sm + .btn-sm {
  margin-left: .25rem;
}

/* Document cell: keep the existing links and the upload button on one line */
.upload-form {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.upload-form .uploaded-docs {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.upload-form .uploaded-docs .btn {
  margin: 0 !important;
}

/* Primary CTA */
.custom-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  color: #fff;
  border: none;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: filter .2s ease, transform .15s ease, box-shadow .2s ease;
}

.custom-button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.custom-button:active {
  transform: translateY(0);
}

/* Ghost variant for secondary toolbar actions */
.custom-button--ghost {
  background: var(--surface);
  color: var(--brand-700);
  border: 1px solid var(--ink-300);
  box-shadow: none;
}

.custom-button--ghost:hover {
  background: var(--brand-050);
  color: var(--brand-900);
  filter: none;
}

/* File input */
input[type="file"] {
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   DataTables controls
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: .4rem .7rem;
  font-size: .88rem;
  background-color: var(--surface);
  color: var(--ink-900);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Bootstrap 5 renders the page-length control as .form-select; give the
   caret enough room so the number is never overlapped. */
.dataTables_wrapper .dataTables_length select {
  width: auto;
  min-width: 5rem;
  padding-right: 2rem;
  display: inline-block;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 .2rem rgba(10, 74, 143, .15);
}

.dataTables_filter input {
  margin-bottom: 0;
  margin-left: .5em;
  display: inline-block;
  width: auto;
  min-width: 240px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
  font-size: .88rem;
  color: var(--ink-500);
  margin-bottom: .9rem;
}

.dataTables_wrapper .pagination {
  margin-bottom: 0;
}

.dataTables_wrapper .page-link {
  color: var(--brand-700);
  border-color: var(--ink-100);
  border-radius: var(--radius-sm);
  margin: 0 2px;
  font-size: .86rem;
}

.dataTables_wrapper .page-item.active .page-link {
  background-color: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.dataTables_wrapper .page-item.disabled .page-link {
  color: var(--ink-300);
}

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal-content {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
  border-bottom: none;
  padding: 1rem 1.25rem;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
}

.modal-body.extra {
  padding: 1.5rem;
  max-height: 72vh;
  overflow-y: auto;
}

.modal-body .form-control,
.modal-body .form-select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-300);
  padding: .5rem .75rem;
  font-size: .92rem;
  box-shadow: none;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 .2rem rgba(10, 74, 143, .15);
}

.modal-body .form-control:disabled,
.modal-body .form-select:disabled {
  background-color: #f8fafc;
  color: var(--ink-700);
}

.modal-body .row > div {
  padding-bottom: 1rem;
}

.form-label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-700);
  margin-bottom: .3rem;
}

#addMouModal .form-label,
#editModal .form-label {
  font-weight: 600;
  font-size: .85rem;
  color: var(--brand-700);
}

/* Footer / action row inside modals */
.text-end {
  border-top: 1px solid var(--ink-100);
  padding-top: 1rem;
}

/* Cards nested inside the View modal */
#modalContent .card {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: none;
}

#modalContent .card-header {
  background: var(--brand-050);
  color: var(--brand-900) !important;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ink-100);
}

/* Close button */
.custom-close,
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: .8;
}

.custom-close:hover,
.modal-header .btn-close:hover {
  opacity: 1;
}

/* Scrollbars */
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.modal-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background-color: var(--ink-300);
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-500);
}

/* Button alignment helper (legacy) */
.button {
  display: flex;
  justify-content: flex-end;
}

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

@media (max-width: 768px) {
  .container1 {
    width: 96%;
  }

  .page-head,
  .toolbar {
    align-items: stretch;
  }

  .toolbar .toolbar__group {
    width: 100%;
  }

  .custom-button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .stat-card__value {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   Dashboard cards (class names kept: the filter script reads them)
   -------------------------------------------------------------------------- */

.c-dashboardInfo {
  margin-bottom: 0;
}

.c-dashboardInfo .wrap {
  position: relative;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.25rem 1.25rem;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.c-dashboardInfo .wrap:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-300);
}

.c-dashboardInfo .wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--brand-700);
}

.c-dashboardInfo--active  .wrap::after { background: linear-gradient(90deg, #0f8a52, #38b27b); }
.c-dashboardInfo--soon    .wrap::after { background: linear-gradient(90deg, #d08700, #f0b429); }
.c-dashboardInfo--expired .wrap::after { background: linear-gradient(90deg, #c62828, #e05656); }
.c-dashboardInfo--unknown .wrap::after { background: linear-gradient(90deg, #64748b, #94a3b8); }
.c-dashboardInfo--total   .wrap::after { background: linear-gradient(90deg, #003366, #0a4a8f); }
.c-dashboardInfo--deposit .wrap::after { background: linear-gradient(90deg, #003366, #1565c0); }

.c-dashboardInfo__title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem !important;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500) !important;
  margin: 0;
}

.c-dashboardInfo span {
  display: block;
}

.c-dashboardInfo__count {
  font-weight: 700;
  font-size: 2rem !important;
  line-height: 1.25 !important;
  color: var(--ink-900) !important;
  margin-top: .35rem;
}

.c-dashboardInfo small {
  font-size: .78rem;
  color: var(--ink-500);
}

/* The card whose filter is currently applied */
.c-dashboardInfo.is-filtering .wrap {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(10, 74, 143, .12), var(--shadow-md);
}

/* ==========================================================================
   Sign-in family: login, OTP login, forgot password
   Two panels side by side — illustration on the left, form on the right.
   ========================================================================== */

body.login-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1.25rem;
  background:
    radial-gradient(760px 440px at 8% -12%, rgba(21, 101, 192, .13) 0%, transparent 62%),
    radial-gradient(700px 520px at 104% 110%, rgba(10, 74, 143, .12) 0%, transparent 60%),
    linear-gradient(155deg, #fbfcfe 0%, #eff4fa 50%, #e6edf6 100%);
}

.auth-shell {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 18px 44px rgba(15, 23, 42, .13);
  animation: auth-rise .45s cubic-bezier(.16, .84, .44, 1) both;
}

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Left: title strip + illustration
   -------------------------------------------------------------------------- */

.auth-visual {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.auth-visual__bar {
  padding: .7rem 1rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(90deg, #0a4a8f 0%, #003366 100%);
}

.auth-visual__art {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fc 100%);
}

.auth-visual__art svg {
  width: 100%;
  height: auto;
  max-height: 330px;
}

/* --------------------------------------------------------------------------
   Right: the form
   -------------------------------------------------------------------------- */

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1.35rem;
  background: #f4f7fb;
}

.auth-form {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
  padding: 1.6rem 1.4rem 1.35rem;
}

.auth-form__logo {
  display: block;
  height: 36px;
  width: auto;
  margin: 0 auto .7rem;
}

.auth-form__head {
  text-align: center;
}

.auth-form__title {
  margin: 0 0 .25rem;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--brand-700);
}

.auth-form__sub {
  margin: 0 0 1.15rem;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.field {
  margin-bottom: .8rem;
}

.field__label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: .3rem;
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.field__icon {
  position: absolute;
  left: .8rem;
  color: var(--ink-500);
  font-size: .92rem;
  pointer-events: none;
}

.field__control input[type="text"],
.field__control input[type="password"] {
  width: 100%;
  padding: .55rem .8rem .55rem 2.2rem;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  font-size: .88rem;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--surface);
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field__control input::placeholder {
  color: #9aa8bb;
}

.field__control input:hover {
  border-color: #adbccf;
}

.field__control input:focus {
  border-color: var(--brand-600);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 74, 143, .14);
}

.field__control:focus-within .field__icon {
  color: var(--brand-600);
}

/* Password reveal, styled as the attached button on the right of the field */
.field__action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border: 1px solid var(--ink-300);
  border-radius: 0 4px 4px 0;
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color .18s ease, color .18s ease;
}

.field__action:hover {
  background: var(--brand-050);
  color: var(--brand-700);
}

.field__action:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: -2px;
}

/* leave room for the button so text never runs under it */
.field__control:has(.field__action) input {
  padding-right: 3.4rem;
}

.field__hint {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   Captcha row
   -------------------------------------------------------------------------- */

.captcha-row {
  display: flex;
  align-items: stretch;
  gap: .5rem;
}

.captcha-row .field__control {
  flex: 1 1 auto;
  min-width: 0;
}

#captcha {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0 .6rem;
  user-select: none;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
  font-family: 'Courier New', Courier, monospace;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-indent: .08em;
}

.ref-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  border-radius: 4px;
  border: 1px solid var(--ink-300);
  color: var(--brand-700);
  background: var(--surface);
  cursor: pointer;
  font-size: .95rem;
  transition: background-color .18s ease, border-color .18s ease;
}

.ref-btn:hover {
  background: var(--brand-050);
  border-color: #adbccf;
}

.ref-btn i {
  transition: transform .5s ease;
}

.ref-btn:hover i {
  transform: rotate(180deg);
}

#code-error {
  display: none;
  margin-top: .5rem;
  font-size: .81rem;
  color: var(--bad-600);
  background: var(--bad-050);
  border: 1px solid rgba(198, 40, 40, .2);
  border-radius: 4px;
  padding: .45rem .65rem;
}

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: 1.1rem;
  padding: .65rem .8rem;
  border-radius: 4px;
  background: var(--bad-050);
  border: 1px solid rgba(198, 40, 40, .22);
  color: var(--bad-600);
  font-size: .85rem;
  line-height: 1.45;
}

.login-alert i {
  font-size: .95rem;
  line-height: 1.4;
}

.login-alert--ok {
  background: var(--ok-050);
  border-color: rgba(15, 138, 82, .22);
  color: var(--ok-600);
}

/* --------------------------------------------------------------------------
   Submit + secondary links
   -------------------------------------------------------------------------- */

button.submit {
  width: 100%;
  margin-top: 1.1rem;
  padding: .62rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  font-size: .92rem;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 51, 102, .18);
  transition: filter .18s ease, transform .15s ease, box-shadow .18s ease;
}

button.submit i {
  transition: transform .2s ease;
}

button.submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 51, 102, .28);
}

button.submit:hover i {
  transform: translateX(3px);
}

button.submit:active {
  transform: translateY(0);
}

button.submit:focus-visible {
  outline: 3px solid rgba(10, 74, 143, .35);
  outline-offset: 2px;
}

.login-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin-top: .95rem;
  font-size: .8rem;
}

.login-alt a,
button.linklike {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--brand-600);
  text-decoration: underline;
  cursor: pointer;
  transition: color .18s ease;
}

.login-alt a:hover,
button.linklike:hover {
  color: var(--brand-900);
}

.login-alt__sep {
  color: var(--ink-300);
}

.login-alt__inline {
  display: inline;
  margin: 0;
}

.login-alt .bi-whatsapp {
  color: #25d366;
}

.login-foot {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--ink-100);
  text-align: center;
  font-size: .76rem;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

/* --------------------------------------------------------------------------
   OTP / password-reset extras
   -------------------------------------------------------------------------- */

.otp-steps {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  counter-reset: otp-step;
}

.otp-steps li {
  flex: 1 1 0;
  counter-increment: otp-step;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink-500);
}

.otp-steps li::before {
  content: counter(otp-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ink-300);
  background: var(--surface);
  color: var(--ink-500);
  font-size: .72rem;
}

.otp-steps li.is-current {
  color: var(--brand-700);
}

.otp-steps li.is-current::before {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: #fff;
}

.otp-steps li.is-done {
  color: var(--ok-600);
}

.otp-steps li.is-done::before {
  content: "\2713";
  border-color: var(--ok-600);
  background: var(--ok-050);
  color: var(--ok-600);
}

.otp-target {
  margin: 0 0 1rem;
  padding: .6rem .75rem;
  border-radius: 4px;
  background: var(--brand-050);
  border: 1px solid rgba(10, 74, 143, .16);
  color: var(--brand-800);
  font-size: .84rem;
  text-align: center;
}

.otp-target strong {
  font-weight: 600;
  white-space: nowrap;
}

.field__control input.otp-input {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .4em;
  text-indent: .4em;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive: the illustration is the first thing to go
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .auth-shell {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .auth-visual__art {
    padding: 1rem;
  }

  .auth-visual__art svg {
    max-height: 210px;
  }

  .auth-panel {
    padding: 1.5rem 1.25rem;
  }

  .auth-form {
    box-shadow: none;
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 560px) {
  body.login-page {
    padding: 1rem .85rem;
  }

  .auth-visual__art {
    display: none;
  }

  #captcha {
    min-width: 96px;
    font-size: .95rem;
  }
}

/* ==========================================================================
   Motion
   Everything here is decorative. The whole block is switched off for anyone
   who has asked their system to reduce motion (see the very end of the file).
   ========================================================================== */

@keyframes mou-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mou-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mou-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.5); opacity: .45; }
}

/* Page entrance -----------------------------------------------------------
   Each band of the page arrives just after the one above it. */

.page-shell > .page-head,
.container1 > .page-head {
  animation: mou-rise .42s cubic-bezier(.16, .84, .44, 1) both;
}

.stat-grid {
  animation: mou-fade .3s ease both;
  animation-delay: .05s;
}

/* Cards deal themselves in left to right */
.stat-grid > * {
  animation: mou-rise .45s cubic-bezier(.16, .84, .44, 1) both;
}

.stat-grid > *:nth-child(1) { animation-delay: .06s; }
.stat-grid > *:nth-child(2) { animation-delay: .12s; }
.stat-grid > *:nth-child(3) { animation-delay: .18s; }
.stat-grid > *:nth-child(4) { animation-delay: .24s; }
.stat-grid > *:nth-child(5) { animation-delay: .30s; }
.stat-grid > *:nth-child(6) { animation-delay: .36s; }

.page-shell > .toolbar,
.container1 > .toolbar {
  animation: mou-rise .42s cubic-bezier(.16, .84, .44, 1) both;
  animation-delay: .16s;
}

.page-shell > .panel,
.container1 > .card,
.page-shell > .card {
  animation: mou-rise .5s cubic-bezier(.16, .84, .44, 1) both;
  animation-delay: .22s;
}

/* Table rows ---------------------------------------------------------------
   A short fade on redraw makes paging and searching feel deliberate rather
   than abrupt. Rows are not staggered: 100 of them would crawl. */

table.dataTable tbody tr {
  animation: mou-fade .22s ease both;
}

/* Interaction --------------------------------------------------------------- */

.table tbody tr {
  transition: background-color .15s ease, box-shadow .18s ease;
}

.status-pill {
  transition: transform .15s ease;
}

.table tbody tr:hover .status-pill {
  transform: translateY(-1px);
}

/* The one thing that genuinely wants attention: an expiry that is close */
.status-soon::before {
  animation: mou-pulse 2.4s ease-in-out infinite;
}

/* Sliding underline on the navbar links */
.custom-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .12rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
  opacity: 0;
  transition: left .22s ease, right .22s ease, opacity .22s ease;
}

.custom-navbar .nav-link:hover::after,
.custom-navbar .nav-link.active::after {
  left: .8rem;
  right: .8rem;
  opacity: 1;
}

.custom-navbar .dropdown-toggle::after {
  transition: transform .2s ease;
}

.custom-navbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Dropdown menus drop in rather than snap */
.custom-navbar .dropdown-menu.show {
  animation: mou-rise .18s ease both;
}

/* Icon buttons in table rows */
td .btn-sm {
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

td .btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Modals scale up very slightly */
.modal.fade .modal-dialog {
  transition: transform .25s cubic-bezier(.16, .84, .44, 1), opacity .2s ease;
  transform: translateY(14px) scale(.985);
}

.modal.show .modal-dialog {
  transform: none;
}

/* DataTables empty message ------------------------------------------------
   Replaces the hand-written colspan row, which broke DataTables' column
   count. Styled to match the rest of the app. */

table.dataTable td.dataTables_empty {
  padding: 2.75rem 1rem !important;
  text-align: center !important;
  white-space: normal !important;
  color: var(--ink-500) !important;
  font-size: .92rem;
}

/* Turn all of the above off on request ------------------------------------ */

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