/* HowWeCoach Brand Design Tokens */
:root {
    --hwc-orange: #EF5B33;
    --hwc-blue: #157080;
    --hwc-error: #C80A0A;
    --hwc-near-black: #010101;
    --hwc-dark-grey: #333333;
    --hwc-mid-grey: #666666;
    --hwc-border: #E4E4E4;
    --hwc-surface: #F4F4F4;
    --hwc-sidenav-bg: #F1F1F1;
    --hwc-header-height: 66px;
    --hwc-sidenav-open: 240px;
    --hwc-sidenav-collapsed: 55px;
}

/* Layout */
.hwc-app {
    display: grid;
    grid-template-rows: var(--hwc-header-height) 1fr;
    min-height: 100vh;
    font-family: "neue-haas-grotesk-display", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system, "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--hwc-near-black);
}

.hwc-body {
    display: grid;
    grid-template-columns: var(--hwc-sidenav-open) 1fr;
    overflow: hidden;
}

/* Header */
.hwc-header {
    display: flex;
    align-items: center;
    height: var(--hwc-header-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--hwc-border);
    background: #fff;
    gap: 20px;
}

.hwc-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.hwc-header__logo img {
    display: block;
}

.hwc-header__sport-selector {
    flex: 1;
    display: flex;
    align-items: center;
}

.hwc-header__user {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.hwc-header__logout {
    color: var(--hwc-mid-grey);
    text-decoration: none;
    font-size: 14px;
}

.hwc-header__logout:hover {
    color: var(--hwc-dark-grey);
}


/* Account switcher */
.hwc-account-switcher {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.hwc-account-switcher__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--hwc-dark-grey);
    line-height: 1.2;
}

.hwc-account-switcher__email {
    font-size: 11px;
    color: var(--hwc-mid-grey);
    line-height: 1.2;
}

/* Side navigation */
.hwc-sidenav {
    background: var(--hwc-sidenav-bg);
    border-right: 1px solid var(--hwc-border);
    overflow-y: auto;
}

.hwc-sidenav__links {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.hwc-sidenav__item {
    display: block;
}

.hwc-sidenav__link {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    color: #505050;
    text-decoration: none;
    transition: background 0.2s ease;
}

.hwc-sidenav__link:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--hwc-dark-grey);
}

.hwc-sidenav__link.active {
    font-weight: 700;
    color: #282828;
}

/* Main content */
.hwc-content {
    padding: 30px;
    overflow-y: auto;
    background: #fff;
}

/* Primary button */
.btn-hwc-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding: 0 16px;
    background: var(--hwc-blue);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: box-shadow 0.2s;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
    text-decoration: none;
}

.btn-hwc-primary:hover {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
    color: #fff;
}

.btn-hwc-primary:active {
    box-shadow: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
}

/* Responsive: hide sidenav below 615px */
@media (max-width: 614px) {
    .hwc-body {
        grid-template-columns: 1fr;
    }

    .hwc-sidenav {
        display: none;
    }
}

/* Blazor error UI */
#blazor-error-ui {
    background: #b32121;
    color: white;
    padding: 10px 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 1000;
}

#blazor-error-ui .reload {
    color: white;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--hwc-error);
}

.validation-message {
    color: var(--hwc-error);
}