/* Allied Health Portal: the look every suite app shares (Dolibarr-inspired: dark top bar, coloured tiles and boxes). */

:root {
    --ahp-topbar: #263c5c;
    --ahp-topbar-2: #1d2f49;
    --ahp-bg: #f2f4f7;
    --ahp-card: #ffffff;
    --ahp-border: #e1e5eb;
    --ahp-text: #23324a;
    --ahp-muted: #6b778c;
    --ahp-app: #2c6fbb;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--ahp-bg);
    color: var(--ahp-text);
}

h1:focus { outline: none; }

/* ------------------------------------------------------------------ top bar */

.ahp-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 52px;
    padding: 0 1rem;
    background: linear-gradient(180deg, var(--ahp-topbar), var(--ahp-topbar-2));
    border-bottom: 3px solid var(--ahp-app);
    box-shadow: 0 2px 6px rgba(15, 30, 55, .25);
}

.ahp-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.ahp-brand:hover { color: #fff; }

.ahp-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ahp-app);
    font-size: 1.05rem;
}

.ahp-brand-text { font-weight: 600; letter-spacing: .2px; }

.ahp-app-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .85rem;
    white-space: nowrap;
}

.ahp-nav { flex: 1 1 auto; min-width: 0; }
.ahp-topbar-end { display: flex; align-items: center; gap: .25rem; }

/* Syncfusion menus on the dark bar */
.ahp-topbar .ahp-menu,
.ahp-topbar .ahp-menu ul.e-menu {
    background: transparent;
    border: 0;
}

.ahp-topbar .ahp-menu ul.e-menu .e-menu-item {
    color: rgba(255, 255, 255, .88);
    height: 52px;
    line-height: 52px;
    border-radius: 0;
}

.ahp-topbar .ahp-menu ul.e-menu .e-menu-item .e-menu-icon,
.ahp-topbar .ahp-menu ul.e-menu .e-menu-item .e-caret,
.ahp-topbar .ahp-menu ul.e-menu .e-menu-item .e-menu-url {
    color: inherit;
}

.ahp-topbar .ahp-menu ul.e-menu .e-menu-item.e-focused,
.ahp-topbar .ahp-menu ul.e-menu .e-menu-item.e-selected,
.ahp-topbar .ahp-menu ul.e-menu .e-menu-item:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.ahp-topbar .ahp-menu .e-menu-icon.bi { font-size: 1rem; }
.ahp-topbar .ahp-menu .e-scroll-nav { background: transparent; }
.ahp-topbar .ahp-menu .e-scroll-nav .e-nav-arrow { color: #fff; }

/* sub-menus (popups) */
.e-menu-container.e-menu-popup .e-menu-icon.bi, .e-menu-container ul.e-menu-parent .e-menu-icon.bi { font-size: .95rem; }
.e-menu-container ul.e-menu-parent .e-menu-item.e-disabled { opacity: .8; font-size: .85rem; }

/* ------------------------------------------------------------------ page */

.ahp-main { padding: 1.25rem 1.5rem 2rem; }

.ahp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ahp-page-header h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.ahp-page-subtitle { color: var(--ahp-muted); font-size: .875rem; }

.ahp-page-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ahp-app) 14%, white);
    color: var(--ahp-app);
    font-size: 1.3rem;
}

.ahp-card {
    background: var(--ahp-card);
    border: 1px solid var(--ahp-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20, 35, 60, .05);
}

.ahp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ahp-border);
    font-weight: 600;
}

.ahp-card-header .bi { color: var(--ahp-app); }
.ahp-card-body { padding: 1rem; }

.ahp-grid { padding: .25rem; }
.ahp-grid .e-grid { border: 0; }
.ahp-label { font-size: .8rem; color: var(--ahp-muted); margin-bottom: .25rem; }

.ahp-empty {
    max-width: 520px;
    margin: 4rem auto;
    text-align: center;
    color: var(--ahp-muted);
}

.ahp-empty > .bi { font-size: 3rem; color: var(--ahp-app); }
.ahp-empty h2 { font-size: 1.35rem; margin: 1rem 0 .5rem; color: var(--ahp-text); }

/* ------------------------------------------------------------------ dashboard boxes */

.ahp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ahp-stat {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    text-decoration: none;
    color: var(--ahp-text);
    background: var(--ahp-card);
    border: 1px solid var(--ahp-border);
    border-radius: 10px;
    transition: transform .12s ease, box-shadow .12s ease;
}

.ahp-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20, 35, 60, .1); color: var(--ahp-text); }

.ahp-stat-icon {
    display: grid;
    place-items: center;
    width: 64px;
    background: var(--ahp-stat);
    color: #fff;
    font-size: 1.6rem;
}

.ahp-stat-body { display: flex; flex-direction: column; justify-content: center; padding: .65rem .9rem; }
.ahp-stat-value { font-size: 1.45rem; font-weight: 700; line-height: 1.1; }
.ahp-stat-label { font-size: .8rem; color: var(--ahp-muted); }

/* ------------------------------------------------------------------ launcher tiles */

.ahp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .5rem 0 1.5rem;
}

.ahp-hero h1 { font-size: 1.6rem; font-weight: 600; margin: 0; }

.ahp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.ahp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 230px;
    padding: 1.4rem;
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--ahp-tile), color-mix(in srgb, var(--ahp-tile) 70%, black));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ahp-tile) 35%, transparent);
    transition: transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
}

.ahp-tile::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.ahp-tile:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ahp-tile) 45%, transparent); }

.ahp-tile-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    font-size: 2rem;
}

.ahp-tile-title { font-size: 1.3rem; font-weight: 600; margin-top: .25rem; }
.ahp-tile-text { font-size: .9rem; opacity: .9; flex: 1; }
.ahp-tile-go { font-size: .85rem; font-weight: 600; opacity: .95; }

.ahp-tile-locked { filter: grayscale(.85); opacity: .55; cursor: not-allowed; }
.ahp-tile-locked:hover { transform: none; }

/* ------------------------------------------------------------------ lists */

.ahp-list { list-style: none; margin: 0; padding: 0; }

.ahp-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--ahp-border);
}

.ahp-list li:last-child { border-bottom: 0; }
.ahp-list .ahp-list-sub { font-size: .8rem; color: var(--ahp-muted); }

.ahp-timeline { border-left: 2px solid var(--ahp-border); margin-left: .5rem; padding-left: 1rem; }
.ahp-timeline-item { position: relative; padding-bottom: 1rem; }

.ahp-timeline-item::before {
    content: "";
    position: absolute;
    left: calc(-1rem - 6px);
    top: .35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ahp-app);
}

@media (max-width: 1100px) {
    .ahp-brand-text { display: none; }
}

@media (max-width: 768px) {
    .ahp-main { padding: 1rem; }
    .ahp-brand-text, .ahp-app-chip { display: none; }
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
    padding: .6rem 1.25rem;
    background: #fff3cd;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ------------------------------------------------------------------ error details (ErrorDetails.razor) */

.ahp-error {
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
    text-align: left;
}

.ahp-error-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 1px solid #f1aeb5;
    border-left: 4px solid #dc3545;
    border-radius: .5rem;
    background: #fff5f5;
}

.ahp-error-type { font-family: var(--bs-font-monospace); font-size: .82rem; color: #b02a37; overflow-wrap: anywhere; }
.ahp-error-message { font-size: 1.05rem; font-weight: 600; color: var(--ahp-text); margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.ahp-error-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 1rem 0;
    font-size: .88rem;
}
.ahp-error-facts dt { color: var(--ahp-muted); font-weight: 600; }
.ahp-error-facts dd { margin: 0; overflow-wrap: anywhere; }

.ahp-error-item { border: 1px solid var(--ahp-border, #dee2e6); border-radius: .5rem; padding: .75rem 1rem; margin-bottom: .75rem; background: #fff; }
.ahp-error-item-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ahp-error-item-type { font-size: .85rem; overflow-wrap: anywhere; }
.ahp-error-item-message { margin: .4rem 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; font-size: .88rem; }
.ahp-error-item summary { cursor: pointer; font-size: .85rem; color: var(--ahp-muted); }

.ahp-error-stack {
    margin: .5rem 0 0;
    padding: .6rem .6rem .6rem 2.4rem;
    background: #f8f9fa;
    border-radius: .4rem;
    font-family: var(--bs-font-monospace);
    font-size: .76rem;
    line-height: 1.45;
    max-height: 420px;
    overflow: auto;
}
.ahp-error-stack li { overflow-wrap: anywhere; }
.ahp-frame-app { color: #212529; font-weight: 600; }
.ahp-frame-framework { color: #868e96; }

@media (max-width: 576px) {
    .ahp-error-head { flex-direction: column; }
    .ahp-error-facts { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ languages (LanguagePicker.razor) */

.ahp-languages { display: grid; gap: .6rem; }
.ahp-language-group-title { font-size: .75rem; font-weight: 700; color: #6b778c; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .2rem; }
.ahp-language-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .15rem 1rem; }
.ahp-language-checks .form-check { margin: 0; display: flex; align-items: baseline; gap: .35rem; min-width: 0; }
.ahp-language-checks .form-check-input { flex: 0 0 auto; }
.ahp-language-native { color: #8a94a6; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahp-language-hint { margin-top: .5rem; }
.ahp-language-chip { display: inline-block; padding: .05rem .5rem; margin: 0 .25rem .25rem 0; border-radius: 999px; background: #eef2f7; color: #23324a; font-size: .78rem; }
.ahp-language-chip.match { background: #d3f9d8; color: #1b5e20; font-weight: 600; }
.ahp-language-chip.default { background: #f1f3f5; color: #6b778c; font-style: italic; }

/* ------------------------------------------------------------------ My profile (/profile) */

.ahp-profile { max-width: 1280px; }
.ahp-profile .e-tab .e-content { padding-top: 1rem; }
.ahp-profile-card { border: 1px solid #e1e5eb; border-radius: 12px; padding: 1.25rem; background: #fff; }

/* ------------------------------------------------------------------ Roles & Apps (AppAccessMap.razor) */
.adm-tree { max-height: calc(100vh - 300px); overflow-y: auto; }
.adm-tree .e-treeview .e-list-icon { color: #495057; }
.adm-roles tbody tr:hover { background: #f8f9fa; }
.adm-tree .e-treeview .e-level-1 > .e-text-content > .e-checkbox-wrapper { visibility: hidden; width: 0; margin: 0; }