/* ========================================
   CAMS Login Portal — QAS
   Florida Department of Revenue
   Branded to match floridarevenue.com

   THEME / STYLING SURFACE
   This file owns all visual aesthetics. Safe to edit freely.
   Most look-and-feel changes are just the :root variables below.
   Do NOT rename the .login-card markup hooks or the element IDs
   used by app.js (userId, continueBtn, errorMsg).
   ======================================== */

:root {
    --fdor-navy: #003366;
    --fdor-navy-dark: #00264d;
    --fdor-navy-light: #004080;
    --fdor-blue-link: #0066cc;
    --fdor-gold: #c5a543;
    --fdor-top-bar: #1a1a2e;
    --fdor-nav-bg: #003366;
    --fdor-nav-hover: #004080;
    --white: #ffffff;
    --off-white: #f5f5f5;
    --light-gray: #eeeeee;
    --medium-gray: #cccccc;
    --text-dark: #333333;
    --text-medium: #555555;
    --text-light: #777777;
    --border-color: #dddddd;
    --error-red: #cc0000;
    --error-bg: #fff0f0;
    --info-blue-bg: #e8f0fe;
    --focus-ring: rgba(0, 51, 102, 0.35);
    /* QAS / non-production environment accent */
    --env-bg: #8a1c1c;
    --env-text: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: var(--text-dark);
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--fdor-blue-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Top Utility Bar --- */
.top-bar {
    background: var(--fdor-top-bar);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.top-bar-inner {
    max-width: 980px; margin: 0 auto; padding: 0 15px;
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
}
.top-bar-link { color: rgba(255,255,255,0.7); font-size: 10px; text-decoration: none; }
.top-bar-link:hover { color: white; text-decoration: underline; }
.top-bar-sep { color: rgba(255,255,255,0.3); font-size: 10px; }

/* --- Header with Seal --- */
.header { background: var(--white); border-bottom: 3px solid var(--fdor-navy); }
.header-inner {
    max-width: 980px; margin: 0 auto; padding: 10px 15px;
    display: flex; align-items: center; gap: 14px;
}
.header-seal { flex-shrink: 0; }
.header-seal img { height: 68px; width: auto; }
.seal-fallback {
    width: 68px; height: 68px;
    display: flex; align-items: center; justify-content: center;
}
.header-title h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px; font-weight: normal; color: var(--fdor-navy); line-height: 1.2;
}

/* --- Navigation Bar --- */
.nav-bar { background: var(--fdor-navy); }
.nav-bar-inner {
    max-width: 980px; margin: 0 auto; padding: 0 15px;
    display: flex; align-items: stretch;
}
.nav-item {
    color: var(--white); font-size: 12px; font-weight: bold;
    padding: 8px 14px; text-decoration: none;
    display: flex; align-items: center; transition: background 0.15s;
}
.nav-item:hover { background: var(--fdor-nav-hover); text-decoration: none; }
.nav-item.active { background: var(--fdor-nav-hover); border-bottom: 2px solid var(--fdor-gold); }

/* --- Environment Banner (QAS / non-production) --- */
.env-banner {
    background: var(--env-bg); color: var(--env-text);
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.env-banner {
    max-width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 15px; text-align: center;
}
.env-badge {
    display: inline-block; font-weight: bold; font-size: 11px;
    letter-spacing: 0.05em; background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.5); border-radius: 3px;
    padding: 1px 8px;
}
.env-text { font-size: 11px; font-weight: bold; }
.title-env { color: var(--env-bg); font-weight: bold; font-size: 0.8em; }

/* --- Breadcrumb --- */
.breadcrumb-bar { background: var(--off-white); border-bottom: 1px solid var(--border-color); }
.breadcrumb-inner {
    max-width: 980px; margin: 0 auto; padding: 8px 15px;
    font-size: 11px; color: var(--text-light);
}
.breadcrumb-inner a { font-size: 11px; }
.breadcrumb-sep { margin: 0 4px; color: var(--medium-gray); }

/* --- Page Content --- */
.page-content {
    flex: 1; max-width: 980px; margin: 0 auto;
    padding: 30px 15px 40px; width: 100%;
}
.page-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px; font-weight: normal; color: var(--fdor-navy);
    padding-bottom: 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px;
}

/* --- Login Card --- */
.login-card {
    background: var(--white); border: 1px solid var(--border-color);
    max-width: 460px; margin: 0 auto;
}
.card-header { background: var(--fdor-navy); padding: 12px 20px; }
.card-header h2 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px; font-weight: bold; color: var(--white); margin: 0;
}
.card-body { padding: 24px 20px 20px; }

/* --- Form --- */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: bold; color: var(--text-dark); margin-bottom: 4px; }
.form-label .required { color: var(--error-red); }
.form-input {
    width: 100%; padding: 6px 8px; font-size: 12px;
    font-family: Verdana, Geneva, sans-serif; color: var(--text-dark);
    background: var(--white); border: 1px solid #999999; outline: none;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--fdor-navy); box-shadow: 0 0 0 2px var(--focus-ring); }
.form-input::placeholder { color: #aaaaaa; }
.form-input.error { border-color: var(--error-red); background: var(--error-bg); }
.form-hint { font-size: 11px; color: var(--text-light); margin-top: 4px; line-height: 1.5; }
.form-error { font-size: 11px; color: var(--error-red); margin-top: 4px; display: none; line-height: 1.4; }
.form-error.visible { display: block; }

/* --- Button --- */
.btn-submit {
    display: inline-block; padding: 6px 24px; font-size: 12px; font-weight: bold;
    font-family: Verdana, Geneva, sans-serif; color: var(--white);
    background: var(--fdor-navy); border: 1px solid var(--fdor-navy-dark);
    cursor: pointer; transition: background 0.15s;
}
.btn-submit:hover { background: var(--fdor-navy-light); }
.btn-submit:focus-visible { outline: 2px solid var(--fdor-navy); outline-offset: 2px; }

/* --- Info/Notice Boxes --- */
.info-box {
    margin-top: 16px; padding: 10px 12px; background: var(--info-blue-bg);
    border: 1px solid #b0c4de; font-size: 11px; color: var(--text-dark); line-height: 1.6;
}
.info-box strong { font-weight: bold; }
.notice-box {
    margin-top: 12px; padding: 10px 12px; background: #fffce6;
    border: 1px solid #e6d545; font-size: 11px; color: var(--text-dark); line-height: 1.6;
}

/* --- Footer --- */
.footer { background: var(--off-white); border-top: 3px solid var(--fdor-navy); margin-top: auto; }
.footer-inner { max-width: 980px; margin: 0 auto; padding: 15px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 10px; }
.footer-links a { font-size: 11px; color: var(--fdor-blue-link); }
.footer-links .sep { margin: 0 8px; color: var(--medium-gray); font-size: 11px; }
.footer-address { font-size: 11px; color: var(--text-light); line-height: 1.6; }

/* --- Responsive --- */
@media (max-width: 640px) {
    .header-inner { padding: 8px 10px; }
    .header-seal img, .seal-fallback { height: 48px; width: 48px; }
    .header-title h1 { font-size: 17px; }
    .nav-item { font-size: 11px; padding: 7px 10px; }
    .page-content { padding: 20px 10px 30px; }
    .card-body { padding: 16px 14px; }
    .env-banner { flex-direction: column; gap: 3px; }
}
@media (max-width: 480px) {
    .nav-bar-inner { flex-wrap: wrap; }
    .top-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}