:root {
    --color-primary: #1d4ed8;
    --color-secondary: #06b6d4;
    --color-accent: #f59e0b;
    --color-info: #0ea5e9;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-bg: #f8f9fa;
    --color-surface: #ffffff;
    --color-text: #2d3436;
    --color-border: #e6e8eb;
    --color-primary-rgb: 29, 78, 216;
    --color-secondary-rgb: 6, 182, 212;
    --color-accent-rgb: 245, 158, 11;
    --color-info-rgb: 14, 165, 233;
    --color-success-rgb: 22, 163, 74;
    --color-danger-rgb: 220, 38, 38;
    --color-bg-rgb: 248, 249, 250;
    --color-surface-rgb: 255, 255, 255;
    --color-text-rgb: 45, 52, 54;
    --color-border-rgb: 230, 232, 235;
    --radius: 14px;
    --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --color-primary-contrast: #ffffff;
    --color-secondary-contrast: #ffffff;
    --color-accent-contrast: #111827;
    --color-info-contrast: #ffffff;
    --color-success-contrast: #ffffff;
    --color-danger-contrast: #ffffff;
}

.daraja-pos-themed,
.appearance-page,
.appearance-preview {
    font-family: var(--font);
}

body.daraja-pos-themed {
    --pos-primary-50: rgba(var(--color-primary-rgb), 0.08);
    --pos-primary-100: rgba(var(--color-primary-rgb), 0.12);
    --pos-primary-200: rgba(var(--color-primary-rgb), 0.18);
    --pos-primary-500: var(--color-primary);
    --pos-primary-600: var(--color-primary);
    --pos-primary-700: var(--color-primary);
    --pos-primary-800: var(--color-primary);
    --pos-primary-900: var(--color-primary);
    --pos-primary-950: var(--color-primary);
    --pos-success-50: rgba(var(--color-secondary-rgb), 0.08);
    --pos-success-100: rgba(var(--color-secondary-rgb), 0.12);
    --pos-success-500: var(--color-secondary);
    --pos-success-600: var(--color-secondary);
    --pos-success-700: var(--color-secondary);
    --pos-warning-50: rgba(var(--color-accent-rgb), 0.08);
    --pos-warning-500: var(--color-accent);
    --pos-warning-600: var(--color-accent);
    --pos-accent-500: var(--color-accent);
    --pos-accent-600: var(--color-accent);
    --pos-info-500: var(--color-info);
    --pos-info-600: var(--color-info);
    --pos-header-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --pos-header-border: rgba(var(--color-info-rgb), 0.28);
    --pos-header-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-info) 100%);
    --pos-header-accent-text: var(--color-accent-contrast);
    --pos-glow: 0 16px 40px rgba(var(--color-primary-rgb), 0.14);
    --pos-soft-shadow: 0 10px 24px rgba(var(--color-primary-rgb), 0.1);
}

body.daraja-pos-themed.pos-theme-light,
body.daraja-pos-themed:not(.pos-theme-dark) {
    --pos-shell-bg: var(--color-bg);
    --pos-surface-1: var(--color-surface);
    --pos-surface-2: rgba(var(--color-primary-rgb), 0.04);
    --pos-stroke: rgba(var(--color-border-rgb), 0.92);
    --pos-divider: rgba(var(--color-border-rgb), 0.78);
    --pos-text-strong: var(--color-text);
    --pos-text-muted: rgba(var(--color-text-rgb), 0.72);
    --pos-header-text: var(--color-primary-contrast);
}

body.daraja-pos-themed.pos-theme-dark {
    --pos-shell-bg: #0f172a;
    --pos-surface-1: #111827;
    --pos-surface-2: rgba(var(--color-primary-rgb), 0.12);
    --pos-stroke: rgba(255, 255, 255, 0.1);
    --pos-divider: rgba(255, 255, 255, 0.08);
    --pos-text-strong: #f8fafc;
    --pos-text-muted: rgba(226, 232, 240, 0.7);
    --pos-header-text: #ffffff;
    --pos-glow: 0 18px 42px rgba(0, 0, 0, 0.34);
    --pos-soft-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.daraja-pos-themed main,
.daraja-pos-themed #scrollable-container,
.daraja-pos-themed .thetop,
.daraja-pos-themed .sale_pos,
.appearance-preview {
    background: var(--color-bg);
    color: var(--color-text);
}

.daraja-pos-themed a,
.appearance-page a,
.appearance-preview a,
.daraja-pos-themed .text-primary,
.appearance-page .text-primary,
.appearance-preview .text-primary {
    color: var(--color-primary) !important;
}

.daraja-pos-themed .btn,
.daraja-pos-themed .label,
.daraja-pos-themed .badge,
.daraja-pos-themed .form-control,
.daraja-pos-themed .select2-container--default .select2-selection--single,
.daraja-pos-themed .select2-container--default .select2-selection--multiple,
.daraja-pos-themed .box,
.daraja-pos-themed .modal-content,
.daraja-pos-themed .product_box,
.daraja-pos-themed .product-card,
.appearance-page .btn,
.appearance-page .label,
.appearance-page .badge,
.appearance-page .form-control,
.appearance-page .select2-container--default .select2-selection--single,
.appearance-page .select2-container--default .select2-selection--multiple,
.appearance-page .box,
.appearance-page .modal-content,
.appearance-preview .btn,
.appearance-preview .label,
.appearance-preview .badge,
.appearance-preview .form-control,
.appearance-preview .box,
.appearance-preview .modal-content {
    border-radius: var(--radius) !important;
}

.daraja-pos-themed .btn-primary,
.daraja-pos-themed .bg-primary,
.daraja-pos-themed .badge-primary,
.daraja-pos-themed .label-primary,
.appearance-page .btn-primary,
.appearance-page .bg-primary,
.appearance-page .badge-primary,
.appearance-page .label-primary,
.appearance-preview .btn-primary,
.appearance-preview .bg-primary,
.appearance-preview .badge-primary,
.appearance-preview .label-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary-contrast) !important;
}

.daraja-pos-themed .btn-info,
.daraja-pos-themed .bg-info,
.daraja-pos-themed .badge-info,
.daraja-pos-themed .label-info,
.appearance-page .btn-info,
.appearance-page .bg-info,
.appearance-page .badge-info,
.appearance-page .label-info,
.appearance-preview .btn-info,
.appearance-preview .bg-info,
.appearance-preview .badge-info,
.appearance-preview .label-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: var(--color-info-contrast) !important;
}

.daraja-pos-themed .btn-success,
.daraja-pos-themed .bg-success,
.daraja-pos-themed .badge-success,
.daraja-pos-themed .label-success,
.appearance-page .btn-success,
.appearance-page .bg-success,
.appearance-page .badge-success,
.appearance-page .label-success,
.appearance-preview .btn-success,
.appearance-preview .bg-success,
.appearance-preview .badge-success,
.appearance-preview .label-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success-contrast) !important;
}

.daraja-pos-themed .btn-danger,
.daraja-pos-themed .bg-danger,
.daraja-pos-themed .badge-danger,
.daraja-pos-themed .label-danger,
.appearance-page .btn-danger,
.appearance-page .bg-danger,
.appearance-page .badge-danger,
.appearance-page .label-danger,
.appearance-preview .btn-danger,
.appearance-preview .bg-danger,
.appearance-preview .badge-danger,
.appearance-preview .label-danger {
    background-color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: var(--color-danger-contrast) !important;
}

.daraja-pos-themed .btn-warning,
.daraja-pos-themed .bg-warning,
.daraja-pos-themed .badge-warning,
.daraja-pos-themed .label-warning,
.appearance-page .btn-warning,
.appearance-page .bg-warning,
.appearance-page .badge-warning,
.appearance-page .label-warning,
.appearance-preview .btn-warning,
.appearance-preview .bg-warning,
.appearance-preview .badge-warning,
.appearance-preview .label-warning {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent-contrast) !important;
}

.daraja-pos-themed .btn-default,
.daraja-pos-themed .btn-secondary,
.appearance-page .btn-default,
.appearance-page .btn-secondary,
.appearance-preview .btn-default,
.appearance-preview .btn-secondary {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.daraja-pos-themed .btn-primary:hover,
.daraja-pos-themed .btn-primary:focus,
.daraja-pos-themed .btn-info:hover,
.daraja-pos-themed .btn-info:focus,
.daraja-pos-themed .btn-success:hover,
.daraja-pos-themed .btn-success:focus,
.daraja-pos-themed .btn-danger:hover,
.daraja-pos-themed .btn-danger:focus,
.daraja-pos-themed .btn-warning:hover,
.daraja-pos-themed .btn-warning:focus,
.appearance-page .btn-primary:hover,
.appearance-page .btn-primary:focus,
.appearance-page .btn-info:hover,
.appearance-page .btn-info:focus,
.appearance-page .btn-success:hover,
.appearance-page .btn-success:focus,
.appearance-page .btn-danger:hover,
.appearance-page .btn-danger:focus,
.appearance-page .btn-warning:hover,
.appearance-page .btn-warning:focus,
.appearance-preview .btn-primary:hover,
.appearance-preview .btn-primary:focus,
.appearance-preview .btn-info:hover,
.appearance-preview .btn-info:focus,
.appearance-preview .btn-success:hover,
.appearance-preview .btn-success:focus,
.appearance-preview .btn-danger:hover,
.appearance-preview .btn-danger:focus,
.appearance-preview .btn-warning:hover,
.appearance-preview .btn-warning:focus {
    box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), 0.2);
    filter: brightness(0.96);
}

.daraja-pos-themed .sale_pos .box,
.daraja-pos-themed .sale_pos .box-body,
.daraja-pos-themed .sale_pos .tw-rounded-2xl,
.daraja-pos-themed .modal-content,
.daraja-pos-themed .product_box,
.daraja-pos-themed .product-card,
.appearance-page .modal-content,
.appearance-preview .appearance-preview-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: 0 14px 28px rgba(var(--color-text-rgb), 0.06);
}

.daraja-pos-themed .product_box:hover,
.daraja-pos-themed .product-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: 0 18px 34px rgba(var(--color-primary-rgb), 0.14);
}

.daraja-pos-themed .sale_pos .input-group-addon,
.daraja-pos-themed .input-group-addon,
.appearance-page .input-group-addon,
.appearance-preview .input-group-addon {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    border-color: var(--color-border) !important;
    color: var(--color-primary) !important;
}

.daraja-pos-themed .form-control,
.daraja-pos-themed .select2-container--default .select2-selection--single,
.daraja-pos-themed .select2-container--default .select2-selection--multiple,
.appearance-page .form-control,
.appearance-page .select2-container--default .select2-selection--single,
.appearance-page .select2-container--default .select2-selection--multiple,
.appearance-preview .form-control,
.appearance-preview .select2-container--default .select2-selection--single,
.appearance-preview .select2-container--default .select2-selection--multiple {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

.daraja-pos-themed .form-control:focus,
.daraja-pos-themed .select2-container--default.select2-container--focus .select2-selection--multiple,
.daraja-pos-themed .select2-container--default.select2-container--open .select2-selection--single,
.appearance-page .form-control:focus,
.appearance-page .select2-container--default.select2-container--focus .select2-selection--multiple,
.appearance-page .select2-container--default.select2-container--open .select2-selection--single,
.appearance-preview .form-control:focus,
.appearance-preview .select2-container--default.select2-container--focus .select2-selection--multiple,
.appearance-preview .select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgba(var(--color-primary-rgb), 0.55) !important;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12) !important;
}

.daraja-pos-themed .table,
.appearance-preview .appearance-preview-table {
    color: var(--color-text);
}

.daraja-pos-themed .table > thead > tr > th,
.daraja-pos-themed .table > tbody > tr > td,
.daraja-pos-themed .table > tfoot > tr > td,
.daraja-pos-themed .table-bordered,
.daraja-pos-themed .table-bordered > thead > tr > th,
.daraja-pos-themed .table-bordered > tbody > tr > td,
.appearance-preview .appearance-preview-table th,
.appearance-preview .appearance-preview-table td {
    border-color: var(--color-border) !important;
}

.daraja-pos-themed .table-striped > tbody > tr:nth-of-type(odd) {
    background: rgba(var(--color-primary-rgb), 0.03);
}

.daraja-pos-themed .table-hover > tbody > tr:hover {
    background: rgba(var(--color-primary-rgb), 0.06);
}

.daraja-pos-themed .alert-info,
.daraja-pos-themed .callout-info,
.appearance-preview .appearance-preview-alert {
    background: rgba(var(--color-info-rgb), 0.09) !important;
    border-color: rgba(var(--color-info-rgb), 0.2) !important;
    color: var(--color-text) !important;
}

.daraja-pos-themed .alert-success,
.daraja-pos-themed .callout-success {
    background: rgba(var(--color-success-rgb), 0.09) !important;
    border-color: rgba(var(--color-success-rgb), 0.2) !important;
    color: var(--color-text) !important;
}

.daraja-pos-themed .alert-danger,
.daraja-pos-themed .callout-danger {
    background: rgba(var(--color-danger-rgb), 0.09) !important;
    border-color: rgba(var(--color-danger-rgb), 0.2) !important;
    color: var(--color-text) !important;
}

.daraja-pos-themed .alert-warning,
.daraja-pos-themed .callout-warning {
    background: rgba(var(--color-accent-rgb), 0.11) !important;
    border-color: rgba(var(--color-accent-rgb), 0.22) !important;
    color: var(--color-text) !important;
}

.daraja-pos-themed .dropdown-menu,
.appearance-page .dropdown-menu,
.appearance-preview .dropdown-menu {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius);
}

.daraja-pos-themed .dropdown-menu > li > a,
.appearance-page .dropdown-menu > li > a,
.appearance-preview .dropdown-menu > li > a {
    color: var(--color-text);
}

.daraja-pos-themed .dropdown-menu > li > a:hover,
.appearance-page .dropdown-menu > li > a:hover,
.appearance-preview .dropdown-menu > li > a:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
}

.daraja-pos-themed .pos-header-btn {
    border-color: rgba(var(--color-surface-rgb), 0.18) !important;
}

.daraja-pos-themed .pos-header-btn:hover,
.daraja-pos-themed .pos-header-btn:focus {
    background: rgba(var(--color-surface-rgb), 0.18) !important;
    box-shadow: 0 10px 22px rgba(var(--color-text-rgb), 0.12);
}

.daraja-pos-themed .pos-business-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius);
    background: rgba(var(--color-info-rgb), 0.18);
    border: 1px solid rgba(var(--color-info-rgb), 0.32);
    color: #ffffff;
}

.daraja-pos-themed .pos-business-branches {
    color: rgba(255, 255, 255, 0.78);
}

.daraja-pos-themed .pos-entry-shell {
    background: var(--color-surface) !important;
    border-radius: calc(var(--radius) + 2px) !important;
    border: 1px solid rgba(var(--color-primary-rgb), 0.12) !important;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(var(--color-text-rgb), 0.05) !important;
}

.daraja-pos-themed .pos-entry-addon {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-info-rgb), 0.08) 100%) !important;
    border: none !important;
    color: var(--color-primary) !important;
    padding: 12px 16px !important;
}

.daraja-pos-themed .pos-entry-field {
    border: none !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    background: var(--color-surface) !important;
}

.daraja-pos-themed .pos-entry-btn {
    border: none !important;
    background: transparent !important;
    color: var(--color-primary) !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}

.daraja-pos-themed .pos-entry-btn--accent {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08) 0%, rgba(var(--color-info-rgb), 0.08) 100%) !important;
}