/* ==========================================================================
   TouristicIq — Component & page styles
   Design tokens (colors, spacing, typography) live in tokens.css.
   This file contains only custom-class styles — MudBlazor defaults
   are preserved and NOT overridden here.
   ========================================================================== */

/* --- Nav Section Headings --- */
.nav-section-heading {
    display: block !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    color: var(--tiq-border-strong) !important;
    letter-spacing: 0.08em !important;
    padding: 0 10px !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
}

/* --- Presence Dots (Teams-style) --- */
.presence-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.presence-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 2px solid var(--tiq-bg-base);
    box-sizing: border-box;
}

.presence-online  { background: #4CAF50; }
.presence-away    { background: #FF9800; }
.presence-offline { background: #616161; }

/* X-mark inside offline dot */
.presence-offline::before,
.presence-offline::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 1px;
    background: #ccc;
    top: 50%;
    left: 50%;
}
.presence-offline::before { transform: translate(-50%, -50%) rotate(45deg); }
.presence-offline::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- Edit User Dialog --- */
.dialog-section-heading {
    display: block;
    color: var(--tiq-text-disabled) !important;
    letter-spacing: .08em;
    margin-bottom: .6rem;
    margin-top: .25rem;
}

.edit-user-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    background: var(--tiq-bg-hover);
    border: 1px solid var(--tiq-border-subtle);
    border-radius: 6px;
}

.edit-user-security-row > div {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--tiq-bg-base); }
::-webkit-scrollbar-thumb { background: var(--tiq-border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--tiq-border-strong); }

/* --- Text selection --- */
::selection {
    background: rgba(20, 184, 166, 0.3);
    color: var(--tiq-text-primary);
}

/* --- AppBar Icon Button (fullscreen, theme toggle) --- */
.appbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--tiq-text-secondary);
    cursor: pointer;
    text-decoration: none;
    margin-left: 2px;
    transition: background 0.15s, color 0.15s;
}
.appbar-icon-btn:hover {
    background: var(--tiq-bg-active);
    color: var(--tiq-text-primary);
}
.appbar-icon-btn .material-icons {
    font-size: 1.25rem;
    line-height: 1;
}

/* --- Recovery Codes Grid --- */
.recovery-codes-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.recovery-code-chip {
    display: inline-block;
    font-family: var(--tiq-font-mono);
    font-size: var(--tiq-fs-md);
    letter-spacing: 0.05em;
    background: var(--tiq-brand-primary-subtle);
    border: 1px solid var(--tiq-brand-primary-subtle);
    color: var(--tiq-text-primary);
    border-radius: var(--tiq-radius-md);
    padding: 6px var(--tiq-space-3);
}

/* --- Blazor Error --- */
.blazor-error-boundary {
    background: var(--tiq-color-danger-subtle);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--tiq-color-danger);
    border: 1px solid var(--tiq-color-danger-subtle);
    border-radius: var(--tiq-radius-md);
    margin: 1rem;
}

.blazor-error-boundary::after {
    content: "Ein Fehler ist aufgetreten.";
}

/* --- Validation --- */
.validation-message { color: var(--tiq-color-danger); font-size: var(--tiq-fs-sm); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--tiq-color-success); border-radius: var(--tiq-radius-sm); }
.invalid { outline: 1px solid var(--tiq-color-danger); border-radius: var(--tiq-radius-sm); }

/* --- Form floating placeholders --- */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--tiq-text-tertiary);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--tiq-border-strong);
}

/* ================================================================
   LAYOUT — AppBar
   ================================================================ */
.appbar-title {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tiq-text-primary);
}

/* User dropdown (details/summary) — styled to match MudBlazor menu/popover */
.nav-user-details { position: relative; list-style: none; }
.nav-user-details > summary { list-style: none; }
.nav-user-details > summary::-webkit-details-marker { display: none; }
.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 140px;
    background: var(--tiq-bg-raised);
    border-radius: 6px;
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,.4),
                0px 8px 10px 1px rgba(0,0,0,.32),
                0px 3px 14px 2px rgba(0,0,0,.24);
    z-index: 1200;
    padding: 8px 0;
}
.nav-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--tiq-text-primary);
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    transition: background 150ms cubic-bezier(0.4,0,0.2,1);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.6;
}
.nav-user-dropdown-item:hover { background: var(--tiq-bg-active); color: var(--tiq-text-primary); }
.nav-user-dropdown-divider { height: 1px; background: var(--tiq-border-subtle); margin: 4px 0; }
.nav-user-dropdown-icon { font-size: 1.25rem; color: var(--tiq-text-secondary); flex-shrink: 0; }
.nav-user-dropdown-form { margin: 0; }

/* User menu trigger */
.nav-user-trigger {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    padding: .25rem .625rem;
    border-radius: 6px;
    transition: background .15s;
}
.nav-user-trigger:hover { background: var(--tiq-border-subtle); }
.nav-user-info { display: flex; flex-direction: column; line-height: 1.25; }
.nav-user-name { font-size: .8125rem; font-weight: 500; color: var(--tiq-text-primary); }
.nav-user-role { font-size: .6875rem; color: var(--tiq-text-tertiary); }

/* Logout form/button reset */
.logout-form { margin: 0; }
.logout-btn {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    width: 100%;
    text-align: left;
}

/* ================================================================
   LAYOUT — Drawer
   ================================================================ */
/* .drawer-brand-header, .nav-brand, .nav-logo are defined in tiq-components.css */
.nav-brand:hover { text-decoration: none; }
.nav-brand-iq { color: var(--tiq-brand-primary); }
.nav-menu { padding: .5rem .5rem 0; flex: 1; overflow-y: auto; }
.nav-section-mt { margin-top: .75rem !important; }

/* Drawer footer */
.drawer-footer {
    margin-top: auto;
    padding: .875rem 1rem 1.125rem;
    border-top: 1px solid var(--tiq-bg-hover);
}
.drawer-version-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}
.drawer-version { font-size: .6875rem; color: var(--tiq-text-tertiary); font-weight: 500; }
.drawer-beta {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--tiq-color-warning-subtle);
    color: var(--tiq-color-warning);
    border: 1px solid var(--tiq-color-warning-subtle);
    border-radius: 3px;
    padding: .1rem .35rem;
}
.drawer-copyright { font-size: .5625rem; line-height: 1.6; color: var(--tiq-text-disabled); }
.drawer-powered { font-size: .5625rem; color: var(--tiq-text-disabled); margin-top: .1rem; }
.drawer-license-chip {
    display: inline-block;
    margin: .3rem 0 .5rem;
    padding: .15rem .5rem;
    border-radius: 4px;
    border: 1px solid rgba(13,148,136,0.3);
    background: rgba(13,148,136,0.07);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: .575rem;
    color: var(--tiq-text-disabled);
    letter-spacing: .04em;
    word-break: break-all;
}
.drawer-signout-wrap {
    padding: 0 .5rem .5rem;
}
.drawer-signout-form { width: 100%; }
.drawer-signout-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .55rem .75rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--tiq-text-tertiary);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-align: left;
}
.drawer-signout-btn:hover {
    background: var(--tiq-color-danger-subtle);
    color: var(--tiq-color-danger);
}
.drawer-signout-icon { font-size: 1.15rem; }

/* ================================================================
   PAGES — Common header
   ================================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.page-title {
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--tiq-text-primary) !important;
}
.page-subtitle { color: var(--mud-palette-text-secondary) !important; }

/* ================================================================
   PAGES — Card helpers
   ================================================================ */
.card-full { height: 100%; }
.card-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.card-icon { color: var(--tiq-text-tertiary); }
.card-value-bold {
    font-weight: 600 !important;
    color: var(--tiq-text-primary) !important;
}
.card-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.license-key {
    font-family: monospace;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}
.card-modules { display: flex; flex-direction: column; gap: 10px; }
.module-row { display: flex; justify-content: space-between; align-items: center; }
.module-link-on  { color: var(--tiq-text-primary); }
.module-link-off { color: var(--tiq-text-tertiary); pointer-events: none; }

/* ================================================================
   PAGES — Table helpers
   ================================================================ */
.table-empty { padding: 2rem; text-align: center; }
.cell-bold  { font-weight: 500 !important; }
.cell-mono  { font-family: monospace; color: var(--tiq-text-tertiary); }
.cell-muted { color: var(--mud-palette-text-secondary) !important; }

/* ================================================================
   LANGUAGE SWITCHER
   ================================================================ */
.lang-switch {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-right: .625rem;
}
.lang-btn {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--tiq-text-tertiary);
    text-decoration: none;
    padding: .2rem .4rem;
    border-radius: 4px;
    letter-spacing: .05em;
    transition: color .15s, background .15s;
    font-family: 'Inter', sans-serif;
}
.lang-btn:hover { color: var(--tiq-text-primary); background: var(--tiq-bg-hover); text-decoration: none; }
.lang-btn--on   { color: var(--tiq-text-brand) !important; }
.lang-sep       { font-size: .625rem; color: var(--tiq-text-disabled); }


/* ================================================================
   PROFILE MANAGEMENT — Layout, Card, Tabs
   ================================================================ */

/* Page Header */
.profile-page-title { font-weight: 700; letter-spacing: -0.03em; }

/* Left: Profile Card */
.profile-card {
    border-radius: 16px;
    border: 1px solid var(--tiq-border-subtle);
    background: var(--mud-palette-surface);
    overflow: visible;
    position: relative;
}
.profile-card-banner {
    height: 80px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, var(--tiq-brand-primary) 0%, var(--tiq-brand-primary-lighten) 100%);
    position: relative;
    overflow: hidden;
}
.profile-banner-edit-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}
.profile-banner-edit-btn:hover { background: rgba(0,0,0,0.65); }
.profile-banner-edit-btn .mud-icon-root { font-size: .9rem; color: #fff; }
.profile-card-body { padding: 0 1.25rem 1.25rem; }

/* Avatar */
.profile-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-top: -36px;
}
.profile-avatar-lg {
    width: 72px !important;
    height: 72px !important;
    border: 3px solid var(--mud-palette-surface);
    font-size: 2rem;
}
.profile-avatar-upload-form { display: inline-block; }
.profile-avatar-upload-btn {
    position: absolute;
    bottom: 0;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tiq-brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--mud-palette-surface);
    transition: background .2s;
}
.profile-avatar-upload-btn:hover { background: var(--tiq-brand-primary-hover); }
.profile-avatar-upload-btn .mud-icon-root { font-size: .9rem; color: #fff; }

/* Card Info */
.profile-card-name-row { display: flex; align-items: center; gap: .3rem; }
.profile-card-name { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.profile-verified-icon { flex-shrink: 0; }
.profile-card-bio {
    color: var(--tiq-text-secondary);
    font-size: .8125rem;
    line-height: 1.5;
}
.profile-card-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--tiq-text-tertiary);
}
.profile-role-chip {
    background: rgba(13,148,136,0.15) !important;
    color: var(--tiq-brand-primary-lighten) !important;
    border: 1px solid rgba(13,148,136,0.30);
}
.profile-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem .75rem;
    border-radius: 10px;
    border: 1px solid var(--tiq-border-subtle);
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color .18s, background .18s;
    text-align: center;
    cursor: pointer;
}
.profile-quick-action:hover {
    border-color: rgba(13,148,136,0.45);
    background: rgba(13,148,136,0.07);
}

/* Right: Content Card */
.profile-content-card {
    border-radius: 16px;
    border: 1px solid var(--tiq-border-subtle);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* Tab Bar */
.profile-tabs-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--tiq-border-subtle);
    background: var(--tiq-bg-sunken);
}
.profile-tabs-spacer { flex: 1; }

.profile-tab-link {
    display: inline-flex;
    align-items: center;
    padding: .35rem .75rem;
    border-radius: 8px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--tiq-text-secondary);
    text-decoration: none;
    transition: color .15s, background .15s;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.profile-tab-link:hover {
    color: var(--tiq-text-primary);
    background: var(--tiq-border-subtle);
    text-decoration: none;
}
.profile-tab-active {
    color: var(--tiq-brand-primary) !important;
    background: rgba(13,148,136,0.12) !important;
}
.profile-tab-back  { color: var(--tiq-text-disabled); }
.profile-tab-logout { color: rgba(255,100,100,0.65); }
.profile-tab-logout:hover { color: #ff6464; background: rgba(255,100,100,0.08); }

/* Tab Content */
.profile-tab-content { padding: 1.75rem; }