/* =========================
   ROOT VARIABLES
========================= */
:root {
  --wcfp-bg: #f7f7f8;
  --wcfp-surface: #ffffff;
  --wcfp-border: #e5e7eb;
  --wcfp-text: #111827;
  --wcfp-muted: #6b7280;
  --wcfp-primary: #111827;
  --wcfp-accent: #2563eb;
  --wcfp-sidebar-width: 240px;
  --wcfp-header-height: 64px;
  --wcfp-radius: 16px;
  --wcfp-shadow: 0 8px 20px rgba(0,0,0,0.06);
}







/* =========================================================
   SIDEBAR AS OFF-CANVAS DRAWER ON ALL DEVICES
   Paste this at the VERY END of your dashboard stylesheet
   (after every other rule) so it wins the cascade.
   The sidebar is hidden on desktop AND mobile, and slides
   in from the left when the ☰ hamburger is clicked.
========================================================= */

/* Single-column layout on every screen (no reserved sidebar track) */
.wcfp-body { display: block !important; }

/* Hamburger always visible (desktop + mobile) */
#wcfp-root .wcfp-hamburger {
  display: inline-block !important;
  font-size: 26px;
  margin-right: 12px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
@media (min-width: 992px) {
  #wcfp-root .wcfp-hamburger { display: inline-block !important; }
}

/* Old dropdown menu is no longer used (the sidebar is the menu now) */
#wcfp-mobile-menu { display: none !important; }

/* Sidebar => fixed slide-in drawer, hidden by default on ALL devices */
#wcfp-root .wcfp-sidebar {
  display: block !important;
  position: fixed;
  top: var(--wcfp-header-height);
  left: 0;
  width: var(--wcfp-sidebar-width);
  height: calc(100vh - var(--wcfp-header-height));
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Open state (class added to #wcfp-root by the toggle script) */
#wcfp-root.wcfp-drawer-open .wcfp-sidebar {
  transform: translateX(0);
}

/* Dark overlay behind the open drawer (starts just under the header) */
#wcfp-drawer-overlay {
  position: fixed;
  top: var(--wcfp-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  display: none;
}
#wcfp-root.wcfp-drawer-open #wcfp-drawer-overlay {
  display: block;
}










/* -------------------------------------------------
   DASHBOARD BUTTONS
------------------------------------------------- */
.wcfp-btn-card{
    text-decoration:none !important;
    color:#111 !important;
}

/* -------------------------------------------------
   SIDEBAR LINKS
------------------------------------------------- */
.wcfp-sidebar .wcfp-nav li a{
    text-decoration:none !important;
    color:#fff !important;
}

/* -------------------------------------------------
   ACTIVE SIDEBAR
------------------------------------------------- */
.wcfp-sidebar .wcfp-nav li.active a{
    text-decoration:none !important;
    color:#fff !important;
}

/* -------------------------------------------------
   MOBILE MENU
------------------------------------------------- */
#wcfp-mobile-menu a{
    text-decoration:none !important;
    color:#111 !important;
}


/* =========================
   ANIMATIONS
========================= */

/* Optional: Loading spin animation (for .wcfp-spin class) */
@keyframes wcfp-spin {
  to {
    transform: rotate(360deg);
  }
}

.wcfp-spin {
  display: inline-block;
  animation: wcfp-spin 0.8s linear infinite;
}



/* =========================
   BASE
========================= */
.wcfp * {
  box-sizing: border-box;
}

.wcfp {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--wcfp-text);
}

html {
  scroll-behavior: auto !important;
}



/* =========================
   HEADER
========================= */
.wcfp-header {
  position: relative;
  height: var(--wcfp-header-height);
  background: #2B1B17;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1000;
}

.wcfp-header .title {
  font-weight: 800;
  font-size: 20px;
  color: #fff;
}

.wcfp-admin {
  position: relative;
}

.wcfp-admin-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--wcfp-border);
  background: var(--wcfp-surface);
  padding: 8px 12px;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: var(--wcfp-shadow);
}

.wcfp-admin-button .dashicons {
  font-size: 18px;
}


.wcfp-admin-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 120px;
  background: var(--wcfp-surface);
  border: 1px solid var(--wcfp-border);
  border-radius: 12px;
  box-shadow: var(--wcfp-shadow);
  padding: 6px;
  display: none;
  z-index: 9999;
}

/* FIX TEXT + ALIGNMENT */
.wcfp-admin-menu a {
  display: flex;
  align-items: center;
  gap: 4px;                  /* spacing between icon & text */
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #111827 !important; /* ✅ force visible text */
  font-weight: 500;
}

.wcfp-admin-menu .dashicons {
  font-size: 16px;
  line-height: 1;          /* remove extra vertical space */
  display: flex;
  align-items: center;     /* center inside */
}

/* HOVER */
.wcfp-admin-menu a:hover {
  background: var(--wcfp-bg);
}


/* =========================
   LAYOUT
========================= */
.wcfp-body {
  display: grid;
  grid-template-columns: var(--wcfp-sidebar-width) 1fr;
  min-height: calc(100vh - var(--wcfp-header-height));
  background: var(--wcfp-bg);
}



/* =========================
   SIDEBAR
========================= */
.wcfp-sidebar {
  background: #0f172a;
  color: #fff;
  padding: 16px 8px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.wcfp-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcfp-nav li {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
}

.wcfp-nav li:hover {
  background: rgba(255,255,255,0.12);
}

.wcfp-nav li.active {
  background: #98AFC7;
}



/* =========================
   CONTENT
========================= */
.wcfp-content {
  padding: 20px;
}



/* =========================
   HEADINGS
========================= */
.wcfp-heading {
  margin: 0 0 16px 0;
  font-size: 28px;
  font-weight: 800;
  color: #111827;
}



/* =========================
   GRID / CARDS
========================= */
.wcfp-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wcfp-btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--wcfp-radius);
  background: var(--wcfp-surface);
  border: 1px solid var(--wcfp-border);
  box-shadow: var(--wcfp-shadow);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
  text-align: center;
}

.wcfp-btn-card:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.wcfp-btn-card:active {
  transform: translateY(1px);
}



/* =========================
   VIEWS
========================= */
.wcfp-view {
  display: none;
}

.wcfp-view.active {
  display: block;
}



/* =========================
   PLACEHOLDER
========================= */
.wcfp-placeholder {
  background: var(--wcfp-surface);
  border: 1px solid var(--wcfp-border);
  border-radius: var(--wcfp-radius);
  padding: 24px;
  box-shadow: var(--wcfp-shadow);
}



/* =========================
   TOAST & MODAL
========================= */
.wcfp-toast {
  background: #333;
  color: #fff;
  padding: 10px 15px;
  border-radius: 4px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 10000;
}

#wcfp-confirmation-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  text-align: center;
}

#wcfp-confirmation-modal > div {
  background: #fff;
  padding: 20px;
  margin: 15% auto;
  width: 300px;
  border-radius: 8px;
}



/* =========================
   MOBILE
========================= */
@media (max-width: 991px) {

  .wcfp-sidebar {
    display: none !important;
  }

  .wcfp-body {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .wcfp-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
  }

  .wcfp-hamburger {
    display: inline-block !important;
    font-size: 26px;
    margin-right: 12px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
  }

  #wcfp-mobile-menu {
    display: none;
    background: #1b263b;
    width: 100%;
    position: relative;
    z-index: 999;
  }

  #wcfp-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #wcfp-mobile-menu li {
    border-bottom: 1px solid #324a5f;
  }

  #wcfp-mobile-menu a {
    display: block;
    padding: 14px 18px;
    color: white;
    text-decoration: none;
    font-size: 16px;
  }

  #wcfp-mobile-menu a:hover {
    background: #415a77;
  }

  .wcfp-grid {
    grid-template-columns: 1fr !important;
  }
}



/* =========================
   DESKTOP
========================= */
@media (min-width: 992px) {
  #wcfp-mobile-menu {
    display: none !important;
  }

  .wcfp-hamburger {
    display: none !important;
  }
}







/* =========================
   BREADCRUMB STYLE
========================= */

#wcfp-breadcrumb {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #000;
}

/* links */
#wcfp-breadcrumb a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* hover */
#wcfp-breadcrumb a:hover {
  color: #0073aa;
}

/* separator */
#wcfp-breadcrumb .sep {
  margin: 0 6px;
  color: #999;
}

/* active (CURRENT PAGE) */
#wcfp-breadcrumb .active {
  color: #0073aa; /* WP blue */
  font-weight: 600;
  font-size: 17px;
}












/* FULL WIDTH FIX */
.wcfp-card {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* HEADER */
.wcfp-card-header {
  width: 100% !important;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}

/* BODY */
.wcfp-card-body {
  width: 100% !important;
  padding: 16px;
}

/* TITLE */
.wcfp-card-header .wcfp-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

/* Primary buttons */
.wcfp-save-category,
.wcfp-add-category,
.wcfp-add-product,
.wcfp-add-extra-product,
.wcfp-save-extra-product,
.wcfp-add-hashtag,
.wcfp-add-video,
.wcfp-add-shipping,
.wcfp-add-news,
.wcfp-add-store-banner,
.wcfp-save-news,
.wcfp-save-video,
.wcfp-save-template,
.wcfp-save-customer-review,
.wcfp-add-review,
.wcfp-add-video-reviews,
.wcfp-save-video-reviews,
.wcfp-save-hashtag,
.wcfp-save-shipping,
.wcfp-save-banner,
.wcfp-save-discount,
.wcfp-add-discount,
.wcfp-save-country,
.wcfp-save-exchange-rate,
.wcfp-save-failed-template,
.wcfp-add-country,
.wcfp-add-subject,
.wcfp-save-subject,
.wcfp-download-list,
.wcfp-download-list2,
.wcfp-reset-filter,
.wcfp-save-class,
.wcfp-save-order,
.wcfp-save-korean,
.wcfp-save-usa,
.wcfp-save-dubai,
.wcfp-adjust-points-btn,
.wcfp-save-registration-template,
.wcfp-save-reviews-testimonials,
.wcfp-add-affiliate,
.wcfp-save-small-banner,
.wcfp-save-footer,
.wcfp-save-testimonial,
.wcfp-save-affiliate,
.wcfp-save-review,
.wcfp-save-product,
button[form="wcfp-edit-order-form"] /* Update button */{
  text-decoration:none !important;  
  background: #0073aa;
  color: #fff !important;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wcfp-save-category:hover,
.wcfp-add-category:hover,
.wcfp-add-video:hover,
.wcfp-add-extra-product:hover,
.wcfp-save-extra-product:hover,
.wcfp-save-template:hover,
.wcfp-add-review:hover,
.wcfp-add-shipping:hover,
.wcfp-save-shipping:hover,
.wcfp-save-customer-review:hover,
.wcfp-save-discount:hover,
.wcfp-add-discount:hover,
.wcfp-save-country:hover,
.wcfp-save-country:hover,
.wcfp-save-exchange-rate:hover,
.wcfp-save-failed-template:hover,
.wcfp-add-subject:hover,
.wcfp-save-subject:hover,
.wcfp-download-list:hover,
.wcfp-download-list2:hover,
.wcfp-save-class:hover,
.wcfp-save-order:hover,
.wcfp-save-korean:hover,
.wcfp-save-usa:hover,
.wcfp-save-dubai:hover,
.wcfp-adjust-points-btn:hover,
.wcfp-save-registration-template:hover,
.wcfp-save-reviews-testimonials:hover,
.wcfp-add-affiliate:hover,
.wcfp-save-footer:hover,
.wcfp-save-affiliate:hover,
.wcfp-save-small-banner:hover,
.wcfp-save-testimonial:hover,
.wcfp-save-review:hover,
.wcfp-add-product:hover,
button[form="wcfp-edit-order-form"]:hover,
#back-to-orders:hover {
  background: #005f8d;
}









/* -------------------------
   FILTER BAR STYLING
--------------------------*/
.wcfp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 15px;
  background: #fff;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 15px;
}

/* Labels */
.wcfp-filter-bar label {
  font-weight: 600;
  margin-right: 5px;
}

/* Date Inputs */
.wcfp-filter-bar input[type="date"] {
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  min-width: 150px;
}

/* Main Buttons */
#filter-apply,
#filter-clear {
  padding: 6px 12px !important;
  height: 30px;
  line-height: 20px;
}

/* QUICK FILTER WRAPPER */
.quick-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Quick filter buttons */
.quick-filters .button-small {
  padding: 4px 8px !important;
  height: 30px;
  line-height: 16px;
}

/* Select (Last 5 Months) */
#last-5-months {
  height: 30px;
  padding: 4px 6px !important;
  line-height: 18px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* -------------------------
   RESPONSIVE BELOW 768PX
--------------------------*/
@media (max-width: 768px) {
  .wcfp-filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .quick-filters {
    width: 100%;
    justify-content: flex-start;
  }

  #filter-apply,
  #filter-clear {
    width: 100%;
  }
}









/* =========================
   SAFE RESET (ONLY TABLE)
========================= */

/* Remove WP table background ONLY (not buttons) */
.wp-list-table,
.wp-list-table thead,
.wp-list-table tbody,
.wp-list-table tr,
.wp-list-table th,
.wp-list-table td {
  background: none !important;
  box-shadow: none !important;
}

/* =========================
   GLOBAL DATATABLE GRID STYLE
========================= */

/* TABLE BASE */
table.dataTable {
  background: #ffffff !important;
  border-collapse: collapse !important;

  /* FIXED SCROLLX SUPPORT */
  width: auto !important;
  min-width: 100% !important;

  border: 2px solid #ddd;
  table-layout: auto !important;
}

/* HEADER */
table.dataTable thead th {
  background: #ffffff !important;
  border: 2px solid #ddd !important;
  padding: 10px !important;

  white-space: nowrap;
  position: relative;
  padding-right: 24px !important;
}

/* ROWS */
table.dataTable tbody tr {
  background: #ffffff !important;
}

/* CELLS */
table.dataTable tbody td {
  background: #ffffff !important;
  border: 2px solid #e5e5e5 !important;
  padding: 10px !important;
}

/* HOVER */
table.dataTable tbody tr:hover td {
  background: #fff !important;
}

/* REMOVE STRIPES */
table.dataTable.stripe tbody tr,
.wp-list-table.striped tbody tr:nth-child(odd),
.wp-list-table.striped tbody tr:nth-child(even) {
  background: #ffffff !important;
}

/* SORT COLUMN RESET */
table.dataTable td.sorting_1,
table.dataTable td.sorting_2,
table.dataTable td.sorting_3 {
  background: #ffffff !important;
}

/* REMOVE SORT ICON FOR NO-SORT COLUMN */
th.no-sort::after {
  display: none !important;
}

/* =========================
   FIX DOUBLE BORDER ISSUE
========================= */

table.dataTable {
  border-collapse: collapse !important;
}

table.dataTable thead th {
  border-bottom: 1px solid #ddd !important;
}

table.dataTable tbody tr:first-child td {
  border-top: none !important;
}

table.dataTable tbody td {
  border-bottom: 1px solid #e5e5e5 !important;
}

table.dataTable.cell-border tbody td,
table.dataTable.row-border tbody tr {
  border: none !important;
}

/* =========================
   FIX DATATABLE SCROLLX
========================= */

.dataTables_wrapper {
  width: 100% !important;
}

.dataTables_scrollHead,
.dataTables_scrollBody {
  width: 100% !important;
}

/* IMPORTANT: keep alignment */
.dataTables_scrollHeadInner {
  box-sizing: border-box !important;
}

/* ENABLE HORIZONTAL SCROLL */
.dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* KEEP HEADER + BODY SAME WIDTH */
.dataTables_scrollHead table,
.dataTables_scrollBody table {
  width: 100% !important;
  min-width: 100% !important;
}

/* PREVENT WRAP ISSUES */
table.dataTable th,
table.dataTable td {
  white-space: nowrap;
}









/* Category filter dropdown */
#wcfp-category-filter-best-items,
#wcfp-category-filter-inventory-calculation,
#wcfp-category-filter-category-products,
#wcfp-category-filter-new-arrivals,
#wcfp-category-filter-sale{
  display: inline-block;
  padding: 7px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  height: 36px;
  font-size: 14px;
  background: #fff;
  margin-bottom: 10px;
  margin-right: 12px;
  min-width: 180px;
  max-width: 260px;
}








/* ===============================
   Forms – Combined Design + Functionality
   =============================== */
.wcfp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* EACH ROW FULL WIDTH */
.wcfp-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  margin-bottom: 5px;
}

/* HALF FIELD = 50% */
.wcfp-form-row .wcfp-form-group.half {
  width: calc(50% - 10px);
}

/* FULL FIELD (optional explicit) */
.wcfp-form-row .wcfp-form-group.full {
  width: 100%;
}

/* EACH FIELD INSIDE ROW */
.wcfp-form-group {
  display: flex;
  flex-direction: column;
  flex: 1; /* makes equal width columns */
  min-width: 250px; /* prevents breaking too small */
}

/* LABEL */
.wcfp-form-group label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

/* INPUTS */
.wcfp-form-group input,
.wcfp-form-group select,
.wcfp-form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

/* Mobile Responsive */
@media (max-width: 991px) {
  .wcfp-form {
    grid-template-columns: 1fr; /* stack columns */
    gap: 12px; /* smaller gap for mobile */
  }

  .wcfp-form-row { flex-direction: column; gap: 12px; }
  .wcfp-form-row .wcfp-form-group { flex: 1 1 100% !important; width: 100% !important; }

  /* Hide placeholder rows if any */
  .wcfp-form-group.placeholder { display: none; }
}


#wcfp-view-orders {
    min-width: 0 !important;
}

.wcfp-content {
    min-width: 0 !important;
}

.wcfp-wrapper {
    min-width: 0 !important;
}










.wcfp-dashboard-groups .wcfp-grid {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 4px solid blue;
}

.wcfp-dashboard-groups .wcfp-grid:last-child {
    border-bottom: none;
}