/* Halaman ini pakai style.css untuk variabel warna, tombol, badge, panel EA.
   File ini hanya berisi bagian yang KHUSUS dipakai di client-portal.html:
   layar login, tombol Google, dan jendela pilih akun. */

body{ min-height:100vh; }
/* Disamakan dengan halaman lain (1880px, lihat catatan di css/style.css) --
   dulu 1780px, beda sendiri dari index.html/produk.html (1880), jadi margin
   kiri/kanan terlihat berubah tiap pindah halaman. Dipakai client-portal.html
   & daftar-akun.html (dua-duanya nge-load file ini). */
.brand{ max-width:1880px; margin:0 auto; }
.wrap{ max-width:1880px; }

/* ---------- Layar login ---------- */
.login-screen{ display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 68px); padding:40px 24px; }
.login-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; padding:44px 36px; max-width:380px; width:100%; text-align:center; }
.login-card h1{ font-family:'Fraunces', serif; font-size:22px; margin:0 0 10px; }
.login-card p{ color:var(--sage); font-size:14px; margin:0 0 30px; line-height:1.6; }

.google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; background:#FFFFFF; color:#1F1F1F; border:1px solid #DADCE0; border-radius:8px;
  padding:11px 16px; font-size:14.5px; font-weight:500; cursor:pointer; font-family:'IBM Plex Sans', sans-serif;
  transition: box-shadow .15s ease;
}
.google-btn:hover{ box-shadow: 0 1px 6px rgba(0,0,0,0.35); }
.google-btn svg{ width:18px; height:18px; }

.demo-note{ margin-top:20px; font-size:12px; color:var(--sage); line-height:1.6; }
.demo-note code{ background:var(--bg); border:1px solid var(--line); padding:1px 5px; border-radius:4px; font-family:'IBM Plex Mono', monospace; }

/* ---------- Pemisah "atau" antara login Google & login password ---------- */
.divider{ display:flex; align-items:center; gap:10px; margin:22px 0; color:var(--sage); font-size:12px; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---------- Link kecil ala "Lupa password?" / "Kembali ke login" ---------- */
.link-like{ color:var(--gold-bright); cursor:pointer; font-weight:600; }
.link-like:hover{ text-decoration:underline; }

/* ---------- Jendela pilih akun Google (tiruan visual untuk mode demo) ---------- */
.gpicker-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:200; }
.gpicker-overlay.show{ display:flex; }
.gpicker{ background:#fff; color:#1F1F1F; border-radius:12px; width:100%; max-width:400px; overflow:hidden; box-shadow:0 8px 30px rgba(0,0,0,0.4); }
.gpicker-head{ padding:24px 24px 16px; text-align:center; }
.gpicker-head img{ width:40px; }
.gpicker-head h3{ font-size:16px; font-weight:400; margin:14px 0 4px; }
.gpicker-head p{ font-size:13px; color:#5f6368; margin:0; }
.gpicker-list{ padding:8px 0; }
.gpicker-item{ display:flex; align-items:center; gap:14px; padding:12px 24px; cursor:pointer; }
.gpicker-item:hover{ background:#f1f3f4; }
.gpicker-avatar{ width:36px; height:36px; border-radius:50%; background:#E8776A; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; flex-shrink:0; }
.gpicker-item .name{ font-size:14px; color:#1F1F1F; }
.gpicker-item .email{ font-size:12.5px; color:#5f6368; }
.gpicker-other{ padding:14px 24px; border-top:1px solid #eee; font-size:14px; color:#1a73e8; cursor:pointer; }
.gpicker-input-row{ padding:16px 24px 22px; }
.gpicker-input-row input{ width:100%; padding:10px 12px; border:1px solid #DADCE0; border-radius:6px; font-size:14px; }
.gpicker-input-row button{ margin-top:12px; width:100%; background:#1a73e8; color:#fff; border:none; padding:10px; border-radius:6px; font-size:14px; cursor:pointer; }

/* ---------- Portal setelah login ---------- */
.portal{ display:none; padding:36px 0 60px; }
.portal.show{ display:block; }
.user-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.user-id{ display:flex; align-items:center; gap:12px; }
.user-avatar{ width:38px; height:38px; border-radius:50%; background:var(--gold); color:#14210F; display:flex; align-items:center; justify-content:center; font-weight:600; }
.user-id .name{ font-size:14.5px; font-weight:600; }
.user-id .email{ font-size:12.5px; color:var(--sage); }
.logout-link{ font-size:13px; color:var(--sage); cursor:pointer; }
.logout-link:hover{ color:var(--wheat); }

.license-banner{ border:1px solid var(--line); border-radius:8px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.license-banner.aktif{ background:rgba(111,207,151,0.08); border-color:rgba(111,207,151,0.3); }
.license-banner.expired{ background:rgba(232,119,106,0.08); border-color:rgba(232,119,106,0.3); }
.license-banner .l1{ font-size:13.5px; }
.license-banner .l2{ font-size:12px; color:var(--sage); margin-top:3px; font-family:'IBM Plex Mono', monospace; }

.not-found{ text-align:center; padding:60px 20px; color:var(--sage); }
.not-found h2{ font-family:'Fraunces', serif; color:var(--wheat); font-size:20px; margin-bottom:10px; }

/* ---------- Banner "Website sedang perbaikan" ---------- */
.portal-maint{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--amber); border-radius:10px;
  background:rgba(201,162,39,0.09);
  padding:14px 18px; margin-bottom:24px;
  font-size:13px; line-height:1.55; color:var(--wheat);
}
/* WAJIB: "display:flex" di atas menimpa aturan bawaan atribut [hidden], jadi
   tanpa baris ini el.hidden=true tidak menyembunyikan banner. */
.portal-maint[hidden]{ display:none !important; }
.portal-maint-ico{ font-size:16px; line-height:1.4; flex-shrink:0; }

/* ---------- Layout sidebar kiri + konten kanan ---------- */
.portal-layout{ display:flex; gap:32px; align-items:flex-start; }
.portal-sidebar-wrap{ width:228px; flex-shrink:0; position:relative; }
.portal-sidebar{ display:flex; flex-direction:column; gap:8px; }
.portal-sidebar-toggle{ display:none; }

/* Tiap menu = kotak dengan ikon di kiri — kesan mewah & konsisten. */
.portal-sidebar-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(32,30,26,0.55) 0%, rgba(17,17,20,0.55) 100%);
  color:var(--sage); font-size:13.5px; font-weight:500; cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.portal-sidebar-item .psi-ico{
  width:34px; height:34px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid var(--line);
  background:rgba(232,196,104,0.06); color:var(--gold-bright);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.portal-sidebar-item .psi-ico svg{ width:17px; height:17px; }
.portal-sidebar-item .psi-label{ min-width:0; }
.portal-sidebar-item:hover{
  border-color:rgba(232,196,104,0.4); color:var(--wheat); transform:translateX(2px);
}
.portal-sidebar-item.active{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(201,162,39,0.16) 0%, rgba(201,162,39,0.05) 100%);
  color:var(--wheat); font-weight:600;
}
.portal-sidebar-item.active .psi-ico{
  background:var(--gold); border-color:var(--gold); color:#14210F;
}
.portal-content{ flex:1; min-width:0; }
@media (max-width:720px){
  .portal-layout{ flex-direction:column; }
  .portal-sidebar-wrap{ width:100%; }
  /* Ganti baris pil yang digeser jadi tombol hamburger + dropdown vertikal
     rata kiri -- lebih rapi daripada baris pil yang setengah kepotong di
     tepi layar. */
  .portal-sidebar-toggle{
    display:inline-flex; align-items:center; gap:9px; width:100%;
    padding:11px 14px; border-radius:12px; border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(32,30,26,0.55) 0%, rgba(17,17,20,0.55) 100%);
    color:var(--wheat); font-size:13.5px; font-weight:600; cursor:pointer;
    font-family:'IBM Plex Sans', sans-serif;
  }
  .portal-sidebar-toggle svg{ width:18px; height:18px; flex-shrink:0; color:var(--gold-bright); }
  .portal-sidebar-toggle:hover{ border-color:rgba(232,196,104,0.4); }
  .portal-sidebar{
    display:none;
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
    background:var(--bg-panel,#151417); border:1px solid var(--line); border-radius:12px;
    padding:8px; gap:4px;
    box-shadow:0 18px 40px -12px rgba(0,0,0,0.6);
  }
  .portal-sidebar-wrap.open .portal-sidebar{ display:flex; }
  .portal-sidebar-item:hover{ transform:none; }
}

/* ---------- Kartu info Akun ---------- */
.akun-info{ background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.akun-info-row{ display:flex; justify-content:space-between; padding:14px 20px; border-bottom:1px dashed var(--line); font-size:14px; }
.akun-info-row:last-child{ border-bottom:none; }
.akun-info-row .label{ color:var(--sage); }
.akun-info-row .value{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Kartu pilihan EA (kalau client punya lebih dari satu lisensi EA) ---------- */
.menu-kategori{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
.menu-kategori-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:10px;
  padding:24px 22px; cursor:pointer; transition:border-color .15s ease;
}
.menu-kategori-card:hover{ border-color:var(--sage); }
.menu-kategori-card h3{ font-family:'Fraunces', serif; font-size:16.5px; margin:0 0 6px; }
.menu-kategori-card p{ color:var(--sage); font-size:13px; margin:0; font-family:'IBM Plex Mono', monospace; }
.badge-jumlah{
  display:inline-block; margin-top:12px; font-size:11px; font-weight:600; color:#14210F;
  background:var(--gold-bright); padding:3px 10px; border-radius:999px;
}
.badge-kosong{
  display:inline-block; margin-top:12px; font-size:11px; font-weight:600; color:var(--sage);
  background:rgba(143,163,150,0.15); padding:3px 10px; border-radius:999px;
}

/* ---------- Live Chat ke Admin (menu sidebar sendiri, lihat renderLiveChatPortal di client-portal.js) ---------- */
.live-chat-portal{
  display:flex; flex-direction:column; height:520px; max-height:calc(100vh - 220px);
  background:var(--bg-panel); border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
.live-chat-head{ padding:20px 22px; border-bottom:1px solid var(--line); }
.live-chat-head h2{ font-family:'Fraunces', serif; font-size:18px; margin:0 0 6px; }
.live-chat-head p{ color:var(--sage); font-size:13px; margin:0; }
.live-chat-body{ flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column; gap:10px; }
.chat-kosong{ color:var(--sage); font-size:12.5px; text-align:center; margin-top:20px; line-height:1.6; }
.chat-bubble-msg{ max-width:75%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.5; }
.chat-bubble-msg .chat-waktu{ font-size:10px; color:var(--sage); margin-top:4px; }
.chat-bubble-msg.dari-client{ align-self:flex-end; background:var(--gold); color:#14210F; border-bottom-right-radius:2px; }
.chat-bubble-msg.dari-client .chat-waktu{ color:rgba(20,33,15,0.6); text-align:right; }
.chat-bubble-msg.dari-admin{ align-self:flex-start; background:var(--bg-panel-2); border:1px solid var(--line); border-bottom-left-radius:2px; }
.chat-bubble-msg.dari-ai{ align-self:flex-start; background:rgba(111,207,151,0.1); border:1px solid rgba(111,207,151,0.35); border-bottom-left-radius:2px; }
.chat-bubble-msg .label-ai{ font-size:10.5px; font-weight:700; color:var(--green); margin-bottom:3px; }
.live-chat-foot{ display:flex; gap:10px; padding:16px 22px; border-top:1px solid var(--line); }
.live-chat-foot input{
  flex:1; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 14px;
  color:var(--wheat); font-size:14px;
}
@media (max-width:480px){
  .live-chat-portal{ height:460px; }
  .chat-bubble-msg{ max-width:88%; }
}