@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=optional');

:root {
  --primary-color: #7c5cff;
  --secondary-color: #101a30;
  --accent-color: #9a83ff;
  --background-color: #07101f;
  --surface-color: #111c31;
  --surface-raised: #16243d;
  --text-color: #f5f7ff;
  --muted-color: #9aa8bf;
  --border-color: rgba(173, 188, 218, .16);
  --success-color: #38c793;
  --warning-color: #f2b84b;
  --danger-color: #ef6472;
  --info-color: #4f9cf9;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .3);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --sidebar-width: 248px;
  --navbar-height: 64px;
}

:root[data-ui-accent="ocean"] { --primary-color: #2588f8; --accent-color: #69adff; }
:root[data-ui-accent="forest"] { --primary-color: #22a06b; --accent-color: #52d69a; }
:root[data-ui-accent="rose"] { --primary-color: #df5277; --accent-color: #fa82a0; }
:root[data-ui-accent="amber"] { --primary-color: #d99118; --accent-color: #f5bd4f; }
:root[data-ui-accent="teal"] { --primary-color: #0f9e8f; --accent-color: #43d2c2; }
:root[data-ui-accent="indigo"] { --primary-color: #4f6bdc; --accent-color: #7f96f5; }
:root[data-ui-accent="coral"] { --primary-color: #e56f51; --accent-color: #ff9a80; }
:root[data-ui-accent="lime"] { --primary-color: #669c1b; --accent-color: #9bd84c; }
:root[data-ui-accent="magenta"] { --primary-color: #bd4bb7; --accent-color: #e17adc; }
:root[data-ui-accent="slate"] { --primary-color: #56657d; --accent-color: #91a0b7; }
:root[data-ui-theme="light"] {
  --background-color: #edf1f8;
  --secondary-color: #e6ebf4;
  --surface-color: #ffffff;
  --surface-raised: #f6f8fc;
  --text-color: #151927;
  --muted-color: #647089;
  --border-color: rgba(42, 52, 75, .14);
  --shadow-sm: 0 8px 24px rgba(30, 42, 68, .1);
  --shadow-lg: 0 22px 60px rgba(30, 42, 68, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; }
body {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-color);
  background:
    radial-gradient(circle at 82% -10%, rgba(124, 92, 255, .18), transparent 30rem),
    var(--background-color);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
a { color: #b6a7ff; text-underline-offset: 3px; }
a:hover { color: #d2c9ff; }
img, svg, video, canvas { max-width: 100%; }

/* Shared application shell */
body > .navbar,
body > nav.navbar {
  min-height: var(--navbar-height);
  padding: .65rem clamp(.8rem, 2vw, 1.5rem);
  background: rgba(8, 17, 33, .9) !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
  backdrop-filter: blur(18px);
}
.navbar-brand { color: var(--text-color) !important; font-size: clamp(1rem, 2vw, 1.2rem) !important; font-weight: 750 !important; letter-spacing: -.02em; }
.navbar .nav-link { color: var(--muted-color) !important; border-radius: 9px; padding: .55rem .75rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff !important; background: rgba(124, 92, 255, .14); }
.navbar-toggler { border-color: var(--border-color); color: var(--text-color); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(124, 92, 255, .25); }

.sidebar {
  top: var(--navbar-height) !important;
  width: var(--sidebar-width) !important;
  height: calc(100vh - var(--navbar-height)) !important;
  padding: .8rem !important;
  background: #0b1528 !important;
  border-right: 1px solid var(--border-color);
  box-shadow: 18px 0 45px rgba(0, 0, 0, .16);
  overflow-y: auto !important;
  
  z-index: 1035 !important;
}
.sidebar { display: flex; flex-direction: column; }
.sidebar > ul, .sidebar > .nav { flex: 0 0 auto; }
.pc-sidebar-brand { display: flex; align-items: center; gap: .55rem; min-height: 52px; margin: -.15rem 0 .7rem; padding: .45rem .65rem; color: var(--text-color); text-decoration: none; }
.pc-sidebar-brand:hover { color: var(--text-color); }
.pc-sidebar-brand > span { display: grid; place-items: center; width: 29px; height: 29px; color: #fff; background: linear-gradient(145deg, var(--accent-color), var(--primary-color)); border-radius: 9px 9px 9px 3px; font-size: 1rem; font-weight: 900; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 32%, transparent); }
.pc-sidebar-brand strong { font-size: 1.05rem; letter-spacing: -.04em; }
.pc-sidebar-brand strong span { color: var(--accent-color); }
.sidebar .user-info { margin: 0 0 .7rem; padding: 1rem !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-md); background: rgba(255,255,255,.025); }
.sidebar .user-info h4 { color: var(--text-color) !important; font-size: 1rem !important; overflow-wrap: anywhere; }
.sidebar .user-info p { color: var(--muted-color) !important; font-size: .78rem !important; overflow-wrap: anywhere; }
.sidebar .nav-link { display: flex !important; align-items: center; gap: .7rem; margin: .2rem 0; padding: .72rem .8rem !important; color: var(--muted-color) !important; border-radius: var(--radius-sm); font-weight: 600; transition: color .18s ease, background .18s ease, transform .18s ease; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff !important; background: linear-gradient(135deg, rgba(124,92,255,.26), rgba(124,92,255,.1)) !important; transform: translateX(2px); }
.sidebar .nav-link i { width: 1.15rem; color: #a994ff; text-align: center; }
.sidebar .nav-link kbd { margin-left: auto; padding: .18rem .38rem; color: var(--muted-color); background: rgba(255,255,255,.06); border: 1px solid var(--border-color); border-radius: 6px; font: 600 .62rem/1.2 inherit; }
.sidebar button.nav-link { width: 100%; border: 0; background: transparent; text-align: left; }
:root[data-ui-sidebar="compact"] .sidebar .nav-link { margin-block: .05rem; padding-block: .52rem !important; }
:root[data-ui-sidebar="compact"] .sidebar .user-info { padding: .75rem !important; }
.pc-sidebar-account { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: .7rem; width: 100%; margin-top: auto; padding: .7rem; color: var(--text-color); background: rgba(255,255,255,.045); border: 1px solid var(--border-color); border-radius: var(--radius-md); text-align: left; }
.pc-sidebar-account:hover { background: rgba(124,92,255,.13); border-color: color-mix(in srgb, var(--primary-color) 55%, transparent); }
.pc-avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: #fff; background: linear-gradient(145deg, var(--accent-color), var(--primary-color)); border-radius: 50%; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 35%, transparent); font-size: .78rem; font-weight: 800; }
.pc-account-copy { min-width: 0; display: grid; }
.pc-account-copy strong, .pc-account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-account-copy strong { font-size: .78rem; }
.pc-account-copy small { color: var(--muted-color); font-size: .66rem; }
.main-content { margin-left: var(--sidebar-width) !important; width: auto !important; min-width: 0; padding: clamp(1rem, 2.4vw, 2rem) !important; padding-bottom: 5.5rem !important; }

/* Content and components */
h1, h2, h3, h4, h5, h6,
.navbar-brand, .pc-sidebar-brand strong, .metrics-value {
  color: var(--text-color);
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.025em;
}
button, input, select, textarea, table { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
.text-muted { color: var(--muted-color) !important; }
.card, .modal-content, .dropdown-menu {
  color: var(--text-color);
  background: linear-gradient(145deg, rgba(22,36,61,.98), rgba(15,27,48,.98)) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card { overflow: hidden; }
.card-body { padding: clamp(1rem, 2vw, 1.35rem); }
.card-header, .modal-header, .modal-footer { background: rgba(255,255,255,.025) !important; border-color: var(--border-color) !important; }
.row > [class*="col-"] > .card { height: 100%; }
.bg-calls, .bg-duration, .bg-converted, .bg-revenue, .bg-total, .bg-active, .bg-paused, .bg-applied, .bg-accepted, .bg-rejected, .bg-used, .bg-remaining {
  position: relative; isolation: isolate; min-height: 142px; padding: 1.15rem !important; background: linear-gradient(145deg, color-mix(in srgb, var(--primary-color) 15%, #192947), #111d33) !important; border-top: 3px solid var(--primary-color) !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bg-calls::after, .bg-duration::after, .bg-converted::after, .bg-revenue::after, .bg-total::after, .bg-active::after, .bg-paused::after, .bg-applied::after, .bg-accepted::after, .bg-rejected::after, .bg-used::after, .bg-remaining::after { content: ""; position: absolute; z-index: -1; right: -28px; bottom: -42px; width: 125px; height: 125px; background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 68%); border-radius: 50%; }
.metrics-row .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary-color) 48%, var(--border-color)) !important; box-shadow: 0 16px 38px color-mix(in srgb, var(--primary-color) 14%, rgba(0,0,0,.3)) !important; }
.metric-icon { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 40px; height: 40px; color: var(--accent-color); background: color-mix(in srgb, var(--primary-color) 16%, rgba(255,255,255,.035)); border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color)); border-radius: 12px; font-size: 1.05rem; }
.metrics-title { color: var(--muted-color) !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .07em; text-transform: uppercase; }
.metrics-value { margin: .3rem 0 .35rem; color: var(--text-color) !important; font-size: clamp(1.65rem,3vw,2.25rem) !important; font-weight: 850 !important; letter-spacing: -.045em; }
.bg-duration, .bg-active, .bg-applied, .bg-used { border-top-color: var(--info-color) !important; }
.bg-converted, .bg-accepted, .bg-remaining { border-top-color: var(--success-color) !important; }
.bg-revenue, .bg-paused, .bg-rejected { border-top-color: var(--warning-color) !important; }

.btn { min-height: 40px; border-radius: 9px; font-weight: 700; box-shadow: none !important; }
.btn-sm { min-height: 34px; }
.btn-primary, .bg-primary { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: #6c4bf2 !important; border-color: #6c4bf2 !important; }
.btn-success { background-color: var(--success-color); border-color: var(--success-color); color: #071b14; }
.btn-danger { background-color: var(--danger-color); border-color: var(--danger-color); }
.btn-outline-light { border-color: var(--border-color); color: var(--text-color); }
.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(154,131,255,.5); outline-offset: 2px; }

.form-control, .form-select, .input-group-text {
  min-height: 42px;
  color: var(--text-color) !important;
  background-color: rgba(5, 13, 27, .72) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
}
.form-control::placeholder { color: #75849d; opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 3px rgba(124,92,255,.2) !important; }
.form-select option { color: #111827; background: #fff; }
.form-label, label { color: #c5cde0; font-weight: 650; }
.form-check-input { background-color: #0a1529; border-color: var(--border-color); }
.form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); }

.table-responsive { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface-color); box-shadow: var(--shadow-sm); }
.table { min-width: 720px; margin-bottom: 0; color: var(--text-color); --bs-table-color: var(--text-color); --bs-table-bg: transparent; --bs-table-striped-color: var(--text-color); --bs-table-striped-bg: rgba(255,255,255,.025); --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(124,92,255,.075); border-color: var(--border-color); }
.table > :not(caption) > * > * { padding: .82rem .9rem; border-color: var(--border-color); vertical-align: middle; }
.table tbody td { color: var(--text-color) !important; background-color: transparent !important; }
.table tbody td a { color: color-mix(in srgb, var(--accent-color) 85%, white); font-weight: 650; }
.table tbody tr { border-color: var(--border-color); }
.table thead th, .table-dark { color: #dfe5f3; background: #0c172a !important; border-color: var(--border-color); font-size: .76rem; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.badge { padding: .42rem .62rem; border-radius: 999px; font-weight: 700; }
.pagination { flex-wrap: wrap; gap: .3rem; }
.page-link { color: #c7bbff; background: var(--surface-color); border-color: var(--border-color); border-radius: 8px !important; }
.page-link:hover, .page-item.active .page-link { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.alert { border: 1px solid currentColor; border-radius: var(--radius-sm); }
.modal { --bs-modal-color: var(--text-color); }
.btn-close { filter: invert(1) grayscale(1); }

footer { left: var(--sidebar-width) !important; width: calc(100% - var(--sidebar-width)) !important; color: var(--muted-color) !important; background: rgba(8,17,33,.94) !important; border-top: 1px solid var(--border-color); backdrop-filter: blur(14px); }
footer a { color: #b6a7ff !important; }

/* Reference-style profile and settings experience */
.pc-panel-open { overflow: hidden; }
.pc-account-panel { position: fixed; inset: 0; z-index: 2000; }
.pc-account-panel[hidden], [data-settings-panel][hidden] { display: none !important; }
.pc-panel-backdrop { position: absolute; inset: 0; background: rgba(1,4,12,.72); backdrop-filter: blur(8px); }
.pc-panel-dialog { position: absolute; inset: clamp(.7rem, 2vw, 1.6rem); display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 1.4rem; max-width: 1080px; max-height: 760px; margin: auto; padding: 1.8rem; color: var(--text-color); background: color-mix(in srgb, var(--background-color) 94%, black); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.pc-panel-mobile-header { display: none; }
.pc-settings-tabs { align-self: start; padding: .65rem; background: color-mix(in srgb, var(--surface-color) 90%, transparent); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.pc-settings-tabs p { margin: .4rem .6rem .7rem; color: var(--muted-color); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-settings-tabs button { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; margin: .18rem 0; padding: .65rem .75rem; color: var(--muted-color); background: transparent; border: 0; border-radius: 9px; font-weight: 750; text-align: left; }
.pc-settings-tabs button:hover, .pc-settings-tabs button.active { color: var(--text-color); background: color-mix(in srgb, var(--primary-color) 18%, var(--surface-raised)); }
.pc-settings-tabs button i { color: var(--accent-color); }
.pc-settings-content { position: relative; min-width: 0; height: 100%; padding: .15rem .6rem 2rem .1rem; overflow-y: auto;  }
.pc-settings-content article > header { margin-bottom: 1.25rem; }
.pc-settings-content header h2 { margin: .2rem 0 .35rem; font-size: clamp(1.55rem, 3vw, 2rem); }
.pc-settings-content header p { margin: 0; color: var(--muted-color); }
.pc-eyebrow { color: var(--accent-color); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--text-color); background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 10px; }
.pc-panel-close { position: absolute; top: 0; right: .5rem; }
.pc-profile-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.2rem; background: linear-gradient(125deg, color-mix(in srgb, var(--primary-color) 18%, var(--surface-color)), var(--surface-color)); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.pc-avatar-lg { width: 68px; height: 68px; font-size: 1.05rem; }
.pc-profile-hero h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.pc-profile-hero p { margin: 0 0 .5rem; color: var(--muted-color); }
.pc-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--success-color); font-size: .68rem; font-weight: 750; }
.pc-status i { width: 7px; height: 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent); }
.pc-settings-card { margin-bottom: 1rem; padding: clamp(1rem, 2.2vw, 1.35rem); background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.pc-settings-card h3 { margin: 0 0 .25rem; font-size: .95rem; }
.pc-card-help { margin: 0 0 1rem; color: var(--muted-color); font-size: .75rem; }
.pc-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pc-profile-grid > div { display: grid; gap: .3rem; padding: .85rem; background: color-mix(in srgb, var(--surface-raised) 82%, transparent); border: 1px solid var(--border-color); border-radius: 10px; }
.pc-profile-grid span { color: var(--muted-color); font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.pc-profile-grid strong { overflow-wrap: anywhere; font-size: .82rem; }
.pc-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.pc-choice-grid button { display: grid; gap: .25rem; min-height: 104px; padding: .8rem; color: var(--text-color); background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 12px; text-align: left; }
.pc-choice-grid button.active, .pc-accent-choices button.active { border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent); }
.pc-choice-grid button > i { color: var(--accent-color); font-size: 1.3rem; }
.pc-choice-grid small { color: var(--muted-color); }
.pc-theme-preview { display: block; height: 58px; margin-bottom: .35rem; border: 1px solid var(--border-color); border-radius: 8px; }
.pc-theme-preview.dark { background: linear-gradient(90deg,#090d17 26%,#191b20 26%); }
.pc-theme-preview.light { background: linear-gradient(90deg,#e7ebf2 26%,#fff 26%); }
.pc-accent-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.pc-accent-choices button { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: .45rem; min-height: 44px; padding: .6rem; color: var(--text-color); background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 10px; font-weight: 700; }
.pc-accent-choices button i { width: 20px; height: 20px; background: #7c5cff; border-radius: 50%; }
.pc-accent-choices [data-accent="ocean"] i { background: #2588f8; }
.pc-accent-choices [data-accent="forest"] i { background: #22a06b; }
.pc-accent-choices [data-accent="rose"] i { background: #df5277; }
.pc-accent-choices [data-accent="amber"] i { background: #d99118; }
.pc-accent-choices [data-accent="teal"] i { background: #0f9e8f; }
.pc-accent-choices [data-accent="indigo"] i { background: #4f6bdc; }
.pc-accent-choices [data-accent="coral"] i { background: #e56f51; }
.pc-accent-choices [data-accent="lime"] i { background: #669c1b; }
.pc-accent-choices [data-accent="magenta"] i { background: #bd4bb7; }
.pc-accent-choices [data-accent="slate"] i { background: #56657d; }
.pc-feature-list { display: grid; gap: .25rem; }
.pc-feature-list > div { display: flex; gap: .8rem; padding: .9rem 0; border-bottom: 1px solid var(--border-color); }
.pc-feature-list > div:last-child { border-bottom: 0; }
.pc-feature-list > div > i { color: var(--accent-color); font-size: 1.15rem; }
.pc-feature-list span { display: grid; gap: .2rem; }
.pc-feature-list small { color: var(--muted-color); }

/* Professional real-data charts */
.dashboard-charts { margin-top: .25rem; }
.chart-panel { height: 100%; padding: 1rem; background: linear-gradient(155deg, color-mix(in srgb, var(--surface-raised) 82%, transparent), var(--surface-color)); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.chart-panel:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary-color) 38%, var(--border-color)); box-shadow: 0 18px 42px rgba(0,0,0,.25); }
.chart-panel > header { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.chart-panel h5 { margin: 0; color: var(--text-color); font-size: .88rem; font-weight: 800; }
.chart-panel p { margin: .16rem 0 0; color: var(--muted-color); font-size: .68rem; }
.chart-panel-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; color: #a994ff; background: rgba(124,92,255,.14); border: 1px solid rgba(124,92,255,.25); border-radius: 11px; }
.chart-panel-icon.cyan { color: #65d9eb; background: rgba(32,176,196,.13); border-color: rgba(101,217,235,.25); }
.chart-panel-icon.amber { color: #f5bd4f; background: rgba(217,145,24,.13); border-color: rgba(245,189,79,.25); }
.chart-panel .chart-container { height: 300px !important; min-height: 260px; }
.filter-note { color: var(--muted-color) !important; }
.filter-form { margin-bottom: 1.4rem; padding: .9rem; background: color-mix(in srgb, var(--surface-color) 92%, transparent); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

:root[data-ui-theme="light"] body { background: radial-gradient(circle at 82% -10%, color-mix(in srgb, var(--primary-color) 14%, transparent), transparent 30rem), var(--background-color); }
:root[data-ui-theme="light"] body > .navbar,
:root[data-ui-theme="light"] body > nav.navbar { background: rgba(255,255,255,.9) !important; }
:root[data-ui-theme="light"] .sidebar { background: #f8f9fd !important; }
:root[data-ui-theme="light"] .card,
:root[data-ui-theme="light"] .modal-content,
:root[data-ui-theme="light"] .dropdown-menu { background: var(--surface-color) !important; }
:root[data-ui-theme="light"] .table thead th,
:root[data-ui-theme="light"] .table-dark { color: #fff; background: #252b3a !important; }
:root[data-ui-theme="light"] .btn-close { filter: none; }

/* Public authentication pages */
body:not(:has(.sidebar)) { background: radial-gradient(circle at 15% 10%, rgba(124,92,255,.2), transparent 28rem), radial-gradient(circle at 85% 80%, rgba(79,156,249,.13), transparent 30rem), var(--background-color); }
body:not(:has(.sidebar)) > .navbar { position: relative; }
body:not(:has(.sidebar)) .login-container,
body:not(:has(.sidebar)) .reset-container,
body:not(:has(.sidebar)) .container.mt-5,
body:not(:has(.sidebar)) main .container { color: var(--text-color); }
body:not(:has(.sidebar)) form { color: var(--text-color); }
body:not(:has(.sidebar)) .bg-light { background-color: rgba(8,17,33,.92) !important; }

@media (max-width: 991.98px) {
  :root { --navbar-height: 60px; }
  .sidebar { transform: translateX(-105%) !important; transition: transform .22s ease !important; }
  .sidebar.show { transform: translateX(0) !important; }
  .main-content { margin-left: 0 !important; padding: 1rem !important; padding-bottom: 5.5rem !important; }
  footer { left: 0 !important; width: 100% !important; }
  body.sidebar-open::after { content: ""; position: fixed; inset: var(--navbar-height) 0 0; z-index: 1030; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
  .navbar-collapse { margin-top: .7rem; padding: .65rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #0c172a; }
  .pc-panel-dialog { grid-template-columns: 190px minmax(0,1fr); padding: 1.15rem; }
}

@media (max-width: 575.98px) {
  body { font-size: .94rem; }
  body > .navbar, body > nav.navbar { padding-inline: .65rem; }
  .navbar-brand { max-width: calc(100vw - 115px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .main-content { padding: .75rem !important; padding-bottom: 6.5rem !important; }
  .row.g-3, .row.g-4 { --bs-gutter-x: .8rem; --bs-gutter-y: .8rem; }
  .card-body { padding: .95rem; }
  .btn { white-space: normal; }
  form .btn, .modal-footer .btn { width: 100%; }
  .modal-dialog { margin: .65rem; }
  footer { position: static !important; width: 100% !important; padding: .85rem !important; }
  .pc-panel-dialog { inset: 0; display: flex; flex-direction: column; max-height: none; padding: 0; border: 0; border-radius: 0; }
  .pc-panel-mobile-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border-bottom: 1px solid var(--border-color); }
  .pc-settings-tabs { display: flex; flex: 0 0 auto; gap: .35rem; width: 100%; padding: .55rem; border-width: 0 0 1px; border-radius: 0; overflow-x: auto; }
  .pc-settings-tabs p { display: none; }
  .pc-settings-tabs button { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
  .pc-settings-content { flex: 1 1 auto; padding: 1rem .75rem 2rem; }
  .pc-panel-close { display: none; }
  .pc-profile-grid, .pc-choice-grid { grid-template-columns: 1fr; }
  .pc-accent-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .chart-panel .chart-container { height: 250px !important; min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Enterprise finish: top bar and application hierarchy */
body > .navbar,
body > nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  min-height: 72px;
  padding: .75rem clamp(.8rem, 1.8vw, 1.55rem) !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--background-color) 97%, var(--primary-color)), color-mix(in srgb, var(--background-color) 94%, black)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}
body > .navbar::after,
body > nav.navbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: var(--sidebar-width);
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 62%, transparent), transparent 65%);
  pointer-events: none;
}
body > .navbar > .container-fluid,
body > nav.navbar > .container-fluid {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(.45rem, 1vw, .8rem);
  max-width: 1680px;
  margin-inline: auto;
}
body > .navbar .navbar-brand,
body > nav.navbar .navbar-brand {
  position: relative;
  min-width: clamp(185px, 17vw, 260px);
  margin: 0 clamp(.15rem, .6vw, .5rem) 0 0 !important;
  padding: .12rem 0 .12rem 1rem;
  color: var(--text-color) !important;
  font-size: clamp(.88rem, 1.25vw, 1.08rem) !important;
  font-weight: 780 !important;
  letter-spacing: -.025em;
  line-height: 1.25;
  white-space: nowrap;
}
body > .navbar .navbar-brand::before,
body > nav.navbar .navbar-brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 25px;
  background: linear-gradient(var(--accent-color), var(--primary-color));
  border-radius: 999px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--primary-color) 42%, transparent);
  transform: translateY(-50%);
}
body > .navbar .badge,
body > nav.navbar .badge {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 38px;
  margin: 0 !important;
  padding: .55rem .72rem !important;
  color: #cfd7e7 !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--border-color);
  border-radius: 10px !important;
  font-size: .7rem !important;
  font-weight: 750 !important;
  letter-spacing: .01em;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  white-space: nowrap;
}
body > .navbar .badge i,
body > nav.navbar .badge i {
  margin: 0 !important;
  font-size: .84rem !important;
}
body > .navbar .badge-call,
body > nav.navbar .badge-call { color: #b8caff !important; background: rgba(79,108,220,.1) !important; border-color: rgba(127,150,245,.2); }
body > .navbar .badge-live,
body > nav.navbar .badge-live { color: #6fe0b4 !important; background: rgba(34,160,107,.1) !important; border-color: rgba(82,214,154,.2); }
body > .navbar .badge-live i,
body > nav.navbar .badge-live i { filter: drop-shadow(0 0 5px rgba(82,214,154,.5)); }
body > .navbar .badge-completed,
body > nav.navbar .badge-completed { color: #f2c972 !important; background: rgba(217,145,24,.09) !important; border-color: rgba(245,189,79,.2); }
body > .navbar .ms-auto.d-flex,
body > nav.navbar .ms-auto.d-flex {
  min-width: 215px;
  gap: .55rem;
  padding-left: clamp(.3rem, 1vw, .8rem);
  border-left: 1px solid var(--border-color);
}
body > .navbar .ms-auto.d-flex label,
body > nav.navbar .ms-auto.d-flex label {
  margin: 0 !important;
  color: var(--muted-color) !important;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
  white-space: nowrap;
}
body > .navbar #companyDropdown,
body > nav.navbar #companyDropdown {
  width: min(230px, 20vw) !important;
  min-width: 145px;
  min-height: 40px;
  padding: .45rem 2.2rem .45rem .72rem;
  color: var(--text-color) !important;
  background-color: rgba(255,255,255,.045) !important;
  border-color: color-mix(in srgb, var(--border-color) 90%, transparent) !important;
  border-radius: 10px !important;
  font-size: .76rem;
  font-weight: 650;
}
body > .navbar #companyDropdown:hover,
body > nav.navbar #companyDropdown:hover { border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color)) !important; }

/* Restrained global enterprise detailing */
.main-content { max-width: 1680px; margin-right: auto !important; }
.main-content > .metrics-row { margin-bottom: 1.2rem; }
.main-content > h1:first-child,
.main-content > h2:first-child { font-weight: 820; letter-spacing: -.04em; }
.card, .chart-panel, .table-responsive, .filter-form { border-color: color-mix(in srgb, var(--border-color) 88%, transparent) !important; }
.card:hover { border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color)) !important; }
.btn-primary { background: linear-gradient(135deg, var(--accent-color), var(--primary-color)) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-color) 22%, transparent) !important; }
.btn-primary:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.04); }

@media (max-width: 1199.98px) {
  body > .navbar > .container-fluid,
  body > nav.navbar > .container-fluid { flex-wrap: wrap; }
  body > .navbar .navbar-brand,
  body > nav.navbar .navbar-brand { min-width: 175px; }
  body > .navbar .ms-auto.d-flex,
  body > nav.navbar .ms-auto.d-flex { min-width: 190px; }
  body > .navbar #companyDropdown,
  body > nav.navbar #companyDropdown { width: 175px !important; }
}

@media (max-width: 991.98px) {
  body > .navbar,
  body > nav.navbar { min-height: 62px; padding-block: .55rem !important; }
  body > .navbar::after,
  body > nav.navbar::after { left: 0; }
  body > .navbar > .container-fluid,
  body > nav.navbar > .container-fluid { gap: .4rem; }
  body > .navbar .navbar-brand,
  body > nav.navbar .navbar-brand { flex: 1 1 auto; min-width: 0; padding-left: .8rem; }
  body > .navbar .navbar-brand::before,
  body > nav.navbar .navbar-brand::before { height: 21px; }
  body > .navbar .badge,
  body > nav.navbar .badge { min-height: 34px; padding: .45rem .58rem !important; font-size: .65rem !important; }
  body > .navbar .ms-auto.d-flex,
  body > nav.navbar .ms-auto.d-flex { flex: 1 0 100%; order: 5; min-width: 0; padding: .55rem 0 0; border-top: 1px solid var(--border-color); border-left: 0; }
  body > .navbar #companyDropdown,
  body > nav.navbar #companyDropdown { width: 100% !important; max-width: none; }
}

@media (max-width: 575.98px) {
  body > .navbar .navbar-brand,
  body > nav.navbar .navbar-brand { max-width: calc(100vw - 78px); font-size: .84rem !important; }
  body > .navbar .badge,
  body > nav.navbar .badge { flex: 1 1 calc(33.333% - .3rem); justify-content: center; min-width: 0; padding-inline: .35rem !important; }
  body > .navbar .badge i,
  body > nav.navbar .badge i { display: none; }
  body > .navbar .ms-auto.d-flex label,
  body > nav.navbar .ms-auto.d-flex label { display: none; }
}

/* Native date filters: the full control opens the platform calendar */
input[type="date"].form-control {
  position: relative;
  min-width: 156px;
  padding-right: 2.6rem !important;
  cursor: pointer;
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239a83ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .78rem center;
  background-size: 18px 18px;
}
input[type="date"].form-control::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}
input[type="date"].form-control:hover {
  border-color: color-mix(in srgb, var(--primary-color) 48%, var(--border-color)) !important;
  background-color: color-mix(in srgb, var(--surface-raised) 80%, transparent) !important;
}

/* High-clarity light theme */
:root[data-ui-theme="light"] { color-scheme: light; }
:root[data-ui-theme="light"] body {
  color: #171c2a;
  background:
    radial-gradient(circle at 84% -8%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 32rem),
    #edf1f7 !important;
}
:root[data-ui-theme="light"] body > .navbar,
:root[data-ui-theme="light"] body > nav.navbar {
  background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(247,249,253,.97)) !important;
  border-bottom-color: rgba(32,44,67,.14);
  box-shadow: 0 10px 28px rgba(38,51,77,.1);
}
:root[data-ui-theme="light"] .navbar-brand,
:root[data-ui-theme="light"] h1,
:root[data-ui-theme="light"] h2,
:root[data-ui-theme="light"] h3,
:root[data-ui-theme="light"] h4,
:root[data-ui-theme="light"] h5,
:root[data-ui-theme="light"] h6 { color: #171c2a !important; }
:root[data-ui-theme="light"] .sidebar {
  color: #202637;
  background: #f8f9fc !important;
  border-right-color: rgba(32,44,67,.14);
  box-shadow: 14px 0 35px rgba(38,51,77,.08);
}
:root[data-ui-theme="light"] .sidebar .user-info,
:root[data-ui-theme="light"] .pc-sidebar-account { background: #fff; border-color: rgba(32,44,67,.13) !important; }
:root[data-ui-theme="light"] .sidebar .user-info h4,
:root[data-ui-theme="light"] .pc-sidebar-account,
:root[data-ui-theme="light"] .pc-sidebar-brand { color: #171c2a !important; }
:root[data-ui-theme="light"] .sidebar .user-info p,
:root[data-ui-theme="light"] .pc-account-copy small { color: #68748a !important; }
:root[data-ui-theme="light"] .sidebar .nav-link { color: #505b70 !important; }
:root[data-ui-theme="light"] .sidebar .nav-link i { color: var(--primary-color); }
:root[data-ui-theme="light"] .sidebar .nav-link:hover,
:root[data-ui-theme="light"] .sidebar .nav-link.active { color: #151a27 !important; background: color-mix(in srgb, var(--primary-color) 13%, white) !important; }
:root[data-ui-theme="light"] .card,
:root[data-ui-theme="light"] .chart-panel,
:root[data-ui-theme="light"] .filter-form,
:root[data-ui-theme="light"] .table-responsive,
:root[data-ui-theme="light"] .modal-content,
:root[data-ui-theme="light"] .dropdown-menu,
:root[data-ui-theme="light"] .pc-settings-card,
:root[data-ui-theme="light"] .pc-settings-tabs {
  color: #202637 !important;
  background: #fff !important;
  border-color: rgba(32,44,67,.13) !important;
  box-shadow: 0 8px 24px rgba(38,51,77,.08) !important;
}
:root[data-ui-theme="light"] .bg-calls,
:root[data-ui-theme="light"] .bg-duration,
:root[data-ui-theme="light"] .bg-converted,
:root[data-ui-theme="light"] .bg-revenue,
:root[data-ui-theme="light"] .bg-total,
:root[data-ui-theme="light"] .bg-active,
:root[data-ui-theme="light"] .bg-paused,
:root[data-ui-theme="light"] .bg-applied,
:root[data-ui-theme="light"] .bg-accepted,
:root[data-ui-theme="light"] .bg-rejected,
:root[data-ui-theme="light"] .bg-used,
:root[data-ui-theme="light"] .bg-remaining {
  background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--primary-color) 5%, #f7f9fc)) !important;
}
:root[data-ui-theme="light"] .metrics-value,
:root[data-ui-theme="light"] .card-title,
:root[data-ui-theme="light"] .card-text,
:root[data-ui-theme="light"] .chart-panel h5 { color: #171c2a !important; }
:root[data-ui-theme="light"] .metrics-title,
:root[data-ui-theme="light"] .text-muted,
:root[data-ui-theme="light"] .filter-note,
:root[data-ui-theme="light"] .chart-panel p,
:root[data-ui-theme="light"] .pc-card-help,
:root[data-ui-theme="light"] .pc-settings-content header p { color: #68748a !important; }
:root[data-ui-theme="light"] .form-control,
:root[data-ui-theme="light"] .form-select,
:root[data-ui-theme="light"] .input-group-text {
  color: #171c2a !important;
  background-color: #fff !important;
  border-color: rgba(38,51,77,.2) !important;
  color-scheme: light;
}
:root[data-ui-theme="light"] .form-control::placeholder { color: #7a8598; }
:root[data-ui-theme="light"] .form-label,
:root[data-ui-theme="light"] label { color: #3f495d !important; }
:root[data-ui-theme="light"] body > .navbar .badge,
:root[data-ui-theme="light"] body > nav.navbar .badge { color: #344057 !important; background: #fff !important; border-color: rgba(38,51,77,.15); }
:root[data-ui-theme="light"] body > .navbar .badge-call,
:root[data-ui-theme="light"] body > nav.navbar .badge-call { color: #3856a9 !important; background: #edf2ff !important; }
:root[data-ui-theme="light"] body > .navbar .badge-live,
:root[data-ui-theme="light"] body > nav.navbar .badge-live { color: #167247 !important; background: #eaf8f1 !important; }
:root[data-ui-theme="light"] body > .navbar .badge-completed,
:root[data-ui-theme="light"] body > nav.navbar .badge-completed { color: #8a5b0d !important; background: #fff6df !important; }
:root[data-ui-theme="light"] .table { --bs-table-color: #202637; --bs-table-striped-color: #202637; --bs-table-striped-bg: #f7f9fc; --bs-table-hover-color: #111827; --bs-table-hover-bg: color-mix(in srgb, var(--primary-color) 7%, white); }
:root[data-ui-theme="light"] .table tbody td { color: #202637 !important; }
:root[data-ui-theme="light"] .table tbody td a { color: color-mix(in srgb, var(--primary-color) 82%, #182033); }
:root[data-ui-theme="light"] .modal-header,
:root[data-ui-theme="light"] .modal-footer,
:root[data-ui-theme="light"] .card-header { background: #f7f9fc !important; }
:root[data-ui-theme="light"] .pc-panel-dialog { color: #202637; background: #f4f6fa; }
:root[data-ui-theme="light"] .pc-settings-tabs button { color: #556176; }
:root[data-ui-theme="light"] .pc-settings-tabs button:hover,
:root[data-ui-theme="light"] .pc-settings-tabs button.active { color: #171c2a; background: color-mix(in srgb, var(--primary-color) 11%, white); }
:root[data-ui-theme="light"] .pc-choice-grid button,
:root[data-ui-theme="light"] .pc-accent-choices button,
:root[data-ui-theme="light"] .pc-profile-grid > div { color: #202637; background: #f7f9fc; }
:root[data-ui-theme="light"] footer { color: #657086 !important; background: rgba(255,255,255,.95) !important; border-top-color: rgba(32,44,67,.14); }

/* Final interaction polish */
.form-control, .form-select, .btn, .nav-link, .card, .chart-panel { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.filter-form .col-auto { display: flex; align-items: center; }
.filter-form .btn { margin-bottom: 0 !important; }
@media (max-width: 767.98px) {
  .filter-form .col-auto { width: 100%; }
  .filter-form .form-control, .filter-form .form-select, .filter-form .btn { width: 100%; }
  input[type="date"].form-control { min-width: 0; min-height: 46px; }
}

/* Pro usability layer */
.main-content {
  line-height: 1.55;
}
.main-content > * + * {
  margin-top: 1.25rem;
}
.main-content > .row + .row,
.main-content > form + .row,
.main-content > .filter-note + form {
  margin-top: 1rem;
}
.main-content .metrics-row,
.main-content .summary-cards {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}
.main-content .metrics-row > [class*="col-"],
.main-content .summary-cards > [class*="col-"] {
  display: flex;
}
.main-content .metrics-row .card,
.main-content .summary-cards .card {
  width: 100%;
}

/* Forms that communicate structure clearly */
.filter-form,
.main-content form.row {
  position: relative;
}
.filter-form label,
.main-content form.row label {
  margin-bottom: .35rem;
  color: #cbd4e5;
  font-size: .7rem;
  font-weight: 780;
  letter-spacing: .025em;
}
.form-control,
.form-select {
  padding-inline: .78rem;
  font-size: .82rem;
}
.form-control:hover,
.form-select:hover {
  border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color)) !important;
}
.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
  opacity: .62;
}
.form-check {
  display: flex;
  align-items: center;
  gap: .48rem;
  min-height: 32px;
}
.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}

/* Dense data remains readable and actionable */
.table-responsive {
  position: relative;
  isolation: isolate;
  max-width: 100%;
}
.table-responsive::after {
  content: "Scroll horizontally to view all columns";
  display: none;
  position: sticky;
  right: .65rem;
  bottom: .5rem;
  float: right;
  margin: .45rem;
  padding: .32rem .55rem;
  color: var(--muted-color);
  background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  font-size: .62rem;
  font-weight: 700;
  pointer-events: none;
}
.table thead {
  position: sticky;
  top: 0;
  z-index: 4;
}
.table thead th {
  height: 48px;
  padding-block: .72rem;
  vertical-align: middle;
  box-shadow: inset 0 -1px var(--border-color);
}
.table tbody td {
  min-height: 48px;
  font-size: .78rem;
  line-height: 1.45;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 var(--primary-color);
}
.table td .btn,
.table td button,
.table td a.btn {
  min-height: 32px;
  padding: .34rem .58rem;
  font-size: .7rem;
  white-space: nowrap;
}
.recording-actions {
  min-width: 128px;
}
.recording-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.no-records-container,
.table .text-center.text-muted {
  padding: clamp(1.5rem, 4vw, 3rem) !important;
  color: var(--muted-color) !important;
  background: color-mix(in srgb, var(--surface-raised) 38%, transparent);
}

/* Predictable buttons, status labels, and pagination */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  padding-inline: .85rem;
}
.btn:active {
  transform: translateY(0) scale(.985);
}
.btn-outline-primary {
  color: color-mix(in srgb, var(--accent-color) 88%, white);
  border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}
.btn-outline-primary:hover {
  color: #fff;
  background: color-mix(in srgb, var(--primary-color) 72%, transparent);
  border-color: var(--primary-color);
}
.badge:not(.badge-call):not(.badge-live):not(.badge-completed) {
  letter-spacing: .015em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.pagination {
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}
.page-link {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: .4rem .62rem;
  font-size: .76rem;
  font-weight: 700;
}
.page-item.disabled .page-link {
  color: color-mix(in srgb, var(--muted-color) 58%, transparent);
  background: color-mix(in srgb, var(--surface-color) 70%, transparent);
  opacity: .72;
}

/* Dialogs and feedback */
.modal-dialog {
  width: min(94vw, var(--bs-modal-width));
}
.modal-header,
.modal-footer {
  padding: .9rem 1.05rem;
}
.modal-body {
  padding: 1.05rem;
}
.modal-title {
  font-size: .95rem;
  font-weight: 800;
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem .9rem;
  font-size: .8rem;
  box-shadow: var(--shadow-sm);
}
.toast {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 11px !important;
  box-shadow: 0 15px 40px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
}

/* Light theme parity for the pro layer */
:root[data-ui-theme="light"] .filter-form label,
:root[data-ui-theme="light"] .main-content form.row label { color: #3f495d; }
:root[data-ui-theme="light"] .btn-outline-primary { color: color-mix(in srgb, var(--primary-color) 88%, #182033); }
:root[data-ui-theme="light"] .no-records-container,
:root[data-ui-theme="light"] .table .text-center.text-muted { background: #f7f9fc; }
:root[data-ui-theme="light"] .page-link { color: color-mix(in srgb, var(--primary-color) 86%, #1b2436); background: #fff; }

@media (max-width: 767.98px) {
  .main-content > * + * { margin-top: 1rem; }
  .table-responsive::after { display: block; }
  .pagination { justify-content: flex-start !important; flex-wrap: nowrap; overflow-x: auto; padding: .15rem .05rem .5rem; }
  .page-item { flex: 0 0 auto; }
  .main-content .d-flex.justify-content-between,
  .main-content .d-flex.justify-content-end { align-items: stretch !important; flex-direction: column; gap: .65rem; }
  .main-content .d-flex.justify-content-between .btn,
  .main-content .d-flex.justify-content-end .btn { width: 100%; }
}

@media (hover: hover) {
  .sidebar .nav-link:hover,
  .btn:hover,
  .page-link:hover,
  .pc-sidebar-account:hover { will-change: transform; }
}

/* Persistent top bar and true sidebar density modes */
html,
body {
  overflow-x: clip;
}
body > .navbar,
body > nav.navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  isolation: isolate;
}

@media (min-width: 992px) {
  :root[data-ui-sidebar="compact"] {
    --sidebar-width: 84px;
  }
  .sidebar,
  .main-content,
  footer,
  body > .navbar::after,
  body > nav.navbar::after {
    transition: width .22s ease, left .22s ease, margin-left .22s ease, transform .22s ease;
  }
  :root[data-ui-sidebar="compact"] .sidebar {
    padding-inline: .58rem !important;
  }
  :root[data-ui-sidebar="compact"] .pc-sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }
  :root[data-ui-sidebar="compact"] .pc-sidebar-brand strong,
  :root[data-ui-sidebar="compact"] .sidebar .user-info,
  :root[data-ui-sidebar="compact"] .pc-account-copy,
  :root[data-ui-sidebar="compact"] .pc-sidebar-account > .bi-chevron-right,
  :root[data-ui-sidebar="compact"] .sidebar .nav-link kbd,
  :root[data-ui-sidebar="compact"] .sidebar .nav-link span {
    display: none !important;
  }
  :root[data-ui-sidebar="compact"] .sidebar .nav-link {
    justify-content: center;
    min-height: 46px;
    padding: .65rem !important;
    overflow: hidden;
    font-size: 0;
  }
  :root[data-ui-sidebar="compact"] .sidebar .nav-link i {
    width: auto;
    margin: 0 !important;
    font-size: 1.08rem;
  }
  :root[data-ui-sidebar="compact"] .sidebar .nav-link:hover,
  :root[data-ui-sidebar="compact"] .sidebar .nav-link.active {
    transform: none;
  }
  :root[data-ui-sidebar="compact"] .pc-sidebar-account {
    display: flex;
    justify-content: center;
    padding: .55rem;
  }
  :root[data-ui-sidebar="compact"] .pc-avatar {
    width: 38px;
    height: 38px;
  }
}

/* CSS-only product refinements */
::selection {
  color: #fff;
  background: color-mix(in srgb, var(--primary-color) 82%, #1b1536);
}

/* Existing toolbar/export actions */
.main-content > .d-flex.justify-content-end,
.main-content > .d-flex.justify-content-between,
.table-responsive + .d-flex,
.recording-actions {
  gap: .55rem !important;
}
.main-content > .d-flex.justify-content-end .btn,
.main-content > .d-flex.justify-content-between .btn {
  min-height: 40px;
  border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color));
}
.main-content > .d-flex.justify-content-end .btn i,
.main-content > .d-flex.justify-content-between .btn i {
  font-size: .9rem;
}

/* Responsive data density without removing columns */
@media (min-width: 1440px) {
  .table > :not(caption) > * > * { padding: .88rem 1rem; }
  .table tbody td { font-size: .8rem; }
}
@media (max-width: 1199.98px) {
  .table > :not(caption) > * > * { padding: .7rem .72rem; }
  .table tbody td { font-size: .74rem; }
}

/* Useful empty and informational states already emitted by the app */
.no-records-container,
.alert-secondary.text-center,
.table td.text-center.text-muted {
  position: relative;
  min-height: 112px;
  align-content: center;
  border: 1px dashed color-mix(in srgb, var(--primary-color) 26%, var(--border-color));
  border-radius: 11px;
}
.no-records-container::before,
.alert-secondary.text-center::before {
  content: "\F479";
  display: block;
  margin-bottom: .5rem;
  color: var(--accent-color);
  font-family: "bootstrap-icons";
  font-size: 1.35rem;
}

/* Browser autofill stays within the selected theme */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color);
  box-shadow: 0 0 0 1000px var(--surface-color) inset !important;
  caret-color: var(--text-color);
  transition: background-color 9999s ease-out;
}

/* Automatic accessibility mode; no settings or scripts required */
@media (prefers-contrast: more) {
  :root {
    --border-color: rgba(220,229,247,.42);
    --muted-color: #bac5d8;
  }
  .card,
  .chart-panel,
  .table-responsive,
  .filter-form,
  .form-control,
  .form-select,
  .btn,
  .nav-link {
    border-width: 2px !important;
  }
  .sidebar .nav-link.active,
  .page-item.active .page-link {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
  }
  :root[data-ui-theme="light"] {
    --text-color: #05070c;
    --muted-color: #394357;
    --border-color: rgba(14,21,35,.4);
  }
}

@media (forced-colors: active) {
  * { box-shadow: none !important; }
  .sidebar .nav-link.active,
  .btn,
  .form-control,
  .form-select,
  .card,
  .table-responsive { border: 1px solid CanvasText !important; }
  .metric-icon,
  .pc-avatar,
  .pc-sidebar-brand > span { forced-color-adjust: auto; }
}

/* Clean printable reports using the existing page data */
@media print {
  @page { size: landscape; margin: 12mm; }
  :root,
  :root[data-ui-theme="light"] {
    --background-color: #fff;
    --surface-color: #fff;
    --surface-raised: #fff;
    --text-color: #111;
    --muted-color: #555;
    --border-color: #bbb;
  }
  html,
  body {
    min-width: 0 !important;
    color: #111 !important;
    background: #fff !important;
    overflow: visible !important;
  }
  body > .navbar,
  body > nav.navbar,
  .sidebar,
  footer,
  .dropup,
  .toast-container,
  .modal,
  .pc-account-panel,
  .filter-form,
  .pagination,
  .recording-actions,
  .main-content > .d-flex.justify-content-end {
    display: none !important;
  }
  .main-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .card,
  .chart-panel,
  .table-responsive {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #bbb !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .table-responsive {
    overflow: visible !important;
  }
  .table {
    min-width: 0 !important;
    color: #111 !important;
    font-size: 8pt;
  }
  .table thead {
    position: static;
    display: table-header-group;
  }
  .table thead th,
  .table tbody td {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #bbb !important;
  }
  .dashboard-charts { break-before: page; }
  a { color: #111 !important; text-decoration: none !important; }
}

/* Executive dashboard composition inspired by the supplied layout */
.dashboard-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
  background:
    radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--primary-color) 19%, transparent), transparent 17rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 90%, transparent), var(--surface-color));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .45rem;
  color: var(--accent-color);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dashboard-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary-color) 13%, transparent);
}
.dashboard-intro h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 850;
  letter-spacing: -.055em;
}
.dashboard-intro p {
  max-width: 700px;
  margin: .45rem 0 0;
  color: var(--muted-color);
  font-size: clamp(.8rem, 1.2vw, .94rem);
}
.dashboard-intro-actions {
  display: flex;
  flex: 0 0 auto;
  gap: .65rem;
}
.dashboard-intro-actions .btn {
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: 11px;
}
.dashboard-context-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.dashboard-context-strip > span {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: .7rem;
  align-items: center;
  min-width: 0;
  padding: .8rem .9rem;
  background: color-mix(in srgb, var(--surface-color) 94%, transparent);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 5px 18px rgba(0,0,0,.1);
}
.dashboard-context-strip i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--primary-color) 12%, var(--surface-raised));
  border-radius: 10px;
}
.dashboard-context-strip small {
  color: var(--muted-color);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.dashboard-context-strip strong {
  overflow: hidden;
  color: var(--text-color);
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-charts .col-lg-6 .chart-panel {
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 17rem),
    linear-gradient(155deg, color-mix(in srgb, var(--surface-raised) 82%, transparent), var(--surface-color));
}
.dashboard-charts .col-lg-6 .chart-container {
  height: 320px !important;
}

:root[data-ui-theme="light"] .dashboard-intro,
:root[data-ui-theme="light"] .dashboard-context-strip > span,
:root[data-ui-theme="light"] .dashboard-charts .chart-panel {
  color: #202637;
  background-color: #fff;
  border-color: rgba(32,44,67,.13);
  box-shadow: 0 8px 24px rgba(38,51,77,.08);
}
:root[data-ui-theme="light"] .dashboard-context-strip strong { color: #171c2a; }

@media (max-width: 991.98px) {
  .dashboard-intro { align-items: stretch; flex-direction: column; }
  .dashboard-intro-actions { width: 100%; }
  .dashboard-intro-actions .btn { flex: 1 1 0; }
  .dashboard-context-strip { grid-template-columns: 1fr 1fr; }
  .dashboard-context-strip > span:last-child { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .dashboard-intro { padding: 1rem; border-radius: var(--radius-md); }
  .dashboard-intro-actions { flex-direction: column; }
  .dashboard-context-strip { grid-template-columns: 1fr; }
  .dashboard-context-strip > span:last-child { grid-column: auto; }
  .dashboard-charts .col-lg-6 .chart-container { height: 260px !important; }
}

@media print {
  .dashboard-intro-actions { display: none !important; }
  .dashboard-intro,
  .dashboard-context-strip > span { color: #111 !important; background: #fff !important; box-shadow: none !important; }
}

@media (max-width: 991.98px) {
  :root[data-ui-sidebar="compact"] {
    --sidebar-width: 248px;
  }
  body > .navbar,
  body > nav.navbar {
    position: sticky !important;
  }
}

/* Professional finish: typography, rhythm, and data clarity. */
body {
  font-size: 15px;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.18;
  text-wrap: balance;
}
p, .text-muted { line-height: 1.65; }
.navbar-brand, .pc-sidebar-brand strong { font-weight: 800 !important; letter-spacing: -.035em !important; }
.sidebar .nav-link { font-size: .84rem; letter-spacing: -.005em; }
.btn {
  padding-inline: 1rem;
  font-size: .82rem;
  letter-spacing: -.005em;
}
.metrics-title, .dashboard-eyebrow, label, th {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .055em;
}
.metrics-value, td, .badge, input[type="number"] {
  font-variant-numeric: tabular-nums lining-nums;
}
.card, .chart-panel, .dashboard-intro, .dashboard-context-strip > span {
  backdrop-filter: saturate(115%);
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .chart-panel h5 { font-weight: 750; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .82rem .9rem; vertical-align: middle; }
.table thead th {
  color: var(--muted-color);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody td { font-size: .82rem; }
.form-label, .col-form-label { color: var(--muted-color); font-size: .75rem; font-weight: 750; }
.form-control, .form-select { font-size: .84rem; }
::selection { color: #fff; background: color-mix(in srgb, var(--primary-color) 78%, #11182a); }

/* Reference-inspired shared navigation, using the Publisher palette. */
.sidebar { gap: .3rem; }
.sidebar .user-info { display: none; }
.pc-sidebar-brand { flex-shrink: 0; padding-right: 1.6rem; }
.pc-sidebar-collapse { position: absolute; top: 24px; right: 8px; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--border-color); border-radius: 50%; background: var(--primary-color); color: white; cursor: pointer; }
.pc-nav-search { display: flex; align-items: center; gap: .7rem; min-height: 42px; margin: .4rem .3rem .7rem; padding: .55rem .75rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-raised); color: var(--muted-color); cursor: text; }
.pc-nav-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-color); font: inherit; font-size: .76rem; }
.pc-nav-search:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.pc-nav-search input::placeholder { color: var(--muted-color); }
.pc-nav-heading { list-style: none; padding: .75rem .85rem .35rem; color: var(--muted-color); font-size: .61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sidebar .nav-link { min-height: 44px; border-radius: 7px; margin: .15rem 0; gap: .75rem; }
.sidebar .nav-link.active { color: white !important; background: var(--primary-color) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 20%, transparent); }
.sidebar .nav-link:hover { transform: none; }
.sidebar [hidden] { display: none !important; }
.pc-nav-empty { padding: .5rem .8rem; color: var(--muted-color); font-size: .8rem; }
.pc-sidebar-theme { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; margin: 1rem 0 .4rem; padding: .75rem; width: 100%; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); background: var(--surface-raised); font-size: .78rem; }
.pc-theme-switch { margin-left: auto; width: 28px; height: 16px; border-radius: 20px; background: var(--muted-color); padding: 3px; }
.pc-theme-switch::after { content: ''; display: block; width: 10px; height: 10px; border-radius: 50%; background: white; }
.pc-sidebar-theme[aria-checked="true"] .pc-theme-switch { background: var(--primary-color); }
.pc-sidebar-theme[aria-checked="true"] .pc-theme-switch::after { transform: translateX(12px); }
.pc-sidebar-collapse:focus-visible, .pc-sidebar-theme:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
@media (min-width: 992px) {
  :root[data-ui-sidebar="compact"] .pc-sidebar-brand { padding-top: 25px; }
  :root[data-ui-sidebar="compact"] .pc-sidebar-collapse { top: 8px; right: 29px; }
  :root[data-ui-sidebar="compact"] .pc-nav-search { justify-content: center; padding-inline: .5rem; }
  :root[data-ui-sidebar="compact"] .pc-nav-search input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  :root[data-ui-sidebar="compact"] .pc-nav-heading,
  :root[data-ui-sidebar="compact"] .pc-sidebar-theme span { display: none; }
  :root[data-ui-sidebar="compact"] .pc-sidebar-theme { justify-content: center; }
}
@media (max-width: 991.98px) { .pc-sidebar-collapse { display: none; } }

/* Offer disclosure: readable sections without the generic alert flex layout. */
.offer-disclaimer { margin-top: 2rem; padding: clamp(1.2rem, 2.5vw, 2rem); color: var(--text-color); background: var(--surface-color); border: 1px solid var(--border-color); border-top: 3px solid var(--warning-color); border-radius: var(--radius-md); }
.offer-disclaimer-heading { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.offer-disclaimer-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; color: var(--warning-color); background: color-mix(in srgb, var(--warning-color) 12%, transparent); font-size: 1.35rem; }
.offer-disclaimer-eyebrow { display: block; color: var(--muted-color); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
.offer-disclaimer-heading h2 { margin: 0; font-size: 1.12rem; }
.offer-disclaimer-intro, .offer-disclaimer-footer { font-size: .83rem; line-height: 1.8; color: var(--muted-color); }
.offer-disclaimer strong { color: var(--text-color); }
.offer-disclaimer-risks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; list-style: none; margin: 1.2rem 0; padding: 0; }
.offer-disclaimer-risks li { padding: 1rem; background: var(--surface-raised); border: 1px solid var(--border-color); border-radius: 10px; color: var(--muted-color); font-size: .78rem; line-height: 1.7; }
.offer-disclaimer-risks li > strong:first-child { display: block; margin-bottom: .35rem; }
.offer-disclaimer-footer { margin: 0; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.offer-disclaimer-footer a { color: var(--accent-color); }
@media (max-width: 1199px) { .offer-disclaimer-risks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .offer-disclaimer-risks { grid-template-columns: 1fr; } }

/* Keep offer text and controls inside narrow viewports. */
.offers-page, .offers-page .card, .offers-page .card-body,
.offer-disclaimer-heading > div { min-width: 0; }
.offers-page h4, .offers-page .card-header, .offers-page .card-body,
.offer-disclaimer { overflow-wrap: anywhere; }
.offers-page .summary-cards { row-gap: .8rem; }
#offerModal .modal-body, #addOfferModal .modal-body { overflow-wrap: anywhere; }
#offerModal .modal-content, #addOfferModal .modal-content { max-height: calc(100dvh - 2rem); }
#offerModal .modal-body, #addOfferModal .modal-body { overflow-y: auto; }
@media (max-width: 767.98px) {
  .offers-page #addOfferBtn, .offers-page .view-apply-btn,
  #offerModal #applyOfferBtn { min-height: 44px; width: 100%; }
  .offer-disclaimer { padding: 1rem; }
  .offer-disclaimer-heading { align-items: flex-start; }
  .offer-disclaimer-heading h2 { font-size: 1rem; line-height: 1.4; }
  .offer-disclaimer-risks { grid-template-columns: 1fr; gap: .65rem; }
  .offer-disclaimer-intro, .offer-disclaimer-footer,
  .offer-disclaimer-risks li { font-size: .85rem; }
}

/* Shared phone/tablet layout and accessible touch controls. */
@media (max-width: 991.98px) {
  .sidebar { max-width: calc(100vw - 32px); height: calc(100dvh - var(--navbar-height)) !important; overscroll-behavior-y: contain; }
  .main-content, .main-content .row > *, .navbar .container, .navbar .container-fluid { min-width: 0; }
  .navbar select { max-width: 100%; }
  #sidebarToggle, .navbar-toggler, .pc-icon-button, .password-toggle { min-width: 44px; min-height: 44px; }
  #sidebarToggle { position: relative; color: var(--text-color); }
  #sidebarToggle::after { content: ''; display: block; width: 18px; height: 14px; margin: auto; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; background: linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat; }
  #sidebarToggle > * { display: none; }
  #sidebarToggle { font-size: 0; }
  .sidebar .nav-link { min-height: 44px; }
  .table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .modal-content { max-height: calc(100dvh - 2rem); }
  .modal-body { overflow-y: auto; overflow-wrap: anywhere; }
  .modal-header, .modal-footer { flex-shrink: 0; }
  .pc-panel-dialog { max-height: calc(100dvh - 2rem); }
  .pc-settings-content { min-height: 0; overscroll-behavior: contain; }
  footer { position: static !important; margin-left: 0 !important; width: 100% !important; overflow-wrap: anywhere; }
  :root[data-ui-theme="light"] .navbar-collapse { background: var(--surface-color); }
}
@media (max-width: 575.98px) {
  .main-content h1, .main-content h2, .main-content h4, .card-header { overflow-wrap: anywhere; }
  .main-content > .navbar { align-items: stretch; gap: .75rem; }
  .main-content > .navbar > div { width: 100%; }
  .form-control, .form-select { font-size: 16px; }
  .pc-panel-dialog { max-height: 100dvh; }
  .forgot-password-container, .setup-password-container { width: calc(100% - 24px) !important; margin-inline: auto !important; padding: 20px !important; }
  #toastContainer { max-width: calc(100vw - 24px); right: 12px !important; }
}

@media (max-width: 575.98px) {
  html, body { min-width: 0; }
  .main-content input, .main-content select, .main-content textarea { min-width: 0; max-width: 100%; }
}

/* Keep offer names readable in both themes. */
.offers-page .offer-card-header { color: var(--text-color) !important; }