/*
 * Rule set that is not covered by the per-component stylesheet files.
 *
 * With Propshaft, `stylesheet_link_tag :app` serves every CSS file under
 * app/assets/stylesheets individually, so component styles live in their
 * own files (components/, layouts/, themes/). This file only holds rules
 * that are not defined anywhere else.
 */





.form-label.required::after {
content: ' *';
color: var(--bels-danger);
font-weight: bold;
}



#main-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

[data-bs-theme='dark'] #main-navbar {
background-color: rgba(29, 31, 31, 0.95);
}

.native-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

[data-bs-theme='dark'] .native-nav {
background-color: rgba(29, 31, 31, 0.95);
}

.offcanvas {
max-width: 280px;
}

.mobile-nav-link {
font-size: 1rem;
color: inherit;
border-radius: 0;
transition: background-color 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
background-color: rgba(var(--bels-primary-rgb), 0.1);
color: var(--bels-primary);
}

.mobile-nav-link i {
width: 20px;
text-align: center;
}

[data-bs-theme='dark'] .offcanvas {
background-color: var(--dark-surface);
color: var(--dark-text);
}

[data-bs-theme='dark'] .offcanvas-header {
border-color: var(--dark-border);
}

[data-bs-theme='dark'] .mobile-nav-link:hover,
[data-bs-theme='dark'] .mobile-nav-link:focus {
background-color: rgba(var(--bels-primary-rgb), 0.15);
}

.mobile-profile-link {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
border-radius: 50%;
transition: background-color 0.2s ease;
}

.mobile-profile-link:hover,
.mobile-profile-link:focus {
background-color: rgba(var(--bels-primary-rgb), 0.1);
}

body {
padding-top: 72px;
}

.native-app {
padding-top: 52px;
}

.navbar-logo {
height: 50px;
}

#main-navbar .navbar-brand {
min-width: 0;
flex-shrink: 1;
}

#main-navbar .navbar-mobile-controls {
flex-shrink: 0;
}

#main-navbar .mobile-hamburger-toggle {
min-width: 40px;
min-height: 40px;
}

@media (min-width: 992px) {
.navbar-logo {
height: 80px;
margin-top: -20px;
margin-bottom: -20px;
}
}

@media (max-width: 991.98px) {
#main-navbar .navbar-brand {
margin-right: 0.5rem;
}

#main-navbar .navbar-mobile-controls {
gap: 0.125rem;
}
}





@media (max-width: 768px) and (orientation: landscape) {

}

@supports (padding-bottom: env(safe-area-inset-bottom)) {

}

@media (min-width: 1200px) {

.row > [class*='col-'] > .card {
height: 100%;
}

}

.stat-card-link {
cursor: pointer;
transition: all var(--transition-base);
}

.stat-card-link:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}

.stat-card-link:active {
transform: translateY(-2px);
}

[data-bs-theme='dark'] .stat-card-link .h4,
[data-bs-theme='dark'] .stat-card-link .text-dark {
color: var(--dark-text) !important;
}



@media (min-width: 768px) and (max-width: 991px) {

}







@media print {

}

[data-bs-theme='dark'] {

.navbar {
background-color: var(--dark-surface);
border-bottom-color: var(--dark-border);
}

.navbar-brand {
color: var(--dark-text);
}

.navbar-nav .nav-link {
color: rgba(var(--dark-text-rgb), 0.9);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
color: var(--bels-accent);
background-color: rgba(var(--bels-accent-rgb), 0.15);
}

.navbar-nav .nav-link.text-danger:hover {
background-color: rgba(var(--bels-accent-rgb), 0.2);
color: var(--bels-danger);
}

.theme-toggle:hover,
.theme-toggle:focus {
background-color: rgba(var(--bels-accent-rgb), 0.15);
}

.card {
background-color: var(--dark-surface);
border-color: var(--dark-border);
}

.card-header {
background-color: var(--dark-surface-hover);
border-bottom-color: var(--dark-border);
color: var(--dark-text);
}

.user-card {
background-color: var(--dark-surface);
border-color: var(--dark-border);
}

.user-card .card-body {
color: var(--dark-text);
}

.user-card:hover {
background-color: var(--dark-surface-hover);
box-shadow: 0 8px 25px rgba(var(--bels-shadow-rgb), 0.3);
}

.table {
color: var(--dark-text);
border-color: var(--dark-border);
}

.table th,
.table td {
border-color: var(--dark-border);
}

.route-header-card {
background-color: var(--dark-surface-hover);
border-color: var(--dark-border);
}

.store-card {
background-color: var(--dark-surface);
border-color: var(--dark-border);
}

.store-card:hover {
background-color: var(--dark-surface-hover);
}

.badge.bg-secondary {
background-color: var(--dark-surface-hover);
color: var(--dark-text);
}

.dropdown-menu {
background-color: var(--dark-surface);
border-color: var(--dark-border);
}

.dropdown-item {
color: var(--dark-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
background-color: var(--bels-accent);
color: white;
}

.alert-success {
--bs-alert-bg: var(--dark-alert-success-bg);
--bs-alert-border-color: var(--dark-alert-success-border);
--bs-alert-color: var(--dark-alert-success-color);
}

.alert-info {
--bs-alert-bg: var(--dark-alert-info-bg);
--bs-alert-border-color: var(--dark-alert-info-border);
--bs-alert-color: var(--dark-alert-info-color);
}

.alert-warning {
--bs-alert-bg: var(--dark-alert-warning-bg);
--bs-alert-border-color: var(--dark-alert-warning-border);
--bs-alert-color: var(--dark-alert-warning-color);
}

.alert-danger {
--bs-alert-bg: rgba(var(--bels-accent-rgb), 0.12);
--bs-alert-border-color: var(--bels-accent);
--bs-alert-color: var(--bels-danger);
}

::-webkit-scrollbar-track {
background: var(--dark-bg);
}

::-webkit-scrollbar-thumb {
background: var(--bels-accent);
}
}

html[data-bs-theme='dark'] .text-muted {
color: var(--dark-text-muted) !important;
}

html[data-bs-theme='dark'] h1,
html[data-bs-theme='dark'] h2,
html[data-bs-theme='dark'] h3,
html[data-bs-theme='dark'] h4,
html[data-bs-theme='dark'] h5,
html[data-bs-theme='dark'] h6 {
color: var(--dark-text) !important;
}

html[data-bs-theme='dark'] p,
html[data-bs-theme='dark'] span,
html[data-bs-theme='dark'] div {
color: var(--dark-text);
}

html[data-bs-theme='dark'] .form-control,
html[data-bs-theme='dark'] .form-select {
background-color: var(--dark-surface);
border-color: var(--dark-border);
color: var(--dark-text);
}

html[data-bs-theme='dark'] .form-control:focus,
html[data-bs-theme='dark'] .form-select:focus {
background-color: var(--dark-surface);
border-color: var(--bels-accent);
color: var(--dark-text);
box-shadow: 0 0 0 0.2rem rgba(var(--bels-accent-rgb), 0.25);
}

html[data-bs-theme='dark'] .form-label {
color: var(--dark-text);
font-weight: 600;
}

html[data-bs-theme='dark'] .form-text {
color: var(--dark-text-muted);
}

html[data-bs-theme='dark'] .form-check-label {
color: var(--dark-text);
}

html[data-bs-theme='dark'] .form-floating > label {
color: var(--dark-text-muted);
}

html[data-bs-theme='dark'] .form-floating > .form-control:focus ~ label,
html[data-bs-theme='dark']
.form-floating
> .form-control:not(:placeholder-shown)
~ label {
color: var(--bels-accent);
}

/* Cards must NOT clip horizontally: clipped tables lose sticky headers and
   cut off content on narrow screens. Wrap wide content in .table-responsive
   instead, which scrolls its own overflow. */
.card,
.card-body,
.card-header,
.card-footer {
word-wrap: break-word;
word-break: break-word;
min-width: 0;
}

.btn {
word-wrap: break-word;
word-break: break-word;
max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
}

.d-flex > * {
min-width: 0;
flex-shrink: 1;
}

.store-edit-form {
animation: fadeInUp 0.3s ease-out;
}

@media (min-width: 1200px) {
.desktop-form-enhancement {
border-radius: 0.75rem;
box-shadow: 0 0.125rem 0.5rem rgba(var(--bs-primary-rgb), 0.1);
}

.store-edit-form .card {
border-radius: 0.75rem;
transition: all 0.3s ease;
}

.store-edit-form .card:hover {
transform: translateY(-2px);
box-shadow: 0 0.5rem 2rem rgba(var(--bels-shadow-rgb), 0.15);
}

.sidebar-sticky {
max-height: calc(100vh - 2rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--bels-border) transparent;
}

.sidebar-sticky::-webkit-scrollbar {
width: 4px;
}

.sidebar-sticky::-webkit-scrollbar-track {
background: transparent;
}

.sidebar-sticky::-webkit-scrollbar-thumb {
background: var(--bels-border);
border-radius: 2px;
}

.sidebar-sticky::-webkit-scrollbar-thumb:hover {
background: var(--bels-muted);
}

.form-control:focus {
transform: none;
box-shadow: 0 0 0 0.2rem var(--bels-focus-outline);
}

.card.border-primary {
border-width: 2px;
box-shadow: 0 0.25rem 1rem rgba(var(--bs-primary-rgb), 0.15);
}

.row.g-lg-4 > * {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}

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

.progress {
transition: all 0.3s ease;
}

.progress-bar {
transition: width 0.5s ease-in-out;
}

.form-control:focus {
border-color: var(--bels-primary);
box-shadow: 0 0 0 0.2rem var(--bels-focus-outline);
transform: translateY(-1px);
transition: all 0.2s ease;
}

.input-group-text {
background-color: var(--bels-light-bg);
border-color: var(--bels-border);
color: var(--bels-muted);
}

.form-control.is-valid {
border-color: var(--bels-success);
box-shadow: 0 0 0 0.2rem rgba(var(--bels-primary-rgba), 0.15);
}

.form-control.is-invalid {
border-color: var(--bels-danger);
box-shadow: 0 0 0 0.2rem rgba(var(--bels-accent-rgba), 0.15);
}

.store-edit-form .card.border-light {
border: 2px dashed var(--bels-border);
transition: all 0.3s ease;
}

.store-edit-form .card.border-light:hover {
border-color: var(--bels-primary);
background-color: var(--bels-light-bg);
}

#store-preview {
transition: all 0.3s ease;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
}

#store-preview .animate__fadeIn {
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@media (max-width: 991.98px) {
.store-edit-mobile .position-sticky {
position: static;
}

.card {
margin-bottom: 1rem;
}

.btn-lg {
padding: 0.75rem 1.5rem;
font-size: 1.1rem;
}

.input-group-text {
padding: 0.5rem 0.75rem;
}
}

.btn {
transition: all 0.2s ease;
}

.btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(var(--bels-shadow-rgb), 0.15);
}

.btn:disabled {
transform: none;
box-shadow: none;
}

.valid-feedback,
.invalid-feedback {
font-size: 0.875rem;
margin-top: 0.25rem;
}

.store-edit-form .card.shadow {
box-shadow: 0 0.15rem 1.75rem 0 rgba(var(--bels-shadow-rgb), 0.15);
transition: box-shadow 0.3s ease;
}

.store-edit-form .card.shadow:hover {
box-shadow: 0 0.25rem 2rem 0 rgba(var(--bels-shadow-rgb), 0.2);
}

@keyframes successPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}

.btn-success.animate-pulse {
animation: successPulse 0.6s ease-in-out;
}

.route-header-content {
min-width: 0;
flex: 1;
}

.route-header-actions {
flex-shrink: 0;
}

.store-content {
min-width: 0;
overflow: hidden;
}

.modal-backdrop.show {
background-color: rgba(var(--bels-shadow-rgb), 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}

.modal {
z-index: 1055;
}

.modal-backdrop {
z-index: 1050;
}

.text-truncate-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.text-truncate-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.hover-lift {
transition: transform var(--transition-base),
box-shadow var(--transition-base);
}

.hover-lift:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}

.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-3 {
gap: 1rem;
}
.gap-4 {
gap: 1.5rem;
}

.empty-state {
text-align: center;
padding: 3rem 1rem;
color: var(--bels-muted);
}

.empty-state-icon {
font-size: 3rem;
opacity: 0.5;
margin-bottom: 1rem;
}

.empty-state-text {
margin-bottom: 0.5rem;
}

.skeleton {
background: linear-gradient(
90deg,
var(--bels-light-bg) 25%,
#e9ecef 50%,
var(--bels-light-bg) 75%
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}

.action-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.action-buttons .btn {
flex: 1 1 auto;
}

@media (min-width: 992px) {
.action-buttons .btn {
flex: 0 0 auto;
}
}

.info-row {
display: flex;
flex-direction: column;
margin-bottom: 0.75rem;
}

.info-label {
font-size: 0.75rem;
color: var(--bels-muted);
text-transform: uppercase;
letter-spacing: 0.025em;
margin-bottom: 0.25rem;
}

.info-value {
font-weight: 500;
color: var(--bels-text);
}

[data-bs-theme='dark'] .info-value {
color: var(--dark-text);
}

@media (max-width: 575.98px) {
.d-xs-none {
display: none !important;
}
.d-xs-block {
display: block !important;
}
}

.animate-fade-in {
animation: fadeIn 0.3s ease-in-out;
}

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

.card-clickable {
cursor: pointer;
transition: all var(--transition-base);
}

.card-clickable:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}

.card-clickable:active {
transform: translateY(0);
}

.list-group-item-action:active {
background-color: rgba(var(--bels-primary-rgb), 0.1);
}

.spinner-rotate {
animation: spinRotate 1s linear infinite;
}

@keyframes spinRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.notification-badge {
font-size: 0.65rem;
min-width: 16px;
height: 16px;
line-height: 1;
}

.notifications-page .list-group-item {
transition: all 0.2s ease-in-out;
border-left-width: 3px;
border-left-color: transparent;
}

.notifications-page .list-group-item:hover {
transform: translateX(2px);
}

.notifications-page .list-group-item.unread {
background-color: rgba(var(--bs-primary-rgb), 0.05);
border-left-color: var(--bs-primary);
}

[data-bs-theme="dark"] .notifications-page .list-group-item.unread {
background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.mobile-notifications-foldout {
background: transparent;
}

.mobile-notifications-foldout .card {
border-radius: 0.75rem;
}

.mobile-notifications-foldout .list-group-item {
border-left: 3px solid transparent;
}

.mobile-notifications-foldout .list-group-item.unread {
border-left-color: var(--bs-primary);
background-color: rgba(var(--bs-primary-rgb), 0.05);
}

@media (max-width: 991.98px) {
.mobile-notifications-foldout {
position: fixed;
top: 72px;
left: 0;
right: 0;
z-index: 1025;
}

.mobile-notifications-foldout .card {
max-height: calc(100vh - 96px);
overflow: hidden;
}

.mobile-notifications-foldout .list-group {
max-height: min(55vh, 360px);
overflow-y: auto;
}
}