@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

:root {
    /* Light theme (default) */
    --bg-color: #ffffff;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --btn-primary-bg: #0d6efd;
    --btn-primary-hover: #0b5ed7;
    --navbar-bg: #f8f9fa;
    --logo-color: #212529;
}

[data-theme="dark"] {
    --bg-color: #212529;
    --text-color: #ffffff;
    --text-muted: #adb5bd;
    --border-color: #495057;
    --card-bg: #343a40;
    --input-bg: #495057;
    --input-border: #6c757d;
    --btn-primary-bg: #0d6efd;
    --btn-primary-hover: #0b5ed7;
    --navbar-bg: #343a40;
    --logo-color: #ffffff;
}

/* Date separator styling */
.date-separator {
    background-color: var(--bs-secondary-bg);
    color: var(--text-color);
}

[data-theme="dark"] .date-separator {
    background-color: var(--input-bg);
    color: var(--text-color);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
}

.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.form-control, .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-color);
}

.form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    border-color: var(--btn-primary-bg);
    color: var(--text-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

.text-muted {
    color: var(--text-muted) !important;
}

.api-key-section {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 1rem;
}

.qso-summary:hover {
    background-color: var(--table-stripe-bg, rgba(0, 0, 0, 0.05));
}

.qso-details {
    transition: all 0.3s ease;
}

.qso-item {
    transition: all 0.2s ease;
}

/* QSO expanded detail styles */
.qso-details-container {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color);
}

.qso-operator-photo {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
}

.qso-details-content {
    width: 60%;
}

/* Fix modals in dark mode */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-body {
    background-color: var(--card-bg);
}

[data-theme="dark"] .modal-footer {
    background-color: var(--card-bg);
    border-top-color: var(--border-color);
}

/* Fix accordion in dark mode */
[data-theme="dark"] .accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--input-bg);
    color: var(--text-color);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--card-bg);
}

/* Fix form text and muted text with higher specificity */
[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted,
[data-theme="dark"] small.text-muted {
    color: var(--text-muted) !important;
}

/* Fix close button in dark mode */
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Fix form labels and text in dark mode */
[data-theme="dark"] .form-label,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .accordion-body,
[data-theme="dark"] .modal-body {
    color: var(--text-color) !important;
}

/* Fix form controls placeholder and text */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select option {
    color: var(--text-muted) !important;
}

/* Placeholder text styling - lighter in light mode for better contrast */
[data-theme="light"] .form-control::placeholder,
[data-theme="light"] .form-select::placeholder {
    color: #6c757d !important;
    opacity: 0.7 !important;
}

/* Ensure consistent placeholder styling across browsers */
.form-control::placeholder {
    font-style: italic;
}

/* Fix accordion button focus state */
[data-theme="dark"] .accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-color: var(--btn-primary-bg);
}

/* Fix any remaining dark text */
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header {
    color: var(--text-color);
}

/* Fix toasts in dark mode */
[data-theme="dark"] .toast {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .toast-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .toast-body {
    color: var(--text-color);
}

/* Fix toast close button */
[data-theme="dark"] .toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Fix accordion button badge positioning */
.accordion-button {
    position: relative;
}

.accordion-button .badge {
    position: absolute;
    right: calc(1.5em + 22px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Logo styling */
.navbar-brand {
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    color: var(--logo-color) !important;
}

/* Tab styling */
.card-header-tabs {
    border-bottom: none;
    margin-bottom: 0;
}

.card-header-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-color);
}

.card-header-tabs .nav-link:hover {
    border-bottom-color: var(--btn-primary-bg);
    background: none;
}

.card-header-tabs .nav-link.active {
    border-bottom-color: var(--btn-primary-bg);
    background: none;
    color: var(--btn-primary-bg);
    font-weight: 500;
}

/* Map container styling */
#mapContainer {
    border-radius: 0;
}

.mapboxgl-popup-content {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.mapboxgl-popup-tip {
    border-top-color: var(--card-bg);
}

[data-theme="dark"] .mapboxgl-popup-content {
    background-color: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .mapboxgl-popup-tip {
    border-top-color: var(--card-bg);
}

/* Prevent button text wrapping and ensure proper sizing */
.btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Ensure button containers don't compress buttons */
.d-flex.gap-2 {
    flex-wrap: nowrap;
}

/* Make sure buttons maintain minimum width */
.btn-outline-secondary,
.btn-outline-warning,
.btn-success {
    min-width: fit-content;
}

/* QRZ Import Offcanvas styling */
.offcanvas {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.offcanvas-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.offcanvas-body {
    background-color: var(--card-bg);
}

/* Fix offcanvas in dark mode */
[data-theme="dark"] .offcanvas {
    background-color: var(--card-bg);
    color: var(--text-color);
}

[data-theme="dark"] .offcanvas-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .offcanvas-body {
    background-color: var(--card-bg);
}

/* Fix radio button styling in dark mode */
[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: #ffffff;
}

/* Fix Intro.js tours in both light and dark mode */
.introjs-tooltip {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.introjs-tooltip-title {
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.introjs-tooltiptext {
    color: var(--text-color) !important;
}

.introjs-arrow {
    border-bottom-color: var(--card-bg) !important;
}

.introjs-arrow.top {
    border-top-color: var(--card-bg) !important;
}

.introjs-arrow.left {
    border-left-color: var(--card-bg) !important;
}

.introjs-arrow.right {
    border-right-color: var(--card-bg) !important;
}

.introjs-button {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    text-shadow: none !important;
}

.introjs-nextbutton {
    background-color: var(--btn-primary-bg) !important;
    color: #ffffff !important;
    border-color: var(--btn-primary-bg) !important;
    text-shadow: none !important;
}

.introjs-button:hover {
    background-color: var(--border-color) !important;
    text-shadow: none !important;
}

.introjs-nextbutton:hover {
    background-color: var(--btn-primary-hover) !important;
    text-shadow: none !important;
}

/* Replace skip button with X icon and position it better */
.introjs-skipbutton {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    font-size: 0 !important;
    padding: 5px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    z-index: 1000 !important;
}

.introjs-skipbutton:hover {
    color: var(--text-color) !important;
    background: none !important;
    text-shadow: none !important;
}

.introjs-skipbutton::before {
    content: "×" !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: var(--text-muted) !important;
}

[data-theme="dark"] .introjs-skipbutton::before {
    color: var(--text-muted) !important;
}

.introjs-skipbutton:hover::before {
    color: var(--text-color) !important;
}

.introjs-bullets ul li a {
    background-color: var(--border-color) !important;
}

.introjs-bullets ul li a.active {
    background-color: var(--btn-primary-bg) !important;
}

.introjs-progress {
    background-color: var(--border-color) !important;
}

.introjs-progressbar {
    background-color: var(--btn-primary-bg) !important;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .introjs-tooltip {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Safari compatibility fixes for Intro.js overlay/highlight */
.introjs-helperLayer {
    -webkit-box-shadow: 0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, 0.5) 0 0 0 5000px !important;
    box-shadow: 0 0 1px 2px rgba(33, 33, 33, 0.8), rgba(33, 33, 33, 0.5) 0 0 0 5000px !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: auto;
}

.introjs-overlay {
    -webkit-backdrop-filter: none;
    will-change: auto;
}

.introjs-fixParent {
    -webkit-transform: none !important;
    transform: none !important;
    position: static !important;
}

.introjs-showElement {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 9999999 !important;
}

/* POTA scraper wake-up indicator */
.pota-waking-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #fd7e14;
    margin-right: 5px;
    vertical-align: middle;
    animation: pota-pulse 1.2s ease-in-out infinite;
}

@keyframes pota-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

.pota-status-waking {
    color: #fd7e14 !important;
}

/* Propagation badge */
#propagationBadge {
    font-size: 0.75rem;
}

/* Desktop navbar: keep the collapse from claiming half the remaining space.
   Bootstrap's default .navbar-collapse is flex-grow: 1, which combined with
   the centered .navbar-clock (also growing) makes the bell — sitting between
   them in DOM order — float in the middle instead of packing against the
   right-side cluster (theme / Help / Settings). */
@media (min-width: 992px) {
    .navbar-collapse#navbarMenu {
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }
}

/* ===================== Mobile Responsive ===================== */

/* Mobile bottom tab bar (always-visible primary navigation on phones) */
.mobile-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--navbar-bg);
    border-top: 1px solid var(--border-color);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 0 10px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    min-height: 56px;
    transition: color 0.15s ease;
}

.mobile-tab i {
    font-size: 1.25rem;
}

.mobile-tab.active {
    color: var(--btn-primary-bg);
    font-weight: 600;
}

.mobile-tab:focus-visible {
    outline: 2px solid var(--btn-primary-bg);
    outline-offset: -2px;
}

/* Mobile (max-width: 991px) — tablet + phone share the collapsed nav */
@media (max-width: 991px) {
    /* Reserve space at bottom of page for the sticky form-actions bar +
       the mobile tab bar beneath it. */
    body {
        padding-bottom: calc(56px + 64px + env(safe-area-inset-bottom, 0));
    }

    /* Toasts move to bottom-center on mobile so they don't collide with the
       always-visible navbar bell. Lift above the form-actions + tab bar. */
    #toastContainer.toast-container {
        top: auto !important;
        bottom: calc(56px + 64px + env(safe-area-inset-bottom, 0)) !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0.75rem !important;
        align-items: center !important;
    }

    /* Collapsed navbar menu: full-width column layout */
    .navbar-collapse .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
    }

    /* Form actions become a sticky action bar above the bottom tab bar.
       Log QSO is always reachable with the thumb regardless of scroll. */
    .form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(56px + env(safe-area-inset-bottom, 0));
        z-index: 1029;
        margin: 0 !important;
        padding: 8px 12px;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        gap: 8px !important;
        justify-content: stretch !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    }
    .form-actions .btn {
        min-height: 44px;
    }
    /* Log QSO is the primary action — it grows; the secondaries stay icon-only */
    .form-actions #logQsoBtn {
        flex: 1 1 auto;
        font-weight: 600;
    }
    .form-actions #showMoreBtn,
    .form-actions #clearFieldsBtn {
        flex: 0 0 auto;
    }
    .form-actions .form-actions-label {
        display: none;
    }
    .form-actions #showMoreBtn i,
    .form-actions #clearFieldsBtn i {
        margin: 0 !important;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    /* Navbar: shrink clock, hide date */
    #utcClock {
        font-size: 0.9rem !important;
    }
    #utcDate {
        display: none;
    }
    .navbar-brand img {
        width: 24px;
        height: 24px;
    }
    .navbar-brand {
        font-size: 1rem;
    }
    /* Push the clock to its own row beneath the brand on phones so it has
       breathing room next to the bell + hamburger cluster. */
    .navbar-clock {
        order: 99;
        flex-basis: 100%;
        margin-top: 4px;
    }

    /* Logger form: 2 per row on mobile */
    #qsoForm .col-md-2,
    #qsoForm .col-md-3 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Callsign field: full width */
    #callInput {
        font-size: 1rem;
    }

    /* Tabs: smaller font/padding */
    .card-header-tabs .nav-link {
        font-size: 0.8rem;
        padding: 0.35rem 0.5rem;
    }

    /* Tables: smaller font */
    .table {
        font-size: 0.85rem;
    }

    /* Touch targets: larger form controls (Apple HIG 44px minimum) */
    .form-control, .form-select {
        min-height: 44px;
    }
    .btn {
        min-height: 44px;
    }

    /* Buttons: allow wrapping and smaller */
    .d-flex.gap-2 {
        flex-wrap: wrap !important;
    }
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
        min-height: 38px;
    }
    /* Icon-only btn-sm in navbar/cards stay compact */
    .navbar .btn-sm,
    .card-header .btn-sm {
        min-height: 36px;
    }

    /* Maps: proper mobile viewport height */
    #mapContainer {
        height: 60vh !important;
        min-height: 300px;
    }
    #potaMapContainer {
        height: 50vh !important;
        min-height: 300px;
    }

    /* POTA: list/map are toggled via the segmented control instead of stacked */
    .pota-list-container,
    .pota-map-wrapper {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Default: list visible, map hidden */
    #pota-pane:not(.show-mobile-map) .pota-map-wrapper {
        display: none !important;
    }
    /* Map mode: hide list, show map */
    #pota-pane.show-mobile-map .pota-list-container {
        display: none !important;
    }

    /* Logbook action buttons */
    .logbook-actions .btn {
        font-size: 0.75rem;
    }

    /* QSO list rows: collapse the desktop two-column flex into a card-like
       stack so badges wrap freely and the timestamp gets its own row. */
    .qso-summary {
        flex-wrap: wrap !important;
        gap: 6px;
        padding: 12px !important;
    }
    .qso-summary > div:first-child {
        flex: 1 1 100%;
        min-width: 0;
        line-height: 1.8;
    }
    .qso-summary > div:first-child > strong {
        font-size: 1.05rem;
        display: inline-block;
        margin-right: 4px;
    }
    .qso-summary > div:last-child {
        flex: 1 1 100%;
        justify-content: space-between !important;
    }
    .qso-summary .badge {
        font-size: 0.72rem;
    }

    /* Logbook card-header (tabs + action buttons) needs to stack on mobile so
       the action buttons don't fight the tab pills for room. The bottom tab
       bar is now the primary nav, so hide the in-card pills entirely on phones. */
    #logbookTabs.card-header-tabs {
        display: none !important;
    }
    #logbookActions {
        flex-wrap: wrap;
        justify-content: stretch !important;
        width: 100%;
    }
    #logbookActions .btn {
        flex: 1 1 0;
        min-height: 40px;
    }
    /* Quick Logger title row: the secondary count text becomes a separate line */
    #qsoCountDisplay {
        font-size: 0.75rem;
    }

    /* Intro.js tooltip: fit mobile */
    .introjs-tooltip {
        min-width: 280px !important;
        max-width: 320px !important;
    }
}

/* Tablet (max-width: 991px) */
@media (max-width: 991px) {
    /* Clock: slightly smaller */
    #utcClock {
        font-size: 1rem !important;
    }

    /* POTA filters: 2 columns */
    .pota-filters .col-md-3 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* The actual POTA filter row uses generic `<div class="col">` cells —
       force them to 2-up on tablet/phone so the dropdowns stay legible. */
    #pota-pane .row.g-2 > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
    /* POTA header (title + status + refresh + settings) is too cramped — let it wrap. */
    #pota-pane .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Dynamic viewport height for mobile browsers */
@supports (height: 100dvh) {
    @media (max-width: 767px) {
        #mapContainer {
            height: 60dvh !important;
        }
        #potaMapContainer {
            height: 50dvh !important;
        }
    }
}

/* ==========================================================================
   Notification Center
   ========================================================================== */

#notificationBell {
    line-height: 1;
}

#notificationBell .bi-bell {
    font-size: 1rem;
}

#notificationBadge {
    min-width: 1.25rem;
    padding: 0.15rem 0.35rem;
}

.notification-dropdown {
    width: 360px;
    max-width: 90vw;
    padding: 0;
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-empty {
    padding: 1.5rem 1rem;
}

.notification-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: background-color 0.15s ease;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item-unread {
    background-color: rgba(13, 110, 253, 0.06);
}

.notification-item-critical.notification-item-unread {
    background-color: rgba(220, 53, 69, 0.08);
    border-left: 3px solid var(--bs-danger, #dc3545);
    padding-left: calc(1rem - 3px);
}

.notification-item-critical strong::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--bs-danger, #dc3545);
    margin-right: 0.4rem;
    vertical-align: middle;
}

.notification-item-actions .btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
}

.notification-item .btn-close {
    font-size: 0.65rem;
    opacity: 0.5;
}

.notification-item .btn-close:hover {
    opacity: 1;
}

[data-theme="dark"] .notification-item-unread {
    background-color: rgba(13, 110, 253, 0.15);
}

[data-theme="dark"] .notification-item-critical.notification-item-unread {
    background-color: rgba(220, 53, 69, 0.18);
}

/* Bell animations */
@keyframes notification-bell-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes notification-bell-jiggle {
    0%, 100% { transform: rotate(0); }
    15%      { transform: rotate(-15deg); }
    30%      { transform: rotate(12deg); }
    45%      { transform: rotate(-10deg); }
    60%      { transform: rotate(8deg); }
    75%      { transform: rotate(-4deg); }
}

.notification-bell-pulse {
    animation: notification-bell-pulse 0.5s ease-out;
}

.notification-bell-jiggle {
    animation: notification-bell-jiggle 0.7s ease-in-out;
}

.notification-bell-jiggle {
    color: var(--bs-danger, #dc3545);
}