/* ==========================================================================
   css/relook.css
   --------------------------------------------------------------------------
   Surcouche visuelle de site_goautodial pour reprendre l'identite visuelle
   du CRM (couleurs, police, tailles) - AUCUNE modification de comportement
   ni de structure HTML/JS ici, uniquement des regles de style. Chargee en
   dernier (cf. php/UIHandler.php::creamyThemeCSS(), une seule ligne
   ajoutee) donc gagne sur le skin AdminLTE actif quel qu'il soit - pas
   besoin de savoir/changer quel skin (bleu/vert/...) est selectionne en
   base pour que ce relookage s'applique partout.

   Valeurs reprises telles quelles de assets/css/style.css du CRM.
   ========================================================================== */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexSans-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexSans-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexSans-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexMono-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/relook/IBMPlexMono-SemiBold.ttf') format('truetype');
}

:root {
    --relook-bg:#F8F9FA; --relook-surface:#FFFFFF; --relook-text:#212121;
    --relook-text-muted:#6B7280; --relook-text-faint:#9CA3AF;
    --relook-border:#E5E7EB; --relook-border-soft:#F3F4F6;
    --relook-accent:#D32F2F; --relook-accent-dark:#B71C1C;
    --relook-accent-bg:#FEF2F2; --relook-accent-border:#FECACA;
    --relook-success:#22C55E; --relook-warning:#F59E0B; --relook-danger:#EF4444;
    --relook-font-body:'IBM Plex Sans', sans-serif;
    --relook-font-mono:'IBM Plex Mono', monospace;
}

/* ---- Typographie generale ---- */
body, .wrapper, input, select, textarea, button, .form-control,
.dataTable, table {
    font-family: var(--relook-font-body) !important;
}
body { font-size: 13px; color: var(--relook-text); background: var(--relook-bg); }
h1, h2, h3, h4, h5, h6, .box-title { font-family: var(--relook-font-body) !important; }
code, pre, .mono { font-family: var(--relook-font-mono) !important; }

/* ---- Structure generale (fond, contenu) ---- */
.content-wrapper, .right-side, .main-footer {
    background: var(--relook-bg);
    border-color: var(--relook-border);
}

/* ---- Barre du haut (main-header) : accent du CRM ---- */
.main-header .navbar {
    background-color: var(--relook-accent) !important;
}
.main-header .navbar .nav > li > a {
    color: rgba(255,255,255,.9) !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a {
    background-color: var(--relook-accent-dark) !important;
    color: #fff !important;
}
.main-header .logo {
    background-color: var(--relook-accent-dark) !important;
    color: #fff !important;
    font-family: var(--relook-font-body) !important;
    font-weight: 700;
}
.main-header .logo:hover {
    background-color: var(--relook-accent-dark) !important;
}
.main-header .sidebar-toggle:hover {
    background-color: var(--relook-accent-dark) !important;
}

/* ---- Sidebar gauche : couleurs seulement, structure/JS intacts ---- */
.main-sidebar, .left-side {
    background-color: #1F2937 !important;
    font-family: var(--relook-font-body) !important;
}
.sidebar-menu > li.header {
    color: var(--relook-text-faint) !important;
    background: #1F2937 !important;
    font-size: 11px;
    letter-spacing: .06em;
}
.sidebar-menu > li > a {
    color: #E5E7EB !important;
    font-size: 13px;
    font-weight: 500;
}
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
    background: var(--relook-accent) !important;
    color: #fff !important;
    border-left-color: var(--relook-accent-dark) !important;
}
.sidebar-menu li > a > .fa, .sidebar-menu li > a > .glyphicon, .sidebar-menu li > a > .ion {
    color: inherit;
}
.user-panel { font-family: var(--relook-font-body) !important; }

/* ---- Boutons et liens : accent du CRM ---- */
.btn-primary, .btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--relook-accent) !important;
    border-color: var(--relook-accent-dark) !important;
    font-family: var(--relook-font-body) !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--relook-accent-dark) !important;
    border-color: var(--relook-accent-dark) !important;
}
a { color: var(--relook-accent); }
a:hover, a:focus { color: var(--relook-accent-dark); }
.action-button-circle { background-color: var(--relook-accent) !important; }
.action-button-circle:hover { background-color: var(--relook-accent-dark) !important; }

/* ---- Boites/panneaux (box, panel) ---- */
.box, .panel {
    background: var(--relook-surface);
    border: 1px solid var(--relook-border);
    border-top: 3px solid var(--relook-accent);
    border-radius: 7px;
}
.box-header { font-family: var(--relook-font-body) !important; }

/* ---- Etats semantiques (alignes sur le CRM) ---- */
.label-success, .bg-green, .btn-success { background-color: var(--relook-success) !important; }
.label-warning, .bg-yellow, .btn-warning { background-color: var(--relook-warning) !important; }
.label-danger, .bg-red, .btn-danger { background-color: var(--relook-danger) !important; }

/* ---- Tableaux (datatables) ---- */
table.dataTable thead th { font-family: var(--relook-font-body) !important; font-weight: 700; font-size: 12px; }
table.dataTable tbody td { font-size: 13px; }