/*------------------------------------------------------------*/
/* Style format                                               */
/*
.class {
    Properties are listed alphabetically.
    Nested rules follow the properties, also alphabetically.
}

Rules are grouped under alphabetical letter headers, and are
alphabetical within each group.
No hardcoded colors — always use a var(--Name) from :root.
*/

/*
Naming Convention:
- PluginName_Page_Group_Element_functionName                            — JS functions (cnci_pln_setup_plan_btn_add)
- #pluginName-Page-Group-element-function(optional)-id                  — element IDs (cnci-pln-setup-plan-btn-add-id)
- .pluginName-Page-Group-element-function(optional)-cs                  — CSS classes (cnci-pln-setup-plan-btn-add-cs)
- data-Name-Group-Element-Attribute                                     — data attributes on HTML elements (data-plan-delete)
*/

/*------------------------------------------------------------*/


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

/*------------------------------------------------------------*/
/* Base — Elements                                          */
/*------------------------------------------------------------*/

button:disabled,
select:disabled,
option:disabled{
    opacity: 0.4;
    pointer-events: none;
}

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

/*------------------------------------------------------------*/
/* B                                                        */
/*------------------------------------------------------------*/

.cnci-pln-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-pln-btn-add-func-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-pln-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-pln-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-pln-btn-export-cs {
    font-size: large;
    padding: 2px 8px;
}

.cnci-pln-btn-func-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 150px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
    }
}

.cnci-pln-btn-func-small-cs {
    background-color: var(--BtnSecondary);
    border-radius: 5px;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 100px;
    &:hover {
        color: var(--Highlight);
        font-weight: 700;
    }
}

.cnci-pln-btn-rename-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);
    }
}

/*------------------------------------------------------------*/
/* C                                                        */
/*------------------------------------------------------------*/

.cnci-pln-card-header-cs {
    align-items: center;
    background-color: var(--Glow);
    border-radius: 5px;
    color: var(--Text);
    display: flex;
    gap: 5px;
    height: 40px;
    padding: 5px;
    width: 100%;
}

.cnci-pln-catfilter-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-pln-location-filter-bar-cs{
    align-items: center;
    background-color: var(--Section);
    border-radius: 5px;
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;  
}

.cnci-pln-catfilter-item-cs {
    align-items:baseline;
    display: flex;
    gap: 8px;
    width: 300px;
}


.cnci-pln-catfilter-item-cs .cnci-pln-filter-label-cs {
    height: auto;
    white-space: nowrap;
    width: auto;
}

.cnci-pln-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;
        text-shadow: var(--Shadow);
    }
}
.cnci-pln-category-main-div-cs {
    margin-bottom: 5px;
    overflow-x: auto;
    width: 100%;
}
.cnci-pln-check-wrapper-cs {
    align-items: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;
    & label {
        align-items: center;
        align-items: left;
        display: flex;
        height: 20px;
        margin-bottom: 5px;
        width: 200px;
    }
}

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

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

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

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

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

.cnci-pln-controlbtn-cs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* D                                                        */
/*------------------------------------------------------------*/

.cnci-pln-denied-cs {
    background-color: var(--Form);
    border-left: 5px solid var(--Error);
    border-radius: 5px;
    margin: 20px auto;
    max-width: 500px;
    padding: 20px;
}

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

.cnci-pln-detail-section-cs {
    background-color: var(--Section);
    border-radius: 5px;
    height: 20px;
    margin-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

.cnci-pln-dragpoint-cs {
    color: var(--TextDark);
    font-size: x-large;
    font-weight: 400;
    width: 20px !important;
}

/*------------------------------------------------------------*/
/* E                                                        */
/*------------------------------------------------------------*/

.cnci-pln-event-card-body-cs {
    border: 1px solid var(--Section);
}

.cnci-pln-event-card-cs {
    border-radius: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    overflow: hidden;
}

.cnci-pln-event-clickable-cs {
    cursor: pointer;
}

.cnci-pln-event-clickable-cs {
    cursor: pointer;
}

.cnci-pln-event-details-cs {
    padding: 1px;
    width: 100%;
    &>p:nth-child(1) {
        color: var(--TextDark);
        font-size: x-large;
        font-weight: 500;
    }
    &>p:nth-child(2) {
        color: var(--TextDark);
        font-size: medium;
        font-style: italic;
        font-weight: 400;
    }
    &>p:nth-child(3) {
        color: var(--TextDark);
        font-size: medium;
        font-weight: 400;
    }
    &>p:nth-child(4) {
        color: var(--TextDark);
        font-size: medium;
        font-weight: 400;
    }
}

.cnci-pln-event-month-cs {
    border-radius: 5px;
    color: var(--Text);
    font-size: large;
    height: 20px;
    margin-bottom: 3px;
    padding: 2px;
    text-align: center;
    width: 100%;
}

.cnci-pln-event-section-cs {
    background-color: var(--subheader);
    border-radius: 5px;
    height: 30px;
    margin-bottom: 3px;
    padding: 2px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* F                                                        */
/*------------------------------------------------------------*/

.cnci-pln-filter-list-cs {
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.cnci-pln-filter-list-cs label {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    &  input[type="checkbox"]{
        height: 20px;
        width: 20px;
    }
}

.cnci-pln-filter-list-cs label:hover {
    background-color: var(--RowHover);
}

.cnci-pln-flex-grow-cs {
    flex: 1;
}

.cnci-pln-footer-cs {
    background-color: var(--TableNormal);
    border: 1px solid var(--SubSection);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-bottom: 2px;
    min-height: 10px;
    padding: 10px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* H                                                        */
/*------------------------------------------------------------*/

.cnci-pln-header-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    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;
    }

}

.cnci-pln-hidden-cs {
    display: none;
}
.cnci-pln-horizontalrule-cs {
    box-sizing: 2px;
    height: 2px;
    margin-bottom: 1px;
    margin-top: 1px;
}

/*------------------------------------------------------------*/
/* I                                                        */
/*------------------------------------------------------------*/

.cnci-pln-input-cs,
.cnci-pln-select-cs {
    border: 1px solid var(--Disabled);
    border-radius: 5px;
    font-size: large;
    font-weight: 400;
    height: 30px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

/*------------------------------------------------------------*/
/* L                                                        */
/*------------------------------------------------------------*/

.cnci-pln-list-empty-cs {
    padding: 5px;
}

.cnci-pln-label-cs {
    font-size: large;
    font-weight: 800;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

/* inline-block is what gives the ellipsis something to measure against; a plain
   inline anchor cannot clip. nowrap is what makes the ellipsis appear at all —
   a plan cell shows the link's name, and a name has spaces to wrap at, so
   without this a long one would quietly become two lines instead of clipping.
   vertical-align keeps the clipped text on the same baseline as an ordinary
   cell so a link row does not sit a pixel low. */
.cnci-pln-link-cs {
    color: var(--Main);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-decoration: underline;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.cnci-pln-link-cs:hover {
    color: var(--Hover);
}

/* The 130px on a plan cell is a suggestion, not a rule — table auto-layout
   widens a column to fit its content, so an unbounded link pushed the five date
   columns out to 320px each and put the whole grid behind a horizontal scroll.
   A real ceiling has to be set on the link itself. Only grid cells carry this;
   the event table's value column is wide and should show its address in full. */
.cnci-pln-link-cell-cs {
    max-width: 130px;
}

/*------------------------------------------------------------*/
/* M                                                        */
/*------------------------------------------------------------*/

#cnci-pln-setup-field-assign-role-modal-id .cnci-pln-modal-content-cs {
    max-height: 80vh;
    width: 400px;
}

.cnci-pln-max-label-cs {
    color: var(--TextLight);
    font-size: small;
    font-weight: 400;
}

.cnci-pln-modal-body-cs {
    background-color: var(--Form);
    max-height: 400px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

.cnci-pln-modal-btn-save-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-pln-modal-checkbox-cs {
    height: 20px;
    margin: 2px;
    width: 20px;
}

.cnci-pln-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-pln-modal-content-cs {
    background-color: var(--Form);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow-y: auto;
    width: 450px;
}
.cnci-pln-modal-content-wide-cs {
    max-height: 80vh;
    overflow-y: auto;
    width: 500px;
}

.cnci-pln-modal-footer-cs {
    align-items: center;
    background-color: var(--TableNormal);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    gap: 10px;
    height: 50px;
    justify-content: center;
    width: 100%;
}

.cnci-pln-modal-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-pln-modal-label-cs {

    font-size: large;
    font-weight: 400;
    height: 20px;
    padding-top: 5px;
    width: 100%;
}
.cnci-pln-modal-label-hint-cs {
    font-size: small;
    font-weight: 400;
}

.cnci-pln-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-pln-modal-wrapper-cs.cnci-pln-modal-show-cs {
    display: flex;
}

/*------------------------------------------------------------*/
/* P                                                        */
/*------------------------------------------------------------*/

.cnci-pln-placeholder-cs {
    color: var(--TextLight);
    font-style: italic;
}

.cnci-pln-plan-action-row-cs {
    background-color: var(--TableNormal);
    border: 1px solid var(--Section);
    display: flex;
    gap: 10px;
    padding: 5px;
    padding-left: 10px;
}

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

.cnci-pln-plan-card-cs {
    border-radius: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
    overflow: hidden;
}

.cnci-pln-plan-cell-cs {
    cursor: pointer;
    min-width: 120px;
}

.cnci-pln-plan-cell-cs:hover {
    background-color: var(--RowHover);
}

.cnci-pln-plan-date-cell-cs {
    border-radius: 3px;
    cursor: pointer;
    font-size: small;
    padding: 4px;
}

.cnci-pln-plan-date-cell-cs:hover {
    background-color: var(--RowHover);
}

.cnci-pln-plan-export-row-cs td {
    background-color: var(--Section);
    padding: 4px;
    text-align: center;
}

.cnci-pln-plan-section-bar-cs {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 5px 10px;
}

.cnci-pln-plan-section-body-cs {
    padding: 5px 10px;
}

.cnci-pln-plan-section-header-cs td {
    background-color: var(--Section);
    font-weight: 600;
    padding: 5px 10px;
}

.cnci-pln-plan-setup-card-header-cs {
    align-items: center;
    background-color: var(--TableHeader);
    cursor: pointer;
    display: flex;
    gap: 10px;
    height: 40px;
    padding: 0 10px;
}

.cnci-pln-plan-setup-header-cs {
    align-items: center;
    background-color: var(--subheader);
    border-radius: 5px;
    color: var(--Text);
    display: flex;
    gap: 5px;
    height: 40px;
    padding: 5px;
    width: 100%;
}

.cnci-pln-plan-setup-header-cs {
    align-items: center;
    background-color: var(--TableHeader);
    cursor: pointer;
    display: flex;
    gap: 10px;
    height: 40px;
    padding: 0 10px;
}

/* The caret goes on the h3, and that h3 is .cnci-pln-header-cs — a flex row
   with justify-content: space-between. Left alone the ::before becomes its own
   flex item and space-between throws it to the far left edge of the blue bar,
   away from the words it belongs to. Pinning this one h3 to flex-start keeps
   the arrow against the title; these card headers only ever hold the name, so
   nothing in them depends on space-between. Same reasoning as the Time Off
   header further down. */
.cnci-pln-plan-setup-header-cs h3 {
    color: var(--Text);
    flex: 1;
    justify-content: flex-start;
}

/* The caret size is absolute on purpose. It was 0.9em, which reads as one
   shared value but resolves against each host's OWN font-size — and the four
   headers that carry a caret are four different sizes, so one number rendered
   as four: 16.2px on these cards, 18.954px on Time Off, 14.4px in Worship,
   16.848px in Book. Same value, same 0.9em, four visibly different arrows.
   The 768px step is not decoration: .cnci-pln-header-cs already drops to
   font-size: small at exactly that breakpoint, so without it the caret would
   come out larger than the words it labels on a phone. Worship and Book carry
   no step because their headers never resize — at 12px they render as a speck
   against text that stayed at 16px and 18.72px.
   Change one of the four caret rules and run verify/caret-parity.js; it checks
   every caret's rendered size at both widths, which is the check that was
   missing when this shipped. */
.cnci-pln-plan-setup-header-cs h3::before {
    content: "\25B8";
    display: inline-block;
    font-size: 15px;
    margin-right: 8px;
    transition: transform 0.15s ease;
    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.cnci-pln-plan-setup-header-cs.cnci-pln-card-open-cs h3::before {
    transform: rotate(90deg);
}

.cnci-pln-published-content-cs {
    background-color: var(--EventContent);
    height: 100%;
    max-height: 500px;
    overflow-y: auto;
    padding: 2px;
    width: 100%;
}

.cnci-pln-published-event-content-cs {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 100%;
    justify-content: left;
    width: 100%;
    &:hover {
        transform: translateY(-3px);
    }
}

.cnci-pln-published-event-date-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 90px;
    &>p:nth-child(1) {
        color: var(--Text);
        font-size: x-large;
        font-weight: 500;
    }
    &>p:nth-child(2) {
        color: var(--Text);
        font-size: xx-large;
        font-weight: 500;
    }
}

.cnci-pln-published-event-wrapper-cs {
    background-color: var(--EventNormal);
    border-radius: 5px;
    height: auto;
    margin-bottom: 3px;
    padding: 10px;
    width: 100%;
    &:hover {
        background-color: var(--EventHover);
    }
    &:hover .cnci-pln-published-event-date-cs p {
        color: var(--Highlight);
    }
}

.cnci-pln-published-filter-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-pln-published-filter-item-cs{
    align-items:baseline;
    display: flex;
    gap: 8px;
    width: 300px;
}

.cnci-pln-published-filter-item-cs .cnci-pln-filter-label-cs {
    height: auto;
    white-space: nowrap;
    width: auto;
}

.cnci-pln-published-main-div-cs {
    margin-bottom: 5px;
    overflow-x: auto;
    width: 100%;
}

.cnci-pln-published-main-wrapper-cs {
    width: 100%;
}

.cnci-pln-published-plan-wrapper-cs {
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.cnci-pln-published-search-bar-cs {
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.cnci-pln-published-search-bar-cs input {
    box-sizing: border-box;
    width: 100%;
}

.cnci-pln-published-sub-wrapper-cs {
    align-items: start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    overflow-x: auto;
    width: 100%;
}

.cnci-pln-published-table-cs {
    background-color: var(--Section);
    border-collapse: collapse;
    margin-top: 10px;
    width: 100%;
}

.cnci-pln-published-table-cs tbody tr td {
    background-color: var(--TableNormal);
    border: 1px solid var(--Section);
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    width: 130px;
}

/* In the event-detail modal, long values (e.g. Address) wrap and let the row
   grow, instead of the nowrap the scrollable plan grid relies on. The cell's
   40px height acts as a minimum, so short rows stay tidy and long ones expand. */
.cnci-pln-modal-body-cs .cnci-pln-published-table-cs tbody tr td {
    overflow-wrap: break-word;
    white-space: normal;
}

/* Freeze pane + wrapped rows for the published PLAN, in one scope class — the
   same shape as the member list's .cnci-acm-category-member-scroll-cs. Two
   other tables share .cnci-pln-published-table-cs (the published timeoff list
   and the weekday editor grid), so everything below descends from the class
   the plan renderer alone carries, and neither of them can catch it.

   The wrap is the published page's contract now: a reader is shown everything,
   so the theme's 150px td clamp and the grid's own nowrap are both released
   here and the row grows instead. The shared height: 40px survives as a
   minimum — a table cell treats height as a floor, so short rows stay tidy.

   border-collapse: separate, for the same reason the member list needed it: in
   collapse mode the border belongs to the table and a sticky cell scrolls away
   from its own line. Separating hands each cell its border back — and doubles
   every interior line to 2px, so the width rules below paint right/bottom only
   and restore the collapsed look by hand. */
.cnci-pln-published-plan-freeze-cs {
    border-collapse: separate;
    border-spacing: 0;
    & tbody tr td {
        border-width: 0 1px 1px 0;
        max-width: none;
        overflow: visible;
        overflow-wrap: break-word;
        text-overflow: clip;
        white-space: normal;
    }
    & tbody tr:first-child td {
        border-top-width: 1px;
    }
    & tbody tr td:first-child {
        border-left-width: 1px;
    }
    /* The frozen label column. 130px is the width the grid already gives every
       column, so freezing it changes nothing about the layout — only about
       what stays put. The opaque background is not decoration: a frozen cell
       is painted over the row scrolling beneath it, and the box-shadow is the
       line where the pane ends. Labels wrap inside their 130px like every
       other cell — the pane never shows "Worship Le…". */
    & .cnci-pln-row-cs td:first-child {
        background-color: var(--TableNormal);
        box-shadow: 2px 0 0 0 var(--Section);
        left: 0;
        max-width: 130px;
        min-width: 130px;
        position: sticky;
        width: 130px;
        z-index: 2;
    }
    /* The section titles ("Service", "Worship Team") live in a cell that spans
       the whole grid, so the cell cannot be frozen — but the text inside it
       can. An inline-block rides the scroll at the same 10px the cell's own
       padding gives it, so "Worship Team" is still readable five columns in. */
    & .cnci-pln-plan-section-header-cs td strong {
        display: inline-block;
        left: 10px;
        position: sticky;
    }
}

.cnci-pln-published-two-div-cs {
    background-color: var(--Section);
    height: Auto;
    margin-bottom: 5px;
    min-height: 100px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.cnci-pln-timeoff-add-row-cs{
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 5px;
    & .cnci-pln-input-cs{
        width: 300px;
    }
}

.cnci-pln-timeoff-modal-add-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-pln-timeoff-list-item-cs{
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: space-between;
    padding: 5px; 
}

.cnci-pln-timeoff-remove-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);
    }
}

/* Published Time Off — collapsible header + compact date/day columns */
.cnci-pln-timeoff-toggle-cs {
    cursor: pointer;
}

/* Setup Time Off now renders closed, so the header has to say it can be opened;
   a collapsed blue bar with nothing on it reads as a dead heading. The caret is
   on the h3 and not on the header itself because .cnci-pln-header-cs is
   display: flex with justify-content: space-between — a ::before on the header
   would become its own flex item and be pushed to the far end, away from the
   words it belongs to. Scoped to the setup wrapper: the published page has the
   same toggle class but still opens expanded. */
/* Absolute, and the same 15px/12px pair as the card caret above — see the long
   note on .cnci-pln-plan-setup-header-cs h3::before for why. This host is the
   worst offender of the four: it is a bare h3 inside .cnci-pln-header-cs with no
   font-size of its own, so it falls back to the UA's 1.17em (21.06px) and 0.9em
   rendered as 18.954px, the largest caret in the app, sitting one section away
   from a 16.2px one. */
.cnci-pln-setup-section-wrapper-cs .cnci-pln-timeoff-toggle-cs h3::before {
    content: "\25B8";
    display: inline-block;
    font-size: 15px;
    margin-right: 8px;
    transition: transform 0.15s ease;
    @media (max-width: 768px) {
        font-size: 12px;
    }
}

.cnci-pln-setup-section-wrapper-cs .cnci-pln-timeoff-toggle-cs.cnci-pln-timeoff-open-cs h3::before {
    transform: rotate(90deg);
}

.cnci-pln-published-timeoff-table-cs td.cnci-pln-timeoff-published-day-cs {
    text-align: center;
    width: 44px;
}

.cnci-pln-published-timeoff-table-cs td.cnci-pln-timeoff-published-dow-cs {
    text-align: center;
    width: 56px;
}

.cnci-pln-published-timeoff-table-cs td.cnci-pln-timeoff-published-names-cs {
    /* Published should see everything — the names list wraps and the row
       grows, instead of the theme's 150px td clamp cutting the third name. */
    max-width: none;
    overflow: visible;
    white-space: normal;
    width: auto;
}

.cnci-pln-timeoff-empty-cs {
    padding: 12px;
}

/*------------------------------------------------------------*/
/* N                                                        */
/*------------------------------------------------------------*/
.cnci-pln-notassigned-cs {
    color: var(--Error);
}

/*------------------------------------------------------------*/
/* R                                                        */
/*------------------------------------------------------------*/
.cnci-pln-role-info-cs {
    font-size: small;
    padding: 5px;
}

.cnci-pln-row-clickable-cs {
    cursor: pointer;
}

.cnci-pln-row-clickable-cs:hover td {
    background-color: var(--RowHover);
}

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

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

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

/*------------------------------------------------------------*/
/* S                                                        */
/*------------------------------------------------------------*/

.cnci-pln-search-highlight-cs {
    background-color: yellow;
    border-radius: 2px;
    color: black;
    padding: 0 2px;
}

.cnci-pln-section-cs {
    align-items: center;
    background-color: var(--TableHeader);
    border-radius: 5px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

.cnci-pln-section-footer-cs {
    background-color: var(--TableNormal);
    border: 1px solid var(--Section);
    display: flex;
    gap: 10px;
    padding: 5px;
    padding-left: 10px;
}

.cnci-pln-select-filter-cs {
    border-radius: 5px;
    font-size: large;
    font-weight: 400;
    height: 30px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: 180px;
}

.cnci-pln-setup-main-wrapper-cs {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.cnci-pln-setup-section-cs {
    align-items: center;
    background-color: var(--SetupHeader);
    cursor: pointer;
    display: flex;
    gap: 10px;
    height: 40px;
    padding: 0 10px;
    & h3 {
        background-color: var(--SetupHeader);
    }
}

.cnci-pln-setup-section-wrapper-cs {
    background-color: var(--Section);
    min-width: 400px;
    width: 100%;
}

.cnci-pln-setup-table-cs {
    background-color: var(--Section);
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.cnci-pln-setup-table-cs tbody tr td {
    background-color: var(--TableNormal);
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

.cnci-pln-setup-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%;
}

.cnci-pln-setup-table-section-cs {
    background-color: var(--Section);
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.cnci-pln-setup-table-section-cs tbody tr td {
    background-color: var(--SubSection);
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Horizontal-scroll frame for the event grid — wraps the stacked fixed-layout
   tables so they scroll together (aligned) on narrow screens instead of squeezing. */
.cnci-pln-hscroll-cs {
    overflow-x: auto;
}

.cnci-pln-hscroll-cs .cnci-pln-setup-table-cs,
.cnci-pln-hscroll-cs .cnci-pln-setup-table-section-cs {
    min-width: 640px;
}

.cnci-pln-setuprow1-cs {
    display: flex;
    flex-direction: row;
    height: auto;
    justify-content: baseline;
    width: 100%;
}

/* 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-pln-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-pln-snackbar-error-cs .cnci-pln-snackbar-cs {
    align-items: center;
    background: var(--Error);
    column-gap: 10px;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    padding: 16px 24px;
}

.cnci-pln-snackbar-error-cs .cnci-pln-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-pln-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-pln-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-pln-snackbar-wrapper-cs.cnci-pln-snackbar-show-cs {
    display: block;
}

.cnci-pln-status-draft-cs {
    background-color: var(--Section);
    border-radius: 10px;
    color: var(--TextDark);
    font-size: small;
    font-weight: 600;
    padding: 2px 8px;
}

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

.cnci-pln-subsection-cs {
    align-items: center;
    background-color: var(--SubSection);
    border: 1px solid var(--SubSection);
    height: 40px;
    padding: 5px;
    width: 100%;
    & p {
        color: var(--TextDark);
        font-size: large;
        font-weight: 700;
        padding: 5px;
    }
    & td {
        background-color: var(--SubSection);
        color: var(--TextDark);
        font-size: large;
        font-weight: 700;
        padding: 5px;
    }
}

/*------------------------------------------------------------*/
/* T                                                        */
/*------------------------------------------------------------*/

.cnci-pln-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-pln-table-footer-cs {
    background-color: var(--TableNormal);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 10px;
    width: 100%;
}
.cnci-pln-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%;
}
.cnci-pln-table-scroll-cs {
    overflow-x: auto;
}

.cnci-pln-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-pln-template-card-cs {
    margin-bottom: 5px;
    margin-top: 5px;
}

.cnci-pln-template-field-row-cs {
    align-items: center;
    border-bottom: 1px solid var(--Section);
    display: flex;
    gap: 10px;
    padding: 5px 15px;
}

.cnci-pln-timeoff-scroll-cs {
    overflow-x: auto;
}

.cnci-pln-timeoff-table-cs{
    width: 100%;
    border-width: 0px;
    & td, & th {
        white-space: nowrap;
    }
    & 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);
        }
    }
}

/* Time Off Management — column filter row + column-filtered hidden state.
   The hide rule uses !important so it wins over the inline display the top
   Category filter sets, letting the two filters combine (AND). */
.cnci-pln-timeoff-filter-row-cs{
    height: 40px;
    & th input {
        border: 1px solid var(--Disabled);
        border-radius: 5px;
        border-color: var(--Section);
        padding: 5px;
        width: 100%;
    }
    & th button {
    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);
        }
    }
}
.cnci-pln-timeoff-filter-cs {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: normal;
}
.cnci-pln-timeoff-row-cs.cnci-pln-timeoff-colhidden-cs {
    display: none !important;
}

/* Plan Preview modal — wide enough to show the published plan table. */
.cnci-pln-plan-preview-content-cs {
    max-width: 1100px;
    width: 92vw;
}
.cnci-pln-plan-preview-content-cs .cnci-pln-modal-body-cs {
    overflow-x: auto;
}

/* Location — branch filter bar + inline branch column. */
.cnci-pln-location-filter-bar-cs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
}
.cnci-pln-location-branch-cs {
    white-space: nowrap;
}