@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

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

/* ---- Compact actions shared by data grids ---- */

.mg-grid-actions {
    align-items: center;
    display: inline-flex;
    gap: 0.3rem;
    white-space: nowrap;
}

.mg-grid-link {
    align-items: center;
    background: var(--dxds-color-surface-neutral-subdued-rest);
    border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
    border-radius: 0.3rem;
    box-sizing: border-box;
    color: var(--mg-link, #0d8ecb);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 650;
    justify-content: center;
    line-height: 1.15;
    min-height: 1.55rem;
    padding: 0.16rem 0.4rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Square icon-only action buttons used in dashboard grid Actions columns. */
.mg-grid-icon-button {
    flex: 0 0 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    padding: 0;
    width: 1.875rem;
}

.mg-grid-link:hover {
    background: var(--dxds-color-surface-neutral-default-hovered);
    color: var(--mg-link, #0d8ecb);
    text-decoration: none;
}

.mg-grid-link:focus-visible {
    outline: 2px solid var(--mg-blue, #007cba);
    outline-offset: 1px;
}

/* FocusOnNavigate focuses the page h1 after each navigation. Hide the resulting
   focus ring for programmatic/mouse focus while keeping it for keyboard users. */
h1:focus:not(:focus-visible) {
    outline: none;
}

.mg-grid-action-button {
    font-size: 0.72rem;
    line-height: 1.15;
    padding: 0.16rem 0.4rem;
    white-space: nowrap;
}

/* ---- Account/auth page layout (MetaSales pattern) ---- */

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}

/* Account settings use an isolated layout stylesheet. These theme overrides
   stay global because the dark-mode class is applied to the body element. */
body.mantine-dark .account-settings-page {
    --settings-blue: #47b5e7;
    --settings-blue-dark: #9bd8f3;
    --settings-blue-soft: #173c4d;
    --settings-ink: #eef3f5;
    --settings-muted: #abb9c1;
    --settings-border: #3b4850;
    --settings-surface: #252d32;
    --settings-surface-soft: #30393f;
}

body.mantine-dark .account-settings-content .alert-success,
body.mantine-dark .account-settings-content .security-summary.is-enabled {
    background: #173b2c;
    border-color: #286147;
    color: #a9e2c4;
}

body.mantine-dark .account-settings-content .security-summary.is-enabled > span {
    background: #24523e;
    color: #a9e2c4;
}

body.mantine-dark .account-settings-content .alert-warning {
    background: #463b1d;
    border-color: #735f27;
    color: #f2dc9c;
}

body.mantine-dark .account-settings-content .alert-danger {
    background: #482326;
    border-color: #74373c;
    color: #f2b8bc;
}

body.mantine-dark .account-settings-content .settings-danger-card {
    background: #35282b;
    border-color: #74373c;
}

body.mantine-dark .account-settings-content .email-status-pill {
    background: #24523e;
    color: #a9e2c4;
}

body.mantine-dark .account-settings-content .email-status-pill.is-pending {
    background: #51451f;
    color: #f2dc9c;
}

.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.375rem 0.75rem;
    font-size: inherit;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.or {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .or .or-line {
        border-bottom: 1px solid currentColor;
        width: 100%;
        opacity: 0.2;
    }

    .or .or-text {
        padding: 0 0.625rem;
        font-size: 0.75rem;
        line-height: 1.125rem;
        opacity: 0.7;
    }

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

    .links-container a {
        color: var(--mg-link, #0d8ecb);
    }

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: currentColor;
        opacity: 0.7;
    }

.alert {
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}

@media print {
    html,
    body {
        display: block;
        height: auto;
        overflow: visible;
    }

    .navigation-drawer > .dxbl-drawer-panel,
    .nav-buttons-container,
    #blazor-error-ui {
        display: none !important;
    }

    .dxbl-drawer-target-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .drawer-content {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }
}

/* ---- Change request status badges (brand palette) ---- */

.mc-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.mc-badge-new        { background: var(--mg-blue-0, #e5f4fb); color: var(--mg-blue-8, #015682); }
.mc-badge-review     { background: #fdf3d7; color: #8a6203; }
.mc-badge-dev        { background: var(--mg-blue-1, #bfe0f0); color: var(--mg-blue-9, #014366); }
.mc-badge-test       { background: #e9e2f7; color: #4d3690; }
.mc-badge-done       { background: #d9ece7; color: var(--mg-crop-green, #00654e); }
.mc-badge-cancelled  { background: #e7e9ea; color: var(--mg-grey, #4a4f54); }
.mc-badge-rejected   { background: #fadcdd; color: var(--mg-red, #d1242b); }
.mc-badge-rolledback { background: #fbe7d4; color: #97551a; }

body.mantine-dark .mc-badge { filter: brightness(0.92) saturate(1.05); }

/* ---- MFA pages (ported from MetaSales) ---- */

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.twofactor-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 40rem;
}

    .twofactor-content .list li {
        margin-bottom: 0.75rem;
    }

    .twofactor-content kbd {
        background: rgba(0, 124, 186, 0.12);
        border-radius: 0.25rem;
        padding: 0.125rem 0.375rem;
    }

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ---- 2FA management pages (PLAN.md §10 Phase 6) ---- */

.button-group {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

    .button-group .button-link {
        flex: 1 1 12rem;
    }