/* ═══════════════════════════════════════════════════════
   NextPe ONE — Shared Component Styles
   Colors: --npe-purple #5C2D91 · --npe-navy #1B3A6B · --npe-orange #E07B2A
   ═══════════════════════════════════════════════════════ */
:root {
  --npe-purple : #5C2D91;
  --npe-navy   : #1B3A6B;
  --npe-orange : #E07B2A;
  --npe-green  : #217346;
  --npe-red    : #C0392B;
  --npe-yellow : #F5A623;
  --npe-light  : #F4F4F8;
  --npe-muted  : #DDDDDD;
  --npe-grey   : #888888;
  --npe-text   : #1a1a2e;
}

/* ── Page wrapper ── */
.npe-page { position:relative; }

/* ── Cards ── */
.npe-card {
  background:#fff; border-radius:10px; border:1px solid var(--npe-muted);
  padding:20px; margin-bottom:20px;
}
.npe-card-title {
  font-size:14px; font-weight:700; color:var(--npe-navy);
  margin-bottom:16px; display:flex; align-items:center; gap:8px;
}

/* ── Module Tabs ── */
.npe-module-tabs {
  display:flex; border-bottom:2px solid var(--npe-muted);
  margin-bottom:14px; overflow-x:auto; gap:0;
}
.npe-module-tab {
  padding:10px 18px; font-size:13px; font-weight:600; color:var(--npe-grey);
  cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent;
  margin-bottom:-2px; transition:.15s;
}
.npe-module-tab:hover { color:var(--npe-navy); }
.npe-module-tab.active { color:var(--npe-purple); border-bottom-color:var(--npe-purple); }

/* ── Sub-tab row ── */
.npe-subtab-row {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.npe-subtabs { display:flex; }
.npe-sub-btn {
  padding:6px 18px; font-size:13px; font-weight:600; cursor:pointer;
  border:1.5px solid var(--npe-muted); background:#fff; color:var(--npe-grey);
  border-radius:0; transition:.15s;
}
.npe-sub-btn:first-child { border-radius:6px 0 0 6px; }
.npe-sub-btn:last-child  { border-radius:0 6px 6px 0; border-left:none; }
.npe-sub-btn.active      { background:var(--npe-purple); color:#fff; border-color:var(--npe-purple); }
.npe-actions-right       { display:flex; gap:10px; align-items:center; }

/* ── Filter bar ── */
.npe-filter-bar {
  display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap;
}
.npe-input-search { flex:1; min-width:220px; }

/* ── Buttons ── */
.npe-btn {
  padding:8px 18px; border-radius:6px; font-size:13px; font-weight:600;
  cursor:pointer; border:none; transition:.15s; display:inline-flex; align-items:center; gap:6px;
  text-decoration:none;
}
.npe-btn-primary { background:var(--npe-purple); color:#fff; }
.npe-btn-primary:hover { background:#4a2178; }
.npe-btn-success { background:var(--npe-green); color:#fff; }
.npe-btn-success:hover { background:#195e38; }
.npe-btn-danger  { background:var(--npe-red); color:#fff; }
.npe-btn-outline {
  background:transparent; border:1.5px solid var(--npe-muted); color:var(--npe-text);
}
.npe-btn-outline:hover { border-color:var(--npe-purple); color:var(--npe-purple); }
.npe-btn-sm  { padding:5px 12px; font-size:12px; }

/* ── Inputs ── */
.npe-input, .npe-select, .npe-textarea {
  padding:8px 12px; border:1.5px solid var(--npe-muted); border-radius:6px;
  font-size:13px; background:#fff; color:var(--npe-text); outline:none; width:100%;
  font-family:inherit;
}
.npe-input:focus, .npe-select:focus, .npe-textarea:focus { border-color:var(--npe-purple); }
.npe-input-mono { font-family:monospace; }
.npe-select-lg  { font-size:14px; padding:10px 14px; }
.npe-textarea   { resize:vertical; }
.npe-label      { font-size:12px; font-weight:600; color:var(--npe-navy); margin-bottom:4px; display:block; }
.npe-req        { color:var(--npe-red); }
.npe-hint       { font-size:11px; color:var(--npe-grey); margin-top:4px; line-height:1.6; }
.npe-error      { font-size:12px; color:var(--npe-red); margin-top:4px; }

/* ── Form grid ── */
.npe-form-grid    { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.npe-form-grid-3  { grid-template-columns:1fr 1fr 1fr; }
.npe-form-group   { display:flex; flex-direction:column; gap:4px; }
.npe-full         { grid-column:1 / -1; }
.npe-btn-row      { display:flex; gap:10px; align-items:center; margin-top:20px; }

/* ── Table ── */
.npe-tbl-wrap   { overflow-x:auto; }
.npe-table      { width:100%; border-collapse:collapse; }
.npe-table th   {
  background:var(--npe-light); padding:10px 14px; text-align:left;
  font-size:12px; font-weight:700; color:var(--npe-navy);
  border-bottom:2px solid var(--npe-muted); white-space:nowrap;
}
.npe-table td   { padding:10px 14px; border-bottom:1px solid #f0f0f4; font-size:13px; vertical-align:middle; }
.npe-table tr:hover td { background:#fafafe; }
.npe-table tr:last-child td { border-bottom:none; }
.npe-empty      { padding:40px; text-align:center; color:var(--npe-grey); }
.npe-pagination { padding:14px 20px; border-top:1px solid var(--npe-muted); }

/* ── Campaign cell ── */
.npe-campaign-cell { display:flex; align-items:flex-start; gap:8px; }
.npe-camp-icon     { color:var(--npe-navy); font-size:15px; line-height:1.3; flex-shrink:0; }
.npe-camp-id       { font-size:11px; font-weight:700; color:var(--npe-grey); }
.npe-camp-name     { font-size:13px; font-weight:600; color:var(--npe-navy); margin-top:1px; }
.npe-camp-tags     { display:flex; gap:10px; margin-top:4px; }
.npe-camp-code     { font-size:11px; color:var(--npe-grey); font-family:monospace; margin-top:3px; }
.tag-live          { font-size:10px; color:#217346; font-weight:700; }
.tag-draft         { font-size:10px; color:var(--npe-grey); font-weight:700; }
.tag-default       { font-size:10px; color:var(--npe-grey); font-weight:700; }
.npe-type-name     { font-size:13px; font-weight:600; }
.npe-type-sub      { font-size:11px; color:var(--npe-grey); margin-top:3px; }
.npe-site-id       { font-weight:700; color:var(--npe-navy); font-size:13px; }
.npe-validity-from, .npe-validity-to { font-size:12px; }
.npe-validity-to   { margin-top:2px; }

/* ── iOS Toggle ── */
.npe-ios-toggle    { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; }
.npe-ios-toggle input { opacity:0; width:0; height:0; }
.npe-ios-slider {
  position:absolute; inset:0; background:#ccc; border-radius:22px; transition:.25s;
}
.npe-ios-slider::before {
  content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
  background:white; border-radius:50%; transition:.25s;
}
.npe-ios-toggle input:checked + .npe-ios-slider { background:var(--npe-purple); }
.npe-ios-toggle input:checked + .npe-ios-slider::before { transform:translateX(18px); }

/* ── Action dropdown ── */
.npe-action-wrap  { position:relative; display:inline-block; }
.npe-dots-btn     { font-size:15px; letter-spacing:1px; padding:4px 10px; }
.npe-action-drop  {
  position:absolute; right:0; top:34px; z-index:200;
  background:#fff; border:1px solid var(--npe-muted); border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.13); min-width:220px; overflow:hidden;
}
.npe-action-item  {
  padding:10px 16px; font-size:13px; color:var(--npe-text); cursor:pointer;
  display:flex; align-items:center; gap:10px; border-bottom:1px solid #f0f0f4;
  text-decoration:none;
}
.npe-action-item:last-child { border-bottom:none; }
.npe-action-item:hover { background:#f5f0ff; color:var(--npe-purple); }

/* ── Wizard steps ── */
.npe-wizard-steps {
  display:flex; gap:0; margin-bottom:28px; border-radius:8px; overflow:hidden;
  border:1px solid var(--npe-muted); background:#fff;
}
.npe-wizard-step {
  flex:1; text-align:center; padding:12px 6px; border-bottom:3px solid var(--npe-muted);
  font-size:12px; font-weight:600; color:var(--npe-grey); cursor:pointer; transition:.15s;
}
.npe-wizard-step.active { border-bottom-color:var(--npe-purple); color:var(--npe-purple); }
.npe-wizard-step.done   { border-bottom-color:var(--npe-green); color:var(--npe-green); }
.npe-step-num {
  width:24px; height:24px; border-radius:50%; background:var(--npe-muted);
  color:var(--npe-grey); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin:0 auto 4px;
}
.npe-wizard-step.active .npe-step-num { background:var(--npe-purple); color:#fff; }
.npe-wizard-step.done   .npe-step-num { background:var(--npe-green); color:#fff; }
.npe-step-label { font-size:11px; }

/* ── Tag input ── */
.npe-tag-input {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  border:1.5px solid var(--npe-muted); border-radius:6px;
  padding:6px 10px; background:#fff; min-height:40px;
}
.npe-tag-input:focus-within { border-color:var(--npe-purple); }
.npe-tag {
  background:var(--npe-light); border-radius:4px; padding:3px 8px;
  font-size:12px; display:flex; align-items:center; gap:4px;
}
.npe-tag-remove { cursor:pointer; color:var(--npe-grey); font-size:11px; }
.npe-tag-remove:hover { color:var(--npe-red); }
.npe-tag-field { border:none; outline:none; font-size:13px; flex:1; min-width:150px; }

/* ── Radio group ── */
.npe-radio-group { display:flex; gap:20px; margin-top:6px; flex-wrap:wrap; }
.npe-radio { display:flex; align-items:center; gap:6px; font-weight:400; cursor:pointer; font-size:13px; }

/* ── Day picker ── */
.npe-day-picker { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.npe-day {
  padding:6px 12px; border:1.5px solid var(--npe-muted); border-radius:6px;
  font-size:12px; font-weight:700; cursor:pointer; transition:.15s;
  user-select:none;
}
.npe-day.active, .npe-day:has(input:checked) {
  background:var(--npe-purple); border-color:var(--npe-purple); color:#fff;
}

/* ── Date range row ── */
.npe-date-range { display:flex; align-items:center; gap:10px; }
.npe-date-sep   { font-weight:700; color:var(--npe-grey); white-space:nowrap; }

/* ── Rule Engine ── */
.npe-stage-block  { border:1.5px solid var(--npe-muted); border-radius:8px; margin-bottom:14px; overflow:hidden; }
.npe-stage-header {
  background:var(--npe-light); padding:10px 14px; display:flex;
  align-items:center; gap:8px; cursor:pointer;
}
.npe-stage-title  { font-weight:700; font-size:13px; }
.npe-stage-toggle { margin-left:auto; font-size:16px; }
.npe-stage-body   { padding:14px; }
.npe-rule-header  { font-size:12px; font-weight:700; color:var(--npe-navy); margin-bottom:10px; }
.npe-condition-row {
  display:flex; align-items:center; gap:6px; background:var(--npe-light);
  padding:8px 10px; border-radius:6px; margin-bottom:8px; flex-wrap:wrap;
}
.npe-cond-btns    { display:flex; gap:4px; flex-shrink:0; }
.npe-rule-add-row { margin-top:4px; }
.npe-action-block { background:#f0eaf8; border-radius:6px; padding:14px; margin-top:10px; }
.npe-btn-danger   { color:var(--npe-red) !important; }
.npe-text-purple  { color:var(--npe-purple); }
.npe-text-grey    { color:var(--npe-grey); }

/* ── Subvention ── */
.npe-subv-row     { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:12px; margin-bottom:10px; align-items:end; }
.npe-subv-total   { padding:8px 14px; background:var(--npe-light); border-radius:6px; font-size:14px; font-weight:700; margin-top:8px; }
.npe-subv-total.ok  { color:var(--npe-green); }
.npe-subv-total.err { color:var(--npe-red); }
.npe-section-title  { font-size:13px; font-weight:700; color:var(--npe-navy); }

/* ── Info / Warn boxes ── */
.npe-info-box { background:#fff8e8; border-left:4px solid var(--npe-orange); padding:10px 14px; border-radius:0 6px 6px 0; font-size:13px; margin:12px 0; color:#5c3d00; }
.npe-warn-box { background:#fff0f0; border-left:4px solid var(--npe-red);    padding:10px 14px; border-radius:0 6px 6px 0; font-size:13px; margin:12px 0; color:#7a1a1a; }
.npe-tip-box  { background:#f0faf4; border-left:4px solid var(--npe-green);  padding:10px 14px; border-radius:0 6px 6px 0; font-size:13px; margin:12px 0; color:#1a4d2e; }

/* ── Summary table ── */
.npe-summary-table { width:100%; border-collapse:collapse; }
.npe-detail-row    { border-bottom:1px solid #f0f0f4; }
.npe-detail-row:last-child { border-bottom:none; }
.npe-detail-label  { padding:9px 14px; font-size:13px; color:var(--npe-grey); width:260px; }
.npe-detail-value  { padding:9px 14px; font-size:13px; font-weight:600; color:var(--npe-text); text-align:right; }

/* ── Loading overlay ── */
.npe-loading-overlay {
  position:absolute; inset:0; background:rgba(255,255,255,.6); z-index:999;
  display:flex; align-items:center; justify-content:center;
}
.npe-spinner {
  width:36px; height:36px; border:3px solid var(--npe-muted);
  border-top-color:var(--npe-purple); border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── SR only ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
/* ── Approval queue ── */
.npe-appr-card {
  border:1px solid var(--npe-muted); border-radius:8px; padding:16px; margin-bottom:12px;
  background:#fff; display:flex; gap:14px; align-items:flex-start;
}
.npe-appr-card.npe-appr-escalated { border-color:var(--npe-red); }
.npe-appr-type { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.npe-checkbox-wrap { display:flex; align-items:center; padding-top:4px; }

/* ── Status badges ── */
.npe-badge-status { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.npe-s-active    { background:#d4edda; color:#155724; }
.npe-s-draft     { background:#e2e8f0; color:#475569; }
.npe-s-submitted { background:#fff3cd; color:#856404; }
.npe-s-approved  { background:#cfe2ff; color:#084298; }
.npe-s-paused    { background:#ffe5b4; color:#8b4513; }
.npe-s-closed    { background:#f8d7da; color:#721c24; }

/* ── Checklist ── */
.npe-checklist { list-style:none; display:flex; flex-direction:column; gap:8px; padding:0; }
.npe-checklist li { display:flex; align-items:flex-start; gap:10px; font-size:13px; }
.npe-chk { width:16px; height:16px; border:2px solid var(--npe-muted); border-radius:3px; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:10px; }
.npe-chk.done { background:var(--npe-green); border-color:var(--npe-green); color:#fff; }

/* ── Timeline ── */
.npe-timeline { display:flex; flex-direction:column; gap:0; }
.npe-tl-item { display:flex; gap:14px; padding:14px 0; position:relative; }
.npe-tl-item:not(:last-child)::before { content:''; position:absolute; left:11px; top:36px; bottom:0; width:2px; background:#d1fae5; }
.npe-tl-dot { width:24px; height:24px; border-radius:50%; background:var(--npe-green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; margin-top:2px; }
.npe-tl-label { font-size:12px; font-weight:700; color:var(--npe-navy); letter-spacing:.5px; }
.npe-tl-meta { font-size:12px; color:var(--npe-grey); margin-top:2px; }

/* ── Read-only box ── */
.npe-readonly-box { border:1px solid var(--npe-muted); border-radius:6px; padding:10px 12px; min-height:42px; font-size:13px; background:var(--npe-light); color:var(--npe-text); }

/* ── Row layout ── */
.npe-row { display:flex; gap:16px; align-items:flex-start; }
.npe-fs-12 { font-size:12px; }
.npe-text-muted { color:var(--npe-grey); }
.npe-link { color:var(--npe-purple); text-decoration:underline; cursor:pointer; }
/* ── EMI / BIN ── */
.npe-tenure-tag { display:inline-block; background:var(--npe-light); border-radius:4px; padding:2px 8px; font-size:11px; font-weight:700; color:var(--npe-navy); margin:1px; }
.npe-bin-chip   { display:inline-block; background:#e8f0fe; color:var(--npe-navy); border-radius:4px; padding:2px 8px; font-size:11px; font-weight:600; font-family:monospace; margin:1px; }
.npe-fw-bold    { font-weight:700; }
.npe-tab-bar    { display:flex; border-bottom:2px solid var(--npe-muted); margin-bottom:20px; }
.npe-tab        { padding:9px 18px; font-size:13px; font-weight:600; color:var(--npe-grey); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:.15s; }
.npe-tab:hover  { color:var(--npe-navy); }
.npe-tab.active { color:var(--npe-purple); border-bottom-color:var(--npe-purple); }
.npe-input-mono { font-family:monospace; }
/* ── Modal ── */
.npe-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000; display:flex; align-items:center; justify-content:center; }
.npe-modal         { background:#fff; border-radius:12px; width:560px; max-width:95vw; box-shadow:0 8px 32px rgba(0,0,0,.18); }
.npe-modal-header  { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--npe-muted); }
/* ── KPI Cards ── */
.npe-kpi-grid { display: grid; gap: 1rem; }
.npe-kpi-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s; }
.npe-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.npe-kpi-card.npe-kpi-escalated { border-color: #FCA5A5; background: #FFF5F5; }
.npe-kpi-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.npe-kpi-body { flex: 1; min-width: 0; }
.npe-kpi-label { font-size: .78rem; color: #6B7280; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.npe-kpi-value { font-size: 1.75rem; font-weight: 700; color: #1B3A6B; line-height: 1.2; margin: .1rem 0; }
.npe-kpi-sub { font-size: .75rem; color: #9CA3AF; }

/* ── Fix: npe-select single arrow, no browser default ── */
.npe-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
  cursor: pointer;
}
.npe-select:focus {
  border-color: var(--npe-purple);
  box-shadow: 0 0 0 3px rgba(92,45,145,.15);
}
/* Override any Tailwind/Filament multi-arrow repeating backgrounds on selects inside npe- classes */
.npe-page select, .npe-card select, .npe-filter-bar select {
  background-repeat: no-repeat !important;
}