/* OJT Manager design system — STEP B palette
   Powder blue #B0E0E6 (navbar, headers, primary surfaces)
   Cherry blossom pink #FFB7C5 (accents, active states, secondary buttons)
   Pearl white #F8F6F0 (page background, cards, forms)
   Deep slate #2B3A4A (text), darker blue #3E7C8C (links/buttons/focus),
   darker pink #B8445F (hover, danger text, delete button).
   Contrast (white text avoided on light fills; dark text on tints):
   #2B3A4A on #F8F6F0 = 11.9:1 | #2B3A4A on #B0E0E6 = 8.9:1 |
   #F8F6F0 on #3E7C8C = 4.9:1 | #F8F6F0 on #B8445F = 5.6:1 |
   #2B3A4A on #FFB7C5 = 7.9:1 | badges below all >= 4.6:1. */
:root {
  --ojt-navy: #3E7C8C;
  --ojt-blue: #3E7C8C;
  --ojt-gold: #FFB7C5;
  --ojt-paper: #F8F6F0;
  --ojt-ink: #2B3A4A;
  --ojt-muted: #2B3A4A;
  --ojt-powder: #B0E0E6;
  --ojt-pink: #FFB7C5;
  --ojt-danger: #B8445F;
  --ojt-card-radius: 14px;
  --glass-blur: 26px;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ojt-paper); color: var(--ojt-ink); font-family: var(--font-stack); }
.navbar-ojt { background: var(--ojt-powder); border-bottom: 3px solid var(--ojt-pink); }
.navbar-ojt .navbar-brand, .navbar-ojt .nav-link, .navbar-ojt .navbar-text { color: var(--ojt-ink); }
.navbar-ojt .nav-link:hover, .navbar-ojt .nav-link:focus, .navbar-ojt .nav-link.active { color: var(--ojt-ink); background: var(--ojt-pink); border-radius: 8px; }
.brand-logo { height: 32px; width: auto; max-width: 220px; vertical-align: -7px; margin-right: 0; background: #fff; border-radius: 8px; padding: 2px 6px; }
.isu-badge { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.isu-badge img { width: 100%; height: 100%; object-fit: contain; }
.isu-login { width: 96px; height: 96px; margin-inline: auto; }
.isu-report { width: 56px; height: 56px; border-radius: 12px; }
.brand-name { font-weight: 700; }
.card { border: 0; border-radius: var(--ojt-card-radius); box-shadow: 0 6px 18px rgba(43,58,74,.10); background: #fff; }
.card-header, .modal-header { background: var(--ojt-powder); color: var(--ojt-ink); }
.stat-card { display: flex; gap: .75rem; align-items: center; }
.stat-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #F8F6F0; background: var(--ojt-blue); flex: 0 0 auto; }
.stat-ico.gold { background: var(--ojt-danger); }
.stat-ico.navy { background: var(--ojt-blue); }
.stat-ico.green { background: #2e7d4f; }
.stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--ojt-ink); }
.stat-lbl { color: var(--ojt-ink); font-size: .85rem; opacity: .8; }
.table thead th { white-space: nowrap; position: sticky; top: 0; background: var(--ojt-powder); color: var(--ojt-ink); z-index: 1; }
.table-hover tbody tr:hover { background: #e8f4f6; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { font-weight: 600; }
.badge-pending { background: #fdf0d5; color: #2B3A4A; border: 1px solid #e8b4b8; }
.badge-approved, .badge-active, .badge-verified { background: #d7efe0; color: #1e5c38; border: 1px solid #9fd3b4; }
.badge-deployed { background: #cde9ef; color: #234e5c; border: 1px solid #8fc3d1; }
.badge-completed { background: #d9e6f2; color: #2B3A4A; border: 1px solid #9db8d2; }
.badge-rejected, .badge-expired { background: #f8d7de; color: #7c2740; border: 1px solid #e08aa0; }
a { color: var(--ojt-blue); }
a:hover, a:focus { color: var(--ojt-danger); }
.btn-primary { background: var(--ojt-blue); border-color: var(--ojt-blue); color: #F8F6F0; }
.btn-primary:hover, .btn-primary:focus { background: #356e7d; border-color: #356e7d; color: #F8F6F0; }
.btn-secondary { background: var(--ojt-pink); border-color: var(--ojt-pink); color: #2B3A4A; }
.btn-secondary:hover, .btn-secondary:focus { background: #f49fb0; border-color: #f49fb0; color: #2B3A4A; }
.btn-danger { background: var(--ojt-danger); border-color: var(--ojt-danger); }
.btn-danger:hover, .btn-danger:focus { background: #9c3a52; border-color: #9c3a52; }
.form-label { font-weight: 600; }
.form-control:focus, .form-select:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--ojt-blue); outline-offset: 2px; }
.modal-content { border-radius: var(--ojt-card-radius); }
.login-wrap { max-width: 460px; margin-inline: auto; }
.login-page { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.login-logo { height: 64px; width: auto; }
.login-card { border-top: 5px solid var(--ojt-pink); }
.auth-head { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: .5rem; }
.auth-head .isu-badge { width: 72px; height: 72px; }
.auth-head .divider { width: 1px; align-self: stretch; background: #cbd5e1; }
.auth-head .ojt-logo { height: 52px; width: auto; }
.auth-names { text-align: center; margin-bottom: .75rem; line-height: 1.25; }
.auth-names .uni { font-weight: 700; color: var(--ojt-ink); margin: 0; }
.auth-names .sys { color: var(--ojt-ink); opacity: .8; margin: 0; font-size: .9rem; }
/* GLASSY AUTH (login + register split card). Palette unchanged.
   Contrast: slate #2B3A4A on pearl/glass-white >= 11:1; white on teal #3E7C8C = 4.9:1;
   slate on powder #B0E0E6 = 8.9:1; slate on pink #FFB7C5 = 7.9:1. */
.auth-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: linear-gradient(135deg, var(--ojt-paper) 0%, var(--ojt-powder) 60%, #d9edf0 100%); position: relative; overflow: hidden; }
.login-auth-bg { background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)), url("../img/background-enhanced.jpg") center / cover no-repeat; }
.login-auth-bg::before, .login-auth-bg::after, .login-auth-bg .auth-facets { display: none; }
.auth-bg::before, .auth-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.auth-bg::before { width: 420px; height: 420px; background: var(--ojt-pink); top: -140px; right: -120px; }
.auth-bg::after { width: 380px; height: 380px; background: var(--ojt-powder); bottom: -140px; left: -120px; }
.auth-facets { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    linear-gradient(115deg, transparent 62%, rgba(255,255,255,.5) 62%, transparent 66%),
    linear-gradient(35deg, transparent 70%, rgba(255,255,255,.35) 70%, transparent 74%),
    linear-gradient(200deg, transparent 55%, rgba(62,124,140,.10) 55%, transparent 60%); }
.glass-card { position: relative; display: flex; width: min(880px, 100%); border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 18px 50px rgba(43,58,74,.18); }
.glass-left { flex: 1 1 55%; padding: 1.25rem 1.5rem; background: rgba(255,255,255,.50); border: 1px solid rgba(255,255,255,.55); color: #0B0F14; }
.glass-right { flex: 1 1 45%; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6rem;
  background: linear-gradient(150deg, rgba(176,224,230,.86), rgba(255,183,197,.86));
  background: linear-gradient(150deg, color-mix(in srgb, var(--ojt-powder) 86%, transparent), color-mix(in srgb, var(--ojt-pink) 86%, transparent));
  color: var(--ojt-ink); border-left: 1px solid rgba(255,255,255,.7); }
.glass-card .glass-left .form-control, .glass-card .glass-left .form-select { background-color: rgba(255,255,255,.85); color: var(--ojt-ink); }
.glass-card .glass-left #captcha-img { background-color: rgba(255,255,255,.85); }
.glass-card .glass-left .form-control::placeholder { color: var(--ojt-ink); opacity: 1; }
.glass-card .text-muted, .glass-left .form-text { color: #0B0F14 !important; }
.glass-card a:not(.btn):not(.register-tab), .glass-card a:not(.btn):not(.register-tab):hover, .glass-card a:not(.btn):not(.register-tab):focus { color: #0B0F14; }
.glass-card .btn-primary, .glass-card .btn-primary:hover, .glass-card .btn-primary:focus { color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card { background: rgba(255,255,255,.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-left { background: rgba(255,255,255,.92); }
  .glass-right { background: linear-gradient(150deg, var(--ojt-powder), var(--ojt-pink)); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-card { background: rgba(255,255,255,.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass-left { background: rgba(255,255,255,.92); }
  .glass-right { background: linear-gradient(150deg, var(--ojt-powder), var(--ojt-pink)); }
}
.glass-right .hello { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; margin: 0; }
.glass-right p.sub { margin: 0; font-size: .95rem; }
.register-auth-bg { align-items: flex-start; overflow: clip; padding-bottom: calc(1rem + 4px); }
.register-glass-card { min-height: 36rem; margin: auto; align-items: stretch; }
.register-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.register-tab { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; padding: .5rem .4rem; border: 1px solid var(--ojt-blue); background: #fff; color: var(--ojt-blue); font-size: .875rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; }
.register-tab:first-child { border-radius: .375rem 0 0 .375rem; }
.register-tab:last-child { border-radius: 0 .375rem .375rem 0; }
.register-tab + .register-tab { border-left: 0; }
.register-tab:hover { background: #edf6f7; color: var(--ojt-blue); }
.register-tab.active, .register-tab.active:hover { background: var(--ojt-blue); color: #fff; }
.register-tab:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--ojt-ink); outline-offset: 2px; }
.register-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.register-field { min-width: 0; }
.register-span-12 { grid-column: span 12; }
.register-span-6 { grid-column: span 6; }
.register-field > .form-label { display: block; margin: 0 0 .35rem; font-size: .9rem; line-height: 1.25; white-space: nowrap; }
.register-form .form-control, .register-form .form-select { box-sizing: border-box; width: 100%; height: 44px; min-height: 44px; padding: .5rem .75rem; }
.register-help { display: block; margin-top: .3rem; color: #52616e; font-size: .78rem; line-height: 1.3; }
.glass-left .register-help { color: #0B0F14; }
.register-captcha > .mb-3 { margin-bottom: 0 !important; }
.register-captcha .form-label { display: block; margin-bottom: .35rem; }
.register-form-grid .register-captcha .form-text { margin-top: .5rem; }
.register-form-grid .btn { min-height: 44px; }
.register-mobile-signin { display: none; }
.btn-glass-outline { border: 2px solid var(--ojt-ink); color: var(--ojt-ink); border-radius: 999px; padding: .5rem 1.25rem; font-weight: 700; background: transparent; }
.btn-glass-outline:hover, .btn-glass-outline:focus { background: var(--ojt-pink); border-color: var(--ojt-pink); color: var(--ojt-ink); }
.btn-lift { transition: transform .15s ease, box-shadow .15s ease; }
.btn-lift:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(43,58,74,.18); }
.field-row { position: relative; display: block; }
.field-icon { position: relative; display: block; }
.field-icon > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ojt-blue); pointer-events: none; }
.field-icon .form-control { padding-left: 2.4rem; }
.field-row .form-control[name="password"] { padding-right: 3rem; }
.field-eye { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ojt-blue); border-radius: 8px; padding: 0; line-height: 0; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
.field-eye:focus-visible { outline: 3px solid var(--ojt-blue); outline-offset: 1px; }
#captcha-img { max-width: 100%; height: auto; }
.underline-input { margin-bottom: .6rem; }
.underline-input .form-label { margin-bottom: .2rem; }
.underline-input .form-control { border: 0; border-bottom: 2px solid #b9c7d2; border-radius: 0; background: transparent; padding-left: 2.4rem; }
.underline-input .form-control:focus { border-bottom-color: var(--ojt-blue); box-shadow: none; }
.auth-mini-logos { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.auth-mini-logos .divider { width: 1px; align-self: stretch; background: rgba(43,58,74,.25); }
@keyframes glassIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.glass-card { animation: glassIn .5s ease-out; }
.glass-left > * { animation: riseIn .45s ease-out both; }
.glass-left > *:nth-child(1) { animation-delay: 0s; }
.glass-left > *:nth-child(2) { animation-delay: .06s; }
.glass-left > *:nth-child(3) { animation-delay: .12s; }
.glass-left > *:nth-child(4) { animation-delay: .18s; }
.glass-left > *:nth-child(5) { animation-delay: .24s; }
.glass-left > *:nth-child(6) { animation-delay: .3s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.glass-right > * { animation: slideRight .5s ease-out both; }
.glass-right > *:nth-child(2) { animation-delay: .08s; }
.glass-right > *:nth-child(3) { animation-delay: .14s; }
.glass-right > *:nth-child(4) { animation-delay: .2s; }
.glass-right > *:nth-child(5) { animation-delay: .26s; }
@keyframes slideRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.auth-bg::before { animation: driftA 26s ease-in-out infinite alternate; }
.auth-bg::after { animation: driftB 30s ease-in-out infinite alternate; }
@keyframes driftA { from { transform: translate(0,0); } to { transform: translate(-40px,30px); } }
@keyframes driftB { from { transform: translate(0,0); } to { transform: translate(36px,-28px); } }
.underline-input .form-control { position: relative; }
.underline-input { position: relative; }
.underline-input::after { content: ""; position: absolute; left: 50%; bottom: 0; height: 2px; width: 0; background: var(--ojt-blue); transition: left .2s ease-out, width .2s ease-out; pointer-events: none; }
.underline-input:focus-within::after { left: 0; width: 100%; }
.underline-input:focus-within > .field-icon > svg, .field-icon:focus-within > svg { color: var(--ojt-blue); }
.underline-input .form-control { transition: box-shadow .2s ease-out; }
.underline-input .form-control:focus { box-shadow: 0 6px 14px rgba(62,124,140,.18); }
.btn-lift { transition: transform .15s ease, box-shadow .15s ease; }
.btn-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(43,58,74,.22); }
.btn-lift:active { transform: scale(.98); box-shadow: 0 3px 8px rgba(43,58,74,.2); transition-duration: .08s; }
.btn-spinner { display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -0.125em; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert-fade { animation: errIn .3s ease-out; }
@keyframes errIn { from { opacity: 0; } to { opacity: 1; } }
.shake-once { animation: shakeX .4s ease; }
@keyframes shakeX { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
.field-eye svg { transition: opacity .15s ease-out; }
.field-eye[aria-pressed="true"] svg { opacity: .55; }
.cap-spin { animation: capRot .5s ease; }
@keyframes capRot { to { transform: rotate(360deg); } }
.cap-fading { animation: capFade .3s ease-out; }
@keyframes capFade { from { opacity: .25; } to { opacity: 1; } }
.page-leaving .glass-card { animation: pageOut .2s ease-in both; }
@keyframes pageOut { to { opacity: 0; transform: translateX(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .glass-card, .glass-left > *, .glass-right > *, .auth-bg::before, .auth-bg::after,
  .btn-spinner, .alert-fade, .shake-once, .field-eye svg, .cap-spin, .cap-fading, .page-leaving .glass-card { animation: none !important; }
  .btn-lift, .underline-input::after, .underline-input .form-control, .field-eye svg { transition: none !important; }
  .btn-lift:hover { transform: none; box-shadow: none; }
  .btn-lift:active { transform: none; }
}
@media (max-width: 768px) {
  .glass-card { flex-direction: column; }
  .glass-right { border-left: 0; border-top: 1px solid rgba(255,255,255,.7); padding: 1rem; }
  .glass-left { padding: 1rem; }
}
@media (max-width: 480px) {
  .auth-head .isu-badge { width: 60px; height: 60px; }
  .auth-head .ojt-logo { height: 44px; }
  .auth-names .sys { font-size: .85rem; }
}
@media (max-width: 480px) {
  .register-captcha .d-flex { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; }
  .register-captcha #captcha-img { grid-column: 1 / -1; width: 200px; max-width: 100% !important; height: auto; }
  .register-captcha #r-cap { grid-column: 1; width: 100%; }
  .register-captcha button { grid-column: 2; }
}
@media (max-width: 768px) {
  .register-form-grid > .register-field { grid-column: span 12; }
  .register-glass-card { min-height: 36rem; }
  .register-aside-copy, .register-aside-signin { display: none; }
  .register-mobile-signin { display: block; }
}
.report-head { display: flex; align-items: center; gap: .75rem; border-bottom: 3px solid var(--ojt-blue); padding-bottom: .5rem; margin-bottom: 1rem; background: var(--ojt-powder); border-radius: 10px; padding: .5rem .75rem; }
.report-head img { height: 44px; width: auto; }
.chart-box { height: 220px; position: relative; }
.chart-box canvas { max-height: 220px; }
.report-head .sys { font-weight: 700; color: var(--ojt-ink); }
.empty-state { text-align: center; color: var(--ojt-ink); padding: 2rem 1rem; }
.empty-state .big { font-size: 2rem; }
footer.site { border-top: 3px solid var(--ojt-pink); }
main.container { max-width: 1280px; }
@media (max-width: 768px) {
  .stat-num { font-size: 1.3rem; }
  .btn { min-height: 40px; }
}
@media (max-width: 480px) {
  main.container { padding: .75rem; }
  .card { border-radius: 10px; }
  .report-head img { height: 34px; }
}
.login-auth-bg { overflow-x: hidden; overflow-y: auto; }
.login-auth-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .65rem; width: min(880px, 100%); }
.login-auth-content > .glass-card { width: 100%; }
.demo-accounts { width: min(640px, 100%); padding: .65rem .9rem; color: var(--ojt-ink); background: rgba(248,246,240,.88); border: 1px solid rgba(255,255,255,.75); border-radius: 14px; box-shadow: 0 8px 24px rgba(43,58,74,.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.demo-accounts summary { color: var(--ojt-ink); font-weight: 700; cursor: pointer; }
.demo-accounts summary:focus-visible, .demo-fill-button:focus-visible { outline: 3px solid var(--ojt-blue); outline-offset: 2px; }
.demo-accounts-note { margin: .55rem 0 .4rem; font-size: .85rem; }
.demo-accounts-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .88rem; }
.demo-accounts-table th, .demo-accounts-table td { padding: .4rem .3rem; text-align: left; vertical-align: middle; border-top: 1px solid rgba(62,124,140,.18); overflow-wrap: anywhere; }
.demo-accounts-table thead th { color: var(--ojt-ink); background: rgba(176,224,230,.65); }
.demo-accounts-table code { color: var(--ojt-ink); font-size: .86rem; overflow-wrap: anywhere; }
.demo-fill-button { min-height: 34px; white-space: nowrap; }
@media (max-width: 480px) {
  .login-auth-content { gap: .5rem; }
  .demo-accounts { padding: .55rem .7rem; }
  .demo-accounts-table, .demo-accounts-table tbody { display: block; width: 100%; }
  .demo-accounts-table thead { display: none; }
  .demo-accounts-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .45rem; padding: .45rem 0; border-top: 1px solid rgba(62,124,140,.18); }
  .demo-accounts-table th[scope="row"] { grid-column: 1 / -1; padding: .1rem 0; border: 0; }
  .demo-accounts-table td { display: flex; justify-content: space-between; gap: .4rem; grid-column: 1 / -1; padding: .1rem 0; border: 0; }
  .demo-accounts-table td::before { content: attr(data-label); flex: 0 0 4.5rem; color: var(--ojt-ink); font-weight: 700; }
  .demo-accounts-table td[data-label="Action"] { grid-column: 2; justify-content: flex-end; }
  .demo-accounts-table td[data-label="Action"]::before { content: none; }
}
@media print {
  nav, footer, .no-print { display: none !important; }
  body { background: #fff; }
  main { padding: 0 !important; max-width: none; }
  .card { box-shadow: none; border: 1px solid #999; }
  .badge { border: 1px solid #000; background: #fff !important; color: #000 !important; }
  a { text-decoration: none; color: #000; }
  .report-head { border-bottom: 2px solid #000; }
}
.backup-list-card { background: var(--ojt-paper); border: 1px solid rgba(62,124,140,.22); }
.backup-list-card .table { --bs-table-bg: transparent; color: var(--ojt-ink); }
.backup-list-card .table thead th { background: var(--ojt-powder); color: var(--ojt-ink); }
.backup-name { overflow-wrap: anywhere; }
.backup-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.backup-actions form { margin: 0; }
@media (max-width: 575.98px) {
  .backup-list-card { padding: .8rem !important; }
  .backup-list-card .table thead { display: none; }
  .backup-list-card .table,
  .backup-list-card .table tbody,
  .backup-list-card .table tbody tr,
  .backup-list-card .table tbody td { display: block; width: 100%; }
  .backup-list-card .table tbody tr { padding: .5rem 0; border-bottom: 1px solid rgba(62,124,140,.2); }
  .backup-list-card .table tbody td { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .5rem; border: 0; padding: .25rem 0; }
  .backup-list-card .table tbody td::before { content: attr(data-label); color: var(--ojt-ink); font-weight: 700; }
  .backup-list-card .table tbody td[colspan] { display: block; }
  .backup-list-card .table tbody td[colspan]::before { content: none; }
  .backup-actions { grid-column: 2; }
}
/* assets/css/theme-dark.css — Vision UI dark theme para sa BUONG system.
   I-load ito PAGKATAPOS ng style.css. Hindi ginagalaw ang style.css. */
:root{
  --ojt-navy:#0075ff;--ojt-blue:#0075ff;--ojt-gold:#21d4fd;--ojt-paper:#060b28;--ojt-ink:#fff;--ojt-muted:#a0aec0;
  --ojt-powder:#0f1c54;--ojt-pink:#7551ff;--ojt-danger:#ff5b6e;
  --v-card:rgba(20,28,74,.62);--v-line:rgba(255,255,255,.1);--v-muted:#a0aec0;--v-cyan:#21d4fd;--v-input:rgba(6,11,40,.55);
  --font-stack:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
}
[data-bs-theme=dark]{--bs-body-bg:#060b28;--bs-body-color:#fff;--bs-border-color:var(--v-line);--bs-emphasis-color:#fff}
body{background:radial-gradient(1100px 560px at 85% -8%,#1b2a74 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(0,117,255,.25),transparent 60%),#060b28;background-attachment:fixed;color:#fff}
a{color:var(--v-cyan)} a:hover,a:focus{color:#fff}
.text-muted,.form-text{color:var(--v-muted)!important}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--v-cyan);outline-offset:2px}

/* cards + stat */
.card{background:var(--v-card);color:#fff;border:1px solid var(--v-line);border-radius:20px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 40px rgba(0,0,0,.28);--bs-card-bg:transparent;--bs-card-cap-bg:#0f1c54}
.card-header,.modal-header{background:rgba(15,28,84,.8);color:#fff;border-bottom:1px solid var(--v-line)}
.login-card{border-top:1px solid var(--v-line)}
.stat-ico,.stat-ico.navy{color:#fff;background:linear-gradient(135deg,#0075ff,#21d4fd);box-shadow:0 6px 18px rgba(0,117,255,.45)}
.stat-ico.gold{background:linear-gradient(135deg,#ff5b6e,#ff8a5b);box-shadow:0 6px 18px rgba(255,91,110,.4)}
.stat-ico.green{background:linear-gradient(135deg,#01b574,#3ddc97);box-shadow:0 6px 18px rgba(1,181,116,.4)}
.stat-num{color:#fff} .stat-lbl{color:var(--v-muted);opacity:1}

/* tables */
.table{--bs-table-bg:transparent;--bs-table-color:#fff;--bs-table-border-color:var(--v-line);--bs-table-hover-bg:rgba(255,255,255,.05);--bs-table-hover-color:#fff;--bs-table-striped-bg:rgba(255,255,255,.03);--bs-table-striped-color:#fff;color:#fff}
.table thead th{background:#0f1c54;color:var(--v-muted);font-weight:600;border-bottom:1px solid var(--v-line)}
.table-hover tbody tr:hover{background:rgba(255,255,255,.05)}

/* forms */
.form-label{color:#fff}
.form-control,.form-select{background-color:var(--v-input);color:#fff;border:1px solid var(--v-line);border-radius:12px}
.form-control::placeholder{color:#6b7599}
.form-control:focus,.form-select:focus{background-color:rgba(6,11,40,.75);color:#fff;border-color:#0075ff;box-shadow:0 0 0 4px rgba(0,117,255,.2);outline:0}
.form-control:disabled,.form-control[readonly]{background-color:rgba(255,255,255,.05);color:var(--v-muted)}
.form-select option{background:#0d1745;color:#fff}
.input-group-text{background:#0f1c54;color:var(--v-muted);border-color:var(--v-line)}
input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}

/* buttons */
.btn{border-radius:12px;font-weight:600}
.btn-primary{--bs-btn-bg:#0075ff;--bs-btn-border-color:#0075ff;--bs-btn-color:#fff;--bs-btn-hover-bg:#1a85ff;--bs-btn-hover-border-color:#1a85ff;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#0062d6;--bs-btn-active-border-color:#0062d6;--bs-btn-active-color:#fff;--bs-btn-focus-shadow-rgb:0,117,255;background:#0075ff;border-color:#0075ff;color:#fff;box-shadow:0 8px 22px rgba(0,117,255,.35)}
.btn-primary:hover,.btn-primary:focus{background:#1a85ff;border-color:#1a85ff;color:#fff}
.btn-secondary{--bs-btn-bg:rgba(255,255,255,.08);--bs-btn-border-color:var(--v-line);--bs-btn-color:#fff;--bs-btn-hover-bg:rgba(255,255,255,.16);--bs-btn-hover-border-color:var(--v-line);--bs-btn-hover-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.2);--bs-btn-active-border-color:var(--v-line);background:rgba(255,255,255,.08);border-color:var(--v-line);color:#fff}
.btn-secondary:hover,.btn-secondary:focus{background:rgba(255,255,255,.16);border-color:var(--v-line);color:#fff}
.btn-danger{--bs-btn-bg:#ff5b6e;--bs-btn-border-color:#ff5b6e;--bs-btn-hover-bg:#e84a5d;--bs-btn-hover-border-color:#e84a5d;--bs-btn-active-bg:#d63f52;--bs-btn-active-border-color:#d63f52;background:#ff5b6e;border-color:#ff5b6e;color:#fff}
.btn-danger:hover,.btn-danger:focus{background:#e84a5d;border-color:#e84a5d}

/* badges */
.badge-pending{background:rgba(246,173,85,.18);color:#f6ad55;border:1px solid rgba(246,173,85,.35)}
.badge-approved,.badge-active,.badge-verified{background:rgba(1,181,116,.18);color:#3ddc97;border:1px solid rgba(1,181,116,.4)}
.badge-deployed{background:rgba(33,212,253,.15);color:#21d4fd;border:1px solid rgba(33,212,253,.35)}
.badge-completed{background:rgba(117,81,255,.2);color:#b4a1ff;border:1px solid rgba(117,81,255,.4)}
.badge-rejected,.badge-expired{background:rgba(255,91,110,.15);color:#ff8f9c;border:1px solid rgba(255,91,110,.4)}

/* modal, dropdown, misc */
.modal-content{background:#0d1745;border:1px solid var(--v-line);color:#fff;border-radius:20px}
.modal-footer{border-top-color:var(--v-line)}
.dropdown-menu{background:#0d1745;border:1px solid var(--v-line)}
.dropdown-item{color:#fff} .dropdown-item:hover,.dropdown-item:focus{background:rgba(255,255,255,.08);color:#fff}
.btn-close{filter:invert(1)}
.alert{border-radius:14px}
.report-head{background:rgba(15,28,84,.8);border-bottom:2px solid #0075ff}
.report-head .sys,.empty-state{color:#fff}
.backup-list-card{background:var(--v-card);border:1px solid var(--v-line)}
.backup-list-card .table thead th{background:#0f1c54;color:var(--v-muted)}
footer.site{border-top:1px solid var(--v-line)}

/* sidebar layout */
.app-shell{display:flex;min-height:100vh}
.app-sidebar{width:260px;flex:0 0 260px;position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 16px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,rgba(6,11,40,.92),rgba(10,20,60,.7));border-right:1px solid var(--v-line)}
.app-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;margin-bottom:12px;border-bottom:1px solid var(--v-line);color:#fff;font-weight:700;text-decoration:none}
.app-brand:hover{color:#fff}
.app-nav-title{color:var(--v-muted);font-size:.78rem;font-weight:600;padding:14px 12px 6px}
.app-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:var(--v-muted);font-weight:600;font-size:.9rem;text-decoration:none}
.app-nav a .ico{width:32px;height:32px;border-radius:10px;background:#0f1c54;display:grid;place-items:center;color:#fff;flex:none}
.app-nav a .ico svg{width:16px;height:16px}
.app-nav a:hover{color:#fff;background:rgba(255,255,255,.04)}
.app-nav a.active{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.app-nav a.active .ico{background:#0075ff;box-shadow:0 4px 14px rgba(0,117,255,.5)}
.app-user{margin-top:auto;padding:12px;border:1px solid var(--v-line);border-radius:16px;background:rgba(255,255,255,.04);display:flex;align-items:center;gap:10px}
.app-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0075ff,#21d4fd);display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
.app-user .nm{font-weight:600;font-size:.85rem;line-height:1.2;overflow-wrap:anywhere}
.app-user small{color:var(--v-muted);display:block;line-height:1.2}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
.app-content{flex:1;padding:24px 28px;max-width:1400px;width:100%}
.app-mobilebar{display:none}
@media(min-width:992px){.app-sidebar.collapse{display:flex!important}}
@media(max-width:991.98px){
  .app-shell{display:block}
  .app-mobilebar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--v-line);background:rgba(6,11,40,.92)}
  .app-sidebar{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--v-line)}
  .app-content{padding:16px}
}

/* login/register glass card (para pareho sa index.php na Vision style) */
.auth-bg{background:radial-gradient(1000px 520px at 85% -10%,#1b2a74 0%,transparent 60%),#060b28}
.auth-bg::before{background:#7551ff;opacity:.5}
.auth-bg::after{background:#0075ff;opacity:.5}
.auth-facets{display:none}
.glass-card{background:rgba(20,28,74,.72);border:1px solid var(--v-line);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.glass-left{background:transparent;border:0;color:#fff}
.glass-right{background:linear-gradient(150deg,rgba(0,117,255,.55),rgba(117,81,255,.6));color:#fff;border-left:1px solid var(--v-line)}
.glass-card .glass-left .form-control,.glass-card .glass-left .form-select{background-color:var(--v-input);color:#fff}
.glass-card .glass-left #captcha-img{background-color:#fff}
.glass-card .glass-left .form-control::placeholder{color:#6b7599;opacity:1}
.glass-card .text-muted,.glass-left .form-text{color:var(--v-muted)!important}
.glass-card a:not(.btn):not(.register-tab){color:#21d4fd}
.glass-card a:not(.btn):not(.register-tab):hover,.glass-card a:not(.btn):not(.register-tab):focus{color:#fff}
.register-tab{background:var(--v-input);border-color:var(--v-line);color:var(--v-muted)}
.register-tab:hover{background:rgba(255,255,255,.08);color:#fff}
.register-tab.active,.register-tab.active:hover{background:#0075ff;border-color:#0075ff;color:#fff}
.register-tab:focus-visible{outline-color:#21d4fd}
.register-help,.glass-left .register-help{color:var(--v-muted)}
.btn-glass-outline{border-color:#fff;color:#fff}
.btn-glass-outline:hover,.btn-glass-outline:focus{background:#fff;border-color:#fff;color:#0b1437}
.underline-input .form-control{border-bottom-color:rgba(255,255,255,.25)}
.underline-input .form-control:focus{border-bottom-color:#21d4fd}
.underline-input::after{background:#21d4fd}
.field-icon>svg,.field-eye{color:var(--v-muted)}
.auth-head .divider,.auth-mini-logos .divider{background:var(--v-line)}

@media print{
  body,.app-main{background:#fff!important;color:#000!important}
  .app-sidebar,.app-mobilebar{display:none!important}
  .card{background:#fff!important;color:#000!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .table{--bs-table-color:#000;color:#000}
  .table thead th{background:#eee;color:#000}
  .stat-num,.stat-lbl,.text-muted,.report-head .sys{color:#000!important}
  .report-head{background:#fff}
}