/*
Theme Name: Venice Command
Theme URI: https://mylittletardis.cloud
Author: Jonathan Beal
Author URI: https://mylittletardis.cloud
Description: A headerless, white-background theme built specifically around the Barbershop POS plugin. The home page is a staff login gate; the Register template is a locked 16:9 kiosk screen; every other page is a clean standalone screen with no site chrome.
Version: 4.1.7
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.8
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: venice-command
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
    --vc-ink:        #14100d;   /* near-black, warm — used for topbars/text, never as a page background */
    --vc-charcoal:   #2a241d;
    --vc-cream:      #ffffff;   /* page background */
    --vc-cream-dim:  #d8d0c0;   /* used only for text-on-dark (topbars) */
    --vc-brass:      #c8a24a;
    --vc-brass-dim:  #a3813a;
    --vc-teal:       #01717e;   /* matches the POS plugin's --bsp-primary */
    --vc-teal-dark:  #015a65;
    --vc-danger:     #b3352b;
    --vc-border:     #e3e0d8;

    --vc-font-display: "Oswald", "Arial Narrow", sans-serif;
    --vc-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --vc-radius: 4px;
    --vc-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: #ffffff;
    color: var(--vc-ink);
    font-family: var(--vc-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vc-teal); text-decoration: none; }
a:hover { color: var(--vc-teal-dark); }
h1, h2, h3, h4 {
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vc-ink);
    margin: 0 0 0.5em;
    line-height: 1.15;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
p { margin: 0 0 1em; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    padding: 14px 28px;
    border-radius: var(--vc-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.vc-btn:hover { transform: translateY(-1px); }
.vc-btn-teal { background: var(--vc-teal); color: #fff; }
.vc-btn-teal:hover { background: var(--vc-teal-dark); color: #fff; }
.vc-btn-outline-dark {
    background: transparent;
    border-color: var(--vc-ink);
    color: var(--vc-ink);
}
.vc-btn-outline-dark:hover { background: var(--vc-ink); color: #fff; }

/* ==========================================================================
   3. Login screen (front page)
   ========================================================================== */
.vc-login-body {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
}
.vc-login-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.vc-login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--vc-border);
    border-radius: 8px;
    box-shadow: var(--vc-shadow);
    padding: 40px 34px;
    text-align: center;
}
.vc-login-brand { margin-bottom: 26px; }
.vc-login-brand img.custom-logo { max-height: 60px; width: auto; margin: 0 auto 14px; }
.vc-brand-mark {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vc-brass), var(--vc-brass-dim));
    display: flex; align-items: center; justify-content: center;
    color: var(--vc-ink); font-weight: 700; font-family: var(--vc-font-display);
    font-size: 1.2rem; margin: 0 auto 14px;
}
.vc-login-brand h1 { font-size: 1.4rem; margin-bottom: 2px; }
.vc-login-sub {
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--vc-teal);
    margin: 0;
}

/* WordPress-generated login form (wp_login_form()), reused by the account/registration card */
.vc-login-card form p,
.vc-account-card form p { text-align: left; margin-bottom: 16px; }
.vc-login-card form label,
.vc-account-card label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vc-charcoal);
    margin-bottom: 6px;
}
.vc-login-card form input[type="text"],
.vc-login-card form input[type="email"],
.vc-login-card form input[type="password"],
.vc-account-card input[type="text"],
.vc-account-card input[type="email"],
.vc-account-card input[type="password"],
.vc-account-card input[type="tel"] {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--vc-border);
    border-radius: var(--vc-radius);
    font-size: 1rem;
    font-family: var(--vc-font-body);
}
.vc-login-card form input[type="text"]:focus,
.vc-login-card form input[type="email"]:focus,
.vc-login-card form input[type="password"]:focus,
.vc-account-card input:focus {
    outline: none;
    border-color: var(--vc-teal);
    box-shadow: 0 0 0 3px rgba(1,113,126,0.12);
}
.vc-login-card form .login-remember {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}
.vc-login-card form .login-remember label { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-weight: 400; text-transform: none; }
.vc-login-card form .login-remember input { width: auto; }
.vc-login-card form .login-submit { margin-bottom: 0; }
.vc-login-card form input[type="submit"],
.vc-account-card button[type="submit"] {
    width: 100%;
    background: var(--vc-teal);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: var(--vc-radius);
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    cursor: pointer;
    margin-top: 4px;
}
.vc-login-card form input[type="submit"]:hover,
.vc-account-card button[type="submit"]:hover { background: var(--vc-teal-dark); }

.vc-login-error {
    background: #fbe9e7;
    color: var(--vc-danger);
    border: 1px solid rgba(179,53,43,0.3);
    border-radius: var(--vc-radius);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-top: 14px;
}
.vc-login-welcome { font-size: 0.95rem; margin-bottom: 22px; }
.vc-login-links { display: flex; flex-direction: column; gap: 10px; }
.vc-login-link { width: 100%; }
.vc-login-logout {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.82rem;
    color: #8a8377;
}
.vc-login-logout:hover { color: var(--vc-danger); }

/* ==========================================================================
   4. Plain standalone page shell (page.php / index.php / 404.php)
   ========================================================================== */
.vc-plain-body { background: #ffffff; margin: 0; }
.vc-plain-topbar {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: var(--vc-ink);
}
.vc-plain-topbar a {
    color: var(--vc-cream-dim);
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}
.vc-plain-topbar a:hover { color: #fff; }
.vc-plain-content {
    width: 100%;
    margin: 0;
    padding: 48px 32px;
}
.vc-plain-content h1 { margin-bottom: 0.6em; }

/* ==========================================================================
   5. Language toggle (shared: login/account pages + dashboard topbar)
   ========================================================================== */
.vc-lang-toggle {
    display: inline-flex;
    border: 1px solid rgba(244,239,228,0.35);
    border-radius: 999px;
    overflow: hidden;
    font-family: var(--vc-font-display);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}
.vc-lang-toggle button {
    border: none;
    background: transparent;
    color: var(--vc-cream-dim);
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
}
.vc-lang-toggle button.is-active { background: var(--vc-brass); color: var(--vc-ink); }

/* On white cards (login/account) the toggle needs dark-on-light instead */
.vc-lang-toggle-light {
    border-color: var(--vc-border);
}
.vc-lang-toggle-light button { color: var(--vc-charcoal); }
.vc-lang-toggle-light button.is-active { background: var(--vc-teal); color: #fff; }

/* Default to English; JS flips this attribute on <html> before paint */
html:not([data-lang="es"]) .lang-es { display: none; }
html[data-lang="es"] .lang-en { display: none; }

/* ==========================================================================
   6. Barber account / registration page
   ========================================================================== */
.vc-account-body { background: #ffffff; margin: 0; }
.vc-account-topbar {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: var(--vc-ink);
    color: var(--vc-cream-dim);
    font-family: var(--vc-font-display);
    letter-spacing: 0.03em;
    font-size: 0.9rem;
    border-bottom: 2px solid var(--vc-brass);
    position: sticky;
    top: 0;
    z-index: 400;
}
.vc-account-topbar-left { color: var(--vc-brass); display: flex; align-items: center; gap: 10px; }
.vc-account-topbar-right { display: flex; align-items: center; gap: 14px; }
.vc-account-topbar a {
    color: var(--vc-cream-dim);
    border: 1px solid rgba(244,239,228,0.3);
    border-radius: 3px;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-family: var(--vc-font-display);
    letter-spacing: 0.03em;
}
.vc-account-topbar a:hover { color: var(--vc-cream); border-color: var(--vc-cream); }

.vc-account-shell {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 20px 60px;
}
.vc-account-card {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border: 1px solid var(--vc-border);
    border-top: 3px solid var(--vc-brass);
    border-radius: 8px;
    box-shadow: var(--vc-shadow);
    padding: 36px 34px;
}
.vc-account-card h1 { font-size: 1.35rem; margin-bottom: 4px; text-align: center; }
.vc-account-sub {
    text-align: center;
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--vc-teal);
    margin-bottom: 24px;
}
.vc-account-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .vc-account-row { grid-template-columns: 1fr; } }
.vc-field { margin-bottom: 16px; text-align: left; }
.vc-field-hint { font-size: 0.78rem; color: #8a8377; margin-top: 4px; }
.vc-account-success {
    background: #e7f4e9;
    color: #2c6b34;
    border: 1px solid rgba(44,107,52,0.3);
    border-radius: var(--vc-radius);
    padding: 10px 14px;
    font-size: 0.85rem;
    margin-bottom: 18px;
}
.vc-field-error input { border-color: var(--vc-danger) !important; }
.vc-account-links {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    font-size: 0.82rem;
}
.vc-account-links a { color: #8a8377; }
.vc-account-links a:hover { color: var(--vc-danger); }

/* ==========================================================================
   7. Responsive topbars (dashboard / account / handbook)
   On phones the topbar stops being a single fixed-height row: it wraps to
   two rows, the shop-name label truncates instead of pushing links off
   screen, and every link/button gets a 40px+ touch target.
   ========================================================================== */
@media (max-width: 700px) {
    .vc-dash-topbar,
    .vc-account-topbar {
        height: auto !important;
        min-height: 0;
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 8px 12px !important;
        position: static !important; /* sticky + wrapping eats too much of a short screen */
    }

    .vc-dash-topbar .vc-kiosk-left,
    .vc-account-topbar-left {
        width: 100%;
        font-size: 0.82rem;
        min-width: 0;
    }
    /* Truncate the shop name rather than let it shove the buttons around */
    .vc-dash-topbar .vc-kiosk-left span:last-child,
    .vc-account-topbar-left span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vc-dash-topbar .vc-kiosk-right,
    .vc-account-topbar-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    .vc-dash-topbar a,
    .vc-account-topbar a {
        padding: 9px 12px;      /* comfortable thumb target */
        font-size: 0.78rem;
        flex: 1 1 auto;
        text-align: center;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .vc-lang-toggle { flex: 0 0 auto; }
    .vc-lang-toggle button { padding: 9px 14px; min-height: 38px; }
}

/* Very narrow phones: hide the decorative scissors so the name gets the room */
@media (max-width: 380px) {
    .vc-dash-topbar .vc-kiosk-left span:first-child,
    .vc-account-topbar-left span:first-child { display: none; }
}

/* The register kiosk topbar is a fixed-height strip by design — just make
   its targets tappable without changing the layout */
@media (max-width: 700px) {
    .vc-kiosk-topbar a { padding: 6px 10px; }
}

/* ==========================================================================
   8. Employee handbook + signature
   ========================================================================== */
.vc-handbook-body { background: #ffffff; margin: 0; }

.vc-handbook-shell {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.vc-handbook-card {
    background: #fff;
    border: 1px solid var(--vc-border);
    border-top: 3px solid var(--vc-brass);
    border-radius: 8px;
    box-shadow: var(--vc-shadow);
    padding: 34px 32px;
}
@media (max-width: 600px) { .vc-handbook-card { padding: 24px 18px; } }

.vc-handbook-card h1 { font-size: 1.45rem; text-align: center; margin-bottom: 4px; }
.vc-handbook-sub {
    text-align: center;
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--vc-teal);
    margin-bottom: 26px;
}

/* The handbook text itself (authored in the WP editor) */
.vc-handbook-content {
    border-top: 1px solid var(--vc-border);
    border-bottom: 1px solid var(--vc-border);
    padding: 22px 0;
    margin-bottom: 26px;
    line-height: 1.7;
}
.vc-handbook-content h2 { font-size: 1.15rem; margin-top: 1.6em; }
.vc-handbook-content h3 { font-size: 1rem; margin-top: 1.4em; }
.vc-handbook-content ul, .vc-handbook-content ol { margin-bottom: 1.2em; }
.vc-handbook-content li { margin-bottom: 6px; }

/* Already-signed receipt */
.vc-signed-banner {
    background: #e7f4e9;
    border: 1px solid rgba(44,107,52,0.3);
    border-radius: var(--vc-radius);
    padding: 16px 18px;
    margin-bottom: 24px;
}
.vc-signed-banner strong { color: #2c6b34; }
.vc-signed-meta { font-size: 0.85rem; color: #4a6b4f; margin: 6px 0 0; }
.vc-signed-image {
    margin-top: 12px;
    background: #fff;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    padding: 8px;
    max-width: 340px;
}

/* Signature capture */
.vc-sig-block {
    background: #fafafa;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    padding: 20px;
}
.vc-sig-block h2 {
    font-size: 1rem;
    margin-bottom: 6px;
}
.vc-sig-intro { font-size: 0.88rem; color: #5c564b; margin-bottom: 18px; }

.vc-sig-pad-wrap { position: relative; margin-bottom: 6px; }
.vc-sig-pad {
    width: 100%;
    height: 180px;
    background: #fff;
    border: 2px dashed var(--vc-border);
    border-radius: var(--vc-radius);
    touch-action: none;          /* let the finger draw instead of scrolling the page */
    cursor: crosshair;
    display: block;
}
.vc-sig-pad.is-signed { border-style: solid; border-color: var(--vc-teal); }
.vc-sig-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #b5aea0;
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
}
.vc-sig-pad.is-signed + .vc-sig-placeholder { display: none; }

.vc-sig-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
}
.vc-sig-clear {
    background: none;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    color: #6b6455;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    min-height: 38px;
}
.vc-sig-clear:hover { border-color: var(--vc-danger); color: var(--vc-danger); }

.vc-sig-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 18px;
}
.vc-sig-ack input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.vc-handbook-card button[type="submit"] {
    width: 100%;
    background: var(--vc-teal);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: var(--vc-radius);
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 48px;
}
.vc-handbook-card button[type="submit"]:hover { background: var(--vc-teal-dark); }
.vc-handbook-card button[type="submit"][disabled] {
    background: #c9c4ba;
    cursor: not-allowed;
}

/* Owner-only signature log */
.vc-sig-log { margin-top: 34px; }
.vc-sig-log h2 { font-size: 1rem; margin-bottom: 12px; }
.vc-sig-log table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.vc-sig-log th, .vc-sig-log td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid var(--vc-border);
}
.vc-sig-log th {
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--vc-charcoal);
}
.vc-sig-log-unsigned { color: var(--vc-danger); }
@media (max-width: 600px) {
    .vc-sig-log table, .vc-sig-log thead, .vc-sig-log tbody,
    .vc-sig-log th, .vc-sig-log td, .vc-sig-log tr { display: block; }
    .vc-sig-log thead { display: none; }
    .vc-sig-log tr { border-bottom: 2px solid var(--vc-border); padding: 10px 0; }
    .vc-sig-log td { border: none; padding: 3px 0; }
    .vc-sig-log td::before { content: attr(data-label) ": "; font-weight: 600; }
}

/* ==========================================================================
   9. Modal (handbook signature reminder on the dashboard)
   ========================================================================== */
body.vc-modal-open { overflow: hidden; }

.vc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,16,13,0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 9000;
}
.vc-modal-overlay[hidden] { display: none; }

.vc-modal {
    background: #fff;
    border-top: 4px solid var(--vc-brass);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    max-width: 440px;
    width: 100%;
    padding: 32px 30px 26px;
    text-align: center;
}
.vc-modal-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--vc-teal);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.vc-modal h2 { font-size: 1.2rem; margin-bottom: 10px; }
.vc-modal p { font-size: 0.95rem; color: #4b463d; margin-bottom: 24px; }

.vc-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.vc-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    border-radius: var(--vc-radius);
    border: none;
    cursor: pointer;
    font-family: var(--vc-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.92rem;
}
.vc-modal-btn-primary { background: var(--vc-teal); color: #fff; }
.vc-modal-btn-primary:hover { background: var(--vc-teal-dark); color: #fff; }
.vc-modal-btn-quiet {
    background: transparent;
    color: #8a8377;
    border: 1px solid var(--vc-border);
}
.vc-modal-btn-quiet:hover { color: var(--vc-charcoal); border-color: #b5aea0; }

@media (max-width: 480px) {
    .vc-modal { padding: 26px 20px 20px; }
    .vc-modal h2 { font-size: 1.08rem; }
}