/* ╔══════════════════════════════════════════════════════════════╗
   ║  ARK Real Estate Suite – Frontend  v2.1  (Dark Theme)       ║
   ║  Aligned with gajed.net: #0a0a0a bg · #e11d2e red accent    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --ark-bg:        #0d0d0d;
  --ark-surface:   #161616;
  --ark-surface2:  #1e1e1e;
  --ark-border:    #2a2a2a;
  --ark-border2:   #333333;
  --ark-text:      #f0f0f0;
  --ark-muted:     #888888;
  --ark-muted2:    #555555;
  --ark-red:       #e11d2e;
  --ark-red-h:     #c8192a;
  --ark-red-glow:  rgba(225,29,46,.25);
  --ark-green:     #22c55e;
  --ark-blue:      #3b82f6;
  --ark-yellow:    #f59e0b;
  --ark-radius:    10px;
  --ark-radius-sm: 6px;
  --ark-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────── */
#ark-dashboard, #ark-dashboard * { box-sizing: border-box; }
#ark-dashboard { font-family: var(--ark-font); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  MAIN DASHBOARD SHELL                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-dashboard {
  background: var(--ark-bg);
  border: 1px solid var(--ark-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ark-border), 0 20px 60px rgba(0,0,0,.6);
}

/* ── Top header bar ─────────────────────────────────────────────── */
.ark-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--ark-surface);
  border-bottom: 1px solid var(--ark-border);
  gap: 16px;
  flex-wrap: wrap;
}

.ark-dash-brand-wrap { display: flex; align-items: center; }
.ark-dash-logo       { height: 30px; width: auto; }
.ark-dash-brand {
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
  color: var(--ark-text);
}
.ark-dash-brand span { color: var(--ark-red); }

/* User section */
.ark-dash-user {
  display: flex; align-items: center; gap: 10px;
}
.ark-dash-user-info {
  display: flex; flex-direction: column; gap: 3px; line-height: 1;
}
.ark-dash-user-info strong {
  font-size: 13px; font-weight: 600; color: var(--ark-text);
}

/* Avatar circle */
.ark-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ark-red); color: #fff;
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 2px solid var(--ark-border2);
}
.ark-avatar-lg { width: 52px; height: 52px; font-size: 20px; }

/* Subscription status badge */
.ark-sub-badge {
  display: inline-block; font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px;
  letter-spacing: .6px; text-transform: uppercase;
  line-height: 1.4;
}
.ark-sub-badge--active   { background: rgba(34,197,94,.15);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.ark-sub-badge--trialing { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.ark-sub-badge--inactive { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.ark-sub-badge--cancelled,
.ark-sub-badge--canceled { background: rgba(225,29,46,.15);  color: #f87171; border: 1px solid rgba(225,29,46,.3); }

/* Logout button */
.ark-dash-logout-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1px solid var(--ark-border2);
  color: var(--ark-muted); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; padding: 0;
}
.ark-dash-logout-btn:hover {
  background: rgba(225,29,46,.12);
  border-color: var(--ark-red);
  color: var(--ark-red);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  TAB NAVIGATION                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-tabs-wrap {
  background: var(--ark-surface);
  border-bottom: 1px solid var(--ark-border);
  overflow-x: auto;
  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
}
.ark-tabs-wrap::-webkit-scrollbar { display: none; }

.ark-tabs {
  display: flex;
  white-space: nowrap;
  padding: 0 8px;
  min-width: max-content;
}

.ark-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 16px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ark-muted);
  background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap; letter-spacing: .1px;
  position: relative;
}
.ark-tab .dashicons {
  font-size: 15px; width: 15px; height: 15px;
  transition: color .15s;
}
.ark-tab:hover {
  color: var(--ark-text);
}
.ark-tab:hover .dashicons { color: var(--ark-red); }

.ark-tab.active {
  color: var(--ark-text);
  border-bottom-color: var(--ark-red);
  font-weight: 700;
}
.ark-tab.active .dashicons { color: var(--ark-red); }

/* Active tab background highlight */
.ark-tab.active::before {
  content: '';
  position: absolute; inset: 0; bottom: 0;
  background: rgba(225,29,46,.06);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PANEL + SPINNER                                             ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-panel {
  background: var(--ark-bg);
  padding: 28px 24px;
  min-height: 420px;
  position: relative;
}

.ark-panel-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}

.ark-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--ark-border2);
  border-top-color: var(--ark-red);
  border-radius: 50%;
  animation: ark-spin .65s linear infinite;
}
@keyframes ark-spin { to { transform: rotate(360deg); } }

#ark-panel-content { animation: ark-fadein .22s ease; }
@keyframes ark-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Dashboard footer ───────────────────────────────────────────── */
.ark-dash-footer {
  background: var(--ark-surface);
  border-top: 1px solid var(--ark-border);
  padding: 10px 22px;
  font-size: 11px; color: var(--ark-muted2);
  text-align: center; letter-spacing: .3px;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BANNERS / NOTICES                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-top-banner { margin-bottom: 16px; border-radius: var(--ark-radius-sm); padding: 11px 14px; font-size: 13px; }
.ark-success {
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  color: #4ade80; border-radius: var(--ark-radius-sm);
  padding: 11px 14px; margin-bottom: 14px; font-size: 13px;
}
.ark-alert {
  background: rgba(225,29,46,.1); border: 1px solid rgba(225,29,46,.3);
  color: #f87171; border-radius: var(--ark-radius-sm);
  padding: 11px 14px; margin-bottom: 14px; font-size: 13px;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  BUTTONS                                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-btn-submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 12px 20px;
  background: var(--ark-red); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  border: none; border-radius: var(--ark-radius); cursor: pointer;
  transition: background .18s, box-shadow .18s, transform .12s;
  font-family: var(--ark-font);
}
.ark-btn-submit:hover {
  background: var(--ark-red-h);
  box-shadow: 0 0 0 3px var(--ark-red-glow);
  transform: translateY(-1px);
}
.ark-btn-submit:active  { transform: none; }
.ark-btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.ark-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px;
  background: var(--ark-surface2); color: var(--ark-text);
  border: 1px solid var(--ark-border2); border-radius: var(--ark-radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all .15s;
  font-family: var(--ark-font);
}
.ark-btn-secondary:hover {
  background: var(--ark-border); border-color: var(--ark-muted);
  color: var(--ark-text);
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  FORMS  (profile / auth)                                     ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-form { display: flex; flex-direction: column; gap: 14px; }
.ark-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ark-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.ark-form small { font-size: 11px; font-weight: 400; color: var(--ark-muted2); text-transform: none; letter-spacing: 0; }

.ark-form input[type="text"],
.ark-form input[type="email"],
.ark-form input[type="password"],
.ark-form input[type="tel"],
.ark-form select,
.ark-form textarea {
  width: 100%; padding: 10px 13px;
  background: var(--ark-surface2);
  border: 1px solid var(--ark-border2);
  border-radius: var(--ark-radius-sm);
  font-size: 14px; color: var(--ark-text);
  font-family: var(--ark-font);
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.ark-form input:focus,
.ark-form select:focus,
.ark-form textarea:focus {
  border-color: var(--ark-red);
  box-shadow: 0 0 0 3px var(--ark-red-glow);
}
.ark-form input::placeholder,
.ark-form textarea::placeholder { color: var(--ark-muted2); }
.ark-form textarea { resize: vertical; min-height: 80px; }
.ark-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ark-form-check {
  flex-direction: row !important; align-items: center;
  gap: 8px; font-weight: 400; color: var(--ark-muted);
  text-transform: none; letter-spacing: 0; font-size: 13px;
}
.ark-form-check input { width: auto; accent-color: var(--ark-red); }
.ark-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* Divider with label */
.ark-form-divider {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--ark-muted2); text-transform: uppercase; letter-spacing: .5px;
}
.ark-form-divider::before,
.ark-form-divider::after { content: ''; flex: 1; height: 1px; background: var(--ark-border); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  AUTH BOX  (login / signup shortcodes)                       ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-auth-box {
  max-width: 440px; margin: 32px auto;
  background: var(--ark-surface);
  border: 1px solid var(--ark-border);
  border-radius: 14px; padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ark-auth-header { margin-bottom: 24px; }
.ark-auth-header h2 {
  font-size: 22px; font-weight: 800; color: var(--ark-text); margin: 0 0 6px;
}
.ark-auth-header p { font-size: 14px; color: var(--ark-muted); margin: 0; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PROFILE TAB                                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-profile-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px; align-items: start;
}
@media (max-width: 680px) { .ark-profile-wrap { grid-template-columns: 1fr; } }

.ark-profile-card {
  background: var(--ark-surface);
  border: 1px solid var(--ark-border);
  border-radius: var(--ark-radius);
  padding: 28px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ark-profile-avatar {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--ark-red); color: #fff;
  font-size: 26px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px; border: 3px solid var(--ark-border2);
}
.ark-profile-name    { font-size: 15px; font-weight: 700; color: var(--ark-text); }
.ark-profile-email   { font-size: 12px; color: var(--ark-muted); word-break: break-all; }
.ark-profile-company { font-size: 12px; color: var(--ark-red); font-weight: 600; }

.ark-profile-form-wrap {
  background: var(--ark-surface);
  border: 1px solid var(--ark-border);
  border-radius: var(--ark-radius);
  padding: 26px 28px;
}
.ark-profile-form-wrap h3 {
  font-size: 15px; font-weight: 700; color: var(--ark-text);
  margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--ark-border);
}
.ark-profile-msg {
  border-radius: var(--ark-radius-sm);
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  SUBSCRIPTION / ACCOUNT TAB                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-account-box {
  max-width: 520px;
  background: var(--ark-surface);
  border: 1px solid var(--ark-border);
  border-radius: var(--ark-radius); padding: 28px;
}
.ark-account-user {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--ark-border);
}
.ark-account-user h3 { font-size: 16px; font-weight: 700; color: var(--ark-text); margin: 0 0 4px; }
.ark-account-user p  { font-size: 13px; color: var(--ark-muted); margin: 0; }

.ark-account-status-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--ark-border);
  font-size: 13px; color: var(--ark-muted);
}
.ark-account-status-row:last-of-type { border-bottom: none; }
.ark-account-status-row code {
  font-size: 11px; background: var(--ark-surface2);
  color: var(--ark-muted); padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--ark-border);
}
.ark-account-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.ark-checkout-msg { margin-top: 10px; font-size: 13px; color: #f87171; min-height: 18px; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  SUBSCRIPTION GATE                                           ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-gate {
  max-width: 480px; margin: 32px auto;
  background: var(--ark-surface);
  border: 1px solid var(--ark-border);
  border-radius: 16px; padding: 44px 36px;
  text-align: center;
  box-shadow: 0 0 0 1px var(--ark-border), 0 20px 60px rgba(225,29,46,.08);
}
.ark-gate-icon  { font-size: 38px; margin-bottom: 14px; }
.ark-gate h2    { font-size: 21px; font-weight: 800; color: var(--ark-text); margin: 0 0 8px; }
.ark-gate > p   { color: var(--ark-muted); font-size: 14px; margin-bottom: 22px; }
.ark-gate-features {
  list-style: none; margin: 0 0 26px; padding: 0;
  text-align: left; display: inline-block;
}
.ark-gate-features li {
  font-size: 13px; color: var(--ark-text); padding: 5px 0;
  display: flex; align-items: center; gap: 8px;
}
.ark-checkout-btn { width: 100%; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  PILLS  (status indicators)                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-pill {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px;
  text-transform: capitalize; letter-spacing: .3px; line-height: 1.5;
}
.ark-pill--green  { background: rgba(34,197,94,.15);  color: #4ade80; }
.ark-pill--blue   { background: rgba(59,130,246,.15); color: #60a5fa; }
.ark-pill--yellow { background: rgba(245,158,11,.15); color: #fbbf24; }
.ark-pill--red    { background: rgba(225,29,46,.15);  color: #f87171; }
.ark-pill--gray   { background: rgba(255,255,255,.07); color: var(--ark-muted); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  DATA TABLE (front-end users table shortcode)                ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-front-users { overflow-x: auto; }
.ark-data-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ark-text); }
.ark-data-table th {
  text-align: left; padding: 10px 14px;
  background: var(--ark-surface2);
  border-bottom: 1px solid var(--ark-border);
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ark-muted);
}
.ark-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ark-border);
  color: var(--ark-text);
}
.ark-data-table tr:hover td { background: rgba(255,255,255,.03); }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE                                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */
@media (max-width: 640px) {
  .ark-dash-header   { padding: 12px 16px; }
  .ark-tabs-wrap     { padding: 0; }
  .ark-tab           { padding: 11px 13px; font-size: 12px; gap: 5px; }
  .ark-tab .dashicons{ display: none; }  /* hide icons on mobile to save space */
  .ark-panel         { padding: 18px 14px; }
  .ark-auth-box      { padding: 24px 18px; margin: 16px; }
  .ark-form-row      { grid-template-columns: 1fr; }
  .ark-gate          { padding: 28px 20px; margin: 16px; }
  .ark-profile-form-wrap { padding: 18px; }
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  ADMIN FRONTEND SHORTCODE  (ark_real_estate_suite_admin)     ║
   ╚══════════════════════════════════════════════════════════════╝ */
.ark-front-admin { font-family: var(--ark-font); }
.ark-front-admin h2 { font-size: 18px; font-weight: 700; color: var(--ark-text); margin-bottom: 16px; }
.ark-front-modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.ark-front-mod-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px;
  background: var(--ark-surface); border: 1px solid var(--ark-border);
  border-radius: var(--ark-radius); text-align: center; text-decoration: none;
  color: var(--ark-text); transition: all .18s;
}
.ark-front-mod-card:hover {
  background: rgba(225,29,46,.07); border-color: var(--ark-red);
  color: var(--ark-red); transform: translateY(-2px);
}
.ark-front-mod-card .dashicons { font-size: 24px; width: 24px; height: 24px; color: var(--ark-red); }
.ark-front-mod-card strong { font-size: 12px; font-weight: 700; }

/* ── Branding override (from WP settings color picker) ───────────
   If admin sets a custom brand_color it comes through as --ark-primary
   on the .ark-dashboard element; map it to --ark-red so it cascades. */
.ark-dashboard[style*="--ark-primary"] {
  --ark-red: var(--ark-primary, #e11d2e);
}

/* ═══════════════════════════════════════════════════════════
   MODULE PLACEHOLDER (missing legacy plugin)
═══════════════════════════════════════════════════════════ */
.ark-module-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: 60px 32px; gap: 10px;
}
.ark-placeholder-icon { font-size: 48px; line-height: 1; }
.ark-module-placeholder h3 { font-size: 18px; font-weight: 700; color: var(--ark-text,#f0f0f0); margin: 0; }
.ark-module-placeholder p  { font-size: 14px; color: var(--ark-muted,#888); margin: 0; }
.ark-placeholder-hint { font-size: 12px !important; color: var(--ark-muted2,#555) !important; }
.ark-module-placeholder code { background: rgba(255,255,255,.07); padding: 2px 7px; border-radius: 4px; font-size: 12px; color: #f87171; }

/* ═══════════════════════════════════════════════════════════
   AGENT INVENTORY (built-in)
═══════════════════════════════════════════════════════════ */
.ark-inv-wrap { display: flex; flex-direction: column; gap: 24px; }

/* Form */
.ark-inv-form-wrap {
  background: var(--ark-surface, #161616);
  border: 1px solid var(--ark-border, #2a2a2a);
  border-radius: 10px; padding: 22px 24px;
}
.ark-inv-form-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.ark-inv-form-header h3 { font-size: 15px; font-weight: 700; color: var(--ark-text,#f0f0f0); margin: 0; }
.ark-inv-cancel-btn {
  background: none; border: 1px solid var(--ark-border2,#333); color: var(--ark-muted,#888);
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 12px;
  transition: all .15s;
}
.ark-inv-cancel-btn:hover { border-color: #f87171; color: #f87171; }

.ark-inv-form .ark-form-row { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
.ark-inv-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.ark-inv-form-actions .ark-btn-submit { width: auto; padding: 11px 28px; }
.ark-inv-msg { font-size: 13px; font-weight: 600; }

/* Table wrapper */
.ark-inv-table-wrap {
  background: var(--ark-surface, #161616);
  border: 1px solid var(--ark-border, #2a2a2a);
  border-radius: 10px; overflow: hidden;
}
.ark-inv-table-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ark-border, #2a2a2a);
  flex-wrap: wrap; gap: 10px;
}
.ark-inv-table-header h3 {
  font-size: 14px; font-weight: 700; color: var(--ark-text,#f0f0f0);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.ark-badge-count {
  display: inline-block; background: rgba(225,29,46,.15); color: #f87171;
  border: 1px solid rgba(225,29,46,.3); border-radius: 20px;
  font-size: 11px; font-weight: 700; padding: 1px 8px;
}
.ark-inv-search {
  background: var(--ark-surface2,#1e1e1e); border: 1px solid var(--ark-border2,#333);
  border-radius: 6px; padding: 7px 12px; font-size: 13px; color: var(--ark-text,#f0f0f0);
  width: 200px; outline: none; transition: border-color .15s;
}
.ark-inv-search:focus { border-color: #e11d2e; }
.ark-inv-search::placeholder { color: var(--ark-muted2,#555); }

.ark-table-scroll { overflow-x: auto; }

/* Inventory table rows */
.ark-inv-table td { font-size: 13px; }
.ark-inv-edit-btn, .ark-inv-del-btn {
  font-size: 11px; padding: 4px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid; font-weight: 600; transition: all .15s; margin-right: 4px;
}
.ark-inv-edit-btn { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #60a5fa; }
.ark-inv-edit-btn:hover { background: rgba(59,130,246,.2); }
.ark-inv-del-btn  { background: rgba(225,29,46,.1); border-color: rgba(225,29,46,.3); color: #f87171; }
.ark-inv-del-btn:hover  { background: rgba(225,29,46,.2); }

/* ARK role badge (profile card) */
.ark-role-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; letter-spacing: .4px; text-transform: uppercase;
  background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3);
  margin-top: 2px;
}

/* ── PDF CRM tab: allow full-width table ─────────────────────────
   The ark-crm-panel pulls itself edge-to-edge by negating the
   ark-panel padding. We also ensure the panel itself has no
   overflow:hidden that would clip it.                            */
.ark-panel { overflow: visible; }
.ark-panel .ark-crm-panel {
  margin-left:  -24px !important;
  margin-right: -24px !important;
  margin-bottom: -28px !important;
  margin-top: 0 !important;
}
@media (max-width: 640px) {
  .ark-panel .ark-crm-panel {
    margin-left:  -14px !important;
    margin-right: -14px !important;
    margin-bottom: -18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   COMPANY TAB
═══════════════════════════════════════════════════════════════ */
.ark-company-wrap { display: flex; flex-direction: column; gap: 20px; }

/* Profile card */
.ark-company-profile-card {
  display: flex; align-items: flex-start; gap: 20px;
  background: var(--ark-surface, #161616);
  border: 1px solid var(--ark-border, #2a2a2a);
  border-radius: 12px; padding: 24px 26px;
  flex-wrap: wrap;
}
.ark-co-logo-wrap { flex-shrink: 0; }
.ark-co-logo { height: 64px; width: auto; border-radius: 8px; object-fit: contain; }
.ark-co-header-info { flex: 1; min-width: 200px; }
.ark-co-header-info h2 { font-size: 20px; font-weight: 800; color: var(--ark-text,#f0f0f0); margin: 0 0 8px; }
.ark-co-meta-row {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--ark-muted,#888); margin-bottom: 8px;
}
.ark-co-meta-row a { color: var(--ark-muted,#888); text-decoration: none; }
.ark-co-meta-row a:hover { color: var(--ark-red,#e11d2e); }
.ark-co-about { font-size: 13px; color: var(--ark-muted,#888); margin: 4px 0 0; line-height: 1.6; }

/* Edit form panel */
.ark-company-edit-form {
  background: var(--ark-surface,#161616);
  border: 1px solid var(--ark-border,#2a2a2a);
  border-radius: 12px; padding: 22px 26px;
}
.ark-company-edit-form h3 {
  font-size: 15px; font-weight: 700; color: var(--ark-text,#f0f0f0);
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--ark-border,#2a2a2a);
}

/* Team section */
.ark-company-team {
  background: var(--ark-surface,#161616);
  border: 1px solid var(--ark-border,#2a2a2a);
  border-radius: 12px; padding: 22px 26px;
}
.ark-co-team-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.ark-co-team-header h3 {
  font-size: 15px; font-weight: 700; color: var(--ark-text,#f0f0f0);
  margin: 0; display: flex; align-items: center; gap: 8px;
}

/* Invite form */
.ark-invite-form {
  background: rgba(255,255,255,.025);
  border: 1px solid var(--ark-border,#2a2a2a);
  border-radius: 8px; padding: 16px 18px; margin-bottom: 14px;
}
.ark-invite-form .ark-form { flex-direction: row; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ark-invite-form .ark-form label { flex: 1; min-width: 200px; }
.ark-invite-form .ark-btn-submit { width: auto; padding: 10px 22px; }

/* Member table */
.ark-co-role-select {
  background: #1e1e1e; border: 1px solid #333; color: #d0d0d0;
  border-radius: 5px; padding: 4px 8px; font-size: 12px;
}
.ark-btn-xs {
  font-size: 11px; padding: 4px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid; font-weight: 600; transition: all .15s;
  background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #60a5fa;
}
.ark-btn-xs:hover { background: rgba(59,130,246,.2); }

/* ═══════════════════════════════════════════════════════════
   SETTINGS TAB – sub-navigation
═══════════════════════════════════════════════════════════ */
.ark-settings-tab-wrap { display: flex; flex-direction: column; gap: 0; }

.ark-stab-nav {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ark-border,#2a2a2a);
  padding-bottom: 0;
}
.ark-stab-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--ark-muted,#888); padding: 10px 18px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.ark-stab-btn:hover  { color: var(--ark-text,#f0f0f0); }
.ark-stab-btn.active { color: var(--ark-text,#f0f0f0); border-bottom-color: var(--ark-red,#e11d2e); }

.ark-stab-section { animation: ark-fadein .18s ease; }

.ark-datatools-wrap h3 {
  font-size: 17px; font-weight: 700; color: var(--ark-text,#f0f0f0);
  margin: 0 0 6px;
}

/* ── Data Tools cards (inside Settings tab) ───────────────── */
.ark-dt-card {
  background: var(--ark-surface, #161616);
  border: 1px solid var(--ark-border, #2a2a2a);
  border-radius: 10px;
  padding: 20px 22px;
}
.ark-dt-card-title {
  font-size: 14px; font-weight: 700; color: var(--ark-text, #f0f0f0);
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--ark-border, #2a2a2a);
}
.ark-datatools-wrap { display: flex; flex-direction: column; gap: 0; }

/* ═══════════════════════════════════════════════════════════
   PF LEADS – Dark Theme Override
   The legacy shortcode injects light-mode inline CSS.
   These rules run with higher specificity to override it.
═══════════════════════════════════════════════════════════ */
#ark-dashboard .pf-crm-wrap,
.ark-panel .pf-crm-wrap {
  font-family: inherit;
  color: #f0f0f0;
}

/* Stat card */
#ark-dashboard .pf-crm-wrap > div[style*="background:#fff"],
.ark-panel .pf-crm-wrap > div[style*="background:#fff"] {
  background: #161616 !important;
  border-color: #2a2a2a !important;
  color: #f0f0f0 !important;
}
#ark-dashboard .pf-crm-wrap > div[style*="background:#fff"] div,
.ark-panel .pf-crm-wrap > div[style*="background:#fff"] div { color: #f0f0f0 !important; }
#ark-dashboard .pf-crm-wrap > div[style*="background:#fff"] div[style*="color:#666"],
.ark-panel .pf-crm-wrap > div[style*="background:#fff"] div[style*="color:#666"] { color: #888 !important; }

/* Filters */
#ark-dashboard .pf-crm-filters input,
#ark-dashboard .pf-crm-filters select,
.ark-panel .pf-crm-filters input,
.ark-panel .pf-crm-filters select {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #f0f0f0 !important;
}
#ark-dashboard .pf-crm-filters input::placeholder,
.ark-panel .pf-crm-filters input::placeholder { color: #555 !important; }
#ark-dashboard .pf-crm-filters select option,
.ark-panel .pf-crm-filters select option { background: #1e1e1e !important; }
#ark-dashboard .pf-crm-filters label,
.ark-panel .pf-crm-filters label { color: #aaa !important; font-size: 11px !important; font-weight:600 !important; text-transform:uppercase !important; letter-spacing:.4px !important; }
#ark-dashboard .pf-crm-filters button,
.ark-panel .pf-crm-filters button {
  background: #e11d2e !important;
  border-radius: 7px !important;
}

/* Table wrapper */
#ark-dashboard .pf-crm-table-wrap,
.ark-panel .pf-crm-table-wrap {
  background: #161616 !important;
  border-color: #2a2a2a !important;
}

/* Table header */
#ark-dashboard .pf-crm-table th,
.ark-panel .pf-crm-table th {
  background: #111 !important;
  color: #888 !important;
  border-bottom-color: #333 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
}

/* Table cells */
#ark-dashboard .pf-crm-table td,
.ark-panel .pf-crm-table td {
  color: #d0d0d0 !important;
  border-bottom-color: #1a1a1a !important;
}
#ark-dashboard .pf-crm-table tr:hover td,
.ark-panel .pf-crm-table tr:hover td {
  background: rgba(255,255,255,.025) !important;
}

/* Badges */
#ark-dashboard .pf-crm-badge,
.ark-panel .pf-crm-badge {
  background: rgba(255,255,255,.08) !important;
  color: #d0d0d0 !important;
}
#ark-dashboard .pf-crm-meta,
.ark-panel .pf-crm-meta { color: #666 !important; }

/* Note / tag inputs */
#ark-dashboard .pf-crm-note,
#ark-dashboard .pf-crm-tag-select,
.ark-panel .pf-crm-note,
.ark-panel .pf-crm-tag-select {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #d0d0d0 !important;
}

/* Pagination */
#ark-dashboard .pf-crm-pagination a,
#ark-dashboard .pf-crm-pagination span,
.ark-panel .pf-crm-pagination a,
.ark-panel .pf-crm-pagination span {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #aaa !important;
  text-decoration: none !important;
}
#ark-dashboard .pf-crm-pagination .current,
.ark-panel .pf-crm-pagination .current {
  background: #e11d2e !important;
  border-color: #e11d2e !important;
  color: #fff !important;
}


/* v2.4.10 PF Leads compact row input + dark tag dropdown fixes */
#ark-dashboard .pf-crm-table textarea.pf-crm-note,
.ark-panel .pf-crm-table textarea.pf-crm-note,
#ark-dashboard textarea.pf-crm-note,
.ark-panel textarea.pf-crm-note {
  min-height: 42px !important;
  height: 42px !important;
  max-height: 42px !important;
  resize: none !important;
  overflow: auto !important;
  padding: 10px 10px !important;
  line-height: 20px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

#ark-dashboard .pf-crm-table select.pf-crm-tag-select,
.ark-panel .pf-crm-table select.pf-crm-tag-select,
#ark-dashboard select.pf-crm-tag-select,
.ark-panel select.pf-crm-tag-select {
  height: 42px !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  background-color: #1e1e1e !important;
  color: #f0f0f0 !important;
  border: 1px solid #333 !important;
  border-radius: 10px !important;
  color-scheme: dark !important;
  appearance: auto !important;
}

#ark-dashboard .pf-crm-tag-select option,
.ark-panel .pf-crm-tag-select option,
#ark-dashboard select.pf-crm-tag-select option,
.ark-panel select.pf-crm-tag-select option {
  background-color: #1e1e1e !important;
  color: #f0f0f0 !important;
}

#ark-dashboard .pf-crm-tag-select option:checked,
.ark-panel .pf-crm-tag-select option:checked,
#ark-dashboard select.pf-crm-tag-select option:checked,
.ark-panel select.pf-crm-tag-select option:checked {
  background-color: #e11d2e !important;
  color: #ffffff !important;
}

/* ARK PF Listings module */
.ark-panel .pf-listings-wrap .pf-crm-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.ark-panel .pf-listings-wrap .pf-crm-header h2{margin:0;color:#fff}.ark-panel .pf-listings-wrap .pf-crm-action{display:inline-flex;align-items:center;justify-content:center;background:#e11d2e;color:#fff!important;text-decoration:none;border-radius:10px;padding:10px 16px;font-weight:800}.ark-panel .pf-listings-wrap .pf-crm-notice{border-radius:10px;padding:12px 14px;margin:0 0 15px;font-weight:700}.ark-panel .pf-listings-wrap .pf-crm-notice.success{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac}.ark-panel .pf-listings-wrap .pf-crm-notice.error{background:rgba(225,29,46,.12);border:1px solid rgba(225,29,46,.35);color:#fda4af}.ark-panel .pf-listings-wrap .pf-crm-create{background:#161616;border:1px solid #2a2a2a;border-radius:14px;padding:14px;margin:16px 0;color:#f0f0f0}.ark-panel .pf-listings-wrap .pf-crm-create summary{cursor:pointer;font-weight:900;color:#fff}.ark-panel .pf-listings-wrap .pf-create-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.ark-panel .pf-listings-wrap .pf-create-grid label{display:flex;flex-direction:column;gap:6px;color:#aaa;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.04em}.ark-panel .pf-listings-wrap .pf-create-grid .wide{grid-column:1/-1}.ark-panel .pf-listings-wrap .pf-create-grid input,.ark-panel .pf-listings-wrap .pf-create-grid select,.ark-panel .pf-listings-wrap .pf-create-grid textarea{background:#1e1e1e!important;border:1px solid #333!important;color:#f0f0f0!important;border-radius:10px!important;padding:10px 12px!important;min-height:42px}.ark-panel .pf-listings-wrap .pf-crm-create button{margin-top:12px;background:#e11d2e;color:#fff;border:0;border-radius:10px;padding:11px 18px;font-weight:900;cursor:pointer}@media(max-width:980px){.ark-panel .pf-listings-wrap .pf-create-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.ark-panel .pf-listings-wrap .pf-create-grid{grid-template-columns:1fr}.ark-panel .pf-listings-wrap .pf-crm-header{align-items:flex-start;flex-direction:column}}

/* PF Listings AJAX progress */
.ark-panel .pf-listings-wrap .ark-pf-listings-progress{background:#161616;border:1px solid #2a2a2a;border-radius:14px;padding:14px 16px;margin:0 0 16px;color:#f0f0f0}.ark-panel .pf-listings-wrap .ark-pf-listings-progress-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.ark-panel .pf-listings-wrap .ark-pf-listings-progress-text{color:#aaa;font-size:13px}.ark-panel .pf-listings-wrap .ark-pf-listings-progress-track{height:10px;background:#242424;border:1px solid #333;border-radius:999px;overflow:hidden}.ark-panel .pf-listings-wrap .ark-pf-listings-progress-track span{display:block;height:100%;background:#e11d2e;border-radius:999px;transition:width .25s ease}.ark-panel .pf-listings-wrap .ark-pf-listings-progress-note{margin:9px 0 0;color:#888;font-size:12px}.ark-panel .pf-listings-wrap .pf-crm-action[disabled]{opacity:.65;cursor:wait}


/* v2.4.23 ARK Suite dark aligned inquiry form override */
#ark-dashboard .svi-wrap .svi-form,
.ark-panel .svi-wrap .svi-form,
.svi-wrap .svi-form{
  background:#151515!important;
  color:#f4f4f5!important;
  border:1px solid #2b2b2b!important;
  border-radius:18px!important;
  box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
  padding:26px 24px!important;
  margin:22px 0!important;
  overflow:hidden!important;
}
#ark-dashboard .svi-wrap .svi-form h3,
.ark-panel .svi-wrap .svi-form h3,
.svi-wrap .svi-form h3{
  margin:0 0 24px!important;
  color:#ffffff!important;
  font-size:28px!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:-.025em!important;
}
#ark-dashboard .svi-wrap .svi-form-grid,
.ark-panel .svi-wrap .svi-form-grid,
.svi-wrap .svi-form-grid{
  display:grid!important;
  grid-template-columns:1.15fr .64fr .64fr .68fr .85fr 1fr!important;
  gap:22px 22px!important;
  align-items:start!important;
}
#ark-dashboard .svi-wrap .svi-field,
.ark-panel .svi-wrap .svi-field,
.svi-wrap .svi-field{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  margin:0!important;
  width:auto!important;
  max-width:none!important;
}
#ark-dashboard .svi-wrap .svi-field-desc,
.ark-panel .svi-wrap .svi-field-desc,
.svi-wrap .svi-field-desc{grid-row:span 2!important;grid-column:auto!important;}
#ark-dashboard .svi-wrap .svi-field-wide,
.ark-panel .svi-wrap .svi-field-wide,
.svi-wrap .svi-field-wide{grid-column:1/-1!important;}
#ark-dashboard .svi-wrap .svi-field span,
.ark-panel .svi-wrap .svi-field span,
.svi-wrap .svi-field span{
  display:block!important;
  font-weight:900!important;
  font-size:15px!important;
  color:#f5f5f5!important;
  text-transform:none!important;
  letter-spacing:0!important;
  line-height:1.2!important;
}
#ark-dashboard .svi-wrap .svi-field input,
#ark-dashboard .svi-wrap .svi-field textarea,
.ark-panel .svi-wrap .svi-field input,
.ark-panel .svi-wrap .svi-field textarea,
.svi-wrap .svi-field input,
.svi-wrap .svi-field textarea{
  width:100%!important;
  max-width:100%!important;
  border:1px solid #333!important;
  border-radius:12px!important;
  background:#1f1f1f!important;
  color:#f0f0f0!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:1.45!important;
  padding:14px 15px!important;
  outline:none!important;
}
#ark-dashboard .svi-wrap .svi-field input,
.ark-panel .svi-wrap .svi-field input,
.svi-wrap .svi-field input{height:56px!important;min-height:56px!important;}
#ark-dashboard .svi-wrap .svi-field textarea,
.ark-panel .svi-wrap .svi-field textarea,
.svi-wrap .svi-field textarea{resize:vertical!important;min-height:132px!important;}
#ark-dashboard .svi-wrap .svi-field-desc textarea,
.ark-panel .svi-wrap .svi-field-desc textarea,
.svi-wrap .svi-field-desc textarea{min-height:160px!important;}
#ark-dashboard .svi-wrap .svi-field-wide textarea,
.ark-panel .svi-wrap .svi-field-wide textarea,
.svi-wrap .svi-field-wide textarea{min-height:92px!important;}
#ark-dashboard .svi-wrap .svi-field input::placeholder,
#ark-dashboard .svi-wrap .svi-field textarea::placeholder,
.ark-panel .svi-wrap .svi-field input::placeholder,
.ark-panel .svi-wrap .svi-field textarea::placeholder,
.svi-wrap .svi-field input::placeholder,
.svi-wrap .svi-field textarea::placeholder{color:#8a8a8a!important;opacity:1!important;}
#ark-dashboard .svi-wrap .svi-field input:focus,
#ark-dashboard .svi-wrap .svi-field textarea:focus,
.ark-panel .svi-wrap .svi-field input:focus,
.ark-panel .svi-wrap .svi-field textarea:focus,
.svi-wrap .svi-field input:focus,
.svi-wrap .svi-field textarea:focus{
  border-color:#e11d2e!important;
  box-shadow:0 0 0 3px rgba(225,29,46,.16)!important;
  background:#202020!important;
  color:#fff!important;
}
#ark-dashboard .svi-wrap .svi-form-buttons,
.ark-panel .svi-wrap .svi-form-buttons,
.svi-wrap .svi-form-buttons{display:flex!important;gap:12px!important;margin-top:22px!important;align-items:center!important;}
#ark-dashboard .svi-wrap .svi-form .svi-btn,
.ark-panel .svi-wrap .svi-form .svi-btn,
.svi-wrap .svi-form .svi-btn{font-size:15px!important;padding:13px 20px!important;border-radius:10px!important;font-weight:900!important;}
#ark-dashboard .svi-wrap .svi-form .svi-btn-primary,
.ark-panel .svi-wrap .svi-form .svi-btn-primary,
.svi-wrap .svi-form .svi-btn-primary{background:#e11d2e!important;color:#fff!important;border-color:#e11d2e!important;}
#ark-dashboard .svi-wrap .svi-form .svi-btn-light,
.ark-panel .svi-wrap .svi-form .svi-btn-light,
.svi-wrap .svi-form .svi-btn-light{background:#202020!important;color:#f0f0f0!important;border-color:#343434!important;}
@media(max-width:1280px){#ark-dashboard .svi-wrap .svi-form-grid,.ark-panel .svi-wrap .svi-form-grid,.svi-wrap .svi-form-grid{grid-template-columns:1fr 1fr 1fr!important}#ark-dashboard .svi-wrap .svi-field-desc,.ark-panel .svi-wrap .svi-field-desc,.svi-wrap .svi-field-desc{grid-column:1/-1!important;grid-row:auto!important}}
@media(max-width:820px){#ark-dashboard .svi-wrap .svi-form-grid,.ark-panel .svi-wrap .svi-form-grid,.svi-wrap .svi-form-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:640px){#ark-dashboard .svi-wrap .svi-form-grid,.ark-panel .svi-wrap .svi-form-grid,.svi-wrap .svi-form-grid{grid-template-columns:1fr!important}#ark-dashboard .svi-wrap .svi-form-buttons,.ark-panel .svi-wrap .svi-form-buttons,.svi-wrap .svi-form-buttons{flex-direction:column!important;align-items:stretch!important}}

/* v2.4.26 Inquiry extra fields */
#ark-dashboard .svi-wrap .svi-field select,
.ark-panel .svi-wrap .svi-field select,
.svi-wrap .svi-field select{width:100%!important;height:46px!important;border:1px solid #333!important;border-radius:10px!important;background:#1b1b1b!important;color:#f1f1f1!important;padding:0 14px!important;font-size:14px!important;font-weight:600!important;outline:none!important;box-shadow:none!important;appearance:auto!important;}
#ark-dashboard .svi-wrap .svi-field select:focus,
.ark-panel .svi-wrap .svi-field select:focus,
.svi-wrap .svi-field select:focus{border-color:#e11d2e!important;box-shadow:0 0 0 3px rgba(225,29,46,.16)!important;}
#ark-dashboard .svi-wrap .svi-table th,
.ark-panel .svi-wrap .svi-table th{white-space:nowrap!important;}


/* v2.4.27 Inquiry edit controls */
.svi-action-cell{min-width:140px!important}.svi-delete-form{margin:8px 0 0!important}.svi-btn-edit{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important;margin-right:6px!important}.svi-btn-edit:hover{background:#1d4ed8!important;color:#fff!important}.svi-edit-row td{background:#101010!important;padding:18px!important}.svi-edit-form{background:#151515!important;border:1px solid #333!important;border-radius:16px!important;padding:20px!important;box-shadow:0 16px 40px rgba(0,0,0,.28)!important}.svi-edit-form h3{margin:0 0 18px!important;color:#fff!important;font-size:22px!important;font-weight:900!important}.svi-edit-grid{grid-template-columns:1.15fr .64fr .64fr .68fr .85fr 1fr!important}.svi-edit-form .svi-field textarea{min-height:110px!important}.svi-edit-form .svi-field-desc textarea{min-height:150px!important}@media(max-width:1280px){.svi-edit-grid{grid-template-columns:1fr 1fr 1fr!important}}@media(max-width:820px){.svi-edit-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:640px){.svi-edit-grid{grid-template-columns:1fr!important}.svi-action-cell .svi-btn{width:100%!important;margin:5px 0!important}}