/* ============================================
   SPOTMASTER THEME PREVIEW
   Material Dashboard Dark inspired theme.
   The preview pages load this automatically.
   ============================================ */

/* --- Google Fonts: Roboto --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* --- Base --- */
body {
    background: #1a2035;
    color: #ffffffcc;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: 300;
}

/* --- Navbar --- */
.navbar {
    background: #1f283e !important;
    border-bottom: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.navbar-brand { color: #ffffffcc !important; font-weight: 500; }
.navbar-dark .navbar-nav .nav-link { color: #ffffffaa; }
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; }
.navbar-dark .navbar-nav .nav-link.active { color: #fff; font-weight: 400; }
.navbar-text { color: #f44336 !important; }

/* --- Cards --- */
.card {
    background: #202940;
    border: none;
    border-radius: 10px;
    color: #ffffffcc;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.3), 0 7px 10px -5px rgba(0,0,0,0.2) !important;
    overflow: hidden;
}
.card .bg-light,
.card-body.bg-light {
    background: #202940 !important;
}
.card-body {
    border: none !important;
    border-radius: 0 !important;
}
.card-footer {
    background: #1a2438 !important;
    border-top: 1px solid #2d3a56;
}
.card-footer.bg-light {
    background: #1a2438 !important;
}
.card-header {
    border-bottom: none;
}
.card-header.bg-secondary {
    background: linear-gradient(60deg, #26c6da, #0097a7) !important;
    border-radius: 6px !important;
    margin: -20px 15px 0;
    padding: 10px 0 !important;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(0,151,167,0.4);
    color: #fff !important;
}

/* Card image top */
.card-img-top {
    border-radius: 0;
}

/* --- Header area --- */
.bg-light {
    background: #202940 !important;
}
.border-secondary {
    border-color: #2d3a56 !important;
}
.border-light {
    border-color: #2d3a56 !important;
}
h5 { font-weight: 400; }

/* --- Buttons --- */
.btn-outline-primary {
    color: #2196f3;
    border-color: #2196f3;
    border-radius: 6px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.btn-outline-primary:hover {
    background: #2196f3;
    color: #fff;
    box-shadow: 0 4px 12px rgba(33,150,243,0.35);
}
.btn-secondary {
    background: #344767;
    border-color: #344767;
    color: #ffffffcc;
    border-radius: 6px;
    font-weight: 400;
}
.btn-secondary:hover {
    background: #3e5480;
    border-color: #3e5480;
    color: #fff;
}
.btn-outline-secondary {
    color: #ffffffaa;
    border-color: #2d3a56;
    border-radius: 6px;
}
.btn-outline-secondary:hover {
    background: #344767;
    color: #fff;
    border-color: #344767;
}
.btn-outline-danger {
    color: #f44336;
    border-color: #f44336;
    border-radius: 6px;
}
.btn-outline-danger:hover {
    background: #f44336;
    color: #fff;
    box-shadow: 0 4px 12px rgba(244,67,54,0.35);
}
.btn-danger {
    background: linear-gradient(60deg, #ef5350, #e53935);
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(244,67,54,0.14), 0 3px 1px -2px rgba(244,67,54,0.2);
}
.btn-primary {
    background: linear-gradient(60deg, #26c6da, #00acc1);
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0,188,212,0.14), 0 3px 1px -2px rgba(0,188,212,0.2);
}

/* --- Dropdowns --- */
.dropdown-menu {
    background: #202940;
    border: 1px solid #2d3a56;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.dropdown-item {
    color: #ffffffcc;
    font-weight: 300;
}
.dropdown-item:hover {
    background: #344767;
    color: #fff;
}
.dropdown-divider {
    border-top-color: #2d3a56;
}

/* --- Text colors --- */
.text-secondary { color: #7b809a !important; }
.text-success { color: #4caf50 !important; }
.text-danger { color: #f44336 !important; }
.text-muted { color: #7b809a !important; }
.text-white-50 { color: rgba(255,255,255,0.35) !important; }

/* --- Alerts --- */
.alert-success {
    background: linear-gradient(60deg, #66bb6a, #43a047);
    border: none;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 10px -5px rgba(76,175,80,0.4);
}
.alert-success .close { color: #fff; text-shadow: none; }
.alert-warning {
    background: linear-gradient(60deg, #ffa726, #fb8c00);
    border: none;
    color: #fff;
    border-radius: 6px;
}
.alert-danger {
    background: linear-gradient(60deg, #ef5350, #e53935);
    border: none;
    color: #fff;
    border-radius: 6px;
}

/* --- Forms --- */
.form-control {
    background: transparent;
    border: none;
    border-bottom: 1px solid #2d3a56;
    border-radius: 0;
    color: #ffffffcc;
    font-weight: 300;
}
.form-control:focus {
    background: transparent;
    border-bottom-color: #2196f3;
    color: #fff;
    box-shadow: none;
}
.custom-select {
    background-color: #202940;
    border: 1px solid #2d3a56;
    border-radius: 6px;
    color: #ffffffcc;
}

/* --- Tables --- */
.table {
    color: #ffffffcc;
}
.table th {
    border-top: none;
    border-bottom: 1px solid #2d3a56;
    font-weight: 400;
    color: #7b809a;
    text-transform: uppercase;
    font-size: 0.75rem;
}
.table td {
    border-top: 1px solid #2d3a56;
}
.table-hover tbody tr:hover {
    background: rgba(255,255,255,0.04);
    color: #fff;
}

/* --- Footer --- */
footer {
    background: #1a2035 !important;
    border-color: #2d3a56 !important;
}
footer .bg-light {
    background: #1a2035 !important;
}
footer .text-muted {
    color: #7b809a !important;
}

/* --- No-DZ placeholder card top --- */
.card .bg-secondary.card-img-top,
.card .bg-secondary.d-flex {
    background: #344767 !important;
}

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a2035; }
::-webkit-scrollbar-thumb { background: #344767; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3e5480; }

/* --- Edit page: top toolbar button spacing --- */
.col-8 .btn { margin-right: 6px; margin-bottom: 4px; }

/* --- Edit page: map canvas --- */
.col.p-0.m-0 > div[style*="100vh"] {
    border-radius: 10px;
    margin: 4px 6px 4px 0;
    overflow: hidden;
}

/* --- Edit page: pill nav styling --- */
.nav-pills .nav-link {
    color: #7b809a;
    border-radius: 6px;
    padding: 6px 12px;
}
.nav-pills .nav-link.active {
    background: linear-gradient(60deg, #26c6da, #00acc1);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,172,193,0.3);
}
.nav-pills .nav-link:hover:not(.active) {
    color: #ffffffcc;
    background: #344767;
}

/* --- Edit page: wind tab card fixes --- */
#pills-wind .card {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    overflow: visible;
}
#pills-wind .card-header.bg-secondary {
    margin: -15px 10px 0;
    font-size: 0.85rem;
}
#pills-wind .card-body {
    padding: 12px 8px !important;
}
#pills-wind .btn {
    margin-top: 6px;
    margin-bottom: 4px;
}
#pills-wind .table {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
#pills-wind .container-fluid.rounded {
    margin-top: 8px;
}

/* --- Edit page: Links card in wind tab --- */
#pills-wind .card-body.p-0 .btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
}

/* --- Edit page: wind manual input fields --- */
#collapseWindDataInputs .form-control {
    border: 1px solid #2d3a56;
    border-radius: 0;
    border-bottom-color: #344767;
    font-size: 0.85rem;
    padding: 2px 4px;
}
#collapseWindDataInputs .form-control:focus {
    border-color: #2196f3;
}

/* --- Edit page: slider styling --- */
.slider {
    background: #344767 !important;
}
.slider::-webkit-slider-thumb {
    background: #2196f3 !important;
}
.output_value { color: #2196f3 !important; }

/* --- Edit page: textarea --- */
textarea.form-control {
    border: 1px solid #2d3a56;
    border-radius: 6px;
}

/* --- btn-light override for dark theme --- */
.btn-light {
    background: #344767;
    border-color: #344767;
    color: #ffffffcc;
}
.btn-light:hover {
    background: #3e5480;
    border-color: #3e5480;
    color: #fff;
}

/* --- Login/register page forms --- */
.card-body .form-control,
.card .form-control {
    border: 1px solid #2d3a56;
    border-radius: 6px;
}

/* --- Search results list (spotweather, etc.) --- */
.list-group-item {
    background: #202940;
    border-color: #2d3a56;
    color: #ffffffcc;
}
.list-group-item:hover {
    background: #344767;
    color: #fff;
}

/* --- Misc --- */
.border { border-color: #2d3a56 !important; }
.border-info { border-color: #2d3a56 !important; }
.rounded { border-radius: 10px !important; }
a { color: #2196f3; }
a:hover { color: #42a5f5; }