:root {
  --app-bg: #f3f6fb;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-border: #dbe4f0;
  --app-text: #1f2937;
  --app-muted: #64748b;
  --app-primary: #1d4ed8;
  --app-primary-dark: #1e3a8a;
  --app-primary-soft: #dbeafe;
  --app-success: #15803d;
  --app-warning: #b45309;
  --app-danger: #b91c1c;
  --app-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
  --app-radius: 8px;
}

html {
  min-height: 100%;
}

body {
  background: var(--app-bg) !important;
  color: var(--app-text);
  font-family: "Segoe UI", Arial, sans-serif !important;
}

.container,
.card,
.main-card,
.controls-card,
.login-card,
.summary-box,
.top-header,
.modal-content {
  border-radius: var(--app-radius) !important;
}

.card,
.main-card,
.controls-card,
.login-card,
.top-header,
.container {
  border: 1px solid var(--app-border) !important;
  box-shadow: var(--app-shadow) !important;
}

.page-header,
.controls-header,
.modal-header,
.card-header.bg-primary,
th {
  background: linear-gradient(135deg, var(--app-primary), var(--app-primary-dark)) !important;
}

h1,
h2,
h3,
h4,
h5 {
  letter-spacing: 0 !important;
}

table {
  border-radius: var(--app-radius);
  overflow: hidden;
  border: 1px solid var(--app-border) !important;
}

th,
td {
  border-color: var(--app-border) !important;
}

tbody tr:hover {
  background: #eef6ff !important;
}

.summary-box {
  background: var(--app-surface-soft) !important;
  border-color: var(--app-border) !important;
}

.summary-label,
.text-muted,
footer {
  color: var(--app-muted) !important;
}

button,
.btn,
.btn-download,
.back a {
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

button:hover,
.btn:hover,
.btn-download:hover,
.back a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.btn-primary,
button:not(.btn-delete):not(.btn-edit):not(.btn-cancel):not(.btn-export),
.back a {
  background: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
  color: #fff !important;
}

.btn-success,
.btn-download,
.btn-export {
  background: var(--app-success) !important;
  border-color: var(--app-success) !important;
  color: #fff !important;
}

.btn-edit,
.btn-warning {
  background: var(--app-warning) !important;
  border-color: var(--app-warning) !important;
  color: #fff !important;
}

.btn-delete,
.btn-danger,
button[name="clear_logs"] {
  background: var(--app-danger) !important;
  border-color: var(--app-danger) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

.btn-outline-primary:hover {
  background: var(--app-primary) !important;
  color: #fff !important;
}

input,
select,
.form-control,
.form-select {
  border-color: var(--app-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(29, 78, 216, 0.14) !important;
}

.badge {
  border-radius: 999px !important;
  font-weight: 700;
}

textarea {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  border-radius: var(--app-radius) !important;
}

.actions,
td:last-child {
  gap: 8px;
}

.actions button,
.actions a button,
td:last-child > button,
td:last-child > .btn-download {
  width: auto !important;
  margin: 2px 4px 2px 0 !important;
  white-space: nowrap;
}

.filename-col {
  color: var(--app-text);
}

.dashboard-wrapper,
.container-fluid {
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 768px) {
  body {
    padding: 16px 8px !important;
  }

  table {
    font-size: 13px;
  }

  th,
  td {
    padding: 10px 8px !important;
  }

  .dashboard-btn,
  .today-btn,
  #browseBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
}