/* =============================================================
   Back-office theme — aligné sur le design des pages de login.
   Thème purement visuel (couleurs, arrondis, ombres douces) posé
   par-dessus Bootstrap 3 : aucune modification de structure.
   Palette : bleu #337ab7 / #2a6496, fonds clairs, ombres bleutées.
   ============================================================= */

/* ---- Fond général : dégradé clair comme le login ---- */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
    background-attachment: fixed;
    color: #3c4a5a;
}

/* ---- Titres de page ---- */
.body-container #main > h1,
.body-container #main > h2 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 22px;
    letter-spacing: .2px;
}

/* ---- Liens ---- */
a {
    color: #337ab7;
}
a:hover,
a:focus {
    color: #2a6496;
}

/* ---- Tables façon carte douce ---- */
.table {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #eef1f6;
    box-shadow: 0 4px 20px rgba(51, 122, 183, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

/* Wrapper scrollable horizontal (auto-appliqué aux tables larges) :
   permet de lire chaque ligne en entier sur petit écran (13") via un scroll X.
   L'ombre/arrondi passent sur le wrapper, la table reste pleine largeur. */
.table-responsive.bo-table-scroll {
    /* Bootstrap 3 only enables horizontal scroll on .table-responsive below 768px,
       so wide tables get clipped on desktop. Force the scroll at every width. */
    overflow-x: auto;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(51, 122, 183, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    -webkit-overflow-scrolling: touch;
}
.table-responsive.bo-table-scroll > .table {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
/* en-têtes lisibles même en scrollant */
.table-responsive.bo-table-scroll > .table > thead > tr > th {
    white-space: nowrap;
}

.table > thead > tr > th {
    background: #f7f9fc;
    color: #54657a;
    font-weight: 600;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .1px;
    border-bottom: 1px solid #e7edf4;
    border-top: none;
    padding: 11px 10px;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: 11px 14px;
    vertical-align: middle;
    color: #46566a;
    border-top: 1px solid #f0f3f8;
}

/* Un <p> dans une cellule garde une marge basse par défaut (Bootstrap), ce qui
   décale le texte vers le haut avec vertical-align:middle. On la neutralise. */
.table > tbody > tr > td p {
    margin-bottom: 0;
}

.table.table-bordered,
.table.table-bordered > thead > tr > th,
.table.table-bordered > thead > tr > td,
.table.table-bordered > tbody > tr > th,
.table.table-bordered > tbody > tr > td {
    border-color: #eef1f6;
}

.table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafbfd;
}

.table-hover > tbody > tr:hover,
.table.table-striped > tbody > tr:hover {
    background-color: #f1f6fc;
}

/* ---- Panels façon carte ---- */
.panel {
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(51, 122, 183, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.panel-heading {
    background: #f7f9fc;
    border-bottom: 1px solid #eef1f6;
    border-radius: 12px 12px 0 0;
    color: #2c3e50;
    font-weight: 600;
    padding: 13px 16px;
}

.panel-footer {
    background: #f7f9fc;
    border-top: 1px solid #eef1f6;
    border-radius: 0 0 12px 12px;
}

.panel-primary > .panel-heading {
    background: linear-gradient(135deg, #337ab7 0%, #2a6496 100%);
    border-color: #2a6496;
    color: #fff;
}

/* ---- Wells / boîtes ---- */
.well {
    background: #ffffff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(51, 122, 183, 0.06);
}

/* ---- Boutons ---- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: filter .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #337ab7 0%, #2a6496 100%);
    border: none;
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, #337ab7 0%, #2a6496 100%);
    filter: brightness(1.07);
    color: #fff;
}

.btn-default {
    background: #ffffff;
    border: 1px solid #d9e0e9;
    color: #54657a;
}
.btn-default:hover,
.btn-default:focus {
    background: #f1f6fc;
    border-color: #c3d0de;
    color: #337ab7;
}

.btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #1e874b 100%);
    border: none;
    color: #fff;
}
.btn-success:hover,
.btn-success:focus { filter: brightness(1.07); color: #fff; }

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
    color: #fff;
}
.btn-danger:hover,
.btn-danger:focus { filter: brightness(1.07); color: #fff; }

.btn-warning {
    background: linear-gradient(135deg, #e67e22 0%, #c0560a 100%);
    border: none;
    color: #fff;
}
.btn-warning:hover,
.btn-warning:focus { filter: brightness(1.07); color: #fff; }

.btn-info {
    background: linear-gradient(135deg, #3aa0d1 0%, #2980b9 100%);
    border: none;
    color: #fff;
}
.btn-info:hover,
.btn-info:focus { filter: brightness(1.07); color: #fff; }

/* ---- Champs de formulaire ---- */
.form-control {
    border-radius: 8px;
    border: 1px solid #d9e0e9;
    box-shadow: none;
    color: #3c4a5a;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: #337ab7;
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.15);
}

label,
.control-label {
    color: #54657a;
    font-weight: 600;
}

.input-group-addon {
    border-radius: 8px;
    border: 1px solid #d9e0e9;
    background: #f7f9fc;
    color: #54657a;
}

/* Select2 (largement utilisé) aligné sur les champs */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 8px !important;
    border: 1px solid #d9e0e9 !important;
}

/* ---- Alertes ---- */
.alert {
    border-radius: 10px;
    border: none;
}
.alert-success { background: #e8f7ee; color: #1e874b; }
.alert-danger  { background: #fdecea; color: #c0392b; }
.alert-warning { background: #fdf3e3; color: #b9770e; }
.alert-info    { background: #eaf4fb; color: #2980b9; }

/* ---- Pagination ---- */
.pagination {
    border-radius: 8px;
}
.pagination > li > a,
.pagination > li > span {
    color: #337ab7;
    border-color: #e7edf4;
}
.pagination > li > a:hover {
    background: #f1f6fc;
    color: #2a6496;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
    background: #337ab7;
    border-color: #337ab7;
}

/* ---- Labels / badges ---- */
.label,
.badge {
    border-radius: 6px;
    font-weight: 600;
}

/* ---- Modales ---- */
.modal-content {
    border-radius: 14px;
    border: none;
    box-shadow: 0 24px 70px rgba(20, 40, 70, 0.25);
}
.modal-header {
    border-bottom: 1px solid #eef1f6;
}
.modal-footer {
    border-top: 1px solid #eef1f6;
}

/* ---- Nav-tabs / pills ---- */
.nav-tabs {
    border-bottom: 1px solid #e7edf4;
}
.nav-tabs > li > a {
    border-radius: 8px 8px 0 0;
    color: #54657a;
}
.nav-tabs > li > a:hover {
    background: #f1f6fc;
    border-color: #eef1f6 #eef1f6 #e7edf4;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #337ab7;
    border-color: #e7edf4 #e7edf4 transparent;
}

/* ---- Filtre (boutons existants) ---- */
.btn-filter {
    border-radius: 8px;
}