/* ══════════════════════════════════════════════════════════════════
   Tenant Profile — Shared Design System (GLOBAL STYLESHEET)
   Applies to:
     • /ta/tenant-profile       (detail page — TenantProfile.razor)
     • /ta/tenant-profile/edit  (edit page   — TenantProfileEdit.razor)
   Page bg #F4F6F8 · Card #FFFFFF · radius 8px · border #E4E7EB
   shadow 0 1px 3px rgba(0,0,0,0.05)

   ARCHITECTURE NOTE: these tokens used to live in 2 scoped CSS files
   (*.razor.css). With the new edit page, CSS isolation could not attach the scope
   attribute to the markup (no [b-xxxx] in the build) so the edit page's entire style
   was not applied → the page went full width. Therefore the tokens were consolidated
   into 1 global file, shared by both pages, independent of CSS isolation.
   The classes are prefixed "tp-" so they do not affect other pages.
   This file is linked in Client/App.razor AFTER MudBlazor's CSS.
   ══════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────── */
.tp-page {
    background-color: #F4F6F8;
    min-height: calc(100vh - 64px);
    width: 100%;
}

/* ── Avatar next to the tenant name: shows the uploaded logo image ────────── */
.tp-avatar {
    padding: 0 !important;
    overflow: hidden;
}

.tp-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Card container ──────────────────────────────────────────────── */
.tp-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.tp-card-title {
    color: #212B36;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

/* FormGroup renders a child MudPaper inside the card → sync the border/background */
.tp-card .mud-paper {
    background-color: #FFFFFF !important;
    border: 1px solid #E4E7EB !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

/* ── Labels & values ─────────────────────────────────────────────── */
.tp-field-label {
    color: #637381;
    font-size: 13px;
    line-height: 18px;
}

.tp-field-label.mud-typography {
    color: #637381 !important;
    font-size: 13px !important;
}

.tp-field-value {
    color: #212B36;
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
}

.tp-field-value.mud-typography {
    color: #212B36 !important;
    font-size: 14px !important;
}

.tp-info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tp-info-row .mud-icon-root {
    color: #919EAB !important;
    font-size: 18px;
    margin-top: 2px;
}

/* ── Action bar ──────────────────────────────────────────────────── */
/* Icon button (refresh on the detail page / back on the edit page) */
.tp-refresh-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: 1px solid #E4E7EB;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #637381;
    box-shadow: none;
}

.tp-refresh-btn:hover {
    background-color: #F4F6F8;
    color: #212B36;
}

/* The height comes from the central contract (App.razor.css) */
.tp-primary-btn {
    background-color: #2486f7 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.tp-primary-btn:hover {
    background-color: #1479ed !important;
    box-shadow: none !important;
}

.tp-primary-btn.mud-disabled {
    background-color: #C4CDD5 !important;
    color: #FFFFFF !important;
}

/* Secondary button (outlined) — for non-primary actions, e.g. "Restore defaults" */
.tp-secondary-btn {
    border: 1px solid #E4E7EB !important;
    background-color: #FFFFFF !important;
    color: #637381 !important;
    box-shadow: none !important;
}

.tp-secondary-btn:hover {
    background-color: #F4F6F8 !important;
    color: #212B36 !important;
    border-color: #C4CDD5 !important;
}

/* ── Status pill ─────────────────────────────────────────────────── */
.tp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.tp-status-pill--active {
    background-color: #E8F5E9;
    color: #2E7D32;
}

.tp-status-pill--inactive {
    background-color: #FFEBEE;
    color: #C62828;
}

.tp-status-pill--unknown {
    background-color: #F4F6F8;
    color: #637381;
}

/* ── Input/Select slightly rounded: 1px solid #DFE3E8 ──────────────────── */
.tp-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border: 1px solid #DFE3E8 !important;
    border-radius: 6px !important;
}

.tp-field .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #2486f7 !important;
    border-width: 1px !important;
}

.tp-field .mud-input-control-input-container > .mud-input > input.mud-input-root,
.tp-field .mud-input-slot {
    color: #212B36 !important;
}

/* ── Branding upload frame ───────────────────────────────────────── */
.tp-upload-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 1px dashed #C4CDD5;
    border-radius: 8px;
    background-color: #FFFFFF;
    overflow: hidden;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.tp-upload-frame:hover {
    border-color: #2486f7;
    background-color: #FAFBFC;
}

.tp-upload-preview {
    max-width: 100%;
    max-height: 176px;
    object-fit: contain;
}

.tp-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    color: #919EAB !important;
    text-align: center;
    cursor: pointer;
    text-decoration: none !important;
}

.tp-upload-empty:hover {
    color: #637381 !important;
}

.tp-upload-empty .mud-icon-root {
    font-size: 40px;
    color: inherit !important;
}

.tp-upload-hint {
    display: block;
    margin-top: 8px;
    color: #637381;
    font-size: 12px;
    line-height: 18px;
}

.tp-upload-hint.mud-typography {
    color: #637381 !important;
    font-size: 12px !important;
}

/* The ⋮ button at the top-right of the image */
.tp-upload-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.tp-upload-menu .mud-icon-button {
    width: 34px;
    height: 34px;
    border: 1px solid #E4E7EB;
    border-radius: 50%;
    background-color: #FFFFFF !important;
    color: #637381 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tp-upload-menu .mud-icon-button:hover {
    background-color: #F4F6F8 !important;
    color: #212B36 !important;
}

.tp-upload-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: 3;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tp-page {
        padding-left: 8px;
        padding-right: 8px;
    }

    .tp-upload-frame {
        min-height: 160px;
    }
}