/* /assets/css/admin.css
 * 1 TEGUK COFFEE - Admin Dashboard Style
 */

:root {
  --c-coffee-darkest: #1A0E08;
  --c-coffee-dark: #3E2723;
  --c-coffee-medium: #5D4037;
  --c-cream: #F5E6D3;
  --c-cream-light: #FDF6EC;
  --c-gold: #C9A26B;
  --c-gold-dark: #A67C42;
  --c-white: #fff;
  --c-bg: #F7F5F2;
  --c-gray-100: #f5f5f5;
  --c-gray-200: #e5e5e5;
  --c-gray-300: #d4d4d4;
  --c-gray-500: #737373;
  --c-gray-700: #404040;
  --c-gray-900: #171717;
  --c-success: #16a34a;
  --c-danger: #dc2626;
  --c-warning: #f59e0b;
  --c-info: #2563eb;
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px;
  --sidebar-w: 260px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body { font-family:'Inter',sans-serif; background:var(--c-bg); color:var(--c-gray-900); font-size:14px; }
a { color: var(--c-gold-dark); text-decoration:none; }
a:hover { color: var(--c-coffee-dark); }
button { font-family:inherit; cursor:pointer; border:none; }

/* ============= SIDEBAR ============= */
.admin-sidebar {
  position: fixed; top:0; left:0; bottom:0; width: var(--sidebar-w);
  background: var(--c-coffee-darkest);
  color: var(--c-cream);
  display:flex; flex-direction:column;
  overflow-y:auto;
  z-index:100;
  transition: transform .25s;
}
.admin-brand { padding: 26px 22px; border-bottom: 1px solid rgba(245,230,211,.08); text-align:center; }
.admin-brand img { filter: brightness(0) invert(1); }
.admin-menu { padding: 16px 12px; display:flex; flex-direction:column; gap:2px; flex:1; }
.admin-menu a {
  padding: 10px 14px; border-radius: var(--r-sm);
  color: rgba(245,230,211,.78);
  display:flex; align-items:center; gap:12px;
  font-weight:500; transition: all .2s;
}
.admin-menu a i { width:20px; text-align:center; }
.admin-menu a:hover { background: rgba(201,162,107,.12); color: var(--c-cream); }
.admin-menu a.active { background: linear-gradient(135deg,var(--c-gold),var(--c-gold-dark)); color: var(--c-coffee-darkest); font-weight:600; }
.menu-section { padding: 16px 14px 6px; font-size:.7rem; letter-spacing:2px; color: rgba(245,230,211,.45); font-weight:600; }

/* ============= MAIN ============= */
.admin-main { margin-left: var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.admin-header {
  background: var(--c-white);
  padding: 14px 28px;
  border-bottom: 1px solid var(--c-gray-200);
  display:flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index:50;
  box-shadow: var(--shadow-sm);
}
.admin-page-title { font-size:1.2rem; font-weight:700; color:var(--c-coffee-dark); }
.admin-user { display:flex; gap:10px; align-items:center; font-weight:500; color:var(--c-coffee-dark); }
.admin-user i { background:var(--c-cream); color:var(--c-coffee-dark); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.sidebar-toggle { display:none; font-size:1.2rem; background:none; color:var(--c-coffee-dark); }
.admin-content { padding: 28px; flex:1; }

/* ============= COMPONENTS ============= */
.card { background: var(--c-white); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); border:1px solid var(--c-gray-200); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; gap:14px; flex-wrap:wrap; }
.card-title { font-size:1.1rem; font-weight:700; color:var(--c-coffee-dark); }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-bottom: 24px; }
.stat-card { background: var(--c-white); padding: 22px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); display:flex; gap:16px; align-items:center; border:1px solid var(--c-gray-200); }
.stat-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.stat-icon.coffee { background: rgba(62,39,35,.1); color: var(--c-coffee-dark); }
.stat-icon.gold { background: rgba(201,162,107,.15); color: var(--c-gold-dark); }
.stat-icon.success { background: rgba(22,163,74,.12); color: var(--c-success); }
.stat-icon.info { background: rgba(37,99,235,.12); color: var(--c-info); }
.stat-icon.warning { background: rgba(245,158,11,.12); color: var(--c-warning); }
.stat-icon.danger { background: rgba(220,38,38,.12); color: var(--c-danger); }
.stat-label { font-size:.8rem; color: var(--c-gray-500); text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.stat-value { font-size:1.6rem; font-weight:700; color: var(--c-coffee-dark); line-height:1.2; }
.stat-meta { font-size:.78rem; color: var(--c-gray-500); }

/* Table */
.table-wrap { overflow-x:auto; border-radius: var(--r-sm); border: 1px solid var(--c-gray-200); }
table.data-table { width:100%; border-collapse:collapse; background:var(--c-white); font-size:.9rem; }
table.data-table th, table.data-table td { padding: 12px 14px; text-align:left; border-bottom: 1px solid var(--c-gray-200); vertical-align: middle; }
table.data-table th { background: var(--c-cream-light); font-weight:600; color: var(--c-coffee-dark); font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; }
table.data-table tbody tr:hover { background: rgba(201,162,107,.06); }
table.data-table tbody tr:last-child td { border-bottom:none; }
.table-actions { display:flex; gap:6px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 9px 16px; border-radius:var(--r-sm); font-weight:600; font-size:.88rem; transition:all .2s; cursor:pointer; }
.btn-primary { background: var(--c-coffee-dark); color: var(--c-cream); }
.btn-primary:hover { background: var(--c-coffee-darkest); color:var(--c-cream); }
.btn-gold { background: linear-gradient(135deg,var(--c-gold),var(--c-gold-dark)); color: var(--c-coffee-darkest); }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201,162,107,.4); color: var(--c-coffee-darkest); }
.btn-success { background: var(--c-success); color: var(--c-white); }
.btn-success:hover { background: #15803d; color:var(--c-white); }
.btn-danger { background: var(--c-danger); color: var(--c-white); }
.btn-danger:hover { background: #b91c1c; color:var(--c-white); }
.btn-outline { background:var(--c-white); border:1.5px solid var(--c-gray-300); color:var(--c-gray-700); }
.btn-outline:hover { border-color: var(--c-coffee-dark); color: var(--c-coffee-dark); }
.btn-sm { padding: 6px 10px; font-size:.78rem; }
.btn-icon { width:34px; height:34px; padding:0; border-radius:50%; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--c-coffee-dark); }
.form-control { width:100%; padding:10px 12px; border:1.5px solid var(--c-gray-300); border-radius:var(--r-sm); font:inherit; transition:all .2s; background:var(--c-white); }
.form-control:focus { outline:none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(201,162,107,.18); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-help { font-size:.8rem; color:var(--c-gray-500); margin-top:4px; }
textarea.form-control { resize: vertical; min-height: 70px; }

/* Badge */
.badge { display:inline-block; padding: 3px 10px; border-radius: 999px; font-size:.72rem; font-weight:700; letter-spacing:.3px; }
.badge-success { background:#dcfce7; color:#166534; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-danger { background:#fee2e2; color:#991b1b; }
.badge-info { background:#dbeafe; color:#1e40af; }
.badge-gray { background:var(--c-gray-200); color:var(--c-gray-700); }
.badge-gold { background:rgba(201,162,107,.18); color: var(--c-gold-dark); }

/* Alert */
.alert { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom:18px; font-size:.92rem; display:flex; gap:8px; align-items:flex-start; }
.alert-success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.alert-info { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* Login page */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background: linear-gradient(135deg, #3E2723, #1A0E08); padding:20px; }
.login-card { background:white; padding:36px; border-radius:var(--r-lg); box-shadow:0 25px 60px rgba(0,0,0,.3); width:100%; max-width:420px; }
.login-card h1 { font-size:1.6rem; color:var(--c-coffee-dark); margin-bottom:8px; text-align:center; }
.login-card p { text-align:center; color:var(--c-gray-500); margin-bottom:24px; }
.login-card .form-control { padding:12px 14px; }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-overlay.active { display:flex; }
.modal { background:var(--c-white); border-radius:var(--r-lg); max-width:600px; width:100%; max-height:90vh; overflow-y:auto; }
.modal-header { padding:18px 24px; border-bottom:1px solid var(--c-gray-200); display:flex; justify-content:space-between; align-items:center; }
.modal-header h3 { font-size:1.15rem; color:var(--c-coffee-dark); }
.modal-body { padding:24px; }
.modal-footer { padding:14px 24px; border-top:1px solid var(--c-gray-200); display:flex; gap:10px; justify-content:flex-end; }

/* Filters */
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; padding:14px; background:var(--c-white); border-radius:var(--r-sm); border:1px solid var(--c-gray-200); }
.filter-bar .form-control { width:auto; min-width:140px; padding:8px 12px; }

/* Pagination */
.pagination { display:flex; gap:6px; margin-top:18px; justify-content:center; }
.pagination a, .pagination span { padding:8px 12px; border-radius: var(--r-sm); border:1px solid var(--c-gray-200); background:var(--c-white); font-size:.85rem; color:var(--c-gray-700); }
.pagination a:hover { background: var(--c-cream); color: var(--c-coffee-dark); }
.pagination .active { background: var(--c-coffee-dark); color: var(--c-cream); border-color: var(--c-coffee-dark); }

/* Map */
#mitraMap { width:100%; height:600px; border-radius: var(--r-md); overflow:hidden; border:1px solid var(--c-gray-200); }

/* Tabs */
.tab-list { display:flex; gap:4px; border-bottom: 2px solid var(--c-gray-200); margin-bottom:20px; flex-wrap:wrap; }
.tab-list a { padding: 10px 18px; font-weight:600; color: var(--c-gray-500); border-bottom:3px solid transparent; margin-bottom:-2px; }
.tab-list a.active { color: var(--c-coffee-dark); border-color: var(--c-gold); }

/* Responsive */
@media (max-width:992px) {
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.open { transform: translateX(0); box-shadow: 0 0 0 100vw rgba(0,0,0,.4); }
  .admin-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
}
@media (max-width: 600px) {
  .admin-content { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .card { padding: 16px; }
}

/* Switch */
.switch { position:relative; display:inline-block; width:44px; height:24px; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; cursor:pointer; inset:0; background:var(--c-gray-300); border-radius:24px; transition:.3s; }
.switch .slider:before { position:absolute; content:''; height:18px; width:18px; left:3px; top:3px; background:white; border-radius:50%; transition:.3s; }
.switch input:checked + .slider { background: var(--c-gold-dark); }
.switch input:checked + .slider:before { transform: translateX(20px); }