.sector-page {
  --sector-ink: #101510;
  --sector-muted: #4b554b;
  --sector-line: #d9e0d7;
  --sector-surface: #ffffff;
  --sector-soft: #f4f7f3;
  --sector-green: #278f16;
  --sector-green-dark: #17660b;
  --sector-yellow: #ffd400;
  --sector-red: #f01422;
  color: var(--sector-ink);
  font-family: "Poppins", sans-serif;
}

.sector-shell {
  width: min(1480px, calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.sector-back,
.sector-inline-link {
  color: var(--sector-green-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.sector-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin: 18px 0 24px;
  padding: 30px;
  border: 1px solid var(--sector-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 212, 0, .23), transparent 28%),
    linear-gradient(135deg, #ffffff, #f4faF2);
  box-shadow: 0 16px 40px rgba(25, 50, 23, .08);
}

.sector-hero h1 {
  margin: 3px 0 7px;
  color: #050805;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.05;
  font-weight: 900;
}

.sector-hero p {
  max-width: 760px;
  margin: 0;
  color: #263026;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.sector-hero-badge,
.sector-branch-filter {
  min-width: 230px;
  padding: 18px;
  border: 1px solid rgba(39, 143, 22, .25);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
}

.sector-hero-badge span,
.sector-hero-badge strong {
  display: block;
}

.sector-hero-badge span {
  color: var(--sector-muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sector-hero-badge strong {
  margin-top: 5px;
  color: #050805;
  font-size: 18px;
  font-weight: 800;
}

.sector-branch-filter label,
.sector-page label {
  display: grid;
  gap: 7px;
  color: #111611;
  font-size: 14px;
  font-weight: 700;
}

.sector-branch-filter {
  display: grid;
  gap: 10px;
}

.sector-page input,
.sector-page select,
.sector-page textarea,
.sector-page button {
  min-height: 44px;
  border-radius: 11px;
  font: inherit;
}

.sector-page input,
.sector-page select,
.sector-page textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #aeb9ac;
  background: #fff;
  color: #080b08;
  font-size: 15px;
  font-weight: 500;
}

.sector-page textarea {
  min-height: 92px;
  resize: vertical;
}

.sector-page button {
  padding: 10px 16px;
  border: 0;
  background: var(--sector-green);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.sector-page button:hover {
  background: var(--sector-green-dark);
}

.sector-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.sector-summary article {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--sector-line);
  border-radius: 18px;
  background: var(--sector-surface);
  box-shadow: 0 8px 24px rgba(22, 38, 21, .05);
}

.sector-summary span,
.sector-summary strong,
.sector-summary small {
  display: block;
}

.sector-summary span {
  color: #3a443a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
}

.sector-summary strong {
  margin: 5px 0 2px;
  color: #050805;
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
}

.sector-summary small {
  color: var(--sector-muted);
  font-size: 13px;
  font-weight: 600;
}

.sector-summary .is-warning {
  border-color: #e8c200;
  background: #fffbed;
}

.sector-summary .is-danger {
  border-color: rgba(240, 20, 34, .4);
  background: #fff3f4;
}

.sector-summary .is-ok {
  border-color: rgba(39, 143, 22, .35);
  background: #f3faF1;
}

.sector-section {
  min-width: 0;
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid var(--sector-line);
  border-radius: 22px;
  background: var(--sector-surface);
  box-shadow: 0 10px 30px rgba(22, 38, 21, .05);
}

.sector-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}

.sector-section-head h2 {
  margin: 3px 0 0;
  color: #070a07;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.2;
  font-weight: 900;
}

.sector-section-head > p {
  max-width: 580px;
  margin: 3px 0 0;
  color: var(--sector-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.sector-team-roster {
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid #d8ddd2;
  border-radius: 18px;
  background: #fff;
}

.sector-team-roster .sector-section-head p {
  max-width: 820px;
  margin: 5px 0 0;
  color: #2d3329;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.55;
}

.sector-team-count {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  color: #173019;
  background: #deebdc;
  font-size: 13px;
  font-weight: 850;
}

.sector-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.sector-team-person {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #d9ded3;
  border-radius: 14px;
  background: #f8faf6;
}

.sector-team-person.is-unassigned {
  border-color: #c89a3b;
  background: #fff9e9;
}

.sector-team-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #283626;
  font-size: 18px;
  font-weight: 900;
}

.sector-team-person h3 {
  margin: 0;
  color: #0d0f0c;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
}

.sector-team-person p {
  margin: 3px 0;
  color: #33392f;
  font-size: 13px;
  font-weight: 650;
}

.sector-team-person ul {
  display: grid;
  gap: 3px;
  margin: 5px 0 0;
  padding-left: 18px;
  color: #20251d;
  font-size: 13px;
  line-height: 1.4;
}

.sector-unassigned-label {
  color: #754d05 !important;
  font-weight: 800 !important;
}

.sector-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sector-card {
  display: flex;
  min-width: 0;
  min-height: 270px;
  flex-direction: column;
  padding: 22px;
  border: 2px solid var(--sector-line);
  border-radius: 20px;
  background: #fff;
}

.sector-card.is-checked {
  border-color: rgba(39, 143, 22, .55);
  background: #f8fcf7;
}

.sector-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sector-card h3,
.sector-admin-card h3,
.sector-observation h3,
.sector-selected-product h3 {
  margin: 4px 0;
  color: #050805;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}

.sector-branch,
.sector-type {
  display: inline-flex;
  color: var(--sector-green-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.sector-description,
.sector-reference {
  margin: 12px 0 0;
  color: #273027;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
}

.sector-reference {
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--sector-soft);
}

.sector-assignment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0;
}

.sector-assignment-meta span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef3ed;
  color: #263026;
  font-size: 12px;
  font-weight: 700;
}

.sector-status {
  display: inline-flex;
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: #e9f5e6;
  color: #17660b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.sector-status.pending,
.sector-status.status-review,
.sector-status.status-in_progress {
  background: #fff3bd;
  color: #6d5700;
}

.sector-status.has-observation,
.sector-status.status-open {
  background: #ffe2e4;
  color: #a20b16;
}

.sector-status.status-resolved {
  background: #e9f5e6;
  color: #17660b;
}

.sector-status.status-dismissed {
  background: #e8ece8;
  color: #3d463d;
}

.sector-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
}

.sector-actions form {
  margin: 0;
}

.sector-ok-button,
.sector-report-button,
.sector-cancel-button,
.sector-evidence-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.sector-report-button {
  border: 2px solid var(--sector-yellow);
  background: var(--sector-yellow);
  color: #171300;
}

.sector-report-button.primary {
  border-color: var(--sector-green);
  background: var(--sector-green);
  color: #fff;
}

.sector-cancel-button {
  border: 1px solid #b7c0b5;
  color: #222a22;
  background: #fff;
}

.sector-empty {
  padding: 34px 20px;
  border: 1px dashed #b8c1b6;
  border-radius: 16px;
  background: var(--sector-soft);
  text-align: center;
}

.sector-empty span {
  color: var(--sector-green);
  font-size: 28px;
  font-weight: 900;
}

.sector-empty h3 {
  margin: 7px 0;
  color: #080b08;
  font-size: 19px;
  font-weight: 900;
}

.sector-empty p,
.sector-muted {
  color: var(--sector-muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.sector-empty.compact {
  padding: 20px;
}

.sector-observation-list {
  display: grid;
  gap: 12px;
}

.sector-observation {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--sector-line);
  border-radius: 16px;
  background: #fff;
}

.sector-observation-main {
  min-width: 0;
}

.sector-observation-main p {
  margin: 6px 0;
  color: #273027;
  font-size: 14px;
  line-height: 1.5;
}

.sector-observation-main small {
  color: var(--sector-muted);
  font-size: 12px;
}

.sector-manager-grid,
.sector-report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(420px, .86fr);
  align-items: start;
  gap: 20px;
}

.sector-create-panel,
.sector-assignment-panel,
.sector-archive-panel {
  margin: 14px 0;
  border: 1px solid var(--sector-line);
  border-radius: 14px;
  background: var(--sector-soft);
  overflow: hidden;
}

.sector-create-panel summary,
.sector-assignment-panel summary,
.sector-archive-panel summary {
  padding: 14px 16px;
  color: #111611;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.sector-create-panel form,
.sector-assignment-panel form,
.sector-archive-panel form {
  display: grid;
  gap: 13px;
  padding: 4px 16px 16px;
}

.sector-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sector-admin-list {
  display: grid;
  gap: 14px;
}

.sector-admin-card {
  padding: 18px;
  border: 1px solid var(--sector-line);
  border-radius: 17px;
  background: #fff;
}

.sector-admin-card.is-archived {
  opacity: .72;
  background: #f0f2f0;
}

.sector-admin-head p {
  margin: 7px 0;
  color: #303830;
  font-size: 14px;
  line-height: 1.5;
}

.sector-current-team {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sector-line);
}

.sector-current-team > strong {
  color: #171c17;
  font-size: 13px;
  font-weight: 800;
}

.sector-person-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1f6ef;
}

.sector-person-chip span,
.sector-person-chip small {
  display: block;
}

.sector-person-chip b {
  color: #0b0e0b;
  font-size: 14px;
}

.sector-person-chip small {
  color: var(--sector-muted);
  font-size: 12px;
}

.sector-person-chip form {
  margin: 0;
}

.sector-page .text-danger {
  min-height: 34px;
  padding: 6px 9px;
  background: transparent;
  color: #a20b16;
  font-size: 12px;
}

.sector-archive-panel p {
  margin: 0;
  padding: 0 16px;
  color: var(--sector-muted);
  font-size: 13px;
}

.sector-page .danger-button {
  background: var(--sector-red);
}

.sector-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.sector-filter-tabs a {
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef1ee;
  color: #333b33;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.sector-filter-tabs a.active {
  background: #162416;
  color: #fff;
}

.sector-observation-list.manager .sector-observation {
  display: grid;
  gap: 14px;
}

.sector-observation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sector-review-actions {
  display: grid;
  gap: 11px;
  padding-top: 12px;
  border-top: 1px solid var(--sector-line);
}

.sector-review-actions form {
  display: grid;
  gap: 10px;
}

.sector-page .sector-replenishment-button {
  background: #ffd400;
  color: #171300;
}

.sector-linked,
.sector-evidence-link {
  width: fit-content;
  padding: 8px 10px;
  border-radius: 10px;
  background: #edf7ea;
  color: var(--sector-green-dark) !important;
  font-weight: 800 !important;
}

.sector-evidence-link {
  min-height: 36px;
}

.sector-product-search {
  display: grid;
  gap: 8px;
}

.sector-product-search > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.sector-selected-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 2px solid rgba(39, 143, 22, .45);
  border-radius: 16px;
  background: #f4faf2;
}

.sector-selected-product span {
  color: var(--sector-green-dark);
  font-size: 11px;
  font-weight: 800;
}

.sector-selected-product p {
  margin: 3px 0 0;
  color: var(--sector-muted);
  font-size: 13px;
}

.sector-selected-product a {
  color: var(--sector-green-dark);
  font-size: 13px;
  font-weight: 800;
}

.sector-product-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  max-height: 520px;
  overflow: auto;
}

.sector-product-results a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--sector-line);
  border-radius: 12px;
  color: #0b0e0b;
  text-decoration: none;
}

.sector-product-results span,
.sector-product-results small {
  display: block;
}

.sector-product-results strong {
  font-size: 14px;
}

.sector-product-results small {
  color: var(--sector-muted);
  font-size: 12px;
}

.sector-product-results b {
  color: var(--sector-green-dark);
  font-size: 12px;
  white-space: nowrap;
}

.sector-report-form {
  display: grid;
  gap: 14px;
}

.sector-observation-options {
  display: grid;
  gap: 5px;
  padding: 12px;
  border-radius: 13px;
  background: var(--sector-soft);
}

.sector-observation-options p {
  margin: 0;
  color: #384138;
  font-size: 12px;
  line-height: 1.45;
}

.sector-security-note {
  padding: 14px;
  border-left: 5px solid var(--sector-yellow);
  border-radius: 12px;
  background: #fff9d9;
}

.sector-security-note strong {
  color: #171300;
  font-size: 14px;
  font-weight: 900;
}

.sector-security-note p {
  margin: 4px 0 0;
  color: #3e370e;
  font-size: 13px;
  line-height: 1.5;
}

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

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

  .sector-manager-grid,
  .sector-report-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sector-team-roster {
    padding: 18px;
  }

  .sector-team-grid {
    grid-template-columns: 1fr;
  }

  .sector-shell {
    width: min(100% - 20px, 1480px);
    padding-top: 18px;
  }

  .sector-hero,
  .sector-section-head,
  .sector-observation,
  .sector-selected-product {
    flex-direction: column;
  }

  .sector-hero {
    padding: 22px;
  }

  .sector-hero-badge,
  .sector-branch-filter {
    width: 100%;
    min-width: 0;
  }

  .sector-summary,
  .sector-card-grid,
  .sector-form-row {
    grid-template-columns: 1fr;
  }

  .sector-section {
    padding: 18px;
  }

  .sector-card-top,
  .sector-person-chip,
  .sector-observation-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .sector-actions,
  .sector-actions form,
  .sector-actions a,
  .sector-actions button {
    width: 100%;
  }
}

[data-portal-theme="night"] .sector-page {
  --sector-ink: #f4f8f3;
  --sector-muted: #bec9bc;
  --sector-line: #405040;
  --sector-surface: #182018;
  --sector-soft: #222b22;
  --sector-green-dark: #8de779;
  color: var(--sector-ink);
}

[data-portal-theme="night"] .sector-hero,
[data-portal-theme="night"] .sector-summary article,
[data-portal-theme="night"] .sector-section,
[data-portal-theme="night"] .sector-team-roster,
[data-portal-theme="night"] .sector-team-person,
[data-portal-theme="night"] .sector-card,
[data-portal-theme="night"] .sector-admin-card,
[data-portal-theme="night"] .sector-observation,
[data-portal-theme="night"] .sector-selected-product {
  background: #182018;
  color: #f4f8f3;
}

[data-portal-theme="night"] .sector-hero {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 212, 0, .13), transparent 28%),
    linear-gradient(135deg, #182018, #1e291d);
}

[data-portal-theme="night"] .sector-hero h1,
[data-portal-theme="night"] .sector-hero p,
[data-portal-theme="night"] .sector-section h2,
[data-portal-theme="night"] .sector-team-person h3,
[data-portal-theme="night"] .sector-team-person p,
[data-portal-theme="night"] .sector-team-person li,
[data-portal-theme="night"] .sector-team-roster .sector-section-head p,
[data-portal-theme="night"] .sector-card h3,
[data-portal-theme="night"] .sector-admin-card h3,
[data-portal-theme="night"] .sector-observation h3,
[data-portal-theme="night"] .sector-summary strong,
[data-portal-theme="night"] .sector-page label,
[data-portal-theme="night"] .sector-person-chip b {
  color: #f7faf6;
}

[data-portal-theme="night"] .sector-description,
[data-portal-theme="night"] .sector-reference,
[data-portal-theme="night"] .sector-observation-main p,
[data-portal-theme="night"] .sector-admin-head p {
  color: #d3dbd1;
}

[data-portal-theme="night"] .sector-hero-badge,
[data-portal-theme="night"] .sector-branch-filter,
[data-portal-theme="night"] .sector-page input,
[data-portal-theme="night"] .sector-page select,
[data-portal-theme="night"] .sector-page textarea {
  border-color: #526252;
  background: #111711;
  color: #f7faf6;
}

[data-portal-theme="night"] .sector-summary .is-warning,
[data-portal-theme="night"] .sector-summary .is-danger,
[data-portal-theme="night"] .sector-summary .is-ok,
[data-portal-theme="night"] .sector-card.is-checked {
  background: #202a20;
}