/**
 * Meet-Flow-Manager Custom CSS
 * Minimal extensions for Pico CSS.
 *
 * @license MIT
 * @copyright 2025 Meet-Flow-Manager
 */

/* =============================================
   SEMANTIC COLOR TOKENS
   ============================================= */

:root {
    --color-success: #2a7d2e;
    --color-danger: #c62828;
    --color-warning: #e67e00;
    --color-info: #1565c0;
    --color-neutral: #5a6570;

    --badge-success-bg: #d4edda;
    --badge-danger-bg: #f8d7da;
    --badge-warning-bg: #fff3cd;
    --badge-info-bg: #d1ecf1;
    --badge-neutral-bg: #e9ecef;
}

[data-theme="dark"] {
    --color-success: #66bb6a;
    --color-danger: #ef5350;
    --color-warning: #ffa726;
    --color-info: #42a5f5;
    --color-neutral: #9ea7b0;

    --badge-success-bg: #1b3d1f;
    --badge-danger-bg: #3d1518;
    --badge-warning-bg: #3d2e0a;
    --badge-info-bg: #0a2a3d;
    --badge-neutral-bg: #2a2f35;
}

/* =============================================
   NAVIGATION (Sticky Header)
   ============================================= */

.main-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pico-background-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* =============================================
   DIALOG/MODAL
   ============================================= */

dialog {
    border: none;
    border-radius: var(--pico-border-radius);
    padding: 0;
    max-width: min(32rem, calc(100vw - 2rem));
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog > article {
    margin: 0;
    max-height: 90vh;
    overflow-y: auto;
}

dialog > article > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

dialog > article > header h3 { margin: 0; }

dialog.modal-lg { max-width: 50rem; }

.loading-overlay {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 400;
}

.loading-overlay.active { display: grid; }

[data-theme="dark"] .loading-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */

#toast-container {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1000;
    max-width: 400px;
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

#toast-container:empty { display: none; }

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--pico-primary);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.toast-fadeout {
    opacity: 0;
    transform: translateX(100%);
}

.toast span { flex: 1; }

.toast-close {
    background: none;
    border: none;
    padding: 0.25rem;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: var(--pico-muted-color);
    width: auto;
}

[data-theme="dark"] .toast {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* =============================================
   TOAST COLOR VARIANTS
   ============================================= */

.alert-success { border-left-color: var(--color-success); }
.alert-error,
.alert-danger { border-left-color: var(--color-danger); }
.alert-warning { border-left-color: var(--color-warning); }
.alert-info { border-left-color: var(--color-info); }

/* =============================================
   BADGES
   ============================================= */

.badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
}

.badge-neutral {
    background: var(--badge-neutral-bg);
    color: var(--color-neutral);
}

.badge-success {
    background: var(--badge-success-bg);
    color: var(--color-success);
}

.badge-danger {
    background: var(--badge-danger-bg);
    color: var(--color-danger);
}

.badge-warning {
    background: var(--badge-warning-bg);
    color: var(--color-warning);
}

.badge-info {
    background: var(--badge-info-bg);
    color: var(--color-info);
}

/* =============================================
   TIMELINE (Notes) - Essential
   ============================================= */

.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--pico-spacing);
}

.timeline-item {
    padding: var(--pico-spacing);
    background: var(--pico-card-background-color);
    border-radius: var(--pico-border-radius);
    border-left: 3px solid var(--pico-primary);
}

.timeline-item.pinned {
    border-left-color: var(--color-warning);
}

.timeline-text {
    white-space: pre-wrap;
    word-break: break-word;
}

/* =============================================
   SEARCHABLE SELECT - Essential Component
   ============================================= */

.searchable-select-wrapper {
    position: relative;
}

.searchable-select-control {
    position: relative;
    display: flex;
    align-items: center;
}

.searchable-select-control.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.searchable-select-input {
    flex: 1;
    padding-right: 3rem;
}

.searchable-select-clear {
    position: absolute;
    right: 2rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.searchable-select-clear.visible {
    opacity: 1;
}

.searchable-select-icon {
    position: absolute;
    right: 0.75rem;
    pointer-events: none;
    color: var(--pico-muted-color);
}

.searchable-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 16rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    display: none;
}

.searchable-select-dropdown.show { display: block; }

[data-theme="dark"] .searchable-select-dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.searchable-select-option {
    padding: var(--pico-spacing);
    cursor: pointer;
}

.searchable-select-option.highlighted {
    background: var(--pico-secondary-hover-background);
}

.searchable-select-option.selected {
    background: var(--pico-primary-focus);
}

/* =============================================
   ENCRYPTION - Critical
   ============================================= */

.encrypted-content {
    filter: blur(4px);
    user-select: none;
    transition: filter 0.2s;
}

.encrypted-content.decrypted-content {
    filter: none;
    user-select: auto;
}

/* =============================================
   SPINNER
   ============================================= */

.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--pico-muted-border-color);
    border-top-color: var(--pico-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================
   CHECKLIST
   ============================================= */

.checklist-item {
    display: flex;
    align-items: center;
    gap: var(--pico-spacing);
    padding: 0.5rem;
}

.checklist-item.completed {
    opacity: 0.6;
    text-decoration: line-through;
}

/* =============================================
   PAGINATION
   ============================================= */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}

.pagination a,
.pagination span {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    text-decoration: none;
}

.pagination .current {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

/* =============================================
   UTILITIES
   ============================================= */

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--pico-muted-color); }

.page-header {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
}

/* Compact button variant */
button.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Active state for toggle buttons */
.btn-view-toggle.active {
    background: var(--pico-primary);
    color: var(--pico-primary-inverse);
    border-color: var(--pico-primary);
}

/* Help icon */
.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.75rem;
    background: var(--pico-muted-color);
    color: var(--pico-background-color);
    border-radius: 50%;
    cursor: help;
}

.help-icon::before { content: "?"; }

/* =============================================
   STICKY FOOTER
   ============================================= */

html, body {
    height: 100vh;
}

body > footer {
    position: sticky;
    top: 100vh;
}

/* =============================================
   TABLE ENHANCEMENTS
   ============================================= */

figure table button,
figure table [type="submit"],
figure table [type="button"] {
    margin-top: 0;
    margin-bottom: 0;
}

tr[data-href] {
    cursor: pointer;
}

/* =============================================
   FORM VALIDATION
   ============================================= */

label [aria-invalid="true"] ~ small,
label:has([aria-invalid="true"]) > small:last-child {
    color: var(--color-danger);
}

/* =============================================
   RESPONSIVE TABLES (Desktop/Mobile Columns)
   ============================================= */

.list-desktop-col { display: none; }
.list-mobile-col { display: table-cell; }

@media (min-width: 768px) {
    .list-desktop-col { display: table-cell; }
    .list-mobile-col { display: none; }
}

/* =============================================
   STATS TABLE (Details sections)
   ============================================= */

details > table td:last-child {
    text-align: right;
}