/* ATFP ERP — ودادية أعوان الوكالة التونسية للتكوين المهني
   Charte graphique basée sur le logo ATFP
   Couleurs: Navy #002B5C · Magenta #D81B60 · Blue #1565C0 · Gold #F9A825 · Teal #00ACC1 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');

:root {
  --atfp-navy: #002B5C;
  --atfp-navy-dark: #001A3A;
  --atfp-navy-light: #003D7A;
  --atfp-magenta: #D81B60;
  --atfp-magenta-light: #E91E63;
  --atfp-blue: #1565C0;
  --atfp-blue-light: #1E88E5;
  --atfp-gold: #F9A825;
  --atfp-gold-light: #FBC02D;
  --atfp-teal: #00ACC1;
  --atfp-teal-light: #26C6DA;

  --rt-primary: var(--atfp-navy);
  --rt-primary-dark: var(--atfp-navy-dark);
  --rt-accent: var(--atfp-gold);
  --rt-danger: #c82333;
  --rt-success: #198754;
  --rt-warning: var(--atfp-gold);
  --rt-info: var(--atfp-teal);
  --rt-bg: #f0f3f7;
  --rt-sidebar-w: 240px;
  --rt-font-ar: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --rt-font-fr: 'Segoe UI', Tahoma, 'Cairo', sans-serif;
}

/* Arabic-first font stack */
body {
  font-family: var(--rt-font-ar);
  background: var(--rt-bg);
  font-size: 0.9rem;
}

html[lang="fr"] body {
  font-family: var(--rt-font-fr);
}

[dir="rtl"] body { direction: rtl; }
[dir="ltr"] body { direction: ltr; }
[dir="rtl"] .num { font-feature-settings: "tnum"; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-weight: 700;
  letter-spacing: 0;
}
[dir="rtl"] .fw-bold { font-weight: 700 !important; }
[dir="rtl"] .form-label { font-weight: 600; }

[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; }
[dir="rtl"] input[type="number"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] {
  text-align: right;
  direction: ltr;
}

[dir="rtl"] .table th { text-align: right; }
[dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table .text-end { text-align: left !important; }
[dir="rtl"] .badge { font-weight: 600; }

/* ======================== NAVBAR ======================== */
.navbar {
  background: linear-gradient(135deg, var(--atfp-navy) 0%, var(--atfp-navy-dark) 100%) !important;
  border-bottom: 3px solid var(--atfp-magenta);
}
.navbar-brand { font-size: 0.95rem; }
.navbar-brand img { height: 36px; width: auto; }

.nav-link { font-size: 0.88rem; padding: 0.45rem 0.75rem; }
.nav-link.active { font-weight: 600; }
.nav-link:hover:not(.active) { background: rgba(255,255,255,0.1); }

/* ======================== SIDEBAR ACCORDION v3.0 ======================== */
#sidebarOffcanvas { width: 280px; }
#sidebarOffcanvas .offcanvas-body { overflow-y: auto; padding: 0.5rem 0; }

.sidebar-accordion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0.5rem;
}

.sidebar-item { display: flex; flex-direction: column; }

.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #2c3e50;
  background: transparent;
  border: none;
  border-inline-start: 3px solid transparent;
  border-radius: 6px;
  text-align: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  font-family: inherit;
}
.sidebar-btn i:first-child {
  font-size: 1.1rem;
  width: 1.3rem;
  text-align: center;
  flex-shrink: 0;
  color: #5a6a7a;
  transition: color 0.2s;
}
.sidebar-btn span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-chevron {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
  color: #8a9aa8;
  flex-shrink: 0;
}
.sidebar-btn[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }

.sidebar-btn:hover {
  background: rgba(0, 43, 92, 0.06);
  border-inline-start-color: var(--atfp-teal);
  color: var(--atfp-navy);
}
.sidebar-btn:hover i:first-child { color: var(--atfp-navy); }

.sidebar-btn.active {
  background: linear-gradient(135deg, var(--atfp-navy) 0%, var(--atfp-navy-light) 100%);
  border-inline-start-color: var(--atfp-gold);
  color: #fff !important;
}
.sidebar-btn.active i:first-child { color: #fff; }
.sidebar-btn.active .sidebar-chevron { color: rgba(255,255,255,0.7); }

/* Children sub-menu */
.sidebar-sub {
  display: flex;
  flex-direction: column;
  padding: 2px 0 4px 2.2rem;
  gap: 1px;
}
.sidebar-child {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
  color: #5a6a7a;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  border-inline-start: 2px solid transparent;
}
.sidebar-child::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b0bcc8;
  margin-inline-end: 10px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.sidebar-child:hover {
  background: rgba(0, 43, 92, 0.05);
  color: var(--atfp-navy);
  border-inline-start-color: var(--atfp-teal);
}
.sidebar-child:hover::before { background: var(--atfp-teal); }
.sidebar-child.active {
  color: var(--atfp-navy);
  font-weight: 600;
  border-inline-start-color: var(--atfp-gold);
  background: rgba(0, 43, 92, 0.04);
}
.sidebar-child.active::before {
  background: var(--atfp-gold);
  width: 6px;
  height: 6px;
}

/* Smooth collapse animation */
.collapse:not(.show) { display: none; }
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing { transition: none; }
  .sidebar-chevron { transition: none; }
}

/* Offcanvas header spacing */
#sidebarOffcanvas .offcanvas-header {
  border-bottom: 3px solid var(--atfp-magenta);
}

/* RTL overrides for sidebar */
[dir="rtl"] .sidebar-sub { padding-right: 2.2rem; padding-left: 0; }
[dir="rtl"] .sidebar-child::before { margin-left: 10px; margin-right: 0; }

/* ======================== CARDS ======================== */
.card {
  border: 1px solid #e3e6ea;
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.card-header {
  background: linear-gradient(to right, var(--atfp-navy), var(--atfp-navy-light));
  color: #fff;
  border-bottom: 2px solid var(--atfp-gold);
  font-weight: 600;
}

/* ======================== STAT CARDS ======================== */
.stat-card {
  border-radius: 0.55rem;
  overflow: hidden;
  border-top: 3px solid var(--atfp-navy);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 43, 92, 0.15);
}
.stat-card .icon {
  font-size: 2.4rem;
  opacity: 0.18;
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 16px;
}
.stat-card:nth-child(2) { border-top-color: var(--atfp-magenta); }
.stat-card:nth-child(3) { border-top-color: var(--atfp-gold); }
.stat-card:nth-child(4) { border-top-color: var(--atfp-teal); }
.stat-card:nth-child(5) { border-top-color: var(--atfp-blue); }

/* ======================== BUTTONS ======================== */
.btn-primary {
  background: linear-gradient(135deg, var(--atfp-navy) 0%, var(--atfp-navy-light) 100%);
  border-color: var(--atfp-navy);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--atfp-navy-dark) 0%, var(--atfp-navy) 100%);
  border-color: var(--atfp-navy-dark);
}

.btn-outline-primary {
  color: var(--atfp-navy);
  border-color: var(--atfp-navy);
}
.btn-outline-primary:hover {
  background: var(--atfp-navy);
  border-color: var(--atfp-navy);
}

.btn-warning {
  background: linear-gradient(135deg, var(--atfp-gold) 0%, #E69500 100%);
  border-color: var(--atfp-gold);
  color: var(--atfp-navy-dark);
}
.btn-warning:hover {
  background: linear-gradient(135deg, #E69500 0%, var(--atfp-gold) 100%);
  border-color: #E69500;
  color: #fff;
}

/* ======================== BADGES ======================== */
.bg-primary { background-color: var(--atfp-navy) !important; }
.text-primary { color: var(--atfp-navy) !important; }
.border-primary { border-color: var(--atfp-navy) !important; }

/* ======================== COMPLIANCE SCORES ======================== */
.compliance-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.score-good   { background: linear-gradient(135deg, #198754, #157347); }
.score-medium { background: linear-gradient(135deg, var(--atfp-gold), #E69500); color: var(--atfp-navy-dark); }
.score-bad    { background: linear-gradient(135deg, #dc3545, #a71d2a); }
.score-critical { background: linear-gradient(135deg, #6c757d, #495057); }

/* ======================== RISK BADGES ======================== */
.risk-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.risk-badge.low      { background: #198754; }
.risk-badge.medium   { background: var(--atfp-gold); color: var(--atfp-navy-dark); }
.risk-badge.high     { background: #fd7e14; }
.risk-badge.critical { background: #dc3545; }

/* ======================== STATUS BADGES ======================== */
.status-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-badge.active      { background: #d1e7dd; color: #0f5132; }
.status-badge.pending     { background: #fff3cd; color: #664d03; }
.status-badge.draft       { background: #e2e3e5; color: #41464b; }
.status-badge.approved    { background: #d1e7dd; color: #0f5132; }
.status-badge.rejected    { background: #f8d7da; color: #842029; }
.status-badge.expired     { background: #f8d7da; color: #842029; }
.status-badge.expiring_soon { background: #fff3cd; color: #664d03; }
.status-badge.locked      { background: #f8d7da; color: #842029; }
.status-badge.posted      { background: #cfe2ff; color: #084298; }
.status-badge.paid        { background: #d1e7dd; color: #0f5132; }
.status-badge.overdue     { background: #f8d7da; color: #842029; }

/* ======================== TABLES ======================== */
.table { margin-bottom: 0; }
.table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--atfp-navy) !important;
}
.table tbody td { font-size: 0.87rem; vertical-align: middle; }

/* ======================== FORMS ======================== */
.btn-sm { font-size: 0.82rem; }
.btn-icon { padding: 0.2rem 0.5rem; }
.form-label { font-weight: 500; font-size: 0.88rem; }
.form-control, .form-select { font-size: 0.9rem; }
.required::after { content: " *"; color: #dc3545; }

.form-control:focus, .form-select:focus {
  border-color: var(--atfp-teal);
  box-shadow: 0 0 0 0.2rem rgba(0, 172, 193, 0.25);
}

/* ======================== TIMELINE ======================== */
.timeline { list-style: none; padding: 0; }
.timeline-item { position: relative; padding: 0 0 1.5rem 1.5rem; border-inline-start: 2px solid #e9ecef; }
.timeline-item::before {
  content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: -7px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--atfp-navy);
}
.timeline-item.warning::before { background: var(--atfp-gold); }
.timeline-item.critical::before { background: #dc3545; }
.timeline-item.info::before { background: var(--atfp-teal); }

/* ======================== DIFF ======================== */
.diff-old { background: #ffeaea; color: #c82333; text-decoration: line-through; padding: 0 0.25rem; border-radius: 3px; }
.diff-new { background: #e6f9e6; color: #198754; padding: 0 0.25rem; border-radius: 3px; }

/* ======================== BREADCRUMB ======================== */
.breadcrumb { font-size: 0.8rem; }

/* ======================== FOOTER ======================== */
footer {
  border-top: 2px solid var(--atfp-navy) !important;
  flex-shrink: 0;
}

/* ======================== OFFCANVAS SIDEBAR ======================== */
.offcanvas-header.bg-primary {
  background: linear-gradient(135deg, var(--atfp-navy) 0%, var(--atfp-navy-dark) 100%) !important;
  border-bottom: 3px solid var(--atfp-magenta);
}
#sidebarOffcanvas {
  width: 280px;
}
#sidebarOffcanvas .offcanvas-body {
  overflow-y: auto;
}
#sidebarOffcanvas .offcanvas-body .nav-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}

/* ======================== LOGIN CARD ======================== */
.login-card {
  border-top: 4px solid var(--atfp-magenta);
}

/* ======================== LOCALE SWITCHER ======================== */
.dropdown-menu .dropdown-item.active {
  background: var(--atfp-navy);
}

/* ======================== BRAND ICON ======================== */
.brand-icon {
  color: var(--atfp-magenta) !important;
}

/* ======================== PRINT ======================== */
@media print {
  .navbar, .sidebar, footer, .no-print { display: none !important; }
  .container-fluid { max-width: 100% !important; }
  body { background: #fff; }
}