@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* SIMPLE 3-COLOR SYSTEM */
:root {
    --bg-color: #09090b;
    --card-bg: #18181b;
    --button-color: #f97316;
    --button-hover: #ea580c;
    --text-color: #ffffff;
    --text-muted: #a1a1aa;
    --border-color: #27272a;
}

/* RESET - Removed global color to prevent conflicts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Common text elements - Specific selectors instead of global * */
h1, h2, h3, h4, h5, h6, p, span, div, a, label, small, strong, em, i, b, u, li {
    color: var(--text-color) !important;
}

/* Links */
a {
    color: var(--text-color) !important;
    text-decoration: none;
}

a:hover {
    color: var(--button-color) !important;
}

/* LAYOUT */
.app-container {
    display: flex;
    min-height: 100vh;
    background: var(--bg-color);
}

.sidebar {
    width: 260px;
    background: #18181b;
    border-right: 1px solid var(--border-color);
    position: fixed;
    height: 100vh;
    z-index: 1000;
}

.right-content {
    flex: 1;
    margin-left: 256px;
    background: var(--bg-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1024px) {
    .right-content { margin-left: 0; }
}

/* HEADER */
.header {
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

/* BODY CONTENT */
.body-content {
    background: var(--bg-color);
    padding: 1.5rem;
}

/* CARDS */
.card, .glass-card, .db-color-card {
    background: #18181b;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card-header {
    background: #18181b;
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}

.card-body {
    background: #18181b;
    padding: 1.5rem;
}

/* FORMS */
.form-control, .form-control:focus {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
}

.form-control:focus {
    border-color: var(--border-color);
    box-shadow: 0 0 0 3px rgba(52, 58, 64, 0.3);
}

.form-label {
    color: var(--text-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.input-group-text {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

/* TABLES */
.table, .table th, .table td {
    background: var(--bg-color);
    color: var(--text-color);
    border-color: var(--border-color);
}

.table tbody tr:hover {
    background: var(--button-color);
}

.table tbody tr:hover td {
    background: var(--button-color);
}

/* BUTTONS - Base styles without forced colors */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    font-weight: 500;
}

/* HTML button and input elements - inherit from parent or use class styles */
button:not([class*="btn-"]),
input[type="button"]:not([class*="btn-"]),
input[type="submit"]:not([class*="btn-"]),
input[type="reset"]:not([class*="btn-"]) {
    /* These will inherit the dark background from the * selector */
    /* Add a class to style them properly */
}

/* Only specific button classes get the green background */
.btn-default, .btn-primary, .btn-success,
button.btn-default, button.btn-primary, button.btn-success,
input[type="submit"].btn-primary, input[type="button"].btn-primary {
    background: var(--button-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-default:hover, .btn-primary:hover, .btn-success:hover {
    background: #f97316 !important;
    border-color: #27272a !important;
    color: var(--text-color) !important;
    transform: translateY(-1px);
}

/* Secondary buttons - gray */
.btn-secondary {
    background: #27272a !important;
    border: 1px solid #27272a !important;
    color: var(--text-color) !important;
}

.btn-secondary:hover {
    background: #4a5057 !important;
    border-color: #4a5057 !important;
}

/* Info buttons */
.btn-info {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.btn-info:hover {
    background: var(--button-color) !important;
    border-color: #27272a !important;
}

/* Danger button */
.btn-danger {
    background: #ef4444 !important;
    border: 1px solid #ef4444 !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* Warning button */
.btn-warning {
    background: #f59e0b !important;
    border: 1px solid #f59e0b !important;
    color: #ffffff !important;
}

.btn-warning:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

/* NAVIGATION */
.nav-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.75rem 1rem;
    display: block;
    border-radius: 0.5rem;
    transition: all 0.2s;
    border: none;
}

.nav-link:hover, .nav-item.active .nav-link {
    background: #f97316 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* BREADCRUMBS */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item {
    color: var(--text-color);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--text-color);
    margin-right: 0.5rem;
}

/* ALERTS */
.alert {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.alert-success {
    border-color: var(--border-color);
    color: var(--button-color);
}

.alert-warning {
    border-color: var(--border-color);
    color: var(--button-color);
}

.alert-danger {
    border-color: var(--border-color);
    color: var(--button-color);
}

/* PAGINATION */
.pagination .page-link {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border-radius: 0.375rem;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
    background: var(--button-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* MODALS */
.modal-content, .modal-header, .modal-body, .modal-footer {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

/* DATA TABLES */
.dataTables_wrapper {
    color: var(--text-color);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--button-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* SELECT2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--bg-color);
    border: none;
    color: var(--text-color);
}

.select2-dropdown {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

.select2-results__option {
    background: var(--bg-color);
    color: var(--text-color);
}

.select2-results__option--highlighted {
    background: var(--button-color);
    color: var(--text-color);
}

/* SUMMERNOTE */
.note-editor, .note-editor .note-toolbar, .note-editor .note-editable {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

/* TOASTR */
.toast-success {
    background-color: var(--button-color) !important;
    color: var(--text-color) !important;
}

.toast-error {
    background-color: var(--button-color) !important;
    color: var(--text-color) !important;
}

.toast-warning {
    background-color: var(--button-color) !important;
    color: var(--text-color) !important;
}

.toast-info {
    background-color: var(--button-color) !important;
    color: var(--text-color) !important;
}

/* BOOTSTRAP OVERRIDES */
.col-sm-10, .col-sm-12, .col-sm-8, .col-sm-4, .col-sm-2, .col-8, .col-4,
.row, .mb-3, .mb-4, .mb-5, .mr-3, .mr-4, .ml-5 {
    color: var(--text-color);
}

/* PAGE ELEMENTS */
.page-title-sm, .page-search, .border-bottom, .sorting label,
.text-gray, .light-gray, .font-weight-bold {
    color: var(--text-color);
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--button-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--button-color);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .right-content {
        margin-left: 0;
    }
}

/* REMOVED: Global * selector for better performance and fewer conflicts */
/* Specific elements are styled individually below */

/* Base HTML elements */
body, html {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all containers to use our background */
.container, .container-fluid, .row, .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, 
.col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, 
.col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, 
.col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all Bootstrap cards */
.card, .card-header, .card-body, .card-footer, .card-title, .card-text,
.glass-card, .db-color-card {
    background: #18181b !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap modals */
.modal, .modal-content, .modal-header, .modal-body, .modal-footer, .modal-title {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap forms */
.form-control, .form-group, .form-row, .form-check, .form-check-input, .form-check-label {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Bootstrap buttons - Removed global override, buttons now use their specific class styles defined above */
/* This allows header buttons and custom styled buttons to maintain their intended appearance */

/* Force all Bootstrap tables */
.table, .table-striped, .table-bordered, .table-hover, .table-sm, .table-responsive {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.table th, .table td, .table thead th, .table tbody td {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap alerts */
.alert, .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, 
.alert-info, .alert-light, .alert-dark {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap breadcrumbs */
.breadcrumb, .breadcrumb-item, .breadcrumb-item a {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all Bootstrap pagination */
.pagination, .page-link, .page-item {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap dropdowns */
.dropdown-menu, .dropdown-item, .dropdown-header {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap navs */
.nav, .nav-link, .nav-item, .nav-tabs, .nav-pills {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all Bootstrap list groups */
.list-group, .list-group-item {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all Bootstrap badges */
.badge, .badge-primary, .badge-secondary, .badge-success, .badge-danger, .badge-warning, 
.badge-info, .badge-light, .badge-dark {
    background: var(--button-color) !important;
    color: var(--text-color) !important;
}

/* Force all Bootstrap progress bars */
.progress, .progress-bar {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all Bootstrap tooltips and popovers */
.tooltip, .popover, .tooltip-inner, .popover-header, .popover-body {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all custom classes */
.custom-border-card, .custom-control, .custom-control-input, .custom-control-label,
.custom-radio, .custom-checkbox, .form-check-input, .form-check-label {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all text elements */
h1, h2, h3, h4, h5, h6, p, span, div, a, label, small, strong, em, i, b, u, mark, del, ins, sub, sup {
    color: var(--text-color) !important;
}

/* Force all input elements */
input, textarea, select, option {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all links */
a, a:hover, a:focus, a:active, a:visited {
    color: var(--text-color) !important;
}

/* Force all borders */
.border, .border-top, .border-bottom, .border-left, .border-right {
    border-color: var(--border-color) !important;
}

/* Force all backgrounds */
.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark, .bg-white {
    background: var(--bg-color) !important;
}

/* Force all text colors */
.text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-white, .text-muted {
    color: var(--text-color) !important;
}

/* Force all specific admin page elements */
.body-content, .page-title-sm, .page-search, .border-bottom, .custom-border-card,
.mw-120, .btn-cancel, .btn-default, .form-row, .col-md-3, .col-md-4, .col-md-6,
.col-sm-1, .col-sm-11, .d-flex, .justify-content-start, .justify-content-between,
.justify-content-center, .text-right, .text-center, .text-left, .ml-1, .ml-2, .ml-3, .ml-4,
.mr-1, .mr-2, .mr-3, .mr-4, .mt-1, .mt-2, .mt-3, .mt-4, .mb-1, .mb-2, .mb-3, .mb-4,
.pt-1, .pt-2, .pt-3, .pt-4, .pb-1, .pb-2, .pb-3, .pb-4, .pl-1, .pl-2, .pl-3, .pl-4,
.pr-1, .pr-2, .pr-3, .pr-4, .px-1, .px-2, .px-3, .px-4, .py-1, .py-2, .py-3, .py-4 {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all radio and checkbox groups */
.radio-group, .custom-control, .form-check, .form-check-input, .form-check-label {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all select2 elements */
.select2-container, .select2-selection, .select2-selection--single, .select2-selection--multiple,
.select2-dropdown, .select2-results, .select2-results__option, .select2-selection__rendered,
.select2-selection__arrow, .select2-selection__placeholder {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all close buttons */
.close, .btn-close {
    color: var(--text-color) !important;
}

/* Force all modal close buttons */
.modal-header .close, .modal-header .btn-close {
    color: var(--text-color) !important;
}

/* Force all sortable elements */
.ui-sortable, .ui-sortable-handle, .listitemClass {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Force all after-add-more sections */
.after-add-more {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* Force all specific admin classes */
.sorting, .sorting label, .input-group-text, .form-group label, .form-group,
.border-top, .border-bottom, .border-left, .border-right, .border {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* OVERRIDE ALERT COLORS */
.alert-success {
    color: var(--button-color) !important;
}

.alert-warning {
    color: var(--button-color) !important;
}

.alert-danger {
    color: var(--button-color) !important;
}

/* ULTRA-SPECIFIC OVERRIDES FOR EXTERNAL LIBRARIES */
/* Override Select2 completely */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: none !important;
}

.select2-dropdown,
.select2-results__options,
.select2-results__option,
.select2-results__option--highlighted {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Override Summernote completely */
.note-editor,
.note-editor .note-toolbar,
.note-editor .note-editable,
.note-editor .note-toolbar .note-btn,
.note-editor .note-toolbar .note-btn-group,
.note-editor .note-toolbar .note-btn-group .note-btn {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Override DataTables completely */
.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Override Toastr completely */
.toast,
.toast-success,
.toast-error,
.toast-warning,
.toast-info,
.toast-top-right,
.toast-top-left,
.toast-bottom-right,
.toast-bottom-left {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* Override Bootstrap DateTimePicker */
.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget .datepicker,
.bootstrap-datetimepicker-widget .timepicker,
.bootstrap-datetimepicker-widget .datepicker-days,
.bootstrap-datetimepicker-widget .datepicker-months,
.bootstrap-datetimepicker-widget .datepicker-years {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

/* REMOVED: Nuclear option was causing CSS conflicts and performance issues */
/* Specific elements are styled individually below for better control */

/* Override specific elements that should have different colors */
/* REMOVED: Global button override - buttons use their specific class styles */

/* Sidebar navigation hover - Allow green hover color */
.sidebar .nav-link:hover,
.sidebar .nav-item.active .nav-link {
    background: #f97316 !important;
    color: #ffffff !important;
}

/* ===== COMPREHENSIVE BUTTON STYLING FOR ALL ADMIN PAGES ===== */

/* Header and Navigation Buttons - Transparent with borders */
.header button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.header .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.header a.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.navbar button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.navbar .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.header button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
.header .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
.navbar button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
.navbar .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* Dropdown toggle buttons - Transparent */
.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
button.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
a.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.dropdown-toggle:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
button.dropdown-toggle:hover,
a.dropdown-toggle:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* User menu and profile buttons */
.user-menu button,
.user-menu .btn,
.user-dropdown button,
.user-dropdown .btn,
[class*="user-"] button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.user-menu button:hover,
.user-menu .btn:hover,
.user-dropdown button:hover,
.user-dropdown .btn:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* Settings and icon buttons */
[class*="icon-btn"],
[class*="header-icon"],
.settings-btn,
.notification-btn,
button[class*="icon"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #999999 !important;
}

[class*="icon-btn"]:hover,
[class*="header-icon"]:hover,
.settings-btn:hover,
.notification-btn:hover,
button[class*="icon"]:hover {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/* Filter, search, and utility buttons */
.filter-btn,
.search-btn,
.reset-btn,
.clear-btn,
button[type="reset"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.filter-btn:hover,
.search-btn:hover,
.reset-btn:hover,
.clear-btn:hover,
button[type="reset"]:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* Close and cancel buttons */
.close,
.btn-close,
.cancel-btn,
button[data-dismiss="modal"]:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.close:hover,
.btn-close:hover,
.cancel-btn:hover,
button[data-dismiss="modal"]:hover {
    background: #27272a !important;
    border-color: #ef4444 !important;
}

/* Action buttons in cards and tables - Stay transparent unless specified */
.card-header button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.card-body button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.table button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
td button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
th button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
    padding: 0.375rem 0.75rem !important;
}

.card-header button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
.card-body button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
.table button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):hover,
td button:hover,
th button:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* Ensure action buttons with specific classes keep their colors */
.btn-sm.btn-primary,
.btn-sm.btn-success,
.btn-sm.btn-danger,
.btn-sm.btn-warning,
.btn-lg.btn-primary,
.btn-lg.btn-success,
.btn-lg.btn-danger,
.btn-lg.btn-warning {
    background: var(--button-color) !important;
    border-color: var(--border-color) !important;
}

/* Pagination buttons - Transparent */
.pagination .page-link:not(.active) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.pagination .page-link:not(.active):hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

.pagination .page-item.active .page-link {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

/* Sidebar toggle and menu buttons */
.sidebar-toggle,
.menu-toggle,
.hamburger-btn,
button[data-toggle="sidebar"] {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.sidebar-toggle:hover,
.menu-toggle:hover,
.hamburger-btn:hover,
button[data-toggle="sidebar"]:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* Breadcrumb and back buttons */
.breadcrumb button,
.back-btn,
button[onclick*="back"],
button[onclick*="history"] {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.breadcrumb button:hover,
.back-btn:hover,
button[onclick*="back"]:hover,
button[onclick*="history"]:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* Form control buttons (not submit) */
.input-group-append button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning),
.input-group-prepend button:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning) {
    background: transparent !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
}

.input-group-append button:hover,
.input-group-prepend button:hover {
    background: #27272a !important;
    border-color: #f97316 !important;
}

/* ===== END COMPREHENSIVE BUTTON STYLING ===== */

/* ===== SHARED MODULE STYLES (Package, Song, Artist, etc.) ===== */

/* Page header layout */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.page-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem;
}

/* Action buttons */
.btn-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f97316;
    color: #fff !important;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-primary-action:hover { background: #ea580c !important; color: #fff !important; }

.btn-secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #a1a1aa !important;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    border: 1px solid #27272a;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-secondary-action:hover { border-color: #3f3f46; color: #ffffff !important; background: #27272a; }

.btn-cancel-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: #71717a !important;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    border: 1px solid #27272a;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-cancel-action:hover { border-color: #3f3f46; color: #a1a1aa !important; }

/* Data card */
.data-card {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 0.75rem;
    overflow: hidden;
}
.data-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #27272a;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Form card */
.form-card {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

/* Form layout grid */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }

.form-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #52525b;
    margin-bottom: 0.875rem;
}
.form-section-title .hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: #3f3f46; }
.form-section-title.mt-4 { margin-top: 1.5rem; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0;
}
.field-row.three-col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .field-row, .field-row.three-col { grid-template-columns: 1fr; } }

.field-group { display: flex; flex-direction: column; gap: 0.375rem; }

.field-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: #a1a1aa;
    margin: 0;
}
.req { color: #f87171; margin-left: 2px; }

.field-input {
    background: #09090b;
    border: 1px solid #3f3f46;
    border-radius: 0.5rem;
    color: #e4e4e7;
    font-size: 0.8125rem;
    padding: 0.5625rem 0.75rem;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.field-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.field-input::placeholder { color: #52525b; }
select.field-input option { background: #18181b; }

/* Price prefix */
.input-prefix-wrap { position: relative; }
.input-prefix {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    font-size: 0.8125rem;
    pointer-events: none;
}
.field-input.has-prefix { padding-left: 1.75rem; }

/* Image panel */
.image-panel { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem;
}

.image-upload-box {
    width: 100%;
    max-width: 200px; /* Default size cap */
    aspect-ratio: 1;
    border-radius: 1rem;
    border: 2px dashed #3f3f46;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #09090b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-upload-box.is-circular {
    border-radius: 50% !important;
}

.image-upload-box.is-landscape {
    max-width: 320px;
    aspect-ratio: 16 / 9;
}

.image-upload-box.is-portrait {
    max-width: 200px;
    aspect-ratio: 1;
}

.image-upload-box.is-square {
    max-width: 140px;
    aspect-ratio: 1;
}

.image-upload-box:hover { 
    border-color: #f97316; 
    background: #18181b;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

.image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.image-upload-box:hover .image-preview {
    transform: scale(1.05);
}

.upload-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: all 0.3s ease;
    color: #fff;
    backdrop-filter: blur(2px);
}

.upload-overlay i { 
    font-size: 1.75rem; 
    color: #f97316;
}

.upload-overlay span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.image-upload-box:hover .upload-overlay { 
    opacity: 1; 
}

.image-hint {
    font-size: 0.75rem;
    color: #71717a;
    line-height: 1.4;
}

.image-hint strong {
    color: #f97316;
}

/* Form footer */
.form-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #27272a;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    font-size: 0.78rem;
}
.breadcrumb-item a { color: #71717a; text-decoration: none; }
.breadcrumb-item a:hover { color: #f97316; }
.breadcrumb-item.active { color: #a1a1aa; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: #3f3f46;
    padding: 0 0.25rem;
}
/* Layout & Typography */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #27272a;
}

.page-title-group { display: flex; flex-direction: column; gap: 0.25rem; }

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: -0.025em;
}

.btn-primary-action {
    background: #f97316 !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    border: none !important;
    box-shadow: 0 4px 12px -2px rgba(249, 115, 22, 0.3);
}

.btn-primary-action:hover {
    background: #ff8533 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -3px rgba(249, 115, 22, 0.4);
}

.btn-primary-action i { font-size: 1.1rem; }

/* Step Progress */
.step-progress-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.step-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #18181b;
    padding: 0.5rem 1.5rem;
    border-radius: 100px;
    border: 1px solid #27272a;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #71717a !important;
    font-size: 0.8125rem;
    font-weight: 500;
}

.step-item.active { color: #f97316 !important; }
.step-item.completed { color: #ffffff !important; }

.step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #27272a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.step-item.active .step-num { background: #f97316; color: #fff; }
.step-item.completed .step-num { background: #f97316; color: #fff; }

.step-divider {
    width: 24px;
    height: 1px;
    background: #27272a;
}

/* ===== END SHARED MODULE STYLES ===== */

/* Borders are applied individually to specific elements (cards, inputs, tables, etc.) */

/* Select2 elements will inherit the global border from * selector above */

/* Override text colors for specific elements */
.alert-success {
    color: var(--button-color) !important;
}

.alert-warning {
    color: var(--button-color) !important;
}

.alert-danger {
    color: var(--button-color) !important;
}