/*------------------------------------------------------------*/
/* CNCI Worship — Style                                       */
/*------------------------------------------------------------*/
/*
Style format per class:
    transform (opacity, border)
    position  (margin, padding, flex)
    size      (width, height)
    color
    text      (font, color, style)
    event
*/

/*------------------------------------------------------------*/
/* Variables                                                  */
/*------------------------------------------------------------*/
:root {
    --BtnPrimary:      #e02020;
    --BtnSecondary:    #185FA5;
    --Disabled:        #b8b9b9;
    --Error:           #e02020;
    --Form:            #e6e6e6;
    --Glow:            #2684e2;
    --Highlight:       #ef9f27;
    --Hover:           #042c53;
    --Main:            #185FA5;
    --Overlay:         rgba(0,0,0,0.5);
    --OverlayLight:    rgba(255,255,255,0.2);
    --RowEven:         #d4d5d5;
    --RowHover:        #c2d9f0;
    --RowOdd:          #e6e6e6;
    --Section:         #b8b9b9;
    --Shadow:          rgba(0,0,0,0.5);
    --ShadowCard:      rgba(0,0,0,0.1);
    --SnackBar:        #000000;
    --SubSection:      #c8c8c8;
    --subheader:       #436175;
    --Success:         #185FA5;
    --TableHeader:     #185FA5;
    --TableNormal:     #e6e6e6;
    --Text:            #ffffff;
    --TextDark:        #000000;
}

/*------------------------------------------------------------*/
/* Base — Elements                                          */
/*------------------------------------------------------------*/
button:disabled,
select:disabled,
option:disabled{
    opacity: 0.4;
    pointer-events: none;
}

/*------------------------------------------------------------*/
/* A                                                          */
/*------------------------------------------------------------*/
.cnci-ws-assigned-cs {
    color: var(--Success);
}

.cnci-ws-back-btn-cs {
    color: var(--Text);
    font-weight: 600;
    text-decoration: none;
    width: 100px;
    &:hover{
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}

/*------------------------------------------------------------*/
/* B — Badges                                                 */
/*------------------------------------------------------------*/

.cnci-ws-badge-draft-cs {
    background: var(--Disabled);
    border-radius: 10px;
    color: var(--Text);
    font-size: x-small;
    font-weight: 600;
    padding: 2px 8px;
}

.cnci-ws-badge-published-cs {
    background: var(--Success);
    border-radius: 10px;
    color: var(--Text);
    font-size: x-small;
    font-weight: 600;
    padding: 2px 8px;
}

/*------------------------------------------------------------*/
/* B — Buttons                                                */
/*------------------------------------------------------------*/

.cnci-ws-btn-add-cs {
    background-color: transparent;
    border-color: transparent;
    border-width: 0px;
    color: var(--Text);
    font-weight: 600;
    text-align: right;
    width: 150px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}

.cnci-ws-btn-delete-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}

.cnci-ws-btn-edit-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}

.cnci-ws-btn-func-cs {
    background: var(--Main);
    border: none;
    border-radius: 4px;
    border-width: 0px;
    color: var(--Text);
    cursor: pointer;
    font-size: small;
    padding: 5px 12px;
    width: 150px;
    &:hover{
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}

.cnci-ws-btn-func-head-cs{
    background: transparent;
    border: none;
    border-radius: 4px;
    border-width: 0px;
    color: var(--Text);
    cursor: pointer;
    font-size: small;
    padding: 5px 12px;
    width: 150px;
    &:hover{
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    } 
}

.cnci-ws-btn-ghost-cs {
    background: transparent;
    border: 1.5px solid var(--Disabled);
    border-radius: 6px;
    border-width: 0px;
    color: var(--TextDark);
    cursor: pointer;
    display: inline-block;
    font-size: 0.875rem;
    padding: 6px 13px;
    text-decoration: none;
}

.cnci-ws-btn-primary-cs {
    background: var(--Main);
    border: none;
    border-radius: 6px;
    border-width: 0px;
    color: var(--Text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 7px 14px;
    &:hover{
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}
.cnci-ws-btn-primary-cs:disabled {
    background: var(--Disabled);
    border-width: 0px;
    cursor: default;
}

.cnci-ws-btn-secondary-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }
}

.cnci-ws-btn-view-cs {
    background: var(--Success);
    border: none;
    border-radius: 4px;
    color: var(--Text);
    cursor: pointer;
    font-size: small;
    padding: 4px 10px;
}

/*------------------------------------------------------------*/
/* C — Category (Permission table)                            */
/*------------------------------------------------------------*/
.cnci-ws-category-btn-edit-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        margin-bottom: 2px;
    }
}
.cnci-ws-category-main-div-cs {
    margin-bottom: 5px;
    overflow-x: auto;
    width: 100%;
}

/*------------------------------------------------------------*/
/* C — Chord                                                  */
/*------------------------------------------------------------*/

.cnci-ws-chord-block-cs {
    margin-bottom: 15px;
}

.cnci-ws-chord-input-cs {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--Glow);
    font-family: monospace;
    font-size: small;
    padding: 3px 6px;
    width: 100%;
}

.cnci-ws-chord-input-cs:not(:disabled) {
    background: var(--Form);
    border: 1px solid var(--Disabled);
}

.cnci-ws-chord-line-cs {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}

.cnci-ws-chord-lyric-line-cs {
    border: 1px solid transparent;       /* match the chord input's 1px border */
    box-sizing: border-box;
    font-family: monospace;              /* match the chord input's font so every char is the same width */
    font-size: small;
    padding: 2px 6px;                    /* match the chord input's 6px side padding — same left edge */
    white-space: pre-wrap;
}

.cnci-ws-chord-notes-btn-cs {
    background: var(--SubSection);
    border: 2px solid var(--SubSection);
    border-radius: 4px;
    cursor: pointer;
    font-family: monospace;
    font-size: small;
    padding: 3px 8px;
    text-align: left;
    white-space: pre-wrap;
    width: 150px;
}
.cnci-ws-chord-notes-btn-cs.is-empty {
    border-width: 0px;
    color: var(--Disabled);
}

.cnci-ws-colfilter-row-cs{
    & th input {
        border-radius: 5px;
        border-width: 1px;
        border-color: var(--Section);
        padding: 5px;
        width: 100%;
    }
    & th button {
    border: none;
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    color: var(--Text);
    height: 30px;
    width: 80px;
        &:hover {
            color: var(--Highlight);
            font-weight: 700;
            text-shadow: var(--Shadow);
        }
    }    
}

/*------------------------------------------------------------*/
/* C — Configuration                                          */
/*------------------------------------------------------------*/

.cnci-ws-config-body-cs {
    padding: 15px;
}

.cnci-ws-config-section-cs {
    border: 1px solid var(--Disabled);
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
}

.cnci-ws-configuration-main-wrapper-cs{
    width: 100%;    
}
/*------------------------------------------------------------*/
/* D — Denied                                                 */
/*------------------------------------------------------------*/
.cnci-ws-denied-cs {
    background-color: var(--Form);
    border-left: 5px solid var(--Error);
    border-radius: 5px;
    margin: 20px auto;
    max-width: 500px;
    padding: 20px;
}

.cnci-ws-denied-text-cs {
    color: var(--TextDark);
    font-size: large;
    margin: 0;
}

/*------------------------------------------------------------*/
/* D — Detail                                                 */
/*------------------------------------------------------------*/
.cnci-ws-detail-actions-cs{
    align-items: center;
    display: flex;
    gap: 8px;
}

.cnci-ws-detail-body-cs {
    align-items: left;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    @media (max-width: 1000px) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;      
    }

}

.cnci-ws-detail-controls-cs {
    display: flex;
    align-content: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.cnci-ws-detail-controls-sub-cs {
    display: flex;
    align-content: baseline;
    gap: 10px;
}

.cnci-ws-detail-input-cs {
    border: 1px solid var(--Disabled);
    border-radius: 6px;
    flex: 1;
    font-size: 0.9rem;
    padding: 7px 12px;
}

.cnci-ws-detail-main-cs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%
}

.cnci-ws-detail-topbar-cs {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
}

/* The warning shown when a song title is already on the list. It is amber and
   not red on purpose — nothing has gone wrong and nothing is blocked, the save
   is still one press away.

   There is deliberately no display property here. The div carries
   .cnci-ws-hidden-cs until the server reports a match, and that rule is one
   class deep just like this one, so the later of the two in the file wins.
   Hidden is further down. Declaring display here would take the tie and the
   empty box would sit in the modal from the moment the page loads. */
.cnci-ws-dupe-warn-cs {
    background: var(--Highlight);
    border-radius: 5px;
    color: var(--TextDark);
    font-size: small;
    margin-top: 10px;
    padding: 10px 12px;

    & strong {
        display: block;
        margin-bottom: 3px;
    }

    & ul {
        margin: 4px 0 0;
        padding-left: 18px;
    }
}

/*------------------------------------------------------------*/
/* E — Empty / Error                                          */
/*------------------------------------------------------------*/

.cnci-ws-empty-cs {
    color: var(--Disabled);
    font-style: italic;
    padding: 10px;
}

/*------------------------------------------------------------*/
/* F — Filter                                                 */
/*------------------------------------------------------------*/

.cnci-ws-filter-list-cs {
    border: 1px solid var(--Disabled);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px;
}
.cnci-ws-filter-list-cs label {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: small;
    gap: 8px;
    padding: 5px;
}
.cnci-ws-filter-list-cs label:hover {
    background: var(--RowHover);
}

/*------------------------------------------------------------*/
/* H — Header                                                 */
/*------------------------------------------------------------*/

.cnci-ws-header-actions-cs {
    align-items: center;
    display: flex;
    /* Same 466px arithmetic as the songs toolbar: Rename, Duplicate Template
       and + Add Section in one unwrappable row pushed an opened template — and
       its rename dialog — wider than the phone that opened it. */
    flex-wrap: wrap;
    gap: 8px;
}

/*------------------------------------------------------------*/
/* H — Hidden                                                 */
/*------------------------------------------------------------*/
.cnci-ws-hidden-cs {
    display: none;
}

/*------------------------------------------------------------*/
/* H — History                                                */
/*------------------------------------------------------------*/

.cnci-ws-history-date-cs {
    color: var(--Disabled);
    font-size: small;
}

.cnci-ws-history-name-cs {
    flex: 1;
    font-weight: 600;
}

.cnci-ws-history-row-cs {
    align-items: center;
    background: var(--Text);
    border-bottom: 1px solid var(--RowOdd);
    display: flex;
    gap: 10px;
    padding: 8px 12px;
}
.cnci-ws-history-row-cs:hover {
    background: var(--RowHover);
}

.cnci-ws-history-tabs-cs{
    align-items: center;
    display: flex;
    gap: 8px;
    height: 40px;
}
.cnci-ws-history-tab-cs{
    background: var(--Main);
    border: none;
    border-radius: 4px;
    color: var(--Text);
    cursor: pointer;
    font-size: small;
    padding: 5px 12px;
    width: 150px;
    &:hover{
        color: var(--Highlight);
        font-weight: 700;
        text-shadow: var(--Shadow);
    }

}

/*------------------------------------------------------------*/
/* I — Import                                                 */
/*------------------------------------------------------------*/

.cnci-ws-file-input-cs {
    border: 1.5px dashed var(--Disabled);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 0.88rem;
    padding: 8px;
    width: 100%;
}

.cnci-ws-import-hint-cs {
    color: var(--Disabled);
    font-size: 0.85rem;
    margin: 0 0 12px;
}
.cnci-ws-import-progress-wrap-cs {
    margin-top: 12px;
}

/*------------------------------------------------------------*/
/* K — Key Row                                                */
/*------------------------------------------------------------*/

.cnci-ws-key-btn-cs.cnci-ws-key-active-cs {
    background: var(--Main);
    border-color: var(--Main);
    border-width: 0px;
    color: var(--Text);
    font-weight: 600;
}

.cnci-ws-key-btn-cs {
    background: var(--Text);
    border: 1px solid var(--Disabled);
    border-radius: 4px;
    color: var(--TextDark);
    cursor: pointer;
    font-size: 300;
    padding: 2px;
    width: 40px;
}

.cnci-ws-key-row-cs {
    background: var(--Form);
    border-radius: 6px;
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 8px;
}

/*------------------------------------------------------------*/
/* L — Label                                                  */
/*------------------------------------------------------------*/

.cnci-ws-label-cs {
    display: block;
    font-size: small;
    font-weight: 600;
    margin-top: 10px;
}

/*------------------------------------------------------------*/
/* L — Line Up                                               */
/*------------------------------------------------------------*/
.cnci-ws-lineup-filter-bar-cs,
.cnci-ws-setup-filter-bar-cs,
.cnci-ws-catfilter-bar-cs,
.cnci-ws-lineup-picker-bar-cs{
    align-items: center;
    background-color: var(--Section);
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
}
.cnci-ws-lineup-filter-item-cs,
.cnci-ws-setup-filter-row-cs,
.cnci-ws-catfilter-item-cs,
.cnci-ws-lineup-picker-filter-item-cs{
    align-items: center;
    display: flex;
    gap: 8px;
}
.cnci-ws-lineup-filter-item-cs .cnci-ws-filter-label-cs,
.cnci-ws-setup-filter-row-cs .cnci-ws-setup-filter-label-cs,
.cnci-ws-catfilter-item-cs .cnci-ws-filter-label-cs,
.cnci-ws-lineup-picker-filter-item-cs .cnci-ws-filter-label-cs{
    height: auto;
    white-space: nowrap;
    width: auto;
}
.cnci-ws-lineup-filter-item-cs .cnci-ws-select-cs,
.cnci-ws-setup-filter-row-cs .cnci-ws-select-cs,
.cnci-ws-catfilter-item-cs .cnci-ws-select-cs,
.cnci-ws-lineup-picker-filter-item-cs .cnci-ws-select-cs{
    border-radius: 5px;
    font-size: large;
    font-weight: 400;
    height: 40px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 180px;
}
.cnci-ws-lineup-key-cs {
    color: var(--Main);
    font-size: small;
    font-weight: 600;
}

.cnci-ws-lineup-section-cs {
    border: 1px solid var(--RowOdd);
    margin-bottom: 15px;
    overflow: hidden;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cnci-ws-lineup-section-title-cs {
    background: var(--TableHeader);
    color: var(--Text);
    font-size: 1rem;
    margin: 0;
    padding: 8px 12px;
}

.cnci-ws-lineup-section-notes-cs {
    color: var(--TextDark);
    font-size: small;
    font-style: italic;
    padding: 4px 12px 0;
}

.cnci-ws-lineup-singer-cs {
    color: var(--Disabled);
    font-size: small;
}

.cnci-ws-lineup-song-cs {
    align-items: center;
    border-bottom: 1px solid var(--Form);
    display: flex;
    gap: 15px;
    padding: 8px 12px;
}

/* The lineup is a published, read-only surface: the people on stage should see
   everything, so nothing here may clamp. display went from block back to table
   for that reason — a block-displayed table shrink-wraps its rows once the
   nowrap comes off, and the grid would stop filling the pane. The cells wrap
   instead of scrolling: three columns share whatever width the pane has, and
   the row grows to hold a long title rather than cutting it. */
.cnci-ws-lineup-song-table-cs{
    width: 100%;
    border-collapse: collapse;
    display: table;
    & td, & th {
        max-width: none;
        overflow: visible;
        overflow-wrap: break-word;
        text-overflow: clip;
        vertical-align: top;
        white-space: normal;
    }
    /* The shared column pins (300px medium, 200px flex minimum, 120px small)
       are sized for the wide editor grids and would force a 390px phone to
       scroll sideways. Released here, in this table only — the song and singer
       columns split the pane and wrap, and the key column hugs its two
       characters. */
    & td.cnci-ws-col-medium-cs {
        min-width: 0;
        width: auto;
    }
    & td.cnci-ws-col-flex-cs {
        min-width: 0;
        width: auto;
    }
    & td.cnci-ws-col-small-cs {
        min-width: 0;
        white-space: nowrap;
        width: 1%;
    }
    & tbody {
        background-color: var(--TableNormal);
        & tr:nth-child(even) td {
            background-color: var(--RowEven);
        }
        & tr:nth-child(odd) td {
            background-color: var(--RowOdd);
        }
        & tr:hover td {
            background-color: var(--RowHover);
        }
    }    
}

.cnci-ws-lineup-song-title-cs {
    flex: 1;
    font-weight: 600;
}

.cnci-ws-lineup-title-cs {
    margin-bottom: 15px;
}

.cnci-ws-lineup-transition-cs {
    border-bottom: 1px solid var(--Form);
    font-size: small;
    padding: 4px;
}

.cnci-ws-lineup-transitions-cs {
    background: var(--Form);
    padding: 8px 12px;
}

/*------------------------------------------------------------*/
/* L — List                                                   */
/*------------------------------------------------------------*/

.cnci-ws-list-cs {
    margin-top: 10px;
}

/*------------------------------------------------------------*/
/* L — Lyrics                                                 */
/*------------------------------------------------------------*/
.cnci-ws-lineup-section-cs{
    align-items: left;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cnci-ws-lineup-columns-cs{
    align-items: left;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;
    @media (max-width: 1000px) {
    align-items: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;        
    }
}
.cnci-ws-lineup-column-cs{
    align-items: left;
    display: flex;
    flex-direction: row;
    padding: 10px;
    width: 100%;
}

.cnci-ws-lineup-detail-cs{
    width: 100%;
}

.cnci-ws-lineup-detail-lyrics-cs,
.cnci-ws-lineup-detail-row-cs{
    background-color: var(--Form);
    padding: 10px;
    width: 100%;
}

/* Lineup chord chart — monospace + preserved spacing so chords line up over
   the lyric, coloured like the song-detail chart. */
.cnci-ws-lineup-chord-cs {
    color: var(--Glow);
    font-family: monospace;
    font-size: medium;
    white-space: pre;
    @media (max-width: 500px){
    font-size: small;
    }
}

.cnci-ws-lineup-lyric-line-cs {
    font-family: monospace;
    font-size: medium;
    white-space: pre;
    @media (max-width: 500px){
    font-size: small;
    }
}
.cnci-ws-lineup-detail-embed-cs{
    display: flex;
    background-color: var(--Form);
    height: 300px;
    margin-top: 10px;
    padding: 10px;
    width: 500px;
    & iframe{
        height: 100%;
        width: 100%;
    }
    @media (max-width: 500px){
        width: 100%;
    }

}
.cnci-ws-lineup-pane-cs{
    align-items: center;
    background-color: var(--Form);
    display: flex;
    flex-direction: column;
    width: 100%;
}
.cnci-ws-lineup-pane-header-cs{
    align-items: center;
    background-color: var(--TableHeader);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.cnci-ws-lineup-pane-title-cs{
    color: var(--Text);
}
.cnci-ws-lineup-section-type-cs{
    background-color: var(--SubSection);
    margin-top: 10px;
    padding: 2px;
    padding-left: 5px;
    font-size:large;
    font-weight: 700;
}
.cnci-ws-lyric-add-btn-cs {
    margin-top: 10px;
}
.cnci-ws-lyric-block-cs {
    border: 1px solid var(--RowOdd);
    border-radius: 4px;
    margin-bottom: 15px;
    overflow: hidden;
}

.cnci-ws-lyric-block-header-cs {
    align-items: center;
    background: var(--Form);
    border-bottom: 1px solid var(--RowOdd);
    display: flex;
    gap: 8px;
    padding: 6px 10px;
}
.cnci-ws-lyric-block-header-cs .cnci-ws-select-cs {
    flex: 1;
    margin: 0;
}

/* Reading state. The box keeps its geometry so nothing shifts when Edit is
   pressed — only the border is taken away, which is what makes the lyrics read
   as page text rather than as a form. "transparent" is a keyword, not a colour
   value, so it does not break the no-hardcoded-colours rule. */
.cnci-ws-lyric-block-static-cs {
    border-color: transparent;
    margin-bottom: 18px;
}

.cnci-ws-lyric-section-type-cs {
    color: var(--Main);
    font-size: small;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.cnci-ws-lyric-static-cs {
    padding: 2px 0;
}

/* pre-wrap, so the line breaks the writer typed survive into the read view. */
.cnci-ws-lyric-static-text-cs {
    font-size: small;
    padding: 8px;
    white-space: pre-wrap;
}

.cnci-ws-lyric-text-cs {
    background: var(--Text);
    border: none;
    font-size: small;
    padding: 8px;
    white-space: pre-wrap;
    width: 100%;
}

/*------------------------------------------------------------*/
/* M — Modal                                                  */
/*------------------------------------------------------------*/

.cnci-ws-modal-body-cs {
    background-color: var(--Form);
    max-height: 400px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    & label input[type="checkbox"]{
        height: 20px;
        margin-top: 20px;
        width: 20px;
    }
}

.cnci-ws-modal-btn-save-cs {
    background: var(--Main);
    border: none;
    border-radius: 4px;
    color: var(--Text);
    cursor: pointer;
    padding: 8px 20px;
}

.cnci-ws-modal-close-cs {
    background-color: transparent;
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    font-weight: 500;
    height: 30px;
    width: 30px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
        margin-bottom: 2px;
    }
}

.cnci-ws-modal-checkbox-cs{
    height: 20px;
    width: 20px;
}

.cnci-ws-modal-content-cs {
    background-color: var(--Form);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;
    width: 450px;
}

.cnci-ws-modal-footer-cs {
    padding: 10px 15px;
    text-align: right;
}

.cnci-ws-modal-header-cs {
    align-items: center;
    background: var(--TableHeader);
    border-radius: 8px 8px 0 0;
    color: var(--Text);
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
}
.cnci-ws-modal-header-cs h4 {
    color: inherit;
    margin: 0;
}

.cnci-ws-modal-Singerbrowser-cs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.cnci-ws-modal-wrapper-cs {
    align-items: center;
    background-color: var(--Overlay);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    vertical-align: middle;
    width: 450px;
    width: 100%;
    z-index: 9999;
}
.cnci-ws-modal-wrapper-cs.cnci-ws-modal-show-cs {
    display: flex;
}

/*------------------------------------------------------------*/
/* N — Not assigned                                           */
/*------------------------------------------------------------*/
.cnci-ws-notassigned-cs {
    color: var(--Error);
}

/*------------------------------------------------------------*/
/* N — Notes                                                  */
/*------------------------------------------------------------*/

.cnci-ws-note-actions-cs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cnci-ws-note-label-cs {
    color: var(--Highlight);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.cnci-ws-note-label-sub-cs {
    color: var(--Disabled);
    font-weight: 400;
    margin-left: 4px;
}

.cnci-ws-note-panel-cs {
    background: var(--Text);
    border: 1px solid var(--RowOdd);
    border-radius: 8px;
    padding: 12px;
}

.cnci-ws-note-textarea-cs {
    background: var(--Form);
    border: 1px solid var(--Disabled);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: small;
    padding: 6px 8px;
    resize: vertical;
    width: 100%;
}

.cnci-ws-progress-bar-cs {
    background: var(--Main);
    border-radius: 4px;
    height: 100%;
    transition: width 0.3s ease;
    width: 0%;
}

.cnci-ws-progress-bar-wrap-cs {
    background: var(--Form);
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
    width: 100%;
}

.cnci-ws-progress-label-cs {
    color: var(--Disabled);
    font-size: small;
    margin: 6px 0 0;
}

/*------------------------------------------------------------*/
/* R — Ref link                                               */
/*------------------------------------------------------------*/

.cnci-ws-ref-empty-cs {
    color: var(--Disabled);
    font-size: small;
}

.cnci-ws-ref-link-cs {
    color: var(--Main);
    font-size: small;
    text-decoration: none;
}

.cnci-ws-row-cs td input {
    height: 30px;
    width: 80px !important;
}

.cnci-ws-row-cs td input[type="checkbox"] {
    height: 20px;
    width: 20px;
}

.cnci-ws-row-cs tr input[type="checkbox"] {
    height: 30px;
    width: 80px !important;
}

.cnci-ws-row-dragging-cs {
    opacity: 0.4;
}

.cnci-ws-row-dragover-cs {
    border-top: 2px solid var(--TableHeader);
}

/*------------------------------------------------------------*/
/* S — Save message                                           */
/*------------------------------------------------------------*/

.cnci-ws-save-msg-cs {
    color: var(--Success);
    font-size: small;
    margin-left: 8px;
}

/*------------------------------------------------------------*/
/* S — Section Card (Setup)                                   */
/*------------------------------------------------------------*/

.cnci-ws-section-bar-cs {
    align-items: center;
    background: var(--subheader);
    color: var(--Text);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 8px 12px;
}

.cnci-ws-section-bar-name-cs {
    color: inherit;
    flex: 1;
    font-weight: 600;
}

.cnci-ws-section-body-cs {
        background-color: var(--TableNormal);
        & tr:nth-child(even) td {
            background-color: var(--RowEven);
        }
        & tr:nth-child(odd) td {
            background-color: var(--RowOdd);
        }
        & tr:hover td {
            background-color: var(--RowHover);
        }
}

.cnci-ws-section-card-cs {
    border: 1px solid var(--RowOdd);
    border-radius: 5px;
    margin-bottom: 12px;
    overflow: hidden;
}

.cnci-ws-section-collapse-btn-cs {
    background: var(--OverlayLight);
    border: none;
    border-radius: 4px;
    border-width: 0px;
    color: var(--Text);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 3px 8px;
    z-index: 0;
}

.cnci-ws-section-footer-cs {
    background: var(--Form);
    border-top: 1px solid var(--RowOdd);
    display: flex;
    gap: 8px;
    padding: 8px 10px;
}

.cnci-ws-section-notes-cs {
    align-items: center;
    background: var(--Form);
    display: flex;
    gap: 8px;
    padding: 8px 10px;
}

.cnci-ws-section-notes-label-cs {
    font-weight: 600;
}

.cnci-ws-section-notes-input-cs {
    flex: 1;
    padding: 4px 8px;
}

/*------------------------------------------------------------*/
/* S — Setup                                                  */
/*------------------------------------------------------------*/

.cnci-ws-setup-detail-cs {
    width: 100%;
}

/* Collapsible setup cards (mirrors the planner event/plan cards). The header
   row toggles the body; multiple cards can be open at once. */
.cnci-ws-setup-card-cs {
    border-radius: 5px;
    margin-top: 5px;
    overflow: hidden;
    width: 100%;
}

.cnci-ws-setup-card-toggle-cs {
    cursor: pointer;
    margin-top: 0;
}

.cnci-ws-setup-card-body-cs {
    border: 1px solid var(--Section);
    padding: 10px;
}

/* min-width: 0 is the whole fix. A flex item refuses by default to shrink below
   its own longest word, so the name pushed the badge out of the row instead of
   giving up space, and "Published" ended up underneath the title. Releasing
   that floor lets the name shrink, and the ellipsis says what was lost. The
   full name is on the element's title attribute for a hover. */
.cnci-ws-setup-name-cs,
.cnci-ws-template-name-cs {
    flex: 1 1 auto;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The caret is what tells the reader the row opens rather than navigates. It
   is on the name and not on the row because .cnci-ws-template-row-cs and
   .cnci-ws-setup-card-toggle-cs are flex containers with a button at the far
   end — a ::before on the row would become a flex item of its own and be
   pushed away from the words it belongs to. Both names are plain spans, so
   they need no flex-start pin the way the Planner card headers do. Same
   reasoning as the Time Off header in Planner. */
/* 15px, matching Planner and Book. It was 0.9em, which resolved against this
   span's inherited 16px and came out 14.4px — the smallest of the four carets in
   the app, all of which were nominally "0.9em".
   No breakpoint here on purpose: these headers keep the same type at every
   width, so a step would shrink the caret for a constraint that belongs to the
   Planner's header, not to this one. */
.cnci-ws-setup-name-cs::before,
.cnci-ws-template-name-cs::before {
    content: "\25B8";
    display: inline-block;
    font-size: 15px;
    margin-right: 8px;
    transition: transform 0.15s ease;
}

.cnci-ws-setup-card-toggle-cs.cnci-ws-setup-open-cs .cnci-ws-setup-name-cs::before,
.cnci-ws-template-open-cs .cnci-ws-template-name-cs::before {
    transform: rotate(90deg);
}

/* The header and its panel travel as a pair. */
.cnci-ws-template-item-cs {
    width: 100%;
}

/* The detail sits directly under the row it belongs to, tinted so the eye can
   see where one template's contents end and the next header begins. */
.cnci-ws-template-panel-cs {
    background: var(--Section);
    box-sizing: border-box;
    padding: 8px;
    width: 100%;
}

/* The row is a fixed 40px, and this clickable half inside it asked for 12px of
   padding above and below its own text — 42px of content in a 30px opening.
   Centring hid it on a wide screen; on a phone the badge and the Delete button
   arrive and it stops hiding. The row already centres its children, so the
   vertical padding was never doing anything but overflowing. min-width: 0 so
   this half can shrink inside the row the same way the name shrinks inside it. */
.cnci-ws-setup-row-clickable-cs,
.cnci-ws-template-row-clickable-cs {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 1;
    gap: 10px;
    justify-content: space-between;
    min-width: 0;
    padding: 0 10px;
}

/* box-sizing is new, same reason as .cnci-ws-header-cs: width: 100% and 10px
   of padding put both of these 10px past the edge of the list holding them. */
.cnci-ws-setup-row-cs,
.cnci-ws-template-row-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--Text);
    display: flex;
    gap: 5px;
    height: 40px;
    margin-top: 5px;
    padding: 5px;
    width: 100%;
    /* Delete is a fixed 80px and must stay that size. Without this it is the
       only item in the row still allowed to shrink, so on a phone the name
       gives up nothing and the button gets squeezed to unreadable instead. */
    & > .cnci-ws-btn-delete-cs {
        flex: 0 0 auto;
    }
}

/* The badge keeps its natural width so the name is the only thing that gives. */
.cnci-ws-setup-status-cs {
    flex: 0 0 auto;
    white-space: nowrap;
}

.cnci-ws-setup-topbar-cs {
    align-items: center;
    background: var(--subheader);
    border-radius: 5px;
    color: var(--Text);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px 15px;
    /* Three buttons of a fixed 150px need 460px and get 328 on a phone, so the
       bar wraps and the last button lands alone under the other two. Letting
       all three share the width evenly puts them back on one line at the cost
       of shorter labels, which they have room for. */
    @media (max-width: 560px) {
        gap: 6px;
        padding: 8px 10px;
        & > div {
            display: flex;
            flex: 1 1 auto;
            gap: 6px;
            min-width: 0;
        }
        & .cnci-ws-btn-add-cs,
        & .cnci-ws-btn-func-head-cs {
            flex: 1 1 0;
            font-size: small;
            min-width: 0;
            padding: 5px 4px;
            text-align: center;
            white-space: nowrap;
            width: auto;
        }
    }
}

.cnci-ws-setup-topbar-name-cs {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
}

/*------------------------------------------------------------*/
/* S — Snackbar                                               */
/*------------------------------------------------------------*/

/* The shadow is not decoration. Every message now floats in the middle of the
   page instead of hugging the bottom edge, so without it a pale message can sit
   on top of a pale table and read as part of the page. */
.cnci-ws-snackbar-cs {
    background: var(--SnackBar);
    border-radius: 5px;
    box-shadow: 0 6px 24px var(--Shadow);
    color: var(--Text);
    font-size: small;
    font-weight: normal;
    margin: 0;
    padding: 10px 20px;
}

/* An error is the one message the user must not walk past, so it stops looking
   like a status line and starts looking like a stop sign: red, bigger type, and
   a warning mark beside it. Position is no longer part of this — every message
   is centred now, so only the appearance still changes. */
.cnci-ws-snackbar-error-cs .cnci-ws-snackbar-cs {
    align-items: center;
    background: var(--Error);
    column-gap: 10px;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 24px;
}

.cnci-ws-snackbar-error-cs .cnci-ws-snackbar-icon-cs {
    display: inline;
}

/* Hidden by default and revealed by the rule above, so the mark is carried by
   CSS alone. The script then has one class to set and no second element to
   remember to show and hide in step with it. */
.cnci-ws-snackbar-icon-cs {
    display: none;
    font-size: 1.4rem;
    line-height: 1;
}

/* Centred rather than pinned to the bottom edge, so a message lands where the
   eye already is instead of in the corner people learn to ignore.
   width: max-content is load-bearing. A fixed box pinned at left: 50% with no
   width of its own is only offered the half of the viewport to its right, so on
   a phone the message folds into a narrow column. This lets it size to its text,
   and max-width then holds it inside the screen. */
.cnci-ws-snackbar-wrapper-cs {
    display: none;
    left: 50%;
    max-width: 90vw;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    z-index: 99999;
}

.cnci-ws-snackbar-wrapper-cs.cnci-ws-snackbar-show-cs {
    display: block;
}

/*------------------------------------------------------------*/
/* S — Song Card                                              */
/*------------------------------------------------------------*/

.cnci-ws-song-card-artist-cs {
    color: var(--Main);
    font-size: 0.8rem;
}

.cnci-ws-song-card-cs {
    background: var(--Text);
    border: 1px solid var(--RowOdd);
    border-radius: 8px;
    cursor: pointer;
    padding: 14px;
    transition: box-shadow 0.15s;
}
.cnci-ws-song-card-cs:hover {
    box-shadow: 0 2px 8px var(--ShadowCard);
}

.cnci-ws-song-card-title-cs {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}

/*------------------------------------------------------------*/
/* S — Song Detail                                            */
/*------------------------------------------------------------*/

.cnci-ws-song-grid-cs {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1200px) { .cnci-ws-song-grid-cs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .cnci-ws-song-grid-cs { grid-template-columns: repeat(2, 1fr); } }

.cnci-ws-song-section-row-cs {
    align-items: center;
    border-bottom: 1px solid var(--Form);
    display: flex;
    gap: 8px;
    padding: 6px 0;
}
.cnci-ws-song-section-row-cs span {
    flex: 1;
}

/*------------------------------------------------------------*/
/* S — Song Toolbar                                           */
/*------------------------------------------------------------*/

.cnci-ws-song-search-cs {
    border: 1px solid var(--Disabled);
    border-radius: 6px;
    font-size: 0.9rem;
    padding: 7px 12px;
    width: 280px;
    /* iPhone Safari zooms the whole page into any input under 16px the moment
       it is tapped. 16px on phones is the floor that stops that; wider screens
       keep the compact 0.9rem. */
    @media (max-width: 560px) {
        font-size: 16px;
    }
}

.cnci-ws-song-toolbar-actions-cs {
    display: flex;
    /* Three 150px buttons are 466px shoulder to shoulder — wider than a phone.
       Wrapping lets them stack 2+1 there; anywhere they fit, this line does
       nothing at all. Without it the row was the one unbreakable box that
       forced the whole Songs page sideways and cut "+ Add Song" off. */
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.cnci-ws-song-toolbar-cs {
    align-items: center;
    display: flex;
    /* Three 150px buttons plus the 280px search need about 770px on one line.
       Without this the row simply overflowed on a tablet once Export joined
       Import and Add Song. */
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

/*------------------------------------------------------------*/
/* T — Tab                                                    */
/*------------------------------------------------------------*/

.cnci-ws-tab-active-cs {
    background: var(--TableHeader);
    color: var(--Text);
    font-weight: 600;
}

.cnci-ws-tab-cs {
    background: var(--Text);
    border: none;
    color: var(--TextDark);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 6px 16px;
}

.cnci-ws-tab-group-cs {
    border: 1px solid var(--Disabled);
    border-radius: 6px;
    display: flex;
    overflow: hidden;
}

/*------------------------------------------------------------*/
/* T — Table                                                  */
/*------------------------------------------------------------*/

.cnci-ws-table-cs {
    background-color: var(--Section);
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    width: 100%;
    & tbody tr {
        border-bottom: 1px solid var(--Form);
        transition: background 0.1s;
    }
    & tbody tr:hover {
        background: var(--Form);
    }
    & tbody tr:last-child {
        border-bottom: none;
    }
    & td {
        border-bottom: 1px solid var(--Form);
        color: var(--TextDark);
        font-size: 1rem;
        padding: 8px 10px;
        text-align: left;
        vertical-align: middle;
        white-space: nowrap;
    }
    & th {
        border-bottom: 1px solid var(--Form);
        color: var(--TextMuted);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        padding: 8px 10px;
        text-align: left;
        white-space: nowrap;
    }
    & thead tr {
        background: var(--Section);
        border-bottom: 2px solid var(--Form);
    }
    & thead tr th {
        color: #000000;
        font-size: large;
    }
}

.cnci-ws-table-cs tbody tr:hover {
    background: var(--RowHover);
}

.cnci-ws-table-footer-cs {
    background-color: var(--TableNormal);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 10px;
    width: 100%;
}
.cnci-ws-table-header-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* T — Template                                               */
/*------------------------------------------------------------*/

.cnci-ws-template-card-body-cs {
    padding: 10px;
}

.cnci-ws-template-card-cs {
    border: 1px solid var(--RowOdd);
    border-radius: 5px;
    margin-bottom: 10px;
    overflow: hidden;
}

.cnci-ws-template-card-header-cs {
    align-items: center;
    background: var(--TableHeader);
    color: var(--Text);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 8px 12px;
}
.cnci-ws-template-card-header-cs strong {
    color: inherit;
    flex: 1;
}

.cnci-ws-template-section-row-cs {
    align-items: center;
    border-bottom: 1px solid var(--Form);
    display: flex;
    gap: 8px;
    padding: 6px 0;
}
.cnci-ws-template-section-row-cs span {
    flex: 1;
}

/*------------------------------------------------------------*/
/* T — Textarea / Input                                       */
/*------------------------------------------------------------*/

.cnci-ws-input-cs,
.cnci-ws-section-notes-input-cs,
.cnci-ws-select-cs {
    border: 1px solid var(--Disabled);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: small;
    margin-top: 4px;
    padding: 6px 10px;
    width: 100%;
    /* The anti-zoom floor — same reason as the song search above. */
    @media (max-width: 560px) {
        font-size: 16px;
    }
}

.cnci-ws-textarea-autosize-cs {
    overflow: hidden;
    resize: none;
}
.cnci-ws-textarea-cs {
    border: 1px solid var(--Disabled);
    border-radius: 4px;
    box-sizing: border-box;
    font-family: monospace;
    font-size: small;
    margin-top: 4px;
    padding: 6px 10px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* T — Transition                                             */
/*------------------------------------------------------------*/

.cnci-ws-transition-label-cs {
    color: var(--Disabled);
    font-weight: 600;
}

.cnci-ws-transition-row-cs {
    align-items: center;
    background: var(--Form);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    font-size: small;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 6px 8px;
}

.cnci-ws-transitions-wrap-cs {
    margin-bottom: 10px;
}

/*------------------------------------------------------------*/
/* W — Wrapper                                                */
/*------------------------------------------------------------*/

.cnci-ws-wrapper-cs,
.cnci-ws-configuration-wrapper-cs {
    padding: 10px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* Permission table — aligned to cnci-acm                      */
/*------------------------------------------------------------*/

.cnci-ws-row-cs {
    height: 30px;
}

.cnci-ws-col-flex-cs {
    min-width: 200px;
    width: 100%;
    text-align: left;
}

.cnci-ws-col-large-cs {
    min-width: 200px;
    text-align: left;
    width: 400px;
}

.cnci-ws-col-medium-cs {
    min-width: 200px;
    text-align: left;
    width: 300px;
}

.cnci-ws-col-mini-cs {
    width: 75px;
}

.cnci-ws-col-small-cs {
    min-width: 100px;
    text-align: left;
    width: 120px;
}

.cnci-ws-tbody-cs{
    background-color: var(--TableNormal);
    & tr:nth-child(even) td {
        background-color: var(--RowEven);
    }
    & tr:nth-child(odd) td {
        background-color: var(--RowOdd);
    }
    & tr:hover td {
        background-color: var(--RowHover);
    }
}

.cnci-ws-horizontalrule-cs {
    box-sizing: 2px;
    height: 2px;
    margin-bottom: 1px;
    margin-top: 1px;
}

/* box-sizing is new. width: 100% plus 20px of padding made this 20px wider
   than whatever held it. On a full-width page nobody noticed; the template
   detail now sits inside a padded panel, where the same 20px shows as the
   header hanging over the right edge of its own panel. */
.cnci-ws-header-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-sizing: border-box;
    color: var(--Text);
    display: flex;
    font-size: large;
    height: 40px;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    @media (max-width: 768px) {
    font-size: small;
    }

}