sprint_planer_web/assets/css/input.css

@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 stepper popover. Anchored to the active
       [data-stepper] input in JS; uses `position: fixed` so it never
       flickers when scrolling the container table. Dark-mode siblings
       match the Phase 16 palette.
       As of the hover follow-up: the popover opens on pointerenter over
       the input and auto-closes shortly after the pointer leaves both
       input and popover — no click needed. The optional range slider
       now renders vertically (top = max, bottom = min). */
    .stepper-popover {
        @apply fixed z-50 flex items-center gap-2 rounded-md border
               border-slate-200 bg-white px-2 py-1 shadow-lg
               dark:border-slate-600 dark:bg-slate-800;
    }
    .stepper-popover .stepper-controls {
        @apply flex flex-col items-center gap-1;
    }
    .stepper-popover button {
        @apply rounded px-2 py-1 text-lg font-semibold leading-none text-slate-700
               hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-700;
    }
    .stepper-popover output {
        @apply min-w-[3rem] text-center font-mono text-slate-900
               dark:text-slate-100;
    }
    .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: 6rem;
    }
}