<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="theme-color" content="#0F172A">
  <meta name="description" content="360 Degree M - Agency Command Center. Clients. Content. Calendar. Growth.">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <title>360 Degree M - Agency Command Center</title>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%232563EB'/%3E%3Ctext x='50' y='65' text-anchor='middle' fill='white' font-size='45' font-weight='800'%3E360%3C/text%3E%3C/svg%3E">
  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="/style.css">
</head>
<body>

  <!-- LOGIN MODULE - Only visible before auth -->
  <div id="login-module" class="login-module">
    <div class="login-backdrop"></div>
    <div class="login-container">
      <!-- Logo -->
      <div class="login-logo">
        <div class="login-logo-icon">360</div>
        <div class="login-logo-text">360 Degree M</div>
      </div>

      <!-- Login Card -->
      <div class="login-card">
        <div class="login-card-inner">
          <!-- Google Sign In -->
          <button class="btn-google" id="btn-google" onclick="handleGoogleLogin()">
            <svg class="google-icon" viewBox="0 0 24 24">
              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            Continue with Google
          </button>

          <!-- Divider -->
          <div class="login-divider">
            <span class="login-divider-line"></span>
            <span class="login-divider-text">OR</span>
            <span class="login-divider-line"></span>
          </div>

          <!-- Tabs -->
          <div class="login-tabs">
            <button class="login-tab active" id="tab-login" onclick="showLoginTab()">Log In</button>
            <button class="login-tab" id="tab-signup" onclick="showSignupTab()">Sign Up</button>
          </div>

          <!-- Login Form -->
          <div class="login-form" id="form-login">
            <div class="login-field">
              <label class="login-label">Email</label>
              <input type="email" class="login-input" id="login-email" placeholder="you@company.com">
            </div>
            <div class="login-field">
              <label class="login-label">Password</label>
              <div class="login-input-wrap">
                <input type="password" class="login-input" id="login-password" placeholder="Enter password">
                <button class="login-eye" onclick="togglePassword('login-password',this)" type="button">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </button>
              </div>
            </div>
            <button class="btn-login-submit" id="btn-login" onclick="handleEmailLogin()">Log In</button>
            <button class="btn-login-otp" id="btn-otp-toggle" onclick="showOTP()">Log in with OTP instead</button>
          </div>

          <!-- Signup Form -->
          <div class="login-form hidden" id="form-signup">
            <div class="login-field">
              <label class="login-label">Email</label>
              <input type="email" class="login-input" id="signup-email" placeholder="you@company.com">
            </div>
            <div class="login-field">
              <label class="login-label">Password</label>
              <div class="login-input-wrap">
                <input type="password" class="login-input" id="signup-password" placeholder="Create password" oninput="checkPasswordMatch()">
                <button class="login-eye" onclick="togglePassword('signup-password',this)" type="button">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </button>
              </div>
            </div>
            <div class="login-field">
              <label class="login-label">Confirm Password</label>
              <div class="login-input-wrap">
                <input type="password" class="login-input" id="signup-confirm" placeholder="Confirm password" oninput="checkPasswordMatch()">
                <button class="login-eye" onclick="togglePassword('signup-confirm',this)" type="button">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </button>
              </div>
              <div class="login-match-msg" id="pwd-match-msg"></div>
            </div>
            <button class="btn-login-submit" id="btn-signup" onclick="handleSignup()">Create Account</button>
          </div>

          <!-- OTP Form -->
          <div class="login-form hidden" id="form-otp">
            <div class="login-field" id="otp-email-step">
              <label class="login-label">Email</label>
              <input type="email" class="login-input" id="otp-email" placeholder="you@company.com">
              <button class="btn-login-submit" style="margin-top:12px;" onclick="sendOTP()">Send OTP</button>
            </div>

            <div class="login-field hidden" id="otp-code-step">
              <label class="login-label">Enter 6-digit code</label>
              <div class="otp-boxes" id="otp-boxes">
                <input type="text" class="otp-box" maxlength="1" data-idx="0" oninput="handleOtpInput(this,0)" onkeydown="handleOtpKeydown(event,0)">
                <input type="text" class="otp-box" maxlength="1" data-idx="1" oninput="handleOtpInput(this,1)" onkeydown="handleOtpKeydown(event,1)">
                <input type="text" class="otp-box" maxlength="1" data-idx="2" oninput="handleOtpInput(this,2)" onkeydown="handleOtpKeydown(event,2)">
                <input type="text" class="otp-box" maxlength="1" data-idx="3" oninput="handleOtpInput(this,3)" onkeydown="handleOtpKeydown(event,3)">
                <input type="text" class="otp-box" maxlength="1" data-idx="4" oninput="handleOtpInput(this,4)" onkeydown="handleOtpKeydown(event,4)">
                <input type="text" class="otp-box" maxlength="1" data-idx="5" oninput="handleOtpInput(this,5)" onkeydown="handleOtpKeydown(event,5)">
              </div>
              <div class="otp-timer" id="otp-timer">Resend in 60s</div>
              <button class="btn-login-submit" style="margin-top:12px;" onclick="verifyOTP()">Verify OTP</button>
            </div>

            <button class="btn-login-otp" onclick="showLoginTab()">Back to password login</button>
          </div>

          <!-- Messages -->
          <div class="login-msg" id="login-msg"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- APP SHELL - Only visible after auth -->
  <div id="app-shell" class="app-shell hidden">

    <!-- Sidebar overlay (mobile) -->
    <div class="sidebar-overlay" id="sidebar-overlay"></div>

    <!-- Sidebar -->
    <aside class="sidebar" id="sidebar">
      <div class="sidebar-header">
        <div class="sidebar-logo">
          <div class="logo-icon">360</div>
          <span class="logo-text">360 Degree M</span>
        </div>
        <button class="sidebar-close" id="sidebar-close" aria-label="Close sidebar">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>

      <nav class="sidebar-nav">
        <div class="nav-section">
          <div class="nav-section-title">Workspace</div>
          <a href="/dashboard/" class="nav-link active" data-route="dashboard">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
            <span>Dashboard</span>
          </a>
          <a href="/today/" class="nav-link" data-route="today">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            <span>Today's Work</span>
            <span id="today-badge" class="nav-badge" style="display: none;">0</span>
          </a>
          <a href="/calendar/" class="nav-link" data-route="calendar">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            <span>Calendar</span>
          </a>
          <a href="/clients/" class="nav-link" data-route="clients">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <span>Clients</span>
          </a>
          <a href="/content/" class="nav-link" data-route="content">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            <span>Content</span>
            <span id="content-badge" class="nav-badge" style="display: none;">0</span>
          </a>
          <a href="/tasks/" class="nav-link" data-route="tasks">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
            <span>Tasks</span>
            <span id="tasks-badge" class="nav-badge" style="display: none;">0</span>
          </a>
          <a href="/meetings/" class="nav-link" data-route="meetings">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            <span>Meetings</span>
          </a>
        </div>
        <div class="nav-divider"></div>
        <div class="nav-section">
          <div class="nav-section-title">Management</div>
          <a href="/payments/" class="nav-link" data-route="payments" id="nav-payments">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            <span>Payments</span>
          </a>
          <a href="/performance/" class="nav-link" data-route="performance">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            <span>Performance</span>
          </a>
          <a href="/reports/" class="nav-link" data-route="reports">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            <span>Reports</span>
          </a>
          <a href="/team/" class="nav-link" data-route="team">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            <span>Team</span>
          </a>
          <a href="/notices/" class="nav-link" data-route="notices" id="nav-notices">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span>Notices</span>
          </a>
          <a href="/settings/" class="nav-link" data-route="settings">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            <span>Settings</span>
          </a>
        </div>
        <div class="nav-divider"></div>
        <div class="nav-section">
          <a href="javascript:void(0)" class="nav-link" onclick="handleLogout()">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
            <span>Log Out</span>
          </a>
        </div>
      </nav>
    </aside>

    <!-- Main Wrapper -->
    <div class="main-wrapper">
      <!-- Top Header -->
      <header class="header">
        <div class="header-left">
          <button class="header-icon-btn sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
          </button>
          <div class="header-search">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" placeholder="Search tasks, clients, content...">
          </div>
        </div>
        <div class="header-right">
          <!-- PWA Install icon (hidden when installed) -->
          <button class="header-icon-btn" id="install-icon" onclick="handleInstallClick()" style="display:none;" title="Install App">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          </button>
          <button class="header-icon-btn" id="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
            <svg width="20" height="20" 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"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
          </button>
          <button class="header-icon-btn" id="notif-toggle" onclick="openNotifDrawer()" aria-label="Notifications">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
            <span class="notif-badge" id="header-notif-badge" style="display:none;">0</span>
          </button>
          <div class="header-user" id="header-user" onclick="goToRoute('settings')" title="Settings">
            <div id="header-avatar" style="width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2563EB,#1D4ED8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;">A</div>
            <div style="display:flex;flex-direction:column;">
              <span id="user-name" style="font-size:13px;font-weight:600;">Admin</span>
              <span id="user-role" style="font-size:11px;color:#94A3B8;">Administrator</span>
            </div>
          </div>
        </div>
      </header>

      <!-- Main Content -->
      <div class="main-content" id="main-content">
        <!-- Content rendered by JS -->
      </div>
    </div>

    <!-- Toast Container -->
    <div class="toast-container" id="toast-container"></div>

    <!-- Modal -->
    <div class="modal-overlay" id="modal-overlay" style="display:none;" onclick="closeModal()"></div>
    <div class="modal-container" id="modal-container" style="display:none;"></div>

    <!-- Generic Side Drawer -->
    <div id="drawer" class="drawer" style="display:none;">
      <div class="drawer-header">
        <h3 id="drawer-title">Drawer</h3>
        <button class="drawer-close" onclick="closeDrawer()">&times;</button>
      </div>
      <div class="drawer-content" id="drawer-content"></div>
    </div>
    <div id="drawer-overlay" class="drawer-overlay" style="display:none;" onclick="closeDrawer()"></div>

    <!-- Notification Drawer -->
    <div id="notif-drawer" class="drawer notif-drawer" style="display:none;">
      <div class="drawer-header">
        <h3 id="notif-drawer-title">Notifications</h3>
        <button class="drawer-close" onclick="closeNotifDrawer()">&times;</button>
      </div>
      <div class="drawer-content" id="notif-drawer-content"></div>
    </div>
    <div id="notif-overlay" class="drawer-overlay" style="display:none;" onclick="closeNotifDrawer()"></div>

  </div>

  <script src="/config.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
  <script src="/app.js"></script>
</body>
</html>
