@import url("tokens.css");

/*
 * The admin look for a Thymeleaf page: the base elements, the chrome of templates/patephone/layout.html and the theme
 * switch, every colour, radius, shadow and font a variable of tokens.css, never a literal here. An application's own
 * screens are its own stylesheet, loaded after this one and written over the same tokens.
 */

/* 1. Base */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 var(--font);
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -.01em;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 var(--space);
}

h2 {
    font-size: 1.125rem;
    margin: 0 0 8px;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.muted {
    color: var(--muted);
}

code, pre, kbd, samp {
    font-family: var(--mono);
    font-size: .92em;
    background: var(--surface-2);
    border-radius: 4px;
}

code {
    padding: 1px 4px;
}

pre {
    padding: 10px 12px;
    overflow-x: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--space) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

th, td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

td.num, th.num {
    text-align: right;
}

input, select, textarea, button {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 7px 10px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

input[type="checkbox"], input[type="radio"] {
    padding: 0;
    accent-color: var(--accent);
}

button {
    appearance: none;
    cursor: pointer;
    font-weight: 600;
    padding: 7px 12px;
}

button:disabled {
    cursor: default;
    opacity: .5;
}

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* the warning colour as text and border: --bad is a light pink in the dark set, unreadable under white text */
button.danger {
    color: var(--bad);
    border-color: var(--bad);
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space);
    min-width: 0;
    overflow-x: auto;
}

.grid {
    display: grid;
    gap: 14px;
}

.grid + .grid {
    margin-top: 14px;
}

.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.notice {
    border-left: 4px solid var(--line);
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: 10px 14px;
    margin: 0 0 var(--space);
}

.notice.good {
    border-left-color: var(--good);
    color: var(--good);
}

.notice.bad {
    border-left-color: var(--bad);
    color: var(--bad);
}

.notice.warn {
    border-left-color: var(--warn);
    color: var(--warn);
}

.empty {
    color: var(--muted);
    text-align: center;
    font-style: italic;
    padding: var(--space);
}

/* htmx shows this while a request is in flight and hides it the rest of the time */
.htmx-indicator {
    opacity: 0;
    transition: opacity 120ms;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* 2. Chrome: layout.html's header, the page's main and footer */
header.admin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space);
    padding: 10px var(--space);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

header.admin .brand {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
}

header.admin nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

header.admin nav a {
    color: var(--muted);
    font-weight: 600;
}

header.admin nav a[aria-current="page"] {
    color: var(--accent);
}

header.admin .who {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
}

header.admin .who form {
    margin: 0;
}

main.admin {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space);
}

footer.admin {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px var(--space) var(--space);
    color: var(--muted);
    font-size: 12px;
}

/* 3. Theme switch: the ◐ admin.js flips, as the dashboard has it */
#theme {
    padding: 6px 10px;
}

/* the dashboard's breakpoint, last: a media query adds no specificity, so placed earlier it would lose to .two */
@media (max-width: 640px) {
    .two {
        grid-template-columns: minmax(0, 1fr);
    }

    main.admin {
        padding: 12px;
    }
}