/* ═══════════════════════════════════════════════════════════════════════════
   AutoCo – Salesians de Sarrià · Departament d'Informàtica
   ═══════════════════════════════════════════════════════════════════════════ */

/* Colors de marca: definits per BrandingService via App.razor <style> tag */

/* ── Utilitats d'ocultació responsiva ────────────────────────────────────── */
/* Complementen MudBlazor per a casos que no cobreix inline */
@media (max-width: 599px) {
    .d-none.d-sm-block { display: none !important; }
    .d-none.d-sm-flex  { display: none !important; }
}
@media (min-width: 600px) {
    .d-none.d-sm-block { display: block !important; }
    .d-none.d-sm-flex  { display: flex  !important; }
}

/* ── MudRating: zona tàctil mínima de 44px en mòbil ─────────────────────── */
@media (max-width: 599px) {
    .mud-rating-item button {
        min-width:  44px !important;
        min-height: 44px !important;
    }
}

/* ── Scroll suau global ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Drag & Drop — assignació d'alumnes a grups ─────────────────────────── */
.dnd-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px;
    min-height: 120px;
    background: rgba(255,255,255,.6);
    transition: border-color .15s, background .15s;
}
.dnd-zone--over {
    border-color: #16a34a;
    border-style: solid;
    background: rgba(22,163,74,.08);
}
.dnd-zone--source {
    border-color: #94a3b8;
    border-style: dashed;
}
.dnd-members {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 32px;
}
.dnd-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 2px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: grab;
    user-select: none;
    font-size: .82rem;
    transition: opacity .15s, box-shadow .15s;
}
.dnd-chip:hover {
    background: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.dnd-chip--unassigned {
    background: #fff7ed;
    border-color: #fed7aa;
}
.dnd-chip--dragging {
    opacity: .35;
    cursor: grabbing;
}
.dnd-handle {
    color: #94a3b8;
    flex-shrink: 0;
}
.dnd-empty-hint {
    color: #94a3b8;
    font-size: .78rem;
    text-align: center;
    padding: 8px 0;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
}
/* Durant un drag, tots els fills de les zones perden pointer-events
   perquè els events dragover/drop arribin directament a la zona pare */
.is-dragging .dnd-zone * {
    pointer-events: none !important;
}

/* ── Targetes compactes: truncament correcte en flex layout ─────────────── */
/* mud-card-header-content té flex:1 però no min-width:0 → el fill no s'encongeix */
.activity-card--compact .mud-card-header-content {
    min-width: 0;
    overflow: hidden;
}
.activity-card--compact {
    overflow: hidden;
}

/* ── Barra de progrés enganxada (avaluació alumne) ──────────────────────── */
.progress-sticky {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 10px 0 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Fons de pantalla ────────────────────────────────────────────────────── */
html, body {
    background-image: var(--brand-bg-image);
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* Layout transparent; contingut principal blanc i que ompli tota l'alçada disponible */
.mud-layout {
    background: transparent !important;
    height: 100vh;       /* altura fixa = viewport */
    overflow: hidden;    /* evita scroll del body */
    display: flex;
    flex-direction: column;
}
.mud-main-content {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex: 1;
    min-height: 0;       /* permet que el flex child s'encongeixi */
    overflow-y: auto;    /* scroll intern → position:sticky funciona */
    padding-bottom: 56px !important;
}

/* ── Mode fosc ───────────────────────────────────────────────────────────── */
.app-dark .mud-main-content {
    background: rgba(2, 6, 23, 0.88) !important;
}
.app-dark .progress-sticky {
    background: rgba(2, 6, 23, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.app-dark .dnd-zone {
    background: rgba(30, 41, 59, 0.6);
    border-color: #334155;
}
.app-dark .dnd-chip {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
.app-dark .dnd-chip:hover {
    background: #334155;
}
.app-dark .dnd-chip--unassigned {
    background: #2d1f0d;
    border-color: #92400e;
}

/* ── Targetes d'activitat: efecte hover i tancades ───────────────────────── */
.activity-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14) !important;
}
.app-dark .activity-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
.activity-card--closed {
    background: #fecaca !important;
    border: 1px solid #f87171 !important;
}
.app-dark .activity-card--closed {
    background: #450a0a !important;
    border: 1px solid #7f1d1d !important;
}

/* ── Taula resultats: color per rang de nota ─────────────────────────────── */
.grade-high { color: #16a34a; font-weight: 700 }   /* ≥ 8   verd    */
.grade-mid  { color: #ca8a04; font-weight: 600 }   /* 5–7.9 taronja */
.grade-low  { color: #dc2626; font-weight: 700 }   /* < 5   vermell */
.grade-none { color: #94a3b8 }                     /* sense dades   */

/* ── Impressió / Exportació PDF ─────────────────────────────────────────── */
@media print {
    /* Oculta elements de navegació */
    .mud-appbar, .mud-main-content > .mud-container > .mud-stack:first-child,
    .mud-button, .mud-icon-button, .mud-chip, footer, .mud-snackbar-location {
        display: none !important;
    }
    /* Allibera el layout fixat perquè la impressió pugui paginar */
    .mud-layout { height: auto !important; overflow: visible !important; }
    .mud-main-content { overflow: visible !important; height: auto !important; }
    /* Fons blanc, text negre */
    body, html, .mud-main-content, .mud-layout {
        background: white !important;
        background-image: none !important;
        backdrop-filter: none !important;
    }
    .mud-main-content {
        padding: 0 !important;
        background: white !important;
    }
    /* Evita que les taules es tallin entre pàgines */
    table, .mud-table, .mud-data-grid {
        page-break-inside: auto;
    }
    tr { page-break-inside: avoid; }
    /* Expansió de tots els panels */
    .mud-collapse-container { display: block !important; height: auto !important; }
}

/* ── Informe PDF per alumne ──────────────────────────────────────────────── */
.informe-alumne {
    max-width: 860px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-size: .88rem;
    color: var(--brand-nav);
}
.informe-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--brand-nav);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}
.informe-logo-area  { flex-shrink: 0; }
.informe-titol-area { flex: 1 }
.informe-titol      { font-size: 1.1rem; font-weight: 700 }
.informe-subtitol   { font-size: .8rem; opacity: .65; margin-top: 2px }
.informe-data-area  { text-align: right; font-size: .8rem; opacity: .7 }

.informe-section {
    border: 1px solid #e2e8f0;
    border-top: none;
    padding: 1rem 1.5rem;
    background: white;
}
.informe-section:last-of-type { border-radius: 0 0 10px 10px }
.informe-section-title {
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    margin-bottom: .6rem;
}

.informe-dades { width: 100%; border-collapse: collapse }
.informe-dades td { padding: .2rem .5rem .2rem 0; vertical-align: top }
.informe-dades td.label { color: #64748b; font-size: .8rem; width: 90px }
.informe-dades td.valor { width: 30% }

.informe-globals { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .25rem }
.informe-global-box {
    flex: 1; min-width: 160px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: .75rem 1rem;
    text-align: center;
}
.informe-global-box .global-label { font-size: .75rem; color: #64748b; margin-bottom: .25rem }
.informe-global-box .global-nota  { font-size: 2rem; font-weight: 800; line-height: 1 }
.informe-global-box .global-max   { font-size: .75rem; color: #94a3b8 }
.informe-global-box.global-high { border-color: #16a34a }
.informe-global-box.global-high .global-nota { color: #16a34a }
.informe-global-box.global-mid  { border-color: #ca8a04 }
.informe-global-box.global-mid  .global-nota { color: #ca8a04 }
.informe-global-box.global-low  { border-color: #dc2626 }
.informe-global-box.global-low  .global-nota { color: #dc2626 }

.informe-taula { width: 100%; border-collapse: collapse; font-size: .83rem }
.informe-taula th { background: #f1f5f9; font-weight: 600; padding: .4rem .5rem; text-align: left; border-bottom: 2px solid #e2e8f0 }
.informe-taula td { padding: .35rem .5rem; border-bottom: 1px solid #f1f5f9 }
.informe-taula tr:last-child td { border-bottom: none }
.col-criteri { min-width: 160px }
.col-nota    { text-align: center; width: 80px; font-weight: 600 }
.col-barra   { width: 200px; padding-left: 1rem }

.barra-wrap { position: relative; height: 14px; background: #f1f5f9; border-radius: 7px; overflow: hidden }
.barra { position: absolute; top: 0; left: 0; height: 100%; border-radius: 7px }
.barra.auto { background: var(--brand-primary); z-index: 2 }
.barra.co   { background: var(--brand-nav);     z-index: 1 }

.informe-comentari {
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    padding: .5rem .75rem;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #475569;
}
.informe-nota-prof { border-left-color: var(--brand-primary) }

.informe-peu {
    text-align: center;
    font-size: .72rem;
    color: #94a3b8;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

/* Oculta la secció print-only a la pantalla */
.print-only { display: none !important }

@media print {
    .no-print  { display: none !important }
    .print-only { display: block !important }
    .no-print-shadow { box-shadow: none !important }
    .mud-appbar, .mud-main-content > .mud-container > *:first-child { display: none !important }
    .mud-main-content { padding: 0 !important; background: white !important }
    .informe-alumne, .informe-activitat { max-width: 100% }
    .informe-header { border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .informe-global-box { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .barra { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .informe-group-header { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .distrib-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .informe-page-break { page-break-before: always }
    .grade-high, .grade-mid, .grade-low { -webkit-print-color-adjust: exact; print-color-adjust: exact }
    .mud-paper { box-shadow: none !important; border: 1px solid #e2e8f0 }
    .ig-kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}

/* ── Informe d'activitat ─────────────────────────────────────────────────── */
.informe-activitat {
    max-width: 900px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
    font-size: .88rem;
    color: var(--brand-nav);
}

.informe-group-header {
    font-weight: 700;
    font-size: .82rem;
    color: #475569;
    background: #f1f5f9;
    padding: .3rem .75rem;
    border-radius: 4px;
    margin: .6rem 0 .25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.informe-student-subheader {
    background: #f8fafc;
}

.informe-distrib {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
}

.distrib-badge {
    font-size: .75rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 4px;
    border: 1px solid currentColor;
    opacity: .85;
}

/* ── Scroll horitzontal en taules (mòbil) ───────────────────────────────── */
@media (max-width: 599px) {
    .mud-table-container,
    .mud-data-grid-container {
        overflow-x: auto !important;
    }
    /* MudSimpleTable no té contenidor propi → afegim overflow al pare */
    .mud-simple-table {
        display: block;
        overflow-x: auto;
    }
}

/* ── Informe Global de Direcció (KPIs print) ────────────────────────────── */
.ig-kpis {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.ig-kpi {
    flex: 1; min-width: 90px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: .5rem .75rem;
    text-align: center;
}
.ig-kpi-val { font-size: 1.5rem; font-weight: 800; line-height: 1.1 }
.ig-kpi-lbl { font-size: .72rem; color: #64748b; margin-top: .1rem }
.ig-kpi.grade-high { border-color: #16a34a }
.ig-kpi.grade-high .ig-kpi-val { color: #16a34a }
.ig-kpi.grade-mid  { border-color: #ca8a04 }
.ig-kpi.grade-mid  .ig-kpi-val { color: #ca8a04 }
.ig-kpi.grade-low  { border-color: #dc2626 }
.ig-kpi.grade-low  .ig-kpi-val { color: #dc2626 }