/* ============================================
   MITIGASI.COM - Global Stylesheet
   Uses CSS Variables from theme_settings DB
   ============================================ */

/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--font-size-base,16px);scroll-behavior:smooth}
body{font-family:var(--font-family,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif);background:var(--bg-secondary);color:var(--text-primary);line-height:1.6}
.container{max-width:var(--container-max,1200px);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{color:var(--text-primary);line-height:1.3;margin-bottom:.5em}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary-dark)}

/* ============================================
   Page Header / Hero Section
   ============================================ */
.page-header{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:var(--text-light);
    padding:30px 0 70px;
    text-align:center;
}
.page-header.teal{background:linear-gradient(135deg,#00695c,#004d40)}
.page-header.blue{background:linear-gradient(135deg,#1976d2,#0d47a1)}
.page-header.orange{background:linear-gradient(135deg,#f57c00,#e65100)}
.page-header .container{position:relative}
.page-header .breadcrumb{margin-bottom:15px;opacity:.85;font-size:.9rem}
.page-header .breadcrumb a{color:var(--text-light);text-decoration:none}
.page-header .breadcrumb a:hover{text-decoration:underline}
.page-header .breadcrumb span{margin:0 8px}
.page-header h1{font-size:2rem;margin:0 0 10px;color:var(--text-light)}
.page-header p{opacity:.9;margin:0;font-size:1.1rem}

/* ============================================
   Stats Cards (pulled up over header)
   ============================================ */
.stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin:-40px 0 30px;
    position:relative;
    z-index:10;
}
.stat-card{
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    padding:25px 15px;
    text-align:center;
    box-shadow:var(--card-shadow,0 2px 10px rgba(0,0,0,.08));
    transition:transform .2s,box-shadow .2s;
}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,.12)}
.stat-card .icon{font-size:2rem;margin-bottom:10px}
.stat-card .value{font-size:1.8rem;font-weight:700;color:var(--primary)}
.stat-card .label{font-size:.85rem;color:var(--text-secondary);margin-top:5px}

@media(max-width:992px){.stats-row{grid-template-columns:repeat(2,1fr);margin:-30px 0 25px}}
@media(max-width:576px){.stats-row{grid-template-columns:1fr;margin:-20px 0 20px}}

/* ============================================
   Buttons
   ============================================ */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 24px;
    border-radius:var(--border-radius,12px);
    font-weight:600;
    cursor:pointer;
    border:none;
    transition:all .2s;
    text-decoration:none;
}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--text-light)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.2)}
.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid #ddd}
.btn-secondary:hover{background:#e9ecef}
.btn-accent{background:linear-gradient(135deg,var(--accent),#e65100);color:var(--text-light)}
.btn-accent:hover{transform:translateY(-2px)}
.btn-white{background:var(--bg-primary);color:var(--primary)}
.btn-white:hover{transform:scale(1.05)}
.btn-sm{padding:8px 16px;font-size:.9rem}
.btn-lg{padding:15px 30px;font-size:1.1rem}
.btn-block{width:100%}

/* ============================================
   Cards
   ============================================ */
.card{
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    box-shadow:var(--card-shadow,0 2px 10px rgba(0,0,0,.08));
    overflow:hidden;
}
.card-header{
    padding:15px 20px;
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:var(--text-light);
    font-weight:600;
}
.card-header.teal{background:linear-gradient(135deg,#00695c,#26a69a)}
.card-header.blue{background:linear-gradient(135deg,#1976d2,#42a5f5)}
.card-header.orange{background:linear-gradient(135deg,#f57c00,#ffa726)}
.card-body{padding:20px}
.card-footer{padding:15px 20px;background:var(--bg-secondary);border-top:1px solid #eee}

/* ============================================
   Alert Cards
   ============================================ */
.alert-card{
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    box-shadow:var(--card-shadow);
    overflow:hidden;
    display:block;
    text-decoration:none;
    color:inherit;
    transition:transform .2s,box-shadow .2s;
    border-left:4px solid var(--primary);
}
.alert-card:hover{transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,.15)}
.alert-card.clickable{cursor:pointer}
.alert-card.waspada{border-left-color:var(--weather-waspada)}
.alert-card.siaga{border-left-color:var(--weather-siaga)}
.alert-card.awas{border-left-color:var(--weather-awas)}
.alert-card.expired{border-left-color:#6c757d;opacity:.75}
.alert-card .alert-header{padding:15px 20px;font-weight:600;color:var(--text-light)}
.alert-card .alert-header.waspada{background:linear-gradient(135deg,#ffc107,#e0a800);color:#333}
.alert-card .alert-header.siaga{background:linear-gradient(135deg,#fd7e14,#e8590c)}
.alert-card .alert-header.awas{background:linear-gradient(135deg,#dc3545,#c82333)}
.alert-card .alert-header.expired{background:linear-gradient(135deg,#6c757d,#5a6268)}
.alert-card .alert-body{padding:15px 20px}
.alert-card .alert-body p{margin:5px 0;color:var(--text-secondary);font-size:.9rem}
.alert-card .alert-footer{padding:12px 20px;background:var(--bg-secondary);display:flex;justify-content:space-between;align-items:center}

/* ============================================
   Earthquake & Weather Levels
   ============================================ */
.eq-level1{background:var(--eq-level1)!important;color:#fff}
.eq-level2{background:var(--eq-level2)!important;color:#333}
.eq-level3{background:var(--eq-level3)!important;color:#fff}
.eq-level4{background:var(--eq-level4)!important;color:#fff}
.eq-level5{background:var(--eq-level5)!important;color:#fff}
.alert-normal,.weather-normal{background:var(--weather-normal)!important;color:#fff}
.alert-waspada,.weather-waspada,.waspada{background:var(--weather-waspada)!important;color:#333}
.alert-siaga,.weather-siaga,.siaga{background:var(--weather-siaga)!important;color:#fff}
.alert-awas,.weather-awas,.awas{background:var(--weather-awas)!important;color:#fff}

/* ============================================
   Badges
   ============================================ */
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-success,.badge.active{background:#d4edda;color:#155724}
.badge-danger,.badge.expired{background:#f8d7da;color:#721c24}
.badge-warning{background:#fff3cd;color:#856404}
.badge-info{background:#d1ecf1;color:#0c5460}
.badge-primary{background:var(--primary);color:#fff}

/* ============================================
   Map Container
   ============================================ */
.map-container{
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    box-shadow:var(--card-shadow);
    overflow:hidden;
    margin-bottom:30px;
}
.map-header{
    background:linear-gradient(135deg,#1976d2,#42a5f5);
    color:var(--text-light);
    padding:15px 20px;
    font-weight:600;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.map-body{position:relative}
.map-body #weather-map,
.map-body #earthquake-map,
.map-body #alert-map,
.map-body .leaflet-container{
    height:500px;
    width:100%;
    z-index:1;
    border-radius:0 0 var(--border-radius,12px) var(--border-radius,12px);
}
.map-loading{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:rgba(255,255,255,.95);
    padding:20px 30px;
    border-radius:10px;
    box-shadow:0 2px 20px rgba(0,0,0,.15);
    z-index:1000;
    text-align:center;
}
@media(max-width:768px){
    .map-body #weather-map,
    .map-body #earthquake-map,
    .map-body .leaflet-container{height:350px}
}

/* ============================================
   Weather Legend
   ============================================ */
.weather-legend{
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    padding:15px 20px;
    margin-bottom:20px;
    box-shadow:var(--card-shadow);
}
.weather-legend .legend-title{font-weight:600;margin-bottom:10px}
.weather-legend .legend-items{display:flex;flex-wrap:wrap;gap:15px}
.weather-legend .legend-items span{display:flex;align-items:center;gap:5px;font-size:.9rem}

/* ============================================
   Data Table
   ============================================ */
.data-table{
    width:100%;
    border-collapse:collapse;
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    overflow:hidden;
    box-shadow:var(--card-shadow);
}
.data-table thead{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--text-light)}
.data-table th,.data-table td{padding:12px 15px;text-align:left}
.data-table tbody tr{border-bottom:1px solid #eee;transition:background .2s}
.data-table tbody tr:hover{background:var(--bg-secondary)}
.data-table tbody tr:last-child{border-bottom:none}

/* ============================================
   Section & Layout
   ============================================ */
.section{padding:30px 0}
.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.section-heading h2{margin:0;font-size:1.5rem}
.section-heading .view-all{color:var(--primary);font-weight:600}
.section-heading .view-all:hover{text-decoration:underline}

/* ============================================
   Empty State
   ============================================ */
.empty-state{
    text-align:center;
    padding:60px 20px;
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
}
.empty-state .icon{font-size:4rem;margin-bottom:15px;opacity:.6}
.empty-state h3{color:var(--primary);margin-bottom:10px}
.empty-state p{color:var(--text-secondary)}

/* ============================================
   CTA Box
   ============================================ */
.cta-box{
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:var(--text-light);
    border-radius:var(--border-radius,12px);
    padding:30px;
    text-align:center;
    margin:30px 0;
}
.cta-box h3{color:var(--text-light);margin-bottom:10px;font-size:1.3rem}
.cta-box p{margin-bottom:20px;opacity:.9}
.cta-box .btn{background:var(--bg-primary);color:var(--primary)}

/* ============================================
   Forms
   ============================================ */
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-primary)}
.form-control{
    width:100%;
    padding:12px 15px;
    border:1px solid #ddd;
    border-radius:var(--border-radius,12px);
    font-size:1rem;
    transition:border-color .2s,box-shadow .2s;
}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(46,125,50,.15)}
.form-select{background:var(--bg-primary) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center/16px;appearance:none;padding-right:40px}

/* ============================================
   Modal
   ============================================ */
.modal-overlay{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.6);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.modal-overlay.show{display:flex}
.modal-content{
    background:var(--bg-primary);
    border-radius:var(--border-radius,12px);
    max-width:600px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    box-shadow:0 10px 50px rgba(0,0,0,.3);
}
.modal-header{
    padding:20px;
    border-bottom:1px solid #eee;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.modal-header h3{margin:0}
.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary)}
.modal-body{padding:20px}
.modal-footer{padding:15px 20px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:10px}

/* ============================================
   Grid System
   ============================================ */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media(max-width:992px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ============================================
   Page Background
   ============================================ */
.page-gradient{
    background:linear-gradient(135deg,var(--bg-gradient-start),var(--bg-gradient-end));
    min-height:100vh;
    padding-bottom:30px;
}

/* ============================================
   Utilities
   ============================================ */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-muted{color:var(--text-muted)}
.text-primary{color:var(--primary)}
.text-white{color:var(--text-light)}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:10px}
.mb-2{margin-bottom:20px}
.mb-3{margin-bottom:30px}
.mt-1{margin-top:10px}
.mt-2{margin-top:20px}
.mt-3{margin-top:30px}
.p-1{padding:10px}
.p-2{padding:20px}
.p-3{padding:30px}
.d-flex{display:flex}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:10px}
.gap-2{gap:20px}
.hidden{display:none!important}
.visible{display:block!important}

/* ============================================
   Loading Spinner
   ============================================ */
.spinner{
    width:40px;height:40px;
    border:4px solid var(--bg-secondary);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:20px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================
   Footer
   ============================================ */
.site-footer{
    background:var(--footer-bg,#1a1a2e);
    color:var(--footer-text,#ccc);
    padding:40px 0 20px;
    margin-top:auto;
}
.site-footer a{color:var(--footer-text);opacity:.8}
.site-footer a:hover{opacity:1;color:var(--primary-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:30px;text-align:center;font-size:.9rem}