/* =========================================================
   SongU Modern Shared Styles
   Reusable visual language for Locker, Courses, FAQ, Pitching,
   admin lists, and other modernized SongU pages.
   ========================================================= */

/* =========================================================
   1. GENERAL HELPERS
   ========================================================= */

.inline-elements,
.su-inline-elements {
    display: inline-flex;
    align-items: center;
}

.su-muted-text {
    color: #666666;
}

.su-maroon {
    color: #800000;
}

.su-hidden-fields,
.su-hidden-controls {
    display: none;
}

/* =========================================================
   2. SYSTEM / ERROR / INFO / EMPTY MESSAGES
   ========================================================= */

.su-system-message,
.locker-system-message {
    background: #fff4f4;
    border: 1px solid #e2caca;
    border-left: 5px solid #990000;
    color: #333333;
    padding: 8px 14px;
    margin: 12px 0 6px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.25;
    max-width: 980px;
    box-sizing: border-box;
}

    .su-system-message b,
    .su-system-message strong,
    .locker-system-message b,
    .locker-system-message strong {
        color: #800000;
    }

.su-info-message {
    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #800000;
    color: #333333;
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.35;
    box-sizing: border-box;
}

/* Shared validation summary box */

.validationsummary {
    background: #fffafa;
    border: 1px solid #e2caca;
    border-left: 5px solid #990000;
    color: #800000;
    padding: 12px 16px;
    margin: 0 0 18px 0;
    border-radius: 6px;
    font-size: 13px !important;
    line-height: 1.35 !important;
    box-sizing: border-box;
}

.validationheader {
    font-size: 14px !important;
    font-weight: bold;
    color: #222222;
    margin-bottom: 6px;
    background: transparent;
    border-bottom: none;
}

.validationsummary ul,
.validationsummary li {
    font-size: 14px !important;
    line-height: 1.35 !important;
}

.validationsummary ul {
    margin: 6px 0 0 18px;
    padding: 0;
}

.validationsummary li {
    margin-bottom: 2px;
}

.su-empty-message {
    margin: 14px 0;
    padding: 10px 14px;
    border-radius: 6px;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    color: #555555;
    line-height: 1.35;
    box-sizing: border-box;
}

/* =========================================================
   3. SHARED LINKS / ACTION LINKS
   ========================================================= */

.su-primary-link,
.songLockerPrimaryLink {
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
    color: #800000;
}

.su-action-links a,
.su-action-link,
.songLockerActions a,
.songLockerWebsiteInline a,
.songLockerStyledLink {
    font-weight: normal;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
    padding: 1px 3px;
    border-radius: 4px;
    color: #800000;
}

    .su-primary-link:hover,
    .su-action-links a:hover,
    .su-action-link:hover,
    .songLockerPrimaryLink:hover,
    .songLockerActions a:hover,
    .songLockerWebsiteInline a:hover,
    .songLockerStyledLink:hover {
        text-decoration: underline;
        color: #ffffff;
        background-color: #800000;
    }

.su-action-placeholder,
.songLockerActionPlaceholder {
    color: #888888;
    font-style: italic;
    cursor: default;
}

.su-action-sep,
.songLockerActionSep {
    color: #999999;
    margin: 0 8px;
}

/* Shared disabled/help action link.
   Added from pitchingActivityNew.aspx modernization. */

.su-disabled-action-link,
.su-disabled-action-link:link,
.su-disabled-action-link:visited {
    color: #666666 !important;
    background: transparent !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    text-underline-offset: 3px;
    cursor: help;
}

    .su-disabled-action-link:hover {
        color: #800000 !important;
        background: transparent !important;
        text-decoration: underline !important;
        text-decoration-style: dotted !important;
        text-underline-offset: 3px;
    }

.su-helper-link,
.su-helper-link:link,
.su-helper-link:visited {
    color: #222222 !important;
    background: transparent;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: help;
}

    .su-helper-link:hover {
        color: #800000 !important;
        background: transparent !important;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 3px;
    }

/* =========================================================
   4. SORT / FILTER ROWS
   ========================================================= */

.su-sort-row,
.songLockerSortRow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.su-sort-label,
.songLockerSortLabel {
    font-weight: bold;
}

.su-sort-row select,
.songLockerSortRow select {
    min-width: 260px;
    padding: 4px;
    font-size: 14px;
}

.su-sort-button,
.songLockerSortButton {
    background-color: #800000;
    color: #ffffff;
    border: 1px solid #650000;
    padding: 6px 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
}

    .su-sort-button:hover,
    .songLockerSortButton:hover {
        background-color: #4f0000;
    }

/* =========================================================
   5. LISTS / CARDS
   ========================================================= */

.su-card-list,
.class-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

    .su-list-card,
    .class-list li.group {
        list-style: none;
        margin: 0 0 7px 0;
        padding: 8px 14px;
        background: #f7f7f7;
        border-left: 4px solid #990000;
        border-radius: 6px;
        box-sizing: border-box;
    }

        .su-list-card-odd,
        .class-list li.group.lockerCardOdd {
            background: #f8f8f8 !important;
        }

        .su-list-card-even,
        .class-list li.group.lockerCardEven {
            background: #ffffff !important;
        }

/* Generic modern record/card helpers */

.su-record-card {
    display: block;
    clear: both;
    position: relative;
}

.su-record-main {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
}

.su-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 4px 0;
}

.su-title-text {
    display: inline-block;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.3;
    color: #333333;
}

.su-card-sub-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 150px;
    margin: 4px 0 8px 0;
}

.su-record-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    padding: 0;
    line-height: 1.35;
}

.su-record-label {
    flex: 0 0 auto;
    font-weight: bold;
    color: #222222;
    white-space: nowrap;
}

.su-record-value {
    flex: 1 1 auto;
    min-width: 0;
}

.su-record-actions-second-row {
    position: static;
    flex: 0 0 auto;
    text-align: left;
    line-height: 1.35;
    white-space: nowrap;
    padding-top: 0;
    margin: 0;
}

.su-card-footer-row {
    display: block;
    margin-top: 5px;
    padding-top: 0;
    border-top: none;
}

/* =========================================================
   6. BADGES / STATUS PILLS
   ========================================================= */

.su-badge-row,
.songLockerBadgeRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 9px;
    margin: 0;
}

.su-status,
.songLockerStatus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 3px 14px;
    border-radius: 999px;
    background: #eeeeee;
    border: 1px solid #d6d6d6;
    color: #222222;
    line-height: 1;
    font-size: 15px;
    box-sizing: border-box;
}

.su-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 12px;
    border-radius: 999px;
    background: #eeeeee;
    border: 1px solid #d6d6d6;
    color: #222222;
    line-height: 1;
    font-size: 14px;
    box-sizing: border-box;
}

/* =========================================================
   7. FAQ-STYLE COLLAPSIBLE HEADERS
   ========================================================= */

.su-collapse-header,
.su-accordion-header,
.faq-category-button {
    width: 99%;
    background-color: #f1f1f1;
    border: 1px solid #d7d7d7;
    border-left: 3px solid #800000;
    padding: 14px 16px;
    text-align: left;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1.4;
    border-radius: 8px;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.su-collapse-header-neutral {
    border-left-color: #555555 !important;
}

.su-collapse-header:hover,
.su-accordion-header:hover,
.faq-category-button:hover {
    background-color: #efe3e8;
    border-color: #d8c4cc;
    border-left-color: #800000;
}

.su-collapse-header-neutral:hover {
    border-left-color: #555555 !important;
}

.su-collapse-header-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    box-sizing: border-box;
    font-weight: bold;
    width: 100%;
}

.su-collapse-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.su-collapse-hint {
    font-size: 13px;
    font-weight: normal;
    color: #666666;
}

.su-collapse-help-link,
.su-collapse-jump-link {
    font-weight: normal;
    color: #800000;
    text-decoration: none;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 4px;
}

    .su-collapse-help-link:hover,
    .su-collapse-jump-link:hover {
        color: #ffffff;
        background-color: #800000;
        text-decoration: underline;
    }

.su-collapse-jump-link {
    margin-left: auto;
    white-space: nowrap;
    border: 1px solid #d8c4cc;
    background: #ffffff;
    padding: 3px 8px;
    font-size: 14px;
}

.su-collapse-body {
    margin-top: 4px;
}

/* =========================================================
   8. FAQ ACCORDION CONTENT
   ========================================================= */

.su-accordion,
.dynamic-faq,
.dynamic-faq button,
.dynamic-faq div {
    font-family: Tahoma, sans-serif;
}

.su-accordion,
.dynamic-faq {
    font-size: 16px;
    line-height: 1.4;
    color: #222222;
}

.su-accordion-section,
.faq-category {
    margin-bottom: 10px;
    display: block;
}

.su-accordion-content,
.faq-category-content {
    display: none;
    width: 99%;
    background-color: #fafafa;
    color: #000000;
    border: solid 1px #e5e5e5;
    border-top: none;
    padding: 14px;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
}

.su-accordion-item,
.faq-item {
    margin-bottom: 10px;
}

.su-accordion-question,
.faq-question-button {
    width: 98%;
    background-color: #f1f1f1;
    border: solid 1px #d7d7d7;
    padding: 10px 12px 10px 38px;
    text-align: left;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 8px;
    line-height: 1.4;
    position: relative;
}

    .su-accordion-question:hover,
    .faq-question-button:hover {
        background-color: #efe3e8;
        border-color: #d8c4cc;
    }

.su-accordion-answer,
.faq-answer {
    display: none;
    width: 95%;
    background-color: #ffffff;
    color: #222222;
    margin-left: 10px;
    margin-right: 10px;
    padding: 12px 14px;
    font-family: Tahoma, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.faq-category-icon {
    float: left;
    font-weight: bold;
    margin-right: 10px;
    color: #800000;
}

.faq-question-icon {
    position: absolute;
    left: 14px;
    top: 10px;
    font-weight: bold;
    width: 16px;
    text-align: center;
}

.faq-resources {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #dddddd;
}

    .faq-resources a {
        color: #800000;
    }

/* =========================================================
   9. GRID RESET / REMODAL HELPERS
   ========================================================= */

.su-grid-reset,
.su-grid-reset tbody,
.su-grid-reset tr,
.su-grid-reset td {
    border: none;
}

    .su-grid-reset td {
        vertical-align: top;
        padding-top: 0;
        padding-bottom: 0;
    }

.remodal-close,
.remodal-close:before {
    line-height: 35px !important;
    text-align: center !important;
}

/* =========================================================
   10. LOCKER MANAGER SHARED STYLES
   ========================================================= */

.leftbackpack {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    position: relative;
}

.songLockerTitleRow {
    margin: 0 0 4px 0;
    width: 100%;
}

.songLockerSongTitle {
    margin: 0;
    font-size: 16px;
    letter-spacing: 0.3px;
    line-height: 1.22;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.songLockerSubRow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 4px 0 8px 0;
}

.songLockerModifiedRow {
    margin: 0;
    font-size: 15px;
    flex: 0 0 500px;
    width: 500px;
    min-width: 0;
}

.songLockerActions {
    position: static;
    flex: 0 0 auto;
    text-align: left;
    line-height: 1.35;
    white-space: nowrap;
    font-size: 16px;
    padding-top: 0;
    margin: 0;
}

.songLockerMeta {
    font-size: 15px;
    line-height: 1.35;
}

.songLockerWebsiteInline {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.3;
    margin-top: 4px;
}

/* Locker GridView/table reset */

ol.class-list {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

    ol.class-list #lockerGridView,
    ol.class-list #lockerGridView tbody,
    ol.class-list #lockerGridView tr,
    ol.class-list #lockerGridView td {
        display: block;
        width: 100%;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border: none;
        box-sizing: border-box;
    }

    ol.class-list #lockerGridView {
        border-collapse: separate;
        border-spacing: 0 5px;
    }

        ol.class-list #lockerGridView li.group {
            display: block;
            width: 100%;
            margin-left: 0 !important;
            margin-right: 0 !important;
            box-sizing: border-box;
        }

            ol.class-list #lockerGridView li.group.lockerCardOdd,
            ol.class-list #lockerGridView li.group.lockerCardEven {
                padding-left: 14px;
                padding-right: 14px;
                border-left: 4px solid #990000;
            }

/* Locker help line */

.lockerHelpLine {
    margin: 8px 30px 18px 5px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    padding: 2px 3px;
    line-height: 1.4;
}

    .lockerHelpLine a {
        color: #800000;
        text-decoration: none;
    }

        .lockerHelpLine a:hover {
            color: #ffffff;
            background-color: #800000;
            text-decoration: none;
        }

/* Demo promo box */

.songLockerDemoBox {
    width: 330px;
    border: 1px solid #d6d6d6;
    background-color: #f7f7f7;
    padding: 10px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.35;
    box-sizing: border-box;
}

    .songLockerDemoBox img {
        width: 90px;
        height: auto;
        display: block;
    }

.songLockerDemoCopy {
    font-size: 14px;
}

.songLockerDemoTitle {
    font-weight: bold;
    color: #800000;
    margin-bottom: 2px;
}

/* Awards row */

.songLockerAwardsRow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    gap: 3px;
    margin-top: 0;
    padding: 3px 8px;
    line-height: 1;
    border-radius: 999px;
    background: #eeeeee;
    border: 1px solid #d6d6d6;
    width: auto;
    white-space: nowrap;
    box-sizing: border-box;
}

.songLockerAwardsLabel {
    font-size: 15px;
    color: #222222;
    margin-right: 0;
}

.songLockerAwardLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    padding: 3px 5px;
    margin: -2px 0;
    border-radius: 999px;
    background: transparent;
    border: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

    .songLockerAwardLink img {
        display: block;
        vertical-align: middle;
    }

    .songLockerAwardLink:hover {
        background-color: #ead1d1;
        transform: translateY(-1px);
        box-shadow: none;
    }

.songLockerAwardsViewText {
    font-size: 13px;
    color: #800000;
    margin-left: 1px;
}

/* Locker help modal */

.songLockerHelpModal {
    text-align: left !important;
}

    .songLockerHelpModal h3 {
        text-align: center !important;
        margin-bottom: 8px;
    }

    .songLockerHelpModal p,
    .songLockerHelpModal div,
    .songLockerHelpModal span {
        text-align: left;
    }

    .songLockerHelpModal p {
        margin-top: 0;
        margin-bottom: 14px;
        line-height: 1.4;
    }

        .songLockerHelpModal p:last-child {
            margin-bottom: 0;
        }

.songLockerHelpIntro {
    font-size: 15px;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

.songLockerHelpSection {
    background-color: #f7f7f7;
    border: 1px solid #dddddd;
    border-radius: 6px;
    padding: 10px 12px 4px 12px;
    margin-bottom: 10px;
    text-align: left;
}

    .songLockerHelpSection h4 {
        margin: 0 0 8px 0;
        color: #800000;
        text-align: left;
    }

    .songLockerHelpSection p {
        margin-top: 0;
        margin-bottom: 4px;
    }

        .songLockerHelpSection p:last-child,
        .songLockerHelpSection div:last-child {
            margin-bottom: 0;
        }

.songLockerHelpRow {
    padding: 2px 0 2px 18px;
    line-height: 1.25;
    position: relative;
    text-align: left;
}

    .songLockerHelpRow:before {
        content: "•";
        position: absolute;
        left: 2px;
        color: #800000;
        font-weight: bold;
    }

.songLockerHelpNote {
    margin: 12px 0 0 0;
    line-height: 1.3;
    text-align: left;
}

.songLockerHelpSection .songLockerHelpNote {
    margin-bottom: 0;
}

.songLockerAwardHelpItem {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    line-height: 1.25;
    text-align: left;
}

.songLockerHelpSection p + .songLockerAwardHelpItem {
    margin-top: 2px;
}

.songLockerHelpFooter {
    font-size: 14px;
    font-weight: bold;
    text-align: center !important;
    margin-top: 6px;
}

/* =========================================================
   11. RESPONSIVE SHARED RULES
   ========================================================= */

@media screen and (max-width: 950px) {
    .su-card-sub-row,
    .songLockerSubRow {
        display: block;
    }

    .su-record-actions-second-row {
        text-align: left;
        white-space: normal;
        margin-top: 8px;
        font-size: 15px;
    }

    .songLockerActions {
        text-align: left;
        white-space: normal;
        margin-top: 8px;
        font-size: 15px;
    }

    .rightbackpack {
        float: none;
        width: 100%;
        clear: both;
        text-align: left;
        margin-top: 8px;
    }

    .songLockerDemoBox {
        float: none;
        width: auto;
        margin-top: 12px;
        justify-content: flex-start;
    }

        .songLockerDemoBox img {
            width: 75px;
        }
}

@media screen and (max-width: 600px) {
    .inline-elements,
    .su-inline-elements {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    .su-primary-link,
    .songLockerPrimaryLink {
        font-size: 14px;
        padding: 2px 4px;
    }

    .su-action-link,
    .songLockerStyledLink {
        font-size: 14px;
        padding: 2px 4px;
    }

    .su-action-sep,
    .songLockerActionSep {
        margin: 0 5px;
    }

    .su-sort-row,
    .songLockerSortRow {
        align-items: stretch;
    }

    .su-sort-label,
    .songLockerSortLabel {
        width: 100%;
    }

    .su-sort-row select,
    .songLockerSortRow select {
        min-width: 0;
        width: 100%;
    }

    .su-sort-button,
    .songLockerSortButton {
        width: 100%;
    }

    .su-list-card,
    .class-list li.group {
        padding: 10px 12px;
        margin-bottom: 10px;
    }

    .faq-category-button,
    .faq-question-button,
    .faq-answer,
    .su-collapse-header,
    .su-accordion-question,
    .su-accordion-answer {
        width: 100%;
    }

    .faq-answer,
    .su-accordion-answer {
        margin-left: 0;
        margin-right: 0;
    }

    .songLockerTitleRow {
        display: block;
    }

    .songLockerActions {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0;
        white-space: nowrap;
        font-size: 15px;
        line-height: 1.4;
    }

    .songLockerStatus {
        min-width: 0;
    }

    .songLockerBadgeRow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
    }

    .songLockerWebsiteInline {
        display: block;
        width: 100%;
        margin-top: 4px;
        line-height: 1.3;
    }

    .songLockerAwardsRow {
        margin-top: 0;
        gap: 3px;
        padding: 3px 8px;
    }

    .songLockerAwardLink {
        padding: 3px 5px;
        margin: -2px 0;
        border-radius: 999px;
    }

    .songLockerAwardHelpItem {
        align-items: flex-start;
    }

    .songLockerDemoBox {
        float: none !important;
        clear: both;
        width: auto !important;
        max-width: none;
        margin: 18px 0 0 0;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        box-sizing: border-box;
    }

        .songLockerDemoBox img {
            width: 58px;
            height: auto;
            flex: 0 0 auto;
        }

    .songLockerDemoCopy {
        font-size: 14px;
        line-height: 1.3;
    }

    .songLockerDemoTitle {
        display: inline;
        margin-right: 4px;
    }
}