/* =========================================================================
   Page styles, loaded by render_header() and the login page.
   Requires chrome.css to be loaded first (:root vars + topbar).
   Clean, professional, data-forward. Flat surfaces, neutral grays, one
   blue accent, red reserved for danger.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100vh}
body{
    font-family:var(--font-body);
    color:var(--ink);
    background-color:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    font-size:15px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1200px;margin:0 auto 40px;padding:0 22px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.25}

.card{
    position:relative;background:var(--surface);
    border:1px solid var(--rule);padding:22px 24px;margin-bottom:20px;border-radius:10px;
    box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
}
.card h1,.card h2{margin-top:0;color:var(--ink)}
.card h1{font-size:1.6rem;letter-spacing:-.02em}
.card h2{font-size:1.2rem}

/* Buttons */
.btn{
    display:inline-block;background:var(--accent);color:#fff;
    padding:9px 18px;border:1px solid var(--accent);border-radius:8px;
    font-family:var(--font-body);font-size:.86rem;font-weight:600;letter-spacing:0;
    text-transform:none;cursor:pointer;text-decoration:none;
    transition:background .12s,border-color .12s,box-shadow .12s;
}
.btn:hover{background:#1d4ed8;border-color:#1d4ed8;text-decoration:none;color:#fff}
.btn.secondary{background:#fff;color:var(--ink);border-color:var(--rule)}
.btn.secondary:hover{background:var(--paper-dark);color:var(--ink)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{background:#992f20;border-color:#992f20;color:#fff}

/* Flash / alerts */
.flash{
    padding:11px 15px;margin-bottom:18px;border:1px solid var(--rule);border-radius:8px;
    font-size:.9rem;letter-spacing:0;text-transform:none;background:var(--surface);
}
.flash.error{border-color:var(--danger);color:#7a2117;background:var(--danger-light)}
.flash.ok{border-color:#bfe3cf;color:var(--success);background:#eaf6ef}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--surface);
    border:1px solid var(--rule);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule)}
th{background:var(--paper-dark);color:var(--ink-soft);font-family:var(--font-body);font-weight:600;
    letter-spacing:.02em;text-transform:none;font-size:.74rem;text-transform:uppercase}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--paper)}

/* Forms */
input,select,textarea{
    padding:9px 11px;border:1px solid var(--rule);border-radius:8px;background:#fff;
    font-family:var(--font-body);font-size:.92rem;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)
}
label{display:block;margin-bottom:6px;font-size:.78rem;letter-spacing:0;
    text-transform:none;color:var(--ink-soft);font-weight:600;font-family:var(--font-body)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:18px}

/* ---- Login page ------------------------------------------------------- */
body.login-page{
    display:flex;align-items:center;justify-content:center;padding:24px;min-height:100vh;
    background:linear-gradient(160deg,#1f2933 0%,#2c3a47 60%,#1f2933 100%);
}
.login-box{
    position:relative;background:var(--surface);
    border:1px solid var(--rule);border-radius:14px;
    padding:36px 34px 30px;width:100%;max-width:400px;
    box-shadow:0 20px 50px rgba(15,23,42,.35);
}
.login-box h1{margin:4px 0 4px;font-family:var(--font-display);font-weight:700;color:var(--ink);
    font-size:1.5rem;text-align:left;letter-spacing:-.02em}
.login-box .sub{text-align:left;color:var(--ink-faint);margin:0 0 22px;
    font-size:.85rem;letter-spacing:0;text-transform:none;border:none;padding:0}
.login-box label{display:block;margin:16px 0 6px}
.login-box input{padding:10px 12px;font-size:.95rem}
.login-box button{
    width:100%;margin-top:24px;padding:12px;border:1px solid var(--accent);background:var(--accent);
    color:#fff;font-family:var(--font-body);font-size:.92rem;font-weight:600;letter-spacing:0;
    text-transform:none;cursor:pointer;border-radius:8px;transition:background .12s,border-color .12s;
}
.login-box button:hover{background:#1d4ed8;border-color:#1d4ed8}
.login-box .error{background:var(--danger-light);color:#7a2117;border:1px solid var(--danger);
    padding:10px 12px;margin-bottom:14px;font-size:.84rem;letter-spacing:0;text-transform:none;border-radius:8px}
.login-box .case{margin-top:22px;text-align:center;color:var(--ink-faint);
    font-size:.72rem;letter-spacing:.01em;text-transform:none}
.login-box .case em{font-style:normal;color:var(--ink-soft)}