:root {
    /* Slightly toned-down background and card colors to reduce glare */
    --bg: #ece8e4;
    --card: #fbfaf8;
    --border: rgba(20, 20, 20, .08);
    --text: #1b1b1b;
    --muted: rgba(27, 27, 27, .56);
    --accent: #6f7fa3;
    --warn: #f6e6e9;
    --container-max: 1200px;
    --topnav-h: 56px;
}

/* Utilities */
.mt-6 { margin-top: 6px !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fw-700 { font-weight: 700 !important; }
.hidden { display: none !important; }
.no-underline { text-decoration: none !important; }
.text-inherit { color: inherit !important; }

/* Dynamic color helper: set `style="--c: ..."` on an element and add `.cvar` */
.cvar { color: var(--c) !important; }

/* Layout helpers */
.w-100 { width: 100% !important; }
.ta-left { text-align: left !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }
.ai-center { align-items: center !important; }
.ai-end { align-items: flex-end !important; }
.fw-wrap { flex-wrap: wrap !important; }
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mb-10 { margin-bottom: 10px !important; }
.w-180 { width: 180px !important; }
.fs-18 { font-size: 18px !important; }

.sep {
    margin: 14px 0;
    border: none;
    border-top: 1px solid var(--border);
}
.mr-0 { margin-right: 0 !important; }

/* Nchart specific helpers */
.nchart-time-grid { grid-template-columns: repeat(5, 1fr); }

.ws-nowrap { white-space: nowrap !important; }

.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.m-0 { margin: 0 !important; }

.ml-8 { margin-left: 8px !important; }
.my-8 { margin-top: 8px !important; margin-bottom: 8px !important; }

.px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.py-6 { padding-top: 6px !important; padding-bottom: 6px !important; }

.b-1 { border: 1px solid var(--border) !important; }
.bt-1 { border-top: 1px solid var(--border) !important; }
.br-12 { border-radius: 12px !important; }

.ov-hidden { overflow: hidden !important; }
.ov-auto { overflow: auto !important; }
.ov-x-auto { overflow-x: auto !important; }
.ov-y-hidden { overflow-y: hidden !important; }

.bc-collapse { border-collapse: collapse !important; }
.bg-white { background: #fff !important; }
.bg-soft { background: rgba(246, 230, 233, .18) !important; }

.cur-pointer { cursor: pointer !important; }
.us-none { user-select: none !important; }
.ls-none { list-style: none !important; }

.jc-end { justify-content: flex-end !important; }
.float-right { float: right !important; }

.fw-800 { font-weight: 800 !important; }

.h-42 { height: 42px !important; }
.grid-2 { grid-template-columns: 1fr 1fr !important; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr !important; }

.pill {
    padding: 3px 8px;
    border: 1px solid rgba(20,20,20,.10);
    border-radius: 999px;
    background: #fff;
}

.pill-btn {
    padding: 3px 10px;
    border-radius: 999px;
}

.td-none { text-decoration: none !important; }

.btn-sm {
    padding: 6px 10px;
    border-radius: 10px;
}

.icon-btn {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Layout variable presets */
.mobile-vars {
    --input-bg: #fbfbfb;
    --container-max: 920px;
}

:root {
    --accent: #ff9800;
    --info: rgba(3, 169, 244, 0.95);
}

/* Default desktop page container */
main {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 16px 12px;
}

/* Pages that already provide their own container spacing (e.g. Nchart) */
main:has(> .nchart-container) {
    max-width: none;
    padding: 0;
}

/* Shared footer (desktop + mobile) */
footer.site-footer {
    margin-top: 24px;
    padding: 12px 0;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    border-top: 1px solid var(--border);
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* Top navigation (shared across desktop/mobile via `_TopNav.cshtml`) */
.topnav {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.topnav .wrap {
    min-height: var(--topnav-h);
    box-sizing: border-box;
}

.topnav .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.topnav .brand { display: flex; flex-direction: column; gap: 2px; }
.topnav .brand .title { font-weight: 700; font-size: 14px; padding: 0; text-align: left; margin: 0; line-height: 1.2; }
.topnav .brand .sub {
    color: var(--muted);
    font-size: 12px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
.topnav .leftlinks { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.topnav__version {
    color: rgba(30, 30, 30, .45);
    text-decoration: none;
    font-weight: 600;
}

/* Override the generic `.topnav a { color: var(--accent); }` rule for the brand's version links */
.topnav .brand .sub a.topnav__version {
    color: rgba(30, 30, 30, .45) !important;
}

.topnav__version.active {
    color: rgba(30, 30, 30, .55);
    text-decoration: none;
}

.topnav .brand .sub a.topnav__version.active {
    color: rgba(30, 30, 30, .55) !important;
    text-decoration: none !important;
}

.topnav .brand .sub a {
    margin-right: 0;
}

.topnav__version:hover {
    color: rgba(30, 30, 30, .62);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.topnav .brand .sub a.topnav__version:hover {
    color: rgba(30, 30, 30, .62) !important;
}

.topnav a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    margin-right: 10px;
}

.topnav a.active {
    color: rgba(30, 30, 30, .92);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.topnav .right { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.topnav .user { color: var(--muted); font-size: 12px; }
.topnav button { border: 1px solid var(--border); background: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 700; cursor: pointer; }

.btn {
    border: 1px solid rgba(20,20,20,.08);
    background: var(--card);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    box-shadow: 0 1px 2px rgba(20,20,20,.04);
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover {
    box-shadow: 0 3px 10px rgba(20,20,20,.06);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(20,20,20,.08);
}

.btn-primary {
    background: rgba(111, 127, 163, .16);
    border-color: rgba(111, 127, 163, .45);
    color: var(--text);
}

.btn-primary:hover {
    background: rgba(111, 127, 163, .22);
}

.btn-secondary {
    background: rgba(246, 230, 233, .35);
    border-color: rgba(20,20,20,.12);
    color: var(--text);
}

.btn:disabled,
.btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.actions-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px;
    align-items: center;
}

@media (max-width: 460px) {
    .actions-row {
        grid-template-columns: 1fr;
    }
}

/* Responsive tweaks for management clients table on small screens, narrow tablets and phablets */
@media (max-width: 980px) {
    /* allow the clients table to scroll horizontally if needed */
    .mgmt-clients { width: 100%; overflow-x: auto; }

    /* permit table cells to wrap so action buttons can flow to next line */
    .mgmt-clients td, .mgmt-clients th { white-space: normal !important; }

    /* allow flex containers inside table cells to wrap on small screens */
    .mgmt-clients .d-flex { flex-wrap: wrap !important; gap: 6px; }

    /* make buttons a bit smaller to fit better on mobile */
    .mgmt-clients a.btn, .mgmt-clients button.btn { padding: 6px 8px !important; min-width: unset !important; height: auto !important; width: auto !important; }

    /* ensure icon buttons can reduce their fixed dimension on narrow screens */
    .mgmt-clients .icon-btn { width: auto !important; height: auto !important; min-width: unset !important; min-height: unset !important; padding: 6px 8px !important; }

    /* tone down header brightness on mobile */
    .mgmt-clients thead tr { background: var(--card) !important; }
}
.mgmt-split__right, #mgmtSplitRight, #mgmtSplitRightBody { min-width: 0; }

/* Make action buttons shrink instead of forcing table overflow */
.mgmt-clients td a.btn,
.mgmt-clients td button,
.mgmt-clients td form {
    flex-shrink: 1;
    min-width: 0 !important;
}

.mgmt-clients td .d-flex { justify-content: flex-end; flex-wrap: wrap; }

/* Allow cells to shrink so action column can keep space */
.mgmt-clients th, .mgmt-clients td { min-width: 0; }

/* Truncate the name column to avoid it pushing action buttons off-screen */
.mgmt-clients td:first-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Allow action items to shrink inside the flex container */
.mgmt-clients td .d-flex > * { flex: 0 1 auto; min-width: 0; }

/* Override inline min-width on action column (often set in markup) so it won't force overflow */
.mgmt-clients th:last-child, .mgmt-clients td:last-child { min-width: 0 !important; }
.mgmt-self-strip {
    border: 1px solid rgba(20,20,20,.10);
    border-radius: 12px;
    background: var(--card);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20,20,20,.04);
    overflow: hidden;
}

.card h3 {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    background: rgba(246, 230, 233, .35);
    border-bottom: 1px solid var(--border);
}

.card .content {
    padding: 12px;
}

/* Mobile layout (applied when `body.mobile` is present) */
body.mobile .page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 12px;
    padding-bottom: 80px;
}

body.mobile footer.site-footer {
    margin-top: 16px;
    border-top: 0;
}

body.mobile .card { margin-top: 12px; }

body.mobile .card h2 {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    background: rgba(246, 230, 233, .35);
    border-bottom: 1px solid var(--border);
}

body.mobile label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

body.mobile input,
body.mobile select,
body.mobile textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 16px;
    background: var(--input-bg);
    color: var(--text);
}

body.mobile textarea { resize: vertical; }

body.mobile input:focus,
body.mobile select:focus,
body.mobile textarea:focus {
    outline: none;
    border-color: rgba(111, 127, 163, .70);
    box-shadow: 0 0 0 3px rgba(246, 230, 233, .75);
}

body.mobile .grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { body.mobile .grid.two { grid-template-columns: 1fr 1fr; } }

body.mobile .actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(247,244,242,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    padding: 10px 12px;
}

body.mobile .actions .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}