/* --- Theme tweaks --- */
:root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --rz-font-size: 15px;
}

html, body {
    font-family: var(--font-sans);
    font-size: var(--rz-font-size);
    line-height: 1.45;
    color: #0f172a;
}

/* Make sure Radzen components inherit the same font */
.rz-root, .rz-component, .rz-content, .rz-grid, .rz-card, .rz-button, .rz-input,
.rz-dropdown, .rz-dialog, .rz-notification, .rz-toolbar, .rz-heading {
    font-family: var(--font-sans) !important;
}

/* Optional: nicer headings */
h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: .2px;
}
/* ensure Radzen dialogs are always above everything */
.rz-dialog, .rz-dialog-wrapper, .rz-overlay {
    z-index: 2147483000 !important;
}


/* --- Top bar --- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    background: #fff;
    border-bottom: 1px solid #e6e6ef;
    box-shadow: 0 1px 0 rgba(17,24,39,.03);
}

    .topbar .brand {
        font-weight: 700;
        letter-spacing: .2px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .topbar .brand .dot {
            width: 10px;
            height: 10px;
            border-radius: 9999px;
            background: var(--rz-primary);
            display: inline-block;
        }

    .topbar nav a {
        margin-left: 18px;
        color: #111827;
        text-decoration: none;
        font-weight: 600;
    }

        .topbar nav a:hover {
            color: var(--rz-primary);
        }

/* --- Page container (adjusted) --- */
.container {
    width: 90% !important;               /* reduce from 95% to remove horizontal scroll */
    max-width: 1920px;        /* cap on ultra-wide screens */
    margin: 20px auto 48px;   /* center */
    padding: 0 20px;          /* modest inner padding */
    box-sizing: border-box;
}

@media (min-width: 1400px) {
    .container { width: 88%; padding: 0 24px; }
}
@media (min-width: 1800px) {
    .container { width: 85%; padding: 0 28px; }
}

/* Remove previous broad overrides that could force overflow */
.rz-datatable, .rz-grid, .rz-datatable-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* allow internal scroll if columns exceed */
}

/* Override any Radzen container constraints */
.rz-container, .rz-body, .rz-card {
    max-width: none !important;
    width: 100% !important;
}

/* --- Cards & grids --- */
.rz-card {
    border-radius: var(--rz-border-radius);
    box-shadow: 0 8px 20px rgba(17,24,39,.06);
}

.rz-grid {
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

    .rz-grid .rz-column-title {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: .6px;
        color: #475569;
    }

.rz-button.rz-button-md {
    border-radius: 12px;
    padding: .55rem 1rem;
}

/* spacing helpers */
.page-title {
    margin-bottom: 12px;
}

.actions {
    margin-bottom: 12px;
}

.final-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

/* simple modal with high z-index (no JS deps) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483000;
}

.modal {
    background: #fff;
    border-radius: 14px;
    width: 520px;
    max-width: 92vw;
    padding: 20px 22px;
    box-shadow: 0 24px 64px rgba(2,6,23,.35);
}

.form-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.error {
    color: #b91c1c;
}

/* Center Radzen dialogs and keep them within the viewport */
.dlg-centered {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 90vh;
    width: auto; /* width is still controlled via DialogOptions.Width */
    overflow: hidden;
}

    .dlg-centered .rz-dialog-content {
        max-height: 70vh; /* scroll inner content if it gets tall */
        overflow: auto;
    }
/* Center every Radzen dialog perfectly */
.rz-dialog-wrapper {
  position: fixed;
  inset: 0;                    /* top/right/bottom/left: 0 */
  display: flex !important;    /* flex centering */
  align-items: center !important;
  justify-content: center !important;
  padding: 24px;               /* breathing room on small screens */
}

.rz-dialog {
  position: static !important; /* let the wrapper do the centering */
  margin: 0 !important;
  max-height: 90vh;
}

.rz-dialog-content {
  max-height: 70vh;            /* scroll inner content if tall */
  overflow: auto;
}

/* === FULL WIDTH ADMIN LAYOUT OVERRIDES === */
/* Force all admin pages to use 95% of viewport width */
body, html {
    width: 100%;
    overflow-x: hidden;
}

/* Override Radzen's default max-width on any element */
.rz-body-content,
.rz-card-content,
.rz-datatable-data,
.rz-paginator,
div[class*="rz-"] {
    max-width: none !important;
}

/* Ensure the main app container doesn't restrict width */
#app, .rz-body {
    width: 100% !important;
    max-width: none !important;
}