/* ========================================
   APEX Unified Shell Components
   Shared top bar and footer for cross-product consistency.
   Used by: base.html, plexus_base.html, patient_portal_base.html,
            beacon/_workspace_shell.html
   ======================================== */


/* ========================================
   1. UNIFIED TOP BAR
   ======================================== */

.apex-unified-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding: 0 var(--space-5, 20px);
    height: 64px;
    background: var(--color-surface, #FFF);
    border-bottom: 1px solid var(--color-border, #E2E8F0);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 1020);
}

.topbar-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

/* Search */
.topbar-search {
    width: 100%;
    max-width: 480px;
}

.topbar-search-form {
    display: flex;
    align-items: center;
    background: var(--color-background, #F8FAFC);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: var(--radius-md, 10px);
    padding: 0 var(--space-3, 12px);
    height: 40px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.topbar-search-form:focus-within {
    border-color: var(--color-primary, #2563EB);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
    background: var(--color-surface, #FFF);
}

.topbar-search-icon {
    color: var(--color-text-secondary, #64748B);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.topbar-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 var(--space-2, 8px);
    font-size: 0.875rem;
    color: var(--color-text, #1E293B);
    outline: none;
    font-family: inherit;
}

.topbar-search-input::placeholder {
    color: var(--color-text-secondary, #64748B);
}

.topbar-kbd {
    display: none;
    font-size: 0.6875rem;
    font-family: inherit;
    color: var(--color-text-secondary, #64748B);
    background: var(--color-surface, #FFF);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.4;
}

@media (width >= 768px) {
    .topbar-kbd { display: inline-block; }
}

/* Env Pill */
.topbar-env-pill {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--color-background, #F8FAFC);
    border: 1px solid var(--color-border, #E2E8F0);
    color: var(--color-text, #1E293B);
    white-space: nowrap;
}

/* Reuse existing env pill color classes */
.topbar-env-pill.header-env-pill--prod { color: var(--apex-color-env-prod, #10B981); }
.topbar-env-pill.header-env-pill--dev { color: var(--apex-color-env-dev, #F59E0B); }
.topbar-env-pill.header-env-pill--demo { color: var(--apex-color-env-demo, #3B82F6); }
.topbar-env-pill.header-env-pill--beacon { color: var(--apex-color-env-beacon, #8B5CF6); }
.topbar-env-pill.header-env-pill--plexus { color: var(--apex-color-env-plexus, #4F46E5); }
.topbar-env-pill.header-env-pill--lake { color: var(--apex-color-env-lake, #0EA5E9); }

/* Icon Buttons */
.topbar-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 10px);
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #64748B);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    position: relative;
    font-size: 1rem;
}

.topbar-icon-btn:hover {
    background: var(--color-background, #F8FAFC);
    color: var(--color-text, #1E293B);
}

/* Notification Badge */
.topbar-notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-status-error, #B91C1C);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* User Chip */
.topbar-user-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 4px 8px 4px 4px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.topbar-user-chip:hover {
    background: var(--color-background, #F8FAFC);
    border-color: var(--color-border, #E2E8F0);
}

.topbar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 99px;
    background: var(--color-primary, #2563EB);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.topbar-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.topbar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text, #1E293B);
}

.topbar-user-role {
    font-size: 0.6875rem;
    color: var(--color-text-secondary, #64748B);
}

.topbar-user-chevron {
    font-size: 0.625rem;
    color: var(--color-text-secondary, #64748B);
    margin-left: 2px;
}

/* Mobile */
@media (width <= 767px) {
    .topbar-search { display: none; }
    .topbar-env-pill { display: none; }
}


/* ========================================
   2. UNIFIED FOOTER
   ======================================== */

.apex-unified-footer {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-top: 1px solid var(--color-border, #E2E8F0);
    background: var(--color-surface, #FFF);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-status-success, #15803D);
    background: rgb(21 128 61 / 8%);
    padding: 4px 10px;
    border-radius: 99px;
}

.footer-badge i {
    font-size: 0.6875rem;
}

.footer-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748B);
    flex-wrap: wrap;
}

.footer-sep {
    opacity: 0.5;
}

@media (width <= 767px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ========================================
   3. DARK MODE OVERRIDES
   ======================================== */

[data-theme="dark"] .apex-unified-topbar {
    background: var(--color-surface, #1E293B);
    border-bottom-color: var(--color-border, #334155);
}

[data-theme="dark"] .topbar-search-form {
    background: rgb(255 255 255 / 5%);
    border-color: rgb(255 255 255 / 10%);
}

[data-theme="dark"] .topbar-search-form:focus-within {
    background: rgb(255 255 255 / 8%);
}

[data-theme="dark"] .topbar-search-input {
    color: var(--color-text, #F1F5F9);
}

[data-theme="dark"] .topbar-icon-btn {
    color: var(--color-text-secondary, #94A3B8);
}

[data-theme="dark"] .topbar-icon-btn:hover {
    background: rgb(255 255 255 / 8%);
    color: var(--color-text, #F1F5F9);
}

[data-theme="dark"] .topbar-env-pill {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 10%);
}

[data-theme="dark"] .topbar-user-chip:hover {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 10%);
}

[data-theme="dark"] .topbar-user-name {
    color: var(--color-text, #F1F5F9);
}

[data-theme="dark"] .apex-unified-footer {
    background: var(--color-surface, #1E293B);
    border-top-color: var(--color-border, #334155);
}


/* ========================================
   4. WORKSPACE SWITCHER
   ======================================== */

.workspace-switcher {
    position: relative;
}

.workspace-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-border, #E2E8F0);
    background: var(--color-surface, #FFF);
    color: var(--color-text-secondary, #64748B);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}

.workspace-switcher-btn:hover {
    background: var(--color-background, #F8FAFC);
    border-color: var(--color-primary, #2563EB);
    color: var(--color-primary, #2563EB);
}

.workspace-switcher-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    background: var(--color-surface, #FFF);
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: var(--radius-md, 10px);
    box-shadow: 0 10px 24px rgb(15 23 42 / 14%);
    z-index: 1060;
    padding: 6px;
    animation: dropIn 0.15s ease-out;
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.workspace-switcher.open .workspace-switcher-dropdown {
    display: block;
}

.workspace-switcher-header {
    padding: 8px 12px 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-secondary, #64748B);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workspace-switcher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.12s;
}

.workspace-switcher-item:hover {
    background: var(--color-background, #F8FAFC);
}

.workspace-switcher-item.active {
    background: rgb(37 99 235 / 6%);
}

.workspace-switcher-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--color-background, #F8FAFC);
    border: 1px solid var(--color-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #2563EB);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.workspace-switcher-item.active .workspace-switcher-icon {
    background: var(--color-primary, #2563EB);
    border-color: var(--color-primary, #2563EB);
    color: white;
}

.workspace-switcher-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.workspace-switcher-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text, #1E293B);
    line-height: 1.2;
}

.workspace-switcher-sub {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #64748B);
    line-height: 1.3;
}

.workspace-switcher-current {
    color: var(--color-primary, #2563EB);
    font-size: 0.75rem;
}

/* Dark mode */
[data-theme="dark"] .workspace-switcher-btn {
    background: rgb(255 255 255 / 4%);
    border-color: rgb(255 255 255 / 10%);
    color: var(--color-text-secondary, #94A3B8);
}

[data-theme="dark"] .workspace-switcher-dropdown {
    background: var(--color-surface, #1E293B);
    border-color: rgb(255 255 255 / 10%);
    box-shadow: 0 16px 48px rgb(0 0 0 / 50%);
}

[data-theme="dark"] .workspace-switcher-item:hover {
    background: rgb(255 255 255 / 6%);
}

[data-theme="dark"] .workspace-switcher-name {
    color: var(--color-text, #F1F5F9);
}

[data-theme="dark"] .workspace-switcher-icon {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 10%);
}