/* ==========================================================================
   GameDid Design System
   ========================================================================== */

/* ---------- CSS Custom Properties (E1) ----------------------------------- */

:root {
    --gd-shadow-sm: 0 4px 12px rgba(0,0,0,.08);
    --gd-shadow-md: 0 8px 20px rgba(0,0,0,.12);
    --gd-radius-card: 14px;
    --gd-color-available: #22c55e;
    --gd-color-unavailable: #ef4444;
    --gd-color-meta: #666;
    --gd-color-placeholder: #f5f5f5;
}

/* ---------- Accessibility — Focus visible -------------------------------- */

:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    box-shadow: none;
}

/* ---------- GameDid Card ------------------------------------------------- */

.gd-card {
    border-radius: var(--gd-radius-card);
    overflow: hidden;
    background: white;
    box-shadow: var(--gd-shadow-sm);
    transition: all .2s ease;
}

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

.gd-card-link {
    text-decoration: none;
    color: inherit;
}

.gd-card-image {
    position: relative;
    min-height: 180px;
    height: 220px;
    background: var(--gd-color-placeholder);
    overflow: hidden;
}

.gd-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.gd-card:hover img {
    transform: scale(1.03);
}

.gd-card-placeholder {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.gd-card-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gd-badge {
    background: rgba(0,0,0,.75);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    backdrop-filter: blur(4px);
}

.gd-badge-available {
    color: var(--gd-color-available);
}
.gd-badge-unavailable {
    color: var(--gd-color-unavailable);
}

.gd-card-body {
    padding: 12px 14px;
}

.gd-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.gd-card-meta {
    font-size: 0.9rem;
    color: var(--gd-color-meta);
}

.gd-card-admin {
    padding: 0 14px 10px;
}

/* ---------- Utility — Icon sizing ---------------------------------------- */

.gd-icon-xl  { font-size: 2.5rem; }
.gd-icon-lg  { font-size: 3rem; }
.gd-icon-md  { font-size: 2rem; }
.gd-icon-game { font-size: 40px; }

/* ---------- Utility — Text sizing ---------------------------------------- */

.gd-text-xs  { font-size: .75rem; }
.gd-text-xxs { font-size: .7rem; }
.gd-badge-xs { font-size: .65rem; }

/* ---------- Container widths --------------------------------------------- */

.gd-container-narrow { max-width: 600px; }
.gd-container-md     { max-width: 700px; }

/* ---------- Progress bars ------------------------------------------------ */

.gd-progress-xs { height: 8px; }
.gd-progress-sm { height: 14px; }
.gd-progress-md { height: 18px; }

/* ---------- Layout widths ------------------------------------------------ */

.gd-w-badge    { width: 2.5rem; }
.gd-w-count-sm { min-width: 2rem; }
.gd-w-count-md { min-width: 3rem; }
.gd-w-label    { min-width: 5rem; }
.gd-w-stat     { width: 60px; }
.gd-w-cycle    { min-width: 72px; }
.gd-w-auto     { width: auto; }

/* ---------- Images/thumbnails -------------------------------------------- */

.gd-thumb-loan {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}

.gd-img-placeholder { height: 260px; }
.gd-img-preview     { max-height: 150px; }
.gd-img-bgg         { max-height: 120px; }
.gd-img-event       { max-height: 260px; }
.gd-img-event-card  { height: 160px; }
.gd-img-qr          { width: 200px; height: 200px; }

/* ---------- Navbar search ------------------------------------------------ */

.gd-search-input { min-width: 140px; }

/* ---------- Chat --------------------------------------------------------- */

.gd-chat-scroll {
    max-height: 60vh;
    overflow-y: auto;
    word-break: break-word;
}

/* ---------- Responsive tweaks ------------------------------------------- */

@media (max-width: 575.98px) {
    .gd-search-input { min-width: 100px; }
    .gd-chat-scroll { max-height: 50vh; }
}

/* ---------- Navbar username truncation ----------------------------------- */

.gd-username { max-width: 120px; }

/* ---------- Print styles (E3) -------------------------------------------- */

@media print {
    .navbar,
    footer,
    .btn,
    .breadcrumb,
    form,
    .dropdown,
    .pagination,
    .modal,
    .nav-tabs,
    .nav-pills,
    .alert-warning { display: none !important; }

    .container,
    .container-fluid { max-width: 100% !important; padding: 0 !important; }

    .card { border: none !important; box-shadow: none !important; }

    .col-lg-4, .col-lg-5, .col-lg-7,
    .col-lg-8, .col-lg-3, .col-lg-9,
    .col-lg-6 { width: 100% !important; flex: 0 0 100% !important; }

    a { text-decoration: none !important; color: inherit !important; }
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .8rem;
        color: #666;
    }

    .table { font-size: .85rem; }
    .table tr { page-break-inside: avoid; }
    .badge { border: 1px solid #ccc !important; }
}

/* ---------- Calendar (F4) ------------------------------------------------ */

.gd-calendar { table-layout: fixed; }

.gd-calendar-cell {
    vertical-align: top;
    height: 90px;
    padding: 4px 6px;
}

.gd-calendar-empty { background: var(--bs-tertiary-bg); }

.gd-calendar-today {
    background: rgba(13, 110, 253, .07);
}

.gd-calendar-day {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 2px;
}

@media (max-width: 575.98px) {
    .gd-calendar-cell { height: 60px; font-size: .7rem; }
    .gd-calendar-day { font-size: .75rem; }
}

/* ---------- Dark mode (E2) ----------------------------------------------- */

[data-bs-theme="dark"] {
    --gd-color-placeholder: #2a2a2a;
    --gd-color-meta: #aaa;
    --gd-shadow-sm: 0 4px 12px rgba(0,0,0,.3);
    --gd-shadow-md: 0 8px 20px rgba(0,0,0,.4);
}

[data-bs-theme="dark"] .gd-card {
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .gd-badge {
    background: rgba(255,255,255,.15);
}

[data-bs-theme="dark"] .gd-calendar-today {
    background: rgba(13, 110, 253, .15);
}

/* ---------- Badge Color Design System (C4) ------------------------------- */
/*
 * Semantic badge color conventions:
 *
 * text-bg-success  : Positive states
 *                    Disponible, Rendu, OK, Approuvé, Publié, Découverte,
 *                    Recommandé, Données à jour, Testé en classe, Sans texte
 *
 * text-bg-warning  : Caution / in-progress states
 *                    Emprunté, En attente, Intermédiaire, Prolongé,
 *                    Avec réserve, Données > 30j, Moyen, Lecture intermédiaire
 *
 * text-bg-danger   : Critical / negative states
 *                    En retard, Complet, Refusé, Déconseillé, Expert,
 *                    Données obsolètes, Difficile, Lecture avancée
 *
 * text-bg-info     : Informational / classification
 *                    Cycles (C1/C2/S1/S2), Notes, Initiation, Expérimental,
 *                    Niveaux Bloom, Complexité bars
 *
 * text-bg-primary  : Primary actions / key data
 *                    Filtres actifs (recherche, joueurs), Disciplines,
 *                    Cycles dans badges, Actif (prêt)
 *
 * text-bg-secondary : Neutral / metadata
 *                    Statut inconnu, Compteurs, Auto/BGG, Brouillon,
 *                    Classement, Non synchronisé
 *
 * text-bg-light    : Tags / enumeration (with border)
 *                    Tags BGG (mécaniques, catégories), Langues,
 *                    Noms alternatifs, Familles, Éditeurs
 *
 * bg-warning       : Highlighted rankings
 *                    Top 10/100 BGG, Classement BGG #N
 */