/* ==========================================================================
   Vellox Group Theme - Default Styles
   Color palette and base component styling for Vellox Group branding
   ========================================================================== */

/* Google Fonts - Inter
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Typography - Base Font
   ========================================================================== */
.vg-theme,
.vg-theme body,
.vg-theme input,
.vg-theme button,
.vg-theme select,
.vg-theme textarea,
.vg-theme table,
.vg-theme th,
.vg-theme td {
    font-family: 'Inter', 'Open Sans', sans-serif !important;
}

/* Typography - Telerik Controls Override
   Excludes icon elements to preserve Telerik icon fonts
   ========================================================================== */
.vg-theme [class^="Rad"]:not(.rcbIcon):not(.rcbArrowCell):not(.rcbArrowCellLeft):not(.rcbArrowCellRight):not(.rcbActionButton):not([class*="Icon"]),
.vg-theme [class*=" Rad"]:not(.rcbIcon):not(.rcbArrowCell):not(.rcbArrowCellLeft):not(.rcbArrowCellRight):not(.rcbActionButton):not([class*="Icon"]),
.vg-theme [class^="rdd"]:not([class*="Icon"]),
.vg-theme [class*=" rdd"]:not([class*="Icon"]),
.vg-theme div.RadGrid table,
.vg-theme div.RadGrid > table.rgMasterTable {
    font-family: 'Inter', 'Open Sans', sans-serif !important;
}

/* Utility Classes
   ========================================================================== */
.d-flex {
    display: flex;
}

.mt-1 {
    margin-top: 1rem;
}

.mr-1 {
    margin-right: 1rem;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.align-start {
    align-items: flex-start;
}

.align-center {
    align-items: center;
}

.w-100 {
    width: 100%;
}

/* Vellox Group Color Palette
   ========================================================================== */
:root {
    /* Tarmac Colors */
    --vg-deep-tarmac: #1F2929;
    --vg-tarmac: #323E3E;
    --vg-mid-tarmac: #465152;
    --vg-light-tarmac: #7E8484;
    
    /* Accent Colors */
    --vg-vermillion: #FF3737;
    --vg-light-vermillion: #FF7878;
    
    /* Neutral Colors */
    --vg-concrete: #EAE9E5;
    --vg-light-concrete: #F7F6F4;
    --vg-white: #FFFFFF;
}

/* Main Content Container
   ========================================================================== */

/* Main content container */
.am-content-main {
    background-color: #EAE9E5; /* Concrete */
}

/* Menu containers */
.am-menu-expanded, .am-page {
    background-color: #EAE9E5; /* Concrete */
}

/* HTML background */
html {
    background-color: #EAE9E5; /* Concrete */
}


/* ==========================================================================
   Button, Checkbox, and Form Input Styles - COMMENTED OUT
   Original designs preserved. These styles have been moved to login.css
   for use on login pages only.
   
   TODO: These styles will eventually be uncommented and become the norm
   across the application in a later phase of the rebrand rollout.
   ========================================================================== */

/* Button Styles - Vellox Group Theme
   ========================================================================== */

/*
.vg-theme .btn,
.vg-theme .btn-default,
.vg-theme input[type="submit"].btn,
.vg-theme input[type="button"].btn {
    background-color: #323E3E;
    color: #EAE9E5;
    border: 1px solid #323E3E;
    border-radius: 0;
    font-weight: 500;
    text-transform: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.vg-theme .btn:hover,
.vg-theme .btn-default:hover,
.vg-theme input[type="submit"].btn:hover,
.vg-theme input[type="button"].btn:hover {
    background-color: #465152;
    color: #FFFFFF;
    border-color: #465152;
}

.vg-theme .btn:active,
.vg-theme .btn-default:active,
.vg-theme input[type="submit"].btn:active,
.vg-theme input[type="button"].btn:active {
    background-color: #7E8484;
    color: #FFFFFF;
    border-color: #7E8484;
}

.vg-theme .btn:focus,
.vg-theme .btn-default:focus,
.vg-theme input[type="submit"].btn:focus,
.vg-theme input[type="button"].btn:focus {
    outline: 2px solid #465152;
    outline-offset: 2px;
}

.vg-theme .btn:disabled,
.vg-theme .btn-default:disabled,
.vg-theme .btn.disabled,
.vg-theme .btn-default.disabled,
.vg-theme input[type="submit"].btn:disabled,
.vg-theme input[type="button"].btn:disabled {
    background-color: #EAE9E5;
    color: #7E8484;
    border-color: #EAE9E5;
    cursor: not-allowed;
    opacity: 1;
}
*/

/* Checkbox Styles - Vellox Group Theme
   ========================================================================== */

/*
.vg-theme input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #323E3E;
    border-radius: 0;
    background-color: #FFFFFF;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    transition: border-color 0.2s ease;
    margin-top: -2px;
}

.vg-theme input[type="checkbox"]:focus {
    outline: 2px solid #465152;
    outline-offset: 2px;
}

.vg-theme input[type="checkbox"]:not(:disabled):hover {
    border-color: #7E8484;
}

.vg-theme input[type="checkbox"]:checked {
    background-color: #323E3E;
    border-color: #323E3E;
}

.vg-theme input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
}

.vg-theme input[type="checkbox"]:disabled {
    border-color: #7E8484;
    background-color: #EAE9E5;
    cursor: not-allowed;
}

.vg-theme input[type="checkbox"]:checked:disabled {
    background-color: #EAE9E5;
    border-color: #7E8484;
}

.vg-theme input[type="checkbox"]:checked:disabled::after {
    color: #7E8484;
}
*/

/* Form Input Styles - Vellox Group Theme
   TODO: Using rebrand colors for borders make these stand out. #ccc is the default from Telerik.
   ========================================================================== */

/*
.vg-theme .form-control {
    border: 1px solid #ccc;
    border-radius: 0;
    color: #323E3E;
    margin: 1px 0;
    background-color: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vg-theme .form-control:disabled,
.vg-theme .form-control[disabled] {
    color: #7E8484;
    border-color: #7E8484;
    background-color: #EAE9E5;
}

.vg-theme .form-control:focus {
    border-color: #465152;
    box-shadow: 0 0 0 2px rgba(70, 81, 82, 0.1);
    outline: none;
}

.vg-theme .form-control::placeholder {
    color: #7E8484;
}
*/

/* Info Circle - Base Styles
   ========================================================================== */
.info-circle {
    color: #7E8484; /* Light Tarmac */
    cursor: pointer;
    transition: color 0.2s ease;
}

.info-circle:hover {
    color: #465152; /* Mid Tarmac */
}

/* System Info Table
   ========================================================================== */
.vg-theme .system-info-table {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.vg-theme .system-info-table .system-info-header,
.vg-theme .system-info-table .system-info-label,
.vg-theme .system-info-table .system-info-value {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* Telerik Controls - RadToolTip
   ========================================================================== */

/* Remove border-radius and set white background with box shadow */
.vg-theme .RadToolTip,
.vg-theme .RadToolTip_Bootstrap {
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.vg-theme .RadToolTip .rtWrapperContent,
.vg-theme .RadToolTip_Bootstrap .rtWrapperContent,
.vg-theme .RadToolTip .rtContent,
.vg-theme .RadToolTip_Bootstrap .rtContent {
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
}

/* Callout (triangle/arrow) - make white with drop shadow per direction */
/* Top callouts (arrow pointing up) - shadow falls down */
.vg-theme .RadToolTip .rtCallout.rtCalloutTopLeft,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopCenter,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopRight,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopLeft,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopCenter,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopRight {
    filter: drop-shadow(0 -3px 2px rgba(0, 0, 0, 0.4)) !important;
}

/* Bottom callouts (arrow pointing down) - shadow falls up */
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomLeft,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomCenter,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomRight,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomLeft,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomCenter,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomRight {
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4)) !important;
}

/* Left callouts (arrow pointing left) - shadow falls right */
.vg-theme .RadToolTip .rtCallout.rtCalloutMiddleLeft,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutMiddleLeft {
    filter: drop-shadow(-3px 0 2px rgba(0, 0, 0, 0.4)) !important;
}

/* Right callouts (arrow pointing right) - shadow falls left */
.vg-theme .RadToolTip .rtCallout.rtCalloutMiddleRight,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutMiddleRight {
    filter: drop-shadow(3px 0 2px rgba(0, 0, 0, 0.4)) !important;
}

.vg-theme .RadToolTip .rtCallout,
.vg-theme .RadToolTip_Bootstrap .rtCallout,
.vg-theme .RadToolTip .rtCallout::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout::before {
    border-color: transparent !important;
}

/* Callout arrows for different positions - set to white */
.vg-theme .RadToolTip .rtCallout.rtCalloutTopLeft,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopCenter,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopRight,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopLeft,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopCenter,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopRight,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopLeft::before,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopCenter::before,
.vg-theme .RadToolTip .rtCallout.rtCalloutTopRight::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopLeft::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopCenter::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutTopRight::before {
    border-bottom-color: #FFFFFF !important;
}

.vg-theme .RadToolTip .rtCallout.rtCalloutBottomLeft,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomCenter,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomRight,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomLeft,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomCenter,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomRight,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomLeft::before,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomCenter::before,
.vg-theme .RadToolTip .rtCallout.rtCalloutBottomRight::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomLeft::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomCenter::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutBottomRight::before {
    border-top-color: #FFFFFF !important;
}

.vg-theme .RadToolTip .rtCallout.rtCalloutMiddleLeft,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutMiddleLeft,
.vg-theme .RadToolTip .rtCallout.rtCalloutMiddleLeft::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutMiddleLeft::before {
    border-right-color: #FFFFFF !important;
}

.vg-theme .RadToolTip .rtCallout.rtCalloutMiddleRight,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutMiddleRight,
.vg-theme .RadToolTip .rtCallout.rtCalloutMiddleRight::before,
.vg-theme .RadToolTip_Bootstrap .rtCallout.rtCalloutMiddleRight::before {
    border-left-color: #FFFFFF !important;
}

/* Telerik Controls - RadGrid
   ========================================================================== */

/* Default Row - White background */
.vg-theme .RadGrid .rgRow,
.vg-theme .RadGrid_Bootstrap .rgRow,
.vg-theme div.RadGrid tr.rgRow {
    background-color: #FFFFFF; /* White */
}

/* Alternating Row - Light Concrete background */
.vg-theme .RadGrid .rgAltRow,
.vg-theme .RadGrid_Bootstrap .rgAltRow,
.vg-theme div.RadGrid tr.rgAltRow {
    background-color: #F7F6F4; /* Light Concrete */
}