@import url('https://rsms.me/inter/inter.css');

:root {
	--tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
}

body {
	font-feature-settings: "cv03", "cv04", "cv11";
}

/* Top Navbar (if any) */
.navbar:not(.navbar-vertical) {
	background-color: #0ca678 !important;
	min-height: 3rem;
}

.navbar-brand-image {
	height: 2rem;
}

/* Navbar Links for Topbar (White text) */
.navbar:not(.navbar-vertical) .navbar-nav .nav-link {
	color: rgba(255, 255, 255, 0.9) !important;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.navbar:not(.navbar-vertical) .navbar-nav .nav-link.active {
	color: #fff !important;
	font-weight: 600;
}

/* Sidebar (Vertical Navbar) */
.navbar-vertical {
	background-color: #fff !important;
	border-right: 1px solid #e2e8f0;
}

.navbar-vertical .nav-link {
	color: #64748b !important; /* Slate color */
	padding: 0.75rem 1rem;
    font-weight: 500;
}

.navbar-vertical .nav-link:hover {
	color: #0ca678 !important;
    background-color: rgba(12, 166, 120, 0.05);
}

.navbar-vertical .nav-link.active {
	color: #0ca678 !important;
	background-color: rgba(12, 166, 120, 0.1);
    font-weight: 600;
}

.navbar-vertical .navbar-brand {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Sidebar Collapse Styles */
body.layout-collapsed .navbar-vertical {
    width: 4rem;
    transition: width 0.3s ease;
}

body.layout-collapsed .page-wrapper {
    margin-left: 4rem;
    transition: margin-left 0.3s ease-in-out;
}

body.layout-collapsed .page {
    padding-left: 0 !important;
}

body.layout-collapsed .page-body,
body.layout-collapsed .page-wrapper .container,
body.layout-collapsed .page-wrapper .container-fluid,
body.layout-collapsed .footer > .container-fluid {
    padding-left: 0 !important;
}

body.layout-collapsed .navbar-brand-image {
    display: none;
}

body.layout-collapsed .navbar-brand-short {
    display: inline-block !important;
}

body.layout-collapsed .nav-link-title {
    display: none;
}

body.layout-collapsed .nav-link-icon {
    margin-right: 0;
}

body.layout-collapsed .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.layout-collapsed .navbar-brand {
    padding: 0.5rem 0;
    justify-content: center;
}

body.layout-collapsed .dropdown-toggle::after {
    display: none;
}

body.layout-collapsed .navbar-vertical .collapse.show {
    display: none;
}

body.layout-collapsed .navbar-vertical:hover .collapse.show {
    display: block;
}

body.layout-collapsed .navbar-vertical:hover {
    width: 16rem;
}

body.layout-collapsed .navbar-vertical:hover .nav-link-title {
    display: inline-block;
}

body.layout-collapsed .navbar-vertical:hover .nav-link {
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
}

body.layout-collapsed .navbar-vertical:hover .nav-link-icon {
    margin-right: 0.5rem;
}

body.layout-collapsed .navbar-vertical:hover .navbar-brand-image {
    display: inline-block;
}

body.layout-collapsed .navbar-vertical:hover .navbar-brand-short {
    display: none !important;
}

body.layout-collapsed .navbar-vertical:hover .dropdown-toggle::after {
    display: inline-block;
}

/* Dropdowns */
.dropdown-menu {
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.dropdown-item {
	color: #1e293b;
}

.dropdown-item:hover {
	background-color: #f1f5f9;
	color: #0ca678;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: #0ca678 !important;
    color: #fff !important;
}

/* Buttons */
.btn-primary {
	background-color: #0ca678 !important;
	border-color: #0ca678 !important;
}

.btn-primary:hover {
	background-color: #0a8a64 !important;
	border-color: #0a8a64 !important;
}

.text-primary {
	color: #0ca678 !important;
}

.form-check-input:checked {
	background-color: #0ca678 !important;
	border-color: #0ca678 !important;
}

.page-link {
	color: #0ca678;
}

.page-item.active .page-link {
	background-color: #0ca678;
	border-color: #0ca678;
}

.btn-outline-primary {
	color: #0ca678 !important;
	border-color: #0ca678 !important;
}

.btn-outline-primary:hover {
	background-color: #0ca678 !important;
	color: #fff !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
	background-color: #0ca678 !important;
}

/* Table Styles */
.table thead th {
	background-color: #f8fafc;
	color: #64748b;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

.table tbody td {
    color: #334155;
    vertical-align: middle;
}

/* Card Styles */
.card {
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e2e8f0;
}

/* Offcanvas */
.offcanvas {
    border-left: 1px solid #e2e8f0;
}

/* -------------------------------------------------------------------------
 * Glass theme
 * Activated by the existing theme picker with data-bs-theme="glass".
 * Keep this in the shared stylesheet so legacy page-specific markup benefits
 * from the same surface, control, navigation, and overlay treatment.
 * ------------------------------------------------------------------------- */
:is(html, body)[data-bs-theme="glass"] {
    --glass-ink: #17324d;
    --glass-muted: #5d7890;
    --glass-border: rgba(255, 255, 255, 0.82);
    --glass-surface: rgba(255, 255, 255, 0.86);
    --glass-surface-strong: rgba(255, 255, 255, 0.94);
    --glass-shadow: 0 10px 24px rgba(31, 78, 121, 0.11);
    --glass-radius: 1.1rem;
}

body[data-bs-theme="glass"] {
    color: var(--glass-ink) !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(99, 212, 190, 0.34), transparent 30rem),
        radial-gradient(circle at 95% 12%, rgba(111, 168, 255, 0.32), transparent 28rem),
        radial-gradient(circle at 70% 100%, rgba(225, 159, 255, 0.20), transparent 32rem),
        linear-gradient(135deg, #edf8f7 0%, #e9f0fb 52%, #f5eefb 100%) !important;
    background-attachment: scroll;
    background-color: #edf5f8 !important;
}

body[data-bs-theme="glass"] .page,
body[data-bs-theme="glass"] .page-wrapper {
    background: transparent !important;
}

body[data-bs-theme="glass"] .navbar-vertical,
body[data-bs-theme="glass"] .mobile-top-nav {
    background: rgba(13, 73, 86, 0.88) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 8px 0 28px rgba(18, 54, 75, 0.22), inset -1px 0 rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body[data-bs-theme="glass"] .navbar-vertical .nav-link {
    color: rgba(255, 255, 255, 0.86) !important;
    border-radius: 0.8rem;
    margin: 0.12rem 0.55rem;
}

body[data-bs-theme="glass"] .navbar-vertical .nav-link:hover,
body[data-bs-theme="glass"] .navbar-vertical .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.17) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 5px 12px rgba(5, 35, 52, 0.18);
}

/* Tabler marks the sidebar as dark, which otherwise makes its labels/icons
   white. Glass uses a light sidebar, so force the whole link tree to inherit
   a dark readable color. */
body[data-bs-theme="glass"] .navbar-vertical[data-bs-theme="dark"] .nav-link,
body[data-bs-theme="glass"] .navbar-vertical[data-bs-theme="dark"] .nav-link *,
body[data-bs-theme="glass"] .navbar-vertical .nav-link-icon,
body[data-bs-theme="glass"] .navbar-vertical .dropdown-toggle::after {
    color: rgba(255, 255, 255, 0.9) !important;
}

body[data-bs-theme="glass"] .mobile-top-nav,
body[data-bs-theme="glass"] .mobile-top-nav * {
    color: #ffffff !important;
}

body[data-bs-theme="glass"] .navbar-vertical .nav-link:hover,
body[data-bs-theme="glass"] .navbar-vertical .nav-link:hover *,
body[data-bs-theme="glass"] .navbar-vertical .nav-link.active,
body[data-bs-theme="glass"] .navbar-vertical .nav-link.active * {
    color: #ffffff !important;
}

body[data-bs-theme="glass"] .navbar-user-card,
body[data-bs-theme="glass"] .navbar-user-avatar {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body[data-bs-theme="glass"] .card,
body[data-bs-theme="glass"] .modal-content,
body[data-bs-theme="glass"] .offcanvas,
body[data-bs-theme="glass"] .dropdown-menu,
body[data-bs-theme="glass"] .list-group,
body[data-bs-theme="glass"] .toast,
body[data-bs-theme="glass"] .alert,
body[data-bs-theme="glass"] .table-responsive {
    background: var(--glass-surface) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body[data-bs-theme="glass"] .card-header,
body[data-bs-theme="glass"] .card-footer,
body[data-bs-theme="glass"] .modal-header,
body[data-bs-theme="glass"] .modal-footer,
body[data-bs-theme="glass"] .offcanvas-header,
body[data-bs-theme="glass"] .offcanvas-footer {
    background: rgba(246, 252, 253, 0.68) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

body[data-bs-theme="glass"] .form-control,
body[data-bs-theme="glass"] .form-select,
body[data-bs-theme="glass"] .input-group-text,
body[data-bs-theme="glass"] .select2-container--bootstrap .select2-selection,
body[data-bs-theme="glass"] .bootstrap-select > .dropdown-toggle {
    color: var(--glass-ink) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
    border-radius: 0.72rem !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

body[data-bs-theme="glass"] .form-control:focus,
body[data-bs-theme="glass"] .form-select:focus {
    background: #ffffff !important;
    border-color: rgba(12, 166, 120, 0.58) !important;
    box-shadow: 0 0 0 0.2rem rgba(12, 166, 120, 0.14) !important;
}

body[data-bs-theme="glass"] .table,
body[data-bs-theme="glass"] .table thead th,
body[data-bs-theme="glass"] .table tbody td,
body[data-bs-theme="glass"] .list-group-item {
    color: var(--glass-ink) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.56) !important;
}

body[data-bs-theme="glass"] .table thead th {
    color: var(--glass-muted) !important;
    background: rgba(226, 241, 244, 0.92) !important;
}

body[data-bs-theme="glass"] .btn-primary,
body[data-bs-theme="glass"] .nav-pills .nav-link.active {
    border-color: rgba(255, 255, 255, 0.62) !important;
    box-shadow: 0 9px 20px rgba(12, 166, 120, 0.18);
}

body[data-bs-theme="glass"] .btn-outline-secondary,
body[data-bs-theme="glass"] .btn-outline-primary {
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(255, 255, 255, 0.78) !important;
}

body[data-bs-theme="glass"] .dropdown-item:hover,
body[data-bs-theme="glass"] .dropdown-item:focus {
    background: rgba(226, 241, 244, 0.94) !important;
}

body[data-bs-theme="glass"] .text-muted,
body[data-bs-theme="glass"] .page-pretitle {
    color: var(--glass-muted) !important;
}

body[data-bs-theme="glass"] .card-title,
body[data-bs-theme="glass"] .modal-title,
body[data-bs-theme="glass"] .offcanvas-title,
body[data-bs-theme="glass"] .page-title {
    color: var(--glass-ink) !important;
}

body[data-bs-theme="glass"] .card-header .text-white,
body[data-bs-theme="glass"] .card-body > .text-white,
body[data-bs-theme="glass"] .modal-header .text-white,
body[data-bs-theme="glass"] .modal-body > .text-white {
    color: var(--glass-ink) !important;
}

body[data-bs-theme="glass"] .card svg,
body[data-bs-theme="glass"] .modal-content svg,
body[data-bs-theme="glass"] .offcanvas svg,
body[data-bs-theme="glass"] .card .fa,
body[data-bs-theme="glass"] .modal-content .fa,
body[data-bs-theme="glass"] .offcanvas .fa {
    color: var(--glass-ink);
}

body[data-bs-theme="glass"] .support-assistant-panel,
body[data-bs-theme="glass"] .support-assistant-footer {
    background: var(--glass-surface-strong) !important;
    border-color: var(--glass-border) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body[data-bs-theme="glass"] .auth-body {
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 212, 190, 0.40), transparent 28rem),
        radial-gradient(circle at 85% 80%, rgba(111, 168, 255, 0.34), transparent 28rem),
        linear-gradient(135deg, #edf8f7, #f5eefb) !important;
}

@media (prefers-reduced-transparency: reduce) {
    body[data-bs-theme="glass"] .card,
    body[data-bs-theme="glass"] .modal-content,
    body[data-bs-theme="glass"] .offcanvas,
    body[data-bs-theme="glass"] .dropdown-menu,
    body[data-bs-theme="glass"] .navbar-vertical,
    body[data-bs-theme="glass"] .mobile-top-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: #0d4956 !important;
    }
}

/* Critical first-paint selectors. The layout restores the saved theme on the
   html element before the body exists; these prevent a light-theme flash while
   the normal body selectors are synchronized after DOMContentLoaded. */
html[data-bs-theme="glass"] body {
    color: var(--glass-ink) !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(99, 212, 190, 0.34), transparent 30rem),
        radial-gradient(circle at 95% 12%, rgba(111, 168, 255, 0.32), transparent 28rem),
        radial-gradient(circle at 70% 100%, rgba(225, 159, 255, 0.20), transparent 32rem),
        linear-gradient(135deg, #edf8f7 0%, #e9f0fb 52%, #f5eefb 100%) !important;
    background-color: #edf5f8 !important;
}

html[data-bs-theme="glass"] body .page,
html[data-bs-theme="glass"] body .page-wrapper {
    background: transparent !important;
}

html[data-bs-theme="glass"] body .navbar-vertical,
html[data-bs-theme="glass"] body .mobile-top-nav {
    background: rgba(13, 73, 86, 0.88) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 8px 0 28px rgba(18, 54, 75, 0.22), inset -1px 0 rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-bs-theme="glass"] body .navbar-vertical .nav-link,
html[data-bs-theme="glass"] body .navbar-vertical .nav-link *,
html[data-bs-theme="glass"] body .navbar-vertical .nav-link-icon,
html[data-bs-theme="glass"] body .navbar-vertical .dropdown-toggle::after {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-bs-theme="glass"] body .card,
html[data-bs-theme="glass"] body .modal-content,
html[data-bs-theme="glass"] body .offcanvas,
html[data-bs-theme="glass"] body .dropdown-menu,
html[data-bs-theme="glass"] body .list-group,
html[data-bs-theme="glass"] body .toast,
html[data-bs-theme="glass"] body .alert,
html[data-bs-theme="glass"] body .table-responsive {
    background: var(--glass-surface) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html[data-bs-theme="glass"] body .card-title,
html[data-bs-theme="glass"] body .modal-title,
html[data-bs-theme="glass"] body .offcanvas-title,
html[data-bs-theme="glass"] body .page-title,
html[data-bs-theme="glass"] body .card-header .text-white,
html[data-bs-theme="glass"] body .card-body > .text-white,
html[data-bs-theme="glass"] body .card svg,
html[data-bs-theme="glass"] body .card .fa {
    color: var(--glass-ink) !important;
}

/* Premium visual pass for the main page families. These selectors are kept
   narrow so page-specific legacy styles do not flatten the shared glass
   surface or turn its content white-on-white. */
body[data-bs-theme="glass"] .page-body {
    background: transparent !important;
}

body[data-bs-theme="glass"] .page-body > .container-fluid {
    padding-top: 1.15rem;
}

body[data-bs-theme="glass"] .page-title,
body[data-bs-theme="glass"] .page-pretitle {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

body[data-bs-theme="glass"] .card,
body[data-bs-theme="glass"] .reports-library-card,
body[data-bs-theme="glass"] .reports-workspace-card,
body[data-bs-theme="glass"] .shipment-modern-page .card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.57)) !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow:
        0 1px 1px rgba(255, 255, 255, 0.92) inset,
        0 14px 32px rgba(30, 67, 96, 0.13),
        0 3px 8px rgba(30, 67, 96, 0.06) !important;
}

body[data-bs-theme="glass"] .card-header,
body[data-bs-theme="glass"] .card-footer {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(232, 243, 247, 0.28)) !important;
    border-color: rgba(255, 255, 255, 0.78) !important;
}

body[data-bs-theme="glass"] .table-responsive,
body[data-bs-theme="glass"] .dataTables_wrapper,
body[data-bs-theme="glass"] .table {
    background: rgba(255, 255, 255, 0.36) !important;
}

body[data-bs-theme="glass"] .table thead th {
    background: rgba(215, 232, 238, 0.72) !important;
    color: #31516a !important;
    border-bottom: 1px solid rgba(126, 164, 180, 0.28) !important;
}

body[data-bs-theme="glass"] .table tbody tr:hover {
    background: rgba(211, 244, 239, 0.52) !important;
}

body[data-bs-theme="glass"] .btn-primary,
body[data-bs-theme="glass"] .reports-workspace-card .generate_download_btn {
    background: linear-gradient(135deg, #087f72, #0ca678) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: 0 8px 18px rgba(8, 127, 114, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

body[data-bs-theme="glass"] .btn-primary:hover,
body[data-bs-theme="glass"] .reports-workspace-card .generate_download_btn:hover {
    background: linear-gradient(135deg, #076c62, #098f69) !important;
}

body[data-bs-theme="glass"] .reports-hero {
    background: linear-gradient(120deg, rgba(8, 47, 73, 0.96), rgba(8, 127, 114, 0.86), rgba(12, 166, 120, 0.78)) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 20px 40px rgba(8, 47, 73, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body[data-bs-theme="glass"] .reports-hub .report-tile {
    background: rgba(255, 255, 255, 0.54) !important;
    border: 1px solid rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 7px 18px rgba(30, 67, 96, 0.08) !important;
}

body[data-bs-theme="glass"] .reports-hub .report-tile:hover,
body[data-bs-theme="glass"] .reports-hub .report-tile--active {
    background: rgba(224, 248, 244, 0.82) !important;
    border-color: rgba(12, 166, 120, 0.52) !important;
    box-shadow: 0 10px 22px rgba(12, 166, 120, 0.14) !important;
}

body[data-bs-theme="glass"] .form-label,
body[data-bs-theme="glass"] .card-title,
body[data-bs-theme="glass"] .reports-library-intro__title,
body[data-bs-theme="glass"] .reports-workspace-card .report-section-heading {
    color: #17324d !important;
}

body[data-bs-theme="glass"] .reports-workspace-card .form-control,
body[data-bs-theme="glass"] .reports-workspace-card .select2-selection,
body[data-bs-theme="glass"] .shipment-modern-page input,
body[data-bs-theme="glass"] .shipment-modern-page select {
    background: rgba(255, 255, 255, 0.78) !important;
    color: #17324d !important;
    border-color: rgba(133, 170, 185, 0.48) !important;
}