/**
 * widget-base.css
 * Общий iOS-style вид для всех виджетов. Подключать на обоих доменах:
 * <link rel="stylesheet" href="https://widgets.clownades.com/assets/widget-base.css">
 */

:root {
  --widget-radius: 22px;
  --widget-gap: 16px;
  --widget-bg: rgba(255, 255, 255, 0.06);
  --widget-border: rgba(255, 255, 255, 0.08);
  --widget-text: #ffffff;
  --widget-text-dim: rgba(255, 255, 255, 0.6);
  --grid-row-height: 170px;
}

body.dashboard-body {
  background: #0b0b0d;
  color: var(--widget-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  margin: 0;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: var(--grid-row-height);
  grid-auto-flow: dense;
  gap: var(--widget-gap);
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.widget {
  position: relative;
  border-radius: var(--widget-radius);
  background: var(--widget-bg);
  border: 1px solid var(--widget-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}

.widget:hover {
  transform: translateY(-2px);
}

.widget-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.widget-error {
  padding: 16px;
  color: #ff6b6b;
  font-size: 13px;
}

/* Размерные классы — span в CSS Grid */
.widget[data-size="1x1"] { grid-column: span 1; grid-row: span 1; }
.widget[data-size="2x1"] { grid-column: span 2; grid-row: span 1; }
.widget[data-size="3x1"] { grid-column: span 3; grid-row: span 1; }
.widget[data-size="1x2"] { grid-column: span 1; grid-row: span 2; }
.widget[data-size="2x2"] { grid-column: span 2; grid-row: span 2; }
.widget[data-size="3x2"] { grid-column: span 3; grid-row: span 2; }
.widget[data-size="3x3"] { grid-column: span 3; grid-row: span 3; }

/* Общие внутренние элементы, которые можно использовать в template_html виджетов */
.w-title { font-size: 14px; font-weight: 600; color: var(--widget-text-dim); }
.w-value { font-size: 26px; font-weight: 700; margin-top: 4px; }
.w-inner { padding: 16px; height: 100%; box-sizing: border-box; }

@media (max-width: 640px) {
  .dashboard-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
  :root { --grid-row-height: 110px; }
}