/* SISABU App — WordPress plugin edition */
.sisabu-phone{
  --deep:#1E2A44;
  --deep-2:#141C2E;
  --paper:#FFFFFF;
  --paper-2:#EEF0F3;
  --ink:#20242B;
  --ink-soft:#667085;
  --gold:#D9A62B;
  --slate:#3E6E96;
  --moss:#6B8F3E;
  --rust:#C15B3D;
  --wine:#8B4A63;
  --blue:#1F7A9E;
  --indigo:#5B4B8A;
  --teal:#2C8C82;
  --danger:#C0392B;
  --radius:18px;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  box-sizing:border-box;
  width:100%;
  max-width:410px;
  min-height:400px;
  /* No fixed/max height here on purpose: the card grows with its content
     and the page itself scrolls, like a normal website. This guarantees
     every document is reachable no matter how the active WordPress theme
     handles overflow/height on nested containers. */
  margin:24px auto;
  background:var(--paper);
  border-radius:34px;
  border:6px solid #E2E4E9;
  box-shadow:0 30px 60px -20px rgba(20,24,31,.35), 0 0 0 1px rgba(20,24,31,.03);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  font-family:var(--sans);
  color:var(--ink);
}
.sisabu-phone *{box-sizing:border-box;}
.sisabu-statusbar{
  height:30px;
  flex:0 0 auto;
  background:var(--paper);
  color:var(--ink-soft);
  border-bottom:1px solid var(--paper-2);
  font-family:var(--mono);
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  letter-spacing:.02em;
}
#sisabu-app{flex:1 1 auto;}
.sisabu-screen{
  display:none;
  flex-direction:column;
  animation:sisabu-fade .35s ease;
}
.sisabu-screen.sisabu-active{display:flex;}
@keyframes sisabu-fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* LOGIN */
#sisabu-screen-login{
  background:var(--paper);
  color:var(--ink);
  justify-content:center;
  min-height:480px;
  padding:36px 30px;
  gap:22px;
}
.sisabu-logo-mark{width:84px;height:84px; display:flex;align-items:center;justify-content:center; margin:0 auto;}
.sisabu-logo-mark img{width:100%;height:100%;object-fit:contain;}
.sisabu-brand-title{font-family:var(--serif); font-weight:700; font-size:26px; text-align:center; letter-spacing:.02em; margin:6px 0 0; color:var(--ink);}
.sisabu-brand-sub{text-align:center; font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.5;}
.sisabu-login-card{
  background:var(--paper);
  border:1px solid var(--paper-2);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:0 10px 30px -18px rgba(20,24,31,.25);
  text-align:center;
}
.sisabu-login-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0 0 16px;}
.sisabu-btn-primary{
  width:100%; padding:13px; border:none; border-radius:11px; background:var(--deep); color:#fff;
  font-family:var(--sans); font-weight:700; font-size:14.5px; cursor:pointer; letter-spacing:.01em;
  text-decoration:none; display:inline-block; box-sizing:border-box;
}
.sisabu-btn-primary:hover{filter:brightness(1.1); color:#fff;}
.sisabu-role-pill{
  display:inline-block; font-size:11px; font-family:var(--mono); padding:4px 11px; border-radius:20px;
  background:var(--paper-2); color:var(--ink-soft); margin-bottom:14px;
}

/* DASHBOARD */
.sisabu-dash-header{
  background:var(--paper); color:var(--ink); padding:18px 20px 22px;
  border-radius:0 0 22px 22px;
  border-bottom:1px solid var(--paper-2);
  flex:0 0 auto;
}
.sisabu-dash-header .sisabu-row{display:flex; justify-content:space-between; align-items:flex-start;}
.sisabu-dash-header h1{font-family:var(--serif); font-size:19px; margin:2px 0 2px; font-weight:700; color:var(--ink);}
.sisabu-dash-header p{margin:0; font-size:11.5px; color:var(--ink-soft);}
.sisabu-who{font-size:12px; color:var(--ink-soft);}
.sisabu-who b{color:var(--ink);}
.sisabu-logout-btn{
  background:transparent; border:1px solid var(--paper-2); color:var(--ink-soft);
  font-size:11.5px; padding:6px 11px; border-radius:20px; cursor:pointer; font-family:var(--sans);
}

.sisabu-cabinet{
  padding:22px 18px 30px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 14px;
}
.sisabu-folder{
  position:relative;
  cursor:pointer;
  border:none;
  background:none;
  padding:14px 0 0 0;
  font-family:var(--sans);
  text-align:left;
  animation:sisabu-rise .5s ease both;
}
.sisabu-folder:nth-child(1){animation-delay:.02s;}
.sisabu-folder:nth-child(2){animation-delay:.08s;}
.sisabu-folder:nth-child(3){animation-delay:.14s;}
.sisabu-folder:nth-child(4){animation-delay:.20s;}
.sisabu-folder:nth-child(5){animation-delay:.26s;}
.sisabu-folder:nth-child(6){animation-delay:.32s;}
.sisabu-folder:nth-child(7){animation-delay:.38s;}
.sisabu-folder:nth-child(8){animation-delay:.44s;}
@keyframes sisabu-rise{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.sisabu-folder .sisabu-tab{height:16px; width:62%; border-radius:8px 8px 0 0; margin-left:8px;}
.sisabu-folder .sisabu-body{
  height:100px; border-radius:6px 14px 14px 14px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:12px 12px 10px;
  box-shadow:0 8px 16px -8px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease;
  color:#fff;
}
.sisabu-folder:active .sisabu-body{transform:translateY(2px) scale(.985);}
.sisabu-folder .sisabu-icon{width:26px; height:26px;}
.sisabu-folder .sisabu-label{font-weight:700; font-size:13px; line-height:1.25;}
.sisabu-folder .sisabu-count{font-size:10.5px; opacity:.85; font-family:var(--mono);}

/* MENU DETAIL */
.sisabu-menu-header{
  padding:16px 18px 16px; flex:0 0 auto; color:#fff;
  border-radius:0 0 20px 20px;
  display:flex; align-items:center; gap:12px;
}
.sisabu-back-btn{
  background:rgba(255,255,255,.18); border:none; color:#fff; width:32px;height:32px;border-radius:50%;
  cursor:pointer; font-size:16px; flex:0 0 auto; display:flex;align-items:center;justify-content:center;
}
.sisabu-menu-header-text{flex:1; min-width:0;}
.sisabu-menu-header h2{font-family:var(--serif); font-size:18px; margin:0; font-weight:700;}
.sisabu-menu-header p{margin:2px 0 0; font-size:11px; opacity:.85;}
.sisabu-add-btn{
  background:rgba(255,255,255,.18); border:none; color:#fff; width:34px; height:34px; border-radius:50%;
  cursor:pointer; font-size:20px; line-height:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.sisabu-add-btn:hover{background:rgba(255,255,255,.3);}

.sisabu-item-list{padding:16px 16px 24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.sisabu-item-card{
  background:#fff; border:1px solid var(--paper-2); border-radius:13px;
  padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer;
  transition:.15s;
}
.sisabu-item-card:hover{border-color:var(--gold);}
.sisabu-item-card .sisabu-file-ico{
  width:34px;height:34px; border-radius:9px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;
}
.sisabu-item-card .sisabu-meta{flex:1; min-width:0;}
.sisabu-item-card .sisabu-meta .sisabu-t{font-weight:700; font-size:13.5px; margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sisabu-item-card .sisabu-meta .sisabu-badge{font-size:10px; color:var(--ink-soft); font-family:var(--mono);}
.sisabu-admin-actions{display:flex; gap:6px;}
.sisabu-icon-btn{
  background:var(--paper); border:1px solid var(--paper-2); border-radius:8px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:var(--ink-soft);
}
.sisabu-icon-btn.sisabu-danger{color:var(--danger);}
.sisabu-empty-state{text-align:center; color:var(--ink-soft); font-size:13px; padding:40px 20px; line-height:1.6;}

/* MODAL */
#sisabu-modal-overlay{
  position:fixed; inset:0; background:rgba(20,24,31,.5); display:none;
  align-items:flex-end; justify-content:center; z-index:99999;
}
#sisabu-modal-overlay.sisabu-active{display:flex;}
.sisabu-modal-sheet{
  background:var(--paper); width:100%; max-width:410px; border-radius:22px 22px 0 0; padding:20px 20px 24px;
  max-height:82vh; overflow-y:auto; animation:sisabu-slideup .25s ease;
}
@keyframes sisabu-slideup{from{transform:translateY(30px); opacity:0;} to{transform:none; opacity:1;}}
.sisabu-modal-sheet h3{font-family:var(--serif); margin:2px 0 4px; font-size:18px;}
.sisabu-modal-sheet .sisabu-badge-row{margin-bottom:14px;}
.sisabu-pill{
  display:inline-block; font-size:10.5px; font-family:var(--mono); padding:3px 9px; border-radius:20px;
  background:var(--paper-2); color:var(--ink-soft);
}
.sisabu-modal-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px;}
.sisabu-modal-actions{display:flex; gap:10px; margin-top:6px;}
.sisabu-btn-outline{
  flex:1; padding:11px; border-radius:11px; border:1px solid var(--deep); background:transparent; color:var(--deep);
  font-weight:700; font-size:13px; cursor:pointer;
}
.sisabu-btn-solid{
  flex:1; padding:11px; border-radius:11px; border:none; background:var(--deep); color:#fff;
  font-weight:700; font-size:13px; cursor:pointer;
}
.sisabu-close-x{float:right; background:none; border:none; font-size:18px; color:var(--ink-soft); cursor:pointer;}

.sisabu-field{margin-bottom:14px; text-align:left;}
.sisabu-field label{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:6px; letter-spacing:.02em;}
.sisabu-field input, .sisabu-field select, .sisabu-field textarea{
  width:100%; padding:11px 13px; border-radius:11px; border:1px solid #E2E4E9;
  background:rgba(255,255,255,.94); color:var(--ink); font-family:var(--sans); font-size:14.5px;
  outline:none;
}
.sisabu-field input:focus, .sisabu-field select:focus, .sisabu-field textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px;
}
.sisabu-error-msg{color:var(--danger); font-size:12.5px; text-align:center; margin:8px 0 0;}

@media (prefers-reduced-motion: reduce){
  .sisabu-phone *{animation:none !important; transition:none !important;}
}