/* ==========================================================================
   Design tokens (re-name gestionale — redesign 2026)
   ========================================================================== */
:root{
  --indigo-deep:#14153a;
  --indigo:#2d2e83;
  --green:#3aaa35;
  --green-deep:#2b8527;
  --lime:#c6f24e;
  --paper:#f4f3fb;
  --paper-2:#e9e7f6;
  --ink:#171735;
  --display:'Figtree',sans-serif;
  --mono:'Space Mono',monospace;
}

/* ==========================================================================
   Base / typography
   ========================================================================== */
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  letter-spacing:-.01em;
}

label{
  font-weight:600;
  font-size:.85rem;
  color:var(--ink);
  opacity:.85;
}

::placeholder{ color:rgba(23,23,53,.4); opacity:1; }

.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }

div.listino_cliente{ border-right:2px solid var(--indigo); }

i.fa.success{ color:var(--green-deep); font-size:1.5em; }
i.fa.primary{ color:var(--indigo); font-size:1.5em; }
i.fa.danger{ color:#c0392b; font-size:1.5em; }
i.fa.warning{ color:#c98a1c; font-size:1.5em; }
i.fa.occupato{ color:var(--indigo); font-size:1.5em; }

/* ==========================================================================
   Top navigation
   ========================================================================== */
.main-header{
  background:#fff;
  border-bottom:1px solid var(--paper-2);
  position:sticky;
  top:0;
  z-index:1030;
  height:72px;
  box-shadow:none;
  padding:0;
}

.main-header-inner{
  max-width:1400px;
  margin-inline:auto;
  padding-inline:2rem;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.main-header-left{
  display:flex;
  align-items:center;
  gap:2.75rem;
  min-width:0;
}

.main-header-brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.main-header-logo{
  height:38px;
  width:auto;
  display:block;
}

.main-header-nav{
  display:flex;
  gap:.2rem;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.main-header-nav .nav-item{
  display:flex;
}

.main-header-nav .nav-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem .9rem;
  border-radius:9px;
  font-weight:600;
  font-size:.92rem;
  color:var(--ink);
  opacity:.62;
  text-decoration:none;
  transition:.15s;
  white-space:nowrap;
}

.main-header-nav .nav-link:hover{
  opacity:1;
  color:var(--indigo);
  text-decoration:none;
}

.main-header-nav .nav-item.active .nav-link{
  background:var(--paper);
  color:var(--indigo);
  opacity:1;
}

.main-header-nav .nav-link i{
  font-size:15px;
  width:17px;
  text-align:center;
}

.main-header-logout{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--ink);
  opacity:.65;
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}

.main-header-logout:hover{
  opacity:1;
  color:var(--indigo);
  text-decoration:none;
}

/* ==========================================================================
   Page shell
   ========================================================================== */
.page-main{
  max-width:1400px;
  margin-inline:auto;
  padding:2.5rem 2rem 4.5rem;
}

.page-title{
  font-family:var(--display);
  font-weight:800;
  font-size:1.9rem;
  letter-spacing:-.01em;
  margin:0 0 2rem;
  color:var(--ink);
}

/* ==========================================================================
   Card panel (table wrapper)
   ========================================================================== */
.panel-card{
  background:#fff;
  border:1px solid var(--paper-2);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:2rem;
}

.panel-card-header{
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--paper-2);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}

.panel-card-header.has-left{
  justify-content:space-between;
}

.panel-card-header .panel-card-header-title{
  font-family:var(--display);
  font-weight:700;
  font-size:1.02rem;
  margin:0;
}

/* ==========================================================================
   Tables
   ========================================================================== */
table.table{
  border-collapse:collapse;
  width:100%;
  margin:0;
  background:transparent;
}

.panel-card table.table thead th{
  text-align:left;
  padding:.9rem 1.4rem;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.55;
  border-bottom:1px solid var(--paper-2);
  border-top:0;
  font-weight:700;
  background:transparent;
  white-space:nowrap;
}

.panel-card table.table thead th.text-center{ text-align:center; }

.panel-card table.table tbody td{
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--paper-2);
  border-top:0;
  vertical-align:middle;
  font-size:.92rem;
  background:transparent;
}

.panel-card table.table.table-striped tbody tr:nth-of-type(odd){
  background:transparent;
}

.panel-card table.table tbody tr:hover{
  background:var(--paper);
}

.panel-card table.table tbody tr:last-child td{
  border-bottom:0;
}

.icon-check{
  color:var(--green-deep);
  font-size:1.05rem;
}

/* ==========================================================================
   Icon buttons (row actions)
   ========================================================================== */
.icon-btn{
  background:transparent;
  border:0;
  cursor:pointer;
  opacity:.55;
  padding:.35rem .4rem;
  color:var(--ink);
  border-radius:6px;
  transition:.15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.icon-btn:hover{
  opacity:1;
  color:var(--indigo);
  background:var(--paper);
}

.icon-btn i{ font-size:15px; }

.panel-card table.table tbody td:has(.icon-btn){
  white-space:nowrap;
}

.icon-btn.icon-btn-warn{ opacity:.85; color:#c0392b; }
.icon-btn.icon-btn-warn:hover{ opacity:1; color:#c0392b; background:#fdecea; }

.icon-btn.icon-btn-ok{ opacity:.7; color:var(--green-deep); }
.icon-btn.icon-btn-ok:hover{ opacity:1; color:var(--green-deep); background:rgba(58,170,53,.12); }

/* ==========================================================================
   Role badges
   ========================================================================== */
.badge-pill-role{
  display:inline-block;
  padding:.3rem .8rem;
  border-radius:100px;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
}

.badge-pill-role.role-admin{ background:rgba(45,46,131,.12); color:var(--indigo); }
.badge-pill-role.role-operator{ background:rgba(58,170,53,.14); color:var(--green-deep); }
.badge-pill-role.role-client{ background:var(--paper-2); color:var(--ink); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  border-radius:9px;
  font-family:inherit;
  font-weight:700;
  box-shadow:none !important;
  transition:.15s;
}

.btn-primary{
  background:var(--indigo);
  border-color:var(--indigo);
  color:#fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active{
  background:var(--green-deep) !important;
  border-color:var(--green-deep) !important;
  color:#fff;
}

.btn-outline-secondary,
.btn-secondary{
  background:#fff;
  border-color:var(--paper-2);
  color:var(--ink);
}

.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active{
  background:var(--paper) !important;
  color:var(--indigo) !important;
  border-color:var(--paper-2) !important;
}

.btn-outline-danger{
  border-color:var(--paper-2);
  color:#c0392b;
}

.btn-outline-danger:hover{
  background:#fdecea;
  border-color:#fdecea;
  color:#c0392b;
}

.panel-card-header .btn,
.filter-bar .btn{
  padding:.55rem 1.2rem;
  font-size:.88rem;
  white-space:nowrap;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-control,
select.form-control,
textarea.form-control{
  font-family:inherit;
  font-size:.95rem;
  padding:.75rem .95rem;
  border:1.5px solid var(--paper-2);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
  height:auto;
}

.form-control:focus{
  outline:none;
  border-color:var(--green);
  background:#fff;
  box-shadow:none;
  color:var(--ink);
}

.input-group .form-control{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}

.input-group-append .btn{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border:1.5px solid var(--paper-2);
  border-left:0;
  background:var(--paper);
}

input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--indigo);
}

.alert{
  border-radius:9px;
  border:0;
  padding:.7rem .9rem;
  font-size:.85rem;
}

.alert-danger{ background:#fdecea; color:#c0392b; }
.alert-success{ background:rgba(58,170,53,.12); color:var(--green-deep); }
.alert-info{ background:rgba(45,46,131,.08); color:var(--indigo); }

/* ==========================================================================
   Filter bar
   ========================================================================== */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:flex-end;
  margin-bottom:1.4rem;
}

.filter-bar .filter-field{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}

.filter-bar .filter-field label{
  font-size:.72rem;
  font-weight:700;
  opacity:.55;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0;
}

.filter-bar .filter-field .form-control{
  min-width:0;
  width:150px;
  padding:.55rem .75rem;
  font-size:.88rem;
  background:#fff;
}

.filter-bar-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}

.filter-bar-actions .dt-buttons{
  margin:0;
}

.agenda-flag{
  color:var(--indigo) !important;
  font-size:7px !important;
  opacity:.6 !important;
  vertical-align:middle;
}

/* ==========================================================================
   Dashboard
   ========================================================================== */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.25rem;
  margin-bottom:2rem;
}

@media (max-width:1100px){
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.kpi-card{
  background:#fff;
  border:1px solid var(--paper-2);
  border-radius:14px;
  padding:1.5rem;
}

.kpi-label{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.55;
  display:block;
}

.kpi-value{
  font-family:var(--display);
  font-weight:800;
  font-size:2.3rem;
  margin-top:.4rem;
}

.kpi-value.indigo{ color:var(--indigo); }
.kpi-value.green{ color:var(--green-deep); }

.dashboard-columns{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:1.5rem;
}

@media (max-width:1100px){
  .dashboard-columns{ grid-template-columns:1fr; }
}

.dashboard-panel{
  background:#fff;
  border:1px solid var(--paper-2);
  border-radius:14px;
  padding:1.6rem 1.8rem;
}

.dashboard-panel h2{
  font-family:var(--display);
  font-weight:700;
  font-size:1.15rem;
  margin:0 0 1.1rem;
}

.agenda-row{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.8rem 0;
  border-top:1px solid var(--paper-2);
}

.agenda-row:first-child{ border-top:0; padding-top:0; }

.agenda-row .data{
  font-family:var(--mono);
  font-size:.82rem;
  opacity:.6;
  min-width:9rem;
}

.agenda-row .contatto{ font-weight:600; flex:1; }
.agenda-row .azione{ font-size:.85rem; opacity:.7; }

.campagna-row{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.75rem 0;
  border-top:1px solid var(--paper-2);
}

.campagna-row:first-child{ border-top:0; padding-top:0; }

.campagna-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}

.campagna-row .nome{ font-weight:600; font-size:.92rem; }
.campagna-row .cliente{ font-size:.8rem; opacity:.6; }

.empty-state{
  opacity:.55;
  font-size:.88rem;
  padding:.4rem 0;
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-content{
  border-radius:14px;
  border:1px solid var(--paper-2);
  box-shadow:0 10px 40px rgba(20,21,58,.14);
}

.modal-header{
  border-bottom:1px solid var(--paper-2);
}

.modal-footer{
  border-top:1px solid var(--paper-2);
}

/* ==========================================================================
   DataTables overrides (bs4 build loaded from CDN after this stylesheet,
   so these need to win the cascade regardless of load order)
   ========================================================================== */
.dt-buttons{
  margin:1rem 0 0 1.4rem;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

.dt-button,
.dt-buttons .btn,
.dt-buttons .btn-secondary{
  flex:0 0 auto !important;
  background:#fff !important;
  border:1.5px solid var(--paper-2) !important;
  color:var(--ink) !important;
  border-radius:9px !important;
  padding:.55rem 1rem !important;
  font-family:inherit !important;
  font-weight:600 !important;
  font-size:.85rem !important;
  box-shadow:none !important;
}

.dt-button:hover,
.dt-buttons .btn:hover,
.dt-buttons .btn-secondary:hover{
  background:var(--paper) !important;
  border-color:var(--paper-2) !important;
  color:var(--indigo) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  padding:1rem 1.4rem 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  font-family:inherit !important;
  border:1.5px solid var(--paper-2) !important;
  border-radius:9px !important;
  padding:.4rem .6rem !important;
}

.dataTables_wrapper .dataTables_info{
  font-size:.85rem !important;
  opacity:.6;
  padding:1rem 1.4rem !important;
  color:var(--ink) !important;
}

.dataTables_wrapper .dataTables_paginate{
  padding:.7rem 1.1rem 1.5rem !important;
}

.dataTables_wrapper .dataTables_paginate .page-item,
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
}

.dataTables_wrapper .dataTables_paginate .page-link{
  border-radius:8px !important;
  border:1px solid var(--paper-2) !important;
  color:var(--ink) !important;
  min-width:34px;
  height:34px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 .5rem !important;
  margin:0 .2rem !important;
  font-size:.85rem !important;
  font-weight:600 !important;
  background:#fff !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--indigo) !important;
  color:#fff !important;
  border-color:var(--indigo) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
  opacity:.4 !important;
}

.dataTables_wrapper .row{
  margin:0;
}

.dataTables_processing{
  font-family:inherit !important;
  color:var(--ink) !important;
}