:root {
    --admin-bg: #f8f5f0; 
    --admin-card: #ffffff; 
    --admin-text: #1a1410;
    --admin-heading: #1a1410; 
    --admin-primary: #c4622d; 
    --admin-primary-hover: #a34e20;
    --admin-border: #e2d9cd; 
    --admin-sidebar: #ffffff; 
    --accent: #c4622d;
    --muted: #8a7a6a; 
    --red: #e63946; 
    --green: #2d6a4f; 
    --green-bg: #d8f3dc;
    --gap: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'DM Sans', sans-serif; outline: none; }
body { background-color: var(--admin-bg); color: var(--admin-text); display: flex; height: 100vh; overflow: hidden; }

.lucide { display: inline-block; vertical-align: middle; stroke-width: 2; }
.nav-item .lucide { width: 20px; height: 20px; margin-right: 10px; color: var(--muted); transition: 0.3s; }
.nav-item.active .lucide, .nav-item:hover .lucide { color: inherit; }
.btn-main .lucide { width: 18px; height: 18px; margin-right: 8px; }
.action-btn .lucide { width: 14px; height: 14px; margin-right: 4px; }
.profile-dropdown a .lucide { width: 16px; height: 16px; margin-right: 8px; }

.sidebar { width: 260px; background: var(--admin-sidebar); border-right: 1px solid var(--admin-border); display: flex; flex-direction: column; z-index: 1001; }
.sidebar-header { padding: 20px 24px; font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--admin-heading); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--admin-border); cursor:pointer; }
.sidebar-header span { color: var(--accent); }
.nav-menu { list-style: none; padding: 20px 0; flex: 1; overflow-y: auto; }
.nav-item { padding: 12px 24px; margin: 0 15px 5px 15px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; font-weight: 700; color: var(--admin-text); transition: 0.3s; font-size: 0.95rem; }
.nav-item:hover { background: var(--admin-bg); color: var(--admin-primary); }
.nav-item.active { background: var(--admin-primary); color: #fff; box-shadow: 0 4px 15px rgba(196, 98, 45, 0.3); }

.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.topbar { background: var(--admin-card); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--admin-border); }
.search-wrapper { display: flex; align-items: center; background: var(--admin-bg); padding: 10px 15px; border-radius: 12px; border: 1px solid var(--admin-border); width: 400px; transition: 0.3s; }
.search-wrapper:focus-within { border-color: var(--admin-primary); background: #fff; }
.search-wrapper input { border: none; background: transparent; outline: none; width: 100%; font-size: 0.95rem; color: var(--admin-text); margin-left: 10px; font-family: inherit; }

.profile-menu-container { position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto; cursor: pointer; }
.profile-dropdown { position: absolute; top: 50px; right: 0; background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 200px; display: none; flex-direction: column; overflow: hidden; z-index: 1001; }
.profile-dropdown.show { display: flex; animation: slideDown 0.2s ease-out; }
.profile-dropdown a { padding: 12px 15px; color: var(--admin-text); text-decoration: none; font-size: 0.85rem; font-weight: 700; border-bottom: 1px solid var(--admin-bg); transition: 0.2s; display: flex; align-items: center; }
.profile-dropdown a:hover { background: var(--admin-bg); color: var(--admin-primary); }

.content-scroll { padding: 30px; overflow-y: auto; flex: 1; }
.tab-content { display: none; animation: fadeIn 0.3s ease-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 30px; }
.stat-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; transition: 0.3s; }
.stat-card:hover { border-color: var(--admin-primary); transform: translateY(-3px); }
.stat-title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;}
.stat-value { font-size: 2rem; font-weight: 700; color: var(--admin-heading); font-family: 'DM Mono', monospace; }

.data-card { background: var(--admin-card); border: 1px solid var(--admin-border); border-radius: 16px; padding: 20px; overflow-x: auto; }
.data-card h3 { color: var(--admin-heading); margin-bottom: 20px; font-size: 1.2rem; font-family: 'Playfair Display', serif; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { text-align: left; padding: 15px 10px; border-bottom: 1px solid var(--admin-border); font-size: 0.95rem; }
th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.5px; }
tr:hover td { background: var(--admin-bg); }

.action-btn { background: var(--admin-bg); color: var(--admin-primary); border: 1px solid var(--admin-border); padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 0.8rem; cursor: pointer; margin-right: 5px; transition: 0.2s; display: inline-flex; align-items: center; justify-content: center;}
.action-btn:hover { background: var(--admin-primary); color: white; border-color: var(--admin-primary); }
.action-btn.delete { background: #fff0f0; color: var(--red); border-color: #fca5a5; }
.action-btn.delete:hover { background: var(--red); color: white; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 20, 16, 0.6); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 2000; padding: 15px; }
.modal-overlay.open { display: flex; animation: fadeIn 0.2s ease-out; }
.modal-card { background: var(--admin-card); border-radius: 24px; border: 1px solid var(--admin-border); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; padding: 30px; position: relative; }
.modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--muted); cursor: pointer; transition: 0.2s; z-index: 10; display: flex; align-items: center; justify-content: center;}
.modal-close:hover { color: var(--admin-primary); }

.input-box { width: 100%; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--admin-border); background: var(--admin-bg); font-family: inherit; font-size: 1rem; margin-bottom: 15px; transition: 0.3s; box-sizing: border-box; }
.input-box:focus { border-color: var(--admin-primary); background: #fff; }
.form-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; }

.btn-main { width: 100%; padding: 15px; border-radius: 12px; border: none; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--admin-primary); color: #fff; }
.btn-primary:hover { background: var(--admin-primary-hover); transform: translateY(-2px); }
.btn-success { background: var(--green); color: #fff; }
.btn-cancel { background: var(--admin-border); color: var(--admin-text); }
.flex-row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.flex-row > * { flex: 1 1 auto; }

.route-item { display: flex; align-items: center; background: #fff; border: 1px solid var(--admin-border); border-radius: 10px; padding: 8px 10px; transition: 0.2s; margin-bottom: 4px; overflow: hidden; }
.route-item.sortable-ghost { opacity: 0.5; border-color: var(--accent); background: var(--admin-bg); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.drag-handle { color: var(--muted); cursor: grab; margin-right: 10px; padding: 5px; user-select: none; touch-action: none; flex-shrink: 0; display: flex; align-items: center; }
.drag-handle:active { cursor: grabbing; }
.route-input { flex: 1; border: none; outline: none; font-family: inherit; font-size: 16px !important; background: transparent; padding: 5px 0; min-width: 0; }
.btn-del-route { background: none; border: none; color: var(--red); cursor: pointer; padding: 5px; margin-left: 5px; flex-shrink: 0; display: flex; align-items: center; }
.btn-add-smart { width: 100%; display: flex; align-items: center; justify-content: center; padding: 12px; margin-top: 8px; border: 1px dashed var(--accent); color: var(--accent); background: transparent; font-weight: 700; cursor: pointer; border-radius: 10px; transition: 0.3s; }
.btn-add-smart:active { background: rgba(196, 98, 45, 0.1); }

.mobile-menu-btn { display: none; }
.mobile-logo { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; align-items: center; background: none; border: none; color: var(--admin-heading); cursor: pointer; padding-right: 10px; }
    .mobile-logo { display: block; font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--admin-heading); }
    .mobile-logo span { color: var(--accent); }
    .sidebar { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); transition: transform 0.3s ease; box-shadow: 4px 0 15px rgba(0,0,0,0.1); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 20, 16, 0.5); backdrop-filter: blur(2px); z-index: 1000; }
    .sidebar-overlay.show { display: block; animation: fadeIn 0.3s; }
    .topbar { padding: 12px 20px; flex-wrap: wrap; gap: 10px; }
    .search-wrapper { order: 3; width: 100%; margin-top: 10px; }
    .profile-menu-container { margin-left: auto; }
    #adminNameText { display: none; }
    .content-scroll { padding: 15px; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
    .modal-card { width: 95%; padding: 20px; }
}