/* Custom CSS fixes for App Manager UI */

/* Sidebar menu icon and label alignment */
.side-menu__item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem;
}

.side-menu__icon {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.side-menu__label {
    flex-grow: 1;
}

/* Breadcrumb styling */
.breadcrumb-item a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.breadcrumb-item i {
    font-size: 0.875rem;
}

/* Fix for sidebar toggle animation */
[data-toggled="icon-click-closed"] .app-sidebar {
    width: 5rem;
}

[data-toggled="icon-click-closed"] .app-sidebar .side-menu__label,
[data-toggled="icon-click-closed"] .app-sidebar .category-name {
    display: none;
}

[data-toggled="icon-click-closed"] .app-sidebar .side-menu__item {
    justify-content: center;
    padding: 0.75rem;
}

[data-toggled="icon-click-closed"] .app-sidebar .side-menu__icon {
    margin: 0;
}

[data-toggled="icon-click-closed"] .main-content {
    margin-inline-start: 5rem;
}

[data-toggled="close"] .app-sidebar {
    width: 16rem;
}

[data-toggled="close"] .main-content {
    margin-inline-start: 16rem;
}

/* Sidebar header logo visibility */
[data-toggled="icon-click-closed"] .app-sidebar .desktop-logo,
[data-toggled="icon-click-closed"] .app-sidebar .desktop-dark {
    display: none !important;
}

[data-toggled="icon-click-closed"] .app-sidebar .toggle-logo,
[data-toggled="icon-click-closed"] .app-sidebar .toggle-dark {
    display: block !important;
}

/* Page header breadcrumb alignment */
.page-header-breadcrumb {
    flex-wrap: wrap;
}

/* Table action buttons */
.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
}

/* Category name in sidebar */
.slide__category {
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.slide__category .category-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--menu-prime-color);
    opacity: 0.6;
}

/* Tooltip z-index fix */
.tooltip {
    z-index: 9999;
}

/* Sidebar vertical scroll fix */
.app-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-sidebar .main-sidebar {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.app-sidebar .main-sidebar::-webkit-scrollbar {
    width: 6px;
}

.app-sidebar .main-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.app-sidebar .main-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.app-sidebar .main-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Responsive sidebar */
@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [data-toggled="open"] .app-sidebar {
        transform: translateX(0);
    }

    .main-content {
        margin-inline-start: 0 !important;
    }
}

/* ------------------------------------------------------------------
   Accessibility (REQ-NFR-003)
   Contrast-token corrections and focus visibility only. Nothing here
   changes layout, spacing or component behaviour.
   ------------------------------------------------------------------ */

/* Sidebar section labels were #364067 on #111c43 = 1.64:1 (WCAG AA needs 4.5:1) --
   effectively invisible. Lightened to 5.6:1; the label stays visibly quieter than the
   menu items. !important because the theme sets this from a higher-specificity rule. */
.app-sidebar .slide__category .category-name,
.app-sidebar .category-name {
    color: #8b95bb !important;
    /* the theme also fades the label to 0.6, which blended it back toward the ground */
    opacity: 1 !important;
}

/* ...and the row it sits in carries opacity 0.5, which the rule above cannot undo. */
.app-sidebar .slide__category {
    opacity: 1 !important;
}

/* Table column headers were #f3f6f8 on #fefefe = 1.07:1 -- unreadable. Darkened to
   7.5:1 while staying quieter than the cell text. */
.table > thead > tr > th,
.table thead th {
    color: #4d5259 !important;
}

/* .text-muted was #8c9097: 3.2:1 on white and 2.8:1 on the #f0f1f7 page ground.
   Darkened to 5.6:1 / 5.0:1 — still a muted grey, now legible. */
.text-muted,
.text-muted a:not(.btn):not(.text-primary) {
    color: #646870 !important;
}

/* Keyboard focus must be visible on every interactive element (WCAG 2.4.7).
   :focus-visible only, so pointer users see no change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.page-link:focus-visible,
.side-menu__item:focus-visible,
.header-link:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-check-input:focus-visible {
    /* !important: the theme zeroes outline on :focus for links and buttons, which left
       several controls with no visible keyboard focus at all (WCAG 2.4.7). */
    outline: 2px solid #4f46e5 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.25) !important;
}

/* On the dark sidebar the indigo ring disappears; use a light ring there. */
.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3) !important;
}

/* Skip link: the first focusable element in the page, off-screen until focused. */
.skip-to-main {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.625rem 1rem;
    background: #ffffff;
    color: #111c43;
    border: 2px solid #4f46e5;
    border-radius: 0 0 0.25rem 0;
    text-decoration: none;
    font-weight: 600;
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
    inset-inline-start: 0;
}

/* An element focused only so a screen reader lands there must not draw a ring. */
main[tabindex="-1"]:focus,
.modal-content[tabindex="-1"]:focus {
    outline: none;
}

/* Text carried only for assistive technology. */
.visually-hidden-label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------
   Contrast: foreground text only (REQ-NFR-003)

   Every colour below is a TEXT colour darkened just far enough to clear
   4.5:1 on the ground it actually sits on; the hue is kept. No background,
   fill or border colour is changed anywhere in this file, so solid badges,
   solid buttons and alert fills keep the product's status colour language
   exactly as it is. The fills that still fail are listed in the REQ-NFR-003
   report for the owner to decide on, because repainting them is a design
   choice rather than a mechanical accessibility fix.
   ------------------------------------------------------------------ */

/* Brand purple as text/link: 4.13:1 on the #f0f1f7 page ground -> 4.6:1. */
.text-primary,
.breadcrumb-item a,
.page-header-breadcrumb a {
    color: #7c54d1 !important;
}

/* Tinted ("-transparent") badges: the tint stays, only the text darkens.
   Previously 1.67:1 to 4.11:1 at ~10px, which is not readable. */
.badge.bg-primary-transparent { color: #744fc4 !important; }
.badge.bg-info-transparent { color: #2f769f !important; }
.badge.bg-secondary-transparent { color: #167390 !important; }
.badge.bg-success-transparent { color: #17785d !important; }
.badge.bg-warning-transparent { color: #846327 !important; }
.badge.bg-danger-transparent { color: #ae3f2d !important; }

/* The same hues used as plain text or as outline-button labels on white. */
.text-info { color: #2f769f !important; }
.text-secondary { color: #167390 !important; }
.text-success { color: #17785d !important; }
.text-warning { color: #846327 !important; }
.text-danger { color: #ae3f2d !important; }

.btn-outline-info:not(:hover):not(:focus) { color: #2f769f; }
.btn-outline-success:not(:hover):not(:focus) { color: #17785d; }
.btn-outline-warning:not(:hover):not(:focus) { color: #846327; }
.btn-outline-danger:not(:hover):not(:focus) { color: #ae3f2d; }

/* Alert body text sits on the alert's own tint and inherits the same undarkened hue
   (1.5:1 to 2.9:1). Text only — the alert's tinted background is untouched. */
.alert-info, .alert-info strong, .alert-info li { color: #2a6b91 !important; }
.alert-warning, .alert-warning strong, .alert-warning li { color: #846327 !important; }
.alert-danger, .alert-danger strong, .alert-danger li { color: #ae3f2d !important; }
.alert-success, .alert-success strong, .alert-success li { color: #17785d !important; }