/* ======================================================
   🌊 GEST – Base Styles (Deep Sea Edition)
   ======================================================
   Definisce:
   - Import variabili globali
   - Reset universale
   - Tipografia e colori di testo
   - Utilities riutilizzabili
   ====================================================== */

/* Importa variabili globali */
@import url('../../global/css/variables.css');

/* ======================================================
   🎨 PALETTE Deep Sea (fallback)
   ====================================================== */
:root {
  --color-header-footer: #1B263B;
  --color-sidebar: #778DA9;
  --color-sidebar-hover: #415A77;
  --color-text-light: #E0E1DD;
  --color-main-bg: #F8F9FA;     /* Sfondo principale (Bootstrap-like) */
  --color-main-text: #0D1B2A;
}

/* ======================================================
   🧱 RESET GENERALE
   ====================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  scroll-behavior: smooth;
  font-family: var(--font-main, 'Nunito Sans', sans-serif);
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-main-text);
  background-color: var(--color-main-bg);
  line-height: 1.6;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* ======================================================
   ✍️ TIPOGRAFIA
   ====================================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-header-footer);
  margin-bottom: 0.8rem;
}

p {
  margin-bottom: 1rem;
  color: var(--color-main-text);
}

a {
  text-decoration: none;
  color: var(--color-sidebar-hover);
  transition: var(--transition, all 0.3s ease);
}

a:hover {
  color: var(--color-header-footer);
}

/* ======================================================
   🧾 FORM ELEMENTS
   ====================================================== */
input, select, textarea {
  font-family: inherit;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #DEE2E6);
  padding: 0.5rem 0.75rem;
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-main-text);
  transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-sidebar-hover);
  outline: none;
  box-shadow: 0 0 0 2px rgba(27, 38, 59, 0.25);
}

/* ======================================================
   🔘 BUTTONS
   ====================================================== */
button {
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-md, 10px);
  transition: var(--transition);
  cursor: pointer;
  padding: 0.5rem 1rem;
}

.btn-primary {
  background-color: var(--color-header-footer);
  color: var(--color-text-light);
}

.btn-primary:hover {
  background-color: var(--color-sidebar-hover);
  color: var(--color-white, #FFFFFF);
}

/* ======================================================
   ⚙️ UTILITIES
   ====================================================== */
.text-center { text-align: center; }
.text-muted { color: var(--color-muted, #6C757D); }
.text-light { color: var(--color-text-light); }
.text-primary { color: var(--color-header-footer); }
.text-dark { color: var(--color-main-text); }

.bg-primary { background-color: var(--color-header-footer); color: var(--color-text-light); }
.bg-secondary { background-color: var(--color-sidebar); color: var(--color-text-light); }
.bg-light { background-color: var(--color-main-bg); color: var(--color-main-text); }
.bg-dark { background-color: var(--color-header-footer); color: var(--color-text-light); }

.rounded-sm { border-radius: var(--radius-sm, 6px); }
.rounded-md { border-radius: var(--radius-md, 10px); }
.rounded-lg { border-radius: var(--radius-lg, 16px); }

.shadow-soft { box-shadow: var(--shadow-soft, 0 2px 6px rgba(0, 0, 0, 0.05)); }
.shadow-strong { box-shadow: var(--shadow-strong, 0 4px 12px rgba(0, 0, 0, 0.1)); }

.transition { transition: var(--transition); }

/* ======================================================
   🧭 SCROLLBAR PERSONALIZZATA
   ====================================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-sidebar-hover);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-sidebar);
}

table img.icon,
table td img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.modal-title img[class^="icon-"] {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(0.4);
  margin-right: 6px;
}