/* Modern UI polish layer: stronger visual language with safe global overrides */

:root {
    --modern-bg: #f4f7fb;
    --modern-surface: #ffffff;
    --modern-text: #1f2a37;
    --modern-muted: #6b7280;
    --modern-border: #e5eaf2;
    --modern-primary: #2f6fed;
    --modern-primary-dark: #2459bf;
    --modern-accent: #26d0ce;
    --modern-sidebar-a: #0f172a;
    --modern-sidebar-b: #1e293b;
    --modern-radius-sm: 8px;
    --modern-radius-md: 12px;
    --modern-radius-lg: 16px;
    --modern-shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.08);
    --modern-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
    --modern-chart-1: #2f6fed;
    --modern-chart-2: #10b981;
    --modern-chart-3: #f59e0b;
    --modern-chart-4: #ef4444;
    --modern-chart-5: #06b6d4;
}

html,
body {
    font-family: Manrope, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
    background: linear-gradient(180deg, #f8faff 0%, var(--modern-bg) 35%, var(--modern-bg) 100%);
    color: var(--modern-text);
    line-height: 1.6;
}

a {
    color: var(--modern-primary);
}

a:hover,
a:focus {
    color: var(--modern-primary-dark);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #111827;
    letter-spacing: -0.01em;
    font-weight: 700;
}

h1,
.h1 {
    font-size: 32px;
}

h2,
.h2 {
    font-size: 28px;
}

h3,
.h3 {
    font-size: 22px;
}

.topnavbar {
    background: linear-gradient(90deg, #18243e 0%, #213558 45%, #2f6fed 120%);
    box-shadow: var(--modern-shadow-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
}

.topnavbar .navbar-nav > li > a,
.topnavbar .nav > li > a,
.topnavbar .navbar-brand,
.topnavbar .navbar-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

.topnavbar .navbar-nav > li > a:hover,
.topnavbar .nav > li > a:hover,
.topnavbar .navbar-nav > li.open > a {
    background: rgba(255, 255, 255, 0.10) !important;
}

.topnavbar .navbar-header {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.topnavbar .navbar-header .navbar-brand {
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 0 12px;
}

.topnavbar .navbar-header .brand-logo,
.topnavbar .navbar-header .brand-logo-collapsed {
    align-items: center;
    height: 62px;
    padding: 0;
}

.topnavbar .navbar-header .brand-logo {
    display: flex;
}

.topnavbar .navbar-header .brand-logo-collapsed {
    display: none;
}

.aside-collapsed .topnavbar .navbar-header .brand-logo {
    display: none;
}

.aside-collapsed .topnavbar .navbar-header .brand-logo-collapsed {
    display: flex;
}

.topnavbar .navbar-header .brand-logo > img,
.topnavbar .navbar-header .brand-logo-collapsed > img {
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767px) {
    .topnavbar .navbar-header .navbar-brand {
        min-height: 68px;
        padding: 0 10px;
    }

    .topnavbar .navbar-header .brand-logo,
    .topnavbar .navbar-header .brand-logo-collapsed {
        height: 68px;
    }

    .topnavbar .navbar-header .brand-logo {
        display: flex;
    }

    .topnavbar .navbar-header .brand-logo-collapsed {
        display: none !important;
    }

    .topnavbar .navbar-header .brand-logo > img,
    .topnavbar .navbar-header .brand-logo-collapsed > img {
        max-height: 54px !important;
    }
}

.content-wrapper,
.right-side,
.wrapper > section {
    background-color: transparent;
}

.content-heading {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: var(--modern-radius-md);
    border: 1px solid #dde6f3;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
}

.breadcrumb {
    background: transparent;
    margin-bottom: 0;
}

.breadcrumb > li + li:before {
    color: #94a3b8;
}

.panel,
.panel.panel-custom,
.nav-tabs-custom,
.box,
.widget,
.modal-content,
.card,
.well {
    border: 1px solid var(--modern-border);
    border-radius: var(--modern-radius-md);
    box-shadow: var(--modern-shadow-sm);
    overflow: hidden;
}

.panel-heading,
.box-header,
.nav-tabs-custom > .nav-tabs {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    border-bottom: 1px solid var(--modern-border);
}

.nav-tabs-custom > .nav-tabs > li > a {
    border-radius: var(--modern-radius-sm) var(--modern-radius-sm) 0 0;
    color: #374151;
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 12px;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li > a:hover {
    color: var(--modern-primary);
    background: #eef4ff;
}

.table {
    background: var(--modern-surface);
    border-radius: var(--modern-radius-sm);
}

.table-responsive {
    border: 1px solid #e2eaf5;
    border-radius: 10px;
    background: #fff;
}

.table > thead > tr > th {
    background: #f8fbff;
    border-bottom: 1px solid var(--modern-border);
    color: #334155;
    font-weight: 700;
    font-size: 13px;
}

.table > tbody > tr > td {
    border-top: 1px solid #edf2f7;
    vertical-align: middle;
}

.table > thead > tr > th,
.table > tbody > tr > td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.table .label,
.table .badge {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfdff;
}

.table-hover > tbody > tr:hover,
.DataTables tbody tr:hover {
    background: #eef5ff;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d8e2ef;
    border-radius: 8px;
    background: #fff;
    height: 34px;
    padding: 6px 10px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: #4b5f7d;
    font-weight: 600;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 180px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #d6e1f0 !important;
    background: #fff !important;
    color: #334155 !important;
    margin-left: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination > .active > a,
.pagination > .active > span {
    background: linear-gradient(180deg, #3d7fff 0%, var(--modern-primary) 100%) !important;
    border-color: var(--modern-primary-dark) !important;
    color: #fff !important;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: #d6e1f0;
    color: #334155;
}

.nav-tabs > li > a,
.nav-pills > li > a {
    border-radius: 9px;
}

/* Stronger form redesign to override legacy control styles */
.form-control,
textarea.form-control,
select.form-control,
.input-group-addon,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #d8e2ef !important;
    border-radius: var(--modern-radius-sm) !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #1f2937;
}

.form-control,
select.form-control,
.select2-container--default .select2-selection--single {
    min-height: 38px;
}

.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #8cb4ff !important;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background: #edf4ff;
    color: #1e3a8a;
}

.select2-dropdown {
    border: 1px solid #d8e2ef;
    border-radius: 10px;
    box-shadow: var(--modern-shadow-sm);
    overflow: hidden;
}

.invoice-action-wrap {
    margin: 2px 0 14px !important;
    padding: 14px 12px;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.invoice-action-sticky {
    position: sticky;
    top: 68px;
    z-index: 30;
}

.invoice-url-section {
    margin-bottom: 12px;
}

.invoice-url-label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.invoice-main-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.invoice-main-actions .btn-group,
.invoice-main-actions > a,
.invoice-main-actions > span {
    margin: 0 !important;
}

.invoice-main-actions .btn {
    margin: 0 !important;
}

.invoice-action-break {
    flex-basis: 100%;
    height: 0;
}

.invoice-secondary-action {
    min-width: 40px;
    padding-left: 11px;
    padding-right: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.invoice-secondary-action .invoice-secondary-text {
    display: none;
}

.invoice-side-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.invoice-action-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 600;
    color: #334155;
}

.invoice-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.invoice-export-actions .btn {
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
    .invoice-action-sticky {
        position: static;
    }

    .invoice-side-actions {
        margin-top: 12px;
    }
}

@media (max-width: 767px) {
    .invoice-action-wrap {
        padding: 12px 10px;
    }

    .invoice-main-actions {
        gap: 8px;
    }

    .invoice-main-actions .btn-group,
    .invoice-main-actions > a,
    .invoice-main-actions > span {
        flex: 1 1 100%;
    }

    .invoice-main-actions .btn,
    .invoice-main-actions .btn-group .btn {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }

    .invoice-secondary-action {
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
        justify-content: flex-start;
    }

    .invoice-secondary-action .invoice-secondary-text {
        display: inline;
    }

    .invoice-side-actions {
        border-top: 1px solid #e4edf8;
        padding-top: 10px;
    }
}

.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.btn-primary {
    background-image: linear-gradient(180deg, #3d7fff 0%, var(--modern-primary) 100%);
    border-color: var(--modern-primary-dark);
}

.btn-success {
    background-image: linear-gradient(180deg, #2fcf75 0%, #1f9d55 100%);
}

.btn-info {
    background-image: linear-gradient(180deg, #37c4f2 0%, #1aa0cf 100%);
}

/* Modernized sidebar with glass + accent glow */
.aside,
.left-side,
.sidebar {
    background: linear-gradient(180deg, var(--modern-sidebar-a) 0%, var(--modern-sidebar-b) 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.sidebar .user-panel,
.aside-inner {
    background: transparent;
}

.sidebar-menu > li > a,
.sidebar .nav > li > a {
    border-radius: 10px;
    margin: 2px 8px;
    color: rgba(255, 255, 255, 0.88);
    transition: all 0.2s ease;
}

.sidebar-menu > li.active > a,
.sidebar .nav > li.active > a {
    background: linear-gradient(90deg, rgba(47, 111, 237, 0.35), rgba(38, 208, 206, 0.2));
    box-shadow: 0 0 0 1px rgba(111, 183, 255, 0.22), 0 8px 20px rgba(15, 23, 42, 0.35);
}

.sidebar-menu > li > a:hover,
.sidebar .nav > li > a:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateX(2px);
}

/* Refined nested sidebar menu design */
.sidebar .sidebar-subnav {
    margin: 2px 8px 8px;
    padding: 4px 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.sidebar .sidebar-subnav > li > a:not(.submenu-toggle),
.sidebar .sidebar-subnav > li > .nav-item,
nav.sidebar .sidebar-subnav > li > a:not(.submenu-toggle),
nav.sidebar .sidebar-subnav > li > .nav-item {
    margin: 2px 6px;
    padding: 8px 42px 8px 46px !important;
    border-radius: 8px !important;
    color: rgba(226, 234, 248, 0.90) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: 0.01em;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sidebar .sidebar-subnav > li > a:not(.submenu-toggle):hover,
.sidebar .sidebar-subnav > li > .nav-item:hover,
.sidebar .sidebar-subnav > li > a:not(.submenu-toggle):focus,
.sidebar .sidebar-subnav > li > .nav-item:focus {
    color: #ffffff !important;
    background: rgba(47, 111, 237, 0.34) !important;
    transform: translateX(2px);
}

.sidebar .sidebar-subnav > li.active > a:not(.submenu-toggle),
.sidebar .sidebar-subnav > li.active > .nav-item {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(47, 111, 237, 0.56), rgba(38, 208, 206, 0.30)) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.30);
}

.sidebar .sidebar-subnav > li > a:not(.submenu-toggle) em,
.sidebar .sidebar-subnav > li > .nav-item em {
    width: 16px;
    margin-right: 10px;
    text-align: center;
    opacity: 0.9;
}

/* Keep nested collapse arrow compact and detached from text-link spacing rules */
.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle,
nav.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle {
    position: absolute;
    top: 50% !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(239, 245, 255, 0.94) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-50%) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    z-index: 3;
}

.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle:hover,
.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle:focus,
nav.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle:hover,
nav.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle em,
nav.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle em {
    width: auto;
    margin: 0;
    font-size: 12px;
    line-height: 1;
}

.sidebar .sidebar-subnav > li.sub-menu > a.submenu-toggle:after,
.sidebar li.sub-menu > a.submenu-toggle[data-toggle="collapse"]:after {
    content: none !important;
}

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

.dropdown-menu {
    border-radius: 10px;
    border: 1px solid var(--modern-border);
    box-shadow: var(--modern-shadow-md);
}

.dropdown-menu > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: #edf4ff;
    color: #1e3a8a;
}

.modal-content {
    border-radius: 14px;
}

.modal-header {
    border-bottom: 1px solid #e5ebf5;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

.modal-footer {
    border-top: 1px solid #e5ebf5;
    background: #fbfcff;
}

.alert {
    border-radius: 10px;
    border-width: 1px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.alert-info {
    background: #eff7ff;
    border-color: #b9dbff;
    color: #0f4c81;
}

.alert-success {
    background: #effcf5;
    border-color: #b7efd0;
    color: #11663b;
}

.alert-warning {
    background: #fff8ec;
    border-color: #ffe0ad;
    color: #8a5a10;
}

.alert-danger {
    background: #fff3f3;
    border-color: #f8c6c6;
    color: #8b1f1f;
}

/* Login and lock screens */
.login-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(56, 189, 248, 0.16) 0%, transparent 34%),
        radial-gradient(circle at 88% 14%, rgba(59, 130, 246, 0.14) 0%, transparent 32%),
        linear-gradient(160deg, #ecf5ff 0%, #f8fbff 45%, #eef2ff 100%);
    background-attachment: fixed;
}

.login-page:before,
.login-page:after {
    content: "";
    position: fixed;
    border-radius: 999px;
    filter: blur(1px);
    pointer-events: none;
    z-index: 0;
    animation: modernAmbientFloat 12s ease-in-out infinite;
}

.login-page:before {
    width: 320px;
    height: 320px;
    top: -80px;
    left: -70px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.20) 0%, rgba(37, 99, 235, 0) 70%);
}

.login-page:after {
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0) 72%);
    animation-delay: 2.5s;
}

.login-page .login-cover-pane {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(56, 189, 248, 0.28) 0%, rgba(56, 189, 248, 0) 38%),
        radial-gradient(circle at 84% 72%, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0) 36%),
        linear-gradient(145deg, #0f274a 0%, #153d6f 46%, #1d4f8f 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 0 120px rgba(6, 18, 39, 0.40);
}

.login-page .login-cover-pane:before,
.login-page .login-cover-pane:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.login-page .login-cover-pane:before {
    background:
        linear-gradient(135deg, rgba(10, 16, 34, 0.15) 0%, rgba(10, 16, 34, 0.44) 100%),
        repeating-linear-gradient(
            -22deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 1px,
            rgba(255, 255, 255, 0) 1px,
            rgba(255, 255, 255, 0) 16px
        );
    mix-blend-mode: soft-light;
}

.login-page .login-cover-pane:after {
    background: radial-gradient(circle at 55% 45%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 56%);
}

.login-page .login-cover-pane video,
.login-page .login-cover-pane .bgvid.inner {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.08) contrast(1.04) brightness(0.92);
    transform: scale(1.015);
}

.login-center,
.left-login {
    color: #1f2937;
}

.login-center,
.left-login {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 255, 0.92) 100%);
    border: 1px solid #dce7f6;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(6px);
}

.login-center {
    width: min(440px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
}

.login-center > .wrapper,
.left-login > .wrapper {
    margin: clamp(28px, 9vh, 96px) auto 0 !important;
    padding: 10px 18px 18px;
}

.login-center .block-center,
.left-login .block-center {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    animation: modernLoginEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-center .block-center > .text-center,
.left-login .block-center > .text-center {
    margin-bottom: 24px !important;
}

.login-center .block-center > .text-center img,
.left-login .block-center > .text-center img {
    max-width: min(280px, 82%);
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(30, 58, 138, 0.20));
    transform: translateY(0);
    animation: modernLogoRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-center .panel,
.left-login .panel {
    border-radius: 14px;
    border-color: #dbe7f6;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.08);
}

.login-center p.text-center.pv,
.left-login p.text-center.pv {
    font-size: 12px;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #5a6a85;
}

.login-center .form-group,
.left-login .form-group {
    margin-bottom: 14px;
}

.login-center .form-control,
.left-login .form-control {
    min-height: 42px;
    background: #f8fbff !important;
    border-color: #d5e2f2 !important;
    border-radius: 10px !important;
    font-size: 14px;
}

.login-center .form-control-feedback,
.left-login .form-control-feedback {
    line-height: 42px;
    color: #7b8aa6;
}

.login-center #toggle_login_password,
.left-login #toggle_login_password {
    height: 42px !important;
    width: 40px !important;
    color: #60718f;
}

.login-center .checkbox,
.left-login .checkbox {
    margin-bottom: 12px;
}

.login-center .btn,
.left-login .btn {
    min-height: 42px;
    border-radius: 10px;
    font-weight: 700;
}

.login-center .btn-primary,
.left-login .btn-primary {
    background-image: linear-gradient(180deg, #3f85ff 0%, #2f6fed 100%);
    box-shadow: 0 10px 18px rgba(47, 111, 237, 0.35);
}

.login-center .btn-primary:hover,
.left-login .btn-primary:hover {
    box-shadow: 0 14px 24px rgba(47, 111, 237, 0.40);
}

.login-center .btn-purple,
.left-login .btn-purple {
    border-radius: 10px;
}

.login-center .nav.navbar-right,
.left-login .nav.navbar-right {
    margin: 10px 10px 0 0;
}

.login-center .dropdown-toggle,
.left-login .dropdown-toggle {
    border: 1px solid #d5e1f1;
    background: #f7faff;
    border-radius: 10px;
    padding: 7px 12px;
    font-weight: 600;
    color: #334155;
}

.login-center .p-lg.text-center,
.left-login .p-lg.text-center {
    border-top: 1px solid #e5edf7;
    margin-top: 16px;
    padding-top: 14px;
    color: #5f6d84;
}

.blocked-ip-banner {
    border-radius: 10px;
    border-color: #f4c9c9;
    box-shadow: 0 4px 12px rgba(139, 31, 31, 0.08);
}

/* Forgot/reset/register variants inside login shell */
.login-page form[action*="forgot_password"] .row,
.login-page form[action*="reset_password"] .row,
.login-page form[action*="register"] .row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-page form[action*="forgot_password"] .row .col-xs-4,
.login-page form[action*="reset_password"] .row .col-xs-4,
.login-page form[action*="forgot_password"] .row .col-xs-8,
.login-page form[action*="reset_password"] .row .col-xs-8 {
    width: auto;
    float: none;
}

.login-page form[action*="forgot_password"] .btn.btn-danger,
.login-page form[action*="reset_password"] .btn.btn-danger,
.login-page form[action*="register"] .btn.btn-primary {
    min-width: 132px;
    border-color: var(--modern-primary-dark);
    background-image: linear-gradient(180deg, #3f85ff 0%, #2f6fed 100%);
    box-shadow: 0 10px 18px rgba(47, 111, 237, 0.35);
}

.login-page form[action*="forgot_password"] .btn.pull-right,
.login-page form[action*="reset_password"] .btn.pull-right {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-height: auto;
    padding: 0;
}

.login-page form[action*="forgot_password"] .btn.pull-right a,
.login-page form[action*="reset_password"] .btn.pull-right a {
    color: #4f668d;
    font-weight: 600;
}

/* Lock screen visual parity (used by admin/client) */
.lock-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 12%, rgba(56, 189, 248, 0.14) 0%, transparent 36%),
        radial-gradient(circle at 84% 82%, rgba(59, 130, 246, 0.18) 0%, transparent 32%),
        linear-gradient(160deg, #edf4ff 0%, #f7faff 48%, #eceffd 100%);
    background-attachment: fixed;
}

.lock-page .wrapper {
    margin: clamp(30px, 9vh, 84px) auto !important;
}

.lock-page .abs-center.wd-xl {
    width: min(430px, calc(100vw - 26px));
    border: 1px solid #dae6f6;
    border-radius: 20px;
    padding: 16px 16px 10px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 255, 0.93) 100%);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(6px);
}

.lock-page .lockscreen-logo {
    margin-bottom: 14px;
}

.lock-page .lockscreen-logo span {
    color: #243b5f;
    letter-spacing: 0.01em;
}

.lock-page .img-thumbnail.img-circle {
    width: 72px;
    height: 72px;
    border: 3px solid rgba(47, 111, 237, 0.24);
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
}

.lock-page .panel.widget {
    border-radius: 14px;
    border-color: #d8e4f4;
    box-shadow: 0 10px 26px rgba(30, 58, 138, 0.08);
}

/* Dashboard chart/widget premium polish */
.dashboard .panel [id*="chart"],
.dashboard .panel [class*="chart"],
.dashboard .panel canvas,
.dashboard .panel svg,
.dashboard .box [id*="chart"],
.dashboard .box [class*="chart"],
.dashboard .box canvas,
.dashboard .box svg {
    border-radius: 12px;
}

.dashboard .panel [id*="chart"],
.dashboard .panel [class*="chart"],
.dashboard .box [id*="chart"],
.dashboard .box [class*="chart"] {
    border: 1px solid #e4ecf7;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.dashboard .panel .panel-body,
.dashboard .box .panel-body {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.morris-hover {
    border: 1px solid #dce7f6 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

.morris-hover .morris-hover-row-label,
.morris-hover .morris-hover-point {
    color: #23324b !important;
    font-size: 12px !important;
}

.dashboard .panel svg text,
.dashboard .box svg text,
.dashboard .legendLabel,
.dashboard .flot-text {
    fill: #4b5f7d !important;
    color: #4b5f7d !important;
    font-weight: 600;
}

.dashboard .legendColorBox > div {
    border-color: #d7e3f3 !important;
}

.dashboard .chart-legend li,
.dashboard .chart-legend,
.dashboard .legend {
    color: #465b79;
}

@keyframes modernLoginEnter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modernLogoRise {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modernAmbientFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -12px, 0);
    }
}

@media (max-width: 767px) {
    .login-center,
    .left-login {
        border-radius: 14px;
        width: calc(100vw - 20px);
        margin-top: 10px;
    }

    .login-center > .wrapper,
    .left-login > .wrapper {
        margin: 16px auto 0 !important;
        padding: 8px 10px 14px;
    }

    .login-center .block-center > .text-center img,
    .left-login .block-center > .text-center img {
        max-width: min(220px, 76%);
    }
}

/* Dashboard spacing and subtle section reveal */
.dashboard .report,
#report_menu .report,
.dashboard .mt-lg {
    margin-bottom: 18px;
}

.dashboard #menu .panel.panel-custom.menu > .panel-heading,
.dashboard .panel.panel-custom.menu > .panel-heading {
    padding: 12px 14px;
    border-bottom: 1px solid #e3ebf6;
    background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.dashboard #menu .panel.panel-custom.menu > .panel-heading .panel-title,
.dashboard .panel.panel-custom.menu > .panel-heading .panel-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #22324a;
}

.dashboard .panel,
#report_menu .panel,
.dashboard .widget,
.dashboard .box,
.dashboard .report_menu {
    animation: modernFadeUp 0.45s ease both;
}

/* Premium polish for dashboard stats + prevent long amounts from clipping */
#report_menu .panel.report_menu {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #dce7f6;
    overflow: visible;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
}

#report_menu .panel.report_menu:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.14);
}

#report_menu .panel.report_menu .row.row-table {
    table-layout: fixed;
}

#report_menu .panel.report_menu .col-xs-10 {
    padding-left: 10px;
    padding-right: 10px;
}

#report_menu .panel.report_menu h4.mt-sm.mb0 {
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#report_menu .panel.report_menu p.mb0.text-muted {
    font-size: 12px;
    line-height: 1.35;
}

#report_menu .panel.report_menu .fa-2x {
    width: 34px;
    height: 34px;
    line-height: 34px;
    border-radius: 999px;
    background: rgba(47, 111, 237, 0.12);
}

#report_menu .panel.report_menu .text-danger .fa-2x {
    background: rgba(239, 68, 68, 0.14);
}

#report_menu .panel.report_menu .text-info .fa-2x,
#report_menu .panel.report_menu .text-purple .fa-2x {
    background: rgba(59, 130, 246, 0.14);
}

#report_menu .report:nth-child(1) .panel { animation-delay: 0.04s; }
#report_menu .report:nth-child(2) .panel { animation-delay: 0.08s; }
#report_menu .report:nth-child(3) .panel { animation-delay: 0.12s; }
#report_menu .report:nth-child(4) .panel { animation-delay: 0.16s; }
#report_menu .report:nth-child(5) .panel { animation-delay: 0.20s; }
#report_menu .report:nth-child(6) .panel { animation-delay: 0.24s; }

.dashboard .panel .fa-2x,
.dashboard .report_menu .fa-2x {
    opacity: 0.9;
    transform: translateZ(0);
}

@keyframes modernFadeUp {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard .panel,
    #report_menu .panel,
    .dashboard .widget,
    .dashboard .box,
    .dashboard .report_menu {
        animation: none;
    }

    .login-page:before,
    .login-page:after,
    .login-center .block-center,
    .left-login .block-center,
    .login-center .block-center > .text-center img,
    .left-login .block-center > .text-center img {
        animation: none;
    }

    #report_menu .panel.report_menu:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    .panel,
    .panel.panel-custom,
    .nav-tabs-custom,
    .box,
    .widget,
    .modal-content,
    .well {
        border-radius: 10px;
    }

    h1,
    .h1 {
        font-size: 26px;
    }

    h2,
    .h2 {
        font-size: 22px;
    }
}