@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Phase 17: hide native spinner buttons on every number input app-wide.
       The team prefers either keyboard typing or the custom
       [data-stepper] popover over the tiny, inconsistent UA controls. */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
    }
}

@layer utilities {
    /* Phase 13: the Focus filter temporarily hides entire sw columns when the
       focused worker has no assignment on any visible row. Separate from the
       .hidden set driven by the Columns dropdown so clearing Focus restores
       the user's manual column picks. */
    .focus-auto-hidden {
        display: none;
    }
}

@layer components {
    /* Phase 15: big-screen / beamer presentation scope. Applied via
       views/sprints/present.php on the root <main>. Tightens typography
       and cell padding so the task table fits the viewport without
       horizontal scroll at 1920×1080; hides drag handles and per-row
       delete buttons (not meaningful during a group discussion). */
    .beamer-root table {
        table-layout: fixed;
        font-size: clamp(0.75rem, 0.95vw, 1.05rem);
    }
    .beamer-root td,
    .beamer-root th {
        padding: 0.25rem 0.35rem;
    }
    .beamer-root .handle,
    .beamer-root [data-delete-task] {
        display: none;
    }

    /* JS-driven toggle (sprint-planner.js): when the rendered task table
       is wider than the viewport, rotate worker-column headers to save
       horizontal space. Leaves non-worker headers (Task / Owner / Prio
       / Tot) untouched. */
    .beamer-vertical-headers thead th[data-sort-col^="sw-"] {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        padding: 0.5rem 0.25rem;
    }

    /* Phase 17: floating slider popover for number inputs. Shows a
       vertical range slider (top = max, bottom = min) anchored to the
       right of the active input at its vertical midpoint; click-to-
       open, close when the pointer leaves the popover after having
       entered it (see public/assets/js/number-stepper.js). Dark-mode
       siblings match the Phase 16 palette. */
    .stepper-popover {
        @apply fixed z-50 flex items-center justify-center rounded-md
               border border-slate-200 bg-white px-1 py-2 shadow-lg
               dark:border-slate-600 dark:bg-slate-800;
    }
    .stepper-popover input[type="range"] {
        @apply accent-slate-600 dark:accent-slate-400;
        /* Vertical orientation. Modern browsers (Chrome 111+, Firefox
           110+, Safari 16.4+) honour writing-mode on <input type="range">;
           the -webkit-appearance fallback keeps older WebKit correct.
           The `orient` attribute set in JS handles older Firefox. */
        writing-mode: vertical-lr;
        direction: rtl;
        -webkit-appearance: slider-vertical;
        appearance: slider-vertical;
        width: 1.5rem;
        height: 8rem;
    }
}