/* ==========================================================================
   WORKPANEL — strat de design "masa de trasat"
   TytanGranit, 2026
   --------------------------------------------------------------------------
   Fisele din aplicatie sunt desene tehnice: linii de cota rosii, marcaje verzi
   pe canturi, masuratori in milimetri. Interfata din jurul lor e tratata ca
   masa de trasat si instrumentul: fundal de ardezie rece, fise albe de hartie,
   linii de par, cifre monospatiate care se aliniaza in coloana.

   Se incarca DUPA styles.css si nu modifica niciun markup, doar aspectul.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokeni
   -------------------------------------------------------------------------- */
:root {
  /* Culori — 6 valori numite */
  --grafit:      #14161a;   /* masa grea: bara laterala, butoane principale   */
  --grafit-2:    #22262c;   /* grafit ridicat: hover in bara laterala         */
  --ardezie:     #5b6470;   /* text secundar, iconite                         */
  --rigla:       #d6dae0;   /* linii de par                                   */
  --masa:        #e8ebee;   /* fundalul aplicatiei (rece, nu crem)            */
  --foaie:       #ffffff;   /* fisele: carduri, tabele, campuri               */
  --tytan:       #d51920;   /* rosul din sigla: identitate + actiuni distructive */

  /* Semantice, tinute mate ca sa nu concureze cu desenele */
  --ocru:        #a2670b;
  --ocru-pal:    #fdf3e2;
  --padure:      #1c7a4c;
  --padure-pal:  #e8f5ee;
  --albastru:    #1e5f8a;
  --albastru-pal:#e9f2f8;
  --tytan-pal:   #fdecec;

  /* Suprascriem tokenii vechi ca sa se propage in regulile existente */
  --primary: var(--grafit);
  --primary-hover: var(--grafit-2);
  --secondary: var(--ardezie);
  --success: var(--padure);
  --warning: var(--ocru);
  --danger: var(--tytan);
  --info: var(--albastru);

  --text-primary: var(--grafit);
  --text-secondary: var(--ardezie);
  --text-muted: #8a929c;
  --text-inverse: #ffffff;

  --bg-primary: var(--foaie);
  --bg-secondary: var(--masa);
  --bg-tertiary: #f3f5f7;

  --border-primary: var(--rigla);
  --border-secondary: #c3c9d1;
  --border-focus: var(--grafit);

  /* Colturile: aproape drepte. Instrument, nu jucarie. */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;

  --shadow-sm: 0 1px 1px rgba(20, 22, 26, .04);
  --shadow: 0 1px 2px rgba(20, 22, 26, .06);
  --shadow-md: 0 6px 16px -8px rgba(20, 22, 26, .25);

  /* Tipografie */
  --font-ui: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Inaltimea barei de sus; antetul barei laterale o respecta, ca liniile
     de sub ele sa fie pe aceeasi orizontala. */
  --bara: 3.5rem;

  --transition: all .14s ease;
}

/* --------------------------------------------------------------------------
   2. Baza
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.45;
  background-color: var(--masa);
  color: var(--grafit);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-ui);
  letter-spacing: -.01em;
  color: var(--grafit);
}

/* Cifrele stau in coloana: taburi, nu proportional */
.table td, .table th,
.form-control, input, select, textarea,
.status-badge, .pagination, .breadcrumb {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--grafit); color: #fff; }

/* Focus vizibil peste tot, o singura regula */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--grafit);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Bare de derulare discrete */
* { scrollbar-width: thin; scrollbar-color: #c3c9d1 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c8ced5; border: 3px solid transparent; background-clip: content-box; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ardezie); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Coloana vertebrala: bara laterala in grafit
   -------------------------------------------------------------------------- */
.sidebar {
  background: var(--grafit);
  border-right: none;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
}

.sidebar-header {
  height: var(--bara);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 18px;
}

.sidebar-header .logo-container {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

/* Sigla e pe fond alb, deci primeste o placuta — ca o etichetă pe un panou */
.sidebar-header .sidebar-logo {
  height: 30px;
  width: auto;
  background: #fff;
  border-radius: 2px;
  padding: 3px 5px;
  flex: none;
}

.sidebar-header .logo-text {
  font-family: var(--font-ui) !important;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: .13em;
  color: #fff;
  display: block;
  line-height: 1;
  white-space: nowrap;
  text-align: left !important;
  position: relative;
}

/* Sigla poarta acum rosul marcii, asa ca bara de accent nu mai e necesara */
.sidebar-header .logo-text::after { display: none; }

.sidebar-content { padding: 14px 12px 24px; background: transparent; }

.nav-section { margin-bottom: 22px; }

.nav-section-title {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  color: #9aa4b0;
  text-transform: uppercase;
  padding: 0 10px;
  margin-bottom: 8px;
}
.nav-section-title::before { display: none !important; }

.nav-item {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: #e3e7eb;
  border-left: 2px solid transparent;
  border-radius: 0;
  padding: 9px 12px;
  gap: 10px;
}
.nav-item .nav-icon { color: #a7b0ba; transition: var(--transition); }

.nav-item:hover {
  background: var(--grafit-2);
  color: #fff;
  border-left-color: rgba(213, 25, 32, .5);
}
.nav-item:hover .nav-icon { color: #dfe4e9; }

.nav-item.active {
  background: var(--grafit-2);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--tytan);
}
.nav-item.active .nav-icon { color: var(--tytan); }

/* --------------------------------------------------------------------------
   4. Bara de sus: hartie, nu bloc greu
   -------------------------------------------------------------------------- */
.top-nav {
  background-color: var(--foaie) !important;
  color: var(--grafit) !important;
  border-bottom: 1px solid var(--rigla);
  box-shadow: none;
  height: var(--bara);
}

.top-nav-logo, .top-nav-logo img {
  background: transparent !important;
  border-radius: 2px;
  box-shadow: none !important;
  max-height: 34px;
  width: auto;
}

/* Firul Ariadnei: text simplu in bara de sus, fara cutie */
.top-nav .breadcrumb {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}
.breadcrumb, .breadcrumb * {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardezie) !important;
}
/* Pagina curenta e ultima si se citeste mai apasat */
.top-nav .breadcrumb span:last-child { color: var(--grafit) !important; font-weight: 500; }
.breadcrumb-separator { color: #b6bdc6 !important; }

.top-nav .action-btn { color: var(--ardezie); background: transparent; }
.top-nav .action-btn:hover { color: var(--grafit); background: var(--masa); }

.profile-btn { border: 1px solid transparent; border-radius: 999px; }
.profile-btn:hover { border-color: var(--rigla); background: var(--masa); }
.profile-avatar { border: 1px solid var(--rigla); }

.main-content { margin-top: var(--bara); padding: 22px 26px 40px; }

/* --------------------------------------------------------------------------
   5. Fisele: carduri albe pe masa de ardezie
   -------------------------------------------------------------------------- */
.card, .content-card, .dashboard-card {
  background: var(--foaie);
  border: 1px solid var(--rigla);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header, .content-header {
  background: var(--foaie) !important;
  color: var(--grafit) !important;
  border-bottom: 1px solid var(--rigla);
  padding: 18px 20px 16px;
}

.card-header h2, .card-header h3,
.content-header h1, .content-header h2 {
  color: var(--grafit) !important;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

/* SEMNATURA: rigla gradata. Diviziuni mici la 8px, diviziune mare la 40px.
   Apare doar sub titlul unei fise — intr-un singur rol, nicaieri altundeva. */
.card-header h2::after, .card-header h3::after,
.content-header h1::after, .content-header h2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background-image:
    repeating-linear-gradient(90deg, var(--rigla) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, #aeb6c0 0 1px, transparent 1px 40px);
  background-size: 100% 4px, 100% 8px;
  background-repeat: no-repeat;
  border-top: 1px solid var(--rigla);
  padding-top: 8px;
}

.card-body, .content-body { padding: 18px 20px 20px; background: var(--foaie); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. Tabele: foaie de masuratori
   -------------------------------------------------------------------------- */
.table, .users-table, .modern-table { background: var(--foaie); border-collapse: collapse; }

.table th, .users-table th, .modern-table th {
  background: #f4f6f8 !important;
  color: var(--ardezie) !important;
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 12px;
  border-bottom: 1px solid var(--rigla);
  border-top: 1px solid var(--rigla);
  white-space: nowrap;
}

.table td, .users-table td, .modern-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f3;
  color: var(--grafit);
  vertical-align: middle;
}

.table tbody tr:hover td, .users-table tbody tr:hover td { background: #f7f9fa; }
.table tbody tr:last-child td { border-bottom: none; }

/* Datele tehnice — ID, telefon, sume, date — in monospatiat, ca sa se citeasca
   pe verticala fara sa le confunzi intre randuri */
#fise-table td:nth-child(1),
#fise-table td:nth-child(3),
#fise-table td:nth-child(4),
#fise-table td:nth-child(6),
#users-table td:nth-child(3),
#users-table td:nth-child(5),
.users-table td:nth-child(3) {
  font-family: var(--font-data);
  font-size: 12.5px;
}
#fise-table td:nth-child(4) { text-align: right; font-weight: 500; }
#fise-table th:nth-child(4) { text-align: right; }

.table-responsive { border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   7. Butoane
   -------------------------------------------------------------------------- */
.btn, .action-button {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 8px 14px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn-primary, .action-button {
  background: var(--grafit);
  border-color: var(--grafit);
  color: #fff;
}
.btn-primary:hover, .action-button:hover {
  background: var(--grafit-2);
  border-color: var(--grafit-2);
  color: #fff;
}

.btn-secondary {
  background: var(--foaie);
  border-color: var(--border-secondary);
  color: var(--grafit);
}
.btn-secondary:hover { background: var(--masa); border-color: var(--ardezie); color: var(--grafit); }

.btn-success { background: var(--padure); border-color: var(--padure); color: #fff; }
.btn-success:hover { background: #17603c; border-color: #17603c; }

.btn-danger { background: var(--tytan); border-color: var(--tytan); color: #fff; }
.btn-danger:hover { background: #b31419; border-color: #b31419; }

.btn-warning { background: var(--ocru); border-color: var(--ocru); color: #fff; }
.btn-warning:hover { background: #8a5709; border-color: #8a5709; }

.btn-info { background: var(--albastru); border-color: var(--albastru); color: #fff; }
.btn-info:hover { background: #185070; border-color: #185070; }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Actiunile din tabel: iconite, nu blocuri colorate.
   Culoarea sta in iconita si se aprinde la hover — 20 de randuri x 4 butoane
   nu mai concureaza cu datele, iar stergerea ramane singurul lucru rosu. */
.table td .btn-sm,
.users-table td .btn-sm {
  background: transparent;
  border-color: transparent;
  color: var(--ardezie);
  padding: 6px;
  width: 30px;
  height: 30px;
  justify-content: center;
}
.table td .btn-sm.btn-primary,
.users-table td .btn-sm.btn-primary { background: transparent; color: var(--ardezie); }
.table td .btn-sm.btn-primary:hover,
.users-table td .btn-sm.btn-primary:hover { background: var(--masa); color: var(--grafit); }
.table td .btn-sm.btn-warning,
.users-table td .btn-sm.btn-warning { color: var(--ardezie); }
.table td .btn-sm.btn-danger,
.users-table td .btn-sm.btn-danger { color: #c2666a; }
.table td .btn-sm.btn-success,
.users-table td .btn-sm.btn-success { color: var(--padure); }
.table td .btn-sm.btn-secondary,
.table td .btn-sm.btn-outline-danger,
.users-table td .btn-sm.btn-secondary { color: var(--ardezie); background: transparent; }

.table td .btn-sm:hover, .users-table td .btn-sm:hover { background: var(--masa); }
.table td .btn-sm.btn-warning:hover { color: var(--grafit); }
.table td .btn-sm.btn-danger:hover { color: #fff; background: var(--tytan); }
.table td .btn-sm.btn-success:hover { color: #fff; background: var(--padure); }
.table td .btn-sm.btn-outline-danger:hover { color: var(--tytan); background: var(--tytan-pal); }

/* --------------------------------------------------------------------------
   8. Campuri
   -------------------------------------------------------------------------- */
.form-control, .input, select, textarea, .enhanced-select-input {
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--foaie);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
  color: var(--grafit);
  padding: 8px 11px;
  transition: var(--transition);
}
.form-control::placeholder, .enhanced-select-input::placeholder { color: #9aa2ac; }

.form-control:focus, .input:focus, select:focus, textarea:focus, .enhanced-select-input:focus {
  outline: none;
  border-color: var(--grafit);
  box-shadow: 0 0 0 3px rgba(20, 22, 26, .08);
}

.form-group label, .form-label {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ardezie);
  margin-bottom: 6px;
  display: block;
}

/* Numerele se introduc si se citesc monospatiat */
input[type="number"], .dimA, .width, .piece-length, .piece-width, .piece-quantity {
  font-family: var(--font-data);
}

.enhanced-select-options {
  border: 1px solid var(--rigla);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--foaie);
}
.enhanced-select-option { font-size: 13.5px; }
.enhanced-select-option:hover { background: var(--masa) !important; }

/* --------------------------------------------------------------------------
   9. Stari: pastila cu punct, nu bloc saturat
   -------------------------------------------------------------------------- */
.status-badge {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 2px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.status-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.status-ciorna    { background: var(--albastru-pal) !important; color: var(--albastru) !important; border-color: #c6dcea; }
.status-noua      { background: var(--tytan-pal) !important;    color: var(--tytan) !important;    border-color: #f3c9cb; }
.status-in_lucru  { background: var(--ocru-pal) !important;     color: var(--ocru) !important;     border-color: #f0dcb8; }
.status-finalizat { background: var(--padure-pal) !important;   color: var(--padure) !important;   border-color: #bfe0cd; }

/* --------------------------------------------------------------------------
   10. Paginare
   -------------------------------------------------------------------------- */
.pagination { gap: 4px; }
.pagination .page-link {
  font-family: var(--font-data);
  font-size: 12.5px;
  border: 1px solid var(--rigla);
  border-radius: var(--radius-sm);
  color: var(--ardezie);
  background: var(--foaie);
  min-width: 32px;
  text-align: center;
}
.pagination .page-link:hover { background: var(--masa); color: var(--grafit); border-color: var(--border-secondary); }
.pagination .page-item.active .page-link {
  background: var(--grafit);
  border-color: var(--grafit);
  color: #fff;
}
.pagination .page-item.disabled .page-link { opacity: .4; }

/* --------------------------------------------------------------------------
   11. Ferestre modale
   -------------------------------------------------------------------------- */
.modal { background: rgba(20, 22, 26, .55); backdrop-filter: blur(2px); }

.modal-content {
  background: var(--foaie);
  border: 1px solid var(--rigla);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px -20px rgba(20, 22, 26, .45);
  overflow: hidden;
}

.modal-header {
  background: var(--grafit) !important;
  border-bottom: none;
  padding: 16px 20px;
}
.modal-header h3 {
  font-family: var(--font-ui);
  font-size: 17px !important;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff !important;
  margin-top: 0 !important;
}
.modal-close, .close-modal { opacity: .7; transition: var(--transition); }
.modal-close:hover, .close-modal:hover { opacity: 1; }

.modal-body { padding: 20px; }
.modal-footer {
  border-top: 1px solid var(--rigla);
  padding: 14px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   12. Cautare si sectiuni auxiliare
   -------------------------------------------------------------------------- */
.search-section .search-input, #fise-search, #users-search {
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
}

.mobile-menu-btn {
  background: var(--grafit);
  color: #fff;
  border-radius: var(--radius);
  border: none;
}

/* --------------------------------------------------------------------------
   13. Ecrane mici
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .main-content { padding: 16px 14px 32px; }
  .card-header, .content-header { padding: 14px 16px 12px; }
  .content-header h1 { font-size: 17px; }
  .card-body, .content-body { padding: 14px 16px 16px; }
}

/* --------------------------------------------------------------------------
   14. Fisa de lucru — masa de trasat propriu-zisa
   Regulile de aici au nevoie de specificitate mai mare, pentru ca tabul isi
   injecteaza propriul <style> cu selectori pe #worksheet-tab.
   -------------------------------------------------------------------------- */
#worksheet-config {
  background: var(--foaie);
  border: 1px solid var(--rigla);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px 22px;
}

body #worksheet-tab h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--grafit);
  margin: 0 0 14px !important;
  padding-bottom: 12px;
  position: relative;
}
body #worksheet-tab h1::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 8px;
  background-image:
    repeating-linear-gradient(90deg, var(--rigla) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, #aeb6c0 0 1px, transparent 1px 40px);
  background-size: 100% 4px, 100% 8px;
  background-repeat: no-repeat;
  border-top: 1px solid var(--rigla);
  padding-top: 8px;
}

body #worksheet-tab .action-buttons { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body #worksheet-tab .action-buttons .btn { margin: 0; }

/* O singura actiune principala pe ecran: fisa se genereaza, piesele se adauga */
body #worksheet-tab #addPlate {
  background: var(--foaie);
  border-color: var(--border-secondary);
  color: var(--grafit);
}
body #worksheet-tab #addPlate:hover { background: var(--masa); border-color: var(--ardezie); }
body #worksheet-tab #btn-generate { background: var(--grafit); border-color: var(--grafit); color: #fff; }
body #worksheet-tab #btn-generate:hover { background: var(--grafit-2); border-color: var(--grafit-2); }

#worksheet-config label[for="dedeman-switch"] span { color: var(--albastru) !important; font-weight: 600 !important; }

body #worksheet-tab #platesTable { border: 1px solid var(--rigla); border-radius: var(--radius); }
body #worksheet-tab #platesTable th {
  background: #f4f6f8;
  color: var(--ardezie);
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  border-bottom: 1px solid var(--rigla);
  padding: 11px 8px;
}
body #worksheet-tab #platesTable td {
  border: none;
  border-bottom: 1px solid #edf0f3;
  border-right: 1px solid #f2f4f6;
  padding: 10px 8px;
  font-size: 13.5px;
}
body #worksheet-tab #platesTable td:last-child { border-right: none; }
body #worksheet-tab #platesTable tbody tr:hover td { background: #fafbfc; }
body #worksheet-tab #platesTable input,
body #worksheet-tab #platesTable select {
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13.5px;
  margin: 0;
}
body #worksheet-tab #platesTable input[type=number] { font-family: var(--font-data); text-align: center; }

/* --------------------------------------------------------------------------
   15. Modalul Finisaje — panourile de lucru
   -------------------------------------------------------------------------- */
.control-panel { border: 1px solid var(--rigla); border-radius: var(--radius-md); background: var(--foaie); }
.panel-header { border-bottom: 1px solid var(--rigla); }
.panel-header h4 { font-size: 14px; font-weight: 600; color: var(--grafit); }
.panel-subtitle {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardezie);
}

.edge-btn-vertical, .cutout-btn-vertical {
  border: 1px solid var(--rigla);
  border-radius: var(--radius);
  background: var(--foaie);
  color: var(--grafit);
  transition: var(--transition);
}
.edge-btn-vertical:hover, .cutout-btn-vertical:hover { border-color: var(--ardezie); background: #fafbfc; }
.edge-btn-vertical.active, .cutout-btn-vertical.active {
  background: var(--grafit) !important;
  border-color: var(--grafit) !important;
  color: #fff !important;
}
.edge-btn-vertical .btn-text, .cutout-btn-vertical .btn-text { font-weight: 500; }

/* Actiunile din randul de piesa: iconite, la fel ca in tabele */
body #worksheet-tab #platesTable td .btn {
  background: transparent;
  border-color: transparent;
  padding: 6px;
  width: 30px;
  height: 30px;
  justify-content: center;
  color: var(--ardezie);
}
body #worksheet-tab #platesTable td .btn-danger { color: #c2666a; }
body #worksheet-tab #platesTable td .btn-info,
body #worksheet-tab #platesTable td .btn-secondary { color: var(--albastru); }
body #worksheet-tab #platesTable td .btn-success { color: var(--padure); }
body #worksheet-tab #platesTable td .btn:hover { background: var(--masa); }
body #worksheet-tab #platesTable td .btn-danger:hover { background: var(--tytan); color: #fff; }
body #worksheet-tab #platesTable td .btn-success:hover { background: var(--padure); color: #fff; }
body #worksheet-tab #platesTable td .btn-info:hover,
body #worksheet-tab #platesTable td .btn-secondary:hover { background: var(--albastru); color: #fff; }

/* --------------------------------------------------------------------------
   16. Ferestre modale — detalii de continut
   Multe modale au markup vechi: <label>Text<br><input></label>, <hr>, butoane
   .action-button. Le aducem la aceleasi reguli fara sa atingem markup-ul.
   -------------------------------------------------------------------------- */
.modal-content > hr { display: none; }

.modal .div-modal { margin: 20px !important; }

.modal .div-modal > label,
.modal form > label,
.modal .form-group > label {
  display: block;
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ardezie);
  margin-bottom: 16px;
}

.modal label input,
.modal label select,
.modal label textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grafit);
}

.modal input:not([type="checkbox"]):not([type="radio"]),
.modal select,
.modal textarea {
  background: var(--foaie);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius);
  padding: 8px 11px;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--grafit);
  box-shadow: 0 0 0 3px rgba(20, 22, 26, .08);
}

.modal .btn-primary,
.modal .action-button,
.modal-footer .action-button {
  background: var(--grafit) !important;
  border: 1px solid var(--grafit) !important;
  color: #fff !important;
  font-family: var(--font-ui);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 9px 16px;
}
.modal .btn-primary:hover,
.modal .action-button:hover,
.modal-footer .action-button:hover {
  background: var(--grafit-2) !important;
  border-color: var(--grafit-2) !important;
}

.modal .btn-secondary {
  background: var(--foaie) !important;
  border: 1px solid var(--border-secondary) !important;
  color: var(--grafit) !important;
}
.modal .btn-secondary:hover { background: var(--masa) !important; border-color: var(--ardezie) !important; }

/* Antetul, corpul si subsolul isi poarta singure spatierea; cutia modalului nu
   mai adauga padding, altfel antetul iese in afara marginilor. */
.modal .modal-content { padding: 0 !important; }
.modal .modal-content > form { padding: 0; }

/* --------------------------------------------------------------------------
   17. Modalul FINISAJE — cel mai folosit ecran din aplicatie
   -------------------------------------------------------------------------- */
.modal-header-new {
  background: var(--grafit) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 15px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header-new h3 {
  font-family: var(--font-data) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: #fff !important;
  text-shadow: none !important;
  margin: 0 !important;
}
.modal-header-new .close {
  position: static !important;
  color: rgba(255,255,255,.75);
  font-size: 22px;
  line-height: 1;
  transition: color .14s ease;
}
.modal-header-new .close:hover { color: #fff; }

/* Comutatorul de mod: complete / partiale / dublate — incap toate trei */
.control-panel .btn-primary,
.control-panel .btn-secondary { flex: 1 1 auto; min-width: 0; white-space: normal; }
#fullEdgeModeBtn, #partialEdgeModeBtn, #doubleEdgeModeBtn {
  font-family: var(--font-ui);
  font-size: 12.5px !important;
  font-weight: 600;
  padding: 8px 6px !important;
  border-radius: var(--radius);
  line-height: 1.2;
}
#fullEdgeModeBtn.btn-primary, #partialEdgeModeBtn.btn-primary, #doubleEdgeModeBtn.btn-primary {
  background: var(--grafit) !important;
  border: 1px solid var(--grafit) !important;
  color: #fff !important;
}
#fullEdgeModeBtn.btn-secondary, #partialEdgeModeBtn.btn-secondary, #doubleEdgeModeBtn.btn-secondary {
  background: var(--foaie) !important;
  border: 1px solid var(--border-secondary) !important;
  color: var(--ardezie) !important;
}
#fullEdgeModeBtn.btn-secondary:hover, #partialEdgeModeBtn.btn-secondary:hover, #doubleEdgeModeBtn.btn-secondary:hover {
  border-color: var(--ardezie) !important;
  color: var(--grafit) !important;
}

.edge-panel-wide, .cutout-panel-wide { box-shadow: none !important; border: 1px solid var(--rigla); }
.left-controls, .left-center-controls { background: var(--masa) !important; border-right: 1px solid var(--rigla) !important; }

/* Salvarea e actiunea principala a modalului: cerneala, nu verde */
#saveFinisaje, #edgeModal .btn-success {
  background: var(--grafit) !important;
  border: 1px solid var(--grafit) !important;
  color: #fff !important;
}
#saveFinisaje:hover, #edgeModal .btn-success:hover {
  background: var(--grafit-2) !important;
  border-color: var(--grafit-2) !important;
}

/* Butonul de salvare al modalului Finisaje */
#saveEdges, .save-btn-new {
  background: var(--grafit) !important;
  border: 1px solid var(--grafit) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
#saveEdges:hover, .save-btn-new:hover {
  background: var(--grafit-2) !important;
  border-color: var(--grafit-2) !important;
}

/* --------------------------------------------------------------------------
   18. Sub-taburile din Setari — file de dosar, nu butoane
   -------------------------------------------------------------------------- */
#settings-subtabs {
  gap: 0 !important;
  border-bottom: 1px solid var(--rigla);
  margin-bottom: 18px !important;
  flex-wrap: wrap;
}
#settings-subtabs .btn {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--ardezie) !important;
  font-family: var(--font-ui);
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 9px 14px !important;
  margin-bottom: -1px;
}
#settings-subtabs .btn:hover { color: var(--grafit) !important; background: rgba(20,22,26,.04) !important; }
#settings-subtabs .btn.btn-secondary {
  color: var(--grafit) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--tytan) !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   19. Clienti — modulul are propriul CSS cu selectori pe #clients-tab
   -------------------------------------------------------------------------- */
#clients-tab .btn-warning,
#clients-tab .btn-danger {
  background-color: transparent;
  border: 1px solid transparent;
  padding: 6px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
#clients-tab .btn-warning { color: var(--ardezie); }
#clients-tab .btn-danger { color: #c2666a; }
#clients-tab .btn-warning:hover { background-color: var(--masa); color: var(--grafit); }
#clients-tab .btn-danger:hover { background-color: var(--tytan); color: #fff; }

#clients-tab .users-table tr:hover { background-color: #f7f9fa; }
#clients-table td:nth-child(2),
#clients-tab .users-table td:nth-child(2) {
  font-family: var(--font-data);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   20. Logistica — stocuri si miscari
   -------------------------------------------------------------------------- */
/* Cantitatile stau in coloana, monospatiate si aliniate la dreapta */
#stocuri-table td:nth-child(2),
#stocuri-table th:nth-child(2) { font-family: var(--font-data); text-align: right; }
#stocuri-table td:nth-child(2) { font-size: 12.5px; }

#miscari-stocuri-table td:nth-child(3),
#miscari-stocuri-table td:nth-child(4),
#miscari-stocuri-table td:nth-child(5),
#miscari-stocuri-table td:nth-child(7) { font-family: var(--font-data); font-size: 12.5px; }

/* Filtrele: etichete mici, un singur buton principal */
#miscari-stocuri-tab label {
  font-family: var(--font-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardezie);
}
#todayFilter.btn-info {
  background: var(--foaie);
  border: 1px solid var(--border-secondary);
  color: var(--grafit);
}
#todayFilter.btn-info:hover { background: var(--masa); border-color: var(--ardezie); }

/* --------------------------------------------------------------------------
   21. Telefon si tableta — butonul de meniu face parte din bara, nu o acopera
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .mobile-menu-btn {
    background-color: transparent !important;
    color: var(--grafit) !important;
    border: 1px solid var(--rigla) !important;
    box-shadow: none !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    top: .625rem !important;
    left: .75rem !important;
    border-radius: var(--radius) !important;
  }
  .mobile-menu-btn:active { background-color: var(--masa) !important; }

  /* Facem loc siglei ca sa nu stea sub buton */
  .top-nav { padding-left: 3.5rem !important; }

  /* Tabelele raman lizibile: derulare orizontala cu marginile fisei intacte */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th, .table td { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   22. Meniul de profil din bara de sus
   -------------------------------------------------------------------------- */
.profile-menu {
  border: 1px solid var(--rigla);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--foaie);
  overflow: hidden;
  padding: 0;
}
.profile-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rigla);
  background: var(--bg-tertiary);
}
.profile-details h3 { font-size: 14px; font-weight: 600; margin: 0; }
.profile-details p {
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ardezie);
  margin: 2px 0 0;
}
.profile-menu-items { padding: 6px; }
.profile-menu-item {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 13.5px;
  color: var(--grafit);
  background: transparent;
  border: none;
  cursor: pointer;
}
.profile-menu-item svg { color: var(--ardezie); flex: none; }
.profile-menu-item:hover { background: var(--masa); }
.profile-menu-item.logout-btn:hover { background: var(--tytan-pal); color: var(--tytan); }
.profile-menu-item.logout-btn:hover svg { color: var(--tytan); }

/* Reimprospatarea listei nu e actiunea principala a ecranului */
#btn-refresh-fise, #btn-refresh-factory-fise {
  background: var(--foaie);
  border-color: var(--border-secondary);
  color: var(--grafit);
}
#btn-refresh-fise:hover, #btn-refresh-factory-fise:hover {
  background: var(--masa);
  border-color: var(--ardezie);
}

/* --------------------------------------------------------------------------
   23. Notificari — foaie cu o dunga de culoare, nu bloc saturat
   Culorile vin inline din JS, asa ca avem nevoie de !important.
   -------------------------------------------------------------------------- */
.notification {
  background: var(--foaie) !important;
  color: var(--grafit) !important;
  border: 1px solid var(--rigla) !important;
  border-left-width: 3px !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px -12px rgba(20,22,26,.35) !important;
  font-family: var(--font-ui) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
}
.notification-success { border-left-color: var(--padure) !important; }
.notification-error   { border-left-color: var(--tytan) !important; }
.notification-warning { border-left-color: var(--ocru) !important; }
.notification-info    { border-left-color: var(--albastru) !important; }

/* --------------------------------------------------------------------------
   24. Randul de piesa: butonul Finisaje si eticheta de piese multiple
   -------------------------------------------------------------------------- */
body #worksheet-tab #platesTable td .btnEdges {
  background: var(--foaie);
  border: 1px solid var(--border-secondary);
  color: var(--grafit);
  width: auto;
  height: auto;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
}
body #worksheet-tab #platesTable td .btnEdges:hover {
  background: var(--masa);
  border-color: var(--ardezie);
  color: var(--grafit);
}

/* Eticheta "Piese multiple" isi ia culorile inline din JS */
.multiple-pieces-summary {
  background: var(--albastru-pal) !important;
  border: 1px solid #c6dcea !important;
  border-radius: var(--radius-sm) !important;
  color: var(--albastru) !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   25. Antetul modalelor: aceeasi latime ca restul ferestrei
   scripts/worksheet/html.php injecteaza o regula globala `.modal-header` cu
   `margin: -20px -20px 0`, care compensa padding-ul de 20px de pe .modal-content.
   Cum padding-ul e acum 0, marginile negative faceau antetul mai lat decat corpul.
   Regulile de aici au specificitate mai mare, ca sa bata <style>-ul injectat.
   -------------------------------------------------------------------------- */
.modal .modal-header,
.modal .modal-header-new,
.modal-content > .modal-header,
.modal-content > .modal-header-new {
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  width: 100%;
}

/* --------------------------------------------------------------------------
   26. Istoricul modificarilor unei fise (doar administratori)
   Butonul din coloana Utilizator + fereastra care arata ce s-a schimbat.
   -------------------------------------------------------------------------- */

/* Semnul din lista de fise ------------------------------------------------ */
.fisa-modificat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.3;
  color: var(--ocru);
}

button.fisa-modificat {
  border: 1px solid var(--rigla);
  background: var(--ocru-pal);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

button.fisa-modificat:hover {
  border-color: var(--ocru);
  background: #fbe9cb;
}

/* Rosu = i s-a schimbat continutul dupa salvare. Crem = doar a mers pe flux
   (trimisa la fabrica, in lucru, finalizata). */
.fisa-modificat--editata {
  color: var(--tytan);
  background: var(--tytan-pal);
  border-color: #f0b8b8;
  font-weight: 600;
}

button.fisa-modificat--editata:hover {
  border-color: var(--tytan);
  background: #fbdcdc;
}

.fisa-modificat svg { flex: none; }

.fisa-modificat-nr {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--ardezie);
}

/* Fereastra --------------------------------------------------------------- */
/* `.modal-content` din styles.css impune max-width 500px; urcam specificitatea
   ca sa incapa doua coloane de valori, la fel ca la antetul modalelor. */
.modal .istoric-modal-content,
.modal-content.istoric-modal-content {
  max-width: 780px !important;
  width: 92vw !important;
  max-height: 88vh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal .istoric-modal-content .modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 16px 18px;
}

.istoric-rezumat {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
  padding: 10px 14px;
  border: 1px solid var(--border-primary);
  border-left: 3px solid var(--grafit);
  background: var(--bg-tertiary);
  margin-bottom: 16px;
}

.istoric-rezumat strong { color: var(--text-primary); }

/* O intrare din istoric --------------------------------------------------- */
.istoric-intrare {
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  margin-bottom: 12px;
}

.istoric-intrare-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
}

.istoric-tip {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--grafit);
  color: var(--text-inverse);
}

.istoric-tip[data-tip="editare"]    { background: var(--ocru); }
.istoric-tip[data-tip="stergere"]   { background: var(--tytan); }
.istoric-tip[data-tip="recuperare"] { background: var(--padure); }
.istoric-tip[data-tip="fabrica"]    { background: var(--albastru); }

.istoric-cine {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.istoric-rol {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-muted);
}

.istoric-cand {
  margin-left: auto;
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Lista de schimbari ------------------------------------------------------ */
.istoric-lista { padding: 6px 12px 10px; }

.istoric-sectiune {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 4px;
}

.istoric-sectiune:first-child { margin-top: 4px; }

.istoric-rand {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(0, 1.4fr) 14px minmax(0, 1.4fr);
  gap: 6px;
  align-items: baseline;
  padding: 3px 0;
  border-bottom: 1px dotted var(--rigla);
}

.istoric-rand:last-child { border-bottom: none; }

.istoric-camp {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
}

.istoric-vechi,
.istoric-nou {
  font-family: var(--font-data);
  font-size: 12px;
  word-break: break-word;
}

.istoric-vechi { color: var(--tytan); text-decoration: line-through; text-decoration-thickness: 1px; }
.istoric-nou   { color: var(--padure); font-weight: 600; }

.istoric-sageata {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

/* Piesele ----------------------------------------------------------------- */
.istoric-piesa {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--rigla);
  background: var(--bg-tertiary);
}

.istoric-piesa[data-stare="adaugata"] { border-left-color: var(--padure); background: var(--padure-pal); }
.istoric-piesa[data-stare="stearsa"]  { border-left-color: var(--tytan);  background: var(--tytan-pal); }
.istoric-piesa[data-stare="modificata"] { border-left-color: var(--ocru); background: var(--ocru-pal); }

.istoric-piesa-titlu {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.istoric-piesa-stare {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-right: 6px;
}

.istoric-piesa[data-stare="adaugata"] .istoric-piesa-stare   { color: var(--padure); }
.istoric-piesa[data-stare="stearsa"] .istoric-piesa-stare    { color: var(--tytan); }
.istoric-piesa[data-stare="modificata"] .istoric-piesa-stare { color: var(--ocru); }

.istoric-rezumat-piesa {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 2px 8px;
  font-size: 12px;
}

.istoric-rezumat-piesa dt { font-family: var(--font-ui); color: var(--text-secondary); }
.istoric-rezumat-piesa dd { font-family: var(--font-data); margin: 0; color: var(--text-primary); }

/* Stari speciale ---------------------------------------------------------- */
.istoric-gol {
  padding: 28px 16px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
}

.istoric-eroare {
  padding: 16px;
  border: 1px solid var(--tytan);
  background: var(--tytan-pal);
  color: var(--tytan);
  font-family: var(--font-ui);
  font-size: 13px;
}

@media (max-width: 640px) {
  .istoric-rand {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .istoric-sageata { display: none; }
  .istoric-vechi::before { content: 'din: '; color: var(--text-muted); text-decoration: none; }
  .istoric-nou::before   { content: 'în: ';  color: var(--text-muted); font-weight: 400; }
  .istoric-cand { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   27. Traseul fisei: cand a plecat la fabrica, cand a fost finalizata
   -------------------------------------------------------------------------- */
.istoric-stari:empty { display: none; }

.istoric-stari-titlu {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px;
}

ol.istoric-traseu {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--rigla);
}

li.istoric-pas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  padding: 5px 0;
}

li.istoric-pas + li.istoric-pas { border-top: 1px dotted var(--rigla); }

li.istoric-pas::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--foaie);
  border: 2px solid var(--ardezie);
}

li.istoric-pas:last-child::before {
  background: var(--padure);
  border-color: var(--padure);
}

.istoric-pas-stare {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.istoric-pas-cine {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
}

.istoric-pas-cine em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
}

.istoric-pas-cand {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  li.istoric-pas {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .istoric-pas-cand { white-space: normal; }
}