/*
 * POLLWATCH — SINGLE FIRST-PARTY STYLESHEET
 * Edit this file directly. The former /css and /admin/css files are retired.
 *
 * PUBLIC PORTAL: original section order retained, including current redesigns.
 * ADMIN: sections are enabled by the data-pw-admin tokens on each document's html.
 * An admin page also using public styles explicitly includes the "portal" token.
 * :where() adds no specificity, preserving the original cascade within each area.
 *
 * External Select2, Bootstrap, icon/font CDNs and PDF-engine styles stay external.
 * Page-embedded/dynamic styles remain in their templates unless migrated below.
 */

/*
 PW-STYLES: portal
 */

@import url("https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* ========================================================================== 
   STYLE.CSS
   ========================================================================== */

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #0c2b71;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    width: 400px;
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.5);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header {
    height: 143px;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header img {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) main {
    background: #fff;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .yellow-header {
    background: #ffd200;
    height: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .link-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    font-size: 12px;
    width: 80%;
    height: 100%;
    align-items: center;
    float: right;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .link-container a {
    text-decoration: none;
    font-weight: bold;
    color: #132d50;
    transition: all 0.5s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .link-container div {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .link-container div:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .tabs:hover {
    color: #fff;
    background: #cca800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qrcode {
    float: right;
    width: 85px;
    position: relative;
    bottom: -15px;
    right: 5px;
    margin-bottom: 30px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content {
    display: flex;
    color: #0c2b71;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    min-height: 500px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 1000;
    text-transform: uppercase;
    font-family:
        Arial Black,
        Arial;
    margin-bottom: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content hr,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content-hr {
    width: 250px;
    margin-top: -10px;
    margin-bottom: 20px;
    border: 1px solid #c8d9ea;
    color: #0c2b71 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footerr {
    position: relative;
    /* Fixed positioning */
    bottom: 0;
    /* Align to the bottom of the viewport */
    width: 100%;
    /* Full width */
    background-color: #d11e1e;
    /* Background color */
    color: #fff;
    /* Text color */
    height: 30px;
    /* Placeholder height value */
    text-align: center;
    /* Center align text */
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-notif {
    z-index: 100;
    display: flex;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 400px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .receiver {
    position: absolute;
    background-color: #fff;
    color: #103997;
    padding: 10px 30px;
    border-radius: 5px;
    margin: 20px;
    text-align: center;
    font-size: 14px;
    top: 15%;
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.5);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    cursor: pointer;
    color: #a0a2a1;
    font-size: 10px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container-2 {
    height: 80px;
    overflow: hidden;
    padding-right: 5px;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container-2 img {
    width: 100%;
    max-width: 80px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footer {
    background-color: #fff;
    color: white;
    text-align: center;
    margin: 0px;
    position: sticky;
    padding: 0;
    margin: 0;
    bottom: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    height: 60px;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
    align-items: end;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton {
    background-color: transparent;
    color: white;
    text-align: center;
    margin: 0px;
    position: fixed;
    padding: 0;
    margin: 0;
    bottom: 80px;
    right: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton a {
    border-radius: 50%;
    padding: 12px 16px;
    color: #fff;
    border: 0px solid #000;
    background: #047dca;
    box-shadow: 0px 2px 5px 2px #d3d2d2;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: font-size 0.5s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton a:hover {
    font-size: 14px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton {
    text-decoration: none !important;
    padding: 0px;
    color: #034e7e;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    font-weight: 100;
    font-size: 13px;
    transition: all 0.5s;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton:hover {
    transform: scale(1.2);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbuttonimg {
    width: 25px;
    margin-bottom: 5px;
    transition: transform 0.5s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbuttonimg:hover {
}

@media only screen and (max-width: 500px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        width: 100% !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-notif {
        z-index: 100;
        display: flex;
        position: fixed;
        height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        max-width: 500px;
    }
}

/* ========================================================================== 
   STYLES.CSS
   ========================================================================== */

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    max-height: 800px !important;
    overflow: auto !important;
    height: 100% !important;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* Only the page masthead uses election artwork, never nested panel headers. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header {
    background-image: url(../images/banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 170px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -10px;
    flex-direction: column;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header a {
    text-decoration: none;
    color: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footer {
    background-color: #fff;
    color: white;
    text-align: center;
    margin: 0px;
    position: sticky;
    padding: 0;
    margin: 0;
    bottom: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    height: 60px;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
    align-items: end;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton {
    background-color: transparent;
    color: white;
    text-align: center;
    margin: 0px;
    position: fixed;
    padding: 0;
    margin: 0;
    bottom: 80px;
    right: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton a {
    border-radius: 50%;
    padding: 12px 16px;
    color: #fff;
    border: 0px solid #000;
    background: #047dca;
    box-shadow: 0px 2px 5px 2px #d3d2d2;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: font-size 0.5s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton a:hover {
    font-size: 14px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton {
    text-decoration: none !important;
    padding: 0px;
    color: #034e7e;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
    align-items: center;
    font-weight: 100;
    font-size: 13px;
    transition: all 0.5s;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton:hover {
    transform: scale(1.2);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbuttonimg {
    width: 25px;
    margin-bottom: 5px;
    transition: transform 0.5s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbuttonimg:hover {
}

/* ========================================================================== 
   HOME.CSS
   ========================================================================== */

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #0c2b71;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: Arial;
    background-color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    margin: 30px;
    width: 100%;
}

/* Custom File Input */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .custom-file-input {
    color: transparent;
    float: left;
    margin-bottom: -10px;
    width: 50px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .custom-file-input::before {
    content: url(../images/img.png);
    color: black;
    display: inline-block;
    background: none;
    border: 0px solid #999;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 10pt;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .custom-file-input:hover::before {
    border-color: none;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .custom-file-input:active {
    outline: 0;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .custom-file-input:active::before {
    background: transparent;
}

/* Button Post */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btnpost {
    border-radius: 20px;
    float: right;
    padding: 5px;
    width: 50px;
    cursor: pointer;
    background-color: #0e6af1;
    color: #fff;
    border: none;
    position: relative;
    margin-top: 5px;
}

/* Profile Name Post */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilenamepost {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-top: -40px;
    margin-left: 60px;
    text-align: left;
    display: flex;
}

/* Profile Pic Post */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepicpost {
    overflow: hidden;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background: #fff;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepicpost img {
    width: 100%;
}

/* Text Area Post */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .textareapost {
    width: 100%;
    height: 100px;
    font-family: Arial;
    border: none;
    outline: none;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .textareapost:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .textareapost:active {
    border: none;
}

/* Logo */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .logo {
    width: 20%;
}

/* Header */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > .header {
    background-image: url(../images/banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 170px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -10px;
    flex-direction: column;
}

/* Main */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Org Title */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .orgtitle {
    font-size: 18px;
    font-weight: bold;
    color: #034e7e;
}

/* Register Button */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .regbtn {
    padding: 1px;
    width: 100px;
    margin-left: 10px;
    margin-top: 50px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #e50405;
    background-color: #e50405;
    color: #fff;
    text-decoration: none;
    transition:
        border 0.5s,
        background-color 0.5s;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .regbtn:hover {
    border: 1px solid #ff0404;
    background-color: #ff0404;
}

/* Search Field */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .searchField {
    position: relative;
    display: flex;
    justify-content: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
    border-radius: 21px;
    padding: 15px 15px;
    padding-right: 55px;
    width: 80%;
    margin-top: -15px;
    border: none;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    cursor: text;
    background-color: #fff;
    text-align: left;
    color: #000;
    outline: none;
    margin-right: -118px;
    margin-top: -15px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch::placeholder {
    color: #bbbcbc;
}

/* Grid Container */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    width: 100%;
    background-color: transparent;
    padding: 20px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container img {
    width: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container a {
    text-decoration: none;
    margin-bottom: 5px;
    color: #394862;
    font-weight: 500;
    font-size: 14px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container > div {
    background-color: transparent;
    text-align: center;
    padding: 5px 0;
    filter: opacity(100%);
    line-height: 16px;
    transition:
        transform 0.3s,
        filter 0.3s ease-in-out;
    position: relative;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container > div:hover {
    transform: scale(0.9);
}

/* Card */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card {
    width: 160px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin: 10px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card img {
    width: 100%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .cardheader {
    font-size: 14px;
    font-weight: bold;
    line-height: 13px;
    color: #043fa2;
    margin-top: 3px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .cardsub {
    line-height: 12px;
    color: #283a57;
    margin-bottom: 3px;
}

/* Feature Button */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .featbtn {
    transition: transform 0.3s ease-in-out;
    text-decoration: none !important;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .featbtn:hover {
    transform: scale(0.9);
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .logout {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .carousel-container {
    box-sizing: border-box;
    padding: 0px 20px;
    width: 100%;
    margin-top: -10px;
    margin-bottom: -20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home {
    margin-top: -35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 0%;
    width: 100%;
    box-sizing: border-box;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name {
    color: #0c2b71;
    font-weight: bold;
    font-size: 14px;
    margin-left: 10px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name-2 {
    color: #0c2b71;
    font-size: 12px;
    margin-left: 10px;
    font-weight: bold;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qrcode-container img {
    width: 50px;
    height: 50px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .sub {
    color: #494a4b;
    font-size: 14px;
    font-weight: bold;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .setting-notif {
    text-align: right;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .setting-notif img {
    width: 20px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home-under {
    display: grid;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    grid-template-columns: 100%;
    box-sizing: border-box;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .message_container {
    width: 100%;
    display: flex;
    justify-content: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home-under-under {
    width: 100%;
    display: grid;
    grid-template-columns: 12% 70% 14%;
    background: transparent;
    border-radius: 15px;
    box-sizing: border-box;
    padding: 10px;
    align-items: center;
    margin-top: 10px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger-menu {
    position: relative;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger {
    font-size: 35px;
    background: none;
    border: none;
    cursor: pointer;
    float: right;
    position: relative;
    color: #061796;
    margin-top: -15px;
    z-index: 100;
    margin-right: 55px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items {
    display: none;
    position: absolute !important;
    top: 30px;
    right: -165px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    z-index: 1;
    width: 245px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a {
    display: block;
    padding: 4px 10px;
    text-decoration: none !important;
    color: #061796;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a:hover {
    background-color: #061796;
    position: relative;
    color: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items img {
    width: 20px;
    height: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .group-title {
    display: block;
    padding: 10px 10px 5px;
    font-weight: bold;
    color: #043fa2;
    font-size: 18px;
    margin-bottom: -10px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .group-sub {
    color: #283a57;
    font-size: 15px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .two_buttons {
    display: grid;
    grid-template-columns: 50% 50%;
    margin-top: 10px;
    justify-items: center;
    align-items: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .register-btn {
    display: block;
    width: 80%;
    color: #011e73;
    background: #e2eefd;
    text-decoration: none;
    padding: 10px 0px;
    border-radius: 15px;
    transition: all 0.3s;
    font-weight: bold;
    margin-top: 5px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .register-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-btn {
    display: block;
    width: 80%;
    color: #fff;
    background: #f81d06;
    text-decoration: none;
    padding: 10px 0px;
    border-radius: 15px;
    transition: all 0.3s;
    font-weight: bold;
    margin-top: 5px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.7);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-notif {
    z-index: 200;
    display: flex;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    align-items: center;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .receiver {
    position: absolute;
    background-color: #fff;
    color: #103997;
    padding: 10px 30px;
    border-radius: 5px;
    margin: 20px;
    text-align: center;
    font-size: 14px;
    top: 85px;
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.5);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    cursor: pointer;
    color: #a0a2a1;
    font-size: 10px;
    font-weight: bold;
}
/* Tablet View */
@media only screen and (min-width: 501px) and (max-width: 800px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header {
        height: 170px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        width: 400px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .regbtn {
        width: 138px;
        margin-left: 18px;
        margin-top: 80px;
        padding: 5px;
        font-size: 20px;
        border-radius: 10px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
        width: 80%;
        font-size: 14px;
        margin-right: -118px;
        margin-top: -15px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container img {
        width: 40px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card {
        width: 160px;
        border-radius: 10px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .cardheader {
        font-size: 14px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-notif {
        z-index: 200;
        display: flex;
        position: fixed;
        height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        max-width: 400px;
    }
}

/* Desktop View */
@media only screen and (min-width: 801px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        width: 400px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header {
        height: 170px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .regbtn {
        width: 219px;
        margin-left: 30px;
        margin-top: 133px;
        padding: 10px;
        font-size: 30px;
        border-radius: 15px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
        width: 80%;
        font-size: 14px;
        margin-right: -118px;
        margin-top: -15px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        background-color: transparent;
        padding: 20px;
        width: 400px;
        justify-items: center;
        align-items: start;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container img {
        width: 40px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card {
        width: 160px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        margin: 10px;
        text-align: center;
        border-radius: 10px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .cardheader {
        font-size: 14px;
        font-weight: bold;
        line-height: 12px;
        color: #043fa2;
        margin-top: 2px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
        width: 80%;
        font-size: 14px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-notif {
        z-index: 200;
        display: flex;
        position: fixed;
        height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, 0.3);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        max-width: 400px;
    }
}

/* ========================================================================== 
   HAMBURGER.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger-menu {
    position: relative;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger {
    font-size: 35px;
    background: none;
    border: none;
    cursor: pointer;
    float: right;
    position: relative;
    color: #061796;
    margin-top: -20px;
    z-index: 100;
    margin-right: 55px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items {
    display: none;
    position: absolute !important;
    top: 30px;
    right: -165px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
    z-index: 1;
    width: 245px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a {
    display: block;
    padding: 4px 10px;
    text-decoration: none !important;
    color: #061796;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a:hover {
    background-color: #061796;
    position: relative;
    color: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items img {
    width: 20px;
    height: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .group-title {
    display: block;
    padding: 10px 10px 5px;
    font-weight: bold;
    color: #043fa2;
    font-size: 18px;
    margin-bottom: -10px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .group-sub {
    color: #283a57;
    font-size: 15px;
}

/* ========================================================================== 
   INPUTSEARCH.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .searchField {
    position: relative;
    display: flex;
    justify-content: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
    border-radius: 21px;
    padding: 15px 15px;
    padding-right: 55px;
    width: 100%;
    margin-top: -15px;
    border: none;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    cursor: text;
    background-color: #fff;
    text-align: left;
    color: #000;
    outline: none;
    margin-right: -118px;
    margin-top: -20px;
    max-width: 225px;
    margin-bottom: 5px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch::placeholder {
    color: #bbbcbc;
}

/* ========================================================================== 
   ACCOUNT-SETTINGS.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
    display: grid;
    grid-template-areas: "images details details details details";
    gap: 1%;
    padding-top: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userimages {
    grid-area: images;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container img {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userposition {
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails {
    grid-area: details;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails > div {
    display: grid;
    grid-template-columns: 40% 60%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .labels {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .values {
    color: #000;
    text-align: left;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .username,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidate {
    font-weight: bolder;
    font-size: 14px;
    text-transform: uppercase;
    display: block !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidate {
    color: #000;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userid {
    font-weight: bolder;
    font-size: 14px;
    text-transform: lowercase;
    color: #d11e1e;
    margin-top: -3px;
    margin-bottom: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidateposition {
    font-size: 11px;
    display: block !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-1 {
    color: #fff;
    background: #104491;
    width: 90px;
    border: none;
    outline: none;
    height: 30px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-1:hover {
    background: #d11e1e;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .title-2 {
    width: 100%;
    font-size: 18px;
    font-weight: 1000;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .submission-container {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-2,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-3 {
    width: 210px;
    height: 30px;
    border: none;
    outline: none;
    margin-bottom: 10px;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration:;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-2 {
    background: #104491;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-3 {
    background: #d11e1e;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-2:hover {
    background: #0a2c5d;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-3:hover {
    background: #9e1616;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .changepin {
    display: block !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .mypwpin {
    background: #e8eef5;
    border: none;
    outline: none;
    height: 30px;
    box-sizing: border-box;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .digidocs {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
    margin-bottom: 20px;
    gap: 5px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .digidocs a {
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    transition: all 0.5s;
    background-color: #0c2b71;
    display: block;
    width: 150px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .digidocs a:hover {
    background-color: #d11e1e;
}

/* ========================================================================== 
   APPOINTMENT.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .appointing {
    width: 70%;
    font-weight: bold;
    text-align: justify;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .appointing .from_db {
    color: #1c1d20;
    text-decoration: underline;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precint {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 10px;
    width: 100%;
    line-height: 12px;
    margin-bottom: 30px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precint .labels {
    color: #d11e1e;
    text-align: right;
    font-weight: bold;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precint .values {
    font-weight: bold;
    color: #1c1d20;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .assignatory {
    text-align: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .assignatory .name {
    font-weight: 1000;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .assignatory .position {
    margin-top: -3px;
    font-size: 10px;
    font-weight: bold;
}

/* ========================================================================== 
   DASHBOARD.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
    display: grid;
    grid-template-areas: "images details details details details";
    gap: 1%;
    padding-top: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userimages {
    grid-area: images;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container img {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container-2 {
    width: 80px;
    height: 80px;
    overflow: hidden;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container-2 img {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userposition {
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails {
    grid-area: details;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails > div {
    display: grid;
    grid-template-columns: 40% 60%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .labels {
    width: 100px;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .values {
    color: #000;
    text-align: left;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .username,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidate {
    font-weight: bolder;
    font-size: 14px;
    text-transform: uppercase;
    display: block !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userid {
    font-weight: bolder;
    font-size: 14px;
    text-transform: lowercase;
    color: #d11e1e;
    margin-top: -3px;
    margin-bottom: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidateposition {
    font-size: 11px;
    display: block !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-1 {
    color: #fff;
    background: #104491;
    width: 90px;
    border: none;
    outline: none;
    height: 30px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-1:hover {
    background: #d11e1e;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .title-2 {
    width: 100%;
    font-size: 18px;
    font-weight: 1000;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .submission-container {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-2,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-3 {
    width: 175px;
    height: 30px;
    border: none;
    outline: none;
    margin-bottom: 10px;
    color: #fff;
    font-weight: bold;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration:;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-2 {
    background: #104491;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-3 {
    background: #d11e1e;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-2:hover {
    background: #0a2c5d;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-3:hover {
    background: #9e1616;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .two-column {
    display: grid;
    grid-template-columns: 35% 65% !important;
}

/* ========================================================================== 
   FAQ.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-item {
    margin-bottom: 5px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-button {
    width: 100%;
    background-color: #053e8b;
    color: white;
    padding: 15px;
    border: none;
    text-align: left;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    border-radius: 0px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-button.active {
    background-color: #f72e1f;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-item:nth-last-of-type(1) {
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-content {
    padding: 15px;
    background-color: white;
    display: none;
    border: 1px solid #ddd;
    border-top: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-content ol {
    padding-left: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .accordion-content li {
    margin-bottom: 10px;
    font-weight: bold;
}

/* ========================================================================== 
   ID.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-card {
    width: 300px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header {
    padding: 0px;
    /* 10px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header .logo {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header h1 {
    font-size: 1rem;
    /* 16px */
    color: #1a1a1a;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .titlee {
    background-color: #0c2b71;
    color: #fff;
    padding: 0.625rem 0.9375rem;
    /* 10px 15px */
    margin-bottom: 0.625rem;
    /* 10px */
    box-sizing: border-box;
    margin-top: -4px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .titlee h2 {
    margin: 0;
    font-size: 1.5rem;
    /* 24px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .photo {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-bottom: -15px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .photo img {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .details {
    margin-bottom: 0.625rem;
    /* 10px */
    font-weight: bold;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .details h3 {
    font-size: 1rem;
    /* 24px */
    color: #003366;
    font-weight: 1000;
    text-align: center;
    margin-bottom: -5px;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .details p {
    /* 2px 50px */
    font-size: 0.875rem;
    /* 14px */
    color: #333;
    line-height: 0.875rem;
    /* 12px */
    margin-bottom: 0px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media {
    display: flex;
    align-items: center;
    padding: 0.625rem;
    /* 10px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qr-code {
    width: 80px;
    margin-right: 10px;
    /* 10px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media-text {
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media-text .footerimg {
    width: 150%;
    margin-left: -90px;
    margin-top: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .mediaword {
    margin: 0.3125rem 0;
    /* 5px 0 */
    font-size: 30px;
    /* 58px */
    font-weight: bolder;
    color: #fff;
    background-color: #d32f2f;
    float: inline-start;
    width: 100%;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media-text {
    color: #0c2b71;
    font-weight: bolder;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media-text h3 {
    margin-top: -0.625rem;
    /* -10px */
    font-size: 20px;
    /* 24px */
    color: #0c2b71;
    margin-bottom: -5px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media-text p {
    margin-top: 0px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .media img {
    margin-top: -110px;
    /* -145px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .ne2025 {
    font-weight: bolder;
    margin-bottom: 0px;
    font-size: 10px;
    /* 18px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .articlexv {
    font-weight: bolder;
    margin-bottom: 0px;
    font-size: 9px;
    /* 18px */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .citizenarm {
    margin-bottom: 0px;
    font-size: 16px;
    /* 18px */
}

/* ========================================================================== 
   INCIDENT-REPORT.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .under-userdetails {
    display: grid;
    grid-template-columns: 50% 50%;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 5px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg {
    width: 60px;
    height: 60px;
    overflow: hidden;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg img {
    width: 100%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userinfo {
    text-align: left;
    font-weight: bold;
    line-height: 1;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name {
    color: #0c2b71;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userid {
    text-transform: lowercase;
    font-size: 12px;
    font-weight: bold;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userposition {
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .labels {
    text-align: right;
    font-weight: bold;
    font-size: 12px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .values {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    margin-left: 3px;
    color: #1c1d20;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .datetime {
    font-size: 14px;
    width: 100%;
    text-align: left;
    color: #d11e1e;
    font-weight: bold;
    margin-bottom: 5px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fieldname {
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    display: block;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fieldname-2 {
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    display: block;
    color: #05b650;
    margin-bottom: 8px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) #text_field {
    margin-top: 5px;
    width: 70%;
    background: #e8eef5;
    border: 1px solid #e8eef5;
    outline: none;
    padding: 10px 15px;
    box-sizing: border-box;
    font-size: 16px;
    text-transform: capitalize;
    margin-bottom: 10px;
    color: #0c2b71;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .submit-btn-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .submit-btn-container button {
    width: 70%;
    padding: 10px 5px;
    font-weight: bold;
    font-size: 18px;
    outline: none;
    border: none;
    color: #fff;
    background: #d11e1e;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) #file-upload {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .upload-btn {
    display: inline-block;
    background-color: #0c2b71;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    border: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .file-name {
    margin-left: 10px;
    font-size: 18px;
    color: #0c2b71;
    font-weight: bold;
}

/* ========================================================================== 
   LEGALITIES.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-blue {
    color: #fff;
    background: #0c2b71;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-sizing: border-box;
    padding: 4px;
    height: 50px;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: 22px;
    font-family: "Anek Devanagari", sans-serif;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .long-text {
    text-align: justify;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    font-weight: lighter;
    font-size: 13px;
    color: #000000;
}

/* ========================================================================== 
   LIVE-FEED.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0px;
    height: auto !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header {
    width: 100%;
    height: 25px;
    color: #0cb7dc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 20px;
    box-sizing: border-box;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    max-width: 500px;
    padding: 20px;
    box-sizing: border-box;
    padding-top: 0px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .container {
    width: 100%;
    background: #fff;
    min-height: 200px;
    box-sizing: border-box;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepic img {
    width: 100%;
    height: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profile {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 15px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profile span {
    color: #0c2b71;
    font-size: 18px;
    font-weight: bold;
    line-height: 16px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profile span .sup {
    color: #7a7a7a;
    font-size: 12px;
    font-weight: 100;
    line-height: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) hr {
    color: gray;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .likecommentshare {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .likecommentshare button {
    width: 100%;
    margin: 1px;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 12px;
    height: 25px;
    border-radius: 5px;
    padding-bottom: 5px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .likecommentshare button:hover {
    background-color: #d2d2d3;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .icon {
    width: 20px;
    margin-bottom: -5px;
    margin-right: 2px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contentimg {
    width: 100%;
    margin-top: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content sub {
    color: #999999;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content {
    text-align: justify;
    font-size: 12px;
    color: #074181;
}

/* Add to live-feed.css or within \3c style> in live-feed.php */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .text-post .post-content {
    max-height: 75px;
    /* Adjust as needed */
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Expanded content */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .text-post .post-content.expanded {
    max-height: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .see-more {
    color: #58b2eb;
    /* Match to your theme */
    cursor: pointer;
    margin-bottom: -10px;
    display: block;
    float: right;
    position: static;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userinfo {
    display: flex;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .committees {
    all: inherit !important;
    display: block !important;
    overflow: hidden !important;
    width: 225px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .detailsss {
    position: relative;
    float: right;
    width: 100%;
    margin-bottom: -20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) #categ {
    color: #15d514;
    font-weight: bold;
    font-size: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .message_container {
    width: 100%;
    display: flex;
    justify-content: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .message {
    position: absolute;
    padding: 10px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    margin: 20px 0;
    display: inline-block;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 50px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 350px;
}

/* The Close Button */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .receiver {
    position: absolute;
    background-color: #061796;
    color: white;
    padding: 30px;
    border-radius: 5px;
    margin: 20px;
    text-align: center;
    font-size: 1.2em;
    top: 0px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .search-icon {
    background: transparent !important;
    right: 5px !important;
    top: 27% !important;
    position: absolute !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
}

/* ========================================================================== 
   PRECINCT-FINDER.CSS
   ========================================================================== */

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    /* Ensures at least full viewport height */
    height: auto;
    /* Allows expansion when content is more */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .er-records {
    font-size: 10px;
    padding: 0px 20px;
    box-sizing: border-box;
    height: 375px;
    overflow: auto;
    margin-bottom: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) th,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) td {
    padding: 5px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) th {
    background-color: #0c2b71;
    /* Dark Blue Header */
    color: white;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tr:nth-child(even) {
    background-color: #eaeff9;
    /* Light alternate rows */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tr:nth-child(odd) {
    background-color: white;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) td {
    color: #0c2b71;
    /* Blue text for data */
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) th,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) td {
    border: none;
    /* Remove table borders */
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) a {
    text-decoration: none;
    color: #0c2b71;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .titleee {
    color: #0c2b71;
    font-weight: 1000;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .title {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 1000;
    text-transform: uppercase;
    font-family:
        Arial Black,
        Arial;
    margin-bottom: 10px;
    color: #0c2b71 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content-hr {
    width: 250px;
    margin-top: -10px;
    margin-bottom: 20px;
    border: 1px solid #c8d9ea;
    color: #0c2b71 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h4 {
    color: #0c2b71;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-finder-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 50px;
    background-color: transparent;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: #043fa2;
    font-weight: bold;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-finder-form label {
    display: block;
    text-align: left;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-finder-form select {
    width: 100%;
    max-width: 300px;
    padding: 5px;
    box-sizing: border-box;
    background-color: #e6eced;
    display: block;
    border: none;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-finder-form div {
    width: 100%;
}

/* ========================================================================== 
   REGISTER.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: Arial;
    background-color: #0c2b71;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h2 {
    text-align: center;
    color: #0c2b71;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) strong {
    color: #0c2b71;
    font-weight: bold;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
    max-width: 400px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    margin-top: 0px;
    text-align: center;
    border: 1px solid #d5d5d5;
    margin-top: -8px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .select2-container {
    width: 100% !important;
    padding: 0px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .select2-selection {
    padding: 0px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="password"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="text"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="email"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="file"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) select,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .select2-container--default .select2-selection--single,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) textarea {
    width: 100% !important;
    padding: 10px !important;
    margin-bottom: 15px;
    box-sizing: border-box;
    border-radius: 10px !important;
    height: 40px !important;
    text-align: left;
    font-size: 12px;
    border: 1px solid #d5d5d5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .select2-selection__rendered {
    margin-top: -5px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"] {
    background: #104491;
    color: #fff;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    transition: background 1s;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"]:hover {
    background: #0a2c5d;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background: url(vid/rain.mp4);
    background-size: cover;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fullname {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 3px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    max-height: 500px;
    color: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    position: sticky;
    right: 15px;
    top: 10px;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .close:hover {
    color: #000;
}

/* Responsive layout */
@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
        width: 80%;
    }
}

@media (max-width: 400px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
        width: 80%;
    }
}

/* ========================================================================== 
   REGISTERFORM.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: Arial;
    background-color: #122b47;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    display: flex;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h2 {
    text-align: center;
    color: #012556;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
    max-width: 400px;
    margin: 20px auto;
    background: transparent;
    padding: 20px;
    border-radius: 5px;
    margin-top: 0px;
    text-align: center;
    box-shadow: 0px 2px 4px rgb(0, 0, 0, 0.2);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="password"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="text"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="email"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="file"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="number"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) select,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    outline: none;
    border: 1px solid #ccc;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"] {
    background: #ea2c32;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 1s;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"]:hover {
    background: #ee0404;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background: url(vid/rain.mp4);
    background-size: cover;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fullname {
    display: grid;
    grid-template-columns: auto auto auto auto;
}
/* Responsive layout */
@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
        width: 80%;
    }
}
@media (max-width: 400px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
        width: 80%;
    }
}

/* ========================================================================== 
   SEND-RESULTS.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg {
    width: 60px;
    height: 60px;
    overflow: hidden;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg img {
    width: 100%;
    transition: all 0.4s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg img:hover {
    transform: scale(1.2);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userinfo {
    text-align: left;
    font-weight: bold;
    line-height: 1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name {
    font-weight: bold;
    color: #0c2b71;
    text-transform: uppercase;
    font-size: 13px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userposition {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidate {
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .labels {
    text-align: right;
    font-weight: bold;
    font-size: 12px;
    color: #d11e1e;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .values {
    text-align: left;
    font-weight: bold;
    font-size: 12px;
    margin-left: 3px;
    color: #000;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .voting {
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 7% 73% 20%;
    justify-items: center;
    max-height: 650px;
    overflow-y: auto;
    overflow-x: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidates {
    font-weight: bold;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .numvote {
    background: #e8eef5;
    border: none;
    width: 100%;
    padding: 10px 5px;
    font-size: 11px;
    box-sizing: border-box;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidates-header {
    background: #0c2b71;
    color: #fff;
    font-weight: bold;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
    text-align: center;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .btn-submit {
    background: #0c2b71;
    border: none;
    color: #fff;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .checker {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    font-size: 10px;
    background: green;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .approver {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    font-size: 10px;
    background: blue;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidates-row {
    width: 100%;
    margin-top: 10px;
    display: grid;
    grid-template-columns: 7% 73% 20%;
    justify-items: center;
    max-height: 650px;
    overflow-y: auto;
    overflow-x: auto;
}

/* ========================================================================== 
   SER.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main-container {
    width: 100%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .upload_image {
    width: 100%;
    display: grid;
    grid-template-columns: 45% 60%;
    align-items: start;
    justify-items: start;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .upload_image .label {
    font-weight: bolder;
    font-size: 16px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qrcode {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin-bottom: 0px;
    justify-content: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qrcode img {
    width: 60px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .file-upload {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .file-upload input[type="file"] {
    position: absolute;
    font-size: 100px;
    opacity: 0;
    top: 0;
    left: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .file-upload-btn {
    display: inline-block;
    background-color: #1e4e9f; /* Blue color */
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    width: 150px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .file-upload-btn:hover {
    background-color: #163a75; /* Darker blue */
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .samples {
    width: 140px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .continue-button {
    background-color: #163a75; /* Blue color */
    color: #fff;
    border: none;
    outline: none;
    width: 225px;
    padding: 15px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .submit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

/* ========================================================================== 
   SUBMITTED-RESULTS.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userdetails {
    width: 100%;
    display: grid;
    grid-template-columns: 15% 35% 25% 25%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg {
    width: 60px;
    height: 60px;
    overflow: hidden;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profileimg img {
    width: 100%;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userinfo {
    text-align: left;
    font-weight: bold;
    line-height: 1;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name {
    color: #0c2b71;
    text-transform: uppercase;
    font-size: 13px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userid {
    text-transform: lowercase;
    font-size: 12px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .userposition {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .labels {
    text-align: right;
    font-weight: bolder;
    font-size: 12px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .values {
    text-align: left;
    font-weight: bolder;
    font-size: 12px;
    margin-left: 3px;
    color: #d11e1e;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) table {
    margin-top: 10px;
    text-align: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) th {
    background: #0c2b71;
    color: #fff;
    padding: 2px;
    font-size: 14px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tr {
    font-weight: bold;
    height: 30px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tr:nth-child(even) {
    background: #fff;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tr:nth-child(odd) {
    background: #eaeff9;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .candidate {
    text-align: left;
    padding-left: 20px;
}

/* ========================================================================== 
   VALIDATE.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    font-family: arial;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fields {
    width: 70%;
    margin-top: 20px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .label-poll {
    font-weight: bold;
    font-size: 16px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .label-fields {
    width: 100%;
    padding: 10px;
    background: #e8eef5;
    height: 35px;
    margin-top: 5px;
    border: none;
    outline: none;
    box-sizing: border-box;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .sendResultsBtn {
    width: 100%;
    height: 35px;
    outline: none;
    border: none;
    color: #fff;
    background: #104491;
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: 10px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .links {
    text-align: center;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .links a {
    text-decoration: none;
    color: #104491;
    font-weight: bold;
    font-size: 14px;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .links a:hover {
    color: #d11e1e;
}
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .links a:active {
    color: #ff5e22;
}

/* ========================================================================== 
   DESIGN-SYSTEM.CSS
   ========================================================================== */

/* PollWatch responsive design system */

:root:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    --pw-navy: #08265f;
    --pw-blue: #0d47a1;
    --pw-blue-strong: #063b8f;
    --pw-cyan: #16bfe1;
    --pw-red: #e9362a;
    --pw-ink: #10213d;
    --pw-muted: #64748b;
    --pw-line: #dbe5f0;
    --pw-surface: #ffffff;
    --pw-soft: #f3f7fb;
    --pw-radius-sm: 10px;
    --pw-radius: 16px;
    --pw-radius-lg: 24px;
    --pw-shadow-sm: 0 3px 12px rgba(8, 38, 95, 0.1);
    --pw-shadow: 0 14px 40px rgba(8, 38, 95, 0.14);
    --pw-shell: 100%;
}

*:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) *,
*:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])::before,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) *::before,
*:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])::after,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) *::after {
    box-sizing: border-box;
}

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    min-height: 100%;
    max-height: none !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(22, 191, 225, 0.16), transparent 26rem),
        linear-gradient(145deg, #061d4a 0%, #0b347f 100%) !important;
    scroll-behavior: smooth;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    color: var(--pw-ink);
    background: var(--pw-surface) !important;
    box-shadow: none !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) img,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) video,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) canvas,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) iframe {
    max-width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) img {
    height: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) a {
    text-underline-offset: 3px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) select,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) textarea {
    font: inherit;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="button"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) a {
    -webkit-tap-highlight-color: transparent;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header {
    min-height: clamp(138px, 18vw, 215px) !important;
    height: auto !important;
    background-color: var(--pw-navy) !important;
    background-size: cover !important;
    background-position: center !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-card .header {
    min-height: clamp(93px, 18vw, 93px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header img {
    width: 100%;
    max-height: 215px;
    object-fit: cover;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) main,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .main,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .container,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form {
    min-width: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) main {
    width: 100% !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content {
    width: min(100%, 1040px) !important;
    min-height: 0 !important;
    margin-inline: auto;
    padding: clamp(20px, 4vw, 48px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .title,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h1,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h2 {
    color: var(--pw-navy);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .titlee h2 {
    color: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .title {
    font-size: clamp(1.35rem, 2.5vw, 2rem) !important;
    margin-block: 0 1.25rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h1 {
    font-size: clamp(1.65rem, 3.4vw, 2.75rem);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) h2 {
    font-size: clamp(1.3rem, 2.4vw, 2rem);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) p {
    max-width: 72ch;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .search-form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .searchField {
    width: min(88%, 760px);
    margin-inline: auto;
    z-index: 90;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
    width: 100% !important;
    min-height: 52px;
    margin: -26px 0 0 !important;
    padding: 12px 64px 12px 22px !important;
    border: 1px solid rgba(8, 38, 95, 0.08) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--pw-shadow) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch:focus {
    outline: 3px solid rgba(22, 191, 225, 0.28) !important;
    border-color: var(--pw-cyan) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    margin: 0 !important;
    transform: translateY(-50%);
    min-width: 48px;
    min-height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50% !important;
    z-index: 120 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger img {
    display: block;
    width: 29px;
    height: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger-menu {
    position: static !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger:hover {
    background: var(--pw-soft) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger:focus-visible {
    outline: 3px solid var(--pw-cyan);
    outline-offset: 2px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items {
    position: absolute !important;
    top: 32px !important;
    right: 0 !important;
    width: min(340px, calc(100vw - 28px)) !important;
    max-height: min(70vh, 620px);
    overflow-y: auto;
    padding: 12px !important;
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius) !important;
    box-shadow: var(--pw-shadow) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a {
    padding: 10px 12px !important;
    border-radius: 9px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .menu-items a:focus-visible {
    background: var(--pw-blue) !important;
    color: #fff !important;
    outline: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home {
    margin-top: 0 !important;
    padding: clamp(24px, 4vw, 44px) clamp(16px, 4vw, 44px) 8px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home-under-under {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 12px;
    max-width: 980px;
    margin-inline: auto;
    padding: 14px 18px !important;
    border: 1px solid var(--pw-line);
    background: var(--pw-surface) !important;
    box-shadow: var(--pw-shadow-sm);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepicpost {
    width: 54px !important;
    height: 54px !important;
    box-shadow: 0 0 0 4px var(--pw-soft);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qrcode-container img {
    width: 58px !important;
    height: 58px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name {
    font-size: clamp(0.9rem, 1.5vw, 1.05rem) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name-2 {
    font-size: clamp(0.72rem, 1.3vw, 0.9rem) !important;
    color: var(--pw-muted) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container {
    width: min(100%, 920px) !important;
    margin-inline: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px;
    padding: 18px clamp(14px, 3vw, 28px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container > div,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .tabs,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .records,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .post,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .request-card {
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius) !important;
    background: var(--pw-surface);
    box-shadow: var(--pw-shadow-sm);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container > div {
    padding: 18px 10px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container > div:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--pw-shadow);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container img {
    margin: 0 auto 8px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card {
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pw-shadow);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .two_buttons,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bottom-btns {
    gap: 12px !important;
    padding-inline: clamp(16px, 4vw, 40px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .register-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bottom-btns a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) form:not(.search-form) {
    width: min(100% - 32px, 720px) !important;
    max-width: 720px !important;
    margin-inline: auto !important;
    border-radius: var(--pw-radius-lg) !important;
    box-shadow: var(--pw-shadow-sm);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) select,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) textarea {
    max-width: 100%;
    min-height: 44px;
    border: 1px solid #cbd8e6 !important;
    border-radius: var(--pw-radius-sm) !important;
    background-color: #f8fafc;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) select:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) textarea:focus {
    outline: none !important;
    border-color: var(--pw-cyan) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(22, 191, 225, 0.18) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .sendResultsBtn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .key,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .tabs {
    min-height: 44px;
    border-radius: var(--pw-radius-sm) !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) button:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"]:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .sendResultsBtn:hover {
    transform: translateY(-1px);
    box-shadow: var(--pw-shadow-sm);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) button:active,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input[type="submit"]:active {
    transform: translateY(0);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fullname {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fields {
    width: 100% !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 440px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-inputs {
    flex-wrap: wrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .table-responsive,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .table-container,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--pw-line);
    border-radius: var(--pw-radius-sm);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) th {
    padding: 12px 10px !important;
    background: var(--pw-navy) !important;
    color: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) td {
    padding: 11px 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tbody tr:nth-child(even) {
    background: var(--pw-soft) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) tbody tr:hover {
    background: #e8f6fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal {
    padding: 24px !important;
    display: none;
    align-items: center;
    justify-content: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal-content {
    width: min(100%, 620px) !important;
    max-height: calc(100vh - 48px) !important;
    margin: auto !important;
    overflow: auto;
    border: 0 !important;
    border-radius: var(--pw-radius-lg) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bg-notif {
    max-width: var(--pw-shell) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footer {
    position: sticky !important;
    z-index: 80;
    min-height: 68px !important;
    height: auto !important;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))
        max(8px, env(safe-area-inset-left)) !important;
    align-items: stretch !important;
    border-top: 1px solid var(--pw-line);
    box-shadow: 0 -8px 28px rgba(8, 38, 95, 0.1) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton {
    min-width: 0;
    min-height: 56px;
    border-radius: 12px;
    font-size: clamp(0.68rem, 1.4vw, 0.84rem) !important;
    gap: 2px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton:focus-visible {
    transform: none !important;
    background: var(--pw-soft) !important;
    outline: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbuttonimg {
    width: 26px !important;
    margin: 0 !important;
}

@media (min-width: 801px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        border-radius: 0;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container {
        grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footer {
        grid-template-columns: repeat(5, minmax(100px, 1fr)) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton {
        flex-direction: row !important;
        gap: 8px;
    }
}

@media (max-width: 800px) {
    :root:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
        --pw-radius-lg: 18px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        width: 100% !important;
        box-shadow: none !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content {
        padding: 24px 16px 32px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home-under-under {
        padding: 12px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fullname {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .header,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > header {
        min-height: 132px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .searchField {
        width: calc(100% - 28px);
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .inputsearch {
        min-height: 50px;
        padding-left: 18px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger {
        right: 6px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home {
        padding: 26px 10px 4px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .home-under-under {
        grid-template-columns: 48px minmax(0, 1fr) 46px !important;
        gap: 8px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepicpost {
        width: 46px !important;
        height: 46px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .qrcode-container img {
        width: 44px !important;
        height: 44px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container {
        gap: 9px;
        padding-inline: 10px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .grid-container > div {
        padding: 14px 6px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .two_buttons,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .bottom-btns {
        grid-template-columns: 1fr !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .modal {
        padding: 12px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footer {
        overflow-x: auto;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) table {
        font-size: 0.82rem;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) th,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) td {
        padding: 9px 7px !important;
    }
}

@media (max-width: 360px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbutton {
        font-size: 0.62rem !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .fbuttonimg {
        width: 22px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name {
        font-size: 0.8rem !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .name-2 {
        font-size: 0.65rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]),
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) *,
    *:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])::before,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) *::before,
    *:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])::after,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]),
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        background: #fff !important;
        box-shadow: none !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .search-form,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hamburger,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) footer,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .footerbutton {
        display: none !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .content {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* v6 layout hardening: neutralize legacy fixed-width/flex page shells */

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    align-items: initial !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: initial !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > main {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result main {
    padding-top: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result main > .content {
    width: min(calc(100% - (var(--page-gutter) * 2)), 1180px) !important;
    max-width: 1180px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .content > .title {
    text-align: center !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .content > .title::after {
    left: 50%;
    transform: translateX(-50%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userdetails {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(100%, 820px) !important;
    margin: 0 auto 20px;
    padding: 15px 18px;
    border: 1px solid #dce6f0;
    border-radius: 14px;
    background: #f8fbfd;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userinfo {
    width: auto !important;
    min-width: 0;
    line-height: 1.25 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .profileimg {
    flex: 0 0 58px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #e7eff8;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .precinct-finder-form {
    width: min(100%, 920px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
    grid-template-columns: 60px minmax(260px, 1fr) 150px !important;
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userdetails {
        justify-content: flex-start;
        padding: 12px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
        grid-template-columns: 42px minmax(190px, 1fr) 110px !important;
    }
}

/* Modern dashboard composition */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home {
    --dashboard-pad: clamp(22px, 4vw, 56px);
    background: #f4f7fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .header {
    min-height: clamp(140px, 12vw, 176px) !important;
    background-size: 70% auto !important;
    background-repeat: no-repeat !important;
    background-color: #082d6c !important;
    margin: 0 !important;
}

/* Home verification bar: override the legacy 400px form and input spacing. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.page-home > form.search-form {
    position: relative;
    z-index: 90;
    width: min(calc(100% - 32px), 760px) !important;
    max-width: 760px !important;
    margin: -24px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home .search-form .searchField {
    position: relative;
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home .search-form #myBtn {
    display: block;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 16px 74px 16px 20px !important;
    color: #193b61 !important;
    border: 1px solid #ccdeeb !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(8, 38, 95, 0.12) !important;
    font-size: 16px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home .search-form #myBtn::placeholder {
    color: #627b95;
    opacity: 1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home .search-form .searchField > .hamburger {
    top: 7px !important;
    right: 8px !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
    border: 0;
    border-radius: 10px !important;
    background: #edf5fa !important;
    transform: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home .search-form .hamburger img {
    width: 24px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home .search-form .searchField .menu-items {
    top: 66px !important;
    right: 0 !important;
    left: auto !important;
    max-width: 100% !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .home,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .main,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .group-title,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .submission,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .sub,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .bottom-btns,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > div[style*="justify-content: center"] {
    display: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-shell {
    width: 100%;
    padding: clamp(54px, 7vw, 92px) var(--dashboard-pad) clamp(44px, 6vw, 76px);
    text-align: left;
    background: radial-gradient(circle at 88% 3%, rgba(20, 184, 220, 0.12), transparent 23rem), #f4f7fb;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.95fr);
    gap: clamp(30px, 6vw, 86px);
    align-items: center;
    max-width: 1120px;
    margin: 0 auto clamp(42px, 6vw, 72px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hero-copy h1 {
    margin: 8px 0 16px;
    font-size: clamp(2.2rem, 4.4vw, 4.5rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
    color: #092a63;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hero-copy h1 span {
    color: #159dbf;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hero-copy p {
    margin: 0;
    color: #53657d;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .eyebrow {
    display: inline-flex;
    color: #0a83a1;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 170px;
    padding: 28px;
    color: #fff;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    background: linear-gradient(135deg, #082b67, #0b4aa0 68%, #0f86a8);
    box-shadow: 0 24px 50px rgba(6, 35, 90, 0.2);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -80px;
    top: -105px;
    border: 32px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card .profilepicpost {
    width: 62px !important;
    height: 62px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.17);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-copy strong {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-copy > span:last-child {
    color: #e0ecff;
    font-size: 0.78rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-label {
    color: #73d8ed;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-status {
    position: absolute;
    left: 28px;
    bottom: 21px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #d8e8fa;
    font-size: 0.76rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-status i,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .live-pill i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #47e6a5;
    box-shadow: 0 0 0 5px rgba(71, 230, 165, 0.14);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card .qrcode-container {
    position: relative;
    z-index: 1;
    padding: 7px;
    border-radius: 10px;
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card .qrcode-container img {
    display: block;
    width: 66px !important;
    height: 66px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-section {
    max-width: 1120px;
    margin: 0 auto clamp(38px, 5vw, 62px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .section-heading h2 {
    margin: 4px 0 0;
    font-size: clamp(1.45rem, 2.4vw, 2.05rem);
    letter-spacing: -0.035em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .section-note {
    color: #75849a;
    font-size: 0.86rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 108px;
    padding: 18px 20px;
    color: #153052;
    text-decoration: none;
    border: 1px solid #dce6f1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(17, 48, 89, 0.06);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card:hover {
    transform: translateY(-4px);
    border-color: #9fd9e8;
    box-shadow: 0 18px 36px rgba(17, 48, 89, 0.13);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: linear-gradient(145deg, #edf7ff, #e1ecff);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-icon-red {
    background: linear-gradient(145deg, #fff1ef, #ffe5e1);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-icon img {
    width: 38px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card > span:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card strong {
    font-size: 0.98rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card small {
    color: #75849a;
    font-size: 0.8rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card > b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: #0b78a0;
    border-radius: 50%;
    background: #eef8fb;
    font-size: 1.1rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-lower {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr);
    gap: 22px;
    max-width: 1120px;
    margin-inline: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-lower .dashboard-section {
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-card {
    position: relative;
    min-height: 265px;
    overflow: hidden;
    color: #fff;
    border-radius: 22px;
    box-shadow: 0 16px 35px rgba(17, 48, 89, 0.14);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 25%, rgba(4, 24, 59, 0.9) 100%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-card:hover img {
    transform: scale(1.055);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-overlay {
    position: absolute;
    z-index: 1;
    inset: auto 20px 20px;
    display: flex;
    flex-direction: column;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-overlay small {
    color: #8be5f2;
    text-transform: uppercase;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-overlay strong {
    margin: 3px 0 8px;
    font-size: 1.1rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-overlay b {
    font-size: 0.76rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-count-panel {
    align-self: end;
    min-height: 350px;
    padding: 30px;
    color: #fff;
    border-radius: 24px;
    background: linear-gradient(155deg, #0c3475, #081f50);
    box-shadow: 0 20px 42px rgba(8, 31, 80, 0.23);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .live-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    color: #cbe8f4;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-count-panel h2 {
    margin: 24px 0 8px;
    color: #fff;
    font-size: 2rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-count-panel p {
    color: #c1d0e3;
    font-size: 0.88rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .count-stat {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 25px;
    color: #6ed7e9;
    font-size: 0.75rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .primary-action,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .secondary-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 15px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .primary-action {
    color: #07255c;
    background: linear-gradient(135deg, #67ddef, #a8eff5);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .secondary-action {
    justify-content: center;
    margin-top: 8px;
    color: #d6e6f8;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .primary-action:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .secondary-action:hover {
    filter: brightness(1.06);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > footer {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-hero {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hero-copy {
        max-width: 680px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-lower {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-count-panel {
        min-height: 0;
    }
}

@media (max-width: 650px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home {
        --dashboard-pad: 14px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-home > .header {
        min-height: 132px !important;
        background-size: 96% auto !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-shell {
        padding-top: 52px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .hero-copy h1 {
        font-size: clamp(2.15rem, 11vw, 3.1rem);
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .dashboard-hero {
        gap: 26px;
        margin-bottom: 42px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card {
        min-height: 146px;
        padding: 20px;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card .profilepicpost {
        width: 52px !important;
        height: 52px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card .qrcode-container img {
        width: 48px !important;
        height: 48px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-status {
        left: 20px;
        bottom: 14px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-grid,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-grid {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card {
        min-height: 94px;
        padding: 14px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-icon {
        width: 54px;
        height: 54px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .section-note {
        display: none;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feature-card {
        min-height: 230px;
    }
}

@media (max-width: 400px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-status {
        display: none;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card {
        min-height: 110px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-copy > span:last-child {
        font-size: 0.68rem;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .identity-card .qrcode-container {
        padding: 4px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .action-card small {
        display: none;
    }
}

/* ========================================================================== */

/* PollWatch Product System v5 — shared public portal                         */

/* ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app {
    --page-gutter: clamp(16px, 4vw, 56px);
    --content-wide: 1180px;
    --content-reading: 820px;
    min-height: 100vh;
    color: #13223a;
    background: #f3f7fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(126px, 12vw, 176px) !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: #082d6c !important;
    background-size: min(760px, 72%) auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header::before,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 0%, rgba(26, 184, 214, 0.14), transparent 28rem),
        linear-gradient(90deg, rgba(3, 23, 60, 0.25), transparent 35%, transparent 65%, rgba(3, 23, 60, 0.25));
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header > div {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header img {
    display: block;
    width: min(760px, 72%) !important;
    max-height: 165px !important;
    object-fit: contain !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > main,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app main:not(.dashboard-shell) {
    width: 100% !important;
    min-height: calc(100vh - 240px);
    padding-bottom: 30px;
    background: #f3f7fb;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app:not(.page-home) main > .content {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-wide)) !important;
    max-width: var(--content-wide) !important;
    margin: 0 auto !important;
    padding: clamp(38px, 5vw, 68px) clamp(20px, 4vw, 48px) !important;
    border: 1px solid #dce6f0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(8, 38, 95, 0.08);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .content > .title,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app main > .title,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app body > .title {
    position: relative;
    margin: 0 0 28px !important;
    padding: 0 0 15px;
    color: #092a63 !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    font-size: clamp(1.55rem, 3vw, 2.35rem) !important;
    font-weight: 800 !important;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-align: left !important;
    text-transform: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .content > .title::after,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app main > .title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 52px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #11a4c5, #61d5e5);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .content-hr,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .content > hr {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .main-container {
    width: 100%;
    min-width: 0;
    color: #1c304e;
}

/* Shared identity strip used throughout operational screens */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app:not(.page-home) > .home,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app:not(.page-home) main > .home {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-wide));
    margin: 0 auto !important;
    padding: 50px 0 8px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app:not(.page-home) .home-under-under {
    max-width: none;
    min-height: 94px;
    padding: 16px 20px !important;
    border: 1px solid #dce6f0;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(8, 38, 95, 0.07);
}

/* Forms and controls */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app form:not(.search-form) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .precinct-finder-form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .content > form:not(.search-form),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .registration-container,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .input_form {
    width: min(100%, 820px) !important;
    margin-inline: auto !important;
    padding: clamp(18px, 3vw, 30px) !important;
    border: 1px solid #dce6f0 !important;
    border-radius: 18px !important;
    background: #f9fbfd !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app label,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fieldname,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .label-poll {
    display: block;
    margin: 0 0 7px;
    color: #243a5c;
    font-size: 0.79rem;
    font-weight: 750;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pollwatch-app
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app select,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app textarea,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .select2-selection {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 15px !important;
    padding: 11px 14px !important;
    color: #152947 !important;
    border: 1px solid #cbd9e7 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(8, 38, 95, 0.03);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app textarea {
    min-height: 125px !important;
    resize: vertical;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app input::placeholder,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app textarea::placeholder {
    color: #8b9aae;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app input:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app select:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app textarea:focus {
    outline: 3px solid rgba(20, 184, 214, 0.16) !important;
    border-color: #18aac9 !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app input[type="submit"],
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .submit-button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .sendResultsBtn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .validate-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .record-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .poll-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .file-upload-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .registration-button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .option-button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .print-btn,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .btn-2 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 46px !important;
    padding: 11px 18px !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #0d4ba5, #0b7ea3) !important;
    box-shadow: 0 8px 18px rgba(9, 70, 146, 0.18);
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app input[type="submit"]:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .submit-button:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .validate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(9, 70, 146, 0.24);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app input[type="file"] {
    padding: 8px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pollwatch-app
    input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 13px;
    color: #0a438f;
    border: 0;
    border-radius: 8px;
    background: #e9f2fc;
    font-weight: 750;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fullname {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

/* Data and record surfaces */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-table-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dce6f0;
    border-radius: 14px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-table-scroll:focus {
    outline: 3px solid rgba(20, 184, 214, 0.16);
    outline-offset: 2px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app table {
    min-width: 680px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 0.8rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 13px 12px !important;
    background: #092a63 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app td {
    padding: 12px !important;
    border-bottom: 1px solid #e6edf4;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app tbody tr:last-child td {
    border-bottom: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .table-container {
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--content-wide));
    margin: 0 auto 36px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid #dce6f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(8, 38, 95, 0.08);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app #Submitted_by {
    display: block;
    margin-bottom: 12px;
    color: #6c7d92;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .submitter_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app #submitter {
    padding: 18px;
    overflow: hidden;
    border: 1px solid #dce6f0;
    border-radius: 16px;
    background: #f9fbfd;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .sub_header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: -18px -18px 14px;
    padding: 13px 16px;
    color: #fff;
    background: linear-gradient(100deg, #0a3578, #0d5796);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .submitter_name {
    color: #fff !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .status {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    color: #ffe7a3 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.68rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .location {
    margin-bottom: 12px;
    color: #607187;
    font-size: 0.78rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .digidocs_list {
    display: grid;
    gap: 5px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .digidoc a {
    color: #0b5a9f;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

/* Account, profile, and digital document pages */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pollwatch-app
    .content
    .main-container:has(.userimages) {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(24px, 5vw, 64px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages {
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(150deg, #092a63, #0c5297);
    color: #fff;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .img-container {
    width: 118px;
    height: 118px;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .userposition {
    margin: 0 0 18px;
    color: #fff;
    font-size: 0.74rem;
    letter-spacing: 0.1em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .img-container-2 {
    justify-content: center;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userdetails {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .username {
    color: #092a63;
    font-size: clamp(1.25rem, 2.3vw, 1.8rem);
    font-weight: 850;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userid {
    margin: 3px 0 18px;
    color: #d43d35 !important;
    font-size: 0.84rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userdetails > div:has(> .labels) {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid #e8eef5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .labels {
    color: #718198;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .values {
    color: #152947 !important;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .changepin {
    width: min(100%, 460px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .digidocs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px;
    width: min(calc(100% - (var(--page-gutter) * 2)), 900px) !important;
    margin: 0 auto 36px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .digidocs > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 14px;
    color: #0a438f !important;
    border: 1px solid #d5e2ef;
    border-radius: 11px;
    background: #fff !important;
    box-shadow: 0 5px 15px rgba(8, 38, 95, 0.05);
    text-decoration: none !important;
    font-size: 0.8rem;
    font-weight: 750;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .digidocs > a:hover {
    border-color: #8fd6e6;
    background: #eff9fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .printable-section {
    display: flex;
    justify-content: center;
    padding: 24px;
    border: 1px dashed #b8c8db;
    border-radius: 16px;
    background: #f8fafc;
}

/* Election forms and candidate grids */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .voting,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .candidates {
    width: 100% !important;
    max-height: 560px;
    overflow: auto;
    border: 1px solid #dbe5ef;
    border-radius: 14px;
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .candidates-header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 48px;
    padding: 10px !important;
    color: #fff !important;
    background: #092a63 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .candidates-row {
    min-height: 54px;
    border-bottom: 1px solid #e6edf4;
    background: #fff !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .candidates-row:nth-child(even) {
    background: #f6f9fc !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .numvote {
    min-height: 42px !important;
    margin: 5px !important;
}

/* FAQ and long-form legal content */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .accordion {
    display: grid;
    gap: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .accordion-item {
    overflow: hidden;
    border: 1px solid #dce6f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 5px 16px rgba(8, 38, 95, 0.04);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .accordion-button {
    position: relative;
    width: 100%;
    min-height: 58px;
    padding: 15px 48px 15px 18px !important;
    color: #173459 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    text-align: left;
    font-size: 0.88rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .accordion-button::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #0a5798;
    border-radius: 50%;
    background: #eaf5f9;
    font-size: 1.1rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pollwatch-app
    .accordion-button[aria-expanded="true"]::after {
    content: "−";
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .accordion-content {
    padding: 0 20px 20px !important;
    color: #52647b;
    line-height: 1.7;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .long-text {
    max-width: var(--content-reading);
    margin: 0 auto;
    color: #344861;
    font-size: clamp(0.92rem, 1.3vw, 1.03rem) !important;
    line-height: 1.75;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .bg-blue {
    max-width: var(--content-reading);
    min-height: 58px;
    margin: 0 auto 8px;
    padding: 16px 20px !important;
    color: #fff !important;
    border-radius: 13px;
    background: linear-gradient(100deg, #092a63, #0a6f9a) !important;
    font-size: 1rem !important;
    letter-spacing: 0.03em;
    text-transform: none;
}

/* Live feed */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed main {
    width: min(calc(100% - (var(--page-gutter) * 2)), 760px) !important;
    margin: 0 auto;
    padding: 18px 0 44px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed .container {
    padding: 18px;
    border: 1px solid #dce6f0;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(8, 38, 95, 0.07);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed .profile {
    margin-top: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed .contentimg {
    overflow: hidden;
    border-radius: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed .likecommentshare {
    padding-top: 8px;
    border-top: 1px solid #e7edf4;
}

/* Authentication and registration */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-loginf,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-pin,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-forgot-password,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-reset-password,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register1,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register2,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register3,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register-old,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-ntsc-volunteer {
    background:
        radial-gradient(circle at 80% 10%, rgba(27, 184, 214, 0.2), transparent 28rem),
        linear-gradient(145deg, #05183e, #0b3f91) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register1 > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register2 > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register3 > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-register-old > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-ntsc-volunteer > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-forgot_password > form,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-reset-password > form {
    width: min(calc(100% - 28px), 760px) !important;
    margin: 30px auto !important;
    padding: clamp(22px, 4vw, 42px) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login main {
    display: flex !important;
    align-items: center !important;
    flex-direction: column;
    padding: 44px 14px !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login main > form {
    width: min(100%, 470px) !important;
    margin: 0 auto !important;
    padding: clamp(22px, 4vw, 38px) !important;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 24px !important;
    background: rgba(6, 29, 72, 0.8) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(14px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .content {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .label-fields {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .label-fields::placeholder {
    color: #b9cbe0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .pin-inputs {
    gap: 8px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .pin-input {
    flex: 0 1 44px;
    width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .keypad {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 8px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .key {
    min-height: 50px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .key:hover {
    color: #082d6c;
    background: #c8f1f6 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-login .links {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Notifications, modal, and navigation */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .receiver,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .message {
    position: fixed !important;
    z-index: 900;
    top: 18px !important;
    left: 50%;
    width: min(calc(100% - 28px), 460px);
    margin: 0 !important;
    padding: 14px 42px 14px 16px !important;
    color: #153052 !important;
    border: 1px solid #cfe0ec !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 14px 40px rgba(8, 38, 95, 0.18) !important;
    transform: translateX(-50%);
    font-size: 0.82rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .close-btn {
    top: 8px !important;
    right: 10px !important;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #738399 !important;
    border-radius: 50%;
    background: #eef3f7;
    font-size: 0.8rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .modal {
    align-items: center;
    justify-content: center;
    padding: 18px !important;
    background: rgba(4, 18, 45, 0.64) !important;
    backdrop-filter: blur(5px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .modal-content {
    border-radius: 20px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .menu-items {
    padding: 10px !important;
    border: 1px solid #d6e2ee;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .menu-items a {
    color: #173459 !important;
    font-size: 0.78rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .menu-items a.is-current {
    color: #fff !important;
    background: linear-gradient(100deg, #0d4ba5, #0b7ea3) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
    position: sticky !important;
    bottom: 0;
    z-index: 100;
    width: 100%;
    min-height: 72px !important;
    padding: 7px max(12px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left)) !important;
    border-top: 1px solid rgba(207, 221, 234, 0.9);
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 -8px 28px rgba(8, 38, 95, 0.09) !important;
    backdrop-filter: blur(18px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton {
    position: relative;
    color: #52667f !important;
    border-radius: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton.is-active {
    color: #0a438f !important;
    background: #eaf5fa !important;
    font-weight: 750;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton.is-active::before {
    content: "";
    position: absolute;
    top: 2px;
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: #18aac9;
}

@media (min-width: 901px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
        padding-inline: max(4vw, 40px) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton {
        max-width: 180px;
        justify-self: center;
    }
}

@media (max-width: 900px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header {
        background-size: min(620px, 88%) auto !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header img {
        width: min(620px, 88%) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .submitter_list {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .pollwatch-app
        .content
        .main-container:has(.userimages) {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        text-align: left;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .img-container {
        width: 82px;
        height: 82px;
        margin: 0;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .img-container-2 {
        width: 72px;
    }
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app {
        --page-gutter: 12px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header {
        min-height: 132px !important;
        background-size: 96% auto !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header img {
        width: 96% !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app:not(.page-home) main > .content {
        padding: 30px 16px !important;
        border-radius: 17px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .content > .title,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app main > .title {
        font-size: 1.6rem !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fullname {
        grid-template-columns: 1fr !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages {
        grid-template-columns: auto minmax(0, 1fr);
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userimages .img-container-2 {
        display: none;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .userdetails > div:has(> .labels) {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .actions {
        align-items: stretch;
        flex-direction: column;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .validate-btn {
        width: 100%;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .digidocs {
        grid-template-columns: 1fr 1fr !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
        min-height: 66px !important;
        padding-inline: 4px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton {
        min-height: 52px;
        font-size: 0.62rem !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbuttonimg {
        width: 23px !important;
    }
}

@media print {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .search-form,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
        display: none !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app main,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app main > .content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* v6 final overrides */

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: initial !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > header,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > .header,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app > main {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result main > .content {
    width: min(calc(100% - (var(--page-gutter) * 2)), 1180px) !important;
    max-width: 1180px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .content > .title {
    text-align: center !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .content > .title::after {
    left: 50% !important;
    transform: translateX(-50%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userdetails {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(100%, 820px) !important;
    margin: 0 auto 20px !important;
    padding: 15px 18px;
    border: 1px solid #dce6f0;
    border-radius: 14px;
    background: #f8fbfd;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userinfo {
    width: auto !important;
    min-width: 0;
    line-height: 1.25 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .profileimg {
    flex: 0 0 58px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #e7eff8;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .precinct-finder-form {
    width: min(100%, 920px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
    grid-template-columns: 60px minmax(260px, 1fr) 150px !important;
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userdetails {
        justify-content: flex-start;
        padding: 12px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
        grid-template-columns: 42px minmax(190px, 1fr) 110px !important;
    }
}

/* v7 notification toasts */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .bg-notif:has(.pw-toast),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .bg-notif:empty {
    display: none !important;
    background: transparent !important;
    pointer-events: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-region {
    position: fixed;
    z-index: 1400;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: grid;
    gap: 12px;
    width: min(390px, calc(100vw - 36px));
    pointer-events: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .pw-toast {
    --toast-accent: #1487ad;
    --toast-soft: #eaf7fb;
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100% !important;
    min-height: 76px;
    margin: 0 !important;
    padding: 13px 46px 16px 14px !important;
    overflow: hidden;
    color: #173459 !important;
    border: 1px solid rgba(23, 52, 89, 0.12) !important;
    border-left: 4px solid var(--toast-accent) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow:
        0 18px 48px rgba(5, 31, 74, 0.2),
        0 2px 8px rgba(5, 31, 74, 0.08) !important;
    opacity: 0;
    transform: translateX(28px) scale(0.98) !important;
    transition:
        opacity 0.24s ease,
        transform 0.24s ease !important;
    pointer-events: auto;
    backdrop-filter: blur(18px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .pw-toast.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .pw-toast.is-leaving {
    opacity: 0;
    transform: translateX(28px) scale(0.98) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-success {
    --toast-accent: #0a9d72 !important;
    --toast-soft: #e7f8f2 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-error {
    --toast-accent: #dc3f4d !important;
    --toast-soft: #fff0f1 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-warning {
    --toast-accent: #e49a12 !important;
    --toast-soft: #fff7e5 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-info {
    --toast-accent: #1487ad !important;
    --toast-soft: #eaf7fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--toast-accent);
    border-radius: 12px;
    background: var(--toast-soft);
    font-size: 1.08rem;
    font-weight: 900;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    line-height: 1.35;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-copy strong {
    color: #0b2d62;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.01em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-copy > span {
    color: #5a6e87;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #71839a;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-close:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-close:focus-visible {
    color: #173459;
    background: #eef4f8;
    outline: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--toast-accent);
    transform-origin: left;
    animation: pw-toast-countdown 6s linear forwards;
}

@keyframes pw-toast-countdown {
    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .pw-toast {
        transition: opacity 0.15s ease !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-progress {
        animation: none;
    }
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-toast-region {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        left: 12px;
        width: auto;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .pw-toast {
        min-height: 70px;
        border-radius: 14px !important;
    }
}

/* v8 fixed bottom navigation */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
    position: fixed !important;
    z-index: 120 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 -12px 38px rgba(8, 38, 95, 0.14) !important;
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton {
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app .fbutton:hover {
    transform: translateY(-2px) !important;
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app {
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
        border-radius: 15px 15px 0 0;
    }
}

/* v9 administrator-controlled public announcement */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement {
    position: relative;
    z-index: 42;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 14px;
    width: min(calc(100% - 32px), 1180px);
    margin: 14px auto 0;
    padding: 13px 16px;
    color: #17405f;
    border: 1px solid #bfe0eb;
    border-radius: 13px;
    background: #edf9fc;
    box-shadow: 0 8px 22px rgba(8, 38, 95, 0.08);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement::before {
    content: "i";
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 9px;
    background: #118bb0;
    font-size: 0.8rem;
    font-weight: 900;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement strong {
    color: #0b376b;
    font-size: 0.72rem;
    font-weight: 850;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement span {
    color: #526d84;
    font-size: 0.72rem;
    line-height: 1.45;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement-warning {
    color: #6b4a05;
    border-color: #f1d897;
    background: #fff8e6;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement-warning::before {
    content: "!";
    background: #d99517;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement-critical {
    color: #7d2630;
    border-color: #f1c5c9;
    background: #fff1f2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement-critical::before {
    content: "!";
    background: #d83c4a;
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-system-announcement {
        width: calc(100% - 24px);
        margin-top: 10px;
        padding: 12px;
    }
}

/* v10 public page refinements and media recovery */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-media-fallback {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    width: 100%;
    min-height: 82px;
    padding: 12px;
    color: #6d8098;
    border: 1px dashed #c7d4e1;
    border-radius: 12px;
    background: #eef3f7;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-media-fallback > span {
    color: #8ba0b8;
    font-size: 1.25rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-media-fallback small {
    color: #6d8098;
    font-size: 0.65rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepic .pw-media-fallback,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .profilepicpost .pw-media-fallback,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .img-container .pw-media-fallback {
    min-height: 100%;
    border: 0;
    border-radius: 50%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-recovered-image {
    object-fit: cover;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .title,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > .title,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate main > .title {
    width: min(calc(100% - 32px), 1180px) !important;
    margin: 28px auto 18px !important;
    padding: 0 !important;
    color: #082f6d !important;
    text-align: center !important;
    font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
    letter-spacing: -0.035em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .title::after,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > .title::after,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate main > .title::after {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #1eb7cf;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > .content-hr,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate main > .title + .content-hr {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .content {
    margin-bottom: 24px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .title {
    margin-top: 36px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .digidocs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    width: min(calc(100% - 32px), 1080px) !important;
    margin: 0 auto 36px !important;
    padding: 18px !important;
    border: 1px solid #dce6f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(8, 38, 95, 0.08);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .digidocs a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 12px 14px !important;
    color: #0b4a91 !important;
    border: 1px solid #d5e2ed !important;
    border-radius: 12px !important;
    background: #f7fafc !important;
    text-align: center;
    font-size: 0.72rem !important;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .digidocs a:hover {
    transform: translateY(-2px);
    border-color: #8ed5e2 !important;
    box-shadow: 0 8px 18px rgba(8, 69, 132, 0.1);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > .home {
    width: min(calc(100% - 32px), 1180px) !important;
    margin: 18px auto 0 !important;
    padding: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(calc(100% - 32px), 1180px) !important;
    max-width: 1180px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 34px !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > main > br {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    min-height: 178px;
    padding: 18px;
    border: 1px solid #dce6f0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(8, 38, 95, 0.07);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

/* Live feed layout: scoped to avoid changing other reporting screens. */
body.page-live-feed > .header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 140px !important;
    padding: 24px 24px 40px !important;
    margin: 0 !important;
    background: linear-gradient(115deg, #071d49, #103e76 65%, #0b728a) !important;
}

body.page-live-feed > .header::before,
body.page-live-feed > .header::after {
    content: none !important;
}

body.page-live-feed .feed-brand img {
    display: block;
    width: min(320px, 75vw);
    height: auto;
}

body.page-live-feed > form.search-form {
    position: relative;
    z-index: 90;
    width: min(calc(100% - 32px), 760px) !important;
    max-width: 760px !important;
    margin: -24px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.page-live-feed .search-form .searchField {
    position: relative;
    width: 100%;
    margin: 0;
}

body.page-live-feed .search-form #myBtn {
    display: block;
    width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 14px 70px 14px 18px !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #193b61;
    font-size: 16px;
    box-shadow: 0 10px 28px rgba(8, 38, 95, 0.12);
}

body.page-live-feed .search-form .searchField > .hamburger {
    position: absolute;
    top: 6px !important;
    right: 6px !important;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 10px !important;
    transform: none !important;
    border-radius: 10px;
    background: #edf5fa;
}

body.page-live-feed .search-form .hamburger img {
    width: 24px;
}

body.page-live-feed .search-form .searchField .menu-items {
    top: 64px !important;
    right: 0 !important;
    left: auto !important;
    max-width: 100%;
}

body.page-live-feed > .home {
    margin: 28px auto 0 !important;
}

body.page-live-feed .feed-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    width: min(calc(100% - 32px), 1180px);
    margin: 32px auto 20px;
    text-align: left;
}

body.page-live-feed .feed-heading h1 {
    margin: 6px 0;
    color: #102f5b;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.2;
    text-align: left;
}

body.page-live-feed .feed-heading p {
    margin: 0;
    color: #526a84;
    font-size: 14px;
    text-align: left;
}

body.page-live-feed .feed-eyebrow {
    color: #086b86;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

body.page-live-feed .feed-order {
    flex-shrink: 0;
    color: #526a84;
    font-size: 12px;
}

body.page-live-feed > main {
    align-items: stretch;
    padding-bottom: 100px !important;
    gap: 20px;
}

body.page-live-feed .feed-card {
    padding: 22px;
    align-content: start;
    text-align: left;
}

body.page-live-feed .feed-card-body :is(h3, h4, p, time) {
    text-align: left;
}

body.page-live-feed .feed-card-meta h3 {
    font-size: 16px;
    line-height: 1.4;
}

body.page-live-feed .feed-card-meta time,
body.page-live-feed .feed-location {
    font-size: 12px;
    line-height: 1.5;
    color: #526a84;
}

body.page-live-feed .feed-card-body h4 {
    font-size: 15px;
}

body.page-live-feed .feed-card-body p {
    font-size: 14px;
    line-height: 1.65;
    color: #455f7a;
}

body.page-live-feed .feed-category {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.page-live-feed .feed-status {
    font-size: 11px;
}

@media (max-width: 850px) {
    body.page-live-feed > main {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    body.page-live-feed .feed-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    body.page-live-feed .feed-card {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    body.page-live-feed .feed-card-avatar {
        width: 36px;
        height: 36px;
    }

    body.page-live-feed .feed-card-meta {
        flex-wrap: wrap;
    }
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 34px rgba(8, 38, 95, 0.11);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-avatar {
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 16px;
    background: #e8eff6;
    box-shadow: 0 0 0 4px #edf4f8;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-body {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-meta h3 {
    margin: 0 0 3px;
    color: #092f6d;
    font-size: 0.88rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-meta time {
    color: #8090a4;
    font-size: 0.62rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    color: #157453;
    border-radius: 999px;
    background: #e6f7f0;
    font-size: 0.58rem;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-category {
    display: inline-flex;
    margin-top: 10px;
    padding: 4px 8px;
    color: #0b6d8d;
    border-radius: 7px;
    background: #e9f7fa;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-body h4 {
    margin: 10px 0 5px;
    color: #173459;
    font-size: 0.8rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-body p {
    margin: 0;
    color: #657991;
    font-size: 0.69rem;
    line-height: 1.55;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-location {
    display: flex;
    gap: 7px;
    margin-top: 11px;
    color: #71859c;
    font-size: 0.62rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-location > span {
    color: #e74b41;
    font-size: 0.5rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-empty-state {
    grid-column: 1/-1;
    padding: 70px 24px;
    border: 1px dashed #c8d6e3;
    border-radius: 18px;
    background: #fff;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-empty-state > span {
    color: #1aa8c2;
    font-size: 2rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-empty-state h3 {
    margin: 10px 0 5px;
    color: #113c77;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-empty-state p {
    margin: 0;
    color: #71849b;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate main > .table-container {
    width: min(calc(100% - 32px), 1180px) !important;
    margin: 0 auto 40px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate #Submitted_by {
    display: block;
    margin-bottom: 13px;
    color: #647990;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate .submitter_list {
    gap: 14px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate #submitter {
    overflow: hidden;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(8, 38, 95, 0.06);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate .location {
    min-height: 54px;
    padding: 15px 18px !important;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate .digidocs_list {
    align-content: start;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate .actions {
    margin-top: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-support .support-main {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
    gap: 18px;
    width: min(calc(100% - 32px), 1180px) !important;
    max-width: 1180px !important;
    min-height: 0 !important;
    margin: 34px auto !important;
    padding: 0 0 40px !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-card,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-card {
    overflow: hidden;
    border: 1px solid #dce6f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(8, 38, 95, 0.09);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-card {
    padding: clamp(24px, 4vw, 38px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-logo {
    display: block;
    width: min(100%, 310px) !important;
    height: auto;
    max-height: 80px;
    margin: 0 0 28px;
    object-fit: contain;
    object-position: left center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-eyebrow {
    display: block;
    color: #1090ad;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-intro h1 {
    margin: 8px 0 10px;
    color: #092f6d;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -0.045em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-intro p {
    margin: 0;
    color: #657a91;
    font-size: 0.76rem;
    line-height: 1.7;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list {
    display: grid;
    gap: 9px;
    margin-top: 25px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list > a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 12px;
    color: inherit;
    border: 1px solid #e2eaf2;
    border-radius: 12px;
    background: #f8fafc;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list > a:hover {
    transform: translateX(2px);
    border-color: #a9dae3;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #0c7fa2;
    border-radius: 10px;
    background: #e8f6f9;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-icon i {
    color: inherit;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list small {
    display: block;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list strong {
    color: #19385f;
    font-size: 0.7rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-contact-list small {
    margin-top: 3px;
    color: #71849a;
    font-size: 0.61rem;
    line-height: 1.45;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 570px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-heading h2 {
    margin: 5px 0 0;
    color: #113c77;
    font-size: 1.15rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-heading > a {
    padding: 9px 12px;
    color: #0b6596;
    border-radius: 9px;
    background: #e9f5f8;
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-card iframe {
    width: 100%;
    height: 100%;
    min-height: 490px;
    border: 0;
}

@media (max-width: 900px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .digidocs {
        grid-template-columns: repeat(3, minmax(140px, 1fr)) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > main {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-support .support-main {
        grid-template-columns: 1fr;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-card {
        min-height: 500px;
    }
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .digidocs {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding: 12px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-my-account main > .digidocs a {
        min-height: 54px;
        padding: 10px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > main,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-live-feed > .home,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-support .support-main {
        width: calc(100% - 24px) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-avatar {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .feed-card-meta {
        align-items: flex-start;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate main > .table-container {
        width: calc(100% - 24px) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-validate .submitter_list {
        grid-template-columns: 1fr !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-card {
        padding: 22px 18px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .support-map-card iframe {
        min-height: 390px;
    }
}

/* v11 compact floating bottom dock */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app {
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    width: min(calc(100% - 24px), 500px) !important;
    max-width: 500px !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid rgba(201, 216, 230, 0.92) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 16px 44px rgba(7, 31, 75, 0.2) !important;
    transform: translateX(-50%) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 252, 0.92));
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton {
    min-height: 54px;
    padding: 5px 3px !important;
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app {
        padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        width: min(calc(100% - 16px), 500px) !important;
        border-radius: 17px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton {
        min-height: 51px;
    }
}

/* v12 polished floating navigation states */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
    isolation: isolate;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    overflow: visible !important;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.97), rgba(244, 250, 253, 0.94)) !important;
    backdrop-filter: blur(22px) saturate(155%);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer::before {
    content: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 7px 3px 6px !important;
    overflow: hidden;
    color: #64758b !important;
    border: 1px solid transparent;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none;
    text-decoration: none !important;
    transform: translateY(0) !important;
    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbuttonimg {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    object-fit: contain;
    transition:
        transform 0.2s ease,
        filter 0.2s ease !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton span {
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 0.64rem !important;
    font-weight: 650;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton:focus-visible {
    color: #0b4d87 !important;
    border-color: #dfebf3;
    background: rgba(235, 247, 251, 0.82) !important;
    transform: translateY(-2px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton:focus-visible {
    outline: 3px solid rgba(25, 171, 203, 0.22) !important;
    outline-offset: 2px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton.is-active {
    color: #073d83 !important;
    border-color: #d7e7f1 !important;
    background: linear-gradient(150deg, #f6fbfd, #e7f4f9) !important;
    box-shadow:
        0 9px 22px rgba(8, 49, 103, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    transform: translateY(-5px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton.is-active:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pollwatch-app
    footer
    .fbutton.is-active:focus-visible {
    transform: translateY(-5px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton.is-active::before {
    top: 3px !important;
    left: 50%;
    width: 25px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #13bfd5, #078fbc) !important;
    box-shadow: 0 2px 7px rgba(13, 164, 196, 0.3);
    transform: translateX(-50%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton.is-active .fbuttonimg {
    filter: drop-shadow(0 4px 5px rgba(8, 55, 119, 0.14));
    transform: translateY(1px) scale(1.04);
}

@media (max-width: 380px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer {
        padding-inline: 4px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton {
        padding-inline: 2px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbutton span {
        font-size: 0.57rem !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pollwatch-app footer .fbuttonimg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* v13 responsive authentication screen */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.auth-login {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 !important;
    padding-bottom: 0 !important;
    overflow-x: hidden;
    color: #122f55;
    background:
        radial-gradient(circle at 82% 12%, rgba(35, 190, 214, 0.2), transparent 28rem),
        radial-gradient(circle at 8% 88%, rgba(32, 93, 179, 0.22), transparent 30rem),
        linear-gradient(145deg, #061a43, #0a3c82) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login > header {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 150px !important;
    padding: 24px 18px !important;
    background: rgba(4, 24, 58, 0.28) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login > header > div {
    width: min(100%, 520px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login > header img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: 112px;
    margin: 0 auto;
    object-fit: contain;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login main {
    position: relative !important;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 0 auto;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(18px, 4vw, 42px) 16px 48px !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login main > form {
    width: min(100%, 470px) !important;
    max-width: 470px !important;
    margin: 0 auto !important;
    padding: clamp(22px, 4vw, 34px) !important;
    color: #173459 !important;
    border: 1px solid rgba(213, 226, 238, 0.95) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 26px 70px rgba(2, 17, 48, 0.3) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login main > form .content {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login main > form br {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .magandang-araw {
    margin: 0 !important;
    color: #60738b !important;
    font-size: 0.72rem !important;
    line-height: 1.45;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-welcome {
    margin-bottom: 20px !important;
    color: #092f6d !important;
    font-size: clamp(1.35rem, 4vw, 1.75rem) !important;
    font-weight: 800;
    letter-spacing: -0.035em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .pin-title {
    margin: 22px 0 10px !important;
    color: #173459 !important;
    font-size: 0.76rem !important;
    font-weight: 750;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .pin-security {
    margin: 9px 0 18px !important;
    color: #71839a !important;
    font-size: 0.64rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .fields,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .keypad-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .label-fields {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    color: #173459 !important;
    border: 1px solid #ccdae7 !important;
    border-radius: 15px !important;
    background: #f7f9fc !important;
    box-shadow: inset 0 1px 2px rgba(8, 38, 95, 0.03) !important;
    font-size: 0.88rem !important;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .label-fields::placeholder {
    color: #8da0b6 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .label-fields:focus {
    border-color: #18a9c7 !important;
    outline: 3px solid rgba(24, 169, 199, 0.14) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .pin-inputs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: clamp(5px, 1.8vw, 9px) !important;
    width: 100%;
    margin: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .pin-input {
    flex: 0 1 46px !important;
    width: clamp(38px, 10vw, 46px) !important;
    height: clamp(42px, 11vw, 48px) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #092f6d !important;
    border: 1px solid #cbd9e6 !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    box-shadow: inset 0 1px 2px rgba(8, 38, 95, 0.05) !important;
    font-size: 1.1rem !important;
    line-height: 1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .pin-input:focus {
    border-color: #18a9c7 !important;
    outline: 3px solid rgba(24, 169, 199, 0.13) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .keypad-panel {
    padding: 10px !important;
    border: 1px solid #dce6ef;
    border-radius: 17px;
    background: #f6f9fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .keypad {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .key {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 10px !important;
    color: #173b70 !important;
    border: 1px solid #d6e1ec !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 3px 8px rgba(8, 38, 95, 0.05);
    font-size: 0.9rem !important;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .key:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .key:focus-visible {
    color: #075589 !important;
    border-color: #9cd9e5 !important;
    background: #eaf8fa !important;
    outline: 0;
    transform: translateY(-1px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .key:active {
    transform: scale(0.97);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #dce6ef !important;
    border-radius: 13px !important;
    background: #f6f9fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .links a {
    padding: 13px 8px !important;
    color: #0b4b87 !important;
    font-size: 0.65rem !important;
    font-weight: 750;
    text-decoration: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .links a + a {
    border-left: 1px solid #dce6ef;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .links a:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .links a:focus-visible {
    background: #e9f6f9;
    outline: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-brand-footer {
    display: grid !important;
    place-items: center;
    width: min(100%, 470px) !important;
    height: auto !important;
    min-height: 82px;
    margin: 14px auto 0 !important;
    padding: 14px 18px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px !important;
    background: rgba(4, 25, 61, 0.68) !important;
    box-shadow: 0 16px 34px rgba(2, 17, 48, 0.22) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-brand-footer br {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-brand-footer footerr {
    display: grid !important;
    place-items: center;
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-brand-footer img {
    display: block;
    width: min(100%, 310px) !important;
    height: auto !important;
    max-height: 66px;
    margin: 0 auto;
    object-fit: contain;
}

@media (max-width: 520px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login > header {
        min-height: 126px !important;
        padding: 18px 20px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login > header img {
        max-height: 88px;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login main {
        padding: 14px 10px 30px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login main > form {
        padding: 22px 16px !important;
        border-radius: 21px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .keypad-panel {
        padding: 8px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .key {
        min-height: 49px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-brand-footer {
        min-height: 72px;
        margin-top: 10px !important;
        border-radius: 16px !important;
    }
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .auth-login .login-brand-footer img {
        max-height: 54px;
    }
}

/* ========================================================================== 
   LOGIN-MODERN.CSS
   ========================================================================== */

@font-face {
    font-family: CenturyGothic;
    src: url("Century Gothic.ttf") format("truetype");
    font-display: swap;
}

*:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) * {
    box-sizing: border-box;
}

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    min-height: 100%;
    background: #071d49;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    min-height: 100vh;
    margin: 0;
    padding: clamp(20px, 4vw, 48px);
    color: #152844;
    background:
        radial-gradient(circle at 12% 8%, rgba(37, 190, 210, 0.2), transparent 27%),
        linear-gradient(135deg, #061a40, #0a3470 48%, #0d6d8c);
    font-family: CenturyGothic, "Segoe UI", sans-serif;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) button,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) input {
    font: inherit;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(390px, 1.08fr);
    width: min(100%, 940px);
    min-height: 620px;
    margin: auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 11, 37, 0.35);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(155deg, #061a42, #0a438f);
    isolation: isolate;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-brand:after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -120px;
    z-index: -1;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(255, 255, 255, 0.035),
        0 0 0 90px rgba(255, 255, 255, 0.02);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-logo {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-logo img,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .mobile-logo img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
    object-position: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-copy > span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card header > span {
    display: block;
    margin-bottom: 14px;
    color: #78dbe8;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-copy p {
    margin: 18px 0 0;
    color: #bacce3;
    font-size: 0.76rem;
    line-height: 1.75;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-trust > b {
    display: grid;
    flex: 0 0 36px;
    height: 36px;
    place-items: center;
    color: #062757;
    border-radius: 10px;
    background: #6ed7e4;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-trust strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-trust small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-trust strong {
    margin-bottom: 4px;
    font-size: 0.67rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .brand-trust small {
    color: #aebfd6;
    font-size: 0.55rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 58px);
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .mobile-logo {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card header > span {
    margin-bottom: 8px;
    color: #0a6591;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card h2 {
    margin: 0;
    font-size: 1.65rem;
    letter-spacing: -0.04em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card header p {
    margin: 9px 0 0;
    color: #6f8096;
    font-size: 0.69rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-alert {
    display: grid;
    grid-template-columns: 28px 1fr 24px;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    padding: 10px 12px;
    color: #9f2936;
    border: 1px solid #f0cbd0;
    border-radius: 11px;
    background: #fff5f6;
    font-size: 0.63rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-alert > b {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #d84958;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-alert p {
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-alert button {
    padding: 0;
    color: #a46a71;
    border: 0;
    background: transparent;
    font-size: 1.2rem;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-form {
    display: grid;
    gap: 19px;
    margin-top: 25px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contact-field > span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-group legend {
    display: block;
    margin-bottom: 8px;
    color: #334c6b;
    font-size: 0.64rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contact-field > div {
    display: flex;
    align-items: center;
    height: 48px;
    overflow: hidden;
    border: 1px solid #ccd9e6;
    border-radius: 11px;
    background: #f8fafc;
    transition: 0.18s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contact-field > div:focus-within {
    border-color: #25a8bd;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 190, 210, 0.12);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contact-field b {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #54708f;
    border-right: 1px solid #dce5ee;
    background: #f0f4f8;
    font-size: 0.7rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contact-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 13px;
    color: #152844;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.74rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .contact-field small {
    display: block;
    margin-top: 7px;
    color: #8a98a9;
    font-size: 0.55rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots span {
    display: grid;
    height: 46px;
    place-items: center;
    border: 1px solid #ccd9e6;
    border-radius: 10px;
    background: #f8fafc;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots span:after {
    content: "";
    width: 9px;
    height: 9px;
    border: 1.5px solid #a8b5c5;
    border-radius: 50%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots .filled {
    border-color: #63cbd9;
    background: #eefafd;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots .filled:after {
    border-color: #0c7092;
    background: #0c7092;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: #8998aa;
    font-size: 0.55rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-meta button {
    padding: 0;
    color: #0a6591;
    border: 0;
    background: transparent;
    font-size: 0.57rem;
    font-weight: 700;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-meta button:disabled {
    color: #aab4c1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad button {
    min-height: 40px;
    color: #16375e;
    border: 1px solid #d9e3ed;
    border-radius: 9px;
    background: #f8fafc;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad button:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad button:focus-visible {
    border-color: #a9dbe3;
    outline: 0;
    background: #eef8fa;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad button:active {
    transform: scale(0.96);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .keypad button:disabled {
    color: #b8c1cc;
    cursor: default;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 18px;
    color: #fff;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(100deg, #0b438f, #0b789e);
    box-shadow: 0 9px 20px rgba(11, 67, 143, 0.2);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-submit:disabled {
    opacity: 0.42;
    box-shadow: none;
    cursor: not-allowed;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 23px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-links a {
    color: #486583;
    font-size: 0.6rem;
    font-weight: 700;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-links a:hover {
    color: #0a6591;
    text-decoration: underline;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-links i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #b8c3cf;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > footer {
    display: flex;
    justify-content: space-between;
    width: min(100%, 940px);
    margin: 18px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.53rem;
}

@media (max-width: 760px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        display: grid;
        padding: 18px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-shell {
        grid-template-columns: 1fr;
        width: min(100%, 480px);
        min-height: 0;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-brand {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card {
        padding: 32px 26px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .mobile-logo {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 30px;
        color: #12315a;
        font-size: 0.77rem;
        font-weight: 700;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .mobile-logo img {
        width: min(260px, 100%);
        height: auto;
        border-radius: 0;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > footer {
        display: none;
    }
}

@media (max-width: 390px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        padding: 10px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .login-card {
        padding: 27px 20px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots {
        gap: 6px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pin-dots span {
        height: 42px;
    }
}

/* Keep the standalone sign-in screen independent of legacy page defaults. */
body.login-page {
    display: block;
    min-height: 100vh;
    padding: clamp(16px, 4vw, 48px) !important;
    background: linear-gradient(135deg, #071d49, #103e76 65%, #0b728a) !important;
    font-family: "Segoe UI", sans-serif;
}

body.login-page main.login-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
    justify-content: stretch;
    width: 100% !important;
    max-width: 1000px !important;
    min-height: 0;
    margin: 0 auto;
    padding: 0 !important;
}

body.login-page .login-brand,
body.login-page .login-card {
    min-width: 0;
    width: auto;
    margin: 0;
    text-align: left;
}

body.login-page .login-brand {
    padding: 40px;
    gap: 40px;
}

body.login-page .brand-logo img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

body.login-page .brand-copy h1 {
    color: #fff;
    font-size: clamp(32px, 3.5vw, 46px);
    line-height: 1.12;
    text-align: left;
}

body.login-page .brand-copy p {
    color: #dceaff;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}

body.login-page .brand-trust strong {
    color: #fff;
    font-size: 14px;
}

body.login-page .brand-trust small {
    color: #dceaff;
    font-size: 12px;
    line-height: 1.5;
}

body.login-page .login-card {
    padding: 36px 44px;
}

body.login-page .login-card header {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: none;
    text-align: left;
}

body.login-page .login-card header h2 {
    margin: 10px 0;
    color: #102e54;
    font-size: 28px;
    line-height: 1.2;
    text-align: left;
}

body.login-page .login-card header p {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

body.login-page #loginForm {
    width: 100%;
    max-width: none;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

body.login-page .contact-field > span,
body.login-page .pin-group legend {
    font-size: 13px;
    text-align: left;
}

body.login-page .contact-field > div {
    height: 50px;
}

body.login-page #loginContact {
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px;
}

body.login-page .contact-field b {
    font-size: 14px;
}

body.login-page .contact-field small,
body.login-page .pin-meta,
body.login-page .pin-meta button {
    font-size: 12px;
    line-height: 1.5;
}

body.login-page .pin-meta button {
    min-height: 28px;
}

body.login-page .keypad button {
    min-height: 44px;
    font-size: 16px;
}

body.login-page .login-submit {
    min-height: 50px;
    font-size: 15px;
}

body.login-page .login-links {
    flex-wrap: wrap;
}

body.login-page .login-links a {
    font-size: 12px;
}

body.login-page > footer {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    width: 100%;
    max-width: 1000px;
    min-height: 0 !important;
    height: auto;
    padding: 0 !important;
    margin: 20px auto 0;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    color: #dceaff;
    font-size: 12px;
}

@media (max-width: 760px) {
    body.login-page main.login-shell {
        grid-template-columns: minmax(0, 1fr);
        max-width: 480px !important;
    }

    body.login-page .login-card {
        padding: 28px 24px;
    }

    body.login-page > footer {
        max-width: 480px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 390px) {
    body.login-page .login-card {
        padding: 24px 18px;
    }

    body.login-page .login-card header h2 {
        font-size: 24px;
    }
}

/* ========================================================================== 
   REGISTER-CHOICE.CSS
   ========================================================================== */

@font-face {
    font-family: CenturyGothic;
    src: url("Century Gothic.ttf") format("truetype");
    font-display: swap;
}

*:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) * {
    box-sizing: border-box;
}

html:where(:not([data-pw-admin]), [data-pw-admin~="portal"]) {
    min-height: 100%;
    background: #071d49;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
    min-height: 100vh;
    margin: 0;
    padding: 0 clamp(24px, 5vw, 72px);
    color: #152844;
    background:
        radial-gradient(circle at 10% 10%, rgba(37, 190, 210, 0.18), transparent 28%),
        linear-gradient(135deg, #061a40, #0a3470 52%, #0d6d8c);
    font-family: CenturyGothic, "Segoe UI", sans-serif;
}

/* Standalone registration page: keep legacy body/main/header rules out of its layout. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-choice-page {
    display: block;
    min-height: 100vh;
    padding: 0 clamp(16px, 4vw, 56px) 24px !important;
    color: #152844;
    background:
        radial-gradient(circle at 10% 10%, rgba(37, 190, 210, 0.16), transparent 32%),
        linear-gradient(135deg, #061a40, #0a3470 60%, #0d617b) !important;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: min(100%, 1120px);
    height: auto !important;
    min-height: 108px !important;
    margin: auto;
    padding: 24px 0;
    gap: 20px;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .site-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .site-brand img {
    display: block;
    width: min(260px, 50vw);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left;
    border-radius: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .signin-link {
    padding: 10px 14px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: 0.18s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .signin-link span {
    color: #a9bed8;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .signin-link:hover {
    background: rgba(255, 255, 255, 0.12);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .registration-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: stretch;
    justify-content: stretch;
    width: min(100%, 1120px);
    max-width: 1120px;
    min-height: 560px;
    margin: 8px auto 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 11, 37, 0.34);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(32px, 4vw, 56px);
    overflow: hidden;
    color: #fff;
    background: linear-gradient(155deg, #061a42, #0a438f);
    isolation: isolate;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro:after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -130px;
    z-index: -1;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 48px rgba(255, 255, 255, 0.035),
        0 0 0 96px rgba(255, 255, 255, 0.022);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .eyebrow {
    margin-bottom: 16px;
    color: #78dbe8;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro h1 {
    max-width: 470px;
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-choice-page
    .registration-intro
    .eyebrow {
    font-size: 0.75rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro > p {
    max-width: 430px;
    margin: 20px 0 34px;
    color: #d3e1f2;
    font-size: 0.9375rem;
    line-height: 1.7;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 390px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note > span {
    display: grid;
    flex: 0 0 36px;
    height: 36px;
    place-items: center;
    color: #062757;
    border-radius: 10px;
    background: #6ed7e4;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note strong {
    margin-bottom: 4px;
    color: #fff;
    font-size: 0.875rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note small {
    color: #d3e1f2;
    font-size: 0.75rem;
    line-height: 1.45;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(32px, 4vw, 56px);
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .options-heading > span {
    display: block;
    margin-bottom: 8px;
    color: #0a6591;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .options-heading h2 {
    margin: 0 0 24px;
    color: #152844;
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.03em;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-option {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 15px;
    min-height: 116px;
    margin-bottom: 13px;
    padding: 16px 17px;
    color: #152844;
    border: 1px solid #d9e3ed;
    border-radius: 15px;
    background: #f9fbfd;
    text-decoration: none;
    text-align: left;
    transition:
        border-color 0.18s,
        box-shadow 0.18s,
        transform 0.18s,
        background 0.18s;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-option:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-option:focus-visible {
    border-color: #75cbd8;
    outline: 0;
    background: #f3fbfc;
    box-shadow: 0 10px 24px rgba(7, 29, 73, 0.09);
    transform: translateY(-2px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    color: #fff;
    border-radius: 13px;
    background: linear-gradient(135deg, #0b438f, #0b87a4);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 8px 17px rgba(11, 67, 143, 0.18);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-icon--organization {
    color: #0a4a77;
    background: #dff3f7;
    box-shadow: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-copy strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-copy small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-copy strong {
    margin-bottom: 6px;
    color: #16375b;
    font-size: 1rem;
    line-height: 1.35;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-copy small {
    color: #586d85;
    font-size: 0.8125rem;
    line-height: 1.55;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-arrow {
    color: #0b6f91;
    font-size: 1.15rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .eligibility-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 11px 13px;
    color: #6a5a34;
    border: 1px solid #eddcb7;
    border-radius: 10px;
    background: #fffaf0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .eligibility-note > span {
    display: grid;
    flex: 0 0 21px;
    height: 21px;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #ca9639;
    font-size: 0.58rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .eligibility-note p {
    margin: 1px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .back-link {
    align-self: flex-start;
    margin-top: 22px;
    color: #496783;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .back-link:hover {
    color: #0a6591;
    text-decoration: underline;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page a:focus-visible {
    outline: 3px solid #36bfd6;
    outline-offset: 4px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .registration-choice-footer {
    position: static !important;
    z-index: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center !important;
    gap: 8px 24px;
    width: min(100%, 1120px);
    min-height: 0 !important;
    height: auto;
    margin: 20px auto 0;
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    color: #c5d9ed;
    background: transparent;
    box-shadow: none !important;
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > footer {
    display: flex;
    justify-content: space-between;
    width: min(100%, 1120px);
    margin: 17px auto 0;
    padding-bottom: 20px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.52rem;
}

@media (max-width: 820px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        padding: 0 18px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .site-header {
        min-height: 88px !important;
        padding: 20px 0;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .signin-link span {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .registration-shell {
        grid-template-columns: 1fr;
        width: min(100%, 560px);
        max-width: 640px;
        min-height: 0;
        margin-top: 8px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro {
        padding: 34px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro h1 {
        font-size: 2rem;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro > p {
        margin-bottom: 0;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .security-note {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-options {
        padding: 34px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-option {
        min-height: 96px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body > footer {
        display: none;
    }
}

@media (max-width: 480px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body {
        padding: 0 10px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-choice-page {
        padding: 0 12px 20px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .site-header {
        gap: 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .site-brand img {
        width: 190px;
        max-width: 100%;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-options {
        padding: 27px 21px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-option {
        grid-template-columns: 40px minmax(0, 1fr) 16px;
        gap: 11px;
        padding: 14px 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .option-icon {
        width: 40px;
        height: 40px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-intro h1 {
        font-size: 1.75rem;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-choice-page .options-heading h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   PRECINCT FINDER
   Page-scoped layout prevents legacy form/header styles affecting this screen.
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app.precinct-page {
    margin: 0 !important;
    background: #f3f7fb !important;
    color: #193450;
    font-family: "Segoe UI", Arial, sans-serif;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 24px !important;
    overflow: visible !important;
    background:
        radial-gradient(circle at 85% 15%, rgba(37, 190, 210, 0.2), transparent 36%),
        linear-gradient(115deg, #061a40, #0a3470 62%, #0d627f) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header::before {
    content: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 0;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-brand {
    flex: 0 1 260px;
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-brand img {
    display: block;
    width: 260px !important;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account {
    flex: 0 1 auto;
    gap: 18px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__photo,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__initial {
    display: grid;
    place-items: center;
    width: 42px !important;
    min-width: 42px;
    height: 42px !important;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: #72d8e5;
    color: #0a3470;
    object-fit: cover !important;
    font-size: 16px;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__copy {
    min-width: 0;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__copy strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__copy small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__copy strong {
    max-width: 180px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__copy small {
    margin-top: 3px;
    color: #b5c9e0;
    font-size: 11px;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__qr {
    width: 46px !important;
    min-width: 46px;
    height: 46px !important;
    padding: 4px;
    border-radius: 6px;
    background: #fff;
    object-fit: contain !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__intro {
    display: grid;
    gap: 9px;
    padding: 26px 0 28px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-eyebrow {
    color: #78dce8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__intro h1 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__intro p {
    margin: 0;
    color: #bbcee4;
    font-size: 14px;
    line-height: 1.6;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__search {
    position: relative;
    z-index: 100;
    width: min(100%, 760px);
    min-width: 0;
    margin: 0 auto -26px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__search .search-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__search .searchField {
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app.precinct-page
    .precinct-header__search
    .search-form
    .searchField
    > input.inputsearch {
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 62px 12px 18px !important;
    border-radius: 13px !important;
    background: #fff !important;
    font-size: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .precinct-page
    .precinct-header__search
    .searchField
    > .hamburger {
    top: 26px !important;
    right: 6px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    background: #eef5f8 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .precinct-page
    .precinct-header__search
    .hamburger
    img {
    width: 24px !important;
    height: 24px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__search .menu-items {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(340px, 100%) !important;
    max-height: clamp(120px, calc(100dvh - 370px), 460px);
    overflow-y: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page main.precinct-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    width: min(calc(100% - 48px), 1180px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 58px 0 24px !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel {
    min-width: 0;
    padding: 28px;
    border: 1px solid #dbe5ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(8, 38, 80, 0.045);
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-icon {
    display: grid;
    flex: 0 0 48px;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #cfe4ec;
    border-radius: 14px;
    background: #edf7fa;
    color: #087b98;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-icon svg,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-submit svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel h2 {
    margin: 0;
    color: #173654;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel__heading p {
    margin: 6px 0 0;
    color: #647b92;
    font-size: 14px;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page form.precinct-finder-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-field {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #294562;
    font-size: 13px;
    font-weight: 600;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-field label > span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #edf2f7;
    color: #617e9a;
    font-size: 11px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.precinct-page
    .precinct-field
    select:not(.select2-hidden-accessible),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.precinct-page
    .precinct-field
    .select2-selection--single {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cbd9e7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    font:
        14px "Segoe UI",
        Arial,
        sans-serif;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.precinct-page
    .precinct-field
    select:not(.select2-hidden-accessible) {
    padding: 0 12px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-field > .select2-container {
    width: 100% !important;
    max-width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.precinct-page
    .precinct-field
    .select2-selection__rendered {
    margin: 0;
    padding: 0 36px 0 14px !important;
    color: #23405d !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 48px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .precinct-page
    .precinct-field
    .select2-selection__arrow {
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.precinct-page
    .precinct-field
    .select2-container--disabled
    .select2-selection {
    background: #f3f6f9 !important;
    cursor: not-allowed;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .precinct-page
    .precinct-field
    .select2-container--disabled
    .select2-selection__rendered {
    color: #7b8fa1 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.precinct-page
    .precinct-field
    select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .select2-dropdown {
    border-color: #cbd9e7;
    color: #23405d;
    font-size: 14px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .select2-results__option {
    padding: 10px 12px;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-search-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #e7edf3;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page #precinctFilterStatus {
    max-width: 480px;
    margin: 0;
    color: #6a8096;
    font-size: 13px;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .precinct-page
    .precinct-search-actions
    .precinct-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    width: auto;
    flex: 0 0 auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-buttons .precinct-submit,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-buttons .precinct-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    margin: 0;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-buttons .precinct-submit {
    color: #fff;
    background: linear-gradient(100deg, #0b438f, #087b98);
    box-shadow: 0 4px 12px rgba(8, 67, 120, 0.16);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-submit svg {
    width: 18px;
    height: 18px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-buttons .precinct-reset {
    color: #47617b;
    border-color: #dbe4ed;
    background: #fff;
    box-shadow: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-buttons a:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-buttons button:hover {
    filter: brightness(0.95);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-buttons a:focus-visible,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-buttons button:focus-visible {
    outline: 3px solid #55bacd;
    outline-offset: 3px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page #results.precinct-results {
    width: 100%;
    max-height: none;
    overflow: visible;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-results__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7edf3;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-result-count {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 8px;
    background: #edf6fa;
    color: #0b6987;
    font-size: 12px;
    font-weight: 600;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 32px 12px 16px;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-empty h3 {
    margin: 4px 0 0;
    color: #294562;
    font-size: 17px;
    font-weight: 600;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-empty p {
    max-width: 520px;
    margin: 0;
    color: #6a8096;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-empty--error h3 {
    color: #ae3545;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-location-summary {
    margin: 18px 0;
    color: #617b94;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-table-scroll {
    max-height: 520px;
    overflow: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-table th {
    padding: 15px 18px !important;
    color: #35536f !important;
    background: #eef4f8 !important;
    font-size: 12px;
    font-weight: 650;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page .precinct-table td {
    padding: 16px 18px !important;
    color: #23405d;
    font-size: 14px;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .precinct-page
    .precinct-table
    tbody
    tr:nth-child(even) {
    background: #f8fbfd;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-table td:last-child,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-table th:last-child {
    text-align: right;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-results__note {
    margin: 15px 0 0;
    color: #71869a;
    font-size: 12px;
    line-height: 1.6;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-results__note span {
    display: none;
}

@media (max-width: 800px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-search-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .precinct-page
        .precinct-search-actions
        .precinct-buttons {
        width: 100%;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-results__note span {
        display: block;
    }
}

@media (max-width: 540px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header {
        padding-inline: 16px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__top {
        flex-wrap: wrap;
        gap: 16px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-brand {
        flex-basis: 210px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account {
        width: 100%;
        justify-content: space-between;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__photo,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__initial {
        width: 34px !important;
        min-width: 34px;
        height: 34px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-account__qr {
        width: 38px !important;
        min-width: 38px;
        height: 38px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-header__intro {
        padding-block: 22px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .precinct-page
        .precinct-header__search
        .menu-items {
        max-height: max(120px, calc(100dvh - 440px));
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.precinct-page main.precinct-main {
        width: calc(100% - 24px) !important;
        gap: 18px;
        padding-top: 48px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel {
        padding: 22px 18px;
        border-radius: 16px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel__heading {
        align-items: flex-start;
        gap: 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .precinct-page
        .precinct-panel__heading
        .precinct-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-panel h2 {
        font-size: 19px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.precinct-page
        .precinct-field
        .select2-selection__rendered,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.precinct-page
        .precinct-field
        select:not(.select2-hidden-accessible) {
        font-size: 16px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .precinct-page
        .precinct-search-actions
        .precinct-buttons {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .precinct-page .precinct-empty {
        padding-inline: 0;
    }
}

/* ========================================================================== 
   REGISTRATION-FORMS-MODERN.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page.pollwatch-app {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 clamp(16px, 4vw, 56px) 40px !important;
    color: #193450;
    background:
        radial-gradient(circle at 12% 8%, rgba(37, 190, 210, 0.15), transparent 32%),
        linear-gradient(135deg, #061a40, #0a3470 62%, #0d627f) !important;
    box-shadow: none !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .registration-site-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(100%, 1180px) !important;
    height: 88px !important;
    min-height: 88px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-site-header::before {
    content: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-brand {
    display: block;
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-site-header
    .registration-brand
    img {
    display: block;
    width: min(260px, 52vw) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left;
    border-radius: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-signin {
    flex: 0 0 auto;
    padding: 10px 14px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-signin span {
    margin-right: 5px;
    color: #c2d4e8;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-signin:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* One frame, with a full-height blue panel and an unframed white form. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page main.registration-layout {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.3fr);
    align-items: stretch;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    min-height: 0;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    overflow: clip;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(0, 11, 37, 0.26);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-intro-panel {
    position: relative;
    align-self: stretch;
    min-width: 0;
    overflow: clip;
    color: #fff;
    background: linear-gradient(155deg, #08224d, #104b8a);
    isolation: isolate;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-intro-panel::after {
    content: "";
    position: absolute;
    right: -140px;
    bottom: 40px;
    z-index: -1;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow:
        0 0 0 44px rgba(255, 255, 255, 0.035),
        0 0 0 88px rgba(255, 255, 255, 0.02);
    pointer-events: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-intro-content {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 40px;
    padding: clamp(28px, 3.3vw, 44px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-back {
    justify-self: start;
    color: #c6d8eb;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-back:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-back:focus-visible {
    color: #fff;
    text-decoration: underline;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-eyebrow {
    text-align: left;
    display: block;
    margin-bottom: 14px;
    color: #80dce9;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-intro-copy h1 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(30px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.035em;
    text-align: left;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-intro-copy p {
    margin: 18px 0 0;
    color: #c2d5e9;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps li > span {
    display: grid;
    flex: 0 0 34px;
    height: 34px;
    place-items: center;
    color: #d6e7f5;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps small {
    display: block;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps strong {
    margin-bottom: 3px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps small {
    color: #c2d5e9;
    font-size: 12px;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-steps
    .is-current
    > span {
    color: #073261;
    border-color: transparent;
    background: #79dce9;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-requirement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-requirement
    > span {
    display: grid;
    flex: 0 0 26px;
    height: 26px;
    place-items: center;
    color: #073261;
    border-radius: 50%;
    background: #79dce9;
    font-size: 14px;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-requirement p {
    margin: 0;
    color: #c2d5e9;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-requirement
    strong {
    display: block;
    margin-bottom: 4px;
    color: #fff !important;
    font-size: 13px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-layout
    > .registration-container {
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .registration-modern-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(28px, 3.4vw, 44px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-form-heading {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e2eaf2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-form-heading
    > span {
    display: block;
    margin-bottom: 10px;
    color: #08718f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-form-heading h2 {
    margin: 0;
    color: #153451 !important;
    font-size: clamp(25px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-form-heading p {
    margin: 10px 0 0;
    color: #627991;
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-form-section
    + .registration-form-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e2eaf2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-form-section h3 {
    margin: 0 0 18px;
    color: #193a5e;
    font-size: 17px;
    font-weight: 650;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-field-grid,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-name-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-field {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-field--wide {
    grid-column: 1 / -1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-field > label {
    display: block;
    margin: 0 0 8px;
    color: #344f6c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-field
    > label
    span {
    color: #6d8095;
    font-size: 12px;
    font-weight: 400;
}

/* Scoped strongly enough to override legacy multi-attribute input styles. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page.pollwatch-app
    .registration-layout
    .registration-modern-form
    .registration-field
    > input:not([type="hidden"]),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    .registration-field
    > select:not(.select2-hidden-accessible),
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    .registration-field
    .select2-selection {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    color: #1d3957 !important;
    border: 1px solid #c9d7e5 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(8, 38, 95, 0.03);
    font-family: inherit;
    font-size: 15px !important;
    line-height: 24px;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-field
    > .select2-container {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
}

/* Keep Select2's native control hidden without changing the visible widget. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* Center the text independently of Select2's legacy height and line-height rules. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    .registration-field
    .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px !important;
    padding: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    .select2-selection__rendered {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 36px 0 13px !important;
    color: #1d3957 !important;
    background: transparent;
    font-size: 15px !important;
    line-height: 24px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .select2-selection__arrow {
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    .select2-selection__placeholder {
    color: #788da3;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-field > small {
    display: block;
    margin-top: 8px;
    color: #647b92;
    font-size: 12px;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-field
    > .registration-field-error {
    color: #b52e43;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-field
    input:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-field
    select:focus,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-field
    .select2-container--focus
    .select2-selection {
    outline: 3px solid rgba(28, 163, 189, 0.15) !important;
    outline-offset: 1px;
    border-color: #1196b2 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page.pollwatch-app
    .registration-layout
    .registration-modern-form
    .registration-field
    > input[type="file"] {
    height: auto !important;
    padding: 8px !important;
    font-size: 12px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-field
    input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 8px 10px;
    color: #135a7b;
    border: 0;
    border-radius: 6px;
    background: #e8f3f8;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-form-actions {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-consent
    input {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    accent-color: #0a718e;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-consent label {
    margin: 0;
    color: #486079;
    font-size: 13px;
    line-height: 1.6;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page #consentLink {
    display: inline-block;
    max-width: 100%;
    color: #0a628d !important;
    font-weight: 600;
    text-decoration: underline;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.registration-form-page
    .registration-modern-form
    input[type="submit"] {
    width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 12px 18px !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(100deg, #0b438f, #0b789e) !important;
    box-shadow: 0 6px 16px rgba(11, 67, 143, 0.18);
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .registration-form-page
    .registration-modern-form
    input[type="submit"]:hover {
    filter: brightness(1.06);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .modal {
    z-index: 2000;
    padding: 28px 16px;
    background: rgba(3, 17, 43, 0.72);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .modal-content {
    width: min(100%, 720px);
    max-width: 720px;
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid #dce5ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 12, 36, 0.28);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .modal-content h2,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .modal-content h3,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .modal-content h4,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .modal-content strong {
    color: #173b68 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .bg-notif {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: grid;
    place-items: start center;
    padding-top: 24px;
    pointer-events: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page .receiver {
    position: relative;
    max-width: min(90vw, 460px);
    padding: 13px 40px 13px 16px;
    color: #fff;
    border-radius: 10px;
    background: #b73343;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    font-size: 13px;
    pointer-events: auto;
}

@media (max-width: 960px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page.pollwatch-app {
        padding-inline: 18px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.registration-form-page
        main.registration-layout {
        grid-template-columns: minmax(0, 1fr);
        width: min(100%, 720px) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.registration-form-page
        .registration-site-header {
        width: min(100%, 720px) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .registration-form-page
        .registration-intro-content {
        position: static;
        gap: 24px;
        padding: 32px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .registration-form-page
        .registration-intro-copy
        h1 {
        max-width: 22ch;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-steps {
        display: none;
    }
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.registration-form-page.pollwatch-app {
        padding: 0 12px 24px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.registration-form-page
        .registration-site-header {
        gap: 12px;
        min-height: 76px !important;
        height: 76px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-signin span {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-signin {
        padding: 9px 12px;
        font-size: 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .registration-form-page
        .registration-intro-content {
        padding: 26px 24px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .registration-form-page
        .registration-intro-copy
        h1 {
        font-size: 28px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.registration-form-page
        .registration-modern-form {
        padding: 28px 22px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-field-grid,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .registration-form-page .registration-name-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.registration-form-page
        .registration-modern-form
        .registration-field
        input,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        body.registration-form-page
        .registration-modern-form
        .select2-selection__rendered {
        font-size: 16px !important;
    }
}

/* ========================================================================== 
   MY-ACCOUNT-MODERN.CSS
   ========================================================================== */

/* Account components are isolated from legacy .userimages/.userdetails grids. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.account-page {
    display: block;
    width: 100%;
    color: #17324f;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page > .account-header {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 24px max(20px, env(safe-area-inset-right)) 52px max(20px, env(safe-area-inset-left));
    background: linear-gradient(115deg, #071d49, #103e78 68%, #12627a) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page > .account-header::before {
    content: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(100%, 1100px);
    margin: 0 auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-header__brand {
    display: block;
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-header__brand img {
    display: block;
    width: min(280px, 58vw) !important;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-header__label {
    color: #c9e4ee;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page main.account-main {
    display: block;
    width: 100% !important;
    max-width: none;
    min-height: 0;
    padding: 0 clamp(12px, 3vw, 40px) 24px;
    background: #f3f7fb;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-search {
    position: relative;
    z-index: 125;
    width: min(100%, 760px);
    margin: -26px auto 28px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-search .search-form {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-search .searchField {
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-search .inputsearch {
    display: block;
    max-width: none;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 64px 12px 16px !important;
    font-size: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-search .hamburger {
    top: 26px !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-search .hamburger img {
    width: 25px;
    height: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-card {
    --account-padding: clamp(20px, 4vw, 40px);
    width: min(100%, 1100px);
    margin: 0 auto;
    padding: var(--account-padding);
    border: 1px solid #dce6f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 45px rgba(8, 38, 95, 0.08);
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-heading h1 {
    margin: 0;
    color: #0d3067;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.035em;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-heading p {
    margin: 10px 0 28px;
    color: #64788e;
    font-size: 14px;
    line-height: 1.6;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 44px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-profile {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 18px;
    min-width: 0;
    padding: 24px 20px;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(155deg, #0b2b63, #11538c);
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-profile form {
    display: grid;
    justify-items: center;
    gap: 10px;
    height: auto;
    min-height: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-avatar {
    display: block;
    width: 100px;
    height: 100px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 3px solid #fff;
    border-radius: 50% !important;
    background: #e6eff8;
    box-shadow: none;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-avatar:focus-visible {
    outline: 3px solid #67d6e5;
    outline-offset: 4px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-photo-hint {
    color: #c0d5ec;
    font-size: 11px;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-role {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-qr {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-qr img {
    display: block;
    width: 116px;
    height: 116px;
    object-fit: contain;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-qr figcaption {
    color: #47617a;
    font-size: 11px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-details {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-name {
    margin: 0;
    color: #173765;
    font-size: clamp(21px, 2.3vw, 26px);
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-contact {
    margin: 6px 0 20px;
    color: #b32e3b;
    font-size: 14px;
    font-weight: 600;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-facts {
    margin: 0 0 28px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-facts > div {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e6edf4;
    font-size: 14px;
    line-height: 1.5;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-facts dt {
    color: #687e94;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-facts dd {
    margin: 0;
    color: #203d60;
    font-weight: 600;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page form.account-pin-form {
    display: block;
    height: auto;
    min-height: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-pin-form h3 {
    margin: 0;
    color: #173765;
    font-size: 18px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-pin-form > p {
    margin: 6px 0 20px;
    color: #687e94;
    font-size: 13px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-pin-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-pin-fields label {
    font-size: 13px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-pin-fields input {
    font-size: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-pin-submit {
    width: auto;
    margin: 6px 0 0;
    font-size: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .receiver {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1500;
    max-width: calc(100vw - 32px);
    padding: 20px 42px 20px 20px;
    color: #fff;
    border-radius: 12px;
    background: #1448bd;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .receiver .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents {
    margin: 32px calc(-1 * var(--account-padding)) calc(-1 * var(--account-padding));
    padding: 28px var(--account-padding) 32px;
    border-top: 1px solid #dce5ef;
    border-radius: 0 0 22px 22px;
    background: linear-gradient(145deg, #f8fbfd, #f1f7fa);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents-heading > div > span {
    display: block;
    margin-bottom: 7px;
    color: #0a6c90;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents-heading h2 {
    margin: 0;
    color: #15365f !important;
    font-size: 23px;
    letter-spacing: -0.035em;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents-heading p {
    margin: 7px 0 0;
    color: #718297;
    font-size: 13px;
    line-height: 1.55;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #476781;
    border: 1px solid #d6e4ec;
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 84px;
    padding: 13px;
    color: #18385f !important;
    border: 1px solid #d8e4ed;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 5px 14px rgba(7, 29, 73, 0.04);
    text-decoration: none !important;
    transform: translateY(0);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-card:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-card:focus-visible {
    color: #0a537e !important;
    border-color: #87ccd8;
    outline: 0;
    background: #fff;
    box-shadow: 0 10px 23px rgba(7, 49, 89, 0.09);
    transform: translateY(-2px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #fff;
    border-radius: 11px;
    background: linear-gradient(135deg, #0b438f, #0b80a0);
    box-shadow: 0 7px 15px rgba(11, 67, 143, 0.17);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-icon--id {
    color: #0a5279;
    background: #dff3f7;
    box-shadow: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-icon--return {
    background: linear-gradient(135deg, #0c5a91, #18a0b7);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-icon--appointment {
    color: #7c5a18;
    background: #fff0c9;
    box-shadow: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-icon--legal {
    color: #745028;
    background: #f2e6d7;
    box-shadow: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-copy {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-copy strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-copy small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-copy strong {
    margin-bottom: 5px;
    color: #1c3e65 !important;
    font-size: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-copy small {
    color: #75869a;
    font-size: 12px;
    line-height: 1.45;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-arrow {
    color: #0b7493;
    font-size: 0.95rem;
    transition: transform 0.18s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-card:hover .document-arrow,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-card:focus-visible .document-arrow {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-header__label {
        font-size: 11px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-profile {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 12px;
        padding: 20px 14px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-profile form {
        grid-column: 1;
        grid-row: 1;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-role {
        grid-column: 1;
        grid-row: 2;
        font-size: 11px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-qr {
        grid-column: 2;
        grid-row: 1 / 3;
        max-width: 100%;
        padding: 8px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-qr img {
        width: 104px;
        height: auto;
        aspect-ratio: 1;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-pin-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-page .account-pin-submit {
        width: 100%;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents {
        margin-top: 28px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents-heading {
        align-items: flex-start;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-documents-heading p {
        max-width: 38ch;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-grid {
        grid-template-columns: 1fr;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-document-card {
        min-height: 76px;
    }
}

@media (max-width: 420px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .account-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .document-count {
        display: none;
    }
}

/* ========================================================================== 
   PW-ID-HEADER.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-site-header {
    position: relative;
    min-height: 250px !important;
    height: auto !important;
    padding: 0 clamp(24px, 5vw, 72px) 0;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(36, 190, 211, 0.25), transparent 28%),
        linear-gradient(115deg, #061a40, #0a3470 58%, #0c6686) !important;
    overflow: visible;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-site-header:after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 0;
    width: 300px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 300px 300px 0 0;
    border-bottom: 0;
    box-shadow:
        0 0 0 36px rgba(255, 255, 255, 0.025),
        0 0 0 72px rgba(255, 255, 255, 0.018);
    pointer-events: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row !important;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    height: 78px;
    margin: auto;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pw-id-page
    .id-site-header
    .id-header-brand
    > img {
    display: block;
    width: min(260px, 50vw) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left !important;
    border-radius: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-brand span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-brand strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-brand small,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-brand strong {
    font-size: 0.82rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-brand small {
    margin-top: 3px;
    color: #9fb7d5;
    font-size: 0.5rem;
    letter-spacing: 0.03em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account > span:last-child {
    text-align: right;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account small {
    margin-bottom: 3px;
    color: #9fb7d5;
    font-size: 0.49rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account strong {
    max-width: 180px;
    overflow: hidden;
    color: #fff;
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-avatar {
    display: grid !important;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #073261;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    background: #6ed7e4;
    font-size: 0.72rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-copy {
    position: relative;
    z-index: 2;
    display: block !important;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 auto;
    padding: 29px 0 49px;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-copy > span {
    display: block;
    margin-bottom: 9px;
    color: #72d8e5;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-copy h1 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing: -0.045em;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-copy p {
    margin: 8px 0 0;
    color: #abc0da;
    font-size: 0.64rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-search {
    position: absolute;
    right: auto !important;
    bottom: -27px;
    left: 50% !important;
    z-index: 100;
    display: block !important;
    width: min(calc(100% - 48px), 1180px) !important;
    max-width: 1180px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-header-search .searchField {
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-header-search .inputsearch {
    min-height: 54px;
    margin: 0 !important;
    padding: 12px 160px 12px 47px !important;
    border: 1px solid rgba(7, 35, 77, 0.12) !important;
    border-radius: 14px !important;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236a8099' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m12 12 4 4'/%3E%3C/svg%3E")
        no-repeat 17px center !important;
    box-shadow: 0 16px 38px rgba(5, 24, 60, 0.2) !important;
    color: #173352 !important;
    font-size: 0.68rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pw-id-page
    .id-header-search
    .inputsearch::placeholder {
    color: #8999aa;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .pw-id-page
    .id-header-search
    .searchField
    > .hamburger {
    top: 27px !important;
    right: 7px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    transform: translateY(-50%) !important;
    background: #eef5f8 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-header-search .hamburger img {
    width: 25px !important;
    height: auto !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page main {
    padding-top: 50px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page main > .content {
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-site-header {
        min-height: 226px !important;
        padding-inline: 18px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-top {
        height: 68px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-account > span:last-child {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-copy {
        padding: 25px 0 45px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .id-header-copy h1 {
        font-size: 1.55rem;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pw-id-page .id-site-header .id-header-search {
        right: auto !important;
        bottom: -25px;
        left: 50% !important;
        width: calc(100% - 36px) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-header-search .inputsearch {
        min-height: 50px;
        padding-right: 58px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .pw-id-page
        .id-header-search
        .searchField
        > .hamburger {
        top: 25px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page main {
        padding-top: 42px;
    }
}

@media print {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page .id-site-header {
        display: none !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .pw-id-page main {
        padding-top: 0;
    }
}

/* ========================================================================== 
   QUICK-COUNT-MODERN.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result {
    background: #f1f5f9 !important;
    color: #152844;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-count-header {
    position: relative;
    min-height: 250px !important;
    height: auto !important;
    padding: 0 clamp(24px, 5vw, 72px);
    overflow: visible;
    color: #fff;
    background:
        radial-gradient(circle at 82% 15%, rgba(36, 190, 211, 0.25), transparent 28%),
        linear-gradient(115deg, #061a40, #0a3470 58%, #0c6686) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 1180px);
    height: 78px;
    margin: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-header-brand > img {
    display: block;
    width: min(260px, 50vw) !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left !important;
    border-radius: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-brand span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-brand strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-brand small,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account small,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account strong {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-brand strong {
    font-size: 0.82rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-brand small,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account small {
    margin-top: 3px;
    color: #9fb7d5;
    font-size: 0.49rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #073261;
    border-radius: 10px;
    background: #6ed7e4;
    font-size: 0.72rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account div {
    text-align: right;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account strong {
    max-width: 180px;
    overflow: hidden;
    color: #fff;
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-copy {
    width: min(100%, 1180px);
    margin: auto;
    padding: 29px 0 49px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-copy > span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading > div > span {
    display: block;
    margin-bottom: 9px;
    color: #72d8e5;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-copy h1 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    letter-spacing: -0.045em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-copy p {
    margin: 8px 0 0;
    color: #abc0da;
    font-size: 0.63rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-search {
    position: absolute;
    right: clamp(24px, 5vw, 72px);
    bottom: -27px;
    left: clamp(24px, 5vw, 72px);
    z-index: 100;
    width: min(calc(100% - 48px), 1180px);
    margin: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-header-search .searchField {
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-header-search .inputsearch {
    min-height: 54px;
    margin: 0 !important;
    padding: 12px 65px 12px 47px !important;
    border-radius: 14px !important;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236a8099' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m12 12 4 4'/%3E%3C/svg%3E")
        no-repeat 17px center !important;
    box-shadow: 0 16px 38px rgba(5, 24, 60, 0.2) !important;
    font-size: 0.67rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .quick-header-search
    .searchField
    > .hamburger {
    top: 27px !important;
    right: 7px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    transform: translateY(-50%) !important;
    background: #eef5f8 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result main {
    padding: 53px 24px 70px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result main > .content {
    width: min(100%, 1180px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading > div > span {
    color: #0a6e91;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading h2 {
    margin: 0;
    color: #152844;
    font-size: 1.5rem;
    letter-spacing: -0.04em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading p {
    margin: 7px 0 0;
    color: #718197;
    font-size: 0.62rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-status {
    padding: 7px 11px;
    color: #82651d;
    border: 1px solid #edd9a1;
    border-radius: 999px;
    background: #fff8e5;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userdetails {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    padding: 15px 18px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(7, 29, 73, 0.05) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .profileimg {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #d7e5ed !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .profileimg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userinfo {
    width: auto !important;
    text-align: left !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userinfo .name {
    color: #18385f !important;
    font-size: 0.67rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userinfo .userposition {
    display: inline-flex;
    margin: 3px 0 5px;
    padding: 3px 7px;
    color: #0b6a8d !important;
    border-radius: 999px;
    background: #e8f6f8;
    font-size: 0.49rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .userinfo .values {
    color: #718197 !important;
    font-size: 0.54rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-count-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px !important;
    border: 1px solid #dce5ef !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 32px rgba(7, 29, 73, 0.07) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5ecf2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading > span {
    display: grid;
    flex: 0 0 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, #0b438f, #0b87a4);
    font-size: 0.62rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading strong {
    margin-bottom: 4px;
    color: #19395f;
    font-size: 0.7rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading small {
    color: #7b8b9e;
    font-size: 0.55rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .form-section-heading--results {
    margin-top: 29px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .location-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .result-field {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .result-field label {
    display: block;
    margin: 0 0 7px;
    color: #405a77;
    font-size: 0.59rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .result-field select,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .result-field .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* The native select stays accessible, but must not inherit the visible field size. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    select.select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%);
    border: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .result-field .select2-container {
    display: block;
    padding: 0;
}

/* One 48px box owns the spacing; the selected label has no second padded box. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    .select2-selection--single {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cfdae6 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    .select2-selection__rendered {
    display: block;
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0 !important;
    padding: 0 38px 0 12px !important;
    overflow: hidden;
    color: #263f5e !important;
    border: 0;
    background: transparent !important;
    font-size: 12px !important;
    line-height: 46px !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    .select2-selection__arrow {
    top: 0;
    right: 10px;
    width: 20px;
    height: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    .select2-container--focus
    .select2-selection--single,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    .select2-container--open
    .select2-selection--single {
    border-color: #0b8fa9 !important;
    box-shadow: 0 0 0 3px rgba(11, 143, 169, 0.15);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .result-field
    .select2-container--disabled
    .select2-selection--single {
    background: #edf1f5 !important;
    cursor: not-allowed;
}

/* Select2 mounts its menu under body, outside the location grid. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result > .select2-container--open {
    width: auto !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .select2-dropdown {
    overflow: hidden;
    border-color: #cfdae6;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(7, 29, 73, 0.12);
    font-size: 12px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .page-send-result
    .select2-search--dropdown
    .select2-search__field {
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) #mayor-candidate-list {
    overflow: hidden !important;
    border: 1px solid #dce5ef !important;
    border-radius: 12px !important;
    background: #fff;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
    display: grid !important;
    grid-template-columns: 64px minmax(180px, 1fr) minmax(130px, 190px) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .candidates-header {
    padding: 12px !important;
    color: #fff !important;
    background: #0a3a7b !important;
    font-size: 0.57rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .candidates {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    padding: 9px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e4ebf2 !important;
    background: #fff !important;
    font-size: 0.59rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .numvote {
    width: 100% !important;
    min-height: 36px !important;
    margin: 0 !important;
    border: 1px solid #ccd8e5 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    text-align: center !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .candidates-row {
    min-height: 48px !important;
    padding: 13px !important;
    color: #728397 !important;
    background: #f8fafc !important;
    font-size: 0.58rem !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 28px -26px -26px;
    padding: 19px 26px;
    border-top: 1px solid #dce5ef;
    border-radius: 0 0 18px 18px;
    background: #f8fafc;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-submit-bar strong,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-submit-bar small {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-submit-bar strong {
    margin-bottom: 4px;
    color: #19395f;
    font-size: 0.67rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-submit-bar small {
    color: #7b8b9e;
    font-size: 0.54rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-submit-bar .btn-submit {
    width: auto !important;
    min-width: 170px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 17px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(100deg, #0b438f, #0b789e) !important;
    font-size: 0.62rem !important;
    box-shadow: 0 8px 18px rgba(11, 67, 143, 0.18) !important;
}

@media (max-width: 820px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .location-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
        grid-template-columns: 48px minmax(140px, 1fr) 120px !important;
    }
}

@media (max-width: 600px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-count-header {
        min-height: 226px !important;
        padding-inline: 18px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-top {
        height: 68px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-account div {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-copy {
        padding: 25px 0 45px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-header-search {
        right: 18px;
        bottom: -25px;
        left: 18px;
        width: auto;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .page-send-result
        .quick-header-search
        .searchField
        > .hamburger {
        top: 25px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result main {
        padding: 44px 12px 55px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading {
        align-items: flex-start;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-page-heading p {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-count-form {
        padding: 19px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .location-grid {
        grid-template-columns: 1fr;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .voting {
        grid-template-columns: 38px minmax(125px, 1fr) 92px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .candidates-header,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .candidates {
        padding: 8px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .quick-submit-bar {
        align-items: stretch;
        flex-direction: column;
        margin: 24px -19px -19px;
        padding: 17px 19px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .page-send-result .quick-submit-bar .btn-submit {
        width: 100% !important;
    }
}

/* ========================================================================== 
   VALIDATE-MODERN.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page {
    --validation-navy: #082d68;
    --validation-blue: #0b4d91;
    --validation-cyan: #0b8fa9;
    --validation-ink: #17324f;
    --validation-muted: #667b91;
    --validation-line: #d9e5ee;
    --validation-surface: #ffffff;
    min-width: 320px;
    background: #f2f6fa;
    color: var(--validation-ink);
    font-family: Arial, Helvetica, sans-serif;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 clamp(18px, 4vw, 56px) !important;
    overflow: visible !important;
    color: #ffffff;
    background:
        radial-gradient(circle at 84% 18%, rgba(45, 195, 215, 0.24), transparent 30%),
        linear-gradient(115deg, #061a40, #0a3470 58%, #0c6686) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header::before {
    display: none;
}

/* One column prevents shared header flex rules from flattening the masthead. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .validate-page
    .validate-header
    > .validate-header__shell {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1180px);
    min-width: 0;
    margin: 0 auto;
    padding: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__top {
    position: relative;
    z-index: 2;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    height: auto;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-brand {
    display: flex;
    align-items: center;
    flex: 0 1 270px;
    min-width: 0;
    color: #ffffff !important;
    text-decoration: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-brand__mark {
    display: block;
    width: 270px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__avatar {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    color: #073261;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 11px;
    background: #6ed7e4;
    font-size: 14px;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details small,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details strong {
    display: block;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details {
    text-align: right;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details small {
    margin-bottom: 3px;
    color: #9fb7d5;
    font-size: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details strong {
    max-width: 190px;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__content {
    position: relative;
    z-index: 2;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 28px 0 30px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .validate-page
    .validate-header__content
    > .validate-eyebrow {
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #72d8e5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__content h1 {
    display: block;
    margin: 0;
    color: #ffffff !important;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.04em;
    text-align: left;
    overflow-wrap: anywhere;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__content p {
    display: block;
    max-width: 620px;
    margin: 0;
    color: #b5c8de;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__search {
    position: relative;
    inset: auto;
    z-index: 100;
    display: block !important;
    width: min(100%, 760px);
    min-width: 0;
    margin: 0 auto -27px;
    transform: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__search .search-form {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__search .searchField {
    width: 100%;
    margin: 0;
}

/* Beat the legacy multi-attribute input rule only inside this header. */
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app.validate-page
    .validate-header__search
    .search-form
    .searchField
    > input.inputsearch {
    display: block;
    width: 100% !important;
    max-width: none;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 12px 65px 12px 47px !important;
    border: 1px solid #d9e5ee !important;
    border-radius: 14px !important;
    background: #ffffff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236a8099' stroke-width='1.8'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m12 12 4 4'/%3E%3C/svg%3E")
        no-repeat 17px center !important;
    box-shadow: 0 16px 38px rgba(5, 24, 60, 0.2) !important;
    color: var(--validation-ink);
    font-size: 16px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .validate-page
    .validate-header__search
    .searchField
    > .hamburger {
    top: 27px !important;
    right: 7px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    background: #eef5f8 !important;
    transform: translateY(-50%) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__search .menu-items {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(340px, 100%) !important;
    max-height: clamp(100px, calc(100dvh - 380px), 480px);
    overflow-y: auto;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validation-main {
    display: block !important;
    width: 100% !important;
    max-width: none;
    min-height: 70vh;
    margin: 0;
    padding: 64px 24px calc(150px + env(safe-area-inset-bottom)) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: min(100%, 1180px);
    margin: 0 auto 20px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview .validate-eyebrow {
    color: #0a6e91;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview h2 {
    margin: 0;
    color: var(--validation-ink);
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.035em;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview p {
    max-width: 650px;
    margin: 8px 0 0;
    color: var(--validation-muted);
    font-size: 13px;
    line-height: 1.55;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-count {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex: 0 0 auto;
    padding: 11px 15px;
    border: 1px solid var(--validation-line);
    border-radius: 12px;
    background: var(--validation-surface);
    box-shadow: 0 5px 14px rgba(7, 29, 73, 0.05);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-count strong {
    color: var(--validation-blue);
    font-size: 21px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-count span {
    color: var(--validation-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-panel {
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--validation-line);
    border-radius: 18px;
    background: var(--validation-surface);
    box-shadow: 0 12px 32px rgba(7, 29, 73, 0.07);
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row !important;
    gap: 16px;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e4ebf2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-panel__header h3 {
    margin: 0;
    color: #264565;
    font-size: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-panel__header span {
    color: #8493a5;
    font-size: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d6e3ed;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(7, 29, 73, 0.045);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card:hover {
    border-color: #a9d6df;
    box-shadow: 0 10px 24px rgba(7, 29, 73, 0.08);
    transform: translateY(-2px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row !important;
    gap: 12px;
    width: 100%;
    height: auto !important;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    background: linear-gradient(100deg, #0a3978, #0b6592);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__header h4 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 8px;
    color: #fff3bd;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-status > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffd766;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__location {
    min-height: 72px;
    padding: 13px 14px;
    border-bottom: 1px solid #e5ecf2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__location > span,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__label,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__summary > div > span {
    display: block;
    margin-bottom: 5px;
    color: #8796a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__location p {
    margin: 0;
    color: #586f86;
    font-size: 11px;
    line-height: 1.55;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 14px;
    padding: 14px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence {
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__links {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 7px 9px;
    color: #0a5784 !important;
    border: 1px solid #d8e7ed;
    border-radius: 8px;
    background: #f3f9fa;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
        border-color 160ms ease,
        background-color 160ms ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__link:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__link:focus-visible {
    border-color: #83cbd7;
    outline: none;
    background: #eaf7f9;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__link > span {
    color: #1594aa;
    font-size: 13px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-evidence__empty {
    color: #8796a8;
    font-size: 11px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__summary {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;
    padding-left: 14px;
    border-left: 1px solid #e5ecf2;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__summary strong {
    display: block;
    color: #173d6a;
    font-size: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 39px;
    padding: 9px 11px;
    color: #ffffff !important;
    border-radius: 9px;
    background: linear-gradient(100deg, #0b438f, #0b789e);
    box-shadow: 0 7px 16px rgba(11, 67, 143, 0.16);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition:
        filter 160ms ease,
        transform 160ms ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__review:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__review:focus-visible {
    outline: none;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-empty {
    display: grid;
    min-height: 180px;
    place-content: center;
    gap: 7px;
    padding: 32px;
    color: var(--validation-muted);
    border: 1px dashed #c9d8e4;
    border-radius: 13px;
    background: #f8fbfd;
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-empty strong {
    color: var(--validation-ink);
    font-size: 15px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-empty span {
    font-size: 12px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-empty--error {
    color: #8e3434;
    border-color: #efcaca;
    background: #fff7f7;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-notice {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(calc(100% - 32px), 520px);
    padding: 13px 14px 13px 16px;
    color: #ffffff;
    border-radius: 12px;
    background: #0b6b82;
    box-shadow: 0 12px 30px rgba(5, 35, 68, 0.24);
    font-size: 12px;
    transform: translateX(-50%);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-notice > span {
    flex: 1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-notice__close {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    place-items: center;
    color: #ffffff;
    border: 0;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-notice__close:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-notice__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-grid {
        grid-template-columns: 1fr;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__location {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header {
        padding-inline: 18px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__top {
        gap: 16px;
        min-height: 72px;
        padding-block: 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-brand__mark {
        width: min(58vw, 230px) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-account__details {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__content {
        padding: 22px 0 24px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__content p {
        max-width: 100%;
        font-size: 13px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validation-main {
        padding: 54px 12px calc(130px + env(safe-area-inset-bottom)) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview p {
        display: none;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-panel {
        padding: 13px;
        border-radius: 15px;
    }
}

@media (max-width: 520px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview {
        align-items: center;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-overview h2 {
        font-size: 22px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-count {
        padding: 9px 11px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-count strong {
        font-size: 18px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__header {
        align-items: flex-start;
        flex-direction: column !important;
        gap: 7px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__header h4 {
        width: 100%;
        white-space: normal;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__content {
        grid-template-columns: 1fr;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__summary {
        align-items: center;
        flex-direction: row;
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid #e5ecf2;
        border-left: 0;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__review {
        width: auto;
        min-width: 150px;
    }
}

@media print {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validate-header__search,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-notice,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card__review {
        display: none !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validate-page .validation-main {
        padding: 24px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .validation-card {
        break-inside: avoid;
    }
}

/* ========================================================================== 
   FOOTER-MODERN.CSS
   ========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app {
    padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock {
    position: fixed !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    z-index: 1000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    width: min(calc(100% - 28px), 520px) !important;
    max-width: 520px !important;
    min-height: 66px !important;
    height: 66px !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(193, 211, 226, 0.9) !important;
    border-radius: 19px !important;
    background: rgba(250, 253, 255, 0.94) !important;
    box-shadow:
        0 16px 42px rgba(7, 29, 73, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    isolation: isolate;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 251, 0.93)) !important;
    pointer-events: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 5px 3px !important;
    overflow: hidden !important;
    color: #687b92 !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton:before {
    content: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .dock-icon {
    display: block;
    width: 21px;
    height: 21px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton span {
    display: block;
    width: 100%;
    overflow: hidden;
    color: inherit !important;
    font-size: 0.56rem !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app
    footer.app-dock
    .fbutton:focus-visible {
    color: #075083 !important;
    border-color: #d8e8ef !important;
    outline: 0 !important;
    background: #edf7f9 !important;
    transform: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app
    footer.app-dock
    .fbutton:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(18, 169, 195, 0.2) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #0a438f, #087d9e) !important;
    box-shadow: 0 6px 14px rgba(8, 69, 133, 0.2) !important;
    transform: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app
    footer.app-dock
    .fbutton.is-active:hover,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app
    footer.app-dock
    .fbutton.is-active:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #0a4b9d, #0788aa) !important;
    transform: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.pollwatch-app
    footer.app-dock
    .fbutton.is-active
    .dock-icon {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
    transform: scale(1.04);
}

@media (max-width: 430px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app {
        padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock {
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        width: calc(100% - 16px) !important;
        height: 61px !important;
        min-height: 61px !important;
        padding: 6px !important;
        border-radius: 16px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton {
        height: 47px !important;
        min-height: 47px !important;
        gap: 3px !important;
        padding-inline: 2px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .dock-icon {
        width: 20px;
        height: 20px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock .fbutton span {
        font-size: 0.51rem !important;
    }
}

@media print {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app footer.app-dock {
        display: none !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.pollwatch-app {
        padding-bottom: 0 !important;
    }
}

/* ===========================================================================
   INCIDENT REPORT
   =========================================================================== */

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.incident-report-page {
    min-height: 100vh;
    padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
    color: #193450;
    background: #f3f7fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-header {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 130px !important;
    padding: 24px max(20px, env(safe-area-inset-right)) 48px max(20px, env(safe-area-inset-left));
    background: linear-gradient(115deg, #071d49, #103e78 68%, #12627a) !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-header > div {
    width: min(100%, 1120px);
    text-align: center;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.incident-report-page
    .incident-report-header::before {
    content: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.incident-report-page .incident-report-header img {
    display: block;
    width: min(100%, 320px) !important;
    height: auto !important;
    max-height: 70px;
    margin: 0 auto;
    object-fit: contain;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) body.incident-report-page main.incident-report-main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-toolbar {
    position: relative;
    z-index: 20;
    width: min(calc(100% - 32px), 860px);
    margin: -30px auto 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-search-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-search-form
    .searchField {
    position: relative;
    width: 100%;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-search-form #myBtn {
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 16px 76px 16px 22px !important;
    color: #17324f;
    border: 1px solid #d6e2ed !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 16px 34px rgba(7, 29, 73, 0.14) !important;
    font-size: 0.95rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-report-toolbar
    .searchField
    > .hamburger {
    position: absolute !important;
    top: 6px !important;
    right: 7px !important;
    z-index: 120 !important;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    transform: none !important;
    border-radius: 12px !important;
    background: #eef7fb !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-report-toolbar
    .hamburger-menu,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-report-toolbar
    .menu-items {
    right: 0 !important;
    left: auto !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    body.incident-report-page
    main.incident-report-main
    > .content.incident-report-content {
    display: block !important;
    width: min(calc(100% - 32px), 1020px) !important;
    min-width: 0;
    margin: 36px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-intro > div {
    flex: 1 1 0;
    min-width: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-kicker,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-section-heading
    > span {
    display: block;
    margin-bottom: 7px;
    color: #087b9b;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-intro h1 {
    margin: 0;
    color: #0c2b71;
    font-size: clamp(2rem, 4vw, 2.7rem);
    letter-spacing: -0.04em;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-intro p {
    max-width: 620px;
    margin: 8px 0 0;
    color: #61758e;
    font-size: 0.95rem;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .datetime {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 13px;
    color: #8b3036;
    border: 1px solid #f1d4d7;
    border-radius: 10px;
    background: #fff7f7;
    font-size: 0.78rem;
    font-weight: 750;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-reporter-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center !important;
    gap: 16px;
    width: 100% !important;
    min-height: 0;
    margin: 0 0 20px !important;
    padding: 17px 20px !important;
    border: 1px solid #d7e4ee;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(7, 29, 73, 0.06);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .profileimg,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .profileimg
    img {
    width: 64px !important;
    height: 64px !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .userinfo {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;
    line-height: 1.55;
    font-weight: 400;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .under-userdetails {
    display: block;
    margin: 0;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-reporter-card .name {
    color: #12386b;
    font-size: 1rem;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .userposition,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-reporter-card .userid {
    color: #61758e;
    font-size: 0.78rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .userinfo
    .labels {
    color: #718198;
    font-size: 0.75rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    .userinfo
    .values {
    margin-left: 6px;
    color: #25476c !important;
    font-size: 0.75rem;
    font-weight: 700;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    > .labels,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-reporter-card
    > .values {
    display: none;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-topic,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-field--people,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-evidence,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .submit-btn-container {
    grid-column: 1 / -1;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-topic,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-field {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid #d7e4ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(7, 29, 73, 0.04);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-section-heading {
    margin-bottom: 18px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-section-heading h2 {
    margin: 0;
    color: #173b6e;
    font-size: 1.18rem;
    text-align: left;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .fieldname,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .fieldname-2 {
    margin-bottom: 8px;
    color: #264363;
    font-size: 0.82rem;
    font-weight: 800;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page #subject_incident,
:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .select-button {
    width: 100% !important;
    min-height: 52px;
    margin: 0 0 14px !important;
    padding: 13px 15px !important;
    color: #173b6e;
    border: 1px solid #cbd9e7 !important;
    border-radius: 11px !important;
    background: #f8fbfd !important;
    font-size: 0.92rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .select-button {
    display: flex;
    align-items: center;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .dropdown-content {
    width: calc(100% - 44px);
    max-width: none;
    border: 1px solid #cedeea;
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(7, 29, 73, 0.16);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .tag {
    margin: 0 6px 6px 0;
    padding: 8px 30px 8px 10px;
    color: #145277;
    border: 1px solid #cce5ef;
    border-radius: 8px;
    background: #edf8fb;
    font-size: 0.75rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-field textarea {
    min-height: 160px !important;
    margin: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-field
    input[type="text"] {
    margin: 0 !important;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-evidence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-evidence .fieldname-2 {
    width: 100%;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .incident-evidence
    input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 10px 15px;
    color: #0b4d80;
    border: 1px solid #cce0ed;
    border-radius: 9px;
    background: #edf7fb;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .file-name {
    color: #667b92;
    font-size: 0.8rem;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .submit-btn-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .submit-btn-container button {
    min-height: 50px;
    padding: 12px 22px;
    color: #fff;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #0b4ba4, #0b839f);
    box-shadow: 0 10px 20px rgba(7, 62, 135, 0.2);
    font-weight: 800;
    cursor: pointer;
}

:where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
    .incident-report-page
    .submit-btn-container
    button:hover {
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-header {
        min-height: 118px !important;
        padding-bottom: 38px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-toolbar,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-content {
        width: calc(100% - 24px) !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-content {
        margin-top: 28px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-report-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-field {
        grid-column: 1 / -1;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-topic,
    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"]) .incident-report-page .incident-field {
        padding: 18px !important;
    }

    :where(html:not([data-pw-admin]), html[data-pw-admin~="portal"])
        .incident-report-page
        .submit-btn-container
        button {
        width: 100%;
    }
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   SHARED PUBLIC HEADER — the home.php banner and verification bar
   Unique classes keep document headers and admin screens unaffected.
   ========================================================================== */

body > .pw-site-header {
    position: relative;
    flex: none;
    display: block;
    width: 100%;
    height: clamp(126px, 12vw, 176px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #082d6c url("../images/banner.png") center / min(760px, 72%) auto no-repeat;
}

body > .pw-site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 0%, rgba(26, 184, 214, 0.14), transparent 28rem),
        linear-gradient(90deg, rgba(3, 23, 60, 0.25), transparent 35%, transparent 65%, rgba(3, 23, 60, 0.25));
}

.pw-site-header > .pw-site-header__home {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.pw-site-header__home:focus-visible {
    outline: 3px solid #62d8e7;
    outline-offset: -6px;
}

body > form.search-form.pw-site-search {
    position: relative;
    flex: none;
    display: block;
    z-index: 130;
    width: min(calc(100% - 32px), 760px) !important;
    max-width: 760px !important;
    margin: -24px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body > .pw-site-search.search-form .searchField {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

body > .pw-site-search.search-form #myBtn {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 16px 74px 16px 20px !important;
    color: #193b61 !important;
    border: 1px solid #ccdeeb !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(8, 38, 95, 0.12) !important;
    font: 16px/1.45 Inter, "Segoe UI", Arial, sans-serif !important;
    text-align: left;
}

body > .pw-site-search.search-form #myBtn::placeholder {
    color: #627b95;
    opacity: 1;
}

body > .pw-site-search.search-form .searchField > .hamburger {
    position: absolute !important;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    top: 7px !important;
    right: 8px !important;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px !important;
    border: 0;
    border-radius: 10px !important;
    background: #edf5fa !important;
    transform: none !important;
    cursor: pointer;
}

body > .pw-site-search.search-form .hamburger img {
    display: block;
    width: 24px;
    height: auto;
}

body > .pw-site-search.search-form .searchField .menu-items {
    top: 66px !important;
    right: 0 !important;
    left: auto !important;
    max-width: 100% !important;
    padding: 10px !important;
    border: 1px solid #d6e2ee;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px);
    text-align: left;
    font: 14px/1.45 Inter, "Segoe UI", Arial, sans-serif;
}

.pw-site-search .menu-items a {
    color: #173459 !important;
    font-size: 0.78rem;
}

/* Keep highlighted menu labels readable despite the shared default link color. */
.pw-site-search .menu-items a:hover,
.pw-site-search .menu-items a:focus-visible {
    color: #fff !important;
    background: #154e9f !important;
}

.pw-site-search .menu-items a.is-current {
    color: #fff !important;
}

.pw-site-search .menu-items a:focus-visible {
    outline: 2px solid #7bd9e9;
    outline-offset: -3px;
}

/* Former header titles and account controls remain below the shared navigation. */
body > .pw-page-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    width: min(calc(100% - 32px), 1180px);
    margin: 32px auto 0;
    padding: 24px;
    border: 1px solid #dce6f0;
    border-radius: 18px;
    background: #fff;
    color: #193450;
    text-align: left;
}

.pw-page-intro .pw-page-intro__copy > span {
    color: #327e96;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pw-page-intro__copy h1 { margin: 8px 0; }
.pw-page-intro__copy p { margin: 0; color: #60778e; }
.pw-page-intro__account { display: flex; align-items: center; gap: 12px; }
.pw-page-intro__account a { display: flex; align-items: center; gap: 12px; color: inherit; }
.pw-page-intro__account img { width: 48px; height: 48px; object-fit: contain; }
.pw-page-intro .pw-page-intro__account strong { color: #193450; }
.pw-page-intro .pw-page-intro__account small { display: block; color: #60778e; }

/* Standalone forms previously used body padding around their own branding. */
body.login-page:has(> .pw-site-header),
body.registration-choice-page:has(> .pw-site-header),
body.registration-form-page.pollwatch-app:has(> .pw-site-header) {
    padding: 0 0 32px !important;
}

body.login-page:has(> .pw-site-header) main.login-shell {
    width: min(calc(100% - 32px), 1000px) !important;
    margin: 32px auto 0;
}

body.registration-choice-page:has(> .pw-site-header) main.registration-shell,
body.registration-form-page:has(> .pw-site-header) main.registration-layout {
    width: min(calc(100% - 32px), 1180px) !important;
    margin: 32px auto 0;
}

body.account-page:has(> .pw-site-header) main.account-main { padding-top: 28px; }

@media (max-width: 900px) {
    body > .pw-site-header { background-size: min(620px, 88%) auto; }
}

@media (max-width: 650px) {
    body > .pw-site-header { height: 132px; }
}

@media (max-width: 600px) {
    body > .pw-site-header { background-size: 96% auto; }
    body > .pw-page-intro { padding: 20px 16px; }
}

@media print {
    body > .pw-site-header,
    body > .pw-page-intro,
    body > form.search-form.pw-site-search { display: none !important; }
}

/* PRECINCT-INTRO-FIX:BEGIN */
/* Only the Precinct Finder intro uses these light-surface account styles. */
body.precinct-page > .pw-page-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
}

body.precinct-page > .pw-page-intro .pw-page-intro__copy {
    min-width: 0;
    text-align: left;
}

body.precinct-page > .pw-page-intro .precinct-eyebrow {
    color: #24778b;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

body.precinct-page > .pw-page-intro h1 {
    margin: 8px 0 10px;
    color: #102f63;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    text-align: left;
}

body.precinct-page > .pw-page-intro .pw-page-intro__copy p {
    color: #526b84;
    font-size: 14px;
    line-height: 1.65;
}

body.precinct-page > .pw-page-intro .pw-page-intro__account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    align-items: center;
    gap: 16px;
    width: 330px;
    max-width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #dce7f0;
    border-radius: 14px;
    background: #f5f9fc;
}

body.precinct-page > .pw-page-intro .precinct-account__link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    border-radius: 8px;
    color: #17385f;
    text-decoration: none;
}

body.precinct-page > .pw-page-intro .precinct-account__link:focus-visible {
    outline: 3px solid #278aa0;
    outline-offset: 5px;
}

body.precinct-page > .pw-page-intro .precinct-account__link:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.precinct-page > .pw-page-intro .precinct-account__photo,
body.precinct-page > .pw-page-intro .precinct-account__initial {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    border: 2px solid #d3e6ef;
    background: #e1f1f7;
    color: #17436c;
}

body.precinct-page > .pw-page-intro .precinct-account__copy strong {
    max-width: none;
    overflow: visible;
    color: #17385f;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.precinct-page > .pw-page-intro .precinct-account__copy small {
    margin-top: 4px;
    color: #526b84;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.precinct-page > .pw-page-intro .precinct-account__qr {
    width: 56px !important;
    min-width: 56px;
    height: 56px !important;
    padding: 5px;
    border: 1px solid #dce7f0;
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 800px) {
    body.precinct-page > .pw-page-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 24px;
    }

    body.precinct-page > .pw-page-intro .pw-page-intro__account {
        width: 100%;
    }
}

@media (max-width: 480px) {
    body.precinct-page > .pw-page-intro { padding: 22px 18px; }
    body.precinct-page > .pw-page-intro .pw-page-intro__account {
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 12px;
        padding: 12px;
    }
    body.precinct-page > .pw-page-intro .precinct-account__link { gap: 10px; }
    body.precinct-page > .pw-page-intro .precinct-account__qr {
        width: 48px !important;
        min-width: 48px;
        height: 48px !important;
        padding: 4px;
    }
}
/* PRECINCT-INTRO-FIX:END */

/* Appointment document: keep these rules independent of legacy content grids. */
body.appointment-page main.appointment-main {
    min-height: 0;
    padding: 32px 20px 48px;
    background: #f3f7fb;
}

.appointment-page .appointment-shell {
    width: min(100%, 920px);
    margin: 0 auto;
}

.appointment-page .appointment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    text-align: left;
}

.appointment-page .appointment-eyebrow {
    display: block;
    color: #287f94;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.appointment-page .appointment-toolbar h1 {
    margin: 6px 0 8px;
    color: #102f63;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 750;
    text-align: left;
}

.appointment-page .appointment-toolbar p {
    margin: 0;
    color: #61758c;
    font-size: 14px;
    line-height: 1.6;
}

.appointment-page .appointment-print {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 18px;
    border: 1px solid #cbdce9;
    border-radius: 10px;
    color: #153962;
    background: #fff;
    box-shadow: 0 3px 8px rgba(8, 38, 95, 0.04);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.appointment-page .appointment-print:hover { background: #eaf4f9; border-color: #8abcca; }
.appointment-page .appointment-print:focus-visible { outline: 3px solid #25b5cf; outline-offset: 3px; }
.appointment-page .appointment-print svg { width: 19px; height: 19px; }

.appointment-page .appointment-document {
    padding: clamp(28px, 4.5vw, 52px);
    border: 1px solid #dbe5ee;
    border-top: 4px solid #143a73;
    border-radius: 18px;
    background: #fff;
    color: #263b54;
    box-shadow: 0 14px 40px rgba(20, 50, 86, 0.06);
    text-align: left;
}

.appointment-page .appointment-document__heading { margin-bottom: 28px; }
.appointment-page .appointment-document h2 {
    margin: 10px 0 16px;
    color: #102f63;
    font-size: clamp(23px, 3vw, 30px);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-align: left;
}
.appointment-page .appointment-document__rule {
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: #2eb4cc;
}

.appointment-page .appointment-statement {
    max-width: none;
    margin: 0 0 28px;
    color: #364c65;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
    overflow-wrap: anywhere;
}
.appointment-page .appointment-statement strong { color: #153962; font-weight: 700; }

.appointment-page .appointment-assignment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin: 0 0 24px;
    border: 1px solid #dce7ef;
    border-radius: 12px;
    background: #f6f9fc;
}
.appointment-page .appointment-assignment > div { min-width: 0; padding: 20px 24px; }
.appointment-page .appointment-assignment > div + div { border-left: 1px solid #dce7ef; }
.appointment-page .appointment-assignment dt { margin: 0 0 8px; color: #61758c; font-size: 12px; font-weight: 600; }
.appointment-page .appointment-assignment dd { margin: 0; color: #163a66; font-size: 20px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }

.appointment-page .appointment-validity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: none;
    margin: 0;
    color: #61758c;
    font-size: 13px;
    line-height: 1.65;
}
.appointment-page .appointment-validity svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #327e96; }

.appointment-page .appointment-signatory {
    width: min(100%, 280px);
    margin: 28px 0 0 auto;
    text-align: center;
}
.appointment-page .appointment-signatory__signature { display: grid; place-items: center; min-height: 72px; padding: 8px 12px; }
.appointment-page .appointment-signatory__signature img { display: block; max-width: 200px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.appointment-page .appointment-signatory__signature [hidden] { display: none !important; }
.appointment-page .appointment-signatory__unavailable { color: #718399; font-size: 12px; font-style: italic; }
.appointment-page .appointment-signatory__name { display: block; padding-top: 12px; border-top: 1px solid #becddd; color: #17385f; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.appointment-page .appointment-signatory__position { display: block; margin-top: 4px; color: #61758c; font-size: 12px; line-height: 1.5; }

@media (max-width: 600px) {
    body.appointment-page main.appointment-main { padding: 26px 16px 36px; }
    .appointment-page .appointment-toolbar { align-items: flex-start; flex-direction: column; gap: 16px; }
    .appointment-page .appointment-document { padding: 26px 20px; border-radius: 14px; }
    .appointment-page .appointment-statement { font-size: 15px; line-height: 1.8; }
    .appointment-page .appointment-assignment { grid-template-columns: minmax(0, 1fr); }
    .appointment-page .appointment-assignment > div { padding: 16px 18px; }
    .appointment-page .appointment-assignment > div + div { border-left: 0; border-top: 1px solid #dce7ef; }
    .appointment-page .appointment-signatory { margin-top: 24px; }
}

@media print {
    body.appointment-page > :not(main),
    .appointment-page .appointment-toolbar { display: none !important; }
    body.appointment-page,
    body.appointment-page main.appointment-main { min-height: 0; padding: 0 !important; background: #fff !important; }
    .appointment-page .appointment-shell { width: 100%; }
    .appointment-page .appointment-document { padding: 20px; border: 0; border-radius: 0; box-shadow: none; }
    .appointment-page .appointment-assignment,
    .appointment-page .appointment-signatory { break-inside: avoid; }
}

/* ER-SUBMISSIONS:BEGIN */
/* Submitted returns only. Never reuse the legacy .home/.er-records/table rules. */
body.er-submissions-page main.er-submissions-main {
    min-height: 0;
    padding: 32px 20px 48px;
    background: #f3f7fb;
}
body.er-submissions-page .er-submissions-shell { width: min(100%, 1180px); margin: 0 auto; }
body.er-submissions-page .er-submissions-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; text-align: left; }
body.er-submissions-page .er-submissions-eyebrow { display: block; color: #287b8e; font-size: 11px; font-weight: 750; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
body.er-submissions-page .er-submissions-heading h1 { margin: 8px 0 10px; color: #102f63; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; text-align: left; }
body.er-submissions-page .er-submissions-heading p { margin: 0; color: #5e738a; font-size: 14px; line-height: 1.6; }
body.er-submissions-page .er-submissions-primary { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 18px; border: 1px solid #153f77; border-radius: 11px; color: #fff; background: #153f77; box-shadow: 0 5px 14px rgba(12, 51, 100, .12); font-size: 13px; font-weight: 650; line-height: 1.4; text-decoration: none; }
body.er-submissions-page .er-submissions-primary > span { font-size: 22px; font-weight: 400; line-height: 1; }
body.er-submissions-page .er-submissions-primary:hover { background: #0e2f5e; }
body.er-submissions-page .er-submissions-primary:focus-visible,
body.er-submissions-page .er-submissions-identity:focus-visible,
body.er-submissions-page .er-submissions-file:focus-visible { outline: 3px solid #2691aa; outline-offset: 4px; }

body.er-submissions-page .er-submissions-account { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding: 20px 24px; border: 1px solid #dbe6ef; border-radius: 16px; background: #fff; }
body.er-submissions-page .er-submissions-identity { display: flex; align-items: center; gap: 16px; min-width: 0; border-radius: 8px; color: #17385f; text-align: left; text-decoration: none; }
body.er-submissions-page .er-submissions-identity > span { min-width: 0; }
body.er-submissions-page .er-submissions-identity small { display: block; margin-bottom: 3px; color: #5e738a; font-size: 11px; line-height: 1.5; }
body.er-submissions-page .er-submissions-identity strong { display: block; color: #17385f; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
body.er-submissions-page .er-submissions-account-number { display: block; margin-top: 4px; color: #5e738a; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
body.er-submissions-page .er-submissions-avatar { flex: none; width: 52px; height: 52px; border: 2px solid #d6e8f0; border-radius: 50%; background: #eaf4fa; object-fit: cover; }
body.er-submissions-page .er-submissions-account-qr { flex: none; width: 58px; height: 58px; padding: 5px; border: 1px solid #dbe6ef; border-radius: 8px; background: #fff; object-fit: contain; }

body.er-submissions-page .er-submissions-panel { overflow: hidden; border: 1px solid #dbe6ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 36px rgba(12, 47, 90, .05); }
body.er-submissions-page .er-submissions-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-bottom: 1px solid #e2eaf1; text-align: left; }
body.er-submissions-page .er-submissions-panel-heading h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; color: #16385f; font-size: 19px; line-height: 1.4; text-align: left; }
body.er-submissions-page .er-submissions-panel-heading p { margin: 0; color: #5e738a; font-size: 13px; line-height: 1.6; }
body.er-submissions-page .er-submissions-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 3px 8px; border-radius: 7px; color: #1c5e78; background: #eaf4f8; font-size: 12px; font-weight: 700; }
body.er-submissions-page .er-submissions-order { flex: none; color: #63788f; font-size: 12px; }
body.er-submissions-page .er-submissions-scroll { border: 0; border-radius: 0; }
body.er-submissions-page .er-submissions-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.er-submissions-page .er-submissions-table { width: 100%; min-width: 820px; border: 0; border-collapse: separate; border-spacing: 0; font-family: inherit; font-size: 14px; text-align: left; }
body.er-submissions-page .er-submissions-table thead th { position: static; padding: 15px 20px !important; border-bottom: 1px solid #dde7f0; color: #526b84; background: #f5f8fc !important; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
body.er-submissions-page .er-submissions-table tbody th,
body.er-submissions-page .er-submissions-table tbody td { position: static; padding: 18px 20px !important; border-bottom: 1px solid #e6edf3; color: #2c4561; background: transparent !important; font-size: 13px; font-weight: 400; vertical-align: top; }
body.er-submissions-page .er-submissions-table tbody tr { height: auto; background: #fff !important; }
body.er-submissions-page .er-submissions-table tbody tr:hover { background: #f8fbfd !important; }
body.er-submissions-page .er-submissions-table tbody tr:last-child th,
body.er-submissions-page .er-submissions-table tbody tr:last-child td { border-bottom: 0; }
body.er-submissions-page .er-submissions-number { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; color: #17385f; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.er-submissions-page .er-submissions-number > span { color: #7b92a6; font-weight: 500; }
body.er-submissions-page .er-submissions-files { display: flex; flex-wrap: wrap; gap: 7px; }
body.er-submissions-page .er-submissions-file { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 10px; border: 1px solid #d9e6f1; border-radius: 8px; color: #205481; background: #f3f8fc; font-size: 12px; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; }
body.er-submissions-page .er-submissions-file:hover { color: #103d69; border-color: #9dbed7; background: #e7f2fa; }
body.er-submissions-page .er-submissions-file > span { color: #477e9d; font-size: 15px; }
body.er-submissions-page .er-submissions-date { display: block; padding-top: 3px; color: #2c4561; font-size: 13px; line-height: 1.5; white-space: nowrap; }
body.er-submissions-page .er-submissions-date small { display: block; margin-top: 3px; color: #63788f; font-size: 12px; }
body.er-submissions-page .er-submissions-missing { display: inline-block; padding-top: 9px; color: #63788f; font-size: 12px; line-height: 1.5; }
body.er-submissions-page .er-submissions-note { max-width: none; margin: 0; padding: 16px 24px; border-top: 1px solid #e6edf3; color: #63788f; font-size: 12px; line-height: 1.6; }
body.er-submissions-page .er-submissions-empty { padding: 52px 24px 60px; text-align: center; }
body.er-submissions-page .er-submissions-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; padding: 14px; border-radius: 16px; color: #317c96; background: #edf6fa; font-size: 22px; }
body.er-submissions-page .er-submissions-empty h3 { margin: 0 0 10px; color: #17385f; font-size: 19px; line-height: 1.4; }
body.er-submissions-page .er-submissions-empty p { max-width: 460px; margin: 0 auto; color: #5e738a; font-size: 14px; line-height: 1.7; }

@media (max-width: 900px) {
    body.er-submissions-page .er-submissions-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
}
@media (max-width: 760px) {
    body.er-submissions-page main.er-submissions-main { padding: 26px 16px 36px; }
    body.er-submissions-page .er-submissions-account { gap: 12px; padding: 16px; }
    body.er-submissions-page .er-submissions-identity { gap: 12px; }
    body.er-submissions-page .er-submissions-avatar { width: 42px; height: 42px; }
    body.er-submissions-page .er-submissions-account-qr { width: 48px; height: 48px; }
    body.er-submissions-page .er-submissions-identity strong { font-size: 14px; }
    body.er-submissions-page .er-submissions-panel-heading { align-items: flex-start; flex-direction: column; gap: 8px; padding: 20px; }
    body.er-submissions-page .er-submissions-scroll { padding: 16px; background: #f5f8fc; }
    body.er-submissions-page .er-submissions-table { display: block; min-width: 0; overflow: visible; }
    body.er-submissions-page .er-submissions-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    body.er-submissions-page .er-submissions-table tbody { display: grid; gap: 16px; }
    body.er-submissions-page .er-submissions-table tbody tr { display: block; min-width: 0; overflow: hidden; border: 1px solid #dce6ef; border-radius: 12px; }
    body.er-submissions-page .er-submissions-table tbody th { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px !important; background: #f8fbfd !important; border-bottom: 1px solid #e6edf3; }
    body.er-submissions-page .er-submissions-table tbody td { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px !important; border-bottom: 1px solid #e6edf3; }
    body.er-submissions-page .er-submissions-table tbody th::before,
    body.er-submissions-page .er-submissions-table tbody td::before { content: attr(data-label); padding-top: 10px; color: #5e738a; font-size: 11px; font-weight: 600; line-height: 1.5; }
    body.er-submissions-page .er-submissions-table tbody th::before { padding-top: 0; }
    body.er-submissions-page .er-submissions-table tbody td:last-child { border-bottom: 0; }
    body.er-submissions-page .er-submissions-table tbody tr:last-child th { border-bottom: 1px solid #e6edf3; }
    body.er-submissions-page .er-submissions-file { min-height: 42px; }
    body.er-submissions-page .er-submissions-note { padding: 16px 20px; }
}
@media (max-width: 380px) {
    body.er-submissions-page .er-submissions-scroll { padding: 10px; }
    body.er-submissions-page .er-submissions-table tbody td { grid-template-columns: 80px minmax(0, 1fr); gap: 8px; padding: 12px 10px !important; }
    body.er-submissions-page .er-submissions-identity { gap: 8px; }
}
/* ER-SUBMISSIONS:END */

/* ==========================================================================
   ADMIN — ORGANIZATION
   ========================================================================== */

/*
 PW-STYLES: organization
 */
/* Grid layout for headers and rows */
:where(html[data-pw-admin~="organization"]) .organization-list-header,
:where(html[data-pw-admin~="organization"]) .organization-list-row {
    display: grid;
    grid-template-columns: 40px 150px 100px 100px 150px 150px 100px 100px !important;
}

:where(html[data-pw-admin~="organization"]) .organization-list-header {
    position: sticky;
    top: 0;
    padding: 0 10px;
    z-index: 998;
}

/* Background color for alternating rows */
:where(html[data-pw-admin~="organization"]) .organization-list-row:nth-child(even) .organization-data {
    background: #eaeff9; /* Light gray background for even rows */
}

:where(html[data-pw-admin~="organization"]) .organization-list-row:nth-child(odd) .organization-data {
    background: #fff; /* White background for odd rows */
}

/* Styling for header cells */
:where(html[data-pw-admin~="organization"]) .organization-headers {
    font-weight: bold;
}

/* General styling for data and header cells */
:where(html[data-pw-admin~="organization"]) .organization-data,
:where(html[data-pw-admin~="organization"]) .organization-headers {
    padding: 5px; /* Adjust as needed */
    box-sizing: border-box;
    flex: 1; /* Ensures equal width for each cell */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Button styling */
:where(html[data-pw-admin~="organization"]) .organization-data .edit-btn,
:where(html[data-pw-admin~="organization"]) .organization-data .delete-btn {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none !important;
    border-radius: 5px;
    text-align: center;
    margin: 1px;
    height: 25px;
    max-width: 30px;
}

/* Grid layout for buttons */
:where(html[data-pw-admin~="organization"]) .btn-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}

/* Image styling for buttons */
:where(html[data-pw-admin~="organization"]) .organization-data .edit-btn img,
:where(html[data-pw-admin~="organization"]) .organization-data .delete-btn img {
    width: 100%;
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   ADMIN — INCIDENT-REPORT
   ========================================================================== */

/*
 PW-STYLES: incident-report
 */
/* Grid layout for headers and rows */
:where(html[data-pw-admin~="incident-report"]) .incident-list-header,
:where(html[data-pw-admin~="incident-report"]) .incident-list-row {
    display: grid;
    grid-template-columns: 40px 70px 150px 150px 215px 200px 200px 100px 100px 100px;
}
:where(html[data-pw-admin~="incident-report"]) .incident-list-header {
    position: sticky;
    top: 0;
}
/* Background color for alternating rows */
:where(html[data-pw-admin~="incident-report"]) .incident-list-row:nth-child(even) .incident-data {
    background: #f0f0f0; /* Light gray background for even rows */
}

:where(html[data-pw-admin~="incident-report"]) .incident-list-row:nth-child(odd) .incident-data {
    background: #fff; /* White background for odd rows */
}

/* Styling for header cells */
:where(html[data-pw-admin~="incident-report"]) .incident-headers {
    background-color: #fff;
    font-weight: bold !important;
}

/* General styling for data and header cells */
:where(html[data-pw-admin~="incident-report"]) .incident-data,
:where(html[data-pw-admin~="incident-report"]) .incident-headers {
    padding: 5px; /* Adjust as needed */
    box-sizing: border-box;
    flex: 1; /* Ensures equal width for each cell */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-weight: normal;
}
:where(html[data-pw-admin~="incident-report"]) .incident-data {
    max-height: 100px;
    overflow: auto;
}

/* Button styling */
:where(html[data-pw-admin~="incident-report"]) .incident-data .edit-btn,
:where(html[data-pw-admin~="incident-report"]) .incident-data .delete-btn {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none !important;
    border-radius: 5px;
    text-align: center;
    margin: 1px;
    height: 25px;
    max-width: 30px;
}

/* Grid layout for buttons */
:where(html[data-pw-admin~="incident-report"]) .btn-grid {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    align-items: center;
}

/* Image styling for buttons */
:where(html[data-pw-admin~="incident-report"]) .incident-data .edit-btn img,
:where(html[data-pw-admin~="incident-report"]) .incident-data .delete-btn img {
    width: 100%;
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   ADMIN — RESPONSIVE
   ========================================================================== */

/*
 PW-STYLES: responsive
 */
/* Responsive Design for Admin Dashboard */

/* Base styles for all devices */
*:where(html[data-pw-admin~="responsive"]),
:where(html[data-pw-admin~="responsive"]) * {
    box-sizing: border-box;
}

:where(html[data-pw-admin~="responsive"]) body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

:where(html[data-pw-admin~="responsive"]) .container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Mobile menu toggle button */
:where(html[data-pw-admin~="responsive"]) .mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 96px;
    left: 20px;
    z-index: 999;
    width: 40px;
    height: 40px;
    background-color: #012556;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

:where(html[data-pw-admin~="responsive"]) .mobile-menu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 3px;
    background-color: white;
    box-shadow:
        0 -8px 0 white,
        0 8px 0 white;
}

/* Desktop styles (min-width: 1025px) */
@media screen and (min-width: 1025px) {
    :where(html[data-pw-admin~="responsive"]) .container {
        flex-direction: row;
    }

    :where(html[data-pw-admin~="responsive"]) .sidebar {
        width: 250px;
        min-height: 100vh;
        position: sticky;
        top: 0;
    }

    :where(html[data-pw-admin~="responsive"]) .content {
        flex: 1;
        padding: 20px;
    }

    :where(html[data-pw-admin~="responsive"]) .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
    }

    :where(html[data-pw-admin~="responsive"]) .tab {
        display: flex;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks {
        padding: 15px;
        text-align: left;
        border: none;
        background: none;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks:hover {
        background-color: rgba(1, 37, 86, 0.1);
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks.active {
        background-color: #012556;
        color: white !important;
    }

    :where(html[data-pw-admin~="responsive"]) .tabcontent {
        display: none;
        padding: 20px;
    }

    :where(html[data-pw-admin~="responsive"]) .tabcontent.active {
        display: block;
    }

    :where(html[data-pw-admin~="responsive"]) .detailedsalesreport {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }

    :where(html[data-pw-admin~="responsive"]) .detailedsalesreport-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user_field {
        display: flex;
        align-items: center;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="text"] {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-right: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="submit"],
    :where(html[data-pw-admin~="responsive"]) .search_user_btn,
    :where(html[data-pw-admin~="responsive"]) .search_user a {
        padding: 10px 15px !important;
        background-color: #012556 !important;
        color: white !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        text-align: center !important;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="submit"]:hover,
    :where(html[data-pw-admin~="responsive"]) .search_user a:hover {
        background-color: #001a3d;
    }

    /* User list styles */
    :where(html[data-pw-admin~="responsive"]) .user-list-header,
    :where(html[data-pw-admin~="responsive"]) .user-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        border-bottom: 1px solid #ddd;
    }

    :where(html[data-pw-admin~="responsive"]) .user-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Organization styles */
    :where(html[data-pw-admin~="responsive"]) .organization-list-header,
    :where(html[data-pw-admin~="responsive"]) .organization-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;

        border-bottom: 1px solid #ddd;
    }

    :where(html[data-pw-admin~="responsive"]) .organization-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Incident report styles */
    :where(html[data-pw-admin~="responsive"]) .incident-report-header,
    :where(html[data-pw-admin~="responsive"]) .incident-report-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

        border-bottom: 1px solid #ddd;
    }

    :where(html[data-pw-admin~="responsive"]) .incident-report-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Affidavit styles */
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header,
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

        border-bottom: 1px solid #ddd;
    }

    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Election return styles */
    :where(html[data-pw-admin~="responsive"]) .election-return-header,
    :where(html[data-pw-admin~="responsive"]) .election-return-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

        border-bottom: 1px solid #ddd;
    }

    :where(html[data-pw-admin~="responsive"]) .election-return-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Pollwatchers list styles */
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header,
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

        border-bottom: 1px solid #ddd;
    }

    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header {
        background-color: #fff;
        font-weight: bold;
    }
}

/* Tablet styles (min-width: 768px and max-width: 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    :where(html[data-pw-admin~="responsive"]) .container {
        flex-direction: row;
    }

    :where(html[data-pw-admin~="responsive"]) .sidebar {
        width: 200px;
        position: sticky;
        top: 0;
    }

    :where(html[data-pw-admin~="responsive"]) .content {
        flex: 1;
        padding: 15px;
    }

    :where(html[data-pw-admin~="responsive"]) .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
    }

    :where(html[data-pw-admin~="responsive"]) .large-logo img {
    }

    :where(html[data-pw-admin~="responsive"]) .tab {
        display: flex;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks {
        padding: 12px;
        text-align: left;
        border: none;
        background: none;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks:hover {
        background-color: rgba(1, 37, 86, 0.1);
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks.active {
        background-color: #012556;
        color: white !important;
    }

    :where(html[data-pw-admin~="responsive"]) .tabcontent {
        display: none;
        padding: 15px;
    }

    :where(html[data-pw-admin~="responsive"]) .tabcontent.active {
        display: block;
    }

    :where(html[data-pw-admin~="responsive"]) .detailedsalesreport {
        background-color: white;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 15px;
    }

    :where(html[data-pw-admin~="responsive"]) .detailedsalesreport-title {
        display: flex;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user_field {
        width: 100%;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user {
        width: 100%;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="text"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="submit"],
    :where(html[data-pw-admin~="responsive"]) .search_user a {
        width: 100%;
        padding: 8px 15px;
        background-color: #012556 !important;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        margin-bottom: 5px;
    }

    /* User list styles */
    :where(html[data-pw-admin~="responsive"]) .user-list-header,
    :where(html[data-pw-admin~="responsive"]) .user-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .user-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Organization styles */
    :where(html[data-pw-admin~="responsive"]) .organization-list-header,
    :where(html[data-pw-admin~="responsive"]) .organization-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .organization-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Incident report styles */
    :where(html[data-pw-admin~="responsive"]) .incident-report-header,
    :where(html[data-pw-admin~="responsive"]) .incident-report-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .incident-report-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Affidavit styles */
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header,
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Election return styles */
    :where(html[data-pw-admin~="responsive"]) .election-return-header,
    :where(html[data-pw-admin~="responsive"]) .election-return-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .election-return-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Pollwatchers list styles */
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header,
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 8px;
        padding: 12px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header {
        background-color: #fff;
        font-weight: bold;
    }
}

/* Mobile styles (max-width: 767px) */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) .mobile-menu-toggle {
        display: block;
    }

    :where(html[data-pw-admin~="responsive"]) .container {
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .sidebar {
        width: 100%;
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        z-index: 999;
        background-color: #000;
        transition: left 0.3s ease;
        overflow-y: auto;
    }

    :where(html[data-pw-admin~="responsive"]) .sidebar.active {
        left: 0;
        display: flex;
    }

    :where(html[data-pw-admin~="responsive"]) .content {
        width: 100%;
        padding: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .large-logo img {
        margin-bottom: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .large-logo-text {
        display: none;
    }

    :where(html[data-pw-admin~="responsive"]) .tab {
        display: flex;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks {
        padding: 15px;
        text-align: left;
        border: none;
        background: none;
        cursor: pointer;
        transition: background-color 0.3s;
        font-size: 16px;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks:hover {
        background-color: rgba(1, 37, 86, 0.1);
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks.active {
        background-color: #012556;
        color: white !important;
    }

    :where(html[data-pw-admin~="responsive"]) .tabcontent {
        display: none;
        padding: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .tabcontent.active {
        display: block;
    }

    :where(html[data-pw-admin~="responsive"]) .detailedsalesreport {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 10px;
        margin-bottom: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .detailedsalesreport-title {
        display: flex;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user_field {
        width: 100%;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user {
        width: 100%;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="text"] {
        width: 100%;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .search_user input[type="submit"],
    :where(html[data-pw-admin~="responsive"]) .search_user a {
        width: 100%;
        padding: 8px 15px;
        background-color: #012556;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        margin-bottom: 5px;
    }

    /* User list styles */
    :where(html[data-pw-admin~="responsive"]) .user-list-header,
    :where(html[data-pw-admin~="responsive"]) .user-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .user-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Organization styles */
    :where(html[data-pw-admin~="responsive"]) .organization-list-header,
    :where(html[data-pw-admin~="responsive"]) .organization-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .organization-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Incident report styles */
    :where(html[data-pw-admin~="responsive"]) .incident-report-header,
    :where(html[data-pw-admin~="responsive"]) .incident-report-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .incident-report-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Affidavit styles */
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header,
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Election return styles */
    :where(html[data-pw-admin~="responsive"]) .election-return-header,
    :where(html[data-pw-admin~="responsive"]) .election-return-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .election-return-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Pollwatchers list styles */
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header,
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
    }

    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header {
        background-color: #fff;
        font-weight: bold;
    }

    /* Overlay for mobile menu */
    :where(html[data-pw-admin~="responsive"]) body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    :where(html[data-pw-admin~="responsive"]) body.sidebar-active::after {
        opacity: 1;
        visibility: visible;
    }
}

/* Small mobile devices (max-width: 480px) */
@media screen and (max-width: 480px) {
    :where(html[data-pw-admin~="responsive"]) .header-content h1 {
        font-size: 24px !important;
    }

    :where(html[data-pw-admin~="responsive"]) .tablinks {
        font-size: 14px;
        padding: 12px;
    }

    :where(html[data-pw-admin~="responsive"]) .user-list-header,
    :where(html[data-pw-admin~="responsive"]) .user-list-row,
    :where(html[data-pw-admin~="responsive"]) .organization-list-header,
    :where(html[data-pw-admin~="responsive"]) .organization-list-row,
    :where(html[data-pw-admin~="responsive"]) .incident-report-header,
    :where(html[data-pw-admin~="responsive"]) .incident-report-row,
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-header,
    :where(html[data-pw-admin~="responsive"]) .affidavit-list-row,
    :where(html[data-pw-admin~="responsive"]) .election-return-header,
    :where(html[data-pw-admin~="responsive"]) .election-return-row,
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-header,
    :where(html[data-pw-admin~="responsive"]) .pollwatchers-list-row {
        font-size: 12px;
    }

    :where(html[data-pw-admin~="responsive"]) .mobile-menu-toggle {
        width: 35px;
        height: 35px;
    }
}

/* Responsive tables */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    :where(html[data-pw-admin~="responsive"]) th,
    :where(html[data-pw-admin~="responsive"]) td {
        min-width: 120px;
    }
}

/* Responsive forms */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) input[type="text"],
    :where(html[data-pw-admin~="responsive"]) input[type="password"],
    :where(html[data-pw-admin~="responsive"]) input[type="email"],
    :where(html[data-pw-admin~="responsive"]) input[type="number"],
    :where(html[data-pw-admin~="responsive"]) input[type="date"],
    :where(html[data-pw-admin~="responsive"]) select,
    :where(html[data-pw-admin~="responsive"]) textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .form-group {
        margin-bottom: 15px;
    }

    :where(html[data-pw-admin~="responsive"]) .form-row {
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .form-row > div {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* Responsive buttons */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) .btn {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    :where(html[data-pw-admin~="responsive"]) .btn-group {
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .btn-group .btn {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* Responsive images */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) img {
        max-width: 100%;
        height: auto;
    }
}

/* Responsive modals */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) .modal-content {
        width: 95%;
        margin: 20px auto;
        padding: 15px;
    }

    :where(html[data-pw-admin~="responsive"]) .modal-header {
        padding: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .modal-body {
        padding: 10px;
    }

    :where(html[data-pw-admin~="responsive"]) .modal-footer {
        padding: 10px;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .modal-footer .btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* Responsive navigation */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) .nav {
        flex-direction: column;
    }

    :where(html[data-pw-admin~="responsive"]) .nav-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* Responsive footer */
@media screen and (max-width: 767px) {
    :where(html[data-pw-admin~="responsive"]) .footer {
        flex-direction: column;
        text-align: center;
    }

    :where(html[data-pw-admin~="responsive"]) .footer-item {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   ADMIN — SALES-STATS
   ========================================================================== */

/*
 PW-STYLES: sales-stats
 */
:where(html[data-pw-admin~="sales-stats"]) body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: linear-gradient(90deg, #000 0%, #000 10%, rgb(4 59 169) 100%);
}

:where(html[data-pw-admin~="sales-stats"]) .container {
    display: flex;
    padding: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .header-content {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 20px;
    box-sizing: border-box;
}

:where(html[data-pw-admin~="sales-stats"]) .header-content h1 {
    padding: 0;
    margin: 0;
    font-size: 40px;
    text-align: right;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar {
    width: 160px;
    margin-right: 20px;
    max-height: 700px;
    height: 100%;
    overflow: auto;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar::-webkit-scrollbar {
    background-color: #061796;
    width: 10px;
    /* Thin scrollbar width */
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 3px solid #061796;
    /* Color of the scrollbar thumb */
    border-radius: 10px;
    /* Round the scrollbar thumb */
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar::-webkit-scrollbar-track {
    background-color: transparent;
    /* Color of the scrollbar track */
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar img {
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebaritems {
    background: transparent;
    color: #99b2c6;
    font-size: 18px;
    width: 100%;
    height: 30px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    padding: 10px 5px;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebaritems:hover {
    background: #67b85b;
    color: #fff;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebaritems:hover img {
    filter: brightness(0) invert(1);
    /* Invert the image color on hover */
    transition: all 0.5s;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebaritems img {
    width: 20px;
    margin-right: 5px;
    margin-left: 15px;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar-header {
    text-align: center;
}

:where(html[data-pw-admin~="sales-stats"]) .sidebar-header img {
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

:where(html[data-pw-admin~="sales-stats"]) .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

:where(html[data-pw-admin~="sales-stats"]) .tab button:hover {
    background-color: #ddd;
}

:where(html[data-pw-admin~="sales-stats"]) .tab button.active {
    background-color: #ccc;
}

:where(html[data-pw-admin~="sales-stats"]) .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

:where(html[data-pw-admin~="sales-stats"]) .tabcontent.active {
    display: block;
}

:where(html[data-pw-admin~="sales-stats"]) .content {
    background-color: #fff;
    width: 100%;
    flex: 1;
    padding: 20px;
    border-radius: 20px;
}

:where(html[data-pw-admin~="sales-stats"]) .header {
    display: grid;
    grid-template-columns: auto auto;
}

:where(html[data-pw-admin~="sales-stats"]) .headertitle {
    font-weight: bold;
    font-size: 18px;
    color: #012556;
}

:where(html[data-pw-admin~="sales-stats"]) .currentdatetime {
    font-size: 14px;
    color: #aaabab;
}

:where(html[data-pw-admin~="sales-stats"]) .searchcontainer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
}

:where(html[data-pw-admin~="sales-stats"]) .searchfield {
    width: 140px;
}

:where(html[data-pw-admin~="sales-stats"]) .searchdate {
    width: 80px;
    background: #e8eaeb;
}

:where(html[data-pw-admin~="sales-stats"]) .searchdate,
:where(html[data-pw-admin~="sales-stats"]) .searchfield {
    padding: 5px;
    border: 1px solid #e8eaeb;
    outline: none;
    border-radius: 5px;
    color: #a1b8ca;
}

:where(html[data-pw-admin~="sales-stats"]) .searchfield::placeholder,
:where(html[data-pw-admin~="sales-stats"]) .searchdate::placeholder {
    color: #a1b8ca;
}

:where(html[data-pw-admin~="sales-stats"]) .detailedsalesreport {
    margin-top: 30px;
    width: 100%;
    height: 380px;
    box-sizing: border-box;
    border: 1px solid #e8eaeb;
    border-radius: 20px;
    padding: 10px;
    overflow: scroll;
    overflow-x: scroll;
    overflow-y: scroll;
    font-size: 12px;
}

:where(html[data-pw-admin~="sales-stats"]) .detailedsalesreport-title {
    font-weight: bold;
    display: grid;
    grid-template-columns: auto auto;
}

:where(html[data-pw-admin~="sales-stats"]) .statistics {
    display: grid;
    grid-template-columns: auto auto;
    margin-top: 20px;
}

:where(html[data-pw-admin~="sales-stats"]) .statisticsgraph {
    display: flex;
    overflow: hidden;
    width: 615px;
    height: auto;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

:where(html[data-pw-admin~="sales-stats"]) .statisticsgraph img {
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-views,
:where(html[data-pw-admin~="sales-stats"]) .btn-sales {
    height: 20px;
    width: 70px;
    display: flex;
    align-items: center;
    float: right;
    border: 1px solid #aaabab;
    color: #aaabab;
    border-radius: 25px;
    background: transparent;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.5s;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-views:hover,
:where(html[data-pw-admin~="sales-stats"]) .btn-sales:hover {
    background: #aaabab;
    color: #000;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-container {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
}

:where(html[data-pw-admin~="sales-stats"]) .subsidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    color: #99b2c6;
}

:where(html[data-pw-admin~="sales-stats"]) .homebutton {
    transition: all 0.5s;
}

:where(html[data-pw-admin~="sales-stats"]) .homebutton:hover {
    transform: scale(0.95);
}

:where(html[data-pw-admin~="sales-stats"]) .notifications {
    text-align: left;
    color: #99b2c6;
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .notifications span {
    font-weight: bold;
    font-size: 14px;
}

:where(html[data-pw-admin~="sales-stats"]) .content {
    background-color: #fff;
    width: 80%;
    flex: 1;
    padding: 20px;
    border-radius: 20px;
    height: 100%;
    max-height: 100vh;
}

:where(html[data-pw-admin~="sales-stats"]) .header {
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .headertitle {
    font-weight: bold;
    font-size: 18px;
    color: #012556;
}

:where(html[data-pw-admin~="sales-stats"]) .currentdatetime {
    font-size: 14px;
    color: #aaabab;
}

:where(html[data-pw-admin~="sales-stats"]) .searchcontainer {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
}

:where(html[data-pw-admin~="sales-stats"]) .searchfield {
    width: 140px;
}

:where(html[data-pw-admin~="sales-stats"]) .searchdate {
    width: 80px;
    background: #e8eaeb;
}

:where(html[data-pw-admin~="sales-stats"]) .searchdate,
:where(html[data-pw-admin~="sales-stats"]) .searchfield {
    padding: 5px;
    border: 1px solid #e8eaeb;
    outline: none;
    border-radius: 5px;
    color: #a1b8ca;
}

:where(html[data-pw-admin~="sales-stats"]) .searchfield::placeholder,
:where(html[data-pw-admin~="sales-stats"]) .searchdate::placeholder {
    color: #a1b8ca;
}

:where(html[data-pw-admin~="sales-stats"]) .detailedsalesreport {
    margin-top: 0px;
    width: 100%;
    height: 380px;
    border: 1px solid #e8eaeb;
    border-radius: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}

:where(html[data-pw-admin~="sales-stats"]) .detailedsalesreport-title {
    font-weight: bold;
    display: grid;
    grid-template-columns: auto auto;
}

:where(html[data-pw-admin~="sales-stats"]) .dotyellow,
:where(html[data-pw-admin~="sales-stats"]) .dotblue {
    font-size: 50px;
}

:where(html[data-pw-admin~="sales-stats"]) .dotyellow {
    color: #fdd103;
}

:where(html[data-pw-admin~="sales-stats"]) .dotblue {
    color: #389ae1;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-views,
:where(html[data-pw-admin~="sales-stats"]) .btn-sales {
    height: 20px;
    width: 70px;
    display: flex;
    align-items: center;
    float: right;
    border: 1px solid #aaabab;
    color: #aaabab;
    border-radius: 25px;
    background: transparent;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.5s;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-views:hover,
:where(html[data-pw-admin~="sales-stats"]) .btn-sales:hover {
    background: #aaabab;
    color: #000;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-container {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

:where(html[data-pw-admin~="sales-stats"]) .statistics {
    display: grid;
    grid-template-columns: auto;
    margin-top: 20px;
}

:where(html[data-pw-admin~="sales-stats"]) .statisticslabel {
    width: 270px;
    display: grid;
    justify-content: flex-start;
    grid-template-columns: 30% 70%;
    gap: 15px;
}

:where(html[data-pw-admin~="sales-stats"]) .ui-dashboard-elements {
    border: 1px solid #389ae1;
    width: 150px;
    border-radius: 20px;
    color: #aaabab;
    font-size: 12px;
    padding: 5px;
    outline: none;
}

:where(html[data-pw-admin~="sales-stats"]) .ui-dashboard-elements2 {
    border: 1px solid #389ae1;
    width: 150px;
    border-radius: 20px;
    color: #aaabab;
    font-size: 12px;
    padding: 5px;
    display: none;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel {
    display: grid;
    grid-template-columns: auto auto;
    text-align: left;
    margin-top: 20px;
    width: 200px;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div:nth-child(1) {
    border-right: 1px solid #e7ecf4;
    border-bottom: 1px solid #e7ecf4;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div:nth-child(2) {
    border-bottom: 1px solid #e7ecf4;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div:nth-child(3) {
    border-right: 1px solid #e7ecf4;
    border-bottom: 1px solid #e7ecf4;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div:nth-child(4) {
    border-bottom: 1px solid #e7ecf4;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div:nth-child(5) {
    border-right: 1px solid #e7ecf4;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel label {
    font-size: 11px;
    color: #389ae1;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div span {
    font-weight: bold;
    font-size: 24px;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel div {
    padding: 5px;
}

:where(html[data-pw-admin~="sales-stats"]) .statisticsgraph {
    display: flex;
    overflow: hidden;
    width: 615px;
    height: auto;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

:where(html[data-pw-admin~="sales-stats"]) .statisticsgraph img {
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel2 {
    display: grid;
    grid-template-columns: auto auto auto;
    text-align: center;
    margin-top: 20px;
    width: 100%;
    gap: 10px;
    display: none;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel2 label {
    font-size: 11px;
    color: #389ae1;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel2 div span {
    font-weight: bold;
    font-size: 24px;
}

:where(html[data-pw-admin~="sales-stats"]) .statslabel2 div {
    padding: 5px;
}

:where(html[data-pw-admin~="sales-stats"]) .recent-orders {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    text-align: center;
    background: #fff;
    width: 109.8%;
    margin-left: -41px;
}

:where(html[data-pw-admin~="sales-stats"]) .recent-orders label {
    margin-bottom: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .order-title {
    font-size: 14px;
    color: #389ae1;
    font-weight: bold;
}

:where(html[data-pw-admin~="sales-stats"]) .profilepic {
    border-radius: 50%;
    max-width: 30px;
    max-height: 30px;
    overflow: hidden;
    margin-right: 5px;
}

:where(html[data-pw-admin~="sales-stats"]) .profilepic img {
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .customer-amount {
    color: #389ae1;
    font-weight: bold;
}

:where(html[data-pw-admin~="sales-stats"]) .paid {
    background: #03fdc5;
}

:where(html[data-pw-admin~="sales-stats"]) .pending {
    background: #e3e3e3;
}

:where(html[data-pw-admin~="sales-stats"]) .cancelled {
    background: #fa4e4a;
    color: #fff;
    font-size: 11px;
}

:where(html[data-pw-admin~="sales-stats"]) .recent-orders button {
    border: none;
    border-radius: 5px;
    width: 70px;
    cursor: pointer;
    font-size: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .vote1 {
    font-weight: bold;
}

:where(html[data-pw-admin~="sales-stats"]) .vote2 {
    color: #adc0d0;
}

:where(html[data-pw-admin~="sales-stats"]) .customer-name,
:where(html[data-pw-admin~="sales-stats"]) .customer-product,
:where(html[data-pw-admin~="sales-stats"]) .customer-amount,
:where(html[data-pw-admin~="sales-stats"]) .customer-vendor,
:where(html[data-pw-admin~="sales-stats"]) .customer-status,
:where(html[data-pw-admin~="sales-stats"]) .customer-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    font-size: 12px;
}

/* Hide the radio buttons */
:where(html[data-pw-admin~="sales-stats"]) .tab-radio {
    display: none;
}

/* Display only the active tab content */
:where(html[data-pw-admin~="sales-stats"]) .tab-content {
    display: none;
}

:where(html[data-pw-admin~="sales-stats"]) #tab-dashboard:checked ~ .content #dashboard,
:where(html[data-pw-admin~="sales-stats"]) #tab-users:checked ~ .content #users,
:where(html[data-pw-admin~="sales-stats"]) #tab-settings:checked ~ .content #settings,
:where(html[data-pw-admin~="sales-stats"]) #tab-profile:checked ~ .content #profile,
:where(html[data-pw-admin~="sales-stats"]) #tab-logout:checked ~ .content #logout {
    display: block;
}

:where(html[data-pw-admin~="sales-stats"]) .user-list-header,
:where(html[data-pw-admin~="sales-stats"]) .user-list-row {
    display: grid;
    grid-template-columns: 40px 200px 75px 70px 100px 80px 124px 100px 150px 180px 150px 60px 150px 75px;
    padding: 0 10px;
}
:where(html[data-pw-admin~="sales-stats"]) .user-list-header {
    position: sticky;
    top: 0;
    padding: 0 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .user-list-row:nth-child(even) .user-data {
    background: #eaeff9;
    /* Light gray background for even rows */
}

:where(html[data-pw-admin~="sales-stats"]) .user-list-row:nth-child(odd) .user-data {
    background: #fff;
    /* White background for odd rows */
}

:where(html[data-pw-admin~="sales-stats"]) .user-headers {
    font-weight: bold;
    background-color: #fff;
}

:where(html[data-pw-admin~="sales-stats"]) .user-data,
:where(html[data-pw-admin~="sales-stats"]) .user-headers {
    padding: 5px;
    /* Adjust as needed */
    box-sizing: border-box;
    flex: 1;
    /* Ensures equal width for each cell */
}

:where(html[data-pw-admin~="sales-stats"]) .user-data .edit-btn,
:where(html[data-pw-admin~="sales-stats"]) .user-data .delete-btn {
    display: block;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none !important;
    border-radius: 5px;
    text-align: center;
    margin: 1px;
    height: 25px;
    max-width: 30px;
}

:where(html[data-pw-admin~="sales-stats"]) .btn-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
}

:where(html[data-pw-admin~="sales-stats"]) .user-data .edit-btn img,
:where(html[data-pw-admin~="sales-stats"]) .user-data .delete-btn img {
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .tab {
    overflow: hidden;
    border: none;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: auto;
    z-index: 1000;
}

:where(html[data-pw-admin~="sales-stats"]) .tab button {
    background-color: transparent;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    width: 100%;
    text-align: left;
    color: #fff;
}

:where(html[data-pw-admin~="sales-stats"]) .tab button:hover {
    background-color: #ddd;
}

:where(html[data-pw-admin~="sales-stats"]) .tab button.active {
    background-color: #061796;
    color: #fff;
}

:where(html[data-pw-admin~="sales-stats"]) .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .tabcontent h3 {
    color: #012556;
    text-align: right;
}

:where(html[data-pw-admin~="sales-stats"]) .tabcontent.active {
    display: block;
}

:where(html[data-pw-admin~="sales-stats"]) .hidden {
    display: none;
}

:where(html[data-pw-admin~="sales-stats"]) .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

:where(html[data-pw-admin~="sales-stats"]) .modal-content {
    background-color: #f4f4f4;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
}

:where(html[data-pw-admin~="sales-stats"]) .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 10px;
}

:where(html[data-pw-admin~="sales-stats"]) .close:hover,
:where(html[data-pw-admin~="sales-stats"]) .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

:where(html[data-pw-admin~="sales-stats"]) .modal form {
    max-width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .modal input[type="text"],
:where(html[data-pw-admin~="sales-stats"]) .modal input[type="email"],
:where(html[data-pw-admin~="sales-stats"]) .modal input[type="date"],
:where(html[data-pw-admin~="sales-stats"]) .modal input[type="password"],
:where(html[data-pw-admin~="sales-stats"]) .modal input[type="file"],
:where(html[data-pw-admin~="sales-stats"]) .modal select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

:where(html[data-pw-admin~="sales-stats"]) .modal input[type="submit"] {
    background-color: #053e8b;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 100%;
}

:where(html[data-pw-admin~="sales-stats"]) .modal input[type="submit"]:hover {
    background-color: #f72e1f;
}

:where(html[data-pw-admin~="sales-stats"]) .large-logo {
    height: 75px;
}

:where(html[data-pw-admin~="sales-stats"]) .large-logo img {
    height: 100%;
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
    *:where(html[data-pw-admin~="sales-stats"]),
    :where(html[data-pw-admin~="sales-stats"]) * {
        font-size: 12px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .content {
        background-color: #fff;
        width: 100%;
        flex: 1;
        padding: 20px;
        border-radius: 20px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .header-content {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    :where(html[data-pw-admin~="sales-stats"]) .large-logo img {
        width: 100%;
        height: auto;
    }
}

/* Media Query for Mobile Devices */
@media only screen and (max-width: 480px) {
    :where(html[data-pw-admin~="sales-stats"]) .container {
        background: #fff;
    }

    :where(html[data-pw-admin~="sales-stats"]) .header-content {
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    :where(html[data-pw-admin~="sales-stats"]) .large-logo img {
        width: 100%;
        height: auto;
    }

    :where(html[data-pw-admin~="sales-stats"]) .sidebar {
        height: 100vh;
        width: 160px;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        margin-right: 20px;
        display: none;
    }

    :where(html[data-pw-admin~="sales-stats"]) .header {
        display: grid;
        grid-template-columns: auto;
    }

    :where(html[data-pw-admin~="sales-stats"]) .headertitle {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 20px;
        color: #012556;
    }

    :where(html[data-pw-admin~="sales-stats"]) .searchcontainer {
        width: 100%;
    }

    :where(html[data-pw-admin~="sales-stats"]) .detailedsalesreport {
        margin-top: 30px;
        width: 100%;
        height: 300px;
        border: 0px solid #e8eaeb;
        border-radius: 20px;
        padding: 0px;
        overflow: scroll;
        overflow-x: scroll;
        overflow-y: scroll;
    }

    :where(html[data-pw-admin~="sales-stats"]) .statistics {
        display: grid;
        grid-template-columns: auto;
        margin-top: 20px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .statisticslabel {
        display: none;
    }

    :where(html[data-pw-admin~="sales-stats"]) .statisticsgraph {
        display: flex;
        overflow: hidden;
        width: 100%;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }

    :where(html[data-pw-admin~="sales-stats"]) .ui-dashboard-elements2 {
        border: 1px solid #389ae1;
        width: 150px;
        border-radius: 20px;
        color: #aaabab;
        font-size: 12px;
        padding: 5px;
        display: block;
        margin-top: 10px;
        outline: none;
    }

    :where(html[data-pw-admin~="sales-stats"]) .btn-container {
        display: flex;
        width: 100%;
        justify-content: flex-end;
        margin-top: 13px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .tobehide {
        display: none !important;
    }

    :where(html[data-pw-admin~="sales-stats"]) .statslabel2 {
        display: grid;
        grid-template-columns: auto auto auto;
        text-align: center;
        margin-top: 20px;
        width: 100%;
        gap: 10px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .recent-orders {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        text-align: center;
        background: #fff;
        margin-left: 0px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .profilepic,
    :where(html[data-pw-admin~="sales-stats"]) .profilepic img,
    :where(html[data-pw-admin~="sales-stats"]) .customer-vendor {
        display: none;
    }

    :where(html[data-pw-admin~="sales-stats"]) .recent-orders button {
        border: none;
        border-radius: 5px;
        width: 60px;
        font-size: 10px;
        text-align: center;
    }

    :where(html[data-pw-admin~="sales-stats"]) .customer-name,
    :where(html[data-pw-admin~="sales-stats"]) .customer-product,
    :where(html[data-pw-admin~="sales-stats"]) .customer-amount,
    :where(html[data-pw-admin~="sales-stats"]) .customer-status,
    :where(html[data-pw-admin~="sales-stats"]) .customer-rating {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        font-size: 12px;
    }

    :where(html[data-pw-admin~="sales-stats"]) .content {
        background-color: #fff;
        width: 100%;
        flex: 1;
        padding: 20px;
        border-radius: 20px;
    }
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   ADMIN — EDIT
   ========================================================================== */

/*
 PW-STYLES: edit
 */
:where(html[data-pw-admin~="edit"]) body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 20px;
    color: #012556;
    /* Your theme color */
}

:where(html[data-pw-admin~="edit"]) h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #061796;
    /* Your theme color */
    background: #bde8ff;
    padding: 10px;
}

:where(html[data-pw-admin~="edit"]) form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
}

:where(html[data-pw-admin~="edit"]) .fullname {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

:where(html[data-pw-admin~="edit"]) .fullname input {
    width: 48%;
}

:where(html[data-pw-admin~="edit"]) label {
    font-weight: lighter;
    display: block;
}

:where(html[data-pw-admin~="edit"]) input[type="text"],
:where(html[data-pw-admin~="edit"]) input[type="email"],
:where(html[data-pw-admin~="edit"]) input[type="date"],
:where(html[data-pw-admin~="edit"]) input[type="password"],
:where(html[data-pw-admin~="edit"]) input[type="file"],
:where(html[data-pw-admin~="edit"]) textarea,
:where(html[data-pw-admin~="edit"]) select {
    width: 100%;
    padding: 10px;
    border: 1px solid #bde8ff;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
    box-sizing: border-box;
    color: #012556;
}

:where(html[data-pw-admin~="edit"]) input[type="text"]:focus,
:where(html[data-pw-admin~="edit"]) input[type="email"]:focus,
:where(html[data-pw-admin~="edit"]) input[type="date"]:focus,
:where(html[data-pw-admin~="edit"]) input[type="password"]:focus,
:where(html[data-pw-admin~="edit"]) select:focus {
    border-color: #f72e1f;
    /* Focus color */
    outline: none;
}

:where(html[data-pw-admin~="edit"]) input[type="submit"] {
    background-color: #db0000;
    /* Your theme color */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 16px;
    transition: background-color 0.3s;
    width: 100%;
}

:where(html[data-pw-admin~="edit"]) input[type="submit"]:hover {
    background-color: #081595;
    /* Hover color */
}

:where(html[data-pw-admin~="edit"]) small {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: #666;
}

:where(html[data-pw-admin~="edit"]) .image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

:where(html[data-pw-admin~="edit"]) .current-image {
    width: 100px;
    height: 100px;
    text-align: center;
    margin-bottom: 15px;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0px 0px 10px rgb(0, 0, 0, 0.3);
}

:where(html[data-pw-admin~="edit"]) .current-image img {
    width: 100%;
}

:where(html[data-pw-admin~="edit"]) form a {
    display: block;
    width: 100%;
    background: #0815b0;
    color: #fff;
    padding: 10px;
    text-decoration: none !important;
    margin-top: 5px;
    text-align: center;
    transition: background-color 0.3s;
    border-radius: 5px;
    box-sizing: border-box;
}

:where(html[data-pw-admin~="edit"]) form a:hover {
    background-color: #db0000;
    /* Your theme color */
}

@media (max-width: 600px) {
    :where(html[data-pw-admin~="edit"]) .fullname {
        flex-direction: column;
    }

    :where(html[data-pw-admin~="edit"]) .fullname input {
        width: 100%;
    }
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   ADMIN — ORG_REPORTS
   ========================================================================== */

/*
 PW-STYLES: org-reports
 */
*:where(html[data-pw-admin~="org-reports"]),
:where(html[data-pw-admin~="org-reports"]) * {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

:where(html[data-pw-admin~="org-reports"]) body {
    margin: 0;
    padding: 0;
}

:where(html[data-pw-admin~="org-reports"]) .container {
    max-width: 1000px;
    margin: auto;
    padding: 10px;
}

:where(html[data-pw-admin~="org-reports"]) table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    min-width: 600px;
}

:where(html[data-pw-admin~="org-reports"]) th {
    background-color: #053e8b;
    color: white;
}

:where(html[data-pw-admin~="org-reports"]) th,
:where(html[data-pw-admin~="org-reports"]) td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

:where(html[data-pw-admin~="org-reports"]) tr:nth-child(even) {
    background-color: #eaeff9;
}

:where(html[data-pw-admin~="org-reports"]) tr:nth-child(odd) {
    background-color: #fff;
}

:where(html[data-pw-admin~="org-reports"]) h2 {
    background: #053e8b;
    color: white;
    padding: 10px;
    font-size: 18px;
}

:where(html[data-pw-admin~="org-reports"]) a {
    color: #5ea3ff;
    text-decoration: none;
}

:where(html[data-pw-admin~="org-reports"]) .dl-btn {
    color: #053e8b;
    text-decoration: none;
    background: #fff;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition: all 0.3s ease;
    margin-left: 10px;
}

:where(html[data-pw-admin~="org-reports"]) .dl-btn:hover {
    background: #0760d7;
    color: white;
    transform: translateY(-3px);
}

:where(html[data-pw-admin~="org-reports"]) .dl-btn:active {
    transform: translateY(0px);
}

:where(html[data-pw-admin~="org-reports"]) .responsive-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    width: 100%;
    justify-content: center;
}

:where(html[data-pw-admin~="org-reports"]) .responsive-form select,
:where(html[data-pw-admin~="org-reports"]) .responsive-form input[type="submit"],
:where(html[data-pw-admin~="org-reports"]) .responsive-form a.search_user_btn {
    padding: 8px;
    font-size: 14px;
}

:where(html[data-pw-admin~="org-reports"]) .search_user_btn {
    background-color: #053e8b;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

:where(html[data-pw-admin~="org-reports"]) .search_user_btn:hover {
    background-color: #f72e1f;
}

:where(html[data-pw-admin~="org-reports"]) .table-wrapper {
    overflow-x: auto;
}

@media (max-width: 768px) {
    :where(html[data-pw-admin~="org-reports"]) h2 {
        font-size: 16px;
    }

    :where(html[data-pw-admin~="org-reports"]) th,
    :where(html[data-pw-admin~="org-reports"]) td {
        font-size: 12px;
        padding: 6px;
    }

    :where(html[data-pw-admin~="org-reports"]) .dl-btn,
    :where(html[data-pw-admin~="org-reports"]) .search_user_btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    :where(html[data-pw-admin~="org-reports"]) .responsive-form {
        flex-direction: column;
        align-items: stretch;
    }

    :where(html[data-pw-admin~="org-reports"]) .responsive-form select,
    :where(html[data-pw-admin~="org-reports"]) .responsive-form input[type="submit"],
    :where(html[data-pw-admin~="org-reports"]) .responsive-form a.search_user_btn {
        width: 100%;
    }

    :where(html[data-pw-admin~="org-reports"]) button {
        width: 100%;
        margin-bottom: 10px;
    }
}

/*
 PW-STYLES-END
 */

/* ADMIN — MAYOR-OVERRIDES (template overrides before modern styles) */

/*
 PW-STYLES: mayor-overrides
 */

:where(html[data-pw-admin~="mayor-overrides"]) body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

:where(html[data-pw-admin~="mayor-overrides"]) select,
:where(html[data-pw-admin~="mayor-overrides"]) input[type="text"],
:where(html[data-pw-admin~="mayor-overrides"]) input[type="submit"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border-radius: 4px;
}

:where(html[data-pw-admin~="mayor-overrides"]) label {
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
    margin-left: 10px;
}

:where(html[data-pw-admin~="mayor-overrides"]) .form-container {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
}

:where(html[data-pw-admin~="mayor-overrides"]) input[type="submit"] {
    background-color: #f72e1f;
    cursor: pointer;
}

/*
 PW-STYLES-END
 */

/* ADMIN — REPORT-OVERRIDES (template overrides before modern styles) */

/*
 PW-STYLES: report-overrides
 */

@media print {
    :where(html[data-pw-admin~="report-overrides"]) .dl-btn,
    :where(html[data-pw-admin~="report-overrides"]) .search_user_btn {
        display: none !important;
    }

    :where(html[data-pw-admin~="report-overrides"]) body {
        background: #fff;
    }

    :where(html[data-pw-admin~="report-overrides"]) #tableContainer {
        background-color: white;
        color: black;
    }

    :where(html[data-pw-admin~="report-overrides"]) .responsive-form {
        display: none !important;
    }
}

/*
 PW-STYLES-END
 */

/* ==========================================================================
   ADMIN — ADMIN-MODERN
   ========================================================================== */

/*
 PW-STYLES: modern
 */
:root:where([data-pw-admin~="modern"]) {
    --admin-navy: #071d49;
    --admin-blue: #0b3f91;
    --admin-cyan: #1bb8d6;
    --admin-red: #eb493c;
    --admin-bg: #f3f6fa;
    --admin-card: #ffffff;
    --admin-text: #14243d;
    --admin-muted: #6c7b90;
    --admin-line: #dce5ef;
    --admin-radius: 16px;
    --admin-shadow: 0 12px 34px rgba(7, 29, 73, 0.09);
}

*:where(html[data-pw-admin~="modern"]),
:where(html[data-pw-admin~="modern"]) *,
*:where(html[data-pw-admin~="modern"])::before,
:where(html[data-pw-admin~="modern"]) *::before,
*:where(html[data-pw-admin~="modern"])::after,
:where(html[data-pw-admin~="modern"]) *::after {
    box-sizing: border-box;
}
html:where([data-pw-admin~="modern"]) {
    min-height: 100%;
    background: var(--admin-bg);
}
:where(html[data-pw-admin~="modern"]) body.admin-app {
    min-height: 100vh;
    margin: 0;
    color: var(--admin-text);
    background: var(--admin-bg) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}
:where(html[data-pw-admin~="modern"]) body.admin-standalone {
    padding: clamp(18px, 4vw, 48px) !important;
}
:where(html[data-pw-admin~="modern"]) .admin-standalone > .container,
:where(html[data-pw-admin~="modern"]) .admin-standalone > form,
:where(html[data-pw-admin~="modern"]) .admin-standalone > main {
    width: min(100%, 1280px) !important;
    margin-inline: auto !important;
}
:where(html[data-pw-admin~="modern"]) .admin-standalone > .container {
    padding: clamp(16px, 3vw, 30px) !important;
    border: 1px solid var(--admin-line);
    border-radius: 20px;
    background: #fff !important;
    box-shadow: var(--admin-shadow);
}
:where(html[data-pw-admin~="modern"]) body.admin-app * {
    font-weight: 400 !important;
}
:where(html[data-pw-admin~="modern"]) body.admin-app strong,
:where(html[data-pw-admin~="modern"]) body.admin-app h1,
:where(html[data-pw-admin~="modern"]) body.admin-app h2,
:where(html[data-pw-admin~="modern"]) body.admin-app h3,
:where(html[data-pw-admin~="modern"]) body.admin-app h4,
:where(html[data-pw-admin~="modern"]) body.admin-app th,
:where(html[data-pw-admin~="modern"]) body.admin-app .tablinks,
:where(html[data-pw-admin~="modern"]) body.admin-app input[type="submit"],
:where(html[data-pw-admin~="modern"]) body.admin-app button {
    font-weight: 700 !important;
}

:where(html[data-pw-admin~="modern"]) .admin-app > .\31 st-container {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: 264px;
    height: 92px;
    padding: 0;
    background: var(--admin-navy);
}
:where(html[data-pw-admin~="modern"]) .admin-app .header-content {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px;
    width: 264px !important;
    height: 92px;
    padding: 12px 20px !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .large-logo {
    width: 210px;
    max-width: 100%;
    height: auto !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .large-logo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
:where(html[data-pw-admin~="modern"]) .admin-app .large-logo-text h1 {
    margin: 0;
    font-size: 0.75rem !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

:where(html[data-pw-admin~="modern"]) .admin-app > .container {
    display: block !important;
    width: 100%;
    min-height: 100vh;
    padding: 0 !important;
    background: var(--admin-bg) !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .sidebar {
    position: fixed !important;
    inset: 92px auto 0 0 !important;
    z-index: 45;
    width: 264px !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 12px 24px;
    overflow-y: auto;
    color: #c9d7eb;
    background: linear-gradient(180deg, var(--admin-navy), #09265b) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
:where(html[data-pw-admin~="modern"]) .admin-app .sidebar::-webkit-scrollbar {
    width: 6px;
}
:where(html[data-pw-admin~="modern"]) .admin-app .sidebar::-webkit-scrollbar-thumb {
    border: 0;
    background: rgba(255, 255, 255, 0.2);
}
:where(html[data-pw-admin~="modern"]) .admin-nav-tools {
    padding: 0 4px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin-bottom: 10px;
}
:where(html[data-pw-admin~="modern"]) .admin-nav-label {
    display: block;
    margin: 0 4px 8px;
    color: #7f9bc3 !important;
    font-size: 0.62rem;
    font-weight: 800 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
:where(html[data-pw-admin~="modern"]) .admin-nav-search {
    width: 100%;
    height: 40px;
    padding: 9px 12px 9px 36px !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    outline: 0;
    background: rgba(255, 255, 255, 0.07)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238da8cc' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E")
        no-repeat 12px center !important;
    font-size: 0.78rem;
}
:where(html[data-pw-admin~="modern"]) .admin-nav-search::placeholder {
    color: #8da8cc;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tab {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    overflow: visible !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks {
    position: relative;
    width: 100% !important;
    min-height: 43px;
    padding: 10px 12px 10px 42px !important;
    color: #b9c9de !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 0.78rem !important;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks::before {
    content: "◈";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6482ad;
    font-size: 0.9rem;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks:nth-child(1)::before {
    content: "▦";
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks:nth-child(2)::before {
    content: "●";
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks:nth-child(3)::before {
    content: "◆";
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks:nth-child(4)::before {
    content: "★";
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks:last-child::before {
    content: "↪";
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.07) !important;
    transform: translateX(2px);
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks.active {
    color: #fff !important;
    background: linear-gradient(100deg, #0d4ca5, #117ca2) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks.active::before {
    color: #74dced;
}

:where(html[data-pw-admin~="modern"]) .admin-app .content {
    width: auto !important;
    min-height: 100vh;
    max-height: none !important;
    margin: 0 0 0 264px;
    padding: 0 34px 42px !important;
    border-radius: 0 !important;
    background: var(--admin-bg) !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .content > .header {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    min-height: 76px;
    margin: 0 -34px 24px !important;
    padding: 12px 34px;
    border-bottom: 1px solid var(--admin-line);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
}
:where(html[data-pw-admin~="modern"]) .admin-app .searchcontainer img {
    max-width: 190px !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .currentdatetime {
    color: var(--admin-muted) !important;
    font-size: 0.7rem !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tabcontent {
    display: none;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tabcontent.active {
    display: block;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tabcontent > h3 {
    margin: 0 0 20px !important;
    color: var(--admin-text) !important;
    text-align: left !important;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -0.035em;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tabcontent > h3::after {
    content: "Manage and monitor PollWatch operations";
    display: block;
    margin-top: 5px;
    color: var(--admin-muted);
    font-size: 0.75rem;
    font-weight: 400 !important;
    letter-spacing: 0;
}

:where(html[data-pw-admin~="modern"]) .admin-app .detailedsalesreport {
    width: 100% !important;
    height: auto !important;
    min-height: 190px;
    max-height: min(68vh, 760px);
    margin: 0 0 20px !important;
    padding: 20px !important;
    overflow: auto !important;
    border: 1px solid var(--admin-line) !important;
    border-radius: var(--admin-radius) !important;
    background: var(--admin-card) !important;
    box-shadow: var(--admin-shadow);
}
:where(html[data-pw-admin~="modern"]) .admin-app .detailedsalesreport-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
:where(html[data-pw-admin~="modern"]) .admin-app .detailedsalesreport-title h4 {
    margin: 0;
    font-size: 0.95rem;
}

:where(html[data-pw-admin~="modern"]) .admin-app .responsive-form,
:where(html[data-pw-admin~="modern"]) .admin-app .search_user {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 10px !important;
    width: 100%;
    max-width: none !important;
    margin: 0 0 18px !important;
    padding: 14px !important;
    border: 1px solid var(--admin-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(7, 29, 73, 0.05) !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app input[type="text"],
:where(html[data-pw-admin~="modern"]) .admin-app input[type="email"],
:where(html[data-pw-admin~="modern"]) .admin-app input[type="password"],
:where(html[data-pw-admin~="modern"]) .admin-app input[type="date"],
:where(html[data-pw-admin~="modern"]) .admin-app input[type="file"],
:where(html[data-pw-admin~="modern"]) .admin-app select,
:where(html[data-pw-admin~="modern"]) .admin-app textarea,
:where(html[data-pw-admin~="modern"]) .admin-app .select2-container {
    flex: 1 1 190px !important;
    width: auto !important;
    max-width: 280px !important;
}
:where(html[data-pw-admin~="modern"])
    .admin-app
    input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
:where(html[data-pw-admin~="modern"]) .admin-app select,
:where(html[data-pw-admin~="modern"]) .admin-app textarea,
:where(html[data-pw-admin~="modern"]) .admin-app .select2-selection {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    color: var(--admin-text) !important;
    border: 1px solid #cbd8e6 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    font-size: 0.78rem !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app input:focus,
:where(html[data-pw-admin~="modern"]) .admin-app select:focus,
:where(html[data-pw-admin~="modern"]) .admin-app textarea:focus {
    outline: 3px solid rgba(27, 184, 214, 0.16) !important;
    border-color: var(--admin-cyan) !important;
    background: #fff !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .search_user_btn,
:where(html[data-pw-admin~="modern"]) .admin-app input[type="submit"],
:where(html[data-pw-admin~="modern"]) .admin-app button[type="submit"],
:where(html[data-pw-admin~="modern"]) .admin-app .dl-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 100px;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 15px !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--admin-blue) !important;
    box-shadow: none;
    text-decoration: none !important;
    font-size: 0.75rem !important;
    cursor: pointer;
}
:where(html[data-pw-admin~="modern"]) .admin-app .search_user_btn:hover,
:where(html[data-pw-admin~="modern"]) .admin-app input[type="submit"]:hover {
    background: #092f6e !important;
    transform: translateY(-1px);
}
:where(html[data-pw-admin~="modern"]) .admin-app a.search_user_btn[href="index.php"] {
    color: var(--admin-blue) !important;
    border: 1px solid var(--admin-line) !important;
    background: #fff !important;
}

:where(html[data-pw-admin~="modern"]) .admin-app table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.76rem;
}
:where(html[data-pw-admin~="modern"]) .admin-app th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 10px;
    color: #fff !important;
    background: var(--admin-navy) !important;
    text-align: left;
}
:where(html[data-pw-admin~="modern"]) .admin-app th:first-child {
    border-radius: 10px 0 0 0;
}
:where(html[data-pw-admin~="modern"]) .admin-app th:last-child {
    border-radius: 0 10px 0 0;
}
:where(html[data-pw-admin~="modern"]) .admin-app td {
    padding: 10px;
    border-bottom: 1px solid #e7edf4;
    color: var(--admin-text) !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app tbody tr:hover td {
    background: #eff8fb;
}
:where(html[data-pw-admin~="modern"]) .admin-app .user-list,
:where(html[data-pw-admin~="modern"]) .admin-app .organization-list,
:where(html[data-pw-admin~="modern"]) .admin-app [class$="-list"] {
    min-width: max-content;
}
:where(html[data-pw-admin~="modern"]) .admin-app .user-list-header,
:where(html[data-pw-admin~="modern"]) .admin-app .organization-list-header,
:where(html[data-pw-admin~="modern"]) .admin-app .incident-list-header {
    z-index: 5;
    color: #fff;
    background: var(--admin-navy);
    border-radius: 10px 10px 0 0;
}
:where(html[data-pw-admin~="modern"]) .admin-app .user-headers,
:where(html[data-pw-admin~="modern"]) .admin-app .organization-headers,
:where(html[data-pw-admin~="modern"]) .admin-app .incident-headers {
    min-height: 42px;
    color: #fff !important;
    background: transparent !important;
    align-items: center;
}
:where(html[data-pw-admin~="modern"]) .admin-app .user-data,
:where(html[data-pw-admin~="modern"]) .admin-app .organization-data,
:where(html[data-pw-admin~="modern"]) .admin-app .incident-data {
    padding: 9px 7px !important;
    border-bottom: 1px solid #e3ebf3;
    font-size: 0.7rem !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .user-list-row:nth-child(even) .user-data,
:where(html[data-pw-admin~="modern"]) .admin-app .organization-list-row:nth-child(even) .organization-data,
:where(html[data-pw-admin~="modern"]) .admin-app .incident-list-row:nth-child(even) .incident-data {
    background: #f6f9fc !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .edit-btn,
:where(html[data-pw-admin~="modern"]) .admin-app .delete-btn {
    width: 30px !important;
    height: 30px !important;
    padding: 6px !important;
    border-radius: 8px !important;
}

:where(html[data-pw-admin~="modern"]) .admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
:where(html[data-pw-admin~="modern"]) .admin-stat-card {
    position: relative;
    min-height: 116px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 20px rgba(7, 29, 73, 0.06);
}
:where(html[data-pw-admin~="modern"]) .admin-stat-card::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    right: -25px;
    top: -25px;
    border: 14px solid rgba(27, 184, 214, 0.1);
    border-radius: 50%;
}
:where(html[data-pw-admin~="modern"]) .admin-stat-card span {
    display: block;
    color: var(--admin-muted) !important;
    font-size: 0.64rem;
    font-weight: 800 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
:where(html[data-pw-admin~="modern"]) .admin-stat-card strong {
    display: block;
    margin: 7px 0 3px;
    color: var(--admin-navy) !important;
    font-size: 1.85rem;
    letter-spacing: -0.04em;
}
:where(html[data-pw-admin~="modern"]) .admin-stat-card small {
    color: #7690aa !important;
    font-size: 0.66rem;
}
:where(html[data-pw-admin~="modern"]) .admin-dashboard-panel {
    display: grid;
    grid-template-columns: minmax(240px, 0.7fr) minmax(400px, 1.3fr);
    gap: 18px;
}
:where(html[data-pw-admin~="modern"]) .admin-dashboard-panel > * {
    min-width: 0;
}
:where(html[data-pw-admin~="modern"]) .admin-app .statistics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px;
    margin: 0 !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .statisticslabel {
    width: 100% !important;
    grid-template-columns: 58px 1fr !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f6f9fc;
}
:where(html[data-pw-admin~="modern"]) .admin-app .statisticsgraph {
    width: 100% !important;
    min-width: 0 !important;
    height: 380px !important;
}

:where(html[data-pw-admin~="modern"]) .admin-app .modal {
    z-index: 1000 !important;
    padding: 24px;
    background: rgba(5, 18, 45, 0.64) !important;
    backdrop-filter: blur(5px);
}
:where(html[data-pw-admin~="modern"]) .admin-app .modal-content {
    width: min(100%, 680px) !important;
    max-height: calc(100vh - 48px);
    margin: auto !important;
    overflow: auto;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}
:where(html[data-pw-admin~="modern"]) .admin-app .receiver {
    top: 24px !important;
    border: 1px solid var(--admin-line);
    border-radius: 12px !important;
    box-shadow: var(--admin-shadow) !important;
}

:where(html[data-pw-admin~="modern"]) .admin-empty-state {
    padding: 40px 20px;
    color: var(--admin-muted);
    text-align: center;
}
:where(html[data-pw-admin~="modern"]) .mobile-menu-toggle {
    box-shadow: 0 8px 18px rgba(7, 29, 73, 0.25);
}

:where(html[data-pw-admin~="modern"]) body.admin-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 80% 15%, rgba(27, 184, 214, 0.25), transparent 28rem),
        linear-gradient(145deg, #05183e, #0b3f91) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}
:where(html[data-pw-admin~="modern"]) .admin-login form {
    position: relative;
    width: min(100%, 440px);
    margin: 0;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background: rgba(8, 31, 77, 0.76);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
}
:where(html[data-pw-admin~="modern"]) .admin-login form::before {
    content: "Secure administration portal";
    display: block;
    margin: 4px 0 26px;
    color: #91ddeb;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
}
:where(html[data-pw-admin~="modern"]) .admin-login form > img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 10px;
    object-fit: contain;
}
:where(html[data-pw-admin~="modern"]) .admin-login form > span {
    display: block;
    margin: 0 0 4px;
    text-align: center;
    font-size: 1.6rem !important;
    letter-spacing: -0.03em;
}
:where(html[data-pw-admin~="modern"]) .admin-login input {
    width: 100%;
    min-height: 50px;
    margin: 0 0 12px;
    padding: 12px 15px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;
    outline: 0;
    background: rgba(255, 255, 255, 0.08);
}
:where(html[data-pw-admin~="modern"]) .admin-login input::placeholder {
    color: #aebed5;
}
:where(html[data-pw-admin~="modern"]) .admin-login input:focus {
    border-color: #54d4e9;
    box-shadow: 0 0 0 4px rgba(84, 212, 233, 0.13);
}
:where(html[data-pw-admin~="modern"]) .admin-login input[type="submit"] {
    color: #072354;
    border: 0;
    background: linear-gradient(135deg, #67ddef, #c0f5f8);
    font-weight: 800;
    cursor: pointer;
}
:where(html[data-pw-admin~="modern"]) .admin-login input[type="submit"]:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

@media (max-width: 1100px) {
    :where(html[data-pw-admin~="modern"]) .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    :where(html[data-pw-admin~="modern"]) .admin-dashboard-panel {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    :where(html[data-pw-admin~="modern"]) .admin-app > .\31 st-container {
        position: relative;
        width: 100%;
        height: 76px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .header-content {
        width: 100% !important;
        height: 76px;
        padding: 8px 20px 8px 70px !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .large-logo {
        width: 180px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .sidebar {
        inset: 0 auto 0 0 !important;
        z-index: 100;
        transform: translateX(-105%);
        width: min(290px, 86vw) !important;
        padding-top: 22px;
        box-shadow: 16px 0 45px rgba(0, 0, 0, 0.28);
        transition: transform 0.24s ease;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .sidebar.active {
        display: block !important;
        transform: translateX(0);
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .content {
        margin-left: 0;
        padding: 0 18px 32px !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .content > .header {
        margin-inline: -18px !important;
        padding-inline: 18px;
        min-height: 64px;
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle {
        display: block !important;
        top: 18px !important;
        left: 16px !important;
        width: 42px !important;
        height: 42px !important;
    }
}
@media (max-width: 600px) {
    :where(html[data-pw-admin~="modern"]) .admin-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-stat-card {
        min-height: 100px;
        padding: 14px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-stat-card strong {
        font-size: 1.55rem;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .content {
        padding-inline: 12px !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .content > .header {
        margin-inline: -12px !important;
        padding-inline: 12px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .searchcontainer img {
        max-width: 145px !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .currentdatetime {
        display: none;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .responsive-form,
    :where(html[data-pw-admin~="modern"]) .admin-app .search_user {
        padding: 10px !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app input[type="text"],
    :where(html[data-pw-admin~="modern"]) .admin-app select,
    :where(html[data-pw-admin~="modern"]) .admin-app .select2-container {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .detailedsalesreport {
        padding: 12px !important;
        max-height: 64vh;
    }
    :where(html[data-pw-admin~="modern"]) .admin-login form {
        padding: 30px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *:where(html[data-pw-admin~="modern"]),
    :where(html[data-pw-admin~="modern"]) *,
    *:where(html[data-pw-admin~="modern"])::before,
    :where(html[data-pw-admin~="modern"]) *::before,
    *:where(html[data-pw-admin~="modern"])::after,
    :where(html[data-pw-admin~="modern"]) *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}
@media print {
    :where(html[data-pw-admin~="modern"]) .admin-app .sidebar,
    :where(html[data-pw-admin~="modern"]) .admin-app > .\31 st-container,
    :where(html[data-pw-admin~="modern"]) .admin-app .content > .header,
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle,
    :where(html[data-pw-admin~="modern"]) .admin-nav-tools {
        display: none !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .content {
        margin: 0 !important;
        padding: 0 !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .detailedsalesreport {
        max-height: none;
        overflow: visible !important;
        box-shadow: none;
    }
}

/* Notification toasts */
:where(html[data-pw-admin~="modern"]) .admin-toast-region {
    position: fixed;
    z-index: 1400;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: grid;
    gap: 12px;
    width: min(390px, calc(100vw - 36px));
    pointer-events: none;
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-toast {
    --toast-accent: #1594b6;
    --toast-soft: #eaf7fb;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 76px;
    padding: 13px 46px 16px 14px;
    overflow: hidden;
    color: #173459;
    border: 1px solid rgba(23, 52, 89, 0.12);
    border-left: 4px solid var(--toast-accent);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
        0 18px 48px rgba(5, 31, 74, 0.2),
        0 2px 8px rgba(5, 31, 74, 0.08);
    opacity: 0;
    transform: translateX(28px) scale(0.98);
    transition:
        opacity 0.24s ease,
        transform 0.24s ease;
    pointer-events: auto;
    backdrop-filter: blur(18px);
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-toast.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-toast.is-leaving {
    opacity: 0;
    transform: translateX(28px) scale(0.98);
}
:where(html[data-pw-admin~="modern"]) .admin-toast-success {
    --toast-accent: #0a9d72 !important;
    --toast-soft: #e7f8f2 !important;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-error {
    --toast-accent: #dc3f4d !important;
    --toast-soft: #fff0f1 !important;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-warning {
    --toast-accent: #e49a12 !important;
    --toast-soft: #fff7e5 !important;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--toast-accent);
    border-radius: 12px;
    background: var(--toast-soft);
    font-size: 1.08rem;
    font-weight: 900;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
    line-height: 1.35;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-copy strong {
    color: #0b2d62;
    font-size: 0.78rem;
    font-weight: 850;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-copy > span {
    color: #5a6e87;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #71839a;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.15rem;
    cursor: pointer;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-close:hover,
:where(html[data-pw-admin~="modern"]) .admin-toast-close:focus-visible {
    color: #173459;
    background: #eef4f8;
    outline: none;
}
:where(html[data-pw-admin~="modern"]) .admin-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--toast-accent);
    transform-origin: left;
    animation: admin-toast-countdown 6s linear forwards;
}
@keyframes admin-toast-countdown {
    to {
        transform: scaleX(0);
    }
}
@media (max-width: 600px) {
    :where(html[data-pw-admin~="modern"]) .admin-toast-region {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        left: 12px;
        width: auto;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .admin-toast {
        min-height: 70px;
        border-radius: 14px;
    }
}

/* v5 responsive navigation and working section search */
:where(html[data-pw-admin~="modern"]) .admin-app {
    overflow-x: hidden;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tablinks[hidden] {
    display: none !important;
}
:where(html[data-pw-admin~="modern"]) .admin-nav-search:focus {
    border-color: rgba(91, 216, 235, 0.72) !important;
    background-color: rgba(255, 255, 255, 0.11) !important;
    box-shadow: 0 0 0 4px rgba(27, 184, 214, 0.12);
}
:where(html[data-pw-admin~="modern"]) .admin-nav-search-status {
    min-height: 14px;
    margin: 7px 4px 0;
    color: #91aacd !important;
    font-size: 0.62rem;
    line-height: 1.35;
}
:where(html[data-pw-admin~="modern"]) .admin-nav-search-status:empty {
    display: none;
}
:where(html[data-pw-admin~="modern"]) .admin-nav-search-status.is-empty {
    color: #ffbdba !important;
}
:where(html[data-pw-admin~="modern"]) .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(3, 15, 38, 0.58);
    opacity: 0;
    visibility: hidden;
    cursor: default;
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease;
    backdrop-filter: blur(3px);
}
:where(html[data-pw-admin~="modern"]) .admin-sidebar-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 900px) {
    :where(html[data-pw-admin~="modern"]) body.admin-app.sidebar-open {
        overflow: hidden;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .sidebar {
        inset: 0 auto 0 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-direction: column;
        width: min(320px, 88vw) !important;
        height: 100dvh !important;
        padding: 20px 14px 28px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0 22px 22px 0;
        box-shadow: 22px 0 60px rgba(1, 14, 38, 0.36);
        transform: translateX(-105%);
        visibility: hidden;
        transition:
            transform 0.24s ease,
            visibility 0.24s ease !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .sidebar.active {
        transform: translateX(0);
        visibility: visible;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-tools {
        position: sticky;
        top: -20px;
        z-index: 2;
        margin: -20px -14px 10px;
        padding: 22px 64px 16px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(7, 29, 73, 0.96);
        backdrop-filter: blur(15px);
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-label {
        margin-left: 0;
        color: #74dced !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-search {
        height: 44px;
        padding-right: 12px !important;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .tab {
        gap: 5px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .tablinks {
        min-height: 46px;
        font-size: 0.76rem !important;
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle {
        z-index: 1002 !important;
        top: max(16px, env(safe-area-inset-top)) !important;
        left: 16px !important;
        width: 44px !important;
        height: 44px !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 13px !important;
        background: linear-gradient(145deg, #0a326f, #0b5797) !important;
        box-shadow: 0 10px 28px rgba(5, 28, 70, 0.26) !important;
        transition:
            left 0.24s ease,
            background 0.18s ease,
            transform 0.18s ease !important;
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle:hover {
        transform: translateY(-1px);
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle.is-open {
        left: min(calc(88vw - 58px), 262px) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle.is-open::before {
        width: 21px;
        height: 2px;
        box-shadow: none;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 21px;
        height: 2px;
        background: #fff;
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-45deg);
        transition: opacity 0.18s ease;
    }
    :where(html[data-pw-admin~="modern"]) .mobile-menu-toggle.is-open::after {
        opacity: 1;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .content {
        min-width: 0 !important;
        overflow-x: hidden;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .detailedsalesreport {
        max-width: 100%;
    }
}

@media (min-width: 901px) {
    :where(html[data-pw-admin~="modern"]) .admin-sidebar-backdrop {
        display: none;
    }
}

/* v6 system control center */
:where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-link[href*="system-control"]::before {
    content: "⚙";
}
:where(html[data-pw-admin~="modern"]) .system-control-shell {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}
:where(html[data-pw-admin~="modern"]) .system-control-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 190px;
    padding: clamp(24px, 4vw, 42px);
    overflow: hidden;
    color: #fff;
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 10%, rgba(42, 202, 226, 0.35), transparent 19rem),
        linear-gradient(130deg, #071d49, #0c4f99);
    box-shadow: 0 20px 48px rgba(7, 29, 73, 0.18);
}
:where(html[data-pw-admin~="modern"]) .system-control-hero::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -90px;
    width: 240px;
    height: 240px;
    border: 34px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}
:where(html[data-pw-admin~="modern"]) .system-control-hero > * {
    position: relative;
    z-index: 1;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-control-hero h4 {
    max-width: 720px;
    margin: 8px 0 10px;
    color: #fff !important;
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    letter-spacing: -0.04em;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-control-hero p {
    max-width: 720px;
    margin: 0;
    color: #c8d8ed !important;
    line-height: 1.65;
    font-size: 0.82rem;
}
:where(html[data-pw-admin~="modern"]) .system-eyebrow {
    display: block;
    color: #68d7e8 !important;
    font-size: 0.63rem;
    font-weight: 850 !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
:where(html[data-pw-admin~="modern"]) .system-overview-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    color: #e8fff9 !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.72rem;
    font-weight: 800 !important;
    backdrop-filter: blur(10px);
}
:where(html[data-pw-admin~="modern"]) .system-overview-status span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #27d39a;
    box-shadow: 0 0 0 6px rgba(39, 211, 154, 0.13);
}
:where(html[data-pw-admin~="modern"]) .system-overview-status.is-warning span {
    background: #ffc247;
    box-shadow: 0 0 0 6px rgba(255, 194, 71, 0.14);
}

:where(html[data-pw-admin~="modern"]) .system-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}
:where(html[data-pw-admin~="modern"]) .system-health-grid article {
    min-height: 112px;
    padding: 17px;
    border: 1px solid var(--admin-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(7, 29, 73, 0.06);
}
:where(html[data-pw-admin~="modern"]) .system-health-grid span,
:where(html[data-pw-admin~="modern"]) .system-health-grid small {
    display: block;
    color: var(--admin-muted) !important;
}
:where(html[data-pw-admin~="modern"]) .system-health-grid span {
    font-size: 0.62rem;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
:where(html[data-pw-admin~="modern"]) .system-health-grid strong {
    display: block;
    margin: 9px 0 5px;
    color: var(--admin-navy) !important;
    font-size: 1.45rem;
}
:where(html[data-pw-admin~="modern"]) .system-health-grid small {
    font-size: 0.65rem;
}

:where(html[data-pw-admin~="modern"]) .admin-app .system-control-form {
    display: grid !important;
    gap: 18px;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
:where(html[data-pw-admin~="modern"]) .system-control-card {
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--admin-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(7, 29, 73, 0.07);
}
:where(html[data-pw-admin~="modern"]) .system-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-section-heading h4 {
    margin: 5px 0 0;
    color: var(--admin-navy) !important;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
}
:where(html[data-pw-admin~="modern"]) .system-section-note {
    color: #7890aa !important;
    font-size: 0.66rem;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 10px;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 16px;
    border: 1px solid #e2eaf2;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-card:hover {
    border-color: #b8dbe7;
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(7, 29, 73, 0.06);
}
:where(html[data-pw-admin~="modern"]) .system-toggle-copy {
    display: grid;
    gap: 5px;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-copy strong {
    color: #19385f !important;
    font-size: 0.76rem;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-copy small {
    color: #6f8299 !important;
    font-size: 0.65rem;
    line-height: 1.45;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
:where(html[data-pw-admin~="modern"]) .system-switch {
    position: relative;
    width: 44px;
    height: 25px;
    border-radius: 999px;
    background: #c8d3df;
    transition: background 0.18s ease;
}
:where(html[data-pw-admin~="modern"]) .system-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(8, 29, 64, 0.22);
    transition: transform 0.18s ease;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-card input:checked + .system-switch {
    background: linear-gradient(100deg, #0b64ad, #19a7c4);
}
:where(html[data-pw-admin~="modern"]) .system-toggle-card input:checked + .system-switch::after {
    transform: translateX(19px);
}
:where(html[data-pw-admin~="modern"]) .system-toggle-card input:focus-visible + .system-switch {
    outline: 3px solid rgba(27, 184, 214, 0.24);
    outline-offset: 3px;
}
:where(html[data-pw-admin~="modern"]) .system-toggle-critical {
    background: #fff9ed;
    border-color: #f2dca8;
}

:where(html[data-pw-admin~="modern"]) .system-announcement-fields {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px;
}
:where(html[data-pw-admin~="modern"]) .system-announcement-fields label {
    display: grid;
    align-content: start;
    gap: 7px;
}
:where(html[data-pw-admin~="modern"]) .system-announcement-fields label > span {
    color: #385372 !important;
    font-size: 0.7rem;
    font-weight: 800 !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-announcement-fields select,
:where(html[data-pw-admin~="modern"]) .admin-app .system-announcement-fields textarea {
    width: 100% !important;
    margin: 0 !important;
    color: #173459 !important;
    border: 1px solid #cfdae6 !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
    font-size: 0.76rem !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-announcement-fields select {
    min-height: 46px;
    padding: 10px 12px !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-announcement-fields textarea {
    min-height: 116px;
    padding: 13px !important;
    resize: vertical;
    line-height: 1.55;
}
:where(html[data-pw-admin~="modern"]) .system-control-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 0;
}
:where(html[data-pw-admin~="modern"]) .admin-app .system-control-actions button {
    width: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    cursor: pointer;
}
:where(html[data-pw-admin~="modern"]) .system-primary-action {
    color: #fff !important;
    background: linear-gradient(100deg, #0b438f, #0b789e) !important;
    box-shadow: 0 9px 20px rgba(11, 67, 143, 0.2);
}
:where(html[data-pw-admin~="modern"]) .system-secondary-action {
    color: #0a4a83 !important;
    background: #e8f4f8 !important;
}
:where(html[data-pw-admin~="modern"]) .system-danger-action {
    color: #a72b37 !important;
    background: #fff0f1 !important;
}
:where(html[data-pw-admin~="modern"]) .system-control-actions button:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

:where(html[data-pw-admin~="modern"]) .system-record-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
}
:where(html[data-pw-admin~="modern"]) .system-record-grid article {
    padding: 15px;
    border-radius: 12px;
    background: #f4f8fb;
    text-align: center;
}
:where(html[data-pw-admin~="modern"]) .system-record-grid strong {
    display: block;
    color: #0a438f !important;
    font-size: 1.35rem;
}
:where(html[data-pw-admin~="modern"]) .system-record-grid span {
    display: block;
    margin-top: 5px;
    color: #6b7f97 !important;
    font-size: 0.64rem;
}
:where(html[data-pw-admin~="modern"]) .system-audit-table {
    width: 100%;
    overflow: auto;
    border: 1px solid #e1e9f1;
    border-radius: 13px;
}
:where(html[data-pw-admin~="modern"]) .system-audit-table table {
    min-width: 820px;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
:where(html[data-pw-admin~="modern"]) .system-audit-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px !important;
    color: #fff !important;
    background: #0a326f !important;
    font-size: 0.66rem !important;
}
:where(html[data-pw-admin~="modern"]) .system-audit-table td {
    padding: 11px !important;
    color: #526983 !important;
    font-size: 0.64rem !important;
}
:where(html[data-pw-admin~="modern"]) .system-audit-action {
    display: inline-flex;
    padding: 4px 8px;
    color: #0b5b90 !important;
    border-radius: 999px;
    background: #e8f4f8;
    text-transform: capitalize;
}
:where(html[data-pw-admin~="modern"]) .system-empty-audit {
    padding: 28px !important;
    text-align: center;
}

@media (max-width: 1100px) {
    :where(html[data-pw-admin~="modern"]) .system-health-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    :where(html[data-pw-admin~="modern"]) .system-record-grid {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }
}
@media (max-width: 720px) {
    :where(html[data-pw-admin~="modern"]) .system-control-hero {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
    }
    :where(html[data-pw-admin~="modern"]) .system-toggle-grid,
    :where(html[data-pw-admin~="modern"]) .system-announcement-fields {
        grid-template-columns: 1fr;
    }
    :where(html[data-pw-admin~="modern"]) .system-record-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    :where(html[data-pw-admin~="modern"]) .system-control-actions {
        flex-direction: column;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .system-control-actions button {
        width: 100% !important;
    }
}
@media (max-width: 440px) {
    :where(html[data-pw-admin~="modern"]) .system-health-grid {
        grid-template-columns: 1fr 1fr;
    }
    :where(html[data-pw-admin~="modern"]) .system-health-grid article {
        min-height: 100px;
        padding: 13px;
    }
    :where(html[data-pw-admin~="modern"]) .system-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* v7 server-routed admin navigation */
:where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-link {
    display: flex !important;
    align-items: center;
    text-decoration: none !important;
    cursor: pointer;
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-link:focus-visible {
    color: #fff !important;
    outline: 2px solid #69d8e8;
    outline-offset: 2px;
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-link[aria-current="page"] {
    color: #fff !important;
    background: linear-gradient(100deg, #0d4ca5, #117ca2) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-nav-link[aria-current="page"]::before {
    color: #74dced;
}
:where(html[data-pw-admin~="modern"]) .admin-app .admin-logout-link {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 0 0 10px 10px !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tabcontent[hidden] {
    display: none !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .tabcontent.active {
    display: block !important;
}
:where(html[data-pw-admin~="modern"]) .admin-media-fallback {
    display: grid;
    place-items: center;
    min-height: 70px;
    padding: 12px;
    color: #71839a !important;
    border: 1px dashed #cad6e2;
    border-radius: 10px;
    background: #eef3f7;
    font-size: 0.64rem;
    text-align: center;
}

/* Candidate management */
:where(html[data-pw-admin~="modern"]) #Candidates .detailedsalesreport {
    max-height: none;
    padding: 0 !important;
    overflow: visible !important;
}
:where(html[data-pw-admin~="modern"]) #Candidates .detailedsalesreport-title {
    display: block !important;
    margin: 0;
}
:where(html[data-pw-admin~="modern"]) .candidate-panel {
    overflow: hidden;
    border-radius: var(--admin-radius);
}
:where(html[data-pw-admin~="modern"]) .candidate-panel-intro {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 25px 28px;
    border-bottom: 1px solid var(--admin-line);
    background: linear-gradient(120deg, #f8fbff, #eef8fb);
}
:where(html[data-pw-admin~="modern"]) .candidate-panel-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #fff !important;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--admin-blue), #118ca9);
    box-shadow: 0 9px 20px rgba(11, 63, 145, 0.2);
}
:where(html[data-pw-admin~="modern"]) .candidate-panel-intro h2 {
    margin: 0 0 5px;
    color: var(--admin-text) !important;
    font-size: 1.08rem;
    letter-spacing: -0.015em;
}
:where(html[data-pw-admin~="modern"]) .candidate-panel-intro p {
    margin: 0;
    color: var(--admin-muted) !important;
    font-size: 0.72rem;
    line-height: 1.5;
}
:where(html[data-pw-admin~="modern"]) .candidate-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 28px 0;
    padding: 12px 14px;
    border: 1px solid #b9e7d1;
    border-radius: 10px;
    color: #16633d !important;
    background: #eefaf4;
    font-size: 0.72rem;
}
:where(html[data-pw-admin~="modern"]) .candidate-alert--error {
    color: #9d2833 !important;
    border-color: #f1c5ca;
    background: #fff3f4;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 !important;
    padding: 28px !important;
    background: #fff !important;
    box-shadow: none !important;
}
:where(html[data-pw-admin~="modern"]) .candidate-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
:where(html[data-pw-admin~="modern"]) .candidate-field--wide {
    grid-column: 1 / -1;
}
:where(html[data-pw-admin~="modern"]) .candidate-field label {
    color: #385372 !important;
    font-size: 0.7rem;
    font-weight: 700 !important;
}
:where(html[data-pw-admin~="modern"]) .candidate-field label span {
    color: var(--admin-red) !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field input,
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field select,
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field .select2-container {
    width: 100% !important;
    max-width: none !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field input {
    min-height: 48px !important;
    padding: 11px 14px !important;
    font-size: 0.76rem !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field .select2-selection {
    display: flex;
    align-items: center;
    min-height: 48px !important;
    padding: 8px 38px 8px 13px !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field .select2-selection__rendered {
    padding: 0 !important;
    color: var(--admin-text) !important;
    font-size: 0.76rem;
    line-height: 30px !important;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-field .select2-selection__arrow {
    top: 10px !important;
    right: 8px !important;
}
:where(html[data-pw-admin~="modern"]) .candidate-form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
}
:where(html[data-pw-admin~="modern"]) .candidate-form-actions p {
    margin: 0;
    color: var(--admin-muted) !important;
    font-size: 0.67rem;
}
:where(html[data-pw-admin~="modern"]) .candidate-form-actions p i {
    margin-right: 6px;
    color: #5293a8;
}
:where(html[data-pw-admin~="modern"]) .admin-app .candidate-form-actions button {
    min-height: 46px !important;
    padding: 11px 19px !important;
    background: linear-gradient(100deg, var(--admin-blue), #0d7399) !important;
    box-shadow: 0 8px 18px rgba(11, 63, 145, 0.18);
    cursor: pointer;
}
:where(html[data-pw-admin~="modern"]) .candidate-form-actions button i {
    margin-right: 7px;
}
@media (max-width: 700px) {
    :where(html[data-pw-admin~="modern"]) .candidate-panel-intro {
        padding: 21px;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .candidate-form {
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 21px !important;
    }
    :where(html[data-pw-admin~="modern"]) .candidate-field--wide,
    :where(html[data-pw-admin~="modern"]) .candidate-form-actions {
        grid-column: 1;
    }
    :where(html[data-pw-admin~="modern"]) .candidate-form-actions {
        align-items: stretch;
        flex-direction: column;
    }
    :where(html[data-pw-admin~="modern"]) .admin-app .candidate-form-actions button {
        width: 100% !important;
    }
}
/*
 PW-STYLES-END
 */