/* WhoTookIt theme: Bootstrap 5.3 (lib/bootstrap) restyled as a phone app.
   Brand green #2E8B57 (the logo, app icon and splash colour), soft gray background, rounded cards,
   44px touch targets, a top app bar and a bottom tab bar (Components/Layout/MainLayout.razor).
   Dark mode follows the phone unless pinned on the Groups page (index.html sets data-bs-theme). */

:root,
[data-bs-theme=light] {
    --brand: #2E8B57;
    --brand-rgb: 46, 139, 87;
    --brand-dark: #1E6B41;
    --brand-fill: #2E8B57; /* filled buttons */
    --surface: #ffffff;
    --app-bg: #F4F6F5;
    --hairline: rgba(0, 0, 0, 0.08);
    --tab-bar-height: 64px;

    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-text-emphasis: #1A5C37;
    --bs-primary-bg-subtle: #E3F2E9;
    --bs-primary-border-subtle: #B3DCC4;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: var(--brand-dark);
    --bs-link-hover-color-rgb: 30, 107, 65;
    --bs-body-bg: var(--app-bg);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-color: var(--hairline);
    --bs-focus-ring-color: rgba(var(--brand-rgb), 0.25);
    --bs-success: #1E9E5A;
    --bs-success-rgb: 30, 158, 90;
    --bs-warning: #E8A317;
    --bs-warning-rgb: 232, 163, 23;
    --bs-danger: #D93B3B;
    --bs-danger-rgb: 217, 59, 59;
}

[data-bs-theme=dark] {
    --brand: #4FBF84;
    --brand-rgb: 79, 191, 132;
    --brand-dark: #1E6B41;
    --brand-fill: #267A4B; /* deeper than --brand so white text stays readable */
    --surface: #1C201E;
    --app-bg: #111413;
    --hairline: rgba(255, 255, 255, 0.09);

    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-primary-text-emphasis: #9BE0BA;
    --bs-primary-bg-subtle: #1A3326;
    --bs-primary-border-subtle: #2E5E43;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: var(--brand-rgb);
    --bs-link-hover-color: #7CD3A5;
    --bs-body-bg: var(--app-bg);
    --bs-border-color: var(--hairline);
    --bs-tertiary-bg: #232826;
    --bs-light-rgb: 35, 40, 38;
}

html, body {
    background: var(--app-bg);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

a {
    text-decoration: none;
}

h1:focus {
    outline: none;
}

/* ---- Page structure (every page's outer element) ---- */

.page {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1rem calc(var(--tab-bar-height) + env(safe-area-inset-bottom) + 1.5rem);
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.25rem 0 1rem;
}

.section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin: 1.25rem 0.25rem 0.5rem;
}

.empty-state {
    text-align: center;
    color: var(--bs-secondary-color);
    padding: 2.5rem 1rem;
}

    .empty-state .bi {
        display: block;
        font-size: 2.75rem;
        opacity: 0.5;
        margin-bottom: 0.5rem;
    }

.loading {
    display: flex;
    justify-content: center;
    padding: 2.5rem 0;
}

.tap-target {
    min-height: 44px;
}

/* ---- Cards and lists: white rounded surfaces on the gray page ---- */

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-width: 0;
    --bs-card-border-radius: 1rem;
    --bs-card-inner-border-radius: 1rem;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 1rem;
}

.card-header {
    font-weight: 600;
    border-bottom: 1px solid var(--hairline);
}

.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-border-color: var(--hairline);
    --bs-list-group-border-radius: 1rem;
    --bs-list-group-item-padding-y: 0.85rem;
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-action-color: var(--bs-body-color);
    --bs-list-group-action-hover-color: var(--bs-body-color);
    --bs-list-group-action-hover-bg: rgba(var(--brand-rgb), 0.05);
    --bs-list-group-action-active-bg: rgba(var(--brand-rgb), 0.1);
    --bs-list-group-active-bg: var(--brand);
    --bs-list-group-active-border-color: var(--brand);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
    border-radius: 1rem;
    margin-bottom: 1rem;
}

    .list-group .list-group-item {
        border-left: 0;
        border-right: 0;
    }

    .list-group .list-group-item:first-child {
        border-top: 0;
    }

    .list-group .list-group-item:last-child {
        border-bottom: 0;
    }

.list-group-flush {
    box-shadow: none;
    margin-bottom: 0;
}

/* A row that opens something gets a chevron (add .list-chevron to the list-group). */
.list-chevron .list-group-item-action {
    position: relative;
    padding-right: 2.25rem;
}

    .list-chevron .list-group-item-action::after {
        content: "\F285"; /* bi-chevron-right */
        font-family: "bootstrap-icons";
        position: absolute;
        right: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bs-secondary-color);
        opacity: 0.6;
    }

/* ---- Buttons: 44px touch targets, brand colour ---- */

.btn {
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-sm {
    --bs-btn-padding-y: 0.35rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-border-radius: 0.6rem;
    min-height: 36px;
}

.btn-lg {
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-border-radius: 50rem;
    min-height: 52px;
}

.btn-link {
    --bs-btn-font-weight: 500;
    text-decoration: none;
}

.btn-primary {
    --bs-btn-bg: var(--brand-fill);
    --bs-btn-border-color: var(--brand-fill);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand-fill);
    --bs-btn-disabled-border-color: var(--brand-fill);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-disabled-color: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
    --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--hairline);
    --bs-btn-bg: var(--surface);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: rgba(var(--brand-rgb), 0.06);
    --bs-btn-hover-border-color: var(--hairline);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: rgba(var(--brand-rgb), 0.12);
    --bs-btn-active-border-color: var(--hairline);
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
}

/* ---- Forms ---- */

.form-control,
.form-select {
    min-height: 44px;
    background-color: var(--surface);
    border-color: var(--hairline);
    border-radius: 0.75rem;
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    border-radius: 0.6rem;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2);
    }

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.2);
}

.form-label,
label.fw-bold {
    font-size: 0.85rem;
    font-weight: 600 !important;
    color: var(--bs-secondary-color);
    margin-bottom: 0.3rem;
}

/* ---- Badges, alerts ---- */

.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 0.6rem;
    --bs-badge-padding-y: 0.35rem;
    border-radius: 50rem;
}

/* Status pills: <span class="pill pill-success">Available</span> */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 50rem;
    white-space: nowrap;
}

.pill-success { color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); }
.pill-warning { color: var(--bs-warning-text-emphasis); background: var(--bs-warning-bg-subtle); }
.pill-danger { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); }
.pill-muted { color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); }
.pill-brand { color: var(--bs-primary-text-emphasis); background: var(--bs-primary-bg-subtle); }

.alert {
    border: 0;
    border-radius: 1rem;
}

/* Item thumbnails in lists */
.thumb {
    width: 48px;
    height: 48px;
    border-radius: 0.6rem;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
}

/* Settings -> Notifications: a label column and Email / Text switch columns */
.notify-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 1.1rem;
    row-gap: 0.55rem;
    align-items: center;
}

    .notify-grid .notify-head {
        font-weight: 600;
        color: var(--bs-secondary-color);
        text-align: center;
    }

    .notify-grid .form-switch {
        display: flex;
        justify-content: center;
        padding-left: 2.5em;
        min-height: 0;
    }

/* A person's initials in a circle (Settings' account card) */
.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* Big icon tiles (Scan page options, Home stats) */
.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem;
    background: var(--surface);
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.04);
    color: var(--bs-body-color);
    width: 100%;
    min-height: 88px;
    text-align: center;
}

    .tile .bi {
        font-size: 1.6rem;
        color: var(--brand);
    }

    .tile:active {
        background: rgba(var(--brand-rgb), 0.08);
    }

    .tile:disabled {
        opacity: 0.55;
    }

.tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.tile-label {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* ---- Brand screens (signed out, choose a group) ---- */

.brand-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
    max-width: 460px;
    margin: 0 auto;
}

.brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3BA56B, #1E6B41);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 24px rgba(46, 139, 87, 0.35);
}

/* The logo (wwwroot/logo.svg) on the sign-in screen and in the app bar. */
.brand-logo {
    display: block;
    margin: 0 auto 1rem;
    border-radius: 22%;   /* the logo's own corners are 22% of its size, so the glow follows them at any size */
    box-shadow: 0 8px 24px rgba(46, 139, 87, 0.35);
}

/* The sign-in logo alternates with its mirror image (Logo.razor, Alternating): both images are stacked in this wrapper.
   The original stays fully opaque underneath and the mirror image fades in and out on top, so the green tile never dips
   (two half-transparent tiles would let the page show through and flash). The wrapper takes its size from --logo-size;
   the short-screen rules below (later in the file, same specificity) override it. */
.logo-pair {
    position: relative;
    width: var(--logo-size);
    height: var(--logo-size);
}

    .logo-pair img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.3s ease;
    }

    .logo-pair img + img {
        opacity: 0;
    }

    .logo-pair.is-mirrored img + img {
        opacity: 1;
    }

/* Short screens (a phone with the browser's address bar showing, a small phone): a smaller logo keeps the Sign in
   button on screen. MainLayout draws it at 128px. */
@media (max-height: 700px) {
    .brand-logo {
        width: 80px;
        height: 80px;
    }
}

@media (max-height: 560px) {
    .brand-logo {
        width: 64px;
        height: 64px;
    }
}

/* Sign-in walk-through of a loan (Components/Shared/BorrowDemo.razor). */
.demo {
    margin-bottom: 1.25rem;
    overflow: hidden;
    text-align: left;
}

.demo-track {
    display: flex;
    transition: transform 0.4s ease;
}

.demo-step {
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 2px;
}

.demo-head {
    font-weight: 700;
    color: var(--bs-primary-text-emphasis);
}

.demo-line {
    margin: 0.15rem 0 0.75rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.demo-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.demo-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--brand);
    background: var(--bs-primary-bg-subtle);
}

.demo-bubble {
    padding: 0.75rem 1rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    background: var(--surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.demo-dots {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

    .demo-dots button {
        width: 44px;
        height: 44px;
        border: 0;
        padding: 0;
        background: transparent;
        position: relative;
    }

        .demo-dots button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            margin: -4px 0 0 -4px;
            border-radius: 50%;
            background: var(--bs-secondary-color);
            opacity: 0.4;
        }

        .demo-dots button.active::after {
            background: var(--brand);
            opacity: 1;
        }

@media (prefers-reduced-motion: reduce) {
    .demo-track,
    .logo-pair img {
        transition: none;
    }
}

/* The item screen's evaluation (Claude's write-up keeps its line breaks; long links wrap). */
.eval-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
}

.eval-text {
    white-space: pre-wrap;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.app-bar-logo {
    vertical-align: -6px;
    margin-right: 4px;
    border-radius: 6px;
}

/* ---- Blazor's own error UI ---- */

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom)) 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 1rem;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* Segmented control (Loans: Out now / Overdue / History) */
.segmented {
    display: flex;
    padding: 3px;
    gap: 3px;
    border-radius: 0.85rem;
    background: rgba(120, 120, 128, 0.14);
}

    .segmented > button {
        flex: 1;
        min-height: 38px;
        border: 0;
        border-radius: 0.7rem;
        background: transparent;
        color: var(--bs-body-color);
        font-weight: 600;
        font-size: 0.9rem;
    }

        .segmented > button.active {
            background: var(--surface);
            color: var(--brand);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        }

/* Full-screen photo viewer (item details): pinch/double-tap zoom in photo-zoom.js; X or the backdrop closes it. */
.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.photo-viewer-backdrop {
    position: absolute;
    inset: 0;
}
.photo-viewer img {
    position: relative;   /* above the backdrop */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    touch-action: none;
    transition: transform .2s;
}
.photo-viewer-close {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 12px);
    right: 12px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
}