:root{
  --bg0:#070a13;
  --bg1:#0b1635;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --text:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --border:rgba(255,255,255,.12);
  --shadow: 0 24px 80px rgba(0,0,0,.35);
  --accent:#2f7dff;
  --accent2:#7c4dff;

  /* Bootstrap theme bridge (so Bootstrap components follow MyBoard theme) */
  --bs-body-color: var(--text);
  --bs-body-bg: transparent;
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-border-color: var(--border);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent2);
  --bs-tertiary-bg: rgba(255,255,255,.06);
  --bs-list-group-color: var(--text);
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-hover-bg: var(--card);
  --bs-list-group-disabled-color: var(--muted);
  --bs-list-group-disabled-bg: transparent;
  --bs-list-group-active-color: var(--text);
  --bs-list-group-active-bg: rgba(47,125,255,.18);
  --bs-list-group-active-border-color: rgba(47,125,255,.28);

}

html[data-theme="light"]{
  --bg0:#f5f8ff;
  --bg1:#dbe8ff;
  --card:rgba(255,255,255,.72);
  --card2:rgba(255,255,255,.82);
  --text:#0c1020;
  --muted:rgba(12,16,32,.65);
  --border:rgba(12,16,32,.12);
  --shadow: 0 24px 60px rgba(20,36,86,.15);
  --accent:#1d6bff;
  --accent2:#6a3dff;

  /* Bootstrap theme bridge (light) */
  --bs-body-color: var(--text);
  --bs-body-bg: transparent;
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-border-color: var(--border);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent2);
  --bs-tertiary-bg: rgba(12,16,32,.06);
  --bs-list-group-color: var(--text);
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-hover-bg: var(--card);
  --bs-list-group-disabled-color: var(--muted);
  --bs-list-group-disabled-bg: transparent;
  --bs-list-group-active-color: var(--text);
  --bs-list-group-active-bg: rgba(29,107,255,.12);
  --bs-list-group-active-border-color: rgba(29,107,255,.22);

}

*{box-sizing:border-box}
body{color:var(--text); background:radial-gradient(1200px 700px at 30% 20%, var(--bg1), var(--bg0)); min-height:100vh; overflow-x:hidden}
.text-muted-2{color:var(--muted)}
.bg-aurora{position:relative}
.aurora-layer{
  position:fixed; inset:-20%;
  background:
    radial-gradient(500px 300px at 20% 20%, rgba(47,125,255,.35), transparent 60%),
    radial-gradient(600px 340px at 80% 30%, rgba(124,77,255,.28), transparent 60%),
    radial-gradient(600px 340px at 70% 80%, rgba(0,255,213,.18), transparent 60%);
  filter: blur(26px);
  animation: drift 10s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes drift{
  0%{transform:translate3d(-2%, -1%,0) scale(1)}
  100%{transform:translate3d(2%, 1%,0) scale(1.05)}
}
.float-shapes{position:fixed; inset:0; z-index:0; pointer-events:none}
.shape{
  position:absolute; border-radius:999px; background:rgba(255,255,255,.08);
  filter: blur(2px);
  box-shadow: 0 0 60px rgba(47,125,255,.18);
  animation: floaty 7s ease-in-out infinite;
}
.shape.s1{width:240px;height:240px; left:-70px; top:80px; animation-duration:9s}
.shape.s2{width:180px;height:180px; right:-50px; top:120px; animation-duration:8s}
.shape.s3{width:260px;height:260px; right:12%; bottom:-90px; animation-duration:10s}
.shape.s4{width:140px;height:140px; left:18%; bottom:18%; animation-duration:7s}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

.auth-top{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px;
}
.topbar{
  position:sticky; top:0; z-index:3;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,.12);
  border-bottom: 1px solid var(--border);
}

.brand-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
  text-decoration:none; color:var(--text);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.brand-chip:hover{transform: translateY(-1px)}
.brand-icon{
  width:34px;height:34px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(47,125,255,.7), rgba(124,77,255,.55));
  border:1px solid rgba(255,255,255,.16);
}
.brand-logo{width:34px;height:34px;border-radius:12px; object-fit:cover; border:1px solid rgba(255,255,255,.16)}
.brand-name{font-weight:700; letter-spacing:.2px}

.icon-btn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  display:grid;place-items:center;
  box-shadow: var(--shadow);
  transition: transform .18s ease, background .18s ease;
}
.icon-btn:hover{transform: translateY(-2px) scale(1.03); background:var(--card2)}
.icon-btn:active{transform: scale(.96)}

.notif-dot{
  position:absolute; top:-6px; right:-6px;
  min-width:20px;height:20px;border-radius:999px;
  background:#ff3b5c; color:white;
  display:grid;place-items:center;
  font-size:12px; font-weight:800;
  border:2px solid rgba(0,0,0,.25);
}

.auth-wrap{position:relative; z-index:2; display:grid; place-items:center; padding:30px 16px;}
.glass-card{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.auth-card{width:min(520px, 92vw); padding:28px; animation: popin .35s ease}
@keyframes popin{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
.logo-badge{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(47,125,255,.85), rgba(124,77,255,.65));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 55px rgba(47,125,255,.22);
}

.hero{border-radius:26px}
.glass{background: linear-gradient(180deg, var(--card2), var(--card)); border:1px solid var(--border); box-shadow: var(--shadow); border-radius:26px}
.feature-card{
  border-radius:22px;
  transition: transform .18s ease, box-shadow .18s ease;
  position:relative; overflow:hidden;
  animation: floaty 6.5s ease-in-out infinite;
}
.feature-card:hover{transform: translateY(-4px) scale(1.02)}
.feature-card:active{transform: scale(.985)}
.feature-card::after{
  content:""; position:absolute; inset:-40%;
  background: radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
  transform: translateX(-40%);
  transition: transform .4s ease;
}
.feature-card:hover::after{transform: translateX(40%)}

.icon-badge{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn-soft{
  background: var(--card);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-soft:hover{background:var(--card2); color:var(--text)}

/* Neutral outline button that works in both themes */
.btn-ghost{
  background: transparent;
  border:1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover{background:var(--card); color:var(--text)}

/* Theme-safe tables */
.table-app{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-hover-color: var(--text);
}
html[data-theme="light"] .table-app{
  --bs-table-hover-bg: rgba(12,16,32,.04);
}
.table-app thead th{color:var(--text); border-bottom-color: var(--border)}

/* Inputs follow theme */
.form-control, .form-select{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control::placeholder{color: var(--muted)}
.form-control:focus, .form-select:focus{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border-color: rgba(47,125,255,.55);
  box-shadow: 0 0 0 .2rem rgba(47,125,255,.18);
  color: var(--text);
}

/* List group items (used on Quick Actions) */
.list-group-item{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.list-group-item-action:hover{
  background: var(--card);
  color: var(--text);
}

/* Ensure clickable list-group links remain readable in both themes */
.list-group-item-action{color: var(--text); opacity: 1;}
.list-group-item-action:focus{color: var(--text); opacity: 1;}

/*
  Dark mode hard-fix:
  Bootstrap's .list-group-item-action default color can be too dark on our glass background.
  Force high-contrast text for list-group links in dark theme.
*/
html[data-theme="dark"] .list-group,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .list-group-item-action{
  --bs-list-group-color: var(--text) !important;
  --bs-list-group-action-color: var(--text) !important;
  --bs-list-group-action-hover-color: var(--text) !important;
}
html[data-theme="dark"] a.list-group-item-action,
html[data-theme="dark"] a.list-group-item-action:visited,
html[data-theme="dark"] a.list-group-item-action:focus{
  color: rgba(234,240,255,.92) !important;
}
html[data-theme="dark"] a.list-group-item-action:hover{
  color: rgba(234,240,255,.98) !important;
  background: var(--card) !important;
}
html[data-theme="dark"] a.list-group-item-action i{
  color: inherit !important;
  opacity: 1 !important;
}
.link-soft{color:var(--text); opacity:.85; text-decoration:none}
.link-soft:hover{opacity:1; text-decoration:underline}

.table-darkish{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(255,255,255,.06);
}

.stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; min-width:min(520px, 100%)}
.stat{padding:14px 16px; border-radius:20px}
@media (max-width: 900px){
  .stats{grid-template-columns:1fr}
}

/* Ripple + "pop" effect */
.needs-ripple, .pop-btn{position:relative; overflow:hidden}
.ripple{
  position:absolute; border-radius:999px; transform: scale(0);
  animation: ripple .6s ease-out;
  background: rgba(255,255,255,.32);
  pointer-events:none;
}
@keyframes ripple{to{transform: scale(6); opacity:0}}


/* ===== MyBoard App Shell (Sidebar + Topbar) ===== */
.app-shell{display:flex;min-height:100vh;position:relative;gap:0}
.sidebar{width:280px;padding:18px 16px;position:sticky;top:0;height:100vh;overflow:auto}
.sidebar .sidebar-inner{width:100%}
.sidebar-brand .brand-logo{width:36px;height:36px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow);border:1px solid var(--border)}
.brand-logo-sm{width:28px;height:28px;border-radius:10px;object-fit:cover;border:1px solid var(--border)}
.brand-text .brand-name{font-weight:700;letter-spacing:.2px}
.brand-sub{color:var(--muted);font-size:.82rem;margin-top:-2px}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{margin:12px;border-radius:18px;padding:10px 12px;position:sticky;top:12px;z-index:20}
.content{padding:0 12px 12px;flex:1}
.footer{padding:10px 12px 18px;text-align:center}

.sidebar, .sidebar-offcanvas .offcanvas-body{background:linear-gradient(180deg,var(--card2),var(--card));border-right:1px solid var(--border);backdrop-filter: blur(10px)}
.sidebar-offcanvas .offcanvas-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--card2),var(--card))}
.sidebar-offcanvas .btn-close{filter: invert(1)}
html[data-theme="light"] .sidebar-offcanvas .btn-close{filter:none}

.nav-pills .nav-link{border-radius:14px;color:var(--muted);padding:.72rem .85rem;border:1px solid transparent}
.nav-pills .nav-link:hover{color:var(--text);background:rgba(255,255,255,.06);border-color:var(--border)}
html[data-theme="light"] .nav-pills .nav-link:hover{background:rgba(12,16,32,.06)}
.nav-pills .nav-link.active{color:var(--text);background:linear-gradient(90deg, rgba(47,125,255,.18), rgba(124,77,255,.18));border-color:var(--border)}

.nav-link-btn{width:100%;text-align:left;background:transparent}
.nav-sublink{margin-left:34px;padding:.55rem .85rem;font-size:.92rem}

.user-chip{padding:.45rem .75rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text)}
html[data-theme="light"] .user-chip{background:rgba(12,16,32,.06)}

.border-soft{border-color:var(--border)!important}

/* ===== Fix: Quick Actions putih saat Dark Mode (agar teks selalu terbaca) ===== */
html[data-theme="dark"] .qa-card{
  background:#ffffff !important;
  color:#111111 !important;
  border:1px solid rgba(0,0,0,.10) !important;
}
html[data-theme="dark"] .qa-card *{
  color:#111111 !important;
}
html[data-theme="dark"] .qa-card .text-muted,
html[data-theme="dark"] .qa-card .text-muted-2,
html[data-theme="dark"] .qa-card small{
  color:rgba(17,17,17,.78) !important;
}
html[data-theme="dark"] .qa-list{
  background:transparent !important;
}
html[data-theme="dark"] .qa-list .qa-item{
  background:transparent !important;
  border-color:rgba(0,0,0,.12) !important;
}
html[data-theme="dark"] .qa-list .qa-item:hover{
  background:rgba(0,0,0,.05) !important;
}

/* Boards */
.board-cover{
  height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  margin-bottom: 14px;
}
.board-cover-sm{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  margin-bottom: 10px;
}
.board-dot{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* =========================
   Kanban (Fase 4)
   ========================= */
.kanban-wrap{ overflow-x:auto; padding: .25rem; }
.kanban-lists{ display:flex; gap:14px; align-items:flex-start; min-height: 280px; }
.kanban-list{
  width: 310px;
  min-width: 310px;
  border: 1px solid var(--border);
  background: var(--glass);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.kanban-list-head{ display:flex; justify-content:space-between; align-items:center; padding: 12px 12px 10px; border-bottom:1px solid var(--border); }
.list-title{ font-weight: 700; font-size: .95rem; color: var(--text); line-height: 1.25; }
.list-handle{ color: var(--text-2); cursor: grab; padding: 4px 6px; border-radius: 10px; }
.list-handle:hover{ background: rgba(255,255,255,.06); }

.kanban-cards{ padding: 10px 10px 0; min-height: 18px; max-height: calc(100vh - 360px); overflow-y:auto; }
.kanban-card{
  position: relative;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  margin-bottom: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
}
.kanban-card:hover{ transform: translateY(-1px); }
.kanban-card-title{ font-size: .92rem; font-weight: 600; }
.kanban-card-archive{
  position:absolute;
  right:8px; top:8px;
  text-decoration:none;
  color: var(--text-2);
  opacity: 0;
  padding: 2px 6px;
  border-radius: 10px;
}
.kanban-card:hover .kanban-card-archive{ opacity: 1; }
.kanban-card-archive:hover{ background: rgba(255,255,255,.08); color: var(--text); }

.kanban-list-foot{ padding: 10px 12px 12px; }
.kanban-add-list{ background: rgba(255,255,255,.04); }
.kanban-add-list .form-control{ background: rgba(255,255,255,.06); }

.drag-ghost{ opacity: .35; }

@media (max-width: 575.98px){
  .kanban-list{ width: 280px; min-width: 280px; }
  .kanban-cards{ max-height: calc(100vh - 420px); }
}

/* ===== Fase 5: Card Detail Modal (Trello-like) ===== */
.card-modal{ background: var(--glass); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.card-modal .modal-header, .card-modal .modal-footer{ border-color: rgba(255,255,255,.12); }
.card-modal .icon-badge{ width:40px; height:40px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); }
.card-modal .accordion-item{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
.card-modal .accordion-button{ background: transparent; color: var(--text); }
.card-modal .accordion-button:not(.collapsed){ background: rgba(255,255,255,.06); }
.card-modal .accordion-button:focus{ box-shadow: none; }

.card-cover img{ max-height: 220px; object-fit: cover; width:100%; }

.checklist-box{ border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 12px; background: rgba(255,255,255,.04); }

.attach-row{ display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.attach-icon{ width:34px; height:34px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); }

.comment-row, .activity-row{ padding:10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.comment-head, .activity-head{ display:flex; gap:8px; align-items:center; }
.comment-body{ margin-top:6px; }

/* ===== Board View Tabs (Board/Calendar/Table) ===== */
.btn-viewtab{
  border: 1px solid rgba(0,0,0,.18);
  color: var(--text);
  background: transparent;
}
[data-theme="dark"] .btn-viewtab{
  border-color: rgba(255,255,255,.18);
}
.btn-viewtab:hover{
  color: var(--text);
  background: rgba(0,0,0,.05);
}
[data-theme="dark"] .btn-viewtab:hover{
  background: rgba(255,255,255,.08);
}
.btn-viewtab.active{
  font-weight: 700;
  background: rgba(0,0,0,.08);
}
[data-theme="dark"] .btn-viewtab.active{
  background: rgba(255,255,255,.14);
}

/* ===== Calendar View ===== */
.calendar-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}
.calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .75rem;
}
.calendar-dow{
  font-size: .85rem;
  color: var(--muted);
  padding: .25rem .5rem;
  text-align:center;
}
.calendar-day{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .6rem;
  min-height: 120px;
  overflow:hidden;
}
.calendar-day .day-num{
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
  opacity: .9;
}
.calendar-day.today{
  outline: 2px solid rgba(91,140,255,.35);
}
.cal-event{
  display:block;
  margin-top: .35rem;
  padding: .25rem .4rem;
  border-radius: 10px;
  text-decoration:none;
  color: var(--text);
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  font-size: .85rem;
}
[data-theme="dark"] .cal-event{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
.cal-dot{
  display:inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: .35rem;
  vertical-align: -1px;
}

.cal-dot-group{
  display:inline-flex;
  align-items:center;
  gap: .25rem;
  margin-right: .35rem;
}
.cal-type-dot{
  display:inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
}
[data-theme="dark"] .cal-type-dot{
  border-color: rgba(255,255,255,.18);
}
.cal-type-dot.start{ background: var(--cal-start, #28c76f); }
.cal-type-dot.due{ background: var(--cal-due, #ff5c7a); }

.calendar-legend{
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--muted);
  font-size: .85rem;
  flex-wrap: wrap;
}
.calendar-legend .legend-item{
  display:inline-flex;
  align-items:center;
  gap: .35rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .calendar-legend .legend-item{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

/* ===== Table View ===== */
.table-view-wrap{ overflow-x:auto; }
.table-view{ min-width: 900px; }
.badge-label{
  display:inline-block;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  margin-right: .25rem;
}
.member-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: rgba(0,0,0,.08);
  color: var(--text);
  margin-right: .25rem;
}
[data-theme="dark"] .member-pill{ background: rgba(255,255,255,.10); }