/* ========================================================================
   Global Theme System - Light & Dark Mode
   Paper Free Contracts
   ======================================================================== */

/* ===== Light Mode (Default) ===== */
:root {
    --vd-bg-primary: #e4e6e9;
    --vd-bg-secondary: #ffffff;
    --vd-bg-tertiary: #f2f2f2;
    --vd-bg-card: #ffffff;
    --vd-bg-glass: rgba(255, 255, 255, 0.85);
    --vd-border: #d5d5d5;
    --vd-border-active: rgba(102, 126, 234, 0.5);
    --vd-text-primary: #393939;
    --vd-text-secondary: #5a5a5a;
    --vd-text-muted: #888888;
    --vd-accent-1: #438eb9; /* Ace admin blue */
    --vd-accent-2: #3a7596;
    --vd-accent-gradient: linear-gradient(135deg, #438eb9 0%, #3a7596 100%);
    --vd-success: #82af6f;
    --vd-warning: #f89406;
    --vd-danger: #d15b47;
    --vd-info: #3a87ad;
    --vd-radius-sm: 6px;
    --vd-radius-md: 10px;
    --vd-radius-lg: 14px;
    --vd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --vd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --vd-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --vd-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Dark Mode Override ===== */
html.dark-theme {
    --vd-bg-primary: #0f1117;
    --vd-bg-secondary: #1a1d27;
    --vd-bg-tertiary: #252836;
    --vd-bg-card: #2a2d3a;
    --vd-bg-glass: rgba(42, 45, 58, 0.85);
    --vd-border: rgba(255, 255, 255, 0.08);
    --vd-border-active: rgba(102, 126, 234, 0.5);
    --vd-text-primary: #e8e8ed;
    --vd-text-secondary: #9ca3af;
    --vd-text-muted: #6b7280;
    --vd-accent-1: #667eea;
    --vd-accent-2: #764ba2;
    --vd-accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --vd-success: #43e97b;
    --vd-warning: #f5a623;
    --vd-danger: #ff4d4d;
    --vd-info: #38bdf8;
    --vd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --vd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --vd-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ========================================================================
   Global Overrides for Ace Admin / Bootstrap (Only apply when dark-theme)
   ======================================================================== */

/* Body & Content Areas */
html.dark-theme,
html.dark-theme body,
html.dark-theme body.no-skin,
html.dark-theme .main-container,
html.dark-theme .main-content,
html.dark-theme .page-content {
    background-color: var(--vd-bg-primary) !important;
    color: var(--vd-text-primary) !important;
}

/* Navbar */
html.dark-theme .navbar {
    background: var(--vd-bg-secondary) !important;
    border-bottom: 1px solid var(--vd-border) !important;
}
html.dark-theme .navbar .navbar-brand {
    color: var(--vd-text-primary) !important;
}
html.dark-theme .navbar .nav > li > a {
    color: var(--vd-text-primary) !important;
}

/* Sidebar */
html.dark-theme .sidebar {
    background-color: var(--vd-bg-secondary) !important;
    border-right: 1px solid var(--vd-border) !important;
}
html.dark-theme .nav-list > li {
    border-bottom: 1px solid var(--vd-border) !important;
    border-top: none !important;
}
html.dark-theme .nav-list > li > a {
    background-color: var(--vd-bg-secondary) !important;
    color: var(--vd-text-primary) !important;
    text-shadow: none !important;
}
html.dark-theme .nav-list > li > a:hover,
html.dark-theme .nav-list > li > a:focus {
    background-color: var(--vd-bg-tertiary) !important;
    color: var(--vd-accent-1) !important;
}
html.dark-theme .nav-list > li.active > a {
    background-color: var(--vd-bg-tertiary) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .nav-list > li.active > a:before {
    background-color: var(--vd-accent-1) !important;
}
html.dark-theme .nav-list > li > .submenu,
html.dark-theme .nav-list > li > .submenu > li,
html.dark-theme .nav-list > li > .submenu > li > a {
    background-color: var(--vd-bg-primary) !important;
}
html.dark-theme .nav-list > li > .submenu > li > a {
    color: var(--vd-text-secondary) !important;
}
html.dark-theme .nav-list > li > .submenu > li > a:hover,
html.dark-theme .nav-list > li > .submenu > li.active > a {
    color: var(--vd-accent-1) !important;
    background-color: var(--vd-bg-tertiary) !important;
}
html.dark-theme .nav-list > li > .submenu > li::before {
    border-color: var(--vd-border) !important;
}
html.dark-theme .nav-list > li > .submenu > li > a > .ace-icon {
    display: none; /* Ace admin has some weird icons on hover */
}
html.dark-theme .sidebar-shortcuts {
    background-color: var(--vd-bg-tertiary) !important;
}
html.dark-theme .sidebar-toggle {
    background-color: var(--vd-bg-tertiary) !important;
    border-top: 1px solid var(--vd-border) !important;
    border-bottom: 1px solid var(--vd-border) !important;
}
html.dark-theme .sidebar-toggle > .ace-icon {
    color: var(--vd-text-secondary) !important;
}

/* Tables, Modals, Panels */
html.dark-theme .table > thead > tr > th {
    background-color: var(--vd-bg-tertiary) !important;
    color: var(--vd-text-primary) !important;
    border-color: var(--vd-border) !important;
}
html.dark-theme .table > tbody > tr > td {
    background-color: var(--vd-bg-secondary) !important;
    color: var(--vd-text-secondary) !important;
    border-color: var(--vd-border) !important;
}
html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > td,
html.dark-theme .table-striped > tbody > tr.odd > td,
html.dark-theme .dataTable > tbody > tr.odd > td {
    background-color: var(--vd-bg-primary) !important;
}
html.dark-theme .table-hover > tbody > tr:hover > td,
html.dark-theme .dataTable > tbody > tr:hover > td {
    background-color: var(--vd-bg-tertiary) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .table-bordered {
    border-color: var(--vd-border) !important;
}
html.dark-theme .modal-content {
    background-color: var(--vd-bg-secondary) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .modal-header {
    border-color: var(--vd-border) !important;
}
html.dark-theme .modal-footer {
    border-color: var(--vd-border) !important;
    background-color: var(--vd-bg-tertiary) !important;
}
html.dark-theme .panel {
    background-color: var(--vd-bg-secondary) !important;
    border-color: var(--vd-border) !important;
}
html.dark-theme .panel-heading {
    background-color: var(--vd-bg-tertiary) !important;
    border-color: var(--vd-border) !important;
    color: var(--vd-text-primary) !important;
}

/* Forms & Inputs */
html.dark-theme .form-control,
html.dark-theme select,
html.dark-theme input[type="text"],
html.dark-theme input[type="search"],
html.dark-theme input[type="password"],
html.dark-theme input[type="email"] {
    background-color: var(--vd-bg-primary) !important;
    color: var(--vd-text-primary) !important;
    border-color: var(--vd-border) !important;
}
html.dark-theme .form-control:focus,
html.dark-theme select:focus,
html.dark-theme input:focus {
    border-color: var(--vd-border-active) !important;
    background-color: var(--vd-bg-primary) !important;
}
html.dark-theme label {
    color: var(--vd-text-secondary) !important;
}

/* Ace specific */
html.dark-theme .widget-box {
    border-color: var(--vd-border) !important;
}
html.dark-theme .widget-header {
    background: var(--vd-bg-tertiary) !important;
    border-bottom: 1px solid var(--vd-border) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .widget-body {
    background-color: var(--vd-bg-secondary) !important;
}
html.dark-theme .page-header {
    border-bottom: 1px solid var(--vd-border) !important;
}
html.dark-theme .page-header h1 {
    color: var(--vd-text-primary) !important;
}
html.dark-theme .breadcrumbs {
    background-color: var(--vd-bg-tertiary) !important;
    border-bottom: 1px solid var(--vd-border) !important;
}
html.dark-theme .breadcrumb > li > a {
    color: var(--vd-text-secondary) !important;
}
html.dark-theme .btn-default {
    background-color: var(--vd-bg-tertiary) !important;
    border-color: var(--vd-border) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .btn-default:hover {
    background-color: var(--vd-border) !important;
}

/* Dashboard specific */
html.dark-theme .dashboard-stat-card {
    background: var(--vd-bg-secondary) !important;
    border-color: var(--vd-border) !important;
}
html.dark-theme .dashboard-stat-content h2 {
    color: var(--vd-text-primary) !important;
}
html.dark-theme .dashboard-stat-content h4 {
    color: var(--vd-text-secondary) !important;
}

/* DataTables & Search Headers */
html.dark-theme .dataTables_wrapper .row {
    background-color: var(--vd-bg-tertiary) !important;
}
html.dark-theme .dataTables_wrapper .row:first-child,
html.dark-theme .dataTables_wrapper .row:last-child {
    background-color: var(--vd-bg-tertiary) !important;
    border-bottom: 1px solid var(--vd-border);
}
html.dark-theme .table-header {
    background-color: var(--vd-accent-1) !important; 
    color: #fff !important;
}
html.dark-theme .dataTables_filter input,
html.dark-theme .dataTables_length select {
    background-color: var(--vd-bg-primary) !important;
    color: var(--vd-text-primary) !important;
    border-color: var(--vd-border) !important;
}

/* Pagination */
html.dark-theme .pagination > li > a, 
html.dark-theme .pagination > li > span {
    background-color: var(--vd-bg-secondary) !important;
    border-color: var(--vd-border) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .pagination > li.active > a {
    background-color: var(--vd-accent-1) !important;
    border-color: var(--vd-border) !important;
    color: #fff !important;
}
html.dark-theme .pagination > li > a:hover {
    background-color: var(--vd-bg-tertiary) !important;
}

/* Footer */
html.dark-theme .footer .footer-inner,
html.dark-theme .page-footer {
    background-color: var(--vd-bg-secondary) !important;
    border-top: 1px solid var(--vd-border) !important;
    color: var(--vd-text-primary) !important;
}

/* Login Pages */
html.dark-theme .login-layout {
    background-color: var(--vd-bg-primary) !important;
}
html.dark-theme .login-layout .widget-box {
    background-color: var(--vd-bg-secondary) !important;
    border-color: var(--vd-border) !important;
}
html.dark-theme .login-layout .widget-body,
html.dark-theme .login-layout .widget-main {
    background-color: transparent !important;
}
html.dark-theme .login-layout .widget-main {
    background-color: var(--vd-bg-secondary) !important;
    color: var(--vd-text-primary) !important;
}
html.dark-theme .login-layout .widget-main h4,
html.dark-theme .login-layout .widget-main h5 {
    color: var(--vd-text-secondary) !important;
}
html.dark-theme .login-layout .widget-main label {
    color: var(--vd-text-primary) !important;
}
html.dark-theme .login-layout .login-box .toolbar {
    background: var(--vd-bg-tertiary) !important;
    border-top: 1px solid var(--vd-border) !important;
}

/* ===== Global Tab Bar (Shared by Designer and Classic Editor) ===== */
.vd-tab-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    background: var(--vd-bg-secondary);
    border-bottom: 1px solid var(--vd-border);
    min-height: 42px;
    flex-shrink: 0;
}

.vd-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vd-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: var(--vd-transition);
    cursor: pointer;
    white-space: nowrap;
}

.vd-tab:hover {
    color: var(--vd-text-secondary);
    text-decoration: none;
}

.vd-tab.active {
    color: var(--vd-accent-1);
    border-bottom-color: var(--vd-accent-1);
}

.vd-tab i {
    font-size: 14px;
}