/*
  MOE UI Layer (KPI-inspired)
  -------------------------------------------------
  This file ports the visual language used in the KPI-Team system
  (cards, nav, pills, buttons) to the Beneficiaries Counter System.
  It is designed to sit on top of Bootstrap (if used) and app.css.
*/

:root{
  /* Reuse BCS palette when available, fallback to KPI palette */
  --ui-primary: var(--moe-support-green, #07a869);
  --ui-primary-700: color-mix(in srgb, var(--ui-primary) 84%, #000);
  --ui-blue: var(--moe-support-blue, #3d7eb9);
  --ui-navy: var(--moe-primary, #15445a);
  --ui-sand: var(--moe-accent, #c1b489);

  --ui-bg: var(--moe-bg, #f5f8f7);
  --ui-card: var(--moe-surface, #fff);
  --ui-line: var(--moe-border, rgba(11,31,41,.12));
  --ui-text: var(--moe-ink, #0b1f2a);
  --ui-muted: var(--moe-ink-soft, rgba(11,31,41,.72));

  --ui-radius: 18px;
  --ui-shadow: 0 10px 28px rgba(21,68,90,.10);
}

/* RTL selects: keep the dropdown arrow from covering text */
[dir="rtl"] .form-select{
  padding-left: 2.4rem;
  padding-right: .85rem;
  background-position: left .85rem center;
}

/* Print friendliness for HTML reports (avoid clipping/overflow) */
@media print{
  .no-print{ display:none !important; }
  .card, .ui-card{ break-inside: avoid; page-break-inside: avoid; }
  table{ width: 100% !important; }
  th, td{ word-break: break-word; }
}

/* Container helper */
.ui-container{max-width:1200px;margin:0 auto;padding:18px}

/* KPI-like top navigation */
.ui-nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:14px 16px;
  border:1px solid var(--ui-line);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow);
}

body[data-theme="dark"] .ui-nav,
.kiosk-body[data-theme="dark"] .ui-nav,
body[data-theme="navy"] .ui-nav,
.kiosk-body[data-theme="navy"] .ui-nav,
body[data-theme="slate"] .ui-nav,
.kiosk-body[data-theme="slate"] .ui-nav,
body[data-theme="teal"] .ui-nav,
.kiosk-body[data-theme="teal"] .ui-nav{
  background:rgba(11,37,48,.86);
}

.ui-nav:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ui-primary) 12%, transparent), rgba(61,126,185,.10));
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  padding:1px;
  box-sizing:border-box;
}

.ui-brand{display:flex;align-items:center;gap:12px;min-width:260px}
.ui-logoDot{
  width:14px;height:14px;border-radius:50%;
  background:conic-gradient(from 180deg, var(--ui-primary), var(--ui-blue), var(--ui-primary));
  box-shadow:0 0 0 6px color-mix(in srgb, var(--ui-primary) 12%, transparent);
}
.ui-logoImg{
  width:44px;height:44px;object-fit:contain;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--ui-line);
  padding:6px;
}
.ui-brandText{display:flex;flex-direction:column;line-height:1.1}
.ui-brandTitle{font-weight:900;color:var(--ui-navy)}
.ui-brandSub{font-size:12px;color:var(--ui-muted)}

.ui-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ui-link{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--ui-muted);
  transition:.15s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ui-link:hover{
  border-color:color-mix(in srgb, var(--ui-primary) 35%, transparent);
  background:color-mix(in srgb, var(--ui-primary) 6%, transparent);
  color:var(--ui-navy);
}

.ui-userBox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.ui-pill{
  padding:6px 10px;
  border:1px solid var(--ui-line);
  border-radius:999px;
  color:var(--ui-muted);
  background:rgba(255,255,255,.75);
}

/* Buttons - usable without Bootstrap */
.ui-btn{
  border:none;
  cursor:pointer;
  padding:9px 12px;
  border-radius:14px;
  background:#fff;
  color:var(--ui-navy);
  border:1px solid var(--ui-line);
  transition:.15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
}
.ui-btn:hover{
  border-color:color-mix(in srgb, var(--ui-primary) 40%, transparent);
  background:color-mix(in srgb, var(--ui-primary) 6%, transparent);
  color:var(--ui-primary);
}
.ui-btnGood{
  background:var(--ui-primary);
  color:#fff;
  border:1px solid var(--ui-primary);
  box-shadow:0 10px 18px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}
.ui-btnGood:hover{
  background:var(--ui-primary-700);
  border-color:var(--ui-primary-700);
  color:#fff;
}
.ui-btnDanger{
  background:#fff;
  color:#b91c1c;
  border:1px solid rgba(239,68,68,.35);
}
.ui-btnDanger:hover{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.5);
  color:#991b1b;
}

/* Cards */
.ui-card{
  border:1px solid var(--ui-line);
  background:var(--ui-card);
  border-radius:var(--ui-radius);
  padding:14px;
  box-shadow:var(--ui-shadow);
}

/* Lightweight toast */
.ui-toast{
  position:fixed;
  top:16px;
  right:16px;
  left:auto;
  z-index: 9999;
  min-width: 240px;
  max-width: 520px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  display:none;
}
body[data-theme="dark"] .ui-toast{
  position:fixed;
  top:16px;
  right:16px;
  left:auto;
  z-index: 9999;
  min-width: 240px;
  max-width: 520px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  display:none;
}

/* Small icon chip */
.ui-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  color: var(--ui-navy);
}

@media(max-width:1000px){
  .ui-brand{min-width:auto}
  .ui-nav{flex-wrap:wrap}
  .ui-links{justify-content:flex-start}
}


/* Admin chips */
.ui-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .65rem;border:1px solid rgba(0,0,0,.12);border-radius:999px;background:#fff;cursor:pointer;user-select:none}
.ui-chip input{margin:0}
body[data-theme="dark"] .ui-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}