/* Mobile-first: base styles target small screens, the @media block below adds
   extra breathing room once there's enough width for it. */

* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    /* Extra bottom padding so the last item in any page's content (e.g. the
       subject cards on the dashboard) can scroll clear of the fixed FABs
       instead of ending up hidden behind them. */
    padding: 1rem 1rem 6rem;
    background: #f4f6f8;
    color: #2c3e50;
}

.container {
    max-width: 400px;
    margin: 0 auto;
}

h1 {
    font-size: 1.5rem;
    text-align: center;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-row h1 {
    margin: 0;
}

.secondary-button {
    width: auto;
    margin-top: 0;
    background: transparent;
    border: 1px solid #2980b9;
    color: #2980b9;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.secondary-button:hover {
    background: #eaf2f8;
}

.subject-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Whole-row hover cue: signals "this is clickable" without competing with the
       delete button's own distinct (red) hover state. */
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.subject-row:hover {
    background-color: #fafbfc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.subject-card {
    flex: 1;
    text-decoration: none;
    color: #2980b9;
    font-weight: bold;
    cursor: pointer;
}

.subject-card:hover {
    text-decoration: underline;
}

.subject-row .delete-button {
    width: auto;
    margin-top: 0;
}

.card {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Full-screen dimmed backdrop, centering whatever .card sits inside it -
   z-index above the FABs (100) so the modal always wins. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 200;
}

.modal-box {
    max-width: 320px;
    margin: 0;
}

.app-footer {
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    margin-top: 1rem;
}

label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

input,
select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
}

button {
    width: 100%;
    margin-top: 1rem;
    padding: 0.7rem;
    border: none;
    border-radius: 4px;
    background: #2980b9;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

button:hover {
    background: #21618c;
}

#message {
    text-align: center;
    min-height: 1.2rem;
    font-size: 0.9rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: #2980b9;
    text-decoration: none;
}

/* Fixed to the viewport (not .container), so it stays put in the bottom-right
   corner regardless of scroll position or the container's own max-width/margin. */
.feedback-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 100;

    background: #2980b9;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;

    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.feedback-fab:hover {
    background: #21618c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Same fixed-FAB recipe as .feedback-fab, mirrored to the opposite corner so the two
   floating links don't overlap. Yellow (the "Buy Me a Coffee" brand color) visually
   separates it from the blue feedback FAB. */
.support-fab {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 100;

    background: #FFDD00;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;

    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.support-fab:hover {
    background: #e5c700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.support-card {
    text-align: center;
}

.coffee-button {
    display: inline-block;
    margin-top: 1rem;
    background: #FFDD00;
    color: #2c3e50;
    text-decoration: none;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease;
}

.coffee-button:hover {
    background: #e5c700;
}

textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: #666;
    margin: 0.25rem 0 0;
}

.progress-bar-track {
    background: #e0e0e0;
    border-radius: 999px;
    height: 1rem;
    overflow: hidden;
    margin-top: 0.75rem;
}

.progress-bar-fill {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* QQI/HETAC performance spectrum - one class per band, applied dynamically by
   getGradeBand() in subject.js based on the current cumulative grade. Reused for both
   the progress bar fill and the legend swatches below, so the colors never drift apart. */
.grade-fail {
    background-color: #E74C3C;
}

.grade-pass {
    background-color: #F39C12;
}

.grade-merit2 {
    background-color: #F1C40F;
}

.grade-merit1 {
    background-color: #3498DB;
}

.grade-distinction {
    background-color: #27AE60;
}

/* The single dynamic academic title (e.g. "Pass", "Merit 1") shown right below the bar. */
.dynamic-title {
    text-align: center;
    font-weight: bold;
    color: #000;
    font-size: clamp(1rem, 5vw, 1.4rem);
    white-space: nowrap;
    margin: 0.5rem 0;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.dynamic-title.fade-out {
    opacity: 0;
}

/* Minimalist legend: just the color dots and their ranges, no descriptive text. */
.grade-legend-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.legend-dot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #666;
}

.legend-swatch {
    width: 0.6rem;
    height: 0.6rem;
    min-width: 0.6rem;
    border-radius: 50%;
}

.assessment-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.assessment-row span {
    flex: 1;
}

.assessment-row input {
    width: 5rem;
}

.assessment-row button {
    width: auto;
    margin-top: 0;
}

/* Reuses the same red as .grade-fail, so "destructive" reads consistently across the app. */
.delete-button {
    background: #E74C3C;
}

.delete-button:hover {
    background: #c0392b;
}

@media (min-width: 500px) {
    body {
        padding: 2rem 2rem 6rem;
    }
}

/* Adicione isso no final do seu style.css */

.support-card {
    text-align: center; /* Centraliza o texto e o botão dentro do cartão */
    padding: 30px;
}

.support-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
}

.plot-twist {
    color: #d9534f; /* Cor vermelha para dar destaque à piada */
    font-style: italic;
}

.coffee-button {
    display: inline-block;
    background-color: #FFDD00; /* Cor oficial do Buy Me a Coffee */
    color: #000000;
    text-decoration: none;
    padding: 12px 24px;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

.coffee-button:hover {
    background-color: #e6c700;
}

.qr-code {
    display: block;
    width: 160px;
    height: 160px;
    margin: 20px auto 0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}