/* =============================================================
   BERG DESIGN SYSTEM — CSS compartilhado entre apps da plataforma
   Importar via: <link rel="stylesheet" href="/_assets/berg.css" />
   ============================================================= */

/* ---------- TOKENS (CSS variables) ---------- */
:root {
  /* Brand — sage green (Church/Corp) */
  --berg-primary: #2d8a4f;          /* sage green principal */
  --berg-primary-hover: #1f6e3c;
  --berg-primary-soft: rgba(45, 138, 79, 0.10);
  --berg-primary-border: rgba(45, 138, 79, 0.30);
  --berg-primary-fg: #ffffff;

  /* Accent secundário (azul informativo, p/ links) */
  --berg-accent: #3a7bd5;
  --berg-accent-hover: #2d63ad;

  /* Neutros */
  --berg-bg: #f7f8fb;
  --berg-bg-elev: #ffffff;
  --berg-card: #ffffff;
  --berg-border: #e3e6ee;
  --berg-border-strong: #c9cdd5;
  --berg-text: #1a1d24;
  --berg-text-dim: #3a4150;
  --berg-muted: #6b7280;

  /* Status */
  --berg-success: #16a34a;
  --berg-success-soft: rgba(22, 163, 74, 0.10);
  --berg-warn: #d97706;
  --berg-warn-soft: rgba(217, 119, 6, 0.10);
  --berg-danger: #dc2626;
  --berg-danger-soft: rgba(220, 38, 38, 0.10);
  --berg-info: #2563eb;
  --berg-info-soft: rgba(37, 99, 235, 0.10);

  /* Geometria */
  --berg-radius-sm: 6px;
  --berg-radius: 10px;
  --berg-radius-lg: 14px;
  --berg-radius-pill: 999px;

  /* Tipografia */
  --berg-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --berg-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Sombras */
  --berg-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --berg-shadow: 0 4px 12px rgba(0,0,0,.06);
  --berg-shadow-lg: 0 12px 32px rgba(0,0,0,.10);
}

@media (prefers-color-scheme: dark) {
  :root {
    --berg-bg: #0f1115;
    --berg-bg-elev: #171a21;
    --berg-card: #171a21;
    --berg-border: #2a2f3a;
    --berg-border-strong: #3a4150;
    --berg-text: #e6e8ee;
    --berg-text-dim: #c6cad3;
    --berg-muted: #9aa3b2;
    --berg-primary: #4caf6d;
    --berg-primary-hover: #5fbf7e;
    --berg-primary-soft: rgba(76, 175, 109, 0.14);
    --berg-primary-border: rgba(76, 175, 109, 0.40);
  }
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--berg-bg);
  color: var(--berg-text);
  font-family: var(--berg-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--berg-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }

/* ---------- LAYOUT ---------- */
.berg-wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.berg-wrap-narrow { max-width: 720px; margin: 0 auto; padding: 24px; }

/* ---------- APP HEADER (padrão Day Tracker)
   Título grande à esquerda + breadcrumb "← Berg" abaixo
   Direita: pills/botões de conta + ações
   Embaixo (opcional): nav tabs
   ---------- */
.berg-app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
  max-width: 1280px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.berg-app-header .title-block h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--berg-text);
}
.berg-app-header .title-block .breadcrumb {
  margin-top: 2px;
  font-size: 13px;
}
.berg-app-header .title-block .breadcrumb a {
  color: var(--berg-accent);
  text-decoration: none;
}
.berg-app-header .title-block .breadcrumb a:hover { text-decoration: underline; }
.berg-app-header .title-block .sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--berg-muted);
}
.berg-app-header .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.berg-app-header .user-pill {
  background: var(--berg-card);
  border: 1px solid var(--berg-border);
  border-radius: var(--berg-radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  color: var(--berg-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.berg-app-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px 24px 0;
  max-width: 1280px;
  margin: 0 auto;
  border-bottom: 1px solid var(--berg-border);
}
.berg-app-tabs button,
.berg-app-tabs a {
  background: transparent;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  color: var(--berg-muted);
  font-size: 13px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.berg-app-tabs button:hover,
.berg-app-tabs a:hover {
  color: var(--berg-text);
}
.berg-app-tabs .active,
.berg-app-tabs .active:hover {
  color: var(--berg-primary);
  border-bottom-color: var(--berg-primary);
}
.berg-app-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}

/* ---------- APP SWITCHER (grid 9-pontos → dropdown de apps Berg)
   Uso:
   <div class="berg-app-switcher" id="appsw">
     <button class="trigger" aria-label="Apps Berg">⊞</button>
     <div class="menu">
       <div class="group-label">Suite</div>
       <a href="/tasktracker/" data-app="tasktracker">📋 Task Tracker</a>
       ...
     </div>
   </div>
   Toggle: clica no trigger ou fora pra fechar. Script abaixo é genérico.
   ---------- */
.berg-app-switcher { position: relative; display: inline-block; }
.berg-app-switcher > .trigger {
  background: var(--berg-card);
  border: 1px solid var(--berg-border);
  border-radius: 8px;
  width: 34px; height: 34px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  color: var(--berg-muted);
}
.berg-app-switcher > .trigger:hover { color: var(--berg-text); border-color: var(--berg-primary); }
.berg-app-switcher > .menu {
  display: none;
  position: absolute;
  top: 40px; right: 0;
  background: var(--berg-card);
  border: 1px solid var(--berg-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  min-width: 220px;
  padding: 6px;
  z-index: 1000;
}
.berg-app-switcher.open > .menu { display: block; }
.berg-app-switcher > .menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; color: var(--berg-text);
  text-decoration: none;
}
.berg-app-switcher > .menu a:hover { background: var(--berg-bg); }
.berg-app-switcher > .menu a.current { background: var(--berg-primary); color: #fff; }
.berg-app-switcher > .menu .group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--berg-muted); padding: 8px 12px 2px; font-weight: 700;
}
.berg-app-switcher > .menu .sep { border-top: 1px solid var(--berg-border); margin: 4px 0; }

/* ---------- TOPBAR (compact — pra apps tipo storefront/admin) ---------- */
.berg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  background: var(--berg-bg-elev);
  border-bottom: 1px solid var(--berg-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.berg-topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--berg-text);
  text-decoration: none;
  font-size: 15px;
}
.berg-topbar .brand .mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--berg-primary);
  color: var(--berg-primary-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.berg-topbar .nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.berg-topbar .nav button,
.berg-topbar .nav a {
  background: transparent;
  border: none;
  border-radius: var(--berg-radius);
  padding: 7px 14px;
  cursor: pointer;
  color: var(--berg-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.berg-topbar .nav button:hover,
.berg-topbar .nav a:hover {
  background: var(--berg-primary-soft);
  color: var(--berg-text);
}
.berg-topbar .nav .active,
.berg-topbar .nav .active:hover {
  background: var(--berg-primary-soft);
  color: var(--berg-primary);
}
.berg-topbar .right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--berg-muted);
}

/* ---------- CARDS ---------- */
.berg-card {
  background: var(--berg-card);
  border: 1px solid var(--berg-border);
  border-radius: var(--berg-radius-lg);
  padding: 22px;
  box-shadow: var(--berg-shadow-sm);
}
.berg-card + .berg-card { margin-top: 14px; }
.berg-card h2 {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--berg-text);
}

/* ---------- BUTTONS ---------- */
.berg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--berg-card);
  color: var(--berg-text);
  border: 1px solid var(--berg-border);
  border-radius: var(--berg-radius);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.12s;
  text-decoration: none;
}
.berg-btn:hover:not(:disabled) {
  border-color: var(--berg-primary-border);
  background: var(--berg-primary-soft);
}
.berg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.berg-btn.primary {
  background: var(--berg-primary);
  color: var(--berg-primary-fg);
  border-color: var(--berg-primary);
}
.berg-btn.primary:hover:not(:disabled) {
  background: var(--berg-primary-hover);
  border-color: var(--berg-primary-hover);
}
.berg-btn.danger {
  color: var(--berg-danger);
  border-color: var(--berg-danger-soft);
}
.berg-btn.danger:hover:not(:disabled) {
  background: var(--berg-danger-soft);
}
.berg-btn.sm { padding: 5px 10px; font-size: 12px; }
.berg-btn.lg { padding: 11px 22px; font-size: 14px; }

/* ---------- INPUTS ---------- */
.berg-input,
.berg-select,
.berg-textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--berg-bg-elev);
  color: var(--berg-text);
  border: 1px solid var(--berg-border);
  border-radius: var(--berg-radius);
  font-family: inherit;
}
.berg-input:focus,
.berg-select:focus,
.berg-textarea:focus {
  outline: 2px solid var(--berg-primary-border);
  outline-offset: -1px;
  border-color: var(--berg-primary);
}
.berg-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--berg-muted);
  margin-bottom: 4px;
}

/* ---------- BADGES / PILLS ---------- */
.berg-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--berg-radius-pill);
  background: var(--berg-primary-soft);
  color: var(--berg-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--berg-primary-border);
}
.berg-pill.muted {
  background: var(--berg-bg);
  color: var(--berg-muted);
  border-color: var(--berg-border);
}
.berg-pill.success {
  background: var(--berg-success-soft);
  color: var(--berg-success);
  border-color: var(--berg-success-soft);
}
.berg-pill.warn {
  background: var(--berg-warn-soft);
  color: var(--berg-warn);
  border-color: var(--berg-warn-soft);
}
.berg-pill.danger {
  background: var(--berg-danger-soft);
  color: var(--berg-danger);
  border-color: var(--berg-danger-soft);
}
.berg-pill.info {
  background: var(--berg-info-soft);
  color: var(--berg-info);
  border-color: var(--berg-info-soft);
}

/* ---------- MESSAGES ---------- */
.berg-msg {
  padding: 9px 12px;
  border-radius: var(--berg-radius);
  font-size: 13px;
  border: 1px solid transparent;
}
.berg-msg.success { background: var(--berg-success-soft); color: var(--berg-success); border-color: var(--berg-success); }
.berg-msg.warn    { background: var(--berg-warn-soft);    color: var(--berg-warn);    border-color: var(--berg-warn); }
.berg-msg.danger  { background: var(--berg-danger-soft);  color: var(--berg-danger);  border-color: var(--berg-danger); }
.berg-msg.info    { background: var(--berg-info-soft);    color: var(--berg-info);    border-color: var(--berg-info); }

/* ---------- TOAST ---------- */
.berg-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--berg-text);
  color: var(--berg-bg);
  padding: 10px 18px;
  border-radius: var(--berg-radius);
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  box-shadow: var(--berg-shadow-lg);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
  max-width: 480px;
  text-align: center;
}
.berg-toast.show { transform: translateX(-50%) translateY(0); }
.berg-toast.success { background: var(--berg-success); color: white; }
.berg-toast.danger  { background: var(--berg-danger); color: white; }
.berg-toast.warn    { background: var(--berg-warn); color: white; }

/* ---------- UTILITIES ---------- */
.berg-row { display: flex; gap: 10px; align-items: center; }
.berg-col { display: flex; flex-direction: column; gap: 10px; }
.berg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.berg-muted { color: var(--berg-muted); }
.berg-small { font-size: 12px; }
.berg-spacer { flex: 1; }
.berg-divider { border-top: 1px solid var(--berg-border); margin: 16px 0; }

/* Empty state */
.berg-empty {
  text-align: center;
  color: var(--berg-muted);
  padding: 32px 16px;
  font-size: 13px;
}

/* Banner aviso (estilo info card grande) */
.berg-banner {
  background: var(--berg-info-soft);
  border: 1px solid var(--berg-info);
  border-radius: var(--berg-radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--berg-info);
  margin-bottom: 12px;
}