/* فونت وزیرمتن از طریق Google Fonts در هر layout بارگذاری می‌شود (https://fonts.google.com/specimen/Vazirmatn) — این فایل فقط از نامش استفاده می‌کند. */ :root { --teal-50: #E1F5EE; --teal-100: #9FE1CB; --teal-400: #1D9E75; --teal-600: #0F6E56; --teal-800: #085041; --gray-bg: #F5F6F5; --border: #E3E1D9; --text: #2C2C2A; --text-muted: #5F5E5A; --danger: #A32D2D; --danger-bg: #FCEBEB; } * { box-sizing: border-box; } button, input, select, textarea { font-family: inherit; } body { margin: 0; font-family: 'Vazirmatn', sans-serif; background: var(--gray-bg); color: var(--text); } a { color: inherit; text-decoration: none; } .layout { display: flex; min-height: 100vh; } .sidebar { width: 220px; background: var(--teal-800); color: #fff; display: flex; flex-direction: column; padding: 24px 16px; } .sidebar nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; flex: 1; } .sidebar nav a { padding: 10px 12px; border-radius: 8px; font-size: 14px; } .sidebar nav a:hover { background: rgba(255,255,255,0.08); } .sidebar .logout { font-size: 13px; opacity: 0.75; padding: 10px 12px; } .brand { font-size: 18px; font-weight: 500; } .brand span { color: var(--teal-100); font-weight: 400; } .brand.center { text-align: center; margin-bottom: 24px; } .content { flex: 1; padding: 32px; } h1 { font-size: 20px; font-weight: 500; margin: 0 0 20px; } .alert { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; } .alert-success { background: var(--teal-50); color: var(--teal-800); } .alert-error { background: var(--danger-bg); color: var(--danger); } .card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; } .grid-stats { display: flex; gap: 16px; margin-bottom: 24px; } .stat { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; } .stat .num { font-size: 26px; font-weight: 500; color: var(--teal-600); } .stat .label { font-size: 13px; color: var(--text-muted); margin-top: 4px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: right; padding: 10px 8px; border-bottom: 1px solid var(--border); } th { color: var(--text-muted); font-weight: 500; font-size: 13px; } .btn { display: inline-block; background: var(--teal-600); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; border: none; cursor: pointer; } .btn:hover { background: var(--teal-800); } form label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; } form .field { margin-bottom: 16px; } input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal-400); } .auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .auth-box { width: 360px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 32px; } .empty { color: var(--text-muted); font-size: 14px; padding: 20px 0; text-align: center; } .chat-card { display: flex; flex-direction: column; height: 60vh; padding: 16px; } .chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 4px; } .chat-bubble-row { display: flex; } .chat-bubble { max-width: 70%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 14px; } /* پیام‌های صاحب حیوان: همیشه در یک سمت با پس‌زمینه‌ی فیروزه‌ای، صرف‌نظر از اینکه بیننده چه کسی است */ .chat-owner .chat-bubble { margin-inline-end: auto; background: var(--teal-50); border-color: var(--teal-100); } /* پیام‌های دامپزشک/کلینیک: همیشه در سمت دیگر با پس‌زمینه‌ی متمایز */ .chat-staff .chat-bubble { margin-inline-start: auto; background: #FBF3E7; border-color: #F0DFC2; } .chat-bubble p { margin: 0; line-height: 1.7; word-break: break-word; } .chat-label { font-size: 11px; font-weight: 500; margin-bottom: 4px; } .chat-owner .chat-label { color: var(--teal-800); } .chat-staff .chat-label { color: #8A5A1E; } .chat-img { max-width: 220px; border-radius: 8px; margin-top: 6px; display: block; } .chat-form { display: flex; gap: 8px; margin-top: 12px; align-items: center; } .chat-form input[type="text"] { flex: 1; } .chat-file-btn { cursor: pointer; font-size: 20px; padding: 6px; } .chat-error { color: var(--danger); font-size: 13px; margin-top: 8px; } .chat-status { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; } .chat-status-waiting { background: #FFF3D6; color: #8A5A00; } .chat-status-unread { background: var(--danger-bg); color: var(--danger); font-weight: 700; } .chat-status-read { background: var(--teal-50); color: var(--teal-800); } .avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 10px; border: 1px solid var(--border); } .avatar-placeholder { width: 72px; height: 72px; border-radius: 50%; background: var(--gray-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--text-muted); margin-bottom: 10px; } .pet-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .pet-name-row label { min-width: 90px; margin: 0; font-size: 13px; color: var(--text-muted); } .sidebar input::placeholder { color: rgba(255,255,255,0.6); } .sidebar input:focus { outline: none; border-color: rgba(255,255,255,0.4); } .notif-badge { display: none; background: var(--danger); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px; text-align: center; padding: 0 6px; margin-left: 8px; box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.18); animation: notif-pulse 1.8s ease-in-out infinite; } @keyframes notif-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(163, 45, 45, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(163, 45, 45, 0); } }