/* Tropical Sunset Surge palette */
:root {
    --pink: #ff6b9b;
    --pink-light: #ff9fba;
    --teal: #2ce7d4;
    --teal-dark: #00b3aa;
    --deep: #013a43;
    --deep-light: #024d59;
    --surface: #f5f9fa;
    --on-deep: #ffffff;
    --on-surface: #013a43;
    --muted: #5a7a80;

    --pico-container-max-width: 640px;
    --pico-font-size: 87.5%;
    --pico-spacing: 0.5rem;
    --pico-form-element-spacing-vertical: 0.25rem;
    --pico-form-element-spacing-horizontal: 0.5rem;

    --pico-primary: var(--pink);
    --pico-primary-hover: var(--pink-light);
    --pico-primary-focus: rgba(255, 107, 155, 0.25);
    --pico-primary-inverse: var(--on-deep);

    --pico-secondary: var(--teal-dark);
    --pico-secondary-hover: var(--teal);
    --pico-secondary-focus: rgba(44, 231, 212, 0.25);
    --pico-secondary-inverse: var(--on-deep);

    --pico-color: var(--on-surface);
    --pico-muted-color: var(--muted);
    --pico-background-color: var(--surface);
}

/* Header bar */
body > header {
    background: var(--deep);
    padding-bottom: 0;
    margin-bottom: 0;
}

body > header nav {
    --pico-color: var(--on-deep);
}

body > header a,
body > header a:visited {
    color: var(--on-deep);
}

body > header a:hover {
    color: var(--teal);
}

body > header strong {
    color: var(--pink);
}

body > main {
    padding-top: 0.75rem;
}

/* Table styling */
thead {
    background: var(--deep);
    color: var(--on-deep);
}

thead th {
    color: var(--on-deep);
    border-color: var(--deep-light);
}

tr.dimmed {
    opacity: 0.45;
}

tfoot {
    background: var(--surface);
    border-top: 2px solid var(--teal-dark);
}

/* Flex positive/negative coloring */
.flex-positive {
    color: var(--teal-dark);
}

.flex-negative {
    color: var(--pink);
}

/* Inputs */
time-input input {
    width: 7em;
}

td, th {
    padding: 0.25rem 0.5rem;
}

td form {
    margin: 0;
}

td form input {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

figure {
    margin: 0.5rem 0;
}

/* Week nav */
week-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

week-nav a[role="button"] {
    padding: 0.25rem 0.5rem;
    margin: 0;
    border-color: var(--teal-dark);
    color: var(--teal-dark);
}

week-nav a[role="button"]:hover {
    background: var(--teal-dark);
    color: var(--on-deep);
    border-color: var(--teal-dark);
}

.week-nav-center {
    flex: 1;
    text-align: center;
}

.week-nav-center h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--deep);
}

.week-nav-center small {
    color: var(--muted);
    font-size: 0.8rem;
}

p {
    margin: 0.25rem 0;
}

/* Warning banner */
article {
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
}

article.warning {
    background: #fff3e0;
    border-left: 3px solid var(--pink);
}

/* Buttons */
button, [type="submit"] {
    --pico-border-radius: 4px;
}

button.outline, a.outline[role="button"] {
    --pico-primary: var(--teal-dark);
    --pico-primary-hover: var(--teal);
}

/* Row save button */
.save-btn {
    padding: 0.15rem 0.5rem;
    margin: 0;
    font-size: 0.8rem;
}

/* Lock/unlock buttons */
form button.secondary {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
}

/* Cards / settings sections */
hr {
    border-color: var(--teal);
    opacity: 0.3;
}

h2 {
    color: var(--deep);
}

/* Links */
a {
    color: var(--teal-dark);
}

a:hover {
    color: var(--teal);
}