/*------------------------------------------------------------*/
/* 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(optional)_Name_functionName              — JS functions (cnci_acm_pageaccess_delete_click)
- #pluginName-Page(optional)_Name-element-id               — element IDs (cnci-acm-pageaccess-delete-btn-id)
- .pluginName-Page(optional)_Name-element-cs               — CSS classes (cnci-acm-pageaccess-delete-btn-cs)
- data-Name-Page(optional)_Attribute                       — data attributes on HTML elements (data-delete-type)
*/

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


/*------------------------------------------------------------*/
/* 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);
    --RowEven:      #d4d5d5;
    --RowHover:     #c2d9f0;
    --RowOdd:       #e6e6e6;
    --Shadow:       rgba(0,0,0,0.5);
    --Section:      #b8b9b9;
    --SnackBar:     #000000;
    --subheader:    #436175;
    --Success:      #185FA5;
    --TableHeader:  #185FA5;
    --TableNormal:  #e6e6e6;
    --Text:         #ffffff;
    --TextDark:     #000000;
}

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

.cnci-acm-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;
    }
}

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

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

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

.cnci-acm-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);
    }
}

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

.cnci-acm-category-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-acm-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-acm-category-btn-view-cs {
    background-color: #1e9bff;
    border: none;
    border-radius: 50%;
    border-width: 0px;
    color: #ffffff;
    cursor: pointer;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 700;
    height: 26px;
    line-height: 26px;
    padding: 0;
    text-align: center;
    width: 26px;
    &:hover {
        background-color: #1789e6;
        box-shadow: var(--Shadow);
    }
}

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

.cnci-acm-category-main-wrapper-cs {
    width: 100%;
}

/* The member list is the only table in this plugin with a freeze pane, and the
   second class on its scroll div in the view is what keeps it that way. Branch,
   Group, Church Role, Page Access, Book Access, Permission and the three badge
   lists all share .cnci-acm-category-main-div-cs, .cnci-acm-table-cs and
   .cnci-acm-tbody-cs, so every rule below descends from
   .cnci-acm-category-member-scroll-cs instead. Freeze pane for Access / Member
   only, in one class.

   Why the height cap is the whole trick. .cnci-acm-category-main-div-cs already
   sets overflow-x: auto, and CSS turns the other axis into auto along with it,
   so this div — not the page — is already the scrollport a sticky cell inside it
   measures itself against. But with no height limit it never scrolls vertically:
   the header has no room to move and top: 0 does nothing. Capping the height is
   what turns "sticky" from a no-op into a freeze pane. 75vh leaves the page
   header and the site nav visible above it on every device in the simulation;
   min-height stops it collapsing on a short landscape phone.

   The vertical offsets. Two <thead> rows means two of them, and constants are
   only safe if the bars above are a known height — hence the explicit 40px and
   48px. Both are taller than the content they hold (the label row wants about
   34px, the filter row about 47px), so nothing is being squeezed; they are
   declared so the offsets underneath cannot drift.

   The column widths. The left offsets are running totals of the widths above
   them, so those widths have to be exact rather than suggested: width alone is
   a hint that the auto table layout may grow past, and the min/max pair is what
   pins it. 56px for the "i" column and not the 75px the stylesheet nominally
   asks for — the button is 26px and the padding 10px a side, so 46px is the
   whole content and 75 would spend 29px of a 390px phone on nothing.

   Breakpoint 560. The plugin family uses 500 / 768 / 769 / 1000 / 1200 and none
   of them is the line this needs: an iPad Air is 820px in portrait, so 768 never
   reaches it and 1000 would catch laptops too. 560 separates "phone in portrait"
   from everything else. */
.cnci-acm-category-member-scroll-cs {
    max-height: 75vh;
    min-height: 320px;
    /* border-collapse: collapse hands every border to the table rather than to
       the cell, and a sticky cell then scrolls away from its own border — the
       header ends up floating with no line under it. Separating them keeps each
       border attached to the cell that carries it; the two rules further down
       restore what separating them costs, because a <tr> border is simply not
       painted in separate mode. */
    & .cnci-acm-table-cs {
        border-collapse: separate;
        border-spacing: 0;
    }
    & .cnci-acm-table-cs tbody tr:last-child td {
        border-bottom: none;
    }
    & .cnci-acm-table-cs td.cnci-acm-col-mini-cs,
    & .cnci-acm-table-cs thead th:nth-child(1) {
        left: 0;
        max-width: 56px;
        min-width: 56px;
        position: sticky;
        width: 56px;
        z-index: 2;
    }
    /* overflow: hidden is not decoration here. A capped cell whose text is
       nowrap paints straight over its neighbour without it, and these cells sit
       above their neighbours in the stacking order, so the overflow would land
       on top of the next column rather than under it. */
    & .cnci-acm-table-cs td:nth-child(2),
    & .cnci-acm-table-cs th:nth-child(2) {
        left: 56px;
        max-width: 200px;
        min-width: 200px;
        overflow: hidden;
        position: sticky;
        text-overflow: ellipsis;
        width: 200px;
        z-index: 2;
    }
    /* The box-shadow is where the frozen pane ends. Without a line there the
       table reads as one surface with two columns inexplicably refusing to move;
       with it, the eye sees a divider and the behaviour explains itself. */
    & .cnci-acm-table-cs td:nth-child(3),
    & .cnci-acm-table-cs th:nth-child(3) {
        box-shadow: 2px 0 4px -2px var(--Shadow);
        left: 256px;
        max-width: 200px;
        min-width: 200px;
        overflow: hidden;
        position: sticky;
        text-overflow: ellipsis;
        width: 200px;
        z-index: 2;
    }
    & .cnci-acm-table-cs thead tr:first-child th {
        background: var(--Section);
        height: 40px;
        position: sticky;
        top: 40px;
        z-index: 3;
    }
    /* The frozen header cells sit at the crossing of both freezes, so they have
       to win against a frozen body cell scrolling up underneath them and against
       a scrolling header cell passing beneath them sideways.

       The row qualifier is repeated in both selectors on purpose. Written as
       `thead th:nth-child(-n+3)` this is one step LESS specific than the two row
       rules, the z-index never lands, and every header cell stays at 3 — where
       equal z-index is settled by document order and the scrolling cells come
       later in the row. That draft put "Church Role" straight over "First Name"
       while every geometry measurement still passed. */
    & .cnci-acm-table-cs thead tr:first-child th:nth-child(-n+3),
    & .cnci-acm-table-cs thead tr.cnci-acm-colfilter-row-cs th:nth-child(-n+3) {
        z-index: 4;
    }
    & .cnci-acm-table-cs thead tr:last-child th {
        border-bottom: 2px solid var(--Form);
    }
    & .cnci-acm-table-cs thead tr.cnci-acm-colfilter-row-cs th {
        background: var(--Section);
        height: 48px;
        position: sticky;
        top: 80px;
        z-index: 3;
    }
    /* The "Members" bar is a sibling of the table inside the same scrollport and
       is already pinned horizontally. Pinning it vertically as well is what lets
       the two header rows below it use fixed offsets. */
    & .cnci-acm-table-header-cs {
        top: 0;
        z-index: 5;
    }
    /* A frozen cell is painted over the row scrolling beneath it, so it needs an
       opaque background of its own or two names show through each other. The
       striping already lives on the td; this only has to not undo it. */
    & .cnci-acm-tbody-cs tr:hover td:nth-child(-n+3) {
        background-color: var(--RowHover);
    }
    & .cnci-acm-tbody-cs tr:nth-child(even) td:nth-child(-n+3) {
        background-color: var(--RowEven);
    }
    & .cnci-acm-tbody-cs tr:nth-child(odd) td:nth-child(-n+3) {
        background-color: var(--RowOdd);
    }
    /* Phones. A 456px frozen pane is wider than an iPhone 14 leaves room for,
       which would give the user nothing to scroll and make the feature worse
       than not having it. Same three columns at the narrowest widths that still
       read: 48 + 92 + 92 is 232, so a 390px phone keeps about 158px of the table
       moving beside it. The side padding drops with them, or a 26px button will
       not fit inside a 48px cell. */
    @media (max-width: 560px) {
        & .cnci-acm-table-cs td.cnci-acm-col-mini-cs,
        & .cnci-acm-table-cs thead th:nth-child(1) {
            max-width: 48px;
            min-width: 48px;
            padding-left: 6px;
            padding-right: 6px;
            width: 48px;
        }
        & .cnci-acm-table-cs td:nth-child(2),
        & .cnci-acm-table-cs th:nth-child(2) {
            left: 48px;
            max-width: 92px;
            min-width: 92px;
            padding-left: 6px;
            padding-right: 6px;
            width: 92px;
        }
        & .cnci-acm-table-cs td:nth-child(3),
        & .cnci-acm-table-cs th:nth-child(3) {
            left: 140px;
            max-width: 92px;
            min-width: 92px;
            padding-left: 6px;
            padding-right: 6px;
            width: 92px;
        }
        /* The two filter boxes inside the frozen name columns lose their side
           padding too, or a 92px cell holds an input with no room for a caret.
           16px type rides along: any input smaller than that makes iPhone
           Safari zoom the whole page into it on focus. */
        & .cnci-acm-colfilter-row-cs th input {
            font-size: 16px;
            padding: 5px 4px;
        }
    }
}

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

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

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

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

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

.cnci-acm-colfilter-row-cs{
    & 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;
    border-width: 0px;
    color: var(--Text);
    height: 30px;
    width: 80px;
        &:hover {
            color: var(--Highlight);
            font-weight: 700;
            text-shadow: var(--Shadow);
        }
    }
}

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

.cnci-acm-data-cs {
    font-size: large;
    font-weight: 400;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

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

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

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

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

.cnci-acm-header-cs {
    color: var(--Text);
}

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

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

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

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

/* Whose record is open, at the top of the Member Editor. Grey and rounded
   like a heading rather than square and white like the fields under it, so
   it does not read as one more thing to type into. --Section and not
   --SubSection: this plugin's :root has no --SubSection.

   The span is the login. It is a separate line and deliberately plain,
   because it is only there to tell two members of the same name apart. */
.cnci-acm-member-name-cs {
    background-color: var(--Section);
    border-radius: 5px;
    color: var(--TextDark);
    font-size: large;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 8px 12px;

    & span {
        display: block;
        font-size: small;
        font-weight: 400;
    }
}

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

.cnci-acm-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;
        margin-bottom: 2px;
    }
}

.cnci-acm-modal-checkbox-cs {
    height: 20px;
    margin: 2px;
    width: 20px;
}

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

.cnci-acm-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-acm-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-acm-modal-label-cs {
    font-size: large;
    font-weight: 400;
    height: 20px;
    width: 100%;
}

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

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

/*------------------------------------------------------------*/
/* R                                                        */
/*------------------------------------------------------------*/

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

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

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

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

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

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

.cnci-acm-input-cs,
.cnci-acm-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%;
}

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

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

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

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

.cnci-acm-table-cs {
    background-color: var(--Section);
    border-collapse: collapse;
    min-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-acm-table-footer-cs {
    background-color: var(--TableNormal);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    height: 10px;
    left: 0;
    position: sticky;
    width: 100%;
}

.cnci-acm-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;
    left: 0;
    padding-left: 10px;
    padding-right: 10px;
    position: sticky;
    width: 100%;
}

.cnci-acm-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);
    }
}

/* Member View modal — read-only label/value rows */
.cnci-acm-view-row-cs {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--RowEven, #eee);
}
.cnci-acm-view-label-cs {
    font-weight: bold;
    min-width: 130px;
    flex-shrink: 0;
}
.cnci-acm-view-value-cs {
    word-break: break-word;
    white-space: pre-wrap;
}