/* ==========================================================
   TRACKLY components
   Small reusable pieces (buttons, inputs, divider).
   The other pages (sign up, forgot password, dashboard) reuse these.
   ========================================================== */

/* ---------- Buttons ---------- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: var(--control-height);
    padding: 0 16px;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, background-color 0.15s ease;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background: var(--color-button);
    color: var(--color-button-text);
}

.btn-primary:hover {
    filter: brightness(0.95);
}

.btn-outline {
    background: transparent;
    color: var(--color-heading);
    border-color: var(--color-brand-dark);
}

.btn-outline:hover {
    background: rgba(14, 92, 74, 0.06);
}

/* Google button: white box with the Google logo */
.btn-google {
    background: var(--color-input-bg);
    color: var(--color-heading);
    border-color: var(--color-border);
}

.btn-google:hover {
    background: #F1F5F9;
}

.btn-google svg {
    width: 20px;
    height: 20px;
}

/* ---------- Form fields ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-label);
}

.input {
    width: 100%;
    height: var(--control-height);
    padding: 0 14px;
    background: var(--color-input-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
}

.input::placeholder {
    color: var(--color-placeholder);
}

.input:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px rgba(0, 217, 150, 0.2);
}

/* Password box with the show/hide eye on the right */
.input-wrap {
    position: relative;
}

.input-wrap .input {
    padding-right: 46px;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--color-muted);
    transform: translateY(-50%);
}

.toggle-password svg {
    width: 20px;
    height: 20px;
}

/* Checkbox with its label text */
.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-muted);
    cursor: pointer;
}

.checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-link);
}

/* Error message shown under a form (filled in by JavaScript later) */
.form-error {
    font-size: 13px;
    color: var(--color-error);
}

/* ---------- Password strength bar ----------
   JavaScript sets data-level on .strength to 0, 1, 2 or 3.
   To preview it now, open DevTools and change data-level in the HTML. */
.strength {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.strength-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.strength-bars span {
    height: 4px;
    border-radius: 999px;
    background: var(--color-border);
    transition: background-color 0.2s ease;
}

.strength[data-level="1"] .strength-bars span:nth-child(-n + 1) {
    background: var(--color-strength-weak);
}

.strength[data-level="2"] .strength-bars span:nth-child(-n + 2) {
    background: var(--color-strength-fair);
}

.strength[data-level="3"] .strength-bars span {
    background: var(--color-strength-strong);
}

.strength-text {
    font-size: 11px;
    color: var(--color-muted);
}

/* ---------- Outlined button with a bright green border (Back to Sign In) ---------- */
.btn-outline-link {
    background: transparent;
    color: var(--color-brand-dark);
    border-color: var(--color-link);
}

.btn-outline-link:hover {
    background: rgba(0, 217, 150, 0.08);
}

/* ---------- Small text links ---------- */
.link-button {
    padding: 0;
    background: none;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-link);
}

.link-button:hover {
    text-decoration: underline;
}

.link-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    text-decoration: none;
}

.link-quiet {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-brand-dark);
}

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

/* ---------- Status pills (Pending, In Progress, Overdue, Submitted) ---------- */
.pill {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pill-pending {
    background: var(--color-status-pending-bg);
    color: var(--color-status-pending-text);
}

.pill-progress {
    background: var(--color-status-progress-bg);
    color: var(--color-status-progress-text);
}

.pill-overdue {
    background: var(--color-badge-due-bg);
    color: var(--color-badge-due-text);
}

.pill-submitted {
    background: var(--color-badge-ok-bg);
    color: var(--color-badge-ok-text);
}

/* ---------- Empty states (TEMP until the designer sends hers) ---------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 12px;
    text-align: center;
}

.empty strong {
    font-size: 15px;
    font-weight: 700;
}

.empty p {
    max-width: 280px;
    font-size: 13px;
    color: var(--color-muted);
}

.empty .btn {
    width: auto;
    height: 40px;
    margin-top: 10px;
    padding: 0 18px;
}

/* ---------- Pop-up box (js/dialog.js) ---------- */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.5);
    animation: dialog-fade 0.15s ease;
}

.dialog {
    width: 100%;
    max-width: 400px;
    padding: 24px;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    animation: dialog-pop 0.18s ease;
}

.dialog h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.dialog p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-muted);
}

.dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.dialog-actions .btn {
    flex: 1;
    height: 46px;
    font-size: 14px;
}

.btn-danger-outline {
    background: transparent;
    border-color: #FCA5A5;
    color: var(--color-badge-due-text);
}

.btn-danger-outline:hover {
    background: var(--color-badge-due-bg);
}

@keyframes dialog-fade {
    from {
        opacity: 0;
    }
}

@keyframes dialog-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

/* On a small phone the two buttons stack, with the safe one on top */
@media (max-width: 420px) {
    .dialog-actions {
        flex-direction: column;
    }
}

/* Box shown when a page could not load its data */
.load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 12px;
    background: #FFFFFF;
    text-align: center;
    font-size: 14px;
    color: var(--color-muted);
}

.btn-retry {
    width: auto;
    padding: 0 20px;
}

/* Success note (for example after creating an account) */
.form-success {
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(0, 217, 150, 0.12);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-brand-dark);
}

/* Buttons while we wait for Firebase */
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ---------- Divider with text in the middle ---------- */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--color-muted);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Small links like Forgot password? and Sign Up */
.link-strong {
    font-weight: 600;
}

/* ==========================================================
   SHARED BY THE COURSE PAGE AND THE ASSIGNMENTS PAGE
   Filter chips, assignment rows, Show more, and the header button.
   The active chip colors are two settings in base.css, so changing the look
   on every page is one edit.
   ========================================================== */

.btn-add {
    flex-shrink: 0;
    width: auto;
    height: 42px;
    padding: 0 18px;
}

/* ---------- Filter chips ---------- */
.filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.filters {
    display: flex;
    gap: 8px;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.filters::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-heading);
}

.filter-chip:hover {
    background: #F1F5F9;
}

.filter-chip[aria-pressed="true"] {
    background: var(--chip-active-bg);
    border-color: var(--chip-active-bg);
    font-weight: 600;
    color: var(--chip-active-text);
}

/* ---------- Assignment rows ---------- */
.task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.task {
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.6);
}

.task-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.task-link:hover {
    background: #FAFBFF;
    text-decoration: none;
}

.task-main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.task-chip {
    flex-shrink: 0;
    max-width: 90px;
    padding: 2px 9px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-tile-mint);
    background: color-mix(in srgb, var(--course-color) 22%, #FFFFFF);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-brand-dark);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.task-text {
    min-width: 0;
}

/* One line each, then "..." */
.task-title,
.task-desc {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.task-title {
    font-size: 14px;
    font-weight: 600;
}

.task-desc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-muted);
}

.task-side {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
}

.task-due {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-muted);
    white-space: nowrap;
}

.task-due .icon {
    width: 13px;
    height: 13px;
}

.task-go {
    display: inline-flex;
    color: var(--color-muted);
}

.task-go .icon {
    width: 16px;
    height: 16px;
}

.icon-wrap {
    display: inline-flex;
}

/* Show more */
.show-more-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.btn-more {
    width: auto;
    height: 42px;
    padding: 0 24px;
}

/* Empty list messages sit on a white card */
.panel-empty {
    border-radius: 12px;
    background: #FFFFFF;
}

/* A row's due text: red when overdue, with a check when submitted */
.task-due.is-overdue {
    color: var(--color-badge-due-text);
}

.task-due.is-done .icon {
    color: var(--color-badge-ok-text);
}

@media (max-width: 640px) {
    .filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* Each row gets a second line for the date and status */
    .task-link {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }

    .task-side {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .task-go {
        margin-left: auto;
    }
}

/* Soft colored squares behind small icons (used on the dashboard and My Courses) */
.tile-mint {
    background: var(--color-tile-mint);
}

.tile-lavender {
    background: var(--color-tile-lavender);
}

.tile-blue {
    background: var(--color-tile-blue);
}