/* Client UI polish (scoped via body.client-ui) */

:root {
    --client-primary: #007ea7;
    --client-primary-2: #007ea7;
    --client-text: #111827;
    --client-muted: rgba(17, 24, 39, .55);
    --client-border: rgba(17, 24, 39, .08);
    --client-shadow: 0 14px 28px rgba(17, 24, 39, .08);
    --client-shadow-sm: 0 10px 22px rgba(17, 24, 39, .06);
}

body.client-ui {
    background: #f6f7fb;
}

body.client-ui .dashboard-content {
    animation: clientFadeUp .28s ease-out;
}

body.client-ui .card {
    border-radius: 16px;
    border: 1px solid var(--client-border);
    box-shadow: var(--client-shadow-sm);
}

body.client-ui .card .card-header,
body.client-ui .card .card-body {
    border-radius: 16px;
}

body.client-ui .btn {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .15px;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

body.client-ui .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(17, 24, 39, .10);
}

body.client-ui .btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(17, 24, 39, .08);
}

body.client-ui .btn-primary {
    background: linear-gradient(135deg, var(--client-primary) 0%, var(--client-primary-2) 100%);
    border-color: transparent;
    box-shadow: 0 12px 22px rgba(0, 126, 167, .18);
}

body.client-ui .btn-outline-primary {
    background: #fff;
    border-width: 2px;
    border-color: rgba(0, 126, 167, .35);
    color: #007ea7;
}

body.client-ui .btn-outline-primary:hover {
    background: rgba(0, 126, 167, .06);
    border-color: rgba(0, 126, 167, .55);
}

body.client-ui .form-control:focus,
body.client-ui .custom-select:focus,
body.client-ui select.form-control:focus {
    border-color: rgba(0, 126, 167, .55);
    box-shadow: 0 0 0 .18rem rgba(0, 126, 167, .16);
}

body.client-ui .breadcrumb {
    background: transparent;
}

body.client-ui .breadcrumb .breadcrumb-item a {
    color: rgba(0, 126, 167, .9);
    font-weight: 700;
}

body.client-ui .breadcrumb .breadcrumb-item.active {
    color: rgba(17, 24, 39, .60);
    font-weight: 700;
}

/* Tables: cleaner header, better spacing */
body.client-ui .table {
    color: rgba(17, 24, 39, .80);
}

body.client-ui .table thead th {
    border-bottom: 2px solid rgba(0, 126, 167, .14);
    color: rgba(0, 126, 167, .9);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .18px;
    text-transform: none;
    white-space: nowrap;
}

body.client-ui .table tbody td {
    vertical-align: middle;
    border-top: 1px solid rgba(17, 24, 39, .08);
}

/* Mobile: ensure vertical flow; keep tables scrollable only when needed */
@media (max-width: 576px) {
    body.client-ui .page-header .breadcrumb {
        padding-left: 0;
        padding-right: 0;
    }

    body.client-ui .table-responsive {
        border-radius: 14px;
        border: 1px solid rgba(17, 24, 39, .06);
    }
}

@keyframes clientFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    body.client-ui .dashboard-content,
    body.client-ui .btn {
        animation: none !important;
        transition: none !important;
    }
}