body {
    font-family: 'raleway-light-webfont', sans-serif;
    background: #e3e3e3;
     
}

.show-p {
    cursor: pointer;
}

.table-button{
margin: 0px;
transition: background-color 0.5s ease;

}

.button1{

    padding: auto; 
    color: #fff !important;
    background: #88a3e6;
    transition: background-color 0.5s ease;
}

.button1.disabled, .button1:disabled {
    background-color: #3cd68c;
}
.view-text{
    font-size: 23px;
    display: block;
}
.button1:hover{
    color: #000;
    background: #6b8ad7;

}
.search-btn{
    background: #222d56;
    color: #fff;
    transition: background-color 0.5s ease;

}
.form-check-input{
 
    width: 25px;
    height: 25px;
    margin-right: 5px;
    transition: background-color 1s ease;
    border: none;
    background-image:none;
    background-color: #333;
    float: none !important;


}
.main-header .header-top {
    position: relative;
    display: flex;
}
.header-top .stripe.green {
    background-color: #05a85a;
}
.header-top .stripe.yellow {
    background-color: #fef605;
}
.header-top .stripe.red {
    background-color: #fe0001;
}
.header-top .stripe.black {
    background-color: #000;
}
.header-top .stripe {
    height: 10px;
    width: 14.285714286%;
}
.filter-list{
    max-height: 200px;
    overflow-y: auto;
    padding: 5px;
}
.filter-list a{
    cursor: pointer;
}
.filter-list a:hover{
    color: #b9181f;
    transition: color 0.5s ease;
}
.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease; /* Adjust the duration as needed */
}

.fade-in.show {
    opacity: 1;
}
.nav-dropdown{
    background: #222d56;
    color: #fff;
    width: auto;
}
.nav-dropdown .dropdown-item {
    color: #fff;
}

.nav-dropdown .dropdown-item:not(:first-child) {
    border-top: #b9181f solid 0.4px; /* Apply top border to all but the first element */
}
.nav-dropdown .dropdown-item:hover{
    color: #b9181f;
   background:  transparent;
}

.form-check-input:checked{
    background-color: #b9181f;
    border-color: #b9181f ;
    
}
.filter-list-link{
    color: #222d56;
    transition: color 0.5s ease;
}
.filter-list-link:hover{
    color: #ff9800;
   
}
.stats-label-text{
    font-size: small;
    color: #009688;
}
.stats-label{
    font-size:large;
    color: #222d56;
}
.form-check-label{
    padding-top: 2px;
    color: #b9181f;
}
.search-btn:hover{
    background: #b9181f;
    color: #fff;
}
.create-btn{
    background: #222d56;
    color: #ed2931;
    transition: background-color 0.5s ease;

}
.create-btn:hover{
    background: #b9181f;
    color: #fff;
}
.breadcrumb a{
    color: #fff
}

.breadcrumb .active{
    color: #495057
}
.breadcrumb-item+.breadcrumb-item::before {
    color: rgb(248 249 250);
}

.nav-tabs{
    border-bottom: solid 1px #fff;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: #8bc34a00;
    border: solid 1px #fff;
    border-bottom: solid 1px #e3e3e3;
}
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-content {
    text-align: center;
}

.navbar {
    background-color: #e3e3e3 !important;
}
.navbar-brand {
    color: #f7db69;
    font-weight: bold;
}
.nav-link{
}
.hero-section {
    background-color: #86a3e6;
    /*background-image: url('/assets/img/logo1b.png');  Update this path */
    background-position: left bottom;
    background-size: auto 34%;
    background-repeat: no-repeat;
    background-position-y: -10px;
    color: #fff;
    padding: 80px 0;
    text-align: center;
}
.hero-section-mini {
    background-color: transparent;
    /*background-image: url('/assets/img/logo1b.png');  Update this path */
    background-position: left bottom;
    background-size: auto 34%;
    background-repeat: no-repeat;
    background-position-y: -10px;
    color: #000;
    padding: 20px 0;
    text-align: center;
}
.category-card {
    border: 1px solid #a8216b;
    transition: transform 0.3s ease;
}
.category-card:hover {
    transform: scale(1.05);
}
.category-icon {
    font-size: 50px;
    color: #f26a44;
}
.footer {
    color: #86a3e6;
    padding: 5px;
    text-align: center;
}
.default-text-block{
    position: relative;
    margin-bottom: 40px;
}
.account-logo{
    max-width:355px;
    border-radius: 12px;
}
.list-group-item.active{
    color: #fff;
    background-color: #05a85a;
    border: none;


}
.list-group-item.active.filter-list-link{
    color: #fff !important;
    transition: color 0.5s ease;
}
th{
    padding:15px !important; 
    text-align: left;
}
td {
    padding: 15px !important;
    text-align: left;
}
thead{
    background-color: #198754 !important;
color: #fff;
    border-bottom: #ccc solid 1px;
}
 tr:first-child {
    padding-top: 15px;
    /* Your styles for the first row of the table */
}
.account-body{
    background: #dfdfdf;
}



.bg-green{
    background: #fff;
}
#dropdownMenuButton:hover{
    background: #fff0;
}
.dropdown-toggle{

}

.bg-nav{
    background: #222d56;
}

.text-green{
    color: #00A85A;
}

.text-yellow{
    color: #ff9800;
}

.acc-btn{
    background: #0d47a1;
    color:fff !important;
}

.acc-btn:hover{
    background: #0b3981;
    color:fff;
}

.acc-alt-link{
    color: #ff9800;
}

.acc-alt-link:hover{
    color: #333;
}
.az-content-dashboard{
   
  
}
.content {
   
}
#iframe_a{
    width:100%;
    border:none;
    min-height:80vh;
}
#show_table{
  
}
.page-link{
    color:#6c757d !important;
}
#_pagination{
        background: transparent;
}
.modal-header{
  background: #cfd8dc;
}
.modal-header{
     background-color: #d0f2f9;
      border-bottom: 2px solid #1b2a4f;
}
.s-item.active{
    color: #ffff00;
}
.d-tab{ min-height:60vh; }
.az-content-header-right .media label{
     color: #fff;
}
.az-dashboard-nav .nav:last-child .nav-link{
    color:#fff;
}
.pointer{
    cursor:pointer;
}
.az-header{
    background-color: #5D4037;
    border-bottom: 2px solid #ff9800;;
}
.az-footer {
    background-color: #0e0202;
    border-top: 1px solid #4CAF50;
    margin-top: auto;
    display: none;
}
.az-header-menu .nav-item > .nav-link {
    color: #22534f;
}
.az-dashboard-nav .nav:first-child .nav-link.active{
    color: #333;
}
.az-dashboard-nav .nav:first-child .nav-link:hover{
    color: #ccc;
}
.row > * {
   
    padding-left: 0;
   
}
.az-content-dashboard{
    padding-top:20px;
}

#viewToggle span i {
    cursor: pointer;
    color: #ccc;
}

#show_table{
    width:95vw;
    overflow-x: auto;
}

#viewToggle span.selected i {
    color: #263238;
    /* Highlighted state */
}

.search input[type="text"],
.search input[type="search"],
/* For select elements inside .search */
.search select {
    background-color: transparent;
}

.form-group label {
    /* color: #999;
    Light grey color */
}
.modal input,
.modal select {
    background-color: transparent;
    border-radius: 8px;
    margin-bottom: 20px;
}

.modal .modal-content{

    border: solid 0.5px #607d8b;
    border-radius: 8px;
}
.color-sdagreen {
    color: #005e56
}


.color-1 {
    color: #a8216b
}
.color-2 {
    color: #ec1a4a
}
.color-3 {
    color: #f26a44
}
.color-4 {
    color: #f7db69
}
.color-5 {
    color: #2e9598
}

.border-1 {
    border: 1px solid;
    border-color: #a8216b !important;
}
.border-2 {
    border: 1px solid;
    border-color: #ec1a4a !important;
}
.border-3 {
    border: 1px solid;
    border-color: #f26a44 !important;
}
.border-4 {
    border: 1px solid;
    border-color: #f7db69 !important;
}
.border-5 {
    border: 1px solid;
    border-color: #2e9598 !important;
}

.bg-1 {
    background-color: #a8216b
}
.bg-2 {
    background-color: #ec1a4a
}
.bg-3 {
    background-color: #f26a44
}
.bg-4 {
    background-color: #f7db69
}
.bg-5 {
    background-color: #2e9598
}

.navbar-nav .nav-link.active {
    color: #86a3e6
}

.nav-logo {
    max-height: 55px;
 
}

.color-sdagold {
    color: #c89b2d
}

.bg-sdagold {
    background-color: #c89b2d
}

.navbar {
    color: #005e56;
    border-bottom: #333 2px solid;

}

.logo {
   
    font-weight: bold;
   
    font-family: 'kingthings_exeter-webfont', sans-serif;
}


@font-face {
    font-family: 'montserratalternates-extralight-webfont';
    src: url('/assets/fonts/montserratalternates-extralight-webfont.woff2') format('woff2'),
        url('/assets/fonts/montserratalternates-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'playfairdisplaysc-regular-webfont';
    src: url('/assets/fonts/playfairdisplaysc-regular-webfont.woff2') format('woff2'),
        url('/assets/fonts/playfairdisplaysc-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lanenar_-webfont';
    src: url('/assets/fonts/lanenar_-webfont.woff2') format('woff2'),
        url('/assets/fonts/lanenar_-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


a{
    text-decoration: none;
}


.lanenar-font {
    font-family: 'lanenar_-webfont', sans-serif;

}

.playfair-font {
    font-family: 'playfairdisplaysc-regular-webfont', sans-serif;

}

.montserratalternates-font {
    font-family: 'montserratalternates-extralight-webfont', sans-serif;

}

.caviardreams-font {
    font-family: 'caviardreams-webfont', sans-serif;

}

.small-font {
    font-size: 16px;
    line-height: 40px;
    letter-spacing: 3px;
}

.normal-font {
    font-size: 22px;
    line-height: 50px;
    letter-spacing: 3px;
}

.large-font {
    font-size: 35px;
    line-height: 80px;
    letter-spacing: 3px;
}

.dark-mode {
    background-color: #001d1a;
    color: #ffffff;
}

.light-mode {
    background-color: #fcf6e9;
    color: #005e56;

}

th {
    padding: 15px !important;
    text-align: left;
}

td {
    padding: 15px !important;
    text-align: left;
}

thead {
    border-bottom: #ccc solid 1px;
}

tr:first-child {
    padding-top: 15px;
    /* Your styles for the first row of the table */
}



.bg-green {
    background: #fff;
}


.text-green {
    color: #00A85A;
}

.text-yellow {
    color: #ffff00;
}

.acc-btn {
    background: #0d47a1;
    color: fff !important;
}

.acc-btn:hover {
    background: #0b3981;
    color: fff;
}

.acc-alt-link {
    color: #ff9800;
}

.acc-alt-link:hover {
    color: #333;
}

.az-content-dashboard {}

#iframe_a {
    width: 100%;
    border: none;
    min-height: 80vh;
}

#show_table {}

#_pagination {
    background: transparent;
}

.modal-header {
    background: #cfd8dc;
}

.modal-header {
    background-color: #d0f2f9;
    border-bottom: 2px solid #1b2a4f;
}

.s-item.active {
    color: #ffff00;
}

.d-tab {
    min-height: 60vh;
}

.az-content-header-right .media label {
    color: #fff;
}

.az-dashboard-nav .nav:last-child .nav-link {
    color: #fff;
}

.pointer {
    cursor: pointer;
}

.az-header {
    background-color: #5D4037;
    border-bottom: 2px solid #ff9800;
    ;
}

.az-footer {
    background-color: #0e0202;
    border-top: 1px solid #4CAF50;
    margin-top: auto;
    display: none;
}

.az-header-menu .nav-item>.nav-link {
    color: #22534f;
}

.az-dashboard-nav .nav:first-child .nav-link.active {
    color: #333;
}

.az-dashboard-nav .nav:first-child .nav-link:hover {
    color: #ccc;
}

.row>* {

    padding-left: 0;

}

.az-content-dashboard {
    padding-top: 20px;
}

#viewToggle span i {
    cursor: pointer;
    color: #ccc;
}

#show_table {
    width: 95vw;
    overflow-x: auto;
}

#viewToggle span.selected i {
    color: #263238;
    /* Highlighted state */
}

.search input[type="text"],
.search input[type="search"],
/* For select elements inside .search */
.search select {
    background-color: transparent;
}

.form-group label {
   /*  color: #999;
    Light grey color */
}

.modal input,
.modal select {
    background-color: transparent;
    border-radius: 8px;
    margin-bottom: 20px;
}

.modal .modal-content {

    border: solid 0.5px #607d8b;
    border-radius: 8px;
}


/* ###### 7.9 Signin  ###### */
.az-signin-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
h2.title-message-color {
    color: #f19c0d;
}
.az-card-signin { 
    background: #fff0;
    max-height: 90vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background-color: rgba(255, 255, 255, 0.5);  */
}

@media (min-width: 480px) {
    .az-card-signin {
/*         border: 1px solid #cdd4e0;
 */        max-width: 460px;
        padding: 30px 35px;
    }
}

.az-signin-header h2 {
    font-weight: 500;
    color: #5b47fb;
    letter-spacing: -1px;
}

.az-signin-header h4 {
    font-weight: 400;
    color: #1c273c;
    margin-bottom: 25px;
}

.az-signin-header label {
    color: #7987a1;
}

.az-signin-header .form-control {
    color: #1c273c;
    font-weight: 500;
    border-width: 2px;
    border-color: #cdd4e0;
}

.az-signin-header .form-control:focus {
    border-color: #b4bdce;
    box-shadow: none;
}

.az-signin-header .form-control::placeholder {
    font-weight: 400;
    color: #97a3b9;
}

.az-signin-header .btn {
    margin-top: 25px;
}

.az-signin-footer p {
    color: #7987a1;
}

.az-signin-footer p:first-child {
    margin-bottom: 5px;
}

.az-signin-footer p:last-child {
    margin-bottom: 0;
}

.az-signin-footer a {
    color: #1c273c;
    font-weight: 700;
}

.az-signin-footer a:hover,
.az-signin-footer a:focus {
    color: #5b47fb;
}

:root {
    --zvese-green: #00a676; /* Electric Emerald */
    --zvese-green-dark: #063f2d;
    --zvese-charcoal: #1e293b; /* Charcoal Black */
    --zvese-muted: #64748b; /* Muted Ink */
    --zvese-line: #e2e8f0; /* Border/Slate */
    --zvese-soft: #f4f7f6; /* Soft Grey/Neutral Surface */
    --zvese-white: #ffffff; /* Cloudy White */
    --zvese-amber: #f7db69; /* Amber */
    --zvese-coral: #f26a44; /* Coral Red */
    --font-primary: "Inter", Arial, sans-serif;
    --font-brand: "Space Grotesk", Arial, sans-serif;
}

/* Premium Information Tile Styles */
.info-tile {
    background: var(--zvese-white);
    border-radius: 20px !important;
    border: 1px solid var(--zvese-line) !important;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
    padding: 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.info-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(30, 41, 59, 0.08) !important;
}
.info-sub-tile {
    background: var(--zvese-soft) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.02) !important;
}

/* 72x72px Circular KPI Progress Metrics */
.ops-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
}

.kpi-card {
    background: var(--zvese-white);
    border-radius: 20px;
    border: 1px solid var(--zvese-line);
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit !important;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(30, 41, 59, 0.08);
}
.kpi-ring-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
}
.kpi-ring {
    width: 72px;
    height: 72px;
}
.kpi-ring-bg {
    stroke: var(--zvese-soft);
}
.kpi-ring-fill {
    stroke: var(--zvese-green);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.kpi-ring-fill.coral {
    stroke: var(--zvese-coral);
}
.kpi-ring-fill.amber {
    stroke: var(--zvese-amber);
}
.kpi-ring-text {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 14px;
    fill: var(--zvese-charcoal);
}
.kpi-value {
    font-family: var(--font-primary);
    font-size: 26px;
    font-weight: 700;
    color: var(--zvese-charcoal);
    line-height: 1.2;
    margin-bottom: 4px;
}
.kpi-label {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--zvese-muted);
    line-height: 1.4;
    margin-bottom: 4px;
}
.kpi-delta {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
    color: var(--zvese-green);
    background: rgba(0, 166, 118, 0.08);
    padding: 2px 8px;
    border-radius: 99px;
    display: inline-block;
}
.kpi-delta.down {
    color: var(--zvese-coral);
    background: rgba(242, 106, 68, 0.08);
}

body.guest-shell {
    background: #f5f7f6;
    color: var(--zvese-charcoal);
    font-family: var(--font-primary);
}

.guest-shell .app-frame {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--zvese-white);
    box-shadow: none;
}

.guest-shell .content-area {
    padding: 0 0 28px;
}

/* Hero breaks out of content-area, all other sections get the side padding */
.guest-shell .content-area > *:not(.home-hero):not(style):not(script) {
    padding-left: clamp(18px, 4vw, 64px);
    padding-right: clamp(18px, 4vw, 64px);
}

.guest-shell .topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--zvese-line);
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px);
}

.guest-shell .navbar .container-fluid {
    min-height: 76px;
    padding-left: clamp(18px, 4vw, 64px) !important;
    padding-right: clamp(18px, 4vw, 64px) !important;
}

.guest-shell .topbar-brand {
    color: var(--zvese-charcoal);
    font-family: var(--font-brand);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.guest-shell .topbar-brand small {
    display: none;
}

.brand-degree {
    color: var(--zvese-green);
    font-weight: 700;
}

.guest-nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-right: 18px;
    max-width: min(62vw, 720px);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.guest-nav-links::-webkit-scrollbar {
    display: none;
}

.guest-nav-link {
    color: #1f2926;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.guest-nav-link.active,
.guest-nav-link:hover {
    color: var(--zvese-green);
}

.guest-shell .topbar-action {
    min-height: 42px;
    padding: 10px 20px;
    border: 1px solid rgba(0, 168, 90, 0.18);
    border-radius: 8px;
    background: var(--zvese-white);
    color: var(--zvese-charcoal);
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.guest-shell .topbar-action-primary {
    background: var(--zvese-green);
    color: #fff;
}

/* ─── HERO SECTION ─── */
.home-hero {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid var(--zvese-line);
    overflow: hidden;
}

.home-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: clamp(18px, 4vw, 80px);
    min-height: 460px;
}

.home-hero-copy {
    position: relative;
    z-index: 2;
    padding: 56px 0 56px;
}

.home-hero h1 {
    margin: 0 0 18px;
    color: #090d0d;
    font-family: var(--font-brand);
    font-size: clamp(38px, 4.5vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.home-hero h1 span {
    color: var(--zvese-green);
    font-style: italic;
}

.home-hero p {
    max-width: 380px;
    margin: 0;
    color: #35413e;
    font-size: 17px;
    line-height: 1.6;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    min-height: 48px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s;
}

.home-btn-primary {
    background: var(--zvese-green);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 168, 90, 0.25);
}

.home-btn-primary:hover {
    background: #00965a;
    color: #fff;
}

.home-btn-secondary {
    border: 1.5px solid #d0d9d5;
    background: #fff;
    color: #1a1f1e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.home-btn-secondary:hover {
    border-color: var(--zvese-green);
    color: var(--zvese-green);
}

.home-social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    color: #596460;
    font-size: 14px;
}

.commuter-stack {
    display: flex;
}

.commuter-stack span {
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, #5d321e 0 24%, transparent 25%),
        radial-gradient(circle at 50% 74%, #143d2e 0 35%, transparent 36%),
        #d69a67;
}

.commuter-stack span:first-child {
    margin-left: 0;
}

/* Visual column: image overflows hero naturally */
.home-hero-visual {
    position: relative;
    align-self: stretch;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.hero-minibus-img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* subtle entrance float */
    animation: floatVan 8s ease-in-out infinite;
}

@keyframes floatVan {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.live-panel,
.why-section {
    margin-top: 28px;
}

.live-panel {
    padding: 28px;
    border: 1px solid var(--zvese-line) !important;
    border-radius: 20px !important;
    background: var(--zvese-white) !important;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
}

.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.section-heading-row h2,
.why-section h2,
.download-copy h2 {
    margin: 0;
    color: #101515;
    font-family: var(--font-brand);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.section-heading-row h2 span {
    color: #596460;
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 500;
}

.live-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--zvese-green);
    font-size: 16px;
    font-weight: 700;
}

.live-status span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--zvese-green);
}

.signal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.signal-card,
.why-grid article {
    border: 1px solid var(--zvese-line) !important;
    border-radius: 20px !important;
    background: var(--zvese-white) !important;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.signal-card:hover,
.why-grid article:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(30, 41, 59, 0.08) !important;
}

.signal-card {
    padding: 18px;
}

.signal-card-top {
    display: grid;
    grid-template-columns: 48px 1fr 16px;
    gap: 14px;
    align-items: start;
}

.signal-avatar {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #eef4f1;
    color: #252b2a;
}

.signal-avatar span {
    position: absolute;
    right: 1px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--zvese-green);
}

.signal-card h3 {
    margin: 0 0 8px;
    color: #1b2221;
    font-family: var(--font-brand);
    font-size: 17px;
    font-weight: 700;
}

.signal-card p {
    margin: 0 0 7px;
    color: #53605c;
    font-size: 13px;
    line-height: 1.25;
}

.signal-chevron {
    color: #75807d;
    margin-top: 4px;
}

.signal-card-action {
    display: grid;
    grid-template-columns: 124px 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 8px;
    border-radius: 8px;
    background: #fbfcfc;
    border: 1px solid #eef1f0;
}

.signal-card-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 6px;
    background: var(--zvese-green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.signal-card-action span {
    color: #697470;
    font-size: 13px;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    float: right;
    gap: 8px;
    margin-top: 18px;
    color: var(--zvese-green);
    font-weight: 800;
    text-decoration: none;
}

.why-section h2 {
    margin-bottom: 18px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.why-grid article {
    min-height: 156px;
    padding: 24px 18px 18px;
    text-align: center;
}

.why-grid i {
    color: var(--zvese-green);
    font-size: 36px;
    margin-bottom: 18px;
}

.why-grid h3 {
    margin: 0 0 10px;
    color: #222827;
    font-family: var(--font-brand);
    font-size: 16px;
    font-weight: 700;
}

.why-grid p {
    margin: 0;
    color: #66716d;
    font-size: 13px;
    line-height: 1.45;
}

.download-band {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr 120px;
    align-items: center;
    gap: 40px;
    min-height: 280px;
    margin: 40px 0 0;
    overflow: hidden;
    padding: 40px 48px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 70%, rgba(0, 168, 90, 0.25), transparent 30%),
        linear-gradient(135deg, #053b2a, #011d16);
    color: #fff;
    box-shadow: 0 20px 40px rgba(1, 29, 22, 0.15);
}

.phone-map-img-container {
    align-self: end;
    display: flex;
    justify-content: center;
}

.phone-mockup-img {
    width: 240px;
    height: auto;
    margin-bottom: -40px;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4));
    transform: translateY(-10px);
    transition: transform 0.3s ease;
}

.phone-mockup-img:hover {
    transform: translateY(-15px) scale(1.02);
}

.download-copy h2 {
    color: #fff;
    font-size: 34px;
}

.download-copy p {
    max-width: 520px;
    margin: 16px 0 22px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.55;
}

.store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.store-row a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 150px;
    min-height: 48px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 7px;
    background: #050807;
    color: #fff;
    font-size: 10px;
    line-height: 1.1;
    text-decoration: none;
}

.store-row i {
    font-size: 24px;
}

.store-row strong {
    font-size: 16px;
}

.qr-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 102px;
    height: 102px;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
}

.qr-card span {
    background:
        linear-gradient(90deg, #111 35%, transparent 36% 64%, #111 65%),
        linear-gradient(#111 35%, transparent 36% 64%, #111 65%);
}

.site-footer {
    padding: 34px 40px 16px;
    border-top: 1px solid var(--zvese-line);
    background: #fff;
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
}

.site-footer-brand {
    display: inline-block;
    margin-bottom: 14px;
    color: #111716;
    font-family: var(--font-brand);
    font-size: 32px;
    font-weight: 700;
    text-decoration: none;
}

.site-footer p {
    max-width: 240px;
    margin: 0;
    color: #66716d;
    font-size: 15px;
    line-height: 1.55;
}

.site-footer h3 {
    margin: 0 0 14px;
    color: #222827;
    font-family: var(--font-brand);
    font-size: 15px;
    font-weight: 700;
}

.site-footer a {
    display: block;
    margin-bottom: 10px;
    color: #5f6966;
    font-size: 14px;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--zvese-green);
}

.site-socials {
    display: flex;
    gap: 14px;
}

.site-socials a {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--zvese-line);
    border-radius: 50%;
    color: #232b29;
    margin: 0;
}

.site-socials a:last-child {
    color: var(--zvese-green);
}

.site-footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--zvese-line);
    color: #9aa4a0;
    font-size: 13px;
    text-align: center;
}

.driver-anchor {
    height: 0;
}

.public-page,
.public-map-page,
.driver-onboarding-page {
    min-height: calc(100vh - 76px);
    padding: 32px 0 52px;
}

.public-page-heading {
    margin-bottom: 28px;
}

.public-page-heading h1,
.map-copy-panel h1,
.driver-copy h1,
.about-hero h1 {
    margin: 0 0 8px;
    color: #101515;
    font-family: var(--font-brand);
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
}

.public-page-heading p,
.map-copy-panel p,
.driver-copy p,
.about-hero p {
    max-width: 470px;
    margin: 0;
    color: #56625e;
    font-size: 18px;
    line-height: 1.55;
}

.signal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.signal-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.signal-tabs a,
.signal-search {
    min-height: 48px;
    border: 1px solid var(--zvese-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}

.signal-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    color: #46504d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.signal-tabs a.active {
    background: var(--zvese-green);
    color: #fff;
}

.signal-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(410px, 100%);
    padding: 0 16px;
    color: #9aa4a0;
}

.signal-search input {
    width: 100%;
    min-height: 44px;
    border: 0;
    outline: 0;
    color: #252b2a;
    font-size: 14px;
}

.signals-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--zvese-line) !important;
    border-radius: 20px !important;
    background: var(--zvese-white) !important;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
    padding: 8px !important;
}

.signals-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
}

.signals-table th {
    padding: 14px 18px !important;
    color: #8b9692;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.signals-table td {
    padding: 14px 18px !important;
    border-top: 1px solid var(--zvese-line);
    color: #37413e;
    font-size: 14px;
}

.signals-table strong {
    color: #111716;
    font-weight: 800;
}

.driver-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.driver-mini span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #d6945f, #3a2017);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.mini-green-btn,
.load-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zvese-green);
    font-weight: 800;
    text-decoration: none;
}

.mini-green-btn {
    min-height: 32px;
    padding: 7px 13px;
    border-radius: 6px;
    background: var(--zvese-green);
    color: #fff;
    font-size: 12px;
}

.load-more-link {
    gap: 8px;
    width: fit-content;
    margin: 24px auto 0;
    color: #53605c;
}

.load-more-link i {
    color: var(--zvese-green);
}

.public-map-page {
    display: grid;
    grid-template-columns: minmax(240px, 330px) 1fr;
    gap: 28px;
    padding-bottom: 0;
}

.map-copy-panel {
    padding-top: 48px;
}

.demand-legend {
    width: 140px;
    margin-top: 36px;
    padding: 18px;
    border: 1px solid var(--zvese-line);
    border-radius: 12px;
    background: #fff;
}

.demand-legend h2 {
    margin: 0 0 16px;
    color: #66716d;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
}

.demand-legend span {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: #4d5754;
    font-size: 14px;
}

.demand-legend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-high { background: var(--zvese-coral); }
.legend-mid { background: var(--zvese-amber); }
.legend-low { background: var(--zvese-green); }

.demand-map-canvas {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 0;
    background:
        linear-gradient(28deg, transparent 48%, #d7e0de 49% 51%, transparent 52%),
        linear-gradient(116deg, transparent 48%, #dbe3e1 49% 51%, transparent 52%),
        linear-gradient(170deg, transparent 47%, #e5eae8 48% 50%, transparent 51%),
        radial-gradient(circle at 82% 8%, #eaf0ef 0 10%, transparent 11%),
        #f3f6f5;
}

.demand-map-canvas::before,
.demand-map-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(126, 200, 255, 0.22) 73px 76px),
        repeating-linear-gradient(0deg, transparent 0 86px, rgba(126, 200, 255, 0.18) 87px 90px);
    opacity: 0.7;
}

.heat,
.map-bus,
.map-popover,
.map-zoom {
    position: absolute;
    z-index: 2;
}

.heat {
    width: 132px;
    height: 132px;
    border-radius: 50%;
}

.heat::before,
.heat::after {
    content: "";
    position: absolute;
    border-radius: inherit;
}

.heat::before {
    inset: 22px;
    opacity: 0.74;
}

.heat::after {
    inset: 52px;
    background: #202927;
    border: 6px solid currentColor;
}

.heat-high { color: var(--zvese-coral); background: rgba(232, 80, 79, 0.16); }
.heat-high::before { background: rgba(232, 80, 79, 0.35); }
.heat-mid { color: var(--zvese-amber); background: rgba(242, 173, 47, 0.14); }
.heat-mid::before { background: rgba(242, 173, 47, 0.3); }
.heat-low { color: var(--zvese-green); background: rgba(0, 168, 90, 0.14); }
.heat-low::before { background: rgba(0, 168, 90, 0.32); }

.heat-a { left: 30%; top: 36%; width: 150px; height: 150px; }
.heat-b { left: 40%; top: 65%; width: 72px; height: 72px; }
.heat-c { left: 62%; top: 7%; width: 82px; height: 82px; }
.heat-d { left: 55%; top: 32%; width: 86px; height: 86px; }

.map-bus {
    color: #101515;
    font-size: 26px;
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
}

.bus-a { left: 26%; top: 70%; }
.bus-b { left: 50%; top: 18%; }
.bus-c { right: 17%; top: 11%; }

.map-popover {
    right: 36px;
    top: 124px;
    width: 270px;
    padding: 24px;
    border: 1px solid var(--zvese-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.map-popover div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.map-popover h2,
.driver-form h2,
.about-grid h2 {
    margin: 0;
    color: #151919;
    font-family: var(--font-brand);
    font-size: 20px;
    font-weight: 700;
}

.map-popover strong {
    display: block;
    margin-top: 10px;
    color: #2d3734;
}

.map-popover p {
    margin: 20px 0 24px;
    color: #6b7471;
    line-height: 1.5;
}

.map-popover a,
.driver-form button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border: 0;
    border-radius: 7px;
    background: var(--zvese-green);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(0, 168, 90, 0.25);
}

.map-zoom {
    right: 18px;
    bottom: 28px;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background: #fff;
}

.map-zoom span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
}

.steps-row {
    display: grid;
    grid-template-columns: 1fr 44px 1fr 44px 1fr;
    align-items: center;
    gap: 28px;
}

.step-card {
    min-height: 230px;
    padding: 34px 28px;
    border: 1px solid var(--zvese-line) !important;
    border-radius: 20px !important;
    background: var(--zvese-white) !important;
    text-align: center;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(30, 41, 59, 0.08) !important;
}

.step-card i {
    color: var(--zvese-green);
    font-size: 54px;
    margin-bottom: 22px;
}

.step-card h2 {
    margin: 0 0 14px;
    color: #151919;
    font-family: var(--font-brand);
    font-size: 18px;
    font-weight: 700;
}

.step-card p {
    margin: 0 auto;
    max-width: 220px;
    color: #596460;
    line-height: 1.55;
}

.step-arrow {
    color: var(--zvese-green);
    font-size: 28px;
    text-align: center;
}

.driver-onboarding-page {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(340px, 480px);
    align-items: center;
    gap: 58px;
    padding-top: 40px;
}

.driver-copy ul {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: #43504c;
}

.driver-copy li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.driver-copy li i {
    color: var(--zvese-green);
}

.driver-van {
    position: relative;
    width: 380px;
    max-width: 100%;
    height: 190px;
    margin-top: 28px;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.14));
}

.driver-van-body {
    position: absolute;
    left: 42px;
    top: 44px;
    width: 280px;
    height: 96px;
    border: 3px solid #c9d0ce;
    border-radius: 16px 48px 14px 14px;
    background: linear-gradient(180deg, #fff, #dde3e1);
}

.driver-van-window {
    position: absolute;
    left: 156px;
    top: 58px;
    width: 104px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1f2a2c, #7a8b90);
}

.driver-van-stripe {
    position: absolute;
    left: 84px;
    top: 112px;
    width: 210px;
    height: 17px;
    transform: skewX(-14deg);
    background: var(--zvese-green);
}

.driver-van-wheel {
    position: absolute;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: 10px solid #1c2223;
    border-radius: 50%;
    background: #c8d0d0;
}

.wheel-one { left: 74px; }
.wheel-two { left: 254px; }

.driver-form {
    padding: 34px;
    border: 1px solid var(--zvese-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.07);
}

.driver-form h2 {
    margin-bottom: 24px;
}

.driver-form label {
    display: block;
    margin-bottom: 20px;
}

.driver-form label span {
    display: block;
    margin-bottom: 8px;
    color: #4b5652;
    font-size: 14px;
    font-weight: 700;
}

.driver-form input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--zvese-line);
    border-radius: 7px;
    outline: 0;
    color: #151919;
}

.driver-form button {
    width: 100%;
    font-size: 16px;
}

.driver-form p {
    margin: 22px 0 0;
    color: #68736f;
    text-align: center;
}

.driver-form p a {
    color: var(--zvese-green);
    font-weight: 800;
    text-decoration: none;
}

.about-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 260px;
    padding: 36px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 80% 20%, rgba(0, 168, 90, 0.18), transparent 24%),
        linear-gradient(135deg, #f7faf8, #fff);
    border: 1px solid var(--zvese-line);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.about-grid article {
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--zvese-line) !important;
    border-radius: 20px !important;
    background: var(--zvese-white) !important;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-grid article:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(30, 41, 59, 0.08) !important;
}

.about-grid i {
    color: var(--zvese-green);
    font-size: 36px;
    margin-bottom: 18px;
}

.about-grid h2 {
    margin-bottom: 12px;
}

.about-grid p {
    margin: 0;
    color: #5f6966;
    line-height: 1.55;
}

.zvese-auth-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 12% 12%, rgba(0, 168, 90, 0.16), transparent 26%),
        radial-gradient(circle at 88% 16%, rgba(242, 173, 47, 0.14), transparent 24%),
        linear-gradient(135deg, #f6faf8 0%, #ffffff 48%, #eef6f2 100%);
    color: var(--zvese-charcoal);
    font-family: var(--font-primary);
}

.auth-content {
    min-height: 100vh;
}

.auth-shell {
    position: relative;
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
    justify-content: center;
    padding: 78px clamp(18px, 4vw, 64px) 32px;
}

.auth-logo {
    position: absolute;
    left: clamp(18px, 4vw, 64px);
    top: 28px;
    color: #101515;
    font-family: var(--font-brand);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 500px);
    width: min(1120px, 100%);
    overflow: hidden;
    border: 1px solid rgba(0, 168, 90, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 28px 80px rgba(6, 63, 45, 0.12);
    backdrop-filter: blur(18px);
}

.auth-card-compact {
    width: min(980px, 100%);
}

.auth-visual {
    position: relative;
    min-height: min(560px, calc(100vh - 118px));
    overflow: hidden;
    padding: 42px;
    background:
        radial-gradient(circle at 72% 78%, rgba(0, 168, 90, 0.32), transparent 26%),
        linear-gradient(145deg, #073f2e 0%, #001f17 100%);
    color: #fff;
}

.auth-visual::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border: 54px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.auth-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 700;
}

.auth-visual h1 {
    position: relative;
    z-index: 1;
    max-width: 470px;
    margin: 40px 0 18px;
    font-family: var(--font-brand);
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
}

.auth-visual p {
    position: relative;
    z-index: 1;
    max-width: 410px;
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 17px;
    line-height: 1.6;
}

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px;
    background: rgba(255, 255, 255, 0.94);
}

.auth-panel-heading {
    margin-bottom: 30px;
}

.auth-panel-heading h2 {
    margin: 0 0 8px;
    color: #101515;
    font-family: var(--font-brand);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
}

.auth-panel-heading p {
    margin: 0;
    color: #66716d;
    font-size: 15px;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.auth-form label {
    display: block;
    margin: 0;
}

.auth-form label > span {
    display: block;
    margin-bottom: 8px;
    color: #3c4844;
    font-size: 14px;
    font-weight: 700;
}

.auth-input {
    display: grid;
    grid-template-columns: 1fr 22px;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 16px;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background: #fbfdfc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-input:focus-within {
    border-color: rgba(0, 168, 90, 0.44);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 168, 90, 0.08);
}

.auth-input input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #151919;
    font-size: 15px;
}

.auth-input input::placeholder {
    color: #9aa4a0;
}

.auth-input i {
    color: #7c8985;
    text-align: center;
}

.auth-input .show-p {
    color: var(--zvese-green);
}

.auth-captcha {
    grid-template-columns: auto 1fr 22px;
}

.auth-captcha strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 34px;
    border-radius: 8px;
    background: rgba(0, 168, 90, 0.1);
    color: var(--zvese-green);
    font-weight: 800;
}

.auth-message {
    min-height: 22px;
    margin: 0;
    color: #5d6965;
    font-size: 14px;
}

.auth-submit {
    display: inline-flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--zvese-green), #06894d);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(0, 168, 90, 0.25);
}

.auth-submit:disabled {
    opacity: 0.74;
}

.auth-register .auth-panel {
    padding-top: 40px;
    padding-bottom: 40px;
}

.auth-register .auth-panel-heading {
    margin-bottom: 22px;
}

.auth-register .auth-form {
    gap: 14px;
}

.auth-links {
    display: grid;
    gap: 10px;
    margin-top: 4px;
    text-align: center;
}

.auth-links a {
    color: var(--zvese-green);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.auth-links a:hover {
    color: #046f40;
}

.auth-map-mini {
    position: absolute;
    left: 54px;
    right: 54px;
    bottom: 54px;
    height: 210px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background:
        linear-gradient(30deg, transparent 48%, rgba(126, 200, 255, 0.24) 49% 51%, transparent 52%),
        linear-gradient(126deg, transparent 48%, rgba(126, 200, 255, 0.18) 49% 51%, transparent 52%),
        rgba(255, 255, 255, 0.07);
}

.auth-route,
.auth-node {
    position: absolute;
}

.auth-route {
    height: 4px;
    border-radius: 999px;
    background: rgba(126, 200, 255, 0.58);
}

.route-one {
    left: 38px;
    top: 74px;
    width: 240px;
    transform: rotate(18deg);
}

.route-two {
    left: 92px;
    top: 136px;
    width: 210px;
    transform: rotate(-15deg);
}

.auth-node {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--zvese-green);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
}

.node-one { left: 52px; top: 42px; }
.node-two { left: 48%; top: 105px; color: var(--zvese-amber); }
.node-three { right: 48px; top: 52px; color: var(--zvese-coral); }

.auth-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    margin-top: 42px;
}

.auth-feature-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 700;
}

.auth-feature-list i {
    color: #4ee89a;
}

.auth-recovery-icon {
    position: absolute;
    left: 54px;
    bottom: 54px;
    display: grid;
    width: 128px;
    height: 128px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 44px;
}

.dashboard-body {
    background: #f4f7f6;
    color: #141b1a;
    font-family: var(--font-primary);
}

.dashboard-body .app-frame {
    min-height: 100vh;
    background: #f4f7f6;
}

.dashboard-body .sidebar-panel {
    width: 270px !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #111b24 0%, #07131b 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 12px 0 32px rgba(7, 19, 27, 0.16);
}

.dashboard-body .app-main {
    background: #f4f7f6;
}

.dashboard-body .auth-topbar {
    display: none;
}

.dashboard-body .content-area {
    padding: 0;
}

.dashboard-body .sidebar-panel > .p-3:first-child {
    padding: 22px 22px 18px !important;
    border-bottom: 0 !important;
}

.dashboard-body .sidebar-brand-mark {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: #fff !important;
    font-family: var(--font-brand);
    font-size: 22px !important;
    font-weight: 700;
    margin-right: 8px !important;
}

.dashboard-body .sidebar-panel strong {
    color: #fff;
    font-family: var(--font-brand);
    font-size: 14px !important;
}

.dashboard-body .sidebar-panel small {
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 13px !important;
}

.dashboard-body .sidebar-panel > .p-3.border-bottom {
    margin: 0 18px 12px;
    padding: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}

.dashboard-body .sidebar-sections {
    display: block;
    padding: 4px 14px !important;
}

.dashboard-body .sidebar-section-title {
    display: none;
}

.dashboard-body .sidebar-link {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-weight: 700;
}

.dashboard-body .sidebar-link:hover,
.dashboard-body .sidebar-link.active {
    background: linear-gradient(135deg, #00a85a, #06894d) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(0, 168, 90, 0.28);
}

.dashboard-body .sidebar-link-icon {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    color: inherit;
}

.dashboard-body .sidebar-link-copy small {
    display: none;
}

.dashboard-body .sidebar-link-label {
    font-size: 14px;
}

.dashboard-body .sidebar-footer-links {
    padding: 16px 18px !important;
}

.dashboard-body .sidebar-footer-links a {
    background: transparent;
    color: #ff625d;
    font-weight: 800;
}

.dashboard-body .app-main[style*="margin-left"] {
    margin-left: 270px !important;
}

.ops-dashboard {
    min-height: 100vh;
    padding: 28px;
}

.ops-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.ops-role-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 168, 90, 0.1);
    color: var(--zvese-green);
    font-size: 12px;
    font-weight: 800;
}

.ops-dashboard h1 {
    margin: 8px 0 6px;
    color: #151919;
    font-family: var(--font-brand);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.18;
}

.ops-dashboard-header p {
    max-width: 680px;
    margin: 0;
    color: #68736f;
    font-size: 15px;
}

.ops-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ops-date {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid var(--zvese-line);
    border-radius: 9px;
    background: #fff;
    color: #49534f;
    font-weight: 700;
}

.ops-avatar {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #d6945f, #3a2017);
    color: #fff;
    font-weight: 800;
}

.ops-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.ops-metric-card {
    border: 1px solid var(--zvese-line);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 29, 24, 0.04);
}

.ops-panel {
    border: 1px solid var(--zvese-line) !important;
    border-radius: 20px !important;
    background: var(--zvese-white) !important;
    box-shadow: 0 10px 30px rgba(30, 41, 59, 0.04) !important;
    padding: 24px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ops-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(30, 41, 59, 0.08) !important;
}

.ops-metric-card {
    min-height: 118px;
    padding: 18px;
}

.ops-metric-card span {
    display: block;
    color: #66716d;
    font-size: 13px;
    font-weight: 800;
}

.ops-metric-card strong {
    display: block;
    margin-top: 10px;
    color: #121817;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.ops-metric-card small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    color: #6e7a76;
    font-size: 12px;
}

.ops-metric-card small i {
    color: var(--zvese-green);
}

.ops-panel-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
}

.ops-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.ops-panel {
    padding: 18px;
}

.ops-panel h2 {
    margin: 0 0 16px;
    color: #151919;
    font-family: var(--font-brand);
    font-size: 16px;
    font-weight: 700;
}

.ops-map {
    position: relative;
    min-height: 210px;
    overflow: hidden;
    border-radius: 10px;
    background:
        linear-gradient(28deg, transparent 48%, #d7e0de 49% 51%, transparent 52%),
        linear-gradient(116deg, transparent 48%, #dbe3e1 49% 51%, transparent 52%),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(126, 200, 255, 0.18) 73px 76px),
        #eef4f1;
}

.ops-heat {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, #00a85a 0 22%, rgba(0, 168, 90, 0.34) 23% 48%, rgba(0, 168, 90, 0.12) 49% 100%);
    color: #fff;
    font-weight: 800;
}

.heat-one {
    left: 36%;
    top: 36%;
    width: 82px;
    height: 82px;
}

.heat-two {
    right: 19%;
    bottom: 18%;
    width: 58px;
    height: 58px;
}

.ops-map .fas {
    position: absolute;
    color: #111;
    font-size: 24px;
    text-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.bus-one { left: 14%; top: 56%; }
.bus-two { left: 24%; top: 22%; }
.bus-three { right: 12%; top: 18%; }

.ops-routes-panel {
    grid-column: span 2;
}

.ops-route-list {
    display: grid;
}

.ops-route-list div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--zvese-line);
    color: #333e3a;
}

.ops-route-list div:last-child {
    border-bottom: 0;
}

.ops-route-list span {
    font-weight: 700;
}

.ops-route-list strong {
    color: #66716d;
    font-size: 13px;
}

.ops-status-list {
    display: grid;
    gap: 10px;
}

.ops-status-list div {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--zvese-line);
    border-radius: 9px;
    background: #fbfdfc;
    color: #53605c;
    font-size: 13px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status-0 { background: var(--zvese-green); }
.status-1 { background: #ff3f3f; }
.status-2 { background: #8c98a2; }
.status-3 { background: #cbd3d8; }

.ops-events-panel {
    grid-column: span 2;
}

.ops-event-list {
    display: grid;
    gap: 10px;
}

.ops-event-list div {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background: #fbfdfc;
}

.ops-event-list i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 168, 90, 0.1);
    color: var(--zvese-green);
}

.ops-event-list span {
    color: #34403c;
    font-weight: 700;
}

.ops-event-list strong {
    color: #66716d;
    font-size: 12px;
}

.role-onboarding {
    min-height: calc(100vh - 72px);
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: #f7faf8;
}

.role-phone-frame {
    width: min(390px, 100%);
    min-height: 640px;
    padding: 32px 22px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(6, 63, 45, 0.12);
}

.role-choice-header h1 {
    margin: 0 0 6px;
    color: #101515;
    font-family: var(--font-brand);
    font-size: 28px;
    font-weight: 700;
}

.role-choice-header p {
    margin: 0 0 26px;
    color: #7b8682;
    font-size: 14px;
}

.role-pending-note {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(250, 181, 47, 0.35);
    border-radius: 14px;
    background: rgba(250, 181, 47, 0.1);
    color: #79560c;
    font-size: 13px;
    font-weight: 700;
}

.role-choice-card {
    display: grid;
    width: 100%;
    min-height: 132px;
    grid-template-columns: 1fr 96px 18px;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 18px 16px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 20px;
    background: #fff;
    color: #101515;
    text-align: left;
    box-shadow: 0 12px 34px rgba(6, 63, 45, 0.06);
}

.role-choice-card:disabled {
    opacity: 0.64;
}

.role-choice-card strong {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-brand);
    font-size: 22px;
    font-weight: 700;
}

.role-choice-card small {
    display: block;
    max-width: 170px;
    color: #6b7773;
    font-size: 14px;
    line-height: 1.45;
}

.role-art {
    display: grid;
    width: 90px;
    height: 90px;
    place-items: center;
    border-radius: 26px;
    font-size: 36px;
}

.role-art-operator {
    background: linear-gradient(135deg, rgba(0, 168, 90, 0.12), rgba(126, 200, 255, 0.18));
    color: var(--zvese-green);
}

.role-art-passenger {
    background: linear-gradient(135deg, rgba(0, 168, 90, 0.12), rgba(255, 255, 255, 0.8));
    color: #073f2e;
}

.zvese-modal-form label {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    color: #2f3b37;
    font-size: 13px;
    font-weight: 800;
}

.zvese-modal-form .form-control,
.zvese-modal-form .form-select {
    min-height: 46px;
    border-color: var(--zvese-line);
    border-radius: 10px;
}

.operator-request-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.operator-request-grid .onboarding-form-result {
    grid-column: 1 / -1;
}

.kyc-upload-field {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    color: #2f3b37;
    font-size: 13px;
    font-weight: 800;
}

.kyc-upload-card {
    position: relative;
    display: grid;
    min-height: 148px;
    place-items: center;
    overflow: hidden;
    border: 1px dashed rgba(0, 168, 90, 0.42);
    border-radius: 14px;
    background: #f8fcfa;
    color: var(--zvese-green);
    font-weight: 800;
}

.kyc-upload-card img {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kyc-upload-card img.has-image {
    display: block;
}

.kyc-upload-card img.has-image + span {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 12px;
}

.zvese-cropper-modal .modal-body {
    display: grid;
    gap: 16px;
}

.kyc-crop-stage {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 16px;
    background: #101515;
}

#kycCropCanvas {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16 / 11;
    cursor: grab;
}

.kyc-crop-frame {
    position: absolute;
    inset: 14%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.kyc-zoom-control {
    display: grid;
    gap: 8px;
    color: #2f3b37;
    font-size: 13px;
    font-weight: 800;
}

.zvese-green-btn {
    border: 0;
    background: var(--zvese-green);
    color: #fff;
    font-weight: 800;
}

.table-button.danger {
    background: #fef1ef;
    color: #d54838;
}

.cluster-boundary-builder {
    overflow: hidden;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(6, 63, 45, 0.08);
}

.cluster-listing-map-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(6, 63, 45, 0.08);
}

.module-map-shell {
    overflow: hidden;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(6, 63, 45, 0.08);
}

.module-map {
    min-height: 420px;
    height: min(52vh, 560px);
}

.cluster-map-workspace {
    padding: 24px;
}

.cluster-map-screen {
    display: grid;
    gap: 16px;
    max-width: 1320px;
    margin: 0 auto;
}

.cluster-map-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

.cluster-map-hero h1 {
    margin: 0;
    color: #101515;
    font-family: var(--font-brand);
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
}

.cluster-map-hero h1 span {
    color: var(--zvese-green);
}

.cluster-map-hero p {
    max-width: 420px;
    margin: 10px 0 0;
    color: #66716d;
}

.cluster-hero-actions,
.cluster-map-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cluster-map-filterbar {
    padding: 12px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(6, 63, 45, 0.06);
}

.cluster-map-filterbar form {
    flex: 1 1 260px;
}

.cluster-map-filterbar .form-control,
.cluster-map-filterbar .form-select {
    min-height: 42px;
}

.cluster-map-screen .cluster-map-picker {
    height: min(68vh, 680px);
    min-height: 540px;
}

.cluster-map-statbar {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 700;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cluster-map-modehint {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #43504c;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(6, 63, 45, 0.1);
}

.cluster-context-viewer {
    position: absolute;
    top: 22px;
    right: 0;
    z-index: 700;
    width: min(340px, calc(100% - 44px));
    padding: 16px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(6, 63, 45, 0.13);
    backdrop-filter: blur(14px);
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms ease-out, opacity 200ms ease-out;
}

.cluster-context-viewer.is-open {
    transform: translateX(-22px);
    opacity: 1;
    pointer-events: auto;
}

.cluster-context-head,
.cluster-context-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cluster-context-head {
    margin-bottom: 12px;
}

.cluster-context-head span {
    display: block;
    color: var(--zvese-green);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.cluster-context-head strong {
    display: block;
    color: #101515;
    font-family: var(--font-brand);
    font-weight: 800;
}

.cluster-context-body {
    display: grid;
    gap: 10px;
}

.cluster-context-row {
    padding: 10px;
    border: 1px solid rgba(16, 21, 21, 0.06);
    border-radius: 8px;
    background: #f4fbf7;
}

.cluster-context-row span,
.cluster-context-row strong {
    display: block;
}

.cluster-context-row span {
    color: #66716d;
    font-size: 12px;
    font-weight: 800;
}

.cluster-context-row strong {
    color: #101515;
    font-size: 13px;
    text-align: right;
}

.cluster-map-count {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 201, 123, 0.1);
    color: var(--zvese-green);
    font-size: 13px;
    font-weight: 800;
}

.cluster-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--zvese-line);
}

.cluster-map-toolbar strong {
    display: block;
    color: #101515;
    font-family: var(--font-brand);
    font-size: 18px;
    font-weight: 700;
}

.cluster-map-toolbar span,
.cluster-boundary-meta {
    color: #66716d;
    font-size: 13px;
}

.cluster-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cluster-map-picker {
    position: relative;
    width: 100%;
    min-height: 430px;
    height: min(58vh, 520px);
    overflow: hidden;
    background: #eef4f2;
    cursor: crosshair;
    user-select: none;
}

.cluster-map-picker.is-panning {
    cursor: grab;
}

.cluster-map-picker.is-panning:active {
    cursor: grabbing;
}

.cluster-map-picker.is-removing {
    cursor: not-allowed;
}

.cluster-map-picker.is-adding-location {
    cursor: crosshair;
}

.cluster-map-picker.is-adding-route {
    cursor: pointer;
}

#clusterBoundaryCanvas {
    display: block;
    width: 100%;
    height: auto;
    min-height: 320px;
}

.leaflet-cluster-map {
    isolation: isolate;
}

.leaflet-cluster-map.leaflet-container,
.leaflet-cluster-map .leaflet-control {
    font-family: var(--font-primary);
}

.leaflet-popup-content strong,
.leaflet-popup-content small,
.leaflet-popup-content a {
    display: block;
}

.leaflet-popup-content strong {
    color: #101515;
    font-family: var(--font-brand);
    font-weight: 800;
}

.leaflet-popup-content small {
    color: #66716d;
    font-size: 12px;
}

.cluster-popup-link {
    margin-top: 8px;
    color: var(--zvese-green);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.leaflet-cluster-map .leaflet-control-attribution {
    font-size: 10px;
}

.cluster-map-unavailable {
    display: grid;
    min-height: 430px;
    place-items: center;
    padding: 24px;
    color: #66716d;
    text-align: center;
}

.cluster-point-label {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.cluster-point-label::before {
    display: none;
}

.cluster-point-marker {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: var(--zvese-green);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.cluster-point-marker span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.cluster-map-label {
    position: absolute;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #43504c;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(16, 21, 21, 0.1);
    pointer-events: none;
}

.cluster-map-label.label-west {
    left: 18%;
    top: 48%;
}

.cluster-map-label.label-cbd {
    left: 50%;
    top: 42%;
}

.cluster-map-label.label-east {
    right: 16%;
    top: 56%;
}

.cluster-boundary-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--zvese-line);
    background: #fbfdfc;
}

.cluster-boundary-meta span:first-child {
    color: var(--zvese-green);
    font-weight: 800;
}

.cluster-detail-layout {
    display: grid;
    gap: 20px;
}

.cluster-detail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.cluster-detail-card {
    padding: 16px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(6, 63, 45, 0.06);
}

.cluster-detail-card span,
.cluster-fence-readout span {
    display: block;
    margin-bottom: 6px;
    color: #66716d;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.cluster-detail-card strong {
    color: #101515;
    font-family: var(--font-brand);
    font-size: 18px;
    font-weight: 700;
}

.cluster-fence-readout {
    padding: 16px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 12px;
    background: #fbfdfc;
}

.cluster-fence-readout code {
    display: block;
    overflow-wrap: anywhere;
    color: #26302d;
    white-space: normal;
}

.cluster-manage-layout {
    display: grid;
    gap: 20px;
}

.cluster-manage-map-shell,
.cluster-manage-panel {
    overflow: hidden;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(6, 63, 45, 0.08);
}

.cluster-manage-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.cluster-manage-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--zvese-line);
}

.cluster-manage-panel-head span {
    display: block;
    color: #66716d;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.cluster-manage-panel-head strong {
    color: #101515;
    font-family: var(--font-brand);
    font-size: 28px;
    line-height: 1;
}

.cluster-manage-panel-head a,
.cluster-manage-row a {
    color: var(--zvese-green);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.cluster-manage-list {
    display: grid;
    gap: 0;
}

.cluster-manage-list p {
    margin: 0;
    padding: 18px 16px;
    color: #66716d;
}

.cluster-manage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--zvese-line);
}

.cluster-manage-row:last-child {
    border-bottom: 0;
}

.cluster-manage-row strong,
.cluster-manage-row span {
    display: block;
}

.cluster-manage-row strong {
    color: #101515;
    font-weight: 800;
}

.cluster-manage-row span {
    color: #66716d;
    font-size: 13px;
}

.cluster-location-marker {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #1687ff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.cluster-location-marker span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ffffff;
}

.cluster-pending-location-marker {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #ffb433;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.cluster-pending-location-marker span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ffffff;
}

.cluster-location-modal .modal-title {
    color: #101515;
    font-family: var(--font-brand);
    font-weight: 700;
}

.cluster-location-modal .modal-header p {
    color: #66716d;
    font-size: 13px;
}

.route-location-builder {
    overflow: hidden;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 16px 44px rgba(6, 63, 45, 0.08);
}

.route-location-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.route-location-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.route-location-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(16, 21, 21, 0.08);
    border-radius: 12px;
    background: #fbfdfc;
}

.route-location-index {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: var(--zvese-green);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.route-location-item input {
    width: 100%;
    border: 0;
    background: transparent;
    color: #101515;
    font-weight: 800;
    outline: none;
}

.route-location-item small {
    display: block;
    color: #66716d;
    font-size: 12px;
}

.route-location-remove {
    border: 0;
    background: #fef1ef;
    color: #d54838;
    font-size: 12px;
    font-weight: 800;
}

.route-location-saved {
    color: var(--zvese-green);
    font-size: 12px;
    font-weight: 800;
}

.route-point-marker {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 3px solid #ffffff;
    border-radius: 999px;
    background: #1687ff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.route-point-marker span {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.dashboard-body .hero-section {
    margin: 0;
    padding: 26px 28px 18px;
    background: transparent;
    color: #151919;
    text-align: left;
}

.dashboard-body .hero-section .container {
    max-width: none;
    padding: 0;
}

.dashboard-body .hero-section h3 {
    margin: 0 0 8px;
    color: #151919;
    font-family: var(--font-brand);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.18;
}

.dashboard-body .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: #73807b;
    font-size: 13px;
}

.dashboard-body .breadcrumb a,
.dashboard-body .breadcrumb .active {
    color: #73807b;
    text-decoration: none;
}

.dashboard-body .breadcrumb a:hover {
    color: var(--zvese-green);
}

.dashboard-body .breadcrumb-item + .breadcrumb-item::before {
    color: #a5afab;
}

.dashboard-body #categories,
.dashboard-body #search,
.dashboard-body section.py-5 {
    padding: 0 28px 32px !important;
}

.dashboard-body #categories > .container,
.dashboard-body #search > .container,
.dashboard-body section.py-5 > .container {
    max-width: none;
    border: 1px solid var(--zvese-line) !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 29, 24, 0.05);
}

.dashboard-body #categories > .container > .p-3 {
    padding: 18px !important;
}

.dashboard-body #search .container,
.dashboard-body section.py-5 > .container {
    padding: 22px !important;
}

.dashboard-body #search .form,
.dashboard-body section.py-5 .form {
    margin: 0 !important;
    padding: 14px !important;
}

.dashboard-body #searchForm .d-flex {
    min-width: min(460px, 100%);
    min-height: 48px;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background: #fbfdfc;
    overflow: hidden;
}

.dashboard-body .search-input,
.dashboard-body #searchForm .form-control {
    min-height: 48px;
    border: 0;
    background: transparent;
    color: #17201d;
    font-size: 14px;
}

.dashboard-body .search-input:focus,
.dashboard-body .form-control:focus,
.dashboard-body .form-select:focus {
    border-color: rgba(0, 168, 90, 0.44);
    box-shadow: 0 0 0 4px rgba(0, 168, 90, 0.08);
}

.dashboard-body .search-btn,
.dashboard-body .create-btn,
.dashboard-body .submit-btn,
.dashboard-body .table-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.dashboard-body .search-btn {
    min-width: 94px;
    margin: 4px !important;
    background: #eef8f3;
    color: var(--zvese-green);
}

.dashboard-body .search-btn:hover {
    background: rgba(0, 168, 90, 0.14);
    color: #047141;
}

.dashboard-body .create-btn,
.dashboard-body .submit-btn {
    min-height: 48px;
    padding: 0 18px;
    background: linear-gradient(135deg, var(--zvese-green), #06894d);
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(0, 168, 90, 0.22);
}

.dashboard-body .create-btn:hover,
.dashboard-body .submit-btn:hover {
    color: #fff !important;
    transform: translateY(-1px);
}

.dashboard-body .table-button {
    min-height: 34px;
    padding: 7px 12px;
    background: rgba(0, 168, 90, 0.1);
    color: var(--zvese-green);
}

.dashboard-body .table-button:hover {
    background: var(--zvese-green);
    color: #fff;
}

.dashboard-body #viewToggle {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 4px;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background: #fbfdfc;
}

.dashboard-body #viewToggle span {
    display: grid;
    width: 40px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #66716d;
    cursor: pointer;
}

.dashboard-body #viewToggle span:hover {
    background: rgba(0, 168, 90, 0.1);
    color: var(--zvese-green);
}

.dashboard-body #viewToggle i {
    font-size: 16px !important;
}

.dashboard-body .search .form-select,
.dashboard-body #order_filter,
.dashboard-body .f-sel {
    min-height: 46px;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background-color: #fbfdfc;
    color: #34403c;
    font-size: 14px;
}

.dashboard-body .stats-label-text {
    color: #66716d;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-body .stats-label {
    color: #151919;
    font-size: 16px;
    font-weight: 800;
}

.dashboard-body hr {
    border-color: var(--zvese-line);
    opacity: 1;
}

.dashboard-body #results {
    overflow-x: auto;
}

.dashboard-body #results table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--zvese-line);
    border-radius: 12px;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
}

.dashboard-body #results table thead,
.dashboard-body #results table .thead {
    background: #f8faf9 !important;
    color: #66716d !important;
}

.dashboard-body #results table th {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--zvese-line);
    color: #66716d !important;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.dashboard-body #results table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #eef2f0;
    color: #34403c;
    font-size: 14px;
    vertical-align: middle;
}

.dashboard-body #results table tbody tr:hover {
    background: #fbfdfc;
}

.dashboard-body #results table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-body #results > p {
    margin: 0;
    padding: 44px 18px;
    border: 1px dashed #cdd7d2;
    border-radius: 12px;
    background: #fbfdfc;
    color: #66716d;
    text-align: center;
    font-weight: 700;
}

.dashboard-body #list_template + hr,
.dashboard-body #results hr {
    display: none;
}

.dashboard-body #results .fade-in,
.dashboard-body #results > div:not([id]) {
    margin-bottom: 10px !important;
    padding: 16px !important;
    border: 1px solid var(--zvese-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 29, 24, 0.04);
}

.dashboard-body #results h5 {
    margin-bottom: 8px;
    color: #151919;
    font-family: var(--font-brand);
    font-weight: 700;
}

.dashboard-body #pagination-controls .page-link,
.dashboard-body .pagination .page-link {
    border-color: var(--zvese-line);
    color: var(--zvese-green);
    font-weight: 700;
}

.dashboard-body #pagination-controls .active .page-link,
.dashboard-body .pagination .active .page-link {
    border-color: var(--zvese-green);
    background: var(--zvese-green);
    color: #fff;
}

.dashboard-body .form label,
.dashboard-body .form-group label {
    color: #43504c !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.dashboard-body .form-control,
.dashboard-body .form-select {
    min-height: 50px;
    border: 1px solid var(--zvese-line);
    border-radius: 10px;
    background-color: #fbfdfc;
    color: #151919;
    font-size: 15px;
}

.dashboard-body .table-responsive {
    margin: 0 !important;
    padding: 8px 0 0 !important;
}

.dashboard-body .table-responsive table {
    border: 1px solid var(--zvese-line);
    border-radius: 12px;
    overflow: hidden;
}

.dashboard-body .table-responsive th,
.dashboard-body .table-responsive td {
    padding: 16px !important;
    border-bottom: 1px solid #eef2f0;
}

.dashboard-body .table-responsive th {
    width: 240px;
    color: #151919;
    background: #fbfdfc;
}

.dashboard-body .table-responsive td {
    color: #52605b !important;
}

.dashboard-body .list-group,
.dashboard-body .nav-tabs {
    gap: 8px;
    border: 0;
}

.dashboard-body .nav-tabs .nav-link,
.dashboard-body .list-group-item {
    border: 1px solid var(--zvese-line);
    border-radius: 9px !important;
    color: #52605b;
    font-weight: 700;
}

.dashboard-body .nav-tabs .nav-link.active,
.dashboard-body .list-group-item.active {
    border-color: var(--zvese-green);
    background: var(--zvese-green);
    color: #fff !important;
}

@media (max-width: 991.98px) {
    .auth-shell {
        align-items: flex-start;
        padding-top: 90px;
    }

    .auth-card {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 360px;
        padding: 34px;
    }

    .auth-panel {
        padding: 34px;
    }

    .auth-map-mini {
        display: none;
    }

    .dashboard-body .sidebar-panel {
        width: 100% !important;
    }

    .dashboard-body .auth-topbar {
        display: flex;
    }

    .dashboard-body .content-area {
        padding-top: 0;
    }

    .ops-dashboard {
        padding: 18px;
    }

    .ops-dashboard-header,
    .ops-header-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .ops-metric-grid,
    .ops-panel-grid,
    .ops-bottom-grid {
        grid-template-columns: 1fr;
    }

    .operator-request-grid {
        grid-template-columns: 1fr;
    }

    .ops-routes-panel,
    .ops-events-panel {
        grid-column: auto;
    }
}

@media (min-width: 992px) and (max-height: 820px) {
    .auth-shell {
        padding-top: 26px;
        padding-bottom: 26px;
    }

    .auth-logo {
        top: 18px;
    }

    .auth-card {
        width: min(540px, 100%);
        grid-template-columns: 1fr;
    }

    .auth-visual {
        display: none;
    }

    .auth-panel,
    .auth-register .auth-panel {
        padding: 30px;
    }

    .auth-panel-heading {
        margin-bottom: 18px;
    }

    .auth-form,
    .auth-register .auth-form {
        gap: 12px;
    }

    .auth-input,
    .auth-submit {
        min-height: 48px;
    }
}

@media (max-width: 575.98px) {
    .auth-shell {
        padding-left: 14px;
        padding-right: 14px;
    }

    .auth-logo {
        left: 18px;
    }

    .auth-card {
        border-radius: 18px;
    }

    .auth-visual,
    .auth-panel {
        padding: 24px;
    }

    .auth-visual {
        min-height: 300px;
    }

    .auth-panel-heading h2 {
        font-size: 28px;
    }
}

@media (max-width: 991.98px) {
    .guest-shell .app-frame {
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    .guest-shell .navbar .container-fluid,
    .guest-shell .content-area,
    .site-footer {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .guest-shell .topbar-brand {
        font-size: 26px;
    }

    .guest-nav-links {
        gap: 18px;
        margin-right: 8px;
    }

    .guest-nav-link {
        font-size: 12px;
    }

    .home-hero-inner {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-right: 0;
    }

    .home-hero-copy {
        padding: 40px 0 20px;
    }

    .home-hero-visual {
        height: 260px;
        overflow: hidden;
    }

    .hero-minibus-img {
        width: 100%;
        height: 260px;
        object-fit: cover;
        object-position: center;
        animation: none;
    }

    .signal-grid,
    .why-grid,
    .steps-row,
    .public-map-page,
    .driver-onboarding-page,
    .about-grid,
    .site-footer-grid {
        grid-template-columns: 1fr;
    }

    .step-arrow {
        transform: rotate(90deg);
    }

    .public-map-page {
        gap: 22px;
    }

    .map-copy-panel {
        padding-top: 18px;
    }

    .demand-map-canvas {
        min-height: 480px;
        margin-left: -18px;
        margin-right: -18px;
    }

    .map-popover {
        right: 18px;
        left: 18px;
        width: auto;
    }

    .signal-toolbar,
    .about-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .download-band {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 22px;
    }

    .phone-map-img-container {
        display: none;
    }

    .qr-card {
        width: 86px;
        height: 86px;
    }
}

@media (max-width: 575.98px) {
    .guest-shell .navbar .container-fluid {
        min-height: 66px;
    }

    .home-hero h1 {
        font-size: 42px;
    }

    .guest-nav-links {
        display: flex;
        max-width: 48vw;
    }

    .home-hero p {
        font-size: 16px;
    }

    .home-btn {
        width: 100%;
    }

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-heading-row h2,
    .why-section h2,
    .download-copy h2 {
        font-size: 24px;
    }
}

/* Split Action Container for bottom Operator panels */
.ops-split-container {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
    padding: 0.5rem 0;
    min-width: 0;
}

.ops-split-action {
    flex-shrink: 0;
    width: 72px;
}

.ops-split-action a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.2;
    gap: 0.75rem;
}

.ops-action-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e6f7f0;
    color: #00A85A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.ops-split-action a:hover .ops-action-circle {
    background: #00A85A;
    color: #ffffff;
    transform: scale(1.05);
}

.ops-split-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ops-entity-card {
    background: #f8faf9;
    border: 1px solid #eef1f0;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    overflow: hidden;
}

.ops-entity-icon {
    font-size: 1.2rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8f9fa;
    flex-shrink: 0;
}

.ops-entity-icon.green {
    background: #e6f7f0;
    color: #00A85A;
}

.ops-entity-details {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.ops-entity-title {
    font-size: 0.92rem;
    color: #1a1a1a;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-entity-title.bold {
    font-weight: 700;
}

.ops-entity-title strong {
    font-weight: 700;
}

.ops-entity-subtitle {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 0.15rem;
    font-weight: 500;
}

.ops-driver-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #e6f7f0;
    color: #00875a;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Empty states */
.ops-route-list .empty-state,
.ops-status-list .empty-state,
.ops-event-list .empty-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 12px;
    color: #6c757d;
    font-size: 0.9rem;
}

.ops-route-list .empty-state a,
.ops-status-list .empty-state a,
.ops-event-list .empty-state a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #00A85A;
    color: white;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 168, 90, 0.2);
    transition: transform 0.2s;
}

.ops-route-list .empty-state a:hover,
.ops-status-list .empty-state a:hover,
.ops-event-list .empty-state a:hover {
    transform: scale(1.1);
}

.view-all-link {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 1rem;
}

.view-all-link a {
    font-size: 0.9rem;
    color: #005e56;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.view-all-link a:hover {
    color: #00A85A;
}

/* Status dots */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-0 { background-color: #00A85A; }
.status-1 { background-color: #fbc02d; }
.status-2 { background-color: #f44336; }
.status-3 { background-color: #9e9e9e; }