/* ReposX visual system: shared authentication and admin shell polish. */
:root {
    --rx-ink: #172033;
    --rx-muted: #667085;
    --rx-brand: #284b8f;
    --rx-brand-dark: #193466;
    --rx-brand-bright: #365fe5;
    --rx-silver: #f4f7fb;
    --rx-silver-strong: #d8e0ec;
    --rx-brand-soft: #eef4ff;
    --rx-line: #e5eaf2;
    --rx-surface: #ffffff;
    --rx-shadow: 0 18px 45px rgba(24, 39, 75, .10), 0 3px 10px rgba(24, 39, 75, .05);
}

/* Clean, balanced login canvas shared by staff and customer login. */
body.login_admin,
body.customers_login,
body.register,
body.forgot-password {
    min-height: 100vh;
    background: radial-gradient(circle at 8% 8%, #f5f8ff 0, #f7f9fc 38%, #eef2f7 100%) !important;
    color: var(--rx-ink);
}

body.login_admin::before,
body.customers_login::before,
body.register::before,
body.forgot-password::before {
    content: "";
    position: fixed;
    width: 380px;
    height: 380px;
    right: -130px;
    top: -150px;
    border-radius: 50%;
    background: rgba(40, 75, 143, .08);
    pointer-events: none;
}

.login_admin .authentication-form-wrapper {
    padding-top: clamp(28px, 8vh, 86px);
    padding-bottom: 32px;
}

.login_admin .company-logo {
    padding: 0 10px 24px;
}

.login_admin .company-logo img,
.customer-login .company-logo img,
.customer-auth-page .company-logo img,
.customer-register .company-logo img {
    max-width: 190px;
    max-height: 78px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(16, 24, 40, .12));
}

.login_admin .authentication-form-wrapper > .tw-mb-5 { display: none; }

.login_admin .authentication-form-wrapper > div:last-child {
    border: 1px solid rgba(255, 255, 255, .75) !important;
    border-radius: 18px !important;
    box-shadow: var(--rx-shadow) !important;
    padding: 30px !important;
}

.login_admin .form-control,
.customers_login .form-control,
.forgot-password .form-control,
.register .form-control {
    height: 46px;
    border: 1px solid var(--rx-line);
    border-radius: 10px;
    box-shadow: none;
    color: var(--rx-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.login_admin .form-control:focus,
.customers_login .form-control:focus,
.forgot-password .form-control:focus,
.register .form-control:focus {
    border-color: var(--rx-brand);
    box-shadow: 0 0 0 4px rgba(40, 75, 143, .12);
}

.login_admin .btn-primary,
.customers_login .btn-primary,
.forgot-password .btn-primary,
.register .btn-primary {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rx-brand), var(--rx-brand-dark));
    box-shadow: 0 8px 18px rgba(40, 75, 143, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.login_admin .btn-primary:hover,
.customers_login .btn-primary:hover,
.forgot-password .btn-primary:hover,
.register .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(40, 75, 143, .28); }

/* Customer auth pages use the same card language as staff login. */
body.customers_login #wrapper,
body.forgot-password #wrapper,
body.register #wrapper { min-height: 100vh; }
body.customers_login #content > .container,
body.forgot-password #content > .container,
body.register #content > .container { width: 100%; max-width: none; }
body.customers_login #content > .container > .row,
body.forgot-password #content > .container > .row,
body.register #content > .container > .row { margin-left: 0; margin-right: 0; }
.customer-login,
.customer-auth-page,
.customer-register { width: 100%; padding: 0 16px; }
.customer-login .login-shell,
.customer-auth-page .customer-auth-shell { width: min(100%, 440px); margin: 0 auto; padding: clamp(28px, 8vh, 86px) 0 32px; }
.customer-register .register-shell { width: min(100%, 980px); margin: 0 auto; padding: clamp(24px, 6vh, 64px) 0 36px; }
.customer-login .company-logo,
.customer-auth-page .company-logo,
.customer-register .company-logo { margin-bottom: 22px; text-align: center; }
.customer-login .login-form { width: 100%; }
.customer-login .login-heading { display: none; }
.customer-login .login-form .panel_s,
.customer-auth-page .panel_s,
.register .panel_s { border: 0; border-radius: 18px; box-shadow: var(--rx-shadow); overflow: hidden; }
.customer-login .login-form .panel-body,
.customer-auth-page .panel-body { padding: 30px; }
.customers_login .btn-default { min-height: 46px; border: 1px solid var(--rx-line); border-radius: 10px; background: #fff; color: var(--rx-brand); }
.customers_login label,
.forgot-password label,
.register label { color: var(--rx-ink); font-weight: 600; }
.auth-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 0 auto 20px; font-size: 13px; }
.auth-links a { color: var(--rx-muted); text-decoration: none; }
.auth-links a:hover, .auth-links a.active { color: var(--rx-brand); font-weight: 600; }
.customers_login .panel-body,
.forgot-password .panel-body,
.register .panel-body { background: var(--rx-surface); }
.customers_login .form-control::placeholder,
.forgot-password .form-control::placeholder,
.register .form-control::placeholder,
.login_admin .form-control::placeholder { color: #98a2b3; opacity: 1; }
.customer-auth-page h1,
.register .register-heading { color: var(--rx-ink); font-size: 22px; line-height: 1.3; margin-top: 0; text-align: center; }
.register .panel_s,
.register #register-form { border-radius: 16px; }
.register .panel-body { padding: 30px; }
.register .panel-footer { padding: 18px 30px; background: #fff; border-top: 1px solid var(--rx-line); }
.register .panel-footer .btn-primary { min-width: 160px; }
.register .register-language { width: min(100%, 260px); margin: 0 auto 18px; }
.register .auth-links { width: 100%; margin-bottom: 16px; }
.register .panel-body > .row { margin-left: -10px; margin-right: -10px; }
.register .panel-body > .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }
.forgot-password .authentication-form-wrappe > .tw-bg-white { box-shadow: var(--rx-shadow) !important; border-radius: 18px !important; }
.forgot-password .form-control { height: 46px; border-radius: 10px; }
.forgot-password .btn-primary { min-height: 46px; border-radius: 10px; }

.login_admin .rx-powered-by,
.authentication.forgot-password .rx-powered-by {
    margin: 18px auto 0;
    color: var(--rx-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.login_admin .rx-powered-by a,
.authentication.forgot-password .rx-powered-by a {
    color: var(--rx-brand);
    font-weight: 800;
    text-decoration: none;
}

.login_admin .rx-powered-by a:hover,
.authentication.forgot-password .rx-powered-by a:hover {
    color: var(--rx-brand-dark);
}

/* Refined admin navigation; existing markup and menu behavior remain unchanged. */
#menu.sidebar {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, var(--rx-silver) 58%, #edf2f8 100%);
    border-right: 1px solid var(--rx-line);
    box-shadow: 8px 0 24px rgba(24, 39, 75, .04);
}
#menu.sidebar ul.nav li a { border-radius: 10px; color: #344054; transition: background .2s ease, color .2s ease, transform .2s ease; }
#menu.sidebar ul.nav li a i.menu-icon { color: #6b778c; transition: color .2s ease, transform .2s ease; }
#menu.sidebar > ul.nav > li.active a:first-child,
#menu.sidebar > ul.nav > li:hover a:first-child { background: linear-gradient(135deg, #f2f6ff, #eaf1ff); border-color: transparent; color: var(--rx-brand); box-shadow: none; }
#menu.sidebar > ul.nav > li.active a:first-child { background: linear-gradient(135deg, var(--rx-brand), var(--rx-brand-dark)); color: #fff; box-shadow: 0 8px 18px rgba(40, 75, 143, .18); }
#menu.sidebar ul.nav li a:hover i.menu-icon,
#menu.sidebar ul.nav li.active a i.menu-icon { color: #fff; transform: translateX(1px); }
#menu.sidebar ul.nav li a:hover i.menu-icon { color: var(--rx-brand); transform: translateX(1px); }
#menu.sidebar ul.nav li.active a:hover i.menu-icon { color: #fff; }
#menu.sidebar .sidebar-user-profile > a { border-color: var(--rx-line); box-shadow: 0 5px 14px rgba(24, 39, 75, .06); }

/* ReposX admin UI refinement: clearer hierarchy, softer surfaces, and logo-aligned details. */
body:not(.customers):not(.login_admin) {
    background: #f5f7fb;
    color: var(--rx-ink);
    text-rendering: optimizeLegibility;
}

body:not(.customers):not(.login_admin) #wrapper {
    background: linear-gradient(180deg, #f7f9fc 0%, #f2f5f9 100%);
}

#header {
    min-height: 58px;
    border-bottom: 1px solid rgba(216, 224, 236, .92);
    background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(247, 249, 252, .94) 100%);
    box-shadow: 0 10px 24px rgba(24, 39, 75, .07);
    backdrop-filter: blur(12px);
}

#header .hide-menu,
#header .mobile-menu-toggle,
.navbar-nav > li > a {
    color: #445166;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

#header .hide-menu:hover,
#header .mobile-menu-toggle:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    color: var(--rx-brand);
    background: rgba(40, 75, 143, .07);
}

#header .navbar-nav > li > a i {
    color: inherit;
}

#header .icon-total-indicator {
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(25, 52, 102, .18);
}

#top_search {
    align-items: center;
}

#top_search input#search_input,
#top_search input[type="search"] {
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #f0f3f8;
    color: var(--rx-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#top_search input#search_input:focus,
#top_search input[type="search"]:focus {
    border-color: rgba(40, 75, 143, .28);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(40, 75, 143, .10);
}

#top_search_button button,
#top_search_button i {
    color: #7c8798;
}

#top_search:focus-within #top_search_button button,
#top_search:focus-within #top_search_button i {
    color: var(--rx-brand);
}

#header .btn-info,
#header .btn-primary,
.screen-options-btn {
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--rx-brand-bright), var(--rx-brand-dark)) !important;
    box-shadow: 0 8px 18px rgba(40, 75, 143, .20);
    color: #fff !important;
}

#header .btn-info:hover,
#header .btn-primary:hover,
.screen-options-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(40, 75, 143, .26);
}

#menu.sidebar {
    padding-left: 8px;
    padding-right: 8px;
}

#menu.sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(54, 95, 229, .26), rgba(216, 224, 236, .35), rgba(25, 52, 102, .12));
    pointer-events: none;
}

#menu.sidebar .sidebar-user-profile > a {
    border: 1px solid rgba(216, 224, 236, .95);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(244, 247, 251, .95));
}

#menu.sidebar .sidebar-user-profile .media-body,
#menu.sidebar .sidebar-user-profile .media-body a,
#menu.sidebar .sidebar-user-profile .media-heading {
    color: var(--rx-ink);
}

#menu.sidebar > ul.nav > li {
    margin-bottom: 4px;
}

#menu.sidebar ul.nav li a {
    min-height: 38px;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 600;
}

#menu.sidebar > ul.nav > li.active a:first-child {
    position: relative;
}

#menu.sidebar > ul.nav > li.active a:first-child::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, .56));
    box-shadow: 0 0 12px rgba(40, 75, 143, .42);
}

#menu.sidebar ul.nav li .nav-second-level li a {
    border-radius: 8px;
    color: #5c6678;
}

#menu.sidebar ul.nav li .nav-second-level li.active a,
#menu.sidebar ul.nav li .nav-second-level li a:hover {
    background: rgba(40, 75, 143, .08);
    color: var(--rx-brand);
}

.panel_s,
.widget .panel_s,
.dashboard .quick-stats-invoices .panel_s,
.dashboard .quick-stats-leads .panel_s,
.dashboard .quick-stats-projects .panel_s,
.dashboard .quick-stats-tasks .panel_s {
    border: 1px solid rgba(216, 224, 236, .95);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(24, 39, 75, .08), 0 2px 8px rgba(24, 39, 75, .04);
}

.widget .panel_s {
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.widget .panel_s:hover {
    transform: translateY(-2px);
    border-color: rgba(40, 75, 143, .22);
    box-shadow: 0 18px 42px rgba(24, 39, 75, .11), 0 4px 14px rgba(24, 39, 75, .05);
}

.panel_s .panel-body {
    color: #344054;
}

.panel_s .panel-heading,
.panel_s .panel-footer,
.widget .panel_s .panel-heading {
    border-color: var(--rx-line);
    background: #fff;
}

.widget .panel_s .panel-body > h4,
.panel_s h4,
.panel_s .tw-font-medium,
.panel_s .bold {
    color: var(--rx-ink);
}

.dashboard .quick-stats-invoices .panel_s,
.dashboard .quick-stats-leads .panel_s,
.dashboard .quick-stats-projects .panel_s,
.dashboard .quick-stats-tasks .panel_s {
    position: relative;
    overflow: hidden;
}

.dashboard .quick-stats-invoices .panel_s::before,
.dashboard .quick-stats-leads .panel_s::before,
.dashboard .quick-stats-projects .panel_s::before,
.dashboard .quick-stats-tasks .panel_s::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rx-brand-dark), #6f87c9, #dfe6f3);
}

.dashboard .quick-stats-invoices .panel_s i,
.dashboard .quick-stats-leads .panel_s i,
.dashboard .quick-stats-projects .panel_s i,
.dashboard .quick-stats-tasks .panel_s i,
.widget .panel_s h4 i,
.panel_s .panel-heading i {
    color: #64748b;
}

.progress,
.panel_s .progress {
    height: 6px;
    border-radius: 999px;
    background-color: #eef2f7;
    box-shadow: none;
}

.progress-bar,
.panel_s .progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--rx-brand), #8ba1d8);
}

.widget-dragger {
    opacity: .42;
    transition: opacity .2s ease, color .2s ease;
}

.widget:hover .widget-dragger {
    opacity: .8;
    color: var(--rx-brand);
}

.btn-primary,
.btn-info {
    border-radius: 8px;
    border-color: transparent;
    background: linear-gradient(135deg, var(--rx-brand), var(--rx-brand-dark));
    box-shadow: 0 8px 18px rgba(40, 75, 143, .16);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    border-color: transparent;
    background: linear-gradient(135deg, #3157a4, #142b56);
    box-shadow: 0 11px 22px rgba(40, 75, 143, .22);
}

.btn-default {
    border-color: #d8e0ec;
    border-radius: 8px;
    color: #475467;
}

.btn-default:hover,
.btn-default:focus {
    border-color: rgba(40, 75, 143, .28);
    background: #f7f9fc;
    color: var(--rx-brand);
}

.table > thead > tr > th {
    border-bottom-color: var(--rx-line);
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    border-top-color: #edf1f6;
}

.table-hover > tbody > tr:hover {
    background-color: #f8fafc;
}

.form-control,
.bootstrap-select .btn-default {
    border-color: #d8e0ec;
    border-radius: 8px;
    box-shadow: none;
}

.form-control:focus,
.bootstrap-select.open .btn-default,
.bootstrap-select .btn-default:focus {
    border-color: rgba(40, 75, 143, .38);
    box-shadow: 0 0 0 3px rgba(40, 75, 143, .10);
}

.label,
.badge {
    border-radius: 999px;
    font-weight: 700;
}

.rx-admin-powered-by {
    position: fixed;
    right: 18px;
    bottom: 14px;
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100vw - 36px);
    padding: 7px 11px;
    border: 1px solid rgba(216, 224, 236, .95);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 24px rgba(24, 39, 75, .10);
    backdrop-filter: blur(10px);
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.rx-admin-powered-by a {
    color: var(--rx-brand);
    font-weight: 800;
    text-decoration: none;
}

.rx-admin-powered-by a:hover {
    color: var(--rx-brand-dark);
}

@media (max-width: 575px) {
    .login_admin .authentication-form-wrapper > div:last-child,
    .customer-login .login-form .panel-body,
    .customer-auth-page .panel-body { padding: 22px !important; }
    .login_admin .authentication-form-wrapper { padding-left: 8px; padding-right: 8px; }
    .register .panel-body { padding: 20px; }
    .register .panel-body > .row { margin-left: 0; margin-right: 0; }
    .register .panel-body > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .register .panel-footer { padding: 16px 20px; }
    .register .panel-footer .btn-primary { width: 100%; }
    .customer-register { padding-left: 12px; padding-right: 12px; }
    .login_admin .rx-powered-by,
    .authentication.forgot-password .rx-powered-by {
        margin-top: 14px;
    }
}

@media (max-width: 991px) {
    #header {
        min-height: 54px;
    }
    #top_search input#search_input,
    #top_search input[type="search"] {
        height: 38px;
    }
    #menu.sidebar {
        padding-left: 6px;
        padding-right: 6px;
    }
    .panel_s,
    .widget .panel_s {
        border-radius: 8px;
    }
    .rx-admin-powered-by {
        right: 10px;
        bottom: 10px;
        padding: 6px 10px;
        font-size: 10.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header .hide-menu,
    #header .mobile-menu-toggle,
    .navbar-nav > li > a,
    #top_search input#search_input,
    #top_search input[type="search"],
    #header .btn-info,
    #header .btn-primary,
    .screen-options-btn,
    .widget .panel_s,
    .widget-dragger {
        transition: none;
    }
    #header .btn-info:hover,
    #header .btn-primary:hover,
    .screen-options-btn:hover,
    .widget .panel_s:hover {
        transform: none;
    }
}