/* =========================================================
   MimaMenu — Add-ons (Admin)
   Full stylesheet (scoped)
   ========================================================= */

/* ---------- Scope ---------- */
body[class*="mimamenu_addons"] .em-two-pane{display:grid;grid-template-columns:2fr 1.5fr;gap:12px;align-items:start;max-width:1280px}
@media (max-width:1200px){body[class*="mimamenu_addons"] .em-two-pane{grid-template-columns:1fr}}
body[class*="mimamenu_addons"] .em-pane-left{min-width:0}
body[class*="mimamenu_addons"] .em-pane-right{display:none;min-width:0}
body[class*="mimamenu_addons"] .em-pane-right.open{display:block}

/* ---------- Cards ---------- */
/* Match Items page look */
body[class*="mimamenu_addons"] .em-card{background:#fff;border:1px solid #eef2f7;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.02);padding:14px}
body[class*="mimamenu_addons"] .em-card.big{padding:14px}
body[class*="mimamenu_addons"] .em-card-title{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
body[class*="mimamenu_addons"] .em-divider{height:1px;background:#eef2f7;margin:12px 0}
body[class*="mimamenu_addons"] .wrap .em-card + .em-card{margin-top:10px}

/* ---------- Form & Inputs (match Items page) ---------- */
body[class*="mimamenu_addons"] .em-form{width:100%}

body[class*="mimamenu_addons"] .em-form input[type="text"],
body[class*="mimamenu_addons"] .em-form input[type="number"],
body[class*="mimamenu_addons"] .em-form input[type="search"],
body[class*="mimamenu_addons"] .em-form select,
body[class*="mimamenu_addons"] .em-form textarea,
body[class*="mimamenu_addons"] .mimamenu-select{
  color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:10px;font-size:14px;line-height:1.2;width:100%;
  transition:border-color .15s,box-shadow .15s
}

body[class*="mimamenu_addons"] .em-form input[type="text"],
body[class*="mimamenu_addons"] .em-form input[type="number"],
body[class*="mimamenu_addons"] .em-form input[type="search"],
body[class*="mimamenu_addons"] .em-form select,
body[class*="mimamenu_addons"] .mimamenu-select{
  height:40px;padding:9px 10px;appearance:none
}

body[class*="mimamenu_addons"] .em-form textarea{
  min-height:110px;padding:9px 10px;resize:vertical
}

/* Placeholder */
body[class*="mimamenu_addons"] .em-form input::placeholder,
body[class*="mimamenu_addons"] .em-form textarea::placeholder{color:#64748b;opacity:1}

body[class*="mimamenu_addons"] .em-form input:focus,
body[class*="mimamenu_addons"] .em-form select:focus,
body[class*="mimamenu_addons"] .em-form textarea:focus,
body[class*="mimamenu_addons"] .mimamenu-select:focus{
  outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)
}

body[class*="mimamenu_addons"] .em-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
body[class*="mimamenu_addons"] .em-row-inline{flex-direction:row;align-items:center;gap:10px}
body[class*="mimamenu_addons"] .em-mini-label{font-size:12px;color:#6b7280;margin-bottom:4px}

body[class*="mimamenu_addons"] .em-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body[class*="mimamenu_addons"] .em-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:900px){
  body[class*="mimamenu_addons"] .em-grid-2,
  body[class*="easymmenu_addons"] .em-grid-3{grid-template-columns:1fr}
}

/* ---------- Buttons ---------- */
body[class*="mimamenu_addons"] .em-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:8px 14px;font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:filter .15s,box-shadow .15s}
body[class*="mimamenu_addons"] .em-btn:disabled{opacity:.6;cursor:not-allowed}
body[class*="mimamenu_addons"] .em-btn:hover{filter:brightness(.98)}
body[class*="mimamenu_addons"] .em-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(2,132,199,.18)}
body[class*="mimamenu_addons"] .em-btn-green{background:#10b981;color:#fff}
body[class*="mimamenu_addons"] .em-btn-ghost{background:#fff;border:1px solid #e5e7eb;color:#334155}
body[class*="mimamenu_addons"] .em-btn-primary{background:#3b82f6;color:#fff}
body[class*="mimamenu_addons"] .em-btn-danger{background:#ef4444;color:#fff}
body[class*="mimamenu_addons"] .em-btn-sm{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:8px;font-weight:600;border:1px solid #e5e7eb;background:#fff;text-decoration:none;transition:filter .15s}
body[class*="mimamenu_addons"] .em-btn-sm:hover{filter:brightness(.98)}
body[class*="mimamenu_addons"] .em-btn-sm.em-blue{background:#e0f2fe;border-color:#e5e7eb;color:#0ea5e9}
body[class*="mimamenu_addons"] .em-btn-sm.em-red{background:#fee2e2;border-color:#e5e7eb;color:#ef4444}

/* ---------- Tables ---------- */
/* Match Items page table (flat rows + dividers) */
body[class*="mimamenu_addons"] .em-table{table-layout:auto;width:100%;border-collapse:separate;border-spacing:0}
body[class*="mimamenu_addons"] .em-table thead th{position:sticky;top:0;background:#fff;z-index:2;font-weight:600;color:#334155;text-align:left;padding:10px 12px;white-space:nowrap;border-bottom:1px solid #eef2f7}
body[class*="mimamenu_addons"] .em-table tbody tr{background:#fff}
body[class*="mimamenu_addons"] .em-table tbody td{padding:12px;vertical-align:middle;border-bottom:1px solid #eef2f7}
body[class*="mimamenu_addons"] .em-th-actions{width:220px}
body[class*="mimamenu_addons"] .em-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Toolbar + Search */
body[class*="mimamenu_addons"] .em-table-toolbar{display:flex;justify-content:flex-start;gap:10px;margin-bottom:6px}
body[class*="mimamenu_addons"] .em-search{height:40px;background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:9px 10px;min-width:240px;width:100%;max-width:360px;transition:border-color .15s,box-shadow .15s}
body[class*="mimamenu_addons"] .em-search:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15);outline:none}

/* Drag handle (match Items page style) */
body[class*="mimamenu_addons"] td.drag-handle{
  width: 34px;
  text-align: center;
  vertical-align: middle;
  padding: 0 6px;
  cursor: grab;
  user-select: none;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
}

/* Inline compact action buttons (Edit/Delete) */
body[class*="mimamenu_addons"] .em-actions-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body[class*="mimamenu_addons"] .em-btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #e0f2fe;
  color: #1d4ed8;
  cursor: pointer;
}
body[class*="mimamenu_addons"] .em-btn-icon.em-red{
  border-color: #fecaca;
  background: #fee2e2;
  color: #b91c1c;
}
body[class*="mimamenu_addons"] .em-btn-icon:hover{filter: brightness(0.98)}
body[class*="mimamenu_addons"] .em-btn-icon .dashicons{font-size: 18px; width: 18px; height: 18px}
body[class*="mimamenu_addons"] td.drag-handle:hover{
  color: #374151;
}
body[class*="mimamenu_addons"] #em-items-tbody tr.ui-sortable-helper{box-shadow:0 6px 18px rgba(2,6,23,.12)}

/* ---------- Switch ---------- */
body[class*="mimamenu_addons"] .switch{position:relative;display:inline-block;width:46px;height:26px}
body[class*="mimamenu_addons"] .switch input{display:none}
body[class*="mimamenu_addons"] .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#d1d5db;border-radius:999px;transition:.2s}
body[class*="mimamenu_addons"] .slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body[class*="mimamenu_addons"] .switch input:checked + .slider{background:#16a34a}
body[class*="mimamenu_addons"] .switch input:checked + .slider:before{transform:translateX(20px)}

/* ---------- Badges & Highlights ---------- */
body[class*="mimamenu_addons"] .em-badge{display:inline-block;font-size:12px;padding:3px 8px;border-radius:999px}
body[class*="mimamenu_addons"] .em-badge.green{background:#dcfce7;color:#166534}
body[class*="mimamenu_addons"] .em-badge.gray{background:#e5e7eb;color:#374151}
body[class*="mimamenu_addons"] .em-active-badge{margin-left:10px;font-size:12px;font-weight:700;background:#eaf2ff;color:#0a55a8;padding:4px 8px;border-radius:999px;border:1px solid #cfe0ff}
/* Active group row highlight (rounded like Items page) */
body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active td{
  background:#f0f9ff;
  border-top:2px solid #0ea5e9;
  border-bottom:2px solid #0ea5e9;
}
body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active td:first-child{
  border-left:2px solid #0ea5e9;
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active td:last-child{
  border-right:2px solid #0ea5e9;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}

/* ---------- Inline errors ---------- */
body[class*="mimamenu_addons"] .has-error{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}
body[class*="mimamenu_addons"] .em-field-error{color:#b91c1c;font-size:12px;margin-top:4px}

/* ---------- Animations & Feedback ---------- */
body[class*="mimamenu_addons"] .em-flash{animation:emFlash 900ms ease-out}
@keyframes emFlash{0%{background-color:#fff}25%{background-color:#eaf7ff}100%{background-color:#fff}}
body[class*="mimamenu_addons"] tr.em-removing{opacity:.6}

/* Toast */
body[class*="mimamenu_addons"] #em-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.15);z-index:9999}
body[class*="mimamenu_addons"] #em-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* Skeleton */
body[class*="mimamenu_addons"] .em-skel .em-skel-bar{height:14px;background:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 40%,#f3f4f6 80%);background-size:200% 100%;animation:emShine 1.2s infinite linear;border-radius:8px}
@keyframes emShine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- RTL ---------- */
[dir="rtl"] body[class*="mimamenu_addons"] .em-table thead th{text-align:right}
[dir="rtl"] body[class*="mimamenu_addons"] .em-active-badge{margin-left:0;margin-right:10px}
[dir="rtl"] body[class*="mimamenu_addons"] .em-actions{justify-content:flex-start}
[dir="rtl"] body[class*="mimamenu_addons"] .em-row-inline{flex-direction:row-reverse}
[dir="rtl"] body[class*="mimamenu_addons"] .em-card-title{flex-direction:row-reverse}
[dir="rtl"] body[class*="mimamenu_addons"] .em-form input,
[dir="rtl"] body[class*="mimamenu_addons"] .em-form select,
[dir="rtl"] body[class*="mimamenu_addons"] .em-form textarea{text-align:right}



/* --- Active row highlight (rounded like Items page) --- */
#emGroupsTable tbody tr.is-active td,
table#emGroupsTable tbody tr.is-active td{
  border-top: 2px solid #3b82f6;
  border-bottom: 2px solid #3b82f6;
}
#emGroupsTable tbody tr.is-active td:first-child,
table#emGroupsTable tbody tr.is-active td:first-child{
  border-left: 2px solid #3b82f6;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
#emGroupsTable tbody tr.is-active td:last-child,
table#emGroupsTable tbody tr.is-active td:last-child{
  border-right: 2px solid #3b82f6;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active{outline:none !important; box-shadow:none !important;}


/* --- Add-ons UX fixes --- */
body[class*="mimamenu_addons"] .em-pane-right{display:none;}
body[class*="mimamenu_addons"] .em-pane-right.open{display:block;}

/* Keep wide item tables usable, so Edit/Delete never gets clipped. */
body[class*="mimamenu_addons"] .em-items-table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
}
body[class*="mimamenu_addons"] #emItemsTable{min-width:620px;}
body[class*="mimamenu_addons"] #emItemsTable th,
body[class*="mimamenu_addons"] #emItemsTable td{padding:10px 10px;}
body[class*="mimamenu_addons"] #emItemsTable .em-th-actions,
body[class*="mimamenu_addons"] #emItemsTable th:last-child,
body[class*="mimamenu_addons"] #emItemsTable td:last-child{width:86px;min-width:86px;}

/* Do not turn table cells into flex boxes. It cuts the active border on selected rows. */
body[class*="mimamenu_addons"] td.em-actions{display:table-cell;}
body[class*="mimamenu_addons"] td.em-actions .em-actions-inline,
body[class*="mimamenu_addons"] .em-actions-inline{display:inline-flex;gap:8px;align-items:center;justify-content:center;flex-wrap:nowrap;}
body[class*="mimamenu_addons"] .em-inline{display:inline-flex;margin:0;}

/* Cleaner selected group border. */
body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active td{
  background:#f0f9ff;
  border-top:2px solid #0ea5e9 !important;
  border-bottom:2px solid #0ea5e9 !important;
}
body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active td:first-child{
  border-left:2px solid #0ea5e9 !important;
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}
body[class*="mimamenu_addons"] #emGroupsTable tbody tr.is-active td:last-child{
  border-right:2px solid #0ea5e9 !important;
  border-top-right-radius:12px;
  border-bottom-right-radius:12px;
}


/* Clearer item workflow context */
body[class*="mimamenu_addons"] .em-context-note{
  margin:6px 0 14px;
  padding:8px 10px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1e40af;
  border-radius:10px;
  font-size:12px;
  font-weight:600;
}
body[class*="mimamenu_addons"] .em-cancel-edit{
  display:none;
}

/* Click-to-edit UX for add-on rows */
body[class*="mimamenu_addons"] #emGroupsTable tbody tr[data-gid],
body[class*="mimamenu_addons"] #em-items-tbody tr[data-id],
body[class*="mimamenu_addons"] #emItemsTable tbody tr[data-id],
body[class*="mimamenu_addons"] table[data-em="items"] tbody tr[data-id]{
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}

body[class*="mimamenu_addons"] #emGroupsTable tbody tr[data-gid]:hover td,
body[class*="mimamenu_addons"] #em-items-tbody tr[data-id]:hover td,
body[class*="mimamenu_addons"] #emItemsTable tbody tr[data-id]:hover td,
body[class*="mimamenu_addons"] table[data-em="items"] tbody tr[data-id]:hover td{
  background-color: #f8fbff;
}

body[class*="mimamenu_addons"] #em-items-tbody tr.is-active td,
body[class*="mimamenu_addons"] #emItemsTable tbody tr.is-active td,
body[class*="mimamenu_addons"] table[data-em="items"] tbody tr.is-active td{
  background:#eef8ff !important;
  border-top:2px solid #0ea5e9 !important;
  border-bottom:2px solid #0ea5e9 !important;
}

body[class*="mimamenu_addons"] #em-items-tbody tr.is-active td:first-child,
body[class*="mimamenu_addons"] #emItemsTable tbody tr.is-active td:first-child,
body[class*="mimamenu_addons"] table[data-em="items"] tbody tr.is-active td:first-child{
  border-left:2px solid #0ea5e9 !important;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}

body[class*="mimamenu_addons"] #em-items-tbody tr.is-active td:last-child,
body[class*="mimamenu_addons"] #emItemsTable tbody tr.is-active td:last-child,
body[class*="mimamenu_addons"] table[data-em="items"] tbody tr.is-active td:last-child{
  border-right:2px solid #0ea5e9 !important;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}

body[class*="mimamenu_addons"] .drag-handle,
body[class*="mimamenu_addons"] .em-actions,
body[class*="mimamenu_addons"] .em-actions *{
  cursor: default;
}

/* Add-ons import/export toolbar */
body[class*="mimamenu_addons"] .em-card-actions-addons{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
body[class*="mimamenu_addons"] .em-card-actions-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body[class*="mimamenu_addons"] .em-inline-form{
  margin:0;
  display:inline-flex;
}
body[class*="mimamenu_addons"] .em-import-dialog{
  max-width:460px;
}
body[class*="mimamenu_addons"] .em-import-form{
  margin-top:14px;
}
body[class*="mimamenu_addons"] .em-import-label{
  display:block;
  margin-bottom:7px;
  font-weight:700;
  color:#1f2937;
}
body[class*="mimamenu_addons"] .em-import-help{
  margin-top:9px;
  color:#64748b;
  font-size:12px;
  line-height:1.5;
}

/* Bulk actions and filters for add-on groups/items */
body[class*="mimamenu_addons"] .em-table-toolbar-advanced{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
body[class*="mimamenu_addons"] .em-bulk-tools,
body[class*="mimamenu_addons"] .em-filter-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
body[class*="mimamenu_addons"] .em-filter-select{
  min-width:150px;
  height:40px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  padding:7px 32px 7px 10px;
  font-size:14px;
}
body[class*="mimamenu_addons"] .em-check-col{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  text-align:center !important;
  padding-left:8px !important;
  padding-right:8px !important;
}
body[class*="mimamenu_addons"] .em-check-col input[type="checkbox"]{
  margin:0;
}
body[class*="mimamenu_addons"] .em-items-toolbar{
  margin-top:4px;
}
@media (max-width:760px){
  body[class*="mimamenu_addons"] .em-table-toolbar-advanced,
  body[class*="mimamenu_addons"] .em-bulk-tools,
  body[class*="mimamenu_addons"] .em-filter-tools{
    align-items:stretch;
    width:100%;
  }
  body[class*="mimamenu_addons"] .em-filter-select,
  body[class*="mimamenu_addons"] .em-search,
  body[class*="mimamenu_addons"] .em-bulk-tools .em-btn{
    width:100%;
    max-width:none;
  }
}
body[class*="mimamenu_addons"] .em-btn-icon.em-purple{
  border-color:#ddd6fe;
  background:#f3e8ff;
  color:#7e22ce;
}
body[class*="mimamenu_addons"] .em-btn-icon{
  box-shadow:0 4px 12px rgba(37,99,235,.08);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body[class*="mimamenu_addons"] .em-btn-icon:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(37,99,235,.14);
}