/* Time-Suivi — feuille de styles */
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       margin: 0; background: #f4f6f8; color: #222; font-size: 14px; }
a { color: #1565c0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========= Topnav ========= */
.topnav { background: #ffffff; color: #1f2937; padding: 8px 16px;
          display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
          border-bottom: 3px solid #1565c0; box-shadow: 0 1px 4px rgba(0,0,0,.08);
          min-height: 60px; }
.topnav .brand { padding: 4px 0; }
.topnav .brand a { display: flex; align-items: center; gap: 10px; color: #1f2937; font-weight: 700; }
.topnav .brand a:hover { text-decoration: none; }
.topnav .brand .logo { height: 36px; width: auto; }
.topnav .brand span { font-size: 16px; }

.topnav ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; align-items: center; }
.topnav ul li { display: flex; align-items: center; }

/* Boutons de navigation - chacun avec sa couleur (carre colore) */
.navbtn {
  display: inline-block; padding: 8px 14px; border-radius: 6px;
  color: #fff !important; font-weight: 600; font-size: 13px;
  text-decoration: none; transition: filter .15s, transform .05s;
}
.navbtn:hover { text-decoration: none; filter: brightness(1.10); }
.navbtn:active { transform: translateY(1px); }

.nav-dashboard  { background: #2563eb; }   /* bleu */
.nav-timesheet  { background: #0891b2; }   /* cyan */
.nav-new        { background: #16a34a; }   /* vert */
.nav-inventaire { background: #ca8a04; }   /* jaune fonce */
.nav-stats      { background: #9333ea; }   /* violet */
.nav-clients    { background: #ea580c; }   /* orange */
.nav-codes      { background: #db2777; }   /* rose */
.nav-users      { background: #475569; }   /* gris-bleu */
.nav-facturation{ background: #0f766e; }   /* teal */
.nav-chrono     { background: #f59e0b; }   /* ambre */
.nav-chrono.chrono-active { background: #dc2626; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.6); }
  50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}

/* Bouton principal "+ Nouvelle entree" : beaucoup plus grand */
.navbtn.nav-primary {
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 3px 8px rgba(22, 163, 74, .45);
  border: 2px solid #15803d;
  margin-right: 8px;
}
.navbtn.nav-primary:hover { filter: brightness(1.10); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 163, 74, .55); }

/* Menus deroulants */
.nav-rapports { background: #6366f1; }   /* indigo */
.nav-donnees  { background: #0d9488; }   /* teal-2 */
.navbtn.nav-rapports, .navbtn.nav-donnees {
  border: none; cursor: pointer; font: inherit;
}
.navbtn .caret { font-size: 10px; margin-left: 4px; opacity: .85; }

.nav-group { position: relative; }
.nav-group .nav-submenu {
  display: none !important;
  position: absolute; top: calc(100% + 6px); left: 0;
  list-style: none; padding: 6px; margin: 0;
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.15);
  min-width: 200px; z-index: 1000;
}
.nav-group.open > .nav-submenu { display: block !important; }
.nav-submenu li { list-style: none; }
.nav-submenu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; color: #1f2937; border-radius: 4px;
  font-weight: 500; font-size: 13px;
}
.nav-submenu a:hover { background: #f3f4f6; text-decoration: none; }
.nav-submenu .dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}

.topnav .user { margin-left: auto; color: #4b5563; display: flex; gap: 12px;
                align-items: center; padding: 12px 0; font-size: 13px; }
.topnav .user a { color: #1565c0; }

/* ========= Layout ========= */
.container { max-width: 1200px; margin: 24px auto; padding: 0 16px; }
h1 { margin: 0 0 16px; font-size: 22px; color: #1f2937; }
h2 { margin: 24px 0 12px; font-size: 17px; color: #374151; }

.card { background: #fff; padding: 16px 20px; border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 20px; }

/* ========= Flash messages ========= */
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-weight: 500; }
.flash.success { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.flash.error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }

/* ========= Tables ========= */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; }
th, td { padding: 8px 10px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
th { background: #f3f4f6; font-weight: 600; font-size: 12px; text-transform: uppercase;
     color: #6b7280; letter-spacing: .3px; }
tbody tr:hover { background: #f9fafb; }
td.right, th.right { text-align: right; }
td.center, th.center { text-align: center; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.user-ini { color: #1565c0; font-weight: 700; }
tr.row-archived td { color: #9ca3af; background: #fafafa; }
table.hide-pieces .col-pieces { display: none; }

/* Formulaire 2 colonnes : champs principaux a gauche, pieces a droite */
.form-2col { display: flex; gap: 20px; align-items: flex-start; }
.form-2col .form-main { flex: 3; min-width: 0; }
.form-2col .form-sidebar {
  flex: 0 0 200px;
  background: #f9fafb; padding: 12px; border-radius: 6px;
  border: 1px solid #e5e7eb;
}
.form-2col .form-sidebar h2 { margin-top: 0; }
.form-2col .form-sidebar > div { margin-bottom: 8px; }
@media (max-width: 768px) {
  .form-2col { flex-direction: column; }
  .form-2col .form-sidebar { flex: 1 1 auto; width: 100%; }
}

/* Bouton Creer prominent en bas du formulaire */
.form-actions {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex; gap: 12px; justify-content: flex-end; align-items: center;
}
.btn-create-big {
  font-size: 17px; font-weight: 700; padding: 14px 32px;
  background: #16a34a; color: #fff;
  border: 2px solid #15803d; border-radius: 6px;
  cursor: pointer; transition: filter .15s, transform .05s;
  box-shadow: 0 3px 8px rgba(22,163,74,.4);
}
.btn-create-big:hover { filter: brightness(1.08); transform: translateY(-1px); }
table.hide-source .col-source { display: none; }

/* ========= Forms ========= */
form .row { display: flex; gap: 12px; flex-wrap: wrap; }
form .row > div { flex: 1; min-width: 180px; }
label { display: block; font-size: 12px; color: #4b5563; margin-bottom: 4px; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
  font: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #1565c0; box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}
textarea { resize: vertical; min-height: 60px; }

/* ========= Boutons d'action (carres colores) ========= */
button, .btn {
  background: #1565c0; color: #fff; border: 0; padding: 8px 16px; border-radius: 6px;
  cursor: pointer; font: inherit; font-weight: 600; text-decoration: none;
  display: inline-block; transition: filter .15s, transform .05s;
}
button:hover, .btn:hover { filter: brightness(1.10); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); }

.btn.primary  { background: #2563eb; }
.btn.success  { background: #16a34a; }
.btn.warning  { background: #ea580c; }
.btn.secondary{ background: #6b7280; }
.btn.danger   { background: #dc2626; }
.btn.purple   { background: #9333ea; }

.btn.small { padding: 4px 10px; font-size: 12px; }

/* ========= Filtres ========= */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end;
           background: #fff; padding: 14px; border-radius: 8px; margin-bottom: 16px;
           box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.filters > * { flex: 0 0 auto; }
.filters input, .filters select { min-width: 140px; }

/* ========= KPI ========= */
.kpi { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi .box { flex: 1; min-width: 200px; background: #fff; padding: 16px;
            border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
            border-left: 4px solid #1565c0; }
.kpi .box.green  { border-left-color: #16a34a; }
.kpi .box.orange { border-left-color: #ea580c; }
.kpi .box.purple { border-left-color: #9333ea; }
.kpi .box .label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; }
.kpi .box .value { font-size: 24px; font-weight: 700; color: #1f2937; margin-top: 4px; }

.locked { color: #9ca3af; font-style: italic; font-size: 12px; }
.muted  { color: #6b7280; }

/* ========= Login ========= */
.login-box { max-width: 380px; margin: 60px auto; background: #fff;
             padding: 28px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.login-box h1 { text-align: center; }
.login-box .logo-login { display: block; margin: 0 auto 16px; max-height: 60px; }

/* ========= Footer ========= */
.footer { text-align: center; padding: 24px; color: #6b7280; font-size: 12px; }

/* ========= Calcul duree en temps reel ========= */
.duration-hint { display: inline-block; margin-left: 8px; padding: 2px 8px;
                 background: #dcfce7; color: #166534; border-radius: 4px;
                 font-size: 12px; font-weight: 600; }