/**
 * Bohio MAG - Composants réutilisables
 */

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

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

.btn-primary:hover {
    background: var(--primary-light);
    color: var(--bg-dark);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--gray-300);
    color: #000;
    /* ensure readable on light bg */
}

/* Explicit white button style for places where background is white */
.btn-white {
    background: #ffffff;
    color: #000;
    border: 1px solid #e6e6e6;
}

.btn-white:hover {
    background: #f7f7f7;
    color: #000;
    border-color: #d9d9d9;
}

/* A 2px yellow border on every secondary button turned any row of actions into
   a wall of outlined boxes. A subtle surface with a hairline in the border
   colour reads as secondary without shouting. */
.btn-outline {
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: #4A4350;
    color: var(--text-primary);
}

/* Ghost button — fond noir, texte blanc, bordure semi-transparente */
.btn-ghost {
    background: #000000;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.7);
    color: #ffffff;
}

/* Ensure btn-link is always visible */
.btn-link {
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: var(--transition);
}

.btn-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Large button variant */
.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

/* Missing Button Variants */
.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: #DC2626;
    /* Darker red */
}

.btn-warning {
    background: var(--warning);
    color: var(--bg-dark);
    /* Ensure text is legible on orange */
}

.btn-warning:hover {
    background: #D97706;
    /* Darker orange */
}

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

.btn-success:hover {
    background: #059669;
    /* Darker green */
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
}

/* Header override pour boutons dans nav noire */
.header .btn-outline {
    border-color: var(--primary);
    color: var(--primary);
}

.header .btn-outline:hover {
    background: var(--primary);
    color: var(--bg-dark);
}

.header .btn-primary {
    background: var(--primary);
    color: var(--bg-dark);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: 0;
}

/* Work Grid */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.work-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    cursor: pointer;
    position: relative; /* Required for .work-card-link stretched-link */
}

/* Stretched-link: makes the entire card clickable via an absolutely-positioned <a> */
.work-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.work-card-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Ensure interactive elements inside the card stay above the stretched-link */
.work-card .btn, .work-card button, .work-card form {
    position: relative;
    z-index: 2;
}

.work-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.work-cover {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    background: var(--gray-200);
}

.work-info {
    padding: var(--spacing-md);
}

.work-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-base);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-author {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.work-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

/* Badges */
.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.badge-visitor {
    background: var(--gray-100);
    color: var(--gray-600);
}

.badge-reader {
    background: var(--gray-200);
    color: var(--gray-700);
}

.badge-launchpad {
    background: #FEF3C7;
    color: #92400E;
}

.badge-supernova {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-editor {
    background: #E0E7FF;
    color: #3730A3;
}

.badge-admin {
    background: var(--primary);
    color: var(--bg-dark);
}

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

.badge-draft {
    background: var(--gray-200);
    color: var(--gray-700);
}

.badge-submitted {
    background: #FEF3C7;
    color: #92400E;
}

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

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

/* Chapitre déjà acquis. Volontairement discret : c'est une confirmation, pas
   une promotion — le lecteur a seulement besoin de savoir qu'il peut ouvrir. */
.badge-owned {
    background: rgba(46, 204, 113, .14);
    color: var(--success);
    border: 1px solid rgba(46, 204, 113, .4);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

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

.badge-archived {
    background: var(--gray-400);
    color: white;
}

.badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.badge-info {
    background: #DBEAFE;
    color: #1E40AF;
}

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

.badge-secondary {
    background: var(--gray-300);
    color: var(--gray-700);
}

/* Work type badges for search results */
.badge-type-launchpad {
    background: #10B981;
    color: white;
    font-size: 0.7rem;
}

.badge-type-original {
    background: #3B82F6;
    color: white;
    font-size: 0.7rem;
}

/* Alias pour badges inline sur les cartes */
.badge-original {
    background: #3B82F6;
    color: white;
}

/* Statuts de modération manquants */
.badge-pending {
    background: #FEF3C7;
    color: #92400E;
}

.badge-approved {
    background: #D1FAE5;
    color: #065F46;
}

.badge-flagged {
    background: #FEE2E2;
    color: #991B1B;
}

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

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-family: inherit;
    transition: var(--transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

/* ── Champs de date et d'heure ────────────────────────────────────────────
   Le navigateur dessine la petite icône de calendrier en noir : sur un fond
   sombre elle était pratiquement invisible, et rien n'indiquait que le champ
   ouvrait un sélecteur. On l'inverse en blanc.

   La saisie au clavier reste possible sans passer par le calendrier : chaque
   segment (jour, mois, heure) s'écrit directement, et les flèches haut/bas les
   ajustent. Les segments prennent donc la couleur du texte, sinon ils se
   perdaient eux aussi sur le fond sombre. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    color-scheme: dark;              /* le sélecteur natif s'affiche en sombre */
    color: var(--text-primary);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .75;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    transition: opacity .15s ease, background .15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
}

/* Segments éditables : lisibles au repos, surlignés quand on les sélectionne. */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
    color: var(--text-primary);
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}
input[type="datetime-local"]::-webkit-datetime-edit-text {
    color: var(--text-secondary);    /* les séparateurs / et : restent discrets */
    padding: 0 1px;
}
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
    background: var(--primary);
    color: #1a1206;
    border-radius: 2px;
    outline: none;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-error {
    color: var(--danger);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

/* Alerts */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid;
}

.alert-success {
    background: #D1FAE5;
    border-color: var(--success);
    color: #065F46;
}

.alert-error {
    background: #FEE2E2;
    border-color: var(--danger);
    color: #991B1B;
}

.alert-warning {
    background: #FEF3C7;
    border-color: var(--warning);
    color: #92400E;
}

.alert-info {
    background: #DBEAFE;
    border-color: var(--info);
    color: #1E40AF;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
}

.table th,
.table td {
    padding: var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background: var(--gray-50);
    font-weight: 600;
}

.table tr:hover {
    background: var(--gray-50);
}

/* Dashboard */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
}

.dashboard-sidebar {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    height: fit-content;
    position: sticky;
    top: 80px;
}

.sidebar-nav {
    list-style: none;
}

.sidebar-nav-item {
    margin-bottom: var(--spacing-xs);
}

.sidebar-nav-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-secondary);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.sidebar-nav-link:hover,
.sidebar-nav-link.active {
    background: var(--primary);
    color: var(--bg-dark);
}

.dashboard-content {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}

.stat-card {
    background: linear-gradient(135deg, var(--bg-dark) 0%, #2d2d2d 100%);
    color: var(--primary);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
}

.stat-label {
    opacity: 0.9;
    font-size: var(--font-size-sm);
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-1 {
    margin-top: var(--spacing-sm);
}

.mt-2 {
    margin-top: var(--spacing-md);
}

.mt-3 {
    margin-top: var(--spacing-lg);
}

.mb-1 {
    margin-bottom: var(--spacing-sm);
}

.mb-2 {
    margin-bottom: var(--spacing-md);
}

.hidden {
    display: none;
}

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gap-1 {
    gap: var(--spacing-sm);
}

.gap-2 {
    gap: var(--spacing-md);
}

/* Responsive */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: wrap;
    }

    .nav {
        order: 3;
        width: 100%;
        margin-top: var(--spacing-md);
    }

    .dashboard {
        grid-template-columns: 1fr;
    }

    .dashboard-sidebar {
        position: static;
    }

    .works-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--spacing-md);
    }
}
/* ── Bandeau de confirmation d'adresse ──────────────────────────────────── */
.verify-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem 1rem;
    background: rgba(217, 162, 22, .12);
    border-bottom: 1px solid rgba(217, 162, 22, .35);
    font-size: .86rem;
    color: var(--text-primary);
}
.verify-strip-text { display: inline-flex; align-items: center; gap: .45rem; }
.verify-strip i { color: var(--warning, #D9A216); }
.verify-strip-cta {
    padding: .28rem .8rem;
    background: var(--warning, #D9A216);
    color: #1a1206;
    font-weight: 700;
    font-size: .8rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}
.verify-strip-cta:hover { filter: brightness(1.08); color: #1a1206; }

@media (max-width: 560px) {
    .verify-strip { font-size: .8rem; padding: .55rem .8rem; text-align: center; }
}