:root {
    --primary: #1a56db;
    --primary-dark: #0e3a8a;
    --primary-light: #3b82f6;
    --gold: #f59e0b;
    --gold-dark: #d97706;
    --warning: #f59e0b;
    --ink: #0f172a;
    --muted: #64748b;
    --surface: #f6f8fc;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
    --shadow-md: 0 6px 18px rgba(15,23,42,.08);
    --shadow-lg: 0 18px 40px rgba(15,23,42,.14);
}

* { font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif; }

/* New Saudi Riyal symbol (U+20C1) rendered via masked SVG so it inherits text color & size */
.riyal {
    display: inline-block;
    width: .82em;
    height: .92em;
    vertical-align: -.08em;
    background-color: currentColor;
    -webkit-mask: url('/assets/img/sar.svg') no-repeat center / contain;
    mask: url('/assets/img/sar.svg') no-repeat center / contain;
    margin-inline: .1em;
}
/* Fallback to readable text where CSS masking is unsupported */
@supports not ((-webkit-mask: url('#')) or (mask: url('#'))) {
    .riyal {
        width: auto;
        height: auto;
        background: none;
        vertical-align: baseline;
    }
    .riyal::after { content: 'ر.س'; }
}

html { scroll-behavior: smooth; }

body {
    background: var(--surface);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(26,86,219,.18); }

h1, h2, h3, h4, h5 { letter-spacing: -0.01em; }

/* Cards */
.card {
    border-radius: var(--radius);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: var(--shadow-sm);
}

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; padding: .55rem 1.2rem; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-lg { border-radius: 12px; }

.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 6px 16px rgba(26,86,219,.25); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 10px 22px rgba(26,86,219,.32); }

.btn-warning { background: var(--gold); border-color: var(--gold); color: #1f2937; box-shadow: 0 6px 16px rgba(245,158,11,.28); }
.btn-warning:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #1f2937; box-shadow: 0 10px 22px rgba(245,158,11,.34); }

.btn-outline-light:hover { box-shadow: 0 6px 16px rgba(255,255,255,.12); }

/* Hover helpers */
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }
.hover-bg:hover { background: rgba(15,23,42,.04); }

/* Navbar */
.navbar.bg-primary { background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important; }
.navbar .nav-link { font-weight: 600; opacity: .9; transition: opacity .15s ease; }
.navbar .nav-link:hover { opacity: 1; }

/* Hero */
.hero-section { position: relative; overflow: hidden; }
.hero-section::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(900px 420px at 85% -10%, rgba(245,158,11,.18), transparent 60%),
      radial-gradient(720px 360px at 0% 110%, rgba(59,130,246,.30), transparent 55%);
    pointer-events: none;
}
.hero-section > .container { position: relative; z-index: 1; }
.chat-demo-card { border-radius: 18px !important; }

/* Assistant avatar (AI orb) */
.assistant-avatar,
.assistant-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 1;
    aspect-ratio: 1 / 1;
    position: relative;
}
.assistant-avatar {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    box-shadow: 0 4px 14px rgba(26,86,219,.40), inset 0 1px 0 rgba(255,255,255,.35);
}
.assistant-avatar::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid rgba(59,130,246,.45);
    animation: orb-pulse 2.6s ease-in-out infinite;
    pointer-events: none;
}
.assistant-avatar .ai-spark { width: 22px; height: 22px; }
.assistant-avatar-sm {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    box-shadow: 0 2px 8px rgba(26,86,219,.32);
}
.assistant-avatar-sm .ai-spark { width: 16px; height: 16px; }
.ai-spark { display: block; color: #fff; }
@keyframes orb-pulse {
    0%, 100% { transform: scale(1); opacity: .55; }
    50% { transform: scale(1.14); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .assistant-avatar::after { animation: none; opacity: 0; }
}

/* Typing indicator */
.typing-dots { display: inline-flex; align-items: center; gap: 4px; height: 14px; }
.typing-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--primary-light);
    opacity: .4;
    animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* Forms */
.form-control, .input-group-text { border-radius: 10px; border-color: #dee2e6; }
.form-control { padding: .6rem .9rem; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,86,219,.12); }

/* Badges */
.badge { font-weight: 600; }

/* Subtle bg utilities */
.bg-primary-subtle { background-color: rgba(26,86,219,.1) !important; }
.bg-success-subtle { background-color: rgba(16,185,129,.1) !important; }
.bg-warning-subtle { background-color: rgba(245,158,11,.1) !important; }
.bg-danger-subtle { background-color: rgba(239,68,68,.1) !important; }
.bg-info-subtle { background-color: rgba(14,165,233,.1) !important; }
.bg-secondary-subtle { background-color: rgba(100,116,139,.1) !important; }

.text-primary { color: var(--primary) !important; }
.navbar-dark.bg-primary { background-color: var(--primary) !important; }

/* FAQ accordion */
.faq-accordion .accordion-item { border: 1px solid rgba(15,23,42,.08); border-radius: 12px !important; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-accordion .accordion-button { border-radius: 12px; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); background: rgba(26,86,219,.06); box-shadow: none; }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 3px rgba(26,86,219,.12); }

/* Scrollbar (chat) */
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: #f1f5f9; }
.chat-messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

/* Admin */
.admin-layout { font-size: 14px; }
.admin-sidebar .nav-link { font-size: 13.5px; transition: all .15s; }
.admin-sidebar .nav-link:hover { background: rgba(255,255,255,.1); color: white !important; }
.admin-sidebar .nav-link.active { background: var(--primary) !important; color: white !important; }

table thead th { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }

.page-link { border-radius: 8px !important; margin: 0 2px; }

/* Stat tiles (clean, distinctive on mobile) */
.stat-item { padding: .5rem .25rem; border-radius: 12px; transition: background .15s ease; }

@media (max-width: 768px) {
    /* لا تُخفِ الشريط الجانبي بـ display:none — فهو offcanvas منزلق على الجوال
       تتحكّم فيه Bootstrap (visibility + transform). display:none يمنع فتحه. */
    .hero-section { min-height: auto !important; padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }

    /* Tighter vertical rhythm so the landing page reads as summarized, not scattered (home-scoped) */
    .home-page section.py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .home-page section.py-4 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    .home-page .text-center.mb-5 { margin-bottom: 1.75rem !important; }

    /* Hero typography scales down for a clean, balanced fit */
    .hero-section h1.display-4 { font-size: 1.95rem; line-height: 1.25; }
    .hero-section .lead { font-size: 1rem; }

    /* Landing section headings (home-scoped) */
    .home-page h2.h1 { font-size: 1.55rem; }
    .home-page .display-5 { font-size: 2rem; }

    /* Primary actions go full-width and stack for comfortable tapping */
    .hero-cta { gap: .65rem !important; }
    .hero-cta .btn { width: 100%; }

    /* Trust badges wrap neatly under the buttons */
    .hero-trust { gap: .4rem 1.1rem !important; flex-wrap: wrap; }

    /* Stats become tidy cards that feel intentional on small screens */
    .stat-item {
        background: #fff;
        border: 1px solid rgba(15,23,42,.07);
        box-shadow: var(--shadow-sm);
        padding: .85rem .5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .stat-item .fs-3 { font-size: 1.35rem !important; }
}

.content-section h3 { font-size: 1.2rem; font-weight: 700; margin-top: 2rem; margin-bottom: .75rem; color: #1e293b; }
.content-section p { color: #475569; line-height: 1.8; }

/* Payment method icons */
.payment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    padding: 5px 8px;
    height: 38px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.payment-chip img { display: block; height: 26px; width: auto; }

/* PWA install button (floating pill) */
.pwa-install-btn {
    position: fixed;
    inset-inline-start: 16px;
    bottom: 16px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 28px rgba(26,86,219,.38);
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, box-shadow .15s ease;
}
.pwa-install-btn.show { opacity: 1; transform: translateY(0); }
.pwa-install-btn:hover { box-shadow: 0 14px 34px rgba(26,86,219,.46); }
.pwa-install-btn i { font-size: 16px; }
.pwa-install-close {
    margin-inline-start: 4px;
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    font-size: 16px; line-height: 1;
}
.pwa-install-close:hover { background: rgba(255,255,255,.35); }
@media (prefers-reduced-motion: reduce) {
    .pwa-install-btn { transition: opacity .25s ease; transform: none; }
}

/* ─── شريط التنقّل السفلي (تجربة تطبيق PWA) ─────────────────── */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.app-bottom-nav .abn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 7px;
    color: #6b7280;
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.1;
    transition: color .15s ease, background-color .15s ease;
}
.app-bottom-nav .abn-item i {
    font-size: 1.3rem;
    line-height: 1;
}
.app-bottom-nav .abn-item.active {
    color: #1a56db;
}
.app-bottom-nav .abn-item:active {
    background: rgba(26, 86, 219, .07);
}
.app-bottom-nav .abn-icon {
    position: relative;
    display: inline-flex;
}
.app-bottom-nav .abn-badge {
    position: absolute;
    top: -6px;
    inset-inline-start: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
/* أفسح مكاناً أسفل المحتوى كي لا يحجبه الشريط على الجوال. */
@media (max-width: 991.98px) {
    body {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── صفحة إنشاء الخطاب (/create) — توزيع مريح ومتجاوب ──────── */
/* سطح المكتب: عمودان بارتفاع ثابت يُمرَّر كلٌّ منهما باستقلال. */
@media (min-width: 992px) {
    .create-page .create-grid { height: calc(100vh - 130px); }
    .create-page .chat-col,
    .create-page .summary-col { height: 100%; }
}
/* الجوال/اللوحي: تدفّق طبيعي بدل الارتفاع المزدوج الذي كان يربك التخطيط
   ويتعارض مع شريط التنقّل السفلي. */
@media (max-width: 991.98px) {
    .create-page .create-grid,
    .create-page .chat-col,
    .create-page .summary-col { height: auto; }
    .create-page .chat-card { height: 62vh; min-height: 340px; }
    .create-page .summary-col > .card { height: auto !important; }
    .create-page #summaryCard,
    .create-page #resultCard { max-height: none; }
    /* عنوان الرأس يأخذ سطراً كاملاً كي لا يزدحم مع الشارة والأزرار. */
    .create-page .create-header h5 { font-size: .98rem; width: 100%; order: -1; }
}


/* ─── V22: Mobile/PWA polish, responsive cards, fixed app bars ───────── */
html, body { max-width: 100%; overflow-x: hidden; }
.app-shell { background: #f8fafc; }
.app-top-nav { z-index: 1040; }
@media (display-mode: standalone) {
    body { background: #f8fafc; }
    .app-top-nav { position: sticky; top: 0; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 8px 24px rgba(15,23,42,.10) !important; }
    .navbar-brand { font-size: 1.05rem !important; }
    footer { display: none; }
    .container, .container-fluid { max-width: 100%; }
    .card { border-radius: 1.15rem !important; }
}
@media (max-width: 991.98px) {
    .navbar .container { padding-inline: .85rem; }
    .navbar-collapse { margin-top: .75rem; padding: .75rem; border-radius: 1rem; background: rgba(15,23,42,.12); }
    .app-bottom-nav { min-height: 64px; backdrop-filter: blur(18px); background: rgba(255,255,255,.94); }
    .app-bottom-nav .abn-item.active { background: rgba(26,86,219,.08); }
    .app-bottom-nav .abn-item.active i { transform: translateY(-1px); }
    .client-kpi-card, .mobile-kpi-card { border: 0; box-shadow: 0 12px 32px rgba(15,23,42,.08); border-radius: 1.25rem; }
    .table-responsive { border-radius: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive > .table { min-width: 720px; }
    .btn, .form-control, .form-select { min-height: 38px; }
    .btn-sm { min-height: 34px; }
}
/* Action area unified */
.admin-action-group, .table-actions, td.actions, td .action-buttons {
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-start;
}
.admin-action-group .btn, .table-actions .btn { border-radius: .75rem; }
@media (max-width: 575.98px) {
    .admin-action-group, .table-actions, td.actions, td .action-buttons { flex-direction: column; align-items: stretch; }
    .admin-action-group .btn, .table-actions .btn { width: 100%; }
}
/* Compact pagination that feels like "load more" */
.pagination .page-link { border-radius: .75rem; margin-inline: .15rem; font-weight: 700; }
.pagination .page-item.disabled .page-link { color: #94a3b8; }
.load-more-pager { display: flex; justify-content: center; margin-top: 1rem; }
.load-more-pager .btn { border-radius: 999px; padding-inline: 1.25rem; font-weight: 800; }
/* Client indicators */
.client-indicator { display:flex; gap:.75rem; align-items:center; padding: .95rem; border-radius:1.15rem; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.06); border:1px solid rgba(15,23,42,.06); }
.client-indicator-icon { width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:1rem; background:rgba(26,86,219,.10); color:#1a56db; flex:0 0 auto; }

/* ─── V28: Client dashboard responsive spacing + PWA app-like layout ───── */
.app-page-container {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding-inline: clamp(14px, 2.6vw, 28px) !important;
}
.client-app-page {
    min-height: calc(100vh - 72px);
    background: #f8fafc;
}
.client-dashboard,
.client-dashboard * {
    min-width: 0;
}
.client-dashboard .card,
.client-dashboard .list-group-item,
.client-dashboard .client-plan-card,
.client-dashboard .client-hero-card {
    overflow: hidden;
}
.client-hero-card {
    box-shadow: 0 16px 42px rgba(26, 86, 219, .18);
    background: linear-gradient(135deg, #1a56db, #1543a8) !important;
}
.client-page-title {
    line-height: 1.45;
}
.client-hero-actions .btn,
.client-hero-actions .badge {
    white-space: nowrap;
}
.client-kpi-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.client-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, .10) !important;
}
.client-plan-card {
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.client-plan-card:hover {
    border-color: rgba(26, 86, 219, .28) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}
.client-letter-row > div:first-child {
    min-width: 0;
}
.client-letter-row .fw-semibold,
.client-letter-row .text-secondary {
    overflow-wrap: anywhere;
}
.client-letter-actions {
    flex: 0 0 auto;
}
.client-dashboard .input-group {
    min-width: 0;
}
.client-dashboard .input-group .form-control {
    min-width: 0;
}
@media (display-mode: standalone) {
    .client-app-page {
        padding-top: .25rem;
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }
    .app-page-container {
        padding-inline: clamp(14px, 4vw, 22px) !important;
    }
}
@media (max-width: 767.98px) {
    .app-page-container {
        padding-inline: 14px !important;
    }
    .client-dashboard .row {
        --bs-gutter-x: .9rem;
        --bs-gutter-y: .9rem;
    }
    .client-hero-card {
        border-radius: 1.1rem !important;
    }
    .client-hero-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: .55rem !important;
    }
    .client-hero-actions .badge,
    .client-hero-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }
    .client-dashboard .card-header,
    .client-dashboard .card-body {
        padding: 1rem !important;
    }
    .client-dashboard .client-kpi-card .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right !important;
        gap: .9rem;
    }
    .client-dashboard .client-kpi-card .rounded-circle {
        margin-bottom: 0 !important;
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 auto;
    }
    .client-dashboard .client-kpi-card h2 {
        font-size: 1.55rem;
        margin-bottom: .15rem;
    }
    .client-letter-row {
        align-items: stretch !important;
    }
    .client-letter-actions {
        justify-content: flex-start;
        margin-top: .45rem;
    }
    .client-letter-item .client-letter-row {
        flex-direction: column;
    }
    .client-dashboard .btn {
        border-radius: .9rem;
    }
}
@media (max-width: 380px) {
    .client-hero-actions {
        grid-template-columns: 1fr;
    }
}