/**
 * Termal AI Portal - Main Stylesheet
 * ===================================
 * Entry point per tutti gli stili CSS del progetto.
 * Importa i file nell'ordine corretto per gestire la cascade.
 *
 * Ordine di importazione:
 * 1. Variables (CSS custom properties / design tokens)
 * 2. Base (reset, stili base HTML, utilities)
 * 3. Components (buttons, forms, cards, chat, etc.)
 * 4. Layouts (admin, auth, kiosk, etc.)
 */

/* =========================================
 * 1. DESIGN TOKENS / VARIABLES
 * ========================================= */
@import url('variables.css');

/* =========================================
 * 2. BASE STYLES
 * ========================================= */
@import url('base.css');

/* =========================================
 * 3. COMPONENTS
 * ========================================= */
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/cards.css');
@import url('components/tables.css');
@import url('components/alerts.css');
@import url('components/modals.css');
@import url('components/badges.css');
@import url('components/avatars.css');
@import url('components/category-tree.css');

/* =========================================
 * 4. LAYOUTS
 * ========================================= */
@import url('layouts/admin.css');
@import url('layouts/auth.css');
@import url('layouts/chat.css');
@import url('layouts/kiosk.css');
@import url('layouts/home.css');
@import url('layouts/manage.css');

/* =========================================
 * 5. OVERRIDES BOOTSTRAP (se necessario)
 * Customizzazioni specifiche per Bootstrap
 * ========================================= */

/* Focus states personalizzati per Bootstrap */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: var(--focus-ring);
}

/* Form floating labels con colori Termal */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--color-gray-500);
}

/* =========================================
 * 6. RESPONSIVE FONT SIZING
 * ========================================= */

/* Mobile (default) */
html {
  font-size: 14px;
}

/* Tablet e Desktop */
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* =========================================
 * 7. LAYOUT GLOBALE
 * ========================================= */

html {
  position: relative;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Main content area */
main {
  flex: 1 0 auto;
}

/* Footer sticky in basso */
footer {
  flex-shrink: 0;
}

/* =========================================
 * 8. DARK MODE DEFAULT
 * L'app Termal AI usa tema scuro di default
 * ========================================= */

body {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}

/* Light mode override se richiesto */
body.light-mode,
[data-theme="light"] body {
  background-color: var(--color-white);
  color: var(--color-gray-900);
}

/* =========================================
 * 9. LOADER / SPLASH SCREEN
 * Per il caricamento iniziale
 * ========================================= */

.splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-black);
  z-index: 9999;
}

.splash-screen.fade-out {
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

/* =========================================
 * 10. PRINT STYLES
 * ========================================= */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /* Non mostrare link interni e javascript */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid var(--color-gray-400);
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  /* Nascondi elementi non necessari in stampa */
  nav,
  aside,
  .no-print,
  .sidebar,
  .header-nav {
    display: none !important;
  }
}