/* CRM Redesign — High-level SaaS Style */
#crm-root {display:flex;flex-direction:column;min-height: 0;height: -webkit-fill-available;overflow: auto;color: var(--text);}
#crm-root .crm-app-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  gap: 12px;
}
#crm-root .crm-app-bar .row, #crm-root .crm-app-bar div{display:flex;gap: 4px !important;}
#crm-root .crm-app-bar h2 { margin:0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }

#crm-root .crm-tabs-nav {
  display:flex;
  gap: 4px;
  padding: 4px;
  margin: 0 -10px;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
  justify-content: space-between;
}
#crm-root .crm-tabs-nav::-webkit-scrollbar { display: none; }
#crm-root .crm-tabs-nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 12px; color: var(--text-muted); font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: all 0.2s ease;
}
#crm-root .crm-tabs-nav a:hover { background: var(--strans); color: var(--text); }
#crm-root .crm-tabs-nav a.active { background: var(--primary-faded); color: var(--primary); }

#crm-root .crm-body-grid {
  display:grid; grid-template-columns: 1fr auto; flex: 1; min-height: 0; overflow: hidden;
}
@media (max-width: 1200px) {
  #crm-root .crm-body-grid {grid-template-columns: 1fr;}
  #crmSidebarRight {
    position: fixed;
    right: 0;
    top: 95px;
    bottom: 5px;
    z-index: 200;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    width: 280px;
  }
}
#crm-root .crm-main-content {
  display: grid;
  overflow-y: auto;
  padding: 5px;
  min-width: 0;
  align-items: start;
}

/* Dynamic Right Sidebar */
#crmSidebarRight {
  width: 320px;
  border-left: var(--line);
  background: var(--surface);
  backdrop-filter: var(--backdrop);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  overflow-y: auto;
}
#crmSidebarRight[hidden] { display: none; }
#crmSidebarRight .sidebar-inner { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
#crmSidebarRight header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#crmSidebarRight h4 { margin: 0; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* Unified Card Styles */
#crm-root .crm-card {
  background: var(--pans) var(--bg);
  border: var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}
#crm-root .crm-card:hover { border-color: var(--primary-faded); }

#crm-root .crm-status { min-height: 16px; font-size: 12px; }

/* KPI Grid */
#crm-root .crm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
#crm-root .crm-kpi-card { display: flex; flex-direction: column; gap: 4px; }
#crm-root .crm-kpi-val { font-size: 24px; font-weight: 800; color: var(--primary); }
#crm-root .crm-kpi-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

/* Toolbar */
#crm-root .crm-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
#crm-root .crm-search-box {
  position: relative; flex: 1; min-width: 200px;
}
#crm-root .crm-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
#crm-root .crm-search-box input {
  width: 100%;
  padding: 6px 2px 6px 30px;
  background: var(--bg);
  border: var(--line);
  border-radius: 12px;
  color: var(--text);
  outline: none;
}
#crm-root .crm-search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-faded); }

/* Records Table */
#crm-root .crm-table-container {border-radius: 18px;border: var(--line);overflow: auto;background: var(--bg);}
#crm-root .crm-table { width: 100%; border-collapse: collapse; min-width: 800px; }
#crm-root .crm-table th { text-align: left; padding: 12px 16px; background: var(--strans); color: var(--text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; border-bottom: var(--line); position: sticky; top: 0; z-index: 10; }
#crm-root .crm-table td { padding: 14px 16px; border-bottom: var(--line); vertical-align: middle; }
#crm-root .crm-table tr:last-child td { border-bottom: none; }
#crm-root .crm-table tr:hover td { background: var(--strans); cursor: pointer; }

/* Kanban v3 */
#crm-root .crm-kanban {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;overflow-x: auto;padding-bottom: 16px;}
#crm-root .crm-kan-col { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; }
#crm-root .crm-kan-head { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 12px; background: var(--strans); }
#crm-root .crm-kan-drop {flex: 1;display: flex;flex-direction: column;gap: 12px;min-height: 200px;background: var(--strans);border: 1px dashed var(--strans);}

/* Tags and Badges */
#crm-root .tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  background: var(--strans); border: var(--line); border-radius: 8px; font-size: 11px;
}
#crm-root .tag .dot { width: 6px; height: 6px; border-radius: 50%; }

/* Profile Sheet Overlay */
#crmProfileSheet {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(800px, 95vw);
  background: var(--bg);
  border-left: var(--line);
  z-index: 1000;
  box-shadow: -20px 0 60px rgba(0,0,0,0.4);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
#crmProfileSheet.is-open { transform: translateX(0); }
#crmProfileSheet header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: var(--line);
}