/* AgencyCRM Shell Styles */

/* App shell — display:none until JS adds .crm-ready */
#agencycrm-app {
  display:none;height:100vh;width:100%;overflow:hidden;
  background:#F9FAFB;font-family:'DM Sans',system-ui,sans-serif;position:relative;
}
#agencycrm-app.crm-ready { display:flex; }

/* ── Login ────────────────────────────────────────────────────── */
#crm-login-screen { position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#f4faf9;font-family:'DM Sans',system-ui,sans-serif; }
#crm-login-screen.is-hidden { display:none; }
.crm-login-card { background:#fff!important;border:1px solid #e0eeec!important;border-radius:16px!important;padding:48px 44px!important;width:100%!important;max-width:420px!important;box-shadow:0 2px 24px rgba(13,110,100,.07)!important; }
.crm-login-logo { display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px; }
.crm-login-logo-mark { width:64px;height:64px;display:flex;align-items:center;justify-content:center; }
.crm-login-logo-mark svg { width:64px;height:64px; }
.crm-login-mark { width:48px;height:48px;border-radius:12px;background:#043240;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(4,50,64,.25); }
.crm-login-mark svg { width:22px;height:22px;stroke:#fff; }
.crm-login-logo-name { font-size:1.1rem;font-weight:700;color:#0d1f1e;letter-spacing:-.02em; }
.crm-login-logo-sub { font-size:.68rem;color:#6b9e99;font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-top:-4px; }
.crm-login-divider { border:none;border-top:1px solid #eaf4f2;margin:0 0 24px; }
.crm-login-heading { font-size:1.1rem;font-weight:700;color:#0d1f1e;margin-bottom:4px; }
.crm-login-sub { font-size:.82rem;color:#6b9e99;margin-bottom:20px; }
.crm-login-field { margin-bottom:16px!important; }
.crm-login-label { display:block!important;font-size:12px!important;font-weight:600!important;color:#3a5a58!important;margin-bottom:6px!important;letter-spacing:.02em; }
.crm-login-input-wrap { position:relative!important; }
.crm-login-input { box-sizing:border-box!important;width:100%!important;padding:10px 14px!important;border:1.5px solid #d4e8e6!important;border-radius:8px!important;font-size:14px!important;color:#0d1f1e!important;outline:none!important;background:#f7fbfb!important;font-family:'DM Sans',system-ui,sans-serif!important;transition:border-color .15s,box-shadow .15s;line-height:1.4!important;height:auto!important; }
.crm-login-input:focus { border-color:#20cbd4!important;box-shadow:0 0 0 3px rgba(32,203,212,.12)!important;background:#fff!important; }
.crm-login-input::placeholder { color:#9bbfbc!important; }
.crm-login-eye { position:absolute!important;right:10px!important;top:50%!important;transform:translateY(-50%)!important;background:none!important;border:none!important;cursor:pointer!important;padding:2px!important;color:#9bbfbc!important;display:flex!important;align-items:center!important; }
.crm-login-eye:hover { color:#20cbd4!important; }
.crm-login-eye svg { width:16px!important;height:16px!important; }
.crm-login-error { display:none;background:#fff1f0!important;border:1px solid #ffc9c5!important;color:#c0392b!important;border-radius:8px!important;padding:9px 14px!important;font-size:13px!important;margin-bottom:14px!important; }
.crm-login-btn { box-sizing:border-box!important;width:100%!important;padding:11px!important;background:#043240!important;color:#fff!important;border:none!important;border-radius:8px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important;font-family:'DM Sans',system-ui,sans-serif!important;margin-top:6px!important;transition:background .15s,transform .1s;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important; }
.crm-login-btn:hover { background:#031e29!important; }
.crm-login-btn:active { transform:scale(.99)!important; }
.crm-login-btn:disabled { opacity:.6!important;cursor:default!important;transform:none!important; }
.crm-login-footer { text-align:center!important;font-size:11px!important;color:#b0cdc9!important;margin-top:20px!important; }

/* ── Sidebar ──────────────────────────────────────────────────── */
#crm-sidebar {
  width:56px;flex-shrink:0;display:flex;flex-direction:column;
  background:#043240;height:100vh;
  position:fixed;left:0;top:0;z-index:100;overflow:visible;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
#agencycrm-app.crm-sidebar-expanded #crm-sidebar { width:184px; }
#agencycrm-app.crm-sidebar-expanded #crm-main   { margin-left:184px; }

/* Brand */
#crm-sidebar .crm-brand { display:flex;align-items:center;justify-content:center;height:56px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;padding:0;overflow:hidden; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-brand { justify-content:flex-start;padding:0 14px; }
#crm-sidebar .crm-brand-mark { width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
#crm-sidebar .crm-brand-mark svg { width:30px;height:30px; }
#crm-sidebar .crm-brand-mark .ap-leg-right { fill:rgba(255,255,255,0.35); }
#crm-sidebar .crm-brand-name { display:flex;flex-direction:column;line-height:1.2;white-space:nowrap;overflow:hidden;opacity:0;width:0;transition:opacity .15s,width .22s;margin-left:10px; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-brand-name { opacity:1;width:auto; }
#crm-sidebar .crm-brand-name strong { font-size:13px;font-weight:600;color:#fff; }
#crm-sidebar .crm-brand-name span { font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:.06em; }

/* New Deal button */
#crm-sidebar .crm-new-deal-wrap { padding:4px 6px;flex-shrink:0; }
#crm-sidebar .crm-new-deal-btn {
  display:flex;align-items:center;justify-content:center;
  height:38px;border-radius:6px;cursor:pointer;
  background:#20cbd4;color:#043240 !important;
  white-space:nowrap;overflow:visible;position:relative;
  transition:background .12s;text-decoration:none !important;
}
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-new-deal-btn { justify-content:flex-start;padding:0 12px;gap:11px; }
#crm-sidebar .crm-new-deal-btn:hover { background:#17a8b0; }
#crm-sidebar .crm-new-deal-btn svg { flex-shrink:0;stroke:#fff; }
#crm-sidebar .crm-new-deal-btn .crm-nav-label { color:#043240 !important; }
#crm-sidebar .crm-new-deal-btn .crm-nav-tooltip { background:#111827; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-new-deal-btn { width:auto; }

/* Nav */
#crm-sidebar .crm-nav { flex:1;overflow:visible;padding:4px 6px;display:flex;flex-direction:column;gap:1px; }
#crm-sidebar .crm-nav::-webkit-scrollbar { width:0; }
#crm-sidebar .crm-nav-section-label { font-size:10px !important;font-weight:500 !important;color:rgba(255,255,255,0.3) !important;letter-spacing:.07em !important;padding:10px 6px 3px !important;white-space:nowrap;overflow:hidden;opacity:0;height:0;pointer-events:none;transition:opacity .15s,height .22s;display:block !important; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-section-label { opacity:1;height:26px;pointer-events:auto; }

#crm-sidebar .crm-nav-link {
  display:flex !important;align-items:center !important;justify-content:center !important;
  height:38px;padding:0 !important;
  border-radius:6px !important;text-decoration:none !important;
  color:rgba(255,255,255,0.5) !important;font-size:13px !important;font-weight:500 !important;
  white-space:nowrap;overflow:visible;
  transition:background .12s,color .12s;position:relative;background:transparent !important;
}
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-link { justify-content:flex-start !important;padding:0 12px !important; }
#crm-sidebar .crm-nav-link:hover { background:rgba(255,255,255,0.08) !important;color:#fff !important; }
#crm-sidebar .crm-nav-link.is-active { background:rgba(255,255,255,0.12) !important;color:#fff !important; }

#crm-sidebar .crm-nav-icon { width:20px !important;height:20px !important;flex-shrink:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;overflow:hidden !important; }
#crm-sidebar .crm-nav-icon svg { width:20px;height:20px;stroke:rgba(255,255,255,0.5);transition:stroke .12s;overflow:hidden !important; }
#crm-sidebar .crm-nav-link:hover .crm-nav-icon svg,
#crm-sidebar .crm-nav-link.is-active .crm-nav-icon svg { stroke:#fff !important; }

#crm-sidebar .crm-nav-label { flex:0;opacity:0;width:0;overflow:hidden;transition:opacity .15s,width .22s;color:inherit;margin-left:0; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-label { flex:1;opacity:1;width:auto;margin-left:11px; }

/* Pipeline badge */
#crm-sidebar .crm-nav-badge { background:#20cbd4;color:#043240;font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;flex-shrink:0;opacity:0;width:0;overflow:hidden;transition:opacity .15s; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-badge { opacity:1;width:auto; }
/* Dot indicator in collapsed state */
#crm-sidebar .crm-nav-link[data-view="pipeline"]::after {
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:#20cbd4;pointer-events:none;
  display:block;
}
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-link[data-view="pipeline"]::after { display:none; }
#crm-sidebar .crm-nav-link[data-view="pipeline"] #crm-pipeline-badge[style*="display:none"] { display:none !important; }
#crm-sidebar #crm-pipeline-badge[style*="display:none"] ~ .crm-nav-link[data-view="pipeline"]::after { display:none; }
/* Activities dot — collapsed state, only when overdue */
#crm-sidebar .crm-nav-link[data-view="activities"].crm-has-overdue::after {
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:#20cbd4;pointer-events:none;display:block;
}
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-link[data-view="activities"]::after { display:none; }
/* To-do dot — collapsed state, only when overdue (amber) */
#crm-sidebar .crm-todo-trigger.crm-has-overdue::after {
  content:'';position:absolute;top:6px;right:6px;width:6px;height:6px;
  border-radius:50%;background:#F59E0B;pointer-events:none;display:block;
}
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-todo-trigger::after { display:none; }

/* Tooltip */
#crm-sidebar .crm-nav-tooltip {
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:#111827;color:#fff;font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:6px;white-space:nowrap;
  pointer-events:none;opacity:0;transition:opacity .1s;z-index:200;
}
#crm-sidebar .crm-nav-tooltip::before {
  content:'';position:absolute;right:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-right-color:#111827;
}
#crm-sidebar .crm-nav-link:hover .crm-nav-tooltip { opacity:1; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-nav-tooltip { display:none; }

/* Agent footer */
#crm-sidebar .crm-agent-footer { flex-shrink:0;border-top:1px solid rgba(255,255,255,0.07);padding:8px;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-agent-footer { justify-content:flex-start; }
#crm-sidebar .crm-agent-avatar { width:30px;height:30px;flex-shrink:0;border-radius:50%;background:rgba(32,203,212,0.2);color:rgba(255,255,255,0.8);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center; }
#crm-sidebar .crm-agent-info { flex:1;min-width:0;overflow:hidden;opacity:0;width:0;transition:opacity .15s,width .22s; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-agent-info { opacity:1;width:auto; }
#crm-sidebar .crm-agent-name { font-size:12px !important;font-weight:500 !important;color:rgba(255,255,255,0.85) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#crm-sidebar .crm-agent-role { font-size:11px !important;color:rgba(255,255,255,0.35) !important; }
#crm-sidebar .crm-logout-btn { flex-shrink:0;width:26px;height:26px;border-radius:5px;border:none;background:transparent;color:rgba(255,255,255,0.35);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;opacity:0;width:0;pointer-events:none;transition:opacity .15s; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-logout-btn { opacity:1;width:26px;pointer-events:auto; }
#crm-sidebar .crm-logout-btn:hover { background:rgba(239,68,68,0.15);color:#EF4444; }
#crm-sidebar .crm-logout-btn svg { width:15px;height:15px; }

/* Bottom toggle row */
#crm-sidebar .crm-sidebar-toggle-row { flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:4px 6px;border-top:1px solid rgba(255,255,255,0.07); }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-sidebar-toggle-row { justify-content:flex-end; }

/* Collapse button — visible only on sidebar hover */
.crm-collapse-btn {
  width:26px;height:26px;border-radius:5px;
  background:rgba(255,255,255,0.0);border:none;
  color:rgba(255,255,255,0);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s,opacity .15s;
}
#crm-sidebar:hover .crm-collapse-btn { color:rgba(255,255,255,0.5); }
#crm-sidebar:hover .crm-collapse-btn:hover { background:rgba(255,255,255,0.1);color:#fff; }
.crm-collapse-btn svg { width:14px;height:14px;stroke:currentColor; }
#agencycrm-app.crm-sidebar-expanded .crm-collapse-btn svg { transform:rotate(180deg); }

/* Version label */
#crm-sidebar .crm-version-label { padding:2px 0 6px;font-size:10px;color:rgba(255,255,255,0.2);text-align:center;letter-spacing:.04em;white-space:nowrap;overflow:hidden;opacity:0;height:0;transition:opacity .15s,height .22s; }
#agencycrm-app.crm-sidebar-expanded #crm-sidebar .crm-version-label { opacity:1;height:22px; }

/* ── Main content ─────────────────────────────────────────────── */
#crm-main { margin-left:56px;flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
#crm-header { height:48px;flex-shrink:0;background:#fff;border-bottom:0.5px solid #E5E7EB;display:flex;align-items:center;padding:0 20px;gap:12px;z-index:10; }
.crm-header-title { display:none; }
.crm-header-search { display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:8px;border:0.5px solid #e2e8f0;width:240px; }
.crm-header-search svg { width:14px;height:14px;stroke:#9ca3af;flex-shrink:0; }
#crm-global-search { border:none;outline:none;font-size:13px;color:#374151;background:transparent;width:100%;font-family:inherit; }
#crm-global-search::placeholder { color:#9ca3af; }
.crm-header-actions { display:flex;align-items:center;gap:6px; }
.crm-hbtn { display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:13px;cursor:pointer;border:0.5px solid #e2e8f0;background:#fff;color:#374151;white-space:nowrap;user-select:none; }
.crm-hbtn:hover { background:#f9fafb; }
.crm-hbtn-ghost { color:#9ca3af; }
.crm-header-sep { width:1px;height:18px;background:#e5e7eb;margin:0 2px; }
#crm-view-container { flex:1;overflow-y:auto;overflow-x:hidden;background:#F9FAFB;padding:28px 32px;position:relative; }
#crm-view-container::-webkit-scrollbar { width:6px; }
#crm-view-container::-webkit-scrollbar-thumb { background:#d4e8e6;border-radius:6px; }
.crm-view-pane { display:none;animation:crmFadeIn .18s ease; }
.crm-view-pane.is-active { display:block; }
@keyframes crmFadeIn { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }

/* ── Mobile ───────────────────────────────────────────────────── */
#crm-mobile-toggle { display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid #E5E7EB;background:transparent;color:#6B7280;cursor:pointer;margin-right:8px;flex-shrink:0; }
#crm-mobile-toggle svg { width:18px;height:18px; }

@media(max-width:768px){
  #crm-sidebar{transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1),width .22s;}
  #agencycrm-app.crm-mobile-open #crm-sidebar{transform:translateX(0);width:184px;}
  #crm-main{margin-left:0!important;}
  .crm-collapse-btn{display:none;}
  #crm-mobile-toggle{display:flex!important;}
  #agencycrm-app.crm-mobile-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;}
}

#agencycrm-app a { text-decoration:none; }

/* ── Responsive gutter ────────────────────────────────────────── */
@media(max-width:1400px) {
  #crm-view-container { padding: 24px 28px; }
}

@media(max-width:900px) {
  #crm-view-container { padding: 20px; }
}