@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');

/* ── Design tokens ──────────────────────────────────── */
:root {
  --green:        #88ad38;
  --green-dark:   #6a8a2c;
  --green-light:  #edf4dd;
  --green-pale:   #f5f9ec;
  --red-soft:     #fdecea;
  --red:          #c0392b;
  --border:       #dde8c8;
  --radius:       4px;
  --shadow:       0 1px 6px rgba(0,0,0,.09);
  --transition:   .18s ease;
  --text:         #444;
  --text-light:   #777;
}

/* ── Base ───────────────────────────────────────────── */
html, body {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  background: #f2f5ef;
  color: var(--text);
}

/* ── Typography ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 300;
  letter-spacing: .02em;
}
h1 { font-size: 1.1rem; margin: 0; line-height: 1.3; }
h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--green-dark);
  border-bottom: 2px solid var(--green-light);
  padding-bottom: .4rem;
  margin-bottom: 1.2rem;
}

/* ── Sidebar ────────────────────────────────────────── */
#mySidebar {
  background: #fff !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 2px 0 10px rgba(0,0,0,.07);
}

/* logo area — replaces deprecated <center> */
#mySidebar .sidebar-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--green-pale);
}
#mySidebar .sidebar-logo img { width: 55%; }

/* nav items */
#mySidebar .w3-bar-item.w3-button {
  border-left: 3px solid transparent;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #555 !important;
  background: transparent !important;
  transition:
    background-color var(--transition),
    border-left-color var(--transition),
    color var(--transition);
}
#mySidebar .w3-bar-item.w3-button:hover {
  background-color: var(--green-light) !important;
  border-left-color: var(--green) !important;
  color: #2a2a2a !important;
}

/* logout nella topbar */
header a[href="/logout.php"]:hover { opacity: 1 !important; }

/* sidebar nav separators */
.w3-bar-block .w3-bar-item {
  padding: 9px 14px;
  font-weight: 500;
}
nav > hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* ── Top bar & header ───────────────────────────────── */
#myTop { padding: 0 16px; line-height: 48px; }
#myTop h1 {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .93;
  margin: 0;
  display: inline;
}
header.w3-theme-d2 {
  padding: 10px 32px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
header.w3-theme-d2 h1 {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .93;
  margin: 0;
}

/* ── Content wrapper ────────────────────────────────── */
.w3-main { background: #f2f5ef; }
.w3-main > .w3-container { padding: 28px 32px !important; }

/* ── Module card (listing tables) ───────────────────── */
.module {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #e4eccc;
  margin-top: 6px;
  overflow: hidden;
}
.labeladd {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 100;
}
.labeladd .w3-btn {
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: filter var(--transition), box-shadow var(--transition);
}
.labeladd .w3-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* ── Forms ──────────────────────────────────────────── */
.w3-container.w3-margin form,
form.w3-container.w3-margin {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid #e4eccc;
  padding: 24px 28px !important;
  margin: 0 !important;
}

label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* labels inside multiselect — reset uppercase */
ul.jqmultiselect li label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}

input[type=text],
input[type=password],
input[type=file],
textarea {
  transition: border-color var(--transition), box-shadow var(--transition);
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
  outline: none;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(136,173,56,.18);
}

.invioform {
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 8px 22px !important;
  transition: filter var(--transition);
  cursor: pointer;
}
.invioform:hover { filter: brightness(1.1); }

/* ── Select ─────────────────────────────────────────── */
.select-addon { width: 200px !important; }

select {
  display: inline-block;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  color: #444;
  line-height: 1.4;
  padding: 6px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right .7em top 50%;
  background-size: .65em auto;
  transition: border-color var(--transition), box-shadow var(--transition);
}
select::-ms-expand { display: none; }
select:hover { border-color: #999; }
select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(136,173,56,.18);
  color: #222;
  outline: none;
}
select option { font-weight: normal; }

*[dir="rtl"] .select, :root:lang(ar) .select, :root:lang(iw) .select {
  background-position: left .7em top 50%;
  padding: 6px !important;
}
select:disabled, select[aria-disabled=true] {
  color: graytext;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
}
select:disabled:hover, select[aria-disabled=true] { border-color: #aaa; }

/* ── Textarea ────────────────────────────────────────── */
.typetextarea { height: 180px; resize: vertical; }

/* ── AJAX autocomplete ───────────────────────────────── */
ul#country-list > li {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Theme palette ───────────────────────────────────── */
.w3-theme-l5 {color:#000 !important;background-color:#fafcf5 !important}
.w3-theme-l4 {color:#000 !important;background-color:#edf4dd !important}
.w3-theme-l3 {color:#000 !important;background-color:#dbe9bb !important}
.w3-theme-l2 {color:#000 !important;background-color:#c8de99 !important}
.w3-theme-l1 {color:#000 !important;background-color:#b6d377 !important}
.w3-theme-d1 {color:#000 !important;background-color:#98c140 !important}
.w3-theme-d2 {color:#fff !important;background-color:#88ad38 !important}
.w3-theme-d3 {color:#fff !important;background-color:#779731 !important}
.w3-theme-d4 {color:#fff !important;background-color:#66812a !important}
.w3-theme-d5 {color:#fff !important;background-color:#556c23 !important}
.w3-theme-light  {color:#000 !important;background-color:#fafcf5 !important}
.w3-theme-dark   {color:#fff !important;background-color:#556c23 !important}
.w3-theme-action {color:#fff !important;background-color:#556c23 !important}
.w3-theme        {color:#000 !important;background-color:#a4c855 !important}
.w3-text-theme   {color:#a4c855 !important}
.w3-border-theme {border-color:#a4c855 !important}
.w3-hover-theme:hover        {color:#000 !important;background-color:#a4c855 !important}
.w3-hover-text-theme:hover   {color:#a4c855 !important}
.w3-hover-border-theme:hover {border-color:#a4c855 !important}

/* ── Disable all W3.CSS animations ──────────────────── */
.w3-animate-left,.w3-animate-right,.w3-animate-top,
.w3-animate-bottom,.w3-animate-opacity,.w3-animate-zoom,
.w3-spin { animation: none !important; }

/* ── DataTables ─────────────────────────────────────── */
.dataTables_wrapper { padding: 16px; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  display: inline-block;
  margin-bottom: 14px;
}
.dataTables_wrapper .dataTables_length { float: left; }
.dataTables_wrapper .dataTables_filter { float: right; }

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-size: 12px;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.dataTables_wrapper .dataTables_length select {
  width: 72px !important;
  display: inline-block !important;
}
.dataTables_wrapper table.dataTable {
  clear: both;
  margin-top: 10px !important;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #ccc;
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(136,173,56,.18);
  outline: none;
}
table.dataTable thead th {
  background: var(--green-pale) !important;
  border-bottom: 2px solid var(--border) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #555;
  padding: 10px 12px;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after { opacity: .5; }
table.dataTable tbody tr { transition: background-color var(--transition); }
table.dataTable tbody tr:hover > * {
  background-color: var(--green-pale) !important;
}
table.dataTable tbody td { padding: 8px 12px; font-size: 12.5px; }

.dataTables_wrapper .dataTables_paginate {
  margin-top: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block;
  min-width: 32px;
  padding: 5px 10px !important;
  margin: 0 2px !important;
  border-radius: var(--radius) !important;
  border: 1px solid #d4e4a8 !important;
  background: #fff !important;
  color: var(--green-dark) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover {
  background: var(--green-light) !important;
  color: var(--green-dark) !important;
  border-color: var(--green) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .4 !important;
  cursor: default !important;
}
.dataTables_info { font-size: 12px; color: var(--text-light); }

/* ── Main content padding ────────────────────────────── */
.w3-main-content { padding: 28px 32px !important; }

/* ── Footer ─────────────────────────────────────────── */
footer.w3-theme-d2 { padding: 14px 32px !important; }
footer.w3-theme-d2 p { margin: 0; font-size: 11.5px; opacity: .85; }

/* ── Multiselect checkbox ────────────────────────────── */
ul.jqmultiselect {
  width: 400px;
  height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
ul.jqmultiselect li label {
  display: block;
  padding: 3px 3px 3px 26px;
  color: #000;
  outline: none;
  position: relative;
  font-weight: normal;
  font-size: 90%;
}
ul.jqmultiselect li label:hover {
  background-color: var(--green-light);
}
ul.jqmultiselect li label.selected {
  color: #fff;
  background-color: var(--green);
}
ul.jqmultiselect li label .checkbox {
  position: absolute;
  top: 3px;
  left: 3px;
}