/* ===============================
   Canvas Global Sidebar (Improved)
   =============================== */

:root {
  --brand-primary: #C23B3B;
  --brand-primary-dark: #A83232;
  --brand-secondary: #1988C4;
  --brand-tertiary: #118F64;
  --brand-primary-35: rgba(194, 59, 59, 0.35);
  --brand-primary-25: rgba(194, 59, 59, 0.25);
  --brand-tertiary-85: rgba(17, 143, 100, 0.85);
  --brand-tertiary-45: rgba(17, 143, 100, 0.45);
  --brand-tertiary-28: rgba(17, 143, 100, 0.28);
  --brand-tertiary-18: rgba(17, 143, 100, 0.18);
  --brand-tertiary-14: rgba(17, 143, 100, 0.14);
  --brand-tertiary-12: rgba(17, 143, 100, 0.12);
  --brand-tertiary-08: rgba(17, 143, 100, 0.08);
  --brand-tertiary-25: rgba(17, 143, 100, 0.25);
  --brand-tertiary-35: rgba(17, 143, 100, 0.35);
  --brand-tertiary-05: rgba(17, 143, 100, 0.05);
  --text-dark: #273540;
  --border-light: #E5E7EB;
  --bg-light-hover: #F9FAFB;
}
/* Sidebar expanded */
body.primary-nav-expanded .ic-app-header {
  width: 96px; /* lebih lega & clean */
  height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;

  /* visual enhancement */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Hide scrollbar but keep scroll */
body.primary-nav-expanded .ic-app-header::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Menu item spacing */
body.primary-nav-expanded 
.ic-app-header__menu-list-link {
  padding: 8px 10px;
  margin: 4px 6px;
  border-radius: 12px;
  font-weight: 500;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Icon & text slightly bolder */
.ic-app-header__menu-list-link i,
.ic-app-header__menu-list-link svg,
.ic-app-header__menu-list-link span {
  font-weight: 600;
}

/* Hover state */
.ic-app-header__menu-list-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Active state */
.ic-app-header__menu-list-item.ic-app-header__menu-list-item--active 
.ic-app-header__menu-list-link {
  background: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 10px var(--brand-primary-25);
}

/* ===============================
   Canvas Dashboard Card (Clean UI)
   =============================== */
.ic-DashboardCard {
  box-sizing: border-box;
  background: #ffffff;
  width: 262px;
  display: inline-block;
  vertical-align: top;

  margin: 32px 0 0 32px;
  overflow: hidden;

  /* organic / leaf shape */
  border-radius: 28px 18px 30px 16px;

  /* shadow tebal & merata */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 8px 22px rgba(0, 0, 0, 0.18),
    0 16px 44px rgba(0, 0, 0, 0.14);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-radius 0.3s ease;
}

/* Hover – card “mekar” seperti daun */
.ic-DashboardCard:hover {
  transform: translateY(-6px) rotate(-0.4deg);
  border-radius: 32px 22px 34px 20px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 14px 32px rgba(0, 0, 0, 0.24),
    0 26px 56px rgba(0, 0, 0, 0.18);
}

/* ===============================
   Canvas 3D Button (Safe Global)
   =============================== */

#expand_collapse_all.btn {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f1f3f5);
  color: var(--text-dark);

  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);

  padding: 8px 14px;
  font-weight: 600;

  /* 3D depth */
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.18),   /* bottom edge */
    0 6px 14px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Hover – button naik */
#expand_collapse_all.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

/* Active / Click – ketekan */
#expand_collapse_all.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Focus (keyboard accessibility tetap OK) */
#expand_collapse_all.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--brand-primary-35),
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.18);
}

/* ===============================
   Canvas 3D Buttons – Global
   =============================== */

.btn,
a.btn {
  position: relative;
  background: linear-gradient(180deg, #ffffff, #f1f3f5);
  color: var(--text-dark);

  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);

  padding: 8px 14px;
  font-weight: 600;

  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Hover */
.btn:hover,
a.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

/* Active (pressed) */
.btn:active,
a.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.25);
}

/* Focus accessibility */
.btn:focus-visible,
a.btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px var(--brand-primary-35),
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.18);
}

/* =====================================
   Course Navigation – Enhanced UX
   Soft Surface + Accent Indicator
   ===================================== */

/* Base nav item */
#section-tabs .section > a {
  position: relative;
  display: block;

  padding: 11px 16px 11px 22px;
  margin: 6px 10px;

  border-radius: 14px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;

  color: var(--text-dark);
  text-decoration: none;

   font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Inter,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;

  letter-spacing: 0.2px;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  background: rgba(255, 255, 255, 0.55);

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}

/* Hover – calm & readable */
#section-tabs .section > a:hover {
  background-color: var(--brand-tertiary-14);
  padding-left: 26px;
}

/* Accent indicator (left bar) */
#section-tabs .section > a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;

  width: 4px;
  border-radius: 4px;

  background: linear-gradient(180deg, var(--brand-tertiary-85), var(--brand-tertiary-45));

  opacity: 0;
  transform: scaleY(0.6);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Hover indicator */
#section-tabs .section > a:hover::before {
  opacity: 0.6;
  transform: scaleY(1);
}

/* Active / current page */
#section-tabs .section > a.active,
#section-tabs .section > a[aria-current="page"] {
  background: linear-gradient(90deg, var(--brand-tertiary-28), var(--brand-tertiary-12));
  color: var(--text-dark);
}

/* Active indicator */
#section-tabs .section > a.active::before,
#section-tabs .section > a[aria-current="page"]::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Disabled / hidden */
#section-tabs .section-hidden > a {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}

#section-tabs .section-hidden > a::before {
  display: none;
}


/* =====================================
   Canvas Module Header – Enhanced
   Gradient + Leaf Shape (Right Side)
   ===================================== */

.ig-header.header {
  position: relative;
  padding: 14px 16px;
  margin: 16px 0;

  border-radius: 14px 28px 28px 14px;

  background: linear-gradient(90deg, var(--brand-tertiary-18), var(--brand-tertiary-08));

  transition:
    background 0.25s ease,
    border-radius 0.25s ease;
}

/* Leaf organic curve – right side only */
.ig-header.header::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -10px;
  bottom: 6px;

  width: 32px;

  background: radial-gradient(circle at left center, var(--brand-tertiary-35), var(--brand-tertiary-05));

  border-radius: 0 40px 40px 0;
  pointer-events: none;
}

/* Hover – sedikit “mekar” */
.ig-header.header:hover {
  background: linear-gradient(90deg, var(--brand-tertiary-28), var(--brand-tertiary-12));
}

/* Title text */
.ig-header-title .name {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Arrow icon – smoother */
.ig-header-title i {
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.ig-header-title:hover i {
  opacity: 1;
  transform: translateY(1px);
}

/* Admin actions spacing (right area clean) */
.module_header_items {
  align-items: center;
}

/* Prevent leaf from covering buttons */
.module_header_items,
.sortable-handle {
  position: relative;
  z-index: 1;
}

/* Remove leaf shape on module header */
.ig-header.header::after {
  display: none !important;
}


/* =====================================
   Canvas Module Items – Enhanced UX
   Spacious • Clean • Professional
   ===================================== */

/* List container – beri jarak antar item */
.context_module_items {
  padding-top: 8px;
}

/* Each module item */
.context_module_item {
  margin: 14px 0; /* jarak vertikal antar item */
}

/* Row surface */
.context_module_item .ig-row {
  display: flex;
  align-items: flex-start;

  padding: 14px 16px;
  border-radius: 14px;

  background: #ffffff;
  border: 1px solid var(--border-light);

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover – soft focus (no 3D) */
.context_module_item .ig-row:hover {
  background-color: var(--brand-tertiary-08);
  border-color: var(--brand-tertiary-25);
}

/* Drag handle – lebih subtle */
.context_module_item .ig-handle {
  margin-right: 10px;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.context_module_item:hover .ig-handle {
  opacity: 0.7;
}

/* Type icon spacing */
.context_module_item .type_icon {
  margin-right: 14px;
  opacity: 0.75;
}

/* Info block – breathing space */
.context_module_item .ig-info {
  padding-right: 12px;
}

/* Title */
.context_module_item .ig-title {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Details text – calmer */
.context_module_item .ig-details {
  margin-top: 6px;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Admin actions alignment */
.context_module_item .ig-admin {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Publish icon – less noisy */
.context_module_item .publish-icon {
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.context_module_item:hover .publish-icon {
  opacity: 1;
}

/* Action menu icon */
.context_module_item .al-trigger {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.context_module_item:hover .al-trigger {
  opacity: 1;
}

/* =====================================
   Breadcrumbs – Enhanced UI & UX
   Soft • Clear • Calm
   ===================================== */

.ic-app-crumbs {
  padding: 10px 16px 6px;
}

/* Breadcrumb container */
#breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 14px;

  background: rgba(0, 0, 0, 0.03);
}

/* Each crumb */
#breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
}

/* Links */
#breadcrumbs li a {
  display: inline-flex;
  align-items: center;

  padding: 6px 10px;
  border-radius: 999px;

  color: var(--text-dark);
  text-decoration: none;

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Hover */
#breadcrumbs li a:hover {
  background-color: var(--bg-light-hover);
}

/* Home icon tweak */
#breadcrumbs .home a {
  padding: 6px 8px;
}

#breadcrumbs .icon-home {
  font-size: 1rem;
  opacity: 0.75;
}

/* Separator (>) */
#breadcrumbs li:not(:last-child)::after {
  content: "";
  margin: 0 4px;
  opacity: 0.35;
}

/* Current page */
#breadcrumbs li[aria-current="page"] {
  padding: 6px 12px;
  border-radius: 999px;

  background-color: var(--brand-tertiary-18);
  color: var(--text-dark);
  font-weight: 600;
}

/* Disable link style for current */
#breadcrumbs li[aria-current="page"] a {
  pointer-events: none;
}

/* Ellipsis text behavior */
#breadcrumbs .ellipsible {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}