:root {
    --accent: #f5a24b; /* portocaliu ca în mock */
    --text-900: #111;
    --text-600: #6b7280;
    --chip-bg: #fdebd2; /* accent foarte deschis */
    --chip-fg: #7a4b15;
    --radius: 14px;
}

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.container-narrow {
    max-width: 680px;
    margin-inline: auto;
}

h1, h2, h3 {
    color: var(--text-900);
    letter-spacing: -0.02em
}

.h-plate {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em
}

.h-sub {
    color: var(--text-600);
    font-size: 1rem;
    margin-top: -.25rem
}

.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

    .btn-accent:hover {
        filter: brightness(.95);
        color: #fff
    }

.tabbar {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid #eee;
    margin-bottom: .5rem
}

    .tabbar a {
        padding: .5rem 0;
        color: var(--text-900);
        text-decoration: none;
        opacity: .6;
        border-bottom: 3px solid transparent
    }

        .tabbar a.active {
            opacity: 1;
            border-bottom-color: var(--accent)
        }

.job-card {
    padding: .9rem .5rem;
    border-bottom: 1px solid #eee
}

.job-title {
    font-weight: 700
}

.job-sub {
    color: var(--text-600);
    font-size: .95rem
}
.navbar-toggler {
    border: none; 
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.chip {
    display: inline-block;
    background: var(--chip-bg);
    color: var(--chip-fg);
    padding: .25rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600
}

.section {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: var(--radius);
    background: #fff
}

.row-brief {
    display: flex;
    justify-content: space-between;
    margin: .35rem 0
}

    .row-brief .label {
        color: #555
    }

    .row-brief .value {
        font-weight: 600
    }

.total-card {
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: .8rem;
    background: #fff
}

.fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .fab:hover {
        filter: brightness(.95)
    }

.btn-ghost {
    border: 1px solid #ddd;
    background: #fff
}

.btn-wide {
    width: 100%
}


/* header/nav dark */
.appbar {
    background: #0f2740;
    color: #fff;
    padding: .9rem 1rem
}

    .appbar h1 {
        font-size: 1.1rem;
        margin: 0
    }

/* list + cards */
.list-item {
    padding: 1rem .5rem;
    border-bottom: 1px solid #eef2f7
}

.title {
    font-weight: 700
}

.sub {
    color: #6b7280
}

/* chips by status */
.badge {
    border-radius: 999px;
    padding: .25rem .6rem;
    font-weight: 700;
    font-size: .8rem
}

    .badge.blue {
        background: #e3eefc;
        color: #103e7d
    }

    .badge.green {
        background: #dff7e5;
        color: #116549
    }

    .badge.gray {
        background: #eceff3;
        color: #475569
    }

/* buttons */
.btn-primary-navy {
    background: #0f2740;
    border-color: #0f2740;
    color: #fff
}

    .btn-primary-navy:hover {
        filter: brightness(.95)
    }

/* update status list */
.option-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: .6rem
}

    .option-btn.active {
        background: #0f2740;
        color: #fff
    }

    .option-btn.green.active {
        background: #22c55e;
        color: #fff
    }

    .option-btn.gray.active {
        background: #cbd5e1;
        color: #111
    }

.gm-navbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #1469ff;
    color: #fff;
    padding: .75rem 1rem;
}

    .gm-navbar .brand {
        font-weight: 700;
        color: #fff;
        text-decoration: none;
    }

    .gm-navbar .links {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: auto;
    }

        .gm-navbar .links a, .gm-navbar .logout-link {
            color: #fff;
            text-decoration: none;
            background: none;
            border: 0;
            cursor: pointer;
            font: inherit;
        }

    .gm-navbar .logout-link {
        padding: 0;
    }

    .gm-navbar .spacer {
        flex: 1;
    }

.gm-burger {
    display: none;
    margin-left: auto;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
}

/* Mobile */
@media (max-width: 768px) {
    .gm-burger {
        display: block;
    }

    .gm-navbar .hello {
        display: none;
    }

    .gm-navbar .links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 56px;
        background: #1469ff;
        flex-direction: column;
        gap: .5rem;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(255,255,255,.15);
        z-index: 1000;
    }

    .gm-navbar.open .links {
        display: flex;
    }
}




/* ===== Garage Manager UI ===== */
:root {
    --gm-navy: #0f2740; /* header + primary */
    --gm-navy-600: #0c1f33;
    --gm-bg: #f5f7fb; /* page background */
    --gm-card: #ffffff; /* cards */
    --gm-text: #0b1324;
    --gm-muted: #6b7280;
    --gm-border: #e5e7eb;
    --gm-ok: #22c55e;
    --gm-warn: #f59e0b;
    --gm-badge-blue-bg: #e3eefc;
    --gm-badge-blue: #103e7d;
}

/* page chrome */
.gm-appbar {
    background: var(--gm-navy);
    color: #fff;
    padding: .9rem 1rem;
}

    .gm-appbar h1 {
        font-size: 1.1rem;
        margin: 0;
        letter-spacing: .3px;
    }

.gm-page {
    background: var(--gm-bg);
    min-height: 100vh;
}

.gm-container {
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem;
}

/* cards */
.gm-card {
    background: var(--gm-card);
    border: 1px solid var(--gm-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

    .gm-card h5 {
        margin: 0 0 .75rem 0;
    }

.gm-muted {
    color: var(--gm-muted);
}

/* option buttons (status) */
.gm-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--gm-border);
    background: #f6f7fb;
    border-radius: 12px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--gm-text);
}

    .gm-option.active {
        background: var(--gm-navy);
        color: #fff;
        border-color: var(--gm-navy);
    }

        .gm-option.active.green {
            background: var(--gm-ok);
            border-color: var(--gm-ok);
        }

        .gm-option.active.gray {
            background: #cfd6e3;
            color: #111;
        }

/* form & inputs */
.gm-row {
    display: grid;
    gap: 10px;
}

@media(min-width:640px) {
    .gm-row-cols-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

@media(min-width:640px) {
    .gm-row-cols-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.gm-actions {
    text-align: right
}

/* totals */
.gm-total {
    border-radius: 16px;
    border: 1px dashed var(--gm-border);
    background: #fff;
    padding: 14px;
}

.gm-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 2px;
}

    .gm-line .lbl {
        color: var(--gm-muted);
    }

    .gm-line .val {
        font-weight: 700;
    }

/* primary button */
.btn-gm {
    background: var(--gm-navy);
    border: 1px solid var(--gm-navy);
    color: #fff;
    border-radius: 12px;
    padding: .75rem 1.1rem;
    font-weight: 700;
}

    .btn-gm:hover {
        background: var(--gm-navy-600);
        border-color: var(--gm-navy-600);
        color: #fff;
    }

.btn-ghost {
    border: 1px solid var(--gm-border);
    background: #fff;
    border-radius: 10px;
    padding: .5rem .9rem;
}

.btn-danger-soft {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 8px;
    padding: .3rem .6rem;
}

/* small helpers */
.badge-blue {
    background: var(--gm-badge-blue-bg);
    color: var(--gm-badge-blue);
    border-radius: 999px;
    padding: .2rem .55rem;
    font-weight: 700;
    font-size: .8rem
}


/* ===== Buttons / Icons ===== */
.btn-gm {
    background: #0f2740;
    border: 1px solid #0f2740;
    color: #fff;
    border-radius: 12px;
    padding: .55rem 1rem;
    font-weight: 700
}

    .btn-gm:hover {
        filter: brightness(.95);
        color: #fff
    }

.btn-outline-gm {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #0f2740;
    border-radius: 10px;
    padding: .45rem .8rem
}

    .btn-outline-gm:hover {
        background: #f3f6fb
    }

.btn-danger-gm {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: .45rem .8rem
}

.btn-icon {
    display: inline-flex;
    gap: .35rem;
    align-items: center
}

    .btn-icon svg {
        width: 18px;
        height: 18px
    }

.btn-sm-custom {
    font-size: 0.8rem; 
    padding: 0.25rem 0.5rem; 
    line-height: 1.2; 
}


/* ===== Chips / Badges ===== */
.chip {
    border-radius: 999px;
    padding: .18rem .6rem;
    font-weight: 700;
    font-size: .82rem
}

.chip-blue {
    background: #e3eefc;
    color: #103e7d
}

.chip-green {
    background: #dff7e5;
    color: #116549
}

.chip-gray {
    background: #eceff3;
    color: #475569
}

/* ===== Tables ===== */
.table-gm {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px
}

    .table-gm thead th {
        font-weight: 700;
        color: #475569;
        padding: 8px
    }

    .table-gm tbody tr {
        background: #fff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 1px 2px rgba(16,24,40,.04)
    }

    .table-gm tbody td {
        padding: 12px 10px;
        border-top: 1px solid #e5e7eb
    }

    .table-gm tbody tr:first-child td {
        border-top: 1px solid #e5e7eb
    }

/* ===== Page header + toolbar ===== */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.4rem 0 .8rem
}

.page-title {
    font-size: 2.2rem;
    font-weight: 800
}

.toolbar {
    display: flex;
    gap: .5rem
}

.btn-plus {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    background: #0f2740;
    color: #fff;
    border-radius: 999px;
    padding: .5rem .9rem;
    border: none
}

    .btn-plus svg {
        width: 18px;
        height: 18px
    }

/* ===== Cards / general ===== */
.page-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem
}

.card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04)
}

    .card + .card {
        margin-top: 12px
    }

.page-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 1.25rem 0 .5rem
}

.subtle {
    color: #6c757d
}

.card {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(20,20,20,.04)
}

.grid {
    display: grid;
    gap: 1rem
}

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

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr
    }
}

.btn-gm {
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .6rem 1rem;
    font-weight: 600
}

.btn-outline-gm {
    border: 1px solid #0d6efd;
    color: #0d6efd;
    background: transparent;
    border-radius: 12px;
    padding: .5rem .9rem;
    font-weight: 600
}

.btn-danger-gm {
    background: #dc3545;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .5rem .9rem;
    font-weight: 600
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    margin-right: .4rem;
    vertical-align: -3px
}

.chip {
    display: inline-block;
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .85rem;
    font-weight: 600
}

.chip-blue {
    background: #e7f1ff;
    color: #0d6efd
}

.chip-green {
    background: #eaf7ea;
    color: #198754
}

.chip-gray {
    background: #f2f2f2;
    color: #6c757d
}

.form-label {
    font-weight: 600
}




@media (min-width:768px) {
    .h-plate {
        font-size: 3rem
    }
}