/* -----------------------------------------------------------------------------
   Define custom properties (formerly $gray* Sass variables)
   ----------------------------------------------------------------------------- */
   :root {
    --gray-medium-light: #eaeaea; /* was $grayMediumLight */
    --gray-darker:       #222;    /* was $grayDarker */
    --gray-dark:         #333;    /* was $grayDark */
    --gray:              #555;    /* was $gray */
    --gray-light:        #777;    /* was $grayLight */
    --gray-lighter:      #eee;    /* was $grayLighter */
  }
  
  /* 
     There's no direct equivalent of @mixin box_sizing here,
     so just inline box-sizing: border-box where needed 
  */
  
  /* -----------------------------------------------------------------------------
     UNIVERSAL
     ----------------------------------------------------------------------------- */
  html {
    overflow-y: scroll;
  }
  
  section {
    overflow: auto;
  }
  
  textarea {
    resize: vertical;
  }
  
  /* Flatten SCSS nesting:
     .center h1 { margin-bottom:10px; }
  */
  .center {
    text-align: center;
  }
  .center h1 {
    margin-bottom: 10px;
  }
  
  /* -----------------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------------- */
  h1, h2, h3, h4, h5, h6 {
    line-height: 1;
  }
  
  h1 {
    font-size: 3em;
    letter-spacing: -2px;
    margin-bottom: 30px;
    text-align: center;
  }
  
  h2 {
    font-size: 1.2em;
    letter-spacing: -1px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: normal;
    color: var(--gray-light);
  }
  
  p {
    font-size: 1.1em;
    line-height: 1.7em;
  }
  
  /* -----------------------------------------------------------------------------
     HEADER
     ----------------------------------------------------------------------------- */
  #logo {
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
    line-height: 1;
  }
  #logo:hover {
    color: var(--gray-light);
    text-decoration: none;
  }
  
  /* -----------------------------------------------------------------------------
     FOOTER
     ----------------------------------------------------------------------------- */
  footer {
    margin-top: 45px;
    padding-top: 5px;
    border-top: 1px solid var(--gray-medium-light);
    color: var(--gray-light);
  }
  
  footer a {
    color: var(--gray);
  }
  footer a:hover {
    color: var(--gray-darker);
  }
  
  footer small {
    float: left;
  }
  
  footer ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  footer ul li {
    float: left;
    margin-left: 10px;
  }
  
  /* -----------------------------------------------------------------------------
     MISCELLANEOUS
     ----------------------------------------------------------------------------- */
  /* debug_dump was using @include box_sizing -- just inline box-sizing */
  .debug_dump {
    clear: both;
    float: left;
    width: 100%;
    margin-top: 45px;
    box-sizing: border-box;
  }
  
  aside section {
    padding: 10px 0;
    border-top: 1px solid var(--gray-lighter);
  }
  
  aside section:first-child {
    border: 0;
    padding-top: 0;
  }
  
  aside section span {
    display: block;
    margin-bottom: 3px;
    line-height: 1;
  }
  
  aside section h1 {
    font-size: 1.4em;
    text-align: left;
    letter-spacing: -1px;
    margin-bottom: 3px;
    margin-top: 0px;
  }
  
  .gravatar {
    float: left;
    margin-right: 10px;
  }
  
  /* forms
     (Commented out in SCSS; keep or remove as needed)
     input, textarea, select, .uneditable-input {
       border: 1px solid #bbb;
       width: 100%;
       margin-bottom: 15px;
       box-sizing: border-box;
     }
     input {
       height: auto !important;
     }
  */
  
  #error_explanation {
    color: #f00;
  }
  #error_explanation ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
  
  /* -----------------------------------------------------------------------------
     .btn-* GRADIENT OVERRIDES (ORIGINALLY FOR BOOTSTRAP 3)
     ----------------------------------------------------------------------------- */
  /* 
     These will partially override Bootstrap 5’s button styles if loaded AFTER
     the CDN. Keep them ONLY if you want classic gradient looks. 
  */
  .btn-primary {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #08c, #04c);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
    background-image: -webkit-linear-gradient(top, #08c, #04c);
    background-image: -o-linear-gradient(top, #08c, #04c);
    background-image: linear-gradient(to bottom, #08c, #04c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
    border-color: #0044cc #0044cc #002b80;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }
  
  .btn-info {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #49afcd;
    background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
    background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
    background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF5BC0DE', endColorstr='#FF2F96B4', GradientType=0);
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }
  
  .btn-danger {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #da4f49;
    background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
    background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
    background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEE5F5B', endColorstr='#FFBD362F', GradientType=0);
    border-color: #bd362f #bd362f #802420;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }
  
  .btn-success {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #5bb75b;
    background-image: -moz-linear-gradient(top, #62c462, #51a351);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
    background-image: -webkit-linear-gradient(top, #62c462, #51a351);
    background-image: -o-linear-gradient(top, #62c462, #51a351);
    background-image: linear-gradient(to bottom, #62c462, #51a351);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF62C462', endColorstr='#FF51A351', GradientType=0);
    border-color: #51a351 #51a351 #387038;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }
  
  .btn-warning {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #faa732;
    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: -o-linear-gradient(top, #fbb450, #f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFBB450', endColorstr='#FFF89406', GradientType=0);
    border-color: #f89406 #f89406 #ad6704;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  }
  
  /* -----------------------------------------------------------------------------
     LAYOUT / MISC
     ----------------------------------------------------------------------------- */
  
  /*
     #logo was duplicated above, but we'll leave this in 
     if you specifically want it repeated or remove it if it's truly a duplicate.
     (In your original SCSS, #logo was declared twice. Probably remove one.)
  */
  #logo {
    float: left;
    margin-right: 10px;
    font-size: 1.7em;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding-top: 9px;
    font-weight: bold;
    line-height: 1;
  }
  
  /* .users index list style */
  .users {
    list-style: none;
    margin: 0;
  }
  
  .users li {
    overflow: auto;
    padding: 10px 0;
    border-top: 1px solid var(--gray-lighter);
  }
  
  .users li:last-child {
    border-bottom: 1px solid var(--gray-lighter);
  }

  /* Example: Force alerts to use older-style colors */
  .alert-success {
    --bs-alert-bg: #cce5d3;  /* or even #b8dfc1 for a deeper green */
    --bs-alert-border-color: #a8d7ae;
    --bs-alert-color: #155724;
  }

.alert-info {
  --bs-alert-bg: #d1ecf1;
  --bs-alert-border-color: #bee5eb;
  --bs-alert-color: #0c5460;
}

.alert-warning {
  --bs-alert-bg: #fff3cd;
  --bs-alert-border-color: #ffeeba;
  --bs-alert-color: #856404;
}

.alert-danger, .alert-error {
  --bs-alert-bg: #f49797;       /* A bolder red/pink shade */
  --bs-alert-border-color: #f07474;
  --bs-alert-color: #621a1e;    /* Darker text to contrast more */
}

/* -----------------------------------------------------------------------------
   ACTION BUTTONS BAR (home page schedule buttons)
   ----------------------------------------------------------------------------- */
/* On narrow screens, make action buttons full-width for a cleaner stacked look.
   On medium+ screens, revert to auto-width and constrain the edit area. */
@media (min-width: 768px) {
  .actions-bar .btn {
    width: auto !important;
  }
  .actions-bar .edit-schedule-action {
    max-width: 20rem;
  }
}