/* hellodjt — App-Shell Components
   Extends dotHello with application-level UI components.
   Requires: dothello.css + tokens.css loaded first.
   All classes use the dh- prefix. All values use --dh-* tokens.
   ================================================================ */


/* ============================================
   App Header — sticky top bar
   ============================================ */


.dh-app-header {
  position: sticky;
  top: 0;
  z-index: var(--dh-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dh-space-3) var(--dh-space-6);
  background: var(--dh-color-surface);
  border-bottom: 1px solid var(--dh-color-border);
}


.dh-app-header__logo {
  font-size: var(--dh-text-xl);
  font-weight: var(--dh-weight-bold);
  letter-spacing: -0.02em;
  color: var(--dh-color-text);
  text-decoration: none;
}


.dh-app-header__logo span { color: var(--dh-color-primary); }


.dh-app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--dh-space-3);
}


/* ============================================
   App Card — surface card (dashboard items, form wrappers)
   ============================================ */


.dh-app-card {
  background: var(--dh-color-surface);
  border: 1px solid var(--dh-color-border);
  border-radius: var(--dh-radius-md);
  padding: var(--dh-space-8);
}


.dh-app-card--sm { padding: var(--dh-space-5) var(--dh-space-6); }


.dh-app-card--interactive {
  cursor: pointer;
  transition:
    border-color var(--dh-duration-base) var(--dh-ease-out),
    box-shadow   var(--dh-duration-base) var(--dh-ease-out);
}


.dh-app-card--interactive:hover {
  border-color: var(--dh-color-primary);
  box-shadow: var(--dh-shadow-glow);
}


/* ============================================
   App Badge — status indicators
   ============================================ */


.dh-app-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--dh-radius-sm);
  font-size: var(--dh-text-xs);
  font-weight: var(--dh-weight-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}


.dh-app-badge--published {
  background: var(--dh-color-primary-dim);
  color: var(--dh-color-primary);
  border: 1px solid rgba(110, 231, 183, 0.3);
}


.dh-app-badge--draft {
  background: rgba(107, 114, 128, 0.1);
  color: var(--dh-color-text-muted);
  border: 1px solid var(--dh-color-border);
}


.dh-app-badge--danger {
  background: var(--dh-color-danger-dim);
  color: var(--dh-color-danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
}


.dh-app-badge--info {
  background: rgba(99, 102, 241, 0.1);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}


/* Template-specific badges */


.dh-app-badge--minimal      { background: #1a1a1a; color: #aaa; border: 1px solid #333; }


.dh-app-badge--professional { background: rgba(99,102,241,.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }


.dh-app-badge--creative     { background: rgba(236,72,153,.15); color: #f9a8d4; border: 1px solid rgba(236,72,153,.3); }


/* ============================================
   App Toggle — published / draft switch
   ============================================ */


.dh-app-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dh-space-2);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}


.dh-app-toggle__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


.dh-app-toggle__track {
  width: 36px;
  height: 20px;
  background: var(--dh-color-border);
  border-radius: var(--dh-radius-full);
  position: relative;
  transition: background var(--dh-duration-base) var(--dh-ease-out);
  flex-shrink: 0;
}


.dh-app-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: var(--dh-radius-full);
  transition: transform var(--dh-duration-base) var(--dh-ease-out);
}


.dh-app-toggle__input:checked + .dh-app-toggle__track {
  background: var(--dh-color-primary);
}


.dh-app-toggle__input:checked + .dh-app-toggle__track::after {
  transform: translateX(16px);
}


.dh-app-toggle__label {
  font-size: var(--dh-text-sm);
  color: var(--dh-color-text-muted);
}


/* ============================================
   App Form — dark inputs for app shell
   ============================================ */


.dh-app-form .dh-form__group { margin-bottom: var(--dh-space-5); }


.dh-app-form .dh-form__label {
  display: block;
  font-size: var(--dh-text-xs);
  font-weight: var(--dh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dh-color-text-muted);
  margin-bottom: var(--dh-space-2);
}


.dh-app-form .dh-input,
.dh-app-form .dh-textarea,
.dh-app-form .dh-select {
  width: 100%;
  background: var(--dh-color-surface2);
  border: 1px solid var(--dh-color-border);
  border-radius: var(--dh-radius-md);
  color: var(--dh-color-text);
  padding: var(--dh-space-2) var(--dh-space-3);
  font-size: var(--dh-text-base);
  font-family: var(--dh-font-body);
  transition: border-color var(--dh-duration-fast) var(--dh-ease-out);
  outline: none;
}


.dh-app-form .dh-input:focus,
.dh-app-form .dh-textarea:focus,
.dh-app-form .dh-select:focus {
  border-color: var(--dh-color-primary);
}


.dh-app-form .dh-input[readonly] {
  color: var(--dh-color-text-muted);
  cursor: default;
}


.dh-app-form .dh-textarea { resize: vertical; min-height: 80px; }


.dh-app-form .dh-form__hint {
  font-size: var(--dh-text-xs);
  color: var(--dh-color-text-muted);
  margin-top: var(--dh-space-1);
}


/* ============================================
   App Alerts
   ============================================ */


.dh-app-alert {
  padding: var(--dh-space-3) var(--dh-space-4);
  border-radius: var(--dh-radius-md);
  font-size: var(--dh-text-sm);
  margin-bottom: var(--dh-space-4);
}


.dh-app-alert--error   { background: var(--dh-color-danger-dim); border: 1px solid rgba(248,113,113,.3); color: #fca5a5; }


.dh-app-alert--success { background: var(--dh-color-primary-dim); border: 1px solid rgba(110,231,183,.3); color: var(--dh-color-primary); }


.dh-app-alert--info    { background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.3); color: #a5b4fc; }


/* ============================================
   App Spinner
   ============================================ */


.dh-app-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--dh-color-border);
  border-top-color: var(--dh-color-primary);
  border-radius: var(--dh-radius-full);
  animation: dh-spin 0.6s linear infinite;
}


@keyframes dh-spin { to { transform: rotate(360deg); } }


/* ============================================
   App Section Title / Divider
   ============================================ */


.dh-app-section-title {
  font-size: var(--dh-text-xs);
  font-weight: var(--dh-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dh-color-text-muted);
  margin-bottom: var(--dh-space-4);
  padding-bottom: var(--dh-space-2);
  border-bottom: 1px solid var(--dh-color-border);
}


/* ============================================
   App Page Layout
   ============================================ */


.dh-app-page-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dh-space-8) var(--dh-space-6);
}


.dh-app-container {
  max-width: var(--dh-container-sm);
  margin-inline: auto;
  padding-inline: var(--dh-space-6);
}


/* ============================================
   App Option Group — segmented radio-style selector
   Usage: account type, plan selection, mode pickers
   ============================================ */


.dh-app-option-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--dh-space-3);
}


.dh-app-option-btn {
  display: flex;
  flex-direction: column;
  gap: var(--dh-space-1);
  padding: var(--dh-space-4) var(--dh-space-4);
  background: var(--dh-color-surface2);
  border: 2px solid var(--dh-color-border);
  border-radius: var(--dh-radius-md);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--dh-duration-base) var(--dh-ease-out),
    background   var(--dh-duration-base) var(--dh-ease-out);
}


.dh-app-option-btn:hover {
  border-color: var(--dh-color-primary);
}


.dh-app-option-btn.is-active {
  border-color: var(--dh-color-primary);
  background: var(--dh-color-primary-dim);
}


.dh-app-option-btn__label {
  font-size: var(--dh-text-sm);
  font-weight: var(--dh-weight-semibold);
  color: var(--dh-color-text);
}


.dh-app-option-btn.is-active .dh-app-option-btn__label {
  color: var(--dh-color-primary);
}


.dh-app-option-btn__desc {
  font-size: var(--dh-text-xs);
  color: var(--dh-color-text-muted);
}


/* ============================================
   Responsive
   ============================================ */


@media (max-width: 600px) {
  .dh-app-card   { padding: var(--dh-space-5); }
  .dh-app-header { padding: var(--dh-space-3) var(--dh-space-4); }
}