/* ═══════════════════════════════════════════════════════════════
   נדל״ן פרו — Design System Components
   Extracted from LexManager V299 → mapped to new architecture tokens
   
   Contains reusable UI primitives:
   1.  Button variants (size + color)
   2.  Form field tokens
   3.  Card section tokens
   4.  Tab component
   5.  Badge/tag tokens
   6.  Grid utilities
   7.  Spacing utilities
   8.  Skeleton loading
   9.  Micro-interactions (hover, active, focus)
   10. Icon sizing
   11. Action row layout
   12. Sticky header
   13. Scroll containers
   14. Premium overrides
   
   LOAD ORDER: After variables.css + themes.css, before page-specific CSS
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. BUTTON SIZE TOKENS ─── */

/* Small: tags, table actions, compact UI */
.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    gap: 4px;
}

/* Medium (default): forms, modals, toolbars */
.btn-md {
    padding: 9px 18px;
    font-size: 13px;
    border-radius: var(--radius-md);
    gap: 6px;
}

/* Large: banners, CTAs, hero actions */
.btn-lg {
    padding: 12px 26px;
    font-size: 14px;
    border-radius: var(--radius-lg);
    gap: 8px;
}


/* ─── BUTTON COLOR VARIANTS ─── */

.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    font-family: var(--font-primary);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-default);
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: var(--gradient-navy);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: var(--shadow-md);
}
.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.95);
    box-shadow: var(--shadow-xs);
}

.btn-accent {
    background: var(--gradient-gold);
    color: var(--gray-900);
    box-shadow: var(--shadow-glow-gold);
}
.btn-accent:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 20px rgba(228,177,66,0.3);
}

.btn-success {
    background: var(--gradient-emerald);
    color: white;
    box-shadow: 0 4px 16px rgba(16,185,129,0.3);
}
.btn-success:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 20px rgba(16,185,129,0.35);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-600), var(--danger-500));
    color: white;
    box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}
.btn-danger:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 4px 20px rgba(239,68,68,0.35);
}

.btn-info {
    background: linear-gradient(135deg, var(--info-600), var(--info-500));
    color: white;
    box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}
.btn-info:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    box-shadow: none;
}
.btn-ghost:hover {
    border-color: var(--border-strong);
    background: var(--bg-sunken);
}

.btn-danger-outline {
    border: 1px solid rgba(239,68,68,0.4);
    background: transparent;
    color: var(--danger-500);
}
.btn-danger-outline:hover {
    background: rgba(239,68,68,0.08);
    border-color: var(--danger-500);
}

.btn-secondary {
    background: var(--bg-sunken);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    box-shadow: none;
}
.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}


/* ─── 2. FORM FIELD TOKENS ─── */

.ds-field {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
    outline: none;
}
.ds-field:focus {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}
.ds-field::placeholder {
    color: var(--text-muted);
}

.ds-field-alt {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-default);
    background: var(--bg-sunken);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
}

.ds-field-sm {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

textarea.ds-field {
    resize: vertical;
    min-height: 60px;
}

/* Select enhancement */
select.ds-field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e7a89'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 32px;
}


/* ─── 3. CARD SECTION TOKEN ─── */

.ds-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 28px 30px;
    box-shadow: var(--shadow-card);
    transition: all var(--duration-normal) var(--ease-default);
}

.ds-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-strong);
}

.ds-card-flat {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: 28px 30px;
}


/* ─── 4. STICKY HEADER TOKEN ─── */

.ds-sticky-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    background: var(--bg-sunken);
    z-index: var(--z-sticky);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}


/* ─── 5. TAB COMPONENT ─── */

.ds-tab-bar {
    display: flex;
    border-bottom: 2px solid var(--border-default);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ds-tab {
    padding: 10px 20px;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--text-tertiary);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-default);
    white-space: nowrap;
}
.ds-tab:hover { color: var(--text-primary); }
.ds-tab.active {
    color: var(--accent-500);
    border-bottom-color: var(--accent-500);
}


/* ─── 6. BADGE / TAG TOKENS ─── */

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    line-height: 1.4;
}

.ds-badge-primary { background: var(--primary-50); color: var(--primary-600); }
.ds-badge-accent  { background: var(--accent-50);  color: var(--accent-600); }
.ds-badge-success { background: var(--success-50); color: var(--success-600); }
.ds-badge-warning { background: var(--warning-50); color: var(--warning-600); }
.ds-badge-danger  { background: var(--danger-50);  color: var(--danger-600); }
.ds-badge-info    { background: var(--info-50);    color: var(--info-600); }
.ds-badge-neutral { background: var(--gray-100);   color: var(--gray-600); }

/* Dark theme badge overrides */
[data-theme="dark"] .ds-badge-primary,
[data-theme="ocean"] .ds-badge-primary,
[data-theme="emerald"] .ds-badge-primary,
[data-theme="rose"] .ds-badge-primary,
[data-theme="midnight"] .ds-badge-primary { background: rgba(77,103,147,0.15); }

[data-theme="dark"] .ds-badge-accent,
[data-theme="ocean"] .ds-badge-accent,
[data-theme="emerald"] .ds-badge-accent,
[data-theme="rose"] .ds-badge-accent,
[data-theme="midnight"] .ds-badge-accent { background: rgba(228,177,66,0.12); }

[data-theme="dark"] .ds-badge-success,
[data-theme="ocean"] .ds-badge-success,
[data-theme="emerald"] .ds-badge-success,
[data-theme="rose"] .ds-badge-success,
[data-theme="midnight"] .ds-badge-success { background: rgba(34,197,94,0.12); }

[data-theme="dark"] .ds-badge-danger,
[data-theme="ocean"] .ds-badge-danger,
[data-theme="emerald"] .ds-badge-danger,
[data-theme="rose"] .ds-badge-danger,
[data-theme="midnight"] .ds-badge-danger { background: rgba(239,68,68,0.12); }

[data-theme="dark"] .ds-badge-warning,
[data-theme="ocean"] .ds-badge-warning,
[data-theme="emerald"] .ds-badge-warning,
[data-theme="rose"] .ds-badge-warning,
[data-theme="midnight"] .ds-badge-warning { background: rgba(245,158,11,0.12); }

[data-theme="dark"] .ds-badge-info,
[data-theme="ocean"] .ds-badge-info,
[data-theme="emerald"] .ds-badge-info,
[data-theme="rose"] .ds-badge-info,
[data-theme="midnight"] .ds-badge-info { background: rgba(59,130,246,0.12); }

[data-theme="dark"] .ds-badge-neutral,
[data-theme="ocean"] .ds-badge-neutral,
[data-theme="emerald"] .ds-badge-neutral,
[data-theme="rose"] .ds-badge-neutral,
[data-theme="midnight"] .ds-badge-neutral { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

/* Counter badge */
.ds-counter {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: var(--weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}


/* ─── 7. GRID UTILITIES ─── */

.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ds-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.ds-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

@media (max-width: 768px) {
    .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) and (min-width: 769px) {
    .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ─── 8. SPACING UTILITIES ─── */

.ds-section    { margin-bottom: 24px; }
.ds-section-sm { margin-bottom: 14px; }
.ds-section-lg { margin-bottom: 36px; }


/* ─── 9. SCROLL CONTAINERS ─── */

.ds-scroll-x  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-scroll-y  { overflow-y: auto; max-height: 300px; }
.ds-scroll-sm { overflow-y: auto; max-height: 200px; }


/* ─── 10. ACTION ROW (button groups in modals/forms) ─── */

.ds-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 16px;
}
.ds-actions-spread {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}


/* ─── 11. ICON SIZE TOKENS ─── */

.ds-ico-sm { width: 16px; height: 16px; }
.ds-ico-md { width: 20px; height: 20px; }
.ds-ico-lg { width: 24px; height: 24px; }
.ds-ico-xl { width: 32px; height: 32px; }


/* ─── 12. SKELETON LOADING ─── */

@keyframes ds-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.ds-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-sunken) 25%,
        var(--bg-elevated) 50%,
        var(--bg-sunken) 75%
    );
    background-size: 200% 100%;
    animation: ds-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.ds-skeleton-text {
    height: 14px;
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
}
.ds-skeleton-text:last-child { width: 60%; }

.ds-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.ds-skeleton-card {
    height: 120px;
    border-radius: var(--radius-xl);
}

.ds-skeleton-row {
    height: 52px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}


/* ─── 13. PREMIUM MICRO-INTERACTIONS ─── */

/* Card hover lift */
.ds-hover-lift {
    transition: transform var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
.ds-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

/* Button press */
.ds-press:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 50ms;
}

/* Scale hover (icons, action buttons) */
.ds-hover-scale {
    transition: transform var(--duration-fast) var(--ease-default);
}
.ds-hover-scale:hover { transform: scale(1.08); }
.ds-hover-scale:active { transform: scale(0.95); }

/* Subtle gold row highlight (RTL — inset on right) */
.ds-row-highlight {
    transition: all var(--duration-fast) var(--ease-default);
}
.ds-row-highlight:hover {
    background: var(--accent-50);
    box-shadow: inset 3px 0 0 var(--accent-500);
}

[data-theme="dark"] .ds-row-highlight:hover,
[data-theme="ocean"] .ds-row-highlight:hover,
[data-theme="emerald"] .ds-row-highlight:hover,
[data-theme="rose"] .ds-row-highlight:hover,
[data-theme="midnight"] .ds-row-highlight:hover {
    background: rgba(var(--accent-r, 228), var(--accent-g, 177), var(--accent-b, 66), 0.06);
}


/* ─── 14. PROGRESS BAR ─── */

.ds-progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
    overflow: hidden;
}

.ds-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.ds-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
}

.ds-progress-fill.low    { background: linear-gradient(90deg, var(--danger-500), var(--danger-400)); }
.ds-progress-fill.medium { background: linear-gradient(90deg, var(--warning-500), var(--warning-100)); }
.ds-progress-fill.high   { background: linear-gradient(90deg, var(--success-600), var(--success-200)); }
.ds-progress-fill.gold   { background: var(--gradient-gold); }


/* ─── 15. STATUS DOT ─── */

.ds-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ds-status-dot.active {
    background: var(--success-500);
    box-shadow: 0 0 8px rgba(16,185,129,0.4);
}

.ds-status-dot.pending {
    background: var(--accent-500);
    box-shadow: 0 0 8px rgba(228,177,66,0.3);
}

.ds-status-dot.inactive {
    background: var(--gray-400);
}

/* Pulsing dot */
.ds-status-dot.pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.3;
    animation: ds-pulse 2s ease-in-out infinite;
}
.ds-status-dot.pulse { position: relative; }

@keyframes ds-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0;   transform: scale(1.5); }
}


/* ─── 16. AVATAR ─── */

.ds-avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: var(--weight-black);
    flex-shrink: 0;
    letter-spacing: -0.5px;
    transition: transform var(--duration-fast) var(--ease-default);
}
.ds-avatar:hover { transform: scale(1.08); }
.ds-avatar-sm { width: 32px; height: 32px; font-size: 12px; border-radius: var(--radius-md); }
.ds-avatar-lg { width: 52px; height: 52px; font-size: 19px; }


/* ─── 17. DIVIDER ─── */

.ds-divider {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: var(--space-4) 0;
}

.ds-divider-subtle {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-3) 0;
}


/* ─── 18. EMPTY STATE ─── */

.ds-empty {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--text-muted);
}

.ds-empty-icon {
    font-size: 48px;
    opacity: 0.35;
    margin-bottom: var(--space-4);
}

.ds-empty-title {
    font-family: var(--font-primary);
    font-weight: var(--weight-bold);
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.ds-empty-text {
    font-size: 13px;
    color: var(--text-muted);
}


/* ─── 19. MODAL OVERLAY (premium) ─── */

.ds-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    direction: rtl;
    animation: fade-in 200ms ease-out;
}

.ds-modal-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scale-in 250ms ease-out;
}


/* ─── 20. FOCUS RING (accessible) ─── */

.ds-focus-ring:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}


/* ─── 21. TOOLTIP ─── */

.ds-tooltip {
    position: relative;
}
.ds-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: var(--gray-900);
    color: var(--gray-100);
    font-size: 11px;
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-default);
    z-index: var(--z-tooltip);
}
.ds-tooltip:hover::after { opacity: 1; }


/* ─── 22. DISABLED STATE ─── */

.ds-disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ─── 23. PRINT OPTIMIZATION ─── */

@media print {
    .sidebar, .app-header, .app-sidebar { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .ds-card, .table-container { box-shadow: none !important; border: 1px solid #ddd !important; }
    * { animation: none !important; transition: none !important; }
}


/* ─── 24. REDUCED MOTION ─── */

@media (prefers-reduced-motion: reduce) {
    .ds-hover-lift:hover { transform: none; }
    .ds-hover-scale:hover { transform: none; }
    .ds-skeleton { animation: none; }
    .ds-status-dot.pulse::after { animation: none; }
}


/* ─── 25. SCREEN READER ONLY ─── */

.ds-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}