:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .08);
  --accent: #103a5b;
  --accent2: #0b6bcb;
  --radius: 18px;
}

body{
  background: var(--bg);
  color: var(--ink);
}

.crm-shell{
  display:flex;
  min-height:100vh;
}

.crm-sidebar{
  width:280px;
  background: #0f1f2f;
  color:#fff;
  padding:16px 14px;
  position:sticky;
  top:0;
  height:100vh;
  transition: width .2s ease;
}

.crm-sidebar.is-collapsed{
  width:88px;
}

.crm-brand{
  display:flex;
  align-items:center;
  padding:10px 10px 14px 10px;
}

.crm-logo{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  background: rgba(255,255,255,.12);
}

.crm-brand-title{
  font-weight:800;
  font-size:14px;
  letter-spacing:.2px;
}

.crm-brand-sub{
  font-size:12px;
  opacity:.8;
}

.crm-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}

.crm-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:rgba(255,255,255,.92);
  padding:12px 12px;
  border-radius:14px;
  transition: background .15s ease;
}

.crm-link i{ font-size:18px; width:22px; text-align:center; }

.crm-link:hover{ background: rgba(255,255,255,.10); color:#fff; }
.crm-link.active{ background:#ffffff; color:#0f1f2f; font-weight:800; }

.crm-nav-section{
  margin-top:10px;
  padding:10px 12px 4px 12px;
  font-size:12px;
  opacity:.75;
}

.crm-spacer{ flex:1; }

.crm-sidebar.is-collapsed .crm-brand-title,
.crm-sidebar.is-collapsed .crm-brand-sub,
.crm-sidebar.is-collapsed .crm-link span,
.crm-sidebar.is-collapsed .crm-nav-section{
  display:none;
}

.crm-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.crm-topbar{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  position:sticky;
  top:0;
  z-index:10;
}

.crm-icon-btn{
  border-radius:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:#fff;
}

.crm-topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.crm-user-name{ font-weight:800; font-size:14px; }
.crm-user-role{ font-size:12px; color:var(--muted); margin-top:2px; }

.crm-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0f1f2f;
  color:#fff;
  font-weight:900;
}

.crm-content{
  padding:18px;
}

.crm-page{
  padding-bottom:20px;
}

.crm-card{
  border:0;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 12px 26px rgba(16,24,40,.08);
}

.crm-card-accent{
  background: var(--accent);
  color:#fff;
}

.crm-card-accent .crm-card-sub{ color: rgba(255,255,255,.78); }
.crm-card-accent .crm-card-title{ color: rgba(255,255,255,.88); }

.crm-card-title{
  font-size:13px;
  color: var(--muted);
  font-weight:700;
}

.crm-card-value{
  font-size:28px;
  font-weight:900;
  margin-top:8px;
}

.crm-card-sub{
  margin-top:6px;
  font-size:13px;
  color: var(--muted);
}

.crm-badge{
  background: rgba(255,255,255,.18);
  color:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:12px;
}

.crm-section-title{
  font-weight:900;
  font-size:18px;
}

.crm-section-sub{
  color: var(--muted);
  margin-top:2px;
}

.crm-pill{
  border-radius: 999px;
}

.crm-calendar{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:10px;
  margin-top:12px;
}

.crm-cal-head{
  font-size:12px;
  color: var(--muted);
  font-weight:800;
  text-align:center;
  padding:8px 0;
}

.crm-cal-day{
  background:#edf2f7;
  border-radius: 16px;
  padding:12px 10px;
  text-align:center;
  font-weight:800;
  color:#0f172a;
}

.crm-cal-day.active{
  background:#fff3e6;
  border:2px solid #f59e0b;
}

.crm-search{
  position:relative;
}

.crm-search i{
  position:absolute;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  color: var(--muted);
}

.crm-search input{
  padding-left:34px;
  border-radius:999px;
}

.crm-select{
  border-radius: 999px;
}

.crm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.crm-action{
  border-radius:999px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  border:1px solid var(--line);
}

.crm-action i{ font-size:18px; }

.crm-donut{
  width:88px;
  height:88px;
  border-radius:50%;
  background: conic-gradient(#f59e0b 45%, #e8eef6 0);
  display:flex;
  align-items:center;
  justify-content:center;
}

.crm-donut-inner{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.crm-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#0f1f2f;
  display:inline-block;
}
.crm-dot-warn{ background:#f59e0b; }

.crm-fade{
  opacity:.6;
  transition: opacity .12s ease;
}

.crm-auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  background: var(--bg);
}

.crm-auth-title{
  font-size:22px;
  font-weight:900;
}

/* Clients list layout */

.crm-page {
  padding: 24px;
}

.crm-page-header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.crm-page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.crm-page-subtitle {
  color: #6b7280;
  font-size: 14px;
}

.crm-list {
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.crm-list-header,
.crm-list-row {
  display: grid;
  grid-template-columns: 2.4fr 1.6fr 2fr 1.4fr 1.3fr 1fr 1.6fr;
  align-items: center;
  column-gap: 16px;
}

.crm-list-header {
  padding: 12px 20px;
  background: #f9fafb;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

.crm-list-row {
  padding: 14px 20px;
  font-size: 14px;
  border-bottom: 1px solid #f3f4f6;
}

.crm-list-row:last-child {
  border-bottom: none;
}

.crm-list-row:hover {
  background: #f9fafb;
}

/* Name block */

.crm-client-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crm-client-initials {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #1d4ed8;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.crm-client-text {
  min-width: 0;
}

.crm-client-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-client-email,
.crm-client-notes {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column alignment */

.crm-col-company,
.crm-col-email,
.crm-col-phone,
.crm-col-created,
.crm-col-status,
.crm-col-actions {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-col-email {
  font-size: 13px;
}

/* Status pill */

.crm-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.crm-status-client {
  background: #dcfce7;
  color: #15803d;
}

/* Empty state */

.crm-empty-state h2 {
  font-weight: 600;
}

.crm-empty-state p {
  font-size: 14px;
}

/* Responsive layout */

@media (max-width: 992px) {
  /* hide the table header on phones */
  .crm-list-header {
    display: none;
  }

  /* turn each row into a stacked card */
  .crm-list-row {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
  }

  .crm-list-row + .crm-list-row {
    border-top: none;
  }

  /* add spacing between blocks inside the row */
  .crm-col-name,
  .crm-col-company,
  .crm-col-email,
  .crm-col-phone,
  .crm-col-created,
  .crm-col-status,
  .crm-col-actions {
    display: block;
    margin-bottom: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .crm-col-actions {
    margin-top: 8px;
  }

  /* optional tiny label above secondary fields */
  .crm-col-company::before,
  .crm-col-email::before,
  .crm-col-phone::before,
  .crm-col-created::before,
  .crm-col-status::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    margin-bottom: 2px;
  }
}