/* Phone-first: residents open this on their own phone, so everything is a single
   column with touch-sized rows. No framework, no build step. */
:root {
    --free: #157347;
    --busy: #9a6700;
    --repair: #b42318;
    --line: #d8dbe0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 1rem;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1b1f24;
    max-width: 34rem;
    margin-inline: auto;
}

h1 { font-size: 1.25rem; margin: 0 0 .25rem; }

.summary { margin: 0 0 1rem; color: #57606a; }

/* Cycle cards (docs/UI.md §2-3). The chip's colour pairs are dark text on a light tint,
   each well above 4.5:1 contrast. */
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.card { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.card.mine { border: 2px solid #1f5fa8; }
.card-head, .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.card-foot { margin-top: .5rem; min-height: 44px; }
.card-note { color: #57606a; font-size: .9rem; }
.issues { margin: .4rem 0 0; padding: .3rem .6rem; border-radius: 6px; background: #fff8e5; color: var(--busy); font-size: .9rem; }

.label { font-weight: 600; font-size: 1.1rem; }
a.label { color: inherit; }

/* Cycle detail: the 8 parts (ADR 0005). Condition in words and symbol, never colour alone. */
.part-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.part-tile { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.part-name { font-weight: 600; }
.part-name small { color: var(--repair); font-weight: 400; font-size: .75rem; }
.part-condition { font-size: .9rem; }
.part-OK .part-condition { color: var(--free); }
.part-REPORTED { background: #fff8e5; } .part-REPORTED .part-condition { color: var(--busy); }
.part-BROKEN { background: #fdecea; } .part-BROKEN .part-condition { color: var(--repair); font-weight: 600; }
.part-note { font-size: .85rem; color: #57606a; }

.chip { padding: .2rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.chip-AVAILABLE { color: var(--free); background: #e6f4ea; }
.chip-BOOKED { color: var(--busy); background: #fff8e5; }
.chip-ISSUED { color: #1f5fa8; background: #e8f0fb; }
.chip-UNDER_REPAIR { color: var(--repair); background: #fdecea; }
/* History tab: a rental's stage rather than a cycle's state. */
.chip-Booked { color: var(--busy); background: #fff8e5; }
.chip-Out { color: #1f5fa8; background: #e8f0fb; }
.chip-Returned { color: #57606a; background: #eef0f2; }
.late { color: var(--repair); font-size: .9rem; font-weight: 600; }

.note, .empty { color: #57606a; font-size: .9rem; }

.login form { display: flex; flex-direction: column; gap: .4rem; }
.login label { font-size: .9rem; color: #57606a; margin-top: .6rem; }

input, textarea {
    padding: .7rem;
    font-size: 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
}

button {
    margin-top: 1rem;
    padding: .75rem 1rem;
    font-size: 1rem;
    border: 0;
    border-radius: 6px;
    background: #1b1f24;
    color: #fff;
}

/* Messages: a tinted bar at the top of the content, so a result is hard to miss. */
.error, .notice { padding: .65rem .85rem; border-radius: 8px; }
.error { color: var(--repair); background: #fdecea; }
.notice { color: var(--free); background: #e6f4ea; }

a.book {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 1.1rem;
    border-radius: 6px;
    background: #1b1f24;
    color: #fff;
    text-decoration: none;
}

.stack form { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.5rem; }
.stack label { font-size: .9rem; color: #57606a; margin-top: .6rem; }
.stack form p { margin: 0; }
textarea { font-family: inherit; resize: vertical; }
.stack form.skip { margin-top: -1rem; }
.skip button { background: none; color: #57606a; margin-top: 0; }
.fallback { padding-top: 1rem; border-top: 1px solid var(--line); }

.banner { padding: .75rem; border: 1px solid var(--line); border-radius: 6px; }
.guard { padding: .75rem; border-left: 4px solid var(--busy); background: #fff8e5; }

.report { width: 100%; border-collapse: collapse; }
.report th, .report td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.report .num { text-align: right; }
.report tfoot th, .report tfoot td { font-weight: 600; border-bottom: 0; }


/* Return form: the guard's parts checklist, two columns of thumb-sized rows. */
.parts { margin: .5rem 0 0; padding: .75rem; border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; }
.parts legend { padding: 0 .25rem; font-size: .9rem; color: #57606a; }
.parts .part { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: #1b1f24; font-size: 1rem; margin: 0; }
.part input { width: 1.25rem; height: 1.25rem; margin: 0; }
.part small { color: var(--repair); font-size: .75rem; }

/* Report tab sub-tabs: Usage and Maintenance. */
.subtabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.subtab { padding: .45rem .9rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); color: #57606a; text-decoration: none; }
.subtab.active { background: #1b1f24; border-color: #1b1f24; color: #fff; }

/* Maintenance list: the reporter's own words, quoted under each issue. */
.flags { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.flag { padding-top: .6rem; border-top: 1px solid var(--line); }
.flag-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: #57606a; }
.flag-issue { font-weight: 600; color: #1b1f24; }
.flag-words { margin: .3rem 0 0; padding-left: .75rem; border-left: 3px solid var(--line); }
.repair { margin: .4rem 0 0; }
.repair button { margin: 0; padding: .45rem .9rem; min-height: 44px; font-size: .9rem; }

/* Guard confirmation panel: read at arm's length, so large type, white on dark green
   (about 6:1 contrast). */
.confirmed { margin-bottom: 1rem; padding: 1.25rem 1rem; border-radius: 12px; background: #157347; color: #fff; text-align: center; }
.confirmed p { margin: 0; }
.confirmed-title { font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.confirmed-cycle { margin: .25rem 0; font-size: 2.6rem; font-weight: 800; line-height: 1.2; }

/* Top bar: hostel name and log out, on every page after login. */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; font-weight: 600; }
.topbar form { margin: 0; }
.topbar button { margin: 0; padding: .4rem 0; background: none; color: #57606a; font-weight: 400; }

/* Tab bar (docs/UI.md §1). On a phone it sits at the bottom of the screen, where the
   thumb reaches it; body padding keeps the last row of a page from hiding under it. */
body { padding-bottom: 5rem; }
.tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.tab {
    flex: 1;
    min-height: 44px;
    padding: .8rem .25rem;
    text-align: center;
    color: #57606a;
    text-decoration: none;
    border-top: 3px solid transparent;
}
.tab.active { color: #1b1f24; font-weight: 600; border-top-color: #1b1f24; }
.tab-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-left: .3rem;
    border-radius: 50%;
    background: var(--free);
    vertical-align: middle;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* On a wider screen the tabs move to the top, under the top bar. */
@media (min-width: 720px) {
    body { padding-bottom: 1rem; }
    .tabs { position: static; margin-bottom: 1rem; border-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 0; }
    .tab { border-top: 0; border-bottom: 3px solid transparent; }
    .tab.active { border-bottom-color: #1b1f24; }
}