/* =========================================
   KME NETWORK DASHBOARD STYLESHEET

   TABLE OF CONTENTS
   1. IMPORTS, VARIABLES & RESETS
   2. TYPOGRAPHY & TEXT UTILITIES
   3. CORE LAYOUT (Header, Sidebar, Main)
   4. COMPONENTS (Cards, Tabs, Buttons, Badges)
   5. FORMS, INPUTS & DROPDOWNS (Inc. Autocomplete)
   6. TABLES, LISTS & PAGINATION (BS 5.3 Fixed)
   7. MODALS, TOASTS & POPOVERS
   8. SPECIFIC PAGES & CUSTOM UTILITIES
   9. PREMIUM LIGHT THEME (Overrides)
   10. PREMIUM DARK THEME (Overrides)
   11. MEDIA QUERIES (Responsive Design)
   ========================================= */

/* =========================================
   1. IMPORTS, VARIABLES & RESETS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* { box-sizing: border-box; }

:root {
    --bs-spacer: 1rem;
    --brand-gradient: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%) !important;
    --brand-gradient-hover: linear-gradient(90deg, #7A24C2 0%, #3D00B8 100%) !important;
    --brand-solid: #8E2DE2;
    --brand-solid-hover: #4A00E0;
    --brand-light: #B46BFF;
    --brand-glow: rgba(142, 45, 226, 0.4);
    --text-neutral: #252f4a;
}

html { -ms-overflow-style: none; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body { display: block; color: #1d3557; font-size: .9rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 990; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.6s ease, visibility 0.4s ease, backdrop-filter 0.6s ease; }
body.sidebar-show { overflow: hidden !important; position: fixed; width: 100%; height: 100%; }
body.sidebar-show::after { opacity: 1; visibility: visible; pointer-events: auto; }

a { text-decoration: none !important; background-color: transparent; -webkit-text-decoration-skip: objects; color: var(--brand-solid); }
a:hover, a:active, a:focus { outline: none !important; color: var(--brand-solid-hover); }
ul { list-style-type: none; margin: 0; padding: 0; }

/* =========================================
   2. TYPOGRAPHY & TEXT UTILITIES
   ========================================= */
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0; padding: 0; color: var(--text-neutral); letter-spacing: -0.05px; }
h1 { font-size: 1.4rem; margin: 0.42rem 0; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; font-weight: 600; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
.small, small { font-size: 0.8rem; }

/* =========================================
   3. CORE LAYOUT (Header, Sidebar, Main)
   ========================================= */
#main {  width: auto; max-width: 100%; margin: 0 0 0 15rem; overflow-y: auto; min-height: calc(100vh - 4rem);}

.header, body.header-fixed .header { top: 0; margin-left: 15rem; right: 0; z-index: 99;height: calc(.25rem * 16); }
.header.scroll-header { padding-left: 280px !important; background: var(--brand-gradient); box-shadow: 0 3px 10px rgba(62, 85, 120, 0.045); }
.header .navbar { padding: .2rem 1rem; }
.header.scroll-header .navbar-brand { color: #fff; }
.navbar-toggler { padding: 0; border: none; color: #000; outline: 0 !important; transition: all 0.2s ease-in-out; }
.navbar-toggler a, .navbar-toggler:hover { color: #000 !important; }
.header .link { color: #000; border-radius: .9rem; height:32px;  }
.header .navbar-nav > li > a { color: #000; transition: all 0.2s ease-in-out; padding: 5px 15px; }
.header.scroll-header .navbar-nav > li > a { color: #fff; }
.header .navbar-nav > li > a:hover, .header .navbar-nav > li.show > a { background: #ddd; color: #000; }
.header.scroll-header .navbar-nav > li > a:hover, .header.scroll-header .navbar-nav > li.show > a { color: #fff !important; background: rgba(255,255,255,0.2); }
.header .navbar-nav > li > a > i { vertical-align: middle; }

.sidebar { filter: blur(0) !important; position: fixed; display: block; left: 0; top: 0; bottom: 0; height: 100vh; height: 100svh; width: 15rem; z-index: 999; transform: translateX(0); opacity: 1; font-weight: 500;background-color: oklch(98.5% 0 0); background-attachment: fixed; overflow-y: auto; overflow: visible !important; -webkit-overflow-scrolling: touch; transition: transform 0.2s ease-in-out; backface-visibility: hidden; perspective: 1000; will-change: transform, scroll-position; }
@supports (height: 100dvh) { .sidebar { height: 100dvh; } }
body.sidebar-show .sidebar, .sidebar-show .sidebar { transform: translateX(0); opacity: 1; }

 .sidebar-inner{ padding: 1rem 0.5rem; padding-top:.25rem; overflow-y: scroll; }
.no-scroll, .sidebar-inner {
-ms-overflow-style: none;scrollbar-width: none;
}

 .sidebar-inner::-webkit-scrollbar, .no-scroll::-webkit-scrollbar {
  display: none;
}
.sidebar .slimScrollDiv, .sidebar .sidebar-inner { height: 100% !important; display: flex; flex-direction: column; }
.sidebar .sidebar-inner ul { list-style-type: none; padding: 0; margin: 0; }
.sidebar .sidebar-inner ul li { display: block; overflow: hidden; margin-top: 1px; }
.sidebar .sidebar-inner ul li a { justify-content: left; font-weight: 400; color: var(--text-neutral); padding: 0.5rem 0.8rem; transition: all 0.2s ease-in-out; display: flex; align-items: center; gap:0.75rem; cursor: pointer; font-size: 1rem; position: relative; border-radius: 0.5rem; margin: 0.2rem; }
.sidebar .sidebar-inner ul li a:hover, .sidebar .sidebar-inner ul li.open > a, .sidebar .sidebar-inner ul li a:focus { background-color: #f1dfff; color: var(--brand-solid); }
.sidebar .sidebar-inner ul li a.active { background: var(--brand-gradient); color: #fff; }

.sidebar .material-icons { font-size: 20px !important; }
.sidebar i { font-size: 1rem; margin-right: 1.1rem; margin-left: 0.3rem; }
.sidebar .sidebar-inner ul li a span:not(.has-sub-menu) { vertical-align: top; }
.sidebar .sidebar-inner ul li a span.has-sub-menu { vertical-align: middle; margin-left: auto; color: #c1c1c1; float: right; transition: all 0.3s ease-in-out; }
.sidebar .sidebar-inner ul li.open > a > span.has-sub-menu { transform: rotate(-90deg); }

.sidebar .sidebar-inner ul li.sidebar-title { display: block; text-transform: uppercase; margin: 22px 10px 6px; overflow: hidden; float: none; padding: 0 0.85rem 0 3rem; border-bottom: 1px solid color-mix(in sRGB, var(--brand-light) 15%, #2f3349); }
.sidebar .sidebar-inner ul li.sidebar-title:first-child { margin-top: 0; align-items: center; text-align: center; padding: 23px 13px; color: #fff; background: #333948 !important; }
.sidebar .sidebar-inner ul li ul.sub-menu { display: none; position: relative; overflow: hidden; padding-left:1rem;margin-bottom:0.6rem; }
.sidebar .sidebar-inner ul li ul.sub-menu li { display: block; overflow: hidden; }
.sidebar .sidebar-inner ul li ul.sub-menu a { text-align: left;margin-top:0!important;margin-bottom:0!important;padding:0.3rem 0.6rem; }
.sidebar .sidebar-inner ul li ul.sub-menu a::before {
    content: "\2022";
    margin-right: 8px;
    color: currentColor; /* Jo text ka color hoga, dot ka bhi wahi rahega */
    font-size: 1.2rem;
    vertical-align: middle;
    display: inline-block;
}
.sidebar .sidebar-inner ul li ul.sub-menu li a.active, .sidebar .sidebar-inner ul li.active-page > a { color: var(--brand-solid); }

.footer .footer-text { display: block; padding: 10px 25px 30px; font-size: 1.4rem; }

/* =========================================
   4. COMPONENTS (Cards, Tabs, Buttons, Badges)
   ========================================= */
.top-nav {width: 100%;border-bottom: 1px solid #e0e0e0;}
.tabs-nav { display: flex;overflow-x: auto;white-space: nowrap;cursor: pointer; -webkit-overflow-scrolling: touch;}
.tabs-nav::-webkit-scrollbar {display: none;}
.tabs-nav {-ms-overflow-style: none;scrollbar-width: none;}
.tab-link { padding: 9px 20px;color: var(--bs-body-color);position: relative; transition: color 0.2s;font-weight:500;font-size:1rem;}
.tabs-nav a {color: var(--bs-body-color)!important;}
.tabs-nav a:hover { color: var(--brand-solid)!important; }
.tab-link.active {color: var(--brand-solid);font-weight:600;}
.tab-link.active::after {content: "";position: absolute;bottom: 0;left: 12%;right: 12%;height: 3.5px;background: var(--brand-gradient);border-radius: 8px 8px 0 0;}

.card { background-color: transparent; border: 0px solid #f1f3f5; position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-clip: border-box; box-shadow: 0; }
.card-shadow { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); border: 1px solid #f1f3f5; }
.card .card-title { align-items: flex-start !important; margin: 0; margin-left: 4px; font-size: 1rem; }
.card-title .main-title { font-size: 1rem; }
.card-title .sub-title { color: #99a1b7; font-size: 0.7rem; }
.card-header { align-items: center; padding: 0.5rem; font-weight: 500; margin-bottom: 0; background: #f8f9fa; color: #000; font-size: 1rem; min-height: 42px; border: 0; }
.card-header i { margin-right: 5px; }
.card-body { padding: 1.25rem; padding-top: 0.25rem; }
.card-header-pills, .card-header-tabs { margin-right: 0; margin-left: 0; }
.card-header-tabs { margin-bottom: -10px; border-bottom: 0; }
.card-footer { border: 0; background: transparent; }
.card.text-white .card-title { color: #fcfcfc; }
.card.card-transparent { background: transparent !important; box-shadow: none; }
.card-border { border: 1px solid #eae4e6; }
.card-subheader { background: #f1f5f3; padding: 0.75rem 1.25rem; }
.card-subheader .btn { margin: 0 0.4em; }
.card-header:first-child { border-top-left-radius: calc(0.5rem - 1px) !important; border-top-right-radius: calc(0.5rem - 1px) !important; }

.alert { padding: 0.75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert .alert-link { color: inherit !important; font-weight: 600; }
.alert.alert-primary { background-color: #ebd4ff !important; color: #4A00E0 !important; border-color: var(--brand-solid) !important; }
.alert.alert-secondary { background-color: #9094a4 !important; color: #1a1b20 !important; border-color: #6b6f82 !important; }
.alert.alert-success { color: #0b3a29 !important; border-color: #28d094 !important; }
.alert.alert-danger { color: #960014 !important; border-color: #ff4961 !important; }
.alert.alert-warning { background-color: #ffbc90 !important; color: #963b00 !important; border-color: #ff9149 !important; }
.alert.alert-info { background-color: #e6f7ff !important; color: #005f96 !important; border-color: #49b5ff !important; }
.alert.alert-light { background-color: #fff !important; color: #878787 !important; border-color: #e0e0e0 !important; }
.alert.alert-dark { background-color: #666 !important; color: #000; border-color: #424242 !important; }

.notice { border-style: dashed !important; border-radius: 0.475rem !important; padding: 0.7rem !important; border: 1px solid transparent; display: flex; align-items: flex-start; flex-wrap: nowrap; font-size: 1rem; color: #4b5675; }
.notice .icn { font-size: 24px; margin-right: 16px; }
.notice .content { display: flex; align-items: flex-start; flex-wrap: nowrap; justify-content: space-between; width: 100%; }
.notice span, .notice h3 { font-size: 1rem; }
.notice h3 { color: #071437; }
.notice-info { background: #f8f0ff; border-color: var(--brand-solid); }
.notice-info i { color: var(--brand-solid); }
.notice-warning { background: #fff8dd; border-color: #f6c000; }
.notice-warning i { color: #f6c000; }

.status { align-items: center; cursor: default; height: 18px; padding: 0px 6px; font-size: 0.625rem; min-width: initial; font-weight: bold; border-radius: 4px; letter-spacing: .6px; pointer-events: none; text-transform: uppercase; border: 1px solid; }
.draft { background-color: #e2e8f0; color: #475569; }
.in-review, .pending { color: rgb(234, 75, 4); border-color: rgb(255, 180, 76)!important; background-color: rgb(255, 243, 224); }
.approved, .submitted, .submited { color: #4A00E0; border: 1px solid #B46BFF !important; background-color: #f4e8ff; }
.delivered, .live { background-color: rgb(227, 246, 233); color: rgb(0, 98, 24); border: 1px solid rgb(86, 204, 130)!important; }
.removed, .rejected { background-color: #fee2e2; color: #991b1b; border: 1px solid #991b1b!important; }

.btn { display: inline-block; border-radius: 0.5rem; cursor: pointer; border: 0px solid transparent; outline: none; padding: 0.25rem 1rem; overflow: hidden; font-size: 0.9rem !important; letter-spacing: 0.5px; box-shadow: none!important; }
.btn:active { transform: translateY(0); }
.btn-md { padding: 0.2rem 0.7rem; font-size: 0.8rem !important;   }
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.72rem !important; }
.btn-lg { font-size: 1rem !important; padding: 0.3rem 1.2rem !important; }
.btn i { padding-right: 2px; }
.square { border-radius: 0; }
.round { border-radius: 1.5rem; }
.btn:disabled:hover, .btn:disabled:focus, .btn:disabled.active, .btn:disabled:active { box-shadow: none !important; }
.btn .spinner-grow, .btn .spinner-border { vertical-align: middle; }

.btn.btn-primary { background: var(--brand-gradient); color: white; border: none; }
.btn-primary .btn-glow { box-shadow: 0 1px 20px 1px var(--brand-glow); }
.btn.btn-outline-primary { border: 1px solid var(--brand-solid); background-color: transparent; color: var(--brand-solid); }
.btn.btn-outline-primary:hover { background: var(--brand-gradient); border-color: transparent; color: #fff !important; }

.btn.btn-secondary { background-color: #6c757d; color: white; border-color: #6c757d; }
.btn.btn-secondary:hover { background-color: #777b8f !important; border-color: #777b8f !important; color: #fff !important; }
.btn.btn-outline-secondary { border-color: #6b6f82; background-color: transparent; color: #6b6f82; }
.btn.btn-outline-secondary:hover { background: #6b6f82; color: #fcfcfc; }

.btn.btn-success { background-color: #28a745; color: white; border-color: #28a745; }
.btn.btn-success:hover { background-color: #28d094 !important; }
.btn.btn-outline-success { border-color: #28d094; background-color: transparent; color: #28d094; }
.btn.btn-outline-success:hover { background: #28d094; color: #fcfcfc; }

.btn.btn-danger { background-color: #dc3545; color: white; border-color: #dc3545; }
.btn.btn-danger:hover { background-color: #ff4961 !important; }
.btn.btn-outline-danger { border-color: #ff4961; background-color: transparent; color: #ff4961; }
.btn.btn-outline-danger:hover { background: #ff4961; color: #fcfcfc; }

.btn.btn-warning { background-color: #ff9149 !important; color: #fff !important; }
.btn.btn-outline-warning { border-color: #ff9149; background-color: transparent; color: #ff9149; }
.btn.btn-outline-warning:hover { background: #ff9149; color: #fcfcfc; }

.btn.btn-info { background-color: #17a2b8 !important; color: #fff !important; }
.btn.btn-info:hover { background-color: #138496 !important; }
.btn.btn-outline-info { border: 1px solid #17a2b8; background-color: transparent; color: #17a2b8; }
.btn.btn-outline-info:hover { background: #17a2b8; border-color: transparent; color: #fcfcfc; }

.btn.btn-light { background-color: #f8f9fa; color: #212529; border: 1px solid #ddd; }
.btn.btn-light:hover { background: #f1f1f4 !important; }
.btn.btn-outline-light { border-color: #e0e0e0; background-color: transparent; color: #e0e0e0; }
.btn.btn-outline-light:hover { background: #e0e0e0; color: #fff; }

.btn.btn-dark { background-color: #424242 !important; color: #fff; }
.btn.btn-outline-dark { border-color: #424242; background-color: transparent; color: #424242; }
.btn.btn-outline-dark:hover { background: #424242; color: #fcfcfc; }

.btn.btn-link { color: #000; background-color: transparent; text-decoration: none !important; border-color: transparent; }
.btn.btn-link:hover { color: #000 !important; background-color: transparent; }

.btn-group { position: relative; vertical-align: middle; display: inline-block !important; }
.btn-group > .btn { position: relative; margin-left: -3px !important; }
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.mbtn { display: none; }
 .btn-pro {
        display: inline-block;
        padding: 5px 10px;
        text-decoration: none;
        border-radius: 50%;
        transition: 0.2s ease;
        cursor: pointer;
    }
/* =========================================
   5. FORMS, INPUTS & DROPDOWNS
   ========================================= */
.form-control { width: 100%; padding: 0.39rem 0.77rem; font-size: .92rem; color: #313a46; background-color: #fff; background-clip: padding-box; border: 1px solid #dee2e6; border-radius: 0.5rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.form-control::placeholder { color: #bac4cc !important; opacity: 1; }
.form-control:focus { border: 2px solid var(--brand-solid); box-shadow: none; color: #4e5154; background: #fff; }
.form-control:disabled { background-color: #f7f7f7; opacity: 1; }
 form label {
      font-size: .8rem; line-height: 1; margin-bottom:.5rem; margin-left:.5rem;
  }
input[type='file'] { padding-block: 6px; }
input:disabled::-webkit-input-placeholder, input:disabled:-moz-placeholder, input:disabled::-moz-placeholder, input:disabled:-ms-input-placeholder { color: #f9f9f9; }
.input-group.position-relative { position: relative; }

.header .navbar-nav .dropdown.show .dropdown-menu, .dropdown-menu.show { animation: fadeOnly 0.3s ease-in-out; margin-top: 7px !important; transition: none !important; display: block; opacity: 1; visibility: visible; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); z-index: 98 !important; clip-path: none; }
.dropdown-menu { border-radius: 0.5rem; box-shadow: 0px 0.4rem 1rem rgba(0, 0, 0, 0.15); background: #ffffff; padding: 0.5rem; min-width: 12.5rem!important; overflow: hidden; font-size: 1rem; }
.dropdown-item { padding: 0.4rem 0.8rem; color: #333; border-radius: 0.25rem; transition: all 0.3s ease-in-out; display: flex; align-items: center; gap: 1rem; cursor: pointer; }
.dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; }
.dropdown-header { padding: 8px 16px; margin-bottom: 0; font-size: 1rem; color: var(--text-neutral); white-space: nowrap; font-weight: 600; text-transform: uppercase; }
.dropdown-menu a.disabled { opacity: 0.4; }
.dropdown-menu a i, .c-drop a i { margin-right: 0.08rem; }
.dropdown-menu-right { right: 0; left: auto; }

.ui-autocomplete { background: #ffffff; border: 1px solid rgba(0,0,0,.15); border-radius: 0.375rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175); z-index: 2000 !important; padding: 0.5rem 0; list-style: none; margin-top: 2px; }
.ui-menu-item .ui-menu-item-wrapper { padding: 8px 16px; color: #212529; cursor: pointer; border-top:1px solid #ddd; }
.ui-menu-item .ui-menu-item-wrapper.ui-state-active { background:#f1f5f9 !important; border-color:#ddd; color:#212529; }
.ui-helper-hidden-accessible { display: none; }

/* =========================================
   6. TABLES, LISTS & PAGINATION (BS 5.3 Fixed)
   ========================================= */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-neutral);
    --bs-table-border-color: #e6e6e6;
    --bs-table-striped-bg: #f2f2f2;
    --bs-table-hover-bg: #f2f2f2;
}
.table td, .table th { padding: 10px 8px; }
.table thead th { font-weight: 600; border-top: 0; }
.table.table-hover tbody tr { transition: all 0.2s; }

.list-group-item { padding: 10px 15px; border: 1px solid #f2f2f2; }
.list-group-item.active { background: var(--brand-gradient); border-color: transparent; color: #fff; }

.nav-link { color: var(--text-neutral); transition: all 0.2s ease-in-out; }
.nav-link:hover, .nav-link.active { color: var(--brand-solid); }
.nav-tabs { border-bottom: 1px solid #e6e6e6; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-color: #e6e6e6 #e6e6e6 #fcfcfc; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--brand-gradient); color: #fff; }

.page-link { border: none; background: #e6e6e6; padding: 9px 15px; color: var(--text-neutral); transition: all 0.2s ease-in-out; }
.page-item.active .page-link, .page-link:focus, .page-link:active, .page-link:hover { border: none; background: var(--brand-gradient); color: #fcfcfc!important; outline: 0 !important; box-shadow: none !important; }
.pagination-circle .page-link { border-radius: 34px !important; margin-right: 5px; }

/* =========================================
   7. MODALS, TOASTS & POPOVERS
   ========================================= */
body.modal-open { overflow: visible; }
.modal-content { border: 0; box-shadow: 0 3px 10px rgba(62, 85, 120, 0.045); border-radius:.5rem; }
.modal-header { border-bottom: 0; padding: .8rem; }
.modal-title { font-size: 1rem; color: #000; font-weight: 500; margin-left: 0.5rem; }
.modal-body { padding: 0rem; }
.modal-footer { padding: 0.7rem; border: 0; }
.modal-header .close i { font-size: 1.2rem !important; color: #7d7d83; transition: all 0.2s ease-in-out; text-shadow: none; }
.modal-header .close:hover i, .modal-header .close:focus { color: #000; outline: 0; }
.modal-header .nobtn { background: #dfdfdf !important; }

.toast { border: none; margin: 10px; }
.toast-header { padding: 6px 10px; }
.toast-header button.close i { font-size: 1.2rem; vertical-align: middle; }
.toast-body { padding: 6px 10px; }
.toast-body .toast-message { display: block; float: left; }
#toast-container > .toast { opacity: 1; display: flex; width: auto; cursor: pointer; }

.popover { border: 0; box-shadow: 0 3px 10px rgba(62, 85, 120, 0.045); }
.popover-header { padding: 9px 15px; background: #f2f2f2; border-bottom-color: #e6e6e6; }
.popover-body { padding: 9px 15px; font-size: 1.3rem; }
.popover .arrow:before { display: none; }

.bg-primary, .progress-bar { background: var(--brand-gradient) !important; color: #fff !important; }
.text-primary { color: var(--brand-solid) !important; }

/* =========================================
   8. SPECIFIC PAGES & CUSTOM UTILITIES
   ========================================= */
.progress { border-radius: 4px; }

#artworkimg, #artworkimg2 { width: 150px; height: 150px; margin-right: auto; margin-left: auto; border-radius: 0.25rem; transition: all 0.3s ease-in-out; cursor: pointer; }
#albumThumb { width: 250px; margin-right: 20px; }
.img button, .img button:hover, .img button:focus, img:focus-visible { border: 0; border-radius: 50%; width: 100%; height: 100%; background: #fcfcfc; }
.img button:hover { background: #f6f6f6; }
.player audio { position: fixed; left: 0; bottom: 0; width: calc(100% - 280px); color: white; text-align: center; z-index: 1000; margin-left: 280px; background: #f1f3f4; }

.avatar { position: relative; width: 36px; height: 36px; white-space: nowrap; border-radius: 50%; cursor: pointer; color: #fff; display: inline-flex; font-size: 0.8rem; text-align: center; vertical-align: middle; justify-content: center; align-items: center; background: var(--brand-gradient); }
.icon-wrapper { position: relative; display: inline-flex; }
.badge-count { position: absolute; top: 0; right: 15px; background: var(--brand-gradient); color: white; font-size: 10px; font-weight: bold; height: 16px; width: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; }
.min-vh-100 { min-height: 100vh; min-height: 100svh !important; }
input {
    background: inherit;
}

  .breadcrumb {     margin-bottom:2px; }
  .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 5px; font-size: .85rem; }
/* Default list items */
.breadcrumb li {  cursor: pointer; }
/* Separator adding */
.breadcrumb li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle; /* Text ke sath center karne ke liye */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Active page styling */
.breadcrumb li.active {
  cursor: default;
}
/* =========================================
     1. UNIVERSAL STYLES (MOBILE FIRST - CARD VIEW)
     ========================================= */
  .pro-table-wrapper { width: 100%; }

  /* Mobile par Table Header hide rahega */
  .pro-header { display: none; }

  /* Mobile Card Layout */
  .pro-body { display: grid; gap: 16px; padding: 10px 0; grid-template-columns: 1fr; }
  .pro-row {
    border: 1px solid #e9ecef; border-radius: 8px;
    padding: 12px 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
  }

  /* Card ke andar ka Data (Label Left, Value Right) */
  .pro-cell {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid #f1f3f5;
  }
  .pro-cell:last-child { border-bottom: none; }
  .pro-label { font-weight: 600; color: #6c757d; font-size: 14px; }

  /* Truncate for long text */
  .truncate-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

  /* =========================================
     2. TABLET VIEW (Grid of Cards)
     ========================================= */
 /* =========================================
     2. TABLET VIEW (Wide Card with 2-Column Data)
     ========================================= */
  @media (min-width: 768px) and (max-width: 1023px) {

    /* 1. Ek line mein sirf 1 Card aayega (Taki squish na ho) */
    .pro-body { grid-template-columns: 1fr; }

    /* 2. Card ke andar ke data ko 2 hisson mein baant diya */
    .pro-row {
      display: grid;
      grid-template-columns: 1fr 1fr; /* Card ke andar 2 columns */
      column-gap: 32px; /* Left aur Right data ke beech gap */
      row-gap: 4px;
      padding: 16px 20px;
    }

    /* 3. Border adjust kar di taaki design premium lage */
    .pro-cell { border-bottom: 1px dashed #e9ecef; }

    /* Aakhri 2 items se niche ka border hata diya */
    .pro-cell:nth-last-child(-n+2) { border-bottom: none; }
  }
  /* =========================================
     3. PC VIEW (Dynamic Table Layout)
     ========================================= */
  @media (min-width: 1024px) {
    .pro-table-wrapper { border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; }

    /* MAGIC YAHAN HAI: HTML se variable lega, warna default 1fr 1fr dega */
    .pro-header, .pro-row {
      display: grid;
      grid-template-columns: var(--table-grid, 1fr 1fr);
      align-items: center;
    }

    .pro-header { display: grid; background: #f8f9fa; padding: 12px 16px; font-weight: 600; border-bottom: 2px solid #dee2e6; }

    /* PC par Cards ko Table Row mein badalna */
    .pro-body { display: block; padding: 0; gap: 0; }
    .pro-row { border: none; border-radius: 0; box-shadow: none; padding: 12px 16px; border-bottom: 1px solid #e9ecef; }
    .pro-row:last-child { border-bottom: none; }
    .pro-row:hover { background: #f8f9fa; }

    /* PC par mobile labels hide aur flex disable */
    .pro-cell { display: block; padding: 0; border: none; }
    .pro-label { display: none; }
  }
  input:disabled, select:disabled, .btn:disabled {
      opacity:.6!important;
  }

/* =========================================
   9. PREMIUM LIGHT THEME (Overrides)
   ========================================= */
:root, [data-bs-theme="light"] {
    --bs-body-bg: #f4f6f9;
    --light-surface: #ffffff;
    --light-surface-hover: #f8fafc;
    --light-input-bg: #fff;
    --light-border: #dee2e6;;
    --light-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    --bs-body-color: #475569;
    --light-text-main: #0f172a;
    --light-text-muted: #64748b;
    --brand-accent: var(--brand-solid);
}

[data-bs-theme="light"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
[data-bs-theme="light"] h1, [data-bs-theme="light"] h2, [data-bs-theme="light"] h3, [data-bs-theme="light"] h4, [data-bs-theme="light"] h5, [data-bs-theme="light"] h6,
[data-bs-theme="light"] .text-dark, [data-bs-theme="light"] .text-black, [data-bs-theme="light"] .text-body { color: var(--light-text-main) !important; }
[data-bs-theme="light"] .text-muted { color: var(--light-text-muted) !important; }
[data-bs-theme="light"] a { color: var(--brand-solid-hover); transition: color 0.2s ease-in-out; }
[data-bs-theme="light"] a:hover { color: var(--brand-solid); }

[data-bs-theme="light"] .header {  }
[data-bs-theme="light"] .sidebar { background-color: oklch(98.5% 0 0); border-right: 1px solid var(--light-border); box-shadow: 1px 0 5px rgba(0, 0, 0, 0.01); }
[data-bs-theme="light"] .sidebar .sidebar-inner ul li a { color: var(--bs-body-color); }
[data-bs-theme="light"] .sidebar .sidebar-inner ul li a:hover, [data-bs-theme="light"] .sidebar .sidebar-inner ul li.open > a { background-color: var(--bs-body-bg); color: var(--brand-accent); }
[data-bs-theme="light"] .sidebar .sidebar-inner ul li a.active { background: rgba(142, 45, 226, 0.08); color: var(--brand-accent); border-right: 3px solid var(--brand-accent); }
[data-bs-theme="light"] .sidebar .sidebar-inner ul li.sidebar-title { border-bottom: 1px solid var(--light-border); color: var(--light-text-muted); }
[data-bs-theme="light"] .sidebar .sidebar-inner ul li.sidebar-title:first-child { background: var(--light-text-main) !important; color: #ffffff !important; }

[data-bs-theme="light"] .card { background-color: var(--light-surface);  box-shadow: var(--light-shadow); border-radius: 0; }
[data-bs-theme="light"] .card-header { background: var(--light-surface); color: var(--light-text-main); border-bottom: 1px solid var(--light-border); }

[data-bs-theme="light"] .form-control,[data-bs-theme="light"] .form-select, [data-bs-theme="light"] select.form-control, [data-bs-theme="light"] .artist-tag-container { background-color: var(--light-input-bg); border: 1px solid var(--light-border); color: var(--light-text-main); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.01); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
[data-bs-theme="light"] .form-control:focus,[data-bs-theme="light"] .input-group:focus,[data-bs-theme="light"] .form-select:focus, [data-bs-theme="light"] .artist-tag-container:focus-within { border-color: #8E2DE2; box-shadow: 0 0 0 0.1rem rgba(142, 45, 226, 0.12); background-color: var(--light-input-bg); }
[data-bs-theme="light"] .form-control::placeholder, [data-bs-theme="light"] .artist-search::placeholder { color: #94a3b8 !important; }
[data-bs-theme="light"] .form-control:disabled, [data-bs-theme="light"] .form-select:disabled { background-color:var(--light-input-bg); color: var(--light-text-muted); }
[data-bs-theme="light"] .form-control::file-selector-button, [data-bs-theme="light"] .form-control::-webkit-file-upload-button { background-color: var(--bs-body-bg); color: var(--light-text-main); border-right: 1px solid var(--light-border); }
[data-bs-theme="light"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: var(--light-border); }

[data-bs-theme="light"] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--light-border); --bs-table-striped-bg: rgba(241, 245, 249, 0.5); --bs-table-hover-bg: var(--light-surface-hover); }
[data-bs-theme="light"] .table thead th { color: var(--light-text-main); background-color: var(--bs-body-bg); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }

[data-bs-theme="light"] .btn-light { background-color: #f8fafc; border-color: var(--light-border); color: var(--light-text-main); }
[data-bs-theme="light"] .btn-light:hover, [data-bs-theme="light"] .btn-pro:hover,[data-bs-theme="light"] .header .link:hover, [data-bs-theme="light"] .dropdown-item:active { background-color: #f1f5f9; color: var(--light-text-main); border-color: #cbd5e1; }
[data-bs-theme="light"] .dropdown-menu {
    border:1px solid var(--bs-border-color);
}

[data-bs-theme="light"] .dropdown-menu a {
   color: var(--light-text-main);
}

/* =========================================
   10. PREMIUM DARK THEME (Overrides)
   ========================================= */
[data-bs-theme="dark"] {
    --bs-body-bg: #0b0d14 !important; /* Deeper, more premium dark */
    --bs-body-color: #94a3b8 !important; /* Soft blue-gray for readability */
    --dark-surface: #151822 !important; /* Elevated surface */
    --dark-surface-hover: #1e2231 !important;
    --dark-input-bg: #0f111a !important;
    --dark-border: #222738 !important; /* Slightly lighter border for contrast */
    --dark-text-main: #f1f3f5 !important;
    --dark-text-muted: #718096 !important;
    --dark-accent: var(--brand-light) !important;
}

[data-bs-theme="dark"] body { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .text-black, [data-bs-theme="dark"] .text-body { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--dark-text-muted) !important; }
[data-bs-theme="dark"] #main { background-color: var(--bs-body-bg) !important; }

[data-bs-theme="dark"] .header { background: var(--dark-surface) !important; border-bottom: 1px solid var(--dark-border) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; }
[data-bs-theme="dark"] .header.scroll-header { background: rgba(21, 24, 34, 0.95) !important; backdrop-filter: blur(10px); }
[data-bs-theme="dark"] .header .navbar-nav > li > a, [data-bs-theme="dark"] .header .link, [data-bs-theme="dark"] .navbar-toggler { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .header .navbar-nav > li > a:hover, [data-bs-theme="dark"] .header .navbar-nav > li.show > a, [data-bs-theme="dark"] .header .link:hover { background: var(--dark-surface-hover) !important; border-radius: 0.5rem; }

[data-bs-theme="dark"] .sidebar { background-color: var(--dark-surface) !important; border-right: 1px solid var(--dark-border) !important; }
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li a { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li a:hover, [data-bs-theme="dark"] .sidebar .sidebar-inner ul li.open > a { background-color: var(--dark-surface-hover) !important; color: var(--dark-accent) !important; }
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li a.active { background: rgba(142, 45, 226, 0.15) !important; color: var(--dark-accent) !important; border-right: 3px solid var(--dark-accent); }
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li.sidebar-title { border-bottom-color: var(--dark-border) !important; color: var(--dark-text-muted) !important; }
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li.sidebar-title:first-child { background: var(--dark-input-bg) !important; }

[data-bs-theme="dark"] .card { background-color: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .card-header { background: var(--dark-surface) !important; color: var(--dark-text-main) !important; border-bottom: 1px solid var(--dark-border) !important; }
[data-bs-theme="dark"] .card-subheader { background: var(--dark-surface-hover) !important; }
[data-bs-theme="dark"] .tabs-nav, [data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .tab-link, [data-bs-theme="dark"] .nav-link { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .tab-link.active, [data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link, [data-bs-theme="dark"] .nav-tabs .nav-link.active { color: var(--dark-text-main) !important; border-color: var(--dark-border) var(--dark-border) var(--dark-surface) !important; background-color: var(--dark-surface) !important; }

[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] select.form-control, [data-bs-theme="dark"] .form-control.d-flex.align-items-center { background-color: var(--dark-input-bg) !important; border: 1px solid var(--dark-border) !important; color: var(--dark-text-main) !important; transition: all 0.2s ease-in-out; }
[data-bs-theme="dark"] .form-control:focus { border-color: var(--dark-accent) !important; box-shadow: 0 0 0 0.2rem rgba(142, 45, 226, 0.25) !important; background-color: var(--dark-input-bg) !important; }
[data-bs-theme="dark"] .form-control:disabled { background-color: var(--dark-surface-hover) !important; opacity: 0.6 !important; }
[data-bs-theme="dark"] .form-control::placeholder { color: var(--dark-text-muted) !important; }
[data-bs-theme="dark"] .form-control::file-selector-button, [data-bs-theme="dark"] .form-control::-webkit-file-upload-button { background-color: var(--dark-surface-hover) !important; color: var(--dark-text-main) !important; border-color: inherit !important; border-right: 1px solid var(--dark-border) !important; margin-right: 1rem; transition: background-color 0.2s; }
[data-bs-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background-color: #262b3d !important; }

[data-bs-theme="dark"] .artist-tag-container, [data-bs-theme="dark"] .bootstrap-tagsinput, [data-bs-theme="dark"] .select2-container .select2-selection { background-color: var(--dark-input-bg) !important; border-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .artist-tag-container input.artist-search, [data-bs-theme="dark"] .artist-search, [data-bs-theme="dark"] .bootstrap-tagsinput input { background-color: transparent !important; color: var(--dark-text-main) !important; border: none !important; box-shadow: none !important; }
[data-bs-theme="dark"] .artist-search::placeholder { color: var(--dark-text-muted) !important; }

[data-bs-theme="dark"] .ui-autocomplete { background-color: var(--dark-surface) !important; border: 1px solid var(--dark-border) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important; }
[data-bs-theme="dark"] .ui-menu-item .ui-menu-item-wrapper { color: var(--dark-text-main) !important; border-top: 1px solid var(--dark-border) !important; }
[data-bs-theme="dark"] .ui-menu-item .ui-menu-item-wrapper.ui-state-active, [data-bs-theme="dark"] .ui-menu-item .ui-menu-item-wrapper:hover { background-color: var(--dark-surface-hover) !important; color: var(--dark-accent) !important; border-color: transparent !important; }

[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--dark-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-bg: var(--dark-surface-hover); --bs-table-hover-color: var(--dark-text-main); }
[data-bs-theme="dark"] .table.table-hover tbody tr:hover .text-dark { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .table.table-hover tbody tr:hover a:not(.btn) { color: var(--dark-accent) !important; }

/* Custom Pro Table Dark Mode Fixes */
[data-bs-theme="dark"] .pro-header { background-color: var(--dark-surface-hover) !important; color: var(--dark-text-main) !important; border-bottom-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .pro-row { border-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .pro-row:hover { background-color: var(--dark-surface-hover) !important; }
[data-bs-theme="dark"] .pro-cell { border-bottom-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .pro-label { color: var(--dark-text-muted) !important; }

/* Status Badges Dark Mode Fixes */
[data-bs-theme="dark"] .status { border-width: 1px; }
[data-bs-theme="dark"] .draft { background-color: rgba(226, 232, 240, 0.1); color: #cbd5e1; border-color: transparent; }
[data-bs-theme="dark"] .in-review, [data-bs-theme="dark"] .pending { background-color: rgba(255, 180, 76, 0.1); color: #ffc470; border-color: rgba(255, 180, 76, 0.4) !important; }
[data-bs-theme="dark"] .approved, [data-bs-theme="dark"] .submitted, [data-bs-theme="dark"] .submited { background-color: rgba(180, 107, 255, 0.1); color: #d1a3ff; border-color: rgba(180, 107, 255, 0.4) !important; }
[data-bs-theme="dark"] .delivered, [data-bs-theme="dark"] .live { background-color: rgba(86, 204, 130, 0.1); color: #72f5a6; border-color: rgba(86, 204, 130, 0.4) !important; }
[data-bs-theme="dark"] .removed, [data-bs-theme="dark"] .rejected { background-color: rgba(255, 73, 97, 0.1); color: #ff7b8c; border-color: rgba(255, 73, 97, 0.4) !important; }

[data-bs-theme="dark"] .modal-content, [data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .toast, [data-bs-theme="dark"] .popover { background-color: var(--dark-surface) !important; border: 1px solid var(--dark-border) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important; }
[data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer, [data-bs-theme="dark"] .toast-header, [data-bs-theme="dark"] .popover-header { background-color: rgba(0, 0, 0, 0.25) !important; border-color: var(--dark-border) !important; color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .modal-title, [data-bs-theme="dark"] .dropdown-header { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .dropdown-item { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .dropdown-item:hover,[data-bs-theme="dark"] .dropdown-item:active { background-color: var(--dark-surface-hover) !important; color: var(--brand-light) !important; }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--dark-border) !important; }

[data-bs-theme="dark"] .btn-light { background-color: var(--dark-surface-hover) !important; color: var(--dark-text-main) !important; border-color: var(--dark-border) !important; }
[data-bs-theme="dark"] .btn-light:hover, [data-bs-theme="dark"] .btn-pro:hover { background-color: #262b3d !important; color: #ffffff !important; border-color: #384059 !important; }
[data-bs-theme="dark"] .btn-light:focus, [data-bs-theme="dark"] .btn-light.active { background-color: #2f354a !important; color: #ffffff !important; box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.05) !important; }
[data-bs-theme="dark"] .btn-outline-secondary { border-color: var(--dark-text-muted) !important; color: var(--dark-text-muted) !important; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: var(--dark-text-muted) !important; color: #000 !important; }

[data-bs-theme="dark"] .notice h3, [data-bs-theme="dark"] .notice span { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .notice-info { background: rgba(142, 45, 226, 0.1) !important; border-color: rgba(142, 45, 226, 0.3) !important; }
[data-bs-theme="dark"] .notice-warning { background: rgba(255, 168, 0, 0.1) !important; border-color: rgba(255, 168, 0, 0.3) !important; }

[data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-transparent.bg-white { background-color: var(--dark-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--dark-surface-hover) !important; }
[data-bs-theme="dark"] .border,[data-bs-theme="dark"] .pro-table-wrapper,[data-bs-theme="dark"] .pro-header,[data-bs-theme="dark"] .pro-row, [data-bs-theme="dark"] .pro-cell, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end, [data-bs-theme="dark"] hr { border-color: var(--dark-border) !important; }

[data-bs-theme="dark"] .hover-bg-light { background-color: transparent !important; color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .hover-bg-light:hover { background-color: var(--dark-surface-hover) !important; color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .tab-link.active::after {background:var(--dark-text-main) !important;}

[data-bs-theme="dark"] .player audio { background: var(--dark-surface) !important; border-top: 1px solid var(--dark-border) !important; }
[data-bs-theme="dark"] .img button, [data-bs-theme="dark"] img:focus-visible { background: var(--dark-surface-hover) !important; }

[data-bs-theme="dark"] .page-link { background: var(--dark-surface-hover) !important; border-color: var(--dark-border) !important; color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .page-item.active .page-link { background: var(--brand-gradient) !important; border: none; color: #fff !important; }

[data-bs-theme="dark"] a { color: var(--dark-accent) !important; transition: color 0.2s ease-in-out; }
[data-bs-theme="dark"] a:hover { color: #d1a3ff !important; }

[data-bs-theme="dark"] .small, [data-bs-theme="dark"] small { color: var(--dark-text-muted) !important; }
[data-bs-theme="dark"] .bg-primary small, [data-bs-theme="dark"] .bg-primary .small { color: rgba(255, 255, 255, 0.95) !important; }
[data-bs-theme="dark"] small.text-white, [data-bs-theme="dark"] .small.text-white, [data-bs-theme="dark"] .text-white { color: #ffffff !important; }

/* Select2 Dark Theme Fix & Hide Scrollbar */
[data-bs-theme="dark"] .select2-dropdown { background: var(--dark-surface) !important; border: 1px solid var(--dark-border) !important; }
[data-bs-theme="dark"] .select2-search__field, [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { background: var(--dark-input-bg) !important; border: 1px solid var(--dark-border) !important; color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .select2-results__option { color: var(--dark-text-main) !important; }
[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected], [data-bs-theme="dark"] .select2-results__option[aria-selected="true"] { background: var(--brand-gradient) !important; color: #fff !important; }


/* =========================================
   11. MEDIA QUERIES (Responsive Design)
   ========================================= */
@media (max-width: 992px) {
    body .header, body.header-fixed .header { padding-left: 0 !important; width: 100% !important; margin-left: 0px; }
    #main { margin: 0 0; }
    .sidebar { transform: translateX(-100%); opacity: 1; }
}

@media (max-width: 768px) {
    .notice .content { flex-wrap: wrap; }
    #artworkimg, #artworkimg2 { width: 85% !important; height: auto !important; max-width: 400px; }
    .notice .content .btn { margin-top: 4px; }
    .notice .content h3 { margin-bottom: 4px; }
}

@media (max-width: 600px) {
    #albumThumb { width: 100%; margin-right: 0; margin-bottom: 20px; }
    .sidebar-show .header { margin-left: 0; }
}


/* =========================================
   KME NETWORK PREMIUM UI OVERRIDE
   ========================================= */

:root {
    --ui-bg: #f5f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-surface-hover: #f1f5f9;
    --ui-border: #e4e9f1;
    --ui-border-strong: #d5dde8;
    --ui-text: #172033;
    --ui-muted: #687589;
    --ui-primary: #6d28d9;
    --ui-primary-strong: #4c1d95;
    --ui-primary-soft: #f3e8ff;
    --ui-success: #15803d;
    --ui-warning: #b45309;
    --ui-danger: #b91c1c;
    --ui-radius-sm: 8px;
    --ui-radius: 10px;
    --ui-radius-lg: 12px;
    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --ui-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    --ui-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.10);
}

[data-bs-theme="light"] {
    --bs-body-bg: var(--ui-bg);
    --bs-body-color: var(--ui-muted);
}

body {
    background: var(--ui-bg);
    color: var(--ui-muted);
    letter-spacing: 0;
}

#main {
    background: var(--ui-bg) !important;
    padding-bottom: 2rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ui-text);
    letter-spacing: 0;
}

p, .text-muted {
    color: var(--ui-muted) !important;
}

.light-text,
.light-text a {
    color: var(--ui-muted) !important;
}

.dark-text,
.dark-text a {
    color: var(--ui-text) !important;
}

a {
    color: var(--ui-primary);
}

a:hover {
    color: var(--ui-primary-strong);
}

.header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.header .link,
.header .btn-light {
    border-radius: var(--ui-radius);
}

.header .link:hover,
.header .btn-light:hover {
    background: var(--ui-surface-hover) !important;
}

.topbar-shell {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
}

.topbar-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.topbar-title span {
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.topbar-title strong {
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.header-icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    color: var(--ui-text);
    position: relative;
}

.header-icon-btn i {
    font-size: 1rem;
    line-height: 1;
}

.header-icon-btn:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-primary-strong);
    border-color: var(--ui-border-strong);
}

.header-create-btn {
    border-style: dashed !important;
    gap: 0.45rem;
    align-items: center;
}

.sidebar {
    background: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02);
}

.sidebar-brand {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ui-border);
    padding: 0 1rem;
}

.app-brand {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-logo {
    height: 42px;
    max-width: 190px;
    object-fit: contain;
}

.sidebar .sidebar-inner {
    padding: 0.75rem;
}

.sidebar .sidebar-inner ul li {
    margin: 0 0 0.25rem;
}

.sidebar .sidebar-inner ul li a {
    min-height: 42px;
    border-radius: var(--ui-radius);
    color: #445166;
    font-size: 0.94rem;
    font-weight: 550;
    gap: 0.7rem;
    padding: 0.58rem 0.75rem;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sidebar .sidebar-inner ul li a:hover,
.sidebar .sidebar-inner ul li.open > a,
.sidebar .sidebar-inner ul li a:focus {
    background: var(--ui-surface-hover);
    color: var(--ui-primary);
}

.sidebar .sidebar-inner ul li a.active {
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
    border-left: 3px solid var(--ui-primary);
    border-right: 0;
    box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.08);
}

.sidebar .material-icons {
    color: currentColor;
    font-size: 19px !important;
}

.sidebar .sidebar-inner ul li ul.sub-menu {
    margin: 0.15rem 0 0.45rem 0.5rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--ui-border);
}

.sidebar .sidebar-inner ul li ul.sub-menu a {
    min-height: 34px;
    font-size: 0.86rem;
    padding: 0.35rem 0.6rem;
}

.sidebar-footer {
    margin-top: auto;
    padding: 0.75rem;
}

.logout-btn {
    border-radius: var(--ui-radius) !important;
}

.profile-trigger {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 50%;
    background: var(--ui-surface);
    padding: 2px;
}

.profile-trigger img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.profile-trigger:hover {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10);
}

.profile-menu {
    min-width: 240px !important;
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem 0.8rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--ui-border);
}

.profile-summary img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
}

.profile-summary strong,
.profile-summary span {
    display: block;
}

.profile-summary strong {
    max-width: 150px;
    color: var(--ui-text);
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-summary span {
    color: var(--ui-muted);
    font-size: 0.72rem;
    margin-top: 0.15rem;
}

.card,
.bg-white,
.table-card,
.modal-content,
.toast,
.popover {
    background-color: var(--ui-surface) !important;
}

.card {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
    border-color: var(--ui-border-strong) !important;
    box-shadow: var(--ui-shadow) !important;
}

.card-header {
    min-height: 44px;
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-text);
    padding: 0.8rem 1rem;
}

.card-body {
    padding: 1rem;
}

.bg-light {
    background-color: var(--ui-surface-soft) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--ui-border) !important;
}

.rounded,
.rounded-top,
.rounded-bottom {
    border-radius: var(--ui-radius) !important;
}

.notice {
    background: var(--ui-surface);
    border-radius: var(--ui-radius-lg) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm);
}

.notice-info {
    background: #fbf7ff;
    border-color: #d8b4fe !important;
}

.notice-warning {
    background: #fffbeb;
    border-color: #fcd34d !important;
}

.status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    height: auto;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0;
}

.draft {
    background: #eef2f7;
    color: #475569;
    border-color: #cbd5e1;
}

.in-review,
.pending {
    background: #fff7ed;
    color: var(--ui-warning);
    border-color: #fdba74 !important;
}

.approved,
.submitted,
.submited {
    background: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
    border-color: #c4b5fd !important;
}

.delivered,
.live {
    background: #ecfdf3;
    color: var(--ui-success);
    border-color: #86efac !important;
}

.removed,
.rejected {
    background: #fef2f2;
    color: var(--ui-danger);
    border-color: #fca5a5 !important;
}

.btn {
    min-height: 38px;
    border-radius: var(--ui-radius);
    font-weight: 650;
    letter-spacing: 0;
    padding: 0.42rem 0.85rem;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-sm {
    min-height: 30px;
    border-radius: var(--ui-radius-sm);
    padding: 0.25rem 0.6rem;
}

.btn-lg {
    min-height: 44px;
}

.btn.btn-primary,
.btn-primary,
.bg-primary,
.progress-bar {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong)) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.btn.btn-primary:hover,
.btn-primary:hover {
    box-shadow: 0 8px 18px rgba(109, 40, 217, 0.22) !important;
}

.btn.btn-dark {
    background: #172033 !important;
    border-color: #172033 !important;
    color: #fff !important;
}

.btn.btn-light,
.btn-light {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}

.btn.btn-light:hover,
.btn-light:hover {
    background: var(--ui-surface-hover) !important;
    border-color: var(--ui-border-strong) !important;
}

.form-control,
.form-select,
select.form-control,
.artist-tag-container,
.bootstrap-tagsinput,
.select2-container .select2-selection {
    min-height: 40px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-border) !important;
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.artist-tag-container:focus-within,
.select2-container--focus .select2-selection {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10) !important;
}

form label {
    color: #526076;
    font-size: 0.78rem;
    font-weight: 700;
    margin-left: 0;
}

.dropdown-menu {
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
    padding: 0.45rem;
}

.dropdown-item {
    min-height: 38px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    gap: 0.7rem;
}

.dropdown-item:hover,
.dropdown-item:active {
    background: var(--ui-surface-hover) !important;
    color: var(--ui-primary-strong) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ui-text);
    --bs-table-border-color: var(--ui-border);
    --bs-table-striped-bg: #f8fafc;
    --bs-table-hover-bg: #f6f8fc;
    border-collapse: separate;
    border-spacing: 0;
}

.table td,
.table th {
    padding: 0.72rem 0.8rem;
    vertical-align: middle;
}

.table thead th {
    background: var(--ui-surface-soft);
    color: #526076;
    border-bottom: 1px solid var(--ui-border);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.table.table-hover tbody tr {
    transition: background-color 0.16s ease;
}

.list-group-item {
    border-color: var(--ui-border);
}

.nav-tabs {
    border-bottom-color: var(--ui-border);
}

.nav-tabs .nav-link {
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
}

.nav-link {
    color: #526076;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active,
.tab-link.active {
    color: var(--ui-primary-strong);
}

.tab-link {
    font-size: 0.92rem;
    padding: 0.65rem 1rem;
}

.page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
}

.page-item.active .page-link,
.page-link:hover {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #ffffff !important;
}

.modal-content,
.popover,
.toast {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-lg);
}

.modal-header,
.modal-footer,
.toast-header,
.popover-header {
    border-color: var(--ui-border);
}

.modal-title {
    color: var(--ui-text);
    font-weight: 750;
}

.product-modal {
    overflow: hidden;
}

.product-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.modal-eyebrow {
    display: block;
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.product-modal-body {
    padding: 1rem 1.1rem;
}

.product-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    background: var(--ui-surface-soft);
}

.artist-tag-container {
    min-height: 42px;
    height: auto;
}

.artist-search {
    color: var(--ui-text);
    min-width: 150px;
    outline: none;
}

.pre-loaded-artist {
    min-height: 28px;
    border-radius: 999px;
}

.floating-player {
    width: 460px;
    max-width: calc(100vw - 40px);
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 9999;
    display: none;
    transform: translateX(-50%);
    cursor: grab;
    user-select: none;
}

.floating-player-inner {
    position: relative;
    padding: 0.85rem;
    color: var(--ui-text);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    box-shadow: var(--ui-shadow-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.floating-player-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.player-play-btn,
.player-close-btn {
    border: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.player-play-btn {
    width: 42px;
    height: 42px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-strong));
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.28);
}

.player-play-btn i {
    font-size: 1.35rem;
    margin-left: 2px;
}

.player-track-meta {
    min-width: 0;
    flex: 1;
}

.player-track-title {
    color: var(--ui-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
}

.player-track-artist {
    color: var(--ui-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.player-close-btn {
    width: 32px;
    height: 32px;
    color: var(--ui-muted);
    background: var(--ui-surface-soft);
    border-radius: 50%;
}

.player-close-btn:hover {
    color: var(--ui-text);
    background: var(--ui-surface-hover);
}

.player-progress-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.8rem 0.2rem 0;
}

.player-progress-track {
    height: 7px;
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    background: #e8edf5;
    border-radius: 999px;
}

.player-progress-fill {
    height: 100%;
    border-radius: 999px;
    pointer-events: none;
}

.player-time {
    min-width: 38px;
    color: var(--ui-text);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
}

.player-scan-row {
    margin-top: 0.75rem;
    text-align: center;
}

.player-scan-results {
    margin-top: 0.5rem;
    padding: 0;
    border-radius: var(--ui-radius);
}

.pro-table-wrapper {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius-lg) !important;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.pro-header {
    background: var(--ui-surface-soft) !important;
    color: #526076;
    letter-spacing: 0;
}

.pro-row {
    background: var(--ui-surface);
    border-color: var(--ui-border) !important;
}

.pro-row:hover {
    background: #f8fafc;
}

.pro-label {
    color: var(--ui-muted);
}

.album-container,
.transition-hover img {
    border-radius: var(--ui-radius-lg) !important;
}

.album-container {
    background: var(--ui-surface-soft);
    box-shadow: inset 0 0 0 1px var(--ui-border);
}

.breadcrumb ol {
    color: var(--ui-muted);
}

.breadcrumb li.active {
    color: var(--ui-text);
    font-weight: 650;
}

.badge-count {
    top: -3px;
    right: -3px;
    background: #dc2626;
    box-shadow: 0 0 0 2px var(--ui-surface);
}

.icon-box {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius);
    background: var(--ui-surface-soft);
}

.transition-hover {
    border-radius: var(--ui-radius-lg);
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.transition-hover:hover {
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.dashboard-page {
    padding: 1rem;
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-eyebrow,
.dashboard-section-header span,
.dashboard-stat span {
    color: var(--ui-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-hero h2 {
    margin: 0.2rem 0;
    font-size: 1.35rem;
}

.dashboard-hero p {
    margin: 0;
    font-size: 0.9rem;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-stat {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
}

a.dashboard-stat:hover {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow);
}

.dashboard-stat strong {
    display: block;
    color: var(--ui-text);
    font-size: 2rem;
    font-weight: 850;
    line-height: 1;
    margin-top: 0.4rem;
}

.dashboard-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.dashboard-user img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--ui-border);
}

.dashboard-user strong {
    max-width: 100%;
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-notice {
    margin-bottom: 1rem;
}

.dashboard-section {
    margin-top: 1rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--ui-surface-soft);
    border-bottom: 1px solid var(--ui-border);
}

.dashboard-section-header h4 {
    margin: 0.15rem 0 0;
    font-size: 1rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.product-list {
    display: grid;
    gap: 0;
    padding: 0;
}

.product-list-head {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(180px, 1fr) 88px 110px;
    gap: 1.25rem;
    padding: 0.85rem 1.25rem;
    color: var(--ui-muted);
    background: #fafbfd;
    border-bottom: 1px solid var(--ui-border);
    font-size: 0.71rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(180px, 1fr) 88px 110px;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.25rem;
    color: var(--ui-text) !important;
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    transition: background-color 0.18s ease;
}

.product-row:hover {
    color: var(--ui-text) !important;
    background: var(--ui-surface-soft);
}

.product-row:last-child {
    border-bottom: 0;
}

.product-row-product {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.product-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
}

.product-row-art {
    width: 56px;
    min-width: 56px;
    height: 56px;
    display: block;
    overflow: hidden;
    border-radius: 10px !important;
    background: var(--ui-surface-soft);
    box-shadow: inset 0 0 0 1px var(--ui-border);
}

.product-row-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.42s ease;
}

.product-row:hover .album-zoom {
    transform: scale(1.06);
}

.product-row-main strong {
    display: block;
    color: var(--ui-text);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-row-main small,
.product-row-meta,
.product-row-id {
    color: var(--ui-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.product-row-main small {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-row-meta {
    min-width: 0;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-row-id {
    color: var(--ui-text);
    font-weight: 700;
    text-align: right;
}

.product-row-status {
    display: flex;
    justify-content: flex-end;
}

.status {
    display: inline-flex;
    justify-content: center;
}

.product-row-status > .status {
    justify-self: end;
}

.product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--ui-text) !important;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    box-shadow: var(--ui-shadow-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.product-card:hover {
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow);
    transform: translateY(-2px);
}

.product-card-body {
    display: block;
    min-width: 0;
    padding: 0.75rem;
}

.product-card-body strong {
    display: block;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.28;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card:hover .product-card-body strong {
    color: var(--ui-primary-strong);
}

.product-card-body small {
    display: block;
    min-height: 1.1rem;
    color: var(--ui-muted);
    font-size: 0.76rem;
    margin-top: 0.28rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-card .album-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 0 !important;
}

.product-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.product-card:hover .album-zoom {
    transform: scale(1.08);
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.product-card-id {
    color: var(--ui-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.product-card-add {
    min-height: 100%;
    border: 1px dashed var(--ui-border-strong);
    background: var(--ui-surface-soft);
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.product-card-add:hover {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
}

.product-add-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    color: var(--ui-primary);
    border-radius: 0;
    background: var(--ui-surface);
    box-shadow: inset 0 0 0 1px var(--ui-border);
}

.product-add-icon i {
    font-size: 1.7rem;
}

.dashboard-empty,
.dashboard-empty-state {
    grid-column: 1 / -1;
}

.dashboard-empty {
    padding: 2.5rem 1rem;
    color: var(--ui-muted);
    text-align: center;
    background: var(--ui-surface-soft);
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius-lg);
}

.dashboard-empty-state {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.85rem;
    padding: 2rem;
    color: var(--ui-muted);
    text-align: center;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.92));
    border: 1px dashed var(--ui-border-strong);
    border-radius: var(--ui-radius-lg);
}

.dashboard-empty-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-primary);
    background: var(--ui-primary-soft);
    border-radius: 16px;
}

.dashboard-empty-icon i {
    font-size: 1.6rem;
}

.dashboard-empty-state h5 {
    margin: 0;
    color: var(--ui-text);
    font-size: 1rem;
}

.dashboard-empty-state p {
    max-width: 420px;
    margin: 0;
    color: var(--ui-muted);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

[data-bs-theme="dark"] {
    --ui-bg: #0b0f17;
    --ui-surface: #121826;
    --ui-surface-soft: #171f2f;
    --ui-surface-hover: #1d2638;
    --ui-border: #253149;
    --ui-border-strong: #33415d;
    --ui-text: #eef2f7;
    --ui-muted: #94a3b8;
    --ui-primary: #a78bfa;
    --ui-primary-strong: #c4b5fd;
    --ui-primary-soft: rgba(167, 139, 250, 0.13);
    --bs-body-bg: var(--ui-bg) !important;
    --bs-body-color: var(--ui-muted) !important;
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] #main {
    background: var(--ui-bg) !important;
    color: var(--ui-muted) !important;
}

[data-bs-theme="dark"] .header {
    background: rgba(18, 24, 38, 0.92) !important;
    border-bottom-color: var(--ui-border) !important;
}

[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .popover,
[data-bs-theme="dark"] .pro-table-wrapper,
[data-bs-theme="dark"] .pro-row {
    background-color: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .pro-header,
[data-bs-theme="dark"] .table thead th {
    background-color: var(--ui-surface-soft) !important;
}

[data-bs-theme="dark"] .sidebar .sidebar-inner ul li a {
    color: var(--ui-muted) !important;
}

[data-bs-theme="dark"] .sidebar .sidebar-inner ul li a:hover,
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li.open > a,
[data-bs-theme="dark"] .sidebar .sidebar-inner ul li a.active {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary-strong) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] .artist-tag-container,
[data-bs-theme="dark"] .bootstrap-tagsinput,
[data-bs-theme="dark"] .select2-container .select2-selection {
    background-color: #0f1724 !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-bs-theme="dark"] .btn.btn-light,
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .page-link {
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

[data-bs-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .table,
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-body {
    color: var(--ui-text) !important;
}

[data-bs-theme="dark"] .floating-player-inner {
    background: rgba(18, 24, 38, 0.94);
    border-color: var(--ui-border);
}

[data-bs-theme="dark"] .player-progress-track,
[data-bs-theme="dark"] .player-close-btn {
    background: var(--ui-surface-soft);
}

@media (max-width: 992px) {
    #main {
        padding-bottom: 5rem;
    }

    .sidebar .sidebar-inner {
        padding: 0.75rem;
    }

    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-stat-wide {
        grid-column: 1 / -1;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }

    .product-list-head {
        grid-template-columns: minmax(0, 1fr) 92px 96px;
    }

    .product-list-head span:nth-child(2),
    .product-row-meta {
        display: none;
    }

    .product-row {
        grid-template-columns: minmax(0, 1fr) 92px 96px;
    }

    .product-row-id {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .card {
        border-radius: var(--ui-radius) !important;
    }

    .btn {
        min-height: 36px;
    }

    .product-modal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-modal-header .btn {
        width: 100%;
    }

    .floating-player {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        bottom: 12px;
    }

    .dashboard-page {
        padding: 0.75rem;
    }

    .dashboard-hero,
    .dashboard-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-hero .btn,
    .dashboard-section-header .btn {
        width: 100%;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-stat {
        min-height: 92px;
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .product-list {
        gap: 0.65rem;
        padding: 0.75rem;
        background: var(--ui-surface-soft);
    }

    .product-list-head {
        display: none;
    }

    .product-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        align-items: center;
        padding: 0.75rem;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius);
        background: var(--ui-surface);
    }

    .product-row-status {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .product-row-art {
        width: 48px;
        height: 48px;
    }

    .product-row-product {
        grid-column: 1;
        grid-row: 1 / span 2;
        gap: 0.65rem;
    }

    .product-row-id {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right;
    }

    .product-card-body {
        padding: 0.65rem;
    }

    .product-card-body strong {
        font-size: 0.84rem;
    }

    .product-card-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}