/* ══════════════════════════════════════════════════════════════
   ClientMetrics — Design Override Layer
   Refined professional: deep navy sidebar, clean white content
   ══════════════════════════════════════════════════════════════ */

:root {
    --cm-navy:      #1B2B4B;
    --cm-navy-dark: #111C32;
    --cm-navy-mid:  #2D4270;
    --cm-steel:     #4A7FA5;
    --cm-steel-lt:  #6DA0C4;
    --cm-amber:     #E8A838;
    --cm-surface:   #FFFFFF;
    --cm-bg:        #F4F6F9;
    --cm-border:    #E4E9F0;
    --cm-text:      #1B2B4B;
    --cm-muted:     #566789;
    --cm-dim:       #9BAABF;
    --cm-success:   #2E9E6B;
    --cm-danger:    #D94F4F;
    --cm-radius:    8px;
    --cm-shadow-sm: 0 1px 2px rgba(27,43,75,.06), 0 1px 3px rgba(27,43,75,.08);
    --cm-shadow-md: 0 4px 8px rgba(27,43,75,.08), 0 4px 12px rgba(27,43,75,.10);
    --cm-shadow-lg: 0 8px 24px rgba(27,43,75,.14);
    --cm-transition: 150ms cubic-bezier(.4,0,.2,1);
}


/* ── Global body ──────────────────────────────────────────── */

body {
    font-family: 'DM Sans', sans-serif !important;
    background: var(--cm-bg) !important;
    background-image: none !important;
    color: var(--cm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ── App bar ──────────────────────────────────────────────── */

.cm-appbar.mud-appbar {
    height: 70px !important;
    background: var(--cm-surface) !important;
    border-bottom: 1px solid var(--cm-border) !important;
    box-shadow: none !important;
    color: var(--cm-text) !important;
}

/* The dense toolbar keeps its own 48px height inside the taller bar, which
   leaves its contents floating at the top. Stretch it so the toolbar's own
   vertical centring applies across the full 70px. */
.cm-appbar.mud-appbar > .mud-toolbar {
    height: 100%;
    min-height: 0;
    align-items: center;
}

.cm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cm-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* Segments come from different pages with different typography (body2 titles,
   h6 back-links). Normalise them so every segment sits on the same line. */
.cm-breadcrumb > *,
.cm-breadcrumb .mud-typography,
.cm-breadcrumb a {
    display: inline-flex;
    align-items: center;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1;
    margin: 0;
}

.cm-breadcrumb .mud-icon-button {
    padding: 2px;
}

.cm-breadcrumb .mud-icon-root {
    font-size: 18px;
}

.cm-breadcrumb .cm-breadcrumb-sep {
    color: var(--cm-dim);
    font-size: 11px;
}

.cm-breadcrumb .cm-breadcrumb-current {
    color: var(--cm-text);
}

.cm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cm-steel);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}


/* ── Page header strip ────────────────────────────────────── */

.cm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    margin-top: 16px;
    background: var(--cm-surface);
    border-bottom: 1px solid var(--cm-border);
    min-height: 52px;
}

/* Most pages supply neither a heading nor Add/Edit toolbar icons, leaving the
   strip empty. Collapse it in that case so the page doesn't open with a stray
   line and a band of dead space above the content. */
.cm-page-header:not(:has(.cm-page-title > *)):not(:has(.cm-page-header-actions > *)) {
    display: none;
}

.cm-page-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cm-text);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ── Sidebar (cm-sidebar wrapper) — Light theme ──────────── */

.cm-sidebar {
    background: var(--cm-surface) !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--cm-border);
}

/* Logo area */
.cm-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 16px;
    border-bottom: 1px solid var(--cm-border);
    flex-shrink: 0;
}

.cm-logo-mark {
    width: 34px;
    height: 34px;
    background: var(--cm-navy);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.cm-logo-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--cm-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.cm-logo-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--cm-muted);
    letter-spacing: 0.04em;
    margin-top: 1px;
}

/* Organisation badge */
.cm-sidebar-org {
    margin: 12px 12px 4px;
    background: var(--cm-bg);
    border-radius: var(--cm-radius);
    padding: 9px 12px;
    font-size: 11.5px;
    color: var(--cm-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Section label (replaces MudNavGroup headers) */
.cm-nav-section-label {
    padding: 16px 20px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cm-dim);
}

/* Divider */
.cm-nav-divider {
    height: 1px;
    background: var(--cm-border);
    margin: 10px 16px;
}

/* Context chip (shows selected client/coach name) */
.cm-nav-context-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 4px;
}

.cm-nav-context-chip .cm-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cm-dim);
}

.cm-nav-context-chip .cm-chip {
    font-size: 10.5px;
    color: var(--cm-steel);
    font-weight: 600;
    background: rgba(74,127,165,.12);
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* Sub-nav container (for client/coach sub-pages) */
.cm-nav-sub {
    margin-left: 16px;
    border-left: 1px solid var(--cm-border);
    padding-left: 4px;
    margin-bottom: 4px;
}

.cm-nav-sub .mud-nav-link {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
    color: var(--cm-muted) !important;
}

.cm-nav-sub .mud-nav-link:hover {
    background: rgba(74,127,165,.06) !important;
    color: var(--cm-text) !important;
}

.cm-nav-sub .mud-nav-link.active,
.cm-nav-sub .mud-nav-link[aria-current="page"],
.cm-nav-sub .mud-nav-link.mud-selected {
    background: rgba(74,127,165,.10) !important;
    border-left: 2px solid var(--cm-steel) !important;
    padding-left: 10px !important;
    color: var(--cm-text) !important;
    font-weight: 600;
}


/* ── Sidebar nav links ────────────────────────────────────── */

.cm-sidebar .mud-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    margin: 1px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cm-muted) !important;
    cursor: pointer;
    transition: background var(--cm-transition), color var(--cm-transition);
    border-left: 3px solid transparent;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cm-sidebar .mud-nav-link:hover {
    background: var(--cm-bg) !important;
    color: var(--cm-text) !important;
}

/* Active nav link — target all MudBlazor selectors */
.cm-sidebar .mud-nav-link.active,
.cm-sidebar .mud-nav-link[aria-current="page"],
.cm-sidebar .mud-nav-link.mud-selected {
    background: rgba(74,127,165,.10) !important;
    color: var(--cm-navy) !important;
    border-left: 0px solid var(--cm-steel) !important;
    padding-left: 9px;
    font-weight: 600;
}

.cm-sidebar .mud-nav-link.active .mud-nav-link-icon,
.cm-sidebar .mud-nav-link[aria-current="page"] .mud-nav-link-icon,
.cm-sidebar .mud-nav-link.mud-selected .mud-nav-link-icon {
    color: var(--cm-steel) !important;
}

/* Nav icon default */
.cm-sidebar .mud-nav-link-icon {
    color: var(--cm-dim) !important;
    opacity: 0.85;
}

.cm-sidebar .mud-nav-link.active .mud-nav-link-icon {
    opacity: 1;
}

/* Bottom section (sign-out etc.) */
.cm-sidebar-bottom {
    margin-top: auto;
    padding-bottom: 12px;
    border-top: 1px solid var(--cm-border);
    padding-top: 8px;
}

/* Back link styling */
.cm-nav-back {
    margin-top: 4px;
    color: var(--cm-dim) !important;
    font-size: 12.5px !important;
}


/* ── Override MudNavMenu defaults inside sidebar ──────────── */

.cm-sidebar .mud-navmenu {
    padding: 8px 0;
}

.cm-sidebar .mud-nav-item {
    padding: 0;
}

/* Remove MudNavGroup expand icon inside sidebar */
.cm-sidebar .mud-nav-group .mud-expand-icon {
    display: none;
}


/* ── Table overrides ──────────────────────────────────────── */

.mud-table th,
.mud-th,
th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--cm-muted) !important;
    background: var(--cm-bg) !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--cm-border) !important;
    white-space: nowrap;
}

.mud-table-row {
    transition: background var(--cm-transition);
}

.mud-table-row:hover {
    background: rgba(74,127,165,.04) !important;
    /* TerraStack's frozen first column paints itself opaque, so it reads the row's
       overlay from this variable rather than inheriting the tint above. */
    --ts-row-tint: rgba(74,127,165,.04) !important;
}

.mud-table-cell,
.mud-table td {
    padding: 13px 16px !important;
    font-size: 13.5px;
    border-bottom: 1px solid var(--cm-border) !important;
    color: var(--cm-text);
    vertical-align: middle;
}

.mud-table-row:last-child .mud-table-cell,
.mud-table-row:last-child td {
    border-bottom: none !important;
}

/* Clickable rows */
.clickable-row .mud-table-row:hover {
    cursor: pointer;
    background-color: rgba(74,127,165,.04) !important;
}


/* ── Card / Paper overrides ───────────────────────────────── */

.mud-paper {
    border-radius: var(--cm-radius);
}

.mud-paper-outlined {
    border: 1px solid var(--cm-border) !important;
}

.mud-card {
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius);
    box-shadow: var(--cm-shadow-sm);
    overflow: hidden;
}

.mud-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--cm-border);
}

.mud-card-actions {
    border-top: 1px solid var(--cm-border);
}


/* ── Button overrides ─────────────────────────────────────── */

.mud-button-root {
    text-transform: none !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--cm-radius);
    transition: box-shadow var(--cm-transition), transform var(--cm-transition), background var(--cm-transition);
}

.mud-button-filled.mud-button-primary {
    box-shadow: 0 2px 8px rgba(27,43,75,.25);
}

.mud-button-filled.mud-button-primary:hover {
    box-shadow: 0 4px 14px rgba(27,43,75,.35);
    transform: translateY(-1px);
}

.mud-button-outlined {
    border: 1px solid var(--cm-border) !important;
}


/* ── Chip / badge ─────────────────────────────────────────── */

.cm-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.cm-chip-blue   { background: rgba(74,127,165,.12); color: var(--cm-steel); }
.cm-chip-green  { background: rgba(46,158,107,.12); color: var(--cm-success); }
.cm-chip-amber  { background: rgba(232,168,56,.15); color: #B07F1A; }
.cm-chip-red    { background: rgba(217,79,79,.12);  color: var(--cm-danger); }
.cm-chip-grey   { background: rgba(86,103,137,.10); color: var(--cm-muted); }


/* ── Input overrides ──────────────────────────────────────── */

.mud-input {
    background-color: transparent;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--cm-border);
    border-radius: var(--cm-radius);
}

.mud-input.mud-input-underline:before {
    border-color: var(--cm-border);
}


/* ── Tabs override ────────────────────────────────────────── */

.mud-tabs .mud-tab {
    text-transform: none !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--cm-muted);
    letter-spacing: 0.01em;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--cm-navy);
    font-weight: 600;
}

.mud-tab-slider {
    background: var(--cm-steel) !important;
}


/* ── Dialog override ──────────────────────────────────────── */

.mud-dialog {
    border-radius: var(--cm-radius);
}

.mud-dialog .mud-dialog-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cm-text);
}


/* ── Scrollbar ────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A0ADBF;
}

/* Sidebar scrollbar */
.cm-sidebar::-webkit-scrollbar-thumb {
    background: #CBD5E8;
}


/* ── Drawer overrides ─────────────────────────────────────── */

.mud-drawer {
    border-right: 1px solid var(--cm-border) !important;
    box-shadow: none !important;
    top: 0px !important;
    height: 100vh !important;
}

.mud-drawer--open.mud-drawer {
    background: var(--cm-surface) !important;
}

/* MudDrawer header reset */
.mud-drawer-header {
    padding: 0;
}

/* Prevent MudDivider from growing inside flex containers */
.mud-divider-fullwidth {
    flex-grow: 0 !important;
}

/* Right-side edit drawer (used by GenericDrawerComponent) */
.mud-drawer.custom-drawer {
    top: 0px !important;
    height: 100vh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    --mud-drawer-width: 60% !important;
    width: var(--mud-drawer-width, 60%);
    max-width: 750px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: fixed !important;
}


/* ── Pagination ───────────────────────────────────────────── */

.mud-table-pagination {
    border-top: 1px solid var(--cm-border);
    font-size: 12.5px;
    color: var(--cm-muted);
}

.mud-table-pagination .mud-button-root {
    border-radius: 6px;
}


/* ── Content area animation ───────────────────────────────── */

.mud-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
}

.cm-content-body {
    padding: 24px;
    background: var(--cm-surface);
    flex: 1;
}

.cm-content-inner {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

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


/* ── MudMainContent offset ─────────────────────────────────── */
/* ClipMode.Never: drawer is full-height, appbar sits in the content area.
   MudBlazor automatically adds the appbar-height padding-top. */


/* ── Responsive: full-width drawer on mobile ──────────────── */

@media (max-width: 767.98px) {
    .mud-drawer--open.mud-drawer {
        width: 100% !important;
    }
}


/* ── Login card (preserves auth layout look) ──────────────── */

.login-card {
    border-radius: 12px;
    box-shadow: var(--cm-shadow-lg);
    min-width: 340px;
    background-color: #fff;
}

.login-background {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8eef6 0%, #f4f6f9 100%);
}


/* ── Markdown content ─────────────────────────────────────── */

.markdown-content ul,
.markdown-content ol {
    padding-left: 2em;
}

.markdown-content ul,
.markdown-content ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

.markdown-content li {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}


/* ── Form field spacing (TerraStack generic view/edit) ───── */

.mud-drawer .py-2.d-lg-flex,
.mud-dialog .py-2.d-lg-flex {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Force label above input in drawer edit forms (always stacked) */
.mud-drawer .d-lg-flex {
    flex-direction: column !important;
}

.mud-drawer .d-lg-flex > .fc-min-w-40 {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 4px;
}

.mud-drawer .d-lg-flex > .fc-min-w-40 + div {
    width: 100%;
    min-width: 0;
}


/* ── Utility classes ──────────────────────────────────────── */

.pre-wrap {
    white-space: pre-wrap;
}

.bold {
    font-weight: 500 !important;
}

.bg-white {
    background: #fff !important;
}

.bg-transparent {
    background: transparent !important;
}