/* ── Theme: warm off-white ─────────────────────────────────────────────────
   Overrides Bootstrap 5 CSS variables to replace stark white with a softer,
   warmer palette that is easier on the eyes.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --bs-body-bg:              #f0ebe4;   /* warm off-white page background    */
    --bs-body-color:           #2e2c29;   /* dark warm brown instead of black  */
    --bs-secondary-color:      rgba(46, 44, 41, 0.60);
    --bs-tertiary-color:       rgba(46, 44, 41, 0.38);
    --bs-border-color:         #d9d3cb;   /* soft warm border                  */
    --bs-border-color-translucent: rgba(46, 44, 41, 0.12);
    --bs-body-tertiary-bg:     #e8e2db;   /* navbar / footer / muted surfaces  */
    --bs-secondary-bg:         #ede8e1;
    --bs-tertiary-bg:          #e4dfd8;
    --mcc-surface:             #faf8f5;   /* card / modal surface              */
}

/* Cards and modals get a slightly lighter surface than the page bg */
.card                { --bs-card-bg: var(--mcc-surface); }
.modal-content       { background-color: var(--mcc-surface); }
.dropdown-menu       { --bs-dropdown-bg: var(--mcc-surface); }
.list-group-item     { --bs-list-group-bg: var(--mcc-surface); }
.offcanvas           { --bs-offcanvas-bg: var(--mcc-surface); }
.popover             { --bs-popover-bg:   var(--mcc-surface); }
.toast               { --bs-toast-bg:     var(--mcc-surface); }
.table               { --bs-table-bg: transparent; --bs-table-cell-padding-x: 0.75rem; --bs-table-cell-padding-y: 0.5rem; }

/* ── DataTables wrapper spacing (dt-container = v2.x, dataTables_wrapper = v1.x) */
.dt-container,
.dataTables_wrapper {
    padding: 0.75rem;
}
.dt-container .dt-paging,
.dt-container .dt-info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
    padding-top: 1rem;
}

/* ── Table row interaction states ────────────────────────────────────────── */
.table-hover tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.06);
}
.table-hover tbody tr.selected {
    background-color: rgba(13, 110, 253, 0.10);
    border-left: 3px solid #0d6efd;
}

html {
  font-size: 14px;
}

/* ── MCC icon circles ─────────────────────────────────────────────────────── */
.mcc-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcc-icon-circle.mcc-sm { width: 40px; height: 40px; }

.mcc-icon-circle-primary   { background: rgba(13,  110, 253, 0.10); }
.mcc-icon-circle-success   { background: rgba(25,  135,  84, 0.10); }
.mcc-icon-circle-warning   { background: rgba(255, 193,   7, 0.15); }
.mcc-icon-circle-danger    { background: rgba(220,  53,  69, 0.10); }
.mcc-icon-circle-info      { background: rgba(13,  202, 240, 0.12); }
.mcc-icon-circle-purple    { background: rgba(111,  66, 193, 0.10); }
.mcc-icon-circle-secondary { background: rgba(108, 117, 125, 0.10); }

/* ── Auth card pages (login, register, etc.) ──────────────────────────────── */
.mcc-auth-card {
    max-width: 440px;
    margin: 0 auto;
}

/* ── Account manage sidebar ───────────────────────────────────────────────── */
.mcc-manage-nav .nav-link {
    color: var(--bs-body-color);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mcc-manage-nav .nav-link:hover {
    background: rgba(13, 110, 253, 0.07);
    color: var(--bs-primary);
}
.mcc-manage-nav .nav-link.active {
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-primary);
    font-weight: 500;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

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

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