@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

html,
body {
    margin: 0;
    overflow: auto;
    font-family: Lato, ui-sans-serif, system-ui, sans-serif;
    background-color: #F7F7F7;
    /* Calcite background */
    font-size: 0.925rem !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility;
}

input,
textarea {
    padding: 0.375rem 0.5rem !important;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
    border: 1px solid #949494 !important;
    /* Calcite border-input */
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
    color: #141414 !important;
    /* Calcite text-1 */
    background-color: #FFFFFF !important;
    /* Calcite foreground-1 */
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.parent {
    display: flex;
}

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

h1,
h2,
h3 {
    line-height: 1.2;
    color: #141414;
    /* Calcite text-1 */
}

h3 {
    font-size: 1.3em;
    font-weight: 500;
    margin-top: 1em;
    color: #4A4A4A;
    /* Calcite text-2 */
}

h1+a,
h2+a,
h3+a {
    text-decoration: none;
    color: #3a89de;
    /* Custom brand color */
}

/* Login Page Styles */
.login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.login-container-reset {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.login-main-content,
.login-main {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Left panel - Login form (25%) - Fixed overlay */
.login-left-panel {
    width: 400px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 0rem;
    background-color: #F7F7F7;
    /* Calcite background - light theme */
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 100;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Footer within login panel */
.login-footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid #D4D4D4;
    /* Calcite border-2 */
}

.login-footer .hess-footer {
    border-top: none;
    padding: 0;
    margin: 0;
    font-size: 0.6875rem;
    color: #6B6B6B;
    /* Calcite text-3 */
}

.login-footer .hess-footer-content {
    gap: 0.25rem;
}

.login-footer .hess-footer-content>div {
    font-size: 0.6875rem;
    line-height: 1.4;
}

.login-footer .hess-footer-links {
    margin-top: 0rem;
    gap: 1rem;
}

.login-footer .hess-footer-links a {
    color: #00619B;
    /* Calcite text-link */
    font-size: 0.6875rem;
}

.login-footer .hess-footer-links a:hover {
    color: #004874;
    /* Calcite brand-press */
}

/* Right panel - Image (75%) */
.login-right-panel {
    width: calc(100vw - 400px);
    height: 100vh;
    position: relative;
    display: flex;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: 400px;
    /* Offset for fixed left panel */
}

/* Logo styling for login pages */
.login-logo {
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.login-logo img {
    max-width: 195px;
    height: auto;
}

/* Dark-mode logo: show logo_dark.png when theme-dark, else Logo195pxWide.jpg */
.hess-logo-dark {
    display: none;
}
.theme-dark .hess-logo-light {
    display: none;
}
.theme-dark .hess-logo-dark {
    display: block;
}

/* Support overlay on right panel */
.login-support-overlay {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background-color: rgba(20, 20, 20, 0.75);
    /* 75% transparent black */
    color: #FFFFFF;
    /* Calcite text-inverse */
    padding: 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    max-width: 300px;
    z-index: 10;
}

.login-support-overlay strong {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
    color: #FFFFFF;
}

.login-support-overlay a {
    color: #FFFFFF;
    text-decoration: underline;
}

.login-support-overlay a:hover {
    color: #F2F2F2;
    /* Calcite foreground-2 */
}

/* Legacy access callout - subtle border and background on all login pages (left panel and support overlay) */
.login-legacy-box {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d4c9a8;
    border-radius: 0.375rem;
    background-color: #f9f8f5;
    color: #374151;
    font-size: 0.875rem;
}
.login-legacy-box a {
    color: #00619b;
    text-decoration: underline;
}
.login-legacy-box a:hover {
    color: #004874;
}
/* Right panel support overlay (dark background) */
.login-support-overlay .login-legacy-box {
    margin-top: 0;
    border-color: rgba(255, 255, 255, 0.28);
    background-color: rgba(255, 255, 255, 0.07);
    color: #e5e5e5;
}
.login-support-overlay .login-legacy-box a {
    color: #d4c468;
}
.login-support-overlay .login-legacy-box a:hover {
    color: #e5d078;
}

.login-card {
    background-color: #FFFFFF;
    /* Calcite foreground-1 - light theme */
    padding: 3.25rem;
    width: 100%;
    position: relative;
    z-index: 10;
    border: 1px solid #D4D4D4;
    /* Calcite border-2 */
    flex: 1;
}


.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.login-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4A4A4A;
    /* Calcite text-2 - light theme */
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}

.login-input {
    width: 100%;
    border: 1px solid #949494;
    /* Calcite border-input */
    background-color: #FFFFFF;
    /* Calcite foreground-1 */
    color: #141414;
    /* Calcite text-1 */
    border-radius: 6px;
    padding: 12px 16px;
    /* Taller touch target */
    font-size: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.login-input:focus {
    outline: none;
    border-color: #3a89de;
    /* Custom brand color */
    box-shadow: 0 0 0 3px rgba(58, 137, 222, 0.1);
    /* Custom brand color with opacity */
}

.login-button {
    width: 100%;
    background-color: #3a89de;
    /* Custom brand color */
    color: white;
    /* Calcite text-inverse */
    font-weight: 500;
    padding: 12px;
    border-radius: 4px;
    /*  box-shadow: 0 4px 6px -1px rgba(58, 137, 222, 0.2); Custom brand color glow */
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.1s ease;
    margin-top: 0.25rem;
}

.login-button:hover:not(:disabled) {
    background-color: #00619B;
    /* Calcite brand-hover */
}

.login-button:disabled {
    background-color: #6B6B6B;
    /* Calcite text-3 */
    cursor: not-allowed;
}

.login-button:focus {
    outline: none;
    /*  box-shadow: 0 0 0 2px rgba(58, 137, 222, 0.5);  Custom brand color */
}

.login-text {
    font-size: 0.875rem;
    color: #6B6B6B;
    /* Calcite text-3 - light theme */
    line-height: 1.5;
}

.login-text p {
    margin: 0.375rem 0;
}

.login-link {
    color: #00619B;
    /* Calcite text-link - light theme */
    text-decoration: underline;
}

.login-link:hover {
    color: #004874;
    /* Calcite brand-press */
}

.login-username-display {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #141414;
    /* Calcite text-1 - light theme */
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.75rem;
    background-color: #F2F2F2;
    /* Calcite foreground-2 */
    border-radius: 0.5rem;
    border: 1px solid #D4D4D4;
    /* Calcite border-2 */
}

.login-note {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid #D4D4D4;
    /* Calcite border-2 */
    font-size: 0.6875rem;
    font-style: italic;
    color: #6B6B6B;
    /* Calcite text-3 - light theme */
    line-height: 1.4;
}

.login-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #141414;
    /* Calcite text-1 - light theme */
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

/* Responsive design for login pages */
@media (max-width: 767px) {

    .login-container,
    .login-container-reset {
        height: auto;
        min-height: 100vh;
    }

    .login-main-content,
    .login-main {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }



    .login-footer {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .login-footer .hess-footer {
        font-size: 0.625rem;
    }

    .login-footer .hess-footer-content>div {
        font-size: 0.625rem;
    }

    .login-footer .hess-footer-links {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .login-footer .hess-footer-links a {
        font-size: 0.625rem;
    }

    .login-right-panel {
        display: none !important;
        /* Hide image on mobile */
    }

    .login-support-overlay {
        display: none !important;
        /* Hide support overlay on mobile */
    }

    .login-logo {
        margin-bottom: 1.5rem;
    }
}

.error-box {
    position: relative;
    margin-top: 1rem;
    z-index: 999;
    background-color: #FEF2F2;
    /* Light red background for errors */
    border: 1px solid #FECACA;
    /* Light red border */
    border-radius: 0.5rem;
    padding: 1rem;
    width: 100%;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.error-text {
    font-size: 0.875rem;
    font-weight: bold;
    color: #dc353a;
    /* Custom status-danger */
}

.error-box-header {
    margin-bottom: 0.75rem;
}

.error-box-footer {
    display: flex;
    justify-content: flex-end;
}

.error-button {
    padding: 0.25rem 0.75rem;
    font-size: inherit;
    background-color: #EBEBEB;
    /* Calcite foreground-3 */
    color: #141414;
    /* Calcite text-1 */
    border: 1px solid #C9C9C9;
    /* Calcite border-1 */
    border-radius: 0.25rem;
    cursor: pointer;
}

.error-button:hover {
    background-color: #D4D4D4;
    /* Calcite border-2 */
}

.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}

.slideshow-iframe {
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}

.slideshow-image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slideshow-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: smooth;
    -ms-interpolation-mode: bicubic;
    filter: brightness(1.0) contrast(1.0) saturate(1.0);
    transition: transform 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Body background for pages using Preflight */
body.hess-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background-color: #F7F7F7;
    /* Calcite background - light theme */
}

/* Header Styles */
.hess-header {
    position: relative;
    z-index: 100;
    width: 100%;
    border-bottom: 1px solid #b8b8b8;
    background-color: #fff;
    padding: 0.50rem;
}

.hess-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hess-header-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hess-header-azure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: inherit;
    color: #666;
    white-space: nowrap;
}

/* Hide header logo when sidebar is present */
body.hess-body.has-sidebar .hess-header-logo {
    display: none;
}

/* Hide individual user buttons when sidebar is present */
body.hess-body.has-sidebar .hess-header-user-info {
    display: none;
}

/* When sidebar is present, arrange items horizontally with top alignment */
body.hess-body.has-sidebar .hess-header-right {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

/* Group search and time together */
.hess-header-search-time-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

/* User Dropdown Menu (shown when sidebar is present) */
.hess-header-user-dropdown {
    position: relative;
    display: block;
    z-index: 10001;
}

.hess-header-user-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
    margin-top: 5px;
}

.hess-header-user-dropdown-toggle:hover {
    background-color: #F3F4F6;
}

.hess-header-user-icon {
    height: 1.3125rem;
    width: 1.3125rem;
    color: #374151;
}

.hess-header-user-dropdown-arrow {
    height: 1.3125rem;
    width: 1.3125rem;
    color: #707887;
    margin-left: 0.25rem;
    transition: transform 0.2s;
}

.hess-header-user-dropdown-toggle[aria-expanded="true"] .hess-header-user-dropdown-arrow,
.hess-header-user-dropdown-menu-open~.hess-header-user-dropdown-toggle .hess-header-user-dropdown-arrow {
    transform: rotate(180deg);
}

.hess-header-user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background-color: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    min-width: 200px;
    z-index: 10001;
    display: none;
    overflow: hidden;
}

.hess-header-user-dropdown-menu-open {
    display: block;
}

.hess-header-user-dropdown-header {
    padding: 0.75rem;
}

.hess-header-user-dropdown-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F2937;
}

.hess-header-user-dropdown-separator {
    height: 1px;
    background-color: #E5E7EB;
    margin: 0.5rem 0;
}

.hess-header-user-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    cursor: pointer;
}

.hess-header-user-dropdown-item:hover {
    background-color: #F3F4F6;
    color: #1F2937;
}

.hess-header-user-dropdown-item span {
    flex: 1;
}

.hess-header-user-dropdown-key {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.hess-header-user-dropdown-key-icon {
    height: 1rem;
    width: 1rem;
    opacity: 0.7;
}

.hess-header-user-dropdown-key-text {
    font-size: 0.875rem;
    color: #6B7280;
}

.hess-header-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-end;
    min-width: 0;
}

/* Ensure poweredBy logo displays at proper size */
.hess-header-center img {
    max-width: none;
    height: auto;
    width: auto;
}

.hess-header-powered-by {
    margin-bottom: 0.5rem;
}

.hess-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 280px;
    position: relative;
    z-index: 1;
}


.hess-header-search {
    display: flex;
    align-items: center;
}

.hess-header-search-input-wrapper {
    position: relative;
    display: inline-block;
}

.hess-header-search-input {
    border: 1px solid #9CA3AF;
    padding: 0.25rem 2.5rem 0.25rem 0.5rem;
    font-size: inherit;
    border-radius: 0.25rem;
    width: 100%;
}

.hess-header-search-icon-button {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
}

.hess-header-search-icon-button:hover {
    color: #374151;
}

.hess-header-search-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.hess-header-key-icon {
    width: 50px;
    height: 20px;
    opacity: 0.8;
    cursor: help;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    padding-right: 5px;
}

.hess-header-time {
    font-size: 0.875rem;
    color: #333;
}

.hess-header-user-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    font-size: inherit;
    flex-wrap: wrap;
    width: 100%;
}

.hess-header-user-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hess-header-user-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.hess-header-username {
    font-weight: 500;
    color: #1F2937;
}

.hess-header-user-info .hess-header-key-icon {
    margin-left: 0;
}

.hess-header-button-inline {
    padding: 0.375rem 0.75rem;
    background-color: #E5E7EB;
    color: #1F2937;
    border: 1px solid #9CA3AF;
    border-radius: 0.375rem;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.hess-header-button-inline:hover {
    background-color: #E5E7EB;
}

.hess-header-button-inline:active {
    background-color: #BBB;
}

/* Legacy class for backward compatibility */
.hess-header-button {
    padding: 0.375rem 0.75rem;
    background-color: #E5E7EB;
    color: #1F2937;
    border: 1px solid #fff;
    border: 1px solid #9CA3AF;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.hess-header-button:hover {
    background-color: #CCC;
}

.hess-help-button-inline {
    padding: 0.375rem 0.75rem;
    background-color: #DDD;
    color: #1F2937;
    border: 1px solid #fff;
    border-radius: 0.375rem;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    /*  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
    transition: background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.hess-help-button-inline:hover {
    background-color: #CCC;
}

.hess-help-button-inline:active {
    background-color: #BBB;
}

.hess-support-button {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    z-index: 5;
    padding: 0.375rem 0.75rem;
    background-color: #2563EB;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s
}

.hess-support-button-inline {
    padding: 0.375rem 0.75rem;
    background-color: #2563EB;
    color: white;
    border: 1px solid #1D4ED8;
    border-radius: 0.375rem;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.hess-support-button-inline:hover {
    background-color: #1D4ED8;

}

.hess-support-button-inline:active {
    background-color: #1E40AF;
}

.hess-support-button:hover {
    background-color: #1D4ED8;

}

.hess-support-button:active {
    background-color: #1E40AF;
}

.hess-customer-support {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.hess-customer-support-info {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #000;
}

/* Footer Styles */
.hess-footer {
    position: relative;
    margin-top: 0.8rem;
    width: 100%;
    font-size: inherit;
    border-top: 1px solid #b8b8b8;
    padding-top: 0.3rem;
    padding-bottom: 0.1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.hess-footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hess-footer-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 0rem;
}

.hess-footer-links a {
    color: #2563EB;
    text-decoration: none;
}

.hess-footer-links a:hover {
    text-decoration: underline;
}

/* Alert Summary Styles */
.hess-alert-icon {
    position: absolute;
    top: 0.3125rem;
    left: 15rem;
    height: 2rem;
    border: 0;
    cursor: pointer;
    z-index: 100;
}

/* Alert Summary Modal */
.hess-alert-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.hess-alert-modal-overlay.active {
    display: flex;
}

.hess-alert-modal {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    z-index: 10001;
}

.hess-alert-modal-header {
    background-color: #E53E3E;
    color: #FFFFFF;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.hess-alert-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hess-alert-modal-title img {
    height: 1.25rem;
    width: 1.25rem;
    filter: brightness(0) invert(1);
}

h2.hess-alert-modal-title {
    color: #FFFFFF;
}

.hess-alert-modal-close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
    line-height: 1;
    opacity: 1;
    visibility: visible;
}

.hess-alert-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hess-alert-modal-body {
    padding: 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1F2937;
    text-align: left;
}

.hess-alert-modal-body p {
    margin: 0.5rem 0;
}

/* Format alert summary content - handle the HTML structure with BR tags */
/* Remove nbsp spacing */
.hess-alert-modal-body>div {
    white-space: normal;
    text-align: left;
    margin: 0;
    padding: 0;
}

/* Make BR tags create proper line breaks with minimal spacing */
.hess-alert-modal-body br {
    display: block;
    margin: 0.375rem 0;
    content: "";
}

/* Style critical text spans */
.hess-alert-modal-body span[style*="color:red"],
.hess-alert-modal-body span[style*="color: red"] {
    color: #E53E3E !important;
    font-weight: bold;
}

/* Style links - make them look like smaller buttons */
.hess-alert-modal-body a {
    display: inline-block;
    margin: 0.25rem 0.5rem 0.25rem 0;
    padding: 0.375rem 0.75rem;
    background-color: #2563EB;
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    border: none;
}

.hess-alert-modal-body a:hover {
    background-color: #1D4ED8;
}

/* Style links that are on their own line (after BR) */
.hess-alert-modal-body br+a {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Remove extra spacing and normalize text */
.hess-alert-modal-body {
    word-spacing: normal;
}


/* Alert Modal Footer */
.hess-alert-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    border-radius: 0 0 0.5rem 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.hess-alert-modal-button {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background-color: #2563EB;
    color: #FFFFFF !important;
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

.hess-alert-modal-button:hover {
    background-color: #1D4ED8;
}

/* What is new popup (login page) */
.hess-what-is-new-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.hess-what-is-new-overlay.active {
    display: flex;
}
.hess-what-is-new-modal {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 660px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.theme-dark .hess-what-is-new-modal {
    background-color: #2d2d2d;
    color: #e5e5e5;
}
.hess-what-is-new-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background-color: #F9FAFB;
}
body.theme-dark .hess-what-is-new-header {
    border-bottom-color: #404040;
    background-color: #353535;
}
.hess-what-is-new-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1F2937;
}
body.theme-dark .hess-what-is-new-title {
    color: #e5e5e5;
}
.hess-what-is-new-close {
    background: none;
    border: none;
    padding: 0.375rem;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: #6B7280;
    border-radius: 0.25rem;
}
.hess-what-is-new-close:hover {
    background-color: #E5E7EB;
    color: #374151;
}
body.theme-dark .hess-what-is-new-close:hover {
    background-color: #404040;
    color: #e5e5e5;
}
.hess-what-is-new-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.hess-what-is-new-content h3 {
    margin: 1.25rem 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1F2937;
}
body.theme-dark .hess-what-is-new-content h3 {
    color: #e5e5e5;
}
.hess-what-is-new-content h3:first-child {
    margin-top: 0;
}
.hess-what-is-new-content p {
    margin: 0.5rem 0;
    color: #374151;
}
body.theme-dark .hess-what-is-new-content p {
    color: #d0d0d0;
}
.hess-what-is-new-content ul {
    margin: 0.5rem 0 1rem 1.25rem;
    padding: 0;
}
.hess-what-is-new-content li {
    margin: 0.35rem 0;
}
.hess-what-is-new-intro {
    margin-top: 0;
}
.hess-what-is-new-outro {
    margin-bottom: 0;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #E5E7EB;
}
body.theme-dark .hess-what-is-new-outro {
    border-top-color: #404040;
}
.hess-what-is-new-link {
    color: #FFD700;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-size: inherit;
    padding: 0;
    margin-left: 0.5rem;
}
.hess-what-is-new-link:hover {
    color: #FFE44D;
}
.login-support-overlay .hess-what-is-new-link {
    font-size: 1rem;
}

.hess-alert-modal-button:active {
    background-color: #1E40AF;
}

/* Legacy support - keep old class names for backward compatibility */
.hess-alert-summary {
    display: none;
}

.hess-alert-close {
    display: none;
}

/* Alert Summary Cards */
.alert-summary-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.alert-summary-card {
    flex: 1;
    min-width: 140px;
    padding: 12px;
    color: white;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.alert-summary-card.power-lost,
.alert-summary-card.critical {
    background-color: #F87171;
}

.alert-summary-card.voltage,
.alert-summary-card.current {
    background-color: #FB923C;
}

.alert-summary-card .label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.alert-summary-card .count {
    font-size: 18px;
    font-weight: bold;
    margin: 2px 0;
    line-height: 1.2;
}



/* Utility Selection Page Styles */
.utility-select-container {
    max-width: 100%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 600px;
    font-size: 12px;
    overflow-y: hidden;
}

.utility-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.utility-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.utility-search-container {
    position: relative;
}

.utility-search-input {
    padding: 0.5rem 0.75rem;
    padding-left: 2.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    width: 250px;
    background-color: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.utility-search-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.utility-search-input::placeholder {
    color: #9CA3AF;
}

.utility-search-container::before {
    content: "🔍";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    pointer-events: none;
    opacity: 0.5;
}

.utility-select-title {
    font-size: 1rem;
    font-weight: bold;
    margin: 0;
    color: #1F2937;
}

.utility-view-toggle {
    display: none;
    gap: 1rem;
    align-items: center;
}

.utility-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.utility-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.utility-radio-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 2px solid #D1D5DB;
    border-radius: 0.375rem;
    background-color: #FFFFFF;
    transition: all 0.2s;
    min-width: 80px;
}

.utility-radio-input:checked+.utility-radio-custom {
    border-color: #2563EB;
    background-color: #EFF6FF;
    /*  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);*/
}

.utility-radio-custom:hover {
    border-color: #9CA3AF;
    background-color: #F9FAFB;
}

.utility-radio-input:checked+.utility-radio-custom:hover {
    border-color: #1D4ED8;
    background-color: #DBEAFE;
}

.utility-view-icon {
    height: 32px;
    width: auto;
    border: 0;
}

.utility-radio-text {
    font-size: inherit;
    font-weight: 500;
    color: #374151;
}

.utility-radio-input:checked+.utility-radio-custom .utility-radio-text {
    color: #2563EB;
    font-weight: 600;
}

.utility-selection-content {
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
    font-size: 1rem;
    max-height: calc(100vh - 275px);
}

/* Utility Grid/List Table Styles */
.utility-selection-content table {
    width: 100%;
    border-collapse: collapse;
}

.utility-selection-content table tr.initial {
    background-color: #FFFFFF;
    color: #000000;
}

.utility-selection-content table tr.normal {
    background-color: #FFFFFF;
}

.utility-selection-content table tr.highlight {
    background-color: #CCCCFF;
}

.utility-selection-content table tr.inactive {
    background-color: #AFAFAF;
}

.utility-selection-content table td {
    padding: 0.5rem;
    vertical-align: top;
}

.utility-selection-content table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: bold;
    background-color: #D1D5DB;
}

/* Sidebar Navigation Styles */
.hess-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 200px;
    height: 100vh;
    background-color: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    z-index: 900;
    overflow-y: auto;
    overflow-x: hidden;
}

.hess-sidebar-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    background-color: #FFFFFF;
    transition: background-color 0.2s ease;
}

.hess-sidebar-logo:hover {
    background-color: #F3F4F6;
}

.hess-sidebar-logo img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.hess-sidebar-logo:hover img {
    opacity: 0.8;
}

/* Sidebar Alert Summary */
.hess-sidebar-alert {
    position: relative;
    padding: 0;
    background-color: #FFFFFF;
}

.hess-sidebar-alert-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.hess-sidebar-alert-header:hover {
    background-color: #F3F4F6;
}

.hess-sidebar-alert-icon {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
}

.hess-sidebar-alert-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.hess-sidebar-alert-summary {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    border: 1px solid #DC2626;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    z-index: 10000;
    padding: 1rem;
    margin-top: 0.5rem;
    max-width: 100%;
    max-height: 400px;
    overflow-y: auto;
}

.hess-sidebar-alert-content {
    padding-right: 1.5rem;
    font-size: 0.875rem;
    color: #1F2937;
}

.hess-sidebar-alert-close {
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
    float: right;
    padding: 0 0.5rem;
    color: #DC2626;
}

.hess-sidebar-alert-close:hover {
    color: #991B1B;
}

/* Sidebar History (Navigation History - Collapsed by Default) */
.hess-sidebar-history {
    position: relative;
    padding: 0;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
}

.hess-sidebar-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s;
}

.hess-sidebar-history-header:hover {
    background-color: #F9FAFB;
}

.hess-sidebar-history-header .hess-sidebar-link-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.hess-sidebar-history-header .hess-sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.hess-sidebar-history-header .hess-sidebar-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.hess-sidebar-history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.hess-sidebar-history-list li {
    margin: 0;
    border-top: 1px solid #F3F4F6;
}

.hess-sidebar-history-list li:first-child {
    border-top: none;
}

.hess-sidebar-history-list a {
    display: block;
    padding: 0.5rem 1rem 0.5rem 2.75rem;
    color: #6B7280;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s, color 0.2s;
}

.hess-sidebar-history-list a:hover {
    background-color: #F9FAFB;
    color: #111827;
}

/* Hide header alert summary when sidebar is present */
body.hess-body.has-sidebar .hess-alert-icon,
body.hess-body.has-sidebar .hess-alert-summary {
    display: none;
}

.hess-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hess-sidebar-menu>li {
    margin: 0;
    border-bottom: 1px solid #F3F4F6;
}

.hess-sidebar-menu>li.active>.hess-sidebar-parent-link {
    color: #2563EB;
    background-color: #EFF6FF;
    border-right: 3px solid #2563EB;
    font-weight: 600;
}

.hess-sidebar-parent-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    cursor: pointer;
}

.hess-sidebar-parent-link:hover {
    background-color: #F9FAFB;
    color: #111827;
}

.hess-sidebar-menu>li.active>.hess-sidebar-parent-link:hover {
    background-color: #DBEAFE;
}

.hess-sidebar-link-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.hess-sidebar-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Ensure consistent icon rendering - all icons should be the same size and color */
.hess-sidebar-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
}

.hess-sidebar-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    color: inherit;
    filter: none;
    transition: filter 0.2s;
}

/* SVG icons automatically inherit color from parent when using currentColor */
.hess-sidebar-menu>li.active>.hess-sidebar-parent-link .hess-sidebar-icon svg {
    color: inherit;
}

.hess-sidebar-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.hess-sidebar-menu>li.open>.hess-sidebar-parent-link>.hess-sidebar-arrow {
    transform: rotate(90deg);
}

.hess-sidebar-submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #E5E7EB;
}

.hess-sidebar-menu>li.open>.hess-sidebar-submenu {
    display: block;
}

.hess-sidebar-submenu li {
    margin: 0;
}

.hess-sidebar-submenu li a {
    display: block;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    color: #6B7280;
    text-decoration: none;
    font-size: 0.875rem;
    transition: background-color 0.2s, color 0.2s;
}

.hess-sidebar-submenu li a:hover {
    background-color: #F3F4F6;
    color: #000;
}

.hess-sidebar-submenu li a.active {
    background-color: #DBEAFE;
    color: #2563EB;
    font-weight: 500;
}

.hess-sidebar-separator {
    height: 1px;
    background-color: #E5E7EB;
    margin: 0.5rem 1rem;
    padding: 0;
}

/* Main content area adjustment when sidebar is present */
body.has-sidebar {
    margin-left: 200px;
}

/* Hide dropdown menu when sidebar is present */
body.has-sidebar .nav {
    display: none;
}


/* ============================================
   Generic Grid/List Page Styles
   ============================================ */

/* Main content container for grid pages - fill available space so title + grid + bottom card all fit */
.hess-grid-page-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0.5rem;
    overflow: hidden;
}

/* When main content has a grid page, no page scroll - only the grid body scrolls; keeps bottom card visible */
.main-content.has-sidebar:has(.hess-grid-page-container) {
    overflow: hidden !important;
}

/* Page title - do not shrink so grid gets remaining space */
.hess-grid-page-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #1F2937;
    flex-shrink: 0;
}

/* Subtitle and fixed sections below grid - do not shrink */
.hess-grid-page-container > .hess-grid-page-subtitle,
.hess-grid-page-container > .hess-grid-page-section-fixed,
.hess-grid-page-container > .hess-detail-card {
    flex-shrink: 0;
}

/* Wrapper so the grid area is the single flex-growing child (used when page has content above/below grid) */
.hess-grid-page-grid-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Filter section - Modern Card Style */
.hess-grid-filter {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.7rem;
    font-size: 0.925rem;
    position: relative;
}

/* Use Flexbox for layout */
.hess-grid-filter form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
}

.hess-grid-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
}

/* Inline filter rows (for compact layouts) */
.hess-grid-filter-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    width: auto;
    padding-bottom: 0.5rem;
}

/* Labels - Uppercase and Muted (Matches Grid Headers) */
.hess-grid-filter-label {
    font-size: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    /* Cool Gray */
    margin-bottom: 0.375rem;
    display: block;
}

/* Inline labels for filter rows */
.hess-grid-filter-row .hess-grid-filter-label {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.5rem;
}

/* Inputs & Selects - Modern Style */
.hess-grid-filter-select {
    background-color: #F9FAFB;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0rem;
    font-size: 0.875rem;
    color: #111827;
    min-width: 140px;
    height: 35px;
    /* Fixed height for alignment */
    transition: all 0.15s ease-in-out;
}

/* Focus State - Blue Ring */
.hess-grid-filter-select:focus {
    background-color: #FFFFFF;
    border-color: #2563EB;
    /*box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);*/
    outline: none;
}

.hess-grid-filter-select[type="text"],
.hess-grid-filter-select[type="number"] {
    min-width: auto;
}

.hess-grid-filter-search-input {
    min-width: 250px;
}

/* Map button for active alerts grid */
.hess-alerts-map-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    padding: 6px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
    vertical-align: middle;
    flex-shrink: 0;
}

.hess-alerts-map-button:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.hess-alerts-map-button:active {
    background-color: #d1d5db;
}

.hess-alerts-map-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* Ensure the map button aligns properly in the Dable header */
.hess-dable-header .hess-alerts-map-button {
    margin-left: 8px;
}

.hess-grid-filter-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Checkbox Containers */
.hess-grid-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: white;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    padding: 5px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.hess-grid-filter-checkbox:hover {
    border-color: #2563EB;
    background-color: #EFF6FF;
}

.hess-grid-filter-checkbox input[type="checkbox"],
.hess-grid-filter-checkbox input[type="radio"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.hess-grid-filter-checkbox label {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
}

/* Update Button - Primary Action */
.hess-grid-filter-button {
    background-color: #2563EB;
    /* Match brand blue */
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 0 1rem;
    height: 38px;
    /* Matches input height */
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* Push to the far right automatically */
    margin-left: auto;
}

/* When button is inside a filter row, it should be inline (not absolutely positioned) */
.hess-grid-filter-row .hess-grid-filter-button {
    position: static;
    margin-left: auto;
}

/* Remove old absolute positioning overrides */
.hess-grid-filter form>.hess-grid-filter-button:not(.hess-grid-filter-row .hess-grid-filter-button) {
    position: static !important;
}

.hess-grid-filter-button:hover {
    background-color: #1D4ED8;
    /* Darker blue on hover */
}

.hess-grid-filter-button:active {
    background-color: #1F2937;
}

/* Action buttons (Download, Add, etc.) */
.hess-grid-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.hess-grid-actions .hess-detail-navigation {
    margin-left: auto;
}

.hess-grid-action-button {
    background-color: #E5E7EB;
    color: #1F2937;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    text-align: center;
}

.hess-grid-action-button:hover:not(.disabled) {
    background-color: #D1D5DB;
}

.hess-grid-action-button.disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Icon Styles - Standardized for all buttons */
/* Icons match the button text color */
.hess-button-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.hess-button-icon-small {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* Icons in buttons with white text (primary buttons, dark filter buttons) should be white */
.hess-detail-form-button-primary .hess-button-icon,
.hess-detail-form-button-primary .hess-button-icon-small,
.hess-grid-filter-button .hess-button-icon,
.hess-grid-filter-button .hess-button-icon-small,
.hess-map-filter-button .hess-button-icon,
.hess-map-filter-button .hess-button-icon-small,
.hess-device-summary-button .hess-button-icon {
    filter: brightness(0) invert(1);
}

/* White icons for dark buttons (filter buttons with dark background) */
.hess-button-icon-white {
    filter: brightness(0) invert(1);
}

/* Grid Filter Info Button and Dropdown */
.hess-grid-filter-info-button {
    background-color: #E5E7EB;
    color: #1F2937;
    border: 1px solid #D1D5DB;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s;
    text-align: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.hess-grid-filter-info-button:hover {
    background-color: #D1D5DB;
    border-color: #9CA3AF;
}

.hess-grid-filter-info-button:active {
    background-color: #9CA3AF;
}

.hess-grid-filter-info-icon {
    display: inline-block;
    line-height: 1;
    font-style: italic;
}

/* Info Dropdown Container - positioned relative to the info button */
.hess-grid-filter-info-button-wrapper {
    position: relative;
    display: inline-block;
}

/* Info Dropdown Container */
.hess-grid-filter-info-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 300px;
    max-width: 500px;
    z-index: 1000;
    padding: 1rem;
}

.hess-grid-filter-info-dropdown.active {
    display: block;
}

.hess-grid-filter-info-content {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #374151;
}

.hess-grid-filter-info-content p {
    margin: 0 0 0.75rem 0;
}

.hess-grid-filter-info-content p:last-child {
    margin-bottom: 0;
}

/* Position the dropdown relative to the filter row - ensure filter row can contain absolutely positioned dropdown */
.hess-grid-filter-row {
    position: relative;
}

/* Grid/Table container with scroll */
.hess-grid-container {
    flex: 1 1 auto !important;
    flex-direction: column !important;
    display: flex;
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    background-color: #FFFFFF;
    position: relative;
    min-height: 0;
    padding: 0 !important;
}

/* Table styling - applies to all tables in grid containers */
.hess-grid-container table,
.hess-grid-table {
    width: 100% !important;
    min-width: max-content;
    border-collapse: collapse !important;
    font-size: 0.875rem !important;
    border: 0 !important;
}


/* Override inline styles that might be in generated HTML */
.hess-grid-container table[style*="font-size"],
.hess-grid-container table[style*="font-family"],
.hess-grid-container table[style*="cellpadding"],
.hess-grid-container table[style*="cellspacing"] {
    font-size: 0.875rem !important;
}

.hess-grid-container table thead,
.hess-grid-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #BFBFBF;
}

.hess-grid-container table th,
.hess-grid-table th {
    padding: 16px 12px !important;
    /* More vertical breathing room */
    text-align: left;
    background-color: #F8FAFC !important;
    /* Lighter/Cleaner gray */
    color: #475569 !important;
    /* Softer text color than black */
    font-weight: 600;
    text-transform: capitalize;
    /* Remove uppercase for a friendlier look */
    letter-spacing: normal;
    border-bottom: 2px solid #E2E8F0 !important;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
    font-size: 0.875rem !important;
}

.hess-grid-container table td,
.hess-grid-table td {
    padding: 10px 12px !important;
    /* Increase from 0.5rem */
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9;
    font-size: inherit !important;
}

/* 1. Force the container to be exactly 100px */
#TapSettingIssuesDable_table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

/* 2. Force the TH to be a rigid box */
#TapSettingIssuesDable_table th[data-tag] {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding: 5px 22px 5px 5px !important; 
    position: relative !important;
    vertical-align: top !important;
    
    /* Force word breaking at the cell level */
    white-space: normal !important;
    word-break: break-all !important; 
    overflow-wrap: anywhere !important;
}

/* 3. The Fix for the inner span: Kill the float and force block behavior */
#TapSettingIssuesDable_table th[data-tag] span {
    display: block !important;       /* Forces the span to obey width */
    width: auto !important;
    float: none !important;          /* Floats prevent word-break from working */
    white-space: normal !important;
    word-break: break-all !important; /* Force characters to wrap */
    overflow-wrap: anywhere !important;
}

/* 4. Keep the arrow pinned so it never moves or breaks */
#TapSettingIssuesDable_table th span.table-sort {
    position: absolute !important;
    right: 4px !important;
    top: 6px !important;
    display: block !important;
    width: 10px !important;
    float: none !important;
}

/* 5. Hide the clearfix span */
#TapSettingIssuesDable_table th span:nth-child(3) {
    display: none !important;
}

#TapSettingIssuesDable_table thead tr, 
#TapSettingIssuesDable_table thead th {
    white-space: normal !important;
}

#UserAlertRegistrationsDable_table tbody td {
    width: 150px;
    min-width: 150px;
    white-space: normal;
    overflow-wrap: anywhere;
}

#GenericAPIQueriesDable_table tbody td {
    width: 150px;
    min-width: 150px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Override inline font-size in table cells and links */
.hess-grid-container table td[style*="font-size"],
.hess-grid-table td[style*="font-size"],
.hess-grid-container table a[style*="font-size"],
.hess-grid-table a[style*="font-size"] {
    font-size: inherit !important;
}

/* Override inline styles in GFSList and other generated tables */
.hess-grid-container table[style*="font-size:8pt"],
.hess-grid-container table[style*="font-size: 8pt"] {
    font-size: inherit !important;
}

/* Ensure consistent spacing - override any cellpadding attributes */
.hess-grid-container table[cellpadding] {
    border-spacing: 0;
}

.hess-grid-container table[cellpadding] td {
    padding: 0.3rem 0.5rem !important;
}

.hess-grid-container table tbody tr,
.hess-grid-table tbody tr {
    border-bottom: 1px solid #E5E7EB;
    transition: background-color 0.15s;
}

/* Alternating row colors (zebra striping) for tables in grid container */
.hess-grid-container table tbody tr:nth-child(even),
.hess-grid-table tbody tr:nth-child(even) {
    background-color: #F9FAFB;
}


/* Remove lightyellow background from table rows - let alternating colors show through */
/* Consolidated selectors for better maintainability */
.hess-grid-container table tbody tr[style*="background-color: lightyellow"]:nth-child(even),
.hess-grid-container table tbody tr[style*="background-color:lightyellow"]:nth-child(even),
.hess-grid-container table tbody tr[style*="background-color: #FFFFE0"]:nth-child(even),
.hess-grid-container table tbody tr[style*="background-color:#FFFFE0"]:nth-child(even),
.hess-grid-table tbody tr[style*="background-color: lightyellow"]:nth-child(even),
.hess-grid-table tbody tr[style*="background-color:lightyellow"]:nth-child(even),
.hess-grid-table tbody tr[style*="background-color: #FFFFE0"]:nth-child(even),
.hess-grid-table tbody tr[style*="background-color:#FFFFE0"]:nth-child(even) {
    background-color: #F9FAFB;
}

.hess-grid-container table tbody tr[style*="background-color: lightyellow"]:nth-child(odd),
.hess-grid-container table tbody tr[style*="background-color:lightyellow"]:nth-child(odd),
.hess-grid-container table tbody tr[style*="background-color: #FFFFE0"]:nth-child(odd),
.hess-grid-container table tbody tr[style*="background-color:#FFFFE0"]:nth-child(odd),
.hess-grid-table tbody tr[style*="background-color: lightyellow"]:nth-child(odd),
.hess-grid-table tbody tr[style*="background-color:lightyellow"]:nth-child(odd),
.hess-grid-table tbody tr[style*="background-color: #FFFFE0"]:nth-child(odd),
.hess-grid-table tbody tr[style*="background-color:#FFFFE0"]:nth-child(odd) {
    background-color: #FFFFFF;
}

/* Base hover for initial/normal rows */
.hess-grid-container table tbody tr:hover,
.hess-grid-table tbody tr:hover {
    background-color: #F3F4F6 !important;
}

/* ============================================
   Row Class Colors - Standardized across all views
   ============================================ */

/* Base row classes - override alternating colors */
.hess-grid-container table tbody tr.initial,
.hess-grid-table tbody tr.initial,
table tbody tr.initial {
    color: #000000;
}

.hess-grid-container table tbody tr.normal,
.hess-grid-table tbody tr.normal,
table tbody tr.normal {
    background-color: #FFFFFF !important;
}

/* Note: highlight class kept for backward compatibility but should not be used */
.hess-grid-container table tbody tr.highlight,
.hess-grid-table tbody tr.highlight,
table tbody tr.highlight {
    background-color: #CCCCFF;
}

/* Status-based row classes */
/* GFS Alert History row classes */
.hess-grid-container table tbody tr.gfs-alert-normal {
    background-color: lightgreen !important;
}

.hess-grid-container table tbody tr.gfs-alert-normal:hover {
    background-color: #90EE90 !important;
    /* Slightly darker green on hover */
}

.hess-grid-container table tbody tr.gfs-alert-critical {
    background-color: lightsalmon !important;
}

.hess-grid-container table tbody tr.gfs-alert-critical:hover {
    background-color: #FF8C69 !important;
    /* Slightly darker salmon on hover */
}

/* Override Dable.js inline even/odd row colors */
.hess-grid-container table tbody tr.inactive,
.hess-grid-table tbody tr.inactive,
table tbody tr.inactive {
    background-color: #E5E7EB !important;
    color: #4B5563;
}

/* Hover for inactive rows - slightly darker light gray */
.hess-grid-container table tbody tr.inactive:hover,
.hess-grid-table tbody tr.inactive:hover,
table tbody tr.inactive:hover {
    background-color: #D1D5DB !important;
}

.hess-grid-container table tbody tr.autoactivate,
.hess-grid-table tbody tr.autoactivate {
    background-color: #FEF3C7 !important;
    color: #92400E;
}

/* Hover for autoactivate rows - slightly darker yellow */
.hess-grid-container table tbody tr.autoactivate:hover,
.hess-grid-table tbody tr.autoactivate:hover {
    background-color: #FDE68A !important;
}

/* Estimated readings - light green background */
.hess-grid-container table tbody tr.estimated,
.hess-grid-table tbody tr.estimated {
    background-color: #D5FFD5 !important;
}

.hess-grid-container table tbody tr.retired,
.hess-grid-table tbody tr.retired,
table tbody tr.retired {
    background-color: #4B5563 !important;
    color: #FFFFFF;
}

/* Hover for retired rows - slightly lighter dark gray */
.hess-grid-container table tbody tr.retired:hover,
.hess-grid-table tbody tr.retired:hover,
table tbody tr.retired:hover {
    background-color: #6B7280 !important;
}

/* Upgrade status row classes */
/* Use !important to override Dable.js inline styles for even/odd rows */
/* Colors match LEGACY upgrade.java implementation */
.hess-grid-container table tbody tr.upgrade-successful,
.hess-grid-table tbody tr.upgrade-successful,
table tbody tr.upgrade-successful {
    background-color: lightgreen !important;
    color: #065F46;
}

.hess-grid-container table tbody tr.upgrade-successful:hover,
.hess-grid-table tbody tr.upgrade-successful:hover,
table tbody tr.upgrade-successful:hover {
    background-color: #90EE90 !important;
}

.hess-grid-container table tbody tr.upgrade-pending,
.hess-grid-table tbody tr.upgrade-pending,
table tbody tr.upgrade-pending {
    background-color: lightyellow !important;
    color: #92400E;
}

.hess-grid-container table tbody tr.upgrade-pending:hover,
.hess-grid-table tbody tr.upgrade-pending:hover,
table tbody tr.upgrade-pending:hover {
    background-color: #FFFF99 !important;
}

.hess-grid-container table tbody tr.upgrade-starting,
.hess-grid-table tbody tr.upgrade-starting,
table tbody tr.upgrade-starting {
    background-color: darkcyan !important;
    color: #FFFFFF;
}

.hess-grid-container table tbody tr.upgrade-starting:hover,
.hess-grid-table tbody tr.upgrade-starting:hover,
table tbody tr.upgrade-starting:hover {
    background-color: #008B8B !important;
}

.hess-grid-container table tbody tr.upgrade-in-progress,
.hess-grid-table tbody tr.upgrade-in-progress,
table tbody tr.upgrade-in-progress {
    background-color: lightcyan !important;
    color: #164E63;
}

.hess-grid-container table tbody tr.upgrade-in-progress:hover,
.hess-grid-table tbody tr.upgrade-in-progress:hover,
table tbody tr.upgrade-in-progress:hover {
    background-color: #E0FFFF !important;
}

.hess-grid-container table tbody tr.upgrade-failed,
.hess-grid-table tbody tr.upgrade-failed,
table tbody tr.upgrade-failed {
    background-color: #FFAAAA !important;
    color: #991B1B;
}

.hess-grid-container table tbody tr.upgrade-failed:hover,
.hess-grid-table tbody tr.upgrade-failed:hover,
table tbody tr.upgrade-failed:hover {
    background-color: #FF9999 !important;
}

.hess-grid-container table tbody tr.upgrade-cancelled,
.hess-grid-table tbody tr.upgrade-cancelled,
table tbody tr.upgrade-cancelled {
    background-color: orange !important;
    color: #9A3412;
}

.hess-grid-container table tbody tr.upgrade-cancelled:hover,
.hess-grid-table tbody tr.upgrade-cancelled:hover,
table tbody tr.upgrade-cancelled:hover {
    background-color: #FF8C00 !important;
}

/* Alert Settings specific row classes */
.hess-grid-container table tbody tr.missingStandard,
.hess-grid-table tbody tr.missingStandard,
table tbody tr.missingStandard {
    background-color: #FEF3C7;
    vertical-align: top;
}

.hess-grid-container table tbody tr.missingCritical,
.hess-grid-table tbody tr.missingCritical,
table tbody tr.missingCritical {
    background-color: #FF4500;
    color: #FFFFFF;
    vertical-align: top;
}

/* Alert Settings cell background colors - softer, less intense */
.hess-grid-container table td .alert-yellow,
.hess-grid-table td .alert-yellow {
    display: block;
    background-color: #FEF3C7;
    /* Soft yellow/amber */
    padding: 0.25rem;
    min-height: 1.5rem;
}

.hess-grid-container table td .alert-red,
.hess-grid-table td .alert-red {
    display: block;
    background-color: #FEE2E2;
    /* Soft red/pink */
    color: #991B1B;
    /* Dark red text for contrast */
    padding: 0.25rem;
    min-height: 1.5rem;
}

.hess-grid-container table td .alert-green,
.hess-grid-table td .alert-green {
    display: block;
    background-color: #D1FAE5;
    /* Soft green/mint */
    padding: 0.25rem;
    min-height: 1.5rem;
}

/* ==========================================================================
   Conditional Cell Coloring Classes (for transformer/DTM data tables)
   ========================================================================== */

/* Yellow warning - for KW/KVA/Voltage/Current warnings */
.hess-grid-container .hess-cell-warning-yellow,
.hess-grid-table .hess-cell-warning-yellow,
.hess-grid-container .hess-cell-yellow,
.hess-grid-table .hess-cell-yellow,
.hess-grid-container .hess-cell-warning-yellow,
.hess-grid-table .hess-cell-warning-yellow,
.hess-grid-container .hess-cell-yellow,
.hess-grid-table .hess-cell-yellow {
    background-color: #FEF3C7 !important;
    /* Soft yellow/amber */
    color: #000000 !important;
    width: 100%;
}

/* Orange warning - for KW/KVA/Current high warnings */
.hess-grid-container .hess-cell-warning-orange,
.hess-grid-table .hess-cell-warning-orange,
.hess-grid-container .hess-cell-orange,
.hess-grid-table .hess-cell-orange,
.hess-grid-container .hess-cell-warning-orange,
.hess-grid-table .hess-cell-warning-orange,
.hess-grid-container .hess-cell-orange,
.hess-grid-table .hess-cell-orange {
    background-color: #FB923C !important;
    /* Orange */
    color: #000000 !important;
    width: 100%;
}


/* Red critical - for KW/KVA/Voltage/Current critical conditions */
.hess-grid-container .hess-cell-critical-red,
.hess-grid-table .hess-cell-critical-red,
.hess-grid-container .hess-cell-red,
.hess-grid-table .hess-cell-red,
.hess-grid-container .hess-cell-critical-red,
.hess-grid-table .hess-cell-critical-red,
.hess-grid-container .hess-cell-red,
.hess-grid-table .hess-cell-red {
    background-color: #FEE2E2;
    color: #991B1B;
    width: 100%;
}

/* Hover states for colored cells */
.hess-grid-container .hess-cell-warning-yellow:hover,
.hess-grid-table .hess-cell-warning-yellow:hover,
.hess-grid-container .hess-cell-warning-orange:hover,
.hess-grid-table .hess-cell-warning-orange:hover,
.hess-grid-container .hess-cell-critical-red:hover,
.hess-grid-table .hess-cell-critical-red:hover {
    opacity: 0.9;
}

/* Image resizing in grids - applies to all tables in grid containers */
.hess-grid-container table img,
.hess-grid-table img {
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* Fix alignment for images in table cells - override absolute positioning */
.hess-grid-container table td img,
.hess-grid-table td img {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-left: 0.25rem;
    margin-right: 0 !important;
    vertical-align: middle;
    display: inline-block;
}

/* Fix alignment for links containing images in table cells */
.hess-grid-container table td a img,
.hess-grid-table td a img {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin-left: 0.25rem;
    margin-right: 0 !important;
    vertical-align: middle;
    display: inline-block;
}

/* Remove extra spacing from links that contain images */
.hess-grid-container table td a[style*="position"],
.hess-grid-table td a[style*="position"] {
    position: static !important;
    right: auto !important;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* Links in grid - applies to all tables in grid containers */
.hess-grid-container table a,
.hess-grid-table a {
    color: #0f4efe;
    /* IBM Blue / Standard Enterprise Blue */
    font-weight: 500;
    text-decoration: none;
    border: none !important;
    border-bottom: none !important;
    display: inline;
    font-size: inherit;
}

.hess-grid-container table a:hover,
.hess-grid-table a:hover {
    text-decoration: underline;
    color: #0043CE;
}

/* Remove borders and padding from nested tables and elements */
.hess-grid-container table td table,
.hess-grid-table td table {
    border: none !important;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}

.hess-grid-container table td table tr,
.hess-grid-table td table tr {
    border: none !important;
    border-bottom: none !important;
}

.hess-grid-container table td table td,
.hess-grid-table td table td {
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0;
    background-color: inherit;
}

/* Override Dable.js padding on nested table cells */
#PagingDable table td table td,
.hess-grid-container #PagingDable table td table td {
    padding: 0 !important;
    margin: 0;
}

/* Override any inline padding styles on nested table cells */
#PagingDable table td table td[style*="padding"],
.hess-grid-container #PagingDable table td table td[style*="padding"] {
    padding: 0 !important;
}

/* Error message styling */
.hess-grid-error {
    color: #DC2626;
    padding: 1rem;
    background-color: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 0.375rem;
    margin-bottom: 0rem;
    position: relative;
}

.hess-grid-error-close {
    position: absolute;
    bottom: 5px;
    right: 5px;

    font-size: 9pt;
}

/* Grid page subtitle */
.hess-grid-page-subtitle {
    font-size: 1rem;
    font-weight: normal;
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

/* Small input field for filters */
.hess-grid-filter-input-small {
    width: 65px;
}

/* Dable.js container */
.hess-grid-dable-container,
#PagingDable,
#DTMReadingsDable,
#SinglePhaseDable,
#PolyPhaseDable,
#ActiveAlertsDable,
#AlertlistDable,
#alertSettingsDable,
#DailyUsageDable,
#DiversionDable,
#DTMEventsDable,
#DTMlistDable,
#UpgradeListDable,
#GetUserListDable,
#GFSListDable,
#GFSZonesListDable,
#GSMDTMsDable,
#HourlyFeederAnalyticsDable,
#HourlyXFAnalyticsDable,
#MonthlyFeederAnalyticsDable,
#MonthlyGroupAnalyticsDable,
#MonthlyXFAnalyticsDable,
#ShowSingleEventDable,
#TransformerEventsDable,
#TransformerlistDable,
#UserAlertRegistrationsDable,
#MonthlyConsumptionDable,
#DailyConsumptionDable,
#MonthlyConsumptionDable,
#XFLoadAnalysisDable,
#TransformerDataDable,
#DTMDataDable,
#TransformerNetworksDable,
#TransformerGroupsDable,
#AreaListDable,
#SubstationListDable,
#FeederListDable,
#MeterListDable,
#GFSReadingsDable,
#AlertSettingsDable,
#GFSAlertHistoryDable,
#SystemEventsDable,
#MfgPartNumbersDable,
#ContractExpirationsDable,
#GenericAPIQueriesDable {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

.hess-grid-empty {
    padding: 2rem;
    text-align: center;
    color: #6B7280;
}

/* Ensure body doesn't scroll when grid pages are active */
body.hess-body.has-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.hess-body.has-sidebar .main-content.has-sidebar {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Override flex for detail pages to use grid */
body.hess-body.has-sidebar .main-content.has-sidebar.hess-detail-page {
    display: grid;
    flex-direction: unset;
}

/* Push footer below viewport */
body.hess-body.has-sidebar .hess-footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* Detail Page Styles - Cards and Containers */
.hess-detail-page {
    position: relative;
    /*min-height: 100vh;*/
    padding: 0.8rem;
    display: grid !important;
    grid-template-columns: 65% 35%;
    gap: 1rem;
    align-items: start;
    align-content: start;
    flex-direction: unset !important;
    box-sizing: border-box;
}

.hess-detail-title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 0rem;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.hess-detail-title-content {
    flex: 1;
}

/* Spacing between inline elements in title (replaces  ) */
.hess-detail-title-content>* {
    margin-right: 0.75rem;
}

.hess-detail-title-content>*:last-child {
    margin-right: 0;
}

/* Style images in title to align properly */
.hess-detail-title-content h1 img,
.hess-detail-title-content img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.hess-detail-card {
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 1rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.hess-detail-card-scrollable {
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 0rem;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 600px;
}

.hess-detail-card-scrollable .hess-detail-card-header {
    flex-shrink: 0;
    padding: 0.6rem;
    padding-bottom: 0.75rem;
}

.hess-detail-card-scrollable .hess-detail-card-scroll-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    padding: 0;
}

.hess-detail-card a {
    color: #2563EB;
}

.hess-detail-card a:visited {
    color: #2563EB;
}

.hess-detail-card-nested {
    background-color: #FFFFFF;
    padding-top: 1rem;
}

/* Remove top padding when a card follows another card to avoid double padding */
/* .hess-detail-card + .hess-detail-card {
   padding-top: 0;
} */

/* Remove margin-bottom from cards inside column containers since gap handles spacing */
.hess-detail-column-left .hess-detail-card,
.hess-detail-column-right .hess-detail-card {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Keep margin-bottom for cards not in columns (if any) */
.hess-detail-page>.hess-detail-card {
    margin-bottom: 1rem;
}

/* Remove gaps between cards for pages that need no spacing */
.hess-detail-page-no-gap {
    gap: 0 !important;
    grid-template-columns: 1fr !important;
}

.hess-detail-page-no-gap>.hess-detail-title,
.hess-detail-page-no-gap>.hess-detail-card {
    grid-column: 1;
}

.hess-detail-page-no-gap>.hess-detail-card {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border-radius: 0;
}

/* First card in no-gap layout should have top border radius */
.hess-detail-page-no-gap>.hess-detail-card:first-of-type {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

/* Last card in no-gap layout should have bottom border radius */
.hess-detail-page-no-gap>.hess-detail-card:last-of-type {
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

/* Remove border between adjacent cards in no-gap layout */
.hess-detail-page-no-gap>.hess-detail-card:not(:last-of-type) {
    border-bottom: none;
}

/* Card title styling if present */
.hess-detail-card>h2,
.hess-detail-card>h3,
.hess-detail-card>h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E5E7EB;
}

.hess-detail-card-nested>h2,
.hess-detail-card-nested>h3,
.hess-detail-card-nested>h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E5E7EB;
}

.hess-detail-card table {
    width: 100%;
    border-collapse: collapse;
}

/* Remove background colors from headers and rows, except alerts */
/* Remove background colors from detail card table headers and rows (except alerts) */
.hess-detail-card thead tr,
.hess-detail-card tr:first-child {
    background-color: transparent !important;
}

/* Remove background colors from detail card table rows (except alerts) */
.hess-detail-card tbody tr,
.hess-detail-card tbody tr:nth-child(even),
.hess-detail-card tbody tr:nth-child(odd) {
    background-color: transparent !important;
}

/* Override inline background colors except for alerts */
.hess-detail-card tbody tr[style*="background-color"]:not([style*="yellow"]):not([style*="red"]):not([style*="orange"]) {
    background-color: transparent !important;
}

/* Keep alert colors - yellow backgrounds for alerts */
.hess-detail-card tbody tr[style*="background-color: yellow"],
.hess-detail-card tbody tr[style*="background-color:yellow"],
.hess-detail-card tbody tr[style*="background-color: #FEF3C7"],
.hess-detail-card tbody tr[style*="background-color:#FEF3C7"] {
    background-color: #FEF3C7 !important;
}

/* Keep mark tags (alerts) with yellow background */
.hess-detail-card mark,
.hess-detail-title mark {
    background-color: #FEF3C7;
    color: #000000;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
}

.hess-detail-card td,
.hess-detail-card th {
    padding: 0.25rem;
    font-size: inherit;
    vertical-align: middle;
    color: #111827;
}

.hess-detail-card td:first-child {
    font-size: inherit !important;
}

.hess-detail-card th:first-child {
    font-size: 0.825rem !important;
}

.hess-detail-card td:first-child,
.hess-detail-card th:first-child {
    color: #59687c;
    /* Muted slate color for labels */
    font-weight: 500;
    text-transform: capitalize;
    letter-spacing: 0em;
    width: 30%;
    /* Give labels specific width */
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
}


/* Ensure images in card cells align inline with text, not below */
.hess-detail-card td img {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

/* Ensure links with images stay inline */
.hess-detail-card td a {
    display: inline;
    vertical-align: middle;
}

/* Make sure images and text stay on same line in second column */
.hess-detail-card td:not(:first-child) {
    color: #0F172A;
    /* Darker, richer color for the actual data */
    font-weight: 500 !important;
    font-size: inherit !important;
    white-space: normal;
    line-height: 1.5;
}

/* Keep all inline elements aligned */
.hess-detail-card td:not(:first-child)>*,
.hess-detail-card td:not(:first-child) a,
.hess-detail-card td:not(:first-child) img {
    vertical-align: inherit;
}

/* Fix the pencil icon alignment in detail cards */
.hess-detail-card a img {
    vertical-align: text-bottom;
    opacity: 0.6;
    /* Make icons subtle until hovered */
    transition: opacity 0.2s;
}

.hess-detail-card a:hover img {
    opacity: 1;
}

/* Ensure buttons stay inline with text */
.hess-detail-card td button {
    display: inline-block;
    vertical-align: middle;
}

/* Indented table cells (replaces     for indentation) */
.hess-detail-card td.indented {
    padding-left: 2rem;
}

/* Modern form inputs for edit pages */
.hess-detail-card input[type="text"],
.hess-detail-card input[type="number"],
.hess-detail-card input[type="email"],
.hess-detail-card input[type="tel"],
.hess-detail-card input[type="password"] {
    border: 1px solid #D1D5DB !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
    color: #111827 !important;
    background-color: #FFFFFF !important;
    width: 250px;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Override inline styles for small alert inputs (size attribute) */
.hess-detail-card input[type="text"][size],
.hess-detail-card input[type="number"][size],
.hess-detail-card input[type="password"][size] {
    width: auto;
    max-width: none;
    min-width: 4rem;
}

.hess-detail-card input[type="text"]:focus,
.hess-detail-card input[type="number"]:focus,
.hess-detail-card input[type="email"]:focus,
.hess-detail-card input[type="tel"]:focus,
.hess-detail-card input[type="password"]:focus {
    outline: none;
    border-color: #6B7280;
}

.hess-detail-card input[type="text"]:disabled,
.hess-detail-card input[type="number"]:disabled,
.hess-detail-card input[type="email"]:disabled,
.hess-detail-card input[type="tel"]:disabled,
.hess-detail-card input[type="password"]:disabled {
    background-color: #F3F4F6;
    color: #6B7280;
    cursor: not-allowed;
}

.hess-detail-card select {
    border: 1px solid #D1D5DB !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
    color: #111827 !important;
    background-color: #FFFFFF !important;
    width: 250px;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hess-detail-card select:focus {
    outline: none;
    border-color: #6B7280;
}

.hess-detail-card select:disabled {
    background-color: #F3F4F6;
    color: #6B7280;
    cursor: not-allowed;
}

.hess-detail-card textarea,
.hess-detail-card-scroll-content textarea {
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: normal;
    color: #111827;
    background-color: #FFFFFF;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 8rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.hess-detail-card textarea:focus,
.hess-detail-card-scroll-content textarea:focus {
    outline: none;
    border-color: #6B7280;
}

.hess-detail-card textarea:disabled,
.hess-detail-card-scroll-content textarea:disabled {
    background-color: #F3F4F6;
    color: #6B7280;
    cursor: not-allowed;
}

/* Input with icon inside */
.hess-form-input-with-icon {
    position: relative;
    display: inline-block;
    width: 100%;
}

.hess-form-input-with-icon input[type="text"],
.hess-form-input-with-icon input[type="number"],
.hess-form-input-with-icon input[type="email"],
.hess-form-input-with-icon input[type="tel"] {
    padding-right: 2.5rem;
}

.hess-form-input-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-decoration: none;
}

.hess-form-input-icon img {
    display: block;
}

.hess-detail-card input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Form buttons */
.hess-detail-form-actions {
    display: block;
    gap: 0.75rem;
    align-items: center;
}

.hess-detail-form-actions div {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Sticky save/cancel bar (e.g. transformer edit, above Distribution Transformer Parameters) */
.hess-detail-form-actions-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #FFFFFF;
    padding: 0.75rem;
    margin-bottom: 0.25rem;
}

/* Button icons inherit from base .hess-button-icon class - no additional styles needed */

.hess-detail-form-button {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    background-color: #FFFFFF;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.hess-detail-form-button:hover:not(:disabled) {
    background-color: #F9FAFB;
    border-color: #9CA3AF;
}

.hess-detail-form-button:active:not(:disabled) {
    background-color: #F3F4F6;
}

.hess-detail-form-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #F3F4F6;
    color: #9CA3AF;
}

.hess-detail-form-button-primary {
    background-color: #049660;
    color: #fff;
    border-color: #049660;
}

.hess-detail-form-button-primary:hover:not(:disabled) {
    background-color: #049660;
    border-color: #049660;
}

.hess-detail-form-button-primary:active:not(:disabled) {
    background-color: #049660;
}

.hess-detail-form-warning {
    font-size: inherit;
    font-style: italic;
    color: #6B7280;
    margin-top: 0.5rem;
}

/* Small button for "Set Recommended" actions */
.hess-detail-form-button-small {
    padding: 0.375rem 0.75rem;
    font-size: inherit;
    font-weight: 500;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    background-color: #FFFFFF;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    white-space: nowrap;
}

.hess-detail-form-button-small:hover:not(:disabled) {
    background-color: #F9FAFB;
    border-color: #9CA3AF;
}

.hess-detail-form-button-small:active:not(:disabled) {
    background-color: #F3F4F6;
}

.hess-detail-form-button-small:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #F3F4F6;
    color: #9CA3AF;
}

/* Alert section header with button */
.hess-detail-card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.hess-detail-card-header-with-action h2 {
    margin: 0;
    flex: 1;
}

.hess-detail-card-header-with-action .hess-detail-form-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.hess-detail-card-header-with-action>div {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hess-detail-navigation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-right: 1.25rem;
    font-size: 0.7125rem;
}

.hess-detail-navigation input[type="button"],
.hess-detail-navigation button {
    border: 1px solid #D1D5DB;
    font-size: inherit;
    background-color: #F3F4F6;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    border-radius: 0.375rem;
    color: #374151;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
    min-width: 2.5rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hess-detail-navigation input[type="button"]:hover:not(:disabled),
.hess-detail-navigation button:hover:not(:disabled) {
    background-color: #E5E7EB;
    border-color: #9CA3AF;
}

.hess-detail-navigation input[type="button"]:disabled,
.hess-detail-navigation button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #F3F4F6;
    color: #9CA3AF;
}

.hess-detail-navigation select {
    border: 1px solid #D1D5DB;
    font-size: inherit;
    background-color: #FFFFFF;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    color: #374151;
    max-width: 200px;
    height: 2rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    padding-right: 2rem;
}

.hess-detail-image {
    margin-bottom: 0rem;
}

.hess-detail-image img {
    width: 100%;
    max-width: 330px;
    height: auto;
    border: 0;
    margin: auto !important;
}

/* #map_canvas in transformerdetails.jsp (inside .hess-detail-card) */
.hess-detail-card #map_canvas {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    height: 230px !important;
}

.hess-detail-graphs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.hess-detail-graph-item {
    background-color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0.1rem;
    min-height: 125px;
    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hess-detail-graph-item iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0 0 8px 8px;
    /* Smooth corners */
}

.hess-detail-graph-item .hess-chart-container {
    width: 100%;
    height: 100%;
    min-height: 133px;
    border-radius: 0 0 8px 8px;
    /* Smooth corners */
    position: relative;
}

.hess-chart-container {
    position: relative;
}

.hess-chart-container>div[id^="chart-"],
.hess-chart-container>div[id*="chart-"] {
    min-width: 200px;
    height: 200px;
    margin: 0 auto;
    z-index: 1;
}

.hess-chart-linkout {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.hess-chart-error {
    color: red;
}

.hess-detail-message-box {
    position: fixed;
    z-index: 999;
    border: 2px solid #000000;
    background-color: #DDDDDD;
    top: 125px;
    left: 200px;
    width: 300px;
    min-height: 300px;
    padding: 0.3125rem;
    visibility: hidden;
    overflow: auto;
    border-radius: 0.25rem;
}


/* Column containers - each column flows independently */
.hess-detail-column-left,
.hess-detail-column-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.hess-detail-column-left .hess-grid-filter {
    margin-bottom: 0rem !important
}

/* Ensure form elements don't interfere with flex layout */
.hess-detail-page form {
    display: contents;
}

/* Right column needs padding to match left column visual spacing */
/* Cards have 1.25rem internal padding, so right column content should have similar spacing */
.hess-detail-column-right {
    padding-right: 1.25rem;
    box-sizing: border-box;
}

/* ==========================================================================
   GENERIC DABLE STYLES (Applies to ALL grids)
   ========================================================================== */

/* 1. Target ANY Header or Footer created by Dable - consolidated with specific HESS styles below */
div[id$="Dable_header"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: transparent !important;
    font-size: inherit;
    flex-wrap: wrap;
    gap: 0rem;
}

/* 2. Style the "Show Entries" and "Search" containers inside header */
div[id$="Dable_header"]>div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 3. Style Inputs in header (Search bar) */
div[id$="Dable_header"] input {
    border: 1px solid #9CA3AF;
    padding: 0.375rem 0.5rem;
    font-size: inherit;
    border-radius: 0.25rem;
    background-color: #FFFFFF;
}

/* 5. Style Pager Buttons (Targeting both old 'table-page' and new 'hess-dable-pager-btn') */
div[id$="Dable_footer"] li.table-page input[type="button"],
div[id$="Dable_footer"] li.hess-dable-pager-btn input[type="button"] {
    padding: 0.25rem 0.5rem;
    font-size: inherit;
    border: 1px solid #9CA3AF;
    background-color: #FFFFFF;
    color: #1F2937;
    border-radius: 0.25rem;
    cursor: pointer;
    min-width: 24px;
}

/* Hover State */
div[id$="Dable_footer"] li.table-page input[type="button"]:hover:not(:disabled),
div[id$="Dable_footer"] li.hess-dable-pager-btn input[type="button"]:hover:not(:disabled) {
    background-color: #F3F4F6;
    border-color: #6B7280;
}

/* Active State (Disabled button = Current Page) */
div[id$="Dable_footer"] li[disabled] input[type="button"] {
    background-color: #FFFFFF !important;
    color: #374151 !important;
    border: 1px solid #D1D5DB !important;
    cursor: default;
    opacity: 1;
}

/* Previous/Next Buttons when disabled (greyed out) */
div[id$="Dable_footer"] li[disabled] input[value="Prev"],
div[id$="Dable_footer"] li[disabled] input[value="Next"],
div[id$="Dable_footer"] li[disabled] input[value="First"],
div[id$="Dable_footer"] li[disabled] input[value="Last"] {
    background-color: #F3F4F6 !important;
    color: #9CA3AF !important;
    border-color: #D1D5DB !important;
    cursor: not-allowed;
}

/* Target all table icons inside the grid */
div[id$="Dable"] table td img {
    height: 20px !important;
    width: auto !important;
    margin: 0 4px !important;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Specific tweaks if the 'i' info icon needs to be smaller/larger than others */
div[id$="Dable"] table td img[src*="info"],
div[id$="Dable"] table td img[src*="help"] {
    height: 18px !important;
    opacity: 0.8;
}

/* Hover effect for all action icons */
div[id$="Dable"] table td img:hover {
    transform: scale(1.2);
    filter: brightness(1.1);
    opacity: 1 !important;
}

/* Center content in cells that have icons */
div[id$="Dable"] table td {
    vertical-align: middle !important;
}

/* If a cell contains ONLY icons or mixed text/icons, align them */
div[id$="Dable"] table td a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

div[id$="Dable"] table td img {
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1));
}


/* ============================================
   Map Filter Sidebar Styles (dtmmap.jsp)
   ============================================ */

/* Tree panel modernization */
#treePanel {
    font-size: 0.875rem;
    line-height: 1.8;
    min-height: 200px;
    width: 100%;
}

/* Tree container divs - ensure proper spacing and alignment */
#treePanel>div {
    line-height: 1.8;
}

/* Tree node rows - ensure proper height and alignment without breaking functionality */
#treePanel div[style*="height"] {
    line-height: 1.8 !important;
    min-height: 24px !important;
    vertical-align: middle !important;
}

/* Tree images/icons - proper size and alignment */
#treePanel img {
    height: 20px !important;
    width: auto !important;
    vertical-align: middle !important;
    margin-right: 4px;
    display: inline-block;
}

/* Tree links - proper alignment with icons */
#treePanel a {
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    vertical-align: middle;
    display: inline;
    line-height: 1.8;
}

#treePanel a:hover {
    color: #2563EB;
    text-decoration: underline;
}

/* Ensure the tree structure doesn't break with our styles */
#treePanel table,
#treePanel table tr,
#treePanel table td {
    border: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

/* ============================================ Tree Page Styles (tree.jsp) ============================================ */

.hess-tree-controls {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
}

.hess-tree-filter-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hess-tree-container {
    padding: 1rem;
    background-color: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    min-height: 400px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.8;
}

/* Tree container styling - reuse treePanel styles */
.hess-tree-container>div {
    line-height: 1.8 !important;
    min-height: 24px;
    display: flex;
    align-items: center;
}

.hess-tree-container img {
    height: 20px !important;
    width: auto !important;
    vertical-align: middle !important;
    margin-right: 4px;
    display: inline-block;
    flex-shrink: 0;
}

.hess-tree-container a {
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    line-height: 1.8;
    padding: 2px 0;
}

.hess-tree-container a:hover {
    color: #2563EB;
    text-decoration: underline;
}

.hess-tree-container table,
.hess-tree-container table tr,
.hess-tree-container table td {
    border: none;
    padding: 0;
}

/* Map filter section - card-style containers */
.hess-map-filter-section {
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background-color: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
}

.hess-map-filter-section h4 {
    margin-top: 0;
    margin-bottom: 0rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F2937;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 0.5rem;
}

/* Collapsible section header */
.hess-map-filter-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 0.75rem -0.5rem;
    border-radius: 0.375rem 0.375rem 0 0;
}

.hess-map-filter-section-toggle:hover {
    background-color: #F9FAFB;
}

.hess-map-filter-toggle-icon {
    font-size: inherit;
    color: #6B7280;
    transition: transform 0.2s;
    display: inline-block;
    width: 1rem;
    text-align: center;
}

.hess-map-filter-section-content {
    display: none;
}

/* Map filter checkbox rows - reuses .hess-grid-filter-checkbox pattern */
.hess-map-filter-checkbox-row {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.15rem 0;
}

.hess-map-filter-checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

.hess-map-filter-checkbox-row label {
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    flex: 1;
}

/* Map filter button - full width primary button */
.hess-map-filter-button {
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: #2563EB;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 0.5rem;
}

.hess-map-filter-button:hover {
    background-color: #1D4ED8;

}

.hess-map-filter-button:active {
    background-color: #1E40AF;
}

/* Map filter select - full width, reuses .hess-grid-filter-select base styles */
.hess-map-filter-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    background-color: white;
    color: #1F2937;
}

.hess-map-filter-select:focus {
    outline: none;
    border-color: #2563EB;

}

/* Map filter label - reuses .hess-grid-filter-label base styles */
.hess-map-filter-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}

/* Map key/legend section - in sidebar (deprecated, kept for backward compatibility) */
.hess-map-key {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
}

.hess-map-key h4 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1F2937;
}

.hess-map-key table {
    width: 100%;
    border-collapse: collapse;
}

.hess-map-key td {
    padding: 0.375rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.hess-map-key td:first-child {
    font-weight: 500;
}

.hess-map-key img {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

/* Map key overlay - positioned on map at bottom left */
.hess-map-key-overlay {
    position: absolute;
    bottom: 20px;
    left: 300px;
    z-index: 97 !important;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 0.5rem;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    backdrop-filter: blur(4px);
    min-width: 180px;
    pointer-events: auto;
}

.hess-map-key-overlay h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1F2937;
}

.hess-map-key-overlay table {
    width: 100%;
    border-collapse: collapse;
}

.hess-map-key-overlay td {
    padding: 0.25rem 0;
    font-size: 0.9rem;
    color: #374151;
}

.hess-map-key-overlay td:first-child {
    font-weight: 500;
}

.hess-map-key-overlay img {
    height: 18px;
    width: auto;
    vertical-align: middle;
}

/* Map Controls Overlay */
.hess-map-controls-overlay {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 97;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 120px;
}

.map-type-btn.active {
    background-color: #2563EB !important;
    color: white !important;
    border-color: #2563EB !important;
    font-weight: 600;
}

.map-type-btn:hover {
    background-color: #e5e7eb !important;
}

.map-type-btn.active:hover {
    background-color: #1d4ed8 !important;
}

/* ============================================ Responsive Map Styles (dtmmap.jsp) ============================================ */

/* Mobile filter sidebar toggle button */
.hess-map-filter-toggle-btn {
    display: none;
    position: fixed;
    top: 65px;
    right: 10px;
    z-index: 99;
    background-color: #2563EB;
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);*/
    transition: background-color 0.2s;
}

.hess-map-filter-toggle-btn:hover {
    background-color: #1D4ED8;
}

.hess-map-filter-toggle-btn:active {
    background-color: #1E40AF;
}


/* ============================================ Device Summary Bottom Sidebar ============================================ */

.hess-device-summary-sidebar {
    position: fixed;
    bottom: -600px;
    left: 0;
    right: 0;
    height: 350px;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-top: 2px solid #2563EB;
    /*box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);*/
    z-index: 100002;
    transition: bottom 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.hess-device-summary-sidebar.active {
    bottom: 0;
}

.hess-device-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background-color: #2563EB;
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hess-device-summary-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFFFFF;
}

.hess-device-summary-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.hess-device-summary-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hess-device-summary-content {
    flex: 1;
    overflow-y: auto;
    padding-top: 0.15rem;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.hess-device-summary-content table {
    width: 100%;
    border-collapse: collapse;
}

.hess-device-summary-content table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #E5E7EB;
}

.hess-device-summary-content table td:first-child {
    font-weight: 600;
    color: #374151;
    width: 45%;
}

.hess-device-summary-content>div:not(.device-summary-tabs) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.hess-device-summary-content table td:last-child {
    color: #1F2937;
}

.hess-device-summary-footer {
    padding: 0.5rem;
    border-top: 1px solid #E5E7EB;
    background-color: #F9FAFB;
    text-align: right;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.hess-device-summary-button {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    background-color: #2563EB;
    color: white;
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s;
}

.hess-device-summary-button:hover {
    background-color: #1D4ED8;
}

/* Device Summary Tabs */
.device-summary-tabs {
    width: 100%;
    display: block !important;
    /* Override any grid/flex from parent */
}

.device-summary-tab-buttons {
    display: flex !important;
    /* Force flex layout */
    flex-direction: row !important;
    /* Ensure horizontal layout */
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: 0.75rem;
}

.device-summary-tab-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #6B7280;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.device-summary-tab-btn:hover {
    color: #2563EB;
    background-color: #F3F4F6;
}

.device-summary-tab-btn.active {
    color: #2563EB;
    border-bottom-color: #2563EB;
    font-weight: 600;
}

.device-summary-tab-content {
    display: none;
}

.device-summary-tab-content.active {
    display: block;
}


/* ==========================================================================
   ALERT SETTINGS IMPROVEMENTS
   ========================================================================== */

/* 1. Standard Alert Section (Optional: adds a clean frame) */
.alert-section {
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

/* 2. CRITICAL Alert Section (The Highlighter) */
.critical-section {
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 5px solid #DC2626;
    border-radius: 8px;
    padding: 20px;
}

/* Make the Critical Header Red and add an Icon */
.critical-section h2,
.critical-section h3,
.critical-section .section-title {
    /* Adjust selector based on your HTML tag */
    color: #991B1B;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 0;
}

/* Adds a warning triangle before the text */
.critical-section h2::before,
.critical-section h3::before {
    content: "⚠️";
    margin-right: 10px;
    font-size: 1.2em;
}

/* 3. Input Fields inside Critical Section */
.critical-section input[type="text"],
.critical-section input[type="number"] {
    border-color: #FCA5A5;
    background-color: #FFF;
    font-weight: normal !important;
}

.critical-section input:focus {
    border-color: #DC2626 !important;
}

/* 4. "Set Recommended" Buttons - Make them pop */
/* This assumes those buttons have a class, if not, target them like this: */
.alert-section button,
.critical-section button {
    background-color: #FFFFFF;
    border: 1px solid #2563EB;
    color: #2563EB;
    font-weight: 600;
    transition: all 0.2s;
}

.alert-section button:hover,
.critical-section button:hover {
    background-color: #EFF6FF;
}

/* Specific style for Critical Section buttons to match the red theme */
.critical-section button {
    border-color: #DC2626;
    color: #DC2626;
}

.critical-section button:hover {
    background-color: #FEF2F2;
}

/* ============================================
   Event Types Modal (dtmevents.jsp)
   ============================================ */
#EventTypesTable {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    max-height: 700px;
    border: 2px solid #059669;
    z-index: 1000;
    visibility: hidden;
    opacity: 1;
    background-color: #D1D5DB;
    overflow-y: auto;
    overflow-x: auto;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);*/
    border-radius: 0.5rem;
}

#EventTypesTable .event-types-header {
    position: relative;
    padding: 0.625rem;
    background-color: #4A5568;
    color: white;
    border-radius: 0.5rem 0.5rem 0 0;
}

#EventTypesTable .event-types-header h4 {
    margin: 0;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
}

#EventTypesTable .event-types-close {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    background: #DC2626;
    color: white;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
    border-radius: 0.1875rem;
    font-weight: bold;
    border: none;
    font-size: 1.25rem;
    transition: background-color 0.2s;
}

#EventTypesTable .event-types-close:hover {
    background: #B91C1C;
}

#EventTypesTable .event-types-content {
    padding: 0.625rem;
}

/* ============================================
   Utility Classes for Common Inline Styles
   ============================================ */

/* Estimated readings indicator */
.hess-estimated-indicator {
    background-color: #B0C4DE;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    display: inline-block;
}

/* Error message text */
.hess-error-text {
    color: #DC2626;
    padding: 0.625rem;
    font-size: 0.875rem;
}

/* Common display utilities */
.hess-inline-block {
    display: inline-block;
}

.hess-vertical-align-middle {
    vertical-align: middle;
}

/* Padding and Margin Utility Classes */
/* Padding - All sides */
.p-0 {
    padding: 0;
}

.p-1 {
    padding: 0.25rem;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

/* Padding - Top */
.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: 0.25rem;
}

.pt-2 {
    padding-top: 0.5rem;
}

.pt-3 {
    padding-top: 0.75rem;
}

.pt-4 {
    padding-top: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

/* Padding - Right */
.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: 0.25rem;
}

.pr-2 {
    padding-right: 0.5rem;
}

.pr-3 {
    padding-right: 0.75rem;
}

.pr-4 {
    padding-right: 1rem;
}

.pr-5 {
    padding-right: 1.25rem;
}

/* Padding - Bottom */
.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 0.25rem;
}

.pb-2 {
    padding-bottom: 0.5rem;
}

.pb-3 {
    padding-bottom: 0.75rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.pb-5 {
    padding-bottom: 1.25rem;
}

/* Padding - Left */
.pl-0 {
    padding-left: 0;
}

.pl-1 {
    padding-left: 0.25rem;
}

.pl-2 {
    padding-left: 0.5rem;
}

.pl-3 {
    padding-left: 0.75rem;
}

.pl-4 {
    padding-left: 1rem;
}

.pl-5 {
    padding-left: 1.25rem;
}

/* Padding - Horizontal (left and right) */
.px-0 {
    padding-left: 0;
    padding-right: 0;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Padding - Vertical (top and bottom) */
.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Margin - All sides */
.m-0 {
    margin: 0;
}

.m-1 {
    margin: 0.25rem;
}

.m-2 {
    margin: 0.5rem;
}

.m-3 {
    margin: 0.75rem;
}

.m-4 {
    margin: 1rem;
}

.m-5 {
    margin: 1.25rem;
}

/* Margin - Top */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-5 {
    margin-top: 1.25rem;
}

/* Margin - Right */
.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.mr-4 {
    margin-right: 1rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

/* Margin - Bottom */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-5 {
    margin-bottom: 1.25rem;
}

/* Margin - Left */
.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 0.25rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.ml-3 {
    margin-left: 0.75rem;
}

.ml-4 {
    margin-left: 1rem;
}

.ml-5 {
    margin-left: 1.25rem;
}

/* Margin - Horizontal (left and right) */
.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.mx-3 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mx-5 {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

/* Margin - Vertical (top and bottom) */
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-5 {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

/* Page Loading Overlay */
.hess-page-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    z-index: 9999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto !important;
}

.hess-page-loading-overlay.active {
    display: flex !important;
}

.hess-page-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #E5E7EB;
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: hess-spin 0.8s linear infinite;
}

@keyframes hess-spin {
    to {
        transform: rotate(360deg);
    }
}

.hess-page-loading-text {
    margin-top: 20px;
    font-size: 16px;
    color: #374151;
}

/* YouTrack Support Modal - Modern Tailwind-like styling */
.youtrack-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease-out;
}

.youtrack-modal-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.youtrack-modal {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    height: 70vh;
    overflow: hidden;
    position: relative;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
}

.youtrack-modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    color: #1F2937;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.youtrack-modal-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F2937;
}

.youtrack-modal-close {
    background: transparent;
    border: none;
    color: #6B7280;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

.youtrack-modal-close:hover {
    background: #F3F4F6;
    color: #1F2937;
}

.youtrack-modal-close:active {
    background: #E5E7EB;
}

.youtrack-modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
}

.youtrack-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    flex: 1;
    min-height: 400px;
}

/* General close button (if used outside youtrackContainer) */
#closeBtn {
    position: absolute;
    top: 0.3125rem;
    right: 0.3125rem;
    background: #E5E7EB;
    color: #000;
    border: 1px solid #D1D5DB;
    padding: 0.3125rem 0.625rem;
    cursor: pointer;
    border-radius: 0.25rem;
    font-weight: bold;
    z-index: 1001;
}

#closeBtn:hover {
    background: #D1D5DB;
}

/* Add Grid Components Page Styles */
.add-grid-components-container {
    position: relative;
    min-height: 1000px;
    width: 1000px;
    left: 10px;
}

.add-grid-components-section {
    position: absolute;
    width: 1000px;
    height: 250px;
    background-color: #EEE;
}

.add-grid-components-section-area {
    top: 55px;
}

.add-grid-components-section-substation {
    top: 325px;
}

.add-grid-components-section-feeder {
    top: 595px;
}

.add-grid-components-section-title {

    font-size: 12px;
    font-weight: bolder;
}

.add-grid-components-button {
    border-right: #ffffff 1px solid;
    border-top: #ffffff 1px solid;
    font-size: 12px;
    font-weight: bolder;
    border-left: #ffffff 1px solid;
    border-bottom: #ffffff 1px solid;
    background-color: #CCCCCC;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
}

.add-grid-components-button:hover {
    background-color: #BBBBBB;
}

.add-grid-components-scrollable {
    overflow-y: scroll;
    height: 230px;
}

/* Reuse existing error text class */
.add-grid-components-error {
    color: red;
    font-weight: bolder;
}

/* Alert Email Launcher Form Styles - Reuse generic form classes */
.alert-email-form-container {
    padding: 1.25rem;
}

.alert-email-form-description {
    margin-bottom: 1.25rem;
    line-height: 1.6;
}

/* Area List Container */
.area-list-container {
    width: 100%;
    height: 550px;

    font-size: 12px;
    overflow-y: scroll;
}

/* Bulk Add Form Styles */
.hess-content-container {
    max-width: none;
    width: 100%;
    padding: 1rem;
}

.hess-form-description {
    margin-bottom: 1.5rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.hess-alert-error {
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.hess-form-group {
    margin-bottom: 1.5rem;
}

.hess-form-group-large {
    margin-bottom: 2rem;
}

.hess-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.hess-textarea {
    width: 100%;
    max-width: 500px;
    font-size: 0.9rem;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    resize: vertical;
}

.hess-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hess-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.hess-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    background-color: white;
    min-width: 120px;
}

.hess-form-helper-text {
    margin-left: 0.5rem;
    color: #6b7280;
}

.hess-form-actions {
    margin-top: 2rem;
}

/* Coming Soon Page */
.coming-soon-container {
    position: relative;
    min-height: 600px;
    width: 1000px;
}

/* Contract Expired Page */
.contract-expired-container {
    position: relative;
    min-height: 800px;
    width: 700px;
    font-size: 12pt;
}

.contract-expired-warning {
    background-color: yellow;

    font-weight: bolder;
    font-size: 12pt;
}

/* Change Password Page */
.hess-detail-title-spacing {
    margin-bottom: 1rem;
}

/* Override hess-content-container for change password page - align left and make larger */
.change-password-page .hess-content-container {
    max-width: none;
    width: 100%;
    padding: 1rem;
}

.change-password-form-container {
    padding: 1.25rem;
}

.change-password-description {
    width: 600px;
    max-width: 100%;
}

.change-password-warning {
    width: 600px;
    max-width: 100%;
    background-color: yellow;
}

.change-password-table {
    background-color: #E0E0E0;
    width: 700px;
    max-width: 100%;
}

.change-password-input {
    border: none;
    padding-left: 5px;
    font-size: 12px;
}

/* Reuse existing error styling pattern */
.change-password-error {
    color: red;
    font-weight: bold;
}

/* Config Meters Page */
.config-meters-container {
    position: relative;
    top: 10px;
    left: 5px;
    min-height: 900px;
    width: 100%;
}

.config-meters-title {

    font-size: 12pt;
}

.config-meters-subtitle {

    font-size: 12px;
}

.config-meters-list {
    position: absolute;
    top: 65px;
    left: 0px;
    width: 100%;
    height: 400px;

    font-size: 12px;
    overflow-y: scroll;
}

.config-meters-form {
    position: absolute;
    top: 485px;
    left: 0px;
    width: 100%;
    height: 350px;

    font-size: 12px;
    overflow-y: scroll;
}

.config-meters-form-table {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 90%;
    height: 90%;
}

.config-meters-help-text {

    font-size: 12px;
}


/* Dashboard Page */
.dashboard-container {
    position: relative;
    height: 800px;
    width: 1200px;
    font-size: 12px;
}

.dashboard-card {
    position: absolute;
    width: 550px;
    min-height: 300px;
    border: thin solid cyan;
    border-radius: 10px;
    padding: 10px;
    background-color: #eeffff;
}

.dashboard-card-top-left {
    left: 10px;
    top: 10px;
}

.dashboard-card-top-right {
    left: 610px;
    top: 10px;
}

.dashboard-card-bottom-left {
    left: 10px;
    top: 400px;
}

.dashboard-card-bottom-right {
    left: 610px;
    top: 400px;
}

.dashboard-card-title {
    font-size: 12pt;
    font-weight: bolder;
}

/* Daily Consumption Page */
.daily-consumption-container {
    position: relative;
    top: 10px;
    left: 10px;
    height: 900px;
    width: 600px;
}

.daily-consumption-title {

    font-size: 12pt;
}

.daily-consumption-subtitle {

    font-size: 11pt;
}

.daily-consumption-filter {
    width: 1400px;
    height: 25px;
    border-radius: 10em;
    border-color: black;
    border-width: 2px;

    font-size: 12px;
}

.daily-consumption-hour-input {
    width: 50px;
}

.daily-consumption-table-container {
    width: 100%;
    height: 750px;
    overflow-y: scroll;
}

.daily-consumption-table {

    font-size: 9pt;
}

.daily-consumption-table-header {
    background-color: #CFCFCF;

    font-size: 12px;
    font-weight: bold;
}

.daily-consumption-calculator {
    position: absolute;
    top: 250px;
    left: 700px;
    width: 600px;
    border-radius: 10;

    font-size: 12px;
}

.daily-consumption-input-right {
    text-align: right;
}

/* DTM Data Page */
.dtm-data-table-container {
    width: 100%;
    height: calc(100vh - 400px);
    overflow-y: auto;
    overflow-x: auto;
}

/* Form inline styles */
.hess-form-inline {
    display: inline;
}

.hess-form-spacing-left {
    margin-left: 0.5rem;
}

.hess-form-inline-group {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.hess-radio-label {
    margin-right: 0.5rem;
}

.hess-calendar-icon {
    vertical-align: middle;
}

/* Link styles */
.hess-link-inherit {
    text-decoration: none;
    color: inherit;
}

/* Detail card spacing and variants */
.hess-detail-card-spacing {
    margin-bottom: 1rem;
}

.hess-detail-card-subtitle {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.hess-detail-card-text-small {
    font-size: 0.875rem;
    line-height: 1.6;
}

.hess-detail-card-estimated {
    background-color: #D5FFD5;
    cursor: pointer;
}

.hess-detail-card-anomaly {
    background-color: #882288;
    color: white;
    cursor: pointer;
}

.hess-detail-card-dismissible {
    cursor: pointer;
}

.hess-info-icon {
    height: 16px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.hess-detail-image-full {
    border: 0;
    width: 100%;
}

.hess-message-box-actions {
    position: absolute;
    bottom: 10px;
    left: 25px;
}

.hess-detail-button-secondary {
    border: 1px solid #ffffff;
    font-size: 8pt;
    background-color: #DDDDDD;
    cursor: pointer;
}

/* Table row styles for dtmdata and meter tables - consolidated definitions */
tr .initial {
    background-color: #FFFFFF;
    color: #000000;
}

tr .normal {
    background-color: #FFFFFF;
}

tr .estimated {
    background-color: #D5FFD5;
}

tr .anomaly {
    background-color: lavenderblush;
}

tr .highlight {
    background-color: #CCCCFF;
}

/* Bold text styling */
B {
    font-size: 12pt;
    font-weight: bold;
}

/* Sticky table headers */
th {
    position: sticky;
    top: 0;
    font-weight: bold;
    background-color: lightgray;
    opacity: 1;
    z-index: 10;
}

/* Error box high z-index */
.hess-error-high-z {
    z-index: 999;
}

/* Link detail title */
.hess-link-detail-title {
    text-decoration: none;
    color: blue;
    font-size: 12pt;
    font-weight: bold;
}

/* Detail navigation inline */
.hess-detail-navigation-inline {
    display: inline-block;
    margin-left: 1rem;
}

/* Graph parameters group title */
.hess-graph-parameters-group-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #4B5563;
}

/* Transformer data page specific styles */
.hess-data-download-form {
    background-color: #F3F4F6;
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: inherit;
    font-weight: normal;
    min-width: 200px;
    margin-right: 1rem;
}

.hess-data-download-form b {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

.hess-data-download-form select {
    border: 1px solid #FFFFFF;
    font-size: inherit;
    background-color: #DFDFDF;
    padding: 0.25rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.hess-data-download-form input[type="submit"] {
    border: 1px solid #FFFFFF;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background-color: #DDDDDD;
    padding: 0.5rem;
    cursor: pointer;
    width: 100%;
    margin-top: 0.5rem;
}

.hess-data-download-form input[type="submit"]:hover {
    background-color: #CCCCCC;
}

.hess-data-navigation-box {
    background-color: #DDDDDD;
    border-radius: 0.5rem;
    width: 320px;
    font-size: inherit;
    padding: 0.5rem 0.625rem;
    overflow-x: hidden;
}

.hess-data-navigation-box input[type="button"] {
    border: 1px solid #999999;
    font-size: inherit;
    background-color: #FFFFFF;
    width: 150px;
    padding: 0.375rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.hess-data-navigation-box input[type="button"]:hover:not(:disabled) {
    background-color: #F3F4F6;
}

.hess-data-navigation-box input[type="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hess-data-navigation-box select {
    border: 1px solid #999999;
    font-size: inherit;
    background-color: #FFFFFF;
    padding: 0.25rem;
    border-radius: 0.25rem;
    width: 100%;
    margin-top: 0.25rem;
}

.hess-date-range-form {
    width: 400px;
    border-radius: 0.625rem;
    padding: 0.5rem;
    font-size: inherit;
    font-weight: normal;
}

.hess-date-range-form input[type="text"] {
    border: 1px solid #666666;
    font-size: inherit;
    padding: 0.25rem;
    border-radius: 0.25rem;
    width: 125px;
}

.hess-date-range-form input[type="submit"] {
    border: 1px solid #FFFFFF;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 0.25rem;
    background-color: #CCCCCC;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.hess-date-range-form input[type="submit"]:hover {
    background-color: #BBBBBB;
}

.hess-data-table-container {
    width: 100%;
    height: 700px;
    overflow-y: scroll;
    overflow-x: scroll;
}

.hess-data-table-container table th {
    position: sticky;
    top: 0;
    font-weight: bold;
    background-color: #D1D5DB;
    opacity: 1;
    z-index: 10;
}

.hess-estimation-notice {
    background-color: #D5FFD5;
    padding: 0.5rem;
    border-radius: 0.25rem;
    font-size: inherit;
}

.hess-error-box {
    z-index: 999;
    border: 2px solid #000000;
    background-color: #DDDDDD;
    position: absolute;
    top: 100px;
    left: 200px;
    width: 600px;
    min-height: 300px;
    padding: 0.5rem;
}

.hess-error-box input[type="submit"] {
    border: 1px solid #FFFFFF;
    font-size: inherit;
    background-color: #DDDDDD;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
    margin-top: 1rem;
}

.hess-error-box input[type="submit"]:hover {
    background-color: #CCCCCC;
}

/* Graph page layout and parameters */
.hess-graph-page {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 100px);
    min-height: 600px;
    padding: 0.5rem;
}

.hess-graph-parameters {
    flex: 0 0 280px;
    background-color: #FFFFFF !important;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-y: auto;
    font-size: 0.9rem;
}

.hess-graph-parameters-section {
    margin-bottom: 1.5rem;
}

.hess-graph-parameters-section-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.hess-graph-parameters-group {
    margin-bottom: 0.75rem;
}

.hess-graph-parameters-group label {
    display: block;
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.hess-graph-parameters-group input[type="radio"],
.hess-graph-parameters-group input[type="checkbox"] {
    margin-right: 0.5rem;
    cursor: pointer;
}

.hess-graph-parameters-group select {
    width: 100%;
    margin-top: 0.25rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    background-color: #FFFFFF;
    color: #111827;
}

.hess-graph-parameters input[type="text"],
.hess-graph-parameters input[type="number"] {
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #111827;
    background-color: #FFFFFF;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.hess-graph-parameters input[type="text"][size],
.hess-graph-parameters input[type="number"][size] {
    width: auto;
    max-width: none;
    min-width: 4rem;
}

.hess-graph-parameters input[type="text"]:focus,
.hess-graph-parameters input[type="number"]:focus {
    outline: none;
    border-color: #6B7280;
}

.hess-graph-parameters-date-group {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.hess-graph-parameters-date-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    color: #6B7280;
}

.hess-graph-parameters-date-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hess-graph-parameters-date-input input {
    flex: 1;
}

.hess-graph-parameters-date-input a {
    display: inline-block;
}

.hess-graph-parameters-submit {
    margin-top: 1.5rem;
}

.hess-graph-parameters-submit button {
    width: 100%;
}

.hess-graph-area {
    flex: 1;
    min-width: 0;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    padding: 0.5rem;
    overflow: hidden;
}

.hess-graph-area iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.hess-graph-parameters-group table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.hess-graph-parameters-group table td {
    padding: 0.25rem;
    font-size: 0.9rem;
}


/* Grid container flex */
.hess-grid-container-flex {
    flex: 1;
    min-height: 0;
}

.hess-grid-container-spacing {
    margin-bottom: 1rem;
}

/* Dashboard-style table improvements */
.hess-detail-card-header-full-width {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
    padding: 0;
}

.hess-detail-card-header-title {
    margin: 0;
}

.hess-detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E5E7EB;
}

/* .hess-map-canvas is now only for transformerdetails.jsp - see rule below */


/* Make Google Maps controls 50% smaller for transformerdetails.jsp */
/* Zoom Control Container */
.hess-map-canvas .gm-style-control-stack,
.hess-map-canvas .gm-style .gm-zoom-control {
    transform: scale(0.8) !important;
    transform-origin: right bottom !important;
    /* Adjust origin based on position */
}

/* Fullscreen Control */
.hess-map-canvas .gm-fullscreen-control {
    transform: scale(0.8) !important;
    transform-origin: right top !important;
}

/* Map Type Control (Roadmap/Satellite) */
.hess-map-canvas .gm-style-mtc {
    transform: scale(0.8) !important;
    transform-origin: left top !important;
}

/* Selects the specific control wrapper for Zoom and Street View */
.hess-map-canvas .gmnoprint>div {
    transform: scale(0.8) !important;
}

/* Fixes the "Terms of Use" and "Report a Map Error" scale */
.hess-map-canvas .gm-style-cc {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important;
}

/* Target the Tilt/Rotate (Camera) control specifically */
.hess-map-canvas .gm-control-active.gm-tilt,
.hess-map-canvas .gm-control-active.gm-rotate,
.hess-map-canvas .gm-svpc {
    transform: scale(0.8) !important;
    transform-origin: right bottom !important;
}

/* If it is grouped in the modern 'Control Stack' */
.hess-map-canvas .gm-bundle-control-stack {
    transform: scale(0.8) !important;
    transform-origin: right bottom !important;
}

/* Target the specific corner container (usually bottom right) */
.hess-map-canvas .gmnoprint.gm-bundled-control {
    transform: scale(0.8) !important;
    transform-origin: right bottom !important;
}


/* 2. Target the Zoom control specifically */
.hess-map-canvas .gm-style .gm-zoom-control {
    transform: scale(0.9) !important;
    transform-origin: right bottom !important;
}

/* 3. The Fullscreen button (Top Right) */
.hess-map-canvas .gm-fullscreen-control {
    transform: scale(0.8) !important;
    transform-origin: right top !important;
    margin-right: -4px;
}



/* Target the specific buttons inside the camera control if they remain large */
.hess-map-canvas .gm-tilt button,
.hess-map-canvas .gm-rotate button {
    width: 32px !important;
    /* Default is usually 40px */
    height: 32px !important;
    /* Adjusting dimensions manually can help */
}

.hess-detail-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.hess-meta-text {
    font-size: inherit;
    color: #6B7280;
    font-weight: normal;
}

.hess-detail-card table thead th {
    background-color: #F9FAFB;
    font-weight: 600;
    text-align: left;
    padding: 0.3rem;
    padding-bottom: 0.75rem;
    /* Match original padding-bottom for better spacing */
    border-bottom: 2px solid #E5E7EB;
    font-size: 0.825rem !important;
    color: #374151;
}

.hess-detail-card table tbody td {
    padding: 0.5rem;
    border-bottom: 1px solid #F3F4F6;
}

/* Remove any border-top from table rows unless explicitly set */
.hess-detail-card table tbody tr {
    border-top: none !important;
}

.hess-unit {
    font-size: inherit;
    color: #6B7280;
    margin-left: 0.25rem;
}

.hess-phase-badge {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    background-color: #E5E7EB;
    color: #374151 !important;
    /* Explicit gray text color, not black */
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: inherit;
}

/* Fix table layout for Extremes & History table */
#hess-extremes-history-table {
    table-layout: fixed;
    width: 100%;
}

/* Style Column 1 (The Metric Name) */
#hess-extremes-history-table td:first-child {
    width: 25% !important;
    text-align: left;
    font-weight: bold;
}

/* Style Column 2 (The Phase Badge) */
#hess-extremes-history-table td:nth-child(2) {
    width: 3rem !important;
    text-align: left;
    padding: 0.25rem;
}

/* Hide borders on empty metric cells to simulate rowspan look */
#hess-extremes-history-table td.empty-metric {
    border-top: none;
    border-bottom: none;
}

/* Ensure the top of the group has a border */
#hess-extremes-history-table tr:has(strong) td:first-child {
    border-bottom: none;
}

/* Fallback for browsers without :has() support */
#hess-extremes-history-table td:first-child strong {
    display: block;
}

/* Make phase badges smaller and more compact in Extremes & History table */
#hess-extremes-history-table .hess-phase-badge {
    width: 1.25rem !important;
    height: 1.25rem !important;
    line-height: 1.25rem !important;
    font-size: 0.65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hess-status-ok {
    color: #059669;
    font-weight: 600;
}

.hess-val-warning {
    color: #D97706;
    font-weight: 600;
}

.hess-val-critical {
    color: #DC2626;
    font-weight: 600;
    background-color: #FEF2F2;
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
}

/* Full-width card for consumption table */
.hess-detail-card-full-width {
    grid-column: 1 / -1;
}

/* Two-column layout for phase monitor and extremes */
.hess-detail-dashboard-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 1rem;
    grid-column: 1 / -1;
}

/* Map container */
.hess-map-container {
    position: relative;
    min-height: calc(100vh - 110px);
}

.hess-map-container>.hess-sidebar-filters-absolute {
    padding: 0.5rem !important;
}

/* Sidebar filters absolute */
.hess-sidebar-filters-absolute {
    position: absolute;
    left: 0;
    top: 0;
    width: 280px;
    height: 100%;
    overflow-y: auto;
    background-color: #f5f5f5;
    border-right: 1px solid #ddd;
    padding: 1rem;
}

.hess-sidebar-filters-title {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #1F2937;
}

/* Edit page containers */
.hess-edit-page-container {
    position: relative;
    min-height: 640px;
    width: 1200px;
}

.hess-edit-form-container {
    position: absolute;
    left: 55px;
    top: 5px;
    width: 675px;
    min-height: 625px;
    border: none;

    font-size: 8pt;
    padding: 5px;
}

.hess-edit-form-title {
    font-size: 12px;
    font-weight: bold;
}

.hess-edit-form-table {
    width: 100%;
    background-color: #E0E0E0;
}

.hess-edit-form-table-borderless {
    width: 100%;
    border: none;
}

.hess-edit-form-label-width {
    width: 200px;
}

.hess-edit-form-input {
    border: none;
    padding-left: 5px;
    font-size: 12px;
}

.hess-edit-form-input-width {
    width: 300px;
}

.hess-edit-form-actions {
    padding-top: 20px;
}

.hess-edit-form {
    font-size: 12px;
}

.hess-edit-form-cell-linen {
    background-color: linen;
}

.hess-edit-form-cell-lightcyan {
    background-color: lightcyan;
}

.hess-edit-form-description {
    width: 950px;

    font-size: 12px;
}

/* Error modal */
.hess-error-modal {
    z-index: 999;
    border: medium solid black;
    background-color: #ddd;
    position: absolute;
    top: 100px;
    left: 200px;
    width: 600px;
    min-height: 300px;
    padding: 5px;
}

/* Edit meter reading */
.hess-edit-meter-container {
    position: relative;
    top: 10px;
    left: 5px;
    min-height: 900px;
    width: 1200px;
}

.hess-edit-page-title {

    font-size: 14px;
}

.hess-error-text-large {

    font-size: 14px;
    color: red;
}

.hess-success-text {
    color: green;

    font-weight: bolder;
}

.hess-edit-meter-form {
    padding: 10px;
    border: solid thin blueviolet;
    width: 600px;

    font-size: 12px;
    background-color: lightgray;
}

.hess-edit-meter-warning-yellow {
    background-color: yellow;
    color: red;
    font-weight: bold;
    font-size: 12px;
    width: 100%;
}

.hess-edit-meter-warning-pink {
    background-color: lightpink;
    font-size: 12px;
    width: 100%;
}

.hess-image-no-border {
    border: none;
}

/* Required field indicator */
.hess-required-field {
    color: red;
    font-weight: bold;
}

/* Edit form scrollable container */
.hess-edit-form-scrollable {
    height: 400px;
    overflow-y: scroll;
}


/* Set up the container as a Grid */
.hess-detail-form-actions>div:first-child {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0.75rem;
    align-items: center;
}

/* Target the first button ONLY when there are exactly 3 buttons */
/* This makes the "Return" button span the entire top row */
.hess-detail-form-actions>div:first-child> :first-child:nth-last-child(3) {
    grid-column: 1 / -1;
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   HESS DABLE CONFIGURATION CLASSES
   ========================================================================== */


div[id$="Dable"] table tbody tr:nth-child(even) {
    background-color: #F9FAFB;
}

/* ==========================================================================
   HESS DABLE CONFIGURATION CLASSES (Specific Overrides)
   ========================================================================== */

/* 1. The Header Container */
.hess-dable-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background-color: #F9FAFB;
    border-bottom: none;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    font-size: 0.9rem;
    color: #374151;
}

/* Flexbox for the Left/Right divs inside header */
.hess-dable-header>div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Style Inputs and Selects inside the Header */
.hess-dable-header input[type="text"],
.hess-dable-header select {
    padding: 0.375rem 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #1F2937;
    background-color: #FFFFFF;
    outline: none;
}

.hess-dable-header input[type="text"]:focus,
.hess-dable-header select:focus {
    border-color: #2563EB;
    /*box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);*/
}

/* 2. The Footer Container - Balanced Dashboard Look */
div[id$="Dable_footer"],
.hess-dable-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.5rem !important;
    background-color: #F9FAFB !important;
    border-top: 1px solid #E5E7EB !important;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    flex-wrap: wrap;
    gap: 0rem;
}

/* Style the "Show Entries" containers inside footer */
div[id$="Dable_footer"]>div:not(:first-child) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Style Selects in footer (Show dropdown) */
div[id$="Dable_footer"] select {
    border: 1px solid #9CA3AF;
    padding: 0.375rem 0.5rem;
    font-size: inherit;
    border-radius: 0.25rem;
    background-color: #FFFFFF;
}

/* Group Left side (Show Entries + Showing text) */
div[id$="Dable_footer"]>div:first-child,
.hess-dable-footer>div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: #4B5563;
}

/* Remove default list styles from the pager UL */
.hess-dable-footer ul,
div[id$="Dable_footer"] ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.hess-dable-footer li {
    margin: 0;
    padding: 0;
}

/* 3. Pager Buttons (Assigned via pagerButtonsClass) */
.hess-dable-pager-btn input[type="button"],
.dable-reset-sort {
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #374151;
    padding: 0.275rem 0.3rem !important;
    cursor: pointer;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    min-width: 2rem;
}


.hess-dable-pager-btn input[type="button"]:hover,
.dable-reset-sort:hover {
    background-color: #F3F4F6;
    border-color: #9CA3AF;
    color: #111827;
}

/* Active Page Style (Disabled button = Active Page) */
.hess-dable-pager-btn[disabled] input[type="button"] {
    background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    color: #374151 !important;
    cursor: default;
    opacity: 1;
}

/* Navigation buttons (Prev/Next) when disabled */
.hess-dable-pager-btn[disabled] input[value="Prev"],
.hess-dable-pager-btn[disabled] input[value="Next"],
.hess-dable-pager-btn[disabled] input[value="First"],
.hess-dable-pager-btn[disabled] input[value="Last"] {
    background-color: #F3F4F6 !important;
    color: #9CA3AF !important;
    border-color: #E5E7EB !important;
    cursor: not-allowed;
}

/* 4. Hide the "Clear" divs created by Dable */
.hess-dable-header>div:empty,
.hess-dable-footer>div:empty {
    display: none !important;
}

/* 5. Group Header Styles */
.dable-group-header {
    background-color: #b9bec9 !important;
    color: #111827 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    border-top: 1px solid #D1D5DB !important;
    border-bottom: 1px solid #D1D5DB !important;
    font-size: 0.9rem !important;
    transition: background-color 0.15s ease-in-out;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.dable-group-header:hover {
    background-color: #D1D5DB !important;
}

.dable-arrow-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    width: 12px !important;
    height: 1em !important;
    line-height: 1em !important;
}

.dable-group-label {
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
}

.dable-group-header span:not(.dable-arrow-wrapper):not(.dable-group-label) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 8px !important;
    color: #4B5563;
    font-size: inherit;
    transition: transform 0.2s;
    vertical-align: middle !important;
}

/* The Label (e.g. "PRIORITY:") */
.dable-group-header strong {
    color: #4B5563;
    font-weight: 500;
    margin-right: 0.5rem;
    text-transform: uppercase;
    font-size: inherit;
    letter-spacing: 0.05em;
    vertical-align: middle !important;
}

/* Style the Header and Footer to stay fixed */
.hess-dable-header,
.hess-dable-footer {
    flex: 0 0 auto !important;
    z-index: 20;
    /*box-shadow: 0 1px 2px rgba(0,0,0,0.05);*/
}

.dable-scroll-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important; /* allow flex child to shrink so overflow scroll works */
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: relative;
    width: 100%;
}

/* Ensure the Table Header sticks to the top of the WRAPPER, not the page */
.dable-scroll-wrapper table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10;
    background-color: #E5E7EB !important;
}

/* Only first column sticky (dtmdata, transformerdata, GFSshowReadings). No other code/layout changes. */
#DTMDataDable .dable-scroll-wrapper th[data-column-index="0"],
#TransformerDataDable .dable-scroll-wrapper th[data-column-index="0"],
#GFSReadingsDable .dable-scroll-wrapper th[data-column-index="0"] {
    position: sticky !important;
    left: 0 !important;
    z-index: 11 !important;
}

#DTMDataDable .dable-scroll-wrapper td[data-column-index="0"],
#TransformerDataDable .dable-scroll-wrapper td[data-column-index="0"],
#GFSReadingsDable .dable-scroll-wrapper td[data-column-index="0"] {
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
}

#DTMDataDable tr:nth-child(even) td,
#TransformerDataDable tr:nth-child(even) td,
#GFSReadingsDable tr:nth-child(even) td {
    background-color: #F9FAFB;
}

#DTMDataDable tr:nth-child(odd) td,
#TransformerDataDable tr:nth-child(odd) td,
#GFSReadingsDable tr:nth-child(odd) td {
    background-color: #FFFFFF;
}

#DTMDataDable tr:hover td,
#TransformerDataDable tr:hover td,
#GFSReadingsDable tr:hover td {
    background-color: #f4f6f8;
}

.dable-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 !important;
    vertical-align: middle;

    /* Draw the Triangle using borders */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #4B5563;
    /* Dark Gray Color */

    /* Animation */
    transition: transform 0.2s ease;
    transform-origin: center;
}

/* State: Collapsed (Point Right) */
.dable-arrow.collapsed {
    transform: rotate(-90deg);
}

/* State: Expanded (Point Down) */
.dable-arrow.expanded {
    transform: rotate(0deg);
}

/* Hover State */
.dable-group-header:hover .dable-arrow {
    border-top-color: #111827;
    /* Turn black on hover */
}

/* ==========================================================================
   DABLE LOADING OVERLAY
   ========================================================================== */

/* The container that covers the table */
.dable-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    /* Semi-transparent white */
    backdrop-filter: blur(2px);
    /* Modern blur effect */
    z-index: 50;
    /* Sit above header/footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

/* The Spinner Animation */
.dable-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #E5E7EB;
    /* Light gray ring */
    border-top: 4px solid #2563EB;
    /* Blue spinner */
    border-radius: 50%;
    animation: dable-spin 0.8s linear infinite;
}

/* The "Loading..." Text */
.dable-loading-text {
    margin-top: 15px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

@keyframes dable-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.table-sort {
    font-size: 10px;
    color: #999;
    margin-left: 5px;
    vertical-align: middle;
    cursor: pointer;
}

/*basic button styles*/
.secondary-button {
    background-color: transparent;
    color: #1F2937;
    padding: 0.175rem 0.15rem;
    border-radius: 0.375rem;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.secondary-button:hover {
    background-color: #E5E7EB;
    text-decoration: none !important;
}

.secondary-button a:hover {
    text-decoration: none !important;
}

.secondary-button:active {
    background-color: #E5E7EB;
}

.secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.secondary-button:focus {
    outline: none;
}

.dable-column-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
}

.dable-column-selector-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.dable-column-selector-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f9fafb;
    border-color: #e5e7eb;
}

.dable-column-selector-btn-disabled:hover {
    background: #f9fafb;
    border-color: #e5e7eb;
}

.dable-column-selector-popup {
    font-size: 0.875rem;
}

.dable-column-selector-popup label {
    user-select: none;
}

.dable-column-selector-popup label:hover {
    background: #f9fafb;
}

.hess-grid-page-container .hess-detail-navigation {
    padding: 0 !important;
}

/* Desktop layout - two columns, ####dont move this media query to mobile.css. */
@media (min-width: 1024px) {
    .hess-detail-title {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .hess-detail-column-left {
        grid-column: 1;
        grid-row: 2;
    }

    .hess-detail-column-right {
        grid-column: 2;
        grid-row: 2;
    }
}

/* dtmmap.jsp specific styles - moved from inline styles */
/* dtmmap.jsp uses .hess-dtmmap-canvas for its full-page map */
.hess-dtmmap-canvas {
    position: relative;
    left: 280px;
    width: calc(100% - 280px);
    height: 100%;
    z-index: 1;
    box-sizing: border-box;
}

/* transformerdetails.jsp uses .hess-map-canvas for its card-contained map */
.hess-map-canvas {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 230px !important;
    box-sizing: border-box !important;
}

.hess-tree-search-wrapper {
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}

.hess-tree-search-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.hess-tree-search-input {
    padding: 4px 28px 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.hess-tree-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 16px;
    color: #999;
    display: none;
    line-height: 1;
}

.hess-tree-panel {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: visible;
}


#deviceCountDisplay {
    font-size: 11px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 4px;
}

.hess-map-type-selector {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
}

.map-type-btn {
    padding: 4px 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 3px;
    font-size: 11px;
}

.hess-map-zoom-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hess-map-zoom-btn {
    padding: 4px 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 3px;
    font-size: 11px;
    text-align: left;
}

.hess-map-help-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
    margin-top: 4px;
}

.hess-map-help-btn {
    padding: 4px 8px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
    border-radius: 3px;
    font-size: 11px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.2s;
}

.hess-map-help-btn:hover {
    background-color: #e5e7eb;
}

.hess-map-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #2563EB;
    color: white;
    font-weight: bold;
    font-size: 12px;
    line-height: 1;
}

.hess-map-help-label {
    font-weight: 500;
}

.hess-map-key-cell-right {
    text-align: right;
}

.hess-map-bubble {
    position: absolute;
    left: 220px;
    top: 470px;
    z-index: 99;
    visibility: hidden;
}

.hess-map-bubble-xf {
    top: 485px;
}

/* Map Help Modal - reusing alert modal pattern */
.hess-map-help-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.hess-map-help-modal-overlay.active {
    display: flex;
}

.hess-map-help-modal {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    z-index: 10001;
}

.hess-map-help-modal-header {
    background-color: #2563EB;
    color: #FFFFFF;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.hess-map-help-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #FFFFFF;
}

.hess-map-help-modal-close {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
    line-height: 1;
}

.hess-map-help-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.hess-map-help-modal-body {
    padding: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #1F2937;
}

.hess-map-help-section {
    margin-bottom: 1.5rem;
}

.hess-map-help-section:last-child {
    margin-bottom: 0;
}

.hess-map-help-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: #1F2937;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 0.5rem;
}

.hess-map-help-table {
    width: 100%;
    border-collapse: collapse;
}

.hess-map-help-table tr {
    border-bottom: 1px solid #F3F4F6;
}

.hess-map-help-table tr:last-child {
    border-bottom: none;
}

.hess-map-help-table td {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #374151;
    vertical-align: middle;
}

.hess-map-help-table td:first-child {
    font-weight: 500;
    padding-right: 1rem;
}

.hess-map-help-icon-cell {
    text-align: center;
    width: 60px;
}

.hess-map-help-icon-cell img {
    height: 18px;
    width: auto;
    vertical-align: middle;
}

.hess-issue-days-wrapper {
    margin-top: 0.75rem;
}

.hess-device-display-content {
    display: block;
}

.hess-map-filter-section-content {
    display: none;
}

.hess-map-filter-section-content.hess-device-display-content {
    display: block;
}

.hess-map-filter-buttons {
    display: flex;
    gap: 8px;
    margin-top: 0rem;
}

.hess-reset-filters-button {
    background-color: #ef4444 !important;
    color: white !important;
}

.hess-reset-filters-button:hover {
    background-color: #dc2626 !important;
}


.hess-directions-button {
    background-color: #10b981 !important;
    color: white !important;
}

.hess-directions-button:hover {
    background-color: #059669 !important;
}

/* Hide mobile close button on desktop */
.hess-sidebar-close-mobile {
    display: none;
}

/* Hide hamburger menu on desktop */
.hess-mobile-menu-toggle {
    display: none;
}

.hess-graph-parameters-submit,
.hess-map-filter-buttons {
    position: sticky;
    bottom: 0;
    z-index: 98;
    background: #fff;
    padding: 15px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
}

.place-right {
    justify-content: flex-end;
}


#treePanel span{
    color: black !important;
}