/* Frontline 365 Monitor — App Styles */

:root {
  --fl-bg: #0a0f1e;
  --fl-surface: #111827;
  --fl-surface-2: #1f2937;
  --fl-border: #1f2937;
  --fl-text: #e2e8f0;
  --fl-muted: #6b7280;
}

body {
  background-color: var(--fl-bg);
  color: var(--fl-text);
  font-size: 0.9rem;
}

/* Sidebar shell */
.fl-shell {
  display: flex;
  min-height: 100vh;
}

.fl-main {
  flex: 1;
  min-width: 0; /* so wide tables scroll inside their own container instead of pushing the sidebar */
}

.fl-sidebar {
  --bs-offcanvas-width: 260px;
  width: 260px;
  flex-shrink: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0d1525;
  border-right: 1px solid #1e293b;
  box-shadow: 1px 0 12px rgba(0,0,0,.5);
}

/* Desktop: keep the sidebar in view while the page scrolls (2026-10-08 — it used to scroll away with the
   page, leaving an empty strip). Its own nav still scrolls inside it when the menu is longer than the
   screen. Below lg it's Bootstrap's off-canvas, which positions itself. */
@media (min-width: 992px) {
  .fl-sidebar { position: sticky; top: 0; align-self: flex-start; }
}

.fl-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem .9rem;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
}

.fl-sidebar-brand a {
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--fl-text);
}

.fl-nav {
  flex: 1;
  overflow-y: auto;
  padding: .6rem 0;
}

.fl-sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid #1e293b;
  padding: .4rem 0;
}

.fl-nav-link {
  display: flex;
  align-items: center;
  margin: .1rem .5rem;
  padding: .55rem .75rem;
  border-radius: .375rem;
  color: var(--fl-muted);
  font-size: .85rem;
  text-decoration: none;
}

.fl-nav-link:hover {
  background: var(--fl-surface-2);
  color: var(--fl-text);
}

.fl-nav-link.active {
  background: var(--fl-surface-2);
  color: #60a5fa;
}

.fl-nav-trailing {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
}

.fl-nav-chevron {
  font-size: .7rem;
  transition: transform .15s ease;
}

.fl-nav-section-toggle:not(.collapsed) .fl-nav-chevron {
  transform: rotate(180deg);
}

/* Collapsible card widgets (e.g. companies/onboarding.php) — same chevron-rotation mechanism as the
   nav's own .fl-nav-section-toggle above, reused on a card-header trigger instead of a nav link. */
.fl-card-toggle {
  cursor: pointer;
}
.fl-card-toggle:not(.collapsed) .fl-nav-chevron {
  transform: rotate(180deg);
}

.fl-nav-sublink {
  display: block;
  margin: 0 .5rem;
  padding: .45rem .75rem .45rem 2.1rem;
  border-radius: .375rem;
  color: var(--fl-muted);
  font-size: .82rem;
  text-decoration: none;
}

.fl-nav-sublink:hover {
  background: var(--fl-surface-2);
  color: var(--fl-text);
}

.fl-nav-subheader {
  padding: .6rem .75rem .2rem 2.1rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fl-muted);
  opacity: .75;
}

/* A clickable, collapsible variant of .fl-nav-subheader — for sub-sections nested one level
   inside a top-level .fl-nav-section (e.g. Backups/Email Security/Microsoft 365 inside Proactive
   Posture). Combine with .fl-nav-link (hover/active colour) and .fl-nav-section-toggle (chevron
   rotation on expand, which is driven purely by Bootstrap's own .collapsed toggling and isn't
   scoped to any particular nesting depth). */
.fl-nav-subsection-toggle {
  padding-left: 1.6rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .85;
}
.fl-nav-subsection-toggle .fl-nav-chevron {
  font-size: .6rem;
}

.fl-nav-divider {
  margin: .4rem .9rem;
  border-color: #1e293b;
  opacity: 1;
}

.fl-mobile-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  background: #0d1525;
  border-bottom: 1px solid #1e293b;
}

.fl-mobile-toggle {
  background: transparent;
  border: 1px solid #1e293b;
  border-radius: .375rem;
  color: var(--fl-text);
  padding: .3rem .6rem;
  font-size: 1.1rem;
}

.fl-mobile-brand {
  display: flex;
  align-items: center;
}

/* Cards */
.card {
  background: var(--fl-surface);
  border-color: var(--fl-border) !important;
}

.card-header {
  background: var(--fl-surface-2);
  border-bottom: 1px solid var(--fl-border);
  padding: .75rem 1.25rem;
}

/* Stat Cards */
.stat-card {
  transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  color: var(--fl-muted);
  font-size: .8rem;
  margin-top: 2px;
}

/* Deploy method widgets */
.deploy-method-card {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.deploy-method-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

.deploy-method-card[aria-expanded="true"] {
  border-color: #3b82f6 !important;
  background: var(--fl-surface-2);
}

/* Tables */
.table {
  color: var(--fl-text);
  --bs-table-hover-bg: rgba(255,255,255,.03);
  --bs-table-border-color: var(--fl-border);
}

/* Bootstrap's coloured rows (table-warning etc.) are light-theme pastels; with the light text above
   they were white on cream. Dark tints instead, keeping the normal text colour. */
.table-warning, .table-danger, .table-success, .table-info, .table-light {
  --bs-table-color: var(--fl-text);
  --bs-table-hover-color: var(--fl-text);
  --bs-table-striped-color: var(--fl-text);
  --bs-table-active-color: var(--fl-text);
  --bs-table-border-color: var(--fl-border);
  color: var(--fl-text);
}
.table-warning { --bs-table-bg: rgba(255,193,7,.14);  --bs-table-hover-bg: rgba(255,193,7,.2);  --bs-table-striped-bg: rgba(255,193,7,.17);  --bs-table-active-bg: rgba(255,193,7,.22); }
.table-danger  { --bs-table-bg: rgba(220,53,69,.16);  --bs-table-hover-bg: rgba(220,53,69,.22); --bs-table-striped-bg: rgba(220,53,69,.19); --bs-table-active-bg: rgba(220,53,69,.24); }
.table-success { --bs-table-bg: rgba(25,135,84,.16);  --bs-table-hover-bg: rgba(25,135,84,.22); --bs-table-striped-bg: rgba(25,135,84,.19); --bs-table-active-bg: rgba(25,135,84,.24); }
.table-info    { --bs-table-bg: rgba(13,202,240,.12); --bs-table-hover-bg: rgba(13,202,240,.18); --bs-table-striped-bg: rgba(13,202,240,.15); --bs-table-active-bg: rgba(13,202,240,.2); }
.table-light   { --bs-table-bg: var(--fl-surface-2);  --bs-table-hover-bg: var(--fl-surface-2); --bs-table-striped-bg: var(--fl-surface-2); --bs-table-active-bg: var(--fl-surface-2); }

.table thead th {
  background: var(--fl-surface-2);
  color: var(--fl-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  border-bottom-color: var(--fl-border);
  padding: .75rem 1rem;
}

/* Long tables in a card: cap the height and scroll, keeping the column headings in view. */
.fl-scroll-table { max-height: min(420px, 60vh); overflow-y: auto; }
/* collapsed borders don't travel with a sticky cell, so draw the divider as a shadow */
.fl-scroll-table thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--fl-border); }

.table td {
  padding: .7rem 1rem;
  border-color: var(--fl-border);
  vertical-align: middle;
}

/* Forms */
.form-control, .form-select {
  background-color: var(--fl-surface-2);
  border-color: #374151;
  color: var(--fl-text);
}

.form-control:focus, .form-select:focus {
  background-color: var(--fl-surface-2);
  border-color: #3b82f6;
  color: var(--fl-text);
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
}

.form-control::placeholder { color: #4b5563; }

.input-group-text {
  background-color: var(--fl-surface-2);
  border-color: #374151;
  color: var(--fl-muted);
}

/* List Groups */
.list-group-item {
  background-color: transparent;
  border-color: var(--fl-border);
  color: var(--fl-text);
}

/* Country Picker */
.country-picker {
  max-height: 320px;
  overflow-y: auto;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
}

.country-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background .1s;
}

.country-item:hover {
  background: var(--fl-surface-2);
}

.country-item input[type=checkbox] {
  flex-shrink: 0;
  cursor: pointer;
}

.country-item label {
  cursor: pointer;
  font-size: .83rem;
  line-height: 1.3;
  margin: 0;
}

/* Country Rules Table */
#countryRulesTable th {
  font-size: .75rem;
}

/* M365 Snapshot — Formatted JSON tree */
.json-tree {
  font-size: .82rem;
  font-family: var(--bs-font-monospace, monospace);
}

.json-tree-node > summary {
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}

.json-tree-node > summary::-webkit-details-marker { display: none; }

.json-tree-node > summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--fl-muted);
}

.json-tree-node[open] > summary::before {
  content: "▾";
}

.json-tree-child,
.json-tree-leaf {
  padding: 2px 0 2px 16px;
  margin-left: 5px;
  border-left: 1px dashed var(--fl-border);
}

.json-tree-bool-true { color: #16a34a; font-weight: 600; }
.json-tree-bool-false { color: #dc2626; font-weight: 600; }
.json-tree-null { color: var(--fl-muted); font-style: italic; }
.json-tree-num { color: #60a5fa; }
.json-tree-str { color: var(--fl-text); }

/* Login page */
.login-card .card {
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* Badges */
.badge {
  font-weight: 500;
}

/* Spinner */
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Nav tabs */
.nav-tabs {
  border-bottom-color: var(--fl-border);
}

.nav-tabs .nav-link {
  color: var(--fl-muted);
  border: 1px solid transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--fl-text);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  background: var(--fl-surface);
  border-color: var(--fl-border) var(--fl-border) var(--fl-surface);
  color: #60a5fa;
}

/* Modal */
.modal-content {
  background: var(--fl-surface);
  border-color: var(--fl-border);
}

.modal-header {
  border-color: var(--fl-border);
}

/* Azure user list */
.azure-user-item {
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .1s;
}

.azure-user-item:hover {
  background: var(--fl-surface-2);
}

.azure-user-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e40af, #0891b2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: .9rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Responsive */
@media (max-width: 576px) {
  .country-grid { grid-template-columns: 1fr 1fr; }
}

/* Presence — "who's viewing this" avatar stacks (assets/js/presence.js). Overlapping circles,
   newest on top; the enter/leave classes give the "slowly populates and expands/contracts" feel
   Tristram asked for instead of avatars just popping in/out instantly. */
.presence-avatar-row {
  display: flex;
  align-items: center;
}
.presence-avatar-wrap {
  display: inline-flex;
  margin-left: -8px;
  border: 2px solid var(--fl-surface);
  border-radius: 50%;
  transition: opacity .25s ease, transform .25s ease, margin-left .25s ease;
  opacity: 1;
  transform: scale(1);
}
.presence-avatar-wrap:first-child { margin-left: 0; }
.presence-avatar-wrap.presence-enter {
  opacity: 0;
  transform: scale(.4);
  margin-left: -20px;
}
.presence-avatar-wrap.presence-leave {
  opacity: 0;
  transform: scale(.4);
}
.presence-list-cell {
  min-height: 28px;
}
.presence-list-cell .presence-avatar-wrap { border-color: var(--fl-surface-2); }