/* =========================================================================
   SIGO VIVO UNIFIED CORE INTERFACE STYLE
   ========================================================================= */

/* Canvas Configuration */
html, body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #121212;
    box-sizing: border-box;
}

body {
    color: #aaa;
    font-family: monospace;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    /* --- EDIT THIS LINE TO CHANGE THE GLOBAL FONT SIZE --- */
    font-size: 14px; 
}

/* Layout Containers */
.container, .form-container { 
    max-width: 320px; 
    width: 100%; 
    border: 1px dashed #444; 
    padding: 20px; 
    background-color: #1c1c1c; 
    box-sizing: border-box;
    text-align: center;
}

/* Specific adjustment for wide dashboard layouts */
.container-wide {
    max-width: 600px;
}

/* Headings */
h1 { color: #ffffff; font-size: 24px; margin-bottom: 5px; }
h2 { font-size: 20px; margin-bottom: 15px; }
h3 { font-size: 16px; margin-top: 40px; color: #888; }

/* Interactive Input Terminals */
input { 
    display: block; 
    width: 90%; 
    margin: 10px auto; 
    padding: 8px; 
    background: #222; 
    border: 1px solid #444; 
    color: #fff; 
    font-family: monospace; 
}

/* Execution Buttons */
button, .btn { 
    background: #00ffcc; 
    color: #121212; 
    border: none; 
    padding: 10px 20px; 
    font-weight: bold; 
    cursor: pointer; 
    font-family: monospace; 
    width: 95%; 
    margin: 10px auto; 
    display: block;
    box-sizing: border-box;
}
button:hover, .btn:hover { background: #00ccaa; }

/* Specific checkin variant button style if you want to keep the blue accent */
.btn-blue {
    background: #1e3a5f; 
    color: #ffffff; 
    border: 1px solid #2a5282;
}
.btn-blue:hover { background: #2b5484; }
button:disabled { background: #222 !important; border: 1px solid #444 !important; color: #666 !important; cursor: not-allowed; }

/* Navigation & Anchor Mechanics */
.sub-nav { 
    margin-bottom: 30px; 
    font-size: 18px; 
    color: #888; 
    line-height: 1.8;
}
.sub-nav strong, .sub-nav a { white-space: nowrap; display: inline-block; }
.reg-links { margin-top: 20px; border-top: 1px dashed #333; padding-top: 15px; font-size: 12px; }
a { color: #00ffcc; text-decoration: none; display: inline-block; margin: 5px; }
a:hover { text-decoration: underline; }

/* State Feedback Elements */
.status-box { margin-top: 30px; font-size: 16px; padding: 15px; border-radius: 4px; background: #111; display: inline-block; min-width: 250px; }
.token-box { background: #222; border: 1px solid #00ffcc; padding: 15px; margin-top: 10px; }
.token-string { font-size: 28px; color: #00ffcc; font-weight: bold; letter-spacing: 3px; display: block; margin: 10px 0; }

/* Monitoring Badges */
.badge { font-weight: bold; padding: 5px 10px; border-radius: 3px; display: inline-block; margin-bottom: 15px; }
.badge-safe { background: #1b4332; color: #75f5a8; border: 1px solid #2d6a4f; }
.badge-alert { background: #4c1d1d; color: #ff8888; border: 1px solid #900; }

/* Log Lists */
.log-list { text-align: left; max-width: 350px; margin: 20px auto 0 auto; padding: 0; list-style: none; }
.log-list li { padding: 8px 0; border-bottom: 1px solid #2a2a2a; font-size: 14px; color: #b0b0b0; }
@media (max-width: 500px) {
    /* Bump up the baseline system font size so it's readable on a phone screen */
    body {
        font-size: 16px;
        padding: 20px 10px; /* Reduce massive desktop padding on tiny screens */
    }

    /* Fix the top navigation text spacing and size */
    .sub-nav {
        font-size: 18px !important;
        line-height: 2.2; /* Add breathing room so elements don't overlap vertically */
        margin-bottom: 20px;
    }

    /* Make text inputs slightly more comfortable to tap with a finger */
    input {
        padding: 12px 8px;
        font-size: 16px; /* Prevents mobile engines from forcing a forced auto-zoom on focus */
    }

    /* Make buttons thick enough for reliable mobile thumb targets */
    button, .btn {
        padding: 14px 20px;
        font-size: 18px;
    }

    /* Fix the bottom links container so they are readable and clickable */
    .reg-links {
        font-size: 14px !important;
        line-height: 2;
        margin-top: 25px;
    }
}