/* ========================================
   Tesseract Base CSS Reset
   ======================================== */

/* Box sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset margins */
* {
  margin: 0;
  padding: 0;
}

/* Body defaults */
html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Form elements inherit font */
input, button, textarea, select {
  font: inherit;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Text overflow */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Root stacking context */
#app {
  isolation: isolate;
  min-height: 100%;
}

/* Scrollbar styling (optional) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   Sidebar Layout
   ======================================== */
:root {
  --sidebar-width: 248px;
}

.sidebar {
  width: var(--sidebar-width);
  transform: translateX(-100%); /* Nascosta di default (mobile) */
}

.sidebar.is-open {
  transform: translateX(0) !important; /* Visibile quando aperta */
}

@media (min-width: 768px) {
  .sidebar {
    transform: translateX(0); /* Sempre visibile su desktop */
  }
}

.main-wrapper {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

@media (min-width: 768px) {
  .main-wrapper {
    margin-left: var(--sidebar-width);
  }
}

/* Sidebar backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Mostra backdrop quando sidebar è aperta (solo mobile) */
@media (max-width: 767px) {
  .sidebar.is-open ~ .sidebar-backdrop {
    display: block;
  }
}