* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f5f8;
    color: #1f2937;
}

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 18px;
    padding: 36px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 38px;
}

.brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #172033;
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    font-weight: bold;
}

.brand h1 {
    font-size: 24px;
    color: #172033;
}

.brand p {
    margin-top: 3px;
    font-size: 14px;
    color: #6b7280;
}

.welcome {
    margin-bottom: 28px;
}

.welcome h2 {
    font-size: 26px;
    margin-bottom: 7px;
}

.welcome p {
    color: #6b7280;
    font-size: 15px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    height: 48px;

    border: 1px solid #d1d5db;
    border-radius: 10px;

    padding: 0 14px;
    font-size: 15px;

    outline: none;
}

.form-group input:focus {
    border-color: #172033;
}

.login-form button {
    height: 50px;

    border: none;
    border-radius: 10px;

    background: #172033;
    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
    margin-top: 5px;
}

.login-form button:hover {
    opacity: 0.92;
}

.login-footer {
    margin-top: 30px;
    text-align: center;

    color: #9ca3af;
    font-size: 12px;
}

@media (max-width: 500px) {

    .login-page {
        padding: 16px;
    }

    .login-card {
        padding: 28px 22px;
        border-radius: 14px;
    }

}
/* =========================
   ADMIN DASHBOARD
========================= */

.admin-layout {
    min-height: 100vh;
    display: flex;
    background: #f4f6f8;
}

.sidebar {
    width: 260px;
    background: #111827;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.sidebar-brand h2 {
    margin: 0;
    font-size: 20px;
}

.sidebar-brand p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-menu a,
.sidebar-footer a {
    color: #d1d5db;
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 8px;
    transition: 0.2s;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.sidebar-footer a:hover {
    background: #1f2937;
    color: white;
}

.sidebar-footer {
    margin-top: auto;
}

.admin-main {
    flex: 1;
    padding: 30px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.admin-header h1 {
    margin: 0;
    font-size: 28px;
}

.admin-header p {
    margin: 6px 0 0;
    color: #6b7280;
}

.admin-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.admin-user span {
    font-size: 12px;
    color: #6b7280;
}

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

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.stat-card span {
    display: block;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 10px;
}

.stat-card strong {
    font-size: 28px;
    color: #111827;
}

.dashboard-panel {
    background: white;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.panel-header {
    margin-bottom: 16px;
}

.panel-header h2 {
    margin: 0;
    font-size: 20px;
}

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 13px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

th {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
}

td {
    font-size: 14px;
    color: #111827;
}

.empty-table {
    text-align: center;
    padding: 30px;
    color: #9ca3af;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
    .sidebar {
        width: 210px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .admin-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        padding: 16px;
    }

    .sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-footer {
        margin-top: 16px;
    }

    .admin-main {
        padding: 18px;
    }

    .admin-header {
        align-items: flex-start;
        gap: 20px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   MOBILE SIDEBAR / HAMBURGER
========================= */

.mobile-menu-button {
    display: none;

    border: none;
    background: #1f2937;
    color: white;

    width: 44px;
    height: 40px;

    border-radius: 8px;

    font-size: 22px;
    cursor: pointer;
}


@media (max-width: 700px) {

    .admin-layout {
        display: block;
    }

    .sidebar {
        width: 100%;
        padding: 12px 16px;
    }

    .sidebar-brand {
        margin-bottom: 0;
        justify-content: space-between;
    }

    .sidebar-brand .brand-icon {
        width: 44px;
        height: 44px;
    }

    .sidebar-brand h2 {
        font-size: 18px;
    }

    .sidebar-brand p {
        font-size: 11px;
    }

    .mobile-menu-button {
        display: block;
        margin-left: auto;
    }

    .sidebar-menu {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;

        margin-top: 14px;
        gap: 4px;
    }

    .sidebar-footer {
        display: none;
        margin-top: 8px;
    }

    .sidebar.mobile-open .sidebar-menu {
        display: flex;
    }

    .sidebar.mobile-open .sidebar-footer {
        display: block;
    }

    .sidebar-menu a,
    .sidebar-footer a {
        padding: 10px 12px;
    }

    .admin-main {
        padding: 14px;
    }

    .admin-header {
        margin-bottom: 16px;
    }

    .admin-header h1 {
        font-size: 24px;
    }

    .admin-header p {
        font-size: 14px;
    }
}
/* MOBILE - MENU E MBYLLUR NORMALISHT */
@media (max-width: 700px) {

    .sidebar .sidebar-menu {
        display: none !important;
    }

    .sidebar .sidebar-footer {
        display: none !important;
    }

    .sidebar.mobile-open .sidebar-menu {
        display: flex !important;
        flex-direction: column;
    }

    .sidebar.mobile-open .sidebar-footer {
        display: block !important;
    }
}
/* =========================================================
   ADMIN DASHBOARD - AUTO SERVIS RAKIP
   ========================================================= */

.dashboard-page {
    margin: 0;
    min-height: 100vh;
    background: #eef3f8;
    font-family: Arial, Helvetica, sans-serif;
    color: #132238;
}


.dashboard-layout {
    min-height: 100vh;
    display: flex;
}


/* =========================
   SIDEBAR
   ========================= */

.dashboard-sidebar {
    width: 260px;
    min-width: 260px;
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #142942 0%,
            #0b1b2d 55%,
            #081523 100%
        );

    color: white;

    display: flex;
    flex-direction: column;

    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    z-index: 1000;

    box-shadow: 8px 0 30px rgba(9, 30, 55, 0.15);
}


.dashboard-brand {
    min-height: 110px;

    display: flex;
    align-items: center;

    padding: 20px 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    gap: 12px;
}


.dashboard-brand-car {
    font-size: 42px;
    line-height: 1;
}


.dashboard-brand-text {
    display: flex;
    flex-direction: column;
}


.dashboard-brand-text span {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.5px;
}


.dashboard-brand-text strong {
    font-size: 23px;
    font-weight: 900;
    color: #ff1f35;
    letter-spacing: 1px;
}


.dashboard-menu-button {
    display: none;

    margin-left: auto;

    border: none;
    background: transparent;

    color: white;
    font-size: 27px;

    cursor: pointer;
}


/* MENU */

.dashboard-sidebar-menu {
    padding: 24px 16px;

    display: flex;
    flex-direction: column;
    gap: 9px;
}


.dashboard-sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 15px;

    min-height: 54px;

    padding: 0 17px;

    color: #bbc8d7;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    border-radius: 10px;

    transition: 0.2s ease;
}


.dashboard-sidebar-menu a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}


.dashboard-sidebar-menu a.active {
    color: white;

    background:
        linear-gradient(
            135deg,
            #1f64c8,
            #244b8b
        );

    box-shadow: 0 7px 18px rgba(9, 73, 163, 0.28);
}


.menu-icon {
    width: 28px;
    text-align: center;

    font-size: 24px;
}


/* SIDEBAR BOTTOM */

.dashboard-sidebar-bottom {
    margin-top: auto;
    padding: 22px 25px 25px;
}


.dashboard-date-box {
    display: flex;
    align-items: center;
    gap: 13px;

    color: #cad5e1;
}


.dashboard-date-box small {
    display: block;
    margin-bottom: 4px;

    color: #8193a8;
    font-size: 13px;
}


.dashboard-date-box strong {
    font-size: 14px;
}


.date-icon {
    font-size: 27px;
}


.sidebar-divider {
    height: 1px;

    background: rgba(255, 255, 255, 0.10);

    margin: 22px 0;
}


.dashboard-version {
    font-size: 12px;
    color: #687c92;

    margin-bottom: 15px;
}


.dashboard-logout {
    display: inline-block;

    color: #ff6f7c;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


/* =========================
   MAIN
   ========================= */


/* TOPBAR */

.dashboard-topbar {
    height: 105px;

    background:
        linear-gradient(
            90deg,
            #193453 0%,
            #102a49 100%
        );

    display: flex;
    align-items: center;

    padding: 0 42px;

    color: white;

    box-shadow: 0 4px 18px rgba(20, 50, 82, 0.18);
}


.dashboard-welcome {
    display: flex;
    align-items: center;
    gap: 14px;
}


.welcome-shield {
    width: 46px;
    height: 46px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #1488ff,
            #0055c9
        );

    font-size: 20px;
}


.dashboard-welcome span {
    display: block;

    font-size: 16px;
    color: #dce7f4;
}


.dashboard-welcome strong {
    display: block;

    margin-top: 2px;

    font-size: 25px;
}


.dashboard-user-info {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 12px;
}


.dashboard-user-avatar {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.15);

    font-size: 21px;
    font-weight: 800;
}


.dashboard-user-info strong {
    display: block;

    font-size: 15px;
}


.dashboard-user-info span {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    color: #aebed0;
}


.dashboard-mobile-open {
    display: none;

    border: 0;
    background: transparent;

    color: white;
    font-size: 28px;

    margin-right: 18px;

    cursor: pointer;
}


/* =========================
   CONTENT
   ========================= */

.dashboard-content {
    min-height: calc(100vh - 105px);

    padding: 35px 45px 50px;

    background:
        linear-gradient(
            rgba(244, 248, 252, 0.94),
            rgba(244, 248, 252, 0.94)
        );
}


.dashboard-content-heading {
    margin-bottom: 28px;
}


.dashboard-content-heading h1 {
    margin: 0 0 7px;

    font-size: 27px;
    color: #132238;
}


.dashboard-content-heading p {
    margin: 0;

    color: #66768b;
    font-size: 15px;
}


/* =========================
   ACTION CARDS
   ========================= */

.dashboard-action-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    max-width: 1250px;
}


.dashboard-action-card {
    position: relative;

    min-height: 265px;

    border-radius: 18px;

    padding: 30px;

    overflow: hidden;

    text-decoration: none;

    color: white;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 13px 30px rgba(23, 42, 68, 0.16);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.dashboard-action-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 38px rgba(23, 42, 68, 0.24);
}


.dashboard-action-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    top: -85px;
    right: -70px;

    background: rgba(255, 255, 255, 0.10);
}


.dashboard-action-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    bottom: -70px;
    left: -45px;

    background: rgba(0, 0, 0, 0.07);
}


/* STRONG COLORS */

.card-blue {
    background:
        linear-gradient(
            135deg,
            #2871e7,
            #103c86
        );
}


.card-green {
    background:
        linear-gradient(
            135deg,
            #08aa91,
            #00685e
        );
}


.card-purple {
    background:
        linear-gradient(
            135deg,
            #7d3ee9,
            #472080
        );
}


.card-orange {
    background:
        linear-gradient(
            135deg,
            #ff9715,
            #a65000
        );
}


.card-red {
    background:
        linear-gradient(
            135deg,
            #dc3159,
            #8b1434
        );
}


.card-cyan {
    background:
        linear-gradient(
            135deg,
            #12b5d0,
            #00667f
        );
}


/* CARD ICON */

.action-icon {
    width: 86px;
    height: 86px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.16);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 44px;

    margin-bottom: 25px;

    position: relative;
    z-index: 2;

    backdrop-filter: blur(4px);
}


.action-text {
    position: relative;
    z-index: 2;

    padding-right: 38px;
}


.action-text h2 {
    margin: 0 0 10px;

    color: white;

    font-size: 25px;
    line-height: 1.15;
}


.action-text p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    line-height: 1.55;

    font-size: 14px;
}


.action-arrow {
    position: absolute;

    right: 24px;
    bottom: 22px;

    width: 47px;
    height: 47px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(255, 255, 255, 0.14);

    color: white;

    font-size: 27px;

    z-index: 3;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .dashboard-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   PHONE
   2 COLUMNS × 3 ROWS
   ========================================================= */

@media (max-width: 760px) {

    .dashboard-sidebar {
        transform: translateX(-100%);

        transition: transform 0.25s ease;
    }


    .dashboard-sidebar.mobile-open {
        transform: translateX(0);
    }


    .dashboard-menu-button {
        display: block;
    }


    .dashboard-topbar {
        height: 78px;

        padding: 0 15px;
    }


    .dashboard-mobile-open {
        display: block;
    }


    .welcome-shield {
        width: 37px;
        height: 37px;

        border-radius: 9px;

        font-size: 15px;
    }


    .dashboard-welcome span {
        font-size: 11px;
    }


    .dashboard-welcome strong {
        font-size: 17px;
    }


    .dashboard-user-info {
        display: none;
    }


    .dashboard-content {
        min-height: calc(100vh - 78px);

        padding: 20px 12px 30px;
    }


    .dashboard-content-heading {
        margin-bottom: 16px;
    }


    .dashboard-content-heading h1 {
        font-size: 21px;
    }


    .dashboard-content-heading p {
        font-size: 12px;
    }


    .dashboard-action-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 11px;
    }


    .dashboard-action-card {
        min-height: 195px;

        border-radius: 14px;

        padding: 17px;
    }


    .action-icon {
        width: 60px;
        height: 60px;

        font-size: 30px;

        margin-bottom: 17px;
    }


    .action-text {
        padding-right: 0;
    }


    .action-text h2 {
        font-size: 16px;

        margin-bottom: 8px;
    }


    .action-text p {
        font-size: 11px;

        line-height: 1.4;

        padding-right: 5px;
    }


    .action-arrow {
        width: 32px;
        height: 32px;

        right: 12px;
        bottom: 12px;

        font-size: 20px;
    }

}


/* SMALL PHONE */

@media (max-width: 390px) {

    .dashboard-action-card {
        min-height: 185px;

        padding: 14px;
    }


    .action-icon {
        width: 52px;
        height: 52px;

        font-size: 26px;
    }


    .action-text h2 {
        font-size: 14px;
    }


    .action-text p {
        font-size: 10px;
    }

}

/* =========================================================
   VETURAT
   ========================================================= */

.vehicles-content {
    padding: 35px 45px 60px;
}


.vehicles-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 28px;
}


.vehicles-heading h1 {
    margin: 0 0 7px;

    font-size: 30px;

    color: #132238;
}


.vehicles-heading p {
    margin: 0;

    color: #6a788a;
}


.vehicles-new-button {
    background:
        linear-gradient(
            135deg,
            #2871e7,
            #103c86
        );

    color: white;

    text-decoration: none;

    padding: 14px 20px;

    border-radius: 10px;

    font-weight: 800;

    box-shadow:
        0 7px 18px
        rgba(24, 78, 157, 0.25);
}



/* SEARCH */

.vehicle-search-card {
    max-width: 1050px;

    height: 78px;

    display: flex;
    align-items: center;

    padding: 0 20px;

    background: white;

    border-radius: 16px;

    box-shadow:
        0 10px 28px
        rgba(34, 53, 76, 0.10);

    border:
        1px solid
        #e0e7ef;
}


.vehicle-search-icon {
    font-size: 27px;

    margin-right: 15px;
}


.vehicle-search-input {
    flex: 1;

    min-width: 0;

    border: 0;
    outline: 0;

    font-size: 22px;

    color: #16283f;

    background: transparent;
}


.vehicle-search-input::placeholder {
    color: #9aa7b5;
}


.vehicle-search-clear {
    width: 42px;
    height: 42px;

    border: 0;

    border-radius: 50%;

    background: #edf2f7;

    color: #526276;

    font-size: 25px;

    cursor: pointer;
}


.vehicle-search-message {
    max-width: 1050px;

    margin-top: 15px;

    color: #718096;

    font-size: 14px;
}



/* RESULTS */

.vehicle-results {
    max-width: 1050px;

    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-top: 18px;
}


.vehicle-result-card {
    position: relative;

    display: block;

    padding: 20px 65px 20px 22px;

    background: white;

    border:
        1px solid
        #e1e7ee;

    border-radius: 14px;

    text-decoration: none;

    color: #17283d;

    box-shadow:
        0 6px 20px
        rgba(32, 50, 73, 0.07);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


.vehicle-result-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(32, 50, 73, 0.13);
}


.vehicle-result-main {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 17px;
}


.vehicle-result-plate {
    background: #122b49;

    color: white;

    padding: 9px 14px;

    border-radius: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.vehicle-result-name {
    font-size: 20px;

    font-weight: 800;
}


.vehicle-result-year {
    color: #657488;

    font-weight: 700;
}


.vehicle-result-details {
    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap: 20px;
}


.vehicle-result-details span {
    display: block;

    margin-bottom: 5px;

    color: #8b98a8;

    font-size: 11px;

    text-transform: uppercase;

    font-weight: 700;
}


.vehicle-result-details strong {
    display: block;

    font-size: 14px;

    word-break: break-word;
}


.vehicle-result-arrow {
    position: absolute;

    right: 20px;
    top: 50%;

    transform:
        translateY(-50%);

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf3f9;

    color: #1d5eaa;

    font-size: 24px;
}



/* PHONE */

@media (max-width: 760px) {

    .vehicles-content {
        padding:
            20px 12px 35px;
    }


    .vehicles-heading {
        align-items:
            flex-start;
    }


    .vehicles-heading h1 {
        font-size: 23px;
    }


    .vehicles-heading p {
        font-size: 12px;
    }


    .vehicles-new-button {
        padding:
            10px 12px;

        font-size: 11px;

        white-space: nowrap;
    }


    .vehicle-search-card {
        height: 65px;

        padding: 0 14px;

        border-radius: 13px;
    }


    .vehicle-search-icon {
        font-size: 21px;

        margin-right: 10px;
    }


    .vehicle-search-input {
        font-size: 16px;
    }


    .vehicle-search-clear {
        width: 34px;
        height: 34px;

        font-size: 20px;
    }


    .vehicle-result-card {
        padding:
            16px 45px 16px 15px;
    }


    .vehicle-result-main {
        gap: 10px;

        flex-wrap: wrap;

        margin-bottom: 13px;
    }


    .vehicle-result-plate {
        font-size: 13px;

        padding:
            7px 10px;
    }


    .vehicle-result-name {
        font-size: 16px;
    }


    .vehicle-result-year {
        font-size: 13px;
    }


    .vehicle-result-details {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .vehicle-result-arrow {
        right: 10px;

        width: 30px;
        height: 30px;

        font-size: 18px;
    }

}
/* =========================================================
   VEHICLE HISTORY
   ========================================================= */

.vehicle-history-content {
    padding: 35px 45px 60px;
}


.vehicle-history-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;
}


.vehicle-history-back {
    display: inline-block;

    margin-bottom: 12px;

    text-decoration: none;

    color: #416488;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.4px;
}


.vehicle-history-top h1 {
    margin: 0 0 6px;

    font-size: 32px;

    color: #132238;
}


.vehicle-history-top p {
    margin: 0;

    color: #6c7b8e;
}


.vehicle-new-service-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #167bff,
            #0b4ca5
        );

    color: white;

    text-decoration: none;

    font-size: 14px;
    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(25, 87, 170, 0.28);
}


/* =========================
   VEHICLE + OWNER
   ========================= */

.vehicle-info-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(280px, 1fr);

    gap: 22px;

    margin-bottom: 30px;
}


.vehicle-main-card,
.vehicle-owner-card {
    border-radius: 18px;

    box-shadow:
        0 10px 28px
        rgba(34, 53, 76, 0.10);
}


.vehicle-main-card {
    padding: 28px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7faff
        );

    border: 1px solid #e1e8f0;
}


.vehicle-owner-card {
    padding: 28px;

    background:
        linear-gradient(
            135deg,
            #eafaf1,
            #d9f3e5
        );

    border:
        1px solid
        #c8ead8;
}


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

    gap: 20px;

    margin-bottom: 30px;
}


.vehicle-card-label {
    display: block;

    margin-bottom: 8px;

    color: #7c8b9d;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.8px;
}


.vehicle-card-header h2 {
    margin: 0;

    color: #14273f;

    font-size: 29px;
}


.vehicle-big-plate {
    background: #142c49;

    color: white;

    border-radius: 10px;

    padding: 12px 18px;

    font-size: 20px;
    font-weight: 900;

    letter-spacing: 1.4px;

    white-space: nowrap;
}


.vehicle-specs-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}


.vehicle-spec-item {
    padding: 15px;

    border-radius: 11px;

    background: #f3f6fa;
}


.vehicle-spec-item span {
    display: block;

    margin-bottom: 6px;

    color: #8593a3;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}


.vehicle-spec-item strong {
    display: block;

    color: #22364e;

    font-size: 14px;

    word-break: break-word;
}


/* OWNER */

.vehicle-owner-name {
    margin: 8px 0 22px;

    color: #173a2c;

    font-size: 25px;
    font-weight: 900;
}


.vehicle-owner-detail {
    margin-top: 16px;
}


.vehicle-owner-detail span {
    display: block;

    margin-bottom: 4px;

    color: #6e897d;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}


.vehicle-owner-detail strong {
    color: #203c31;

    font-size: 14px;
}


.vehicle-owner-empty {
    margin-top: 18px;

    color: #557267;
}


/* =========================
   SERVICE HISTORY
   ========================= */

.service-history-section {
    margin-top: 10px;
}


.service-history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.service-history-heading h2 {
    margin: 0 0 5px;

    color: #15283f;

    font-size: 25px;
}


.service-history-heading p {
    margin: 0;

    color: #728095;

    font-size: 13px;
}


.service-history-count {
    width: 44px;
    height: 44px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #173a61;

    color: white;

    font-weight: 900;
}


.service-history-list {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


.service-history-card {
    overflow: hidden;

    background: white;

    border:
        1px solid
        #e0e7ee;

    border-radius: 16px;

    box-shadow:
        0 7px 22px
        rgba(31, 50, 73, 0.08);
}


.service-history-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    background:
        linear-gradient(
            90deg,
            #f8fbff,
            #f2f6fb
        );

    border-bottom:
        1px solid
        #e8edf3;
}


.service-order-number {
    margin-bottom: 7px;

    color: #17375d;

    font-size: 20px;
    font-weight: 900;
}


.service-order-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;

    color: #68788b;

    font-size: 12px;
}


.service-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding: 0 12px;

    border-radius: 999px;

    background: #e7edf4;

    color: #4f6175;

    font-size: 11px;
    font-weight: 900;
}


/* BASIC STATUS COLORS */

.status-pranuar {
    background: #dcebff;
    color: #1b5fae;
}

.status-diagnozë,
.status-diagnoze {
    background: #eee3ff;
    color: #6930a8;
}

.status-në-servis,
.status-ne-servis {
    background: #ffe7c9;
    color: #ad5c00;
}

.status-kontroll-final {
    background: #fff2b8;
    color: #866400;
}

.status-gati {
    background: #daf5e6;
    color: #1c7447;
}

.status-dorëzuar,
.status-dorezuar {
    background: #dff1ea;
    color: #2a6b50;
}


/* BODY */

.service-history-body {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1.25fr;

    gap: 18px;

    padding: 22px;
}


.service-history-block {
    min-width: 0;

    padding-right: 15px;

    border-right:
        1px solid
        #e8edf2;
}


.service-history-block:last-child {
    border-right: 0;
    padding-right: 0;
}


.history-block-label {
    display: block;

    margin-bottom: 10px;

    color: #8b98a8;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.service-history-block p {
    margin: 0;

    color: #2c3d51;

    font-size: 14px;
    line-height: 1.55;
}


.service-jobs-list {
    margin: 0;
    padding-left: 20px;
}


.service-jobs-list li {
    margin-bottom: 9px;

    color: #2b3c50;

    font-size: 14px;
}


.service-jobs-list li:last-child {
    margin-bottom: 0;
}


.service-jobs-list strong {
    display: block;
}


.service-jobs-list span {
    display: block;

    margin-top: 3px;

    color: #768599;

    font-size: 12px;
}


/* FOOTER */

.service-history-footer {
    display: flex;
    justify-content: flex-end;

    padding: 0 22px 20px;
}


.service-details-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 0 15px;

    border-radius: 9px;

    background: #173c68;

    color: white;

    text-decoration: none;

    font-size: 11px;
    font-weight: 900;
}


/* EMPTY */

.service-history-empty {
    padding: 50px 25px;

    text-align: center;

    border-radius: 16px;

    background: white;

    border:
        1px dashed
        #cdd7e1;
}


.service-history-empty-icon {
    margin-bottom: 12px;

    font-size: 42px;
}


.service-history-empty h3 {
    margin: 0 0 8px;

    color: #263b53;
}


.service-history-empty p {
    margin: 0 0 20px;

    color: #758397;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .vehicle-info-grid {
        grid-template-columns: 1fr;
    }


    .vehicle-specs-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .service-history-body {
        grid-template-columns: 1fr;
    }


    .service-history-block {
        border-right: 0;

        border-bottom:
            1px solid
            #e8edf2;

        padding-right: 0;
        padding-bottom: 16px;
    }


    .service-history-block:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

}


@media (max-width: 760px) {

    .vehicle-history-content {
        padding:
            20px 12px 35px;
    }


    .vehicle-history-top {
        align-items: stretch;

        flex-direction: column;

        gap: 16px;
    }


    .vehicle-history-top h1 {
        font-size: 25px;
    }


    .vehicle-new-service-button {
        width: 100%;

        box-sizing: border-box;
    }


    .vehicle-main-card,
    .vehicle-owner-card {
        padding: 18px;
    }


    .vehicle-card-header {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: 20px;
    }


    .vehicle-card-header h2 {
        font-size: 23px;
    }


    .vehicle-big-plate {
        font-size: 16px;
    }


    .vehicle-specs-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 9px;
    }


    .vehicle-spec-item {
        padding: 11px;
    }


    .vehicle-owner-name {
        font-size: 21px;
    }


    .service-history-card-top {
        padding: 16px;

        flex-direction: column;
    }


    .service-history-body {
        padding: 16px;
    }


    .service-history-footer {
        padding:
            0 16px 16px;
    }


    .service-details-button {
        width: 100%;

        box-sizing: border-box;
    }

}

/* =========================================================
   NEW SERVICE
   ========================================================= */

.new-service-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 35px 45px 60px;
}


.new-service-heading {
    margin-bottom: 25px;
}


.new-service-heading h1 {
    margin: 0 0 6px;

    color: #15283f;

    font-size: 31px;
}


.new-service-heading p {
    margin: 0;

    color: #758397;
}


/* VEHICLE SUMMARY */

.new-service-vehicle-card {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 22px;

    padding: 25px;

    margin-bottom: 22px;

    background: white;

    border:
        1px solid
        #e0e7ee;

    border-radius: 17px;

    box-shadow:
        0 8px 25px
        rgba(31, 50, 73, 0.08);
}


.new-service-vehicle-card h2 {
    margin: 0;

    color: #172b43;

    font-size: 26px;
}


.new-service-vehicle-info {
    grid-column:
        1 / -1;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.new-service-vehicle-info div {
    padding: 13px 15px;

    background: #f3f6fa;

    border-radius: 10px;
}


.new-service-vehicle-info span {
    display: block;

    margin-bottom: 5px;

    color: #8795a6;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}


.new-service-vehicle-info strong {
    color: #263b53;

    font-size: 14px;
}


/* FORM */

.new-service-form-card {
    padding: 28px;

    background: white;

    border:
        1px solid
        #e0e7ee;

    border-radius: 17px;

    box-shadow:
        0 8px 25px
        rgba(31, 50, 73, 0.08);
}


.new-service-form-card h2 {
    margin:
        0 0 25px;

    color: #182d47;
}


.new-service-field {
    margin-bottom: 22px;
}


.new-service-field label {
    display: block;

    margin-bottom: 8px;

    color: #41536a;

    font-size: 13px;
    font-weight: 800;
}


.new-service-field input,
.new-service-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 15px;

    border:
        1px solid
        #ccd6e1;

    border-radius: 10px;

    background: #fafcff;

    color: #1f3249;

    font-family: inherit;
    font-size: 15px;

    outline: none;
}


.new-service-field input:focus,
.new-service-field textarea:focus {
    border-color: #2876df;

    box-shadow:
        0 0 0 3px
        rgba(40, 118, 223, 0.10);
}


.new-service-field textarea {
    resize: vertical;

    min-height: 120px;
}


.new-service-actions {
    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 30px;
}


.new-service-cancel,
.new-service-submit {
    min-height: 45px;

    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 900;

    text-decoration: none;
}


.new-service-cancel {
    background: #edf1f5;

    color: #526477;
}


.new-service-submit {
    border: 0;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #167bff,
            #0b4ca5
        );

    color: white;
}


@media (max-width: 760px) {

    .new-service-content {
        padding:
            20px 12px 35px;
    }


    .new-service-vehicle-card {
        grid-template-columns: 1fr;
    }


    .new-service-vehicle-info {
        grid-column: 1;

        grid-template-columns:
            repeat(2, 1fr);
    }


    .new-service-actions {
        flex-direction: column-reverse;
    }


    .new-service-cancel,
    .new-service-submit {
        width: 100%;

        box-sizing: border-box;
    }

}

/* =========================================================
   SERVICE ORDER DETAIL
   ========================================================= */

.order-detail-content {
    padding: 30px 36px 60px;
}


/* =========================================================
   TOP ACTIONS
   ========================================================= */

.order-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}


.order-back-link {
    color: #315c91;

    font-size: 12px;
    font-weight: 900;

    text-decoration: none;
}


.order-print-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 0 17px;

    background: white;

    color: #24466f;

    border: 1px solid #ccd8e7;

    border-radius: 10px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 900;

    box-shadow:
        0 5px 14px
        rgba(25, 45, 70, 0.07);
}



/* =========================================================
   ORDER HEADER
   ========================================================= */

.order-main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 24px 26px;

    margin-bottom: 22px;

    background: white;

    border: 1px solid #dde5ee;

    border-radius: 17px;

    box-shadow:
        0 9px 25px
        rgba(30, 52, 78, 0.08);
}


.order-small-label {
    display: block;

    margin-bottom: 6px;

    color: #8190a3;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.7px;
}


.order-main-title h1 {
    margin: 0 0 12px;

    color: #142944;

    font-size: 31px;
}


.order-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    color: #63758a;

    font-size: 12px;
}


.order-current-status {
    min-width: 240px;

    padding: 16px;

    border-radius: 13px;

    background: #f5f7fa;
}


.order-current-status-badge {
    display: inline-flex;
    align-items: center;

    min-height: 37px;

    padding: 0 16px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 900;

    color: white;
}


.order-status-pranuar {
    background:
        linear-gradient(
            135deg,
            #ff4c58,
            #db2230
        );
}


.order-status-diagnoze,
.order-status-diagnozë {
    background:
        linear-gradient(
            135deg,
            #ffd146,
            #e7a900
        );

    color: #573d00;
}


.order-status-ne-servis,
.order-status-në-servis {
    background:
        linear-gradient(
            135deg,
            #ff9a3d,
            #ec6c12
        );
}


.order-status-kontroll-final {
    background:
        linear-gradient(
            135deg,
            #428df7,
            #1a5db9
        );
}


.order-status-gati {
    background:
        linear-gradient(
            135deg,
            #35c973,
            #14994d
        );
}


.order-status-dorezuar,
.order-status-dorëzuar {
    background:
        linear-gradient(
            135deg,
            #8492a3,
            #586575
        );
}



/* =========================================================
   STATUS FLOW
   ========================================================= */

.order-status-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: start;

    gap: 12px;

    padding: 25px 20px;

    margin-bottom: 22px;

    background: white;

    border: 1px solid #dfe6ee;

    border-radius: 17px;

    box-shadow:
        0 8px 24px
        rgba(29, 51, 76, 0.07);
}


.order-step {
    text-align: center;

    opacity: 0.45;
}


.order-step.step-done,
.order-step.step-current {
    opacity: 1;
}


.step-circle {
    width: 52px;
    height: 52px;

    margin:
        0 auto 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 21px;

    color: white;

    box-shadow:
        0 6px 14px
        rgba(31, 48, 70, 0.16);
}


.step-red {
    background: #ef3d4b;
}


.step-yellow {
    background: #efb51c;
}


.step-orange {
    background: #ee781b;
}


.step-blue {
    background: #337be2;
}


.step-green {
    background: #26ae60;
}


.step-grey {
    background: #8390a0;
}


.order-step strong {
    display: block;

    margin-bottom: 4px;

    color: #243751;

    font-size: 11px;
}


.order-step span {
    display: block;

    color: #76869b;

    font-size: 10px;
    line-height: 1.35;
}


.order-step.step-current .step-circle {
    transform: scale(1.12);

    outline:
        6px solid
        rgba(80, 110, 150, 0.10);
}


.step-arrow {
    align-self: center;

    color: #a0afc0;

    font-size: 22px;

    transform: translateY(-15px);
}



/* =========================================================
   TWO COLUMN GRID
   ========================================================= */

.order-two-column-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-bottom: 18px;
}



/* =========================================================
   CARD BASE
   ========================================================= */

.order-info-card {
    padding: 22px;

    border-radius: 16px;

    box-shadow:
        0 8px 22px
        rgba(27, 48, 74, 0.07);
}


.order-full-card {
    margin-bottom: 18px;
}


.order-card-blue {
    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #edf5ff
        );

    border: 1px solid #cfe0f6;
}


.order-card-green {
    background:
        linear-gradient(
            135deg,
            #f7fff9,
            #e8f8ef
        );

    border: 1px solid #cbe8d7;
}


.order-card-red {
    background:
        linear-gradient(
            135deg,
            #fff9f9,
            #ffeded
        );

    border: 1px solid #f5c7cb;
}


.order-card-yellow {
    background:
        linear-gradient(
            135deg,
            #fffdf6,
            #fff4d8
        );

    border: 1px solid #efd899;
}


.order-card-purple {
    background:
        linear-gradient(
            135deg,
            #fcfaff,
            #f1ebff
        );

    border: 1px solid #dbcef5;
}


.order-card-work {
    background:
        linear-gradient(
            135deg,
            #fbfffc,
            #ecf8f0
        );

    border: 1px solid #cde5d5;
}


.order-card-title {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}


.order-card-title h2 {
    margin: 0;

    color: #1c3049;

    font-size: 19px;
}


.order-card-title p {
    margin: 4px 0 0;

    color: #738298;

    font-size: 12px;
}


.order-card-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: white;

    box-shadow:
        0 4px 12px
        rgba(28, 50, 74, 0.10);
}



/* =========================================================
   INFO GRID
   ========================================================= */

.order-info-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}


.order-info-grid div {
    padding: 12px;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.62);
}


.order-info-grid span {
    display: block;

    margin-bottom: 5px;

    color: #7a899c;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.order-info-grid strong {
    color: #263b54;

    font-size: 14px;

    word-break: break-word;
}



/* =========================================================
   TEXT BOX
   ========================================================= */

.order-text-box {
    min-height: 70px;

    padding: 15px;

    box-sizing: border-box;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.70);

    color: #30435a;

    font-size: 14px;
    line-height: 1.55;
}



/* =========================================================
   FORMS
   ========================================================= */

.order-form {
    max-width: 100%;
}


.order-form-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px;

    gap: 15px;
}


.order-form-group {
    margin-bottom: 16px;
}


.order-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #41536b;

    font-size: 12px;
    font-weight: 900;
}


.order-form-group input,
.order-form-group select,
.order-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #cbd5e1;

    border-radius: 9px;

    background: white;

    color: #21364f;

    font: inherit;

    outline: none;
}


.order-form-group input:focus,
.order-form-group select:focus,
.order-form-group textarea:focus {
    border-color: #3e7ed8;

    box-shadow:
        0 0 0 3px
        rgba(62, 126, 216, 0.10);
}


.order-form-group textarea {
    resize: vertical;
}


.order-form-actions {
    display: flex;
    justify-content: flex-end;
}


.price-input-wrap {
    display: flex;
    align-items: center;

    gap: 8px;
}


.price-input-wrap span {
    font-weight: 900;

    color: #566980;
}



/* =========================================================
   BUTTONS
   ========================================================= */

.order-primary-button,
.order-secondary-button,
.order-approve-button,
.order-ready-button,
.order-deliver-button {
    border: 0;

    cursor: pointer;

    font-weight: 900;

    border-radius: 9px;
}


.order-primary-button {
    min-height: 42px;

    padding: 0 17px;

    background:
        linear-gradient(
            135deg,
            #317ce9,
            #1559b7
        );

    color: white;
}


.order-secondary-button {
    min-height: 37px;

    padding: 0 14px;

    background: #284d79;

    color: white;
}


.order-approve-button {
    min-height: 44px;

    padding: 0 19px;

    background:
        linear-gradient(
            135deg,
            #28b766,
            #168a49
        );

    color: white;
}


.order-ready-button {
    min-height: 44px;

    padding: 0 20px;

    background:
        linear-gradient(
            135deg,
            #327ddd,
            #175bb3
        );

    color: white;
}


.order-deliver-button {
    min-height: 46px;

    padding: 0 22px;

    background:
        linear-gradient(
            135deg,
            #27bb67,
            #158747
        );

    color: white;
}



/* =========================================================
   SAVED / EMPTY
   ========================================================= */

.order-saved-note {
    margin-top: 12px;

    padding: 10px 13px;

    border-radius: 9px;

    background: #dcf5e6;

    color: #237447;

    font-size: 12px;
    font-weight: 800;
}


.order-empty-box {
    padding: 18px;

    border-radius: 10px;

    background: white;

    color: #718196;
}


.order-muted {
    color: #748399;

    font-size: 13px;
}



/* =========================================================
   JOB LIST
   ========================================================= */

.service-job-list {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.service-job-row {
    overflow: hidden;

    border-radius: 13px;

    background: white;

    border: 1px solid #dbe5df;

    box-shadow:
        0 5px 14px
        rgba(29, 51, 75, 0.06);
}


.service-job-header {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 15px;

    padding: 14px 16px;

    background: #f1f7f3;

    border-bottom: 1px solid #e0e9e3;
}


.service-job-number {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #375348;

    font-size: 11px;
}


.service-job-title {
    color: #183628;

    font-size: 15px;
    font-weight: 900;
}


.service-job-status {
    padding: 6px 10px;

    border-radius: 999px;

    background: #e8edf2;

    color: #56687c;

    font-size: 9px;
    font-weight: 900;
}


.job-status-completed {
    background: #daf3e5;
    color: #1a7447;
}


.job-status-in_progress {
    background: #ffe8c7;
    color: #975500;
}


.job-status-blocked {
    background: #ffe1e1;
    color: #9c3535;
}


.service-job-main {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(130px, 0.7fr)
        minmax(130px, 0.7fr);

    gap: 15px;

    padding: 16px;
}


.service-job-main span {
    display: block;

    margin-bottom: 6px;

    color: #8693a3;

    font-size: 9px;
    font-weight: 900;
}


.service-job-main p {
    margin: 0;

    color: #34485f;
}


.service-job-price strong {
    color: #203b2f;
}


.approval-approved {
    color: #188649;
}


.approval-rejected {
    color: #c33a3a;
}


.approval-pending {
    color: #a56c00;
}



/* =========================================================
   PARTS
   ========================================================= */

.service-job-parts,
.service-job-mechanic {
    padding: 15px 16px;

    border-top: 1px solid #edf0ee;
}


.service-job-subtitle {
    margin-bottom: 12px;

    color: #38536a;

    font-size: 11px;
    font-weight: 900;
}


.service-part-row {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        90px
        100px
        110px;

    gap: 12px;

    align-items: center;

    padding: 10px 12px;

    margin-bottom: 7px;

    border-radius: 8px;

    background: #f8fafb;

    font-size: 12px;
}


.service-part-row span {
    display: block;

    margin-top: 3px;

    color: #7d8b9b;

    font-size: 10px;
}


.service-part-status {
    font-weight: 800;
}


.service-add-part-form {
    display: grid;

    grid-template-columns:
        minmax(160px, 1.4fr)
        minmax(120px, 1fr)
        90px
        110px
        auto;

    gap: 8px;

    margin-top: 12px;
}


.service-add-part-form input,
.service-mechanic-form select {
    min-height: 37px;

    box-sizing: border-box;

    padding: 0 10px;

    border: 1px solid #ced8e1;

    border-radius: 8px;

    background: white;
}



/* =========================================================
   MECHANIC
   ========================================================= */

.mechanic-assignment {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 10px 12px;

    margin-bottom: 10px;

    border-radius: 8px;

    background: #f5f8fb;
}


.mechanic-assignment span {
    color: #788799;

    font-size: 11px;
}


.service-mechanic-form {
    display: flex;

    gap: 8px;

    max-width: 500px;
}


.service-mechanic-form select {
    flex: 1;
}



/* =========================================================
   APPROVAL
   ========================================================= */

.order-approval-form {
    display: flex;
    justify-content: flex-end;

    margin: 18px 0;
}



/* =========================================================
   ADD JOB
   ========================================================= */

.add-job-panel {
    margin-top: 20px;

    padding: 18px;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.70);

    border:
        1px dashed
        #bfcfc5;
}


.add-job-panel h3 {
    margin: 0 0 18px;

    color: #244337;
}



/* =========================================================
   FINANCE
   ========================================================= */

.order-finance-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px;

    margin-bottom: 18px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #172d49,
            #244f7d
        );

    color: white;

    box-shadow:
        0 9px 24px
        rgba(19, 42, 69, 0.18);
}


.order-finance-card h2 {
    margin: 0;

    color: white;

    font-size: 20px;
}


.order-finance-card .order-small-label {
    color: #adc2dc;
}


.order-finance-values {
    display: flex;

    gap: 28px;

    align-items: center;
}


.order-finance-values div {
    min-width: 110px;
}


.order-finance-values span {
    display: block;

    margin-bottom: 5px;

    color: #c6d5e5;

    font-size: 10px;
}


.order-finance-values strong {
    font-size: 17px;
}


.order-grand-total {
    padding-left: 25px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.25);
}


.order-grand-total strong {
    font-size: 23px;
}



/* =========================================================
   DELIVERY
   ========================================================= */

.order-delivery-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 22px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #e5f8ed,
            #d0f1df
        );

    border: 1px solid #bce3cd;
}


.order-delivery-card h2 {
    margin: 0;

    color: #195b39;
}



/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .order-status-flow {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 20px;
    }


    .step-arrow {
        display: none;
    }


    .service-job-main {
        grid-template-columns: 1fr;
    }


    .service-add-part-form {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .order-finance-card {
        align-items: flex-start;

        flex-direction: column;
    }

}



@media (max-width: 760px) {

    .order-detail-content {
        padding:
            20px 12px 40px;
    }


    .order-top-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .order-print-button {
        width: 100%;

        box-sizing: border-box;
    }


    .order-main-header {
        align-items: stretch;

        flex-direction: column;

        padding: 18px;
    }


    .order-main-title h1 {
        font-size: 23px;
    }


    .order-current-status {
        min-width: 0;
    }


    .order-status-flow {
        grid-template-columns:
            repeat(2, 1fr);

        padding:
            20px 12px;
    }


    .order-two-column-grid {
        grid-template-columns: 1fr;
    }


    .order-info-card {
        padding: 16px;
    }


    .order-info-grid {
        grid-template-columns: 1fr 1fr;
    }


    .order-form-row {
        grid-template-columns: 1fr;
    }


    .service-job-header {
        grid-template-columns:
            1fr auto;

        gap: 10px;
    }


    .service-job-title {
        grid-column:
            1 / -1;
    }


    .service-part-row {
        grid-template-columns:
            1fr 1fr;
    }


    .service-add-part-form {
        grid-template-columns: 1fr;
    }


    .service-add-part-form button {
        min-height: 40px;
    }


    .service-mechanic-form {
        flex-direction: column;
    }


    .order-approval-form {
        justify-content: stretch;
    }


    .order-approve-button {
        width: 100%;
    }


    .order-finance-values {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 16px;
    }


    .order-grand-total {
        grid-column:
            1 / -1;

        padding-left: 0;
        padding-top: 12px;

        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.25);
    }


    .order-delivery-card {
        align-items: stretch;

        flex-direction: column;
    }


    .order-deliver-button {
        width: 100%;
    }

}

/* =========================================================
   COMPACT SERVICE ORDER
   ========================================================= */

.compact-panel,
.compact-jobs-section {
    margin-bottom: 16px;

    background: white;

    border: 1px solid #dce4ed;

    border-radius: 14px;

    box-shadow:
        0 6px 18px
        rgba(29, 48, 72, 0.06);
}


/* =========================================================
   GENERIC SUMMARY
   ========================================================= */

.compact-panel-summary {
    min-height: 66px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 12px 17px;

    cursor: pointer;

    list-style: none;
}


.compact-panel-summary::-webkit-details-marker,
.compact-job-summary::-webkit-details-marker,
.compact-add-job summary::-webkit-details-marker {
    display: none;
}


.compact-summary-left {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


.compact-summary-left > div {
    min-width: 0;
}


.compact-summary-left strong {
    display: block;

    margin-bottom: 4px;

    color: #24384f;

    font-size: 15px;
}


.compact-summary-left span {
    display: block;

    overflow: hidden;

    max-width: 750px;

    color: #75859a;

    font-size: 11px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.compact-summary-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f1ecfc;

    border-radius: 9px;
}


.compact-summary-right {
    display: flex;
    align-items: center;

    gap: 12px;
}


.compact-chevron {
    color: #78879a;

    font-size: 12px;

    transition: transform 0.18s ease;
}


details[open] > summary .compact-chevron {
    transform: rotate(180deg);
}



/* =========================================================
   BADGES
   ========================================================= */

.compact-badge {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    white-space: nowrap;
}


.compact-badge-green {
    background: #dcf4e6;
    color: #197445;
}


.compact-badge-yellow {
    background: #fff0c9;
    color: #8b6200;
}


.compact-badge-red {
    background: #ffe0e0;
    color: #a32d36;
}



/* =========================================================
   DIAGNOSIS
   ========================================================= */

.compact-diagnosis {
    border-left: 4px solid #8757d7;
}


.compact-panel-body {
    padding: 15px 17px 17px;

    border-top: 1px solid #e7eaf0;

    background: #fbfaff;
}


.compact-diagnosis-grid {
    display: grid;

    grid-template-columns:
        230px minmax(0, 1fr);

    gap: 14px;
}



/* =========================================================
   JOBS HEADER
   ========================================================= */

.compact-jobs-section {
    padding: 16px;
}


.compact-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;
}


.compact-section-header h2 {
    margin: 0 0 3px;

    color: #20374d;

    font-size: 17px;
}


.compact-section-header span {
    color: #8491a1;

    font-size: 10px;
}



/* =========================================================
   JOB ROW
   ========================================================= */

.compact-job-list {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.compact-job {
    overflow: hidden;

    border: 1px solid #dfe6ea;

    border-radius: 10px;

    background: #fff;
}


.compact-job-summary {
    min-height: 54px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        26px
        minmax(170px, 2fr)
        100px
        110px
        minmax(120px, 1fr)
        100px
        20px;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    cursor: pointer;

    list-style: none;
}


.compact-job:hover {
    border-color: #becdd9;

    box-shadow:
        0 3px 9px
        rgba(28, 48, 68, 0.05);
}


.compact-job-check input {
    width: 16px;
    height: 16px;
}


.compact-job-name span,
.compact-job-price span,
.compact-job-mechanic-name span {
    display: block;

    margin-bottom: 2px;

    color: #8996a5;

    font-size: 8px;
    font-weight: 900;
}


.compact-job-name strong {
    color: #263d50;

    font-size: 13px;
}


.compact-job-price strong,
.compact-job-mechanic-name strong {
    color: #344b60;

    font-size: 11px;
}


.compact-job-body {
    padding: 13px 15px 15px;

    border-top: 1px solid #e8edf0;

    background: #fafcfc;
}


.compact-job-description {
    margin-bottom: 13px;

    padding: 10px 12px;

    background: white;

    border-radius: 8px;
}


.compact-job-description strong {
    color: #465a6e;

    font-size: 10px;
}


.compact-job-description p {
    margin: 4px 0 0;

    color: #607184;

    font-size: 12px;
}



/* =========================================================
   JOB SUBSECTIONS
   ========================================================= */

.compact-job-subsection {
    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px solid #e5eaed;
}


.compact-subsection-title {
    margin-bottom: 9px;

    color: #364d60;

    font-size: 11px;
    font-weight: 900;
}



/* =========================================================
   APPROVAL
   ========================================================= */

.compact-approval-form {
    display: flex;
    justify-content: flex-end;

    margin-top: 12px;
}



/* =========================================================
   ADD JOB COLLAPSED
   ========================================================= */

.compact-add-job {
    margin-top: 12px;

    border: 1px dashed #aebdcc;

    border-radius: 10px;

    background: #f9fbfc;
}


.compact-add-job > summary {
    padding: 12px 15px;

    cursor: pointer;

    list-style: none;

    color: #245da1;

    font-size: 11px;
    font-weight: 900;
}


.compact-add-job-body {
    padding: 15px;

    border-top: 1px solid #e2e8ed;

    background: white;
}



/* =========================================================
   MAKE EXISTING PARTS MORE COMPACT
   ========================================================= */

.compact-job .service-part-row {
    padding: 7px 10px;

    margin-bottom: 5px;
}


.compact-job .service-add-part-form {
    margin-top: 8px;
}


.compact-job .mechanic-assignment {
    padding: 7px 10px;

    margin-bottom: 7px;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

    .compact-job-summary {
        grid-template-columns:
            25px
            minmax(150px, 2fr)
            90px
            105px
            20px;
    }


    .compact-job-mechanic-name,
    .compact-job-status {
        display: none;
    }

}


@media (max-width: 700px) {

    .compact-diagnosis-grid {
        grid-template-columns: 1fr;
    }


    .compact-summary-left span {
        max-width: 220px;
    }


    .compact-job-summary {
        grid-template-columns:
            24px
            minmax(120px, 1fr)
            auto
            20px;
    }


    .compact-job-price {
        display: none;
    }


    .compact-job-approval {
        display: block;
    }


    .compact-job-mechanic-name,
    .compact-job-status {
        display: none;
    }


    .compact-badge {
        font-size: 8px;
    }

}

/* =========================================================
   SIDEBAR COLLAPSE + MOBILE
   ========================================================= */

.sidebar-collapse-button {
    position: absolute;
    top: 18px;
    right: -14px;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #ffffff;
    color: #183550;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);

    cursor: pointer;

    font-size: 20px;
    font-weight: 800;

    z-index: 100;
}


.dashboard-sidebar {
    position: relative;

    transition:
        width 0.22s ease,
        transform 0.22s ease;
}


/* DESKTOP - SIDEBAR I PALOSUR */

/* =========================================================
   DESKTOP - SIDEBAR COLLAPSED
   ========================================================= */

.dashboard-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}


.dashboard-sidebar {
    width: 250px;
    flex: 0 0 250px;

    position: relative;

    transition:
        width 0.22s ease,
        flex-basis 0.22s ease,
        transform 0.22s ease;
}


.dashboard-layout.sidebar-collapsed .dashboard-sidebar {
    width: 74px;
    flex: 0 0 74px;
}


.dashboard-layout.sidebar-collapsed .dashboard-brand-text,
.dashboard-layout.sidebar-collapsed .dashboard-sidebar-menu a span:not(.menu-icon),
.dashboard-layout.sidebar-collapsed .dashboard-sidebar-bottom {
    display: none;
}


.dashboard-layout.sidebar-collapsed .dashboard-brand {
    justify-content: center;
}


.dashboard-layout.sidebar-collapsed .dashboard-sidebar-menu a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}


.dashboard-layout.sidebar-collapsed .menu-icon {
    width: auto;
    margin: 0;
}


.dashboard-layout.sidebar-collapsed .sidebar-collapse-button {
    transform: rotate(180deg);
}


/* MOBILE */

@media (max-width: 768px) {

    .dashboard-sidebar {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: 250px;

        transform: translateX(-105%);

        z-index: 1000;

        box-shadow:
            8px 0 25px
            rgba(0, 0, 0, 0.22);
    }


    .dashboard-sidebar.mobile-open {
        transform: translateX(0);
    }


    .sidebar-collapse-button {
        display: none;
    }


    .dashboard-mobile-open {
        display: flex;
    }

    .dashboard-layout.sidebar-collapsed .dashboard-sidebar {
        width: 250px;
        flex-basis: 250px;
    }

}

/* =========================================================
   FINAL SIDEBAR COLLAPSE FIX
   ========================================================= */

.dashboard-layout {
    display: flex !important;
    width: 100% !important;
}

.dashboard-sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    flex: 0 0 250px !important;
}



/* SIDEBAR I MBYLLUR */

.dashboard-layout.sidebar-collapsed .dashboard-sidebar {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex: 0 0 72px !important;
}


/* QENDRO IKONAT */

.dashboard-layout.sidebar-collapsed .dashboard-brand {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dashboard-layout.sidebar-collapsed .dashboard-sidebar-menu a {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dashboard-layout.sidebar-collapsed .dashboard-sidebar-menu .menu-icon {
    margin: 0 !important;
}


/* FSHEH TEKSTIN */

.dashboard-layout.sidebar-collapsed .dashboard-brand-text,
.dashboard-layout.sidebar-collapsed .dashboard-sidebar-menu a span:not(.menu-icon),
.dashboard-layout.sidebar-collapsed .dashboard-sidebar-bottom {
    display: none !important;
}


/* BUTONI */

.dashboard-layout.sidebar-collapsed .sidebar-collapse-button {
    transform: rotate(180deg);
}


/* MOBILE */

@media (max-width: 768px) {

    .dashboard-sidebar,
    .dashboard-layout.sidebar-collapsed .dashboard-sidebar {
        position: fixed !important;

        width: 250px !important;
        min-width: 250px !important;
        max-width: 250px !important;

        flex: none !important;

        top: 0;
        bottom: 0;
        left: 0;

        transform: translateX(-105%);

        z-index: 1000;
    }

    .dashboard-sidebar.mobile-open {
        transform: translateX(0);
    }

        .dashboard-sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Sidebar-i lëviz vertikalisht vetëm në telefon */
    .dashboard-sidebar,
    .dashboard-layout.sidebar-collapsed .dashboard-sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .dashboard-brand,
    .dashboard-sidebar-menu,
    .dashboard-sidebar-bottom {
        flex-shrink: 0;
    }
}


/* =========================================================
   INTAKE PAGE ALIGNMENT FIX
   ========================================================= */

.dashboard-main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 100vh;
    margin-left: 0 !important;
    padding: 0 !important;
}

.scan-page {
    width: 100%;
    max-width: 1050px;
    margin: 24px auto 40px auto !important;
    padding: 0 24px;
    box-sizing: border-box;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

.dashboard-topbar {
    flex-shrink: 0;
}

/* =========================================================
   INTAKE PAGE - FINAL LAYOUT FIX
   ========================================================= */

.intake-page .dashboard-layout {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    align-items: flex-start !important;
}

.intake-page .dashboard-main {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

.intake-page .dashboard-topbar {
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    box-sizing: border-box !important;
}

.intake-page .scan-page {
    width: calc(100% - 48px) !important;
    max-width: 1050px !important;
    margin: 24px auto 40px auto !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}
/* =========================================================
   GJENDJA NE SERVIS - LIVE FINAL
   ========================================================= */

.service-live-panel {
    width: calc(100% - 60px);
    max-width: 1500px;
    margin: 28px auto 0;
    background: #ffffff;
    border: 1px solid #e1e7ee;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
}

.service-live-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
}


/* =========================
   TITULLI
   ========================= */

.service-live-heading {
    text-align: center;
    padding: 22px 15px 10px;
}

.service-live-heading h2 {
    margin: 0;
    color: #172033;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.3px;
}

.service-live-heading span {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 15px;
    font-weight: 600;
}


/* =========================
   LEGENDA - BADGE
   ========================= */

.service-live-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px 18px 20px;
}

.service-live-legend span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

/* PRANUAR */
.service-live-legend span:nth-child(1) {
    color: #c92f3d;
    background: #fff0f2;
    border: 1px solid #ffcbd1;
}

/* DIAGNOZE */
.service-live-legend span:nth-child(2) {
    color: #a87500;
    background: #fff8df;
    border: 1px solid #f4dda0;
}

/* PERGATITJA E PUNES */
.service-live-legend span:nth-child(3) {
    color: #6936c7;
    background: #f3ebff;
    border: 1px solid #d9c2ff;
}

/* NE SERVIS */
.service-live-legend span:nth-child(4) {
    color: #c26000;
    background: #fff1e5;
    border: 1px solid #ffd0a6;
}

/* KONTROLL FINAL */
.service-live-legend span:nth-child(5) {
    color: #1761c2;
    background: #eaf3ff;
    border: 1px solid #b9d7ff;
}

/* GATI */
.service-live-legend span:nth-child(6) {
    color: #16834a;
    background: #e7f8ee;
    border: 1px solid #b6e8cb;
}


/* =========================
   TABELA
   ========================= */

.service-live-header,
.service-live-row {
    display: grid;
    grid-template-columns:
        55px
        minmax(190px, 1.3fr)
        170px
        minmax(330px, 2fr)
        minmax(190px, 1fr)
        55px;

    align-items: center;
    text-align: center;
}

.service-live-header {
    min-height: 54px;
    background: #172033;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.service-live-header > div {
    padding: 0 8px;
}

.service-live-row {
    min-height: 72px;
    color: #172033;
    text-decoration: none;
    border-bottom: 1px solid #e3e8ee;
    transition: background 0.15s ease;
}

.service-live-row:nth-child(odd) {
    background: #fafbfc;
}

.service-live-row:nth-child(even) {
    background: #f1f4f7;
}

.service-live-row:hover {
    background: #e8eef5;
}

.service-live-row:last-child {
    border-bottom: 0;
}

.service-live-row > div {
    min-width: 0;
    padding: 11px 9px;
}


/* =========================
   TE DHENAT
   ========================= */

.service-live-number {
    font-size: 16px;
    font-weight: 900;
}

.service-live-vehicle {
    min-width: 0;
}

.service-live-vehicle strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #172033;
    font-size: 16px;
    font-weight: 900;
}

.service-live-time {
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}


/* =========================
   PUNA LIVE
   ========================= */

.service-live-work {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 0;
    font-size: 15px;
    font-weight: 800;
}

.service-live-work-time {
    flex: 0 0 auto;
    color: #44566c;
    font-size: 14px;
    font-weight: 900;
}

.service-live-work-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================
   MEKANIKU
   ========================= */

.service-live-mechanic {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #24384f;
    font-size: 15px;
    font-weight: 900;
}


/* =========================
   STATUS DOT
   ========================= */

.service-live-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-dot {
    display: block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.07);
}

.live-red {
    background: #dc3545;
}

.live-yellow {
    background: #f2c94c;
}

.live-purple {
    background: #8b5cf6;
}

.live-orange {
    background: #f2994a;
}

.live-blue {
    background: #2f80ed;
}

.live-green {
    background: #27ae60;
}


/* =========================
   KUR NUK KA VETURA
   ========================= */

.service-live-empty {
    min-height: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    text-align: center;
    color: #5d6c7e;
    font-size: 19px;
    font-weight: 800;
}

.service-live-empty::before {
    content: "🚗";
    width: 82px;
    height: 82px;
    margin-bottom: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2f6;
    font-size: 40px;
    filter: grayscale(1);
    opacity: 0.72;
}

.service-live-empty::after {
    content: "Të gjitha urdhërat janë në faza të tjera.";
    display: block;
    margin-top: 7px;
    color: #8995a4;
    font-size: 15px;
    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .service-live-panel {
        width: calc(100% - 24px);
        max-width: none;
    }

    .service-live-legend {
        gap: 8px;
    }

    .service-live-legend span {
        min-height: 38px;
        padding: 0 10px;
        font-size: 12px;
    }

    .service-live-header,
    .service-live-row {
        grid-template-columns:
            40px
            minmax(135px, 1.2fr)
            120px
            minmax(220px, 2fr)
            minmax(145px, 1fr)
            38px;
    }
}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 700px) {

    .service-live-panel {
        width: calc(100% - 12px);
        margin-top: 12px;
        border-radius: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .service-live-sticky,
    .service-live-list {
        min-width: 720px;
    }

    .service-live-heading {
        padding: 16px 8px 8px;
    }

    .service-live-heading h2 {
        font-size: 21px;
    }

    .service-live-heading span {
        font-size: 13px;
    }

    .service-live-legend {
        gap: 6px;
        padding: 8px 8px 14px;
    }

    .service-live-legend span {
        min-height: 32px;
        padding: 0 8px;
        font-size: 10px;
        border-radius: 7px;
    }

    .service-live-header,
    .service-live-row {
        grid-template-columns:
            38px
            135px
            105px
            235px
            150px
            35px;
    }

    .service-live-header {
        min-height: 44px;
        font-size: 11px;
    }

    .service-live-row {
        min-height: 60px;
    }

    .service-live-number {
        font-size: 13px;
    }

    .service-live-vehicle strong {
        font-size: 13px;
    }

    .service-live-time,
    .service-live-work,
    .service-live-work-time,
    .service-live-mechanic {
        font-size: 12px;
    }

    .live-dot {
        width: 14px;
        height: 14px;
    }

    .service-live-empty {
        min-width: 720px;
        min-height: 200px;
        font-size: 16px;
    }

    .service-live-empty::before {
        width: 65px;
        height: 65px;
        font-size: 31px;
    }

    .service-live-empty::after {
        font-size: 13px;
    }
}