:root{

/*  --accent:#2563eb;
  --accent-soft:#eaf1ff;
*/
  --border:#e5e7eb;
  --bg:#f9fafb;
  --text:#111827;
  --muted:#6b7280;
  --white:#fff;
  --black:#000;
  --gray: rgba(0,0,0,0.05);
}

/* ===== PALETTES PAR DÉPARTEMENT ===== */

/* 🔴 Commercial / Sales (red vibrant) */
[data-dept="sales"] {
  --accent:#dc2626;       /* red-600 */
  --accent-soft:#fee2e2;  /* red-100 */
}

/* 🟢 Achats / Purchasing */
[data-dept="achats"] {
  --accent:#059669;       /* emerald-600 */
  --accent-soft:#ecfdf5;  /* emerald-50 */
}

/* 🔵 Production */
[data-dept="production"] {
  --accent:#4f46e5;       /* indigo-600 */
  --accent-soft:#eef2ff;  /* indigo-50 */
}

/* 🟠 Finance */
[data-dept="finance"] {
  --accent:#d97706;       /* amber-600 */
  --accent-soft:#fff7ed;  /* amber-50 */
}

/* 🟣 Ressources Humaines */
[data-dept="humanressources"] {
  --accent:#9333ea;       /* purple-600 */
  --accent-soft:#f3e8ff;  /* purple-50 */
}

/* ⚫ Paramètres */
[data-dept="parameters"] {
  --accent:#6b7280;       /* gray-600 */
  --accent-soft:#f3f4f6;  /* gray-100 */
}

/* 🟣 Dashboard */
[data-dept="dashboard"] {
  --accent:#9333ea;       /* purple-600 */
  --accent-soft:#f3e8ff;  /* purple-50 */
}


/* ===== GLOBAL ===== */
*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family: 'Inter', sans-serif;
  background: hsl(0, 0%, 98%);
  color: #222;
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:600;}
section{margin-bottom:2rem;}
a{text-decoration:none;color:inherit;}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.5rem 1.2rem;border-radius:9999px;font-size:.9rem;font-weight:500;
  cursor:pointer;border:none;transition:.2s ease-in-out;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.2);}
.btn-primary:hover{background:var(--accent-soft); color: var(--accent);}
.btn-ghost{background:var(--white);border:1px solid var(--border);color:var(--text);}
.btn-ghost:hover{background:#f3f4f6;}
.btn.small{font-size:.85rem;padding:.35rem .9rem;}
.btn-action{background:var(--white);color:var(--text);}
.btn-action:hover{background:#f3f4f6;}


/* ===== BADGES ===== */
.pill{padding:.35rem .8rem;border-radius:9999px;font-size:.8rem;font-weight:500;display:inline-block;}
.pill-paid{background:rgba(34,197,94,0.12);color:#15803d;border:1px solid rgba(34,197,94,0.2);}
.pill-draft{background:rgba(234,179,8,0.12);color:#92400e;border:1px solid rgba(234,179,8,0.2);}
.pill-green {background: rgba(34,197,94,0.12);color: #15803d;border: 1px solid rgba(34,197,94,0.2);}
.pill-yellow {background: rgba(234,179,8,0.12);color: #92400e;border: 1px solid rgba(234,179,8,0.2);}
.pill-red {background: rgba(239,68,68,0.12);color: #b91c1c;border: 1px solid rgba(239,68,68,0.2);}
.pill-purple {background: rgba(168,85,247,0.12);color: #7e22ce;border: 1px solid rgba(168,85,247,0.2);}
.pill-blue {background: rgba(59,130,246,0.12);color: #1d4ed8; border: 1px solid rgba(59,130,246,0.2);}
.pill-orange {background: rgba(249,115,22,0.12); color: #c2410c; border: 1px solid rgba(249,115,22,0.2);}


/* ===== PARAMETERS ===== */
.text-right {text-align: right;}
.text-left {text-align: left;}
.text-center {text-align: center;}
.text-muted {color: var(--muted);}

.text-red {color: #dc2626;}
.text-green {color: #059669;}

.bg-red {background-color: #fee2e2;}
.bg-green {background-color: #ecfdf5;}


.divider {
  width: 100%;
  height: 1px;
  background: lightgray;
}

/* ===== Flexible Width Utilities ===== */
.w-10  { flex: 0 0 10%; }
.w-15  { flex: 0 0 15%; }
.w-20  { flex: 0 0 20%; }
.w-25  { flex: 0 0 25%; }
.w-30  { flex: 0 0 30%; }
.w-35  { flex: 0 0 35%; }
.w-40  { flex: 0 0 40%; }
.w-50  { flex: 0 0 50%; }
.w-60  { flex: 0 0 60%; }
.w-auto { flex: 1 1 auto; } /* expands to fill remaining space */

/* ===== INPUTS CRISPY FIELD STYLING (unified inputs, selects, textareas) ===== */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea,
select {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Labels */
label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.35rem;
  display: inline-block;
}

/* Errors */
.help-block,
.invalid-feedback {
  color: #dc2626;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Optional: modern dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E<path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  appearance: none;
}

/* ===== NAVBAR 1 ===== */
.nav-top{background:var(--black);color:#fff;}
.nav-inner{max-width:1100px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;}
.nav-top .left,.nav-top .right{display:flex;align-items:center;gap:1rem;}
.icon-btn{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:.45rem;border-radius:50%;transition:.2s;}
.icon-btn:hover{background:rgba(255,255,255,.1);}

/* ===== NAVBAR 2 ===== */
.nav-bottom{
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;padding:1rem 1rem;
}
.nav-bottom button{
  background:none;border:none;color:var(--muted);
  padding:.45rem .9rem;border-radius:9999px;font-size:.9rem;cursor:pointer;
}
/*.nav-bottom button.active{background:var(--accent-soft);color:var(--accent)}
.nav-bottom button:hover{background:var(--accent-soft);}
*/

/* ===== NAVBAR COLOR ACTIVE ===== */

body[data-dept="achats"] .nav-bottom .dropdown[data-dept-tab="achats"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}

body[data-dept="production"] .nav-bottom .dropdown[data-dept-tab="production"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}

body[data-dept="sales"] .nav-bottom .dropdown[data-dept-tab="sales"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}

body[data-dept="finance"] .nav-bottom .dropdown[data-dept-tab="finance"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}

body[data-dept="humanressources"] .nav-bottom .dropdown[data-dept-tab="humanressources"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}

body[data-dept="parameters"] .nav-bottom .dropdown[data-dept-tab="parameters"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}

body[data-dept="dashboard"] .nav-bottom .dropdown[data-dept-tab="dashboard"] > button {
  color: var(--accent);
  background-color: var(--gray);
  font-weight: 600;
}


/* ===== DROPDOWN ===== */

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 110%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  min-width: 200px;
  z-index: 9999;
}

.dropdown-menu button {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: .7rem 1rem;
  font-size: .9rem;
  color: var(--text);
  cursor: pointer;
}

.dropdown-menu button:hover{background:var(--accent-soft);color:var(--accent);border-radius: 0}

.dropdown.show > .dropdown-menu {
  display: block;
}

/* ===== PAGE STRUCTURE ===== */
main{max-width:1100px;margin:5rem auto;padding:0 1.5rem}
.page-header{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:1rem;margin:5rem 0 3rem 0;}
.page-header h1{font-size:1.6rem;display:flex;align-items:center;gap:.5rem;}
.page-header h1 i{color:var(--accent);}
.page-header p{color:var(--muted);}

/* ===== MESSAGES ALERT ===== */
.alert {
  max-width:900px;
  margin:2rem auto;
  padding: 1rem;
  border-radius: 1rem;
}

/* ===== STATS GRID ===== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-bottom:3rem;}
.stat-card{
  background:var(--white);border:1px solid var(--border);border-radius:1rem;
  padding:1.1rem 1.3rem;display:flex;justify-content:space-between;align-items:center;
}
.stat-icon{background:var(--accent-soft);color:var(--accent);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.stat-label{font-size:.85rem;color:var(--muted);}
.stat-value{font-size:1.3rem;font-weight:600;}

.table-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;}


/* ===== FILTERS + SEARCH ===== */

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0;
  flex-wrap: wrap;
  gap: 1rem;
}

.tabs {
  display: flex;
  align-items: center;
  border-radius: 9999px;
  gap: 0.3rem;
}

.tab {
  display: inline-block;
  border: none;
  padding: .25rem 1rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
  text-decoration: none;
  transition: all 0.2s ease;
  background: rgba(0,0,0,0.04);
}

.tab:hover {
  background: rgba(0,0,0,0.04);
  color: var(--accent, #2563eb);
}

.tab.active {
  background: var(--accent, #2563eb);
  color: #fff;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}


.search{position:relative;}
.search input{border:1px solid var(--border);border-radius:9999px;padding:.55rem 2rem .55rem 1rem;font-size:.9rem;width:240px;background:var(--white);}
.search i{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.9rem;}



.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2rem;}

/* ===== TABLE ===== */
.table-container{background:var(--white);border:1px solid var(--border);border-radius:12px;overflow-x:visible; !important;position:relative;z-index:1;}
table{width:100%;min-width:900px;border-collapse:collapse;font-size:.9rem;}
thead{background:#f8fafb;}
th{text-align:left;color:#444;padding:.9rem 1rem;border-bottom:1px solid var(--border); text-transform: uppercase;}
td{padding:1rem;border-bottom:1px solid #f3f4f6;}
tbody tr:hover{background:#fafafa;}
.status{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;border-radius:9999px;font-size:.8rem;font-weight:500;background:var(--accent-soft);color:var(--accent);}

/* ===== INVOICE SHEET ===== */
.action-bar{text-align:center;padding:1.8rem 0 1rem;}
.action-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem;}
.invoice-container{padding:0 1rem 3rem;}
.invoice-sheet{
  background:#fff;border:1px solid var(--border);border-radius:1rem;
  max-width:900px;margin:auto;padding:4rem 2.5rem;box-shadow:0 2px 6px rgba(0,0,0,.04);
}
.invoice-header {
  align-items:center;
  margin-bottom:5rem;
  text-align: center;
}

/* ===== FORM GRID ===== */
.form-section {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 2rem; /* space between the two big columns */
  margin-bottom: 2rem;
}

/* each column’s rows */
.form-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* vertical spacing between form rows */
}

/* small rows inside each column */
.form-row {
  display: flex;
  gap: 1rem; /* horizontal spacing between two fields */
}

.form-row > div {
  flex: 1; /* equal width for both fields */
}

/* Responsive: stack into one column on mobile */
@media (max-width: 768px) {
  .form-section {
    grid-template-columns: 1fr; /* single column */
  }

  .form-row {
    flex-direction: column; /* fields stacked vertically */
  }
}

/* Form fields page */

.form-fields{
  width: 400px; 
  margin: auto;
}

.form-fields-row{
  margin-bottom: 1.5rem; 
}

.form-fields-title{
  margin: 3rem 0 2rem 0; 
  border-bottom: 1px lightgray solid;
}


.client-box{border:1px solid var(--border);border-radius:.8rem;padding:.9rem;}
.invoice-table-container{border:1px solid var(--border);border-radius:1rem;overflow-x:auto;margin:3rem 0;}
.invoice-table{width:100%;border-collapse:collapse;min-width:680px;}
.invoice-table th,.invoice-table td{padding:.7rem 1rem;}
.invoice-footer{display:grid;grid-template-columns:1fr 330px;gap:1.5rem;}
.table-delete-btn{color: var(--accent); background-color: var(--accent-soft); padding: 10px; border-radius: 50%; border: 0;}
.table-delete-btn:hover{color: white; background-color: var(--accent)}

.notes{background:;border:1px solid var(--border);border-radius:1rem;padding:1rem;}
.totals{border:1px solid var(--border);border-radius:1rem;padding:1.1rem 1.5rem;background:#fff;font-size:.9rem;}
.totals div{display:flex;justify-content:space-between;margin-bottom:.45rem;}
.total-line{border-top:1px dashed var(--border);padding-top:.5rem;font-weight:600;}

/* ========== APPLE-STYLE TABS ========== */
.tabs-bar {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  background: #f5f5f7;
  padding: 4px;
  margin: 0rem 0 0rem;
  overflow-x: auto;
}

.tab-button {
  flex: 1;
  background: transparent;
  color: #555;
  font-weight: 500;
  font-size: 0.9rem;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.tab-button:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #111;
}

.tab-button.active {
  color: white;
  background: var(--accent);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

/* TAB CONTENT */
.tabs-content {
  margin-top: 1rem;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.25s ease-in-out;
}

.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== STEPPER ===== */
/*.stepper{display:flex;justify-content:center;align-items:center;gap:2rem;margin:5rem auto 1rem auto;max-width:700px;}
.step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1;text-align:center;}
.step::after{content:"";position:absolute;top:14px;right:-58%;width:100%;height:2px;background:var(--border);}
.step:last-child::after{display:none;}
.step-circle{width:26px;height:26px;border-radius:50%;background:var(--white);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:500;transition:all .25s ease;}
.step-label{font-size:.8rem;color:var(--muted);margin-top:.5rem;}
.step.active .step-circle{background:var(--accent);border-color:var(--accent);color:#fff;}
.step.active .step-label{color:var(--accent);font-weight:500;}
*/

.stepper-container {
    display: flex;
    height: 60px; 
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    font-family: sans-serif;
    position: relative;
}

.stepper-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    position: relative; 
    margin-top: 15px;
}

.stepper-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #4f4f4f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border: 2px solid #e0e0e0;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    z-index: 10;
}

.stepper-label {
    position: absolute;
    top: 45px;
    font-size: 12px;
    color: #4f4f4f;
    width: 100px; 
}

/* Active Step Styles */
.stepper-unit.active .stepper-circle {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
}

.stepper-unit.active .stepper-label {
    color: var(--accent);
    font-weight: bold;
}

.stepper-line {
    flex-grow: 1;
    height: 2px;
    background-color: #e0e0e0;
    margin: 0 10px;
    margin-top: 30px;
}
/* ===== FOOTER ===== */
footer{background:#000;color:#fff;text-align:center;padding:1.5rem 1rem;margin-top:3rem;font-size:.85rem;}

/* ===== RESPONSIVE ===== */
@media(max-width:700px){
  main{padding:0 1rem;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .btn-new,.tabs,.search input{width:100%;}
  .invoice-meta,.invoice-footer{grid-template-columns:1fr;}
  .invoice-sheet{padding:1.4rem;}
}