/* ==========================================================================
   Wisys UI Styles
   Structural, layout, and component overrides
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOCAL UI VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --ws-backdrop-color: rgba(0, 0, 0, 0.3);
    --ws-backdrop-filter: blur(4px);
    --ws-border-radius-sm: calc(var(--ws-border-radius, 0px) / 8);
    --ws-border-radius-md: calc(var(--ws-border-radius, 0px) / 4);
    --ws-border-radius-lg: calc(var(--ws-border-radius, 0px) / 2);
}

    :root[data-bs-theme="dark"] {
        --ws-backdrop-color: rgba(95, 95, 95, 0.3);
    }

/* --------------------------------------------------------------------------
   BASE ELEMENTS
   -------------------------------------------------------------------------- */
html, body {
    font-family: var(--ws-font-family) !important;
    font-size: var(--ws-font-size) !important;
}

body {
    background-color: var(--ws-bg-body);
    color: var(--ws-text-base);
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
/* Keep focus border to primary semantic */
.form-control:focus,
.form-select:focus,
.e-input:focus,
.e-textbox:focus {
    border-color: var(--ws-border-primary) !important;
}

/* --------------------------------------------------------------------------
   INPUT FOCUS STYLING
   -------------------------------------------------------------------------- */
.e-input,
.e-input-group.e-input-focus,
.e-input:focus,
.e-input-group.e-input-focus .e-input {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--ws-border-primary) !important;
}

    .e-input:focus,
    .e-input-group.e-input-focus {
        border-color: var(--ws-border-primary) !important;
        box-shadow: 0 0 0 3px rgba(var(--ws-border-primary-rgb), .25) !important;
    }

/* --------------------------------------------------------------------------
   TABS
   -------------------------------------------------------------------------- */
.e-tab .e-tab-header .e-toolbar-items .e-tab-text {
    color: var(--ws-text-base) !important;
    font-weight: 400;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--ws-primary) !important;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   DROPDOWN
   -------------------------------------------------------------------------- */
    /* Page size dropdown in grid pager: selected, active, and hover overrides */
    .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-selected, .e-listbox-container .e-list-item.e-selected {
    background-color: var(--ws-primary) !important;
    color: var(--ws-primary-text) !important;
}
    .e-dropdownbase .e-list-item.e-hover,
    .e-dropdownbase .e-list-item:hover {
        background-color: var(--ws-primary-hover) !important;
        color: var(--ws-primary-text) !important;
    }
    
/* --------------------------------------------------------------------------
   DIALOGS
   -------------------------------------------------------------------------- */
    /* Dialog structure */
.e-dialog, .e-edit-dialog {
    padding: 1rem !important;
    border: 1px solid var(--ws-border-muted) !important;
}

    .e-dialog .e-dlg-header-content,
    .e-dialog .e-footer-content {
        border: none !important;
    }

.e-edit-dialog {
    z-index: 999999 !important;
    padding: 1rem !important;
}

    .e-edit-dialog label {
        font-weight: 600 !important;
        font-size: 14px !important;
        color: var(--ws-text-base) !important;
        padding-left: 4px !important;
    }

/** Fix spacing on close button **/
.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
    top: -7px !important;
    left: -7px !important;
}
/* ======================================================= */
/* Syncfusion: Override ALL dialog/grid edit overlays       */
/* ======================================================= */

.e-dlg-overlay, /* dialog backdrops (dialogs outside grid) */
.e-overlay, /* grid edit dialog backdrops */
.e-popup-overlay,
.e-popup-overlay-dark {
    backdrop-filter: var(--ws-backdrop-filter) !important;
    -webkit-backdrop-filter: var(--ws-backdrop-filter) !important;
    background-color: var(--ws-backdrop-color) !important;
}

/* --------------------------------------------------------------------------
   GRID
   -------------------------------------------------------------------------- */
/* Rounded top */
.e-control.e-grid {
    border-radius: var(--ws-border-radius-md) var(--ws-border-radius-md) 0 0;
}
.e-grid .e-toolbar {
    border-radius: var(--ws-border-radius-md) var(--ws-border-radius-md) 0 0;
}

/* Primary page number */
.e-grid .e-pager .e-link.e-currentitem.e-active {
    background-color: var(--ws-primary) !important;
    border-color: var(--ws-border-primary) !important;
    color: var(--ws-primary-text) !important;
}

/* --------------------------------------------------------------------------
   PANELS / UTILITIES
   -------------------------------------------------------------------------- */
.panel,
.panel-alt,
.panel-muted,
.panel-primary,
.panel-accent {
    padding: 1rem 1.5rem;
    border-radius: var(--ws-border-radius-lg);
    border: 1px solid var(--ws-border-muted);
    color: var(--ws-text-base);
}

.panel {
    background-color: var(--ws-bg-base);
}

.panel-alt {
    background-color: var(--ws-bg-alt);
}

.panel-muted {
    background-color: var(--ws-bg-muted);
}

.panel-primary {
    background-color: var(--ws-primary);
    color: var(--ws-primary-text);
}

.panel-accent {
    background-color: var(--ws-accent);
    color: var(--ws-accent-text);
}

/* --------------------------------------------------------------------------
   TEXT
   -------------------------------------------------------------------------- */
.text-accent {
    --bs-text-opacity: 1;
    color: rgba(var(--ws-accent-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
    --bs-text-opacity: 1;
    color: rgba(var(--ws-text-secondary-rgb), var(--bs-text-opacity)) !important;
}

/* Override Bootstrap muted text */
.text-muted {
    --bs-text-opacity: 1;
    color: rgba(var(--ws-text-muted-rgb), var(--bs-text-opacity)) !important;
}

.primary-text {
    color: var(--ws-primary-text) !important;
}

.accent-text {
    color: var(--ws-accent-text) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
/* Primary button */
/***********************
.e-btn.e-primary {
    background-color: var(--ws-primary) !important;
    border-color: var(--ws-border-primary) !important;
    color: var(--ws-primary-text) !important;
}

    .e-btn.e-primary:hover,
    .e-btn.e-primary:focus {
        background-color: var(--ws-primary-hover) !important;
        border-color: var(--ws-border-primary-hover) !important;
    }

 Secondary button 
.e-btn.e-secondary {
    background-color: var(--ws-secondary) !important;
    border-color: var(--ws-border-secondary) !important;
    color: var(--ws-secondary-text) !important;
}

    .e-btn.e-secondary:hover {
        background-color: var(--ws-secondary-hover) !important;
        border-color: var(--ws-border-secondary-hover) !important;
    }
**********/
/* --------------------------------------------------------------------------
   BOX SHADOWS
   -------------------------------------------------------------------------- */
/* Buttons */
.btn,
.e-btn {
    box-shadow: var(--ws-box-shadow-btn) !important;
}

/* Inputs */
.form-control,
.form-select,
.e-input,
.e-control.e-dropdownlist,
.e-control.e-combobox,
.e-control.e-datepicker,
.e-control.e-numerictextbox {
    box-shadow: var(--ws-box-shadow-input) !important;
}

/* Surfaces */
.panel,
.card,
.e-card,
.e-panel, 
.panel-alt,
.panel-muted,
.panel-primary,
.panel-accent {
    box-shadow: var(--ws-box-shadow-surface) !important;
}

/* Overlays */
.dropdown-menu,
.e-dropdown-popup,
.e-popup {
    box-shadow: var(--ws-box-shadow-overlay) !important;
}


/* --------------------------------------------------------------------------
   ICON BUTTONS
   -------------------------------------------------------------------------- */
.ws-icon-btn.e-btn,
.ws-icon-btn.e-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
    padding: 1rem;
    border-radius: 50% !important;
}

.ws-icon-btn.e-inherit:hover,
.ws-icon-btn.e-inherit.e-dropdown-btn:hover {
    background-color: var(--ws-bg-muted) !important;
}

.ws-icon-btn.e-btn .material-symbols-outlined,
.e-dropdown-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

.ws-icon-btn.e-btn.e-primary {
    padding: 1rem;
}

.ws-icon-btn.e-btn .e-btn-icon.e-icon-left {
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   ADD SITE WIDE CUSTOM STYLES HERE
   -------------------------------------------------------------------------- */