html {
  font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────────────────
   App chrome only. The brand/semantic color SYSTEM (echoblue/action, admin,
   medium-gray, hero, ribbon, dark-mode overrides) and all design tokens live in
   echobot-theme.css, which loads before this file. Reference --eb-* tokens here
   rather than hardcoding brand hex.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Scope switcher ──────────────────────────────────────────────────────── */
.scope-switcher-label { font-size: 0.85rem; }

/* Inline variant (in page content): single line "For: <name> v" reading as plain text. */
.scope-switcher-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

/* Sidebar variant: a nav-main item. The icon stays in mini-mode; the "For:" label + picker
   sit in the name area (smini-hidden) and appear when the sidebar expands, like a normal link. */
.scope-switcher-sidebar .nav-main-link { cursor: default; }
.scope-switcher-sidebar .scope-switcher-body {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.scope-switcher-sidebar .scope-switcher-label { white-space: nowrap; }
.scope-switcher-sidebar .scope-switcher-picker { flex: 1 1 auto; min-width: 0; }
.scope-switcher-sidebar .k-combobox,
.scope-switcher-sidebar .k-dropdownlist,
.scope-switcher-sidebar .k-widget { width: 100% !important; min-width: 0; }

/* ── Minimal picker: make the closed DropDownList read as plain text + caret ── */
.scope-switcher-inline .k-dropdownlist,
.scope-switcher-sidebar .k-dropdownlist {
    border: none;
    background: transparent;
    box-shadow: none;
}
.scope-switcher-inline .k-dropdownlist {
    width: auto;
    min-width: 0;
    cursor: pointer;
    border-radius: 0.25rem;
}
.scope-switcher-inline .k-dropdownlist:hover { background: rgba(0, 0, 0, 0.05); }
.scope-switcher-inline .k-dropdownlist .k-input-inner { padding: 0.1rem 0.15rem 0.1rem 0.3rem; font-weight: 600; }
.scope-switcher-inline .k-dropdownlist .k-input-value-text { font-weight: 600; }
.scope-switcher-inline .k-dropdownlist .k-input-button,
.scope-switcher-inline .k-dropdownlist .k-button { padding: 0; width: 1.1rem; min-width: 0; color: inherit; }

/* Keep the sidebar scope-switcher row the SAME height collapsed (icon only) vs expanded
   (icon + picker). Otherwise showing the Kendo picker on hover grows this first row and shoves
   the whole menu down a few px. Lock it to a normal nav-main-link height (min-height 2.25rem)
   and compact the picker so it fits without clipping. */
.scope-switcher-sidebar .scope-switcher-link {
    height: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
}
.scope-switcher-sidebar .k-dropdownlist,
.scope-switcher-sidebar .k-dropdownlist .k-input-inner,
.scope-switcher-sidebar .k-dropdownlist .k-input-button {
    min-height: 0;
}
.scope-switcher-sidebar .k-dropdownlist .k-input-inner {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;
}

/* Compact per-page access indicator (rendered by _AccessStatusBanner). */
.access-status-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 0.25rem;
    padding: 0.15rem 0.45rem;
    margin-bottom: 0.5rem;
    cursor: default;
}
.access-status-readonly {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffe69c;
}
.access-status-none {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
.access-status-granular {
    background-color: #cff4fc;
    color: #055160;
    border: 1px solid #b6effb;
}

/* ── Read-only page mode (used by access-status banner consumers) ────────── */
.access-readonly form,
.access-readonly .k-grid,
.access-readonly .page-actions-bottom,
.access-readonly button:not(.scope-switcher-picker):not([data-bs-toggle]):not(.view-toggle),
.access-readonly input,
.access-readonly select,
.access-readonly textarea {
    pointer-events: none;
    user-select: none;
}
.access-readonly button:not([data-scope-switcher] *):not(.btn-close):not([data-bs-toggle]):not(.view-toggle),
.access-readonly input:not([data-scope-switcher] *),
.access-readonly select,
.access-readonly textarea {
    opacity: 0.6;
}
.access-readonly [data-scope-switcher] *,
.access-readonly [data-scope-switcher] {
    pointer-events: auto !important;
    opacity: 1 !important;
}
/* Permission radio groups: pointer-events:none on the <input> alone doesn't stop a click on the
   surrounding <label> from toggling it, so disable the whole group (and dim it) in read-only. */
.access-readonly .permission-radios {
    pointer-events: none;
    opacity: 0.6;
}

/* ── No-access page mode ─────────────────────────────────────────────────── */
.access-none .access-content { display: none !important; }

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
 /* margin-bottom: 60px;*/
}

.typing-container {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap; /* Prevents text wrapping */
  margin: 0 auto;
  font-family: monospace;
  font-size: 1.2em;
}

/* Typing Animation */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
  100% { white-space: normal; width: 100%; }
}

/* Blinking Cursor */
@keyframes blink-caret {
  0%, 100% { border-color: transparent; }
  50% { border-color: #000; }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes zoomIn{
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        color: transparent;
    }

    50%{
        color: transparent;
    }

    100% {
        opacity: 1;
        color: #343a40;
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

.fadeIn {
    animation-name: fadeIn;
}

.zoomIn{
    animation-name: zoomIn;
}

.animated {
    animation-duration: 1.5s;
    animation-fill-mode: both;
}

/* Apply the animations */
.typing-text {
    display: inline-block;
    border-right: .15em solid #333; /* Creates a cursor effect */
    animation: typing 2s steps(60, end) forwards, blink-caret 0.75s step-end 3;
    padding-right: .5em;
    /*white-space: nowrap;*/
    overflow: hidden;
    width: 95%;
    max-width: 95%;
    word-wrap: break-word;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.custom-container{
    justify-content: space-evenly !important;
}
    .custom-container .navbar-nav li {
        margin: 0px 5px;
    }

.input-helper-text {
    margin-left: 10px;
    margin-top: 5px;
    font-size: .9rem;
}

    .input-helper-text:before {
        font-weight: 900;
        content: "\21b3 ";
        margin-right: 5px;
    }

.form-control.invalid {
    border-color: var(--eb-danger);
}

    .form-control.invalid:focus {
        border-color: var(--eb-danger);
        box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
    }

/* Inline text links (unclassed <a> in body copy) get a 2px bottom "border" drawn with an INSET
   box-shadow, so it reads as a thick underline WITHOUT affecting layout (no content shift like a
   real border-bottom would cause). Classed links (.btn, .nav-link, badges, etc.) are excluded. */
a:not([class]) {
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 currentColor;
}

/* ===== Sidebar Layout (flexbox for bottom-pinned profile) ===== */

#sidebar {
    display: flex;
    flex-direction: column;
}

#sidebar .bg-header-dark {
    flex-shrink: 0;
}

#sidebar .js-sidebar-scroll {
    flex: 1;
    min-height: 0;
    height: auto !important;
}

.sidebar-bottom-profile {
    flex-shrink: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.sidebar-bottom-profile .content-side {
    overflow: visible;
}

/* ===== Sidebar User Profile (dropup menu) ===== */

.sidebar-user-ellipsis {
    margin-left: auto;
    opacity: 0.6;
    font-size: 0.875rem;
}

.sidebar-user-menu {
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-mini.sidebar-o #sidebar:not(:hover) .sidebar-user-menu {
    display: none !important;
}

/* Flyout child menu inside a dropdown (the sidebar "Admin" group). Opens to the right on hover,
   anchored to the bottom of its parent item so it grows upward — safe near the bottom of the viewport. */
.dropdown-submenu {
    position: relative;
}

.dropdown-item-submenu {
    display: flex !important;
    align-items: center;
}

.dropdown-submenu > .dropdown-menu {
    position: absolute;
    left: 100%;
    right: auto;
    bottom: 0;
    top: auto;
    margin: 0 0 0 0.125rem;
    display: none;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
    display: block;
}

/* In sidebar mini mode, #sidebar carries overflow-x:hidden — the clip that produces the icons-only
   collapse. It ALSO clips this right-opening Admin flyout (left:100%), so in mini mode the flyout was
   cut off at the sidebar edge and disappeared under the main content. Lift the clip only while the
   flyout is actually open: by then the sidebar is hover-expanded and at rest, so there's no spill of
   the collapse animation, and #sidebar's z-index (1032) paints the flyout above the content. */
@media (min-width: 992px) {
    .sidebar-mini.sidebar-o #sidebar:has(.dropdown-submenu:hover, .dropdown-submenu:focus-within) {
        overflow: visible;
    }
}

/* ── Pin the mini sidebar open while the scope-switcher popup is open ──────────────
   The mini→expanded reveal is driven purely by #sidebar:hover. The scope switcher is a Kendo
   dropdown whose list is appended to <body>, so moving the mouse from the anchor onto the list
   drops #sidebar:hover and the sidebar collapses mid-selection. scope-switcher.js adds
   .js-sidebar-pinned to #sidebar on the dropdown's open and removes it on close; the rules below
   mirror Dashmix's :hover expansion so the sidebar stays expanded until the popup closes — after
   which normal :hover takes over (mouse still over the sidebar → stays open; off it → collapses). */
@media (min-width: 992px) {
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned,
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .content-side,
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .content-header {
        transform: translateX(0);
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .nav-main {
        transform: translateX(0);
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .nav-main .nav-main-link-icon {
        transform: translateX(0);
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .nav-main .nav-main-heading,
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .nav-main .nav-main-link-name,
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .nav-main .nav-main-link-badge {
        opacity: 1;
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .smini-hide {
        opacity: 1;
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .smini-show {
        opacity: 0;
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .smini-hidden {
        display: inline-block;
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .smini-visible,
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .smini-visible-block {
        display: none;
    }
    .sidebar-mini.sidebar-o #sidebar.js-sidebar-pinned .nav-main > .nav-main-item > .nav-main-submenu {
        display: block;
    }
}

/* ===== Sticky Page Heading ===== */

.sticky-page-heading {
    position: sticky;
    top: 3.6rem;               /* matches the compacted fixed-header height below */
    z-index: 1020;             /* below header (1030), above content */
    margin-top: -1.75rem;      /* absorb .content padding-top */
    padding-top: 1rem !important; /* match pb-3; !important overrides .content > .content-heading:first-child */
    margin-left: -1.75rem;     /* bleed into .content padding so bg is edge-to-edge */
    margin-right: -1.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

@media (max-width: 767.98px) {
    .sticky-page-heading {
        margin-top: -0.875rem;     /* absorb mobile .content padding-top */
        margin-left: -0.875rem;
        margin-right: -0.875rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
}

/* ===== Compact header bar + sidebar menu header =====
   Dashmix's default is 4.25rem; trim ~15% to 3.6rem and tighten the horizontal padding.
   .content-header drives BOTH the top bar and the sidebar header, so they shrink together.
   The fixed-header padding-top and the sticky-page-heading top (above) are kept in sync. */
.content-header { height: 3.6rem; }
#page-container.page-header-fixed #main-container { padding-top: 3.6rem; }
#page-header .content-header { padding-left: 0.75rem; padding-right: 0.75rem; }
@media (min-width: 768px) {
    #page-header .content-header { padding-left: 1.5rem; padding-right: 1.5rem; }
}
#sidebar .content-header, #side-overlay .content-header { padding-left: 1rem; padding-right: 1rem; }

/* ===== Compact footers =====
   Page footer (Dashmix default min-height 4.375rem) and the sidebar bottom-profile
   footer (default .content-side padding 1.125rem) both trimmed ~25%. The page footer's
   height is min-height-driven; the sidebar footer's is padding-driven, so each is cut
   at its own source.
   Shared bottom-bar height token --eb-bottom-bar-h is defined in echobot-theme.css; it lines
   the page footer + sidebar bottom-profile footer up with the sticky .page-actions-bottom
   toolbar when it docks. */

#page-footer { min-height: var(--eb-bottom-bar-h); }

/* The sidebar footer's height was driven by the inner nav list (btn-sized row + a Bootstrap
   reboot ul margin-bottom of 1rem), not the .content-side padding. Center the row in a fixed
   bar matching --eb-bottom-bar-h, kill the dead ul margin, and trim the link row. Scoped to
   .sidebar-bottom-profile so the main sidebar nav links are untouched. */
.sidebar-bottom-profile { display: flex; align-items: center; min-height: var(--eb-bottom-bar-h); }
.sidebar-bottom-profile .content-side { width: 100%; padding-top: 0.2rem; padding-bottom: 0.2rem; }
.sidebar-bottom-profile .nav-main { margin-bottom: 0; }
.sidebar-bottom-profile .nav-main-link { min-height: 2rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }

.nav-main-submenu {
    padding-left: 1.5rem !important;
}

/* Sidebar text contrast — xplay's defaults read too light: links #3f474e, submenu links #626d78
   (4.9:1), and the section heading. The VISIBLE text is the .nav-main-link-name span (it just
   inherits the link color), so set a strong near-black on the link AND the name span explicitly,
   plus darken the "Settings" heading. xplay's :hover/.active rules (#000) out-specify these, so
   hover/active emphasis is preserved. */
#page-container #sidebar .nav-main-link,
#page-container #sidebar .nav-main-link .nav-main-link-name,
#page-container #sidebar .nav-main-submenu .nav-main-link,
#page-container #sidebar .nav-main-submenu .nav-main-link .nav-main-link-name {
    color: #23272b;                                              /* ~12.6:1 on the white sidebar */
}
#page-container #sidebar .nav-main-heading { color: #2f353b; }   /* "Settings" subheader — ~10.5:1 */

@media (min-width: 768px) {
    .content {
        padding: 1.2rem 1.75rem 1px;

    }
}

#main-container > .row > [class*="col-"] > .content > .container-fluid:not(.container-fluid ~ .container-fluid) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#page-container{
    background-color: var(--eb-page-bg) !important;
}

/* Default H1 = the page-title/header treatment. H1 is only ever used as a page heading, so the
   header look (heading-bg band + .fs-3 size + .fw-semibold + bottom border) is baked in as the
   default — matching the layout's page title. The layout's sticky page heading then layers sticky
   positioning + edge-to-edge bleed on top via .sticky-page-heading (and mb-0/pb-3 utilities). */
h1 {
    background-color: var(--eb-heading-bg);
    font-size: 1.75rem;          /* = .fs-3, the size used on the page header */
    font-weight: 600;            /* = .fw-semibold */
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

/* Default H2 = section-header treatment: normal heading text with a base-danger (our primary
   red) bottom rule. Matches the style-guide section headers. */
h2 {
    border-bottom: 2px solid var(--eb-btn-danger);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

/* Legacy explicit alias — now identical to the default h1 background. */
.h1-bg {
    background-color: var(--eb-heading-bg) !important;
}