/* ==========================================================================
   Smalk AI Ads – Admin Styles (light only)
   ========================================================================== */

   :root {
    --smalk-bg: #ffffff;
    --smalk-surface: #f8fafc;
    --smalk-border: #e5e7eb;
    --smalk-muted: #6b7280;
    --smalk-text: #111827;
    --smalk-accent: #3b82f6;
    --smalk-accent-600: #2563eb;
    --smalk-success: #10b981;
    --smalk-danger: #ef4444;
    --smalk-warning: #f59e0b;
    --smalk-radius: 14px;
    --smalk-radius-sm: 10px;
    --smalk-shadow: 0 8px 24px rgba(17, 24, 39, .06);
  }
  
  /* Wrapper */
  .smalk-ads-admin {
    color: var(--smalk-text);
  }
  
  .smalk-ads-admin h1 {
    margin-bottom: 18px;
  }
  
  /* Cards */
  .smalk-card {
    background: var(--smalk-bg);
    border: 1px solid var(--smalk-border);
    border-radius: var(--smalk-radius);
    box-shadow: var(--smalk-shadow);
    padding: 18px 20px;
    margin: 18px 0;
  }
  
  .smalk-card > h2 {
    margin: 0 0 10px 0;
    letter-spacing: .2px;
  }
  
  .smalk-card .description {
    margin: 6px 0 14px;
    color: var(--smalk-muted);
  }
  
  /* Form table tweaks */
  .smalk-ads-admin .form-table th {
    width: 200px;
    padding-top: 12px;
  }
  
  .smalk-ads-admin .form-table td {
    padding-top: 8px;
  }
  
  .smalk-ads-admin .regular-text {
    max-width: 520px;
  }
  
  /* Push Now */
  #smalk-push-now {
    margin-top: 6px;
    border-radius: 8px;
    transition: transform .06s ease, box-shadow .2s ease;
  }
  
  #smalk-push-now:active {
    transform: translateY(1px);
  }
  
  #smalk-push-status {
    font-size: 12.5px;
    color: var(--smalk-muted);
    vertical-align: middle;
  }
  
  /* Table containers: show/hide via data-visible with smooth fade and sticky context */
  .smalk-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;              /* allow horizontal scroll when table is wider */
    overflow-y: auto;              /* keep vertical scroll for sticky header */
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;               /* give sticky a scroll context */
    border: 1px solid var(--smalk-border);
    border-radius: var(--smalk-radius);
    background: var(--smalk-surface);
    transition: opacity .15s ease, visibility .15s ease, max-height .15s ease, padding .15s ease, margin .15s ease, border-width .15s ease;
    position: relative;            /* enables overlay fades + hint */
  }

  /* Visual cues for horizontal scroll */
  .smalk-table-container::before,
  .smalk-table-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 2; /* above table cells */
  }

  /* Right fade: shows when there's more content to the right */
  .smalk-table-container::after {
    right: 0;
    background: linear-gradient(to right, rgba(248,250,252,0), rgba(248,250,252,1));
  }

  /* Left fade: shows after user scrolls right */
  .smalk-table-container::before {
    left: 0;
    background: linear-gradient(to left, rgba(248,250,252,0), rgba(248,250,252,1));
  }

  .smalk-table-container.smalk-has-x-scroll:not(.smalk-scrolled-right)::after {
    opacity: 1;
  }

  .smalk-table-container.smalk-scrolled-left::before {
    opacity: 1;
  }

  .smalk-scroll-hint {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--smalk-border);
    background: color-mix(in srgb, var(--smalk-bg) 85%, transparent);
    color: var(--smalk-muted);
    box-shadow: var(--smalk-shadow);
    pointer-events: none; /* don't block clicks */
  }

  /* Manual search UI */
  .smalk-search-wrap .regular-text[type="search"] {
    max-width: 100%;
  }

  .smalk-search-wrap .smalk-filter {
    min-width: 160px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--smalk-border);
    background: var(--smalk-bg);
    color: var(--smalk-text);
    padding: 6px 10px;
  }

  /* Search autocomplete (custom, no native dark dropdown) */
  .smalk-autocomplete {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    border: 1px solid var(--smalk-border);
    background: var(--smalk-bg);
    border-radius: 12px;
    box-shadow: var(--smalk-shadow);
    max-height: 280px;
    overflow: auto;
    padding: 6px;
  }

  .smalk-ac-item {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--smalk-text);
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
  }

  .smalk-ac-item:hover,
  .smalk-ac-item.active {
    background: color-mix(in srgb, var(--smalk-surface) 70%, var(--smalk-bg));
  }

  .smalk-ac-url {
    font-size: 12.5px;
    color: var(--smalk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .smalk-ac-title {
    margin-top: 2px;
    font-size: 12px;
    color: var(--smalk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Formats multi-select (Ad Type) */
  .smalk-ms {
    position: relative;
    width: 100%;
  }

  .smalk-ms-btn {
    width: 100%;
    text-align: left;
    border: 1px solid var(--smalk-border);
    background: var(--smalk-bg);
    color: var(--smalk-text);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.2;
    cursor: pointer;
  }

  .smalk-ms-btn:focus {
    outline: none;
    border-color: var(--smalk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smalk-accent) 25%, transparent);
  }

  .smalk-ms-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    border: 1px solid var(--smalk-border);
    background: var(--smalk-bg);
    border-radius: 10px;
    box-shadow: var(--smalk-shadow);
    padding: 6px;
    max-height: 240px;
    overflow: auto;
  }

  .smalk-ms.open .smalk-ms-menu {
    display: block;
  }

  .smalk-ms-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }

  .smalk-ms-item:hover {
    background: color-mix(in srgb, var(--smalk-surface) 70%, var(--smalk-bg));
  }

  .smalk-ms-cb {
    margin: 0;
  }
  
  .smalk-table-container[data-visible="1"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 70vh !important;   /* ensure expansion when visible */
    border-width: 1px !important;
  }
  
  .smalk-table-container[data-visible="0"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    max-height: 0 !important;      /* collapse when hidden so it doesn't reserve space */
    height: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    margin: 0 !important;
  }
  
  /* Table */
  .smalk-table {
    width: 100%;
    min-width: 1950px; /* enables horizontal scroll on smaller screens */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed; /* more stable widths */
  }
  
  .smalk-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--smalk-surface);
    color: var(--smalk-muted);
    text-transform: none;
    letter-spacing: .15px;
    font-weight: 600;
    font-size: 12.5px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--smalk-border);
  }
  
  .smalk-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--smalk-border);
    vertical-align: middle;
    background: var(--smalk-bg);
  }
  
  /* Global safety for long content/URLs */
  .smalk-table td,
  .smalk-table th {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Column sizing - homogeneous widths */
  .smalk-table .smalk-col-title { width: 160px; min-width: 140px; }
  .smalk-table .smalk-col-id { width: 80px; }
  .smalk-table .smalk-col-url { width: 200px; min-width: 180px; }
  .smalk-table .smalk-col-comments { width: 100px; }
  .smalk-table .smalk-col-status { width: 110px; }
  .smalk-table .smalk-col-exclusion { width: 120px; }
  .smalk-table .smalk-col-placement { width: 150px; min-width: 140px; }
  .smalk-table .smalk-col-adid { width: 140px; }
  .smalk-table .smalk-col-adtype { width: 150px; }
  .smalk-table .smalk-col-actions { 
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    text-align: center;
    padding: 8px 4px !important;
  }
  
  /* Actions menu wrapper */
  .smalk-actions-wrap {
    position: relative;
    display: inline-block;
  }
  
  /* 3-dot menu button */
  .smalk-actions-menu {
    padding: 6px 10px !important;
    min-height: 30px !important;
    height: 30px !important;
    line-height: 1 !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .smalk-actions-menu .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
  
  .smalk-actions-menu:hover {
    background-color: #f0f0f1;
    border-color: #0071a1;
  }
  
  .smalk-actions-menu:disabled {
    cursor: not-allowed;
    opacity: 0.8;
  }
  
  /* Dropdown menu */
  .smalk-actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 160px;
    z-index: 1000;
  }
  
  .smalk-actions-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: #2c3338;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f1;
  }
  
  .smalk-actions-dropdown a:last-child {
    border-bottom: none;
  }
  
  .smalk-actions-dropdown a:hover {
    background-color: #f6f7f7;
    color: #0071a1;
  }
  
  .smalk-actions-dropdown a .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    flex-shrink: 0;
  }

  .smalk-table .smalk-col-title { width: 240px; }
  .smalk-table .smalk-col-placement { width: 260px; }
  .smalk-table .smalk-col-url { width: 420px; }

  /* URL column: keep on one line + show full URL on hover (title attr) */
  .smalk-table td.smalk-col-url,
  .smalk-table th.smalk-col-url {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
  }

  .smalk-table td.smalk-col-url a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .smalk-table.widefat.striped tbody tr:nth-child(odd) td {
    background: color-mix(in srgb, var(--smalk-surface) 65%, var(--smalk-bg));
  }
  
  .smalk-table a {
    color: var(--smalk-accent);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .15s ease, color .15s ease;
  }
  
  .smalk-table a:hover {
    color: var(--smalk-accent-600);
    border-bottom-color: var(--smalk-accent-600);
  }
  
  /* Inputs inside table */
  .smalk-select,
  .smalk-ads-id,
  .smalk-ads-type {
    width: 100%;
    max-width: 360px;
    border: 1px solid var(--smalk-border);
    background: var(--smalk-bg);
    color: var(--smalk-text);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.4;
    transition: box-shadow .15s ease, border-color .15s ease;
    font: inherit; /* inherit WP admin font */
  }
  
  .smalk-select:focus,
  .smalk-ads-id:focus,
  .smalk-ads-type:focus {
    outline: none;
    border-color: var(--smalk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smalk-accent) 25%, transparent);
  }
  
  /* Small input wrapper (for datalist etc.) */
  .smalk-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  /* Row actions */
  .smalk-row-remove.button {
    background: var(--smalk-bg);
    border: 1px solid var(--smalk-border);
    color: var(--smalk-danger);
    border-radius: 8px;
  }
  
  .smalk-row-remove.button:hover {
    border-color: var(--smalk-danger);
    color: #fff;
    background: var(--smalk-danger);
  }
  
  /* Status badges */
  .smalk-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--smalk-border);
    background: var(--smalk-surface);
    color: var(--smalk-muted);
  }
  
  .smalk-status-badge.active {
    border-color: color-mix(in srgb, var(--smalk-success) 45%, var(--smalk-border));
    color: var(--smalk-success);
  }
  
  .smalk-status-badge.inactive {
    border-color: color-mix(in srgb, var(--smalk-muted) 45%, var(--smalk-border));
    color: var(--smalk-muted);
  }
  
  /* Buttons polish (reusing WP .button) */
  .smalk-ads-admin .button.button-primary {
    border-radius: 8px;
    box-shadow: var(--smalk-shadow);
  }
  
  .smalk-ads-admin .button {
    border-radius: 8px;
  }
  
  /* --- Mode Toggle (Auto / Manual) ---------------------------------------- */
  .smalk-mode-toggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin: 6px 0 12px;
  }
  
  .smalk-mode-btn.button {
    border-radius: 10px;                 /* match your rounded look */
    padding: 6px 12px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  
  /* Active button = .button-primary (WP core). Make it pop a bit more */
  .smalk-mode-btn.button-primary {
    box-shadow: var(--smalk-shadow);
  }
  
  /* Inactive button = .button-secondary (WP core). Keep it subtle */
  .smalk-mode-btn.button-secondary {
    background: var(--smalk-surface);
    border-color: var(--smalk-border);
    color: var(--smalk-text);
  }
  
  /* Optional: hover states */
  .smalk-mode-btn.button-secondary:hover {
    border-color: var(--smalk-accent);
    color: var(--smalk-accent-600);
  }
  
  /* Nice keyboard focus for the new buttons */
  .smalk-mode-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smalk-accent) 25%, transparent);
    border-color: var(--smalk-accent);
  }
  
  /* Hidden radios (kept for settings persistence) */
  .smalk-hidden-radio {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }
  
  /* Smooth show/hide when JS toggles containers */
  #smalk-auto-table,
  #smalk-manual-table {
    transition: opacity .15s ease;
  }
  
  /* Responsive */
  @media (max-width: 920px) {
    .smalk-ads-admin .form-table th {
      width: 140px;
    }
    /* URL is the 3rd column in both tables */
    .smalk-table thead th:nth-child(3),
    .smalk-table tbody td:nth-child(3) {
      word-break: break-all;
    }
  }

  .smalk-card[data-visible="0"] { display: none !important; }
  .smalk-card[data-visible="1"] { display: block !important; }
  
  /* Fine details */
  .smalk-ads-admin .description code,
  .smalk-table code {
    background: color-mix(in srgb, var(--smalk-surface) 70%, var(--smalk-bg));
    border: 1px solid var(--smalk-border);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 12px;
  } 

/* Kill any legacy radios if another renderer still prints them */
.smalk-ads-admin input[name="smalk_ai_ads_mode"],
.smalk-ads-admin label[for="smalk_mode_auto"],
.smalk-ads-admin label[for="smalk_mode_manual"] {
  display: none !important;
}

/* Sync Progress Modal */
.smalk-sync-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.smalk-sync-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 480px;
  width: 90%;
  padding: 32px;
  position: relative;
  animation: slideUp 0.3s ease-out;
}

.smalk-sync-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #9ca3af;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.smalk-sync-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}

.smalk-sync-modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.smalk-sync-modal-icon svg {
  width: 32px;
  height: 32px;
  color: #fff;
  animation: spin 2s linear infinite;
}

.smalk-sync-modal-title {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  text-align: center;
  margin: 0 0 12px 0;
}

.smalk-sync-modal-message {
  font-size: 15px;
  color: #6b7280;
  text-align: center;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.smalk-sync-modal-progress {
  margin: 0 0 16px 0;
}

.smalk-sync-modal-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smalk-sync-modal-step {
  display: flex;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #6b7280;
  gap: 12px;
}

.smalk-sync-modal-step-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
}

.smalk-sync-modal-step.active .smalk-sync-modal-step-icon {
  border-color: #667eea;
  background: #667eea;
  animation: pulse 1.5s ease-in-out infinite;
}

.smalk-sync-modal-step.active {
  color: #111827;
  font-weight: 500;
}

.smalk-sync-modal-step.completed .smalk-sync-modal-step-icon {
  border-color: #10b981;
  background: #10b981;
}

.smalk-sync-modal-step.completed .smalk-sync-modal-step-icon::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
}

.smalk-sync-modal-step.error .smalk-sync-modal-step-icon {
  border-color: #ef4444;
  background: #ef4444;
}

.smalk-sync-modal-step.error .smalk-sync-modal-step-icon::after {
  content: '✕';
  color: #fff;
  font-size: 12px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

/* ======================================================================
   FORCE FULL-WIDTH / SINGLE COLUMN (NO PARENT PLUGIN CHANGES REQUIRED)
   ----------------------------------------------------------------------
   Goal: ensure the Smalk Ads Pro tables/cards take 100% width even if
   the parent settings page is a 2-column layout with a sidebar.
   ====================================================================== */

/* Make sure our own containers can stretch fully */
.smalk-ads-admin,
.smalk-ads-admin .wrap,
.smalk-ads-admin .smalk-card,
.smalk-ads-admin .smalk-table-container,
#smalk-auto-card,
#smalk-manual-card,
#smalk-auto-table,
#smalk-manual-table {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* If parent uses a flex/grid wrapper, force our section to behave like full-width */
.smalk-ads-admin {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Table should never shrink; allow horizontal scroll inside container (already enabled) */
.smalk-ads-admin .smalk-table {
  width: 100% !important;
  max-width: none !important;
}

/* Defensive: if the parent admin layout uses classic "postbox-container" columns, kill the right column */
.smalk-ads-admin .postbox-container,
.smalk-ads-admin #postbox-container-1,
.smalk-ads-admin #postbox-container-2,
.smalk-ads-admin #side-sortables,
.smalk-ads-admin .inner-sidebar,
.smalk-ads-admin .metabox-holder .inner-sidebar,
.smalk-ads-admin .metabox-holder.columns-2 .inner-sidebar {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}

/* If the parent page has an actual sidebar container, hide it so it can’t steal width.
   (These are common admin patterns; harmless if they don’t exist.) */
.smalk-ads-admin .sidebar,
.smalk-ads-admin .right-column,
.smalk-ads-admin .support-sidebar,
.smalk-ads-admin .smalk-support,
.smalk-ads-admin .smalk-help,
.smalk-ads-admin #smalk-support,
.smalk-ads-admin #smalk-help {
  display: none !important;
}

/* If the parent wrapper is flex, make sure our main content grows */
.smalk-ads-admin .main,
.smalk-ads-admin .content,
.smalk-ads-admin .main-column,
.smalk-ads-admin .content-column {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

/* ------------------------------------------------------------------
   HARD RESET INSIDE OUR UI (reduces parent CSS bleed)
   ------------------------------------------------------------------ */

/* Reset everything inside Smalk Ads admin wrapper */
.smalk-ads-admin,
.smalk-ads-admin * {
  all: revert;
  box-sizing: border-box;
}

/* Re-apply your intended base styles after reset */
.smalk-ads-admin {
  color: var(--smalk-text);
  font-family: inherit;
}

/* Ensure your table stays correct */
.smalk-ads-admin .smalk-table-container { overflow: auto; }
.smalk-ads-admin .smalk-table { width: 100%; table-layout: fixed; }