/* Servora – Frontend Dashboard */
:root {
  --srv-primary:      #4f46e5;
  --srv-primary-dark: #3730a3;
  --srv-success:      #10b981;
  --srv-warning:      #f59e0b;
  --srv-danger:       #ef4444;
  --srv-muted:        #6b7280;
  --srv-border:       #e5e7eb;
  --srv-card:         #ffffff;
  --srv-text:         #111827;
  --srv-text-2:       #6b7280;
  --srv-radius:       14px;
  --srv-shadow:       0 1px 4px rgba(0,0,0,.07), 0 4px 20px rgba(0,0,0,.06);
}

.servora-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--srv-text);
}

/* Header */
.servora-dash-header { margin-bottom: 28px; }
.servora-dash-title  { font-size: 28px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.5px; }
.servora-dash-sub    { font-size: 15px; color: var(--srv-text-2); margin: 0; }

/* Grid */
.servora-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Card */
.servora-card {
  background: var(--srv-card);
  border-radius: var(--srv-radius);
  box-shadow: var(--srv-shadow);
  border: 1px solid var(--srv-border);
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
}
.servora-card:hover { transform: translateY(-3px); box-shadow: 0 6px 28px rgba(0,0,0,.10); }
.servora-card--active    { border-top: 3px solid var(--srv-success); }
.servora-card--expiring  { border-top: 3px solid var(--srv-warning); }
.servora-card--expired   { border-top: 3px solid var(--srv-danger); }
.servora-card--suspended { border-top: 3px solid var(--srv-muted); }

.servora-card__top  { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.servora-card__cat  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--srv-text-2); }
.servora-card__body { padding: 14px 20px 16px; flex: 1; }
.servora-card__name { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.servora-card__foot { padding: 0 20px 20px; }

/* Badges */
.servora-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.servora-badge--active    { background: #d1fae5; color: #065f46; }
.servora-badge--expiring  { background: #fef3c7; color: #92400e; }
.servora-badge--expired   { background: #fee2e2; color: #991b1b; }
.servora-badge--suspended { background: #f3f4f6; color: #374151; }

/* Dates */
.servora-card__dates { display: flex; gap: 20px; margin-bottom: 14px; }
.servora-card__dl { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--srv-text-2); margin-bottom: 2px; }
.servora-card__dv { font-size: 13px; font-weight: 500; }

/* Progress */
.servora-countdown { margin-bottom: 12px; }
.servora-countdown__row { display: flex; justify-content: space-between; font-size: 12px; color: var(--srv-text-2); margin-bottom: 5px; }
.servora-progress { height: 6px; background: var(--srv-border); border-radius: 3px; overflow: hidden; }
.servora-progress__fill { height: 100%; background: var(--srv-success); border-radius: 3px; transition: width .4s; }
.servora-bar--warning { background: var(--srv-warning); }
.servora-bar--danger  { background: var(--srv-danger); }

/* Notice */
.servora-notice { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #92400e; margin-bottom: 12px; }

/* Meta */
.servora-meta { border-top: 1px solid var(--srv-border); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.servora-meta__row { display: flex; justify-content: space-between; font-size: 13px; }
.servora-meta__key { color: var(--srv-text-2); }
.servora-meta__val { font-weight: 500; word-break: break-all; text-align: right; max-width: 55%; }

/* Button */
.servora-btn { display: inline-block; background: var(--srv-primary); color: #fff !important; text-decoration: none; padding: 11px 24px; border-radius: 9px; font-size: 14px; font-weight: 700; transition: background .15s; border: none; cursor: pointer; }
.servora-btn:hover { background: var(--srv-primary-dark); }
.servora-btn--block { display: block; text-align: center; }

/* Empty state */
.servora-empty { text-align: center; padding: 64px 24px; background: var(--srv-card); border-radius: var(--srv-radius); box-shadow: var(--srv-shadow); }
.servora-empty__icon { font-size: 48px; margin-bottom: 16px; }
.servora-empty h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.servora-empty p  { color: var(--srv-text-2); margin-bottom: 24px; }

@media (max-width: 640px) {
  .servora-grid { grid-template-columns: 1fr; }
  .servora-dash-title { font-size: 22px; }
}