/* =============================================================================
   Mindexia — Component Styles
   -----------------------------------------------------------------------------
   All values reference tokens from design-tokens.css. Never hard-code colors,
   spacing, or radii here. If you find yourself typing "#..." or "12px" — stop,
   and add a token first if one doesn't exist.
   ============================================================================= */

/* ─── LAYOUT PRIMITIVES ───────────────────────────────────────────────────── */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    padding: var(--mx-space-8);
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.footer {
    text-align: center;
    padding: var(--mx-space-4);
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-sm);
}

/* ─── TOPBAR (Legacy — used only when Shell layout is not active) ─────────── */
.topbar {
    background: var(--mx-brand);
    color: var(--mx-text-inverse);
    padding: var(--mx-space-3) var(--mx-space-6);
    display: flex;
    align-items: center;
    gap: var(--mx-space-4);
    box-shadow: var(--mx-shadow-sm);
}
.topbar .brand    { font-weight: 700; font-size: var(--mx-fs-xl); letter-spacing: 0.02em; }
.topbar .user-info { margin-inline-start: auto; font-size: var(--mx-fs-sm); }
.topbar .user-info small { opacity: 0.75; margin-inline-start: var(--mx-space-1); }

.btn-logout {
    background: rgba(255,255,255,0.15);
    color: var(--mx-text-inverse);
    padding: var(--mx-space-2) var(--mx-space-4);
    border-radius: var(--mx-radius);
    text-decoration: none;
    transition: background var(--mx-t-fast);
}
.btn-logout:hover {
    background: rgba(255,255,255,0.25);
    text-decoration: none;
    color: var(--mx-text-inverse);
}

/* ─── CARDS ────────────────────────────────────────────────────────────────── */
.login-card, .apps-card {
    background: var(--mx-surface);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-8);
    box-shadow: var(--mx-shadow-md);
    max-width: 480px;
    margin: 0 auto;
    border: 1px solid var(--mx-border);
}
.login-card.wide { max-width: 560px; }
.apps-card { max-width: 780px; }

.customer-name {
    text-align: center;
    color: var(--mx-brand);
    margin-bottom: var(--mx-space-1);
    font-weight: 600;
    font-size: var(--mx-fs-xl);
}

.sub {
    text-align: center;
    color: var(--mx-text-muted);
    margin-top: 0;
    margin-bottom: var(--mx-space-6);
    font-weight: 500;
}

.contract-ok  { text-align: center; color: var(--mx-text); margin-bottom: var(--mx-space-5); }
.contract-bad { text-align: center; color: var(--mx-danger); font-weight: 700; margin-bottom: var(--mx-space-5); }

/* ─── FORM CONTROLS (base — MindexiaForm overrides for grid layout) ───────── */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 0 var(--mx-space-3);
    height: var(--mx-control-h);
    border: 1px solid var(--mx-border-strong);
    border-radius: var(--mx-radius);
    font-size: var(--mx-fs-base);
    font-family: inherit;
    background: var(--mx-surface);
    color: var(--mx-text);
    transition: border-color var(--mx-t-fast), box-shadow var(--mx-t-fast);
}

textarea { padding: var(--mx-space-2) var(--mx-space-3); min-height: 80px; height: auto; }

input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
    border-color: var(--mx-gray-400);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--mx-border-focus);
    box-shadow: var(--mx-shadow-focus);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--mx-surface-alt);
    color: var(--mx-text-muted);
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
    color: var(--mx-text-faint);
}

/* Invalid states */
input.mx-invalid,
select.mx-invalid,
textarea.mx-invalid {
    border-color: var(--mx-danger);
}
input.mx-invalid:focus,
select.mx-invalid:focus,
textarea.mx-invalid:focus {
    box-shadow: var(--mx-shadow-focus-danger);
}

label {
    color: var(--mx-text);
    font-size: var(--mx-fs-base);
    font-weight: 500;
}

/* ─── TENANT STRIP ────────────────────────────────────────────────────────── */
.tenant-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mx-space-5);
    align-items: center;
    padding: var(--mx-space-3) var(--mx-space-4);
    background: var(--mx-brand-soft);
    border-right: 3px solid var(--mx-brand);
    border-radius: var(--mx-radius);
    margin-bottom: var(--mx-space-6);
    font-size: var(--mx-fs-sm);
    color: var(--mx-text);
}
.tenant-strip code {
    background: var(--mx-navy-100);
    padding: 2px var(--mx-space-1);
    border-radius: var(--mx-radius-sm);
    color: var(--mx-navy-800);
}
[data-theme="dark"] .tenant-strip code {
    background: var(--mx-navy-700);
    color: var(--mx-sky-100);
}

.admin-badge {
    background: var(--mx-danger);
    color: var(--mx-text-inverse);
    padding: 2px var(--mx-space-3);
    border-radius: var(--mx-radius-pill);
    font-size: var(--mx-fs-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ─── APPS GRID ───────────────────────────────────────────────────────────── */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--mx-space-5);
    margin-top: var(--mx-space-5);
}

.app-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-5);
    text-align: center;
    cursor: pointer;
    transition: transform var(--mx-t-base), box-shadow var(--mx-t-base), border-color var(--mx-t-base);
    text-decoration: none;
    color: inherit;
    display: block;
}
.app-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mx-shadow-md);
    border-color: var(--mx-brand);
    text-decoration: none;
}

/* Logo tile — used inside .app-card AND standalone in hero sections. */
.app-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--mx-radius-md);
    background: linear-gradient(135deg, var(--mx-navy-600), var(--mx-sky-400));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--mx-fs-3xl);
    font-family: var(--mx-font-ar);   /* Droid Kufi renders Arabic; Inter falls back for Latin */
    letter-spacing: -0.02em;
    box-shadow: var(--mx-shadow-sm);
    flex-shrink: 0;
}
.app-card .app-logo { margin: 0 auto var(--mx-space-3); }
.app-logo img,
.app-logo svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.app-card .app-name {
    color: var(--mx-text-strong);
    font-weight: 600;
    font-size: var(--mx-fs-md);
    margin: 0;
}
.app-card .app-sub {
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-sm);
    margin: var(--mx-space-1) 0 0;
}

/* ─── BUTTONS ─────────────────────────────────────────────────────────────── */
/* A <button> styled to read as inline text-link — for actions embedded inside
   a sentence (e.g. "no results here, click to search everywhere"). */
.mx-link-btn {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--mx-brand);
    text-decoration: underline;
    cursor: pointer;
}
.mx-link-btn:hover { color: var(--mx-brand-hover); }

.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
    padding: 0 var(--mx-space-5);
    height: var(--mx-control-h);
    font-size: var(--mx-fs-base);
    font-family: inherit;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--mx-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--mx-t-fast), border-color var(--mx-t-fast), color var(--mx-t-fast), transform var(--mx-t-fast);
    white-space: nowrap;
}
.mx-btn:active:not(:disabled) { transform: translateY(1px); }
.mx-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.mx-btn-primary {
    background: var(--mx-brand);
    color: var(--mx-text-inverse);
}
.mx-btn-primary:hover:not(:disabled) { background: var(--mx-brand-hover); color: var(--mx-text-inverse); }

.mx-btn-accent {
    background: var(--mx-accent);
    color: var(--mx-text-inverse);
}
.mx-btn-accent:hover:not(:disabled) { background: var(--mx-accent-hover); color: var(--mx-text-inverse); }

.mx-btn-outline {
    background: var(--mx-surface);
    color: var(--mx-brand);
    border-color: var(--mx-border-strong);
}
.mx-btn-outline:hover:not(:disabled) {
    background: var(--mx-brand-soft);
    border-color: var(--mx-brand);
    color: var(--mx-brand);
}

.mx-btn-ghost {
    background: transparent;
    color: var(--mx-text);
}
.mx-btn-ghost:hover:not(:disabled) { background: var(--mx-surface-alt); color: var(--mx-text-strong); }

.mx-btn-danger {
    background: var(--mx-surface);
    color: var(--mx-danger);
    border-color: var(--mx-danger);
}
.mx-btn-danger:hover:not(:disabled) {
    background: var(--mx-danger);
    color: var(--mx-text-inverse);
}

.mx-btn-lg { height: var(--mx-control-h-lg); padding: 0 var(--mx-space-6); font-size: var(--mx-fs-md); }
.mx-btn-sm { height: 28px; padding: 0 var(--mx-space-3); font-size: var(--mx-fs-sm); }
.mx-btn-block { width: 100%; }

.mx-btn-icon {
    padding: 0;
    width: var(--mx-control-h);
    justify-content: center;
}

/* ─── ALERTS (toast + inline) ─────────────────────────────────────────────── */
.mx-alert {
    padding: var(--mx-space-3) var(--mx-space-4);
    border-radius: var(--mx-radius-md);
    font-size: var(--mx-fs-base);
    display: flex;
    align-items: center;
    gap: var(--mx-space-3);
    border-inline-start: 3px solid;
    margin-bottom: var(--mx-space-3);
    line-height: var(--mx-lh-tight);
}
.mx-alert-success { background: var(--mx-success-50); color: var(--mx-success-800); border-color: var(--mx-success); }
.mx-alert-warning { background: var(--mx-warning-50); color: var(--mx-warning-800); border-color: var(--mx-warning); }
.mx-alert-danger  { background: var(--mx-danger-50);  color: var(--mx-danger-800);  border-color: var(--mx-danger); }
.mx-alert-info    { background: var(--mx-info-50);    color: var(--mx-text-strong); border-color: var(--mx-info); }

[data-theme="dark"] .mx-alert-success { color: #6EE7B7; }
[data-theme="dark"] .mx-alert-warning { color: #FDE68A; }
[data-theme="dark"] .mx-alert-danger  { color: #FCA5A5; }

/* ─── BADGES / PILLS ─────────────────────────────────────────────────────── */
.mx-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--mx-space-2);
    border-radius: var(--mx-radius-pill);
    font-size: var(--mx-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.mx-badge-brand   { background: var(--mx-brand-soft); color: var(--mx-brand); }
.mx-badge-accent  { background: var(--mx-accent-soft); color: var(--mx-navy-700); }
.mx-badge-success { background: var(--mx-success-50); color: var(--mx-success-800); }
.mx-badge-warning { background: var(--mx-warning-50); color: var(--mx-warning-800); }
.mx-badge-danger  { background: var(--mx-danger-50); color: var(--mx-danger-800); }
.mx-badge-muted   { background: var(--mx-surface-alt); color: var(--mx-text-muted); }

/* ─── DATA TABLES (general — MindexiaForm has its own child-grid look) ────── */
.mx-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    overflow: hidden;
    font-size: var(--mx-fs-base);
}
.mx-table th {
    background: var(--mx-brand);
    color: var(--mx-text-inverse);
    text-align: right;
    padding: var(--mx-space-3) var(--mx-space-4);
    font-weight: 600;
    font-size: var(--mx-fs-sm);
    letter-spacing: 0.02em;
}
.mx-table td {
    padding: var(--mx-space-3) var(--mx-space-4);
    border-bottom: 1px solid var(--mx-border);
    color: var(--mx-text);
}
.mx-table tbody tr:last-child td { border-bottom: none; }
.mx-table tbody tr:nth-child(even) td { background: var(--mx-surface-alt); }
.mx-table tbody tr:hover td { background: var(--mx-surface-hover); }

/* ─── FORM SECTION / CARD LAYOUT ──────────────────────────────────────────── */
.mx-form-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--mx-space-5);
}

.mx-form-header {
    padding: var(--mx-space-4) var(--mx-space-5);
    background: var(--mx-brand-soft);
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mx-space-4);
}
.mx-form-header h2 {
    margin: 0;
    color: var(--mx-brand);
    font-size: var(--mx-fs-xl);
    font-weight: 700;
}
.mx-form-header .mx-form-subtitle {
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-sm);
    margin-top: var(--mx-space-1);
}

.mx-form-body { padding: var(--mx-space-5) var(--mx-space-6); }

.mx-form-footer {
    padding: var(--mx-space-4) var(--mx-space-5);
    background: var(--mx-surface-alt);
    border-top: 1px solid var(--mx-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--mx-space-3);
}

/* ─── TOAST NOTIFICATION (fixed, top-center) ─────────────────────────────── */
.mx-toast-container {
    position: fixed;
    top: var(--mx-space-6);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: var(--mx-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-2);
    pointer-events: none;
}
.mx-toast {
    min-width: 280px;
    max-width: 480px;
    padding: var(--mx-space-3) var(--mx-space-4);
    border-radius: var(--mx-radius-md);
    box-shadow: var(--mx-shadow-lg);
    background: var(--mx-surface);
    color: var(--mx-text);
    border-inline-start: 3px solid var(--mx-brand);
    font-size: var(--mx-fs-base);
    pointer-events: auto;
    animation: mx-toast-in 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mx-toast-success { border-inline-start-color: var(--mx-success); }
.mx-toast-danger  { border-inline-start-color: var(--mx-danger); }
.mx-toast-warning { border-inline-start-color: var(--mx-warning); }

@keyframes mx-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── HEADINGS ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--mx-text-strong);
    font-weight: 700;
    line-height: var(--mx-lh-tight);
    margin: 0 0 var(--mx-space-3);
}
h1 { font-size: var(--mx-fs-4xl); }
h2 { font-size: var(--mx-fs-3xl); }
h3 { font-size: var(--mx-fs-2xl); }
h4 { font-size: var(--mx-fs-xl); }
h5 { font-size: var(--mx-fs-lg); }
h6 { font-size: var(--mx-fs-md); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mx-text-muted); }

p { margin: 0 0 var(--mx-space-3); }

/* ─── UTILITIES ──────────────────────────────────────────────────────────── */
.mx-text-muted { color: var(--mx-text-muted); }
.mx-text-brand { color: var(--mx-brand); }
.mx-text-success { color: var(--mx-success); }
.mx-text-danger  { color: var(--mx-danger); }
.mx-text-warning { color: var(--mx-warning); }

.mx-row { display: flex; align-items: center; gap: var(--mx-space-3); }
.mx-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--mx-space-3); }
.mx-stack { display: flex; flex-direction: column; gap: var(--mx-space-3); }

.mx-divider {
    height: 1px;
    background: var(--mx-border);
    margin: var(--mx-space-4) 0;
    border: none;
}

/* ─── LOGIN PAGE — brand header ───────────────────────────────────────────── */
/*  Compact, restrained hero. Follows the pattern used by Slack / Linear /
    Notion login pages: small brand mark on top, tagline as a whisper, then
    the actual form takes visual priority.
    The SVG has ~15% empty padding around the mark — the negative margin
    trims that so the visible mark lands closer to the tagline.            */

.mx-login-brand {
    text-align: center;
    padding: var(--mx-space-6) 0 var(--mx-space-2);
}

.mx-brand-img {
    width: 140px;
    max-width: 60vw;
    height: auto;
    display: block;
    margin: 0 auto -18px;   /* pull tagline up under the visible mark */
}

/* Dark mode: the logo's navy is too dark to read on a near-black background.
   A brightness lift + slight desaturation keeps the mark visible without
   drifting the brand hue. */
[data-theme="dark"] .mx-brand-img,
[data-theme="dark"] .navbar-brand__logo {
    filter: brightness(1.65) saturate(0.92);
}

.mx-login-brand .mx-tagline {
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-sm);
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.01em;
}

/* ─── Blazor Server error banner ──────────────────────────────────────────── */
/*  Markup lives in Pages/_Host.cshtml. Blazor's own JS toggles this to
    display:block on unhandled circuit errors — hidden by default so it
    doesn't sit visible at the bottom of every page. */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--mx-space-3) var(--mx-space-5);
    background: var(--mx-warning-50);
    color: var(--mx-warning-800);
    box-shadow: var(--mx-shadow-lg);
    font-size: var(--mx-fs-sm);
}

#blazor-error-ui .reload {
    color: var(--mx-warning-800);
    font-weight: 600;
    text-decoration: underline;
    margin-inline-start: var(--mx-space-2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: var(--mx-space-4);
    top: 50%;
    transform: translateY(-50%);
}