/* Pola halaman terstruktur, terinspirasi dari keluarga halaman Kontrak MUB. */
body {
  background: color-mix(in srgb, var(--alterna-tertiary) 38%, #f4f7fb);
  color: var(--alterna-secondary);
}
.app-main { min-width: 0; }
.app-content { container-type: inline-size; }
.content-form { display: grid; gap: 18px; }
.content-card {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
}
.content-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--alterna-tertiary) 28%, #fff), #fff);
}
.content-card__header h2 { margin: 0 0 2px; color: var(--alterna-secondary); font-size: 17px; font-weight: 800; }
.content-card__header p { margin: 0; color: var(--app-muted); font-size: 12px; }
.content-card__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--alterna-primary-soft);
  color: var(--alterna-primary);
  font-size: 18px;
}
.content-card__body { padding: 20px; }
.form-actions { position: sticky; bottom: 12px; z-index: 12; display: flex; justify-content: flex-end; padding: 12px; border: 1px solid rgba(229,231,235,.85); border-radius: 14px; background: rgba(255,255,255,.88); box-shadow: 0 10px 30px rgba(15,23,42,.1); backdrop-filter: blur(12px); }

.asset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.asset-field { min-width: 0; padding: 16px; border: 1px solid var(--app-border); border-radius: 13px; background: #fbfcfe; }
.asset-field__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin-bottom: 12px; }
.asset-field__heading > div { display: flex; min-width: 0; flex-direction: column; }
.asset-field__heading strong { font-size: 14px; }
.asset-field__heading small { color: var(--app-muted); font-size: 11px; }
.asset-preview { width: 48px; height: 48px; padding: 4px; border: 1px solid var(--app-border); border-radius: 12px; background: #fff; object-fit: contain; }
.asset-preview--wide { width: 78px; }
.asset-preview--favicon { width: 40px; height: 40px; }

.color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.color-field { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--app-border); border-radius: 13px; background: #fbfcfe; cursor: pointer; transition: transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.color-field:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--alterna-primary) 28%,var(--app-border)); box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.color-field__swatch { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 1px solid var(--app-border); border-radius: 14px; }
.color-field__swatch input { position: absolute; inset: -8px; width: 74px; height: 74px; padding: 0; border: 0; cursor: pointer; }
.color-field__swatch i { position: relative; z-index: 1; color: #fff; font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); pointer-events: none; }
.color-field > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.color-field strong { font-size: 14px; }
.color-field small { color: var(--app-muted); font-size: 11px; }
.color-field code { width: fit-content; margin-top: 5px; color: var(--alterna-primary); font-size: 12px; }

.sidebar-user__logo { width: 42px; height: 42px; padding: 3px; border: 1px solid color-mix(in srgb,var(--alterna-primary) 18%,#e5e7eb); border-radius: 13px; background: #fff; object-fit: contain; }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; top: 50%; left: 14px; z-index: 2; color: #94a3b8; transform: translateY(-50%); }
.input-icon .form-control { padding-left: 42px; }

/* Toolbar daftar seperti pola daftar kontrak. */
.app-content > .d-flex.flex-column {
  align-items: center;
  padding: 14px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  box-shadow: 0 5px 20px rgba(15,23,42,.05);
}
.app-content > .d-flex.flex-column form.d-flex { flex: 1; min-width: 0; }
.table-responsive { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { min-width: 720px; }
.table-card { overflow: hidden; }

/* Tombol tambah mengambang. */
.floating-add {
  position: fixed !important;
  right: max(26px,env(safe-area-inset-right));
  bottom: max(26px,env(safe-area-inset-bottom));
  z-index: 1025;
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg,var(--alterna-primary),var(--alterna-primary-dark)) !important;
  color: #fff !important;
  font-size: 23px !important;
  box-shadow: 0 12px 28px color-mix(in srgb,var(--alterna-primary) 36%,transparent) !important;
  transition: transform .16s ease,box-shadow .16s ease !important;
}
.floating-add:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 34px color-mix(in srgb,var(--alterna-primary) 42%,transparent) !important; }
.floating-add:focus-visible { outline: 3px solid color-mix(in srgb,var(--alterna-primary) 28%,transparent); outline-offset: 4px; }

@media (max-width: 1199.98px) {
  :root { --app-sidebar: 250px; }
  .app-content { padding-inline: 22px; }
  .color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
  :root { --app-sidebar: 280px; }
  .app-content > .d-flex.flex-column { align-items: stretch; }
  .app-content > .d-flex.flex-column form.d-flex { width: 100%; }
  .asset-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .app-content { padding: 16px 12px 88px; }
  .page-heading { margin-bottom: 14px; }
  .page-heading__eyebrow { font-size: 10px; }
  .page-heading h1 { font-size: 22px; }
  .content-card__header { align-items: flex-start; padding: 15px; }
  .content-card__body { padding: 15px; }
  .color-grid { grid-template-columns: 1fr; }
  .form-actions { bottom: 8px; justify-content: stretch; margin-inline: 0; }
  .form-actions .btn { width: 100%; }
  .app-content > .d-flex.flex-column form.d-flex { display: grid !important; grid-template-columns: 1fr !important; }
  .app-content > .d-flex.flex-column form.d-flex > * { width: 100% !important; }
  .app-content > .d-flex.flex-column { padding: 12px; }
  .card-body.p-4 { padding: 16px !important; }
  .floating-add { right: max(18px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); width: 56px; min-width: 56px; height: 56px; min-height: 56px; }
  .table-responsive > .table { min-width: 680px; }
}
@media (max-width: 479.98px) {
  .topbar-brand > span:last-child { display: none; }
  .app-topbar { height: 62px; }
  :root { --app-topbar: 62px; }
  .asset-field { padding: 13px; }
  .asset-field__heading { align-items: flex-start; }
  .login-page { padding: 14px; }
}