/* Container styling with the new skinning parameters */

/* Base container styling (applied to all whtbg class elements) */
.whtbg {
    border-width: var(--container-border-width);
}

/* Base panel styling - apply consistent border width */
.panel {
    border-width: var(--container-border-width);
}

/* Apply border width to all panel types */
.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger {
    border-width: var(--container-border-width);
}

/* Container background gradient when enabled */
body.container-gradient-enabled .whtbg {
    background-image: linear-gradient(to right, var(--primary-background-color), var(--gradient-background-color));
    background-color: transparent; /* Ensure the gradient shows properly */
}

/* Bootstrap panel gradient when enabled */
body.container-gradient-enabled .panel {
    background-image: linear-gradient(to right, var(--primary-background-color), var(--gradient-background-color));
    background-color: transparent; /* Ensure the gradient shows properly */
}

/* Apply gradient to all panel types when enabled */
body.container-gradient-enabled .panel-default,
body.container-gradient-enabled .panel-primary,
body.container-gradient-enabled .panel-info,
body.container-gradient-enabled .panel-success,
body.container-gradient-enabled .panel-warning,
body.container-gradient-enabled .panel-danger {
    background-image: linear-gradient(to right, var(--primary-background-color), var(--gradient-background-color));
    background-color: transparent; /* Ensure the gradient shows properly */
}

/* Ensure panel content has proper background when gradient is enabled */
body.container-gradient-enabled .panel-body {
    background-color: transparent;
}

/* Transparent form controls when enabled */
body.transparent-form-controls-enabled input:not([type="checkbox"]):not([type="radio"]),
body.transparent-form-controls-enabled textarea,
body.transparent-form-controls-enabled select {
    background-color: transparent !important;
    border: 1px solid var(--primary-accent-color);
}

/* Add hover effect for transparent form controls */
body.transparent-form-controls-enabled input:not([type="checkbox"]):not([type="radio"]):hover,
body.transparent-form-controls-enabled textarea:hover,
body.transparent-form-controls-enabled select:hover {
    border-color: var(--secondary-accent-color);
}

/* Focus effect for transparent form controls */
body.transparent-form-controls-enabled input:not([type="checkbox"]):not([type="radio"]):focus,
body.transparent-form-controls-enabled textarea:focus,
body.transparent-form-controls-enabled select:focus {
    outline: none;
    border-color: var(--secondary-accent-color);
    box-shadow: 0 0 5px rgba(var(--secondary-accent-color), 0.5);
}