/*
 * ReachLogic Client Portal Theme
 * Scoped to Perfex customer/client area.
 *
 * Brand system:
 * Ink       #132025
 * Dark      #2E4F55
 * Dark 2    #1D363B
 * Teal      #1B7274
 * Teal      #207E80 (bright)
 * Mist      #EEF4F4
 * Paper     #FBFDFD
 * CTA       #E2793A
 * CTA hover #C96328
 */

:root {
    --rl-ink: #132025;
    --rl-dark: #2E4F55;
    --rl-dark-2: #1D363B;
    --rl-teal: #1B7274;
    --rl-teal-bright: #207E80;
    --rl-mist: #EEF4F4;
    --rl-paper: #FBFDFD;
    --rl-line: rgba(19, 32, 37, .10);
    --rl-line-teal: rgba(27, 114, 116, .26);
    --rl-accent: #E2793A;
    --rl-accent-2: #C96328;
    --rl-display: 'Space Grotesk', sans-serif;
    --rl-body: 'Inter', sans-serif;
    --rl-mono: 'IBM Plex Mono', monospace;
    --rl-radius: 14px;
    --rl-button-radius: 8px;
    --rl-shadow: 0 12px 28px -20px rgba(20, 40, 44, .34);
}

/* ---------- Foundation ---------- */

body.customers,
body.customers_login,
.customers {
    font-family: var(--rl-body) !important;
    color: var(--rl-ink);
    background: var(--rl-paper) !important;
    -webkit-font-smoothing: antialiased;
}

.customers #wrapper,
.customers .content,
.customers .customers-content,
.customers main {
    background: var(--rl-paper);
}

.customers h1,
.customers h2,
.customers h3,
.customers h4,
.customers h5,
.customers h6,
.customers .panel-title,
.customers .modal-title {
    font-family: var(--rl-display) !important;
    color: var(--rl-dark-2);
    letter-spacing: -.015em;
}

.customers h1,
.customers h2,
.customers h3 {
    font-weight: 600;
}

.customers p,
.customers td,
.customers th,
.customers label,
.customers input,
.customers textarea,
.customers select,
.customers button {
    font-family: var(--rl-body);
}

.customers a:not(.btn):not(.label):not(.badge) {
    color: var(--rl-teal-bright);
}

.customers a:not(.btn):not(.label):not(.badge):hover,
.customers a:not(.btn):not(.label):not(.badge):focus {
    color: var(--rl-teal);
}

.customers .text-muted,
.customers small,
.customers .help-block {
    color: #5C7176 !important;
}

/* ---------- Main navigation ---------- */

.customers .navbar-default,
.customers .navbar {
    background: rgba(251, 253, 253, .96) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
    box-shadow: none !important;
}

.customers .navbar-default .navbar-nav > li > a,
.customers .navbar-nav > li > a {
    color: var(--rl-dark-2) !important;
    font-weight: 500;
    transition: color .15s ease, background .15s ease;
}

.customers .navbar-default .navbar-nav > li > a:hover,
.customers .navbar-default .navbar-nav > li > a:focus,
.customers .navbar-default .navbar-nav > .active > a,
.customers .navbar-default .navbar-nav > .active > a:hover,
.customers .navbar-default .navbar-nav > .active > a:focus {
    color: var(--rl-teal-bright) !important;
    background: transparent !important;
}

.customers .navbar-default .navbar-toggle {
    border-color: var(--rl-line-teal);
    border-radius: var(--rl-button-radius);
}

.customers .navbar-default .navbar-toggle .icon-bar {
    background-color: var(--rl-dark-2);
}

.customers .navbar-brand {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.customers .navbar-brand img,
.customers img.rl-portal-logo {
    width: auto !important;
    height: auto !important;
    max-width: 190px !important;
    max-height: 40px !important;
    object-fit: contain;
}

/* ---------- Page spacing ---------- */

.customers .container,
.customers .container-fluid {
    position: relative;
}

.customers .customers-nav-item-login,
.customers .customers-nav-item-register {
    font-weight: 600;
}

/* ---------- Panels / cards ---------- */

.customers .panel,
.customers .panel_s,
.customers .card,
.customers .tw-bg-white,
.customers .well {
    background: #fff;
    border-color: var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: var(--rl-shadow);
}

.customers .panel_s {
    border: 0;
}

.customers .panel_s .panel-body,
.customers .panel-body {
    border-radius: var(--rl-radius);
}

.customers .panel-heading {
    background: var(--rl-mist) !important;
    border-color: var(--rl-line) !important;
    color: var(--rl-dark-2) !important;
    border-radius: var(--rl-radius) var(--rl-radius) 0 0;
}

.customers .panel-footer {
    background: #fff;
    border-color: var(--rl-line);
    border-radius: 0 0 var(--rl-radius) var(--rl-radius);
}

/* Summary tiles/cards found across client dashboard pages */
.customers [class*="summary"] .panel,
.customers [class*="summary"] .card,
.customers .project-summary,
.customers .invoice-summary,
.customers .ticket-summary {
    border-color: var(--rl-line) !important;
}

/* ---------- Buttons ---------- */

.customers .btn {
    border-radius: var(--rl-button-radius) !important;
    font-family: var(--rl-body) !important;
    font-weight: 600 !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease !important;
}

.customers .btn-primary,
.customers .btn-info {
    color: #fff !important;
    background: var(--rl-accent) !important;
    border-color: var(--rl-accent) !important;
}

.customers .btn-primary:hover,
.customers .btn-primary:focus,
.customers .btn-primary:active,
.customers .btn-info:hover,
.customers .btn-info:focus,
.customers .btn-info:active {
    color: #fff !important;
    background: var(--rl-accent-2) !important;
    border-color: var(--rl-accent-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(226, 121, 58, .25);
}

.customers .btn-default,
.customers .btn-secondary {
    color: var(--rl-dark-2) !important;
    background: #fff !important;
    border-color: var(--rl-line-teal) !important;
}

.customers .btn-default:hover,
.customers .btn-default:focus,
.customers .btn-secondary:hover,
.customers .btn-secondary:focus {
    color: var(--rl-teal-bright) !important;
    background: var(--rl-mist) !important;
    border-color: rgba(27, 114, 116, .45) !important;
}

.customers .btn-success {
    background: var(--rl-teal-bright) !important;
    border-color: var(--rl-teal-bright) !important;
}

.customers .btn-success:hover,
.customers .btn-success:focus {
    background: var(--rl-teal) !important;
    border-color: var(--rl-teal) !important;
}

/* Preserve danger/destructive actions as semantic red. */
.customers .btn-danger {
    border-radius: var(--rl-button-radius) !important;
}

/* ---------- Forms ---------- */

.customers .form-control,
.customers input[type="text"],
.customers input[type="email"],
.customers input[type="password"],
.customers input[type="number"],
.customers input[type="search"],
.customers textarea,
.customers select {
    color: var(--rl-ink);
    background: #fff;
    border-color: rgba(19, 32, 37, .16) !important;
    border-radius: var(--rl-button-radius) !important;
    box-shadow: none !important;
}

.customers .form-control:focus,
.customers input:focus,
.customers textarea:focus,
.customers select:focus {
    border-color: var(--rl-teal-bright) !important;
    box-shadow: 0 0 0 3px rgba(32, 126, 128, .10) !important;
    outline: 0;
}

.customers label,
.customers .control-label {
    color: var(--rl-dark-2);
    font-weight: 600;
}

/* ---------- Tables / DataTables ---------- */

.customers .table {
    color: var(--rl-ink);
    background: #fff;
}

.customers .table > thead > tr > th,
.customers table.dataTable thead > tr > th {
    color: var(--rl-dark-2) !important;
    background: var(--rl-mist) !important;
    border-color: var(--rl-line) !important;
    font-family: var(--rl-body);
    font-weight: 600;
}

.customers .table > tbody > tr > td,
.customers .table > tbody > tr > th {
    border-color: rgba(19, 32, 37, .07) !important;
}

.customers .table-hover > tbody > tr:hover {
    background: rgba(238, 244, 244, .64) !important;
}

.customers .dataTables_wrapper .dataTables_filter input,
.customers .dataTables_wrapper .dataTables_length select {
    border-radius: var(--rl-button-radius) !important;
    border-color: rgba(19, 32, 37, .16) !important;
}

/* ---------- Pagination ---------- */

.customers .pagination > li > a,
.customers .pagination > li > span {
    color: var(--rl-dark-2) !important;
    border-color: var(--rl-line) !important;
    background: #fff !important;
}

.customers .pagination > .active > a,
.customers .pagination > .active > a:hover,
.customers .pagination > .active > span,
.customers .pagination > .active > span:hover {
    color: #fff !important;
    background: var(--rl-teal-bright) !important;
    border-color: var(--rl-teal-bright) !important;
}

/* ---------- Tabs ---------- */

.customers .nav-tabs {
    border-bottom-color: var(--rl-line);
}

.customers .nav-tabs > li > a {
    color: #4C6469 !important;
    border-radius: var(--rl-button-radius) var(--rl-button-radius) 0 0;
}

.customers .nav-tabs > li.active > a,
.customers .nav-tabs > li.active > a:hover,
.customers .nav-tabs > li.active > a:focus,
.customers .nav-tabs > li > a:hover {
    color: var(--rl-teal-bright) !important;
    background: #fff !important;
    border-color: var(--rl-line) var(--rl-line) #fff !important;
}

/* ---------- Alerts ---------- */

.customers .alert {
    border-radius: var(--rl-radius);
    border-width: 1px;
}

.customers .alert-info {
    color: var(--rl-dark-2);
    background: var(--rl-mist);
    border-color: var(--rl-line-teal);
}

.customers .alert-success {
    color: #155E60;
    background: #EDF8F7;
    border-color: rgba(32, 126, 128, .24);
}

/* ---------- Progress ---------- */

.customers .progress {
    height: 18px;
    background: var(--rl-mist);
    border-radius: 100px;
    box-shadow: none;
}

.customers .progress-bar,
.customers .progress-bar-info,
.customers .progress-bar-success {
    min-height: 18px;
    line-height: 18px;
    background: var(--rl-teal-bright) !important;
    border-radius: 100px;
}

/* ---------- Modals / dropdowns ---------- */

.customers .modal-content,
.customers .dropdown-menu {
    border-color: var(--rl-line);
    border-radius: var(--rl-radius);
    box-shadow: 0 20px 44px -22px rgba(20, 40, 44, .40);
}

.customers .modal-header,
.customers .modal-footer {
    border-color: var(--rl-line);
}

.customers .dropdown-menu > li > a {
    color: var(--rl-dark-2) !important;
}

.customers .dropdown-menu > li > a:hover,
.customers .dropdown-menu > li > a:focus {
    color: var(--rl-teal-bright) !important;
    background: var(--rl-mist) !important;
}

/* ---------- Labels / badges ---------- */

.customers .badge {
    background: var(--rl-dark);
    border-radius: 100px;
}

.customers .label {
    border-radius: 100px;
    font-weight: 600;
    padding: .35em .7em;
}

.customers .label-info,
.customers .label-primary {
    background: var(--rl-teal-bright) !important;
}

/* ---------- Client dashboard ---------- */

.customers .customers-home h3,
.customers .customers-home h4 {
    color: var(--rl-dark-2);
}

/* ReachLogic ticket dashboard module integration */
.customers .rl-ticket-dashboard {
    margin-top: 28px;
}

.customers .rl-ticket-heading,
.customers .rl-ticket-panel-title {
    font-family: var(--rl-display) !important;
    color: var(--rl-dark-2) !important;
}

.customers .rl-ticket-status-card {
    background: #fff !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
}

.customers .rl-ticket-status-card:hover,
.customers .rl-ticket-status-card:focus {
    border-color: rgba(27, 114, 116, .40) !important;
    box-shadow: var(--rl-shadow) !important;
}

.customers .rl-ticket-status-card .rl-status-label {
    color: var(--rl-teal) !important;
}

.customers .rl-ticket-status-card .rl-status-count {
    color: var(--rl-dark-2) !important;
    font-family: var(--rl-display);
    font-size: 18px;
}

.customers .rl-ticket-panel {
    border-radius: var(--rl-radius) !important;
}

.customers .rl-status-badge {
    border-radius: 100px !important;
}

.customers .rl-status-badge-1 {
    background: #FFF0F1 !important;
    color: #B42332 !important;
}

.customers .rl-status-badge-2,
.customers .rl-status-badge-3 {
    background: #EDF8F7 !important;
    color: var(--rl-teal) !important;
}

.customers .rl-status-badge-4 {
    background: #F1F4F5 !important;
    color: #52666B !important;
}

.customers .rl-status-badge-5 {
    background: var(--rl-mist) !important;
    color: var(--rl-dark) !important;
}

/* ---------- Authentication/client login ---------- */

body.customers_login,
.customers .login-form,
.customers .register-form {
    background: var(--rl-paper) !important;
}

.customers .login-form .panel,
.customers .register-form .panel,
.customers .login-form,
.customers .register-form {
    border-radius: var(--rl-radius);
}

/* ---------- Footer ---------- */

.customers footer,
.customers .footer {
    color: rgba(255,255,255,.68) !important;
    background: var(--rl-dark-2) !important;
    border-top: 0 !important;
}

.customers footer a,
.customers .footer a {
    color: #fff !important;
}

.customers footer a:hover,
.customers .footer a:hover {
    color: #9ED0D1 !important;
}

/* ---------- Selection / focus ---------- */

.customers ::selection {
    color: var(--rl-dark-2);
    background: rgba(32, 126, 128, .20);
}

.customers a:focus-visible,
.customers button:focus-visible,
.customers input:focus-visible,
.customers textarea:focus-visible,
.customers select:focus-visible {
    outline: 2px solid var(--rl-teal-bright);
    outline-offset: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {
    .customers .navbar-brand img,
    .customers img.rl-portal-logo {
        max-width: 155px !important;
        max-height: 34px !important;
    }

    .customers .panel-body,
    .customers .panel_s .panel-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .customers .table-responsive {
        border: 0;
    }
}


/* ==========================================================================
   v1.1 dashboard polish
   ========================================================================== */

/* Keep the client portal on the same 1180px content rhythm as ReachLogic. */
.customers .container {
    max-width: 1180px;
}

/* Dashboard section rhythm */
.customers .customers-home > h3,
.customers .customers-home > h4,
.customers .customers-home .tw-font-medium {
    margin-top: 0;
}

.customers .rl-ticket-dashboard {
    margin-top: 36px;
    margin-bottom: 30px;
}

/*
 * Perfex project summary tiles use several different wrappers depending on
 * version. These selectors deliberately style only the dashboard's compact
 * summary boxes, not normal project cards.
 */
.customers .projects-summary .panel,
.customers .project-summary .panel,
.customers .projects-summary .tw-border,
.customers .project-summary .tw-border,
.customers .customers-home .project-status,
.customers .customers-home [class*="project-status"] {
    background: #fff !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: none !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.customers .projects-summary .panel:hover,
.customers .project-summary .panel:hover,
.customers .projects-summary .tw-border:hover,
.customers .project-summary .tw-border:hover {
    border-color: rgba(27, 114, 116, .34) !important;
    transform: translateY(-1px);
    box-shadow: var(--rl-shadow) !important;
}

/* Make the ticket cards and project cards feel like one component family. */
.customers .rl-ticket-status-card {
    min-height: 72px !important;
    padding: 15px 16px !important;
}

/* Recent support tickets: soften the shell and give the table more breathing room. */
.customers .rl-ticket-panel {
    overflow: hidden;
    box-shadow: 0 14px 32px -24px rgba(20, 40, 44, .40) !important;
}

.customers .rl-ticket-panel .panel-body {
    padding: 22px 24px !important;
}

.customers .rl-ticket-table > thead > tr > th {
    background: var(--rl-mist) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/*
 * Quick invoice information.
 * Perfex renders a large Chart.js canvas even when every invoice value is zero.
 * Keep the chart useful without allowing an empty graph to dominate the page.
 */
.customers #invoice-payment-modes-chart,
.customers #client-home-chart,
.customers canvas[id*="invoice"],
.customers .customers-home canvas {
    max-height: 300px !important;
}

.customers .customers-home .chart,
.customers .customers-home .chart-container,
.customers .customers-home [class*="chart-container"] {
    max-height: 330px;
}

/* Dashboard statistic/progress areas */
.customers .customers-home .progress {
    height: 18px !important;
    margin-top: 7px;
    border-radius: 100px !important;
    overflow: hidden;
}

.customers .customers-home .progress-bar {
    min-height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
    font-weight: 600;
    white-space: nowrap;
    overflow: visible;
}

/* More consistent space before the footer on short pages. */
.customers #wrapper,
.customers .customers-content {
    min-height: calc(100vh - 142px);
}

/* ==========================================================================
   v1.1 login polish
   ========================================================================== */

body.customers_login .customers-content,
body.customers_login #wrapper,
body.customers_login main {
    background:
        radial-gradient(circle at 15% 10%, rgba(32,126,128,.075), transparent 30%),
        linear-gradient(180deg, var(--rl-paper) 0%, #F7FAFA 100%) !important;
}

body.customers_login .customers-content {
    min-height: calc(100vh - 142px);
}

/* Support both legacy Bootstrap and newer Perfex login wrappers. */
body.customers_login .login-form,
body.customers_login form[action*="login"],
body.customers_login .panel_s {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
}

body.customers_login .login-form,
body.customers_login form[action*="login"] {
    position: relative;
}

body.customers_login .login-form::before,
body.customers_login form[action*="login"]::before {
    content: 'CLIENT PORTAL';
    display: block;
    margin-bottom: 10px;
    font-family: var(--rl-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--rl-teal-bright);
    text-align: center;
}

body.customers_login .login-form::after,
body.customers_login form[action*="login"]::after {
    content: 'Secure access to projects, billing, documents, and support.';
    display: block;
    margin-top: 17px;
    font-family: var(--rl-body);
    font-size: 12.5px;
    line-height: 1.55;
    color: #687D81;
    text-align: center;
}

body.customers_login .panel,
body.customers_login .panel_s,
body.customers_login form[action*="login"] {
    border: 1px solid var(--rl-line) !important;
    border-radius: var(--rl-radius) !important;
    box-shadow: 0 20px 48px -32px rgba(20,40,44,.42) !important;
}

/* Make the login title feel intentional rather than stock Perfex. */
body.customers_login h1,
body.customers_login h2,
body.customers_login h3 {
    font-family: var(--rl-display) !important;
    font-weight: 600 !important;
    color: var(--rl-dark-2) !important;
}

/* Footer gets a slightly more ReachLogic-like treatment. */
.customers footer,
.customers .footer {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: keep summary groups compact and login comfortable. */
@media (max-width: 767px) {
    .customers .rl-ticket-dashboard {
        margin-top: 28px;
    }

    .customers .rl-ticket-panel .panel-body {
        padding: 18px 16px !important;
    }

    body.customers_login .login-form,
    body.customers_login form[action*="login"],
    body.customers_login .panel_s {
        max-width: 100%;
    }

    .customers .customers-home canvas {
        max-height: 240px !important;
    }
}