:root {
    --mf-primary: #2563eb;
    --mf-primary-dark: #1d4ed8;
    --mf-primary-light: #38bdf8;
    --mf-success: #16a34a;
    --mf-danger: #dc2626;
    --mf-warning: #ca8a04;
    --mf-bg: #f8fafc;
    --mf-surface: #ffffff;
    --mf-text: #0f172a;
    --mf-muted: #64748b;
    --mf-border: #e2e8f0;
    --mf-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    --mf-radius: 22px;
    --mf-content-width: 1040px;
}

body.login-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 32px 18px;
    background:
        radial-gradient(circle at 12% 14%, rgba(56, 189, 248, 0.26), transparent 28rem),
        radial-gradient(circle at 90% 18%, rgba(37, 99, 235, 0.22), transparent 24rem),
        linear-gradient(135deg, #f8fafc 0%, #eef6ff 100%);
    color: var(--mf-text);
    font-family: 'Poppins', Arial, sans-serif;
}

.login-shell {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 28px;
    align-items: stretch;
}

.login-hero,
.login-card {
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 30px;
    box-shadow: var(--mf-shadow);
}

.login-hero {
    min-height: 520px;
    padding: clamp(28px, 4vw, 42px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    color: var(--mf-text);
    text-align: center;
    background:
        radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.18), transparent 21rem),
        linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(232, 240, 252, 0.95));
}

.login-hero:before,
.login-hero:after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.login-hero:before {
    width: 260px;
    height: 260px;
    top: -80px;
    right: -70px;
}

.login-hero:after {
    width: 150px;
    height: 150px;
    top: 110px;
    right: 120px;
}

.login-brand-pill {
    width: fit-content;
    margin-bottom: auto;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-weight: 800;
    letter-spacing: 0.02em;
}

.login-hero-logo {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: min(320px, 88%);
    max-height: 360px;
    height: auto;
    margin: 0 auto 18px;
    display: block;
    object-fit: contain;
}

.login-hero h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: white;
    font-size: clamp(36px, 5vw, 58px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: -0.06em;
    text-transform: none;
}

.login-hero p,
.login-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 430px;
    margin: 0;
    color: var(--mf-muted);
    font-size: 16px;
    line-height: 1.7;
}

.login-card {
    padding: clamp(26px, 4vw, 42px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
}

.login-card-header {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 30px;
}

.login-card-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--mf-primary-dark), var(--mf-primary-light));
    color: white;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.26);
    overflow: hidden;
}

.login-card-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.login-card h2 {
    margin: 0 0 6px;
    color: var(--mf-text);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: none;
}

.login-card p {
    color: var(--mf-muted);
    line-height: 1.5;
}

.modern-login-form {
    display: grid;
    gap: 18px;
}

.login-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--mf-text);
    font-size: 13px;
    font-weight: 850;
}

.login-field .form-control {
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--mf-border);
    border-radius: 16px;
    background: #f8fafc;
    color: var(--mf-text);
    font-size: 15px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.login-field .form-control:focus {
    border-color: rgba(37, 99, 235, 0.56);
    background: white;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

.login-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--mf-primary-dark), var(--mf-primary-light));
    color: white;
    font-weight: 900;
    letter-spacing: -0.01em;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.login-submit:hover,
.login-submit:focus {
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(37, 99, 235, 0.34);
}

.login-footnote {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--mf-border);
    font-size: 13px;
}

.login-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
}

.login-modal-content {
    width: min(390px, 100%);
    padding: 28px;
    border-radius: 24px;
    background: white;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    text-align: center;
}

.login-modal-content h3 {
    margin-bottom: 10px;
    color: var(--mf-text);
    font-size: 24px;
    font-weight: 900;
    text-transform: none;
}

.login-modal-button {
    margin-top: 18px;
    padding: 10px 20px;
    border: 0;
    border-radius: 999px !important;
    background: rgba(220, 38, 38, 0.10);
    color: var(--mf-danger);
    font-weight: 900;
}

@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-hero {
        min-height: 330px;
        padding: 28px 22px;
    }

    .login-hero-logo {
        max-width: min(250px, 78%);
        max-height: 220px;
    }
}

@media (max-width: 520px) {
    body.login-page {
        padding: 18px 12px;
    }

    .login-hero,
    .login-card {
        border-radius: 24px;
    }

    .login-card-header {
        align-items: flex-start;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    max-width: none;
    background: var(--mf-bg);
    color: var(--mf-text);
}

.welcome-hero,
.welcome-hero:before {
    min-height: 100vh;
    height: auto;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 36rem),
        linear-gradient(135deg, #f8fafc 0%, #eef6ff 100%);
}

.top-navigation-bar {
    position: sticky;
    top: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--mf-content-width)) minmax(0, 1fr);
    grid-template-areas: "brand menu user";
    gap: 10px;
    justify-content: stretch;
    align-items: flex-start;
    padding: 10px 18px 0;
    background: transparent;
}

.navbar-header {
    grid-area: brand;
    position: static;
    z-index: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    background: transparent;
}

.navbar-header a.navbar-brand,
.navbar-header a.navbar-brand:hover,
.navbar-header a.navbar-brand:focus {
    padding: 0;
    color: var(--mf-text);
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    letter-spacing: -0.02em;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.app-header-logo {
    display: block;
    width: clamp(92px, 10vw, 150px);
    height: auto;
}

.top-navigation-bar #navbarMenu.position-fixed {
    grid-area: menu;
    position: static !important;
    top: auto;
    z-index: auto;
    justify-self: center;
    width: 100%;
    max-width: var(--mf-content-width);
    margin: 0;
    box-sizing: border-box;
}

#navbarMenu.position-fixed {
    position: sticky !important;
    top: 82px;
    z-index: 1000;
    width: fit-content;
    max-width: min(1180px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 12px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.82);
    border-radius: 24px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

#navbar-menu.btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

#navbar-menu .btn {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 999px !important;
    box-shadow: none;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

#navbar-menu .btn:hover,
#navbar-menu .btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

#navbar-menu .btn-primary,
#navbar-menu .btn-secondary,
#navbar-menu .btn-info {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.16);
    color: var(--mf-primary);
}

#navbar-menu .btn-success {
    background: rgba(22, 163, 74, 0.11);
    border-color: rgba(22, 163, 74, 0.18);
    color: var(--mf-success);
}

#navbar-menu .btn-danger {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.18);
    color: var(--mf-danger);
}

#navbar-menu .btn-warning {
    background: rgba(202, 138, 4, 0.12);
    border-color: rgba(202, 138, 4, 0.20);
    color: var(--mf-warning);
}

.user-block {
    grid-area: user;
    position: static;
    width: clamp(150px, 12vw, 180px);
    min-width: 0;
    justify-self: end;
    margin-left: auto;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--mf-primary-dark), var(--mf-primary-light));
    color: white;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.user-block h4,
.user-block .countdown {
    color: white;
}

.user-block h4 {
    font-size: 14px;
    font-weight: 800;
}

.user-block .countdown {
    margin: 4px 0 8px;
    font-size: 13px;
    opacity: 0.9;
}

.user-block .logout-button {
    margin: 0;
}

.user-block .logout-button button {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border-radius: 999px;
    font-weight: 800;
}

.user-block .logout-button button:hover {
    background: rgba(255, 255, 255, 0.28);
}

.container {
    width: min(var(--mf-content-width), calc(100% - 32px));
}

.welcome-hero-txt {
    padding: 18px 0 80px;
}

section[id] {
    scroll-margin-top: 180px;
}

.shop,
.addProduct,
.modifyProduct,
.stockChecker,
.addPerson,
.stat {
    width: 100%;
    margin: 28px auto 52px;
    padding: 24px;
    bottom: auto;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--mf-border);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    opacity: 1;
}

#shopdivid {
    height: auto;
    overflow: visible;
}

.shop h2,
.addProduct h2,
.modifyProduct h2,
.stockChecker h2,
.addPerson h2,
.stat h2,
.welcome-hero-txt h2 {
    margin: 0 0 10px;
    color: var(--mf-text);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 850;
    letter-spacing: -0.04em;
    text-transform: none;
}

.shop h2:after,
.addProduct h2:after {
    display: block;
    content: '';
    width: 72px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mf-primary), var(--mf-primary-light));
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
}

.shop .row > h2,
.addProduct .row > h2,
.modifyProduct .row > h2,
.stockChecker .row > h2,
.addPerson .row > h2,
.stat .row > h2 {
    width: 100%;
    text-align: center;
}

.shop [class*='col-md-'],
.addProduct [class*='col-md-'],
.modifyProduct [class*='col-md-'],
.stockChecker [class*='col-md-'],
.addPerson [class*='col-md-'],
.stat [class*='col-md-'] {
    float: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto 14px !important;
    padding-left: 8px;
    padding-right: 8px;
}

.shop .row > div,
.addProduct .row > div,
.modifyProduct .row > div,
.stockChecker .row > div,
.addPerson .row > div,
.stat .row > div {
    width: 100%;
}

.form-control,
input[type='text'],
input[type='number'],
input[type='email'],
select,
textarea,
.select2-container--default .select2-selection--single {
    min-height: 46px;
    border: 1px solid var(--mf-border) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: var(--mf-text) !important;
    box-shadow: none !important;
    font-size: 15px;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mf-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
}

.single-model-search {
    margin-bottom: 14px;
}

.btn,
input[type='button'],
button {
    border-radius: 16px !important;
    font-weight: 800;
    text-transform: none;
}

.btn-success,
input.btn-success {
    background: var(--mf-success) !important;
    border-color: var(--mf-success) !important;
    color: white !important;
}

.btn-danger,
input.btn-danger {
    background: var(--mf-danger) !important;
    border-color: var(--mf-danger) !important;
    color: white !important;
}

.btn-outline-light,
.btn-outline-secondary {
    background: #ffffff !important;
    border: 1px solid var(--mf-border) !important;
    color: var(--mf-text) !important;
}

.addProductTable,
.addOneProductTable,
.myTable,
.statTable {
    width: 100%;
    margin: 14px auto;
    overflow-x: auto;
    text-align: left;
}

#addProductTableDiv,
#addProductTableDiv2,
#addProductPieceDiv .addOneProductTable,
#productSearchLikeDiv .addProductTable,
#editProductDiv .addProductTable,
#editPersonDiv .addProductTable,
#priceCheckDiv .addProductTable {
    padding: 16px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 22rem),
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(248, 250, 252, 0.96));
    border: 1px solid rgba(147, 197, 253, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px rgba(37, 99, 235, 0.08);
}

.addProductTable table,
table.addProductTable,
table.addOneProductTable,
table.myTable,
table.statTable,
#shoppingList,
#jsonTable,
#jsonTable2,
#jsonTableChecker,
#productSearchLikeTable {
    display: table;
    width: 100% !important;
    min-width: 680px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--mf-border);
    border-radius: 18px;
    overflow: hidden;
}

#addProductTable,
#addProductTable2,
#addProductTable3,
#productSearchLikeTable {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
}

.addProductTable table tr:first-child th,
table.addProductTable tr:first-child th,
table.addOneProductTable tr:first-child th,
table.myTable tr:first-child th,
table.statTable tr:first-child th,
#shoppingList tr:first-child th,
#jsonTable tr:first-child th,
#jsonTable2 tr:first-child th,
#jsonTableChecker tr:first-child th,
#productSearchLikeTable tr:first-child th {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #1e3a8a;
    border-bottom: 1px solid rgba(147, 197, 253, 0.24) !important;
}

.addProductTable table tr:first-child th:first-child,
table.addProductTable tr:first-child th:first-child,
table.addOneProductTable tr:first-child th:first-child,
table.myTable tr:first-child th:first-child,
table.statTable tr:first-child th:first-child,
#shoppingList tr:first-child th:first-child,
#jsonTable tr:first-child th:first-child,
#jsonTable2 tr:first-child th:first-child,
#jsonTableChecker tr:first-child th:first-child,
#productSearchLikeTable tr:first-child th:first-child {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.addProductTable table tr:first-child th:last-child,
table.addProductTable tr:first-child th:last-child,
table.addOneProductTable tr:first-child th:last-child,
table.myTable tr:first-child th:last-child,
table.statTable tr:first-child th:last-child,
#shoppingList tr:first-child th:last-child,
#jsonTable tr:first-child th:last-child,
#jsonTable2 tr:first-child th:last-child,
#jsonTableChecker tr:first-child th:last-child,
#productSearchLikeTable tr:first-child th:last-child {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.addProductTable table tr:first-child th + th,
table.addProductTable tr:first-child th + th,
table.addOneProductTable tr:first-child th + th,
table.myTable tr:first-child th + th,
table.statTable tr:first-child th + th,
#shoppingList tr:first-child th + th,
#jsonTable tr:first-child th + th,
#jsonTable2 tr:first-child th + th,
#jsonTableChecker tr:first-child th + th,
#productSearchLikeTable tr:first-child th + th {
    border-left: 1px solid rgba(147, 197, 253, 0.18) !important;
}

#addProductTable tr.addProductTable th,
#addProductTable2 tr.addProductTable th,
#addProductTable3 tr.addProductTable th,
#productSearchLikeTable tr.addOneProductTable th {
    background: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(147, 197, 253, 0.28) !important;
}

#addProductTable tr.addProductTable th:first-child,
#addProductTable2 tr.addProductTable th:first-child,
#addProductTable3 tr.addProductTable th:first-child,
#productSearchLikeTable tr.addOneProductTable th:first-child {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

#addProductTable tr.addProductTable th:last-child,
#addProductTable2 tr.addProductTable th:last-child,
#addProductTable3 tr.addProductTable th:last-child,
#productSearchLikeTable tr.addOneProductTable th:last-child {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

#addProductTable input,
#addProductTable2 input,
#addProductTable3 input,
#productSearchLikeTable input,
#jsonTable input,
#jsonTable2 input {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(147, 197, 253, 0.55) !important;
}

#addProductTable input:focus,
#addProductTable2 input:focus,
#addProductTable3 input:focus,
#productSearchLikeTable input:focus,
#jsonTable input:focus,
#jsonTable2 input:focus {
    background: #ffffff !important;
}

th,
td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--mf-border) !important;
    color: var(--mf-text);
    vertical-align: middle !important;
}

th {
    background: #f1f5f9 !important;
    color: #334155;
    font-size: 13px;
    font-weight: 850;
    text-transform: none;
}

tr:last-child th,
tr:last-child td {
    border-bottom: 0 !important;
}

#shoppingList {
    min-width: 520px;
}

#shoppingList:empty,
#jsonTableChecker:empty {
    display: none;
}

#shoppingList {
    display: block;
    min-width: 0;
    border: 0;
    background: transparent;
}

#shoppingList li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(860px, 100%);
    margin: 10px auto;
    padding: 14px 16px;
    color: var(--mf-text);
    background: white;
    border: 1px solid var(--mf-border);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

#shoppingList li button {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.18);
    border-radius: 12px !important;
}

#jsonTableChecker {
    min-width: min(680px, 100%);
}

#jsonTableChecker td:last-child {
    color: var(--mf-success);
    font-size: 20px;
    font-weight: 900;
}

.mf-top-message {
    width: min(680px, calc(100% - 32px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-top: 14px;
    padding: 14px 18px !important;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.22);
    font-weight: 850;
    text-align: center;
}

#totalAmount {
    width: min(520px, 100%);
    margin: 18px auto;
    padding: 20px;
    color: white;
    border-radius: 22px;
    background: linear-gradient(135deg, #0f172a, var(--mf-primary-dark));
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.22);
    font-size: 28px;
    font-weight: 900;
}

.cashorcard {
    gap: 14px;
    flex-wrap: wrap;
}

.cashorcardbutton,
.eladas-gomb {
    width: 150px;
    height: 112px;
    padding: 14px;
    background: white;
    border: 1px solid var(--mf-border);
    border-radius: 20px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.cashorcardbutton:hover,
.eladas-gomb:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.45);
}

.cashorcard img,
.eladas-gomb img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.dropdown-content {
    width: min(440px, 92vw);
    min-width: 260px;
    padding: 10px;
    background: white;
    border: 1px solid var(--mf-border);
    border-radius: 18px;
    box-shadow: var(--mf-shadow);
    z-index: 1200;
}

.dropdown-content select {
    width: 100% !important;
    min-height: 220px;
    border: 0 !important;
}

textarea#apiResponse,
textarea#maxBarcodeResponse {
    display: block !important;
    width: min(520px, 100%) !important;
    min-height: 150px;
    height: auto !important;
    margin: 18px auto !important;
    padding: 16px;
    resize: vertical;
    font-family: 'Poppins', sans-serif;
}

.footer-copyright {
    padding: 24px 16px;
    color: var(--mf-muted);
}

.footer-copyright a {
    color: var(--mf-muted);
    font-size: 14px;
    text-transform: none;
}

body.management-page .addProduct {
    max-width: 960px;
}

body.management-page .addProduct h2 {
    text-align: center;
}

body.management-page .addProductTable {
    max-width: 780px;
    margin: 0 auto;
}

body.management-page .addProductTable > .form-control,
body.management-page .addProductTable > .btn {
    display: block;
    width: min(430px, 100%);
    margin: 12px auto 0;
}

body.management-page table.addOneProductTable {
    min-width: 0;
    max-width: 780px;
}

body.management-page table.addOneProductTable .form-control + .form-control,
body.management-page table.addOneProductTable .form-control + input[type='checkbox'],
body.management-page table.addOneProductTable input[type='checkbox'] + label,
body.management-page table.addOneProductTable button {
    margin-top: 12px;
}

body.management-page input[type='file'].form-control {
    padding: 9px 14px;
}

#shopSearch,
#prodPriceCheck,
#modProdSearch,
#modPerSearch,
#modPerSave,
#shopSell,
#addProdOneSubmit,
#maxCustomBarcode,
#prodLikeSearch {
    width: 100%;
    text-align: center;
}

#shopSearch input,
#prodPriceCheck input,
#modProdSearch input,
#modPerSearch input,
#modPerSave input,
#addProdOneSubmit input,
#maxCustomBarcode input,
#prodLikeSearch input,
#submitAddPersonButton,
#addProductSearchButton,
#modProdSave {
    width: min(340px, 100%);
}

#shop div[style*='width: 52%'],
div[style*='width: 52%'],
div[style*='margin: 0 auto; width: 52%'] {
    width: 100% !important;
    margin: 0 auto !important;
}

#stockChecker textarea,
#maxBarcode textarea {
    margin-left: auto !important;
    margin-right: auto !important;
}

#addProducts div[style*='text-align: center; position: relative'],
#modifyProducts div[style*='text-align: center; position: relative'] {
    width: min(520px, 100%);
    margin: 0 auto;
}

.sale-panel {
    max-width: var(--mf-content-width);
}

.sale-panel-header {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-align: center;
}

.sale-header-controls {
    --sale-header-control-width: 190px;
    display: grid;
    grid-template-columns: var(--sale-header-control-width) var(--sale-header-control-width);
    align-items: end;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: 4px;
}

.sale-customer-field-header {
    width: 100%;
    text-align: left;
}

.sale-customer-field-header select {
    width: 100%;
    min-height: 42px;
}

.section-kicker {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--mf-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sale-cost-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: var(--sale-header-control-width, 190px);
    min-height: 42px;
    margin: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.06);
    color: var(--mf-text);
    font-weight: 800;
}

.sale-entry-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(110px, 150px) minmax(190px, 220px) minmax(150px, 180px);
    grid-template-areas: "barcode quantity discount submit";
    gap: 16px;
    align-items: end;
    margin: 0 auto 22px;
}

.sale-field-barcode {
    grid-area: barcode;
}

.sale-field-quantity {
    grid-area: quantity;
}

.sale-field-discount {
    grid-area: discount;
}

.sale-field-submit {
    grid-area: submit;
}

.sale-field {
    min-width: 0;
}

.sale-field label,
.sale-customer-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--mf-text);
    font-size: 13px;
    font-weight: 900;
}

.sale-field .form-control,
.sale-field .btn,
.sale-customer-field select {
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
}

.sale-field-submit {
    display: flex;
    align-items: end;
}

.sale-entry-grid #shopSearch input {
    width: 100% !important;
    min-width: 0 !important;
}

#discountSelect {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-add-button {
    min-height: 50px;
}

.sale-cart-card {
    width: 100%;
    margin: 12px auto 18px;
    padding: 18px;
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.13), transparent 24rem),
        linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.94));
}

.sale-cart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.sale-cart-header h3 {
    margin: 0;
    color: var(--mf-text);
    font-size: 20px;
    font-weight: 900;
}

.sale-cart-hint,
.sale-cart-empty {
    color: var(--mf-muted);
    font-size: 13px;
}

.sale-cart-empty {
    margin: 14px 0 2px;
    padding: 16px;
    border: 1px dashed rgba(100, 116, 139, 0.35);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
    font-weight: 800;
}

#shoppingList:not(:empty) + .sale-cart-empty {
    display: none;
}

.sale-total {
    text-align: center;
}

.sale-checkout {
    display: grid;
    grid-template-columns: minmax(240px, auto);
    gap: 16px;
    align-items: end;
    justify-content: center;
    justify-items: center;
    margin: 20px auto 30px;
}

.sale-customer-field {
    min-width: 0;
}

.sale-payment-group,
.sale-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cashorcardbutton,
.eladas-gomb {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cashorcardbutton span,
.eladas-gomb span {
    color: var(--mf-text);
    font-size: 13px;
    font-weight: 900;
}

.cashorcardbutton.is-selected {
    border-color: rgba(37, 99, 235, 0.62);
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.18);
}

.eladas-gomb {
    width: 176px;
    min-height: 120px;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.12), rgba(255, 255, 255, 0.96));
    border-color: rgba(22, 163, 74, 0.26);
}

.eladas-gomb:disabled,
.sale-add-button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.activity-log-panel {
    max-width: var(--mf-content-width);
}

.activity-log-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.activity-log-header h2 {
    margin-bottom: 0;
}

.activity-log-header h2:after {
    margin-left: 0;
}

.activity-log-list {
    display: grid;
    gap: 12px;
}

.activity-log-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mf-border);
    border-left: 5px solid var(--mf-primary);
    border-radius: 18px;
    background: white;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
}

.activity-log-item-success {
    border-left-color: var(--mf-success);
}

.activity-log-item-warning {
    border-left-color: var(--mf-warning);
}

.activity-log-time {
    color: var(--mf-primary);
    font-size: 18px;
    font-weight: 900;
    text-align: center;
}

.activity-log-title {
    color: var(--mf-text);
    font-size: 15px;
    font-weight: 900;
}

.activity-log-detail {
    margin-top: 4px;
    color: var(--mf-muted);
    font-size: 13px;
    line-height: 1.45;
}

.activity-log-type {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--mf-primary);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.activity-log-item-success .activity-log-type {
    background: rgba(22, 163, 74, 0.11);
    color: var(--mf-success);
}

.activity-log-item-warning .activity-log-type {
    background: rgba(202, 138, 4, 0.12);
    color: var(--mf-warning);
}

.activity-log-empty,
.activity-log-error,
.activity-log-loading {
    margin: 0;
    padding: 18px;
    border: 1px dashed rgba(100, 116, 139, 0.36);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.92);
    color: var(--mf-muted);
    font-weight: 850;
    text-align: center;
}

.activity-log-error {
    margin-bottom: 12px;
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(254, 242, 242, 0.92);
    color: var(--mf-danger);
}

@media (max-width: 1180px) {
    .sale-entry-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "barcode barcode"
            "quantity discount"
            "submit submit";
    }
}

@media (max-width: 991px) {
    .top-navigation-bar {
        display: grid;
        grid-template-columns: minmax(72px, 118px) minmax(0, 1fr) minmax(132px, 160px);
        grid-template-areas: "brand menu user";
        align-items: stretch;
        padding: 10px 12px 0;
    }

    .navbar-header {
        align-self: flex-start;
    }

    #navbarMenu.position-fixed {
        position: static !important;
        flex-direction: column;
        width: calc(100% - 24px);
        margin: 12px auto 0;
    }

    .top-navigation-bar #navbarMenu.position-fixed {
        grid-area: menu;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    #navbar-menu.btn-group {
        width: 100%;
    }

    .user-block {
        width: min(220px, 48vw);
        margin-left: 0;
        justify-self: end;
    }

    .shop [class*='col-md-'],
    .addProduct [class*='col-md-'],
    .modifyProduct [class*='col-md-'],
    .stockChecker [class*='col-md-'],
    .addPerson [class*='col-md-'],
    .stat [class*='col-md-'] {
        max-width: 100%;
    }

    section[id] {
        scroll-margin-top: 24px;
    }

    .sale-entry-grid,
    .sale-checkout {
        grid-template-columns: 1fr;
    }

    .sale-header-controls {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sale-entry-grid {
        grid-template-areas:
            "barcode"
            "quantity"
            "discount"
            "submit";
    }

    .sale-field-submit,
    .sale-payment-group,
    .sale-action {
        justify-content: stretch;
    }

    .sale-field-submit input,
    .sale-action .eladas-gomb {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .container {
        width: calc(100% - 20px);
    }

    .app-header-logo {
        width: min(96px, 22vw);
    }

    .user-block {
        min-width: 0;
        width: min(150px, 26vw);
        padding: 10px;
    }

    .user-block h4 {
        font-size: 12px;
    }

    .user-block .countdown {
        font-size: 12px;
    }

    .sale-header-controls {
        grid-template-columns: 1fr;
    }

    .shop,
    .addProduct,
    .modifyProduct,
    .stockChecker,
    .addPerson,
    .stat {
        padding: 18px 12px;
        border-radius: 18px;
    }

    #navbar-menu .btn {
        flex: 1 1 145px;
        white-space: normal;
    }

    #totalAmount {
        font-size: 22px;
    }

    .sale-cart-card {
        padding: 14px;
    }

    .sale-payment-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .activity-log-header,
    .activity-log-item {
        grid-template-columns: 1fr;
        justify-items: stretch;
        text-align: left;
    }

    .activity-log-time {
        text-align: left;
    }

    .activity-log-type {
        width: fit-content;
    }

    .cashorcardbutton {
        width: 100%;
        min-width: 0;
    }
}