/* ── Base RTL ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: 'Segoe UI', Arial, sans-serif;
    direction: rtl;
    text-align: right;
    background: #f1f5f9;
    color: #1e293b;
}

a { color: #2563eb; }
.btn-link { color: #2563eb; }

/* ── Layout ── */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 768px) {
    .page { flex-direction: row; }
    .sidebar { width: 250px; height: 100vh; position: sticky; top: 0; overflow-y: auto;
               display: flex; flex-direction: column; }
}

.sidebar {
    background: #0f172a;
    color: #e2e8f0;
}

main { flex: 1; overflow-x: hidden; }

.top-row {
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    min-height: 3rem;
}

.content { padding: 1.5rem; }

/* ── Nav ── */
.sidebar-brand {
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
    display: block;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.nav-item { margin: 1px 8px; }

.nav-link {
    color: #94a3b8 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    font-size: 0.875rem;
}

.nav-link:hover, .nav-link.active {
    background: rgba(255,255,255,0.1) !important;
    color: #f1f5f9 !important;
}

.nav-link.active {
    background: rgba(37,99,235,0.25) !important;
    color: #93c5fd !important;
}

.nav-section-divider {
    margin: 0.3rem 8px 0;
    padding: 0;
}

.nav-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    padding: 0.2rem 0.85rem 0.1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar-footer {
    padding: 0.5rem 1rem;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.8rem;
    color: #64748b;
}

.sidebar-logout-btn {
    background: none;
    border: none;
    padding: 0;
    color: #64748b;
    cursor: pointer;
    font-size: 0.8rem;
}

.sidebar-logout-btn:hover { color: #94a3b8; text-decoration: underline; }

/* ── Cards ── */
.card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    background: #fff;
}

.card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 10px 10px 0 0 !important;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
}

/* ── Status badges ── */
.status-badge {
    display: inline-block;
    padding: 0.22em 0.6em;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}

.badge-available    { background:#15803d; color:#fff; }
.badge-reserved     { background:#c2410c; color:#fff; }
.badge-ready        { background:#1d4ed8; color:#fff; }
.badge-readyforpickup { background:#1d4ed8; color:#fff; }
.badge-checkedout   { background:#6d28d9; color:#fff; }
.badge-faulty       { background:#b91c1c; color:#fff; }
.badge-inactive     { background:#64748b; color:#fff; }
.badge-outofstock   { background:#92400e; color:#fff; }
.badge-stored       { background:#0369a1; color:#fff; }
.badge-partial-stored { background:#6d28d9; color:#fff; }
.badge-new          { background:#0284c7; color:#fff; }
.badge-preparing    { background:#d97706; color:#fff; }
.badge-cancelled    { background:#475569; color:#fff; }
.badge-requested    { background:#475569; color:#fff; }
.badge-assigned     { background:#b45309; color:#fff; }
.badge-returned     { background:#166534; color:#fff; }

/* ── Stat cards ── */
.stat-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow 0.15s, transform 0.15s;
}

.stat-card-link:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform: translateY(-1px);
}

.stat-card .stat-number { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label  { font-size: 0.82rem; color: #64748b; margin-top: 0.2rem; display: flex; align-items: center; gap: 0.25rem; }

/* ── Dashboard 7-card grid ── */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.6rem;
    align-items: stretch;
}

/* Tighter padding so 7 cards fit comfortably side-by-side */
.dashboard-stats-grid .stat-card,
.dashboard-stats-grid a.stat-card {
    padding: 0.85rem 0.75rem;
    display: block;
}

@media (max-width: 1199px) {
    .dashboard-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .dashboard-stats-grid { grid-template-columns: repeat(3, 1fr); }
    .dashboard-stats-grid .stat-card { padding: 0.75rem 0.6rem; }
}

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

/* ── Icons ── */
.app-icon { flex-shrink: 0; display: inline-block; vertical-align: -3px; }
.stat-card-icon { opacity: 0.6; vertical-align: -2px; flex-shrink: 0; }

/* ── Login branding ── */
.login-app-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

/* ── Tables ── */
.table th { font-weight: 600; background: #f8fafc; font-size: 0.85rem; color: #475569; }
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover { background: #f8fafc; }
.table td { font-size: 0.9rem; }

/* ── Forms ── */
.form-label { font-weight: 500; font-size: 0.875rem; color: #334155; }
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    text-align: right;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}

/* ── Buttons ── */
.btn { border-radius: 8px; font-weight: 500; transition: opacity 0.15s, transform 0.1s; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Weapon picker ── */
.weapon-picker-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

.weapon-picker-item {
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.1s;
}

.weapon-picker-item:last-child { border-bottom: none; }
.weapon-picker-item:hover:not(.weapon-picker-disabled) { background: #eff6ff; }
.weapon-picker-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.weapon-number { font-weight: 700; font-family: monospace; font-size: 1rem; }

/* ── Order item rows ── */
.order-item-row {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
}

/* ── Quick add ── */
.quick-add-row {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* ── Modals ── */
.modal-content { border-radius: 12px; border: 1px solid #e2e8f0; }
.modal-header { border-bottom: 1px solid #f1f5f9; }
.modal-footer { border-top: 1px solid #f1f5f9; }

/* ── Alerts ── */
.alert { border-radius: 8px; }

/* ── Validation ── */
.valid.modified:not([type=checkbox])  { outline: 1px solid #16a34a; }
.invalid { outline: 1px solid #dc2626; }
.validation-message { color: #dc2626; font-size: 0.85rem; }

/* ── Blazor error ── */
.blazor-error-boundary {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #7f1d1d;
}
.blazor-error-boundary::after { content: "אירעה שגיאה. אנא טען מחדש את הדף."; }

#blazor-error-ui {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    padding: 0.75rem 1rem;
    position: fixed;
    z-index: 9999;
    display: none;
    color: #7f1d1d;
}

.darker-border-checkbox.form-check-input { border-color: #929292; }
h1:focus { outline: none; }

/* ── Animations (section 4) ── */
@media (prefers-reduced-motion: no-preference) {
    .alert { animation: fade-in 0.18s ease; }
    .modal.show .modal-dialog { animation: slide-down 0.18s ease; }
    .card { transition: box-shadow 0.18s; }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Row highlight after update */
.row-updated {
    animation: row-highlight 0.9s ease-out;
}

@keyframes row-highlight {
    0%   { background: #dbeafe; }
    100% { background: transparent; }
}

/* Button saving state */
.btn-saving {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .content { padding: 0.75rem; }
    .stat-card .stat-number { font-size: 1.5rem; }
    .table td, .table th { white-space: normal; word-break: break-word; }
    .dashboard-stats-grid .stat-card .stat-number { font-size: 1.4rem; }
}
/* Connection recovery stays available even when the server circuit is disconnected. */
.connection-recovery{position:fixed;bottom:20px;left:16px;right:16px;z-index:12000;max-width:560px;margin:auto;padding:16px 20px;border:1px solid #cbd5e1;border-radius:14px;background:#fff;box-shadow:0 6px 30px #0f172a26;color:#193652;font-family:Arial,sans-serif}
.connection-recovery[hidden],.connection-recovery [hidden]{display:none!important}
.connection-recovery button{margin:12px 0 0 8px;min-height:44px;padding:8px 14px;border:1px solid #193652;border-radius:8px;background:#fff;color:#193652}