/**
 * My Brand — several brands (multi-brand-generation MP-03).
 * Layout of the frozen design (approved-designs/my-brand-multi-brand.dc.html).
 * Theme values only (Rule 10); buttons, form inputs and platform groups use the shared classes.
 */

/* Page frame: My Brand uses the full width of the frozen design (the profile page caps at 900px) */
.profile-page--my-brand {
  max-width: 1440px;
}

.my-brand-subtitle {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

/* The two design panels sit directly on the page — no extra section frame around them */
.profile-content .profile-section[data-section="my-brand"] {
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}

.my-brand-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

/* ---- Brand list (left panel) ---- */

.brand-list-panel,
.my-brand-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-glass-subtle);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-xl);
}

/* MP-10 (frozen design): "Brands (n)" | "Archived (n)" tabs head the list */
.brand-list-tabs {
  display: flex;
  gap: var(--space-sm);
}

.brand-archived-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-glass-subtle);
}

/* Delete refused: the brand has templates (MP-10, frozen design) */
.brand-refusal {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-lg);
  background: rgba(239, 68, 68, var(--opacity-light));
}

.brand-refusal-title {
  font-weight: var(--font-semibold);
}

.brand-refusal-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.brand-refusal-text {
  font-size: var(--font-sm);
}

.brand-refusal-actions {
  display: flex;
  gap: var(--space-sm);
}

.brand-list-note,
.brand-card-summary {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.brand-list-note {
  margin: 0;
}

.brand-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--space-md);
  text-align: left;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-glass-subtle);
  border: 2px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.brand-card.is-selected {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.brand-card-top,
.brand-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.brand-card-name {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
}

.brand-card-badges {
  display: flex;
  gap: var(--space-xs);
}

/* MP-11: incomplete brand (frozen design 2026-09-26) */
.brand-badge-incomplete {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  color: var(--color-black);
  background: var(--color-warning-alt);
  border-radius: var(--radius-full);
}

.brand-badge-default {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.brand-kind-pill {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-xs);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-full);
}

.brand-card-swatches {
  display: flex;
  gap: var(--space-xs);
}

.brand-card-warning {
  font-size: var(--font-sm);
  color: var(--color-warning);
}

.brand-new-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

/* ---- Selected brand (right panel) ---- */

.brand-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}

.brand-header-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.brand-header-name {
  flex-grow: 1;
  min-width: 280px;
}

.brand-name-input {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
}

.brand-default-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  font-size: var(--font-sm);
}

/* MP-01 rework (frozen design 2026-09-26): why "Default brand" is greyed out */
.brand-default-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.brand-header-actions {
  display: flex;
  gap: var(--space-sm);
}

.brand-tabs {
  display: flex;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.brand-tab-button {
  min-height: 44px;
  padding: 0 var(--space-lg);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  cursor: pointer;
}

.brand-tab-button.is-selected {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.brand-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.brand-tab-intro,
.brand-empty {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.brand-grid {
  display: grid;
  gap: var(--space-md);
}

.brand-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brand-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.brand-field-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
}

.brand-color-row,
.brand-logo-row,
.brand-documents-row,
.brand-voice-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* The design's small colour swatch with its code beside it (shared .color-input fills the width) */
.brand-color-row .color-input {
  width: 56px;
  height: 44px;
}

/* Text boxes use the page font, as the design */
.brand-voice-tab textarea.form-input {
  font-family: inherit;
}

.brand-color-value,
.brand-documents-note,
.brand-voice-sources {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.brand-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* The × on an uploaded logo or profile photo, on the box's top-right corner (owner 2026-10-22: "× on the picture";
   frozen My Brand designs). The button itself is the one My Brand × (.picture-avoid-remove). */
.brand-picture-frame {
  position: relative;
}

.brand-picture-frame .brand-picture-remove {
  position: absolute;
  top: calc(-1 * var(--space-sm));
  right: calc(-1 * var(--space-sm));
  background: rgba(0, 0, 0, var(--opacity-heavy)); /* on a picture: the design's dark × */
  color: var(--color-white);
  font-size: var(--font-sm);
}

/* The company logo box is the Logo element's 4:1 shape, up to 384 wide but never wider than its column, and shows
   any logo whole at its top-left (owner 2026-10-22: "4× wide box", "Box fits its column", "Top-left"; frozen My Brand
   designs changed with the owner's approval) */
.brand-picture-frame[data-picture="logo"] {
  flex: 0 1 384px;
  min-width: 0;
}

.brand-picture-frame[data-picture="logo"] .brand-logo-box {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
}

.brand-logo-box .logo-preview {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  object-fit: contain;
  object-position: left top;
}

/* MP-12: the brand's profile photo is round (frozen design approved-designs-profile-photo) */
.brand-photo-box {
  border-radius: var(--radius-full);
}

.profile-photo-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-logo-empty {
  padding: var(--space-xs);
  font-size: var(--font-xs);
  text-align: center;
  color: var(--color-text-secondary);
}

.brand-voice-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-overlay-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.brand-voice-box-title {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
}

.brand-voice-box-status {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.brand-accounts-count {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
}

/* A lasting warning on one brand, e.g. documents a brand-voice link load could not find */
.brand-notice-warning {
  margin: 0;
  padding: var(--space-md);
  font-size: var(--font-sm);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
}

.my-brand-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  color: var(--color-error);
  border: 1px solid var(--color-error-400);
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .my-brand-layout,
  .brand-grid-2,
  .brand-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Picture description (skia-media-extras MP-06, frozen v2 screen 5) ---- */
.picture-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    background: var(--color-glass-subtle);
}

.picture-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
}

.picture-panel-head > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.picture-avoid-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.picture-avoid-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
    border-radius: var(--radius-3xl);
    border: 1px solid var(--color-border-medium);
    font-size: var(--font-sm);
    color: var(--color-text-primary);
}

.picture-avoid-remove {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-glass-light);
    color: var(--color-text-primary);
    cursor: pointer;
}

.picture-avoid-add {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-sm);
}

.picture-avoid-add .form-input {
    max-width: 280px;
}

.picture-sr {
    position: absolute;
    left: -9999px;
}

.brand-status-badge {
    align-self: center;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-3xl);
    background: var(--color-success-light);
    color: var(--color-text-primary);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
}

.picture-panel-title {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.picture-panel-note {
    margin: 0;
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

/* Frozen v2 screen 5: the picture description fields use the page's own font */
.picture-panel textarea {
    font-family: inherit;
    line-height: 1.5;
}