/* =========================================================
   V6.1 STAGE 2 — APP SHELL, SIDEBAR, NAVBAR & LEGACY PAGES
   ========================================================= */
:root {
  --sidebar-w: 284px;
  --topbar-h: 82px;
  --surface: rgba(255,255,255,.78);
  --surface-strong: rgba(255,255,255,.92);
  --line: rgba(6,78,59,.12);
  --text: #10251d;
  --text-soft: #61756d;
  --shadow-soft: 0 18px 55px rgba(2,44,34,.13);
}

#mainApp {
  position: relative;
  min-height: 100svh;
  color: var(--text);
  background: #eef5f1;
  isolation: isolate;
}

#mainApp .app-backdrop {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(105deg, rgba(246,251,248,.95), rgba(244,250,247,.78)),
    url('../img/background.jpg') center / cover fixed no-repeat;
}

#mainApp .app-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 86% 5%, rgba(212,175,55,.15), transparent 25%),
    linear-gradient(to bottom, transparent 55%, rgba(6,78,59,.05));
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 18px 15px;
  overflow-y: auto;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(2,44,34,.98), rgba(5,83,61,.96)),
    url('../img/background.jpg') center / cover no-repeat;
  border-right: 1px solid rgba(244,214,117,.22);
  box-shadow: 15px 0 45px rgba(2,44,34,.18);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 4px 8px 15px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-brand img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
.sidebar-brand div { min-width: 0; }
.sidebar-brand strong,.sidebar-brand span { display: block; line-height: 1.05; }
.sidebar-brand strong { font-size: .98rem; font-weight: 800; }
.sidebar-brand span { color: var(--gold-300); font-size: .94rem; font-weight: 800; }
.sidebar-brand small { display: block; margin-top: 5px; color: rgba(255,255,255,.58); font-size: .63rem; letter-spacing: .05em; }

.sidebar-nav { display: flex !important; flex: 1; flex-direction: column; gap: 5px; padding: 15px 0 6px !important; background: transparent !important; box-shadow: none !important; }
.sidebar-section-label { margin: 15px 11px 7px; color: rgba(244,214,117,.62); font-size: .6rem; font-weight: 700; letter-spacing: .16em; }
.sidebar-link {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; color: rgba(255,255,255,.72); text-align: left; border: 1px solid transparent;
  border-radius: 13px; background: transparent; cursor: pointer; transition: .2s ease;
}
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.sidebar-link.active { color: #fff; background: linear-gradient(100deg, rgba(212,175,55,.22), rgba(255,255,255,.08)); border-color: rgba(244,214,117,.22); box-shadow: inset 3px 0 0 var(--gold-300); }
.sidebar-link-icon { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 22px; }
.sidebar-link-icon svg { width: 19px; height: 19px; fill: currentColor; }
.sidebar-link span:last-child { font-size: .78rem; font-weight: 600; }

.sidebar-footer-card { display: flex; align-items: center; gap: 10px; margin: 10px 4px 8px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.07); }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 12px #4ade80; }
.sidebar-footer-card div { display: flex; flex-direction: column; }
.sidebar-footer-card small { color: rgba(255,255,255,.5); font-size: .61rem; }
.sidebar-footer-card strong { color: #fff; font-size: .74rem; }
.sidebar-logout { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.07); cursor: pointer; }
.sidebar-logout:hover { background: rgba(220,38,38,.22); border-color: rgba(254,202,202,.25); }
.sidebar-logout svg { width: 17px; fill: currentColor; }

.app-main-shell { min-height: 100svh; margin-left: var(--sidebar-w); }
.topbar {
  position: sticky !important; top: 0; z-index: 70; min-height: var(--topbar-h); display: flex !important; align-items: center; justify-content: space-between;
  padding: 13px 26px !important; color: var(--text) !important; text-align: left !important;
  background: rgba(255,255,255,.76) !important; border-bottom: 1px solid rgba(6,78,59,.10); box-shadow: 0 8px 30px rgba(2,44,34,.06) !important;
  backdrop-filter: blur(17px) saturate(125%); -webkit-backdrop-filter: blur(17px) saturate(125%);
}
.topbar-left,.topbar-right { display: flex; align-items: center; }
.topbar-left { gap: 13px; }
.topbar-right { gap: 13px; }
.topbar-kicker { display: block; color: #779087; font-size: .58rem; font-weight: 700; letter-spacing: .15em; }
.topbar h1 { margin: 2px 0 0 !important; color: var(--emerald-900) !important; font-size: 1.2rem !important; line-height: 1.1; text-shadow: none !important; }
.icon-button { width: 42px; height: 42px; display: none; place-items: center; color: var(--emerald-900); border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.72); cursor: pointer; }
.icon-button svg { width: 22px; fill: currentColor; }
.date-time-box { padding-right: 14px; text-align: right; border-right: 1px solid var(--line); }
.date-time-box span,.date-time-box strong { display: block; }
.date-time-box span { color: var(--text-soft); font-size: .62rem; }
.date-time-box strong { color: var(--emerald-900); font-size: .76rem; }
#mainApp .sync-status { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px; border-radius: 999px; font-size: .65rem; font-weight: 700; }
#mainApp .sync-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
#mainApp .sync-online { color: #047857; background: rgba(16,185,129,.11); border: 1px solid rgba(16,185,129,.16); }
#mainApp .sync-offline { color: #b45309; background: rgba(245,158,11,.12); }
#mainApp .sync-error { color: #b91c1c; background: rgba(239,68,68,.12); }
.user-profile { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.74); }
.user-avatar { width: 35px; height: 35px; display: grid; place-items: center; color: #fff; font-size: .67rem; font-weight: 800; border-radius: 11px; background: linear-gradient(135deg,var(--emerald-800),var(--emerald-600)); }
.user-profile div:nth-child(2) { min-width: 90px; }
.user-profile span,.user-profile small { display: block; }
.user-profile span { color: var(--text-soft); font-size: .62rem; }
.user-profile span strong { color: var(--text); }
.user-profile small { color: var(--gold-600); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.user-profile button { width: 31px; height: 31px; display: grid; place-items: center; color: #8b9b95; border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.user-profile button:hover { color: #b91c1c; background: #fee2e2; }
.user-profile button svg { width: 17px; fill: currentColor; }

.app-content { width: min(100%, 1480px); min-height: calc(100svh - var(--topbar-h) - 56px); margin: 0 auto; padding: 25px 26px 55px; }
#mainApp .tab-content { display: none; animation: pageEnter .28s ease both; }
#mainApp .tab-content.active { display: block; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity:1; transform:none; } }

#mainApp .page-title { margin: 0 0 18px !important; color: var(--emerald-900) !important; font-size: 1.38rem !important; text-align: left !important; text-shadow: none !important; }
#mainApp .page-title::after { display: none !important; }
#mainApp .form-grid { gap: 16px !important; }
#mainApp .form-group { margin-bottom: 16px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
#mainApp #inputPage,#mainApp #riwayatPage,#mainApp #laporanPage,#mainApp #presensiPage { padding: 25px !important; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-soft); backdrop-filter: blur(15px); }
#mainApp .form-label { color: #365249 !important; font-size: .73rem !important; font-weight: 700 !important; }
#mainApp .form-control { min-height: 47px !important; padding: 11px 13px !important; color: var(--text) !important; border: 1px solid rgba(6,78,59,.15) !important; border-radius: 12px !important; background: rgba(255,255,255,.88) !important; box-shadow: inset 0 1px 2px rgba(2,44,34,.03) !important; }
#mainApp .form-control:focus { border-color: var(--gold-500) !important; box-shadow: 0 0 0 4px rgba(212,175,55,.13) !important; }
#mainApp .btn { min-height: 43px !important; padding: 10px 16px !important; border: 0 !important; border-radius: 12px !important; font-size: .72rem !important; font-weight: 700 !important; box-shadow: 0 8px 20px rgba(2,44,34,.10) !important; }
#mainApp .btn-primary { background: linear-gradient(135deg,var(--emerald-800),var(--emerald-600)) !important; }
#mainApp .btn-success { background: linear-gradient(135deg,#047857,#10b981) !important; }
#mainApp .btn-danger { background: linear-gradient(135deg,#b91c1c,#ef4444) !important; }
#mainApp .filter-section,#mainApp .summary-box,#mainApp .note-box { border: 1px solid var(--line) !important; border-radius: 16px !important; background: rgba(255,255,255,.72) !important; box-shadow: none !important; }
#mainApp .filter-title { color: var(--emerald-900) !important; }
#mainApp .table-container { overflow: auto; border: 1px solid rgba(6,78,59,.11); border-radius: 15px; background: rgba(255,255,255,.84); box-shadow: 0 10px 30px rgba(2,44,34,.05); }
#mainApp .data-table { min-width: 900px; border-collapse: collapse !important; }
#mainApp .data-table th { position: sticky; top: 0; z-index: 2; padding: 12px 10px !important; color: #fff !important; font-size: .68rem !important; background: linear-gradient(135deg,var(--emerald-900),var(--emerald-700)) !important; border: 0 !important; }
#mainApp .data-table td { padding: 11px 10px !important; color: #344b43; font-size: .68rem !important; border-color: rgba(6,78,59,.08) !important; }
#mainApp .data-table tbody tr:hover { background: rgba(212,175,55,.06) !important; }
#mainApp .stat-card { border: 1px solid var(--line) !important; border-radius: 16px !important; background: rgba(255,255,255,.82) !important; box-shadow: none !important; }

.app-footer { display: flex; justify-content: space-between; gap: 15px; margin: 0 26px 18px; padding: 15px 18px; color: #5d7169; border-top: 1px solid var(--line); font-size: .66rem; }
.app-footer small { color: var(--gold-600); font-weight: 700; }
.sidebar-overlay { display: none; }
.mobile-bottom-nav { display: none !important; }

@media (max-width: 1100px) {
  .date-time-box { display:none; }
  .topbar { padding-inline: 18px !important; }
  .app-content { padding-inline: 18px; }
}

@media (max-width: 860px) {
  :root { --topbar-h: 72px; }
  .app-sidebar { transform: translateX(-102%); transition: transform .28s ease; }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 85; display: block; visibility: hidden; opacity: 0; background: rgba(2,20,14,.52); backdrop-filter: blur(3px); transition: .25s ease; }
  .sidebar-overlay.show { visibility: visible; opacity: 1; }
  .app-main-shell { margin-left: 0; padding-bottom: 70px; }
  .icon-button { display: grid; }
  .topbar-right .sync-status { display: none !important; }
  .user-profile div:nth-child(2) { display:none; }
  .user-profile { gap: 2px; }
  .app-content { padding: 16px 13px 36px; }
  #mainApp #inputPage,#mainApp #riwayatPage,#mainApp #laporanPage,#mainApp #presensiPage { padding: 18px 14px !important; border-radius: 19px; }
  .app-footer { display:none; }
  .mobile-bottom-nav { position: fixed; inset: auto 9px 9px; z-index: 75; display: grid !important; grid-template-columns: repeat(5,1fr); gap: 3px; min-height: 62px; padding: 7px; border: 1px solid rgba(255,255,255,.76); border-radius: 20px; background: rgba(255,255,255,.90) !important; box-shadow: 0 16px 40px rgba(2,44,34,.22) !important; backdrop-filter: blur(18px); }
  .mobile-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: #71847c; border: 0; border-radius: 13px; background: transparent; }
  .mobile-bottom-nav button.active { color: var(--emerald-800); background: rgba(5,150,105,.10); }
  .mobile-bottom-nav svg { width: 20px; height:20px; fill: currentColor; }
  .mobile-bottom-nav span { font-size: .52rem; font-weight: 700; }
}

@media (max-width: 540px) {
  .topbar { min-height: 68px; padding: 9px 12px !important; }
  .topbar-kicker { font-size: .48rem; letter-spacing: .1em; }
  .topbar h1 { font-size: 1rem !important; }
  .user-profile { border:0; background:transparent; }
  .app-content { padding-top: 13px; }
  #mainApp .page-title { font-size: 1.12rem !important; }
}

/* Final conflict guards against legacy element selectors */
#mainApp .sidebar-nav {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  overflow: visible !important;
  border: 0 !important;
}
#mainApp .app-footer {
  color: #5d7169 !important;
  text-align: left !important;
  background: transparent !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: none !important;
}

#mainApp .sync-status::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
#mainApp .sync-status > i { display: none; }

@media print {
  #mainApp .app-sidebar,
  #mainApp .topbar,
  #mainApp .mobile-bottom-nav,
  #mainApp .app-footer,
  #mainApp .sidebar-overlay,
  #mainApp .app-backdrop { display: none !important; }
  #mainApp .app-main-shell { margin-left: 0 !important; padding: 0 !important; }
  #mainApp .app-content { width: 100% !important; max-width: none !important; padding: 0 !important; }
  #mainApp #inputPage,
  #mainApp #riwayatPage,
  #mainApp #laporanPage,
  #mainApp #presensiPage,
  #mainApp .info-card,
  #mainApp .glass-panel { box-shadow: none !important; backdrop-filter: none !important; }
}