/* ==========================================================================
   MODERN.CSS — Visual modernization layer
   Loaded last; overrides jQuery UI gradient/glass theme with flat, modern styling.
   CSS custom properties defined here are available to all CSS files.
   ========================================================================== */

/* === 1. CSS CUSTOM PROPERTIES ============================================ */
:root {
    /* Brand blues — hue kept near existing #74bad8 but more saturated/professional */
    --c-primary:      #2d6a9f;
    --c-primary-dk:   #1e4d73;
    --c-primary-lt:   #eef4fa;

    /* Accent green — replaces dated #acdd4a lime */
    --c-accent:       #2a8f50;
    --c-accent-lt:    #e6f4ec;

    /* Surfaces */
    --c-white:        #ffffff;
    --c-surface:      #f8fafc;
    --c-surface-2:    #f1f5f9;

    /* Borders */
    --c-border:       #cbd5e1;
    --c-border-lt:    #e2e8f0;

    /* Text */
    --c-text:         #1e293b;
    --c-text-muted:   #64748b;

    /* Semantic */
    --c-error:        #991b1b;
    --c-error-bg:     #fef2f2;
    --c-error-border: #fca5a5;
    --c-success-bg:   #f0fdf4;
    --c-highlight-bg: #eff6ff;
    --c-highlight-border: #93c5fd;

    /* Hover/active overlays */
    --c-hover:        rgba(26, 115, 186, 0.07);
    --c-active-bg:    rgba(26, 115, 186, 0.12);

    /* Typography */
    --font:           system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Geometry */
    --r:              4px;
    --r-sm:           3px;
    --r-lg:           5px;

    /* Shadows */
    --sh-sm:          0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --sh:             0 2px 4px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
    --sh-lg:          0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
}

/* === 2. BASE TYPOGRAPHY =================================================== */
body {
    font-family: var(--font);
    color: var(--c-text);
}

/* === 3. JQUERY UI VISUAL RESET ============================================ */

/* 3a. Widget containers --------------------------------------------------- */

.ui-widget {
    font-family: var(--font);
}

.ui-widget-content {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    color: var(--c-text);
}

.ui-widget-header {
    background: var(--c-primary);
    background-image: none;
    border: 1px solid var(--c-primary-dk);
    color: var(--c-white);
    font-weight: 500;
}

.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.45);
    background-image: none;
    opacity: 1;
    filter: none;
}

.ui-widget-shadow {
    box-shadow: var(--sh-lg);
    background: transparent;
    background-image: none;
    opacity: 1;
    filter: none;
}

/* 3b. State classes ------------------------------------------------------- */

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: var(--c-surface-2);
    background-image: none;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-weight: normal;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: var(--c-text);
    text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: var(--c-hover);
    background-image: none;
    border-color: var(--c-primary);
    color: var(--c-primary);
    font-weight: 500;
}

.ui-state-hover a,
.ui-state-focus a {
    color: var(--c-primary);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: var(--c-white);
    background-image: none;
    border-color: var(--c-border);
    color: var(--c-primary);
    font-weight: 500;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: var(--c-primary);
    text-decoration: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--c-highlight-bg);
    background-image: none;
    border: 1px solid var(--c-highlight-border);
    color: #1e40af;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    background: var(--c-error-bg);
    background-image: none;
    border: 1px solid var(--c-error-border);
    color: var(--c-error);
}

.ui-state-error-text { color: var(--c-error); }

.ui-state-disabled {
    opacity: 0.45;
    filter: none;
}

/* Corner radii */
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-right  { border-radius: var(--r); }
.ui-corner-tl     { border-top-left-radius:     var(--r); }
.ui-corner-tr     { border-top-right-radius:    var(--r); }
.ui-corner-bl     { border-bottom-left-radius:  var(--r); }
.ui-corner-br     { border-bottom-right-radius: var(--r); }

/* Priority helper */
.ui-priority-primary {
    font-weight: 600;
}

/* 3c. Per-widget overrides ------------------------------------------------ */

/* ---- TABS ---- */
.ui-tabs {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    padding: 0;
}

.ui-tabs .ui-tabs-nav {
    background: var(--c-surface-2);
    background-image: none;
    border: none;
    border-bottom: 1px solid var(--c-border);
    border-radius: var(--r) var(--r) 0 0;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li {
    margin: 0 2px 0 0;
    top: 0;
    border-bottom: none;
}

/* Inactive tab */
.ui-tabs .ui-tabs-nav li.ui-state-default {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
}

/* Active tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-active,
.ui-tabs .ui-tabs-nav li.ui-state-active {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-bottom: 2px solid var(--c-primary);
    color: var(--c-primary);
    margin-bottom: -1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    color: var(--c-primary);
    font-weight: 500;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    color: var(--c-text);
    font-weight: normal;
    padding: .55em .9em;
}

.ui-tabs .ui-tabs-nav li:hover:not(.ui-tabs-active) {
    background: var(--c-hover);
    background-image: none;
}

.ui-tabs .ui-tabs-panel {
    background: var(--c-white);
    border: none;
    border-top: none;
    padding: .8em;
}

/* Vertical tabs — active tab indicator is the left border set in base.css;
   override the state class background here so it renders cleanly */
.ui-tabs-vertical > .ui-tabs-nav li.ui-state-default,
.ui-tabs-min-left > .ui-tabs-nav li.ui-state-default {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--c-border-lt);
}

.ui-tabs-vertical > .ui-tabs-nav li.ui-tabs-active,
.ui-tabs-vertical > .ui-tabs-nav li.ui-state-active,
.ui-tabs-min-left > .ui-tabs-nav li.ui-tabs-active,
.ui-tabs-min-left > .ui-tabs-nav li.ui-state-active {
    background: var(--c-primary-lt);
    border: none;
    border-bottom: 1px solid var(--c-border-lt);
    color: var(--c-primary);
}

.ui-tabs-vertical > .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs-vertical > .ui-tabs-nav li.ui-state-active a,
.ui-tabs-min-left > .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
    color: var(--c-primary);
    font-weight: 500;
}

.ui-tabs-vertical > .ui-tabs-nav li:hover:not(.ui-tabs-active),
.ui-tabs-min-left > .ui-tabs-nav li:hover:not(.ui-tabs-active) {
    background: var(--c-hover);
    background-image: none;
}

/* ---- DIALOG ---- */
div.ui-dialog {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--sh-lg);
    padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--c-primary);
    background-image: none;
    border: none;
    border-radius: var(--r) var(--r) 0 0;
    color: var(--c-white);
    padding: .55em 1em;
    font-weight: normal;
}

.ui-dialog .ui-dialog-title {
    color: var(--c-white);
    font-size: 1em;
    margin-right: 2em;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    opacity: 0.75;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    right: .5em;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background: rgba(255, 255, 255, 0.2);
    background-image: none;
    border-color: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.ui-dialog .ui-dialog-content {
    background: var(--c-white);
    border: none;
    padding: 1em;
}

.ui-dialog .ui-dialog-buttonpane {
    background: var(--c-surface-2);
    border: none;
    border-top: 1px solid var(--c-border);
    padding: .6em 1em;
}

.ui-dialog .ui-dialog-buttonpane .ui-button {
    background: var(--c-primary);
    background-image: none;
    border: 1px solid var(--c-primary-dk);
    border-radius: var(--r-sm);
    color: var(--c-white);
    font-weight: 500;
    padding: .4em 1em;
    cursor: pointer;
    margin-left: .4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
    background: var(--c-primary-dk);
    background-image: none;
}

/* ---- AUTOCOMPLETE / MENU ---- */
.ui-autocomplete,
.ui-menu {
    background: var(--c-white);
    background-image: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    box-shadow: var(--sh);
    padding: 4px 0;
}

.ui-menu .ui-menu-item-wrapper {
    padding: .35em .8em;
    border-radius: 0;
    border: none;
}

.ui-menu .ui-state-active,
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: var(--c-hover);
    background-image: none;
    color: var(--c-text);
    border: none;
    border-radius: 0;
    font-weight: normal;
}

/* ---- DATEPICKER ---- */
.ui-datepicker {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r);
    box-shadow: var(--sh);
    padding: 0;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--c-primary);
    background-image: none;
    border: none;
    border-radius: var(--r) var(--r) 0 0;
    color: var(--c-white);
    padding: .4em 0;
}

.ui-datepicker .ui-datepicker-title {
    color: var(--c-white);
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background: none;
    background-image: none;
    border: none;
    border-radius: var(--r-sm);
    top: .3em;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.2);
    background-image: none;
    border: none;
    top: .3em;
}

.ui-datepicker table {
    font-size: .9em;
    padding: .4em .4em 0;
}

.ui-datepicker th {
    color: var(--c-text-muted);
    font-weight: 600;
    padding: .35em;
}

/* Day cells */
.ui-datepicker td .ui-state-default {
    background: transparent;
    background-image: none;
    border: none;
    color: var(--c-text);
    text-align: center;
    padding: .3em;
    border-radius: var(--r-sm);
}

.ui-datepicker td:hover .ui-state-default {
    background: var(--c-hover);
    background-image: none;
}

.ui-datepicker td .ui-state-highlight {
    background: var(--c-primary-lt);
    background-image: none;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    font-weight: 600;
}

.ui-datepicker td .ui-state-active {
    background: var(--c-primary);
    background-image: none;
    border: none;
    color: var(--c-white);
    font-weight: 600;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    background: var(--c-surface-2);
    background-image: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text);
    padding: .3em .7em;
    cursor: pointer;
}

/* ---- BUTTON WIDGET ---- */
.ui-button {
    background: var(--c-surface-2);
    background-image: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-weight: 500;
    cursor: pointer;
}

.ui-button:hover,
.ui-button.ui-state-hover {
    background: var(--c-hover);
    background-image: none;
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.ui-button.ui-state-active {
    background: var(--c-active-bg);
    background-image: none;
    border-color: var(--c-primary);
    color: var(--c-primary);
}

/* ---- SLIDER ---- */
.ui-slider {
    background: var(--c-surface-2);
    background-image: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r);
}

.ui-slider .ui-slider-handle {
    background: var(--c-primary);
    background-image: none;
    border: 2px solid var(--c-primary-dk);
    border-radius: 50%;
}

.ui-slider .ui-slider-range {
    background: var(--c-primary);
    background-image: none;
}

/* ---- PROGRESSBAR ---- */
.ui-progressbar {
    background: var(--c-surface-2);
    background-image: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r);
}

.ui-progressbar .ui-progressbar-value {
    background: var(--c-primary);
    background-image: none;
    border-radius: var(--r-sm);
}

/* ---- SPINNER ---- */
.ui-spinner {
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
}

.ui-spinner-input {
    border: none;
    border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.ui-spinner-button {
    background: var(--c-surface-2);
    background-image: none;
    border-left: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

/* ---- ACCORDION ---- */
.ui-accordion .ui-accordion-header {
    background: var(--c-surface-2);
    background-image: none;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    color: var(--c-text);
    font-weight: 600;
}

.ui-accordion .ui-accordion-header-active,
.ui-accordion .ui-accordion-header.ui-state-active {
    background: var(--c-primary-lt);
    background-image: none;
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.ui-accordion .ui-accordion-content {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* === 4. ICON SPRITE REPLACEMENTS ========================================= */
/*
 * jQuery UI uses a single PNG sprite for all icons. We replace the small
 * subset actually used in this app with CSS-rendered characters.
 */

/* Reset: hide the sprite background; make the element visible for content */
.ui-icon {
    background-image: none !important;
    text-indent: 0;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    color: inherit;
    width: 16px;
    height: 16px;
}

/* Dialog close button (generated by jQuery UI on every dialog) */
.ui-dialog-titlebar-close .ui-icon-closethick::before,
.ui-dialog-titlebar-close .ui-icon-close::before {
    content: '\00D7'; /* × */
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--c-white);
}

/* Expand / collapse toggle (custsvc_addr_summary.php) */
.ui-icon-plus::before  { content: '+'; font-weight: 600; font-size: 15px; }
.ui-icon-minus::before { content: '\2212'; font-weight: 600; font-size: 15px; } /* − */

/* Info callout (addr_merge_opts_form.php) */
.ui-icon-info::before { content: '\2139'; font-size: 14px; } /* ℹ */

/* Datepicker previous / next month */
.ui-datepicker-prev .ui-icon::before {
    content: '\2039'; /* ‹ */
    font-size: 18px;
    font-weight: 700;
    color: var(--c-white);
}
.ui-datepicker-next .ui-icon::before {
    content: '\203A'; /* › */
    font-size: 18px;
    font-weight: 700;
    color: var(--c-white);
}

/* Resizable handle used in nuiPopup */
.ui-resizable-handle.ui-icon {
    background-image: none !important;
}

/* === 5. MISC OVERRIDES ==================================================== */

/* Dual listbox highlight for copied options */
.copiedOption {
    background-color: var(--c-highlight-bg);
    color: #1e40af;
}

/* Legacy autocomplete (static/css/jquery/styles.css) */
.autocomplete .selected {
    background: var(--c-primary);
    color: var(--c-white);
}

.autocomplete strong {
    color: var(--c-primary);
}