/* ==========================================================
   PANEL
   Candy UI Kit
========================================================== */

.panel {
  /* ----------------------------------
       Local Tokens
    ---------------------------------- */

  --panel-bg: #ffffff;
  --panel-border: #efe8de;
  --panel-shadow: #e4ddd3;
  --panel-accent: #d8d2c8;

  --panel-padding: 24px;

  width: 100%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: var(--panel-bg);

  border: 2px solid var(--panel-border);

  border-radius: var(--radius-lg);

  box-shadow: 0 6px 0 var(--panel-shadow);
}

/* ==========================================================
   ACCENT
========================================================== */

.panel__accent {
  width: 100%;

  height: 6px;

  flex-shrink: 0;

  background: var(--panel-accent);
}

/* ==========================================================
   HEADER
========================================================== */

.panel__header {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  padding: var(--panel-padding);
}

/* ==========================================================
   HEADER LEFT
========================================================== */

.panel__header-left {
  display: flex;

  align-items: flex-start;

  gap: 16px;

  min-width: 0;

  flex: 1;
}

/* ==========================================================
   ICON
========================================================== */

.panel__icon {
  width: 44px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: var(--radius-sm);

  background: var(--panel-accent);
}

/* ==========================================================
   ICON IMAGE
   Temporary until sprite-ui.svg is generated.
========================================================== */

.panel__icon .icon {
  width: 20px;

  height: 20px;

  display: block;

  flex-shrink: 0;

  object-fit: contain;

  filter: brightness(0) invert(1);
}

/* ==========================================================
   HEADER CONTENT
========================================================== */

.panel__title-group {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 6px;
}

.panel__title {
  margin: 0;

  color: var(--text);

  font-size: var(--font-size-xl);

  font-weight: 600;

  line-height: 1.2;
}

.panel__subtitle {
  margin: 0;

  color: var(--text-muted);

  font-size: var(--font-size-sm);

  line-height: 1.45;
}

/* ==========================================================
   HEADER RIGHT
========================================================== */

.panel__header-right {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  flex-shrink: 0;
}

/* ==========================================================
   DIVIDER
========================================================== */

.panel__divider {
  width: 100%;

  height: 2px;

  flex-shrink: 0;

  background: var(--panel-border);
}

/* ==========================================================
   BODY
========================================================== */

.panel__body {
  display: flex;

  flex-direction: column;

  gap: 16px;

  padding: var(--panel-padding);
}

.panel__body > :first-child {
  margin-top: 0;
}

.panel__body > :last-child {
  margin-bottom: 0;
}

/* ==========================================================
   FOOTER
========================================================== */

.panel__footer {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 12px;

  padding: 20px 24px;

  border-top: 2px solid var(--panel-border);
}

/* ==========================================================
   FOOTER ALIGNMENT
========================================================== */

.panel__footer--left {
  justify-content: flex-start;
}

.panel__footer--center {
  justify-content: center;
}

.panel__footer--between {
  justify-content: space-between;
}

/* ==========================================================
   SIZE
========================================================== */

.panel--sm {
  max-width: 320px;
}

.panel--md {
  max-width: 440px;
}

.panel--lg {
  max-width: 560px;
}

.panel--xl {
  max-width: 720px;
}

.panel--fluid {
  width: 100%;

  max-width: none;
}

/* ==========================================================
   VARIANTS
========================================================== */

.panel--default {
  --panel-accent: #d8d2c8;
}

.panel--primary {
  --panel-accent: var(--primary);
}

.panel--secondary {
  --panel-accent: var(--secondary);
}

.panel--success {
  --panel-accent: var(--success);
}

.panel--warning {
  --panel-accent: var(--warning);
}

.panel--danger {
  --panel-accent: var(--danger);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 480px) {
  .panel__header {
    padding: var(--space-5);
  }

  .panel__body {
    padding: var(--space-5);
  }

  .panel__footer {
    padding: 16px 20px;
  }

  .panel__icon {
    width: 40px;

    height: 40px;
  }

  .panel__icon .icon {
    width: 18px;

    height: 18px;
  }

  .panel__title {
    font-size: var(--font-size-lg);
  }

  .panel__subtitle {
    font-size: 13px;
  }
}