/* ==========================================================================
   Today's Board — admin panel

   Layout-only styling for the one custom page that is not built from stock
   Filament components. Written against Filament v4's own CSS custom properties
   (--gray-*, --primary-*, --spacing, --radius-*) so it tracks the panel's
   colours and light/dark mode without a Tailwind build. Filament ships its CSS
   precompiled and production here has no node, so this file must stay
   build-free.
   ========================================================================== */

.gb-board {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* --- a goal row --------------------------------------------------------- */

.gb-goal {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;

    background-color: var(--gray-50);
    border-radius: var(--radius-xl, 0.75rem);
    box-shadow: inset 0 0 0 1px var(--gray-200);

    transition: background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

:where(.dark, .dark *) .gb-goal {
    background-color: var(--gray-900);
    box-shadow: inset 0 0 0 1px var(--gray-800);
}

.gb-goal--done {
    opacity: 0.62;
}

/* --- the tick / position button ----------------------------------------- */

.gb-goal__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Comfortably above the 44px minimum touch target. */
    width: 3rem;
    height: 3rem;

    border: 0;
    border-radius: 999px;
    cursor: pointer;

    background-color: var(--gray-100);
    box-shadow: inset 0 0 0 1px var(--gray-300);
    color: var(--gray-500);

    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    -webkit-tap-highlight-color: transparent;
}

:where(.dark, .dark *) .gb-goal__toggle {
    background-color: var(--gray-800);
    box-shadow: inset 0 0 0 1px var(--gray-700);
    color: var(--gray-400);
}

.gb-goal__toggle:hover {
    background-color: var(--gray-200);
}

:where(.dark, .dark *) .gb-goal__toggle:hover {
    background-color: var(--gray-700);
}

.gb-goal__toggle:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.gb-goal__toggle:disabled {
    cursor: progress;
}

.gb-goal--done .gb-goal__toggle,
.gb-goal--done .gb-goal__toggle:hover {
    background-color: var(--primary-600);
    box-shadow: inset 0 0 0 1px var(--primary-600);
    color: var(--color-white, #fff);
}

.gb-goal__position {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1;
}

.gb-goal__tick {
    width: 1.375rem;
    height: 1.375rem;
}

/* --- editable fields ---------------------------------------------------- */

.gb-goal__fields {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.gb-goal__title,
.gb-goal__note {
    width: 100%;
    border: 0;
    background-color: transparent;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-md, 0.375rem);
    color: var(--gray-950);
    font-family: inherit;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

:where(.dark, .dark *) .gb-goal__title,
:where(.dark, .dark *) .gb-goal__note {
    color: var(--gray-100);
}

.gb-goal__title {
    font-size: 1rem;
    font-weight: 550;
    line-height: 1.35;
}

.gb-goal__note {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--gray-500);
}

:where(.dark, .dark *) .gb-goal__note {
    color: var(--gray-400);
}

.gb-goal__title::placeholder,
.gb-goal__note::placeholder {
    color: var(--gray-400);
}

.gb-goal__title:hover,
.gb-goal__note:hover {
    background-color: var(--gray-100);
}

:where(.dark, .dark *) .gb-goal__title:hover,
:where(.dark, .dark *) .gb-goal__note:hover {
    background-color: var(--gray-800);
}

.gb-goal__title:focus,
.gb-goal__note:focus {
    outline: none;
    background-color: var(--gray-100);
    box-shadow: inset 0 0 0 1px var(--primary-600);
}

:where(.dark, .dark *) .gb-goal__title:focus,
:where(.dark, .dark *) .gb-goal__note:focus {
    background-color: var(--gray-800);
}

.gb-goal--done .gb-goal__title {
    text-decoration: line-through;
}

/* --- row meta ----------------------------------------------------------- */

.gb-goal__meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gb-goal__time {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--gray-500);
    white-space: nowrap;
}

.gb-board__hint {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

/* --- empty state -------------------------------------------------------- */

.gb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.gb-empty__headline {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-950);
}

:where(.dark, .dark *) .gb-empty__headline {
    color: var(--gray-100);
}

.gb-empty__sub {
    margin: 0;
    max-width: 34rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.gb-empty__action {
    margin-top: 0.75rem;
}

/* --- accessibility ------------------------------------------------------ */

.gb-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --- phone -------------------------------------------------------------- */

@media (max-width: 640px) {
    .gb-goal {
        flex-wrap: wrap;
        gap: 0.625rem;
    }

    /* Tick and text stay side by side; badges and remove drop to their own
       line so the goal title keeps the full width of the screen. */
    .gb-goal__fields {
        flex: 1 1 60%;
    }

    .gb-goal__meta {
        flex: 1 1 100%;
        justify-content: flex-end;
        padding-left: 3.875rem;
    }

    .gb-goal__title {
        font-size: 1.0625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gb-goal,
    .gb-goal__toggle,
    .gb-goal__title,
    .gb-goal__note {
        transition-duration: 0.001ms;
    }
}

/* ==========================================================================
   API token reveal
   ========================================================================== */

.gb-token {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--gray-50);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: inset 0 0 0 1px var(--gray-200);
}

:where(.dark, .dark *) .gb-token {
    background-color: var(--gray-900);
    box-shadow: inset 0 0 0 1px var(--gray-800);
}

.gb-token__value {
    flex: 1 1 20rem;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-all;
    color: var(--gray-950);
    user-select: all;
}

:where(.dark, .dark *) .gb-token__value {
    color: var(--gray-100);
}

.gb-token__actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.gb-token__hint {
    margin: 1rem 0 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.gb-token__example {
    margin: 0;
    padding: 0.75rem;
    overflow-x: auto;
    background-color: var(--gray-950);
    color: var(--gray-100);
    border-radius: var(--radius-lg, 0.5rem);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.6;
}

/* ==========================================================================
   Screen setup (QR code)
   ========================================================================== */

.gb-screen-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.gb-screen-setup__qr {
    flex: 0 0 auto;
    padding: 0.75rem;
    background: #fff;
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    line-height: 0;
}

.gb-screen-setup__qr svg {
    display: block;
    width: 13rem;
    height: 13rem;
}

.gb-screen-setup__details {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gb-screen-setup__label {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.gb-screen-setup__url {
    display: block;
    padding: 0.625rem 0.75rem;
    background-color: var(--gray-50);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
    color: var(--gray-950);
    user-select: all;
}

:where(.dark, .dark *) .gb-screen-setup__url {
    background-color: var(--gray-900);
    box-shadow: inset 0 0 0 1px var(--gray-800);
    color: var(--gray-100);
}

.gb-screen-setup__steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--gray-500);
}