.live-data-warning {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #991b1b;
    border-radius: 8px;
    background-color: #c51f1f;
    background-image: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    box-shadow: 0 3px 10px rgba(185, 28, 28, .3);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.live-data-warning-icon {
    color: #fde68a;
    font-family: "Segoe UI Symbol", sans-serif;
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
    animation: live-data-warning-pulse 1.8s ease-in-out infinite;
}

@keyframes live-data-warning-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* ============================================================
   WEC.Website — Modern Design System
   CSS-only facelift · Light Default / Teal Accent Theme
   ============================================================ */

/* ---------- Design Tokens (Light — Default) ---------- */
:root {
   /* Palette */
   --color-bg:               hsl(220, 15%, 97%);
   --color-bg-gradient-start: hsl(220, 15%, 95%);
   --color-bg-gradient-end:   hsl(220, 12%, 98%);
   --color-surface:          hsl(0, 0%, 100%);
   --color-surface-raised:   hsl(220, 15%, 96%);
   --color-surface-overlay:  hsla(220, 15%, 100%, 0.92);
   --color-border:           hsl(220, 14%, 85%);
   --color-border-subtle:    hsl(220, 14%, 90%);

   --color-primary:          hsl(192, 80%, 38%);
   --color-primary-hover:    hsl(192, 80%, 32%);
   --color-primary-muted:    hsl(192, 40%, 88%);
   --color-primary-glow:     hsla(192, 70%, 50%, 0.08);

   --color-accent:           hsl(262, 55%, 52%);
   --color-accent-hover:     hsl(262, 55%, 42%);

   --color-text:             hsl(220, 20%, 20%);
   --color-text-secondary:   hsl(220, 12%, 45%);
   --color-text-muted:       hsl(220, 10%, 62%);
   --color-text-heading:     hsl(220, 25%, 12%);

   --color-success:          hsl(152, 55%, 36%);
   --color-warning:          hsl(38, 90%, 45%);
   --color-error:            hsl(0, 70%, 50%);
   --color-error-bg:         hsl(0, 85%, 96%);
   --color-error-border:     hsl(0, 60%, 82%);

   --color-link:             hsl(192, 75%, 35%);
   --color-link-hover:       hsl(192, 80%, 28%);

   --color-table-header:     hsl(220, 15%, 92%);
   --color-table-row-odd:    hsl(0, 0%, 100%);
   --color-table-row-even:   hsl(220, 15%, 97%);
   --color-table-row-hover:  hsl(192, 40%, 94%);
   --color-table-border:     hsl(220, 14%, 88%);

   --color-sidebar-bg:       hsl(220, 15%, 95%);
   --color-sidebar-link:     hsl(220, 15%, 30%);
   --color-sidebar-link-hover: var(--color-primary);

   --color-button-bg:        var(--color-primary);
   --color-button-text:      #fff;
   --color-button-hover:     var(--color-primary-hover);

   /* Typography */
   --font-family:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --font-size-xs:           0.75rem;
   --font-size-sm:           0.8125rem;
   --font-size-base:         0.875rem;
   --font-size-md:           1rem;
   --font-size-lg:           1.125rem;
   --font-size-xl:           1.5rem;
   --font-size-2xl:          2rem;
   --font-weight-normal:     400;
   --font-weight-medium:     500;
   --font-weight-semibold:   600;
   --font-weight-bold:       700;
   --line-height:            1.6;

   /* Spacing */
   --space-xs:  0.25rem;
   --space-sm:  0.5rem;
   --space-md:  1rem;
   --space-lg:  1.5rem;
   --space-xl:  2rem;
   --space-2xl: 3rem;

   /* Radius */
   --radius-sm:  4px;
   --radius-md:  8px;
   --radius-lg:  12px;
   --radius-xl:  16px;
   --radius-pill: 9999px;

   /* Shadows */
   --shadow-sm:   0 1px 3px hsla(220, 20%, 50%, 0.1), 0 1px 2px hsla(220, 20%, 50%, 0.06);
   --shadow-md:   0 4px 12px hsla(220, 20%, 50%, 0.1), 0 2px 4px hsla(220, 20%, 50%, 0.05);
   --shadow-lg:   0 8px 30px hsla(220, 20%, 50%, 0.12), 0 4px 8px hsla(220, 20%, 50%, 0.06);
   --shadow-glow: 0 0 12px hsla(192, 70%, 50%, 0.08);

   /* Transitions */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
   --transition-slow: 400ms ease;
}

/* ---------- Dark Theme Overrides ---------- */
[data-theme="dark"] {
   --color-bg:               hsl(220, 20%, 10%);
   --color-bg-gradient-start: hsl(220, 22%, 8%);
   --color-bg-gradient-end:   hsl(220, 18%, 14%);
   --color-surface:          hsl(220, 18%, 15%);
   --color-surface-raised:   hsl(220, 16%, 18%);
   --color-surface-overlay:  hsla(220, 18%, 20%, 0.85);
   --color-border:           hsl(220, 14%, 24%);
   --color-border-subtle:    hsl(220, 14%, 20%);

   --color-primary:          hsl(192, 70%, 50%);
   --color-primary-hover:    hsl(192, 70%, 60%);
   --color-primary-muted:    hsl(192, 50%, 30%);
   --color-primary-glow:     hsla(192, 70%, 50%, 0.15);

   --color-accent:           hsl(262, 60%, 60%);
   --color-accent-hover:     hsl(262, 60%, 70%);

   --color-text:             hsl(220, 15%, 88%);
   --color-text-secondary:   hsl(220, 12%, 60%);
   --color-text-muted:       hsl(220, 10%, 45%);
   --color-text-heading:     hsl(220, 20%, 95%);

   --color-success:          hsl(152, 55%, 45%);
   --color-warning:          hsl(38, 90%, 55%);
   --color-error:            hsl(0, 70%, 55%);
   --color-error-bg:         hsl(0, 40%, 15%);
   --color-error-border:     hsl(0, 50%, 30%);

   --color-link:             hsl(192, 65%, 55%);
   --color-link-hover:       hsl(192, 70%, 70%);

   --color-table-header:     hsl(220, 20%, 18%);
   --color-table-row-odd:    hsl(220, 18%, 13%);
   --color-table-row-even:   hsl(220, 18%, 15%);
   --color-table-row-hover:  hsl(220, 18%, 20%);
   --color-table-border:     hsl(220, 14%, 22%);

   --color-sidebar-bg:       hsl(220, 20%, 12%);
   --color-sidebar-link:     hsl(220, 15%, 78%);
   --color-sidebar-link-hover: var(--color-primary);

   --color-button-bg:        var(--color-primary);
   --color-button-text:      hsl(220, 20%, 8%);
   --color-button-hover:     var(--color-primary-hover);

   --shadow-sm:   0 1px 3px hsla(0, 0%, 0%, 0.3), 0 1px 2px hsla(0, 0%, 0%, 0.2);
   --shadow-md:   0 4px 12px hsla(0, 0%, 0%, 0.35), 0 2px 4px hsla(0, 0%, 0%, 0.2);
   --shadow-lg:   0 8px 30px hsla(0, 0%, 0%, 0.4), 0 4px 8px hsla(0, 0%, 0%, 0.2);
   --shadow-glow: 0 0 20px var(--color-primary-glow);
}

/* ---------- Theme Toggle ---------- */
.theme-toggle {
   background: none;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   color: var(--color-text-muted);
   cursor: pointer;
   width: 36px;
   height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
   flex-shrink: 0;
}

.theme-toggle:hover {
   color: var(--color-primary);
   border-color: var(--color-primary);
   background: var(--color-primary-glow);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }

/* Light mode (default): show sun icon */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }

/* Dark mode: show moon icon */
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }


/* ---------- Reset & Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code,
address, variable, form, fieldset, blockquote {
   font-size: 100%; font-weight: normal; margin: 0; padding: 0;
}

html, body { height: 100%; }

body {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height);
   color: var(--color-text);
   background: linear-gradient(160deg, var(--color-bg-gradient-start), var(--color-bg-gradient-end));
   background-attachment: fixed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

a {
   color: var(--color-link);
   text-decoration: none;
   transition: color var(--transition-fast);
}
a:hover {
   color: var(--color-link-hover);
   text-decoration: none;
}

ol { list-style: decimal; margin-left: 1.4em; }
ul { list-style: square; margin-left: 1.4em; }
img { border: 0; }

input, select, textarea, button {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
}

/* Text inputs & dropdowns */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   padding: 7px 10px;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
   outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
   padding-right: 28px;
}


/* ---------- Layout ---------- */

#top { position: absolute; }

#container {
   font-size: 1em;
   margin: 0 auto;
   padding: 0 var(--space-lg);
   min-height: 100%;
   max-width: 1200px;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   gap: var(--space-lg);
}

* html #container { height: 100%; }


/* ---------- Header ---------- */

.header {
   width: 100%;
   min-height: 60px;
   padding: 5px 12px 5px 0;
   display: flex;
   align-items: center;
   gap: var(--space-md);
   border-bottom: 1px solid var(--color-border-subtle);
   margin-bottom: 1px;
}

.header .theme-toggle {
   margin-left: auto;
}

.header img {
   height: auto;
   width: 180px;
}

.header img:hover {
   opacity: 0.85;
}

.header img {
   filter: brightness(0.35);
}

[data-theme="dark"] .header img {
   filter: none;
}


/* ---------- Sidebar ---------- */

.sidebar {
   color: var(--color-text);
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
   width: 220px;
   min-width: 220px;
   flex-shrink: 0;
   margin-bottom: var(--space-lg);
}

.sidebarcontent {
   background: var(--color-sidebar-bg);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   font-size: var(--font-size-base);
   backdrop-filter: blur(8px);
}

.sidebarcontent a {
   color: var(--color-sidebar-link);
   text-decoration: none;
   transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.sidebarcontent a:hover {
   color: var(--color-sidebar-link-hover);
   text-decoration: none;
   padding-left: 4px;
}


/* ---------- Main Content ---------- */

.xcontent {
   background: transparent;
   border: none;
   flex: 1;
   min-width: 0;
   min-height: 500px;
   font-size: var(--font-size-base);
}

.xcontent span.h {
   font-variant: normal;
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-lg);
   color: var(--color-text-heading);
   letter-spacing: -0.01em;
}

.xcontent span.h a {
   color: var(--color-text-heading);
   text-decoration: none;
}
.xcontent span.h a:hover {
   color: var(--color-primary);
   text-decoration: none;
}


/* ---------- Content Block (Card) ---------- */

.contentblock {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   color: var(--color-text);
   margin: 0 0 var(--space-md) 0;
   padding: var(--space-lg);
   box-shadow: var(--shadow-sm);
   transition: box-shadow var(--transition-base);
   
}

/* Detail view pages: dvcontainer already provides outer border — strip from contentblock */
.dvcontainer .contentblock {
   padding: 0;
   overflow: hidden;
   border: none;
   box-shadow: none;
   margin: 0;
   border-radius: 0;
}

.dvcontainer .contentblock ul.dv {
   padding-left: var(--space-lg);
   padding-right: var(--space-lg);
   padding-bottom: var(--space-md);
}

.contentblock:hover {
   box-shadow: var(--shadow-md);
}

.contentblock p { padding-bottom: 0; }

.contentblock a { color: var(--color-link); }
.contentblock a:active { color: var(--color-link); }
.contentblock a:visited { color: var(--color-link); }


/* ---------- Login Box (Glassmorphism) ---------- */

.loginbox {
   background: var(--color-surface-overlay);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg), var(--shadow-glow);
   display: block;
   margin: 12vh auto 0;
   padding: var(--space-lg) var(--space-xl);
   width: 420px;
   max-width: 90vw;
   text-align: center;
}

.loginbox img {
   margin: 0 auto var(--space-md);
   display: block;
   height: auto;
   width: 320px;
   max-width: 90%;
   filter: brightness(0.35);
}

[data-theme="dark"] .loginbox img {
   filter: none;
}

.loginbox table {
   margin-left: auto;
   margin-right: auto;
   border-spacing: 4px;
}

.loginbox td {
   text-align: left;
   padding: 2px 0;
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
}

.loginbox input[type="text"],
.loginbox input[type="password"] {
   width: 220px !important;
   padding: 10px 12px;
   border-radius: var(--radius-md);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   color: var(--color-text);
   font-size: var(--font-size-base);
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.loginbox input[type="text"]:focus,
.loginbox input[type="password"]:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.loginbox input[type="submit"],
.loginbox input[type="button"] {
   background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
   color: #fff;
   border: none;
   border-radius: var(--radius-pill);
   padding: 10px 36px;
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-base);
   cursor: pointer;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
   letter-spacing: 0.02em;
}

.loginbox input[type="submit"]:hover,
.loginbox input[type="button"]:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 16px hsla(192, 70%, 50%, 0.3);
   filter: brightness(1.08);
}

.loginbox input[type="submit"]:active,
.loginbox input[type="button"]:active {
   transform: translateY(0);
}

.loginbox ul { float: none; vertical-align: top; }
.loginbox span.err { color: var(--color-error); font-weight: var(--font-weight-semibold); }

/* Login sidebar block (old layout compat) */
#login { height: auto; min-height: 0; max-height: none; list-style: none; max-width: none; overflow: visible; }
#login li span { text-align: left; }
#login li input.text { font-size: 1em; }
#login li span.check { margin-left: 0; position: relative; top: 2px; }
#login li span.checklabel { left: 6px; position: relative; top: 0; }
#login li.links { display: block; float: none; font-size: var(--font-size-sm); margin: var(--space-md) 0 0; text-align: center; width: auto; }

#logout { height: auto; min-height: 0; max-height: none; line-height: 1.8; list-style: none; overflow: visible; }
#logout ul { width: 100%; }


/* ---------- Error Box ---------- */

.errorbox {
   background: var(--color-error-bg);
   border: 1px solid var(--color-error-border);
   border-left: 4px solid var(--color-error);
   border-radius: var(--radius-md);
   display: block;
   margin: 100px auto 0;
   padding: var(--space-lg) var(--space-xl);
   width: 620px;
   max-width: 90vw;
   color: var(--color-text);
}

.errorbox img { margin-right: var(--space-md); vertical-align: middle; }


/* ---------- QuickTable (Data Grid) ---------- */

table.quicktable {
   border: 1px solid var(--color-table-border);
   border-radius: var(--radius-md);
   border-collapse: separate;
   border-spacing: 0;
   font-size: var(--font-size-sm);
   width: 100%;
   
}

table.quicktable th {
   background: var(--color-table-header);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-heading);
   border-bottom: 2px solid var(--color-primary-muted);
   padding: 10px 12px;
   text-align: left;
   vertical-align: top;
   text-transform: uppercase;
   font-size: var(--font-size-xs);
   letter-spacing: 0.05em;
   position: sticky;
   top: 0;
   z-index: 2;
}

.image-resource-add-link {
   margin-left: var(--space-sm);
}

table.quicktable td.even {
   background: var(--color-table-row-even);
   border-bottom: 1px solid var(--color-table-border);
   padding: 8px 12px;
   transition: background var(--transition-fast);
}

table.quicktable td.odd {
   background: var(--color-table-row-odd);
   border-bottom: 1px solid var(--color-table-border);
   padding: 8px 12px;
   transition: background var(--transition-fast);
}

table.quicktable tr:hover td.even,
table.quicktable tr:hover td.odd {
   background: var(--color-table-row-hover);
}

table.quicktable a {
   color: var(--color-link);
   text-decoration: none;
}
table.quicktable a:hover {
   color: var(--color-link-hover);
   text-decoration: none;
}

table.quicktable td.title {
   background: var(--color-surface-raised);
   padding: var(--space-sm) var(--space-lg);
   border-bottom: 1px solid var(--color-border);
}

table.quicktable td.title ul {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
   gap: var(--space-xs);
   row-gap: var(--space-xs);
   list-style: none;
   margin: 0;
   padding: 0;
}

table.quicktable td.title li {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-heading);
   list-style: none;
}

table.quicktable td.title li.subtitle {
   width: auto !important;
   margin-left: auto;
   font-weight: var(--font-weight-normal);
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
   padding: 0;
}

/* Search input inside title bar */
table.quicktable td.title input[type="text"] {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   padding: 5px 10px;
   font-size: var(--font-size-xs);
   font-family: var(--font-family);
   outline: none;
   transition: border-color var(--transition-fast);
}
table.quicktable td.title input[type="text"]:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 2px var(--color-primary-glow);
}

table.quicktable td.nodata {
   background: hsla(38, 80%, 50%, 0.08);
   color: hsl(38, 75%, 55%);
   border-bottom: 1px solid hsla(38, 70%, 50%, 0.2);
   padding: var(--space-sm) var(--space-lg);
   font-style: italic;
   font-size: var(--font-size-sm);
   text-align: center;
}

/* First/last row radius */
table.quicktable tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
table.quicktable tr:first-child th:last-child  { border-top-right-radius: var(--radius-md); }
table.quicktable tr:last-child td:first-child  { border-bottom-left-radius: var(--radius-md); }
table.quicktable tr:last-child td:last-child   { border-bottom-right-radius: var(--radius-md); }


/* ---------- Pagination ---------- */

.pagination span { display: block; float: left; clear: right; }

.pagination span a {
   font: normal var(--font-size-xs) var(--font-family);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   height: auto;
   padding: 4px 8px;
   margin-left: 2px;
   background: var(--color-surface);
   text-decoration: none;
   color: var(--color-text-secondary);
   transition: all var(--transition-fast);
}

.pagination span a:hover {
   border-color: var(--color-primary);
   color: var(--color-primary);
   background: var(--color-primary-glow);
}

.pagination dt.label { display: none; }

.pagination span.current a {
   background: var(--color-primary);
   color: var(--color-button-text);
   border-color: var(--color-primary);
   font-weight: var(--font-weight-semibold);
   padding: 4px 8px;
   margin-left: 2px;
}

.pagination .separator,
.pagination .elipsis { background: none; border: 0; }
.pagination .separator:hover { border: 0; }
.pagination li.jumptopage { text-align: center; }


/* ---------- Detail View Container ---------- */

.dvcontainer {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   display: block;
   font-size: 1em;
   margin: 0 auto;
   box-shadow: var(--shadow-md);
   overflow: hidden;
}

.dvcontainer span.valerr { color: var(--color-error); font-weight: var(--font-weight-medium); }
.dvcontainer table { margin-bottom: var(--space-md); margin-left: auto; margin-right: auto; }


/* ---------- Error Summary ---------- */

.errsummary {
   background: var(--color-error-bg);
   border: 1px solid var(--color-error-border);
   border-left: 4px solid var(--color-error);
   border-radius: var(--radius-md);
   color: var(--color-error);
   display: block;
   font-weight: var(--font-weight-semibold);
   margin: var(--space-sm);
   padding: var(--space-md);
}

.errsummary li { list-style: none; color: var(--color-error); font-weight: var(--font-weight-semibold); }

.dvlierr {
   left: 150px;
   background: var(--color-error-bg);
   border: 1px solid var(--color-error-border);
   border-left: 3px solid var(--color-error);
   border-radius: var(--radius-sm);
   color: var(--color-error);
   display: block;
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-sm);
   margin: 0 var(--space-sm) var(--space-sm) 125px;
   padding: 4px 8px;
   width: 293px;
   list-style: none;
}


/* ---------- Detail View Options Bar ---------- */

.dvoptions {
   background: var(--color-surface-raised);
   border-bottom: 1px solid var(--color-border);
   border-radius: 0;
   margin: 0;
   min-height: 48px;
   overflow: visible;
   padding: var(--space-md) var(--space-lg);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-lg);
}

.dvoptions .title {
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-heading);
   font-size: var(--font-size-md);
}


/* ---------- Detail View Links ---------- */

ul.dvlinks {
   list-style: none;
   margin: var(--space-sm) var(--space-sm) 0 0;
   padding: 0;
   width: auto;
   float: left;
   display: flex;
   gap: var(--space-sm);
}

ul.dvlinks a {
   font-weight: var(--font-weight-semibold);
   color: var(--color-link);
   vertical-align: top;
   font-size: var(--font-size-sm);
}

ul.dvlinks img { border-style: none; padding-right: 4px; }


/* ---------- Detail View Form (ul.dv) ---------- */

ul.dv {
   list-style: none;
   margin: var(--space-lg) 0 var(--space-md);
   padding: 0 var(--space-lg);
}

ul.dv li {
   display: flex;
   align-items: center;
   min-height: 36px;
   list-style: none;
   margin-bottom: var(--space-xs);
   gap: var(--space-md);
}

ul.dv li.double {
   min-height: 52px;
}

ul.dv li.htmleditor {
   display: block;
   height: 620px;
   list-style: none;
   margin-top: var(--space-md);
}

/* ---------- AjaxControlToolkit HTML Editor Overrides ---------- */

.ajax__htmleditor_editor_container {
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius-md) !important;
   overflow: hidden;
   background: var(--color-surface) !important;
}

.ajax__htmleditor_editor_toptoolbar {
   background: var(--color-surface-raised) !important;
   border-bottom: 1px solid var(--color-border) !important;
   padding: 4px 6px !important;
}

.ajax__htmleditor_editor_bottomtoolbar {
   background: var(--color-surface-raised) !important;
   border-top: 1px solid var(--color-border) !important;
   padding: 3px 6px !important;
}

.ajax__htmleditor_toolbar_button {
   border: 1px solid transparent !important;
   border-radius: var(--radius-sm) !important;
   padding: 3px !important;
   margin: 1px !important;
   background: transparent !important;
   transition: all 150ms ease;
   opacity: 0.8;
}

.ajax__htmleditor_toolbar_button:hover,
.ajax__htmleditor_toolbar_button_hover {
   background: var(--color-primary-muted) !important;
   border-color: var(--color-border) !important;
   opacity: 1;
}

.ajax__htmleditor_toolbar_button img {
   filter: none;
}

.ajax__htmleditor_toolbar_button:hover img,
.ajax__htmleditor_toolbar_button_hover img {
   filter: none;
}

[data-theme="dark"] .ajax__htmleditor_toolbar_button img {
   filter: invert(0.75) brightness(1.5);
}

[data-theme="dark"] .ajax__htmleditor_toolbar_button:hover img,
[data-theme="dark"] .ajax__htmleditor_toolbar_button_hover img {
   filter: invert(0.85) brightness(1.8);
}

/* Editor content area — MUST stay white for email design */
.ajax__htmleditor_editor_editpanel iframe {
   background: #fff !important;
}

/* HTML source textarea — dark code editor styling */
.ajax__htmleditor_editor_editpanel textarea {
   box-sizing: border-box;
   background: #1e1e2e !important;
   color: #d4d4d4 !important;
   font-family: 'Consolas', 'Courier New', monospace !important;
   font-size: 13px !important;
   padding: 8px !important;
   border: none !important;
}

/* Mode tabs (Design / HTML) */
.ajax__htmleditor_editor_bottomtoolbar a,
.ajax__htmleditor_editor_bottomtoolbar span {
   color: var(--color-text-secondary) !important;
   font-family: var(--font-family) !important;
   font-size: var(--font-size-xs) !important;
}

/* Select dropdowns inside toolbar (font, size) */
.ajax__htmleditor_editor_toptoolbar select {
   background: var(--color-surface) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius-sm) !important;
   font-family: var(--font-family) !important;
   font-size: var(--font-size-xs) !important;
   padding: 2px 4px !important;
}

/* Preview popup (used by EditMailTemplate) */
.preview-overlay {
   display: none;
   position: fixed;
   top: 0; left: 0;
   width: 100%; height: 100%;
   background: rgba(0,0,0,0.5);
   z-index: 9999;
}

.preview-modal {
   display: none;
   position: fixed;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   width: 740px;
   max-width: 92vw;
   height: 80vh;
   max-height: 640px;
   background: hsl(220,14%,92%);
   border: 1px solid hsl(220,14%,72%);
   border-radius: 10px;
   padding: 0;
   overflow: hidden;
   z-index: 10000;
   box-shadow: 0 12px 48px rgba(0,0,0,0.4);
   flex-direction: column;
}

.preview-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
   background: hsl(220,14%,88%);
   border-bottom: 1px solid hsl(220,14%,78%);
   flex-shrink: 0;
}

.preview-modal-header .preview-title {
   font-family: var(--font-family);
   font-size: 13px;
   font-weight: 600;
   color: hsl(220,10%,35%);
}

.preview-modal-close {
   background: none;
   border: 1px solid hsl(220,14%,72%);
   border-radius: 6px;
   cursor: pointer;
   padding: 4px 6px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: hsl(220,10%,40%);
   transition: all 150ms;
}

.preview-modal-close:hover {
   background: hsl(0,70%,95%);
   border-color: hsl(0,60%,70%);
   color: hsl(0,70%,45%);
}

.preview-modal iframe {
   border: none;
   flex: 1;
   width: 100%;
   background: #fff;
}

ul.dv li input {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   list-style: none;
   flex: 1;
   min-width: 0;
   width: auto !important;
}

ul.dv li input[type='checkbox'] {
   padding: 0; margin: 0;
   vertical-align: bottom;
   position: relative; top: -1px;
   width: 16px; height: 16px;
   flex: 0 0 16px;
   accent-color: var(--color-primary);
}

ul.dv li select {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   list-style: none;
   flex: 1;
   min-width: 0;
   width: auto !important;
}

/* Labels — fixed-width left column */
ul.dv li span {
   flex: 0 0 160px;
   list-style: none;
   padding-top: 2px;
   color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-sm);
}

ul.dv li.wide { display: flex; flex-direction: column; align-items: flex-start; height: auto; min-height: 170px; list-style: none; }
ul.dv li table.cblist { display: block; float: left; font-size: var(--font-size-xs); list-style: none; width: 100%; }
ul.dv li table.cblist td { padding: 0; }
ul.dv li.wide input { display: block; list-style: none; padding: 0; }
ul.dv li.wide textarea {
   display: block; float: left;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   height: 150px;
   padding: 8px;
   width: 100%;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   resize: vertical;
}

ul.dv li.wide textarea:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary-glow);
   outline: none;
}

ul.dv li.wide input.stylebutton {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   color: var(--color-text);
   font: var(--font-weight-medium) var(--font-size-xs) var(--font-family);
   cursor: pointer;
   padding: 4px 8px;
   transition: background var(--transition-fast);
}

ul.dv li.wide input.stylebutton:hover {
   background: var(--color-primary-muted);
}

ul.dv li input.rightalign { text-align: right; }


/* ---------- Dashboard Icon Grid ---------- */

ul.dashboardimg {
   list-style: none;
   margin: 0;
   padding: var(--space-md) 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-md);
}

ul.dashboardimg img { border-style: none; }

ul.dashboardimg li {
   list-style: none;
}

ul.dashboardimg a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   text-decoration: none;
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-xs);
   line-height: 1.3;
   color: var(--color-link);
   background: var(--color-surface);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
   padding: var(--space-md);
   width: 120px;
   height: 120px;
   overflow: hidden;
   transition: all var(--transition-base);
   gap: var(--space-xs);
}

ul.dashboardimg a img {
   transition: transform var(--transition-base);
   opacity: 0.8;
   filter: saturate(0.7);
}

ul.dashboardimg a:hover {
   background: var(--color-surface-raised);
   border-color: var(--color-primary-muted);
   box-shadow: var(--shadow-md), var(--shadow-glow);
   color: var(--color-text-heading);
   text-decoration: none;
   transform: translateY(-2px);
}

ul.dashboardimg a:hover img {
   transform: scale(1.1);
   opacity: 1;
   filter: saturate(1);
}


/* ---------- News ---------- */

dl.news { list-style: none; padding-bottom: 0; }
dl.news dd { margin: var(--space-sm) var(--space-md) var(--space-md) var(--space-md); padding: var(--space-sm) 0; }
dl.news dt img { vertical-align: middle; padding-bottom: 2px; }
dl.news dt p { margin-bottom: var(--space-md); }


/* ---------- CSS Dropdown ---------- */

#cssdd, #cssdd ul { list-style: none; margin: 0; padding: 0; }
#cssdd a { display: block; width: 8em; }
#cssdd li { float: left; width: 8em; }
#cssdd li ul { left: -999em; position: absolute; width: 8em; }
#cssdd li:hover ul, #cssdd li.sfhover ul { left: auto; }


/* ---------- Footer ---------- */

#footer-spacer { clear: both; height: 50px; }

#footer {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
   height: 50px;
   text-align: center;
   width: 100%;
   padding: var(--space-md) 0 0 0;
   border-top: 1px solid var(--color-border-subtle);
}

#footer a {
   color: var(--color-text-secondary);
   transition: color var(--transition-fast);
}

#footer a:hover {
   color: var(--color-primary);
}


/* ---------- Buttons ---------- */

.buttons a, .buttons button {
   background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
   border: none;
   border-radius: var(--radius-md);
   color: #fff;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: 1.4;
   margin: 0 var(--space-sm) 0 0;
   padding: 8px 20px;
   text-decoration: none;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   letter-spacing: 0.02em;
}

.buttons button {
   overflow: visible;
   width: auto;
}

/* Hide old PNG icons inside buttons — text-only pills */
.buttons button img, .buttons a img {
   display: none;
}

/* Button inner span should inherit flex layout */
.buttons button span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

/* Hover — match login button exactly */
.buttons a:hover, .buttons button:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 16px hsla(192, 70%, 50%, 0.3);
   filter: brightness(1.08);
   text-decoration: none;
   color: #fff;
}

.buttons a:active, .buttons button:active {
   transform: translateY(0);
   filter: brightness(0.95);
}

/* Main button — same as base (already gradient pill) */
button.mainbtn, .buttons a.mainbtn {
   background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
   color: #fff;
}

button.mainbtn:hover, .buttons a.mainbtn:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 16px hsla(192, 70%, 50%, 0.3);
   filter: brightness(1.08);
   color: #fff;
}

.buttons a.mainbtn:active, button.mainbtn:active {
   filter: brightness(0.9);
}

/* Negative button */
.buttons a.negative, button.negative {
   background: linear-gradient(135deg, var(--color-error), hsl(0, 60%, 42%));
   color: #fff;
}

.buttons a.negative:hover, button.negative:hover {
   filter: brightness(1.15);
   box-shadow: 0 4px 12px hsla(0, 70%, 50%, 0.3);
   color: #fff;
}

.buttons a.negative:active {
   filter: brightness(0.9);
}

/* Save button — matte green gradient */
.buttons a.btn-save, .buttons button.btn-save {
   background: linear-gradient(135deg, hsl(130, 30%, 55%), hsl(138, 25%, 50%));
   color: #fff;
}
.buttons a.btn-save:hover, .buttons button.btn-save:hover {
   filter: brightness(1.08);
   box-shadow: 0 4px 12px hsla(130, 30%, 55%, 0.3);
   color: #fff;
}

/* Cancel button — salmon gradient */
.buttons a.btn-cancel, .buttons button.btn-cancel {
   background: linear-gradient(135deg, hsl(6, 93%, 71%), hsl(14, 80%, 62%));
   color: #fff;
}
.buttons a.btn-cancel:hover, .buttons button.btn-cancel:hover {
   filter: brightness(1.08);
   box-shadow: 0 4px 12px hsla(6, 93%, 71%, 0.35);
   color: #fff;
}

/* Regular button */
button.regular, .buttons a.regular {
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   color: var(--color-text);
}

.buttons a.regular:hover, button.regular:hover {
   background: var(--color-surface-raised);
   border-color: var(--color-primary);
   color: var(--color-primary);
   filter: none;
   box-shadow: 0 0 0 3px var(--color-primary-glow);
}


/* ---------- Java Link / Template Edit Link ---------- */

.javalinkbig {
   display: inline-block;
   color: var(--color-text);
   cursor: pointer;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
   padding: 4px 10px;
   background: var(--color-surface-raised);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
   vertical-align: middle;
}

.javalinkbig:hover {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 2px var(--color-primary-glow);
}

.javalinkbig a, a.javalinkbig { color: var(--color-text); text-decoration: none; }
.javalinkbig a:hover, a.javalinkbig:hover { text-decoration: none; }

.templateeditlink {
   color: var(--color-text-secondary);
   cursor: pointer;
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-xs);
   display: inline-block;
   min-width: 40px;
   text-align: center;
   text-decoration: none;
   padding: 2px 6px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   transition: all var(--transition-fast);
}

.templateeditlink:hover {
   border-color: var(--color-primary);
   background: var(--color-surface-raised);
   color: var(--color-primary);
}


/* ---------- Legal ---------- */

.legalH1 {
   width: 100%;
   text-align: center;
   font-size: var(--font-size-2xl);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-heading);
   padding: var(--space-lg) 0;
}


/* ---------- Popup Overlay ---------- */

#popupdiv {
   background: var(--color-surface) !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius-lg) !important;
   box-shadow: var(--shadow-lg) !important;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {
   #container {
      flex-direction: column;
      padding: 0 var(--space-md);
   }

   .sidebar {
      width: 100%;
      min-width: 0;
      flex-direction: row;
      flex-wrap: wrap;
   }

   .sidebarcontent {
      width: 100%;
   }

   .xcontent {
      width: 100%;
      min-height: auto;
   }

   .loginbox {
      margin-top: 8vh;
      width: 100%;
   }

   ul.dashboardimg {
      justify-content: center;
   }

   ul.dashboardimg a {
      min-width: 90px;
      min-height: 90px;
      padding: var(--space-md) var(--space-sm);
   }
}

@media (max-width: 600px) {
   .header {
      padding: var(--space-sm) 0;
   }

   .header img {
      height: 30px;
   }

   table.quicktable {
      font-size: var(--font-size-xs);
   }

   table.quicktable th,
   table.quicktable td.even,
   table.quicktable td.odd {
      padding: 6px 8px;
   }

   ul.dv li span {
      width: 100px;
      font-size: var(--font-size-xs);
   }

   .dvoptions {
      flex-direction: column;
      gap: var(--space-sm);
      align-items: flex-start;
   }
}


/* ---------- Utility / Animations ---------- */

@keyframes fadeIn {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }
}

.contentblock,
.dvcontainer,
.loginbox {
   animation: fadeIn var(--transition-slow) ease-out;
}

/* Validator asterisk styling */
span[id*="Required"] {
   color: var(--color-error) !important;
   font-weight: var(--font-weight-bold);
   margin-left: 4px;
}

/* Checkbox label alignment */
label {
   color: var(--color-text-secondary);
   cursor: pointer;
}

/* ---------- DevExpress Grid Dark Theme ---------- */

.dxgvControl {
   border: 1px solid var(--color-table-border) !important;
   border-radius: var(--radius-md);
   overflow: hidden;
   font-family: var(--font-family) !important;
   font-size: var(--font-size-sm) !important;
}

/* Header */
.dxgvHeader, .dxgvHeader td, .dxgvHeaderPanel {
   background: var(--color-table-header-bg) !important;
   color: var(--color-text-heading) !important;
   border-color: var(--color-table-border) !important;
   font-weight: var(--font-weight-semibold) !important;
   font-size: var(--font-size-sm) !important;
   padding: var(--space-sm) var(--space-md) !important;
}

/* Data rows */
.dxgvDataRow td, .dxgvDataRow_Default td {
   background: var(--color-surface) !important;
   color: var(--color-text) !important;
   border-color: var(--color-table-border) !important;
   padding: var(--space-sm) var(--space-md) !important;
}

/* Alternating rows */
.dxgvDataRow td.dxgv, .dxgvAlternatingRow_Default td {
   background: var(--color-table-alt-bg) !important;
}

/* Hover */
.dxgvDataRow:hover td {
   background: var(--color-table-hover) !important;
}

/* Selected row */
.dxgvSelectedRow td, .dxgvSelectedRow_Default td,
.dxgvFocusedRow td, .dxgvFocusedRow_Default td {
   background: hsla(192, 60%, 45%, 0.15) !important;
   color: var(--color-text) !important;
}

/* Footer / summary */
.dxgvFooter, .dxgvFooter td, .dxgvFooter_Default td {
   background: var(--color-surface-raised) !important;
   color: var(--color-text-secondary) !important;
   border-color: var(--color-table-border) !important;
}

/* Search panel */
.dxgvSearchPanel, .dxgvSearchPanel td {
   background: var(--color-surface-raised) !important;
   border-color: var(--color-table-border) !important;
   padding: var(--space-sm) var(--space-md) !important;
}

.dxgvSearchPanel input {
   background: var(--color-surface) !important;
   color: var(--color-text) !important;
   border: 1px solid var(--color-border) !important;
   border-radius: var(--radius-sm);
   padding: 4px 8px !important;
   font-family: var(--font-family) !important;
}

/* Filter row */
.dxgvFilterRow td, .dxgvFilterBar td {
   background: var(--color-surface-raised) !important;
   color: var(--color-text-secondary) !important;
   border-color: var(--color-table-border) !important;
}

/* Pager */
.dxgvPagerBottomPanel, .dxgvPagerBottomPanel td,
.dxpLite, .dxpLite td {
   background: var(--color-surface-raised) !important;
   color: var(--color-text-secondary) !important;
   border-color: var(--color-table-border) !important;
}

/* Links */
.dxgvControl a {
   color: var(--color-link) !important;
}
.dxgvControl a:hover {
   color: var(--color-link-hover) !important;
}

/* Empty data row */
.dxgvEmptyDataRow td {
   background: var(--color-surface) !important;
   color: hsl(38, 75%, 55%) !important;
   font-style: italic;
}