/* ---------- Page layout ---------- */
.da-f-body {
    padding: 0px 100px 30px 100px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Signed-in header / sign out ---------- */
.da-f-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.da-signout-btn {
    background-color: #006975;
    color: #cfeef2;
    border: none;
    border-radius: 10px;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .da-signout-btn:hover {
        background-color: #00808e;
        color: #ffffff;
    }

li {
    padding-bottom: 1em;
}

p {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.details {
    padding-left: 0.5em;
    margin-bottom: 0.5em;
}

    .details p {
        font-size: 1.05rem;
    }

/* ---------- Tabs ---------- */
.tab-bar {
    display: flex;
    gap: 0.4rem;
    border-bottom: 2px solid var(--yellow);
    margin-top: 1.5rem;
}

.tab-button {
    background-color: #006975;
    color: #cfeef2;
    border: none;
    border-radius: 10px 10px 0 0;
    padding: 0.85rem 1.9rem;
    font-size: 1.1rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .tab-button:hover {
        background-color: #00808e;
        color: #ffffff;
    }

    .tab-button.active {
        background-color: var(--yellow);
        color: #10565e;
    }

.tab-panel {
    display: none;
    padding-top: 1.75rem;
    animation: tabFade 0.2s ease;
}

    .tab-panel.active {
        display: block;
    }

@keyframes tabFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Cards ---------- */
.panel-card {
    border-radius: 12px;
    padding: 1.25rem 2rem 1.75rem 2rem;
    background-color: #00808e;
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.25);
}

    .panel-card h3 {
        margin-top: 0.5rem;
    }

.install-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

#links ul {
    list-style: none;
    padding-left: 0.5em;
    margin: 0;
}

#links li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    padding-bottom: 0.9em;
    font-size: 1.1rem;
}

/* A copy-only entry: reads as an item in the list, but is deliberately not clickable. */
.link-static {
    color: #ffffff;
}

/* Sits on its own line under the entry it explains. */
.link-note {
    flex-basis: 100%;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- Icon buttons beside the links (copy to clipboard, show QR) ---------- */
.copy-link-btn,
.qr-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0.25em;
    color: #cfeef2;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: color 0.15s ease, background-color 0.15s ease;
}

    .copy-link-btn:hover,
    .qr-link-btn:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.15);
    }

    .copy-link-btn:focus-visible,
    .qr-link-btn:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: 1px;
    }

    /* One glyph at a time: clipboard normally, check mark just after a successful copy. */
    .copy-link-btn .copy-icon-done,
    .copy-link-btn.copied .copy-icon-copy {
        display: none;
    }

    .copy-link-btn.copied {
        color: var(--yellow);
    }

/* ---------- QR code dialog ---------- */
/* A native <dialog>, so Esc-to-close and the focus trap come from the browser. */
.qr-dialog {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.75rem 2rem 1.5rem 2rem;
    background-color: #00808e;
    color: #ffffff;
    font-family: inherit;
    text-align: center;
    max-width: min(420px, 90vw);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

    .qr-dialog::backdrop {
        background: rgba(0, 0, 0, 0.55);
    }

    .qr-dialog h3 {
        color: var(--yellow);
        margin: 0 0 1rem 0;
        font-size: 1.4rem;
    }

/* The PNG is black on white; the white plate keeps the quiet zone intact against the teal card,
   which is what a scanner needs to find the code's edges. */
.qr-dialog-image {
    display: block;
    width: min(300px, 70vw);
    height: auto;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
    box-sizing: content-box;
}

.qr-dialog-error {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--yellow);
}

/* The URL is shown as text too, so it can still be read off (or dictated) if a camera won't focus. */
.qr-dialog-url {
    margin: 1rem 0 0.35rem 0;
    font-size: 0.85rem;
    line-height: 1.35;
    word-break: break-all;
    color: #d6f0f3;
}

.qr-dialog-help {
    margin: 0 0 1.25rem 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
}

.qr-dialog-close {
    background-color: #006975;
    color: #cfeef2;
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1.6rem;
    font-size: 1rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .qr-dialog-close:hover {
        background-color: #10565e;
        color: #ffffff;
    }

    .qr-dialog-close:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: 2px;
    }

/* ---------- Device lists ----------
   Stacked, not columned. A room has at most a handful of kiosks and three short columns to show them
   in, while tablets is one row per student across five -- so splitting the width evenly spent half the
   page on the small table and left the big one 494px to truncate five columns into. Full width each
   instead takes that to 1049px, and either block folds away (toggleDeviceSection) to buy back the
   vertical room stacking costs. */
#device-listing-devices {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5rem;
}

    #device-listing-devices .device-column h3 {
        margin-top: 0;
        margin-bottom: 0;
    }

/* Disclosure header. The button fills the heading so the whole yellow strip is the hit target, and it
   inherits the h3's colour and font so the heading reads exactly as it did before it became clickable.
   aria-expanded is the state of record -- the arrow below is driven off it, not off a second class. */
.device-collapse {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.2em 0 0.3em 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .device-collapse:hover {
        color: #ffffff;
    }

    .device-collapse:focus-visible {
        outline: 2px solid var(--yellow);
        outline-offset: 2px;
        border-radius: 6px;
    }

/* Points down when open, right when shut. Decorative (aria-hidden): aria-expanded already says this. */
.device-collapse-arrow {
    font-size: 0.7em;
    line-height: 1;
    transition: transform 0.15s ease;
}

.device-collapse[aria-expanded="false"] .device-collapse-arrow {
    transform: rotate(-90deg);
}

/* Row count, so a folded panel still answers "how many" without being opened. */
.device-count {
    font-size: 0.6em;
    font-weight: normal;
    padding: 0.2em 0.8em;
    border-radius: 999px;
    background-color: #10565e;
    color: #cfeef2;
}

.device-list.collapsed {
    display: none;
}

.device-list {
    border-radius: 12px;
    margin-top: 0.5em;
    padding: 2em;
    background-color: #10565e;
    font-size: 0.8em;
}

    .device-list table {
        width: 100%;
        border-collapse: collapse;
    }

    .device-list thead {
        font-weight: bold;
    }

        .device-list thead td {
            font-weight: bold;
            border-bottom: 1px solid white;
        }

        /* Clickable, keyboard-focusable sort headers */
        .device-list thead td.sortable {
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            transition: color 0.15s ease;
        }

            .device-list thead td.sortable:hover,
            .device-list thead td.sorted {
                color: var(--yellow);
            }

            .device-list thead td.sortable:focus-visible {
                outline: 2px solid var(--yellow);
                outline-offset: -2px;
            }

    .device-list .sort-arrow {
        font-size: 0.85em;
    }

    .device-list td {
        padding: 0.5em;
    }

        .device-list td:not(:last-child) {
            border-right: 1px solid white;
        }

    /* ---------- Camera column ----------
       A tablet whose camera is refused or broken cannot scan a kiosk code and cannot take the portrait
       the takeaway is built on, so it needs to be findable by glancing down the column rather than by
       reading every row. Colour only -- the cell also carries a word and a symbol, so it does not depend
       on being able to tell red from green. */
    .device-list td.cam-bad {
        color: #ff8a80;
        font-weight: bold;
    }

    .device-list td.cam-unknown {
        color: rgba(255, 255, 255, 0.55);
    }

    .device-list td.cam-ok {
        color: #9be89b;
    }

    /* Empty / no-match placeholder row spans all columns */
    .device-list td.device-empty {
        text-align: center;
        padding: 1.5em 0.5em;
        color: rgba(255, 255, 255, 0.55);
        font-style: italic;
        border-right: none;
    }

/* ---------- Device list filter box ---------- */
.device-toolbar {
    margin-bottom: 1em;
}

.device-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    font-size: 1.1em;
    font-family: inherit;
    color: #ffffff;
    background-color: #0a3d44;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

    .device-filter::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }

    .device-filter:focus {
        outline: none;
        border-color: var(--yellow);
    }

/* Security-code card styles moved to the shared auth.css (used here and by the manage panels). */

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    .da-f-body {
        padding-left: 20px;
        padding-right: 20px;
    }

    .install-grid {
        grid-template-columns: 1fr;
    }
}