/* Tally Automator - elegant theme on top of Bootstrap 5 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ta-navy: #16294a;
  --ta-navy-dark: #0d1b30;
  --ta-primary: #2455a4;
  --ta-primary-dark: #1a3f80;
  --ta-accent: #14b8a6;
  --ta-accent-dark: #0f9488;
  --ta-bg: #f4f6fa;
  --ta-surface: #ffffff;
  --ta-border: #e4e8f0;
  --ta-text: #1c2333;
  --ta-text-muted: #667085;
  --ta-success: #16a34a;
  --ta-danger: #dc2626;
  --ta-warning: #d97706;
  --ta-radius: 0.65rem;
  --ta-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ta-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body {
  background-color: var(--ta-bg);
  color: var(--ta-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--ta-navy);
}

a { color: var(--ta-primary); }
a:hover { color: var(--ta-primary-dark); }

/* ---------------- Navbar ---------------- */
.navbar-ta {
  background: linear-gradient(135deg, var(--ta-navy) 0%, var(--ta-navy-dark) 100%);
  box-shadow: var(--ta-shadow);
  padding-top: .65rem;
  padding-bottom: .65rem;
}
.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}
.navbar-ta .navbar-brand {
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.navbar-ta .navbar-brand i { color: var(--ta-accent); font-size: 1.3rem; }
.navbar-ta .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
  padding: .5rem .9rem !important;
  border-radius: .4rem;
  transition: background-color .15s ease, color .15s ease;
}
.navbar-ta .nav-link:hover,
.navbar-ta .nav-link:focus {
  color: #fff !important;
  background-color: rgba(255,255,255,.08);
}
.navbar-ta .dropdown-menu {
  border: none;
  border-radius: var(--ta-radius);
  box-shadow: var(--ta-shadow-md);
  padding: .4rem;
  margin-top: .5rem;
}
.navbar-ta .dropdown-item {
  border-radius: .4rem;
  padding: .5rem .75rem;
  font-weight: 500;
  color: var(--ta-text);
}
.navbar-ta .dropdown-item:hover { background-color: var(--ta-bg); color: var(--ta-primary); }
.navbar-ta .dropdown-item i { width: 1.25rem; color: var(--ta-primary); }

.user-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #fff !important;
}
.user-chip .avatar {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--ta-accent);
  color: #06281f;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem;
}

/* ---------------- Page header ---------------- */
.page-header {
  padding: 1.75rem 0 1.25rem;
  text-align: center;
}
.page-header h3 {
  margin-bottom: .15rem;
}
.page-header .subtitle {
  color: var(--ta-text-muted);
  font-size: .9rem;
}

/* ---------------- Cards ---------------- */
.card {
  border: 1px solid var(--ta-border);
  border-radius: var(--ta-radius);
  box-shadow: var(--ta-shadow);
}
.card .card-title { color: var(--ta-navy); }

.stat-card {
  border: none;
  border-radius: var(--ta-radius);
  background: var(--ta-surface);
  box-shadow: var(--ta-shadow);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ta-shadow-md);
  color: inherit;
}
.stat-card .stat-icon {
  width: 3rem; height: 3rem;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  flex-shrink: 0;
}
.stat-card .stat-label { font-weight: 600; color: var(--ta-navy); margin-bottom: .1rem; }
.stat-card .stat-desc { color: var(--ta-text-muted); font-size: .82rem; }

.bg-icon-blue { background: linear-gradient(135deg, #2455a4, #1a3f80); }
.bg-icon-teal { background: linear-gradient(135deg, #14b8a6, #0f9488); }
.bg-icon-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bg-icon-violet { background: linear-gradient(135deg, #7c3aed, #5b21b6); }

/* ---------------- Buttons ---------------- */
.btn-primary {
  background-color: var(--ta-primary);
  border-color: var(--ta-primary);
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--ta-primary-dark);
  border-color: var(--ta-primary-dark);
}
.btn { border-radius: .5rem; }

/* ---------------- Forms ---------------- */
.form-label { font-weight: 500; color: var(--ta-navy); font-size: .88rem; }
.form-control, .form-select {
  border-radius: .5rem;
  border-color: var(--ta-border);
  padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ta-primary);
  box-shadow: 0 0 0 .2rem rgba(36, 85, 164, .12);
}

/* ---------------- Tables ---------------- */
.table {
  --bs-table-bg: var(--ta-surface);
}
.table thead th {
  background-color: var(--ta-bg);
  color: var(--ta-navy);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--ta-border);
}
.table td, .table th { vertical-align: middle; }

/* ---------------- Alerts ---------------- */
.alert { border: none; border-radius: var(--ta-radius); }

/* ---------------- Login ---------------- */
.login-wrap {
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  max-width: 920px;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--ta-shadow-md);
}
.login-side {
  background: linear-gradient(155deg, var(--ta-navy) 0%, var(--ta-navy-dark) 100%);
  color: #fff;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-side::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(20, 184, 166, .15);
  right: -80px; bottom: -80px;
}
.login-side i.bi { font-size: 2.5rem; color: var(--ta-accent); }
.login-form-side { padding: 3rem 2.5rem; }

/* ---------------- Misc ---------------- */
.badge-soft { background-color: rgba(36, 85, 164, .1); color: var(--ta-primary); font-weight: 500; }
code { color: var(--ta-primary-dark); background: var(--ta-bg); padding: .1rem .4rem; border-radius: .3rem; }

footer.app-footer {
  color: var(--ta-text-muted);
  font-size: .8rem;
  text-align: center;
  padding: 2rem 0 1rem;
}