/*
 * promote.css
 * PROMOTE eSYSDM — Brand styles and CSS variables
 * Complements Bootstrap 5.3
 * Based on PROMOTE study logo colors
 */

/* ================================================
   CSS VARIABLES
   ================================================ */
:root {
  /* Brand colors */
  --promote-teal:            #4BBFB0;
  --promote-teal-dark:       #33A99A;
  --promote-teal-darker:     #1F8F81;
  --promote-teal-light:      #A8E3DC;
  --promote-teal-bg:         #EBF8F6;

  --promote-purple:          #9B6BB5;
  --promote-purple-dark:     #7E52A0;
  --promote-purple-darker:   #613D8B;
  --promote-purple-light:    #CDB3DC;
  --promote-purple-bg:       #F4EEF9;

  --promote-charcoal:        #4A4A4A;
  --promote-charcoal-light:  #6C757D;

  /* UI surfaces */
  --promote-bg-page:         #F4F6F8;
  --promote-bg-card:         #FFFFFF;
  --promote-bg-input:        #FFFFFF;

  /* Borders */
  --promote-border:          #DEE2E6;
  --promote-border-focus:    #4BBFB0;

  /* Semantic */
  --promote-warning:         #F0AD4E;
  --promote-warning-bg:      #FFFDF5;
  --promote-warning-border:  #F0AD4E;
  --promote-error:           #DC3545;
  --promote-error-bg:        #FDF3F4;
  --promote-success:         #4BBFB0;
  --promote-success-bg:      #EBF8F6;
  --promote-info:            #9B6BB5;
  --promote-info-bg:         #F4EEF9;

  /* Typography */
  --promote-font:            'Segoe UI', system-ui, -apple-system, sans-serif;
  --promote-font-size-base:  15px;
  --promote-line-height:     1.6;
  --promote-text-primary:    #4A4A4A;
  --promote-text-secondary:  #6C757D;
  --promote-text-muted:      #9EA5AE;

  /* Radius */
  --promote-radius-sm:       6px;
  --promote-radius-md:       8px;
  --promote-radius-lg:       12px;
  --promote-radius-pill:     99px;

  /* Shadows */
  --promote-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
  --promote-shadow-md:       0 2px 8px rgba(0, 0, 0, 0.08);
}


/* ================================================
   BASE
   ================================================ */
body {
  background-color: var(--promote-bg-page);
  color: var(--promote-text-primary);
  font-family: var(--promote-font);
  font-size: var(--promote-font-size-base);
  line-height: var(--promote-line-height);
}


/* ================================================
   BOOTSTRAP OVERRIDES
   ================================================ */

/* Primary = teal */
.btn-primary {
  background-color: var(--promote-teal);
  border-color: var(--promote-teal);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--promote-teal-dark);
  border-color: var(--promote-teal-dark);
  color: #fff;
}
.btn-primary:active {
  background-color: var(--promote-teal-darker);
  border-color: var(--promote-teal-darker);
}

/* Outline primary */
.btn-outline-primary {
  color: var(--promote-teal);
  border-color: var(--promote-teal);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--promote-teal);
  border-color: var(--promote-teal);
  color: #fff;
}

/* Secondary = purple */
.btn-secondary {
  background-color: var(--promote-purple);
  border-color: var(--promote-purple);
  color: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--promote-purple-dark);
  border-color: var(--promote-purple-dark);
  color: #fff;
}

.btn-outline-secondary {
  color: var(--promote-charcoal-light);
  border-color: var(--promote-border);
}
.btn-outline-secondary:hover {
  background-color: var(--promote-bg-page);
  border-color: var(--promote-charcoal-light);
  color: var(--promote-charcoal);
}

/* Progress bar */
.progress-bar {
  background-color: var(--promote-teal);
}

/* Form focus rings */
.form-control:focus,
.form-select:focus {
  border-color: var(--promote-border-focus);
  box-shadow: 0 0 0 3px rgba(75, 191, 176, 0.2);
}

/* Links */
a {
  color: var(--promote-teal-dark);
}
a:hover {
  color: var(--promote-teal-darker);
}

/* Badges */
.badge.bg-primary {
  background-color: var(--promote-teal) !important;
}
.badge.bg-secondary {
  background-color: var(--promote-purple) !important;
}

/* readonly fields - dropped from Bootstrap 5.2.2 */
.form-control[readonly],
.form-select-disabled {
    background-color: #e9ecef;
    opacity: 1;
}

.form-select-disabled {
    cursor: not-allowed;
}


/* ================================================
   CARDS
   ================================================ */
.promote-card {
  background: var(--promote-bg-card);
  border: 1px solid var(--promote-border);
  border-radius: var(--promote-radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--promote-shadow-sm);
}

.promote-card.warning {
  border-color: var(--promote-warning-border);
  background-color: var(--promote-warning-bg);
}

.promote-card.error {
  border-color: var(--promote-error);
  background-color: var(--promote-error-bg);
}


/* ================================================
   INSTRUCTION / CALLOUT BOXES
   ================================================ */
.promote-instruction {
  background: var(--promote-teal-bg);
  border-left: 4px solid var(--promote-teal);
  border-radius: var(--promote-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--promote-teal-darker);
  line-height: 1.5;
}

.promote-callout-purple {
  background: var(--promote-purple-bg);
  border-left: 4px solid var(--promote-purple);
  border-radius: var(--promote-radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--promote-purple-darker);
  line-height: 1.5;
}


/* ================================================
   LIKERT TOGGLE BUTTONS
   ================================================ */
.likert-group {
  display: flex;
  gap: 6px;
}

.likert-option {
  flex: 1;
}

.likert-option input[type="radio"] {
  display: none;
}

.likert-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  cursor: pointer;
  border: 1px solid var(--promote-border);
  border-radius: var(--promote-radius-md);
  padding: 8px 4px 7px;
  font-size: 0.75rem;
  color: var(--promote-text-secondary);
  text-align: center;
  line-height: 1.3;
  background: var(--promote-bg-page);
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
  min-height: 62px;
  width: 100%;
  user-select: none;
}

.likert-option label .likert-val {
  font-size: 1rem;
  font-weight: 600;
  color: var(--promote-charcoal);
  line-height: 1;
}

.likert-option input:checked + label {
  background: var(--promote-teal-bg);
  border-color: var(--promote-teal);
  color: var(--promote-teal-darker);
}

.likert-option input:checked + label .likert-val {
  color: var(--promote-teal-darker);
}

.likert-option label:hover {
  background: #E9ECEF;
  border-color: #ADB5BD;
}

.likert-option input:checked + label:hover {
  background: var(--promote-teal-light);
}

/* ================================================
   ASP RadioButtonList → Likert Toggle Button Style
   Apply .rbl-likert to the asp:RadioButtonList
   ================================================ */
table.rbl-likert {
    width: 100%;
    border-collapse: separate;
    border-spacing: 6px 0;
}

    table.rbl-likert tbody tr td {
        width: 1%;
        padding: 0;
    }

    table.rbl-likert input[type="radio"] {
        display: none;
    }

    table.rbl-likert td label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 1px solid var(--promote-border);
        border-radius: var(--promote-radius-md);
        padding: 10px 6px;
        font-size: 0.75rem;
        color: var(--promote-text-secondary);
        text-align: center;
        line-height: 1.3;
        background: var(--promote-bg-page);
        transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
        min-height: 62px;
        min-width: 80px;
        width: 100%;
        user-select: none;
    }

    table.rbl-likert input:checked + label {
        background: var(--promote-teal-bg);
        border-color: var(--promote-teal);
        color: var(--promote-teal-darker);
        font-weight: 600;
    }

    table.rbl-likert td label:hover {
        background: #e9ecef;
        border-color: #adb5bd;
    }

    table.rbl-likert input:checked + label:hover {
        background: var(--promote-teal-light);
    }


/* ================================================
   SURVEY PAGE LAYOUT
   ================================================ */
.survey-wrapper {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1rem 4rem;
}

.survey-header {
  background: var(--promote-bg-card);
  border: 1px solid var(--promote-border);
  border-radius: var(--promote-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--promote-shadow-sm);
}

.survey-header h1 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--promote-charcoal);
  margin-bottom: 0.25rem;
}

.survey-header p {
  font-size: 0.875rem;
  color: var(--promote-text-secondary);
  margin-bottom: 0;
}

.progress-label {
  font-size: 0.8rem;
  color: var(--promote-text-secondary);
  margin-bottom: 4px;
}

.q-card {
  background: var(--promote-bg-card);
  border: 1px solid var(--promote-border);
  border-radius: var(--promote-radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--promote-shadow-sm);
}

.q-card.unanswered {
  border-color: var(--promote-warning-border);
  background-color: var(--promote-warning-bg);
}

.q-text {
  font-size: 0.9375rem;
  color: var(--promote-text-primary);
  margin-bottom: 0.875rem;
  line-height: 1.5;
}

.q-num {
  color: var(--promote-text-muted);
  font-size: 0.8125rem;
  margin-right: 4px;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
}


/* ================================================
   NAVBAR
   ================================================ */
.promote-navbar {
  background-color: var(--promote-bg-card);
  border-bottom: 1px solid var(--promote-border);
  box-shadow: var(--promote-shadow-sm);
}

.promote-navbar .navbar-brand img {
  height: 36px;
}

/* Header / footer backgrounds */
.study-bg-header {
    background-color: var(--promote-bg-card) !important;
    border-bottom: 1px solid var(--promote-border);
}

.study-bg-footer {
    background-color: var(--promote-bg-page) !important;
    border-top: 1px solid var(--promote-border);
}

/* ================================================
   UTILITY CLASSES
   ================================================ */
.text-teal       { color: var(--promote-teal) !important; }
.text-purple     { color: var(--promote-purple) !important; }
.bg-teal         { background-color: var(--promote-teal-bg) !important; }
.bg-purple       { background-color: var(--promote-purple-bg) !important; }
.border-teal     { border-color: var(--promote-teal) !important; }
.border-purple   { border-color: var(--promote-purple) !important; }

/* Utility highlight backgrounds */
.bg-lightyellow {
    background-color: lightyellow !important;
}

.bg-lightcyan {
    background-color: lightcyan !important;
}

.bg-lightgray {
    background-color: lightgray !important;
}

/* Primary teal variants */
.study-bg-teal {
    background-color: var(--promote-teal) !important;
}

.study-bg-teal-light {
    background-color: var(--promote-teal-light) !important;
}

.study-bg-teal-bg {
    background-color: var(--promote-teal-bg) !important;
}

/* Purple variants */
.study-bg-purple {
    background-color: var(--promote-purple) !important;
}

.study-bg-purple-light {
    background-color: var(--promote-purple-light) !important;
}

.study-bg-purple-bg {
    background-color: var(--promote-purple-bg) !important;
}

/* Legacy orange class mappings → teal equivalents
   Keeps any existing markup using these classes working */
.study-bg-orange-20l {
    background-color: var(--promote-teal-light) !important;
}

.study-bg-orange-10l {
    background-color: var(--promote-teal) !important;
}

.study-bg-orange-light {
    background-color: var(--promote-teal-light) !important;
}

.study-bg-orange-megalight {
    background-color: var(--promote-teal-bg) !important;
}


/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 480px) {
  .likert-option label {
    font-size: 0.6875rem;
    padding: 7px 2px 6px;
    min-height: 58px;
  }
  .likert-option label .likert-val {
    font-size: 0.9rem;
  }
  .likert-group {
    gap: 4px;
  }
}

/* ================================================
   MENU COLLAPSE TOGGLE BUTTON
   ================================================ */
.menu-collapse-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--promote-teal);
    border: none;
    border-radius: var(--promote-radius-md);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.2s ease;
}

    .menu-collapse-btn:hover {
        background-color: var(--promote-teal-dark);
    }

    .menu-collapse-btn i {
        font-size: 1.25rem;
        transition: transform 0.2s ease;
    }

    /* Rotate chevron when menu is expanded */
    .menu-collapse-btn[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

/* ================================================
   MENU ICON BUTTONS
   ================================================ */
.menu-icon-btn {
    width: 128px;
    height: 128px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--promote-teal);
    border: none;
    border-radius: var(--promote-radius-md);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s ease;
    padding: 8px;
    text-decoration: none;
}

.menu-icon-btn:hover,
.menu-icon-btn:focus {
    background-color: var(--promote-teal-dark);
    color: #fff;
    outline: none;
}

.menu-icon-btn:active {
    background-color: var(--promote-teal-darker);
}

.menu-icon-btn i {
    font-size: 56px;
    line-height: 1;
}

.menu-icon-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.2;
    color: #fff;
}

.menu-icon-btn:not(.dropdown-toggle)::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute;
    bottom: 6px;
    right: 8px;
}

.menu-icon-btn.dropdown-toggle::after {
    position: absolute;
    bottom: 6px;
    right: 8px;
}

.menu-icon-btn {
    position: relative;
}

/* Alert variant (Query Portal Alert, Developer Tools alert) */
.menu-icon-btn--alert {
    background-color: var(--promote-teal);
}

.menu-icon-alert-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-icon-alert-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 18px;
    color: #fff;
    background-color: var(--promote-error);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.menu-icon-alert-badge i {
    font-size: 14px;
}

/* ================================================
   OFFCANVAS NAV — promote-offcanvas-nav
   ================================================ */

/* Offcanvas panel width */
#promoteOffcanvasMenu {
    width: 280px;
}

/* Full-height scrollable nav */
.promote-offcanvas-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Nav group — wrapper for each item + optional submenu */
.promote-nav-group {
    border-bottom: 1px solid var(--promote-border);
}

/* Top-level nav item — single action or toggle */
.promote-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    color: var(--promote-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .promote-nav-item:hover,
    .promote-nav-item:focus {
        background-color: var(--promote-teal-bg);
        color: var(--promote-teal-darker);
        outline: none;
        text-decoration: none;
    }

    /* Active/expanded state */
    .promote-nav-item.promote-nav-toggle:not(.collapsed) {
        background-color: var(--promote-teal-bg);
        color: var(--promote-teal-darker);
    }

/* Alert variant */
.promote-nav-item--alert {
    color: var(--promote-error);
}

    .promote-nav-item--alert:hover {
        background-color: var(--promote-error-bg);
        color: var(--promote-error);
    }

/* Icon */
.promote-nav-icon {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    color: var(--promote-teal);
}

.promote-nav-item--alert .promote-nav-icon {
    color: var(--promote-error);
}

/* Chevron — rotates when expanded */
.promote-nav-chevron {
    font-size: 0.7rem;
    color: var(--promote-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.promote-nav-item.promote-nav-toggle:not(.collapsed) .promote-nav-chevron {
    transform: rotate(180deg);
}

/* Submenu */
.promote-nav-submenu {
    background-color: var(--promote-bg-page);
    border-top: 1px solid var(--promote-border);
}

/* Subitem */
.promote-nav-subitem {
    display: block;
    width: 100%;
    padding: 0.6rem 1.25rem 0.6rem 2.75rem;
    background: none;
    border: none;
    color: var(--promote-text-secondary);
    font-size: 0.85rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .promote-nav-subitem:hover,
    .promote-nav-subitem:focus {
        background-color: var(--promote-teal-bg);
        color: var(--promote-teal-darker);
        outline: none;
        text-decoration: none;
    }

/* Alert badge within nav item */
.promote-nav-alert-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.promote-nav-alert-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 10px;
    color: #fff;
    background-color: var(--promote-error);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Navbar-sized trigger — smaller than standalone version */
.navbar .menu-collapse-btn {
    width: 36px;
    height: 36px;
}