/* =========================================================================
   Modal
   ========================================================================= */

/* Modal container acts as the backdrop */
#modal-container,
.modal-container {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-container.show,
.modal-container.show {
    opacity: 1;
    visibility: visible;
}

/* Legacy backdrop element (for backwards compatibility) */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    background: var(--ip-bg-solid);
    border-radius: var(--ip-radius);
    box-shadow: var(--ip-shadow);
    z-index: 201;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.modal-lg {
    max-width: 700px;
}

.modal.show,
.modal.show ~ .modal-backdrop,
.modal.show .modal-backdrop,
#modal-container.show .modal-backdrop {
    opacity: 1;
}

.modal.show {
    transform: translate(-50%, -50%) scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ip-border-subtle);
}

.modal-title,
.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--ip-border-subtle);
}

/* Modal with dialog wrapper (Bootstrap-style structure) */
.modal-dialog {
    position: relative;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    z-index: 201;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal-dialog.modal-sm {
    max-width: 400px;
}

.modal-dialog.modal-md {
    max-width: 480px;
}

.modal-dialog.modal-lg {
    max-width: 600px;
}

.modal.show .modal-dialog,
.modal-dialog.show {
    opacity: 1;
    transform: scale(1);
}

.modal-content {
    background: var(--ip-bg-solid);
    border-radius: var(--ip-radius);
    box-shadow: var(--ip-shadow);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* Modal body with tabs variant */
.modal-body--tabs {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Modal tabs - horizontal tab bar */
.modal-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ip-border-subtle);
    flex-shrink: 0;
}

.modal-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ip-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--ip-radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-tab:hover {
    background: var(--ip-bg-glass);
    color: var(--ip-text);
}

.modal-tab.active {
    background: var(--ip-primary);
    color: white;
}

/* Wallpaper picker specific styles */
.wallpaper-picker-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-height: 300px;
}

.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.wallpaper-item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--ip-radius-sm);
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    background: var(--ip-bg-glass);
}

.wallpaper-item:hover {
    border-color: var(--ip-border);
    transform: scale(1.02);
}

.wallpaper-item.selected {
    border-color: var(--ip-primary);
}

.wallpaper-item img,
.wallpaper-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wallpaper-item .video-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    color: white;
}

.wallpaper-item .video-badge svg {
    width: 12px;
    height: 12px;
}

.wallpaper-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--ip-text-muted);
    gap: 12px;
}

.wallpaper-loading svg {
    width: 32px;
    height: 32px;
}

.wallpaper-empty {
    text-align: center;
    padding: 40px;
    color: var(--ip-text-muted);
}

/* Media picker modal */
.modal-media-picker {
    max-width: 800px;
}

.modal-media-picker .modal-content {
    max-height: 85vh;
}

.modal-media-picker .modal-footer {
    justify-content: space-between;
}

.mp-hint {
    font-size: 12px;
    color: var(--ip-text-muted);
}

.mp-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--ip-border-subtle);
    background: var(--ip-bg-glass);
}

.mp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.mp-crumb {
    color: var(--ip-text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--ip-radius-xs);
    transition: all 0.15s ease;
}

.mp-crumb:hover {
    background: var(--ip-bg-glass-hover);
    color: var(--ip-primary);
}

.mp-crumb svg {
    width: 14px;
    height: 14px;
}

.mp-crumb-sep {
    color: var(--ip-text-muted);
    opacity: 0.5;
}

.mp-upload-zone {
    margin: 12px 20px;
    padding: 24px;
    border: 2px dashed var(--ip-border-subtle);
    border-radius: var(--ip-radius-sm);
    text-align: center;
    color: var(--ip-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mp-upload-zone:hover,
.mp-upload-zone.dragover {
    border-color: var(--ip-primary);
    background: rgba(59, 130, 246, 0.05);
}

.mp-upload-zone svg {
    width: 32px;
    height: 32px;
}

.mp-upload-zone input {
    display: none;
}

/* Media picker uses .media-grid and .media-item - modal-specific overrides only */
.modal-media-picker .media-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 300px;
    align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.modal-media-picker .media-info {
    padding: 6px 8px;
}

.modal-media-picker .media-name {
    font-size: 11px;
}

.modal-media-picker .media-size {
    display: none;
}

/* Close button for modals */
.btn-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ip-text-muted);
    cursor: pointer;
    border-radius: var(--ip-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-close:hover {
    background: var(--ip-bg-glass);
    color: var(--ip-text);
}

.btn-close svg {
    width: 18px;
    height: 18px;
}

/* -------------------------------------------------------------------------
   Modal Styled Variant (.modal--styled)

   Modern modal design with icon header. Use for feature-specific modals.
   Apply page-specific icon gradient via inline <style> in template.

   Structure:
   <div class="modal modal--styled">
     <div class="modal-header">
       <div class="modal-header-content">
         <div class="modal-icon"><i data-lucide="..."></i></div>
         <div>
           <h3 class="modal-title">Title</h3>
           <p class="modal-subtitle">Description</p>
         </div>
       </div>
       <button class="btn-close">...</button>
     </div>
     <div class="modal-body">...</div>
     <div class="modal-footer">...</div>
   </div>
   ------------------------------------------------------------------------- */
.modal--styled {
    max-width: 480px;
}

.modal--styled .modal-header {
    padding: 24px 24px 16px;
    border-bottom: none;
}

.modal--styled .modal-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modal--styled .modal-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ip-primary), #8b5cf6);
    border-radius: 12px;
    color: white;
}

.modal--styled .modal-icon svg {
    width: 24px;
    height: 24px;
}

.modal--styled .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.modal--styled .modal-subtitle {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ip-text-muted);
}

.modal--styled .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ip-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal--styled .btn-close:hover {
    background: var(--ip-bg-glass);
    color: var(--ip-text);
}

.modal--styled .btn-close svg {
    width: 18px;
    height: 18px;
}

.modal--styled .modal-body {
    padding: 8px 24px 24px;
}

.modal--styled .modal-footer {
    padding: 16px 24px 24px;
    border-top: none;
    gap: 12px;
}

/* Modal Slides Container (for slide navigation) */
.modal-slides-container {
    position: relative;
    overflow: hidden;
}

.modal-slide {
    display: none;
}

.modal-slide.active {
    display: block;
    animation: modalSlideIn 0.2s ease-out;
}

.modal-slide.slide-out-left {
    animation: modalSlideOutLeft 0.2s ease-out forwards;
}

.modal-slide.slide-in-right {
    animation: modalSlideInRight 0.2s ease-out forwards;
}

@keyframes modalSlideIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-20px); opacity: 0; }
}

@keyframes modalSlideInRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Back button in modal header */
.modal-back-btn {
    margin-right: 8px;
}

/* Screen Selection Modal (for editing pages on multiple screens) */
.screen-selection-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.screen-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.screen-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ip-bg-glass);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    font-size: 14px;
    color: var(--ip-text);
}

.screen-select-item:hover {
    background: var(--ip-bg-glass-hover);
    border-color: var(--ip-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.screen-select-item span {
    flex: 1;
}

.screen-select-item i:first-child {
    color: var(--ip-primary);
    width: 20px;
    height: 20px;
}

.screen-select-item i:last-child {
    color: var(--ip-text-muted);
    width: 16px;
    height: 16px;
}

/* Slide Type List (full width) */
.slide-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slide-type-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--ip-bg-glass);
    border: 1px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.slide-type-item:hover {
    background: var(--ip-bg-glass-hover);
    border-color: var(--ip-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.slide-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-bg-solid);
    border-radius: var(--ip-radius-xs);
    color: var(--ip-primary);
    flex-shrink: 0;
}

.slide-type-icon i,
.slide-type-icon svg {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.slide-type-info {
    flex: 1;
    min-width: 0;
}

.slide-type-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 2px;
}

.slide-type-desc {
    font-size: 12px;
    color: var(--ip-text-secondary);
    line-height: 1.4;
}

/* Category link meta (count + chevron) */
.slide-type-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ip-text-secondary);
    flex-shrink: 0;
}

.slide-type-count {
    font-size: 12px;
    background: var(--ip-bg-solid);
    padding: 2px 8px;
    border-radius: 10px;
}

.slide-type-meta i,
.slide-type-meta svg {
    width: 16px;
    height: 16px;
}

.slide-category-link:hover .slide-type-meta {
    color: var(--ip-primary);
}

.badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
    position: absolute;
    top: 8px;
    right: 8px;
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--ip-warning);
}

/* New Screen Button in Sidebar */
.nav-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 8px;
}

.nav-section-header .label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-text-muted);
}

.btn-add-screen {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: var(--ip-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-screen:hover {
    background: var(--ip-bg-glass-hover);
    color: var(--ip-primary);
}

.btn-add-screen svg {
    width: 16px;
    height: 16px;
}

/* Nav Item Wrapper (for inline add button) */
.nav-item-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-item-wrapper .nav-item {
    flex: 1;
}

.nav-item-wrapper .btn-add-screen {
    margin-right: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-group:hover .nav-item-wrapper .btn-add-screen,
.nav-item-wrapper .btn-add-screen:focus {
    opacity: 1;
}

/* Note: Screen Dashboard styles moved to screen-dashboard.jsr */
/* Note: Form section/label/input styles are in Forms section above */

/* Orientation Cards */
.orientation-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.orientation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px;
    border: 2px solid var(--ip-border-subtle);
    border-radius: var(--ip-radius-sm);
    background: var(--ip-bg-solid);
    cursor: pointer;
    transition: all 0.2s;
}

.orientation-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.orientation-card:hover {
    border-color: var(--ip-primary);
    background: var(--ip-bg-glass-hover);
}

.orientation-card.selected {
    border-color: var(--ip-primary);
    background: rgba(59, 130, 246, 0.05);
}

.orientation-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.orientation-preview .preview-screen {
    background: linear-gradient(135deg, #e0e7ff, #dbeafe);
    border: 2px solid var(--ip-border-subtle);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.orientation-preview.landscape .preview-screen {
    width: 80px;
    height: 50px;
}

.orientation-preview.portrait .preview-screen {
    width: 50px;
    height: 80px;
}

.orientation-preview .preview-content {
    width: 100%;
    height: 100%;
    background: var(--ip-bg-glass);
    border-radius: 2px;
}

.orientation-card.selected .preview-screen {
    border-color: var(--ip-primary);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
}

.orientation-info {
    text-align: center;
}

.orientation-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--ip-text);
}

.orientation-desc {
    display: block;
    font-size: 11px;
    color: var(--ip-text-muted);
    margin-top: 2px;
}

.orientation-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-primary);
    border-radius: 50%;
    color: white;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s;
}

.orientation-check svg {
    width: 12px;
    height: 12px;
}

.orientation-card.selected .orientation-check {
    opacity: 1;
    transform: scale(1);
}

/* Optional Fields Toggle */
.form-section-collapsed {
    border-top: 1px solid var(--ip-border-subtle);
    padding-top: 16px;
    margin-top: 8px;
}

.form-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--ip-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s;
}

.form-toggle:hover {
    color: var(--ip-text);
}

.form-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.form-toggle.open svg {
    transform: rotate(180deg);
}

.optional-fields {
    padding-top: 16px;
}

.optional-fields[hidden] {
    display: none;
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-label-sm {
    font-size: 13px;
    color: var(--ip-text-secondary);
    white-space: nowrap;
}

.form-input-sm {
    width: 100px;
    padding: 8px 12px;
    font-size: 14px;
}

/* Calendar Type Cards */
.calendar-type-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.calendar-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--ip-border);
    border-radius: var(--ip-radius-xs);
    background: var(--ip-bg-solid);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.calendar-type-card:hover {
    border-color: var(--ip-primary);
    background: var(--ip-bg-glass-hover);
}

.calendar-type-card.selected {
    border-color: var(--ip-primary);
    background: rgba(59, 130, 246, 0.05);
}

.calendar-type-card input[type="radio"] {
    display: none;
}

.calendar-type-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-bg-glass);
    border-radius: 8px;
    color: var(--ip-primary);
    flex-shrink: 0;
}

.calendar-type-icon.microsoft {
    color: #00a4ef;
}

.calendar-type-icon.google {
    color: #4285f4;
}

.calendar-type-icon svg {
    width: 18px;
    height: 18px;
}

.calendar-type-info {
    flex: 1;
    min-width: 0;
}

.calendar-type-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--ip-text);
}

.calendar-type-desc {
    display: block;
    font-size: 12px;
    color: var(--ip-text-muted);
    margin-top: 1px;
}

.calendar-type-check {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-primary);
    border-radius: 50%;
    color: white;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s;
}

.calendar-type-check svg {
    width: 12px;
    height: 12px;
}

.calendar-type-card.selected .calendar-type-check {
    opacity: 1;
    transform: scale(1);
}

/* Calendar Form */
.calendar-form {
    animation: fadeIn 0.2s ease;
}

.calendar-form .form-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ip-text-muted);
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 8px;
}

.color-option {
    cursor: pointer;
}

.color-option input[type="radio"] {
    display: none;
}

.color-swatch {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color);
    border: 3px solid transparent;
    transition: all 0.2s;
}

.color-option:hover .color-swatch {
    transform: scale(1.1);
}

.color-option input:checked + .color-swatch {
    border-color: var(--ip-bg-solid);
    box-shadow: 0 0 0 2px var(--color);
}

/* OAuth Info */
.calendar-oauth-info {
    padding: 20px;
    background: var(--ip-bg-glass);
    border-radius: var(--ip-radius-xs);
    text-align: center;
}

.oauth-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--ip-text-secondary);
}

.oauth-message svg {
    width: 32px;
    height: 32px;
    color: var(--ip-primary);
}

.oauth-message p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}