/* ---------- App switcher (resources/views/partials/app-switcher.blade.php) ----------
   Shared by the admin header (CoolAdmin .js-item-menu) and the public navbar (Bootstrap 4 dropdown).
   Selectors under .navigation .navbar .navbar-nav undo theme2's generic "navbar-nav li / li a" rules,
   which would otherwise reach the tiles inside the menu. */

.app-switcher {
    --as-primary: #037480;
    --as-primary-soft: rgba(3, 116, 128, 0.08);
    --as-primary-line: rgba(3, 116, 128, 0.28);
    --as-ink: #1f2937;
    --as-ink-subtle: #8a909a;
    --as-line: #e5e7eb;
    --as-sunken: #f2f4f6;
    --as-radius: 10px;

    width: 21rem;
    max-width: calc(100vw - 1.5rem);
    padding: 0.625rem;
    border: 1px solid var(--as-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    color: var(--as-ink);
    font-size: 0.875rem;
    text-align: start;
    cursor: default;
}

/* Trigger: the 3×3 dots button, a rounded square that tints on hover and while open */
.app-switcher-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.app-switcher-btn:hover,
.app-switcher-btn:focus-visible,
.app-switcher-item.show .app-switcher-btn,
.app-switcher-item.show-dropdown .app-switcher-btn { background: rgba(15, 23, 42, 0.07); }
.app-switcher-glyph { width: 1.0625rem; height: 1.0625rem; }

/* "You're here" card for this app */
.app-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--as-primary-line);
    border-radius: var(--as-radius);
    background: var(--as-primary-soft);
}
.app-current .app-tile-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; }
.app-current-text { min-width: 0; }
.app-current-name { display: block; color: var(--as-ink); font-size: 0.9375rem; font-weight: 650; line-height: 1.3; }
.app-current-hint { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem; color: var(--as-primary); font-size: 0.75rem; font-weight: 500; line-height: 1.3; }
.app-current-hint::before { content: ""; flex-shrink: 0; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--as-primary); }

.app-switcher-label {
    margin: 0.75rem 0 0;
    padding: 0.375rem 0.25rem 0.25rem;
    color: var(--as-ink-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
}
.app-switcher-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    margin: 0.125rem 0 0;
    padding: 0;
    list-style: none;
}
.app-switcher-grid > li { margin: 0; padding: 0; }
.app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    padding: 0.75rem 0.375rem;
    border-radius: var(--as-radius);
    color: var(--as-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    transition: background-color 0.15s ease-out;
}
a.app-tile:hover, a.app-tile:focus-visible { background: var(--as-sunken); color: var(--as-ink); text-decoration: none; }
.app-tile-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #fff; /* logos are drawn for a white ground */
    box-shadow: 0 0 0 1px var(--as-line), 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease-out;
}
/* natural size, capped to the tile: big logos fill it, the 32/40px ones stay crisp instead of upscaled */
.app-tile-icon img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
a.app-tile:hover .app-tile-icon { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--as-line), 0 6px 16px rgba(15, 23, 42, 0.12); }
.app-tile-name { max-width: 100%; overflow-wrap: anywhere; letter-spacing: 0; }
/* App without a configured URL: listed, but clearly unavailable */
.app-tile.is-disabled { color: var(--as-ink-subtle); cursor: not-allowed; }
.app-tile.is-disabled .app-tile-icon { opacity: 0.5; filter: grayscale(1); }
.app-tile-hint { margin-top: -0.25rem; color: var(--as-ink-subtle); font-size: 0.6875rem; font-weight: 450; }

@media (prefers-reduced-motion: reduce) {
    .app-tile, .app-tile-icon, .app-switcher-item .app-switcher { transition: none; }
    a.app-tile:hover .app-tile-icon { transform: none; }
}

/* ---------- Admin header (CoolAdmin): opened by .show-dropdown on .js-item-menu ---------- */
.header-desktop .app-switcher-btn { width: 2.75rem; height: 2.75rem; color: #a9b3c9; }
.header-desktop .app-switcher-btn:hover,
.header-desktop .app-switcher-item.show-dropdown .app-switcher-btn { color: #808080; }
.header-desktop .app-switcher-glyph { width: 1.375rem; height: 1.375rem; }
.header-desktop .app-switcher-item .app-switcher {
    position: absolute;
    top: calc(100% + 0.875rem);
    right: 0;
    z-index: 9999;
    visibility: hidden;
    transform: scale(0);
    transform-origin: right top;
    transition: transform 0.3s ease, visibility 0.3s;
}
.header-desktop .app-switcher-item.show-dropdown .app-switcher { visibility: visible; transform: scale(1); }
/* below lg the header icons sit at the left edge, so open towards the right instead */
@media (max-width: 991px) {
    .header-desktop .app-switcher-item .app-switcher { right: auto; left: 0; transform-origin: left top; }
}

/* ---------- Public navbar (theme2 + Bootstrap 4 .dropdown-menu) ---------- */
/* theme2 gives every "navbar-nav li a" vertical padding (25px, 20px once the header turns sticky on scroll,
   10px !important below lg). On the fixed-height button that padding moved the dots off the row's centre,
   so the button takes no padding. The items are not all the same height (the 25px DP image makes its <li>
   taller than the text links, which then sit at the top of the row), so centre every item on one line;
   that keeps links, icons and the button aligned at the top of the page and in the sticky header. */
.navigation .navbar .navbar-nav .app-switcher-btn { padding: 0 !important; }
@media (min-width: 992px) {
    .navigation .navbar .navbar-nav { align-items: center; }
}
.navigation .navbar .navbar-nav .app-switcher.dropdown-menu { min-width: 0; margin-top: 0.5rem; padding: 0.625rem; }
/* RTL (Urdu): the icons run from the right, so the menu opens towards the right of its button */
.lang-ur .navbar .navbar-nav .app-switcher.dropdown-menu-right { right: auto; left: 0; }
.navigation .navbar .navbar-nav .app-switcher li { margin: 0; }
.navigation .navbar .navbar-nav .app-switcher a.app-tile {
    padding: 0.75rem 0.375rem !important; /* theme2 forces "li a" padding with !important below lg */
    color: var(--as-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    transition: background-color 0.15s ease-out;
}