/*
 * SmogWeb Custom Theme
 * Green/Gray color palette based on original WPF application
 */

:root {
    /* Primary Colors - Green Theme (from WPF app) */
    --smog-primary: #4A7C59;          /* Forest green */
    --smog-primary-dark: #3D6B4A;     /* Darker green */
    --smog-primary-light: #6B9B7A;    /* Lighter green */
    --smog-primary-subtle: #E8F0EA;   /* Very light green for backgrounds */
    
    /* Secondary Colors - Gray tones */
    --smog-secondary: #6B6B6B;        /* Medium gray */
    --smog-secondary-dark: #4A4A4A;   /* Darker gray */
    --smog-secondary-light: #8B8B8B;  /* Lighter gray */
    
    /* Background Colors */
    --smog-bg-light: #E8E8E8;         /* Light gray background */
    --smog-bg-gradient-start: #E8E8E8;
    --smog-bg-gradient-end: #D0D0D0;
    
    /* Accent Colors */
    --smog-accent: #4A4A4A;           /* Dark gray for text */
    --smog-success: #4A7C59;          /* Green */
    --smog-warning: #D4A84B;          /* Gold/Amber for warnings */
    --smog-danger: #C45C5C;           /* Muted red */
    --smog-info: #5B8BA0;             /* Muted blue */
    
    /* Sidebar Colors */
    --smog-sidebar-bg: #FFFFFF;           /* White sidebar background */
    --smog-sidebar-border: #E5E5E5;       /* Light gray border */
    --smog-sidebar-text: #4A4A4A;         /* Dark gray text */
    --smog-sidebar-text-hover: #4A7C59;   /* Green on hover */
    --smog-sidebar-menu-active: #4A7C59;  /* Green for active */
    --smog-sidebar-menu-active-bg: #E8F0EA; /* Light green background for active */
}

/* ============================================
   PRIMARY BUTTON OVERRIDES
   ============================================ */

/* ============================================
   NAV PILLS - LEFT SIDEBAR MENU
   ============================================ */
.nav-pills-custom .nav-link {
    border-radius: 0;
    padding: 12px 15px;
    color: #495057;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.nav-pills-custom .nav-link:hover {
    background-color: rgba(74, 124, 89, 0.08);
    color: #4A7C59;
}
.nav-pills-custom .nav-link.active {
    background-color: #4A7C59;
    color: #fff;
    border-left-color: #4A7C59;
    font-weight: 500;
}
.nav-pills-custom .nav-link.active i {
    color: #fff;
}

/* Badge Counts */
.badge-count {
    background-color: #4A7C59 !important;
    color: #fff;
}
.badge-count-muted {
    background-color: #e9ecef !important;
    color: #6c757d;
}
.nav-pills-custom .nav-link.active .badge-count {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff;
}
.nav-pills-custom .nav-link.active .badge-count-muted {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   THEME GREEN UTILITY CLASSES
   ============================================ */
.bg-dark-green {
    background-color: #4A7C59 !important;
}
.text-dark-green {
    color: #4A7C59 !important;
}
.btn-dark-green {
    background-color: #4A7C59;
    border-color: #4A7C59;
    color: #fff;
}
.btn-dark-green:hover, .btn-dark-green:focus {
    background-color: #3D6B4A;
    border-color: #3D6B4A;
    color: #fff;
}
.btn-dark-green:disabled {
    background-color: #6B9B7A;
    border-color: #6B9B7A;
    color: #fff;
}
.btn-outline-dark-green {
    color: #4A7C59;
    border-color: #4A7C59;
}
.btn-outline-dark-green:hover, .btn-outline-dark-green:focus {
    background-color: #4A7C59;
    border-color: #4A7C59;
    color: #fff;
}

/* Card Header - Theme Green */
.card-header-dark-green {
    background-color: rgba(74, 124, 89, 0.1);
    border-bottom: 1px solid rgba(74, 124, 89, 0.2);
    color: #4A7C59;
}

/* List Group Hover */
.list-group-item:hover {
    background-color: rgba(74, 124, 89, 0.05);
}

/* Modal Header */
.modal-header.bg-dark-green {
    background-color: #4A7C59 !important;
}

/* ============================================
   PRIMARY BUTTON OVERRIDES (Bootstrap)
   ============================================ */
.btn-primary {
    background-color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--smog-primary-dark) !important;
    border-color: var(--smog-primary-dark) !important;
    color: #fff !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--smog-primary-dark) !important;
    border-color: var(--smog-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
    color: #fff !important;
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */
.bg-primary {
    background-color: var(--smog-primary) !important;
}

.bg-primary-subtle {
    background-color: var(--smog-primary-subtle) !important;
}

.text-primary {
    color: var(--smog-primary) !important;
}

/* ============================================
   SIDEBAR OVERRIDES - Light Mode
   ============================================ */
.vertical-menu {
    background: var(--smog-sidebar-bg) !important;
    border-right: 1px solid var(--smog-sidebar-border) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

/* Sidebar menu text color */
#sidebar-menu ul li a {
    color: var(--smog-sidebar-text) !important;
}

/* Sidebar menu icons */
#sidebar-menu ul li a i {
    color: var(--smog-sidebar-text) !important;
}

/* Hover state */
#sidebar-menu ul li a:hover {
    color: var(--smog-sidebar-text-hover) !important;
    background-color: rgba(74, 124, 89, 0.05) !important;
}

#sidebar-menu ul li a:hover i {
    color: var(--smog-sidebar-text-hover) !important;
}

/* Active state */
#sidebar-menu ul li a.active {
    color: var(--smog-primary-dark) !important;
    background-color: var(--smog-sidebar-menu-active-bg) !important;
    font-weight: 700;
    border-left: 3px solid var(--smog-primary) !important;
    padding-left: calc(1.5rem - 3px) !important;
}

#sidebar-menu ul li a.active i {
    color: var(--smog-primary-dark) !important;
}

/* MetisMenu active parent */
#sidebar-menu ul li.mm-active > a {
    color: var(--smog-primary-dark) !important;
    background-color: var(--smog-sidebar-menu-active-bg) !important;
    font-weight: 700;
    border-left: 3px solid var(--smog-primary) !important;
    padding-left: calc(1.5rem - 3px) !important;
}

#sidebar-menu ul li.mm-active > a i {
    color: var(--smog-primary-dark) !important;
}

/* Menu title styling */
.menu-title {
    color: var(--smog-secondary) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Sidebar user info (if exists) */
.vertical-menu .user-info {
    background-color: var(--smog-primary-subtle);
    border-bottom: 1px solid var(--smog-sidebar-border);
}

/* Simplebar scrollbar styling for light sidebar */
.vertical-menu .simplebar-scrollbar::before {
    background-color: rgba(74, 124, 89, 0.3) !important;
}

.vertical-menu .simplebar-scrollbar.simplebar-visible::before {
    opacity: 1 !important;
}

/* Logo visibility for light sidebar */
.navbar-brand-box .logo-dark {
    display: block !important;
}

.navbar-brand-box .logo-light {
    display: none !important;
}

/* ============================================
   TOPBAR OVERRIDES
   ============================================ */
#page-topbar {
    background-color: #fff;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
}

/* Allow sticky positioning inside main-content */
.main-content {
    overflow: visible !important;
}

.navbar-brand-box {
    background-color: var(--smog-sidebar-bg) !important;
    border-right: 1px solid var(--smog-sidebar-border) !important;
}

/* Hamburger menu button color for light sidebar */
#vertical-menu-btn {
    color: var(--smog-sidebar-text) !important;
}

#vertical-menu-btn:hover {
    color: var(--smog-primary) !important;
}

/* ============================================
   LOGIN PAGE STYLES
   ============================================ */
.auth-logo .avatar-title {
    background-color: var(--smog-primary-subtle) !important;
}

.account-pages .card {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.account-pages .bg-primary-subtle {
    background: linear-gradient(135deg, var(--smog-primary-subtle) 0%, #f5f5f5 100%) !important;
}

.account-pages .text-primary {
    color: var(--smog-primary) !important;
}

/* ============================================
   CARD STYLES
   ============================================ */
.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-title {
    color: var(--smog-accent);
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--smog-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(74, 124, 89, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--smog-primary);
}

a:hover {
    color: var(--smog-primary-dark);
}

/* ============================================
   PAGINATION
   ============================================ */
.page-link {
    color: var(--smog-primary);
}

.page-item.active .page-link {
    background-color: var(--smog-primary);
    border-color: var(--smog-primary);
}

/* ============================================
   BADGES
   ============================================ */
.badge.bg-primary {
    background-color: var(--smog-primary) !important;
}

/* ============================================
   DROPDOWN
   ============================================ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--smog-primary);
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb-item.active {
    color: var(--smog-primary);
}

.breadcrumb-item a {
    color: var(--smog-secondary);
}

/* ============================================
   PAGE TITLE
   ============================================ */
.page-title-box h4 {
    color: var(--smog-accent);
}

/* ============================================
   ALERTS
   ============================================ */
.alert-primary {
    background-color: var(--smog-primary-subtle);
    border-color: var(--smog-primary-light);
    color: var(--smog-primary-dark);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
}

/* ============================================
   COMPANY BADGE IN TOPBAR
   ============================================ */
.navbar-header .btn-primary.btn-sm {
    background-color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
}

.navbar-header .btn-primary.btn-sm:hover {
    background-color: var(--smog-primary-dark) !important;
    border-color: var(--smog-primary-dark) !important;
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar-thumb {
    background-color: var(--smog-primary);
}

/* ============================================
   DEVEXTREME GRID OVERRIDES
   ============================================ */
.dx-datagrid-headers {
    background-color: var(--smog-primary-subtle) !important;
}

/* Make grid column header text darker for better readability */
.dx-datagrid-headers .dx-datagrid-text-content {
    color: #2d5a3a !important;
    font-weight: 600 !important;
}

.dx-datagrid-headers .dx-header-row > td {
    color: #2d5a3a !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background-color: rgba(74, 124, 89, 0.1) !important;
}

.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
    color: #fff !important;
}
.dx-checkbox-checked .dx-checkbox-icon::before {
    color: #fff !important;
}

/* DevExtreme button styling - Green theme */
.dx-button-mode-contained.dx-button-default {
    background-color: var(--smog-primary) !important;
    border-color: var(--smog-primary) !important;
}

.dx-button-mode-contained.dx-button-default:hover {
    background-color: var(--smog-primary-dark) !important;
}

.dx-button-mode-contained.dx-button-default .dx-button-text {
    color: #fff !important;
}

/* DevExtreme links and text buttons */
.dx-link {
    color: var(--smog-primary) !important;
}

.dx-link:hover {
    color: var(--smog-primary-dark) !important;
}

/* Filter builder and header filter */
.dx-datagrid-filter-panel-text {
    color: var(--smog-primary) !important;
}

.dx-datagrid-filter-panel-clear-filter {
    color: var(--smog-primary) !important;
}

.dx-header-filter-indicator {
    color: var(--smog-primary) !important;
}

/* Filter row and filter panel icons */
.dx-datagrid-filter-row .dx-menu-item-has-icon .dx-icon {
    color: var(--smog-primary) !important;
}

.dx-datagrid-filter-panel .dx-icon-filter {
    color: var(--smog-primary) !important;
}

.dx-icon-filter {
    color: var(--smog-primary) !important;
}

/* Filter panel link with icon */
.dx-datagrid-filter-panel .dx-link {
    color: var(--smog-primary) !important;
}

.dx-datagrid-filter-panel .dx-link .dx-icon {
    color: var(--smog-primary) !important;
}

/* DevExtreme focused state */
.dx-state-focused,
.dx-state-focused.dx-state-active {
    border-color: var(--smog-primary) !important;
}

/* DevExtreme textbox focus */
.dx-texteditor.dx-state-focused::after {
    border-color: var(--smog-primary) !important;
}

/* DevExtreme dropdown and select */
.dx-dropdowneditor.dx-state-focused .dx-texteditor-input-container::after {
    border-color: var(--smog-primary) !important;
}

/* DevExtreme row hover */
.dx-datagrid-rowsview .dx-row:not(.dx-row-focused):hover > td {
    background-color: rgba(74, 124, 89, 0.05) !important;
}

/* DevExtreme popup and overlay */
.dx-popup-title {
    background-color: var(--smog-primary) !important;
    color: #fff !important;
}

.dx-toolbar-button.dx-button-success .dx-button-content {
    background-color: var(--smog-primary) !important;
}

/* DevExtreme menu items */
.dx-menu-item-selected,
.dx-menu-item-selected .dx-menu-item-text {
    color: var(--smog-primary) !important;
}

/* DevExtreme filterbuilder */
.dx-filterbuilder .dx-filterbuilder-text {
    color: var(--smog-primary) !important;
}

.dx-filterbuilder-item-value-text {
    color: var(--smog-primary) !important;
}

/* DevExtreme grid - native browser scrollbar */
.dx-datagrid .dx-scrollable-container {
    overflow: auto !important;
}
.dx-datagrid .dx-scrollable-scrollbar {
    display: none !important;
}
.dx-datagrid .dx-scrollable-container::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
.dx-datagrid .dx-scrollable-container::-webkit-scrollbar-track {
    background: #f5f5f5;
}
.dx-datagrid .dx-scrollable-container::-webkit-scrollbar-thumb {
background-color: var(--smog-primary-light);
    border: 2px solid #f5f5f5;
    border-radius: 7px;
}
.dx-datagrid .dx-scrollable-container::-webkit-scrollbar-corner {
    background: #f5f5f5;
}

/* DevExtreme calendar selected date */
.dx-calendar-selected-date {
    background-color: var(--smog-primary) !important;
    color: #fff !important;
}

.dx-calendar-cell.dx-state-hover {
    background-color: rgba(74, 124, 89, 0.1) !important;
}

/* DevExtreme switch */
.dx-switch-on-value .dx-switch-handle::before {
    background-color: var(--smog-primary) !important;
}

.dx-switch.dx-state-active .dx-switch-container {
    border-color: var(--smog-primary) !important;
}

/* DevExtreme radiogroup */
.dx-radiobutton-checked .dx-radiobutton-icon::before {
    background-color: var(--smog-primary) !important;
}

.dx-radiobutton.dx-state-focused .dx-radiobutton-icon {
    border-color: var(--smog-primary) !important;
}

/* DevExtreme tabs */
.dx-tab-selected {
    color: var(--smog-primary) !important;
    border-bottom-color: var(--smog-primary) !important;
}

/* DevExtreme accordion */
.dx-accordion-item-opened > .dx-accordion-item-title {
    color: var(--smog-primary) !important;
}

/* DevExtreme tagbox selected items */
.dx-tag {
    background-color: var(--smog-primary-light) !important;
    color: #fff !important;
}

.dx-tag-remove-button {
    color: #fff !important;
}

/* DevExtreme list selected item */
.dx-list-item-selected {
    background-color: rgba(74, 124, 89, 0.1) !important;
}

/* DevExtreme pager */
.dx-pager .dx-page-size.dx-selection,
.dx-pager .dx-page.dx-selection {
    background-color: var(--smog-primary) !important;
    color: #fff !important;
}

.dx-pager .dx-page:hover,
.dx-pager .dx-page-size:hover {
    background-color: rgba(74, 124, 89, 0.1) !important;
}

/* DevExtreme treelist */
.dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td {
    background-color: rgba(74, 124, 89, 0.1) !important;
}

/* DevExtreme pivot grid */
.dx-pivotgrid .dx-area-field-content {
    color: var(--smog-primary) !important;
}

/* DevExtreme loadpanel */
.dx-loadpanel-content {
    border-color: var(--smog-primary) !important;
}

.dx-loadindicator-segment {
    stroke: var(--smog-primary) !important;
}

/* Custom green add button (like in the screenshot) */
.btn-success,
.dx-button.btn-success {
    background: linear-gradient(135deg, #4A7C59 0%, #3D6B4A 100%) !important;
    border-color: var(--smog-primary) !important;
    color: #fff !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #3D6B4A 0%, #2D5A3A 100%) !important;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.spinner-border {
    color: var(--smog-primary);
}

/* ============================================
   COMPACT DETAIL & EDIT PAGES
   ============================================ */

/* Tighter card spacing */
.card {
    margin-bottom: 0.75rem !important;
}
.card-header {
    padding: 0.5rem 1rem !important;
}
.card-header h5 {
    font-size: 0.9rem !important;
}
.card-body {
    padding: 0.75rem 1rem !important;
}

/* Compact field display in detail/voir pages */
.card-body label.text-muted.small {
    margin-bottom: 0.1rem !important;
    font-size: 0.7rem !important;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8c9a9d !important;
    font-weight: 500;
}
.card-body label.text-muted.small + p {
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
    line-height: 1.4;
    padding: 0.2rem 0.4rem;
    background-color: var(--smog-primary-subtle);
    border-radius: 3px;
    border-left: 2px solid var(--smog-primary-subtle);
    min-height: 1.75rem;
}

/* Compact form fields in edit pages */
.card-body .form-label {
    margin-bottom: 0.15rem !important;
    font-size: 0.8rem !important;
}
.card-body .mb-3 {
    margin-bottom: 0.5rem !important;
}

/* Slightly shorter input fields */
.dx-texteditor .dx-texteditor-input {
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.form-control {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}

/* Tighter row spacing */
.card-body > .row {
    margin-bottom: 0 !important;
}

/* Compact table rows (settings) */
.card-body .table-sm td {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.85rem;
}

/* Audit card - subtle and small */
.card-header .bx-info-circle {
    font-size: 0.8rem;
}
/* Right sidebar cards in detail pages (col-lg-4 inside tab-pane) */
.tab-pane .col-lg-4 > .card .card-header {
    background-color: #f8f9fa !important;
    border-bottom-color: #e9ecef !important;
    padding: 0.35rem 0.75rem !important;
}
.tab-pane .col-lg-4 > .card .card-header h5 {
    color: #6c757d !important;
    font-size: 0.8rem !important;
}
.tab-pane .col-lg-4 > .card .card-body {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    color: #495057;
}
.tab-pane .col-lg-4 > .card .card-body p {
    margin-bottom: 0.12rem !important;
    font-size: 0.8rem !important;
    line-height: 1.4;
}
.tab-pane .col-lg-4 > .card .card-body strong {
    font-weight: 500;
    color: #343a40;
}
.tab-pane .col-lg-4 > .card .card-body .table-sm td {
    font-size: 0.78rem;
    padding: 0.15rem 0.35rem !important;
}

/* ============================================
   FORM INPUT BACKGROUNDS - subtle green tint
   ============================================ */
.form-control,
.form-select,
.dx-texteditor-input,
.dx-textarea .dx-texteditor-input {
    background-color: var(--smog-primary-subtle) !important;
}
.dx-texteditor.dx-editor-outlined {
    background-color: var(--smog-primary-subtle) !important;
}
.form-control:focus,
.form-select:focus {
    background-color: #fff !important;
}
.dx-state-focused .dx-texteditor-input,
.dx-state-focused.dx-editor-outlined {
    background-color: #fff !important;
}

/* Placeholder styling - italic and muted */
.form-control::placeholder,
.form-select::placeholder {
    font-style: italic;
    color: #a0a0a0 !important;
    opacity: 1;
    font-size: 0.95em;
}
.dx-placeholder::before {
    font-style: italic !important;
    color: #a0a0a0 !important;
    font-size: 0.95em !important;
}
.dx-placeholder {
    display: flex !important;
    align-items: center !important;
}