// ─────────────────────────────────────────────────────────────
// GOODBOOKS · Work Order Plan — dark theme
// Scoped under .wo-theme so it doesn't leak into other forms.
// Adjust the tokens in the :root-like map below to retheme quickly.
// ─────────────────────────────────────────────────────────────

.wi-tab-hint {
  font-size: 12px;
  color: var(--wo-text-dim, #6b6b7d);
  padding: 8px 12px;
}

.wo-theme {
  --wo-bg: #f4f3f9;
  --wo-panel: #f4f3f9;
  --wo-panel-2: #ffffff;
  --wo-card-hdr: #ffffff;
  --wo-border: #e6e5ee;
  --wo-border-soft: rgba(230, 229, 238, 0.7);
  --wo-text: #1a1a2e;
  --wo-text-dim: #6b6b7d;
  --wo-text-faint: #9b9ba8;
  --wo-accent: #7c5cff;
  --wo-accent-soft: rgba(124, 92, 255, 0.1);
  --wo-ok: #22b573;
  --wo-info: #3f7cff;
  --wo-radius: 10px;
  --wo-field-h: 38px;
  --wo-shadow: 0 1px 2px rgba(20, 20, 43, 0.04);

  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  color: var(--wo-text);

  // .FormOverView {
  //   background: var(--wo-panel);
  //   border: 1px solid var(--wo-border);
  //   border-right: 3px solid var(--wo-accent);
  //   border-radius: 14px;
  //   overflow: hidden;
  //   padding-bottom: 8px;
  //   box-shadow: var(--wo-shadow);
  // }

  // ── Top bar ─────────────────────────────────────────────
  .wo-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid var(--wo-border);
    background: #ffffff;

    .wo-brand {
      display: flex;
      align-items: center;
      gap: 10px;

      .logo {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: linear-gradient(135deg, var(--wo-accent), #8f6bff);
      }
      .brand-name {
        font-size: 11px;
        letter-spacing: .14em;
        color: var(--wo-accent);
        font-weight: 700;
      }
      .title {
        font-size: 16px;
        font-weight: 600;
        margin-left: 6px;
      }
    }

    .wo-topbar-actions {
      display: flex;
      gap: 10px;
    }
  }

  .btn {
    border: 1px solid var(--wo-border);
    background: var(--wo-panel-2);
    color: var(--wo-text);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;

    &.btn-primary {
      background: var(--wo-accent);
      border-color: var(--wo-accent);
      color: #fff;
    }
  }

  // ── Header field row ────────────────────────────────────
  .wo-header-row {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 1fr 1.4fr 1.4fr 1fr;
    gap: 16px;
    padding: 18px 22px 6px;

    @media (max-width: 1100px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .fg {
    display: flex;
    flex-direction: column;
    gap: 6px;

    label {
      font-size: 10.5px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--wo-text-dim);
      font-weight: 600;

      .req { color: #ff6b6b; margin-left: 2px; }
    }
  }

  .cn-pair {
    display: flex;
    gap: 8px;

    > * { flex: 1; }
  }

  // ── Card ─────────────────────────────────────────────────
  .cs {
    margin: 14px 22px 0;
    border: 1px solid var(--wo-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--wo-panel-2);

    .cs-hdr {
      background: var(--wo-card-hdr);
      padding: 10px 16px;
      font-size: 11px;
      letter-spacing: .08em;
      font-weight: 700;
      color: var(--wo-text-dim);
      border-bottom: 1px solid var(--wo-border);
    }

    .cs-body { padding: 18px 16px; }
  }

  .cs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 22px;

    @media (max-width: 1100px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  // ── Tabs / grid toolbar ──────────────────────────────────
  .wo-tabs {
    margin: 18px 22px 0;
  }

  .stages-toolbar,
  .grid-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 4px;

    .stages-title,
    .label {
      font-weight: 700;
      font-size: 12.5px;
      margin-right: 8px;
    }
  }

  .stbtn {
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--wo-border);
    background: var(--wo-panel-2);
    color: var(--wo-text-dim);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;

    &.stbtn-io.active,
    &.active { background: var(--wo-accent); border-color: var(--wo-accent); color: #fff; }
    &.stbtn-add { background: rgba(52,201,143,.12); border-color: #245c46; color: var(--wo-ok); }
    &.stbtn-del { background: rgba(255,107,107,.1); border-color: #5c2a2a; color: #ff6b6b; }
  }

  .expand-rows {
    margin-left: auto;
    font-size: 12px;
    color: var(--wo-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  // ── Status dots (for use inside gb-formgrid cell templates) ──
  .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;

    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;

      &.ok { background: var(--wo-ok); }
      &.info { background: var(--wo-info); }
      &.muted { background: var(--wo-text-faint); }
    }
  }

  // ── Action bar ───────────────────────────────────────────
  .action-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px 22px;
    flex-wrap: wrap;

    .abtn {
      padding: 9px 18px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid transparent;

      &.abtn-save { background: #1f8f5f; color: #fff; }
      &.abtn-update { background: var(--wo-accent); color: #fff; }
      &.abtn-delete { background: #c0392b; color: #fff; }
      &.abtn-clear,
      &.abtn-print { background: var(--wo-panel-2); border-color: var(--wo-border); color: var(--wo-text); }
      &.abtn-stockres,
      &.abtn-deres { background: #a97c1a; color: #fff; }
    }

    .action-bar-note {
      margin-left: auto;
      font-size: 11.5px;
      color: var(--wo-text-faint);

      span { color: #ff6b6b; }
    }
  }

  // ── Overrides for custom gb-* components ────────────────
  // gb-newpicklist / gb-input / gb-date / gb-combobox typically render
  // their own <input>/<select> internally. Target the inner control so
  // it inherits the dark field styling. Adjust selectors to match your
  // component's actual DOM output if different.
  gb-newpicklist,
  gb-input,
  gb-date,
  gb-combobox {
    display: block;
    width: 100%;

    input,
    select,
    .mat-select,
    .mat-form-field {
      height: var(--wo-field-h);
      background: #ffffff !important;
      border: 1px solid var(--wo-border) !important;
      border-radius: 8px !important;
      color: var(--wo-text) !important;
      padding: 0 12px;
      font-size: 12.5px !important;
      box-shadow: var(--wo-shadow);
    }

    input:focus,
    select:focus,
    .mat-select:focus {
      border-color: var(--wo-accent) !important;
      outline: none;
    }

    ::placeholder { color: var(--wo-text-faint) !important; }
  }

  // ── mat-tab-group restyle ────────────────────────────────
  ::ng-deep {
    .FormsTabGroup {
      .mat-tab-label,
      .mat-mdc-tab {
        color: var(--wo-text-dim) !important;
        font-weight: 600;
        font-size: 12.5px !important;
      }
      .mat-tab-label-active,
      .mdc-tab--active {
        color: var(--wo-text) !important;
      }
      .mat-ink-bar,
      .mdc-tab-indicator__content--underline {
        background-color: var(--wo-accent) !important;
        border-color: var(--wo-accent) !important;
      }
      .mat-tab-body-wrapper,
      .mat-mdc-tab-body-wrapper {
        background: transparent;
      }
    }
  }
}