/* ======================================= 1. RESET & BASE STYLES ======================================= */
/* Header row for forms */
.form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* The little "Linked" pill, hidden by default */
.link-pill {
    display: none;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 999px;
    background: #eaf6ef;
    /* soft green */
    color: #2b6a40;
    /* deep green */
    border: 1px solid #282e2a;
    font-weight: 600;
    white-space: nowrap;
}

/* Show when .linked class is present on the parent form */
.form-linked .link-pill {
    display: inline-block;
}

/* Soft glow to indicate "linked", no layout shift */
.form-linked {
    box-shadow: 0 0 0 2px rgba(43, 106, 64, 0.15), 0 6px 18px rgba(43, 106, 64, 0.08);
    transition: box-shadow 200ms ease;
}

/* Accessibility: also add a faint divider color change */
.form-linked .vodacom-form-wrapper,
.form-linked .device-form-wrapper {
    border-color: #dddad5;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: #fefaf5;
    overflow: hidden;
    /* Prevent background scroll */
    box-sizing: border-box;
}


/* ======================================= 3. MAIN CONTENT LAYOUT ======================================= */
.content,
.content2,
.content3,
.home-dashboard .content4 {
    margin-left: var(--sidebar-space);
    transition: margin 300ms ease-out;
}

/* Keep your original vertical/horizontal spacing */
.content {
    margin: 20px 20px 20px var(--sidebar-space);
}

.content2 {
    margin: -2px 20px 20px var(--sidebar-space);
}

.content3 {
    margin: 20px 20px 0 var(--sidebar-space);
}

.home-dashboard .content4 {
    margin-left: var(--sidebar-space);
}

.content {
    display: flex;
    gap: 10px;
    align-items: stretch;
    border-radius: 8px;
    flex-wrap: wrap;
    flex-wrap: nowrap;

}

/* 2) Neutralize the old formGroupWrapper so it doesn't hog width */
#formGroupWrapper {
    display: contents;
    /* "dissolves" the wrapper in layout */
    flex: initial !important;
    /* cancel any old flex:2 etc. */
    position: static !important;
    /* avoid absolute/relative quirks */
}

/* 3) Make each form column truly equal width */
.content>.contentInner,
#formGroupWrapper>.contentInner {
    flex: 1 1 0;
    /* equal columns */
    max-width: none;
    /* remove the 500px cap */
    width: auto;
    min-width: 0;
    /* prevent overflow in flex children */
}

/* 4) Ensure inputs don't force columns to stretch weirdly */
.contentInner form {
    width: auto;
    max-width: none;
}

/* Floating effect for .content2 block */
.content2 {
    display: flex;
    gap: 30px;
    align-items: stretch;
    max-height: calc(100vh - 50px - 80px);
    position: relative;
    background: #ffffff;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;


}


.contentInner {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 320px;
    /* don’t get narrower than this */
    max-width: none;
    height: calc(100vh - 50px);
    overflow-y: auto;
    flex: 1;
    margin-left: 20px;
    transition: transform 0.8s ease, box-shadow 0.5s ease;
    will-change: transform;
}

.contentInner:hover {

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}

.contentInner2 {
    background-color: white;

    border-radius: 0px 0px 14px 14px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
    position: relative;


    transition: transform 0.8s ease, box-shadow 0.5s ease;
    will-change: transform;
}

.contentInner2:hover {

    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
}


/* Content header inside contentInner */
.deviceCheckContainer {
    display: inline-flex;
    align-items: center;
    /* ✅ Aligns label and checkbox vertically */
    gap: 10px;
    margin-bottom: 15px;
    white-space: nowrap;
}

.deviceCheckContainer input[type="checkbox"] {
    transform: translateY(15px);
    /* Fine-tune vertical position */
}

.boxTopHeader {
    background-color: #ffffff;
    color: #4b5e70;
    text-align: center;
    padding: 16px 24px;
    font-size: 1.2em;
    font-weight: bold;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    flex-shrink: 0;
    z-index: 1;
    position: relative;
    /* needed for ::after positioning */
}



.boxTopHeader::after {
    content: "";
    position: absolute;
    left: 20px;
    /* trims 20px from the left */
    right: 20px;
    /* trims 20px from the right */
    bottom: 0;
    /* sits at the bottom */
    height: 2px;
    /* line thickness */
    background-color: #4b5e70;
    /* line color */
}


.boxTopHeader2 {
    background-color: white;
    color: #4b5e70;
    text-align: center;
    padding: 16px 24px 30px;
    font-size: 1.2em;
    font-weight: bold;
    align-items: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
    box-sizing: border-box;

}

.boxTopHeader2::after {
    content: "";
    position: absolute;
    left: 350px;
    /* trims 20px from the left */
    right: 350px;
    /* trims 20px from the right */
    bottom: 10px;
    height: 2px;

    /* Base color */
    background: linear-gradient(to right,
            rgba(75, 94, 112, 0.9),
            rgba(55, 69, 82, 0.9));

    /* Dimensional effect */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        /* subtle drop shadow */
        0 -1px 1px rgba(255, 255, 255, 0.3) inset;
    /* highlight from above */

    border-radius: 2px;
    /* makes edges softer */
}


/* Header: shadow on TOP + SIDES only, absolutely NONE on bottom */
.content3 {
    background: #ffffff !important;
    color: #4b5e70;
    font-size: 1.2em;
    font-weight: bold;

    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;



    border-top-left-radius: 18px !important;
    border-top-right-radius: 14px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    clip-path: inset(-10px -40px 2px -10px);

    position: relative;
    z-index: 3;
}






.sort-overlay {
    position: fixed;
    top: 28px;
    left: calc(var(--sidebar-space) + 10px);
    transition: all 300ms ease-out;
    background: linear-gradient(145deg,
            rgba(249, 245, 237, 0.85),
            rgba(236, 229, 215, 0.85));
    border: 1px solid rgba(45, 43, 38, 0.097);
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.10),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);

    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    height: 32px;
    width: 200px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


.sort-overlay label {
    font-size: 12px;
    padding: 0;
    position: relative;
    top: -2px;
    margin: 0;
    white-space: nowrap;
}

/* Style the select dropdown */
.sort-overlay select {
    font-size: 14px;
    padding: 4px 8px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 3px 6px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(6px);
    background-color: #ece5d7;

    border-radius: 8px;


    border: 1px solid rgba(45, 43, 38, 0.077);

    cursor: pointer;
    width: 140px;

    transition: background-color 0.6s ease;
    margin-left: 13px;
    position: relative;
    top: 6px;
}

.sort-overlay select:hover,
.sort-overlay select:focus {

    background-color: #4b5e70;
    color: white;
    /* slightly darker on hover/focus */
    outline: none;
}

.sort-overlay2 {
    position: fixed;
    top: 28px;
    right: 30px;
    transition: all 300ms ease-out;
    background: linear-gradient(145deg,
            rgba(249, 245, 237, 0.85),
            rgba(236, 229, 215, 0.85));
    border: 1px solid rgba(45, 43, 38, 0.097);
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.10),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    height: 32px;
    width: 200px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


.sort-overlay2 label {
    font-size: 12px;
    padding: 0;
    position: relative;
    top: -2px;
    margin: 0;
    white-space: nowrap;
}

.export-button {
    background-color: #f6efe3;
    /* Excel green */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
    position: relative;
    top: 6px;
    width: 40px
}

.export-button:hover {
    background-color: #1e5e3e;
}

#export-pdf-btn:hover {
    background-color: #9b1010;
}

.excel-icon {
    height: 16px;
    width: 16px;
}

.pdf-icon {
    height: 18px;
    width: 16px;
}

#export-pdf-btn {
    background-color: #f6efe3;
    /* Excel green */
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
    position: relative;
    top: 6px;
    width: 40px
}

/* ======================================= 4. FORM STYLES ======================================= */
form {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 transparent;
}

form::-webkit-scrollbar {
    width: 6px;
    /* thinner scrollbar */
}

form::-webkit-scrollbar-track {
    background: transparent;
    /* optional: track background */
}

form::-webkit-scrollbar-thumb {
    background-color: #c0c0c0;
    /* scrollbar color */
    border-radius: 3px;
    /* rounded edges */
}

/* Optional: reduce extra length if you want smaller thumb */
form::-webkit-scrollbar-thumb {
    min-height: 30px;
    /* make the draggable part shorter */
}

.vodacom-form-wrapper {
    background: #faf7f2;
    ;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #dddad5;
}

label {
    display: block;
    font-weight: bold;
    color: #333;
    margin-top: 15px;
}

.confirm {
    width: auto;
    height: auto;
    color: white;
    background-color: #4b5e70;
    border: none;
    border-radius: 14px;
    padding: 4px 14px 6px 14px;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin: 0 auto;
    margin-top: 20px;
    transition: background-color 0.2s ease;

}



.confirm:hover {
    background-color: #f6efe3;

    color: #333;
}

.confirm2:hover {
    background-color: #f6efe3;

    color: #333;
}

.confirm2 {
    width: auto;
    height: 20px;
    color: white;
    background-color: #4b5e70;
    border: none;
    border-radius: 14px;
    padding: 2px 14px 12px 14px;
    font: inherit;
    cursor: pointer;
    display: block;
    /* no flexbox here */
    margin-left: auto;
    /* pushes it to the right */
    margin-right: 30px;
    font-size: 12px;
    margin-bottom: -20px;
    transition: background-color 0.2s ease;
}


/* Confirm buttons reserve their space but start hidden */
#confirm1,
#confirm2 {
    visibility: hidden;
}



.form_settings {
    height: auto;
    max-height: 200px;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

input,
select,
button {
    display: block;
    width: 100%;
    max-width: 400px;
    padding: 10px;
    font-size: 1em;
    margin-bottom: 15px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.formSubmitButton {
    background-color: #df5d4f;
    color: white;
    font-weight: bold;
    width: 100%;
    /* full width of container */
    max-width: 440px;
    /* optional: limit width */
    border: none;
    padding: 10px 0;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    transition: background-color 0.3s ease;
    /* centers the button */
}

.formSubmitButton:hover {
    background-color: #a93226;
}

/* Default: show individual submit buttons, hide Submit All */
#submitAllBtn {
    display: none;
}

/* When linked, flip visibility: hide individual, show Submit All */
.is-linked #vodacomSubmitBtn,
.is-linked #deviceSubmitBtn {
    display: none !important;
}

.is-linked #submitAllBtn {
    display: block;
}

/* or inline-block */
#submitAllBtn {
    cursor: pointer;
    background-color: #df5d4f;
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    margin: 8px;
    padding: 10px 0;
    max-width: 440px;
}

#submitAllBtn:hover {
    background-color: #a93226;
}

/* Radio buttons */
.radioDiv {
    display: flex;
    align-items: center;
    gap: 10px;
    /* space between label and input */
    margin-bottom: 10px;
}

.radioDiv label {
    margin: 0;
    /* remove extra spacing */
}

.inputRadio {
    appearance: none;
    -webkit-appearance: radio;
    -moz-appearance: radio;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

/* ======================================= 5. BUTTON STYLES ======================================= */
/* Tiny corners animation */
.view-contracts-btn {
    font-size: 16px;
    height: 35px;
    padding: 4px 14px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    border-radius: 6px;

    /* Soft gradient with transparency */
    background: linear-gradient(145deg,
            rgba(249, 245, 237, 0.9),
            rgba(236, 229, 215, 0.9));
    color: #333;

    /* Border + polish */
    border: 1px solid rgba(45, 43, 38, 0.15);

    /* Dimensional shadows */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.10),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);

    /* Glassy depth */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* Smooth transitions */
    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Hover state — lift slightly */
.view-contracts-btn:hover {
    background: linear-gradient(145deg, #4b5e70, #374552);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.12),
        0 6px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Active state — press down */
.view-contracts-btn:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(0, 0, 0, 0.4);
}


/* ======================================= 6. TABLE STYLES ======================================= */
table {
    border-collapse: collapse;
    width: auto;
    background-color: #faf7f2;
    overflow: hidden;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    table-layout: fixed;
    border-radius: 14px 14px 14px 14px
}

.header-row th {
    position: sticky;
    top: 0;
    z-index: 5;
    color: white;

    height: 45px;
    text-align: left;
    white-space: nowrap;
    min-width: 150px;
    max-width: 300px;
    z-index: 20;
    align-items: center;
    justify-content: space-between;
    /* ← Ensures column respects header size */
}

thead {
    z-index: 5;
    position: relative;
}

.header-label {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.header-filter {
    display: none;
    padding: 5px 9px;
    font-size: 16px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #2d2b26;
    outline: none;
    box-shadow: none;
}

.filter-toggle {
    font-size: 16px;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;

    /* Default dark glassy background */
    background: linear-gradient(145deg,
            rgba(75, 94, 112, 0.95),
            rgba(55, 69, 82, 0.95));
    color: #fff;

    /* Border + subtle highlight */
    border: 1px solid rgba(45, 43, 38, 0.25);

    /* Depth shadows */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 2px rgba(255, 255, 255, 0.15);

    /* Glassy blur */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    /* Smooth animations */
    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

/* Hover + active (light state) */
.filter-toggle:hover,
.filter-toggle.active {
    background: linear-gradient(145deg,
            rgba(249, 245, 237, 0.9),
            rgba(236, 229, 215, 0.9));
    color: #333;
    transform: translateY(-1px);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.1),
        0 6px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Pressed down */
.filter-toggle:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(0, 0, 0, 0.5);
}


th,
td {
    border-left: 1px solid #1e222345;
    border-right: 1px solid #1e222350;
    border-bottom: 1px solid #1e222342;
    border-top: none;
    padding: 12px 8px;
    text-align: left;
    max-width: 350px;
    white-space: normal;
    vertical-align: top;
    word-break: break-word;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* Remove left border from the first column */
tr>td:first-child,
tr>th:first-child {
    border-left: none;
}

/* Remove right border from the last column */
tr>td:last-child,
tr>th:last-child {
    border-right: none;
}

tbody tr {
    transition: all 250ms ease-out;
}

tbody tr:nth-child(even) {
    background-color: white;
}

tbody tr:hover {
    background-color: #e7e7e7bf;
}

/* Sticky headers and filters */
table.sticky th {
    position: sticky;
    top: 0;
    background-color: white;
    color: #4b5e70;
    z-index: 5;

    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-weight: bold;
    /* Slightly bolder */
    font-size: 1.15rem;
    /* Slightly bigger */
}

/* ======================================= 7. SCROLLBARS ======================================= */
.contentInner::-webkit-scrollbar,
.dashboardContent::-webkit-scrollbar {
    width: 8px;
}

.contentInner::-webkit-scrollbar-track,
.dashboardContent::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}

.contentInner::-webkit-scrollbar-thumb,
.dashboardContent::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.contentInner::-webkit-scrollbar-thumb:hover,
.dashboardContent::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.dashboardContent::-webkit-scrollbar:horizontal {
    height: 8px;
}

/*dashboard*/
.contentInner2::-webkit-scrollbar,
.dashboardContent::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.contentInner2::-webkit-scrollbar-track {
    background: #ffffff;
    margin-top: 0;
    margin-bottom: 14px;
    margin-right: 14px;
    margin-left: 14px
        /* Hide the track */
}

.contentInner2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    /* Pushes thumb area inward to avoid track */
    background-clip: content-box;
    margin: 2px;
}

.contentInner2::-webkit-scrollbar-corner {
    background-color: transparent;
}

.contentInner2::-webkit-scrollbar-thumb:hover,
.dashboardContent::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.dashboardContent::-webkit-scrollbar:horizontal {
    height: 8px;
}

/* ======================================= 8. DASHBOARD CONTAINER ======================================= */

.dashboardContent {
    width: 100%;
    height: calc(100vh - 70px);
    overflow: hidden;
    /* avoid parent scroll stealing focus */
    padding-bottom: 20px;
    position: relative;
}

.button-group {
    display: flex;
    max-width: 440px;
    margin: 0 auto;
}

.transfer-btn {
    flex: 1;
    font-size: 16px;
    color: #333;
    background-color: #f6efe3;
    border: 0.5px solid #4b5e70;
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.transfer-btn.selected {
    background-color: #4b5e70;
    color: white;
}

.transfer-btn:hover,
.transfer-btn.active {
    background-color: #4b5e70;
    color: white;
}

.transfer-box {
    max-width: 440px;
    min-height: 200px;
    max-height: 400px;
    /* scroll limit */
    overflow-y: auto;
    /* this is the scrollable area now */
    border: 1px solid #ccc;
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;

    /* Firefox */
    scrollbar-width: thin;
    /* use 'thin' (not px) */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    /* thumb color | track color */
}

/* WebKit (Chrome, Edge, Safari) */





.hidden {
    display: none;
}

.search-input {
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    font-size: 14px;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* no scrolling on the table itself */
}

.result-table th,
.result-table td {
    border: 1px solid #ddd;
    padding: 6px;
    text-align: left;
    background-color: #fdfdfd;
}

.result-table th {
    background-color: #faf7f2;
}

/* Highlight row on hover */
.result-table tr.selectable:hover td {
    background-color: #f6efe3;
    cursor: pointer;
}

/* Animate smooth transitions */
.result-table td {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Selected row - make cells dark with white text */
.result-table tr.selectable.selected td {
    background-color: #4b5e70 !important;
    color: white !important;
}

/* =========================== PCM Dashboard (content only) =========================== */
:root {
    --gap: 18px;
    --radius: 14px;
    --line: #e5e7eb;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    --card-bg: #ffffffea;
    /* soft glass */
    --card-bg-hover: #ffffff;
    --muted: #6b7280;
    --accent: #2563eb;
    /* buttons, focus, accents */
    --ok: #16a34a;
    --warn: #f59e0b;
    --danger: #dc2626;

}

/* keep the sidebar offset intact; do not touch .sidebar */
.home-dashboard .content4 {
    height: 100vh;
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 40px);
}

.home-dashboard .contentInner4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;

    padding: 0;
}

/* Grid: 2 columns desktop, 1 column on narrow screens */
.home-dashboard .dash-grid {
    --cols: 2;
    display: grid;
    gap: var(--gap);
    padding: var(--gap);
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    align-items: stretch;
}

@media (max-width: 980px) {
    .home-dashboard .dash-grid {
        --cols: 1;
    }
}

/* Card */
.home-dashboard .card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    min-height: 260px;
}

.home-dashboard .card:hover {
    background: var(--card-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

.home-dashboard .card:active {
    transform: translateY(0);
}

.home-dashboard .card--tall {
    min-height: 340px;
}

.home-dashboard .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.home-dashboard .card h2 {
    font-size: 1.05rem;
    letter-spacing: .2px;
}

.home-dashboard .big-number {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 4px 0 10px;
}

/* Chart container ensures canvas scales nicely */
.home-dashboard .chart-wrap {
    position: relative;
    min-height: 180px;
    flex: 1 1 auto;
}

/* KPIs */
.home-dashboard .kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.home-dashboard .kpi {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    padding: 12px;
}

.home-dashboard .kpi-label {
    color: var(--muted);
    font-size: .9rem;
}

.home-dashboard .kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
}

/* Pills & badges */
.home-dashboard .pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .78rem;
    background: #eef2ff;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.home-dashboard .pill-warn {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fde68a;
}

.home-dashboard .badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    background: #e5e7eb;
    color: #374151;
}

.home-dashboard .badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.home-dashboard .badge-warn {
    background: #ffedd5;
    color: #9a3412;
}

.home-dashboard .badge-ok {
    background: #dcfce7;
    color: #166534;
}

/* Inputs (table tools) */
.home-dashboard .table-tools {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.home-dashboard .input {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: .95rem;
    outline: none;
}

.home-dashboard .input:focus {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Table */
/* TABLE AREA: the only scroller inside the card */
.home-dashboard .table-wrap {
    /* layout behavior (keep these if you already added them) */
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;

    /* Firefox (quantum) – slim, light */
    scrollbar-width: thin;
    /* slim */
    scrollbar-color: rgba(0, 0, 0, .25) transparent;
    /* light thumb on transparent track */
}

/* WebKit browsers (Chrome/Edge/Safari) */
.home-dashboard .table-wrap::-webkit-scrollbar {
    width: 6px;
    /* slim vertical */
    height: 6px;
    /* slim horizontal (just in case) */
}

.home-dashboard .table-wrap::-webkit-scrollbar-track {
    background: transparent;
    /* light/clean */
}

.home-dashboard .table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    /* light grey */
    border-radius: 999px;
}

.home-dashboard .table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
    /* slightly darker on hover */
}

/* Remove the little arrow buttons in older WebKit UIs */
.home-dashboard .table-wrap::-webkit-scrollbar-button {
    display: none;
}



.home-dashboard .small-table {
    width: 100%;
    border-collapse: collapse;
}

.home-dashboard .small-table th,
.home-dashboard .small-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    white-space: nowrap;
}

.home-dashboard .small-table thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 1;
}

.home-dashboard .small-table th[data-sort] {
    cursor: pointer;
}

.home-dashboard .small-table th[data-sort]::after {
    content: " ⇅";
    opacity: .35;
    font-size: .85em;
}

/* Helpers */
.home-dashboard .muted {
    color: var(--muted);
    font-size: .9rem;
}

@media (max-width: 520px) {
    .home-dashboard .card {
        min-height: 240px;
    }

    .home-dashboard .chart-wrap {
        min-height: 240px;
    }
}

/* Cap the height of Card #2 (Upcoming Terminations) so it can't push the row taller */
.home-dashboard .dash-grid>.card:nth-child(2) {


    overflow: hidden;
    /* ensures inner scroll doesn't spill over the card’s edges */
    display: flex;
    /* reinforce flex column (already on .card, harmless here) */
    flex-direction: column;
}

/* Within Card #2, the table area takes the remaining space and scrolls */
.home-dashboard .dash-grid>.card:nth-child(2) .table-tools {
    flex: 0 0 auto;
    /* tools stay fixed height */
}

.home-dashboard .dash-grid>.card:nth-child(2) .table-wrap {
    flex: 1 1 auto;
    /* table stretch */
    min-height: 0;
    /* can shrink within the capped card height */
    overflow: auto;
    /* scroll here (not the card) */
}

/* === Dashboard (home) — transparent bg + bottom spacing === */
.home-dashboard .content4,
.home-dashboard .contentInner4 {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Keep the inner scroller, and ensure 20px space after the last cards */
.home-dashboard .contentInner4 {
    /* override earlier fixed heights */

    min-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-bottom: 20px;
    overflow: visible;

}


.home-dashboard .dash-grid {
    height: 100%;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;

    gap: var(--gap);

    align-items: stretch;
    min-height: 0;

    overflow: visible;

}

.home-dashboard .dash-grid>.card:nth-child(4) .chart-wrap {
    min-height: 120px;
    /* down from ~180px */
    padding-top: 4px;
}

.home-dashboard .dash-grid>.card:nth-child(4) #typePie {
    height: 160px !important;
    /* force a shorter canvas */
    max-height: 160px !important;
}

.home-dashboard .content4 {
    overflow: visible !important;
    height: 100vh;
}




.content3 {
    position: relative;
    z-index: 3;
}

/* .content2 floats with shadow on sides + bottom, none on top */
.content2 {
    display: flex;
    gap: 30px;
    align-items: stretch;
    max-height: calc(100vh - 50px - 45px);

    background: #ffffff;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08) !important;

    overflow: visible;
    position: relative;
    z-index: 1;
}





.UserDetails {
    background-color: #40426452;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    height: 30px;
    display: flex;
    /* enable flexbox */
    align-items: center;
    justify-content: space-between;
    /* vertically center text */
    padding: 0 10px;
    /* 10px spacing on left and right */
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 0 2px #4b5e70 inset;
    border-radius: 14px;
}

.UserDetails::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* center horizontally & vertically */
    width: 1px;
    /* line thickness */
    height: 20px;
    /* shorter than box height */
    background-color: #000000;
    /* adjust color as needed */
}

.form_line {
    position: relative;
    /* anchor the ::after line */
    height: 5px;
    /* give it some height so the line has space */
    margin-top: 12px;
}

.form_line::after {
    content: "";
    position: absolute;
    left: 20px;
    /* trims 20px from the left */
    right: 20px;
    /* trims 20px from the right */
    bottom: 0;
    /* sits at the bottom */
    height: 2px;
    /* line thickness */
    background-color: #4b5e70;
    /* line color */
}

.field-label {
    flex: 1 1 50%;
    white-space: nowrap;

}

.field-control {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    /* right-align value/input */
    align-items: center;


}

.UserDetails input[type="text"] {
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    /* type on the right */
    width: 100%;
    max-width: 220px;
    padding: 0;
    font: inherit;
    line-height: 1;
    margin-top: 17px;
    font-size: 15px;

}

.readonly-value {
    max-width: 100%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-control {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    /* right-align value/input */
    align-items: center;
}

/* You already have this for text; duplicate for password */
.UserDetails input[type="password"],
.UserDetails input[type="text"] {
    background: transparent;
    border: none;
    outline: none;
    text-align: right;
    /* type on the right */
    width: 100%;
    max-width: 220px;
    padding: 0;
    font: inherit;
    line-height: 1;
    margin-top: 17px;
    /* you added this */
    font-size: 15px;
}

.hidden {
    display: none;
}

.form-message {
    margin: 10px 30px 0 30px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
}

.form-message.success {
    background: #154f30;
    color: #d9f5e7;
    border: 1px solid #1c7f4a;
}

.form-message.error {
    background: #5a1a1a;
    color: #ffd7d7;
    border: 1px solid #992f2f;
}

/* red outline for specific rows when error happens */
.UserDetails.error {
    box-shadow: 0 0 0 2px #d9534f inset;
    border-radius: 14px;
}

/* subtle highlight effect used by the Edit button */
.flash-highlight {
    animation: flashBg 1.2s ease;
}

@keyframes flashBg {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.6);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0);
    }
}

.form_settings--open {
    max-height: none;
    overflow: visible;
}

/* ================================== sidebar ================================== */
/* Floating edge handle */
.sidebar-handle {
    position: absolute;
    /* stays put even when sidebar slides away */
    right: -15px;
    /* always on the left edge */
    top: 52%;
    /* vertically centered */
    transform: translateY(-50%);
    z-index: 120;
    /* above sidebar (100) and scrim (90) */
    border: 1px solid rgba(45, 43, 38, 0.2);
    border-left: none;
    /* flush with screen edge */
    background: transparent;
    color: #2d2b26;
    padding: 10px 10px;
    width: 60px;
    /* slim "tab" */
    height: 56px;
    /* nice hit area */
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:

        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transition:
        background-color 0.4s ease,
        box-shadow 0.4s ease,
        color 0.6s ease,
        transform 0.6s ease;


    backdrop-filter: blur(6px);
}







:root {
    --sidebar-width: 220px;
    --content-gap: 40px;
    /* effective left offset for content when sidebar is visible */
    --sidebar-space: calc(var(--sidebar-width) + var(--content-gap));
}

/* When collapsed, sidebar takes 0 space; content hugs the left with standard gap */
body.sidebar-collapsed {
    --sidebar-space: var(--content-gap);
}

.sidebar {
    /* from lowest block (wins on overlaps) */
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background: #ffffff !important;
    border-radius: 19px !important;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.06),
        0 8px 20px rgba(0, 0, 0, 0.10),
        0 12px 28px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    padding-top: 20px;
    transform: translateX(0);
    transition: transform 320ms ease-out, box-shadow 250ms ease, box-shadow .25s ease;
    z-index: 100;
    height: auto;
    max-width: 800px;
    justify-content: center !important;
    margin-top: 20px;
    margin-bottom: 25px;
}

.sidebar:hover {

    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.06),
        10px 10px 20px rgba(0, 0, 0, 0.1),
        10px 16px 28px rgba(0, 0, 0, 0.08);


}


body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}


.sidebar a {
    position: relative;
    right: -15;
    display: block;
    border-radius: 0 10px 10px 0;
    padding: 12px 20px;
    text-decoration: none;
    background-color: #000000d7;
    color: #ffffff;

    overflow: hidden;
    transition: color 0.4s ease;
}


.sidebar>img {
    display: block !important;
    margin: 12px auto 12px auto !important;
    height: auto !important;
    width: min(125%, calc(100% - 32px)) !important;
    max-width: calc(100% - 32px) !important;
    /
}


.sidebar a {
    color: #000000 !important;
    font-size: 1.06rem !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
    transform: translateY(-50%);
    z-index: 120;
    border: 1px solid rgba(45, 43, 38, 0.2);
    border-left: none;
    background: transparent;
    color: #2d2b26;
    padding: 12px 20px !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition:
        background-color .25s ease,
        color .20s ease,
        box-shadow .25s ease,
        opacity .20s ease,
        transform .4s ease !important;
}


.sidebar>img {
    display: block !important;
    /* much wider, but still safely inside the 220px column */
    width: calc(130% - 2px) !important;
    max-width: calc(130% - 2px) !important;
    height: auto !important;

    /* more breathing room under the logo */
    margin: 0px 20px 20px 15px !important;
}

/* gap + divider before the first nav item */
.sidebar a:first-of-type {
    margin-top: 8px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eaeaea !important;
    /* subtle line */
}



.sidebar .nav-top {
    flex: 1;
}

.sidebar .nav-bottom {
    display: flex;
    flex-direction: column;

    /* small spacing between Admin, Settings, Log Out */
    margin-top: auto;
    margin-bottom: 30px;
    /* pushes this section to the bottom */
}


.sidebar-handle .handle-icon {
    display: inline-block;
    margin-left: 20px;
    transition: transform 600ms ease;
    font-size: large;
    transform-origin: center;

}



/* --- Bring back hover feedback (this block was removed) --- */
.sidebar-handle:hover {
    transform: translate(20px, -50%);
}

body.sidebar-collapsed .sidebar-handle .handle-icon {
    transform: rotate(180deg);

}

.sidebar-handle {
    transform: translate(0, -50%);
}

.sidebar-handle:hover {
    transform: translate(20px, -50%);
}

body.sidebar-collapsed .sidebar-handle {
    transform: translate(10px, -50%);
}

body.sidebar-collapsed .sidebar-handle:hover {
    transform: translate(50px, -50%);
}

/* === Sidebar: dimensional white card === */


/* Collapsed state */
body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    box-shadow: none;
}

/* Sidebar links with subtle dimension */
.sidebar a {
    will-change: transform;
    background: #ffffff;
    color: #000000 !important;
    display: block;
    padding: 12px 18px;
    margin: 4px 5px 4px 5px;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 8px 8px rgba(2, 2, 2, .2);
    border-radius: 16px 16px 16px 16px;


    transition:
        background-color 0.5s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease,
        color 0.5s ease;


}

/* Hover effect = lift + glow */
.sidebar a:not(.active):hover {
    background-color: #ffffff;
    color: black !important;
    transform: translateY(-27px)translateX(10px);

    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.06),
        10px 10px 20px rgba(0, 0, 0, 0.10),
        10px 16px 28px rgba(0, 0, 0, 0.08) !important;

}

/* Active link = bolder + inset dimension */
.sidebar a.active {
    color: #ffffff !important;
    background: #4b5e70;
    transform: translateY(-25px)translateX(0px);
    /* Multiple inset shadows for depth */
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.7),

        inset 0 -2px 4px rgba(255, 255, 255, 0.1);

    transition: background-color 0.6s ease-in-out,
        box-shadow 0.6s ease-in-out,
        transform 0.6s ease-in-out !important;


    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* === Active-on-load animation helpers === */
/* === Active-on-load animation helpers === */
@keyframes activeLift {
    from {
        transform: translateY(-27px) translateX(10px);
        background-color: #ffffff;
        /* same as hover background */
        color: #000000;
        /* same as hover text */
    }

    to {
        transform: translateY(-25px) translateX(0);
        background-color: #4b5e70;
        /* same as your .active background */
        color: #ffffff;
        /* same as your .active text */
    }
}

/* Inset shadow fade-in still separate */
@keyframes insetFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Active link base state */
.sidebar a.active {
    position: relative;
    overflow: visible;
    color: #ffffff;
    background-color: #4b5e70;
    transform: translateY(-25px) translateX(0);
    transition: background-color 1s ease, color 1s ease;
}

/* Just-activated (start in hover pose) */
.sidebar a.active.just-activated {
    box-shadow:
        10px 10px 20px rgba(0, 0, 0, 0.06),
        10px 10px 20px rgba(0, 0, 0, 0.10),
        10px 16px 28px rgba(0, 0, 0, 0.08);

    animation: activeLift 1s ease forwards;
}

/* Inset shadow fade in */
.sidebar a.active.just-activated::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 3px 6px rgba(0, 0, 0, 0.7),
        inset 0 -2px 4px rgba(255, 255, 255, 0.1);
    opacity: 0;
    animation: insetFadeIn 1s ease forwards;
}

/* A 30px-wide portal that lives on <body> so nothing gets clipped */
.editbtn-rail {
    position: absolute;
    /* we position it from JS */
    left: -9999px;
    top: -9999px;
    width: 30px;
    height: 0;
    pointer-events: none;
    /* only the button receives events */
    z-index: 999999;
    /* above app chrome */
}

/* The actual button */
.editbtn {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.3s ease;
    border-radius: 10px 0 0 10px;
}

.editbtn__dots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.editbtn__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    opacity: 0;
    transition: background-color 0.3s ease;
}

.editbtn:hover {
    background-color: #4b5e70;
}

.editbtn:hover .editbtn__dot {
    background-color: #fff;
}

@keyframes dotIn {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.editbtn--visible .editbtn__dot:nth-child(1) {
    animation: dotIn 160ms ease forwards 0ms;
}

.editbtn--visible .editbtn__dot:nth-child(2) {
    animation: dotIn 160ms ease forwards 120ms;
}

.editbtn--visible .editbtn__dot:nth-child(3) {
    animation: dotIn 160ms ease forwards 240ms;
}


/* ===== Edit Row Modal — Clean Card, No Table Look ===== */

/* Card container */
#editRowModal .modal-content {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12),
        0 2px 8px rgba(0, 0, 0, .06);
}

/* Use the table as a layout grid (compact) */
#editRowModal .editgrid {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 8px 3px !important;
    background: #fff;
    padding: 4px 8px;
    min-height: 26px;
    align-items: center;
}

/* Hide the header row completely */
#editRowModal .editgrid thead {
    display: none;
}

/* Reset ONLY table cells so buttons (e.g., .confirm) keep their styles */
#editRowModal .editgrid td,
#editRowModal .editgrid th {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    line-height: 1.2;
    vertical-align: middle !important;
}

/* Kill any zebra striping from global styles */
#editRowModal .editgrid tbody tr:nth-child(even),
#editRowModal .editgrid tbody tr:nth-child(odd),
#editRowModal .editgrid tbody tr.even,
#editRowModal .editgrid tbody tr.odd {
    background: transparent !important;
}

/* Column sizing / roles */
#editRowModal .field-col {
    width: 24%;
    color: #2a3b4c;
    font-weight: 700;
}

#editRowModal .value-col,
#editRowModal .new-col {
    width: 36%;
}

#editRowModal .edit-col {
    width: 140px;
    white-space: nowrap;
}

/* Light-blue “pills” for Current/New values (Edit column excluded) */
#editRowModal .pill {
    background: #eaf4ff;
    border-radius: 16px;
    padding: 6px 10px;
    /* base padding */
    min-height: 32px;
    /* base height */
    display: flex;
    align-items: center;
    /* vertical center contents */
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, .06);
    color: #2a3b4c;
    /* match value text color */
    font-weight: 400;
    /* match value text weight */
}


#editRowModal .value-col .pill,
#editRowModal .new-col .pill {
    padding: 6px 10px;
    min-height: 32px;
    display: flex;
    align-items: center;
}


#editRowModal .value-col .pill>*,
#editRowModal .new-col .pill>* {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    line-height: 1.2;
}

#editRowModal .new-col .pill .edit-input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

#editRowModal .new-col .pill .edit-input::placeholder {
    color: #6b7c8e;
}

#editRowModal .pill:has(.edit-input:focus) {
    box-shadow: 0 0 0 3px rgba(102, 172, 255, .35);
    border-color: rgba(0, 0, 0, .08);
}

#editSubmitWrap {
    text-align: center;
    margin-top: 12px;
}

#editRowModal .edit-col {
    position: relative !important;
    vertical-align: middle !important;
    padding: 0 !important;
}

#editRowModal .edit-col .edit-row-btn {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0;
}

.badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.badge-admin {
    background: #4a80d28b;
    color: #ffffff;
}

.badge-user {
    background: #e5e7eb;
    color: #111827;
}