/*overrides to radzen theme and global styles*/

/* === Parameter AutoComplete Popup === */
.brb-autocomplete-popup {
    display: none;
    position: absolute;
    overflow: hidden;
    height: 200px;
    width: 300px;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius);
}

.brb-parameter-textbox {
    font-family: var(--rz-font-family-monospace, 'Courier New', monospace);
}

/* Barab Design System - Pixso-inspired Variables */
:root {
    /* === Canvas Colors === */
    --brb-canvas-page-background: white;
    --brb-canvas-viewport-background: #f5f5f5;
    --brb-canvas-page-border: #d0d0d0;
    --brb-canvas-page-shadow: rgba(0, 0, 0, 0.1);
    --brb-canvas-margin-guide: #007bff;
    --brb-canvas-grid-color: #e0e0e0;
    --brb-canvas-selection-color: #007bff;
    --brb-shadow-hover: rgba(0, 0, 0, 0.15);
    
    /* === Spacing System (Pixso-inspired consistent spacing) === */
    --brb-spacing-xs: 0.25rem;   /* 4px */
    --brb-spacing-sm: 0.5rem;    /* 8px */
    --brb-spacing-md: 0.75rem;   /* 12px */
    --brb-spacing-lg: 1rem;      /* 16px */
    --brb-spacing-xl: 1.5rem;    /* 24px */
    --brb-spacing-2xl: 2rem;     /* 32px */
    
    /* === Property Editor Design System === */
    --brb-property-border-radius: 4px;
    --brb-property-border-width: 1px;
    --brb-property-border-color: var(--rz-border-color);
    --brb-property-border-hover: var(--rz-border-hover-color);
    --brb-property-border-focus: var(--rz-primary);
    --brb-property-background: var(--rz-base-25);
    --brb-property-background-hover: var(--rz-base-50);
    --brb-property-background-focus: var(--rz-base-25);
    
    /* === Input Field Styling === */
    --brb-input-padding: var(--brb-spacing-sm) var(--brb-spacing-md);
    --brb-input-height: 2.25rem;
    --brb-input-background: white;
    --brb-input-background-hover: var(--rz-base-25);
    --brb-input-background-focus: white;
    --brb-input-background-disabled: var(--rz-base-100);
    
    /* === Focus and Hover Effects === */
    --brb-focus-ring: 0 0 0 2px var(--rz-primary-lighter);
    --brb-focus-ring-offset: 1px;
    --brb-hover-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --brb-active-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    
    /* === Typography === */
    --brb-label-font-size: var(--rz-font-size-caption);
    --brb-label-font-weight: 500;
    --brb-label-color: var(--rz-text-secondary-color);
    --brb-input-font-size: var(--rz-font-size-body);
    --brb-monospace-font: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    
    /* === Transitions (Pixso-inspired smooth animations) === */
    --brb-transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
    --brb-transition-medium: 200ms cubic-bezier(0.2, 0, 0, 1);
    --brb-transition-slow: 300ms cubic-bezier(0.2, 0, 0, 1);
    
    /* === Interactive States === */
    --brb-interactive-opacity-hover: 0.8;
    --brb-interactive-opacity-active: 0.6;
    --brb-interactive-opacity-disabled: 0.5;
}

/* Ribbon container styling */
.ribbon-container {
    flex-shrink: 0;
}

.brb-report-ribbon .rz-tabview-panel {
    padding: 8px 16px 8px 16px !important;
}

.brb-report-ribbon .rz-tabview-nav li a {
    padding: 0px 40px 0px 4px  !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    /*min-height: 20px !important;*/
}

.brb-report-ribbon .rz-tabview-nav .rz-tabview-title {
    font-size: 11px !important;
}

.brb-report-ribbon .rz-tabview-nav li {
    margin-right: 1px !important;
}

rz-dialog-content{
    height: 100% !important;
}

/* === Barab Property Editor Global Styles === */

/* Base property editor field styling */
.brb-property-field {
    display: flex;
    flex-direction: column;
    gap: var(--brb-spacing-xs);
    margin-bottom: var(--brb-spacing-sm);
}

/* Label styling for all property editors */
.brb-property-label {
    font-size: var(--brb-label-font-size);
    font-weight: var(--brb-label-font-weight);
    color: var(--brb-label-color);
    margin: 0;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

/* Input field base styles */
.brb-property-input {
    border: var(--brb-property-border-width) solid var(--brb-property-border-color);
    border-radius: var(--brb-property-border-radius);
    padding: var(--brb-input-padding);
    background: var(--brb-input-background);
    font-size: var(--brb-input-font-size);
    line-height: 1.4;
    transition: border-color var(--brb-transition-fast), 
                background-color var(--brb-transition-fast), 
                box-shadow var(--brb-transition-fast);
    width: 100%;
    min-height: var(--brb-input-height);
}

/* Hover states */
.brb-property-input:hover:not(:disabled):not(:focus) {
    border-color: var(--brb-property-border-hover);
    background: var(--brb-input-background-hover);
    box-shadow: var(--brb-hover-shadow);
}

/* Focus states */
.brb-property-input:focus {
    border-color: var(--brb-property-border-focus);
    background: var(--brb-input-background-focus);
    box-shadow: var(--brb-focus-ring);
    outline: none;
}

/* Active/pressed states */
.brb-property-input:active {
    box-shadow: var(--brb-active-shadow);
}

/* Disabled states */
.brb-property-input:disabled {
    background: var(--brb-input-background-disabled);
    color: var(--rz-text-disabled-color);
    cursor: not-allowed;
    opacity: var(--brb-interactive-opacity-disabled);
}

/* Monospace styling for numeric inputs */
.brb-property-input.brb-monospace {
    font-family: var(--brb-monospace-font);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.025em;
}

/* Compound input styling (for position, size, etc.) */
.brb-compound-input {
    display: flex;
    gap: var(--brb-spacing-xs);
    align-items: center;
}

.brb-compound-input .brb-property-input {
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

/* Input prefix/suffix styling */
.brb-input-prefix,
.brb-input-suffix {
    font-size: var(--brb-label-font-size);
    color: var(--brb-label-color);
    font-weight: var(--brb-label-font-weight);
    white-space: nowrap;
}

/* Button styling for property editors */
.brb-property-button {
    border: var(--brb-property-border-width) solid var(--brb-property-border-color);
    border-radius: var(--brb-property-border-radius);
    background: var(--brb-property-background);
    padding: var(--brb-spacing-xs) var(--brb-spacing-sm);
    cursor: pointer;
    transition: all var(--brb-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--brb-input-height);
}

.brb-property-button:hover:not(:disabled) {
    background: var(--brb-property-background-hover);
    border-color: var(--brb-property-border-hover);
    box-shadow: var(--brb-hover-shadow);
}

.brb-property-button:active {
    background: var(--brb-property-background-focus);
    box-shadow: var(--brb-active-shadow);
}

.brb-property-button.selected {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-primary-contrast);
}

.brb-property-button:disabled {
    opacity: var(--brb-interactive-opacity-disabled);
    cursor: not-allowed;
}

/* Error state styling */
.brb-property-field.error .brb-property-input {
    border-color: var(--rz-danger);
    background: var(--rz-danger-lighter);
}

.brb-property-field.error .brb-property-input:focus {
    box-shadow: 0 0 0 2px var(--rz-danger-light);
}

.brb-property-error-message {
    color: var(--rz-danger);
    font-size: calc(var(--brb-label-font-size) - 0.125rem);
    margin-top: var(--brb-spacing-xs);
    font-style: italic;
}

/* Alignment button grid */
.brb-alignment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--brb-spacing-xs);
    width: fit-content;
}

.brb-alignment-button {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--brb-property-border-width) solid var(--brb-property-border-color);
    border-radius: var(--brb-property-border-radius);
    background: var(--brb-property-background);
    cursor: pointer;
    transition: all var(--brb-transition-fast);
}

.brb-alignment-button:hover:not(.selected) {
    background: var(--brb-property-background-hover);
    border-color: var(--brb-property-border-hover);
}

.brb-alignment-button.selected {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-primary-contrast);
}

/* === Disabled Button Styling === */
/* Improve visibility of disabled buttons in ribbons and toolbars */
.brb-report-ribbon .rz-button:disabled,
.report-ribbon .rz-button:disabled,
.ribbon-group .rz-button:disabled {
    opacity: 0.4 !important;
    background-color: var(--rz-base-100) !important;
    border-color: var(--rz-border-color-light) !important;
    color: var(--rz-text-disabled-color) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Disabled button icon styling */
.brb-report-ribbon .rz-button:disabled .rz-icon,
.report-ribbon .rz-button:disabled .rz-icon,
.ribbon-group .rz-button:disabled .rz-icon {
    opacity: 0.5 !important;
    color: var(--rz-text-disabled-color) !important;
}

/* Hover states should not apply to disabled buttons */
.brb-report-ribbon .rz-button:disabled:hover,
.report-ribbon .rz-button:disabled:hover,
.ribbon-group .rz-button:disabled:hover {
    background-color: var(--rz-base-100) !important;
    border-color: var(--rz-border-color-light) !important;
    color: var(--rz-text-disabled-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Font formatting group disabled buttons */
.font-formatting-group .rz-button:disabled {
    opacity: 0.4 !important;
    background-color: var(--rz-base-100) !important;
    border-color: var(--rz-border-color-light) !important;
    color: var(--rz-text-disabled-color) !important;
}

/* === Floating Toolbar Styles === */

/* Global floating toolbar z-index management */
:root {
    --brb-floating-toolbar-z-index: 1050;
    --brb-floating-toolbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --brb-floating-toolbar-backdrop: rgba(255, 255, 255, 0.95);
}

/* Base floating toolbar container that can be used anywhere */
.brb-floating-toolbar {
    position: absolute;
    z-index: var(--brb-floating-toolbar-z-index);
    pointer-events: auto;
    transition: opacity var(--brb-transition-slow), transform var(--brb-transition-slow);
    background: var(--brb-floating-toolbar-backdrop);
    backdrop-filter: blur(8px);
    border: 1px solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    box-shadow: var(--brb-floating-toolbar-shadow);
    padding: var(--brb-spacing-xs);
    white-space: nowrap;
}

.brb-floating-toolbar.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    visibility: hidden;
}

.brb-floating-toolbar.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Floating toolbar specific ribbon overrides */
.brb-floating-toolbar .brb-ribbon-single-tab {
    border: none;
    background: transparent;
    padding: 0;
}

.brb-floating-toolbar .rz-tabview-panels {
    border: none;
    background: transparent;
    min-height: auto;
}

/* Compact button sizing for floating context */
.brb-floating-toolbar .ribbon-group {
    padding: var(--brb-spacing-xs) var(--brb-spacing-sm);
    min-height: 2rem;
    border-right: 1px solid var(--rz-border-color-lighter);
}

.brb-floating-toolbar .ribbon-group:last-child {
    border-right: none;
}

.brb-floating-toolbar .rz-button {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: var(--brb-spacing-xs);
}

.brb-floating-toolbar .ribbon-group-tools {
    min-height: 1.75rem;
    gap: 2px;
}

/* Additional floating toolbar wrapping prevention */
.brb-floating-toolbar .floating-toolbar-wrapper {
    display: flex;
    white-space: nowrap;
    min-width: max-content;
    width: max-content;
}

.brb-floating-toolbar ::deep .rz-tabview-panels,
.brb-floating-toolbar ::deep .rz-tabview-panel {
    width: max-content;
    min-width: max-content;
    white-space: nowrap;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .brb-floating-toolbar {
        border-width: 2px;
        background: var(--rz-background-color);
        backdrop-filter: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .brb-floating-toolbar {
        transition: opacity 0.1s ease;
    }
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .brb-compound-input {
        flex-direction: column;
        gap: var(--brb-spacing-sm);
    }

    .brb-property-input {
        min-height: 2.5rem; /* Slightly larger on mobile */
    }

    /* Mobile floating toolbar adjustments */
    .brb-floating-toolbar {
        max-width: calc(100vw - 2rem);
        overflow-x: auto;
    }

    .brb-floating-toolbar .ribbon-group {
        flex-shrink: 0;
    }
}

/* === Sidebar Utilities === */

/* Standard scrollable region for sidebar lists/content.
   Replace all inline style="flex: 1; overflow-y: auto; min-height: 0" with this class. */
.brb-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}