:root {
    --carendarBlue: #006699;
    --white: #fff;
    /* Повърхност (фон на карти/панели). Бяла в светла тема, тъмна в data-bs-theme="dark".
       Семантика: --surface = фон, --white = текст върху цветно (остава бял и в тъмна тема). */
    --surface: #fff;
    --black: #000;
    --borderColor: #ccc;
    --grayLight: #888;
    --iconNoActivBootom: #ccc;
    --borderHover: #777;
    --iconColor: #6c757d;
    --alert: #d9534f;
    --text: #777;
    --yellow: #ffff00;
    --myRed: #ff0000;
    --gold: #FFD700;
}

.login-box {
    z-index: 1000;
    background-color: var(--surface);
}

.login-box-button {
    display: none;
}

.rounded-cards {
    border-radius: 8px;
    border: 1px solid var(--borderColor);
    background-color: var(--surface);
    padding: 6px;
}

.lightbulb {
    color: var(--carendarBlue);
}

.my-fix-fullscreen {
    width: 99vw;
}

#map-canvas {
    width: 100%;
    height: 640px;
}

#map-canvas-save-obj {
    width: 100%;
    height: 360px;
}

.my-top-navbar {
    background-color: var(--carendarBlue) !important;
}

.no-link {
    text-decoration: none;
    color: var(--text)
}

.my-top-navbar .user-name {
    text-transform: uppercase;
    border: 1px solid var(--borderColor);
    border-radius: 25px;
    background: #7C7C7C;
    background-image: none;
    background-size: auto;
    background-size: 32px 32px;
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    font-size: 20px;
    font-weight: 200;
}

.my-top-navbar .user-name .nav-link span {
    color: var(--white);
}

.my-top-navbar .nav-link {
    padding: 0;
}

.brand-name-navi {
    font-size: 1.4em;
    color: var(--white);
}


/* The side navigation menu */

.sidenav {
    height: 100%;
    /* 100% Full-height */
    width: 40px;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Stay on top */
    left: 0;
    background-color: var(--surface);
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 24px;
    /* Place content 60px from the top */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */

.sidenav .item-left-menu {
    padding: 8px;
    text-decoration: none;
    color: var(--grayLight);
    display: block;
    transition: 0.3s;
    border-bottom: 1px solid var(--grayLight);
}

.sidenav .item-left-menu.active {
    color: var(--white);
    background-color: var(--carendarBlue);
}

.sidenav a:hover {
    color: #f1f1f1;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {
    transition: margin-left .5s;
    margin-left: 2.5rem;
    background-color: #FDFDFD;
    overflow-x: hidden;
}

.openNav {
    width: 12rem;
}

.openMain {
    margin-left: 12rem !important;
}

.box-title {
    border-bottom: 1px solid var(--grayLight);
    padding: .7rem;
    padding-left: 2rem;
}

.box-title h3 {
    font-weight: bold;
    color: #777;
}

.box-nav-tab {
    border-bottom: 1px solid var(--grayLight);
    padding: .7rem;
    padding-left: 2rem;
    padding-bottom: 0;
}

.box-nav-tab .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #777;
    background-color: inherit;
    border-bottom: 4px solid #777;
    font-weight: bold;
    border-radius: 0;
}

.box-nav-tab a {
    color: #777;
}

.car-pic-bg {
    min-height: 340px;
    max-height: 540px;
    background-size: auto 200px !important;
}

.car-pic-bg-fleet {
    min-height: 200px;
    max-height: 340px;
    background-size: auto 200px !important;
}
.modal-footer-event {
 background-color: var(--black);
}
#log-tables .events {
    color: #777;
}

#log-tables .events.ev-ico {
    font-size: 140%;
}

#log-tables .events.ev-type .title-2 {
    font-size: 11px;
}

#log-tables .events.ev-date {
    font-weight: 700;
}

#log-tables .row-one-events {
    cursor: pointer;
    border-bottom: 1px solid #dee2e6;
    /* margin-bottom: .5rem;
    padding-bottom: .5rem; */

}

#log-tables .select-events-row {
    margin-top: 10px;
    border: 1px solid #eee;
    border-bottom: 0;
    margin-bottom: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-color: var(--surface) !important;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

#log-tables .open-event {
    color: #777;
    background-color: var(--surface);
    border: 1px solid #eee;
    border-top: 0;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

#log-tables .open-event .digit {
    font-weight: 700;
}

#future-events .events {
    color: #777;
}

#future-events .events.ev-ico {
    font-size: 140%;
}

#future-events .events.ev-type .title-2 {
    font-size: 11px;
}

#future-events .events.ev-date {
    font-weight: 700;
}

#future-events .row-one-events {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}

#future-events .select-events-row {
    border: 1px solid #eee;
    border-bottom: 0;
    margin-bottom: 0;
    background-color: var(--surface) !important;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

#future-events .open-event-future {
    color: #777;
    background-color: var(--surface);
    border: 1px solid #eee;
    border-top: 0;
    margin-top: 0px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

#future-events .open-event-future .digit {
    font-weight: 700;
}

.box-nav-tab-card {
    padding-bottom: 0 !important;
}

.box-nav-tab-card .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #777;
    background-color: inherit;
    border-bottom: 4px solid #777;
    font-weight: bold;
    border-radius: 0;
    padding-top: .4rem
}

.box-nav-tab-card a {
    color: #777;
}

.required-chek {
    color: #0fbe0f;
    position: relative;
    top: 13px;
}

.required-chek-red {
    color: #ff0000;
}

.required-bar-box {
    height: 2px;
    width: 200px;
    border: 0px solid #ccc;
    background-color: var(--myRed);
}

.required-bar {
    background: #0fbe0f;
    height: 2px;
    transition: width 1s;
    transition-delay: 1s
}

.eye-btn {
    border: 1px solid #ccc;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.my-top-card {
    max-width: 300px;
}

.my-to-card {
    min-height: 350px !important;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

#drafts-box .card {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

/* Панел със списъка със записи (табове + филтри + списък) — карта със сянка,
   в същия стил като картата на #drafts-box. */
.events-panel {
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.176);
    border-radius: 8px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    /* странично отстояние като при drafts-box (container-fluid p-3 = 1rem) */
    margin: 1rem 1rem 1.5rem;
    overflow: hidden;
}

.events-panel .box-nav-tab {
    border-radius: 8px 8px 0 0;
}

/* mb-5 на вътрешния контейнер не е нужен вътре в картата */
.events-panel > .container-fluid {
    margin-bottom: 0 !important;
}

.my-to-card .card-footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.carendar-card {
    width: 18rem;
    border-radius: 8px;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

.carendar-card .required-list-box {
    min-height: 130px;
}

.carendar-card ul li.required-list {
    font-size: 12px !important;
}

.carendar-card ul li .required-chek {
    position: relative;
    top: -1px;
}

.carendar-card .action-buttons a {
    color: var(--grayLight);
    font-size: 24px
}

.carendar-card .action-events-type a {
    color: var(--carendarBlue);
    font-size: 30px;
}

.carendar-card .action-events-type li a {
    font-size: inherit;
}

.carendar-card .text-my-color {
    color: var(--grayLight) !important;
}

.report-card {
    border-radius: 8px;
    padding: 3px;
    border: 0;
}

.report-card .card-header {
    background-color: var(--surface);
    border-bottom: 0;
}

.report-card .ico-box {
    border-radius: 25px;
    background: var(--carendarBlue);
    color: var(--white);
    background-image: none;
    background-size: auto;
    background-image: none;
    background-size: auto;
    background-size: 36px 36px;
    width: 36px;
    height: 36px;
    display: inline-block;
    text-align: center;
    font-size: 22px;
}

.filter {
    font-size: 30px;
    color: #999;
    border: 1px solid #ccc;
    float: left;
    width: 3.5rem;
    height: 3rem;
    text-align: center;
    cursor: pointer;
}

.filter.activ {
    background: #428BCA;
    color: var(--white);
}

.my-modal-title {
    text-transform: uppercase;
    font-size: 26;
    font-weight: bold;
    color: #428BCA;
}

.noteCalcSuma {
    color: #ff5601;
}

.public-places .op-data {
    margin-top: 5px;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.public-places .op-data i {
    color: #ea4335
}

.info-box-datalists {
    background-color: #e9ecef;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

.info-box-datalists label {
    font-weight: bold;
}

.my-tab-box {
    border-bottom: 1px solid #eee;
}

.my-tab-box .my-tab {
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    color: #777;
}

.my-tab-box .my-tab.activ {
    border-bottom: 4px solid #428BCA;
    color: #428BCA;
    font-weight: 700;
}

.gallery {
    border: 1px solid var(--borderColor);
    border-radius: 5px;
    padding: 10px;
    float: left;
    width: 180px;
    height: 210px;
    margin: 5px;
    text-align: right;
}

.gallery input {
    width: 160px;
    border-radius: 5px;
    border: 1px solid var(--borderColor);
    position: relative;
    bottom: 45px;
}

.favoriteThumb {
    margin: 3px;
    padding: 3px;
    color: var(--borderColor);
    cursor: pointer;
}

.favoriteThumb :hover {
    color: var(--yellow);
}

.favoriteSelect {
    color: var(--yellow);
}

.favoriteSelectCar {
    color: var(--gold);
}

.delThumb {
    margin: 3px;
    background-color: var(--borderColor);
}

.delThumb:hover {
    background-color: var(--alert);
}

.gallery:hover {
    border: 1px solid var(--borderHover);
}

.gallery div.desc {
    padding: 3px;
    text-align: center;
}

.openCamera {
    text-align: center;
    cursor: pointer;
    height: 180px;
}

.gallery .addPhoto {
    padding-top: 70;
    font-size: 70px;
    color: var(--carendarBlue);
    padding-top: 30px;
}

/* Галерия със снимки в събитие: текстовото поле ляга като overlay върху долния край
   на снимката, за да са картите със снимки равни по височина на плочката „Добави снимка"
   (180px). Scoped към #gallery-wrap, за да не засяга галериите на колата/документите. */
#gallery-wrap .gallery {
    position: relative;
    height: 180px;
}

#gallery-wrap .gallery input {
    position: absolute;
    left: 10px;
    bottom: 14px;
    width: 160px;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    font-size: 13px;
    color: var(--text);
}

#gallery-wrap .gallery input::placeholder {
    color: #8a8a8a;
}

.thumbnail {
    background-color: black;
    width: 160px;
    height: 160px;
    display: inline-block;
    /* makes it fit in like an <img> */
    background-size: cover;
    /* or contain */
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid var(--borderColor);
    border-radius: 5px;

}

.bottom-hint {
    font-size: 10px;
    text-transform: uppercase;
}

.bottom-hint .hintVal {
    font-size: 11px;
    font-weight: 700;
}

.input-group .btn-outline-secondary {
    border-color: var(--borderColor);
}

.border-ampule {
    border-radius: 25px;
}

.shadow {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
}

.icon-color {
    color: var(--iconColor);
}

.link-unlinc-ico {
    width: 48px;
    display: inline;
}

.row-data-lists {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}

.my-btn {
    border-radius: 10px;
}

.card-header-things {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header-things input {
    flex-grow: 1;
    margin-right: 8px;
}

.menu-item {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    margin: 15px;
    background-color: #f8f9fa;
    transition: transform 0.2s;
}
.menu-item.part {
    cursor: pointer;
}
.menu-item:hover {
    transform: scale(1.05);
}

.menu-item i,
.menu-item h4 {
    color: #3d3d3d;
}

.menu-item i {
    font-size: 36px;
}

.menu-link {
    text-decoration: none;
    color: inherit;
}

.menu-item.no-transform:hover {
    transform:none
}
.damage-list-image-grid {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: auto;
}

.damage-list-column {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: auto;
}

.damage-list-column img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-style: solid;
    border-color: #3d3d3d;
    border-width:0;
}

.damage-list-selected {
    background-color: #ccc;
}

.transparent-car {
    background-image: url(../images/png-transparent-car.png);
    background-size: cover;
    width: 300px;
    height: 400px;
}

@media(max-width:767px) {

    #main {
        margin-left: 0;
    }

    .my-fix-modal {
        overflow-y: initial !important
    }

    .my-fix-modal .modal-body {
        height: 80vh;
        overflow-y: auto;
    }

    .my-nav-footer {
        display: none;
    }

    .my-to-card {
        min-height: 460px !important;
    }

    .my-to-card .card-body {
        padding: 0 0;
    }

    .my-to-card .card-footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
    }

    .login-box {
        display: none;
    }

    .login-box-button {
        display: block;
        z-index: 1000;
        position: absolute;
        bottom: 1em;
        width: 90%;
        margin-left: 5%;
    }

    .sidenav {
        background-color: var(--carendarBlue) !important;
        height: 44px;
        width: 100%;
        bottom: 0px;
        padding-top: 4px;
        text-align: center;
        padding-bottom: 4px;
    }

    .sidenav .item-left-menu {
        padding: 4px;
        text-decoration: none;
        color: var(--iconNoActivBootom);
        display: inline-block;
        font-size: 1.4rem;
        margin-left: 10px;
        margin-right: 10px;
        border: 0;
    }

    .testimonial-group>.row {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .testimonial-group>.row>.col-11 {
        display: inline-block;
    }

    .car-pic-bg {
        min-height: 270px;
        background-size: auto 240px !important;
    }

    .car-pic-bg-fleet {
        min-height: 270px;
        background-size: auto 270px !important;
    }

    .ev-km,
    .ev-date {
        font-size: 11px;
    }

    .ev-ico-col {
        padding: 0;
        margin: 0;
        padding-left: 3px;
    }

    .ev-ico-box {
        border-radius: 50%;
        width: 50px;
        height: 50px;
    }

    #log-tables .events.ev-ico {
        color: var(--white);
        font-size: 24px;
        position: relative;
        width: 50px;
        top: 12px;
    }

    .carendar-card {
        width: 100%;
    }

    .link-unlinc-ico {
        width: 24px;
        display: inline;
    }
}

/* ================= Авто-чернова модал (Автоматично разпознаване) ================= */
.ar-dialog {
    max-width: 520px;
}

.ar-modal {
    border-radius: 12px;
    overflow: hidden;
    border: .5px solid rgba(0, 0, 0, .15);
}

/* Header */
.ar-header {
    background: var(--carendarBlue);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ar-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}

.ar-title i {
    font-size: 19px;
}

.ar-close {
    background: none;
    border: none;
    color: #cfe4f2;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
}

.ar-close:hover {
    color: var(--white);
}

/* Body */
.ar-body {
    padding: 18px;
}

.ar-info {
    display: flex;
    gap: 10px;
    background: #E6F1FB;
    color: #0C447C;
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 16px;
}

.ar-info i {
    font-size: 15px;
    margin-top: 2px;
}

.ar-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Брояч */
.ar-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.ar-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.ar-counter {
    font-size: 12px;
    color: var(--grayLight);
    background: #f1efe8;
    padding: 3px 9px;
    border-radius: 8px;
}

/* Грид */
.ar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: background .15s;
}

.ar-grid.ar-dragover {
    background: #E6F1FB;
    outline: 2px dashed var(--carendarBlue);
    outline-offset: 4px;
}

.ar-cell {
    position: relative;
    aspect-ratio: 1;
    background: #f1efe8;
    border-radius: 8px;
    border: .5px solid rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px;
    text-align: center;
}

.ar-cell-ico {
    font-size: 25px;
}

.ar-chip {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Цветове на чиповете по тип документ */
.chip-green  { color: #0F6E56; background: #E1F5EE; }
.chip-amber  { color: #8A5A00; background: #FCEFD3; }
.chip-blue   { color: #0C447C; background: #E6F1FB; }
.chip-teal   { color: #0E6E7A; background: #DBF3F5; }
.chip-purple { color: #5B3B8C; background: #EFE7F8; }
.chip-red    { color: #9B2C3A; background: #FBE3E6; }
.chip-gray   { color: #5f5e5a; background: #e9e7df; }

/* Цвят на иконата по тип (огледало на чипа) */
.ico-green  { color: #0F6E56; }
.ico-amber  { color: #8A5A00; }
.ico-blue   { color: #0C447C; }
.ico-teal   { color: #0E6E7A; }
.ico-purple { color: #5B3B8C; }
.ico-red    { color: #9B2C3A; }
.ico-gray   { color: #5f5e5a; }

/* Статус индикатор горе вдясно */
.ar-status {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    border: .5px solid rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.ar-status.ok i {
    color: #1D9E75;
}

.ar-status.err i {
    color: #C0392B;
}

/* Бутон за махане на клетка (показва се при hover) */
.ar-cell-del {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    border: .5px solid rgba(0, 0, 0, .12);
    color: var(--grayLight);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.ar-cell:hover .ar-cell-del {
    display: flex;
}

.ar-cell-del:hover {
    color: var(--alert);
    border-color: var(--alert);
}

/* Клетка в процес на разпознаване */
.ar-muted {
    color: var(--grayLight);
}

.ar-pending-text {
    font-size: 10px;
}

/* Бутон „Добави" */
.ar-add {
    aspect-ratio: 1;
    background: transparent;
    cursor: pointer;
    border: 1.5px dashed var(--carendarBlue);
    border-radius: 8px;
    color: var(--carendarBlue);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s;
}

.ar-add:hover {
    background: #E6F1FB;
}

.ar-add i {
    font-size: 25px;
}

.ar-add span {
    font-size: 11px;
    font-weight: 500;
}

/* Footer */
.ar-footer,
.evm-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 13px 18px;
    border-top: .5px solid rgba(0, 0, 0, .12);
    background: #f7f6f2;
}

/* Футар на events модала — отделно сиво, по-тъмно от тялото (#eceff1) за разграничение */
.evm-footer {
    background: #dde1e5;
}

/* По-контрастен hover за dropdown-ите с типове събития („Добави" и филтър „Събития"),
   вместо много бледото сиво по подразбиране. Светлосиньо от дизайн езика. */
.dropdown-menu[aria-labelledby="events-type-dropdown-add"] .dropdown-item:hover,
.dropdown-menu[aria-labelledby="events-type-dropdown-add"] .dropdown-item:focus,
.dropdown-menu[aria-labelledby="events-type-dropdown"] .dropdown-item:hover,
.dropdown-menu[aria-labelledby="events-type-dropdown"] .dropdown-item:focus {
    background-color: #E6F1FB;
}

.ar-btn-text,
.evm-btn-text {
    border: none;
    background: none;
    color: var(--text);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.ar-btn-text:hover,
.evm-btn-text:hover {
    background: #eeeee8;
}

.ar-btn-outline {
    border: .5px solid var(--carendarBlue);
    background: transparent;
    color: var(--carendarBlue);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ar-btn-outline:hover {
    background: #E6F1FB;
}

.ar-btn-primary,
.evm-btn-primary {
    border: none;
    background: var(--carendarBlue);
    color: var(--white);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ar-btn-primary:hover,
.evm-btn-primary:hover {
    filter: brightness(1.08);
}

.ar-btn-outline i,
.ar-btn-primary i,
.evm-btn-primary i {
    font-size: 13px;
    margin-right: 2px;
}

/* ================= Модал за събитие (редизайн, scoped evm-*) ================= */
/* Header — плътен син, бял текст (език от авто-чернова модала) */
.evm-header {
    background: var(--carendarBlue);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.evm-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}

.evm-title i {
    font-size: 19px;
}

.evm-close {
    background: none;
    border: none;
    color: #cfe4f2;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

.evm-close:hover {
    color: var(--white);
}

.evm-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    border-radius: 4px;
}

/* Смяна на тип (само при чернова) — светъл бутон върху синия header */
.evm-type-switch {
    color: var(--white);
    border: .5px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.evm-type-switch:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--white);
}

/* Табове-„хапчета" (отрицателният margin ги вдига към header-а въпреки padding-а на modal-body) */
.evm-tabs {
    display: flex;
    gap: 8px;
    padding: 0 12px 10px;
    margin-top: -6px;
    flex-wrap: wrap;
}

.evm-tabs .my-tab {
    background: #e3e7ea;
    color: #5f5e5a;
    border-radius: 999px;
    text-transform: none;
    font-weight: 500;
    font-size: 14px;
    padding: 7px 18px;
    border-bottom: 0;
    cursor: pointer;
}

.evm-tabs .my-tab.activ {
    background: var(--carendarBlue);
    color: var(--white);
    border-bottom: 0;
    font-weight: 500;
}

/* Целият прозорец за събитие е на неутрален светлосив material фон (header-ът е цветен,
   футърът е отделно сиво). Scoped към #events-modal, за да не засяга другите модали. */
#events-modal .modal-content {
    background: #eceff1;
}

/* Тяло на таб „Данни" — неутрален светлосив material фон + по-меки Bootstrap рамки */
.evm-body {
    background: #eceff1;
    border-radius: 8px;
    --bs-border-radius: 6px;
    --bs-border-color: rgba(0, 0, 0, .18);
}

.evm-body .input-group-text {
    background: #eef1f3;
    color: #5f5e5a;
}

/* Икони-бутони за действие (километраж/одометър и „+") да заемат еднаква ширина,
   за да се подравняват десните контроли на полетата. */
.evm-body .input-group-text:has(.get-odometer),
.evm-body .input-group-text:has(.fa-circle-plus) {
    width: 46px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
    cursor: pointer;
}

/* Карти-секции — material: бели карти, отделени само със сянка (elevation), без рамка */
.evm-card {
    background: var(--surface);
    border: 0;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
}

.evm-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--carendarBlue);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
}

/* Компактни ширини на полетата (отзив: цифровите са 4–6 цифри).
   evm-w-num и evm-w-date са умишлено с еднаква стойност — отделни класове,
   за да могат да се настройват независимо. */
.evm-w-num {
    max-width: 170px;
}

.evm-w-km {
    max-width: 200px;
}

.evm-w-date {
    max-width: 170px;
}

.evm-w-sel {
    max-width: 260px;
}

@media (max-width: 767.98px) {
    .evm-w-num,
    .evm-w-km,
    .evm-w-date,
    .evm-w-sel {
        max-width: 100%;
    }
}

/* Икон-тогъли (резервоар/гуми/шофиране/допълнителни) — заоблени, активен = светлосин */
.evm-body .filter {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 38px;
    font-size: 16px;
    color: var(--grayLight);
    border: .5px solid rgba(0, 0, 0, .25);
    border-radius: 8px;
    background: var(--surface);
}

.evm-body .filter.activ {
    background: #E6F1FB;
    border-color: var(--carendarBlue);
    color: var(--carendarBlue);
}

/* ===================================================================
   ТЪМНА ТЕМА — Material 3 (m3.material.io)
   Активира се с data-bs-theme="dark" на <html> (от users_theme в профила).
   Палитра: surface #141218, container #211F26 / #2B2930 / #36343B,
   on-surface #E6E0E9, on-surface-variant #CAC4D0, outline #938F99 / #49454F.
   Акцент: tone-80 на бранд синьото (#8FCBEF) за текст/икони върху тъмно.
   =================================================================== */
[data-bs-theme="dark"] {
    /* Проектни променливи */
    --surface: #211F26;             /* M3 surface-container — карти/панели */
    --borderColor: #49454F;         /* M3 outline-variant */
    --grayLight: #938F99;           /* M3 outline */
    --borderHover: #CAC4D0;
    --iconColor: #CAC4D0;           /* M3 on-surface-variant */
    --iconNoActivBootom: #49454F;
    --text: #CAC4D0;
    /* Bootstrap 5.3 основни */
    --bs-body-bg: #141218;          /* M3 surface */
    --bs-body-color: #E6E0E9;       /* M3 on-surface */
    --bs-border-color: #49454F;
    --bs-secondary-bg: #2B2930;
    --bs-tertiary-bg: #1D1B20;
    --bs-secondary-color: #CAC4D0;
}

/* Бранд синьото като ТЕКСТ върху тъмна повърхност е слабо контрастно (#069 на #211F26
   ≈ 2.3:1) → изсветлен акцент tone-80. Като ФОН (.my-top-navbar, бутони, активни табове)
   остава непроменено — белият текст върху него работи и в тъмно. */
[data-bs-theme="dark"] .lightbulb,
[data-bs-theme="dark"] .carendar-card .action-buttons a,
[data-bs-theme="dark"] .carendar-card .action-events-type a,
[data-bs-theme="dark"] .gallery .addPhoto,
[data-bs-theme="dark"] .ar-add,
[data-bs-theme="dark"] .ar-btn-outline,
[data-bs-theme="dark"] .evm-card-title {
    color: #8FCBEF;
}

[data-bs-theme="dark"] .ar-btn-outline {
    border-color: #8FCBEF;
}

[data-bs-theme="dark"] .ar-add {
    border-color: #8FCBEF;
}

/* --- Модал за събитие (evm) --- */
[data-bs-theme="dark"] #events-modal .modal-content {
    background: #141218;            /* M3 surface */
}

[data-bs-theme="dark"] .evm-body {
    background: #141218;
    --bs-border-color: rgba(255, 255, 255, .25);
}

[data-bs-theme="dark"] .evm-body .input-group-text {
    background: #2B2930;
    color: #CAC4D0;
}

[data-bs-theme="dark"] .ar-footer,
[data-bs-theme="dark"] .evm-footer {
    background: #211F26;
    border-top-color: rgba(255, 255, 255, .12);
}

[data-bs-theme="dark"] .evm-footer {
    background: #2B2930;
}

[data-bs-theme="dark"] .ar-btn-text,
[data-bs-theme="dark"] .evm-btn-text {
    color: #CAC4D0;
}

[data-bs-theme="dark"] .ar-btn-text:hover,
[data-bs-theme="dark"] .evm-btn-text:hover {
    background: #36343B;
}

[data-bs-theme="dark"] .evm-tabs .my-tab {
    background: #2B2930;
    color: #CAC4D0;
}

[data-bs-theme="dark"] .evm-body .filter {
    border-color: rgba(255, 255, 255, .25);
    color: #938F99;
}

[data-bs-theme="dark"] .evm-body .filter.activ {
    background: #16384D;            /* тъмен primary-container */
    border-color: #8FCBEF;
    color: #8FCBEF;
}

/* --- Авто-чернова модал (ar) --- */
[data-bs-theme="dark"] .ar-info {
    background: #16384D;
    color: #CDE5F5;
}

[data-bs-theme="dark"] .ar-grid {
    background: #1D1B20;
}

[data-bs-theme="dark"] .ar-cell,
[data-bs-theme="dark"] .ar-cell-del {
    border-color: rgba(255, 255, 255, .15);
}

[data-bs-theme="dark"] .ar-add:hover {
    background: #16384D;
}

/* --- Чипове по тип документ: M3 dark container (тъмен фон, светъл текст) --- */
[data-bs-theme="dark"] .chip-green  { color: #9FE5C9; background: #143D31; }
[data-bs-theme="dark"] .chip-amber  { color: #F5D88F; background: #4A3A12; }
[data-bs-theme="dark"] .chip-blue   { color: #A7CDEC; background: #143A52; }
[data-bs-theme="dark"] .chip-teal   { color: #9FE0E8; background: #11444A; }
[data-bs-theme="dark"] .chip-purple { color: #D5BFF5; background: #392A52; }
[data-bs-theme="dark"] .chip-red    { color: #F2B8C0; background: #4A2228; }
[data-bs-theme="dark"] .chip-gray   { color: #CAC4D0; background: #36343B; }

/* --- Начална страница: панел със записи, табове, списък --- */
/* Основната зона на страницата (#main е с hardcoded светъл фон #FDFDFD) */
[data-bs-theme="dark"] #main {
    background-color: #141218;
}

[data-bs-theme="dark"] .box-title h3 {
    color: #CAC4D0;
}

[data-bs-theme="dark"] .events-panel {
    border-color: rgba(255, 255, 255, .12);
}

[data-bs-theme="dark"] .box-nav-tab {
    border-bottom-color: #49454F;
}

[data-bs-theme="dark"] .box-nav-tab a,
[data-bs-theme="dark"] .my-tab-box .my-tab {
    color: #CAC4D0;
}

[data-bs-theme="dark"] .box-nav-tab .nav-pills .nav-link.active,
[data-bs-theme="dark"] .nav-pills .show>.nav-link {
    color: #E6E0E9;
    border-bottom-color: #8FCBEF;
}

[data-bs-theme="dark"] .my-tab-box {
    border-bottom-color: #49454F;
}

[data-bs-theme="dark"] .my-tab-box .my-tab.activ {
    color: #8FCBEF;
    border-bottom-color: #8FCBEF;
}

[data-bs-theme="dark"] #log-tables .select-events-row,
[data-bs-theme="dark"] #log-tables .open-event,
[data-bs-theme="dark"] #future-events .open-event-future {
    border-color: #36343B;
}

[data-bs-theme="dark"] #log-tables .open-event,
[data-bs-theme="dark"] #future-events .open-event-future {
    color: #CAC4D0;
}

/* Hover на dropdown-ите с типове събития — тъмен primary-container */
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="events-type-dropdown-add"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="events-type-dropdown-add"] .dropdown-item:focus,
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="events-type-dropdown"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-menu[aria-labelledby="events-type-dropdown"] .dropdown-item:focus {
    background-color: #16384D;
}

/* --- Галерия със снимки: overlay полето за бележка --- */
[data-bs-theme="dark"] #gallery-wrap .gallery input {
    background: rgba(28, 27, 31, .88);
    color: #E6E0E9;
}

[data-bs-theme="dark"] #gallery-wrap .gallery input::placeholder {
    color: #938F99;
}

/* Активният таб в evm-tabs трябва да се пре-заяви СЛЕД тъмното правило за .my-tab
   (равна специфичност → редът в файла решава), иначе не личи кой таб е активен. */
[data-bs-theme="dark"] .evm-tabs .my-tab.activ {
    background: var(--carendarBlue);
    color: var(--white);
}

/* Bootstrap utility badges (bg-light/text-dark са с !important) — напр. във view-fleet */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: #36343B !important;
}

[data-bs-theme="dark"] .badge.text-dark {
    color: #E6E0E9 !important;
}

/* Карти-менюта (Лични документи, Външни услуги) — hardcoded #f8f9fa/#3d3d3d */
[data-bs-theme="dark"] .menu-item {
    background-color: var(--surface);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .menu-item i,
[data-bs-theme="dark"] .menu-item h4 {
    color: #CAC4D0;
}

/* thirdparty modal-damage-part: разделителна линия (#dee2e6 в инлайн <style> на шаблона) */
[data-bs-theme="dark"] .borderBottom {
    border-bottom-color: #49454F;
}

/* Схемата на автомобила (line-art PNG с тъмни линии) — светла подложка, за да се вижда */
[data-bs-theme="dark"] .damage-list-column img {
    background: #E6E0E9;
    border-radius: 6px;
}

/* ===================================================================
   appDialog — единен диалог компонент (alert/confirm), assets/js/dialog.js
   Собствен overlay над всичко (вкл. отворени Bootstrap модали, z-index 1055).
   Цветовете идват от променливите → тъмната тема работи автоматично.
   =================================================================== */
.appdlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: appdlgFade .13s ease-out;
}

.appdlg-overlay.appdlg-hide {
    opacity: 0;
    transition: opacity .12s ease-in;
}

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

.appdlg {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    width: 100%;
    max-width: 420px;
    padding: 20px 20px 14px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px 14px;
    animation: appdlgPop .15s ease-out;
}

@keyframes appdlgPop {
    from { transform: translateY(14px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* Икона-кръгче по вариант */
.appdlg-ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    grid-row: span 2;
    align-self: start;
}

.appdlg-info    .appdlg-ico { background: #E6F1FB; color: #0C447C; }
.appdlg-warning .appdlg-ico { background: #FCEFD3; color: #8A5A00; }
.appdlg-danger  .appdlg-ico { background: #FBE3E6; color: #9B2C3A; }
.appdlg-success .appdlg-ico { background: #E1F5EE; color: #0F6E56; }

[data-bs-theme="dark"] .appdlg-info    .appdlg-ico { background: #143A52; color: #A7CDEC; }
[data-bs-theme="dark"] .appdlg-warning .appdlg-ico { background: #4A3A12; color: #F5D88F; }
[data-bs-theme="dark"] .appdlg-danger  .appdlg-ico { background: #4A2228; color: #F2B8C0; }
[data-bs-theme="dark"] .appdlg-success .appdlg-ico { background: #143D31; color: #9FE5C9; }

.appdlg-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--bs-body-color, #333);
}

.appdlg-msg {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-line; /* \n в съобщението = нов ред (стар alert навик) */
    word-break: break-word;
}

.appdlg-footer {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 14px;
}

/* Опасно действие — червен примарен бутон (иначе ползва evm-btn-primary) */
.appdlg-btn-danger {
    border: none;
    background: #C0392B;
    color: var(--white);
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.appdlg-btn-danger:hover {
    background: #A93226;
}

@media (max-width: 575.98px) {
    .appdlg { max-width: 100%; }
}

/* Аватар на потребителя в горното меню (fallback е буквата в #header-user-initial).
   Кръгът се рисува от .my-top-navbar .user-name (32×32, 1px рамка) — снимката
   запълва точно вътрешността му (30×30) като block, за да съвпадне с кръгчето. */
.header-user-avatar {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* Аватар зона в настройките (200×200 кръг; × бутонът е върху нея) */
.avatar-zone {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px dashed var(--borderColor);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.avatar-zone img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-zone .fa-user {
    font-size: 96px;
    color: var(--borderColor);
}
.avatar-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--surface, #fff);
    color: #dc3545;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
}