/* =============================================================================
   app.css  —  MiceTravelers own foundation (replaces MDB/Bootstrap)
   Provides layout (grid), utilities, and base component structure for pages
   that have been migrated off MDB. Colours/fonts come from surplus-theme.css,
   which loads AFTER this file. Tokens (var(--color-*) etc.) are defined there.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
img, svg { vertical-align: middle; }
button { font-family: inherit; }
a { text-decoration: none; }

/* ---- Container & 12-col flex grid ----------------------------------------- */
.container { width: 100%; padding-inline: 1rem; margin-inline: auto; }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.row > [class*="col"] { padding-inline: .75rem; }
.col { flex: 1 0 0%; }
[class^="col-"], [class*=" col-"] { width: 100%; }

/* base (xs) widths */
.col-1{width:8.3333%}.col-2{width:16.6667%}.col-3{width:25%}.col-4{width:33.3333%}
.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}
.col-9{width:75%}.col-10{width:83.3333%}.col-11{width:91.6667%}.col-12{width:100%}
.row-cols-1 > *{flex:0 0 auto;width:100%}.row-cols-2 > *{flex:0 0 auto;width:50%}
.g-3{gap:1rem}.g-4{gap:1.5rem}

@media (min-width: 768px) {
  .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}.col-md-4{width:33.3333%}
  .col-md-5{width:41.6667%}.col-md-6{width:50%}.col-md-7{width:58.3333%}.col-md-8{width:66.6667%}
  .col-md-9{width:75%}.col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
}
@media (min-width: 992px) {
  .col-lg-3{width:25%}.col-lg-4{width:33.3333%}.col-lg-6{width:50%}.col-lg-7{width:58.3333%}
  .col-lg-8{width:66.6667%}.col-lg-9{width:75%}
}

/* ---- Spacing utilities (0..5 = 0,.25,.5,1,1.5,3rem) ------------------------ */
.m-0{margin:0}.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.me-1{margin-right:.25rem}.me-2{margin-right:.5rem}.me-3{margin-right:1rem}
.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.ms-auto{margin-left:auto}.me-auto{margin-right:auto}
.mx-2{margin-inline:.5rem}.mx-auto{margin-inline:auto}.my-2{margin-block:.5rem}
.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:3rem}.py-4{padding-block:1.5rem}.px-3{padding-inline:1rem}
@media (min-width: 768px){ .p-md-5{padding:3rem} }
@media (min-width: 992px){ .me-lg-2{margin-right:.5rem}.me-lg-3{margin-right:1rem}.my-lg-0{margin-block:0} }

/* ---- Display / flex / text utilities -------------------------------------- */
.d-flex{display:flex}.d-block{display:block}.d-none{display:none}.d-inline-block{display:inline-block}
.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}
.justify-content-center{justify-content:center}.justify-content-between{justify-content:space-between}.justify-content-end{justify-content:flex-end}
.gap-2{gap:.5rem}.gap-3{gap:1rem}
@media (min-width: 992px){ .align-items-lg-center{align-items:center} }
.text-center{text-align:center}.text-end{text-align:right}
.w-100{width:100%}.h-100{height:100%}
.fw-bold{font-weight:700}.fw-semibold{font-weight:600}
.lead{font-size:1.15rem;font-weight:400}
.border-0{border:0!important}
.text-white{color:#fff}
.fade{transition:opacity .15s linear}

/* ---- Navbar --------------------------------------------------------------- */
.navbar{display:flex;align-items:center;flex-wrap:wrap;padding-block:.5rem;}
.navbar .container{display:flex;align-items:center;flex-wrap:wrap;}
.navbar-brand{display:inline-flex;align-items:center;font-size:1.25rem;margin-right:1rem;}
.navbar-nav{display:flex;flex-direction:column;list-style:none;padding-left:0;margin:0;}
.navbar-nav .nav-link{display:block;padding:.5rem .75rem;}
.nav-item{display:block;}
.navbar-text{padding-block:.5rem;}
.navbar-toggler{display:inline-flex;align-items:center;justify-content:center;padding:.4rem .6rem;background:transparent;border:1px solid var(--color-base-300);border-radius:var(--radius-field,.25rem);cursor:pointer;color:var(--color-base-content);}
.navbar-collapse{flex-basis:100%;flex-grow:1;}
/* Mobile: collapse hidden until toggled */
.navbar-collapse.collapse:not(.show){display:none;}
/* Desktop (lg+): always expanded, hide toggler */
@media (min-width: 992px){
  .navbar-expand-lg .navbar-toggler{display:none;}
  .navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto;}
  .navbar-expand-lg .navbar-nav{flex-direction:row;align-items:center;}
}

/* ---- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
  padding:.5rem 1rem;font-weight:600;line-height:1.5;text-align:center;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-field,.25rem);
  background:var(--color-base-200);color:var(--color-base-content);
  transition:background-color .2s,border-color .2s,color .2s;}
.btn:hover{filter:brightness(.97);}
.btn-lg{padding:.65rem 1.25rem;font-size:1.05rem;}
.btn-sm{padding:.35rem .7rem;font-size:.8rem;}

/* ---- Cards ---------------------------------------------------------------- */
.card{display:flex;flex-direction:column;background:var(--color-base-100);
  border:1px solid var(--color-base-300);border-radius:var(--radius-box,.375rem);}
.card-body{flex:1 1 auto;padding:1.5rem;}
.card-header{padding:.85rem 1.25rem;}
.card-title{margin:0 0 .5rem;font-size:1.25rem;}
.card-text{margin:0 0 .5rem;}

/* ---- Forms ---------------------------------------------------------------- */
.form-label{display:inline-block;margin-bottom:.4rem;}
.form-control{display:block;width:100%;padding:.5rem .75rem;line-height:1.5;
  background:var(--color-base-100);color:var(--color-base-content);
  border:1px solid var(--color-base-300);border-radius:var(--radius-field,.25rem);}
.form-control:focus{outline:none;}
.form-text{display:block;margin-top:.3rem;font-size:.8rem;}
textarea.form-control{min-height:5rem;}

/* ---- Alerts --------------------------------------------------------------- */
.alert{padding:.75rem 1rem;margin-bottom:1rem;border:1px solid transparent;
  border-radius:var(--radius-box,.375rem);}

/* ---- Tables --------------------------------------------------------------- */
.table-responsive{overflow-x:auto;}
.table{width:100%;border-collapse:collapse;margin-bottom:1rem;}
.table th,.table td{padding:.75rem 1rem;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--color-base-300);}

/* ---- Nav: tabs & pills ---------------------------------------------------- */
.nav{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.nav-justified{width:100%;}
.nav-justified .nav-item{flex:1 1 auto;text-align:center;}
.nav-link{display:block;padding:.5rem 1rem;cursor:pointer;background:transparent;border:0;}
.nav-tabs{border-bottom:1px solid var(--color-base-300);}
.nav-pills{display:flex;}
/* Tab panes */
.tab-content > .tab-pane{display:none;}
.tab-content > .tab-pane.active{display:block;}
.tab-content > .tab-pane.fade{opacity:0;transition:opacity .15s linear;}
.tab-content > .tab-pane.fade.show{opacity:1;}

/* ---- Badge ---------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;padding:.3em .55em;font-size:.78em;
  font-weight:600;line-height:1;border-radius:var(--radius-field,.25rem);}

/* ---- Misc ----------------------------------------------------------------- */
.border-top{border-top:1px solid var(--color-base-300);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.08);}
.shadow-2-strong{box-shadow:0 4px 12px rgba(0,0,0,.1);}
.spinner-border{display:inline-block;width:1.5rem;height:1.5rem;border:.2em solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:app-spin .75s linear infinite;}
@keyframes app-spin{to{transform:rotate(360deg);}}

/* ---- Button groups -------------------------------------------------------- */
.btn-group{display:inline-flex;}
.btn-group > .btn{border-radius:0;}
.btn-group > .btn:first-child{border-top-left-radius:var(--radius-field,.25rem);border-bottom-left-radius:var(--radius-field,.25rem);}
.btn-group > .btn:last-child{border-top-right-radius:var(--radius-field,.25rem);border-bottom-right-radius:var(--radius-field,.25rem);}
.btn-group > .btn + .btn{margin-left:-1px;}
.btn-group-sm > .btn,.btn-group-sm{font-size:.8rem;}
#timeRangeSelector{width:100%;display:flex;}
#timeRangeSelector .btn{flex:1;margin:0 2px;}

/* ---- Form checks (checkbox / radio rows) ---------------------------------- */
.form-check{display:block;min-height:1.5rem;padding-left:1.6em;margin-bottom:.125rem;}
.form-check-inline{display:inline-flex;align-items:center;margin-right:1rem;}
.form-check-input{width:1em;height:1em;margin-left:-1.6em;margin-top:.25em;vertical-align:top;
  background:var(--color-base-100);border:1px solid var(--color-base-300);
  appearance:none;-webkit-appearance:none;cursor:pointer;}
.form-check-input[type=checkbox]{border-radius:.25em;}
.form-check-input[type=radio]{border-radius:50%;}
.form-check-input:checked{background:var(--color-primary);border-color:var(--color-primary);}
.form-check-inline .form-check-input{margin-left:0;margin-right:.4em;}
.form-check-label{cursor:pointer;}

/* ---- Input groups --------------------------------------------------------- */
.input-group{display:flex;align-items:stretch;width:100%;}
.input-group > .form-control{flex:1 1 auto;width:1%;}
.input-group-text{display:flex;align-items:center;padding:.5rem .75rem;
  background:var(--color-base-200);border:1px solid var(--color-base-300);}

/* ---- Misc dashboard utilities --------------------------------------------- */
.rounded-circle{border-radius:50%;}
.small,small{font-size:.85em;}
.text-danger{color:var(--color-error);}
.text-success{color:var(--color-success);}
.text-warning{color:var(--color-warning);}

/* ---- Toasts (notifications; replaces mdb.Toast styling) ------------------- */
.toast{display:none;min-width:250px;background:var(--color-base-100);
  border:1px solid var(--color-base-300);border-radius:var(--radius-box,.375rem);
  box-shadow:0 6px 16px rgba(0,0,0,.15);padding:.75rem 1rem;margin-bottom:.5rem;}
.toast.show{display:block;}
.toast-container{position:fixed;top:1rem;right:1rem;z-index:1100;}

/* ---- Simple modal (vanilla, replaces mdb.Modal) --------------------------- */
.modal{position:fixed;inset:0;z-index:1050;display:none;overflow:auto;
  background:rgba(0,0,0,.5);}
.modal.show{display:block;}
.modal-dialog{max-width:500px;margin:1.75rem auto;}
.modal-lg .modal-dialog,.modal-dialog.modal-lg{max-width:800px;}
.modal-content{display:flex;flex-direction:column;background:var(--color-base-100);
  border:1px solid var(--color-base-300);border-radius:var(--radius-box,.375rem);}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid var(--color-base-300);}
.modal-title{margin:0;font-size:1.15rem;}
.modal-body{padding:1.25rem;}
.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;
  padding:1rem 1.25rem;border-top:1px solid var(--color-base-300);}
.btn-close{width:1.5rem;height:1.5rem;padding:0;border:0;background:transparent;
  cursor:pointer;font-size:1.25rem;line-height:1;color:var(--color-base-content);}
.btn-close::before{content:"\00d7";}