/* Grid listing */
.wwc-list{--cols:3}
.wwc-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(260px,1fr));gap:14px;margin-top:10px}
.wwc-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.wwc-card__title{font-weight:600;margin-bottom:8px}
.wwc-card__row{font-size:14px;opacity:.9;margin:4px 0}
.wwc-search{display:flex;gap:8px;margin-bottom:8px}.wwc-search input{flex:1}

/* Form layout based on provided mock */
.wwc-form{display:grid;gap:20px;max-width:980px}
.wwc-group{border:1px solid #e5e7eb;border-radius:12px;padding:14px}
.wwc-group legend{padding:0 6px;font-weight:600}
.wwc-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.wwc-field label{display:block;font-weight:600;margin-bottom:6px;font-size:14px}
.wwc-field input,.wwc-field textarea{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.wwc-field textarea{min-height:120px;resize:vertical}
.wwc-btn{background:#111827;color:#fff;padding:10px 14px;border-radius:8px;border:none;cursor:pointer}


/* Fancy card styling + kebab */
.wwc-card{position:relative;border-radius:16px;box-shadow:0 2px 6px rgba(0,0,0,.1);padding:20px}
.wwc-card .header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.wwc-card .logo{width:40px;height:40px;background:#a6d785;border-radius:50%}
.wwc-card .company-name{font-weight:600;font-size:1.2rem}
.wwc-card .address{color:#6aa56f;font-size:.95rem}
.wwc-card hr{border:none;border-top:1px solid #eee;margin:10px 0}
.wwc-card .section-title{font-weight:700;margin-top:10px}
.wwc-card .email,.wwc-card .phone{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#333;margin:3px 0}
.wwc-card .notes{font-size:.85rem;color:#666;margin-top:8px}
.wwc-card .address-tag{background:#ffecec;color:#c84a4a;display:inline-block;padding:4px 8px;border-radius:12px;font-size:.9rem;margin-bottom:6px}
.wwc-card .btn{background:#e64c3c;color:#fff;padding:6px 14px;border:none;border-radius:20px;font-size:.85rem;cursor:default;margin-bottom:10px}
.wwc-card .kebab{position:absolute;right:10px;top:10px;cursor:pointer;background:none;border:none;color:#111;padding:6px;line-height:0}
.wwc-card .kebab:after{content:'⋮';font-size:18px}
.wwc-card .menu{position:absolute;right:10px;top:38px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;min-width:160px;box-shadow:0 6px 18px rgba(0,0,0,.08);display:none;z-index:10}
.wwc-card .menu a{display:block;padding:10px 12px;text-decoration:none;color:#111}
.wwc-card .menu a:hover{background:#f3f4f6}
/* Simple modal */
.wwc-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:9999}
.wwc-modal__inner{background:#fff;border-radius:14px;padding:18px;max-width:680px;width:92vw;max-height:90vh;overflow:auto}
.wwc-modal__title{font-weight:700;margin-bottom:10px}
.wwc-modal .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wwc-modal input,.wwc-modal textarea{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px}
.wwc-modal .actions{margin-top:12px;display:flex;gap:10px;justify-content:flex-end}

.wwc-trash .wwc-btn{background:#0f172a;color:#fff;border-radius:8px;padding:6px 12px;border:0}

.wwc-list .wwc-add{background:#7ec27f;border:0;color:#fff;border-radius:18px;padding:8px 14px;margin:10px 0;cursor:pointer}
.wwc-modal__body .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:900px){ .wwc-modal__body .grid{grid-template-columns:1fr} }
.wwc-modal__body label{font-size:12px;color:#475569}
.wwc-modal__body input,.wwc-modal__body textarea{font-size:14px}


/* View switch + companies table */
.wwc-view-switch{display:flex;gap:8px;margin:8px 0}
.wwc-toggle{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.wwc-toggle.active{background:#111827;color:#fff}
.wwc-table{width:100%;border-collapse:collapse}
.wwc-table th,.wwc-table td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px}
.wwc-table td:last-child{width:60px}
.menu-wrap{position:relative;display:inline-block}
.wwc-row .kebab{cursor:pointer;border:1px solid #e5e7eb;background:#fff;padding:6px;border-radius:6px;line-height:0}
.wwc-row .kebab:after{content:'⋮';font-size:18px}
.wwc-row .menu{position:absolute;right:0;top:28px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;min-width:160px;box-shadow:0 6px 18px rgba(0,0,0,.08);display:none;z-index:20}
.wwc-row .menu a{display:block;padding:10px 12px;text-decoration:none;color:#111}
.wwc-row .menu a:hover{background:#f3f4f6}


/* View switch beside search */
.wwc-search{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.wwc-search input{flex:1}
.wwc-search .wwc-view-switch{display:flex;gap:8px;margin-left:auto}
.wwc-toggle{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.wwc-toggle.active{background:#111827;color:#fff}


/* === WWC New Contact form (rounded fields + button colors) === */
:root {
  --wwc-red:   #e74c3c;
  --wwc-green: #27ae60;
  --wwc-border:#e5e7eb;
}
.wwc-form.wwc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.wwc-form.wwc-grid h3 {
  grid-column: 1 / -1;
  margin: 8px 0 4px;
}
.wwc-form input,
.wwc-form textarea,
.wwc-form select {
  width: 100%;
  border: 1px solid var(--wwc-border);
  border-radius: 10px;
  padding: 10px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}
.wwc-form textarea {
  min-height: 120px;
  resize: vertical;
}
.wwc-form input:focus,
.wwc-form textarea:focus,
.wwc-form select:focus {
  border-color: var(--wwc-red);
  box-shadow: 0 0 0 3px rgba(231,76,60,.12);
}
.wwc-btn {
  background: var(--wwc-red);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .2s ease;
  display: inline-block;
}
.wwc-btn:hover { background: var(--wwc-green); }
.wwc-actions { grid-column: 1 / -1; margin-top: 6px; }
/* === /WWC New Contact form === */



/* Typeahead dropdown */
.wwc-suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  z-index: 20;
}
.wwc-sugg-item { padding: 8px 12px; cursor: pointer; }
.wwc-sugg-item:hover { background: #f7f7f7; }


/* === WWC suggest dropdown === */
.wwc-search { position: relative; }
.wwc-suggest {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:.5rem;
  margin-top:.25rem;
  max-height:320px;
  overflow:auto;
  box-shadow:0 8px 16px rgba(0,0,0,.06);
}
.wwc-suggest__item{padding:.5rem .75rem;cursor:pointer}
.wwc-suggest__item:hover{background:#f5f6f7}
.wwc-suggest__item .label{font-weight:600}
.wwc-suggest__item .sublabel{color:#6b7280;font-size:.9em}

/* Clear button */
.wwc-btn--clear{border:none;background:transparent;font-size:18px;line-height:1;padding:0 .25rem;cursor:pointer;margin-left:.25rem}


/* wwc-btn--clear style v2 */
.wwc-btn--clear{
  background: none !important;
  border: none !important;
  color: #111 !important;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
}
.wwc-btn--clear:hover{
  color: #2e7d32 !important; /* green hover */
}


/* === Kebab button style === */
.wwc-kebab__btn,
button.wwc-kebab__btn {
  background: none !important;
  border: none !important;
  color: #111 !important;
  padding: 6px 8px;
  line-height: 1;
  cursor: pointer;
}
.wwc-kebab__btn:hover {
  color: #2e7d32 !important; /* green hover */
}
/* Menu panel basic positioning if needed */
.wwc-kebab__menu {
  position: absolute;
  z-index: 30;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
  min-width: 180px;
}
.wwc-kebab__menu [data-action] {
  display: block;
  padding: .5rem .75rem;
  cursor: pointer;
}
.wwc-kebab__menu [data-action]:hover {
  background: #f5f6f7;
}
.wwc-card .kebab:hover{color:#95C569}