/*
 * Staff dashboard.
 *
 * Two jobs:
 *
 * 1. The dashboard's own chrome — header, navigation, home tiles.
 * 2. The vocabulary the shared screen templates use. Those templates render in
 *    wp-admin too, where `button`, `widefat`, `form-table` and `notice` come
 *    from WordPress. On the front end nothing defines them, so they are defined
 *    here — as a working-screen design rather than a copy of wp-admin
 *    (specification 29.4).
 *
 * Everything is scoped under `.c2sr-dashboard`, so a page that merely sits on
 * the same site is untouched, and a theme's own `.button` keeps its meaning
 * outside this block.
 *
 * No rule here is the only way to reach anything: `:hover` and `:focus` change
 * appearance, never availability, because iPad Safari has no hover
 * (specification 29.10).
 */

.c2sr-dashboard {
    --c2sr-ink: #1c2430;
    --c2sr-muted: #5b6672;
    --c2sr-line: #d6dbe1;
    --c2sr-surface: #fff;
    --c2sr-page: #f4f6f8;
    --c2sr-accent: #1f5fa9;
    --c2sr-accent-ink: #fff;
    --c2sr-warn: #a8600a;
    --c2sr-danger: #a3221f;
    --c2sr-radius: 10px;
    /* Comfortably above the 44px iOS guideline once padding is added. */
    --c2sr-tap: 44px;

    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--c2sr-ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.c2sr-dashboard *,
.c2sr-dashboard *::before,
.c2sr-dashboard *::after {
    box-sizing: inherit;
}

/* ---------------------------------------------------------------- header */

.c2sr-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    background: var(--c2sr-surface);
    border: 1px solid var(--c2sr-line);
    border-radius: var(--c2sr-radius) var(--c2sr-radius) 0 0;
}

.c2sr-dash-brand {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
}

.c2sr-dash-brand a {
    color: inherit;
    text-decoration: none;
}

.c2sr-dash-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-left: auto;
}

.c2sr-dash-label {
    margin-right: 4px;
    color: var(--c2sr-muted);
    font-size: .8rem;
}

.c2sr-dash-today {
    width: 100%;
    color: var(--c2sr-muted);
    font-size: .9rem;
}

.c2sr-dash-warning {
    color: var(--c2sr-warn);
    font-weight: 600;
}

.c2sr-classroom-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.c2sr-classroom-switch label {
    color: var(--c2sr-muted);
    font-size: .8rem;
}

.c2sr-dash-switch {
    min-height: var(--c2sr-tap);
    padding: 0 14px;
    background: var(--c2sr-surface);
    color: var(--c2sr-ink);
    border: 1px solid var(--c2sr-line);
    border-radius: 6px;
    font: inherit;
    cursor: pointer;
}

/* ------------------------------------------------------------ navigation */

.c2sr-nav {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--c2sr-page);
    border: 1px solid var(--c2sr-line);
    border-top: 0;
    /* Narrow screens scroll the bar rather than stacking it, so the tap
       targets keep their size. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.c2sr-nav-item {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--c2sr-tap);
    padding: 0 16px;
    border-radius: 6px;
    color: var(--c2sr-ink);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.c2sr-nav-item.is-current {
    background: var(--c2sr-accent);
    color: var(--c2sr-accent-ink);
}

.c2sr-nav-item:focus-visible {
    outline: 3px solid var(--c2sr-accent);
    outline-offset: -3px;
}

/* --------------------------------------------------------------- content */

.c2sr-content {
    padding: 16px;
    background: var(--c2sr-surface);
    border: 1px solid var(--c2sr-line);
    border-top: 0;
    border-radius: 0 0 var(--c2sr-radius) var(--c2sr-radius);
}

/* The shared screens open with wp-admin's page wrapper. */
.c2sr-dashboard .wrap {
    margin: 0;
    padding: 0;
}

.c2sr-dashboard h1 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    line-height: 1.3;
}

.c2sr-dashboard h2 {
    margin: 24px 0 8px;
    font-size: 1.15rem;
}

.c2sr-dashboard h3 {
    margin: 18px 0 6px;
    font-size: 1rem;
}

.c2sr-dashboard p {
    margin: 8px 0;
}

.c2sr-dashboard hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--c2sr-line);
}

.c2sr-dashboard .description {
    display: inline-block;
    color: var(--c2sr-muted);
    font-size: .875rem;
}

/* ----------------------------------------------------------------- forms */

.c2sr-dashboard input[type="text"],
.c2sr-dashboard input[type="search"],
.c2sr-dashboard input[type="number"],
.c2sr-dashboard input[type="date"],
.c2sr-dashboard input[type="month"],
.c2sr-dashboard input[type="email"],
.c2sr-dashboard input[type="file"],
.c2sr-dashboard select,
.c2sr-dashboard textarea {
    max-width: 100%;
    min-height: var(--c2sr-tap);
    padding: 6px 10px;
    background: var(--c2sr-surface);
    color: var(--c2sr-ink);
    border: 1px solid var(--c2sr-line);
    border-radius: 6px;
    /* 16px keeps iOS Safari from zooming the page when a field is focused. */
    font: inherit;
    font-size: 16px;
}

.c2sr-dashboard textarea {
    min-height: 5em;
}

.c2sr-dashboard .regular-text {
    width: 22em;
}

.c2sr-dashboard .large-text {
    width: 100%;
}

.c2sr-dashboard label {
    font-size: .95rem;
}

.c2sr-dashboard .form-table {
    width: 100%;
    border-collapse: collapse;
}

.c2sr-dashboard .form-table th,
.c2sr-dashboard .form-table td {
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c2sr-line);
}

.c2sr-dashboard .form-table th {
    width: 14em;
    font-weight: 600;
}

.c2sr-dashboard .submit {
    margin: 14px 0 0;
}

/* --------------------------------------------------------------- buttons */

.c2sr-dashboard .button,
.c2sr-dashboard button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--c2sr-tap);
    padding: 0 16px;
    background: var(--c2sr-surface);
    color: var(--c2sr-ink);
    border: 1px solid var(--c2sr-line);
    border-radius: 6px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.c2sr-dashboard .button-primary {
    background: var(--c2sr-accent);
    color: var(--c2sr-accent-ink);
    border-color: var(--c2sr-accent);
}

.c2sr-dashboard .button-link-delete {
    color: var(--c2sr-danger);
    border-color: currentColor;
}

.c2sr-dashboard .button:focus-visible,
.c2sr-dashboard button:focus-visible {
    outline: 3px solid var(--c2sr-accent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- tables */

.c2sr-dashboard .widefat {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--c2sr-line);
    font-size: .95rem;
}

.c2sr-dashboard .widefat th,
.c2sr-dashboard .widefat td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c2sr-line);
}

.c2sr-dashboard .widefat thead th {
    background: var(--c2sr-page);
    font-weight: 700;
}

.c2sr-dashboard .striped tbody tr:nth-child(odd) {
    background: #fafbfc;
}

.c2sr-dashboard .tablenav {
    margin: 12px 0;
}

.c2sr-dashboard .tablenav-pages a,
.c2sr-dashboard .tablenav-pages span {
    display: inline-block;
    min-width: var(--c2sr-tap);
    min-height: var(--c2sr-tap);
    padding: 10px;
    text-align: center;
}

/* --------------------------------------------------------------- notices */

.c2sr-dashboard .notice {
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--c2sr-page);
    border-left: 4px solid var(--c2sr-muted);
    border-radius: 4px;
}

.c2sr-dashboard .notice p {
    margin: 4px 0;
}

.c2sr-dashboard .notice-success {
    border-left-color: #2e7d32;
}

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

.c2sr-dashboard .notice-error {
    border-left-color: var(--c2sr-danger);
}

/* ------------------------------------------------------------------ home */

.c2sr-home-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0 0 16px;
}

.c2sr-home-fact {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.c2sr-home-fact dt {
    color: var(--c2sr-muted);
    font-size: .85rem;
}

.c2sr-home-fact dd {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.c2sr-home-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.c2sr-tile {
    display: block;
    min-height: 88px;
    padding: 16px;
    background: var(--c2sr-surface);
    color: var(--c2sr-ink);
    border: 1px solid var(--c2sr-line);
    border-radius: var(--c2sr-radius);
    text-decoration: none;
}

.c2sr-tile-primary {
    background: var(--c2sr-accent);
    color: var(--c2sr-accent-ink);
    border-color: var(--c2sr-accent);
}

.c2sr-tile-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
}

.c2sr-tile-note {
    display: block;
    margin-top: 4px;
    font-size: .875rem;
    opacity: .85;
}

.c2sr-tile:focus-visible {
    outline: 3px solid var(--c2sr-accent);
    outline-offset: 2px;
}

.c2sr-home-metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 20px;
}

/*
 * The month's figures (specification 30.16). Quieter than the tiles above
 * them: staff come to this screen to start a job, and the numbers are there to
 * be glanced at on the way past, not to compete for the first tap.
 */
.c2sr-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--c2sr-surface);
    border: 1px solid var(--c2sr-line);
    border-radius: var(--c2sr-radius);
}

.c2sr-metric-title {
    color: var(--c2sr-muted);
    font-size: 13px;
}

.c2sr-metric-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.c2sr-metric-note {
    color: var(--c2sr-muted);
    font-size: 12px;
}

.c2sr-home-metrics-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    margin: 24px 0 0;
}

.c2sr-home-metrics-head h2 {
    margin: 0;
    font-size: 18px;
}

/* ------------------------------------------------------------------ gate */

.c2sr-gate {
    max-width: 34em;
    margin: 24px auto;
    padding: 24px;
    background: var(--c2sr-surface);
    border: 1px solid var(--c2sr-line);
    border-radius: var(--c2sr-radius);
    text-align: center;
}

.c2sr-gate-action {
    display: inline-flex;
    align-items: center;
    min-height: var(--c2sr-tap);
    padding: 0 20px;
    background: var(--c2sr-accent);
    color: var(--c2sr-accent-ink);
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

/* ------------------------------------------------------------ responsive */

/* iPhone and iPad portrait: one column, and the wide screens scroll
   horizontally inside their own panel rather than the page. */
@media (max-width: 782px) {
    /*
     * Block layout throughout, so the table cannot size itself to its
     * min-content width. Stacking the cells alone was not enough: the table
     * element still laid out at the width of its widest unbreakable content —
     * a `<select>` is as wide as its longest option — and pushed the page out
     * with it (37.7).
     */
    .c2sr-dashboard .form-table,
    .c2sr-dashboard .form-table tbody,
    .c2sr-dashboard .form-table tr {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .c2sr-dashboard .form-table th,
    .c2sr-dashboard .form-table td {
        display: block;
        width: auto;
        max-width: 100%;
        border-bottom: 0;
    }

    /*
     * A select's intrinsic width is its longest option, and `max-width` does
     * not reduce that. An explicit width does, and the option text truncates
     * rather than the page widening.
     */
    .c2sr-dashboard select,
    .c2sr-dashboard input[type="text"],
    .c2sr-dashboard input[type="search"],
    .c2sr-dashboard input[type="email"] {
        width: 100%;
    }

    .c2sr-dashboard .form-table td {
        padding-top: 0;
        border-bottom: 1px solid var(--c2sr-line);
    }

    .c2sr-dashboard .regular-text {
        width: 100%;
    }

    .c2sr-dash-context {
        width: 100%;
        margin-left: 0;
    }
}

/* iPad landscape and desktop: use the width. */
@media (min-width: 783px) {
    .c2sr-home-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .c2sr-home-tiles {
        grid-template-columns: repeat(4, 1fr);
    }

    .c2sr-tile-primary {
        grid-column: span 2;
    }
}

/* ---------------------------------------------------- 確認対象 on the home */

/*
 * The follow-up table renders inside the dashboard as well as in wp-admin, and
 * analytics.css is only loaded on the 集計・分析 screen. These are the few rules
 * the compact home version needs on its own.
 */
.c2sr-dashboard .c2sr-followup {
    margin-top: 12px;
}

/* `.c2sr-scroll` itself lives in tables.css, which both surfaces load. */

.c2sr-dashboard .c2sr-followup-code {
    display: block;
    color: var(--c2sr-muted);
    font-size: 12px;
}

.c2sr-dashboard .c2sr-followup-reasons {
    white-space: normal;
    min-width: 16em;
}

.c2sr-dashboard .c2sr-reason {
    display: inline-block;
    margin: 1px 6px 1px 0;
    padding: 1px 8px;
    border: 1px solid var(--c2sr-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.c2sr-dashboard .c2sr-reason-detail {
    display: block;
    margin-bottom: 4px;
    color: var(--c2sr-muted);
    font-size: 12px;
}

.c2sr-dashboard .c2sr-followup-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--c2sr-tap);
    margin-right: 12px;
}

.c2sr-dashboard .c2sr-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}