/* FILE PATH: /public/assets/css/app.css
 * Place this file in: C:/server/www-payroll/public/assets/css/app.css
 *
 * App-wide styling layer
 * - Keeps UI consistent on both auth and app layouts
 * - DataTables + large payroll grid styles will be added later
 */

:root {
  --bg: #0b1220;
  --panel: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
}

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
}
.auth-header{
    background: linear-gradient(135deg, rgb(13 110 253), rgba(13, 110, 253, .04)) !important;
}
a { color: rgba(158, 197, 254, 0.95); }
a:hover { color: #fff; }

.table {
  color: var(--text);
}

.table thead th {
  color: rgba(255,255,255,.75);
  border-bottom-color: var(--border);
}

.table tbody td {
  border-top-color: var(--border);
}

.modal-content {
  background: #0f172a;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
}

.modal-header, .modal-footer {
  border-color: var(--border);
}

.btn-close {
  filter: invert(1);
  opacity: .75;
}

.form-text {
  color: var(--muted) !important;
}

/* Alerts on dark background */
.alert {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}

/* Print placeholders (we'll refine for payroll landscape) */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .topbar, .sidebar, .offcanvas, .btn, .nav, .alert {
    display: none !important;
  }
  .card {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}