/* =============================================================================
   McCandless Design System — Dark Variant
   Single source of truth for all visual styling across the Phasing site.
   ============================================================================= */

:root {
    /* === Backgrounds === */
    --mc-bg:             #1a1a2e;
    --mc-surface:        #222240;
    --mc-surface-alt:    #2a2a4a;
    --mc-nav-bg:         #16162b;
    --mc-topbar-bg:      #1e1e38;

    /* === Borders === */
    --mc-border:         rgba(255, 255, 255, 0.08);
    --mc-border-light:   rgba(255, 255, 255, 0.05);

    /* === Text === */
    --mc-text-heading:   #f0f0f0;
    --mc-text-body:      #b0b0c8;
    --mc-text-muted:     #7a7a96;
    --mc-text-on-color:  #ffffff;

    /* === Vibrant Matte Accents === */
    --mc-primary:        #34c8fc;
    --mc-secondary:      #5fdeab;
    --mc-accent:         #f5aa21;
    --mc-danger:         #ed3915;
    --mc-purple:         #6f59e0;
    --mc-teal:           #34c2ad;

    /* === Table === */
    --mc-table-header-accent: var(--mc-primary);
    --mc-table-hover:         rgba(52, 200, 252, 0.06);
    --mc-table-derived-bg:    rgba(52, 200, 252, 0.05);
    --mc-table-derived-header:rgba(52, 200, 252, 0.10);
    --mc-table-derived-text:  #34c8fc;
    --mc-table-totals-bg:     rgba(95, 222, 171, 0.10);

    /* === Shadows (minimal) === */
    --mc-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.3);
    --mc-shadow-md:      0 2px 8px rgba(0, 0, 0, 0.4);

    /* === Spacing (8px grid) === */
    --mc-space-1:  4px;
    --mc-space-2:  8px;
    --mc-space-3:  16px;
    --mc-space-4:  24px;
    --mc-space-5:  32px;
    --mc-space-6:  48px;

    /* === Border Radius === */
    --mc-radius-sm:  4px;
    --mc-radius-md:  8px;
    --mc-radius-lg:  12px;

    /* === Typography === */
    --mc-font-heading: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
    --mc-font-body:    'Lato', 'Segoe UI', system-ui, sans-serif;
    --mc-font-mono:    'JetBrains Mono', Consolas, monospace;

}


/* =============================================================================
   Base
   ============================================================================= */

html,
body {
    font-family: var(--mc-font-body);
    background-color: var(--mc-bg);
    color: var(--mc-text-body);
    min-height: 100%;
}

a,
.btn-link {
    color: var(--mc-primary);
    transition: color 0.15s ease;
}

a:hover,
.btn-link:hover {
    color: #7adcfd;
}

.content {
    padding: var(--mc-space-1) var(--mc-space-1) var(--mc-space-4);
}

.content .container-fluid {
    padding-left: 0;
    padding-right: 0;
}


/* =============================================================================
   mc-card — Content card container
   ============================================================================= */

.mc-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    padding: var(--mc-space-3);
    margin-bottom: var(--mc-space-4);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--mc-border);
    color: var(--mc-text-heading);
}

.card-body {
    padding: 0;
}


/* =============================================================================
   mc-table — Data table
   ============================================================================= */

.mc-table,
.phasing-table,
.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--mc-text-body);
    font-family: var(--mc-font-body);
    font-size: 0.875rem;
}

.mc-table thead th,
.phasing-table thead th,
.table thead th {
    font-family: var(--mc-font-heading);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
    padding: var(--mc-space-2) var(--mc-space-2);
    border-bottom: 3px solid var(--mc-table-header-accent);
    border-top: none;
    border-left: none;
    border-right: none;
    background: transparent;
    text-align: center;
}

.mc-table tbody td,
.phasing-table tbody td,
.table tbody td {
    padding: var(--mc-space-2) var(--mc-space-2);
    border-bottom: 1px solid var(--mc-border-light);
    border-top: none;
    border-left: none;
    border-right: none;
    vertical-align: middle;
}

.mc-table tbody tr:hover,
.phasing-table tbody tr:hover,
.table tbody tr:hover {
    background: var(--mc-table-hover);
}

.mc-table tfoot td,
.phasing-table tfoot td,
.table tfoot td {
    padding: var(--mc-space-2) var(--mc-space-2);
    border-top: 2px solid var(--mc-border);
    font-weight: 600;
    color: var(--mc-text-heading);
}

/* Totals row */
.totals-row {
    background: var(--mc-table-totals-bg);
    font-weight: 600;
}

/* Derived / calculated columns */
.mc-derived,
.derived-col {
    background: var(--mc-table-derived-bg);
}

.mc-table thead th.mc-derived,
.mc-table thead th.derived-col,
.table thead th.mc-derived,
.table thead th.derived-col {
    background: var(--mc-table-derived-header);
    color: var(--mc-table-derived-text);
    border-bottom-color: var(--mc-table-derived-text);
}

/* Sticky header variant */
.mc-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mc-surface-alt);
    box-shadow: 0 1px 0 var(--mc-border);
}

.mc-table-sticky thead th.mc-derived,
.mc-table-sticky thead th.derived-col {
    background: #2b3a5c;
}


/* =============================================================================
   mc-table-wrap — Responsive scroll container
   ============================================================================= */

.mc-table-wrap,
.table-responsive {
    border-radius: var(--mc-radius-md);
    border: 1px solid var(--mc-border-light);
    overflow-x: auto;
    background: var(--mc-bg);
    scrollbar-color: rgba(255, 255, 255, 0.15) var(--mc-bg);
    scrollbar-width: thin;
}

.mc-table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.mc-table-wrap::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: var(--mc-bg);
}

.mc-table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.mc-table-wrap::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.mc-table-wrap::-webkit-scrollbar-corner,
.table-responsive::-webkit-scrollbar-corner {
    background: var(--mc-bg);
}

/* Right-align numeric columns (all except first) */
.mc-table tbody td:not(:first-child),
.mc-table tfoot td:not(:first-child) {
    text-align: right;
}

.mc-table thead th:not(:first-child) {
    text-align: right;
}

/* Week separator — slightly bolder top border on Monday rows */
.mc-table tbody tr.week-start td {
    border-top: 2px solid rgba(255, 255, 255, 0.15);
}

/* Highlight cell — white text for key daily values */
.mc-highlight-cell {
    color: var(--mc-text-heading);
    font-weight: 600;
}


/* =============================================================================
   mc-stat — Stat cards
   ============================================================================= */

.mc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--mc-space-3);
    margin-top: var(--mc-space-2);
}

.mc-stat {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-2) var(--mc-space-3);
    box-shadow: var(--mc-shadow-sm);
    display: flex;
    align-items: baseline;
    gap: var(--mc-space-3);
}

.mc-stat-label {
    font-family: var(--mc-font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
    white-space: nowrap;
}

.mc-stat-value {
    font-family: var(--mc-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mc-text-heading);
}


/* =============================================================================
   mc-bmi-gauge — Horizontal BMI range indicator
   ============================================================================= */

.mc-bmi-gauge {
    margin-top: var(--mc-space-2);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-2) var(--mc-space-3);
    box-shadow: var(--mc-shadow-sm);
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
}

.mc-bmi-gauge-title {
    font-family: var(--mc-font-heading);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
    white-space: nowrap;
}

.mc-bmi-gauge-bar {
    position: relative;
    display: flex;
    height: 32px;
    border-radius: var(--mc-radius-sm);
    overflow: hidden;
}

.mc-bmi-gauge-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-heading);
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    overflow: hidden;
}

.mc-bmi-gauge-labels {
    position: relative;
    display: flex;
    margin-top: 4px;
    height: 16px;
    font-family: var(--mc-font-mono);
    font-size: 0.6rem;
    color: var(--mc-text-muted);
}

.mc-bmi-gauge-label {
    position: absolute;
    transform: translateX(-50%);
}

.mc-bmi-gauge-pointer {
    position: absolute;
    top: -10px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.mc-bmi-gauge-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid var(--mc-text-heading);
}

.mc-bmi-gauge-value {
    font-family: var(--mc-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mc-text-heading);
    margin-top: -2px;
    background: var(--mc-surface);
    padding: 0 6px;
    border-radius: var(--mc-radius-sm);
    line-height: 1.4;
}

.mc-bmi-gauge-category-labels {
    position: relative;
    display: flex;
    margin-top: 2px;
    height: 16px;
}

.mc-bmi-gauge-category {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-heading);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--mc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* =============================================================================
   mc-chart-container — Chart wrapper
   ============================================================================= */

.mc-chart-container {
    width: 100%;
    margin-top: var(--mc-space-3);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-light);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-3);
}

.mc-chart-container .apexcharts-canvas {
    width: 100% !important;
    height: 100% !important;
}


/* =============================================================================
   mc-toolbar — Control bar
   ============================================================================= */

.mc-toolbar {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-3);
    display: flex;
    align-items: center;
    gap: var(--mc-space-3);
    margin-bottom: var(--mc-space-4);
}


/* =============================================================================
   mc-panel — Generic panel
   ============================================================================= */

.mc-panel {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-3);
}


/* =============================================================================
   mc-admin-card — Admin dashboard cards
   ============================================================================= */

.mc-admin-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-4);
    box-shadow: var(--mc-shadow-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mc-admin-card-detail {
    background: var(--mc-surface-alt);
    border-radius: var(--mc-radius-sm);
    padding: var(--mc-space-3);
    margin-bottom: var(--mc-space-3);
    flex-grow: 1;
}


/* =============================================================================
   mc-page-title / mc-page-subtitle — Page headings
   ============================================================================= */

.mc-page-title {
    font-family: var(--mc-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mc-text-heading);
    margin-bottom: var(--mc-space-2);
    letter-spacing: -0.01em;
}

.mc-page-subtitle {
    font-family: var(--mc-font-body);
    font-size: 0.875rem;
    color: var(--mc-text-muted);
}


/* =============================================================================
   mc-status-log — Terminal log
   ============================================================================= */

.mc-status-log {
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-3);
    font-family: var(--mc-font-mono);
    font-size: 0.8rem;
    color: var(--mc-text-body);
    overflow-y: auto;
}


/* =============================================================================
   Deficit indicator classes
   ============================================================================= */

.deficit-neutral {
    background: var(--mc-surface);
}

.deficit-light {
    background: rgba(95, 222, 171, 0.08);
}

.deficit-medium {
    background: rgba(95, 222, 171, 0.16);
}

.deficit-strong {
    background: rgba(95, 222, 171, 0.28);
    color: var(--mc-text-heading);
    font-weight: 600;
}


/* =============================================================================
   Buttons
   ============================================================================= */

.btn {
    border-radius: var(--mc-radius-sm);
    border: 1px solid transparent;
    font-family: var(--mc-font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
    opacity: 0.85;
}

.btn-primary,
.btn-success {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
    color: var(--mc-bg);
}

.btn-info {
    background: var(--mc-teal);
    border-color: var(--mc-teal);
    color: var(--mc-bg);
}

.btn-warning {
    background: var(--mc-accent);
    border-color: var(--mc-accent);
    color: var(--mc-bg);
}

.btn-danger {
    background: var(--mc-danger);
    border-color: var(--mc-danger);
    color: var(--mc-text-on-color);
}


/* =============================================================================
   mc-ghost-btn — Ghost button
   ============================================================================= */

.mc-ghost-btn {
    color: var(--mc-text-body);
    border: 1px solid var(--mc-border);
    background: transparent;
    border-radius: var(--mc-radius-sm);
    font-family: var(--mc-font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
}

.mc-ghost-btn:hover {
    color: var(--mc-text-heading);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.mc-ghost-btn.active {
    color: var(--mc-primary) !important;
    background: rgba(52, 200, 252, 0.08);
    border-color: var(--mc-primary);
    box-shadow: none;
}


/* =============================================================================
   Form controls
   ============================================================================= */

.form-control,
.form-select {
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border);
    color: var(--mc-text-heading);
    border-radius: var(--mc-radius-sm);
    font-family: var(--mc-font-body);
}

.form-control:focus,
.form-select:focus {
    background: var(--mc-surface-alt);
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 2px rgba(52, 200, 252, 0.15);
    color: var(--mc-text-heading);
}

.form-control::placeholder {
    color: var(--mc-text-muted);
}

.form-check-input {
    background-color: var(--mc-surface-alt);
    border-color: var(--mc-border);
}

.form-check-input:checked {
    background-color: var(--mc-primary);
    border-color: var(--mc-primary);
}

.form-label {
    font-family: var(--mc-font-heading);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mc-text-muted);
}

.validation-message {
    color: var(--mc-danger);
}


/* =============================================================================
   Alerts
   ============================================================================= */

.alert {
    border-radius: var(--mc-radius-md);
    padding: var(--mc-space-3);
    color: var(--mc-text-body);
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
}

.alert-danger {
    background: rgba(237, 57, 21, 0.12);
    color: #ff9e8e;
    border-color: rgba(237, 57, 21, 0.25);
}

.alert-info {
    background: rgba(52, 200, 252, 0.10);
    color: #a0e4ff;
    border-color: rgba(52, 200, 252, 0.25);
}

.alert-warning {
    background: rgba(245, 170, 33, 0.12);
    color: #ffd080;
    border-color: rgba(245, 170, 33, 0.25);
}

.alert-success {
    background: rgba(95, 222, 171, 0.12);
    color: #a0f0d0;
    border-color: rgba(95, 222, 171, 0.25);
}


/* =============================================================================
   Spinner
   ============================================================================= */

.spinner-border {
    color: var(--mc-primary);
}


/* =============================================================================
   Blazor error boundary
   ============================================================================= */

.blazor-error-boundary {
    background: rgba(237, 57, 21, 0.12);
    border: 1px solid rgba(237, 57, 21, 0.25);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text-heading);
    padding: var(--mc-space-3) var(--mc-space-3) var(--mc-space-3) var(--mc-space-6);
    position: relative;
}

.blazor-error-boundary::before {
    content: "\26A0";
    position: absolute;
    left: var(--mc-space-3);
    font-size: 1.25rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}


/* =============================================================================
   Icons — Monoline stroke-only (Feather/Lucide style)
   ============================================================================= */

.icon {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.small-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin-right: 0.4rem;
}

/* Menu (three horizontal lines) */
.icon-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
}

/* Dashboard (grid 2x2) */
.icon-dashboard {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

/* Phase (target/crosshair) */
.icon-phase {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

/* Weights (scale/dumbbell) */
.icon-weights {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5L17.5 17.5'/%3E%3Cpath d='M21 21l-1.5-1.5'/%3E%3Cpath d='M3 3l1.5 1.5'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 013 3L12 15l-3 1 1-3 9.5-10.5z'/%3E%3Cpath d='M2 12a10 10 0 0017.5 6.5'/%3E%3C/svg%3E");
}

/* Flame (fire) */
.icon-flame {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0011 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 11-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 002.5 2.5z'/%3E%3C/svg%3E");
}

/* Nutrition (droplet) */
.icon-nutrition {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 11-11.31 0z'/%3E%3C/svg%3E");
}

/* Graph (bar chart) */
.icon-graph {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

/* Correlation (trending-up) */
.icon-correlation {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

/* Settings (gear) */
.icon-settings {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
}

/* Logout (log-out) */
.icon-logout {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* Login (log-in) */
.icon-login {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}

/* Blood Pressure (heart with pulse line) */
.icon-bp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.572l-7.5 7.428-7.5-7.428A5 5 0 1112 6.006a5 5 0 017.5 6.572'/%3E%3Cpath d='M5 12h3l2-3 3 6 2-3h4'/%3E%3C/svg%3E");
}

/* Map (folded map) */
.icon-map {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/%3E%3Cline x1='8' y1='2' x2='8' y2='18'/%3E%3Cline x1='16' y1='6' x2='16' y2='22'/%3E%3C/svg%3E");
}

/* Waypoint (map pin marker) */
.icon-waypoint {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Download arrow */
.icon-download {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}