@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Nunito:wght@400;600;700&display=swap');

:root {
    /* Farbkarte - Soft & harmonisch (Coaching-App) */
    --bg-app: #F5EFEB;            /* Hintergrund (App) */
    --bg-card: #FBF8F5;           /* Oberfläche (Karte) */
    --bg-card-hover: #F5EFEB;
    --bg-input: #FFFFFF;          /* Suchleiste / Input BG */
    --bg-elevated: #F5EFEB;
    --dialog-bg: #FFFFFF;         /* Dialogfenster */
    --chip-bg: #C6D6D7;           /* Gruppierung / Chips */
    --secondary-btn: #EFE4DC;     /* Sekundär-Button */

    /* Typography */
    --text-main: #253130;
    --text-secondary: #3E4F4E;
    --text-muted: #556766;

    --primary: #6F8C87;           /* Primär-Button */
    --primary-hover: #5F7E79;     /* Primär Hover/Pressed */
    --primary-muted: #B8C9C8; /* Fokus/Active Ring */

    --accent-green: #6F8C87;
    --accent-orange: #EBB783;     /* Highlight / Selection */
    --accent-pink: #DEC9CA;       /* KI Gradient Start */
    --accent-coral: #C7B06B;      /* Akzent / Link */

    /* Functional */
    --success: #6F8C87;
    --danger: #B87C88;
    --warning: #C7B06B;
    --msg-success-bg: #DDEBE7;
    --msg-info-bg: #DDE8EE;
    --msg-warning-bg: #F3E9D4;
    --msg-error-bg: #F2DDE0;
    --ki-glow: #B2C5C8;
    --ki-grad-start: #DEC9CA;
    --ki-grad-end: #B2C5C8;

    /* UI Elements */
    --border: #E2D7CF;            /* Divider / Rahmen */
    --border-subtle: #E2D7CF;
    --table-head: #E7D3D5;        /* Tabelle Kopf */
    --shadow: 0 8px 24px rgba(95, 126, 121, 0.16);
    --shadow-sm: 0 2px 8px rgba(95, 126, 121, 0.12);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --font-main: 'Nunito', system-ui, -apple-system, sans-serif;
    --font-display: 'Fraunces', 'Nunito', system-ui, sans-serif;
    --transition: all 0.2s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-app);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 15px;
    min-height: 100vh;
}

::selection {
    background: #EBB783;
    color: #2B3232;
}

body.coach-mobile-scroll-lock {
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
}

body.coach-mobile-scroll-lock #root {
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
}

/* ===== ICONS ===== */
.icon {
    width: 1.1em;
    height: 1.1em;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.inline-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.4rem;
}

.title-icon,
.section-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
    color: var(--text-secondary);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #B8C9C8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6F8C87;
}

/* Layout */
#root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== TOP NAVIGATION ===== */
.nav {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background: var(--bg-card);
    overflow: visible;
}

.nav-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.nav-item:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.nav-item.active {
    background: var(--primary-muted);
    color: var(--primary);
}

.nav-icon {
    font-size: 1.1rem;
}

.nav-label {
    display: inline;
}

.logout {
    color: var(--danger);
}

.nav-actions .logout {
    margin-left: 0;
}

.logout:hover {
    background: var(--msg-error-bg);
}

.nav-avatar-btn {
    padding: 0.4rem 0.6rem;
}

.nav-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.nav-avatar-fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-main);
    font-size: 0.8rem;
}

.nav-overflow {
    position: relative;
    flex: 0 0 auto;
}

.nav-info {
    position: relative;
    flex: 0 0 auto;
}

.nav-info-btn {
    min-width: 2.4rem;
    justify-content: center;
    padding: 0.55rem 0.75rem;
    font-weight: 800;
}

.nav-overflow-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1200;
}

.nav-info-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    min-width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    z-index: 1200;
}

.nav-overflow-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.65rem;
    text-align: left;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.88rem;
}

.nav-info-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.65rem;
    text-align: left;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}

.nav-overflow-item:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.nav-info-item:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.nav-overflow-item.active {
    background: var(--primary-muted);
    color: var(--primary);
}

.nav-info-item.active {
    background: var(--primary-muted);
    color: var(--primary);
}

.nav-measure {
    position: absolute;
    left: -9999px;
    top: -9999px;
    visibility: hidden;
    pointer-events: none;
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.coach-mobile-bottom-nav {
    display: none;
}

/* Badge for notifications */
.notification-badge {
    background: var(--danger);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    margin-left: 0.25rem;
}

/* ===== MAIN CONTENT ===== */
.main {
    flex: 1;
    padding: 2rem 15px;
    max-width: none;
    margin: 0;
    width: 100%;
}

.main-content {
    flex: 1;
    padding: 2rem 15px;
    max-width: none;
    margin: 0;
    width: 100%;
}

.app-coach-dashboard {
    height: 100vh;
    overflow: hidden;
}

.main-content-coach-dashboard {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.view {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.view-header h1,
.view-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.help-view {
    display: grid;
    gap: 1rem;
}

.help-card {
    display: grid;
    gap: 0.7rem;
    background: var(--dialog-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.help-card h3 {
    margin: 0;
}

.help-kicker {
    margin: 0;
    color: var(--text-secondary);
}

.help-section {
    display: grid;
    gap: 0.45rem;
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.7rem;
}

.help-section h4 {
    margin: 0;
    font-size: 0.95rem;
}

.help-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.45rem;
}

.help-list li {
    color: var(--text-secondary);
}

.help-links {
    display: grid;
    gap: 0.45rem;
}

.help-links a {
    color: var(--accent-coral);
    text-decoration: none;
    font-weight: 700;
}

.help-links a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.help-faq {
    display: grid;
    gap: 0.45rem;
}

.help-faq-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: #FFFFFF;
    padding: 0.55rem 0.65rem;
    display: grid;
    gap: 0.25rem;
}

.help-faq-item strong {
    font-size: 0.9rem;
}

.help-faq-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.help-note {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.help-screens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}

.help-screen-card {
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #FFFFFF;
    display: grid;
    box-shadow: var(--shadow-sm);
}

.help-screen-image {
    width: 100%;
    height: auto;
    display: block;
}

.help-screen-card figcaption {
    padding: 0.55rem 0.65rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
    border-top: 1px solid var(--border-subtle);
}

/* ===== LEGAL PAGES ===== */
.legal-body {
    min-height: 100vh;
    background:
        radial-gradient(900px 480px at 92% 6%, rgba(198, 214, 215, 0.28), transparent 65%),
        radial-gradient(740px 380px at 8% 92%, rgba(222, 201, 202, 0.24), transparent 64%),
        linear-gradient(165deg, var(--bg-app) 0%, var(--bg-card) 100%);
}

.legal-main {
    max-width: 980px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.legal-card {
    background: linear-gradient(155deg, var(--bg-card) 0%, #FFFFFF 100%);
    box-shadow: var(--shadow);
}

.legal-kicker {
    display: inline-block;
    background: linear-gradient(145deg, var(--primary), var(--primary-hover));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: var(--radius-full);
    padding: 0.35rem 0.65rem;
    margin-bottom: 0.8rem;
}

.legal-stand {
    margin: 0.35rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.legal-note {
    margin: 0 0 1rem;
    background: var(--msg-info-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    color: var(--text-secondary);
}

.legal-section {
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.85rem;
    margin-top: 0.85rem;
}

.legal-section h2 {
    font-size: 1.05rem;
    margin-bottom: 0.45rem;
}

.legal-list {
    margin: 0 0 0.75rem 1.2rem;
    color: var(--text-secondary);
}

.legal-list li {
    margin-bottom: 0.35rem;
}

.legal-links {
    display: grid;
    gap: 0.45rem;
}

.legal-links a {
    color: var(--accent-coral);
    text-decoration: none;
    font-weight: 700;
}

.legal-links a:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

/* ===== TILE/CARD GRID ===== */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
}

.tile:hover {
    background: var(--bg-card-hover);
    border-color: #B8C9C8;
    transform: translateY(-2px);
}

.tile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: var(--bg-elevated);
    color: var(--text-main);
}

.tile-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-elevated);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.tile-badge .icon {
    width: 0.95em;
    height: 0.95em;
}

.accepted-badge {
    background: rgba(78, 205, 196, 0.18);
    border-color: rgba(78, 205, 196, 0.35);
    color: var(--success);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.read-badge {
    background: rgba(78, 205, 196, 0.12);
    border-color: rgba(78, 205, 196, 0.3);
    color: var(--success);
    font-weight: 600;
}

.draft-badge {
    background: rgba(255, 209, 102, 0.15);
    border-color: rgba(255, 209, 102, 0.35);
    color: var(--warning);
    font-weight: 600;
}

.tile-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.tile-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.tile-footer {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.coach-card {
    cursor: default;
}

.coach-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.coach-card-avatar,
.coach-card-avatar-fallback {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.1rem;
}

.avatar-zoom-trigger {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 0;
    border-radius: 50%;
    cursor: pointer;
}

.avatar-zoom-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.avatar-zoom-modal {
    max-width: 760px;
}

.avatar-zoom-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-zoom-image {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

/* ===== CARDS (general) ===== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: var(--transition);
}

.card:hover {
    border-color: #B8C9C8;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4 {
    color: var(--text-main);
    font-weight: 700;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.1rem;
}

p {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.muted {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ===== BUTTONS ===== */
button {
    cursor: pointer;
    font-family: var(--font-main);
    transition: var(--transition);
}

.primary {
    background: var(--primary);
    color: #FFFFFF;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
}

.primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.primary:disabled {
    background: #B8C9C8;
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.ghost {
    background: var(--secondary-btn);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.ghost:hover {
    background: #E8DCD3;
    color: var(--text-main);
    border-color: #C6D6D7;
}

.cancel-btn {
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.icon-btn {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn .icon {
    width: 1rem;
    height: 1rem;
}

.icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.danger {
    color: var(--danger);
}

.success {
    color: var(--success);
}

.small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

/* ===== FORMS ===== */
label {
    display: block;
    margin-bottom: 1rem;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 0.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: var(--text-main);
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #B8C9C8;
    box-shadow: 0 0 0 3px rgba(184, 201, 200, 0.35);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

.modern-date-picker {
    position: relative;
    margin-top: 0.4rem;
}

.modern-date-trigger {
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.95rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-main);
    font-size: 0.95rem;
}

.modern-date-trigger:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.modern-date-trigger:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.modern-date-picker.is-disabled .modern-date-trigger {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

.modern-date-trigger-value {
    text-align: left;
}

.modern-date-trigger-value.is-placeholder {
    color: var(--text-muted);
}

.modern-date-trigger-icon {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
}

.modern-date-popover {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 1300;
    width: min(340px, calc(100vw - 2rem));
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--dialog-bg);
    box-shadow: 0 14px 30px rgba(111, 140, 135, 0.16);
}

.modern-date-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
}

.modern-date-popover-head strong {
    color: var(--text-main);
    font-size: 0.92rem;
    text-transform: capitalize;
}

.modern-date-nav-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: rgba(198, 214, 215, 0.20);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.modern-date-nav-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-muted);
}

.modern-date-weekdays,
.modern-date-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.modern-date-weekdays {
    margin-bottom: 0.4rem;
}

.modern-date-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.modern-date-day {
    height: 34px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-main);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.modern-date-day:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-subtle);
}

.modern-date-day.is-outside {
    color: var(--text-muted);
    opacity: 0.7;
}

.modern-date-day.is-today {
    border-color: var(--primary);
    color: var(--primary);
}

.modern-date-day.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-app);
    font-weight: 800;
}

.modern-date-popover-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.modal-content.modern-date-modal {
    max-width: 380px;
    padding: 1rem;
}

.modern-date-popover.modern-date-popover-modal {
    position: static;
    width: 100%;
    max-width: 100%;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* ===== STATS GRID ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ===== QUICK ACTIONS ===== */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.action-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition);
    cursor: pointer;
    color: white;
}

.action-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--text-main);
}

/* ===== AUTH SCREENS ===== */
.auth-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    position: relative;
    isolation: isolate;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-app);
}

.auth-container::before,
.auth-container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.auth-container::before {
    background: none;
    opacity: 1;
}

.auth-container::after {
    background: none;
    opacity: 1;
}

.auth-hero {
    text-align: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.auth-hero h1 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.auth-hero .subtitle {
    color: var(--text-secondary);
    max-width: 400px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: rgba(251, 248, 245, 0.94);
    backdrop-filter: blur(3px);
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    position: relative;
    z-index: 1;
    margin-bottom: 0.75rem;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.auth-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-icon {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.auth-icon .icon {
    width: 3rem;
    height: 3rem;
}

.pill {
    background: var(--primary-muted);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
}

.full {
    width: 100%;
}

.error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.success-message {
    color: var(--success);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    margin-top: 1rem;
}

.auth-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.link-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.9rem;
    cursor: pointer;
}

.link-btn:hover {
    text-decoration: underline;
}

.consent-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 0.5rem 0 0.35rem;
}

.consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.consent-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 0.15rem;
}

.consent-checkbox a {
    color: var(--primary);
}

/* ===== ONBOARDING ===== */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(95, 126, 121, 0.74);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.coachie-intro-processing-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 33, 37, 0.44);
    backdrop-filter: blur(3px);
    z-index: 12;
    padding: 1rem;
}

.coachie-intro-processing-dialog {
    width: min(520px, calc(100vw - 2rem));
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 247, 0.96));
    box-shadow: 0 24px 52px rgba(16, 29, 33, 0.28);
    padding: 1.2rem 1.3rem;
    text-align: center;
    display: grid;
    gap: 0.45rem;
}

.coachie-intro-processing-dialog h3 {
    margin: 0;
    color: var(--text-main);
}

.coachie-intro-processing-dialog p {
    margin: 0;
    color: var(--text-secondary);
}

.coachie-intro-processing-spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.15rem;
    border-radius: 999px;
    border: 3px solid rgba(111, 140, 135, 0.22);
    border-top-color: #6F8C87;
    animation: coachie-ai-button-spin 0.85s linear infinite;
}

.onboarding-container {
    width: 100%;
    max-width: 600px;
    max-height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
}

.onboarding-header {
    text-align: center;
    margin-bottom: 2rem;
    flex-shrink: 0;
}

.onboarding-chat {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.onboarding-avatar {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.onboarding-progress {
    margin-top: 1rem;
}

.progress-bar {
    background: var(--bg-elevated);
    height: 6px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    background: var(--primary);
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    display: block;
}

.chat-bubble {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bubble-avatar {
    background: var(--bg-card);
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
}

.bubble-avatar .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.bubble-content {
    background: var(--bg-card);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    flex: 1;
}

.question-title {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.question-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
}

.welcome-greeting {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.note {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.answer-input-container {
    margin-top: 1rem;
}

.coachie-intro-rating-block .task-rating-stars {
    justify-content: center;
}

.coachie-intro-scale-block {
    display: grid;
    gap: 0.75rem;
}

.coachie-intro-scale-slider {
    margin-top: 0.25rem;
}

.coachie-intro-scale-labels {
    display: grid;
    gap: 0.4rem;
}

.coachie-intro-scale-label {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.25;
    padding: 0.35rem 0.45rem;
    text-align: center;
    cursor: pointer;
}

.coachie-intro-scale-label.active {
    border-color: var(--primary);
    background: rgba(94, 96, 206, 0.12);
    color: var(--text-main);
    font-weight: 600;
}

.answer-textarea {
    resize: none;
}

.answer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    gap: 0.75rem;
}

.onboarding-start-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    font-size: 1.1rem;
}

.coachie-intro-container {
    max-width: min(860px, 100%);
    height: min(900px, calc(100dvh - 1.5rem));
    max-height: min(900px, calc(100dvh - 1.5rem));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 1rem 1rem 0.75rem;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
}

.coachie-intro-scroll {
    padding-bottom: 0.75rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.coachie-intro-subtitle {
    margin-top: 0.4rem;
    margin-bottom: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.coachie-intro-bubble {
    margin-bottom: 1rem;
}

.coachie-intro-step-type {
    display: inline-block;
    margin: 0 0 0.6rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-elevated);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.coachie-intro-container .question-text {
    font-size: clamp(1.02rem, 1.7vw, 1.25rem);
    line-height: 1.55;
    font-weight: 600;
    white-space: pre-wrap;
}

.coachie-intro-footer {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.75rem 0 calc(0.25rem + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}

.coachie-intro-footer > span {
    display: block;
}

.coachie-intro-footer .primary {
    width: 100%;
}

@media (max-width: 760px) {
    .onboarding-overlay {
        padding: 0.75rem;
        align-items: stretch;
    }

    .onboarding-container {
        max-width: none;
        max-height: calc(100dvh - 1.5rem);
    }

    .coachie-intro-container {
        height: calc(100dvh - 0.6rem);
        max-height: calc(100dvh - 0.6rem);
        border-radius: 14px;
        padding: 0.75rem 0.75rem 0.6rem;
    }

    .onboarding-header {
        margin-bottom: 1rem;
    }

    .bubble-content {
        padding: 1rem;
    }

    .question-text {
        font-size: 1.05rem;
        line-height: 1.45;
    }

    .answer-actions {
        flex-wrap: wrap;
    }

    .answer-actions .primary {
        width: 100%;
    }

    .coachie-intro-footer {
        gap: 0.5rem;
        padding-top: 0.6rem;
        padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
    }

    .coachie-intro-footer .primary {
        min-height: 44px;
    }
}

/* ===== GROUPS ===== */
.groups-container {
    max-width: none;
    margin: 0;
    width: 100%;
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.group-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
}

.group-card:hover {
    background: var(--bg-card-hover);
    border-color: #B8C9C8;
}

.group-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.group-card-header h3 {
    font-size: 1.1rem;
    margin: 0;
}

.visibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.visibility-badge.private-signal {
    color: var(--warning);
    border-color: rgba(255, 209, 102, 0.55);
    background: rgba(255, 209, 102, 0.14);
}

.group-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.group-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.group-form .tag-input-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
}

.group-form .tag-input-container input {
    width: 100%;
}

.tag {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
}

.group-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.group-invite-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.group-owner-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.group-leave-btn {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.group-leave-btn:hover {
    background: #ff7f7f;
    border-color: #ff7f7f;
    color: #fff;
}

.member-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ===== CHAT ===== */
.group-detail-container {
    max-width: none;
    margin: 0;
    width: 100%;
}

.group-detail-header {
    margin-bottom: 1.5rem;
}

.back-button {
    margin-bottom: 1rem;
}

.group-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.group-detail-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
}

.group-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-info-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.group-info-section h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.group-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

.group-members-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.group-invitations-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.group-invitations-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.group-invitation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.group-invitation-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.group-invitation-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.group-invitation-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.status-pill.open {
    color: var(--warning);
    background: rgba(255, 209, 102, 0.12);
}

.status-pill.declined {
    color: var(--danger);
    background: rgba(255, 107, 107, 0.12);
}

.members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.members-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
}

.member-item:hover {
    background: var(--bg-elevated);
}

.member-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-avatar {
    width: 32px;
    height: 32px;
    background: var(--primary-muted);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.creator-badge {
    font-size: 0.7rem;
    background: var(--accent-orange);
    color: #000;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    margin-left: 0.5rem;
}

.group-chat-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* New Post Form */
.new-post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.new-post-card h4 {
    margin-bottom: 1rem;
    color: var(--text-main);
    font-size: 1rem;
}

.post-textarea {
    width: 100%;
    min-height: 100px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 0.95rem;
    resize: vertical;
}

.post-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.post-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.post-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Posts Feed */
.posts-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Post Card */
.post-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
    flex-shrink: 0;
}

.post-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.post-author-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1rem;
}

.post-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.post-menu {
    display: flex;
    gap: 0.45rem;
    flex-shrink: 0;
}

.post-content {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Status Badges */
.status-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 99px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    display: inline-block;
}

.status-todo {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.status-in_progress {
    background: var(--msg-info-bg);
    color: var(--text-main);
}

.status-done {
    background: var(--msg-success-bg);
    color: var(--text-main);
}

.status-skipped {
    background: var(--secondary-btn);
    color: var(--text-secondary);
    text-decoration: line-through;
}

/* Homework Card Updates */
.homework-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.homework-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Post Interactions (Like & Comment) */
.post-interactions {
    display: flex;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.interaction-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.interaction-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.interaction-btn.liked {
    color: #ff6b6b;
}

.interaction-btn.liked .icon {
    fill: currentColor;
}

.interaction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.interaction-icon .icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* Post Comments */
.post-comments {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-card {
    display: flex;
    gap: 0.75rem;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    color: white;
    flex-shrink: 0;
}

.comment-body {
    flex: 1;
    background: var(--bg-elevated);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.comment-author {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
}

.comment-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.comment-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.comment-actions {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

.group-posts-pagination {
    margin-top: 0.25rem;
}

.comment-input-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.comment-input-row input {
    flex: 1;
}

/* Edit Form */
.edit-form {
    margin: 0.5rem 0;
}

.edit-form textarea,
.edit-form input {
    width: 100%;
    margin-bottom: 0.5rem;
}

.edit-actions {
    display: flex;
    gap: 0.5rem;
}

/* ===== KANBAN ===== */
.kanban {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.phase-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    overflow: visible;
    padding-bottom: 0;
    align-items: start;
}

.phase-board .kanban-column {
    flex: 1 1 auto;
    min-width: 0;
}

.phase-board .user-email-small {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.phase-board .user-stats-mini {
    flex-wrap: wrap;
}

.coach-dashboard {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.coach-dashboard .phase-board {
    flex: 1 1 auto;
    align-items: start;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.2rem;
    padding-bottom: 0.2rem;
}

.coach-dashboard .phase-board .kanban-column {
    display: flex;
    flex-direction: column;
    align-self: start;
    min-height: 0;
    min-height: calc(100% - 15px);
}

.coach-dashboard .phase-board .column-items {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 15px;
}

.coach-dashboard-mobile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.9rem;
}

.coach-dashboard-mobile-card {
    width: 100%;
    max-width: none;
}

.coach-dashboard-view {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.coach-dashboard-view .view-header {
    margin-bottom: 1rem;
}

.coach-notes-view {
    display: grid;
    gap: 1rem;
}

.coach-notes-header {
    margin-bottom: 0.2rem;
}

.coach-notes-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.coach-notes-list-card,
.coach-notes-detail-card {
    display: grid;
    gap: 0.7rem;
}

.coach-notes-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.coach-notes-list-head h3 {
    margin: 0;
}

.coach-notes-list {
    display: grid;
    gap: 0.5rem;
    max-height: 64vh;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.coach-notes-list-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-main);
    text-align: left;
    padding: 0.65rem 0.7rem;
    display: grid;
    gap: 0.25rem;
    cursor: pointer;
}

.coach-notes-list-item.active {
    border-color: rgba(126, 214, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(126, 214, 255, 0.3);
}

.coach-notes-list-item strong {
    font-size: 0.8rem;
}

.coach-notes-list-item span {
    font-size: 0.83rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.coach-notes-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.coach-notes-detail-head h3 {
    margin: 0;
}

.coach-notes-detail-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.coach-notes-textarea {
    min-height: 19rem;
    resize: vertical;
}

.coach-notes-voice-status {
    margin: -0.15rem 0 0;
}

.coach-notes-detail-footer {
    margin-top: 0.5rem;
}

.coach-notes-inline-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.2rem;
}

.coach-notes-overview-view {
    display: grid;
    gap: 0.9rem;
}

.coach-notes-overview-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.coach-notes-overview-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.coach-notes-overview-filter span {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.coach-notes-overview-filter select {
    margin-top: 0;
    width: auto;
    min-width: 12.5rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.86rem;
}

.coach-notes-overview-groups {
    display: grid;
    gap: 0.85rem;
}

.coach-notes-overview-group {
    display: grid;
    gap: 0.65rem;
}

.coach-notes-overview-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.coach-notes-overview-group-head h3 {
    margin: 0;
}

.coach-notes-overview-list {
    display: grid;
    gap: 0.5rem;
}

.coach-notes-overview-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.65rem 0.7rem;
    display: grid;
    gap: 0.3rem;
}

.coach-notes-overview-item-meta strong {
    font-size: 0.82rem;
}

.coach-notes-overview-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.coach-notes-overview-item-actions {
    display: flex;
    justify-content: flex-end;
}

.coach-notes-floating-mic {
    position: fixed;
    right: 1.25rem;
    bottom: 1.35rem;
    z-index: 930;
    border-radius: 999px;
    padding: 0.9rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--accent-2);
    color: #081421;
    border: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
    animation: coachie-ai-button-pulse 2.4s ease-out infinite;
}

.coach-note-task-suggestions-modal .modal-body {
    display: grid;
    gap: 0.5rem;
}

@media (max-width: 980px) {
    .coach-notes-layout {
        grid-template-columns: 1fr;
    }
    .coach-notes-list {
        max-height: 16rem;
    }
    .coach-notes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
    .coach-notes-overview-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .coach-notes-overview-filter {
        width: 100%;
    }
    .coach-notes-overview-filter select {
        width: 100%;
        min-width: 0;
    }
    .coach-notes-detail-footer {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .coach-notes-detail-footer button {
        flex: 1 1 12rem;
    }
    .coach-notes-floating-mic {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
        min-width: 12rem;
        justify-content: center;
    }
}

.kanban-column {
    flex: 0 0 300px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.column-header h3 {
    font-size: 0.9rem;
    color: var(--text-main);
    margin: 0;
}

.count {
    background: var(--bg-elevated);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.column-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    cursor: grab;
}

.user-card:active {
    cursor: grabbing;
}

.user-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.user-email-small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.user-mood {
    font-size: 1.4rem;
}

.user-mood .mood-emoji {
    width: 1.95rem;
    height: 1.95rem;
}

.user-mood .task-rating-inline {
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.user-stats-mini {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.user-stats-mini .icon {
    width: 0.9rem;
    height: 0.9rem;
}

.user-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.coach-dashboard-view .user-card-actions button,
.coach-dashboard-view .user-card-actions .ghost.small,
.coach-dashboard-view .user-card-actions .primary.small {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.coach-dashboard-view .user-card-actions button:hover,
.coach-dashboard-view .user-card-actions .ghost.small:hover,
.coach-dashboard-view .user-card-actions .primary.small:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.coachie-homework-section {
    margin-top: 1.5rem;
}

.coach-homework-groups {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin-top: 1rem;
}

.coach-homework-toolbar {
    display: flex;
    justify-content: flex-end;
}

.coach-homework-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.coach-homework-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-right: 0.6rem;
}

.coach-homework-toggle-row .coach-homework-toggle {
    flex: 1 1 auto;
    width: auto;
}

.coach-homework-toggle,
.coach-homework-phase-toggle {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.coach-homework-insights-btn {
    white-space: nowrap;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

.coach-homework-insights-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.coach-homework-toggle:hover,
.coach-homework-phase-toggle:hover {
    background: var(--bg-card-hover);
}

.coach-homework-toggle {
    font-weight: 700;
    font-size: 1.02rem;
}

.coach-homework-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
}

.coach-homework-phases {
    border-top: 1px solid var(--border-subtle);
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.coach-homework-phases > .muted {
    margin: 0.35rem 0.55rem 0.55rem;
}

.coach-homework-phase {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.coach-homework-phase-toggle {
    font-size: 0.92rem;
    font-weight: 600;
}

.coach-homework-phase .kanban {
    padding: 0.2rem 0.8rem 0.8rem;
}

.coach-homework-status-kanban {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    overflow: visible;
}

.coach-homework-status-kanban .kanban-column {
    flex: 1 1 auto;
    min-width: 0;
}

.coach-homework-status-kanban.single {
    grid-template-columns: 1fr;
}

.coach-homework-status-kanban .column-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-items: stretch;
    gap: 0.75rem;
}

.coach-homework-status-kanban .homework-card {
    width: 100%;
    max-width: none;
    min-height: 0;
}

.coach-homework-status-kanban .homework-card.coach-daily-mood-card {
    border-color: #c7632f;
    background: #F3E9D4;
}

.daily-mood-highlight-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0.28rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #c7632f;
    background: #f6e1d4;
    color: #8f4a25;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.daily-mood-highlight-badge .icon {
    color: #b65b2b;
}

.daily-mood-task-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #c7632f;
    background: #c7632f;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.1;
}

.coach-task-workflow-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}

.coach-task-workflow-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.coach-homework-status-kanban .homework-actions .ghost.small.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    font-weight: 700;
}

.coach-homework-status-kanban .homework-actions .ghost.small.danger:hover {
    filter: brightness(0.92);
}

.coachie-overview-page {
    width: 100%;
    max-width: none;
    margin: 0;
}

.coachie-overview-header {
    margin-bottom: 1rem;
}

.coachie-hero-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.coachie-hero-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.coachie-hero-main h1 {
    margin: 0;
}

.coachie-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary-muted);
    color: var(--primary);
    font-weight: 700;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.coachie-hero-phase-block {
    background: #F3E9D4;
    border: 1px solid #C7B06B;
    border-radius: var(--radius-md);
    padding: 0.85rem;
    box-shadow: var(--shadow-sm);
}

.coachie-hero-phase-block.no-fade {
    background: transparent;
    box-shadow: none;
}

.coachie-hero-phase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.coachie-hero-phase-head strong {
    font-size: 0.88rem;
    color: var(--text-main);
}

.coachie-phase-progress-steps {
    display: grid;
    align-items: start;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem 0.45rem;
}

.coachie-hero-phase-block.no-fade .coachie-phase-progress-steps {
    background: transparent;
}

.coachie-phase-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    min-width: 0;
}

.coachie-phase-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.62rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.coachie-phase-step.is-done:not(:last-child)::after {
    background: var(--primary);
}

.coachie-phase-step-dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    border: 2px solid var(--primary-muted);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.coachie-phase-step.is-done .coachie-phase-step-dot {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.coachie-phase-step.is-current .coachie-phase-step-dot {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
}

.coachie-phase-step-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.coachie-phase-step.is-current .coachie-phase-step-label {
    color: var(--text-main);
    font-weight: 600;
}

.coachie-phase-step.is-done .coachie-phase-step-label {
    color: var(--text-secondary);
}

.coachie-hero-trend {
    margin-top: 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.coachie-hero-trend-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.coachie-hero-trend-head.is-clickable {
    cursor: pointer;
}

.coachie-hero-trend-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.coachie-hero-trend-head strong {
    font-size: 0.85rem;
}

.coachie-hero-trend-empty {
    margin: 0.25rem 0 0;
}

.coachie-trend-chart-wrap {
    width: 100%;
    overflow-x: auto;
}

.coachie-trend-chart {
    width: 100%;
    min-width: 480px;
    height: auto;
    display: block;
}

.coachie-trend-grid-line {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
}

.coachie-trend-axis {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 1.2;
}

.coachie-trend-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.coachie-trend-point {
    fill: #fff;
    stroke: var(--primary);
    stroke-width: 2;
}

.coachie-trend-y-label {
    fill: var(--text-muted);
    font-size: 11px;
    text-anchor: end;
}

.coachie-trend-x-label {
    fill: var(--text-muted);
    font-size: 10px;
    text-anchor: middle;
}

.coachie-hero-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.coachie-kpi {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.coachie-kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.coachie-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.coachie-overview-card {
    min-height: 180px;
}

.coachie-overview-card-wide {
    grid-column: 1 / -1;
}

.coachie-overview-card-collapsed {
    min-height: 0;
}

.coachie-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.coachie-card-head.is-clickable {
    cursor: pointer;
}

.coachie-card-head h3 {
    margin: 0;
}

.coachie-collapse-btn {
    white-space: nowrap;
}

.coachie-phase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.coachie-phase-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.coachie-phase-card-collapsed {
    gap: 0;
}

.coachie-phase-header {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.45rem;
}

.coachie-phase-card-collapsed .coachie-phase-header {
    border-bottom: none;
    padding-bottom: 0;
}

.coachie-phase-header-toggle {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.coachie-phase-header-main {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.coachie-phase-header-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.coachie-phase-header h4 {
    margin: 0;
    font-size: 1rem;
}

.coachie-phase-counts {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.coachie-phase-section h5 {
    margin: 0 0 0.4rem 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.coachie-phase-section-toggle {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-align: left;
    margin-bottom: 0.4rem;
    cursor: pointer;
}

.coachie-phase-section-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.coachie-phase-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.coachie-ai-toolbar {
    margin-bottom: 0.8rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.7rem;
    background: #DDE8EE;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.coachie-ai-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.coachie-ai-toolbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.coachie-ai-generate-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.coachie-ai-generate-btn.is-loading {
    box-shadow: 0 0 0 0 rgba(178, 197, 200, 0.45);
    animation: coachie-ai-button-pulse 1.2s ease-out infinite;
}

.coachie-ai-generate-spinner {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(111, 140, 135, 0.22);
    border-top-color: #6F8C87;
    animation: coachie-ai-button-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

@keyframes coachie-ai-button-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes coachie-ai-button-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(178, 197, 200, 0.42);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(178, 197, 200, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(178, 197, 200, 0);
    }
}

.coachie-ai-error {
    margin: 0 0 0.6rem;
}

.coachie-ai-result-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem;
    margin-bottom: 0.8rem;
    background: rgba(255, 255, 255, 0.86);
    display: grid;
    gap: 0.55rem;
}

.coachie-ai-result-card h4 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.coachie-ai-result-card p {
    margin: 0;
}

.coachie-ai-result-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.coachie-ai-result-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 12rem;
    resize: vertical;
}

.coachie-ai-result-field .hint {
    margin: 0;
}

.coachie-ai-list {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.35rem;
}

.coachie-ai-meta {
    font-size: 0.78rem;
}

.coachie-ai-result-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.coachie-ai-task-suggestions-modal {
    width: min(1860px, 99vw);
    max-width: min(1860px, 99vw);
    max-height: 99vh;
    height: min(99vh, 1500px);
}

.coachie-ai-task-suggestions-meta {
    margin: 0 0 0.65rem;
}

.coachie-ai-task-suggestions-assign {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.7rem;
    margin-bottom: 0.7rem;
    background: rgba(0, 0, 0, 0.14);
    display: grid;
    gap: 0.55rem;
}

.coachie-ai-task-suggestions-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.coachie-ai-task-suggestions-field {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.coachie-ai-task-suggestions-field-wide {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .coachie-ai-task-suggestions-field-wide {
        grid-column: span 1;
    }
}

.coachie-ai-task-suggestions-field input,
.coachie-ai-task-suggestions-field select,
.coachie-ai-task-suggestions-field textarea {
    width: 100%;
    box-sizing: border-box;
}

.coachie-ai-task-suggestions-target-info {
    margin: 0;
    font-size: 0.82rem;
}

.coachie-ai-task-suggestions-new-goal-form {
    display: grid;
    gap: 0.55rem;
}

.coachie-ai-task-suggestions-table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.45rem;
}

.coachie-anamnesis-table-wrap.coachie-ai-task-suggestions-table-wrap {
    max-height: min(80vh, 960px);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
}

.coachie-anamnesis-table.coachie-ai-task-suggestions-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.coachie-ai-task-suggestions-table th:nth-child(1),
.coachie-ai-task-suggestions-table td:nth-child(1) {
    min-width: 0;
    width: 30%;
}

.coachie-ai-task-suggestions-table th:nth-child(2),
.coachie-ai-task-suggestions-table td:nth-child(2) {
    min-width: 0;
    width: 58%;
}

.coachie-ai-task-suggestions-table th:nth-child(3),
.coachie-ai-task-suggestions-table td:nth-child(3) {
    min-width: 0;
    width: 12%;
}

.coachie-ai-article-suggestions-table th:nth-child(1),
.coachie-ai-article-suggestions-table td:nth-child(1) {
    width: 20%;
}

.coachie-ai-article-suggestions-table th:nth-child(2),
.coachie-ai-article-suggestions-table td:nth-child(2) {
    width: 25%;
}

.coachie-ai-article-suggestions-table th:nth-child(3),
.coachie-ai-article-suggestions-table td:nth-child(3) {
    width: 45%;
}

.coachie-ai-article-suggestions-table th:nth-child(4),
.coachie-ai-article-suggestions-table td:nth-child(4) {
    width: 10%;
}

.coachie-ai-task-suggestions-table th,
.coachie-ai-task-suggestions-table td {
    padding: 0.8rem 0.9rem;
    line-height: 1.5;
    vertical-align: top;
}

.coachie-ai-task-suggestions-table td:nth-child(1),
.coachie-ai-task-suggestions-table td:nth-child(2) {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.coachie-ai-task-suggestions-table input,
.coachie-ai-task-suggestions-table textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.45rem;
}

.coachie-ai-task-suggestions-table textarea {
    min-height: 5.6rem;
    resize: vertical;
}

.coachie-ai-article-suggestions-table td:nth-child(3) textarea {
    min-height: 7.2rem;
}

.coachie-anamnesis-section {
    margin-top: 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.6rem 0.7rem;
    background: rgba(251, 248, 245, 0.9);
    display: grid;
    gap: 0.6rem;
}

.coachie-anamnesis-table-wrap {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: auto;
    max-height: 17rem;
}

.coachie-anamnesis-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 520px;
}

.coachie-anamnesis-table th,
.coachie-anamnesis-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    font-size: 0.84rem;
}

.coachie-anamnesis-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--table-head);
    color: var(--text-muted);
    font-weight: 700;
}

.coachie-anamnesis-row {
    cursor: pointer;
}

.coachie-anamnesis-row:hover,
.coachie-anamnesis-row:focus-visible {
    background: rgba(198, 214, 215, 0.22);
    outline: none;
}

.coachie-anamnesis-modal {
    width: min(1040px, 95vw);
    max-width: min(1040px, 95vw);
    max-height: 92vh;
}

.coachie-anamnesis-modal-meta {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.coachie-anamnesis-modal-note {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.14);
    max-height: min(64vh, 700px);
    overflow: auto;
}

.coachie-goal-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.coachie-goal-item {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

.coachie-goal-head-row {
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
}

.coachie-goal-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.45rem;
}

.coachie-goal-select input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent);
}

.coachie-goal-head {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 0.5rem 0.55rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem 0.75rem;
    align-items: center;
    color: inherit;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.coachie-goal-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.coachie-goal-title strong {
    font-size: 0.84rem;
}

.coachie-goal-head span:last-child {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.coachie-goal-task-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0 0.55rem 0.55rem 1.65rem;
}

.coachie-goal-task-list .muted {
    margin: 0;
    font-size: 0.78rem;
}

.coachie-goal-task {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.7rem;
    align-items: start;
}

.coachie-goal-task strong {
    font-size: 0.82rem;
}

.coachie-goal-task span {
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.coachie-goal-task-rating {
    grid-column: 1 / -1;
    justify-self: end;
}

.coachie-ungrouped-tasks {
    margin-top: 0.55rem;
}

.coachie-ungrouped-tasks h6 {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.coachie-phase-item {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem 0.75rem;
    align-items: start;
}

.coachie-phase-item strong {
    font-size: 0.84rem;
}

.coachie-phase-item span {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.coachie-phase-item-diary p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.coachie-phase-item-article p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.coachie-story-text {
    font-size: 0.95rem;
    line-height: 1.6;
}

.coachie-reflections-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.coachie-reflection-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem;
}

.coachie-reflection-item h4 {
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.coachie-reflection-question {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.coach-request-insights-modal {
    max-width: 760px;
}

.coach-request-insights {
    display: grid;
    gap: 1rem;
}

.coach-request-insights-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.coach-request-insights-head h3 {
    margin: 0 0 0.2rem;
}

.coach-request-insights-head .muted {
    margin: 0;
}

.coach-request-insights-section h3 {
    margin-bottom: 0.7rem;
}

.coach-request-actions {
    margin-top: 0.35rem;
    display: grid;
    gap: 0.55rem;
}

.coach-request-main-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.coach-request-actions .small {
    width: 100%;
    justify-content: center;
}

.coach-request-insights-btn {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.coach-request-insights-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.coach-request-decline-btn {
    color: var(--danger);
    border-color: rgba(255, 107, 107, 0.35);
    background: rgba(255, 107, 107, 0.08);
}

.coach-request-decline-btn:hover {
    border-color: rgba(255, 107, 107, 0.55);
    background: rgba(255, 107, 107, 0.14);
}

.coachie-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.coachie-status-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.coachie-status-item span {
    font-size: 0.83rem;
    color: var(--text-secondary);
}

.coachie-open-tasks {
    margin-top: 0.85rem;
}

.coachie-open-tasks h4 {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.coachie-open-task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.coachie-open-task-item:last-child {
    border-bottom: none;
}

.coachie-open-task-item p {
    margin: 0.2rem 0 0 0;
}

.coachie-open-task-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.coachie-diary-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.coachie-diary-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.8rem;
}

.coachie-diary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.coachie-diary-head span {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.coachie-diary-item p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.coachie-articles-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.coachie-article-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.coachie-article-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.coachie-article-item strong {
    font-size: 0.9rem;
}

.coachie-article-item span {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.homework-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: var(--transition);
}

.homework-card:hover {
    border-color: var(--primary);
}

.homework-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.homework-header h4 {
    margin: 0;
    font-size: 0.95rem;
}

.priority-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.priority-high {
    background: var(--danger);
}

.priority-medium {
    background: var(--warning);
}

.priority-low {
    background: var(--success);
}

.due-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.homework-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.homework-actions select {
    width: auto;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

.empty-column {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.coachie-task-overview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: none;
}

.coachie-task-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

.coachie-task-columns.single {
    grid-template-columns: 1fr;
}

.coachie-task-columns.single .coachie-task-column {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
}

.coachie-task-toolbar {
    display: flex;
    justify-content: flex-end;
}

.coachie-task-column {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
}

.coachie-task-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.coachie-task-column-head h2 {
    margin: 0;
    font-size: 0.98rem;
}

.coachie-task-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), min(100%, 320px)));
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.75rem;
}

.coachie-task-card {
    width: 100%;
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.coachie-task-card.is-rejected {
    border-color: rgba(255, 107, 107, 0.5);
    background: rgba(255, 107, 107, 0.08);
}

.coachie-task-state-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.coachie-task-state-pill.is-done {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
}

.coachie-task-state-pill.is-rejected {
    color: #b42318;
    background: rgba(255, 107, 107, 0.16);
    border: 1px solid rgba(255, 107, 107, 0.45);
}

.coachie-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    align-items: center;
}

.coachie-task-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.coachie-task-primary-action {
    min-width: 108px;
    font-weight: 700;
}

.coachie-task-details-action {
    min-width: 88px;
}

.coachie-task-actions .ghost.small.danger,
.modal-actions .ghost.small.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    font-weight: 700;
}

.coachie-task-actions .ghost.small.danger:hover,
.modal-actions .ghost.small.danger:hover {
    filter: brightness(0.92);
}

.task-rating-inline {
    color: #ffd166;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    font-weight: 700;
}

.task-rating-block {
    margin-top: 0.35rem;
}

.task-rating-label {
    margin: 0 0 0.45rem;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
}

.task-rating-stars {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.task-rating-star-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.task-rating-star-btn:hover {
    border-color: #ffd166;
    color: #ffd166;
}

.task-rating-star-btn.active {
    background: rgba(255, 209, 102, 0.2);
    border-color: #ffd166;
    color: #ffd166;
}

/* ===== GOALS ===== */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.tab {
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
    transform: translateY(-1px);
    border-color: var(--text-muted);
}

.tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-app);
    /* Dark text for contrast */
    font-weight: 700;
    box-shadow: 0 4px 12px var(--primary-muted);
    transform: translateY(-1px);
}

.tab.active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.goals-container {
    margin-top: 1rem;
}

.goals-coach-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.goals-coach-toolbar label {
    margin: 0;
    max-width: 340px;
}

.goals-coach-groups {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.goals-coach-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.goals-group-toggle,
.goals-phase-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.goals-group-toggle:hover,
.goals-phase-toggle:hover {
    background: var(--bg-card-hover);
}

.goals-group-toggle {
    font-weight: 700;
    font-size: 1.08rem;
}

.goals-group-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
}

.goals-coach-phases {
    border-top: 1px solid var(--border-subtle);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.goals-coach-phase {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.goals-phase-toggle {
    font-size: 0.92rem;
    font-weight: 600;
}

.goals-coach-phase .goals-grid {
    padding: 0 0.8rem 0.8rem;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.goal-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.goal-card.suggested {
    border-color: var(--accent-orange);
    border-style: dashed;
}

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.goal-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.goal-owner {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.goal-category-badge {
    background: var(--primary-muted);
    color: var(--primary);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.goal-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.goal-measurable {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.goal-progress-section {
    margin: 1rem 0;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.progress-bar-container {
    background: var(--bg-elevated);
    height: 8px;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar-fill {
    background: var(--primary);
    height: 100%;
    transition: width 0.4s ease;
}

.progress-slider {
    width: 100%;
    accent-color: var(--primary);
}

.goal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.goal-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.goal-meta-item.success {
    color: var(--success);
}

.goal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* ===== PROFILE ===== */
.profile-view {
    max-width: none;
    margin: 0;
    width: 100%;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

.profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.avatar {
    width: 80px;
    height: 80px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.profile-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.stat {
    text-align: center;
}

.story-card,
.reflections-card,
.coaches-card,
.anamnesis-card,
.settings-card {
    padding: 1.5rem;
}

.story-text {
    font-style: italic;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.story-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.coach-profile-section-header {
    gap: 0.75rem;
}

.coach-profile-section-title-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.coach-profile-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.coach-profile-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.coach-invitation-code-wrap {
    display: grid;
    gap: 0.55rem;
}

.coach-invitation-code {
    display: inline-block;
    width: fit-content;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.18em;
}

.password-change-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 520px;
}

.coach-ai-prompts-card {
    display: grid;
    gap: 0.7rem;
}

.coach-ai-prompts-row {
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.coach-ai-prompts-label {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.coach-ai-prompts-label textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.coach-ai-prompts-defaults {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 0.6rem 0.75rem;
}

.coach-ai-prompts-defaults summary {
    cursor: pointer;
    font-weight: 700;
}

.coach-ai-prompts-defaults-grid {
    margin-top: 0.65rem;
    display: grid;
    gap: 0.65rem;
}

.onboarding-answers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.answer-item {
    background: var(--bg-elevated);
    padding: 1rem;
    border-radius: var(--radius-md);
}

.answer-item .question {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.answer-item .answer {
    color: var(--text-main);
    margin: 0;
}

.coaches-list {
    list-style: none;
}

.coach-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.coach-avatar {
    width: 48px;
    height: 48px;
    background: var(--primary-muted);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.coach-info {
    flex: 1;
}

.coach-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.skill-badge {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.dot {
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    transform: translateX(-4px);
}

.dot.ai {
    background: var(--accent-green);
}

.timeline-content {
    background: var(--bg-elevated);
    padding: 1rem;
    border-radius: var(--radius-md);
}

.timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.skill-tag {
    background: var(--primary-muted);
    color: var(--primary);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

.source-badge {
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
}

.source-badge.ai {
    background: var(--msg-success-bg);
    color: var(--accent-green);
}

.source-badge.manual {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.date {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.5rem;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.notification-setting {
    padding-left: 2rem;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.active {
    background: var(--msg-success-bg);
    color: var(--success);
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    background: #B8C9C8;
    border-radius: 13px;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-switch:has(input:checked) {
    background: var(--primary);
}

.toggle-switch:has(input:checked)::after {
    transform: translateX(22px);
}

.daily-mood-toggle-group {
    display: grid;
    gap: 0.5rem;
}

.daily-mood-toggle-group .muted {
    margin: 0;
}

.daily-mood-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

/* ===== ADMIN ===== */
.admin-view {
    max-width: none;
    margin: 0;
    width: 100%;
}

.admin-section-header {
    margin-bottom: 0;
}

.admin-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.admin-section-body {
    margin-top: 1rem;
}

.admin-user-access .setting-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: start;
}

.admin-user-access .setting-item > div {
    display: grid;
    gap: 0.35rem;
}

.admin-user-access .setting-item .muted {
    margin: 0;
}

.admin-user-access .toggle-switch {
    margin-top: 0.25rem;
}

.settings-list.admin-user-access + .settings-list.admin-user-access {
    margin-top: 1rem;
}

.admin-time-window-row {
    align-items: stretch;
}

.admin-time-window-field {
    flex: 1 1 260px;
    margin-bottom: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 0.7rem 0.75rem;
}

.admin-time-window-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.admin-time-window-input {
    margin-top: 0.5rem;
}

.admin-ai-prompts-row {
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
}

.admin-ai-prompts-label {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.admin-ai-prompts-label textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-jobs-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr);
}

.admin-jobs-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    background: var(--bg-elevated);
}

.admin-jobs-list {
    display: grid;
    gap: 0.65rem;
}

.admin-jobs-item {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    padding: 0.55rem;
    display: grid;
    gap: 0.45rem;
}

.admin-jobs-item.active {
    border-color: var(--primary);
}

.admin-jobs-item-main {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    display: grid;
    gap: 0.2rem;
}

.admin-jobs-runs {
    margin-top: 1rem;
}

.admin-jobs-runs-list {
    display: grid;
    gap: 0.4rem;
}

.admin-jobs-run-item {
    display: grid;
    gap: 0.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    padding: 0.55rem 0.65rem;
}

.admin-jobs-run-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.admin-jobs-run-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.admin-jobs-run-auto-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.admin-jobs-run-auto-item {
    display: grid;
    gap: 0.08rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: 0.35rem 0.45rem;
}

.admin-jobs-run-btn.is-running {
    position: relative;
    padding-left: 1.9rem;
    animation: adminJobRunBtnPulse 1s ease-in-out infinite;
}

.admin-jobs-run-btn.is-running::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.4rem;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: adminJobRunBtnSpinner 0.75s linear infinite;
}

@keyframes adminJobRunBtnSpinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes adminJobRunBtnPulse {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1);
    }
}

input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.75;
    cursor: pointer;
    filter: invert(76%) sepia(36%) saturate(1040%) hue-rotate(338deg) brightness(103%) contrast(101%);
}

input[type="time"]::-webkit-datetime-edit {
    color: var(--text-main);
}

.admin-users-table {
    width: 100%;
    overflow-x: auto;
}

.filters-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filters-row select,
.filters-row input {
    width: auto;
    min-width: 180px;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.users-table th,
.users-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.users-table th {
    background: var(--table-head);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-table tr:hover td {
    background: var(--bg-card-hover);
}

.role-badge {
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.role-badge.admin {
    background: rgba(255, 107, 107, 0.15);
    color: var(--danger);
}

.role-badge.coach {
    background: rgba(124, 140, 248, 0.15);
    color: var(--primary);
}

.role-badge.coachie {
    background: rgba(78, 205, 196, 0.15);
    color: var(--success);
}

.avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-card);
}

.coach-avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    background: var(--bg-card);
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--primary);
    cursor: pointer;
}

.upload-btn input {
    display: none;
}

.stats-cell {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.date-cell {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-registration-card {
    margin-bottom: 1.25rem;
}

.registration-table .consent-cell {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.registration-detail-row td {
    background: rgba(255, 255, 255, 0.02);
}

.registration-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem 1rem;
}

.registration-detail p {
    margin-bottom: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.status-pill.registration-status.pending {
    color: var(--warning);
    background: rgba(255, 209, 102, 0.12);
}

.status-pill.registration-status.approved {
    color: var(--success);
    background: rgba(78, 205, 196, 0.18);
}

.status-pill.registration-status.rejected {
    color: var(--danger);
    background: rgba(255, 107, 107, 0.15);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.admin-stats-grid .stat {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pagination-info {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pagination-controls {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 1100px) {
    .admin-jobs-layout {
        grid-template-columns: 1fr;
    }
}

/* KPI Tiles */
/* KPI Tiles */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.kpi-tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    /* Ensure content stays inside */
}

.kpi-icon {
    opacity: 0.8;
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

.kpi-icon .icon {
    width: 2rem;
    height: 2rem;
}

.kpi-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Enable flex child truncation */
    flex: 1;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-tile.accent .kpi-value {
    color: var(--primary);
}

.kpi-tile.success .kpi-value {
    color: var(--success);
}

.kpi-tile.warning .kpi-value {
    color: var(--warning);
}

.kpi-tile.danger .kpi-value {
    color: var(--danger);
}

.chart-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.chart-card h3 {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

/* Fixed size charts */
.bar-chart {
    height: 300px;
    /* Fixed height for bar chart */
    width: 100%;
    margin-top: auto;
}

.horizontal-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 300px;
    /* Fixed max height */
    overflow-y: auto;
    /* Scrollable if too many users */
    padding-right: 0.5rem;
    /* Space for scrollbar */
}

.status-chart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    width: 100%;
    font-size: 0.9rem;
    color: var(--text-main);
    text-align: center;
}

.bar-track {
    flex: 1;
    height: 24px;
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    color: white;
    font-weight: 600;
    min-width: 30px;
}

/* Pie Chart */
.pie-chart-card {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    /* Ensure visual consistency with other cards */
}

.pie-chart-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    flex: 1;
    /* Take remaining space */
}

.pie-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Prevent squishing */
}

.pie-center {
    width: 100px;
    height: 100px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.pie-total {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-main);
}

.pie-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Vertical Bar Chart Styles */
.chart-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    justify-content: flex-end;
    flex: 1;
}

.bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.bar {
    width: 14px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: height 0.3s ease;
    min-height: 4px;
    position: relative;
}

.admin-trend-card .bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
    height: 320px;
    margin-top: 0;
}

.admin-trend-card {
    grid-column: 1 / -1;
}

.admin-trend-card .chart-legend {
    margin-bottom: 0;
    flex-wrap: wrap;
}

.admin-trend-card .chart-container {
    flex: 1;
    height: auto;
    min-width: 760px;
    display: grid;
    grid-template-columns: repeat(14, minmax(40px, 1fr));
    gap: 0.45rem;
    align-items: stretch;
    justify-items: stretch;
    padding-bottom: 0;
}

.admin-trend-card .bar-group {
    min-width: 0;
    height: 100%;
    justify-content: flex-end;
}

.admin-trend-card .bars {
    gap: 3px;
    height: calc(100% - 1.5rem);
}

.admin-trend-card .bar {
    width: 10px;
    min-height: 0;
}

.admin-trend-card .bar-label {
    min-height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-trend-card .bar-label .day {
    font-size: 0.74rem;
    line-height: 1.1;
}

.admin-trend-card .bar-label .date {
    display: none;
}

.bar:hover {
    opacity: 0.8;
}

.bar.diary {
    background-color: #B8C9C8;
}

.bar.homework {
    background-color: #6F8C87;
}

.bar.done {
    background-color: #C7B06B;
}

.chart-legend {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.diary {
    background-color: #B8C9C8;
}

.legend-color.homework {
    background-color: #6F8C87;
}

.legend-color.done {
    background-color: #C7B06B;
}

/* Horizontal Bar Styles (User Activity) */
.h-bar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.h-bar-label {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.h-bar-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.h-bar-container {
    flex: 1;
    height: 24px;
    background: var(--bg-elevated);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.h-bar {
    height: 100%;
    position: absolute;
    top: 0;
}

.h-bar.diary {
    background-color: #B8C9C8;
    z-index: 1;
}

.h-bar.homework {
    background-color: #6F8C87;
    z-index: 2;
    /* Overlap or stack? Logic in JS suggests stacking from left? */
    /* JS logic: left: ${diaryWidth}% */
}

.h-bar-value {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-muted);
    z-index: 3;
}

/* Status Chart Lines */
.status-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.status-bar-container {
    height: 24px;
    background: var(--bg-elevated);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.status-bar {
    height: 100%;
    background-color: var(--primary);
}

.status-bar.status-todo {
    background-color: var(--text-muted);
}

.status-bar.status-in_progress {
    background-color: var(--warning);
}

.status-bar.status-done {
    background-color: var(--success);
}

.status-bar.status-skipped {
    background-color: #C6D6D7;
}

.status-bar.status-warning {
    background-color: var(--warning);
}

.status-bar.status-risk {
    background-color: var(--danger);
}

.charts-grid.admin-ops-grid {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
}

.admin-activity-table-wrap {
    overflow-x: auto;
}

.admin-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-activity-table th,
.admin-activity-table td {
    padding: 0.65rem 0.55rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.admin-activity-table th {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-watchlist {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.admin-watchlist-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.8rem;
    background: var(--bg-card);
}

.admin-watchlist-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.admin-watchlist-main strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-watchlist-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

.admin-risk-hint {
    margin-top: 0.75rem;
}


/* Notification System */
.nav-notifications-container {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-btn {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--danger);
    color: white;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-card);
    /* Cutout effect */
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 320px;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(95, 126, 121, 0.16);
    z-index: 1000;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.notification-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h3 {
    margin: 0;
    font-size: 1rem;
}

.notification-grid {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.5rem;
    gap: 0.5rem;
}

.notification-tile {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    align-items: flex-start;
}

.notification-tile:hover {
    background-color: var(--bg-card-hover);
}

.notif-icon {
    font-size: 1.2rem;
    background: var(--bg-input);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.notif-message {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-time {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    text-align: right;
}

/* Settings List in Profile */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--bg-card);
    border-radius: 8px;
    cursor: pointer;
}

.setting-row:hover {
    background-color: var(--bg-card-hover);
}

/* Chart Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: stretch;
}

/* Erledigt */

.status-value {
    margin-left: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-main);
    position: absolute;
    /* If inside bar? or outside? */
    left: 4px;
    /* Mix-blend-mode difference? Or just color text main if empty? */
    /* Let's keep it simple: text-main */
    z-index: 2;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.pie-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.success {
    background: var(--success);
}

.legend-dot.warning {
    background: var(--warning);
}

.legend-dot.muted {
    background: var(--text-muted);
}

.legend-dot.skipped {
    background: #d1d5db;
}

/* Article Tiles */
.article-tile {
    cursor: pointer;
    transition: var(--transition);
}

.article-tile:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.article-tile.article-read {
    opacity: 0.7;
    filter: grayscale(0.2);
}

.article-tile.article-tile-static {
    cursor: default;
}

.article-tile.article-tile-static:hover {
    transform: none;
}

.article-tile .tile-header {
    justify-content: flex-start;
}

.article-tile .fav-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
}

.article-tile .fav-btn:hover,
.article-tile .fav-btn.active {
    color: #ffd166;
}

.article-detail {
    max-width: none;
    margin: 0;
    width: 100%;
}

.article-detail .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4E5A5A;
    background: rgba(251, 248, 245, 0.95);
    border: 1px solid #E2D7CF;
    border-radius: 999px;
    padding: 0.56rem 1.1rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 1px rgba(184, 201, 200, 0.32);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.article-detail .back-btn:hover {
    color: #2B3232;
    border-color: #B8C9C8;
    background: #FFFFFF;
    transform: translateY(-1px);
}

.article-detail .back-btn .inline-icon {
    margin-right: 0;
}

.article-detail .back-btn .icon {
    width: 1rem;
    height: 1rem;
}

.full-article {
    background: var(--dialog-bg);
    border: 1px solid #E2D7CF;
    border-radius: 28px;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(111, 140, 135, 0.14);
}

.article-hero {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
}

.article-detail .article-reading-chip-wrap {
    display: flex;
    justify-content: center;
    padding: 0.7rem 0;
    margin-bottom: 1rem;
    border-top: 1px solid #E2D7CF;
    border-bottom: 1px solid #E2D7CF;
}

.article-detail .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.article-detail .article-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    background: rgba(198, 214, 215, 0.28);
    border: 1px solid #B8C9C8;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.article-detail .article-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.article-detail .article-title {
    font-family: var(--font-main);
    font-size: clamp(2rem, 3vw, 2.7rem);
    margin: 1.2rem 0 0.8rem;
}

.article-detail .article-summary {
    font-size: 1.05rem;
    color: var(--text-secondary);
}

.article-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-main);
}

.article-detail .detail-fav-btn {
    background: var(--primary);
    border: none;
    border-radius: var(--radius-full);
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.article-detail .detail-fav-btn:hover {
    background: var(--primary-hover);
    color: #fff;
}

.article-detail .detail-fav-btn.active {
    background: #EBB783;
    color: #2B3232;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.article-admin-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.knowledge-coach-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.knowledge-coach-toolbar label {
    margin: 0;
    max-width: 340px;
}

.knowledge-coach-groups {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.knowledge-coach-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.template-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-group-header .knowledge-group-toggle,
.template-group-header .knowledge-phase-toggle {
    flex: 1 1 auto;
}

.template-plus-btn {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.template-plus-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.template-plus-btn .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.template-phase-plus-btn {
    margin-right: 15px;
}

.template-goal-group {
    margin: 0.25rem 0;
}

.template-goal-header {
    padding-right: 0.5rem;
}

.template-goal-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.template-assignment-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
}

.template-assignment-badge.manuell {
    background: rgba(111, 140, 135, 0.2);
    border-color: rgba(111, 140, 135, 0.45);
    color: #486660;
}

.template-assignment-badge.automatisch {
    background: rgba(206, 147, 92, 0.2);
    border-color: rgba(206, 147, 92, 0.45);
    color: #9a5f2f;
}

.template-goal-btn {
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}

.template-goal-btn:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.template-goal-btn .icon {
    width: 0.92rem;
    height: 0.92rem;
}

.template-goal-btn.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.template-goal-btn.danger:hover {
    filter: brightness(0.92);
}

.template-goal-body {
    padding: 0 0.4rem 0.65rem;
}

.template-goal-meta {
    padding: 0.35rem 0.55rem 0.6rem;
}

.template-goal-details {
    margin-bottom: 0.5rem;
}

.template-goal-details .tile-description {
    margin-bottom: 0.35rem;
}

.template-goal-details .muted {
    margin: 0;
}

.template-goal-category-row {
    padding-bottom: 0.45rem;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-subtle);
}

.knowledge-coach-phases {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.5rem;
}

.knowledge-group-toggle,
.knowledge-phase-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.knowledge-group-toggle:hover,
.knowledge-phase-toggle:hover {
    background: var(--bg-card-hover);
}

.knowledge-group-toggle {
    font-weight: 700;
    font-size: 1.02rem;
}

.knowledge-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
}

.knowledge-coach-phase {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.knowledge-phase-toggle {
    font-size: 0.92rem;
    font-weight: 600;
}

.knowledge-coach-grid {
    padding: 0 0.8rem 0.85rem;
}

.article-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-content.article-modal {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: 720px;
}

.article-form.full-article {
    padding: 2.25rem;
}

.article-form.full-article .modal-actions {
    margin-top: 2rem;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

/* ===== DIARY ===== */
/* ===== DIARY FILTERS & SEARCH ===== */
.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
    background: var(--bg-elevated);
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Search Input Styling */
.search-input {
    flex: 1 1 250px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.6rem 1.2rem;
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: 0.95rem;
    transition: var(--transition);
    /* Remove default appearance quirks */
    -webkit-appearance: none;
    appearance: none;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-muted);
    background: var(--bg-input);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Mood Filter Container */
.mood-emoji {
    display: inline-block;
    width: 1.65rem;
    height: 1.65rem;
    color: currentColor;
    stroke-width: 2.2;
}

.mood-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 2 1 auto;
}

/* Filter Buttons (Chips/Pills) */
.mood-filter button {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    min-width: 44px;
    height: 44px;
    letter-spacing: 0.08em;
}

.mood-filter button .icon {
    width: 1rem;
    height: 1rem;
}

.mood-filter button .mood-emoji {
    width: 1.7rem;
    height: 1.7rem;
}

/* Hover State */
.mood-filter button:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Active State */
.mood-filter button.active {
    background: var(--primary);
    color: var(--bg-app);
    /* Contrast: Dark text on Amber background */
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--primary-muted);
    font-weight: 700;
    transform: translateY(-1px);
}

/* Active State Hover */
.mood-filter button.active:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--primary-muted);
}

/* ===== CHIPS ===== */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.chip:hover {
    border-color: var(--primary);
    color: var(--text-main);
}

.chip.active {
    background: var(--primary-muted);
    border-color: var(--primary);
    color: var(--primary);
}

/* Group Filter (Same style as Mood Filter) */
.group-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 2 1 auto;
}

.group-filter button {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    /* Slightly smaller for longer text */
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    height: 40px;
}

.group-filter button:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
    border-color: var(--text-muted);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.group-filter button.active {
    background: var(--primary);
    color: var(--bg-app);
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--primary-muted);
    font-weight: 700;
    transform: translateY(-1px);
}

.group-filter button.active:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--primary-muted);
}

.mood-filter button.active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
}

/* Mood Picker (Add/Edit Diary) */
.mood-picker {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mood-picker button {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.mood-picker button .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.mood-picker button .mood-emoji {
    width: 2.05rem;
    height: 2.05rem;
}

.mood-picker button:hover {
    background: var(--bg-elevated);
    transform: translateY(-2px);
    border-color: var(--text-muted);
}

.mood-picker button.selected {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--primary-muted);
    transform: scale(1.1);
}

.diary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.admin-diary-section {
    padding: 0.9rem 1rem 1rem;
}

.admin-diary-table-wrap {
    width: 100%;
}

.admin-diary-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin-diary-table th,
.admin-diary-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.55rem;
    font-size: 0.85rem;
    vertical-align: top;
}

.admin-diary-table th {
    text-align: left;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--text-muted);
}

.admin-diary-table td:nth-child(1) {
    width: 72px;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-diary-col-title {
    width: 220px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-diary-col-content {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.admin-diary-col-tags {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-diary-user-row td {
    background: var(--bg-card-hover);
    border-bottom-color: var(--border);
    padding-top: 0.6rem;
    padding-bottom: 0.45rem;
}

.admin-diary-user-row strong {
    margin-right: 0.5rem;
}

.admin-diary-date-row td {
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-diary-pagination {
    margin-top: 0.8rem;
}

.admin-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.8rem;
}

.admin-table-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.admin-table-toolbar select {
    min-width: 220px;
    max-width: 320px;
}

.admin-homework-section,
.admin-knowledge-section,
.admin-goals-section {
    padding: 0.9rem 1rem 1rem;
}

.admin-homework-view .view-header {
    margin-bottom: 1rem;
}

.admin-homework-view .admin-table-toolbar {
    margin-bottom: 0.55rem;
}

.admin-homework-view .admin-homework-section {
    margin-bottom: 0;
}

.admin-homework-table-wrap,
.admin-knowledge-table-wrap,
.admin-goals-table-wrap {
    width: 100%;
}

.admin-homework-table,
.admin-knowledge-table,
.admin-goals-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin-homework-table th,
.admin-homework-table td,
.admin-knowledge-table th,
.admin-knowledge-table td,
.admin-goals-table th,
.admin-goals-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.55rem;
    font-size: 0.85rem;
    vertical-align: top;
}

.admin-homework-table th,
.admin-knowledge-table th,
.admin-goals-table th {
    text-align: left;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--text-muted);
}

.admin-homework-table td:nth-child(1),
.admin-knowledge-table td:nth-child(1) {
    width: 72px;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-homework-col-title,
.admin-knowledge-col-title,
.admin-goals-col-title {
    width: 220px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-homework-col-description,
.admin-knowledge-col-summary {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.admin-knowledge-col-tags {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-homework-col-actions,
.admin-knowledge-col-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.admin-homework-user-row td,
.admin-knowledge-user-row td {
    background: var(--bg-card-hover);
    border-bottom-color: var(--border);
    padding-top: 0.6rem;
    padding-bottom: 0.45rem;
}

.admin-homework-user-row strong,
.admin-knowledge-user-row strong {
    margin-right: 0.5rem;
}

.admin-goals-coach-row td {
    background: var(--bg-card-hover);
    border-bottom-color: var(--border);
    padding-top: 0.6rem;
    padding-bottom: 0.45rem;
}

.admin-goals-coach-row strong {
    margin-right: 0.5rem;
}

.admin-homework-date-row td,
.admin-knowledge-date-row td {
    background: var(--bg-input);
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-homework-pagination,
.admin-knowledge-pagination,
.admin-goals-pagination {
    margin-top: 0.8rem;
}

.diary-tree {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.diary-tree-group {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.diary-tree-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.diary-tree-toggle:hover {
    background: var(--bg-card-hover);
}

.diary-tree-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
}

.diary-tree-toggle-year {
    font-weight: 600;
    font-size: 0.98rem;
}

.diary-tree-toggle-month {
    font-weight: 600;
    font-size: 0.98rem;
}

.diary-tree-toggle-day {
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.diary-tree-children {
    border-top: 1px solid var(--border-subtle);
}

.diary-tree-months,
.diary-tree-days {
    display: flex;
    flex-direction: column;
}

.diary-tree-months {
    padding: 0.35rem 0.35rem 0.45rem;
    gap: 0.5rem;
}

.diary-tree-days {
    padding: 0.25rem 0.35rem 0.45rem 1rem;
    gap: 0.45rem;
}

.diary-tree-group-month,
.diary-tree-group-day {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}

.diary-day-entries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.85rem;
    padding: 0.25rem 0.6rem 0.7rem 2rem;
}

.diary-tree-entry {
    border-color: var(--border-subtle);
    padding: 1rem;
}

.diary-tree-entry .tile-header {
    margin-bottom: 0.65rem;
}

.diary-tree-entry .tile-title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.diary-tree-entry .tile-description {
    font-size: 0.86rem;
    margin-bottom: 0.6rem;
}

.diary-tree-entry .tile-icon.mood-large {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin-left: 15px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.diary-tree-entry .tile-icon.mood-large .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.diary-tree-entry .tile-icon.mood-large .mood-emoji {
    width: 1.85rem;
    height: 1.85rem;
}

.diary-tree-entry .tile-icon.mood-large .task-rating-inline {
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    line-height: 1;
}

.diary-tree-entry .tile-badge {
    font-size: 0.74rem;
    padding: 0.24rem 0.58rem;
}

.diary-tree-entry .diary-tags {
    gap: 0.4rem;
    margin: 0.55rem 0;
}

.diary-tree-entry .tag {
    font-size: 0.74rem;
    padding: 0.16rem 0.5rem;
}

.diary-tile {
    display: flex;
    flex-direction: column;
}

.diary-tile .tile-icon.mood-large {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin-left: 15px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.diary-tile .tile-icon.mood-large .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.diary-tile .tile-icon.mood-large .mood-emoji {
    width: 2.05rem;
    height: 2.05rem;
}

.diary-tile .tile-icon.mood-large .task-rating-inline {
    font-size: 1rem;
    letter-spacing: 0.08em;
    line-height: 1;
}

.diary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.diary-voice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.55rem;
}

.diary-tts-actions {
    margin-top: 0.2rem;
    margin-bottom: 0.45rem;
}

.diary-voice-actions .ghost.small.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    font-weight: 700;
}

.diary-voice-actions .ghost.small.danger:hover {
    filter: brightness(0.92);
}

.coach-notes-detail-actions .ghost.small.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    font-weight: 700;
}

.coach-notes-detail-actions .ghost.small.danger:hover {
    filter: brightness(0.92);
}

.diary-voice-actions .ghost.small.recording-pulse {
    animation: diary-recording-pulse 1.25s ease-in-out infinite;
}

.coach-notes-detail-actions .ghost.small.recording-pulse {
    animation: diary-recording-pulse 1.25s ease-in-out infinite;
}

@keyframes diary-recording-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent);
        transform: scale(1);
    }
    70% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--danger) 0%, transparent);
        transform: scale(1.03);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent);
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .diary-voice-actions .ghost.small.recording-pulse {
        animation: none;
    }

    .coach-notes-detail-actions .ghost.small.recording-pulse {
        animation: none;
    }
}

.diary-voice-status {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.diary-voice-status.recording {
    color: var(--danger);
    font-weight: 700;
}

.login-daily-diary-modal {
    max-width: 640px;
}

.login-daily-diary-prompt {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.diary-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.diary-actions .ghost.small:not(.danger) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-app);
    font-weight: 700;
}

.diary-actions .ghost.small:not(.danger):hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.diary-actions .ghost.small.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.homework-template-actions .ghost.small:not(.danger) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-app);
    font-weight: 700;
}

.homework-template-actions {
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.homework-template-actions .ghost.small:not(.danger):hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.homework-template-actions .ghost.small.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.homework-template-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: none;
}

.homework-template-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    box-shadow: none;
}

.mood-badge {
    font-size: 1.25rem;
}

.mood-badge .icon {
    width: 1.3rem;
    height: 1.3rem;
}

.mood-badge .mood-emoji {
    width: 1.75rem;
    height: 1.75rem;
}

.mood-badge .task-rating-inline {
    font-size: 1rem;
    letter-spacing: 0.08em;
}

/* Filter Chips (Knowledge) */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 2 1 auto;
}

.chip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.chip:hover {
    background: var(--bg-card-hover);
    color: var(--text-main);
    border-color: var(--text-muted);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.chip.active {
    background: var(--primary);
    color: var(--bg-app);
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--primary-muted);
    font-weight: 700;
    transform: translateY(-1px);
}

/* ===== KNOWLEDGE ===== */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.article-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: var(--transition);
    cursor: pointer;
}

.article-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.article-category {
    display: inline-block;
    background: var(--primary-muted);
    color: var(--primary);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.article-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.article-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.favorite-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.5;
    transition: var(--transition);
}

.favorite-btn:hover,
.favorite-btn.active {
    opacity: 1;
}

/* ===== NOTIFICATIONS ===== */
.notifications-container {
    max-width: none;
    margin: 0;
    width: 100%;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.notifications-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.notifications-filters button {
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notifications-filters button:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
    transform: translateY(-1px);
    border-color: var(--text-muted);
}

.notifications-filters button.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-app);
    /* Contrast */
    font-weight: 700;
    box-shadow: 0 4px 12px var(--primary-muted);
    transform: translateY(-1px);
}

.notifications-filters button.active:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition);
}

.notification-item:hover {
    background: var(--bg-card-hover);
}

.notification-item.unread {
    border-left: 3px solid var(--primary);
}

.notification-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-icon .icon,
.notification-icon .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.notification-content {
    flex: 1;
}

.notification-content h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.notification-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    display: block;
}

.notification-actions {
    display: flex;
    align-items: center;
}

.app-toast-wrap {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 2200;
    pointer-events: none;
}

.app-toast-wrap-auth-login {
    top: clamp(1rem, 18vh, 8.5rem);
    bottom: auto;
}

.app-toast {
    min-width: 260px;
    max-width: min(92vw, 560px);
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    box-shadow: 0 12px 24px rgba(95, 126, 121, 0.15);
    color: var(--text-main);
    font-size: 0.92rem;
    line-height: 1.35;
    animation: toast-enter 180ms ease-out;
}

.app-toast-success {
    background: var(--msg-success-bg);
    border-color: #B8C9C8;
}

.app-toast-info {
    background: var(--msg-info-bg);
    border-color: #B2C5C8;
}

.app-toast-warning {
    background: var(--msg-warning-bg);
    border-color: #C7B06B;
}

.app-toast-error {
    background: var(--msg-error-bg);
    border-color: #DEC9CA;
}

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

/* ===== EMPTY STATES ===== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 4rem;
    opacity: 0.5;
    margin-bottom: 1rem;
    display: block;
}

.empty-icon .icon {
    width: 3.2rem;
    height: 3.2rem;
}

.empty-state p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

body.modal-open {
    overflow: hidden;
    touch-action: none;
}

body.modal-open .main-content,
body.modal-open .nav,
body.modal-open .coach-mobile-bottom-nav {
    pointer-events: none;
}

body.modal-open.modal-allow-mobile-nav .app-coachie-mobile-nav .nav,
body.modal-open.modal-allow-mobile-nav .app-coachie-mobile-nav .coach-mobile-bottom-nav {
    pointer-events: auto;
}

body.modal-open .main-content {
    overflow: hidden !important;
}

body.modal-open .app-coach-mobile-nav,
body.modal-open .app-coachie-mobile-nav {
    overflow: hidden !important;
}

body.modal-open .modal-overlay {
    pointer-events: auto;
}

.modal-content {
    background: var(--dialog-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content.coachie-ai-task-suggestions-modal {
    width: min(1860px, 99vw);
    max-width: min(1860px, 99vw);
    max-height: 99vh;
    height: min(99vh, 1500px);
    padding: 1.1rem 1.2rem;
}

.modal-content.video-call-modal {
    width: min(1100px, 96vw);
    max-width: 1100px;
}

@media (max-width: 980px) {
    .modal-content .homework-form label,
    .modal-content .diary-form label,
    .modal-content .article-form label {
        margin-bottom: 0.54rem;
    }

    .modal-content .homework-form input[type="text"],
    .modal-content .homework-form input[type="email"],
    .modal-content .homework-form input[type="password"],
    .modal-content .homework-form input[type="number"],
    .modal-content .homework-form input[type="date"],
    .modal-content .homework-form input[type="time"],
    .modal-content .homework-form textarea,
    .modal-content .homework-form select,
    .modal-content .diary-form input[type="text"],
    .modal-content .diary-form input[type="email"],
    .modal-content .diary-form input[type="password"],
    .modal-content .diary-form input[type="number"],
    .modal-content .diary-form input[type="date"],
    .modal-content .diary-form input[type="time"],
    .modal-content .diary-form textarea,
    .modal-content .diary-form select,
    .modal-content .article-form input[type="text"],
    .modal-content .article-form input[type="email"],
    .modal-content .article-form input[type="password"],
    .modal-content .article-form input[type="number"],
    .modal-content .article-form input[type="date"],
    .modal-content .article-form input[type="time"],
    .modal-content .article-form textarea,
    .modal-content .article-form select {
        padding: 0.52rem 0.76rem;
    }

    .modal-overlay.coachie-diary-mobile-overlay {
        z-index: 1100;
        align-items: flex-start;
        top: calc(64px + env(safe-area-inset-top, 0px));
        bottom: calc(var(--coach-mobile-bottom-nav-height, 120px) + 15px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        padding: 12px 15px 0;
    }

    .modal-content.coachie-diary-mobile-modal {
        width: 100%;
        max-width: none;
        max-height: 100%;
        border-radius: 18px;
    }
}

.video-call-modal-body {
    display: grid;
    gap: 10px;
}

.video-call-embed-host {
    width: 100%;
    min-height: 62vh;
    height: 62vh;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
}

.modal-content h2,
.modal-content h3 {
    margin-bottom: 1.5rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Compact modal form rhythm for create/edit dialogs */
.modal-content .homework-form,
.modal-content .diary-form,
.modal-content .article-form {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.modal-content .homework-form label,
.modal-content .diary-form label,
.modal-content .article-form label {
    margin-bottom: 0.62rem;
    font-size: 0.86rem;
}

.modal-content .homework-form input[type="text"],
.modal-content .homework-form input[type="email"],
.modal-content .homework-form input[type="password"],
.modal-content .homework-form input[type="number"],
.modal-content .homework-form input[type="date"],
.modal-content .homework-form input[type="time"],
.modal-content .homework-form textarea,
.modal-content .homework-form select,
.modal-content .diary-form input[type="text"],
.modal-content .diary-form input[type="email"],
.modal-content .diary-form input[type="password"],
.modal-content .diary-form input[type="number"],
.modal-content .diary-form input[type="date"],
.modal-content .diary-form input[type="time"],
.modal-content .diary-form textarea,
.modal-content .diary-form select,
.modal-content .article-form input[type="text"],
.modal-content .article-form input[type="email"],
.modal-content .article-form input[type="password"],
.modal-content .article-form input[type="number"],
.modal-content .article-form input[type="date"],
.modal-content .article-form input[type="time"],
.modal-content .article-form textarea,
.modal-content .article-form select {
    padding: 0.56rem 0.8rem;
    margin-top: 0.24rem;
    font-size: 0.92rem;
}

.modal-content .homework-form .modern-date-picker,
.modal-content .diary-form .modern-date-picker,
.modal-content .article-form .modern-date-picker {
    margin-top: 0.28rem;
}

.modal-content .homework-form .modal-actions,
.modal-content .diary-form .modal-actions,
.modal-content .article-form .modal-actions {
    margin-top: 0.85rem;
    gap: 0.5rem;
}

.phase-switch-dialog-modal {
    max-width: 560px;
}

.phase-switch-dialog {
    display: grid;
    gap: 0.85rem;
}

.phase-switch-dialog p {
    margin: 0;
    color: var(--text-main);
}

.confirm-dialog-text {
    white-space: pre-line;
}

.phase-switch-dialog-actions {
    margin-top: 0.75rem;
}

.phase-move-warning-list {
    margin: 0;
    padding: 0.1rem 0 0.1rem 1.1rem;
    display: grid;
    gap: 0.35rem;
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

.phase-move-warning-list li {
    color: var(--text-main);
}

.phase-move-warning-actions {
    flex-wrap: wrap;
}

.phase-switch-dialog-actions button.danger {
    background: var(--danger);
    border: 1px solid var(--danger);
    color: #fff;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
}

.phase-switch-dialog-actions button.danger:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* ===== DASHBOARD SPECIFICS ===== */
.dashboard-view {
    max-width: none;
    margin: 0;
    width: 100%;
}

.dashboard-section {
    margin-top: 2.5rem;
}

.dashboard-section h2 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--text-main);
}

.mood-selector {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.mood-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.mood-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

.mood-btn .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.mood-btn .mood-emoji {
    width: 1.95rem;
    height: 1.95rem;
}

.task-preview-list {
    list-style: none;
    margin: 0.75rem 0;
}

.task-preview-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.task-preview-item:last-child {
    border-bottom: none;
}

.article-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.chip {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

.chip:hover {
    background: var(--primary-muted);
    color: var(--primary);
}

.fav-btn .icon {
    width: 1rem;
    height: 1rem;
}

.fav-btn.active .icon {
    fill: currentColor;
}

.tile-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

/* ===== COACHIE DASHBOARD ===== */
.coachie-dashboard {
    position: relative;
    isolation: isolate;
}

.coachie-dashboard::before {
    content: "";
    position: absolute;
    inset: -120px -80px auto;
    height: 320px;
    background: none;
    z-index: -1;
    pointer-events: none;
}

.coachie-topbar {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.coachie-topbar h1 {
    font-family: var(--font-main);
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin-bottom: 0.6rem;
}

.coachie-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

.coachie-top-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.coachie-breadcrumbs {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.coachie-breadcrumbs .dot {
    opacity: 0.5;
}

.coachie-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.5rem 0.9rem;
    min-width: 220px;
}

.coachie-search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    width: 100%;
    font-size: 0.9rem;
}

.coachie-search .search-icon {
    color: var(--text-muted);
}

.coachie-panel {
    padding: 1.5rem 1.75rem;
    border-radius: 28px;
    background: var(--bg-card);
    border: 1px solid #E2D7CF;
    box-shadow: 0 16px 32px rgba(95, 126, 121, 0.14);
    backdrop-filter: none;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.panel-head h2 {
    font-family: var(--font-main);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.panel-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.panel-tabs {
    display: inline-flex;
    gap: 0.4rem;
    background: #C6D6D7;
    border: 1px solid #B8C9C8;
    border-radius: var(--radius-full);
    padding: 0.35rem;
    margin-bottom: 1.5rem;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
}

.tab-btn.active {
    background: var(--primary);
    color: #FFFFFF;
}

.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.panel-card {
    background: #FBF8F5;
    border: 1px solid #E2D7CF;
    border-radius: 20px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 6px 16px rgba(95, 126, 121, 0.10);
    animation: cardRise 0.5s ease both;
    animation-delay: var(--delay, 0ms);
}

.panel-card:hover {
    transform: translateY(-3px);
    border-color: #B8C9C8;
}

.panel-card h3 {
    font-size: 1.05rem;
}

.panel-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #C6D6D7;
}

.card-pill {
    background: #C6D6D7;
    border: 1px solid #B8C9C8;
    color: var(--text-secondary);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.card-meta-row .icon {
    width: 0.9rem;
    height: 0.9rem;
}

.card-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: auto;
}

.module-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.coachie-section {
    margin-top: 2.5rem;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.section-head h2 {
    font-family: var(--font-main);
    font-size: 1.4rem;
    margin-bottom: 0.35rem;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.coachie-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    border: 1px dashed #B8C9C8;
    background: #FFFFFF;
}

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

/* ===== FOOTER ===== */
.footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
    body.coach-mobile-scroll-lock {
        overflow-x: hidden;
    }

    body.coach-mobile-scroll-lock #root {
        overflow-x: hidden;
    }

    .app-coach-mobile-nav,
    .app-coachie-mobile-nav {
        --coach-top-nav-height: 64px;
        --coach-mobile-bottom-nav-gap: 15px;
        --coach-side-gap: 15px;
        position: fixed;
        inset: 0;
        height: 100svh;
        height: 100dvh;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .nav-with-coach-mobile-bottom {
        padding-bottom: var(--coach-mobile-bottom-nav-gap, 15px);
    }

    .app-coach-mobile-nav .nav,
    .app-coachie-mobile-nav .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1400;
        padding: 0 var(--coach-side-gap, 15px);
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .coach-mobile-bottom-nav {
        position: fixed;
        left: var(--coach-side-gap, 15px);
        right: var(--coach-side-gap, 15px);
        bottom: calc(var(--coach-mobile-bottom-nav-gap, 0.55rem) + env(safe-area-inset-bottom, 0px));
        z-index: 1200;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        align-items: center;
        gap: 0.25rem;
        padding: 0.55rem 0.5rem;
        border-radius: 1.1rem;
        border: 1px solid #E2D7CF;
        background: rgba(251, 248, 245, 0.96);
        backdrop-filter: blur(12px);
        box-shadow: 0 12px 28px rgba(95, 126, 121, 0.16);
        min-height: 5.2rem;
    }

    .coach-mobile-bottom-item {
        border: none;
        background: transparent;
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.16rem;
        min-height: 3.05rem;
        padding: 0.2rem 0.15rem;
        border-radius: 0.72rem;
        cursor: pointer;
        transition: var(--transition);
    }

    .coach-mobile-bottom-item .nav-icon {
        font-size: 1.04rem;
    }

    .coach-mobile-bottom-item.active {
        color: var(--primary);
        background: rgba(184, 201, 200, 0.36);
    }

    .coach-mobile-bottom-label {
        font-size: 0.62rem;
        line-height: 1.1;
        font-weight: 600;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .coach-mobile-bottom-mic {
        position: relative;
        justify-self: center;
        width: 2.85rem;
        height: 2.85rem;
        border-radius: 50%;
        border: 2px solid #B8C9C8;
        background: #6F8C87;
        color: #FFFFFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 24px rgba(95, 126, 121, 0.24);
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .coach-mobile-bottom-mic .nav-icon {
        font-size: 1.25rem;
    }

    .coach-mobile-bottom-mic:hover,
    .coach-mobile-bottom-mic:focus-visible {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 15px 28px rgba(95, 126, 121, 0.32);
    }

    .coach-mobile-bottom-mic.active {
        outline: 2px solid #B8C9C8;
        outline-offset: 2px;
    }

    .app-coach-mobile-nav .main-content,
    .app-coachie-mobile-nav .main-content {
        min-height: 0;
        position: fixed;
        top: calc(var(--coach-top-nav-height, 64px) + env(safe-area-inset-top, 0px));
        bottom: calc(
            var(--coach-mobile-bottom-nav-height, 120px)
            + var(--coach-mobile-bottom-nav-gap, 15px)
            + env(safe-area-inset-bottom, 0px)
        );
        left: 0;
        right: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overscroll-behavior-x: none;
        padding: 1.5rem var(--coach-side-gap, 15px) calc(var(--coach-mobile-bottom-nav-gap, 15px) + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: calc(var(--coach-mobile-bottom-nav-gap, 15px) + env(safe-area-inset-bottom, 0px)) !important;
        box-sizing: border-box;
        scroll-padding-bottom: calc(
            var(--coach-mobile-bottom-nav-height, 120px)
            + var(--coach-mobile-bottom-nav-gap, 15px)
            + env(safe-area-inset-bottom, 0px)
        );
    }

    .app-coach-mobile-nav .main-content.main-content-coach-dashboard,
    .app-coachie-mobile-nav .main-content.main-content-coach-dashboard {
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    .app-coach-mobile-nav .coach-dashboard-view,
    .app-coach-mobile-nav .coach-dashboard,
    .app-coach-mobile-nav .coach-dashboard-mobile-grid,
    .app-coach-mobile-nav .coach-dashboard .phase-board,
    .app-coach-mobile-nav .coach-dashboard .kanban,
    .app-coach-mobile-nav .coach-dashboard .kanban-column {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .app-coach-mobile-nav .coach-dashboard .phase-board,
    .app-coach-mobile-nav .coach-dashboard .kanban {
        overflow-x: hidden;
    }

    .app-coach-mobile-nav .column-header,
    .app-coach-mobile-nav .user-card-header {
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .app-coach-mobile-nav .user-card-header > div {
        min-width: 0;
        max-width: 100%;
    }

    .app-coach-mobile-nav .user-card strong,
    .app-coach-mobile-nav .user-email-small {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .app-coach-mobile-nav .main-content > .view,
    .app-coachie-mobile-nav .main-content > .view {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    .app-coach-mobile-nav .coach-notes-view {
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    }

    .app-coach-mobile-nav .coach-notes-header {
        display: none;
    }

    .app-coach-mobile-nav .coach-notes-textarea {
        height: 7.5rem !important;
        min-height: 7.5rem !important;
        max-height: 7.5rem !important;
        resize: none;
    }

    .app-coach-mobile-nav .coach-notes-detail-footer {
        position: static;
        bottom: auto;
        z-index: auto;
        background: transparent;
        padding-bottom: 0;
    }

    .coach-dashboard .phase-board {
        overflow: visible;
        height: auto;
        max-height: none;
    }

    .coach-dashboard .phase-board .kanban-column {
        min-height: 0;
    }

    .coach-dashboard .phase-board .column-items {
        overflow: visible;
    }

    .coach-notes-list {
        max-height: none;
        overflow: visible;
    }

    .coachie-anamnesis-table-wrap,
    .coachie-anamnesis-table-wrap.coachie-ai-task-suggestions-table-wrap {
        max-height: none;
        overflow-y: visible;
    }

    .coachie-anamnesis-table-wrap.coachie-ai-task-suggestions-table-wrap {
        overflow-x: auto;
    }

    .app-coach-mobile-nav .footer,
    .app-coachie-mobile-nav .footer {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav {
        padding: 0 15px;
    }

    .nav-main {
        gap: 0.35rem;
    }

    .nav-actions {
        gap: 0.35rem;
    }

    .nav-label {
        display: none;
    }

    .nav-overflow-menu {
        min-width: 200px;
    }

    .main {
        padding: 1.5rem 15px;
    }

    .main-content {
        padding: 1.5rem 15px;
    }

    .group-detail-content {
        grid-template-columns: 1fr;
    }

    .tile-grid,
    .groups-grid,
    .goals-grid {
        grid-template-columns: 1fr;
    }

    .goals-coach-toolbar label {
        max-width: 100%;
        width: 100%;
    }

    .goals-coach-phase .goals-grid {
        padding: 0 0.6rem 0.6rem;
    }

    .coach-homework-phase .kanban {
        padding: 0.2rem 0.6rem 0.6rem;
    }

    .coach-homework-toolbar {
        justify-content: flex-start;
    }

    .coach-homework-toggle-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .coach-homework-toggle-row .coach-homework-toggle {
        flex: 1 1 100%;
    }

    .coach-homework-insights-btn {
        width: auto;
        min-width: 120px;
        margin-left: 15px;
        margin-bottom: 15px;
        white-space: nowrap;
    }

    .coach-homework-status-kanban {
        grid-template-columns: 1fr;
    }

    .modern-date-popover {
        width: 100%;
        max-width: none;
    }

    .knowledge-coach-toolbar label {
        max-width: 100%;
        width: 100%;
    }

    .knowledge-coach-grid {
        padding: 0 0.6rem 0.6rem;
    }

    .template-goal-header {
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .template-goal-controls {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

    .template-phase-plus-btn {
        margin-right: 0;
    }

    .coachie-hero-meta-grid,
    .coachie-overview-grid,
    .coachie-article-list,
    .coachie-phase-grid {
        grid-template-columns: 1fr;
    }

    .coachie-task-columns {
        grid-template-columns: 1fr;
    }

    .coachie-task-list {
        grid-template-columns: 1fr;
    }

    .phase-board {
        grid-template-columns: 1fr;
    }

    .coach-dashboard-mobile-grid {
        grid-template-columns: 1fr;
    }

    .phase-move-warning-actions button {
        width: 100%;
    }

    .coachie-task-toolbar {
        justify-content: flex-start;
    }

    .coachie-task-toolbar,
    .homework-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .homework-actions {
        justify-content: flex-start;
    }

    .homework-actions select {
        width: 100%;
    }

    .coachie-task-card {
        width: 100%;
        min-height: 0;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .coachie-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .coachie-top-actions {
        align-items: flex-start;
        width: 100%;
    }

    .coachie-search {
        width: 100%;
        min-width: 0;
    }

    .coachie-breadcrumbs {
        flex-wrap: wrap;
    }

    .app-coachie-mobile-nav .groups-container .view-header {
        align-items: flex-start;
        gap: 0.45rem;
    }

    .app-coachie-mobile-nav .groups-container .groups-create-btn {
        align-self: flex-start;
        padding: 0.52rem 0.9rem;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.15;
    }

    .coachie-hero-trend-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .coachie-trend-chart {
        min-width: 320px;
    }

    .coachie-anamnesis-table {
        min-width: 360px;
    }

    .coachie-anamnesis-table th,
    .coachie-anamnesis-table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.8rem;
    }

    .panel-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .diary-day-entries {
        grid-template-columns: 1fr;
        padding-left: 0.8rem;
    }

    .diary-tree,
    .diary-tree-children,
    .diary-tree-months,
    .diary-tree-days {
        overflow: visible;
    }

    .coach-request-actions {
        gap: 0.5rem;
    }

    .coach-request-main-actions {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .coach-request-actions .small {
        min-height: 2.25rem;
    }

    .modal-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .modal-actions button {
        flex: 1 1 12rem;
    }

    .charts-grid,
    .charts-grid.admin-ops-grid {
        grid-template-columns: 1fr;
    }

    .admin-trend-card .chart-container {
        min-width: 660px;
    }

    .admin-trend-card {
        grid-column: auto;
    }

    .admin-watchlist-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-watchlist-meta {
        align-items: flex-start;
        white-space: normal;
    }

    .admin-diary-table th,
    .admin-diary-table td {
        font-size: 0.78rem;
        padding: 0.42rem 0.4rem;
    }

    .admin-diary-table-wrap,
    .admin-homework-table-wrap,
    .admin-knowledge-table-wrap,
    .admin-goals-table-wrap,
    .admin-activity-table-wrap,
    .admin-users-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-diary-col-title {
        width: auto;
    }

    .admin-diary-col-tags {
        display: none;
    }

    .admin-homework-table th,
    .admin-homework-table td,
    .admin-knowledge-table th,
    .admin-knowledge-table td,
    .admin-goals-table th,
    .admin-goals-table td {
        font-size: 0.78rem;
        padding: 0.42rem 0.4rem;
    }

    .admin-homework-col-title,
    .admin-knowledge-col-title,
    .admin-goals-col-title {
        width: auto;
    }

    .admin-homework-col-description,
    .admin-knowledge-col-tags {
        display: none;
    }

    .admin-table-toolbar label {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .admin-table-toolbar select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}