/* AppPlatform base styles — consumed by app-* projects */

/* ThemeProvider — primary token injection point (AC-18) */
.ap-theme-root {
    font-family: inherit;
    color: var(--ap-text-primary);
    background-color: var(--ap-bg-page);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--rz-body-font-family, system-ui, sans-serif);
    color: var(--ap-text-primary);
    background-color: var(--ap-bg-page);
}

/* Layout */
.ap-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* App switcher */
.ap-app-switcher {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-space-2);
    padding: var(--ap-space-2);
}

/* Theme toggle (Light <-> Dark) */
.ap-theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ap-space-2);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-text-primary);
    border-radius: var(--ap-radius-sm);
}

.ap-theme-toggle:hover {
    background-color: var(--ap-surface);
}

.ap-theme-toggle:focus-visible {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

.ap-app-switcher--loading {
    pointer-events: none;
}

.ap-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ap-space-1);
    padding: var(--ap-space-2);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--ap-text-xs);
    color: var(--ap-text-primary);
    transition: background-color var(--ap-motion-duration-fast) var(--ap-motion-ease-standard);
}

.ap-app-tile:hover {
    background-color: var(--ap-surface);
}

.ap-app-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.ap-app-icon--image {
    object-fit: contain;
}

.ap-app-icon--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
}

/* Breadcrumbs */
.ap-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--ap-space-1);
}

.ap-breadcrumbs li + li::before {
    content: '/';
    margin-right: var(--ap-space-1);
    color: var(--ap-border-default);
}

/* Layout header (used by RCL MainLayout) */
.ap-layout-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--ap-bg-page);
    border-bottom: 1px solid var(--ap-border-default);
    padding: 0 var(--ap-space-4);
}

.ap-header-nav {
    display: flex;
    align-items: center;
    gap: var(--ap-space-4);
    height: 56px;
    max-width: 1200px;
    margin: 0 auto;
}

.ap-header-brand {
    font-family: inherit;
    font-weight: 600;
    font-size: var(--ap-text-lg);
    color: var(--ap-primary);
    text-decoration: none;
}

.ap-layout-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--ap-space-6) var(--ap-space-4);
    width: 100%;
}

.ap-error {
    padding: var(--ap-space-4);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    color: var(--ap-text-primary);
    background-color: var(--ap-surface);
}

/* App switcher trigger + dropdown */
.ap-app-switcher-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--ap-space-2);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-text-primary);
    border-radius: var(--ap-radius-sm);
}

.ap-app-switcher-trigger:hover {
    background-color: var(--ap-surface);
}

.ap-app-switcher-trigger:focus-visible {
    outline: var(--ap-focus-ring-width) solid var(--ap-focus-ring-color);
    outline-offset: var(--ap-focus-ring-offset);
}

.ap-app-switcher-dropdown {
    position: absolute;
    top: 100%;
    /* Anchor to the right of the trigger — the trigger sits at the right edge of the
       header, so left: 0 made the dropdown overflow off-screen and trigger a horizontal
       page scrollbar (violating css-conformity-gate AC-09). */
    right: 0;
    z-index: 200;
    background-color: var(--ap-bg-page);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    padding: var(--ap-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-space-2);
    min-width: 240px;
}

/* Status badge */
.ap-status-badge {
    display: inline-block;
    padding: 2px var(--ap-space-2);
    border-radius: var(--ap-radius-sm);
    font-size: var(--ap-text-xs);
    font-weight: 600;
}

.ap-status-badge--live {
    color: var(--ap-primary);
}

.ap-status-badge--comingsoon {
    color: var(--ap-text-primary);
    opacity: var(--ap-state-disabled-opacity);
}

/* Notification host */
.ap-notification-host {
    position: fixed;
    bottom: var(--ap-space-4);
    right: var(--ap-space-4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
}

/* Toast notifications */
.ap-toast {
    display: flex;
    align-items: center;
    gap: var(--ap-space-2);
    padding: var(--ap-space-3) var(--ap-space-4);
    background-color: var(--ap-bg-page);
    border: 1px solid var(--ap-border-default);
    border-radius: var(--ap-radius-md);
    box-shadow: var(--ap-shadow-sm);
    min-width: 240px;
    max-width: 400px;
}

.ap-toast--info    { border-left: 3px solid var(--ap-info); }
.ap-toast--success { border-left: 3px solid var(--ap-success); }
.ap-toast--warning { border-left: 3px solid var(--ap-warning); }
.ap-toast--error   { border-left: 3px solid var(--ap-error); }

.ap-toast-icon {
    font-size: var(--ap-text-base);
    flex-shrink: 0;
}

.ap-toast-message {
    flex: 1;
    color: var(--ap-text-primary);
    font-family: inherit;
    font-size: var(--ap-text-sm);
}

.ap-toast-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ap-text-primary);
    font-size: var(--ap-text-base);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ap-radius-sm);
    padding: 0;
}

.ap-toast-dismiss:hover {
    background-color: var(--ap-surface);
}