/* ==========================================================================
   GoodByte Mail UI Refresh 2026
   Shared visual system for admin, customer portal and operational screens.
   ========================================================================== */

:root {
    --gb-bg: #f3f7f8;
    --gb-surface: #ffffff;
    --gb-surface-soft: #f8fbfc;
    --gb-border: #dce8eb;
    --gb-border-strong: #c9dce1;
    --gb-text: #1d414e;
    --gb-muted: #728891;
    --gb-primary: #0a7483;
    --gb-primary-dark: #075467;
    --gb-accent: #14998e;
    --gb-success: #168369;
    --gb-warning: #a36b14;
    --gb-danger: #b34d47;
    --gb-shadow-sm: 0 5px 18px rgba(20, 62, 75, .045);
    --gb-shadow-md: 0 14px 34px rgba(20, 62, 75, .075);
    --gb-radius-sm: 10px;
    --gb-radius-md: 15px;
    --gb-radius-lg: 20px;
}

html { scroll-behavior: smooth; }
body { background: var(--gb-bg); color: var(--gb-text); }
a, button, input, select, textarea { transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .66; }

/* Main admin shell */
.gb-shell { background: var(--gb-bg); }
.gb-sidebar {
    background: linear-gradient(180deg, #063e51 0%, #075a6b 50%, #076f74 100%) !important;
    box-shadow: 12px 0 36px rgba(8, 52, 64, .08);
}
.gb-sidebar-header { border-bottom-color: rgba(255,255,255,.08) !important; }
.gb-brand { text-decoration: none; }
.gb-brand-logo-image { background: rgba(255,255,255,.96) !important; box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.gb-brand-text strong { letter-spacing: .1px; }
.gb-brand-text span { color: rgba(255,255,255,.55) !important; }
.gb-nav-section-title { color: rgba(218, 246, 244, .57) !important; letter-spacing: .3px; }
.gb-nav-section a { border: 1px solid transparent; }
.gb-nav-section a:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.07); transform: translateX(-1px); }
.gb-nav-section a.active { background: rgba(255,255,255,.13) !important; border-color: rgba(255,255,255,.10); box-shadow: inset -3px 0 0 #77e5d2; }
.gb-nav-icon { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.09) !important; }
.gb-main { background: var(--gb-bg); }
.gb-topbar { backdrop-filter: blur(12px); background: rgba(255,255,255,.94) !important; border-bottom-color: var(--gb-border) !important; box-shadow: 0 4px 18px rgba(25, 65, 77, .035); }
.gb-content { max-width: 1600px; margin-inline: auto; width: 100%; }

/* Common page canvas */
.gb-content > :is(.page,.panel,.tenants,.domains-page,.aliases-page,.trace-page,.operations-page,.monitoring-page,.rep-page,.as-page,.ds-shell,.mig,.em-page,.s6,.cmp,.deliv,.ed,.ec,.hc-shell,.pc-shell,.hf-shell,.sa-shell,.st-shell,.n-shell,.unified-plan) {
    animation: gb-page-in .22s ease both;
}
@keyframes gb-page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Universal page headers */
:is(.page-header,.page-head,.head,.ds-hero,.mig-head,.em-head,.s6-head,.ed-head,.hc-head,.hf-head,.sa-head,.st-head,.n-head,.rep-head,.as-head,.mon-head) {
    border-radius: var(--gb-radius-lg) !important;
}

.page-header,
.page-head,
.head,
.mig-head,
.em-head,
.s6-head,
.ed-head,
.hc-head,
.hf-head,
.sa-head,
.st-head,
.n-head,
.rep-head,
.as-head,
.mon-head {
    padding: 18px 20px !important;
    border: 1px solid var(--gb-border) !important;
    background: linear-gradient(135deg, #f8fcfc 0%, #ffffff 72%) !important;
    box-shadow: var(--gb-shadow-sm);
}

:is(.page-header,.page-head,.head,.mig-head,.em-head,.s6-head,.ed-head,.hc-head,.hf-head,.sa-head,.st-head,.n-head,.rep-head,.as-head,.mon-head) h1,
:is(.page-header,.page-head,.head,.mig-head,.em-head,.s6-head,.ed-head,.hc-head,.hf-head,.sa-head,.st-head,.n-head,.rep-head,.as-head,.mon-head) h2 {
    color: var(--gb-text) !important;
    letter-spacing: -.25px;
}

.page-eyebrow,
.em-eye,
.mon-eyebrow,
.rep-eyebrow,
.as-eyebrow,
.ds-kicker {
    color: var(--gb-primary) !important;
    font-weight: 800 !important;
    letter-spacing: .45px;
}

/* Cards and panels */
.card,
.panel,
.stat,
.gb-panel,
.ds-card,
.hc-card,
.n-card,
.sa-card,
.st-card,
.pc-card,
.page .card,
.table-card {
    border: 1px solid var(--gb-border) !important;
    border-radius: var(--gb-radius-md) !important;
    background: var(--gb-surface) !important;
    box-shadow: var(--gb-shadow-sm) !important;
}
.card:hover,
.stat:hover,
.feature-tile:hover {
    border-color: #bed9dd !important;
}

/* Generic forms */
.gb-content input:not([type="checkbox"]):not([type="radio"]),
.gb-content select,
.gb-content textarea {
    min-height: 42px;
    border: 1px solid var(--gb-border-strong) !important;
    border-radius: var(--gb-radius-sm) !important;
    background: #fff !important;
    color: var(--gb-text) !important;
    outline: none;
}
.gb-content textarea { min-height: 100px; }
.gb-content input:focus,
.gb-content select:focus,
.gb-content textarea:focus {
    border-color: #69aeb8 !important;
    box-shadow: 0 0 0 3px rgba(10,116,131,.09) !important;
}
.gb-content label { color: #45636d; font-weight: 650; }

/* Buttons */
.gb-content button:not(.wm-row):not(.wm-folder-btn),
.gb-content .primary,
.gb-content .quick {
    border-radius: 10px;
}
.gb-content button:hover:not(:disabled) { transform: translateY(-1px); }
.primary,
.gb-content button.primary,
.actions button,
.compose {
    background: linear-gradient(135deg, var(--gb-primary-dark), var(--gb-primary)) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(7,84,103,.13);
}
.ghost,
.mini,
.gb-content button.secondary {
    background: #f3f8f9 !important;
    color: #385963 !important;
    border: 1px solid var(--gb-border) !important;
}

/* Tables */
.gb-content table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.gb-content thead th { position: sticky; top: 0; z-index: 1; padding: 12px 13px; background: #f2f7f8; color: #5b747d; border-bottom: 1px solid var(--gb-border); font-size: 12px; font-weight: 800; }
.gb-content tbody td { padding: 12px 13px; border-bottom: 1px solid #edf3f4; color: #35535d; }
.gb-content tbody tr:hover td { background: #fbfdfd; }
.table-wrap,
.data-table { border: 1px solid var(--gb-border); border-radius: 13px; background: #fff; overflow: auto; }
.data-head { background: #f2f7f8 !important; }
.data-row:hover { background: #fbfdfd; }

/* Status / messages */
.notice,
.msg,
.hf-msg,
.st-msg,
.gb-catalog-message,
.gb-cart-message {
    border: 1px solid #d8e8e7 !important;
    border-radius: 11px !important;
    background: #f1f9f8 !important;
    color: #37615e !important;
}
.badge { border: 1px solid transparent; }
.badge.ok { border-color: #c7eadf; }
.badge.pending { border-color: #f0deb4; }
.badge.danger { border-color: #f0cdca; }

/* Statistic grids */
.cards,
.stats {
    gap: 12px !important;
}
.cards .card,
.stats .stat {
    min-height: 108px;
    position: relative;
    overflow: hidden;
}
.cards .card::after,
.stats .stat::after {
    content: "";
    position: absolute;
    width: 74px;
    height: 74px;
    left: -25px;
    bottom: -34px;
    border-radius: 50%;
    background: rgba(10,116,131,.055);
}
.cards .card strong,
.stats .stat strong { color: #164d5a !important; }

/* Tenant / commercial features */
.feature-tile {
    border-color: var(--gb-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--gb-shadow-sm) !important;
}
.feature-tile b { color: #164c59; font-size: 15px; }
.feature-tile span { color: var(--gb-muted) !important; }
.quick { border: 1px solid #d7e9e6; text-decoration: none; }
.quick:hover { border-color: #9fcec8; transform: translateY(-1px); }

/* Admin login */
.gb-admin-login-layout .gb-login-card {
    border: 1px solid rgba(14, 107, 127, .11) !important;
    border-radius: 24px !important;
    box-shadow: 0 28px 76px rgba(12, 58, 72, .15) !important;
}
.gb-admin-login-layout .gb-login-submit {
    background: linear-gradient(135deg, #07556a, #0a8390) !important;
}

/* Client top bar */
.client-topbar {
    height: 72px !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gb-border) !important;
    box-shadow: 0 5px 20px rgba(28, 69, 81, .035) !important;
}
.client-avatar { background: linear-gradient(135deg, #08667b, #10958e) !important; box-shadow: 0 6px 14px rgba(8,102,123,.15); }
.client-logout:hover { color: var(--gb-danger); border-color: #e8cbc8; background: #fff8f7; }
.client-main { background: var(--gb-bg); }

/* Webmail refinement */
.gb-webmail { background: #fff; }
.wm-sidebar { background: linear-gradient(180deg, #f8fbfc 0%, #f3f8f9 100%) !important; }
.wm-compose-main { background: linear-gradient(135deg, #07576a, #0c8790) !important; box-shadow: 0 8px 18px rgba(7,87,106,.16); }
.wm-folder-btn.active { background: #e2f2f1 !important; color: #075b68 !important; }
.wm-row:hover { background: #f8fbfc !important; }
.wm-row.unread { background: #f2faf9 !important; }
.wm-search { border-color: var(--gb-border) !important; background: #f8fbfc !important; }
.wm-chip.active { background: #e5f3f2 !important; color: #075c68 !important; border-color: #c6e2df !important; }
.wm-modal { border: 1px solid var(--gb-border) !important; box-shadow: 0 30px 90px rgba(19,52,63,.20) !important; }

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(18, 153, 142, .24);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 900px) {
    .gb-content { padding: 16px !important; }
    .page-header,.page-head,.head,.mig-head,.em-head,.s6-head,.ed-head,.hc-head,.hf-head,.sa-head,.st-head,.n-head,.rep-head,.as-head,.mon-head { padding: 15px !important; }
    .cards,.stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (max-width: 560px) {
    .gb-content { padding: 11px !important; }
    .cards,.stats { grid-template-columns: 1fr !important; }
    .card,.panel,.stat { border-radius: 13px !important; }
    .client-topbar { height: 64px !important; }
}

/* Reusable structured page components */
.gb-page {
    min-height: 100%;
    padding: 20px;
    color: var(--gb-text);
}

.gb-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 15px;
    padding: 20px 22px;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-lg);
    background: linear-gradient(135deg, #f7fbfc 0%, #fff 72%);
    box-shadow: var(--gb-shadow-sm);
}

.gb-page-head-copy { min-width: 0; }
.gb-page-kicker { display: block; margin-bottom: 5px; color: var(--gb-primary); font-size: 11px; font-weight: 900; letter-spacing: .6px; }
.gb-page-head h1 { margin: 0; color: #183f4d; font-size: 26px; line-height: 1.25; }
.gb-page-head p { margin: 7px 0 0; max-width: 780px; color: var(--gb-muted); font-size: 13px; line-height: 1.8; }
.gb-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.gb-page-card {
    padding: 17px;
    border: 1px solid var(--gb-border);
    border-radius: var(--gb-radius-md);
    background: #fff;
    box-shadow: var(--gb-shadow-sm);
}

.gb-page-card + .gb-page-card { margin-top: 13px; }
.gb-page-card h2 { margin: 0 0 12px; color: #1b4754; font-size: 17px; }
.gb-page-empty { padding: 34px 18px; text-align: center; color: var(--gb-muted); }
.gb-page-links { display: flex; gap: 8px; flex-wrap: wrap; }
.gb-page-links a { padding: 9px 12px; border: 1px solid var(--gb-border); border-radius: 10px; background: #f7fbfc; color: #1c5965; text-decoration: none; font-weight: 750; font-size: 12px; }
.gb-page-links a:hover { border-color: #aed3d6; background: #f0f8f8; transform: translateY(-1px); }

.gb-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 14px; }
.gb-metric { padding: 15px; border: 1px solid var(--gb-border); border-radius: 14px; background: #fff; box-shadow: var(--gb-shadow-sm); }
.gb-metric span { display: block; color: var(--gb-muted); font-size: 11px; font-weight: 700; }
.gb-metric strong { display: block; margin-top: 5px; color: #164d5a; font-size: 24px; }

.gb-table-wrap { overflow: auto; border: 1px solid var(--gb-border); border-radius: 13px; background: #fff; }
.gb-table-wrap table { min-width: 760px; }

.gb-action-primary,
.gb-action-secondary {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 800;
    text-decoration: none;
}
.gb-action-primary { border: 0; background: linear-gradient(135deg, var(--gb-primary-dark), var(--gb-primary)); color: #fff; box-shadow: 0 7px 17px rgba(7,84,103,.14); }
.gb-action-secondary { border: 1px solid var(--gb-border); background: #f7fbfc; color: #345862; }

@media (max-width: 900px) {
    .gb-page { padding: 14px; }
    .gb-page-head { align-items: flex-start; flex-direction: column; padding: 17px; }
    .gb-metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px) {
    .gb-page { padding: 10px; }
    .gb-page-head h1 { font-size: 22px; }
    .gb-metric-grid { grid-template-columns: 1fr; }
    .gb-page-actions { width: 100%; }
    .gb-page-actions > * { flex: 1; }
}

.gb-metric-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gb-metric small { display: block; margin-top: 3px; color: #8a9ba1; font-size: 10px; }

@media (max-width: 1250px) {
    .gb-metric-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .gb-metric-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stronger overrides for pages that use CSS isolation. */
.gb-content :is(.page-header,.page-head,.head,.mig-head,.em-head,.s6-head,.ed-head,.hc-head,.hf-head,.sa-head,.st-head,.n-head,.rep-head,.as-head,.mon-head) {
    border: 1px solid var(--gb-border) !important;
    border-radius: var(--gb-radius-lg) !important;
    background: linear-gradient(135deg, #f8fcfc 0%, #fff 72%) !important;
    box-shadow: var(--gb-shadow-sm) !important;
}

.gb-content :is(.card,.panel,.stat,.ds-card,.hc-card,.n-card,.sa-card,.st-card,.pc-card,.table-card) {
    border-color: var(--gb-border) !important;
    border-radius: var(--gb-radius-md) !important;
    box-shadow: var(--gb-shadow-sm) !important;
}

.gb-content :is(.card,.panel,.stat,.ds-card,.hc-card,.n-card,.sa-card,.st-card,.pc-card,.table-card):hover {
    border-color: #c3dce0 !important;
}

.gb-content :is(.page,.tenants,.domains-page,.aliases-page,.trace-page,.operations-page,.monitoring-page,.rep-page,.as-page,.ds-shell,.mig,.em-page,.s6,.cmp,.deliv,.ed,.ec,.hc-shell,.pc-shell,.hf-shell,.sa-shell,.st-shell,.n-shell,.unified-plan) {
    color: var(--gb-text) !important;
    background: var(--gb-bg) !important;
}

.gb-content :is(.page,.tenants,.domains-page,.aliases-page,.trace-page,.operations-page,.monitoring-page,.rep-page,.as-page,.ds-shell,.mig,.em-page,.s6,.cmp,.deliv,.ed,.ec,.hc-shell,.pc-shell,.hf-shell,.sa-shell,.st-shell,.n-shell,.unified-plan) > section,
.gb-content :is(.page,.tenants,.domains-page,.aliases-page,.trace-page,.operations-page,.monitoring-page,.rep-page,.as-page,.ds-shell,.mig,.em-page,.s6,.cmp,.deliv,.ed,.ec,.hc-shell,.pc-shell,.hf-shell,.sa-shell,.st-shell,.n-shell,.unified-plan) > .card {
    border-color: var(--gb-border) !important;
    box-shadow: var(--gb-shadow-sm) !important;
}