/* Only for the login page's plain <InputText> fields - MudBlazor components style themselves via
   AppTheme.cs. These fields can't use MudTextField because it never renders a `name` attribute,
   which the static-SSR login form depends on (see Login.razor). */
.login-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
}

.login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 6px;
}

.login-input:focus {
    outline: none;
    border-color: #1E88E5;
    border-width: 2px;
    padding: 7px 11px;
}

/* ---- App shell: full-width header + collapsible sidebar (MainLayout/AppTopBar/AppNavDrawer) ---- */

/* Subtle page background so the floating sidebar/content cards read as distinct surfaces. */
html, body, .mud-layout {
    background-color: #f5f6f8;
}

.app-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 0 16px 0 6px;
    gap: 4px;
}

.app-branding {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 12px;
    margin-left: 8px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.app-branding-name {
    font-weight: 600;
    white-space: nowrap;
}

.app-main-content {
    padding-top: calc(var(--mud-appbar-height) + 8px);
    transition: margin-left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

/* Rendered once in MainLayout by AppBreadcrumbs - no page supplies its own list (see that
   component's own doc comment). Typography matches the Design 1a breadcrumb spec (12px/weight
   600, muted) - this is the one Design 1a rule that already applies to every page, since the
   breadcrumb itself is global. */
.app-breadcrumbs {
    padding: 4px 0 12px;
    font-size: 12px;
    font-weight: 600;
}

.app-breadcrumbs .mud-breadcrumb-item,
.app-breadcrumbs .mud-breadcrumb-separator {
    color: var(--d1-text-muted, rgba(0, 0, 0, 0.45));
}

/* Sidebar: floating card. The drawer itself (.app-sidebar) is left transparent/borderless and
   kept at its normal MudBlazor-managed width/position (so MudMainContent's auto margin-left and
   the mini/responsive collapse math stay correct) - the "card" look is applied directly to
   MudNavMenu (.sidebar-card) instead of a wrapping div, so it stays the direct child of
   .mud-drawer-content that MudBlazor's own mini-mode CSS requires to auto-hide nav-link labels. */

.app-sidebar {
    background-color: transparent !important;
    box-shadow: none !important;
}

.sidebar-card {
    display: block;
    margin: 8px 0 16px 8px;
    height: calc(100% - 24px);
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 16px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Grouped nav, rounded + animated items */

.app-sidebar .mud-nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    transition: background-color 150ms ease, color 150ms ease;
}

.app-sidebar .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Icon-only collapsed rail: the card's own horizontal padding + the nav-link's own horizontal
   margin left too little room for the icon at MiniWidth (72px), clipping it. Shrink both only in
   this state - expanded mode keeps its more generous padding. */
.app-sidebar.mud-drawer--closed.mud-drawer-mini .sidebar-card {
    padding-left: 4px;
    padding-right: 4px;
}

.app-sidebar.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    margin-left: 2px;
    margin-right: 2px;
}

/* Interactive table cells (e.g. Tenants: Contact/License) that open a dialog on click. */
.clickable-cell {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
    transition: background-color 150ms ease;
}

.clickable-cell:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Subtle, monochrome decorative icons (contact/calendar) - never larger or louder than the text
   they sit next to. */
.subtle-icon {
    color: rgba(0, 0, 0, 0.4);
}

.date-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.date-icon {
    color: rgba(0, 0, 0, 0.35);
}

/* Interactive-affordance hint icon (Contact cell) - invisible at rest, only appears on hover so
   it doesn't add visual weight to the row by default. */
.interactive-hint-icon {
    color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 150ms ease;
}

.clickable-cell:hover .interactive-hint-icon {
    opacity: 1;
}

.clickable-cell:hover .interactive-text {
    text-decoration: underline;
    color: var(--mud-palette-primary);
}

/* The Active license chip is interactive (Outlined + info icon, set in Tenants.razor) - this
   hover cue is what makes that difference actually noticeable, distinguishing it from the
   non-interactive "No Active License" chip which is untouched by this rule. */
.clickable-cell:hover .mud-chip {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* ---- Shared "detail dialog" design system - reusable for any read-only info popup (Contact,
   License, and future ones). Composed from: this dialog-chrome CSS + the DetailField.razor
   component for individual field rows (one label+value per row, never two side by side, and it
   renders nothing at all - not an empty row - when there's no value). ---- */

/* Applies to every dialog in the app (detail popups and forms alike) - only the fixed 420px
   width below is specific to the "detail" popups, since forms often need more room (e.g. two
   fields sharing a row). */
.mud-dialog {
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(20, 24, 36, 0.28), 0 2px 8px rgba(20, 24, 36, 0.08);
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.detail-dialog.mud-dialog {
    width: 420px;
    max-width: 100%;
}

/* Shared, lightweight polish for form dialogs (e.g. EmailProviderDialog) - consistent header
   padding/weight and a field-row helper for pairing two related inputs (e.g. Host/Port), the
   same "pair" convention used by LicenseDetailDialog. */
.form-dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: #181B25;
    padding: 20px 24px 4px;
}

.form-dialog-body {
    padding: 12px 24px 4px;
}

.form-dialog-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8B8FA3;
    margin: 12px 0 4px;
}

.form-field-pair {
    display: flex;
    gap: 16px;
}

.form-field-pair > * {
    flex: 1;
    min-width: 0;
}

.detail-dialog-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 28px 8px;
}

.detail-dialog-avatar {
    background: linear-gradient(135deg, #5B5BD6, #7C6AE0) !important;
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.02em;
}

.detail-dialog-title {
    font-size: 20px;
    font-weight: 600;
    color: #181B25;
    line-height: 1.2;
}

.detail-dialog-body {
    padding: 8px 28px 4px;
}

.detail-field {
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Two related fields sharing one row (e.g. License Period/Price) - an explicit opt-in for
   callers that want this, not the DetailField default. */
.detail-field-pair {
    display: flex;
    gap: 32px;
}

.detail-field-pair .detail-field {
    flex: 1;
}

.detail-field-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8B8FA3;
}

.detail-field-value {
    font-size: 15px;
    font-weight: 400;
    color: #181B25;
}

.detail-field-annotation {
    font-size: 13px;
    color: #9297A8;
    margin-left: 4px;
}

.detail-divider {
    border-color: #ECEEF2 !important;
    margin: 0 !important;
}

.detail-dialog-footer {
    background-color: #F7F8FA;
    border-top: 1px solid #ECEEF2;
    padding: 16px 20px;
    display: flex;
    justify-content: flex-end;
}

/* Scoped to .mud-button-text specifically (not .mud-button-root generally) so a Filled button
   sharing this footer (e.g. EmailProviderDialog's "Save") keeps its own white-on-accent label
   instead of getting overridden to purple-on-purple. */
.detail-dialog-footer .mud-button-text .mud-button-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #4B4FD6;
}

.detail-dialog-footer .mud-button-root {
    border-radius: 8px;
    padding: 10px 16px;
}

.detail-dialog-footer .mud-button-root:hover {
    background-color: #EEF0FE;
}

/* MudNavGroup's expand/collapse chevron is a separate element from the label text, so it isn't
   covered by MudBlazor's own built-in "hide the label in mini mode" rule - it needs to stay
   visible (not hidden) even when collapsed, so instead of hiding it, the rail itself is widened
   below (MiniWidth) to give both the icon and the chevron room to render uncropped. */

/* ---- EmailTemplateEditor: full-page content-editor shell - the reusable pattern for any future
   content-editing page (report/document templates, etc.), not just this one. ---- */

.editor-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px 4px;
    margin-bottom: 16px;
}

.editor-info-card,
.editor-canvas-card,
.variables-panel,
.form-section-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background-color: #ffffff;
}

.form-section-hint {
    color: #8B8FA3;
    display: block;
}

.rte-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background-color: #FAFAFB;
}

.rte-canvas {
    min-height: 480px;
    padding: 20px 24px;
    outline: none;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #181B25;
}

.rte-canvas:focus {
    box-shadow: inset 0 0 0 2px rgba(126, 111, 255, 0.25);
}

.rte-textbody textarea {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

.variables-panel {
    padding: 16px;
}

.variable-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.variable-row:last-child {
    border-bottom: none;
}

.variable-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.variable-name {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4B4FD6;
    overflow-wrap: anywhere;
}

.variable-description {
    font-size: 0.75rem;
    color: #8B8FA3;
    overflow-wrap: anywhere;
}

.variables-panel-hint {
    color: #8B8FA3;
    display: block;
}

.preview-card {
    padding: 24px;
}

.preview-meta {
    font-size: 0.85rem;
    color: #4A4E5C;
}

.preview-html {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ---- Design 1a: "Clean Minimal SaaS - Indigo Accent" ----
   Shared tokens + component classes for the reference Tenant Detail redesign - built as global
   primitives (not page-scoped CSS) so any other page can adopt the same classes later. Only the
   typeface is rolled out app-wide immediately (safe, purely additive); the indigo accent/card
   layout below is opt-in per page via these classes rather than replacing AppTheme's MudBlazor
   Primary color everywhere, since that would silently reskin every other page's buttons and nav
   highlights without them having been reviewed under this palette. */

:root {
    --d1-bg: #FBFBFA;
    --d1-surface: #FFFFFF;
    --d1-ink: #191724;
    --d1-text-secondary: #6B6875;
    --d1-text-muted: #9D9AA8;
    --d1-border: #ECEAF1;
    --d1-divider: #F1EFF4;
    --d1-table-header-bg: #FAFAF9;
    --d1-accent: #4338CA;
    --d1-accent-tint: #EEF2FF;
    --d1-accent-shadow: rgba(67, 56, 202, .45);
    --d1-warning-bg: #FEF3C7;
    --d1-warning-text: #92400E;
    --d1-destructive: #DC2626;
    --d1-destructive-bg: #FEE2E2;
    --d1-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --d1-font-mono: ui-monospace, monospace;
}

html, body {
    font-family: var(--d1-font);
}

.d1-card {
    max-width: 1180px;
    background-color: var(--d1-surface);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 12px 32px -12px rgba(0, 0, 0, .18);
    padding: 28px 40px 34px;
    margin: 0 auto;
}

.d1-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.d1-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.d1-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--d1-ink);
    margin: 0;
}

.d1-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.d1-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 9px;
    font-family: var(--d1-font);
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
}

.d1-btn:hover {
    filter: brightness(1.08);
}

.d1-btn:active {
    transform: translateY(1px);
}

.d1-btn-primary {
    background-color: var(--d1-accent);
    color: #ffffff;
    box-shadow: 0 8px 16px -6px var(--d1-accent-shadow);
}

.d1-btn-secondary {
    background-color: #ffffff;
    color: var(--d1-ink);
    border: 1.5px solid #DEDBE6;
    padding: 8.5px 16px;
}

.d1-btn-secondary.d1-btn-destructive-text {
    color: var(--d1-destructive);
}

.d1-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}

.d1-pill-warning {
    background-color: var(--d1-warning-bg);
    color: var(--d1-warning-text);
}

.d1-pill-accent {
    background-color: var(--d1-accent-tint);
    color: var(--d1-accent);
}

.d1-pill-neutral {
    background-color: var(--d1-table-header-bg);
    color: var(--d1-text-secondary);
    border: 1px solid var(--d1-border);
}

.d1-pill-destructive {
    background-color: var(--d1-destructive-bg);
    color: var(--d1-destructive);
}

.d1-subline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
    flex-wrap: wrap;
}

.d1-subline-domain {
    color: var(--d1-accent);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.d1-subline-divider {
    color: var(--d1-border);
}

.d1-subline-id {
    font-family: var(--d1-font-mono);
    font-size: 11.5px;
    color: var(--d1-text-muted);
    word-break: break-all;
}

.d1-divider {
    border: none;
    border-top: 1px solid var(--d1-border);
    margin: 24px -40px 0;
}

.d1-section {
    padding-top: 26px;
}

.d1-section-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--d1-ink);
    margin: 0 0 12px;
}

.d1-section-heading-count {
    color: var(--d1-text-muted);
    font-weight: 600;
}

.d1-table-card {
    border: 1px solid var(--d1-border);
    border-radius: 12px;
    overflow: hidden;
}

.d1-table {
    width: 100%;
    border-collapse: collapse;
}

.d1-table thead {
    background-color: var(--d1-table-header-bg);
}

.d1-table th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d1-text-muted);
    padding: 10px 16px;
    border-bottom: 1px solid var(--d1-border);
}

.d1-table td {
    font-size: 13.5px;
    color: var(--d1-ink);
    padding: 12px 16px;
    border-bottom: 1px solid var(--d1-divider);
    vertical-align: middle;
}

.d1-table tbody tr:last-child td {
    border-bottom: none;
}

.d1-table tbody tr:hover {
    background-color: rgba(0, 0, 0, .02);
}

.d1-table tbody tr:hover .d1-row-delete {
    opacity: 1;
}

.d1-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--d1-accent-tint);
    color: var(--d1-accent);
    font-weight: 700;
    font-size: 11px;
    margin-right: 8px;
    flex-shrink: 0;
}

.d1-cell-with-avatar {
    display: flex;
    align-items: center;
}

.d1-role-tag {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
    background-color: var(--d1-accent-tint);
    color: var(--d1-accent);
}

.d1-row-delete {
    opacity: 0;
    transition: opacity 0.15s ease;
    background: none;
    border: none;
    color: var(--d1-destructive);
    font-weight: 700;
    font-size: 12px;
    font-family: var(--d1-font);
    cursor: pointer;
    padding: 0;
}

.d1-row-details {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #DEDBE6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--d1-accent);
    cursor: pointer;
    padding: 0;
}

.d1-row-reactivate {
    border-radius: 9px;
    padding: 5px 12px;
    font-size: 12px;
}

.d1-empty-state {
    border: 1px solid var(--d1-border);
    border-radius: 12px;
    padding: 34px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.d1-empty-state-icon {
    color: #B7B4C0;
    margin-bottom: 4px;
}

.d1-empty-state-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d1-text-secondary);
}

.d1-empty-state-helper {
    font-size: 12px;
    color: var(--d1-text-muted);
}

/* Page-level count next to a d1-title (e.g. "Licenses (12)") - sized down independently since
   .d1-title's own 28px/800 would otherwise be inherited as-is. */
.d1-title-count {
    font-size: 15px;
    font-weight: 600;
    color: var(--d1-text-muted);
    margin-left: 4px;
}

/* AutoFormDialog/AutoForm - the generic reflection-driven CRUD popup shared by Add/Edit Cost,
   Add/Edit Period, Add License, Replace License, and Revoke License. Restyled here once so every
   one of those forms picks up the Design 1a look, rather than restyling each call site. */
.d1-dialog-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--d1-ink);
}

.d1-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* Auditor verification: let the shared KYC form sheet fill its (wider) container instead of
   being capped at the A4 794px screen width. */
.auditor-form-wide .kyc-print-sheet {
    max-width: 100%;
}

/* ===== Auditor verification page ===== */
/* Clearer separation between the app bar and the search card. */
.auditor-search {
    margin-top: 88px;
}

/* Plain-language reassurance banner above the verification checklist. */
.auditor-verify-intro {
    background: #eef6f2;
    border: 1px solid #cfe6da;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.75;
    color: #14513f;
}

/* Investor + owner signature blocks, side by side. */
.auditor-sig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.auditor-sig-card {
    border: 1px solid #e2e6ef;
    border-radius: 10px;
    padding: 16px;
}

.auditor-sig-card-title {
    font-weight: 700;
    font-size: 14px;
    color: #2b2f7a;
    margin-bottom: 10px;
}

.auditor-sig-image {
    display: block;
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #eceff5;
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 10px;
}

.auditor-sig-line {
    font-size: 13px;
    color: #3a4256;
    margin: 3px 0;
}

.auditor-sig-key {
    color: #7a8398;
}

.auditor-sig-verified {
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f766e;
}

.auditor-sig-empty {
    font-size: 13px;
    color: #9098a8;
}

@media (max-width: 720px) {
    .auditor-sig-grid {
        grid-template-columns: 1fr;
    }
}

/* Print: only the document region (.auditor-doc) prints - the app bar, search card and action bar
   (.auditor-noprint) are hidden, and the cards flatten. The shared form sheet's own print rules
   (from the KYC UI stylesheet) still apply within it. */
@media print {
    .mud-appbar,
    .auditor-noprint {
        display: none !important;
    }

    body,
    .mud-layout,
    .mud-main-content {
        background: #ffffff !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin-top: 0 !important;
    }

    .auditor-doc {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .auditor-doc .mud-paper {
        box-shadow: none !important;
        border: 1px solid #e0e0e0;
    }

    .auditor-sig-grid,
    .auditor-sig-card {
        break-inside: avoid;
    }
}