/* MOBILE FIRST ADMIN DASHBOARD CSS */
.mobile-page { padding: 0 0 100px 0; background: #f8f9fa; min-height: 100vh; }
.mobile-header { display:flex; align-items:center; justify-content:space-between; padding: 16px 16px 8px; background:#fff; position:sticky; top:0; z-index:100; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.mobile-header h1 { font-size:1.25rem; font-weight:700; margin:0; }
.chip-row { display:flex; gap:8px; padding:12px 16px; overflow-x:auto; background:#fff; border-bottom:1px solid #f0f0f0; scrollbar-width:none; }
.chip-row::-webkit-scrollbar { display:none; }
.chip { background:#f0f2f5; border:none; border-radius:20px; padding:6px 16px; font-size:0.85rem; cursor:pointer; white-space:nowrap; transition:.15s; }
.chip-active { background:#6366f1; color:#fff; font-weight:600; }

.loading-state, .empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; text-align:center; color:#6b7280; }
.empty-icon { font-size:3rem; margin-bottom:16px; opacity:.3; }

.card-list { padding:12px; display:flex; flex-direction:column; gap:8px; }
.item-card { background:#fff; border-radius:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); overflow:hidden; }
.item-card-body { padding:14px 16px; }
.item-title { font-weight:700; font-size:1rem; margin-bottom:6px; }
.item-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }

.badge-chip { border-radius:20px; padding:3px 10px; font-size:0.75rem; font-weight:600; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-green { background:#dcfce7; color:#15803d; }

.item-actions { display:flex; gap:8px; flex-shrink:0; }
.act-btn { width:38px; height:38px; border:none; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.9rem; }
.act-edit { background:#eff6ff; color:#2563eb; }
.act-del  { background:#fef2f2; color:#dc2626; }

.fab { position:fixed; bottom:24px; right:16px; width:56px; height:56px; border-radius:50%; background:#6366f1; color:#fff; border:none; font-size:1.5rem; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(99,102,241,.4); cursor:pointer; z-index:200; transition:.2s; }
.fab:hover { transform:scale(1.08); }

/* Bottom Sheet */
.sheet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; backdrop-filter:blur(2px); }
.bottom-sheet { position:fixed; bottom:0; left:0; right:0; background:#fff; border-radius:24px 24px 0 0; z-index:400; padding-bottom:env(safe-area-inset-bottom); animation:slideUp .25s ease; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.sheet-handle { width:40px; height:4px; background:#e5e7eb; border-radius:2px; margin:10px auto 0; }
.sheet-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 8px; }
.sheet-body { padding:8px 20px; max-height:60vh; overflow-y:auto; }
.sheet-footer { display:flex; gap:12px; padding:16px 20px; border-top:1px solid #f0f0f0; }
.form-check-custom { background:#f8f9fa; border:2px solid #e5e7eb; border-radius:12px; padding:12px 16px; cursor:pointer; text-align:center; font-weight:600; font-size:.9rem; transition:.15s; }
.check-selected { background:#eff6ff; border-color:#6366f1; color:#6366f1; }

/* Toast */
.mobile-toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); padding:12px 24px; border-radius:24px; font-weight:600; font-size:.9rem; z-index:9999; white-space:nowrap; animation:fadeInUp .25s ease; display:flex; align-items:center; gap:8px; box-shadow:0 4px 16px rgba(0,0,0,.15); }
.toast-success { background:#16a34a; color:#fff; }
.toast-danger  { background:#dc2626; color:#fff; }
@keyframes fadeInUp { from { opacity:0; transform:translate(-50%,12px); } to { opacity:1; transform:translate(-50%,0); } }

/* Car Features Specific Colors */
.border-red { border-color: #ef4444 !important; }
.border-blue { border-color: #3b82f6 !important; }
.border-purple { border-color: #8b5cf6 !important; }
.border-green { border-color: #10b981 !important; }

/* Blog Posts Specific */
.post-title { font-size:1.1rem; font-weight:700; color:#111827; margin:0 0 8px 0; line-height:1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-excerpt { font-size:.85rem; color:#6b7280; margin:0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge-status { padding:4px 10px; border-radius:20px; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.status-pub { background:#dcfce7; color:#16a34a; }
.status-draft { background:#f3f4f6; color:#4b5563; }
.back-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:none;  border-radius:50%; font-size:1.2rem; color:#4b5563; }
.back-btn:active { background:#f3f4f6; }
.content-wrapper { padding:14px 12px; display:flex; flex-direction:column; gap:16px; }
.mobile-card { background:#fff; border-radius:16px; padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.03); }
.card-title { font-size:1rem; font-weight:800; color:#111827; margin-bottom:16px; padding-bottom:12px; border-bottom:1px dashed #e5e7eb; }
.sticky-bottom-bar { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #e5e7eb; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; gap:12px; z-index:900; box-shadow:0 -4px 12px rgba(0,0,0,.05); }

/* Media Library Specific */
.bg-teal { background-color: #0d9488 !important; }
.text-teal { color: #0d9488 !important; }
.media-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap:8px; padding:8px 12px; }
.media-card { background:#f9fafb; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:1; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.05); border:1px solid #f0f0f0; }
.media-card:active { opacity: 0.8; }
.media-img-wrapper { width:100%; height:100%; position:relative; }
.img-placeholder { width:100%; height:100%; font-size:2rem; }
.media-img { width:100%; height:100%; object-fit:cover; }

/* Contact Specific */
.contact-card { display:flex; align-items:center; padding:12px; background:#f8f9fa; border-radius:16px; cursor:pointer; }
.contact-card:active { background:#f0f2f5; }
.contact-avatar { width:46px; height:46px; border-radius:50%; background:#fee2e2; color:#ef4444; font-weight:700; font-size:1.2rem; display:flex; align-items:center; justify-content:center; margin-right:14px; }
.name { font-size:1rem; font-weight:700; color:#111827; margin:0 0 2px 0; }
.phone { font-size:0.85rem; }
.contact-date { font-size:0.75rem; color:#9ca3af; font-weight:600; align-self:flex-start; margin-top:4px; }
.contact-avatar-lg { width:64px; height:64px; border-radius:50%; background:#fee2e2; color:#ef4444; font-weight:700; font-size:1.8rem; display:flex; align-items:center; justify-content:center; }
.info-group { display:flex; align-items:center; }
.message-box { font-size:0.95rem; line-height:1.5; border:1px solid #f0f0f0; }