.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-sm, 2px);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    line-height: 1.5;
    box-sizing: border-box;
    white-space: nowrap;
}

.btn-sm {
    padding: 0.145rem 0.35rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.0rem;
}

.btn-block {
    width: 100%;
    display: flex;
}

.btn-maincolor,
.btn-warning,
.btn-login {
    background-color: var(--cp-primary-mid);
    color: var(--cp-primary-foreground);
}

.btn-maincolor:hover,
.btn-warning:hover,
.btn-login:hover {
    background-color: var(--cp-primary-dark);
    box-shadow: var(--cp-shadow-md);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 400;
    border-radius: var(--bs-border-radius-sm, 2px);
    color: var(--cp-primary-foreground);
    background: var(--btn-primary-bg, var(--cp-primary-mid));
    border: 1px solid var(--btn-primary-border, var(--cp-primary-mid));
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    white-space: nowrap;
    line-height: 1.5;
    box-sizing: border-box;
}

.btn-action:hover {
    background: var(--primary-hover, var(--cp-primary-dark));
    border-color: var(--primary-hover, var(--cp-primary-dark));
    box-shadow: var(--cp-shadow-md);
}

.btn-submit {
    background-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
}

.btn-submit:hover {
    background-color: var(--cp-danger-dark);
}

.btn-submit-disable {
    background-color: var(--cp-text-disabled);
    color: var(--cp-primary-foreground);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-disable {
    background-color: var(--cp-text-disabled) !important;
    color: var(--cp-text-disabled) !important;
    border-color: var(--cp-text-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.btn-disable:hover,
.btn-disable:active {
    background-color: var(--cp-text-disabled) !important;
    color: var(--cp-text-disabled) !important;
    border-color: var(--cp-text-disabled) !important;
    box-shadow: none !important;
}

.btn-danger {
    background-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
    border: 1px solid var(--cp-danger);
}

.btn-danger:hover {
    background-color: var(--cp-danger-dark);
}

.btn-success {
    background-color: var(--cp-success);
    color: var(--cp-primary-foreground);
    border: 1px solid var(--cp-success);
}

.btn-success:hover {
    background-color: var(--cp-success-dark);
    border-color: var(--cp-success-dark);
}

.btn-primary {
    background-color: var(--cp-primary-mid);
    color: var(--cp-primary-foreground);
    border: 1px solid var(--cp-primary-mid);
}

.btn-primary:hover {
    background-color: var(--cp-primary-dark);
    border-color: var(--cp-primary-dark);
}

.btn-warning {
    background-color: var(--cp-warning);
    color: var(--cp-primary-foreground);
    border: 1px solid var(--cp-warning);
}

.btn-warning:hover {
    background-color: var(--cp-warning-dark);
    border-color: var(--cp-warning-dark);
}

.btn-info {
    background-color: var(--cp-info);
    color: var(--cp-primary-foreground);
    border: 1px solid var(--cp-info);
}

.btn-info:hover {
    background-color: var(--cp-info-dark);
    border-color: var(--cp-info-dark);
}

.btn-default {
    background-color: var(--cp-card);
    color: var(--cp-text-primary);
    border: 1px solid var(--cp-border);
}

.btn-default:hover {
    background-color: var(--cp-border);
    border-color: var(--cp-border);
}

.btn-blue {
    background-color: var(--cp-info);
    color: var(--cp-primary-foreground);
}

.btn-blue:hover {
    background-color: var(--cp-info-dark);
}

.btn_exit_button {
    width: 100%;
    height: 40px;
    background-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
    margin: 5px auto;
    margin-top: 20px;
    border-radius: 5px;
    border: 0px;
}

.btn_full_button {
    width: 100%;
    height: 44px;
    background-color: var(--cp-primary-mid);
    color: var(--cp-primary-foreground);
    margin: 5px auto;
    margin-top: 20px;
    border-radius: 5px;
    border: 0px;
}

.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 34px;
    padding: 0;
    background: var(--cp-primary-mid);
    text-align: center;
    color: var(--cp-primary-foreground);
    border-radius: 5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

.quiz .quiz-indicator .btn-action {
    margin-left: 10px;
    flex-shrink: 0;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: var(--bs-border-radius-sm, 2px);
    border: 1px solid var(--primary-color, var(--cp-primary-mid));
    background: transparent;
    color: var(--primary-color, var(--cp-primary-mid));
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    white-space: nowrap;
    line-height: 1.5;
    height:30px;
    box-sizing: border-box;
}
.btn-icon:hover {
    background: rgba(79, 140, 255, 0.08);
    color: var(--primary-hover, var(--cp-primary-dark));
    border-color: var(--primary-hover, var(--cp-primary-dark));
}
.btn-icon::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.875rem;
    line-height: 1;
}

.btn-icon.icon-only,
.btn-icon.btn-icon-only {
    gap: 0;
    padding: 0.125rem 0.375rem;
    line-height: 1;
}

.btn-icon-edit::before     { content: "\f044"; }
.btn-icon-delete::before   { content: "\f1f8"; }
.btn-icon-add::before      { content: "\2b"; }
.btn-icon-import::before   { content: "\f56f"; }
.btn-icon-save::before     { content: "\f0c7"; }
.btn-icon-cancel::before   { content: "\f05e"; }
.btn-icon-back::before      { content: "\f100"; }
.btn-icon-view::before      { content: "\f06e"; }
.btn-icon-search::before    { content: "\f002"; }
.btn-icon-logout::before    { content: "\f08b"; }
.btn-icon-login::before     { content: "\f090"; }
.btn-icon-filter::before    { content: "\f0b0"; }
.btn-icon-action::before    { content: "\f58e"; }
.btn-icon-share::before     { content: "\f064"; }
.btn-icon-qrcode::before    { content: "\f029"; }
.btn-icon-next::before      { content: "\f061"; }
.btn-icon-cog::before       { content: "\f013"; }
.btn-icon-users::before     { content: "\f0c0"; }
.btn-icon-user::before      { content: "\f007"; }
.btn-icon-refresh::before   { content: "\f2f9"; }
.btn-icon-modify::before    { content: "\f044"; }
.btn-icon-more::before      { content: "\f141"; }
.btn-icon-verfiy::before    { content: "\f2e7"; }
.btn-icon-public::before    { content: "\f0ee"; }
.btn-icon-clone::before     { content: "\f0c5"; }
.btn-icon-reset::before     { content: "\f2f9"; }
.btn-icon.btn-icon-close::before     { content: "\f00d"; }
.btn-icon-export::before    { content: "\f019"; }
.btn-icon-lock::before      { content: "\f023"; }
.btn-icon-key::before       { content: "\f084"; }
.btn-icon-yes::before       { content: "\f00c"; }
.btn-icon-file::before      { content: "\f15c"; }
.btn-icon-new::before       { content: "\f055"; }

.btn-icon-delete {
    background: var(--cp-danger);
    border-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
}
.btn-icon-delete:hover {
    background: var(--cp-danger-dark);
    border-color: var(--cp-danger-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon.btn-icon-close {
    background: var(--cp-danger);
    border-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
}
.btn-icon.btn-icon-close:hover {
    background: var(--cp-danger-dark);
    border-color: var(--cp-danger-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon-reset {
    background: var(--cp-danger);
    border-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
}
.btn-icon-reset:hover {
    background: var(--cp-danger-dark);
    border-color: var(--cp-danger-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon-edit {
    color: var(--cp-danger);
    border-color: var(--cp-danger);
}
.btn-icon-edit:hover {
    background: rgba(220, 53, 69, 0.1);
    color: var(--cp-danger-dark);
    border-color: var(--cp-danger);
}

.btn-icon-action {
    background: var(--primary-color, var(--cp-primary-mid));
    border-color: var(--primary-color, var(--cp-primary-mid));
    color: var(--cp-primary-foreground);
}
.btn-icon-action:hover {
    background: var(--primary-light, var(--cp-primary-light));
    border-color: var(--primary-light, var(--cp-primary-light));
    color: var(--cp-primary-foreground);
}

.btn-icon-yes {
    color: var(--cp-success);
    border-color: var(--cp-success);
}
.btn-icon-yes:hover {
    background: rgba(25, 135, 84, 0.1);
    color: var(--cp-success-dark);
    border-color: var(--cp-success);
}

.btn-icon-export {
    background: var(--cp-success);
    border-color: var(--cp-success);
    color: var(--cp-primary-foreground);
}
.btn-icon-export:hover {
    background: var(--cp-success-dark);
    border-color: var(--cp-success-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon-lock {
    background: var(--cp-warning);
    border-color: var(--cp-warning);
    color: var(--cp-primary-foreground);
}
.btn-icon-lock:hover {
    background: var(--cp-warning-dark);
    border-color: var(--cp-warning-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon-key {
    background: var(--cp-info);
    border-color: var(--cp-info);
    color: var(--cp-primary-foreground);
}
.btn-icon-key:hover {
    background: var(--cp-info-dark);
    border-color: var(--cp-info-dark);
    color: var(--cp-primary-foreground);
}

.btn-plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: var(--bs-border-radius-sm, 2px);
    border: 1px solid var(--primary-color, var(--cp-primary-mid));
    background: transparent;
    color: var(--primary-color, var(--cp-primary-mid));
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    white-space: nowrap;
    line-height: 1.5;
    box-sizing: border-box;
}
.btn-plain:hover {
    background: rgba(79, 140, 255, 0.08);
    color: var(--primary-hover, var(--cp-primary-dark));
    border-color: var(--primary-hover, var(--cp-primary-dark));
}

.btn-icon-refresh.spinning,
.btn-icon-refresh.is-spinning {
    pointer-events: none;
    opacity: 0.85;
}
.btn-icon-refresh.spinning::before,
.btn-icon-refresh.is-spinning::before {
    display: inline-block;
    animation: btn-icon-spin 0.8s linear infinite;
}
@keyframes btn-icon-spin {
    to { transform: rotate(360deg); }
}

[data-theme="dark"] .btn-icon,
[data-theme="dark"] .icon-only,
[data-theme="dark"] .btn-icon-only,
[data-theme="dark"] .btn-plain {
    color: var(--cp-primary-light);
    border-color: var(--cp-primary-mid);
}
[data-theme="dark"] .btn-icon:hover,
[data-theme="dark"] .icon-only:hover,
[data-theme="dark"] .btn-icon-only:hover,
[data-theme="dark"] .btn-plain:hover {
    background: rgba(99, 102, 241, 0.15);
    color: var(--cp-primary-light);
    border-color: var(--cp-primary-light);
}
[data-theme="dark"] .btn-icon-more,
[data-theme="dark"] .btn-icon-share,
[data-theme="dark"] .btn-icon-qrcode,
[data-theme="dark"] .btn-icon-cog {
    color: var(--cp-primary-light);
    border-color: var(--cp-primary-mid);
}
[data-theme="dark"] .btn-icon-more:hover,
[data-theme="dark"] .btn-icon-share:hover,
[data-theme="dark"] .btn-icon-qrcode:hover,
[data-theme="dark"] .btn-icon-cog:hover {
    background: rgba(99, 102, 241, 0.15);
    color: var(--cp-primary-light);
    border-color: var(--cp-primary-light);
}

.btn-icon.btn-icon-action {
    background: var(--primary-color, var(--cp-primary-mid));
    border-color: var(--primary-color, var(--cp-primary-mid));
    color: var(--cp-primary-foreground);
}
.btn-icon.btn-icon-action:hover {
    background: var(--primary-light, var(--cp-primary-light));
    border-color: var(--primary-light, var(--cp-primary-light));
    color: var(--cp-primary-foreground);
}

.btn-icon.btn-danger {
    background: var(--cp-danger);
    border-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
}
.btn-icon.btn-danger:hover {
    background: var(--cp-danger-dark);
    border-color: var(--cp-danger-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon.btn-primary {
    background: var(--cp-primary-mid);
    border-color: var(--cp-primary-mid);
    color: var(--cp-primary-foreground);
}
.btn-icon.btn-primary:hover {
    background: var(--cp-primary-dark);
    border-color: var(--cp-primary-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon.btn-warning {
    background: var(--cp-warning);
    border-color: var(--cp-warning);
    color: var(--cp-primary-foreground);
}
.btn-icon.btn-warning:hover {
    background: var(--cp-warning-dark);
    border-color: var(--cp-warning-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon.btn-success {
    background: var(--cp-success);
    border-color: var(--cp-success);
    color: var(--cp-primary-foreground);
}
.btn-icon.btn-success:hover {
    background: var(--cp-success-dark);
    border-color: var(--cp-success-dark);
    color: var(--cp-primary-foreground);
}

.btn-icon.btn-default {
    background: var(--cp-card);
    border-color: var(--cp-border);
    color: var(--cp-text-primary);
}
.btn-icon.btn-default:hover {
    background: var(--cp-border);
    border-color: var(--cp-border);
    color: var(--cp-text-primary);
}

.table-responsive table .btn-icon.btn-danger {
    background: var(--cp-danger);
    border-color: var(--cp-danger);
    color: var(--cp-primary-foreground);
}
.table-responsive table .btn-icon.btn-danger:hover {
    background: var(--cp-danger-dark);
    border-color: var(--cp-danger-dark);
    color: var(--cp-primary-foreground);
}

.table-responsive table .btn-icon.btn-primary {
    background: var(--cp-primary-mid);
    border-color: var(--cp-primary-mid);
    color: var(--cp-primary-foreground);
}
.table-responsive table .btn-icon.btn-primary:hover {
    background: var(--cp-primary-dark);
    border-color: var(--cp-primary-dark);
    color: var(--cp-primary-foreground);
}

.table-responsive table .btn-icon.btn-warning {
    background: var(--cp-warning);
    border-color: var(--cp-warning);
    color: var(--cp-primary-foreground);
}
.table-responsive table .btn-icon.btn-warning:hover {
    background: var(--cp-warning-dark);
    border-color: var(--cp-warning-dark);
    color: var(--cp-primary-foreground);
}

.table-responsive table .btn-icon.btn-success {
    background: var(--cp-success);
    border-color: var(--cp-success);
    color: var(--cp-primary-foreground);
}
.table-responsive table .btn-icon.btn-success:hover {
    background: var(--cp-success-dark);
    border-color: var(--cp-success-dark);
    color: var(--cp-primary-foreground);
}

.table-responsive table .btn-icon.btn-default {
    background: var(--cp-card);
    border-color: var(--cp-border);
    color: var(--cp-text-primary);
}
.table-responsive table .btn-icon.btn-default:hover {
    background: var(--cp-border);
    border-color: var(--cp-border);
    color: var(--cp-text-primary);
}

.table-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.dropdown-menu .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 4px 0;
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}

.dropdown-menu {
    min-width: 160px;
    padding: 4px;
    background-color: var(--content-bg, var(--cp-card));
}

.trbox.tr-empty > td {
    background: transparent !important;
    color: transparent !important;
    pointer-events: none;
    padding: 0.6rem 0.75rem !important;
    line-height: 1.5;
    border-color: transparent !important;
}

.toolbar-line {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px; 
    flex-wrap: wrap;
}

.toolbar-line-right {
    justify-content: flex-end;
}

.toolbar-line > * {
    flex-shrink: 0;
}

.toolbar-line .btn-icon,
.header-toolbar-title .btn-icon,
.toolbar-line > button:not(.btn-close),
.header-toolbar-title > button:not(.btn-close),
.toolbar-line > a.btn,
.header-toolbar-title > a.btn,
.toolbar-line > .btn,
.header-toolbar-title > .btn,
.table-responsive table .btn-icon,
.table-responsive table > tbody > tr > td > .btn,
.table-responsive table > tbody > tr > td > button:not(.btn-close),
.table-responsive table > tbody > tr > td > a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 400;
    border-radius: var(--bs-border-radius-sm, 2px);
    border: 1px solid var(--cp-border);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    white-space: nowrap;
    line-height: 1.5;
    color: var(--cp-text-secondary);
    background: transparent;
}

.toolbar-line .btn-icon:hover,
.header-toolbar-title .btn-icon:hover,
.toolbar-line > button:not(.btn-close):hover,
.header-toolbar-title > button:not(.btn-close):hover,
.toolbar-line > a.btn:hover,
.header-toolbar-title > a.btn:hover,
.toolbar-line > .btn:hover,
.header-toolbar-title > .btn:hover,
.table-responsive table .btn-icon:hover,
.table-responsive table > tbody > tr > td > .btn:hover,
.table-responsive table > tbody > tr > td > button:not(.btn-close):hover,
.table-responsive table > tbody > tr > td > a.btn:hover {
    background: var(--cp-border);
    color: var(--cp-text-primary);
}

.toolbar-line .btn-icon-add,
.header-toolbar-title .btn-icon-add,
.toolbar-line .btn-icon-save,
.header-toolbar-title .btn-icon-save,
.table-responsive table .btn-icon-add,
.table-responsive table .btn-icon-save {
    color: var(--cp-primary-foreground);
    background: var(--btn-primary-bg, var(--cp-primary-mid));
    border-color: var(--btn-primary-border, var(--cp-primary-mid));
}
.toolbar-line .btn-icon-add:hover,
.header-toolbar-title .btn-icon-add:hover,
.toolbar-line .btn-icon-save:hover,
.header-toolbar-title .btn-icon-save:hover,
.table-responsive table .btn-icon-add:hover,
.table-responsive table .btn-icon-save:hover {
    background: var(--primary-hover, var(--cp-primary-dark));
    border-color: var(--primary-hover, var(--cp-primary-dark));
    color: var(--cp-primary-foreground);
}

.toolbar-line .btn-icon-delete,
.header-toolbar-title .btn-icon-delete,
.table-responsive table .btn-icon-delete {
    color: var(--cp-danger);
    border-color: var(--cp-danger);
    background: transparent;
}
.toolbar-line .btn-icon-delete:hover,
.header-toolbar-title .btn-icon-delete:hover,
.table-responsive table .btn-icon-delete:hover {
    background: var(--cp-danger);
    color: var(--cp-primary-foreground);
}

.toolbar-line select,
.header-toolbar-title select,
.toolbar-line input[type="text"],
.header-toolbar-title input[type="text"],
.toolbar-line input[type="search"],
.header-toolbar-title input[type="search"],
.toolbar-line input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.header-toolbar-title input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.toolbar-line .form-control,
.header-toolbar-title .form-control,
.toolbar-line .form-select,
.header-toolbar-title .form-select,
.table-responsive table select,
.table-responsive table input[type="text"],
.table-responsive table input[type="search"],
.table-responsive table input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.table-responsive table .form-control,
.table-responsive table .form-select {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--input-border, var(--cp-border));
    background: var(--input-bg, var(--cp-card));
    color: var(--input-color, var(--cp-text-primary));
    line-height: 1.5;
    height: auto;
    min-width: 120px;
    outline: none;
    transition: border-color 0.15s;
}

.toolbar-line select:focus,
.header-toolbar-title select:focus,
.toolbar-line input:focus,
.header-toolbar-title input:focus,
.toolbar-line .form-control:focus,
.header-toolbar-title .form-control:focus,
.toolbar-line .form-select:focus,
.header-toolbar-title .form-select:focus,
.table-responsive table select:focus,
.table-responsive table input:focus,
.table-responsive table .form-control:focus,
.table-responsive table .form-select:focus {
    border-color: var(--primary-color, var(--cp-primary-mid));
    box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.15);
}

.toolbar-line .tool-separator {
    width: 1px;
    height: 24px;
    background: var(--cp-border);
    flex-shrink: 0;
    margin: 0 0.15rem;
}

[data-theme="dark"] .toolbar-line .btn-icon,
[data-theme="dark"] .header-toolbar-title .btn-icon,
[data-theme="dark"] .toolbar-line > button:not(.btn-close),
[data-theme="dark"] .header-toolbar-title > button:not(.btn-close),
[data-theme="dark"] .toolbar-line > a.btn,
[data-theme="dark"] .header-toolbar-title > a.btn,
[data-theme="dark"] .toolbar-line > .btn,
[data-theme="dark"] .header-toolbar-title > .btn,
[data-theme="dark"] .table-responsive table .btn-icon,
[data-theme="dark"] .table-responsive table > tbody > tr > td > .btn,
[data-theme="dark"] .table-responsive table > tbody > tr > td > button:not(.btn-close),
[data-theme="dark"] .table-responsive table > tbody > tr > td > a.btn {
    color: var(--cp-text-secondary);
    border-color: var(--cp-border);
    background: transparent;
}

[data-theme="dark"] .toolbar-line .btn-icon:hover,
[data-theme="dark"] .header-toolbar-title .btn-icon:hover,
[data-theme="dark"] .toolbar-line > button:not(.btn-close):hover,
[data-theme="dark"] .header-toolbar-title > button:not(.btn-close):hover,
[data-theme="dark"] .toolbar-line > a.btn:hover,
[data-theme="dark"] .header-toolbar-title > a.btn:hover,
[data-theme="dark"] .toolbar-line > .btn:hover,
[data-theme="dark"] .header-toolbar-title > .btn:hover,
[data-theme="dark"] .table-responsive table .btn-icon:hover,
[data-theme="dark"] .table-responsive table > tbody > tr > td > .btn:hover,
[data-theme="dark"] .table-responsive table > tbody > tr > td > button:not(.btn-close):hover,
[data-theme="dark"] .table-responsive table > tbody > tr > td > a.btn:hover {
    background: var(--cp-border);
    color: var(--cp-text-primary);
}

[data-theme="dark"] .toolbar-line .btn-icon-add,
[data-theme="dark"] .header-toolbar-title .btn-icon-add,
[data-theme="dark"] .toolbar-line .btn-icon-save,
[data-theme="dark"] .header-toolbar-title .btn-icon-save,
[data-theme="dark"] .table-responsive table .btn-icon-add,
[data-theme="dark"] .table-responsive table .btn-icon-save {
    color: var(--cp-primary-foreground);
    background: var(--btn-primary-bg, var(--cp-primary-mid));
    border-color: var(--btn-primary-border, var(--cp-primary-mid));
}

[data-theme="dark"] .toolbar-line .btn-icon-add:hover,
[data-theme="dark"] .header-toolbar-title .btn-icon-add:hover,
[data-theme="dark"] .toolbar-line .btn-icon-save:hover,
[data-theme="dark"] .header-toolbar-title .btn-icon-save:hover,
[data-theme="dark"] .table-responsive table .btn-icon-add:hover,
[data-theme="dark"] .table-responsive table .btn-icon-save:hover {
    background: var(--primary-hover, var(--cp-primary-dark));
    border-color: var(--primary-hover, var(--cp-primary-dark));
    color: var(--cp-primary-foreground);
}

[data-theme="dark"] .toolbar-line .btn-icon-delete,
[data-theme="dark"] .header-toolbar-title .btn-icon-delete,
[data-theme="dark"] .table-responsive table .btn-icon-delete {
    color: var(--cp-danger);
    border-color: var(--cp-danger);
}
[data-theme="dark"] .toolbar-line .btn-icon-delete:hover,
[data-theme="dark"] .header-toolbar-title .btn-icon-delete:hover,
[data-theme="dark"] .table-responsive table .btn-icon-delete:hover {
    background: var(--cp-danger);
    color: var(--cp-primary-foreground);
}

[data-theme="dark"] .toolbar-line select,
[data-theme="dark"] .header-toolbar-title select,
[data-theme="dark"] .toolbar-line input,
[data-theme="dark"] .header-toolbar-title input,
[data-theme="dark"] .toolbar-line .form-control,
[data-theme="dark"] .header-toolbar-title .form-control,
[data-theme="dark"] .toolbar-line .form-select,
[data-theme="dark"] .header-toolbar-title .form-select,
[data-theme="dark"] .table-responsive table select,
[data-theme="dark"] .table-responsive table input,
[data-theme="dark"] .table-responsive table .form-control,
[data-theme="dark"] .table-responsive table .form-select {
    background: var(--cp-surface);
    border-color: var(--cp-border);
    color: var(--cp-text-primary);
}

[data-theme="dark"] .toolbar-line select:focus,
[data-theme="dark"] .header-toolbar-title select:focus,
[data-theme="dark"] .toolbar-line input:focus,
[data-theme="dark"] .header-toolbar-title input:focus,
[data-theme="dark"] .toolbar-line .form-control:focus,
[data-theme="dark"] .header-toolbar-title .form-control:focus,
[data-theme="dark"] .toolbar-line .form-select:focus,
[data-theme="dark"] .header-toolbar-title .form-select:focus,
[data-theme="dark"] .table-responsive table select:focus,
[data-theme="dark"] .table-responsive table input:focus,
[data-theme="dark"] .table-responsive table .form-control:focus,
[data-theme="dark"] .table-responsive table .form-select:focus {
    border-color: var(--primary-color, var(--cp-primary-mid));
}

[data-theme="dark"] .toolbar-line .tool-separator {
    background: var(--cp-border);
}