/* Dashboard page — left sidebar layout + card-based content.
   Used on: dashboard */

.hidden { display: none; }
.mb-4 { margin-bottom: 1rem; }

.app-shell {
    min-height: 100vh;
    background: #f1f5f9;
}

/* Sidebar ------------------------------------------------------------ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 248px;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    z-index: 20;
}

.sidebar-heading { flex-shrink: 0; }
.mobile-menu-toggle { display: none; }

.sidebar-brand {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    padding: 0 10px;
    margin: 0 0 28px;
    display: block;
    text-decoration: none;
}

.sidebar-brand:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }

.sidebar-brand span {
    color: #2563eb;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.sidebar-link svg {
    flex-shrink: 0;
    color: #94a3b8;
    transition: color 0.12s;
}

.sidebar-link:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.sidebar-link:hover svg {
    color: #64748b;
}

.sidebar-link.active {
    background: #eff6ff;
    color: #1d4ed8;
}

.sidebar-link.active svg {
    color: #2563eb;
}

.sidebar-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e2e8f0;
    padding-top: 14px;
    margin-top: 14px;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.icon-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.logout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 8px;
}

.logout-link:hover {
    background: #fef2f2;
}

/* Main content --------------------------------------------------------- */
.main-content {
    margin-left: 248px;
    padding: 32px 40px 56px;
    max-width: 1180px;
}

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 26px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.page-sub {
    font-size: 14px;
    color: #64748b;
    margin: 4px 0 0;
}

/* Activation banner ----------------------------------------------------- */
.activation-banner {
    background: linear-gradient(120deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 16px;
    padding: 28px 32px;
    color: #ffffff;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.activation-banner h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px;
}

.activation-banner p {
    font-size: 13px;
    color: #dbeafe;
    margin: 0;
    max-width: 460px;
}

.activation-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.activation-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
}

.activation-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Stat cards -------------------------------------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
}

.stat-label {
    font-size: 12px;
    color: #64748b;
    margin: 0 0 6px;
}

.stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

/* Content grid: main column + profile rail --------------------------- */
.content-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
    align-items: start;
}

.card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
}

.card h3 {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 16px;
}

/* Profile rail card --------------------------------------------------- */
.profile-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 14px;
}

.profile-name {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 2px;
}

.profile-rating {
    font-size: 13px;
    color: #b45309;
    margin: 0 0 16px;
}

.profile-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-top: 1px solid #f1f5f9;
}

.profile-row-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
}

.profile-row-value {
    font-size: 13px;
    color: #334155;
}

.btn-outline {
    width: 100%;
    margin-top: 16px;
    padding: 9px;
    border-radius: 9px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.btn-outline:hover {
    background: #f8fafc;
}

/* Skill pills ------------------------------------------------------- */
.skill-pill {
    display: inline-block;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 999px;
    margin: 0 6px 8px 0;
}

.field-row {
    display: flex;
    gap: 8px;
}

.field-row input, .field-row select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
}

.field-row input {
    flex: 1;
}

.btn-add {
    background: #16a34a;
    color: #ffffff;
    border: none;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.btn-add:hover {
    background: #15803d;
}

/* Availability -------------------------------------------------------- */
.avail-slot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #334155;
}

.btn-delete {
    background: #fee2e2;
    color: #b91c1c;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.btn-delete:hover {
    background: #fecaca;
}

.avail-form {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    margin-top: 14px;
}

.avail-form h4 {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 0 0 10px;
}

.avail-form-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.avail-form-grid select, .avail-form-grid input[type="time"] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 13px;
}
.avail-form-grid label:not(.sr-only) { display: grid; gap: 5px; color: #475569; font-size: 13px; font-weight: 700; }
.avail-form-grid input[type="time"] { width: 100%; min-height: 42px; background: #fff; color: #0f172a; }

.avail-form-grid button {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.avail-form-grid button:hover {
    background: #1d4ed8;
}

/* Day-chip picker (timetable multi-day add block) ------------------- */
.day-picker {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.timetable-day-nav { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.timetable-day-nav button { min-height: 44px; border: 0; border-radius: 11px; background: #eff6ff; color: #1d4ed8; font-weight: 800; cursor: pointer; }
.timetable-day-nav button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
.timetable-day-nav button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
.timetable-day-card[hidden] { display: none !important; }
.timetable-day-card { scroll-margin-top: 80px; }

.day-chip {
    padding: 8px 0;
    width: 44px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.day-chip:hover {
    border-color: #94a3b8;
}

.day-chip.selected {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

html.dark .day-chip {
    background: #111827;
    border-color: #374151;
    color: #d1d5db;
}

html.dark .day-chip.selected {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Phone and tablet navigation ------------------------------------------ */
@media (max-width: 860px) {
    .sidebar {
        position: sticky;
        top: 0;
        bottom: auto;
        width: 100%;
        box-sizing: border-box;
        height: auto;
        min-height: 64px;
        padding: 10px 16px;
        border-right: 0;
        border-bottom: 1px solid #e2e8f0;
        z-index: 50;
    }
    .sidebar-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
    }
    .sidebar-brand { margin: 0; padding: 0; font-size: 19px; }
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        background: transparent;
        color: #334155;
        font: inherit;
        font-size: 14px;
        cursor: pointer;
    }
    .menu-icon { font-size: 20px; line-height: 1; }
    .sidebar-nav, .sidebar-foot { display: none; }
    .sidebar.menu-open {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        overflow-y: auto;
        align-items: stretch;
    }
    .sidebar.menu-open .sidebar-nav {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        gap: 4px;
        margin-top: 20px;
    }
    .sidebar.menu-open .sidebar-foot {
        display: flex;
        margin: 16px 0 0;
        padding-top: 12px;
    }
    .sidebar-link { min-height: 44px; box-sizing: border-box; }
    body.mobile-menu-open { overflow: hidden; }
    .main-content { margin-left: 0; max-width: none; min-width: 0; padding: 20px 16px 40px; }
    .main-content > [class*="max-w-"] { padding: 0; }
    .content-grid { grid-template-columns: minmax(0, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .activation-banner { flex-direction: column; align-items: flex-start; }
    .avail-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-header { flex-wrap: wrap; gap: 10px; }
    .card, .stat-card { min-width: 0; }
    .field-row { flex-wrap: wrap; }
    .field-row input { min-width: 0; }
    .main-content .overflow-x-auto { max-width: 100%; }
    #addModal, #reflectionModal, #tutorModal { padding: 16px; overflow-y: auto; }
    #addModal > div, #reflectionModal > div, #tutorModal > div {
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .main-content { padding: 16px 12px 32px; }
    .main-content > div > .bg-white, .card { padding: 16px; }
    .activation-banner { padding: 20px; }
    .activation-actions { width: 100%; flex-wrap: wrap; }
    .activation-btn { white-space: normal; }
    .avail-form-grid { grid-template-columns: minmax(0, 1fr); }
    .avail-form-grid button { min-height: 44px; }
    .page-title { font-size: 23px; }
    .day-chip { width: 42px; min-height: 44px; }
    #timetable .flex.gap-2 { flex-wrap: wrap; }
    .search-result-layout { flex-direction: column; align-items: stretch; }
    .search-result-details { min-width: 0; overflow-wrap: anywhere; }
    .search-result-action { width: 100%; min-height: 44px; }
    .booking-modal-close { min-width: 44px; min-height: 44px; }
    .booking-field, .booking-confirm { min-height: 44px; }
    .timetable-form-field, .timetable-form-action { min-height: 44px; }
    .booking-list-card { overflow-wrap: anywhere; }
    .booking-list-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .booking-list-actions button { min-height: 44px; flex: 1 1 110px; }
    .admin-table-hint { margin-bottom: 8px; }
    .admin-users-table { min-width: 760px; }
    .admin-bookings-table { min-width: 560px; }
    .admin-row-action { min-height: 44px; }
    .timetable-day-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 16px;
    }
    .timetable-day-nav button {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 600;
    }
    .timetable-day-nav button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
}

@media (min-width: 481px) {
    .admin-table-hint { display: none; }
}

.admin-table-scroll:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
html.dark .timetable-day-nav button { background: #1e3a5f; color: #bfdbfe !important; }
html.dark .timetable-day-nav button[aria-pressed="true"] { background: #2563eb; color: #fff !important; }

.reflection-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.reflection-filters.hidden { display: none; }
.reflection-filters input { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px; }
.reflection-filters button { border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; }
@media (max-width: 480px) {
    .reflection-filters input, .reflection-filters button { min-height: 44px; }
    .reflection-list-card { overflow-wrap: anywhere; }
}

html.dark .mobile-menu-toggle { color: #f3f4f6; border-color: #4b5563; }

/* Dark mode ------------------------------------------------------------ */
html.dark .app-shell { background: #111827; }
html.dark .sidebar { background: #1f2937; border-color: #374151; }
html.dark .sidebar-brand { color: #f3f4f6; }
html.dark .sidebar-link { color: #d1d5db; }
html.dark .sidebar-link:hover { background: #374151; color: #f3f4f6; }
html.dark .sidebar-link.active { background: #1e3a5f; color: #93c5fd; }
html.dark .sidebar-foot { border-color: #374151; }
html.dark .card, html.dark .stat-card { background: #1f2937; border-color: #374151; }
html.dark .card h3, html.dark .page-title, html.dark .stat-value, html.dark .profile-name { color: #f3f4f6; }
html.dark .page-sub, html.dark .stat-label { color: #9ca3af; }
html.dark .profile-row { border-color: #374151; }
html.dark .profile-row-value { color: #d1d5db; }
.product-email-choice { display:flex; align-items:flex-start; gap:.7rem; padding:.9rem 1rem; margin:1rem 0 .4rem; border:1px solid #cbd5e1; border-radius:12px; background:#f8fafc; color:#334155; line-height:1.45; cursor:pointer; }
.product-email-choice input { width:20px; height:20px; min-width:20px; margin:1px 0 0; accent-color:#205bd8; cursor:pointer; }
.product-email-choice:focus-within { outline:2px solid #205bd8; outline-offset:2px; }
html.dark .product-email-choice { background:#1f2937; border-color:#475569; color:#e2e8f0; }
html.dark .avail-slot, html.dark .avail-form { background: #111827; color: #d1d5db; }
html.dark .field-row input, html.dark .field-row select,
html.dark .avail-form-grid select, html.dark .avail-form-grid input[type="time"], html.dark .btn-outline {
    background: #111827; color: #f3f4f6; border-color: #374151;
}
html.dark .avail-form-grid label:not(.sr-only) { color: #cbd5e1; }

/* Project collaboration */
.projects-page { max-width: 860px; }
.projects-page .card h2 { margin-bottom: 14px; }
.projects-page .card[hidden] { display: none; }
.project-form { display: grid; gap: 8px; margin-top: 12px; }
.project-form label { color: #334155; font-weight: 600; font-size: 14px; }
.project-form input, .project-form select, .project-form textarea {
    width: 100%; box-sizing: border-box; min-width: 0; padding: 10px 12px;
    border: 1px solid #cbd5e1; border-radius: 8px; font: inherit;
}
.project-form button, .project-card button, .project-actions button {
    border: 0; border-radius: 8px; background: #2563eb; color: #fff;
    padding: 10px 14px; min-height: 44px; cursor: pointer; font: inherit;
}
.project-form button:disabled, .project-actions button:disabled { opacity: .5; cursor: wait; }
.project-opt-in { display: flex; gap: 12px; align-items: center; min-height: 44px; }
.project-opt-in input { width: 20px; height: 20px; flex-shrink: 0; }
.project-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 12px; overflow-wrap: anywhere; }
.project-card h3 { margin: 0 0 8px; }
.project-card p { margin: 6px 0; }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.project-error, .project-success { margin: 0 0 12px; font-weight: 600; }
.project-error { color: #b91c1c; }
.project-success { color: #166534; }
#projectDetails { scroll-margin-top: 80px; overflow-wrap: anywhere; }
html.dark .project-card { border-color: #4b5563; }
html.dark .project-form label { color: #e5e7eb; }
html.dark .project-error { color: #fca5a5; }
html.dark .project-success { color: #86efac; }
@media (max-width: 480px) {
    .projects-page .project-card button, .projects-page .project-form button { width: 100%; }
    .project-actions button { flex: 1 1 120px; }
}

.discovery-heading { display:flex; justify-content:space-between; align-items:start; gap:12px; flex-wrap:wrap; }
.discovery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:12px; margin:12px 0 20px; }
.discovery-item { border:1px solid #cbd5e1; border-radius:12px; padding:14px; min-width:0; }
.discovery-item h4 {font-weight:700; margin-bottom:6px;}
.discovery-item p {overflow-wrap:anywhere; margin-bottom:8px;}
.discovery-item a,.discovery-heading a {color:#2563eb; font-weight:600;}
.skill-pill button {margin-left:6px; text-decoration:underline; cursor:pointer;}

/* Dashboard: focused landing page with clear next actions. */
.dashboard-eyebrow { color:#1d4ed8; font-weight:800; font-size:11px; letter-spacing:.15em; margin-bottom:8px; }
.dashboard-bottom {display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,1fr);gap:18px;align-items:start;}
.dashboard-next-grid {display:grid;gap:10px;margin-top:18px;}
.dashboard-next-grid a {display:grid;grid-template-columns:38px 1fr;gap:2px 12px;padding:14px 16px;border:1px solid #dbe4ee;border-radius:14px;text-decoration:none;color:#0f172a;transition:transform .15s,box-shadow .15s;}
.dashboard-next-grid a:hover,.discovery-item:hover {transform:translateY(-2px);box-shadow:0 12px 22px rgba(15,23,42,.09);}
.dashboard-next-grid span {grid-row:span 3;color:#2563eb;font-size:20px;font-weight:800;}
.dashboard-next-grid strong {font-size:15px;}.dashboard-next-grid small{color:#64748b}.dashboard-next-grid b{font-size:12px;color:#2563eb;margin-top:4px;}
.activation-banner {background:linear-gradient(120deg,#132c58 0%,#1d4ed8 65%,#3b82f6 100%);box-shadow:0 16px 32px rgba(37,99,235,.16);}
.activation-btn {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:44px;}
.stat-card {box-shadow:0 6px 20px rgba(15,23,42,.035);}.stat-value{font-size:26px;}
.discovery-item {transition:transform .15s,box-shadow .15s;background:#f8fafc;}
.settings-page{max-width:880px;}.settings-page .card{padding:26px;}.settings-page .field-row{margin-top:16px;flex-wrap:wrap;}
.settings-page .field-row button,.settings-page .avail-form button{min-height:44px;}
.settings-skill{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #e2e8f0;}
.settings-skill strong{display:block;}.settings-skill small{color:#64748b;text-transform:capitalize;}.settings-skill button{color:#2563eb;text-decoration:underline;padding:9px;min-height:44px;}
.settings-notice:not(:empty){border-radius:10px;background:#eaf7ed;color:#166534;padding:12px 16px;margin-bottom:14px;}.settings-notice.error{background:#fef2f2;color:#991b1b;}
.masterclass-page{max-width:980px;}.masterclass-page .field-row{margin:18px 0 0;align-items:center;}.masterclass-page .field-row input{min-height:48px;}
.masterclass-badge{font-size:10px;letter-spacing:.1em;font-weight:800;color:#1d4ed8;}.masterclass-page h2{font-size:19px;font-weight:700;margin-bottom:12px;}.masterclass-page h3{font-size:18px;font-weight:700;margin:10px 0;}
.masterclass-page .discovery-item button{margin-top:8px;min-height:44px;}.booking-grid{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:12px;margin-top:20px;}.booking-grid input,.booking-grid select{padding:12px;border:1px solid #cbd5e1;border-radius:9px;min-width:0;}.booking-grid button{grid-column:2;min-height:46px;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
html.dark .dashboard-next-grid a,html.dark .discovery-item{background:#1f2937;color:#f3f4f6;border-color:#374151;}
html.dark .dashboard-next-grid small,html.dark .settings-skill small{color:#cbd5e1;}
@media(max-width:900px){.dashboard-bottom{grid-template-columns:1fr;}}
@media(max-width:600px){.dashboard-next-grid a{padding:14px}.booking-grid{grid-template-columns:1fr;gap:8px}.booking-grid button{grid-column:1}.settings-skill{align-items:flex-start;}.masterclass-page .field-row button{width:100%;}}