/* ========== styles.css (refactor 2: tokens + focus accessible + menys duplicació) ==========
   Objectiu: mantenir selectors i look, però:
   - menys #fff repetit (tokens)
   - focus visible (teclat) sense “outlines lletjos”
   - sidebar més homogènia i amb menys regles duplicades
========================================================================================== */

/* ========== Design tokens (bàsics) ========== */
:root{
  /* Colors */
  --fg: #ffffff;     /* text “fort” (abans #fff repetit) */

  --text: rgba(241,245,249,0.92);
  --text-muted: rgba(241,245,249,0.65);
  --heading: rgba(241,245,249,0.98);

  /* Glass backgrounds */
  --bg-glass-10: rgba(0, 0, 0, 0.10);
  --bg-glass-20: rgba(0, 0, 0, 0.20);
  --bg-glass-30: rgba(0, 0, 0, 0.30);
  --bg-glass-40: rgba(0, 0, 0, 0.40);
  --bg-glass-50: rgba(0, 0, 0, 0.50);

  /* Borders */
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-mid: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-focus: rgba(255, 255, 255, 0.40);

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Blur */
  --blur-md: blur(6px);
  --blur-lg: blur(10px);


  /* Shadows (més visibles en fons glass/gradient) */
  --shadow-xs: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-sm: 0 20px 40px rgba(0,0,0,0.55);


  /* Motion */
  --t-fast: 150ms ease;
  --t-med: 300ms ease;

  /* Focus ring (accessible) */
  --focus-ring: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;

  --bg-hover: var(--bg-glass-20);
  --bg-active: rgba(0, 0, 0, 0.30);  

  /* Bridge tokens -> Bootstrap */
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-muted);
  --bs-emphasis-color: var(--heading);

  --bs-body-bg: transparent;
  --bs-border-color: var(--border-soft);
  --bs-border-color-translucent: var(--border-soft);

  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: rgba(255,255,255,0.03);
  --bs-table-hover-color: var(--fg);
  --bs-table-hover-bg: rgba(255,255,255,0.04);

  --bs-accordion-color: var(--text);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--border-soft);
  --bs-accordion-btn-color: var(--fg);
  --bs-accordion-btn-bg: var(--bg-glass-40);
  --bs-accordion-active-color: var(--fg);
  --bs-accordion-active-bg: var(--bg-glass-50);  
}

/* Global typography rules (per a tota l’app) */
body{
  color: var(--text);
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  color: var(--heading);
}

.text-muted,
.small.text-muted{
  color: var(--text-muted) !important;
}

/* ========== Base ========== */
.nav-link{ cursor: pointer; }

a{
  color: inherit;
  text-decoration: none;
}
a:hover{
  text-decoration: none;
}

.link{
  text-decoration: underline;
  opacity: 0.9;
}
.link:hover{
  opacity: 1;
}

body{
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text);

  background-image: url('../img/background5.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;

  min-height: 100vh;

  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-muted{
  color: var(--text-muted);
}

/* Focus accessible global (només quan és focus de teclat) */
:where(a, button, input, select, textarea, .nav-link, .btn, .btn-outline-primary):focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Quan el context és fosc */
.dark-surface{
  --text: rgba(241,245,249,0.92);
  --text-muted: rgba(241,245,249,0.65);
  --heading: rgba(241,245,249,0.98);
}

/* ========== Layout principal ==========
   Nota: aquí tens un “hack” controlat per contrarestar Bootstrap mt-4.
   Funciona i el deixem, però ara queda documentat.
====================================== */
.container-fluid.mt-4{
  margin-top: 0 !important;
  padding: 0 !important;
}

.container-fluid{
  margin-top: 2rem !important;
}

/* ========== Barra de pestanyes (sticky top) ========== */
#dashboardTabs{
  position: sticky;
  top: 0;
  z-index: 1020;

  background-color: var(--bg-glass-30);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);

  padding: 0 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.nav-tabs{
  display: flex;
  align-items: center;
  height: 3.75rem;

  background-color: transparent;
  border-bottom: 1px solid var(--border-mid);
  padding: 0 1rem;
}

.nav-tabs .nav-link{
  color: var(--fg);
  background-color: transparent;
  font-weight: 500;
  margin-right: 0.5rem;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;

  transition: background-color var(--t-med), color var(--t-med);
}

/* No matem el focus: el gestionem amb :focus-visible global */
.nav-tabs .nav-link:hover{
  background-color: var(--bg-glass-30);
  color: var(--fg);
  border: none !important;
}

.nav-tabs .nav-link:focus{
  /* Evitem l’outline default de Bootstrap, però el focus bo el dona :focus-visible */
  outline: none;
  box-shadow: none;
}

.nav-tabs .nav-link.active{
  background-color: var(--bg-glass-30) !important;
  color: var(--fg) !important;
  font-weight: 600 !important;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  border: none !important;
}

/* ========== Sidebar ========== */
.sidebar{
  border-right: none !important;
}

/* Base unificada per qualsevol “cosa clicable” dins sidebar
   (això substitueix la duplicació anterior mantenint selectors compatibles) */
.sidebar a,
.sidebar button,
.sidebar .sidebar-item,
.sidebar .btn,
.sidebar .btn-primary{
  display: block;
  width: 100%;

  background-color: transparent;
  color: var(--fg);

  border: 1px solid transparent;
  border-radius: var(--radius-md);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;

  text-decoration: none;
  text-align: left;
  cursor: pointer;

  box-shadow: none;

  transition: background-color var(--t-med), color var(--t-med);
}

/* Si vols que els botons “semblin botó” (com abans) */
.sidebar button,
.sidebar .btn,
.sidebar .btn-primary{
  background-color: var(--bg-glass-30) !important;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar .sidebar-item:hover,
.sidebar .btn:hover{
  background-color: var(--bg-hover);
}

.sidebar .active,
.sidebar .sidebar-item.active{
  background-color: var(--bg-active);
}

/* ========== Contingut Principal ========== */
#main-content{
  background-color: transparent;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: none;
  min-height: calc(100vh - 110px);

  transition: background-color var(--t-med);
}

/* ========== Cards (compatibles amb Bootstrap) ==========
   Mantinc el teu comportament “safe” (sense all: unset).
   Nota: si algun dia vols evitar “padding doble”, el canvi ideal és
   moure el padding a .card-body (patró Bootstrap). De moment no ho toco
   per no arriscar canvis visuals.
======================================================== */
.card{
  background-color: transparent;
  color: var(--text);

  border: none;
  box-shadow: none;

  /* mantenim el teu padding original */
  padding: 1rem;
}

.card-body{
  background-color: var(--bg-glass-20);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  box-shadow: var(--shadow-xs);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========== Form Controls ==========
   Mantinc el selector original select/.form-select perquè l'app no canviï.
==================================== */
select,
.form-select{
  background-color: var(--bg-glass-30) !important;
  color: var(--fg) !important;

  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);

  padding: 0.375rem 2.25rem 0.375rem 0.75rem;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg fill='white' height='10' viewBox='0 0 24 24' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

option{
  background-color: rgba(30, 30, 30, 0.95);
  color: var(--fg) !important;
}

/* Focus: no fem outline:none “a pèl” sense alternativa.
   El focus bo el dona :focus-visible global */
select:focus,
input:focus,
textarea:focus{
  outline: none;
  border-color: var(--border-focus);
  background-color: var(--bg-glass-40);
  box-shadow: none;
}

/* ========== Estats ==========
============================== */
select:disabled,
input:disabled,
textarea:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========== Responsivitat ========== */
@media (max-width: 768px){
  .sidebar{
    margin-bottom: 1rem;
    min-height: auto;
  }
  #main-content{
    padding: 1rem;
  }
}

/* ========== Altres (mantinc tal qual) ========== */
.info-legend{
  background: var(--bg-glass-20);
  padding: 8px 12px;
  color: var(--fg);
  font-size: 0.85rem;
  border-radius: var(--radius-md);
  line-height: 1.4;
}

.info-legend i{
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.9;
  border-radius: 3px;
}

/* ========== Botons tipus “radio” amb .btn-check + .btn-outline-primary ==========
   Mantinc look i selectors, i hereta focus de :focus-visible global.
======================================= */
.btn-check:checked + .btn-outline-primary{
  display: block;
  width: 100%;

  background-color: var(--bg-glass-50) !important;
  color: var(--fg);

  border: 1px solid transparent;
  border-radius: var(--radius-md);

  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;

  text-align: left;
  cursor: pointer;
  font-weight: 600;

  box-shadow: none;
  text-decoration: none;

  transition: background-color var(--t-med), color var(--t-med);
}

.btn-outline-primary{
  display: block;
  width: 100%;

  background-color: var(--bg-glass-20);
  color: var(--fg);

  border: 1px solid transparent;
  border-radius: var(--radius-md);

  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;

  text-align: left;
  cursor: pointer;

  box-shadow: none;
  text-decoration: none;

  transition: background-color var(--t-med), color var(--t-med);
}

.btn-outline-primary:hover{
  background-color: var(--bg-glass-30);
  color: var(--fg) !important;
}

/* ========== Destacats ==========
============================== */
.tr-destacat{
  border: 2px solid gold;
  font-weight: bold;
}

.selected-grup{
  border: 2px solid gold !important;
}

/* ========== Charts ==========
============================== */
.chart-container{
  position: relative;
  width: 100%;
  min-height: 320px;
  margin: 1rem 0;
  padding: 1rem;

  background-color: var(--bg-glass-30);
  border-radius: var(--radius-md);

  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);

  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}

.chart-container canvas{
  width: 100% !important;
  height: 100% !important;
  max-height: 400px;
  display: block;
}

canvas#chartEscons{
  background-color: transparent;
  opacity: 1;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ========== Accordion (global glass) ========== */
.glass-card{
  background-color: var(--bg-glass-30);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);

  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);

  box-shadow: var(--shadow-sm);
  line-height: 1.4;
}

.glass-card--modal{ padding: 1rem 1rem 0.75rem; }
.glass-card--compact{
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow-xs);
}


/* ========== Accordion com a card (global) ========== */
.accordion-item{
  /* el mateix look que .glass-card */
  background-color: var(--bg-glass-30);
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);

  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);

  box-shadow: var(--shadow-sm);
  overflow: hidden;

  margin-bottom: .75rem;
}

/* header */
.accordion-button{
  background: transparent !important;
  color: var(--fg) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* body */
.accordion-body{
  background: transparent;
  color: var(--text);
}

/* chevron */
.accordion-button::after{
  filter: invert(1) brightness(1.2) !important;
  opacity: .95;
}

.accordion-collapse.show{
  overflow: visible;
}