/* ============================================================
   TZ eSIM Data Dashboard — Travixor Global
   Color Palette: Olive/Army Green (from brand color image)
   Primary: #4a5e35 | Dark BG: #1a2010 | Accent: #7a9a52
   ============================================================ */

/* ── CSS VARIABLES ── */
:root {
  --tz-primary:     #4a5e35;
  --tz-primary-lt:  #7a9a52;
  --tz-primary-glow:rgba(74,94,53,0.2);
  --tz-bg-dark:     #1a2010;
  --tz-bg-card:     #252f18;
  --tz-bg-card2:    #2d3a1e;
  --tz-text:        #f5f5e8;
  --tz-text-muted:  #a8b898;
  --tz-text-dim:    #6b7a5a;
  --tz-green:       #5a9e3a;
  --tz-green-bg:    rgba(90,158,58,0.12);
  --tz-orange:      #c8841a;
  --tz-orange-bg:   rgba(200,132,26,0.12);
  --tz-red:         #c0392b;
  --tz-red-bg:      rgba(192,57,43,0.12);
  --tz-border:      rgba(74,94,53,0.25);
  --tz-border-act:  rgba(122,154,82,0.5);
  --tz-shadow:      0 4px 20px rgba(0,0,0,0.3);
  --tz-radius:      14px;
}

/* ── BASE ── */
.tz-dd {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2d3a1e;
  max-width: 840px;
}

/* ── HEADER ── */
.tz-dd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.tz-dd-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a2010 !important;
  margin: 0 0 4px !important;
  letter-spacing: -.3px;
}
.tz-dd-subtitle {
  font-size: 13px;
  color: #6b7a5a;
  margin: 0;
}
.tz-dd-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tz-dd-updated {
  font-size: 12px;
  color: #a8b898;
}
.tz-dd-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0f3ec;
  border: 1.5px solid #c8d4b4;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #4a5e35;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.tz-dd-refresh-btn:hover {
  background: #e2ebd4;
  border-color: #7a9a52;
}
.tz-dd-refresh-btn.spinning svg {
  animation: tz-spin .8s linear infinite;
}
@keyframes tz-spin { to { transform: rotate(360deg); } }

/* ── SUMMARY CARD ── */
.tz-dd-summary-card {
  background: linear-gradient(135deg, #1a2010 0%, #2d3a1e 60%, #1a2810 100%);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  border: 1px solid rgba(122,154,82,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  position: relative;
  overflow: hidden;
}
/* Subtle pattern overlay */
.tz-dd-summary-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(122,154,82,0.1) 0%, transparent 60%);
  pointer-events: none;
}

/* Donut */
.tz-dd-donut-wrap {
  position: relative;
  flex-shrink: 0;
}
.tz-dd-donut-svg {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
}
.tz-dd-donut-track {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 14;
}
.tz-dd-donut-fill {
  fill: none;
  stroke: #7a9a52;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dasharray 1.2s ease;
  filter: drop-shadow(0 0 6px rgba(122,154,82,0.5));
}
.tz-dd-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.tz-dd-donut-val {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #f5f5e8;
  line-height: 1;
}
.tz-dd-donut-sub {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  display: block;
  margin-top: 4px;
  letter-spacing: .3px;
}

/* Summary stats */
.tz-dd-summary-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
}
.tz-dd-stat-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
}
.tz-dd-stat-divider {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,.1);
}
.tz-dd-stat-val {
  font-size: 26px;
  font-weight: 800;
  color: #f5f5e8;
  display: block;
  letter-spacing: -.5px;
}
.tz-dd-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-top: 5px;
  display: block;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── FILTER TABS ── */
.tz-dd-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.tz-dd-tab {
  background: #f0f3ec;
  border: 1.5px solid #d4dcca;
  border-radius: 100px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7a5a;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.tz-dd-tab:hover {
  background: #e2ebd4;
  color: #4a5e35;
  border-color: #7a9a52;
}
.tz-dd-tab.active {
  background: #4a5e35;
  border-color: #4a5e35;
  color: #fff;
}

/* ── eSIM CARDS ── */
.tz-dd-esim-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tz-dd-esim-card {
  background: #fff;
  border: 1.5px solid #dce6cc;
  border-radius: var(--tz-radius);
  padding: 20px 22px;
  transition: border-color .2s, box-shadow .2s;
}
.tz-dd-esim-card:hover {
  border-color: #7a9a52;
  box-shadow: 0 4px 20px rgba(74,94,53,0.1);
}

/* Card head */
.tz-dd-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.tz-dd-card-flag {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #f0f3ec;
  border: 2px solid #dce6cc;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.tz-dd-card-info { flex: 1; min-width: 0; }
.tz-dd-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a2010;
}
.tz-dd-card-plan {
  font-size: 12px;
  color: #a8b898;
  margin-top: 2px;
}
.tz-dd-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* Status badges */
.tz-dd-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: .2px;
}
.tz-status-active   { background: rgba(90,158,58,.12); color: #3d7a1e; border: 1px solid rgba(90,158,58,.2); }
.tz-status-expired  { background: rgba(192,57,43,.1);  color: #a0291c; border: 1px solid rgba(192,57,43,.2); }
.tz-status-pending  { background: rgba(200,132,26,.1); color: #8a5c10; border: 1px solid rgba(200,132,26,.2); }
.tz-status-cancelled{ background: rgba(107,122,90,.1); color: #6b7a5a; border: 1px solid rgba(107,122,90,.2); }

.tz-dd-days-left {
  font-size: 12px;
  color: #6b7a5a;
  font-weight: 600;
}
.tz-days-urgent { color: #c0392b !important; }

/* Usage bar */
.tz-dd-usage-section { margin-bottom: 16px; }
.tz-dd-usage-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7a5a;
  margin-bottom: 6px;
  font-weight: 600;
}
.tz-dd-bar-track {
  height: 8px;
  background: #e8edd8;
  border-radius: 100px;
  overflow: hidden;
}
.tz-dd-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a5e35, #7a9a52);
  border-radius: 100px;
  width: 0;
  transition: width 1.2s ease;
}
.tz-bar-warn   { background: linear-gradient(90deg, #a06010, #c8841a) !important; }
.tz-bar-danger { background: linear-gradient(90deg, #8b1a1a, #c0392b) !important; }

.tz-dd-usage-sub {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #a8b898;
  margin-top: 5px;
}
.tz-dd-upd-time { font-style: italic; }

/* Data numbers grid */
.tz-dd-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.tz-dd-data-cell {
  background: #f5f8f0;
  border: 1px solid #e0eacc;
  border-radius: 10px;
  padding: 13px;
  text-align: center;
}
.tz-dd-data-val {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #1a2010;
}
.tz-dd-data-lbl {
  display: block;
  font-size: 10px;
  color: #a8b898;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 3px;
}
.tz-clr-accent { color: #4a5e35 !important; }
.tz-clr-green  { color: #3d7a1e !important; }
.tz-clr-orange { color: #c8841a !important; }
.tz-clr-red    { color: #c0392b !important; }

/* Unlimited / pending */
.tz-dd-unlimited-badge {
  background: rgba(74,94,53,.08);
  border: 1.5px solid rgba(74,94,53,.2);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  color: #4a5e35;
  font-weight: 600;
  margin-bottom: 14px;
}
.tz-dd-pending-msg {
  background: #fffbf0;
  border: 1px solid #f0d878;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  color: #7a5c10;
  margin-bottom: 14px;
}

/* ICCID */
.tz-dd-iccid {
  font-size: 11px;
  color: #c8d4b4;
  margin-bottom: 14px;
}
.tz-dd-iccid code {
  font-size: 11px;
  color: #a8b898;
  font-family: 'Courier New', monospace;
}

/* Action buttons */
.tz-dd-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tz-dd-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #4a5e35;
  color: #fff !important;
  border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 13px;
  font-weight: 700; cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, transform .1s;
  font-family: inherit;
}
.tz-dd-btn-primary:hover {
  background: #3a4e28;
  transform: translateY(-1px);
  color: #fff !important;
}
.tz-dd-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f5f8f0;
  color: #4a5e35 !important;
  border: 1.5px solid #c8d4b4; border-radius: 8px;
  padding: 10px 16px; font-size: 13px;
  font-weight: 600; cursor: pointer;
  text-decoration: none !important;
  transition: all .15s;
  font-family: inherit;
}
.tz-dd-btn-secondary:hover {
  background: #e2ebd4;
  border-color: #7a9a52;
  color: #3a4e28 !important;
}

/* Empty state */
.tz-dd-empty {
  text-align: center;
  padding: 56px 24px;
  background: #f5f8f0;
  border-radius: var(--tz-radius);
  border: 2px dashed #c8d4b4;
}
.tz-dd-empty-icon { font-size: 48px; margin-bottom: 12px; }
.tz-dd-empty h3 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 8px; color: #1a2010;
}
.tz-dd-empty p {
  font-size: 14px; color: #6b7a5a; margin: 0 0 20px;
}

/* Copy button feedback */
.tz-dd-copy-btn.copied {
  background: #f0fdf0; border-color: #3d7a1e; color: #3d7a1e;
}

/* Footnote */
.tz-dd-footnote {
  font-size: 12px;
  color: #c8d4b4;
  text-align: center;
  margin-top: 20px;
  font-style: italic;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .tz-dd-summary-card { flex-direction: column; padding: 20px; }
  .tz-dd-summary-stats { width: 100%; justify-content: space-around; }
  .tz-dd-stat-block { padding: 0 14px; }
  .tz-dd-data-grid { grid-template-columns: 1fr 1fr; }
  .tz-dd-card-head { flex-wrap: wrap; }
  .tz-dd-card-meta { align-items: flex-start; }
}
@media (max-width: 400px) {
  .tz-dd-filter-tabs { gap: 4px; }
  .tz-dd-tab { padding: 6px 14px; font-size: 12px; }
}