/**
 * src/css/pages/profile.css — DEV-04 (Profile v2) sectioned layout.
 * Scoped to profile.html only (mirrors src/css/pages/admin-cloud.css's own
 * "one small page-specific stylesheet per redesigned page" convention).
 */

/* ── Section shell: left nav + right content ─────────────────────────── */
.profile-shell {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.profile-section-nav {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 8px;
    position: sticky;
    top: 24px;
}
.profile-section-nav button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #43474e;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.profile-section-nav button:hover { background: #F2F4F6; }
.profile-section-nav button.active { background: #022448; color: #fff; }
.profile-section-nav button .material-symbols-outlined { font-size: 19px; }

.profile-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.profile-panel { display: none; flex-direction: column; gap: 20px; }
.profile-panel.active { display: flex; }

@media (max-width: 900px) {
    .profile-shell { flex-direction: column; }
    .profile-section-nav {
        width: 100%;
        position: static;
        display: flex;
        overflow-x: auto;
        gap: 4px;
    }
    .profile-section-nav button { flex-shrink: 0; white-space: nowrap; }
}

/* ── Status chips (documents) ────────────────────────────────────────── */
.doc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.doc-chip.pending { background: #fef3c7; color: #92400e; }
.doc-chip.verified { background: #dcfce7; color: #166534; }
.doc-chip.rejected { background: #fee2e2; color: #991b1b; }

.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #E2E8F0; border-radius: 10px; }
.doc-row .doc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-row .doc-info .doc-type { font-weight: 600; font-size: 13.5px; color: #191c1e; }
.doc-row .doc-info .doc-meta { font-size: 12px; color: #74777f; }
.doc-row .doc-reason { font-size: 12px; color: #ba1a1a; margin-top: 2px; }
.doc-row .doc-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Devices list ─────────────────────────────────────────────────────── */
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #E2E8F0; border-radius: 10px; }
.device-row.current { border-color: #16a34a; background: #f0fdf4; }
.device-row .device-info { display: flex; flex-direction: column; gap: 2px; }
.device-row .device-label { font-weight: 600; font-size: 13.5px; color: #191c1e; display: flex; align-items: center; gap: 6px; }
.device-row .device-meta { font-size: 12px; color: #74777f; }
.device-dot { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; display: inline-block; }

/* ── Holidays & hours calendar ────────────────────────────────────────── */
.hours-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hours-calendar-grid .cal-cell { border: 1px solid #E2E8F0; border-radius: 8px; padding: 6px; min-height: 64px; font-size: 11px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: #fff; }
.hours-calendar-grid .cal-cell:hover { border-color: #022448; }
.hours-calendar-grid .cal-cell.holiday { background: #f2f4f6; color: #74777f; }
.hours-calendar-grid .cal-cell.weekend { background: #FAFBFC; }
.hours-calendar-grid .cal-cell.has-entry { border-color: #022448; }
.hours-calendar-grid .cal-cell .cal-day-num { font-weight: 700; font-size: 12px; }
.hours-calendar-grid .cal-cell .cal-hours { font-size: 10.5px; color: #022448; }
.hours-calendar-grid .cal-cell.amber-flag { box-shadow: inset 0 0 0 2px #f59e0b; }

.holiday-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.holiday-badge.requested { background: #fef3c7; color: #92400e; }
.holiday-badge.approved { background: #dcfce7; color: #166534; }
.holiday-badge.declined { background: #fee2e2; color: #991b1b; }

/* ── W14-C: leave balance card ("X von Y Tagen genutzt, Z verbleibend") ── */
.leave-balance-card { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 16px; border: 1px solid #E2E8F0; border-radius: 10px; background: #FAFBFC; margin-bottom: 16px; }
.leave-balance-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 4px solid #022448; flex-shrink: 0; }
.leave-balance-ring .lb-remaining { font-size: 20px; font-weight: 800; color: #022448; line-height: 1; }
.leave-balance-ring .lb-remaining-label { font-size: 9px; color: #74777f; text-transform: uppercase; letter-spacing: 0.03em; }
.leave-balance-details { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.leave-balance-summary { font-size: 14px; font-weight: 600; color: #191c1e; }
.leave-balance-breakdown { font-size: 12px; color: #74777f; display: flex; flex-wrap: wrap; gap: 10px; }
.leave-balance-breakdown span.lb-pending { color: #92400e; font-weight: 600; }

/* ── W14-C: "Nachweis fehlt" (sick note missing) chip + upload action ─── */
.doc-chip.missing { background: #fee2e2; color: #991b1b; }
.sick-note-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Meine Aktivität (B6) ── mirrors src/css/pages/user-mgmt.css's .um-activity-*
 * rules (admin Activity tab) so the self-service view matches the same
 * readable-German-timeline visual style; kept as separate `pma-` classes
 * (not shared/renamed) since user-mgmt.css is owned by a different page. */
.pma-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 14px; }
.pma-timeline { display: flex; flex-direction: column; gap: 4px; }
.pma-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 6px; border-bottom: 1px solid #F2F4F6;
}
.pma-icon {
    width: 30px; height: 30px; border-radius: 50%; background: #eceef0; color: #022448;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pma-body { flex: 1; min-width: 0; }
.pma-text { font-size: 13px; color: #191c1e; }
.pma-time { font-size: 11px; color: #74777f; margin-top: 1px; }
.pma-category-chip {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
    background: #eceef0; color: #43474e; flex-shrink: 0; margin-left: auto;
}
.pma-burst-toggle { font-size: 11px; color: #022448; font-weight: 700; cursor: pointer; text-decoration: underline; margin-top: 2px; }
.pma-burst-children { display: none; flex-direction: column; gap: 4px; margin-top: 6px; padding-left: 8px; border-left: 2px solid #E2E8F0; }
.pma-burst-children.open { display: flex; }
.pma-loading-row, .pma-empty-row { text-align: center; padding: 24px 8px; color: #74777f; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * DEV-04 (Profile v2) MOBILE UX OVERHAUL — RK: "profile mobile view is
 * completely rubbish … holiday/hours UX … maybe the calendar is missing."
 * Everything below is either new shared component CSS (ProfileCalendar) or is
 * gated <=767px so the desktop layout above stays byte-for-byte intact.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared MONTH CALENDAR component (src/js/profile-calendar.js) ──────────── */
.pcal-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #E2E8F0;
}
.pcal-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.pcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pcal-head { margin-bottom: 4px; }
.pcal-dow { text-align: center; font-size: 11px; font-weight: 700; color: #74777f; text-transform: uppercase; letter-spacing: 0.02em; padding: 4px 0; }
.pcal-dow-we { color: #a2a6ab; }

.pcal-cell {
    position: relative; border: 1px solid #E2E8F0; border-radius: 8px;
    min-height: 66px; padding: 6px; background: #fff; overflow: hidden;
    display: flex; flex-direction: column; gap: 2px;
}
.pcal-cell.pcal-empty { border: none; background: transparent; min-height: 0; }
.pcal-clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.pcal-clickable:hover { border-color: #022448; }
.pcal-num { font-size: 12px; font-weight: 700; color: #191c1e; }
.pcal-sub { font-size: 10.5px; line-height: 1.15; color: #022448; overflow: hidden; text-overflow: ellipsis; }
.pcal-badge { font-size: 11px; }
.pcal-today { box-shadow: inset 0 0 0 2px #fea619; }
.pcal-today .pcal-num { color: #022448; }

/* day-state fills (mirror the leave_type seed palette used in leave.css) */
.pcal-weekend { background: #FAFBFC; }
.pcal-weekend .pcal-num, .pcal-off .pcal-num { color: #74777f; }
.pcal-off { background: #FAFBFC; }
.pcal-worked { background: #f3f9f4; border-color: #cfe3d2; }
.pcal-leave { background: #eaf4ec; border-color: #2e7d32; }
.pcal-leave .pcal-num, .pcal-leave .pcal-sub { color: #1e6b24; }
.pcal-sick { background: #fdecec; border-color: #c62828; }
.pcal-sick .pcal-num, .pcal-sick .pcal-sub { color: #a71d1d; }
.pcal-public_holiday { background: #eaf1fb; border-color: #1565c0; }
.pcal-public_holiday .pcal-num, .pcal-public_holiday .pcal-sub { color: #12509a; }
.pcal-company_holiday { background: #f4ecfa; border-color: #6a1b9a; }
.pcal-company_holiday .pcal-num, .pcal-company_holiday .pcal-sub { color: #59167f; }
.pcal-has-entry { border-color: #022448; box-shadow: inset 0 0 0 1px #022448; }

/* legend */
.pcal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; font-size: 12px; color: #43474e; }
.pcal-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pcal-legend-dot { width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(2,36,72,0.08); display: inline-block; flex-shrink: 0; }
.pcal-legend-dot.pcal-worked { background: #cfe3d2; }
.pcal-legend-dot.pcal-leave { background: #2e7d32; }
.pcal-legend-dot.pcal-sick { background: #c62828; }
.pcal-legend-dot.pcal-public_holiday { background: #1565c0; }
.pcal-legend-dot.pcal-company_holiday { background: #6a1b9a; }
.pcal-legend-dot.pcal-weekend { background: #cfd4d8; }
.pcal-legend-dot.pcal-off { background: #b0bec5; }
.pcal-legend-dot.pcal-has-entry-dot { background: #022448; }

/* state pills / totals in card headers */
.pcal-balance-pill { font-size: 12px; font-weight: 700; color: #12509a; background: #eaf1fb; border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.pcal-total { font-size: 12.5px; font-weight: 600; color: #022448; white-space: nowrap; }

/* loading / error / empty states */
.pcal-loading, .pcal-error, .pcal-empty-state { text-align: center; padding: 28px 8px; color: #74777f; font-size: 13px; }
.pcal-error { color: #ba1a1a; }

/* ═══ MOBILE (<=767px) — the actual "rubbish navigation" fix ═══════════════ */
@media (max-width: 767px) {
    /* Section switcher: was a horizontal-scroll tab strip (items ran off-
       screen, not sticky, unreachable). Now a STICKY, wrapping 3-column grid
       of icon+label tiles — no horizontal overflow at 360/390px, 44px+ touch
       targets, always reachable while scrolling a long panel. */
    .profile-shell { gap: 12px; }
    .profile-section-nav {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        overflow: visible !important;
        position: sticky;
        top: 0;
        z-index: 30;
        width: 100%;
        padding: 8px;
        background: #F8FAFC;
        border: none;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 6px 14px rgba(2, 36, 72, 0.08);
    }
    .profile-section-nav button {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        white-space: normal !important;
        text-align: center;
        min-height: 62px;
        padding: 8px 4px;
        font-size: 11px;
        line-height: 1.15;
        border: 1px solid #E2E8F0;
        background: #fff;
    }
    .profile-section-nav button.active { background: #022448; color: #fff; border-color: #022448; }
    .profile-section-nav button .material-symbols-outlined { font-size: 22px; }

    /* Reclaim horizontal space: tighter card padding, full-width fields. */
    .profile-panel .card { padding: 16px !important; }
    .profile-panel .input-field { width: 100%; }

    /* Rows that used space-between (docs/devices/holidays) must wrap, not
       overflow; their action buttons go full-width and finger-sized. */
    .doc-row, .device-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .doc-row .doc-actions, .device-row { row-gap: 8px; }
    .doc-row .doc-actions { flex-wrap: wrap; width: 100%; }
    .doc-row .doc-actions .btn { flex: 1 1 auto; }

    /* Calendar tightens up but keeps 7 columns (reflow, tappable). */
    .pcal-grid { gap: 3px; }
    .pcal-cell { min-height: 52px; padding: 4px; border-radius: 6px; }
    .pcal-num { font-size: 11px; }
    .pcal-sub { font-size: 9.5px; }
    .pcal-dow { font-size: 10px; }
    .pcal-card-tools { width: 100%; justify-content: flex-start; }
}