/* Copyright (c) 2026 Byrnes I.T. Services. All rights reserved. Proprietary - not for redistribution. */
/* BITS Email Relay - layout and small helpers on top of Bootstrap 5 */
:root { --bits-navy: #11185e; --bits-navy-2: #1d2680; --bits-bg: #f4f6fa; }
body { background: var(--bits-bg); min-height: 100vh; display: flex; flex-direction: column; }

.topbar { background: #fff; border-bottom: 3px solid var(--bits-navy); display: flex;
          align-items: center; justify-content: space-between; padding: .5rem 1rem; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { display: inline-block; line-height: 0; }
.brand-logo img { height: 34px; width: auto; }
.brand-name { color: var(--bits-navy); font-weight: 700; font-size: 1.35rem; margin-left: .6rem;
              letter-spacing: .02em; }
.topbar-right { display: flex; align-items: center; }
/* Tenant view (global admins): the title bar picker and the bar shown while a tenant is chosen */
.tenant-view-form .form-select { width: auto; max-width: 220px; display: inline-block; }
.tenant-view-bar { background: #5b2a86; color: #fff; padding: 6px 16px; font-size: .9rem; }

.layout { display: flex; flex: 1; }
.sidebar { width: 215px; flex-shrink: 0; background: var(--bits-navy); padding: .75rem 0; }
.sidebar .nav-heading { color: #9aa3e0; font-size: .7rem; text-transform: uppercase;
                        letter-spacing: .08em; padding: .9rem 1.1rem .25rem; }
.sidebar .nav-link { color: #e6e8f7; padding: .35rem 1.1rem; display: block; font-size: .92rem; }
.sidebar .nav-link:hover { background: var(--bits-navy-2); color: #fff; }
.sidebar .nav-link.active { background: #fff; color: var(--bits-navy); font-weight: 600; }
/* Pop-out group (e.g. Mail Flow): its items open to the right on hover, or on click / keyboard focus (tablets). */
.sidebar .nav-group { position: relative; }
.sidebar .nav-group-label { cursor: pointer; }
.sidebar .nav-group-label::after { content: "\203A"; float: right; opacity: .7; }
.sidebar .nav-sub { display: none; position: absolute; left: 100%; top: 0; z-index: 1050; min-width: 200px;
                    background: var(--bits-navy); padding: .35rem 0; border-radius: 0 .35rem .35rem 0;
                    box-shadow: 4px 4px 14px rgba(0, 0, 0, .25); }
.sidebar .nav-group:hover .nav-sub, .sidebar .nav-group:focus-within .nav-sub { display: block; }
.sidebar .nav-group:hover > .nav-group-label { background: var(--bits-navy-2); color: #fff; }
.sidebar .nav-group:hover > .nav-group-label.active { background: #fff; color: var(--bits-navy); }
/* Footer sits under the content (not under the sidebar), so the navy bar runs to the bottom. */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: 1.5rem; min-width: 0; }
.footer { text-align: center; font-size: .75rem; color: #8a90a6; padding: .6rem; }

@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; display: flex; flex-wrap: wrap; }
  .sidebar .nav-heading { display: none; }
  /* Narrow screens: the menu wraps in rows - a group's items are simply shown with the rest. */
  .sidebar .nav-group { display: contents; }
  .sidebar .nav-group-label { display: none; }
  .sidebar .nav-sub, .sidebar .nav-group:hover .nav-sub, .sidebar .nav-group:focus-within .nav-sub { display: contents; }
}

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

/* Copyable monospace values: only the value is copied, never the button. */
.copyable { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.copy-value { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: .95rem;
              color: #1b1f3b; background: #eef0f8; padding: .1rem .35rem; border-radius: .25rem;
              user-select: all; }
.btn-copy { border: 1px solid #c8cce0; background: #fff; border-radius: .25rem; font-size: .8rem;
            line-height: 1; padding: .15rem .35rem; visibility: hidden; cursor: pointer; user-select: none; }
.copyable:hover .btn-copy, .btn-copy:focus { visibility: visible; }
.btn-copy.copied { background: #198754; color: #fff; border-color: #198754; visibility: visible; }
.mono { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; }
.dns-value { font-family: Consolas, monospace; font-size: .8rem; word-break: break-all;
             white-space: normal; user-select: all; }
.dns-value + .btn-copy { visibility: visible; }

.table td, .table th { vertical-align: middle; }
.card { border: 0; box-shadow: 0 1px 3px rgba(17,24,94,.08); }
.log-line { font-family: Consolas, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-all; }
.stat { font-size: 1.8rem; font-weight: 700; color: var(--bits-navy); }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.dot-green { background: #198754; } .dot-amber { background: #fd7e14; } .dot-red { background: #dc3545; }
.dot-grey { background: #adb5bd; }

/* Settings: cards flow in two columns, each only as tall as its content
   (no gaps from a short card sitting next to a long one). */
.settings-columns { column-gap: 1.5rem; }
@media (min-width: 1200px) { .settings-columns { column-count: 2; } }
.settings-columns > .card { break-inside: avoid; display: inline-flex; width: 100%; margin-bottom: 1.5rem; }
/* Short numeric settings don't need the full width. */
.settings-number { max-width: 10rem; }

/* API documentation */
.api-method { display: inline-block; min-width: 4.2rem; text-align: center; font: 600 .75rem/1.6 Consolas, monospace;
              border-radius: .25rem; color: #fff; padding: 0 .4rem; }
.api-get { background: #198754; } .api-post { background: #0d6efd; } .api-patch { background: #fd7e14; } .api-delete { background: #dc3545; }
.api-code { position: relative; }
.api-code pre { background: #f6f7fb; border: 1px solid #dee2e6; border-radius: .25rem; padding: .6rem 2.4rem .6rem .75rem; margin: 0;
                font-size: .8rem; white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow: auto; }
.api-code .btn-copy { position: absolute; top: .35rem; right: .35rem; visibility: visible; }
@media (min-width: 1200px) { .api-toc { position: sticky; top: 1rem; } }
.api-toc a { text-decoration: none; }

/* Clickable table rows (see app.js) */
tr[data-href] { cursor: pointer; }

/* Masked secrets (relay passwords): dots until the eye button is pressed. */
.copyable.always .btn-copy { visibility: visible; }
.btn-reveal { border: 1px solid #c8cce0; background: #fff; border-radius: .25rem; line-height: 1;
              padding: .15rem .35rem; cursor: pointer; color: #4a5070; }
.btn-reveal.on { background: #eef0f8; color: var(--bits-navy); }
.copy-value.masked { letter-spacing: .05em; }

/* Small layout helpers (the security policy blocks style="" attributes, so pages use these). */
.break-all { word-break: break-all; }
.cell-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-inline { vertical-align: -2px; }
.w-24 { width: 24px; } .w-90 { width: 90px; } .w-140 { width: 140px; } .w-150 { width: 150px; } .w-180 { width: 180px; }
.w-2rem { width: 2rem; }
.mw-260 { max-width: 260px; } .mw-280 { max-width: 280px; } .mw-320 { max-width: 320px; } .mw-400 { max-width: 400px; }
.mw-10rem { max-width: 10rem; } .mw-14rem { max-width: 14rem; } .mw-28rem { max-width: 28rem; }
.mw-32rem { max-width: 32rem; } .mw-48rem { max-width: 48rem; }
.login-top { margin-top: 12vh; }
.mail-frame { width: 100%; height: 600px; border: 1px solid #dee2e6; background: #fff; }

/* Edge server health graphs (inline SVG): shrink to fit on a phone. */
.sparkline { display: block; max-width: 100%; height: auto; }

/* Help: the small (?) next to an option (inc/help.php help_link) and the Help page. */
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: 50%;
             border: 1px solid #8a90a6; color: #5c6378; font-size: .7rem; font-weight: 700; line-height: 1; text-decoration: none;
             vertical-align: .1em; margin-left: .2rem; }
a.help-link:hover { background: var(--bits-navy); border-color: var(--bits-navy); color: #fff; }
@media (min-width: 992px) { .help-toc { position: sticky; top: 1rem; } }
.help-toc a { text-decoration: none; }
.help-topic { scroll-margin-top: 1rem; }
.help-topic:target { box-shadow: 0 0 0 .2rem rgba(42, 52, 140, .35); }

/* Long forms split into titled sections (e.g. the edge server form) */
.form-section { border-top: 1px solid #e3e6ea; padding-top: 1rem; margin-top: 1.25rem; }
.form-section-first { border-top: 0; padding-top: 0; margin-top: .5rem; }
.form-section-title { font-weight: 600; color: var(--bits-navy); margin-bottom: .5rem; }
.form-section-intro { font-size: .875rem; color: #6c757d; margin: -.25rem 0 .75rem; }
details.form-section > summary { cursor: pointer; margin-bottom: 0; }