/* LUMINA Dashboard CSS - Cloud-hosted stylesheet
 * Version: 20260209
 * This file contains all CSS for the LUMINA node web interface
 */

/* ====================================================================
 * Base Reset and Layout
 * ==================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:#061626;}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#061626;color:#f2f2f2;margin:0;padding:16px;}
.page{max-width:1100px;margin:0 auto;}
.grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;}
.card{background:#0a1f2e;border-radius:14px;padding:14px 14px 16px 14px;border:1px solid #0f2a3d;flex:1 1 100%;max-width:100%;box-shadow:0 0 20px rgba(0,0,0,0.4);}
@media(min-width:900px){.card{flex:1 1 calc(50% - 16px);max-width:calc(50% - 16px);}}

/* ====================================================================
 * Typography
 * ==================================================================== */
h1{margin:0 0 16px 0;font-size:24px;text-align:center;}
@media(min-width:900px){h1{text-align:left;max-width:calc(50% - 16px);margin-left:auto;margin-right:auto;}}
h2{margin:0 0 8px 0;font-size:17px;display:flex;align-items:center;gap:8px;}
.card-title-icon{font-size:16px;color:#3CCFC9;}
.subheadline{font-size:13px;color:#aaa;margin-bottom:10px;}
.card-footnote{font-size:12px;color:#8793a3;line-height:1.4;margin-top:10px;}
.card-footnote strong{color:inherit;font-weight:600;}

/* ====================================================================
 * Logo
 * ==================================================================== */
.logo-container{text-align:left;max-width:300px;padding:0;}
.logo-container img{max-width:100%;height:auto;width:100%;}

/* ====================================================================
 * Buttons
 * ==================================================================== */
.button-container{max-width:500px;margin:20px auto;}
.button{display:block;width:100%;padding:20px 30px;margin:16px 0 0 0;background:#3CCFC9;color:#061626;text-decoration:none;border-radius:14px;font-weight:bold;font-size:18px;text-align:center;transition:background 0.3s;border:1px solid #0f2a3d;box-shadow:0 0 20px rgba(0,0,0,0.4);cursor:pointer;border:none;}
.button:hover{background:#9d8fff;color:#061626;text-decoration:none;}
.button.danger{background:#E65A6B;}
.button.danger:hover{background:#d44a5a;color:#f2f2f2;}
.button.secondary{background:#0f2a3d;color:#f2f2f2;}
.button.secondary:hover{background:#1a3a4d;}

/* ====================================================================
 * Form Elements
 * ==================================================================== */
.form-group{margin-bottom:20px;}
label{display:block;color:#aaa;margin:15px 0 4px 0;font-size:16px;font-weight:500;}
.description{color:#888;font-size:12px;margin-top:3px;margin-bottom:8px;font-style:italic;}
input[type='text'],input[type='number'],input[type='password']{width:100%;padding:10px;margin:10px 0;background:#0a1f2e;border:1px solid #0f2a3d;border-radius:8px;color:#f2f2f2;font-size:16px;}
input[type='text']:not([readonly]):not([disabled]),input[type='number']:not([readonly]):not([disabled]),input[type='password']:not([readonly]):not([disabled]){border:2px solid #3CCFC9;box-shadow:0 0 8px rgba(60,207,201,0.2);}
input[type='text']:focus,input[type='number']:focus,input[type='password']:focus{outline:none;border-color:#3CCFC9;box-shadow:0 0 12px rgba(60,207,201,0.4);}
label[for^='loc_'],label[for='online_mode'],label[for='night_phases'],label[for='moon_card'],label[for='location_card'],label[for='node_card'],label[for='connectivity_card'],label[for='rolling_graph'],label[for='calibration'],label[for='code'],label[for='old_security_code'],label[for='new_security_code'],label[for='confirm_new_security_code']{color:#3CCFC9;font-weight:600;}

/* ====================================================================
 * Common Utility Classes
 * ==================================================================== */
.error{color:#E65A6B;margin:10px 0;font-size:14px;}
.info{background:#0a1f2e;border:1px solid #0f2a3d;padding:20px;border-radius:8px;margin:20px auto;max-width:500px;text-align:left;}
.warning{background:#0a1f2e;border:2px solid #E65A6B;padding:20px;border-radius:8px;margin:20px auto;max-width:500px;text-align:left;}
.warning h3{color:#E65A6B;margin-top:0;}

/* ====================================================================
 * Single Column Layout Overrides
 * ==================================================================== */
.page.single-column,.single-column .page{max-width:500px !important;}
.single-column .grid .card{flex:1 1 100% !important;max-width:100% !important;}
.single-column .card{max-width:100% !important;}
.single-column h1{text-align:left !important;margin-left:0 !important;margin-right:0 !important;max-width:100% !important;}

/* ====================================================================
 * Dashboard-Specific Styles
 * ==================================================================== */
.headline{font-size:20px;font-weight:600;margin-bottom:4px;}
table{border-collapse:collapse;width:100%;}
td{padding:4px 6px;vertical-align:middle;font-size:13px;line-height:1.2;}
td.label{color:#aaa;width:160px;}
a{color:#4BA6E8;text-decoration:none;}
a:hover{text-decoration:underline;color:#9d8fff;}
.badge{display:inline-flex;align-items:center;line-height:1;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;}
.ok{background:#57C47E;color:#061626;border:1px solid #57C47E;}
.warn{background:#E65A6B;color:#f2f2f2;border:1px solid #E65A6B;}
.amber{background:#FFA500;color:#061626;border:1px solid #FFA500;}
.muted{color:#999;font-size:12px;}
.dashboard-warning{border:2px solid #E65A6B;background:#0f1d2b;}
.dashboard-warning strong{color:#E65A6B;}
.system-message{margin:0;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.4;color:#f2f2f2;width:100%;flex:1 1 100%;max-width:100%;align-self:stretch;}
.message-grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:0;margin-bottom:0;}
@media(min-width:900px){.message-grid{padding:0 8px;}}
.message-grid.has-message{margin-bottom:16px;}
.message-grid .system-message{flex:1 1 100%;max-width:100%;}
.system-message.info{background:transparent;border:1px solid #2b3a4d;}
.system-message.warning{background:#3a2b12;border:1px solid #FFA500;}
.system-message.emergency{background:#3a1315;border:1px solid #E65A6B;}
.system-message.hidden{display:none;}
.metric-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.metric{background:#0f2a3d;border-radius:10px;padding:6px 9px;flex:1 1 130px;}
.metric-label{font-size:10px;color:#a3a3c4;text-transform:uppercase;letter-spacing:0.06em;}
.metric-value{font-size:24px;font-weight:600;margin-top:2px;text-align:center;}
.metric-value.mag-value{font-size:40px;}
#lux-value{font-size:30px;}
.metric-unit{font-size:10px;color:#a3a3c4;vertical-align:super;margin-left:2px;}
.metric-unit-block{font-size:10px;color:#a3a3c4;display:block;text-align:center;margin-top:2px;}
.graph-wrap{width:100%;height:190px;margin-top:8px;}
.graph-svg{width:100%;height:100%;}
.graph-grid{stroke:#1a3a4d;stroke-width:1;}
.graph-axis{fill:#888;font-size:10px;}
.graph-line{fill:none;stroke:#3CCFC9;stroke-width:2;}
.graph-marker-sun{stroke:#f6c48f;stroke-width:1;opacity:0.8;}
.graph-marker-astro{stroke:#9d8fff;stroke-width:1;opacity:0.7;}
.dashboard-button{display:block;width:100%;padding:20px 30px;margin:16px 0 0 0;background:#3CCFC9;color:#061626;text-decoration:none;border-radius:14px;font-weight:bold;font-size:18px;text-align:center;transition:background 0.3s;border:1px solid #0f2a3d;box-shadow:0 0 20px rgba(0,0,0,0.4);}
.dashboard-button:hover{background:#9d8fff;color:#061626;text-decoration:none;}
.footer{margin-top:14px;font-size:11px;color:#777;text-align:center;}

/* ====================================================================
 * Config Page-Specific Styles
 * ==================================================================== */
.config-page .form-group{margin:15px 0;}
.config-page label{margin-bottom:5px;font-size:14px;}
.config-page .description{color:#888;font-style:italic;}
.config-page .info{color:#3CCFC9;}
.success{background:#1a3a1a;border:2px solid #57C47E;border-radius:8px;padding:20px;margin:20px 0;color:#57C47E;font-size:14px;}
.success h3{color:#57C47E;margin-top:0;margin-bottom:15px;}
.success p{margin:10px 0;color:#a3d4a3;}
.default-indicator{display:inline-block;margin-left:6px;color:#FFA500;font-size:14px;vertical-align:middle;}
.default-value{color:#888;font-size:11px;font-weight:normal;margin-left:4px;}
/* Custom checkbox styling - larger and themed */
input[type='checkbox']{width:22px;height:22px;min-width:22px;min-height:22px;margin-right:12px;cursor:pointer;accent-color:#3CCFC9;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #3CCFC9;border-radius:6px;background:#0a1f2e;position:relative;vertical-align:middle;transition:all 0.2s ease;}
input[type='checkbox']:checked{background:#3CCFC9;border-color:#3CCFC9;box-shadow:0 0 8px rgba(60,207,201,0.4);}
input[type='checkbox']:checked::before{content:'';position:absolute;left:6px;top:2px;width:6px;height:12px;border:solid #061626;border-width:0 2px 2px 0;transform:rotate(45deg);}
input[type='checkbox']:focus{outline:none;box-shadow:0 0 12px rgba(60,207,201,0.6);}
input[type='checkbox']:hover{border-color:#9d8fff;box-shadow:0 0 6px rgba(157,143,255,0.3);}

/* ====================================================================
 * WiFi Manager Portal Styles (for WiFi Manager custom CSS)
 * ==================================================================== */
.wifi-list{background:#0a1f2e;border:1px solid #0f2a3d;border-radius:8px;padding:10px;margin:10px 0;}
.wifi-item{padding:10px;margin:5px 0;background:#0f2a3d;border-radius:6px;cursor:pointer;}
.wifi-item:hover{background:#0a1f2e;}
.wifi-signal{color:#4BA6E8;font-size:12px;}

/* ====================================================================
 * Select Elements
 * ==================================================================== */
select{width:100%;padding:10px;margin:5px 0;background:#0a1f2e;border:1px solid #0f2a3d;border-radius:8px;color:#f2f2f2;font-size:14px;}
select:not([readonly]):not([disabled]){border:2px solid #3CCFC9;box-shadow:0 0 8px rgba(60,207,201,0.2);}
select:focus{outline:none;border-color:#3CCFC9;box-shadow:0 0 12px rgba(60,207,201,0.4);}