@font-face {
    font-family: 'Speda';
    src: url('../fonts/Speda-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --sidebar-bg: #0f172a;
    --sidebar-hover: #1e293b;
    --sidebar-active: #2563eb;
    --body-bg: #f1f5f9;
    --card-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    --bs-body-font-family: 'Speda', 'Segoe UI', system-ui, sans-serif;
    --bs-font-sans-serif: 'Speda', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }

.min-w-0 { min-width: 0; }

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Speda', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--body-bg);
    margin: 0;
    color: #1e293b;
    overflow-x: hidden;
}

body.sidebar-open { overflow: hidden; }

button, input, select, textarea, .btn, .form-control, .form-select {
    font-family: inherit;
}

.money-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    white-space: nowrap;
}

.money-usd,
.money-iqd {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.money-usd { color: #0f172a; }
.money-iqd { color: #64748b; font-size: 0.85em; font-weight: 500; }
.money-sep { color: #cbd5e1; font-weight: 500; }

.currency-flag {
    display: inline-block;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
}

.currency-flag-usd {
    border-radius: 999px;
}

.currency-flag-iqd {
    border-radius: 3px;
}

.currency-flag-xs { width: 14px; height: 14px; }
.currency-flag-sm { width: 18px; height: 18px; }
.currency-flag-md { width: 22px; height: 22px; }
.currency-flag-lg { width: 28px; height: 28px; }

.currency-input-flag {
    width: 18px;
    height: 18px;
}

td .money-wrap, .stat-value .money-wrap { display: inline-flex; }
.stat-value .money-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.stat-value .money-sep { display: none; }
.stat-value .money-iqd {
    display: inline-flex;
    font-size: 0.75rem;
    margin-top: 0.05rem;
}
.currency-sync-group .input-group-text { min-width: 48px; justify-content: center; }

/* Login */
.login-page {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #f1f5f9 100%);
    color: #0f172a;
}

.login-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 2.25rem 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.login-card-top {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-logo {
    width: 68px;
    height: 68px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}

.login-card-top h1 {
    margin: 0 0 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.login-card-top p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

.login-field {
    margin-bottom: 1.1rem;
}

.login-field label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap i {
    position: absolute;
    top: 50%;
    right: 0.95rem;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1rem;
    pointer-events: none;
}

.login-input-wrap .form-control {
    height: 48px;
    padding-right: 2.75rem;
    padding-left: 1rem;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    background: #f8fafc;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.login-input-wrap .form-control:focus {
    background: #fff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.875rem;
    line-height: 1.5;
}

.login-alert i {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.login-submit {
    width: 100%;
    height: 48px;
    margin-top: 0.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

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

.login-submit:active {
    transform: translateY(0);
}

.login-footer-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef2f7;
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Layout */
.app-wrapper { display: flex; min-height: 100vh; }

.app-sidebar {
    width: 260px;
    background: var(--sidebar-bg);
    color: #cbd5e1;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    height: 100vh;
    z-index: 1040;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: background 0.15s ease;
}

.sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
}

.sidebar-brand:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: -2px;
}

.sidebar-brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-brand-icon i { font-size: 1.25rem; color: #60a5fa; }

.sidebar-brand-text {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.sidebar-nav {
    padding: 0.75rem;
}

.sidebar-section {
    margin-bottom: 0.35rem;
}

.sidebar-section-label {
    display: block;
    padding: 0.65rem 0.85rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    color: #cbd5e1;
    text-decoration: none;
    border-radius: 10px;
    margin-bottom: 0.15rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sidebar-nav .nav-link:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.sidebar-nav .nav-link i {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    opacity: 0.95;
}

.app-content {
    flex: 1;
    margin-right: 260px;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-header {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.header-center {
    justify-self: center;
}

.header-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.header-title {
    flex: 1;
    min-width: 0;
}

.header-title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    max-width: 100%;
}

.header-rate-widget {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 42px;
    max-width: 100%;
    padding: 0.28rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.03);
    color: #0f172a;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

a.header-rate-widget:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
    color: #0f172a;
}

.header-rate-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
}

.header-rate-cell-usd {
    background: linear-gradient(180deg, #fffbeb 0%, #fefce8 100%);
}

.header-rate-cell-iqd {
    background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
}

.header-rate-flag {
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.header-rate-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
}

.header-rate-code {
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    color: #94a3b8;
}

.header-rate-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a;
    white-space: nowrap;
}

.header-rate-cell-usd .header-rate-amount {
    color: #92400e;
}

.header-rate-cell-iqd .header-rate-amount {
    color: #065f46;
}

.header-rate-unit {
    font-size: 0.68rem;
    font-weight: 700;
    color: #059669;
}

.header-rate-bridge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.68rem;
    flex-shrink: 0;
}

.header-rate-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-inline-start: 0.15rem;
    margin-inline-end: 0.2rem;
    border-radius: 8px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.header-rate-widget:hover .header-rate-edit {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    transform: scale(1.04);
}

.header-user { position: relative; }

.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.55rem 0.35rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.user-menu-trigger:hover,
.user-menu-trigger.show {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.user-menu-trigger::after { display: none; }

.user-avatar,
.user-dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.user-avatar-admin,
.user-dropdown-avatar.user-avatar-admin {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.user-avatar-cashier,
.user-dropdown-avatar.user-avatar-cashier {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
    text-align: right;
}

.user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.1rem;
}

.user-menu-chevron {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-inline-start: 0.15rem;
}

.user-dropdown-menu {
    min-width: 240px;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
}

.user-dropdown-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-dropdown-info strong {
    font-size: 0.9rem;
    color: #0f172a;
}

.user-dropdown-info small {
    color: #64748b;
    font-size: 0.78rem;
    direction: ltr;
    text-align: left;
}

.user-dropdown-menu .dropdown-divider {
    margin: 0.35rem 0;
}

.user-dropdown-logout {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    color: #dc2626;
    font-weight: 600;
}

.user-dropdown-logout:hover {
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 575.98px) {
    .user-meta { display: none; }
    .user-menu-trigger { padding: 0.35rem; border-radius: 50%; }
    .user-menu-chevron { display: none; }
}

.sidebar-toggle { color: #334155; padding: 0; }

.app-main {
    flex: 1;
    padding: 1.5rem max(1.5rem, env(safe-area-inset-right)) 1.5rem max(1.5rem, env(safe-area-inset-left));
}

.app-footer {
    margin-top: auto;
    flex-shrink: 0;
    padding: 1rem max(1.5rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    border-top: 1px solid #e2e8f0;
    background: #fff;
    text-align: center;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1035;
}

/* Cards & Stats */
.stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    border: 1px solid #e2e8f0;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.stat-card .stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 0.85rem;
    line-height: 1.2;
}

.stat-card .stat-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
}

.bg-primary-soft { background: #dbeafe; color: #2563eb; }
.bg-success-soft { background: #dcfce7; color: #16a34a; }
.bg-danger-soft { background: #fee2e2; color: #dc2626; }
.bg-warning-soft { background: #fef3c7; color: #d97706; }
.bg-info-soft { background: #e0f2fe; color: #0284c7; }
.bg-purple-soft { background: #ede9fe; color: #7c3aed; }

/* Dashboard */
.dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dashboard-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 55%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.22);
}

.dashboard-hero-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    color: #bfdbfe;
}

.dashboard-hero-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
}

.dashboard-hero-date {
    margin: 0.35rem 0 0;
    color: #cbd5e1;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.dashboard-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.15rem;
    border-radius: 12px;
    background: #fff;
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.dashboard-hero-action:hover {
    color: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}

.dashboard-hero-action-debts {
    background: #f5f3ff;
    color: #6d28d9;
}

.dashboard-hero-action-debts:hover {
    color: #5b21b6;
    background: #ede9fe;
}

.dashboard-hero-action-products {
    background: #ecfeff;
    color: #0e7490;
}

.dashboard-hero-action-products:hover {
    color: #155e75;
    background: #cffafe;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-page .stat-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-page .stat-card .stat-value {
    margin-top: 1rem;
}

.dashboard-debt-value .money-usd,
.dashboard-debt-value .money-iqd { color: #7c3aed; }

.dashboard-quick-links {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 1rem 1.15rem 1.15rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-quick-links-head h3 {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.dashboard-quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.75rem;
}

.dashboard-quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 96px;
    padding: 0.85rem 0.65rem;
    border-radius: 14px;
    border: 1px solid #e8edf4;
    background: #fafbfd;
    text-decoration: none;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.dashboard-quick-link:hover {
    transform: translateY(-2px);
    background: #fff;
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.dashboard-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.dashboard-quick-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.35;
}

.dashboard-quick-link-blue .dashboard-quick-icon { background: #eff6ff; color: #2563eb; }
.dashboard-quick-link-slate .dashboard-quick-icon { background: #f1f5f9; color: #475569; }
.dashboard-quick-link-amber .dashboard-quick-icon { background: #fffbeb; color: #d97706; }
.dashboard-quick-link-indigo .dashboard-quick-icon { background: #eef2ff; color: #4f46e5; }
.dashboard-quick-link-teal .dashboard-quick-icon { background: #f0fdfa; color: #0d9488; }
.dashboard-quick-link-purple .dashboard-quick-icon { background: #f5f3ff; color: #7c3aed; }
.dashboard-quick-link-cyan .dashboard-quick-icon { background: #ecfeff; color: #0891b2; }
.dashboard-quick-link-green .dashboard-quick-icon { background: #f0fdf4; color: #16a34a; }
.dashboard-quick-link-pink .dashboard-quick-icon { background: #fdf2f8; color: #db2777; }
.dashboard-quick-link-red .dashboard-quick-icon { background: #fef2f2; color: #dc2626; }
.dashboard-quick-link-orange .dashboard-quick-icon { background: #fff7ed; color: #ea580c; }

.dashboard-notice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.dashboard-notice i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.dashboard-notice div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-panels {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
}

.dashboard-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.dashboard-panel-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.dashboard-panel-title h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.dashboard-panel-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
}

.dashboard-panel-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
}

.dashboard-panel-icon-warning {
    background: #fffbeb;
    color: #d97706;
}

.dashboard-panel-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-panel-link:hover { color: #1d4ed8; }

.dashboard-panel-body { padding: 0; }

.dashboard-recent-sales {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem;
}

.dash-sale-item {
    display: block;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.dash-sale-item:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
    color: inherit;
}

.dash-sale-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.dash-sale-invoice {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1e40af;
    word-break: break-word;
    text-decoration: none;
}

.dash-sale-invoice:hover {
    color: #1d4ed8;
}

.dash-sale-total {
    flex-shrink: 0;
    direction: ltr;
    text-align: left;
    font-size: 0.86rem;
    color: #0f172a;
    white-space: nowrap;
}

.dash-sale-total .money-iqd {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.dash-sale-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    font-size: 0.76rem;
    color: #64748b;
}

.dash-sale-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dash-sale-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #15803d;
    text-decoration: none;
    font-weight: 700;
}

.dash-sale-phone:hover {
    color: #166534;
    text-decoration: underline;
}

.dashboard-table th {
    background: #fff;
    border-bottom: 1px solid #eef2f7;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.dashboard-table td {
    vertical-align: middle;
    border-bottom: 1px solid #f8fafc;
}

.dashboard-invoice-link {
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.dashboard-invoice-link:hover { color: #1d4ed8; }

.payment-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.payment-pill-cash {
    background: #dcfce7;
    color: #15803d;
}

.payment-pill-credit {
    background: #fef3c7;
    color: #b45309;
}

.payment-pill-bank,
.payment-pill-other {
    background: #e2e8f0;
    color: #475569;
}

.dashboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 220px;
    padding: 2rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.dashboard-empty i { font-size: 2rem; opacity: 0.75; }
.dashboard-empty p { margin: 0; font-size: 0.92rem; }

.dashboard-empty-success { color: #16a34a; }
.dashboard-empty-success i { color: #22c55e; }

/* Responsive */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(100%); }
    .app-sidebar.show { transform: translateX(0); }
    .sidebar-overlay.show { display: block; }
    .app-content { margin-right: 0; }
    .pos-page {
        margin: 0;
        min-width: 0;
    }
    .pos-container {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .pos-results-list {
        max-height: min(36vh, 280px);
        min-height: 0;
    }
    .pos-category-bar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    .dashboard-panels { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-hero-actions {
        justify-content: stretch;
    }

    .dashboard-hero-action {
        justify-content: center;
        flex: 1 1 calc(50% - 0.35rem);
    }

    .dashboard-stats-grid { grid-template-columns: 1fr; }

    .dashboard-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-quick-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .dashboard-quick-link {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-height: 54px;
        padding: 0.65rem 0.7rem;
        gap: 0.6rem;
        text-align: start;
    }

    .dashboard-quick-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .dashboard-quick-label {
        font-size: 0.74rem;
        line-height: 1.25;
    }

    .dashboard-quick-links {
        padding: 0.85rem 0.85rem 0.95rem;
    }

    .content-card .card-header-custom {
        flex-direction: column;
        align-items: stretch;
    }

    .content-card .card-header-custom > .d-flex,
    .content-card .card-header-custom > form,
    .content-card .card-header-custom > .toolbar-search-form,
    .content-card .card-header-custom > .row,
    .content-card .card-header-custom > .card-header-actions {
        width: 100%;
    }

    .toolbar-search-form,
    .toolbar-search-input {
        max-width: none;
        width: 100%;
    }

    .card-header-actions {
        width: 100%;
    }

    .card-header-actions .btn,
    .content-card .card-header-custom > .btn {
        flex: 1 1 auto;
    }

    .invoice-box {
        padding: 1.25rem;
    }

    .pos-search-input,
    .form-control,
    .form-select {
        font-size: 16px;
    }

    .pos-qty-control button {
        width: 36px;
        height: 36px;
    }

    .pos-page .pos-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .pos-search-wrap {
        margin-bottom: 0.75rem;
    }

    .pos-cart-head,
    .pos-cart-foot,
    .pos-cart-body {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

@media (max-width: 575.98px) {
    .app-main {
        padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    }

    .app-header {
        padding-top: max(0.65rem, env(safe-area-inset-top));
        gap: 0.55rem;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }

    .header-start {
        grid-column: 1;
        grid-row: 1;
        gap: 0.55rem;
    }

    .header-end {
        grid-column: 2;
        grid-row: 1;
    }

    .header-center {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .header-rate {
        max-width: 100%;
    }

    .header-rate-widget {
        gap: 0.28rem;
        min-height: 40px;
        padding: 0.24rem;
    }

    .header-rate-cell {
        padding: 0.3rem 0.45rem;
        gap: 0.35rem;
    }

    .header-rate-code {
        display: none;
    }

    .header-rate-amount {
        font-size: 0.82rem;
    }

    .header-rate-unit {
        font-size: 0.62rem;
    }

    .header-rate-bridge {
        width: 22px;
        height: 22px;
        font-size: 0.62rem;
    }

    .header-rate-edit {
        width: 26px;
        height: 26px;
        font-size: 0.78rem;
    }

    .header-title h1 {
        font-size: 1rem;
    }

    .stat-card .stat-value { font-size: 1.25rem; }

    .dashboard-stats-grid { grid-template-columns: 1fr; }

    .dashboard-hero-action {
        flex: 1 1 100%;
    }

    .content-card .card-body-custom {
        padding: 1rem;
    }

    .table-responsive .table {
        font-size: 0.82rem;
    }

    .table-responsive .table th,
    .table-responsive .table td {
        padding: 0.55rem 0.65rem;
    }

    .table-responsive .btn-sm {
        padding: 0.35rem 0.55rem;
    }

    .pos-cart-item-bottom {
        flex-wrap: wrap;
    }

    .pos-product-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .pos-product-price {
        text-align: right;
    }

    .pos-page {
        margin: 0;
    }

    .pos-panel,
    .pos-cart {
        border-radius: 16px;
    }

    .pos-results-list {
        min-height: 0;
        max-height: min(40vh, 260px);
    }

    .login-card {
        padding: 1.75rem 1.25rem;
        border-radius: 18px;
    }

    .login-section {
        padding: 1rem;
        align-items: flex-start;
        padding-top: max(1rem, env(safe-area-inset-top));
    }

    .no-print.d-flex,
    .no-print.d-flex.gap-2 {
        flex-wrap: wrap;
    }

    .no-print.d-flex .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }
}

.content-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    border: 1px solid #e2e8f0;
}

.content-card .card-header-custom {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.content-card .card-body-custom { padding: 1.25rem; }

.toolbar-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.toolbar-search-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 280px;
}

.card-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.btn,
.form-control,
.form-select,
.nav-link,
.pos-toggle-btn,
.pos-product-item,
.pos-qty-control button {
    touch-action: manipulation;
}

.table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    border-bottom-width: 1px;
}

.badge-stock-low { background: #fef3c7; color: #b45309; }
.badge-stock-ok { background: #dcfce7; color: #15803d; }
.badge-stock-out { background: #fee2e2; color: #b91c1c; }

/* POS */
.pos-page {
    margin: 0;
    min-width: 0;
    overflow-x: hidden;
}

.pos-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 0.85rem;
    align-items: start;
}

.pos-cart-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 96px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.pos-cart-column .pos-cart,
.pos-cart-column .pos-cart-checkout {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

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

.pos-products .pos-search-wrap {
    margin-bottom: 0.65rem;
}

.pos-search-wrap {
    position: relative;
    margin-bottom: 1rem;
}

.pos-search-icon {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.1rem;
    pointer-events: none;
}

.pos-products .pos-search-input {
    height: 46px;
    padding: 0 2.75rem 0 0.85rem;
    border-radius: 12px;
    font-size: 0.92rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.pos-search-input {
    width: 100%;
    height: 54px;
    padding: 0 3rem 0 1rem;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #fff;
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pos-search-input:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.pos-panel,
.pos-cart {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.pos-panel {
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.pos-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.pos-panel-head h2 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.pos-panel-hint {
    font-size: 0.72rem;
    color: #94a3b8;
}

.pos-results-list {
    min-height: 0;
    max-height: min(320px, calc(100vh - 340px));
    overflow-y: auto;
    transition: opacity 0.15s ease;
}

.pos-results-list.is-loading {
    opacity: 0.72;
    pointer-events: none;
    position: relative;
}

.pos-results-list.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.75));
    pointer-events: none;
}

.pos-category-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.pos-category-chip {
    flex: 0 0 auto;
    border: 1px solid #dbe3ee;
    background: #f8fafc;
    color: #475569;
    border-radius: 999px;
    padding: 0.32rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-category-chip:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.pos-category-chip.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}

.pos-category-group + .pos-category-group {
    border-top: 1px solid #eef2f7;
}

.pos-category-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
    color: #334155;
    font-size: 0.76rem;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
}

.pos-category-head i {
    color: #2563eb;
}

.pos-category-head em {
    margin-right: auto;
    font-style: normal;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}

.pos-product-info span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.72rem;
}

.pos-product-category {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 700;
}

.pos-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    padding: 1.25rem 1rem;
    text-align: center;
    color: #94a3b8;
}

.pos-empty-state i {
    font-size: 1.5rem;
    opacity: 0.7;
}

.pos-empty-state p {
    margin: 0;
    font-size: 0.85rem;
}

.pos-empty-state-sm {
    min-height: 160px;
    padding: 1.5rem 1rem;
}

.pos-empty-state-sm i { font-size: 1.5rem; }

.pos-product-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
    text-align: right;
    transition: background 0.15s ease;
}

.pos-product-item:hover {
    background: #f8fafc;
}

.pos-product-info {
    min-width: 0;
    flex: 1;
}

.pos-product-info strong {
    display: block;
    color: #0f172a;
    font-size: 0.86rem;
    margin-bottom: 0.1rem;
}

.pos-product-price {
    text-align: left;
    flex-shrink: 0;
}

.pos-product-price strong {
    display: block;
    color: #2563eb;
    font-size: 0.88rem;
}

.pos-product-price small {
    display: block;
    color: #64748b;
    font-size: 0.68rem;
    margin-top: 0.1rem;
}

.pos-cart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    overflow: hidden;
}

.pos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.pos-cart-head-title {
    min-width: 0;
}

.pos-cart-head-title h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.pos-cart-count {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.74rem;
    color: #64748b;
}

.pos-cart-clear {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pos-cart-clear:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}

.pos-cart-body {
    padding: 0.65rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 72px;
    background: #f8fafc;
}

.pos-cart-foot {
    padding: 0.75rem;
    border-top: 1px solid #eef2f7;
    background: #fff;
    flex: 0 0 auto;
    overflow: visible;
}

.pos-cart-header,
.pos-cart-footer {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
    font-weight: 700;
    font-size: 0.95rem;
}

.pos-cart-footer {
    border-bottom: 0;
    border-top: 1px solid #eef2f7;
    background: #fff;
    font-weight: 400;
}

.pos-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 120px;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: #94a3b8;
}

.pos-cart-empty i {
    font-size: 1.5rem;
    color: #cbd5e1;
}

.pos-cart-empty p {
    margin: 0;
    font-size: 0.84rem;
}

.pos-cart-item {
    padding: 0.85rem;
    margin-bottom: 0.65rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e8edf4;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.pos-cart-item:last-child { margin-bottom: 0; }

.pos-cart-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.pos-cart-item-info { min-width: 0; flex: 1; }

.pos-cart-item-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.pos-cart-item-price {
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: #64748b;
}

.pos-cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pos-cart-item-total {
    text-align: left;
}

.pos-cart-item-total strong {
    display: block;
    font-size: 0.92rem;
    color: #2563eb;
}

.pos-cart-item-total small {
    display: block;
    color: #64748b;
    font-size: 0.7rem;
}

.pos-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pos-qty-control button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.pos-qty-control button:hover {
    background: #eff6ff;
    color: #2563eb;
}

.pos-qty-control span {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
    font-size: 0.88rem;
}

.pos-cart-remove {
    border: 0;
    background: #fef2f2;
    color: #ef4444;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.pos-cart-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

.pos-cart-settings {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pos-cart-settings .pos-cart-checkout {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid #eef2f7;
    background: transparent;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.pos-setting-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pos-setting-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.pos-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: #f1f5f9;
}

.pos-customer-debt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 0.74rem;
    font-weight: 600;
}

.pos-customer-debt i { flex-shrink: 0; }

.pos-select-sm {
    height: 36px;
    border-radius: 10px;
    border-color: #dbe3ee;
    background: #fff;
    font-size: 0.84rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.pos-credit-row {
    gap: 0;
}

.pos-credit-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
    border: 1px solid #fde68a;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.08);
}

.pos-credit-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.pos-credit-head-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    color: #d97706;
    font-size: 1rem;
    flex-shrink: 0;
}

.pos-credit-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pos-credit-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #92400e;
    line-height: 1.2;
}

.pos-credit-subtitle {
    font-size: 0.68rem;
    font-weight: 600;
    color: #b45309;
}

.pos-credit-card .currency-sync-group {
    direction: ltr;
}

.pos-credit-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.pos-credit-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.pos-credit-input-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.pos-credit-input-wrap .pos-money-input-sm {
    width: 100%;
    min-width: 0;
}

.pos-credit-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.pos-credit-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    min-width: 0;
}

.pos-credit-stat-paid {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

.pos-credit-stat-debt {
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.pos-credit-stat-label {
    font-size: 0.64rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.2;
}

.pos-credit-stat-paid .pos-credit-stat-label {
    color: #047857;
}

.pos-credit-stat-debt .pos-credit-stat-label {
    color: #c2410c;
}

.pos-credit-stat-value {
    min-height: 2.35rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #0f172a;
    direction: ltr;
    text-align: left;
    line-height: 1.35;
}

.money-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
}

.money-compact-usd {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0f172a;
}

.money-compact-iqd {
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.pos-credit-stat-paid .money-compact-usd {
    color: #047857;
}

.pos-credit-stat-debt .money-compact-usd {
    color: #c2410c;
}

.pos-cart-total {
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e8edf4;
}

.pos-checkout-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pos-checkout-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
}

.pos-checkout-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    line-height: 1.2;
}

.pos-checkout-control {
    min-width: 0;
}

.pos-checkout-total-value {
    direction: ltr;
    text-align: left;
    color: #2563eb;
    font-weight: 800;
}

.pos-checkout-total-value .money-wrap {
    justify-content: flex-start;
    gap: 0.25rem;
    font-size: 0.92rem;
}

.pos-checkout-total-value .money-usd,
.pos-checkout-total-value .money-iqd {
    font-size: inherit;
}

.pos-checkout-row .pos-money-input-sm {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.pos-grand-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.pos-grand-total strong {
    color: #2563eb;
    font-size: 1.2rem;
    direction: ltr;
    text-align: left;
}

.pos-total-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin-top: 0.45rem;
    font-size: 0.76rem;
    color: #64748b;
}

.pos-total-meta .pos-rate-note {
    width: auto;
    margin-top: 0;
    justify-content: flex-start;
}

.pos-discount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.45rem;
}

.pos-discount-field {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}

.pos-discount-row .pos-money-input-sm {
    width: auto;
    min-width: 110px;
    flex: 0 1 130px;
}

.pos-cart-checkout {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex-shrink: 0;
    padding: 0.75rem;
    background: #fff;
    border-top: 1px solid #eef2f7;
}

.pos-cart-checkout .pos-alert {
    margin: 0;
    padding: 0.7rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.pos-cart-checkout .pos-alert span {
    flex: 1;
    min-width: 0;
}

.pos-rate-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: #94a3b8;
}

.pos-money-input {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dbe3ee;
    direction: ltr;
}

.pos-money-input-xs {
    min-width: 88px;
    padding: 0.2rem 0.45rem;
}

.pos-money-input-xs .form-control {
    height: 24px;
    font-size: 0.82rem;
}

.pos-money-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pos-money-input .form-control {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    height: 32px;
    min-width: 0;
    flex: 1;
    text-align: left;
    direction: ltr;
    font-size: 0.95rem;
    font-weight: 700;
}

.pos-money-input-sm {
    min-width: 110px;
    padding: 0.3rem 0.5rem;
}

.pos-money-input-sm .form-control {
    height: 28px;
    font-size: 0.86rem;
}

.pos-money-input .form-control:focus {
    box-shadow: none;
}

.pos-field-group {
    margin-bottom: 0.9rem;
}

.pos-field-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.pos-select,
.pos-discount-field .form-control {
    height: 42px;
    border-radius: 10px;
    border-color: #dbe3ee;
    background: #fff;
    font-size: 0.88rem;
}

.pos-toggle-group,
.pos-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 10px;
    background: #f1f5f9;
}

.pos-toggle-group {
    gap: 0.5rem;
    padding: 0.35rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.pos-toggle {
    display: block;
    margin: 0;
    min-width: 0;
    cursor: pointer;
}

.pos-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pos-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 34px;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

.pos-toggle-group .pos-toggle-btn {
    min-height: 40px;
    border: 1px solid #dbe3ee;
    background: #fff;
    border-radius: 10px;
    font-size: 0.82rem;
}

.pos-seg .pos-toggle:hover .pos-toggle-btn {
    color: #334155;
}

.pos-seg input:checked + .pos-toggle-btn {
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.pos-seg input[name="saleType"]:checked + .pos-toggle-btn {
    color: #1d4ed8;
}

.pos-seg .pos-toggle-cash input:checked + .pos-toggle-btn {
    color: #15803d;
}

.pos-seg .pos-toggle-credit input:checked + .pos-toggle-btn {
    color: #b45309;
}

.pos-toggle input:focus-visible + .pos-toggle-btn {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

.pos-field-required .pos-select-sm {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.pos-field-required .pos-setting-label::after {
    content: ' *';
    color: #d97706;
}

.pos-field-error .pos-select-sm {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.pos-field-error .pos-setting-label {
    color: #b91c1c;
}

.pos-complete-btn {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.pos-complete-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.34);
}

.pos-complete-btn:disabled {
    box-shadow: none;
    opacity: 0.55;
}

.pos-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.88rem;
}

.pos-alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.pos-alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #b45309;
}

/* Invoice print */
@media print {
    .app-sidebar, .app-header, .app-footer, .no-print, .sidebar-overlay { display: none !important; }
    .app-content { margin-right: 0 !important; margin-left: 0 !important; }
    .app-main { padding: 0 !important; }
    body { background: #fff; }

    .invoice-items-table thead {
        display: table-header-group !important;
    }

    .invoice-items-table tbody tr,
    .invoice-items-table tfoot tr {
        display: table-row !important;
    }

    .invoice-items-table tbody td,
    .invoice-items-table tfoot td {
        display: table-cell !important;
    }

    .invoice-items-table tbody td::before {
        content: none !important;
    }

    .invoice-items-table tbody td:first-child {
        display: table-cell !important;
    }

    .content-card {
        box-shadow: none !important;
        border: 0 !important;
    }

    .invoice-box {
        max-width: none;
        padding: 0;
    }
}

.invoice-box {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 2rem;
}

@media (max-width: 1199.98px) {
    .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* POS mobile — must stay after base POS rules */
@media (max-width: 991.98px) {
    .pos-page {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .pos-page .pos-container {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .pos-page .pos-products { order: 1; }

    .pos-page .pos-cart-column {
        order: 2;
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        border-radius: 16px;
    }

    .pos-page .pos-cart {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }

    .pos-page .pos-cart-body {
        max-height: none;
        min-height: 0;
    }

    .pos-page .pos-cart-foot {
        max-height: none;
        overflow: visible;
        padding-bottom: 0.85rem;
    }

    .pos-page .pos-cart-settings .pos-cart-checkout {
        position: static;
        margin-top: 0.5rem;
        padding: 0.85rem 0 0;
        box-shadow: none;
        border-top: 1px solid #eef2f7;
    }

    .pos-page .pos-cart-settings .pos-cart-total {
        padding: 0.55rem 0.65rem;
        margin: 0;
        border-radius: 12px;
    }

    .pos-page .pos-cart-settings .pos-checkout-row {
        grid-template-columns: minmax(4rem, 30%) minmax(0, 1fr);
        gap: 0.45rem;
    }

    .pos-page .pos-cart-settings .pos-checkout-label {
        font-size: 0.76rem;
    }

    .pos-page .pos-cart-settings .pos-checkout-total-value .money-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
        font-size: 0.84rem;
    }

    .pos-page .pos-cart-settings .pos-checkout-total-value .money-sep {
        display: none;
    }

    .pos-page .pos-cart-settings .pos-money-input-sm {
        padding: 0.3rem 0.45rem;
    }

    .pos-page .pos-cart-settings .pos-money-input-sm .form-control {
        height: 34px;
        min-height: 34px;
        font-size: 16px;
    }

    .pos-page .pos-cart-settings .pos-alert {
        font-size: 0.78rem;
        padding: 0.6rem 0.7rem;
    }

    .pos-page .pos-cart-settings .pos-complete-btn {
        height: 46px;
        margin: 0;
    }

    .pos-page .pos-cart-empty {
        min-height: 56px;
        padding: 0.65rem 0.5rem;
        flex-direction: row;
        gap: 0.4rem;
    }

    .pos-page .pos-cart-empty i {
        font-size: 1rem;
    }

    .pos-page .pos-cart-settings {
        gap: 0.7rem;
    }

    .pos-page .pos-select-sm {
        height: 44px;
        font-size: 16px;
    }

    .pos-page .pos-seg .pos-toggle-btn {
        min-height: 44px;
        font-size: 0.8rem;
    }
}

@media (max-width: 575.98px) {
    .pos-page {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .pos-page .pos-cart-settings .pos-checkout-total-value .money-wrap {
        font-size: 0.8rem;
    }

    .pos-page .pos-seg .pos-toggle-btn {
        min-height: 46px;
        padding: 0.45rem 0.3rem;
        font-size: 0.76rem;
        line-height: 1.25;
    }
}

/* Purchase cart price field */
.pos-purchase-price-label {
    display: block;
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.pos-cart-item-info .pos-money-input-sm {
    max-width: 140px;
}

.sale-picker-list {
    max-height: min(50vh, 500px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* App-wide mobile fixes — keep at end of file */
@media (max-width: 767.98px) {
    .sale-picker-list {
        max-height: min(40vh, 320px);
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .invoice-body {
        padding: 0.75rem !important;
    }

    .invoice-box {
        padding: 1rem;
    }

    .invoice-header {
        flex-direction: column;
        gap: 0.85rem;
    }

    .invoice-header-meta,
    .invoice-meta-side {
        text-align: start !important;
    }

    .invoice-toolbar .btn {
        flex: 1 1 calc(50% - 0.35rem);
    }

    .invoice-table-wrap {
        overflow: visible;
    }

    .invoice-items-table thead {
        display: none;
    }

    .invoice-items-table tbody tr {
        display: block;
        margin-bottom: 0.65rem;
        padding: 0.65rem 0.75rem;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px;
        background: #fff;
    }

    .invoice-items-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: 0 !important;
        text-align: start !important;
    }

    .invoice-items-table tbody td::before {
        content: attr(data-label);
        font-size: 0.74rem;
        font-weight: 700;
        color: #64748b;
        flex-shrink: 0;
    }

    .invoice-items-table tbody td:first-child {
        display: none;
    }

    .invoice-items-table tfoot tr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.45rem 0;
        border-top: 1px dashed #e2e8f0;
    }

    .invoice-items-table tfoot td {
        border: 0 !important;
        padding: 0;
    }

    .invoice-items-table tfoot td[colspan] {
        flex: 1 1 auto;
        text-align: start !important;
    }

    .invoice-items-table tfoot td:last-child {
        flex: 0 0 auto;
        text-align: end !important;
        white-space: nowrap;
    }

    .invoice-items-table tfoot tr.table-primary {
        margin-top: 0.35rem;
        padding-top: 0.65rem;
        border-top: 2px solid #dbeafe;
        font-size: 1rem;
    }

    .dashboard-notice {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .dashboard-notice .btn {
        width: 100%;
    }

    .card-header-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .card-header-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }

    .toolbar-search-form {
        width: 100%;
    }

    .content-card .card-header-custom form.row {
        width: 100%;
    }

    .content-card .card-header-custom form.row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .currency-sync-group .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .reports-page .reports-main {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .list-group-item-action .d-flex {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .invoice-toolbar .btn {
        flex: 1 1 100%;
    }

    .invoice-box {
        padding: 0.85rem;
    }

    .invoice-header .h3 {
        font-size: 1.15rem;
    }

    .card-header-actions .btn {
        flex: 1 1 100%;
    }

    .dashboard-quick-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .dashboard-quick-link {
        min-height: 50px;
        padding: 0.55rem 0.6rem;
        border-radius: 12px;
    }

    .dashboard-quick-icon {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .dashboard-quick-label {
        font-size: 0.7rem;
    }
}

/* Sales history page */
.sales-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.sales-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sales-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.sales-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.sales-page-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}

.sales-filters-card .card-body-custom,
.sales-filters-card {
    padding: 0;
}

.sales-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.sales-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.sales-search-wrap {
    position: relative;
}

.sales-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.sales-search-wrap .form-control {
    padding-right: 2.25rem;
}

.sales-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sales-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.sales-list-card {
    overflow: hidden;
}

.sales-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.sales-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.sales-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.sales-table tbody tr:hover {
    background: #f8fbff;
}

.sales-table tbody tr:last-child td {
    border-bottom: 0;
}

.sales-invoice-link,
.sales-card-invoice {
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.sales-invoice-link:hover,
.sales-card-invoice:hover {
    color: #1d4ed8;
}

.sales-amount,
.sales-card-total {
    color: #0f172a;
    white-space: nowrap;
}

.sales-meta {
    font-size: 0.86rem;
    color: #64748b;
    white-space: nowrap;
}

.sale-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.sale-type-retail {
    background: #eff6ff;
    color: #1d4ed8;
}

.sale-type-wholesale {
    background: #f5f3ff;
    color: #6d28d9;
}

.sales-row-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.sales-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
}

.sales-action-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.sales-action-return:hover {
    background: #fffbeb;
    border-color: #fde68a;
    color: #b45309;
}

.sales-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.sales-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.sales-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.sales-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.sales-card {
    padding: 0.9rem;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.sales-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.sales-card-invoice {
    font-size: 0.92rem;
    line-height: 1.35;
    word-break: break-word;
}

.sales-card-total {
    font-size: 0.95rem;
    flex-shrink: 0;
    direction: ltr;
    text-align: left;
}

.sales-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    color: #64748b;
}

.sales-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sales-card-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.sales-card-cashier {
    font-size: 0.74rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sales-card-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .sales-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sales-filter-search,
    .sales-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .sales-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .sales-page-cta {
        justify-content: center;
        width: 100%;
    }

    .sales-filters {
        grid-template-columns: 1fr;
        padding: 0.85rem;
    }

    .sales-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }

    .sales-cards {
        padding: 0.75rem;
    }

    .sales-card-actions {
        flex-direction: column;
    }

    .sales-card-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .sales-page-title {
        font-size: 1.15rem;
    }

    .sales-filter-actions .btn {
        flex: 1 1 100%;
    }
}

/* Customers page */
.customers-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.customers-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.customers-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.customers-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.customers-page-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.customers-filters-card {
    padding: 0;
}

.customers-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.customers-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.customers-search-wrap {
    position: relative;
}

.customers-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.customers-search-wrap .form-control {
    padding-right: 2.25rem;
}

.customers-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.customers-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.customers-list-card {
    overflow: hidden;
}

.customers-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.customers-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.customers-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.customers-table tbody tr:hover {
    background: #f8fbff;
}

.customers-table tbody tr:last-child td {
    border-bottom: 0;
}

.customer-name {
    font-weight: 700;
    color: #0f172a;
}

.customer-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #15803d;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.customer-phone-link:hover {
    color: #166534;
    text-decoration: underline;
}

.customers-address {
    max-width: 220px;
    color: #64748b;
    font-size: 0.88rem;
}

.customers-muted {
    color: #94a3b8;
}

.customer-debt-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.customer-debt-pill-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.customer-debt-pill-clear {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.customer-purchase-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.customers-row-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.customers-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.customers-action-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.customers-action-pay:hover {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.customers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.customers-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.customers-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.customers-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.customer-card {
    padding: 0.9rem;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.customer-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.customer-card-name {
    font-size: 0.95rem;
    color: #0f172a;
    word-break: break-word;
}

.customer-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: #64748b;
}

.customer-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.customer-card-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .customers-filters {
        grid-template-columns: 1fr;
    }

    .customers-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }

    .customer-card-actions {
        flex-direction: column;
    }

    .customer-card-actions .btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .customers-page-title {
        font-size: 1.15rem;
    }

    .customers-filter-actions .btn {
        flex: 1 1 100%;
    }
}

/* Debts page */
.debts-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.debts-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.debts-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.debts-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.debts-page-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.debts-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.debts-stat-card {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.debts-stat-customers {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.debts-stat-suppliers {
    border-color: #fde68a;
    background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}

.debts-stat-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.debts-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}

.debts-stat-customers .debts-stat-icon {
    color: #dc2626;
}

.debts-stat-suppliers .debts-stat-icon {
    color: #d97706;
}

.debts-stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.debts-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    direction: ltr;
    text-align: start;
}

.debts-stat-customers .debts-stat-value .money-usd {
    color: #b91c1c;
}

.debts-stat-suppliers .debts-stat-value .money-usd {
    color: #b45309;
}

.debts-stat-note {
    margin: 0.35rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.debts-section-card {
    overflow: hidden;
    padding: 0;
}

.debts-section-head {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.debts-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.debts-section-title h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.debts-section-title p {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
}

.debts-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

.debts-section-icon-supplier {
    background: #fffbeb;
    color: #d97706;
}

.debts-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.debts-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.debts-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.debts-table tbody tr:hover {
    background: #f8fbff;
}

.debts-table tbody tr:last-child td {
    border-bottom: 0;
}

.debts-name {
    font-weight: 700;
    color: #0f172a;
}

.debts-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #15803d;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.debts-phone-link:hover {
    color: #166534;
    text-decoration: underline;
}

.debts-muted {
    color: #94a3b8;
}

.debts-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.debts-paid .money-usd {
    color: #15803d;
    font-weight: 700;
}

.debts-amount-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.debts-amount-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.debts-amount-clear {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.debts-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.debts-action-pay:hover {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.debts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.debts-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.35rem;
}

.debts-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.debts-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.debts-card {
    padding: 0.9rem;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.debts-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.debts-card-name {
    font-size: 0.95rem;
    color: #0f172a;
    word-break: break-word;
}

.debts-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: #64748b;
}

.debts-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 767.98px) {
    .debts-stats-grid {
        grid-template-columns: 1fr;
    }

    .debts-page-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .debts-page-title {
        font-size: 1.15rem;
    }
}

/* Products page */
.products-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.products-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.products-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.products-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.products-page-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.products-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.products-stat-card {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.products-stat-warning {
    border-color: #fde68a;
    background: linear-gradient(135deg, #fff 0%, #fffbeb 100%);
}

.products-stat-danger {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.products-stat-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.products-stat-value {
    font-size: 1.2rem;
    color: #0f172a;
}

.products-stat-warning .products-stat-value {
    color: #b45309;
}

.products-stat-danger .products-stat-value {
    color: #b91c1c;
}

.products-filters-card {
    padding: 0;
}

.products-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.products-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.products-search-wrap {
    position: relative;
}

.products-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.products-search-wrap .form-control {
    padding-right: 2.25rem;
}

.products-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.products-filter-chips {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 12px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.products-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: 9px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.products-filter-chip:hover {
    color: #334155;
    background: rgba(255, 255, 255, 0.7);
}

.products-filter-chip.is-active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.products-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.products-list-card {
    overflow: hidden;
}

.products-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.products-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.products-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.products-table tbody tr:hover {
    background: #f8fbff;
}

.products-table tbody tr:last-child td {
    border-bottom: 0;
}

.product-name {
    font-weight: 700;
    color: #0f172a;
}

.product-barcode {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.78rem;
}

.product-category {
    display: inline-flex;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
}

.product-price {
    white-space: nowrap;
    font-size: 0.86rem;
}

.product-price-sale .money-usd {
    color: #2563eb;
    font-weight: 700;
}

.products-row-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.products-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.products-action-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.products-action-delete:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.products-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.products-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.products-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.products-cards {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
}

.product-card-body {
    min-width: 0;
}

.product-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.product-card-name {
    font-size: 0.92rem;
    color: #0f172a;
    word-break: break-word;
}

.product-card-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.35rem;
}

.product-card-prices {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.7rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
}

.product-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.product-card-price-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    flex-shrink: 0;
}

.product-card-price-value {
    direction: ltr;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.product-card-price-value .money-wrap {
    display: inline;
}

.product-card-price-value .money-iqd {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 600;
}

.product-card-price-row-sale .product-card-price-value .money-usd {
    color: #2563eb;
    font-size: 0.84rem;
}

.product-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
}

.product-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.product-card-action-edit {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.product-card-action-delete {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.product-card-action:active {
    transform: scale(0.98);
}

@media (max-width: 991.98px) {
    .products-filters {
        grid-template-columns: 1fr;
    }

    .products-filter-actions {
        width: 100%;
    }

    .products-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .products-stats-grid {
        grid-template-columns: 1fr;
    }

    .products-page-cta {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .products-page-title {
        font-size: 1.15rem;
    }

    .products-filter-actions .btn {
        flex: 1 1 100%;
    }

    .products-filter-chips {
        width: 100%;
    }

    .products-filter-chip {
        flex: 1;
        justify-content: center;
    }
}

/* Product add/edit form */
.product-form-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    max-width: 920px;
    margin: 0 auto;
}

.product-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.product-form-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.product-form-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.product-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.product-form-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-form-section {
    overflow: hidden;
    padding: 0;
}

.product-form-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.product-form-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

.product-form-section-icon-price {
    background: #f0fdf4;
    color: #16a34a;
}

.product-form-section-icon-stock {
    background: #fffbeb;
    color: #d97706;
}

.product-form-section-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.product-form-section-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.product-form-section-body {
    padding: 1rem 1.15rem 1.15rem;
}

.product-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.product-form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-form-field-wide {
    grid-column: 1 / -1;
}

.product-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.product-barcode-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
}

.product-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.product-price-field {
    padding: 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #fcfdff;
}

.product-price-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.product-money-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.product-money-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0 0.65rem;
    background: #f8fafc;
    border-inline-end: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}

.product-money-field .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    direction: ltr;
    text-align: left;
}

.product-money-field .form-control:focus {
    box-shadow: none;
}

.product-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.25rem 0 0.5rem;
}

.product-form-submit,
.product-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding-inline: 1.15rem;
    font-weight: 700;
    border-radius: 12px;
}

.product-form-submit {
    flex: 1 1 220px;
}

@media (max-width: 991.98px) {
    .product-pricing-grid {
        grid-template-columns: 1fr;
    }

    .product-form-grid,
    .product-form-grid-2 {
        grid-template-columns: 1fr;
    }

    .product-form-field-wide {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .product-form-page {
        max-width: none;
    }

    .product-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 0 -0.15rem;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 24%, #f8fafc 100%);
        backdrop-filter: blur(8px);
    }

    .product-form-submit,
    .product-form-cancel {
        flex: 1 1 calc(50% - 0.35rem);
    }

    .product-form-section-body .form-control,
    .product-form-section-body .form-select {
        font-size: 16px;
        min-height: 46px;
    }
}

@media (max-width: 575.98px) {
    .product-form-title {
        font-size: 1.15rem;
    }

    .product-form-submit,
    .product-form-cancel {
        flex: 1 1 100%;
    }
}

/* Categories page */
.categories-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.categories-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.categories-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.categories-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.categories-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.categories-form-card,
.categories-list-card {
    overflow: hidden;
    padding: 0;
}

.categories-form-head,
.categories-list-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.categories-form-icon,
.categories-list-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f3ff;
    color: #7c3aed;
    flex-shrink: 0;
}

.categories-list-icon {
    background: #eff6ff;
    color: #2563eb;
}

.categories-form-head h3,
.categories-list-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.categories-form-head p,
.categories-list-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.categories-form-body {
    padding: 1rem 1.15rem 1.15rem;
}

.categories-form-field {
    margin-bottom: 0.85rem;
}

.categories-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.categories-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 46px;
    font-weight: 700;
    border-radius: 12px;
}

.categories-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.categories-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.categories-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.categories-table tbody tr:hover {
    background: #f8fbff;
}

.categories-table tbody tr:last-child td {
    border-bottom: 0;
}

.category-name {
    font-weight: 700;
    color: #0f172a;
}

.category-desc {
    max-width: 320px;
    color: #64748b;
    font-size: 0.88rem;
}

.category-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.categories-row-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.categories-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.categories-action-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.categories-action-delete:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.categories-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.categories-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.35rem;
}

.categories-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.categories-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
}

.category-card {
    padding: 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
}

.category-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.category-card-title-wrap {
    min-width: 0;
}

.category-card-name {
    display: block;
    font-size: 0.95rem;
    color: #0f172a;
    word-break: break-word;
}

.category-card-desc {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

.category-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
}

.category-card-delete-form {
    display: contents;
}

.category-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.category-card-action-edit {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.category-card-action-delete {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.categories-edit-modal .modal-footer,
.categories-modal-footer {
    gap: 0.5rem;
}

@media (max-width: 991.98px) {
    .categories-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .categories-form-body .form-control,
    .categories-edit-modal .form-control {
        font-size: 16px;
        min-height: 46px;
    }

    .categories-modal-footer {
        flex-direction: column;
    }

    .categories-modal-footer .btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .categories-page-title {
        font-size: 1.15rem;
    }

    .category-card-actions {
        grid-template-columns: 1fr;
    }
}

/* Suppliers page */
.suppliers-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.suppliers-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.suppliers-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.suppliers-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.suppliers-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.suppliers-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.suppliers-filters-card {
    padding: 0;
}

.suppliers-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.suppliers-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.suppliers-search-wrap {
    position: relative;
}

.suppliers-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.suppliers-search-wrap .form-control {
    padding-right: 2.25rem;
}

.suppliers-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.suppliers-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.suppliers-list-card {
    overflow: hidden;
}

.suppliers-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.suppliers-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.suppliers-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.suppliers-table tbody tr:hover {
    background: #f8fbff;
}

.suppliers-table tbody tr:last-child td {
    border-bottom: 0;
}

.supplier-name {
    font-weight: 700;
    color: #0f172a;
}

.supplier-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #15803d;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.supplier-phone-link:hover {
    color: #166534;
    text-decoration: underline;
}

.suppliers-address {
    max-width: 220px;
    color: #64748b;
    font-size: 0.88rem;
}

.suppliers-muted {
    color: #94a3b8;
}

.supplier-debt-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.supplier-debt-pill-danger {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.supplier-debt-pill-clear {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.supplier-purchase-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.suppliers-row-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.suppliers-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.suppliers-action-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.suppliers-action-pay:hover {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.suppliers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.suppliers-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.suppliers-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.suppliers-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
}

.supplier-card {
    padding: 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
}

.supplier-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.supplier-card-name {
    font-size: 0.95rem;
    color: #0f172a;
    word-break: break-word;
}

.supplier-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    color: #64748b;
}

.supplier-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.supplier-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
}

.supplier-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.supplier-card-action-pay {
    color: #15803d;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.supplier-card-action-edit {
    color: #2563eb;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.supplier-form-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    max-width: 640px;
    margin: 0 auto;
}

.supplier-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.supplier-form-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.supplier-form-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.supplier-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    border-radius: 12px;
}

.supplier-form-section {
    overflow: hidden;
    padding: 0;
}

.supplier-form-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.supplier-form-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff7ed;
    color: #ea580c;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.supplier-form-section-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.supplier-form-section-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.supplier-form-section-body {
    padding: 1rem 1.15rem 1.15rem;
}

.supplier-form-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.supplier-form-field-wide {
    width: 100%;
}

.supplier-form-field {
    margin-bottom: 0;
}

.supplier-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.supplier-phone-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.supplier-phone-field:focus-within {
    border-color: #86efac;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.supplier-phone-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    background: #f0fdf4;
    border-inline-end: 1px solid #e2e8f0;
    color: #15803d;
    flex-shrink: 0;
}

.supplier-phone-field .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    direction: ltr;
    text-align: left;
}

.supplier-phone-field .form-control:focus {
    box-shadow: none;
}

.supplier-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
}

.supplier-form-submit,
.supplier-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding-inline: 1.15rem;
    font-weight: 700;
    border-radius: 12px;
}

.supplier-form-submit {
    flex: 1 1 220px;
}

@media (max-width: 991.98px) {
    .suppliers-filters {
        grid-template-columns: 1fr;
    }

    .suppliers-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .suppliers-page-actions {
        width: 100%;
    }

    .suppliers-page-btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }

    .supplier-form-section-body .form-control,
    .supplier-form-section-body textarea {
        font-size: 16px;
        min-height: 46px;
    }

    .supplier-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 24%, #f8fafc 100%);
    }

    .supplier-form-submit,
    .supplier-form-cancel {
        flex: 1 1 calc(50% - 0.35rem);
    }
}

@media (max-width: 575.98px) {
    .suppliers-page-title,
    .supplier-form-title {
        font-size: 1.15rem;
    }

    .suppliers-page-btn,
    .suppliers-filter-actions .btn,
    .supplier-form-submit,
    .supplier-form-cancel {
        flex: 1 1 100%;
    }

    .supplier-card-actions {
        grid-template-columns: 1fr;
    }
}

/* Purchase orders page */
.purchase-orders-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.purchase-orders-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.purchase-orders-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.purchase-orders-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.purchase-orders-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.purchase-orders-filters-card {
    padding: 0;
}

.purchase-orders-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.purchase-orders-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.purchase-orders-search-wrap {
    position: relative;
}

.purchase-orders-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.purchase-orders-search-wrap .form-control {
    padding-right: 2.25rem;
}

.purchase-orders-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.purchase-orders-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.purchase-orders-list-card {
    overflow: hidden;
}

.purchase-orders-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.purchase-orders-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.purchase-orders-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.purchase-orders-table tbody tr:hover {
    background: #f8fbff;
}

.purchase-orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.purchase-order-invoice-link,
.purchase-order-card-invoice {
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
}

.purchase-order-invoice-link:hover,
.purchase-order-card-invoice:hover {
    color: #1d4ed8;
}

.purchase-order-supplier {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.purchase-order-supplier-name {
    font-weight: 600;
    color: #0f172a;
}

.purchase-order-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #15803d;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.purchase-order-phone:hover {
    color: #166534;
    text-decoration: underline;
}

.purchase-order-total,
.purchase-order-card-total {
    color: #0f172a;
    white-space: nowrap;
    direction: ltr;
    text-align: left;
}

.purchase-order-meta {
    font-size: 0.86rem;
    color: #64748b;
    white-space: nowrap;
}

.purchase-orders-action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.purchase-orders-action-btn:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.purchase-orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.purchase-orders-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.purchase-orders-empty p {
    margin: 0;
    font-size: 0.92rem;
}

.purchase-orders-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
}

.purchase-order-card {
    padding: 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
}

.purchase-order-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.purchase-order-card-invoice {
    font-size: 0.9rem;
    word-break: break-word;
}

.purchase-order-card-total {
    font-size: 0.88rem;
    flex-shrink: 0;
}

.purchase-order-card-supplier {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.45rem;
    font-size: 0.8rem;
    color: #64748b;
}

.purchase-order-card-supplier > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.purchase-order-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    margin-bottom: 0.65rem;
}

.purchase-order-card-date {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.74rem;
    color: #94a3b8;
}

.purchase-order-card-btn {
    min-height: 44px;
    font-weight: 700;
    border-radius: 10px;
}

@media (max-width: 991.98px) {
    .purchase-orders-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .purchase-orders-filter-search,
    .purchase-orders-filter-actions {
        grid-column: 1 / -1;
    }

    .purchase-orders-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .purchase-orders-cta {
        width: 100%;
        justify-content: center;
    }

    .purchase-orders-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .purchase-orders-title {
        font-size: 1.15rem;
    }

    .purchase-orders-filter-actions .btn {
        flex: 1 1 100%;
    }
}

/* Product returns page */
.returns-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.returns-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.returns-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.returns-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.returns-invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.returns-page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.returns-mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.returns-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.9rem;
    border-radius: 11px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #64748b;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.returns-mode-tab:hover {
    color: #334155;
    background: rgba(255, 255, 255, 0.7);
}

.returns-mode-tab.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.returns-direct-page .pos-complete-btn {
    background: #f59e0b;
    border-color: #f59e0b;
}

.returns-direct-page .pos-complete-btn:hover:not(:disabled) {
    background: #d97706;
    border-color: #d97706;
}

.returns-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.returns-picker {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.returns-panel-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.returns-panel-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.returns-panel-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.returns-panel-head p {
    margin: 0.1rem 0 0;
    font-size: 0.74rem;
    color: #64748b;
}

.returns-sale-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.returns-sale-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.88rem;
}

.returns-sale-item {
    display: block;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.returns-sale-item:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
    color: inherit;
}

.returns-sale-item.is-active {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.returns-sale-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.4rem;
}

.returns-sale-invoice {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2563eb;
    word-break: break-word;
    line-height: 1.35;
}

.returns-sale-item.is-active .returns-sale-invoice {
    color: #1d4ed8;
}

.returns-sale-total {
    font-size: 0.86rem;
    color: #0f172a;
    flex-shrink: 0;
    direction: ltr;
    text-align: left;
    white-space: nowrap;
}

.returns-sale-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.74rem;
    color: #64748b;
}

.returns-sale-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.returns-main {
    min-width: 0;
}

.returns-form-card {
    overflow: hidden;
}

.returns-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.returns-form-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.returns-form-head p {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.returns-form {
    padding: 1rem 1.15rem 1.15rem;
}

.return-items-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    font-size: 0.76rem;
}

.return-items-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.return-max-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.45rem;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.return-qty-input {
    width: 100%;
    max-width: 110px;
    min-height: 42px;
    font-weight: 700;
    text-align: center;
}

.return-items-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.return-item-card {
    padding: 0.85rem;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: #f8fafc;
}

.return-item-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.45rem;
}

.return-item-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.65rem;
    font-size: 0.78rem;
    color: #64748b;
}

.return-item-qty-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.return-items-cards .return-qty-input {
    max-width: none;
}

.returns-form-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.returns-option-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.returns-option-wide {
    grid-column: span 1;
}

.returns-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
}

.returns-state-card {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.returns-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.returns-state-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px dashed #dbe3ee;
    color: #cbd5e1;
    font-size: 1.5rem;
}

.returns-state-info .returns-state-icon {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.returns-state p {
    margin: 0;
    font-size: 0.92rem;
    max-width: 280px;
}

@media (max-width: 991.98px) {
    .returns-layout {
        grid-template-columns: 1fr;
    }

    .returns-sale-list {
        max-height: min(36vh, 320px);
    }
}

@media (max-width: 767.98px) {
    .returns-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .returns-page-actions {
        width: 100%;
    }

    .returns-mode-tabs {
        width: 100%;
    }

    .returns-mode-tab {
        flex: 1;
        justify-content: center;
    }

    .returns-invoice-link {
        justify-content: center;
        width: 100%;
    }

    .returns-form-head {
        flex-direction: column;
        align-items: stretch;
    }

    .returns-form-options {
        grid-template-columns: 1fr;
    }

    .return-items-cards {
        grid-template-columns: 1fr;
    }

    .returns-form {
        padding: 0.85rem;
    }

    .return-qty-input {
        max-width: none;
        font-size: 16px;
    }

    .returns-form .form-select,
    .returns-form .form-control {
        font-size: 16px;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .returns-page-title {
        font-size: 1.15rem;
    }

    .returns-state-card {
        min-height: 220px;
    }
}

/* Expenses page */
.expenses-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.expenses-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.expenses-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.expenses-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.expenses-layout {
    min-width: 0;
}

.expenses-form-section {
    overflow: hidden;
    padding: 0;
    position: sticky;
    top: 88px;
}

.expenses-form-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.expenses-form-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
    color: #dc2626;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.expenses-form-section-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.expenses-form-section-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.expenses-form-section-body {
    padding: 1rem 1.15rem 1.15rem;
}

.expenses-form-field {
    margin-bottom: 0.85rem;
}

.expenses-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.expenses-amount-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.expenses-amount-field:focus-within {
    border-color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.expenses-amount-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding-inline: 0.5rem;
    background: #fef2f2;
    border-inline-end: 1px solid #e2e8f0;
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.expenses-amount-field .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    direction: ltr;
    text-align: left;
}

.expenses-amount-field .form-control:focus {
    box-shadow: none;
}

.expenses-form-actions {
    display: flex;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
}

.expenses-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 46px;
    font-weight: 700;
    border-radius: 12px;
}

.expenses-filters-card {
    padding: 0;
    margin-bottom: 1rem;
}

.expenses-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.expenses-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.expenses-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.expenses-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    min-height: 42px;
}

.expenses-list-card {
    overflow: hidden;
}

.expenses-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.expenses-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.expenses-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.expenses-table tbody tr:hover {
    background: #fffbfb;
}

.expenses-table tbody tr:last-child td {
    border-bottom: 0;
}

.expense-amount-cell {
    font-weight: 700;
    color: #dc2626;
    white-space: nowrap;
}

.expense-notes-cell {
    max-width: 220px;
    color: #64748b;
    font-size: 0.88rem;
}

.expense-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
}

.expense-category-rent {
    background: #eff6ff;
    color: #1d4ed8;
}

.expense-category-salary {
    background: #f0fdf4;
    color: #15803d;
}

.expense-category-electricity {
    background: #fefce8;
    color: #a16207;
}

.expense-category-transport {
    background: #faf5ff;
    color: #7e22ce;
}

.expense-category-other {
    background: #f8fafc;
    color: #64748b;
}

.expenses-action-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff;
    color: #dc2626;
    transition: background 0.15s, border-color 0.15s;
}

.expenses-action-btn:hover {
    background: #fef2f2;
    border-color: #f87171;
    color: #b91c1c;
}

.expenses-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #64748b;
}

.expenses-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
    color: #dc2626;
    font-size: 1.4rem;
}

.expenses-empty p {
    margin: 0;
}

.expenses-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.expense-card {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.expense-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: #fafbfd;
    border-bottom: 1px solid #f1f5f9;
}

.expense-card-date {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
}

.expense-card-amount {
    font-weight: 800;
    color: #dc2626;
    font-size: 0.92rem;
    white-space: nowrap;
}

.expense-card-body {
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.expense-card-notes {
    margin: 0;
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.5;
}

.expense-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    font-size: 0.78rem;
    color: #94a3b8;
}

.expense-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.expense-card-actions {
    padding: 0.65rem 0.95rem 0.85rem;
    border-top: 1px solid #f1f5f9;
}

.expense-card-delete-form {
    margin: 0;
}

.expense-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fff;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.84rem;
}

.expense-card-action:hover {
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 991.98px) {
    .expenses-form-section {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .expenses-filters {
        grid-template-columns: 1fr;
    }

    .expenses-filter-actions {
        width: 100%;
    }

    .expenses-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }

    .expenses-form-section-body .form-control,
    .expenses-form-section-body .form-select,
    .expenses-form-section-body textarea,
    .expenses-filters .form-control {
        font-size: 16px;
        min-height: 46px;
    }

    .expenses-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 0 -0.15rem;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 24%, #f8fafc 100%);
    }
}

@media (max-width: 575.98px) {
    .expenses-page-title {
        font-size: 1.15rem;
    }

    .expenses-filter-actions .btn,
    .expenses-form-submit {
        flex: 1 1 100%;
    }
}

/* Reports page */
.reports-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.reports-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.reports-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.reports-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.reports-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    min-height: 42px;
}

.reports-print-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    min-height: 42px;
    flex-shrink: 0;
    min-width: 44px;
}

.reports-nav-bar {
    overflow: hidden;
    padding: 0;
}

.reports-nav-bar-head {
    padding: 0.85rem 1.15rem 0;
}

.reports-nav-bar-label {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.reports-nav-mobile {
    padding: 0 0.85rem 0.85rem;
}

.reports-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.reports-mobile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 76px;
    padding: 0.65rem 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.reports-mobile-item:active {
    transform: scale(0.98);
}

.reports-mobile-item.active {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.reports-mobile-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #64748b;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.reports-mobile-item.active .reports-mobile-item-icon {
    background: #fff;
    color: #2563eb;
}

.reports-mobile-item-label {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    color: #475569;
}

.reports-mobile-item.active .reports-mobile-item-label {
    color: #1d4ed8;
}

.reports-nav-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.65rem 1.15rem 1rem;
}

.reports-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.reports-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.reports-nav-pill.active {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.reports-filters-card {
    padding: 0;
}

.reports-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.reports-filters:has(.reports-filter-field:only-of-type) {
    grid-template-columns: minmax(0, 1fr) auto;
}

.reports-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.reports-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.reports-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 700;
    min-height: 44px;
    font-size: 0.9rem;
}

.reports-filter-submit {
    color: #fff !important;
}

.reports-filter-submit span,
.reports-filter-reset span {
    line-height: 1.2;
}

.reports-date-input {
    direction: ltr;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
}

.reports-date-input::-webkit-date-and-time-value {
    text-align: left;
}

.reports-result-card {
    overflow: hidden;
    padding: 0;
}

.reports-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.reports-result-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.reports-result-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #2563eb;
    flex-shrink: 0;
}

.reports-result-head h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

.reports-result-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.reports-result-body {
    padding: 0;
}

.reports-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.reports-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.reports-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.reports-table tbody tr:hover {
    background: #f8fbff;
}

.reports-table tbody tr:last-child td {
    border-bottom: 0;
}

.reports-amount-positive {
    font-weight: 700;
    color: #15803d;
}

.reports-amount-negative {
    font-weight: 700;
    color: #dc2626;
}

.reports-stock-low {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #fef2f2;
    color: #dc2626;
    font-weight: 700;
    font-size: 0.82rem;
}

.reports-badge-clear {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 0.74rem;
    font-weight: 700;
}

.reports-link {
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
}

.reports-link:hover {
    color: #2563eb;
}

.reports-phone-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #15803d;
    font-weight: 600;
    text-decoration: none;
}

.reports-phone-link:hover {
    color: #166534;
}

.reports-pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    padding: 1rem 1.15rem;
}

.reports-pl-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
}

.reports-pl-positive {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.reports-pl-negative {
    border-color: #fecaca;
    background: #fef2f2;
}

.reports-pl-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.reports-pl-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.reports-pl-positive .reports-pl-value {
    color: #15803d;
}

.reports-pl-negative .reports-pl-value {
    color: #dc2626;
}

.reports-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #64748b;
}

.reports-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.4rem;
}

.reports-empty p {
    margin: 0;
}

.reports-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.report-card {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.report-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: #fafbfd;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.86rem;
}

.report-card-top strong,
.report-card-top a {
    min-width: 0;
}

.report-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.65rem 0.95rem 0;
    font-size: 0.78rem;
    color: #64748b;
}

.report-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.report-card-rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem 0.95rem 0.95rem;
}

.report-card-rows strong {
    color: #0f172a;
    text-align: end;
    font-weight: 700;
}

.report-card-value {
    color: #0f172a;
    text-align: end;
    font-weight: 700;
    min-width: 0;
    flex: 1 1 auto;
}

.report-card-value .money-wrap,
.report-card-top .money-wrap,
.report-card-top .reports-amount-positive,
.report-card-top .reports-amount-negative {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    white-space: normal;
}

.report-card-value .money-iqd,
.report-card-top .money-iqd {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
}

.report-card-rows > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.report-card-rows span {
    color: #94a3b8;
    flex-shrink: 0;
}

@media (min-width: 400px) and (max-width: 991.98px) {
    .reports-mobile-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .reports-page {
        gap: 0.75rem;
    }

    .reports-page-head {
        gap: 0.5rem;
    }

    .reports-nav-bar-head {
        padding: 0.65rem 0.85rem 0;
    }

    .reports-filters {
        grid-template-columns: 1fr 1fr;
        padding: 0.85rem;
        gap: 0.65rem;
    }

    .reports-filters-month {
        grid-template-columns: 1fr;
    }

    .reports-filter-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .reports-filter-actions .btn {
        width: 100%;
        min-height: 46px;
        font-size: 1rem;
    }

    .reports-filters .form-control {
        font-size: 16px;
        min-height: 46px;
    }

    .reports-result-head {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 0.85rem;
        gap: 0.65rem;
    }

    .reports-result-title-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    .reports-print-btn-sm {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .reports-result-head h3 {
        font-size: 0.92rem;
    }

    .reports-result-head p {
        font-size: 0.72rem;
        word-break: break-word;
    }

    .reports-result-icon {
        width: 38px;
        height: 38px;
    }

    .reports-pl-grid {
        padding: 0.85rem;
        gap: 0.65rem;
    }

    .reports-cards {
        padding: 0.65rem;
    }
}

@media (max-width: 575.98px) {
    .reports-page-title {
        font-size: 1.15rem;
    }

    .reports-filter-actions:has(.reports-filter-reset) {
        grid-template-columns: 1fr 1fr;
    }

    .reports-pl-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .reports-nav-bar,
    .reports-filters-card,
    .reports-print-btn,
    .reports-print-btn-sm {
        display: none !important;
    }

    .reports-result-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Users page */
.users-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.users-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.users-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.users-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.users-page-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
}

.users-roles-card {
    overflow: hidden;
    padding: 0;
}

.users-roles-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.users-roles-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

.users-roles-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.users-roles-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.users-roles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem 1.15rem;
}

.users-role-item {
    padding: 0.85rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.users-role-admin {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.users-role-cashier {
    border-color: #e2e8f0;
    background: #f8fafc;
}

.users-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.users-role-admin .users-role-badge {
    color: #1d4ed8;
}

.users-role-cashier .users-role-badge {
    color: #475569;
}

.users-role-item p {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
}

.users-filters-card {
    padding: 0;
}

.users-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    align-items: end;
}

.users-filter-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.users-search-wrap {
    position: relative;
}

.users-search-wrap i {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.users-search-wrap .form-control {
    padding-right: 2.25rem;
}

.users-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.users-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    min-height: 42px;
}

.users-list-card {
    overflow: hidden;
}

.users-table-wrap {
    -webkit-overflow-scrolling: touch;
}

.users-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.users-table tbody td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
}

.users-table tbody tr:hover {
    background: #f8fbff;
}

.users-table tbody tr:last-child td {
    border-bottom: 0;
}

.user-name {
    font-weight: 700;
    color: #0f172a;
}

.user-username {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.82rem;
}

.user-role-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.user-role-pill-admin {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.user-role-pill-cashier {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.users-row-actions {
    display: inline-flex;
    gap: 0.35rem;
}

.users-action-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.users-action-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.users-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #64748b;
}

.users-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.4rem;
}

.users-empty p {
    margin: 0;
}

.users-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem;
}

.user-card {
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.user-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    background: #fafbfd;
    border-bottom: 1px solid #f1f5f9;
}

.user-card-identity {
    min-width: 0;
}

.user-card-name {
    display: block;
    font-size: 0.92rem;
    color: #0f172a;
}

.user-card-username {
    display: block;
    margin-top: 0.2rem;
    padding: 0;
    background: none;
    font-size: 0.78rem;
    color: #64748b;
}

.user-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding: 0.65rem 0.95rem 0;
    font-size: 0.78rem;
    color: #94a3b8;
}

.user-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.user-card-actions {
    padding: 0.65rem 0.95rem 0.85rem;
}

.user-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #2563eb;
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
}

.user-card-action:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

@media (max-width: 767.98px) {
    .users-page-cta {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    .users-roles-grid {
        grid-template-columns: 1fr;
    }

    .users-filters {
        grid-template-columns: 1fr;
    }

    .users-filter-actions {
        width: 100%;
    }

    .users-filter-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }

    .users-search-wrap .form-control {
        font-size: 16px;
        min-height: 46px;
    }
}

@media (max-width: 575.98px) {
    .users-page-title {
        font-size: 1.15rem;
    }

    .users-page-cta,
    .users-filter-actions .btn {
        flex: 1 1 100%;
    }
}

/* User form page */
.user-form-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    max-width: 640px;
    margin: 0 auto;
}

.user-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.user-form-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.user-form-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.user-form-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    border-radius: 12px;
}

.user-form-section {
    overflow: hidden;
    padding: 0;
}

.user-form-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.user-form-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.user-form-section-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.user-form-section-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
}

.user-form-section-body {
    padding: 1rem 1.15rem 1.15rem;
}

.user-form-field {
    margin-bottom: 0.85rem;
}

.user-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.user-input-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.user-input-field:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.user-input-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    background: #f8fafc;
    border-inline-end: 1px solid #e2e8f0;
    color: #64748b;
    flex-shrink: 0;
    font-weight: 700;
}

.user-input-field .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.user-input-field .form-control:focus {
    box-shadow: none;
}

.user-input-field .form-control[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

.user-form-hint {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: #94a3b8;
}

.user-role-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.user-role-option {
    margin: 0;
    cursor: pointer;
}

.user-role-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.user-role-option-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.user-role-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
}

.user-role-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.user-role-option-text strong {
    font-size: 0.88rem;
    color: #0f172a;
}

.user-role-option-text small {
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.35;
}

.user-role-option input:checked + .user-role-option-cashier {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.08);
}

.user-role-option input:checked + .user-role-option-cashier .user-role-option-icon {
    background: #e2e8f0;
    color: #334155;
}

.user-role-option input:checked + .user-role-option-admin {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.user-role-option input:checked + .user-role-option-admin .user-role-option-icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.user-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
}

.user-form-submit,
.user-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding-inline: 1.15rem;
    font-weight: 700;
    border-radius: 12px;
}

.user-form-submit {
    flex: 1 1 220px;
}

@media (max-width: 767.98px) {
    .user-form-section-body .form-control {
        font-size: 16px;
        min-height: 46px;
    }

    .user-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 0 -0.15rem;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 24%, #f8fafc 100%);
    }

    .user-form-submit,
    .user-form-cancel {
        flex: 1 1 calc(50% - 0.35rem);
    }
}

@media (max-width: 575.98px) {
    .user-form-title {
        font-size: 1.15rem;
    }

    .user-form-submit,
    .user-form-cancel {
        flex: 1 1 100%;
    }
}

/* Currency settings page */
.settings-subnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.35rem;
    border-radius: 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.settings-subnav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.settings-subnav-link i {
    font-size: 1rem;
}

.settings-subnav-link:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.75);
}

.settings-subnav-link.active {
    color: #0f172a;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.settings-subnav-link-telegram.active {
    color: #0088cc;
}

.settings-subnav-link-telegram.active i {
    color: #0088cc;
}

.settings-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    max-width: 720px;
    margin: 0 auto;
}

.settings-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.settings-page-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

.settings-page-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.settings-form-section,
.settings-info-section {
    overflow: hidden;
    padding: 0;
}

.settings-form-section-head,
.settings-info-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid #eef2f7;
    background: #fafbfd;
}

.settings-info-head {
    border-bottom: 0;
}

.settings-form-section-icon,
.settings-info-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.settings-form-section-icon {
    background: #fef3c7;
    color: #d97706;
}

.settings-info-icon {
    background: #eff6ff;
    color: #2563eb;
}

.settings-form-section-head h3,
.settings-info-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
}

.settings-form-section-head p {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.45;
}

.settings-info-head p {
    margin: 0.35rem 0 0;
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.55;
}

.settings-form-section-body {
    padding: 1rem 1.15rem 1.15rem;
}

.settings-form-field {
    margin-bottom: 1rem;
}

.settings-form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.settings-rate-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.settings-rate-field:focus-within {
    border-color: #fcd34d;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.settings-rate-prefix,
.settings-rate-suffix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding-inline: 0.85rem;
    background: #fffbeb;
    color: #b45309;
    font-weight: 700;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.settings-rate-suffix {
    background: #ecfdf5;
    color: #047857;
}

.settings-rate-prefix {
    border-inline-end: 1px solid #e2e8f0;
}

.settings-rate-suffix {
    border-inline-start: 1px solid #e2e8f0;
}

.settings-rate-field .form-control {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    direction: ltr;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 700;
}

.settings-rate-field .form-control:focus {
    box-shadow: none;
}

.settings-form-hint {
    margin-top: 0.35rem;
    font-size: 0.74rem;
    color: #94a3b8;
}

.settings-examples {
    margin-bottom: 0.25rem;
}

.settings-examples-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
}

.settings-examples-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.settings-example-card {
    padding: 0.75rem 0.65rem;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f8fafc;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.settings-example-card .money-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.settings-example-card .money-iqd,
.settings-example-iqd {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.settings-form-actions {
    display: flex;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
}

.settings-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 46px;
    font-weight: 700;
    border-radius: 12px;
}

@media (max-width: 767.98px) {
    .settings-form-section-body .form-control {
        font-size: 16px;
        min-height: 46px;
    }

    .settings-examples-grid {
        grid-template-columns: 1fr;
    }

    .settings-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin: 0 -0.15rem;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.92) 24%, #f8fafc 100%);
    }
}

@media (max-width: 575.98px) {
    .settings-page-title {
        font-size: 1.15rem;
    }

    .settings-subnav {
        gap: 0.3rem;
        padding: 0.3rem;
    }

    .settings-subnav-link {
        flex-direction: column;
        gap: 0.2rem;
        padding: 0.5rem 0.25rem;
        font-size: 0.68rem;
        min-height: 62px;
    }

    .settings-subnav-link span {
        line-height: 1.25;
        text-align: center;
    }
}

.settings-form-actions-inline {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.settings-backup-section {
    overflow: hidden;
    padding: 0;
}

.settings-backup-icon {
    background: #ecfdf5;
    color: #059669;
}

.settings-backup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.settings-backup-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fafbfd;
    min-height: 100%;
}

.settings-backup-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.1rem;
}

.settings-backup-import-icon {
    background: #fef2f2;
    color: #dc2626;
}

.settings-backup-card h4 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.settings-backup-card p {
    margin: 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.45;
    flex: 1 1 auto;
}

.settings-backup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 46px;
    font-weight: 700;
    border-radius: 12px;
    margin-top: auto;
}

.settings-import-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.settings-import-field {
    margin: 0;
}

.settings-import-confirm {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
    cursor: pointer;
}

.settings-import-confirm input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .settings-backup-grid {
        grid-template-columns: 1fr;
    }

    .settings-import-field .form-control {
        font-size: 16px;
        min-height: 46px;
    }
}

.settings-telegram-section {
    overflow: hidden;
    padding: 0;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.settings-telegram-section .settings-form-section-body {
    padding: 1rem;
}

.tg-settings-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tg-enable-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
}

.tg-enable-card-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.tg-enable-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0088cc;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.28);
}

.tg-enable-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.tg-enable-card-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
}

.tg-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #cbd5e1;
}

.tg-status-badge.is-active {
    color: #0369a1;
    background: #fff;
    border-color: #7dd3fc;
}

.tg-enable-switch {
    flex-shrink: 0;
}

.settings-telegram-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-telegram-switch-ui {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #94a3b8;
    position: relative;
    display: block;
    transition: background 0.2s ease;
}

.settings-telegram-switch-ui::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease;
}

.settings-telegram-switch input:checked + .settings-telegram-switch-ui {
    background: #0088cc;
}

.settings-telegram-switch input:checked + .settings-telegram-switch-ui::after {
    transform: translateX(-20px);
}

.tg-panel {
    padding: 0.95rem 1rem;
    border-radius: 16px;
    border: 1px solid #eef2f7;
    background: #fafbfd;
}

.tg-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.tg-panel-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1rem;
    flex-shrink: 0;
}

.tg-panel-head-icon-schedule {
    background: #fef3c7;
    color: #d97706;
}

.tg-panel-head h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.tg-panel-head p {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.45;
}

.tg-field-stack {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.tg-input-wrap {
    position: relative;
}

.tg-input-icon {
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
}

.tg-input {
    min-height: 46px;
    padding-right: 2.5rem;
    border-radius: 12px;
    border-color: #e2e8f0;
    background: #fff;
    font-size: 0.84rem;
}

.tg-input:focus {
    border-color: #0088cc;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.12);
}

.settings-telegram-token-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
}

.tg-field-hint {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.45;
    padding-inline: 0.15rem;
}

.tg-schedule-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tg-schedule-input {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.tg-schedule-input .form-control {
    width: 96px;
    min-height: 46px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    border-color: #e2e8f0;
    background: #fff;
}

.tg-schedule-input span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.tg-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tg-preset-chip {
    min-width: 44px;
    min-height: 38px;
    padding: 0.35rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tg-preset-chip:hover {
    border-color: #0088cc;
    color: #0088cc;
}

.tg-preset-chip.active {
    background: #0088cc;
    border-color: #0088cc;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.22);
}

.tg-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.tg-stat-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid #eef2f7;
    background: #fff;
}

.tg-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: #059669;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.tg-stat-icon-next {
    background: #eff6ff;
    color: #2563eb;
}

.tg-stat-label {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.tg-stat-card strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}

.tg-actions-bar {
    display: flex;
    gap: 0.55rem;
    padding-top: 0.15rem;
}

.tg-btn-save {
    flex: 1 1 auto;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.tg-test-form {
    margin: 0;
}

.tg-actions-bar-secondary {
    margin-top: -0.35rem;
}

.tg-btn-test {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #0088cc;
    border: 1px dashed #7dd3fc;
    background: #f0f9ff;
}

.tg-btn-test:hover:not(:disabled) {
    color: #fff;
    background: #0088cc;
    border-color: #0088cc;
}

.tg-btn-test:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.re-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}
.re-status-available { background: #dcfce7; color: #15803d; }
.re-status-reserved { background: #fef3c7; color: #b45309; }
.re-status-sold { background: #dbeafe; color: #1d4ed8; }
.re-status-rented { background: #ede9fe; color: #6d28d9; }

.re-thumb {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    background: #e2e8f0;
    flex-shrink: 0;
}
.re-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.1rem;
}
.re-property-name-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.re-card-image {
    display: block;
    height: 160px;
    overflow: hidden;
    background: #e2e8f0;
}
.re-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.re-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}
.re-image-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #64748b;
}
.re-image-item img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}
.re-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}
.re-gallery img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 14px;
}

@media (max-width: 767.98px) {
    .settings-telegram-section .settings-form-section-body {
        padding: 0.85rem;
    }

    .tg-enable-card {
        padding: 0.9rem;
    }

    .tg-stats-grid {
        grid-template-columns: 1fr;
    }

    .tg-input,
    .tg-schedule-input .form-control {
        font-size: 16px;
    }
}