/* Modern overrides and utilities (non-breaking) */

/* 1) Design tokens */
:root {
  /* Palette tuned to velvet green (around #1A584B) */
  --color-primary: #1A584B;   /* deep teal-green */
  --color-secondary: #6c757d;
  --color-success: #2B7A68;   /* lighter velvet green */
  --color-info: #0dcaf0;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-light: #f8f9fa;
  --color-dark: #212529;
  --color-body: #212529;
  --color-muted: #6c757d;

  /* Derived RGB for focus rings/shadows */
  --focus-primary-rgb: 26, 88, 75;  /* from #1A584B */

  --bg-body: #ffffff;
  --bg-soft: #f5f7fb;

  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}

/* 2) Base adjustments */
html { -webkit-text-size-adjust: 100%; }
body {
  color: var(--color-body);
  background: var(--bg-body);
  font-family: var(--font-sans);
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 3) Utilities */
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.text-muted { color: var(--color-muted) !important; }
.bg-soft { background: var(--bg-soft); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Visually hidden but accessible */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* 4) Buttons – consistent focus and subtle polish */
.btn { vertical-align: middle; }
.btn:focus { outline: 2px solid rgba(var(--focus-primary-rgb), .4); outline-offset: 2px; box-shadow: 0 0 0 .25rem rgba(var(--focus-primary-rgb), .25); }

/* 5) Tables – better density and readability */
.table { --table-row-gap: .5rem; }
.table th, .table td { vertical-align: middle; }
.table.table-compact th, .table.table-compact td { padding: .5rem .75rem; }
.table thead th { white-space: nowrap; }

/* Sticky header for long lists when container allows overflow */
.table-sticky thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: inset 0 -1px 0 rgba(0,0,0,.06); }

/* 6) DataTables integration – light overrides */
table.dataTable thead > tr > th.sorting, 
table.dataTable thead > tr > th.sorting_asc, 
table.dataTable thead > tr > th.sorting_desc {
  white-space: nowrap;
}
table.dataTable tbody tr:hover { background-color: rgba(var(--focus-primary-rgb), .06); }

/* 7) Page-specific: Vendite list */
#venditeTable.table { border-radius: var(--radius-sm); overflow: hidden; }
#venditeTable.table td:first-child { white-space: nowrap; }
#venditeTable .btn { padding: .25rem .5rem; line-height: 1.2; }
#venditeTable .btn + .btn { margin-left: .25rem; }

/* 8) Cards/blocks polish */
.block { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.block .app-heading { padding-top: var(--space-3); padding-bottom: var(--space-2); }

/* 9) Responsive tweaks */
@media (max-width: 768px) {
  .app-header .app-header-buttons { gap: var(--space-2); }
  .app-header .app-header-search input { font-size: 16px; } /* prevent iOS zoom */
}

/* 10) Navigation footer metadata */
.app .app-navigation nav.app-navigation-main {
  display: flex;
  flex-direction: column;
  height: auto;
}

/* 10b) Sidebar layout */
.app .app-container .app-sidebar {
  /* Keep sidebar aligned with page/content height; do not cap to viewport. */
  max-height: none;
  overflow-y: visible;
}

/* Fixed sidebar (if enabled on some layouts) still needs its own scroll. */
.app .app-container .app-sidebar.app-navigation-fixed {
  overflow-y: auto;
}

/* Ensure sidebar/content floats are always contained before footer rendering. */
.app .app-container::after {
  content: "";
  display: table;
  clear: both;
}

.app .app-navigation nav.app-navigation-main > ul {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.app .app-navigation .nav-version {
  padding: 0 var(--space-3) var(--space-4);
  margin-top: 30px;
  text-align: center;
  font-size: 1rem;
  color: rgba(197, 209, 205, 0.85);
}

.app .app-navigation .nav-version a {
  color: inherit;
  text-decoration: none;
}

.app .app-navigation .nav-version a:hover,
.app .app-navigation .nav-version a:focus {
  color: #ffffff;
  text-decoration: underline;
}

.app-navigation.app-navigation-style-blue nav.app-navigation-main > ul > li.is-active > a,
.app-navigation.app-navigation-style-blue nav.app-navigation-main ul > li.is-active > a {
  background: rgba(var(--focus-primary-rgb), 0.35);
  color: #ffffff;
}

.app-navigation.app-navigation-style-blue nav.app-navigation-main > ul > li.is-active > a span,
.app-navigation.app-navigation-style-blue nav.app-navigation-main ul > li.is-active > a span {
  color: #ffffff;
}

.app-navigation.app-navigation-style-blue nav.app-navigation-main > ul > li.is-active > a {
  border-left: 3px solid var(--color-primary);
}

/* 11) Header quick actions */
.app-header .btn-quick-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.app-header .btn-quick-action .btn-quick-action__icon {
  font-size: 1.1rem;
  line-height: 1;
}

.app-header .btn-quick-action .btn-quick-action__label {
  line-height: 1;
}

/* 12) Dashboard widgets */
.dashboard-widget--hidden {
  display: none !important;
}

#widgetManagerList .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

#widgetManagerList .list-group-item input[type="checkbox"] {
  min-width: 1.25rem;
  min-height: 1.25rem;
}

.magazzino-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.magazzino-metrics__item {
  flex: 1 1 150px;
  min-width: 150px;
}

.magazzino-metrics__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.magazzino-metrics__value {
  font-size: 1.125rem;
  font-weight: 600;
}

.magazzino-chart-wrapper {
  height: 180px;
  max-height: 180px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

#chartjs_magazzino_margini {
  height: 180px !important;
  max-height: 180px !important;
  width: 100% !important;
}