/* ============================================================
   OPTIMO CLIENT V2 — Feuille de style principale
   Obri Consulting © 2024-2025
   ============================================================ */

/* ---- Variables --------------------------------------------- */
:root {
  --oc-primary:   #007bff;
  --oc-dark:      #1a1a2e;
  --oc-sidebar:   #1a1a2e;
  --oc-accent:    #66aaff;
  --oc-success:   #28a745;
  --oc-warning:   #ffc107;
  --oc-danger:    #dc3545;
  --oc-info:      #17a2b8;
  --oc-radius:    10px;
  --oc-shadow:    0 2px 15px rgba(0,0,0,.08);
  --oc-trans:     all .2s ease;
}

/* ---- Base --------------------------------------------------- */
body {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: .95rem;
  background: #f4f6f9;
  color: #343a40;
}

/* ---- Sidebar ------------------------------------------------ */
.main-sidebar {
  background: var(--oc-sidebar) !important;
  box-shadow: 3px 0 10px rgba(0,0,0,.15);
}

.brand-link {
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.sidebar .nav-sidebar .nav-link {
  border-radius: 6px;
  margin: 2px 8px;
  padding: 8px 12px;
  color: rgba(255,255,255,.78) !important;
  font-size: .88rem;
  transition: var(--oc-trans);
}

.sidebar .nav-sidebar .nav-link:hover {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

.sidebar .nav-sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--oc-primary), #0056d2) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(0,123,255,.35);
}

.sidebar .nav-header {
  color: rgba(255,255,255,.35) !important;
  font-size: .68rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 12px;
}

.sidebar .nav-treeview .nav-link {
  padding-left: 18px;
  font-size: .84rem;
}

/* ---- Navbar (header) --------------------------------------- */
.main-header.navbar {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}

/* ---- Content wrapper --------------------------------------- */
.content-wrapper {
  background: #f4f6f9;
}

.content-header {
  padding: 16px 20px 10px;
}

.content-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
}

/* ---- Cards -------------------------------------------------- */
.card {
  border: none;
  border-radius: var(--oc-radius) !important;
  box-shadow: var(--oc-shadow);
  transition: var(--oc-trans);
}

.card-header {
  border-radius: var(--oc-radius) var(--oc-radius) 0 0 !important;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
}

/* ---- Info boxes -------------------------------------------- */
.info-box {
  border-radius: var(--oc-radius) !important;
  box-shadow: var(--oc-shadow) !important;
  transition: var(--oc-trans);
}

.info-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}

.info-box .info-box-icon {
  border-radius: var(--oc-radius) 0 0 var(--oc-radius) !important;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Small boxes ------------------------------------------- */
.small-box {
  border-radius: var(--oc-radius) !important;
  box-shadow: var(--oc-shadow) !important;
  transition: var(--oc-trans);
}

.small-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
}

/* ---- Boutons ----------------------------------------------- */
.btn {
  border-radius: 6px;
  font-weight: 500;
  transition: var(--oc-trans);
}

.btn-xs {
  padding: .2rem .45rem;
  font-size: .75rem;
  border-radius: 4px;
}

.btn-primary {
  background: var(--oc-primary);
  border-color: var(--oc-primary);
}

.btn-primary:hover {
  background: #0056d2;
  border-color: #0056d2;
  transform: translateY(-1px);
}

/* ---- Tableaux ---------------------------------------------- */
.table th {
  font-weight: 600;
  font-size: .83rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
}

.table td {
  vertical-align: middle;
  font-size: .9rem;
}

.table-hover tbody tr:hover {
  background: rgba(0,123,255,.04);
}

/* ---- Breadcrumb -------------------------------------------- */
.breadcrumb {
  background: transparent;
  padding: 0;
  font-size: .82rem;
}

/* ---- Badges ----------------------------------------------- */
.badge {
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---- Login page -------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box .card {
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
}

.login-logo a {
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none !important;
}

/* ---- Alerts ----------------------------------------------- */
.alert {
  border-radius: var(--oc-radius);
  border: none;
}

/* ---- Progress bars ----------------------------------------- */
.progress {
  border-radius: 4px;
  background: rgba(0,0,0,.08);
}

/* ---- DataTables -------------------------------------------- */
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info {
  font-size: .85rem;
  color: #6c757d;
}

/* ---- Footer ----------------------------------------------- */
.main-footer {
  background: #fff;
  border-top: 1px solid #e9ecef;
  padding: 10px 16px;
  font-size: .82rem;
  color: #6c757d;
}

/* ---- Text utilities --------------------------------------- */
.txtUnderlineDotted {
  border-bottom: 1px dotted rgba(255,255,255,.4);
}

.sidebar .nav-link.active .txtUnderlineDotted {
  border-bottom-color: rgba(255,255,255,.6);
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 767.98px) {
  .content-header h1 { font-size: 1.1rem; }
  .info-box { margin-bottom: .5rem; }
  .card-header { padding: .6rem 1rem; }
  .content-header { padding: 10px 12px 6px; }
  .main-footer { font-size: .75rem; }
}

@media (max-width: 575.98px) {
  .login-box { padding: 0 10px; width: 100%; max-width: 100% !important; }
  .login-box .card-body { padding: 1.2rem; }
}

/* ---- Animations ------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content-wrapper .content { animation: fadeInUp .25s ease; }