/* ============================================================
   Sanctuaryhost Looking Glass — Theme v3
   Matches crm.sanctuaryhost.com twenty-x visual identity
   Uses Bootstrap 5 navbar for reliable responsive layout.
   ============================================================ */

/* ----- FONTS — self-hosted, no CDN dependency ----- */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ----- BASE ----- */
body {
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    color: #2e3442;
    background-color: #eef2ff;
}

a { color: #004fac; text-decoration: none; }
a:hover { color: #003585; }

/* ============================================================
   NAVBAR — Bootstrap 5 component, styled to match twenty-x
   ============================================================ */

#sh-navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e1eaf6;
    box-shadow: 0 1px 6px rgba(11,25,72,0.07);
    padding: 10px 0;
}

/* Logo */
#sh-navbar .navbar-brand { padding: 0; margin-right: 28px; }
#sh-navbar .logo-img     { max-height: 42px; width: auto; display: block; }

/* Nav links — font-size 16px, margin/padding matches twenty-x exactly */
#sh-navbar .navbar-nav .nav-link {
    font-size: 16px;
    color: #2e3442;
    font-weight: 600;
    padding: 5px 0;
    margin: 0 14px;
    position: relative;
    white-space: nowrap;
    transition: color .15s;
    text-decoration: none;
}

/* Blue underline on hover / active — matches twenty-x */
#sh-navbar .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #004fac;
    bottom: 0;
    left: 0;
    transition: width .3s ease-in;
}
#sh-navbar .navbar-nav .nav-link:hover::before,
#sh-navbar .navbar-nav .nav-link.active::before { width: 100%; }

#sh-navbar .navbar-nav .nav-link:hover { color: #2e3442; }
#sh-navbar .navbar-nav .nav-link.active { color: #004fac; }

/* Hamburger */
#sh-navbar .navbar-toggler         { border-color: #dcdee2; }
#sh-navbar .navbar-toggler:focus   { box-shadow: 0 0 0 3px rgba(0,79,172,0.12); }

/* Login / Register — exact twenty-x values */
.login-btn-20i {
    display: inline-block;
    background-color: #004fac;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 22px;
    padding: 7px 18px;
    border-radius: 3px;
    border: 1px solid #004fac;
    text-decoration: none;
    transition: .3s;
    margin-right: 12px;
    white-space: nowrap;
}
.login-btn-20i:hover { background-color: transparent; color: #004fac; }

.register-btn-20i {
    display: inline-block;
    background-color: #464646;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 22px;
    padding: 7px 18px;
    border-radius: 3px;
    border: 1px solid #464646;
    text-decoration: none;
    transition: .3s;
    white-space: nowrap;
}
.register-btn-20i:hover { background-color: transparent; color: #464646; }

/* On mobile, nav links are block — remove ::before underline */
@media (max-width: 1199.98px) {
    #sh-navbar .navbar-nav .nav-link { padding: 10px 0; margin: 0; }
    #sh-navbar .navbar-nav .nav-link::before { display: none; }
    #sh-navbar .navbar-nav .nav-link.active { color: #004fac; }
    #sh-navbar .mobile-actions { padding: 12px 0 4px; border-top: 1px solid #e1eaf6; }
}

/* ============================================================
   BREADCRUMB BAR — matches twenty-x master-breadcrumb exactly
   ============================================================ */

.sh-breadcrumb-bar {
    background-color: #e2e7ec;
    border-bottom: 1px solid #d4dae0;
}
.sh-breadcrumb-bar .breadcrumb {
    padding: 12px 0;
    margin: 0;
    font-size: 13px;
    background: none;
    border-radius: 0;
}
.sh-breadcrumb-bar .breadcrumb-item a {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #7a7a7a;
    text-decoration: none;
}
.sh-breadcrumb-bar .breadcrumb-item a:hover { color: #004fac; }
.sh-breadcrumb-bar .breadcrumb-item.active  { color: #7a7a7a; }
.sh-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before { color: #7a7a7a; }

/* ============================================================
   PAGE WRAPPER
   ============================================================ */

.sh-page { padding: 28px 0 60px; }

/* Page heading */
.sh-page-heading            { margin-bottom: 24px; }
.sh-page-heading h1         { font-size: 22px; font-weight: 700; color: #031b4e; margin: 0 0 4px; }
.sh-page-heading p          { font-size: 14px; color: #6b788b; margin: 0; }

/* ============================================================
   CARDS
   ============================================================ */

.sh-card                    { background: #ffffff; border: 1px solid #dde5f5; border-radius: 6px; margin-bottom: 20px; overflow: hidden; }
.sh-card-header             { background-color: #f8faff; border-bottom: 1px solid #dde5f5; padding: 13px 20px; font-size: 12px; font-weight: 700; color: #031b4e; text-transform: uppercase; letter-spacing: 0.06em; }
.sh-card-body               { padding: 20px; }

/* ============================================================
   LABELS
   ============================================================ */

.sh-label                   { display: block; font-size: 11px; font-weight: 700; color: #6b788b; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */

.form-control, .form-select { font-size: 14px; color: #2e3442; border-color: #d0d8eb; background-color: #ffffff; }
.form-control:focus, .form-select:focus { border-color: #004fac; box-shadow: 0 0 0 3px rgba(0,79,172,0.12); color: #2e3442; }
.form-control[readonly]     { background-color: #f8faff; }
.input-group-text           { font-size: 13px; font-weight: 600; color: #474747; background-color: #f8faff; border-color: #d0d8eb; }
.form-check-input:checked   { background-color: #004fac; border-color: #004fac; }
.form-check-label           { font-size: 13px; color: #474747; }

/* ============================================================
   BUTTONS (LG-specific)
   ============================================================ */

.sh-btn-execute {
    background-color: #004fac;
    color: #fff;
    border: 1px solid #004fac;
    border-radius: 4px;
    padding: 9px 28px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background-color .15s;
}
.sh-btn-execute:hover:not(:disabled) { background-color: #003d85; border-color: #003d85; color: #fff; }
.sh-btn-execute:disabled             { opacity: .65; cursor: default; }

.btn.sh-btn-sm {
    font-size: 13px;
    font-weight: 600;
    color: #2e3442;
    background-color: #ffffff;
    border: 1px solid #d0d8eb;
    border-radius: 4px;
    padding: 6px 14px;
    transition: all .15s;
}
.btn.sh-btn-sm:hover { background-color: #eef2ff; border-color: #004fac; color: #004fac; }

.sh-file-btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #004fac;
    background-color: #eef2ff;
    border: 1px solid #c5d5f0;
    border-radius: 4px;
    padding: 8px 20px;
    text-decoration: none;
    transition: all .15s;
}
.sh-file-btn:hover { background-color: #004fac; color: #fff; border-color: #004fac; }

/* ============================================================
   OUTPUT TERMINAL
   ============================================================ */

#outputCard {
    background-color: #0d1426;
    border: 1px solid #1e2e50;
    border-radius: 6px;
    color: #c4d4f0;
    padding: 16px;
    margin-top: 16px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

#outputContent { color: inherit; font-size: 12.5px; line-height: 1.65; margin: 0; white-space: pre-wrap; word-break: break-all; }

/* ============================================================
   IPERF CODE BLOCKS
   ============================================================ */

.sh-cmd {
    background-color: #f4f6fb;
    border: 1px solid #dde5f5;
    border-radius: 4px;
    padding: 10px 14px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    color: #2e3442;
    margin-bottom: 8px;
    word-break: break-all;
}

/* ============================================================
   ALERTS / DROPDOWNS
   ============================================================ */

.alert                              { font-size: 14px; border-radius: 4px; }
.alert-danger                       { border-left: 3px solid #eb243b; }
.dropdown-menu                      { font-size: 14px; border-color: #dde5f5; box-shadow: 0 4px 16px rgba(11,25,72,0.12); }
.dropdown-item:hover, .dropdown-item:focus { background-color: #eef2ff; color: #004fac; }

/* ============================================================
   FOOTER — matches twenty-x footer
   ============================================================ */

#sh-footer              { background-color: #ffffff; border-top: 1px solid #dde5f5; padding: 24px 0; margin-top: 20px; font-size: 13px; }
#sh-footer .nav-link    { color: #6b788b; font-size: 13px; padding: 4px 12px 4px 0; }
#sh-footer .nav-link:hover { color: #004fac; }
#sh-footer .copyright   { color: #6b788b; margin: 0; }