/* ============================================================
   SCI La Ribeyre — Design System — Option C (Warm / Mobile-first)
   Surcharge Bootstrap 5 + classes custom SCI
   Palette : crème chaude / beige / vert forêt
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
    --sci-bg:          #FAF7F2;
    --sci-surface:     #FFFFFF;
    --sci-sidebar:     #EDE8DF;
    --sci-border:      #D5CABC;
    --sci-vert:        #4A6B3D;
    --sci-vert-dim:    #3A5630;
    --sci-vert-light:  rgba(74,107,61,.10);
    --sci-brun:        #2A2018;
    --sci-muted:       #8B7355;
    --sci-light:       #B5A590;
    --sci-danger:      #8B2318;
    --sci-bois:        #A0876A;
    --sci-bottomnav-h: 64px;
    --sci-sidebar-w:   200px;

    /* Bootstrap token overrides */
    --bs-body-bg:            var(--sci-bg);
    --bs-body-color:         var(--sci-brun);
    --bs-border-color:       var(--sci-border);
    --bs-primary-rgb:        74,107,61;
    --bs-secondary-rgb:      139,115,85;
    --bs-font-sans-serif:    system-ui, -apple-system, sans-serif;
    --bs-border-radius:      6px;
    --bs-border-radius-sm:   4px;
    --bs-border-radius-lg:   10px;
    --bs-card-border-color:  var(--sci-border);
    --bs-card-bg:            var(--sci-surface);
    --bs-link-color-rgb:     74,107,61;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    system-ui, -apple-system, sans-serif;
}

/* ─── Base ──────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    background: var(--sci-bg);
    color: var(--sci-brun);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--sci-brun);
}

a { color: var(--sci-vert); }
a:hover { color: var(--sci-vert-dim); }

/* ─── App shell ─────────────────────────────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* Sidebar — desktop */
.sidebar {
    width: var(--sci-sidebar-w);
    background: var(--sci-sidebar);
    border-right: 1px solid var(--sci-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 200;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1.5rem 1.25rem 1.1rem;
    border-bottom: 1px solid var(--sci-border);
}

.brand-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--sci-brun);
}

.brand-sub {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--sci-muted);
    margin-top: 2px;
}

.sidebar-nav { padding: .75rem 0; flex: 1; }

.nav-section {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--sci-light);
    padding: .8rem 1.25rem .25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.25rem;
    font-size: 13.5px;
    color: var(--sci-muted);
    border-left: 2px solid transparent;
    transition: all .12s;
    text-decoration: none;
}

.sidebar-link i { font-size: 15px; width: 16px; text-align: center; flex-shrink: 0; }
.sidebar-link:hover { color: var(--sci-brun); background: rgba(0,0,0,.04); text-decoration: none; }

.sidebar-link.active {
    color: var(--sci-vert);
    background: var(--sci-vert-light);
    border-left-color: var(--sci-vert);
    font-weight: 500;
}

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--sci-border);
}

.sidebar-user {
    display: block;
    font-size: 12px;
    color: var(--sci-muted);
    margin-bottom: .6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 12.5px;
    color: var(--sci-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    transition: color .12s;
}
.btn-logout:hover { color: var(--sci-brun); }

/* Contenu */
.main-content {
    margin-left: var(--sci-sidebar-w);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 52px;
    background: var(--sci-sidebar);
    border-bottom: 1px solid var(--sci-border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: .75rem;
}

.topbar-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--sci-brun);
}

.page-body {
    flex: 1;
    padding: 1.5rem;
    max-width: 980px;
    width: 100%;
}

/* Bottom nav — mobile only */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--sci-bottomnav-h);
    background: var(--sci-sidebar);
    border-top: 1px solid var(--sci-border);
    z-index: 200;
    align-items: stretch;
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 500;
    color: var(--sci-muted);
    text-decoration: none;
    padding: 6px 0;
    transition: color .12s;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item i { font-size: 21px; line-height: 1; }
.bottom-nav-item.active { color: var(--sci-vert); }
.bottom-nav-item:hover, .bottom-nav-item:focus { text-decoration: none; color: var(--sci-vert); }

.fab-icon {
    width: 46px;
    height: 46px;
    background: var(--sci-vert);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 2px 10px rgba(74,107,61,.35);
    margin-bottom: 1px;
}

/* ─── Override Bootstrap — Boutons ─────────────────────────── */
.btn-sci {
    background: var(--sci-vert);
    border-color: var(--sci-vert);
    color: #fff;
    font-weight: 500;
    border-radius: 6px;
    min-height: 42px;
    padding: .5rem 1.1rem;
    font-family: var(--font-body);
    font-size: 14px;
    transition: background .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sci:hover, .btn-sci:focus, .btn-sci:active {
    background: var(--sci-vert-dim);
    border-color: var(--sci-vert-dim);
    color: #fff;
}

.btn { min-height: 38px; }
.btn.btn-lg { min-height: 50px; font-size: 15px; }
.btn.btn-sm { min-height: 32px; font-size: 13px; }

.btn-outline-secondary {
    border-color: var(--sci-border);
    color: var(--sci-muted);
}
.btn-outline-secondary:hover {
    background: var(--sci-sidebar);
    border-color: var(--sci-border);
    color: var(--sci-brun);
}

.btn-outline-danger {
    border-color: #FECDD3;
    color: var(--sci-danger);
}
.btn-outline-danger:hover {
    background: #FEF2F2;
    border-color: #FECDD3;
    color: var(--sci-danger);
}

/* ─── Override Bootstrap — Cards ───────────────────────────── */
.card {
    border-color: var(--sci-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
    overflow: hidden;
}

.card-header {
    background: var(--sci-bg);
    border-bottom-color: var(--sci-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--sci-brun);
    padding: .7rem 1.1rem;
}

.card-header-sci {
    background: var(--sci-bg) !important;
    border-bottom: 1px solid var(--sci-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    color: var(--sci-muted) !important;
    padding: .65rem 1.1rem !important;
}

.card-body { padding: 1.1rem; }

/* ─── Override Bootstrap — Formulaires ─────────────────────── */
.form-control, .form-select {
    border-color: var(--sci-border);
    background: var(--sci-surface);
    color: var(--sci-brun);
    border-radius: 6px;
    font-size: 15px;
    min-height: 44px;
    padding: .5rem .75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--sci-vert);
    box-shadow: 0 0 0 3px rgba(74,107,61,.15);
    background: var(--sci-surface);
    color: var(--sci-brun);
}

.form-control::placeholder { color: var(--sci-light); }
.form-control.form-control-sm { min-height: 38px; font-size: 14px; }

.form-label, .form-label.fw-semibold.small {
    font-size: 11.5px;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sci-muted) !important;
    margin-bottom: .35rem;
}

.form-text { color: var(--sci-muted); font-size: 12px; }

.input-group-text {
    background: var(--sci-sidebar);
    border-color: var(--sci-border);
    color: var(--sci-muted);
    font-size: 13px;
}

.form-check-input:checked {
    background-color: var(--sci-vert);
    border-color: var(--sci-vert);
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(74,107,61,.15); }

/* ─── Override Bootstrap — Tables ──────────────────────────── */
.table {
    font-size: 13.5px;
    color: var(--sci-brun);
}

.table > thead th {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sci-muted);
    background: var(--sci-bg) !important;
    border-color: var(--sci-border) !important;
    padding: .6rem .9rem;
    white-space: nowrap;
}

.table > tbody > tr { border-bottom: 1px solid var(--sci-border); }
.table > tbody > tr > td {
    padding: .75rem .9rem;
    border: none;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > td { background: #FAF7F2; }
.table-light { --bs-table-bg: var(--sci-bg); background: var(--sci-bg) !important; }
.table-success { --bs-table-bg: #F0F7EE; }

.table > tfoot td {
    background: var(--sci-bg);
    border-top: 2px solid var(--sci-border) !important;
    font-size: 13px;
    padding: .7rem .9rem;
}

/* ─── Override Bootstrap — Alertes ─────────────────────────── */
.alert { border-radius: 7px; font-size: 14px; }
.alert-success { background: #F0F7EE; border-color: #BBF7D0; color: #166534; }
.alert-danger  { background: #FEF2F2; border-color: #FECDD3; color: #7F1D1D; }
.alert-warning { background: #FFFBEB; border-color: #FDE68A; color: #78350F; }

/* ─── Override Bootstrap — Badges ──────────────────────────── */
.badge.bg-success { background-color: #DCFCE7 !important; color: #14532D; }
.badge.bg-secondary { background-color: #F1EDE6 !important; color: var(--sci-muted); }
.badge.bg-white { background: #fff !important; color: var(--sci-brun) !important; }
.badge { font-weight: 600; font-size: 11.5px; }

/* ─── Stat cards ─────────────────────────────────────────── */
.stat-card {
    background: var(--sci-surface);
    border: 1px solid var(--sci-border);
    border-radius: 10px;
    border-top: 3px solid var(--sci-vert);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    height: 100%;
}

.stat-card.stat-bois  { border-top-color: #A0876A; }
.stat-card.stat-elec  { border-top-color: #5B78A0; }
.stat-card.stat-total { border-top-color: #7A5B3D; }

.stat-icon {
    width: 38px;
    height: 38px;
    background: var(--sci-sidebar);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--sci-vert);
    flex-shrink: 0;
}
.stat-card.stat-bois  .stat-icon { color: #A0876A; }
.stat-card.stat-elec  .stat-icon { color: #5B78A0; }
.stat-card.stat-total .stat-icon { color: #7A5B3D; }

.stat-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--sci-brun);
    line-height: 1.1;
}

.stat-label {
    font-size: 11px;
    color: var(--sci-muted);
    font-weight: 500;
    margin-top: 1px;
}

/* ─── Saisie nuitées ────────────────────────────────────────── */
.ligne-nuitee-row {
    background: var(--sci-bg);
    border: 1px solid var(--sci-border);
    border-radius: 6px;
    border-left: 3px solid var(--sci-vert);
    padding: .65rem .85rem;
}

.ligne-sous-total {
    color: var(--sci-vert);
    font-weight: 600;
    font-size: 13px;
}

/* ─── Panneau calcul ───────────────────────────────────────── */
.calcul-preview {
    background: var(--sci-brun);
    color: #fff;
    border-radius: 10px;
    padding: 1.25rem;
}

.calcul-preview .d-flex > span { color: rgba(255,255,255,.65); }
.calcul-preview strong { color: #fff; }
.calcul-preview .border-secondary { border-color: rgba(255,255,255,.12) !important; }
.calcul-preview .fw-semibold { color: #fff; }
.calcul-preview .text-success { color: #86EFAC !important; }
.calcul-preview .text-warning { color: #FDE68A !important; }
.calcul-preview .opacity-75 { color: rgba(255,255,255,.6) !important; opacity: 1 !important; }

.calcul-total {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: #fff !important;
    line-height: 1;
}

/* ─── Login ────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: var(--sci-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-box { width: 100%; max-width: 420px; }
.login-brand { text-align: center; margin-bottom: 2rem; }

.login-icon {
    width: 56px;
    height: 56px;
    background: var(--sci-sidebar);
    border: 1.5px solid var(--sci-border);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--sci-vert);
    margin-bottom: .9rem;
}

.login-brand h1 { font-size: 1.7rem; color: var(--sci-brun); margin-bottom: .25rem; }
.login-brand p { font-size: 13.5px; color: var(--sci-muted); margin: 0; }

.login-card {
    background: var(--sci-surface);
    border: 1px solid var(--sci-border);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ─── Calendrier ─────────────────────────────────────────── */
#calendar {
    background: var(--sci-surface);
    border: 1px solid var(--sci-border);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.fc-button-primary {
    background: var(--sci-vert) !important;
    border-color: var(--sci-vert) !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
}
.fc-button-primary:hover {
    background: var(--sci-vert-dim) !important;
    border-color: var(--sci-vert-dim) !important;
}
.fc-toolbar-title {
    font-family: var(--font-display) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--sci-brun) !important;
}
.fc-daygrid-event { border-radius: 3px !important; font-size: 11.5px !important; }

/* ─── Responsive — Mobile first ────────────────────────────── */

/* Desktop ≥ 768px */
@media (min-width: 768px) {
    .sidebar     { display: flex; }
    .bottom-nav  { display: none; }
}

/* Mobile < 768px */
@media (max-width: 767px) {
    .sidebar      { display: none; }
    .main-content { margin-left: 0; }
    .bottom-nav   { display: flex; }

    .page-body {
        padding: 1rem;
        padding-bottom: calc(var(--sci-bottomnav-h) + .75rem);
    }

    .topbar { height: 50px; padding: 0 1rem; }

    /* Col-sm-6 → pleine largeur */
    .col-sm-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

    /* Désactiver sticky */
    .sticky-top { position: static !important; }

    /* Header page */
    .d-flex.justify-content-between.mb-4 { flex-direction: column !important; gap: .6rem; }
    .d-flex.justify-content-between.mb-4 > .btn,
    .d-flex.justify-content-between.mb-4 > a.btn { width: 100%; justify-content: center; }

    /* H1 taille */
    h1.h4, .h4 { font-size: 1.25rem !important; }

    /* Calcul */
    .calcul-preview { padding: 1rem; }
    .calcul-total { font-size: 1.6rem; }

    /* Cards */
    .card { border-radius: 8px; }
}

@media (max-width: 380px) {
    .stat-value { font-size: 1.35rem; }
    .stat-icon { width: 32px; height: 32px; font-size: 15px; }
}

/* table-sci = alias table + width 100% */
.table-sci { width: 100%; border-collapse: collapse; }

/* ─── Sejour cards (mobile) ─────────────────────────────────── */
.sejour-card-detail {
    display: flex;
    gap: .85rem;
    font-size: 12.5px;
    color: var(--sci-muted);
}

.sejour-card-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: .35rem;
    border-top: 1px solid var(--sci-border);
    margin-top: .1rem;
}

.sejour-total-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sci-muted);
}

.sejour-total-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--sci-brun);
}

/* ─── Virement ──────────────────────────────────────────────── */
.virement-bloc {
    background: var(--sci-surface);
    border: 1px solid var(--sci-border);
    border-radius: 8px;
    padding: .85rem 1rem;
}

/* ─── Reservation cards (mobile) ───────────────────────────── */
.res-card-list {
    padding: .5rem .75rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.res-card {
    background: var(--sci-bg);
    border: 1px solid var(--sci-border);
    border-radius: 8px;
    border-left: 3px solid var(--sci-vert);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.res-card-past {
    border-left-color: var(--sci-light);
    opacity: .85;
}

.res-card-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--sci-brun);
}

.res-card-dates {
    font-size: 14px;
    color: var(--sci-brun);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
}

.res-card-nuits {
    font-size: 12px;
    color: var(--sci-muted);
    background: var(--sci-sidebar);
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: .25rem;
}

.res-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.res-card-sejour-ok {
    font-size: 12px;
    color: #14532D;
}

.res-card-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding-top: .35rem;
    border-top: 1px solid var(--sci-border);
}