/**
 * Ambismart - Application CSS
 * Design moderne bleu foncé / gris
 */

/* ================================
   Google Fonts - Nunito Sans (proche d'Avenir)
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;0,6..12,700;0,6..12,800;1,6..12,400&display=swap');

/* ================================
   Variables CSS
   ================================ */
:root {
 /* Couleurs principales - Bleu foncé */
 --as-primary: #1e3a5f;
 --as-primary-dark: #152a45;
 --as-primary-light: #2c5282;
 --as-primary-lighter: #3d6a9f;
 
 /* Couleurs secondaires - Gris */
 --as-gray-900: #1a1d21;
 --as-gray-800: #2d3339;
 --as-gray-700: #4a5568;
 --as-gray-600: #636e7b;
 --as-gray-500: #8492a6;
 --as-gray-400: #a0aec0;
 --as-gray-300: #cbd5e0;
 --as-gray-200: #e2e8f0;
 --as-gray-100: #f7fafc;
 --as-gray-50: #fafbfc;
 
 /* Accent */
 --as-accent: #4299e1;
 --as-accent-light: #63b3ed;
 
 /* Couleurs de statut */
 --as-draft: #718096;
 --as-validation: #ed8936;
 --as-published: #38a169;
 --as-error: #e53e3e;
 --as-success: #38a169;
 
 /* Couleurs neutres */
 --as-white: #ffffff;
 --as-black: #000000;
 
 /* Typographie */
 --as-font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 --as-font-size-xs: 0.75rem;
 --as-font-size-sm: 0.875rem;
 --as-font-size-base: 1rem;
 --as-font-size-lg: 1.125rem;
 --as-font-size-xl: 1.25rem;
 --as-font-size-2xl: 1.5rem;
 --as-font-size-3xl: 1.875rem;
 --as-line-height: 1.6;
 
 /* Espacements */
 --as-spacing-xs: 0.25rem;
 --as-spacing-sm: 0.5rem;
 --as-spacing-md: 1rem;
 --as-spacing-lg: 1.5rem;
 --as-spacing-xl: 2rem;
 --as-spacing-2xl: 3rem;
 
 /* Bordures */
 --as-radius-sm: 0.375rem;
 --as-radius: 0.5rem;
 --as-radius-lg: 0.75rem;
 --as-radius-xl: 1rem;
 --as-radius-full: 9999px;
 
 /* Ombres */
 --as-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --as-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 --as-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --as-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 --as-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 /* Transitions */
 --as-transition-fast: 150ms ease;
 --as-transition: 200ms ease;
 --as-transition-slow: 300ms ease;
}

/* ================================
   Base Styles
   ================================ */
*,
*::before,
*::after {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body {
 font-family: var(--as-font-family);
 font-size: var(--as-font-size-base);
 font-weight: 400;
 line-height: var(--as-line-height);
 color: var(--as-gray-800);
 background-color: var(--as-gray-100);
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

main {
 flex: 1;
}

:focus-visible {
 outline: 2px solid var(--as-accent);
 outline-offset: 2px;
}

/* ================================
   Typography
   ================================ */
h1, h2, h3, h4, h5, h6 {
 font-weight: 700;
 line-height: 1.3;
 color: var(--as-gray-900);
 letter-spacing: -0.02em;
}

h1 { font-size: var(--as-font-size-3xl); }
h2 { font-size: var(--as-font-size-2xl); }
h3 { font-size: var(--as-font-size-xl); }
h4 { font-size: var(--as-font-size-lg); }

.text-muted {
 color: var(--as-gray-500) !important;
}

/* ================================
   Navbar / Header
   ================================ */
.navbar {
 background: linear-gradient(135deg, var(--as-primary) 0%, var(--as-primary-dark) 100%) !important;
 box-shadow: var(--as-shadow-md);
 padding: 0.75rem 0;
 min-height: 64px;
}

.navbar-brand {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 font-weight: 700;
 font-size: var(--as-font-size-lg);
 letter-spacing: -0.01em;
}

.navbar-brand img {
 height: 38px;
 width: auto;
}

.nav-link {
 font-weight: 500;
 font-size: var(--as-font-size-sm);
 padding: 0.5rem 1rem !important;
 border-radius: var(--as-radius);
 transition: all var(--as-transition);
 color: rgba(255, 255, 255, 0.85) !important;
}

.nav-link:hover {
 background-color: rgba(255, 255, 255, 0.1);
 color: var(--as-white) !important;
}

.nav-link.active {
 background-color: rgba(255, 255, 255, 0.15);
 color: var(--as-white) !important;
}

.navbar .btn-outline-light {
 border-color: rgba(255, 255, 255, 0.3);
 color: rgba(255, 255, 255, 0.9);
 font-weight: 500;
 font-size: var(--as-font-size-sm);
}

.navbar .btn-outline-light:hover {
 background-color: rgba(255, 255, 255, 0.15);
 border-color: rgba(255, 255, 255, 0.5);
 color: var(--as-white);
}

.navbar .dropdown-menu {
 border: none;
 box-shadow: var(--as-shadow-lg);
 border-radius: var(--as-radius-lg);
 padding: 0.5rem;
 margin-top: 0.5rem;
}

.navbar .dropdown-item {
 border-radius: var(--as-radius);
 padding: 0.5rem 1rem;
 font-size: var(--as-font-size-sm);
 font-weight: 500;
}

.navbar .dropdown-item:hover {
 background-color: var(--as-gray-100);
}

/* ================================
   Cards
   ================================ */
.card {
 background: var(--as-white);
 border: 1px solid var(--as-gray-200);
 border-radius: var(--as-radius-lg);
 box-shadow: var(--as-shadow);
 transition: all var(--as-transition);
}

.card:hover {
 box-shadow: var(--as-shadow-md);
}

.card-header {
 background: var(--as-gray-50);
 border-bottom: 1px solid var(--as-gray-200);
 padding: 1rem 1.25rem;
 font-weight: 600;
 font-size: var(--as-font-size-sm);
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--as-gray-700);
}

.card-body {
 padding: 1.25rem;
}

.card-footer {
 background: var(--as-gray-50);
 border-top: 1px solid var(--as-gray-200);
 padding: 1rem 1.25rem;
}

/* ================================
   Buttons
   ================================ */
.btn {
 font-family: var(--as-font-family);
 font-weight: 600;
 font-size: var(--as-font-size-sm);
 padding: 0.5rem 1.25rem;
 border-radius: var(--as-radius);
 transition: all var(--as-transition);
 letter-spacing: 0.01em;
}

.btn-primary {
 background: linear-gradient(135deg, var(--as-primary) 0%, var(--as-primary-light) 100%);
 border: none;
 box-shadow: 0 2px 4px rgba(30, 58, 95, 0.3);
}

.btn-primary:hover {
 background: linear-gradient(135deg, var(--as-primary-dark) 0%, var(--as-primary) 100%);
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(30, 58, 95, 0.4);
}

.btn-outline-primary {
 color: var(--as-primary);
 border-color: var(--as-primary);
}

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

.btn-outline-secondary {
 color: var(--as-gray-600);
 border-color: var(--as-gray-300);
}

.btn-outline-secondary:hover {
 background-color: var(--as-gray-100);
 border-color: var(--as-gray-400);
 color: var(--as-gray-700);
}

.btn-sm {
 padding: 0.375rem 0.875rem;
 font-size: var(--as-font-size-xs);
}

.btn-lg {
 padding: 0.75rem 1.75rem;
 font-size: var(--as-font-size-base);
}

/* ================================
   Tables
   ================================ */
.table {
 --bs-table-bg: var(--as-white);
 font-size: var(--as-font-size-sm);
}

.table > thead {
 background-color: var(--as-gray-50);
}

.table > thead > tr > th {
 font-weight: 600;
 color: var(--as-gray-600);
 border-bottom: 2px solid var(--as-gray-200);
 text-transform: uppercase;
 font-size: var(--as-font-size-xs);
 letter-spacing: 0.05em;
 padding: 1rem;
}

.table > tbody > tr > td {
 padding: 1rem;
 vertical-align: middle;
 border-bottom: 1px solid var(--as-gray-100);
}

.table-hover > tbody > tr:hover {
 background-color: var(--as-gray-50);
}

/* ================================
   Forms
   ================================ */
.form-control,
.form-select {
 font-family: var(--as-font-family);
 font-size: var(--as-font-size-sm);
 padding: 0.625rem 1rem;
 border: 1px solid var(--as-gray-300);
 border-radius: var(--as-radius);
 transition: all var(--as-transition);
}

.form-control:focus,
.form-select:focus {
 border-color: var(--as-accent);
 box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.form-label {
 font-weight: 600;
 font-size: var(--as-font-size-sm);
 color: var(--as-gray-700);
 margin-bottom: 0.375rem;
}

.required::after {
 content: " *";
 color: var(--as-error);
}

.form-text {
 font-size: var(--as-font-size-xs);
 color: var(--as-gray-500);
}

/* ================================
   Status Badges
   ================================ */
.badge {
 font-family: var(--as-font-family);
 font-weight: 600;
 font-size: var(--as-font-size-xs);
 padding: 0.35rem 0.75rem;
 border-radius: var(--as-radius-full);
 letter-spacing: 0.02em;
}

.badge-status {
 text-transform: uppercase;
}

.badge-draft {
 background-color: var(--as-gray-200);
 color: var(--as-gray-700);
}

.badge-validation {
 background-color: #fef3cd;
 color: #856404;
}

.badge-published {
 background-color: #d4edda;
 color: #155724;
}

/* Completion badges */
.badge-completion {
 font-weight: 700;
 min-width: 3rem;
 text-align: center;
}

.badge-completion-low {
 background-color: #f8d7da;
 color: #721c24;
}

.badge-completion-medium {
 background-color: #fef3cd;
 color: #856404;
}

.badge-completion-high {
 background-color: #d4edda;
 color: #155724;
}

/* ================================
   Search and Filters
   ================================ */
.search-filters {
 background: var(--as-white);
 padding: 1.25rem;
 border-radius: var(--as-radius-lg);
 margin-bottom: 1.5rem;
 box-shadow: var(--as-shadow);
 border: 1px solid var(--as-gray-200);
}

.search-input {
 position: relative;
}

.search-input i {
 position: absolute;
 left: 1rem;
 top: 50%;
 transform: translateY(-50%);
 color: var(--as-gray-400);
}

.search-input input {
 padding-left: 2.75rem;
}

/* ================================
   Sidebar
   ================================ */
.sidebar {
 background: var(--as-white);
 border-right: 1px solid var(--as-gray-200);
 min-height: calc(100vh - 64px);
}

.sidebar-nav .nav-link {
 display: flex;
 align-items: center;
 padding: 0.875rem 1.25rem;
 color: var(--as-gray-700);
 font-weight: 500;
 border-left: 3px solid transparent;
 transition: all var(--as-transition);
 margin: 0;
 border-radius: 0;
}

.sidebar-nav .nav-link:hover {
 background-color: var(--as-gray-50);
 color: var(--as-primary);
}

.sidebar-nav .nav-link.active {
 background-color: rgba(30, 58, 95, 0.05);
 color: var(--as-primary);
 border-left-color: var(--as-primary);
 font-weight: 600;
}

.sidebar-nav .nav-link i {
 margin-right: 0.75rem;
 font-size: 1.125rem;
 opacity: 0.7;
}

/* ================================
   Stats Cards
   ================================ */
.stat-card {
 text-align: center;
 padding: 1.5rem;
}

.stat-card .stat-value {
 font-size: 2.5rem;
 font-weight: 800;
 color: var(--as-primary);
 line-height: 1;
 margin-bottom: 0.5rem;
}

.stat-card .stat-label {
 color: var(--as-gray-500);
 font-size: var(--as-font-size-xs);
 text-transform: uppercase;
 letter-spacing: 0.1em;
 font-weight: 600;
}

/* ================================
   Empty States
   ================================ */
.empty-state {
 text-align: center;
 padding: 3rem 1.5rem;
}

.empty-state-icon {
 font-size: 4rem;
 color: var(--as-gray-300);
 margin-bottom: 1rem;
}

.empty-state-title {
 font-size: var(--as-font-size-lg);
 font-weight: 600;
 color: var(--as-gray-700);
 margin-bottom: 0.5rem;
}

.empty-state-text {
 color: var(--as-gray-500);
 margin-bottom: 1.5rem;
}

/* ================================
   Modal
   ================================ */
.modal-content {
 border: none;
 border-radius: var(--as-radius-xl);
 box-shadow: var(--as-shadow-xl);
}

.modal-header {
 background: var(--as-gray-50);
 border-bottom: 1px solid var(--as-gray-200);
 border-radius: var(--as-radius-xl) var(--as-radius-xl) 0 0;
 padding: 1.25rem 1.5rem;
}

.modal-title {
 font-weight: 700;
 font-size: var(--as-font-size-lg);
 color: var(--as-gray-900);
}

.modal-body {
 padding: 1.5rem;
}

.modal-footer {
 border-top: 1px solid var(--as-gray-200);
 padding: 1rem 1.5rem;
}

/* ================================
   Autosave Indicator
   ================================ */
.autosave-indicator {
 position: fixed;
 bottom: 1.5rem;
 left: 1.5rem;
 background: var(--as-white);
 padding: 0.625rem 1rem;
 border-radius: var(--as-radius-full);
 box-shadow: var(--as-shadow-lg);
 font-size: var(--as-font-size-xs);
 font-weight: 500;
 z-index: 1000;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 border: 1px solid var(--as-gray-200);
}

.autosave-indicator.saving {
 color: var(--as-validation);
}

.autosave-indicator.saved {
 color: var(--as-success);
}

.autosave-indicator.error {
 color: var(--as-error);
}

/* ================================
   Footer
   ================================ */
footer {
 background: var(--as-gray-900) !important;
 color: var(--as-gray-400);
 font-size: var(--as-font-size-sm);
}

footer a {
 color: var(--as-gray-300);
}

footer a:hover {
 color: var(--as-white);
}

/* ================================
   Progress Bar
   ================================ */
.progress {
 height: 0.5rem;
 border-radius: var(--as-radius-full);
 background-color: var(--as-gray-200);
}

.progress-bar {
 border-radius: var(--as-radius-full);
 background: linear-gradient(90deg, var(--as-primary) 0%, var(--as-accent) 100%);
}

/* ================================
   Login Page
   ================================ */
.login-container {
 background: linear-gradient(135deg, var(--as-primary) 0%, var(--as-primary-dark) 100%);
}

.login-card {
 background: var(--as-white);
 border-radius: var(--as-radius-xl);
 box-shadow: var(--as-shadow-xl);
}

.login-header {
 background: linear-gradient(135deg, var(--as-primary) 0%, var(--as-primary-light) 100%);
 color: var(--as-white);
 padding: 2rem;
 text-align: center;
 border-radius: var(--as-radius-xl) var(--as-radius-xl) 0 0;
}

/* ================================
   Skip Link (Accessibility)
   ================================ */
.skip-link {
 position: absolute;
 top: -50px;
 left: 0;
 background: var(--as-primary);
 color: var(--as-white);
 padding: 0.75rem 1.5rem;
 z-index: 9999;
 font-weight: 600;
 transition: top var(--as-transition);
 text-decoration: none;
}

.skip-link:focus {
 top: 0;
}

/* ================================
   Animations
   ================================ */
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
}

.fade-in {
 animation: fadeIn 0.3s ease-out;
}

@keyframes spin {
 from { transform: rotate(0deg); }
 to { transform: rotate(360deg); }
}

.spin {
 animation: spin 1s linear infinite;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 991.98px) {
 .sidebar {
  min-height: auto;
  border-right: none;
  border-bottom: 1px solid var(--as-gray-200);
 }
 
 .navbar-brand img {
  height: 32px;
 }
}

@media (max-width: 767.98px) {
 h1 { font-size: var(--as-font-size-2xl); }
 h2 { font-size: var(--as-font-size-xl); }
 
 .container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
 }
 
 .stat-card .stat-value {
  font-size: 2rem;
 }
 
 .table-responsive {
  font-size: var(--as-font-size-xs);
 }
}

/* ================================
   Print
   ================================ */
@media print {
 .navbar, .sidebar, .btn, .autosave-indicator, footer {
  display: none !important;
 }
 
 body {
  background: white;
 }
 
 .card {
  box-shadow: none;
  border: 1px solid #ddd;
 }
}

/* ================================
   Reduced Motion
   ================================ */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
 }
}