/* ============================================================
   POSWARE CSS MAP                        © 2026 J-LOGIC s.r.o.
   ============================================================
   .admin-layout-xxxxx     → admin shell (header, footer, grid)
   .shop-layout-xxxxx      → shop shell (header, footer)
   .edit-layout-xxxxx      → edit standalone layout
   --------------------------------------------
   .admin-menu-xxxxx       → admin sidebar / navigation
   .admin-xxxxx            → admin components (tables, cards)
   --------------------------------------------
   .edit-xxxxx             → edit page components
   .edit-header-xxxxx      → edit header
   .edit-body-xxxxx        → edit scroll area
   .edit-footer-xxxxx      → edit buttons
   ============================================================ */


:root {
    --admin-white: rgb(255,255,255);
    --admin-black: rgb(0,0,0);
    --admin-bg-body: #0e0e0f;
    --admin-bg-panel: #171717;
    --admin-bg-elevated: #1f1f1f;
    --admin-bg-hover: #2a2a2a;
    --admin-bg-selected: rgba(255,255,255,0.06);
    --admin-text-primary: rgb(235,235,235);
    --admin-text-secondary: rgb(200,200,200);
    --admin-text-muted: rgb(150,150,150);
    --admin-text-inverse: rgb(20,20,20);
    --admin-border: rgba(255,255,255,0.06);
    --admin-border-strong: rgba(255,255,255,0.12);
    --admin-divider: rgba(255,255,255,0.08);
      
    --admin-color-teal: rgb(26,188,156);
    --admin-color-teal-hover: rgb(36,205,170);
    --admin-color-teal-active: rgb(46,220,185);
    --admin-color-teal-disabled: rgb(20,140,120);
    --admin-color-teal-dark: rgb(22,160,133);
    --admin-color-teal-dark-hover: rgb(32,175,150);
    --admin-color-teal-dark-active: rgb(42,190,165);
    --admin-color-teal-dark-disabled: rgb(16,120,100);
   
    --admin-color-green: rgb(46,204,113);
    --admin-color-green-hover: rgb(60,215,125);
    --admin-color-green-active: rgb(75,225,140);
    --admin-color-green-disabled: rgb(34,150,85);
    --admin-color-green-dark: rgb(39,174,96);
    --admin-color-green-dark-hover: rgb(50,190,110);
    --admin-color-green-dark-active: rgb(65,205,125);
    --admin-color-green-dark-disabled: rgb(28,130,70);
 
    --admin-color-blue: rgb(52,152,219);
    --admin-color-blue-hover: rgb(70,170,235);
    --admin-color-blue-active: rgb(90,185,245);
    --admin-color-blue-disabled: rgb(38,110,160);
    --admin-color-blue-dark: rgb(41,128,185);
    --admin-color-blue-dark-hover: rgb(55,145,200);
    --admin-color-blue-dark-active: rgb(70,160,215);
    --admin-color-blue-dark-disabled: rgb(30,95,140);
    
    --admin-color-purple: rgb(155,89,182);
    --admin-color-purple-hover: rgb(170,105,200);
    --admin-color-purple-active: rgb(185,120,215);
    --admin-color-purple-disabled: rgb(110,65,130);
    --admin-color-purple-dark: rgb(142,68,173);
    --admin-color-purple-dark-hover: rgb(160,85,190);
    --admin-color-purple-dark-active: rgb(175,100,205);
    --admin-color-purple-dark-disabled: rgb(100,50,120);
    
    --admin-color-orange: rgb(243,156,18);
    --admin-color-orange-hover: rgb(255,170,35);
    --admin-color-orange-active: rgb(255,185,55);
    --admin-color-orange-disabled: rgb(180,110,12);
    --admin-color-orange-dark: rgb(211,84,0);
    --admin-color-orange-dark-hover: rgb(230,100,20);
    --admin-color-orange-dark-active: rgb(245,120,40);
    --admin-color-orange-dark-disabled: rgb(150,60,0);
    
    --admin-color-red: rgb(231,76,60);
    --admin-color-red-hover: rgb(245,95,80);
    --admin-color-red-active: rgb(255,110,95);
    --admin-color-red-disabled: rgb(170,55,45);
    --admin-color-red-dark: rgb(192,57,43);
    --admin-color-red-dark-hover: rgb(210,70,55);
    --admin-color-red-dark-active: rgb(225,85,70);
    --admin-color-red-dark-disabled: rgb(140,40,30);
    
    --admin-color-yellow: rgb(241,196,15);
    --admin-color-yellow-hover: rgb(255,210,35);
    --admin-color-yellow-active: rgb(255,225,60);
    --admin-color-yellow-disabled: rgb(180,145,10);
   
    --admin-color-gray: rgb(149,165,166);
    --admin-color-gray-hover: rgb(170,180,182);
    --admin-color-gray-active: rgb(190,200,205);
    --admin-color-gray-disabled: rgb(100,110,112);
    --admin-color-gray-dark: rgb(127,140,141);
    --admin-color-gray-dark-hover: rgb(145,155,156);
    --admin-color-gray-dark-active: rgb(165,175,176);
    --admin-color-gray-dark-disabled: rgb(90,100,102);

    --chart-visit: var(--admin-color-blue-dark);
    --chart-category: var(--admin-color-red-dark);
    --chart-item: var(--admin-color-orange-dark);
    --chart-cart: var(--admin-color-purple-dark);
    --chart-order: var(--admin-color-green-dark);

    --time-icon-filter: invert(1);

}

:root[data-theme="light"] {
    --admin-white: rgb(255,255,255);
    --admin-black: rgb(0,0,0);
    --admin-bg-body: rgb(196,200,206);
    --admin-bg-panel: rgb(206,210,216);
    --admin-bg-elevated: rgb(200,204,210);
    --admin-bg-hover: rgb(188,192,198);
    --admin-bg-selected: rgba(41,128,185,0.10);
    --admin-text-primary: rgb(22,22,22);
    --admin-text-secondary: rgb(60,60,60);
    --admin-text-muted: rgb(105,105,105);
    --admin-text-inverse: rgb(255,255,255);
    --admin-border: rgba(0,0,0,0.22);
    --admin-border-strong: rgba(0,0,0,0.32);
    --admin-divider: rgba(0,0,0,0.18);
   
    --admin-color-teal: rgb(26,188,156);
    --admin-color-teal-hover: rgb(36,205,170);
    --admin-color-teal-active: rgb(46,220,185);
    --admin-color-teal-disabled: rgb(20,140,120);
    --admin-color-teal-dark: rgb(22,160,133);
    --admin-color-teal-dark-hover: rgb(32,175,150);
    --admin-color-teal-dark-active: rgb(42,190,165);
    --admin-color-teal-dark-disabled: rgb(16,120,100);
    --admin-color-green: rgb(46,204,113);
    --admin-color-green-hover: rgb(60,215,125);
    --admin-color-green-active: rgb(75,225,140);
    --admin-color-green-disabled: rgb(34,150,85);
    --admin-color-green-dark: rgb(39,174,96);
    --admin-color-green-dark-hover: rgb(50,190,110);
    --admin-color-green-dark-active: rgb(65,205,125);
    --admin-color-green-dark-disabled: rgb(28,130,70);
    --admin-color-blue: rgb(52,152,219);
    --admin-color-blue-hover: rgb(70,170,235);
    --admin-color-blue-active: rgb(90,185,245);
    --admin-color-blue-disabled: rgb(38,110,160);
    --admin-color-blue-dark: rgb(41,128,185);
    --admin-color-blue-dark-hover: rgb(55,145,200);
    --admin-color-blue-dark-active: rgb(70,160,215);
    --admin-color-blue-dark-disabled: rgb(30,95,140);
    --admin-color-purple: rgb(155,89,182);
    --admin-color-purple-hover: rgb(170,105,200);
    --admin-color-purple-active: rgb(185,120,215);
    --admin-color-purple-disabled: rgb(110,65,130);
    --admin-color-purple-dark: rgb(142,68,173);
    --admin-color-purple-dark-hover: rgb(160,85,190);
    --admin-color-purple-dark-active: rgb(175,100,205);
    --admin-color-purple-dark-disabled: rgb(100,50,120);
    --admin-color-orange: rgb(243,156,18);
    --admin-color-orange-hover: rgb(255,170,35);
    --admin-color-orange-active: rgb(255,185,55);
    --admin-color-orange-disabled: rgb(180,110,12);
    --admin-color-orange-dark: rgb(211,84,0);
    --admin-color-orange-dark-hover: rgb(230,100,20);
    --admin-color-orange-dark-active: rgb(245,120,40);
    --admin-color-orange-dark-disabled: rgb(150,60,0);
    --admin-color-red: rgb(231,76,60);
    --admin-color-red-hover: rgb(245,95,80);
    --admin-color-red-active: rgb(255,110,95);
    --admin-color-red-disabled: rgb(170,55,45);
    --admin-color-red-dark: rgb(192,57,43);
    --admin-color-red-dark-hover: rgb(210,70,55);
    --admin-color-red-dark-active: rgb(225,85,70);
    --admin-color-red-dark-disabled: rgb(140,40,30);
    --admin-color-yellow: rgb(241,196,15);
    --admin-color-yellow-hover: rgb(255,210,35);
    --admin-color-yellow-active: rgb(255,225,60);
    --admin-color-yellow-disabled: rgb(180,145,10);
    --admin-color-gray: rgb(149,165,166);
    --admin-color-gray-hover: rgb(170,180,182);
    --admin-color-gray-active: rgb(190,200,205);
    --admin-color-gray-disabled: rgb(100,110,112);
    --admin-color-gray-dark: rgb(127,140,141);
    --admin-color-gray-dark-hover: rgb(145,155,156);
    --admin-color-gray-dark-active: rgb(165,175,176);
    --admin-color-gray-dark-disabled: rgb(90,100,102);
    --chart-visit: var(--admin-color-blue-dark);
    --chart-category: var(--admin-color-red-dark);
    --chart-item: var(--admin-color-orange-dark);
    --chart-cart: var(--admin-color-purple-dark);
    --chart-order: var(--admin-color-green-dark);
    --edit-header-height: 56px;
    --edit-footer-height: 64px;
    --time-icon-filter: invert(0);
    
}

a, .btn-link {
    color: #006bb7;
}

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

.content {
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--admin-bg-body);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}



/* ====================================================================================================
    ADMIN LAYOUT – FIXED HEADER / FOOTER (SHOP-STYLE ARCHITEKTÚRA)
    Admin layout používa rovnaký mechanizmus ako shop layout:
==================================================================================================== */
.admin-layout-root {
    margin-top: var(--header-height);
    margin-bottom: var(--footer-height);
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
    background: var(--admin-bg-body);
    color: var(--admin-text-primary);
}
/* =========================
   HEADER
========================= */
.admin-layout-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    z-index: 1000;
    background: linear-gradient( 180deg, var(--admin-bg-elevated) 0%, var(--admin-bg-panel) 100% );
    box-shadow: 0 4px 12px rgba(0,0,0,0.18), inset 0 -1px 0 rgba(255,255,255,0.08);
}
/* LEFT */
.admin-layout-header-left {
    display: flex;
    align-items: center;
}

.admin-layout-header-logo {
    height: 40px;
    width: auto;
    display: block;
}
/* RIGHT */
.admin-layout-header-right {
    display: flex;
    align-items: center;
}

.admin-layout-header-btn {
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    color: var(--admin-text-secondary);
    transition: background 0.15s ease, transform 0.08s ease;
}

    .admin-layout-header-btn .material-symbols-outlined {
        font-size: 30px;
        line-height: 1;
        color: var(--admin-text-secondary);
        font-variation-settings: 'FILL' 1, 'wght' 700, 'opsz' 42;
    }

    .admin-layout-header-btn:hover {
        background: var(--admin-bg-hover);
    }

    .admin-layout-header-btn:active {
        transform: scale(0.94);
    }

@media (max-width: 640px) {
    .admin-layout-header-right {
        gap: 2px;
    }

    .admin-layout-header-btn {
        padding: 6px;
    }
}

.admin-user-name {
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
}

.admin-user-avatar {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--admin-text-secondary);
    color: var(--admin-text-inverse);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
/* =========================
   CONTENT
========================= */
.admin-layout-content {
}


/* =========================
   FOOTER
========================= */
.admin-layout-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: linear-gradient( 0deg, var(--admin-bg-elevated) 0%, var(--admin-bg-panel) 100% );
    box-shadow: 0 -2px 6px rgba(0,0,0,0.35), inset 0 1px 0 var(--admin-divider);
}
/* ====================================================================================================
    ADMIN MENU – HLAVNÁ ADMIN NAVIGÁCIA (GRID + COLUMN + TILE LAYOUT)
    Dashboardové dlaždice pre navigáciu v administrácii systému (orders, editor, system, komunikácia…)
==================================================================================================== */
/* =========================================================
   ADMIN MENU BODY CONTENT (MEDZI HEADER / FOOTER)
========================================================= */
.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    padding: 5px 5px 15px 5px;
}
/* 📱 väčší mobil */
@media (min-width: 600px) {
    .admin-menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* đź’» notebook */
@media (min-width: 900px) {
    .admin-menu-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
/* 🖥️ desktop */
@media (min-width: 1200px) {
    .admin-menu-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1500px) {
    .admin-menu-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}
/* =========================================================
   ADMIN MENU COLUMN (VERTICAL GROUP STACK)
========================================================= */
/* =========================================================
   ADMIN MENU TILE – MODERN (FIXED)
========================================================= */

.admin-menu-tile {
    text-decoration: none;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: var(--admin-bg-elevated);
    border: 1px solid var(--admin-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    /* hover */
    .admin-menu-tile:hover {
        transform: translateY(-3px);
        border-color: var(--admin-border-strong);
        box-shadow: 0 8px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
    }

    /* active */
    .admin-menu-tile:active {
        transform: translateY(1px) scale(0.98);
        box-shadow: 0 2px 6px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
    }


/* =========================================================
   TILE IMAGE
========================================================= */

.admin-menu-tile-image {
    position: relative;
    background: var(--tile-color, var(--admin-color-red));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 2 / 1;
    background-image: linear-gradient( 135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.15) );
    transition: transform 0.18s ease, filter 0.18s ease;
}

/* hover zoom */
.admin-menu-tile:hover .admin-menu-tile-image {
    transform: scale(1.02);
    filter: brightness(1.06);
}

/* icon */
.admin-menu-tile-image .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 600;
    font-size: 72px;
    color: var(--admin-white);
    transition: transform 0.18s ease;
}

/* icon hover */
.admin-menu-tile:hover .material-symbols-outlined {
    transform: scale(1.06);
}


/* =========================================================
   TILE TEXT
========================================================= */

.admin-menu-tile-info {
    background: var(--admin-bg-elevated);
    padding: 10px 10px;
    /* ❌ odstránený border-top → robil čiary */
}

/* názov */
.admin-menu-tile-menu-name {
    color: var(--admin-text-secondary);
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

/* hover text */
.admin-menu-tile:hover .admin-menu-tile-menu-name {
    color: var(--admin-text-primary);
}


/* =========================================================
   COLOR MODIFIERS
========================================================= */

.admin-menu-tile-red {
    --tile-color: var(--admin-color-red);
}

.admin-menu-tile-green {
    --tile-color: var(--admin-color-green);
}

.admin-menu-tile-blue {
    --tile-color: var(--admin-color-blue);
}

.admin-menu-tile-purple {
    --tile-color: var(--admin-color-purple);
}

.admin-menu-tile-orange {
    --tile-color: var(--admin-color-orange);
}

.admin-menu-tile-warning {
    --tile-color: var(--admin-color-orange-dark);
}

.admin-menu-tile-dark {
    --tile-color: var(--admin-color-gray-dark);
}

.admin-menu-tile-yellow {
    --tile-color: var(--admin-color-yellow);
}

.admin-menu-tile-grey {
    --tile-color: var(--admin-color-gray-dark);
}


/* =========================================================
   MOBILE MODE – CLEAN LIST (FIXED)
========================================================= */

@media (max-width: 768px) {

    .admin-menu-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
    }

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

    .admin-menu-tile {
        width: 100%;
        flex-direction: row;
        align-items: center;
        height: 100px;
        /* 🔥 stabilita – zabraňuje glitch čiaram */
        transform: none;
    }

        .admin-menu-tile:hover {
            transform: none;
        }

        .admin-menu-tile:active {
            transform: scale(0.98);
        }

    .admin-menu-tile-image {
        width: 100px;
        height: 100%;
        aspect-ratio: unset;
        flex-shrink: 0;
    }

        .admin-menu-tile-image .material-symbols-outlined {
            font-size: 42px;
        }

    .admin-menu-tile-info {
        display: flex;
        align-items: center;
        padding: 0 12px;
        flex: 1;
    }

    .admin-menu-tile-menu-name {
        font-size: 16px;
        text-align: left;
    }
}
/* ====================================================================================================
    ADMIN PAGE – ZÁKLADNÝ LAYOUT ADMIN ROZHRANIA
    Wrapper pre celĂş admin obrazovku (ribbon + table / content body).
    Definuje základné rozloženie medzi headerom a footerom aplikácie.
==================================================================================================== */
.admin-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height) - var(--footer-height));
    overflow: hidden;
}

/* =========================================
   RIBBON BUTTON
========================================= */
.admin-ribbon-btn {
    min-width: 90px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    background: var(--admin-bg-panel);
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    color: var(--admin-text-secondary);
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.06s ease;
}

    /* hover */
    .admin-ribbon-btn:hover {
        background: var(--admin-bg-hover);
        border-color: var(--admin-border-strong);
        color: var(--admin-text-primary);
    }

    /* active */
    .admin-ribbon-btn:active {
        transform: scale(0.95);
        background: var(--admin-bg-selected);
        border-color: var(--admin-border-strong);
    }

    /* disabled */
    .admin-ribbon-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* =========================================
   ICON + TEXT
========================================= */
    .admin-ribbon-btn .material-symbols-outlined {
        font-size: 22px; /* 🔥 väčšia ikonka */
        line-height: 1;
        opacity: 0.85;
    }

    .admin-ribbon-btn span {
        font-size: 13px; /* 🔥 lepšie čitateľné */
        line-height: 1;
    }
/* =========================================
   ADMIN TEXT COLORS
========================================= */
    /* =========================================
   COLOR VARIANTS (ICON ONLY)
========================================= */

    .admin-ribbon-btn.blue .material-symbols-outlined {
        color: var(--admin-color-blue-dark);
    }

    .admin-ribbon-btn.green .material-symbols-outlined {
        color: var(--admin-color-green-dark);
    }

    .admin-ribbon-btn.red .material-symbols-outlined {
        color: var(--admin-color-red-dark);
    }

    .admin-ribbon-btn.orange .material-symbols-outlined {
        color: var(--admin-color-orange-dark);
    }

    .admin-ribbon-btn.purple .material-symbols-outlined {
        color: var(--admin-color-purple-dark);
    }

    .admin-ribbon-btn.teal .material-symbols-outlined {
        color: var(--admin-color-teal-dark);
    }

    .admin-ribbon-btn.gray .material-symbols-outlined {
        color: var(--admin-color-gray-dark);
    }

    .admin-ribbon-btn:hover .material-symbols-outlined {
        filter: brightness(1.15);
    }

/* =========================================
   ADMIN BACKGROUND COLORS
========================================= */

/* =========================================
   ADMIN RIBBON
========================================= */
.admin-ribbon {
    background: var(--admin-bg-body);
}

.admin-ribbon-scroll {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    overflow-x: auto;
    overflow-y: hidden;
}
/* =========================================
   ADMIN RIBBON ICON
========================================= */
.admin-ribbon-icon {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-size: 22px;
    line-height: 1;
}
/* =========================================
   ADMIN RIBBON TEXT
========================================= */
.admin-ribbon-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--admin-text-primary);
}


/* =========================================
   ADMIN RIBBON CONTROL
========================================= */
.admin-ribbon-control {
    height: 34px;
    display: flex;
    align-items: center;
    position: relative;
}


/* INPUT + SELECT */
.admin-ribbon-control input,
.admin-ribbon-control select {
    box-sizing: border-box;

    height: 100%;
    padding: 0 10px;

    border: 1px solid var(--admin-border);
    border-radius: 8px;

    background: var(--admin-bg-panel);
    color: var(--admin-text-primary);

    font-size: 14px;
    line-height: 1;

    outline: none;

    transition:
        background 0.12s ease,
        border-color 0.12s ease,
        box-shadow 0.12s ease;
}


/* hover */
.admin-ribbon-control input:hover,
.admin-ribbon-control select:hover {
    background: var(--admin-bg-hover);
    border-color: var(--admin-border-strong);
}


    /* focus (clean, bez glow) */
    .admin-ribbon-control input:focus,
    .admin-ribbon-control select:focus {
        border-color: var(--admin-color-blue);
        box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    }

/* =========================================
   SEARCH FIELD
========================================= */
.admin-ribbon-control.search {
    position: relative;
}

.admin-ribbon-control.search input {
    padding-left: 32px;
    width: 220px;
}

.admin-ribbon-control.search .admin-ribbon-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 16px;
    color: var(--admin-text-secondary);

    pointer-events: none;
}


/* =========================================
   SELECT + DATE
========================================= */
.admin-ribbon-control select {
    min-width: 160px;
}

.admin-ribbon-control.date input {
    min-width: 150px;
}


/* =========================================
   LABEL
========================================= */
.admin-ribbon-label {
    font-weight: 500;
    height: 34px;

    display: flex;
    align-items: center;

    font-size: 13px;
    color: var(--admin-text-secondary);

    white-space: nowrap;
}
/* ================================
   ADMIN TABLE WRAPPER
================================ */
.admin-table-wrapper {
    height: calc(100vh - var(--header-height) - var(--footer-height) - var(--ribbon-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ================================
   ADMIN TABLE BODY
================================ */
.admin-table-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* ================================
   ADMIN TABLE
================================ */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-bg-panel);
}

    /* HEADER – lepší kontrast, ale rovnaká veľkosť */
    .admin-table thead {
        position: sticky;
        top: 0;
        background: linear-gradient( to bottom, var(--admin-color-blue), var(--admin-color-blue-dark) );
        color: var(--admin-white);
        z-index: 5;
        box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    }

    .admin-table th {
        text-align: left;
        padding: 12px; /* 🔥 nechávam tvoje */
        font-weight: 600;
        white-space: nowrap;
    }

    /* ================================
   ROWS
================================ */
    .admin-table tbody tr {
        color: var(--admin-text-secondary);
        border-bottom: 1px solid var(--admin-divider);
        transition: background 0.12s ease;
    }

        .admin-table tbody tr:hover {
            background: var(--admin-bg-hover);
        }

.admin-row-selected {
    background: var(--admin-bg-selected);
}

/* ================================
   CELLS
================================ */
.admin-table td {
    padding: 12px; /* 🔥 tvoje */
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

    /* jemný kontrast prvého stĺpca */
    .admin-table td:first-child {
        color: var(--admin-text-primary);
        
    }

    

/* ================================
   VALUE COLORS (BEZ ZMENY)
================================ */
.admin-table-price {
    font-weight: 600;
    color: var(--admin-color-red-dark);
}

.admin-table-status-created {
    font-weight: 600;
    color: var(--admin-color-orange-dark);
}

.admin-table-status-accepted {
    font-weight: 600;
    color: var(--admin-color-blue-dark);
}

.admin-table-status-sent {
    font-weight: 600;
    color: var(--admin-color-purple-dark);
}

.admin-table-status-ready {
    font-weight: 600;
    color: var(--admin-color-green-dark);
}

.admin-table-status-completed {
    font-weight: 600;
    color: var(--admin-color-green-dark);
}

.admin-table-status-cancelled {
    font-weight: 600;
    color: var(--admin-color-red-dark);
}

.admin-table-msg-waiting {
    font-weight: 600;
    color: var(--admin-color-orange-dark);
}

.admin-table-msg-sent {
    font-weight: 600;
    color: var(--admin-color-green-dark);
}

.admin-table-msg-error {
    font-weight: 600;
    color: var(--admin-color-red-dark);
}

/* ================================
   IMAGE
================================ */
.admin-table img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px; /* jemné modern */
}

/* ================================
   DESKTOP COLUMN LINES
================================ */
@media (min-width: 769px) {
    .admin-table th,
    .admin-table td {
        border-right: 1px solid var(--admin-divider);
    }

        .admin-table th:last-child,
        .admin-table td:last-child {
            border-right: none;
        }
}

/* ================================
   MOBILE MODE – CLEAN (BEZ ZMENY FONTU)
================================ */
@media (max-width: 768px) {

    .admin-table-body {
        overflow-x: hidden;
        padding: 10px;
    }

    .admin-table thead {
        display: none;
    }

    .admin-table {
        display: block;
        background: transparent;
    }

        .admin-table tbody {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

            .admin-table tbody tr {
                display: block;
                background: var(--admin-bg-elevated);
                border: 1px solid var(--admin-border);
                border-radius: 12px;
                padding: 8px;
            }

        .admin-table td {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            padding: 3px 0;
            font-size: 15px;
            text-align: right;
        }

            .admin-table td::before {
                content: attr(data-label);
                font-family: inherit;
                font-size: inherit;
                font-weight: 600;
                line-height: 1.15;
                color: var(--admin-text-primary);
                text-align: left;
                white-space: nowrap;
                flex: 0 0 84px;
                max-width: 84px;
            }

            .admin-table td img,
            .admin-table td input,
            .admin-table td .material-symbols-outlined {
                margin-left: auto;
            }

        .admin-table img {
            width: 80px;
            height: 60px;
            object-fit: cover;
            border-radius: 6px;
        }
}
/* ====================================================================================================
    ADMIN EDIT – KOMPLETNÝ EDITAČNÝ FRAMEWORK (LAYOUT + FORM + TABS + TABLES + MOCKUPS)
    Používaný pre všetky edit obrazovky v administrácii (produkty, menu, doručenie, notifikácie, atď.).
    Obsahuje: header, body, grid, sekcie, form prvky, tabs, mockupy (phone/mail), edit tables a footer.
==================================================================================================== */
/* =========================================
   EDIT WRAPPER
========================================= */
.edit-layout-root {
     width: min(860px, 100%);
    height: min(920px, 100dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-body);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* =========================================
   EDIT WRAPPER
========================================= */
.edit {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--admin-bg-body);
    overflow: hidden;
    overscroll-behavior: contain;
    isolation: isolate;
}
/* =========================================
   HEADER – COMPACT
========================================= */
.edit-header {
    flex: 0 0 calc(var(--edit-header-height) - 6px); /* 🔥 jemne znížený */
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 0;
    background: linear-gradient( to bottom, var(--admin-color-blue), var(--admin-color-blue-dark) );
    
    user-select: none;
}

/* LEFT SIDE */
.edit-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* LOGO */
.edit-header-logo {
    height: 36px;
}

/* TITLE */
.edit-header-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--admin-white);
}

/* SPACER */
.edit-header-spacer {
    flex: 1;
}


/* =========================================
   CLOSE – FULL HEIGHT TILE (🔥 KIOSK STYLE)
========================================= */
.edit-header-close {
    width: 50px; /* 🔥 širší blok */
    height: 100%; /* 🔥 celá výška headeru */

    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--admin-white);
    transition: background 0.12s ease;
}

    /* HOVER – FULL RED STRIP */
    .edit-header-close:hover {
        background: var(--admin-color-red-dark);
    }

    /* ACTIVE */
    .edit-header-close:active {
        background: var(--admin-color-red);
    }

    /* ICON */
    .edit-header-close .material-symbols-outlined {
        font-size: 24px;
    }
/* =========================================
   BODY
========================================= */
/* BODY – scroll */
.edit-body {
    flex: 1 1 auto;
    overflow: auto;
    height: 100%;
    padding: 10px;
    background: var(--admin-bg-body);
}
/* =========================================
   GRID
========================================= */
.edit-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* =========================================
   SECTION – CLEAN WORK AREA
========================================= */
.edit-section {
    border: none; /* ❌ preč panel look */
    padding: 8px 0; /* menej box, viac flow */

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

   


/* =========================================
   TITLES
========================================= */
.edit-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--admin-text-primary);
}

.edit-title-right-new {
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-color-orange-dark);
    text-align: right;
}

.edit-title-right-returning {
    font-size: 15px;
    font-weight: 700;
    color: var(--admin-color-green-dark);
    text-align: right;
}


/* =========================================
   EDIT ROWS (nechávam tvoju logiku)
========================================= */
.edit-row {
    display: grid;
    gap: 10px; /* 🔥 jemne menej */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.edit-row-3-1 {
    grid-template-columns: 1fr 1fr 1fr;
}

.edit-row-2-1 {
    grid-template-columns: 2fr 1fr;
}

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


/* =========================================
   EDIT TABS CONTAINER
========================================= */
.edit-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--admin-divider);
    background: var(--admin-bg-panel);
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* DESKTOP – scrollbar skryť */
@media (min-width: 769px) {
    .edit-tabs {
        scrollbar-width: none;
    }

        .edit-tabs::-webkit-scrollbar {
            display: none;
        }
}

/* MOBILE – scrollbar */
@media (max-width: 768px) {
    .edit-tabs::-webkit-scrollbar {
        height: 6px;
    }

    .edit-tabs::-webkit-scrollbar-thumb {
        background: var(--admin-border-strong);
        border-radius: 4px;
    }
}

/* =========================================
   TAB BUTTON
========================================= */
.edit-tab {
    flex: 1 1 0;
    min-width: 160px;
    padding: 15px 18px 25px 18px;
    line-height: 1;
    border: none;
    border-right: 1px solid var(--admin-border);
    background: transparent;
    font-weight: 600;
    font-size: 15px;
    color: var(--admin-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.12s ease, background 0.12s ease;
}

    /* hover */
    .edit-tab:hover {
        background: var(--admin-color-blue-dark);
        color: var(--admin-white);
    }

    /* underline – center expand + full width */
    .edit-tab::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 2px;
        background: var(--admin-color-blue-dark);
        transform: translateX(-50%);
        transition: width 0.22s ease;
    }

    /* active */
    .edit-tab.active::after {
        width: 100%;
    }

    /* active */
    .edit-tab.active {
        color: var(--admin-text-primary);
        background: var(--admin-bg-elevated);
    }

        .edit-tab.active::after {
            background: var(--admin-color-blue-dark);
        }

    /* last bez border */
    .edit-tab:last-child {
        border-right: none;
    }
/* =========================================
   TAB PAGE
========================================= */
.edit-tab-page {
    display: none;
    height: 100%;
}

    .edit-tab-page.active {
        display: block;
    }
/* =========================================
   FORM GROUP
========================================= */
.edit-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--admin-text-secondary);
}
/* =========================================
   INPUTS – CLEAN (BASE)
========================================= */
.edit-input,
.edit-textarea,
.edit-select,
.edit-select-phone {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background: var(--admin-bg-panel);
    color: var(--admin-text-primary);
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.12s ease, background 0.12s ease;
}

/* špecifická šírka pre phone select */
.edit-select-phone {
    width: 120px;
}

    /* =========================================
   HOVER / FOCUS
========================================= */
    .edit-input:hover,
    .edit-textarea:hover,
    .edit-select:hover,
    .edit-select-phone:hover {
        border-color: var(--admin-border-strong);
        background: var(--admin-bg-hover);
    }

    .edit-input:focus,
    .edit-textarea:focus,
    .edit-select:focus,
    .edit-select-phone:focus {
        outline: none;
        border-color: var(--admin-color-blue);
        background: var(--admin-bg-elevated);
    }

    /* =========================================
   DISABLED
========================================= */
    .edit-input:disabled,
    .edit-textarea:disabled,
    .edit-select:disabled,
    .edit-select-phone:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* =========================================
   TEXTAREA
========================================= */
.edit-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.4;
}

.edit-code-container {
    height: 500px;
    min-height: 500px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    overflow: hidden;
}


.monaco-editor-background {
    background-color: var(--admin-bg-panel) !important;
}
.monaco-editor .margin {
    background-color: var(--admin-bg-panel) !important;
}

.monaco-editor .view-overlays .current-line {
    background-color: var(--admin-bg-hover) !important;
    border: none !important;
}

.monaco-editor .line-numbers.active-line-number {
    color: var(--color-red-dark) !important;
    font-weight: 600;
}



#terms-editor {
    height: 100%;
}
#privacy-editor {
    height: 100%;
}
#cookies-editor {
    height: 100%;
}
#contact-editor {
    height: 100%;
}
#template-editor {
    height: 100%;
}
#out-mail-template-editor {
    height: 100%;
}
#mail-template-editor {
    height: 100%;
}


.edit-textarea-code {
    resize: vertical;
    min-height: 80px;
    font-family: 'Roboto Mono', monospace;
}

/* =========================================
   NOTE TEXTAREA (highlight)
========================================= */
.edit-textarea-note {
    font-weight: 600;
    color: var(--admin-black);
    background: var(--admin-color-yellow);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* =========================================
   STATUS COLORS (LEN TEXT – OK)
========================================= */
.edit-input-status-created {
    font-weight: 600;
    color: var(--admin-color-orange-dark);
}

.edit-input-status-accepted {
    font-weight: 600;
    color: var(--admin-color-blue-dark);
}

.edit-input-status-sent {
    font-weight: 600;
    color: var(--admin-color-purple);
}

.edit-input-status-completed {
    font-weight: 600;
    color: var(--admin-color-green-dark);
}

.edit-input-status-cancelled {
    font-weight: 600;
    color: var(--admin-color-red-dark);
}


/* =========================================
   EDIT SEARCH – CLEAN
========================================= */
.edit-search {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background: var(--admin-bg-elevated);
    padding: 6px 8px;
    transition: border-color 0.12s ease, background 0.12s ease;
}

    /* 🔥 hover */
    .edit-search:hover {
        border-color: var(--admin-border-strong);
        background: var(--admin-bg-hover);
    }

    /* 🔥 focus – NA CELÝ BOX (dôležité) */
    .edit-search:focus-within {
        border-color: var(--admin-color-blue);
        background: var(--admin-bg-elevated);
    }


/* =========================================
   INPUT
========================================= */
.edit-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    font-family: inherit;
    color: var(--admin-text-primary);
}

    .edit-search-input:focus {
        outline: none;
    }

    /* placeholder jemnejší */
    .edit-search-input::placeholder {
        color: var(--admin-text-muted);
    }


/* =========================================
   ICON (lupa)
========================================= */
.edit-search-icon {
    font-size: 18px;
    color: var(--admin-text-muted);
}


/* =========================================
   CLEAR BUTTON
========================================= */
.edit-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    color: var(--admin-text-muted);
    transition: color 0.12s ease, background 0.12s ease;
}

    .edit-search-clear:hover {
        color: var(--admin-color-red-dark);
        background: rgba(255,255,255,0.08);
    }

    /* active */
    .edit-search-clear:active {
        background: rgba(255,255,255,0.12);
    }
/* =========================================
   EDIT GROUP
========================================= */
.edit-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* row */
.edit-group-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

    /* input fill */
    .edit-group-row .edit-input {
        flex: 1;
    }


/* =========================================
   COLOR INPUT (zjednotenĂ˝ s inputmi)
========================================= */
.edit-color {
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    background: var(--admin-bg-elevated);
    color: var(--admin-text-primary);
    min-height: 33px;
    height: 100%;
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
    padding: 2px 4px;
}

    /* hover / focus – rovnaké ako inputs */
    .edit-color:hover {
        border-color: var(--admin-border-strong);
        background: var(--admin-bg-hover);
    }

    .edit-color:focus {
        outline: none;
        border-color: var(--admin-color-blue);
    }


/* =========================================
   TIME INPUT
========================================= */
.edit-input[type="time"] {
    height: 33px;
    padding: 4px 6px;
    width: auto;
    min-width: 90px;
    display: flex;
    align-items: center;
}

    /* icon */
    .edit-input[type="time"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.7;
        filter: var(--time-icon-filter);
    }

        .edit-input[type="time"]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }


/* =========================================
   CHECKBOX – INLINE + LEFT ALIGN
========================================= */
/* =========================================
   CHECKBOX – RESET NA FUNKČNÝ STAV
========================================= */
.edit-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    color: var(--admin-text-primary);
}

/* input */
.edit-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
}
/* =========================================
   PHONE MOCKUP (FRAME ALWAYS DARK – LIGHTER)
========================================= */
.edit-phone {
    margin: 0 auto;
    width: 260px;
    min-height: 540px;
    background: rgb(45,45,50);
    border-radius: 38px;
    padding: 12px;
    position: relative;
    box-shadow: 0 8px 20px rgba(0,0,0,0.22);
    border: 1px solid var(--border-strong);
}
/* NOTCH – SLIGHTLY LIGHTER DARK */
.edit-phone-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: rgb(32,32,36);
    border-radius: 18px;
    z-index: 5;
}
/* SCREEN – STILL THEME BASED */
.edit-phone-screen {
    width: 100%;
    height: 540px;
    background: var(--admin-bg-body);
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    .edit-phone-screen::after {
        content: "";
        height: 12px;
        width: 100%;
        display: block;
    }
/* CONTENT */
.edit-phone-content {
    padding: 16px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
/* MESSAGE BUBBLE */
.edit-phone-bubble {
    max-width: 75%;
    background: var(--admin-color-blue-dark);
    color: var(--admin-white);
    padding: 10px 14px;
    border-radius: 18px 18px 4px 18px;
    font-size: 15px;
    line-height: 1.35;
    word-break: break-word;
}
/* =========================================
   EDIT PICTURE – CLEAN SYSTEM STYLE
========================================= */
.edit-picture {
    display: flex;
    justify-content: center;
}

.edit-picture-box {
    margin: auto;
    width: 100%;
    max-width: 420px;
    height: 220px;
    border: 1px solid var(--admin-border);
    border-radius: 8px; /* 🔥 zjednotenie s inputmi */

    background: var(--admin-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    /* hover */
    .edit-picture-box:hover {
        background: var(--admin-bg-hover);
        border-color: var(--admin-border-strong);
    }

    /* active – jemné, nie "tile" efekt */
    .edit-picture-box:active {
        transform: translateY(1px);
    }

/* placeholder */
.edit-picture-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: var(--admin-text-secondary);
}

.edit-picture-icon {
    font-size: 36px;
    opacity: 0.7;
}

/* image */
.edit-picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hidden input */
.edit-picture-input {
    display: none;
}


/* =========================================
   EDIT QR
========================================= */
.edit-qr {
    display: flex;
    justify-content: center;
}

.edit-qr-box {
    margin: auto;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--admin-border);
    border-radius: 8px; /* 🔥 rovnaký radius */

    background: var(--admin-bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    overflow: hidden;
    transition: background 0.12s ease, border-color 0.12s ease;
}

    .edit-qr-box:hover {
        background: var(--admin-bg-hover);
        border-color: var(--admin-border-strong);
    }

/* placeholder */
.edit-qr-placeholder {
    width: 100%;
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--admin-text-secondary);
    text-align: center;
}

.edit-qr-icon {
    font-size: 40px;
    opacity: 0.7;
}

.edit-qr-action {
    margin-top: 10px;
}

/* qr code */
.edit-qr-code {
    width: 88%;
    height: 88%;
    background: #fff;
    padding: 10px;
    border-radius: 6px; /* 🔥 jemné zaoblenie aj tu */
}

    .edit-qr-code svg {
        display: block;
        width: 100%;
        height: 100%;
    }
/* =========================================================
   EDIT MAIL MOCKUP – COLOR FIX
========================================================= */
.edit-mail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* BODY – 🔥 odstránený tvrdý prechod */
.edit-mail-body {
    flex: 1;
    overflow: auto;
    font-size: 15px;
    line-height: 1.5;
}

/* MAIL CONTENT */
.edit-mail-content {
    background: #ffffff;
    color: #000000;
    padding: 20px;
    max-width: 600px;
    margin: 8px auto 16px auto; /* 🔥 malý odstup hore */

    border-radius: 6px;
    /* 🔥 dôležité – oddelenie od dark bg */
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

    /* heading */
    .edit-mail-content h2 {
        margin-top: 0;
        font-size: 20px;
    }

    /* table */
    .edit-mail-content table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 12px;
    }

    .edit-mail-content th,
    .edit-mail-content td {
        border: 1px solid rgba(0,0,0,0.12);
        padding: 8px;
        font-size: 15px;
    }

    .edit-mail-content th {
        background: rgba(0,0,0,0.05);
        text-align: left;
    }
/* =========================================
   TABLE WRAPPER
========================================= */
.edit-table-wrapper {
    overflow: auto;
    border: 1px solid var(--admin-border);
    border-radius: 8px; /* 🔥 zjednotenie s UI */

    background: var(--admin-bg-panel);
}


/* =========================================
   TABLE
========================================= */
.edit-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-bg-panel);
}


    /* =========================================
   HEADER
========================================= */
    .edit-table thead th {
        position: sticky;
        top: 0;
        z-index: 10;
        background: linear-gradient( to bottom, var(--admin-color-blue), var(--admin-color-blue-dark) );
        box-shadow: 0 4px 12px rgba(0,0,0,0.18); /* jemné oddelenie */
    }

    .edit-table th {
        padding: 8px;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
        color: var(--admin-white);
        border-bottom: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    /* =========================================
   CELLS
========================================= */
    .edit-table td {
        padding: 8px;
        font-weight: 400;
        font-size: 15px;
        border-bottom: 1px solid var(--admin-divider);
        border-right: 1px solid var(--admin-divider); /* 🔥 FIX */
    }

        /* poslednĂ˝ stÄşpec */
        .edit-table th:last-child,
        .edit-table td:last-child {
            border-right: none;
        }


    /* =========================================
   ROWS
========================================= */
    .edit-table tbody tr {
        color: var(--admin-text-secondary);
    }

        .edit-table tbody tr:hover {
            background: var(--admin-bg-hover);
        }


/* =========================================
   CHECKBOX COLUMN
========================================= */
.edit-table-checkbox {
    width: 40px;
    text-align: center;
    padding: 0;
}

    .edit-table-checkbox label {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 8px;
    }

/* =========================================
   FOOTER – CLEAN
========================================= */
.edit-footer {
    flex: 0 0 var(--edit-footer-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px;
    border-top: 1px solid var(--admin-border);
    background: var(--admin-bg-panel);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}


/* =========================================
   BUTTONS – CLEAN
========================================= */
.edit-btn {
    min-width: 140px;
    height: 50px;
    padding: 0 16px; /* 🔥 fix – bolo 20px + height = prehnané */

    border: 1px solid var(--admin-border);
    border-radius: 8px; /* 🔥 zjednotenie */

    background: var(--admin-bg-elevated);
    color: var(--admin-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

@media (max-width: 768px) {
    .edit-footer {
        padding: 0 12px;
    }

    .edit-footer > .edit-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .edit-footer > .edit-btn:only-child {
        width: 100%;
        flex-basis: 100%;
    }
}

    /* hover */
    .edit-btn:hover {
        background: var(--admin-bg-hover);
        border-color: var(--admin-border-strong);
    }

    /* active */
    .edit-btn:active {
        transform: scale(0.96);
    }

    /* disabled */
    .edit-btn:disabled {
        cursor: not-allowed;
        background: var(--admin-bg-elevated);
        color: var(--admin-text-muted);
        border-color: var(--admin-border);
    }


/* =========================================
   COLOR VARIANTS (NECHÁVAM TVOJU LOGIKU)
========================================= */
.edit-btn-primary {
    background: var(--admin-color-blue-dark);
    color: var(--admin-white);
}

    .edit-btn-primary:hover {
        background: var(--admin-color-blue-hover);
    }

.edit-btn-secondary {
    background: var(--admin-bg-elevated);
    color: var(--admin-text-primary);
}

    .edit-btn-secondary:hover {
        background: var(--admin-bg-hover);
    }

/* green */
.edit-btn-green {
    background: var(--admin-color-green-dark);
    color: var(--admin-white);
}

    .edit-btn-green:not(:disabled):hover {
        background: var(--admin-color-green-dark-hover);
    }

/* red */
.edit-btn-red {
    background: var(--admin-color-red-dark);
    color: var(--admin-white);
}

    .edit-btn-red:not(:disabled):hover {
        background: var(--admin-color-red-dark-hover);
    }

/* blue */
.edit-btn-blue {
    background: var(--admin-color-blue-dark);
    color: var(--admin-white);
}

    .edit-btn-blue:not(:disabled):hover {
        background: var(--admin-color-blue-dark-hover);
    }

/* purple */
.edit-btn-purple {
    background: var(--admin-color-purple-dark);
    color: var(--admin-white);
}

    .edit-btn-purple:not(:disabled):hover {
        background: var(--admin-color-purple-dark-hover);
    }

/* =========================================================
   EDIT ORDER TABLE
========================================================= */
.edit-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--admin-bg-panel);
}

    /* ======================
   HEADER
====================== */
    .edit-order-table thead {
        background: var(--admin-bg-panel);
        box-shadow: none;
    }

    .edit-order-table tbody,
    .edit-order-table tfoot {
        background: var(--admin-bg-panel);
    }

.edit-order-thead-name,
.edit-order-thead-price {
    padding: 6px 16px 10px 16px;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    color: var(--admin-text-secondary);
    border-bottom: 1px solid var(--admin-divider);
}

.edit-order-thead-name {
    text-align: left;
}

.edit-order-thead-price {
    text-align: right;
    white-space: nowrap;
}

/* ceny nech su ciste a bez modreho byrokratickeho plotu */
.edit-order-main-price,
.edit-order-extra-price,
.edit-order-total-price {
    border-left: none;
    text-align: right;
    white-space: nowrap;
    color: var(--admin-color-red-dark);
}


/* ======================
   MAIN
====================== */
.edit-order-main-name,
.edit-order-main-price {
    padding: 8px 16px;
    font-size: 15px;
    border-top: 1px solid var(--admin-divider);
}

.edit-order-main-name {
    font-weight: 600;
    color: var(--admin-text-primary);
    text-align: left;
}

.edit-order-main-price {
    font-weight: 600;
}


/* ======================
   EXTRA
====================== */
.edit-order-extra-name {
    padding: 8px 16px 8px 24px;
    font-size: 15px;
    color: var(--admin-text-secondary);
    text-align: left;
    border-bottom: none;
    border-top: none;
}

.edit-order-extra-price {
    padding: 8px 16px;
    font-size: 15px;
    border-bottom: none;
    border-top: none;
}

/* ======================
   GROUP DIVIDER
====================== */
.edit-order-divider {
    height: 10px; /* 🔥 menej „diera“ */
    border-top: 1px solid var(--admin-border);
}



/* ======================
   TOTAL
====================== */
.edit-order-total-name,
.edit-order-total-price {
    padding: 12px 16px 16px 16px;
    font-weight: 700;
    font-size: 17px;
    border-top: 1px solid var(--admin-divider);
}

.edit-order-total-name {
    text-align: left;
    color: var(--admin-text-primary);
}

.edit-order-total-price {
    text-align: right;
    color: var(--admin-color-red-dark);
}
/* =========================================
   EDIT MAP
========================================= */
.edit-map-wrapper {
    width: 100%;
    height: 320px;
    border: 1px solid var(--admin-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--admin-bg-panel);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.edit-map {
    width: 100%;
    height: 100%;
    border: 0;
}
/* =========================================
   EDIT HTML EDITOR
========================================= */
.edit-editor {
    margin-top: 8px;
    border: 1px solid var(--admin-border);
    border-radius: 8px; /* 🔥 zjednotenie */

    background: var(--admin-bg-elevated);
    overflow: hidden;
}

/* =========================================
   TOOLBAR
========================================= */
.edit-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--admin-divider);
    background: var(--admin-bg-panel); /* 🔥 oddelenie od editora */
}


/* =========================================
   BUTTON
========================================= */
.edit-editor-btn {
    background: transparent;
    border: 1px solid transparent; /* 🔥 menej boxy */
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 14px; /* 🔥 jemne menšie = toolbar feel */
    font-weight: 600;
    cursor: pointer;
    color: var(--admin-text-secondary);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

    /* hover */
    .edit-editor-btn:hover {
        background: var(--admin-bg-hover);
        border-color: var(--admin-border);
        color: var(--admin-text-primary);
    }

    /* active */
    .edit-editor-btn:active {
        transform: translateY(1px);
        background: var(--admin-bg-selected);
    }
/* =========================================
   EDIT ORDER ACTIONS (NO SIDE EFFECTS)
========================================= */
.edit-order-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto; /* 🔥 pricapí na spodok sekcie */
}
/* base row */
.edit-order-actions-row {
    display: grid;
    gap: 8px;
}
/* 1-3-1 */
.edit-order-actions-row-1-3-1 {
    grid-template-columns: 1fr 3fr 1fr;
}
/* 1-1 */
.edit-order-actions-row-1-1 {
    grid-template-columns: 1fr 1fr;
}
/* single */
.edit-order-actions-row-1 {
    grid-template-columns: 1fr;
}
/* 🔥 fix pre mobile (critical) */
.edit-order-actions .edit-btn {
    min-width: 0;
}
/* hlavné tlačidlo */
.edit-order-actions-fill {
    flex: 2; /* 🔥 viac priestoru */
    min-width: 0;
}
/* + / - */
.edit-order-actions-step {
    flex: 1;
    max-width: 48px; /* drží ich malé */
}

/* ================================`r`n   PRICE
================================ */
.admin-dashboard-table-price {
    font-weight: 600;
    color: var(--admin-color-red-dark);
}


/* ================================
   ALIGNMENT
================================ */
.admin-table-left {
    text-align: left;
}

.admin-table-center {
    text-align: center;
}

.admin-table-right {
    text-align: right;
}