/* ═══════════════════════════════════════════════════════════════════════
   RayyanContactManager — front-end + admin styles
   Redesigned to match the RayyanMailHub Pro visual system: navy sidebar,
   blue primary accent, soft slate palette, card-based sections.
   All original class names are preserved so the existing JS (cm-script.js)
   keeps working unmodified — only markup structure & visuals changed.
═══════════════════════════════════════════════════════════════════════ */

:root{
	--cm-ink:#1a202c;
	--cm-navy:#1a202c;
	--cm-navy-2:#2d3748;
	--cm-slate:#4a5568;
	--cm-slate-light:#718096;
	--cm-border:#e2e8f0;
	--cm-bg:#f7fafc;
	--cm-card:#ffffff;
	--cm-primary:#3b82f6;
	--cm-primary-dark:#2563eb;
	--cm-primary-bg:#eff6ff;
	--cm-green:#48bb78;
	--cm-green-bg:#c6f6d5;
	--cm-green-text:#22543d;
	--cm-red:#e53e3e;
	--cm-red-bg:#fed7d7;
	--cm-red-text:#9b2c2c;
	--cm-amber:#ed8936;
	--cm-amber-bg:#fefcbf;
	--cm-amber-text:#744210;
	--cm-blue-bg:#bee3f8;
	--cm-blue-text:#2b6cb0;
	--cm-grey-bg:#e2e8f0;
	--cm-grey-text:#4a5568;
	--cm-radius:10px;
	--cm-radius-lg:12px;
	--cm-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
	--cm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html.wp-toolbar{ padding-top:0 !important; }
body.cm-pro-blank{ margin:0; background:var(--cm-bg); font-family:var(--cm-font); color:var(--cm-ink); }
body.cm-pro-blank #wpadminbar{ display:none !important; }

body.cm-pro-fullwidth #primary,
body.cm-pro-fullwidth .site-content,
body.cm-pro-fullwidth .content-area{
	max-width:100% !important; width:100% !important; padding:0 !important; margin:0 !important; float:none !important;
}
body.cm-pro-fullwidth #secondary{ display:none !important; }
body.cm-pro-fullwidth header.site-header,
body.cm-pro-fullwidth #masthead,
body.cm-pro-fullwidth .site-header,
body.cm-pro-fullwidth nav.main-navigation,
body.cm-pro-fullwidth footer.site-footer,
body.cm-pro-fullwidth #colophon,
body.cm-pro-fullwidth .site-footer{ display:none !important; }

.cm-muted{ color:var(--cm-slate-light); }

/* Buttons */
.cm-btn{
	display:inline-flex; align-items:center; gap:6px;
	font-family:var(--cm-font); font-size:.9rem; font-weight:600;
	padding:10px 18px; border-radius:8px; border:2px solid transparent;
	cursor:pointer; text-decoration:none; line-height:1.2; white-space:nowrap;
	transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cm-btn svg{ width:16px; height:16px; flex-shrink:0; }
.cm-btn:focus-visible{ outline:3px solid #93c5fd; outline-offset:2px; }
.cm-btn-primary{ background:var(--cm-primary); color:#fff; }
.cm-btn-primary:hover{ background:var(--cm-primary-dark); color:#fff; }
.cm-btn-secondary{ background:#fff; color:var(--cm-primary); border-color:var(--cm-primary); }
.cm-btn-secondary:hover{ background:var(--cm-primary-bg); }
.cm-btn-ghost{ background:transparent; color:var(--cm-slate); border-color:transparent; }
.cm-btn-ghost:hover{ color:var(--cm-ink); background:var(--cm-bg); }
.cm-btn-danger{ background:var(--cm-red-bg); color:var(--cm-red-text); }
.cm-btn-danger:hover{ background:var(--cm-red); color:#fff; }
.cm-btn-block{ width:100%; justify-content:center; }
.cm-file-btn{ position:relative; }

/* Auth pages */
.cm-auth-wrap{
	min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding:24px 16px; background:linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
	font-family:var(--cm-font);
}
.cm-auth-brand{ text-align:center; margin-bottom:28px; color:#fff; }
.cm-auth-icon{
	width:56px; height:56px; background:rgba(255,255,255,.12); border-radius:14px;
	display:flex; align-items:center; justify-content:center; margin:0 auto 14px; backdrop-filter:blur(8px);
}
.cm-auth-icon svg{ width:28px; height:28px; color:#fff; }
.cm-auth-brand-name{ font-size:1.4rem; font-weight:700; letter-spacing:-.3px; margin:0; }
.cm-auth-brand-tagline{ font-size:.85rem; color:rgba(255,255,255,.65); margin-top:4px; }

.cm-auth-card{
	background:var(--cm-card); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.35);
	padding:36px; width:100%; max-width:420px;
}
.cm-auth-title{ font-size:1.3rem; margin:0 0 6px; font-weight:700; letter-spacing:-.02em; color:var(--cm-ink); text-align:center; }
.cm-auth-subtitle{ margin:0 0 24px; color:var(--cm-slate); font-size:.85rem; text-align:center; }
.cm-auth-switch{ text-align:center; margin-top:20px; font-size:.85rem; color:var(--cm-slate); }
.cm-auth-switch a{ color:var(--cm-primary); font-weight:600; text-decoration:none; }
.cm-auth-switch a:hover{ text-decoration:underline; }
.cm-auth-footer{ margin-top:28px; font-size:.78rem; color:rgba(255,255,255,.4); text-align:center; }

.cm-password-wrap{ position:relative; }
.cm-password-wrap input{ padding-right:42px; }
.cm-pwd-toggle{
	position:absolute; right:10px; top:50%; transform:translateY(-50%); background:transparent; border:none;
	cursor:pointer; color:#a0aec0; padding:4px; display:flex; align-items:center; justify-content:center;
	border-radius:4px; transition:color .15s;
}
.cm-pwd-toggle:hover{ color:var(--cm-slate); }
.cm-pwd-toggle svg{ width:18px; height:18px; }

/* Forms */
.cm-field{ margin-bottom:16px; }
.cm-field:last-child{ margin-bottom:0; }
.cm-field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--cm-slate); }
.cm-field-note{ font-size:.78rem; color:var(--cm-slate-light); margin-top:4px; }
.cm-field input[type=text],
.cm-field input[type=email],
.cm-field input[type=password],
.cm-field input[type=date],
.cm-field select,
.cm-field textarea{
	width:100%; padding:9px 12px; border:1.5px solid var(--cm-border); border-radius:8px;
	font-family:var(--cm-font); font-size:.9rem; background:#fff; color:var(--cm-ink);
	transition:border-color .15s, box-shadow .15s;
}
.cm-field input:focus,.cm-field select:focus,.cm-field textarea:focus{
	outline:none; border-color:var(--cm-primary); box-shadow:0 0 0 3px rgba(66,153,225,.2);
}
.cm-field-inline{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--cm-slate); }
.cm-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:640px){ .cm-form-grid{ grid-template-columns:1fr; } }

.cm-alert{ display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:8px; font-size:.85rem; margin-bottom:16px; }
.cm-alert svg{ flex-shrink:0; width:18px; height:18px; margin-top:1px; }
.cm-alert-error{ background:#fff5f5; color:var(--cm-red-text); border:1px solid var(--cm-red-bg); }
.cm-alert-success{ background:#f0fff4; color:var(--cm-green-text); border:1px solid var(--cm-green-bg); }
.cm-alert p{ margin:2px 0; }

.cm-multi-group{ margin-bottom:18px; }
.cm-multi-group > label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:6px; color:var(--cm-slate); }
.cm-multi-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.cm-multi-row input{ flex:1; padding:9px 12px; border:1.5px solid var(--cm-border); border-radius:8px; font-size:.9rem; }
.cm-email-row{ flex-wrap:wrap; }
.cm-email-row input{ min-width:120px; }
.cm-row-remove{
	background:var(--cm-red-bg); color:var(--cm-red-text); border:none; border-radius:6px;
	width:30px; height:34px; cursor:pointer; font-size:16px; line-height:1; transition:background .15s;
}
.cm-row-remove:hover{ background:var(--cm-red); color:#fff; }
.cm-btn-add-row{
	background:var(--cm-primary-bg); color:var(--cm-primary); border:1.5px dashed var(--cm-primary);
	border-radius:8px; padding:7px 14px; font-size:.82rem; font-weight:600; cursor:pointer; transition:background .15s;
}
.cm-btn-add-row:hover{ background:#dbeafe; }

/* Dashboard layout */
.cm-layout{ display:flex; min-height:100vh; font-family:var(--cm-font); color:var(--cm-ink); background:var(--cm-bg); }

.cm-sidebar{
	width:240px; flex-shrink:0; background:var(--cm-navy); color:#cbd5e0; display:flex; flex-direction:column;
	position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:200;
	transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.cm-sidebar-brand{ display:flex; align-items:center; gap:10px; padding:20px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.cm-sidebar-icon{
	width:36px; height:36px; background:var(--cm-primary); border-radius:8px; display:flex; align-items:center;
	justify-content:center; flex-shrink:0;
}
.cm-sidebar-icon svg{ width:18px; height:18px; color:#fff; }
.cm-sidebar-brand-name{ font-size:.9rem; font-weight:700; color:#fff; line-height:1.2; }

.cm-sidebar-user{ display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.cm-avatar{
	width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#4299e1,#667eea); color:#fff;
	font-size:.9rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cm-sidebar-user-name{ font-size:.85rem; font-weight:600; color:#e2e8f0; line-height:1.3; }
.cm-sidebar-user-plan{ font-size:.75rem; color:#718096; }

.cm-nav{ flex:1; padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
.cm-nav-item{
	display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:#a0aec0;
	font-size:.875rem; font-weight:500; text-decoration:none; transition:background .15s, color .15s;
	cursor:pointer; border:none; background:transparent; width:100%; text-align:left; font-family:inherit;
}
.cm-nav-item svg{ width:18px; height:18px; flex-shrink:0; }
.cm-nav-item:hover{ background:rgba(255,255,255,.07); color:#e2e8f0; }
.cm-nav-item--active{ background:rgba(59,130,246,.2); color:#63b3ed; }
.cm-nav-item--active:hover{ background:rgba(59,130,246,.25); }
.cm-nav-item--logout{ color:#fc8181; }
.cm-nav-item--logout:hover{ background:rgba(252,129,129,.1); }
.cm-sidebar-footer{ padding:8px; border-top:1px solid rgba(255,255,255,.08); }

.cm-sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; }
.cm-sidebar-overlay--visible{ display:block; }

.cm-main{ margin-left:240px; flex:1; padding:0; min-width:0; }

.cm-topbar{
	display:flex; align-items:center; gap:12px; padding:16px 24px; background:#fff;
	border-bottom:1px solid var(--cm-border); position:sticky; top:0; z-index:100;
}
.cm-topbar-title{ font-size:1.05rem; font-weight:700; color:var(--cm-ink); flex:1; display:flex; flex-direction:column; gap:2px; }
.cm-topbar-subtitle{ font-size:.8rem; font-weight:400; color:var(--cm-slate-light); }
.cm-topbar-right{ display:flex; align-items:center; gap:12px; }

.cm-hamburger{
	display:none; flex-direction:column; gap:4px; background:transparent; border:none; cursor:pointer;
	padding:4px; border-radius:6px;
}
.cm-hamburger span{ display:block; width:22px; height:2px; background:var(--cm-slate); border-radius:2px; }

.cm-stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:24px 24px 0; }
.cm-stat-card{
	background:var(--cm-card); border:1px solid var(--cm-border); border-radius:var(--cm-radius);
	padding:18px 16px; display:flex; align-items:center; gap:14px; transition:box-shadow .2s;
}
.cm-stat-card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.08); }
.cm-stat-icon{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cm-stat-icon svg{ width:22px; height:22px; }
.cm-stat-icon--primary{ background:var(--cm-primary-bg); color:var(--cm-primary); }
.cm-stat-icon--green{ background:var(--cm-green-bg); color:var(--cm-green-text); }
.cm-stat-icon--red{ background:var(--cm-red-bg); color:var(--cm-red-text); }
.cm-stat-icon--amber{ background:var(--cm-amber-bg); color:var(--cm-amber-text); }
.cm-stat-body{ display:flex; flex-direction:column; }
.cm-stat-value{ font-size:1.4rem; font-weight:700; line-height:1.2; color:var(--cm-ink); }
.cm-stat-label{ font-size:.75rem; color:var(--cm-slate-light); margin-top:2px; }

.cm-card{
	background:var(--cm-card); border:1px solid var(--cm-border); border-radius:var(--cm-radius-lg);
	margin:24px; overflow:hidden; transition:box-shadow .2s;
}
.cm-card:hover{ box-shadow:0 4px 12px rgba(0,0,0,.06); }
.cm-card-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--cm-border); }
.cm-card-header h2{ font-size:1rem; font-weight:700; color:var(--cm-ink); margin:0; }
.cm-card-body{ padding:20px; }
.cm-section + .cm-section{ margin-top:0; }

.cm-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.75rem; font-weight:600; }
.cm-badge--blue{ background:var(--cm-blue-bg); color:var(--cm-blue-text); }

/* Toolbar & Filters */
.cm-toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.cm-filter-bar{
	background:var(--cm-bg); border:1px solid var(--cm-border); border-radius:var(--cm-radius);
	padding:16px; margin-bottom:0; display:flex; flex-direction:column; gap:12px;
}
.cm-filter-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cm-filter-row select, .cm-filter-row input[type=text]{
	padding:9px 12px; border:1.5px solid var(--cm-border); border-radius:8px; font-size:.9rem; background:#fff;
}
.cm-filter-row input[type=text]{ flex:1; min-width:220px; }
.cm-filter-row label{ font-size:.85rem; color:var(--cm-slate); display:flex; align-items:center; gap:6px; }
.cm-filter-row input[type=date]{ padding:8px 10px; border:1.5px solid var(--cm-border); border-radius:8px; }

.cm-bulk-bar{
	background:var(--cm-primary-bg); border:1px solid #bfdbfe; border-radius:var(--cm-radius);
	padding:12px 16px; margin-top:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:.85rem;
}
.cm-bulk-bar select{ padding:7px 10px; border-radius:6px; border:1.5px solid var(--cm-border); }

/* Table */
.cm-table-wrap{ overflow-x:auto; }
.cm-table{ width:100%; border-collapse:collapse; font-size:.875rem; min-width:800px; }
.cm-table thead th{
	text-align:left; padding:12px 20px; background:var(--cm-bg); color:var(--cm-slate);
	font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700;
	border-bottom:1px solid var(--cm-border); white-space:nowrap;
}
.cm-table tbody td{ padding:14px 20px; border-bottom:1px solid var(--cm-border); vertical-align:top; }
.cm-table tbody tr:last-child td{ border-bottom:none; }
.cm-table tbody tr:hover{ background:#f8fafc; }
.cm-loading-row, .cm-empty-row{ text-align:center; color:var(--cm-slate-light); padding:40px 0 !important; }

.cm-name-cell strong{ display:block; color:var(--cm-ink); }
.cm-name-cell span{ font-size:.75rem; color:var(--cm-slate-light); }
.cm-contact-info div{ font-size:.8rem; margin-bottom:2px; color:var(--cm-slate); }

.cm-badge-pending_response{ background:var(--cm-amber-bg); color:var(--cm-amber-text); }
.cm-badge-phone_contacted{ background:var(--cm-blue-bg); color:var(--cm-blue-text); }
.cm-badge-response_received{ background:var(--cm-green-bg); color:var(--cm-green-text); }
.cm-badge-not_delivered{ background:var(--cm-grey-bg); color:var(--cm-grey-text); }
.cm-badge-blacklisted{ background:var(--cm-red-bg); color:var(--cm-red-text); }
.cm-badge-our_customer{ background:#e5f7d9; color:#5a8a1d; }

.cm-row-actions button{
	background:none; border:none; cursor:pointer; color:var(--cm-primary); font-size:.82rem; font-weight:600; margin-right:12px;
}
.cm-row-actions button:hover{ text-decoration:underline; }
.cm-row-actions button.cm-delete-link{ color:var(--cm-red); }

.cm-pagination{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.cm-pagination button{
	border:1.5px solid var(--cm-border); background:#fff; border-radius:6px; padding:6px 12px;
	font-size:.82rem; cursor:pointer; transition:background .15s, border-color .15s;
}
.cm-pagination button:hover{ border-color:var(--cm-primary); color:var(--cm-primary); }
.cm-pagination button.active{ background:var(--cm-primary); color:#fff; border-color:var(--cm-primary); }
.cm-pagination button:disabled{ opacity:.4; cursor:default; }

/* Modal */
.cm-modal-overlay{
	position:fixed; inset:0; background:rgba(26,32,44,.55); display:flex; align-items:flex-start;
	justify-content:center; z-index:99999; padding:40px 16px; overflow-y:auto;
}
.cm-modal{
	background:#fff; border-radius:14px; max-width:640px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.25);
	animation:cmModalIn .18s ease;
}
@keyframes cmModalIn{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:scale(1); } }
.cm-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--cm-border); }
.cm-modal-header h2{ margin:0; font-size:1.1rem; font-weight:700; color:var(--cm-ink); }
.cm-modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:#a0aec0; line-height:1; }
.cm-modal-close:hover{ color:var(--cm-red); }
.cm-modal-body{ padding:24px; max-height:70vh; overflow-y:auto; }
.cm-modal-footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; padding-top:16px; border-top:1px solid var(--cm-border); }

/* Admin screens (wp-admin context) */
.cm-admin-wrap .cm-stat-grid{ margin-top:16px; padding:0; }
.cm-admin-wrap .cm-stat-card{ background:#fff; }
.cm-role-select{ padding:6px 8px; border-radius:6px; border:1px solid var(--cm-border); }

/* Responsive */
@media (max-width:900px){
	.cm-stat-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
	.cm-sidebar{ transform:translateX(-100%); box-shadow:4px 0 24px rgba(0,0,0,.4); }
	.cm-sidebar.cm-sidebar--open{ transform:translateX(0); }
	.cm-main{ margin-left:0; }
	.cm-hamburger{ display:flex; }
	.cm-stat-grid{ padding:16px 16px 0; gap:12px; }
	.cm-card{ margin:16px; }
	.cm-topbar{ padding:12px 16px; }
	.cm-toolbar .cm-btn{ width:100%; justify-content:center; }
}
@media (max-width:640px){
	.cm-auth-card{ padding:28px 22px; }
	.cm-stat-grid{ grid-template-columns:1fr; }
	.cm-toolbar{ flex-direction:column; }
}