/**
 * Add Viewing Modal Component Styles
 */

/* Modal z-index - must be higher than backdrop (1064) for modal stacking */
#addViewingModal {
    z-index: 1065 !important;
}

/* Modal styling */
#addViewingModal .modal-header {
    border-bottom: none;
}

#addViewingModal .modal-title i {
    margin-right: 0.5rem;
}

#addViewingModal .modal-body {
    padding-top: 0.5rem;
}

#addViewingModal .modal-footer {
    border-top: 1px solid var(--mv-border-color);
}

/* Title display */
#viewingTitleDisplay {
    font-size: 1.1rem;
    color: #333;
    padding: 0.25rem 0;
}

/* Status button group */
#addViewingModal .btn-group .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

#addViewingModal .btn-group .btn i {
    margin-right: 0.25rem;
}

/* Date precision button group - same size as status buttons */
#addViewingModal .date-precision-group .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Time toggle button */
.viewing-time-toggle {
    padding: 0.25rem 0.45rem;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 0.375rem;
}

/* Release date link styling */
#useReleaseDateLink {
    text-decoration: none;
}

#useReleaseDateLink:hover {
    text-decoration: underline;
}

/* Improve select styling */
#addViewingModal .form-select optgroup {
    font-weight: 600;
    color: var(--mv-text-secondary);
}

/* Toast styling now in ui-helpers.css */

/* Quick Method Buttons */
.quick-method-btns {
    margin-bottom: 0.5rem;
}

.quick-method-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.quick-method-btn i {
    font-size: 0.85rem;
}

.quick-method-btn.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

/* Custom icon text for services without Bootstrap icons */
.quick-method-icon {
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* Netflix button - Red theme */
.quick-method-netflix {
    border-color: #E50914;
    color: #E50914;
}

.quick-method-netflix:hover,
.quick-method-netflix.active {
    background-color: #E50914;
    border-color: #E50914;
    color: white;
}

/* Amazon Prime button - Blue theme */
.quick-method-prime {
    border-color: #00A8E1;
    color: #00A8E1;
}

.quick-method-prime:hover,
.quick-method-prime.active {
    background-color: #00A8E1;
    border-color: #00A8E1;
    color: white;
}

/* Max (HBO) button - Purple theme */
.quick-method-max {
    border-color: #6f42c1;
    color: #6f42c1;
}

.quick-method-max:hover,
.quick-method-max.active {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}

/* Rating Section in Add Viewing Modal */
.viewing-rating-container {
    display: flex;
    justify-content: center;
    padding: 0.25rem 0;
}

/* Make the rating component centered and compact in modal context */
.viewing-rating-container .title-rating {
    width: 100%;
    max-width: 350px;
}

/* Adjust thumbs for modal - slightly smaller */
.viewing-rating-container .title-rating-thumbs {
    justify-content: center;
    gap: 10px;
}

.viewing-rating-container .title-rating-thumb {
    padding: 6px 14px;
    min-width: 60px;
}

.viewing-rating-container .title-rating-thumb .thumb-emoji {
    font-size: 1.3rem;
}

/* Adjust stars for modal */
.viewing-rating-container .title-rating-stars {
    justify-content: center;
}

.viewing-rating-container .title-rating-star {
    font-size: 1.1rem;
}

/* Label below rating */
.viewing-rating-container .title-rating-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-align: center;
    margin-top: 4px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    /* Use Release link gets its own row on mobile */
    #viewingDateSection #useReleaseDateLink {
        width: 100%;
    }

    /* Reduce modal body padding on mobile */
    #addViewingModal .modal-body {
        padding: 0.5rem 0.75rem;
    }

    /* Reduce title display spacing */
    #addViewingModal #viewingTitleDisplay {
        font-size: 1rem;
        padding: 0;
    }

    /* Title section - reduce margin */
    #addViewingModal .modal-body > form > .mb-3:first-child {
        margin-bottom: 0.5rem !important;
    }

    /* Reduce spacing on all mb-3 sections */
    #addViewingModal .modal-body .mb-3 {
        margin-bottom: 0.65rem !important;
    }

    /* Reduce mb-2 spacing */
    #addViewingModal .modal-body .mb-2 {
        margin-bottom: 0.35rem !important;
    }

    /* Reduce streaming service box padding */
    #addViewingModal #plannedServiceDisplay {
        padding: 0.5rem 0.75rem !important;
    }

    /* Reduce form labels size and spacing */
    #addViewingModal .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }

    /* Date precision and Status stay horizontal on mobile */
    #addViewingModal .date-precision-group,
    #addViewingModal .btn-group[role="group"] {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }

    #addViewingModal .date-precision-group .btn,
    #addViewingModal .btn-group[role="group"] .btn {
        flex: 1;
        padding: 0.25rem 0.35rem;
        font-size: 0.8rem;
    }

    /* Reduce rating section spacing */
    #addViewingModal #viewingRatingSection .form-label {
        margin-bottom: 0.15rem;
    }

    /* Make rating stars slightly smaller on mobile */
    #addViewingModal .viewing-rating-container .title-rating-star {
        font-size: 1rem;
    }

    /* Rating label smaller */
    #addViewingModal .viewing-rating-container .title-rating-label {
        font-size: 0.75rem;
        margin-top: 2px;
    }

    /* Reduce gap between rating and thumbs */
    #addViewingModal #viewingRatingSection .d-flex.align-items-center {
        gap: 0.5rem !important;
    }

    /* Episode dropdowns - reduce padding */
    #addViewingModal #episodeSection .form-select {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }
}

/* ========================================
   Footer Action Buttons
   ======================================== */
#addViewingModal .modal-footer {
    padding: 0.5rem 1rem;
}

#addViewingModal .modal-footer .btn-sm {
    padding: 0.35rem 0.5rem;
}

/* Action button hover states */
#viewingReviewBtn:hover {
    color: orange;
    border-color: orange;
}

#viewingRiylBtn:hover {
    color: #6f42c1;
    border-color: #6f42c1;
}

#viewingSuggestBtn:hover {
    color: #d63384;
    border-color: #d63384;
}

#viewingNoteBtn:hover {
    color: #0d6efd;
    border-color: #0d6efd;
}

/* Active state when review exists - light background, dark icon */
#viewingReviewBtn.has-review {
    color: #e67300;
    border-color: #e67300;
    background-color: #fff3e6;
}

/* Active state when RIYL exists - light background, dark icon */
#viewingRiylBtn.has-riyl {
    color: #6f42c1;
    border-color: #6f42c1;
    background-color: #f3eefa;
}

/* Active state when note exists - light background, dark icon */
#viewingNoteBtn.has-note {
    color: #0d6efd;
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* Active state when tags exist - light background, dark icon */
#viewingTagsBtn.has-tags {
    color: #198754;
    border-color: #198754;
    background-color: #e8f5e9;
}

/* ========================================
   Note Popup (full width overlay)
   ======================================== */
#notePopup {
    position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
    margin: 0 1rem;
    z-index: 1080 !important;
    border: 1px solid var(--mv-border-color);
}

#notePopup .card-body {
    background: #fff;
}

#notePopupInput {
    font-size: 0.95rem;
    resize: none;
}

/* Note display in form */
#viewingNoteDisplay {
    background-color: #f8f9fa;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border-left: 3px solid #0d6efd;
}

/* ========================================
   More... Buttons (inline with quick picks)
   ======================================== */
.more-btn {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.5rem !important;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 1px;
}

/* ========================================
   Z-Index fixes for modals opened from viewing modal
   ======================================== */
#reviewModal,
#tvReviewModal,
#riylModal,
#friendSuggestionModal {
    z-index: 1070 !important;
}

/* ========================================
   Bulk Watch Season Buttons
   ======================================== */
.bulk-season-btn {
    transition: all 0.15s ease;
}

.bulk-season-btn.btn-primary {
    /* Selected state - solid blue */
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.bulk-season-info {
    vertical-align: middle;
    color: #6c757d;
}

.bulk-season-info:hover {
    color: #0d6efd;
}

/* Watch Selected button */
#watchSelectedBtn {
    white-space: nowrap;
}

/* ========================================
   Season Info Popup
   ======================================== */
.season-info-popup {
    background: white;
    border: 1px solid var(--mv-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 1rem;
    min-width: 220px;
    max-width: 320px;
    font-size: 0.85rem;
}

.season-info-popup-content {
    max-height: 300px;
    overflow-y: auto;
}

.season-info-row {
    padding: 0.25rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.season-info-row:last-child {
    border-bottom: none;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] #addViewingModal .modal-footer {
    border-top-color: var(--mv-border-color);
}
[data-bs-theme="dark"] #viewingTitleDisplay {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .viewing-rating-container .title-rating-label {
    color: var(--mv-text-muted);
}

/* Active button states — use rgba tints for dark mode */
[data-bs-theme="dark"] #viewingReviewBtn.has-review {
    background-color: rgba(230, 115, 0, 0.15);
}
[data-bs-theme="dark"] #viewingRiylBtn.has-riyl {
    background-color: rgba(111, 66, 193, 0.15);
}
[data-bs-theme="dark"] #viewingNoteBtn.has-note {
    background-color: rgba(13, 110, 253, 0.15);
}
[data-bs-theme="dark"] #viewingTagsBtn.has-tags {
    background-color: rgba(25, 135, 84, 0.15);
}

/* Note popup */
[data-bs-theme="dark"] #notePopup {
    border-color: var(--mv-border-color);
}
[data-bs-theme="dark"] #notePopup .card-body {
    background: var(--mv-bg-card);
}
[data-bs-theme="dark"] #viewingNoteDisplay {
    background-color: var(--mv-bg-surface);
}

/* Bulk season info */
[data-bs-theme="dark"] .bulk-season-info {
    color: var(--mv-text-muted);
}

/* Season info popup */
[data-bs-theme="dark"] .season-info-popup {
    background: var(--mv-bg-dropdown);
    border-color: var(--mv-border-color);
    box-shadow: var(--mv-shadow-lg);
}
[data-bs-theme="dark"] .season-info-row {
    border-bottom-color: var(--mv-border-color);
}

/* TV Wizard choice buttons — text color independent of border */
.tv-wizard-btn {
    color: var(--bs-body-color);
}
.tv-wizard-btn .small {
    color: var(--bs-secondary-color);
}
.tv-wizard-btn:hover {
    color: #fff;
}
.tv-wizard-btn:hover .small {
    color: rgba(255, 255, 255, 0.8);
}