/* ═══════════════════════════════════════════════════════════════════
   MODERN UI — Gmail-inspired overrides
   Loaded last, supplements mails_support_root.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────── */
:root {
    --font-ui:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
    --radius:     8px;
    --radius-lg:  12px;
    --radius-pill: 20px;
    --shadow:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 14px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
    --shadow-lg:  0 8px 28px rgba(0,0,0,0.14), 0 3px 10px rgba(0,0,0,0.08);
    --shadow-nav: 0 2px 8px rgba(0,0,0,0.28);
    --t-fast:     120ms;
    --t-med:      200ms;
    /* Row hover — uses theme accent saturation (defined in light/dark CSS) */
    --row-hover-bg: hsl(var(--accent-h), var(--accent-s), 95%);
    /* NOTE: --dropdown-bg, --dropdown-text, --dropdown-hover-bg, --dropdown-divider
       are intentionally NOT set here — they come from mails_support_ui_light/dark.css
       so dark mode values are preserved. */
}

/* ── Base typography ─────────────────────────────────────────────── */
body, input, select, textarea, button, td, th, li, a {
    font-family: var(--font-ui) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; }

/* ── Dark mode: links brighter for contrast on dark backgrounds ── */
[data-theme="dark"] a:not(.btn):not(.tp-nav-a):not(.submenulink) {
    color: hsl(var(--accent-h), var(--accent-s), 72%);
}
[data-theme="dark"] a:not(.btn):not(.tp-nav-a):not(.submenulink):hover {
    color: hsl(var(--accent-h), var(--accent-s), 88%);
}
[data-theme="dark"] .action-link {
    color: hsl(var(--accent-h), var(--accent-s), 72%) !important;
}
[data-theme="dark"] .action-link:hover {
    color: hsl(var(--accent-h), var(--accent-s), 88%) !important;
}

/* ── Slim scrollbars ─────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
::-webkit-scrollbar            { width: 6px; height: 6px; }
::-webkit-scrollbar-track      { background: transparent; }
::-webkit-scrollbar-thumb      { background: rgba(0,0,0,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,0.30); }

/* ══════════════════════════════════════════════════════════════════
   CARD COMPONENT
   ══════════════════════════════════════════════════════════════════ */
.card {
    background: var(--surface-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}
.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}
.card-body {
    padding: 16px 18px;
}
.card-count {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

/* ══════════════════════════════════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════════════════════════════════ */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-wrap: wrap;
}
.toolbar-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   TABLE WRAP
   ══════════════════════════════════════════════════════════════════ */
.table-wrap {
    overflow-x: auto;
}
.table-wrap table {
    width: 100%;
    font-size: 13px;
}
.table-wrap th {
    padding: 9px 16px !important;
    text-align: left;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--border-md) !important;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.table-wrap td {
    padding: 11px 16px !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
}
.table-wrap tbody tr:last-child td {
    border-bottom: none !important;
}
.table-wrap tbody tr:hover td {
    background: var(--surface-2) !important;
    cursor: pointer;
}

/* page-content card — wrap existing page-content in card look */
.page-content-card {
    background: var(--surface-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.badge-ok, .badge-active, .badge-green { background: #EAF3DE; color: #27500A; }
.badge-info, .badge-blue, .badge-cycle  { background: #E6F1FB; color: #0C447C; }
.badge-warn, .badge-amber, .badge-perm  { background: #FAEEDA; color: #854F0B; }
.badge-danger, .badge-red, .badge-error { background: #FCEBEB; color: #A32D2D; }
.badge-gray {
    background: var(--surface-2);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════
   ACTION LINKS & UTILITIES
   ══════════════════════════════════════════════════════════════════ */
.action-link {
    font-size: 13px;
    color: var(--accent-color-dark);
    text-decoration: none;
    cursor: pointer;
}
.action-link:hover { text-decoration: underline; }
.action-link.danger { color: #A32D2D; }

.search-input { width: 200px !important; }

.mono {
    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace !important;
    font-size: 11px !important;
    color: var(--text-secondary) !important;
}

/* Empty state */
.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 40px 20px;
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════
   STATUS PILLS
   Removes the full-cell background when a pill div is present inside,
   so the colored indicator becomes a badge rather than a block fill.
   Uses :has() — supported Chrome 105+, Firefox 121+, Safari 15.4+.
   ══════════════════════════════════════════════════════════════════ */

/* Base pill shape */
div[class^="pill-"],
div[class*=" pill-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* Pill used as a button (ex. modale statut après envoi) : garder la couleur sombre de la pill en dark mode */
div[class^="pill-"] > button,
div[class*=" pill-"] > button {
    color: inherit !important;
    font-weight: inherit;
    cursor: pointer;
}

/* Individual pill colors (background = status variable, text = dark contrast) */
.pill-received         { background: var(--status-received-color);           color: #6a1a0a; }
.pill-restarted        { background: var(--status-restarted-color);           color: #2a0a6a; }
.pill-in-progress      { background: var(--status-in-progress-color);         color: #5a3000; }
.pill-waiting-customer { background: var(--status-waiting-customer-color);    color: #3a3a00; }
.pill-waiting-support  { background: var(--status-waiting-support-color);     color: #0a3050; }
.pill-waiting-supplier { background: var(--status-waiting-supplier-color);    color: #0a2848; }
.pill-waiting-technical{ background: var(--status-waiting-technical-color);   color: #081840; }
.pill-responded        { background: var(--status-responded-color);           color: #5a0a40; }
.pill-closed           { background: var(--status-closed-color);              color: #143808; }
.pill-historized       { background: var(--status-historized-color);          color: #3a3a3a; }
.pill-idontknow        { background: var(--status-idk-color);                 color: #3a0050; }
.pill-timestop         { background: var(--status-timestop-color);            color: #3a3a3a; }
.pill-first-timestop   { background: var(--status-first-timestop-color);      color: #3a3000; }

/* Fraud pills */
.pill-fraud-0 { background: var(--fraud-0-color); color: #3a3a3a; }
.pill-fraud-1 { background: var(--fraud-1-color); color: #1a3a08; }
.pill-fraud-2 { background: var(--fraud-2-color); color: #5a3000; }
.pill-fraud-3 { background: var(--fraud-3-color); color: #6a1a0a; }

/* Nb messages pills */
.pill-msgnb-ok      { background: var(--nbmsg-ok-color);      color: #1a3a08; }
.pill-msgnb-warning { background: var(--nbmsg-warning-color);  color: #5a3000; }
.pill-msgnb-ko      { background: var(--nbmsg-ko-color);       color: #6a1a0a; }

/* Remove TD cell background when it already wraps a pill div */
td.td-received:has(div[class^="pill-"]),
td.td-restarted:has(div[class^="pill-"]),
td.td-in-progress:has(div[class^="pill-"]),
td.td-waiting-customer:has(div[class^="pill-"]),
td.td-waiting-support:has(div[class^="pill-"]),
td.td-waiting-supplier:has(div[class^="pill-"]),
td.td-waiting-technical:has(div[class^="pill-"]),
td.td-responded:has(div[class^="pill-"]),
td.td-closed:has(div[class^="pill-"]),
td.td-historized:has(div[class^="pill-"]),
td.td-idontknow:has(div[class^="pill-"]),
td.td-timestop:has(div[class^="pill-"]),
td.td-first-timestop:has(div[class^="pill-"]),
td.td-fraud-0:has(div[class^="pill-"]),
td.td-fraud-1:has(div[class^="pill-"]),
td.td-fraud-2:has(div[class^="pill-"]),
td.td-fraud-3:has(div[class^="pill-"]),
td.td-msgnb-ok:has(div[class^="pill-"]),
td.td-msgnb-warning:has(div[class^="pill-"]),
td.td-msgnb-ko:has(div[class^="pill-"]) {
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   TOP NAVBAR
   ══════════════════════════════════════════════════════════════════ */
.page-header {
    box-shadow: var(--shadow-nav) !important;
}

/* ── Flex layout : 1 ligne garantie, pas de wrap ── */
.nav-header > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* Annule les floats hérités */
.nav-header > ul > li {
    float: none !important;
}

/* Items texte : peuvent se réduire jusqu'à 30px */
.nav-header > ul > li.menu-header {
    flex: 0 1 auto !important;
    min-width: 30px !important;
}

/* Icônes : taille fixe, jamais réduites */
.nav-header > ul > li.menu-image-header {
    flex: 0 0 auto !important;
}

/* Première icône droite : pousse tout ce qui suit vers la droite */
.nav-right-start {
    margin-left: auto !important;
}

/* Texte du menu : ellipsis quand espace insuffisant */
.menu-header > .menu-title,
.menu-header > a.menu-title {
    float: none !important;
    display: block !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

.nav-header {
    background: linear-gradient(
        135deg,
        var(--navbar-bg2-color) 0%,
        hsl(var(--accent-h), 30%, 17%) 100%
    ) !important;
}

/* Nav item wrappers */
.menu-header, .menu-image-header {
    transition: background var(--t-fast) !important;
    border-radius: var(--radius-xs);
}
.menu-header:hover     { background: rgba(255,255,255,0.12) !important; }
.menu-image-header:hover { background: rgba(255,255,255,0.10) !important; }

/* Nav link text (menu-title) */
.menu-title {
    color: rgba(255,255,255,0.92) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
    transition: color var(--t-fast);
}
.menu-header:hover .menu-title { color: #ffffff !important; }

/* Material-icon nav buttons */
.tp-nav-a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 9px !important;
    border-radius: var(--radius-xs) !important;
    text-decoration: none !important;
    transition: background var(--t-fast) !important;
}
.tp-nav-a:hover { background: rgba(255,255,255,0.12) !important; }

.tp-nav-icon {
    color: rgba(255,255,255,0.88);
    font-size: 22px !important;
    vertical-align: middle;
    transition: color var(--t-fast), transform var(--t-fast);
    user-select: none;
    line-height: 1 !important;
}
.tp-nav-a:hover .tp-nav-icon,
.menu-image-header:hover .tp-nav-icon {
    color: #ffffff !important;
    transform: scale(1.08);
}

/* State icons — CSS-driven active/inactive */
.tp-state-img {
    height: 16px !important;
    padding-top: 0 !important;
    opacity: 0.38;
    transition: opacity var(--t-fast), height var(--t-fast), filter var(--t-fast);
    display: block;
}
.tp-state-img.tp-state-active {
    height: 26px !important;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}
.menu-image-header:hover .tp-state-img {
    opacity: 0.75;
}

/* Notification badge */
.tp-notif-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tp-notif-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    width: 9px;
    height: 9px;
    background: #f44336;
    border-radius: 50%;
    border: 2px solid hsl(var(--accent-h), 25%, 18%);
    animation: tp-pulse 2.5s ease-in-out infinite;
}
@keyframes tp-pulse {
    0%,100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.25); opacity: 0.75; }
}

/* ── Right icon sidebar ──────────────────────────────────────────── */
.page-headerright {
    background: hsl(var(--accent-h), 28%, 15%) !important;
    box-shadow: -2px 0 10px rgba(0,0,0,0.18) !important;
    border: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   DROPDOWN MENUS — card style
   ══════════════════════════════════════════════════════════════════ */
.submenu, .submenu-2 {
    background: var(--dropdown-bg) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--dropdown-divider) !important;
    overflow: visible !important;
    padding: 6px 0 !important;
    min-width: 200px !important;
}

.submenu-flyout {
    background: var(--dropdown-bg) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--dropdown-divider) !important;
    padding: 6px 0 !important;
}

.submenu-flyout li {
    border-bottom: none !important;
    transition: background var(--t-fast) !important;
}

.submenu-flyout li:hover {
    background: var(--dropdown-hover-bg) !important;
}

.submenu-flyout li a {
    color: var(--dropdown-text) !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    transition: color var(--t-fast) !important;
    display: block !important;
    width: auto !important;
    box-sizing: border-box !important;
}

.submenu-flyout li:hover a {
    color: var(--accent-color-dark) !important;
    font-weight: 500 !important;
}
.submenu li,
.submenu-2 li {
    border-bottom: none !important;
    transition: background var(--t-fast) !important;
}
.submenu li:hover,
.submenu-2 li:hover  { background: var(--dropdown-hover-bg) !important; }

.submenu    li a,
.submenu-2  li a {
    color: var(--dropdown-text) !important;
    padding: 8px 16px !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    transition: color var(--t-fast) !important;
    display: block;
}
.submenu    li:hover a,
.submenu-2  li:hover a {
    color: var(--accent-color-dark) !important;
    font-weight: 500 !important;
}
/* Filter sub-items */
.submenu-filter { background: var(--dropdown-bg) !important; }
/* Manage/config items — accent left border */
.submenu-manage {
    background: hsl(var(--accent-h), var(--accent-s), 95%) !important;
    border-left: 3px solid var(--accent-color) !important;
    margin-left: 0 !important;
}
[data-theme="dark"] .submenu-manage {
    background: hsl(var(--accent-h), 28%, 20%) !important;
}
[data-theme="dark"] .submenu-filter {
    background: var(--dropdown-bg) !important;
}

/* ── Trigger tabs (side arrows to expand panels) ─────────────────── */
.left-trigger-1, .left-trigger-2,
.left-trigger-3, .left-trigger-4 {
    width: 12px !important;
    border-radius: 0 8px 8px 0 !important;
    border: none !important;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--t-med), width var(--t-med) !important;
}
.left-trigger-1:hover, .left-trigger-2:hover,
.left-trigger-3:hover, .left-trigger-4:hover {
    opacity: 1 !important;
    width: 16px !important;
}
.left-trigger-1-up, .left-trigger-2-up,
.left-trigger-3-up, .left-trigger-4-up {
    width: 12px !important;
    border-radius: 0 8px 8px 0 !important;
    border: none !important;
    opacity: 0.6;
    cursor: pointer;
}
.right-trigger, .right-trigger-2 {
    border-radius: 8px 0 0 8px !important;
    border: none !important;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--t-med) !important;
}
.right-trigger:hover, .right-trigger-2:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════════
   TAB NAVIGATION
   ══════════════════════════════════════════════════════════════════ */
.nav-tab-head-selected {
    background: var(--accent-color-dark) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background var(--t-fast);
    white-space: nowrap;
}
.nav-tab-head-unselected {
    background: var(--surface-color) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}
.nav-tab-head-unselected:hover {
    background: var(--surface-2) !important;
    color: var(--text-primary) !important;
}
.notif-tab-head-selected {
    background: var(--accent-color-dark) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
}
.notif-tab-head-unselected {
    background: var(--surface-color) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 10.5px !important;
    cursor: pointer;
}

/* ── Setter label cells in cards (message_setters, params forms)
   Override global white-space:nowrap so long labels wrap,
   and enforce a fixed width for visual alignment across cards ── */
.card td.td-head-accent-light,
.card td.td-head-accent-dark {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    white-space: normal !important;
    word-break: break-word;
    vertical-align: middle !important;
}

/* ══════════════════════════════════════════════════════════════════
   TABLES — reference-style clean look
   ══════════════════════════════════════════════════════════════════ */

/* 1. Kill HTML border=1 and root.css broadcast border-width rules */
table {
    border: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
/* Remove left/right/top borders globally (root.css sets them with broad selectors) */
td, th {
    border-top-width:   0 !important;
    border-left-width:  0 !important;
    border-right-width: 0 !important;
}

/* 2. Content-area tables: horizontal-only bottom borders (like reference) */
.page-content td, .page-content th,
.page-content-home td, .page-content-home th,
.page-content-messages td, .page-content-messages th,
.page-content-messv2 td, .page-content-messv2 th,
.page-left td, .page-left th,
.page-right td, .page-right th,
.nav-tab td, .nav-tab th,
.list-table td, .list-table th,
.list-table-alt td, .list-table-alt th,
.table-wrap td, .table-wrap th {
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
}
/* No border on last row */
.page-content tr:last-child td,
.page-content-home tr:last-child td,
.page-content-messages tr:last-child td,
.page-left tr:last-child td,
.page-right tr:last-child td,
.nav-tab tr:last-child td {
    border-bottom: none !important;
}

/* 3. Table header cells (section headers) */
.td-head-accent-light,
.td-head-accent-dark,
.td-head-accent-internal,
.td-head-accent-calendar,
.td-head-accent-forward,
.td-head-accent-server-error {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 7px 10px !important;
    white-space: nowrap;
}

.td-head-accent-header {
     background: var(--surface-2) !important;
}


/* 4. Tablesorter th headers — reference style */
.tablesorter thead th,
.tablesorter th {
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 9px 14px !important;
    border-bottom: 1px solid var(--border-md) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 5. Row hover */
tr.tr-one, tr.tr-two,
tr.tr-one-2, tr.tr-two-2 { transition: background var(--t-fast); }

tr.tr-one:hover td, tr.tr-two:hover td,
tr.tr-one-2:hover td, tr.tr-two-2:hover td {
    background: var(--row-hover-bg) !important;
    cursor: pointer;
}

/* 6. Tablesorter tbody row hover */
.tablesorter tbody tr:hover td {
    background: var(--surface-2) !important;
}

/* 7. Clean td padding in data tables */
.tablesorter td {
    padding: 10px 14px !important;
    font-size: 12px !important;
}

/* 8. Margins reset from root.css (removes unwanted gaps between rows) */
.page-content table, .page-content tr, .page-content td,
.page-content-home table, .page-content-home tr, .page-content-home td,
.page-left table, .page-left tr, .page-left td,
.page-right table, .page-right tr, .page-right td {
    margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — reference: 8px radius, flat, border, 120ms transition
   ══════════════════════════════════════════════════════════════════ */
.btn, .btn_mini {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-radius: var(--radius) !important;       /* 8px — not pill */
    border: 1px solid var(--border-md) !important;
    background: var(--surface-color) !important;
    color: var(--text-primary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: var(--font-ui) !important;
    cursor: pointer !important;
    transition: all var(--t-fast) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.btn        { padding: 7px 14px !important; }
.btn_mini   { padding: 5px 10px !important; font-size: 11px !important; }

.btn:hover, .btn_mini:hover {
    background: var(--surface-2) !important;
    border-color: rgba(0,0,0,0.20) !important;
}
.btn:active, .btn_mini:active {
    transform: scale(0.98) !important;
}

/* Color variants — soft tones matching reference palette */
.btn_grey   { background: var(--surface-2) !important; color: var(--text-primary) !important; }
.btn_lgrey  { background: var(--surface-color) !important; color: var(--text-primary) !important; }
.btn_blue   { background: #E6F1FB !important; color: #0C447C !important; border-color: rgba(24,95,165,0.25) !important; }
.btn_pink   { background: #FCEBEB !important; color: #A32D2D !important; border-color: rgba(163,45,45,0.25) !important; }
.btn_red    { background: #FCEBEB !important; color: #A32D2D !important; border-color: rgba(163,45,45,0.25) !important; }
.btn_green  { background: #EAF3DE !important; color: #27500A !important; border-color: rgba(59,109,17,0.25) !important; }
.btn_yellow { background: #FAEEDA !important; color: #6B3A00 !important; border-color: rgba(133,79,11,0.25) !important; }
.btn_purple { background: #F3E8FD !important; color: #5B0EA6 !important; border-color: rgba(91,14,166,0.25) !important; }
.btn_orange { background: #FEF0E0 !important; color: #8A3D00 !important; border-color: rgba(138,61,0,0.25) !important; }

/* Submit / primary buttons */
input[type="submit"], button[type="submit"] {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-md) !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--t-fast) !important;
    background: var(--surface-color) !important;
    color: var(--text-primary) !important;
}
input[type="submit"]:hover, button[type="submit"]:hover {
    background: var(--surface-2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FORM INPUTS — reference: 8px radius, rgba border, focus glow
   ══════════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    padding: 7px 10px !important;
    border: 1px solid var(--border-md) !important;
    border-radius: var(--radius) !important;       /* 8px */
    background: var(--input-bg-color, var(--surface-color)) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-family: var(--font-ui) !important;
    transition: border-color var(--t-fast) !important;
    outline: none !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
    border-color: var(--accent-color-dark) !important;
    box-shadow: 0 0 0 3px var(--accent-color-trans) !important;
}
select {
    padding: 7px 10px !important;
    border: 1px solid var(--border-md) !important;
    border-radius: var(--radius) !important;
    background: var(--input-bg-color, var(--surface-color)) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-family: var(--font-ui) !important;
    cursor: pointer !important;
    transition: border-color var(--t-fast) !important;
    outline: none !important;
}
select:focus {
    border-color: var(--accent-color-dark) !important;
    box-shadow: 0 0 0 3px var(--accent-color-trans) !important;
}
textarea {
    padding: 8px 10px !important;
    border: 1px solid var(--border-md) !important;
    border-radius: var(--radius) !important;
    background: var(--input-bg-color, var(--surface-color)) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    font-family: var(--font-ui) !important;
    resize: vertical !important;
    transition: border-color var(--t-fast) !important;
    outline: none !important;
}
textarea:focus {
    border-color: var(--accent-color-dark) !important;
    box-shadow: 0 0 0 3px var(--accent-color-trans) !important;
}
input[type="checkbox"], input[type="radio"] {
    width: 15px !important;
    height: 15px !important;
    cursor: pointer !important;
    accent-color: var(--accent-color-dark) !important;
}
/* Form labels */
label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SELECTED / NOT-SELECTED LINKS (theme/settings toggles)
   ══════════════════════════════════════════════════════════════════ */
.link-selected {
    color: var(--accent-color-dark) !important;
    font-weight: 600 !important;
    background: hsl(var(--accent-h), 70%, 92%) !important;
    padding: 3px 9px !important;
    border-radius: var(--radius) !important;
    display: inline-block !important;
    border: 1px solid hsl(var(--accent-h), 55%, 78%) !important;
}
.link-not-selected {
    color: var(--accent-color-dark) !important;
    padding: 3px 9px !important;
    border-radius: var(--radius) !important;
    display: inline-block !important;
    border: 1px solid transparent !important;
    transition: background var(--t-fast), border-color var(--t-fast) !important;
}
.link-not-selected:hover {
    background: var(--surface-2) !important;
    border-color: var(--border-md) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════ */
.pagination li {
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-md) !important;
    font-size: 12px !important;
    margin: 0 2px !important;
    transition: background var(--t-fast) !important;
}
.pagination li:hover:not(.active) {
    background: var(--surface-2) !important;
}
.pagination li.active {
    background: var(--accent-color-dark) !important;
    border-color: var(--accent-color-dark) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MODALS — reference: 12px radius, border + shadow
   ══════════════════════════════════════════════════════════════════ */
.modal-content {
    background: var(--surface-color) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important;
    overflow: hidden;
}
.modal-header {
    padding: 14px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}
.modal-footer {
    padding: 12px 20px !important;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.close {
    color: rgba(255,255,255,0.8) !important;
    transition: color var(--t-fast) !important;
}
.close:hover { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════════════
   PAGE PANELS — card-like appearance
   ══════════════════════════════════════════════════════════════════ */

/* Left sidebar panel */
.page-left, .page-left-min,
.page-nav-left-content,
.page-nav-left-content-mess,
.page-nav-left-content-mess-v1 {
    background: var(--surface-color) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}
/* Right content panel */
.page-nav-right-content,
.page-nav-right-content-mess {
    background: var(--surface-color) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.06) !important;
}
/* Nav tab content area */
.nav-tab {
    background: var(--surface-color) !important;
    border-top: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIST/FILTER BAR
   ══════════════════════════════════════════════════════════════════ */
.list-form, .list-form-alt {
    background-color: var(--surface-color) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
}

/* ══════════════════════════════════════════════════════════════════
   MESSAGE BUBBLES — reference card style
   ══════════════════════════════════════════════════════════════════ */
.bubble-mess-1-from,
.bubble-mess-1-to,
.bubble-mess-1-internal,
.bubble-mess-1-home {
    background: var(--surface-color) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
    margin-bottom: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   TABLESORTER header rows
   ══════════════════════════════════════════════════════════════════ */
.tablesorter-header {
    border-radius: 4px !important;
    transition: background var(--t-fast) !important;
}
.tablesorter-header:hover {
    filter: brightness(0.92) !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE: dropdown palette override (from dark.css variables)
   ══════════════════════════════════════════════════════════════════ */
/* When dark.css sets --dropdown-bg to a dark value, submenu inherits it */
/* (no special selector needed — we use CSS variables throughout) */