/* ============================================================
   COMMAND CENTER — Global Styles
   Exact match to cc.phyllisgladys.com original
   Base: dark navy #0a1628 | Cards: #1a2744→#0f1d38 | Orange: #FF8C00
   ============================================================ */

:root {
  --bg:          #0a1628;
  --card-from:   #1a2744;
  --card-to:     #0f1d38;
  --orange:      #FF8C00;
  --green:       #4ade80;
  --green-bg:    #1a4a2e;
  --red:         #f87171;
  --red-bg:      #4a1a1a;
  --yellow:      #fbbf24;
  --yellow-bg:   #3a3010;
  --text:        #ffffff;
  --text-dim:    rgba(255,255,255,0.7);
  --text-muted:  rgba(255,255,255,0.45);
  --sidebar-w:   220px;
  --header-h:    56px;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  background: linear-gradient(to right, #1a3a6b 0%, #2a5298 35%, #c96a1a 70%, #FF8C00 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

/* Floating money */
.money-rain { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:hidden; }
.money-symbol { position:absolute; font-size:1.4rem; animation:floatUp linear infinite; pointer-events:none; user-select:none; }
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg);    opacity: 0.7; }
  100% { transform: translateY(-90vh) rotate(20deg); opacity: 0;   }
}

/* Login */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; position:relative; z-index:1; }
.login-wrap {
  max-width:460px; width:100%; padding:3rem 2.5rem;
  background:linear-gradient(135deg,#1a2744 0%,#0a1628 100%);
  border-radius:16px; border:1px solid rgba(255,140,0,0.27);
  box-shadow:0 8px 40px rgba(0,0,0,0.5); text-align:center;
}
.login-title { font-size:2rem; font-weight:800; margin-bottom:0.25rem; }
.login-sub   { color:#aaa; margin-bottom:2rem; font-size:0.95rem; }
.login-wrap .form-group { margin-bottom:1.2rem; text-align:left; }
.login-wrap label { display:block; font-size:0.78rem; color:rgba(255,255,255,0.7); margin-bottom:0.35rem; text-transform:uppercase; letter-spacing:0.06em; }
.login-wrap input { width:100%; padding:0.7rem 1rem; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); border-radius:8px; color:white; font-size:0.95rem; font-family:var(--font); outline:none; transition:border-color 0.2s; }
.login-wrap input:focus { border-color:var(--orange); }
.btn-login { width:100%; padding:0.8rem; background:linear-gradient(135deg,#FF8C00,#c9a84c); border:none; border-radius:8px; color:#000; font-weight:800; font-size:0.95rem; cursor:pointer; font-family:var(--font); margin-top:0.5rem; }
.btn-login:hover { opacity:0.88; }
.login-error { color:var(--red); font-size:0.85rem; margin-top:0.75rem; display:none; }

/* App shell */
.app-shell { display:flex; min-height:100vh; position:relative; z-index:1; }

/* Sidebar */
.sidebar { width:var(--sidebar-w); min-height:100vh; background:rgba(8,18,42,0.94); border-right:1px solid rgba(255,140,0,0.2); display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:100; }
.sidebar-logo { padding:1.2rem 1.2rem 1rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.sidebar-logo .brain { font-size:1.3rem; }
.sidebar-logo h2 { font-size:0.82rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--orange); margin-top:0.2rem; }
.live-badge { font-size:0.6rem; background:var(--green); color:#000; padding:0.1rem 0.4rem; border-radius:10px; margin-left:0.3rem; font-weight:700; vertical-align:middle; }
.sidebar-section { padding:0.75rem 0 0.25rem; }
.sidebar-section-label { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); padding:0 1.1rem; margin-bottom:0.25rem; }
.sidebar-nav-item { display:flex; align-items:center; gap:0.55rem; padding:0.5rem 1.1rem; color:rgba(255,255,255,0.7); text-decoration:none; font-size:0.83rem; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:background 0.15s,color 0.15s; }
.sidebar-nav-item:hover { background:rgba(255,255,255,0.05); color:white; }
.sidebar-nav-item.active { background:rgba(255,140,0,0.12); color:var(--orange); border-right:2px solid var(--orange); }
.nav-icon { font-size:0.95rem; width:1.1rem; }
.status-dot { width:7px; height:7px; border-radius:50%; margin-left:auto; flex-shrink:0; }
.dot-green  { background:var(--green); }
.dot-yellow { background:var(--yellow); }
.dot-red    { background:var(--red); }
.dot-grey   { background:#555; }
.sidebar-bottom { margin-top:auto; padding:1rem 1.1rem; border-top:1px solid rgba(255,255,255,0.07); }
.sidebar-user { font-size:0.73rem; color:var(--text-muted); }
.btn-logout { font-size:0.73rem; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:0; font-family:var(--font); margin-top:0.25rem; display:block; }
.btn-logout:hover { color:var(--red); }

/* Main content */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; }

/* Header */
.header { height:var(--header-h); background:rgba(8,18,42,0.94); border-bottom:1px solid rgba(255,140,0,0.2); display:flex; align-items:center; justify-content:space-between; padding:0 2rem; position:sticky; top:0; z-index:50; }
.header-title { display:flex; flex-direction:column; }
.header-title .cc-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--orange); font-weight:600; }
.header-title .cc-page  { font-size:0.92rem; font-weight:600; color:white; }
.top-cash { background:linear-gradient(135deg,#FF8C00,#c9a84c); color:#000; font-weight:800; font-size:0.82rem; padding:6px 14px; border-radius:20px; letter-spacing:0.03em; box-shadow:0 2px 12px rgba(255,140,0,0.4); white-space:nowrap; }

/* Page body */
.page-body { padding:2rem; flex:1; }
.page-heading { font-size:2.2rem; font-weight:900; letter-spacing:0.02em; margin-bottom:0.3rem; color:#ffffff; text-shadow: 0 0 40px rgba(255,140,0,0.5), 0 2px 4px rgba(0,0,0,0.5); }
.page-subheading { color:var(--text-muted); font-size:0.85rem; margin-bottom:2rem; }

/* Cards — exact original */
.card { background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.08); border-radius:0; padding:1.5rem 0; box-shadow:none; }
.card-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:0.4rem; }
.card-value { font-size:1.6rem; font-weight:700; }
.card-sub   { font-size:0.75rem; color:var(--text-muted); margin-top:0.25rem; }

/* Client cards */
.client-card { background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:1.25rem; border-radius:12px; padding:1.25rem; cursor:pointer; text-decoration:none; color:inherit; display:block; transition:border-color 0.2s,transform 0.15s; }
.client-card:hover { border-color:rgba(255,140,0,0.55); transform:translateY(-2px); }
.client-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
.client-name { font-size:0.95rem; font-weight:600; }
.client-meta { font-size:0.78rem; color:var(--text-dim); line-height:1.75; }
.client-meta a { color:var(--orange); text-decoration:none; }

/* Status badges */
.status-badge { display:inline-block; padding:3px 12px; border-radius:20px; font-size:0.75rem; font-weight:700; }
.status-live    { background:var(--green-bg);  color:var(--green);  border:1px solid var(--green); }
.status-preview { background:var(--yellow-bg); color:var(--yellow); border:1px solid var(--yellow); }
.status-paused  { background:var(--red-bg);    color:var(--red);    border:1px solid var(--red); }

/* Activity */
.activity-feed { display:flex; flex-direction:column; }
.activity-item { display:flex; gap:0.75rem; align-items:flex-start; padding:0.5rem 0.75rem; border-left:3px solid var(--orange); margin-bottom:0.5rem; background:rgba(0,0,0,0.2); border-radius:0 6px 6px 0; }
.activity-icon { font-size:1rem; width:1.5rem; flex-shrink:0; text-align:center; }
.activity-title { font-size:0.85rem; font-weight:500; margin-bottom:0.1rem; }
.activity-time  { font-size:0.72rem; color:var(--text-muted); }

/* Checklist */
.checklist { display:flex; flex-direction:column; gap:0.5rem; }
.check-item { display:flex; align-items:center; gap:0.6rem; font-size:0.84rem; color:var(--text-dim); }
.check-item.done { color:var(--text-muted); text-decoration:line-through; }

/* Section title */
.section-title { font-size:0.9rem; font-weight:700; color:rgba(255,255,255,0.9); margin-bottom:0.75rem; padding-bottom:0; border-bottom:none; }

/* Grids */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-bottom:2rem; }

/* Table */
.data-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.data-table th { text-align:left; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); padding:0.55rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.data-table td { padding:0.7rem 0.75rem; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text-dim); }
.data-table tr:last-child td { border-bottom:none; }

/* Buttons */
.btn { padding:0.45rem 1.1rem; border-radius:7px; font-size:0.82rem; font-weight:600; cursor:pointer; border:none; font-family:var(--font); text-decoration:none; display:inline-block; transition:opacity 0.2s; }
.btn:hover { opacity:0.85; }
.btn-gold  { background:linear-gradient(135deg,#FF8C00,#c9a84c); color:#000; font-weight:800; }
.btn-ghost { background:rgba(255,255,255,0.08); color:white; border:1px solid rgba(255,255,255,0.15); }

@media (max-width:900px) { .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .sidebar { transform:translateX(-100%); } .main-content { margin-left:0; } .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; } }