/* DAdmin-inspired styling on top of MudBlazor's light palette. */

:root {
    /* ===== Brand colours ===== */
    --primary-500: #F35325;       /* coral-orange — CTAs, active items, wordmark */
    --primary-600: #D9421A;       /* hover/darken */
    --primary-100: #FFE4D9;       /* tinted backgrounds for active rows */

    --appbar-bg: #FFFFFF;
    --appbar-text: #1F2937;

    --drawer-bg: #2C3540;         /* dark navy/charcoal */
    --drawer-bg-hover: #353F4D;
    --drawer-text: #B5BEC9;
    --drawer-text-muted: #7C8794;
    --drawer-divider: #3A4452;

    --body-bg: #F0F2F5;
    --surface: #FFFFFF;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --border: #E5E7EB;
}

html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    margin: 0;
    background: var(--body-bg);
    color: var(--text-primary);
}

/* ===== App bar (white with coral wordmark) ===== */
.appbar-light {
    border-bottom: 1px solid var(--border);
}
.appbar-wordmark {
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--primary-500) !important;
}
.appbar-username {
    color: var(--text-primary) !important;
}

/* ===== Main content area ===== */
.main-content {
    background: var(--body-bg);
    min-height: 100vh;
}

/* MudLayout's cascade doesn't reach our interactive Sidebar, so MudMainContent
   never resizes when the drawer collapses. Drive it from our own state classes.
   The right-side gutter visually balances the sidebar on the left. */
.mud-main-content {
    padding-right: 240px !important;
    transition: padding-left 225ms cubic-bezier(0.4, 0, 0.6, 1) !important;
}
body:has(.drawer-expanded) .mud-main-content {
    padding-left: 240px !important;
}
body:has(.drawer-collapsed) .mud-main-content {
    padding-left: 56px !important;
}

/* ===== Drawer (dark) ===== */
.drawer-dadmin {
    background-color: var(--drawer-bg) !important;
    border-right: none !important;
}

/* MudLayout's cascading parameter doesn't cross the static→interactive
   boundary into Sidebar, so MudDrawer doesn't know the app bar height
   and the Width/MiniWidth params aren't reliably honored. Pin both manually.
   position: fixed keeps the drawer anchored to the viewport so it doesn't
   leave blank space underneath when the form content is taller than the viewport. */
.drawer-dadmin.mud-drawer {
    position: fixed !important;
    top: 48px !important;
    bottom: 0 !important;
    height: calc(100vh - 48px) !important;
    width: 240px !important;
    transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) !important;
}
.drawer-dadmin.drawer-collapsed.mud-drawer {
    width: 56px !important;
}

/* Drawer inner shell — flex column so the toggle row can sit at the bottom */
.drawer-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Drawer collapse/expand toggle — pinned to the bottom */
.drawer-toggle-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.25rem 0.5rem;
    margin-top: auto;
    border-top: 1px solid var(--drawer-divider);
}
.drawer-dadmin .drawer-toggle-btn {
    opacity: 0.75 !important;
}
.drawer-dadmin .drawer-toggle-btn .mud-icon-root {
    color: #FFFFFF !important;
    opacity: 1 !important;
}
.drawer-dadmin .drawer-toggle-btn:hover {
    background-color: var(--drawer-bg-hover) !important;
    opacity: 1 !important;
}
.drawer-dadmin .drawer-toggle-btn:hover .mud-icon-root {
    color: var(--primary-500) !important;
}
.drawer-collapsed .drawer-toggle-row {
    justify-content: center;
    padding: 0.25rem 0;
}

/* Profile card on top of drawer */
.drawer-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem 1.25rem;
    border-bottom: 1px solid var(--drawer-divider);
}
.drawer-profile .profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    border: 2px solid var(--primary-500);
}
.drawer-profile .profile-name {
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.drawer-profile .profile-actions {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}
.drawer-profile .profile-actions .mud-icon-button {
    color: var(--drawer-text) !important;
}
.drawer-profile .profile-actions .mud-icon-button:hover:not(.mud-disabled) {
    background-color: var(--drawer-bg-hover) !important;
    color: var(--primary-500) !important;
}

/* Hide profile card text/avatar when drawer is collapsed (mini variant) */
.drawer-collapsed .drawer-profile .profile-name,
.drawer-collapsed .drawer-profile .profile-actions {
    display: none;
}
.drawer-collapsed .drawer-profile {
    padding: 0.75rem 0.5rem;
}
.drawer-collapsed .drawer-profile .profile-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Inactive nav links */
.drawer-dadmin .mud-nav-link {
    color: var(--drawer-text);
}
.drawer-dadmin .mud-nav-link:hover {
    background-color: var(--drawer-bg-hover);
    color: #FFFFFF;
}
.drawer-dadmin .mud-nav-link .mud-icon-root,
.drawer-dadmin .mud-nav-link .mud-nav-link-icon svg {
    color: var(--drawer-text);
}

/* Active nav link — coral text + icon, subtle dark hover */
.drawer-dadmin .mud-nav-link.active,
.drawer-dadmin .mud-nav-link.mud-active {
    background-color: var(--drawer-bg-hover);
    color: var(--primary-500) !important;
    border-left: 3px solid var(--primary-500);
    font-weight: 600;
}
.drawer-dadmin .mud-nav-link.active .mud-icon-root,
.drawer-dadmin .mud-nav-link.mud-active .mud-icon-root,
.drawer-dadmin .mud-nav-link.active .mud-nav-link-icon svg,
.drawer-dadmin .mud-nav-link.mud-active .mud-nav-link-icon svg {
    color: var(--primary-500) !important;
    fill: var(--primary-500) !important;
}

/* ===== Login shell ===== */
.empty-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--drawer-bg);
}

.login-page {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 380px;
    border-radius: 8px;
}

/* ===== Login form fallback styling (Blazor InputText, not MudTextField) ===== */
.form-group {
    margin-bottom: 1rem;
}
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.form-control {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control::placeholder { color: #9BA3AF; }
.form-control:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(243, 83, 37, 0.18);
}

.primary-button {
    background: var(--primary-500);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.15s;
}
.primary-button:hover { background: var(--primary-600); }
.primary-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== Validation message styling (Blazor) ===== */
.validation-message {
    color: #F44336;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.form-link {
    text-align: right;
    font-size: 0.875rem;
}
.form-link a {
    color: var(--primary-500);
    text-decoration: none;
}
.form-link a:hover {
    text-decoration: underline;
}

/* ===== Permission group picker ===== */
.permission-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}
.permission-group {
    margin-bottom: 0.75rem;
}
.permission-group-header {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0.25rem 0;
}
.permission-group-items {
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid #E5E7EB;
}
.permission-group-child {
    margin-left: 1rem;
    margin-top: 0.5rem;
}

/* ===== Migration streaming console ===== */
.migration-console {
    background: #1A1A1A;
    color: #E5E7EB;
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    max-height: 70vh;
    overflow-y: auto;
}

.migration-console .migration-line {
    white-space: pre-wrap;
    word-break: break-word;
}