/* Color Palette Variables (from previous discussions - important for global styles) */
:root {
    /* Backgrounds */
    --sidebar-bg: #FFFFFF;
    /* Pure white sidebar background */
    --top-row-bg: #F0F2F5;
    /* Very light gray for top bar / general backgrounds */

    /* Purple Tones */
    --primary-purple: #813B9B;
    /* Vibrant purple for text, icons, headers */
    --light-purple: #925BB5;
    /* Slightly lighter purple for hover/active states if needed */
    --dark-purple: #6A2C87;
    /* Slightly darker purple for subtle active text */

    /* Text Colors */
    --nav-text-color: var(--primary-purple);
    /* Default link text color */
    --nav-brand-color: var(--primary-purple);
    /* Brand text color */
    --nav-category-header-color: var(--primary-purple);
    /* Category header text color */
    --user-info-text-color: #555555;
    /* Dark gray for user name/role */

    /* States */
    --nav-link-hover-bg: rgba(129, 59, 155, 0.05);
    /* Very subtle purple tint on hover */
    --nav-link-active-bg: rgba(129, 59, 155, 0.1);
    /* Slightly more subtle purple tint on active */
    --nav-active-border-color: var(--primary-purple);
    /* Thin vibrant border for active */

    /* Toggler */
    --nav-toggler-color: var(--primary-purple);
    /* Toggler icon color */
    --nav-toggler-border: rgba(129, 59, 155, 0.2);
    /* Toggler border */
    --nav-toggler-bg: rgba(129, 59, 155, 0.05);
    /* Toggler background */
    --nav-toggler-checked-bg: rgba(129, 59, 155, 0.1);
    /* Toggler checked background */
}

/* Base HTML and Body Styles for Full Height Layout */
html,
body {
    font-family: var(--bs-font-sans-serif, 'vazir', Tahoma, sans-serif);
    height: 100%;
    /* Essential for flexbox layouts */
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Prevent body scrollbars, allow children to scroll if needed */
    background-color: var(--top-row-bg);
    /* Global background for the page, consistent with top-row */
    color: #333;
    /* Default text color for main content area */
}

/* Page Container (wraps sidebar and main content) */
.page {
    height: 100vh;
    /* Takes full viewport height */
    display: flex;
    /* Enables flexbox for child elements */
    flex-direction: row;
    /* Arranges sidebar and main content horizontally */
    flex-wrap: nowrap;
    /* Prevents wrapping onto the next line */
}

/* Sidebar Styling */
.sidebar {
    width: 250px;
    /* Fixed width for your sidebar */
    flex-shrink: 0;
    /* Prevents sidebar from shrinking */
    overflow-y: auto;
    /* Allows vertical scrolling if nav menu content is long */
    overflow-x: hidden;
    /* Hides horizontal overflow */
    background-color: var(--sidebar-bg);
    /* White background for the sidebar */
    /* Text color for anything directly in sidebar outside NavMenu */
    color: var(--user-info-text-color);
    /* Dark gray for general sidebar text */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* Subtle shadow for depth */
}

/* Main Content Area (takes up remaining space) */
main {
    flex-grow: 1;
    /* Allows main content to take up all available horizontal space */
    display: flex;
    /* Makes main a flex container for its children (top-row and content) */
    flex-direction: column;
    /* Stacks top-row and content vertically */
    height: 100%;
    /* Ensures main takes full height of .page for flex-grow-1 to work effectively */
    min-width: 0;
    /* Important: Allows flex item to shrink below its content size in crowded layouts */
}

/* Top Row (Header above main content) */
.top-row {
    flex-shrink: 0;
    /* Prevents top-row from shrinking */
    border-bottom: 1px solid #e0e0e0;
    /* Light gray border, consistent with nav dividers */
    padding: 0.5rem 1rem;
    background-color: var(--top-row-bg);
    /* Very light gray background */
    color: var(--nav-brand-color);
    /* Brand color for text in top-row */
}

/* Main Content Area for scrolling */
.content {
    flex-grow: 1;
    /* Allows content to take up remaining vertical space in 'main' */
    overflow: auto;
    /* Enables both vertical and horizontal scrolling within the content area */
    padding: 1rem;
    /* Adjust padding as needed for your main content */
    background-color: var(--top-row-bg);
    /* Consistent light background */
}


/* Global Link Styles (matching purple theme) */
a,
.btn-link {
    color: var(--primary-purple);
    /* Primary Purple for links */
}

a:hover,
.btn-link:hover {
    color: var(--dark-purple);
    /* Darker Purple on hover */
}

/* Primary Button Styles (matching purple theme) */
.btn-primary {
    color: #fff;
    background-color: var(--primary-purple);
    /* Primary Purple for buttons */
    border-color: var(--dark-purple);
    /* Darker Purple for button border */
}

.btn-primary:hover {
    background-color: var(--dark-purple);
    /* Darker Purple on hover */
    border-color: var(--dark-purple);
    /* Consistent hover border */
}

/* Focus Outline (using purple theme colors) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary-purple);
}

h1:focus {
    outline: none;
}

/* Form Validation Styles */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
    /* Green for valid */
}

.invalid {
    outline: 1px solid #e50000;
    /* Red for invalid */
}

.validation-message {
    color: #e50000;
    /* Red for validation messages */
}

/* Blazor Error Boundary (standard) */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z….5NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Form Floating Labels - Adjust text alignment for RTL */
.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder {
    text-align: start;
}

/* Global RTL Adjustments for layout */
[dir="rtl"] {
    text-align: right;
}

/* General RTL for sidebar and top-row layout */
[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
    /* Push sidebar to the right */
}

[dir="rtl"] .top-row {
    justify-content: flex-start;
    /* For Navbar-brand and toggler in RTL */
}

[dir="rtl"] .top-row ::deep a,
.top-row ::deep .btn-link {
    margin-left: 0;
    margin-right: 1.5rem;
    /* Adjust padding/margin for links within top-row */
}

/* Login page styles */
.login-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* Added subtle shadow for cards/containers */
}

[dir="rtl"] .login-container {
    text-align: right;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Ensure these styles are in your wwwroot/css/app.css */

.page-header-container-simple {
    flex-shrink: 0;
    /* Adjusted padding for more space:
       - 1.5rem top/bottom for a bit more vertical height
       - 2rem left/right for more horizontal breathing room
    */
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;

    /* These are already set for centering: */
    display: flex;
    justify-content: center;
    /* Centers content horizontally */
    align-items: center;
    /* Centers content vertically */
    text-align: center;
    /* Fallback for text alignment within the flex item */
}

.page-title-centered {
    color: var(--primary-purple);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
    /* Ensures no default margins interfere with centering */
    padding: 0;
}

/* wwwroot/css/app.css or a new file like wwwroot/css/custom-inputs.css */

.input-ltr {
    direction: ltr;
    /* Forces left-to-right text direction */
    text-align: left;
    /* Aligns text to the left within the input */
}

/* Optional: Max-width for the input field itself, or its container */
.phone-number-input-container {
    max-width: 300px;
    /* Adjust this value as needed */
    /* This width applies to the <div> containing the input, label, and validation message */
}

/* If you want to apply max-width directly to the input */
.input-max-width {
    max-width: 250px;
    /* Adjust as needed */
}

/* If you use the MobileInput component, it already handles width somewhat.
   This example is for your plain InputText fields. */

@font-face {
    font-family: 'vazir';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/Vazir.eot');
    src: url('/fonts/Vazir.eot?#iefix') format('embedded-opentype'),
        url('/fonts/Vazir.woff2') format('woff2'),
        url('/fonts/Vazir.woff') format('woff'),
        url('/fonts/Vazir.ttf') format('truetype');
}

body {
    font-family: var(--bs-font-sans-serif, 'vazir', Tahoma, sans-serif);
}

/* Devices Settings */
[dir="ltr"] {
    text-align: left;
    direction: ltr;
}

/* RTL Support */
[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

[dir="rtl"] .form-control {
    text-align: right;
}

[dir="rtl"] .input-group-prepend {
    margin-left: -1px;
    margin-right: 0;
}

[dir="rtl"] .input-group-append {
    margin-right: -1px;
    margin-left: 0;
}

[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .custom-select:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

[dir="rtl"] .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
[dir="rtl"] .input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
[dir="rtl"] .input-group > .input-group-append:not(:last-child) > .btn,
[dir="rtl"] .input-group > .input-group-append:not(:last-child) > .input-group-text,
[dir="rtl"] .input-group > .input-group-prepend > .btn,
[dir="rtl"] .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}