/* =================================================================== */
/* SIMPLYFORMS - FINAL REVISION & VISUAL UPGRADE                       */
/* A stable layout with a premium glassmorphism dark theme             */
/* =================================================================== */

:root {
 --bg-main: #0d1117;
 /* Tambahkan gradient untuk efek lebih dinamis */
 --bg-gradient: radial-gradient(circle at top left, rgba(133, 85, 224, 0.1), transparent 40%),
  radial-gradient(circle at bottom right, rgba(133, 85, 224, 0.1), transparent 30%);

 /* Warna untuk efek kaca (glassmorphism) */
 --glass-bg: rgba(22, 27, 34, 0.6);
 --glass-border: rgba(255, 255, 255, 0.1);
 --glass-blur: 10px;

 --dropdown-bg: rgba(22, 27, 34, 0.95);

 --text-primary: #c9d1d9;
 --text-secondary: #8b949e;
 --accent-primary: #8555e0;
 --accent-primary-hover: #966ef1;
 --accent-text: #ffffff;
 --destructive: #f85149;
 --destructive-hover: #fa7972;

 --success-bg: rgba(46, 160, 67, 0.15);
 --success-border: rgba(46, 160, 67, 0.4);
 --success-text: #3fb950;
 --warning-bg: rgba(248, 181, 73, 0.1);
 --warning-border: rgba(248, 181, 73, 0.4);
 --warning-text: #f0b859;

 --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 --border-radius: 12px;
 --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
 --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

 --sidebar-width: 250px;
 --sidebar-collapsed-width: 82px;
 --header-height: 70px;
 --transition-speed: 0.25s ease-in-out;
 --sidebar-collapsed-width-mobile: 0px;
}

/* --- Global & Reset --- */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: var(--font-family);
 background-color: var(--bg-main);
 background-image: var(--bg-gradient);
 color: var(--text-primary);
 overflow: hidden;
}

/* --- Layout Utama Berbasis CSS Grid (Desktop) --- */
.dashboard-container {
 display: grid;
 height: 100vh;
 grid-template-columns: auto 1fr;
 grid-template-rows: var(--header-height) 1fr;
 grid-template-areas:
  "sidebar navbar"
  "sidebar main";
}

/* --- Penempatan Elemen dengan Efek Kaca --- */
.sidebar {
 grid-area: sidebar;
 width: var(--sidebar-width);
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border-right: 1px solid var(--glass-border);
 padding: 1rem;
 display: flex;
 flex-direction: column;
 z-index: 101;
 overflow-x: hidden;
 transition: width var(--transition-speed), transform var(--transition-speed);
}

.sidebar.collapsed {
 width: var(--sidebar-collapsed-width);
}

.navbar {
 grid-area: navbar;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 2.5rem;
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border-bottom: 1px solid var(--glass-border);
 z-index: 10;
}

.main-content {
 grid-area: main;
 padding: 2rem 2.5rem;
 overflow-y: auto;
}

/* --- Detail Sidebar --- */
.sidebar-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: calc(var(--header-height) - 2rem);
 padding: 0 0.5rem;
 margin-bottom: 1rem;
 flex-shrink: 0;
}

.sidebar.collapsed .sidebar-header {
 justify-content: center;
}

.navbar-logo {
 font-size: 1.25rem;
 font-weight: 600;
 white-space: nowrap;
 opacity: 1;
 transition: opacity 0.1s ease;
}

.sidebar.collapsed .navbar-logo {
 opacity: 0;
 display: none;
}

.toggleSidebar {
 background: none;
 border: none;
 color: var(--text-secondary);
 font-size: 1.5rem;
 cursor: pointer;
 padding: 0.5rem;
 border-radius: var(--border-radius);
 transition: background-color var(--transition-speed);
}

.toggleSidebar:hover {
 background-color: rgba(255, 255, 255, 0.1);
}

#toggleSidebar-mobile {
 display: none;
}

.sidebar ul {
 list-style: none;
}

.sidebar li {
 display: flex;
 align-items: center;
 margin: 0.5rem 0;
 padding: 0.75rem;
 cursor: pointer;
 border-radius: var(--border-radius);
 transition: background-color var(--transition-speed), color var(--transition-speed);
 position: relative;
 color: var(--text-secondary);
}

.sidebar li:not(.active):hover {
 background-color: rgba(255, 255, 255, 0.05);
 color: var(--text-primary);
}

.sidebar li.active {
 background-color: var(--accent-primary);
 color: var(--accent-text);
 font-weight: 600;
}

.icon {
 font-size: 1.25rem;
 width: 24px;
 text-align: center;
 margin-right: 1rem;
 flex-shrink: 0;
}

.label {
 white-space: nowrap;
 opacity: 1;
 transition: opacity 0.1s ease;
}

.sidebar.collapsed .label {
 opacity: 0;
 display: none;
}

/* --- Detail Navbar & Dropdown --- */
#navbar-title-text {
 font-size: 1.75rem;
 font-weight: 600;
}

.navbar-account {
 position: relative;
 cursor: pointer;
 display: flex;
 align-items: center;
 padding: 8px;
 border-radius: var(--border-radius);
 transition: background-color var(--transition-speed);
}

.navbar-account:hover {
 background-color: rgba(255, 255, 255, 0.1);
}

.navbar-account .username {
 margin-left: 8px;
 font-weight: 600;
 color: var(--text-secondary);
}

.account-dropdown {
 position: absolute;
 top: 130%;
 right: 0;
 width: 220px;
 background: var(--dropdown-bg);
 /* Menggunakan background baru */
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
 border-radius: var(--border-radius);
 box-shadow: var(--shadow-lg);
 /* Menggunakan bayangan baru */
 padding: 0.5rem;
 z-index: 101;
 opacity: 0;
 visibility: hidden;
 transform: translateY(10px);
 transition: all var(--transition-speed);
}

.navbar-account:hover .account-dropdown,
.account-dropdown.hover {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

.account-dropdown button {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 width: 100%;
 background: none;
 border: none;
 font-family: var(--font-family);
 font-size: 0.9rem;
 font-weight: 500;
 text-align: left;
 color: var(--text-primary);
 padding: 0.75rem;
 border-radius: 4px;
 cursor: pointer;
 transition: background-color var(--transition-speed);
}

.account-dropdown button:hover {
 background-color: var(--accent-primary);
}

/* --- Detail Konten --- */
.content-view.hidden {
 display: none;
}

.forms-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 gap: 1.5rem;
}

.form-card {
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
 border-radius: var(--border-radius);
 display: flex;
 flex-direction: column;
 transition: transform var(--transition-speed), border-color var(--transition-speed);
}

.form-card:hover {
 transform: translateY(-4px);
 border-color: var(--accent-primary);
}

.form-preview {
 position: relative;
 padding: 1.25rem;
 border-bottom: 1px solid var(--glass-border);
 flex-grow: 1;
}

.form-title {
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 0.5rem;
 padding-right: 110px;
}

.form-desc {
 font-size: 0.9rem;
 color: var(--text-secondary);
 line-height: 1.5;
}

/* --- BARU: Gaya untuk Status Published/Unpublished --- */
.published,
.unpublished {
 position: absolute; 
 top: 1.25rem;
 right: 1.25rem;
 display: inline-block;
 padding: 4px 12px;
 font-size: 0.8rem;
 font-weight: 600;
 border-radius: 20px;
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
}

.published {
 background: var(--success-bg);
 border: 1px solid var(--success-border);
 color: var(--success-text);
}

.unpublished {
 background: var(--warning-bg);
 border: 1px solid var(--warning-border);
 color: var(--warning-text);
}

.form-actions {
 display: flex;
 gap: 0.5rem;
 padding: 0.75rem 1.25rem;
 background-color: rgba(0, 0, 0, 0.2);
}

.form-actions button {
 padding: 8px 12px;
 border: 1px solid var(--glass-border);
 border-radius: 6px;
 color: var(--text-primary);
 background-color: rgba(255, 255, 255, 0.05);
 cursor: pointer;
 font-size: 0.85rem;
 font-weight: 600;
 transition: all var(--transition-speed);
 flex-grow: 1;
}

.form-actions button:hover {
 background-color: rgba(255, 255, 255, 0.1);
 border-color: var(--text-secondary);
}

.btn-primary {
 background-color: var(--accent-primary);
 border-color: var(--accent-primary);
 color: var(--accent-text);
}

.btn-primary:hover {
 background-color: var(--accent-primary-hover);
 border-color: var(--accent-primary-hover);
}

.btn-destructive {
 color: var(--destructive);
}

.btn-destructive:hover {
 background-color: rgba(248, 81, 73, 0.1);
 border-color: var(--destructive);
}

/* --- Copy Link Popup (BARU) --- */
.copy-popup {
 position: fixed;
 bottom: 30px;
 left: 50%;
 transform: translateX(-50%) translateY(20px);
 padding: 1rem 1.5rem;
 background: var(--glass-bg);
 backdrop-filter: blur(var(--glass-blur));
 -webkit-backdrop-filter: blur(var(--glass-blur));
 border: 1px solid var(--glass-border);
 border-radius: var(--border-radius);
 box-shadow: var(--shadow-md);
 color: var(--text-primary);
 font-weight: 500;
 z-index: 102;
 opacity: 0;
 visibility: hidden;
 transition: all var(--transition-speed);
}

.copy-popup.show {
 opacity: 1;
 visibility: visible;
 transform: translateX(-50%) translateY(0);
}

/* --- Responsive --- */
@media (max-width: 768px) {
 .dashboard-container {
  grid-template-columns: 1fr;
  grid-template-rows: var(--header-height) 1fr;
  grid-template-areas:
   "navbar"
   "main";
 }

 .sidebar {
  position: fixed;
  height: 100%;
  /* transform: translateX(-100%); */
 }

 .sidebar.collapsed {
  transform: translateX(-35px);
  width: var(--sidebar-collapsed-width-mobile);
 }

 #navbar-title-text {
  margin-top: -5px;
  margin-left: -42px;
 }

 #toggleSidebar {
  display: none;
 }

 #toggleSidebar-mobile {
  display: block;
 }

 .navbar {
  padding: 0 1.5rem;
  justify-content: space-between;
 }

 .navbar-title {
  order: 2;
 }

 #toggleSidebar-mobile {
  order: 1;
 }

 .navbar-account {
  order: 3;
 }

 .main-content {
  padding: 1.5rem;
 }

 .overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-speed);
 }

 .overlay.show {
  opacity: 1;
  pointer-events: auto;
 }
}