/* ═══════════════════════════════════════════════════════════
     PAGO SUPPORT PORTAL — Page-specific overrides
     Shared tokens/components live in /static/theme.css
     ═══════════════════════════════════════════════════════════ */

  body { font-family: var(--font-mono); }

  /* ── Login Screen ── */
  .login-screen {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--bg);
  }

  .login-card {
    background: var(--card); border-radius: var(--radius);
    padding: 48px 40px; text-align: center;
    width: 420px; max-width: 90vw;
    box-shadow: 0 4px 24px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  }
  html[data-theme="light"] .login-card { clip-path: none; box-shadow: 0 4px 24px rgba(0,0,0,0.06); }

  .logo {
    width: 56px; height: 56px; border-radius: 0;
    background: var(--accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700;
    font-family: var(--font-head);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  html[data-theme="light"] .logo { border-radius: 14px; clip-path: none; }

  /* Pago wordmark — overrides the letter-badge .logo aesthetic; SVG paths use currentColor */
  .logo.pago-wordmark {
    width: auto; height: 56px;
    background: none; border-radius: 0;
    clip-path: none;
    color: var(--text);
    font-size: 0;
  }
  .header-left .logo.pago-wordmark { width: auto; height: 56px; }
  /* Wordmark is loaded via <img>, so SVG currentColor falls back to black.
     In dark mode, invert to render the glyphs white. */
  html[data-theme="dark"] .logo.pago-wordmark { filter: invert(1); }

  .login-card .logo { margin-bottom: 20px; }
  .login-card h1 { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--accent); margin-bottom: 8px; letter-spacing: 1px; }
  .login-card .subtitle { font-size: 14px; color: var(--muted); margin-bottom: 32px; }

  .google-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 24px; font-size: 14px; font-weight: 500;
    color: var(--text); cursor: pointer; transition: background 0.2s, box-shadow 0.2s;
    font-family: var(--font-mono);
  }
  html[data-theme="light"] .google-btn { background: #fff; color: #3c4043; border-color: #dadce0; }
  .google-btn:hover { background: rgba(255,255,255,0.14); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
  html[data-theme="light"] .google-btn:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
  .google-btn svg { width: 18px; height: 18px; }

  .login-footer { font-size: 12px; color: var(--muted); margin-top: 24px; }
  .login-error { font-size: 13px; color: var(--red); margin-top: 12px; display: none; }

  /* ── Header ── */
  .header {
    background: var(--card); border-bottom: 1px solid var(--border);
    padding: 0 32px; height: 72px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .header-left { display: flex; align-items: center; gap: 12px; }
  .header-left .logo { width: 36px; height: 36px; font-size: 18px; }
  .header-left h1 { font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
  .header-right { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); }

  .home-link { display: flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; }

  .logout-btn {
    background: none; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 5px 14px; font-size: 13px; color: var(--muted);
    cursor: pointer; transition: all 0.2s; font-family: var(--font-mono);
  }
  html[data-theme="light"] .logout-btn { border-radius: 6px; }
  .logout-btn:hover { color: var(--text); border-color: var(--accent); }

  /* ── Theme Toggle ── */
  .theme-toggle {
    background: none; border: 1px solid var(--border);
    width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px; transition: all 0.2s;
    color: var(--muted);
  }
  .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

  /* ── Language Toggle ── */
  .lang-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--bg); border-radius: 6px; padding: 2px;
    font-size: 12px; font-weight: 600; font-family: var(--font-mono);
  }
  .lang-toggle span {
    padding: 3px 8px; border-radius: 4px; cursor: pointer;
    color: var(--muted); transition: all 0.2s; user-select: none;
  }
  .lang-toggle span.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
  .lang-toggle span:hover:not(.active) { color: var(--text); }

  /* ── Portal Screen ── */
  .portal-screen { display: none; }

  .portal-content {
    max-width: 960px; margin: 0 auto; padding: 40px 32px;
  }

  .welcome h2 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 6px; letter-spacing: 1px; }
  .welcome p { font-size: 15px; color: var(--muted); margin-bottom: 36px; }

  .card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .project-card {
    background: var(--card); border-radius: var(--radius);
    padding: 28px 24px; cursor: pointer;
    border-left: 4px solid var(--accent);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s, transform 0.15s;
    text-decoration: none; color: inherit; display: block;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  }
  html[data-theme="light"] .project-card { clip-path: none; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
  .project-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.25); transform: translateY(-2px); }
  html[data-theme="light"] .project-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }

  .card-icon { font-size: 32px; margin-bottom: 16px; }

  .project-card h3 { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--accent); margin-bottom: 8px; letter-spacing: 1px; }
  .project-card .card-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }

  .card-badges { display: flex; gap: 8px; flex-wrap: wrap; }
  .badge {
    font-size: 11px; padding: 3px 10px; border-radius: 4px;
    background: var(--accent-light); color: var(--accent); font-weight: 500;
    font-family: var(--font-mono);
  }
  .badge.green { background: rgba(46,196,182,0.1); color: var(--green); }
  html[data-theme="light"] .badge.green { background: #dcfce7; }

  .card-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px; padding: 8px 16px; border-radius: var(--radius);
    background: var(--accent-light); border: 1px solid var(--border);
    color: var(--accent); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s; font-family: var(--font-mono);
  }
  html[data-theme="light"] .card-action-btn { border-radius: 8px; }
  .card-action-btn:hover { background: rgba(255,140,0,0.2); border-color: var(--accent); }
  html[data-theme="light"] .card-action-btn:hover { background: #dde2ff; border-color: var(--accent); }

  .portal-footer {
    text-align: center; padding: 32px; font-size: 13px; color: var(--muted);
  }

  /* ── Detail Screen ── */
  .detail-screen { display: none; }

  .detail-content {
    max-width: 680px; margin: 0 auto; padding: 40px 32px;
  }

  .back-btn {
    background: none; border: none; color: var(--accent);
    font-size: 13px; cursor: pointer; padding: 4px 0;
    margin-bottom: 24px; display: flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
  }
  .back-btn:hover { text-decoration: underline; }

  .detail-content h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 8px; letter-spacing: 1px; }
  .detail-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 32px; }

  .steps-title {
    font-family: var(--font-head); font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 14px;
    text-transform: uppercase; letter-spacing: 2px;
  }

  .steps { list-style: none; counter-reset: step; margin-bottom: 32px; }
  .steps li {
    counter-increment: step; position: relative;
    padding: 14px 16px 14px 52px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 8px; font-size: 14px; line-height: 1.5; color: var(--text);
  }
  html[data-theme="light"] .steps li { border-radius: 10px; }
  .steps li::before {
    content: counter(step);
    position: absolute; left: 16px; top: 14px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }
  .steps li code {
    background: var(--accent-light); padding: 2px 7px;
    border-radius: 4px; font-size: 12px; color: var(--accent);
  }

  .guide-link {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-radius: var(--radius); margin-bottom: 28px;
    background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent);
    text-decoration: none; color: var(--accent); font-size: 14px; font-weight: 500;
    transition: box-shadow 0.2s, transform 0.15s;
  }
  html[data-theme="light"] .guide-link { border-radius: 10px; }
  .guide-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.15); transform: translateY(-1px); }
  html[data-theme="light"] .guide-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
  .guide-link-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: auto; }

  .steps li a.step-dl { color: var(--accent); font-weight: 500; text-decoration: none; }
  .steps li a.step-dl:hover { text-decoration: underline; }

  /* ── Dashboard Embed Screen ── */
  .dashboard-screen { display: none; }
  .dashboard-wrap { padding: 0 4px 4px; }
  .dashboard-iframe { width: 100%; height: calc(100vh - 76px); border: none; background: transparent; }

  /* ── Users Screen ── */
  .users-screen { display: none; }
  .users-content { max-width: 860px; margin: 0 auto; padding: 40px 32px; }
  .users-content h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--accent); margin-bottom: 24px; letter-spacing: 1px; }

  .users-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
  html[data-theme="light"] .users-table { border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
  .users-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); border-bottom: 2px solid var(--border); background: var(--bg); font-family: var(--font-head); }
  .users-table td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .users-table tr:last-child td { border-bottom: none; }

  .user-cell { display: flex; align-items: center; gap: 10px; }
  .user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--accent-light); flex-shrink: 0; }
  .user-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
  .user-name { font-weight: 500; }

  .role-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; background: var(--card); color: var(--text); cursor: pointer; font-family: var(--font-mono); }
  .role-select:focus { outline: none; border-color: var(--accent); }

  .role-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .role-badge.admin { background: rgba(255,140,0,0.15); color: var(--accent); }
  html[data-theme="light"] .role-badge.admin { background: #fef3c7; color: #b45309; }
  .role-badge.viewer { background: var(--accent-light); color: var(--accent); }

  .portal-status-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; }
  .portal-status-badge.active { background: rgba(46,196,182,0.15); color: var(--green); }
  html[data-theme="light"] .portal-status-badge.active { background: #dcfce7; }
  .portal-status-badge.inactive { background: rgba(230,57,70,0.15); color: var(--red); }
  html[data-theme="light"] .portal-status-badge.inactive { background: #fee2e2; }

  .status-toggle { position: relative; width: 40px; height: 22px; cursor: pointer; }
  .status-toggle input { display: none; }
  .status-toggle .slider { position: absolute; inset: 0; background: var(--muted); border-radius: 11px; transition: background 0.2s; }
  .status-toggle .slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); transition: transform 0.2s; }
  .status-toggle input:checked + .slider { background: var(--green); }
  .status-toggle input:checked + .slider::after { transform: translateX(18px); }

  .last-login { font-size: 12px; color: var(--muted); white-space: nowrap; }

  .users-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 6px;
    background: none; border: 1px solid var(--border);
    font-size: 13px; color: var(--muted); cursor: pointer; transition: all 0.2s;
    font-family: var(--font-mono);
  }
  .users-nav-btn:hover { color: var(--text); border-color: var(--accent); }