/**
 * EazyDezk CRM — unified professional design system
 * Loads last; overrides page-specific skins for consistent UI.
 */

:root {
    --crm-brand: #4286f4;
    --crm-brand-dark: #373B44;
    --crm-brand-light: #6BA3F8;
    --crm-brand-soft: #E8F0FE;
    --crm-chrome: #373B44;
    --crm-chrome-dark: #2a2d34;
    --crm-surface: #ffffff;
    --crm-page-bg: #373B44;
    --crm-border: #e2e8f0;
    --crm-border-strong: #cbd5e1;
    --crm-text: #0f172a;
    --crm-text-muted: #64748b;
    --crm-radius: 12px;
    --crm-radius-sm: 8px;
    --crm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --crm-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --crm-grad-brand: linear-gradient(to right, #4286f4, #373B44);
    --crm-grad-brand-hover: linear-gradient(to right, #3578e8, #2d3138);
    --crm-grad-chrome: linear-gradient(to right, #4286f4, #373B44);
    --crm-grad-header: linear-gradient(to right, #4286f4, #373B44);
    --crm-grad-page: linear-gradient(to right, #4286f4, #373B44);
    --crm-grad-table-head: linear-gradient(to right, #4286f4, #373B44);
    --crm-grad-card-top: linear-gradient(90deg, #4286f4, #6BA3F8, #4286f4, #373B44, #4286f4);
    --crm-control-h: 38px;

    /* Bridge legacy tokens */
    --eazy-accent: var(--crm-brand);
    --eazy-accent-hover: var(--crm-brand-dark);
    --eazy-bg-page: var(--crm-page-bg);
    --eazy-bg-table-head: #4286f4;
    --eazy-gradient-bar: var(--crm-grad-chrome);
}

/* ---- Shell & page background ---- */
body.eazydezk-app main.pusher,
body.eazydezk-app main.main {
    background: #373B44 !important;
    background: -webkit-linear-gradient(to right, #4286f4, #373B44) !important;
    background: linear-gradient(to right, #4286f4, #373B44) !important;
    background-attachment: fixed !important;
}

body.eazydezk-app .app-header,
body.eazydezk-app header.app-header {
    background: var(--crm-grad-header) !important;
    background-size: 200% 100% !important;
    border-bottom: 1px solid rgba(66, 134, 244, 0.35) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15) !important;
}

body.eazydezk-app .app-footer,
body.eazydezk-app footer.app-footer {
    background: var(--crm-chrome-dark) !important;
    border-top: 1px solid rgba(66, 134, 244, 0.25) !important;
}

/* ---- Breadcrumbs (all variants) ---- */
body.eazydezk-app .breadcrumb,
body.eazydezk-app .admin-breadcrumb,
body.eazydezk-app .lead-marketing-breadcrumb-bar,
body.eazydezk-app .finance-breadcrumb-bar,
body.eazydezk-app .lv-breadcrumb-bar {
    position: relative;
    background: var(--crm-surface) !important;
    border-bottom: 1px solid var(--crm-border) !important;
    box-shadow: var(--crm-shadow-sm) !important;
    padding: 12px 20px !important;
}

body.eazydezk-app .breadcrumb::before,
body.eazydezk-app .admin-breadcrumb::before,
body.eazydezk-app .breadcrumb:has(.lead-marketing-breadcrumb-bar)::before,
body.eazydezk-app .finance-breadcrumb-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--crm-grad-card-top);
    background-size: 200% 100%;
    animation: crmGradShift 8s ease infinite;
}

@keyframes crmGradShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

body.eazydezk-app .breadcrumb ol,
body.eazydezk-app .breadcrumb-ol,
body.eazydezk-app .lead-marketing-breadcrumb,
body.eazydezk-app .finance-breadcrumb-ol {
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.eazydezk-app .breadcrumb a,
body.eazydezk-app .breadcrumb-ol a,
body.eazydezk-app .lead-marketing-breadcrumb a {
    color: var(--crm-text-muted) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.15s ease !important;
}

body.eazydezk-app .breadcrumb a:hover,
body.eazydezk-app .breadcrumb-ol a:hover,
body.eazydezk-app .lead-marketing-breadcrumb a:hover {
    color: var(--crm-brand) !important;
}

body.eazydezk-app .breadcrumb i.bx,
body.eazydezk-app .breadcrumb-ol i.bx,
body.eazydezk-app .lead-marketing-breadcrumb i.bx {
    font-size: 16px !important;
    color: var(--crm-brand-light) !important;
}

/* ---- Cards & panels ---- */
body.eazydezk-app .tab-card,
body.eazydezk-app .app-card,
body.eazydezk-app .ui.segment.tab-card,
body.eazydezk-app .lead-marketing-controls-card,
body.eazydezk-app .lead-marketing-table-card,
body.eazydezk-app .finance-analytics-card,
body.eazydezk-app .admin-dashboard-page .app-card {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius) !important;
    box-shadow: var(--crm-shadow-md) !important;
    overflow: hidden;
}

body.eazydezk-app .pg-head,
body.eazydezk-app .pg-title {
    color: var(--crm-text) !important;
    letter-spacing: -0.02em !important;
}

/* ---- Search & form inputs (global) ---- */
body.eazydezk-app .form-control,
body.eazydezk-app .ui.input > input,
body.eazydezk-app input[type="text"]:not(.paginate_button),
body.eazydezk-app input[type="email"],
body.eazydezk-app input[type="password"],
body.eazydezk-app input[type="search"],
body.eazydezk-app input[type="number"],
body.eazydezk-app select:not(.paginate_button),
body.eazydezk-app textarea {
    border-radius: var(--crm-radius-sm) !important;
    border: 1px solid var(--crm-border-strong) !important;
    min-height: var(--crm-control-h);
    font-size: 14px !important;
    color: var(--crm-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.eazydezk-app .form-control:focus,
body.eazydezk-app .ui.input > input:focus,
body.eazydezk-app input:focus,
body.eazydezk-app select:focus,
body.eazydezk-app textarea:focus {
    border-color: var(--crm-brand) !important;
    box-shadow: 0 0 0 3px rgba(66, 134, 244, 0.22) !important;
    outline: none !important;
}

/* CRM search box (lead marketing + shared) */
body.eazydezk-app .lm-search-box,
body.eazydezk-app .crm-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--crm-control-h);
    padding: 0 14px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.eazydezk-app .lm-search-box:focus-within,
body.eazydezk-app .crm-search-box:focus-within {
    border-color: var(--crm-brand);
    box-shadow: 0 0 0 3px rgba(66, 134, 244, 0.18);
}

body.eazydezk-app .lm-search-box__icon,
body.eazydezk-app .crm-search-box__icon {
    color: var(--crm-brand-light);
    font-size: 18px;
}

body.eazydezk-app .lm-search-box__input,
body.eazydezk-app .crm-search-box__input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 34px !important;
    padding: 0 !important;
}

/* Filter panels */
body.eazydezk-app .lead-marketing-filters,
body.eazydezk-app .theme-form,
body.eazydezk-app form.lead-marketing-tab-filters {
    background: var(--crm-surface) !important;
}

body.eazydezk-app .lm-filters-head__label,
body.eazydezk-app .lm-global-search-head__label {
    font-weight: 600 !important;
    color: var(--crm-text) !important;
}

body.eazydezk-app .lm-filters-head__label i,
body.eazydezk-app .lm-global-search-head__label i {
    color: var(--crm-brand) !important;
}

/* ---- Buttons — professional gradient primary ---- */
body.eazydezk-app .btn-primary,
body.eazydezk-app .btn.btn-primary,
body.eazydezk-app .btn-submit,
body.eazydezk-app .ui.primary.button,
body.eazydezk-app button.bg-indigo-600,
body.eazydezk-app a.bg-indigo-600,
body.eazydezk-app .lead-marketing-empty-state__btn,
body.eazydezk-app .lm-btn--primary {
    background: var(--crm-grad-brand) !important;
    background-color: var(--crm-brand) !important;
    border-color: var(--crm-brand-dark) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(66, 134, 244, 0.28) !important;
}

body.eazydezk-app .btn-primary:hover,
body.eazydezk-app .btn-submit:hover,
body.eazydezk-app .ui.primary.button:hover,
body.eazydezk-app button.bg-indigo-600:hover,
body.eazydezk-app a.bg-indigo-600:hover {
    background: var(--crm-grad-brand-hover) !important;
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(66, 134, 244, 0.35) !important;
}

body.eazydezk-app .btn-secondary,
body.eazydezk-app .lm-btn--secondary,
body.eazydezk-app .ui.button:not(.primary):not(.red):not(.green) {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border-strong) !important;
    color: var(--crm-text) !important;
}

/* Icon in buttons */
body.eazydezk-app .btn i.bx,
body.eazydezk-app .btn-submit i.bx,
body.eazydezk-app a.btn i.bx {
    font-size: 16px;
    line-height: 1;
}

/* ---- DataTables — unified professional skin ---- */
body.eazydezk-app .dataTables_wrapper {
    font-size: 13px;
    color: var(--crm-text);
}

body.eazydezk-app .dataTables_wrapper .dataTables_length,
body.eazydezk-app .dataTables_wrapper .dataTables_filter,
body.eazydezk-app .dataTables_wrapper .dataTables_info,
body.eazydezk-app .dataTables_wrapper .dataTables_paginate {
    padding: 8px 0;
    color: var(--crm-text-muted);
}

body.eazydezk-app .dataTables_wrapper .dataTables_length label,
body.eazydezk-app .dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--crm-text-muted);
    margin: 0;
}

body.eazydezk-app .dataTables_wrapper .dataTables_length select,
body.eazydezk-app .dataTables_wrapper .dataTables_filter input {
    min-height: var(--crm-control-h) !important;
    padding: 0 12px !important;
    border-radius: var(--crm-radius-sm) !important;
    border: 1px solid var(--crm-border-strong) !important;
    background: var(--crm-surface) !important;
    color: var(--crm-text) !important;
    font-size: 13px !important;
    box-shadow: var(--crm-shadow-sm);
}

body.eazydezk-app .dataTables_wrapper .dataTables_filter input {
    min-width: 200px;
    padding-left: 14px !important;
    background-image: none !important;
}

body.eazydezk-app .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--crm-brand) !important;
    box-shadow: 0 0 0 3px rgba(66, 134, 244, 0.18) !important;
}

/* Toolbar mount row (lead marketing, finance) */
body.eazydezk-app .lead-marketing-table-toolbar,
body.eazydezk-app .finance-dt-toolbar,
body.eazydezk-app .crm-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #E8F0FE 100%);
    border-bottom: 1px solid var(--crm-border);
}

body.eazydezk-app .lead-marketing-table-length-mount label,
body.eazydezk-app .lead-marketing-table-search-mount label {
    font-weight: 500 !important;
    color: var(--crm-text-muted) !important;
}

/* Table head */
body.eazydezk-app table.dataTable thead th,
body.eazydezk-app table.dataTable thead td,
body.eazydezk-app .ui.table thead th,
body.eazydezk-app .newList thead th {
    background: var(--crm-grad-table-head) !important;
    color: #f8fafc !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: none !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
}

body.eazydezk-app table.dataTable thead th:first-child {
    border-radius: var(--crm-radius-sm) 0 0 0;
}

body.eazydezk-app table.dataTable thead th:last-child {
    border-radius: 0 var(--crm-radius-sm) 0 0;
}

body.eazydezk-app table.dataTable tbody tr {
    transition: background-color 0.12s ease;
}

body.eazydezk-app table.dataTable tbody tr:hover,
body.eazydezk-app table.dataTable.stripe tbody tr.odd:hover,
body.eazydezk-app table.dataTable.stripe tbody tr.even:hover {
    background-color: var(--crm-brand-soft) !important;
}

body.eazydezk-app table.dataTable tbody td,
body.eazydezk-app .ui.table tbody td {
    padding: 10px 14px !important;
    border-color: var(--crm-border) !important;
    vertical-align: middle !important;
    font-size: 13px !important;
}

body.eazydezk-app table.dataTable.stripe tbody tr.odd {
    background-color: #F4F8FF !important;
}

body.eazydezk-app table.dataTable.no-footer {
    border-bottom: 1px solid var(--crm-border) !important;
}

/* Pagination */
body.eazydezk-app .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    margin: 0 2px !important;
    line-height: 32px !important;
    border-radius: var(--crm-radius-sm) !important;
    border: 1px solid var(--crm-border) !important;
    background: var(--crm-surface) !important;
    color: var(--crm-text) !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

body.eazydezk-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--crm-brand-soft) !important;
    border-color: var(--crm-brand-light) !important;
    color: var(--crm-brand-dark) !important;
}

body.eazydezk-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.eazydezk-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--crm-grad-brand) !important;
    border-color: var(--crm-brand) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(66, 134, 244, 0.3) !important;
}

/* DataTables export buttons */
body.eazydezk-app .dt-buttons .dt-button {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--crm-border-strong) !important;
    color: var(--crm-text) !important;
    border-radius: var(--crm-radius-sm) !important;
    font-weight: 600 !important;
    min-height: 34px !important;
    padding: 6px 12px !important;
    margin-right: 4px !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

body.eazydezk-app .dt-buttons .dt-button:hover {
    background: var(--crm-brand-soft) !important;
    border-color: var(--crm-brand-light) !important;
    color: var(--crm-brand-dark) !important;
}

body.eazydezk-app .dt-buttons .dt-button:active,
body.eazydezk-app .dt-buttons .dt-button:focus {
    background: var(--crm-grad-brand) !important;
    border-color: var(--crm-brand-dark) !important;
    color: #fff !important;
}

body.eazydezk-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.eazydezk-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.45;
    background: #f8fafc !important;
    color: #94a3b8 !important;
}

/* Processing overlay */
body.eazydezk-app .dataTables_processing {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius-sm) !important;
    color: var(--crm-brand) !important;
    font-weight: 600 !important;
    box-shadow: var(--crm-shadow-md) !important;
}

/* Row action icons */
body.eazydezk-app .btn-td a.btn,
body.eazydezk-app .action-btn a.btn,
body.eazydezk-app a.tbl-action,
body.eazydezk-app .btn-action-table a {
    border-radius: var(--crm-radius-sm) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.eazydezk-app .btn-td a.btn i.bx,
body.eazydezk-app .action-btn a.btn i.bx,
body.eazydezk-app a.tbl-action i.bx {
    font-size: 16px !important;
}

/* ---- Tabs (pill style) ---- */
body.eazydezk-app .crm-pill-tabs > .item,
body.eazydezk-app .crm-pill-tabs > button.item,
body.eazydezk-app .lead-marketing-tabs > .item,
body.eazydezk-app .lead-marketing-tabs > button.item {
    border-radius: var(--crm-radius-sm) !important;
    font-weight: 500 !important;
    color: var(--crm-text-muted) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

body.eazydezk-app .crm-pill-tabs > .item.active,
body.eazydezk-app .crm-pill-tabs > button.item.active,
body.eazydezk-app .lead-marketing-tabs > .item.active,
body.eazydezk-app .lead-marketing-tabs > button.item.active {
    background: var(--crm-grad-brand) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(66, 134, 244, 0.3) !important;
}

body.eazydezk-app .lead-marketing-toolbar .crm-pill-tabs,
body.eazydezk-app .lead-marketing-toolbar--highlighted .crm-pill-tabs {
    background: linear-gradient(135deg, #ffffff 0%, #E8F0FE 100%) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius) !important;
    padding: 6px !important;
}

/* ---- Lead marketing page alignment ---- */
body.eazydezk-app .lead-marketing-page {
    --lm-accent: var(--crm-brand);
    --lm-accent-hover: var(--crm-brand-dark);
    --lm-border: var(--crm-border);
}

body.eazydezk-app .lead-marketing-page .lead-marketing-search-stats-row {
    background: linear-gradient(135deg, #E8F0FE 0%, #ffffff 55%, #fff 100%) !important;
}

body.eazydezk-app .lead-marketing-page .lm-live-stat__icon {
    background: var(--crm-brand-soft) !important;
    color: var(--crm-brand) !important;
}

body.eazydezk-app .lead-marketing-page .lm-live-stat--contacted .lm-live-stat__icon {
    background: #dcfce7 !important;
    color: #15803d !important;
}

body.eazydezk-app .lead-marketing-page .lm-live-stat--reminders .lm-live-stat__icon {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

/* ---- Finance & admin dashboard ---- */
body.eazydezk-app .finance-dashboard-page,
body.eazydezk-app .admin-dashboard-page {
    --page-accent: var(--crm-brand);
}

body.eazydezk-app .finance-analytics-widget__icon,
body.eazydezk-app .admin-dashboard-page .app-card .bx {
    color: var(--crm-brand) !important;
}

/* ---- Sidebar icons ---- */
body.eazydezk-app .sidebar-nav ul > li > a.active,
body.eazydezk-app .sidebar-nav ul > li > a:hover {
    background: rgba(66, 134, 244, 0.18) !important;
    color: #fff !important;
}

body.eazydezk-app .sidebar-nav .nav-icon,
body.eazydezk-app .sidebar-nav i.bx {
    color: #6BA3F8 !important;
}

/* ---- Semantic UI dropdowns in forms ---- */
body.eazydezk-app .ui.selection.dropdown {
    border-radius: var(--crm-radius-sm) !important;
    border-color: var(--crm-border-strong) !important;
    min-height: var(--crm-control-h) !important;
}

body.eazydezk-app .ui.selection.dropdown.active,
body.eazydezk-app .ui.selection.dropdown.visible {
    border-color: var(--crm-brand) !important;
    box-shadow: 0 0 0 3px rgba(66, 134, 244, 0.18) !important;
}

body.eazydezk-app .ui.dropdown .menu {
    border: 1px solid var(--crm-border-strong) !important;
    border-radius: var(--crm-radius-sm) !important;
    box-shadow: var(--crm-shadow-md) !important;
}

body.eazydezk-app .ui.dropdown .menu > .item:hover,
body.eazydezk-app .ui.dropdown .menu > .item.selected,
body.eazydezk-app .ui.dropdown .menu > .item.active {
    background: var(--crm-brand-soft) !important;
    color: var(--crm-brand-dark) !important;
}

/* ---- Select2 dropdowns ---- */
body.eazydezk-app .select2-container--default .select2-selection--single {
    border: 1px solid var(--crm-border-strong) !important;
    border-radius: var(--crm-radius-sm) !important;
}

body.eazydezk-app .select2-container--default.select2-container--open .select2-selection--single,
body.eazydezk-app .select2-container--default .select2-selection--single:focus {
    border-color: var(--crm-brand) !important;
    box-shadow: 0 0 0 3px rgba(66, 134, 244, 0.18) !important;
}

body.eazydezk-app .select2-dropdown {
    border: 1px solid var(--crm-border-strong) !important;
    border-radius: var(--crm-radius-sm) !important;
    box-shadow: var(--crm-shadow-md) !important;
}

body.eazydezk-app .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--crm-grad-brand) !important;
    color: #fff !important;
}

body.eazydezk-app .select2-container--default .select2-results__option--selected {
    background: var(--crm-brand-soft) !important;
    color: var(--crm-brand-dark) !important;
}

body.eazydezk-app .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--crm-brand) !important;
    box-shadow: 0 0 0 3px rgba(66, 134, 244, 0.18) !important;
    outline: none !important;
}

/* ---- Status pills (keep readable on new rows) ---- */
body.eazydezk-app .lm-status-pill {
    font-weight: 600;
    border-radius: 999px;
}

@media (max-width: 768px) {
    body.eazydezk-app .dataTables_wrapper .dataTables_length,
    body.eazydezk-app .dataTables_wrapper .dataTables_filter {
        text-align: left;
        float: none;
        width: 100%;
    }

    body.eazydezk-app .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.eazydezk-app .breadcrumb::before,
    body.eazydezk-app .admin-breadcrumb::before {
        animation: none;
    }
}