/* ============================================================
   STRØMMEN — Brand theme layer (docs/BRAND.md)
   International Style: ink black, warm cream, flag primaries.
   Flat. Axis-aligned. No gradients, no shadows, no rounded SaaS.
   Loaded LAST — overrides bootstrap.css + custom.css.
   ============================================================ */

:root{
  --st-ink:      #262626;  /* softened ink — pure #000 read too harsh in the UI */
  --st-ink-soft: #63635D;  /* warm graphite — table headers & table controls */
  --st-white:    #FFFFFF;
  --st-cream:    #F5F5F2;  /* page field — neutralized; original cream #FAF6E8 clashed with white cards */
  --st-wash:     #EFEFEA;  /* soft wash for headers/hovers/banners */
  --st-border:   #E3DECB;   /* warm structural border derived from cream */
  --st-border-2: #D8D3C4;
  --st-yellow:   #F0D818;
  --st-red:      #D81818;
  --st-green:    #009048;
  --st-navy:     #0060A8;
  --st-sky:      #00A8D8;
  --st-orange:   #F04818;
  --st-magenta:  #D81848;
  --st-navy-deep:#004890;
  --st-green-deep:#007830;
  --st-crimson:  #C00030;
  --st-golden:   #F0C000;
  --st-display:  'Manrope','Helvetica Neue',Helvetica,Arial,sans-serif;
  --st-ui:       'Helvetica Neue',Helvetica,Arial,sans-serif;
  --st-topbar-h: 63px;
  --st-sidebar-w:224px;
  --st-radius:   6px;      /* softened corners — pure square read too sharp in the UI */
}

/* ---------- base ---------- */
body{
  font-family:var(--st-ui) !important;
  background:var(--st-cream);
  color:var(--st-ink);
  font-size:14px;
}
p{color:var(--st-ink);}
a{color:var(--st-navy);}
a:hover{color:var(--st-ink);}

h1,h2,.card-title,.modal-title{
  font-family:var(--st-display);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--st-ink);
}
h1{font-size:26px;line-height:1.05;}
h2{font-size:20px;line-height:1.1;}
/* h3 is the eyebrow level in this app already — push it to brand spec */
h3{
  font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--st-ink);
}
.sm-title{font-family:var(--st-display);font-weight:800;letter-spacing:-0.01em;}

.dark-grey{background:var(--st-wash);}
.lightWhite{background:var(--st-white);}
.vr,.hr,hr{background-color:var(--st-border);}

/* kill SaaS chrome globally, keep intentional circles (avatars, dots) */
.shadow,.shadow-sm,.shadow-lg{box-shadow:none !important;}
.card,.btn,.form-control,.form-select,.dropdown-menu,.modal-content,
.alert,.nav-pills .nav-link,.page-link,.bootstrap-tagsinput,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--st-radius) !important;}

/* ---------- buttons — semantic flag-color system ----------
   default/primary = navy · success = green · danger = red
   warning = golden · info = sky · cancel/secondary = white+ink
   dark = header ink. Hovers deepen within the same flag family. */
.btn{
  background:var(--st-navy);color:var(--st-white);
  border:1px solid var(--st-navy);
  font-family:var(--st-ui);font-weight:700;
  letter-spacing:.02em;
  padding:6px 18px;min-width:95px;
}
.btn:hover,.btn:focus{background:var(--st-navy-deep);color:var(--st-white);border-color:var(--st-navy-deep);}
.btn i{font-size:13px;}
.btn-primary,.btn.btn-primary{background:var(--st-navy);border-color:var(--st-navy);color:var(--st-white);}
.btn-primary:hover,.btn.btn-primary:hover{background:var(--st-navy-deep);border-color:var(--st-navy-deep);color:var(--st-white);}
.btn.btn-light{background:var(--st-white);color:var(--st-ink);border-color:var(--st-ink);}
.btn.btn-light:hover{background:var(--st-wash);color:var(--st-ink);}
/* .btn-cancel is only ever used for Delete actions (calendar events/classes) — danger family,
   same red as every other destructive control */
.btn-cancel{background:var(--st-red);color:var(--st-white);border-color:var(--st-red);}
.btn-cancel:hover{background:var(--st-crimson);color:var(--st-white);border-color:var(--st-crimson);}
.delet-btn,.btn.btn-danger{background:var(--st-red);border-color:var(--st-red);color:var(--st-white);}
.delet-btn:hover,.btn.btn-danger:hover{background:var(--st-crimson);border-color:var(--st-crimson);color:var(--st-white);}
.btn.btn-success{background:var(--st-green);border-color:var(--st-green);color:var(--st-white);}
.btn.btn-success:hover{background:var(--st-green-deep);border-color:var(--st-green-deep);color:var(--st-white);}
.btn-warning,.btn.btn-warning{background:var(--st-golden);border-color:var(--st-golden);color:var(--st-ink);}
.btn-warning:hover,.btn.btn-warning:hover{background:var(--st-yellow);border-color:var(--st-yellow);color:var(--st-ink);}
.btn-info,.btn.btn-info{background:var(--st-sky);border-color:var(--st-sky);color:var(--st-white);}
.btn-info:hover,.btn.btn-info:hover{background:var(--st-navy);border-color:var(--st-navy);color:var(--st-white);}
.btn-secondary{background:var(--st-white);color:var(--st-ink);border-color:var(--st-ink);}
.btn-secondary:hover{background:var(--st-wash);color:var(--st-ink);border-color:var(--st-ink);}

/* ---------- calendar & session-form buttons — one color per job ---------- */
/* repeater "Add" rows — additive, green */
.btn[data-repeater-create]{background:var(--st-green);border-color:var(--st-green);color:var(--st-white);min-width:0;}
.btn[data-repeater-create]:hover{background:var(--st-green-deep);border-color:var(--st-green-deep);color:var(--st-white);}
/* repeater row trash — destructive, red */
.btn.trashIcon,.btn[data-repeater-delete]{background:var(--st-red);border-color:var(--st-red);color:var(--st-white);min-width:0;}
.btn.trashIcon:hover,.btn[data-repeater-delete]:hover{background:var(--st-crimson);border-color:var(--st-crimson);color:var(--st-white);}
/* preview actions — sky, clearly not the submit */
.btn.preview-notification,.btn.preview-email{background:var(--st-sky);border-color:var(--st-sky);color:var(--st-white);}
.btn.preview-notification:hover,.btn.preview-email:hover{background:var(--st-navy);border-color:var(--st-navy);color:var(--st-white);}
/* advanced options — navigational, outline */
.btn.advance_options_btn{background:var(--st-white);color:var(--st-navy);border:1px solid var(--st-navy);}
.btn.advance_options_btn:hover{background:var(--st-navy);color:var(--st-white);border-color:var(--st-navy);}
/* send reminder — attention, golden */
.btn#send_reminder{background:var(--st-golden);border-color:var(--st-golden);color:var(--st-ink);}
.btn#send_reminder:hover{background:var(--st-yellow);border-color:var(--st-yellow);color:var(--st-ink);}
.btn-outline-primary{background:transparent;color:var(--st-navy);border:1px solid var(--st-navy);min-width:0;}
.btn-outline-primary:hover{background:var(--st-navy);color:var(--st-white);border-color:var(--st-navy);}
.btn-outline-secondary,.btn-outline-dark{
  background:transparent;color:var(--st-ink);border:1px solid var(--st-ink);min-width:0;
}
.btn-outline-secondary:hover,.btn-outline-dark:hover{
  background:var(--st-ink);color:var(--st-white);border-color:var(--st-ink);
}
.btn-outline-danger{background:transparent;color:var(--st-red);border:1px solid var(--st-red);min-width:0;}
.btn-outline-danger:hover{background:var(--st-red);color:var(--st-white);}
.btn-outline-success{background:transparent;color:var(--st-green);border:1px solid var(--st-green);min-width:0;}
.btn-outline-success:hover{background:var(--st-green);color:var(--st-white);}
.tableCancelBtn{border:1px solid var(--st-ink);border-radius:4px;background:var(--st-white);color:var(--st-ink);}
.tableCancelBtn:hover{background:var(--st-ink);color:var(--st-white);}

/* buttons inside table rows use the same semantic colors as page buttons,
   just compact (no forced min-width) */
.table .btn{min-width:0;}

/* every dark/black surface matches the header ink exactly */
.btn-dark,.btn.btn-dark{background-color:var(--st-ink);border-color:var(--st-ink);color:var(--st-white);}
.btn-dark:hover,.btn.btn-dark:hover{background-color:var(--st-white);color:var(--st-ink);border-color:var(--st-ink);}
.bg-dark{background-color:var(--st-ink) !important;}
.badge.bg-dark{background-color:var(--st-ink) !important;}
.btn-pvbar-preview:hover{background:var(--st-ink);}
.fc-toolbar .fc-button-group button.fc-button-active:after{background:var(--st-ink);}

/* ---------- forms ---------- */
label{color:var(--st-ink);font-weight:500;}
label.field-label{color:#5c5747;}
.form-control,.form-select{
  border:1px solid var(--st-border-2);
  color:var(--st-ink);background-color:var(--st-white);
}
.form-control:focus,.form-select:focus{
  border-color:var(--st-ink);
  box-shadow:none;
  outline:2px solid var(--st-navy);outline-offset:0;
}
.form-check .form-check-input{border-radius:0;border-color:var(--st-border-2);}
.form-check-input:checked{background-color:var(--st-navy);border-color:var(--st-navy);}
.custom-radio.form-check .form-check-input{border-color:var(--st-ink);}
.form-switch .form-check-input{border-radius:2em;}
.form-switch .form-check-input:checked{background-color:var(--st-green);border-color:var(--st-green);}
.bootstrap-tagsinput{border-color:var(--st-border-2);}
.bootstrap-tagsinput .tag{
  background:var(--st-wash);border:1px solid var(--st-ink);
  color:var(--st-ink);border-radius:4px;
}
.form-row+.form-row{border-top:1px solid var(--st-border);}
.form-row .col-form-label{border-right:1px solid var(--st-border);color:#5c5747;}

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{border:1px solid var(--st-border-2);}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--st-ink);}
.select2-dropdown{border:1px solid var(--st-border-2);border-radius:var(--st-radius);box-shadow:0 6px 16px rgba(38,38,38,.10);}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--st-ink);}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:var(--st-wash);border:1px solid var(--st-ink);border-radius:4px;color:var(--st-ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- reviews list (instructor profile: Student Reviews and Ratings) ---------- */
.rating-info img{object-fit:cover;}
.rating-info .review{border-bottom:1px solid var(--st-border-2);}
.rating-info .review:last-child{border-bottom:0;}
.rating-info .review-avatar img{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;border:1px solid var(--st-border-2);
}
.rating-info .review-body{min-width:0;}
.rating-info .review-name{font-weight:700;font-size:15px;color:var(--st-ink);}
.rating-info .review-date{font-size:12px;color:#8F8F8A;}
.rating-info .user-rating .fa-star{color:var(--st-border-2);font-size:13px;letter-spacing:2px;}
.rating-info .user-rating .fa-star.checked{color:var(--st-yellow);}
.rating-info .review-text{line-height:1.55;max-width:72ch;overflow-wrap:break-word;}

/* calendar modal footer: labels never wrap, so every button keeps one uniform height;
   tighter padding so five buttons fit the modal width on one line */
.cal-modal-actions .btn,.advance_option .btn{white-space:nowrap;padding-left:10px;padding-right:10px;min-width:0;}

/* ---------- calendar Private Session modal — phone polish ----------
   Desktop keeps the framed label-gutter layout untouched; below md that
   pattern breaks down on a ~400px screen (right-aligned labels with a
   stray gutter border, 35px row padding, empty spacer labels, ragged
   fixed-width time boxes), so restyle the SAME markup responsively. */
@media (max-width: 767.98px){
  /* rows: reclaim the width; labels read as stacked field titles */
  #sessionForm .form-row{padding:0 4px;}
  #sessionForm .form-row .col-form-label{
    border-right:0;text-align:left;justify-content:flex-start;
    font-weight:600;color:var(--st-ink);padding-bottom:2px;
  }
  /* desktop-alignment spacer labels are dead weight on a phone */
  #sessionForm .form-row .col-form-label:empty{display:none;}
  /* half-width helpers make no sense at phone width */
  #sessionForm .w-50,#sessionForm .w-auto{width:100% !important;}
  /* date on its own line, then time + AM/PM share the next line cleanly */
  #sessionForm .schedule-time{gap:8px;}
  #sessionForm .schedule-time .form-control{margin-left:0 !important;margin-right:0 !important;}
  #sessionForm .schedule-time .form-control.time{flex:1 1 auto;width:auto !important;min-width:0;}
  #sessionForm .schedule-time select.form-control{flex:0 0 84px;width:84px !important;}
  /* online-link repeater: Default checkbox stacks above its fields and
     each link reads as one bordered card */
  #sessionForm .online_links [data-repeater-item]{
    border:1px solid var(--st-border);border-radius:var(--st-radius);
    padding:8px;margin-bottom:8px;background:var(--st-cream);
  }
  #sessionForm .online_links [data-repeater-item] > .d-flex{
    flex-direction:column;align-items:stretch !important;
  }
  #sessionForm .online_links [data-repeater-item] .row.me-2{margin-right:0 !important;}
  /* tighter shell so the fields get the width the padding was eating */
  #sessionForm .modal-body .card.p-3{padding:12px !important;}
  /* the two tab pills wrapped into stacked full-width rows that read as
     list items — pin them side by side, half the width each */
  #sessionForm .nav-pills{flex-wrap:nowrap;}
  #sessionForm .nav-pills .nav-item{flex:1 1 50%;min-width:0;}
  #sessionForm .nav-pills .nav-link{width:100%;text-align:center;padding-left:4px;padding-right:4px;}
  /* generated and cloned link cards carry slightly different grid nesting —
     force every cell full width so both render identically */
  #sessionForm .online_links [data-repeater-item] .row{margin-left:0;margin-right:0 !important;}
  #sessionForm .online_links [data-repeater-item] .row > *{width:100%;padding-left:0;padding-right:0;}
  /* phone-height notes box (rows="10" is desktop-sized) */
  #sessionForm #event_notes{height:8em;}
}

/* ---------- cards — quiet borders, hairline shadow ---------- */
.card{
  background:var(--st-white);
  border:1px solid var(--st-border-2);
  box-shadow:0 1px 2px rgba(38,38,38,.06);
}
.card-white{background:var(--st-white);border:1px solid var(--st-border-2);}
.cardUser{border:1px solid var(--st-border-2);background:var(--st-white);}
.cardUser .add-list{border-top:1px solid var(--st-border);}
.card .card-header{background:var(--st-wash);border-bottom:1px solid var(--st-border-2);}

/* ---------- tables ---------- */
.table{border:1px solid var(--st-border-2);background:var(--st-white);}
/* table header — the app's original light band (#E7E7DE) */
.table>thead{
  background:#E7E7DE;
  border:1px solid #D1D1D1;
}
.table thead th,.table thead td{
  border-color:#D1D1D1 !important;
  color:var(--st-ink);
  font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{color:var(--st-ink);}
/* dark sort arrows for the light header */
table.dataTable thead .sorting{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M6 1l4 4H2z' fill='%23262626' opacity='.4'/%3E%3Cpath d='M6 13L2 9h8z' fill='%23262626' opacity='.4'/%3E%3C/svg%3E") !important;
}
table.dataTable thead .sorting_asc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M6 1l4 4H2z' fill='%23262626'/%3E%3Cpath d='M6 13L2 9h8z' fill='%23262626' opacity='.3'/%3E%3C/svg%3E") !important;
}
table.dataTable thead .sorting_desc{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Cpath d='M6 1l4 4H2z' fill='%23262626' opacity='.3'/%3E%3Cpath d='M6 13L2 9h8z' fill='%23262626'/%3E%3C/svg%3E") !important;
}
.table th,.table td{border-left:1px solid var(--st-border);}
.table tbody{border-top:none !important;}
.table.dataTable.no-footer{border-bottom-color:var(--st-border-2);}
.table tr.active-tr{background:var(--st-wash);box-shadow:inset 3px 0 0 var(--st-yellow);}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:var(--st-wash);}
.secondary-table .table{border:1px solid var(--st-border-2);}
.secondary-table .table>thead{background:#E7E7DE;border-bottom:1px solid #D1D1D1;}
.secondary-table .table thead th,.secondary-table .table thead td{color:var(--st-ink);border-color:#D1D1D1;}
.secondary-table .table th,.secondary-table .table td{border-color:var(--st-border);}
.secondary-table .table tr:nth-child(even){background-color:var(--st-wash);}
.table-info .table th,.table-info .table td{border-bottom:1px solid var(--st-border);}
.table-info .table th{color:#5c5747;}

/* DataTables chrome */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--st-border-2);background:var(--st-white);color:var(--st-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--st-ink-soft);border-color:var(--st-ink-soft);color:var(--st-white) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover{
  background:var(--st-ink-soft);color:var(--st-white) !important;
}
.dataTables_wrapper .dataTables_filter input{border:1px solid var(--st-border-2);background:var(--st-white);}
.dataTables_wrapper .dataTables_filter input:focus{border-color:var(--st-ink);box-shadow:none;}
.dataTables_wrapper .dataTables_length select{border:1px solid var(--st-border-2);}
.dataTables_wrapper .dataTables_info{color:#5c5747;}

/* bootstrap pagination */
.page-link{color:var(--st-ink);border-color:var(--st-border-2);}
.page-item.active .page-link{background-color:var(--st-ink-soft);border-color:var(--st-ink-soft);color:var(--st-white);}
.page-link:hover{background:var(--st-ink-soft);color:var(--st-white);border-color:var(--st-ink-soft);}
.page-link:focus{box-shadow:none;}

/* ---------- flow banners: cream wash + flag color bar (no pastels) ---------- */
.instructors-bg,.students-bg,.groupClasses-bg,.messaging-bg,
.userManagement-bg,.calendarEvents-bg{
  background-color:var(--st-wash) !important;
  color:var(--st-ink);
}
.instructors-bg{box-shadow:inset 0 5px 0 var(--st-sky) !important;}
.students-bg{box-shadow:inset 0 5px 0 var(--st-yellow) !important;}
.groupClasses-bg{box-shadow:inset 0 5px 0 var(--st-green) !important;}
.messaging-bg{box-shadow:inset 0 5px 0 var(--st-ink) !important;}
.userManagement-bg{box-shadow:inset 0 5px 0 var(--st-navy) !important;}
.calendarEvents-bg{box-shadow:inset 0 5px 0 var(--st-magenta) !important;}

/* banners went light — breadcrumbs read in ink everywhere */
.breadcrumb .breadcrumb-item,.breadcrumb .breadcrumb-item a,
.dark-grey .breadcrumb .breadcrumb-item,.dark-grey .breadcrumb .breadcrumb-item a{color:var(--st-ink);}
.breadcrumb-item+.breadcrumb-item:before,
.dark-grey .breadcrumb-item+.breadcrumb-item:before{color:var(--st-ink);}
.breadcrumb .breadcrumb-item{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.breadcrumb .breadcrumb-item a:hover{opacity:1;color:var(--st-navy);}

/* ---------- tabs ---------- */
.singleTab .nav-pills .nav-item .nav-link{color:var(--st-ink);border-radius:0;}
.singleTab .nav-pills .nav-item .nav-link.active{
  background:transparent;color:var(--st-ink);font-weight:700;
}
.singleTab .nav-pills .nav-item .nav-link.active::after{background:var(--st-ink);}
.nav-tabs .nav-link{color:var(--st-ink);border-radius:0;}
.nav-tabs .nav-link.active{border-color:var(--st-ink) var(--st-ink) var(--st-white);font-weight:700;}
.payment-tab .nav-link.active{background:var(--st-ink);color:var(--st-white);}

/* ---------- dropdowns ---------- */
.dropdown-menu{
  border:1px solid var(--st-border-2);
  box-shadow:0 6px 16px rgba(38,38,38,.10) !important;
  padding:6px 0;
}
.dropdown-item{color:var(--st-ink);font-size:13px;}
.dropdown-item:hover,.dropdown-item:focus,.dropdown-item.active{
  background:var(--st-wash);color:var(--st-ink);
}
.dropdown-divider{border-top-color:var(--st-border);}

/* ---------- modals ---------- */
.modal-content{border:1px solid var(--st-border-2);}
.modal-header{border-bottom:1px solid var(--st-border-2);background:var(--st-wash);}
.modal-footer{border-top:1px solid var(--st-border);}

/* ---------- alerts — flat with color bar ---------- */
.alert{border:1px solid var(--st-border-2);background:var(--st-white);color:var(--st-ink);}
.alert-success{box-shadow:inset 4px 0 0 var(--st-green);}
.alert-danger{box-shadow:inset 4px 0 0 var(--st-red);}
.alert-warning{box-shadow:inset 4px 0 0 var(--st-yellow);}
.alert-info{box-shadow:inset 4px 0 0 var(--st-navy);}

/* ---------- badges → flag primaries ----------
   rgba() + --bs-bg-opacity so Bootstrap's tinted chips (.bg-opacity-10,
   e.g. the student-dashboard "Paid" / "Group Class" tags) keep their light
   wash — a fixed hex here painted them solid flag color under same-hue
   text. Solid badges are unchanged (opacity var resolves to 1). */
.badge.bg-success{background-color:rgba(0,144,72,var(--bs-bg-opacity,1)) !important;}
.badge.bg-danger{background-color:rgba(216,24,24,var(--bs-bg-opacity,1)) !important;}
.badge.bg-warning{background-color:rgba(240,216,24,var(--bs-bg-opacity,1)) !important;color:var(--st-ink) !important;}
.badge.bg-info{background-color:rgba(0,168,216,var(--bs-bg-opacity,1)) !important;}
.badge.bg-primary{background-color:rgba(0,96,168,var(--bs-bg-opacity,1)) !important;}
.badge.bg-secondary{background-color:rgba(38,38,38,var(--bs-bg-opacity,1)) !important;}
/* tinted-chip text + border follow the flag palette; this Bootstrap build
   (5.1) has no border-opacity utilities, so soften badge borders here */
.badge.text-success{color:var(--st-green) !important;}
.badge.text-info{color:var(--st-sky) !important;}
.badge.border-success{border-color:rgba(0,144,72,.3) !important;}
.badge.border-info{border-color:rgba(0,168,216,.3) !important;}
.text-primary{color:var(--st-navy) !important;}
.text-success{color:var(--st-green) !important;}
.text-danger{color:var(--st-red) !important;}

/* ---------- fullcalendar ---------- */
.fc .fc-button-primary{
  background:var(--st-white);border:1px solid var(--st-ink);color:var(--st-ink);border-radius:4px;
}
.fc .fc-button-primary:hover,
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active{
  background:var(--st-ink);border-color:var(--st-ink);color:var(--st-white);
}
.fc .fc-button-primary:focus,.fc .fc-button-primary:not(:disabled):active:focus{box-shadow:none;}
.fc .fc-toolbar-title{font-family:var(--st-display);font-weight:800;letter-spacing:-0.02em;}
.fc-theme-standard td,.fc-theme-standard th,.fc-theme-standard .fc-scrollgrid{border-color:var(--st-border);}
.fc .fc-day-today{background:var(--st-wash) !important;}

/* ============================================================
   APP SHELL — black topbar + fixed sidebar + content
   ============================================================ */

/* ---------- topbar ---------- */
header{
  background:var(--st-ink);
  position:sticky;top:0;z-index:1030;
  border-bottom:1px solid var(--st-ink);
}
header .container{max-width:100%;padding-left:20px;padding-right:20px;}
.navbar{height:var(--st-topbar-h);}
.navbar-brand{max-width:125px;}
.navbar-brand img{max-height:40px;}

.app-nav-toggle{
  display:block;
  background:none;border:none;padding:8px 10px 8px 0;margin-right:6px;cursor:pointer;
}
.app-nav-toggle span{
  display:block;width:22px;height:2px;background:var(--st-white);margin:5px 0;transition:all .3s;
}
body.sidebar-open .app-nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.sidebar-open .app-nav-toggle span:nth-child(2){opacity:0;}
body.sidebar-open .app-nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.header-right .dropdown-toggle i,
.header-right .nav-link i{color:rgba(255,255,255,.75);}
.header-right .dropdown-toggle:hover i,
.header-right .nav-link:hover i{color:var(--st-white);}
.header-msg-link:hover{background:rgba(255,255,255,.12);border-radius:var(--st-radius);}
.header-right .dropdown-toggle .badge,
.header-right .nav-link .badge{background:var(--st-red);}
.header-right .user-info .name{color:var(--st-white);font-weight:700;}
.header-right .user-info .email{color:rgba(255,255,255,.65);}
.header-right .user-info .user-icon{border:1px solid rgba(255,255,255,.4);}
.header-right .user-toggle .dropdown-item{color:var(--st-ink);}
.header-right .user-toggle .dropdown-item:hover{background:var(--st-wash);color:var(--st-ink);}
.header-right .user-toggle .dropdown-item:hover i{color:var(--st-ink);}

/* notifications dropdown */
.alerts-enter{border:1px solid var(--st-ink);margin-top:12px;}
.alerts-enter .dropdown-header{background:var(--st-ink);letter-spacing:.24em;}
.alerts-enter .dropdown-header a{color:rgba(255,255,255,.7);}
.alerts-enter .dropdown-header a:hover{color:var(--st-white);}
.alerts-enter ul li{border-bottom:1px solid var(--st-border);}
.alerts-enter ul li .icon{background:var(--st-wash);color:var(--st-ink);border:1px solid var(--st-ink);border-radius:4px;}
.alerts-enter ul li a:hover .icon{background:var(--st-yellow);color:var(--st-ink);}
.alerts-enter ul li .info .date{color:#8a8468;}

.nav-notif-badge{background:var(--st-red);border-radius:4px;}

/* ---------- shell ---------- */
.app-shell{display:flex;align-items:stretch;min-height:calc(100vh - var(--st-topbar-h));}
.app-main{flex:1 1 auto;min-width:0;}

/* ---------- sidebar ---------- */
.app-sidebar{
  width:var(--st-sidebar-w);flex:0 0 var(--st-sidebar-w);
  background:var(--st-white);
  border-right:1px solid var(--st-border-2);
  position:sticky;top:var(--st-topbar-h);
  height:calc(100vh - var(--st-topbar-h));
  overflow-y:auto;overflow-x:hidden;
  padding:14px 0 40px;
  z-index:1029;
}
.app-sidebar::-webkit-scrollbar{width:8px;}
.app-sidebar::-webkit-scrollbar-thumb{background:var(--st-border-2);}

/* keep contents at full width so text doesn't wrap mid-collapse */
.app-sidebar .sidebar-label,
.app-sidebar .sidebar-nav{min-width:var(--st-sidebar-w);}

/* desktop collapse — sidebar shrinks to a 64px icon rail (icons + native
   title tooltips); content gets nearly full width */
@media (min-width:992px){
  .app-sidebar{transition:width .25s ease,flex-basis .25s ease;}
  body.sidebar-collapsed .app-sidebar{
    width:64px;flex-basis:64px;
    padding-left:0;padding-right:0;
  }
  body.sidebar-collapsed .app-sidebar .sidebar-label,
  body.sidebar-collapsed .app-sidebar .sidebar-nav{min-width:0;}
  /* group labels reduce to their colored marker square */
  body.sidebar-collapsed .sidebar-label{font-size:0;letter-spacing:0;justify-content:center;padding:16px 0 8px;}
  body.sidebar-collapsed .sidebar-nav li{position:relative;}
  body.sidebar-collapsed .sidebar-nav li a{
    font-size:0;              /* hides the text node, title tooltip remains */
    justify-content:center;
    padding:11px 0;
  }
  body.sidebar-collapsed .sidebar-nav li a i{font-size:15px;width:auto;margin:0;opacity:.75;}
  body.sidebar-collapsed .sidebar-nav li a:hover i,
  body.sidebar-collapsed .sidebar-nav li a.active i{opacity:1;}
  /* notification counters become corner dots on the icon */
  body.sidebar-collapsed .sidebar-nav .nav-notif-badge{
    position:absolute;top:4px;right:10px;margin:0;
    font-size:8px;min-width:14px;height:14px;padding:0 3px;
  }
}

.sidebar-label{
  display:flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--st-ink);
  padding:18px 18px 6px;
}
.sidebar-label::before{
  content:'';width:8px;height:8px;flex:0 0 8px;
  background:var(--st-ink);
}
.sidebar-label.label-menu::before{background:var(--st-red);}
.sidebar-label.label-admin::before{background:var(--st-navy);}
.sidebar-label.label-people::before{background:var(--st-green);}
.sidebar-label.label-support::before{background:var(--st-yellow);}

.sidebar-nav{list-style:none;margin:0;padding:0;}
.sidebar-nav li a{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px;
  color:var(--st-ink);
  font-size:13px;font-weight:500;
  border-left:3px solid transparent;
  transition:background .15s,border-color .15s;
}
.sidebar-nav li a i{
  width:16px;text-align:center;font-size:13px;color:var(--st-ink);opacity:.55;
}
.sidebar-nav li a:hover{background:var(--st-wash);border-left-color:var(--st-ink);}
.sidebar-nav li a.active{
  background:var(--st-ink);color:var(--st-white);
  border-left-color:var(--st-red);font-weight:700;
}
.sidebar-nav li a.active i{color:var(--st-white);opacity:1;}
.sidebar-nav .nav-notif-badge{margin-left:auto;}

/* mobile */
.sidebar-backdrop{display:none;}
@media (max-width:991.98px){
  .app-nav-toggle{display:block;}
  .app-sidebar{
    position:fixed;left:0;top:var(--st-topbar-h);
    transform:translateX(-105%);
    transition:transform .25s ease;
    z-index:1031;
  }
  body.sidebar-open .app-sidebar{transform:none;}
  .sidebar-backdrop{
    display:block;position:fixed;inset:var(--st-topbar-h) 0 0 0;
    background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .25s;
    z-index:1030;
  }
  body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto;}
  body.sidebar-open{overflow:hidden;}
  header .container{padding-left:12px;padding-right:12px;}
}

/* phones: half/quarter-width form controls go full width; legacy fixed-width
   overlays (popup, tooltips, chat) are clamped to the viewport */
@media (max-width:767.98px){
  .form-control.w-50,.form-select.w-50,select.w-50,input.w-50,textarea.w-50,
  .form-control.w-25,.form-select.w-25,select.w-25,input.w-25{width:100% !important;}
  .popup{width:calc(100% - 32px) !important;}
  .popper,.tooltip,.tippy-box[data-theme~='my-tooltip']{max-width:calc(100vw - 24px) !important;width:auto !important;}
  .inbox_chat{height:auto;max-height:60vh;}
  .msg_history{height:auto;max-height:55vh;}
  /* info tables (profile/security cards): let cells shrink to content instead of
     forcing a 400px+ sideways scroller on a 375px screen */
  .table-info .table th,.table-info .table td{min-width:0;}
  .table-info .table th[style*="width"]{width:auto !important;}
  /* reviews list: tighter spacing and a smaller avatar on phones */
  .rating-info .review{padding:16px !important;gap:12px !important;}
  .rating-info .review-avatar img{width:40px;height:40px;}
}

/* ---------- table action icons (edit/view/delete) ---------- */
/* action icons follow the button color system.
   Titles vary per page ("Edit Student", "View Instructor"…) so match by prefix. */
.action a{
  color:var(--st-white);background-color:var(--st-navy);
  border:1px solid var(--st-navy);border-radius:4px;
}
.action a:hover{background-color:var(--st-white);color:var(--st-navy);}
.action a[title^="View"]{background-color:var(--st-sky);border-color:var(--st-sky);}
.action a[title^="View"]:hover{background-color:var(--st-white);color:var(--st-sky);}
.action a.restore-user,.action a[title^="Restore"]{background-color:var(--st-green);border-color:var(--st-green);}
.action a.restore-user:hover,.action a[title^="Restore"]:hover{background-color:var(--st-white);color:var(--st-green);}
.action a.destroy,.action a[title^="Delete"]{background-color:var(--st-red);border-color:var(--st-red);color:var(--st-white);}
.action a.destroy:hover,.action a[title^="Delete"]:hover{background-color:var(--st-white);color:var(--st-red);}

/* ---------- SweetAlert v1 (unpkg sweetalert) — flat brand ---------- */
.swal-modal{border-radius:var(--st-radius);border:1px solid var(--st-ink);font-family:var(--st-ui);}
.swal-title{font-family:var(--st-display);font-weight:800;letter-spacing:-0.02em;color:var(--st-ink);}
.swal-text{color:var(--st-ink);}
.swal-button{
  border-radius:var(--st-radius);font-weight:700;
  background-color:var(--st-navy);border:1px solid var(--st-navy);color:var(--st-white);
}
.swal-button:not([disabled]):hover{background-color:var(--st-navy-deep);border-color:var(--st-navy-deep);color:var(--st-white);}
.swal-button--cancel{background-color:var(--st-white);color:var(--st-ink);}
.swal-button--cancel:not([disabled]):hover{background-color:var(--st-wash);color:var(--st-ink);}
.swal-button--danger,.swal-button--confirm.swal-button--danger{background-color:var(--st-red);border-color:var(--st-red);}
.swal-button--danger:not([disabled]):hover{background-color:var(--st-crimson);border-color:var(--st-crimson);color:var(--st-white);}
.swal-button:focus{box-shadow:none;}
.swal-icon--warning{border-color:var(--st-yellow);}
.swal-icon--warning__body,.swal-icon--warning__dot{background-color:var(--st-ink);}
.swal-icon--success__ring{border-color:var(--st-green);}
.swal-icon--success__line{background-color:var(--st-green);}
.swal-icon--error{border-color:var(--st-red);}
.swal-icon--error__line{background-color:var(--st-red);}

/* ---------- SweetAlert2 — flat brand ---------- */
.swal2-popup{border-radius:var(--st-radius) !important;border:1px solid var(--st-ink);font-family:var(--st-ui);}
.swal2-title{font-family:var(--st-display);font-weight:800;letter-spacing:-0.02em;color:var(--st-ink);}
.swal2-styled{border-radius:var(--st-radius) !important;font-weight:700;}
.swal2-styled.swal2-confirm{background-color:var(--st-navy) !important;border:1px solid var(--st-navy) !important;}
.swal2-styled.swal2-confirm:hover{background-color:var(--st-navy-deep) !important;border-color:var(--st-navy-deep) !important;color:var(--st-white) !important;}
.swal2-styled.swal2-cancel{background-color:var(--st-white) !important;color:var(--st-ink) !important;border:1px solid var(--st-ink) !important;}
.swal2-styled.swal2-cancel:hover{background-color:var(--st-wash) !important;}
.swal2-styled.swal2-deny{background-color:var(--st-red) !important;border:1px solid var(--st-red) !important;}
.swal2-styled:focus{box-shadow:none !important;}
.swal2-icon.swal2-warning{border-color:var(--st-yellow);color:var(--st-ink);}
.swal2-icon.swal2-success{border-color:var(--st-green);color:var(--st-green);}
.swal2-icon.swal2-success .swal2-success-ring{border-color:var(--st-green);}
.swal2-icon.swal2-success [class^=swal2-success-line]{background-color:var(--st-green);}
.swal2-icon.swal2-error{border-color:var(--st-red);color:var(--st-red);}

/* ============================================================
   ACCOUNTING (/orders) — filters, stat cards, invoice list
   ============================================================ */

/* filter cards — consecutive filter rows fuse into one panel */
.management-filter{background:var(--st-white);}
.management-filter:has(+ .management-filter){
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  border-bottom:1px dashed var(--st-border-2);
}
.management-filter + .management-filter{
  border-top:none;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  box-shadow:0 1px 2px rgba(38,38,38,.06);
}
.management-filter label{
  font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--st-ink);
}

/* stat cards: strong display numbers, no washed-out opacity */
.box-content .box-content-left .box-heading{
  opacity:1;
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--st-ink);
}
.box-content .box-content-left .box-numbers{
  opacity:1;
  font-family:var(--st-display);font-weight:800;
  font-size:24px;letter-spacing:-0.02em;color:var(--st-ink);
}

/* icon chips + error/paid summary cards: keep the ORIGINAL app colors
   (pastel chips, gradient cards from custom.css) — reverted by request.
   Only the white text on the dark summary cards is enforced here. */
.bg-dark-red .box-heading,.bg-dark-green .box-heading,
.bg-dark-red .box-numbers,.bg-dark-green .box-numbers{color:var(--st-white);}

/* invoice list */
.invoicelist tr{border-bottom:1px solid var(--st-border);}
.unpaid-invoice{color:var(--st-red);}

/* wide data tables scroll sideways instead of squeezing columns */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll .table{min-width:900px;}

/* guest (login/register) — centered black bar, brand card */
body.guest header .navbar-brand{margin:0 auto;}

/* ============================================================
   PUBLIC FLOW PAGES — confirmation-template/* redesign
   One shell for the whole thank-you family: black topbar
   (includes/login-header), cream field, single centered card
   with a flag-color status bar. International Style: flat,
   axis-aligned, one accent per page state.
   ============================================================ */

.flow-page{background:var(--st-cream);min-height:100vh;display:flex;flex-direction:column;}
.flow-main{
  flex:1 1 auto;
  display:flex;align-items:flex-start;justify-content:center;
  padding:48px 16px 64px;
}
.flow-card{
  width:100%;max-width:660px;
  background:var(--st-white);
  border:1px solid var(--st-border-2);
  border-radius:var(--st-radius);
  box-shadow:0 1px 2px rgba(38,38,38,.06), inset 0 5px 0 var(--st-green);
  padding:44px 48px 40px;
  text-align:center;
}
.flow-card.is-red{box-shadow:0 1px 2px rgba(38,38,38,.06), inset 0 5px 0 var(--st-red);}

/* status mark — flat square chip, not a floating circle */
.flow-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  background:var(--st-green);color:var(--st-white);
  border-radius:var(--st-radius);
  font-size:26px;
  margin-bottom:22px;
}
.flow-card.is-red .flow-mark{background:var(--st-red);}

.flow-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--st-ink-soft);
  margin-bottom:8px;
}
.flow-card h1{font-size:32px;line-height:1.1;margin-bottom:12px;}
.flow-lede{font-size:16px;line-height:1.6;color:var(--st-ink);max-width:46ch;margin:0 auto 26px;}

/* info panel: definition rows with hairline dividers */
.flow-info{
  text-align:left;
  border:1px solid var(--st-border);
  border-radius:var(--st-radius);
  background:var(--st-cream);
  padding:6px 20px;
  margin-bottom:22px;
}
.flow-info + .flow-info{margin-top:-6px;}
.flow-info-title{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--st-ink);
  padding:14px 0 4px;
}
.flow-info dl{margin:0;}
.flow-info .flow-row{
  display:flex;gap:16px;
  padding:11px 0;
  border-top:1px solid var(--st-border);
}
.flow-info .flow-row:first-of-type{border-top:none;}
.flow-info dt{
  flex:0 0 150px;
  font-size:13px;font-weight:700;color:var(--st-ink-soft);
}
.flow-info dd{
  flex:1 1 auto;margin:0;min-width:0;
  font-size:14px;color:var(--st-ink);
  overflow-wrap:anywhere;
}
.flow-info dd .price{font-weight:700;}

.flow-actions{margin-top:4px;}
.flow-actions .btn{padding:10px 32px;font-size:15px;}
.flow-actions .flow-sub{display:block;margin-top:14px;font-size:13px;}
.flow-balance{
  display:inline-block;
  background:var(--st-wash);border:1px solid var(--st-border-2);
  border-radius:var(--st-radius);
  padding:8px 16px;margin-bottom:22px;
  font-size:14px;color:var(--st-ink);
}
.flow-balance strong{color:var(--st-red);}

@media (max-width:575.98px){
  .flow-main{padding:20px 12px 40px;}
  .flow-card{padding:28px 20px 26px;}
  .flow-card h1{font-size:26px;}
  .flow-info{padding:2px 14px;}
  .flow-info .flow-row{flex-direction:column;gap:2px;padding:10px 0;}
  .flow-info dt{flex-basis:auto;}
}

/* ---- flow form: tutoring confirmation ----------------------
   student-confirmation / student-card-confirmation. Wide
   composition on the same shell: one tile per student (navy
   accent), class + schedule tiles, then white panels for
   billing, packages, terms, and the confirm action. ---- */
.flow-wide{width:100%;max-width:940px;}
.flow-head{text-align:center;margin-bottom:26px;}
.flow-head h1{font-size:32px;line-height:1.1;margin-bottom:10px;}

.flow-tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-bottom:10px;
}
.flow-tile{
  background:var(--st-white);
  border:1px solid var(--st-border-2);
  border-radius:var(--st-radius);
  box-shadow:0 1px 2px rgba(38,38,38,.06);
  padding:18px 20px 14px;
  text-align:left;
  min-width:0;
}
.flow-tile.is-student{box-shadow:0 1px 2px rgba(38,38,38,.06), inset 0 4px 0 var(--st-navy);}
.flow-tile-head{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.flow-tile-mark{
  flex:0 0 auto;
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--st-navy);color:var(--st-white);
  border-radius:var(--st-radius);
  font-size:14px;
}
.flow-tile.is-green .flow-tile-mark{background:var(--st-green);}
.flow-tile.is-golden .flow-tile-mark{background:var(--st-golden);color:var(--st-ink);}
.flow-tile-title{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--st-ink-soft);
}
.flow-tile-name{
  font-family:var(--st-display);font-weight:800;
  font-size:16px;letter-spacing:-0.01em;line-height:1.2;
  color:var(--st-ink);overflow-wrap:anywhere;
}
.flow-tile-rows{margin:2px 0 0;}
.flow-tile-row{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 0;
  border-top:1px solid var(--st-border);
  font-size:13px;line-height:1.45;color:var(--st-ink);
}
.flow-tile-row i{flex:0 0 16px;text-align:center;color:var(--st-ink-soft);font-size:12px;}
.flow-tile-row > span,.flow-tile-row > div{min-width:0;overflow-wrap:anywhere;}
.flow-tile-label{font-weight:700;color:var(--st-ink-soft);}

.flow-help{text-align:center;font-size:13px;color:var(--st-ink-soft);margin:0 0 18px;}

.flow-panel{
  background:var(--st-white);
  border:1px solid var(--st-border-2);
  border-radius:var(--st-radius);
  box-shadow:0 1px 2px rgba(38,38,38,.06);
  padding:24px 30px 26px;
  margin-bottom:14px;
  text-align:left;
}
.flow-panel-title{
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--st-ink);
  padding-bottom:12px;margin-bottom:18px;
  border-bottom:1px solid var(--st-border);
}
.flow-panel label{font-size:13px;font-weight:700;color:var(--st-ink);}

.flow-submit{text-align:center;padding:8px 0 24px;}
.flow-submit .flow-note{font-size:12px;color:var(--st-ink-soft);margin-bottom:10px;}
.flow-submit .btn{padding:12px 44px;font-size:16px;}

@media (max-width:575.98px){
  .flow-head h1{font-size:26px;}
  .flow-panel{padding:20px 16px;}
  .flow-panel .w-50{width:100% !important;}
}

/* tutoring-confirmation (student-confirmation, student-card-confirmation):
   the three info blocks read as cards */
.student-information .container{border-bottom:2px solid var(--st-border-2);}
/* no height:100% — the card would grow to the column height (which includes
   the heading above it) and overflow under the next section's heading */
.student-information .information{
  background:var(--st-white);
  border:1px solid var(--st-border-2);
  border-radius:var(--st-radius);
  padding:16px;
}
.student-information .information i{color:var(--st-ink-soft);}
.student-information .information span,
.student-information .information p{color:var(--st-ink);line-height:1.6;}

@media (max-width:767.98px){
  /* section eyebrows sat flush against the card above them when stacked */
  .student-information h3{margin-top:20px;}
}