html, body {
    height: 100%;
}

.page {
    min-height: 100vh;
}

/*
   RTL note: this app sets dir="rtl" on <html> (see App.razor) for Kurdish
   (Sorani/Badini) and Arabic content. Bootstrap 5.1+ compiles its spacing
   and alignment utilities (.ms-*, .me-*, .ps-*, .pe-*, .text-start,
   .text-end, .border-start, .border-end) using real CSS logical properties
   (margin-inline-start, text-align: end, etc.), which browsers resolve
   against the element's actual directionality automatically — no separate
   "RTL build" of the stylesheet is needed for these to flip correctly.
   Keep any custom rules in this file logical too (inline-start/-end, not
   left/right) so nothing here fights that when the page is RTL.
*/

/* ---- Branding placeholder ----
   No real corporate colors/logo were provided. These variables exist so a
   future rebrand is a one-place edit instead of a hunt through every page —
   swap the values once real brand assets exist. Deliberately NOT wired into
   Bootstrap's own internal variables, since overriding those without
   knowing the exact compiled variable names in this specific Blazor.Bootstrap
   build risks fighting the framework's own styles unpredictably. */

/*:root {
    --brand-primary: #0d6efd;
    --brand-primary-dark: #0a58ca;
}*/

:root {
    --rz-primary: #1e5fbf;
    --rz-primary-light: #1e5fbf;
    --rz-primary-lighter: #cfe0f7;
    --rz-primary-dark: #14417f;
    --rz-primary-darker: #0d2c55;
    --rz-panel-menu-item-active-background-color: #cfe0f7;
    --rz-panel-menu-item-active-color: #1e5fbf;

    --rz-font-family: 'Cairo', 'Segoe UI', sans-serif;
}

html, body,
.rz-body,
.rz-widget,
.rz-button,
.rz-textbox,
.rz-datagrid,
.rz-panel-menu {
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
}

.rz-text-display-h1, .rz-text-display-h2,
.rz-text-display-h3, .rz-text-display-h4,
.rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6,
.rz-text-subtitle1, .rz-text-subtitle2,
.rz-text-body1, .rz-text-body2,
.rz-text-caption, .rz-text-overline {
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
}

---- Layout chrome ----
.nav-menu {
    width: 100%;
}

.nav-menu .nav-link {
    color: inherit;
}

/*.nav-menu .brand-header {
    background-color: var(--brand-primary);
    color: #fff;
}*/

/* Mobile-first: the sidebar is full-width and toggled by the hamburger
   button below md. From md up, it becomes a fixed-width, always-visible
   sidebar — see MainLayout.razor for the toggle logic. */
@media (min-width: 768px) {
    .nav-menu {
        min-width: 240px;
        max-width: 240px;
    }
}

.cursor-pointer {
    cursor: pointer;
}

/* ---- Print (invoice printing, Phase 8) ---- */
@media print {
    .nav-menu, .top-row, .mobile-topbar, .btn {
        display: none !important;
    }
}

.curved-btn {
    border-radius: 15px !important;
}

/* ---- Login page (split card) ---- */
.login-page-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-card {
    display: flex;
    width: 100%;
    max-width: 56rem;
    border-radius: var(--rz-border-radius, 12px);
    overflow: hidden;
    box-shadow: var(--rz-shadow-4, 0 8px 24px rgba(0,0,0,0.15));
}

.login-welcome-panel {
    flex: 1 1 45%;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, var(--rz-primary), color-mix(in srgb, var(--rz-primary) 55%, white));
}

.login-form-panel {
    flex: 1 1 55%;
    padding: 3rem 2rem;
    background: var(--rz-base-background-color, #fff);
}

@media (max-width: 640px) {
    .login-card {
        flex-direction: column;
    }
}

.item-picker-row {
    display: block;
    white-space: normal; /* let long descriptions wrap within the row instead of overflowing */
}

.item-picker-row + .item-picker-row {
    margin-top: 0; /* remove any default button gap if your theme adds one */
}


.item-picker-row {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    user-select: none;
}

.item-picker-row:hover {
    background-color: var(--rz-base-100, #f5f5f5);
}