/* Admin/Professional workspace remaster — derived from the approved dashboard kit. */
:root {
    --ws-ink: #16211a;
    --ws-muted: #6b786f;
    --ws-soft: #f4f6f3;
    --ws-surface: #ffffff;
    --ws-border: #e3e8e2;
    --ws-green: #0e5c31;
    --ws-green-soft: #e7f2ea;
    --ws-radius: 20px;
}

/* Professional dashboard */
.professional-workspace {
    max-width: 1240px;
    margin: 0 auto;
}

.professional-workspace .dashboard-hub-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.professional-workspace .dashboard-hub-header {
    padding: 8px 4px 18px !important;
}

.professional-workspace .dashboard-hub-title {
    color: var(--ws-ink) !important;
    font-size: clamp(25px, 3vw, 34px) !important;
    letter-spacing: -.8px !important;
}

.professional-workspace .dashboard-hub-subtitle {
    color: var(--ws-muted) !important;
    font-size: 13px !important;
}

.professional-workspace .dashboard-role-pill {
    background: var(--ws-green-soft) !important;
    color: var(--ws-green) !important;
    box-shadow: none !important;
    border: 1px solid #cfe2d4;
}

.professional-workspace .dashboard-hub-body {
    padding: 0 4px 24px !important;
}

.professional-workspace .dash-section-label {
    color: #7c8a80 !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: .14em !important;
}

.professional-workspace .dash-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.professional-workspace .dash-action-card {
    min-height: 98px !important;
    padding: 16px !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    background: var(--ws-surface) !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: 16px !important;
    color: var(--ws-ink) !important;
    box-shadow: 0 5px 14px rgba(15, 42, 27, .035) !important;
}

.professional-workspace .dash-action-card:hover {
    transform: translateY(-2px);
    border-color: #b9d2c0 !important;
    box-shadow: 0 10px 22px rgba(15, 42, 27, .08) !important;
}

.professional-workspace .dash-action-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--ws-green-soft);
    color: var(--ws-green);
    font-size: 15px;
}

.professional-workspace .dash-action-label {
    color: var(--ws-ink) !important;
    font-size: 12.5px !important;
    line-height: 1.25;
    text-align: left;
}

.professional-workspace .professional-stats-grid {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    gap: 14px !important;
}

.professional-workspace .pro-wallet-card {
    grid-column: auto !important;
    min-height: 154px;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #0b4f2a, #0e6a39) !important;
    padding: 22px !important;
}

.professional-workspace .dash-card,
.professional-workspace .risk-card,
.professional-workspace .chart-panel {
    background: var(--ws-surface) !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 16px rgba(15, 42, 27, .035) !important;
}

.professional-workspace .professional-stats-grid > .dash-card {
    min-height: 154px;
    padding: 20px !important;
}

.professional-workspace .risk-card {
    background: #fff !important;
    padding: 16px !important;
}

.professional-workspace .risk-number { color: var(--ws-ink) !important; }

/* Clients list */
.clients-container,
.retention-container,
.form-container {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 28px 24px 120px !important;
}

.clients-container .page-header,
.retention-container .retention-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 22px !important;
    margin-bottom: 0 !important;
}

.clients-container .page-title,
.retention-container .retention-header h1 {
    color: var(--ws-ink) !important;
    font-size: clamp(25px, 3vw, 34px) !important;
    font-weight: 800 !important;
    letter-spacing: -.8px;
}

.retention-container .retention-header h1 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--ws-ink) !important;
}

.clients-container .page-title .icon { display: none; }
.clients-container .page-header p { margin-left: 0 !important; color: var(--ws-muted) !important; font-weight: 500 !important; }

.clients-container .btn-primary,
.clients-container .btn-secondary,
.retention-container .btn-back,
.retention-container .filter-button,
.retention-container .btn-send-bulk {
    border-radius: 11px !important;
    min-height: 42px;
    padding: 10px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}

.clients-container .btn-primary,
.retention-container .filter-button.primary,
.retention-container .btn-send-bulk {
    background: var(--ws-green) !important;
    color: #fff !important;
    border: 1px solid var(--ws-green) !important;
}

.clients-container .btn-secondary,
.retention-container .btn-back,
.retention-container .filter-button.secondary {
    background: #fff !important;
    color: #3c4a41 !important;
    border: 1px solid var(--ws-border) !important;
}

.clients-container .stats-grid,
.retention-container .kpi-dashboard {
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.clients-container .stat-card,
.retention-container .kpi-card {
    background: #fff !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 18px !important;
    transform: none !important;
}

.clients-container .stat-card > div:first-child > div:first-child {
    background: var(--ws-green-soft) !important;
    color: var(--ws-green) !important;
}

.clients-container .stat-card > div:first-child > span {
    background: #f2f5f1 !important;
    color: #5c6960 !important;
}

.clients-container .stat-value,
.clients-container .stat-label {
    color: var(--ws-ink) !important;
}

.clients-container .stat-label { color: var(--ws-muted) !important; }

.clients-container .filters-container,
.clients-container .table-card,
.retention-container .filters-section,
.retention-container .table-card,
.retention-container .chart-card {
    background: #fff !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: var(--ws-radius) !important;
    box-shadow: 0 5px 16px rgba(15, 42, 27, .035) !important;
}

.clients-container .filters-container,
.retention-container .filters-section { padding: 18px !important; }

.clients-container .form-select,
.retention-container .filter-select,
.form-container .form-control {
    background: #fafbf9 !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: 11px !important;
    color: var(--ws-ink) !important;
    min-height: 44px;
    box-shadow: none !important;
}

.clients-container .form-select:focus,
.retention-container .filter-select:focus,
.form-container .form-control:focus {
    background: #fff !important;
    border-color: var(--ws-green) !important;
    box-shadow: 0 0 0 3px rgba(14, 92, 49, .08) !important;
}

.clients-container .table-header,
.retention-container .table-actions {
    background: #fff !important;
    border-bottom: 1px solid #eef2ed !important;
}

/* Clients: structure and content hierarchy from the approved admin kit. */
.clients-container {
    max-width: 1240px !important;
    padding: 32px 28px 108px !important;
}

.clients-container .clients-workspace-header {
    padding: 0 !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.clients-workspace-heading .workspace-kicker,
.clients-container .table-header .workspace-kicker {
    display: block;
    margin-bottom: 7px;
    color: #7c8a80;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.clients-container .page-title {
    color: #0f2a1b !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -.9px;
    line-height: 1.05;
}

.clients-workspace-heading > p {
    margin: 7px 0 0;
    color: #6b786f;
    font-size: 13px;
}

.clients-container .header-actions a {
    min-height: 42px;
    padding: 0 16px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
}

.clients-container .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.clients-container .stat-card {
    min-height: 154px;
    text-align: left !important;
}

.clients-container .stat-card > div:first-child {
    min-height: 28px;
    margin-bottom: 12px !important;
}

.clients-container .stat-card > div:first-child > div:first-child {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.clients-container .stat-card > div:first-child > span {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px !important;
    letter-spacing: .08em !important;
}

.clients-container .stat-value {
    margin: 0 0 5px !important;
    font-size: 34px !important;
    letter-spacing: -1px;
}

.clients-container .stat-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.clients-container .stat-hint {
    margin-top: 6px;
    color: #8a968d;
    font-size: 11px;
}

.clients-container .filters-container {
    margin-bottom: 16px !important;
}

.clients-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.clients-search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: min(430px, 100%);
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #e7ebe6;
    border-radius: 11px;
    background: #f5f7f4;
    color: #8a968d;
}

.clients-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0f2a1b;
    font: inherit;
    font-size: 13px;
}

.clients-result-copy {
    margin-left: auto;
    color: #8a968d;
    font-size: 11px;
}

.clients-container .filters-row {
    align-items: end !important;
    gap: 10px !important;
}

.clients-container .filter-group label {
    color: #6b786f !important;
    font-size: 10px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clients-container .btn-filter,
.clients-container .btn-clear-filters {
    min-height: 42px !important;
    padding: 0 15px !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: 12px !important;
}

.clients-container .table-header {
    padding: 17px 21px !important;
}

.clients-container .table-header h2 {
    color: #0f2a1b !important;
    font-size: 16px !important;
}

.clients-container .table-body {
    padding: 0 20px 18px !important;
}

.clients-container .dataTables_wrapper > .row:first-child {
    display: none;
}

.clients-container table.dataTable {
    border-spacing: 0 !important;
}

.clients-container table.dataTable tbody tr {
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

.clients-container table.dataTable tbody td {
    padding: 14px 10px !important;
    border-bottom: 1px solid #f2f5f1 !important;
    font-size: 13px !important;
}

.clients-container .btn-action {
    width: 32px;
    height: 32px;
    justify-content: center;
    padding: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    border: 1px solid #e3e8e2 !important;
    box-shadow: none !important;
    transform: none !important;
}

.clients-container .btn-action .btn-text {
    display: none;
}

.clients-container table thead,
.retention-container table thead { background: #fafbf9 !important; }

.clients-container table thead th,
.retention-container table thead th {
    color: #7c8a80 !important;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Client create/edit */
.form-container { max-width: 980px !important; }
.form-container .back-link {
    color: var(--ws-green) !important;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px !important;
}

.form-container .form-card {
    background: #fff !important;
    border: 1px solid var(--ws-border) !important;
    border-radius: var(--ws-radius) !important;
    box-shadow: 0 8px 24px rgba(15, 42, 27, .05) !important;
    padding: 26px !important;
}

.form-container .form-card > h2 {
    color: var(--ws-ink) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -.6px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eef2ed;
}

.form-container .form-group { margin-bottom: 20px !important; }
.form-container .form-label { color: #3c4a41 !important; font-size: 12px !important; font-weight: 700 !important; }

.form-container .btn-submit,
.form-container .btn-send-credentials {
    background: var(--ws-green) !important;
    border-radius: 11px !important;
    min-height: 46px;
    box-shadow: none !important;
    transform: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Retention */
.retention-container .kpi-dashboard { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.retention-container .kpi-icon { width: 34px !important; height: 34px !important; border-radius: 11px !important; }
.retention-container .kpi-value { color: var(--ws-ink) !important; font-size: 28px !important; }
.retention-container .charts-section { gap: 16px !important; }
.retention-container .chart-card { padding: 20px !important; }
.retention-container .alert-warning { border-radius: 16px !important; box-shadow: none !important; }

/* Lighter app drawer: same permissions and links, much less visual noise. */
#offcanvasLeft {
    width: min(390px, 88vw) !important;
    border: 0 !important;
    box-shadow: 22px 0 56px rgba(15, 42, 27, .12) !important;
}

#offcanvasLeft .offcanvas-header {
    min-height: 82px !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid #eef2ed !important;
}

#offcanvasLeft .offcanvas-body { padding: 12px 16px 24px !important; }
#offcanvasLeft .navbar-nav { gap: 2px !important; }
#offcanvasLeft .navbar-nav > li { margin: 0 !important; }

#offcanvasLeft .nav-link {
    min-height: 46px !important;
    padding: 8px 10px !important;
    border-radius: 11px !important;
    gap: 12px !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    color: #2d3a31 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#offcanvasLeft .nav-link:hover,
#offcanvasLeft .nav-link.active {
    color: var(--ws-green) !important;
    background: #f2f7f3 !important;
}

#offcanvasLeft .nav-link .dz-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #62806d !important;
}

#offcanvasLeft .nav-link:hover .dz-icon,
#offcanvasLeft .nav-link.active .dz-icon { background: var(--ws-green-soft) !important; color: var(--ws-green) !important; }
#offcanvasLeft .nav-link .dz-icon svg { width: 19px !important; height: 19px !important; }
#offcanvasLeft .nav-home-linear .dz-icon svg,
#offcanvasLeft .nav-profile-linear .dz-icon svg,
#offcanvasLeft .nav-install-linear .dz-icon svg { display: none !important; }
#offcanvasLeft .nav-home-linear .dz-icon > i,
#offcanvasLeft .nav-profile-linear .dz-icon > i,
#offcanvasLeft .nav-install-linear .dz-icon > i {
    display: inline-flex;
    font-size: 18px;
    font-weight: 400 !important;
    line-height: 1;
}
#offcanvasLeft .sub-menu { margin: 2px 0 6px 36px !important; padding-left: 8px !important; border-left: 1px solid #e3e8e2; }
#offcanvasLeft .sub-menu .nav-link { min-height: 38px !important; padding: 6px 9px !important; font-size: 12.5px !important; }
#offcanvasLeft .sub-menu .dz-icon { display: none !important; }
#offcanvasLeft .menu-divider { margin: 7px 10px !important; border-color: #eef2ed !important; }
#offcanvasLeft .dropdown-icon { margin-left: auto; color: #9aa69d; }

#offcanvasLeft a[href*="ConnectGoogle"] {
    margin: 6px 0 !important;
    border: 1px solid #d8e5db !important;
    background: #f4f8f5 !important;
    color: var(--ws-green) !important;
}

#offcanvasLeft .nav-link small { margin-left: auto !important; font-size: 11px !important; color: #7c8a80 !important; }

@media (max-width: 900px) {
    .professional-workspace .dash-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .professional-workspace .professional-stats-grid { grid-template-columns: 1fr 1fr !important; }
    .professional-workspace .pro-wallet-card { grid-column: 1 / -1 !important; }
    .retention-container .kpi-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 575px) {
    .clients-container,
    .retention-container,
    .form-container { padding: 18px 14px 108px !important; }

    .clients-container .page-header,
    .retention-container .retention-header { align-items: flex-start !important; gap: 14px !important; }
    .clients-container .header-actions { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
    .clients-container .header-actions .btn-primary { grid-column: 1 / -1; }
    .clients-container .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    .clients-container .stat-card { min-height: 148px !important; padding: 14px 10px !important; }
    .clients-container .stat-card > div:first-child { margin-bottom: 18px !important; }
    .clients-container .stat-card > div:first-child > div:first-child { width: 34px !important; height: 34px !important; font-size: 15px !important; }
    .clients-container .stat-card > div:first-child > span { font-size: 8px !important; padding: 3px 6px !important; }
    .clients-container .stat-value { font-size: 28px !important; }
    .clients-container .stat-label { font-size: 9px !important; line-height: 1.25; }
    .professional-workspace .dash-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .professional-workspace .dash-action-card { min-height: 86px !important; }
    .professional-workspace .professional-stats-grid { grid-template-columns: 1fr 1fr !important; }
    .retention-container .kpi-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .retention-container .kpi-card:last-child { grid-column: 1 / -1; }
    .retention-container .charts-section { grid-template-columns: 1fr !important; }
    .form-container .form-card { padding: 20px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .professional-workspace *, .clients-container *, .retention-container *, #offcanvasLeft * { transition: none !important; }
}