/* ================================================================
   DB.CSS — componenti grafici dei moduli di Basi di Dati
   (schemi, tabelle animate, diagrammi E-R, widget interattivi).
   Richiede style.css. Caricato solo dalle pagine del corso BD.
================================================================= */

.page-content {
    --db: #0b7a60;          /* accento del corso Basi di Dati */
    --db-soft: #e6f5f0;
    --db-line: #bfe3d7;
    --db-warn: #b45309;
    --db-bad: #b42318;
}

/* ================================================================
   WIDGET: contenitore generico
================================================================= */
.db-widget {
    margin: 2em 0;
    padding: 1.3em 1.4em 1.5em;
    background: linear-gradient(180deg, #fbfdfc, #f6faf9);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
}

.db-widget-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6em;
    margin-bottom: 1em;
}
.db-widget-title {
    font-family: var(--font-mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--db);
}
.db-widget-sub {
    font-size: .95rem;
    color: var(--muted);
    margin: 0;
}

/* Barra dei comandi */
.db-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em;
    margin-top: 1.2em;
}
.db-btn {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .55em 1.1em;
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    background: var(--db);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .2s ease, transform .15s ease, opacity .2s ease;
}
.db-btn:hover:not(:disabled) { background: #0a6b54; transform: translateY(-1px); }
.db-btn:disabled { opacity: .45; cursor: not-allowed; }
.db-btn-ghost {
    color: var(--muted);
    background: #fff;
    border-color: var(--line-strong);
}
.db-btn-ghost:hover:not(:disabled) { color: var(--db); background: #fff; border-color: var(--db); }

.db-progress {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--muted);
    margin-left: auto;
}

/* Riquadro di spiegazione del passo corrente */
.db-note {
    margin-top: 1.1em;
    padding: .85em 1.1em;
    font-size: .95rem;
    line-height: 1.6;
    color: #1f3d34;
    background: var(--db-soft);
    border: 1px solid var(--db-line);
    border-left: 4px solid var(--db);
    border-radius: 10px;
    min-height: 3.2em;
}
.db-note strong { color: #0a5f4a; }

/* ================================================================
   TABELLE DEI DATI (usate dai widget e negli esempi)
================================================================= */
.db-tables {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1em;
    align-items: flex-start;
}

.db-table {
    flex: 1 1 260px;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.db-table-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    padding: .5em .85em;
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, var(--brand-700), var(--brand-600));
}
.db-table-name .db-count {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: .8;
}
.db-table.is-accent .db-table-name { background: linear-gradient(90deg, #0a5f4a, var(--db)); }

.db-scroll { width: 100%; overflow-x: auto; }

.page-content .db-table table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: .78rem;
    line-height: 1.5;
}
.page-content .db-table th,
.page-content .db-table td {
    padding: 5px 9px;
    text-align: left;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid #eef1f5;
}
.page-content .db-table th {
    color: var(--brand-700);
    background: #f4f8fc;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.page-content .db-table tbody tr { transition: background-color .35s ease, opacity .35s ease; }
.page-content .db-table tbody tr:nth-child(even) { background: transparent; }
.page-content .db-table tbody tr:hover { background: #f8fafc; }

/* Stati delle righe durante l'animazione */
.page-content .db-table tr.row-out {
    background: #fff5f5 !important;
    color: #9a3f3f;
    opacity: .55;
    text-decoration: line-through;
    text-decoration-color: rgba(180, 35, 24, .5);
}
.page-content .db-table tr.row-keep { background: #f0fdf6 !important; }
.page-content .db-table tr.row-new { background: #eef6ff !important; }
.page-content .db-table tr.row-focus {
    background: #fff7e0 !important;
    box-shadow: inset 3px 0 0 var(--amber);
}
.page-content .db-table td.cell-hl {
    color: var(--db);
    font-weight: 600;
    background: rgba(11, 122, 96, .07);
}
.db-null { color: #667085; font-style: italic; }

.db-empty {
    padding: .9em;
    font-family: var(--font-sans);
    font-size: .88rem;
    color: var(--muted);
    text-align: center;
}

/* Gruppi (GROUP BY) */
.db-groups { display: flex; flex-wrap: wrap; gap: .9em; }
.db-group {
    flex: 1 1 220px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.db-group-head {
    padding: .45em .8em;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 600;
    color: #fff;
}
.db-g0 .db-group-head { background: #0b7a60; }
.db-g1 .db-group-head { background: #005a9c; }
.db-g2 .db-group-head { background: #6247d6; }
.db-g3 .db-group-head { background: #b45309; }
.db-g4 .db-group-head { background: #be185d; }
.db-g5 .db-group-head { background: #0e7490; }
.db-group.is-dropped { opacity: .4; filter: grayscale(.7); }
.db-group-agg {
    padding: .5em .8em;
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--ink-soft);
    background: #f8fafc;
    border-top: 1px solid var(--line);
}

/* ================================================================
   SQL mostrato dentro i widget, con clausola evidenziata
================================================================= */
.db-sql {
    margin: 0 0 1.1em;
    padding: 1em 1.1em;
    font-family: var(--font-mono);
    font-size: .84rem;
    line-height: 1.75;
    color: #e2e8f0;
    background: linear-gradient(180deg, #111a2c, #0f172a);
    border-radius: 12px;
    overflow-x: auto;
}
.db-sql .db-line {
    display: block;
    padding: 0 .45em;
    border-radius: 6px;
    transition: background-color .3s ease, color .3s ease;
}
.db-sql .db-line.is-active {
    background: rgba(52, 211, 153, .16);
    box-shadow: inset 2px 0 0 #34d399;
}
.db-sql .db-line.is-done { opacity: .55; }
.db-sql .k { color: #7dd3fc; font-weight: 600; }
.db-sql .f { color: #c4b5fd; }
.db-sql .s { color: #fca5a5; }
.db-sql .n { color: #fcd34d; }
.db-sql .c { color: #64748b; font-style: italic; }

/* ================================================================
   SCHEMA DEL DATABASE / DIAGRAMMI E-R (SVG inline)
================================================================= */
.db-figure {
    margin: 1.8em 0;
    padding: 1.2em;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-xs);
    text-align: center;
    overflow-x: auto;
}
.db-figure svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.db-figure figcaption,
.db-caption {
    margin-top: .9em;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--muted);
    text-align: center;
}

/* Elementi dei diagrammi E-R */
.er-entity { fill: #ffffff; stroke: var(--brand-600); stroke-width: 2; }
.er-entity-weak { fill: #ffffff; stroke: var(--brand-600); stroke-width: 2; stroke-dasharray: 0; }
.er-entity-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    fill: var(--brand-700);
    text-anchor: middle;
    dominant-baseline: middle;
}
.er-rel { fill: #f0f6fc; stroke: var(--brand-600); stroke-width: 2; }
.er-rel-label {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--brand-700);
    text-anchor: middle;
    dominant-baseline: middle;
}
.er-line { stroke: #64748b; stroke-width: 1.6; fill: none; }
.er-card {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    fill: #475569;
    text-anchor: middle;
}
.er-attr { fill: #ffffff; stroke: #64748b; stroke-width: 1.4; }
.er-attr-key { fill: #334155; stroke: #334155; }
.er-attr-label {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    fill: #334155;
}
.er-gen { stroke: var(--brand-600); stroke-width: 1.8; fill: none; }
.er-note {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    fill: var(--muted);
    font-style: italic;
}
/* Colori accento per evidenziare parti del diagramma */
.er-hl .er-entity, .er-hl.er-entity { stroke: var(--db); }
.er-hl .er-entity-label, .er-hl.er-entity-label { fill: #0a5f4a; }

/* ================================================================
   SCHEMA LOGICO (tabelle con chiavi)
================================================================= */
.db-schema {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1.6em 0;
}
.db-rel {
    flex: 1 1 240px;
    padding: .9em 1em 1em;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-xs);
}
.db-rel h5 {
    margin: 0 0 .5em;
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-700);
}
.db-rel ul { list-style: none; margin: 0; padding: 0; }
.db-rel li {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .28em 0;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--text);
    border-bottom: 1px dashed #eef1f5;
}
.db-rel li:last-child { border-bottom: 0; }
.db-tag {
    font-family: var(--font-mono);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .12em .45em;
    border-radius: 5px;
    margin-left: auto;
}
.db-tag-pk { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.db-tag-fk { color: #1e40af; background: #dbeafe; border: 1px solid #bfdbfe; }
.db-tag-null { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; }

/* ================================================================
   CALCOLATORE INTERATTIVO (chiusure, BCNF, 3NF)
================================================================= */
.db-form {
    display: grid;
    gap: .9em;
    margin-bottom: 1.1em;
}
.db-field { display: flex; flex-direction: column; gap: .35em; }
.db-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.db-field .db-hint { font-size: .78rem; font-weight: 400; color: var(--muted); }
.db-input,
.db-select {
    width: 100%;
    padding: .55em .8em;
    font-family: var(--font-mono);
    font-size: .86rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.db-input:focus,
.db-select:focus {
    outline: none;
    border-color: var(--db);
    box-shadow: 0 0 0 3px rgba(11, 122, 96, .15);
}
textarea.db-input { min-height: 5.5em; resize: vertical; line-height: 1.6; }

.db-out {
    margin-top: 1em;
    padding: 1em 1.1em;
    font-size: .92rem;
    line-height: 1.7;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.db-out h6 {
    margin: 0 0 .5em;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.db-out + .db-out { margin-top: .7em; }
.db-out code, .db-mono {
    font-family: var(--font-mono);
    font-size: .86em;
}
.db-steps { margin: 0; padding-left: 1.3em; }
.db-steps li { margin-bottom: .35em; }

.db-chip {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .2em .6em;
    margin: .15em .25em .15em 0;
    font-family: var(--font-mono);
    font-size: .78rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink-soft);
}
.db-chip.is-ok { color: #0a5f4a; background: #ecfdf5; border-color: #a7f3d0; }
.db-chip.is-bad { color: var(--db-bad); background: #fef2f2; border-color: #fecaca; }
.db-chip.is-warn { color: var(--db-warn); background: #fffbeb; border-color: #fde68a; }

.db-verdict {
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .7em 1em;
    margin-bottom: .9em;
    font-weight: 600;
    border-radius: 10px;
}
.db-verdict.is-ok { color: #0a5f4a; background: #ecfdf5; border: 1px solid #a7f3d0; }
.db-verdict.is-bad { color: var(--db-bad); background: #fef2f2; border: 1px solid #fecaca; }

/* ================================================================
   SCHEDULE / CONCORRENZA
================================================================= */
.db-schedule {
    display: grid;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: .8rem;
}
.db-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2em;
    padding: .3em .5em;
    border-radius: 7px;
    border: 1px solid transparent;
}
.db-op.t1 { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.db-op.t2 { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.db-op.t3 { color: #0a5f4a; background: #d1fae5; border-color: #a7f3d0; }
.db-op.is-blocked { opacity: .45; text-decoration: line-through; }
.db-op.is-current { box-shadow: 0 0 0 3px rgba(11, 122, 96, .25); }

/* ================================================================
   BLOCCHI DIDATTICI RICORRENTI
================================================================= */
.db-callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9em;
    margin: 1.7em 0;
    padding: 1em 1.2em;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
}
.db-callout .db-ico {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: .95rem;
    font-weight: 700;
}
.db-callout > div > :first-child { margin-top: 0; }
.db-callout > div > :last-child { margin-bottom: 0; }

.db-callout.is-tip { background: #f0fdf9; border-color: #a7f3d0; }
.db-callout.is-tip .db-ico { color: #0a5f4a; background: #d1fae5; }
.db-callout.is-trap { background: #fef2f2; border-color: #fecaca; }
.db-callout.is-trap .db-ico { color: var(--db-bad); background: #fee2e2; }
.db-callout.is-exam { background: #f5f3ff; border-color: #ddd6fe; }
.db-callout.is-exam .db-ico { color: #5b21b6; background: #ede9fe; }

/* Confronto affiancato giusto/sbagliato */
.db-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1em;
    margin: 1.6em 0;
}
.db-compare > div {
    padding: 1em 1.1em;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
}
.db-compare .db-bad-box { border-color: #fecaca; background: #fef8f8; }
.db-compare .db-good-box { border-color: #a7f3d0; background: #f6fefb; }
.db-compare h5 {
    margin: 0 0 .6em;
    font-size: .9rem;
    font-weight: 700;
}
.db-compare .db-bad-box h5 { color: var(--db-bad); }
.db-compare .db-good-box h5 { color: #0a5f4a; }
.db-compare .code-container { width: 100%; margin: .6em 0 0; }

/* Domanda a scelta (quiz veloce) */
.db-quiz { margin: 1.8em 0; }
.db-quiz-q {
    margin: 0 0 .8em;
    font-weight: 600;
    color: var(--ink);
}
.db-quiz-opts { display: grid; gap: .5em; }
.db-quiz-opt {
    display: flex;
    align-items: flex-start;
    gap: .7em;
    width: 100%;
    padding: .7em .9em;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    text-align: left;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.db-quiz-opt:hover:not(:disabled) { border-color: var(--db); background: #f8fdfb; }
.db-quiz-opt .db-quiz-key {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    color: var(--muted);
    background: #f1f5f9;
    border-radius: 6px;
}
.db-quiz-opt.is-right { border-color: #6ee7b7; background: #ecfdf5; }
.db-quiz-opt.is-right .db-quiz-key { color: #fff; background: var(--db); }
.db-quiz-opt.is-wrong { border-color: #fca5a5; background: #fef2f2; }
.db-quiz-opt.is-wrong .db-quiz-key { color: #fff; background: var(--db-bad); }
.db-quiz-feedback {
    margin-top: .8em;
    padding: .8em 1em;
    font-size: .92rem;
    line-height: 1.6;
    border-radius: 10px;
    background: var(--db-soft);
    border: 1px solid var(--db-line);
}

/* Esercizio con soluzione a scomparsa */
.db-exercise {
    margin: 1.4em 0;
    padding: 1.1em 1.2em;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-400);
    border-radius: 12px;
}
.db-exercise > p:first-child { margin-top: 0; }
.db-exercise details { margin-top: .8em; }
.db-exercise summary {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand-600);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.db-exercise summary::-webkit-details-marker { display: none; }
.db-exercise summary::before { content: "▸"; transition: transform .2s ease; }
.db-exercise details[open] summary::before { transform: rotate(90deg); }
.db-exercise details[open] summary { margin-bottom: .5em; }
.db-exercise .code-container { width: 100%; margin: .7em 0; }

/* ================================================================
   RESPONSIVE
================================================================= */
@media (max-width: 768px) {
    .db-widget { padding: 1em .9em 1.2em; margin: 1.6em 0; border-radius: 14px; }
    .db-sql { font-size: .78rem; padding: .85em .9em; }
    .page-content .db-table table { font-size: .72rem; }
    .db-tables { gap: .8em; }
    .db-table { flex: 1 1 100%; }
    .db-progress { margin-left: 0; width: 100%; }
    .db-callout { grid-template-columns: 1fr; }
    .db-callout .db-ico { display: none; }
}