:root {
    --page-bg: #eef5f4;
    --surface: #ffffff;
    --surface-alt: #f5fbfa;
    --border: #d7e6e4;
    --text: #163636;
    --text-muted: #526d6b;
    --primary: #0d6e6e;
    --primary-dark: #094f4f;
    --accent: #14b8a6;
    --danger: #e5484d;
    --danger-light: #fee2e2;
    --maroon: #7a1220;
    --success: #16a34a;
    --warning: #b45309;
    --warning-light: #fffbeb;
    /* --teal / --indigo were referenced in the original stylesheet but
       never defined, so those elements (focus rings, dashboard icon,
       badges, modal header) were silently falling back to no color.
       Defined here to match the rest of the teal/maroon palette. */
    --teal: #0e7c86;
    --indigo: #4338ca;
    /* Keypad colors, matched to the reference photo: a flat, solid
       crimson square with a bold rounded corner — no gradient. */
    --key-red: #c31c2c;
    --key-red-hover: #a8121f;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --radius-key: 16px;
    --shadow-lg: 0 18px 40px -18px rgba(9, 79, 79, 0.25);
    --topbar-h: 6px;
    --footer-h: 40px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(28px + var(--topbar-h) + env(safe-area-inset-top))
             calc(20px + env(safe-area-inset-right))
             calc(28px + var(--footer-h) + env(safe-area-inset-bottom))
             calc(20px + env(safe-area-inset-left));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top, #f4fbfa 0%, var(--page-bg) 70%);
}
button, input {
    touch-action: manipulation;
    font-family: inherit;
}

/* ---- Site chrome: thin dark top strip + maroon footer bar (matches JiPOS shell) ---- */
.top-strip {
    position: fixed; top: 0; left: 0; right: 0;
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    z-index: 500;
}
.site-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--footer-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--maroon);
    color: #f3e6e6;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600;
    box-shadow: 0 -6px 16px -8px rgba(0,0,0,0.2);
    z-index: 500;
    text-align: center;
    padding-left: 12px; padding-right: 12px;
}
.site-footer b { font-weight: 800; }
.site-footer sup { font-size: 8px; }

/* ---- Shared shell: split image + form panel (pos_signin-style) ---- */
.login-shell {
    width: 100%;
    max-width: 860px;
    min-height: 460px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    overflow: hidden;
}

.panel-image {
    flex: 0 0 42%;
    position: relative;
    min-height: 420px;
}
.panel-image::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.15));
    pointer-events: none;
}

/* ---- Keypad, restyled to match the reference photo:
   a 3-column grid of flat crimson squares for 0-8, then a final row
   where "9" and "Clear" share the row as two EQUAL-width buttons
   (not a 1-col + 2-col split like before).
   There are TWO copies in the markup: .keypad-desktop (overlaid on the
   photo — desktop/tablet only) and .keypad-mobile (sits below the PIN
   input, in normal document flow — phones only). Only one is ever
   shown, switched at the 680px breakpoint below. ---- */
.keypad-desktop {
    position: absolute;
    top: 22px; left: 22px; right: 22px;
    max-width: 340px;
}
.keypad-mobile { display: none; }
.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.keypad-row-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.key-btn {
    width: 100%;
    height: 78px;
    border-radius: var(--radius-key);
    border: none;
    background: var(--key-red);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,0.35);
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.key-btn:hover { background: var(--key-red-hover); }
.key-btn:active { transform: translateY(1px); }
.key-btn.key-clear { font-size: 16px; }

.scan-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--maroon); flex-shrink: 0;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(122,22,32,0.35); }
    50% { box-shadow: 0 0 0 7px rgba(122,22,32,0); }
}

.panel-form {
    flex: 1;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.brand-logo { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; margin-bottom: 15px; }
.brand-logo .ji { color: var(--primary); }
.brand-logo .pos { color: var(--maroon); }

.form-heading { margin: 16px 0 20px; font-size: 20px; font-weight: 600; color: var(--text); }
.form-heading.small { font-size: 14.5px; font-weight: 400; color: var(--text-muted); }

.method-tabs {
    display: inline-flex;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 4px;
    width: fit-content;
}
.tab-btn {
    border: none;
    background: transparent;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.tab-btn.active { background: var(--maroon); color: #fff; }

.alert-error {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Fields (icon-right style, matches signin page) ---- */
.field-group { margin-bottom: 14px; }
.field-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.field-wrap { position: relative; }
.field-wrap input {
    width: 100%;
    padding: 12px 42px 12px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 16px;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field-wrap input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14,124,134,0.14);
}
.field-icon {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none; display: flex;
}
.field-icon svg { width: 16px; height: 16px; }

.remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 16px;
}
.remember-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; color: var(--text);
}
.remember-label input { width: 17px; height: 17px; accent-color: var(--maroon); }
.forgot-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 600;
}
.forgot-link:hover { text-decoration: underline; }

/* ---- Buttons ---- */
.btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--accent);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-outline:hover { background: var(--accent); color: #fff; }
.btn-outline:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-outline svg { width: 15px; height: 15px; }

.demo-hint { margin: 0 0 16px; font-size: 13px; color: var(--text); }
.demo-hint b { font-weight: 700; }

/* ---- PIN tab ---- */
#pinDisplay { letter-spacing: 3px; font-weight: 700; }

/* ---- Dashboard header (logged-in view) ---- */
.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.dash-header-left { display: flex; align-items: center; gap: 12px; }
.dash-icon {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--maroon), var(--indigo));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(122,22,32,0.5);
}
.dash-icon svg { width: 20px; height: 20px; }
.dash-header-left h1 { margin: 0; font-size: 17px; font-weight: 700; }
.dash-header-left p { margin: 1px 0 0; font-size: 12px; color: var(--text-muted); }

.dash-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    background: #f1e9f8; color: var(--indigo); border: 1px solid #ddd0ee;
    white-space: nowrap;
}
.badge.warning { background: var(--warning-light); color: var(--warning); border-color: #fde68a; }
.logout-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid #fecaca; background: var(--danger-light); color: var(--danger);
    font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.logout-btn:hover { background: #fee2e2; }
.logout-btn svg { width: 12px; height: 12px; }

.status-panel {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface-alt);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.status-top { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); flex-shrink: 0; }
.status-label { font-weight: 700; font-size: 13.5px; }
.status-message { color: var(--text-muted); font-size: 12.5px; margin-top: 5px; }

.dash-scan-indicator {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-muted);
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 20px 16px;
    justify-content: center; text-align: center;
}

/* ---- Modal ---- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(20,20,25,0.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000;
    animation: fadeIn 0.15s ease;
}
.modal {
    width: min(100%, 400px); background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden; animation: pop 0.18s cubic-bezier(0.2,0.8,0.2,1);
}
.modal-header {
    background: linear-gradient(135deg, var(--maroon), var(--indigo)); color: white;
    padding: 18px 22px; display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; }
.modal-close {
    background: rgba(255,255,255,0.15); border: none; color: white;
    width: 26px; height: 26px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: rgba(255,255,255,0.28); }
.modal-body { padding: 22px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.detail-row .label { color: var(--text-muted); }
.detail-row .value { font-weight: 700; text-align: right; font-family: "SF Mono", Menlo, Consolas, monospace; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
    from { opacity: 0; transform: scale(0.94) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Dashboard shell (no image panel needed) ---- */
.dash-shell {
    width: 100%; max-width: 460px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 30px 28px 26px;
}

@media (max-width: 680px) {
    body { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
    .login-shell { flex-direction: column; max-width: 420px; min-height: 0; border-radius: var(--radius-md); }

    /* Password / Card tabs: no photo panel at all — the form just opens
       centered on its own. PIN tab: no separate banner either — the
       photo is now the keypad's OWN background, so it appears behind
       the keys themselves, below the input. */
    .panel-image { display: none; }
    .keypad-desktop { display: none; }
    .keypad-mobile {
        display: none;
        position: relative;
        margin: 16px 0 4px;
        padding: 18px;
        border-radius: var(--radius-md);
        background: url('https://demo.jipos.co/assets/login/login.jpg') center center / cover no-repeat;
        overflow: hidden;
    }
    .keypad-mobile::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
        pointer-events: none;
    }
    .keypad-mobile .keypad-grid,
    .keypad-mobile .keypad-row-bottom {
        position: relative;
        z-index: 1;
    }
    .login-shell.tab-pin .keypad-mobile { display: block; }
    .keypad-mobile .keypad-grid { gap: 10px; }
    .keypad-mobile .keypad-row-bottom { gap: 10px; margin-top: 10px; }

    .key-btn { height: 58px; font-size: 19px; }
    .key-btn.key-clear { font-size: 14px; }
    .panel-form { padding: 24px 22px; }
    .brand-logo { font-size: 26px; }
    .form-heading { font-size: 18px; margin: 12px 0 16px; }
    .tab-btn { padding: 9px 15px; }
    .btn-outline { padding: 12px 20px; width: 100%; justify-content: center; }
    .remember-row { flex-wrap: wrap; }
    .dash-shell { padding: 24px 20px 20px; }
    .modal { max-height: 85vh; overflow-y: auto; }
}

@media (max-width: 380px) {
    .key-btn { height: 52px; font-size: 17px; }
    .panel-form { padding: 20px 18px; }
    .brand-logo { font-size: 23px; }
    .method-tabs { width: 100%; }
    .tab-btn { flex: 1; padding: 8px 10px; }
    .dash-header { flex-wrap: wrap; }
    .site-footer { font-size: 11px; }
}

/* Landscape phones: everything stays single-column (the keypad carries
   its own background now), just tightened up since vertical space is
   short. */
@media (max-width: 900px) and (max-height: 420px) and (orientation: landscape) {
    body { padding-top: calc(16px + var(--topbar-h) + env(safe-area-inset-top)); padding-bottom: calc(16px + var(--footer-h) + env(safe-area-inset-bottom)); }
    .login-shell { max-width: 480px; }
    .keypad-mobile { margin: 10px 0 0; padding: 12px; }
    .key-btn { height: 40px; font-size: 15px; }
    .keypad-mobile .keypad-grid, .keypad-mobile .keypad-row-bottom { gap: 6px; }
    .panel-form { padding: 18px 22px; justify-content: flex-start; }
    .form-heading { margin: 8px 0 12px; }
}