/* Local overrides on top of the stock Color Admin skins - kept separate
   from the vendor app.min.css so that file stays a straight copy of the
   purchased theme and can be replaced/updated without touching this. */

/* Smaller top header (theme default is a fixed 50px). */
.app-header .navbar-brand {
    height: 40px;
    padding: 6px 15px;
    font-size: 15px;
    line-height: 26px;
}
.app-header .navbar-nav .navbar-item .navbar-link {
    padding: 10px 12px;
    line-height: 20px;
    height: auto;
}
.app-header .navbar-item .form-select-sm {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 12px;
}
/* Fix: the tour "?" link is the only header icon using the theme's
   ".navbar-link.icon" flex-centering rule (bell/user links use a plain
   dropdown-toggle instead). vendor.min.css's FA6 ".fa-lg" sets an
   extremely tight line-height (.05em, meant for FA6's SVG icon mode),
   which collapses that icon's flex item box near the top of its 20px
   container instead of centering it. Restore a normal line-height so the
   theme's own flex centering works as intended. */
.app-header .navbar-nav .navbar-item .navbar-link.icon i {
    line-height: normal;
}
.app-header-fixed .app-sidebar {
    padding-top: 40px;
}

/* Fix: .app-sidebar-bg (a purely decorative layer) has z-index:1000 in the
   stock theme CSS and was painting on top of .app-sidebar-content (the
   actual menu), making the sidebar look empty. Give the real content a
   higher stacking context explicitly rather than relying on DOM order,
   which doesn't win against a positioned+z-indexed sibling. */
.app-sidebar-content {
    position: relative;
    z-index: 1001;
}

/* Responsive tables: below the theme's own mobile breakpoint (matches the
   767.98px used everywhere else in app.min.css, e.g. .navbar-mobile-toggler),
   render each row as a card instead of a cramped/scrolling table. Add class
   "table-responsive-cards" to a <table> and a data-label="<header text>"
   attribute to each <td> (skip it on action-only cells) to opt in. */
@media (max-width: 767.98px) {
    .table-responsive-cards thead {
        display: none;
    }
    .table-responsive-cards,
    .table-responsive-cards tbody,
    .table-responsive-cards tr,
    .table-responsive-cards td {
        display: block;
        width: 100%;
    }
    .table-responsive-cards tr {
        margin-bottom: 12px;
        border: 1px solid #e2e5e8;
        border-radius: 6px;
        padding: 10px 12px;
    }
    .table-responsive-cards.table-striped tbody tr:nth-of-type(odd) {
        background-color: transparent;
    }
    .table-responsive-cards td {
        border: none;
        padding: 5px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
    .table-responsive-cards td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        flex-shrink: 0;
    }
}

/* Full notifications page (templates/notifications/index.html.twig) reuses
   the topbar bell dropdown's icon/media markup, but the vendor theme's
   .media-object/.media-left rules are scoped to ".dropdown-menu.media-list"
   (both classes on the SAME element) - our static page list isn't a real
   Bootstrap dropdown, so those rules never match there. Re-declared here
   under our own class instead of adding "dropdown-menu" (which is
   display:none unless a JS-toggled ".show" is present). */
.notification-page-list .media {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, .06);
}
.notification-page-list .media:first-child {
    border-top: none;
}
.notification-page-list .media-left {
    padding-right: 12px;
}
.notification-page-list .media-object {
    height: 48px;
    width: 48px;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    flex-shrink: 0;
}
.notification-page-list .media-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Every list table in the app uses table-striped but never table-bordered -
   rows only had a faint 1px bottom border and no vertical dividers, which
   reads as "unstyled" next to the theme's own reference demo (that one uses
   table-bordered). Give every .table-striped the same full grid without
   having to add table-bordered to each template that uses it. */
.table-striped > :not(caption) > * {
    border-width: 1px 0;
}
.table-striped > :not(caption) > * > * {
    border-width: 0 1px;
}