/*
	Theme Name:	AdStil Application by Atelierul de IT
	Theme URI: 	https://www.atelier-it/themes/adstil
	Version:	11.25
	Author:		Atelierul de IT
*/
:root,
:root.light,
:root .light {
  --phoenix-gutter-x: 0.5rem !important;
  --phoenix-color-green: #006400;
}

.form-control,
.form-select {
  border-color: #777 !important;
}
.input-group-text {
  border-color: #777 !important;
}
form[name="client-form"] .input-group .input-group-text {
  min-width: 25%;
}
.input-group-xs > .form-control {
  padding: 0.175rem 0.875rem;
  font-size: 0.7rem;
  border-radius: 0.175rem;
}

.input-group-xs > .input-group-text {
  padding: 0.175rem 0.875rem;
  border-radius: 0.175rem;
}

.container-sm,
.row,
.gs-5 {
  --phoenix-gutter-x: 0.5rem !important;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  font-size: 0.8rem !important;
}

.text-green {
  color: var(--phoenix-color-green);
}
tr.extended td,
tr.simple td {
  position: relative;
}
input[type="text"].basic {
  position: relative;
  width: 100%;
}
button.basic {
  border: solid 1px #000;
  width: calc(100% - 8px);
  position: relative;
  padding: 2px;
  margin: 0 2px;
}

.spinner-grow-sm {
  --phoenix-spinner-width: 0.8rem;
  --phoenix-spinner-height: 0.8rem;
  background: darkred;
}

.navbar-vertical .navbar-vertical-footer {
  height: 2rem;
}

.form-error {
  font-size: 0.8rem;
  background-color: var(--phoenix-danger-600);
  color: white;
}
.form-error h5 {
  color: white !important;
}
.form-error p:last-child {
  margin: 0;
  padding: 0;
}

.footer {
  height: 2rem;
}
/*
.navbar-vertical-content {
	text-transform: uppercase;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
	position: relative;
	margin: 0;
	border: none;
	padding: 0;
	padding-left: 45px;
	padding-right: 30px;
}

.dropdown-item {
	padding-top: .35rem;
	padding-bottom: .35rem;
	padding-left: 1.75rem;
	margin-left: .75rem;
	margin-right: .75rem;
	border-radius: .5rem;
}

.dropdown-item.active,
.dropdown-item:active {
	color: var(--phoenix-navbar-vertical-link-active-color);
	text-decoration: none;
	background-color: transparent;
	border: none;
	font-weight: var(--phoenix-nav-link-font-weight);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
	background-color: var(--phoenix-navbar-vertical-link-hover-bg);

}
*/

footer.position-fixed {
  background: #efefef;
  z-index: 9999;
}

.table {
  --phoenix-table-border-color: #545755;
}

.table > thead {
  vertical-align: middle;
}

.table-gray {
  --phoenix-table-color: #14532d;
  --phoenix-table-bg: #e8f0e9;
  --phoenix-table-border-color: #cbd5cc;
  --phoenix-table-striped-bg: #20242f;
  --phoenix-table-striped-color: #fff;
  --phoenix-table-active-bg: #2c2f3a;
  --phoenix-table-active-color: #fff;
  --phoenix-table-hover-bg: #262934;
  --phoenix-table-hover-color: #fff;
  color: var(--phoenix-table-color);
  border-color: var(--phoenix-table-border-color);
}

.dataTables_info {
  display: inline-block;
  max-width: 50%;
  font-size: 0.81rem;
  margin-bottom: 15px;
}

.dataTables_paginate {
  display: inline-block;
  width: 50%;
  margin-bottom: 15px;
  font-size: 0.81rem;
}

.dataTables_filter {
  display: inline-block;
  float: right;
}

.equipment-dropdown {
}

.equipment-dropdown a.activator {
  color: #000 !important;
}

.equipment-dropdown a.activator:after {
  content: none;
}

.equipment-dropdown .dropdown-menu {
  padding: 0.35rem;
}

.equipment-dropdown .dropdown-item {
  margin: 0;
  padding: 0.35rem;
}

.card-equipment {
}

.card-equipment .card-header {
  padding: 0.35rem;
}

.card-equipment .card-body {
  padding: 0.35rem;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35rem;
  padding-top: 0.7rem;
  position: relative;
  margin-top: 1rem;
}

fieldset legend {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 700;
  transform: translateY(-50%);
  background: #fff;
  padding: 0.15rem 0.35rem;
  width: auto;
  margin-left: 0.35rem;
}

.modal-xxl {
  max-width: 90%;
}

.equipmentSelector {
  display: flex;
  width: auto;
  margin: 0 auto;
  justify-content: center;
  position: relative;
  top: 30px;
  z-index: +1;
}

.table-responsive {
  clear: both;
  float: none;
}

.table-xs {
  font-size: 0.7rem !important;
}
.table-xs > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.ads-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.85rem;
  margin: 0;
  padding: 0;
}
.ads-menu a:hover {
  font-weight: bold;
  border: solid 1px #000;
  padding: 0.15rem;
  border-radius: 0.25rem;
}

.modal-revision-history .revizii-scroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100%;
}
.modal-revision-history .revizii-scroll table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.modal-revision-history .revizii-scroll th,
.modal-revision-history .revizii-scroll td {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Coloane text: permit wrap */
.modal-revision-history .revizii-scroll th:nth-child(2),
.modal-revision-history .revizii-scroll td:nth-child(2),
.modal-revision-history .revizii-scroll th:nth-child(3),
.modal-revision-history .revizii-scroll td:nth-child(3),
.modal-revision-history .revizii-scroll th:nth-child(6),
.modal-revision-history .revizii-scroll td:nth-child(6) {
  white-space: normal;
}
/* Coloane # si ACTIUNI: nowrap ingust */
.modal-revision-history .revizii-scroll th:nth-child(1),
.modal-revision-history .revizii-scroll td:nth-child(1),
.modal-revision-history .revizii-scroll th:nth-child(9),
.modal-revision-history .revizii-scroll td:nth-child(9) {
  white-space: nowrap;
  width: 3%;
  max-width: 40px;
}
.modal-revision-history .revizii-scroll .tools {
  white-space: nowrap;
  justify-content: center;
}
/* Wrapper DataTables: niciun overflow orizontal */
.modal-revision-history .revizii-scroll .dataTables_wrapper {
  overflow-x: hidden;
  max-width: 100%;
}

.modal-revision-history .modal-dialog {
  max-width: 90%;
  max-height: calc(100vh - 2rem);
  margin: 1rem auto;
}

.modal-revision-history .modal-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2rem);
}

.modal-revision-history .modal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-revision-history .tools {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
}

.eq-toggle {
  cursor: pointer;
  font-size: 1rem;
}

.blink-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e0a800;
  animation: blink-dot 1s infinite;
}

@keyframes blink-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.pending-device-toast {
  position: fixed;
  top: 70px;
  right: 15px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 30px);
}

/* ===== GALERIE IMAGINI PV ===== */
#pv-dropzone {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#pv-dropzone .dz-message {
  display: none;
}
#pv-dropzone:hover {
  background: var(--phoenix-gray-200, #e9ecef);
  transform: scale(1.01);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
#gallery-grid .gallery-item {
  transition:
    transform 0.2s ease,
    opacity 0.3s ease;
}
#gallery-grid .gallery-item:hover {
  transform: scale(1.03);
}
#gallery-grid .gallery-item .card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
#gallery-grid .gallery-item .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#gallery-grid .gallery-item .btn-danger {
  opacity: 0;
  transition: opacity 0.2s ease;
}
#gallery-grid .gallery-item:hover .btn-danger {
  opacity: 1;
}
#gallery-grid .gallery-item.uploading .card {
  opacity: 0.6;
}
#gallery-grid .gallery-item img {
  transition: opacity 0.3s ease;
}
/* Aspect ratio 16/9 + object-fit cover */
#gallery-grid .gallery-item img.card-img-top {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}

/* Dropzone default overrides */
#pv-dropzone.dropzone {
  border: 2px dashed var(--phoenix-color-green) !important;
  background: var(--phoenix-gray-100, #f8f9fa) !important;
  padding: 1rem;
}
#pv-dropzone.dropzone .dz-message,
#pv-dropzone.dropzone .dz-preview {
  display: none;
}
#pv-dropzone.dropzone:hover {
  background: var(--phoenix-gray-200, #e9ecef) !important;
  transform: scale(1.01);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

/* =====================================================================
   HEADER RESTYLE — portare din preview varianta 1 (Phoenix)
   2026-10-06. Scope: DOAR navbar-ul de sus (assets/navbar-top.php).
   Se sterge integral de la acest marker pana la "END HEADER RESTYLE".

   NOTA CRITICA (verificata in browser, nu presupunsa):
   Phoenix re-declara --phoenix-nav-link-padding-x / -color PE SELECTOARE
   CU SPECIFICITATE MAI MARE decat .navbar-top, deci setarea pe .navbar-top
   se pierde silent. De aceea: specificitate ridicata (body .navbar-top) si
   !important doar pe proprietatile care chiar se lupta efectiv.
   Valorile sunt LITERALE, din mockup:
     hover #f2f6f3 | border #e4e7ec | activ #eef5ef | brand #006400 | link #4b5563
   NU folosim --phoenix-gray-*: --phoenix-gray-100 = #eff2f6 si
   --phoenix-gray-300 = #cbd0dd, adica gri ALBASTRU, nu culorile din mockup.
   ===================================================================== */

/* 1. Variabile pe selector cu specificitate ridicata. */
body .navbar-top.navbar-expand-lg {
  --phoenix-navbar-top-height: 3.5rem;
  --phoenix-navbar-padding-y: 0;
  --phoenix-navbar-padding-x: 22px;
  --phoenix-navbar-brand-font-size: 16px;
  --phoenix-navbar-brand-padding-y: 0;
  --phoenix-navbar-brand-margin-end: 16px;
  --phoenix-navbar-brand-color: #006400;
  --phoenix-navbar-brand-hover-color: #006400;
  --phoenix-nav-link-color: #4b5563;
  --phoenix-nav-link-hover-color: #006400;
  --phoenix-nav-link-active-color: #006400;
  --phoenix-nav-link-padding-x: 13px;
  --phoenix-nav-link-padding-y: 8px;
  --phoenix-nav-link-font-weight: 600;
  height: 56px;
  min-height: 56px;
  border-bottom: 1px solid #e4e7ec;
}

/* 2. Brand: 16px/700 verde de marca. */
body .navbar-top .navbar-brand,
body .navbar-top .navbar-brand:hover {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #006400 !important;
  letter-spacing: -0.01em;
  text-decoration: none;
}
body .navbar-top .logo-text {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* 3. Meniu: 12px/600 UPPERCASE, radius 6px, padding 8x13, fara subliniere.
   !important pe culoare si padding pentru ca Phoenix le castiga la
   specificitate. text-transform / font-size sunt deja castigate fara !important. */
body .navbar-top #navbarTopNav .nav-item > .nav-link,
body .navbar-top .navbar-nav-top > .nav-item > .nav-link {
  color: #4b5563 !important;
  padding: 8px 13px !important;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}
body .navbar-top #navbarTopNav .nav-item > .nav-link:hover,
body .navbar-top .navbar-nav-top > .nav-item > .nav-link:hover {
  color: #006400 !important;
  background-color: #f2f6f3 !important;
  text-decoration: none;
}
body .navbar-top #navbarTopNav .nav-item.active > .nav-link,
body .navbar-top .navbar-nav-top > .nav-item.active > .nav-link {
  color: #006400 !important;
  background-color: #eef5ef !important;
}

/* 4. Icon-ele din dreapta: mostenesc uppercase, dar iconele nu trebuie sa
   devina UPPERCASE si nici sa mosteneasca padding-ul de meniu. */
body .navbar-top .navbar-nav-icons .nav-link {
  color: #4b5563 !important;
  padding: 0 4px !important;
  font-size: inherit !important;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0;
}

/* --- Dark mode: NU exista in mockup. Aproximare construita pe aceeasi
   rampa de luminozitate; daca produsul nu-l foloseste, blocul se poate
   sterge integral fara efect asupra light mode. --- */
body .dark .navbar-top.navbar-expand-lg,
.dark body .navbar-top.navbar-expand-lg {
  --phoenix-navbar-brand-color: #7fc99a;
  --phoenix-navbar-brand-hover-color: #7fc99a;
  --phoenix-nav-link-color: #b6bcc6;
  --phoenix-nav-link-hover-color: #7fc99a;
  --phoenix-nav-link-active-color: #7fc99a;
  border-bottom-color: #2c313b;
}
.dark body .navbar-top .navbar-brand,
.dark body .navbar-top .navbar-brand:hover { color: #7fc99a !important; }
.dark body .navbar-top #navbarTopNav .nav-item > .nav-link { color: #b6bcc6 !important; }
.dark body .navbar-top #navbarTopNav .nav-item > .nav-link:hover { color: #7fc99a !important; background-color: #22262e !important; }
.dark body .navbar-top #navbarTopNav .nav-item.active > .nav-link { color: #7fc99a !important; background-color: #1c2620 !important; }
/* END HEADER RESTYLE */

/* =====================================================================
   PASUL 2 — pagina /echipamente/ la mockup (varianta 1)
   2026-10-06. Culorile .table-gray au fost schimbate la linia ~143
   (verde deschis in loc de verde inchis). Aici doar densitate + tipografie.
   Se sterge integral de la acest marker pana la "END PASUL 2".
   ===================================================================== */

/* Antetul tabelului: 10px/800, tracking .06em — densitatea din mockup.
   .table-gray e folosit si de /procese-verbale/, deci regula se aplica
   ambelor pagini, consecvent cu mockup-ul. */
.table.table-gray thead th,
thead.table-gray th,
.table-gray thead th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 12px;
  vertical-align: middle;
}

/* Borduri continue, ca in mockup (Bootstrap folosea border-collapse:
   separate, care cu table-bordered produce borduri duble).
   Selectorul e .dataTable — clasa pe care DataTables o pune automat pe
   orice tabel pe care il initializeaza. Acopera toate cele 7 tabele
   (tableClients, tableEquipments, tableHistoryAssigns, tablePV,
   tableReparatii, tableRevizii, tableTehnicieni), nu doar doua. */
/* Borduri: vin din regulile explicite pe th/td de mai jos, NU din
   border-collapse. Declaratia border-collapse:collapse a fost testata si
   nu se aplica nici inline pe aceste tabele (computed ramane "separate"
   chiar cu stil inline fortat), deci a fost eliminata ca moarta.
   Phoenix suprascrie .table-bordered cu ".table-bordered>:not(caption)>*
   {border-width:1px 0}" si nu mai seteaza border-collapse. */
table.dataTable thead th {
  border: 1px solid #cbd5cc;
}
table.dataTable tbody td {
  border: 1px solid #e4e7ec;
}

/* Hover de rand: verde foarte discret, ca in mockup. */
table.dataTable tbody tr:hover {
  background-color: #f6f9f7;
}

/* Culoarea default a linkurilor din tabel (lactele deschise), ca in mockup. */
table.dataTable tbody td a {
  color: #006400;
}

/* Butoanele de export din bara DataTables: in mockup erau albe cu
   contur, nu bloc plin. Scopate la .dt-buttons ca sa nu atingem
   butoanele de actiune din restul aplicatiei. */
/* Ambele clase apar in fisiere diferite: /echipamente/ si /procese-verbale/
   folosesc btn-phoenix-secondary, iar /clienti/ foloseste btn-secondary. */
.dt-buttons .btn-phoenix-secondary,
.dt-buttons .btn-secondary {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #4b5563;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
}
.dt-buttons .btn-phoenix-secondary:hover,
.dt-buttons .btn-secondary:hover {
  background-color: #f2f6f3;
  border-color: #006400;
  color: #006400;
}
/* END PASUL 2 */

/* =====================================================================
   PASUL 2b — FONT, exact ca in mockup
   Mockupul folosea doar stiva de SISTEM. Productia folosea
   "Nunito Sans" primul (incarcat intentionat din Google Fonts in
   head.php:50), deci textul arata altfel decat in mockup.
   Suprascriem token-urile Phoenix, nu font-family direct, ca sa
   ramana centralizat si sa se reverse dintr-un singur loc.
   NOTA: linkul Google Fonts din head.php ramane — doar nu mai castiga.
   Daca se vrea eliminat si requestul, se scoate <link> din head.php:50.
   Se sterge integral de la acest marker pana la "END PASUL 2b".
   ===================================================================== */
:root,
:root.light,
:root .light,
:root.dark,
.dark {
  --phoenix-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --phoenix-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Phoenix scrie "Nunito Sans" DIRECT (nu prin token) pe aceste
   selectoare, inclusiv .navbar — de aceea tokenii de mai sus nu erau
   suficienti: nav-ul ramanea cu Nunito Sans. Suprascriem lista exacta. */
input,
button,
select,
optgroup,
textarea,
label,
.alert,
.badge,
.blockquote-footer,
.btn,
.page,
.navbar,
.navbar .nav-link,
.pagination,
.valid-feedback,
.invalid-feedback,
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.tooltip,
.popover,
.font-sans-serif,
.font-base,
.divider-content-center,
.choices,
.sortable .menu {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
/* END PASUL 2b */

/* ============================================================
   PASUL 3 — COMUTATOARE BLOCKED / ARCHIVED (coloanele din tabelul
   de echipamente). Inainte erau iconite de lacet (fa-lock /
   fa-box-archive) cu culoare semantica rosie/verde.

   Valorile sunt copiate LITERAL din mockup
   (/tmp/opencode/mockups/adstil-phoenix-preview.html, regulile
   .sw de la linia 93): #dee2e6 pentru pista, --brand/#006400
   pentru starea activa, 30x17px, knob 13px deplasat la 15px.
   Nu am substituit cu token-urile --phoenix-gray-*: acelea sunt
   albastre reci (#eff2f6 / #cbd0dd) si ar schimba culoarea.

   Se sterge integral de la acest marker pana la "END PASUL 3".
   ============================================================ */

/* elementul <a> care tine comutatorul */
.eq-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
}

/* pista comutatorului */
.eq-switch i {
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: #dee2e6;
  position: relative;
  display: inline-block;
  transition: background 0.15s;
  flex: 0 0 auto;
}

/* knob-ul */
.eq-switch i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}

/* starea activa (blocked=1 / archived=1) */
.eq-switch.on i { background: #006400; }
.eq-switch.on i::after { left: 15px; }

/* eticheta DA / NO */
.eq-switch span {
  font-size: 9.5px;
  font-weight: 800;
  color: #6b7280;
  letter-spacing: 0.05em;
}
.eq-switch.on span { color: #006400; }

/* focus vizibil la tastatura — la fel ca restul controanelor din
   mockup (outline 2px brand, offset 2px) */
.eq-switch:focus-visible {
  outline: 2px solid #006400;
  outline-offset: 2px;
  border-radius: 4px;
}

/* END PASUL 3 */

/* ============================================================
   PASUL 4 — MODALE, toate 11 cele din aplicatie.

   Mockupul (/tmp/opencode/mockups/adstil-phoenix-preview.html,
   sectiunea "================= MODALE ==============", liniile
   114-150) deseneaza un sistem propriu: .scrim / .modal / .m-head
   / .m-body / .m-foot, cu latimi canonice 900 / 560 / 1080px.

   Aplicatia foloseste modalele Bootstrap 5, iar Phoenix le
   retematizeaza prin variabile CSS definite pe .modal
   (--phoenix-modal-*, specificitate 0,1,0). Suprascriu variabilele
   din `body .modal` (0,1,1) — fisierul style.css este incarcat
   ultimul in assets/head.php (linia 58), deci castiga la egalitate,
   iar la specificitate mai mare nu depinde de ordine.

   Toate regulile sunt ancorate sub .modal ca sa NU atingem
   formularele de pe pagini (filtrele de la /echipamente/ folosesc
   aceleasi .form-control / .form-select).

   ATENTIE la `background`: pentru controale am folosit
   background-color, nu background. Scurtatura ar stoca si
   background-image, deci ar dispare sageata dropdown-ului de la
   .form-select.

   Se sterge integral de la acest marker pana la "END PASUL 4".
   ============================================================ */

/* --- container: latimi canonice din mockup ---
   .modal       -> 900px (implicit, mockup linia 116)
   .ph-sm       -> 560px (mockup linia 117)
   .ph-lg       -> 1080px (mockup linia 118)
   Implicit anuleaza .modal-lg / .modal-xl / .modal-xxl, deci
   latimea devine consecventa chiar daca clasele Bootstrap raman
   in markup. */
body .modal {
  --phoenix-modal-width: 900px;
  --phoenix-modal-margin: 26px;          /* mockup .scrim padding */
  --phoenix-modal-bg: #fff;
  --phoenix-modal-color: #1f2937;
  --phoenix-modal-padding: 18px 20px;     /* mockup .m-body */
  --phoenix-modal-header-padding: 15px 20px; /* mockup .m-head */
  --phoenix-modal-header-border-color: #e4e7ec;
  --phoenix-modal-header-border-width: 1px;
  --phoenix-modal-footer-bg: #fafbfc;   /* mockup .m-foot */
  --phoenix-modal-footer-border-color: #e4e7ec;
  --phoenix-modal-footer-border-width: 1px;
  --phoenix-modal-footer-gap: 9px;
  --phoenix-modal-border-color: transparent;
  --phoenix-modal-border-width: 0;
  --phoenix-modal-border-radius: 0.5rem;  /* mockup .modal */
  --phoenix-modal-inner-border-radius: 0.5rem;
  --phoenix-modal-box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); /* mockup .modal */
}
body .modal.ph-sm { --phoenix-modal-width: 560px; }
body .modal.ph-lg { --phoenix-modal-width: 1080px; }

/* Phoenix declara --phoenix-modal-width si PE .modal-dialog, pentru ca
   clasele de dimensiune (.modal-lg, .modal-xl, .modal-xxl) stau acolo,
   nu pe .modal. O declaratie locala bate mostenirea, deci variabila de
   mai sus ar fi pierduta. De aceea setam direct max-width pe dialog
   (0,3,1) — batte orice .modal-dialog{max-width:var(...)} fara !important.
   Clasele ph-sm / ph-lg raman pe .modal, in markup. */
body .modal .modal-dialog { max-width: 900px; }
body .modal.ph-sm .modal-dialog { max-width: 560px; }
body .modal.ph-lg .modal-dialog { max-width: 1080px; }

/* --- scrim --- */
body .modal-backdrop {
  background-color: #10141a;
  opacity: 0.5;
}

/* --- container --- */
body .modal .modal-content {
  border-radius: 0.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* --- m-head --- */
body .modal .modal-header {
  gap: 14px;
  /* La 5 modale headerul tine si controalele. flex-wrap + campurile pe
     100% pun titlul (si butonul ×) pe primul rand, iar controalele pe al
     doilea — altfel la 560px titlul si cele 3 selecturi se inghesuie. */
  flex-wrap: wrap;
}
/* Campurile de formular care stau in header (la 5 modale headerul tine
   controalele, nu doar titlul). Primesc flex-grow ca butonul × sa ramana
   la dreapta, iar continutul sa ocupe restul latimii. */
body .modal .modal-header-fields {
  flex: 1 0 100%;
  min-width: 0;
}
/* titlu — mockup .m-head h4 */
body .modal .modal-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #1f2937;
}
/* subtitlu — mockup .m-head .sub */
body .modal .modal-header small,
body .modal .modal-header .text-muted {
  font-size: 11.5px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 400;
}
/* buton de inchidere — mockup .m-head .x */
body .modal .btn-close {
  margin-left: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background-color: #eef0f2;
  background-image: none;
  color: #6b7280;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  opacity: 1;
}
body .modal .btn-close:hover,
body .modal .btn-close:focus {
  background-color: #e2e5e9;
  opacity: 1;
}
body .modal .btn-close:focus-visible {
  outline: 2px solid #006400;
  outline-offset: 2px;
}

/* --- m-body --- */
body .modal .modal-body {
  padding: 18px 20px;
  color: #374151;
}

/* --- m-foot --- */
body .modal .modal-footer {
  padding: 13px 20px;
  gap: 9px;
  justify-content: flex-end;
  background-color: #fafbfc;
  border-top: 1px solid #e4e7ec;
}

/* --- butoane de footer: mockup .btn-o / .btn-p --- */
body .modal .modal-footer .btn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 7px 15px;
  border-radius: 0.25rem;
  box-shadow: none;
}
/* buton secundar -> mockup .btn-o */
body .modal .modal-footer .btn-secondary,
body .modal .modal-footer .btn-outline-secondary {
  background-color: #fff;
  border: 1px solid #ced4da;
  color: #4b5563;
}
/* buton primar -> mockup .btn-p */
body .modal .modal-footer .btn-primary {
  background-color: #006400;
  border: 1px solid #006400;
  color: #fff;
}
body .modal .modal-footer .btn-secondary:hover,
body .modal .modal-footer .btn-outline-secondary:hover {
  background-color: #f3f4f6;
  border-color: #adb5bd;
  color: #374151;
}
body .modal .modal-footer .btn-primary:hover {
  background-color: #005200;
  border-color: #005200;
  color: #fff;
}

/* --- campuri numerice ---
   type="number" aduce sagetile de incrementare, care latent si
   lateste campul. Singurul din modale (revisionsPeriod) a fost mutat
   pe type="text" + inputmode="numeric"; regula ramane ca plasa de
   siguranta pentru orice type="number" care ar reaparea. */
body .modal input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
body .modal input[type="number"]::-webkit-outer-spin-button,
body .modal input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- grila de formular: mockup .grid / .g2 / .g3 / .g4 ---
   Mockupul foloseste o grila CSS pura, cu 2-4 coloane si gap 12px.
   Aplica inlocuieste .row/.col din Bootstrap, care aduce gutter 24px si
   aliniere diferita. Se foloseste in corpul modalelor. */
body .modal .frm {
  display: grid;
  gap: 12px;
}
body .modal .frm-2 { grid-template-columns: 1fr 1fr; }
body .modal .frm-3 { grid-template-columns: 1fr 1fr 1fr; }
body .modal .frm-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  body .modal .frm-2,
  body .modal .frm-3,
  body .modal .frm-4 { grid-template-columns: 1fr; }
}
body .modal .frm-cell { min-width: 0; }
/* rand de comutatoare — mockup .radios */
body .modal .frm-switches {
  display: flex;
  gap: 18px;
  padding-top: 2px;
  flex-wrap: wrap;
}
/* captiune sub camp — mockup: 10.5px / #8a919a / margin-top 4px */
body .modal .frm-cap {
  font-size: 10.5px;
  color: #8a919a;
  margin-top: 4px;
}
/* nota de avertizare la finalul corpului — mockup .note */
body .modal .frm-note {
  margin-top: 16px;
  margin-bottom: 0;
}
body .modal .frm-note > span:first-child {
  flex: 0 0 auto;
  font-weight: 700;
}
/* grup de comutatoare pe un rand, ca in mockup */
body .modal .frm-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* --- separator in headerul modalului ---
   <hr class="frm-sep" /> separa blocurile de informatie din header, de
   exemplu rezumatul echipamentului de asignarea curenta. */
body .modal .frm-sep {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid #e4e7ec;
}

/* --- tab-uri: mockup .tabs ---
   Mockupul (varianta 4, modalul de asignare) are 5 tab-uri:
   Asignare noua | Istoric asignari (N) | Facturi | Revizii | Reparatii.
   Fara .nav-tabs, ca sa nu mostenim comportamentul Bootstrap de arie
   ARIA si de container .tab-content. */
body .modal .frm-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e4e7ec;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
body .modal .frm-tab {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding: 9px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
body .modal .frm-tab:hover { color: #006400; }
body .modal .frm-tab.on {
  color: #006400;
  border-bottom-color: #006400;
}
body .modal .frm-tab:focus-visible {
  outline: 2px solid #006400;
  outline-offset: -2px;
}
/* continutul unui tab — ascuns implicit */
body .modal .frm-pane { display: none; }
body .modal .frm-pane.on { display: block; }

/* --- etichete: mockup .fl --- */
/* .fl = eticheta deasupra controlului, ca in mockup. Folosita in
   headerul modalului de echipament, unde select2-urile nu aveau eticheta. */
body .modal .fl {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body .modal label,
body .modal .form-label,
body .modal .input-group-text {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body .modal .input-group-text {
  background-color: #f3f4f6;
  border-color: #ced4da;
  color: #6b7280;
  border-radius: 0.25rem;
}
body .modal label sup {
  color: #dc3545;
}

/* --- controale: mockup .ctl ---
   Inaltimea campurilor TREBUIE sa fie egala cu a butoanelor din
   .m-foot, adica 29px: 6px padding + 15px linie (12.5px * 1.2) + 6px
   padding + 1px bord de sus si de jos. Butonul masurat are tot 29px
   (7px + 13.2px + 7px + 2px). */
body .modal .form-control,
body .modal .form-select {
  width: 100%;
  height: 29px;
  /* Bootstrap pune min-height pe .form-control-sm; daca nu il anulam,
     min-height poate cativa peste height si campul iese din 29px. */
  min-height: 0;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 6px 11px;
  font-size: 12.5px;
  line-height: 1.2;
  color: #374151;
  background-color: #fff;
}
/* textarea ramane mai inalt — nu poate fi comprimat la 29px */
body .modal textarea.form-control {
  height: auto;
  min-height: 54px;
  line-height: 1.45;
}
body .modal .form-control::placeholder {
  color: #adb5bd;
}
body .modal .form-control:focus,
body .modal .form-select:focus {
  border-color: #006400;
  box-shadow: 0 0 0 2px rgba(0, 100, 0, 0.12);
  color: #374151;
  background-color: #fff;
}
/* camp readonly — mockup .ctl.ro */
body .modal .form-control[readonly],
body .modal .form-control[disabled],
body .modal .form-select:disabled {
  background-color: #f3f4f6;
  color: #6b7280;
}
/* input-group: eticheta si controlul stau PE ACELASI RAND.
   Trebuie sa anulam latimea 100% de mai sus — Bootstrap foloseste
   width:1% + flex:1 1 auto pe control ca sa faca loc pentru eticheta.
   Fara asta, inputul ocupa tot randul si eticheta cade dedesubt. */
body .modal .input-group > .form-control,
body .modal .input-group > .form-select {
  width: 1%;
  flex: 1 1 auto;
  min-width: 0;
  /* height FIX scoate elementul din align-items:stretch, iar eticheta se
     intindea la inaltimea ei naturala (30px, din padding-ul input-group-sm)
     in timp ce controlul ramanea blocat la 29px — diferenta de 1px.
     Cu height:auto + min-height, flexul le egalizeaza singur, iar grupul
     textarea-ului (54px) intinde eticheta la fel. */
  height: auto;
  min-height: 29px;
}
body .modal .input-group > .input-group-text {
  flex: 0 0 auto;
  min-height: 29px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 6px 11px;
  line-height: 1.2;
}
/* input-group: nu mai lipesc colturi */
body .modal .input-group > .form-control,
body .modal .input-group > .form-select,
body .modal .input-group > .input-group-text {
  border-radius: 0.25rem;
}

/* --- eticheta flotanta (.form-floating) --- */
/* Mockupul are eticheta DEASUPRA controlului (.fl, display:block).
   Bootstrap face altceva: eticheta pluteste INSARE, iar controlul isi
   rezerva spatiu deasupra (padding-top 22.5px -> control de 48px).
   Aici transformam eticheta in bloc, deasupra, si luam spatiul rezervat
   din control, ca toate controalele din modal sa aiba aceeasi inaltime.

   Scope-ul e strict .modal: filtrele de pe pagini folosesc si ele
   .form-floating si ar fi deformatate daca s-ar schimba global. */
body .modal .form-floating {
  margin-bottom: 0;
  /* In modal-header.php labelul vine DUPA input in DOM (ordinea clasica
     Bootstrap pentru floating-label). Cu position:static eticheta cade
     sub camp; mockupul o vrea deasupra. column-reverse reordoneaza fara
     sa atingem markupul. */
  display: flex;
  flex-direction: column-reverse;
}
body .modal .form-floating > label {
  position: static;
  transform: none;
  display: block;
  height: auto;
  padding: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 1;
  background: none;
  border: 0;
}
/* Trebuie rescrise si padding-urile, nu doar height. Bootstrap pune
   .form-floating > .form-control:not(:placeholder-shown) { padding-top:22.5px;
   padding-bottom:9.5px } — se potriveste oricum, pentru ca aceste
   input-uri au valoare. Cu box-sizing:border-box, height:29px nu poate
   cobori sub padding+bord, deci browserul folosea 22.5+9.5+2 = 34px.
   Specificitatea noastra (0,3,1) bate pe a lui Bootstrap (0,3,0). */
body .modal .form-floating > .form-control,
body .modal .form-floating > .form-select,
body .modal .form-floating > .select2-container {
  height: 29px;
  min-height: 0;
  padding: 6px 11px;
  line-height: 1.2;
}
body .modal .form-floating > .form-control:focus ~ label,
body .modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
body .modal .form-floating > .form-select:focus ~ label,
body .modal .form-floating > .form-select:not(:placeholder-shown) ~ label {
  opacity: 1;
  color: #6b7280;
}

/* --- comutatoare: mockup .sw --- */
/* Aceleasi valori ca .eq-switch de la PASUL 3. Se aplica atat pe
   .form-switch (Bootstrap), cat si pe .frm-switch (grila noua) — altfel
   comutatoarele din grila cad pe checkbox-ul patrat implicit. */
body .modal .form-switch,
body .modal .frm-switch {
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
body .modal .form-switch .form-check-input,
body .modal .frm-switch .form-check-input {
  width: 30px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 9px;
  background-color: #dee2e6;
  border: 0;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
body .modal .form-switch .form-check-input::after,
body .modal .frm-switch .form-check-input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #fff;
  transition: left 0.15s;
}
body .modal .form-switch .form-check-input:checked,
body .modal .frm-switch .form-check-input:checked {
  background-color: #006400;
}
body .modal .form-switch .form-check-input:checked::after,
body .modal .frm-switch .form-check-input:checked::after {
  left: 15px;
}
body .modal .form-switch .form-check-input:focus-visible,
body .modal .frm-switch .form-check-input:focus-visible {
  outline: 2px solid #006400;
  outline-offset: 2px;
}
body .modal .form-switch .form-check-label,
body .modal .frm-switch .form-check-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- butoane radio: mockup .dot --- */
/* Bootstrap pune float:left + margin-left:-1.5em pe .form-check-input,
   pentru ca eticheta sa aiba padding-left:1.5em pe parinte. Cum noi am
   scos acel padding (vezi .form-check mai jos), offsetul ar impinge
   controlul in afara cutiei modalului — il anulam. */
body .modal .form-check-input[type="checkbox"],
body .modal .form-check-input[type="radio"] {
  float: none;
  margin-left: 0;
  margin-top: 0;
}
body .modal .form-check-input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid #adb5bd;
  border-radius: 50%;
  cursor: pointer;
}
body .modal .form-check-input[type="radio"]:checked {
  border-color: #006400;
  border-width: 4px;
}
body .modal .form-check-input[type="radio"]:focus-visible {
  outline: 2px solid #006400;
  outline-offset: 2px;
}
body .modal .form-check {
  padding-left: 0;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Varianta inline (tipul facturii: chirie / service / cheltuiala) trebuie sa
   stea pe UN SINGUR RAND. Phoenix declara .form-check-inline{display:inline-block},
   dar regula de mai sus are specificitate mai mare (0,2,1 contra 0,1,0) si
   impungea fiecare radio pe rand nou. Aici o readucem la inline, cu aceeasi
   specificitate, dar mai jos in fisier, deci ea castiga. */
body .modal .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 14px;
  margin-bottom: 0;
}
body .modal .form-check-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* --- grupuri / carduri: mockup .grp --- */
body .modal .card {
  border: 1px solid #e4e7ec;
  border-radius: 0.35rem;
  background-color: #fff;
  box-shadow: none;
}
body .modal .card-header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ec;
  padding: 12px 14px;
}
body .modal .card-body {
  padding: 14px;
}
body .modal legend,
body .modal .card-header strong {
  font-size: 10px;
  font-weight: 800;
  color: #006400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- note de avertizare: mockup .note --- */
body .modal .alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background-color: #fff8e6;
  border: 1px solid #f5dfa8;
  border-radius: 0.3rem;
  padding: 9px 12px;
  font-size: 11.5px;
  color: #7a5b00;
}
body .modal .alert-warning {
  background-color: #fff8e6;
  border-color: #f5dfa8;
  color: #7a5b00;
}
body .modal .alert-danger {
  background-color: #fff0f0;
  border-color: #f5c2c2;
  color: #a12a2a;
}

/* --- tabele in modal: mockup .hist --- */
body .modal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: #374151;
}
body .modal table th {
  background-color: #f3f4f6;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 7px 10px;
  border: 1px solid #e4e7ec;
  text-align: left;
  color: #4b5563;
}
body .modal table td {
  padding: 7px 10px;
  border: 1px solid #e4e7ec;
  text-align: center;
}
body .modal table th:first-child,
body .modal table td:first-child {
  text-align: left;
}

/* --- tab-uri: mockup .tabs --- */
body .modal .nav-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #e4e7ec;
  margin-bottom: 14px;
}
body .modal .nav-tabs .nav-link {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding: 9px 15px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
}
body .modal .nav-tabs .nav-link:hover {
  color: #006400;
  border-bottom-color: transparent;
  background: none;
}
body .modal .nav-tabs .nav-link.active {
  color: #006400;
  background: none;
  border-bottom-color: #006400;
}

/* --- stare vida: mockup .empty --- */
body .modal .text-center.text-muted,
body .modal .empty {
  color: #adb5bd;
  font-size: 11.5px;
}

/* --- select2: dropdownul sa arate ca .ctl --- */
/* select2 ascunde <select>-ul original (clasa select2-hidden-accessible,
   care impune padding:0 !important), deci singurul control vizibil e
   .select2-selection--single — acolo se aplica aspectul .ctl.
   Inaltimea trebuie sa fie 29px, la fel ca butoanele. */
body .modal .select2-container--default .select2-selection--single {
  height: 29px;
  min-height: 29px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 6px 11px;
  font-size: 12.5px;
  line-height: 1.2;
  color: #374151;
}
body .modal .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: #374151;
  line-height: 1.2;
}
body .modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #adb5bd;
}
body .modal .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 27px;
}
body .modal .select2-container--default .select2-container--open .select2-selection--single {
  border-color: #006400;
  box-shadow: 0 0 0 2px rgba(0, 100, 0, 0.12);
}
/* panoul dropdown-ului */
body .modal .select2-container--default .select2-dropdown {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
body .modal .select2-container--default .select2-dropdown .select2-search__field {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 6px 11px;
  font-size: 12.5px;
  height: 29px;
}
body .modal .select2-container--default .select2-dropdown .select2-results__option {
  font-size: 12.5px;
  color: #374151;
}
body .modal .select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: #006400;
  color: #fff;
}

/* --- aliniere: mockup .grid gap 12px --- */
/* Bootstrap foloseste --bs-gutter-x 1.5rem (24px) intre coloane si
   margin negativ pe .row, deci grila nu se suprapune peste mockup.
   Aici: gap efectiv 12px, iar marginul negativ se anuleaza ca
   continutul sa inceapa exact la paddingul din .m-body. */
body .modal .row {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
  margin-left: 0;
  margin-right: 0;
}

/* END PASUL 4 */