/*
======================================================================
FAMa RECRUTEMENT - Premium Military Theme Style Sheet Override
======================================================================
Design overrides for Malian Army Recruitment Portal (FAMa)
Author: Antigravity AI (Google DeepMind Team)
======================================================================
*/

/* 1. TYPOGRAPHY IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --inps-primary: #1c3d27; /* Tactical Army Green */
  --inps-primary-rgb: 28, 61, 39;
  --inps-primary-gradient: linear-gradient(135deg, #1c3d27 0%, #2e593a 100%);
  --inps-secondary: #0c0f16; /* Tactical Dark Charcoal */
  --inps-accent: #c5a059; /* Desert Gold / Khaki */
  --inps-accent-rgb: 197, 160, 89;
  --inps-bg: #f4f5f1; /* Soft Tactical Sage/Gray */
  --inps-card-bg: #ffffff;
  --inps-text-main: #2b352d;
  --inps-text-muted: #5d6d60;
  --inps-card-shadow: 0 10px 25px -5px rgba(28, 61, 39, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --inps-card-shadow-hover: 0 20px 35px -10px rgba(28, 61, 39, 0.16), 0 10px 15px -8px rgba(0, 0, 0, 0.04);
}

/* App-wide Typography override */
body, h1, h2, h3, h4, h5, h6, .navbar-nav, .nav-link, .btn, .form-control, .form-select, table {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body {
  background-color: var(--inps-bg) !important;
  color: var(--inps-text-main) !important;
}

.text-muted {
  --vz-text-opacity: 1;
  color: #000000 !important;
}

/* 2. CUSTOM SCROLLBARS */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #e9ebd9;
}
::-webkit-scrollbar-thumb {
  background: #c3c7ac;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a4aa86;
}

/* 3. TRANSITIONS & ENTRANCE ANIMATIONS */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.main-content .page-content .container-fluid > .row {
  animation: fadeInUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.main-content .page-content .container-fluid > .row:nth-child(1) { animation-delay: 0.05s; }
.main-content .page-content .container-fluid > .row:nth-child(2) { animation-delay: 0.15s; }
.main-content .page-content .container-fluid > .row:nth-child(3) { animation-delay: 0.25s; }
.main-content .page-content .container-fluid > .row:nth-child(4) { animation-delay: 0.35s; }

/* 4. CARDS & TACTICAL STYLING */
.card {
  border: 1px solid rgba(195, 199, 172, 0.5) !important;
  border-radius: 16px !important;
  box-shadow: var(--inps-card-shadow) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: var(--inps-card-bg) !important;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--inps-card-shadow-hover) !important;
  border-color: rgba(28, 61, 39, 0.2) !important;
}

/* Prestational Cards - Military Camo style gradient */
.card.bg-primary {
  background: var(--inps-primary-gradient) !important;
  border: none !important;
}

.card.card-prestation {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card.card-prestation:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 25px 45px -12px rgba(28, 61, 39, 0.3) !important;
}

.custom-card-header {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  padding: 14px 20px !important;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.custom-card-header a {
  color: #c5a059 !important; /* Gold Khaki */
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.custom-card-header a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.card.card-prestation .btn-info {
  background: #ffffff !important;
  color: var(--inps-primary) !important;
  border: none !important;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card.card-prestation .btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -5px rgba(28, 61, 39, 0.2);
  background: #f4f5f1 !important;
}

.image-prestation {
  transition: transform 0.5s ease;
}

.card.card-prestation:hover .image-prestation {
  transform: scale(1.08) rotate(2deg);
}

/* 5. FORM CONTROLS & TACTICAL FOCUS */
.form-control, .form-select {
  border-radius: 10px !important;
  border: 1.5px solid #c3c7ac !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  transition: all 0.25s ease !important;
  background-color: #ffffff !important;
  color: var(--inps-text-main) !important;
}

.form-control:focus, .form-select:focus {
  border-color: #2e593a !important;
  box-shadow: 0 0 0 4px rgba(46, 89, 58, 0.15) !important;
  outline: none !important;
}

/* 6. LOGO OVERRIDES & HIGHLIGHTING */
.auth-logo {
  display: inline-block !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid var(--inps-accent) !important;
  padding: 12px 24px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3), 0 0 15px rgba(197, 160, 89, 0.4) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  margin-bottom: 12px !important;
}

.auth-logo:hover {
  transform: scale(1.08) translateY(-4px) !important;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.4), 0 0 25px rgba(197, 160, 89, 0.6) !important;
}

.auth-logo img {
  display: block !important;
  width: auto !important;
  height: 60px !important;
  max-width: 140px !important;
  object-fit: contain !important;
}

.app-menu .navbar-brand-box {
  background: #0c0f16 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 15px 10px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-menu .navbar-brand-box a.logo {
  transition: all 0.3s ease !important;
}

.app-menu .navbar-brand-box a.logo:hover {
  transform: scale(1.05) !important;
}

.app-menu .navbar-brand-box a.logo img {
  height: 38px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}

/* 7. MILITARY SIDEBAR & TOPBAR */
.navbar-menu {
  background: var(--inps-secondary) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navbar-nav .nav-item .nav-link {
  font-weight: 500 !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 10px !important;
  margin: 4px 14px !important;
  transition: all 0.25s ease !important;
  color: white !important;
}

.navbar-nav .nav-item .nav-link:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transform: translateX(4px);
}

.navbar-nav .nav-item .nav-link.active {
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.15) 0%, rgba(197, 160, 89, 0.03) 100%) !important;
  color: #c5a059 !important;
  font-weight: 600 !important;
  border-left: 3px solid #c5a059 !important;
}

.navbar-nav .nav-item .nav-link.active i {
  color: #c5a059 !important;
}

/* Keep the selected menu visually active on every sidebar page. */
[data-layout=vertical] .navbar-menu .navbar-nav > .nav-item > .nav-link.active,
[data-layout=vertical] .navbar-menu .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1c3d27 0%, #2e593a 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.65) !important;
  border-left: 4px solid #c5a059 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22) !important;
  transform: translateX(3px);
}

[data-layout=vertical] .navbar-menu .navbar-nav > .nav-item > .nav-link.active i,
[data-layout=vertical] .navbar-menu .navbar-nav > .nav-item > .nav-link[aria-current="page"] i {
  color: #f0cf89 !important;
}

[data-layout=vertical] .navbar-menu .navbar-nav > .nav-item > .nav-link.active span,
[data-layout=vertical] .navbar-menu .navbar-nav > .nav-item > .nav-link[aria-current="page"] span {
  color: #ffffff !important;
}

/* Compact and professional Parameters dropdown. */
[data-layout=vertical] .navbar-menu .sidebar-parameters > .menu-link {
  position: relative;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters > .menu-link[aria-expanded="true"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1c3d27 0%, #2e593a 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters > .menu-link[aria-expanded="true"] > i {
  color: #f0cf89 !important;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .menu-dropdown {
  margin: 4px 14px 10px 28px;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm {
  padding: 7px 0 7px 10px;
  border-left: 1px solid rgba(197, 160, 89, 0.25);
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-item {
  margin: 2px 0;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 2px 0 !important;
  padding: 5px 8px !important;
  border: 1px solid transparent;
  border-radius: 8px !important;
  color: #aeb8ae !important;
  font-size: 0.76rem;
  line-height: 1.2;
  background: transparent !important;
  transform: none;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  margin-right: 8px;
  border-radius: 7px;
  color: #8f9d91 !important;
  font-size: 0.92rem;
  background-color: rgba(255, 255, 255, 0.045);
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.055) !important;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link.active,
[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link[aria-current="page"] {
  color: #ffffff !important;
  border-color: rgba(197, 160, 89, 0.35);
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.2), rgba(197, 160, 89, 0.06)) !important;
  box-shadow: inset 3px 0 0 #c5a059;
}

[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link.active i,
[data-layout=vertical] .navbar-menu .sidebar-parameters .nav-sm .nav-link[aria-current="page"] i {
  color: #f0cf89 !important;
  background-color: rgba(197, 160, 89, 0.12);
}

.navbar-nav .menu-title {
  padding: 14px 24px !important;
  color: #4b584d !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

header#page-topbar {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(195, 199, 172, 0.5) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.01) !important;
}

/* 8. AUTH PAGE TACTICAL IMAGE BACKGROUND & OVERLAY */
html:has(body.auth-scroll-page) {
  overflow: hidden !important;
  height: 100% !important;
}

body.auth-scroll-page {
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.auth-page-wrapper {
  position: relative !important;
  min-height: 100% !important;
  height: auto !important;
  overflow: visible !important;
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  z-index: 1 !important; /* Stacking context */
}

/* Background image */
.auth-page-wrapper::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../images/font_login.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: -3 !important;
  animation: bgPanZoom 24s infinite alternate ease-in-out !important;
  clip-path: inset(0) !important;
}

/* Background overlay gradient */
.auth-page-wrapper::after {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(28, 61, 39, 0.83) 0%, rgba(12, 15, 22, 0.93) 100%) !important;
  z-index: -2 !important;
  opacity: 1 !important;
}

/* Make particles container absolute, full screen, transparent and non-interactive */
.auth-one-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.auth-one-bg .shape, .auth-one-bg .bg-overlay {
  display: none !important;
}

.particles-js-canvas-el {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: -1 !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.auth-page-content {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  /**padding: 40px 0 !important;**/
}

.auth-page-content .container {
  width: 100% !important;
}

.auth-page-wrapper .footer {
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  position: static !important;
  background: transparent !important;
  border-top: none !important;
  padding: 20px 0 !important;
}

@keyframes bgPanZoom {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -0.5%);
  }
  100% {
    transform: scale(1.03) translate(1%, 0.5%);
  }
}

.auth-page-content .card {
  backdrop-filter: blur(20px) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
  animation: floatCard 6s ease-in-out infinite;
}

@keyframes floatCard {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* Success Button Override (Register / Login button) */
.auth-page-content .btn-success, .btn-success {
  background: var(--inps-primary-gradient) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0.8rem 1.5rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px 0 rgba(28, 61, 39, 0.35) !important;
  transition: all 0.3s ease !important;
}

.auth-page-content .btn-success:hover, .btn-success:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 20px 0 rgba(28, 61, 39, 0.45) !important;
  background: linear-gradient(135deg, #234d31 0%, #3a7049 100%) !important;
}

/* 9. PROGRESS BARS & BADGES (Malian National Colors) */
.progress {
  height: 8px !important;
  border-radius: 6px !important;
  background-color: #e2e4d5 !important;
}

.progress-bar {
  border-radius: 6px !important;
  transition: width 1s ease !important;
}

.badge {
  padding: 0.4em 0.7em !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

/* Soft status badges - Army Recruitment styles */
.badge.bg-success-subtle {
  background-color: rgba(20, 184, 45, 0.12) !important; /* Flag Green */
  color: #14b82d !important;
}

.badge.bg-warning-subtle {
  background-color: rgba(250, 204, 21, 0.12) !important; /* Flag Yellow */
  color: #d9a006 !important;
}

.badge.bg-primary-subtle {
  background-color: rgba(197, 160, 89, 0.12) !important; /* Khaki */
  color: #a37f39 !important;
}

.badge.bg-danger-subtle {
  background-color: rgba(239, 68, 68, 0.12) !important; /* Flag Red */
  color: #ef4444 !important;
}

.badge.bg-info-subtle {
  background-color: rgba(6, 182, 212, 0.12) !important;
  color: #06b6d4 !important;
}

/* 10. DOSSIER FILE MANAGER CARDS */
.folder-card-custom {
  background: #ffffff !important;
  border: 1px solid rgba(195, 199, 172, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.folder-card-custom:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: var(--inps-card-shadow-hover) !important;
  border-color: rgba(197, 160, 89, 0.4) !important;
}

.folder-icon-wrapper i {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.folder-card-custom:hover .folder-icon-wrapper i {
  transform: scale(1.2) rotate(4deg) !important;
  color: #c5a059 !important; /* Gold Khaki */
}

.card-suivi {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-suivi:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--inps-card-shadow-hover) !important;
}

/* Table Hover */
.table tbody tr {
  transition: background-color 0.2s ease !important;
}

.table tbody tr:hover {
  background-color: rgba(28, 61, 39, 0.03) !important;
}

/* 11. ADMIN DASHBOARD TACTICAL CARDS & ANIMATIONS */
.card-fama-stat {
  background: #ffffff !important;
  border: 1px solid rgba(195, 199, 172, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.card-fama-stat::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--inps-primary) !important; /* FAMa Green */
  opacity: 0.85 !important;
}

.card-fama-stat.accent-gold::before {
  background: var(--inps-accent) !important; /* FAMa Gold/Khaki */
}

.card-fama-stat:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(28, 61, 39, 0.07) !important;
  border-color: rgba(197, 160, 89, 0.25) !important;
}

.fama-avatar-title {
  background: rgba(28, 61, 39, 0.08) !important;
  color: var(--inps-primary) !important;
  border-radius: 10px !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  transition: all 0.3s ease !important;
}

.fama-avatar-title.accent-gold {
  background: rgba(197, 160, 89, 0.12) !important;
  color: #a47e3b !important;
}

.card-fama-stat:hover .fama-avatar-title {
  transform: scale(1.1) !important;
}

/* Staggered entrance animations */
@keyframes fadeInUpStagger {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.animate-fade-in-up {
  animation: fadeInUpStagger 0.65s cubic-bezier(0.165, 0.84, 0.44, 1) both !important;
}

.delay-1 { animation-delay: 0.08s !important; }
.delay-2 { animation-delay: 0.16s !important; }
.delay-3 { animation-delay: 0.24s !important; }
.delay-4 { animation-delay: 0.32s !important; }
.delay-5 { animation-delay: 0.40s !important; }
.delay-6 { animation-delay: 0.48s !important; }

/* 12. SUBMISSION FILES CARD MANAGER (.card-fama-doc) */
.card-fama-doc {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.card-fama-doc:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 25px rgba(28, 61, 39, 0.05) !important;
}

.fama-doc-icon-wrapper {
  background: rgba(12, 15, 22, 0.04) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.card-fama-doc.border-secondary .fama-doc-icon-wrapper {
  background: rgba(12, 15, 22, 0.04) !important;
  color: #5b635a !important;
}

.card-fama-doc.border-warning .fama-doc-icon-wrapper {
  background: rgba(250, 204, 21, 0.08) !important;
  color: #d9a006 !important;
}

.card-fama-doc.border-danger .fama-doc-icon-wrapper {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.card-fama-doc.border-success .fama-doc-icon-wrapper {
  background: rgba(20, 184, 45, 0.08) !important;
  color: #14b82d !important;
}

.card-fama-doc:hover .fama-doc-icon-wrapper {
  transform: scale(1.08) !important;
}

/* Visually hide input file native browser element */
.visually-hidden-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
}

.selected-file-display {
  transition: all 0.3s ease !important;
}