/* RL Status V1.0.0 — Unified RL theme */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root,[data-theme="light"]{
    --bg:#f8fafc;--bg2:#fff;--bg3:#f1f5f9;--tx:#1e293b;--tx2:#64748b;--tx3:#94a3b8;
    --brd:#e2e8f0;--brd2:#f1f5f9;--acc:#e67e22;--acc2:#d35400;--accL:#fef3e2;
    --red:#dc2626;--redL:#fee2e2;--grn:#10b981;--grnL:#d1fae5;--wrn:#f59e0b;--wrnL:#fef3c7;
    --blue:#3b82f6;--blueL:#dbeafe;--s1:0 1px 3px rgba(30,41,59,.06);--s2:0 4px 12px rgba(30,41,59,.08);
    --nav:#fff;--navT:#1e293b;--navBorder:#e2e8f0;--navHover:rgba(30,41,59,.06);
    --card:#fff;--sidebar:#fff;--r:12px;--rs:8px;color-scheme:light;
}
[data-theme="dark"]{
    --bg:#0f1117;--bg2:#181a23;--bg3:#1f2231;--tx:#e2e8f0;--tx2:#94a3b8;--tx3:#64748b;
    --brd:#2a2d3a;--brd2:#1f2231;--acc:#e67e22;--acc2:#f0923e;--accL:#3d2a14;
    --red:#ef4444;--redL:#3f1212;--grn:#10b981;--grnL:#0a2e1f;--wrn:#f59e0b;--wrnL:#3d2e00;
    --blue:#60a5fa;--blueL:#1e3a5f;--s1:0 1px 3px rgba(0,0,0,.3);--s2:0 4px 12px rgba(0,0,0,.4);
    --nav:#0a0c12;--navT:#94a3b8;--navBorder:rgba(255,255,255,.12);--navHover:rgba(255,255,255,.08);
    --card:#181a23;--sidebar:#0a0c12;--r:12px;--rs:8px;color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:'Outfit',sans-serif;font-weight:700}
a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc2)}
.muted{color:var(--tx2)}

/* === Navbar === */
.navbar{background:var(--nav);padding:0 1.5rem;position:sticky;top:0;z-index:300;box-shadow:var(--s2);border-bottom:1px solid var(--navBorder);height:62px}
.nav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;height:100%;gap:1rem}
.nav-logo img{height:36px;width:auto}
[data-theme="dark"] .logo-dark{display:none}[data-theme="dark"] .logo-light{display:block}
[data-theme="light"] .logo-dark{display:block}[data-theme="light"] .logo-light{display:none}
.nav-app-name{font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;color:var(--acc);white-space:nowrap}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.nav-user{font-size:.88rem;color:var(--tx2)}
.nav-btn{background:none;border:1px solid var(--navBorder);color:var(--navT);padding:.35rem .75rem;border-radius:var(--rs);cursor:pointer;font-size:.88rem;font-family:inherit;transition:.2s;text-decoration:none}
.nav-btn:hover{background:var(--navHover);color:var(--tx)}

/* === Admin Layout === */
.layout-admin{display:flex;flex-direction:column;min-height:100vh}
.admin-layout{display:flex;flex:1;min-height:calc(100vh - 62px)}
.admin-sidebar{width:220px;background:var(--sidebar);border-right:1px solid var(--brd);display:flex;flex-direction:column;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto}
.sidebar-nav{flex:1;padding:.75rem .5rem}
.sidebar-item{display:flex;align-items:center;gap:.625rem;padding:.6rem .875rem;border-radius:var(--rs);font-size:.88rem;color:var(--tx2);transition:all .15s;margin-bottom:.125rem}
.sidebar-item:hover{background:var(--navHover);color:var(--tx)}
.sidebar-item.active{background:var(--accL);color:var(--acc);font-weight:500}
.sidebar-icon{font-size:1rem;width:1.25rem;text-align:center}
.sidebar-footer{border-top:1px solid var(--brd);padding:.75rem .5rem}
.admin-main{flex:1;padding:1.5rem 2rem;max-width:1100px;overflow-x:auto}

/* === Public Layout === */
.layout-public{min-height:100vh;display:flex;flex-direction:column}
.public-main{flex:1;max-width:800px;width:100%;margin:0 auto;padding:2rem 1.5rem}

/* === Metrics (reuse from RL Analytics) === */
.rla-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.75rem;margin-bottom:2rem;width:100%}
.rla-metrics:has(> :nth-child(5)){grid-template-columns:repeat(5,1fr)}
.rla-metrics:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.rla-metrics:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.rla-metrics:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.rla-metric{background:var(--bg3);border-radius:var(--rs);padding:1.125rem;transition:background .15s}
.rla-metric:hover{background:var(--brd2)}
.rla-metric-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);margin-bottom:.375rem}
.rla-metric-value{font-family:'Outfit',sans-serif;font-size:1.625rem;font-weight:600;color:var(--tx);line-height:1.2}
.rla-metric-note{font-size:.82rem;margin-top:.25rem}
.rla-metric-note.success{color:var(--grn)}.rla-metric-note.danger{color:var(--red)}.rla-metric-note.warning{color:var(--wrn)}.rla-metric-note.info{color:var(--blue)}.rla-metric-note.muted{color:var(--tx3)}

/* === Cards === */
.admin-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:1.375rem;margin-bottom:1.5rem;box-shadow:var(--s1)}
.admin-card-header{display:flex;align-items:center;justify-content:space-between}

/* === Tables === */
.rla-table{width:100%;border-collapse:collapse;font-size:.92rem}
.rla-table th{text-align:left;font-weight:600;color:var(--tx3);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--brd)}
.rla-table th.right,.rla-table td.right{text-align:right;padding-right:0}
.rla-table td{padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--brd2);color:var(--tx)}
.rla-table tr:last-child td{border-bottom:none}
.rla-table .path{font-family:'SF Mono','Consolas','Monaco',monospace;font-size:.82rem;word-break:break-all}

/* === Badges === */
.rla-badge{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.rla-badge.success{background:var(--grnL);color:var(--grn)}.rla-badge.danger{background:var(--redL);color:var(--red)}
.rla-badge.warning{background:var(--wrnL);color:var(--wrn)}.rla-badge.info{background:var(--blueL);color:var(--blue)}

/* === Status Dots === */
.status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}

/* === Status Page (Public) === */
.status-page{max-width:100%}
.status-banner{padding:2rem;border-radius:var(--r);text-align:center;margin-bottom:2rem}
.status-banner.status-operational{background:var(--grnL);border:1px solid var(--grn)}
.status-banner.status-some_issues{background:var(--wrnL);border:1px solid var(--wrn)}
.status-banner.status-major_outage{background:var(--redL);border:1px solid var(--red)}
.status-banner-icon{font-size:2rem;margin-bottom:.5rem}
.status-banner-text{font-family:'Outfit',sans-serif;font-size:1.375rem;font-weight:700}

.status-section{margin-bottom:2rem}
.status-section h2{font-size:1.1rem;margin-bottom:.75rem;color:var(--tx)}
.status-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:1.25rem;margin-bottom:.75rem;box-shadow:var(--s1)}
.status-server-name{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--brd2)}
.status-service{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--brd2)}
.status-service:last-child{border-bottom:none}
.status-service-name{flex:1;font-size:.92rem}
.status-label{font-size:.82rem;font-weight:500;min-width:100px;text-align:right}

/* === Incident Cards === */
.incident-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.incident-header h3{font-size:1rem}
.incident-impact{font-size:.72rem;padding:.2rem .5rem;border-radius:4px;font-weight:700;text-transform:uppercase}
.impact-critical{background:var(--redL);color:var(--red)}
.impact-major{background:var(--wrnL);color:var(--wrn)}
.impact-minor{background:var(--blueL);color:var(--blue)}
.impact-none{background:var(--bg3);color:var(--tx3)}
.incident-meta{font-size:.82rem;color:var(--tx2)}

/* === Login === */
.login-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 62px);padding:2rem}
.login-card{background:var(--card);border:1px solid var(--brd);border-radius:var(--r);padding:2.5rem;width:100%;max-width:400px;box-shadow:var(--s2)}
.login-title{font-size:1.5rem;text-align:center;margin-bottom:.25rem}
.login-subtitle{text-align:center;color:var(--tx2);font-size:.92rem;margin-bottom:1.75rem}

/* === Forms === */
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.88rem;font-weight:500;color:var(--tx);margin-bottom:.375rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.6rem .875rem;background:var(--bg);border:1px solid var(--brd);border-radius:var(--rs);color:var(--tx);font-size:.92rem;font-family:inherit;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(230,126,34,.15)}
.form-group textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.92rem}
.checkbox-label input{width:auto;accent-color:var(--acc)}
.form-actions{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--brd2)}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:var(--rs);font-size:.88rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .15s;border:1px solid var(--brd);background:var(--bg);color:var(--tx);text-decoration:none}
.btn:hover{background:var(--bg3);border-color:var(--tx3)}
.btn-primary{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn-primary:hover{background:var(--acc2);border-color:var(--acc2);color:#fff}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger:hover{opacity:.9}
.btn-sm{padding:.3rem .65rem;font-size:.82rem}
.btn-full{width:100%;justify-content:center}

/* === Flash Messages === */
.flash{padding:.75rem 1rem;border-radius:var(--rs);margin-bottom:1rem;font-size:.92rem}
.flash-success{background:var(--grnL);color:var(--grn);border:1px solid var(--grn)}
.flash-error{background:var(--redL);color:var(--red);border:1px solid var(--red)}
.flash-warning{background:var(--wrnL);color:var(--wrn);border:1px solid var(--wrn)}
.flash-info{background:var(--blueL);color:var(--blue);border:1px solid var(--blue)}

/* === Footer === */
.site-footer{border-top:1px solid var(--brd);padding:1.25rem 0;text-align:center;font-size:.85rem;color:var(--tx3)}
.site-footer a{color:var(--tx3)}.site-footer a:hover{color:var(--acc)}
.footer-inner{max-width:800px;margin:0 auto;padding:0 1.5rem}

/* === Responsive === */
@media(max-width:768px){
    .navbar{padding:0 1rem}
    .admin-sidebar{display:none}
    .admin-main{padding:1rem}
    .form-row{grid-template-columns:1fr}
    .rla-metrics{grid-template-columns:repeat(2,1fr) !important}
    .public-main{padding:1rem}
    .login-card{padding:1.5rem}
}
@media(max-width:480px){
    .rla-metrics{grid-template-columns:1fr !important}
    .rla-metric-value{font-size:1.375rem}
}