/* ========================================================
   نظام إدارة مصنع الأثاث - التصميم الرئيسي
   هوية بصرية: ورشة نجارة / دفتر طلبات عمل
   ======================================================== */

:root {
    --wood-dark: #5b3a29;      /* بني خشب غامق */
    --wood: #8a5a3a;           /* بني خشب أساسي */
    --wood-light: #c9925f;     /* بني فاتح / قشرة خشب */
    --amber: #d97a2b;          /* لون التمييز (برتقالي خشبي) */
    --cream: #f6f0e6;          /* خلفية كريمية دافئة */
    --cream-2: #efe6d6;        /* خلفية بطاقات */
    --ink: #2b211a;            /* نص أساسي غامق */
    --ink-soft: #6b5c4e;       /* نص ثانوي */
    --line: #ddccb3;           /* خط فاصل */
    --green: #3f7d4a;          /* مكتمل / نجاح */
    --yellow: #c98a1f;         /* قيد التنفيذ */
    --gray: #9c9286;           /* لم تبدأ */
    --red: #b3422f;            /* خطر / إلغاء */
    --radius: 10px;
    --shadow: 0 2px 10px rgba(43, 33, 26, 0.08);
    --shadow-lg: 0 8px 28px rgba(43, 33, 26, 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    direction: rtl;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 100vw;
    word-break: break-word;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 800;
    color: var(--wood-dark);
    margin: 0 0 .5rem;
}

a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* -------------------- لوجو TOKYO المتحرك -------------------- */
.tokyo-logo {
    display: inline-flex;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
    line-height: 1;
    direction: ltr;
}

.tokyo-logo .ch {
    display: inline-block;
    background: linear-gradient(90deg, var(--wood-light) 0%, #ffd9a0 50%, var(--wood-light) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--wood-light);
    -webkit-text-fill-color: transparent;
    animation: tokyo-shine 2.6s ease-in-out infinite;
}

.tokyo-logo.on-light .ch {
    color: var(--wood-dark);
    background: linear-gradient(90deg, var(--wood-dark) 0%, var(--amber) 50%, var(--wood-dark) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes tokyo-shine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* تأخير متتابع لكل حرف لإحساس "تموّج" بدل توهج موحّد */
.tokyo-logo .ch:nth-child(1) { animation-delay: 0s; }
.tokyo-logo .ch:nth-child(2) { animation-delay: .15s; }
.tokyo-logo .ch:nth-child(3) { animation-delay: .3s; }
.tokyo-logo .ch:nth-child(4) { animation-delay: .45s; }
.tokyo-logo .ch:nth-child(5) { animation-delay: .6s; }

.tokyo-logo.lg { font-size: 5.5rem; letter-spacing: 6px; }

@media (prefers-reduced-motion: reduce) {
    .tokyo-logo .ch { animation: none; }
}


.topbar {
    background: linear-gradient(135deg, var(--wood-dark), var(--wood));
    color: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.15rem;
    color: #fff;
}

.topbar .brand .tag {
    background: var(--amber);
    color: #fff;
    font-size: .7rem;
    padding: 3px 9px;
    border-radius: 20px;
    font-weight: 700;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.topbar-user .user-name {
    color: #fff;
    opacity: .85;
    font-size: .85rem;
    padding: 8px 10px;
    white-space: nowrap;
}

.topbar-user .logout-link {
    color: #fff;
    background: rgba(255,255,255,0.12);
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .92rem;
    white-space: nowrap;
}

.topbar-user .logout-link:hover {
    background: rgba(255,255,255,0.22);
    text-decoration: none;
}

.topbar-user .lang-switch-link {
    color: #fff;
    background: rgba(255,255,255,0.12);
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .85rem;
    white-space: nowrap;
}

.topbar-user .lang-switch-link:hover {
    background: rgba(255,255,255,0.22);
    text-decoration: none;
}

.topnav-links { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.topnav-links a {
    color: #fff;
    background: rgba(255,255,255,0.12);
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: .92rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.topnav-links a:hover {
    background: rgba(255,255,255,0.22);
    text-decoration: none;
}

.menu-toggle {
    display: none;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    padding: 4px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* -------------------- حاوية الصفحة -------------------- */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.page-header h1 { margin: 0; font-size: 1.5rem; }
.page-header .sub { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }

/* -------------------- بطاقات -------------------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.card-head h2, .card-head h3 { margin: 0; font-size: 1.1rem; }

/* -------------------- شارة "تذكرة عمل" (Signature element) -------------------- */
.work-ticket {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.work-ticket::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 90px; height: 90px;
    background: repeating-linear-gradient(135deg, var(--amber) 0 8px, transparent 8px 16px);
    opacity: .15;
    border-radius: 0 var(--radius) 0 100%;
}

.ticket-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 2px solid var(--amber);
    color: var(--amber);
    font-weight: 800;
    font-size: .78rem;
    padding: 4px 12px;
    border-radius: 30px;
    transform: rotate(-2deg);
    letter-spacing: .5px;
}

/* -------------------- شبكة الإحصائيات -------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-box {
    background: #fff;
    border: 1px solid var(--line);
    border-right: 5px solid var(--amber);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.stat-box .num {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--wood-dark);
    display: block;
    line-height: 1.2;
}

.stat-box .label {
    color: var(--ink-soft);
    font-size: .85rem;
    margin-top: 2px;
}

.stat-box.green { border-right-color: var(--green); }
.stat-box.yellow { border-right-color: var(--yellow); }
.stat-box.red { border-right-color: var(--red); }

/* -------------------- جداول -------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: .92rem;
    min-width: 600px;
}

table th, table td {
    padding: 12px 14px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

table th {
    background: var(--cream-2);
    color: var(--wood-dark);
    font-weight: 700;
    font-size: .85rem;
}

table tr:hover td { background: #fbf8f2; }

table td.wrap { white-space: normal; }

/* -------------------- نماذج -------------------- */
.form-group { margin-bottom: 16px; }

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--wood-dark);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
    font-size: .85rem;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1.4;
}

.checkbox-label input[type=checkbox] {
    width: auto;
    margin: 2px 0 0;
    flex-shrink: 0;
}

input[type=text], input[type=password], input[type=number],
input[type=tel], input[type=date], textarea, select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    background: #fffdf9;
    color: var(--ink);
}

input[type=file] {
    width: 100%;
    max-width: 100%;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--amber);
    outline-offset: 1px;
    border-color: var(--amber);
}

textarea { resize: vertical; min-height: 90px; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* تقسيم عمودين بنسبة 2:1 - يُستخدم للتخطيط الرئيسي (محتوى + شريط جانبي) */
.split-main-side {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: start;
}

/* ثلاثة أعمدة متساوية */
.split-thirds {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

/* صف فيه حقل يتمدد + عنصر بعرضه الطبيعي (مثل: حقل رفع + زر) */
.row-fill-auto {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

/* صف نموذج إضافة مرحلة: حقلين متفاوتين + زر */
.row-2fr-1fr-auto {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 10px;
    align-items: end;
}

/* صف فلترة: بحث + فلترين + زر */
.row-filter {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

/* حماية شاملة: أي عنصر مباشر داخل أي شبكة متجاوبة من هذي القائمة
   لا يجوز أن يتمدد بعرضه الطبيعي (auto) خارج حدود العمود المخصص له،
   وهذا يمنع نص طويل أو حقل إدخال من كسر التخطيط على الموبايل */
.form-row > *,
.split-main-side > *,
.split-thirds > *,
.row-fill-auto > *,
.row-2fr-1fr-auto > *,
.row-filter > * {
    min-width: 0;
}

@media (max-width: 640px) {
    .form-row,
    .split-main-side,
    .split-thirds,
    .row-fill-auto,
    .row-2fr-1fr-auto,
    .row-filter {
        grid-template-columns: 1fr;
    }
}

/* -------------------- أزرار -------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: transform .05s ease;
}

.btn:active { transform: scale(.97); }

.btn-primary { background: var(--amber); color: #fff; }
.btn-primary:hover { background: #c06a1f; text-decoration: none; }

.btn-secondary { background: var(--cream-2); color: var(--wood-dark); border: 1px solid var(--line); }
.btn-secondary:hover { background: #e6d9bf; text-decoration: none; }

.btn-danger { background: #fff; color: var(--red); border: 1px solid var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; text-decoration: none; }

.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }

.copy-link-btn.copied {
    background: var(--green) !important;
    color: #fff !important;
    border-color: var(--green) !important;
}

/* -------------------- مجموعة حقل + زر نسخ مدمج (input group) -------------------- */
.link-copy-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--cream-2);
    width: 100%;
}

.link-copy-group input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 12px;
    font-size: .9rem;
    color: var(--ink);
    min-width: 0;
    width: 100%;
}

.link-copy-group input:focus {
    outline: none;
}

.link-copy-group .copy-link-btn {
    flex-shrink: 0;
    border: none;
    border-right: 1px solid var(--line);
    background: #fff;
    color: var(--wood-dark);
    padding: 0 16px;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .15s ease, color .15s ease;
}

.link-copy-group .copy-link-btn:hover {
    background: var(--amber);
    color: #fff;
}

.link-copy-group .copy-link-btn.copied {
    background: var(--green) !important;
    color: #fff !important;
    border-color: var(--green) !important;
}

/* صف الأزرار أسفل رابط الزبون (فتح الرابط + واتساب جنب بعض) */
.link-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.link-actions-row > a,
.link-actions-row > span {
    flex: 1;
    text-align: center;
    justify-content: center;
    min-width: 140px;
}

@media (max-width: 400px) {
    .link-copy-group {
        flex-direction: column;
    }
    .link-copy-group .copy-link-btn {
        border-right: none;
        border-bottom: 1px solid var(--line);
        justify-content: center;
        padding: 8px 12px;
    }
    .link-copy-group input {
        padding: 10px 12px;
        text-align: center;
        font-size: .8rem;
    }
}

/* -------------------- شارات الحالة -------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 30px;
    font-size: .78rem;
    font-weight: 700;
}

.badge::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.badge-done { background: #e6f2e8; color: var(--green); }
.badge-progress { background: #fbf0dc; color: var(--yellow); }
.badge-pending { background: #f1eee8; color: var(--gray); }
.badge-cancelled { background: #fae6e2; color: var(--red); }
.badge-maintenance { background: #fde8e8; color: #c0392b; margin-right: 4px; }

/* -------------------- تتبع سير العمل (سكة المراحل) -------------------- */
.stage-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stage-item {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 26px;
}

.stage-item:last-child { padding-bottom: 0; }

.stage-item::before {
    content: '';
    position: absolute;
    right: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.stage-item:last-child::before { display: none; }

.stage-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    z-index: 1;
}

.stage-dot.done { background: var(--green); }
.stage-dot.in_progress { background: var(--yellow); }
.stage-dot.pending { background: var(--gray); }

.stage-content { flex: 1; padding-top: 2px; }
.stage-content .stage-name { font-weight: 700; color: var(--wood-dark); }
.stage-content .stage-meta { font-size: .82rem; color: var(--ink-soft); margin-top: 2px; }

/* -------------------- معرض صور -------------------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.gallery .thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 1/1;
}

.gallery .thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .15s ease;
}

.gallery .thumb img:hover {
    transform: scale(1.04);
}

.gallery .thumb .del-btn {
    position: absolute;
    top: 4px; left: 4px;
    background: rgba(179,66,47,.9);
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 24px; height: 24px;
    cursor: pointer;
    font-size: .85rem;
    z-index: 2;
}

/* -------------------- Lightbox (تكبير الصور) -------------------- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 14, 10, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 30px 16px;
    animation: lightbox-fade .15s ease;
}

.lightbox-overlay.open {
    display: flex;
}

@keyframes lightbox-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-overlay img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    object-fit: contain;
}

.lightbox-close {
    position: fixed;
    top: 18px;
    left: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.3);
}

@media (max-width: 640px) {
    .lightbox-close {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
    }
}

/* -------------------- نظام التعليقات (محادثة الزبون / المدير) -------------------- */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.chat-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    position: relative;
    line-size: 1.5;
}

.chat-bubble .chat-sender {
    font-weight: 800;
    font-size: .78rem;
    margin-bottom: 4px;
    display: block;
}

.chat-bubble .chat-text {
    font-size: .92rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble .chat-time {
    font-size: .72rem;
    margin-top: 5px;
    display: block;
    opacity: .65;
}

/* فقاعة الزبون: تبدأ من اليمين (محاذاة طبيعية RTL)، لون كريمي فاتح */
.chat-bubble.from-customer {
    align-self: flex-start;
    background: var(--cream-2);
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
}
.chat-bubble.from-customer .chat-sender { color: var(--wood-dark); }

/* فقاعة المدير: محاذاة معكوسة (يسار)، لون عنبري مميز */
.chat-bubble.from-admin {
    align-self: flex-end;
    background: var(--amber);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.chat-bubble.from-admin .chat-sender { color: #fff3e6; }
.chat-bubble.from-admin .chat-text { color: #fff; }

/* فقاعة التاجر: محاذاة معكوسة (يسار) كذلك، لون أخضر مميز للتفريق عن المدير */
.chat-bubble.from-trader {
    align-self: flex-end;
    background: var(--green);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.chat-bubble.from-trader .chat-sender { color: #e6f5ea; }
.chat-bubble.from-trader .chat-text { color: #fff; }

/* فقاعة موظف التركيب: محاذاة معكوسة (يسار) كذلك، لون أزرق مميز للتفريق عن باقي الأطراف */
.chat-bubble.from-installer {
    align-self: flex-end;
    background: #2563a8;
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}
.chat-bubble.from-installer .chat-sender { color: #dce9f7; }
.chat-bubble.from-installer .chat-text { color: #fff; }

.chat-empty {
    text-align: center;
    color: var(--ink-soft);
    padding: 20px;
    font-size: .9rem;
}

.chat-pending-note {
    text-align: center;
    font-size: .85rem;
    color: var(--ink-soft);
    background: var(--cream-2);
    border-radius: 8px;
    padding: 10px 14px;
}

.chat-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--red);
    color: #fff;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 800;
    margin-right: 6px;
}

/* -------------------- قنوات تواصل بديلة (واتساب / إيميل) -------------------- */
.contact-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 480px) {
    .contact-channels { grid-template-columns: 1fr; }
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid var(--line);
    transition: transform .1s ease;
}

.contact-channel:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.contact-channel .icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.contact-channel .info { line-height: 1.35; }
.contact-channel .title { font-weight: 800; font-size: .9rem; display: block; }
.contact-channel .speed { font-size: .76rem; display: block; opacity: .85; }

.contact-channel.whatsapp {
    background: #e9f8ee;
    border-color: #bfe6cc;
}
.contact-channel.whatsapp .title { color: #1f7a3d; }
.contact-channel.whatsapp .speed { color: #2f9d52; }

.contact-channel.email {
    background: var(--cream-2);
    border-color: var(--line);
}
.contact-channel.email .title { color: var(--wood-dark); }
.contact-channel.email .speed { color: var(--ink-soft); }

/* -------------------- تنبيهات -------------------- */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: .92rem;
}

.alert-success { background: #e6f2e8; color: var(--green); border: 1px solid #bfe0c6; }
.alert-error { background: #fae6e2; color: var(--red); border: 1px solid #f0c2b6; }

/* -------------------- صفحة دخول -------------------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--wood-dark), var(--wood) 60%, var(--wood-light));
    padding: 20px;
}

.login-box {
    background: #fff;
    border-radius: 14px;
    padding: 34px 30px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
}

.login-box .logo {
    text-align: center;
    margin-bottom: 22px;
}

.login-box .logo .icon {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 6px;
}

/* -------------------- صفحة الزبون العامة -------------------- */
.public-header {
    background: linear-gradient(135deg, var(--wood-dark), var(--wood));
    color: #fff;
    padding: 26px 20px;
    text-align: center;
}

.public-header h1 { color: #fff; font-size: 1.4rem; margin-bottom: 4px; }
.public-header p { color: rgba(255,255,255,.85); margin: 0; font-size: .9rem; }

.trader-brand {
    display: inline-block;
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: .5px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--amber);
}

/* -------------------- مساعدات -------------------- */
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--ink-soft); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--ink-soft);
}
.empty-state .icon { font-size: 2.6rem; margin-bottom: 10px; display: block; }

/* -------------------- استجابة للهواتف -------------------- */
@media (max-width: 768px) {
    /* على الموبايل: تختفي روابط الأقسام من القائمة العلوية (تنتقل للشريط السفلي)،
       وتبقى القائمة العلوية فقط للشعار + اسم المستخدم + زر الخروج */
    .menu-toggle { display: none; }
    .topnav-links { display: none; }
    .topbar { justify-content: space-between; }
    .topbar-user .user-name { display: none; } /* اسم المستخدم يُخفى على الشاشات الضيقة جدًا لتوفير المساحة، الخروج يبقى ظاهرًا */

    .container { padding: 16px 14px 90px; } /* مساحة سفلية إضافية حتى لا يغطي الشريط السفلي آخر محتوى الصفحة */
    table { font-size: .85rem; }
    .page-header { flex-direction: column; align-items: flex-start; }
}

/* -------------------- الشريط السفلي (قائمة تنقل بشكل تطبيق موبايل) -------------------- */
.bottom-nav {
    display: none; /* مخفي افتراضيًا، يظهر فقط على الموبايل بالقاعدة أدناه */
}

@media (max-width: 768px) {
    body.has-bottom-nav { padding-bottom: 0; }

    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 60;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 16px rgba(43,33,26,0.08);
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        color: var(--ink-soft);
        text-decoration: none;
        border-radius: 12px;
        min-width: 0;
    }

    .bottom-nav-item:hover {
        text-decoration: none;
    }

    .bottom-nav-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px; /* مربعات بحواف ناعمة، أكثر حداثة من الدوائر الصارمة */
        background: var(--cream-2);
        font-size: 1.2rem;
        transition: background .15s ease, transform .15s ease;
    }

    .bottom-nav-label {
        font-size: .68rem;
        font-weight: 600;
        white-space: nowrap;
        max-width: 64px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* العنصر النشط حاليًا: خلفية بلون العلامة + تكبير خفيف للأيقونة */
    .bottom-nav-item.active .bottom-nav-icon {
        background: var(--amber);
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(217,122,43,0.35);
    }

    .bottom-nav-item.active .bottom-nav-label {
        color: var(--amber);
        font-weight: 800;
    }

    .bottom-nav-badge {
        position: absolute;
        top: -4px;
        left: -4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        background: var(--red);
        color: #fff;
        border-radius: 20px;
        font-size: .65rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
    }
}

@media (max-width: 420px) {
    .tokyo-logo.lg { font-size: 3.8rem; letter-spacing: 4px; }
}