html {
  font-size: 14px;
}

@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 rgba(232, 133, 106, 0.45);
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #FDEEE8 0%, #EAF4FB 100%);
  background-attachment: fixed;
  color: #2D2D2D;
}

/* Sticky footer — flex grow pushes footer to bottom on short pages */
.page-content {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

/* Slim footer bar — override Bootstrap's py-3 on the inner container */
footer .container {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ── Primary button — global override (Bootstrap 5 CSS-variable approach) ── */
/* _Layout.cshtml.css is CSS-isolated (scoped) so it cannot reach page buttons;
   this rule in the global stylesheet fixes all btn-primary across every page. */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #E8856A;
  --bs-btn-border-color: #D46E52;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #D46E52;
  --bs-btn-hover-border-color: #C05A3F;
  --bs-btn-focus-shadow-rgb: 232, 133, 106;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #C05A3F;
  --bs-btn-active-border-color: #C05A3F;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #E8856A;
  --bs-btn-disabled-border-color: #D46E52;
}

.btn-outline-primary {
  --bs-btn-color: #E8856A;
  --bs-btn-border-color: #E8856A;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #E8856A;
  --bs-btn-hover-border-color: #E8856A;
  --bs-btn-focus-shadow-rgb: 232, 133, 106;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #D46E52;
  --bs-btn-active-border-color: #D46E52;
  --bs-btn-disabled-color: #E8856A;
  --bs-btn-disabled-border-color: #E8856A;
}

.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;
}

/* This is the customizations of the project */

:root {
    --teal: #E8856A; /* iDocThis primary — warm coral */
    --teal-600: #D46E52;
    --teal-dark: #C05A3F;
    /* Override Bootstrap 5's global link colour variables */
    --bs-link-color: #C05A3F;
    --bs-link-hover-color: #A04830;
    --bs-link-color-rgb: 192, 90, 63;
    --bs-link-hover-color-rgb: 160, 72, 48;
}

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

.btn-teal {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--teal);
    --bs-btn-border-color: var(--teal);
    --bs-btn-hover-bg: var(--teal-dark);
    --bs-btn-hover-border-color: var(--teal-dark);
    --bs-btn-active-bg: var(--teal-dark);
    --bs-btn-active-border-color: var(--teal-dark);
}

.btn-outline-teal {
    --bs-btn-color: var(--teal);
    --bs-btn-border-color: var(--teal);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--teal);
    --bs-btn-hover-border-color: var(--teal);
}

.hero-shot, .how-shot {
    max-height: 520px;
    object-fit: cover;
}

.navbar .nav-link.active {
    font-weight: 600;
    color: var(--teal) !important;
}

.how-shot {
    width: 100%;
    max-width: 420px; /* tweak: 360�480px works well */
    height: auto;
}

@media (min-width: 992px) { /* lg+ */
    .how-shot {
        margin-left: auto;
        margin-right: auto;
    }
    /* center it in the column */
}

/* Header / navbar — frosted glass to harmonise with gradient body */
header {
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: rgba(232, 133, 106, 0.20) !important;
}

/* App page helpers */
.page-shell {
    max-width: 1100px;
}

.card-soft{
    border: 0;
    border-radius: 1.5rem;
    box-shadow: 0 .5rem 2rem rgba(232, 133, 106, 0.18), 0 .125rem .5rem rgba(0, 0, 0, 0.06);
    background: #FDFAF7;
}

.table-hover-soft thead tr {
    background-color: rgba(253, 238, 232, 0.70);
    font-weight: 600;
}

.table-hover-soft tbody tr{
    cursor: pointer;
    transition: background-color .12s ease;
}

.table-hover-soft tbody tr:nth-child(even) {
    background-color: rgba(253, 238, 232, 0.32);
}

.table-hover-soft tbody tr:hover {
    background-color: rgba(232, 133, 106, 0.09);
}

.kpi-pill {
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
}

[data-filter].active {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: #fff;
}

.sort-btn{
    color: inherit;
    font-weight: 600;
}

.sort-btn:hover{
    text-decoration: underline;
}

.sort-indicator {
    font-weight: 700;
}

@media (min-width: 768px) {
    .table-responsive{
        overflow: visible !important;
    }
}

.table-responsive .dropdown-menu {
    z-index: 2000;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

.dropdown-menu .dropdown-item.active {
    background: rgba(0,0,0,.06);
    color: inherit;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(0,0,0,.04);
}

@media (max-width: 576px) {
    #appMenuModal .modal-dialog {
        position: fixed;
        bottom: 0;
        margin: 0;
        width: 100%;
        max-width: none;
    }

    #appMenuModal .modal-content {
        border-radius: 16px 16px 0 0;
    }
}