/* ============================================================
   GuruSmart AI — Stylesheet
   Palette: biru #2563eb, hijau #10b981, abu #f5f7fa
   ============================================================ */
:root {
  --gs-primary:#2563eb;
  --gs-primary-dark:#1d4ed8;
  --gs-success:#10b981;
  --gs-info:#0ea5e9;
  --gs-warning:#f59e0b;
  --gs-danger:#ef4444;
  --gs-bg:#f5f7fa;
  --gs-sidebar-bg:#1e293b;
  --gs-sidebar-text:#cbd5e1;
  --gs-sidebar-active:#2563eb;
  --gs-border:#e5e7eb;
  --gs-text:#1f2937;
  --gs-muted:#6b7280;
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--gs-bg);
  color: var(--gs-text);
  margin: 0;
  font-size: 14px;
}
a { color: var(--gs-primary); text-decoration: none; }
a:hover { color: var(--gs-primary-dark); }

/* ---------- Login ---------- */
.login-bg {
  min-height:100vh;
  background: linear-gradient(135deg,#dbeafe 0%,#d1fae5 100%);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
}
.login-wrap { width:100%; max-width:420px; }
.login-card {
  background:#fff; border-radius:16px; padding:36px 32px;
  box-shadow: 0 20px 50px rgba(2,32,71,0.12);
}
.login-brand { text-align:center; margin-bottom: 24px; }
.login-brand i { font-size:42px; color: var(--gs-primary); }
.login-brand h1 { margin:8px 0 4px; font-size:1.5rem; font-weight:700; }
.login-brand h1 span { color: var(--gs-success); }
.login-brand p { color: var(--gs-muted); margin:0; font-size:0.875rem; }

/* ---------- App shell ---------- */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width:262px; flex-shrink:0;
  background: linear-gradient(180deg,#0f172a 0%,#111c33 100%);
  color: #cbd5e1;
  display:flex; flex-direction:column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar-brand {
  padding: 16px 18px; font-size: 1.12rem; font-weight: 800; color:#fff;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; gap:10px;
}
.sidebar-brand .sb-logo { width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2563eb,#10b981); color:#fff; font-size:1.15rem; box-shadow:0 4px 12px rgba(37,99,235,.4); }
.sidebar-brand .sb-ai { color:#34d399; }
.sidebar-brand .sb-close { margin-left:auto; background:none;border:none;color:#94a3b8;font-size:1.1rem; }

.sidebar-search { padding:10px 14px; position:relative; }
.sidebar-search i { position:absolute; left:24px; top:50%; transform:translateY(-50%); color:#64748b; font-size:.85rem; }
.sidebar-search input { width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; color:#e2e8f0; padding:7px 10px 7px 30px; font-size:.82rem; }
.sidebar-search input:focus { outline:none; border-color:#2563eb; background:rgba(255,255,255,.09); }
.sidebar-search input::placeholder { color:#64748b; }

.sidebar-nav { flex:1; padding: 4px 8px 8px; overflow-y:auto; }
.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

.nav-group { margin-bottom:2px; }
.nav-group-head {
  width:100%; display:flex; align-items:center; gap:10px;
  background:none; border:none; color:#94a3b8;
  padding:9px 12px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  border-radius:8px; cursor:pointer;
}
.nav-group-head:hover { color:#e2e8f0; background:rgba(255,255,255,.04); }
.nav-group-head i:first-child { font-size:.95rem; width:18px; }
.nav-group-head .chev { font-size:.7rem; transition:transform .2s; }
.nav-group.open .chev { transform:rotate(180deg); }
.nav-group-body { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.nav-group.open .nav-group-body { max-height:900px; }

.sidebar-nav .nav-link {
  display:flex; align-items:center; gap:10px;
  color:#cbd5e1; padding:8px 12px 8px 16px; font-size:.84rem;
  border-radius:9px; margin:1px 0; transition:all .14s;
}
.sidebar-nav > .nav-link { margin:2px 0; font-weight:600; }
.sidebar-nav .nav-link i { width:18px; font-size:1rem; color:#94a3b8; }
.sidebar-nav .nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar-nav .nav-link:hover i { color:#cbd5e1; }
.sidebar-nav .nav-link.active {
  background:linear-gradient(90deg,rgba(37,99,235,.25),rgba(16,185,129,.12));
  color:#fff; box-shadow:inset 3px 0 0 #2563eb;
}
.sidebar-nav .nav-link.active i { color:#60a5fa; }
.sidebar-nav .nav-link.sb-locked { opacity:.62; }
.sidebar-nav .nav-link.sb-locked:hover { opacity:1; }
.sidebar-nav .nav-link .bi-lock-fill { font-size:.72rem; }

.sidebar-footer { border-top:1px solid rgba(255,255,255,.07); padding:8px 10px; }
.sb-user { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; text-decoration:none; }
.sb-user:hover { background:rgba(255,255,255,.06); }
.sb-ava { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#10b981);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0; }
.sb-user-meta { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.sb-user-name { color:#e2e8f0; font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-role { color:#64748b; font-size:.7rem; }

/* ---------- Main ---------- */
.app-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar {
  background:#fff; border-bottom:1px solid var(--gs-border);
  padding: 12px 24px;
  display:flex; align-items:center; gap:16px;
  position: sticky; top:0; z-index: 100;
}
.topbar-title { font-weight:600; font-size: 1.05rem; }
.topbar-user { margin-left:auto; }
.topbar-user a { color: var(--gs-text); display:flex; align-items:center; gap:8px; }
.topbar-user i { font-size: 1.4rem; color: var(--gs-primary); }

.content { padding: 20px 24px; flex:1; }
.breadcrumb { font-size: 0.85rem; margin:0; padding: 0; background: transparent; }
.app-footer { text-align:center; padding: 16px; color: var(--gs-muted); border-top: 1px solid var(--gs-border); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--gs-border); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.card-title { font-size: 1rem; font-weight: 600; }

/* ---------- Welcome banner ---------- */
.welcome-banner {
  background: linear-gradient(120deg, #2563eb, #10b981);
  color:#fff; padding: 20px 24px; border-radius: 12px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap:10px;
}
.welcome-banner h2 { color:#fff; }
.welcome-banner .text-muted { color: rgba(255,255,255,0.85) !important; }
.welcome-date { background: rgba(255,255,255,0.15); padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; }

/* ---------- Stat cards ---------- */
.stat-card {
  background:#fff; border:1px solid var(--gs-border); border-radius: 10px;
  padding: 16px; display:block;
  transition: transform .15s, box-shadow .15s;
  color: var(--gs-text);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); color: var(--gs-text); }
.stat-icon {
  width: 42px; height:42px; border-radius: 10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 1.3rem; margin-bottom: 8px;
}
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--gs-muted); font-size: 0.85rem; }

.bg-primary-soft { background: rgba(37,99,235,0.10); }
.bg-success-soft { background: rgba(16,185,129,0.12); }
.bg-info-soft    { background: rgba(14,165,233,0.12); }
.bg-warning-soft { background: rgba(245,158,11,0.14); }
.bg-secondary-soft { background: rgba(107,114,128,0.12); }

/* ---------- Shortcut tile ---------- */
.shortcut {
  display:flex; align-items:center; gap:10px;
  background: var(--gs-bg); border:1px solid var(--gs-border);
  border-radius: 8px; padding: 12px;
  color: var(--gs-text); font-weight: 500;
  transition: all .12s;
}
.shortcut:hover { background: #eef4ff; border-color: var(--gs-primary); color: var(--gs-primary); }
.shortcut i { color: var(--gs-primary); font-size: 1.1rem; }

/* ---------- Toolbar ---------- */
.page-toolbar { display:flex; align-items:center; gap:8px; flex-wrap: wrap; margin-bottom: 6px; }

/* ---------- Tables ---------- */
.table thead.table-light th { background: #f8fafc; color: var(--gs-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .03em; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table-hover tbody tr:hover { background: #f8fafc; }

/* ---------- Buttons ---------- */
.btn-primary { background-color: var(--gs-primary); border-color: var(--gs-primary); }
.btn-primary:hover { background-color: var(--gs-primary-dark); border-color: var(--gs-primary-dark); }
.btn-success { background-color: var(--gs-success); border-color: var(--gs-success); }

/* ---------- Forms ---------- */
.form-control:focus, .form-select:focus { border-color: var(--gs-primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,0.15); }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  /* Sidebar off-canvas di HP/tablet (Android/iOS) */
  .sidebar {
    position: fixed; top:0; left:-300px; width:284px; height:100vh; z-index:1050;
    transition: left .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.open { left: 0; }
  .app-main { width: 100%; }
  /* Backdrop gelap saat sidebar terbuka */
  .sidebar-overlay {
    position: fixed; inset:0; background:rgba(15,23,42,.5); z-index:1040;
    opacity:0; visibility:hidden; transition:opacity .2s;
  }
  .sidebar-overlay.show { opacity:1; visibility:visible; }
  .sidebar-brand .sb-close { display:inline-flex !important; }
}
@media (min-width: 992px) {
  .sidebar-overlay { display:none !important; }
}

/* ===== Banner Install PWA ===== */
.pwa-install{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:1100;
  display:none; align-items:center; gap:12px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
  padding:12px 14px; border-radius:16px; box-shadow:0 10px 30px rgba(37,99,235,.4);
  max-width:520px; margin:0 auto; animation:pwaUp .3s ease;
}
.pwa-install.show{display:flex}
@keyframes pwaUp{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
.pwa-install .pwa-ic{width:44px;height:44px;border-radius:12px;background:#fff;padding:3px;flex-shrink:0}
.pwa-install .pwa-tx{flex:1;line-height:1.25;font-size:.86rem}
.pwa-install .pwa-tx strong{display:block;font-size:.95rem}
.pwa-install .pwa-tx span{opacity:.9;font-size:.78rem}
.pwa-install .pwa-x{background:none;border:none;color:#fff;font-size:1.4rem;line-height:1;opacity:.85;padding:0 2px}
@media print{.pwa-install{display:none!important}}


/* ---------- SaaS UX polish: sidebar rapi + mobile friendly ---------- */
.sidebar-nav .nav-link span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-group-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width: 991.98px) {
  body.gs-sidebar-open{overflow:hidden;touch-action:none}
  .sidebar{width:min(88vw,320px);left:-340px}
  .sidebar-brand{padding:14px 16px}.sb-title{font-size:1rem}
  .sidebar-search{padding:10px 12px}.sidebar-search input{font-size:16px;padding-top:10px;padding-bottom:10px}
  .sidebar-nav .nav-link{padding:11px 14px;font-size:.92rem;min-height:44px}
  .nav-group-head{padding:11px 14px;font-size:.76rem;min-height:44px}
  .sidebar-footer{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .topbar{padding:10px 12px;gap:8px;min-height:58px}
  .topbar-title{font-size:.95rem;max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-user span{display:none}.tenant-bar{display:none!important}
  .content{padding:14px 12px}
  .card{border-radius:12px}.stat-card{padding:13px}
  .table-responsive{border-radius:10px;border:1px solid var(--gs-border)}
  .btn{min-height:38px}.btn-sm{min-height:34px}
  .form-control,.form-select{font-size:16px}
  .breadcrumb{display:none}
  .dropdown-menu{max-width:calc(100vw - 24px)}
}
@media (max-width: 575.98px){
  .content{padding:12px 10px}.welcome-banner{padding:14px}.welcome-banner h2{font-size:1.05rem}
  .stat-value{font-size:1.35rem}.page-toolbar{gap:6px}.page-toolbar .btn{width:100%}
  .rc-doc{font-size:10.5pt}.rc-doc th,.rc-doc td{padding:4px 5px}
}


/* PWA enhanced install banner */
.pwa-install{position:fixed;left:16px;right:16px;bottom:16px;z-index:2147483000;display:none;align-items:center;gap:12px;background:linear-gradient(135deg,#2563eb,#10b981);color:#fff;padding:12px 14px;border-radius:18px;box-shadow:0 22px 60px rgba(15,23,42,.28);max-width:560px;margin:0 auto;animation:pwaUp .25s ease}
.pwa-install.show{display:flex}.pwa-install .pwa-ic{width:48px;height:48px;border-radius:14px;background:#fff;padding:3px;flex-shrink:0}.pwa-install .pwa-tx{flex:1;line-height:1.25;font-size:.88rem}.pwa-install .pwa-tx strong{display:block;font-size:.98rem}.pwa-install .pwa-tx span{opacity:.93;font-size:.8rem}.pwa-install .pwa-x{background:none;border:none;color:#fff;font-size:1.4rem;line-height:1;opacity:.86;padding:0 2px}.pwa-install .btn{white-space:nowrap}
@media(max-width:420px){.pwa-install{left:10px;right:10px;bottom:10px;padding:10px}.pwa-install .pwa-ic{width:42px;height:42px}.pwa-install .btn{padding:.35rem .55rem;font-size:.8rem}.pwa-install .pwa-tx span{font-size:.74rem}}
@media print{.pwa-install{display:none!important}}

/* ===== Dashboard member/tenant cleanup ===== */
.gs-dash-hero{
  background:linear-gradient(135deg,#1d4ed8,#059669);
  color:#fff;border-radius:18px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 12px 30px rgba(37,99,235,.18)
}
.gs-dash-hero h2{font-size:1.45rem;color:#fff}.gs-dash-hero p{color:rgba(255,255,255,.88)}.gs-dash-hero-side{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.gs-dash-stat{background:#fff;border:1px solid var(--gs-border);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;color:var(--gs-text);height:100%;transition:.14s ease;min-height:86px}
.gs-dash-stat:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);color:var(--gs-text)}
.gs-dash-stat-icon{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}.gs-dash-stat-meta{display:flex;flex-direction:column;min-width:0}.gs-dash-stat-meta b{font-size:1.35rem;line-height:1}.gs-dash-stat-meta small{color:var(--gs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-quick-action{display:flex;align-items:center;gap:12px;background:#f8fafc;border:1px solid var(--gs-border);border-radius:14px;padding:14px;text-decoration:none;color:var(--gs-text);height:100%;transition:.14s}.gs-quick-action:hover{background:#eef4ff;border-color:#2563eb;color:#1d4ed8}.gs-quick-action span{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}.gs-quick-action b{font-size:.95rem}
.gs-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--gs-border);padding:9px 0}.gs-summary-row span{color:var(--gs-muted);font-size:.86rem}.gs-summary-row b{text-align:right;font-size:.9rem}
.gs-ring{--p:0;width:68px;height:68px;border-radius:50%;background:conic-gradient(#2563eb calc(var(--p)*1%),#e5e7eb 0);display:grid;place-items:center;flex-shrink:0}.gs-ring::before{content:"";position:absolute}.gs-ring span{background:#fff;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;font-weight:700;color:#1d4ed8;font-size:.95rem}.gs-onboard-card{background:linear-gradient(180deg,#fff,#f8fbff)}
@media(max-width:767.98px){.gs-dash-hero{border-radius:14px;padding:18px;align-items:flex-start;flex-direction:column}.gs-dash-hero h2{font-size:1.2rem}.gs-dash-hero-side{justify-content:flex-start}.gs-dash-stat{padding:12px;gap:9px;min-height:78px}.gs-dash-stat-icon{width:38px;height:38px;border-radius:12px;font-size:1.05rem}.gs-dash-stat-meta b{font-size:1.12rem}.gs-quick-action{padding:12px}.gs-quick-action span{width:38px;height:38px}.gs-summary-row{align-items:flex-start;flex-direction:column;gap:2px}.gs-summary-row b{text-align:left}}