telegram-file-to-link-bot/static/css/admin.css

/*
Copyright 2025 Aman

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f4f6fb;
  color: #111827;
}

main {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.centered {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.centered {
  margin: 0;
  width: 100vw;
  height: 100vh;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.admin-header h1 {
  font-size: 20px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.nav-link {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: #111827;
  background: #e5e7eb;
}

.nav-link:hover {
  background: #d1d5db;
}

button {
  border: none;
  cursor: pointer;
  font-size: 14px;
}

.logout {
  background: #ef4444;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
}

.logout:hover {
  background: #dc2626;
}

#theme-toggle {
  background: #111827;
  color: #f9fafb;
  padding: 8px 12px;
  border-radius: 6px;
}

.card {
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.card h3 {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
  font-weight: 500;
}

.card p {
  font-size: 28px;
  font-weight: 700;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.search-bar {
  margin-bottom: 16px;
}

.search-bar input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
}

.table-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}

.table-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  padding: 12px 18px;
  border-bottom: 1px solid #e5e7eb;
}

td {
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}

td.right {
  text-align: right;
  font-weight: 600;
}

tr:last-child td {
  border-bottom: none;
}

.badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.green {
  background: #dcfce7;
  color: #166534;
}

.badge.orange {
  background: #ffedd5;
  color: #9a3412;
}

.action-btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  margin-left: 4px;
}

.action-btn:hover {
  opacity: 0.9;
}

.action-delete {
  background: #ef4444;
  color: white;
}

.action-delete:hover {
  background: #dc2626;
}

.action-disable {
  background: #f59e0b;
  color: white;
}

.action-disable:hover {
  background: #d97706;
}

.action-enable {
  background: #22c55e;
  color: white;
}

.auth-page {
  background: #f4f6fb;
}

.auth-card {
  max-width: 380px;
  width: 100%;
  padding: 28px;
  text-align: center;
}

.auth-card h2 {
  margin-bottom: 16px;
}

.auth-card input {
  width: 100%;
  margin-top: 12px;
}

.auth-card button {
  width: 100%;
  margin-top: 16px;
}

.alert {
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}

.alert-error {
  background: #fee2e2;
  color: #991b1b;
}

body.dark {
  background: #020617;
  color: #e5e7eb;
}

body.dark .admin-header,
body.dark .card,
body.dark .table-card {
  background: #020617;
  border: 1px solid #1e293b;
  box-shadow: none;
}

body.dark .table-header {
  border-color: #1e293b;
}

body.dark th {
  color: #94a3b8;
}

body.dark td {
  border-color: #1e293b;
}

body.dark .nav-link {
  background: #1e293b;
  color: #e5e7eb;
}

body.dark #theme-toggle {
  background: #e5e7eb;
  color: #020617;
}

body.dark input {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #1e293b;
}

body.dark input::placeholder {
  color: #94a3b8;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }

  th:nth-child(2),
  td:nth-child(2) {
    display: none;
  }
}