:root {
    --c-dark: #1e3a5f;
    --c-mid: #2d6a8a;
    --c-light: #4fa3a5;
    --c-text: #1f2d3d;
    --c-muted: #5b7083;
    --c-border: #c9d6e2;
    --c-paid: #22a06b;
    --c-paid-bg: #dcf5e7;
    --c-unpaid: #b42318;
    --c-unpaid-bg: #fdecec;
    --c-warn: #b7791f;
    --c-warn-bg: #fff4d6;
    --radius: 16px;
}

html { font-size: 15px; }
body {
    min-height: 100vh;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--c-text);
    background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-mid) 50%, var(--c-light) 100%) fixed;
}

/* ---------- top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}
.brand {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.15rem; color: var(--c-dark);
    text-decoration: none; white-space: nowrap; margin-right: 1.2rem;
}
.brand i {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    color: #fff; font-size: 1rem;
    background: linear-gradient(135deg, var(--c-dark), var(--c-mid));
}
.navbar .nav-link {
    padding: .45rem 1rem !important; border-radius: 999px;
    color: var(--c-muted); font-weight: 600;
}
.navbar .nav-link:hover { background: rgba(45, 106, 138, .1); color: var(--c-dark); }
.navbar .nav-link.active { background: var(--c-dark); color: #fff; }
.navbar-toggler { border: none; font-size: 1.7rem; color: var(--c-dark); }
.navbar-toggler:focus { box-shadow: none; }

.lang { display: inline-flex; border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; background: #fff; }
.lang a { padding: .3rem .7rem; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--c-muted); }
.lang a.on { background: var(--c-mid); color: #fff; }

.icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-grid; place-items: center;
    border: 1px solid var(--c-border); background: #fff; color: var(--c-dark);
    text-decoration: none; cursor: pointer;
}
.icon-btn:hover { background: var(--c-dark); color: #fff; }

/* ---------- page ---------- */
.page-title { font-weight: 700; color: #fff; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.page-title i { color: #fff; opacity: .9; }

.card-soft {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
}

.btn-primary {
    border: 0; border-radius: 12px; font-weight: 600;
    background: linear-gradient(135deg, var(--c-dark), var(--c-mid));
}
.btn-primary:hover { filter: brightness(1.1); background: linear-gradient(135deg, var(--c-dark), var(--c-mid)); }

.form-control, .form-select { border-radius: 12px; padding: .6rem .8rem; border-color: var(--c-border); }
.form-control:focus, .form-select:focus { border-color: var(--c-mid); box-shadow: 0 0 0 3px rgba(45, 106, 138, .2); }

/* ---------- welcome ---------- */
.welcome h1 { font-weight: 700; color: #fff; }
.welcome p { color: rgba(255, 255, 255, .85) !important; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile {
    display: flex; flex-direction: column; gap: .8rem;
    padding: 1.4rem; border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .18);
    text-decoration: none; color: var(--c-dark); font-weight: 600;
    transition: transform .15s, box-shadow .15s;
}
.tile i {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.5rem; color: #fff;
    background: linear-gradient(135deg, var(--c-dark), var(--c-mid));
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .25); color: var(--c-dark); }

/* ---------- login ---------- */
.login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; padding: 2rem; }

/* ---------- mobile ---------- */
@media (max-width: 991px) {
    .navbar-collapse { padding: .75rem 0; }
    .navbar .nav-link { text-align: left; }
    .tools { margin-top: .75rem; }
}
@media (max-width: 576px) {
    .tiles { grid-template-columns: 1fr 1fr; }
    .tile { padding: 1rem; }
}

/* ---------- settings ---------- */
.pin-card { max-width: 420px; margin: 40px auto 0; }
.wh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.wh-list li { display: flex; align-items: center; gap: .5rem; }
.icon-spacer { width: 38px; flex-shrink: 0; }
.icon-btn.danger:hover { background: var(--c-unpaid); border-color: var(--c-unpaid); color: #fff; }

/* ---------- forms & tables ---------- */
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--c-muted); }

.product-form { display: grid; grid-template-columns: 140px 1fr auto; gap: .75rem; align-items: end; }

.count { display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px;
         font-size: .8rem; background: var(--c-dark); color: #fff; vertical-align: middle; }
.search { max-width: 300px; }

.table-wrap { overflow-x: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.data-table { font-variant-numeric: tabular-nums; }
.data-table thead th { background: var(--c-dark); color: #fff; font-weight: 600; white-space: nowrap; border: 0; }
.data-table td { white-space: nowrap; }
.data-table td:nth-child(2) { white-space: normal; min-width: 200px; }
.data-table tr.editing td { background: #eef5fb; }
.data-table .actions { display: flex; gap: .4rem; justify-content: flex-end; }

.icon-btn.small { width: 32px; height: 32px; font-size: .85rem; }
.icon-spacer.small { width: 32px; }

@media (max-width: 640px) {
    .product-form { grid-template-columns: 1fr; }
    .product-form .btn { width: 100%; }
    .search { max-width: none; }
}

/* ---------- price list ---------- */
.price-form { display: grid; grid-template-columns: 220px 1fr 160px 160px auto; gap: .75rem; align-items: end; }
.form-control[readonly] { background: #f4f8fb; color: var(--c-muted); }

.history { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--c-border); }
.hist-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; margin-bottom: .6rem; }

@media (max-width: 991px) {
    .price-form { grid-template-columns: 1fr 1fr; }
    .price-form .field:nth-child(2) { grid-column: 1 / -1; order: -1; }
    .price-form .field:first-child { grid-column: 1 / -1; order: -2; }
    .price-form .btn { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
    .hist-row { grid-template-columns: 1fr 1fr; }
    .hist-row .field:last-child { grid-column: 1 / -1; }
}

.hist-modal { border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.hist-modal .modal-header { color: var(--c-dark); }
.hist-modal .data-table td { white-space: nowrap; }

/* ---------- stock ---------- */
.stock-form { display: grid; grid-template-columns: 220px 1fr 200px 120px auto; gap: .75rem; align-items: end; }

.wh-block + .wh-block { margin-top: 1.5rem; }
.wh-title { font-weight: 700; color: var(--c-dark); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem; }

.data-table tfoot td { background: #e3ebf3; font-weight: 700; color: var(--c-dark); border: 0; }

.totals { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
.total-tile { background: #fff; border-radius: 14px; padding: .9rem 1rem; border-top: 4px solid var(--c-mid); }
.total-tile span { display: block; font-size: .78rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; }
.total-tile strong { display: block; margin-top: .2rem; font-size: 1.3rem; color: var(--c-dark); font-variant-numeric: tabular-nums; }

@media (max-width: 991px) {
    .stock-form { grid-template-columns: 1fr 1fr; }
    .stock-form .field:first-child, .stock-form .field:nth-child(2) { grid-column: 1 / -1; }
    .stock-form > .d-flex { grid-column: 1 / -1; }
    .stock-form .btn { flex: 1; }
}
@media (max-width: 576px) {
    .totals { grid-template-columns: 1fr; }
}

.totals { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.total-tile span { margin-bottom: .4rem; }
.tt-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.tt-row em { font-style: normal; font-size: .85rem; color: var(--c-muted); }
.tt-row strong { font-size: 1.05rem; margin: 0; }
.total-tile.all { background: #eef3f8; border-top-color: var(--c-dark); }

/* ---------- sales ---------- */
.order-head { display: grid; grid-template-columns: 110px 180px 1fr; gap: .75rem; }

.lines { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.sale-line {
    display: grid; grid-template-columns: 230px 1fr 190px 90px 130px 130px auto;
    gap: .6rem; align-items: end; padding: .8rem; border-radius: 12px;
    background: #f4f8fb; border: 1px solid transparent;
}
.sale-line.bad { border-color: var(--c-unpaid); background: var(--c-unpaid-bg); }
.sale-line .rm { margin-bottom: 4px; }

.order-foot { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.order-total { margin-left: auto; font-size: 1.05rem; color: var(--c-muted); }
.order-total strong { color: var(--c-dark); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.data-table td.wrap { white-space: normal; min-width: 240px; }

@media (max-width: 1199px) {
    .sale-line { grid-template-columns: 1fr 1fr 1fr auto; }
    .sale-line .f-prod, .sale-line .f-desc { grid-column: span 2; }
    .sale-line .rm { grid-column: 4; grid-row: 1; }
    .sale-line .f-wh { grid-column: span 2; }
}
@media (max-width: 576px) {
    .order-head { grid-template-columns: 90px 1fr; }
    .order-head .field:last-child { grid-column: 1 / -1; }
    .sale-line { grid-template-columns: 1fr 1fr auto; }
    .sale-line .f-prod, .sale-line .f-desc, .sale-line .f-wh { grid-column: 1 / 3; }
    .sale-line .rm { grid-column: 3; grid-row: 1; }
    .order-total { margin-left: 0; width: 100%; text-align: right; }
    .order-foot .btn-primary { width: 100%; }
}

#saleForm.is-editing { box-shadow: 0 0 0 3px #f2c94c, 0 12px 36px rgba(0, 0, 0, .18); }

/* ---------- payment ---------- */
.data-table tr.unpaid td { background: var(--c-warn-bg); }
.data-table tr.paid td { background: var(--c-paid-bg); }
.data-table tr.paid td.paid-at { color: #146c43; font-weight: 600; }

.pay-check { width: 1.4rem; height: 1.4rem; cursor: pointer; margin: 0; border-color: var(--c-warn); }
.pay-check:checked { background-color: var(--c-paid); border-color: var(--c-paid); }

.total-tile.unpaid { border-top-color: var(--c-warn); background: var(--c-warn-bg); }
.total-tile.unpaid strong { color: var(--c-warn); }
.total-tile.paid { border-top-color: var(--c-paid); background: var(--c-paid-bg); }
.total-tile.paid strong { color: #146c43; }
.total-tile strong b { font-weight: 700; }
.total-tile small { display: block; color: var(--c-muted); margin-top: .15rem; }

/* payment table: narrow columns, wide description */
.pay-table { width: 100%; }
.pay-table th, .pay-table td { width: 1%; white-space: nowrap; }
.pay-table th.desc, .pay-table td.desc { width: auto; white-space: normal; min-width: 220px; }

/* ---------- reports ---------- */
.report-filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.report-filter .field { width: 180px; }

.report-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.report-tabs a {
    padding: .5rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600;
    background: rgba(255, 255, 255, .85); color: var(--c-dark);
}
.report-tabs a:hover { background: #fff; }
.report-tabs a.active { background: var(--c-dark); color: #fff; }

.report-table th, .report-table td { width: 1%; white-space: nowrap; }
.report-table th.desc, .report-table td.desc { width: auto; white-space: normal; min-width: 200px; }
.report-table tr.order-row td { background: #e3ebf3; color: var(--c-dark); }
.report-table tr.unpaid td { background: var(--c-warn-bg); }
.neg { color: var(--c-unpaid) !important; }

.totals.big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.totals.big .total-tile strong { font-size: 1.6rem; }
.total-tile.profit { border-top-color: var(--c-paid); }
.total-tile.profit strong { color: #146c43; }

.report-counts { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--c-muted); }
.report-counts b { color: var(--c-dark); }

@media (max-width: 576px) {
    .report-filter .field { width: calc(50% - .4rem); }
    .report-filter .btn { flex: 1; }
    .report-tabs a { flex: 1; text-align: center; padding: .5rem .6rem; font-size: .9rem; }
}

.totals.eur .total-tile { background: #f4f8fb; }
.totals.eur .total-tile.rate { border-top-color: var(--c-muted); }
.totals.eur .total-tile.rate strong { color: var(--c-muted); font-size: 1.2rem; }

/* paging */
.pg-hidden { display: none !important; }
.pg-more { border-radius: 999px; padding: .45rem 1.3rem; font-weight: 600; }

.pg-bar { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }