:root{
    --w-yellow: #ffeb03;   /* žlutá linka v titulku */
    --w-pink: #E6328C;   /* růžová linka v titulku */
    --w-green: #8FAD15;   /* zelená linka v titulku */
    --w-blue: #00ADE1;   /* modrá linka v titulku */
    --w-orange: #FF7800;   /* oranžová linka v titulku */
    --w-red: #ED0530;   /* červena linka v titulku */
    --chip-bg: #5a4c40;  /* hnědý štítek / header */
    --muted:   #6c6c6c;
    --card-bg: #fff;
    --body-bg: #f8f7f5;  /* světlé tělo karty jako na screenu */
    --bd:      #eee;
    --lg:  #f8f9fa; /* svetla jako header v adminu*/
    --dgray: #e5e7eb;
    --coffee-900: #4f4037;  /* tmavě hnědá (hlavička) */
    --coffee-800: #5a4a3f;
    --coffee-100: #f1f1f1;  /* pruhování */
    --coffee-050: #f7f7f7;  /* podklad souhrnu */
    --table-border: #e5e5e5;
}


h1, h2, h3, h4, h5, h6  {
    font-family: "Ubuntu Bold", serif;
}

a, p {
    font-family: "Roboto", serif;
    color: #000000;
}

.bg-yellow {
    --bs-bg-opacity: 1;
    background-color: var(--w-yellow) !important;
}

.bg-brown {
    --bs-bg-opacity: 1;
    background-color: var(--chip-bg) !important;
}

.btn {
    border-radius: 40px;
    font-family: "Ubuntu Bold", serif;
}

.btn-outline-dark {

    --bs-btn-border-color: #c4c4c4;
}
.btn-outline-dark:hover {
    background: var(--chip-bg)
}
.card {
    border: none;
}

.btn-yellow {
    background-color: var(--w-yellow) !important;
    color: #000;
    font-weight: bold;
    padding: 6px 16px;
    text-transform: uppercase;
    border: 1px solid var(--w-yellow) !important;
}

.btn-light-gray {
    background-color: var(--lg) !important;
    border: 1px solid var(--dgray) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.btn-width {
    width: 350px;
}

@media screen and (max-width: 767px){
    .btn-width {
        width: 100%;
    }

}

.btn-success {
    color: var(--chip-bg);
    border-color: var(--w-yellow);
}


.btn-pink {
    background-color: var(--w-pink) !important;
    color: #000;
    font-weight: bold;
    padding: 6px 16px;
    text-transform: uppercase;
    border: 1px solid var(--w-pink) !important;
}

.btn-green {
    background-color: var(--w-green) !important;
    color: #fff;
    font-weight: bold;
    padding: 6px 16px;
    text-transform: uppercase;
    border: 1px solid var(--w-green) !important;
}

.btn-yellow:hover, .btn-pink:hover  {
    background-color: var(--chip-bg) !important;
    color: #fff;
    border: 1px solid var(--chip-bg) !important;
}

/* Titulek + žluté podtržení */
.page-title{
    font-weight: 800;
    position: relative;
}
.page-title::after{
    content:"";
    display:block;
    width:90px; height:4px;
    background:var(--w-yellow);
    border-radius:999px;
    margin-top:.25rem;
}

.item-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--w-yellow);
    color: var(--chip-bg);
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2px 5px;
    margin-right: 5px;
    border-radius: 70%;
    text-align: center;
    line-height: 1;
    min-width: 16px; /* Ensure it is a circle */
    height: 16px; /* Ensure it is a circle */
}

/* Pilulka „ZPĚT” */
.back-pill{
    border-radius:9999px;
    padding:.5rem .9rem;
    background:#fff;
    border:1px solid #e5e7eb;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* Seznam projektů */
.project-list{
    display:grid;
    gap:1.25rem;
}

/* Karta bez vlastního rámečku – rámeček má až tělo */
.project-card{
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Hnědý header: 1/3 šířky, oddělený „víčkem“ (10 10 0 0) */
.project-header{
    background: var(--chip-bg);
    color:#fff;
    font-weight:700;
    padding:.75rem 1.25rem;
    display:inline-flex;
    align-items:center;
    width:33.333%;
    border-radius:10px 10px 0 0; /* TL TR BR BL */
    margin:0;                    /* bez mezer nad tělem */
}

/* Tělo: rámeček přes celou šířku, zaoblení 0 10 10 10 */
.project-item{
    background: var(--body-bg);
    border:1px solid var(--bd);
    border-radius:0 10px 10px 10px; /* TL TR BR BL */
    box-shadow:0 8px 20px rgba(0,0,0,.04);
    padding:1rem 1.25rem;

    /* zachování tvého rozložení */
    display:grid;
    align-items:center;
    grid-template-columns: 1fr repeat(6, max-content) 36px 36px;
    gap:1rem;
}

/* žádná mezera mezi headerem a tělem */
.project-card > .project-header + .project-item{ margin-top:0; }

/* Responsivita – na mobilu header přes celou šířku, tělo do sloupců */
@media (max-width: 768px){
    .project-header{ width:100%; }
    .project-item{ grid-template-columns: 1fr; }
}


/* Datum vlevo */
.project-date{
    color:var(--muted);
    white-space:nowrap;
}

/* Akční tlačítka se světlým pozadím */
.project-action{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.5rem .75rem;
    border-radius:.75rem;
    text-decoration:none;
    color:#5a5149;
    background:#f3f2ef;
    border:1px solid var(--bd);
}
.project-action:hover{
    background:#eceae7;
    color:#3f3a35;
    text-decoration:none;
}

.action-label-active {
    color:var(--w-green)
}

/* Ikony vpravo (tužka/koš) */
.project-icon{
    display:grid;
    place-items:center;
    width:36px; height:36px;
    border-radius:.5rem;
    border:1px solid var(--bd);
    background:#fff;
    color:#6c6c6c;
}
.project-icon:hover{ background:#f8f7f5; color:#333; }
.project-icon.text-danger{ color:#b3261e; }
.project-icon.text-danger:hover{ background:#fff1f0; border-color:#ffc9c5; }

/* Responsivita – na mobilu skládat pod sebe, skrýt texty akcí */
@media (max-width: 992px){
    .project-item{ grid-template-columns: 1fr; gap:.75rem 1rem; }
}
@media (max-width: 576px){
    .project-item{ padding:.75rem; }
    /*.action-label{ display:none; } !* na XS zobrazíme jen ikony *!*/
}

.section-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 40px;
}
.section-title::after {
    content: "";
    display: block;
    width: 20%;
    height: 4px;
    background-color: var(--w-yellow);
    /*margin: 10px auto 0;*/
}

.text-w-green {
    color:var(--w-green);
}

.text-w-orange {
    color:var(--w-orange);
}

.text-w-red {
    color:var(--w-red);
}
.underline-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.form-control[readonly] {
    background-color: #e9ecef; /* světle šedá, bootstrap default */
    opacity: 1;
}

/* Mobile table */


.table-mobile {
    display: none; /* defaultně schované */
}

.table-mobile .table-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.table-mobile .total-card {
    background: #f8f9fa;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .table-responsive {
        display: none;
    }

    /* schovej klasickou tabulku */
    .table-mobile {
        display: block;
    }
}

/* Desktop Table */

/* ===== Wrapper pro konkrétní tabulku ===== */
.table--coffee .table {
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    overflow: hidden; /* kvůli radiusu na thead */
    border: 1px solid var(--table-border);
    border-radius: 14px;
}

/* Hlavička – hnědá lišta s radiusy */
.table--coffee thead.table-dark th {
    background: var(--coffee-900) !important;
    color: #fff;
    border: none;
    font-weight: 700;
    text-transform: none;
    padding: 0.9rem 1rem;
}
.table--coffee thead.table-dark tr th:first-child {
    border-top-left-radius: 14px;
}
.table--coffee thead.table-dark tr th:last-child {
    border-top-right-radius: 14px;
}

/* Tělo tabulky */
.table--coffee tbody td {
    vertical-align: middle;
    border-color: var(--table-border);
    padding: 0.8rem 1rem;
    font-size: 0.975rem;
}
.table--coffee tbody tr:nth-child(odd) td {
    background: #fff;
}
.table--coffee tbody tr:nth-child(even) td {
    background: var(--coffee-100);
}

/* Footer řádek uvnitř tabulky – decentní */
.table--coffee tfoot td {
    background: #fff;
    border-top: 1px solid var(--table-border);
    padding: 0.9rem 1rem;
    font-weight: 600;
}

.table--coffee td:last-child,
.table--coffee th:last-child {
    text-align: right;
}

.coffee-summary {
    margin-top: 16px;
    background: var(--coffee-900);
    color: #fff;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.coffee-summary__title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .2px;
}
.coffee-summary__value {
    font-size: 1.6rem;
    font-weight: 800;
    white-space: nowrap;
}

.table--coffee .actions {
    margin-top: 14px;
}
.table--coffee .actions .btn {
    border-radius: 999px;
}

.table--coffee tbody tr:hover td {
    filter: brightness(0.98);
}

.table--coffee .table-dark {
    --bs-table-bg: var(--coffee-900);
    --bs-table-color: #fff;
}
.table--coffee thead.table-dark th {
    background: var(--coffee-900) !important;
    color: #fff;
    border: none;
    font-weight: 700;
    text-transform: none;
    padding: 0.9rem 1rem;
    vertical-align: middle !important;
}

/* Mobile table */

@media (max-width: 900px) {
    .responsive-accordion {
        display: block;
        margin-top: 30px;
    }

    .responsive-accordion .accordion-item {
        background: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .responsive-accordion .accordion-toggle {
        background-color: #f9f9f8;
        color: #5a4c40;
        padding: 12px 16px;
        font-weight: bold;
        border: none;
        width: 100%;
        text-align: left;
        border-radius: 5px;
        cursor: pointer;
    }

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

    .item-name {
        font-weight: bold;
        padding: 0px 5px 0px 0px;
    }

    .item-price {
        font-weight: normal;
        font-size: 14px;
        margin-left: auto;
        margin-right: 8px;
    }

    .accordion-icon {
        transform: rotate(0deg);
        transition: transform 0.3s ease;
    }

    .accordion-toggle.open .accordion-icon {
        transform: rotate(180deg);
    }

    .responsive-accordion .accordion-content {
        display: none;
        padding: 12px 16px;
    }

    .responsive-accordion .accordion-content div {
        margin-bottom: 8px;
    }

    .responsive-accordion .accordion-content span {
        display: block;
        font-weight: bold;
        color: #666;
    }

    .no-vat,
    .low-vat, .no-summary,
    .assembly, .summary, .vat-switch {
        display: none;
    }

    #content {
        margin: 50px 10px 5px 0px;
    }

    #content #content-text {
        margin: 150px 0px 0px 20px !important;
    }

    .total-cost {
        padding: 20px;
    }
}

@media (min-width: 900px) {
    .responsive-accordion {
        display: none;
    }
}