/* Workspace settings page — /companies/{id}/settings
   Structure in @layer components, colour in @layer theme (theme outranks
   components, so a colour declared in components would be a review block). */

@layer components {
  .company-settings-page {
    padding-block: var(--space-xl);
    position: relative;
    /* clip, not hidden: hidden makes this a scroll container, which silently
       kills position:sticky on .settings-side. */
    overflow: clip;

    /* Back link above the header. Duplicated per page-scope, as in
       position-detail.css and members.css. */
    .detail-back-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      margin-block-end: var(--space-md);
      font-size: var(--fs-small);
      text-decoration: none;
    }

    /* Index-page h1 sizing does not apply — this is a record page. */

    .settings-body {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      align-items: start;
      gap: var(--space-xl);
      max-inline-size: 1280px;
    }

    .settings-main {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
      min-inline-size: 0;
    }

    .settings-side {
      position: sticky;
      inset-block-start: var(--space-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
    }

    .section-head {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-md);

      h2 {
        font-size: var(--fs-body);
        margin: 0;
      }
    }

    .section-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 28px;
      block-size: 28px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .card {
      padding: var(--space-lg);
      border-radius: 12px;
      border-width: 1px;
      border-style: solid;
    }

    .side-card .card {
      padding: var(--space-md);
    }

    .logo-row {
      display: flex;
      align-items: flex-start;
      gap: var(--space-lg);
      flex-wrap: wrap;
    }

    /* Fixed box rather than a shrink-to-fit one, so a wide wordmark and a square
       mark occupy the same slot and the controls beside them do not jump. */
    .logo-preview {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 180px;
      block-size: 72px;
      border-radius: 10px;
      border-width: 1px;
      border-style: solid;
      padding: var(--space-sm);
      flex-shrink: 0;
      overflow: hidden;

      img {
        max-inline-size: 100%;
        max-block-size: 100%;
        object-fit: contain;
      }
    }

    .logo-placeholder {
      font-size: var(--fs-xsmall);
    }

    .logo-controls {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      min-inline-size: 0;
      flex: 1 1 240px;
    }

    .logo-lead {
      margin: 0;
      font-size: var(--fs-small);
    }

    .logo-actions {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-start: var(--space-xs);
    }

    /* The picker is a <label> wrapping a hidden <input type=file> so it can be
       styled like the buttons beside it; browsers give the native control no
       usable styling surface of their own. */
    .logo-pick {
      cursor: pointer;
    }

    .logo-readonly {
      margin: var(--space-xs) 0 0;
      font-size: var(--fs-xsmall);
    }

    .logo-banner {
      margin: 0 0 var(--space-md);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--wire-radius);
      border-width: 1px;
      border-style: solid;
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    /* Two columns so short fields (industry, size, location) pair up instead of
       each taking a full row; anything holding a URL or the name spans both. */
    .profile-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md) var(--space-lg);
    }

    .field-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      min-inline-size: 0;

      label {
        font-size: var(--fs-small);
        font-weight: var(--fw-medium);
      }

      input {
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--wire-radius);
        font-size: var(--fs-small);
        min-inline-size: 0;
      }
    }

    /* Written out in full rather than as `&--wide` inside .field-group:
       native CSS nesting cannot concatenate `&` with an identifier, so the
       Sass-style form silently drops the rule (see base-local.css). */
    .field-group--wide {
      grid-column: 1 / -1;
    }

    .field-hint {
      margin: 0;
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    .form-actions {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-block-start: var(--space-lg);
      padding-block-start: var(--space-lg);
      border-block-start-width: 1px;
      border-block-start-style: solid;
    }

    .form-actions-hint {
      font-size: var(--fs-xsmall);
    }

    .readonly-notice {
      margin: var(--space-lg) 0 0;
      padding-block-start: var(--space-lg);
      border-block-start-width: 1px;
      border-block-start-style: solid;
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    .settings-banner {
      margin: 0 0 var(--space-md);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--wire-radius);
      border-width: 1px;
      border-style: solid;
      font-size: var(--fs-xsmall);
      line-height: 1.5;
    }

    /* Side explainer list — same shape as .access-notes on the members page. */
    .settings-notes {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      font-size: var(--fs-xsmall);
      line-height: 1.5;

      strong {
        display: block;
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        margin-block-end: var(--space-3xs);
      }
    }

    .side-kv {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--space-sm) var(--space-md);
      margin: 0;
      font-size: var(--fs-small);

      dt {
        font-weight: var(--fw-medium);
      }

      dd {
        margin: 0;
        min-inline-size: 0;
        overflow-wrap: anywhere;
      }
    }

    @media (max-width: 1100px) {
      .settings-body {
        grid-template-columns: minmax(0, 1fr);
      }

      .settings-side {
        position: static;
      }
    }

    @media (max-width: 640px) {
      .profile-form {
        grid-template-columns: minmax(0, 1fr);
      }
    }
  }
}

@layer theme {
  .company-settings-page {
    .detail-back-link {
      color: var(--text-secondary);

      &:hover {
        color: var(--accent-primary);
      }
    }

    .section-icon {
      color: var(--accent-primary);
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
    }

    .card {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border-color: oklch(from var(--glass-tint) l c h / 0.06);
    }

    /* White plate deliberately, in BOTH themes: it mirrors the chip the
       invitation email puts behind the logo, so a dark or transparent mark
       previews here exactly as a candidate will see it. */
    .logo-preview {
      background: oklch(100% 0 0);
      border-color: oklch(from var(--glass-tint) l c h / 0.12);
    }

    .logo-placeholder {
      color: oklch(45% 0 0);
    }

    .logo-lead {
      color: var(--text-primary);
    }

    .logo-readonly {
      color: var(--text-secondary);
    }

    .logo-banner {
      color: var(--color-success);
      background: light-dark(
        oklch(from var(--color-success) l c h / 0.08),
        oklch(from var(--color-success) l c h / 0.12)
      );
      border-color: light-dark(
        oklch(from var(--color-success) l c h / 0.2),
        oklch(from var(--color-success) l c h / 0.25)
      );

      &[data-kind='error'] {
        color: var(--color-error);
        background: light-dark(
          oklch(from var(--color-error) l c h / 0.08),
          oklch(from var(--color-error) l c h / 0.12)
        );
        border-color: light-dark(
          oklch(from var(--color-error) l c h / 0.2),
          oklch(from var(--color-error) l c h / 0.25)
        );
      }
    }

    .field-group label {
      color: var(--text-secondary);
    }

    .field-hint {
      color: var(--text-secondary);
    }

    .form-actions {
      border-block-start-color: oklch(from var(--glass-tint) l c h / 0.06);
    }

    .form-actions-hint {
      color: var(--text-secondary);
    }

    .readonly-notice {
      border-block-start-color: oklch(from var(--glass-tint) l c h / 0.06);
      color: var(--text-secondary);
    }

    /* Kind is set by the page JS; success and failure must not be told apart by
       colour alone, so the banner always carries wording too. */
    .settings-banner {
      color: var(--color-success);
      background: light-dark(
        oklch(from var(--color-success) l c h / 0.08),
        oklch(from var(--color-success) l c h / 0.12)
      );
      border-color: light-dark(
        oklch(from var(--color-success) l c h / 0.2),
        oklch(from var(--color-success) l c h / 0.25)
      );

      &[data-kind='error'] {
        color: var(--color-error);
        background: light-dark(
          oklch(from var(--color-error) l c h / 0.08),
          oklch(from var(--color-error) l c h / 0.12)
        );
        border-color: light-dark(
          oklch(from var(--color-error) l c h / 0.2),
          oklch(from var(--color-error) l c h / 0.25)
        );
      }
    }

    .settings-notes {
      color: var(--text-secondary);

      strong {
        color: var(--text-primary);
      }
    }

    .side-kv dt {
      color: var(--text-secondary);
    }
  }
}