/* ==========================================================================
   PagerMon dark mode - layered on top of Bootswatch Paper + style.css
   Active when <html> has class "dark" (default). Toggle: ☀/☾ button in the top bar.
   ========================================================================== */
html.dark {
  --bg: #121417;
  --surface: #1b1e23;
  --surface-2: #23272d;
  --surface-3: #2c3138;
  --border: #353a42;
  --text: #e4e7eb;
  --muted: #9aa3ad;
  --accent: #66bb6a;      /* your green, lightened so it reads on dark */
  --accent-strong: #2e7d32;
  --link: #8ab4f8;
  color-scheme: dark;
}

html.dark, html.dark body, html.dark #wrap { background-color: var(--bg) !important; color: var(--text); }
html.dark a { color: var(--link); }
html.dark a:hover, html.dark a:focus { color: #aecbfa; }
html.dark .text-muted, html.dark .help-block, html.dark small { color: var(--muted); }
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark label, html.dark .control-label, html.dark legend { color: var(--text); }
html.dark hr, html.dark legend { border-color: var(--border); }

/* ---------- Top bar ---------- */
html.dark .navbar, html.dark .navbar-default, html.dark .navbar-fixed-top {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.6) !important;
}
html.dark .navbar-brand, html.dark .navbar-brand:hover, html.dark .navbar-brand:focus { color: var(--accent) !important; }
html.dark .navbar-nav > li > a { background-color: var(--surface-2) !important; color: var(--accent) !important; }
html.dark .navbar-nav > li > a:hover, html.dark .navbar-nav > li > a:focus,
html.dark .navbar-nav > li.active > a, html.dark .navbar-nav > li.open > a,
html.dark .nav > li > a:hover, html.dark .nav > li > a:focus { background-color: var(--surface-3) !important; color: #a5d6a7 !important; }
html.dark .nav > li.active > a, html.dark .nav-tabs > li.active > a { color: #a5d6a7 !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
html.dark .navbar-toggle { background-color: var(--surface-3); border-color: var(--border); }
html.dark .navbar-toggle .icon-bar { background-color: var(--text); }
html.dark .navbar-collapse { border-color: var(--border); }
html.dark .navbar-text { color: var(--muted); }

/* Dropdowns, popovers, modals */
html.dark .dropdown-menu { background-color: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 6px 16px rgba(0,0,0,.6); }
html.dark .dropdown-menu > li > a { color: var(--text); }
html.dark .dropdown-menu > li > a:hover, html.dark .dropdown-menu > li > a:focus { background-color: var(--surface-3); color: #fff; }
html.dark .dropdown-menu > .disabled > a, html.dark .dropdown-menu > .disabled > a:hover { color: #666e78; background: transparent; }
html.dark .dropdown-menu .divider { background-color: var(--border); }
html.dark .popover { background-color: var(--surface-2); border-color: var(--border); color: var(--text); }
html.dark .popover-title { background-color: var(--surface-3); border-bottom-color: var(--border); color: var(--text); }
html.dark .popover.top > .arrow:after { border-top-color: var(--surface-2); }
html.dark .popover.bottom > .arrow:after { border-bottom-color: var(--surface-2); }
html.dark .popover.left > .arrow:after { border-left-color: var(--surface-2); }
html.dark .popover.right > .arrow:after { border-right-color: var(--surface-2); }
html.dark .modal-content { background-color: var(--surface); border-color: var(--border); color: var(--text); }
html.dark .modal-header, html.dark .modal-footer { border-color: var(--border); }
html.dark .close { color: var(--text); text-shadow: none; opacity: .7; }

/* ---------- Message table ---------- */
html.dark .table { color: var(--text); background-color: transparent; }
html.dark .table > thead > tr > th, html.dark .table > tbody > tr > td,
html.dark .table > tbody > tr > th, html.dark .table > tfoot > tr > td { border-color: var(--border) !important; }
html.dark .table > thead > tr > th { color: var(--muted); border-bottom-width: 1px; }
html.dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: #181b1f; }
html.dark .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--bg); }
html.dark .table-hover > tbody > tr:hover, html.dark td.clickable-td:hover { background-color: var(--surface-3) !important; }
html.dark .pagerMessage { color: #f1f3f5; }
/* Alias names were Maroon - far too dark on black */
html.dark [style*="Maroon"], html.dark [style*="maroon"] { color: #ff8a80 !important; }
/* Agency label next to the round icon */
html.dark td strong { color: var(--text); }
/* Highlighted words / map links inside messages */
html.dark .angular-highlight { background-color: rgba(102,187,106,.18); color: #c8e6c9; }
html.dark .angular-highlight:hover, html.dark .angular-highlight:focus { color: #e8f5e9; }
html.dark .pagerMessage a, html.dark .pagerMessage [style*="blue"], html.dark .pagerMessage font[color] { color: var(--link) !important; }
/* Icons in the last column */
html.dark .table td img { background: none; padding: 0; }
/* The black line-art icons (icons8 / thenounproject: lungs, syringe, head...) are turned light grey on the dark background */
html.dark .table td img[src*="icons8"], html.dark .table td img[src*="thenounproject"] { filter: invert(1) brightness(.85); }
/* Coloured / animated icons (fire truck, flashing lights) keep their own colours */
/* Coloured Src / Capcode cells keep their alias colours; just soften the edges */
html.dark .table td[style*="background-color"] { border-color: rgba(0,0,0,.35) !important; }

/* ---------- Search bar, forms, buttons ---------- */
html.dark .form-control, html.dark input, html.dark select, html.dark textarea,
html.dark .input-group-addon {
  background-color: transparent; color: var(--text) !important;
  border-color: var(--border); box-shadow: inset 0 -1px 0 var(--border);
}
html.dark .form-control:focus { box-shadow: inset 0 -2px 0 var(--accent); }
html.dark select.form-control, html.dark select option { background-color: var(--surface-2); color: var(--text); }
html.dark .form-control::placeholder, html.dark input::placeholder { color: #6f7781 !important; }
html.dark .form-control[disabled], html.dark .form-control[readonly], html.dark fieldset[disabled] .form-control { background-color: transparent; color: var(--muted) !important; }
html.dark .has-error .form-control { box-shadow: inset 0 -2px 0 #ef5350; }
html.dark .has-success .form-control { box-shadow: inset 0 -2px 0 var(--accent); }
html.dark .btn-default { background-color: var(--surface-2); color: var(--text); border-color: var(--border); }
html.dark .btn-default:hover, html.dark .btn-default:focus, html.dark .btn-default.active,
html.dark .btn-default:active, html.dark .open > .dropdown-toggle.btn-default { background-color: var(--surface-3); color: #fff; }
html.dark .btn-lg i { color: var(--accent); }
html.dark .btn-lg.disabled i { color: #4f7a52; }
html.dark .checkbox label, html.dark .radio label { color: var(--text); }
html.dark .well, html.dark .panel, html.dark .list-group-item, html.dark .thumbnail {
  background-color: var(--surface); border-color: var(--border); color: var(--text);
}
html.dark .panel-heading, html.dark .panel-footer { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; }
html.dark .alert { box-shadow: 0 4px 12px rgba(0,0,0,.5); }

/* textAngular editor (front-page popup in Settings) */
html.dark .ta-toolbar .btn, html.dark .ta-scroll-window, html.dark .ta-text, html.dark .ta-html { background-color: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* Radio menu icons: the black control-tower icon (Avalon / Melbourne ATC) is turned light in dark mode */
.radio-icon { vertical-align: text-bottom; }
html.dark img[src*="/images/radio/AAV"], html.dark img[src*="/images/radio/MEL"] { filter: invert(1) brightness(.9); }

/* ---------- Pagination ---------- */
html.dark .pagination > li > a, html.dark .pagination > li > span { background-color: var(--surface); color: var(--text); border-color: var(--border) !important; }
html.dark .pagination > li > a:hover, html.dark .pagination > li > span:hover { background-color: var(--surface-3); color: #fff; }
html.dark .pagination > .active > a, html.dark .pagination > .active > span { background-color: var(--accent-strong) !important; color: #fff !important; }
html.dark .pagination > .disabled > a, html.dark .pagination > .disabled > span { color: #5d646d; background-color: var(--surface); }

/* ---------- Footer ---------- */
html.dark #footer, html.dark .footer, html.dark .footer-nav { background-color: var(--surface) !important; color: var(--muted); border-top: 1px solid var(--border); }

/* ---------- Loading overlay ---------- */
html.dark .loading { background-color: rgba(0,0,0,.65); }
html.dark .loading i { color: var(--text); }

/* ---------- Scrollbars ---------- */
html.dark ::-webkit-scrollbar { width: 12px; height: 12px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg); }
html.dark ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 3px solid var(--bg); }

/* ---------- Light/Dark switch button ---------- */
#themeToggle { font-size: 13px; white-space: nowrap; }
#themeToggle .theme-ico { font-size: 16px; vertical-align: -1px; margin-right: 2px; }