<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <title>{% block title %}calrs{% endblock %}</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦀</text></svg>">
  <script>
  // Apply theme ASAP to avoid flash
  (function(){var t=localStorage.getItem('calrs_theme');if(t==='dark'||(t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches))document.documentElement.classList.add('dark');})();
  </script>
  <style>
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url(/fonts/inter-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 700;
      font-display: swap;
      src: url(/fonts/inter-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    :root {
      --bg: #f4f4f5;
      --surface: #fff;
      --surface-hover: #fafafa;
      --text: #18181b;
      --text-secondary: #52525b;
      --text-muted: #6b7280;
      --border: #e4e4e7;
      --border-hover: #a1a1aa;
      --accent: #2563eb;
      --accent-hover: #1d4ed8;
      --accent-subtle: #eff6ff;
      --accent-border: #bfdbfe;
      --accent-muted: #93c5fd;
      --success: #16a34a;
      --error-bg: #fef2f2;
      --error-text: #dc2626;
      --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-lg: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);
      --radius: 10px;
      --radius-lg: 14px;
    }

    html.dark {
      --bg: #09090b;
      --surface: #18181b;
      --surface-hover: #27272a;
      --text: #fafafa;
      --text-secondary: #a1a1aa;
      --text-muted: #9ca3af;
      --border: #27272a;
      --border-hover: #52525b;
      --accent: #3b82f6;
      --accent-hover: #60a5fa;
      --accent-subtle: rgba(59,130,246,0.1);
      --accent-border: rgba(59,130,246,0.25);
      --accent-muted: #1e40af;
      --success: #22c55e;
      --error-bg: rgba(220,38,38,0.1);
      --error-text: #f87171;
      --shadow: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-lg: 0 4px 6px rgba(0,0,0,0.25);
    }
    html.dark .badge-warning { background: rgba(234,179,8,0.15); color: #fbbf24; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.6;
      color: var(--text);
      background: var(--bg);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 2.5rem 1rem;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 800px;
      width: 100%;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 2rem;
      margin-bottom: 1.25rem;
      box-shadow: var(--shadow);
    }

    h1 {
      font-size: 1.375rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 0.25rem;
    }
    h2 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 1rem;
      color: var(--text-secondary);
    }

    .subtitle {
      color: var(--text-secondary);
      font-size: 0.925rem;
      margin-bottom: 1.5rem;
      line-height: 1.5;
    }

    .meta {
      display: flex;
      gap: 1.25rem;
      margin-bottom: 1.5rem;
      color: var(--text-muted);
      font-size: 0.85rem;
      font-weight: 500;
    }
    .meta span {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    /* Week navigation */
    .week-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.25rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }
    .week-nav .range {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
    }
    .week-nav .nav-links {
      display: flex;
      gap: 0.5rem;
    }
    .week-nav a, .week-nav span.disabled {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: var(--radius);
      font-size: 0.85rem;
      text-decoration: none;
      transition: all 0.15s ease;
    }
    .week-nav a {
      color: var(--text-secondary);
      border: 1px solid var(--border);
      background: var(--surface);
    }
    .week-nav a:hover {
      border-color: var(--border-hover);
      background: var(--surface-hover);
    }
    .week-nav span.disabled {
      color: var(--text-muted);
      border: 1px solid var(--border);
      background: var(--surface);
      opacity: 0.4;
      cursor: default;
    }

    /* Day groups */
    .day { margin-bottom: 1.5rem; }
    .day:last-child { margin-bottom: 0; }
    .day-label {
      font-weight: 600;
      font-size: 0.875rem;
      margin-bottom: 0.5rem;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .slots { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .slot-btn {
      display: inline-block;
      padding: 0.5rem 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--text);
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.15s ease;
    }
    .slot-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-subtle);
      box-shadow: var(--shadow);
      transform: scale(1.03);
    }
    .slot-btn:active {
      transform: scale(0.97);
      box-shadow: none;
    }
    .slot-btn:focus-visible, .slot-pill:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* Form */
    .form-group { margin-bottom: 1.25rem; }
    .form-group label {
      display: block;
      font-weight: 500;
      margin-bottom: 0.375rem;
      font-size: 0.875rem;
      color: var(--text);
    }
    .form-group .hint {
      color: var(--text-muted);
      font-weight: 400;
    }
    .form-group input, .form-group textarea {
      width: 100%;
      padding: 0.625rem 0.875rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 0.925rem;
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .form-group input:focus, .form-group textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-subtle);
    }
    .form-group input::placeholder, .form-group textarea::placeholder {
      color: var(--text-muted);
    }
    textarea { resize: vertical; min-height: 80px; }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      transition: all 0.15s ease;
      letter-spacing: -0.01em;
    }
    .btn:hover { background: linear-gradient(135deg, var(--accent-hover), var(--accent)); box-shadow: var(--shadow-lg); }
    .btn:active { transform: scale(0.97); box-shadow: none; }
    .btn:disabled { background: var(--accent-muted); cursor: not-allowed; }

    /* Confirmation */
    .check {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      background: var(--success);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 1rem;
    }

    .detail { margin-bottom: 0.625rem; color: var(--text-secondary); font-size: 0.925rem; }
    .detail strong { color: var(--text); }

    .empty {
      color: var(--text-muted);
      text-align: center;
      padding: 2rem 1rem;
    }
    .empty-icon {
      font-size: 2.5rem;
      margin-bottom: 0.75rem;
      opacity: 0.5;
    }
    .empty-text {
      font-size: 0.925rem;
      max-width: 320px;
      margin: 0 auto;
      line-height: 1.5;
    }

    .logo { text-align: center; margin-bottom: 1.5rem; }
    .logo img { max-height: 80px; max-width: 280px; object-fit: contain; }

    .powered {
      text-align: center;
      color: var(--text-muted);
      font-size: 0.75rem;
      margin-top: 1.5rem;
    }
    .powered a { color: var(--text-muted); text-decoration: none; }
    .powered a:hover { color: var(--text-secondary); }

    .error {
      color: var(--error-text);
      background: var(--error-bg);
      padding: 1rem;
      border-radius: var(--radius);
      margin-bottom: 1.25rem;
      font-size: 0.9rem;
    }

    /* Selected slot summary */
    .selected-summary {
      background: var(--accent-subtle);
      border: 1px solid var(--accent-border);
      border-radius: var(--radius);
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      font-size: 0.925rem;
      font-weight: 500;
    }

    /* Back link */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      margin-bottom: 1rem;
      transition: color 0.15s ease;
    }
    .back-link:hover { color: var(--text); }

    .meta { flex-wrap: wrap; }
    .week-nav .range { min-width: 0; }

    @media (max-width: 480px) {
      body { padding: 1.5rem 0.75rem; }
      .card { padding: 1.25rem; }
      .week-nav { flex-wrap: wrap; gap: 0.5rem; }
      .week-nav .range { font-size: 0.8rem; }
    }

    /* Interactive card hover lift */
    a.card {
      transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    a.card:hover {
      border-color: var(--accent-border);
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }

    /* Status badges */
    .badge {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 500;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      vertical-align: middle;
    }
    .badge-success {
      background: var(--success-bg, rgba(34,197,94,0.1));
      color: var(--success, #16a34a);
    }
    .badge-warning {
      background: rgba(234,179,8,0.1);
      color: #a16207;
    }
    .badge-info {
      background: var(--accent-subtle, rgba(99,102,241,0.1));
      color: var(--accent);
    }
    .badge-muted {
      background: var(--surface-hover);
      color: var(--text-muted);
    }
    .badge-error {
      background: rgba(239,68,68,0.1);
      color: var(--error-text, #dc2626);
    }
    /* Legacy aliases */
    .badge-disabled { background: var(--error-bg); color: var(--error-text); }
    .badge-pending { background: rgba(234,179,8,0.1); color: #a16207; }
    .badge-confirmed { background: var(--success-bg, rgba(34,197,94,0.1)); color: var(--success); }
    .badge-requires { background: rgba(234,179,8,0.1); color: #a16207; }

    /* Checkmark animation */
    @keyframes checkPop {
      0% { transform: scale(0); opacity: 0; }
      60% { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }
    .check {
      animation: checkPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
  </style>
  <link rel="stylesheet" href="/accent.css">
  {% block head %}{% endblock %}
</head>
<body>
  <!-- Global sync loader overlay -->
  <div id="calrs-sync-loader" style="display:none; position:fixed; inset:0; z-index:10000; background:var(--bg); align-items:center; justify-content:center; flex-direction:column; gap:1.25rem;">
    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation: calrs-spin 1s linear infinite;"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
    <div style="font-size:1.125rem; font-weight:600; color:var(--text); text-align:center;">{{ t("base-loader-checking") }}</div>
    <div style="font-size:0.875rem; color:var(--text-muted); text-align:center;">{{ t("base-loader-please-wait") }}</div>
  </div>
  <style>
    @keyframes calrs-spin { to { transform: rotate(360deg); } }
  </style>
  <script>
  var calrsLoader = {
    show: function() {
      var el = document.getElementById('calrs-sync-loader');
      if (el) el.style.display = 'flex';
    },
    hide: function() {
      var el = document.getElementById('calrs-sync-loader');
      if (el) el.style.display = 'none';
    }
  };
  </script>
  {% if impersonating %}
  <div style="position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: #f59e0b; color: #000; text-align: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.75rem;">
    <span>You are impersonating <strong>{{ impersonating_name }}</strong></span>
    <form method="post" action="/dashboard/admin/stop-impersonate" style="margin: 0; display: inline;">
      <button type="submit" style="background: #000; color: #fff; border: none; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600; cursor: pointer;">{{ t("base-stop-impersonating") }}</button>
    </form>
  </div>
  <div style="height: 2.5rem;"></div>
  {% endif %}
  <div class="container">
    {% block content %}{% endblock %}
    {% block footer %}<div class="powered"><span>{{ t('base-powered-by') }} <a href="https://cal.rs">calrs</a> 🦀</span></div>{% endblock %}
    {% block theme_toggle %}
    <button id="theme-toggle" type="button" title="{{ t('base-theme-toggle') }}" aria-label="{{ t('base-theme-toggle') }}" class="theme-pill">
      <span class="theme-pill-track">
        <svg class="theme-pill-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
        <svg class="theme-pill-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        <span class="theme-pill-knob"></span>
      </span>
    </button>
    <style>
      .theme-pill { position: fixed; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; padding: 0; z-index: 10; }
      .theme-pill-track { display: flex; align-items: center; justify-content: space-between; width: 52px; height: 28px; background: var(--border); border-radius: 999px; padding: 0 5px; position: relative; transition: background 0.3s ease; }
      .theme-pill:hover .theme-pill-track { background: var(--text-muted); }
      .theme-pill-sun, .theme-pill-moon { width: 14px; height: 14px; flex-shrink: 0; transition: opacity 0.3s ease; }
      .theme-pill-sun { color: #f59e0b; }
      .theme-pill-moon { color: #94a3b8; }
      .theme-pill-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--surface, #fff); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
      html.dark .theme-pill-knob { transform: translateX(24px); }
      html.dark .theme-pill-track { background: #374151; }
      html.dark .theme-pill:hover .theme-pill-track { background: #4b5563; }
      html.dark .theme-pill-sun { opacity: 0.4; }
      html:not(.dark) .theme-pill-moon { opacity: 0.4; }
    </style>
    {% endblock %}
  </div>
<script>
// CSRF protection: inject _csrf hidden field into all POST forms
(function() {
  function getCsrfToken() {
    var match = document.cookie.match(/(?:^|;\s*)__Host-calrs_csrf=([^;]+)/);
    return match ? match[1] : '';
  }
  function injectCsrf() {
    var token = getCsrfToken();
    if (!token) return;
    var forms = document.querySelectorAll('form[method="post"], form[method="POST"]');
    for (var i = 0; i < forms.length; i++) {
      var form = forms[i];
      if (form.querySelector('input[name="_csrf"]')) continue;
      // For multipart forms, add token to action URL as query param instead
      if (form.enctype === 'multipart/form-data') {
        var action = form.getAttribute('action') || '';
        var sep = action.indexOf('?') >= 0 ? '&' : '?';
        form.setAttribute('action', action + sep + '_csrf=' + encodeURIComponent(token));
        continue;
      }
      var input = document.createElement('input');
      input.type = 'hidden';
      input.name = '_csrf';
      input.value = token;
      form.appendChild(input);
    }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', injectCsrf);
  } else {
    injectCsrf();
  }
})();
</script>
<script>
// Theme toggle (light / dark / system)
(function() {
  var btn = document.getElementById('theme-toggle');
  if (!btn) return;
  function getTheme() { return localStorage.getItem('calrs_theme') || 'system'; }
  function isDark() {
    var t = getTheme();
    return t === 'dark' || (t === 'system' && matchMedia('(prefers-color-scheme:dark)').matches);
  }
  function apply() {
    if (isDark()) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }
  btn.addEventListener('click', function() {
    var next = isDark() ? 'light' : 'dark';
    localStorage.setItem('calrs_theme', next);
    apply();
  });
  apply();
  matchMedia('(prefers-color-scheme:dark)').addEventListener('change', function() {
    if (getTheme() === 'system') apply();
  });
})();
</script>
<script>
// Show sync loader on links/forms with data-calrs-sync attribute
(function() {
  document.addEventListener('click', function(e) {
    var link = e.target.closest('a[data-calrs-sync]');
    if (link && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
      calrsLoader.show();
    }
  });
  document.addEventListener('submit', function(e) {
    var form = e.target.closest('form[data-calrs-sync]');
    if (form) calrsLoader.show();
  });
  document.addEventListener('change', function(e) {
    var el = e.target.closest('[data-calrs-sync-onchange]');
    if (el) calrsLoader.show();
  });
})();
</script>
<script>
window.calrsFormat12h = function(time24) {
  var parts = time24.split(':');
  var h = parseInt(parts[0], 10);
  var m = parts[1];
  var suffix = h >= 12 ? 'PM' : 'AM';
  h = h % 12 || 12;
  return h + ':' + m + ' ' + suffix;
};
</script>
</body>
</html>
