/* Global stylesheet for the Darts Score Keeper application.
   Defines layout, theming, animations, and component styling. */
/* Simple, readable styles for the Darts Score Keeper application */

/* Design tokens: spacing, radius, and focus ring */
:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --radius-2: 0.4rem;
    --radius-3: 0.75rem;
    --focus-ring: 1.5px solid #facc15;
    --focus-offset: 2px;
}

/* Ensure consistent box sizing across all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Base typography and line height */
html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.4;
}

/* Page background and default text color */
body {
    margin: 0;
    background: #06140a;
    color: #f5f5f5;
}

/* Header styling: title bar with gradient and subtle border */
.app-header {
    padding: 1.5rem 1rem;
    text-align: center;
    background: linear-gradient(135deg, #0b0b0b, #14532d);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-header h1 {
    margin: 0;
    font-size: 1.8rem;
}

.app-header .subtitle {
    margin: var(--space-2) 0 0;
    font-size: 0.95rem;
    color: #e5e7eb;
    opacity: 0.9;
}

/* Main content grid layout */
.app-main {
    max-width: 1000px;
    margin: 1.5rem auto;
    padding: 0 1rem 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 1.5rem;
}

/* Responsive layout: collapse grid on smaller screens */
@media (max-width: 800px) {
    .app-main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Card component: containers for sections with fade-in animation */
.card {
    background: #111827;
    border-radius: var(--radius-3);
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(254, 226, 226, 0.2);
    transform: translateY(0);
    opacity: 0;
    animation: card-fade-in 400ms ease-out forwards;
    animation-delay: 80ms;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}

/* Hover effect for cards */
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.6);
}

/* Layout for card headers containing section titles and buttons */
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.card h2 {
    margin: 0;
    font-size: 1.2rem;
}

/* Form field grouping: labels + inputs */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.8rem;
}

.field-group label {
    font-size: 0.9rem;
}

.field-group input,
.field-group select {
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-2);
    border: 1px solid #166534;
    background: #020617;
    color: #f5f5f5;
}

.field-group input:focus,
.field-group select:focus {
    outline: 2px solid #22c55e;
    outline-offset: 1px;
}

/* Horizontal row layout for multiple fields */
.field-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-top: 0.75rem;
}

.field-row .field-group {
    flex: 1;
    margin-bottom: 0;
}

/* Responsive stacking for narrow screens */
@media (max-width: 600px) {
    .field-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Base button styling shared by primary and secondary actions */
.primary-button,
.secondary-button {
    border-radius: 999px;
    border: none;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.1s ease;
    user-select: none;
}

/* Primary action button styling */
.primary-button {
    background: #22c55e;
    color: #fefce8;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.45);
}

.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.primary-button:focus-visible,
.secondary-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Secondary action button styling */
.secondary-button {
    background: transparent;
    color: #fecaca;
    border: 1px solid #b91c1c;
}

.primary-button:disabled,
.secondary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Grid layout for status information */
.status-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1.25rem;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Responsive layout for status summary on small screens */
@media (max-width: 600px) {
    .status-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Row layout for individual status items */
.status-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.status-row span:first-child {
    color: #bbf7d0;
}

/* Shared styling for tables */
.score-table,
.turns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.score-table th,
.score-table td,
.turns-table th,
.turns-table td {
    padding: 0.3rem 0.4rem;
    text-align: left;
}

/* Header row styling for tables */
.score-table thead th,
.turns-table thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #14532d;
    color: #bbf7d0;
}

/* Alternating row background for readability */
.score-table tbody tr:nth-child(even),
.turns-table tbody tr:nth-child(even) {
    background: rgba(190, 18, 60, 0.15);
}

.score-table tbody td,
.turns-table tbody td {
    border-bottom: 1px solid #14532d;
}

.score-table tbody tr,
.turns-table tbody tr {
    transition: background-color 140ms ease-out, transform 80ms ease-out;
}

/* Hover effect for table rows */
.score-table tbody tr:hover,
.turns-table tbody tr:hover {
    transform: translateY(-1px);
    background-color: rgba(34, 197, 94, 0.12);
}

/* Scrollable container for turn history */
.table-wrapper {
    max-height: 260px;
    overflow: auto;
    margin-top: var(--space-2);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Keep table headers visible while scrolling in the history area */
.turns-table thead th,
.score-table thead th {
    position: sticky;
    top: 0;
    background: #111827;
    z-index: 1;
}

.turn-form {
    margin-top: 0.3rem;
}

/* Remove default browser box and spacing around fieldsets used in forms */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

legend {
    padding: 0;
    margin: 0;
}

/* Message styling for info/warning/success feedback */
.message {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #fefce8;
}

.message--info {
    color: #bbf7d0;
}

.message--warning {
    color: #fed7aa;
}

.message--success {
    color: #bef264;
}

/* Footer styling and layout */
.app-footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.8rem;
    color: #e5e7eb;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #020617;
}

/* Fade-in animation for card components */
@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect user accessibility preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
    .card {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }

    .score-table tbody tr,
    .turns-table tbody tr {
        transition: none;
        transform: none;
    }

    .primary-button,
    .secondary-button {
        transition: none;
    }
}

/* Accessibility helper class for screen-reader-only text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}