sprint_planer_web/assets/css/input.css

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

@layer base {
    /* Hide native spinner buttons on every number input app-wide. The
       team prefers keyboard typing 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 18: per-cell task-assignment status. Each <td> holding a
       day input also wraps it in a .assign-cell with an
       .assign-status-* color class. The class is on the wrapper so
       both the day input/span and the chevron-only <select> share
       the tint. The selector itself shows only its native arrow —
       no text, no width — so it sits as a tiny chevron next to the
       day field. */
    .assign-cell {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        padding: 1px;
        border-radius: 0.25rem;
        line-height: 1;
    }
    .assign-status-zugewiesen { background-color: transparent; }
    .assign-status-gestartet     { background-color: theme('colors.yellow.200'); }
    .assign-status-abgeschlossen { background-color: theme('colors.green.200'); }
    .assign-status-abgebrochen   { background-color: theme('colors.red.200'); }
    .dark .assign-status-gestartet     { background-color: theme('colors.yellow.700'); }
    .dark .assign-status-abgeschlossen { background-color: theme('colors.green.700'); }
    .dark .assign-status-abgebrochen   { background-color: theme('colors.red.700'); }

    /* Inputs/spans inside a coloured cell get a transparent background
       so the wrapper tint shows through; the day input keeps its own
       focus ring. */
    .assign-cell:not(.assign-status-zugewiesen) input[data-assign],
    .assign-cell:not(.assign-status-zugewiesen) > .font-mono {
        background-color: transparent;
    }

    .assign-status-select {
        /* Strip the native <select> body — keep only the dropdown
           chevron. We hide the text by sizing the box to zero width
           plus padding for the arrow, and rely on each browser's
           default arrow rendering. */
        width: 1.1rem;
        min-width: 0;
        padding: 0;
        margin: 0;
        border: 0;
        background-color: transparent;
        font-size: 0;          /* hide selected option text */
        line-height: 1;
        color: transparent;    /* fallback if font-size:0 fails */
        cursor: pointer;
    }
    .assign-status-select:focus {
        outline: 2px solid theme('colors.slate.400');
        outline-offset: 1px;
        border-radius: 2px;
    }
    .assign-status-select option {
        font-size: 0.875rem;
        color: theme('colors.slate.900');
    }
    .dark .assign-status-select option {
        color: theme('colors.slate.100');
        background-color: theme('colors.slate.800');
    }
}