*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --app-footer-height: 42px;
    --app-page-padding: clamp(0.75rem, 1.5vw, 1.5rem);
    --app-label-font-size: clamp(0.9rem, 0.82rem + 0.28vw, 1.04rem);
    --app-label-line-height: 1.42;
    --app-field-font-size: clamp(0.96rem, 0.86rem + 0.24vw, 1.08rem);
    --app-helper-font-size: clamp(0.82rem, 0.74rem + 0.22vw, 0.96rem);
}

html {
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
    overflow-x: hidden;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

select,
select:focus,
select:active,
select.touch-btn,
select.touch-btn:focus,
select.touch-btn:active {
    transform: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
    will-change: auto !important;
}

select option {
    font-size: 1rem;
    transform: none !important;
}

table {
    max-width: 100%;
}

main label,
main label span,
main .form-label,
main [data-field-label] {
    font-size: var(--app-label-font-size) !important;
    line-height: var(--app-label-line-height) !important;
    letter-spacing: 0 !important;
}

main label {
    font-weight: 800 !important;
}

main input,
main select,
main textarea {
    font-size: var(--app-field-font-size) !important;
    line-height: 1.35 !important;
}

main input::placeholder,
main textarea::placeholder {
    font-size: 0.95em !important;
    line-height: 1.35 !important;
}

main label + p,
main label ~ p,
main .form-help,
main [data-field-help] {
    font-size: var(--app-helper-font-size) !important;
    line-height: 1.5 !important;
}

main {
    width: 100%;
    min-height: calc(100dvh - 70px);
    min-width: 0;
    padding-bottom: calc(var(--app-footer-height) + env(safe-area-inset-bottom));
}

:fullscreen body,
:fullscreen main {
    min-height: 100dvh;
}

:-webkit-full-screen body,
:-webkit-full-screen main {
    min-height: 100dvh;
}

main > div[class*="max-w-"] {
    width: min(100%, 1760px);
}

.app-header {
    min-height: 70px;
    overflow: visible;
}

.app-header-inner {
    min-height: 70px;
    overflow: visible !important;
    position: relative;
    justify-content: flex-start !important;
    direction: rtl;
    gap: 0.75rem !important;
}

.app-brand {
    min-width: max-content;
}

.app-nav {
    min-width: 0;
    flex: 0 1 auto;
    overflow: visible;
}

.app-user-box {
    min-width: max-content;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.app-pos-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.app-pos-actions::-webkit-scrollbar {
    display: none;
}

.app-pos-invoice,
.app-pos-server,
.app-pos-btn {
    min-height: 34px;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 900;
    white-space: nowrap;
}

.app-pos-invoice,
.app-pos-server {
    padding: 0.35rem 0.65rem;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    font-size: 0.72rem;
}

.app-pos-invoice strong {
    color: #facc15;
    font-size: 1rem;
    line-height: 1;
}

.app-pos-muted {
    color: rgba(226, 232, 240, 0.78);
}

.app-pos-btn {
    padding: 0.45rem 0.65rem;
    color: #fff;
    border: 0;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    transition: transform 0.15s ease, filter 0.15s ease;
    font-size: 0.72rem;
}

.app-pos-btn:hover {
    filter: brightness(1.06);
}

.app-pos-new {
    background: #2563eb;
}

.app-pos-hold {
    background: #ea580c;
}

.app-pos-restore {
    background: #7c3aed;
}

#real_time_clock {
    color: #bfdbfe;
    letter-spacing: 0;
    font-weight: 800;
}

.app-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    width: min(420px, calc(100vw - 1.5rem));
    max-height: min(72dvh, 560px);
    overflow-y: auto;
    background: #10255f;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 18px;
    padding: 0.75rem;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.38);
    z-index: 140;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.app-more-menu.is-open {
    display: grid;
}

.app-more-menu a {
    min-height: 46px;
    padding: 0.7rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    border-radius: 14px;
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: none;
    min-width: 0;
}

.app-nav a .nav-label,
#app-more-toggle .nav-label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav a .nav-label .lang-ar,
.app-nav a .nav-label .lang-en,
#app-more-toggle .nav-label .lang-ar,
#app-more-toggle .nav-label .lang-en {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-more-menu a i {
    flex: 0 0 auto;
}

.app-more-menu a .nav-label {
    flex: 1 1 auto;
}

.app-more-menu a:hover,
.app-more-menu a.is-active {
    background: #facc15;
    color: #1e3a8a;
}

.app-more-menu a .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-footer {
    min-height: var(--app-footer-height);
}

.responsive-card,
.bg-white[class*="rounded-3xl"],
.bg-white[class*="rounded-2xl"] {
    min-width: 0;
}

.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

.pos-workspace {
    min-height: calc(100dvh - 78px);
}

.pos-side,
.pos-products {
    min-width: 0;
}

@media (min-width: 1536px) {
    main > div[class*="max-w-screen-2xl"],
    main > div[class*="max-w-[1400px]"] {
        width: min(100%, 1840px);
    }
}

@media (max-width: 1500px) {
    :root {
        --app-footer-height: 0px;
    }

    body {
        font-size: 15px;
    }

    .app-header {
        position: sticky;
        min-height: auto;
    }

    .app-header-inner {
        min-height: auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        overflow: visible;
    }

    .app-brand {
        font-size: 1.25rem !important;
        order: 1;
    }

    .app-nav {
        order: 2;
        width: auto;
        overflow: visible;
        padding-bottom: 0;
    }

    .app-pos-actions {
        order: 3;
        flex: 1 1 auto;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.15rem;
        scrollbar-width: none;
    }

    .app-pos-actions::-webkit-scrollbar {
        display: none;
    }

    .app-user-box {
        order: 4;
        margin-inline-start: auto;
    }

    .app-nav a {
        padding: 0.5rem 0.65rem;
        font-size: 0.78rem;
    }

    .app-footer {
        position: static !important;
    }

    main {
        padding-bottom: env(safe-area-inset-bottom);
    }

    main > div[class*="max-w-"] {
        padding-inline: var(--app-page-padding) !important;
    }

    .pos-workspace {
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
    }

    .pos-side,
    .pos-products {
        height: auto !important;
        max-height: none;
    }

    .pos-side {
        border-left: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    #pos_cart_container {
        max-height: 34dvh;
        min-height: 160px;
    }

    #products_grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .app-header {
        min-height: 58px;
    }

    .app-header-inner {
        min-height: 58px;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        white-space: nowrap !important;
        padding-block: 0.45rem !important;
        gap: 0.5rem !important;
        position: relative;
    }

    .app-brand {
        order: 1;
        font-size: 1.15rem !important;
    }

    .app-pos-actions {
        order: 3;
        flex: 1 1 auto;
        justify-content: flex-start;
        overflow-x: auto;
        min-width: 0;
    }

    .app-user-box {
        order: 4;
        margin-inline-start: auto;
        gap: 0.4rem !important;
    }

    .app-user-box > div {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-nav {
        display: flex !important;
        order: 2;
        width: auto !important;
        overflow: visible !important;
        padding-bottom: 0;
        white-space: nowrap !important;
    }

    .app-nav a {
        min-height: 40px;
        padding: 0.55rem 0.7rem !important;
        justify-content: center;
        font-size: 0.82rem !important;
        transform: none !important;
        min-width: 0;
    }

    .app-nav a span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-more-menu a {
        min-height: 46px;
        justify-content: flex-start;
        padding: 0.7rem 0.8rem !important;
        font-size: 0.86rem !important;
    }

    .app-more-menu {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    .app-pos-btn span {
        display: none;
    }

    .app-pos-btn {
        width: 36px;
        padding-inline: 0;
    }

    .app-pos-invoice,
    .app-pos-server {
        padding-inline: 0.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --app-label-font-size: clamp(0.98rem, 0.9rem + 0.7vw, 1.12rem);
        --app-field-font-size: clamp(1rem, 0.92rem + 0.55vw, 1.14rem);
        --app-helper-font-size: clamp(0.88rem, 0.8rem + 0.45vw, 1rem);
    }

    body {
        font-size: 14px;
    }

    main > div[class*="max-w-"] {
        margin-top: 0.5rem !important;
        padding: 0.75rem !important;
    }

    .app-header-inner {
        padding-inline: 0.6rem !important;
    }

    .app-nav a span {
        display: inline;
    }

    .bg-white[class*="rounded-3xl"],
    .bg-white[class*="rounded-2xl"],
    form[class*="rounded-3xl"],
    div[class*="rounded-3xl"] {
        border-radius: 1rem !important;
    }

    .grid {
        min-width: 0;
    }

    main label {
        display: block;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    main label span {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .app-pos-server .app-pos-muted,
    #real_time_clock {
        display: none;
    }

    #products_grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    }
}

@media (max-width: 1100px) {
    .app-header-inner {
        white-space: nowrap !important;
    }

    .app-nav {
        flex-wrap: nowrap;
        justify-content: start;
        overflow-x: hidden;
        white-space: normal !important;
    }

    .app-nav a {
        flex: 0 1 auto;
    }
}

@media (max-width: 520px) {
    .app-brand span,
    .app-user-box span {
        display: none;
    }

    .app-nav {
        gap: 0.25rem !important;
    }

    .app-nav a {
        padding: 0.45rem 0.55rem;
        font-size: 0.72rem;
    }

    .app-nav a i {
        font-size: 0.95rem !important;
    }

    .app-pos-invoice .app-pos-muted {
        display: none;
    }

    .app-nav a span,
    #app-more-toggle span {
        display: none;
    }

    .app-nav .app-more-menu a .nav-label {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .app-nav .app-more-menu a {
        justify-content: flex-start;
        text-align: start;
        width: 100%;
    }

    .app-more-menu {
        grid-template-columns: 1fr;
        inset-inline: 0;
        width: calc(100vw - 1rem);
    }

    #products_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media print {
    body {
        overflow: visible;
    }

    main {
        padding-bottom: 0;
    }
}