/* MeterMaster – app.css */

/* ── Typography & base ─────────────────────────────────── */
body {
    font-size: 1rem;
}

/* Larger tap targets on touch devices */
@media (max-width: 767px) {
    .btn { min-height: 48px; }
    .form-control, .form-select { min-height: 48px; font-size: 1rem; }
    .nav-link { padding: 0.75rem 1rem; }
}

/* ── Navbar ────────────────────────────────────────────── */
.navbar-brand {
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

/* ── Scan page ─────────────────────────────────────────── */
#scanner-container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

#reader {
    width: 100%;
}

#scan-result {
    display: none;
}

.scan-result-match {
    border-left: 4px solid #198754;
}

.scan-result-nomatch {
    border-left: 4px solid #fd7e14;
}

/* ── Material type badges ──────────────────────────────── */
.material-copper   { background-color: #b87333; color: #fff; }
.material-steel    { background-color: #6c757d; color: #fff; }
.material-aluminium{ background-color: #adb5bd; color: #212529; }
.material-plastic  { background-color: #0d6efd; color: #fff; }
.material-other    { background-color: #6f42c1; color: #fff; }

/* ── Guide steps ───────────────────────────────────────── */
.guide-step {
    border-left: 3px solid #0d6efd;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.guide-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

/* ── Admin tables ──────────────────────────────────────── */
.table th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
}

/* ── Model card ────────────────────────────────────────── */
.model-card:hover {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 2px rgba(13,110,253,.15);
}

.model-card {
    transition: border-color .15s, box-shadow .15s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* ── Disposal time indicator ───────────────────────────── */
.disposal-badge {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0d6efd;
}

/* ── Utility ───────────────────────────────────────────── */
.cursor-grab { cursor: grab; }
.opacity-50  { opacity: 0.5; }