/* ============================================================
   TRIANGULAR INTERMEDIARIES — PREMIUM PORTAL THEME v1
   Matches index.php / admin-login.php / employee-login.php
   Navy glassmorphic + gold accents + Playfair headings
   Load AFTER bootstrap + style.css. Pure override — no HTML
   changes needed, no logic touched.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');

:root {
  --t-navy-950: #081c4a;
  --t-navy-900: #0d2d6e;
  --t-gold: #ffb703;
  --t-gold-soft: #ffc94d;
  --t-blue: #3b82f6;
  --t-blue-dark: #1d4fc0;
  --t-green: #22a35a;
  --t-green-dark: #15733f;
  --t-ink: #eaf0fb;
  --t-ink-dim: #9fb0cc;
  --t-card-border: rgba(255, 255, 255, .10);
  --t-card-bg: linear-gradient(160deg, rgba(38, 68, 132, .50), rgba(10, 26, 66, .72));
  --t-input-bg: rgba(6, 18, 48, .65);
  --t-input-border: rgba(255, 255, 255, .16);
}

/* ============================================================
   BODY + AMBIENT BACKGROUND (same mesh + triangles as login)
   ============================================================ */
body {
  background: var(--t-navy-950) !important;
  color: var(--t-ink);
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52rem 32rem at 12% -8%, rgba(59, 130, 246, .16), transparent 60%),
    radial-gradient(46rem 30rem at 105% 18%, rgba(255, 183, 3, .12), transparent 60%),
    radial-gradient(40rem 30rem at 50% 118%, rgba(26, 68, 150, .55), transparent 65%),
    linear-gradient(165deg, var(--t-navy-900) 0%, var(--t-navy-950) 55%, #071a45 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='62' viewBox='0 0 72 62'%3E%3Cpath d='M36 4 66 56H6Z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 72px 62px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { color: var(--t-ink); }
.topbar h5, .card-section h5, .card-section h6 { color: var(--t-ink); }
.text-muted, small.text-muted, .small.text-muted { color: var(--t-ink-dim) !important; }
.text-dark { color: var(--t-ink) !important; }
p { color: var(--t-ink); }
hr { border-color: var(--t-card-border); opacity: 1; }

/* ============================================================
   SIDEBAR — glass navy, gold brand, premium active states
   ============================================================ */
.sidebar {
  background: linear-gradient(180deg, rgba(13, 45, 110, .92) 0%, rgba(8, 28, 74, .97) 100%);
  border-right: 1px solid var(--t-card-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 8px 0 40px -20px rgba(0, 0, 0, .6);
}
.sidebar .brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: 2.5px;
  background: linear-gradient(180deg, #ffffff 30%, #b9c9e8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sidebar .brand-sub { color: var(--t-gold-soft); letter-spacing: 3.4px; }
.sidebar .brand-logo { filter: drop-shadow(0 6px 18px rgba(59, 130, 246, .55)); }
.sidebar .brand-role {
  background: rgba(59, 130, 246, .16);
  color: #a5c6ff;
  border: 1px solid rgba(138, 182, 255, .55);
  box-shadow: 0 0 14px rgba(59, 130, 246, .18);
}
.sidebar .brand-role-emp,
.sidebar .brand-role.brand-role-emp {
  background: rgba(34, 163, 90, .16);
  color: #9fe8bd;
  border-color: rgba(110, 224, 160, .55);
  box-shadow: 0 0 14px rgba(34, 163, 90, .18);
}
.sidebar a {
  color: var(--t-ink-dim);
  border-left: 3px solid transparent;
}
.sidebar a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar a.active {
  background: linear-gradient(90deg, rgba(59, 130, 246, .22), rgba(59, 130, 246, .05));
  color: #fff;
  border-left-color: var(--t-gold);
}
.sidebar a.active i { color: var(--t-gold-soft); }
/* Employee sidebar -> green active tint (gold border stays for family look) */
.sidebar:has(.brand-role-emp) a.active {
  background: linear-gradient(90deg, rgba(34, 163, 90, .24), rgba(34, 163, 90, .05));
}
.sidebar-close { background: rgba(255, 255, 255, .08); }

/* Mobile header */
.mobile-header {
  background: rgba(8, 28, 74, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--t-card-border);
}
.hamburger-btn { background: rgba(255, 255, 255, .10); border: 1px solid var(--t-card-border); }
.sidebar-overlay { background: rgba(4, 12, 34, .65); }

/* ============================================================
   TOPBAR + CARDS — glassmorphic
   ============================================================ */
.topbar,
.stat-card,
.card-section,
.p-sum-card {
  background: var(--t-card-bg);
  border: 1px solid var(--t-card-border);
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--t-ink);
}
.stat-card:hover, .p-sum-card:hover {
  box-shadow: 0 26px 60px -25px rgba(0, 0, 0, .7);
  border-color: rgba(255, 255, 255, .18);
}
.stat-value { color: var(--t-ink); }
.stat-label, .p-sum-label { color: var(--t-ink-dim); }
.p-sum-value { color: var(--t-ink); }
.stat-icon { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }

.empty-state { color: var(--t-ink-dim); }

/* ============================================================
   TABLES — dark glass
   ============================================================ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--t-ink);
  --bs-table-border-color: var(--t-card-border);
  --bs-table-striped-bg: rgba(255, 255, 255, .03);
  --bs-table-hover-bg: rgba(255, 255, 255, .05);
  --bs-table-hover-color: #fff;
  color: var(--t-ink);
}
table th {
  color: var(--t-gold-soft) !important;
  border-bottom: 2px solid rgba(255, 183, 3, .25) !important;
}
table td { color: var(--t-ink); border-color: var(--t-card-border) !important; }
.table tbody tr:hover { background: rgba(255, 255, 255, .05); }
.table > :not(caption) > * > * { background: transparent; box-shadow: none; }

.action-icon {
  background: rgba(255, 255, 255, .08);
  color: var(--t-ink-dim);
  border: 1px solid var(--t-card-border);
}
.action-icon:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ============================================================
   BADGES — translucent glow versions
   ============================================================ */
.badge-present  { background: rgba(34, 163, 90, .18);  color: #7ee2a8; border: 1px solid rgba(110, 224, 160, .40); }
.badge-late     { background: rgba(255, 183, 3, .16);  color: #ffd166; border: 1px solid rgba(255, 183, 3, .40); }
.badge-halfday  { background: rgba(59, 130, 246, .18); color: #a5c6ff; border: 1px solid rgba(138, 182, 255, .40); }
.badge-leave    { background: rgba(255, 183, 3, .16);  color: #ffd166; border: 1px solid rgba(255, 183, 3, .40); }
.badge-absent   { background: rgba(220, 53, 69, .18);  color: #ff9aa5; border: 1px solid rgba(220, 53, 69, .40); }
.badge-draft    { background: rgba(255, 255, 255, .10); color: #c3cfe6; border: 1px solid var(--t-card-border); }
.badge-sent     { background: rgba(59, 130, 246, .18); color: #a5c6ff; border: 1px solid rgba(138, 182, 255, .40); }
.badge-accepted { background: rgba(34, 163, 90, .18);  color: #7ee2a8; border: 1px solid rgba(110, 224, 160, .40); }
.badge-joined   { background: rgba(124, 143, 248, .18); color: #c3ccff; border: 1px solid rgba(124, 143, 248, .40); }
.badge-rejected { background: rgba(220, 53, 69, .18);  color: #ff9aa5; border: 1px solid rgba(220, 53, 69, .40); }

/* ============================================================
   BUTTONS — login-style gradients
   ============================================================ */
.btn-add,
.btn-primary {
  background: linear-gradient(145deg, var(--t-blue), var(--t-blue-dark)) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 14px 30px -12px rgba(59, 130, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, filter .25s;
}
.btn-add:hover, .btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn-add:active, .btn-primary:active { transform: scale(.975); }

.btn-success {
  background: linear-gradient(145deg, var(--t-green), var(--t-green-dark)) !important;
  border: 0 !important;
  box-shadow: 0 14px 30px -12px rgba(34, 163, 90, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-danger {
  background: linear-gradient(145deg, #e5484d, #b02a30) !important;
  border: 0 !important;
  box-shadow: 0 14px 30px -12px rgba(229, 72, 77, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-warning {
  background: linear-gradient(145deg, var(--t-gold), #e09600) !important;
  border: 0 !important; color: #082049 !important; font-weight: 700;
  box-shadow: 0 14px 30px -12px rgba(255, 183, 3, .45), inset 0 1px 0 rgba(255, 255, 255, .30);
}
.btn-secondary, .btn-light, .btn-outline-secondary {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: var(--t-ink) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .18) !important; color: #fff !important;
}
.btn-outline-primary { color: #a5c6ff !important; border-color: rgba(138, 182, 255, .55) !important; background: rgba(59, 130, 246, .10) !important; }
.btn-outline-primary:hover { background: rgba(59, 130, 246, .28) !important; color: #fff !important; }
.btn-outline-success { color: #7ee2a8 !important; border-color: rgba(110, 224, 160, .55) !important; background: rgba(34, 163, 90, .10) !important; }
.btn-outline-success:hover { background: rgba(34, 163, 90, .28) !important; color: #fff !important; }
.btn-outline-danger { color: #ff9aa5 !important; border-color: rgba(220, 53, 69, .55) !important; background: rgba(220, 53, 69, .10) !important; }
.btn-outline-danger:hover { background: rgba(220, 53, 69, .28) !important; color: #fff !important; }

/* ============================================================
   FORMS — dark inputs like login pages
   ============================================================ */
.form-control, .form-select, .search-box {
  background: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-border) !important;
  color: var(--t-ink) !important;
}
.form-control::placeholder, .search-box::placeholder { color: #7c8fb5; }
.form-control:focus, .form-select:focus, .search-box:focus {
  border-color: var(--t-blue) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18) !important;
  background: rgba(6, 18, 48, .9) !important;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239fb0cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 12px !important;
}
.form-select option { background: #0a2158; color: var(--t-ink); }
.form-label { color: var(--t-ink-dim); }
.form-check-input { background-color: var(--t-input-bg); border-color: var(--t-input-border); }
.form-check-input:checked { background-color: var(--t-blue); border-color: var(--t-blue); }
.form-check-label { color: var(--t-ink); }
input[type="date"], input[type="month"], input[type="time"] { color-scheme: dark; }
.form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 60px #0a2158 inset !important;
  -webkit-text-fill-color: var(--t-ink) !important;
  caret-color: var(--t-ink);
}

/* ============================================================
   MODALS / ALERTS / TOASTS — dark glass
   ============================================================ */
.modal-content {
  background: linear-gradient(160deg, rgba(24, 50, 108, .97), rgba(9, 24, 60, .99));
  border: 1px solid var(--t-card-border);
  color: var(--t-ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.modal-header { border-bottom: 1px solid var(--t-card-border); }
.modal-footer { border-top: 1px solid var(--t-card-border); }
.modal-title { color: var(--t-ink); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.alert-success {
  background: rgba(34, 163, 90, .14); color: #7ee2a8;
  border: 1px solid rgba(110, 224, 160, .40);
}
.alert-danger {
  background: rgba(220, 53, 69, .14); color: #ff9aa5;
  border: 1px solid rgba(220, 53, 69, .40);
}
.alert-warning {
  background: rgba(255, 183, 3, .12); color: #ffd166;
  border: 1px solid rgba(255, 183, 3, .40);
}
.alert-info {
  background: rgba(59, 130, 246, .14); color: #a5c6ff;
  border: 1px solid rgba(138, 182, 255, .40);
}

.app-toast {
  background: linear-gradient(160deg, rgba(24, 50, 108, .97), rgba(9, 24, 60, .99));
  border: 1px solid var(--t-card-border);
  color: var(--t-ink);
}

/* Pagination (if used) */
.page-link { background: rgba(255, 255, 255, .06); border-color: var(--t-card-border); color: var(--t-ink-dim); }
.page-link:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: var(--t-card-border); }
.page-item.active .page-link { background: linear-gradient(145deg, var(--t-blue), var(--t-blue-dark)); border-color: transparent; }

/* Step flow (payroll) */
.step-label { color: var(--t-ink); }
.step-num { background: linear-gradient(145deg, var(--t-gold), #e09600); color: #082049; }
.p-sum-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }

/* Links */
a { color: #8ab6ff; }
a:hover { color: #b3d0ff; }
.sidebar a, .sidebar a:hover, .action-icon, .choice-card { color: inherit; }

/* ============================================================
   AUTH PAGES (forgot / reset password) — match login card
   ============================================================ */
.login-wrapper {
  background:
    radial-gradient(52rem 32rem at 12% -8%, rgba(59, 130, 246, .16), transparent 60%),
    radial-gradient(46rem 30rem at 105% 18%, rgba(255, 183, 3, .12), transparent 60%),
    radial-gradient(40rem 30rem at 50% 118%, rgba(26, 68, 150, .55), transparent 65%),
    linear-gradient(165deg, var(--t-navy-900) 0%, var(--t-navy-950) 55%, #071a45 100%) !important;
}
.auth-card {
  background: var(--t-card-bg);
  border: 1px solid var(--t-card-border);
  color: var(--t-ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}
.auth-card h1, .auth-card h2, .auth-card h3, .auth-card h4, .auth-card h5 { color: var(--t-ink); }
.auth-card p, .auth-card .text-muted { color: var(--t-ink-dim) !important; }
.auth-icon.admin-theme { background: linear-gradient(160deg, var(--t-blue), var(--t-blue-dark)); box-shadow: 0 14px 30px -12px rgba(59, 130, 246, .5); }
.success-box {
  background: rgba(34, 163, 90, .14); color: #7ee2a8;
  border: 1px solid rgba(110, 224, 160, .40);
}
.error-box {
  background: rgba(220, 53, 69, .12); color: #ff9aa5;
  border: 1px solid rgba(220, 53, 69, .40);
}
.password-toggle { color: var(--t-ink-dim); }
.password-toggle:hover { color: #fff; }
.back-link { color: var(--t-ink-dim); }
.back-link:hover { color: var(--t-ink); }

/* ============================================================
   SCROLLBAR polish
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .22); }

/* ============================================================
   PRINT — revert to clean white (payslips / reports)
   ============================================================ */
@media print {
  body { background: #fff !important; color: #000 !important; }
  body::before, body::after { display: none !important; }
  .card-section, .stat-card, .topbar {
    background: #fff !important; color: #000 !important;
    border: 1px solid #ddd !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  h1, h2, h3, h4, h5, h6, p, table td, .stat-value { color: #000 !important; }
  table th { color: #444 !important; border-bottom-color: #999 !important; }
  .text-muted { color: #666 !important; }
}