:root {
  --main-width: 1024px;
  --main-height: 768px;
}

html, body {
  /* Set height and width to 100% of the viewport */
  height: 100vh;
  width: 100vw;
  /* Remove default browser margins */
  margin: 0;
  padding: 0;
  /* Hide any content that goes beyond the viewport */
  overflow-y: hidden; 
}


  .flagged {
    color: red;
  }
  .report-error {
    color: red;
    padding: 4px;
  }
  .placeholder-1 {
    border: 1px solid lightgray;
  }
  .placeholder-2 {
    border: 1px dashed lightgray;
  }
  #sortable1, .unassigned_list, .clinic {
  border: 1px solid #eee;
  width: 320px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
  }
  ul.clinic {
  min-height: 56px;
  /* 320px (2026-07-09, was 296px): fits 3 chips at the widened 80px .clinic
     li size (3 * 102px outer width incl. padding/border/margin = 306px)
     plus ~14px of slack before a 4th chip wraps to a new line - matches the
     typical clinic (attending + two extenders). */
  width: 320px;
  float: left;
  margin: 0px;
  }

  /* Issue #220: "Add Clinic" drop target that fades in alongside the real
     clinic cards while a clinic-owner chip (.isclinicowner) is being
     dragged - see enableSorting()'s start/stop handlers in clinic.js/
     gridedit.js. Rebuilt fresh on every populateClinic() call like the real
     ul.clinic cards it sits next to. Stays in normal document flow at all
     times (never display:none) so jQuery UI Sortable's connectWith position
     cache - computed once at drag start - is always accurate for it; only
     opacity/visibility/pointer-events toggle, via .addclinic-dropzone-active. */
  ul.addclinic-dropzone {
  min-height: 56px;
  width: 320px;
  float: left;
  margin: 0px;
  padding: 5px 0 0 0;
  list-style-type: none;
  border: 2px dashed rgb(79, 129, 189);
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease-in-out;
  }
  ul.addclinic-dropzone.addclinic-dropzone-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  }
  .addclinic-dropzone-label {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  text-align: center;
  color: rgb(79, 129, 189);
  }
  .ui-corner-all {
    border-radius: 0px !important;
  }



  /* Widths below (2026-07-09, +24px per clinic-card column) track the
     ul.clinic bump from 296px to 320px - colN shows N columns of clinic
     cards next to the fixed-width right sidebar, so each column's growth
     multiplies by N (col1 +24, col2 +48, col3 +72). Default matches col2. */
  #maindiv {
    width: 1100px;
    height:650px;
    display: flex;
    flex-direction: column;


  }

  #maindiv.fullscreen {
    width: 100%;
    height:100%;
  }

  #maindiv.col1 {
    width: 776px;
    height:100%;
  }

  #maindiv.col2 {
    width: 1100px;
    height:100%;
  }

  #maindiv.col3 {
    width: 1422px;
    height:100%;
  }

  .ipad #viewipad {
    font-weight: bold;
  }

  .col1 #viewcol1 {
    font-weight: bold;
  }

  .col2 #viewcol2 {
    font-weight: bold;
  }

    .col3 #viewcol3 {
    font-weight: bold;
  }

  .fullscreen #viewfullscreen {
    font-weight: bold;
  }

  #topframe {
   /* width: 1024px;  */
   width: 100%; 
   height: 40px; 
   background-color: rgb(55,96,146); 
   color: white; 
   text-align: center;
   display: flex;
  }
  #bottomframe {
    width: 100%;
    min-height: 0px;
    flex-grow: 1;
    color: black; 
    text-align: left;
    display: flex;
  }


  #bottomframe-left {
   flex-grow: 1;
   flex-basis: 0;
   min-width: 300px;
   height: 100%;
   min-height: 610px;
   background-color: white;
   padding: 0px;
   display: flex;
   flex-direction: column;
  }
  #bottomframe-right {
   min-width: 416px;
   flex-grow: 0;
   flex-shrink: 0;
   border: 2px solid rgb(79,129,189);
   background-color: white;
   float: left;
   padding: 0px;
   display: flex;
   flex-direction: column;
  }
  #clinicdisplay {
    flex-grow: 4;
    min-width: 300px;
    min-height: 480px;
    height: 480px;
    background-color: white;
    border: 2px solid rgb(79,129,189);
    float: left;
  }
  #fulldisplay {
    width: 1020px;
    height: 90%;
    background-color: white;
    border: 2px solid rgb(79,129,189);
    float: left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Toolbar row above #calframe (availabilitybatch.ejs) - a fixed-size flex
     item so #calframe below it (flex: 1) gets exactly the height #fulldisplay
     has left over, instead of #calframe's old height:100% double-counting
     this row's height and overflowing past #fulldisplay's border. */
  #availabilitybatch-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  #clinicdisplay.grid {
    height: 600px;
  }

  #sidebar-bottom {
  flex-grow: 1;
  min-width: 300px;
  border: 2px solid rgb(79,129,189);
  background-color: white;
  float: left;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  }
  .sidebar {
  width: 100%;
  max-width: 447px;
  flex-grow: 1;
  min-height: 573px; 
  height: 573px; 
  background-color: white;
  float: left;
  overflow-y: scroll;
  overflow-x: hidden;
  font-size: initial;
  }

  #sidebar {
      width: 424px;
      height: 560px;
      background-color: white;
      float: left;
  }

  #sidebar-top {
    width: 420px;
    height: 400px;
    border: 2px solid rgb(79, 129, 189);
    float: left;
  }


  ul.unassigned_list {
  flex-grow: 1;
  min-height: 152px;
  float: left;
  margin: 0;
  border: 0;
  }




  /* Uniform sizing (2026-07-09) across every connected-sortable provider
     chip list (#sortable1, .unassigned_list, .clinic) - these are all drag-
     and-drop targets for the same draggable chips (jQuery UI
     connectWith: '.connectedSortable'), so a chip must render identically
     wherever it currently sits or is being dragged to/from. 80px (was 76px
     for these two, matching .clinic li's earlier bump) gives the proposal
     accept/reject overlay badge room without colliding with neighbors. */
  #sortable1 li, .unassigned_list li, .clinic li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 80px;
  height: 40px;
  float: left;
  }



  @keyframes colorPulse {
  0% {
    background-color: #fbf9ee; /* Start color */
    border-color: #fcefa1;
  }
  100% {
    background-color: #a3c1e0; /* End color */
    border-color: #a1aefc;
  }
  }

  .throbber {
    display: flex;
    position: relative;
  }

  .throbber::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fbf9ee; /* Start color */
    animation: colorPulse 2s infinite alternate;
    z-index:1;
  }

  .initials {
    z-index:2;
  }


  select.text {
    width: 200px;
  }

  .supervisorlistli {
    padding: 0px !important;
    width: 86px !important;
  }

  .ui-selectmenu-button {
    padding: 5px;
    height: 40px;
    width: 76px !important;
  }

  .ui-selectmenu-text {
    font-size: 19.2px;
  }
  .ui-selectmenu-icon {
    margin-top: 5px !important;

  }

  #topframe .ui-selectmenu-button {
    padding: 5px;
    height: 20px;
    width: 76px !important;
  }

 #providerselectframe .ui-selectmenu-button {
    padding: 4px;
    height: 22px;
    width: 400px !important;
    margin: 4px;
  }

  /* #gridversion/#gridversion2 (report.ejs, scheduleadmin.ejs) get a jQuery
     UI selectmenu button whose text is clipped with ellipsis past its width
     (jquery-ui.css sets white-space: nowrap on .ui-selectmenu-text) - the
     shared 76px .ui-selectmenu-button rule above is nowhere near wide enough
     once options carry a description (e.g. "15 - Summer 2026", issue #17's
     original fix, carried forward when the tool picker on both pages moved
     from a <select> to the .tool-tabs button bar below). #providerselect
     (issue #223) has the same problem, worse - option text is a full
     "Title - Last, First - INITIALS note" string (see
     views/fragments/reportproviderlist.ejs) - so it gets the wider
     400px treatment matching #providerselectframe's provider select
     below rather than #gridversion's 260px. */
  #gridversion-button, #gridversion2-button {
    width: 260px !important;
  }

  #providerselect-button {
    width: 400px !important;
  }

  /* #providerselect's jQuery UI selectmenu dropdown has no built-in height
     cap, so with a full provider list it grows taller than the viewport and
     runs off the bottom of the page with no way to reach the rest of the
     options. Cap it and let it scroll instead. */
  #providerselect-menu {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* Tool picker button bar - replaces the old #reportselect/#adminselect
     <select> (issue #17 was the width-clipping fix for that dropdown; this
     removes the dropdown entirely in favor of one-tap buttons, better suited
     to this app's iPad-oriented layout). Reuses the app's existing chrome
     blue (rgb(79,129,189)/rgb(55,96,146)/rgb(37,64,97), also used by
     #datepicker_month/#pageselectframe) rather than a new color, so it reads
     as part of the same UI. */
  .tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 4px 0;
  }

  .tool-tab {
    padding: 6px 12px;
    border: 1px solid rgb(79,129,189);
    border-radius: 3px;
    background: white;
    cursor: pointer;
    font-size: 14px;
  }

  .tool-tab:hover {
    background: #eef4fb;
  }

  .tool-tab.selected {
    background: rgb(55,96,146);
    color: white;
    border-color: rgb(37,64,97);
  }


  #datepicker_month {
    min-width: 200px; 
    height: 40px; 
    background-color: rgb(79,129,189); 
    line-height: 40px; 
    text-align: center;
    display: flex;
  }

  #datepicker_grid {
    min-width: 500px;
    height: 40px;
    background-color: rgb(79,129,189);
    line-height: 40px;
    float: left;
    text-align: center;
  }

  /* gridedit.ejs's #gridpicker/#griddatepicker-popup - a datepicker-style
     picker for the grid template's abstract (grid_version, grid_month,
     grid_week, grid_day) coordinates in place of the old plain Week/Day
     <select>s. #gridpicker is a plain readonly text input, sized/positioned
     to match #datepicker1's "click to open a calendar, box shows the current
     selection as text" pattern from clinic.js/publish.js (same bar color/
     layout as clinic.ejs's #datepicker_month too) - but there's no real Date
     underneath so it can't be a real .datepicker(). The popup itself borrows
     jQuery UI's own ui-datepicker/ui-datepicker-header/ui-datepicker-calendar
     classes (see gridedit.ejs) so it reads as the same widget family without
     reimplementing that CSS, but is a static table instead of the widget -
     the widget's month/year grid math doesn't fit a fixed week-1..5 x
     Sun..Sat template. */
  #datepicker_griddate {
    min-width: 200px;
    height: 40px;
    background-color: rgb(79,129,189);
    line-height: 40px;
    text-align: center;
    display: flex;
    position: relative;
  }

  #gridpicker {
    max-width: 190px;
    min-width: 75px;
    text-align: center;
    cursor: pointer;
    background-color: white;
  }

  #griddatepicker-popup {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    width: 230px;
    text-align: left;
    font-size: 0.9em;
  }

  #griddatepicker-popup .ui-datepicker-header {
    display: flex;
    gap: 4px;
    padding: 4px;
  }

  #griddatepicker-popup .ui-datepicker-year,
  #griddatepicker-popup .ui-datepicker-month {
    flex: 1 1 0;
    width: 0;
    font-size: 0.85em;
  }

  #griddatepicker-popup .ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  #griddatepicker-popup .ui-datepicker-calendar th,
  #griddatepicker-popup .ui-datepicker-calendar td {
    text-align: center;
    padding: 2px;
  }

  /* Explicit per-column widths (via <colgroup> in gridedit.ejs) so every
     weekday cell is the same width and the weekend ones read as visibly set
     off from them, rather than table-layout: fixed's default of splitting
     evenly (or auto-layout's content-driven sizing, which happened to come
     out almost-but-not-quite uniform since "Mo"/"We" etc are all 2 chars). */
  .griddatepicker-week-col {
    width: 12%;
    color: #888;
    font-size: 0.85em;
  }

  .griddatepicker-weekday-col {
    width: 14%;
  }

  .griddatepicker-weekend-col {
    width: 9%;
  }

  #griddatepicker-popup .ui-datepicker-calendar td a {
    display: block;
    text-decoration: none;
    padding: 4px 0;
    cursor: pointer;
  }

  #datepicker_day {
   min-width: 150px;
   max-width: 200px; 
   flex-grow: 1;
   height: 40px; 
   background-color: rgb(55,96,146); 
   line-height: 40px;
   float: left; 
   text-align: center;
   display: flex;
  }

  #datepicker_time {
    max-width: 200px;
    min-width: 75px; 
    height: 40px; 
    background-color: rgb(37,64,97); 
    line-height: 40px; 
    float: left; 
    text-align: center;
    flex-grow: 1;
  }

  #datepicker_time-grid {
    min-width: 100px; 
    height: 40px; 
    background-color: rgb(37,64,97); 
    line-height: 40px; 
    float: left; 
    text-align: center;
  }
  #pageselectframe {
    flex-grow: 1;
    min-width: 40px;
    height: 40px;
    background-color: rgb(55,96,146);
    line-height: 40px;
    float: left;
    text-align: center;
  }

  #dev-banner {
    width: 100%;
    height: 100%;
    line-height: 40px;
    background-image: repeating-linear-gradient(
      45deg,
      #f4c400,
      #f4c400 12px,
      #1a1a1a 12px,
      #1a1a1a 24px
    );
    color: #1a1a1a;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow:
      -1px -1px 0 #f4c400, 1px -1px 0 #f4c400,
      -1px 1px 0 #f4c400, 1px 1px 0 #f4c400;
  }

  #datepicker1 {
  max-width: 155px;
  min-width: 75px;
  }
  /* Weekend-clinic marker (issue #229) on #datepicker1's calendar cells - see
     public/shared.js's weekendClinicBeforeShowDay. Reuses the app's existing chrome
     blue (rgb(79,129,189), also used by #datepicker_month/.tool-tab) rather than a
     new color. */
  .weekend-clinic-day a {
    border: 2px solid rgb(79,129,189) !important;
    font-weight: bold;
  }
  input, select, textarea, button{
  font-family:inherit;
  font-size:inherit
  }
  .datepicker_day {
    position: absolute;
  }
  .triangle-left {
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-right: 34px solid rgb(37,64,97);
  border-bottom: 17px solid transparent;
  position: relative;
  }
  .triangle-right {
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-left: 34px solid rgb(37,64,97);
  border-bottom: 17px solid transparent;
  position: relative;
  }
  .triangle-holder {
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  overflow: hidden;
  border: 0px;
  margin: 0px;
  padding: 3px;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  }
  .dateholder {
  max-width: 150px;
  min-width: 75px;
  flex-grow: 1;
  height: 36px;
  float: left;
  border: 0px;
  padding: 0px;
  margin: 0px;
  }
  label {
    display:block;
  }

  label.inline {
    display: inline-block;
    min-width: 200px;
  }
  
  fieldset { 
    padding:0; border:0; margin-top:25px; 
  }
  ul.ui-autocomplete {
    z-index: 1100;
  }
  .doublebooked {
    background: #fef1ec none 50% 50% repeat-x !important;
    border: 1px solid #cd0a0a !important;
  }
  .providerout {
    background: #fef1ec none 50% 50% repeat-x !important;
    border: 1px solid #cd0a0a !important;
  }
  tr.highlight-important > td {
    background-color: yellow !important;
  }
  .highlight-important {
    background-color: yellow !important;
  }
   /*table {
    border-collapse: collapse;
    width: 100%
  }
  td {
    text-align: center;
  }
  tr:nth-child(even) td{
    background-color: #f2f2f2;
  }
  .rowheader {
    transform: rotate(-90deg);
    height: 60px;
    max-width: 29px;
    font-size: 1.1em;
  }
  .rowheadertall {
    transform: rotate(-90deg) translateX(-20px);
    height: 83px;
    max-width: 29px;
    font-size: 1.1em;
  }
  .leftcol {
    text-align: left;
  }
  th {
    text-align: center;
  } */
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .1em .5em !important;
  }
  .ui-tabs .ui-tabs-panel {
    padding: 0px 0px !important;
  }
  .warningitem {
    width: 398px;
  }
  .gcalevent {
    width: 398px;
    float: left;
  }
  .gcalevent-time {
    width: 70px;
    float: left;
  }
  .gcalevent-summary {
    width: 328px;
    float: left;
  }
  .gcalevent-grayedout {
    color: LightGray;
  }
  #schedule-filter {
    width: 400px;
  }
  .sidebar-report-options {
    text-align: center;
    float: center;
    width: 100%;
  }
  #sidebar-top-1-stats {
    padding: 5px;
  }
  #sidebar-top-1-button {
    padding: 5px;
  }
  #sidebar-top-1-schedule {
    padding-top: 5px;
    padding-left: 5px;
  }
  .boldevent {
    font-weight: bold;
  }
  .eventitem-newweek {
    margin-top: 0.5em;
  }
  .onsite {
    color: blue !important;
  }

  /* Pin toggle (U+1F588) for assignment.assignment_fixed (db/migrations/
     005-assignment-fixed.sql) - marks an assignment exempt from grid-break
     release. Corner overlay badge, same shape-over-hue convention as
     ul.clinic.solver-created's gear badge above and .proposalchip's
     accept/reject overlay: hidden by default, shown on hover so the pin
     doesn't visually compete with initials text, and forced visible whenever
     the assignment is actually fixed (.provider.fixed) regardless of hover.
     Gray on a bare hover reveal (nothing committed yet, just showing the
     click target); black once .fixed is actually set, so the two states
     read as "about to pin" vs. "pinned". */
  .provider {
    position: relative;
  }

  .pin-toggle {
    position: absolute;
    top: -3px;
    right: -3px;
    z-index: 3;
    width: 23px;
    height: 23px;
    line-height: 24px;
    text-align: center;
    font-size: 17px;
    cursor: pointer;
    opacity: 0;
    color: #888;
    /* background: #fff; */
    /* border: 1px solid #888; */
    /* border-radius: 50%; */
  }

  .provider:hover .pin-toggle {
    opacity: 1;
  }

  .provider.fixed .pin-toggle {
    opacity: 1;
    color: #000;
  }

  .g-signin2 {
    float: right;    
  }

  #providerselectframe {
    width: 600px;
    height: 40px;
    float: left;
    background-color: rgb(79,129,189); 
    text-align: center;
  }

  #feedback { font-size: 1.4em; }
  #providerframe .ui-selecting.in { background: #fee08f; }
  #providerframe .ui-selecting.out { background: #FECA40; }
  #providerframe .ui-selected.in { background: rgb(255, 219, 134); color: white; }
  #providerframe .ui-selected.out { background: #F39814; color: white; }
  #providerframe {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: scroll;}




  #calframe .ui-selecting { background: #FECA40; }
  #calframe .ui-selected { background: #F39814; color: white; }
  #calframe { margin: 0; padding: 0; flex: 1; min-height: 0; overflow: hidden; }


  .day {
    width: 80px;
    height: 40px;
    display: inline-block;
  }

  .daylabel {
    width: 80px;
    height: 20px;
    display: inline-block;
    text-align: center;}

  .session {
    width: 40px;
    display: inline-block;
    height: 20px;
    text-align: center;
  }


  .providerheader {
    width: 350px;
    height: 40px;
    display: inline-block;
  }

  .providerrow {
    width: 1000px;
    height: 22px;
    display: block;
    overflow: hidden;
  }

  #topproviderrow {
    height: 40px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
  }

  .providerselect {
    width: 350px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  .outdatecontainer {
    display: inline-block;
    width: 600px;
    height: 20px; 
    position: relative;
  }

  .out {
    background-color: lightblue;
    color: rgb(199, 235, 247);
  }

  .session_-1 {
    position: absolute;
    left: 40px;

  }

  .session_0 {
    position: absolute;
    left: 80px;
  }

  .session_1 {
    position: absolute;
    left: 120px;
  }

  .session_2 {
    position: absolute;
    left: 160px;
  }

  .session_3 {
    position: absolute;
    left: 200px;
  }

  .session_4 {
    position: absolute;
    left: 240px;
  }

  .session_5 {
    position: absolute;
    left: 280px;
  }

  .session_6 {
    position: absolute;
    left: 320px;
  }

  .session_7 {
    position: absolute;
    left: 360px;
  }

  .session_8 {
    position: absolute;
    left: 400px;
  }

  .session_9 {
    position: absolute;
    left: 440px;
  }

  .session_10 {
    position: absolute;
    left: 480px;
  }

  .session_-1.out {
    background-color: linear-gradient(to right, white, lightblue);
  }


  .session_10.out {
    background-image: linear-gradient(to left, white, lightblue);
  }

.inactive {
  color: darkgray;  
}


.nav {
  background: #ffffff;
  position:absolute;
  top: 40px;
  left: -300px;
  width: 300px;
  height: 100vh;
  transition: transform 0.7s, opacity 1s;
  transform: translateX(0%);
  opacity: 0;
  z-index: 10;
}

.nav.show {
  transform: translateX(100%);
  opacity: 1;
}

/* jQuery UI's datepicker popup (#ui-datepicker-div, appended to <body> on
   show) sets its own inline z-index dynamically - one more than whatever
   z-index it finds walking up the triggering input's ancestors, which is
   often 0. That left it paintable underneath .solver-created's gear badge
   and .proposal-actions (both z-index:3). !important is required to beat
   that inline style. Kept below .nav (10) so the popup doesn't cover the
   nav drawer if both are open. */
.ui-datepicker {
  z-index: 5 !important;
}

.ui-menu-item {
  font-size: 0.9em;
  line-height: 30px;
  border: none ;
  min-width: 125px;

}

.nav .ui-menu-item-wrapper {
  display: block;
  text-decoration: none;
}

.ui-menu {
  min-width: 200px;
}

.ui-widget-header {
  background: rgb(55,96,146);
  color: white;
  border: none ;

}

.nav > .ui-widget-content {
  border: none ;
}

.list {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  height: inherit;
}

.hamburger {
  position: relative;
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 4px;
  width: 40px;
  height: 33px;
  z-index: 2;
}

.hamburger span {
  position: absolute;
  left: 0px;
  background: #ffffff;
  width: inherit;
  height: 7px;
  transition: transform 0.5s, opacity 0.5s;
}

.hamburger-top-line {
  top: 0px;
}

.hamburger-center-line {
  top: 13px;

}

.hamburger-bottom-line {
  bottom: 0px;
}

.proposalchip {
  position: relative;
  background: #f4f9ff !important;
  border: 1px dashed rgb(79,129,189) !important;
  display: flex !important;
  align-items: center;
  gap: 2px;
  cursor: default;
}

.proposalchip.proposal-flagged {
  background: #fff6e0 !important;
  border-color: #cd8a0a !important;
}

.proposalchip .initials {
  flex-grow: 1;
  font-size: 0.9em;
}

.proposalchip.resolving, .has-proposal.resolving, .solver-newclinicitem.resolving, .solver-proposeditem.resolving, .proposedclinic.resolving {
  opacity: 0.5;
  pointer-events: none;
}

/* A move-type proposal (removes_assignment_id set) deliberately isn't a
   fourth chip color (David is red/green colorblind) - the "⇄" glyph and
   this dashed-border marker on the *source* chip carry the signal by shape
   instead, matching wherever the destination proposal chip's own "⇄" prefix
   (renderProposalChips) points. position:relative here is only needed for
   browsers where the chip's own base rule doesn't already set it. */
.pending-removal {
  position: relative;
  border-style: dashed !important;
}

.pending-removal .initials::before {
  content: "⇄ ";
}

/* Permanent origin marker for a real, accepted clinic that a solver
   new-clinic proposal created (getClinicListV2's from_solver_proposal,
   joined off solverproposal.created_clinic_id) - distinct from the
   .proposedclinic/.proposalchip dashed-blue "still pending" language above,
   which is stripped the moment a proposal resolves. Deliberately shape-only
   (a small corner badge, no fill/border color change on the card itself) so
   it doesn't compete with or get mistaken for the pending-proposal blue or
   flagged-proposal orange treatments - same "shape over hue" reasoning as
   the "*" grid-clinic prefix and "⇄" move marker (moveMarkedInitials in
   clinic.js). */
ul.clinic.solver-created {
  position: relative;
}

ul.clinic.solver-created::before {
    content: "\2699";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 23px;
    height: 23px;
    line-height: 24px;
    text-align: center;
    font-size: 17px;
    background: #fff;
    /* border: 1px solid #888; */
    border-radius: 50%;
    z-index: 3;
}

/* A proposed new PA independent clinic (kind 2) - no clinic_id yet, so it
   isn't a real sortable target (no connectedSortable class - added on
   accept, once it's real). Otherwise it's just a plain ul.clinic box (same
   class, same border/sizing from the shared rules above) - the "this is a
   proposal" signal lives entirely on the owner chip inside
   (buildProposedClinicCard reuses .proposalchip for it directly), matching
   "rectangular box with a chip indicating the clinic owner" per David's
   ask - not a distinct card style of its own. */
.proposedclinic {
  cursor: default;
}

/* Shared accept/reject "box" - a small bordered pill around the two
   buttons. Used wherever a .proposalaccept/.proposalreject pair appears:
   the clinic-card .proposalchip, the unassigned-pool .has-proposal
   overlay, and the run-report's new-clinic/"Ready to Accept" list items.
   On the two small fixed-size chip contexts (.proposalchip, .has-proposal)
   it's pinned to the bottom-right corner as an overlay badge rather than
   sitting inline - David's preferred look, keeps the chip's own text from
   getting squeezed by the buttons. The run-report's list rows are full-
   width text lines, not small chips, so .proposal-actions there stays
   inline (the default below), trailing the row vertically centered. */
.proposal-actions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgb(79,129,189);
  border-radius: 3px;
  line-height: 1;
}

/* Badge floats slightly outside the chip's bottom-right corner (David's
   preferred look). z-index is required, not cosmetic: .initials (the chip's
   text span) is a flex item of .proposalchip/.has-proposal (display:flex),
   and flex items paint according to z-index as if position:relative per
   the flexbox spec, even though .initials itself is position:static. The
   unrelated .initials{z-index:2} rule below (for the throbber-in-progress
   overlay elsewhere) was therefore outranking this badge's default
   z-index:auto and silently absorbing clicks meant for the accept/reject
   buttons underneath it - found 2026-07-09 debugging exactly that
   ("buttons produce no effect") on a placeholder-substitution proposal
   chip. #sortable1/.unassigned_list/.clinic li are now uniformly 80px
   (2026-07-09) so this positioning has the same slack in every context. */
.proposalchip .proposal-actions, .has-proposal .proposal-actions {
  position: absolute;
  bottom: -3px;
  right: -3px;
  z-index: 3;
}

.proposal-actions button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 3px;
  font-size: 0.9em;
  line-height: 1.4;
}

.proposal-actions .proposalaccept {
  color: rgb(60, 141, 74);
}

.proposal-actions .proposalreject {
  color: firebrick;
}

/* Provider chip sitting in the unassigned pool that also has a pending
   solver proposal targeting some clinic - same dashed-border language as
   .proposalchip, plus a small accept/reject overlay so it can be resolved
   right where an admin is already scanning for free providers. */
.has-proposal {
  position: relative;
  border: 1px dashed rgb(79,129,189) !important;
  background: #f4f9ff !important;
}

.has-proposal.proposal-flagged {
  border-color: #cd8a0a !important;
  background: #fff6e0 !important;
}

/* Cloned chip animated from its source position (unassigned pool or the
   clinic-card proposal chip) to the destination clinic on accept - mimics
   the manual drag-and-drop experience instead of an instant DOM swap. */
.flying-chip {
  /* absolute (not fixed) - jQuery's .offset() is document-relative, and the
     ghost is appended straight to <body>, so absolute positioning lines up
     with those coordinates regardless of scroll position. */
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  list-style: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0 !important;
}

.solver-warning-marker {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 3px;
}

.travel-warning-marker {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 3px;
}

#solver-controls {
  padding: 5px;
}

.solver-controls-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 6px;
}

#solver-controls label {
  display: inline-block;
  padding-right: 5px;
}

#solver-controls input {
  margin-right: 8px;
}

/* Action buttons live in a 2-up grid rather than a nowrap flex row: the
   sidebar is capped at 447px with overflow-x hidden, so a row of long-named
   buttons used to run off the right edge and clip the last one out of reach
   entirely (Grid-Break). The grid can't overflow - buttons shrink and their
   labels wrap instead. Labels are kept short; the full explanation of what
   each one does lives in its title tooltip. */
.solver-actiongroup {
  margin-bottom: 8px;
}

.solver-actiongroup-label {
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgb(79, 129, 189);
  margin-bottom: 3px;
}

.solver-actiongroup-label span {
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: #777;
}

.solver-actiongrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.solver-actiongrid button {
  width: 100%;
  min-height: 28px;
  padding: 4px 6px;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
}

/* Clean Placeholders/PA Supervisors (Prepare/Finalize) write assignments
   straight to the schedule with no accept step, unlike everything in Solve -
   tint them so that's readable at a glance. */
.solver-actiongrid button.solver-btn-write {
  border-color: #c9a227;
  background-color: #fdf6dd;
}

.solver-actiongrid button.solver-btn-write:hover:enabled {
  background-color: #f8ecc0;
}

/* Dev-only "Clear + Populate from Grid" (2026-07-16): wipes the whole range
   before rewriting it, one step more destructive than a plain write - red
   instead of solver-btn-write's amber so it doesn't read as just another
   Prepare/Finalize action. */
.solver-actiongrid button.solver-btn-danger {
  border-color: #c0392b;
  background-color: #fbe0dd;
}

.solver-actiongrid button.solver-btn-danger:hover:enabled {
  background-color: #f5c6c0;
}

button.solver-btn-minor {
  margin-left: auto;
  font-size: 0.85em;
  padding: 2px 6px;
  cursor: pointer;
}

/* Nested sub-headings inside the Solve section's options (Fix Assignments/
   Clinics, Other) - same look as .solver-actiongroup-label, just tighter
   margins since they sit between two option grids rather than opening a
   whole section. */
.solver-actiongroup-sublabel {
  margin-top: 6px;
  margin-bottom: 3px;
}

/* The two "Options" quick-preset links (set the checkboxes below without
   submitting) live in the same muted-gray label span as every other
   .solver-actiongroup-label's descriptive text - style them to still read
   as clickable within that. */
.solver-actiongroup-label span a {
  color: rgb(79, 129, 189);
  text-decoration: none;
}

.solver-actiongroup-label span a:hover {
  text-decoration: underline;
}

/* Checkboxes wrap rather than clip, same reasoning as .solver-actiongrid
   (447px capped sidebar, overflow-x hidden). */
.solver-optionsgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 0.9em;
}

.solver-optionsgrid label {
  white-space: nowrap;
  cursor: pointer;
}

.solver-optionsgrid input[type='checkbox'] {
  margin-right: 2px;
  vertical-align: middle;
}

#solver-progressline {
  padding-top: 4px;
  font-style: italic;
}

#solver-progressline span:not(:empty) {
  margin-right: 6px;
}

#solver-run-report {
  padding: 5px;
}

.solver-section-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-top: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  user-select: none;
}

.solver-section-header:hover {
  background: #f4f9ff;
}

.solver-acceptgroup {
  margin-left: auto;
  font-weight: normal;
  font-size: 0.85em;
}

.solver-toggle-icon {
  display: inline-block;
  width: 1em;
  color: #888;
}

.solver-run-summary {
  font-weight: bold;
}

.solver-run-options {
  font-size: 0.85em;
  color: #777;
}

.solver-warningitem, .solver-staleitem {
  padding: 3px 0;
}

.solver-stale-badge {
  display: inline-block;
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #f4f9ff;
  border: 1px solid rgb(79,129,189);
  white-space: nowrap;
}

.solver-stale-badge.solver-stale-pending {
  background: #eaf7ec;
  border-color: rgb(60, 141, 74);
  color: rgb(60, 141, 74);
}

.solver-stale-badge.solver-stale-noreplacement {
  background: #fff6e0;
  border-color: #cd8a0a;
  color: #8a5c00;
}

.solver-navitem {
  cursor: pointer;
}

.solver-navitem:hover {
  background: #f4f9ff;
}

.solver-newclinicitem, .solver-proposeditem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dashed #eee;
}

.solver-newclinicitem.proposal-flagged, .solver-proposeditem.proposal-flagged {
  background: #fff6e0;
}

/* :not(.proposal-actions) matters: without it this also grabbed the
   accept/reject button span, stretching it to fill the row's leftover
   width. Most visible on "Proposed New PA Clinics" (2026-07-16 bug report)
   where the text span - a short "<date> AM/PM" - leaves a lot of extra
   width for the two spans to split evenly; the other sections' longer
   proposal_reason text mostly hid the same bug. */
.solver-newclinicitem span:not(.proposal-actions), .solver-proposeditem span:not(.proposal-actions) {
  flex-grow: 1;
}

.solver-flagbadge {
  display: inline-block;
  flex-grow: 0;
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #fff6e0;
  border: 1px solid #cd8a0a;
  color: #8a5c00;
  white-space: nowrap;
}

.solver-bd-scroll {
  overflow-x: auto;
}

table.solver-breakdown {
  border-collapse: collapse;
  font-size: 0.85em;
  width: 100%;
}

table.solver-breakdown th, table.solver-breakdown td {
  padding: 2px 5px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

table.solver-breakdown th {
  text-align: center;
  color: #555;
  font-weight: normal;
  border-bottom: 1px solid #ccc;
  cursor: help;
}

table.solver-breakdown th:first-child {
  text-align: left;
}

/* Issue #226: breakdown rows load the provider's Info tab on click, same
   as .provider-stat/.provider elsewhere - give them the same affordance.
   Rows are appended directly to <table> with no <tbody> wrapper (built via
   jQuery DOM append, not markup parsing), so scope by data-provider_id
   rather than "tbody tr" to exclude the header row. */
table.solver-breakdown tr[data-provider_id] {
  cursor: pointer;
}

table.solver-breakdown tr[data-provider_id]:hover {
  background: #f4f9ff;
}

.solver-bd-name {
  text-align: left;
}

.solver-bd-role {
  color: #888;
  font-size: 0.9em;
}

.solver-bd-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.solver-bd-clin {
  font-weight: bold;
}

.solver-bd-over {
  background: #fdecea;
  color: #a5271a;
}

.solver-bd-under {
  background: #fff6e0;
  color: #8a5c00;
}

.solver-bd-unassigned {
  color: #a5271a;
  font-weight: bold;
}