/* ============================================================
   Jeeblay Design System — Components
   نظام مكوّنات موحّد، Mobile-First، RTL-First
   مطابق 100% للهوية البصرية المرجعية
   ============================================================ */

/* ============================================================
   § BASE RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-family-ar);
    font-size: var(--font-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--text-link-hover);
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================================
   § APP SHELL (Mobile-First Container)
   ============================================================ */
.j-app {
    min-height: 100vh;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
}

.j-app-shell {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    background: var(--bg-secondary);
    min-height: 100vh;
    position: relative;
    padding-bottom: calc(var(--app-bottom-nav-height) + var(--spacing-md));
}

@media (min-width: 992px) {
    .j-app-shell {
        max-width: 100%;
        padding-bottom: var(--spacing-xl);
    }
}

/* ============================================================
   § APP HEADER (matches reference image)
   menu icon | bell | logo (centered) | avatar
   ============================================================ */
.j-header {
    height: var(--app-header-height);
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--app-content-pad);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: 1px solid var(--border-light);
}

.j-header__left,
.j-header__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.j-header__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--font-weight-bold);
    color: var(--brand-600);
    font-size: var(--font-lg);
}

.j-header__brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--brand-700);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-extrabold);
    font-size: 0.95rem;
}

.j-header__brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}

.j-header__brand-fallback {
    color: var(--brand-600);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.j-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: background var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}
.j-icon-btn:hover,
.j-icon-btn:focus {
    background: var(--gray-100);
    color: var(--text-primary);
    outline: none;
}
.j-icon-btn svg {
    width: 22px;
    height: 22px;
}

.j-icon-btn .j-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    background: var(--brand-500);
    color: #fff;
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.j-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    border: 2px solid var(--gray-100);
    background: var(--gray-100);
    flex-shrink: 0;
}
.j-avatar--sm { width: 32px; height: 32px; }
.j-avatar--lg { width: 56px; height: 56px; }
.j-avatar--xl { width: 72px; height: 72px; }

/* ============================================================
   § PAGE CONTENT
   ============================================================ */
.j-page {
    padding: var(--spacing-md) var(--app-content-pad);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* ============================================================
   § HERO WELCOME (greeting + role badge)
   ============================================================ */
.j-hero {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0 0;
}

.j-hero__title {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
    line-height: var(--line-height-tight);
}

.j-hero__subtitle {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0;
}

.j-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.85rem;
    background: var(--brand-500);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    align-self: flex-start;
    line-height: 1;
}
.j-role-badge--soft {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ============================================================
   § WALLET CARD — Hero (gradient green, like User space in image)
   ============================================================ */
.j-wallet-card {
    background: var(--wallet-gradient);
    color: #fff;
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-brand);
}

.j-wallet-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.15) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.j-wallet-card__content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.j-wallet-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.j-wallet-card__icon svg { width: 24px; height: 24px; color: #fff; }

.j-wallet-card__label {
    font-size: var(--font-xs);
    opacity: 0.9;
    margin: 0 0 0.2rem;
    font-weight: var(--font-weight-medium);
}
.j-wallet-card__amount {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
    letter-spacing: var(--letter-spacing-tight);
    font-variant-numeric: tabular-nums;
}
.j-wallet-card__amount small {
    font-size: var(--font-base);
    font-weight: var(--font-weight-medium);
    opacity: 0.85;
}
.j-wallet-card__currency {
    font-size: var(--font-sm);
    opacity: 0.8;
    margin-inline-start: 0.3rem;
}

.j-wallet-card__action {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.55rem 1rem;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    transition: background var(--transition-fast);
    position: relative;
    z-index: 1;
    white-space: nowrap;
}
.j-wallet-card__action:hover {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
}
.j-wallet-card__action svg { width: 14px; height: 14px; }

/* ============================================================
   § WALLET CARD (plain — for Merchant/Shipping/Agent/Delivery)
   ============================================================ */
.j-wallet-plain {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}
.j-wallet-plain .j-wallet-card__content {
    color: var(--text-primary);
}
.j-wallet-plain .j-wallet-card__icon {
    background: var(--brand-50);
}
.j-wallet-plain .j-wallet-card__icon svg { color: var(--brand-600); }
.j-wallet-plain .j-wallet-card__label { color: var(--text-secondary); opacity: 1; }
.j-wallet-plain .j-wallet-card__amount { color: var(--text-primary); }
.j-wallet-plain .j-wallet-card__action {
    background: transparent;
    color: var(--brand-600);
    border: 1px solid var(--brand-100);
}
.j-wallet-plain .j-wallet-card__action:hover {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ============================================================
   § STATUS CARD (Merchant: store active, Shipping: status, etc.)
   ============================================================ */
.j-status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-xl);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.j-status-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.j-status-card__icon svg { width: 30px; height: 30px; color: var(--brand-600); }

.j-status-card__body { flex: 1; min-width: 0; }
.j-status-card__title {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0 0 0.2rem;
    font-weight: var(--font-weight-medium);
}
.j-status-card__value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}
.j-status-card__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(31, 168, 130, 0.18);
    display: inline-block;
}
.j-status-card__meta {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin: 0.15rem 0 0;
}
.j-status-card__link {
    color: var(--brand-600);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.j-status-card__link svg { width: 14px; height: 14px; }

/* ============================================================
   § AVAILABILITY TOGGLE (Delivery agent)
   ============================================================ */
.j-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.j-toggle input { display: none; }
.j-toggle__track {
    width: 44px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--gray-300);
    transition: background var(--transition-base);
    position: relative;
    flex-shrink: 0;
}
.j-toggle__track::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform var(--transition-base);
}
.j-toggle input:checked + .j-toggle__track {
    background: var(--brand-500);
}
[dir="rtl"] .j-toggle input:checked + .j-toggle__track::after {
    transform: translateX(-18px);
}
[dir="ltr"] .j-toggle input:checked + .j-toggle__track::after {
    transform: translateX(18px);
}

/* ============================================================
   § SECTION HEADING
   ============================================================ */
.j-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.j-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}
.j-section__title {
    font-size: var(--font-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}
.j-section__link {
    font-size: var(--font-xs);
    color: var(--brand-600);
    font-weight: var(--font-weight-semibold);
}

/* ============================================================
   § QUICK ACTIONS (4-icon strip, like "إجراءات سريعة" in image)
   ============================================================ */
.j-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.j-quick {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
    text-align: center;
}
.j-quick:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    border-color: var(--brand-200);
}

.j-quick__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.j-quick__icon svg { width: 22px; height: 22px; }

.j-quick__label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    line-height: 1.2;
}

/* ============================================================
   § SERVICES GRID (2 columns of large tiles, like "خدماتك" in image)
   ============================================================ */
.j-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.j-service {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
    min-height: 96px;
    text-align: center;
}
.j-service:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    border-color: var(--brand-200);
}

.j-service__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.j-service__icon svg { width: 22px; height: 22px; }

.j-service__label {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.3;
}

/* ============================================================
   § FULL-WIDTH ROW (e.g. "الرسائل" / "التقارير")
   ============================================================ */
.j-row-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
    grid-column: 1 / -1;
}
.j-row-tile:hover {
    border-color: var(--brand-200);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.j-row-tile__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.j-row-tile__icon svg { width: 20px; height: 20px; }

/* ============================================================
   § BOTTOM NAV (mobile-first, sticky bottom)
   "الإشعارات | الرسائل | المساحة | الخلاصة"
   ============================================================ */
.j-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--app-bottom-nav-height);
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: stretch;
    z-index: var(--z-fixed);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(15, 20, 26, 0.04);
}

.j-bottom-nav__inner {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(var(--j-bottom-nav-count, 4), minmax(0, 1fr));
    overflow: hidden;
}

.j-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-decoration: none;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
    position: relative;
    padding: 0.5rem 0.25rem 0.4rem;
    min-width: 0;
}
.j-bottom-nav__item svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.j-bottom-nav__item span {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.66rem;
    line-height: 1.15;
}
.j-bottom-nav__item:hover { color: var(--brand-600); }

.j-bottom-nav__item.is-active {
    color: var(--brand-600);
}
.j-bottom-nav__item.is-active::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--brand-500);
}

@media (min-width: 992px) {
    .j-bottom-nav { display: none; }
    .j-app-shell { padding-bottom: var(--spacing-xl); }
}

/* ============================================================
   § BUTTONS
   ============================================================ */
.j-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
}
.j-btn:focus { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.j-btn--block { width: 100%; }
.j-btn--sm { padding: 0.5rem 0.85rem; font-size: var(--font-xs); }
.j-btn--lg { padding: 0.95rem 1.5rem; font-size: var(--font-base); }

.j-btn--primary {
    background: var(--brand-500);
    color: #fff;
    border-color: var(--brand-500);
    box-shadow: var(--shadow-brand);
}
.j-btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.j-btn--ghost {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-100);
}
.j-btn--ghost:hover { background: var(--brand-100); color: var(--brand-800); }

.j-btn--outline {
    background: transparent;
    color: var(--brand-600);
    border-color: var(--brand-200);
}
.j-btn--outline:hover { background: var(--brand-50); color: var(--brand-700); }

.j-btn--neutral {
    background: var(--gray-100);
    color: var(--text-primary);
    border-color: var(--gray-200);
}
.j-btn--neutral:hover { background: var(--gray-200); }

.j-btn--danger {
    background: var(--danger-500);
    color: #fff;
}
.j-btn--danger:hover { background: var(--danger-700); color: #fff; }

/* ============================================================
   § FORMS
   ============================================================ */
.j-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.j-label {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.j-input,
.j-select,
.j-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.j-input:focus,
.j-select:focus,
.j-textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(31, 168, 130, 0.12);
}
.j-input::placeholder,
.j-textarea::placeholder { color: var(--text-tertiary); }

.j-textarea { min-height: 96px; resize: vertical; }

.j-help {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
}
.j-error {
    font-size: var(--font-xs);
    color: var(--danger-500);
}

/* ============================================================
   § GENERIC CARDS
   ============================================================ */
.j-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}
.j-card--soft {
    background: var(--bg-card-soft);
    border-color: transparent;
}
.j-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.j-card__title {
    margin: 0;
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

/* ============================================================
   § LIST ROWS (orders, transactions, messages)
   ============================================================ */
.j-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.j-list-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
}
.j-list-row:last-child { border-bottom: none; }
.j-list-row:hover { background: var(--gray-50); color: var(--text-primary); }

.j-list-row__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.j-list-row__icon svg { width: 20px; height: 20px; }

.j-list-row__body { flex: 1; min-width: 0; }
.j-list-row__title {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--text-primary);
}
.j-list-row__meta {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin: 0.15rem 0 0;
}
.j-list-row__value {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}
.j-list-row__value--up   { color: var(--success-500); }
.j-list-row__value--down { color: var(--danger-500); }

/* ============================================================
   § PILL / CHIP
   ============================================================ */
.j-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--gray-100);
    color: var(--text-secondary);
    line-height: 1;
}
.j-pill--success { background: var(--success-50); color: var(--success-700); }
.j-pill--warning { background: var(--warning-50); color: var(--warning-700); }
.j-pill--danger  { background: var(--danger-50);  color: var(--danger-700); }
.j-pill--info    { background: var(--info-50);    color: var(--info-700); }
.j-pill--brand   { background: var(--brand-50);   color: var(--brand-700); }

/* ============================================================
   § OFFCANVAS / SIDE DRAWER (header menu)
   ============================================================ */
.j-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
}
.j-drawer.is-open { display: block; }
.j-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: var(--bg-overlay);
}
.j-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(86%, 320px);
    background: var(--bg-card);
    box-shadow: var(--shadow-xl);
    overflow-y: auto;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.j-drawer__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-light);
}
.j-drawer__close {
    margin-inline-start: auto;
}
.j-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.j-drawer__nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-sm);
    transition: background var(--transition-fast);
}
.j-drawer__nav a:hover,
.j-drawer__nav a.is-active {
    background: var(--brand-50);
    color: var(--brand-700);
}
.j-drawer__nav a.is-active {
    background: var(--brand-700);
    color: #fff;
    font-weight: var(--font-weight-bold);
    border-inline-start: 3px solid var(--brand-900);
}
.j-drawer__nav a svg { width: 18px; height: 18px; }

/* ============================================================
   § DESKTOP / RESPONSIVE
   ============================================================ */
@media (min-width: 768px) {
    .j-page {
        padding: var(--spacing-lg) var(--spacing-xl);
        gap: var(--spacing-xl);
    }
    .j-quick-grid { grid-template-columns: repeat(6, 1fr); }
    .j-services   { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
    .j-app-shell {
        max-width: 1180px;
    }
    .j-services { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   § DARK MODE TOKENS (placeholder hooks — kept light by default)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    /* not auto-enabled — opt in via [data-theme="dark"] */
}
[data-theme="dark"] {
    --bg-primary:    #0F141A;
    --bg-secondary:  #161C24;
    --bg-card:       #1B222B;
    --bg-card-soft:  #161C24;
    --text-primary:  #F7F9FA;
    --text-secondary: #C9D1D7;
    --text-tertiary: #9AA5AD;
    --border-light:  #1F262E;
    --border-card:   #232B35;
    --border-medium: #2A333E;
}

/* ============================================================
   § FOCUS-VISIBLE GLOBAL
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ============================================================
   § FORCED COLORS / HIGH CONTRAST
   ============================================================ */
@media (forced-colors: active) {
    .j-quick, .j-service, .j-card, .j-list, .j-list-row, .j-bottom-nav,
    .j-header, .j-status-card, .j-wallet-plain {
        border: 1px solid CanvasText;
    }
}

/* ============================================================
   § LEGACY-CLASS BRIDGE
   يربط كلاسات القالب القديم (Bootstrap + cmn-btn + form--control...)
   بنظام Jeeblay الجديد — حتى تأخذ كل الصفحات الداخلية الـ 1000+
   اللوك الجديد تلقائياً بدون لمس كل ملف.
   ============================================================ */

/* ----- Buttons (Bootstrap + custom legacy) ----- */
.btn,
.cmn-btn,
.btn--base,
.btn-base,
.btn--primary,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
    background: var(--brand-500);
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1.2;
    box-shadow: var(--shadow-brand);
}
.btn:hover, .cmn-btn:hover, .btn--base:hover, .btn-base:hover,
.btn--primary:hover, .btn-primary:hover {
    background: var(--brand-800);
    color: #fff !important;
}
.btn-secondary, .btn--secondary {
    background: var(--brand-50);
    color: var(--brand-700) !important;
    box-shadow: none;
    border-color: var(--brand-100);
}
.btn-secondary:hover, .btn--secondary:hover {
    background: var(--brand-100);
    color: var(--brand-800) !important;
}
.btn-danger, .btn--danger {
    background: var(--danger-500);
    color: #fff !important;
    box-shadow: none;
}
.btn-danger:hover, .btn--danger:hover { background: var(--danger-700); }
.btn-success, .btn--success {
    background: var(--success-700);
    color: #fff !important;
    box-shadow: var(--shadow-brand);
}
.btn-warning, .btn--warning {
    background: var(--warning-50);
    color: var(--warning-700) !important;
    border-color: var(--warning-500);
    box-shadow: none;
}
.btn-info, .btn--info {
    background: var(--info-700);
    color: #fff !important;
    box-shadow: none;
}
.btn-outline-primary, .btn--outline {
    background: transparent;
    color: var(--brand-600) !important;
    border-color: var(--brand-200);
    box-shadow: none;
}
.btn-outline-primary:hover, .btn--outline:hover {
    background: var(--brand-50);
    color: var(--brand-700) !important;
}
.btn-light, .btn--light {
    background: var(--gray-100);
    color: var(--text-primary) !important;
    box-shadow: none;
    border-color: var(--gray-200);
}
.btn-dark, .btn--dark {
    background: var(--gray-900);
    color: #fff !important;
    box-shadow: none;
}
.btn-link, .btn--link {
    background: transparent;
    color: var(--brand-600) !important;
    box-shadow: none;
    border: none;
    text-decoration: underline;
}
.btn-sm, .btn--sm { padding: .5rem .85rem; font-size: var(--font-xs); }
.btn-lg, .btn--lg { padding: .95rem 1.5rem; font-size: var(--font-base); }

/* ----- Cards ----- */
.card,
.dashboard-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.card-header,
.card-title {
    background: transparent;
    border-bottom: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}
.card-body { padding: 1.25rem; color: var(--text-primary); }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
}
.card.style--two,
.card.style--three { border-color: var(--brand-100); }

/* ----- Forms ----- */
.form-control,
.form--control,
.form-select,
.form--select,
.select2-container--default .select2-selection--single {
    width: 100%;
    padding: .75rem 1rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-medium) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-sm);
    color: var(--text-primary) !important;
    line-height: 1.5;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: auto !important;
}
.form-control:focus,
.form--control:focus,
.form-select:focus,
.form--select:focus,
.select2-container--default.select2-container--focus .select2-selection--single {
    outline: none;
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px rgba(31, 168, 130, 0.12) !important;
}
.form-control::placeholder, .form--control::placeholder {
    color: var(--text-tertiary);
}
.form-label, .form-group label {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: .375rem;
}
.form-group, .form-group-ultra { margin-bottom: 1rem; }
.form-text, .form-help {
    font-size: var(--font-xs);
    color: var(--text-tertiary);
    margin-top: .25rem;
}
.invalid-feedback, .invalid-feedback.d-block {
    color: var(--danger-500);
    font-size: var(--font-xs);
    margin-top: .25rem;
}
.is-invalid {
    border-color: var(--danger-500) !important;
}
.input-group { border-radius: var(--radius-md); }
.input-group-text {
    background: var(--gray-50);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    padding: .75rem 1rem;
}
.form-check-input {
    accent-color: var(--brand-500);
    width: 1rem;
    height: 1rem;
}
.form-check-input:checked {
    background-color: var(--brand-500);
    border-color: var(--brand-500);
}

/* ----- Tables ----- */
.table,
.table--responsive--md {
    width: 100%;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow-sm);
}
.table thead th,
.table > :not(caption) > * > th {
    background: var(--gray-50);
    color: var(--text-secondary);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border-light);
    text-align: inherit;
}
.table tbody td,
.table > :not(caption) > * > td {
    padding: 1rem;
    color: var(--text-primary);
    font-size: var(--font-sm);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.table tbody tr:hover td { background: var(--gray-50); }
.table tbody tr:last-child td { border-bottom: none; }

/* ----- Badges & Pills ----- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--gray-100);
    color: var(--text-secondary);
    line-height: 1;
}
.badge.bg-success, .badge--success { background: var(--success-50); color: var(--success-700); }
.badge.bg-warning, .badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge.bg-danger,  .badge--danger  { background: var(--danger-50);  color: var(--danger-700); }
.badge.bg-info,    .badge--info    { background: var(--info-50);    color: var(--info-700); }
.badge.bg-primary, .badge--primary { background: var(--brand-50);   color: var(--brand-700); }

/* ----- Bootstrap utility overrides ----- */
.text-primary, .text--base { color: var(--brand-600) !important; }
.text-success { color: var(--success-700) !important; }
.text-warning { color: var(--warning-700) !important; }
.text-danger  { color: var(--danger-700) !important; }
.text-info    { color: var(--info-700) !important; }
.text-muted   { color: var(--text-tertiary) !important; }

.bg-primary, .bg--base   { background: var(--brand-700) !important; color: #fff; }
.bg-success { background: var(--success-700) !important; color: #fff; }
.bg-warning { background: var(--warning-50) !important; color: var(--warning-700); }
.bg-danger  { background: var(--danger-500) !important; color: #fff; }
.bg-info    { background: var(--info-700) !important; color: #fff; }
.bg-light   { background: var(--gray-50) !important; }
.bg-dark    { background: var(--gray-900) !important; color: #fff; }

/* ----- Bank icons / dashboard widgets (legacy) ----- */
.bank-icon, .dashboard-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* ----- Pagination ----- */
.pagination {
    display: inline-flex;
    gap: .25rem;
}
.page-item .page-link {
    background: #fff;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: .5rem .85rem;
    font-size: var(--font-sm);
}
.page-item.active .page-link,
.page-item .page-link:hover {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.page-item.disabled .page-link { color: var(--text-tertiary); background: var(--gray-50); }

/* ----- Alerts (notify) ----- */
.alert {
    border-radius: var(--radius-md);
    padding: .85rem 1rem;
    border: 1px solid transparent;
    font-size: var(--font-sm);
}
.alert-success { background: var(--success-50); color: var(--success-700); border-color: var(--brand-100); }
.alert-warning { background: var(--warning-50); color: var(--warning-700); border-color: #F0BD63; }
.alert-danger  { background: var(--danger-50);  color: var(--danger-700); border-color: #F4B5B5; }
.alert-info    { background: var(--info-50);    color: var(--info-700); border-color: #A8C5F2; }

/* ----- Dashboard generic page wrappers (legacy) ----- */
.dashboard-section,
.account-section,
.section-bg,
.padding-top,
.padding-bottom {
    background: var(--bg-secondary);
}

/* ----- Modal ----- */
.modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-2xl);
    background: var(--bg-card);
}
.modal-header {
    border-bottom: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
}
.modal-footer {
    border-top: 1px solid var(--border-light);
    padding: 1rem 1.25rem;
}

/* ----- Dropdown ----- */
.dropdown-menu {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    font-size: var(--font-sm);
    color: var(--text-primary);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--brand-50);
    color: var(--brand-700);
}

/* ----- Text-input groups & widgets ----- */
.account-form .form-group input[type="text"],
.account-form .form-group input[type="password"],
.account-form .form-group input[type="email"],
.account-form .form-group input[type="number"] {
    border-radius: var(--radius-md);
}

/* ----- Old role-dashboard remnants -> hide visual residue ----- */
.role-dashboard__overlay,
.role-dashboard__sidebar-promo,
.workspace-status-pill,
.workspace-wallet-pill {
    display: none !important;
}

/* ----- Container shims ----- */
.container, .container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--app-content-pad);
}
@media (min-width: 1200px) {
    .container { max-width: 1180px; }
}

/* ----- Misc resets that conflict with new look ----- */
.preloader { display: none !important; }