/* erp.svobol.com — base styles */
/* Mobile-first: base rules target small/touch screens; desktop is the
   enhancement (min-width media query near the bottom), not the other way
   around. See docs/architecture/mobile-operations-platform.md REQ-001. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    /* Prevent the classic mobile-browser auto-zoom-on-focus by keeping form
       text at least 16px (done per-field below too, this is a safety net). */
    -webkit-text-size-adjust: 100%;
    /* "manipulation" disables the double-tap-to-zoom gesture (the reported
       glitch: double-tapping anywhere zoomed the page) while still allowing
       pinch-to-zoom and normal panning/scrolling -- unlike
       `user-scalable=no` in the viewport meta tag, this doesn't break
       pinch-zoom accessibility (WCAG 1.4.4). */
    touch-action: manipulation;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
    /* Respect notches/home-indicator on iOS PWAs/full-screen Safari. */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
    touch-action: manipulation;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem;
    width: 100%;
}

nav {
    background: #1a1a2e;
    color: #fff;
    padding: 0.75rem 1rem;
    padding-top: calc(0.75rem + env(safe-area-inset-top));
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

nav a { color: #fff; text-decoration: none; margin-left: 1rem; }
nav a:hover { text-decoration: underline; }

.card {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1rem;
    margin: 1rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
}

h1 { font-size: clamp(1.25rem, 5vw, 1.75rem); margin-bottom: 0.75rem; line-height: 1.3; }
h2 { font-size: clamp(1.05rem, 4vw, 1.3rem); margin: 1.25rem 0 0.5rem; }
h3 { margin-bottom: 0.5rem; }

p { margin-bottom: 0.5rem; word-break: break-word; }

/* --- Forms: stacked, full-width, large touch targets ------------------- */

form { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.75rem; }

label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #444;
}

input, select, textarea {
    /* 16px minimum stops iOS Safari from auto-zooming the page on focus. */
    font-size: 16px;
    font-family: inherit;
    padding: 0.7rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    min-height: 44px; /* touch target guideline */
    background: #fff;
    color: #222;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid #1a1a2e;
    outline-offset: 1px;
}

button, .btn {
    display: block;
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    min-height: 44px;
    background: #1a1a2e;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

button:hover, .btn:hover { background: #2d2d4e; }
button:active, .btn:active { background: #12121f; }

/* A form whose only job is a single inline action (e.g. the logout button
   embedded in a sentence) should not force full-width block layout. */
form.inline { display: inline; }
form.inline button { display: inline-block; width: auto; min-height: auto; padding: 0.3rem 0.75rem; font-size: 0.85rem; }

/* --- Tables: horizontal scroll on narrow screens, never page overflow --- */

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0;
    /* Visible fade on the right edge signals "more columns this way" instead
       of the table just looking abruptly cut off on narrow screens. */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
        linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)),
        linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #eee; white-space: nowrap; }
th { background: #fafafa; font-weight: 600; }

/* --- Item cards: mobile-first list, no horizontal/vertical scroll traps -- */

.item-card {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
}
.item-card-row { font-size: 0.9rem; }
.item-card-row + .item-card-row { color: #555; }

/* --- Status banners -------------------------------------------------- */

.banner {
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: #f0f0f5;
    margin: 0.5rem 0;
}
.banner-warn { background: #fff4e0; color: #7a4b00; }
.banner-ok { background: #e6f7ec; color: #1a5c2e; }

/* --- Larger screens: relax to a slightly roomier layout ----------------- */

@media (min-width: 640px) {
    .container { padding: 1.5rem; }
    .card { padding: 1.5rem; }
    form.inline { display: inline; }
}