/* Hide Spectrum custom elements until their definitions have loaded, to avoid
   FOUC / layout shift on reload while elements.min.js is still parsing. */
sp-theme:not(:defined) {
  visibility: hidden;
}

/* ----- Bootstrap baseline tweaks ----- */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ----- IPMP shell: top bar + collapsible sidebar + main ----- */

:root,
:root[data-theme="light"] {
    --ipmp-sidebar-w: 260px;
    --ipmp-topbar-h: 56px;
    --ipmp-border: #e8ddd3;
    --ipmp-bg: #f5efea;
    --ipmp-surface: #ffffff;
    --ipmp-surface-2: #ece3da;
    --ipmp-text: #2a1518;
    --ipmp-muted: #7a6a6a;
    --ipmp-accent: #7a1e2d;
    --ipmp-accent-strong: #5c1520;
    --ipmp-accent-soft: #f4e5e8;
    --ipmp-shadow: 0 1px 2px rgba(92, 21, 32, .06);
    --ipmp-overlay: rgba(60, 20, 28, .35);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --ipmp-border: #2a2f3a;
    --ipmp-bg: #14171c;
    --ipmp-surface: #1c2128;
    --ipmp-surface-2: #232932;
    --ipmp-text: #e6e8eb;
    --ipmp-muted: #9aa3b2;
    --ipmp-accent: #4f9cf9;
    --ipmp-accent-strong: #2f7adf;
    --ipmp-accent-soft: #1a2c4a;
    --ipmp-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --ipmp-overlay: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

body {
    background: var(--ipmp-bg);
    color: var(--ipmp-text);
    font-family: 'adobe-clean', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-bottom: 0;
}

.ipmp-shell {
    display: grid;
    grid-template-columns: var(--ipmp-sidebar-w) 1fr;
    grid-template-rows: var(--ipmp-topbar-h) 1fr auto;
    grid-template-areas:
        "topbar  topbar"
        "sidebar main"
        "sidebar footer";
    min-height: 100vh;
}

.ipmp-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem;
    background: var(--ipmp-surface);
    border-bottom: 1px solid var(--ipmp-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.ipmp-sidebar-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ipmp-sidebar-toggle span {
    display: block;
    height: 2px;
    background: var(--ipmp-text);
    border-radius: 2px;
}

.ipmp-brand {
    display: flex;
    align-items: center;
    gap: .25rem;
    height: 100%;
    width: calc(var(--ipmp-sidebar-w) - 1rem);
    box-sizing: border-box;
    padding-right: 1rem;
    border-right: 1px solid var(--ipmp-border);
    text-decoration: none;
    color: var(--ipmp-text);
}

.ipmp-brand-logo {
    display: block;
    height: 54px;
    width: auto;
}

.ipmp-brand-logo--dark { display: none; }
:root[data-theme="dark"] .ipmp-brand-logo--light { display: none; }
:root[data-theme="dark"] .ipmp-brand-logo--dark  { display: block; }

.ipmp-brand-sub {
    font-size: .875rem;
    line-height: 1.2;
    color: var(--ipmp-muted);
    white-space: nowrap;
}

.ipmp-topbar-spacer {
    flex: 1;
}

.ipmp-avatar-pill {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ipmp-surface-2);
    color: var(--ipmp-muted);
    border: 1px solid var(--ipmp-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    overflow: hidden;
    flex: 0 0 auto;
}

.ipmp-avatar-pill img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ipmp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-right: .5rem;
    background: transparent;
    color: var(--ipmp-text);
    border: 1px solid var(--ipmp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ipmp-theme-toggle:hover {
    background: var(--ipmp-surface-2);
    color: var(--ipmp-accent-strong);
    border-color: var(--ipmp-accent-strong);
}

.ipmp-theme-toggle .ipmp-icon-moon { display: none; }
.ipmp-theme-toggle .ipmp-icon-sun  { display: block; }

:root[data-theme="dark"] .ipmp-theme-toggle .ipmp-icon-sun  { display: none; }
:root[data-theme="dark"] .ipmp-theme-toggle .ipmp-icon-moon { display: block; }

.ipmp-topbar-link {
    color: var(--ipmp-text);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 6px;
}

.ipmp-topbar-link:hover {
    color: var(--ipmp-accent-strong);
    background: var(--ipmp-surface-2);
}

/* User menu (avatar + name button + dropdown card) */
.ipmp-usermenu {
    position: relative;
    display: inline-flex;
}

.ipmp-usermenu-trigger {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    background: transparent;
    color: var(--ipmp-text);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    max-width: 240px;
}

.ipmp-usermenu-trigger:hover,
.ipmp-usermenu.open .ipmp-usermenu-trigger {
    background: var(--ipmp-surface-2);
    border-color: var(--ipmp-border);
}

.ipmp-usermenu-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.ipmp-usermenu-caret {
    color: var(--ipmp-muted);
    transition: transform .15s ease;
}

.ipmp-usermenu.open .ipmp-usermenu-caret {
    transform: rotate(180deg);
}

.ipmp-usermenu-card {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    min-width: 260px;
    background: var(--ipmp-surface);
    color: var(--ipmp-text);
    border: 1px solid var(--ipmp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    padding: .5rem;
    z-index: 100;
}

.ipmp-usermenu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .5rem .75rem;
    border-bottom: 1px solid var(--ipmp-border);
    margin-bottom: .35rem;
}

.ipmp-avatar-lg {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
}

.ipmp-usermenu-id {
    min-width: 0;
    flex: 1;
}

.ipmp-usermenu-fullname {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipmp-usermenu-email {
    font-size: .8rem;
    color: var(--ipmp-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ipmp-usermenu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    background: transparent;
    color: var(--ipmp-text);
    border: 0;
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
    font-size: .9rem;
    cursor: pointer;
}

.ipmp-usermenu-item:hover,
.ipmp-usermenu-item:focus-visible {
    background: var(--ipmp-accent-soft);
    color: var(--ipmp-accent-strong);
}

.ipmp-usermenu-item svg {
    flex: 0 0 auto;
    color: var(--ipmp-muted);
}

.ipmp-usermenu-item:hover svg,
.ipmp-usermenu-item:focus-visible svg {
    color: var(--ipmp-accent-strong);
}

.ipmp-usermenu-divider {
    height: 1px;
    background: var(--ipmp-border);
    margin: .35rem 0;
}

.ipmp-usermenu-logout {
    color: var(--ipmp-accent);
}

.ipmp-usermenu-logout:hover,
.ipmp-usermenu-logout:focus-visible {
    background: var(--ipmp-accent-soft);
    color: var(--ipmp-accent-strong);
}

.ipmp-usermenu-item .ipmp-icon-moon { display: none; }
.ipmp-usermenu-item .ipmp-icon-sun  { display: inline-block; }
:root[data-theme="dark"] .ipmp-usermenu-item .ipmp-icon-sun  { display: none; }
:root[data-theme="dark"] .ipmp-usermenu-item .ipmp-icon-moon { display: inline-block; }

@media (max-width: 575.98px) {
    .ipmp-usermenu-name {
        display: none;
    }
    .ipmp-usermenu-card {
        right: -.25rem;
    }
}

.ipmp-sidebar-logo-wrap {
    padding: .75rem .75rem 1rem;
    border-bottom: 1px solid var(--ipmp-border);
    margin-bottom: .75rem;
}
.ipmp-sidebar-logo-wrap a { display: block; }
.ipmp-sidebar-logo-wrap img { width: 100%; max-width: 180px; height: auto; display: block; }
.ipmp-sidebar-logo-wrap .ipmp-sidebar-logo-dark { display: none; }
:root[data-theme="dark"] .ipmp-sidebar-logo-wrap .ipmp-sidebar-logo-light { display: none; }
:root[data-theme="dark"] .ipmp-sidebar-logo-wrap .ipmp-sidebar-logo-dark  { display: block; }

.ipmp-sidebar {
    grid-area: sidebar;
    background: var(--ipmp-surface);
    border-right: 1px solid var(--ipmp-border);
    overflow-y: auto;
    padding: 1rem .5rem;
    position: sticky;
    top: var(--ipmp-topbar-h);
    height: calc(100vh - var(--ipmp-topbar-h));
}

.ipmp-nav-group {
    margin-bottom: 1.25rem;
}

.ipmp-nav-heading {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--ipmp-muted);
    padding: .25rem .75rem;
    margin-bottom: .25rem;
}

.ipmp-nav-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: 6px;
    color: var(--ipmp-text);
    text-decoration: none;
    font-size: .925rem;
    line-height: 1.3;
}

.ipmp-nav-link:hover {
    background: var(--ipmp-bg);
    color: var(--ipmp-text);
}

.ipmp-nav-link.active {
    background: var(--ipmp-accent-soft);
    color: var(--ipmp-accent);
    font-weight: 600;
}

/* Sidebar submenu (details/summary collapsible) */
.ipmp-nav-subnav > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.ipmp-nav-subnav > summary::-webkit-details-marker,
.ipmp-nav-subnav > summary::marker { display: none; content: ''; }
.ipmp-nav-subnav > summary::after {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
    opacity: .6;
}
.ipmp-nav-subnav[open] > summary::after {
    transform: rotate(-135deg) translateY(-2px);
}
.ipmp-nav-subnav-body {
    padding-left: .5rem;
    margin-top: .125rem;
}
.ipmp-nav-link--child {
    font-size: .875rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.ipmp-main {
    grid-area: main;
    min-width: 0;
}

.ipmp-footer {
    grid-area: footer;
    border-top: 1px solid var(--ipmp-border);
    background: var(--ipmp-surface);
    color: var(--ipmp-muted);
    font-size: .85rem;
    padding: .75rem 1rem;
}

.ipmp-footer-link {
    color: var(--ipmp-accent);
    text-decoration: none;
    font-weight: 500;
}

.ipmp-footer-link:hover {
    text-decoration: underline;
}

/* Burgundy accent button — used in place of sp-button variant="accent" so the
   button picks up the IPMP theme instead of Spectrum's brand blue. */
.ipmp-btn-accent {
    background: var(--ipmp-accent);
    border: 1px solid var(--ipmp-accent);
    color: #ffffff;
    font-weight: 600;
    border-radius: 6px;
    padding: .55rem 1.1rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ipmp-btn-accent:hover,
.ipmp-btn-accent:focus {
    background: var(--ipmp-accent-strong);
    border-color: var(--ipmp-accent-strong);
    color: #ffffff;
}

.ipmp-btn-accent:disabled,
.ipmp-btn-accent.disabled {
    background: var(--ipmp-surface-2);
    border-color: var(--ipmp-border);
    color: var(--ipmp-muted);
    cursor: not-allowed;
}

.ipmp-btn-accent:disabled:hover,
.ipmp-btn-accent.disabled:hover {
    background: var(--ipmp-surface-2);
    border-color: var(--ipmp-border);
    color: var(--ipmp-muted);
}

.ipmp-btn-outline-accent {
    background: transparent;
    border: 1px solid var(--ipmp-accent);
    color: var(--ipmp-accent);
    font-weight: 400;
    border-radius: 6px;
    padding: .55rem 1.1rem;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ipmp-btn-outline-accent:hover,
.ipmp-btn-outline-accent:focus {
    background: var(--ipmp-accent);
    border-color: var(--ipmp-accent);
    color: #ffffff;
}

.ipmp-sidebar-backdrop {
    display: none;
}

/* Mobile: sidebar slides over content */
@media (max-width: 991.98px) {
    .ipmp-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main"
            "footer";
    }

    .ipmp-sidebar-toggle {
        display: flex;
    }

    .ipmp-sidebar {
        position: fixed;
        top: var(--ipmp-topbar-h);
        left: 0;
        height: calc(100vh - var(--ipmp-topbar-h));
        width: var(--ipmp-sidebar-w);
        transform: translateX(-100%);
        transition: transform .2s ease;
        z-index: 60;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .08);
    }

    .ipmp-shell.sidebar-open .ipmp-sidebar {
        transform: translateX(0);
    }

    .ipmp-shell.sidebar-open .ipmp-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--ipmp-topbar-h) 0 0 0;
        background: var(--ipmp-overlay);
        z-index: 55;
    }

    .ipmp-brand-sub {
        display: none;
    }
}

/* ── Споделени UI примитиви (карти, детайли, форми) ─────────── */
.ipmp-card             { background: var(--ipmp-surface); border: 1px solid var(--ipmp-border); border-radius: 10px; box-shadow: var(--ipmp-shadow); }
/* Modifier: клипва съдържанието по заоблените ъгли — за карти, които
   обвиват таблици или edge-to-edge съдържание. Изключения за .p-3 / .p-2,
   защото dropdown-ите и overlay-trigger popover-ите трябва да изпъкват
   извън картата. */
.ipmp-card--flush      { overflow: hidden; }
.ipmp-card--flush.p-3,
.ipmp-card--flush.p-2  { overflow: visible; }

/* Stat card — статистически плочки в зоната „Аналитика" на index страниците.
   Базата задава неутрален вид; цветовите модификатори оцветяват value-то и
   горната граница според смисъла. */
.ipmp-stat-card        { background: var(--ipmp-surface); border: 1px solid var(--ipmp-border); border-top: 3px solid var(--ipmp-text); border-radius: 10px; padding: 1rem 1.25rem; text-align: center; }
.ipmp-stat-value       { font-size: 2rem; font-weight: 700; line-height: 1; }
.ipmp-stat-label       { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ipmp-muted); margin-top: .25rem; }
.ipmp-stat--primary    { border-top-color: var(--bs-primary); }
.ipmp-stat--primary  .ipmp-stat-value { color: var(--bs-primary); }
.ipmp-stat--success    { border-top-color: var(--bs-success); }
.ipmp-stat--success  .ipmp-stat-value { color: var(--bs-success); }
.ipmp-stat--warning    { border-top-color: var(--bs-warning); }
.ipmp-stat--warning  .ipmp-stat-value { color: var(--bs-warning); }
.ipmp-stat--muted      { border-top-color: var(--ipmp-muted); }
.ipmp-stat--muted    .ipmp-stat-value { color: var(--ipmp-muted); }
.ipmp-detail-group     { display: flex; flex-direction: column; gap: .2rem; }
.ipmp-detail-label     { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ipmp-muted); }
.ipmp-detail-value     { font-size: .95rem; }
.ipmp-date-input       { display: block; width: 100%; padding: .375rem .75rem; background: var(--ipmp-surface); border: 1px solid var(--ipmp-border); border-radius: 6px; color: inherit; font-size: .9rem; }
.ipmp-date-input:focus { outline: 2px solid var(--ipmp-accent); outline-offset: 1px; }
.d-none-when-empty:empty { display: none !important; }

/* ── Spectrum WC — pre-initialization overflow fixes ────────── */
/* Prevent sp-tabs-overflow from causing horizontal scrollbar before upgrade */
sp-tabs-overflow { display: block; overflow: hidden; max-width: 100%; }
/* Prevent sp-dialog-wrapper light DOM content from occupying page space
   when the dialog is closed (before and after WC upgrade) */
sp-dialog-wrapper:not([open]) { display: none; }