/* =====================================================================
   DV9 FRANCHISE PANEL — ATTRACTIVE PROFESSIONAL THEME (SKIN ONLY)
   ---------------------------------------------------------------------
   Clean white base + refined indigo accent + soft depth, gradient
   buttons, polished cards. Layered on the existing Gentelella +
   Bootstrap 3 markup. Appearance only — no id/name/class/binding/JS/
   controller/DB changes. The sidebar is recolor-ONLY so Gentelella's
   expand/collapse mechanics stay perfectly intact.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root {
    --dv-bg:            #F4F6FB;
    --dv-surface:       #FFFFFF;
    --dv-surface-alt:   #F8FAFD;
    --dv-border:        #E9EDF5;
    --dv-border-strong: #D7DEEA;

    --dv-primary:       #5B53E8;
    --dv-primary-600:   #4B43DC;
    --dv-primary-700:   #3E37BE;
    --dv-primary-soft:  #EEEDFD;
    --dv-primary-line:  #DAD8FB;
    --dv-grad:          linear-gradient(135deg, #6D63F2 0%, #5B53E8 100%);

    --dv-success: #12B76A; --dv-success-soft: #E7F8F0;
    --dv-danger:  #F04438; --dv-danger-soft:  #FEECEB;
    --dv-warning: #F79009; --dv-warning-soft: #FEF3E2;
    --dv-info:    #1597E5; --dv-info-soft:    #E7F4FD;

    --dv-text:       #16203A;
    --dv-text-body:  #46506A;
    --dv-text-muted: #8A93A8;

    --dv-radius-sm: 9px;
    --dv-radius:    13px;
    --dv-radius-lg: 16px;
    --dv-radius-pill: 999px;

    --dv-shadow-xs: 0 1px 2px rgba(20,28,52,.05);
    --dv-shadow-sm: 0 2px 6px rgba(20,28,52,.06);
    --dv-shadow:    0 8px 24px -8px rgba(20,28,52,.14), 0 2px 6px rgba(20,28,52,.05);
    --dv-shadow-lg: 0 20px 48px -16px rgba(20,28,52,.22);
    --dv-ring:      0 0 0 3px rgba(91,83,232,.18);

    --dv-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --dv-font-display: "Poppins", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --dv-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- BASE ---------- */
html { -webkit-text-size-adjust: 100%; }
body, body.nav-md, body.nav-sm {
    font-family: var(--dv-font-ui) !important;
    color: var(--dv-text-body) !important;
    background: var(--dv-bg) !important;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.container.body { background: var(--dv-bg) !important; }
.main_container, .right_col, body .right_col { background: var(--dv-bg) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--dv-font-display) !important; color: var(--dv-text) !important; font-weight: 600 !important; letter-spacing: -.01em; }
a { color: var(--dv-primary); transition: color .15s var(--dv-ease); }
a:hover, a:focus { color: var(--dv-primary-700); text-decoration: none; }
::selection { background: rgba(91,83,232,.16); }
* { scrollbar-width: thin; scrollbar-color: #CBD2DF transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #CBD2DF; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #B2BACB; background-clip: content-box; }
.cssload-speeding-wheel { border-top-color: var(--dv-primary) !important; border-bottom-color: var(--dv-primary) !important; }

/* ---------- SIDEBAR (recolor only — layout untouched) ---------- */
.left_col, .col-md-3.left_col { background: var(--dv-surface) !important; border-right: 1px solid var(--dv-border) !important; box-shadow: 1px 0 0 rgba(20,28,52,.02) !important; }
.left_col .scroll-view, .left_col.scroll-view { background: transparent !important; }
.nav_title { background: transparent !important; border: 0 !important; box-shadow: inset 0 -1px 0 var(--dv-border); }
.site_title, .site_title:hover, .site_title:focus { color: var(--dv-text) !important; font-family: var(--dv-font-display) !important; font-weight: 600 !important; font-size: 16px !important; border: 0 !important; }
.site_title i { background: var(--dv-grad) !important; color: #fff !important; width: 32px; height: 32px; line-height: 32px !important; text-align: center; border-radius: 9px; margin-right: 10px !important; font-size: 15px; box-shadow: 0 6px 14px -4px rgba(91,83,232,.6); }
.profile.clearfix { padding-top: 14px !important; }
.profile .img-circle.profile_img, .profile_img { border: 2px solid #fff !important; box-shadow: var(--dv-shadow-sm) !important; object-fit: cover; }
.profile_info span { color: var(--dv-text-muted) !important; }
.profile_info h2 { color: var(--dv-text) !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--dv-font-ui) !important; }
#clock { color: var(--dv-text-muted) !important; }
#dvWallet { margin: 6px 12px 12px !important; padding: 12px 14px !important; background: var(--dv-grad) !important; border: 0 !important; border-radius: var(--dv-radius); color: #fff !important; line-height: 1.3; position: relative; box-shadow: 0 8px 18px -8px rgba(91,83,232,.5); overflow: hidden; }
#dvWallet::before { content: "\f0d6"; font-family: FontAwesome; position: absolute; right: 10px; top: 10px; font-size: 26px; color: rgba(255,255,255,.22); }
#dvWallet b { color: #fff !important; font-weight: 600 !important; font-size: 14px; display: block; letter-spacing: .2px; }
/* keep the sidebar tidy when collapsed */
.nav-sm #dvWallet { margin: 6px 8px !important; padding: 10px 0 !important; text-align: center; font-size: 0 !important; }
.nav-sm #dvWallet::before { position: static; display: block; font-size: 22px; color: #fff; }
.nav-sm #dvWallet b { display: none !important; }
.menu_section h3 { color: var(--dv-text-muted) !important; letter-spacing: .1em; }

/* menu links: recolor + radius only, NO flex/width changes */
.nav.side-menu > li > a { color: var(--dv-text-body) !important; font-family: var(--dv-font-ui) !important; font-weight: 500 !important; border-radius: 9px; transition: background .15s var(--dv-ease), color .15s var(--dv-ease) !important; }
.nav-md .nav.side-menu > li > a { margin: 2px 10px; }
.nav.side-menu > li > a:hover { background: var(--dv-surface-alt) !important; color: var(--dv-text) !important; }
.nav.side-menu > li > a > .fa:first-child { color: var(--dv-text-muted); transition: color .15s var(--dv-ease); }
.nav.side-menu > li > a:hover > .fa:first-child { color: var(--dv-primary); }
.nav.side-menu li a .fa-chevron-down { opacity: .5; }
.nav.side-menu > li.active > a, .nav.side-menu > li.current-page > a { background: var(--dv-primary-soft) !important; color: var(--dv-primary-700) !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important; }
.nav-md .nav.side-menu > li.active > a, .nav-md .nav.side-menu > li.current-page > a { box-shadow: inset 3px 0 0 var(--dv-primary) !important; }
.nav.side-menu > li.active > a .fa, .nav.side-menu > li.current-page > a .fa { color: var(--dv-primary) !important; }
.nav-md .nav.child_menu { background: transparent !important; }
.nav.child_menu li a, .nav.child_menu > li > a { color: var(--dv-text-muted) !important; border-radius: 8px; transition: background .15s var(--dv-ease), color .15s var(--dv-ease); }
.nav.child_menu li:hover > a, .nav.child_menu li.active > a, .nav.child_menu li a:hover { background: var(--dv-surface-alt) !important; color: var(--dv-text) !important; }
.nav.child_menu li.active > a { color: var(--dv-primary-700) !important; font-weight: 600; }
.sidebar-footer { background: transparent !important; border-top: 1px solid var(--dv-border) !important; }
.sidebar-footer a { color: var(--dv-text-muted) !important; }
.sidebar-footer a:hover { background: var(--dv-surface-alt) !important; color: var(--dv-danger) !important; }

/* ---------- TOP NAV ---------- */
.top_nav { background: transparent !important; }
.top_nav .nav_menu { background: var(--dv-surface) !important; border: 0 !important; border-bottom: 1px solid var(--dv-border) !important; box-shadow: var(--dv-shadow-xs); }
.top_nav .nav.toggle a, #menu_toggle { color: var(--dv-text-body) !important; background: var(--dv-surface-alt); border: 1px solid var(--dv-border); width: 40px; height: 40px; line-height: 40px !important; text-align: center; border-radius: 10px; margin: 12px 0 12px 14px !important; cursor: pointer; transition: all .15s var(--dv-ease); }
.top_nav .nav.toggle a:hover, #menu_toggle:hover { background: var(--dv-primary-soft); color: var(--dv-primary) !important; border-color: var(--dv-primary-line); }
.top_nav .navbar-right { margin-right: 14px !important; }
.user-profile, .top_nav .navbar-right li a.user-profile { color: var(--dv-text) !important; font-weight: 500 !important; font-size: 13.5px !important; padding: 7px 13px !important; border-radius: var(--dv-radius-pill) !important; background: var(--dv-surface-alt); border: 1px solid var(--dv-border); display: inline-flex !important; align-items: center; gap: 8px; transition: all .15s var(--dv-ease); }
.user-profile:hover { background: var(--dv-primary-soft); border-color: var(--dv-primary-line); }
.user-profile img { width: 30px !important; height: 30px !important; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--dv-shadow-xs); margin: 0 !important; }
.user-profile .fa-angle-down { color: var(--dv-text-muted); }
.dropdown-usermenu, .top_nav .dropdown-menu { border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius) !important; box-shadow: var(--dv-shadow) !important; padding: 6px !important; margin-top: 8px !important; min-width: 200px; }
.top_nav .dropdown-menu li a { color: var(--dv-text-body) !important; border-radius: 8px !important; padding: 9px 12px !important; font-size: 13px; transition: background .12s var(--dv-ease); }
.top_nav .dropdown-menu li a:hover { background: var(--dv-primary-soft) !important; color: var(--dv-primary) !important; }
.top_nav .dropdown-menu li a i { color: var(--dv-text-muted); }

/* ---------- CARDS ---------- */
.x_panel { background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius-lg) !important; box-shadow: var(--dv-shadow-sm) !important; padding: 22px 24px !important; margin-bottom: 22px !important; transition: box-shadow .25s var(--dv-ease), transform .25s var(--dv-ease); }
.x_panel:hover { box-shadow: var(--dv-shadow) !important; }
.x_title { border-bottom: 1px solid var(--dv-border) !important; margin-bottom: 18px !important; padding-bottom: 13px !important; position: relative; }
.x_title h2 { font-family: var(--dv-font-display) !important; font-weight: 600 !important; font-size: 17px !important; color: var(--dv-text) !important; line-height: 1.3; float: left; padding-left: 12px; }
.x_title h2::before { content: ""; position: absolute; left: 0; top: 1px; width: 4px; height: 19px; background: var(--dv-grad); border-radius: 999px; }
.x_title h2 small { color: var(--dv-text-muted) !important; font-weight: 400; }
.x_title span { color: var(--dv-text-muted) !important; }
.panel_toolbox > li > a { color: var(--dv-text-muted) !important; background: var(--dv-surface-alt); border-radius: 8px; width: 30px; height: 28px; line-height: 28px; text-align: center; display: inline-block; transition: all .15s var(--dv-ease); }
.panel_toolbox > li > a:hover { background: var(--dv-primary-soft); color: var(--dv-primary) !important; }
/* hide the card header collapse/close icon (top-right of panels) */
.panel_toolbox, .panel_toolbox > li, .collapse-link, .close-link, .x_title .collapse-link, a.collapse-link, a.close-link { display: none !important; }
/* trim the empty top gap above page content */
.right_col { padding-top: 14px !important; }
/* flexbox sticky footer: footer always at the bottom, content fills the rest — no bottom gap on any page */
.main_container { display: flex !important; flex-direction: column !important; min-height: 100vh !important; position: relative !important; }
.main_container > .top_nav { flex: 0 0 auto !important; }
.main_container > .right_col { flex: 1 0 auto !important; }
.main_container > footer { flex: 0 0 auto !important; }
.nav-md .container.body .right_col, .nav-sm .container.body .right_col { min-height: 0 !important; height: auto !important; }
.right_col > .row:first-child { margin-top: 0 !important; }
/* fixed sidebar: stays in place while content scrolls; full height with its own scroll */
.nav-md .container.body .col-md-3.left_col { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; min-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 999; }
.nav-sm .container.body .col-md-3.left_col { position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; min-height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; z-index: 9999; }
/* collapsed submenu = themed, fixed, scrollable panel next to the icon rail (light theme, not dark) */
/* first-level collapsed submenu = themed, vertically-centered, scrollable panel */
.nav-sm .nav.side-menu > li > ul.nav.child_menu { position: fixed !important; left: 70px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; width: 224px !important; max-height: calc(100vh - 24px) !important; overflow-y: auto !important; background: var(--dv-surface) !important; border: 1px solid var(--dv-border) !important; border-left: 3px solid var(--dv-primary) !important; box-shadow: var(--dv-shadow-lg) !important; border-radius: 0 10px 10px 0 !important; z-index: 10001 !important; padding: 6px 0 !important; }
/* nested (3rd level) submenu opens INLINE right under its parent, inside the scrollable panel */
.nav-sm ul.nav.child_menu ul.nav.child_menu { position: static !important; left: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; max-height: none !important; overflow: visible !important; background: var(--dv-primary-soft) !important; border: 0 !important; box-shadow: none !important; border-radius: 8px !important; margin: 2px 8px !important; padding: 2px 0 !important; }
.nav-sm ul.nav.child_menu ul.nav.child_menu li a { padding-left: 30px !important; font-size: 12.5px !important; }
.nav-sm ul.nav.child_menu li { padding: 0 !important; border: 0 !important; }
.nav-sm ul.nav.child_menu li a { color: var(--dv-text-body) !important; text-align: left !important; padding: 10px 18px !important; font-size: 13px !important; border-radius: 8px; margin: 1px 8px; }
.nav-sm ul.nav.child_menu li a:hover, .nav-sm ul.nav.child_menu li.current-page a, .nav-sm ul.nav.child_menu li.active a { background: var(--dv-primary-soft) !important; color: var(--dv-primary-700) !important; }
.nav-sm .left_col::-webkit-scrollbar, .nav-sm ul.nav.child_menu::-webkit-scrollbar { width: 6px; } .nav-sm ul.nav.child_menu::-webkit-scrollbar-thumb { background: rgba(20,28,52,.18); border-radius: 8px; }
.left_col::-webkit-scrollbar { width: 6px; } .left_col::-webkit-scrollbar-thumb { background: rgba(20,28,52,.18); border-radius: 8px; }
/* offset footer so it doesn't sit under the fixed sidebar (nav-md = 230px sidebar) */
.nav-md .container.body footer { margin-left: 230px !important; }
.nav-sm .container.body footer { margin-left: 70px !important; }
.x_content { padding: 0 !important; margin-top: 4px; color: var(--dv-text-body) !important; }
.x_content h4 { color: var(--dv-text) !important; font-weight: 600; }
.x_panel .x_panel { border-radius: var(--dv-radius) !important; box-shadow: var(--dv-shadow-xs) !important; overflow: hidden; position: relative; padding: 16px 18px !important; border-top: 3px solid var(--dv-primary) !important; }
.x_panel .x_panel:hover { transform: translateY(-3px); box-shadow: var(--dv-shadow) !important; }
.x_panel .x_panel .x_title { border: 0 !important; margin-bottom: 8px !important; padding-bottom: 0 !important; }
.x_panel .x_panel .x_title h2::before { display: none !important; }
.x_panel .x_panel .x_title h2, .x_panel .x_panel .x_title b, .x_panel .x_panel .x_title { font-family: var(--dv-font-ui) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--dv-text-muted) !important; text-transform: uppercase; letter-spacing: .04em; padding-left: 0 !important; }
.x_panel .x_panel .x_content { font-family: var(--dv-font-display) !important; font-size: 23px !important; font-weight: 700 !important; color: var(--dv-text) !important; line-height: 1.2; }
.x_panel .x_panel .x_content p, .x_panel .x_panel .x_content div, .x_panel .x_panel .x_content span, .x_panel .x_panel .x_content b { font-size: inherit !important; color: inherit !important; font-weight: inherit !important; margin: 0 !important; }
.ln_solid { border-top: 1px solid var(--dv-border) !important; margin: 18px 0 !important; }

/* ---------- FORMS ---------- */
.control-label, label.control-label, .form-horizontal label, .x_content form label { color: var(--dv-text) !important; font-weight: 500 !important; font-size: 13px !important; }
.form-group { margin-bottom: 16px !important; }
.form-control { border: 1px solid var(--dv-border-strong) !important; border-radius: var(--dv-radius-sm) !important; background: var(--dv-surface) !important; color: var(--dv-text) !important; font-size: 13.5px !important; height: 42px !important; padding: 9px 13px !important; box-shadow: none !important; transition: border-color .15s var(--dv-ease), box-shadow .15s var(--dv-ease) !important; }
textarea.form-control { height: auto !important; min-height: 90px; }
.form-control::placeholder { color: var(--dv-text-muted) !important; }
.form-control:focus { border-color: var(--dv-primary) !important; box-shadow: var(--dv-ring) !important; background: #fff !important; }
.form-control[readonly], .input-readonly, input[readonly] { background: var(--dv-surface-alt) !important; color: var(--dv-text-muted) !important; cursor: not-allowed; }
.form-control[disabled], select[disabled] { background: #F1F3F8 !important; opacity: .85; }
select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A93A8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 13px center !important; padding-right: 34px !important; }
.required, span.required { color: var(--dv-danger) !important; font-weight: 600; }
.has-error .form-control { border-color: var(--dv-danger) !important; }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(240,68,56,.15) !important; }
label.error, .parsley-errors-list li { color: var(--dv-danger) !important; font-size: 12px; font-weight: 500; }

/* section sub-headers written as <label class="control-label"><u>...</u></label> */
.x_content label.control-label u, .x_content label u { text-decoration: none !important; display: inline-block; color: var(--dv-primary-700) !important; font-family: var(--dv-font-display) !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: .01em; padding-bottom: 6px; border-bottom: 2px solid var(--dv-primary-line); margin-bottom: 6px; }

/* image upload / preview boxes (an <img> carrying .form-control) — render as a proper upload zone, not a thin input bar */
img.form-control { height: 96px !important; width: 100% !important; padding: 4px !important; object-fit: contain; background: var(--dv-surface-alt) !important; border: 1.5px dashed var(--dv-border-strong) !important; border-radius: var(--dv-radius) !important; cursor: pointer; box-shadow: none !important; transition: border-color .15s var(--dv-ease), background .15s var(--dv-ease) !important; }
img.form-control:hover { border-color: var(--dv-primary) !important; background: var(--dv-primary-soft) !important; }

/* ---------- BUTTONS (gradient + depth) ---------- */
.btn { font-family: var(--dv-font-ui) !important; font-weight: 600 !important; font-size: 13.5px !important; border-radius: var(--dv-radius-sm) !important; padding: 9px 18px !important; border: 1px solid transparent !important; box-shadow: var(--dv-shadow-xs); transition: transform .15s var(--dv-ease), box-shadow .2s var(--dv-ease), background .2s var(--dv-ease), filter .2s var(--dv-ease) !important; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus, .btn:focus-visible { outline: none; box-shadow: var(--dv-ring) !important; }
.btn .fa { margin-right: 5px; }
.btn-primary { background: var(--dv-grad) !important; border-color: var(--dv-primary) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(91,83,232,.6) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .open > .dropdown-toggle.btn-primary { filter: brightness(1.05); background: var(--dv-grad) !important; border-color: var(--dv-primary-600) !important; color: #fff !important; }
.btn-success { background: linear-gradient(135deg, #2FD08A 0%, #12B76A 100%) !important; border-color: var(--dv-success) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(18,183,106,.55) !important; }
.btn-success:hover, .btn-success:focus, .btn-success:active { filter: brightness(1.04); color: #fff !important; }
.btn-danger { background: linear-gradient(135deg, #F76B62 0%, #F04438 100%) !important; border-color: var(--dv-danger) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { filter: brightness(1.04); color: #fff !important; }
.btn-warning { background: linear-gradient(135deg, #FBA94C 0%, #F79009 100%) !important; border-color: var(--dv-warning) !important; color: #fff !important; }
.btn-info { background: linear-gradient(135deg, #45B2F0 0%, #1597E5 100%) !important; border-color: var(--dv-info) !important; color: #fff !important; }
.btn-default { background: var(--dv-surface) !important; border-color: var(--dv-border-strong) !important; color: var(--dv-text-body) !important; box-shadow: var(--dv-shadow-xs); }
.btn-default:hover, .btn-default:focus, .btn-default:active { background: var(--dv-surface-alt) !important; border-color: #C4CCDA !important; color: var(--dv-text) !important; }
.btn-link { color: var(--dv-primary) !important; box-shadow: none !important; }
.btn-link:hover { color: var(--dv-primary-700) !important; }
.btn-xs { padding: 4px 10px !important; font-size: 12px !important; }
.btn-sm { padding: 6px 13px !important; font-size: 12.5px !important; }
.btn-lg { padding: 12px 24px !important; font-size: 15px !important; }

/* ---------- TABLES ---------- */
.table { background: var(--dv-surface) !important; border-radius: var(--dv-radius) !important; overflow: hidden; border-collapse: separate !important; border-spacing: 0; color: var(--dv-text-body) !important; font-size: 13px; }
.table > thead > tr > th { background: var(--dv-surface-alt) !important; color: var(--dv-text-muted) !important; font-family: var(--dv-font-ui) !important; font-weight: 600 !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--dv-border) !important; border-top: 0 !important; padding: 12px 15px !important; vertical-align: middle; }
.table > tbody > tr > td { border-top: 1px solid var(--dv-border) !important; padding: 12px 15px !important; vertical-align: middle; }
.table > tbody > tr { transition: background .12s var(--dv-ease); }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background: var(--dv-primary-soft) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #FBFCFE !important; }
.table-striped > tbody > tr:nth-of-type(odd):hover { background: var(--dv-primary-soft) !important; }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > thead > tr > th { border-color: var(--dv-border) !important; }
.dataTables_paginate .paginate_button { border-radius: 8px !important; border: 1px solid var(--dv-border) !important; padding: 5px 11px !important; margin: 0 2px; color: var(--dv-text-body) !important; background: var(--dv-surface) !important; }
.dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button:hover { background: var(--dv-grad) !important; color: #fff !important; border-color: var(--dv-primary) !important; }

/* ---------- GIJGO GRID LOADER (clean centered overlay + spinner) ---------- */
DIV.gj-grid-wrapper DIV.gj-grid-loading-cover { background: rgba(255,255,255,.72) !important; opacity: 1; -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); animation: dv-grid-autohide .5s linear 12s forwards; }
DIV.gj-grid-wrapper DIV.gj-grid-loading-cover::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid var(--dv-primary-soft); border-top-color: var(--dv-primary); border-radius: 50%; animation: dv-grid-spin .7s linear infinite; }
DIV.gj-grid-wrapper DIV.gj-grid-loading-text { display: none !important; }
@keyframes dv-grid-spin { to { transform: rotate(360deg); } }
/* safety net: if a grid request hangs (slow/failing backend), don't spin forever — fade the loader out after 12s */
@keyframes dv-grid-autohide { to { opacity: 0; visibility: hidden; } }

/* ---------- BADGES / LABELS / ALERTS ---------- */
.badge { border-radius: var(--dv-radius-pill) !important; font-weight: 600; font-size: 11px; padding: 4px 9px; background: var(--dv-text-muted); }
.label { border-radius: 999px !important; font-weight: 600; font-size: 11px; padding: 4px 10px; letter-spacing: .02em; }
.label-success, .bg-green { background: var(--dv-success-soft) !important; color: #0B7A48 !important; }
.label-danger,  .bg-red   { background: var(--dv-danger-soft) !important; color: #C0291F !important; }
.label-warning, .bg-orange{ background: var(--dv-warning-soft) !important; color: #B45309 !important; }
.label-info,    .bg-blue  { background: var(--dv-info-soft) !important; color: #0B6FB0 !important; }
.label-primary { background: var(--dv-primary-soft) !important; color: var(--dv-primary-700) !important; }
.alert { border-radius: var(--dv-radius) !important; border: 1px solid transparent; font-size: 13.5px; }
.alert-success { background: var(--dv-success-soft) !important; color: #0B7A48 !important; border-color: #BEEBD4 !important; }
.alert-danger  { background: var(--dv-danger-soft) !important; color: #C0291F !important; border-color: #F8CFCB !important; }
.alert-warning { background: var(--dv-warning-soft) !important; color: #B45309 !important; border-color: #F8E2BD !important; }
.alert-info    { background: var(--dv-info-soft) !important; color: #0B6FB0 !important; border-color: #C5E6F9 !important; }

/* ---------- TABS ---------- */
.nav-tabs { border-bottom: 1px solid var(--dv-border) !important; }
.nav-tabs > li > a { border: 0 !important; border-radius: 8px 8px 0 0 !important; color: var(--dv-text-muted) !important; font-weight: 500; }
.nav-tabs > li > a:hover { background: var(--dv-surface-alt) !important; color: var(--dv-text) !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--dv-primary) !important; border: 0 !important; border-bottom: 2px solid var(--dv-primary) !important; background: transparent !important; }
.nav-pills > li.active > a { background: var(--dv-grad) !important; border-radius: var(--dv-radius-pill); }

/* ---------- DIALOGS / MODALS ---------- */
.ui-dialog { border: 0 !important; border-radius: var(--dv-radius-lg) !important; box-shadow: var(--dv-shadow-lg) !important; background: var(--dv-surface) !important; overflow: hidden; padding: 0 !important; z-index: 100002 !important; }
/* additive: force every jQuery-UI dialog (duplicate-name message, image messages, etc.) to open dead-center of the viewport and stay responsive on mobile. Overrides jQuery-UI's inline absolute top/left without touching any JS. */
.ui-dialog.ui-widget { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; max-width: 92vw !important; max-height: 90vh !important; }
.ui-dialog.ui-widget .ui-dialog-content { max-height: calc(90vh - 120px) !important; overflow: auto !important; }
@media (max-width: 480px) {
    .ui-dialog.ui-widget { width: 92vw !important; }
    .ui-dialog.ui-widget .ui-dialog-titlebar, .ui-dialog.ui-widget .ui-widget-header { padding: 12px 14px !important; }
    .ui-dialog.ui-widget .ui-dialog-content { padding: 14px !important; }
}
.ui-dialog .ui-dialog-titlebar, .ui-widget-header { background: var(--dv-surface) !important; border: 0 !important; border-bottom: 1px solid var(--dv-border) !important; border-radius: 0 !important; color: var(--dv-text) !important; font-family: var(--dv-font-display) !important; font-weight: 600 !important; padding: 14px 18px !important; }
.ui-dialog .ui-dialog-content { padding: 18px !important; color: var(--dv-text-body) !important; width: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
.ui-dialog .ui-dialog-content p { margin: 0 !important; word-break: normal; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--dv-border) !important; background: var(--dv-surface-alt) !important; }
.ui-dialog .ui-dialog-buttonpane .ui-button, .ui-button { background: var(--dv-grad) !important; color: #fff !important; border: 0 !important; border-radius: var(--dv-radius-sm) !important; font-weight: 600 !important; padding: 8px 16px !important; transition: filter .15s var(--dv-ease); }
.ui-button:hover { filter: brightness(1.05); }
.ui-widget-overlay { background: rgba(22,32,58,.45) !important; opacity: 1 !important; z-index: 100001 !important; }
/* spinner shows but never blocks clicks (prevents being trapped behind a stuck loader) */
.preloader { pointer-events: none !important; }
.preloader .cssload-speeding-wheel { pointer-events: none !important; }
.ui-dialog-titlebar-close { background: transparent !important; border: 0 !important; }
.ui-dialog-titlebar-close .fa { color: var(--dv-text-muted); }
.modal-content { border: 0 !important; border-radius: var(--dv-radius-lg) !important; box-shadow: var(--dv-shadow-lg) !important; }
.modal-header { border-bottom: 1px solid var(--dv-border) !important; }
.modal-footer { border-top: 1px solid var(--dv-border) !important; }

/* ---------- FOOTER / MISC ---------- */
footer { background: transparent !important; color: var(--dv-text-muted) !important; border-top: 1px solid var(--dv-border) !important; margin-top: 0 !important; padding: 7px 20px !important; font-size: 12px; line-height: 1.5; min-height: 0 !important; }
footer a { color: var(--dv-primary) !important; }
hr { border-top: 1px solid var(--dv-border) !important; }
.well { background: var(--dv-surface-alt) !important; border: 1px solid var(--dv-border) !important; border-radius: var(--dv-radius) !important; box-shadow: none !important; }
.panel { border-radius: var(--dv-radius) !important; border: 1px solid var(--dv-border) !important; box-shadow: var(--dv-shadow-xs) !important; }
.input-group-addon { background: var(--dv-surface-alt) !important; border-color: var(--dv-border-strong) !important; border-radius: var(--dv-radius-sm) !important; color: var(--dv-text-muted) !important; }
.tooltip-inner { background: #16203A !important; border-radius: 8px; font-size: 12px; padding: 6px 10px; }
.thumbnail, img.img-thumbnail { border-radius: var(--dv-radius-sm) !important; border: 1px solid var(--dv-border) !important; box-shadow: var(--dv-shadow-xs) !important; }

/* ---------- LOGIN ---------- */
body.login { background: linear-gradient(180deg, #efeefb 0%, #f6f7fc 38%, #f6f7fc 100%) !important; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 14px; overflow-y: auto; font-family: var(--dv-font-ui) !important; }
body.login .login_wrapper { position: relative !important; float: none !important; right: auto !important; margin: 0 auto !important; width: 100% !important; max-width: 412px !important; padding: 0 !important; }
/* Gentelella stacks login/registration forms absolutely (collapses wrapper height) — make the visible form flow so centering + responsiveness work */
body.login .login_form { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; }
body.login .registration_form { display: none !important; }
body.login .animate.form { width: 100% !important; }
.login_content { background: #fff; border: 1px solid #ece9f6; border-radius: 16px; box-shadow: 0 26px 70px -30px rgba(28,24,64,.30); padding: 40px 38px 36px !important; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; }
.login_content::before { content: none !important; display: none !important; }
.login_content h1 { font-family: var(--dv-font-ui) !important; font-weight: 700 !important; font-size: 22px !important; line-height: 1.3 !important; letter-spacing: 0 !important; color: #2b2740 !important; text-align: center !important; margin: 0 0 24px !important; }
/* hide Gentelella's decorative absolute lines on the title (they cause overlap) */
.login_content h1::before, .login_content h1::after { content: none !important; display: none !important; }
.login_content .form-control { margin-bottom: 16px; height: 50px !important; font-size: 15px; background: #eef2f9 !important; border: 1px solid #dde4f0 !important; border-radius: 10px !important; color: var(--dv-text) !important; padding: 0 15px !important; box-shadow: none !important; }
.login_content .form-control:focus { background: #fff !important; border-color: var(--dv-primary) !important; box-shadow: 0 0 0 3px var(--dv-primary-soft) !important; }
.login_content .btn.submit, .login_content input.submit { width: 100% !important; background: var(--dv-grad) !important; color: #fff !important; border: 0 !important; height: 50px; margin-top: 8px; border-radius: 10px !important; font-weight: 600 !important; font-size: 15.5px !important; letter-spacing: .02em; box-shadow: 0 12px 26px -10px rgba(91,83,232,.6) !important; transition: filter .15s var(--dv-ease), transform .12s var(--dv-ease) !important; }
.login_content .btn.submit:hover, .login_content input.submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.login_content .separator { border-top: 1px solid var(--dv-border) !important; margin-top: 20px; }
.login_content .change_link { color: var(--dv-text-muted); }
.login_content .reset_pass { color: var(--dv-primary) !important; font-size: 13px; }
/* reference-style login elements */
.dv-login-logo { text-align: center; margin: 0 0 20px; }
.dv-login-logo img { max-height: 58px; width: auto; display: inline-block; }
.login_content .dv-field { margin-bottom: 16px; }
.login_content .dv-field > label { display: block; font-size: 13px; font-weight: 600; color: #44425a; margin: 0 0 7px; }
.login_content .dv-label-row { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 7px; }
.login_content .dv-label-row label { margin: 0; font-size: 13px; font-weight: 600; color: #44425a; }
.login_content .dv-forgot { font-size: 12.5px; color: var(--dv-primary) !important; text-decoration: none; }
.login_content .dv-forgot:hover { text-decoration: underline; }
.login_content .dv-field .form-control { margin-bottom: 0 !important; }
.login_content .dv-pass-wrap { position: relative; }
.login_content .dv-pass-wrap .form-control { padding-right: 44px !important; }
.login_content .dv-eye { position: absolute; right: 6px; top: 0; height: 50px; width: 38px; display: flex; align-items: center; justify-content: center; color: var(--dv-text-muted); cursor: pointer; font-size: 15px; }
.login_content .dv-eye:hover { color: var(--dv-primary); }
.login_content .dv-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dv-text-body); font-weight: 400; margin: 2px 0 16px; cursor: pointer; }
.login_content .dv-remember input { width: 16px; height: 16px; margin: 0; accent-color: var(--dv-primary); }
.login_content .dv-login-actions { display: flex; gap: 12px; margin-top: 14px; }
.login_content .dv-login-actions a { flex: 1; text-align: center; padding: 13px 10px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; transition: filter .15s var(--dv-ease); }
.login_content .dv-btn-reg { background: #2c3e50; color: #fff !important; }
.login_content .dv-btn-web { background: #5aa3e0; color: #fff !important; }
.login_content .dv-login-actions a:hover { filter: brightness(1.08); }

/* ---------- A11Y / MOTION ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .btn:hover, .x_panel .x_panel:hover { transform: none !important; } }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible { outline: 2px solid var(--dv-primary) !important; outline-offset: 2px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .x_content > .table, .x_content .table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 560px; }
    .right_col { padding: 16px !important; }
    .x_panel { padding: 16px !important; }
    .user-profile span:not(.fa) { display: none; }
}
@media (max-width: 767px) {
    .right_col { padding: 12px !important; }
    .x_panel { padding: 15px !important; margin-bottom: 14px !important; }
    .btn { padding: 11px 16px !important; }
    .form-control { height: 46px !important; }
    .login_content { padding: 28px 22px !important; }
    .login_content h1 { font-size: 20px !important; }
    footer { text-align: center; } footer .pull-right { float: none !important; }
}
@media (max-width: 400px) {
    body.login { padding: 14px 10px; }
    .login_content { padding: 24px 18px !important; }
}
@media (min-width: 1600px) { .right_col { padding: 26px 30px !important; } }
@media print { .left_col, .top_nav, .sidebar-footer, footer, .panel_toolbox { display: none !important; } .right_col { margin: 0 !important; padding: 0 !important; } .x_panel { box-shadow: none !important; border: 1px solid #ddd !important; } body, .container.body, .main_container { background: #fff !important; } }
/* ===================== END ===================== */