/*
 * Styles for appointment_detail.html
 */

/* Section header for "Услуги из планов лечения" */
.appointments-section-head {
    margin: -12px -15px 10px; /* Overrides default pf-row-head margin */
    padding: 12px 15px; /* Overrides default pf-row-head padding */
    display: flex; /* Ensure flex behavior */
    align-items: center; /* Vertical alignment */
    justify-content: space-between; /* Space between title and button */
    gap: 10px; /* Gap between elements */
}

.appointments-section-head .pf-block-h {
    padding: 0;
    border: none;
    margin: 0;
}

/* Hidden form for adding a new item */
.add-item-form-container {
    padding: 10px 0 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 15px;
}

.add-item-form-container .input-with-button {
    display: flex;
    gap: 10px;
    align-items: center;
}

.add-item-form-container .input-with-button .pf-input {
    flex-grow: 1;
}

/* Individual linked item row (base styles) */
.linked-item-row {
    /* Add any base styles for the row if needed, e.g., margin-bottom */
}

.appointment-item {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 15px; /* Spacing between columns */
    padding: 10px 0; /* Vertical padding for each item */
}

/* Read mode specific styles */
.item-view-mode .price-display {
    background-color: transparent;
    border: none;
    color: var(--text);
    font-weight: 600; /* Assuming price should be bold */
    min-width: 80px; /* Give some consistent width */
    text-align: right; /* Align price to the right */
}

.item-view-mode .appointment-details {
    flex-grow: 1; /* Allow details to take available space */
    display: flex;
    flex-direction: column;
}

.item-view-mode .appointment-details b {
    display: block; /* Ensure service name takes its own line */
}

.item-view-mode .item-status-pill {
    font-size: 0.85em; /* Adjust font size for the pill */
    /* Inherits other pf-pill styles */
}

/* Edit mode specific styles */
.item-edit-mode {
    background-color: var(--bg-1); /* Use a variable or specific color */
    padding: 10px 0; /* Match padding of view mode */
}

.item-edit-mode .appointment-details {
    flex-grow: 1;
    display: flex;
    gap: 15px;
    align-items: center;
}

.item-edit-mode .form-group {
    flex: 1; /* Distribute space evenly */
}

.item-edit-mode .form-group.select-service {
    flex: 2; /* Give more space to service select */
}


/* Refactored Appointment Info Block */
.appointment-info-list {
    display: flex; /* Use flexbox for alignment */
    gap: 12px; /* Space between items */
    margin-top: 16px; /* Space from the title */
    padding: 16px 0; /* Vertical padding */
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.appointment-info-item {
    flex: 1; /* Each item takes equal space */
    display: flex;
    flex-direction: column;
    gap: 4px; /* Space between label and value */
    padding: 12px;
    background-color: rgba(245, 249, 255, 0.7); /* Subtle background */
    border-radius: 12px; /* Rounded corners */
    border: 1px solid transparent;
    transition: border-color .2s ease;
}

.appointment-info-item:hover {
    border-color: rgba(30,102,255,.2);
}

.appointment-info-item .info-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}

.appointment-info-item .info-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.appointment-info-item .info-value a {
    color: var(--blue);
    text-decoration: none;
}
.appointment-info-item .info-value a:hover {
    text-decoration: underline;
}

/* Adjust for mobile */
@media (max-width: 600px) {
    .appointment-info-list {
        flex-direction: column;
    }
}

/* Styles for Photo Thumbnails on Appointment Detail page */
.photo-thumbnail-gallery {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allow sections to wrap on small screens */
}

.photo-thumbnail-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.photo-thumbnail-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    flex-basis: 100%; /* Make title take full width in case of wrapping */
}

.photo-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    transition: transform .2s ease, box-shadow .2s ease;
}
.photo-thumbnail:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow);
}