/* VitaRevo Main Stylesheet */

:root {
    --primary: #5469d4;
    --success: #2dce89;
    --info: #11cdef;
    --warning: #fb6340;
    --danger: #f5365c;
    --light: #f8f9fa;
    --dark: #212529;
    --gray: #6c757d;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f7fa;
    color: #333;
}

.landing-page {
    background: linear-gradient(135deg, #73a5ff 0%, #5477f5 100%);
    min-height: 100vh;
}

.auth-page {
    background: linear-gradient(135deg, #73a5ff 0%, #5477f5 100%);
    min-height: 100vh;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.task-card {
    transition: all 0.3s ease;
    border-left: 4px solid var(--primary);
}

.task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.task-card.completed {
    border-left: 4px solid var(--success);
    opacity: 0.75;
}

.task-complete-btn {
    transition: all 0.2s ease;
}

.task-complete-btn:hover {
    transform: scale(1.1);
}

.sidebar {
    background-color: white;
    height: 100%;
    min-height: 100vh;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

/* Transparent sidebar when background is active */
body[data-has-background="true"] .sidebar {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Transparent cards when background is active */
body[data-has-background="true"] .card {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Keep modals fully opaque */
body[data-has-background="true"] .modal-content {
    background-color: white !important;
    backdrop-filter: none !important;
}

.sidebar .nav-link {
    color: #333;
    padding: 0.8rem 1rem;
    border-radius: 5px;
    margin-bottom: 0.5rem;
}

.sidebar .nav-link:hover {
    background-color: #eef1f8;
}

.sidebar .nav-link.active {
    background-color: #e8effd;
    color: var(--primary);
    font-weight: 500;
}

.sidebar .nav-link i {
    margin-right: 10px;
}

.connection-code {
    font-family: monospace;
    letter-spacing: 2px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark);
}

/* =================================================================================
   RESPONSIVE SIDEBAR
   ================================================================================= */

/* Mobile Hamburger Button */
.mobile-menu-toggle {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1040;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Tablet Mode (900px - 1100px): Icon-only sidebar with hamburger to expand */
@media (min-width: 900px) and (max-width: 1099px) {
    /* Position hamburger in sidebar top left */
    .mobile-menu-toggle {
        display: block !important;
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        transform: none !important;
        z-index: 100 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Keep hamburger visible even when sidebar is expanded */
    .sidebar.show .mobile-menu-toggle {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hide sidebar text by default */
    .sidebar-text {
        display: none !important;
    }
    
    /* Make sidebar narrower - icon only */
    .sidebar {
        width: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
        transition: all 0.3s ease !important;
        position: relative;
    }
    
    /* Expanded state when hamburger clicked - overlay mode */
    .sidebar.show {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1030 !important;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2) !important;
        overflow-y: auto !important;
    }
    
    /* Show text when expanded */
    .sidebar.show .sidebar-text {
        display: inline !important;
    }
    
    /* Adjust nav links when expanded */
    .sidebar.show .nav-link {
        text-align: left !important;
        padding: 0.8rem 1rem !important;
    }
    
    .sidebar.show .nav-link i {
        margin-right: 10px !important;
    }
    
    /* Adjust logo when expanded */
    .sidebar.show .sidebar-logo {
        margin: 0 0.5rem 0 0 !important;
    }
    
    /* Adjust dropdown when expanded */
    .sidebar.show .dropdown > a {
        justify-content: flex-start !important;
    }
    
    .sidebar.show .dropdown-toggle::after {
        display: inline-block !important;
    }
    
    /* Adjust column widths */
    .sidebar.col-md-3,
    .sidebar.col-lg-2 {
        flex: 0 0 80px;
        max-width: 80px;
    }
    
    .content-wrapper.col-md-9,
    .content-wrapper.col-lg-10 {
        flex: 1;
        max-width: calc(100% - 80px);
        margin-left: 0 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* Remove container padding */
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Move logo down because of hamburger position */
    .sidebar .d-flex.align-items-center:first-child {
        margin-top: 60px !important;
    }
    
    /* Center icons and reduce spacing */
    .sidebar .nav-link {
        text-align: center;
        padding: 0.5rem 0.5rem !important;
        margin-bottom: 0.2rem !important;
        justify-content: center;
    }
    
    .sidebar .nav-link i {
        margin-right: 0 !important;
        font-size: 1.2rem;
    }
    
    /* Hide logo text, center logo */
    .sidebar-logo {
        margin: 0 auto !important;
    }
    
    /* Center dropdown user */
    .sidebar .dropdown > a {
        justify-content: center;
    }
    
    .sidebar .dropdown-toggle::after {
        display: none;
    }
    
    /* Hide horizontal lines padding */
    .sidebar hr {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Mobile Mode (< 900px): Hide sidebar completely */
@media (max-width: 899px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        width: 280px;
        z-index: 1030;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        min-height: 100vh;
    }
    
    .sidebar.show {
        left: 0;
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    }
    
    /* Full width content on mobile */
    .content-wrapper {
        margin-left: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 1rem !important;
        padding-top: 0.5rem !important;
    }
    
    /* Page title next to hamburger menu on mobile */
    .content-wrapper > .border-bottom:first-child,
    .content-wrapper > .page-title-block:first-child,
    .content-wrapper > div:first-child > .border-bottom:first-child {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1035;
        background: var(--card-bg, #fff);
        padding: 18px 15px 18px 70px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    
    .content-wrapper > .border-bottom:first-child h1,
    .content-wrapper > .page-title-block:first-child h1,
    .content-wrapper > div:first-child > .border-bottom:first-child h1 {
        font-size: 1.35rem !important;
        margin: 0 !important;
        margin-top: 4px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Avatar im Sticky Header kleiner machen */
    .content-wrapper > .border-bottom:first-child h1 img.rounded-circle,
    .content-wrapper > .border-bottom:first-child h1 .rounded-circle,
    .content-wrapper > .page-title-block:first-child h1 img.rounded-circle,
    .content-wrapper > .page-title-block:first-child h1 .rounded-circle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.9rem !important;
        margin-right: 0.5rem !important;
    }
    
    /* Header buttons on mobile - show as icon only */
    .content-wrapper > .border-bottom:first-child .btn-toolbar,
    .content-wrapper > .page-title-block:first-child .btn-toolbar,
    .content-wrapper > div:first-child > .border-bottom:first-child .btn-toolbar {
        position: fixed !important;
        top: 18px;
        right: 15px;
        z-index: 1036;
        display: block !important;
    }
    
    .content-wrapper > .border-bottom:first-child .btn-toolbar .btn,
    .content-wrapper > .page-title-block:first-child .btn-toolbar .btn,
    .content-wrapper > div:first-child > .border-bottom:first-child .btn-toolbar .btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 0 !important;
        background-color: #e9ecef !important;
        border-color: #dee2e6 !important;
        color: #495057 !important;
        border-radius: 6px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .content-wrapper > .border-bottom:first-child .btn-toolbar .btn i,
    .content-wrapper > .border-bottom:first-child .btn-toolbar .btn .fa,
    .content-wrapper > .page-title-block:first-child .btn-toolbar .btn i,
    .content-wrapper > .page-title-block:first-child .btn-toolbar .btn .fa,
    .content-wrapper > div:first-child > .border-bottom:first-child .btn-toolbar .btn i,
    .content-wrapper > div:first-child > .border-bottom:first-child .btn-toolbar .btn .fa {
        font-size: 0.95rem !important;
        margin: 0 !important;
    }
    
    /* Add top padding to content to account for fixed header */
    .content-wrapper > .border-bottom:first-child + *,
    .content-wrapper > .page-title-block:first-child + *,
    .content-wrapper > div:first-child > .border-bottom:first-child + * {
        margin-top: 75px !important;
    }
    
    /* If no border-bottom header, add padding anyway */
    .content-wrapper > .container:first-child,
    .content-wrapper > .container-fluid:first-child {
        padding-top: 70px;
    }
    
    /* Backdrop overlay */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1020;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out;
    }
    
    body.sidebar-open::after {
        opacity: 1;
        visibility: visible;
    }
    
    body.sidebar-open {
        overflow: hidden;
    }
}

/* Desktop Mode (> 1100px): Full sidebar with text */
@media (min-width: 1100px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

.magic-link-sent {
    max-width: 500px;
    margin: 0 auto;
}

.card-header-tabs {
    margin-right: -1.25rem;
    margin-bottom: -1rem;
    margin-left: -1.25rem;
    border-bottom: 0;
}

.journal-entry {
    border-left: 3px solid var(--info);
}

.badge-role {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    border-radius: 50px;
}

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* Care program entry: Remove border-top from first entry */
.care-programs-list .care-program-entry:first-child {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Appointment blocks on client.php: Two blocks side by side on desktop */
.appointment-blocks {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.appointment-left-block {
    flex: 1;
    padding-right: 1rem;
}

.appointment-right-block {
    min-width: 200px;
    text-align: left;
}

/* Mobile: Stack blocks vertically */
@media (max-width: 899px) {
    .appointment-blocks {
        flex-direction: column !important;
    }
    
    .appointment-left-block {
        width: 100%;
        padding-right: 0;
        margin-bottom: 1rem;
    }
    
    .appointment-right-block {
        width: 100%;
        min-width: unset !important;
        text-align: left !important;
    }
}

/* Task action buttons: Fixed width to prevent compression */
.task-action-buttons {
    min-width: 250px;
    max-width: 250px;
    flex-shrink: 0;
    margin-left: 10px;
}

.task-action-buttons .btn {
    white-space: nowrap;
}

/* Mobile: Full width for task action buttons */
@media (max-width: 767px) {
    .task-action-buttons {
        min-width: 100%;
        max-width: 100%;
        margin-top: 1rem;
    }
}

/* Task list animations */
.task-list .task-card {
    opacity: 0;
    transform: translateY(20px);
}

.task-list .task-card:nth-child(1) { animation: fadeIn 0.3s ease forwards; }
.task-list .task-card:nth-child(2) { animation: fadeIn 0.4s ease forwards; }
.task-list .task-card:nth-child(3) { animation: fadeIn 0.5s ease forwards; }
.task-list .task-card:nth-child(4) { animation: fadeIn 0.6s ease forwards; }
.task-list .task-card:nth-child(5) { animation: fadeIn 0.7s ease forwards; }
.task-list .task-card:nth-child(n+6) { animation: fadeIn 0.8s ease forwards; }

/* =================================================================================
   PAGE TITLE READABILITY ON BACKGROUND IMAGES
   ================================================================================= */

/* Enhanced page title visibility when background image is active */
body[data-has-background="true"][data-bg-image] .content-wrapper h1,
body[data-has-background="true"][data-bg-image] .content-wrapper .h1,
body[data-has-background="true"][data-bg-image] .content-wrapper h2,
body[data-has-background="true"][data-bg-image] .content-wrapper .h2,
body[data-has-background="true"][data-bg-image] .content-wrapper h4,
body[data-has-background="true"][data-bg-image] .content-wrapper .h4 {
    /* Multiple text shadows for strong white glow effect */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 20px rgba(255, 255, 255, 0.7),
        0 0 30px rgba(255, 255, 255, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* =================================================================================
   RESPONSIVE APPOINTMENT LAYOUT
   ================================================================================= */

/* For all screen sizes: Reorganize relative time and duration display */
.appointment-datetime-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.appointment-datetime-info > span {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

/* Put duration and relative time on new line */
.appointment-duration-line {
    display: flex;
    align-items: center;
    margin-left: 0 !important;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

/* Desktop: Hide mobile emoji in title, show icon in status container, hide title desktop icon */
.appointment-title-wrapper .completed-icon-mobile {
    display: none;
}

.appointment-title-wrapper .completed-icon-desktop {
    display: none;
}

.completed-status-desktop {
    display: block;
}

.completed-status-desktop .completed-icon-desktop {
    display: inline;
}

/* Calendar icon for planned appointments */
.appointment-calendar-icon {
    margin-right: 0.5rem;
}

/* Title wrapper always left-aligned */
.appointment-title-wrapper {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-left: 0;
}

.appointment-title {
    display: flex;
    align-items: center;
}

/* Reduce spacing between appointment info sections on client_care_program_details.php */
.appointment-item .mb-2 {
    margin-bottom: 0.5rem !important;
}

.appointment-item .appointment-datetime-info {
    margin-bottom: 0.25rem;
}

/* client_care_program_details.php specific: Location always below other info on all screen sizes */
.card .appointments-list .appointment-item > .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: flex-start !important;
}

.card .appointments-list .appointment-item > .d-flex.justify-content-between.align-items-center > div {
    width: 100%;
    text-align: left !important;
}

.card .appointments-list .appointment-item > .d-flex.justify-content-between.align-items-center > div:first-child {
    margin-bottom: 0.25rem;
}

.card .appointments-list .appointment-item .text-start {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.card .appointments-list .appointment-item .text-start > div {
    display: flex;
    align-items: center;
}

/* Fixed width for all icons to align text */
.appointment-item i.fa,
.appointment-item i.fas {
    display: inline-block;
    width: 18px;
    text-align: center;
}

.appointment-calendar-icon {
    display: inline-block;
    width: 18px;
    text-align: center;
}

/* Align description with other appointment text (after icons) */
.appointment-description {
    padding-left: 26px; /* 18px icon + 8px margin */
}

/* Below 900px: Reorganize appointment layout */
@media (max-width: 899px) {
    /* Show emoji on mobile in title wrapper, hide desktop icon */
    .appointment-title-wrapper .completed-icon-mobile {
        display: inline;
        margin-right: 0.25rem;
    }
    
    .appointment-title-wrapper .completed-icon-desktop {
        display: none;
    }
    
    .appointment-status-container .completed-icon-desktop {
        display: none;
    }
    
    /* Hide the status container for completed appointments on mobile */
    .completed-status-desktop {
        display: none !important;
    }
    
    /* First row: Stack title and status/check vertically */
    .appointment-item > .d-flex.justify-content-between:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Title always left-aligned with no padding */
    .appointment-item > .d-flex.justify-content-between:first-child .fw-bold {
        width: 100%;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    
    .appointment-item > .d-flex.justify-content-between:first-child .text-end {
        order: 2;
        margin-top: 0.25rem;
        margin-left: 0 !important;
        text-align: left !important;
        min-width: unset !important;
    }
    
    .appointment-item .appointment-status-container > div {
        display: flex;
        align-items: center;
    }
    
    /* Hide "geplant" status badge on mobile */
    .appointment-status-badge .badge.bg-info {
        display: none !important;
    }
    
    /* Second row: Date/time section, then location on separate line below */
    .appointment-item > .d-flex.justify-content-between:last-of-type {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Date/time info on its own line */
    .appointment-item > .d-flex.justify-content-between:last-of-type > div:first-child {
        width: 100%;
        margin-bottom: 0.25rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Location: Full width, left-aligned, on separate line below date/time */
    .appointment-item > .d-flex.justify-content-between:last-of-type > div:last-child {
        width: 100%;
        min-width: unset !important;
        margin-top: 0.25rem !important;
        text-align: left !important;
        padding-left: 0 !important;
    }
    
    .appointment-item .text-start {
        margin-left: 0 !important;
        min-width: unset !important;
        text-align: left !important;
        padding-left: 0 !important;
    }
    
    .appointment-item {
        position: relative;
    }
    
    /* Title wrapper: fully left-aligned */
    .appointment-title-wrapper {
        display: flex;
        align-items: center;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* =================================================================================
   RESPONSIVE TASK BUTTONS (< 900px)
   ================================================================================= */

@media (max-width: 899px) {
    /* Task cards: Stack content vertically */
    .task-card .card-body > .d-flex {
        flex-direction: column !important;
    }
    
    /* Button container: Full width and below content */
    .task-card .d-flex.flex-column[style*="min-width"] {
        min-width: unset !important;
        width: 100% !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-left: 39px !important; /* Align with "Fällig" icon (24px task icon + 12px me-3 margin + 3px adjustment) */
    }
    
    /* Hide button text, show only icons - for task cards */
    .task-card .btn-sm {
        font-size: 0 !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
        width: auto !important;
        height: 32px !important; /* Fixed height for all buttons */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .task-card .btn-sm i,
    .task-card .btn-sm .fa {
        font-size: 1rem !important;
    }
    
    /* List group items: Make entire task entry stack vertically */
    .list-group-item.d-flex.justify-content-between,
    .list-group-item > .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    /* Content area: Full width */
    .list-group-item .d-flex.align-items-start.me-auto {
        width: 100% !important;
        margin-right: 0 !important;
    }
    
    /* Buttons container: Full width, horizontal, at the bottom */
    .list-group-item .d-flex.flex-column.align-items-end,
    .list-group-item .d-flex.flex-column[style*="min-width"] {
        align-items: flex-start !important;
        flex-direction: row !important;
        width: 100% !important;
        margin-top: 1rem !important;
        gap: 0.5rem;
        min-width: unset !important;
        padding-left: 36px !important; /* Align with "Fällig" icon (24px task icon + 12px gap) */
    }
    
    .list-group-item .d-flex.flex-column.align-items-end .btn,
    .list-group-item .d-flex.flex-column.align-items-end form,
    .list-group-item .d-flex.flex-column[style*="min-width"] .btn,
    .list-group-item .d-flex.flex-column[style*="min-width"] form {
        width: auto !important;
        margin-bottom: 0 !important;
    }
    
    /* Hide button text in list group items, show only icons */
    .list-group-item .btn-sm {
        font-size: 0 !important;
        padding: 0.375rem 0.75rem !important;
        width: auto !important;
    }
    
    .list-group-item .btn-sm i,
    .list-group-item .btn-sm .fa {
        font-size: 1rem !important;
    }
}

/* =================================================================================
   RESPONSIVE GOALS KANBAN (< 900px)
   ================================================================================= */

@media (max-width: 899px) {
    /* Stack goal columns vertically */
    .card-body .row.g-1 > .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Add spacing between stacked columns */
    .card-body .row.g-1 > .col-4:not(:last-child) {
        margin-bottom: 0.5rem;
    }
    
    /* Full width for "Pausiert" section */
    .card-body .row.g-1.mt-2 > .col-12 {
        margin-top: 0.5rem !important;
    }
}

/* =================================================================================
   CARE PROGRAM HEADER - "bei:" and "seit:" alignment (ALL screen sizes)
   ================================================================================= */

/* Keep avatar and text side by side */
.card-body > .row.align-items-start .d-flex.align-items-center {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/* Avatar margin */
.card-body > .row.align-items-start .d-flex.align-items-center img.rounded-circle {
    margin-right: 0.75rem;
}

/* =================================================================================
   RESPONSIVE CARE PROGRAM HEADER (< 900px)
   ================================================================================= */

@media (max-width: 899px) {
    /* Hide badges in header on mobile */
    .care-program-badges {
        display: none !important;
    }
    
    /* Show badges below description on mobile */
    .care-program-badges-mobile {
        display: block !important;
    }
    
    /* Completed task check icon: Position below task icon on mobile */
    .list-group-item .fa-check-circle.text-success.fa-lg {
        /* Move check icon container to the left */
        position: absolute;
        left: 12px;
        top: 40px;
        margin-top: 0 !important;
    }
    
    /* Make container relative for absolute positioning */
    .list-group-item {
        position: relative;
    }
}