/* SheebPos — site.css: UiMotion animations + dense POS tables only (see project-compliance-gate.mdc) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

* {
    font-family: 'Cairo', sans-serif;
}

/* Blazor error UI */
#blazor-error-ui {
    background: #fef3c7;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.dark #blazor-error-ui { background: #78350f; color: #fef3c7; }

/* Lock background scroll while a modal dialog is open */
html.dialog-open,
html.dialog-open body {
    overflow: hidden;
}

/* Blazor EditContext — invalid field border */
input.invalid,
select.invalid,
textarea.invalid {
    border-color: rgb(239 68 68) !important;
    box-shadow: 0 0 0 1px rgb(239 68 68) !important;
}
input.invalid:focus,
select.invalid:focus,
textarea.invalid:focus {
    border-color: rgb(239 68 68) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

/* Thin scrollbar (pseudo-elements — not in Tailwind build) */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.dark .scrollbar-thin {
    scrollbar-color: #475569 transparent;
}
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #475569; }

/* ─── UiMotion — keyframes & animation classes ─── */
@keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up { animation: slide-up 0.3s ease-out; }

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.35s ease-out; }

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.3s ease-out; }

@keyframes dashboard-kpi-in {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bar-grow {
    from { transform: scaleY(0); opacity: 0.5; }
    to { transform: scaleY(1); opacity: 1; }
}
.animate-bar-grow { animation: bar-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; transform-origin: bottom; }

@keyframes nav-submenu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-modal-in { animation: modalScaleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

.dashboard-page-enter { animation: fade-in 0.5s ease-out both; }

.dashboard-kpi-enter {
    animation: dashboard-kpi-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dashboard-kpi-enter:nth-child(1) { animation-delay: 0.05s; }
.dashboard-kpi-enter:nth-child(2) { animation-delay: 0.12s; }
.dashboard-kpi-enter:nth-child(3) { animation-delay: 0.19s; }
.dashboard-kpi-enter:nth-child(4) { animation-delay: 0.26s; }

.dashboard-section-enter { animation: fade-in-up 0.55s ease-out 0.3s both; }
.dashboard-actions-enter { animation: fade-in-up 0.55s ease-out 0.45s both; }

.dashboard-chart-col:nth-child(1) .animate-bar-grow { animation-delay: 0.15s; }
.dashboard-chart-col:nth-child(2) .animate-bar-grow { animation-delay: 0.22s; }
.dashboard-chart-col:nth-child(3) .animate-bar-grow { animation-delay: 0.29s; }
.dashboard-chart-col:nth-child(4) .animate-bar-grow { animation-delay: 0.36s; }
.dashboard-chart-col:nth-child(5) .animate-bar-grow { animation-delay: 0.43s; }
.dashboard-chart-col:nth-child(6) .animate-bar-grow { animation-delay: 0.5s; }
.dashboard-chart-col:nth-child(7) .animate-bar-grow { animation-delay: 0.57s; }

.mgmt-row-enter { animation: fade-in-up 0.35s ease-out both; }
.mgmt-row-enter:nth-child(1) { animation-delay: 0.02s; }
.mgmt-row-enter:nth-child(2) { animation-delay: 0.05s; }
.mgmt-row-enter:nth-child(3) { animation-delay: 0.08s; }
.mgmt-row-enter:nth-child(4) { animation-delay: 0.11s; }
.mgmt-row-enter:nth-child(5) { animation-delay: 0.14s; }
.mgmt-row-enter:nth-child(6) { animation-delay: 0.17s; }
.mgmt-row-enter:nth-child(7) { animation-delay: 0.2s; }
.mgmt-row-enter:nth-child(8) { animation-delay: 0.23s; }

.nav-submenu-panel { animation: nav-submenu-in 0.28s ease-out; transform-origin: top; }

.nav-subitem-enter { animation: fade-in-up 0.22s ease-out both; }
.nav-subitem-delay-1 { animation-delay: 0.03s; }
.nav-subitem-delay-2 { animation-delay: 0.06s; }
.nav-subitem-delay-3 { animation-delay: 0.09s; }
.nav-subitem-delay-4 { animation-delay: 0.12s; }
.nav-subitem-delay-5 { animation-delay: 0.15s; }
.nav-subitem-delay-6 { animation-delay: 0.18s; }
.nav-subitem-delay-7 { animation-delay: 0.21s; }
.nav-subitem-delay-8 { animation-delay: 0.24s; }

.motion-stagger-item { animation: fade-in-up 0.4s ease-out both; }
.motion-stagger-item:nth-child(1) { animation-delay: 0ms; }
.motion-stagger-item:nth-child(2) { animation-delay: 55ms; }
.motion-stagger-item:nth-child(3) { animation-delay: 110ms; }
.motion-stagger-item:nth-child(4) { animation-delay: 165ms; }
.motion-stagger-item:nth-child(5) { animation-delay: 220ms; }
.motion-stagger-item:nth-child(6) { animation-delay: 275ms; }
.motion-stagger-item:nth-child(7) { animation-delay: 330ms; }
.motion-stagger-item:nth-child(8) { animation-delay: 385ms; }

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in,
    .animate-fade-in-up,
    .animate-slide-up,
    .animate-modal-in,
    .animate-bar-grow,
    .motion-stagger-item,
    .dashboard-page-enter,
    .dashboard-kpi-enter,
    .dashboard-section-enter,
    .dashboard-actions-enter,
    .mgmt-row-enter,
    .nav-submenu-panel,
    .nav-subitem-enter {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ─── POS — dense tables & transaction layout ─── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    margin: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.pos-totals-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .pos-totals-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
}
.pos-total-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.9);
    min-height: 4.5rem;
}
.dark .pos-total-box {
    border-color: rgba(71, 85, 105, 0.8);
    background: rgba(15, 23, 42, 0.6);
}
.pos-total-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.02em;
}
.dark .pos-total-label { color: #94a3b8; }
.pos-total-value {
    font-size: 1.375rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: #0f172a;
}
@media (min-width: 640px) {
    .pos-total-value { font-size: 1.5rem; }
}
.dark .pos-total-value { color: #f1f5f9; }
.pos-total-box--net {
    border-color: rgba(37, 99, 235, 0.45);
    background: linear-gradient(to bottom, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.98));
}
.dark .pos-total-box--net {
    border-color: rgba(96, 165, 250, 0.45);
    background: linear-gradient(to bottom, rgba(30, 58, 138, 0.35), rgba(15, 23, 42, 0.85));
}
.pos-total-box--net .pos-total-value {
    font-size: 1.625rem;
    color: #2563eb;
}
@media (min-width: 640px) {
    .pos-total-box--net .pos-total-value { font-size: 1.875rem; }
}
.dark .pos-total-box--net .pos-total-value { color: #60a5fa; }
.pos-total-box--paid .pos-total-value { color: #059669; }
.dark .pos-total-box--paid .pos-total-value { color: #34d399; }
.pos-total-box--due .pos-total-value { color: #d97706; }
.dark .pos-total-box--due .pos-total-value { color: #fbbf24; }
.pos-total-box--change .pos-total-value { color: #7c3aed; }
.dark .pos-total-box--change .pos-total-value { color: #a78bfa; }

.pos-totals-compact {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.375rem;
}
.pos-total-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.85);
    min-height: 3.25rem;
}
.dark .pos-total-compact {
    border-color: rgba(71, 85, 105, 0.7);
    background: rgba(15, 23, 42, 0.55);
}
.pos-total-compact-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.2;
}
.dark .pos-total-compact-label { color: #94a3b8; }
.pos-total-compact-value {
    font-size: 1.125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: #0f172a;
}
.dark .pos-total-compact-value { color: #f1f5f9; }
.pos-total-compact--net {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(239, 246, 255, 0.9);
}
.dark .pos-total-compact--net {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(30, 58, 138, 0.25);
}
.pos-total-compact--net .pos-total-compact-value {
    font-size: 1.35rem;
    color: #2563eb;
}
.dark .pos-total-compact--net .pos-total-compact-value { color: #60a5fa; }
.pos-total-compact--paid .pos-total-compact-value { color: #059669; }
.dark .pos-total-compact--paid .pos-total-compact-value { color: #34d399; }
.pos-total-compact--due .pos-total-compact-value { color: #d97706; }
.dark .pos-total-compact--due .pos-total-compact-value { color: #fbbf24; }

.pos-cart-table-area {
    flex: 1 1 75%;
    min-height: 0;
}
.pos-payment-panel {
    flex: 0 0 auto;
    max-height: min(26vh, 200px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
@media (min-width: 768px) {
    .pos-payment-panel { max-height: 210px; }
}
.pos-field-label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.125rem;
    line-height: 1.1;
}
.dark .pos-field-label { color: #94a3b8; }
.pos-input-xs,
select.pos-input-xs {
    padding: 0.2rem 0.35rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    border-radius: 0.375rem;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    min-height: 1.625rem;
}
.dark .pos-input-xs,
.dark select.pos-input-xs {
    border-color: #475569;
    background: #1e293b;
    color: #f1f5f9;
}
.pos-input-xs:focus,
select.pos-input-xs:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.pos-total-compact {
    min-height: 2.75rem;
    padding: 0.25rem 0.2rem;
}
.pos-total-compact-value {
    font-size: 1rem;
}
.pos-total-compact--net .pos-total-compact-value {
    font-size: 1.15rem;
}

.pos-cart-table-scroll,
.flex-1.min-h-0.overflow-y-auto.scrollbar-thin {
    scrollbar-gutter: stable;
}
.pos-cart-table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}
.pos-col-idx { width: 1.75rem; }
.pos-col-item { width: 38%; }
.pos-col-bal { width: 4rem; }
.pos-col-diff { width: 4rem; }
.pos-col-qty { width: 7.25rem; }
.pos-col-price { width: 4.25rem; }
.pos-col-disc { width: 3.75rem; }
.pos-col-store { width: 18%; }
.pos-col-total { width: 4.5rem; }
.pos-col-del { width: 1.75rem; }
.pos-cart-th,
.pos-cart-td {
    padding: 0.3rem 0.35rem;
    vertical-align: middle;
    box-sizing: border-box;
}
.pos-cart-th {
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}
.pos-cart-th--center,
.pos-cart-td--center { text-align: center; }
.pos-cart-th--start,
.pos-cart-td--start { text-align: start; }
.pos-cart-th--num,
.pos-cart-td--num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.pos-cart-th--action { padding-inline: 0.15rem; }
.pos-cart-row {
    border-bottom: 1px solid #cbd5e1;
}
.dark .pos-cart-row {
    border-bottom-color: #334155;
}
.pos-cart-row:hover {
    background: rgba(248, 250, 252, 0.9);
}
.dark .pos-cart-row:hover {
    background: rgba(51, 65, 85, 0.25);
}
/* Tracking sub-row (serial / batch / expiry) shown under the item name */
.pos-cart-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
.pos-cart-track-label {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}
.dark .pos-cart-track-label { color: #94a3b8; }
.pos-cart-track-input {
    font-size: 0.625rem;
    line-height: 1.2;
    padding: 0.15rem 0.35rem;
    border-radius: 0.375rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
    min-width: 0;
}
.dark .pos-cart-track-input {
    border-color: #475569;
    background: #1e293b;
    color: #f1f5f9;
}
.pos-cart-track-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    max-width: 100%;
    padding: 0.1rem 0.4rem;
    border-radius: 0.375rem;
    border: none;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
button.pos-cart-track-chip {
    cursor: pointer;
    font-family: inherit;
}
button.pos-cart-track-chip:hover {
    background: rgba(59, 130, 246, 0.2);
}
.dark .pos-cart-track-chip {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}
.dark button.pos-cart-track-chip:hover {
    background: rgba(59, 130, 246, 0.3);
}
.pos-cart-track-date {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.5625rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    white-space: nowrap;
}
.dark .pos-cart-track-date { color: #94a3b8; }
.pos-cart-item-thumb {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    overflow: hidden;
}
.pos-cart-qty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    width: 100%;
}
.pos-cart-qty-btn {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}
.dark .pos-cart-qty-btn {
    background: #334155;
    color: #cbd5e1;
}
.pos-cart-qty-input {
    flex: 1 1 auto;
    min-width: 3.25rem;
    max-width: 4rem;
}
.pos-cart-qty-input input,
.pos-cart-disc-input input {
    width: 100%;
    min-width: 0;
    padding: 0.15rem 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.2;
    border-radius: 0.375rem;
    text-align: center;
}
.pos-cart-disc-input {
    width: 100%;
    min-width: 0;
}
.pos-cart-disc-input input {
    text-align: end;
}
.pos-cart-select {
    font-size: 0.625rem;
    line-height: 1.2;
    padding: 0.2rem 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0f172a;
}
.dark .pos-cart-select {
    border-color: #475569;
    background: #1e293b;
    color: #f1f5f9;
}

.pos-disc-tax-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.35rem;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}
.pos-disc-tax-field {
    flex: 1 1 0;
    min-width: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pos-return-source-table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 42rem;
}
.pos-return-source-table .pos-cart-th,
.pos-return-source-table .pos-cart-td {
    padding: 0.2rem 0.25rem;
    vertical-align: middle;
    box-sizing: border-box;
}
.pos-return-source-table col.pos-return-col-item { width: auto; }
.pos-return-source-table col.pos-return-col-orig { width: 3.5rem; }
.pos-return-source-table col.pos-return-col-price { width: 3.75rem; }
.pos-return-source-table col.pos-return-col-qty { width: 3.5rem; }
.pos-return-source-table col.pos-return-col-action { width: 4.75rem; }
.pos-return-source-table .pos-return-col-action {
    width: 4.75rem;
    min-width: 4.75rem;
    max-width: 4.75rem;
    overflow: visible;
}
.pos-return-qty-input {
    width: 3rem;
    max-width: 3rem;
    margin-inline: auto;
    display: block;
    padding: 0.2rem 0.15rem;
    text-align: center;
    font-size: 0.6875rem;
    line-height: 1.2;
    border-radius: 0.375rem;
    border: 1px solid rgb(203 213 225);
    background: white;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.dark .pos-return-qty-input {
    border-color: rgb(71 85 105);
    background: rgb(30 41 59);
    color: rgb(241 245 249);
}
.pos-return-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 4rem;
    min-height: 1.65rem;
    padding: 0.25rem 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 0.375rem;
    border: none;
    background: rgb(217 119 6);
    color: white;
    cursor: pointer;
    box-sizing: border-box;
}
.pos-return-add-btn:hover:not(:disabled) { background: rgb(180 83 9); }
.pos-return-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pos-return-add-btn--purchase { background: rgb(5 150 105); }
.pos-return-add-btn--purchase:hover:not(:disabled) { background: rgb(4 120 87); }

.pos-return-payment-panel {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
}
.pos-return-cart-panel .pos-cart-table-area {
    flex: 1 1 auto;
    min-height: 0;
}
.pos-return-cart-panel .pos-payment-panel {
    max-height: none;
}