@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap);
/* #root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
} */

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

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

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}







/* ---- Global Theme Transition ---- */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

/* Dark mode: html + body + root — OS :root light rengi altta beyaz şerit bırakmasın */
html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0f1117;
  min-height: 100%;
  min-height: 100dvh;
}

html[data-theme="dark"] body,
body[data-theme="dark"] {
  background-color: #0f1117;
  color: #f0f1f5;
  min-height: 100%;
  min-height: 100dvh;
}

html[data-theme="light"] {
  background-color: #ffffff;
  min-height: 100%;
  min-height: 100dvh;
}

#root {
  min-height: 100%;
  min-height: 100dvh;
}

html[data-theme="dark"] #root {
  background-color: #0f1117;
}

.container {
    position: relative;
}
#loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 1);
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

/* Bildirim paneli — tema ile uyumlu (layout-modern token’ları) */

.notification-dropdown.modern {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(400px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  max-height: min(560px, 72vh);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--nav-border, #e8eaed);
  background: var(--nav-bg, #ffffff);
  box-shadow:
    0 4px 6px rgba(15, 17, 23, 0.04),
    0 20px 48px rgba(15, 17, 23, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.notification-dropdown.modern .notification-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--nav-border, #e8eaed);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nav-primary, #ff8306) 10%, var(--nav-bg, #fff)) 0%,
    var(--nav-bg, #fff) 100%
  );
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .notification-dropdown.modern .notification-dropdown-header {
    background: var(--nav-primary-light, rgba(255, 131, 6, 0.09));
  }
}

.notification-dropdown.modern .notification-dropdown-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--nav-text, #111827);
}

.notification-dropdown.modern .notification-dropdown-title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--nav-primary-light, rgba(255, 131, 6, 0.12));
  color: var(--nav-primary, #ff8306);
}

.notification-dropdown.modern .notification-badge-small {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.notification-dropdown.modern .notification-mark-all-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--nav-primary, #ff8306) 35%, transparent);
  color: var(--nav-primary, #ff8306);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.notification-dropdown.modern .notification-mark-all-btn:hover {
  background: var(--nav-primary-light, rgba(255, 131, 6, 0.12));
  border-color: var(--nav-primary, #ff8306);
}

.notification-dropdown.modern .notification-mark-all-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-primary, #ff8306) 30%, transparent);
}

.notification-dropdown.modern .notification-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  max-height: min(480px, 58vh);
}

.notification-dropdown.modern .notification-loading,
.notification-dropdown.modern .notification-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--nav-text-muted, #6b7280);
  font-size: 0.88rem;
}

.notification-dropdown.modern .notification-empty {
  font-weight: 500;
}

.notification-dropdown.modern .notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 12px 12px;
  margin: 0 8px 4px;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

/* Tip rengi — sol dikey şerit (getNotificationTypeInfo → --notif-accent) */
.notification-dropdown.modern .notification-item-type-strip {
  flex-shrink: 0;
  width: 4px;
  min-height: 44px;
  align-self: center;
  margin: 2px 0;
  border-radius: 999px;
  background: var(--notif-accent, #94a3b8);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--notif-accent, #94a3b8) 25%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .notification-dropdown.modern .notification-item-type-strip {
    box-shadow: none;
    opacity: 0.95;
  }
}

.notification-dropdown.modern .notification-item:hover {
  background: var(--nav-primary-light, rgba(255, 131, 6, 0.08));
}

.notification-dropdown.modern .notification-item.unread {
  background: color-mix(in srgb, var(--nav-primary, #ff8306) 8%, var(--nav-bg, #fff));
  border-color: color-mix(in srgb, var(--nav-primary, #ff8306) 22%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .notification-dropdown.modern .notification-item.unread {
    background: rgba(255, 131, 6, 0.08);
    border-color: rgba(255, 131, 6, 0.2);
  }
}

.notification-dropdown.modern .notification-item.unread:hover {
  background: color-mix(in srgb, var(--nav-primary, #ff8306) 14%, var(--nav-bg, #fff));
}

.notification-dropdown.modern .notification-item-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--nav-border, #e8eaed) 55%, transparent);
}

.notification-dropdown.modern .notification-item-content {
  flex: 1;
  min-width: 0;
}

.notification-dropdown.modern .notification-item-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--nav-text, #111827);
  margin-bottom: 4px;
  line-height: 1.35;
}

.notification-dropdown.modern .notification-item-message {
  font-size: 0.8rem;
  color: var(--nav-text-muted, #6b7280);
  line-height: 1.45;
  margin-bottom: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.notification-dropdown.modern .notification-item-time {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nav-text-muted, #9ca3af);
  opacity: 0.9;
}

.notification-dropdown.modern .notification-item-dot {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nav-primary, #ff8306);
  box-shadow: 0 0 0 2px var(--nav-bg, #fff);
}

.notification-dropdown.modern .notification-load-more {
  padding: 10px 12px 14px;
  margin-top: 4px;
}

.notification-dropdown.modern .notification-load-more-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--nav-border, #e8eaed);
  color: var(--nav-text-muted, #6b7280);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.notification-dropdown.modern .notification-load-more-btn:hover:not(:disabled) {
  background: var(--nav-primary-light, rgba(255, 131, 6, 0.08));
  border-color: color-mix(in srgb, var(--nav-primary, #ff8306) 40%, var(--nav-border, #e8eaed));
  color: var(--nav-primary, #ff8306);
}

.notification-dropdown.modern .notification-load-more-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Scrollbar */
.notification-dropdown.modern .notification-dropdown-content::-webkit-scrollbar {
  width: 7px;
}

.notification-dropdown.modern .notification-dropdown-content::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}

.notification-dropdown.modern .notification-dropdown-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--nav-text-muted, #9ca3af) 45%, transparent);
  border-radius: 10px;
}

.notification-dropdown.modern .notification-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--nav-text-muted, #9ca3af) 65%, transparent);
}

[data-theme="dark"] .notification-dropdown.modern .notification-dropdown-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .notification-dropdown.modern .notification-dropdown-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

[data-theme="dark"] .notification-dropdown.modern {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 24px 56px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .notification-dropdown.modern .notification-item-dot {
  box-shadow: 0 0 0 2px var(--nav-bg, #1a1d27);
}

/* Mobil */
@media (max-width: 575.98px) {
  .notification-dropdown.modern {
    width: calc(100vw - 16px);
    right: 0;
    max-height: 70vh;
    border-radius: 14px;
  }

  .notification-dropdown.modern .notification-dropdown-header {
    padding: 12px 14px;
  }

  .notification-dropdown.modern .notification-item {
    margin: 0 6px 4px;
    padding: 10px 12px;
  }
}

/* ============================================================
   HEADER.CSS
   All primary navbar / sidebar / dropdown styles live in
   layout-modern.css — this file only holds supplemental styles
   that are specific to the Header.jsx component tree.
   ============================================================ */

/* ---- Impersonation Banner ---- */
.impersonation-banner {
  width: 100%;
  background: #b91c1c;
  color: #fff;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  gap: 12px;
}

.impersonation-banner button {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.impersonation-banner button:hover {
  background: rgba(255,255,255,0.25);
}

/* ---- Notification container positioning ---- */
.header-notification-container {
  position: relative;
}

/* ---- Tooltip override ---- */
.tooltipbuttons {
  font-size: 0.78rem;
}

/* ---- Toolbar row (hamburger + actions) ---- */
.header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  gap: 12px;
}

/* Theme + balance + bell — subtle glass chip */
.nav-actions-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .nav-actions-cluster {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.nav-balance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}

.nav-balance-amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.nav-balance-label {
  font-size: 0.76rem;
  font-weight: 600;
}

/* Dil TR/EN — landing’deki segment kontrolüne benzer, nav token’larıyla */
.nav-lang-switch {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 11px;
  background: var(--nav-bg, #fff);
  border: 1px solid var(--nav-border, #e8eaed);
  gap: 2px;
  height: 38px;
  box-sizing: border-box;
}

.nav-lang-btn {
  padding: 0 10px;
  height: 100%;
  min-height: 0;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--nav-text-muted, #6b7280);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-lang-btn:hover {
  color: var(--nav-text, #111827);
}

.nav-lang-btn.is-active {
  background: linear-gradient(135deg, var(--nav-primary-hover, #e07000), var(--nav-primary, #ff8306));
  color: #fff;
  box-shadow: 0 2px 10px var(--nav-primary-glow, rgba(255, 131, 6, 0.25));
}

/* Bildirim zili — açıkken vurgu */
.header-notification-icon.is-open {
  background: var(--nav-primary-light, rgba(255, 131, 6, 0.15));
  color: var(--nav-primary, #ff8306);
  border-color: color-mix(in srgb, var(--nav-primary, #ff8306) 28%, transparent);
}

[data-theme="dark"] .header-notification-icon.is-open {
  border-color: rgba(255, 131, 6, 0.35);
}

/* Marka satırı — tüm sayfalarda aynı yapı */

.brand-mark {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  gap: 10px;
  color: #111827;
}

[data-theme="dark"] .brand-mark {
  color: #f0f1f5;
}

.brand-mark__accent {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--nav-primary, #ff8306);
  box-shadow: 0 0 0 3px var(--nav-primary-light, rgba(255, 131, 6, 0.18));
}

.brand-mark__name {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  /* px: sayfa scope’larında değişen rem/html font-size’dan etkilenmesin */
  font-size: 17px;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: inherit;
}

/*
  Çoğu route’ta Logo, .sidebar-logo olmadan doğrudan .menures ilk çocuğu.
  mainPage / DasboardFrida’daki .sidebar-logo şeridiyle aynı ritim ve hizalama.
*/
.menures > .brand-mark {
  flex-shrink: 0;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-height: var(--sidebar-header-h, 60px);
  padding: 0 18px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--nav-border, #e8eaed);
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sidebar-bg, #ffffff) 96%, var(--nav-primary, #ff8306) 4%) 0%,
    var(--sidebar-bg, #ffffff) 100%
  );
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .menures > .brand-mark {
    background: var(--sidebar-bg, #ffffff);
  }
}

[data-theme="dark"] .menures > .brand-mark {
  border-bottom-color: var(--nav-border, #252836);
  background: transparent;
}

.menures > .brand-mark .brand-mark__name {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}


div.main{
   padding: unset  !important;
}
div[name="asli"]{
   background: #f0f0fa;
}
div[name="dashboard"] div{
   font-family: sans-serif;
   font-weight: bolder;
}
div[name="mainmenu"] div.item{
   font-family: sans-serif;
   font-weight: bolder;
  }

div[name="mainmenu"]{
         background: white;
  }


div[name="mainmenu"] >div{
   cursor:pointer;
}

div[name="mainmenu"] .k-expander.k-expanded.k-focus{
   flex: 1;
   border: 0px !important;
   box-shadow: unset !important;
}
div[name="mainmenu"] .k-expander.k-expanded{
   flex: 1;
   border: 0px !important;
}
div[name="mainmenu"] .k-expander-content{
   padding-block: opx !important;
}

div[name="mainmenu"] .k-expander-content div.list div{
   text-align:right ;
   color: #939090;
}
div[name="mainmenu"] .k-spacer,.k-flex{
   width: 0px;
   flex: unset !important;
} 
div[name="mainmenu"] .k-expander-indicator{
   margin-left: auto;
}


div[name="mainmenu"] .k-expander-header{
   /* justify-content: start; */
}  

div[name="mainmenu"] .k-expander-title svg{
   font-size: 19px;
   margin-left: 9px;
   margin-right: 8px;

}
div[name="mainmenu"] .k-expander-header:hover, .k-expander-header.k-hover{
   /* background-color: white !important; */
}






div#content{
    flex:10;
    background-color:#f0f0fa;
    display: flex;
    flex-direction: column;
}
div.section1.mainconmaincontenttnt{
    flex:1;
    background: transparent;
    padding-top: 2vh;
    padding-left: 1vw;
}
div.section1.maincontent span{
    font-size: 2vw;
    font-weight: bolder;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

 div.section2{
    /* display: flex;
    flex:1; */
    background-color: transparent;
 }

 div.section2 div.chart{
    flex: 1;
    margin-right: 1vw;
    margin-left: 1vw;
 }

 div.section3{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section4{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section5{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section6{
    display: flex;
    flex:1;
    background-color: transparent;
 }
 div.section6 div.k-grid-header tr{
  background: #ff8522 !important;
}


 div.section3{
   flex:37;
   background: transparent;
   padding-top: 2vh;
   padding-left: 1vw;
   padding-right: 1vw;
}
div.section3 .k-table-row.k-master-row.k-table-alt-row.k-alt{
   background: white;
}

div.section3  thead tr{
   background: white;
}
div.section3 .k-grid{
   border: 0px !important;
}
div.section3 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
   border-right: 0px !important;
   border-left: 0px !important;
   border-bottom: 1px solid #d0d1d3
}
div.section3 .k-grid-md td, .k-grid-md .k-table-td{
   border-bottom:1px solid #d0d1d3;
   font-weight: 900;
   color: #100f0f;
   font-family: segoe;
   font-size: 12px;
}
div.section3 .k-grid-content.k-virtual-content{
   display: contents;
}
div.section3 .k-grid-header{
   display: contents;
}
div.section3 span.k-cell-inner{
   border-bottom:1px solid #d0d1d3
}
div.section3 span.k-column-title{
   font-weight: 900;
   padding-left: 2px;
   font-family: 'segoe';
}
div.section3 .k-progressbar{
   border-radius: 10px !important;
}
div.section3 .k-progressbar .k-selected{
   background-color: #ff8522 !important;
}
div.section3 .k-progressbar-horizontal{
   height: var(--kendo-progressbar-height, 13px) !important;
} 
div.section3 .k-progress-status{
   color: #15151a;
   font-weight: bolder;
}

div.section3 .k-picker-solid{
   background: white;
}

div.section3 .right .header .right button{
   background: white;
   border:0px
}
div.section3 .k-button-solid-base:focus, .k-button-solid-base.k-focus{
   box-shadow: unset !important;
}
div.section3 div.k-animation-container{

}
.mypop{
      width: 15vw;
      font-size: 89px;
}
div.section4 div.k-card-body{
   border: 2px solid #868282;
}
div.section4 .k-card{
   margin-right: 1vw;
   max-height: 32vh;
   flex:1;
   display: flex;
   box-shadow: 0px 0px 0px 1px #ccc;
}
div.section4 .k-card-body{
   height: 10vh;
   flex:10 !important;
   overflow: hidden;
}
div.section4 .k-card-footer{
   padding-block: 0px !important;
}



div.section3 div.left{
   display: flex;
   flex-direction: column;
   flex:1;
   background-color: white;
   margin-right: 2vw;
}
div.section3 div.left div.header{
   display: flex;
   flex: 1;
}

div.section3 div.left div.header div.left{
    flex: 4;
    padding-left: 20px;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    justify-content: center;
}
div.section3 div.left div.grid
{
   flex:3;
   background: white;
   /* margin-top: 22px; */
   border-top:1px solid #d0d1d3
}

div.section3 div.left div.header div.right{
   flex: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}

div.section3 div.left div.header div.right button{
  /* width: 50%; */
  background-color: #ff8522;
  border-color:#ff8522 ;
  font-size:15px !important;
  padding: 10px 23px !important;
}

div.section3 div.right{
   display: flex;
   flex-direction: column;
   flex:1;
   background-color: white;
}


div.section3 div.right div.header{
   display: flex;
   flex: 1;
}

div.section3 div.right div.header div.left{
   flex: 4;
   padding-left: 20px;
   font-size: 22px;
   font-weight: 700;
   display: flex;
   justify-content: center;
}


div.section3 div.right div.header div.right{
   flex: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}


div.section3 div.grid{
   padding-left: 2vw;
   padding-right: 2vw;
}
div.grid div.dashboardgridrow{
   border-bottom:1px solid #dee7f0;
   /* height:180px !important */
  
}

div.grid div.ag-header-row.ag-header-row-column{
   border-bottom:1px solid #dee7f0
}
div.grid div.ag-header-row.ag-header-row-column{
   border:0px !important
}

.ag-theme-quartz {
   /* disable all borders */
   --ag-borders: none;
   --ag-border-color:transparent !important;
}
div.ag-header.ag-pivot-off.ag-header-allow-overflow{
   border-bottom-color: #f0f0fa;
   background-color: transparent !important;
}
span.ag-header-cell-text{
   font-weight: 800;
}

div[role="gridcell"]{
   color: #9e9e9e;
   font-weight: bold
}

div.rs-dropdown.rs-dropdown-placement-bottom-start{
   direction: rtl;
    width: 100%;
    border: 1px solid #f0f0f0;
    margin-right: 24px;
    border-radius: 5px;

}

button.rs-dropdown-toggle.rs-btn.rs-btn-default{
   background: transparent;
   border: 0px;
   display: flex;
   padding-right: 0px !important;
}


div.rs-dropdown.rs-dropdown-placement-bottom-start ul{
   list-style-type: none !important;

}

div.section3 div.right div.progress
{
   display: flex;
   flex-direction: column;
   flex:3;
   background: white;
   /* margin-top: 22px; */
   border-top: 1px solid #f0f0fa;
   justify-content: center;
   align-items: center;
   font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

div.innerprogress div:has(span.bbb){
   justify-content: center !important;
   /* border-radius: 0px !important; */
}

div.section4{
   flex:1;
   background: transparent;
   padding-top: 2vh;
   padding-left: 1vw;
   padding-right: 1vw;
}
div.section4 div.main{
   background-color: transparent;
   display: flex;
   flex-direction: column;
   width: 100%;
}
div.section4 div.main div.header{
   font-family: sans-serif;
   font-size: 20px;
   font-weight: 800;
   padding: 15px;
   background-color: white;
}

div.section4 div.main div.content{
   display: flex;
   padding: 10px;
   margin-top: 2px;
   background-color: white;
   justify-content: space-between;
}
div.section5{
    /* background-color: white; */
}
div.section5 div.left div.header{
   border-bottom: 2px solid #ccc;
   font-weight: bolder;
   font-size: 2vw;
}
div.section5 div.main{
   background-color: transparent;
   display: flex;
   flex-direction: column;
   width: 100%;
}
div.section5 div.main div.left{
  flex: 2.5;
  background-color: white;
}
div.section5 div.main div.right{
   flex: 2;
   /* background-color: white; */
 }

 div.section5 div.right div.header{
   border-bottom: 2px solid #ccc;
   font-weight: bolder;
   font-size: 2vw;
   background: white;
}
div.section5 div.days button{
   border-radius: 2px;
   flex: 1;
    border-radius: 1px;
    margin-right: 12px;
    max-height: 98vh;
}
div.section5 .k-grid{
   border: 0px !important;
}
div.section5 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
   border-right: 0px !important;
   border-left: 0px !important;
   border-bottom: 2px solid #d0d1d3
}
div.section5 .k-grid-md td, .k-grid-md .k-table-td{
   border-bottom:1px solid #d0d1d3;
   font-weight: 900;
   color: #575757;
   /* background-color: white !important; */
   font-family: 'segoe';
   text-wrap-mode: nowrap;
   padding-left: 4px !important;
   padding-right: 4px !important;
}
div.section5 .k-grid-content.k-virtual-content{
   display: contents;
}
div.section5 .k-grid-header{
   display: contents;
}
div.section5 thead tr{
   background-color: #f4f4f4;
}
div.section5 .totalincom {
   flex: 1;
   border-right: 2px solid #ccc;
}
div.section5 .totalincom svg{
   font-size: 6vh;
   margin-bottom: 2vh;
   margin-top: 2vh;
   
}

div.section6{
   background-color: white;
}

div.section6 div.header{
   /* border-bottom: 2px solid #ccc; */
   font-weight: bolder;
   font-size: 2vw;
   background-color: white;
}


div.section6 div.grid div.dashboardgridrow{
   border-bottom:1px solid #dee7f0;
   /* height:180px !important */
  
}

div.section6 div.grid div.ag-header-row.ag-header-row-column{
   border-bottom:1px solid #dee7f0
}
div.section6 div.grid div.ag-header-row.ag-header-row-column{
   border:0px !important
}
div.section6 .k-grid-content.k-virtual-content{
   display: contents;
}
div.section6 .k-grid-header{
   display: contents;
}

div.section6 .k-grid-header-wrap{
   background-color: #ff8522;
}

div.section6 thead{
   background-color: transparent;
}
div.section6 thead th{
   border:0px !important;
   color:white;
   font-weight: 900 !important;
}
div.section6 .grid tbody td{
   font-weight: 600;
   font-family: sans-serif;
   text-align: center;
 }
div.section6 .grid tbody td:nth-child(1){
  color: black;
  padding-left: 4px !important;
}
div.section6 div.grid .k-grid.k-grid-md{
   padding-left: 3px;
   padding-right: 3px;
   border: 0px;
}
div[name="asli"] .k-card-body{
   padding-block:unset !important;
   padding-inline:unset !important;
}
div[name="asli"] div.section4 .k-card{
   box-shadow: unset !important;
}

div.section5 div.right div.grid thead th{
   background: #ff8522;
}


div.section3 div.left table tbody tr:nth-of-type(even) td div{
   /* background: transparent !important; */
}
div.section6  table tbody tr:nth-of-type(even) td div{
   background: transparent !important;
}
div[name="asli"] div.section3 div.k-grid-header tr{
   background:#ff8731 !important
}
/* ==========================================================================
   DashboardImprovements.css
   ========================================================================== */
/* @font-face {
  font-family: 'Fantasy'; 
  src: local('Fantasy'),
       url('./assets/fonts/Fantasy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;  
} */

/* --- Global & Typography --- */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    background-color: rgb(240, 240, 250);
    margin: 0;
    line-height: 1.6;
    transition: background-color 0.25s ease, color 0.25s ease;
}

[data-theme="dark"] body,
body[data-theme="dark"] {
    background-color: #0f1117;
    color: #f0f1f5;
}

/* Sidebar dark — token-driven via layout-modern.css, no override needed */

/* Header dark — token-driven via layout-modern.css, no override needed */

/* Main content area dark — token-driven via layout-modern.css */

/* Section cards dark (section2, section3, etc.) */
[data-theme="dark"] .section2 .chart,
[data-theme="dark"] .section3 > .left,
[data-theme="dark"] .section3 > .right,
[data-theme="dark"] .section4 > .main,
[data-theme="dark"] .section5 > .main > .left,
[data-theme="dark"] .section5 > .main > .right,
[data-theme="dark"] .section6 {
    background-color: #1a1d27 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    border: 1px solid #2a2d3a !important;
}

[data-theme="dark"] .section3 > .left > .header,
[data-theme="dark"] .section3 > .right > .header,
[data-theme="dark"] .section4 > .main > .header,
[data-theme="dark"] .section5 .header,
[data-theme="dark"] .section6 > .header,
[data-theme="dark"] .dashboard-card-header {
    color: #f0f1f5 !important;
    border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #f0f1f5;
}
.clear-filters-btn{
    background-color: #333 !important;
}
/* Eski .logofonts kaldırıldı — marka artık Logo.jsx .brand-mark__name */
.swiper{
    padding-bottom: 5% !important;
}
.swiper-slide p{
    font-size: 1.2rem;
    font-weight: bold;
}
.swiper-button-prev, .swiper-button-next{
    color: #ff7500 !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
      background: #ff7500 !important;

}
h1, h2, h3, h4, h5, h6 {
    color: #111;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

a {
    color: #ff5215;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* --- Main Layout --- */
/* Assuming .attribute.d-flex is the top-level wrapper for the page */
.attribute.d-flex {
    min-height: 100vh; /* Make sure layout takes full viewport height */
    flex-direction: row; /* Sidebar solda, içerik sağda */
}

/* MainpageWrapper: sidebar fixed olduğunda (mobil) içeriği sağa it */
@media (max-width: 768px) {
    .attribute.d-flex .mainpage-wrapper-content {
        margin-left: 300px; /* menü genişliği */
    }
}

.menures {
    background: var(--sidebar-bg, #ffffff);
    box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: background 0.25s ease;
}

#header {
    background: var(--nav-bg, #ffffff);
    padding: 10px 25px;
    border-bottom: 1px solid var(--nav-border, #e0e0e0);
    box-shadow: var(--nav-shadow, 0 2px 5px rgba(0,0,0,0.03));
    display: flex;
    align-items: center;
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Main content area wrapper after menu and header */
.d-flex.flex-column.mb-4.w-100[style*="max-width:98.99vw"] {
    overflow-x: hidden; /* Prevent horizontal scroll if max-width causes issues */
}

/* General container for dashboard sections */
.d-flex.flex-column.col-12.grid[style*="backgroundColor:rgb(240 240 250)"] {
    padding: 20px; /* Add overall padding to the content area */
}


/* --- Common Card Styling --- */
.dashboard-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dashboard-card-header {
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-card-header .right button,
.dashboard-card-header .right .btn {
    background-color: #ff5215;
    border-color: #ff5215;
    color: white !important; /* Ensure text color is white */
    padding: 8px 18px;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dashboard-card-header .right button:hover,
.dashboard-card-header .right .btn:hover {
    background-color: #e04000;
    border-color: #e04000;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

.dashboard-card-content {
    padding: 25px;
    flex-grow: 1;
}

/* --- Section Specific Styling --- */

/* Welcome Message (Section 1) */
.section1.maincontent {
    padding: 20px; /* Reduced from 25px if inside overall padded area */
    margin-bottom: 25px;
    /* Optional: Make it look like a card if desired */
    /* background-color: #fff; */
    /* border-radius: 12px; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */
}
.section1.maincontent span {
    font-size: 1.5rem;
    color: #34495e;
    font-weight: 500;
}

/* Charts (Section 2) */
.section2 {
    display: flex; /* این باید حتما باشد */
    flex-wrap: wrap; /* اجازه می‌دهد آیتم‌ها در صورت نبود فضا به خط بعدی بروند */
    gap: 20px; /* فاصله بین کارت‌ها */
    margin-bottom: 25px;
    align-items: flex-start;
}

.section2 .chart {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    padding: 15px; /* پدینگ داخلی کارت */

    /* --- تنظیمات کلیدی برای اندازه و چیدمان --- */
    flex-grow: 1;     /* <<< جدید: به کارت‌ها اجازه می‌دهد در فضای موجود رشد کنند تا ردیف را پر کنند */
    flex-shrink: 1;   /* به کارت‌ها اجازه می‌دهد در صورت نیاز کوچک شوند */
    flex-basis: 0;    /* <<< جدید: عرض اولیه صفر است، flex-grow توزیع را انجام می‌دهد.
                           این کمک می‌کند تا 4 کارت به طور مساوی فضا را تقسیم کنند.
                           می‌توانید از یک مقدار مثل 200px هم استفاده کنید (flex-basis: 200px)
                           و سپس با max-width عرض را محدود کنید. */

    min-width: 220px; /* <<< مهم: حداقل عرضی که هر کارت باید داشته باشد قبل از شکستن خط.
                           این عدد را طوری تنظیم کنید که 4 کارت در دسکتاپ جا شوند.
                           (عرض صفحه - (3 * gap)) / 4 = تقریبا min-width مناسب */

    /* max-width: calc(25% - 15px); */ /* <<< یک راه برای اینکه دقیقا 4 تا در یک ردیف باشند.
                                            15px = (3 * 20px gap) / 4.
                                            این را می‌توانید فعال کنید اگر flex-basis: 0 کار نکرد. */

    display: flex; /* <<< مهم: برای کنترل محتوای داخلی کارت (عنوان، زیرعنوان، چارت) */
    flex-direction: column; /* محتوای داخلی کارت زیر هم قرار می‌گیرد */
    min-height: 280px; /* <<< جدید: یک حداقل ارتفاع برای کارت‌ها (اختیاری) */
    max-height: 320px; /* <<< جدید: یک حداکثر ارتفاع برای کارت‌ها (اختیاری، برای کنترل ارتفاع زیاد) */
    /* overflow: hidden; */   /* <<< اگر از max-height استفاده می‌کنید و محتوا بیشتر است، این را فعال کنید */
}

.section2 .chart .apexcharts-title-text {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 0.9rem !important; /* فونت کوچک‌تر برای عنوان */
    margin-bottom: 4px !important; /* فاصله کمتر */
    white-space: nowrap; /* جلوگیری از شکستن عنوان به خط بعدی اگر خیلی طولانی است */
    overflow: hidden;
    text-overflow: ellipsis; /* نمایش "..." برای عنوان طولانی */
    flex-shrink: 0; /* عنوان نباید کوچک شود */
}
.section2 .chart .k-chart{
    height: 140px;
}
.section2 .chart .apexcharts-subtitle-text {
    font-size: 1.4rem !important; /* فونت کوچک‌تر برای عدد */
    font-weight: bold !important;
    color: #ff5215 !important;
    margin-bottom: 8px !important; /* فاصله قبل از چارت */
    flex-shrink: 0; /* زیرعنوان نباید کوچک شود */
}
/* Ensure chart itself takes available space */
.section2 .chart .apexcharts-canvas,
.section2 .chart > div[id^="apexcharts"] /* سلکتور جایگزین برای کانتینر چارت */
 {
    flex-grow: 1 !important; /* <<< چارت فضای باقی‌مانده در کارت را پر کند */
    min-height: 150px !important; /* <<< یک حداقل ارتفاع برای خود گراف چارت */
    max-height: 200px !important; /* <<< یک حداکثر ارتفاع برای خود گراف چارت (برای کنترل دقیق‌تر) */
    height: 180px !important; /* <<< یا یک ارتفاع ثابت برای خود گراف چارت */
    overflow: hidden !important; /* برای اطمینان از عدم سرریز محتوای چارت */
}

/* My Orders & Orders In Production (Section 3) */
.section3 {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    /* padding: 0 20px 20px 20px; /* Removed as parent has padding */
    margin-bottom: 25px;
}

.section3 > .left,
.section3 > .right {
    flex: 1 1 45%;
    min-width: 320px;
    /* Applying common card styles directly */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.section3 > .left > .header,
.section3 > .right > .header {
    /* Using .dashboard-card-header styles */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section3 > .left > .grid, /* div containing AG Grid */
.section3 > .right > .progress { /* div containing progress bars */
    /* Using .dashboard-card-content styles */
    padding: 25px;
    flex-grow: 1;
}

.section3 .ag-theme-quartz {
    height: 350px;
    border: none;
}

.section3 .right .progress > div[style*="font-family:sarabun"] { /* No data message */
    text-align: center;
    padding: 30px 20px;
    color: #7f8c8d;
    font-style: italic;
    font-size: 1rem;
}
/* Example for Dashboardprogress (you'll need to adapt to its actual structure) */
/* .dashboard-progress-item { margin-bottom: 15px; }
.dashboard-progress-item .name { font-size: 0.9rem; color: #555; margin-bottom: 5px; }
.dashboard-progress-item .progress-bar-wrapper { background-color: #ecf0f1; border-radius: 5px; height: 10px; overflow: hidden;}
.dashboard-progress-item .progress-bar-fill { background-color: #ff5215; height: 100%; border-radius: 5px; transition: width 0.3s ease-in-out;} */


/* Trend Sales (Section 4) */
.section4 {
    /* padding: 0 20px 20px 20px; /* Removed as parent has padding */
    margin-bottom: 25px;
}
.section4 > .main {
    /* Applying common card styles */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.section4 > .main > .header {
    /* Using .dashboard-card-header styles */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
}
.section4 > .main > .content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 25px;
}
.section4 > .main > .content > div[style*="width:204px"] { /* Wrapper for Dashboardcards */
    width: auto !important;
    flex: 1 1 220px;
    min-width: 200px;
    /* Ensure Dashboardcards component itself has card styling (border-radius, shadow etc.) */
    /* e.g., .dashboardcards-component { border-radius: 10px; overflow: hidden; box-shadow: ... } */
}


/* Earnings & Order Quantities (Section 5) */
.section5 {
    /* padding: 0 5px 20px 5px; /* Reduced due to ms-3/me-3 and parent padding */
    /* The ms-3 me-3 on the JSX div means the parent padding might make it too indented.
       If section5's parent is the main content area with 20px padding,
       ms-3 (1rem) + 20px can be a lot. Consider removing ms-3/me-3 from JSX.
    */
    margin-bottom: 25px; /* Add bottom margin if ms-3/me-3 are removed and it's direct child */
}
.section5 > .main {
    gap: 25px;
    display: flex;
    flex-wrap: wrap;
}
.section5 > .main > .left,
.section5 > .main > .right {
    flex: 1 1 45%;
    min-width: 320px;
    /* Applying common card styles */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.section5 .header { /* Common header style for left and right cards within section5 */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
}
.section5 .header span:last-child { /* For (daily-total) text */
    font-size: 0.9rem;
    font-weight: normal;
    color: #666;
    margin-left: 5px;
}

.section5 .left .content { /* Content of the left card */
    padding: 25px;
    flex-grow: 1;
}
.section5 .left .content .top {
    padding-bottom: 20px; /* Space before chart if chart is below */
    display: flex !important;
    /* flex-wrap: wrap; */
    gap: 15px;
    justify-content: space-around;
    border-bottom: 1px solid #f0f0f0; /* Separator if chart is below */
    margin-bottom: 20px; /* Space before chart */
}
.section5 .left .content .top > div {
    text-align: center;
    padding: 10px;
    flex-basis: 120px;
}
.section5 .left .content .top span[style*="font-size:11px"] {
    font-size: 0.8rem !important;
    color: #555c63;
    margin-bottom: 6px;
    display: block;
    font-weight: 500;
}
.section5 .left .content .top span[style*="font-weight:900"] {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1a2c45;
}
.section5 .left .content .chart {
    /* padding-top: 20px; /* Already handled by margin-bottom of .top */
}

.section5 .main .right { /* The right card in section 5 */
    /* Structure: Header, Grid content, Total Earnings (another div) */
}
.section5 .right .grid.ag-theme-quartz {
    padding: 25px; /* Assuming this is the content area for the grid */
    flex-grow: 1; /* Grid takes up space */
    min-height: 250px;
    border: none;
}
.section5 .right > div[style*="background:white;flex:3"] { /* Total Earnings container */
    padding: 25px;
    border-top: 1px solid #f0f0f0;
    /* flex:3 is very specific, ensure this works as intended. `flex-grow: 1;` or a fixed height might be better */
}
.section5 .right .d-flex.flex-row[style*="flex:2"] { /* Container for DashboardToplam cards */
    gap: 20px;
    display: flex; /* ensure it is flex */
    flex-wrap: wrap; /* allow toplam cards to wrap */
}
.section5 .right .totalincom {
    flex: 1 1 200px; /* Allow toplam cards to have a base width and wrap */
    /* DashboardToplam component needs its own card styling with border-radius */
    /* e.g., .dashboard-toplam-card { border-radius: 10px; padding: 15px; background: #f9f9f9; ... } */
}


/* Last Placed Orders (Section 6) */
.section6 {
    /* Applying common card styles */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
    /* margin from JSX (ms-3 mt-5 me-3) - consider if this is needed with parent padding */
    margin-bottom: 25px; /* Ensure consistent bottom margin */
}
.section6 > .header {
    /* Using .dashboard-card-header styles */
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0  !important;
}
.section6 > .grid {
    /* Using .dashboard-card-content styles */
    padding: 25px; /* If grid itself doesn't have padding */
    /* The ps-3 pe-3 on the JSX grid div might be redundant if this padding is applied */
}
.section6 .grid .ag-theme-quartz {
    height: 300px;
    border: none;
}

/* --- AG Grid Customization (General) --- */
.ag-theme-quartz {
    /* --ag-font-family: 'Your-Preferred-Font'; */
    --ag-font-size: 14px;
    --ag-header-background-color: #f8f9fa;
    --ag-header-foreground-color: #333;
    --ag-odd-row-background-color: #fdfdfd;
    --ag-row-hover-color: #f1f8ff; /* Lighter hover color */
    --ag-borders: none; /* Remove all borders within grid */
    --ag-header-border-color: #e0e0e0; /* Border below header cells */
    --ag-row-border-color: #eaeaea; /* Border between rows */
    --ag-header-height: 48px;
    --ag-row-height: 42px;
    border-radius: 0 0 10px 10px; /* If grid is the last element in a card */
}
.ag-theme-quartz .ag-header-cell {
    border-right: 1px solid #e0e0e0; /* Vertical lines between header cells */
}
.ag-theme-quartz .ag-header-cell:last-of-type {
    border-right: none;
}
.ag-theme-quartz .ag-header-cell-label {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0 10px;
}
.ag-theme-quartz .ag-cell {
    padding: 0 10px;
    border-right: 1px solid #f0f0f0; /* Light vertical lines between cells */
}
.ag-theme-quartz .ag-cell:last-of-type {
    border-right: none;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1200px) { /* Larger Desktops / Smaller Laptops */
    .section2 .chart {
        flex-basis: calc(33.333% - 14px); /* Three charts per row (gap 20px -> 20*2=40 / 3 = ~13.33) */
        min-width: 220px;
    }
}

@media (max-width: 992px) { /* Tablet */
    .menures {
        /* Example: Hide menu for tablet and below, implement a toggle button */
        /* position: fixed; transform: translateX(-100%); transition: transform 0.3s ease-in-out; */
        /* &.is-open { transform: translateX(0); } */
    }
    .section2 .chart {
        /* اگر با flex-basis: 0 چهارتا نشد، این را امتحان کنید: */
        flex-grow: 0; /* از رشد جلوگیری کنید */
        flex-basis: calc(25% - 15px); /* 15px = (3 * 20px gap) / 4 */
        max-width: calc(25% - 15px);
        /* min-width را هم می‌توانید حذف کنید یا کوچکتر کنید در این حالت */
    }
    .section3 > .left,
    .section3 > .right,
    .section5 > .main > .left,
    .section5 > .main > .right {
        flex-basis: 100%; /* Stack cards */
    }
}

/* برای تبلت‌ها */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section2 .chart {
        flex-grow: 0;
        flex-basis: calc(50% - 10px); /* 10px = (1 * 20px gap) / 2 */
        max-width: calc(50% - 10px); /* دو کارت در هر ردیف */
    }
}

/* برای موبایل */
@media (max-width: 767.98px) {
    .section2 .chart {
        flex-grow: 0;
        flex-basis: 100%; /* یک کارت در هر ردیف */
        max-width: 100%;
        min-width: unset; /* min-width دیگر اینجا لازم نیست */
    }
}
@media (max-width: 768px) { /* Mobile */
    /* Main content area padding for mobile */
    .d-flex.flex-column.col-12.grid[style*="backgroundColor:rgb(240 240 250)"] {
        padding: 15px;
    }
    .dashboard-card-header {
        padding: 15px 20px;
        font-size: 1.05rem;
    }
    .dashboard-card-content {
        padding: 20px;
    }
    .section1.maincontent span {
        font-size: 1.3rem;
    }
    .section2 .chart .apexcharts-subtitle-text {
        font-size: 1.3rem !important;
    }
    .section4 > .main > .content {
        gap: 15px;
        padding: 20px;
    }
    .section4 > .main > .content > div[style*="width:204px"] {
        flex-basis: calc(50% - 7.5px); /* Two product cards per row */
        min-width: 160px;
    }
    .section5 .left .content .top > div {
        flex-basis: calc(50% - 7.5px); /* Two earning items per row */
    }
}

@media (max-width: 480px) { /* Small Mobile */
    .d-flex.flex-column.col-12.grid[style*="backgroundColor:rgb(240 240 250)"] {
        padding: 10px;
    }
    .section4 > .main > .content > div[style*="width:204px"] {
        flex-basis: 100%; /* One product card per row */
    }
    .section5 .left .content .top > div {
        flex-basis: 100%; /* One earning item per row */
    }
    .section5 .right .d-flex.flex-row[style*="flex:2"] { /* Container for DashboardToplam cards */
        flex-direction: column; /* Stack Toplam cards */
        gap: 15px;
    }
    .section5 .right .totalincom {
        flex-basis: auto; /* Reset basis when stacking */
    }
}

.k-grid-md .k-table-th > .k-cell-inner > .k-link{
    text-align: center;
}
.k-grid-md .k-table-th > .k-cell-inner > .k-link > .k-column-title{
    width: 100%;
}

@media (max-width: 768px) {
    body{
        padding: 0 !important;
    }
    .filter-dropdowns-container{
        flex-wrap: nowrap !important;

    }
    .filter-dropdown-wrapper{
        flex: 0 0 40% !important;
    }
    .fontsfilter{
        display: flex;
        flex-direction: column;
    }
    .btnuploadfonts{
        margin-left: 0 !important;
        margin-top: 5px;
    }
    .divcardorderslist{
        flex: 1 !important;
    }
    .category-items-container{
        flex-direction: column;
    }
    .category-items-container .category-list-item{
        flex: 1 !important;
    }
   .sacp-category-card{
    width: 100%;
   }   
    .menures {
      width: 100% !important;
      border-right: none !important;
      border-bottom: 1px solid #ccc;
      position: fixed !important;
      top: 50px !important;
      height: 100vh;
      left: 0;
      z-index: 100000 !important;
      background: #000000a8 !important;
    }
    /* Mobilde logo dev şişmesin — layout-modern ile aynı boy */
    .menures.app-sidebar-modern .sidebar-logo .brand-mark__name,
    .menures > .brand-mark .brand-mark__name {
        font-size: 17px !important;
        letter-spacing: -0.035em !important;
    }
    div[name="mainmenu"]{
        width: 300px !important;
    background: #fff;
    }
    /* Sidebar: keep chevrons on one column (avoid % right; conflicts with flex) */
    .menures.app-sidebar-modern div[name="mainmenu"] .menu-expansion-panel .k-expander-indicator {
        right: auto !important;
        left: auto !important;
    }
   #root{
    position: relative;
   }
   #header{
    position: fixed !important;
    top: 0 !important;
    z-index: 55;
    padding: 0 !important;
    height: 50px !important;
    z-index: 100000  !important;
   }
   .buildersetting {
    width: 100% !important;
    left: -25% !important;
   }
   .insertProduct div.cardneworder:has(button.paypalbtn){
    width: 80% !important;
   }
   .modals{
    top: -10%;
   }
   .modals1{
    width: 98% !important;
   }
   .newadd{
    width: 100%;
    height: 200px !important;
   }
   .newadd div{
    transform: rotate(90deg) translateX(5px) translateY(-13px);
   }
   div#orderlist .filterorderlist span{
    font-size: 2.5vw !important;
   }
   .k-grid .k-grid-aria-root{
    flex: unset !important;
    overflow: auto !important;
   }
   div#orderlist .k-column-title{
    font-size: 2.5vw !important;

   }
   .k-grid{
    overflow:overlay !important
   }
   .usrreq-content-area{
    margin-top: 10% !important;
   }
   #insertattribute{
    margin-top: 10% !important;
   }
   #ups,#user,#brand,#mytemplate,#insertcategory,#editProduct{
    margin-top: 10% !important;
   }
   #insertproduct,#productdetail,#insertcategory,#Build,#paypal{
    margin-top: 20% !important;
   }
   .content-wrapper,.page-content-wrapper,
   .showcategoryorder,.page-container,.settings,.paypal-page-container,.editProduct    {
    margin-top: 10%;

   }
   .orderlist,.settings,.insertProduct,.orderdetail   {
    margin-top: 15%;
   }
   .showpass{
    top: 10px !important;
   }
   .showpasssetting{
    top: 2px !important;
   }
   .sacp-category-card{
    width: 100% !important;
   }
   .k-listview-content{
    flex-direction: column;
   }
   .k-listview-content .product-item-wrapper{
    flex: 1 !important;
   }
   .productdetail-page .productdetail-content .mainImage img{
    max-height: 230px !important;
  position: static !important;
        border: none !important;
   }
   .footerdesignProductmenuu,.ups-scope-details-section{
    flex-direction: column;
   }
   .ups-scope-details-section .col-7{
    width: 100%;
   }
   .ups-scope-question-icon{
    width: 12% !important;
   }
   .list-categories-content-box{
    width: 100%;
   }
   .categorymodals{
    width: 0px !important;
    z-index: 1000005 !important;
   }
  .categorymodals .k-window-titlebar{
display: none;
   }
   .categories-grid{
    overflow: auto !important;
   }
   .pagination-arrow{
    display: block !important;
   }
   .pagination-arrow-right
 {
        right: 10px !important;
    }
    .brand-registration-section .insertfaqcard .registerbrand{
        flex-direction: column;
    }
    .brand-registration-section .insertfaqcard .registerbrand .brandname{
        width: 100% !important;
    }
    .k-grid-header-wrap, .k-grid-footer-wrap{
        overflow: visible !important;
    }
    #modalCreateCard .search-filter-bar{
        padding-bottom: 20% !important;
    }
    .insertproducttopcard{
        flex-direction: column;
        /* align-items: start !important; */
    }
    .insertproducttopcard div{
       width: 100%;
       text-align: left;
    }
    .insertproductbottomcard{
        flex-direction: column-reverse;
    }
    .spanpro{
        font-size: 1rem !important;
    }
    .modals1 span[style*="background: rgb(232, 156, 3)"]{
        top: 25% !important;
    cursor: pointer;
    background: rgb(232, 156, 3);
    height: 35px !important;
    width: 35px !important;
    }
    .modals1 svg[style*="background: rgb(28, 28, 27)"]{
       left: 94% !important;
    }
    .modals1 svg[style*="background: rgb(185, 134, 9)"]{
       left: 94% !important;
    }
    .section5 .main div:nth-child(1){
        padding: 0 !important;
    }
    .show-all-sides-window,.platform-status-window{
        left: 0% !important;
        width: 100% !important;
    }
    .orderdetail_pdfpreview_window,.design{
        left: 0% !important;
        width: 100% !important;
        top: 25% !important;
    }
    .filterlist{
        flex-wrap: nowrap !important;
    }
    .filterselectorderetsy{
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    .insertProduct div[style*="margin-left: 30px"]{
        margin-bottom: 5%;
    }
    .loadmorebtn{
        margin: 5px 0 !important;
    }
}

/* ============================================================
   DARK MODE — inline-style card & content overrides
   Catches hardcoded background / color inline styles in
   DasboardFrida.jsx and similar legacy pages
   ============================================================ */

/* main_content.css: div[name="asli"] { background: #f0f0fa } — darkta tüm sayfa zemini açık kalıyordu */
[data-theme="dark"] div[name="asli"] {
    background: #0f1117 !important;
}

/* main_content.css: div[name="mainmenu"] { background: white } — sidebar içi dark ile uyumlu */
[data-theme="dark"] div[name="mainmenu"] {
    background: transparent !important;
}

/* Main content background area */
[data-theme="dark"] .attribute.d-flex > div:not(.menures) {
    background-color: #0f1117;
}

/* Legacy page wrapper with rgb(227 230 255) inline bg */
[data-theme="dark"] .attribute.d-flex [style*="background: rgb(227"] {
    background-color: #0f1117 !important;
}

/* White card backgrounds (#fff / white) */
[data-theme="dark"] .col-12.p-3.mt-4[style],
[data-theme="dark"] .col-12.p-4.position-relative[style],
[data-theme="dark"] [style*='background: "#fff"'],
[data-theme="dark"] [style*="background: \"#fff\""],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] .cardonedashboard,
[data-theme="dark"] .cardbasket > .col-12 {
    background: #1a1d27 !important;
    color: #e8eaf0 !important;
    box-shadow: 0 0 8px rgba(0,0,0,0.4) !important;
}

/* checklist card specific */
[data-theme="dark"] .col-12.p-3.mt-4 {
    background: #1a1d27 !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.4) !important;
}

/* Hardcoded #494949 text color */
[data-theme="dark"] [style*="color: #494949"],
[data-theme="dark"] [style*="color:#494949"] {
    color: #c9cdd8 !important;
}

/* Borders inside checklist */
[data-theme="dark"] [style*="borderBottom: \"2px solid #494949\""],
[data-theme="dark"] [style*="borderBottom: \"1px solid rgb(219"] {
    border-color: #2a2d3a !important;
}

/* AG Grid dark */
[data-theme="dark"] .ag-theme-quartz {
    --ag-background-color: #1a1d27;
    --ag-header-background-color: #13151f;
    --ag-header-foreground-color: #e8eaf0;
    --ag-foreground-color: #c8cad8;
    --ag-odd-row-background-color: #1e2130;
    --ag-row-hover-color: rgba(255,131,6,0.07);
    --ag-row-border-color: #252836;
    --ag-header-border-color: #252836;
    --ag-border-color: #252836;
}

/* Kendo Window dark */
[data-theme="dark"] .k-custom-window,
[data-theme="dark"] .k-window {
    background: #1a1d27 !important;
    border-color: #2a2d3a !important;
    color: #e8eaf0 !important;
}

[data-theme="dark"] .k-window-content {
    background: #1a1d27 !important;
    color: #c8cad8 !important;
}

/* ============================================================
   Dashboard Redesign — Modern SaaS Style
   Accent: #ff8306  |  BG: #f1f3f8  |  Card: #fff
   ============================================================ */

/* ---- Shared Tokens — Light ---- */
:root {
  --dash-accent: #ff8306;
  --dash-accent-dark: #e07000;
  --dash-accent-light: #fff4e8;
  --dash-bg: #f1f3f8;
  --dash-card: #ffffff;
  --dash-border: #e8eaf0;
  --dash-text-primary: #111827;
  --dash-text-secondary: #6b7280;
  --dash-text-muted: #9ca3af;
  --dash-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 8px rgba(0,0,0,0.04);
  --dash-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --dash-radius: 12px;
}

/* ---- Shared Tokens — Dark ---- */
[data-theme="dark"] {
  --dash-accent: #ff8306;
  --dash-accent-dark: #ffa040;
  --dash-accent-light: rgba(255,131,6,0.12);
  --dash-bg: #0f1117;
  --dash-card: #1a1d27;
  --dash-border: #2a2d3a;
  --dash-text-primary: #f0f1f5;
  --dash-text-secondary: #8b8fa8;
  --dash-text-muted: #5c6080;
  --dash-shadow: 0 1px 4px rgba(0,0,0,0.3);
  --dash-shadow-md: 0 4px 16px rgba(0,0,0,0.4);
}

/* ============================================================
   WELCOME BANNER
   ============================================================ */
.db-welcome-banner {
  background: linear-gradient(135deg, #151823 0%, #1a1d27 45%, #231a14 100%);
  border-radius: var(--dash-radius);
  padding: 24px 28px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #2a2d3a;
  position: relative;
  overflow: hidden;
}

.db-welcome-glow {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255,131,6,0.22) 0%, transparent 70%);
  pointer-events: none;
  animation: dbGlowDrift 8s ease-in-out infinite alternate;
}

@keyframes dbGlowDrift {
  from { transform: translate(0, 0) scale(1); opacity: 0.7; }
  to   { transform: translate(40px, 12px) scale(1.15); opacity: 1; }
}

.db-welcome-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,131,6,0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

[data-theme="dark"] .db-welcome-banner {
  background: #13151f;
  border-color: #2a2d3a;
}

/* ============================================================
   RECENT TRAINING VIDEOS (dashboard band)
   ============================================================ */
.db-recent-videos {
  margin-bottom: 20px;
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 18px 20px;
  box-shadow: var(--dash-shadow);
  position: relative;
  overflow: hidden;
}

.db-recent-videos-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--dash-accent), #ffa040);
  border-radius: var(--dash-radius) 0 0 var(--dash-radius);
}

.db-recent-videos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-left: 8px;
}

.db-recent-videos-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-recent-videos-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--dash-accent-light);
  color: var(--dash-accent);
  font-size: 0.95rem;
}

.db-recent-videos-header h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--dash-text-primary);
}

.db-recent-videos-link {
  border: none;
  background: none;
  color: var(--dash-accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  transition: opacity 0.15s ease;
}

.db-recent-videos-link:hover {
  opacity: 0.85;
}

.db-recent-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  padding-left: 8px;
}

.db-recent-video-card {
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--dash-bg);
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.db-recent-video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dash-shadow-md);
  border-color: rgba(255, 131, 6, 0.35);
}

.db-recent-video-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #0f1117, #1a1d27);
  position: relative;
  overflow: hidden;
}

.db-recent-video-thumb img,
.db-recent-video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
  pointer-events: none;
  display: block;
}

.db-recent-video-card:hover .db-recent-video-thumb img,
.db-recent-video-card:hover .db-recent-video-preview {
  transform: scale(1.05);
}

.db-recent-video-play {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6b7280;
  font-size: 1.4rem;
}

.db-recent-video-hover-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.db-recent-video-card:hover .db-recent-video-hover-play {
  opacity: 1;
}

.db-recent-video-duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
}

.db-recent-video-info {
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.db-recent-video-info strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dash-text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.db-recent-video-info span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--dash-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="dark"] .db-recent-videos {
  background: var(--dash-card);
  border-color: var(--dash-border);
}

[data-theme="dark"] .db-recent-video-card {
  background: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .db-recent-video-info strong {
  color: var(--dash-text-primary);
}

[data-theme="dark"] .db-recent-videos-icon {
  background: rgba(255, 131, 6, 0.12);
}

.db-welcome-banner .db-welcome-left h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px 0;
  position: relative;
  z-index: 1;
}

.db-env-test-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(252, 165, 165, 0.55);
  color: #fecaca;
}

.db-welcome-banner .db-welcome-left p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  position: relative;
  z-index: 1;
}

.db-welcome-left {
  position: relative;
  z-index: 1;
}

.db-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,131,6,0.15);
  border: 1px solid rgba(255,131,6,0.3);
  border-radius: 8px;
  padding: 6px 14px;
  color: #ff8306;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.db-stat-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.db-stat-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-stat-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.db-stat-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.db-stat-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.db-stat-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  padding: 18px 20px;
  box-shadow: var(--dash-shadow);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.db-stat-card.db-clickable { cursor: pointer; }

.db-stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.db-stat-card:hover::after {
  transform: translateX(120%);
}

.db-stat-card:hover {
  box-shadow: var(--dash-shadow-md);
  transform: translateY(-3px);
  border-color: rgba(255,131,6,0.18);
}

.db-stat-card.db-card-alert {
  border-color: rgba(220,38,38,0.25);
  animation: dbAlertPulse 2.4s ease-in-out infinite;
}

@keyframes dbAlertPulse {
  0%, 100% { box-shadow: var(--dash-shadow); }
  50% { box-shadow: 0 0 0 1px rgba(220,38,38,0.15), 0 8px 24px rgba(220,38,38,0.08); }
}

.db-stat-card .db-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.db-stat-card .db-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dash-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}

.db-stat-card .db-stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--dash-text-primary);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  min-height: 1.15em;
}

.db-stat-card .db-stat-value .db-stat-value-inner {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

[data-theme="dark"] .db-stat-card .db-stat-value {
  color: #f8fafc;
}

.db-stat-value-trend {
  font-size: 1.05rem;
  line-height: 1.25;
}

.db-stat-card .db-stat-sub {
  font-size: 0.76rem;
  color: var(--dash-text-muted);
  margin-top: 4px;
}

.db-stat-card .db-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 20px;
}

.db-stat-card .db-stat-trend.up  { background: #ecfdf5; color: #059669; }
.db-stat-card .db-stat-trend.down { background: #fef2f2; color: #dc2626; }

[data-theme="dark"] .db-stat-card .db-stat-trend.up  { background: rgba(5,150,105,0.15); color: #34d399; }
[data-theme="dark"] .db-stat-card .db-stat-trend.down { background: rgba(220,38,38,0.15); color: #f87171; }

/* Dark icon backgrounds */
[data-theme="dark"] .db-stat-card .db-stat-icon {
  filter: brightness(0.85);
}

/* ============================================================
   GENERIC CARD CONTAINER
   ============================================================ */
.db-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: var(--dash-radius);
  box-shadow: var(--dash-shadow);
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.db-card:hover {
  box-shadow: var(--dash-shadow-md);
  border-color: rgba(255,131,6,0.12);
}

.db-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--dash-border);
}

.db-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dash-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-card-badge {
  background: #fef2f2;
  color: #b91c1c;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 4px;
}

[data-theme="dark"] .db-card-badge {
  background: rgba(185,28,28,0.15);
  color: #f87171;
}

.db-card-action {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dash-accent);
  background: var(--dash-accent-light);
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.db-card-action:hover {
  background: #ffe5c8;
  color: var(--dash-accent-dark);
  text-decoration: none;
}

[data-theme="dark"] .db-card-action:hover {
  background: rgba(255,131,6,0.2);
  color: #ffa040;
}

.db-card-body { padding: 22px; }

/* ============================================================
   MODERN TABLE
   ============================================================ */
.db-table-wrap { overflow-x: auto; }

.db-table {
  width: 100%;
  border-collapse: collapse;
}

.db-table thead tr {
  border-bottom: 2px solid var(--dash-border);
}

.db-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dash-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.db-table tbody tr {
  border-bottom: 1px solid var(--dash-border);
  transition: background 0.15s ease;
  cursor: pointer;
}

.db-table tbody tr:last-child { border-bottom: none; }

.db-table tbody tr:hover { background: rgba(255,131,6,0.03); }

[data-theme="dark"] .db-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.db-table td {
  padding: 12px 14px;
  font-size: 0.865rem;
  color: var(--dash-text-primary);
  vertical-align: middle;
}

.db-table td.muted { color: var(--dash-text-secondary); font-size: 0.8rem; }
.db-table td.mono  { font-family: monospace; font-size: 0.82rem; color: var(--dash-text-secondary); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.db-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.db-badge.green  { background: #ecfdf5; color: #059669; }
.db-badge.yellow { background: #fffbeb; color: #d97706; }
.db-badge.blue   { background: #eff6ff; color: #2563eb; }
.db-badge.red    { background: #fef2f2; color: #dc2626; }
.db-badge.gray   { background: #f8fafc; color: #64748b; }
.db-badge.orange { background: var(--dash-accent-light); color: var(--dash-accent); }
.db-badge.indigo { background: #eef2ff; color: #4f46e5; }
.db-badge.teal   { background: #f0fdfa; color: #0d9488; }

[data-theme="dark"] .db-badge.green  { background: rgba(5,150,105,0.15);   color: #34d399; }
[data-theme="dark"] .db-badge.yellow { background: rgba(217,119,6,0.15);    color: #fbbf24; }
[data-theme="dark"] .db-badge.blue   { background: rgba(37,99,235,0.15);    color: #60a5fa; }
[data-theme="dark"] .db-badge.red    { background: rgba(220,38,38,0.15);    color: #f87171; }
[data-theme="dark"] .db-badge.gray   { background: rgba(100,116,139,0.15);  color: #94a3b8; }
[data-theme="dark"] .db-badge.orange { background: rgba(255,131,6,0.15);    color: #ff8306; }
[data-theme="dark"] .db-badge.indigo { background: rgba(79,70,229,0.15);    color: #818cf8; }
[data-theme="dark"] .db-badge.teal   { background: rgba(13,148,136,0.15);   color: #2dd4bf; }

/* ============================================================
   TWO COLUMN GRID
   ============================================================ */
.db-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

/* Sabit yükseklik yalnızca admin ticket/sipariş panellerinde */
.db-two-col--equal > .db-card {
  display: flex;
  flex-direction: column;
  height: 380px;
}

/* Scrollable body inside a fixed-height db-card */
.db-card-body-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dash-border) transparent;
}

.db-card-body-scroll::-webkit-scrollbar { width: 5px; }
.db-card-body-scroll::-webkit-scrollbar-track { background: transparent; }
.db-card-body-scroll::-webkit-scrollbar-thumb { background: var(--dash-border); border-radius: 4px; }

/* Table inside scroll body — remove wrapper overflow-x so scroll is handled by parent */
.db-card-body-scroll .db-table-wrap { overflow-x: visible; }

/* ============================================================
   SALES CHART
   ============================================================ */
.db-chart-tabs {
  display: flex;
  gap: 8px;
}

.db-chart-tab {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--dash-border);
  background: transparent;
  color: var(--dash-text-secondary);
  transition: all 0.2s ease;
}

.db-chart-tab.active {
  border-color: var(--dash-accent);
  background: var(--dash-accent-light);
  color: var(--dash-accent);
}

.db-chart-tab:hover:not(.active) {
  border-color: #c9cdd8;
  color: var(--dash-text-primary);
}

.db-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.db-bar-label {
  flex: 0 0 110px;
  font-size: 0.78rem;
  color: var(--dash-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db-bar-track {
  flex: 1;
  background: var(--dash-border);
  border-radius: 6px;
  height: 26px;
  overflow: hidden;
}

.db-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--dash-accent) 0%, #ffb347 100%);
  border-radius: 6px;
  min-width: 4px;
  transition: width 0.4s ease;
}

.db-bar-value {
  flex: 0 0 90px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dash-text-primary);
  text-align: right;
}

/* ============================================================
   TICKET LIST
   ============================================================ */
.db-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--dash-border);
  cursor: pointer;
  transition: background 0.15s ease;
}

.db-ticket-row:last-child { border-bottom: none; }

.db-ticket-row:hover { background: rgba(255,131,6,0.03); }

[data-theme="dark"] .db-ticket-row:hover { background: rgba(255,255,255,0.03); }

.db-ticket-info { flex: 1; min-width: 0; }

.db-ticket-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dash-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-ticket-meta {
  font-size: 0.78rem;
  color: var(--dash-text-muted);
  margin-top: 3px;
}

/* ============================================================
   PRODUCT TREND CARDS
   ============================================================ */
.db-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 16px;
  padding: 20px 22px;
}

.db-product-card {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.db-product-card:hover {
  box-shadow: var(--dash-shadow-md);
  transform: translateY(-2px);
}

.db-product-card .db-product-img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: #f8f9fc;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .db-product-card .db-product-img-wrap {
  background: #13151f;
}

.db-product-card .db-product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.db-product-card:hover .db-product-img-wrap img {
  transform: scale(1.04);
}

.db-product-card .db-product-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--dash-border);
}

.db-product-card .db-product-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dash-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.db-product-card .db-product-price {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dash-accent);
}

.db-product-card .db-product-stats {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.db-product-card .db-product-stat {
  font-size: 0.72rem;
  color: var(--dash-text-muted);
}

.db-product-card .db-product-stat span {
  font-weight: 700;
  color: var(--dash-text-secondary);
}

/* ============================================================
   SWIPER SLIDER (Trend altı ürün slider — light/dark)
   ============================================================ */
.db-slider-wrap {
  border-radius: var(--dash-radius);
  overflow: visible;
  margin-bottom: 20px;
  padding: 0 40px 0 4px;
  width: 100%;
  box-sizing: border-box;
}

.db-slider-wrap .swiper.db-swiper-root {
  padding: 10px 0 !important;
  padding-bottom: 12px !important;
}

/* mainPage.css genel .swiper-slide p { font-size: 1.2rem } ezmesin */
.db-slider-wrap .swiper-slide.db-swiper-product-slide p.db-swiper-product-slide__price,
.db-slider-wrap .db-swiper-product-slide__price {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--dash-accent) !important;
  margin: 0;
}

.db-swiper-msg {
  text-align: center;
  padding: 20px;
  color: var(--dash-text-secondary);
  font-size: 0.875rem;
}

.db-swiper-msg--error {
  color: #dc2626;
}

[data-theme="dark"] .db-swiper-msg--error {
  color: #f87171;
}

.db-slider-wrap .swiper-slide.db-swiper-product-slide {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  padding: 16px;
  height: 300px;
  box-sizing: border-box;
  cursor: pointer;
  background: var(--dash-card) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 10px !important;
}

.db-slider-wrap .db-swiper-product-slide__img-wrap {
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fc;
  border-radius: 8px;
  overflow: hidden;
}

[data-theme="dark"] .db-slider-wrap .db-swiper-product-slide__img-wrap {
  background: #13151f;
}

.db-slider-wrap .db-swiper-product-slide__img {
  width: 100%;
  height: 100%;
  max-height: 150px;
  object-fit: contain;
}

.db-slider-wrap .db-swiper-product-slide__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dash-text-primary) !important;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.35;
}

.db-slider-wrap .swiper-button-next,
.db-slider-wrap .swiper-button-prev {
  color: var(--dash-accent) !important;
}

.db-slider-wrap .swiper-pagination-bullet {
  background: var(--dash-text-muted);
  opacity: 0.45;
}

[data-theme="dark"] .db-slider-wrap .swiper-pagination-bullet {
  background: #8b8fa8;
  opacity: 0.5;
}

.db-slider-wrap .swiper-pagination-bullet-active {
  background: var(--dash-accent) !important;
  opacity: 1;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.db-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dash-text-muted);
  margin-bottom: 10px;
}

.db-section-head {
  margin-bottom: 12px;
}

.db-section-desc {
  margin: -4px 0 0;
  font-size: 0.82rem;
  color: var(--dash-text-secondary);
}

.db-card-meta {
  font-size: 0.78rem;
  color: var(--dash-text-muted);
  font-weight: 600;
}

.db-chart-tooltip {
  background: var(--dash-card);
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: var(--dash-shadow-md);
  font-size: 0.82rem;
}

.db-chart-tooltip strong {
  color: var(--dash-accent);
  font-size: 0.95rem;
}

/* ============================================================
   ORDER PIPELINE
   ============================================================ */
.db-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px 18px;
}

.db-card-compact .db-card-header {
  padding: 14px 20px;
}

.db-card-compact .db-pipeline {
  padding: 12px 20px 16px;
}

.db-pipeline-step {
  text-align: center;
  padding: 8px 6px;
}

.db-pipeline-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.db-pipeline-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dash-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.db-pipeline-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dash-text-primary);
  margin: 4px 0 10px;
}

.db-pipeline-bar {
  height: 6px;
  background: var(--dash-border);
  border-radius: 999px;
  overflow: hidden;
}

.db-pipeline-bar-fill {
  height: 100%;
  border-radius: 999px;
  width: 0;
  animation: dbBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes dbBarGrow {
  from { width: 0 !important; opacity: 0.5; }
}

.db-pipeline-connector {
  display: none;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes dbFadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.db-animate-in {
  animation: dbFadeSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.db-animate-delay-1 { animation-delay: 80ms; }
.db-animate-delay-2 { animation-delay: 160ms; }
.db-animate-delay-3 { animation-delay: 240ms; }
.db-animate-delay-4 { animation-delay: 320ms; }

.db-stagger-1 { animation-delay: 60ms; }
.db-stagger-2 { animation-delay: 120ms; }
.db-stagger-3 { animation-delay: 180ms; }
.db-stagger-4 { animation-delay: 240ms; }
.db-stagger-5 { animation-delay: 300ms; }
.db-stagger-6 { animation-delay: 360ms; }

.db-pulse-soft {
  animation: dbSoftPulse 3s ease-in-out infinite;
}

@keyframes dbSoftPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,131,6,0); }
  50% { box-shadow: 0 0 0 6px rgba(255,131,6,0.08); }
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.db-loading-shell {
  animation: dbFadeSlideUp 0.35s ease both;
}

.db-skeleton {
  background: linear-gradient(90deg, var(--dash-border) 25%, rgba(255,255,255,0.08) 50%, var(--dash-border) 75%);
  background-size: 200% 100%;
  animation: dbShimmer 1.4s ease-in-out infinite;
  border-radius: var(--dash-radius);
}

@keyframes dbShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.db-skeleton-banner {
  height: 96px;
  margin-bottom: 20px;
}

.db-skeleton-card {
  height: 118px;
}

.db-skeleton-panel {
  height: 380px;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.db-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--dash-text-muted);
  font-size: 0.875rem;
}

/* ============================================================
   ACTION BUTTON
   ============================================================ */
.db-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--dash-accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.db-btn-primary:hover {
  opacity: 0.9;
  color: white;
  text-decoration: none;
}

.db-btn-detail {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--dash-accent-light);
  color: var(--dash-accent);
  border: 1px solid rgba(255,131,6,0.25);
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.db-btn-detail:hover { background: #ffe5c8; }

[data-theme="dark"] .db-btn-detail { background: rgba(255,131,6,0.1); color: #ff8306; border-color: rgba(255,131,6,0.2); }
[data-theme="dark"] .db-btn-detail:hover { background: rgba(255,131,6,0.2); }

/* ============================================================
   SALES CHART SUMMARY PILLS
   ============================================================ */
.db-sales-summary {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--dash-border);
}

.db-sales-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 22px;
  border-right: 1px solid var(--dash-border);
}

.db-sales-pill:last-child { border-right: none; }

.db-sales-pill-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dash-text-primary);
  letter-spacing: -0.3px;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.dashboard-main-area {
  background: var(--dash-bg);
  padding: 22px 24px;
  min-height: calc(100vh - 60px);
  overflow-y: auto;
  flex: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .db-stat-grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-stat-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .db-stat-grid.cols-6,
  .db-stat-grid.cols-5,
  .db-stat-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-two-col { grid-template-columns: 1fr; }
  .db-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   TELEGRAM PROMO BANNER
   ============================================================ */
.db-telegram-promo-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: var(--dash-radius);
  border: 1px solid rgba(42, 171, 238, 0.35);
  background: linear-gradient(90deg, rgba(42, 171, 238, 0.12) 0%, rgba(255, 131, 6, 0.08) 100%);
  box-shadow: var(--dash-shadow);
}

[data-theme="dark"] .db-telegram-promo-banner {
  border-color: rgba(42, 171, 238, 0.45);
  background: linear-gradient(90deg, rgba(42, 171, 238, 0.18) 0%, rgba(255, 131, 6, 0.1) 100%);
}

.db-telegram-promo-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #229ed9;
  color: #fff;
  font-size: 20px;
}

.db-telegram-promo-content {
  flex: 1;
  min-width: 0;
}

.db-telegram-promo-content strong {
  display: block;
  color: var(--dash-text-primary);
  font-size: 15px;
  margin-bottom: 2px;
}

.db-telegram-promo-content p {
  margin: 0;
  color: var(--dash-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.db-telegram-promo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.db-telegram-promo-cta {
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  background: #229ed9;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.db-telegram-promo-cta:hover {
  background: #1b8ec6;
}

.db-telegram-promo-dismiss {
  border: none;
  background: transparent;
  color: var(--dash-text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.db-telegram-promo-dismiss:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--dash-text-secondary);
}

[data-theme="dark"] .db-telegram-promo-dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  .db-telegram-promo-banner {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .db-telegram-promo-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .db-stat-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-main-area { padding: 14px 12px; }
  .db-welcome-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .db-welcome-badge { display: none; }
  .db-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .db-stat-grid.cols-6,
  .db-stat-grid.cols-5,
  .db-stat-grid.cols-4,
  .db-stat-grid.cols-3 { grid-template-columns: 1fr; }
  .db-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


div.section2 div.chart div.subchart div.statics{
    display: flex;
    background: black;
    position: relative;
    top: 33px;
    z-index: 3;
    width: 3.5vw;
    border-radius: 14px;
    color: white;
    right: -212px;
    font-size: .8vw;
    flex-direction: row;
    justify-content: space-around;
}
div.section2 div.chart div.subchart svg{
    margin-top: 5px;
    font-size: 9px;
}


div.section2 div.chart:nth-child(2) div.subchart div.statics,div.section2 div.chart:nth-child(4) div.subchart div.statics{
    background: #ff8522;
}

div.section2 div.chart:nth-child(1) div.subchart div.statics,div.section2 div.chart:nth-child(3) div.subchart div.statics{
    background:black;
}
.tooltipbuttons{
    background:white;
}

.list-categories-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1040; 
    padding: 20px; 
    box-sizing: border-box;
  }
  
  .list-categories-content-box {
    background-color: #ffffff;
    border-radius: 12px; 
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 25px 30px; 
    display: flex;
    flex-direction: column; 
    position: relative;
    width: 95%; 
    max-width: 1400px; 
    height: 85vh; 
    max-height: 700px; 
    overflow: hidden; 
  }
  .btn-create-category {
    position: absolute;
    bottom: 20px;
    right: 10px;
    background-color: #ff83064f; 
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
    z-index: 10;
  }
  .btn-create-category:hover {
    background-color: #e07000; 
    color: #fff;
  }
  .btn-create-category svg {
    width: 1.5em;
    height: 1.5em;
  }
  .btn-create-category svg g,.btn-create-category svg path{
    stroke: #000 !important;
  }
  .btn-create-category:hover svg g,.btn-create-category svg path{
    stroke: #fff !important;
  }
  .categories-display-area {
    display: flex;
    align-items: stretch; 
    flex-grow: 1; 
    /* overflow: hidden; */
    /* margin-top: 60px; s */
    position: relative; 
    width: 100%;
  }
  
  .categories-grid {
    display: flex;
    flex-direction: row; 
    flex-grow: 1;
    overflow-x: hidden; 
    justify-content: flex-start; 
    gap: 0; 
    padding-left: 20px;
  }
  
  .category-column {
    display: flex;
    flex-direction: column;
    /* flex: 0 0 calc(100% / 7 - 15px);  */
    min-width:15%; 
    padding: 0;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    height: 100%;
  }
  .category-column:last-child {
    border-right: none;
  }
  .category-parent-name {
    font-size: 1.1rem; 
    font-weight: bold;
    color: #111;
    margin-bottom: 12px;
    text-align: center;
    padding-bottom: 8px;
    /* border-bottom: 1px solid #f0f0f0; */
    word-break: break-word;
    height: 15%;
    /* background-color: #eee; */
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 5px;
    /* box-shadow: 0 0 5px #ccc; */

  }
  .category-children-list {
    display: flex;
    flex-direction: column;
    gap: 8px; 
    height: 85%;
  }
  
  .category-child-link {
    cursor: pointer;
    padding: 6px 0; 
    transition: color 0.2s ease;
  }
  .category-child-name {
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 0.875rem; 
    text-align: left;
    display: block;
    word-break: break-word;
    padding-left: 5px;
  }
  .category-child-link:hover .category-child-name {
    text-decoration: underline;
    color: #e07000; 
  }
  
  .pagination-arrow {
    color: #ff8306;
    font-size: 2.5rem; 
    cursor: pointer;
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.8); 
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  .pagination-arrow:hover {
    color: #e07000;
  }
  .pagination-arrow-left {
    left: -15px; 
  }
  .pagination-arrow-right {
    right: -15px; 
  }
  
  .no-categories-message {
    width: 100%;
    text-align: center;
    padding: 50px 20px;
    font-size: 1.1rem;
    color: #777;
    font-style: italic;
  }
  
  @media (max-width: 1200px) {
    .category-column {
      /* flex: 0 0 calc(100% / 5 - 15px);  */
      min-width: 15%;
    }
  }
  @media (max-width: 992px) {
    .list-categories-content-box {
      width: 95%;
      height: 90vh;
      padding: 20px;
    }
    .category-column {
      /* flex: 0 0 calc(100% / 4 - 15px);  */
      min-width: 15%;
    }
    .btn-create-category {
      padding: 8px 15px;
      font-size: 0.85rem;
      bottom: 15px;
      right: 10px;
    }
    /* .categories-display-area { margin-top: 50px; } */
  }
  
  @media (max-width: 767.98px) {
    .list-categories-content-box {
      height: auto;
      max-height: 90vh; 
      overflow-y: auto;
    }
    .categories-display-area {
      overflow-x: auto; 
      padding-bottom: 10px;
    }
    .categories-grid {
      flex-wrap: nowrap; 
      justify-content: flex-start; 
      padding-right: 15px; 
    }
    .category-column {
      flex: 0 0 200px;
      border-right: 1px solid #eee;
    }
    .pagination-arrow {
      font-size: 2rem;
    }
    .pagination-arrow-left { left: -10px; }
    .pagination-arrow-right { right: -10px; }
  }
  
  @media (max-width: 575.98px) {
    .list-categories-content-box {
      padding: 15px;
    }
    .btn-create-category {
      position: relative; 
      top: auto;
      right: auto;
      margin-bottom: 15px;
      width: 100%;
    }
    .categories-display-area { margin-top: 0; } 
    .category-column {
      flex: 0 0 180px; 
    }
    .category-parent-name { font-size: 0.95rem; }
    .category-child-name { font-size: 0.8rem; }
    .pagination-arrow { display: none; } 
  }

/* ---- Catalog modal (sidebar) — dark mode ---- */
[data-theme="dark"] .list-categories-overlay {
  background-color: rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .list-categories-content-box {
  background-color: #1a1d27;
  border: 1px solid #2a2d3a;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .list-categories-close-btn {
  border-color: #4a5068 !important;
  background-color: #232635;
  color: #e8eaf0;
}

[data-theme="dark"] .list-categories-close-btn:hover {
  background-color: #2a2d3a;
  border-color: #5c6378 !important;
}

[data-theme="dark"] .category-column {
  border-right-color: #2a2d3a;
}

[data-theme="dark"] .category-parent-name {
  color: #f0f1f5;
}

[data-theme="dark"] .category-child-name {
  color: #b4bad0;
}

[data-theme="dark"] .category-child-link:hover .category-child-name {
  color: #ffb366;
}

[data-theme="dark"] .pagination-arrow {
  color: #ff8306;
  background-color: rgba(26, 29, 39, 0.92);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .pagination-arrow:hover {
  color: #ffb366;
}

[data-theme="dark"] .no-categories-message {
  color: #7c80a0;
}

[data-theme="dark"] .btn-create-category {
  background-color: rgba(255, 131, 6, 0.2);
  color: #e8eaf0;
}

[data-theme="dark"] .btn-create-category:hover {
  background-color: #e07000;
  color: #fff;
}

[data-theme="dark"] .btn-create-category svg g,
[data-theme="dark"] .btn-create-category svg path {
  stroke: #e8eaf0 !important;
}

[data-theme="dark"] .btn-create-category:hover svg g,
[data-theme="dark"] .btn-create-category:hover svg path {
  stroke: #fff !important;
}

@media (max-width: 767.98px) {
  [data-theme="dark"] .category-column {
    border-right-color: #2a2d3a;
  }
}

/* ============================================================
   DASHBOARD MENU — base styles (overridden by layout-modern.css
   when .app-sidebar-modern is present)
   ============================================================ */

/* ---- Menu CSS Variables ---- */
:root {
  --menu-primary-color:         #ff8306;
  --menu-primary-color-darker:  #e07000;
  --menu-primary-color-lighter: #fff3e8;
  --menu-active-bg:             #fff3e8;
  --menu-active-text:           #e07000;
  --menu-active-border:         #ff8306;
  --menu-hover-bg:              rgba(255,131,6,0.07);
  --menu-border-color:          #eaeaea;
  --menu-text-color:            #374151;
  --menu-text-light:            #6b7280;
  --menu-text-dark:             #111827;
  --menu-icon-color:            #6b7280;
  --menu-card-bg:               #ffffff;
  --menu-kendo-window-header-bg: #f8f9fa;
  --menu-kendo-window-header-text: #343a40;
}

[data-theme="dark"] {
  --menu-primary-color-lighter: rgba(255,131,6,0.12);
  --menu-active-bg:             rgba(255,131,6,0.12);
  --menu-active-text:           #ff8306;
  --menu-active-border:         #ff8306;
  --menu-hover-bg:              rgba(255,255,255,0.05);
  --menu-border-color:          #252836;
  --menu-text-color:            #c8cad8;
  --menu-text-light:            #7c80a0;
  --menu-text-dark:             #e8eaf0;
  --menu-icon-color:            #7c80a0;
  --menu-card-bg:               #1a1d27;
  --menu-kendo-window-header-bg: #1e2130;
  --menu-kendo-window-header-text: #e8eaf0;
}

/* ---- Layout containers ---- */
.paypal-page-container { display: flex; height: 100vh; overflow: hidden; }
.app-layout-container  { display: flex; height: 100vh; overflow: hidden; }

.app-sidebar {
  background-color: var(--menu-card-bg);
  border-right: 1px solid var(--menu-border-color);
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.app-sidebar .app-menu-inner {
  flex-grow: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

/* ---- Base menu item ---- */
.menu-item,
.menu-expansion-panel .k-expander-header {
  display: flex !important;
  align-items: center !important;
  padding: 11px 16px !important;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-left-color 0.18s ease;
  border-bottom: 1px solid var(--menu-border-color);
  color: var(--menu-text-color);
  border-left: 3px solid transparent;
  font-size: 0.85rem;
}

.menu-item:last-of-type,
.menu-expansion-panel:last-of-type > .k-expander-header { border-bottom: none; }

.menu-item-content { display: flex; align-items: center; width: 100%; }

.menu-item:hover,
.menu-expansion-panel .k-expander-header:hover {
  background-color: var(--menu-hover-bg);
  color: var(--menu-primary-color);
}

.menu-item:hover .menu-icon,
.menu-item:hover .menu-text,
.menu-expansion-panel .k-expander-header:hover .menu-item-content .menu-icon-within-panel,
.menu-expansion-panel .k-expander-header:hover .menu-item-content .menu-text-for-panel,
.menu-expansion-panel .k-expander-header:hover .k-expander-indicator .k-svg-icon {
  color: var(--menu-primary-color) !important;
  fill:  var(--menu-primary-color) !important;
}

.menu-item.active-menu-item,
.menu-expansion-panel.active-expansion-panel > .k-expander-header {
  background-color: var(--menu-active-bg) !important;
  color: var(--menu-active-text) !important;
  border-left: 3px solid var(--menu-active-border) !important;
  font-weight: 600;
}

.menu-item.active-menu-item .menu-icon,
.menu-item.active-menu-item .menu-text,
.menu-expansion-panel.active-expansion-panel > .k-expander-header .menu-item-content .menu-icon-within-panel,
.menu-expansion-panel.active-expansion-panel > .k-expander-header .menu-item-content .menu-text-for-panel,
.menu-expansion-panel.active-expansion-panel > .k-expander-header .k-expander-indicator .k-svg-icon {
  color: var(--menu-active-text) !important;
  fill:  var(--menu-active-text) !important;
}

.menu-icon { font-size: 1.15em; margin-right: 11px; color: var(--menu-icon-color); flex-shrink: 0; width: 20px; text-align: center; transition: color 0.18s ease; }
.menu-text { flex-grow: 1; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.18s ease; }
.menu-icon-within-panel { font-size: 1.15em; margin-right: 11px; color: var(--menu-icon-color); flex-shrink: 0; width: 20px; text-align: center; transition: color 0.18s ease; }
.menu-text-for-panel   { flex-grow: 1; font-size: 0.875rem; color: var(--menu-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.18s ease; }

/* ---- Expansion panel ---- */
.menu-expansion-panel.k-expander { width: 100%; border: none !important; box-shadow: none !important; margin: 0; background: transparent !important; }
.menu-expansion-panel .k-expander-indicator .k-svg-icon { color: var(--menu-icon-color) !important; fill: var(--menu-icon-color) !important; transition: color 0.18s ease, fill 0.18s ease; }
.menu-expansion-panel .k-expander-content-wrapper { border: none !important; padding-left: 10px; background: transparent !important; }

.menu-group-panel .k-expander-content-wrapper {
  padding-left: 6px;
  border-left: 2px solid var(--menu-border-color);
  margin-left: 14px;
}

.menu-section-divider {
  height: 1px;
  margin: 7px 14px;
  background: var(--menu-border-color);
  opacity: 0.55;
}

.menu-static-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 2px;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--menu-muted-color, #8a8f98);
  user-select: none;
}

.menu-static-group-active .menu-static-group-label {
  color: var(--menu-primary-color);
}

.menu-static-group-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.menu-static-group-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-static-group-items {
  padding: 0 0 2px;
}

.menu-inline-badge {
  background-color: #dc3545;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
.menu-expansion-panel .k-expander-content { padding: 0 !important; background-color: transparent !important; }
.menu-expansion-panel .k-animation-container { background: transparent !important; }
.menu-expansion-panel.panel-expanded > .k-expander-header { border-bottom-color: transparent !important; }

/* ---- Dark mode Kendo expander ---- */
[data-theme="dark"] .menu-expansion-panel.k-expander,
[data-theme="dark"] .menu-expansion-panel .k-expander-content-wrapper,
[data-theme="dark"] .menu-expansion-panel .k-expander-content,
[data-theme="dark"] .menu-expansion-panel .k-animation-container,
[data-theme="dark"] .k-animation-container,
[data-theme="dark"] .k-child-animation-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Kendo's own default white bg on animation container */
[data-theme="dark"] div[name="mainmenu"] .k-animation-container,
[data-theme="dark"] div[name="mainmenu"] .k-animation-container > *,
[data-theme="dark"] div[name="mainmenu"] .k-expander-content {
  background: #1a1d27 !important;
  background-color: #1a1d27 !important;
}

/* ---- Sub items ---- */
.menu-sub-item {
  display: flex;
  align-items: center;
  padding: 9px 14px 9px 28px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
  font-size: 0.82rem;
  color: var(--menu-text-light);
  border-bottom: 1px solid var(--menu-border-color);
  position: relative;
}

.menu-sub-item:last-child { border-bottom: none; }
.menu-sub-item:hover { background-color: var(--menu-hover-bg); color: var(--menu-primary-color); }
.menu-sub-item.active-sub-menu-item { background-color: var(--menu-primary-color-lighter); color: var(--menu-primary-color); font-weight: 500; }
.menu-sub-item:hover .submenu-icon,
.menu-sub-item:hover .submenu-text,
.menu-sub-item.active-sub-menu-item .submenu-icon,
.menu-sub-item.active-sub-menu-item .submenu-text { color: var(--menu-primary-color) !important; }

.menu-sub-item .submenu-icon { font-size: 1em; margin-right: 9px; color: var(--menu-icon-color); width: 17px; text-align: center; flex-shrink: 0; }
.menu-sub-item .submenu-text { flex-grow: 1; font-size: 0.85em; }
.menu-sub-item .etsycolor { color: #d95f0c; }

/* ---- Connection status dot ---- */
.connection-status-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.connection-status-dot.connected    { background-color: #16a34a; }
.connection-status-dot.disconnected { background-color: #dc2626; }

/* ---- Kendo window (platform status / maintenance) ---- */
.k-custom-window .k-window-titlebar { background-color: var(--menu-kendo-window-header-bg) !important; color: var(--menu-kendo-window-header-text) !important; border-bottom: 1px solid var(--menu-border-color) !important; }
.k-custom-window .k-window-title { font-size: 1rem; font-weight: 600; }
.k-custom-window .k-window-actions .k-button .k-svg-icon { fill: var(--menu-text-light) !important; }
.k-custom-window .k-window-content { padding: 1.25rem; }
.k-custom-window .k-dialog-actions { border-top: 1px solid var(--menu-border-color); padding: 0.75rem 1.25rem; background-color: var(--menu-kendo-window-header-bg); }
.k-custom-window .k-dialog-actions .k-button { font-size: 0.85rem; padding: 0.4rem 1rem; border-radius: 7px; }
.k-custom-window .k-dialog-actions .k-button.k-primary { background-color: var(--menu-primary-color) !important; border-color: var(--menu-primary-color) !important; color: #fff !important; }
.k-custom-window .k-dialog-actions .k-button.k-primary:hover { background-color: var(--menu-primary-color-darker) !important; }

/* ---- Platform status window ---- */
.platform-status-window { width: 480px; height: 300px !important; }
.platform-status-window .k-window-titlebar { background-color: var(--menu-primary-color) !important; color: #fff !important; border-bottom: none !important; }
.platform-status-window .k-custom-window-infotext { font-size: 0.82rem; color: var(--menu-text-light); background-color: var(--menu-hover-bg); padding: 10px; border-radius: 6px; border: 1px solid var(--menu-border-color); }
.platform-status-window .platform-icon-container { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.platform-status-window .platform-icon-container.connected    { background-color: #16a34a; }
.platform-status-window .platform-icon-container.disconnected { background-color: #dc2626; }
.platform-status-window .platform-icon-container .platform-icon { font-size: 1.5rem; color: #fff; }
.platform-status-window .platform-name { font-size: 1rem; font-weight: 600; color: var(--menu-text-dark); }
.platform-status-window .platform-url  { font-size: 0.78rem; }
.platform-status-window .btn-custom-action,
.platform-status-window .btn-outline-danger { font-size: 0.82rem; padding: 0.4rem 0.85rem; border-radius: 7px; }

div[name="mainmenu"] .k-expander-title svg { margin-left: 0 !important; }

/* ---- Maintenance modal ---- */
.maintenance-window .k-window-titlebar { background-color: var(--menu-primary-color) !important; color: #fff !important; border-bottom: none !important; }
.maintenance-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; padding: 10px; }
.maintenance-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,131,6,0.12); display: flex; align-items: center; justify-content: center; color: var(--menu-primary-color); font-size: 26px; margin-bottom: 10px; }
.maintenance-title { font-size: 1.05rem; margin: 0 0 6px; color: var(--menu-text-dark); font-weight: 600; }
.maintenance-desc  { font-size: 0.85rem; color: var(--menu-text-light); margin: 0 10px 12px; }
.maintenance-actions { display: flex; gap: 8px; }

/* ---- Site notification broadcast modal ---- */
.site-notification-modal .k-window-titlebar {
  background: linear-gradient(135deg, #ff8306 0%, #ff9f45 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
}

.site-notification-modal .k-window-content {
  background: linear-gradient(180deg, #fff 0%, #fff9f3 100%);
}

.site-notification-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-notification-modern-head {
  background: #ffffff;
  border: 1px solid #ffe3ca;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(255, 131, 6, 0.08);
}

.site-notification-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.site-notification-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 10px;
}

.site-notification-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--menu-text-dark);
}

.site-notification-field--full {
  grid-column: 1 / -1;
}

.site-notification-checkboxes {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.site-notification-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

[data-theme="dark"] .site-notification-field label {
  color: var(--menu-text-dark);
}
[data-theme="dark"] .site-notification-modal .k-window-content { background: #1a1d27; }
[data-theme="dark"] .site-notification-modern-head,
[data-theme="dark"] .site-notification-field {
  background: #1f2330;
  border-color: #2a2d3a;
}
[data-theme="dark"] .site-notification-modern-head p { color: #a7b0c2 !important; }
.site-notification-multiselect.k-multiselect {
  width: 100%;
}
.site-notification-multiselect .k-input-values {
  min-height: 38px;
}
.site-notification-field .form-control,
.site-notification-field .form-select {
  border-radius: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
  .dashboard-menu-container { font-size: 12px; }
  .menu-item, .menu-expansion-panel .k-expander-header { padding: 9px 12px !important; }
  .menu-icon, .menu-icon-within-panel { margin-right: 9px; font-size: 1.1em; width: 18px; }
  .menu-sub-item { padding: 8px 12px 8px 26px; font-size: 0.78em; }
  .site-notification-grid { grid-template-columns: 1fr; }
}

/* Catalog (ListCategories) — Kendo Window; başlık çubuğu gizli, içerik tam alan */
[data-theme="dark"] .categorymodals.k-window,
[data-theme="dark"] .k-window.categorymodals {
  background-color: #13151f !important;
  border: 1px solid #2a2d3a !important;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .categorymodals .k-window-content {
  background-color: transparent !important;
  color: #e8eaf0;
  padding: 0 !important;
}

@font-face{
  font-family: sarabun_bolditalic;
src:  url(/assets/fonts/SegoeUI.ef1c00b65a5fd5bae3bb.ttf)
}
@font-face{
  font-family: Tangerine;
src:  url(/assets/fonts/Tangerine-Regular.6b04eb83dd71e2762243.ttf)
}
@font-face{
  font-family: Shadowsintolight;
src:  url(/assets/fonts/ShadowsIntoLight-Regular.e8c09384ff0643bf385d.ttf)
}

@font-face{
  font-family: Russo One;
src:  url(/assets/fonts/RussoOne-Regular.b2f5b287ccb8fd446eae.ttf)
}

@font-face{
  font-family: Rocksalt;
src:  url(/assets/fonts/RockSalt-Regular.95f10efb43f0ccd46405.ttf)
}

@font-face{
  font-family: Princess Sofia;
src:  url(/assets/fonts/PrincessSofia-Regular.24ee19f9fb6115769bda.ttf)
}

@font-face{
  font-family: Permanent Marker;
src:  url(/assets/fonts/PermanentMarker-Regular.109a10dca0508e41aa12.ttf)
}

@font-face{
  font-family: Monoton;
src:  url(/assets/fonts/Monoton-Regular.1f3bd420f1198c5c85e8.ttf)
}

@font-face{
  font-family: Mali;
src:  url(/assets/fonts/Mali-Regular.e27c9a1ab13e4c733517.ttf)
}

@font-face{
  font-family: Lobster;
src:  url(/assets/fonts/Lobster-Regular.03c38496322925fec242.ttf)
}

@font-face{
  font-family: Lambda;
src:  url(/assets/fonts/Lambda-Regular.87f25101cd4c280e120c.ttf)
}

@font-face{
  font-family: Kelvinch;
src:  url(/assets/fonts/Kelvinch-Roman.6323f02956b6aef29de4.otf)
}

@font-face{
  font-family: Homemade Apple;
src:  url(/assets/fonts/HomemadeApple-Regular.df147a19521e98ee86fe.ttf)
}

@font-face{
  font-family: Helvetica;
src:  url(/assets/fonts/Helvetica.06113bf748ae7dc33e05.ttf)
}

@font-face{
  font-family: Graduate;
src:  url(/assets/fonts/Graduate-Regular.64e4e90410e2cf37d41c.ttf)
}

@font-face{
  font-family: Gloria Hallelujah;
src:  url(/assets/fonts/GloriaHallelujah-Regular.c9da976c6f9088d1b3c9.ttf)
}

@font-face{
  font-family: FoglihtenNo07;
src:  url(/assets/fonts/FjallaOne-Regular.34fddd1e53b238e6d80f.ttf)
}

@font-face{
  font-family: Fjalla One;
src:  url(/assets/fonts/FjallaOne-Regular.34fddd1e53b238e6d80f.ttf)
}

@font-face{
  font-family: Coiny;
src:  url(/assets/fonts/Coiny-Regular.61e71214a606a6502029.ttf)
}




  div.topheader:first-child{
    height:12vh
  }
  div.attribute div#header{
    font-size: unset !important;
  }
  div#header div#searchbar svg{
     margin-right: 16px;
  }
  div[name="asli"] div.section3 div.k-grid-header tr{
    color: black;
  }
  div[name="asli"] div.section3 div.k-grid-content td{
    border-right: unset !important; 
    /* border-bottom: unset !important; */
    padding: unset !important;
     height: unset !important;
     text-align: center;
  }

  div[name="asli"] div.section3 div.progress{
    padding-bottom: 10% !important;
  }


  div[name="asli"] div.section5 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
      padding: 0 5px !important;
  }
  div[name="asli"] div.section5 div.k-grid-header tr{
    color: black !important;
    font-family: 'sarabun' !important;
    font-weight: 700 !important;
  }



  div.hidemenu{
     display:none !important;
  }

/* HTML: <div class="loader"></div> */
.loader {
  --w:10ch;
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  letter-spacing: var(--w);
  width:var(--w);
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0, 
    calc(-3*var(--w)) 0, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0, 
    calc(-9*var(--w)) 0;
  animation: l16 2s infinite;
}
.loader:before {
  content:"Loading...";
}
@keyframes l16 {
  20% {text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0 red, 
    calc(-3*var(--w)) 0, 
    calc(-4*var(--w)) 0 #ffa516,
    calc(-5*var(--w)) 0 #63fff4, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0 green, 
    calc(-9*var(--w)) 0;}
  40% {text-shadow: 
    calc(-1*var(--w)) 0, 
    calc(-2*var(--w)) 0 red, 
    calc(-3*var(--w)) 0 #e945e9, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0 green, 
    calc(-6*var(--w)) 0 orange, 
    calc(-7*var(--w)) 0, 
    calc(-8*var(--w)) 0 green, 
    calc(-9*var(--w)) 0;}
  60% {text-shadow: 
    calc(-1*var(--w)) 0 lightblue, 
    calc(-2*var(--w)) 0, 
    calc(-3*var(--w)) 0 #e945e9, 
    calc(-4*var(--w)) 0,
    calc(-5*var(--w)) 0 green, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0 yellow, 
    calc(-8*var(--w)) 0 #ffa516, 
    calc(-9*var(--w)) 0 red;}
  80% {text-shadow: 
    calc(-1*var(--w)) 0 lightblue, 
    calc(-2*var(--w)) 0 yellow, 
    calc(-3*var(--w)) 0 #63fff4, 
    calc(-4*var(--w)) 0 #ffa516,
    calc(-5*var(--w)) 0 red, 
    calc(-6*var(--w)) 0, 
    calc(-7*var(--w)) 0 grey, 
    calc(-8*var(--w)) 0 #63fff4, 
    calc(-9*var(--w)) 0 ;}
}

.k-grid .k-grid-header .k-table-th{
  border:0px !important
}

div[name="mainmenu"]{
  border-right:0px !important
}
 div.k-grid.k-grid-md input{
  color: #bebfc0;
 }
 div.k-grid{
  box-shadow: unset !important;
 }
 .k-pager.k-grid-pager{
  background-color: white !important;
 }
 div.k-grid-content td{
  border-bottom: 0px !important;
 }
li.k-filter-group-main > div.k-filter-toolbar:first-child{
  display: none !important;
 }
 .k-filter .k-filter-toolbar .k-toolbar{
  border: 0px !important;
 }
 div#loader-wrapper{
  display: none;
 }
.shipby-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.shipby-badge--green { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.shipby-badge--yellow { background: rgba(234, 179, 8, 0.18); color: #ca8a04; }
.shipby-badge--red { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.shipby-badge--overdue { background: rgba(220, 38, 38, 0.2); color: #b91c1c; }
.shipby-badge--none { color: var(--page-text-muted, #94a3b8); }
[data-theme="dark"] .shipby-badge--green { color: #4ade80; }
[data-theme="dark"] .shipby-badge--yellow { color: #facc15; }
[data-theme="dark"] .shipby-badge--red { color: #f87171; }
[data-theme="dark"] .shipby-badge--overdue { color: #fca5a5; }

.shipby-queue-widget {
  --sq-bg: var(--dash-card-bg, #fff);
  --sq-border: var(--dash-border, #e2e8f0);
  --sq-text: var(--dash-text, #1e293b);
  background: var(--sq-bg);
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  padding: 16px;
}
[data-theme="dark"] .shipby-queue-widget {
  --sq-bg: #1a1d27;
  --sq-border: #2a2d3a;
  --sq-text: #e8eaf0;
}
.shipby-queue-widget h3 { margin: 0 0 12px; font-size: 15px; color: var(--sq-text); }
.shipby-queue-section { margin-bottom: 12px; }
.shipby-queue-section h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; opacity: 0.75; }
.shipby-queue-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--sq-border); font-size: 13px;
}
.shipby-queue-item a { color: var(--nav-primary, #ff8306); text-decoration: none; }

/* Modern Dark Theme Login */

* {
  box-sizing: border-box;
}

:root {
  --login-bg: #0a0a0a;
  --login-card-bg: #111111;
  --login-card-border: #1a1a1a;
  --login-text-primary: #ffffff;
  --login-text-secondary: #a1a1a1;
  --login-text-muted: #6b6b6b;
  --login-accent: #e06e03;
  --login-accent-hover: #ff8c2a;
  --login-input-bg: #1a1a1a;
  --login-input-border: #2a2a2a;
  --login-input-focus: #3a3a3a;
  --login-error: #ef4444;
  --login-success: #22c55e;
}

.auth-page-container {
  background: var(--login-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 16px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.auth-page-container button svg {
  vertical-align: middle;
}

/* Main Container */
#container,
.container {
  background-color: var(--login-card-bg);
  border: 1px solid var(--login-card-border);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 900px;
  height: 480px;
  max-height: calc(100vh - 32px);
}

/* Form Container */
.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.sign-up-container {
  left: 0;
  width: 50%;
  opacity: 0;
  z-index: 1;
}

.container.right-panel-active .sign-in-container {
  transform: translateX(100%);
}

.container.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
  animation: show 0.6s;
}

@keyframes show {
  0%, 49.99% {
    opacity: 0;
    z-index: 1;
  }
  50%, 100% {
    opacity: 1;
    z-index: 5;
  }
}

/* Form Styling */
form.frmlogin {
  background-color: var(--login-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px 36px;
  height: 100%;
  text-align: center;
}

h1.titlelogin {
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 4px 0;
  color: var(--login-text-primary);
  letter-spacing: -0.5px;
}

p.desclogin {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 20px 0;
  color: var(--login-text-secondary);
}

span {
  font-size: 12px;
  color: var(--login-text-muted);
}

/* Input Styling */
input.usernameLogin,
input.pass,
input.namein,
input.emailin,
input.passwordin {
  background-color: var(--login-input-bg);
  border: 1px solid var(--login-input-border);
  color: var(--login-text-primary);
  padding: 11px 14px;
  margin: 5px 0;
  width: 100%;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  direction: ltr;
  text-align: left;
  transition: all 0.2s ease;
  outline: none;
}

input.usernameLogin::placeholder,
input.pass::placeholder,
input.namein::placeholder,
input.emailin::placeholder,
input.passwordin::placeholder {
  color: var(--login-text-muted);
}

input.usernameLogin:focus,
input.pass:focus,
input.namein:focus,
input.emailin:focus,
input.passwordin:focus {
  border-color: var(--login-accent);
  background-color: var(--login-input-focus);
  box-shadow: 0 0 0 3px rgba(224, 110, 3, 0.15);
}

/* Button Styling */
button.submitbtn {
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--login-accent) 0%, var(--login-accent-hover) 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 24px;
  letter-spacing: 0;
  text-transform: none;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  width: 100%;
  margin-top: 12px;
  box-shadow: 0 4px 14px rgba(224, 110, 3, 0.3);
}

button.submitbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(224, 110, 3, 0.4);
}

button.submitbtn:active {
  transform: scale(0.98);
}

button.submitbtn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 110, 3, 0.3);
}

button.submitbtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Ghost Button */
button.ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  margin-top: 16px;
  padding: 10px 24px;
  box-shadow: none;
}

button.ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none;
}

button.ghostback {
  background: transparent !important;
  border: 1px solid var(--login-input-border) !important;
  color: var(--login-text-secondary) !important;
  margin-top: 16px;
  padding: 10px 24px;
  box-shadow: none;
}

button.ghostback:hover {
  background: var(--login-input-bg) !important;
  color: var(--login-text-primary) !important;
}

/* Password Input Wrapper */
.password-input-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}

.password-input-wrapper input {
  padding-right: 44px;
}

/* Show Password Button */
button.showpass {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--login-text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

button.showpass:hover {
  color: var(--login-text-secondary);
}

/* Password Hint */
.password-hint {
  color: var(--login-error) !important;
  font-size: 12px;
  margin: 4px 0;
  display: block;
  text-align: left;
  width: 100%;
  line-height: 1.4;
}

/* Remember Me */
.remember-me-group {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0;
  justify-content: space-between;
  font-size: 12px;
}

.remember-me-group > div {
  display: flex;
  align-items: center;
}

.remember-me-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: var(--login-accent);
  cursor: pointer;
}

.remember-me-group label {
  color: var(--login-text-secondary);
  font-weight: 400;
  cursor: pointer;
  font-size: 13px;
}

.remember-me-group a {
  color: var(--login-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.remember-me-group a:hover {
  color: var(--login-accent-hover);
  text-decoration: underline;
}

/* Mobile Toggle Link */
a.mobile-toggle-link {
  color: var(--login-accent);
  font-size: 13px;
  text-decoration: none;
  margin: 14px 0 0 0;
  font-weight: 500;
  transition: color 0.2s ease;
  display: none;
}

a.mobile-toggle-link:hover {
  color: var(--login-accent-hover);
  text-decoration: underline;
}

/* Overlay Container */
.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 100;
}

.container.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

.overlay {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 50%, #111111 100%);
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.container.right-panel-active .overlay {
  transform: translateX(50%);
}

.overlay-panel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 28px;
  text-align: center;
  top: 0;
  height: 100%;
  width: 50%;
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.overlay-panel h1 {
  color: var(--login-text-primary);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.overlay-panel p {
  color: var(--login-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.overlay-left {
  transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
  transform: translateX(0);
}

.overlay-right {
  right: 0;
  transform: translateX(0);
}

.container.right-panel-active .overlay-right {
  transform: translateX(20%);
}

/* Decorative Elements */
.overlay-panel::before {
  content: '';
  position: absolute;
  top: 20%;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(224, 110, 3, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.overlay-panel::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: -30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(224, 110, 3, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Social Container */
.social-container {
  margin: 14px 0;
  display: flex;
  gap: 10px;
}

.social-container a {
  border: 1px solid var(--login-input-border);
  border-radius: 8px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  width: 38px;
  color: var(--login-text-secondary);
  transition: all 0.2s ease;
  background: var(--login-input-bg);
}

.social-container a:hover {
  border-color: var(--login-accent);
  color: var(--login-accent);
  background: rgba(224, 110, 3, 0.1);
}

/* Error Message */
span[style*="color:red"],
span[style*="color: red"] {
  color: var(--login-error) !important;
  font-size: 12px;
  margin: 4px 0 8px 0;
  display: block;
  text-align: left;
  width: 100%;
}

/* Responsive Design */
@media (max-width: 900px) {
  #container,
  .container {
    max-width: 420px;
    min-height: auto;
  }

  .overlay-container {
    display: none !important;
  }

  .form-container {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
  }

  .sign-in-container,
  .sign-up-container {
    width: 100% !important;
    position: relative !important;
    opacity: 1 !important;
    z-index: 2 !important;
    transform: none !important;
  }

  .container.right-panel-active .sign-in-container {
    display: none;
  }

  .container.right-panel-active .sign-up-container {
    display: flex;
    animation: none;
  }

  .sign-up-container {
    display: none;
  }

  a.mobile-toggle-link {
    display: block !important;
  }

  form.frmlogin {
    padding: 40px 32px;
    min-height: 500px;
  }
}

@media (max-width: 480px) {
  .auth-page-container {
    padding: 16px;
  }

  #container,
  .container {
    border-radius: 12px;
  }

  form.frmlogin {
    padding: 32px 24px;
  }

  h1.titlelogin {
    font-size: 24px;
  }

  button.submitbtn {
    padding: 12px 24px;
    font-size: 14px;
  }

  input.usernameLogin,
  input.pass,
  input.namein,
  input.emailin,
  input.passwordin {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* Root */
div#root {
  width: 100%;
  min-height: 100vh;
  background: var(--login-bg);
}

/* Animation for verification timer */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.submitbtn span:last-child {
  animation: pulse 1s ease-in-out infinite;
}

/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  */
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url(/assets/fonts/segoeui-bolditalic-webfont.bad7624325ce3d8298ca.ttf),url(/assets/fonts/segoeui-bolditalic-webfont.a9ed49ca941619822f51.woff) format("woff")
  } 

.k-multiselect input:focus {
   border-bottom: none !important
}

.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
   background-color: #ff8522;
}

div.k-grid td {
   text-align: center;
}

th.header span.k-link {
   width: 100% !important;
   display: flex !important;
   justify-content: center !important;
}

div.k-grid-header {
   background: #ff8522;
}

div.k-grid-header tr {
   background: #ff8522;
   color: white;
   height: 40px;
}

div.k-grid input:focus {
   border-bottom: 0px !important;
}

div.k-grid input {
   border-bottom: 0px !important;
}

div.k-grid-content td {
   border-right: 1px solid #ccc !important;
   border-bottom: 1px solid #ccc !important;
   padding: 0px !important;
}

div.k-grid-content td:last-child {
   border-right: transparent !important;
   text-align: center;
}
.k-checkbox{
   border: 1px solid #ccc;
}
div.k-grid-content table tr {
   height: 40px !important;
}

.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):hover,
.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover {
   background: transparent !important;
}

div.k-grid-header th {
   padding: 0px !important;
}

div.k-grid-header th span.k-link {
   margin: 0px !important;
}

div.k-animation-container .k-checkbox-wrap {
   align-self: normal !important;
}

div.k-animation-container label {
   margin-top: unset !important
}

/* div.k-animation-container.k-animation-container-shown{
    width:17vw !important
} */
div.category .k-grid-header-wrap {
   border-bottom: 0px !important;
}





.k-grid-md .k-table-th>.k-cell-inner {
   margin-block: 0 !important
}

div.insertcategory div.k-grid td {
   text-align: center;
}


div.insertcategory div.k-grid div.list span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid {
   height: 100% !important;
}

div.insertcategory div.k-grid div.dropdownlis {
   height: 100%;
}

div.insertcategory .k-picker-solid {
   background-color: white !important;
}

div.insertcategory div.k-animation-container.k-animation-container-shown {
   width: 27vw !important
}

div.insertcategory div.k-list-header {
   display: flex;
   justify-content: center;
   padding-bottom: 15px;
   background: #ff8731;
   margin-bottom: 2px;
}

div.insertcategory div.k-grid.k-grid-md input {
   font-family: sarabun;
   font-size: .7rem;
}

div.insertcategory div.k-grid.k-grid-md span.k-input-value-text {
   /* font-family: sarabun; */
   font-size: .7rem !important;
   font-weight: bold;
}

div.insertcategory div.k-grid-header {
   background: #ff8731 !important
}

div.insertcategory .k-virtual-content,
.k-virtual-list .k-list-content {
   overflow-y: scroll;
}

div.insertcategory .k-pager {
   background-color: white !important;
}

div.insertcategory .k-pager-sizes {
   color: #ff8731;
}

div.insertcategory .k-pager-info {
   color: #ff8731;
}

div.insertcategory .k-pager-numbers-wrap {
   color: #ff8731;
}

div.insertcategory .k-grid-aria-root {
   border-radius: 5px;
}

div.insertcategory .k-pager.k-pager-md.k-grid-pager {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}



div.insertcategory select {
   /* background-color: red !important;
    background: red !important; */
}











div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown {
   left: 33vw !important;
   right: 0px !important;
   width: 10vw !important;
   background-color: #3f627b;
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown ul {
   background: #ffffff;
   font-family: 'sarabun';
   color: white;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-list-content {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-list {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-popup.k-list-container.k-dropdownlist-popup {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.insertattribue_typedropdown div.k-child-animation-container {
   background: #3f627b;
}

div.k-animation-container.k-animation-container-shown.AttributeSelectValues {
   width: 24vw !important;
   left: 57vw !important;
}

div.k-animation-container.k-animation-container-shown.AttributeSelectValues div.k-list-header {
   background: #3e637a;
   color: white;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
}




div.insertcategory_attribute input:focus {
   border-bottom: unset !important
}

div.insertcategory_attribute .k-textbox.k-input {
   border: 1px solid black;
}

div.insertcategory_attribute .k-list-filter {
   background: #485983;
}

div.insertcategory_attribute input.k-checkbox {
   border: 1px solid black;
}

div.insertcategory div.k-grid-content td input {
   height: 100%;
   border: 0px !important;
   text-align: center;
   font-family: sarabun_bolditalic !important;
}

div.insertcategory div.k-grid-content td input:focus-visible {
   border: 0px !important;
   outline: unset !important;

}

div.insertcategory div.dropdownlis span.k-dropdownlist {
   display: flex;
   /* height: 34px !important; */
}

div.insertcategory .k-grid-header span.k-column-title {
   font-size: .8vw;
   font-family: "sarabun_bolditalic";
}

div.insertcategory .k-grid-table-wrap td {
   font-size: 1vw;
   font-family: "sarabun_bolditalic";
}

div.insertcategory_parent li {
   font-size: 1rem;
   font-family: "sarabun_bolditalic";
}

div.insertcategory_parent li span.k-list-item-text {
   font-size: .6rem;
   font-family: "sarabun_bolditalic" !important;
} 






@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertcategory #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertcategory #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertcategory #header div#infobar {

      width: 90%;

   }

   div.insertcategory #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 2;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46px;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.header div.searchbar {
      flex: 3;
   }

   div.header div.infobar {
      flex: 2;
   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 18px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div#header div#infobar div.message {
      /* width: 46px; */
   }

   div#header div#infobar div.message:nth-child(3) {
      width: auto;
   }

   div#header div#searchbar {
      flex: 3;
   }

   div#header div#infobar {
      flex: 3;
   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.insertcategory #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertcategory #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertcategory #header div#infobar {

      width: 90%;

   }

   div.insertcategory #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertcategory .k-grid-header span.k-column-title {
      font-size: 12px;
   }


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.insertcategory> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}


/* jjjjjj/jjj */

@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 2;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46px;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.header div.searchbar {
      flex: 3;
   }

   div.header div.infobar {
      flex: 2;
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div#waste {
      flex: 18px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th#header {
      width: 100px !important;
   }

   div#header div#infobar div.message {
      /* width: 46px; */
   }

   div#header div#infobar div.message:nth-child(3) {
      width: auto;
   }

   div#header div#searchbar {
      flex: 3;
   }

   div#header div#infobar {
      flex: 3;
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.insertcategory> :first-child {
      display: none !important;

   }

   div.insertcategory div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertcategory div.k-grid-content td {
      width: 30px !important;
   }

   div.insertcategory div.k-grid-content.k-virtual-content td span.k-input-value-text {
      font-size: 14px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.insertcategory #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertcategory #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertcategory #header div#infobar {

      width: 90%;

   }

   div.insertcategory #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertcategory #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }
}


div.k-animation-container.insertcategory_attribute input.k-input-inner {
   background-color: transparent !important;
   border: 0px !important;
}

div.k-animation-container.insertcategory_attribute {
   width: 30% !important;
   left: 60% !important;
}

div.k-animation-container.insertcategory_attribute div.k-list-header span[name="name"] {
   flex: 3;
   font-size: 14px;
   color: white;
   text-align: center;
}

div.k-animation-container.insertcategory_attribute div.k-list-header span[name="position"] {
   flex: 2;
   font-size: 14px;
   color: white;
   text-align: center;
}

div.k-animation-container.insertcategory_attribute div.k-list-header span[name="required"] {
   flex: 1;
   font-size: 14px;
   color: white;
   text-align: center;
}

div.insertcategory_brands input.k-input-inner {
   background-color: transparent !important;
   border: 0px !important;
}

div.insertcategory_brands input.k-checkbox {
   border: 1px solid black;
   ;
}

div.k-animation-container.insertcategory_brands {
   width: 15% !important;
}

div.k-animation-container.insertcategory_brands ul {
   display: flex;
   flex-direction: column;
}

div.k-animation-container.insertcategory_brands ul td {
   width: 100%;
}

.zoom-in-zoom-out {
   margin: 24px;
   width: 50px;
   height: 50px;
   background: green;
   animation: zoom-in-zoom-out 1s ease-out;
}

@keyframes zoom-in-zoom-out {
   0% {
      transform: scale(0, 0);
   }

   50% {
      transform: scale(1.5, 1.5);
   }

   100% {
      transform: scale(1, 1);
   }
}

@media only screen and (max-width: 768px) {
   .filterlist {
      flex-direction: column !important;
      margin-top: 3%;
   }

   .filterlist div {
      margin-bottom: 1% !important;
   }

   .attname {
      width: 100% !important;
   }

   div.col-2 {
      width: 100% !important;
   }

   div.col-1 {
      width: 100% !important;
      margin-right: 0 !important;
      margin-bottom: 5px !important;
   }

   div.k-filter {
      width: 100% !important;
   }

   .menures {
      position: absolute;
      z-index: 2;
      width: 55%;
   }

   .menubaricon {
      z-index: 3;
      position: absolute;
      left: 0;
      top: 5%;
   }

   div[name="mainmenu"] {
      height: auto !important;
   }

   .div[name="mainmenu"] .k-expander {
      width: 100% !important;
   }

   .k-expander-indicator {
      position: absolute;
      right: 5%;
   }

   #waste {
      display: none;
   }

   #searchbar {
      width: 80%;
   }

   #infobar {
      width: 80%;
      justify-content: end !important;
   }

   .headerres {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: end;
      margin-bottom: 2%;
   }

   .settingres {
      flex-direction: column;
   }

   .settingresdata {
      flex-direction: column;
      width: 100% !important;
      margin-top: 2%;
   }

   .settingresinput {
      flex-direction: column;
   }

   .settingresradio {
      display: block !important;
   }

   .settingresradio span {
      display: block;
      width: 100%;
   }

   .settingresradio label {
      float: left;
   }

   .editsetting {
      top: 12% !important;
   }

   .settingright {
      padding: 10px 0 !important
   }

   .imageproductdetails {
      height: 50vh;
      width: 100%;
   }

   .productmaininfo {
      width: 100% !important;
   }

   .productdetailss {
      flex-direction: column;
   }

   #designProduct {
      flex-direction: column;
      width: 100%;
   }

   .footerdesignProductmm {
      flex-direction: column;
      width: 100% !important;
   }

   .headerdesignProductmm {
      width: 100% !important;
   }

   .backcat {
      text-align: center !important;
   }

   .footerop {
      margin-bottom: 2%;
   }

   .btnheaderimgpro {
      position: absolute;
      top: -50px !important;
      display: flex;
      justify-content: center;
   }

   .btnlistorders {
      flex-direction: column;
      align-items: center;
   }

   .btnlistorders button {
      width: 90% !important;
      margin-bottom: 1%;
   }

   .cardorderslist {
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .divcardorderslist {
      width: 100% !important;
   }

   .showallspan {
      top: 0 !important;
   }

   .spancardshowallcat {
      display: flex;
      justify-content: center;
      flex-direction:column;
      align-items: center;
   }

   .paypelhead {
      flex-direction: column !important;
   }

   .paypelheadright {
      width: 100% !important;
      margin-bottom: 3%;
   }

   .addcreditcard {
      width: 60% !important;
   }

   .FiPlusCirclepaypel {
      width: 50px !important;
      height: 50px !important;
   }

   .settingcardright {
      width: 100% !important;
      padding: 0 !important;
   }

   .settingresinputdiv {
      width: 100% !important;
   }

   .cardonedashboard {
      flex-direction: column;
   }

   .progresscardgift {
      width: 100% !important;
   }

   .checkedclaim {
      /* display: none !important; */
   }

   .claimdiv {
      flex-direction: column;
   }

   .titleclaim {
      width: 100% !important;
   }

   .btnclaim {
      width: 50% !important;
   }

   .carddashboardbasket {
      flex-direction: column;
   }

   .cardbasket {
      width: 100% !important;
      margin-bottom: 3%;
   }

   .catdashboardlist {
      flex-direction: column;
   }

   .hiddenfilter {
      display: none !important;
   }

   .rightcardinsertpro {
      margin: 15% 0 !important;
   }

   .imgtblinsertpro {
      width: 50% !important;
   }

   .divheadeditpro {
      width: 100% !important;
      margin-bottom: 2%;
   }

   .divheadeditpro input {
      width: 100% !important;
      margin-left: 0 !important;
   }

   .btneditpro {
      margin-top: 5% !important;
   }

   .headmypro {
      flex-direction: column;
   }

   .headmypro div {
      width: 100% !important;
      flex-direction: column;
      margin-top: 4%;
   }

   .headmypro div button {
      width: 100% !important;
      margin: 1% 0 !important;

   }

   .alertcardmypro button {
      width: 100% !important;
   }

   .divfiltermypro {
      flex-direction: column;
   }

   .divfiltermypro div {
      width: 100% !important;
      position: relative !important;
      margin-bottom: 2%;
      height: 50px !important;
   }

   .divfiltermypro div select {
      height: 47px !important;
   }

   #editproduct0 {
      width: 100% !important;
   }

   .filterpaypal {
      position: absolute;
      top: -115%;
      width: 100% !important;
   }

   .filterpaypal select {
      height: 40px;
      border-radius: 7px !important;
      padding-left: 10px;
   }

   .serachpaypal {
      margin: 15% 0 2% 0 !important;
   }

   .searchinputpaypal {
      width: 100% !important;
   }

   .searchinputpaypal input {
      width: 100% !important;
   }

   .neworderlistcolumn {
      flex-direction: column !important;
   }

   .neworderlistcolumn div {
      width: 100% !important;
   }

   div.k-animation-container.insertcategory_brands {
      width: 40% !important;
   }

   div.insertcategory select {
      background-color: #ffac00 !important;
      background: #ffac00 !important;
      text-align: center;
   }

   .headerimgpro {
      margin: 0 !important;
   }

   .headerimgpro div {
      width: 100% !important;
   }

   .headerimgpro div input {
      width: 100% !important;
   }

   .divneworder {
      flex-direction: column;
      width: 100% !important;
   }

   .divneworder img {
      margin-top: 2%;
   }

   .listdivneworder {
      margin-top: 2% !important;
   }

   .insertfaqcard {
      flex-direction: column;
      width: 100% !important;
   }

   .orderheader {
      flex-direction: column;
   }

   .headorders {
      flex-direction: column;
   }

   .orderheader .headorders {
      width: 100%;
      margin-bottom: 2%;
   }

   .invoceheader {
      flex-direction: column;
      width: 100% !important;
   }

   .invoceheader div {
      width: 100% !important;
   }

   .svgstorename {
      display: none !important;
   }

   .datastorename {
      width: 100% !important;
   }

   .cardnew {
      width: 100% !important;
   }

   .shipcard {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .headerorderdetails {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .headerorderdetailsdiv {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .divoperationorderdetails {
      width: 100% !important;
      align-items: start !important;
      justify-content: start !important;
   }

   .maindetailorder {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .maindetailorderdiv {
      width: 100% !important;
   }

   .infodetailsorder {
      display: none !important;
   }

   .infodetailsorderdiv {
      display: flex !important;
   }

   .listprocat {
      width: 100% !important;
   }

   .divlistprocat {

      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   #submitorder {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
   }

   .submitorder {
      width: 100% !important;
   }
}

/* .selectionAddress label{
   position: absolute;
   left: 5%;
}
.selectionAddress input{
   position: absolute;
   left: 0;
} */

.filterpaypal select {
   height: 40px;
   border-radius: 7px !important;
   padding-left: 10px;
}

.tblproductdesignlist table {
   width: 99.9% !important;
}

.inputsearchmypro::placeholder {
   font-size: 1.2rem;
}

.k-grid-aria-root {
   border-radius: 0px !important;
}

.k-pager {
   background-color: #ffffff !important
}

div.k-grid-content td {
   border-right: 1px solid #fff !important;
}

div.insertcategory div.k-grid-header tr {
   background: #ff8306 !important;
   color: white
}

div.insertcategory div.k-grid-content td {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   height: 40px;
}

div.insertcategory div.k-grid {
   /* box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; */
}

/* div.col-2 {
   flex: auto !important;
} */

/* table tbody tr:nth-of-type(even) td{
   background-color: #b1c8ff5c !important;
} */
div#insertcategory table tbody tr:nth-of-type(even) td div {
   /* background-color: #b1c8ff5c !important; */
   /* width: 100%; */
   height: 100%;
   display: flex;
   align-items: center;
   background: #bdd0fe !important;
}

table tbody tr:nth-of-type(even) td span.spanpro {
   width: 100%;
   height: 100%;
   position: relative;
   display: flex;
   /* background-color: #b1c8ff5c !important; */
   justify-content: center;
   align-items: center;
}

table tbody tr:nth-of-type(even) td.tdpro {
   width: 100%;
   position: relative;
   display: flex;
   background-color: #b1c8ff5c !important;
   height: 55px;
   align-items: center;
   justify-content: center;
}

table tbody tr:nth-of-type(even) td input {
   background-color: transparent !important;
}
table tbody tr:nth-of-type(even) td {
   background-color: #b1c8ff5c !important;
}



table tbody tr:nth-of-type(even) td div.list span.k-dropdownlist {
   height: 100%;
}

table tbody tr:nth-of-type(even) td div.list span.k-input-inner {
   background-color: #bdd0fe !important;
}

table tbody tr:nth-of-type(even) td div.list button {
   background-color: #bdd0fe !important;
   border-radius: 0 !important;
}

input.k-input-inner {
   cursor: pointer;
   text-align: center;
   padding: 0px !important;
   background: white;
   border-radius: 0px;
   padding-left: 4px !important;
   font-family: sarabun_bolditalic;
   height: 40px;
   border-radius: 2px;
   border: 0px !important;
}

input.k-input-inner:focus {
   background: #fff !important;
   border: 2px solid #ccc;
   border-radius: 3px !important;
   text-align: center;
}

.filterlist {
   margin-bottom: 1%
}

.k-grid .k-grid-header .k-table-th:nth-last-child() {
   padding-left: 16px !important;
}

input::placeholder {
   font-size: .8rem;
   color: #5c5c5cc4 !important;
   text-align: start;
}

input::-webkit-input-placeholder {
   /* WebKit, Blink, Edge */
   color: #5c5c5cc4 !important;
}

input:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: #5c5c5cc4 !important;
   opacity: 1;
}

input::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: #5c5c5cc4 !important;
   opacity: 1;
}

input:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: #5c5c5cc4 !important;
}

input::-ms-input-placeholder {
   /* Microsoft Edge */
   color: #5c5c5cc4 !important;
}

.branddropdown {
   position: relative;
}

.branddropdown button {
   position: absolute;
   right: 0;
   top: 20%;
}

.hearticon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 0.5px solid rgb(204, 204, 204);
   display: flex;
   justify-content: center;
   align-items: center;
   right: 5%;
   position: absolute;
   top: 5%;
   font-size: 2rem;
   color: #626262;
   background-color: #fff;
}

.titleimglistpro {
   width: 140px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #52448a;
   background-color: #e8e6f7;
   color: #403568;
}

.titleimglistpro1 {
   width: 100px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #c3862c;
   background-color: #faf7d7;
   color: #9e591c;
}

.titleimglistpro2 {
   width: 100px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #248e4c;
   background-color: #e2f7e3;
   color: #1f6b45;
}

.titleimglistpro3 {
   width: 100px;
   height: 35px;
   border-radius: 3px;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 5%;
   position: absolute;
   top: 10%;
   border: 1px solid #2b6ca3;
   background-color: #e1eff9;
   color: #1e5180;
}

.gridcss input {
   color: #575151 !important;
}



table.tblpaypal tbody tr:nth-of-type(even) td div {
   background: transparent !important;
}

table.tblpaypal tbody tr:nth-of-type(even) td div.divstatuspaypal {
   background: rgba(81, 245, 129, 0.56) !important;
   justify-content: center;
}

table.tblpaypal tbody tr:nth-of-type(even) td div.paymenttblpaypal {
   align-items: start !important;
}

@media screen and (max-width: 768px) {
   table.tblpaypal {
      border: 0;
   }

   table.tblpaypal .paymenttblpaypal {
      justify-content: end !important;
      align-items: end !important;
   }

   table.tblpaypal tbody tr:nth-of-type(even) td div.paymenttblpaypal {
      align-items: end !important;
   }

   table.tblpaypal .Timetblpaypal {
      justify-content: end !important;
      align-items: end !important;
   }

   table.tblpaypal tbody tr:nth-of-type(even) td div.divstatuspaypal {
      background: rgba(81, 245, 129, 0.56) !important;
      justify-content: center;
   }

   table.tblpaypal caption {
      font-size: 1.3em;
   }

   table.tblpaypal thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }

   table.tblpaypal tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: 2rem;
      padding: 0 10px
   }

   table.tblpaypal td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right !important;
      width: 100% !important;


   }

   table.tblpaypal td::before {
      /*
     * aria-label has no advantage, it won't be read inside a table
     content: attr(aria-label);
     */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
      color: #303030;
   }

   table.tblpaypal td:last-child {
      border-bottom: 0;
   }

   table.tblpaypal .statuspaypaltd {
      height: 40px;
   }

   table.tblpaypal .divstatuspaypal {
      float: right !important;
      width: 35% !important;
      padding-right: 5px;
   }

   table.tblpaypal .Actionpaypaltd {
      height: 40px;
   }

   table.tblpaypal .spanActionpaypal {
      float: right !important;
      width: 60% !important;
   }

   .footertablepaypal {
      height: 150px !important;
      flex-direction: column;
   }

   .footertablepaypal div {
      width: 100% !important;
      justify-content: center !important;
      border: none !important;
   }
}



table.tblmypro tbody tr:nth-of-type(even) td div {
   background: transparent !important;
}

@media screen and (max-width: 768px) {

   table.tblmypro {
      border: 0;
      margin-top: 65% !important;
      background: #e6e6e6;
      border-radius: 3px;

   }


   table.tblmypro .seletimage {
      justify-content: space-between;
      align-items: center;
      display: flex;
      width: 100% !important;
   }

   table.tblmypro tbody tr:nth-of-type(even) td {
      background: transparent !important;

   }

   table.tblmypro tbody tr:nth-of-type(even) td div {
      background: transparent !important;
      display: block !important;

   }

   table.tblmypro tbody tr:nth-of-type(even) td div.pruductdatamypro {
      background: transparent !important;
      display: flex !important;
      align-items: end !important;

   }

   table.tblmypro caption {
      font-size: 1.3em;
   }

   table.tblmypro thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
   }

   table.tblmypro tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: 2rem;
      padding: 0 10px
   }

   table.tblmypro td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right !important;
      width: 100% !important;


   }

   table.tblmypro td::before {
      /*
     * aria-label has no advantage, it won't be read inside a table
     content: attr(aria-label);
     */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
      color: #303030;
   }

   table.tblmypro td:last-child {
      border-bottom: 0;
   }

   table.tblmypro .statusmyprotd {
      height: 50px;
      margin-top: 5px;
   }

   table.tblmypro .divstatusmypro {
      float: right !important;
      width: 60% !important;
   }

   table.tblmypro .Actionmyprotd {
      height: 40px;
   }

   table.tblmypro .spanActionmypro {
      float: right !important;
      width: 60% !important;
   }

   .footertablemypro {
      height: 150px !important;
      flex-direction: column;
   }

   .footertablemypro div {
      width: 100% !important;
      justify-content: center !important;
      border: none !important;
   }

   table.tblmypro tbody tr:nth-of-type(even) td div.divselectimg {
      display: flex !important;
      align-items: center;
   }

   .modals {
      width: 98% !important;
   }

   .cardneworder {
      width: 90% !important;
   }

   .comboneworder {
      width: 98% !important;
      justify-content: center;
   }

   .levelneworder {
      width: 90% !important;
   }

   .filterorderlist {
      flex-wrap: wrap;
   }

   .filterorderlist span {
      margin: 5px !important;
   }
}


div.brand span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid {
   height: 34px !important;
}

/* div.grid table tbody tr:nth-of-type(even) td div{
   display: block !important;
} */

div#showcategoryorder .k-table.k-grid-header-table.k-table-md {
   width: 100% !important;
}

div#showcategoryorder .k-table.k-grid-table.k-table-md {
   width: 100% !important;
}

div.k-grid-header {
   background: white !important;
}

/* div.k-grid-header tr {
   background: white !important;
   color: black !important
} */

showcategoryorder th.header span.k-link {
   justify-content: flex-start !important;
}

div#showcategoryorder div.k-grid-content td {
   text-align: left !important;
}

div#showcategoryorder div.k-grid-header-wrap span.k-link {
   justify-content: flex-start !important;
}

div#orderlist div.k-grid-header tr {
   background-color: #ff8522 !important;
}

div#orderlist .k-detail-row div.k-grid-header tr {
   background-color: #6d6d6d !important;
   background: #6d6d6d !important;
}
div#orderlist .k-detail-row div.k-grid-header tr th {
   background-color: #6d6d6d !important;
   background: #6d6d6d !important;
   background: #bbbbbb !important;
    padding: 0 !important;
}

div.editProduct.d-flex span.k-column-title {
   font-family: sarabun_bolditalic;
}

div.k-expander {
   width: 100%;
}

div.k-expander div[role="button"] {
   padding-right: 0px;
}

/* div[name="mainmenu"] .k-expander-header {
   justify-content: space-evenly !important;
} */


div.usertypecombo {
   /* background-color: white !important; */
}

div.brand .k-picker-solid:hover,
.k-picker-solid.k-hover {
   background: white !important;
}

div.usertype select.userttype {
   background: #ccc !important;
}

/* .k-expander-header:hover, .k-expander-header.k-hover{
   background-color: unset !important;
} */






contextMenu * {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   font-family: 'Roboto Condensed', sans-serif;
}

/* .myproduct.container {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100vw;
  height:100vh;
  font-size:200%;
} */
#contextMenu ul li {
   list-style: none;
}

#contextMenu {
   position: absolute;
   transform-origin: top left;
   transform: scale(0);
   width: 100px;
   height: 100px;
   border: 1px solid rgba(100, 100, 100, 0.55);
   padding: 5px;
   background: rgba(250, 250, 250, 0.98);
   box-shadow: 2px 2px 12px 4px rgba(100, 100, 100, 0.4);
   transition: transform 400ms ease-in-out 50ms;
}

#contextMenu.visible {
   transform: scale(1);
}

#contextMenu ul li {
   padding: 5px 3px;
   display: flex;
   align-items: center;
   cursor: pointer;
   color: rgba(50, 50, 50, 0.9);
   font-size: 15px;
}

#contextMenu ul li:hover {
   background: rgba(100, 100, 100, 0.12);
}

#contextMenu ul li.disabled {
   color: rgba(100, 100, 100, 0.5);
   cursor: pointer;
}

#contextMenu ul li.share {
   /*   height:40px; */
   width: 100%;
   flex-direction: column;
   align-items: left;
   flex-wrap: wrap;
}

#contextMenu ul li.share>.name {
   margin-top: -2px;
   margin-bottom: 10px;
   display: block;
}

#contextMenu ul li.share .icons {
   width: 100%;
   display: flex;
   justify-content: space-around;
}

#contextMenu ul li.share .icons>i:hover {
   background: #e7e7e7;
}

#contextMenu ul li i {
   width: 20px;
}

#contextMenu ul li div.name {
   padding-left: 8px;
}

#contextMenu div.break {
   margin: 4px 0px;
   border-top: 1px solid rgba(100, 100, 100, 0.5);
}

#pulse {
   position: fixed;
   width: 35px;
   height: 35px;
   background: rgba(0, 0, 0, 1);
   opacity: 0;
   border-radius: 50%;
   z-index: 100;
}

#pulse.active {
   animation: pulse 400ms ease;
}

@keyframes pulse {
   0% {
      opacity: 1;
      transform: scale(0);
   }

   100% {
      opacity: 0;
      transform: scale(1.1);
   }
}





div.newcategory_attribute input:focus {
   border-bottom: unset !important
}

div.newcategory_attribute .k-textbox.k-input {
   border: 1px solid black;
}

div.newcategory_attribute .k-list-filter {
   /* background: #e7a25d; */
}

div.newcategory_attribute input.k-checkbox {
   border: 1px solid black;
}


div.k-animation-container.newcategory_attribute input.k-input-inner {
   background-color: #f5f5f5 !important;
   /* border: 0px !important; */
}

div.k-animation-container.newcategory_attribute {
   width: 30% !important;
   left: 50% !important;
}

div.k-animation-container.newcategory_attribute div.k-list-header span[name="name"] {
   flex: 3;
   font-size: 14px;
   color: black !important;
   font-family: sarabun_bolditalic !important;
   text-align: left;
}

div.k-animation-container.newcategory_attribute div.k-list-header span[name="position"] {
   flex: 2;
   font-size: 14px;
   color: black !important;
   font-family: sarabun_bolditalic !important;
   text-align: center;
}

div.k-animation-container.newcategory_attribute div.k-list-header span[name="required"] {
   flex: 1;
   font-size: 14px;
   color: black !important;
   font-family: sarabun_bolditalic !important;
   text-align: center;
}

.divcardorderslist:hover {
   background-color: #f7f7f7 !important;
}


.accordion {
   background-color: #fff;
   border-style: solid;
   border-width: 0 0 1px 0;
   border-color: #e3e4e5;
   cursor: pointer;
}

.accordion:hover {
   background-color: #e3e4e5;
   transition: background-color .15s ease;
}

.accordion-header {
   border: none;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: transparent;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   padding: 8px;
}

.accordion-header span {
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.accordion-body {
   color: #444;
   font-size: 14px;
   opacity: 0;
   height: 0;
   overflow: hidden;
   transition: opacity .3s
}

.accordion-body.active {
   height: 100%;
   opacity: 1;

   /* padding: 5px; */
}


.arrow {
   transition: transform .2s linear;
}

.accordion:has(.active) .arrow {
   transform: rotate(180deg);
}

.checkbox-input {
   width: 25px;
   height: 25px;
}

.registerinputs_categorry {
   border: 0px
}

.registerinputs_categorry:focus-visible {
   border: 0px !important;
   outline: 0px !important;
}
.passshoweye{
   display:block;
}
.passhideeye{
   display: none;
}

div#mylibrary .createbtnlibrary:hover{
   /* background:#e7e7e7; */
   cursor:pointer;
   }
   div#mylibrary  .uploaddesignbtn:hover{
   cursor:pointer;
   }
   div#mylibrary  .carduploaddesign:hover{
   border:1px solid #81a80099 !important;
   border-radius:3px
   }

   div#mylibrary .k-listview-content{
      display: flex;
   }
   div#mylibrary div.k-listview.k-d-flex{
      width: 100%;
   }
   div#mytemplate div.k-listview.k-d-flex{
      width: 100%;
   }
   div#mytemplate div.k-listview-content{
      flex-wrap: wrap;
   }
   div#mytemplate .k-listview-content{
      display: flex;
   }
   .etsycolor{
      color: #248e4c;
   }
   div#modalCreateCard span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid{
      background: white;
      height: 100% !important;
      border: 0px !important;
   }



   div#mytemplate div.k-listview-content{
      justify-content: flex-start;
   }






   /* ////////////////////////// */



:root {
  --cube-size: 150px;
  --text-size: 40px;
  --border-size: 20px;
  --gap: 1.8;
  --main-color: #dc64ff;
  --main-color-transparent: rgba(220, 100, 255, 0.4);
  --translateYLeft: 0;
  --translateYRight: 0;
  --duration: 1.7s;
}

@media (max-width: 768px) {
  :root {
    --cube-size: 100px;
    --text-size: 20px;
    --border-size: 15px;
  }
}

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

.bodyloader {
  position: absolute;
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 100px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  background-color: transparent;
  overflow: hidden;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

.backgroundloader {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  
  opacity: 0.07;
  animation: movingGradient 35s linear infinite;
}

.wrapperloader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
}

.textloader {
  margin: 80px 0 0;
  font-size: var(--text-size);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.cubeloader {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(-135deg);
  animation: cubeRotation var(--duration) cubic-bezier(0, 0.5, 0.7, 1) infinite;
}

.cubeloader,
.bottomloader,
.sideloader {
  width: var(--cube-size);
  height: var(--cube-size);
}

.bottomloader,
.sideloader {
  position: absolute;
}

.bottomloader {
  background-color: var(--main-color);
  border-radius: 5px;
  box-shadow: 0 0 200px 0 var(--main-color-transparent);
  transform: translateY(calc(var(--cube-size) / var(--gap))) rotateX(-90deg);
}

.sideloader {
  display: flex;
}

.sideloader::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border: var(--border-size) solid var(--main-color);
  border-radius: 5px;
  box-shadow: 0 0 200px 0 var(--main-color-transparent);
}

.backloader {
  transform: translateZ(calc(var(--cube-size) / var(--gap) * -1))
    rotateY(180deg);
}

.backloader::after {
  animation: cubeSideOut var(--duration) cubic-bezier(0.5, 1, 0.5, 1) infinite
    both;
}

.leftloader {
  transform: translateX(calc(var(--cube-size) / var(--gap) * -1))
    rotateY(-90deg);
  display: none;
}

.rightloader {
  transform: translateX(calc(var(--cube-size) / var(--gap))) rotateY(90deg);
}

.rightloader::after {
  animation: cubeSideIn var(--duration) cubic-bezier(0.5, 1, 0.5, 1) infinite
    both;
}

.frontloader {
  transform: translateZ(calc(var(--cube-size) / var(--gap)));
  display: none;
}

@keyframes cubeRotation {
  0%,
  80% {
    transform: rotateX(20deg) rotateY(-135deg);
  }

  100% {
    transform: rotateX(20deg) rotateY(-45deg);
  }
}

@keyframes cubeSideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  10%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cubeSideOut {
  0%,
  80% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes movingGradient {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translate(50%, 50%);
  }
}

div#showproductorder  div.k-listview.k-d-flex{
width: 100% !important;
height: unset !important;
}
.k-tilelayout{
   height: 100vh;
   background:#ccc;
}
div.k-tilelayout-item.k-card.k-cursor-grab
{
   height: unset !important;
}
/* div.react-grid-item.react-draggable.cssTransforms.react-resizable{
   width: unset !important;
   height: unset !important;
} */

/* div.react-grid-layout.layout{
   height: 1290px !important;
} */
div.react-grid-item.cssTransforms{
   background: #ccc;
}

div.buildersetting span.k-window-title{
   color: white;
}

div.etsycategorysettings{
   position: fixed;
    height: 95% !important;
    width: 58% !important;
}

div.mystores_settings{
   width: 50% !important;
   height: auto !important;
   position: fixed;
}
div.mystores_settings div.k-window-titlebar{
   color:white
}
main#content{
   position: absolute;
   left: 10%;
   top:10%
}

div.bulderselectedItem{
   border: 1px solid blue;
}
.react-grid-item img{
   position: fixed;
}
div.cropwindow span.k-window-title{
   color: white;
   font-family: sarabun_bolditalic;
   font-size: x-large;
}
div.react-grid-layout.layout{
   transform-origin: left top;

}


div#insertcategory div.categoryregister{
   flex: 1;
}
div#insertcategory div.categoryregister span.categoryname{
   font-size: .8rem;
    font-weight:bold 
}
div#insertcategory div.categoryregister input.registerinputs_categorry{
  height: 34px;
  width: 100%;
  border-radius:5px;
  font-family:sarabun_bolditalic; 
  color:#575151;
  text-align: center;
}
.categoryname .k-dropdownlist.k-picker{
border: 1px solid #cccccc;
}
div#insertcategory .k-dropdownlist.k-picker{
   width: 100% !important;
}
.k-grid .k-grid-header .k-cell-inner > .k-link > .k-sort-icon{
   color: #fff !important;
}
div#insertcategory span.k-multiselecttree{
   height: 34px !important;
}
div#insertcategory div.widthheight{
   flex: 6 !important;
}
div#insertcategory div.widthheight div.image{
   height: 37px !important;
   border-radius: 5px;
}
div#insertcategory table tbody tr:nth-of-type(even) td{
    background-color: #c4d5fe !important;
}
div#insertcategory  .k-button-md.k-icon-button{
   padding-left: 0px !important;
}
div#insertcategory div.k-grid-content table tr{
   height: 40px !important;
}
div#insertcategory div.k-grid.gridcss{
   height: 533.8px;
}
div.insertcategory div.upsection div.dropdownlis span.k-dropdownlist{
   height: 34px !important;
}
div.insertcategory_brands .k-list-filter {
   padding-right: 17px !important;
    padding-left: 0px !important;
    border-radius: 0px !important;
}
div.insertcategory_brands  .k-textbox.k-input{
   background: #f5f5f5;
   border-radius: 2px;
}
div.insertcategory_brands .k-input-prefix{
   border: 1px solid rgb(154, 150, 150);
    border-right: 0px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
div.insertcategory_brands  input.k-input-inner{
   border: 1px solid rgb(154, 150, 150) !important;
   border-left: 0px !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
}

div.newcategory_attribute .k-input-prefix{
   background-color: #f5f5f5 !important;
   border: 1px solid rgb(154, 150, 150);
    border-right: 0px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
div.newcategory_attribute  input.k-input-inner{
   border: 1px solid rgb(154, 150, 150) !important;
   border-left: 0px !important;
   border-top-left-radius: 0px !important;
   border-bottom-left-radius: 0px !important;
}
div#insertcategory .k-virtual-content, .k-virtual-list .k-list-content{
   overflow-y: overlay !important

}

div.dashboardmenu{
   padding-bottom: .8rem !important;
   padding-top: .8rem !important;
}


div.cropwindow div.canvas-container{
   display: none;
}
div.cropwindow div.k-window-titlebar{
   height: 35px;;
}
div.cropwindow .k-window-content, .k-prompt-container{
   padding-block: 0px !important;
   padding: 0px;
}
div.cropwindow .k-window-content div.react-transform-wrapper.transform-component-module_wrapper__SPB86 {
   height: 565px !important;
}

div#orderpreview table tbody tr:nth-of-type(even) td div{
   background-color: unset !important;
}

div.k-animation-container.categoryfilter.k-animation-container-shown .k-input-inner{
    border:0px !important;
    background: white !important;
    background-color: white !important;
}
div.k-animation-container.categoryfilter.k-animation-container-shown span.k-textbox.k-input.k-input-md.k-input-solid.k-rounded-md{
   border: 1px solid #ccc !important;
}

div.categorylink span:hover{
   text-decoration: underline;
   color: #354bdc !important;
}
div#insertcategory input.k-input-inner{
   background: #ededed !important;
}
/* div#mytemplate div.drawparent */

.sacp-filter-sort-area .k-filter-toolbar .k-filter-field,
.sacp-filter-sort-area .k-filter-toolbar .k-filter-operator{
   display: none;
}
:root{
    /* animations constants */
    --steps: 10;
    --saturation: 80%;
    --lightness: 60%;
    --hue-offset: 320;
    --duration: 5000ms;
  
    /* generate some colors */
    --color-01: hsl( calc( 360 / var(--steps) *  1 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-02: hsl( calc( 360 / var(--steps) *  2 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-03: hsl( calc( 360 / var(--steps) *  3 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-04: hsl( calc( 360 / var(--steps) *  4 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-05: hsl( calc( 360 / var(--steps) *  5 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-06: hsl( calc( 360 / var(--steps) *  6 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-07: hsl( calc( 360 / var(--steps) *  7 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-08: hsl( calc( 360 / var(--steps) *  8 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-09: hsl( calc( 360 / var(--steps) * 9 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-10: hsl( calc( 360 / var(--steps) * 10 + var(--hue-offset)), var(--saturation), var(--lightness) );
    --color-11: hsl( calc( 360 / var(--steps) * 11 + var(--hue-offset)), var(--saturation), var(--lightness) );  
    --color-crayon: #202036;
  
    /* build some backgrounds */
    --bg-01-a: no-repeat left       0% top    / 11%   0% linear-gradient(to right, var(--color-01), var(--color-02));
    --bg-01-b: no-repeat left       0% top    / 11% 100% linear-gradient(to right, var(--color-01), var(--color-02));
    --bg-02-a: no-repeat left   11.11% bottom / 11%   0% linear-gradient(to right, var(--color-02), var(--color-03));
    --bg-02-b: no-repeat left   11.11% bottom / 11% 100% linear-gradient(to right, var(--color-02), var(--color-03));
    --bg-03-a: no-repeat left   22.22% top    / 11%   0% linear-gradient(to right, var(--color-03), var(--color-04));
    --bg-03-b: no-repeat left   22.22% top    / 11% 100% linear-gradient(to right, var(--color-03), var(--color-04));
    --bg-04-a: no-repeat left   33.33% bottom / 11%   0% linear-gradient(to right, var(--color-04), var(--color-05));
    --bg-04-b: no-repeat left   33.33% bottom / 11% 100% linear-gradient(to right, var(--color-04), var(--color-05)); 
    --bg-05-a: no-repeat left   44.44% top    / 11%   0% linear-gradient(to right, var(--color-05), var(--color-06));
    --bg-05-b: no-repeat left   44.44% top    / 11% 100% linear-gradient(to right, var(--color-05), var(--color-06)); 
    --bg-06-a: no-repeat left   55.55% bottom / 11%   0% linear-gradient(to right, var(--color-06), var(--color-07));
    --bg-06-b: no-repeat left   55.55% bottom / 11% 100% linear-gradient(to right, var(--color-06), var(--color-07)); 
    --bg-07-a: no-repeat left   66.66% top    / 11%   0% linear-gradient(to right, var(--color-07), var(--color-08));
    --bg-07-b: no-repeat left   66.66% top    / 11% 100% linear-gradient(to right, var(--color-07), var(--color-08));
    --bg-08-a: no-repeat left   77.77% bottom / 11%   0% linear-gradient(to right, var(--color-08), var(--color-09));
    --bg-08-b: no-repeat left   77.77% bottom / 11% 100% linear-gradient(to right, var(--color-08), var(--color-09));
    --bg-09-a: no-repeat left   88.88% top    / 11%   0% linear-gradient(to right, var(--color-09), var(--color-10));
    --bg-09-b: no-repeat left   88.88% top    / 11% 100% linear-gradient(to right, var(--color-09), var(--color-10));  
    --bg-10-a: no-repeat left   99.99% bottom / 11%   0% linear-gradient(to right, var(--color-10), var(--color-11));
    --bg-10-b: no-repeat left   99.99% bottom / 12% 100% linear-gradient(to right, var(--color-10), var(--color-11));   
  }
  
  .rainbow-marker-loader {
    height:4rem;
    width:20rem;
    max-width:100%;
    border:.5rem solid var(--color-crayon);
    border-radius:.5rem;
    animation: infinite alternate rainbow-fill var(--duration) ease-in-out;
    box-sizing:border-box;
    position:relative;
    margin:1rem;
    background:
      var(--bg-01-a),
      var(--bg-02-a),
      var(--bg-03-a),
      var(--bg-04-a),
      var(--bg-05-a),
      var(--bg-06-a),
      var(--bg-07-a),
      var(--bg-08-a),
      var(--bg-09-a),
      var(--bg-10-a); 
  }
  
  .rainbow-marker-loader::after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-origin:left center;
    border-radius:.5rem;
    box-sizing:border-box;  
    margin-top:-7.5%;
    margin-left:-2.5%;
    animation: infinite alternate move-marker var(--duration) ease-in-out;    
    background:
      no-repeat left   0% top    / 3rem  50% linear-gradient(to bottom right, transparent, transparent 40%, var(--color-crayon) 40%),
      no-repeat left   0% bottom / 3rem  50% linear-gradient(to top right, transparent, transparent 40%, var(--color-crayon) 40%),
      no-repeat left 3rem bottom / 100% 100% linear-gradient( var(--color-crayon), var(--color-crayon))
  }
  
  @keyframes move-marker{
    10%{
      transform: translate(5%, 100%) rotate(2.5deg);
    }
    20%{
      transform: translate(20%, 0) rotate(-5deg);
    }
    30%{
      transform: translate(30%, 100%) rotate(2.5deg);
    }  
    40%{
      transform: translate(40%, 0) rotate(-5deg);
    } 
    50%{
      transform: translate(50%, 100%) rotate(2.5deg);
    }   
    60%{
      transform: translate(60%, 0) rotate(-5deg);
    }   
    70%{
      transform: translate(70%, 100%) rotate(2.5deg);
    }  
    80%{
      transform: translate(80%, 0) rotate(-5deg);
    }  
    90%{
      transform: translate(90%, 100%) rotate(2.5deg);
    }  
    100%{
      transform: translate(100%, 0) rotate(-5deg);
    }   
  }
  
  @keyframes rainbow-fill{
    0%{
      background:
        var(--bg-01-a),
        var(--bg-02-a),
        var(--bg-03-a),
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);
    }
    10%{
      background:
        var(--bg-01-b),
        var(--bg-02-a),
        var(--bg-03-a),
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),
        var(--bg-08-a),  
        var(--bg-09-a), 
        var(--bg-10-a);      
    }
    20%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-a),   
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    30%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-a),
        var(--bg-05-a),
        var(--bg-06-a),
        var(--bg-07-a),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    40%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-a), 
        var(--bg-06-a), 
        var(--bg-07-a),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    50%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-a),
        var(--bg-07-a),   
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    60%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-a),   
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }    
    70%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-a),
        var(--bg-09-a),
        var(--bg-10-a);      
    }  
    80%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-b),
        var(--bg-09-a),
        var(--bg-10-a);      
    }
    90%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-b),
        var(--bg-09-b), 
        var(--bg-10-a);     
    }   
    100%{
      background:
        var(--bg-01-b),
        var(--bg-02-b),
        var(--bg-03-b),
        var(--bg-04-b), 
        var(--bg-05-b), 
        var(--bg-06-b), 
        var(--bg-07-b),  
        var(--bg-08-b),
        var(--bg-09-b), 
        var(--bg-10-b);     
    }
  }
  
  
  .title{
    /* color:#fff; */
    font-size:1.5rem;
    font-family: 'M PLUS Rounded 1c', sans-serif; 
    text-transform:uppercase;
    letter-spacing:1px;
  }

  .loadermain{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background-color: #181616d8;
    top: 0;
    left: 0;
  }
div.k-window.error div.k-window-titlebar{
    background: red !important;
}
div.k-window.success div.k-window-titlebar{
    background: rgb(148, 231, 92) !important;
}

div.k-window.error div.k-window-content{
    display: flex;
    justify-content: center;
    align-items: center;
}
div.k-window.success div.k-window-content{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url("../assets/fonts/segeio/segoeui-bolditalic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  }
    
  @font-face{
    font-family: test;
  src:  url("../assets/fonts/title.otf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  } */

.k-list-item.k-selected,
.k-selected.k-list-optionlabel {
   background-color: #ff8522;
}

div#insertproduct {
   font-family: 'sarabun_bolditalic';
   border-radius: 5px;
}

div#insertproduct div.bottom.row div.left span {
   font-family: sarabun_bolditalic !important;
   color: rgb(68 68 68) !important;
   font-size: 1.1rem;
}

div#insertproduct div.bottom.row div.left input.nameproducts {
   border: 1px solid #d4d2d2;
   border-radius: 18px;
   background: #d4d2d2;
   padding: 0 5px;
   height: 40px;
}

div#insertproduct div.bottom.row div.left input[type="radio"] {
   border: 1px solid #d4d2d2;
   border-radius: 50%;
   background: #ffffff;
   padding: 0 5px;
   height: 20px !important;
   width: 20px !important;
   width: unset !important;
}

div#insertproduct div.bottom.row div.left input[type="radio"]:checked {
   border: none !important;
   border-radius: 50%;
   background: #0578d6 !important;
   padding: 5px;
   height: 15px !important;
   width: 15px !important;
   outline: 2px solid #0578d6;
}

div#insertproduct div.bottom.row div.left .texteditor {
   background: #eee;
}

/* div.k-animation-container.k-animation-container-shown{
    width: 15vw !important;
} */

div#insertproduct div.bottom.row div.right span {
   font-family: sarabun_bolditalic !important;
   color: rgb(68 68 68) !important;
   font-size: 1vw;
}

div#insertproduct div.bottom.row div.left span.k-dropdownlist {
   background-color: #d4d2d2 !important;
   border-radius: 23px !important;
}

div#insertproduct div.bottom.row div.left .k-picker-solid:focus,
.k-picker-solid.k-focus {
   box-shadow: unset !important
}

div#insertproduct div.bottom.row div.right input {
   border-bottom: 0px !important
}

div#insertproduct div.bottom.row div.right span.k-svg-i-chevron-down {
   color: black;

}

div#insertproduct div.bottom.row div.right span.k-dropdownlist {
   background-color: #eee !important;
}

div#insertproduct div.k-listview-content {
   display: flex;
   flex-wrap: wrap;
   background: white;
   /* border: 1px solid #8e8e8e; */
   border-top: 1px solid white;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   height: 25px !important;
}

div#insertproduct div.bottom.row thead span {
   color: white !important;
}

th.insertproduct_header {
   background-color: #ff8522;
   color: white;
}

div.insertproduct_grid div.k-grid-header {
   background-color: #ff8522;
   color: white;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
}

div.insertproduct_grid div.k-grid-header-wrap {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

div.insertproduct_grid .k-column-title {
   width: 100%;
   text-align: center;
   font-family: 'sarabun_bolditalic';
   font-size: .9vw;
}

div.insertproduct_grid .k-virtual-content,
.k-virtual-list .k-list-content {
   overflow-y: hidden;
}

div.insertproduct_grid div.k-grid-content td {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   font-family: sarabun_bolditalic;
   font-size: 1vw;
}

div.insertproduct_grid div.k-grid-table-wrap {
   /* border-left: 1px solid #747272 !important; */
}

div#insertproduct input {
   font-family: sarabun_bolditalic;
   font-size: 1.2rem;
  

}

.NumericTextBox input {
   height: 100% !important;
   color: #575151 !important;
   background-color: #fff !important;
}

div.insertproduct_category {
   background: #586b85;
   width: 12vw;
   left: 0px;
   border-radius: 5px;
}

div.insertproduct_category ul {
   background: #485983;
   color: white;
}

div.insertproduct_category .k-menu-group .k-menu-item+.k-menu-item {
   border-bottom: 1px solid white;
}

div.insertproduct_gridcombo .k-input,
.k-picker {
   border-style: unset !important;
}

.k-picker-solid:focus,
.k-picker-solid.k-focus {
   box-shadow: inset !important;
}

.k-picker-solid:hover,
.k-picker-solid.k-hover {
   background-color: unset !important;
}

div#insertproduct div.texteditor .k-toolbar .k-button-group button {
   border: 1px solid black;
}

div#insertproduct div.texteditor span[title='Font Size'] span.k-input-inner {
   border-right: 1px solid black;
}

div#insertproduct div.texteditor span[title='Font Size'] {
   border: 1px solid black;
}


div#insertproduct div.texteditor div.insertproduct_gridcombo .k-input,
.k-picker {
   border-style: solid !important;
}

div#insertproduct div.texteditor span[title='Font Name'] span.k-input-inner {
   border-right: 1px solid black;
}

div#insertproduct div.texteditor span[title='Font Name'] {
   border: 1px solid black;
}

div#insertproduct div.texteditor span[title='Format'] span.k-input-inner {
   border-right: 1px solid black;
}

div#insertproduct div.texteditor span[title='Format'] {
   border: 1px solid black;
}

div#insertproduct div.texteditor .k-editor-toolbar {
   border-bottom: 1px solid black;
}

div#insertproduct div.texteditor .k-editor-content {
   background: #e2e2e2;
   overflow-y: hidden !important;
}

div#insertproduct div.texteditor {
   font-family: sarabun;
}

.k-input-solid:focus-within {
   border-color: unset !important;
   box-shadow: unset !important;
   color: black;
}

input#fiyat {
   color: #111111;
}

input#stock {
   color: #111111;
}

.k-input,
.k-picker {
   border-style: unset !important;
}

div.insertproductdropdown li {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div#insertproduct .k-pager {
   background: white !important
}

div#insertproduct .k-pager-sizes {
   color: #ff8731;
}

div#insertproduct .k-pager-info {
   color: #ff8731;
}

div.EditDeleteProduct div.k-grid {
   box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

div.EditDeleteProduct .k-grid-aria-root {
   border-radius: 5px;
}

.k-pager.k-pager-md.k-grid-pager {
   border-radius: 5px;
}
.k-colorgradient{
   border-style: unset;
}







@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 34px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#insertproduct div.bottom div.right {
      flex-direction: column;
      height: unset !important;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(3) {

      flex: 2;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.right {
      flex-direction: column;
      height: unset !important;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.right {
      flex-direction: column;
   }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.right {
      flex-direction: column;
   }


}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.insertProduct> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}



@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.insertProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.insertProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
      height: unset !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
      height: 127px !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.insertProduct> :first-child {
      display: none !important;

   }

   div.insertProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.insertProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.insertProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.insertProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.insertProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.insertProduct #header div#infobar {

      width: 90%;

   }

   div.insertProduct #header div#infobar div.message:nth-child(1) {

      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div.insertProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

}

@media only screen and (min-width : 1280px) and (orientation:landscape) {
   div.insertProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}


div.category:focus-visible {
   outline: unset !important
}

div.insertproductbranddropdown li {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div.insertProduct div.k-grid-content td {
   height: 30px;
}

div.insertProduct div.k-grid-content td input {
   height: 100%;
   width: 100%;
   text-align: center;
   /* background: white !important; */
   border: 0px solid !important;

}

div.insertProduct div.k-grid-content span.k-input.k-numerictextbox {
   height: 100%;
   width: 100%;

}

div#insertProduct div.k-grid-header {
   background: transparent !important;
}

div#insertProduct div.k-grid-header {
   justify-content: center;
}

div#insertProduct div.k-grid-header {
   border: 1px solid black;
   background: black;
}

div.insertprice_grid div.k-grid-header {
   background-color: #ff8522 !important;
   height: 31px;
}

div.insertprice_grid .k-cell-inner {
   display: flex;
   justify-content: center;
}

div#insertProduct div.left div.k-grid-header-wrap span.k-column-title {
   color: #e28a4b !important;
}

div#insertProduct div.insertproduct_grid span.k-column-title {
   color: #e28a4b !important;
}

div.insertProduct div.k-grid-header-wrap span.k-column-title {
   color: #050505 !important
}

@media only screen and (max-width: 768px) {

   div#designProduct div.footerdesignProductmm{
      display: flex;
      flex-direction: column;
      width: 100% !important;
   }
   div#designProduct div.footerdesignProductmm div.section2{
      display: flex !important;
      flex-direction: column;
   }
   div#designProduct div.footerdesignProductmm div.section2 div.btnheaderimgpro{
      position: absolute;
      top: 0px !important;
      display: flex;
      justify-content: center;
      
   }
   div.designProduct div.footerdesignProductmm.zooming{
   position: fixed !important;
   bottom: 0px;
   }

   div#root{
      max-width: 100%;
   }

   /* .menures {
      position: absolute;
      z-index: 2;
      width: 55%;
      left: 0;
   } */

   .menubaricon {
      z-index: 3;
      position: absolute;
      left: 0;
      top: 5%;
   }

   div[name="mainmenu"] {
      height: auto !important;
   }

   .div[name="mainmenu"] .k-expander {
      width: 100% !important;
   }

   .k-expander-indicator {
      position: absolute;
      right: 5%;
   }

   #waste {
      display: none;
   }

   #searchbar {
      width: 80%;
   }

   #infobar {
      justify-content: end !important;
   }

   .headerres {
      flex-direction: column-reverse;
      justify-content: center;
      align-items: end !important;
      margin-bottom: 2%;
   }

}

div#insertproduct div.bottom.row div.left span.k-column-title {
   color: white !important;
}

/* .checkedtblmyproduct:checked{
   background-color: #0578d6;
} */

.checkboxpro input[type="checkbox"] {
   width: 20px !important;
   height: 20px !important;
}

.k-checkbox:checked,
.k-checkbox.k-checked {
   border-color: #ff6358 !important;
   color: white !important;
   background-color: #ff6358 !important;
}

div.insertproduct_editor div.k-toolbar {
   background-color: white;
}

.deletecolor{
	display:none
}
.deletecolor:hover{
	width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    background: #2424248a;
    border-radius: 3px;
	opacity: 1 !important;
    color: #fff;
	cursor:pointer

}
.k-listview{
   height: 100% !important;
}
.modaldropdownmypro  span.k-dropdownlist{
   height: 100%;
}
.btnmodalwindow{
   padding: 10px 20px;
   border-radius: 3px;
   background-color: rgb(0, 165, 99);
   color: #fff;
   border: 1px solid rgb(0, 165, 99) !important;
}
.btnmodalwindow{
   padding: 10px 20px;
    border-radius: 3px;
    background-color: rgb(2, 87, 53);
    color: #fff;
    border: 1px solid rgb(2, 87, 53) !important;
}
.brandname .k-dropdownlist{
   height: 100%;
    background: white;
}
div#insertproduct span.k-chip-actions{
   display: none;
}
div#insertproduct div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   background: transparent;
   border: 0px;
   font-size: 1rem;
}
div#insertproduct span.k-clear-value{
   display: none;
}
div#insertproduct input[type="radio"]:checked{
   /* background:#ff6358 !important; */
   /* background-color: unset !important; */
   
}
div#insertproduct input[type="radio"]{
   width: unset !important;
   background: unset;
}
.k-radio:checked, .k-radio.k-checked{
   background-color: #ff6358 !important;
}
div#insertproduct div.dropdownlis{
   height: 100%;
}
div.colorpalet div.k-colorgradient{
   width: 100% !important;
}
div#insertproduct  div.k-grid-content table tr{
   height: 34px !important;
}
div#insertproduct div.insertprice_grid input{
   font-size: .9vw;
   color: black !important;
   cursor: pointer;
}
div#insertproduct div.insertprice_grid input:focus-visible{
   outline: unset !important;
}

div#insertproduct div.insertprice_grid table tbody tr:nth-of-type(even) td div{
   background: #e3ebff !important;
}

div#insertproduct input.nameproducts:focus-visible {
     outline: unset !important;
}

div#insertproduct input#stock {
   border: 1px solid rgb(204, 204, 204);
   font-size: .9vw;
   background: white !important;
   height: 34px;
}
div.brandname .k-dropdownlist.k-picker{
   height: 100% !important;
   width: 100% !important;
}
div.insertproductdropdown span.k-treeview-leaf-text{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div#insertproduct  span.k-chip-label{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div.insertproductdropdown  div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   height: 100%;
}
div.insertproductbranddropdown span.k-list-item-text{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div.brandname  span.k-input-value-text{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div#insertproduct   span.k-checkbox-wrap{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div#insertproduct  div.radiodiv{
   font-size: .8vw;
   font-family:sarabun_bolditalic; 
}
div.insertproduct_editor span.k-dropdownlist.k-picker{
   width: unset !important;
}
div#insertproduct div.insertproduct_editor{
   flex: 16.5;
}
div#insertproduct div.insertproduct_editor div.k-editor{
   height: 224px;
}

div#insertproduct .k-editor-content {

   overflow-y: hidden !important;
}
div.insertprice_grid{
   max-height: 160px !important;
}

div#insertproduct  div.insertproduct_grid{
   width: 70.7% !important;
   margin-top: 30px !important;
   /* display: none; */
}

div#insertproduct  div.insertproduct_grid th.insertproduct_header{
   background-color: #252525;
}

div#insertproduct  div.insertproduct_grid tbody tr:nth-child(odd) td{
   background-color: white !important;
}
div#insertproduct  div.insertproduct_grid tbody tr:nth-child(even) td{
   background-color: #bdd0fe !important
}
div#insertproduct  div.insertproduct_grid tbody tr:nth-child(odd) td .k-input.k-numerictextbox{
   background-color: white !important;
}
div#insertproduct  div.insertproduct_grid tbody tr:nth-child(odd) td .k-input.k-numerictextbox input{
   background-color: white !important;
}

div#insertproduct div.insertproduct_grid tbody tr td span{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#insertproduct div.insertproduct_grid tbody tr td input{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#editproduct  tbody tr td span{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#insertproduct div.insertproduct_grid tbody tr td input{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}

div.tblmypro div.k-grid-content tr td div{
   /* background: white !important; */
}
div.tblmypro div.k-grid-content tr td{
   background: white !important;
}

div.insertproductdropdown .k-popup.k-multiselecttree-popup{
   height: 400px !important;
}
div#insertproduct span.k-multiselecttree div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   background-color: #ccc !important;
   height: 25px;
}
div#insertproduct  div.insertproduct_grid span.k-dropdownlist{
   height: 100% !important;
   width: 100% !important;
}
div#insertproduct  div.insertproduct_grid .k-input-value-text{
   text-align: center;
}
div.insertproduct_gridcombo li.k-list-item span.k-list-item-text{
   font-family: sarabun_bolditalic;
}

div.colorwindow div.k-colorgradient-inputs.k-hstack{
   height: 30px;
}
div.colorwindow  div.k-vstack{
   flex-direction: row !important;
}
div.colorwindow  div.k-vstack span.k-hex-value{
   flex:1;
}
div.colorwindow  div.k-vstack .k-label.k-colorgradient-input-label{
   flex:1;
   display: flex;
   align-items: center;
}
div.colorwindow  div.k-vstack:nth-child(1){
   display: none;
}
div#designProduct div#productdescription{
   overflow-y: scroll;
   max-height: 300px;
   scrollbar-width: none;
   background: #f2fcfc;
}
div#designProduct div#productdescription p{
   text-align: justify;
}

div.insertprice_grid div.k-grid-header tr {
   height: 30px !important;
}
div.insertprice_grid  .k-grid .k-grid-header .k-table-th{
   vertical-align: unset !important;
}
div#insertproduct  div.rightdiv span.fontcombo {

    width: 100% !important;
    height: 35px !important;
    overflow-wrap: anywhere;
}
div.usertypecombo .k-list-item.k-selected, .k-selected.k-list-optionlabel{
   background-color: whitet !important;
   background: white !important;
   color: #111111 !important;
} 
div#insertproduct  div.rightdiv span.fontcombo div{

   flex: 1;
   display: flex;
   align-items: center;
}
div.fontypecombo span.k-input-prefix{
   display: none;
}

div#EditFont span.fontcombo{

   width: 100% !important;
   height: 35px !important;
   overflow-wrap: anywhere;
}

div#EditFont span.fontcombo div {
   flex: 1;
   display: flex;
   align-items: center;
}

div#EditFont  input{
   border: 1px solid #d4d2d2;
   border-radius: 3px;
   padding: 0 5px;
   height: 40px;
   font-size: .9vw;
   text-align: center;
   font-family: sarabun_bolditalic !important;
}

div.k-window.addimage  div.k-listview-content{
   display: flex;
   overflow: scroll;
   /* flex-wrap: wrap; */
} 
div#EditImage div.k-listview-content{
   display: flex;
   flex-wrap: wrap;
}
div#EditImage div.k-listview{
   width: 63%;
   background: white;
}
div#EditImage input {
   border: 1px solid #d4d2d2;
   border-radius: 3px;
   padding: 0 5px;
   height: 40px;
   font-size: .9vw;
   text-align: center;
   font-family: sarabun_bolditalic !important;
}
div.k-window.shopifysettings span.k-window-title{
   padding-block:0px !important
}
div.k-window.shopifysettings div.k-editor{
   border: 1px solid #a39f9f;
   border-radius: 2px;
   width: 100%;
}
div.k-window.shopifysettings .k-dropdownlist.k-picker{
   width: 15% !important;
   height: 30px !important;
}
div.k-window.shopifysettings{
   height: 70vh !important;
}
div.etsycategorysettings div.modaldropdownmypro span.k-dropdownlist.k-picker{
   width: 100% !important;
   height:35px !important
}
div.etsycategorysettings div.modaldropdownmypro .k-input-value-text{
   font-family: segoe;
}
div.etsycategorysettings  div.k-editor .k-dropdownlist.k-picker{
   width: 13% !important;
   height: 30px !important;
}
div.etsycategorysettings  div.k-editor .k-dropdownlist.k-picker span.k-input-value-text{
   font-size: 11px;
   font-family: segoe;
}
div.etsycategorysettings div.k-editor{
   border:1px solid black
}
div.etsycategorysettings .k-editor-toolbar{
   border-bottom: 1px solid bottom;
}
div.etsycategorysettings .k-window-title{
   padding-block:0px
}
div.shopifysettings div.k-editor .k-dropdownlist.k-picker span.k-input-value-text {
   font-size: 11px;
   font-family: segoe;
}
div.shopifysettings.shopymyproduct{
   width: 69% !important;
}
div.editprice_grid{
   max-height: unset !important;
}
div.tblmypro span.Etsy div{
   background:#000000;
   height: 100%;
   border-radius:14px;
   display: flex;
   align-items: center;
}

.k-numerictextbox input.k-input-inner{
   height: 34px;
   border: 1px solid #ccc !important;
}

div#insertproduct .multiselecttree .k-input-values,
div#insertproduct .multiselecttree .k-input-inner{
   border:1px solid #ccc !important
}
.palettediv .k-listview-content .item{
   flex-direction: row !important;
   width: 180px !important;
}
.palettediv{
   height: 200px !important;
}
.palettediv .k-listview-content .item{
   height: 50px !important;
}
.palettediv .k-listview-content .item span{
   border-radius: 5px !important;
   width: 70px !important;
   height: 35px !important;
   margin-right: 10px;

}
.palettediv .k-listview-content .item input{
   margin: 0 !important;
}
.palettediv .k-listview-content .item div{
   width: 20% !important;
   margin: 0 !important;
}
.palettediv .k-listview-content .item div svg{
  width: 20px;
  height: 20px;
}
#insertproduct .k-editor{
   min-height: 95% !important;
}

.k-input-values{
   border: 1px solid #cccccc;
}

.fontdiv .k-dropdownlist div{
   width: 90%;
}
/* ============================================================
   Insert Product (/urun) — modern layout, dark-theme ready
   Accent: #ff8306 (matches dashboard / layout-modern)
   ============================================================ */

.insert-product-page {
  --ip-bg: var(--dash-bg, #f1f3f8);
  --ip-panel: var(--dash-card, #ffffff);
  --ip-border: var(--dash-border, #e8eaf0);
  --ip-text: var(--dash-text-primary, #111827);
  --ip-text-muted: var(--dash-text-secondary, #6b7280);
  --ip-accent: var(--nav-primary, #ff8306);
  --ip-accent-hover: var(--nav-primary-hover, #e07000);
  --ip-accent-soft: var(--dash-accent-light, rgba(255, 131, 6, 0.12));
  --ip-input-bg: #ffffff;
  --ip-input-border: #d1d5db;
  --ip-input-text: #111827;
  --ip-input-placeholder: #9ca3af;
  --ip-shadow: var(--dash-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  --ip-radius: 12px;
  --ip-radius-sm: 8px;
  min-height: 100vh;
  background: var(--ip-bg);
  color: var(--ip-text);
}

[data-theme="dark"] .insert-product-page {
  --ip-bg: #0f1117;
  --ip-panel: #1a1d27;
  --ip-border: #2a2d3a;
  --ip-text: #f0f1f5;
  --ip-text-muted: #8b8fa8;
  --ip-accent-soft: rgba(255, 131, 6, 0.14);
  --ip-input-bg: #222632;
  --ip-input-border: #3a3f52;
  --ip-input-text: #f0f1f5;
  --ip-input-placeholder: #6b7280;
  --ip-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.insert-product-page .insert-product-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.insert-product-page .insert-product-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
}

.insert-product-page .insert-product-inner {
  max-width: 1180px;
  margin: 0 auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Page header ---- */
.insert-product-page .ip-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--ip-panel);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow);
}

.insert-product-page .ip-page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.insert-product-page .ip-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--ip-border);
  background: var(--ip-input-bg);
  color: var(--ip-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.insert-product-page .ip-back-btn:hover {
  color: var(--ip-accent);
  border-color: var(--ip-accent);
  background: var(--ip-accent-soft);
}

.insert-product-page .ip-page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ip-text);
  letter-spacing: -0.02em;
}

.insert-product-page .ip-page-subtitle {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--ip-text-muted);
}

.insert-product-page .ip-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ip-accent) 0%, #ff9a3c 100%);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 131, 6, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.insert-product-page .ip-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 131, 6, 0.45);
}

/* ---- Cards & layout ---- */
.insert-product-page .ip-card {
  background: var(--ip-panel);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  padding: 20px;
  box-shadow: var(--ip-shadow);
}

.insert-product-page .ip-card + .ip-card,
.insert-product-page .ip-grid-gap > .ip-card {
  margin-top: 0;
}

.insert-product-page .ip-grid-2 {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  margin-bottom: 20px;
}

.insert-product-page .ip-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.insert-product-page .ip-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.insert-product-page .ip-divider {
  border: none;
  border-top: 1px solid var(--ip-border);
  margin: 18px 0;
}

.insert-product-page .ip-section-title {
  display: block;
  margin: 0 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ip-text);
}

.insert-product-page .ip-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* ---- Form fields ---- */
.insert-product-page .ip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.insert-product-page .ip-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ip-text-muted);
  letter-spacing: 0.01em;
}

.insert-product-page .ip-input,
.insert-product-page #insertproduct .ip-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ip-input-border);
  border-radius: var(--ip-radius-sm);
  background: var(--ip-input-bg);
  color: var(--ip-input-text);
  font-size: 0.9375rem;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.insert-product-page .ip-input:focus,
.insert-product-page #insertproduct .ip-input:focus {
  outline: none;
  border-color: var(--ip-accent);
  box-shadow: 0 0 0 3px var(--ip-accent-soft);
}

.insert-product-page .ip-combo {
  min-height: 40px;
  border: 1px solid var(--ip-input-border);
  border-radius: var(--ip-radius-sm);
  background: var(--ip-input-bg);
  overflow: hidden;
}

.insert-product-page .ip-combo .k-input-values,
.insert-product-page .ip-combo .k-input-inner,
.insert-product-page .ip-combo .k-dropdownlist,
.insert-product-page .ip-combo .k-picker {
  border: none !important;
  background: transparent !important;
  color: var(--ip-input-text) !important;
  min-height: 38px;
}

.insert-product-page .ip-combo .k-input-value-text,
.insert-product-page .ip-combo .k-chip-label {
  color: var(--ip-input-text) !important;
  font-size: 0.875rem !important;
}

/* ---- Tag checkboxes ---- */
.insert-product-page .ip-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.insert-product-page .ip-tag-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--ip-border);
  background: var(--ip-input-bg);
  color: var(--ip-text);
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
}

.insert-product-page .ip-tag-option .k-checkbox-wrap {
  font-size: inherit !important;
}

/* ---- Radio group ---- */
.insert-product-page .ip-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
}

.insert-product-page .ip-radio-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ip-text);
  font-size: 0.875rem;
  cursor: pointer;
}

.insert-product-page .ip-code-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--ip-radius-sm);
  background: var(--ip-accent-soft);
  border: 1px solid rgba(255, 131, 6, 0.35);
  color: var(--ip-text);
  font-size: 0.875rem;
}

.insert-product-page .ip-code-badge strong {
  color: var(--ip-accent);
  font-weight: 700;
}

/* ---- Switch row ---- */
.insert-product-page .ip-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--ip-radius-sm);
  border: 1px solid var(--ip-border);
  background: var(--ip-input-bg);
  max-width: 420px;
}

.insert-product-page .ip-switch-hint {
  font-size: 0.8125rem;
  color: var(--ip-text-muted);
  line-height: 1.4;
}

/* ---- Image panel ---- */
.insert-product-page .ip-image-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.insert-product-page .ip-image-zone {
  width: 200px;
  min-height: 200px;
  border: 2px dashed var(--ip-border);
  border-radius: var(--ip-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--ip-input-bg);
  transition: border-color 0.15s, background 0.15s;
}

.insert-product-page .ip-image-zone:hover {
  border-color: var(--ip-accent);
  background: var(--ip-accent-soft);
}

.insert-product-page .ip-image-zone img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.insert-product-page .ip-btn-secondary {
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  background: var(--ip-input-bg);
  color: var(--ip-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.insert-product-page .ip-btn-secondary:hover {
  border-color: var(--ip-accent);
  color: var(--ip-accent);
}

/* ---- Color palette ---- */
.insert-product-page .ip-palette-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--ip-border);
  background: var(--ip-input-bg);
  color: var(--ip-accent);
  cursor: pointer;
}

.insert-product-page .ip-palette-btn:hover {
  background: var(--ip-accent-soft);
  border-color: var(--ip-accent);
}

.insert-product-page .palettediv {
  background: var(--ip-input-bg) !important;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm) !important;
  max-height: 160px !important;
  height: auto !important;
}

.insert-product-page .ip-color-chip.item {
  flex-direction: row !important;
  width: auto !important;
  min-width: 140px !important;
  height: auto !important;
  padding: 8px 10px !important;
  margin: 4px !important;
  border: 1px solid var(--ip-border) !important;
  border-radius: var(--ip-radius-sm) !important;
  background: var(--ip-panel) !important;
}

.insert-product-page .ip-color-swatch {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.insert-product-page .ip-color-name-input {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid var(--ip-input-border) !important;
  border-radius: 6px !important;
  background: var(--ip-input-bg) !important;
  color: var(--ip-input-text) !important;
  font-size: 0.8125rem !important;
  text-align: left !important;
}

/* ---- Kendo: dropdowns, numeric, editor ---- */
.insert-product-page #insertproduct .k-dropdownlist,
.insert-product-page #insertproduct .k-picker-solid,
.insert-product-page #insertproduct .k-numerictextbox {
  width: 100%;
  border: 1px solid var(--ip-input-border) !important;
  border-radius: var(--ip-radius-sm) !important;
  background: var(--ip-input-bg) !important;
  color: var(--ip-input-text) !important;
}

.insert-product-page #insertproduct .k-numerictextbox .k-input-inner,
.insert-product-page #insertproduct .k-numerictextbox input {
  background: transparent !important;
  color: var(--ip-input-text) !important;
  border: none !important;
  height: 38px !important;
  font-size: 0.9375rem !important;
}

.insert-product-page #insertproduct .fontcombo {
  width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--ip-input-border) !important;
  border-radius: var(--ip-radius-sm) !important;
  background: var(--ip-input-bg) !important;
}

.insert-product-page #insertproduct .fontcombo input {
  background: transparent !important;
  color: var(--ip-input-text) !important;
  font-size: 0.8125rem !important;
  border: none !important;
}

.insert-product-page #insertproduct .k-editor {
  border: 1px solid var(--ip-input-border) !important;
  border-radius: var(--ip-radius-sm) !important;
  overflow: hidden;
  min-height: 180px !important;
  background: var(--ip-input-bg) !important;
}

.insert-product-page #insertproduct .k-editor-toolbar {
  background: var(--ip-panel) !important;
  border-bottom: 1px solid var(--ip-border) !important;
}

.insert-product-page #insertproduct .k-editor-content,
.insert-product-page #insertproduct .k-editor-content iframe {
  background: var(--ip-input-bg) !important;
  color: var(--ip-input-text) !important;
}

.insert-product-page #insertproduct .k-editor .k-button {
  color: var(--ip-text) !important;
}

[data-theme="dark"] .insert-product-page #insertproduct .k-editor .k-button {
  border-color: var(--ip-border) !important;
}

/* ---- Grids ---- */
.insert-product-page #insertproduct .insertprice_grid,
.insert-product-page #insertproduct .insertproduct_grid {
  width: 100% !important;
  margin-top: 0 !important;
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius-sm);
  overflow: hidden;
}

.insert-product-page #insertproduct th.insertproduct_header,
.insert-product-page #insertproduct .insertprice_grid .k-grid-header,
.insert-product-page #insertproduct .insertproduct_grid .k-grid-header {
  background: linear-gradient(135deg, #ff8306 0%, #ff9a3c 100%) !important;
}

.insert-product-page #insertproduct .insertproduct_grid tbody tr:nth-child(odd) td,
.insert-product-page #insertproduct .insertproduct_grid tbody tr:nth-child(even) td {
  background: var(--ip-input-bg) !important;
  color: var(--ip-text) !important;
  border-color: var(--ip-border) !important;
}

.insert-product-page #insertproduct .insertproduct_grid tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ip-input-bg) 88%, var(--ip-accent) 12%) !important;
}

.insert-product-page #insertproduct .insertprice_grid tbody tr td,
.insert-product-page #insertproduct .insertproduct_grid tbody tr td {
  color: var(--ip-text) !important;
}

.insert-product-page #insertproduct .insertprice_grid input,
.insert-product-page #insertproduct .insertproduct_grid input {
  background: var(--ip-input-bg) !important;
  color: var(--ip-input-text) !important;
  border: 1px solid var(--ip-input-border) !important;
  border-radius: 4px !important;
  font-size: 0.875rem !important;
}

.insert-product-page #insertproduct .insertprice_grid tbody tr:nth-of-type(even) td div {
  background: transparent !important;
}

.insert-product-page #insertproduct .k-pager {
  background: var(--ip-panel) !important;
  color: var(--ip-text-muted) !important;
  border-top: 1px solid var(--ip-border);
}

.insert-product-page #insertproduct .k-pager-sizes,
.insert-product-page #insertproduct .k-pager-info {
  color: var(--ip-accent) !important;
}

/* ---- Checkbox / radio Kendo ---- */
.insert-product-page #insertproduct .k-checkbox:checked,
.insert-product-page #insertproduct .k-checkbox.k-checked {
  border-color: var(--ip-accent) !important;
  background-color: var(--ip-accent) !important;
}

.insert-product-page #insertproduct .k-radio:checked,
.insert-product-page #insertproduct .k-radio.k-checked {
  background-color: var(--ip-accent) !important;
  border-color: var(--ip-accent) !important;
}

/* ---- Popups (dropdown lists) ---- */
.insertproductdropdown,
.insertproductbranddropdown,
.fontypecombo {
  background: var(--ip-panel, #fff) !important;
  border: 1px solid var(--ip-border, #e8eaf0) !important;
  color: var(--ip-text, #111) !important;
}

[data-theme="dark"] .insertproductdropdown,
[data-theme="dark"] .insertproductbranddropdown,
[data-theme="dark"] .fontypecombo {
  --ip-panel: #1a1d27;
  --ip-border: #2a2d3a;
  --ip-text: #f0f1f5;
}

.insertproductdropdown .k-list-item-text,
.insertproductbranddropdown .k-list-item-text {
  color: var(--ip-text, #111) !important;
  font-size: 0.875rem !important;
}

.insertproductdropdown .k-list-item.k-selected,
.insertproductbranddropdown .k-list-item.k-selected {
  background-color: var(--ip-accent, #ff8306) !important;
  color: #fff !important;
}

/* ---- Attributes section ---- */
.insert-product-page .ip-attributes-card {
  margin-top: 20px;
}

.insert-product-page .ip-attributes-card h5 {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ip-text);
}

.insert-product-page #insertproduct div.insertproduct_grid {
  width: 100% !important;
  margin-top: 0 !important;
}

.insert-product-page #insertproduct input,
.insert-product-page #insertproduct .k-input-inner {
  font-size: 0.9375rem !important;
  font-family: Inter, system-ui, sans-serif !important;
}

.insert-product-page #insertproduct span.k-input-value-text {
  font-size: 0.875rem !important;
  font-family: Inter, system-ui, sans-serif !important;
}

.insert-product-page .navbar-modern,
.insert-product-page #header {
  background: var(--nav-bg, var(--ip-panel)) !important;
  border-bottom: 1px solid var(--ip-border);
}

.insert-product-page .insert-product-main {
  background: var(--ip-bg);
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
  .insert-product-page .ip-grid-2,
  .insert-product-page .ip-grid-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .insert-product-page > .menures {
    display: none !important;
  }

  .insert-product-page .insert-product-content {
    padding: 12px 14px 32px;
  }

  .insert-product-page .ip-page-header {
    flex-wrap: wrap;
  }

  .insert-product-page .ip-save-btn {
    width: 100%;
    justify-content: center;
  }
}



div.color div.picture{
    width: 100%;
    height: 22vh;
    margin-right: 10px;
    background-size: cover;
    background-image: url(/assets/images/mock.62673ec4d2567bb040d2.png);
    flex: 1;
}
.colorwindow .k-window-titlebar{
    background-color: #0b0b0b;
}

div#color .k-listview-content{
    display: flex;
    flex-wrap: wrap;
}
div#color span{
    color: #ff8731;
}

div#color  input{
    border: 1px solid #d4d2d2;
    border-radius: 3px;
    background: black;
    padding: 0 5px;
    height: 40px;
    color: white;
    font-size: .9vw;
    text-align: center;
    font-family: sarabun_bolditalic !important;
}

div.colorwindow div.colorpalet{
   flex: 1;
}

.k-colorgradient:focus, .k-colorgradient.k-focus{
   box-shadow:unset !important;
}




   

@media only screen and (min-width : 820px) and (max-width:912px) {
    
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.color  > :first-child{
      display: none !important;
      width: 92px;
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
 
  
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left  div:nth-child(1){
        flex-direction: column;
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         /* height: unset !important; */
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }

      div#color div.combo{
        height: 25px;
      }
      div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
      div[name="mainmenu"] span{
         font-size: 12px;
      }
      div[name="mainmenu"] div.k-expander-sub-title
      {
         font-size: 12px
      }
      div[name="mainmenu"] .k-expander-title svg{
         margin-left: 0px !important;
         margin-right: 0px !important;
      }
}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: .5;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: .5;
       
    }
    div.color  #header div#infobar div.message:nth-child(3){
      
      flex: 2;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div.topsection{
         width: 100% !important;
         flex-direction: column;
       }
       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         /* height: unset !important; */
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div#color div.combo{
        height: 25px;
      }
      div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
   
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div.topsection{
         width: 100% !important;
         flex-direction: column;
       }
       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div#color div.combo{
        height: 25px;
      }
      div.category:focus-visible{
        outline:unset !important
     }
     div#color div.combo{
       height: 25px !important;
     }
     div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div.topsection{
         width: 100% !important;
         flex-direction: column;
       }
       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div#color div.combo{
        height: 25px;
      }
      div.category:focus-visible{
        outline:unset !important
     }
     div#color div.combo{
       height: 25px !important;
     }
     div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div.colorlist{
        width: 100% !important;
      }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
  div.color  > :first-child{
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
  div.color  > :first-child{
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {

}





@media only screen and (min-width : 200px) and (orientation:portrait) {

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (orientation:portrait) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {
 

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {

}


/* jjjjjj/jjj */

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
  div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.colorlist{
    width: 100% !important;
  }
   
}


@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: .5;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: .5;
       
    }
    div.color  #header div#infobar div.message:nth-child(3){
      
      flex: 1.2;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         /* flex-direction: column; */
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#color div.bottom div.left span{
            font-size: 12px !important;
       }
       div#color div.bottom div.right{
         width: 100% !important;
    }
       div#color div.bottom div.right span{
         font-size: 12px !important;
    }
    div#color div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#color div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#color div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#color div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#color){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#color button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }   
      div.category:focus-visible{
         outline:unset !important
      }
      div#color div.combo{
        height: 25px !important;
      }
      div#color span.title1{
        font-size: 12px !important;
      }
      div#color span.title2{
        font-size: 12px !important;
      }
      div#color div.bottom div.left div.topsection{
        width: 100% !important;
        flex-direction: column;
      }
      div.colorlist{
        width: 100% !important;
      }
}


@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
   div.color  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.insertproduct_header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      flex: 1;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: .5;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: .5;
       
    }
    div.color  #header div#infobar div.message:nth-child(3){
      
      flex: 1.2;
       
    }
    div.color  .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }

   div#color div.bottom div.left div{
         flex-direction: column;
       }
       div#color div.bottom{
         flex-direction: column;
       }

       div#color div.bottom div.left{
         width: 100% !important;
         flex-direction: column;
       }

       div#color div.bottom div.left div:nth-child(1){
        width: 100% !important;
      }
       div#color div.bottom div.left div:nth-child(2){
         width: 100% !important;
       }
       div#color div.bottom div.left div:nth-child(3){
        width: 100% !important;
      }
       div#insertproduct div.bottom div.left span{
            font-size: 12px !important;
       }
       div#insertproduct div.bottom div.right{
         width: 100% !important;
    }
       div#insertproduct div.bottom div.right span{
         font-size: 12px !important;
    }
    div#insertproduct div.bottom div.right > :first-child{
      width: 100% !important;
 }
 div#insertproduct div.bottom div.left div.category{
   padding-left: 0px !important;
}
div#insertproduct div.bottom div.left div.category div.combo{
   margin-right: 0px !important;
}
div#insertproduct div.bottom div.left div.category >:first-child{
         padding-left: 0px !important;
      }
      div.insertproductdropdown li{
         font-size: 12px !important;
      }
      div:has(div#insertproduct){
         height: unset !important;
      }
      div.colorpalet div.k-colorgradient{
         width: 152px !important;
      }
      div#insertproduct button.register{
         font-size: 12px !important;
      }
      div#header{
         margin-bottom: 7px;
      }
      div.color{
         justify-content: center;
         width: 100% !important;
      }
      div.category:focus-visible{
         outline:unset !important
      }
      div#color div.combo{
        height: 25px !important;
      }
      div.colorlist{
        width: 100% !important;
      }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
  div.color  > :first-child{
      display: none !important;
      
   }
   div.color  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.color  div.k-grid-content td{
      width: 30px !important;
   }
   div.color  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.color  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.header{
      width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.color  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.color  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.color  #header div#infobar{
      
      width: 90%;
      
   }
   div.color  #header div#infobar div.message:nth-child(1){
      
     flex: 1;
      
   }
   div.color  #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
    div.color   #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
   
}

@media only screen and   (min-width : 1280px) and  (orientation:landscape){
   div.color{
      justify-content: center;
      width: 100% !important;
   }
   
}

span.rli-d-i-b.atom-rli-bounding-box{
    text-align: center;
}
/* =============== General Scoping and Page Background =============== */
.insertProduct { /* Outermost container for the NewOrder component */
   background-color: #f0f0fa;
   color: #212529; /* Default black text */
 }
 
 .insertProduct > .d-flex.flex-column.w-100 { /* Main content column after sidebar */
   background-color: #f0f0fa;
   padding: 0;
   box-sizing: border-box;
   overflow-x: hidden;
 }
 
 /* Area holding the main content card, below header and back button */
 .insertProduct .d-flex.flex-column.mb-4.w-100 > div[style*="padding: 10px"] {
   padding: 20px !important; /* Main padding for the content area */
   min-height: calc(100vh - 70px); /* Assuming header is approx 70px */
   height: auto !important; /* Allow to grow with content, prevent double scroll */
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center; /* Center content like steps and cards */
 }
 
 /* =============== Header (Remains Unchanged by Request) =============== */
 .insertProduct #header {
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
   position: sticky;
   top: 0;
   z-index: 1050;
   background: white !important;
 }
 
 /* =============== Back Button & Page Title =============== */
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] { /* Back button container */
   padding: 15px 2% 10px 2% !important; /* Use percentages for responsiveness */
   width: 100%;
   max-width: 1200px; /* Max width for content consistency */
   margin: 0 auto;
   box-sizing: border-box;
 }
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] svg {
   color: #757575; /* Grey icon */
   margin-right: 8px;
   font-size: 1.2rem;
 }
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] span {
   color: #212529; /* Black text */
   font-weight: 500;
 }
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] > div:hover svg,
 .insertProduct div[style*="padding: 5px 20px 5px 55px"] > div:hover span {
     color: #ff8306;
 }
 
 
 .insertProduct div[style*="padding: 5px 55px"] { /* Create Order title container */
   padding: 10px 2% 20px 2% !important;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   box-sizing: border-box;
 }
 .insertProduct div[style*="padding: 5px 55px"] span {
   font-size: 1.8rem !important; /* Larger title */
   font-weight: bold !important;
   color: #212529;
 }
 
 /* =============== Step Indicator =============== */
 .insertProduct .levelneworder {
   width: 100% !important; /* Full width for responsiveness */
   max-width: 700px; /* Max width for the stepper */
   margin-bottom: 20px;
   padding: 10px 0 !important; /* Adjust padding */
 }
 .insertProduct .levelneworder span[style*="border-radius: 50%"] { /* Step circles */
   border-width: 2px !important; /* Thicker border for current/done steps */
   font-weight: bold;
   transition: background-color 0.3s,
    color 0.3s, border-color 0.3s;
    background: #dfdfdf;
 }
 .insertProduct .levelneworder span[style*="background: rgb(23, 38, 43)"] { /* Done step (dark circle with check) */
   background-color: #ff8306 !important; /* Organizational color for completed steps */
   border-color: #ff8306 !important;
 }
 .insertProduct .levelneworder span[style*="background: rgb(23, 38, 43)"] > .line1,
 .insertProduct .levelneworder span[style*="background: rgb(23, 38, 43)"] > .line2{
   border-top: 2px solid #ff8306 !important;
 }
 .insertProduct .levelneworder span[style*="border: 1px solid"] { /* Current step */
   border-color: #ff8306 !important;
   color: #ff8306 !important;
   background: #ffe5968c;
 }
 .insertProduct .levelneworder span[style*="color: rgb(204, 204, 204)"] { /* Future step (greyed out) */
   color: #adb5bd !important;
   /* border: 2px solid #dee2e6 !important; */
 }
 .insertProduct .levelneworder hr {
   border-top: 2px solid #dee2e6; /* Lighter hr */
 }
 .insertProduct .levelneworder > span[style*="width: 10%"] { /* Step labels (Products, Shipping, etc.) */
     color: #6c757d !important; /* Default grey for labels */
     font-size: 0.9rem;
     text-align: center;
 }
 .insertProduct .levelneworder > span[style*="color: rgb(0, 0, 0)"], /* Active label */
 .insertProduct .levelneworder > span[style*="color: #000"] {
     color: #ff8306 !important; /* Orange for active label */
     font-weight: bold;
 }
 
 
 /* =============== Main Content Sections (Products, Shipping, Submit) - General Card Style =============== */
 .insertProduct #products,
 .insertProduct #shopping, /* This ID seems to be for the shipping step form */
 .insertProduct #submitorder {
   width: 100% !important;
   max-width: 1000px; /* Max width for content sections */
   margin: 0 auto; /* Center the content sections */
   padding: 20px;
   background-color: #ffffff;
   border-radius: 12px;
   box-shadow: 0 6px 15px rgba(0,0,0,0.07);
   margin-bottom: 25px;
 }
 .insertProduct #submitorder { /* Special case for submit order to align two columns */
     display: flex !important;
     flex-wrap: wrap; /* Allow wrapping on small screens */
     justify-content: space-between;
     background-color: transparent !important; /* Transparent, as children are cards */
     box-shadow: none;
     padding: 0;
 }
 
 /* Specifics for "Add product to order" button area */
 .insertProduct .addproducttoorder {
   width: 100% !important; /* Was 65% */
   max-width: 1000px; /* Consistent max width */
   margin-left: auto;
   margin-right: auto;
   background-color: #fff8f0 !important; /* Light orange accent */
   border: 1px dashed #ff8306 !important;
   color: #ff8306 !important;
   transition: background-color 0.3s, border-color 0.3s;
 }
 .insertProduct .addproducttoorder:hover {
     background-color: #ffeccf !important;
     border-color: #e07305 !important;
 }
 .insertProduct .addproducttoorder svg {
     color: #ff8306 !important;
 }
 .insertProduct .addproducttoorder span {
     color: #ff8306 !important;
     font-weight: bold !important;
 }
 
 /* List of ordered items container */
 .insertProduct div.cardneworder:has(div[style*="border-top: 1px solid #ccc"]) { /* Targets the order list card */
   width: 100% !important; /* Was 65% */
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   padding: 15px !important;
   border-radius: 12px !important;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
 }
 
 /* Individual Order Item in GenerateOrderList */
 .insertProduct div[style*="border-top: 1px solid #ccc"] > div[style*="width: 100%"] { /* Each item */
     padding: 15px 0 !important; /* Vertical padding */
 }
 .insertProduct div[style*="padding: 1% 10px"] { /* Image and details flex container */
     padding: 10px !important;
 }
 .insertProduct div[style*="background: rgb(221, 221, 221)"] { /* Image BG */
     background-color: transparent !important;
     border-radius: 8px !important;
     width: 170px !important; /* Fixed size for consistency */
     height: 100px !important;
 }
 .insertProduct div[style*="margin-left: 30px"] span { /* Text details next to image */
     color: #212529 !important; /* Black text */
 }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(45"], /* Brand name */
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(245"], /* Product name */
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(175"] { /* Product code */
     font-weight: 600 !important;
     font-size: 0.9rem;
 }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(45"] { color: #202020 !important; }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(245"] { color: #202020 !important; }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(175"] { color: #202020 !important; }
 .insertProduct div[style*="margin-left: 30px"] span[style*="rgb(175"] 
 { 
  border: 1px solid #202020;
  border-radius: 3px;
  padding: 5px;
  margin-top: 5px;
  position: relative;
  top: 5px;
 }
 
 .insertProduct span.svgneworder svg { /* Copy/Delete icons */
     color: #757575 !important; /* Grey icons */
     transition: color 0.2s;
 }
 .insertProduct span.svgneworder svg:hover {
     color: #ff8306 !important;
 }
 
 /* Color/Size dropdowns and Quantity input */
 .insertProduct .comboneworder {
     width: 100% !important; /* Was 65% */
     padding: 15px 0px !important;
     flex-wrap: wrap; /* Allow wrapping */
 }
 .insertProduct .comboneworder > div[style*="width: 30%"] { /* Color/Size dropdown containers */
     width: calc(50% - 10px) !important; /* Two per row on larger screens */
     margin-bottom: 15px;
 }
 .insertProduct .comboneworder select {
     border: 1px solid #ced4da !important;
     background-color: #f8f9fa !important; /* Field color */
     color: #212529; /* Black text */
     border-radius: 6px !important;
     height: 45px !important;
 }
 .insertProduct .comboneworder span[style*="color: rgb(89"] { /* Labels for Color/Size */
     color: #212529 !important;
     font-weight: 500;
 }
 .insertProduct input[id*="qty"] { /* Quantity input */
     border: 1px solid #ced4da;
     background-color: #f8f9fa;
     border-radius: 6px;
     color: #212529;
     text-align: center;
     height: 35px !important;
     width: 150px !important;
 }
 
 /* Subtotal and Shipping button area */
 .insertProduct div.cardneworder:has(button.paypalbtn) {
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
     justify-content: flex-end;
     padding: 15px !important;
     background-color: #f9f9f9 !important; /* Light BG for this section */
 }
 .insertProduct button.paypalbtn, .insertProduct button.Shoppingbtn, .insertProduct button.backbtn { /* General button styling */
     border-radius: 6px !important;
     padding: 10px 20px !important;
     font-weight: bold;
     transition: background-color 0.2s, opacity 0.2s;
     height: auto !important;
     display: inline-flex;
     align-items: center;
 }
 .insertProduct button.paypalbtn { /* Shipping (Paypal green) button */
     background-color: #ff8306 !important; /* Organizational color */
     color: white !important;
     border: none !important;
 }
 .insertProduct button.paypalbtn:hover { background-color: #e07305 !important; }
 
 .insertProduct button.Shoppingbtn { /* Calculate Shipping (was green) */
     background-color: #ff8306 !important; /* Organizational color */
     color: white !important;
     border: none !important;
 }
 .insertProduct button.Shoppingbtn:hover { background-color: #e07305 !important; }
 
 .insertProduct button.backbtn {
     background-color: #6c757d !important; /* Grey for back */
     color: white !important;
     border-color: #6c757d !important;
 }
 .insertProduct button.backbtn:hover { background-color: #5a6268 !important; }
 
 
 /* =============== Shipping Address Form (#shopping) =============== */
 .insertProduct #shopping div.cardneworder {
     width: 100% !important; /* Was 65% */
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
     padding: 20px !important;
     border-radius: 12px !important;
 }
 .insertProduct #shopping span[style*="border-bottom: 1px solid"] { /* Section title "Shipping address" */
     font-size: 1.2rem;
     padding: 15px 5px !important;
     border-bottom-color: #eee !important;
     color: #212529;
 }
 .insertProduct #shopping .shipcard { /* Container for input groups */
     padding-left: 5px !important;
     padding-right: 5px !important;
     margin-bottom: 15px;
 }
 .insertProduct #shopping .shipcard > span.w-100 { /* Labels for inputs */
     display: block;
     margin-bottom: 8px !important;
     font-weight: 500;
     color: #212529;
 }
 .insertProduct #shopping .shipcard > span.w-100 svg { /* Red star icon */
     fill: #ff8306 !important; /* Orange star */
     margin-left: 3px;
 }
 .insertProduct #shopping input[id*="shipping"],
 .insertProduct #shopping .k-dropdownlist { /* Kendo DropDownList for store */
     height: 48px !important;
     border: 1px solid #ced4da !important;
     background-color: #f8f9fa !important;
     border-radius: 6px !important;
     padding-left: 10px !important;
     color: #212529;
     width: 100% !important;
 }
 .insertProduct #shopping input[id*="shipping"]:focus,
 .insertProduct #shopping .k-dropdownlist.k-focus {
     border-color: #ff8306 !important;
     background-color: #fff !important;
     box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25);
 }
 .insertProduct .k-dropdownlist .k-input-inner { /* Kendo DropDownList input part */
     border: none !important;
     background: transparent !important;
     padding-left: 0 !important;
 }
 
 
 /* =============== Submit Order Page =============== */
 .insertProduct #submitorder > .submitorder.maindetailorderdiv { /* Left column: order details */
     width: 100%;
     margin-bottom: 20px;
     background-color: #fff !important;
     border-radius: 12px;
     padding: 20px;
     max-height: none !important; /* Remove fixed max-height to rely on page scroll */
     overflow-y: visible !important;
 }
 .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child { /* Right column: customer/billing */
     width: 100%;
     background-color: transparent !important; /* Slightly different BG for summary */
     border-radius: 12px;
     padding: 0;
 }
 
 @media (min-width: 992px) {
     .insertProduct #submitorder > .submitorder.maindetailorderdiv {
         width: calc(65% - 10px); /* 65% for left column */
         margin-bottom: 0;
     }
     .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child {
         width: calc(35% - 10px); /* 35% for right column */
     }
 }
 
 
 .insertProduct .submitorder div[style*="border-bottom: 2px solid"] { /* Section dividers */
     padding: 20px 0 !important; /* Adjust padding */
     border-bottom-color: #eee !important;
 }
 .insertProduct .submitorder span[style*="font-size: 1.3rem"], /* Section titles */
 .insertProduct .submitorder span[style*="font-size: 1.5rem"] {
     font-size: 1.4rem !important;
     color: #212529;
 }
 .insertProduct .submitorder strong { color: #212529; } /* Standard strong text */
 .insertProduct .submitorder div[style*="background: rgb(255 255 255)"] { /* Inner cards in summary */
     background-color: #fff !important;
     padding: 15px;
     border-radius: 8px;
     margin-bottom: 15px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
 }
 
 /* Payment buttons in submit section */
 .insertProduct #submitorder button.paypalbtn {
     width: 100%;
     margin-top: 10px;
     padding: 5px 20px !important;
     font-size: 1rem;
     display: flex;
    justify-content: space-between;
 }
 .insertProduct #submitorder button.paypalbtn:first-of-type { /* Stripe */
     background-color: #ee5f17 !important; /* Stripe purple */
 }
 .insertProduct #submitorder button.paypalbtn:first-of-type:hover 
 { background-color: #5460c2 !important; }
 .insertProduct #submitorder button.paypalbtn:first-of-type:hover  svg path
 { fill: #fbfbfc !important; }
 
 .insertProduct #submitorder button.paypalbtn:last-of-type { /* PayPal */
     background-color: #ee5f17 !important; /* PayPal blue */
 }
 .insertProduct #submitorder button.paypalbtn:last-of-type:hover 
 { background-color: #002464 !important; }
 .insertProduct #submitorder button.paypalbtn:last-of-type:hover svg path
 { fill: #fbfbfc !important; }
 
 
 /* =============== Modals Styling =============== */
 .insertProduct div[style*="background: rgb(0 0 0 / 64%)"], /* Modal overlay, was #000000a3 */
 .insertProduct div[style*="background: #000000a3"] {
   background-color: rgba(0, 0, 0, 0.5) !important; /* Standard overlay */
   z-index: 1060 !important; /* Ensure modals are on top */
 }
 .insertProduct .modals { /* Modal content box */
   width: 90% !important;
   max-width: 700px !important; /* Max width for modals */
   border-radius: 12px !important; /* Rounded modal */
   padding: 25px !important;
   box-shadow: 0 5px 20px rgba(0,0,0,0.2);
   max-height: 85vh !important; /* Max height relative to viewport */
 }
 .insertProduct .modals span[style*="position: absolute"] { /* Close button */
   background-color: #f0f0f0;
   border-radius: 50% !important; /* Circular close button */
   color: #757575 !important;
   border: none !important;
   width: 36px !important;
   height: 36px !important;
   top: 15px !important; /* Adjust position */
   right: 15px !important;
   font-size: 1.1rem;
   transition: background-color 0.2s, color 0.2s;
 }
 .insertProduct .modals span[style*="position: absolute"]:hover {
     background-color: #e0e0e0;
     color: #212529;
 }
 .insertProduct .modals hr { border-top-color: #eee; }
 
 /* Search bar in modal */
 .insertProduct .modals div[style*="border: 1px solid rgb(149"] { /* Search bar container in modal */
   border-radius: 25px !important; /* Rounded */
   background-color: #f5f5f5 !important; /* Lighter BG */
   border-color: #e0e0e0 !important;
   height: 48px !important;
   padding: 0 15px;
 }
 .insertProduct .modals input.inputsearchmypro {
   background-color: transparent !important;
   font-size: 1rem !important;
   color: #212529;
 }
 .insertProduct .modals .inputsearchmypro::placeholder {
     color: #999;
 }
 .insertProduct .modals div[style*="border: 1px solid rgb(149"] svg { /* Search icon in modal */
     color: #757575;
     font-size: 1.2rem;
 }
 
 /* Items in product selection modal */
 .insertProduct .modals div[style*="padding: 1% 0"] { /* Each product item row */
     padding: 12px 0 !important;
     border-bottom-color: #f0f0f0 !important;
 }
 .insertProduct .modals div[style*="flex: 2"] { /* Image container in modal */
     border-color: #eee !important;
     border-radius: 8px !important;
     height: 120px !important; /* Adjust size */
     background-color: #f9f9f9 !important;
 }
 .insertProduct .modals div[style*="flex: 14"] { /* Text content container */
     margin-left: 15px !important;
 }
 .insertProduct .modals div[style*="flex: 14"] > span { /* Product name, description etc. */
     color: #212529 !important;
 }
 .insertProduct .modals div[style*="flex: 14"] > span[style*="font-weight: bold"] {
     font-size: 1rem;
     margin-bottom: 5px;
 }
 .insertProduct .modals div[style*="flex: 14"] > span[style*="color: rgb(167"] { /* Description */
     font-size: 0.85rem;
     color: #6c757d !important;
     height: auto !important; /* Remove fixed height, let text wrap or be handled by seemore */
     max-height: 60px; /* Limit initial visible height for description */
     overflow: hidden;
 }
 .insertProduct .modals span[style*="color: rgb(167 167 167)"][style*="position: absolute"] svg { /* See more/less icons */
     color: #757575 !important;
 }
 
 
 /* Size selection modal items */
 .insertProduct .modals div[style*="padding: 1% 0"][style*="cursor: pointer"] { /* Each size item row */
     padding: 15px 5px !important; /* More padding for tap targets */
 }
 .insertProduct .modals span[style*="background: rgb(43 158 2)"] { /* Select button in size modal */
     background-color: #ff8306 !important; /* Org color */
     border-radius: 6px !important;
     padding: 8px 18px !important;
     font-weight: bold;
     transition: background-color 0.2s;
 }
 .insertProduct .modals span[style*="background: rgb(43 158 2)"]:hover {
     background-color: #e07305 !important;
 }
 
 /* General text & icon color overrides if needed, be specific */
 .insertProduct body, .insertProduct p, .insertProduct span, .insertProduct div {
     /* color: #212529; */ /* Applied this more specifically */
 }
 .insertProduct svg {
     /* color: #757575; */ /* Applied this more specifically */
 }
 
 
 /* =============== Responsive Adjustments =============== */
 @media (max-width: 1200px) {
   .insertProduct .drawparent { /* Template cards in My Templates section */
     width: calc(33.333% - 13.33px) !important;
   }
 }
 
 @media (max-width: 992px) {
   .insertProduct .drawparent {
     width: calc(50% - 10px) !important;
   }
   .insertProduct .col-12.d-flex.flex-column.align-items-center {
     padding: 15px !important;
   }
   .insertProduct .col-12.d-flex.flex-column.align-items-center > div:nth-child(2) { /* Main content card */
     padding: 20px;
   }
   .insertProduct #shopping .shipcard,
   .insertProduct #shopping .col-6.px-2.shipcard { /* Shipping form fields */
       width: 100% !important;
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
   .insertProduct .comboneworder > div[style*="width: 30%"] { /* Color/Size dropdown containers */
     width: 100% !important;
     margin-right: 0;
   }
   .insertProduct .comboneworder > div[style*="width: 30%"] > div[style*="width: 65%"] { /* Dropdown actual width */
     width: 100% !important;
   }
 
 }
 
 @media (max-width: 768px) {
   .insertProduct .drawparent {
     width: 100% !important;
   }
   .insertProduct .k-listview-content {
       gap: 15px;
   }
   .insertProduct .col-12.d-flex.flex-column.align-items-center {
     padding: 10px !important;
   }
    .insertProduct .col-12.d-flex.flex-column.align-items-center > div:nth-child(2) { /* Main content card */
     padding: 15px;
   }
   .insertProduct div[style*="padding: 5px 55px"] span, /* Page title */
   .insertProduct div[style*="padding: 5px 20px 5px 55px"] span { /* Back button text */
       font-size: 1.3rem !important;
   }
   .insertProduct .modals { width: 95% !important; padding: 20px !important; } /* Larger modals on small screens */
   .insertProduct .submitorder div[style*="border-bottom: 2px solid"] { padding: 15px 0 !important; }
 
 }
 
 @media (max-width: 576px) {
   .insertProduct .levelneworder > span[style*="width: 10%"],
   .insertProduct .levelneworder > span[style*="width: 12%"] { /* Stepper labels */
       font-size: 0.75rem;
       width: auto !important; /* Let text define width */
       padding: 0 5px;
   }
   .insertProduct .levelneworder hr { display: none; } /* Hide hrs in stepper on very small */
   .insertProduct .levelneworder { justify-content: space-around; }
 
   .insertProduct #products div.cardneworder:has(div[style*="border-top: 1px solid #ccc"]), /* Order list */
   .insertProduct #shopping div.cardneworder { /* Shipping form card */
       padding: 10px !important;
   }
   .insertProduct div[style*="padding: 1% 10px"] { /* Order item image/details */
       flex-direction: column;
       align-items: center !important;
   }
   .insertProduct div[style*="background: rgb(221, 221, 221)"] { /* Image in order item */
       margin-bottom: 10px;
   }
   .insertProduct div[style*="margin-left: 30px"] { /* Text details of order item */
       margin-left: 0 !important;
       text-align: center;
       width: 100%;
   }
   .insertProduct .comboneworder { padding: 10px 0 !important; } /* Dropdowns in order item */
 
   /* Submit order page layout */
     .insertProduct #submitorder > .submitorder.maindetailorderdiv,
     .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child {
         width: 100% !important;
         margin-bottom: 15px;
     }
      .insertProduct #submitorder > .submitorder.maindetailorderdiv:last-child { margin-bottom: 0;}
 
     .insertProduct .modals div[style*="padding: 1% 0"] { /* Product item in modal */
         flex-direction: column;
         align-items: center;
     }
     .insertProduct .modals div[style*="flex: 2"] { /* Image container in modal item */
         margin-bottom: 10px;
     }
      .insertProduct .modals div[style*="flex: 14"] { /* Text container in modal item */
         margin-left: 0 !important;
         text-align: center;
     }
 }
/* ============================================================
   LAYOUT MODERN — Sidebar, Navbar, Dropdown, Notifications
   Orange accent: #ff8306 | Font: Inter / system-ui
   ============================================================ */

/* ---- Token Definitions ---- */
:root {
  --nav-primary:        #ff8306;
  --nav-primary-hover:  #e07000;
  --nav-primary-light:  rgba(255,131,6,0.09);
  --nav-primary-glow:   rgba(255,131,6,0.25);

  --nav-bg:             #ffffff;
  --nav-border:         #e8eaed;
  --nav-text:           #111827;
  --nav-text-muted:     #6b7280;
  --nav-shadow:         0 1px 0 rgba(0,0,0,0.06);

  --sidebar-bg:         #ffffff;
  --sidebar-width:      248px;
  --sidebar-header-h:   60px;

  --item-radius:        10px;
  --item-h:             38px;
}

[data-theme="dark"] {
  --nav-primary:        #ff8306;
  --nav-primary-hover:  #ff9a2e;
  --nav-primary-light:  rgba(255,131,6,0.13);
  --nav-primary-glow:   rgba(255,131,6,0.3);

  --nav-bg:             #13151f;
  --nav-border:         #252836;
  --nav-text:           #e8eaf0;
  --nav-text-muted:     #7c80a0;
  --nav-shadow:         0 1px 0 rgba(0,0,0,0.35);

  --sidebar-bg:         #13151f;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.app-sidebar-modern,
.menures.app-sidebar-modern {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--nav-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
}

/*
  Sol panel genişliği — route’taki col-2 / col-md-3 / inline width’tan bağımsız.
  Mobil (≤768): mainPage.css tam genişlik overlay; burada dokunma.
*/
@media (min-width: 769px) {
  .menures {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
  }
}

/* --- Logo / Brand Area --- */
.menures.app-sidebar-modern .sidebar-logo {
  height: var(--sidebar-header-h);
  min-height: var(--sidebar-header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-bottom: 1px solid var(--nav-border);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--sidebar-bg) 96%, var(--nav-primary) 4%) 0%,
    var(--sidebar-bg) 100%
  );
  gap: 10px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  .menures.app-sidebar-modern .sidebar-logo {
    background: var(--sidebar-bg);
  }
}

/* Logo kökü (.brand-mark) — sabit marka */
.menures.app-sidebar-modern .sidebar-logo > div {
  background: transparent !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.menures.app-sidebar-modern .sidebar-logo .brand-mark {
  justify-content: center;
  color: var(--nav-text);
}

.menures.app-sidebar-modern .sidebar-logo .brand-mark__name {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--nav-text) !important;
  letter-spacing: -0.035em !important;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .menures.app-sidebar-modern .sidebar-logo .brand-mark__name {
    font-size: 17px !important;
    letter-spacing: -0.035em !important;
  }
}

/* --- Scrollable menu area --- */
.menures.app-sidebar-modern .sidebar-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 6px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--nav-border) transparent;
}

.menures.app-sidebar-modern .sidebar-menu::-webkit-scrollbar {
  width: 4px;
}
.menures.app-sidebar-modern .sidebar-menu::-webkit-scrollbar-thumb {
  background: var(--nav-border);
  border-radius: 2px;
}
.menures.app-sidebar-modern .sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   SIDEBAR MENU ITEMS (override dashboardmenu.css)
   ============================================================ */
.app-sidebar-modern .menu-item,
.app-sidebar-modern .menu-expansion-panel .k-expander-header {
  display: flex !important;
  align-items: center !important;
  height: 40px;
  padding: 0 12px 0 14px !important;
  margin: 2px 10px !important;
  border-radius: var(--item-radius) !important;
  border: none !important;
  border-left: none !important;
  color: var(--nav-text-muted) !important;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  position: relative;
}

.app-sidebar-modern .menu-item:hover,
.app-sidebar-modern .menu-expansion-panel .k-expander-header:hover {
  background: var(--nav-primary-light) !important;
  color: var(--nav-primary) !important;
}

.app-sidebar-modern .menu-item.active-menu-item,
.app-sidebar-modern .menu-expansion-panel.active-expansion-panel > .k-expander-header {
  background: var(--nav-primary-light) !important;
  color: var(--nav-primary) !important;
  font-weight: 600;
  border-left: 3px solid var(--nav-primary) !important;
}

/* Active left bar indicator */
.app-sidebar-modern .menu-item.active-menu-item::before,
.app-sidebar-modern .menu-expansion-panel.active-expansion-panel > .k-expander-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nav-primary);
}

.app-sidebar-modern .menu-item.active-menu-item .menu-icon,
.app-sidebar-modern .menu-item.active-menu-item .menu-text,
.app-sidebar-modern .menu-expansion-panel.active-expansion-panel > .k-expander-header .menu-icon-within-panel,
.app-sidebar-modern .menu-expansion-panel.active-expansion-panel > .k-expander-header .menu-text-for-panel {
  color: var(--nav-primary) !important;
}

.app-sidebar-modern .menu-icon,
.app-sidebar-modern .menu-icon-within-panel {
  font-size: 1rem !important;
  width: 18px !important;
  margin-right: 10px !important;
  color: var(--nav-text-muted) !important;
  flex-shrink: 0;
  transition: color 0.18s ease;
}

.app-sidebar-modern .menu-item:hover .menu-icon,
.app-sidebar-modern .menu-expansion-panel .k-expander-header:hover .menu-icon-within-panel {
  color: var(--nav-primary) !important;
}

.app-sidebar-modern .menu-text,
.app-sidebar-modern .menu-text-for-panel {
  font-size: 0.82rem !important;
  color: inherit !important;
  transition: color 0.18s ease;
}

/* Sub-items */
.app-sidebar-modern .menu-sub-item {
  display: flex !important;
  align-items: center !important;
  height: 36px;
  padding: 0 12px 0 42px !important;
  margin: 2px 10px !important;
  border-radius: var(--item-radius) !important;
  font-size: 0.78rem !important;
  color: var(--nav-text-muted) !important;
  border-bottom: none !important;
  transition: background 0.18s ease, color 0.18s ease;
}

.app-sidebar-modern .menu-sub-item:hover,
.app-sidebar-modern .menu-sub-item.active-sub-menu-item {
  background: var(--nav-primary-light) !important;
  color: var(--nav-primary) !important;
}

.app-sidebar-modern .menu-sub-item .submenu-icon {
  color: inherit !important;
}

/* Expansion panel content background */
.app-sidebar-modern .menu-expansion-panel .k-expander-content {
  background: transparent !important;
}

/* Kendo arrow icon */
.app-sidebar-modern .menu-expansion-panel .k-expander-indicator .k-svg-icon {
  color: var(--nav-text-muted) !important;
  fill: var(--nav-text-muted) !important;
}

/* Chevron column: same vertical line for Etsy / Shopify / Product / My Orders */
.menures.app-sidebar-modern div[name="mainmenu"] .menu-expansion-panel > .k-expander-header {
  justify-content: flex-start !important;
}
.menures.app-sidebar-modern div[name="mainmenu"] .menu-expansion-panel .k-expander-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.menures.app-sidebar-modern div[name="mainmenu"] .menu-expansion-panel .k-expander-indicator {
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  right: auto !important;
  left: auto !important;
}


/* ============================================================
   NAVBAR (top header)
   ============================================================ */
#header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
  height: var(--sidebar-header-h);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  position: relative;
  z-index: 1000;
  padding: 0 16px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Dashboard / modern shell — cam + yumuşak kenar (navbar-modern ile birlikte) */
#header.navbar-modern {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nav-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--nav-bg) 86%, transparent) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.65);
  backdrop-filter: blur(18px) saturate(1.65);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 8px 28px rgba(15, 17, 23, 0.06);
  border-bottom: 1px solid color-mix(in srgb, var(--nav-border) 85%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
  #header.navbar-modern {
    background: rgba(255, 255, 255, 0.88);
  }
  [data-theme="dark"] #header.navbar-modern {
    background: rgba(26, 29, 39, 0.92) !important;
  }
}

/* Left side: hamburger */
#header .nav-hamburger,
.nav-hamburger {
  width: 40px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--nav-text-muted);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--nav-border) 70%, transparent);
  background: color-mix(in srgb, var(--nav-bg) 70%, rgba(0, 0, 0, 0.02));
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

@supports not (border-color: color-mix(in srgb, white 50%, black)) {
  #header .nav-hamburger,
  .nav-hamburger {
    border: 1px solid var(--nav-border);
    background: rgba(0, 0, 0, 0.02);
  }
}

#header .nav-hamburger:hover,
.nav-hamburger:hover {
  background: var(--nav-primary-light);
  color: var(--nav-primary);
  border-color: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-primary) 12%, transparent);
  transform: translateY(-1px);
}

#header .nav-hamburger svg,
.nav-hamburger svg {
  font-size: 1.3rem;
}

/* Right side cluster */
#header .nav-right {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#header .nav-balance,
#header .nav-notification,
#header .nav-avatar-wrap {
  flex-shrink: 0;
}

#header .nav-avatar-wrap {
  position: relative;
  z-index: 1001;
}

/* Balance pill */
.nav-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 12px;
  height: 36px;
  background: linear-gradient(135deg, var(--nav-primary) 0%, var(--nav-primary-hover) 100%);
  color: #fff;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(255, 131, 6, 0.22);
}

.nav-balance:hover {
  background: linear-gradient(135deg, var(--nav-primary-hover) 0%, var(--nav-primary) 100%);
  box-shadow: 0 6px 20px var(--nav-primary-glow);
  transform: translateY(-1px);
}

.nav-balance.warning {
  background: #f59e0b;
}

.nav-balance.warning:hover {
  background: #d97706;
  box-shadow: 0 4px 12px rgba(245,158,11,0.3);
}

/* Icon buttons: notification, theme toggle */
.nav-notification,
.header-notification-icon,
.nav-theme-toggle {
  width: 38px;
  height: 38px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  color: var(--nav-text-muted);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.nav-theme-toggle:focus-visible,
.header-notification-icon:focus-visible,
.nav-hamburger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-primary) 35%, transparent);
}

.nav-notification:hover,
.header-notification-icon:hover,
.nav-theme-toggle:hover {
  background: var(--nav-primary-light);
  color: var(--nav-primary);
}

.nav-theme-toggle:hover {
  transform: rotate(20deg);
}

/* Notification badge */
.nav-notification-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nav-bg);
  pointer-events: none;
}

/* Avatar */
.nav-avatar-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nav-avatar-wrap .sb-avatar,
.nav-avatar-wrap .sb-avatar__image {
  border-radius: var(--item-radius) !important;
  border: 2px solid var(--nav-border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nav-avatar-wrap:hover .sb-avatar,
.nav-avatar-wrap:hover .sb-avatar__image {
  border-color: var(--nav-primary) !important;
  box-shadow: 0 0 0 3px var(--nav-primary-light);
}

/* ============================================================
   USER DROPDOWN
   ============================================================ */
.user-dropdown-modern {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 272px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  overflow: hidden;
  pointer-events: none;
}

.user-dropdown-modern.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-dropdown-modern .user-dropdown-header {
  padding: 16px 18px;
  background: var(--nav-primary-light);
  border-bottom: 1px solid var(--nav-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-dropdown-modern .user-dropdown-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nav-text);
}

.user-dropdown-modern .user-dropdown-email {
  font-size: 0.78rem;
  color: var(--nav-text-muted);
}

.user-dropdown-modern .user-dropdown-plan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 8px;
  width: fit-content;
}

.user-dropdown-modern .user-dropdown-plan.free {
  background: rgba(245,158,11,0.12);
  color: #92400e;
}
.user-dropdown-modern .user-dropdown-plan.pro {
  background: var(--nav-primary-light);
  color: var(--nav-primary);
}

.user-dropdown-modern .user-dropdown-body {
  padding: 6px 0;
}

.user-dropdown-modern .user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: var(--nav-text);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.user-dropdown-modern .user-dropdown-item:hover {
  background: var(--nav-primary-light);
  color: var(--nav-primary);
}

.user-dropdown-modern .user-dropdown-item.logout {
  color: #dc2626;
}

.user-dropdown-modern .user-dropdown-item.logout:hover {
  background: rgba(220,38,38,0.08);
  color: #b91c1c;
}

/* Impersonate section */
.user-dropdown-modern .user-dropdown-impersonate {
  padding: 12px 18px;
  background: rgba(245,158,11,0.06);
  border-bottom: 1px solid var(--nav-border);
}

.user-dropdown-modern .user-dropdown-impersonate:last-child {
  border-bottom: none;
  border-top: 1px solid var(--nav-border);
}

.user-dropdown-modern .user-dropdown-impersonate-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.user-dropdown-modern .user-dropdown-impersonate-row {
  display: flex;
  gap: 6px;
}

.user-dropdown-modern .user-dropdown-impersonate-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--nav-border);
  border-radius: 7px;
  font-size: 0.8rem;
  background: var(--nav-bg);
  color: var(--nav-text);
  outline: none;
  transition: border-color 0.15s ease;
}

.user-dropdown-modern .user-dropdown-impersonate-row input:focus {
  border-color: var(--nav-primary);
  box-shadow: 0 0 0 3px var(--nav-primary-light);
}

.user-dropdown-modern .user-dropdown-impersonate-row button {
  padding: 7px 12px;
  background: var(--nav-primary);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.user-dropdown-modern .user-dropdown-impersonate-row button:hover:not(:disabled) {
  background: var(--nav-primary-hover);
}

.user-dropdown-modern .user-dropdown-impersonate-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

/*
 * These rules use !important to override the dozens of page-specific CSS
 * files that hardcode background: white / #ffffff on .menures and #header.
 * This is the single source of truth for sidebar & header dark mode.
 */
[data-theme="dark"] .menures,
[data-theme="dark"] .app-sidebar-modern,
[data-theme="dark"] .menures.app-sidebar-modern {
  background: #1a1d27 !important;
  background-color: #1a1d27 !important;
  border-right: 1px solid #2a2d3a !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    3px 0 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .menures .sidebar-logo,
[data-theme="dark"] .menures > div[name="mainmenu"] {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="dark"] #header,
[data-theme="dark"] .navbar-modern {
  background: #1a1d27 !important;
  background-color: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] #header.navbar-modern {
  background: linear-gradient(
    180deg,
    rgba(30, 33, 45, 0.94) 0%,
    rgba(22, 24, 34, 0.97) 100%
  ) !important;
  background-color: transparent !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 40px rgba(0, 0, 0, 0.45) !important;
  border-bottom: 1px solid rgba(42, 45, 58, 0.95) !important;
}

[data-theme="dark"] #header .nav-hamburger,
[data-theme="dark"] .nav-hamburger {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

/* Sidebar text & icon colors in dark mode */
[data-theme="dark"] .menures .sidebar-logo .brand-mark,
[data-theme="dark"] .menures .sidebar-logo .brand-mark__name {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .menures .menu-item,
[data-theme="dark"] .menures .k-expander-header,
[data-theme="dark"] .menures .menu-sub-item {
  background-color: transparent !important;
  border-bottom-color: #2a2d3a !important;
  color: #c8cad8 !important;
}

[data-theme="dark"] .menures .menu-item:hover,
[data-theme="dark"] .menures .k-expander-header:hover,
[data-theme="dark"] .menures .menu-sub-item:hover {
  background-color: rgba(255,131,6,0.1) !important;
  color: #ff8306 !important;
}

[data-theme="dark"] .menures .menu-item.active-menu-item,
[data-theme="dark"] .menures .menu-expansion-panel.active-expansion-panel > .k-expander-header {
  background-color: rgba(255,131,6,0.12) !important;
  color: #ff8306 !important;
  border-left: 3px solid #ff8306 !important;
}

[data-theme="dark"] .menures .menu-icon,
[data-theme="dark"] .menures .menu-icon-within-panel,
[data-theme="dark"] .menures .menu-sub-item .submenu-icon {
  color: #7c80a0 !important;
}

[data-theme="dark"] .menures .menu-item:hover .menu-icon,
[data-theme="dark"] .menures .k-expander-header:hover .menu-icon-within-panel,
[data-theme="dark"] .menures .menu-sub-item:hover .submenu-icon {
  color: #ff8306 !important;
}

[data-theme="dark"] .menures .menu-item.active-menu-item .menu-icon,
[data-theme="dark"] .menures .menu-expansion-panel.active-expansion-panel .menu-icon-within-panel {
  color: #ff8306 !important;
}

/* Kendo expander arrow */
[data-theme="dark"] .menures .k-expander-indicator .k-svg-icon svg {
  fill: #7c80a0 !important;
  color: #7c80a0 !important;
}

/* Kendo expander content + animation container — the white bg culprit */
[data-theme="dark"] .menures .k-expander-content,
[data-theme="dark"] .menures .k-expander-content-wrapper,
[data-theme="dark"] .menures .k-animation-container,
[data-theme="dark"] .menures .k-animation-container > *,
[data-theme="dark"] .menures .k-child-animation-container,
[data-theme="dark"] .menures .k-expander,
[data-theme="dark"] .menures .k-expander > *:not(.k-expander-header) {
  background: #13151f !important;
  background-color: #13151f !important;
}

[data-theme="dark"] .user-dropdown-modern {
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .user-dropdown-modern .user-dropdown-impersonate {
  background: rgba(255,131,6,0.07);
}

[data-theme="dark"] .nav-notification-badge {
  border-color: var(--nav-bg);
}

[data-theme="dark"] .user-dropdown-modern .user-dropdown-plan.free {
  background: rgba(245,158,11,0.15);
  color: #fbbf24;
}

[data-theme="dark"] .user-dropdown-modern .user-dropdown-item.logout {
  color: #f87171;
}

[data-theme="dark"] .user-dropdown-modern .user-dropdown-item.logout:hover {
  background: rgba(220,38,38,0.12);
  color: #fca5a5;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.dashboard-main-area {
  background: var(--content-bg, #eef0fa);
  flex: 1;
  min-height: 0;
  transition: background 0.25s ease;
}

:root {
  --content-bg: #eef0fa;
}

[data-theme="dark"] {
  --content-bg: #0f1117;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  #header {
    padding: 0 10px;
  }

  .nav-balance {
    padding: 0 8px;
    font-size: 0.72rem;
  }

  /* Hide balance label text on mobile — keep only amount */
  .nav-balance span:first-child {
    display: none;
  }

  .user-dropdown-modern {
    min-width: calc(100vw - 32px);
    right: 8px;
  }
}

/* ============================================================
   Edit / Delete Product list + modals — dark-theme ready
   Reuses insert-product-page tokens where possible
   ============================================================ */

.edit-delete-product-page {
  --edp-bg: var(--dash-bg, #f1f3f8);
  --edp-panel: var(--dash-card, #ffffff);
  --edp-border: var(--dash-border, #e8eaf0);
  --edp-text: var(--dash-text-primary, #111827);
  --edp-text-muted: var(--dash-text-secondary, #6b7280);
  --edp-accent: var(--nav-primary, #ff8306);
  --edp-accent-hover: var(--nav-primary-hover, #e07000);
  --edp-accent-soft: var(--dash-accent-light, rgba(255, 131, 6, 0.12));
  --edp-input-bg: #ffffff;
  --edp-input-border: #d1d5db;
  --edp-input-text: #111827;
  --edp-shadow: var(--dash-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  --edp-radius: 12px;
  --edp-radius-sm: 8px;
  min-height: 100vh;
  background: var(--edp-bg);
  color: var(--edp-text);
}

[data-theme="dark"] .edit-delete-product-page {
  --edp-bg: #0f1117;
  --edp-panel: #1a1d27;
  --edp-border: #2a2d3a;
  --edp-text: #f0f1f5;
  --edp-text-muted: #8b8fa8;
  --edp-accent-soft: rgba(255, 131, 6, 0.14);
  --edp-input-bg: #222632;
  --edp-input-border: #3a3f52;
  --edp-input-text: #f0f1f5;
  --edp-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.edit-delete-product-page .edp-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.edit-delete-product-page .edp-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
}

.edit-delete-product-page .edp-inner {
  max-width: 1400px;
  margin: 0 auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.edit-delete-product-page .edp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--edp-panel);
  border: 1px solid var(--edp-border);
  border-radius: var(--edp-radius);
  box-shadow: var(--edp-shadow);
}

.edit-delete-product-page .edp-page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.edit-delete-product-page .edp-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--edp-border);
  border-radius: 10px;
  background: var(--edp-input-bg);
  color: var(--edp-accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.edit-delete-product-page .edp-back-btn:hover {
  border-color: var(--edp-accent);
  background: var(--edp-accent-soft);
}

.edit-delete-product-page .edp-page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--edp-text);
}

.edit-delete-product-page .edp-page-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--edp-text-muted);
}

.edit-delete-product-page .edp-card {
  background: var(--edp-panel);
  border: 1px solid var(--edp-border);
  border-radius: var(--edp-radius);
  box-shadow: var(--edp-shadow);
  padding: 20px;
}

.edit-delete-product-page .edp-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.edit-delete-product-page .edp-filter-title {
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 6px;
  border-bottom: 4px solid var(--edp-accent);
  color: var(--edp-text);
}

.edit-delete-product-page .edp-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--edp-radius-sm);
  border: 1px solid var(--edp-border);
  background: var(--edp-input-bg);
  color: var(--edp-text);
  cursor: pointer;
  font-size: 0.875rem;
}

.edit-delete-product-page .edp-clear-btn:hover {
  border-color: var(--edp-accent);
  color: var(--edp-accent);
}

.edit-delete-product-page .edp-filter-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .edit-delete-product-page .edp-filter-row {
    grid-template-columns: 1fr;
  }
}

.edit-delete-product-page .edp-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--edp-input-border);
  border-radius: var(--edp-radius-sm);
  background: var(--edp-input-bg);
  color: var(--edp-input-text);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.edit-delete-product-page .edp-input::placeholder {
  color: var(--edp-text-muted);
}

.edit-delete-product-page .edp-input:focus {
  border-color: var(--edp-accent);
  box-shadow: 0 0 0 3px var(--edp-accent-soft);
}

/* Grid overrides */
.edit-delete-product-page .edp-grid-wrap .k-grid {
  border: 1px solid var(--edp-border);
  border-radius: var(--edp-radius-sm);
  background: var(--edp-panel);
  color: var(--edp-text);
}

.edit-delete-product-page .edp-grid-wrap .k-grid-header,
.edit-delete-product-page .edp-grid-wrap .k-grid-header-wrap,
.edit-delete-product-page .edp-grid-wrap .k-grid-header th.k-header {
  background: var(--edp-accent) !important;
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.edit-delete-product-page .edp-grid-wrap .k-grid td,
.edit-delete-product-page .edp-grid-wrap .k-grid .k-table-td {
  background: var(--edp-panel);
  color: var(--edp-text);
  border-color: var(--edp-border);
}

.edit-delete-product-page .edp-grid-wrap .k-grid tr.k-alt td {
  background: var(--edp-bg);
}

.edit-delete-product-page .edp-grid-wrap .k-pager {
  background: var(--edp-panel);
  color: var(--edp-text);
  border-color: var(--edp-border);
}

.edit-delete-product-page .edp-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 2px;
  border: 1px solid var(--edp-border);
  border-radius: 8px;
  background: var(--edp-input-bg);
  color: var(--edp-accent);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.edit-delete-product-page .edp-action-btn:hover {
  background: var(--edp-accent-soft);
  border-color: var(--edp-accent);
  transform: translateY(-1px);
}

.edit-delete-product-page .edp-action-btn--danger {
  color: #ef4444;
}

.edit-delete-product-page .edp-action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
}

.edit-delete-product-page .edp-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.edit-delete-product-page .edp-cell-text {
  font-size: 0.9375rem;
  color: var(--edp-text);
}

/* ---- Modal overlay / shell ---- */
.edp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

.edp-modal-shell {
  display: flex;
  flex-direction: column;
  width: min(520px, 95vw);
  max-height: min(90vh, 900px);
  background: var(--edp-panel, #fff);
  border: 1px solid var(--edp-border, #e8eaf0);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
  color: var(--edp-text, #111);
  overflow: hidden;
}

[data-theme="dark"] .edp-modal-shell {
  background: #1a1d27;
  border-color: #2a2d3a;
  color: #f0f1f5;
}

.edp-modal-shell--md {
  width: min(560px, 95vw);
}

.edp-modal-shell--lg {
  width: min(800px, 95vw);
}

.edp-modal-shell--xl {
  width: min(1100px, 95vw);
  max-height: 92vh;
}

@media (max-width: 640px) {
  .edp-modal-shell,
  .edp-modal-shell--md,
  .edp-modal-shell--lg,
  .edp-modal-shell--xl {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .edp-modal-overlay {
    padding: 0;
  }
}

.edp-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--edp-border, #e8eaf0);
  background: var(--edp-panel, #fff);
  flex-shrink: 0;
}

[data-theme="dark"] .edp-modal-header {
  background: #1a1d27;
  border-color: #2a2d3a;
}

.edp-modal-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--edp-text, #111);
}

.edp-modal-subtitle {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--edp-text-muted, #6b7280);
  word-break: break-word;
}

.edp-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--edp-border, #e8eaf0);
  border-radius: 8px;
  background: transparent;
  color: var(--edp-text-muted, #6b7280);
  cursor: pointer;
  flex-shrink: 0;
}

.edp-modal-close:hover {
  color: var(--edp-accent, #ff8306);
  border-color: var(--edp-accent, #ff8306);
}

.edp-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 120px;
}

.edp-edit-modal-body {
  padding: 0;
}

.edp-edit-modal-body .edp-edit-form-wrap {
  padding: 0;
  background: transparent !important;
}

.edp-edit-modal-body #editproduct.edp-edit-form {
  width: 100%;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Modal form fields */
.edp-modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edp-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edp-modal-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--edp-text-muted, #6b7280);
}

.edp-modal-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--edp-input-border, #d1d5db);
  border-radius: 8px;
  background: var(--edp-input-bg, #fff);
  color: var(--edp-input-text, #111);
  font-size: 0.9375rem;
  outline: none;
}

[data-theme="dark"] .edp-modal-input {
  background: #222632;
  border-color: #3a3f52;
  color: #f0f1f5;
}

.edp-modal-input:focus {
  border-color: var(--edp-accent, #ff8306);
  box-shadow: 0 0 0 3px rgba(255, 131, 6, 0.15);
}

.edp-modal-input--readonly {
  opacity: 0.85;
  cursor: default;
}

.edp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--edp-border, #e8eaf0);
}

.edp-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}

.edp-modal-btn--ghost {
  background: transparent;
  border-color: var(--edp-border, #e8eaf0);
  color: var(--edp-text, #111);
}

.edp-modal-btn--ghost:hover {
  border-color: var(--edp-accent, #ff8306);
  color: var(--edp-accent, #ff8306);
}

.edp-modal-btn--primary {
  background: var(--edp-accent, #ff8306);
  color: #fff;
  border-color: var(--edp-accent, #ff8306);
}

.edp-modal-btn--primary:hover {
  background: var(--edp-accent-hover, #e07000);
}

/* Color modal chips */
.edp-color-chip-list .k-listview-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.edp-color-chip {
  display: flex;
  flex-direction: column;
  width: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--edp-border, #e8eaf0);
  cursor: pointer;
}

.edp-color-chip-swatch {
  height: 48px;
}

.edp-color-chip-name {
  padding: 6px 8px;
  text-align: center;
  font-size: 0.75rem;
  background: var(--edp-panel, #fff);
  color: var(--edp-text, #111);
}

/* Image modal */
.edp-image-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .edp-image-modal-grid {
    grid-template-columns: 1fr;
  }
}

.edp-image-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border: 2px dashed var(--edp-border, #e8eaf0);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: var(--edp-bg, #f1f3f8);
}

.edp-image-zone img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
}

.edp-gallery-list .k-listview-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.edp-gallery-item {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
}

.edp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edp-gallery-hover-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 6px;
  font-size: 0.625rem;
  background: var(--edp-accent, #ff8306);
  color: #fff;
  border-radius: 4px;
}

.edp-gallery-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}

.edp-font-summary-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--edp-input-border, #d1d5db);
  border-radius: 8px;
  background: var(--edp-input-bg, #fff);
  color: var(--edp-input-text, #111);
}

/* Kendo inside modals — dark readability */
.edp-modal-body .k-input-inner,
.edp-modal-body .k-input,
.edp-modal-body .k-numerictextbox .k-input-inner {
  background: var(--edp-input-bg, #fff) !important;
  color: var(--edp-input-text, #111) !important;
  border-color: var(--edp-input-border, #d1d5db) !important;
}

[data-theme="dark"] .edp-modal-body .k-input-inner,
[data-theme="dark"] .edp-modal-body .k-input,
[data-theme="dark"] .edp-modal-body .k-numerictextbox .k-input-inner {
  background: #222632 !important;
  color: #f0f1f5 !important;
  border-color: #3a3f52 !important;
}

.edp-modal-body .k-grid-header th.k-header {
  background: var(--edp-accent, #ff8306) !important;
  color: #fff !important;
}

.edp-color-picker-window .k-window-content {
  padding: 16px;
}

.edp-modal-body .k-grid td .edp-grid-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--edp-input-border, #d1d5db);
  border-radius: 6px;
  background: var(--edp-input-bg, #fff);
  color: var(--edp-input-text, #111);
}

[data-theme="dark"] .edp-modal-body .k-grid td .edp-grid-input {
  background: #222632;
  border-color: #3a3f52;
  color: #f0f1f5;
}

/* ============================================================
   Dark theme — scoped tokens for page + modals
   ============================================================ */
[data-theme="dark"] .edit-delete-product-page,
[data-theme="dark"] .edp-modal-overlay {
  --edp-bg: #0f1117;
  --edp-panel: #1a1d27;
  --edp-border: #2a2d3a;
  --edp-text: #e8eaf0;
  --edp-text-muted: #9aa0b8;
  --edp-accent-soft: rgba(255, 131, 6, 0.14);
  --edp-input-bg: #222632;
  --edp-input-border: #3a3f52;
  --edp-input-text: #f0f1f5;
  --edp-row-alt: #151820;
  --edp-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .edp-modal-title {
  color: #f0f1f5;
}

[data-theme="dark"] .edp-modal-subtitle,
[data-theme="dark"] .edp-modal-label {
  color: #9aa0b8;
}

[data-theme="dark"] .edp-modal-btn--ghost {
  border-color: #3a3f52;
  color: #e8eaf0;
}

[data-theme="dark"] .edp-modal-actions {
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .edp-font-summary-input {
  background: #222632;
  border-color: #3a3f52;
  color: #f0f1f5;
}

[data-theme="dark"] .edp-color-chip-name {
  background: #1a1d27;
  color: #e8eaf0;
}

[data-theme="dark"] .edp-image-zone {
  background: #151820;
  border-color: #3a3f52;
}

/* Grid — override global .k-grid light rules from legacy CSS */
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .edp-product-grid.k-grid,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-md {
  background: var(--edp-panel) !important;
  border-color: var(--edp-border) !important;
  color: var(--edp-text) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-header,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-header-wrap,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-header .k-table-th,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-header th.k-header {
  background: #c96a00 !important;
  color: #fff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-header .k-column-title,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-header .k-link {
  color: #fff !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-content,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-content table,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-table {
  background: var(--edp-panel) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-content td,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid .k-table-td,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid td {
  background: var(--edp-panel) !important;
  color: var(--edp-text) !important;
  border-color: var(--edp-border) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-content tr:nth-child(even) td,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid tr.k-alt td,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid .k-table-alt-row td,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-table-row.k-table-alt-row td {
  background: var(--edp-row-alt) !important;
  color: var(--edp-text) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-tbody tr:hover td {
  background: #252a38 !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-cell-text {
  color: var(--edp-text) !important;
}

/* Pager */
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-wrap,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-grid-pager {
  background: var(--edp-panel) !important;
  border-color: var(--edp-border) !important;
  color: var(--edp-text) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-info,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-sizes,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-sizes .k-input-value-text {
  color: var(--edp-text-muted) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager .k-button,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-numbers .k-button {
  background: #222632 !important;
  color: #e8eaf0 !important;
  border-color: #3a3f52 !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager .k-button:hover,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-numbers .k-button:hover {
  background: var(--edp-accent) !important;
  color: #fff !important;
  border-color: var(--edp-accent) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-numbers .k-button.k-selected,
[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager .k-button.k-selected {
  background: var(--edp-accent) !important;
  color: #fff !important;
  border-color: var(--edp-accent) !important;
}

[data-theme="dark"] .edit-delete-product-page .edp-grid-wrap .k-pager-nav .k-button {
  background: #2a3140 !important;
  color: #e8eaf0 !important;
}

/* Modal grids (price etc.) */
[data-theme="dark"] .edp-modal-body .k-grid,
[data-theme="dark"] .edp-modal-body .k-grid-content,
[data-theme="dark"] .edp-modal-body .k-grid-table {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .edp-modal-body .k-grid td,
[data-theme="dark"] .edp-modal-body .k-grid .k-table-td {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .edp-modal-body .k-grid tr.k-alt td,
[data-theme="dark"] .edp-modal-body .k-grid .k-table-alt-row td {
  background: #151820 !important;
}

[data-theme="dark"] .edp-modal-body .k-dropdownlist,
[data-theme="dark"] .edp-modal-body .fontcombo .k-input-inner {
  background: #222632 !important;
  color: #f0f1f5 !important;
  border-color: #3a3f52 !important;
}

[data-theme="dark"] .edp-modal-body .k-popup,
[data-theme="dark"] .edp-modal-body .fontypecombo {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .edp-modal-body .k-list-item,
[data-theme="dark"] .edp-modal-body .k-list-item-text {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .edp-modal-body .k-list-item:hover,
[data-theme="dark"] .edp-modal-body .k-list-item.k-hover {
  background: #252a38 !important;
}

/* Edit modal — embedded EditProduct form */
[data-theme="dark"] .edp-edit-modal-body #editproduct,
[data-theme="dark"] .edp-edit-modal-body .edp-edit-form-wrap {
  background: transparent !important;
  color: #e8eaf0;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct hr {
  border-color: #2a2d3a !important;
  color: #2a2d3a !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .divheadeditpro > span,
[data-theme="dark"] .edp-edit-modal-body #editproduct .category > span {
  color: #b8bdd0 !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct input:not([type="file"]) {
  background: #222632 !important;
  color: #f0f1f5 !important;
  border: 1px solid #3a3f52 !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .combo,
[data-theme="dark"] .edp-edit-modal-body #editproduct .category .combo {
  background: #222632 !important;
  border-color: #3a3f52 !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .k-input-inner,
[data-theme="dark"] .edp-edit-modal-body #editproduct .k-dropdownlist {
  background: #222632 !important;
  color: #f0f1f5 !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .k-grid td,
[data-theme="dark"] .edp-edit-modal-body #editproduct .k-grid .k-table-td {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .k-grid tr.k-alt td,
[data-theme="dark"] .edp-edit-modal-body #editproduct .k-grid .k-table-alt-row td {
  background: #151820 !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .k-grid-header th.k-header {
  background: #c96a00 !important;
  color: #fff !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .k-numerictextbox .k-input-inner {
  background: #222632 !important;
  color: #f0f1f5 !important;
}

[data-theme="dark"] .edp-edit-modal-body #editproduct .btn-success {
  background: var(--edp-accent, #ff8306) !important;
  border-color: var(--edp-accent, #ff8306) !important;
  color: #fff !important;
}

[data-theme="dark"] .edp-color-picker-window,
[data-theme="dark"] .edp-color-picker-window .k-window-content {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .edp-color-picker-window .k-window-titlebar {
  background: #151820 !important;
  color: #e8eaf0 !important;
}

/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url("../assets/fonts/segeio/segoeui-bolditalic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  } */
div#editproduct {
   font-family: sarabun_bolditalic;
   background: white;
   border-radius: 5px;
}

div.editProduct_category {
   background: #586b85;
   width: 12vw;
   left: 0px;
   border-radius: 5px;
}

div.editProduct_category ul {
   background: #485983;
   color: white;
}

div.editProduct_category .k-menu-group .k-menu-item+.k-menu-item {
   border-bottom: 1px solid white;
}

div#editproduct input {
   border-bottom: 0px !important
}

div#editproduct {
   margin-top: 5vh;
   margin-bottom: 5vh;
   background: white;
   border-radius: 5px;
}

div#editproduct input {
   border: 0px;
   /* border-radius: 18px; */
   background: white;
   padding: 0 5px;
   height: 34px;
   color: #4b4b4b;
   font-size: 1.1rem;
   text-align: center;
   border-radius: 3px;
   font-size: .9vw;
   font-family: sarabun_bolditalic !important;
}

div#editproduct div.k-grid-header tr {
   background: #ff8731 !important;
   color: white;
}

div#editproduct div.k-grid-header {
   /* background: #141414 !important */
}

div#editproduct .k-virtual-content,
.k-virtual-list .k-list-content {
   overflow-y: hidden;
}

div#editproduct .k-pager {
   background-color: white !important;
}

div#editproduct .k-pager-sizes {
   color: #ff8731;
}

div#editproduct .k-pager-info {
   color: #ff8731;
}

div#editproduct .k-pager-numbers-wrap {
   color: #ff8731;
}

div#editproduct .k-grid-header .k-column-title {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div#editproduct .k-grid-content td {
   font-family: 'sarabun_bolditalic' !important;
   font-size: 1vw !important;
}

div#editproduct span.k-dropdownlist {
   background-color: #ffffff !important;
   border-radius: 0px !important;
   height: 40px;
}

div#editproduct .k-grid-content td input {
   border: 0px !important;
   /* border: unset !important; */
   /* border-radius: 18px; */
   background: white;
   padding: 6px 30px;
}

div.editproduct div.combo {
   background: transparent;
}

div#editproduct div.combo span.k-dropdownlist.k-picker {
   background-color: white !important;
   border-radius: 3px !important;
   height: 34px !important;
   width: 100% !important;
   height: 100% !important;
}




@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 200px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 106px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      flex-direction: column;
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(3) {

      flex: 2;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div#editproduct div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.editProduct> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}


/* jjjjjj/jjj */

@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#editproduct div.bottom {
      flex-direction: column;
   }

   div#editproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#editproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right {
      width: 100% !important;
   }

   div#editproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#editproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#editproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#editproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#editproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#editproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }

   div#editproduct span.title1 {
      font-size: 12px !important;
   }

   div#editproduct span.title2 {
      font-size: 12px !important;
   }

   div#editproduct div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.editProduct #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.editProduct .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.left div {
      flex-direction: column;
   }

   div#insertproduct div.bottom {
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#insertproduct div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#editproduct div.combo {
      height: 25px !important;
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.editProduct> :first-child {
      display: none !important;

   }

   div.editProduct div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.editProduct div.k-grid-content td {
      width: 30px !important;
   }

   div.editProduct div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.editProduct div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.editProduct #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.editProduct #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.editProduct #header div#infobar {

      width: 90%;

   }

   div.editProduct #header div#infobar div.message:nth-child(1) {

      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div.editProduct #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div#editproduct div.combo {
      height: 25px !important;
   }

}

@media only screen and (min-width : 1280px) and (orientation:landscape) {
   div.editProduct {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }
}


div.category:focus-visible {
   outline: unset !important
}

div#editproduct .k-grid-header,
.k-grid-footer {
   padding-inline-end: 0px !important
}

.k-grid-aria-root {
   border-radius: 0px !important;
}

.k-pager {
   background-color: #ffffff !important
}

div.k-grid-content td {
   border-right: 1px solid #fff !important;
}

div.editproduct div.k-grid-header tr {
   background: #ff8306 !important;
   color: white
}

div.editproduct div.k-grid-content td {
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   height: 40px;
}
div#editproduct span.k-input-value-text{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div.insertproductdropdown span.k-list-item-text{
   font-size: .9vw !important;
   font-family: sarabun_bolditalic !important;
   color:black ;
}
div#editproduct div.k-grid-content table tr{
   height: 40px !important;
}

div#editproduct table tbody tr:nth-of-type(even) td{
   background: rgb(189 208 254) !important
 }
 div#editproduct table tbody tr:nth-of-type(even) td input{
   background: rgb(189 208 254) !important
 }
 div#editproduct table tbody tr:nth-of-type(odd) td{
   background: white !important
 }
 div#editproduct  .k-dropdownlist.k-picker{
   height: 100% !important;
    width: 100% !important
 }



 div#editproduct span.k-multiselecttree div.k-chip.k-chip-md.k-rounded-md.k-chip-solid.k-chip-solid-base{
   background-color: #ccc !important;
   height: 100%;
}
div#editproduct  div.insertproduct_grid span.k-dropdownlist{
   height: 100% !important;
   width: 100% !important;
}

div#editproduct  div.divheadeditpro span.k-chip-actions{
   display: none;
}
div#editproduct  div.divheadeditpro span.k-chip-label
{
   font-family: segoe;
   font-size: 10px;
}
div#editproduct  div.divheadeditpro span.k-clear-value
{
   display: none;
}

/* div.EditDeleteProduct div.k-animation-container.k-animation-container-shown
{
    width: 40vw !important;
    left: 55vw !important;
}

div.EditDeleteProduct div.k-grid-header tr{
    background: #ff8731 !important;
    color: white;
}
div.EditDeleteProduct div.k-grid-header{
    background: #ff8731 !important
}
div.EditDeleteProduct .k-virtual-content, .k-virtual-list .k-list-content{
    overflow-y: overlay;
}
div.EditDeleteProduct .k-pager{
    background-color: white !important;
}
div.EditDeleteProduct .k-pager-sizes{
    color: #ff8731;
}
div.EditDeleteProduct  .k-pager-info{
    color: #ff8731;
}
div.EditDeleteProduct  .k-pager-numbers-wrap{
    color: #ff8731; 
}

div.EditDeleteProduct  .k-grid-header span.k-column-title{
    font-family: 'sarabun_bolditalic' !important;
    font-size: 1vw;
}
div.EditDeleteProduct  div.k-grid-content td{
    font-family: 'sarabun_bolditalic' !important;
    font-size: 1vw !important;
}

.k-grid-aria-root{
   border-radius: 0px !important;
}
 .k-pager{
   background-color: #ffffff !important
}
div.k-grid-content td{
  border-right: 1px solid #fff !important;
}
div.EditDeleteProduct div.k-grid-header tr{
   background: #ff8306 !important;
   color: white
}
div.EditDeleteProduct div.k-grid-content td{
   border-right: 1px solid white !important;
   border-bottom: 1px solid white !important;
   padding: 0px !important;
   height: 40px;
}

div#editproduct .k-pager{
   background-color: white !important;
}

@media only screen and (min-width : 820px) and (max-width:912px) {
    
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       width: 23px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 106px !important;
   }

   div.header div.infobar div.message{
       width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
   div.editProduct #header > :nth-child(2){
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
       
   }
   div.editProduct #header div#searchbar{
       flex: 1.5;
       width: 82%;
       
   }
   div.editProduct #header div#infobar{
       
       width: 90%;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(1){
       
      flex: 2;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 2;
       
    }
    div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 3;
       
    }
    div.editProduct .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }
}
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 2;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
       width: 46px;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
   div.header div.searchbar{
       flex: 3;
   }
   div.header div.infobar{
       flex: 2;
   }
   div.editProduct .k-grid-header span.k-column-title{
    font-size: 12px !important;
   }
    
}

@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 18px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div#header div#infobar div.message{
   }
   div#header div#infobar div.message:nth-child(3){
       width: auto;
   }
   div#header div#searchbar{
       flex: 3;
   }
   div#header div#infobar{
       flex: 3;
   }
   div.editProduct .k-grid-header span.k-column-title{
    font-size: 12px !important;
   }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
     width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.editProduct #header > :nth-child(2){
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
       
   }
   div.editProduct #header div#searchbar{
       flex: 1.5;
       width: 82%;
       
   }
   div.editProduct #header div#infobar{
       
       width: 90%;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(1){
       
      flex: 2;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 2;
       
    }
    div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 3;
       
    }
    div.editProduct .k-grid-header span.k-column-title{
        font-size: 12px !important;
       }
  

}

@media only screen and (min-width : 992px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: block;
   }
}

@media only screen and (min-width : 1200px)and (orientation:portrait) {
  div.editProduct > :first-child{
       display: block !important;
   }
}

@media only screen and (min-width : 820px) and (max-width:912px) {

}

@media only screen and (min-width : 200px) and (orientation:portrait) {

}
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

@media only screen and (min-width : 480px) and (orientation:portrait) {

}

@media only screen and (min-width : 768px) and (orientation:portrait) {
 

}

@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

@media only screen and (min-width : 1200px) and (orientation:portrait) {

}

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       width: 23px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
       width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
    
}

@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 2;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
       width: 100px !important;
   }

   div.header div.infobar div.message{
       width: 46px;
   }
   div.header div.infobar div.message:nth-child(3){
       width: auto;
   }
   div.header div.searchbar{
       flex: 3;
   }
   div.header div.infobar{
       flex: 2;
   }        
}

@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div#waste{
       flex: 18px;
   }
   div.message svg{
       font-size: 20px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th#header{
       width: 100px !important;
   }

   div#header div#infobar div.message{
   }
   div#header div#infobar div.message:nth-child(3){
       width: auto;
   }
   div#header div#searchbar{
       flex: 3;
   }
   div#header div#infobar{
       flex: 3;
   }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
  div.editProduct > :first-child{
       display: none !important;
       
   }
   div.editProduct div.k-grid-content.k-virtual-content td input{
       font-size: 14px;
   }
   div.editProduct div.k-grid-content.k-virtual-content td{
       width: 106px !important;
   }
   div.editProduct div.k-grid-content td{
       width: 30px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td span{
       font-size: 14px !important;
   }
   div.editProduct div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
}
   th.header{
     width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.editProduct #header > :nth-child(2){
       flex-direction: column-reverse;
       align-items: center;
       justify-content: center;
       
   }
   div.editProduct #header div#searchbar{
       flex: 1.5;
       width: 82%;
       
   }
   div.editProduct #header div#infobar{
       
       width: 90%;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(1){
       
      flex: 2;
       
   }
   div.editProduct #header div#infobar div.message:nth-child(2){
       
       flex: 2;
       
    }
    div.editProduct  #header div#infobar div.message:nth-child(2){
       
       flex: 3;
       
    }
    
}

@media only screen and (max-width: 768px) {

   .menures{
       position: absolute;
       z-index: 2;
       width: 55%;
   }
   .menubaricon{
       z-index: 3;
       position: absolute;
    left: 0;
    top: 5%;
   }
   div[name="mainmenu"]{
       height: auto !important;
   }
   .div[name="mainmenu"] .k-expander{
       width: 100% !important;
   }
   .k-expander-indicator{
       position: absolute;
       right: 5%;
   }
   #waste{
       display: none;
   }
   #searchbar{
       width: 80%;
   }
   #infobar{
       width: 80%;
       justify-content: end !important;
   }
   .headerres{
       flex-direction: column-reverse;
       justify-content: center;
       align-items: end;
       margin-bottom: 2%;
   }

   div.editProduct select {
     background-color: #ffac00 !important;
     background: #ffac00 !important;
     text-align: center;
}
}

div.EditDeleteProduct table tbody tr:nth-of-type(even) td{
  background: rgb(189 208 254) !important
}

div.EditDeleteProduct table tbody tr{
   height: 40px !important;
}
 div.EditDeleteProduct div.k-grid{
   height: 495.8px !important;
}
 div.productdesignlist div.tblproductdesignlist tbody tr{
   height: 35px !important;
}

 div.productdesignlist div.tblproductdesignlist tbody tr td{
   height: 100% !important;
}
 div.productdesignlist div.tblproductdesignlist table tbody tr:nth-of-type(even) td div{
   display: flex;
   justify-content: center;
}
 div#editProduct input.k-input-inner{
   background: #e6e6e6 !important;
}
 div.EditDeleteProduct.productdesignlist input.k-input-inner{
    
   background: #e6e6e6 !important;
}

.EditDeleteProduct {
   padding: 1rem; 
   box-sizing: border-box;
}

.content-card {
   background: white;
   padding: 1.5rem; 
   border-radius: 16px; 
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07); 
   margin: 0 auto; 
   width: 100%;
   box-sizing: border-box;
}

.filters-header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem; 
   flex-wrap: wrap; 
   gap: 1rem; 
}

.filters-title {
   font-size: 1.25rem; 
   border-bottom: 3px solid #ff8306; 
   padding-bottom: 0.3rem;
   font-weight: bold;
   color: #2c3e50; 
}

.clear-filters-button {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem; 
   background-color: #ff8306;
   color: white;
   padding: 0.5rem 1rem; 
   border-radius: 8px;
   font-weight: bold;
   font-size: 0.9rem;
   cursor: pointer;
   transition: background-color 0.25s ease, transform 0.15s ease;
   border: none;
   text-align: center;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.clear-filters-button:hover {
   background-color: #e67305; 
   transform: translateY(-1px); 
}

.clear-filters-button:active {
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.clear-filters-button svg {
   font-size: 1.1em; 
}

.filterlist {
   display: flex;
   flex-wrap: wrap; 
   gap: 1.25rem; 
   margin-bottom: 1.5rem;
}

.filterlist > div[class*="col-"] { 
   padding: 0 !important; 
   min-width: 180px; 
   flex-grow: 1; 
   flex-basis: calc(50% - 1.25rem); 
}

@media (min-width: 768px) {
   .filterlist > div.col-2 { 
       flex-basis: calc(25% - 1.25rem); 
       max-width: calc(25% - 1.25rem);
   }
   .filterlist > div.col-6 { 
       flex-basis: calc(50% - 1.25rem); 
       max-width: calc(50% - 1.25rem);
   }
}

@media (min-width: 992px) {
    .filterlist > div.col-2 {
       flex-basis: calc(16.666% - 1.25rem); 
       max-width: calc(16.666% - 1.25rem);
   }
   .filterlist > div.col-6 {
       flex-basis: calc(50% - 1.25rem); 
       max-width: calc(50% - 1.25rem);
   }
}

.attname input.k-input-inner {
   width: 100%;
   padding: 0.7rem 0.9rem; 
   font-size: 0.9rem;
   background-color: #f8f9fa; 
   border: 1px solid #dfe4ea; 
   border-radius: 6px; 
   box-sizing: border-box;
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
   color: #343a40; 
}

.attname input.k-input-inner::placeholder {
   color: #6c757d; 
}

.attname input.k-input-inner:focus {
   background-color: #ffffff; 
   border-color: #ff8306; 
   box-shadow: 0 0 0 0.15rem rgba(255, 131, 6, 0.2); 
   outline: none;
}

.k-grid {
   border-radius: 8px;
   overflow: hidden; 
   border: 1px solid #e9ecef; 
   box-shadow: 0 2px 4px rgba(0,0,0,0.03); 
}

.k-grid .k-grid-header { 
   background-color: #f8f9fa !important; 
}

.k-grid .k-grid-header .k-header { 
   font-weight: 600 !important; 
   color: #495057 !important;
   text-transform: capitalize !important; 
   font-size: 0.875rem !important;
   border-bottom-width: 1px !important; 
   border-color: #dee2e6 !important;
   padding: 0.75rem 1rem !important; 
}

.k-grid td {
   padding: 0.75rem 1rem !important; 
   border-color: #e9ecef !important;
   font-size: 0.9rem;
   color: #343a40;
   vertical-align: middle; 
}

.k-grid .k-table-alt-row td { 
   background-color: #fdfdfe !important; 
}

.k-grid td .d-flex { 
   align-items: center;
   gap: 0.1rem; 
}

.k-grid td .d-flex svg { 
   font-size: 1.2rem; 
   color: #5a67d8; 
   cursor: pointer;
   transition: color 0.2s ease, transform 0.2s ease;
   display: block; 
   margin: auto; 
}

.k-grid td .d-flex svg:hover {
   color: #ff8306; 
   transform: scale(1.1); 
}

.k-grid td .d-flex svg.k-icon-delete-class { 
   color: #e53e3e !important;
}
.k-grid td .d-flex svg.k-icon-delete-class:hover {
   color: #c53030 !important;
}
#editProduct .EditDeleteProduct > div:first-child > .tooltipbuttons > svg[title*="back"] {
   color: #ff8306; 
   transition: transform 0.2s ease;
}

#editProduct .EditDeleteProduct > div:first-child > .tooltipbuttons > svg[title*="back"]:hover {
   transform: scale(1.15); 
}

.k-tooltip.tooltipbuttons {
   background-color: #2c3e50 !important; 
   color: white !important;
   border-radius: 5px !important;
   padding: 0.4rem 0.7rem !important;
   font-size: 0.8rem !important;
   box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}

.k-grid.tblproductdesignlist .k-grid-norecords td div { 
   color: #6c757d;
   font-size: 1rem;
}
.k-grid.tblproductdesignlist .k-grid-norecords .k-loading-color { 
   color: #ff8306 !important; 
} */


.menures {
    height: 100vh; 
    position: sticky; 
    top: 0; 
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto; 
}
.menures .Logo { 
    padding: 15px;
    text-align: center;
}

.EditDeleteProduct {
    background-color: #ffffff; 
    padding: 30px; 
    max-width: 1400px; 
    width: 100%; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column;
    height: auto !important; 
    min-height: 80vh; 
}

.filters-header-container {
    background-color: #f7f7f7; 
    border-radius: 10px; 
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee; 
}

.filters-title {
    font-size: 1.4rem; 
    font-weight: bold;
    color: #333;
}

.clear-filters-button {
    display: flex;
    align-items: center;
    gap: 8px; 
    color: #ff8306; 
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s ease;
}

.clear-filters-button:hover {
    color: #e67500; 
}

.clear-filters-button svg {
    font-size: 1.2rem; 
}

.filterlist {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
    margin-bottom: 25px;
}

.filterlist .attname {
    flex: 1; 
    min-width: 200px; 
}

.k-input-inner { 
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd; 
    /* border-radius: 8px; */
    background-color: #fcfcfc; 
    color: #333;
    font-size: 1rem;
    outline: none;
    /* box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);  */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.k-input-inner:focus {
    border-color: #ff8306; 
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2); 
}

.k-grid {
    border: 1px solid #e0e0e0; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07); 
}

.k-grid-header th {
    background-color: #ff8306; 
    color: white;
    font-weight: bold;
    padding: 12px 15px;
    text-align: right; 
    border-color: #e67500; 
}

.k-grid-content td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0; 
    color: #444;
}

.k-grid-content tr:nth-child(even) {
    background-color: #f9f9f9; 
}

.k-grid-content .d-flex.justify-content-around svg,
.k-grid-content .d-flex.justify-content-center svg {
    color: #333; 
    font-size: 1.3rem; 
    transition: transform 0.2s ease, color 0.2s ease;
}

.k-grid-content .d-flex.justify-content-around svg:hover,
.k-grid-content .d-flex.justify-content-center svg:hover {
    transform: scale(1.1); 
    color: #e67500; 
}

.k-grid-content .col-2.col-md-2 {
    white-space: nowrap; 
}

.k-pager-wrap { 
    background-color: #f7f7f7; 
    border-top: 1px solid #e0e0e0;
    padding: 15px 20px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    margin-top: -1px; 
    display: flex;
    justify-content: space-between; 
    align-items: center;
    flex-wrap: wrap; 
    gap: 10px; 
}

.k-pager-numbers .k-button {
    background-color: #eee;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 0 3px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.k-pager-numbers .k-button:hover {
    background-color: #ff8306 !important;
    color: white;
    border-color: #ff8306 !important;
}

.k-pager-numbers .k-button.k-selected {
    background-color: #ff8306 !important;
    color: white;
    border-color: #ff8306 !important;
    font-weight: bold;
}

.k-pager-nav-buttons .k-button {
    background-color: #ff8306;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 0 5px;
    transition: background-color 0.2s ease;
}

.k-pager-nav-buttons .k-button:hover {
    background-color: #e67500;
}

.k-pager-info {
    color: #555;
    font-size: 0.9rem;
}

.k-pager-sizes {
    color: #555;
    font-size: 0.9rem;
}

.tooltipbuttons svg {
    color: #ff8306; 
    transition: transform 0.2s ease, color 0.2s ease;
}

.tooltipbuttons svg:hover {
    transform: scale(1.1);
    color: #e67500;
}

.k-loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; 
    min-height: 200px; 
}

.k-loader-container .k-loader-segment { 
    border-color: #ff8306 transparent #ff8306 transparent;
}
/* @font-face{
    font-family: sarabun;
  src:  url("../assets/fonts/segeio/segoeui-bold-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bold-webfont.woff") format("woff")
  }
  @font-face{
    font-family: sarabun_italic;
  src:  url("../assets/fonts/segeio/segoeui-italic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-italic-webfont.woff") format("woff")
  }
  
  @font-face{
    font-family: sarabun_bolditalic;
  src:  url("../assets/fonts/segeio/segoeui-bolditalic-webfont.ttf"),url("../assets/fonts/segeio/segoeui-bolditalic-webfont.woff") format("woff")
  } */

div#settings div.bottom{
    background: white;
    border-radius: 5px;
}


div#settings div.bottom.row div.left >:nth-child(1){
     color: #ed7d43;
     font-size: 23px;
     font-family: sarabun_bolditalic;
     margin-top: 21px;
     margin-left: 50px;
     width: 100%;
     margin-bottom: 13px;
}

div#settings div.phones div.k-listview-content{
    align-items: center;
    display: flex;
    border-radius: 4px;
    flex-wrap: wrap;
}
div#settings div.phones div.k-listview-content div{
    width: 15% !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-top: 3px;
    border-bottom: 0px !important;
    font-family:sarabun_bolditalic ;
    background: white;
}

div#settings div.bottom.row div.userinfo  input{
  border: 1px solid #d4d2d2;
  border-radius: 18px;
  background: #d4d2d2;
  text-align: center;
} 
div#settings div.bottom.row div.etsyinfo  input{
   border: 1px solid #d4d2d2;
   border-radius: 18px;
   background: #d4d2d2;
   text-align: center;
 } 


div#settings div.addresses div.item.header{
  height:36px;
  border-radius:5px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
  border:3px solid black
}
div#settings div.addresses div.item.header div{
  font-family:sarabun_bolditalic;
  color:white;
  background:#06111f;
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  
}
div#settings div.addresses div.item.header >:nth-child(6){
  flex:3;
}
div#settings div.addresses div.item.content div{
  font-family:sarabun_bolditalic;
  color:white;
  background:#06111f;
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  border-right:3px solid black
  
}
div#settings div.addresses div.item.content >:nth-child(6){
  flex:3;
}
div#settings div.addresses div.item.content input{
  height: 100%;
  width: 100%;
  font-size: 11px;
}

div#settings div.addresses div.item.content.readonly div{
  font-family:sarabun_bolditalic;
  color:black;
  background:#dadada;
  display:flex;
  justify-content:center;
  align-items:center;
  border-right:3px solid black
  
}
div#settings div.addresses div.item.content.readonly input{
  height: 100%;
  width: 100%;
  font-size: 11px;
}

div#settings div.addresses div.item.content div.op{
flex: .5;
  
}
div#settings div.addresses div.header div.op{
  flex: .5;
    
  }
  div#settings div.language{
    font-family: sarabun_bolditalic;
    color: rgb(68, 68, 68)
  }
  div#settings .k-picker-solid:hover, .k-picker-solid.k-hover{
    background-color: #c0b3b3 !important;
  }
  div#settings div.bottom.row div.userinfo{
  margin-bottom: 15px;
  } 
  div#settings div.bottom.row div.etsyinfo{
   margin-bottom: 15px;
   } 

  div.language li{
    font-family: sarabun_bolditalic;
    color: white;
  }
  div.language div.k-list-content{
    background: #343232
  }

  label.radioinp{
   color:#6a6969
  }
    :root{
   --s: 1em; 
   --c: #009688;
    }
input[type="radio"] {
 

    height: 1em;
    aspect-ratio: 1;
    border: calc(1em / 8) solid #939393;
    padding: calc(1em / 8);
    background: radial-gradient(farthest-side, #009688 94%, #0000) 50%/0 0
    no-repeat content-box;
    border-radius: 50%;
    outline-offset: calc(1em / 10);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: inherit;
    transition: 0.3s;
}
input[type="radio"]:checked {
    border-color: #009688;
    background-size: 100% 100%;
}

input[type="radio"]:disabled {
    background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
    opacity: 0.5;
    cursor: not-allowed;
}

@media print {
    input[type="radio"] {
        -webkit-appearance: auto;
        -moz-appearance: auto;
        appearance: auto;
        background: none;
    }
}

label.radioinp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0;
    cursor: pointer;
    direction: ltr;
}

.form__group {
    position: relative;
    padding: 15px 0 0;
    margin-top: 30px;
    width: 90%;
    float: left;
}

.form__field {
    font-family: inherit;
    width: 100%;
    border: 0 !important;
    border-bottom: 1px solid #9b9b9b !important;
    outline: 0;
    font-size: 1.3rem;
    color: #3d3d3d;
    padding: 7px 0;
    background: #fff;
    transition: border-color 0.2s;
    text-align: start;
}
.form__field::placeholder {
    color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
    font-size: 1.3rem;
    cursor: text;
    top: 20px;
}

.form__label {
    position: absolute;
    top: -5px;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: #b3b3b3;
    left: 0;
}

.form__field:focus {
    padding-bottom: 6px;
    font-weight: 700;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1 !important;
}
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    font-weight: 700;
}
.form__field:required, .form__field:invalid {
    box-shadow: none;
}




    

@media only screen and (min-width : 820px) and (max-width:912px) {
    
}
@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.settings  > :first-child{
      display: none !important;
      
   }
   div#waste{
      width: 23px;
   }
   div.message svg{
      font-size: 20px !important;
   }


   div.header div.infobar div.message{
      width: 46;
   }
   div.header div.infobar div.message:nth-child(3){
      width: auto;
   }
   div.settings  #header > :nth-child(2){
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      
   }
   div.settings  #header div#searchbar{
      flex: 1.5;
      width: 82%;
      
   }
   div.settings  #header div#infobar{
      
      width: 90%;
      flex: 1 !important;
      
   }
   div.settings  #header div#infobar div.message:nth-child(1){
      
     flex: 2;
      
   }
   div.settings  #header div#infobar div.message:nth-child(2){
      
      flex: 2;
       
    }
    div.settings  #header div#infobar div.message:nth-child(2){
      
      flex: 3;
       
    }

     div#settings div.userinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.userinfo div{
      width:100%
     }
     div#settings div.etsyinfo div{
      width:100%
     }
     div.addphones{
      width: 90% !important;
     }
     div#settings div.phones div.k-listview-content div{
      width: 48% !important;
     }
     div#settings div.addresses{
      overflow: scroll;
     }
     div#settings div.addresses div.item div{
      min-width: 40px
     }
     div.settings{
      justify-content: center;
     }
     div.settings div.respnsive{
      height: unset !important;
     }
     div#settings div.item.header{
      width: 268%;
     }
     div#settings div.k-listview-content{
      width: 268%;
     }
     div#settings div[name='contactinfo'] div.k-listview-content{
      width: unset;
     }

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 760px) and  (max-width:1240px)and (orientation:portrait) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
   
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }

   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }

   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait){
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
  

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
  div.insertProduct  > :first-child{
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
  div.insertProduct  > :first-child{
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {

}





@media only screen and (min-width : 200px) and (orientation:portrait) {

}
/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) and (orientation:portrait) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) and (orientation:portrait) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {
 

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:portrait) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {

}


/* jjjjjj/jjj */

@media only screen and  (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }

   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }


   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
   
}


@media only screen and  (min-width : 760px) and  (max-width:1240px)and (orientation:landscape) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
}


@media only screen and (min-width : 539px) and (max-width :759px)and  (orientation:landscape) {
  div.settings  > :first-child{
    display: none !important;
    
 }
 div#waste{
    width: 23px;
 }
 div.message svg{
    font-size: 20px !important;
 }


 div.header div.infobar div.message{
    width: 46;
 }
 div.header div.infobar div.message:nth-child(3){
    width: auto;
 }
 div.settings  #header > :nth-child(2){
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    
 }
 div.settings  #header div#searchbar{
    flex: 1.5;
    width: 82%;
    
 }
 div.settings  #header div#infobar{
    
    width: 90%;
    flex: 1 !important;
    
 }
 div.settings  #header div#infobar div.message:nth-child(1){
    
   flex: 2;
    
 }
 div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 2;
     
  }
  div.settings  #header div#infobar div.message:nth-child(2){
    
    flex: 3;
     
  }

   div#settings div.userinfo{
    flex-direction: column;
    align-items: center;
   }
   div#settings div.userinfo div{
    width:100%
   }
   div#settings div.etsyinfo{
      flex-direction: column;
      align-items: center;
     }
     div#settings div.etsyinfo div{
      width:100%
     }
   div.addphones{
    width: 90% !important;
   }
   div#settings div.phones div.k-listview-content div{
    width: 48% !important;
   }
   div#settings div.addresses{
    overflow: scroll;
   }
   div#settings div.addresses div.item div{
    min-width: 40px
   }
   div.settings{
    justify-content: center;
   }
   div.settings div.respnsive{
    height: unset !important;
   }
   div#settings div.item.header{
    width: 268%;
   }
   div#settings div.k-listview-content{
    width: 268%;
   }
   div#settings div[name="contactinfo"] div.k-listview-content{
      width: unset
     }
}

@media only screen and   (min-width : 280px) and (max-width:299px)and  (orientation:landscape) {
  div.insertProduct  > :first-child{
      display: none !important;
      
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td input{
      font-size: 14px;
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td{
      width: 106px !important;
   }
   div.insertProduct  div.k-grid-content td{
      width: 30px !important;
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td span{
      font-size: 14px;
   }
   div.insertProduct  div.k-grid-content.k-virtual-content td svg{
    font-size: 21px;
 }
   th.header{
      width: 100px !important;
  }
  th.header span.k-column-title{
      font-size:12px;
  }
   div.insertProduct  #header > :nth-child(2){
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;
      
   }
   div.insertProduct  #header div#searchbar{
      flex: 3;
      width: 82%;
      
   }
   div.insertProduct  #header div#infobar{
      
      width: 90%;
      
   }
   div.insertProduct  #header div#infobar div.message:nth-child(1){
      
     flex: 1;
      
   }
   div.insertProduct  #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
    div.insertProduct   #header div#infobar div.message:nth-child(2){
      
      flex: 1;
       
    }
   
}

@media only screen and   (min-width : 1280px) and  (orientation:landscape){
   div.insertProduct{
      justify-content: center;
      width: 100% !important;
   }
   div.category:focus-visible{
      outline:unset !important
   }
}


div.category:focus-visible{
   outline:unset !important
}
div.settingresinputdiv div.form__group.field{
   margin-top: 0px !important;
}
div.settingresinputdiv .form__field{
   font-size: 1vw !important;
   font-family:sarabun_bolditalic !important;
   margin-bottom: 9px !important;
   direction: ltr;
   text-align: left !important;
}
div.settingresinputdiv .form__label{
   font-size: .9vw !important;
   font-family:sarabun_bolditalic !important;
}
div.settingweight div.form__group{
   margin-top: 0px !important;
}
div.settingweight .form__label{
   font-size: .9vw !important;
   font-family:sarabun_bolditalic !important;
}
div.settingweight .form__field{
   font-size: 1vw !important;
   font-family:sarabun_bolditalic !important;
   
}

.custom-tab-button {
   background-color: #fff !important;
   border-radius: 0.25rem 0.25rem 0 0;
   color: #ff8306 !important;
 }
.custom-tab-button:hover {
   background-color: #fff !important;
    color: #ff8306 !important;
    border-radius: 0.25rem 0.25rem 0 0;
    border-color: #ff8306 !important;
 }
 
 .custom-tab-button[style*="border-top: 3px solid rgb(255, 131, 6)"]:hover, 
 .custom-tab-button[style*="color: rgb(255, 131, 6)"]:hover {
   background-color: rgb(240, 240, 250); 
   color: #ff8306; 
   border-top: 3px solid #ff8306; 
   border-left: 1px solid #dee2e6;
   border-right: 1px solid #dee2e6;
 }

/* Dark theme - /Setting */
[data-theme="dark"] .setting-page {
  background: #0f1117 !important;
}

[data-theme="dark"] .setting-page .menures > div[name="mainmenu"] {
  border-right-color: #2a2d3a !important;
}

[data-theme="dark"] .setting-page .setting-main-wrap,
[data-theme="dark"] .setting-page .setting-content-wrap {
  background: #0f1117 !important;
}

[data-theme="dark"] .setting-page #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .setting-page .setting-page-title {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .setting-page .setting-tab-container {
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .setting-page .setting-tab-content {
  background: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .setting-page .custom-tab-button {
  background-color: #1a1d27 !important;
  color: #c4c8d4 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .setting-page .custom-tab-button:hover {
  color: #ff9f3f !important;
  border-color: #ff8306 !important;
}

[data-theme="dark"] .setting-page .custom-tab-button[style*="border-top: 3px solid"] {
  background-color: #161926 !important;
  color: #ff8306 !important;
  border-left-color: #2a2d3a !important;
  border-right-color: #2a2d3a !important;
}

[data-theme="dark"] .setting-page .setting-card {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .setting-page .text-muted {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .setting-page .form-select {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .setting-page .form__field {
  background: #13151f !important;
  border-bottom-color: #3a4055 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .setting-page .form__label {
  color: #a6adc7 !important;
}

[data-theme="dark"] .setting-page .showpasssetting {
  color: #c4c8d4 !important;
}

[data-theme="dark"] .setting-page .setting-stitch-tier-wrap {
  background: #13151f;
  border: 1px solid #2a2d3a;
  border-radius: 8px;
  padding: 0.5rem;
}

[data-theme="dark"] .setting-page .setting-stitch-tier-table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: #1a1d27;
  --bs-table-color: #e8eaf0;
  --bs-table-border-color: #2a2d3a;
  color: #e8eaf0;
  background-color: #13151f;
  margin-bottom: 0;
}

[data-theme="dark"] .setting-page .setting-stitch-tier-table thead th {
  background-color: #161926;
  color: #e8eaf0;
  border-color: #2a2d3a;
}

[data-theme="dark"] .setting-page .setting-stitch-tier-table tbody td {
  background-color: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .setting-page .setting-stitch-tier-table .form-control {
  background-color: #0f1117;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .setting-page .setting-stitch-tier-table .form-control::placeholder {
  color: #6b7280;
}

.setting-engine-health-panel {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  padding: 1rem;
}

[data-theme="dark"] .setting-page .setting-engine-health-panel {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .setting-page .setting-engine-health-panel strong {
  color: #e8eaf0;
}

[data-theme="dark"] .setting-page .setting-engine-health-panel .text-muted {
  color: #9ca3af !important;
}


/* ============================================================
   Settings (/Setting) — modern layout, dark-theme ready
   ============================================================ */

.settings-page {
  --sp-bg: var(--dash-bg, #f1f3f8);
  --sp-panel: var(--dash-card, #ffffff);
  --sp-border: var(--dash-border, #e8eaf0);
  --sp-text: var(--dash-text-primary, #111827);
  --sp-text-muted: var(--dash-text-secondary, #6b7280);
  --sp-accent: var(--nav-primary, #ff8306);
  --sp-accent-hover: var(--nav-primary-hover, #e07000);
  --sp-accent-soft: var(--dash-accent-light, rgba(255, 131, 6, 0.12));
  --sp-input-bg: #ffffff;
  --sp-input-border: #d1d5db;
  --sp-input-text: #111827;
  --sp-shadow: var(--dash-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  --sp-radius: 12px;
  --sp-radius-sm: 8px;
  min-height: 100vh;
  background: var(--sp-bg);
  color: var(--sp-text);
}

[data-theme="dark"] .settings-page {
  --sp-bg: #0f1117;
  --sp-panel: #1a1d27;
  --sp-border: #2a2d3a;
  --sp-text: #f0f1f5;
  --sp-text-muted: #c4c8d8;
  --sp-accent-soft: rgba(255, 131, 6, 0.14);
  --sp-input-bg: #222632;
  --sp-input-border: #3a3f52;
  --sp-input-text: #f0f1f5;
  --sp-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .settings-page .text-muted,
[data-theme="dark"] .settings-page .sp-text-muted {
  color: #c4c8d8 !important;
}

.settings-page .sp-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-page .sp-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
}

.settings-page .sp-inner {
  max-width: 1180px;
  margin: 0 auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.settings-page .sp-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}

.settings-page .sp-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: var(--sp-input-bg);
  color: var(--sp-accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.settings-page .sp-back-btn:hover {
  border-color: var(--sp-accent);
  background: var(--sp-accent-soft);
}

.settings-page .sp-page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sp-text);
}

.settings-page .sp-page-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--sp-text-muted);
}

/* Tabs */
.settings-page .sp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px;
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}

.settings-page .sp-tab {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: var(--sp-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.settings-page .sp-tab:hover {
  color: var(--sp-accent);
  background: var(--sp-accent-soft);
}

.settings-page .sp-tab--active {
  background: var(--sp-accent);
  color: #fff;
  border-color: var(--sp-accent);
}

.settings-page .sp-tab-panel {
  animation: spFadeIn 0.2s ease;
}

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

/* Cards */
.settings-page .sp-card {
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  padding: 22px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.settings-page .sp-card--center {
  align-items: center;
  justify-content: center;
}

.settings-page .sp-card-title {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sp-accent);
}

.settings-page .sp-text-muted {
  color: var(--sp-text-muted);
}

.settings-page .sp-card-desc {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--sp-text-muted);
}

.settings-page .sp-card-hint {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--sp-text-muted);
}

/* Avatar */
.settings-page .sp-avatar-wrap {
  cursor: pointer;
  position: relative;
}

.settings-page .sp-avatar-wrap img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(255, 131, 6, 0.35);
  padding: 3px;
  background: var(--sp-panel);
  transition: border-color 0.15s, transform 0.15s;
}

.settings-page .sp-avatar-wrap:hover img {
  border-color: var(--sp-accent);
  transform: scale(1.02);
}

/* Modern inputs (override legacy form__field in this page) */
.settings-page .form__group.field {
  margin-top: 0;
  padding-top: 0;
  width: 100%;
  float: none;
}

.settings-page .form__field {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--sp-input-border) !important;
  border-radius: var(--sp-radius-sm) !important;
  background: var(--sp-input-bg) !important;
  color: var(--sp-input-text) !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  border-image: none !important;
  text-align: left !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.settings-page .form__field:focus {
  outline: none;
  border-color: var(--sp-accent) !important;
  box-shadow: 0 0 0 3px var(--sp-accent-soft);
  padding-bottom: 0 !important;
}

.settings-page .form__label {
  position: static;
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sp-text-muted);
}

.settings-page .form__field:focus ~ .form__label,
.settings-page .form__field:placeholder-shown ~ .form__label {
  position: static;
  font-size: 0.8125rem;
  font-weight: 600;
  top: auto;
}

.settings-page .form-select,
.settings-page .form-control {
  height: 42px;
  border: 1px solid var(--sp-input-border);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-input-bg);
  color: var(--sp-input-text);
  font-size: 0.9375rem;
}

.settings-page .form-select:focus,
.settings-page .form-control:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-soft);
  outline: none;
}

.settings-page textarea.form-control {
  height: auto;
  min-height: 80px;
}

.settings-page .showpasssetting {
  background: transparent;
  border: none;
  color: var(--sp-text-muted);
  cursor: pointer;
}

.settings-page .showpasssetting:hover {
  color: var(--sp-accent);
}

/* Buttons */
.settings-page .sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--sp-radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.settings-page .sp-btn--primary {
  background: var(--sp-accent);
  color: #fff;
  border-color: var(--sp-accent);
}

.settings-page .sp-btn--primary:hover:not(:disabled) {
  background: var(--sp-accent-hover);
  border-color: var(--sp-accent-hover);
}

.settings-page .sp-btn--primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.settings-page .sp-btn--outline {
  background: transparent;
  border-color: var(--sp-border);
  color: var(--sp-text);
}

.settings-page .sp-btn--outline:hover {
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

.settings-page .sp-btn--danger {
  background: transparent;
  border-color: #ef4444;
  color: #ef4444;
}

.settings-page .sp-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Checkboxes */
.settings-page .form-check-input {
  border-color: var(--sp-input-border);
  background-color: var(--sp-input-bg);
}

.settings-page .form-check-input:checked {
  background-color: var(--sp-accent);
  border-color: var(--sp-accent);
}

.settings-page .form-check-label {
  color: var(--sp-text);
  font-size: 0.9375rem;
}

/* Tables (embroidery admin) */
.settings-page .setting-stitch-tier-wrap {
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
}

.settings-page .setting-stitch-tier-table {
  margin: 0;
  color: var(--sp-text);
}

.settings-page .setting-stitch-tier-table thead th {
  background: var(--sp-accent-soft);
  color: var(--sp-text);
  font-size: 0.8125rem;
  font-weight: 700;
  border-color: var(--sp-border);
  padding: 10px 12px;
}

.settings-page .setting-stitch-tier-table tbody td {
  border-color: var(--sp-border);
  vertical-align: middle;
  background: var(--sp-panel);
}

.settings-page .setting-stitch-tier-table .form-control {
  height: 36px;
  font-size: 0.875rem;
}

.settings-page .setting-engine-health-panel {
  padding: 14px 16px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--sp-input-bg);
}

/* Grid layout helpers */
.settings-page .sp-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .settings-page .sp-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Dark — pager / misc overrides layered on setting.css */
[data-theme="dark"] .settings-page .setting-stitch-tier-table tbody td {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .settings-page .setting-stitch-tier-table thead th {
  background: rgba(255, 131, 6, 0.15) !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .settings-page .sp-tab--active {
  color: #fff;
}

.settings-page .telegram-prefs-panel {
  margin-bottom: 1rem;
  padding: 1rem 1.125rem;
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-border);
  background: var(--sp-accent-soft);
}

.settings-page .telegram-prefs-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--sp-text);
}

.settings-page .telegram-prefs-desc {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--sp-text-muted);
}

.settings-page .telegram-prefs-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.settings-page .telegram-prefs-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(25, 135, 84, 0.15);
  color: #198754;
}

[data-theme="dark"] .settings-page .telegram-prefs-badge {
  background: rgba(25, 135, 84, 0.25);
  color: #6ee7a0;
}

.settings-page .telegram-prefs-note {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sp-text);
  opacity: 0.92;
}

.settings-page .telegram-prefs-meta {
  font-size: 0.875rem;
  color: var(--sp-text-muted);
}

.settings-page .telegram-link-box {
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--sp-radius-sm);
  border: 1px dashed var(--sp-border);
  background: var(--sp-panel);
}

.settings-page .telegram-link-box-label {
  margin-bottom: 0.375rem;
  font-size: 0.85rem;
  color: var(--sp-text);
  opacity: 0.9;
}

.settings-page .telegram-link-box-url {
  display: block;
  word-break: break-all;
  font-size: 0.875rem;
  color: var(--sp-accent);
  text-decoration: none;
}

.settings-page .telegram-link-box-url:hover {
  text-decoration: underline;
}

.settings-page .telegram-link-box-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}

.settings-page .sp-btn--secondary {
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  color: var(--sp-text);
}

.settings-page .sp-btn--secondary:hover:not(:disabled) {
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

.settings-page .sp-btn--ghost {
  background: transparent;
  border: 1px solid var(--sp-border);
  color: var(--sp-text-muted);
}

.settings-page .sp-btn--ghost:hover:not(:disabled) {
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

/* /digitize-queue — Embroidery Digitize admin queue */
.digitize-queue-page .dq-page-bg {
  background: #f0f0fa;
}

.digitize-queue-page .dq-content-strip {
  background: #f0f0fa;
}

.digitize-queue-page .dq-content-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.digitize-queue-page .dq-page-title {
  margin: 0;
  font-weight: 700;
}

.digitize-queue-page .dq-page-subtitle,
.digitize-queue-page .dq-muted,
.digitize-queue-page .dq-filter-label {
  color: #6c757d;
  font-size: 13px;
}

.digitize-queue-page .dq-filter-label {
  font-size: 12px;
  display: block;
}

.digitize-queue-page .dq-table thead tr {
  background: #f8f9fa;
}

.digitize-queue-page .dq-empty-cell {
  text-align: center;
  color: #6c757d;
  padding: 24px;
}

.digitize-queue-page .dq-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
}

.digitize-queue-page .dq-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  overflow-y: auto;
}

.digitize-queue-page .dq-modal-panel {
  background: #fff;
  border-radius: 12px;
  width: min(720px, 100%);
  margin-top: 30px;
}

.digitize-queue-page .dq-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.digitize-queue-page .dq-modal-body {
  padding: 20px;
}

.digitize-queue-page .dq-modal-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}

.digitize-queue-page .dq-error-box {
  background: #f8d7da;
  color: #842029;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}

.digitize-queue-page .dq-asset-row {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
}

.digitize-queue-page .dq-upload-box {
  border: 1px dashed #ced4da;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Dark mode */
[data-theme="dark"] .digitize-queue-page .dq-page-bg,
[data-theme="dark"] .digitize-queue-page .dq-content-strip {
  background: #1a1a2e;
}

[data-theme="dark"] .digitize-queue-page .dq-content-card {
  background: #252538;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .digitize-queue-page .dq-page-title {
  color: #f1f5f9;
}

[data-theme="dark"] .digitize-queue-page .dq-page-subtitle,
[data-theme="dark"] .digitize-queue-page .dq-muted,
[data-theme="dark"] .digitize-queue-page .dq-filter-label {
  color: #94a3b8;
}

[data-theme="dark"] .digitize-queue-page .form-control,
[data-theme="dark"] .digitize-queue-page .form-select {
  background: #1e1e30;
  border-color: #3f3f5a;
  color: #e2e8f0;
}

[data-theme="dark"] .digitize-queue-page .form-control::placeholder {
  color: #64748b;
}

[data-theme="dark"] .digitize-queue-page .btn-outline-secondary {
  color: #cbd5e1;
  border-color: #475569;
}

[data-theme="dark"] .digitize-queue-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e2e8f0;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
  --bs-table-border-color: #3f3f5a;
}

[data-theme="dark"] .digitize-queue-page .dq-table thead tr {
  background: #1e1e30;
}

[data-theme="dark"] .digitize-queue-page .dq-table th {
  color: #cbd5e1;
  border-color: #3f3f5a;
}

[data-theme="dark"] .digitize-queue-page .dq-table td {
  border-color: #3f3f5a;
  color: #e2e8f0;
}

[data-theme="dark"] .digitize-queue-page .dq-empty-cell {
  color: #94a3b8;
}

[data-theme="dark"] .digitize-queue-page .dq-thumb {
  border-color: #3f3f5a;
}

[data-theme="dark"] .digitize-queue-page .dq-modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .digitize-queue-page .dq-modal-panel {
  background: #252538;
}

[data-theme="dark"] .digitize-queue-page .dq-modal-header {
  border-bottom-color: #3f3f5a;
}

[data-theme="dark"] .digitize-queue-page .dq-modal-header h5 {
  color: #f1f5f9;
}

[data-theme="dark"] .digitize-queue-page .dq-modal-body {
  color: #e2e8f0;
}

[data-theme="dark"] .digitize-queue-page .dq-modal-thumb {
  border-color: #3f3f5a;
}

[data-theme="dark"] .digitize-queue-page .dq-asset-row {
  border-color: #3f3f5a;
}

[data-theme="dark"] .digitize-queue-page .dq-upload-box {
  border-color: #475569;
}

[data-theme="dark"] .digitize-queue-page .btn-light {
  background: #1e1e30;
  border-color: #3f3f5a;
  color: #e2e8f0;
}

/* Shared thread dropdown + stop sequence editor (my-digitize, mockup generator) */

.searchable-thread-select {
  position: relative;
  width: 100%;
  min-width: 200px;
}

.searchable-thread-select__control {
  display: flex;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background: #fff;
  color: #1e293b;
  min-height: 28px;
  height: 28px;
  cursor: text;
}

.searchable-thread-select--compact .searchable-thread-select__control {
  min-height: 24px;
  height: 24px;
  border-radius: 5px;
}

.searchable-thread-select__input {
  border: 0;
  outline: none;
  background: transparent;
  color: #1e293b;
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
  padding: 0 8px;
  height: 100%;
}

.searchable-thread-select__input[readonly] {
  cursor: pointer;
}

.searchable-thread-select__input::placeholder {
  color: #64748b;
  opacity: 1;
}

.searchable-thread-select--compact .searchable-thread-select__input {
  font-size: 10px;
  padding: 0 6px;
}

.searchable-thread-select--open .searchable-thread-select__control {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

.searchable-thread-select--disabled .searchable-thread-select__control {
  background: #e9ecef;
  color: #6b7280;
  cursor: not-allowed;
}

.searchable-thread-select--disabled .searchable-thread-select__input {
  color: #6b7280;
}

.searchable-thread-select__chevron {
  padding: 0 6px;
  font-size: 9px;
  color: #64748b;
  pointer-events: none;
  line-height: 1;
}

.searchable-thread-select__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 180px;
  overflow-y: auto;
  background: #fff;
  color: #1e293b;
  border: 1px solid #ced4da;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.searchable-thread-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #1e293b;
  text-align: left;
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
  min-height: 28px;
}

.searchable-thread-select__option:hover,
.searchable-thread-select__option.is-selected {
  background: #f1f5f9;
}

.searchable-thread-select__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  flex-shrink: 0;
}

.searchable-thread-select__label {
  line-height: 1.3;
  word-break: break-word;
  color: inherit;
}

.searchable-thread-select__empty {
  padding: 8px;
  font-size: 11px;
  color: #64748b;
}

.stop-sequence-editor .form-select {
  color: #1e293b;
  background-color: #fff;
}

[data-theme="dark"] .searchable-thread-select__control {
  background: #0f131a !important;
  border-color: #3d4759 !important;
  color: #e8eaed !important;
  box-shadow: none;
}

[data-theme="dark"] .searchable-thread-select--open .searchable-thread-select__control {
  border-color: #ff8306 !important;
  box-shadow: 0 0 0 0.12rem rgba(255, 131, 6, 0.22) !important;
}

[data-theme="dark"] .searchable-thread-select__input {
  color: #e8eaed !important;
  -webkit-text-fill-color: #e8eaed !important;
}

[data-theme="dark"] .searchable-thread-select__input::placeholder {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

[data-theme="dark"] .searchable-thread-select__chevron {
  color: #94a3b8 !important;
}

[data-theme="dark"] .searchable-thread-select__menu {
  background: #161b24 !important;
  border-color: #3d4759 !important;
  color: #e8eaed !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .searchable-thread-select__option {
  color: #e8eaed !important;
}

[data-theme="dark"] .searchable-thread-select__option:hover,
[data-theme="dark"] .searchable-thread-select__option.is-selected {
  background: #232b38 !important;
}

[data-theme="dark"] .searchable-thread-select__label {
  color: #e8eaed !important;
}

[data-theme="dark"] .searchable-thread-select__empty {
  color: #94a3b8 !important;
}

[data-theme="dark"] .searchable-thread-select--disabled .searchable-thread-select__control {
  background: #1a2030 !important;
  color: #64748b !important;
}

[data-theme="dark"] .searchable-thread-select--disabled .searchable-thread-select__input {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
}

[data-theme="dark"] .searchable-thread-select__swatch {
  border-color: #4b5563;
}

[data-theme="dark"] .stop-sequence-editor .form-select {
  background-color: #0f131a !important;
  border-color: #3d4759 !important;
  color: #e8eaed !important;
}

[data-theme="dark"] .searchable-thread-select__input[readonly] {
  color: #e8eaed !important;
  -webkit-text-fill-color: #e8eaed !important;
}

.searchable-thread-select--light-surface .searchable-thread-select__control {
  color: #1e293b !important;
  border-color: #cbd5e1;
}

.searchable-thread-select--light-surface .searchable-thread-select__input,
.searchable-thread-select--light-surface .searchable-thread-select__input[readonly] {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

.searchable-thread-select--light-surface .searchable-thread-select__chevron {
  color: #64748b !important;
}

[data-theme="dark"] .searchable-thread-select--light-surface .searchable-thread-select__control {
  background-color: inherit;
  border-color: #cbd5e1 !important;
  box-shadow: none;
}

[data-theme="dark"] .searchable-thread-select--light-surface.searchable-thread-select--open .searchable-thread-select__control {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.12rem rgba(13, 110, 253, 0.18) !important;
}

[data-theme="dark"] .searchable-thread-select--dark-surface .searchable-thread-select__control {
  color: #f8fafc !important;
}

[data-theme="dark"] .searchable-thread-select--dark-surface .searchable-thread-select__input,
[data-theme="dark"] .searchable-thread-select--dark-surface .searchable-thread-select__input[readonly] {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
}

[data-theme="dark"] .searchable-thread-select--dark-surface .searchable-thread-select__chevron {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .stop-sequence-editor .form-select option {
  background: #161b24;
  color: #e8eaed;
}

/* /my-digitize — user digitize jobs list */
.my-digitize-page .md-page-bg {
  background: #f0f0fa;
}

.my-digitize-page .md-page-header {
  background: #ffffff;
}

.my-digitize-page .md-content-strip {
  background: #f0f0fa;
}

.my-digitize-page .md-content-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.my-digitize-page .md-page-title {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #111827;
}

.my-digitize-page .md-page-subtitle,
.my-digitize-page .md-muted,
.my-digitize-page .md-filter-label {
  color: #6c757d;
  font-size: 13px;
}

.my-digitize-page .md-filter-label {
  font-size: 12px;
  display: block;
}

.my-digitize-page .md-row-title {
  font-weight: 600;
  color: #111827;
}

.my-digitize-page .md-date-cell {
  font-size: 12px;
}

.my-digitize-page .md-table thead tr {
  background: #f8f9fa;
}

.my-digitize-page .md-empty-cell {
  text-align: center;
  color: #6c757d;
  padding: 24px;
}

.my-digitize-page .md-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #eee;
  display: inline-block;
}

.my-digitize-page .md-thumb-empty {
  background: #eee;
}

/* Portal modals — body seviyesinde render edilir */
.my-digitize-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 3100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}

.my-digitize-modal-dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.my-digitize-modal-dialog--wide {
  width: min(980px, 96vw);
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.my-digitize-detail-modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  min-height: min(640px, calc(100vh - 32px));
}

.my-digitize-detail-modal__header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  color: #f8fafc;
  border: 0;
  padding: 16px 20px;
}

.my-digitize-detail-modal__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.72);
  margin-bottom: 2px;
}

.my-digitize-detail-modal__title {
  font-size: 1.15rem;
  color: #fff;
}

.my-digitize-detail-modal__close {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.my-digitize-detail-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.my-digitize-detail-modal__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.my-digitize-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.my-digitize-detail-main,
.my-digitize-detail-colors {
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.my-digitize-detail-main {
  border-right: 1px solid #e2e8f0;
  background: #ffffff;
}

.my-digitize-detail-colors {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.my-digitize-detail-billing {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: 13px;
}

.my-digitize-detail-colors__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  text-align: center;
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

@media (max-width: 860px) {
  .my-digitize-modal-dialog--wide {
    width: min(96vw, 100%);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
  }

  .my-digitize-detail-modal {
    min-height: auto;
    max-height: none;
  }

  .my-digitize-detail-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .my-digitize-detail-main {
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    max-height: none;
    overflow: visible;
  }

  .my-digitize-detail-colors {
    overflow: visible;
  }
}

.my-digitize-modal-card {
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  background: #ffffff;
}

.my-digitize-detail-preview {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid #dee2e6;
  border-radius: 8px;
}

.my-digitize-modal-card .card-body {
  padding: 1rem 1.25rem 1.25rem;
}

.my-digitize-fee-notice {
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.08);
  color: #1e40af;
}

[data-theme="dark"] .my-digitize-fee-notice {
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(59, 130, 246, 0.12);
  color: #bfdbfe;
}

body.my-digitize-modal-open {
  overflow: hidden;
}

/* Dark mode — aligned with mydesigns-page */
[data-theme="dark"] .my-digitize-page .md-page-bg {
  background: #0f1117 !important;
  color: #c8cad8;
}

[data-theme="dark"] .my-digitize-page .md-page-header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .my-digitize-page .md-content-strip {
  background: #13151f !important;
  color: #c8cad8;
}

[data-theme="dark"] .my-digitize-page .md-content-card {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  color: #e8eaf0;
}

[data-theme="dark"] .my-digitize-page .md-page-title,
[data-theme="dark"] .my-digitize-page .md-row-title {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .my-digitize-page .md-page-subtitle,
[data-theme="dark"] .my-digitize-page .md-muted,
[data-theme="dark"] .my-digitize-page .md-filter-label {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .my-digitize-page .form-control,
[data-theme="dark"] .my-digitize-page .form-select {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-digitize-page .btn-outline-secondary {
  border-color: #3d4154 !important;
  color: #c8cad8 !important;
}

[data-theme="dark"] .my-digitize-page .btn-light {
  background: #232635 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-digitize-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e2e8f0;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
  --bs-table-border-color: #2a2d3a;
}

[data-theme="dark"] .my-digitize-page .md-table thead tr {
  background: #13151f !important;
}

[data-theme="dark"] .my-digitize-page .md-table th {
  color: #cbd5e1;
  border-color: #2a2d3a;
}

[data-theme="dark"] .my-digitize-page .md-table td {
  border-color: #2a2d3a;
  color: #e2e8f0;
}

[data-theme="dark"] .my-digitize-page .md-empty-cell {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .my-digitize-page .md-thumb {
  border-color: #2a2d3a;
}

[data-theme="dark"] .my-digitize-page .md-thumb-empty {
  background: #232635;
}

[data-theme="dark"] .my-digitize-modal-backdrop {
  background: rgba(2, 6, 23, 0.7) !important;
}

[data-theme="dark"] .my-digitize-modal-card {
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .my-digitize-modal-card .card-header {
  background: #232635 !important;
  border-bottom-color: #2a2d3a !important;
  color: #f0f1f5;
}

[data-theme="dark"] .my-digitize-modal-card .card-body {
  background: transparent;
  color: #e8eaf0;
}

[data-theme="dark"] .my-digitize-detail-preview {
  border-color: #2a2d3a;
}

[data-theme="dark"] .my-digitize-modal-card a {
  color: #93c5fd;
}

[data-theme="dark"] .my-digitize-modal-card .form-control {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-digitize-detail-modal__header {
  background: linear-gradient(135deg, #0b0d14 0%, #151925 55%, #1f2433 100%);
}

[data-theme="dark"] .my-digitize-detail-main {
  background: #1a1d27;
  border-right-color: #2a2d3a;
}

[data-theme="dark"] .my-digitize-detail-colors {
  background: linear-gradient(180deg, #151925 0%, #13151f 100%);
}

[data-theme="dark"] .my-digitize-detail-billing,
[data-theme="dark"] .my-digitize-detail-colors__placeholder {
  background: #13151f;
  border-color: #2a2d3a;
  color: #c8cdd8;
}

[data-theme="dark"] .stop-sequence-editor--modal {
  background: rgba(19, 21, 31, 0.88);
  border-color: #2a2d3a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .stop-sequence-editor--modal .stop-sequence-table-wrap {
  background: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .stop-sequence-editor--modal .stop-sequence-table thead th {
  background: #232635;
  color: #cbd5e1;
}

[data-theme="dark"] .stop-sequence-editor--modal strong.d-block {
  color: #f0f1f5;
}

.stop-sequence-hint {
  font-size: 12px;
  color: #6c757d;
}

.stop-thread-cell {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 220px;
}

.stop-thread-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #ccc;
  flex-shrink: 0;
  margin-top: 4px;
}

.stop-thread-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.stop-thread-select {
  min-width: 200px;
  max-width: 100%;
  font-size: 11px;
}

.stop-thread-meta {
  font-size: 10px;
  line-height: 1.3;
  color: #495057;
  word-break: break-word;
}

.stop-sequence-table {
  font-size: 11px;
  margin-bottom: 0;
}

.stop-sequence-table-wrap {
  max-height: 280px;
  overflow: auto;
  border-radius: 10px;
}

.stop-sequence-table-wrap--modal {
  max-height: calc(100vh - 280px);
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.stop-sequence-editor--modal {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.stop-sequence-editor--modal .stop-thread-cell {
  align-items: center;
  min-width: 0;
}

.stop-sequence-editor--modal .stop-thread-swatch {
  width: 14px;
  height: 14px;
  margin-top: 0;
}

.stop-sequence-editor--modal .searchable-thread-select {
  min-width: 0;
}

.stop-sequence-editor--modal .searchable-thread-select__control {
  min-height: 24px;
  height: 24px;
}

.stop-sequence-editor--modal .stop-sequence-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  border-bottom-width: 1px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.stop-sequence-editor--modal .stop-sequence-table td {
  vertical-align: middle;
  padding-top: 6px;
  padding-bottom: 6px;
}

.stop-sequence-editor--modal strong.d-block {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #0f172a;
}

.stop-sequence-editor--modal .btn-sm {
  border-radius: 8px;
  font-size: 11px;
  padding: 4px 10px;
}

.stop-sequence-empty {
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #495057;
}

.stop-sequence-empty__title {
  font-weight: 600;
  margin: 0 0 6px;
  color: #212529;
}

.stop-sequence-empty__body {
  margin: 0 0 8px;
}

[data-theme="dark"] .stop-sequence-hint {
  color: #9ca3af;
}

[data-theme="dark"] .stop-thread-meta {
  color: #c8cdd8;
}

[data-theme="dark"] .stop-thread-swatch {
  border-color: #3a3f4f;
}

[data-theme="dark"] .stop-sequence-empty {
  background: #1a1d28;
  border-color: #2a2d3a;
  color: #c8cdd8;
}

[data-theme="dark"] .stop-sequence-empty__title {
  color: #f0f1f5;
}

[data-theme="dark"] .my-digitize-modal-card .stop-sequence-editor .table {
  --bs-table-bg: #13151f;
  --bs-table-color: #e8eaf0;
  --bs-table-border-color: #2a2d3a;
}

[data-theme="dark"] .my-digitize-modal-card .stop-sequence-editor .table thead th {
  background: #232635;
  color: #f0f1f5;
}

[data-theme="dark"] .stop-sequence-editor--modal .searchable-thread-select--light-surface .searchable-thread-select__control {
  background: #fff !important;
}

[data-theme="dark"] .stop-sequence-editor--modal .searchable-thread-select--light-surface .searchable-thread-select__input,
[data-theme="dark"] .stop-sequence-editor--modal .searchable-thread-select--light-surface .searchable-thread-select__input[readonly] {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

.my-digitize-self-upload-notice {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #166534;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
}

.my-digitize-file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.my-digitize-file-chip {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #111827;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="dark"] .my-digitize-self-upload-notice {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(74, 222, 128, 0.35);
  color: #bbf7d0;
}

[data-theme="dark"] .my-digitize-file-chip {
  background: #1f2330;
  border-color: #343949;
  color: #f3f4f6;
}


#showcategoryorder.editProduct.d-flex {
    min-height: 100vh;
}

.menures {
    height: 100vh; 
    position: sticky;
    top: 0; 
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto; 
}
.menures .Logo { 
    padding: 15px;
    text-align: center;
   
}


.main-area-container {
    background-color: #f4f6f8;
    flex-grow: 1; 
}

.page-content-wrapper {
    padding: 20px 25px; 
}

.main-content-card {
    background-color: #ffffff;
    border-radius: 12px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); 
}

.main-content-card > div:not(:last-child),
.main-content-card > .subtitle-showall-wrapper + .category-items-container {
    margin-bottom: 25px;
}
.main-content-card > div:last-child {
    margin-bottom: 0;
}

.main-content-card .section-title { 
    color: #343a40 !important; 
    font-weight: 600 !important;
}

.subtitle-showall-wrapper .subtitle-text {
    color: #6c757d !important; 
    font-size: 0.9rem !important; 
    font-weight: 400 !important;
}
.showallspan {
    border: 1px solid #e07000 !important;
    background-color: #fff !important; 
    color: #e07000 !important;
    padding: 8px 18px !important;
    border-radius: 25px !important; 
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.showallspan:hover {
    background-color: #e07000 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(0,123,255,0.25) !important;
    transform: translateY(-1px);
}


.category-items-container {
    gap: 18px;
}

.category-list-item {
    padding: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 10px; 
    text-align: center;
    background-color: #fff;
    border: 1px solid #e9ecef;
    min-height: 190px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
}
.category-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.category-list-item img {
    border-radius: 8px;
    width: 100%;
    max-width: 110px;
    height: 110px;
    object-fit: cover;
    margin-bottom: 12px; 
}
.category-list-item .category-name-text {
    color: #212529 !important;
    font-weight: 500 !important; 
    font-size: 0.9rem !important;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.7em; 
    max-height: 2.7em; 
}


.btnlistorders {
    gap: 15px;
}
.btnlistorders button {
    flex: 1 1 170px;
    padding: 12px 18px; 
    border-radius: 8px !important;
    border: 1px solid #ced4da !important;
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem; 
    text-align: center; 
}
.btnlistorders button .button-icon-span {
    margin-left: 8px; 
    font-size: 1.1rem !important; 
    color: #e07000;
    display: inline-flex;
    align-items: center;
}
.btnlistorders button:hover {
    border-color: #0069d9 !important;
    background-color: #e07000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,123,255,0.2);
}
.btnlistorders button:hover span,
.btnlistorders button:hover .button-icon-span svg {
    color: #fff !important;
}


.cardorderslist {
    gap: 20px;
}
.divcardorderslist {
    border-radius: 10px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
    background-color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    display: flex; 
    flex-direction: column;
}
.divcardorderslist .product-card-inner { 
    padding: 10px; 
}
.divcardorderslist:hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.1);
}
.divcardorderslist .product-image-container img {
    background: #f7f8f9; 
    border-radius: 6px;
}
.divcardorderslist .hearticon {
    position: absolute;
    top: 15px; 
    right: 15px;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.divcardorderslist .hearticon:hover {
    background-color: rgba(230, 230, 230, 0.9);
}
.divcardorderslist .hearticon svg {
    font-size: 1.4rem;
}
.divcardorderslist .product-details {
    padding: 10px 5px 5px 5px; 
}
.divcardorderslist .product-name-text {
    color: #212529 !important;
    font-weight: 600 !important;
    font-size: 1rem !important; 
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.6em;
}
.divcardorderslist .product-brand-text,
.divcardorderslist .product-info-text {
    color: #6c757d !important;
    font-size: 0.8rem !important;
}
.divcardorderslist .product-price-text {
    color: #e07000 !important; 
    font-weight: 700 !important;
    font-size: 1rem !important;
}


.back-button-area {
    padding-top: 10px !important;
    padding-bottom: 0 !important; 
    margin-bottom: 10px; 
}
.back-button-area svg {
    font-size: 2.2rem !important;
    color: #333;
    transition: color 0.2s ease, transform 0.2s ease;
}
.back-button-area svg:hover {
    color: #0056b3;
    transform: translateX(-3px); 
}


.my-custom-pager {
    margin-top: 30px; 
    padding: 15px; 
    border-radius: 10px; 
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.07);
    display: flex;
    justify-content: center;
    align-items: center;
}
.my-custom-pager .k-pager-numbers .k-button {
    border-radius: 6px;
    margin: 0 4px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #dee2e6; 
    padding: 6px 10px;
    font-size: 0.9rem;
}
.my-custom-pager .k-pager-numbers .k-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.my-custom-pager .k-pager-numbers .k-button.k-selected {
    background-color: #e07000;
    color: white;
    border-color: #e07000;
    font-weight: 500;
}
.my-custom-pager .k-pager-info {
    color: #495057;
    font-size: 0.9rem;
    margin: 0 10px;
}
.my-custom-pager .k-pager-nav {
    color: #e07000;
    font-size: 1.2rem;
}
.my-custom-pager .k-pager-nav:hover {
    color: #0056b3;
}

@media (min-width: 1200px) { /* XL screens */
    .category-list-item { flex-basis: calc(16.666% - 15px); /* ~6 per row (gap 18px) */ }
    .divcardorderslist { flex-basis: calc(31%); /* 4 per row (gap 20px) */ }
}

@media (min-width: 992px) and (max-width: 1199.98px) { /* LG screens */
    .category-list-item { flex-basis: calc(20% - 14.4px); /* 5 per row */ }
    .divcardorderslist { flex-basis: calc(33.333% - 13.33px); /* 3 per row */ }
}

@media (min-width: 768px) and (max-width: 991.98px) { /* MD screens */
    .page-content-wrapper { padding-left: 20px; padding-right: 20px; }
    .category-list-item { flex-basis: calc(25% - 13.5px); /* 4 per row */ }
    .divcardorderslist { flex-basis: calc(50% - 10px); /* 2 per row */ }
    .btnlistorders button { flex-basis: calc(33.333% - 10px); /* 3 buttons per row */ }
}

@media (min-width: 576px) and (max-width: 767.98px) { /* SM screens */
    .page-content-wrapper { padding-left: 15px; padding-right: 15px; }
    .main-content-card { /* padding: 20px !important; */ }
    .main-content-card .section-title { font-size: 1.1rem !important; }

    .subtitle-showall-wrapper { align-items: center; }
    .showallspan { padding: 7px 14px !important; font-size: 0.8rem !important;}

    .category-list-item { flex-basis: calc(33.333% - 12px); /* 3 per row */ min-height: 180px;}
    .category-list-item img { max-width: 90px; height: 90px; }

    .btnlistorders button { flex-basis: calc(50% - 7.5px); font-size: 0.8rem; padding: 10px 12px;}
    .divcardorderslist { flex-basis: calc(50% - 10px); /* 2 per row */ }
}

@media (max-width: 575.98px) { /* XS screens */
    .page-content-wrapper { padding-left: 10px; padding-right: 10px; }
    .main-content-card { /* padding: 15px !important; */ }
    .main-content-card .section-title { font-size: 1rem !important; }

    .subtitle-showall-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .showallspan { width: 100%; text-align: center; }

    .category-items-container { gap: 12px; }
    .category-list-item { flex-basis: calc(50% - 6px); /* 2 per row */ min-height: 170px;}
    .category-list-item img { max-width: 80px; height: 80px; }
    .category-list-item .category-name-text { font-size: 0.8rem !important; min-height: 2.4em; max-height: 2.4em;}


    .btnlistorders { flex-direction: column; gap: 10px; }
    .btnlistorders button { flex-basis: auto; width: 100%; }

    .cardorderslist { gap: 15px; }
    .divcardorderslist { flex-basis: 100%; /* 1 per row */ }

    .my-custom-pager { flex-direction: column; gap: 12px; text-align: center;}
    .my-custom-pager .k-pager-info { order: 1; margin-top: 5px;}
}





.content-area-wrapper {
    background-color: #f4f6f8 !important;
    padding: 20px !important; 
}

.main-card-look {
    background: white !important;
    border-radius: 12px !important; 
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); 
}

.back-button-container {
    padding: 5px 0 !important;
    margin-bottom: 15px; 
}
.back-button-container .tooltipbuttons svg {
    color: #e07000;
    transition: color 0.2s ease, transform 0.2s ease;
}
.back-button-container .tooltipbuttons svg:hover {
    color: #0056b3;
    transform: scale(1.05);
}

.filter-sort-controls {
    display: flex !important;
    flex-wrap: wrap; 
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding-bottom: 15px !important; 
    margin-bottom: 20px !important; 
}

.filter-sort-controls .k-filter { 
    border: none !important;
    padding: 0 !important;
    flex-grow: 1; 
    margin-right: 15px; 
}
.filter-sort-controls .k-filter-toolbar .k-filter-item { 
    border: 1px solid #ced4da;
    border-radius: 6px;
    background-color: #fff;
}
.filter-sort-controls .k-input-inner { 
    background-color: #f8f9fa !important; 
    border-radius: 5px !important;
    border: 1px solid #ced4da !important;
    padding: 8px 12px !important; 
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.filter-sort-controls .k-input-inner:focus {
    border-color: #e07000 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
    background-color: #fff !important;
}

.filter-sort-controls > span[style*="fontWeight: bold"] {
    margin-left: 0 !important; 
    margin-right: 10px;
    color: #495057;
    font-size: 0.95rem;
    white-space: nowrap;
}

.sorting {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    color: #495057; 
    border-radius: 6px;
    padding: 8px 10px;
    margin-left: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sorting:hover {
    background-color: #dee2e6;
    border-color: #adb5bd;
}
.sorting.selected {
    background-color: #e07000;
    border-color: #0056b3;
    color: #fff; 
    box-shadow: 0 0 5px rgba(0,123,255,0.4);
}
.sorting svg {
    margin: 0 !important; 
    font-size: 1.1rem; 
}

.divcardorderslist {
    border: 1px solid #e0e0e0; 
    border-radius: 10px; 
    background-color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    min-height: 320px; 
}
.divcardorderslist:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}
.divcardorderslist .col-12:first-child { 
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.divcardorderslist img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    background-color: #f8f9fa !important; 
    border-top-left-radius: 9px; 
    border-top-right-radius: 9px;
    padding: 0 !important;
}

.divcardorderslist .spancardshowallcat {
    padding: 15px; 
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.divcardorderslist .spancardshowallcat span {
    font-size: 0.95rem !important;
    color: #333 !important;
    font-weight: 500 !important;
    line-height: 1.4;
    margin-bottom: 0 !important; 
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.k-listview-pager {
    margin-top: 25px;
    padding: 15px 0;
    background-color: transparent; 
    border-radius: 0; 
    box-shadow: none;
    border-top: 1px solid #e0e0e0; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.k-listview-pager .k-button {
    border-radius: 6px;
    margin: 0 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.k-listview-pager .k-button:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}
.k-listview-pager .k-button.k-selected {
    background-color: #e07000;
    color: white;
    border-color: #e07000;
    font-weight: 500;
}
.k-listview-pager .k-pager-info {
    color: #555;
    font-size: 0.9rem;
    margin: 0 12px;
}


@media (max-width: 991.98px) { 
    .filter-sort-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-sort-controls .k-filter {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .filter-sort-controls > span[style*="fontWeight: bold"] { 
        margin-bottom: 10px;
        text-align: left; 
    }
    .filter-sort-controls .sorting {
        width: auto; 
        margin-bottom: 5px;
    }

    .divcardorderslist {
        min-height: 300px; 
    }
}

@media (max-width: 767.98px) { 
    .content-area-wrapper {
        padding: 15px !important;
    }
    .main-card-look {
        padding: 1rem !important; 
    }
    .divcardorderslist {
        min-height: auto; 
    }
    .divcardorderslist img {
        height: 180px !important;
    }
}

@media (max-width: 575.98px) { 
    .filter-sort-controls > span[style*="fontWeight: bold"] {
        text-align: center; 
    }
    .sorting {
        padding: 7px 9px;
        margin-left: 6px;
    }
    .sorting svg {
        font-size: 1rem;
    }
    .divcardorderslist img {
        height: 160px !important;
    }
    .divcardorderslist .spancardshowallcat span {
        font-size: 0.9rem !important;
    }
    .k-listview-pager {
        flex-direction: column;
        gap: 10px; 
    }
}
.showproductordermain.showproductorder.d-flex {
    min-height: 100vh; 
}

.showproductordermain .menures { 
    flex: 0 0 260px; 
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #fff; 
    border-right: 1px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.showproductordermain .menures .Logo { padding: 20px 15px; border-bottom: 1px solid #f0f0f0; }
.showproductordermain .menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
}

.showproductordermain .d-flex.flex-column.pe-2.w-100 {
    background-color: #f4f7f9; 
}
.showproductordermain #header {
    position: sticky; 
    top: 0;
    z-index: 1000; 
}

.showproductordermain .showproductorder.d-flex.flex-column.col-12[style*="rgb(240 240 250)"] {
    background-color: #f4f7f9 !important; 
    padding: 20px !important; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.showproductordermain .p-4[style*="background: white"] {
    background: white !important;
    border-radius: 12px !important; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    position: relative; 
}

.showproductordermain div[style*="cursor:pointer"][style*="width:15%"] { 
    display: inline-flex; 
    align-items: center;
    color: #007bff;
    font-weight: 500;
    margin-bottom: 20px; 
    transition: color 0.2s ease;
    width: auto !important; 
    padding: 5px 10px;
    border-radius: 6px;
}
.showproductordermain div[style*="cursor:pointer"][style*="width:15%"]:hover {
    color: #0056b3;
    background-color: #f0f0f0;
}
.showproductordermain div[style*="cursor:pointer"][style*="width:15%"] svg { 
    margin-right: 6px !important;
    font-size: 1.2rem;
}

.showproductordermain div[style*="fontSize: 3rem"] {
    font-size: 1.8rem !important; 
    color: #2c3e50;
    margin-bottom: 25px;
    padding-left: 0 !important; 
    border-bottom: 1px solid #e9edf0;
    padding-bottom: 15px;
}

.showproductordermain div[style*="display: flex"][style*="justifyContent: center"][style*="marginBottom: 9px"] {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important; 
    align-items: center !important;
    border-bottom: none !important; 
    padding-bottom: 0 !important;
    margin-bottom: 20px !important; 
}

.showproductordermain .k-filter {
    border: none !important;
    padding: 0 !important;
    flex-grow: 1;
    min-width: 200px; 
    margin-right: 15px;
}
.showproductordermain .k-filter-toolbar .k-filter-item {
    border: 1px solid #d1d5db;
    border-radius: 25px; 
    background-color: #fff;
    overflow: hidden;
}
.showproductordermain .k-input-inner { 
    background-color: #fff !important;
    border-radius: 25px !important;
    border: none !important;
    padding: 9px 16px !important;
    transition: box-shadow 0.2s ease;
    font-size: 0.85rem;
    color: #333;
}
.showproductordermain .k-input-inner::placeholder { color: #999; }
.showproductordermain .k-input-inner:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important;
}

.showproductordermain span[style*="fontWeight: bold"][style*="marginLeft: 1%"] {
    margin-left: 0 !important;
    margin-right: 8px;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500 !important;
}

.showproductordermain .sorting {
    background-color: #f0f2f5;
    border: 1px solid #d1d5db;
    color: #374151; 
    border-radius: 25px;
    padding: 7px 10px;
    margin-left: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.showproductordermain .sorting:hover {
    background-color: #e2e6ea;
    border-color: #b1b9c2;
}
.showproductordermain .sorting.selected {
    background-color: #007bff;
    border-color: #0056b3;
    color: #fff;
}
.showproductordermain .sorting svg {
    margin: 0 !important; 
    font-size: 1rem;
}

.showproductordermain .k-listview { 
    border: none !important;
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}
.showproductordermain .k-listview-content.k-list { 
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 -10px !important; 
    overflow-y: auto; 
    height: 100%; 
}
.showproductordermain .k-listview-item { 
    padding: 0 10px 20px 10px !important; 
    border: none !important;
    background: none !important;
    display: flex !important;
    align-items: stretch !important;
}

.showproductordermain .divcardorderslist { 
    border:none; 
    border-radius: none; 
    background-color: #fff;
    box-shadow: none; 
    min-height: 300px; 
    width: 100%; 
}
.showproductordermain .divcardorderslist .col-12:first-of-type:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}
.showproductordermain .divcardorderslist:hover {
    background-color: #fff !important;
}
.showproductordermain .divcardorderslist .col-12:first-of-type { 
    border: 1px solid #e9eff5; 
    border-radius: 10px; 
    background-color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.showproductordermain .divcardorderslist img {
    width: 100% !important;
    height: 160px !important; 
    object-fit: contain !important; 
    background-color: #f8f9fa !important; 
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    padding: 5px !important; 
}
.showproductordermain .divcardorderslist .hearticon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.showproductordermain .divcardorderslist .hearticon svg { font-size: 1.2rem; }

.showproductordermain .divcardorderslist .spancardshowallcat {
    padding: 2px 10px;
    text-align: left;
    display: flex;
    justify-content: start;
}
.showproductordermain .divcardorderslist .spancardshowallcat span {
    font-size: 0.8rem !important; 
    color: #555 !important;
    font-weight: normal !important;
    margin-bottom: 4px !important;
}
.showproductordermain .divcardorderslist .spancardshowallcat span[style*="fontWeight: bold"] {
    font-weight: 500 !important; 
    color: #333 !important;
    font-size: 0.85rem !important;
}
.showproductordermain .divcardorderslist .col-12.mt-2.spancardshowallcat:last-child {
    margin-top: auto; 
}

.showproductordermain .k-pager { 
    padding: 15px 0px; 
    background-color: #fff;
    border-top: 1px solid #e9eff5;
    border-radius: 0 0 10px 10px; 
    margin: 0 -1.5rem -1.5rem -1.5rem; 
    width: calc(100% + 3rem); 
    position: absolute; 
    bottom: 0;
    left: 0; 
    right: 0; 

    display: flex;
    justify-content: center;
    align-items: center;
}
.showproductordermain .k-pager .k-button {
    border-radius: 6px; margin: 0 3px; border: 1px solid #d1d5db;
    background-color: #fff; color: #4b5563; padding: 5px 9px; font-size: 0.8rem;
}
.showproductordermain .k-pager .k-button:hover { background-color: #f3f4f6; border-color: #9ca3af;}
.showproductordermain .k-pager .k-button.k-selected { background-color: #007bff; color: white; border-color: #007bff;}
.showproductordermain .k-pager .k-pager-info { color: #4b5563; font-size: 0.85rem; margin: 0 10px;}

@media (min-width: 1200px) { 
    .showproductordermain .k-listview-item { flex-basis: calc(20% - (20px * 4 / 5)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .showproductordermain .k-listview-item { flex-basis: calc(25% - (20px * 3 / 4)); }
}
@media (min-width: 768px) and (max-width: 991.98px) { 
    .showproductordermain .k-listview-item { flex-basis: calc(33.333% - (20px * 2 / 3)); }
    .showproductordermain .divcardorderslist { min-height: 280px; }
    .showproductordermain .divcardorderslist img { height: 140px !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
    .showproductordermain .showproductorder.d-flex.flex-column.col-12[style*="rgb(240 240 250)"] { padding: 15px !important; }

    .showproductordermain .k-listview-item { flex-basis: calc(50% - (20px * 1 / 2)); }
    .showproductordermain .divcardorderslist { min-height: 270px; }
    .showproductordermain .divcardorderslist img { height: 130px !important; }
}
@media (max-width: 575.98px) { 
    .showproductordermain .showproductorder.d-flex.flex-column.col-12[style*="rgb(240 240 250)"] { padding: 10px !important; }

    .showproductordermain .sacp-filter-sort-area { flex-direction: column; align-items: stretch; }
    .showproductordermain .k-filter { margin-right: 0; margin-bottom: 15px; }
    .showproductordermain span[style*="fontWeight: bold"][style*="marginLeft: 1%"] { text-align: left; margin-bottom: 8px; }
    .showproductordermain .sorting { width: auto; margin-bottom: 8px;}

    .showproductordermain .k-listview-item { flex-basis: 100%; } 
    .showproductordermain .k-listview-content.k-list { margin: 0 !important; } 
    .showproductordermain .divcardorderslist { min-height: auto; }
    .showproductordermain .divcardorderslist img { height: 150px !important; }

    .showproductordermain .k-pager {
        flex-direction: column; gap: 10px;
    }
}

.sacp-page {
    display: flex; 
    min-height: 100vh;
}

.sacp-page .menures { 
    flex: 0 0 260px; 
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #fff; 
    border-right: 1px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.sacp-page .menures .Logo { padding: 20px 15px; border-bottom: 1px solid #f0f0f0; }
.sacp-page .menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
}

.sacp-main-area { 
    background-color: #f4f7f9; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sacp-main-area > #header { 
    position: sticky; 
    top: 0;
    z-index: 100; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sacp-content-background {
    background-color: #f4f7f9 !important; 
    padding: 20px !important; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.sacp-main-card {
    background: white !important;
    border-radius: 10px !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); 
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.sacp-main-card-content-wrapper { 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sacp-back-button-container {
    padding: 5px 0 !important;
    margin-bottom: 15px;
}
.sacp-back-button-container .tooltipbuttons svg { color: #007bff; transition: color 0.2s ease, transform 0.2s ease; }
.sacp-back-button-container .tooltipbuttons svg:hover { color: #0056b3; transform: scale(1.08); }

.sacp-filter-sort-area {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #e9edf0 !important; 
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.sacp-filter-sort-area .k-filter { 
    border: none !important;
    padding: 0 !important;
    flex-grow: 1; 
    margin-right: 15px; 
}
.sacp-filter-sort-area .k-filter-toolbar .k-filter-item { 
    border: 1px solid #d1d5db; 
    border-radius: 5px; 
    background-color: #fff;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-filter-sort-area .k-input-inner { 
    background-color: #eeeeee !important;
    border-radius: 5px !important;
    border: none !important;
    padding: 9px 16px !important; 
    transition: box-shadow 0.2s ease;
    font-size: 0.9rem;
    color: #333;
}
.sacp-filter-sort-area .k-input-inner::placeholder { color: #999; }
.sacp-filter-sort-area .k-input-inner:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important; 
    border: 1px solid #ccc !important;
    border-radius: 25px !important;
}
.sacp-filter-sort-area .k-toolbar-item{
    background-color: #fff;
}
.sacp-sort-label {
    margin-left: 0 !important;
    margin-right: 8px;
    color: #555e68;
    font-size: 0.9rem;
    font-weight: 500 !important;
    white-space: nowrap;
}

.sacp-filter-sort-area div:has(> .sacp-sorting-button) { 
    display: flex;
    align-items: center;
}
.sacp-sorting-button {
    background-color: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 25px; 
    padding: 7px 11px; 
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-sorting-button:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sacp-sorting-button.selected {
    background-color: #007bff;
    border-color: #0062cc;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,123,255,0.3);
}
.sacp-sorting-button svg {
    font-size: 1rem;
}

.sacp-list-view {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}
.k-listview-content{
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
}
.sacp-list-view ul.k-listview-content.k-list {
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 -7.5px !important; 
    height: 100%; 
}
.sacp-list-view li.k-listview-item {
    padding: 0 7.5px 15px 7.5px !important; 
    border: none !important;
    background: none !important;
    display: flex !important; 
    align-items: stretch !important; 
}

.sacp-category-card {
    
    min-height: 220px; 
}
.sacp-card-inner-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}
.sacp-card-inner-content {
    border: 1px solid #e5e7eb; 
    border-radius: 8px; 
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); 
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0; 
}
.sacp-category-card img {
    width: 100% !important;
    height: 120px !important; 
    object-fit: cover !important;
    background-color: #f0f2f5 !important;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.sacp-card-text-wrapper {
    padding: 10px; 
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sacp-card-title-text {
    font-size: 0.8rem !important; 
    color: #374151 !important; 
    font-weight: 500 !important;
    line-height: 1.3;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.1em; 
}

.sacp-pager.k-listview-pager {
    margin-top: auto; 
    padding: 12px 0;
    background-color: #fff; 
    border-radius: 0 0 10px 10px; 
    box-shadow: 0 -2px 5px rgba(0,0,0,0.04); 
    border-top: 1px solid #e9edf0;
    width: calc(100% + 48px); 
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px; 
    position: relative; 
}
.sacp-pager .k-button {
    border-radius: 6px; margin: 0 3px; border: 1px solid #d1d5db;
    background-color: #fff; color: #4b5563; padding: 5px 9px; font-size: 0.8rem;
}
.sacp-pager .k-button:hover { background-color: #f3f4f6; border-color: #9ca3af;}
.sacp-pager .k-button.k-selected { background-color: #007bff; color: white; border-color: #007bff; font-weight: 500;}
.sacp-pager .k-pager-info { color: #4b5563; font-size: 0.85rem; margin: 0 10px;}

@media (min-width: 1200px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(16.666% - (15px * 5 / 6)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(20% - (15px * 4 / 5)); }
}
@media (min-width: 768px) and (max-width: 991.98px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(25% - (15px * 3 / 4)); }
    .sacp-category-card { min-height: 200px; }
    .sacp-category-card img { height: 100px !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
    .sacp-content-background { padding: 15px !important; }
    .sacp-filter-sort-area { flex-direction: column; align-items: stretch; }
    .sacp-filter-sort-area .k-filter { margin-right: 0; margin-bottom: 15px; }
    .sacp-filter-sort-area .sacp-sort-label { text-align: left; margin-bottom: 8px; }
    .sacp-filter-sort-area .sacp-sorting-button { margin-bottom: 8px; width: auto; }

    .sacp-list-view li.k-listview-item { flex-basis: calc(33.333% - (15px * 2 / 3)); }
    .sacp-category-card { min-height: 190px; }
    .sacp-category-card img { height: 90px !important; }
    .sacp-card-title-text { font-size: 0.75rem !important; }
}
@media (max-width: 575.98px) { 
    .sacp-content-background { padding: 10px !important; }
    .sacp-filter-sort-area > span.sacp-sort-label + div { display: flex; justify-content: flex-start; gap: 6px;}
    .sacp-filter-sort-area .sacp-sorting-button { width: auto; margin-left:0; margin-right: 6px; }

    .sacp-list-view li.k-listview-item { flex-basis: calc(50% - (15px * 1 / 2)); }
    .sacp-category-card { min-height: 180px; }
    .sacp-category-card img { height: 80px !important; }
    .sacp-pager.k-listview-pager {
        flex-direction: column; gap: 10px;
        width: calc(100% + YOUR_P4_PADDING_X_2_XS_SCREENS) !important;
        margin-left: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-right: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-bottom: -YOUR_P4_PADDING_XS_SCREENS !important;
    }
}

body.product-detail-active { /* Add this class to body when ProductDetail is mounted for page-specific styles */
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f6f8; /* Light gray background for the page */
    line-height: 1.6;
    overflow-y: hidden; /* Prevent body scroll when main content area has its own scroll */
}

/* === Overall Page Layout for Product Detail === */
.productdetail-page {
    display: flex;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Prevent double scrollbars on page itself */
}

.productdetail-page .main-content-area {
    padding: 0;
    flex-grow: 1; /* Takes remaining space */
    overflow-y: auto; /* Scroll for content area */
    overflow-x: hidden;
    height: 100vh;
    background-color: #f4f6f8; /* Background for the content area */
    transition: margin-left 0.3s ease; /* Smooth transition */
}

/* === Product Detail Card (.productdetail-content) === */
.productdetail-page .productdetail-content { /* This is the main white card */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 20px 25px; /* Vertical Horizontal padding */
    margin: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    width: 95%;
}

/* Header inside main content area */
.productdetail-page .main-content-area #header {
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: white; /* Ensure background for sticky header */
    padding-bottom: 10px; /* Space below header */
    padding-left: 25px; /* Re-apply padding */
    padding-right: 25px;
}

/* === Sections within the card === */
.productdetail-page .productdetail-content .productdetailss { /* Container for imagelist, mainimage, productinfo */
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to ensure horizontal layout before media queries */
    gap: 25px;
}

.productdetail-page .productdetail-content .imagelist {
    flex: 0 0 120px; /* Fixed width for vertical image list */
    max-height: 450px; /* Adjust as needed */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px; /* Space for scrollbar */
    margin-top: 0; /* Align with top of main image */
        scrollbar-width: thin !important;
}

.productdetail-page .productdetail-content .imagelist .image > div {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease;
    background-color: #f9f9f9;
    padding: 5px;
}
.productdetail-page .productdetail-content .imagelist .image > div:hover {
    transform: scale(1.03);
    border-color: #007bff;
}
.productdetail-page .productdetail-content .imagelist .image > div.activeimage {
    border: 2px solid #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}
.productdetail-page .productdetail-content .imagelist img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 80px; /* Thumbnail image height */
}


.productdetail-page .productdetail-content .mainImage { /* mainImage has .imageproductdetails class too */
    flex: 1 1 50%; /* Takes more space, allows shrinking */
    position: relative; /* For heart icon positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0; /* Prevents flex item from overflowing */
}
.productdetail-page .productdetail-content .mainImage img {
    max-width: 100%;
    max-height: 450px; /* Max height for main image */
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    position: absolute;
    top: 0;
}
.productdetail-page .productdetail-content .mainImage .hearticon {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.productdetail-page .productdetail-content .productmaininfo {
    flex: 1 1 40%; /* Takes space, allows shrinking */
    padding-left: 20px; /* Space from main image */
    border-left: 1px solid #eee; /* Separator line */
    min-width: 0; /* Prevents flex item from overflowing */
}

.productdetail-page .productdetail-content .design-button {
    transition: background-color 0.3s ease, transform 0.2s ease;
    padding: 12px 0; /* More padding */
    font-size: 1.3rem !important; /* Control font size better */
}
.productdetail-page .productdetail-content .design-button:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

/* Text elements within productmaininfo */
.productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 2rem"] {
    font-size: 1.75rem !important; /* Adjust large fonts */
}
.productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.8rem"] {
    font-size: 1.5rem !important;
}
.productdetail-page .productdetail-content .productmaininfo .price-range-item {
    margin-bottom: 0.5rem;
}
.productdetail-page .productdetail-content .productmaininfo .product-spec-item,
.productdetail-page .productdetail-content .productmaininfo .product-spec-detail {
    padding-right: 10px;
    margin-bottom: 0.75rem;
    word-break: break-word; /* Prevent long words from breaking layout */
}
.productdetail-page .productdetail-content .productmaininfo .colors-list span[style*="width: 20px"] {
    border: 1px solid #ddd; /* Add border to color swatches */
}


/* === Responsive Design === */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    /* Genişlik layout-modern .menures ile sabit; flex satırda ekstra margin gerekmez */
    .productdetail-page .main-content-area {
        margin-left: 0;
    }

    .productdetail-page .productdetail-content .productdetailss {
        flex-direction: column; /* Stack main sections */
        align-items: stretch; /* Stretch items to full width of card */
        gap: 30px;
    }

    .productdetail-page .productdetail-content .imagelist {
        flex: 0 0 auto; /* Reset flex basis */
        order: 2; /* Show below main image */
        max-height: 120px; /* Adjust for horizontal scroll */
        overflow-x: auto; /* Horizontal scroll for thumbnails */
        overflow-y: hidden;
        display: flex; /* Make .imagelist a flex container for its .image child */
        flex-direction: row; /* Align .image horizontally */
        padding-right: 0;
        padding-bottom: 10px; /* Space for scrollbar */
        scrollbar-width: thin !important;
    }
    .productdetail-page .productdetail-content .imagelist .image { /* This is the direct child of .imagelist */
        display: flex; /* Make .image a flex container for thumbnail divs */
        flex-wrap: nowrap; /* Ensure thumbnails stay in one line */
        gap: 10px;
    }
    .productdetail-page .productdetail-content .imagelist .image > div { /* Each thumbnail container */
        flex: 0 0 90px; /* Fixed width for thumbnails */
        margin-bottom: 0;
        height: 90px; /* Ensure consistent height */
        display: flex;
        align-items: center;
        justify-content: center;
    }
     .productdetail-page .productdetail-content .imagelist img {
        max-height: 70px; /* Thumbnail image height */
    }


    .productdetail-page .productdetail-content .mainImage {
        order: 1; /* Show main image first */
        max-height: 350px; /* Adjust main image height */
    }
    .productdetail-page .productdetail-content .mainImage img {
        max-height: 350px;
    }

    .productdetail-page .productdetail-content .productmaininfo {
        order: 3;
        padding-left: 0;
        border-left: none; /* Remove border when stacked */
        border-top: 1px solid #eee; /* Add top border as separator */
        padding-top: 20px;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    body.product-detail-active {
      /* On smaller screens, if menu behavior is complex, consider allowing body scroll or different menu approach */
      /* For now, keep as is, assuming menu and content scroll independently */
    }

    .productdetail-page .menures {
        width: 60px; /* Thinner menu, potentially for icons only */
        /* To fully implement icon-only menu, JSX changes would be needed for labels */
        /* Hiding text in menu items: */
    }
    .productdetail-page .menures [name="mainmenu"] span { /* Example: if menu text is in spans */
        /* display: none; */ /* This would hide text, but needs specific selectors */
    }
    .productdetail-page .main-content-area {
        margin-left: 60px;
    }

    .productdetail-page .main-content-area #header {
        /* margin: 0 -15px 10px -15px; */
        padding-left: 15px;
        padding-right: 15px;
    }
    .productdetail-page .productdetail-content {
        margin: 15px;
        padding: 15px;
    }

    .productdetail-page .productdetail-content .productmaininfo span,
    .productdetail-page .productdetail-content .productmaininfo button {
        font-size: 0.95rem !important;
    }
    .productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.75rem"],
    .productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.5rem"] {
        font-size: 1.3rem !important;
    }
    .productdetail-page .productdetail-content .design-button {
        font-size: 1.1rem !important;
        padding: 10px 0;
    }

    .productdetail-page .productdetail-content .productmaininfo .price-range-item,
    .productdetail-page .productdetail-content .productmaininfo .w-75, /* Targets the price container */
    .productdetail-page .productdetail-content .productmaininfo .w-50 { /* Targets individual price from/to */
        width: 100% !important; /* Stack price elements */
        justify-content: flex-start !important;
    }
     .productdetail-page .productdetail-content .productmaininfo .w-50 + .w-50 { /* Second price item */
        margin-left: 0 !important; /* Remove margin if any */
        padding-left: 0 !important;
     }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .productdetail-page .menures {
        display: none; /* Hide menu completely */
    }
    .productdetail-page .main-content-area {
        margin-left: 0;
        /* height: auto; /* Allow content to dictate height */
        /* overflow-y: visible; /* If body scroll is preferred */
    }
     body.product-detail-active {
        overflow-y: auto; /* Allow body to scroll if menu is gone and main content might not scroll itself */
     }

    .productdetail-page .main-content-area #header {
        position: static; /* Header no longer sticky */
    }
    .productdetail-page .productdetail-content {
        margin: 10px;
        padding: 10px;
    }

    .productdetail-page .productdetail-content .imagelist .image > div {
        flex: 0 0 70px; /* Smaller thumbnails */
        height: 70px;
    }
    .productdetail-page .productdetail-content .imagelist img {
        max-height: 55px;
    }

    .productdetail-page .productdetail-content .mainImage {
        max-height: 280px;
    }
     .productdetail-page .productdetail-content .mainImage img {
        max-height: 280px;
    }

    .productdetail-page .productdetail-content .productmaininfo span[style*="font-size: 1.3rem"] {
        font-size: 1.1rem !important;
    }
    .productdetail-page .productdetail-content .productmaininfo .product-spec-item,
    .productdetail-page .productdetail-content .productmaininfo .product-spec-detail {
        width: 100%;
        padding-right: 0;
        font-size: 0.9rem !important;
    }
    .productdetail-page .productdetail-content .productmaininfo .colors-list {
        justify-content: flex-start; /* Align colors */
    }
     .productdetail-page .productdetail-content .productmaininfo .colors-list span[style*="width: 20px"] {
        width: 18px !important;
        height: 18px !important;
        margin: 2px !important;
    }
}

/* Scrollbar styling (optional, for webkit browsers) */
.productdetail-page .productdetail-content .imagelist::-webkit-scrollbar,
.productdetail-page .main-content-area::-webkit-scrollbar,
.productdetail-page .menures::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.productdetail-page .productdetail-content .imagelist::-webkit-scrollbar-thumb,
.productdetail-page .main-content-area::-webkit-scrollbar-thumb,
.productdetail-page .menures::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 4px;
}
.productdetail-page .productdetail-content .imagelist::-webkit-scrollbar-track,
.productdetail-page .main-content-area::-webkit-scrollbar-track,
.productdetail-page .menures::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}
@font-face{
    font-family: sarabun;
    src: url(/assets/fonts/Sarabun-Bold.b8825eaa682ec51689b3.ttf);
  }



div.headersearchinput{
   display: flex;
   flex: 1;
}



div.message svg{

   color: rgb(255 135 49) !important;
   /* font-size: 1.3vw !important; */
}
div#sortbar{
   flex:.5;
   display:flex;
   justify-content:center;
   align-items:center;
}



div#searchbar maindiv{
   display:flex;
   height:6vh;
   width:20vw;
   background-color:rgb(240 240 247);
   border-radius:36px
}


div#searchbar div.searchicon{
   flex:.5;
   display:flex;
   align-items:center;
   justify-content:center
}

div#infobar{
   flex:3;
   display:flex
}
div#orderlist{
    background: #fff;
    height: 100%;
    font-family: sarabun !important;
}
div#orderlist div.header div.title{
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #ff8731;
}

/* "Add New Order" button section */
.newadd {
    padding: 10px 20px !important; /* Ensure padding is applied */
    border-radius: 8px !important;
    background-color: #ff8731 !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: background-color 0.25s ease-in-out, transform 0.1s ease !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    height: 40px;
}

.newadd:hover {
    background-color: #e67320 !important; /* Darker shade for hover */
    transform: translateY(-1px);
}

.newadd span { /* Text inside the add button */
    font-size: 0.95rem;
}

.newadd > span > .IoMdAddCircle { /* Icon inside the add button */
    font-size: 1.6rem !important; /* Control icon size */
    vertical-align: middle;
}

div#orderlist  div.menu .k-button-solid-base:focus, .k-button-solid-base.k-focus
{
    box-shadow:unset !important
}
div#orderlist  div.menu{
    height:37px
}
div#orderlist  div.menu span{
    font-family: sarabun;
}

div#orderlist  div.grid thead{
    height:67px
}

div#orderlist  div.grid thead th{
    border: 0px;
}

div#orderlist .k-grid-content.k-virtual-content{
    display: contents;
}
div#orderlist  div.grid  .k-grid-header{
    display: contents;
}
div#orderlist .k-grid.k-grid-md{
    border:0px !important
}
div#orderlist  div.grid .k-checkbox.k-checkbox-md.k-rounded-md{
  display: block !important;
}
div#orderlist .k-checkbox-wrap{
    align-items: unset !important;
}
div#orderlist  div.grid tbody td{
    text-align: center;
}
div#orderlist .k-grid-header-wrap{
    border-bottom: 1px solid #ccc;
    /* margin-bottom: 9px; */
}
div#orderlist  div.grid tbody td{
    border: 0px !important;
    font-family: sarabun;
}
div#orderlist  .k-table-row.k-master-row.k-table-alt-row.k-alt{
    background-color: unset !important;
}
/* div.k-animation-container{
    width: 10vw !important;
    left: 0px;
} */








th.order_header{
    /* background-color: #ff8522; */
    color: white;
}
div.order_grid div.k-grid-header{
    background-color: #ff8522;
    color: #ff8522;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
div.order_grid div.k-grid-header-wrap{
    border-top-left-radius: 5px;
}
div.order_grid .k-column-title{
       width: 100%;
       text-align: left;
       font-family: 'sarabun_bolditalic';
       font-size: 1rem;
}
div.order_grid .k-virtual-content, .k-virtual-list .k-list-content{
    overflow-y: hidden;
}
div.order_grid div.k-grid-content td{
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
    padding: 0px !important;
    font-family: sarabun_bolditalic;
    font-size: 1rem;
}
div.order_grid div.k-grid-table-wrap{
    border-left: 0px
}

div#orderlist div.order_grid div.k-grid-container tbody td{
    text-align: center;
    color: #020202;
}
div#orderlist .k-pager{
    background: wite !important;
    color:#ff8522 !important;
    border: 0px;
}
.tblorderlist  .k-grid .k-grid-header .k-table-th:first-child{
    /* background-color: #ff8522; */
}
div#orderlist .k-table-td.k-detail-cell .k-grid
{
    margin: 24px 0 24px -10px;
}
div#orderlist .k-table-tbody .k-table-row:hover{
    background-color: transparent !important;
}
div#orderlist .k-grid .k-grid-header .k-table-th
{
    /* background:#ff8522 !important */
}

.k-table-tbody .k-table-row:hover, .k-table-list .k-table-row:hover, .k-table-tbody .k-table-row.k-hover, .k-table-list .k-table-row.k-hover{
    background:#111111 !important
}

.tblorderlist table tbody tr:nth-of-type(even) td div{
    display: block !important;
}
.detaildorderlist div.k-grid-container{
    border: 1px solid #000 !important;
}
.detaildorderlist div.k-grid-header tr{
    background: #001fff !important;
}
.detaildorderlist div.k-grid-header tr:hover{
    background: #001fff !important;
}
div#orderlist .detaildorderlist .k-grid .k-grid-header .k-table-th:first-child{
    background-color: #001fff !important;
}
div#orderlist table tbody tr td:nth-child(8) div{
    display: flex;
    justify-content: start;
    height: 37px;
}
div#orderlist table tbody tr td{
    color: #000 !important;
}
.gridcss table tbody tr td div{
    justify-content: center;
}

div#orderlist div[name="asli"] div.section5 .k-grid .k-table-th, .k-grid td, .k-grid .k-table-td{
    padding-left:0px !important ;
    padding-right: 0px !important;
}
div#orderlist span.filtered{
    background-color: rgb(255, 172, 113) !important;
}
div#orderlist tbody td{
    font-size: .8rem;
    text-align: center !important;
}
div#orderlist th span.k-cell-inner{
    width: 100% !important;
    display: flex;
    justify-content: center;
}
div#orderlist div.order_grid .k-column-title{
    font-size: .8rem !important;
}
div#orderlist th td svg{
     color: white !important;
}
div#orderlist tbody td svg{
    width: 100%;
    height: 22px;
}

div.infopopup{
    left: 40% !important;
    top: 50% !important;
width: 50%;
height: 40% !important;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container{
    
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #485563, #29323c);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn{
    padding: 10px 60px;
    /* background: #fff; */
    border: 0;
    outline: none;
    cursor: pointer;
    font-size: 22px;
    font-weight: 500;
    border-radius: 10px;
    transition: transform 0.2s;
}

.btn:active{
    transform: scale(0.95);
}

.popup{
    width: 400px;
    background: #fff;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    padding: 0 30px 60px;
    color: #333;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.open-popup{
    visibility: visible;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
}

.popup img{
    width: 100px;
    margin-top: -50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.popup h2{
    font-size: 38px;
    font-weight: 500;
    margin: 30px 0 10px;
}

.popup button{
    width: 100%;
    margin-top: 50px;
    padding: 10px 0;
    background-color: #e02189;
    color: #fff;
    border: 0;
    outline: none;
    font-size: 18px;
    border-radius: 4px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

div.reason_window{
    width: 50% !important;
    left: 25% !important;
    height: 50% !important;
    position: fixed !important
}
div.k-window-titlebar{
    background: #f58529;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}
div#orderlist div.k-grid-content table tr.k-grid-norecords td{
    text-align: center !important;
}
div#orderlist .filterorderlist{
    padding-left: 5px;
}
div#orderlist .filterorderlist span{
    border-radius: 50px;
    font-weight: bold;
    font-size: .8vw;
    padding: 0 20px;
    cursor: pointer;
    background: rgb(233, 233, 233);
    height: 30px;
    text-align: center;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}
div#orderlist .k-dropdownlist.k-picker
{
    width: 100% !important;
}
div#orderlist div.k-grid-content table tr{
    height: 40px !important;
}

div#orderlist .k-dropdownlist.k-picker{
    height: 36px !important;
    background-color:rgb(242 242 242);
}
div#orderlist td.shipment div:first-child{
    display: flex;
    align-items: center;
    height: 55px;
}
div#orderlist td.detail div:first-child{
    display: flex;
    align-items: center;
    height: 55px;
}
div#orderlist table tbody tr:nth-of-type(even) td div{
    background: transparent !important;
}
div#orderlist table tbody tr:nth-of-type(even) td div.list span.k-input-inner{
    background: rgb(242 242 242) !important;
}
div#orderlist table tbody tr:nth-of-type(even) td div.list button{
    background: rgb(242 242 242) !important;
}
div#orderlist .k-column-title{
    color: black;
    font-size: .8vw;
    font-family: 'segoe';

}
div.orderlistetsy div.k-grid{
    height:auto !important;
  }
div#orderlist div.k-grid{
    height: 442px;
  }
  div#orderlist div.k-grid .k-grid-container{
    /* overflow: overlay !important; */
    overflow: visible !important;
  }
  div#orderlist k-grid.gridcss{
    height: 100% !important;
  }

  div#orderlist div.etsyorder table.k-table.k-grid-table td{
    text-align: center !important;
    padding-left: 2px !important;
  }
  div#orderlist div.etsyorder th span.k-cell-inner{
    justify-content: left !important;
    padding-left: 2px !important;
  }


  div#orderlist div.etsyorder tbody td svg{
    width: 36% !important;
  }

  div#orderlist .gridcss table tbody tr td div{
    display: flex;
    justify-content:center
  }
  div#orderlist div.k-grid.detaildorderlist{
    height: unset !important;
  }

  div#orderlist div.k-grid.detaildorderlist div.k-grid-header tr{
    background-color: #95afda !important;
  }

  div.etsyorder table tbody tr:nth-of-type(even) td div{
    
  }
  span.etsydetail{
    color:#6168ce !important
  }

  div#orderlist div.payment div{
    flex:1;
    display: flex;
    align-items: center;

  }
  
  div#orderlist div.payment div  svg{
    height: 100%;
  }
  div#orderlist table tbody tr td{
    overflow: visible !important;
  }
  div#orderlist table tbody tr td.statusorderlist{
    position: relative; /* Ensure it remains above normal flow */
    z-index: 100; /* Lower than modal */
    background: white;
  }
  div#orderlist table tbody tr:nth-of-type(even) td div.commentcancel{
    background-color: rgb(239, 242, 40) !important;
  }
  div.order_actioncombo{
    position: relative;
    z-index: 50 !important;
  }

  div#orderlist div.etsyorder table tbody tr td{
    overflow: hidden !important;
  }


 
  
/* Filter buttons container */
.filterorderlist {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 10px; /* Space between filter buttons */
}

.filterorderlist span {
    padding: 8px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #f7f7f7;
    color: #555;
    text-align: center;
}

.filterorderlist span:hover {
    background-color: #efefef;
    border-color: #cccccc;
    color: #333;
}

.filterorderlist span.filtered {
    background-color: #ff8731; /* Your theme color */
    color: white;
    border-color: #ff8731;
    box-shadow: 0 2px 4px rgba(255, 135, 49, 0.3);
}

button[aria-label="minimize"],button[aria-label="maximize"]{
    display: none;
}

/* Modal Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

/* Modern Modal Styles */
.modern-modal-overlay {
    animation: modalFadeIn 0.3s ease-out;
}

.modern-modal-content {
    animation: modalSlideIn 0.3s ease-out;
}

/* Scrollbar Styling */
.modern-modal-content::-webkit-scrollbar {
    width: 8px;
}

.modern-modal-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modern-modal-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.modern-modal-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* EtsyOrders Filter Select Styles */
.filter-dropdowns-wrapper {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-select-container {
    position: relative;
    min-width: 180px;
}

.filter-select {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0 35px 0 15px;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
}

.filter-select:focus {
    border-color: #ff8306;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2);
}

.filter-select option {
    color: #333;
    background-color: #fff;
    padding: 10px;
}

.dropdown-arrow-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 1.2rem;
}
/* ============================================================
   Etsy Orders — /etsyorders
   Kapsam: sayfa gövdesi, filtre alanı, Kendo Grid, yükleme,
   sipariş detay portalı (ShowDetail). Bağlı route’lar ayrı dosyalarda.
   ============================================================ */

.etsy-orders-page {
  --eo-bg: #f0f0fa;
  --eo-panel: #ffffff;
  --eo-border: #e8eaf0;
  --eo-text: #111827;
  --eo-muted: #6b7280;
}

.etsy-orders-page .etsy-orders-main {
  background: #f0f0fa;
}

.etsy-orders-page .etsy-orders-top-header,
.etsy-orders-page #header.etsy-orders-top-header {
  background: #ffffff;
}

[data-theme="dark"] .etsy-orders-page {
  --eo-bg: #0f1117;
  --eo-panel: #1a1d27;
  --eo-border: #2a2d3a;
  --eo-text: #e8eaf0;
  --eo-muted: #8b8fa8;
}

/* --- Ana sütun (menü + içerik) --- */
[data-theme="dark"] .etsy-orders-page > .d-flex.flex-column.mb-4.w-100,
[data-theme="dark"] .etsy-orders-page .etsy-orders-main {
  background-color: var(--eo-bg) !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-orders-top-header,
[data-theme="dark"] .etsy-orders-page #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid var(--eo-border);
}

[data-theme="dark"] .etsy-orders-page .etsy-orders-toolbar-strip {
  background-color: #13151f !important;
}

/* --- Sipariş kartı (#orderlist) --- */
[data-theme="dark"] .etsy-orders-page #orderlist.orderlistetsy,
[data-theme="dark"] .etsy-orders-page .orderlistetsy {
  background: var(--eo-panel) !important;
  border: 1px solid var(--eo-border);
  color: var(--eo-text);
}

[data-theme="dark"] .etsy-orders-page .filter-title {
  color: var(--eo-text) !important;
}

/* Cache rozetleri (inline <style> animasyonları ayrı) */
[data-theme="dark"] .etsy-orders-page .cache-indicator {
  background: rgba(76, 175, 80, 0.14) !important;
  border-color: rgba(129, 199, 132, 0.45) !important;
  color: #a5d6a7 !important;
}

[data-theme="dark"] .etsy-orders-page .cache-indicator.cache {
  background: rgba(255, 152, 0, 0.12) !important;
  border-color: rgba(255, 183, 77, 0.4) !important;
  color: #ffcc80 !important;
}

/* --- Arama (my-product-scope) --- */
[data-theme="dark"] .etsy-orders-page.my-product-scope .search-input-wrapper {
  background-color: #13151f !important;
  border-color: var(--eo-border) !important;
}

[data-theme="dark"] .etsy-orders-page.my-product-scope .search-input-wrapper .search-icon {
  color: var(--eo-muted) !important;
}

[data-theme="dark"] .etsy-orders-page.my-product-scope .search-input-field {
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page.my-product-scope .search-input-field::placeholder {
  color: var(--eo-muted);
}

/* --- Kendo Grid (orderlist / orderlistetsy) --- */
[data-theme="dark"] .etsy-orders-page #orderlist .k-grid,
[data-theme="dark"] .etsy-orders-page #orderlist .k-grid-md {
  background: var(--eo-panel) !important;
  border-color: var(--eo-border) !important;
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-table-thead,
[data-theme="dark"] .etsy-orders-page #orderlist .k-table-header,
[data-theme="dark"] .etsy-orders-page #orderlist .k-grid-header {
  background: #161926 !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-table-th,
[data-theme="dark"] .etsy-orders-page #orderlist .k-table-td {
  background: var(--eo-panel) !important;
  color: var(--eo-text) !important;
  border-color: var(--eo-border) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-table-row:hover .k-table-td {
  background: #222636 !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-pager,
[data-theme="dark"] .etsy-orders-page #orderlist .k-pager-wrap {
  background: #161926 !important;
  border-color: var(--eo-border) !important;
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-pager .k-button {
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-modal-empty {
  color: var(--eo-modal-muted) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-column-title,
[data-theme="dark"] .etsy-orders-page #orderlist .k-link {
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page .etsyorder {
  background: var(--eo-panel) !important;
}

[data-theme="dark"] .etsy-orders-page .filter-select {
  background-color: #13151f !important;
  border-color: var(--eo-border) !important;
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page .filter-select option {
  background-color: #13151f;
  color: var(--eo-text);
}

[data-theme="dark"] .etsy-orders-page .dropdown-arrow-icon {
  color: var(--eo-muted) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-dropdownlist.k-picker,
[data-theme="dark"] .etsy-orders-page #orderlist table tbody tr:nth-of-type(even) td div.list span.k-input-inner,
[data-theme="dark"] .etsy-orders-page #orderlist table tbody tr:nth-of-type(even) td div.list button {
  background-color: #13151f !important;
  color: var(--eo-text) !important;
  border-color: var(--eo-border) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .k-input-inner,
[data-theme="dark"] .etsy-orders-page #orderlist .k-input-solid {
  background: #13151f !important;
  color: var(--eo-text) !important;
}

/* --- Bootstrap düğmeler --- */
[data-theme="dark"] .etsy-orders-page .btn-info {
  background: #1e3a5f !important;
  border-color: #2563eb !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-orders-page .btn-success {
  background: rgba(5, 150, 105, 0.25) !important;
  border-color: #059669 !important;
  color: #6ee7b7 !important;
}

[data-theme="dark"] .etsy-orders-page .btn-secondary {
  background: #2a2d3a !important;
  border-color: #3d4154 !important;
  color: #e8eaf0 !important;
}

/* --- Yükleniyor kartı --- */
[data-theme="dark"] .etsy-orders-page .etsy-orders-loading-outer {
  background-color: var(--eo-bg) !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-orders-loading-card {
  background-color: var(--eo-panel) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-orders-loading-card h3,
[data-theme="dark"] .etsy-orders-page .etsy-orders-loading-card p {
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-orders-loading-card .etsy-orders-loading-sub {
  color: var(--eo-muted) !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-orders-loading-track {
  background-color: #2a2d3a !important;
}

/* --- Kendo Window (transaction yok) --- */
[data-theme="dark"] .k-window.etsy-orders-kendo-window .k-window-titlebar {
  background: #161926 !important;
  color: var(--eo-text) !important;
  border-color: var(--eo-border) !important;
}

[data-theme="dark"] .k-window.etsy-orders-kendo-window .k-window-content {
  background: var(--eo-panel) !important;
  color: var(--eo-text) !important;
}

[data-theme="dark"] .k-window.etsy-orders-kendo-window h3,
[data-theme="dark"] .k-window.etsy-orders-kendo-window p {
  color: var(--eo-text) !important;
}

[data-theme="dark"] .k-window.etsy-orders-kendo-window .etsy-window-empty-body {
  color: var(--eo-text) !important;
}

/* --- Sipariş detay portalı (createPortal) --- */
.etsy-orders-detail-modal {
  --eo-modal-surface: #ffffff;
  --eo-modal-muted: #666;
  --eo-modal-heading: #333;
  --eo-modal-soft: #f8f9fa;
}

[data-theme="dark"] .etsy-orders-detail-modal {
  --eo-modal-surface: #1a1d27;
  --eo-modal-muted: #9ca3c4;
  --eo-modal-heading: #f0f1f5;
  --eo-modal-soft: #13151f;
}

[data-theme="dark"] .etsy-orders-detail-modal .modern-modal-content {
  background-color: var(--eo-modal-surface) !important;
  color: var(--eo-modal-heading) !important;
  border: 1px solid var(--eo-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-modal-header {
  background-color: var(--eo-modal-soft) !important;
  border-bottom-color: var(--eo-border) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-modal-header h2 {
  color: var(--eo-modal-heading) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-modal-close {
  color: var(--eo-modal-muted) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--eo-modal-heading) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-modal-scroll {
  background: var(--eo-modal-surface) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .modern-modal-content::-webkit-scrollbar-track {
  background: #13151f;
}

[data-theme="dark"] .etsy-orders-detail-modal .modern-modal-content::-webkit-scrollbar-thumb {
  background: #3d4154;
}

/* Satır kartları (ListView item) */
[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-line-card {
  background-color: #222636 !important;
  border-color: var(--eo-border) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-line-card .etsy-order-line-imgbox {
  background-color: var(--eo-modal-soft) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-line-card .etsy-order-line-title,
[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-line-card .etsy-order-line-label {
  color: var(--eo-modal-heading) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-line-card .etsy-order-line-muted {
  color: var(--eo-modal-muted) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .eo-meta-pill {
  background-color: var(--eo-modal-soft) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .eo-meta-pill > span:first-of-type {
  color: var(--eo-modal-muted) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .eo-meta-pill > span:last-of-type {
  color: var(--eo-modal-heading) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-variation-block {
  background: rgba(25, 118, 210, 0.12) !important;
  border-color: rgba(100, 181, 246, 0.25) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-variation-block h4 {
  color: #90caf9 !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-variation-pill {
  background: var(--eo-modal-surface) !important;
  border-color: var(--eo-border) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-variation-pill .etsy-order-line-muted {
  color: var(--eo-modal-muted) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-variation-pill .etsy-order-line-label {
  color: var(--eo-modal-heading) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-empty-summary {
  background: var(--eo-modal-soft) !important;
  color: var(--eo-modal-heading) !important;
}

[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-empty-summary h3,
[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-empty-summary h4,
[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-empty-summary p,
[data-theme="dark"] .etsy-orders-detail-modal .etsy-order-empty-summary strong {
  color: var(--eo-modal-heading) !important;
}

/* ============================================================
   Etsy orders — Kendo tablo (daha profesyonel görünüm)
   ============================================================ */

.etsy-orders-page #orderlist .etsy-orders-grid.k-grid {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.etsy-orders-page #orderlist .etsy-orders-grid .k-table-th,
.etsy-orders-page #orderlist .etsy-orders-grid .k-table-td {
  padding: 13px 16px !important;
  vertical-align: middle !important;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.etsy-orders-page #orderlist .etsy-orders-grid .k-table-thead .k-table-th,
.etsy-orders-page #orderlist .etsy-orders-grid .k-grid-header .k-table-th {
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eo-muted);
  border-bottom: 1px solid var(--eo-border) !important;
}

.etsy-orders-page #orderlist .etsy-orders-grid .k-table-tbody .k-table-row:nth-child(even) .k-table-td {
  background: #f6f7f9 !important;
}

.etsy-orders-page #orderlist .etsy-orders-grid .k-table-tbody .k-table-row:nth-child(odd) .k-table-td {
  background: #ffffff !important;
}

.etsy-orders-page #orderlist .etsy-orders-grid .k-table-tbody .k-table-row:hover .k-table-td {
  background: #fff7ed !important;
}

.etsy-orders-page #orderlist .etsy-orders-grid .k-table-td {
  border-color: #eceef2 !important;
}

.etsy-orders-page .etsy-grid-link {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.etsy-orders-page .etsy-grid-link:hover {
  color: #1d4ed8;
  border-bottom-color: currentColor;
}

.etsy-orders-page .eo-gigi-cell {
  text-align: center;
}

.etsy-orders-page .eo-gigi-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.etsy-orders-page .eo-gigi--pending {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.etsy-orders-page .eo-gigi--view {
  background: rgba(234, 88, 12, 0.12);
  color: #c2410c;
}

.etsy-orders-page .eo-gigi--sync {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.etsy-orders-page .eo-gigi--finished {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.etsy-orders-page .eo-gigi--neutral {
  background: rgba(107, 114, 128, 0.12);
  color: #4b5563;
}

.etsy-orders-page .eo-action-cell {
  text-align: center !important;
}

.etsy-orders-page .etsy-grid-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.etsy-orders-page .etsy-grid-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.etsy-orders-page .etsy-grid-action-btn:active {
  transform: translateY(0);
}

/* --- Dark: tablo ince ayar --- */
[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid.k-grid {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-table-thead .k-table-th,
[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-grid-header .k-table-th {
  background: #141824 !important;
  color: #9aa3c2 !important;
  border-color: var(--eo-border) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-table-tbody .k-table-row:nth-child(odd) .k-table-td {
  background: var(--eo-panel) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-table-tbody .k-table-row:nth-child(even) .k-table-td {
  background: #161b28 !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-table-tbody .k-table-row:hover .k-table-td {
  background: rgba(255, 131, 6, 0.08) !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-table-td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--eo-text) !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-grid-link {
  color: #93c5fd !important;
}

[data-theme="dark"] .etsy-orders-page .etsy-grid-link:hover {
  color: #bfdbfe !important;
}

[data-theme="dark"] .etsy-orders-page .eo-gigi--pending {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}

[data-theme="dark"] .etsy-orders-page .eo-gigi--view {
  background: rgba(251, 146, 60, 0.14);
  color: #fdba74;
}

[data-theme="dark"] .etsy-orders-page .eo-gigi--sync {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}

[data-theme="dark"] .etsy-orders-page .eo-gigi--finished {
  background: rgba(74, 222, 128, 0.14);
  color: #86efac;
}

[data-theme="dark"] .etsy-orders-page .eo-gigi--neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

[data-theme="dark"] .etsy-orders-page .etsy-grid-action-btn {
  background: linear-gradient(180deg, #3d6fd8 0%, #2563eb 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .etsy-orders-page .etsy-grid-action-btn:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

/* orderlist.css’teki siyah başlık rengini bu gridde bastır */
.etsy-orders-page #orderlist .etsy-orders-grid .k-grid-header .k-column-title,
.etsy-orders-page #orderlist .etsy-orders-grid .k-grid-header .k-link {
  color: inherit !important;
  font-family: inherit !important;
}

[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-grid-header .k-column-title,
[data-theme="dark"] .etsy-orders-page #orderlist .etsy-orders-grid .k-grid-header .k-link {
  color: #9aa3c2 !important;
}

/* Production ops mini badges in order grid checkbox column */
.etsy-orders-page .prod-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-sizing: border-box;
}

.etsy-orders-page .prod-status-badge--stale {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.etsy-orders-page .prod-status-badge--digitize-pending {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.etsy-orders-page .prod-status-badge--digitize-ready {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.45);
}

@font-face{
    font-family: sarabun;
    src: url(/assets/fonts/Sarabun-Bold.b8825eaa682ec51689b3.ttf);
  }
div.orderpreview .k-grid-content{
    overflow-y: hidden;
}
div.orderpreview .k-table-thead{
    display: none;
}

div.orderpreview tbody tr td.normal{
    font-family: lora;
    color:black;
    
}

div#orderpreview .k-table-thead{
    display: flex;
}
div#orderpreview thead{
    width: 100%;
}
div#orderpreview thead tr{
    width: 100%;
    display: flex;
    border-right: 2px solid black !important;
    border-bottom: 2px solid black !important;
}
div#orderpreview thead  span.k-column-title{
  font-family: sarabun;
}
div#orderpreview tbody tr td{
   text-align: center;
   color: black;
}

div#orderpreview tbody tr td.description-cell{
   text-align: left !important;
   padding: 8px !important;
   vertical-align: top !important;
   line-height: 1.4 !important;
}

div#orderpreview thead tr th{
    
    display: flex;
    justify-content: center;
    border: 2px solid black !important;
}
div#orderpreview  colgroup{
    display: none;
}
div.orderpreview td.col4{
    border-right: 1px solid #ccc !important;
}
div.orderpreview div.k-grid-header{
    border: 0px !important;
}

div.orderpreview div.k-grid.k-grid-md{
    border: 0px;
}
div#orderpreview{
    border-bottom: 1px solid black;
}
div#orderpreviewbottom .k-table-thead{
    display: flex;
}
div#orderpreviewbottom .k-table-thead{
    display: none;
}

div#orderpreviewbottom  tbody tr td{
    text-align: right;
}
div#orderpreviewbottom  tbody tr  td[data-grid-col-index="2"]{
    padding-right: 30px !important;
    color: black;
}
div#orderpreviewbottom  tbody tr  td[data-grid-col-index="1"]{
    font-family: sarabun;
    color: black;
}
.qrcode{
    width: 50%;
    min-width: 100px;
    aspect-ratio: 1/1;
}

/* Production Operations — station & pack pages (dark-first) */
.production-ops-page {
  --prod-bg: #0f1419;
  --prod-bg-elevated: #1a2332;
  --prod-bg-muted: #151c28;
  --prod-border: #2d3748;
  --prod-border-light: #3d4f63;
  --prod-text: #f1f5f9;
  --prod-text-muted: #94a3b8;
  --prod-accent: #ff8306;
  --prod-accent-hover: #e07000;
  --prod-success: #22c55e;
  --prod-warning: #f59e0b;
  --prod-error: #ef4444;
  --prod-info: #3b82f6;
  --prod-header-gradient: linear-gradient(135deg, #ff8306 0%, #ff9a3c 100%);
  --prod-radius: 12px;
  --prod-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  min-height: 100vh;
  background: var(--prod-bg);
  color: var(--prod-text);
}

.production-ops-page .prod-header {
  background: var(--prod-header-gradient);
  padding: 16px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  z-index: 100;
}

.production-ops-page .prod-header-inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.production-ops-page .prod-brand {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
}

.production-ops-page .prod-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.production-ops-page .prod-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.production-ops-page .prod-main {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.production-ops-page .prod-card {
  background: var(--prod-bg-elevated);
  border-radius: var(--prod-radius);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--prod-border);
  box-shadow: var(--prod-shadow);
}

.production-ops-page .prod-card--error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

.production-ops-page .prod-receipt-id {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--prod-text);
}

.production-ops-page .prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.production-ops-page .prod-stat {
  background: var(--prod-bg-muted);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--prod-border);
}

.production-ops-page .prod-stat-label {
  font-size: 12px;
  color: var(--prod-text-muted);
  margin-bottom: 4px;
}

.production-ops-page .prod-stat-value {
  font-size: 16px;
  font-weight: 600;
}

.production-ops-page .prod-line-card {
  background: var(--prod-bg-muted);
  border: 1px solid var(--prod-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.production-ops-page .prod-line-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}

.production-ops-page .prod-line-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.production-ops-page .prod-line-preview-cell {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--prod-border);
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}

.production-ops-page .prod-line-preview-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prod-text-muted);
  margin-bottom: 6px;
}

.production-ops-page .prod-line-preview-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.production-ops-page .prod-line-preview-img--design {
  background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% / 16px 16px;
}

.production-ops-page .prod-line-preview-missing {
  font-size: 12px;
  color: var(--prod-text-muted);
  margin-bottom: 10px;
}

.production-ops-page .prod-face-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 131, 6, 0.15);
  color: var(--prod-accent);
  border: 1px solid rgba(255, 131, 6, 0.35);
}

.production-ops-page .prod-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.production-ops-page .prod-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.production-ops-page .prod-btn--primary {
  background: var(--prod-accent);
  color: #fff;
}

.production-ops-page .prod-btn--primary:not(:disabled):hover {
  background: var(--prod-accent-hover);
}

.production-ops-page .prod-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}

.production-ops-page .prod-btn--success {
  background: var(--prod-success);
  color: #fff;
}

.production-ops-page .prod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.production-ops-page .prod-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--prod-border-light);
  background: var(--prod-bg-muted);
  color: var(--prod-text);
  font-size: 14px;
}

.production-ops-page .prod-input::placeholder {
  color: var(--prod-text-muted);
}

/* Readiness checklist */
.prod-readiness-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prod-readiness-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  border: 1px solid var(--prod-border);
}

.prod-readiness-item--ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
}

.prod-readiness-item--warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
}

.prod-readiness-item--error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Personalization diff */
.prod-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.prod-diff-table th,
.prod-diff-table td {
  padding: 10px 12px;
  border: 1px solid var(--prod-border);
  text-align: left;
  vertical-align: top;
}

.prod-diff-table th {
  background: var(--prod-bg-muted);
  color: var(--prod-text-muted);
  font-weight: 600;
}

.prod-diff-severity--warning {
  color: var(--prod-warning);
}

.prod-diff-severity--error {
  color: var(--prod-error);
}

/* Status badges */
.prod-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.prod-status-badge--stale {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.prod-status-badge--digitize-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.prod-status-badge--digitize-ready {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.prod-status-badge--ready {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Label preflight modal */
.prod-preflight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2147483000;
}

.prod-preflight-panel {
  width: min(920px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--prod-bg-elevated, #1a2332);
  border: 1px solid var(--prod-border, #2d3748);
  border-radius: 14px;
  color: var(--prod-text, #f1f5f9);
}

.prod-preflight-scroll {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}

.prod-preflight-order-card {
  border: 1px solid var(--prod-border, #2d3748);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  background: var(--prod-bg-muted, #151c28);
}

.prod-preflight-receipt {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

/* Digitize production queue — staff layout (navbar + sidebar) */
.prod-digitize-queue-page {
  --prod-dq-bg: #f0f0fa;
  --prod-dq-card: #ffffff;
  --prod-dq-border: #e5e7eb;
  --prod-dq-text: #1f2937;
  --prod-dq-muted: #6b7280;
  --prod-dq-table-head: #f8f9fa;
  --prod-dq-table-border: #e8eaf0;
  --prod-dq-debt-row: rgba(239, 68, 68, 0.08);
  --prod-dq-link: #6366f1;
}

.prod-digitize-queue-page .prod-dq-sidebar-menu {
  border-right: 1px solid var(--prod-dq-border);
}

.prod-digitize-queue-page .prod-dq-page-bg,
.prod-digitize-queue-page .prod-dq-content-strip {
  background: var(--prod-dq-bg);
  min-height: calc(100vh - 56px);
}

.prod-digitize-queue-page .prod-dq-content-card {
  background: var(--prod-dq-card);
  border: 1px solid var(--prod-dq-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.prod-digitize-queue-page .prod-dq-page-title {
  margin: 0;
  font-weight: 700;
  color: var(--prod-dq-text);
}

.prod-digitize-queue-page .prod-dq-page-subtitle,
.prod-digitize-queue-page .prod-dq-filter-label {
  color: var(--prod-dq-muted);
  font-size: 13px;
}

.prod-digitize-queue-page .prod-dq-filter-label {
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

.prod-digitize-queue-page .prod-dq-filter-control {
  min-width: 200px;
}

.prod-digitize-queue-page .prod-dq-filter-actions {
  display: flex;
  align-items: flex-end;
}

.prod-digitize-queue-page .prod-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--prod-dq-text);
}

.prod-digitize-queue-page .prod-queue-table th,
.prod-digitize-queue-page .prod-queue-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--prod-dq-table-border);
  text-align: left;
}

.prod-digitize-queue-page .prod-queue-table thead tr {
  background: var(--prod-dq-table-head);
}

.prod-digitize-queue-page .prod-queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
  align-items: flex-end;
}

.prod-digitize-queue-page .prod-dq-empty-cell {
  text-align: center;
  color: var(--prod-dq-muted);
  padding: 24px;
}

.prod-digitize-queue-page .prod-dq-row-debt {
  background: var(--prod-dq-debt-row);
}

.prod-digitize-queue-page .prod-dq-download-link {
  margin-right: 8px;
  font-size: 12px;
  color: var(--prod-dq-link);
  text-decoration: none;
}

.prod-digitize-queue-page .prod-dq-download-link:hover {
  text-decoration: underline;
}

[data-theme="dark"] .prod-digitize-queue-page {
  --prod-dq-bg: #0f1419;
  --prod-dq-card: #1a2332;
  --prod-dq-border: #2d3748;
  --prod-dq-text: #f1f5f9;
  --prod-dq-muted: #94a3b8;
  --prod-dq-table-head: #151c28;
  --prod-dq-table-border: #2d3748;
  --prod-dq-debt-row: rgba(239, 68, 68, 0.12);
  --prod-dq-link: #a5b4fc;
}

[data-theme="dark"] .prod-digitize-queue-page .prod-dq-content-card {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .prod-digitize-queue-page .menures > div[name="mainmenu"] {
  border-color: var(--prod-dq-border) !important;
}

[data-theme="dark"] .prod-digitize-queue-page .form-control,
[data-theme="dark"] .prod-digitize-queue-page .form-select {
  background: #13151f;
  border-color: var(--prod-dq-border);
  color: var(--prod-dq-text);
}

[data-theme="dark"] .prod-digitize-queue-page .form-control::placeholder {
  color: #64748b;
}

[data-theme="dark"] .prod-digitize-queue-page .btn-outline-secondary {
  color: var(--prod-dq-text);
  border-color: var(--prod-dq-border);
}

[data-theme="dark"] .prod-digitize-queue-page .btn-outline-secondary:hover {
  background: #252836;
  color: var(--prod-dq-text);
}

[data-theme="dark"] .prod-digitize-queue-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--prod-dq-text);
  --bs-table-border-color: var(--prod-dq-table-border);
}

[data-theme="dark"] .prod-digitize-queue-page .prod-queue-table th {
  color: var(--prod-dq-muted);
}

/* Consolidated pack scan feedback */
.prod-scan-success {
  animation: prod-scan-flash 0.6s ease;
}

@keyframes prod-scan-flash {
  0% { background: rgba(34, 197, 94, 0.35); }
  100% { background: transparent; }
}

[data-theme="light"] .production-ops-page {
  --prod-bg: #f0f0fa;
  --prod-bg-elevated: #ffffff;
  --prod-bg-muted: #f9fafb;
  --prod-border: #e5e7eb;
  --prod-border-light: #d1d5db;
  --prod-text: #1f2937;
  --prod-text-muted: #6b7280;
}

/* ============================================================
   Etsy Order List — /etsy-orders (EtsyOrderList.jsx)
   Kapsam: .etsy-order-list-page altındaki kartlar, grid, arama,
   istatistikler, sayfalama; portala taşınan Kendo pencereleri.
   ============================================================ */

.etsy-order-list-page {
  --eol-bg: #f0f0fa;
  --eol-panel: #ffffff;
  --eol-border: #e5e7eb;
  --eol-border-soft: #f1f5f9;
  --eol-text: #1e293b;
  --eol-muted: #64748b;
  --eol-header-row: #f8fafc;
  --eol-row-hover: #f8fafc;
  --eol-scroll-track: #f1f5f9;
  --eol-scroll-thumb: #94a3b8;
}

[data-theme="dark"] .etsy-order-list-page {
  --eol-bg: #0f1117;
  --eol-panel: #1a1d27;
  --eol-border: #2a2d3a;
  --eol-border-soft: #2a2d3a;
  --eol-text: #e8eaf0;
  --eol-muted: #8b8fa8;
  --eol-header-row: #161926;
  --eol-row-hover: #222636;
  --eol-scroll-track: #13151f;
  --eol-scroll-thumb: #4a5068;
}

[data-theme="dark"] .etsy-order-list-page.etsy-order-list-container {
  background: var(--eol-bg) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-card {
  background: var(--eol-panel) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-header {
  background: var(--eol-panel) !important;
  color: var(--eol-text) !important;
  border-bottom-color: var(--eol-border) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-title {
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-subtitle {
  color: var(--eol-muted) !important;
  opacity: 1;
}

/* Geri düğmesi (inline hover kaldırıldı) */
.etsy-order-list-page .etsy-order-list-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.etsy-order-list-page .etsy-order-list-back-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-list-back-btn {
  background: #2a2d3a !important;
  border-color: var(--eol-border) !important;
  color: #c4c8d4 !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-list-back-btn:hover {
  background: #343848 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-list-page .stat-card {
  background: var(--eol-panel) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .etsy-order-list-page .stat-number {
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .stat-label {
  color: var(--eol-muted) !important;
}

[data-theme="dark"] .etsy-order-list-page .modern-search-container {
  background: #13151f !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--eol-border);
}

[data-theme="dark"] .etsy-order-list-page .modern-search-input {
  color: var(--eol-text) !important;
  -webkit-text-fill-color: var(--eol-text);
  caret-color: var(--eol-text);
  background: transparent !important;
}

[data-theme="dark"] .etsy-order-list-page .modern-search-input::placeholder {
  color: var(--eol-muted) !important;
  opacity: 1;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-list-search-icon {
  color: var(--eol-muted) !important;
}

[data-theme="dark"] .etsy-order-list-page .filter-button {
  background: #13151f !important;
  border-color: var(--eol-border) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .filter-button:hover {
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

[data-theme="dark"] .etsy-order-list-page .filter-button.active {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
}

[data-theme="dark"] .etsy-order-list-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme="dark"] .etsy-order-list-page select,
[data-theme="dark"] .etsy-order-list-page textarea {
  background: #13151f !important;
  border-color: var(--eol-border) !important;
  color: var(--eol-text) !important;
  -webkit-text-fill-color: var(--eol-text);
}

[data-theme="dark"] .etsy-order-list-page input::placeholder,
[data-theme="dark"] .etsy-order-list-page textarea::placeholder {
  color: var(--eol-muted) !important;
  opacity: 1;
}

[data-theme="dark"] .etsy-order-list-page .etsy-grid-container {
  background: var(--eol-panel) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-grid-top-scroll {
  background: var(--eol-panel) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-grid-top-scroll::-webkit-scrollbar-thumb {
  background: var(--eol-scroll-thumb) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-grid-top-scroll::-webkit-scrollbar-track {
  background: var(--eol-scroll-track) !important;
}

[data-theme="dark"] .etsy-order-list-page .grid-scroll-wrapper {
  scrollbar-color: var(--eol-scroll-thumb) var(--eol-scroll-track) !important;
}

[data-theme="dark"] .etsy-order-list-page .grid-scroll-wrapper::-webkit-scrollbar-track {
  background: var(--eol-scroll-track) !important;
}

[data-theme="dark"] .etsy-order-list-page .grid-scroll-wrapper::-webkit-scrollbar-thumb {
  background: var(--eol-scroll-thumb) !important;
  border-color: var(--eol-scroll-track) !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-grid-header,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-thead,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-grid-md .k-table-thead {
  background: var(--eol-header-row) !important;
  border-bottom-color: var(--eol-border) !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-grid-header th,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-th {
  background: var(--eol-header-row) !important;
  color: var(--eol-text) !important;
  border-right-color: var(--eol-border) !important;
  border-bottom-color: var(--eol-border) !important;
}

/* Kendo React Grid: arka planlar hücrede (.k-table-td); şerit için odd/even */
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row:nth-child(odd) .k-table-td,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row:nth-child(odd) td {
  background: var(--eol-panel) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row:nth-child(even) .k-table-td,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row:nth-child(even) td {
  background: #161b28 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row.k-table-alt-row .k-table-td {
  background: #161b28 !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row:hover .k-table-td,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-tbody .k-table-row.k-hover .k-table-td {
  background: var(--eol-row-hover) !important;
}

/* Eski DOM (.k-grid-tbody tr) ile uyumluluk */
[data-theme="dark"] .etsy-order-list-page .gridcss .k-grid-tbody tr {
  background: transparent !important;
  border-bottom-color: var(--eol-border-soft) !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-grid-tbody tr:hover {
  background: transparent !important;
}

[data-theme="dark"] .etsy-order-list-page .gridcss .k-grid-tbody td,
[data-theme="dark"] .etsy-order-list-page .gridcss .k-table-td {
  border-right-color: var(--eol-border-soft) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .modern-header {
  background: linear-gradient(135deg, #161926 0%, #1e2433 100%) !important;
  color: var(--eol-text) !important;
  border-right-color: var(--eol-border) !important;
}

[data-theme="dark"] .etsy-order-list-page .modern-cell {
  border-right-color: var(--eol-border-soft) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-list-pagination {
  background: var(--eol-panel) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-list-pagination button {
  background: var(--eol-panel) !important;
  border-color: var(--eol-border) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-list-pagination button:disabled {
  background: #13151f !important;
  color: var(--eol-muted) !important;
  border-color: var(--eol-border) !important;
}

/* Toolbar Kendo dropdown — seçili/placeholder metin koyu (picker yüzeyi açık) */
.etsy-order-list-page .etsy-order-card .k-dropdownlist.k-picker .k-input-inner,
.etsy-order-list-page .etsy-order-card .k-dropdownlist.k-picker .k-input-value-text {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist,
[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist.k-picker,
[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist.k-picker-solid {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist .k-input-inner,
[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist .k-input-value-text {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist .k-input-button,
[data-theme="dark"] .etsy-order-list-page .etsy-order-card .k-dropdownlist .k-input-button .k-icon {
  color: #374151 !important;
}

[data-theme="dark"] .etsy-order-list-page .k-dropdownlist,
[data-theme="dark"] .etsy-order-list-page .k-dropdownlist.k-picker,
[data-theme="dark"] .etsy-order-list-page .k-picker,
[data-theme="dark"] .etsy-order-list-page .k-picker-solid {
  background: #13151f !important;
  background-color: #13151f !important;
  border-color: var(--eol-border) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .k-dropdownlist .k-input-inner,
[data-theme="dark"] .etsy-order-list-page .k-picker .k-input-inner,
[data-theme="dark"] .etsy-order-list-page .k-input-inner,
[data-theme="dark"] .etsy-order-list-page .k-input-value-text,
[data-theme="dark"] .etsy-order-list-page .k-dropdownlist .k-input-value-text {
  color: var(--eol-text) !important;
  -webkit-text-fill-color: var(--eol-text);
}

[data-theme="dark"] .etsy-order-list-page .k-dropdownlist .k-input-button,
[data-theme="dark"] .etsy-order-list-page .k-picker .k-input-button {
  color: var(--eol-muted) !important;
}

[data-theme="dark"] .etsy-order-list-page .k-pager,
[data-theme="dark"] .etsy-order-list-page .k-pager-wrap {
  background: var(--eol-header-row) !important;
  border-color: var(--eol-border) !important;
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .k-pager .k-button {
  color: var(--eol-text) !important;
}

[data-theme="dark"] .etsy-order-list-page .k-link,
[data-theme="dark"] .etsy-order-list-page .k-column-title {
  color: var(--eol-text) !important;
}

/* Toplu işlem satırı vb. */
[data-theme="dark"] .etsy-order-list-page .eol-selection-hint {
  color: var(--eol-muted) !important;
}

/* Kendo açılır liste — yalnızca bu sayfada kullanılan sınıf (portal) */
[data-theme="dark"] .k-popup.modern-dropdown,
[data-theme="dark"] .modern-dropdown.k-popup {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .k-popup.modern-dropdown .k-list-item,
[data-theme="dark"] .modern-dropdown.k-popup .k-list-item {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .k-popup.modern-dropdown .k-list-item.k-hover,
[data-theme="dark"] .k-popup.modern-dropdown .k-list-item:hover,
[data-theme="dark"] .modern-dropdown.k-popup .k-list-item.k-hover,
[data-theme="dark"] .modern-dropdown.k-popup .k-list-item:hover {
  background: #222636 !important;
}

/* Portala taşınan pencereler (.etsy-order-list-page dışında; sabit palet) */
[data-theme="dark"] .k-window.etsy-order-list-kendo-window .k-window-titlebar {
  background: #161926 !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .k-window.etsy-order-list-kendo-window .k-window-content {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .k-window.etsy-order-list-kendo-window h3,
[data-theme="dark"] .k-window.etsy-order-list-kendo-window p,
[data-theme="dark"] .k-window.etsy-order-list-kendo-window label {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .k-window.etsy-order-list-kendo-window input,
[data-theme="dark"] .k-window.etsy-order-list-kendo-window textarea,
[data-theme="dark"] .k-window.etsy-order-list-kendo-window select {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

/* Aynı adres / Pending kümesi — Durum kolonu rozeti */
[data-theme="dark"] .etsy-order-list-page .eo-same-address-cluster-badge {
  background: rgba(251, 191, 36, 0.14) !important;
  color: #fcd34d !important;
  border-color: rgba(251, 191, 36, 0.38) !important;
}

.design-package-preview-shell {
  overflow: hidden;
}

.design-package-preview-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.design-package-preview-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 45%, #e2e8f0 100%);
  background-size: 200% 100%;
  animation: designPackagePreviewPulse 1.35s linear infinite;
  z-index: 1;
}

.design-package-preview-canvas {
  opacity: 0;
  transition: opacity 0.18s ease;
  position: relative;
  z-index: 2;
}

.design-package-preview-canvas.is-ready {
  opacity: 1;
}

.design-package-preview-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
}

@keyframes designPackagePreviewPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

[data-theme="dark"] .design-package-preview-skeleton {
  background: linear-gradient(90deg, #2a2d3a 0%, #343848 45%, #2a2d3a 100%);
  background-size: 200% 100%;
}

[data-theme="dark"] .design-package-preview-shell {
  background: #1a1d27 !important;
}

.etsy-profit-page {
  --ep-bg: #f0f0fa;
  --ep-panel: #ffffff;
  --ep-text: #1e293b;
  --ep-muted: #64748b;
  --ep-border: #e2e8f0;
  --ep-accent: var(--nav-primary, #ff8306);
  --ep-positive: #16a34a;
  --ep-negative: #dc2626;
  display: flex;
  height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  min-height: 100vh;
  background: var(--ep-bg);
}
[data-theme="dark"] .etsy-profit-page {
  --ep-bg: #0f1117;
  --ep-panel: #1a1d27;
  --ep-text: #e8eaf0;
  --ep-muted: #94a3b8;
  --ep-border: #2a2d3a;
}

.etsy-profit-page .etsy-profit-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ep-bg);
}

.etsy-profit-page .etsy-profit-main > #header {
  flex-shrink: 0;
}

.etsy-profit-page .etsy-profit-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 20px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--ep-border) transparent;
}

.etsy-profit-page .etsy-profit-content::-webkit-scrollbar {
  width: 8px;
}

.etsy-profit-page .etsy-profit-content::-webkit-scrollbar-thumb {
  background: var(--ep-border);
  border-radius: 999px;
}

.etsy-profit-page .ep-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.etsy-profit-page .ep-page-title {
  margin: 0;
  color: var(--ep-text);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
}

.etsy-profit-page .ep-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 991px) {
  .etsy-profit-page .ep-layout-grid {
    grid-template-columns: 1fr;
  }
}
.ep-card {
  background: var(--ep-panel);
  border: 1px solid var(--ep-border);
  border-radius: 12px;
  padding: 16px;
  color: var(--ep-text);
}
.ep-profit-card { display: grid; gap: 12px; }
.ep-profit-row { display: flex; justify-content: space-between; font-size: 14px; }
.ep-profit-row strong { font-weight: 600; }
.ep-profit-net { font-size: 18px; font-weight: 700; border-top: 1px solid var(--ep-border); padding-top: 10px; }
.ep-confidence { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: rgba(148,163,184,0.2); }
.ep-confidence--low { background: rgba(239,68,68,0.15); color: #dc2626; }
.ep-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ep-stat { padding: 12px; border-radius: 10px; background: var(--ep-bg); }
.ep-stat-label { font-size: 12px; color: var(--ep-muted); }
.ep-stat-value { font-size: 20px; font-weight: 700; }
.ep-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ep-table th, .ep-table td { padding: 8px; border-bottom: 1px solid var(--ep-border); text-align: left; }
.ep-card--table { overflow-x: auto; }



.menures {
    height: 100vh; 
    position: sticky; 
    top: 0; 
    overflow-y: hidden; 

}
.menures > div[name="mainmenu"] {
    flex-grow: 1; 
    overflow-y: auto; 
}
.menures .Logo { 
    padding: 15px;
    text-align: center;
}
/* General Page Structure with Scope */
.order-detail-scope .orderdetail-page {
    display: flex;
    min-height: 100vh;
    background-color: #f0f0fa;
}

.order-detail-scope .sidebar-menu {
    width: 280px;
    background-color: #ffffff;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    /* padding: 15px; */
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.order-detail-scope .sidebar-menu .Logo {
    margin-bottom: 20px;
    text-align: center;
}
.order-detail-scope .sidebar-menu .Logo img {
    max-width: 150px;
    height: auto;
}

.order-detail-scope .dashboard-menu-container {
    flex-grow: 1;
    overflow-y: auto;
}

.order-detail-scope .main-content {
    flex-grow: 1;
    /* padding: 20px;
    overflow-y: auto; */
    max-width: calc(100vw - 280px);
}
.order-detail-scope .main-content .action-bar,
.order-detail-scope .main-content .content-body{
    padding: 5px 20px;
}
.order-detail-scope .page-header {
    background-color: #ffffff;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.order-detail-scope .back-button-icon {
    font-size: 2.5rem;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
}
.order-detail-scope .back-button-icon:hover {
    color: #333;
}

.order-detail-scope .content-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.order-detail-scope .content-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid #eaeaea;
}
.order-detail-scope .content-card-footer {
    border-top: 1px solid #f0f0f0;
    /* padding-top: 15px;
    margin-top: 15px; */
}

.order-detail-scope .order-header-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    gap: 15px;
}

.order-detail-scope .order-header-info .label {
    font-weight: bold;
    color: #555;
    margin-right: 8px;
    font-size: 0.9rem;
}
.order-detail-scope .order-header-info .value {
    color: #333;
    font-size: 0.9rem;
}
.order-detail-scope .order-title-section, .order-detail-scope .order-date-section {
    display: flex;
    flex-direction: column;
}

.order-detail-scope .order-actions {
    display: flex;
    gap: 15px;
}

.order-detail-scope .action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background-color: #444;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
}
.order-detail-scope .action-button:hover {
    background-color: #e07000;
}
.order-detail-scope .action-button svg {
    font-size: 1.2rem;
}

/* Order Details Layout */
.order-detail-scope .order-details-layout {
    display: flex;
    gap: 20px;
}

.order-detail-scope .order-items-section {
    flex: 3;
}

.order-detail-scope .customer-billing-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Order Item Rendering */
.order-detail-scope .order-item-render {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    gap: 15px;
}
.order-detail-scope .order-item-render:last-child {
    border-bottom: none;
}

.order-detail-scope .order-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Ürün Temel Bilgileri */
.order-detail-scope .product-basic-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.order-detail-scope .product-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.order-detail-scope .product-sku,
.order-detail-scope .product-category {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

/* Detay Bilgileri */
.order-detail-scope .product-detail-info,
.order-detail-scope .design-info,
.order-detail-scope .price-calculations {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.order-detail-scope .design-info {
    background-color: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    border-left: 4px solid #ff8306;
}

.order-detail-scope .design-header {
    margin-bottom: 8px;
}

.order-detail-scope .design-title {
    font-size: 1rem;
    font-weight: bold;
    color: #ff8306;
}

.order-detail-scope .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
}

.order-detail-scope .detail-row:last-child {
    border-bottom: none;
}

.order-detail-scope .detail-label {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
    min-width: 100px;
}

.order-detail-scope .detail-value {
    font-size: 0.85rem;
    color: #333;
    font-weight: 600;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 5px;
}

.order-detail-scope .color-preview {
    border: 2px solid #333 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: box-shadow 0.3s ease;
}
.order-detail-scope .color-preview:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/* Fiyat Hesaplamaları */
.order-detail-scope .price-calculations {
    background-color: #fff3e0;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ff8306;
}

.order-detail-scope .price-calculations .detail-row:last-child {
    border-top: 1px solid #ff8306;
    padding-top: 8px;
    margin-top: 5px;
    font-weight: bold;
    color: #e65100;
}

/* Aksiyon Butonları */
.order-detail-scope .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.order-detail-scope .printed-by {
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
}
.order-detail-scope .preview-sides-btn {
    background-color: #ff8306;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 0.8rem;
    align-self: flex-start;
}
.order-detail-scope .preview-sides-btn:hover {
    background-color: #e07000;
}

/* Yeni Görsel Düzenlemesi */
.order-detail-scope .order-item-images-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.order-detail-scope .product-image-section,
.order-detail-scope .design-image-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.order-detail-scope .image-label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff8306;
    text-align: center;
    background-color: #fff3e0;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ff8306;
}

.order-detail-scope .product-image-container,
.order-detail-scope .design-image-container {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.order-detail-scope .product-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.order-detail-scope .product-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.order-detail-scope .no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    color: #999;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 4px;
}

.order-detail-scope .design-image-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.order-detail-scope .download-design-btn {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 8px;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: center;
}

.order-detail-scope .download-design-btn:hover {
    background-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.order-detail-scope .download-design-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.order-detail-scope .item-quantity-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 10;
}

.order-detail-scope .item-quantity {
    background-color: #ff8306;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 2px solid white;
}

/* Eski stiller - geriye dönük uyumluluk için */
.order-detail-scope .order-item-image-container {
    width: 150px;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #f9f9f9;
}
.order-detail-scope .order-item-image-container canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Gantt Chart */
.order-detail-scope .order-status-gantt .gantt-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: block;
}
.order-detail-scope .gantt-chart-container {
    display: flex;
    width: 100%;
    background-color: #e9ecef;
    border-radius: 25px;
    overflow: hidden;
    height: 40px;
}
.order-detail-scope .gantt-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    color: #495057;
    font-size: 0.7rem;
    text-align: center;
    position: relative;
    border-right: 1px solid #d1d8de;
}
.order-detail-scope .gantt-node:last-child {
    border-right: none;
}

.order-detail-scope .gantt-node.completed {
    background-color: #ff8306;
    color: white;
}
.order-detail-scope .gantt-node.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}
.order-detail-scope .gantt-node.upcoming {
    background-color: #e9ecef;
    color: #6c757d;
}
.order-detail-scope .gantt-node.active svg, .order-detail-scope .gantt-node.completed svg {
    fill: white;
}
.order-detail-scope .gantt-node.upcoming svg {
    fill: #6c757d;
}
.order-detail-scope .gantt-node svg {
    margin-right: 5px;
    width: 1em;
    height: 1em;
}
.order-detail-scope .gantt-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Customer and Billing Info */
.order-detail-scope .card-header {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.order-detail-scope .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
}
.order-detail-scope .card-body p {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}
.order-detail-scope .card-body .info-label {
    font-weight: bold;
    color: #ff8306;
    font-size: 1rem;
    margin-top: 10px;
}
.order-detail-scope .card-body .info-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}
.order-detail-scope .address-details {
    font-style: italic;
    color: #444;
}
.order-detail-scope .billing-row, .order-detail-scope .total-cost-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.9rem;
}
.order-detail-scope .billing-row.expandable {
    cursor: pointer;
}
.order-detail-scope .billing-row.sub-item {
    padding-left: 20px;
    color: #777;
}
.order-detail-scope .amount-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}
.order-detail-scope .amount-toggle svg {
    color: #ff8306;
}
.order-detail-scope .card-footer.total-cost-row {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
    border-top: 2px solid #ff8306;
    margin-top:10px;
    padding-top:10px;
}


/* Modals (Reason, PDF Preview, Sides Preview) */
/* The modal overlay itself is usually appended to body, so scoping it might be tricky
   unless the modal components are also rendered within .order-detail-scope.
   Assuming Kendo Window and Draggable handle their own scoping or are rendered within.
   If they are portal-based and render outside, this scoping won't apply to their outermost wrapper.
   However, internal classes used *within* the modal content (passed as children) will be scoped if
   those components are defined/used within the .order-detail-scope.
*/

.order-detail-scope .modal-overlay { /* This will only work if modal-overlay is a child of order-detail-scope */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.order-detail-scope .reason-modal {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #ccc;
}
.order-detail-scope .reason-modal-header {
    display: flex;
    justify-content: flex-end;
    background-color: #ff8306;
    padding: 10px;
    margin: -20px -20px 0 -20px;
    border-radius: 8px 8px 0 0;
}
.order-detail-scope .reason-modal-header .close-icon {
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}
.order-detail-scope .reason-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-detail-scope .reason-textarea {
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    resize: vertical;
}
.order-detail-scope .reason-textarea:focus {
    border-color: #ff8306;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 131, 6, 0.2);
}
.order-detail-scope .reason-modal-footer {
    display: flex;
    justify-content: center;
}
.order-detail-scope .submit-reason-btn {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}
.order-detail-scope .submit-reason-btn:hover {
    background-color: #218838;
}

/* Kendo Window Customization with Scope */
/* Note: Kendo Windows often render directly under body or a specified portal.
   If so, .order-detail-scope will not be an ancestor unless the Window's appendTo prop is configured.
   The classes like 'orderdetail_pdfpreview_window' are global. If you want to scope Kendo's own classes,
   you'd need to ensure the Window component itself is within the scope or use very specific selectors.
   For styling the *content* of the window, if the content is from your scoped component, it will be scoped.
*/
.order-detail-scope .orderdetail_pdfpreview_window, 
.order-detail-scope .show-all-sides-window { /*This scopes if the window component itself has this class AND is inside scope*/
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    border: 1px solid #bbb !important;
}
/* These will apply if the Window is a child of .order-detail-scope in the DOM tree */
.order-detail-scope .k-window-titlebar { 
    background-color: #ff8306 !important;
    color: white !important;
    border-radius: 8px 8px 0 0 !important;
}
.order-detail-scope .k-window-content {
    padding: 15px !important;
    background-color: #fdfdfd;
}
.order-detail-scope .window-close-icon {
    font-size: 1.3rem;
    cursor: pointer;
    color: white;
    padding: 5px;
}
.order-detail-scope .window-close-icon:hover {
    opacity: 0.8;
}

/* ShowAllSideOfDesign Specifics with Scope */
.order-detail-scope .showsides-listview {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-height: 70vh;
    overflow-y: auto;
}
.order-detail-scope .side-show-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    width: 280px;
}
.order-detail-scope .side-item-info {
    text-align: center;
}
.order-detail-scope .side-item-info .side-label {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}
.order-detail-scope .download-image-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}
.order-detail-scope .download-image-btn:hover {
    background-color: #0056b3;
}

.order-detail-scope .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 1.5rem;
    color: #ff8306;
}

/* Responsive Adjustments with Scope */
@media (max-width: 1200px) {
    .order-detail-scope .order-details-layout {
        flex-direction: column;
    }
    .order-detail-scope .order-items-section, .order-detail-scope .customer-billing-section {
        flex: none;
        width: 100%;
    }
    .order-detail-scope .main-content {
         max-width: 100vw;
    }
}

@media (max-width: 992px) {
    .order-detail-scope .sidebar-menu {
        width: 220px;
    }
     .order-detail-scope .main-content {
         max-width: calc(100vw - 220px);
    }
    .order-detail-scope .order-header-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .order-detail-scope .order-actions {
        width: 100%;
        justify-content: space-around;
        margin-top:15px;
    }
    .order-detail-scope .action-button {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    .order-detail-scope .action-button svg {
        font-size: 1rem;
    }
    .order-detail-scope .gantt-node {
        font-size: 0.65rem;
    }
    .order-detail-scope .gantt-node svg {
        display: none;
    }
}

@media (max-width: 768px) {
    .order-detail-scope .sidebar-menu {
        display: none;
    }
    .order-detail-scope .main-content {
        max-width: 100vw;
    }
    .order-detail-scope .order-item-render {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .order-detail-scope .order-item-info .preview-sides-btn {
        align-self: center;
    }
    .order-detail-scope .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .order-detail-scope .detail-value {
        text-align: left;
    }
    .order-detail-scope .order-item-images-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .order-detail-scope .product-image-section,
    .order-detail-scope .design-image-section {
        width: 100%;
        max-width: 200px;
    }
    .order-detail-scope .product-image-container,
    .order-detail-scope .design-image-container {
        width: 120px;
        height: 120px;
    }
    .order-detail-scope .gantt-chart-container {
        height: auto;
        flex-direction: column;
    }
    .order-detail-scope .gantt-node {
        border-right: none;
        border-bottom: 1px solid #d1d8de;
        font-size: 0.8rem;
        min-height: 30px;
    }
    .order-detail-scope .gantt-node:last-child {
        border-bottom: none;
    }
     .order-detail-scope .showsides-listview {
        max-height: 60vh;
    }
    .order-detail-scope .side-show-item {
        width: 90%;
    }
    /* Scoping Kendo window for mobile might still be tricky if it's a portal */
     .order-detail-scope .k-window { 
        width: 90vw !important;
        left: 5vw !important;
    }
}

@media (max-width: 480px) {
    .order-detail-scope .page-header, 
    .order-detail-scope .order-header-info, 
    .order-detail-scope .content-card {
        padding: 15px;
    }
    .order-detail-scope .card-title {
        font-size: 1.1rem;
    }
    .order-detail-scope .order-actions {
        flex-direction: column;
        gap: 10px;
    }
    .order-detail-scope .action-button {
        width: 100%;
        justify-content: center;
    }
     .order-detail-scope .reason-modal {
        width: 95%;
        padding:15px;
    }
    .order-detail-scope .reason-modal-header {
        margin: -15px -15px 0 -15px;
    }
}

/* Etsy order detail dark-mode overrides (inline ağırlıklı görünüm için) */
[data-theme="dark"] .orderdetail {
    background: #0f1117 !important;
}

[data-theme="dark"] .orderdetail .etsy-order-detail-actions-wrap {
    background: #0f1117 !important;
}

[data-theme="dark"] .orderdetail .etsy-order-detail-actions-row {
    color: #e8eaf0 !important;
}

[data-theme="dark"] .orderdetail .etsy-order-detail-nav-pill {
    background: linear-gradient(90deg, #1f2433, #20283a) !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .orderdetail .etsy-order-detail-toolbar {
    background: #161926 !important;
    border-color: #2a2d3a !important;
}

[data-theme="dark"] .orderdetail .etsy-order-detail-main-body {
    background: #0f1117 !important;
}

[data-theme="dark"] .orderdetail #orderdetail {
    background: #0f1117 !important;
}

[data-theme="dark"] .orderdetail .etsy-order-detail-header-card {
    background: #1a1d27 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid #2a2d3a !important;
}

[data-theme="dark"] .orderdetail .order-edited-badge {
    background: #312e81 !important;
    color: #c7d2fe !important;
    border-color: rgba(199, 210, 254, 0.35) !important;
}

[data-theme="dark"] .orderdetail .info-card {
    background: #1a1d27 !important;
    border-color: #2a2d3a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .orderdetail .card-title,
[data-theme="dark"] .orderdetail .card-body,
[data-theme="dark"] .orderdetail .detail-value,
[data-theme="dark"] .orderdetail .product-name,
[data-theme="dark"] .orderdetail .order-title {
    color: #e8eaf0 !important;
}

[data-theme="dark"] .orderdetail .detail-label,
[data-theme="dark"] .orderdetail .product-sku,
[data-theme="dark"] .orderdetail .product-category,
[data-theme="dark"] .orderdetail .card-body .info-label,
[data-theme="dark"] .orderdetail .card-body .info-footer,
[data-theme="dark"] .orderdetail .address-details {
    color: #9ca3c4 !important;
}

/* Sipariş kalemleri iç kartları */
[data-theme="dark"] .orderdetail .eod-order-item-card {
    background: #202433 !important;
    border-color: #343a4f !important;
}

[data-theme="dark"] .orderdetail .eod-order-item-thumb {
    background: #161926 !important;
}

[data-theme="dark"] .orderdetail .eod-order-item-title {
    color: #e8eaf0 !important;
}

[data-theme="dark"] .orderdetail .eod-order-item-meta {
    color: #9ca3c4 !important;
}

[data-theme="dark"] .orderdetail .eod-order-item-custom-text {
    background: rgba(5, 150, 105, 0.18) !important;
    border-color: #10b981 !important;
    border-left-color: #10b981 !important;
    color: #a7f3d0 !important;
}

/* Etsy sipariş detayları iç kartları */
[data-theme="dark"] .orderdetail .eod-etsy-details-card {
    background: #202433 !important;
    border-color: #343a4f !important;
}

[data-theme="dark"] .orderdetail .eod-etsy-details-card h4 {
    color: #e8eaf0 !important;
}

[data-theme="dark"] .orderdetail .eod-etsy-details-card div {
    color: #c7ccdb;
}

/* Tasarım paketi kartları — My Designs ile aynı görünüm */
.orderdetail .eod-design-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.orderdetail .eod-design-package-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.orderdetail .eod-design-package-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.orderdetail .eod-design-package-preview-wrap {
    position: relative;
}

.orderdetail .eod-design-package-download-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background 0.2s ease, transform 0.2s ease;
}

.orderdetail .eod-design-package-download-btn:hover {
    background: rgba(37, 99, 235, 0.95);
    transform: scale(1.03);
}

.orderdetail .eod-design-package-body {
    padding: 12px;
}

.orderdetail .eod-design-package-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orderdetail .eod-design-package-meta {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.orderdetail .eod-design-package-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[data-theme="dark"] .orderdetail .eod-design-package-card {
    background: #1a1d27;
    border-color: #343848;
}

[data-theme="dark"] .orderdetail .eod-design-package-title {
    color: #f0f1f5;
}

[data-theme="dark"] .orderdetail .eod-design-package-meta {
    color: #a8afc3;
}

[data-theme="dark"] .orderdetail .eod-design-package-badges .badge.bg-light {
    background: #2a2d3a !important;
    color: #e8eaf0 !important;
}
/* Suggested CSS to be added to brand.css or a new style sheet */

/* Main container for the page content below the header */
.content-wrapper-card {
    background-color: #f0f0fa; /* Light gray background */
    padding: 20px; /* Spacing for the card from edges */
    min-height: calc(90vh - 70px); /* Adjust 70px based on actual header height */
    box-sizing: border-box;
    width: 100%;
  }
  
  /* The main white card holding all content sections */
  .page-card {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    margin: 0; 
  }
  
  /* Styling for sections within the card */
  .add-user-section,
  .filters-section,
  .grid-section {
    margin-bottom: 30px;
  }
  .grid-section {
    margin-bottom: 10px; /* Less margin for the last section */
  }
  
  
  .add-user-section .col-12.d-flex.insertfaqcard {
    margin-bottom: 0px; /* Remove bottom margin if rows are directly stacked */
  }
  
  
  /* Input field styling */
  .registerinputs_user,
  .k-dropdownlist .k-input-inner, /* Kendo DropDownList input part */
  .filterlist .k-input-inner,
  .grid-cell-input,
  .grid-cell-dropdown .k-input-inner /* Kendo DropDownList in grid */ {
    background-color: #ffffff !important; 
    border: 1px solid #ced4da !important; 
    border-radius: 8px !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    width: 100%; 
    color: #495057 !important; 
    font-size: 0.95rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: auto !important; /* Let padding define height */
    line-height: normal !important; /* Ensure proper line height */
  }
  
  /* Ensure Kendo DropDownList wrapper also has a nice radius and consistent height */
  .k-dropdownlist,
  .k-picker, /* General Kendo picker class */
  .grid-cell-dropdown .k-dropdownlist,
  .grid-cell-dropdown .k-picker {
    border-radius: 8px !important;
    width: 100% !important; /* Make dropdown take full width */
  }
  .k-dropdownlist .k-input-inner, 
  .k-picker .k-input-inner {
      padding-top: 10px !important; /* Align text vertically better in Kendo inputs */
      padding-bottom: 10px !important;
  }
  
  
  .registerinputs_user:focus,
  .k-dropdownlist .k-input-inner:focus,
  .filterlist .k-input-inner:focus,
  .grid-cell-input:focus,
  .grid-cell-dropdown .k-input-inner:focus {
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
  }
  
  
  /* Specific styling for input groups in add user section */
  .registeruser {
    padding-right: 8px; /* Adjusted padding */
    padding-left: 8px;  /* Adjusted padding */
    margin-bottom: 18px; 
  }
  
  .registeruser .username {
    margin-bottom: 8px; 
    font-weight: 500; 
    color: #333;
    font-size: 0.9rem;
    display: block; /* Ensure it takes full width for alignment */
  }

  div.user span.k-dropdownlist.k-picker.k-picker-md.k-rounded-md.k-picker-solid{
    height: 38px !important;
  }
  .registeruser .k-input-inner, .k-picker .k-input-inner{
    border: none !important;
  }
  
  /* Styling for the orange bordered section */
  .highlight-section {
    background: rgba(255, 165, 0, 0.08); /* Lighter orange */
    border-radius: 10px;
    border: 1px solid #fed8b1; /* Softer orange border */
    padding: 20px;
   /* margin-bottom: 25px; done by .add-user-section */
  }
  
  /* Filter section title and clear button */
  .filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
  }
  
  .filters-header > span:first-child { /* "filters" title */
    font-size: 1.2rem; /* Adjusted size */
    border-bottom: 3px solid #ff8306;
    padding-bottom: 4px;
    font-weight: bold;
    margin-bottom: 10px; /* For spacing when wrapped */
  }
  
  .clear-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #ffa50e; */
    color: white;
    border-radius: 6px; /* Adjusted radius */
    padding: 9px 18px; /* Adjusted padding */
    font-size: 0.95rem; /* Adjusted size */
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
  }
  
  .clear-filters-btn:hover {
    background: #e09100;
  }
  
  .clear-filters-btn svg {
    margin-right: 8px;
    font-size: 1.1em; /* Slightly larger icon in button */
  }
  
  /* Filter input list */
  .filterlist {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    align-items: stretch; /* Align items to stretch vertically */
  }
  
  .filterlist > div { 
    flex-grow: 1; 
    flex-basis: 200px; /* Base width before growing/shrinking */
    display: flex; /* To make inputs inside take full height if needed */
    flex-direction: column; /* For label-like behavior if a span was above input */
  }
  .filterlist .k-input-inner {
     /* height is auto */
  }
  
  /* Password input with eye icon */
  .password-input-container {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .password-input-container .registerinputs_user {
    padding-right: 35px !important; /* Space for the icon */
  }
  
  .password-input-container svg { 
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #777;
    width: 18px; 
    height: 18px; 
  }
  
  
  /* Grid styling */
  .k-grid {
    border-radius: 8px !important; /* Kendo might override, use important if needed */
    overflow: hidden; 
    border: 1px solid #dee2e6 !important;
    width: 100% !important; /* Ensure grid takes full width */
  }
  .k-grid-header {
    background-color: #f8f9fa !important; 
  }
  .k-grid-header .k-header {
    border-width: 0 0 1px 0 !important;
    font-weight: 600 !important;
    color: #333 !important;
    padding: 0 !important; /* Consistent padding */
  }
  .k-grid td {
      padding: 0.75rem 1rem !important; /* Consistent padding for cells */
      border-width: 0 0 1px 0 !important;
  }
  
  /* Balance Dialog Styles */
  .balance-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }
  
  .balance-dialog {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .balance-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 12px 12px 0 0;
  }
  
  .balance-dialog-header h4 {
    margin: 0;
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
  }
  
  .close-btn:hover {
    background: #e9ecef;
    color: #333;
  }
  
  .balance-dialog-body {
    padding: 25px;
  }
  
  .user-info {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid #007bff;
  }
  
  .user-info p {
    margin: 5px 0;
    color: #555;
  }
  
  .user-info strong {
    color: #333;
  }
  
  .balance-dialog-body .form-group {
    margin-bottom: 20px;
  }
  
  .balance-dialog-body label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
  }
  
  .balance-dialog-body input,
  .balance-dialog-body textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
    background-color: #ffffff !important;
    color: #333 !important;
  }
  
  .balance-dialog-body input:focus,
  .balance-dialog-body textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    background-color: #ffffff !important;
    color: #333 !important;
  }
  
  .balance-dialog-body textarea {
    resize: vertical;
    min-height: 80px;
  }
  
  .balance-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
  }
  
  .balance-dialog-footer .btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .balance-dialog-footer .btn-secondary {
    background: #6c757d;
    color: white;
  }
  
  .balance-dialog-footer .btn-secondary:hover {
    background: #5a6268;
  }
  
  .balance-dialog-footer .btn-primary {
    background: #007bff;
    color: white;
  }
  
  .balance-dialog-footer .btn-primary:hover {
    background: #0056b3;
  }
  .k-grid-norecords td div {
      padding: 20px;
      text-align: center;
      color: #777;
  }
  
  
  /* Icon styling in operations */
  .k-grid td .d-flex svg {
    width: 20px; 
    height: 20px;
    margin: 0; 
    color: #555; /* Default color for grid icons */
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .k-grid td .d-flex svg:hover {
    transform: scale(1.1);
    color: #007bff; /* Highlight color on hover */
  }
  .k-grid td .d-flex svg[color*="rgb(22 126 61)"]:hover, /* For MdOutlineDataSaverOn */
  .k-grid td .d-flex svg[color*="rgb(71 70 69)"]:hover, /* For MdOutlineSaveAs */
  .k-grid td .d-flex svg[color*="#3c3c3c"]:hover { /* For MdOutlineDeleteOutline */
      color: inherit; /* Keep original hover color if defined by inline style or more specific rules */
  }
  
  
  /* Tooltip styling for icons - general */
  .tooltipbuttons svg {
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .tooltipbuttons svg:hover {
    transform: scale(1.1);
  }
  
  /* Back arrow tooltip specific icon styling */
  .back-arrow-icon { 
    height: 32px !important; 
    width: 32px !important;
    color: #555 !important; 
  }
  .back-arrow-icon:hover {
    color: #007bff !important; 
  }
  .btn-success{
    background-color: #198754 !important;
  }
  /* Register button in add user section */
  .register-button-container { 
      margin-top: 15px;
      display: flex; /* For alignment if needed */
      justify-content: flex-start; /* Or center, flex-end */
  }
  
  .register-button-container .tooltipbuttons svg { 
      height: 36px !important;
      width: 36px !important;
      color: #28a745 !important; 
  }
  .register-button-container .tooltipbuttons svg:hover {
      color: #218838 !important; 
      transform: scale(1.1);
  }
  
  
  /* Responsive adjustments */
  @media (max-width: 992px) { 
    .add-user-section .insertfaqcard .col-md-6 { /* Target md columns */
      flex: 0 0 100%; 
      max-width: 100%;
    }
    .registeruser {
      padding-right: 0;
      padding-left: 0;
    }
    .filterlist > div {
      flex-basis: calc(50% - 10px); /* Two filters per row, considering gap */
    }
  }
  
  @media (max-width: 768px) {
    .content-wrapper-card {
      padding: 10px;
    }
    .page-card {
      padding: 15px;
    }
    .highlight-section {
      padding: 15px;
    }
    .filters-header {
      flex-direction: column;
      align-items: stretch; /* Stretch items to full width */
    }
    .filters-header > span:first-child {
      margin-bottom: 15px; /* More space when title is above button */
      align-self: flex-start;
    }
    .clear-filters-btn {
      width: 100%; /* Full width button on small screens */
    }
    .filterlist > div {
      flex-basis: 100%; /* Stack filter inputs */
    }
    .registerinputs_user,
    .k-dropdownlist .k-input-inner,
    .filterlist .k-input-inner,
    .grid-cell-input,
    .grid-cell-dropdown .k-input-inner {
      padding: 9px 10px !important; /* Slightly smaller padding */
      font-size: 0.9rem !important;
    }
    .k-grid-header .k-header, .k-grid td {
      padding: 0  !important; /* Smaller padding in grid for mobile */
    }
  }
  
  @media (max-width: 576px) {
      .password-input-container .registerinputs_user {
          padding-right: 30px !important; /* Adjust for smaller screens if icons overlap */
      }
      .password-input-container svg {
          width: 16px;
          height: 16px;
          right: 8px;
      }
  }

/* Dark theme — balance / admin modals */
[data-theme="dark"] .balance-dialog {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .balance-dialog-header,
[data-theme="dark"] .balance-dialog-footer {
  background: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .balance-dialog-header h4 {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .balance-dialog-body {
  background: #1a1d27 !important;
  color: #c8cad8 !important;
}

[data-theme="dark"] .balance-dialog-body label {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .balance-dialog-body input,
[data-theme="dark"] .balance-dialog-body textarea,
[data-theme="dark"] .balance-dialog-body select {
  background-color: #13151f !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .balance-dialog-body input:focus,
[data-theme="dark"] .balance-dialog-body textarea:focus,
[data-theme="dark"] .balance-dialog-body select:focus {
  background-color: #1a1d27 !important;
  color: #e8eaf0 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] .balance-dialog .user-info {
  background: #13151f !important;
  border-left-color: #6366f1 !important;
}

[data-theme="dark"] .balance-dialog .user-info p {
  color: #c8cad8 !important;
}

[data-theme="dark"] .balance-dialog .user-info strong {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .balance-dialog .close-btn {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .balance-dialog .close-btn:hover {
  background: #343a4f !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .balance-dialog-footer .btn-secondary {
  background: #343a4f !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .balance-dialog-footer .btn-secondary:hover {
  background: #4b5563 !important;
}

[data-theme="dark"] .balance-dialog-footer .btn-primary {
  background: #4f46e5 !important;
}

[data-theme="dark"] .balance-dialog-footer .btn-primary:hover {
  background: #6366f1 !important;
}

[data-theme="dark"] .balance-dialog-body .form-group label {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .balance-dialog-body .form-group span,
[data-theme="dark"] .balance-dialog-body .form-group label span {
  color: #c8cad8 !important;
}
/* Admin Users — full-width modern desk */
.admin-users {
  --au-primary: #6366f1;
  --au-primary-hover: #4f46e5;
  --au-primary-light: rgba(99, 102, 241, 0.1);
  --au-accent: #8b5cf6;
  --au-success: #10b981;
  --au-warning: #f59e0b;
  --au-danger: #ef4444;
  --au-muted: #64748b;
  --au-border: #e2e8f0;
  --au-bg: #f0f0fa;
  --au-panel: #ffffff;
  --au-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --au-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --au-radius: 16px;
  --au-radius-sm: 10px;
  --au-transition: 0.18s ease;
  min-height: 100vh;
}

.admin-users .au-sidebar-menu {
  border-right: 1px solid var(--au-border);
}

.admin-users .au-layout {
  background: var(--au-bg);
  min-height: 100vh;
}

.admin-users .au-header-bar {
  background: #fff;
  box-shadow: var(--au-shadow);
  border-bottom: 1px solid var(--au-border);
}

.admin-users .au-shell {
  width: 100%;
  max-width: none;
  padding: 20px 16px 32px;
}

@media (min-width: 768px) {
  .admin-users .au-shell {
    padding: 24px 28px 40px;
  }
}

@media (min-width: 1200px) {
  .admin-users .au-shell {
    padding: 28px 36px 48px;
  }
}

/* Hero */
.admin-users .au-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-users .au-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--au-primary-light);
  color: var(--au-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.admin-users .au-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1.15;
}

.admin-users .au-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--au-muted);
  max-width: 640px;
  line-height: 1.5;
}

.admin-users .au-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-users .au-refresh-btn,
.admin-users .au-add-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--au-radius-sm);
  border: 1px solid var(--au-border);
  background: #fff;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--au-transition);
}

.admin-users .au-refresh-btn:hover:not(:disabled),
.admin-users .au-add-toggle-btn:hover {
  border-color: var(--au-primary);
  color: var(--au-primary);
}

.admin-users .au-add-toggle-btn.active {
  background: var(--au-primary);
  border-color: var(--au-primary);
  color: #fff;
}

.admin-users .au-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-users .au-spin {
  animation: au-spin 0.8s linear infinite;
}

@keyframes au-spin {
  to { transform: rotate(360deg); }
}

/* Stats */
.admin-users .au-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .admin-users .au-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.admin-users .au-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--au-panel);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  box-shadow: var(--au-shadow);
}

.admin-users .au-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.admin-users .au-stat-total .au-stat-icon { background: rgba(99, 102, 241, 0.12); color: var(--au-primary); }
.admin-users .au-stat-admin .au-stat-icon { background: rgba(139, 92, 246, 0.12); color: var(--au-accent); }
.admin-users .au-stat-producer .au-stat-icon { background: rgba(245, 158, 11, 0.12); color: var(--au-warning); }
.admin-users .au-stat-balance .au-stat-icon { background: rgba(16, 185, 129, 0.12); color: var(--au-success); }

.admin-users .au-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.admin-users .au-stat-label {
  font-size: 0.78rem;
  color: var(--au-muted);
  margin-top: 2px;
}

/* Panel */
.admin-users .au-panel {
  background: var(--au-panel);
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  box-shadow: var(--au-shadow-lg);
  overflow: hidden;
}

/* Add user form */
.admin-users .au-add-form {
  padding: 20px 20px 8px;
  border-bottom: 1px solid var(--au-border);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, transparent 100%);
}

.admin-users .au-add-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px;
}

.admin-users .au-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .admin-users .au-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .admin-users .au-form-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.admin-users .au-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--au-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-users .au-field input,
.admin-users .au-field .k-dropdownlist,
.admin-users .au-field .registerinputs_user {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-sm);
  font-size: 0.9rem;
  background: #fff;
  transition: var(--au-transition);
}

.admin-users .au-field input:focus {
  outline: none;
  border-color: var(--au-primary);
  box-shadow: 0 0 0 3px var(--au-primary-light);
}

.admin-users .au-password-wrap {
  position: relative;
}

.admin-users .au-password-wrap input {
  padding-right: 40px;
}

.admin-users .au-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--au-muted);
  font-size: 1.1rem;
}

.admin-users .au-form-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 8px;
  grid-column: 1 / -1;
}

.admin-users .au-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--au-success);
  color: #fff;
  border: none;
  border-radius: var(--au-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--au-transition);
}

.admin-users .au-btn-primary:hover {
  filter: brightness(0.95);
}

/* Toolbar */
.admin-users .au-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--au-border);
  align-items: center;
}

.admin-users .au-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.admin-users .au-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--au-muted);
  pointer-events: none;
}

.admin-users .au-search-wrap input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-sm);
  font-size: 0.9rem;
  background: #f8fafc;
}

.admin-users .au-search-wrap input:focus {
  outline: none;
  border-color: var(--au-primary);
  background: #fff;
}

.admin-users .au-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-sm);
  background: #fff;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--au-transition);
}

.admin-users .au-tool-btn:hover {
  border-color: var(--au-primary);
  color: var(--au-primary);
}

.admin-users .au-tool-btn-ghost {
  color: var(--au-danger);
  border-color: rgba(239, 68, 68, 0.3);
}

/* Role pills */
.admin-users .au-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 16px;
}

.admin-users .au-pill {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--au-border);
  background: #fff;
  color: var(--au-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--au-transition);
}

.admin-users .au-pill:hover {
  border-color: var(--au-primary);
  color: var(--au-primary);
}

.admin-users .au-pill.active {
  background: var(--au-primary);
  border-color: var(--au-primary);
  color: #fff;
}

/* Table */
.admin-users .au-table-wrap {
  overflow-x: auto;
}

.admin-users .au-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-users .au-table thead {
  background: #f8fafc;
  border-bottom: 2px solid var(--au-border);
}

.admin-users .au-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--au-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.admin-users .au-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.admin-users .au-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.03);
}

.admin-users .au-cell-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
}

.admin-users .au-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--au-primary), var(--au-accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-users .au-user-name {
  font-weight: 600;
  color: #0f172a;
}

.admin-users .au-user-id {
  font-size: 0.72rem;
  color: var(--au-muted);
  font-family: ui-monospace, monospace;
  cursor: pointer;
}

.admin-users .au-user-id:hover {
  color: var(--au-primary);
}

.admin-users .au-cell-input {
  width: 100%;
  min-width: 80px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 0.875rem;
}

.admin-users .au-cell-input:hover,
.admin-users .au-cell-input:focus {
  border-color: var(--au-border);
  background: #fff;
  outline: none;
}

.admin-users .au-cell-input:focus {
  border-color: var(--au-primary);
}

.admin-users .au-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.admin-users .au-badge-role {
  background: var(--au-primary-light);
  color: var(--au-primary);
}

.admin-users .au-badge-whatsapp {
  background: rgba(16, 185, 129, 0.12);
  color: var(--au-success);
}

.admin-users .au-badge-muted {
  background: #f1f5f9;
  color: var(--au-muted);
}

.admin-users .au-balance {
  font-weight: 700;
  color: var(--au-success);
  font-variant-numeric: tabular-nums;
}

.admin-users .au-balance-empty {
  color: var(--au-muted);
}

.admin-users .au-date-cell {
  white-space: nowrap;
}

.admin-users .au-date-main {
  font-weight: 500;
  color: #334155;
}

.admin-users .au-date-sub {
  font-size: 0.75rem;
  color: var(--au-muted);
}

.admin-users .au-phone-cell {
  font-variant-numeric: tabular-nums;
  color: #334155;
}

.admin-users .au-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.admin-users .au-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: var(--au-transition);
  color: var(--au-muted);
}

.admin-users .au-action-btn:hover {
  background: #f1f5f9;
}

.admin-users .au-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--au-danger);
}

.admin-users .au-action-btn.primary:hover {
  background: rgba(99, 102, 241, 0.1);
  color: var(--au-primary);
}

.admin-users .au-action-btn.success:hover {
  background: rgba(16, 185, 129, 0.1);
  color: var(--au-success);
}

/* Role dropdown in table */
.admin-users .au-role-dropdown .k-dropdownlist,
.admin-users .au-role-dropdown .grid-cell-dropdown {
  min-width: 120px;
  font-size: 0.82rem;
}

/* Pagination */
.admin-users .au-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--au-border);
  background: #fafbfc;
}

.admin-users .au-page-info {
  font-size: 0.85rem;
  color: var(--au-muted);
}

.admin-users .au-page-btns {
  display: flex;
  gap: 8px;
}

.admin-users .au-page-btn {
  padding: 8px 14px;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius-sm);
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--au-transition);
}

.admin-users .au-page-btn:hover:not(:disabled) {
  border-color: var(--au-primary);
  color: var(--au-primary);
}

.admin-users .au-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty / loading */
.admin-users .au-loading,
.admin-users .au-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--au-muted);
}

.admin-users .au-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.4;
}

.admin-users .au-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

/* Mobile cards */
.admin-users .au-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.admin-users .au-card {
  background: #fff;
  border: 1px solid var(--au-border);
  border-radius: var(--au-radius);
  padding: 16px;
  box-shadow: var(--au-shadow);
}

.admin-users .au-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-users .au-card-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.admin-users .au-card-meta dt {
  color: var(--au-muted);
  font-weight: 600;
}

.admin-users .au-card-meta dd {
  margin: 0;
  color: #334155;
}

.admin-users .au-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

/* Dialogs (reuse balance-dialog from user.css, enhance) */
.admin-users .balance-dialog-overlay {
  backdrop-filter: blur(4px);
}

.admin-users .balance-dialog {
  border-radius: var(--au-radius);
  box-shadow: var(--au-shadow-lg);
}

/* Dark theme */
[data-theme="dark"] .admin-users {
  --au-bg: #0f1117;
  --au-panel: #1a1d27;
  --au-border: #2a2d3a;
  --au-muted: #9ca3c4;
  --au-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --au-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --au-primary-light: rgba(99, 102, 241, 0.18);
}

[data-theme="dark"] .admin-users .au-sidebar-menu {
  border-right-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .au-layout {
  background: #0f1117;
}

[data-theme="dark"] .admin-users .au-header-bar {
  background: #1a1d27;
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .au-title,
[data-theme="dark"] .admin-users .au-stat-value,
[data-theme="dark"] .admin-users .au-user-name,
[data-theme="dark"] .admin-users .au-date-main,
[data-theme="dark"] .admin-users .au-phone-cell,
[data-theme="dark"] .admin-users .au-add-form-title,
[data-theme="dark"] .admin-users .au-empty-title {
  color: #f0f1f5;
}

[data-theme="dark"] .admin-users .au-subtitle,
[data-theme="dark"] .admin-users .au-stat-label,
[data-theme="dark"] .admin-users .au-user-id,
[data-theme="dark"] .admin-users .au-date-sub,
[data-theme="dark"] .admin-users .au-page-info,
[data-theme="dark"] .admin-users .au-empty,
[data-theme="dark"] .admin-users .au-field label {
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .au-stat-card,
[data-theme="dark"] .admin-users .au-panel,
[data-theme="dark"] .admin-users .au-refresh-btn,
[data-theme="dark"] .admin-users .au-add-toggle-btn,
[data-theme="dark"] .admin-users .au-tool-btn,
[data-theme="dark"] .admin-users .au-pill,
[data-theme="dark"] .admin-users .au-card,
[data-theme="dark"] .admin-users .au-page-btn {
  background: #1a1d27;
  border-color: #2a2d3a;
  color: #c8cad8;
}

[data-theme="dark"] .admin-users .au-refresh-btn:hover:not(:disabled),
[data-theme="dark"] .admin-users .au-add-toggle-btn:hover,
[data-theme="dark"] .admin-users .au-tool-btn:hover,
[data-theme="dark"] .admin-users .au-pill:hover,
[data-theme="dark"] .admin-users .au-page-btn:hover:not(:disabled) {
  border-color: #6366f1;
  color: #a5b4fc;
}

[data-theme="dark"] .admin-users .au-add-toggle-btn.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .admin-users .au-toolbar,
[data-theme="dark"] .admin-users .au-filters,
[data-theme="dark"] .admin-users .au-pagination,
[data-theme="dark"] .admin-users .au-add-form {
  background: #161926;
  border-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .au-add-form {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, #161926 100%);
}

[data-theme="dark"] .admin-users .au-pill.active {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .admin-users .au-search-wrap input,
[data-theme="dark"] .admin-users .au-field input,
[data-theme="dark"] .admin-users .au-cell-input {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-users .au-search-wrap input::placeholder,
[data-theme="dark"] .admin-users .au-cell-input::placeholder {
  color: #6b7280;
}

[data-theme="dark"] .admin-users .au-search-wrap input:focus,
[data-theme="dark"] .admin-users .au-field input:focus,
[data-theme="dark"] .admin-users .au-cell-input:focus {
  background: #1a1d27;
  border-color: #6366f1;
}

[data-theme="dark"] .admin-users .au-cell-input:hover {
  background: #1a1d27;
  border-color: #343a4f;
}

[data-theme="dark"] .admin-users .au-table thead {
  background: #161926;
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .au-table th {
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .au-table td {
  border-bottom-color: #232635;
  color: #c8cad8;
}

[data-theme="dark"] .admin-users .au-table tbody tr:hover {
  background: #202433;
}

[data-theme="dark"] .admin-users .au-badge-role {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .admin-users .au-badge-muted {
  background: #232635;
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .au-badge-whatsapp {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

[data-theme="dark"] .admin-users .au-balance {
  color: #6ee7b7;
}

[data-theme="dark"] .admin-users .au-balance-empty {
  color: #6b7280;
}

[data-theme="dark"] .admin-users .au-action-btn {
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .au-action-btn:hover {
  background: #232635;
}

[data-theme="dark"] .admin-users .au-action-btn.primary:hover {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
}

[data-theme="dark"] .admin-users .au-action-btn.success:hover {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

[data-theme="dark"] .admin-users .au-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

[data-theme="dark"] .admin-users .au-card-meta dt {
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .au-card-meta dd {
  color: #e8eaf0;
}

[data-theme="dark"] .admin-users .au-card-actions {
  border-top-color: #232635;
}

[data-theme="dark"] .admin-users .au-pagination {
  background: #161926;
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .au-tool-btn-ghost {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}

[data-theme="dark"] .admin-users .au-btn-primary {
  background: #059669;
}

[data-theme="dark"] .admin-users .au-btn-primary:hover {
  background: #10b981;
}

[data-theme="dark"] .admin-users .balance-dialog-overlay,
[data-theme="dark"] .balance-dialog-overlay {
  background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .admin-users .balance-dialog,
[data-theme="dark"] .balance-dialog {
  background: #1a1d27;
  border: 1px solid #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-users .balance-dialog-header,
[data-theme="dark"] .balance-dialog-header {
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .balance-dialog-header h4,
[data-theme="dark"] .balance-dialog-header h4 {
  color: #f0f1f5;
}

[data-theme="dark"] .admin-users .balance-dialog-body,
[data-theme="dark"] .balance-dialog-body {
  color: #c8cad8;
}

[data-theme="dark"] .admin-users .balance-dialog-body input,
[data-theme="dark"] .admin-users .balance-dialog-body textarea,
[data-theme="dark"] .admin-users .balance-dialog-body select,
[data-theme="dark"] .balance-dialog-body input,
[data-theme="dark"] .balance-dialog-body textarea,
[data-theme="dark"] .balance-dialog-body select {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-users .balance-dialog-body label,
[data-theme="dark"] .balance-dialog-body label {
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .balance-dialog-footer,
[data-theme="dark"] .balance-dialog-footer {
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .admin-users .balance-dialog .user-info,
[data-theme="dark"] .balance-dialog .user-info {
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .admin-users .balance-dialog .close-btn,
[data-theme="dark"] .balance-dialog .close-btn {
  color: #9ca3c4;
}

[data-theme="dark"] .admin-users .balance-dialog-footer .btn-secondary,
[data-theme="dark"] .balance-dialog-footer .btn-secondary {
  background: #232635;
  border-color: #343a4f;
  color: #c8cad8;
}

[data-theme="dark"] .balance-dialog-body h5 {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .balance-dialog-body table thead tr {
  background: #161926 !important;
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .balance-dialog-body table th {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .balance-dialog-body table td {
  color: #c8cad8 !important;
  border-bottom-color: #232635 !important;
}

[data-theme="dark"] .balance-dialog-body table tbody tr {
  border-bottom-color: #232635 !important;
}

[data-theme="dark"] .admin-users .balance-dialog-footer .btn-primary,
[data-theme="dark"] .balance-dialog-footer .btn-primary {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .admin-users .k-dropdownlist,
[data-theme="dark"] .admin-users .grid-cell-dropdown,
[data-theme="dark"] .admin-users .k-input-inner {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

/* Users page — transactions modal */
.au-tx-dialog {
  max-width: 90%;
  width: 1000px;
  max-height: 90vh;
}

.au-tx-body-scroll {
  overflow-y: auto;
  max-height: calc(90vh - 150px);
}

.au-tx-user-info {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.au-tx-stats-wrap {
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.au-tx-stats-title {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.au-tx-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.au-tx-stat-card {
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.au-tx-stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 4px;
}

.au-tx-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.au-tx-stat-value.positive { color: #16a34a; }
.au-tx-stat-value.negative { color: #dc2626; }

.au-tx-stat-sub {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-top: 4px;
}

.au-tx-empty {
  text-align: center;
  padding: 40px;
  color: #6b7280;
}

.au-tx-table-wrap {
  overflow-x: auto;
}

.au-tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.au-tx-table thead tr {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

.au-tx-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
}

.au-tx-table th.right,
.au-tx-table td.right {
  text-align: right;
}

.au-tx-table td {
  padding: 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #334155;
}

.au-tx-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
}

.au-tx-badge.deposit {
  background: #dbeafe;
  color: #1e40af;
}

.au-tx-badge.withdraw {
  background: #fee2e2;
  color: #991b1b;
}

.au-tx-amount.deposit {
  font-weight: 600;
  color: #16a34a;
}

.au-tx-amount.withdraw {
  font-weight: 500;
  color: #dc2626;
}

.au-tx-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e5e7eb;
}

.au-tx-pagination-info {
  font-size: 0.9rem;
  color: #6b7280;
}

.au-tx-pagination-btns {
  display: flex;
  gap: 8px;
}

[data-theme="dark"] .au-tx-user-info {
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .au-tx-stats-wrap {
  background: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .au-tx-stats-title {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .au-tx-stat-card {
  background: #232635 !important;
  border-color: #343a4f !important;
  box-shadow: none !important;
}

[data-theme="dark"] .au-tx-stat-label {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .au-tx-stat-value.positive {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .au-tx-stat-value.negative {
  color: #fca5a5 !important;
}

[data-theme="dark"] .au-tx-stat-sub,
[data-theme="dark"] .au-tx-empty,
[data-theme="dark"] .au-tx-pagination-info {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .au-tx-table thead tr {
  background: #161926 !important;
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .au-tx-table th {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .au-tx-table td {
  color: #c8cad8 !important;
  border-bottom-color: #232635 !important;
}

[data-theme="dark"] .au-tx-badge.deposit {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .au-tx-badge.withdraw {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

[data-theme="dark"] .au-tx-amount.deposit {
  color: #6ee7b7 !important;
}

[data-theme="dark"] .au-tx-amount.withdraw {
  color: #fca5a5 !important;
}

[data-theme="dark"] .au-tx-pagination {
  border-top-color: #2a2d3a !important;
}

[data-theme="dark"] .td-modal-body select option {
  background: #13151f;
  color: #e8eaf0;
}

.au-self-digitize-cell {
  text-align: center;
  vertical-align: middle;
}

.au-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}

.au-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.au-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.au-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.au-toggle-switch input:checked + .au-toggle-slider {
  background: #6366f1;
}

.au-toggle-switch input:checked + .au-toggle-slider::before {
  transform: translateX(18px);
}

.au-toggle-switch input:focus-visible + .au-toggle-slider {
  outline: 2px solid rgba(99, 102, 241, 0.45);
  outline-offset: 2px;
}

[data-theme="dark"] .au-toggle-slider {
  background: #3f4458;
}

[data-theme="dark"] .au-toggle-switch input:checked + .au-toggle-slider {
  background: #818cf8;
}

[data-theme="dark"] .au-toggle-slider::before {
  background: #f8fafc;
}

div#price input {
   border-bottom: 0px !important
}

div#price input {
   border: 1px solid #d4d2d2;
   /* border-radius: 18px; */
   background: #d4d2d2;
   padding: 0 5px;
   height: 40px !important;
   color: #4b4b4b;
   font-size: 1.1rem;
   text-align: start;
}

div#price span {
   color: black;
   font-family: sarabun_bolditalic;
}

div.insertprice_grid div.k-grid-content table tr{
   height: 34px !important;
}

div.insertprice_grid div.k-grid-content table tr input:focus-visible{
   outline: unset !important;
}

div.insertprice_grid div.k-grid-content table tr input{
   text-align: center !important;
   height: 100% !important;
   width: 100% !important;
   border: 0px !important;
   font-size: .9vw !important;
   font-family: sarabun_bolditalic;
}

div.insertprice_grid table tbody tr:nth-of-type(even) td{
   background: #e3ebff !important;
}
div.insertprice_grid table tbody tr:nth-of-type(even) td input{
   background: transparent !important;
}
div.insertprice_grid table tbody tr:nth-of-type(even) td span{
   background: transparent !important;
}
div.insertprice_grid table tbody tr:nth-of-type(even) td div{
   background: transparent !important;
}






@media only screen and (min-width : 820px) and (max-width:912px) {}

@media only screen and (min-width : 281px) and (max-width:435px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;
      width: 92px;
   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }


   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }


   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      flex-direction: column;
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }

   div[name="mainmenu"] span {
      font-size: 12px;
   }

   div[name="mainmenu"] div.k-expander-sub-title {
      font-size: 12px
   }

   div[name="mainmenu"] .k-expander-title svg {
      margin-left: 0px !important;
      margin-right: 0px !important;
   }
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(3) {

      flex: 2;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      /* height: unset !important; */
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:portrait) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 1.5;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1 !important;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 2;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 3;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div#price div.combo {
      height: 25px;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div.price:first-child {
      width: 89px;
   }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)and (orientation:portrait) {
   div.price> :first-child {
      display: block;
   }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)and (orientation:portrait) {
   div.price> :first-child {
      display: block !important;
   }
}



@media only screen and (min-width : 820px) and (max-width:912px) {}





@media only screen and (min-width : 200px) and (orientation:portrait) {}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (orientation:portrait) {}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) and (orientation:portrait) {}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation:portrait) {}

/* Medium Devices, Desktops */
@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:portrait) {}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) and (orientation:portrait) {}


/* jjjjjj/jjj */

@media only screen and (min-width : 281px) and (max-width:435px) and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

}


@media only screen and (min-width : 760px) and (max-width:1240px)and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      /* flex-direction: column; */
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#price div.bottom div.left span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right {
      width: 100% !important;
   }

   div#price div.bottom div.right span {
      font-size: 12px !important;
   }

   div#price div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#price div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#price div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#price div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#price) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#price button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

   div#price span.title1 {
      font-size: 12px !important;
   }

   div#price span.title2 {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div.topsection {
      width: 100% !important;
      flex-direction: column;
   }
}


@media only screen and (min-width : 539px) and (max-width :759px)and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div#waste {
      width: 23px;
   }

   div.message svg {
      font-size: 20px !important;
   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.insertproduct_header {
      width: 100px !important;
   }

   div.header div.infobar div.message {
      width: 46;
   }

   div.header div.infobar div.message:nth-child(3) {
      width: auto;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;
      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: .5;

   }

   div.price #header div#infobar div.message:nth-child(3) {

      flex: 1.2;

   }

   div.price .k-grid-header span.k-column-title {
      font-size: 12px !important;
   }

   div#price div.bottom div.left div {
      flex-direction: column;
   }

   div#price div.bottom {
      flex-direction: column;
   }

   div#price div.bottom div.left {
      width: 100% !important;
      flex-direction: column;
   }

   div#price div.bottom div.left div:nth-child(1) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(2) {
      width: 100% !important;
   }

   div#price div.bottom div.left div:nth-child(3) {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.right span {
      font-size: 12px !important;
   }

   div#insertproduct div.bottom div.right> :first-child {
      width: 100% !important;
   }

   div#insertproduct div.bottom div.left div.category {
      padding-left: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category div.combo {
      margin-right: 0px !important;
   }

   div#insertproduct div.bottom div.left div.category>:first-child {
      padding-left: 0px !important;
   }

   div.insertproductdropdown li {
      font-size: 12px !important;
   }

   div:has(div#insertproduct) {
      height: unset !important;
   }

   div.colorpalet div.k-colorgradient {
      width: 152px !important;
   }

   div#insertproduct button.register {
      font-size: 12px !important;
   }

   div#header {
      margin-bottom: 7px;
   }

   div.price {
      justify-content: center;
      width: 100% !important;
   }

   div.category:focus-visible {
      outline: unset !important
   }

   div#price div.combo {
      height: 25px !important;
   }

}

@media only screen and (min-width : 280px) and (max-width:299px)and (orientation:landscape) {
   div.price> :first-child {
      display: none !important;

   }

   div.price div.k-grid-content.k-virtual-content td input {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td {
      width: 106px !important;
   }

   div.price div.k-grid-content td {
      width: 30px !important;
   }

   div.price div.k-grid-content.k-virtual-content td span {
      font-size: 14px;
   }

   div.price div.k-grid-content.k-virtual-content td svg {
      font-size: 21px;
   }

   th.header {
      width: 100px !important;
   }

   th.header span.k-column-title {
      font-size: 12px;
   }

   div.price #header> :nth-child(2) {
      /* flex-direction: column-reverse; */
      align-items: center;
      justify-content: center;

   }

   div.price #header div#searchbar {
      flex: 3;
      width: 82%;

   }

   div.price #header div#infobar {

      width: 90%;

   }

   div.price #header div#infobar div.message:nth-child(1) {

      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }

   div.price #header div#infobar div.message:nth-child(2) {

      flex: 1;

   }


}

@media only screen and (min-width : 1280px) and (orientation:landscape) {
   div.price {
      justify-content: center;
      width: 100% !important;
   }

}



:root {
   --paypal-primary-color: #ff8306;
   --paypal-primary-color-darker: #e07000;
   --paypal-primary-color-lighter: #fff0e1;
   --paypal-primary-color-dashed: #ffc58a; 
   --paypal-card-bg: #ffffff;
   --paypal-page-bg: #f4f6f8; 
   --paypal-text-dark: #343a40;
   --paypal-text-light: #6c757d;
   --paypal-text-accent: var(--paypal-primary-color);
   --paypal-border-color: #dee2e6;
   --paypal-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   --paypal-border-radius: 12px; 
   --paypal-gold-ish: #ffc107; 
 }
 
 .paypal-page-container {
   display: flex;
   height: 100vh;
   overflow: hidden;
 }
 
 .app-sidebar {
   background-color: var(--paypal-card-bg);
   border-right: 1px solid var(--paypal-border-color);
   height: 100vh;
   overflow: hidden; 
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
 }
 .app-sidebar .app-menu-inner {
   flex-grow: 1;
   overflow-y: auto; 
   padding-bottom: 20px;
 }
 
 .app-main-content {
   background-color: var(--paypal-page-bg);
   flex-grow: 1;
   height: 100vh;
   overflow-y: auto; 
   display: flex;
   flex-direction: column;
 }
 
 .app-header {
   background-color: var(--paypal-card-bg);
   padding: 0.75rem 1.5rem;
   position: sticky;
   top: 0;
   z-index: 1020;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 .app-menu-toggler { color: var(--paypal-text-dark); }
 
 .app-page-content-scrollable {
   padding: 20px;
   flex-grow: 1;
 }
 @media (max-width: 767.98px) { .app-page-content-scrollable { padding: 15px; } }
 
 .page-back-button-container { margin-bottom: 1.5rem; }
 .page-back-icon {
   color: #333;
   height: 38px; width: 38px; cursor: pointer; transition: opacity 0.2s ease;
 }
 .page-back-icon:hover { opacity: 0.75; }
 
 .paypal-content-card, .paypal-grid-container-card {
   background: var(--paypal-card-bg);
   padding: 20px;
   box-shadow: var(--paypal-card-shadow);
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 .paypal-content-card { height: 100%; border-radius: 10px;} 
 .paypal-grid-container-card { padding: 0; overflow: hidden; } 
 .paypal-grid-container-card .walletgrid .k-grid-header .k-header { 
     background-color: var(--paypal-primary-color) !important;
     color: rgb(7, 7, 7) !important;
     border-color: var(--paypal-primary-color-darker) !important;
 }
 .paypal-grid-container-card .walletgrid .k-grid-header .k-header .k-link {
     color: #000 !important;
     text-align: center;
 }
 .paypal-grid-container-card .walletgrid .k-grid-header .k-header .k-link .k-column-title{
     text-align: center;
     width: 100%;
 }
 .paypal-grid-container-card .walletgrid .k-pager-wrap {
     border-radius: 0 !important;
     border-top: 1px solid var(--paypal-border-color) !important;
 }
 
 
 .paypal-card-title-text {
   font-size: 1.1rem; font-weight: 600; color: var(--paypal-text-dark); margin-bottom: 0.75rem;
 }
 .paypal-card-subtitle-text {
   font-size: 0.875rem; color: var(--paypal-text-light); margin-bottom: 1rem; line-height: 1.4;
 }
 .paypal-card-action-area { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
 
 .paypal-add-new-card-button {
   border: 2px dashed var(--paypal-primary-color-dashed) !important; 
   color: var(--paypal-primary-color) !important;
   background-color: var(--paypal-primary-color-lighter) !important;
   border-radius: 8px; padding: 20px; display: flex; flex-direction: column;
   align-items: center; justify-content: center; text-align: center;
   min-height: 150px; cursor: pointer; transition: all 0.2s ease-in-out; font-weight: 500;
 }
 .paypal-add-new-card-button:hover {
   background-color: #fff0e1 !important; border-color: var(--paypal-primary-color) !important;
   box-shadow: 0 2px 8px rgba(255, 131, 6, 0.2);
 }
 
 .paypal-displayed-card-info {
   background-color: #f8f9fa; border: 1px solid var(--paypal-border-color);
   border-radius: 8px; padding: 15px; position: relative; display: flex;
   flex-direction: column; gap: 12px;
 }
 .paypal-delete-icon {
   position: absolute; right: 10px; top: 10px; font-size: 1.3rem; color: #e74c3c; cursor: pointer;
 }
 .paypal-delete-icon:hover { color: #c0392b; }
 .paypal-detail-label { font-size: 0.75rem; color: var(--paypal-text-light); text-transform: uppercase; display: block; margin-bottom: 2px; }
 .paypal-detail-value { font-size: 0.95rem; color: var(--paypal-text-dark); font-weight: 500; }
 .paypal-card-inline-details { display: flex; justify-content: space-between; align-items: flex-start; }
 .card-type-detail { text-align: right; }
 .paypal-detail-value-icon { display: flex; align-items: center; justify-content: flex-end; }
 .vendor-icon { font-size: 1.8em; margin-right: 6px; }
 .vendor-icon.visa { color: #1a1f71; } .vendor-icon.mastercard { color: #eb001b; }
 
 .paypal-balance-display { text-align: center; margin: auto 0; padding: 1rem 0; }
 .paypal-balance-value-large { font-size: 2.75rem; color: var(--paypal-primary-color); font-weight: 700; line-height: 1; }
 .paypal-add-balance-button { 
   background: var(--paypal-primary-color); color: #fff; border-radius: 8px;
   padding: 12px 15px; display: flex; align-items: center; justify-content: center;
   text-align: center; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease;
   width: 100%; margin-top: 1rem;
 }
 .paypal-add-balance-button:hover { background-color: var(--paypal-primary-color-darker); }
 
 .btn-custom-action { 
   background-color: var(--paypal-primary-color); border-color: var(--paypal-primary-color);
   color: #fff; padding: 10px 20px; font-size: 1rem; border-radius: 8px;
   text-align: center; cursor: pointer; border: 1px solid var(--paypal-primary-color);
   font-weight: 500; transition: background-color 0.2s ease, border-color 0.2s ease;
   display: inline-flex; align-items: center; justify-content: center;
 }
 .btn-custom-action:hover {
   background-color: var(--paypal-primary-color-darker); border-color: var(--paypal-primary-color-darker);
 }
 .btn-custom-action .me-2 { margin-right: 0.5rem !important; }
 
 
 .paypal-searchbar-card {
   padding: 10px 10px !important;
    background: #fff !important;
    box-shadow: none !important;
    margin-top: 1.5rem !important;
    border-radius: 50px;
    border: 1px solid #dedede;
 }
 .search-input-container {
   display: flex; align-items: center; background-color: #ffffff !important;
   border-radius: 50px !important; padding: 8px 15px !important;
   box-shadow: 0 2px 8px rgba(0,0,0,0.07); border: 1px solid var(--paypal-border-color);
   flex-grow: 1; 
 }
 .paypal-search-icon-style { color: #adb5bd !important; font-size: 1.25rem !important; margin-right: 10px !important; }
 .paypal-search-input-style {
   border: none !important; outline: none !important; box-shadow: none !important;
   flex-grow: 1; font-size: 0.95rem; padding: 0 !important;
   background-color: transparent !important; width: 100% !important;
 }
 .paypal-search-input-style::placeholder { color: #adb5bd; font-style: italic; }
 
 .pricing-card {
   background-color: var(--paypal-card-bg);
   border: 1px solid var(--paypal-border-color);
   border-radius: var(--paypal-border-radius);
   padding: 25px;
   display: flex;
   flex-direction: column;
   height: 100%;
   transition: all 0.3s ease;
   cursor: pointer;
   position: relative; 
   width: 80%;
 }
 .pricing-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0,0,0,0.1);
 }
 .pricing-card.selected {
   border-width: 2px;
   box-shadow: 0 8px 25px rgba(0,0,0,0.12);

 }
 .pricing-card .pricing-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--paypal-border-color);
 }
 .pricing-card .pricing-title {
   font-size: 1.3rem;
   font-weight: 600;
   color: var(--paypal-text-dark);
   margin-bottom: 0;
 }
 .pricing-card .selected-icon {
   font-size: 1.5rem;
 }
 .pricing-card .pricing-price {
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: var(--paypal-text-dark);
 }
 .pricing-card .pricing-price .text-muted {
   font-size: 0.9rem;
   font-weight: 400;
 }
 .pricing-card .pricing-features {
   list-style: none;
   padding-left: 0;
   margin-bottom: 1.5rem;
   flex-grow: 1;
 }
 .pricing-card .pricing-features li {
   margin-bottom: 0.75rem;
   color: var(--paypal-text-light);
   font-size: 0.95rem;
   display: flex;
   align-items: center;
 }
 .pricing-card .pricing-features li::before { 
   content: '✓';
   color: var(--paypal-primary-color);
   margin-right: 10px;
   font-weight: bold;
 }
 .pricing-card .btn-select-plan { 
   border: 2px solid #333;
   background-color: transparent;
   color: var(--paypal-primary-color);
   padding: 10px 15px;
   border-radius: 8px;
   font-weight: 600;
   width: 100%;
   transition: all 0.2s ease;
   font-size: 0.95rem;
 }
 .pricing-card .btn-select-plan:hover:not(:disabled) {
   background-color:#333;
   color: #fff;
 }
 .pricing-card .btn-select-plan:disabled {
   background-color: #333;
   color: #fff;
   opacity: 1; 
   cursor: default;
 }
 
 .pricing-card.free-selected {
   border-color: var(--paypal-primary-color); 
 }
 .pricing-card.free-selected .selected-icon {
   color: var(--paypal-primary-color);
 }
 .pricing-card.free-idle {
    border-color: var(--paypal-border-color); 
 }
 
 
 .pricing-card.pro-plan {
   border-color: var(--paypal-gold-ish); 
 }
 .pricing-card.pro-plan .pricing-title {
   color: var(--paypal-primary-color);
 }
 .pricing-card.pro-plan .pricing-price {
   color: var(--paypal-primary-color);
 }
 .pricing-card.pro-plan .btn-select-plan.pro { 
   background-color: #333;
   color: #fff;
   border-color:#333;
 }
 .pricing-card.pro-plan .btn-select-plan.pro:hover:not(:disabled) {
   background-color: #333;
   border-color: #333;
 }
 .pricing-card.pro-selected { 
   border-color: var(--paypal-primary-color);
   box-shadow: 0 10px 30px rgba(255, 131, 6, 0.2);
 }
 .pricing-card.pro-selected .selected-icon.pro {
   color: var(--paypal-primary-color);
 }
 .pricing-card.pro-selected .btn-select-plan.pro:disabled { 
   background-color: #333 !important; 
   color: #fff !important;
   border-color: #333 !important;
 }
 .pro-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background-color:#333;
   color: #fff;
   padding: 5px 12px;
   font-size: 0.8rem;
   font-weight: 600;
   border-radius: 20px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.15);
   display: flex;
   align-items: center;
 }
 
 
 .attractive-modal-backdrop {
   position: fixed; top: 0; left: 0; width: 100%; height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   display: flex; justify-content: center; align-items: center;
   z-index: 1050;
   opacity: 0; visibility: hidden;
   transition: opacity 0.25s ease-in-out;
 }
 .attractive-modal-backdrop.show { opacity: 1; visibility: visible; }
 .attractive-modal-content-wrapper {
   background-color: transparent; border-radius: 8px;
   width: 90%; max-width: 450px;
   transform: scale(0.95) translateY(-20px); opacity: 0;
   transition: transform 0.30s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.30s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 .attractive-modal-backdrop.show .attractive-modal-content-wrapper { transform: scale(1) translateY(0); opacity: 1; }
 
 .og-getinmoney-container {
   border-radius: 8px !important; overflow: hidden !important; border: none !important;
   width: 100% !important; background: #fff !important; box-shadow: 0 5px 20px rgba(0,0,0,0.1);
 }
 .og-modal-header {
   background-color: #f8f9fa !important; color: var(--paypal-text-dark) !important;
   padding: 1rem 1.5rem !important; border-bottom: 1px solid var(--paypal-border-color);
   display: flex !important; justify-content: space-between !important; align-items: center !important;
   border-top-left-radius: 8px; border-top-right-radius: 8px;
 }
 .og-modal-title { margin-bottom: 0; font-size: 1.1rem; font-weight: 500; color: var(--paypal-text-dark) !important; }
 .og-modal-close-icon {
   font-size: 1.2rem !important; color: var(--paypal-text-light) !important; cursor: pointer;
   background: none; border: none; padding: 0;
 }
 .og-modal-close-icon:hover { color: var(--paypal-text-dark) !important; }
 .og-modal-body { padding: 1.5rem !important; display: flex !important; flex-direction: column !important; gap: 1rem !important; }
 .og-modal-label { padding-bottom: 0.5rem; font-size: 0.9rem; color: var(--paypal-text-light); font-weight: 500; }
 .og-modal-input.form-control {
   border-radius: 6px !important; border: 1px solid #ced4da !important;
   padding: 0.65rem 1rem !important; font-size: 1rem !important;
 }
 .og-modal-footer {
   padding: 1rem 1.5rem !important; display: flex !important; justify-content: flex-end !important;
   border-top: 1px solid var(--paypal-border-color); background-color: #f8f9fa;
   border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
 }
 .og-modal-footer .btn-custom-action {
   background-color: var(--paypal-primary-color) !important;
   border-color: var(--paypal-primary-color) !important;
   color: #fff !important; padding: 0.5rem 1.25rem !important; font-size: 0.9rem !important;
   border-radius: 6px !important; font-weight: 500 !important; min-width: 100px !important;
 }
 .og-modal-footer .btn-custom-action:hover {
   background-color: var(--paypal-primary-color-darker) !important;
   border-color: var(--paypal-primary-color-darker) !important;
 }

.og-commission-notice {
  border-radius: 10px !important;
  border-width: 1px !important;
  padding: 14px 16px !important;
  line-height: 1.5;
}

.og-commission-notice-text {
  display: block;
  font-size: 0.93rem;
  font-weight: 500;
  color: #8a6400 !important;
}

/* Dark theme - /paypal */
[data-theme="dark"] .paypal-page-container {
  background: #0f1117 !important;
}

[data-theme="dark"] .paypal-page-container .app-sidebar {
  background: #1a1d27 !important;
  border-right-color: #2a2d3a !important;
}

[data-theme="dark"] .paypal-page-container .app-main-content,
[data-theme="dark"] .paypal-page-container .app-page-content-scrollable {
  background: #0f1117 !important;
}

[data-theme="dark"] .paypal-page-container #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .paypal-page-container .page-back-icon {
  color: #c4c8d4 !important;
}

[data-theme="dark"] .paypal-page-container .paypal-content-card,
[data-theme="dark"] .paypal-page-container .paypal-grid-container-card {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .paypal-page-container .paypal-card-title-text,
[data-theme="dark"] .paypal-page-container .paypal-detail-value,
[data-theme="dark"] .paypal-page-container .paypal-detail-value-icon,
[data-theme="dark"] .paypal-page-container .paypal-balance-value-large {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .paypal-card-subtitle-text,
[data-theme="dark"] .paypal-page-container .paypal-detail-label,
[data-theme="dark"] .paypal-page-container .text-muted {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .paypal-page-container .paypal-displayed-card-info {
  background: #202433 !important;
  border-color: #343a4f !important;
}

[data-theme="dark"] .paypal-page-container .paypal-searchbar-card {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .paypal-page-container .paypal-search-input-style {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .paypal-search-input-style::placeholder {
  color: #8b8fa8 !important;
}

[data-theme="dark"] .paypal-page-container .paypal-search-icon-style {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .paypal-page-container .walletgrid.k-grid,
[data-theme="dark"] .paypal-page-container .walletgrid .k-grid-content,
[data-theme="dark"] .paypal-page-container .walletgrid .k-table,
[data-theme="dark"] .paypal-page-container .walletgrid .k-grid-table {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .walletgrid .k-table-tbody .k-table-row:nth-child(odd) .k-table-td,
[data-theme="dark"] .paypal-page-container .walletgrid .k-table-tbody .k-table-row:nth-child(odd) td {
  background: #202433 !important;
  color: #e8eaf0 !important;
  border-color: #343a4f !important;
}

[data-theme="dark"] .paypal-page-container .walletgrid .k-table-tbody .k-table-row:nth-child(even) .k-table-td,
[data-theme="dark"] .paypal-page-container .walletgrid .k-table-tbody .k-table-row:nth-child(even) td {
  background: #1c2030 !important;
  color: #e8eaf0 !important;
  border-color: #343a4f !important;
}

[data-theme="dark"] .paypal-page-container .walletgrid .k-pager-wrap,
[data-theme="dark"] .paypal-page-container .walletgrid .k-pager {
  background: #161926 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

/* Modal windows: Stripe / PayPal / Bank transfer */
[data-theme="dark"] .paypal-page-container .attractive-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.78) !important;
}

[data-theme="dark"] .paypal-page-container .og-getinmoney-container {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-header,
[data-theme="dark"] .paypal-page-container .og-modal-footer {
  background-color: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-title {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-close-icon {
  color: #c4c8d4 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-close-icon:hover {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body {
  background: #1a1d27 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-label {
  color: #c4c8d4 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-input.form-control,
[data-theme="dark"] .paypal-page-container .og-modal-body .form-control {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .form-control::placeholder {
  color: #8b8fa8 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .btn-outline-secondary {
  background: #1a1d27 !important;
  border-color: #3d4154 !important;
  color: #c4c8d4 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .btn-outline-secondary:hover {
  background: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .og-commission-notice,
[data-theme="dark"] .paypal-page-container .og-modal-body .bg-warning,
[data-theme="dark"] .paypal-page-container .og-modal-body .bg-warning.bg-opacity-10 {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .og-commission-notice-text,
[data-theme="dark"] .paypal-page-container .og-modal-body .text-warning-emphasis {
  color: #ffd382 !important;
}

/* Bank transfer info cards inside modal */
[data-theme="dark"] .paypal-page-container .og-modal-body .bg-primary,
[data-theme="dark"] .paypal-page-container .og-modal-body .bg-primary.bg-opacity-10 {
  background: rgba(59, 130, 246, 0.16) !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .border-primary,
[data-theme="dark"] .paypal-page-container .og-modal-body .border-primary.border-opacity-25 {
  border-color: rgba(96, 165, 250, 0.45) !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .bg-info,
[data-theme="dark"] .paypal-page-container .og-modal-body .bg-info.bg-opacity-10 {
  background: rgba(8, 145, 178, 0.16) !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .border-info,
[data-theme="dark"] .paypal-page-container .og-modal-body .border-info.border-opacity-25 {
  border-color: rgba(34, 211, 238, 0.45) !important;
}

[data-theme="dark"] .paypal-page-container .og-modal-body .text-primary,
[data-theme="dark"] .paypal-page-container .og-modal-body .text-info-emphasis,
[data-theme="dark"] .paypal-page-container .og-modal-body .small,
[data-theme="dark"] .paypal-page-container .og-modal-body strong {
  color: #dbe1f3 !important;
}
 
 .k-pager.k-pager-md.k-grid-pager{
   border-radius: 0 !important;
 }

 /* Payment Loader Styles */
 .payment-loader-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1060;
   backdrop-filter: blur(2px);
 }
 .payment-loader-content {
   background-color: #fff;
   padding: 2rem;
   border-radius: 12px;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   min-width: 250px;
 }
 .payment-loader-content p {
   color: var(--paypal-text-dark);
   font-weight: 500;
   font-size: 1rem;
 }

[data-theme="dark"] .paypal-page-container .payment-loader-content {
  background-color: #1a1d27 !important;
  border: 1px solid #2a2d3a;
}

[data-theme="dark"] .paypal-page-container .payment-loader-content p {
  color: #e8eaf0 !important;
}

 @media (max-width: 991.98px) {
   .paypelhead-cards-balance-row { flex-direction: column; }
   .paypelhead-cards-balance-row > .col-12 { 
     width: 100% !important; margin-bottom: 1.5rem;
   }
   .paypelhead-cards-balance-row > .col-12:last-child { margin-bottom: 0; }
 }
 
 @media (max-width: 767.98px) {
   .app-sidebar { display: none !important; }
   .app-header .app-menu-toggler { display: inline-block !important; }
   .app-page-content-scrollable { padding: 15px; }
 
   .paypal-content-card, .pricing-card,
   .og-modal-header, .og-modal-body, .og-modal-footer { padding: 15px !important; }
   .paypal-card-title-text, .pricing-title { font-size: 1.05rem; }
   .paypal-balance-value-large { font-size: 2.25rem; }
  
   .serachpaypal {
      flex-direction: column; gap: 1rem;
   }
   .filterpaypal, .searchinputpaypal { width: 100% !important; margin-right: 0 !important; }
   .pricing-card .btn-select-plan { font-size: 0.9rem; padding: 8px 12px; }
 }
/* ============================================================
   Wallet (/paypal) — modern layout refresh, dark-theme ready
   Works alongside paypal.css
   ============================================================ */

.wallet-page {
  --wp-bg: var(--dash-bg, #f1f3f8);
  --wp-panel: var(--dash-card, #ffffff);
  --wp-border: var(--dash-border, #e8eaf0);
  --wp-text: var(--dash-text-primary, #111827);
  --wp-text-muted: var(--dash-text-secondary, #6b7280);
  --wp-accent: var(--nav-primary, #ff8306);
  --wp-accent-hover: var(--nav-primary-hover, #e07000);
  --wp-accent-soft: var(--dash-accent-light, rgba(255, 131, 6, 0.12));
  --wp-input-bg: #ffffff;
  --wp-input-border: #d1d5db;
  --wp-input-text: #111827;
  --wp-shadow: var(--dash-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  --wp-radius: 12px;
  --wp-radius-sm: 8px;
  min-height: 100vh;
  background: var(--wp-bg);
  color: var(--wp-text);
}

[data-theme="dark"] .wallet-page {
  --wp-bg: #0f1117;
  --wp-panel: #1a1d27;
  --wp-border: #2a2d3a;
  --wp-text: #f0f1f5;
  --wp-text-muted: #8b8fa8;
  --wp-accent-soft: rgba(255, 131, 6, 0.14);
  --wp-input-bg: #222632;
  --wp-input-border: #3a3f52;
  --wp-input-text: #f0f1f5;
  --wp-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.wallet-page.paypal-page-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.wallet-page .wallet-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wallet-page .wallet-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
}

.wallet-page .wallet-inner {
  max-width: 1200px;
  margin: 0 auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wallet-page .wallet-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--wp-panel);
  border: 1px solid var(--wp-border);
  border-radius: var(--wp-radius);
  box-shadow: var(--wp-shadow);
}

.wallet-page .wallet-page-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.wallet-page .wallet-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--wp-border);
  border-radius: 10px;
  background: var(--wp-input-bg);
  color: var(--wp-accent);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.wallet-page .wallet-back-btn:hover {
  border-color: var(--wp-accent);
  background: var(--wp-accent-soft);
}

.wallet-page .wallet-page-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp-text);
}

.wallet-page .wallet-page-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--wp-text-muted);
}

.wallet-page .wallet-balance-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px 16px;
  border-radius: var(--wp-radius-sm);
  background: var(--wp-accent-soft);
  border: 1px solid rgba(255, 131, 6, 0.35);
}

.wallet-page .wallet-balance-pill-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--wp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wallet-page .wallet-balance-pill-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--wp-accent);
  line-height: 1.1;
}

/* Stat cards row */
.wallet-page .wallet-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .wallet-page .wallet-stat-grid {
    grid-template-columns: 1fr;
  }
}

.wallet-page .paypal-content-card {
  background: var(--wp-panel) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: var(--wp-radius) !important;
  box-shadow: var(--wp-shadow) !important;
  padding: 22px !important;
  height: 100%;
}

.wallet-page .paypal-card-title-text {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--wp-text) !important;
  margin-bottom: 6px !important;
}

.wallet-page .paypal-card-subtitle-text {
  color: var(--wp-text-muted) !important;
  font-size: 0.875rem !important;
}

.wallet-page .paypal-balance-value-large {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--wp-accent) !important;
}

.wallet-page .paypal-add-new-card-button {
  border: 2px dashed rgba(255, 131, 6, 0.45) !important;
  background: var(--wp-accent-soft) !important;
  border-radius: var(--wp-radius-sm) !important;
  min-height: 140px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.wallet-page .paypal-add-new-card-button:hover {
  border-color: var(--wp-accent) !important;
  transform: translateY(-2px);
}

.wallet-page .paypal-displayed-card-info {
  background: var(--wp-input-bg) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: var(--wp-radius-sm) !important;
}

.wallet-page .btn-custom-action {
  border-radius: var(--wp-radius-sm) !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  transition: background 0.15s, transform 0.1s !important;
}

.wallet-page .btn-custom-action:hover {
  transform: translateY(-1px);
}

/* Search */
.wallet-page .wallet-search-row {
  margin-bottom: 20px;
}

.wallet-page .paypal-searchbar-card {
  background: var(--wp-panel) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: 999px !important;
  padding: 4px 16px !important;
  box-shadow: var(--wp-shadow) !important;
  margin-top: 0 !important;
}

.wallet-page .paypal-search-input-style {
  color: var(--wp-input-text) !important;
  font-size: 0.9375rem !important;
}

.wallet-page .paypal-search-input-style::placeholder {
  color: var(--wp-text-muted) !important;
  font-style: normal !important;
}

.wallet-page .paypal-search-icon-style {
  color: var(--wp-text-muted) !important;
}

/* Transactions grid card */
.wallet-page .paypal-grid-container-card {
  background: var(--wp-panel) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: var(--wp-radius) !important;
  box-shadow: var(--wp-shadow) !important;
  overflow: hidden;
}

.wallet-page .wallet-section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--wp-text);
  margin: 0 0 12px;
  padding: 0 4px;
}

/* Grid dark overrides */
[data-theme="dark"] .wallet-page .walletgrid .k-grid-header th.k-header {
  background: #c96a00 !important;
  color: #fff !important;
}

[data-theme="dark"] .wallet-page .walletgrid .k-grid-header .k-link,
[data-theme="dark"] .wallet-page .walletgrid .k-grid-header .k-column-title {
  color: #fff !important;
}

[data-theme="dark"] .wallet-page .walletgrid .k-grid-content td,
[data-theme="dark"] .wallet-page .walletgrid .k-table-td {
  background: #1a1d27 !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .wallet-page .walletgrid tr.k-alt td,
[data-theme="dark"] .wallet-page .walletgrid .k-table-alt-row td {
  background: #151820 !important;
}

[data-theme="dark"] .wallet-page .walletgrid .k-pager,
[data-theme="dark"] .wallet-page .walletgrid .k-pager-wrap {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .wallet-page .walletgrid .k-pager .k-button {
  background: #222632 !important;
  color: #e8eaf0 !important;
  border-color: #3a3f52 !important;
}

[data-theme="dark"] .wallet-page .walletgrid .k-pager .k-button.k-selected {
  background: var(--wp-accent) !important;
  color: #fff !important;
}

/* Modals — tokens on overlay (outside .wallet-page inner) */
[data-theme="dark"] .wallet-page .attractive-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

[data-theme="dark"] .wallet-page .og-getinmoney-container {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
}

[data-theme="dark"] .wallet-page .og-modal-header,
[data-theme="dark"] .wallet-page .og-modal-footer {
  background: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .wallet-page .og-modal-body {
  background: #1a1d27 !important;
}

[data-theme="dark"] .wallet-page .og-modal-title {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .wallet-page .og-modal-input,
[data-theme="dark"] .wallet-page .og-modal-body .form-control {
  background: #222632 !important;
  border-color: #3a3f52 !important;
  color: #f0f1f5 !important;
}

[data-theme="dark"] .wallet-page .app-main-content {
  background: var(--wp-bg) !important;
}

[data-theme="dark"] .wallet-page #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

/* === Styles for ShowAllCategory Page (showcategoryorderdetails.css) === */

.sacp-page {
    display: flex; 
    min-height: 100vh;
}

.sacp-page .menures {
    flex: 0 0 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    background-color: #fff; 
    border-right: 1px solid #e0e0e0; 
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}
.sacp-page .menures .Logo { padding: 20px 15px; border-bottom: 1px solid #f0f0f0; }
.sacp-page .menures > div[name="mainmenu"] {
    flex-grow: 1;
    overflow-y: auto;
    /* padding: 10px 0; */
}


.sacp-main-area { 
    background-color: #f4f7f9; 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sacp-main-area > #header { 
    position: sticky; 
    top: 0;
    z-index: 100; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}


.sacp-content-background {
    background-color: #f4f7f9 !important; 
    padding: 20px !important;
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}

.sacp-main-card {
    background: white !important;
    border-radius: 10px !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}
.sacp-main-card-content-wrapper { 
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.sacp-back-button-container {
    padding: 5px 0 !important;
    margin-bottom: 15px;
}
.sacp-back-button-container .tooltipbuttons svg { color: #007bff; transition: color 0.2s ease, transform 0.2s ease; }
.sacp-back-button-container .tooltipbuttons svg:hover { color: #0056b3; transform: scale(1.08); }

.sacp-filter-sort-area {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #e9edf0 !important;
    padding-bottom: 15px !important;
    margin-bottom: 20px !important;
}

.sacp-filter-sort-area .k-filter {
    border: none !important;
    padding: 0 !important;
    flex-grow: 1;
    min-width: 220px; 
    margin-right: 15px;
}
.sacp-filter-sort-area .k-filter-toolbar .k-filter-item {
    border: 1px solid #d1d5db; 
    border-radius: 25px; 
    background-color: #fff;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-filter-sort-area .k-input-inner { 
    background-color: #eeeeee !important;
    border: none !important;
    padding: 9px 16px !important; 
    transition: box-shadow 0.2s ease;
    font-size: 0.9rem;
    color: #333;
}
.sacp-filter-sort-area .k-input-inner::placeholder { color: #999; }
.sacp-filter-sort-area .k-input-inner:focus {
    box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, 0.2) !important; 
    
}
.sacp-filter-sort-area .k-toolbar-item{
    background-color: #fff;
}
.sacp-sort-label {
    margin-left: 0 !important;
    margin-right: 8px;
    color: #555e68;
    font-size: 0.9rem;
    font-weight: 500 !important;
    white-space: nowrap;
}

.sacp-filter-sort-area div:has(> .sacp-sorting-button) { 
    display: flex;
    align-items: center;
}
.sacp-sorting-button {
    background-color: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 25px; 
    padding: 7px 11px; 
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.sacp-sorting-button:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.sacp-sorting-button.selected {
    background-color: #007bff;
    border-color: #0062cc;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,123,255,0.3);
}
.sacp-sorting-button svg {
    font-size: 1rem;
}

.sacp-list-view {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
}
.k-listview-content{
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
}
.sacp-list-view ul.k-listview-content.k-list {
    display: flex !important; 
    flex-wrap: wrap !important; 
    justify-content: flex-start;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 -7.5px !important; 
    height: 100%; 
}
.sacp-list-view li.k-listview-item {
    padding: 0 7.5px 15px 7.5px !important; 
    border: none !important;
    background: none !important;
    display: flex !important; 
    align-items: stretch !important; 
}

.sacp-category-card {
    
    min-height: 220px; 
}
.sacp-card-inner-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
}
.sacp-card-inner-content {
    border: 1px solid #e5e7eb;
    border-radius: 8px; 
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); 
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0; 
}
.sacp-category-card img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
    background-color: #f0f2f5 !important;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}

.sacp-card-text-wrapper {
    padding: 10px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sacp-card-title-text {
    font-size: 0.8rem !important; 
    color: #374151 !important; 
    font-weight: 500 !important;
    line-height: 1.3;
    margin-bottom: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.1em; 
}

.sacp-pager.k-listview-pager {
    margin-top: auto; 
    padding: 12px 0;
    background-color: #fff; 
    border-radius: 0 0 10px 10px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.04);
    border-top: 1px solid #e9edf0;
    width: calc(100% + 48px); 
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px; 
    position: relative; 
}
.sacp-pager .k-button {
    border-radius: 6px; margin: 0 3px; border: 1px solid #d1d5db;
    background-color: #fff; color: #4b5563; padding: 5px 9px; font-size: 0.8rem;
}
.sacp-pager .k-button:hover { background-color: #f3f4f6; border-color: #9ca3af;}
.sacp-pager .k-button.k-selected { background-color: #007bff; color: white; border-color: #007bff; font-weight: 500;}
.sacp-pager .k-pager-info { color: #4b5563; font-size: 0.85rem; margin: 0 10px;}


@media (min-width: 1200px) { 
    .sacp-list-view li.k-listview-item { flex-basis: calc(16.666% - (15px * 5 / 6)); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sacp-list-view li.k-listview-item { flex-basis: calc(20% - (15px * 4 / 5)); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .sacp-list-view li.k-listview-item { flex-basis: calc(25% - (15px * 3 / 4)); }
    .sacp-category-card { min-height: 200px; }
    .sacp-category-card img { height: 100px !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) { 
    .sacp-content-background { padding: 15px !important; }
    .sacp-main-card { /* padding: 1rem !important; */ }
    .sacp-filter-sort-area { flex-direction: column; align-items: stretch; }
    .sacp-filter-sort-area .k-filter { margin-right: 0; margin-bottom: 15px; }
    .sacp-filter-sort-area .sacp-sort-label { text-align: left; margin-bottom: 8px; }
    .sacp-filter-sort-area .sacp-sorting-button { margin-bottom: 8px; width: auto; }

    .sacp-list-view li.k-listview-item { flex-basis: calc(33.333% - (15px * 2 / 3)); }
    .sacp-category-card { min-height: 190px; }
    .sacp-category-card img { height: 90px !important; }
    .sacp-card-title-text { font-size: 0.75rem !important; }
}
@media (max-width: 575.98px) { 
    .sacp-content-background { padding: 10px !important; }
    .sacp-main-card { /* padding: 0.75rem !important; */ }

    .sacp-filter-sort-area > span.sacp-sort-label + div { display: flex; justify-content: flex-start; gap: 6px;}
    .sacp-filter-sort-area .sacp-sorting-button { width: auto; margin-left:0; margin-right: 6px; }


    .sacp-list-view li.k-listview-item { flex-basis: calc(50% - (15px * 1 / 2)); }
    .sacp-category-card { min-height: 180px; }
    .sacp-category-card img { height: 80px !important; }
    .sacp-pager.k-listview-pager {
        flex-direction: column; gap: 10px;
        width: calc(100% + YOUR_P4_PADDING_X_2_XS_SCREENS) !important;
        margin-left: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-right: -YOUR_P4_PADDING_XS_SCREENS !important;
        margin-bottom: -YOUR_P4_PADDING_XS_SCREENS !important;
    }
}

.showcategoryorder   .k-toolbar{
width: 100% !important;
}
.showcategoryorder    .k-filter .k-filter-toolbar{
width: 100% !important;
}
.showcategoryorder   .k-filter .k-filter-toolbar .k-toolbar-item{
    width: 100%;
}
.showcategoryorder   .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox{
    width: 100%;
}
.showcategoryorder   .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox .k-input-inner{
    width: 100%;
}
.showcategoryorder   .k-toolbar-button{
    display: none;
}
.showcategoryorder   .k-filter-container{
    margin-block-end: 0 !important;
}

.showproductorder > div:last-child > div:nth-child(2) {
    max-width: 1400px; 
    width: 100%; 
    box-sizing: border-box; 
    background-color: #ffffff; 
}
.showproductorder  .k-toolbar{
width: 100% !important;
}
.showproductorder  .k-filter .k-filter-toolbar{
width: 100% !important;
}
.showproductorder  .k-filter .k-filter-toolbar .k-toolbar-item{
    width: 100%;
}
.showproductorder  .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox{
    width: 100%;
}
.showproductorder  .k-filter .k-filter-toolbar .k-toolbar-item .k-textbox .k-input-inner{
    width: 100%;
}
.showproductorder  .k-toolbar-button{
    display: none;
}
.showproductorder  .k-filter-container{
    margin-block-end: 0 !important;
}

.divcardorderslist {
    background-color: #ffffff; 
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07); 
    margin: 10px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    box-sizing: border-box;
    padding: 15px; 
    margin: 0;
}
.divcardorderslist .spancardshowallcat{
    padding: 5px 10px !important;
    text-align: left !important;
    justify-content: start !important;
}
.divcardorderslist:hover {
    transform: translateY(-5px); 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); 
}

.col-12.divlistprocat {
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-start; 
    gap: 20px; 
}

.divlistprocat > div:last-child { 
    flex: 1; 
    display: flex;
    flex-direction: column;
}

.k-listview-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    gap: 20px; 
    padding: 0; 
    width: 100%;
}

.divcardorderslist {
    width: calc(33.33% - 20px); 
}
.divlistprocat .k-slider-horizontal{
    width: 100% !important;
}
.listprocat .k-pager {
    width: 100% !important;
}




input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 12px 15px;
    /* margin-bottom: 15px; */
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    outline: none; 
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #f8f8f8; 
    color: #333; 
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: #ff8306; 
    box-shadow: 0 0 8px rgba(255, 131, 6, 0.3);
}

input::placeholder,
textarea::placeholder {
    color: #a0a0a0; 
}

.col-12.d-flex[style*="border"] { 
    /* border: 1px solid #ccc;
    height: 50px;
    border-radius: 30px;  */
    background: #f7f7f7;
    margin-bottom: 5px; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); 
}

.col-12.d-flex[style*="border"] span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 5%;
    min-width: 40px; 
    color: #555; 
}

.col-12.d-flex[style*="border"] svg { 
    font-size: 1.5rem !important; 
    color: #333; 
}
.accordion {
    border: 1px solid #eee; 
    border-radius: 8px;
    margin-bottom: 15px; 
    overflow: hidden; 
}

.accordion-header {
    background-color: #f7f7f7; 
    color: #333;
    cursor: pointer;
    padding: 15px 20px; 
    width: 100%;
    border: none;
    text-align: right; 
    outline: none;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem; 
    font-weight: bold; 
}

.accordion-header:hover {
    background-color: #e9e9e9; 
}

.accordion-header .arrow {
    transition: transform 0.3s ease;
    fill: #555; 
    width: 18px; 
    height: 18px;
}

.accordion-body.active + .accordion-header .arrow { 
     transform: rotate(180deg);
}
.accordion-header .arrow.rotated {
    transform: rotate(180deg);
}


.accordion-body {
    padding: 0 20px;
    background-color: white;
    overflow: hidden;
    max-height: 0; 
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; 
}

.accordion-body.active {
    max-height: 500px; 
    padding: 15px;
    overflow: auto;
    scrollbar-width: thin;
}

.accordion-body input[type="checkbox"],
.accordion-body input[type="radio"] {
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc; 
    border-radius: 4px; 
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
    transition: all 0.2s ease;
}

.accordion-body input[type="checkbox"]:checked {
    background-color: #ff8306; 
    border-color: #ff8306;
}
.accordion-body input[type="checkbox"]:checked::before {
    content: '\2713'; 
    display: block;
    color: white;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
}

.accordion-body input[type="radio"] {
    border-radius: 50%; 
}

.accordion-body input[type="radio"]:checked {
    background-color: #ff8306; 
    border-color: #ff8306;
}

.accordion-body input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.accordion-body span {
    margin-right: 10px;
    font-size: 0.95rem;
    color: #444;
}

.accordion-body.color > div span[style*="background"] { 
    border: 2px solid #ccc; 
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accordion-body.color > div span[style*="background"]:hover {
    border-color: #ff8306; 
    box-shadow: 0 0 5px rgba(255, 131, 6, 0.4);
}

#check[id^="check"] { 
    color: white;
    font-size: 20px; 
    position: relative;
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    pointer-events: none; 
}

.accordion-body.color input[type="checkbox"] { 
    display: block;
    width: 100%;
    height: 100%;
}

.hearticon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.8rem; 
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 10; 
}

.hearticon svg { 
    color: #888; 
}

.hearticon svg[color="red"] { 
    color: red;
    transform: scale(1.1); 
}

.hearticon svg:hover {
    transform: scale(1.2); 
}

.tooltipbuttons svg {
    color: #ff8306; 
    transition: transform 0.2s ease, color 0.2s ease;
}

.tooltipbuttons svg:hover {
    transform: scale(1.1);
    color: #e67500; 
}
.titleimglistpro,
.titleimglistpro1,
.titleimglistpro2,
.titleimglistpro3 {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 5; 
}

.titleimglistpro { background-color: #007bff;  }
.titleimglistpro1 { background-color: #ff8306; }
.titleimglistpro2 { background-color: #28a745; }
.titleimglistpro3 { background-color: #6f42c1; }

.divcardorderslist img {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: contain;
    background: #f7f7f7;
    border-radius: 8px; 
}
.showproductorder > div:last-child > div:last-child > .col-12.divlistprocat:last-of-type { 
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-top: 30px; 
}

.showproductorder > div:last-child > div:last-child > span[style*="font-size: 1.5rem"] { 
    color: #ff8306; 
    text-align: center;
    width: 100%;
    margin-bottom: 20px !important; 
    padding-bottom: 10px;
    border-bottom: 2px solid #eee; 
}

.accordion-body p {
    color: #555 !important; 
    line-height: 1.6;
}
.k-slider-wrap {
    margin: 20px 0;
    width: 100%;
}

.k-slider-track {
    background-color: #e0e0e0;
    height: 6px;
    border-radius: 3px;
}

.k-slider-selection {
    background-color: #ff8306;
}

.k-slider-handle {
    background-color: #ff8306; 
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.k-slider-labels li {
    color: #666;
    font-size: 0.85rem;
}
@media (max-width: 1200px) {
    .showproductorder > div:last-child > div:nth-child(2) {
        padding: 15px; 
    }

    .divcardorderslist {
        width: calc(33.333%) !important; 
    }

    .col-12.divlistprocat {
        justify-content: center; 
    }
}


@media (max-width: 992px) {
    .showproductorder .menures {
        border-right: none !important;
        border-bottom: 1px solid #ccc;
    }

    .showproductorder > div:last-child {
        width: 100% !important; 
        padding: 15px 0;
    }

    .divlistprocat {
        flex-direction: column; 
        align-items: center;
    }

    .divlistprocat > div { 
        width: 95% !important; 
        margin-bottom: 20px; 
    }

    .divcardorderslist {
        width: calc(50% - 20px); 
    }
}

@media (max-width: 768px) {
    .showproductorder > div:last-child > div:nth-child(2) {
        padding: 10px;
    }
    
    .divcardorderslist {
        width: calc(100% - 20px) !important;
    }

    .accordion-header {
        font-size: 1rem;
        padding: 12px 15px;
    }

    .accordion-body {
        padding: 10px 15px;
    }

    .hearticon {
        font-size: 1.5rem;
    }

    .tooltipbuttons svg {
        height: 30px !important;
        width: 30px !important;
    }

    .col-12.d-flex[style*="border"] {
        height: 45px;
    }

    .inputsearchmypro {
        font-size: 1rem; 
    }
}

@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .showproductorder > div:last-child > div:nth-child(2) {
        padding: 5px;
    }
    .divcardorderslist {
        padding: 10px;
        /* margin-left: 5px;
        margin-right: 5px; */
    }
    .accordion-header {
        font-size: 0.9rem;
    }
    .accordion-body p {
        font-size: 0.85rem;
    }
}

.accordion-header{
    background: #ff9c38;
}

:root {
  --usrreq-primary-color: #ff8306;
  --usrreq-input-bg: #ffffff;
  --usrreq-input-border: #ced4da;
  --usrreq-card-bg: #ffffff;
  --usrreq-text-color: #212529;
  --usrreq-light-bg: #f8f9fa;
  --usrreq-icon-color: var(--usrreq-primary-color);
  --usrreq-icon-hover-opacity: 0.7;
  --usrreq-danger-color: #dc3545;
  --usrreq-success-color: #198754;
}

.usrreq-page-container {
  /* background-color: #f0f0fa; */ /* Optional: if the page bg needs to be this color */
}

.usrreq-content-area {
  padding: 20px;
  background-color: #f0f0fa; /* Background outside the card */
}

.usrreq-card {
  background-color: var(--usrreq-card-bg);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid #dee2e6;
}

.usrreq-card-section {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  background-color: #fdfdfd; 
}
.usrreq-card-section:last-child {
  margin-bottom: 0;
}


.usrreq-input,
.k-input-inner { /* For Kendo inputs */
  background-color: var(--usrreq-light-bg) !important;
  border: 1px solid var(--usrreq-input-border) !important;
  border-radius: 5px !important;
  padding: 10px 14px !important; /* Increased padding */
  color: var(--usrreq-text-color) !important;
  height: auto !important;
  font-size: 1rem;
}

.usrreq-input:focus,
.k-input-inner:focus {
  border-color: var(--usrreq-primary-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 131, 6, 0.25) !important;
}

.usrreq-font-upload-trigger {
  color: #ffffff !important;
  background-color: var(--usrreq-primary-color) !important;
  cursor: pointer !important;
  padding: 10px 15px !important;
  border-radius: 5px !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; /* Ensure good font */
  /* font-weight: 500; */
  display: inline-flex !important; /* Changed from flex to inline-flex */
  align-items: center !important;
  border: none !important;
  height: auto !important; /* auto height */
  transition: background-color 0.2s ease;
  font-size: 16px;
}
.usrreq-font-upload-trigger:hover {
  background-color: #e07305 !important; /* Darker shade */
}



.usrreq-icon-upload,
.usrreq-icon-delete {
  color: var(--usrreq-icon-color) !important;
  transition: opacity 0.2s ease;
}
.usrreq-icon-back{
    color: #333 !important;
}
.usrreq-icon-back:hover,
.usrreq-icon-upload:hover,
.usrreq-icon-delete:hover {
  opacity: var(--usrreq-icon-hover-opacity);
}

.usrreq-icon-upload {
  color: var(--usrreq-success-color) !important;
}
.usrreq-icon-delete {
    color: var(--usrreq-danger-color) !important;
}

.usrreq-filter-header {
  margin-bottom: 20px; /* Increased margin */
  padding-bottom: 12px;
  border-bottom: 3px solid var(--usrreq-primary-color); /* Thicker border */
}

.usrreq-section-title {
  font-size: 1.5rem; /* Larger title */
  font-weight: 600; /* Bolder */
  color: var(--usrreq-primary-color);
}

.usrreq-button-clear-filters {
  display: inline-flex; /* Changed to inline-flex */
  align-items: center;
  justify-content: center;
  background-color: var(--usrreq-primary-color);
  color: white;
  border-radius: 5px;
  padding: 8px 15px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.usrreq-button-clear-filters:hover {
  background-color: #e07305;
}
.usrreq-grid .k-grid-header {
  background-color: var(--usrreq-light-bg);
  border-bottom: 2px solid #ddd; /* More prominent header border */
}
.usrreq-grid .k-grid-header .k-header {
  border-color: #e0e0e0;
  color: var(--usrreq-text-color);
  font-weight: bold;
  padding: 0 10px !important; /* More padding in header */
}
.usrreq-grid td {
  border-color: #f0f0f0 !important;
  padding: 12px 10px !important;
  vertical-align: middle;
}
.usrreq-grid tr:nth-child(even) td {
  background-color: #fcfcfc; 
}
.usrreq-grid .k-grid-content {
    overflow-y: auto; /* Ensure scrollability for content if needed */
}

@media (max-width: 992px) { /* Adjusted breakpoint */
  .usrreq-content-area {
    padding: 15px;
  }
  .usrreq-card {
    padding: 20px;
  }
  .usrreq-card-section {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .usrreq-card {
    padding: 15px;
  }
  .insertfaqcard, .filterlist { /* Assuming insertfaqcard is a general container class */
    flex-direction: column;
  }
  .insertfaqcard > div, .filterlist > div {
    width: 100% !important;
    margin-bottom: 15px;
  }
   .usrreq-section-title {
    font-size: 1.3rem;
  }
  .usrreq-button-clear-filters {
    font-size: 0.9rem;
    padding: 7px 12px;
  }
  .usrreq-grid .k-grid-table {
      font-size: 0.9rem; 
  }
  .usrreq-grid th, .usrreq-grid td {
      padding: 8px 6px !important;
  }
  .usrreq-font-upload-trigger {
      width: 100%;
      justify-content: center;
      margin-bottom: 10px;
  }
  .registerbrand .d-flex.align-items-start { /* For upload icon on mobile */
      justify-content: center;
      width: 100%;
  }
}

.fontsfilter{
  display: flex;
}

.page-content-container {
   padding: 20px;
   background-color: #eef0f6;
   min-height: calc(100vh - 80px); 
   position: relative; 
}

.back-button-wrapper {
   z-index: 10; 
   padding: 0 !important; 
}
.back-button-wrapper .tooltipbuttons svg {
   font-size: 36px; 
   color: #007bff;
   background-color: white; 
   border-radius: 50%; 
   padding: 5px; 
   box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.back-button-wrapper .tooltipbuttons svg:hover {
   color: #0056b3;
   background-color: #f8f9fa;
}


.main-white-card {
   background-color: white;
   border-radius: 12px;
   padding: 25px; 
   padding-top: 35px; 
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
   margin-top: 30px; 
}

.card-section {
   margin-bottom: 25px;
   border-radius: 8px;
}
.card-section:last-child {
   margin-bottom: 0;
}

.brand-registration-section {
   background-color: white !important; 
   border: 1px solid #dee2e6 !important; 
   box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; 
   padding: 25px !important;
   border-radius: 10px !important;
}
.brand-registration-section .registerbrand .brandname {
   font-size: 1rem; 
   color: #333;
   font-weight: 600; 
   margin-right: 10px;
}
.brand-registration-section .insertfaqcard {
   align-items: flex-end;
   justify-content: space-between;
}
.brand-registration-section .d-flex.my-3.px-2 { 
   margin-top: 0 !important; 
   margin-bottom: 0 !important; 
   align-self: flex-end; 
   padding-bottom: 4px; 
}
.brand-registration-section .tooltipbuttons svg { 
   font-size: 32px !important; 
   color: rgb(61 138 45) !important;
}
.brand-registration-section .tooltipbuttons svg:hover {
   color: rgb(40 100 30) !important;
}


.filter-title-section {
   display: flex;
   justify-content: space-between; 
   align-items: center;
   padding-bottom: 15px;
   margin-bottom: 20px !important;
   border-bottom: 1px solid #eee;
}
.filter-title-section > span:first-child {
   order: 2; 
   font-size: 1.3rem;
   font-weight: 600;
   color: #0056b3;
   border-bottom: none !important;
}
.filter-title-section > span[onClick] { 
   order: 1; 
   background-color: #6c757d !important; 
   color: white !important;
   padding: 8px 15px !important;
   border-radius: 6px !important;
   font-size: 0.9rem !important;
   font-weight: 500 !important;
   cursor: pointer !important;
   transition: background-color 0.2s ease;
   display: inline-flex !important;
   align-items: center !important;
}
.filter-title-section > span[onClick]:hover {
   background-color: #5a6268 !important;
}
.filter-title-section > span[onClick] > svg {
   margin-right: 0 !important;
   margin-left: 8px;
   font-size: 1.1em;
}

.filter-inputs-section {
   display: flex;
   flex-wrap: wrap; 
}
.full-width-search-field-container {
   width: 100% !important;
   flex-grow: 1; 
   padding: 0 !important;
}
.filter-inputs-section > div:not(.full-width-search-field-container) {
   flex-basis: 0;
   flex-grow: 0;
   padding: 0 !important;
   margin: 0 !important;
   width: 0 !important;
}
.brand  input.k-input-inner { 
   background-color: #fff !important; 
   border: 1px solid #ced4da !important;
   border-radius: 20px !important; 
   padding: 8px 20px !important; 
   font-size: 1rem !important; 
   height: 40px !important; 
   box-shadow: 0 2px 4px rgba(0,0,0,0.05) inset;
}
.brand  input.k-input-inner::placeholder {
   color: #888; 
}
.brand input.k-input-inner:focus {
   border-color: #007bff !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25), 0 2px 4px rgba(0,0,0,0.05) inset !important;
}


input.registerinputs_brand,
textarea { 
   background-color: #fdfdff !important;
   border: 1px solid #bcc2c7 !important;
   border-radius: 6px !important;
   padding: 10px 12px !important;
   font-size: 0.95rem !important;
   color: #333 !important;
   width: 100% !important;
   box-sizing: border-box !important;
   min-height: 40px; 
}
input.registerinputs_brand:focus,
textarea:focus {
   border-color: #007bff !important;
   outline: none !important;
   box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}


.kendo-grid-section { 
   padding: 0 !important; 
}
.k-grid {
   border-radius: 10px !important;
   overflow: hidden;
   border: 1px solid #dee2e6 !important;
   box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.k-grid-header {
   background-color: #f1f3f5 !important;
}
.k-grid-header .k-header {
   color: #212529 !important;
   font-weight: 600 !important;
   border-color: #dee2e6 !important;
   text-align: center; 
}
.k-grid td {
   border-color: #e9ecef !important;
   padding: 0.75rem 0.6rem !important; 
   vertical-align: middle; 
}
.k-grid td input[type="text"], 
.k-grid td .k-textbox { 
   width: 100% !important;
   text-align: center !important; 
   padding: 8px 10px !important;
   border-radius: 4px !important;
   border: 1px solid #b0bec5 !important;
   background-color: #fff !important;
   font-size: 0.9rem;
   box-sizing: border-box;
}
.k-grid td input[type="text"]:focus,
.k-grid td .k-textbox:focus {
   border-color: #007bff !important;
   box-shadow: 0 0 3px rgba(0,123,255,0.3) !important;
   background-color: #fff !important;
}
.k-grid .k-grid-content {
   overflow-y: auto; 
}
.k-grid-norecords td div{
   padding: 25px;
   text-align: center;
   color: #777;
}
.k-grid-norecords .k-loading-indicator {
   width: 45px !important;
   height: 45px !important;
}

.k-grid td .tooltipbuttons svg {
   font-size: 22px; 
   margin: 0 6px;
   color: #546e7a;
}
.k-grid td .tooltipbuttons svg:hover {
   color: #007bff !important;
}

@media (max-width: 992px) {
   .page-content-container { padding: 15px; }
   .main-white-card { padding: 20px; margin-top: 45px; } 
   .back-button-wrapper { top: 15px; right: 15px; }
   .back-button-wrapper .tooltipbuttons svg { font-size: 32px; }

   .brand-registration-section .insertfaqcard {
       flex-direction: column;
       align-items: stretch !important;
   }
   .brand-registration-section .insertfaqcard .registerbrand {
       width: 100% !important;
       margin-bottom: 15px;
   }
   .brand-registration-section .insertfaqcard > div:last-child {
       justify-content: flex-start !important;
       padding-bottom: 0;
   }
}

@media (max-width: 768px) {
   .page-content-container { padding: 10px; }
   .main-white-card { padding: 15px; margin-top: 50px; }
   .back-button-wrapper { top: 10px; right: 10px; }
   .back-button-wrapper .tooltipbuttons svg { font-size: 30px; padding: 4px; }

   .filter-title-section > span:first-child { font-size: 1.15rem; }
   .filter-title-section > span[onClick] { font-size: 0.85rem !important; padding: 7px 12px !important; }

   input.registerinputs_brand, input.k-input-inner, textarea {
       font-size: 0.9rem !important; padding: 8px 15px !important; min-height: 38px;
   }
   input.k-input-inner { border-radius: 19px !important; }

   .k-grid-header .k-header, .k-grid td { font-size: 0.85rem; }
   .k-grid td input[type="text"], .k-grid td .k-textbox { font-size: 0.85rem; padding: 6px 8px !important; }
   .k-pager-info, .k-pager-numbers .k-link, .k-pager-input input { font-size: 0.8rem !important; }
}

@media (max-width: 576px) {
   .main-white-card { padding-top: 20px; } 
   .filter-title-section {
       flex-direction: column;
       align-items: stretch !important; 
   }
   .filter-title-section > span:first-child { 
       margin-bottom: 10px;
       text-align: center; 
       order:1 !important; 
   }
   .filter-title-section > span[onClick] { 
       width: 100%;
       justify-content: center !important;
       order:2 !important; 

   }
   .brand-registration-section { padding: 15px !important; }
   .brand-registration-section .insertfaqcard { padding: 0; }
}

.card-section input{
   border: none;
    text-align: center;
    height: 42px !important;
}


.ups-scope-card,
.ups-scope-shipment-card,
.ups-scope-grid-card 
 {
  background-color: #ffffff;
  border-radius: 12px; 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); 
  padding: 5px 10px;
  margin-bottom: 5px;
  border: 1px solid #e0e0e0;
}
.ups-scope-left-panel input,.ups-scope-right-panel input{
  padding: 5px !important;
}
.ups-scope-left-panel hr,.ups-scope-right-panel h1{
  margin: 0!important;
}

.ups-scope-header-section h3 {
  color: #333;
  font-size: 1.4em;
  /* margin-bottom: 20px; */
  border-bottom: 2px solid #ff8306; 
  padding-bottom: 1px;
}

.ups-scope-shipment-items h4 {
  color: #333;
  font-size: 1.3em;
  margin-bottom: 1px;
  border-bottom: 1px solid #eee;
  padding-bottom: 2px;
}


/* Input Fields & Dropdowns */
.ups-scope-input-field .k-input-inner, /* Kendo NumericTextBox */
.ups-scope-input-field .k-dropdown-wrap .k-input-inner, /* Kendo DropDownList */
.ups-scope-datepicker .rs-picker-toggle-textbox, /* RSuite DatePicker */
.ups-scope-input-field input /* General input if any */
{
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-radius: 6px !important; 
  padding: 8px 12px !important;
  color: #495057 !important;
}

.ups-scope-input-field .k-input-inner:focus,
.ups-scope-input-field .k-dropdown-wrap.k-focus .k-input-inner, /* Kendo focus */
.ups-scope-datepicker .rs-picker-toggle-textbox:focus,
.ups-scope-datepicker.rs-picker-default.rs-picker-focused .rs-picker-toggle.rs-btn /* RSuite focus */
{
  border-color: #ff8306 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 131, 6, 0.25) !important;
}

/* Styling for Kendo DropdownList popup items */
.ups-scope-packageups .k-list-item,
.k-list .ups-scope-even_s,
.k-list .ups-scope-odd_s {
    padding: 8px 12px;
}
.ups-scope-even_s {
    background-color: #f9f9f9;
}
.ups-scope-odd_s {
    background-color: #ffffff;
}
.k-list-item.k-focus {
    background-color: rgba(255, 131, 6, 0.1) !important;
    box-shadow: none !important;
}


/* Labels for form groups */
.ups-scope-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
  font-size: 0.95em;
}

.ups-scope-form-group {
  margin-bottom: 2px;
}

.ups-scope-weight-input,
.ups-scope-size-input {
  display: flex;
  gap: 15px; 
}

.ups-scope-weight-input > span, /* Kendo NumericTextBox wrapper */
.ups-scope-size-input > span {
  flex: 1;
}

/* Buttons */
.ups-scope-btn-create-label,
.ups-scope-save-config-button {
  background-color: #ff8306; 
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease;
  font-size: 0.9em;
}

.ups-scope-btn-create-label:hover,
.ups-scope-save-config-button:hover {
  background-color: #e07305; 
  transform: translateY(-1px);
}
.ups-scope-btn-create-label:active,
.ups-scope-save-config-button:active {
    transform: translateY(0px);
}


.ups-scope-action-icon {
  height: 40px !important; 
  width: 40px !important; 
  cursor: pointer;
  color: #333; 
  transition: transform 0.2s ease;
}
.ups-scope-action-icon:hover {
  transform: scale(1.1);
}

.ups-scope-question-icon {
  width: 80% ;
  height: 80%;
  color: #adb5bd; 
}

.ups-scope-refresh-icon {
    color: #28a745 !important; 
}
.ups-scope-refresh-icon:hover {
    color: #218838 !important;
}


/* Shipment Details Section */
.ups-scope-details-section {
  display: flex;

  gap: 20px;
}
.ups-scope-details-section .ups-scope-row {
  flex: 1;
  min-width: 250px; 
  padding: 10px;
}
.ups-scope-details-section .ups-scope-row label {
  font-weight: bold;
  color: #333;
  margin-bottom: 1px;
  display: block;
}
.ups-scope-details-section p {
  margin-bottom: 6px;
  font-size: 0.9em;
  color: #555;
}
.ups-scope-cost-summary p span,
.ups-scope-deliver-summary {
  font-weight: 500;
  color: #333;
}
.ups-scope-cost-summary p {
    display: flex;
    justify-content: space-between;
}

/* Grid specific styling */
.ups-scope-gridcss .k-grid-header {
  background-color: #f8f9fa;
}
.ups-scope-gridcss .k-grid-header .k-header {
  color: #333;
  font-weight: 600;
  border-color: #dee2e6;
  padding-bottom: 0 !important;
}
.ups-scope-gridcss .k-grid-content td {
    padding: 0px 5px !important;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 1rem;
}
.ups-scope-gridcss .k-alt { 
    background-color: #fdfdfe;
}


/* Cost Review */
.ups-scope-cost-review {
    flex: 1.5 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
}
.ups-scope-cost-review-icon {
    font-size: 1.8em !important;
    font-weight: bold;
    color: #ff8306; 
    line-height: 1;
}
.ups-scope-cost-review span:last-child {
    font-size: 0.75em !important;
    color: #6c757d;
}


/* Responsive Design */
@media (max-width: 1200px) {
  .ups-scope-shipment-container {
    flex-direction: column;
  }
  .ups-scope-left-panel, .ups-scope-right-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .ups-scope-page-content-wrapper {
    padding: 10px 15px 20px !important;
  }
  .ups-scope-card, .ups-scope-shipment-card, .ups-scope-grid-card {
    padding: 10px;
    margin-bottom: 15px;
  }
  .ups-scope-header-section h3 {
    font-size: 1.2em;
  }
  .ups-scope-shipment-items h4 {
    font-size: 1.1em;
  }

  .ups-scope-details-section .ups-scope-row {
     min-width: 100%;
     border-right: none !important; 
     padding-left: 0 !important;
     padding-right: 0 !important;
  }
  .ups-scope-details-section .ups-scope-row:not(:last-child) {
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px;
    margin-bottom: 15px;
  }

  .ups-scope-weight-input,
  .ups-scope-size-input {
    flex-direction: column;
    gap: 10px;
  }
  .ups-scope-label-section div[style*="display: flex"] {
      flex-direction: column;
      gap: 15px;
      align-items: stretch !important;
  }
  .ups-scope-label-section .ups-scope-btn-create-label {
      width: 100%;
      text-align: center;
  }
   .ups-scope-cost-review {
       margin: 10px 0;
   }
   .ups-scope-action-icon, .ups-scope-question-icon, .ups-scope-refresh-icon {
       align-self: center;
   }
}

@media (max-width: 480px) {
  .ups-scope-menures {
    display: none !important; 
  }
  .ups-scope-header-section h3 {
    font-size: 1.1em;
  }
   .ups-scope-btn-create-label,
   .ups-scope-save-config-button {
    padding: 10px 15px;
    font-size: 0.85em;
  }
  .ups-scope-form-group label,
  .ups-scope-details-section p,
  .ups-scope-cost-review span:last-child,
  .ups-scope-form-group span[style*="font-size: .8vw"] { 
      font-size: 0.85em !important; 
  }
  span[style*="font-size: .75vw"], 
  span[style*="font-size: .6vw"] 
  {
      font-size: 0.8em !important;
  }

}

.ups-scope-ups {
    /* ... existing styles from ups.css for .ups ... */
}
.ups-scope-menures {
    /* ... existing styles from ups.css for .menures ... */
}
/* ... and so on for all other classes from your original ups.css ... */

/* Style for the line separator in DropDownList */
.ups-scope-service-separator {
  height: 1px;
  background-color: #ddc9c9;
  width: 100%;
  border: 1px double #ccc;
  pointer-events: none;
}
/* Listing -> mockup design suggestion */
.eld-suggestion {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.eld-suggestion--inline {
  margin: 0;
  height: 100%;
  flex-direction: column;
}

.eld-suggestion--inline .eld-suggestion__media {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 180px;
  flex: 0 0 auto;
}

.eld-suggestion__media {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eld-suggestion__media--dual {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  gap: 8px;
  overflow: visible;
  background: transparent;
  border: none;
  align-items: flex-start;
}

.eld-suggestion__preview {
  width: 88px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eld-suggestion__preview .eld-suggestion__image {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.eld-suggestion__preview-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-align: center;
  line-height: 1.2;
}

.efc-etsy-listing-thumb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dbeafe;
}

.efc-etsy-listing-thumb {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.efc-etsy-listing-thumb-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.efc-description-scroll {
  max-height: 110px;
  overflow-y: auto;
  padding-right: 8px;
  line-height: 1.45;
}

.efc-variation-nest {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  margin-top: 4px;
  padding: 12px;
  background: #f0f8ff;
  border-radius: 6px;
  border: 1px solid #e1f5fe;
}

.efc-variation-nest .efc-etsy-listing-thumb-wrap {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 0 0 auto;
}

.efc-variation-nest__body {
  flex: 1;
  min-width: 0;
}

.efc-variation-side {
  align-self: stretch;
}

.efc-variation-side .eld-suggestion--inline {
  margin: 0;
  height: 100%;
}

.eld-suggestion--inline .eld-suggestion__body {
  flex: 1;
}

.eld-suggestion__media--preview {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  border: none;
  background: transparent;
  overflow: visible;
}

@media (max-width: 992px) {
  .efc-variation-nest {
    flex-direction: column;
  }

  .efc-variation-side {
    flex: 1 1 100% !important;
    max-width: 100%;
  }
}

[data-theme="dark"] .efc-etsy-listing-thumb {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .efc-etsy-listing-thumb-wrap {
  border-bottom-color: #334155;
}

[data-theme="dark"] .efc-etsy-listing-thumb-label,
[data-theme="dark"] .eld-suggestion__preview-label {
  color: #94a3b8;
}

.eld-suggestion__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eld-suggestion__placeholder {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  padding: 8px;
}

.eld-suggestion__body {
  flex: 1;
  min-width: 0;
}

.eld-suggestion__title {
  font-size: 13px;
  font-weight: 700;
  color: #1d4ed8;
  margin-bottom: 6px;
}

.eld-suggestion__text {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
}

.eld-suggestion__meta {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 10px;
}

.eld-suggestion__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eld-suggestion__btn {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.eld-suggestion__btn--primary {
  background: #2563eb;
  color: #fff;
}

.eld-suggestion__btn--ghost {
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.eld-suggestion-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: #1d4ed8;
  background: #dbeafe;
}

.eld-suggestion-badge:hover {
  background: #bfdbfe;
}

[data-theme="dark"] .eld-suggestion {
  border-color: rgba(96, 165, 250, 0.35);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.16) 0%, rgba(15, 17, 23, 0.9) 100%);
}

[data-theme="dark"] .eld-suggestion__title {
  color: #93c5fd;
}

[data-theme="dark"] .eld-suggestion__text {
  color: #cbd5e1;
}

[data-theme="dark"] .eld-suggestion__media {
  background: #1e2230;
  border-color: #343848;
}

[data-theme="dark"] .eld-suggestion__btn--ghost {
  background: #2a2d3a;
  color: #e8eaf0;
  border-color: #343848;
}

[data-theme="dark"] .eld-suggestion-badge {
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.22);
}


.etsy-order-sync-page .ef-main-column,
.etsy-custom-design-page .ef-main-column {
  background: #f0f0fa;
}

.etsy-order-sync-page .ef-top-header,
.etsy-custom-design-page .ef-top-header,
.etsy-order-sync-page #header.ef-top-header,
.etsy-custom-design-page #header.ef-top-header {
  background: #ffffff;
}

.etsy-custom-design-page .ef-content-strip {
  background-color: rgb(240, 240, 250);
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column,
[data-theme="dark"] .etsy-custom-design-page .ef-main-column {
  background-color: #0f1117 !important;
  color: #c8cad8;
}

[data-theme="dark"] .etsy-order-sync-page .ef-top-header,
[data-theme="dark"] .etsy-custom-design-page .ef-top-header,
[data-theme="dark"] .etsy-order-sync-page #header,
[data-theme="dark"] .etsy-custom-design-page #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .etsy-custom-design-page .ef-content-strip {
  background-color: #13151f !important;
  color: #c8cad8;
}

/* Form kontrolleri */
[data-theme="dark"] .etsy-order-sync-page .ef-main-column textarea,
[data-theme="dark"] .etsy-order-sync-page .ef-main-column select,
[data-theme="dark"] .etsy-order-sync-page .ef-main-column input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme="dark"] .etsy-custom-design-page .ef-main-column textarea,
[data-theme="dark"] .etsy-custom-design-page .ef-main-column select,
[data-theme="dark"] .etsy-custom-design-page .ef-main-column input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip textarea,
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip select,
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column textarea::placeholder,
[data-theme="dark"] .etsy-custom-design-page .ef-main-column textarea::placeholder,
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip textarea::placeholder {
  color: #6b7280;
}

/* Bootstrap */
[data-theme="dark"] .etsy-order-sync-page .btn-secondary,
[data-theme="dark"] .etsy-custom-design-page .btn-secondary {
  background: #2a2d3a !important;
  border-color: #3d4154 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .btn-primary,
[data-theme="dark"] .etsy-custom-design-page .btn-primary {
  border-color: #2563eb !important;
}

/* Adım çizgileri */
[data-theme="dark"] .etsy-order-sync-page .levelneworder hr {
  border-color: #2a2d3a !important;
  background-color: #2a2d3a !important;
}

/* Inline açık yüzeyler (JSX’te background: white / #fff / rgb(240…) vb.) */
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="background: white"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="background:white"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="background: #fff"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="background:#fff"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="backgroundColor: white"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="backgroundColor:white"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="background-color: white"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="background-color:white"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="background: white"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="background:white"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="background: #fff"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="backgroundColor: white"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="background-color:white"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="background: white"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="background:white"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="background: #fff"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="backgroundColor: white"] {
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="rgb(240 240 250)"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="rgb(240, 240, 250)"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="rgb(240 240 250)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="rgb(240 240 250)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="rgb(240, 240, 250)"] {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="#f8f9fa"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="rgb(248, 249, 250)"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="#f8f9fa"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#f8f9fa"] {
  background-color: #161926 !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="#f0f0f0"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="rgb(240, 240, 240)"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="#f0f0f0"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#f0f0f0"] {
  background-color: #1e2130 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="#e3f2fd"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="#e3f2fd"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#e3f2fd"] {
  background-color: rgba(33, 150, 243, 0.12) !important;
  color: #90caf9 !important;
  border-color: rgba(100, 181, 246, 0.25) !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="#f9f9f9"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#f9f9f9"] {
  background-color: #161926 !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="#f5f5f7"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="#f5f5f7"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#f5f5f7"] {
  background-color: #13151f !important;
}

/* Metin renkleri (sık inline) */
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: rgb(51, 51, 51)"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color:#333"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: #333"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: rgb(102, 102, 102)"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color:#666"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: #666"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: rgb(44, 62, 80)"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color:#2c3e50"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: rgb(73, 80, 87)"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="color:#333"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="color: #333"],
[data-theme="dark"] .etsy-custom-design-page .ef-main-column [style*="rgb(51, 51, 51)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color:#333"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color: #333"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="rgb(51, 51, 51)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color:#666"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color: #666"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="rgb(102, 102, 102)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color:#555"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color: #555"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="rgb(85, 85, 85)"] {
  color: #f8fafc !important;
}

[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: rgb(0, 0, 0)"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color:#000"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="color: #000"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="rgb(204, 204, 204)"],
[data-theme="dark"] .etsy-order-sync-page .ef-main-column [style*="#ccc"] {
  color: #9aa3c2 !important;
}

/* Sabit tam ekran modal katmanları (sayfa kökü altında) */
[data-theme="dark"] .etsy-custom-design-page [style*="inset: 0"][style*="rgba(0,0,0,0.5)"],
[data-theme="dark"] .etsy-custom-design-page [style*="inset: 0"][style*="rgba(0, 0, 0, 0.5)"] {
  background: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color: rgb(44, 62, 80)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#2c3e50"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="color: rgb(73, 80, 87)"],
[data-theme="dark"] .etsy-custom-design-page .ef-content-strip [style*="#495057"] {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-order-sync-page .alert-danger {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #fecaca !important;
}

/* --- /etsycustomdesign: ürün/tasarım modalı, kütüphane, varyasyon & adet kartları --- */
[data-theme="dark"] .etsy-custom-design-page .efc-modal-overlay {
  background-color: rgba(0, 0, 0, 0.72) !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel {
  background-color: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55) !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel h4,
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel h5,
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel strong {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel input[type="text"],
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel input[type="number"],
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel select,
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel textarea {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel [style*="#eee"] {
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel button[style*="#e0e0e0"],
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel button[style*="e0e0e0"] {
  background: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel button[style*="#f2f2f2"] {
  background: #232635 !important;
  color: #8b92a8 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel span[style*="color: '#666'"],
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel span[style*="color: #666"],
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel div[style*="color: '#666'"] {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel div[style*="color: '#333'"],
[data-theme="dark"] .etsy-custom-design-page .efc-modal-panel div[style*="color: #333"] {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-surface-card {
  background: #1a1d27 !important;
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-surface-card h4,
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card h5,
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card h6 {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="#f8f9fa"] {
  background-color: #161926 !important;
  border-color: #2a2d3a !important;
}

/* React DOM’da #f8f9fa çoğu zaman rgb(248, 249, 250) — attribute [style*="#f8f9fa"] kaçırır */
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="248, 249, 250"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-main [style*="248, 249, 250"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="248, 249, 250"] {
  background-color: #161926 !important;
  border-color: #2a2d3a !important;
}

/* Açık gri bilgi satırları (sipariş alanları, SKU, başlık, açıklama, tasarım seçenekleri) */
[data-theme="dark"] .etsy-custom-design-page .efc-muted-row {
  background-color: #161926 !important;
  background: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-muted-row span,
[data-theme="dark"] .etsy-custom-design-page .efc-muted-row h6 {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-muted-row .efc-inline-desc,
[data-theme="dark"] .etsy-custom-design-page .efc-muted-row .efc-inline-desc * {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="color: '#333'"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="color: #333"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="color:#333"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="rgb(51, 51, 51)"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="color: '#666'"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="color: #666"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="color:#666"],
[data-theme="dark"] .etsy-custom-design-page .efc-surface-card [style*="rgb(102, 102, 102)"] {
  color: #f8fafc !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest {
  background-color: rgba(33, 150, 243, 0.12) !important;
  border-color: rgba(100, 181, 246, 0.28) !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest h5 {
  color: #90caf9 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="backgroundColor: 'white'"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="background-color: white"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="backgroundColor:white"] {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color: '#666'"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color: '#333'"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color: #666"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color:#666"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="rgb(102, 102, 102)"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color: #333"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color:#333"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="rgb(51, 51, 51)"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color: #555"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="color:#555"],
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest [style*="rgb(85, 85, 85)"] {
  color: #f8fafc !important;
}

/* React rgb serileştirmesi yüzünden kaçan inline renkler: varyasyon satırındaki tüm metin */
[data-theme="dark"] .etsy-custom-design-page .efc-variation-nest span {
  color: #f8fafc !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card {
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card h6 {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="#f8f9fa"] {
  background-color: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card select[style*="backgroundColor: 'white'"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card select[style*="backgroundColor:white"] {
  background-color: #13151f !important;
  color: #e8eaf0 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="color: '#333'"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="color: #333"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="color: '#555'"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="color: #555"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="color: '#666'"],
[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="color: #666"] {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="#fff3cd"] {
  background: rgba(255, 193, 7, 0.14) !important;
  color: #ffd54f !important;
  border-color: rgba(255, 193, 7, 0.35) !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-piece-card [style*="#d4edda"] {
  background: rgba(40, 167, 69, 0.14) !important;
  color: #81c784 !important;
  border-color: rgba(129, 199, 132, 0.35) !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-product-pick-card {
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-product-pick-card h4,
[data-theme="dark"] .etsy-custom-design-page .efc-product-pick-card [style*="color: '#333'"],
[data-theme="dark"] .etsy-custom-design-page .efc-product-pick-card [style*="color: #333"] {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-design-preview-frame {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-design-preview-inline {
  background-color: #13151f !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-library-tile {
  background: #1a1d27 !important;
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-library-tile [style*="#f5f5f7"] {
  background: #13151f !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-library-tile [style*="color: '#333'"],
[data-theme="dark"] .etsy-custom-design-page .efc-library-tile [style*="color: #333"],
[data-theme="dark"] .etsy-custom-design-page .efc-library-tile [style*="color: '#6b7280'"] {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-variation-main .efc-inline-desc,
[data-theme="dark"] .etsy-custom-design-page .efc-variation-main .efc-inline-desc * {
  color: #b4bad0 !important;
}

[data-theme="dark"] .etsy-custom-design-page .efc-variation-main [style*="#f8f9fa"] {
  background-color: #161926 !important;
  border-color: #2a2d3a !important;
}

/* --- /etsyordersync: kartlar, önizleme (EtsyDesignPreview = custom design ile aynı) --- */
[data-theme="dark"] .etsy-order-sync-page .efc-muted-row {
  background-color: #161926 !important;
  background: #161926 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-order-sync-page .efc-muted-row span,
[data-theme="dark"] .etsy-order-sync-page .efc-muted-row h6 {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel {
  background: #1a1d27 !important;
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel h3,
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel h5 {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel p,
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel label,
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel .form-label {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="color: '#666'"],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="color: #666"],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="color: '#333'"],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="color: #333"],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="color: '#2c3e50'"],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="color: #2c3e50"] {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-footer-row span {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-aside-column {
  background: #13151f !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-preview-slot {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-design-areas-label {
  color: #90caf9 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efc-design-preview-frame {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .etsy-order-sync-page .levelneworder span[style*="rgb(0, 0, 0)"],
[data-theme="dark"] .etsy-order-sync-page .levelneworder span[style*="#000"] {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-sync-page .levelneworder span[style*="rgb(204, 204, 204)"],
[data-theme="dark"] .etsy-order-sync-page .levelneworder span[style*="#ccc"] {
  color: #6b7280 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="borderBottom: \"1px solid #eee\""],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="borderBottom: '1px solid #eee'"] {
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-inner-tile {
  background: #161926 !important;
  border-color: #2a2d3a !important;
  box-shadow: none !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-inner-tile [style*="#111827"],
[data-theme="dark"] .etsy-order-sync-page .efs-inner-tile [style*="#1f2937"],
[data-theme="dark"] .etsy-order-sync-page .efs-inner-tile [style*="#374151"] {
  color: #c8cad8 !important;
}

[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="44, 62, 80"],
[data-theme="dark"] .etsy-order-sync-page .efs-flow-panel [style*="73, 80, 87"] {
  color: #c8cad8 !important;
}

/* neworder.css — .insertProduct #products / #shipping beyaz kart gövdesi; yalnızca Etsy sync’te koyu tema */
[data-theme="dark"] .etsy-order-sync-page.insertProduct #products,
[data-theme="dark"] .etsy-order-sync-page.insertProduct #shipping {
  background-color: #13151f !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .etsy-order-sync-page.insertProduct #submitorder {
  background-color: transparent !important;
  box-shadow: none !important;
}

.etsy-order-consolidation-page .eoc-panel {
  background: #ffffff;
  border: 1px solid #e8eaf0;
}

.etsy-order-consolidation-page .eoc-table-wrap {
  border: 1px solid #eceef2;
  border-radius: 8px;
}

.etsy-order-consolidation-page .eoc-info-card {
  border: 1px solid #eceef2;
  background: #f9fafb;
}

.eoc-item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.eoc-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  z-index: 2147483000;
}

.eoc-modal-content {
  width: min(1200px, 92vw);
  max-height: 90vh;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e8eaf0;
  border-radius: 14px;
}

.eoc-modal-scroll {
  max-height: calc(90vh - 68px);
  overflow-y: auto;
  padding: 16px;
  background: #ffffff;
}

.eoc-close-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #d8dce7;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 24px;
  line-height: 1;
  color: #344054;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.eoc-close-btn:hover {
  background: #eef2f7;
  border-color: #c4ccda;
  color: #111827;
}

.eoc-modal-header {
  padding: 14px 16px;
  border-bottom: 1px solid #eceef2;
  background: #ffffff;
}

.eoc-modal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #111827;
}

.eoc-section {
  border: 1px solid #eceef2;
  border-radius: 10px;
  background: #ffffff;
  padding: 14px;
  margin-bottom: 14px;
}

.eoc-section h5 {
  margin-bottom: 10px;
}

.eoc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
}

.eoc-item-card {
  border: 1px solid #eceef2;
  border-radius: 10px;
  background: #f9fafb;
  padding: 12px;
  margin-bottom: 10px;
}

.eoc-item-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.eoc-subsection {
  margin-top: 10px;
}

.eoc-subsection ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.eoc-empty {
  color: #6b7280;
}

.eoc-pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 12px;
  border: 1px solid #eceef2;
  border-radius: 8px;
  background: #f9fafb;
  padding: 10px;
}

.eoc-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.eoc-status--ok {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.eoc-status--no {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.eoc-preview-layout {
  display: grid;
  grid-template-columns: minmax(320px, 38%) minmax(420px, 62%);
  gap: 16px;
}

.eoc-preview-media-card,
.eoc-preview-details-card {
  border: 1px solid #eceef2;
  border-radius: 12px;
  background: #ffffff;
  padding: 12px;
}

.eoc-preview-main-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #eceef2;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}

.eoc-preview-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.eoc-preview-image-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.eoc-preview-image-counter {
  font-size: 12px;
  color: #6b7280;
}

.eoc-preview-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.eoc-preview-thumb-btn {
  border: 1px solid #eceef2;
  border-radius: 8px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}

.eoc-preview-thumb-btn.active {
  border-color: #2563eb;
}

.eoc-preview-thumb-img {
  width: 100%;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
}

.eoc-preview-description {
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.45;
  border: 1px solid #eceef2;
  border-radius: 8px;
  background: #f9fafb;
  padding: 10px;
  margin-top: 8px;
}

.eoc-transaction-image-wrap {
  width: 100%;
  max-width: 340px;
  border: 1px solid #eceef2;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #f9fafb;
}

.eoc-transaction-image {
  width: 100%;
  height: 220px;
  object-fit: contain;
  display: block;
}

[data-theme="dark"] .eoc-preview-media-card,
[data-theme="dark"] .eoc-preview-details-card,
[data-theme="dark"] .eoc-preview-main-image-wrap,
[data-theme="dark"] .eoc-preview-description,
[data-theme="dark"] .eoc-preview-thumb-btn,
[data-theme="dark"] .eoc-transaction-image-wrap {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .eoc-preview-image-counter {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .eoc-preview-thumb-btn.active {
  border-color: #4d7ee8 !important;
}

[data-theme="dark"] .eoc-status--ok {
  background: rgba(74, 222, 128, 0.16);
  color: #86efac;
}

[data-theme="dark"] .eoc-status--no {
  background: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

[data-theme="dark"] .eoc-preview-description {
  background: #161926 !important;
}

[data-theme="dark"] .eoc-preview-main-image-wrap {
  background: #161926 !important;
}

[data-theme="dark"] .eoc-modal-header {
  background: #161926 !important;
  border-bottom-color: #2a2d3a !important;
}

[data-theme="dark"] .eoc-modal-title {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .eoc-close-btn {
  background: #1f2330 !important;
  border-color: #34394b !important;
  color: #cfd6ea !important;
}

[data-theme="dark"] .eoc-close-btn:hover {
  background: #2a3040 !important;
  border-color: #49526a !important;
  color: #ffffff !important;
}

@media (max-width: 1100px) {
  .eoc-preview-layout {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-panel {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
}

[data-theme="dark"] .eoc-modal-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
}

[data-theme="dark"] .eoc-modal-content,
[data-theme="dark"] .eoc-modal-scroll,
[data-theme="dark"] .eoc-section {
  background: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .eoc-item-card,
[data-theme="dark"] .eoc-pre {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-table-wrap,
[data-theme="dark"] .etsy-order-consolidation-page .eoc-info-card {
  border-color: #2a2d3a !important;
  background: #13151f !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .eoc-empty {
  color: #9aa3c2 !important;
}

/* Snapshot orders table: aligned columns + modern look */
.etsy-order-consolidation-page .eoc-table-scroll {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  -webkit-overflow-scrolling: touch;
}

.etsy-order-consolidation-page .eoc-data-table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.35;
}

.etsy-order-consolidation-page .eoc-data-table thead th {
  text-align: left;
  padding: 13px 12px;
  font-weight: 650;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom: 2px solid #e2e8f0;
  vertical-align: middle;
  white-space: nowrap;
}

.etsy-order-consolidation-page .eoc-data-table tbody td {
  padding: 11px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #eef2f7;
  color: #1e293b;
  word-break: break-word;
}

.etsy-order-consolidation-page .eoc-data-table tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.etsy-order-consolidation-page .eoc-data-table tbody tr:hover td {
  background: #eff6ff !important;
}

.etsy-order-consolidation-page .eoc-data-table .eoc-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.etsy-order-consolidation-page .eoc-data-table .eoc-th-num {
  text-align: right;
}

.etsy-order-consolidation-page .eoc-data-table .eoc-td-center {
  text-align: center;
}

.etsy-order-consolidation-page .eoc-data-table .eoc-th-center {
  text-align: center;
}

.etsy-order-consolidation-page .eoc-data-table .eoc-td-actions {
  text-align: center;
  white-space: nowrap;
  min-width: 168px;
  width: 168px;
  position: sticky;
  right: 0;
  z-index: 2;
  background: #ffffff;
  box-shadow: -6px 0 10px rgba(15, 23, 42, 0.08);
}

.etsy-order-consolidation-page .eoc-data-table .eoc-th-actions {
  text-align: center;
  min-width: 168px;
  width: 168px;
  position: sticky;
  right: 0;
  z-index: 3;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  box-shadow: -6px 0 10px rgba(15, 23, 42, 0.08);
}

.etsy-order-consolidation-page .eoc-data-table .eoc-td-dates,
.etsy-order-consolidation-page .eoc-data-table .eoc-th-dates {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.etsy-order-consolidation-page .eoc-date-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.etsy-order-consolidation-page .eoc-date-line {
  display: block;
}

.etsy-order-consolidation-page .eoc-date-updated {
  font-size: 11px;
  color: #64748b;
}

.etsy-order-consolidation-page .eoc-data-table tbody tr:nth-child(even) td.eoc-td-actions {
  background: #f8fafc;
}

.etsy-order-consolidation-page .eoc-data-table tbody tr:hover td.eoc-td-actions {
  background: #eff6ff !important;
}

.etsy-order-consolidation-page .eoc-receipt-id-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  vertical-align: baseline;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.etsy-order-consolidation-page .eoc-receipt-id-btn:hover {
  background-color: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.etsy-order-consolidation-page .eoc-receipt-id-btn:focus {
  outline: none;
}

.etsy-order-consolidation-page .eoc-receipt-id-btn:focus-visible {
  background-color: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

.etsy-order-consolidation-page .eoc-receipt-id-btn:active {
  background-color: rgba(37, 99, 235, 0.16);
  transform: scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .etsy-order-consolidation-page .eoc-receipt-id-btn:active {
    transform: none;
  }
}

.etsy-order-consolidation-page .eoc-receipt-id-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etsy-order-consolidation-page .eoc-action-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.etsy-order-consolidation-page .eoc-action-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 1 auto;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #334155;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.etsy-order-consolidation-page .eoc-action-detail-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.etsy-order-consolidation-page .eoc-action-buttons .etsy-grid-action-btn {
  width: auto;
  flex: 0 1 auto;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 12px;
  padding: 6px 10px;
}

/* Fixed column share (table-layout: fixed) */
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(1),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(1) {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(2),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(2) {
  width: 12%;
  min-width: 150px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(3),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(3) {
  width: 8%;
  min-width: 88px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(4),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(4) {
  width: 8%;
  min-width: 88px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(5),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(5) {
  width: 64px;
  min-width: 64px;
  max-width: 72px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(6),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(6) {
  width: 10%;
  min-width: 100px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(7),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(7) {
  width: 9%;
  min-width: 96px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(8),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(8) {
  width: 56px;
  min-width: 56px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(9),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(9) {
  width: 56px;
  min-width: 56px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(10),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(10) {
  width: 64px;
  min-width: 64px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(11),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(11) {
  width: 8%;
  min-width: 92px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(12),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(12) {
  width: 88px;
  min-width: 88px;
}
.etsy-order-consolidation-page .eoc-data-table thead th:nth-child(13),
.etsy-order-consolidation-page .eoc-data-table tbody td:nth-child(13) {
  width: 168px;
  min-width: 168px;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-table-scroll {
  border-color: #2a2d3a;
  background: #13151f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/*
  orderlist.css: div#orderlist table tbody tr td { color: #000 !important; }
  bu sayfadaki (#orderlist) tabloyu da etkiler. Özgüllüğü aşmak için #orderlist + table.eoc-data-table zinciri şart.
*/
[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table thead th {
  color: #ffffff !important;
  background: linear-gradient(180deg, #1f2330 0%, #1a1d27 100%);
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table thead th.eoc-th-actions {
  background: linear-gradient(180deg, #1f2330 0%, #1a1d27 100%) !important;
  box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody td.eoc-td-actions {
  background: #13151f !important;
  box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody tr:nth-child(even) td.eoc-td-actions {
  background: #171a24 !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody tr:hover td.eoc-td-actions {
  background: #1e2433 !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-date-updated {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody tr td {
  border-bottom-color: #2a2d3a;
  color: #ffffff !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody tr td * {
  color: #ffffff !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-text-badge {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-status-badge {
  color: #ffffff !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-status--ok {
  background: rgba(34, 197, 94, 0.35) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-status--no {
  background: rgba(239, 68, 68, 0.38) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-receipt-id-btn {
  color: #ffffff !important;
  border-color: transparent;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-receipt-id-btn:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-receipt-id-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-receipt-id-btn:active {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .etsy-grid-action-btn {
  color: #ffffff !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-action-detail-btn {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-action-detail-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-empty-cell {
  color: #ffffff !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table .eoc-dash-muted {
  color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody tr:nth-child(even) td {
  background: #161926;
}

[data-theme="dark"] .etsy-order-consolidation-page #orderlist table.eoc-data-table tbody tr:hover td {
  background: #1e293b !important;
}

.etsy-order-consolidation-page .eoc-page-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-page-title {
  color: #e8eaf0 !important;
}

.etsy-order-consolidation-page .eoc-meta-line {
  color: #64748b;
  font-size: 12px;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-meta-line {
  color: #9aa3c2 !important;
}

.etsy-order-consolidation-page .eoc-meta-strong {
  font-weight: 600;
  color: #475569;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-meta-strong {
  color: #cbd5e1 !important;
}

.etsy-order-consolidation-page .eoc-empty-cell {
  text-align: center;
  padding: 28px 16px !important;
  color: #64748b;
  font-size: 14px;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-empty-cell {
  color: #9aa3c2 !important;
}

.etsy-order-consolidation-page .eoc-dash-muted {
  color: #94a3b8;
}

.eoc-text-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Tablo hücresinde taşma / komşu sütunla çakışmayı önle (tooltip: title) */
.etsy-order-consolidation-page .eoc-data-table .eoc-text-badge {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eoc-text--default {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.eoc-text--muted {
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
}

.eoc-text--success,
.eoc-text--finished {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.eoc-text--pending {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.eoc-text--view {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}

.eoc-text--sync {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
}

.eoc-text--danger {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

[data-theme="dark"] .eoc-text--default {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

[data-theme="dark"] .eoc-text--muted {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
}

[data-theme="dark"] .eoc-text--success,
[data-theme="dark"] .eoc-text--finished {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
}

[data-theme="dark"] .eoc-text--pending {
  background: rgba(251, 191, 36, 0.22);
  color: #fcd34d;
}

[data-theme="dark"] .eoc-text--view {
  background: rgba(96, 165, 250, 0.2);
  color: #93c5fd;
}

[data-theme="dark"] .eoc-text--sync {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}

[data-theme="dark"] .eoc-text--danger {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
}

[data-theme="dark"] .eoc-panel,
[data-theme="dark"] .eoc-card,
[data-theme="dark"] .eoc-toolbar,
[data-theme="dark"] .eoc-filter-panel,
[data-theme="dark"] .eoc-detail-panel {
  background: var(--prod-surface, #1e1e2e) !important;
  color: var(--prod-text, #e5e7eb);
  border-color: var(--prod-border, #3f3f5a);
}

[data-theme="dark"] .eoc-panel input,
[data-theme="dark"] .eoc-panel select,
[data-theme="dark"] .eoc-panel textarea {
  background: var(--prod-surface-muted, #2a2a3e);
  color: var(--prod-text, #e5e7eb);
  border-color: var(--prod-border, #3f3f5a);
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-panel,
[data-theme="dark"] .etsy-order-consolidation-page .eoc-table-wrap,
[data-theme="dark"] .etsy-order-consolidation-page .eoc-info-card,
[data-theme="dark"] .etsy-order-consolidation-page .eoc-modal-content,
[data-theme="dark"] .etsy-order-consolidation-page .eoc-modal-scroll,
[data-theme="dark"] .etsy-order-consolidation-page .eoc-modal-header {
  background: #1e1e2e !important;
  color: #e5e7eb;
  border-color: #3f3f5a;
}

[data-theme="dark"] .etsy-order-consolidation-page .eoc-close-btn {
  background: #2a2a3e;
  border-color: #3f3f5a;
  color: #e5e7eb;
}

[data-theme="dark"] .etsy-order-consolidation-page [style*="background: #ffffff"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="background:#ffffff"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="background: white"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="background:white"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="backgroundColor: '#ffffff'"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="background-color: #ffffff"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="background-color:#ffffff"] {
  background: #1e1e2e !important;
  color: #e5e7eb !important;
}

[data-theme="dark"] .etsy-order-consolidation-page [style*="rgb(240 240 250)"],
[data-theme="dark"] .etsy-order-consolidation-page [style*="rgb(240, 240, 250)"] {
  background: #151520 !important;
}

/* ── Consolidated Shipment Wizard (/etsy-order-consolidation/ship) ── */
.csw-page .csw-shell {
  max-width: 900px;
  margin: 0;
  padding: 0;
}

.csw-header {
  margin-bottom: 28px;
}

.csw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: color 0.15s ease;
}

.csw-back-link:hover {
  color: #2563eb;
}

.csw-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
}

.csw-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #64748b;
}

.csw-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}

.csw-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.csw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.csw-step-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #64748b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csw-step--active .csw-step-num {
  border-color: #2563eb;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.csw-step--active .csw-step-label {
  color: #1e40af;
}

.csw-step--complete .csw-step-num {
  border-color: #16a34a;
  background: #16a34a;
  color: #ffffff;
}

.csw-step--complete .csw-step-label {
  color: #15803d;
}

.csw-step-connector {
  flex: 0 1 40px;
  height: 2px;
  margin: 0 4px 22px;
  background: #e2e8f0;
  border-radius: 1px;
}

.csw-step-connector--done {
  background: #16a34a;
}

.csw-card {
  padding: 24px 28px;
  margin-bottom: 16px;
  border-radius: 14px;
}

.csw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.csw-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.csw-order-count {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: rgba(100, 116, 139, 0.12);
}

.csw-card-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

.csw-empty-hint {
  margin: 0;
  font-size: 14px;
}

.csw-receipt-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.csw-receipt-list li {
  margin: 0;
}

.csw-receipt-chip {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 6px 14px;
}

.csw-alert {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.csw-alert--error {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.28);
}

.csw-alert--success {
  color: #15803d;
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.28);
}

.csw-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4px;
}

.csw-card-actions--row {
  flex-wrap: wrap;
  gap: 12px;
}

.csw-primary-btn {
  min-width: 180px;
  padding: 13px 28px;
  font-size: 15px;
}

.csw-secondary-btn {
  min-width: 160px;
}

.csw-token-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.csw-token-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.csw-token-value {
  font-size: 15px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  word-break: break-all;
}

.csw-page .prod-btn {
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, background 0.15s ease, border-color 0.15s ease;
}

.csw-page .prod-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.csw-page .prod-btn--primary {
  background: #ff8306;
  color: #ffffff;
}

.csw-page .prod-btn--primary:not(:disabled):hover {
  background: #e07000;
}

.csw-page .prod-btn--ghost {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.csw-page .prod-btn--ghost:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

[data-theme="dark"] .csw-back-link {
  color: #9aa3c2;
}

[data-theme="dark"] .csw-back-link:hover {
  color: #93c5fd;
}

[data-theme="dark"] .csw-subtitle,
[data-theme="dark"] .csw-card-desc,
[data-theme="dark"] .csw-token-label {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .csw-steps {
  background: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .csw-step-num {
  background: #1a1d27;
  border-color: #3f465c;
  color: #9aa3c2;
}

[data-theme="dark"] .csw-step-label {
  color: #9aa3c2;
}

[data-theme="dark"] .csw-step--active .csw-step-num {
  border-color: #4d7ee8;
  background: #4d7ee8;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(77, 126, 232, 0.25);
}

[data-theme="dark"] .csw-step--active .csw-step-label {
  color: #93c5fd;
}

[data-theme="dark"] .csw-step--complete .csw-step-num {
  border-color: #22c55e;
  background: #22c55e;
  color: #ffffff;
}

[data-theme="dark"] .csw-step--complete .csw-step-label {
  color: #86efac;
}

[data-theme="dark"] .csw-step-connector {
  background: #2a2d3a;
}

[data-theme="dark"] .csw-step-connector--done {
  background: #22c55e;
}

[data-theme="dark"] .csw-card-title {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .csw-order-count {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.16);
}

[data-theme="dark"] .csw-alert--error {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.35);
}

[data-theme="dark"] .csw-alert--success {
  color: #86efac;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.32);
}

[data-theme="dark"] .csw-token-row {
  background: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .csw-token-value {
  color: #e8eaf0;
}

[data-theme="dark"] .csw-page .prod-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #e8eaf0;
}

[data-theme="dark"] .csw-page .prod-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 640px) {
  .csw-page .csw-shell {
    padding: 16px 12px 32px;
  }

  .csw-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }

  .csw-step {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .csw-step-connector {
    display: none;
  }

  .csw-card {
    padding: 20px 18px;
  }

  .csw-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .csw-primary-btn,
  .csw-secondary-btn {
    width: 100%;
    min-width: 0;
  }
}



.section{
  padding: 0 2rem;
}

.section .error{
  font-size: 150px;
  color: #f97b1c;
  text-shadow: 
   1px 1px 1px #5b605f, 
   2px 2px 1px #5b605f, 
   3px 3px 1px #5b605f, 
   4px 4px 1px #5b605f, 
   5px 5px 1px #5b605f, 
   6px 6px 1px #5b605f, 
   7px 7px 1px #5b605f, 
   8px 8px 1px #5b605f, 
   25px 25px 8px rgba(0, 0, 0, 0.2)
}

.page{
  margin: 2rem 0;
  font-size: 20px;
  font-weight: 600;
  color: #444;
}

.back-home{
  display: inline-block;
  border: 2px solid #222;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1rem 0.6rem;
  transition: all 0.2s linear;
  box-shadow: 0 15px 15px -11px rgba(0,0,0, 0.4);
  background: #222;
  border-radius: 6px;
}
.back-home:hover{
  background: #222;
  color: #ddd;
}
/* /mydesigns — My Templates (design-v2) */
.my-designs-page .md-page-bg {
  background: #f0f0fa;
}

.my-designs-page .md-page-header {
  background: #ffffff;
}

.my-designs-page .md-content-strip {
  background: #f0f0fa;
}

.my-designs-page .md-content-card {
  background: #ffffff;
  border-radius: 20px;
}

.my-designs-page .md-preview-frame {
  border-radius: 0;
}

[data-theme="dark"] .my-designs-page .md-page-bg {
  background: #0f1117 !important;
  color: #c8cad8;
}

[data-theme="dark"] .my-designs-page .md-page-header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .my-designs-page .md-content-strip {
  background: #13151f !important;
  color: #c8cad8;
}

[data-theme="dark"] .my-designs-page .md-content-card {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  color: #e8eaf0;
}

[data-theme="dark"] .my-designs-page .md-page-title {
  color: #f0f1f5 !important;
}

[data-theme="dark"] .my-designs-page .form-control,
[data-theme="dark"] .my-designs-page .form-select {
  background-color: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-designs-page .form-control::placeholder {
  color: #6b7280;
}

[data-theme="dark"] .my-designs-page .btn-outline-secondary {
  border-color: #3d4154 !important;
  color: #c8cad8 !important;
}

[data-theme="dark"] .my-designs-page .btn-secondary {
  background: #2a2d3a !important;
  border-color: #3d4154 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-card.card {
  background-color: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
  color: #e8eaf0;
}

[data-theme="dark"] .my-designs-page .my-designs-card .text-muted {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-card .badge.bg-light {
  background-color: #232635 !important;
  color: #e8eaf0 !important;
  border: 1px solid #2a2d3a;
}

[data-theme="dark"] .my-designs-page .my-designs-card .badge.bg-info {
  background-color: rgba(33, 150, 243, 0.25) !important;
  color: #90caf9 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-card .badge.bg-secondary {
  background-color: #3d4154 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-card .badge.bg-success {
  background-color: rgba(22, 163, 74, 0.35) !important;
  color: #86efac !important;
}

[data-theme="dark"] .my-designs-page .my-designs-card .badge.bg-warning {
  background-color: rgba(234, 179, 8, 0.25) !important;
  color: #fde047 !important;
}

[data-theme="dark"] .my-designs-page .md-preview-frame {
  background-color: #13151f !important;
}

[data-theme="dark"] .my-designs-page .my-designs-preview-skeleton {
  background: linear-gradient(90deg, #1f2937 0%, #374151 45%, #1f2937 100%);
  background-size: 200% 100%;
}

[data-theme="dark"] .my-designs-page .my-designs-list-item.list-group-item {
  background-color: #1a1d27 !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0;
}

[data-theme="dark"] .my-designs-page .my-designs-list-item .text-muted {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .my-designs-page .alert-danger {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  color: #fecaca !important;
}

/* Order / detail modals */
[data-theme="dark"] .my-designs-page .my-designs-modal-backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card.card {
  background-color: #1a1d27 !important;
  border: 1px solid #2a2d3a !important;
  color: #e8eaf0;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .card-body {
  background: transparent;
  color: #e8eaf0;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .text-muted {
  color: #9aa3c2 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .btn-outline-secondary {
  border-color: #4a5068 !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .badge.bg-light {
  background-color: #232635 !important;
  color: #e8eaf0 !important;
  border: 1px solid #2a2d3a;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .small.text-muted {
  color: #7c80a0 !important;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card h6 {
  color: #f0f1f5;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .btn-outline-primary {
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card .btn-primary {
  border-color: #2563eb !important;
}

/* Modern modal skin */
.my-designs-page .my-designs-modal-backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 12px;
}

.my-designs-page .my-designs-order-backdrop,
.my-designs-page .my-designs-detail-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.my-designs-page .my-designs-modal-dialog {
  width: min(100%, calc(100vw - 24px));
}

.my-designs-page .my-designs-order-dialog {
  max-width: 560px;
}

.my-designs-page .my-designs-detail-dialog {
  max-width: 980px;
}

.my-designs-page .my-designs-modal-card.card {
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.my-designs-page .my-designs-modal-header {
  border-bottom: 0;
  padding: 12px 16px;
}

.my-designs-page .my-designs-order-header {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
}

.my-designs-page .my-designs-detail-header {
  background: linear-gradient(135deg, #ff7a00 0%, #ff9f43 100%);
  color: #ffffff;
}

.my-designs-page .my-designs-modal-close-btn {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  min-width: 68px;
}

.my-designs-page .my-designs-modal-close-btn:hover,
.my-designs-page .my-designs-modal-close-btn:focus {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.22);
}

.my-designs-page .my-designs-modal-card .card-body {
  padding: 18px 18px 16px;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-backdrop {
  background: rgba(2, 6, 23, 0.7) !important;
}

[data-theme="dark"] .my-designs-page .my-designs-order-backdrop,
[data-theme="dark"] .my-designs-page .my-designs-detail-backdrop {
  background: transparent !important;
}

body.my-designs-modal-open .my-designs-page .md-page-header,
body.my-designs-modal-open .my-designs-page #header {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.my-designs-modal-open {
  overflow: hidden;
}

[data-theme="dark"] .my-designs-page .my-designs-modal-card.card {
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767.98px) {
  .my-designs-page .my-designs-modal-backdrop {
    padding: 10px 8px;
  }

  .my-designs-page .my-designs-modal-header {
    padding: 10px 12px;
  }

  .my-designs-page .my-designs-modal-card .card-body {
    padding: 14px 12px 12px;
  }
}

/**
 * Tasarım oluşturma / düzenleme sayfası — global data-theme (light | dark) ile uyumlu.
 */

.create-product-design-page {
  min-height: 100vh;
  background: #f0f0fa;
  color: #212529;
}

[data-theme="dark"] .create-product-design-page {
  background: #0c0e12;
  color: #e8eaed;
}

.create-product-design-page .cpd-header-shell {
  background: #fff;
  border-bottom: 1px solid #e8e8ef;
}

[data-theme="dark"] .create-product-design-page .cpd-header-shell {
  background: #12151c;
  border-bottom-color: #2a3140;
}

/* Ortak panel kartları */
.create-product-design-page .cpd-panel {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

[data-theme="dark"] .create-product-design-page .cpd-panel {
  background: #161b24;
  border-color: #2a3140;
}

.create-product-design-page .cpd-top-toolbar {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 7px 10px;
  min-height: 44px;
  row-gap: 6px !important;
}

[data-theme="dark"] .create-product-design-page .cpd-top-toolbar {
  background: #161b24;
  border-color: #2a3140;
}

.create-product-design-page .cpd-side {
  width: 300px;
  padding: 12px;
}

.create-product-design-page .cpd-canvas-col {
  flex: 1;
  padding: 12px;
  min-width: 0;
  overflow: hidden;
}

.create-product-design-page .cpd-layers-scroll {
  max-height: 150px;
  overflow: auto;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  margin-bottom: 12px;
}

[data-theme="dark"] .create-product-design-page .cpd-layers-scroll {
  border-color: #2a3140;
}

.create-product-design-page .cpd-layer-row {
  padding: 6px 8px;
  border-bottom: 1px solid #f7f7f7;
}

[data-theme="dark"] .create-product-design-page .cpd-layer-row {
  border-bottom-color: #2a3140;
}

.create-product-design-page .cpd-object-props {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px;
}

[data-theme="dark"] .create-product-design-page .cpd-object-props {
  background: #1e2430;
  border-color: #2a3140;
}

.create-product-design-page .cpd-face-card.card {
  background: #fff;
  border-color: #e0e0e0;
}

[data-theme="dark"] .create-product-design-page .cpd-face-card.card {
  background: #161b24;
  border-color: #2a3140;
  color: #e8eaed;
}

[data-theme="dark"] .create-product-design-page .form-label {
  color: #cbd5e1;
}

[data-theme="dark"] .create-product-design-page .text-muted {
  color: #94a3b8 !important;
}

[data-theme="dark"] .create-product-design-page .form-control,
[data-theme="dark"] .create-product-design-page .form-select {
  background-color: #0f131a;
  border-color: #3d4759;
  color: #e8eaed;
}

[data-theme="dark"] .create-product-design-page .form-control:focus,
[data-theme="dark"] .create-product-design-page .form-select:focus {
  background-color: #0f131a;
  border-color: #ff8306;
  color: #e8eaed;
}

[data-theme="dark"] .create-product-design-page .form-control::placeholder {
  color: #64748b;
}

[data-theme="dark"] .create-product-design-page .form-check-label {
  color: #e8eaed;
}

[data-theme="dark"] .create-product-design-page .input-group-text {
  background: #1e2430;
  border-color: #3d4759;
  color: #cbd5e1;
}

[data-theme="dark"] .create-product-design-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e8eaed;
  --bs-table-border-color: #2a3140;
  color: #e8eaed;
}

[data-theme="dark"] .create-product-design-page .table thead th {
  border-bottom-color: #2a3140;
  color: #cbd5e1;
}

[data-theme="dark"] .create-product-design-page hr {
  border-color: #2a3140;
  opacity: 1;
}

[data-theme="dark"] .create-product-design-page .btn-outline-secondary {
  color: #cbd5e1;
  border-color: #4b5568;
}

[data-theme="dark"] .create-product-design-page .btn-outline-secondary:hover {
  background: #2a3140;
  border-color: #64748b;
  color: #f1f5f9;
}

[data-theme="dark"] .create-product-design-page .btn-outline-primary {
  color: #7ab7ff;
  border-color: #3b6ea8;
}

[data-theme="dark"] .create-product-design-page .btn-outline-primary:hover {
  background: rgba(59, 110, 168, 0.25);
  color: #dbeafe;
}

[data-theme="dark"] .create-product-design-page .btn-link {
  color: #7ab7ff;
}

[data-theme="dark"] .create-product-design-page .form-range::-webkit-slider-runnable-track {
  background: #2a3140;
}

[data-theme="dark"] .create-product-design-page .cpd-high-contrast .form-control,
[data-theme="dark"] .create-product-design-page .cpd-high-contrast .form-select {
  border-width: 2px;
  border-color: #fbbf24;
}

/* Kendo Window — portal ile body altında; dark temada diyaloglar */
[data-theme="dark"] .k-window {
  background: #161b24 !important;
  border-color: #2a3140 !important;
  color: #e8eaed !important;
}

[data-theme="dark"] .k-window-titlebar {
  background: #12151c !important;
  border-color: #2a3140 !important;
  color: #e8eaed !important;
}

[data-theme="dark"] .k-window-content {
  background: #161b24 !important;
  color: #e8eaed !important;
}

/* Renk seçimi kutusu — dark’te seçili arka plan */
[data-theme="dark"] .cpd-color-swatch-selected {
  background-color: rgba(255, 131, 6, 0.12) !important;
}

/* ===== V2 editor visual refresh ===== */
.create-product-design-page .cpd-editor-shell {
  background: radial-gradient(1200px 600px at 40% 0%, #1d2430 0%, #10141c 60%, #0b0f16 100%);
  border: 1px solid #2a3140;
  border-radius: 12px;
}

.create-product-design-page .cpd-editor-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2e3748;
  background: linear-gradient(180deg, #1f2633 0%, #171d28 100%);
}

.create-product-design-page .cpd-editor-title {
  color: #f8fafc;
  font-weight: 700;
  letter-spacing: 0.1px;
}

.create-product-design-page .cpd-editor-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.create-product-design-page .cpd-meta-chip {
  border: 1px solid #3a4458;
  color: #dbe3f0;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  background: #161c28;
}

.create-product-design-page .cpd-meta-chip.is-saved {
  border-color: #1e7e48;
  color: #8df0ba;
}

.create-product-design-page .cpd-meta-chip.is-unsaved {
  border-color: #a16d06;
  color: #ffd27a;
}

.create-product-design-page .cpd-meta-chip.is-saving {
  border-color: #3a7bd5;
  color: #9bc3ff;
}

.create-product-design-page .cpd-side.cpd-panel,
.create-product-design-page .cpd-canvas-col.cpd-panel,
.create-product-design-page .cpd-right-panel.cpd-panel,
.create-product-design-page .cpd-top-toolbar {
  background: #151b26;
  border-color: #2a3140;
  color: #e5e7eb;
}

.create-product-design-page .cpd-top-toolbar .form-label {
  font-size: 11px;
  line-height: 1.1;
}

.create-product-design-page .cpd-top-toolbar .form-control,
.create-product-design-page .cpd-top-toolbar .form-select {
  min-height: 30px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 12px;
}

.create-product-design-page .cpd-top-toolbar .btn.btn-sm {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 11px;
  line-height: 1.1;
}

.create-product-design-page .cpd-layers-scroll {
  background: #111722;
  border-color: #2a3140;
}

.create-product-design-page .cpd-layer-row {
  border-bottom-color: #273142;
}

.create-product-design-page .cpd-canvas-col .lower-canvas {
  border: 1px solid #2e3747;
  border-radius: 8px;
  background-color: #0f141d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.create-product-design-page .cpd-canvas-col .upper-canvas {
  background-color: transparent !important;
}

.create-product-design-page .cpd-canvas-stage {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.create-product-design-page .cpd-canvas-stage .canvas-container {
  max-width: 100% !important;
}

.create-product-design-page .cpd-face-card.card {
  background: #121824;
  border-color: #2a3140;
}

.create-product-design-page .cpd-object-props {
  background: #0f1520;
  border-color: #2a3140;
}

.create-product-design-page .cpd-right-column {
  font-size: 12px;
}

.create-product-design-page .cpd-right-panel {
  padding: 10px;
}

.create-product-design-page .cpd-right-titlebar {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a3140;
}

.create-product-design-page .cpd-right-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.create-product-design-page .cpd-right-subtitle {
  font-size: 11px;
  color: #91a0b5;
}

.create-product-design-page .cpd-right-section {
  background: #111823;
  border: 1px solid #263244;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

.create-product-design-page .cpd-right-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: #9fb0c7;
  margin-bottom: 6px;
}

.create-product-design-page .cpd-right-muted {
  font-size: 11px;
}

.create-product-design-page .cpd-warning-list {
  max-height: 126px;
  overflow: auto;
  padding-right: 2px;
}

.create-product-design-page .cpd-warning-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  padding: 4px 0;
  border-bottom: 1px dashed #243040;
}

.create-product-design-page .cpd-warning-item:last-child {
  border-bottom: none;
}

.create-product-design-page .cpd-right-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-bottom: 6px;
}

.create-product-design-page .cpd-check-row {
  margin: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.create-product-design-page .cpd-right-panel .form-label {
  font-size: 11px;
}

.create-product-design-page .cpd-right-panel .form-control,
.create-product-design-page .cpd-right-panel .form-select,
.create-product-design-page .cpd-right-panel .input-group-text {
  font-size: 11px;
  min-height: 28px;
}

.create-product-design-page .cpd-recent-color {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #2f4057;
}

.create-product-design-page .cpd-right-object-props {
  padding: 10px;
}

.create-product-design-page .cpd-right-object-props .form-label {
  font-size: 11px !important;
}

.create-product-design-page .cpd-right-object-props .btn.btn-sm {
  font-size: 11px;
  padding: 3px 7px;
}

.create-product-design-page .cpd-arrange-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.create-product-design-page .cpd-icon-btn {
  min-height: 28px;
  padding: 3px 4px;
  font-size: 14px !important;
  line-height: 1;
  border-radius: 8px;
  font-weight: 700;
}

.create-product-design-page .cpd-image-tools {
  border-top: 1px dashed #2a3446;
  padding-top: 8px;
}

.create-product-design-page .cpd-quick-fill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.create-product-design-page .cpd-quick-fill-grid .btn {
  width: 100%;
}

.create-product-design-page .btn:not(.btn-link) {
  border-width: 1px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.create-product-design-page .btn:not(.btn-link):hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.45);
}

.create-product-design-page .btn:not(.btn-link):active {
  transform: translateY(0);
}

.create-product-design-page .btn-outline-secondary,
.create-product-design-page .btn-outline-primary,
.create-product-design-page .btn-outline-danger {
  background: #1a2536;
  border-color: #3a4a62;
  color: #dbe6f5;
}

.create-product-design-page .btn-outline-secondary:hover,
.create-product-design-page .btn-outline-primary:hover,
.create-product-design-page .btn-outline-danger:hover {
  background: #223149;
  border-color: #4b6180;
  color: #f3f8ff;
}

.create-product-design-page .btn-xs {
  font-size: 11px;
  padding: 2px 8px;
}

.create-product-design-page .cpd-canvas-toolbar {
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.create-product-design-page .cpd-canvas-toolbar .btn.btn-sm {
  font-size: 11px;
  line-height: 1.1;
  padding: 3px 7px;
  min-height: 26px;
  white-space: nowrap;
}

/* ===== Responsive fixes (tablet/mobile) ===== */
.create-product-design-page .cpd-main-layout {
  width: 100%;
}

@media (max-width: 1200px) {
  .create-product-design-page .cpd-main-layout {
    flex-wrap: wrap;
  }

  .create-product-design-page .cpd-side {
    width: 100%;
    order: 1;
  }

  .create-product-design-page .cpd-canvas-col {
    width: 100%;
    order: 2;
  }

  .create-product-design-page .cpd-right-column {
    width: 100% !important;
    max-width: 100%;
    flex-shrink: 1 !important;
    order: 3;
  }
}

@media (max-width: 992px) {
  .create-product-design-page .cpd-top-toolbar {
    padding: 8px;
  }

  .create-product-design-page .cpd-editor-topline {
    flex-direction: column;
    align-items: flex-start;
  }

  .create-product-design-page .cpd-canvas-toolbar {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .create-product-design-page .cpd-canvas-toolbar .btn.btn-sm {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .create-product-design-page .cpd-editor-shell {
    border-radius: 8px;
  }

  .create-product-design-page .cpd-side,
  .create-product-design-page .cpd-canvas-col,
  .create-product-design-page .cpd-right-column {
    padding: 8px;
  }

  .create-product-design-page .cpd-face-card.card {
    width: 100% !important;
  }

  .create-product-design-page .cpd-quick-fill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* My Tickets page dark theme overrides */

[data-theme="dark"] .my-tickets-page {
  background: #0f1117 !important;
}

[data-theme="dark"] .my-tickets-page .menures > div[name="mainmenu"] {
  border-right-color: #2a2d3a !important;
}

[data-theme="dark"] .my-tickets-page > .d-flex.flex-column.mb-4.w-100,
[data-theme="dark"] .my-tickets-page .my-tickets-content-wrap {
  background: #0f1117 !important;
}

[data-theme="dark"] .my-tickets-page #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .input-group-text {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #9ca3c4 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .form-control {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .form-control::placeholder {
  color: #8b8fa8;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .btn-outline-primary {
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
  background: transparent !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .btn-outline-primary:hover {
  background: rgba(59, 130, 246, 0.15) !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-list-group {
  border-radius: 10px;
  overflow: hidden;
}

[data-theme="dark"] .my-tickets-page .my-tickets-list-item {
  background: #202433 !important;
  border-color: #343a4f !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-list-item h6,
[data-theme="dark"] .my-tickets-page .my-tickets-list-item p,
[data-theme="dark"] .my-tickets-page .my-tickets-list-item span {
  color: #e8eaf0 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-list-item .text-muted,
[data-theme="dark"] .my-tickets-page .my-tickets-list-item [style*="#6b7280"] {
  color: #9ca3c4 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-list-item .badge.bg-secondary {
  background: #3b4258 !important;
  color: #dbe1f3 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .btn-outline-secondary {
  border-color: #3d4154 !important;
  color: #c4c8d4 !important;
  background: #1a1d27 !important;
}

[data-theme="dark"] .my-tickets-page .my-tickets-card-shell .btn-outline-secondary:hover {
  background: #2a2d3a !important;
}

/* Ticket Detail — full-width, AdminTickets uyumlu */
.ticket-detail-page {
  --td-primary: #6366f1;
  --td-primary-hover: #4f46e5;
  --td-primary-light: rgba(99, 102, 241, 0.1);
  --td-accent: #8b5cf6;
  --td-success: #10b981;
  --td-warning: #f59e0b;
  --td-danger: #ef4444;
  --td-muted: #64748b;
  --td-border: #e2e8f0;
  --td-bg: #f0f0fa;
  --td-panel: #ffffff;
  --td-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --td-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --td-radius: 16px;
  --td-radius-sm: 10px;
  --td-transition: 0.18s ease;
  min-height: 100vh;
}

.ticket-detail-page .td-sidebar-menu {
  border-right: 1px solid var(--td-border);
}

.ticket-detail-page .td-layout {
  background: var(--td-bg);
  min-height: 100vh;
}

.ticket-detail-page .td-header-bar {
  background: #fff;
  box-shadow: var(--td-shadow);
  border-bottom: 1px solid var(--td-border);
}

.ticket-detail-page .td-shell {
  width: 100%;
  max-width: none;
  padding: 20px 16px 32px;
}

@media (min-width: 768px) {
  .ticket-detail-page .td-shell {
    padding: 24px 28px 40px;
  }
}

@media (min-width: 1200px) {
  .ticket-detail-page .td-shell {
    padding: 28px 36px 48px;
  }
}

/* Hero */
.ticket-detail-page .td-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ticket-detail-page .td-hero-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.ticket-detail-page .td-back-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--td-radius-sm);
  border: 1px solid var(--td-border);
  background: #fff;
  color: var(--td-muted);
  cursor: pointer;
  transition: var(--td-transition);
}

.ticket-detail-page .td-back-btn:hover {
  border-color: var(--td-primary);
  color: var(--td-primary);
  background: var(--td-primary-light);
}

.ticket-detail-page .td-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--td-primary-light);
  color: var(--td-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ticket-detail-page .td-title {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  line-height: 1.2;
}

.ticket-detail-page .td-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.ticket-detail-page .td-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.ticket-detail-page .td-badge-status {
  color: #fff;
}

.ticket-detail-page .td-badge-priority {
  background: #fff;
  border: 1px solid currentColor;
}

.ticket-detail-page .td-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ticket-detail-page .td-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--td-radius-sm);
  border: 1px solid var(--td-border);
  background: #fff;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--td-transition);
}

.ticket-detail-page .td-action-btn:hover {
  border-color: var(--td-primary);
  color: var(--td-primary);
}

.ticket-detail-page .td-action-btn.primary {
  background: var(--td-primary);
  border-color: var(--td-primary);
  color: #fff;
}

.ticket-detail-page .td-action-btn.primary:hover {
  background: var(--td-primary-hover);
  border-color: var(--td-primary-hover);
  color: #fff;
}

/* Grid layout */
.ticket-detail-page .td-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 1024px) {
  .ticket-detail-page .td-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (min-width: 1280px) {
  .ticket-detail-page .td-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.ticket-detail-page .td-panel {
  background: var(--td-panel);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  box-shadow: var(--td-shadow-lg);
  overflow: hidden;
}

.ticket-detail-page .td-panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--td-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fafbfc;
}

.ticket-detail-page .td-panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-detail-page .td-panel-body {
  padding: 0;
}

/* Chat */
.ticket-detail-page .td-chat {
  height: min(560px, calc(100vh - 340px));
  min-height: 360px;
  overflow-y: auto;
  padding: 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.ticket-detail-page .td-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--td-muted);
  text-align: center;
  padding: 40px 20px;
}

.ticket-detail-page .td-chat-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.35;
  color: var(--td-primary);
}

.ticket-detail-page .td-chat-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}

.ticket-detail-page .td-msg {
  display: flex;
  margin-bottom: 14px;
}

.ticket-detail-page .td-msg.sent {
  justify-content: flex-end;
}

.ticket-detail-page .td-msg-bubble {
  max-width: min(78%, 520px);
  padding: 12px 16px;
  border-radius: 16px;
  box-shadow: var(--td-shadow);
}

.ticket-detail-page .td-msg.sent .td-msg-bubble {
  background: linear-gradient(135deg, var(--td-primary), var(--td-accent));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ticket-detail-page .td-msg.received .td-msg-bubble {
  background: #fff;
  color: #1e293b;
  border: 1px solid var(--td-border);
  border-bottom-left-radius: 4px;
}

.ticket-detail-page .td-msg.received.admin .td-msg-bubble {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border: none;
}

.ticket-detail-page .td-msg-sender {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.95;
}

.ticket-detail-page .td-msg-internal {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  margin-left: 8px;
  background: rgba(245, 158, 11, 0.35);
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ticket-detail-page .td-msg.sent .td-msg-internal,
.ticket-detail-page .td-msg.received.admin .td-msg-internal {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.ticket-detail-page .td-msg-body {
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}

.ticket-detail-page .td-msg-attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.ticket-detail-page .td-msg-attachments img {
  max-width: 240px;
  max-height: 180px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: block;
}

.ticket-detail-page .td-msg.sent .td-msg-attachments img,
.ticket-detail-page .td-msg.received.admin .td-msg-attachments img {
  border-color: rgba(255, 255, 255, 0.35);
}

.ticket-detail-page .td-attachment-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--td-transition);
}

.ticket-detail-page .td-attachment-link:hover {
  opacity: 0.9;
}

.ticket-detail-page .td-msg.sent .td-attachment-link,
.ticket-detail-page .td-msg.received.admin .td-attachment-link {
  border-color: rgba(255, 255, 255, 0.35);
}

.ticket-detail-page .td-attachment-name {
  font-size: 0.85rem;
  font-weight: 600;
  word-break: break-word;
}

.ticket-detail-page .td-attachment-size {
  font-size: 0.75rem;
  opacity: 0.85;
}

.ticket-detail-page .td-msg-time {
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 8px;
}

/* Input */
.ticket-detail-page .td-input-section {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--td-border);
  background: #fff;
}

.ticket-detail-page .td-internal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #475569;
  font-weight: 500;
}

.ticket-detail-page .td-internal-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--td-primary);
  cursor: pointer;
}

.ticket-detail-page .td-pending-uploads {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.ticket-detail-page .td-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--td-radius-sm);
  border: 1px solid var(--td-border);
  background: #f8fafc;
}

.ticket-detail-page .td-pending-name {
  font-size: 0.875rem;
  font-weight: 600;
  word-break: break-word;
}

.ticket-detail-page .td-pending-status {
  font-size: 0.78rem;
  color: var(--td-muted);
  margin-top: 2px;
}

.ticket-detail-page .td-pending-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ticket-detail-page .td-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.ticket-detail-page .td-input-row textarea {
  flex: 1;
  min-height: 88px;
  padding: 12px 16px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-sm);
  font-size: 0.9rem;
  resize: none;
  background: #f8fafc;
  transition: var(--td-transition);
  font-family: inherit;
}

.ticket-detail-page .td-input-row textarea:focus {
  outline: none;
  border-color: var(--td-primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--td-primary-light);
}

.ticket-detail-page .td-btn-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--td-radius-sm);
  border: 1px solid var(--td-border);
  background: #fff;
  color: var(--td-muted);
  cursor: pointer;
  transition: var(--td-transition);
  flex-shrink: 0;
}

.ticket-detail-page .td-btn-icon:hover:not(:disabled) {
  border-color: var(--td-primary);
  color: var(--td-primary);
  background: var(--td-primary-light);
}

.ticket-detail-page .td-btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ticket-detail-page .td-btn-send {
  height: 44px;
  padding: 0 22px;
  border-radius: var(--td-radius-sm);
  font-weight: 700;
  font-size: 0.875rem;
  border: none;
  background: var(--td-primary);
  color: #fff;
  cursor: pointer;
  transition: var(--td-transition);
  flex-shrink: 0;
}

.ticket-detail-page .td-btn-send:hover:not(:disabled) {
  background: var(--td-primary-hover);
}

.ticket-detail-page .td-btn-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sidebar */
.ticket-detail-page .td-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ticket-detail-page .td-info-card {
  background: var(--td-panel);
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  box-shadow: var(--td-shadow);
  overflow: hidden;
}

.ticket-detail-page .td-info-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--td-border);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--td-muted);
  background: #fafbfc;
}

.ticket-detail-page .td-info-list {
  padding: 6px 0;
  margin: 0;
  list-style: none;
}

.ticket-detail-page .td-info-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  font-size: 0.875rem;
  border-bottom: 1px solid #f1f5f9;
}

.ticket-detail-page .td-info-item:last-child {
  border-bottom: none;
}

.ticket-detail-page .td-info-label {
  color: var(--td-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.ticket-detail-page .td-info-value {
  color: #0f172a;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.ticket-detail-page .td-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ticket-detail-page .td-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--td-primary), var(--td-accent));
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Order card */
.ticket-detail-page .td-order-card {
  transition: var(--td-transition);
}

.ticket-detail-page .td-order-card-body {
  padding: 14px 18px 16px;
}

.ticket-detail-page .td-order-receipt {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.ticket-detail-page .td-order-hint {
  font-size: 0.78rem;
  color: var(--td-muted);
  margin-bottom: 12px;
}

.ticket-detail-page .td-order-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ticket-detail-page .td-order-stat {
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: var(--td-radius-sm);
  border: 1px solid var(--td-border);
}

.ticket-detail-page .td-order-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--td-muted);
  margin-bottom: 4px;
}

.ticket-detail-page .td-order-stat-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.ticket-detail-page .td-order-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--td-primary);
  cursor: pointer;
  text-decoration: none;
}

.ticket-detail-page .td-order-link:hover {
  text-decoration: underline;
}

.ticket-detail-page .td-order-tracking {
  user-select: text;
  cursor: text;
}

.ticket-detail-page .td-desc-block {
  padding: 14px 18px;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Modal — global (modals render outside .ticket-detail-page) */
.td-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.td-modal {
  background: #fff;
  border-radius: var(--td-radius);
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--td-shadow-lg);
  border: 1px solid var(--td-border);
}

.td-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.td-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.td-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f1f5f9;
  color: var(--td-muted);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: var(--td-radius-sm);
  transition: var(--td-transition);
}

.td-modal-close:hover {
  background: #e2e8f0;
  color: #334155;
}

.td-modal-body label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--td-muted);
  margin-bottom: 8px;
}

.td-modal-body select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-sm);
  font-size: 0.9rem;
  background: #fff;
  color: #0f172a;
}

.td-modal-body select:focus {
  outline: none;
  border-color: var(--td-primary);
  box-shadow: 0 0 0 3px var(--td-primary-light);
}

.td-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--td-border);
}

.td-modal-btn {
  padding: 10px 18px;
  border-radius: var(--td-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid var(--td-border);
  background: #fff;
  color: #475569;
  transition: var(--td-transition);
}

.td-modal-btn.primary {
  background: var(--td-primary);
  border-color: var(--td-primary);
  color: #fff;
}

.td-modal-btn.primary:hover:not(:disabled) {
  background: var(--td-primary-hover);
}

.td-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal — scoped aliases */
.ticket-detail-page .td-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ticket-detail-page .td-modal {
  background: #fff;
  border-radius: var(--td-radius);
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--td-shadow-lg);
  border: 1px solid var(--td-border);
}

.ticket-detail-page .td-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.ticket-detail-page .td-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.ticket-detail-page .td-modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #f1f5f9;
  color: var(--td-muted);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: var(--td-radius-sm);
  transition: var(--td-transition);
}

.ticket-detail-page .td-modal-close:hover {
  background: #e2e8f0;
  color: #334155;
}

.ticket-detail-page .td-modal-body label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--td-muted);
  margin-bottom: 8px;
}

.ticket-detail-page .td-modal-body select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-sm);
  font-size: 0.9rem;
  background: #fff;
}

.ticket-detail-page .td-modal-body select:focus {
  outline: none;
  border-color: var(--td-primary);
  box-shadow: 0 0 0 3px var(--td-primary-light);
}

.ticket-detail-page .td-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--td-border);
}

.ticket-detail-page .td-modal-btn {
  padding: 10px 18px;
  border-radius: var(--td-radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  border: 1px solid var(--td-border);
  background: #fff;
  color: #475569;
  transition: var(--td-transition);
}

.ticket-detail-page .td-modal-btn.primary {
  background: var(--td-primary);
  border-color: var(--td-primary);
  color: #fff;
}

.ticket-detail-page .td-modal-btn.primary:hover:not(:disabled) {
  background: var(--td-primary-hover);
}

.ticket-detail-page .td-modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error / loading */
.ticket-detail-page .td-state-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px;
  text-align: center;
  width: 100%;
}

.ticket-detail-page .td-error-msg {
  padding: 16px 24px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--td-radius-sm);
  color: #b91c1c;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.ticket-detail-page .td-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--td-success);
  animation: td-pulse 2s ease infinite;
}

@keyframes td-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Dark theme */
[data-theme="dark"] .ticket-detail-page {
  --td-bg: #0f1117;
  --td-panel: #1a1d27;
  --td-border: #2a2d3a;
  --td-muted: #9ca3c4;
  --td-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --td-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --td-primary-light: rgba(99, 102, 241, 0.18);
}

[data-theme="dark"] .ticket-detail-page .td-sidebar-menu {
  border-right-color: #2a2d3a;
}

[data-theme="dark"] .ticket-detail-page .td-layout {
  background: #0f1117;
}

[data-theme="dark"] .ticket-detail-page .td-header-bar {
  background: #1a1d27;
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .ticket-detail-page .td-title,
[data-theme="dark"] .ticket-detail-page .td-panel-title,
[data-theme="dark"] .ticket-detail-page .td-order-receipt,
[data-theme="dark"] .ticket-detail-page .td-order-stat-value,
[data-theme="dark"] .ticket-detail-page .td-info-value,
[data-theme="dark"] .ticket-detail-page .td-chat-empty-title,
[data-theme="dark"] .ticket-detail-page .td-modal-title {
  color: #f0f1f5;
}

[data-theme="dark"] .ticket-detail-page .td-subtitle,
[data-theme="dark"] .ticket-detail-page .td-order-hint,
[data-theme="dark"] .ticket-detail-page .td-info-label,
[data-theme="dark"] .ticket-detail-page .td-order-stat-label,
[data-theme="dark"] .ticket-detail-page .td-desc-block {
  color: #9ca3c4;
}

[data-theme="dark"] .ticket-detail-page .td-back-btn,
[data-theme="dark"] .ticket-detail-page .td-action-btn,
[data-theme="dark"] .ticket-detail-page .td-panel,
[data-theme="dark"] .ticket-detail-page .td-info-card,
[data-theme="dark"] .ticket-detail-page .td-modal,
[data-theme="dark"] .ticket-detail-page .td-pending-item {
  background: #1a1d27;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .ticket-detail-page .td-panel-header,
[data-theme="dark"] .ticket-detail-page .td-info-card-header {
  background: #161926;
  border-bottom-color: #2a2d3a;
  color: #9ca3c4;
}

[data-theme="dark"] .ticket-detail-page .td-action-btn {
  color: #c8cad8;
}

[data-theme="dark"] .ticket-detail-page .td-action-btn:hover {
  border-color: #6366f1;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.12);
}

[data-theme="dark"] .ticket-detail-page .td-action-btn.primary {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .ticket-detail-page .td-action-btn.primary:hover {
  background: #6366f1;
  border-color: #6366f1;
}

[data-theme="dark"] .ticket-detail-page .td-chat {
  background: linear-gradient(180deg, #13151f 0%, #1a1d27 100%);
}

[data-theme="dark"] .ticket-detail-page .td-chat-empty {
  color: #9ca3c4;
}

[data-theme="dark"] .ticket-detail-page .td-msg.received .td-msg-bubble {
  background: #202433;
  color: #e8eaf0;
  border-color: #343a4f;
}

[data-theme="dark"] .ticket-detail-page .td-msg.sent .td-msg-bubble {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

[data-theme="dark"] .ticket-detail-page .td-msg.received.admin .td-msg-bubble {
  background: linear-gradient(135deg, #047857, #059669);
}

[data-theme="dark"] .ticket-detail-page .td-msg-internal {
  background: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}

[data-theme="dark"] .ticket-detail-page .td-input-section {
  background: #1a1d27;
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .ticket-detail-page .td-internal-check {
  color: #c8cad8;
}

[data-theme="dark"] .ticket-detail-page .td-input-row textarea,
[data-theme="dark"] .ticket-detail-page .td-modal-body select {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .ticket-detail-page .td-input-row textarea::placeholder {
  color: #6b7280;
}

[data-theme="dark"] .ticket-detail-page .td-btn-icon {
  background: #232635;
  border-color: #343a4f;
  color: #c8cad8;
}

[data-theme="dark"] .ticket-detail-page .td-btn-icon:hover:not(:disabled) {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #a5b4fc;
}

[data-theme="dark"] .ticket-detail-page .td-btn-send {
  background: #4f46e5;
}

[data-theme="dark"] .ticket-detail-page .td-btn-send:hover:not(:disabled) {
  background: #6366f1;
}

[data-theme="dark"] .ticket-detail-page .td-info-item {
  border-bottom-color: #232635;
}

[data-theme="dark"] .ticket-detail-page .td-order-stat {
  background: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .ticket-detail-page .td-order-link {
  color: #a5b4fc;
}

[data-theme="dark"] .ticket-detail-page .td-order-link:hover {
  color: #c7d2fe;
}

[data-theme="dark"] .ticket-detail-page .td-badge[style*="f1f5f9"] {
  background: #2a2d3a !important;
  color: #c8cad8 !important;
}

[data-theme="dark"] .ticket-detail-page .td-badge-priority {
  background: #1a1d27;
}

[data-theme="dark"] .ticket-detail-page .td-pending-name {
  color: #e8eaf0;
}

[data-theme="dark"] .ticket-detail-page .td-pending-status {
  color: #9ca3c4;
}

[data-theme="dark"] .ticket-detail-page .td-modal-overlay,
[data-theme="dark"] .td-modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .ticket-detail-page .td-modal,
[data-theme="dark"] .td-modal {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .ticket-detail-page .td-modal-close,
[data-theme="dark"] .td-modal-close {
  background: #232635;
  color: #9ca3c4;
}

[data-theme="dark"] .ticket-detail-page .td-modal-close:hover,
[data-theme="dark"] .td-modal-close:hover {
  background: #343a4f;
  color: #e8eaf0;
}

[data-theme="dark"] .ticket-detail-page .td-modal-title,
[data-theme="dark"] .td-modal-title {
  color: #f0f1f5;
}

[data-theme="dark"] .ticket-detail-page .td-modal-body label,
[data-theme="dark"] .td-modal-body label {
  color: #9ca3c4;
}

[data-theme="dark"] .ticket-detail-page .td-modal-body select,
[data-theme="dark"] .td-modal-body select {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .ticket-detail-page .td-modal-footer,
[data-theme="dark"] .td-modal-footer {
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .ticket-detail-page .td-modal-btn,
[data-theme="dark"] .td-modal-btn {
  background: #232635;
  border-color: #343a4f;
  color: #c8cad8;
}

[data-theme="dark"] .ticket-detail-page .td-modal-btn.primary,
[data-theme="dark"] .td-modal-btn.primary {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

[data-theme="dark"] .ticket-detail-page .td-error-msg {
  background: #3f1f25;
  border-color: #7f1d1d;
  color: #fca5a5;
}

[data-theme="dark"] .ticket-detail-page .td-attachment-link {
  border-color: rgba(255, 255, 255, 0.12);
}

.ticket-detail-page .td-category-badge {
  background: #f1f5f9;
  color: #64748b;
}

.ticket-detail-page .td-msg-count {
  font-size: 0.82rem;
  color: var(--td-muted);
  font-weight: 600;
}

[data-theme="dark"] .ticket-detail-page .td-category-badge {
  background: #2a2d3a;
  color: #c8cad8;
}

[data-theme="dark"] .ticket-detail-page .td-msg-count {
  color: #9ca3c4;
}

@media (max-width: 768px) {
  .ticket-detail-page .td-hero {
    flex-direction: column;
  }

  .ticket-detail-page .td-msg-bubble {
    max-width: 92%;
  }

  .ticket-detail-page .td-input-row {
    flex-wrap: wrap;
  }

  .ticket-detail-page .td-input-row textarea {
    width: 100%;
  }

  .ticket-detail-page .td-chat {
    min-height: 300px;
    height: 420px;
  }
}

/* Admin Tickets — full-width modern desk */
.admin-tickets {
  --at-primary: #6366f1;
  --at-primary-hover: #4f46e5;
  --at-primary-light: rgba(99, 102, 241, 0.1);
  --at-accent: #8b5cf6;
  --at-success: #10b981;
  --at-warning: #f59e0b;
  --at-danger: #ef4444;
  --at-muted: #64748b;
  --at-border: #e2e8f0;
  --at-bg: #f0f0fa;
  --at-panel: #ffffff;
  --at-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --at-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
  --at-radius: 16px;
  --at-radius-sm: 10px;
  --at-transition: 0.18s ease;
  min-height: 100vh;
}

.admin-tickets .at-sidebar-menu {
  border-right: 1px solid var(--at-border);
}

.admin-tickets .at-layout {
  background: var(--at-bg);
  min-height: 100vh;
}

.admin-tickets .at-header-bar {
  background: #fff;
  box-shadow: var(--at-shadow);
  border-bottom: 1px solid var(--at-border);
}

.admin-tickets .at-shell {
  width: 100%;
  max-width: none;
  padding: 20px 16px 32px;
}

@media (min-width: 768px) {
  .admin-tickets .at-shell {
    padding: 24px 28px 40px;
  }
}

@media (min-width: 1200px) {
  .admin-tickets .at-shell {
    padding: 28px 36px 48px;
  }
}

/* Hero */
.admin-tickets .at-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-tickets .at-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--at-primary-light);
  color: var(--at-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.admin-tickets .at-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
  line-height: 1.15;
}

.admin-tickets .at-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--at-muted);
  max-width: 640px;
  line-height: 1.5;
}

.admin-tickets .at-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  background: #fff;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--at-transition);
  flex-shrink: 0;
}

.admin-tickets .at-refresh-btn:hover:not(:disabled) {
  border-color: var(--at-primary);
  color: var(--at-primary);
  background: var(--at-primary-light);
}

.admin-tickets .at-refresh-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.admin-tickets .at-spin {
  animation: atSpin 0.8s linear infinite;
}

@keyframes atSpin {
  to { transform: rotate(360deg); }
}

/* Stats */
.admin-tickets .at-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .admin-tickets .at-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.admin-tickets .at-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--at-panel);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius);
  box-shadow: var(--at-shadow);
}

.admin-tickets .at-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.admin-tickets .at-stat-total .at-stat-icon { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.admin-tickets .at-stat-open .at-stat-icon { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.admin-tickets .at-stat-progress .at-stat-icon { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.admin-tickets .at-stat-resolved .at-stat-icon { background: rgba(16, 185, 129, 0.12); color: #10b981; }

.admin-tickets .at-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}

.admin-tickets .at-stat-label {
  font-size: 0.75rem;
  color: var(--at-muted);
  margin-top: 2px;
}

/* Main panel */
.admin-tickets .at-panel {
  background: var(--at-panel);
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius);
  box-shadow: var(--at-shadow-lg);
  overflow: hidden;
}

.admin-tickets .at-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--at-border);
  background: linear-gradient(180deg, #fafbff 0%, #fff 100%);
}

.admin-tickets .at-search-wrap {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
}

.admin-tickets .at-search-wrap input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  font-size: 0.9rem;
  background: #fff;
  transition: border-color var(--at-transition), box-shadow var(--at-transition);
}

.admin-tickets .at-search-wrap input:focus {
  outline: none;
  border-color: var(--at-primary);
  box-shadow: 0 0 0 3px var(--at-primary-light);
}

.admin-tickets .at-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--at-muted);
  pointer-events: none;
}

.admin-tickets .at-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-tickets .at-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  background: #fff;
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--at-transition);
}

.admin-tickets .at-tool-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.admin-tickets .at-tool-btn.active {
  border-color: var(--at-primary);
  color: var(--at-primary);
  background: var(--at-primary-light);
}

.admin-tickets .at-tool-btn-accent {
  border-color: rgba(139, 92, 246, 0.35);
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.06);
}

.admin-tickets .at-tool-btn-accent:hover {
  background: rgba(139, 92, 246, 0.12);
}

.admin-tickets .at-tool-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--at-muted);
}

.admin-tickets .at-filter-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--at-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-tickets .at-chevron {
  transition: transform var(--at-transition);
  font-size: 0.7rem;
}

.admin-tickets .at-chevron.expanded {
  transform: rotate(180deg);
}

/* Filter pills */
.admin-tickets .at-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--at-border);
  background: #fafbfc;
}

.admin-tickets .at-pill {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--at-border);
  background: #fff;
  color: var(--at-muted);
  transition: all var(--at-transition);
}

.admin-tickets .at-pill:hover {
  border-color: var(--at-primary);
  color: var(--at-primary);
}

.admin-tickets .at-pill.active {
  background: var(--at-primary);
  border-color: var(--at-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* Advanced filters */
.admin-tickets .at-advanced-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 16px 18px 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--at-border);
}

.admin-tickets .at-field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--at-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.admin-tickets .at-field input,
.admin-tickets .at-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--at-border);
  border-radius: 8px;
  font-size: 0.875rem;
  background: #fff;
}

.admin-tickets .at-field input:focus,
.admin-tickets .at-field select:focus {
  outline: none;
  border-color: var(--at-primary);
}

/* Table */
.admin-tickets .at-table-wrap {
  overflow-x: auto;
}

.admin-tickets .at-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-tickets .at-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--at-muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--at-border);
  white-space: nowrap;
}

.admin-tickets .at-table tbody tr {
  cursor: pointer;
  transition: background var(--at-transition);
  border-bottom: 1px solid #f1f5f9;
}

.admin-tickets .at-table tbody tr:hover {
  background: #f8fafc;
}

.admin-tickets .at-table tbody tr.at-row-unread {
  background: rgba(99, 102, 241, 0.04);
}

.admin-tickets .at-table tbody tr.at-row-unread:hover {
  background: rgba(99, 102, 241, 0.08);
}

.admin-tickets .at-table tbody tr.at-row-closed {
  opacity: 0.72;
}

.admin-tickets .at-table tbody tr.at-row-closed:hover {
  opacity: 0.85;
}

.admin-tickets .at-status-select {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--at-border);
  border-radius: 999px;
  padding: 5px 28px 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%2364748b%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 10px center;
  min-width: 120px;
  transition: border-color var(--at-transition), box-shadow var(--at-transition);
}

.admin-tickets .at-status-select:hover:not(:disabled) {
  border-color: var(--at-primary);
}

.admin-tickets .at-status-select:focus {
  outline: none;
  border-color: var(--at-primary);
  box-shadow: 0 0 0 3px var(--at-primary-light);
}

.admin-tickets .at-status-select:disabled {
  opacity: 0.6;
  cursor: wait;
}

.admin-tickets .at-table td {
  padding: 14px 16px;
  vertical-align: middle;
  color: #334155;
}

.admin-tickets .at-cell-id {
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  font-size: 0.8rem;
}

.admin-tickets .at-cell-title {
  min-width: 220px;
  max-width: 420px;
}

.admin-tickets .at-title-main {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.35;
}

.admin-tickets .at-title-preview {
  font-size: 0.8rem;
  color: var(--at-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-tickets .at-category-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 600;
}

.admin-tickets .at-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-tickets .at-badge-status {
  color: #fff;
}

.admin-tickets .at-badge-priority {
  background: #fff;
  border: 1px solid currentColor;
}

.admin-tickets .at-user-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-tickets .at-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-tickets .at-time-cell span {
  display: block;
  font-weight: 600;
  color: #334155;
}

.admin-tickets .at-time-cell small {
  display: block;
  color: var(--at-muted);
  font-size: 0.72rem;
  margin-top: 2px;
}

.admin-tickets .at-cell-action {
  color: #cbd5e1;
  width: 32px;
  text-align: center;
}

.admin-tickets .at-table tbody tr:hover .at-cell-action {
  color: var(--at-primary);
}

/* Mobile cards */
.admin-tickets .at-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.admin-tickets .at-ticket-card {
  border: 1px solid var(--at-border);
  border-radius: var(--at-radius-sm);
  padding: 14px 16px;
  background: #fff;
  cursor: pointer;
  transition: all var(--at-transition);
}

.admin-tickets .at-ticket-card:hover {
  border-color: var(--at-primary);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
}

.admin-tickets .at-ticket-card.at-row-unread {
  border-left: 3px solid var(--at-primary);
}

.admin-tickets .at-ticket-card.at-row-closed {
  opacity: 0.75;
}

.admin-tickets .at-ticket-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-tickets .at-ticket-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-tickets .at-ticket-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}

.admin-tickets .at-ticket-preview {
  font-size: 0.82rem;
  color: var(--at-muted);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.admin-tickets .at-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 0.75rem;
  color: var(--at-muted);
}

.admin-tickets .at-ticket-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* States */
.admin-tickets .at-loading {
  padding: 48px 20px;
  text-align: center;
}

.admin-tickets .at-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--at-muted);
}

.admin-tickets .at-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.45;
}

.admin-tickets .at-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.admin-tickets .at-error {
  margin: 16px 18px 0;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--at-radius-sm);
  color: #b91c1c;
  font-size: 0.875rem;
}

/* Pagination */
.admin-tickets .at-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid var(--at-border);
  background: #fafbfc;
}

.admin-tickets .at-pagination-info {
  font-size: 0.8125rem;
  color: var(--at-muted);
}

.admin-tickets .at-pagination-btns {
  display: flex;
  gap: 8px;
}

.admin-tickets .at-pagination-btns button {
  padding: 8px 16px;
  border: 1px solid var(--at-border);
  border-radius: 8px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all var(--at-transition);
}

.admin-tickets .at-pagination-btns button:hover:not(:disabled) {
  border-color: var(--at-primary);
  color: var(--at-primary);
  background: var(--at-primary-light);
}

.admin-tickets .at-pagination-btns button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Dark theme */
[data-theme="dark"] .admin-tickets {
  --at-bg: #0f1117;
  --at-panel: #1a1d27;
  --at-border: #2a2d3a;
  --at-muted: #9ca3c4;
}

[data-theme="dark"] .admin-tickets .at-header-bar {
  background: #1a1d27;
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .admin-tickets .at-title,
[data-theme="dark"] .admin-tickets .at-stat-value,
[data-theme="dark"] .admin-tickets .at-title-main,
[data-theme="dark"] .admin-tickets .at-ticket-title {
  color: #f0f1f5;
}

[data-theme="dark"] .admin-tickets .at-stat-card,
[data-theme="dark"] .admin-tickets .at-panel,
[data-theme="dark"] .admin-tickets .at-refresh-btn,
[data-theme="dark"] .admin-tickets .at-tool-btn,
[data-theme="dark"] .admin-tickets .at-pill,
[data-theme="dark"] .admin-tickets .at-ticket-card {
  background: #1a1d27;
  border-color: #2a2d3a;
}

[data-theme="dark"] .admin-tickets .at-toolbar,
[data-theme="dark"] .admin-tickets .at-filters,
[data-theme="dark"] .admin-tickets .at-pagination,
[data-theme="dark"] .admin-tickets .at-advanced-filters {
  background: #161926;
}

[data-theme="dark"] .admin-tickets .at-search-wrap input,
[data-theme="dark"] .admin-tickets .at-field input,
[data-theme="dark"] .admin-tickets .at-field select {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-tickets .at-table thead th {
  background: #161926;
}

[data-theme="dark"] .admin-tickets .at-table tbody tr:hover {
  background: #202433;
}

[data-theme="dark"] .admin-tickets .at-table td {
  color: #c8cad8;
}

[data-theme="dark"] .admin-tickets .at-table tbody tr {
  border-bottom-color: #2a2d3a;
}

[data-theme="dark"] .admin-tickets .at-category-tag {
  background: #2a2d3a;
  color: #c8cad8;
}

[data-theme="dark"] .admin-tickets .at-badge-priority {
  background: #1a1d27;
}

[data-theme="dark"] .admin-tickets .at-status-select {
  background-color: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-tickets .at-error {
  background: #3f1f25;
  border-color: #7f1d1d;
  color: #fca5a5;
}

@media (max-width: 767px) {
  .admin-tickets .at-hero {
    flex-direction: column;
  }

  .admin-tickets .at-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-tickets .at-toolbar-actions {
    width: 100%;
  }

  .admin-tickets .at-tool-btn {
    flex: 1;
    justify-content: center;
  }
}

/* Create Ticket page dark theme */

[data-theme="dark"] .create-ticket-page {
  background: #0f1117 !important;
}

[data-theme="dark"] .create-ticket-page .menures > div[name="mainmenu"] {
  border-right-color: #2a2d3a !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-main-wrap,
[data-theme="dark"] .create-ticket-page .create-ticket-content-wrap {
  background: #0f1117 !important;
}

[data-theme="dark"] .create-ticket-page #header {
  background: #1a1d27 !important;
  border-bottom: 1px solid #2a2d3a;
}

[data-theme="dark"] .create-ticket-page .create-ticket-card-shell {
  background: #1a1d27 !important;
  border: 1px solid #2a2d3a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-gradient-header {
  background: linear-gradient(135deg, #ff8306 0%, #0f1117 100%) !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body {
  background: #161926 !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body label,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body h3,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body p,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body span,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body div {
  color: #e8eaf0;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body input,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body textarea,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body select {
  background: #13151f !important;
  border-color: #2a2d3a !important;
  color: #e8eaf0 !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body input::placeholder,
[data-theme="dark"] .create-ticket-page .create-ticket-form-body textarea::placeholder {
  color: #8b8fa8 !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23c4c8d4%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 12px !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body [style*='borderTop'] {
  border-top-color: #2a2d3a !important;
}

[data-theme="dark"] .create-ticket-page .create-ticket-form-body button[type="button"] {
  background: #1a1d27 !important;
  border-color: #3d4154 !important;
  color: #c4c8d4 !important;
}

/* Listyboom Başvuruları — GIGI tema uyumu (#ff8306) */

.listyboom-page {
  --lb-primary: var(--nav-primary, #ff8306);
  --lb-primary-hover: var(--nav-primary-hover, #e07000);
  --lb-primary-light: var(--nav-primary-light, rgba(255, 131, 6, 0.09));
  --lb-text: var(--nav-text, #111827);
  --lb-text-muted: var(--nav-text-muted, #6b7280);
  --lb-border: var(--nav-border, #e8eaed);
  --lb-bg: var(--content-bg, #eef0fa);
  --lb-card: #ffffff;
  --lb-radius: 16px;
  --lb-radius-sm: 10px;
  --lb-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --lb-shadow-hover: 0 8px 24px rgba(255, 131, 6, 0.12);
  --lb-transition: 0.2s ease;
}

.listyboom-page .lb-main-area {
  background: var(--lb-bg);
  flex: 1;
  min-width: 0;
  transition: background var(--lb-transition);
}

.listyboom-page .lb-content-strip {
  background: var(--lb-bg);
  padding: 1.25rem 1rem 2rem;
}

@media (min-width: 768px) {
  .listyboom-page .lb-content-strip {
    padding: 1.5rem 1.5rem 2.5rem;
  }
}

.listyboom-page .lb-shell {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Hero header */
.listyboom-page .lb-hero {
  background: var(--lb-card);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1rem;
  box-shadow: var(--lb-shadow);
  position: relative;
  overflow: hidden;
}

.listyboom-page .lb-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lb-primary), #ffb347);
}

.listyboom-page .lb-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.listyboom-page .lb-hero-title-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.listyboom-page .lb-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--lb-primary-light);
  color: var(--lb-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.listyboom-page .lb-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--lb-text);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.listyboom-page .lb-subtitle {
  font-size: 0.875rem;
  color: var(--lb-text-muted);
  margin: 0.25rem 0 0;
}

.listyboom-page .lb-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 340px;
}

.listyboom-page .lb-search-wrap input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  font-size: 0.875rem;
  background: var(--lb-bg);
  color: var(--lb-text);
  transition: border-color var(--lb-transition), box-shadow var(--lb-transition);
}

.listyboom-page .lb-search-wrap input:focus {
  outline: none;
  border-color: var(--lb-primary);
  box-shadow: 0 0 0 3px var(--lb-primary-light);
}

.listyboom-page .lb-search-wrap input::placeholder {
  color: var(--lb-text-muted);
}

.listyboom-page .lb-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--lb-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

/* Stats */
.listyboom-page .lb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.listyboom-page .lb-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--lb-bg);
  border: 1px solid var(--lb-border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--lb-text-muted);
}

.listyboom-page .lb-stat strong {
  color: var(--lb-text);
  font-weight: 600;
}

.listyboom-page .lb-stat--accent {
  background: var(--lb-primary-light);
  border-color: rgba(255, 131, 6, 0.25);
  color: var(--lb-primary);
}

.listyboom-page .lb-stat--accent strong {
  color: var(--lb-primary);
}

/* Filters */
.listyboom-page .lb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.listyboom-page .lb-pill {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--lb-border);
  background: var(--lb-card);
  color: var(--lb-text-muted);
  transition: all var(--lb-transition);
}

.listyboom-page .lb-pill:hover {
  border-color: var(--lb-primary);
  color: var(--lb-primary);
  background: var(--lb-primary-light);
}

.listyboom-page .lb-pill.active {
  background: var(--lb-primary);
  border-color: var(--lb-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 131, 6, 0.35);
}

/* List card container */
.listyboom-page .lb-list-card {
  background: var(--lb-card);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  padding: 1rem;
  box-shadow: var(--lb-shadow);
}

.listyboom-page .lb-app-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.listyboom-page .lb-app-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-bg);
  cursor: pointer;
  transition: all var(--lb-transition);
}

.listyboom-page .lb-app-item:hover {
  border-color: rgba(255, 131, 6, 0.45);
  box-shadow: var(--lb-shadow-hover);
  transform: translateY(-1px);
}

.listyboom-page .lb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--lb-primary), #ffb347);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.listyboom-page .lb-app-body {
  flex: 1;
  min-width: 0;
}

.listyboom-page .lb-app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.listyboom-page .lb-app-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lb-text);
  margin: 0;
  line-height: 1.3;
}

.listyboom-page .lb-app-item:hover .lb-app-name {
  color: var(--lb-primary);
}

.listyboom-page .lb-badge {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.listyboom-page .lb-app-contact {
  font-size: 0.82rem;
  color: var(--lb-text-muted);
  margin-bottom: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.listyboom-page .lb-link {
  color: var(--lb-primary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--lb-transition);
}

.listyboom-page .lb-link:hover {
  color: var(--lb-primary-hover);
  text-decoration: underline;
}

.listyboom-page .lb-sep {
  color: var(--lb-border);
}

.listyboom-page .lb-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.listyboom-page .lb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  background: var(--lb-card);
  border: 1px solid var(--lb-border);
  color: var(--lb-text-muted);
}

.listyboom-page .lb-chip svg {
  font-size: 0.65rem;
  color: var(--lb-primary);
}

/* Empty / error / pagination */
.listyboom-page .lb-empty {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--lb-text-muted);
}

.listyboom-page .lb-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.875rem;
  opacity: 0.45;
  color: var(--lb-primary);
}

.listyboom-page .lb-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--lb-text);
  margin-bottom: 0.35rem;
}

.listyboom-page .lb-error {
  padding: 0.875rem 1rem;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--lb-radius-sm);
  color: #dc2626;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.listyboom-page .lb-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lb-border);
}

.listyboom-page .lb-pagination-info {
  font-size: 0.82rem;
  color: var(--lb-text-muted);
}

.listyboom-page .lb-pagination-btns {
  display: flex;
  gap: 0.5rem;
}

.listyboom-page .lb-pagination-btns button {
  padding: 0.45rem 1rem;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-card);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--lb-text);
  cursor: pointer;
  transition: all var(--lb-transition);
}

.listyboom-page .lb-pagination-btns button:hover:not(:disabled) {
  border-color: var(--lb-primary);
  color: var(--lb-primary);
  background: var(--lb-primary-light);
}

.listyboom-page .lb-pagination-btns button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Modal */
.listyboom-page .lb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.listyboom-page .lb-modal {
  background: var(--lb-card);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.listyboom-page .lb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--lb-border);
  background: var(--lb-bg);
}

.listyboom-page .lb-modal-header h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lb-text);
}

.listyboom-page .lb-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--lb-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--lb-transition);
}

.listyboom-page .lb-modal-close:hover {
  background: var(--lb-primary-light);
  color: var(--lb-primary);
}

.listyboom-page .lb-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.listyboom-page .lb-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--lb-border);
  background: var(--lb-bg);
}

.listyboom-page .lb-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.25rem;
}

.listyboom-page .lb-detail-grid .lb-field-full {
  grid-column: 1 / -1;
}

.listyboom-page .lb-field-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lb-text-muted);
  margin-bottom: 0.25rem;
}

.listyboom-page .lb-field-value {
  font-size: 0.875rem;
  color: var(--lb-text);
  line-height: 1.45;
}

.listyboom-page .lb-problem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.listyboom-page .lb-problem-tag {
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  background: var(--lb-primary-light);
  border: 1px solid rgba(255, 131, 6, 0.2);
  color: var(--lb-primary);
}

.listyboom-page .lb-modal-divider {
  border: none;
  border-top: 1px solid var(--lb-border);
  margin: 1.25rem 0;
}

.listyboom-page .lb-btn-primary {
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--lb-radius-sm);
  background: var(--lb-primary);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--lb-transition);
}

.listyboom-page .lb-btn-primary:hover:not(:disabled) {
  background: var(--lb-primary-hover);
}

.listyboom-page .lb-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.listyboom-page .lb-btn-secondary {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  background: var(--lb-card);
  color: var(--lb-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--lb-transition);
}

.listyboom-page .lb-btn-secondary:hover {
  border-color: var(--lb-text-muted);
}

.listyboom-page .lb-form-select,
.listyboom-page .lb-form-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  font-size: 0.875rem;
  background: var(--lb-bg);
  color: var(--lb-text);
  transition: border-color var(--lb-transition);
}

.listyboom-page .lb-form-select:focus,
.listyboom-page .lb-form-textarea:focus {
  outline: none;
  border-color: var(--lb-primary);
  box-shadow: 0 0 0 3px var(--lb-primary-light);
}

/* Dark mode */
[data-theme="dark"] .listyboom-page {
  --lb-card: #1a1d27;
  --lb-bg: #13151f;
  --lb-text: #e8eaf0;
  --lb-text-muted: #9aa3c2;
  --lb-border: #2a2d3a;
}

[data-theme="dark"] .listyboom-page .lb-hero,
[data-theme="dark"] .listyboom-page .lb-list-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .listyboom-page .lb-app-item {
  background: #13151f;
}

[data-theme="dark"] .listyboom-page .lb-app-item:hover {
  background: rgba(255, 131, 6, 0.04);
}

[data-theme="dark"] .listyboom-page .lb-chip {
  background: #232635;
}

[data-theme="dark"] .listyboom-page .lb-error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

[data-theme="dark"] .listyboom-page .lb-modal {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

@media (max-width: 576px) {
  .listyboom-page .lb-hero-top {
    flex-direction: column;
  }

  .listyboom-page .lb-search-wrap {
    max-width: none;
  }

  .listyboom-page .lb-app-head {
    flex-direction: column;
    gap: 0.4rem;
  }

  .listyboom-page .lb-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin Logs — GIGI layout + tema uyumu */

.admin-logs-page {
  --al-primary: var(--nav-primary, #ff8306);
  --al-primary-hover: var(--nav-primary-hover, #e07000);
  --al-primary-light: var(--nav-primary-light, rgba(255, 131, 6, 0.09));
  --al-text: var(--nav-text, #111827);
  --al-text-muted: var(--nav-text-muted, #6b7280);
  --al-border: var(--nav-border, #e8eaed);
  --al-bg: var(--content-bg, #eef0fa);
  --al-card: #ffffff;
  --al-surface: #f8fafc;
  --al-radius: 12px;
  --al-radius-sm: 8px;
  --al-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --al-transition: 0.2s ease;
}

.admin-logs-page .al-main-area {
  background: var(--al-bg);
  flex: 1;
  min-width: 0;
  transition: background var(--al-transition);
}

.admin-logs-page .al-content-strip {
  background: var(--al-bg);
  padding: 1.25rem 1rem 2rem;
}

@media (min-width: 768px) {
  .admin-logs-page .al-content-strip {
    padding: 1.5rem 1.5rem 2.5rem;
  }
}

.admin-logs-page .al-shell {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.admin-logs-page .al-card {
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--al-shadow);
  color: var(--al-text);
}

.admin-logs-page .al-header {
  margin-bottom: 1.25rem;
}

.admin-logs-page .al-title-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.admin-logs-page .al-title-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--al-primary-light);
  color: var(--al-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.admin-logs-page .al-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--al-text);
  letter-spacing: -0.02em;
}

.admin-logs-page .al-subtitle {
  color: var(--al-text-muted);
  font-size: 0.875rem;
  margin: 4px 0 0;
}

.admin-logs-page .al-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.admin-logs-page .al-stat-card {
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-sm);
  padding: 14px 16px;
}

.admin-logs-page .al-stat-label {
  font-size: 0.75rem;
  color: var(--al-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-logs-page .al-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--al-text);
  margin-top: 4px;
}

.admin-logs-page .al-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-logs-page .al-tab {
  padding: 8px 16px;
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-sm);
  background: var(--al-surface);
  color: var(--al-text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all var(--al-transition);
}

.admin-logs-page .al-tab:hover {
  border-color: var(--al-primary);
  color: var(--al-primary);
}

.admin-logs-page .al-tab.active {
  background: var(--al-primary);
  color: #fff;
  border-color: var(--al-primary);
}

.admin-logs-page .al-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--al-surface);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-sm);
}

.admin-logs-page .al-filters input,
.admin-logs-page .al-filters select {
  padding: 8px 10px;
  border: 1px solid var(--al-border);
  border-radius: 6px;
  font-size: 0.85rem;
  min-width: 140px;
  background: var(--al-card);
  color: var(--al-text);
}

.admin-logs-page .al-filters input::placeholder {
  color: var(--al-text-muted);
}

.admin-logs-page .al-filters input:focus,
.admin-logs-page .al-filters select:focus {
  outline: none;
  border-color: var(--al-primary);
  box-shadow: 0 0 0 3px var(--al-primary-light);
}

.admin-logs-page .al-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-logs-page .al-btn-primary {
  background: var(--al-primary);
  color: #fff;
}

.admin-logs-page .al-btn-primary:hover {
  background: var(--al-primary-hover);
}

.admin-logs-page .al-btn-ghost {
  background: var(--al-card);
  border: 1px solid var(--al-border);
  color: var(--al-text);
}

.admin-logs-page .al-btn-ghost:hover:not(:disabled) {
  border-color: var(--al-primary);
  color: var(--al-primary);
}

.admin-logs-page .al-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-logs-page .al-table-wrap {
  background: var(--al-card);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-sm);
  overflow: auto;
}

.admin-logs-page .al-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-logs-page .al-data-table th,
.admin-logs-page .al-data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--al-border);
  color: var(--al-text);
}

.admin-logs-page .al-data-table th {
  background: var(--al-surface);
  font-weight: 600;
  color: var(--al-text-muted);
  white-space: nowrap;
}

.admin-logs-page .al-data-table tbody tr:nth-child(even) td {
  background: var(--al-surface);
}

.admin-logs-page .al-data-table tbody tr:hover td {
  background: var(--al-primary-light);
  cursor: pointer;
}

.admin-logs-page .al-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.admin-logs-page .al-badge-success { background: #d1fae5; color: #065f46; }
.admin-logs-page .al-badge-warning { background: #fef3c7; color: #92400e; }
.admin-logs-page .al-badge-danger { background: #fee2e2; color: #991b1b; }
.admin-logs-page .al-badge-muted { background: #f1f5f9; color: #475569; }

.admin-logs-page .al-user { font-weight: 500; color: var(--al-text); }
.admin-logs-page .al-user-anon { color: var(--al-text-muted); font-style: italic; }
.admin-logs-page .al-link { color: var(--al-primary); cursor: pointer; text-decoration: underline; font-size: 0.8rem; }

.admin-logs-page .al-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--al-text-muted);
}

/* Drawer & modal (rendered outside page shell) */
.al-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1050;
}

.al-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(560px, 100vw);
  height: 100vh;
  background: var(--al-drawer-bg, #fff);
  color: var(--al-drawer-text, #111827);
  z-index: 1051;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  padding: 20px;
}

.al-drawer h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--al-drawer-text, #111827); }

.al-actor {
  background: var(--al-actor-bg, #eef2ff);
  border: 1px solid var(--al-actor-border, #c7d2fe);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--al-drawer-text, #111827);
}

.al-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.8rem;
}

.al-meta-grid div {
  background: var(--al-meta-bg, #f8fafc);
  padding: 8px;
  border-radius: 6px;
  color: var(--al-drawer-text, #111827);
}

.al-meta-label { color: var(--al-text-muted, #64748b); font-size: 0.7rem; text-transform: uppercase; }

.al-pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.al-section-title { font-weight: 600; margin: 14px 0 6px; font-size: 0.85rem; color: var(--al-drawer-text, #334155); }

.al-correlation-modal {
  position: fixed;
  inset: 5%;
  background: var(--al-drawer-bg, #fff);
  color: var(--al-drawer-text, #111827);
  z-index: 1060;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  overflow: auto;
  padding: 20px;
}

.al-timeline-item {
  border-left: 3px solid var(--al-border, #e2e8f0);
  padding: 8px 0 8px 14px;
  margin-bottom: 8px;
  color: var(--al-drawer-text, #111827);
}

/* Dark mode */
[data-theme="dark"] .admin-logs-page {
  --al-card: #1a1d27;
  --al-surface: #13151f;
  --al-text: #e8eaf0;
  --al-text-muted: #9aa3c2;
  --al-border: #2a2d3a;
  --al-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .admin-logs-page .al-card {
  box-shadow: var(--al-shadow);
}

[data-theme="dark"] .admin-logs-page .al-data-table th,
[data-theme="dark"] .admin-logs-page .al-data-table td {
  color: #e8eaf0;
}

[data-theme="dark"] .admin-logs-page .al-data-table tbody tr:nth-child(even) td {
  background: #13151f;
}

[data-theme="dark"] .admin-logs-page .al-data-table tbody tr:hover td {
  background: rgba(255, 131, 6, 0.06);
}

[data-theme="dark"] .admin-logs-page .al-badge-success { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
[data-theme="dark"] .admin-logs-page .al-badge-warning { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
[data-theme="dark"] .admin-logs-page .al-badge-danger { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
[data-theme="dark"] .admin-logs-page .al-badge-muted { background: #232635; color: #9aa3c2; }

[data-theme="dark"] {
  --al-drawer-bg: #1a1d27;
  --al-drawer-text: #e8eaf0;
  --al-actor-bg: rgba(255, 131, 6, 0.1);
  --al-actor-border: rgba(255, 131, 6, 0.25);
  --al-meta-bg: #13151f;
  --al-border: #2a2d3a;
}

[data-theme="dark"] .al-correlation-modal {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

@media (max-width: 768px) {
  .admin-logs-page .al-card {
    padding: 1rem;
  }

  .admin-logs-page .al-filters input,
  .admin-logs-page .al-filters select {
    min-width: 100%;
    flex: 1 1 100%;
  }

  .admin-logs-page .al-pagination {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
}

/* Admin Telegram — tema uyumlu (AdminLogs ile aynı token mantığı) */

.admin-telegram-page {
  --tg-primary: var(--nav-primary, #ff8306);
  --tg-primary-light: rgba(255, 131, 6, 0.1);
  --tg-text: var(--nav-text, #111827);
  --tg-text-muted: var(--nav-text-muted, #6b7280);
  --tg-border: var(--nav-border, #e8eaed);
  --tg-bg: var(--content-bg, #eef0fa);
  --tg-card: #ffffff;
  --tg-radius: 12px;
  --tg-blue: #229ed9;
  --tg-green: #059669;
  --tg-red: #dc2626;
  --tg-amber: #d97706;
}

.admin-telegram-page .tg-main-area {
  background: var(--tg-bg);
  flex: 1;
  min-width: 0;
}

.admin-telegram-page .tg-content-strip {
  padding: 1.25rem 1rem 2.5rem;
}

.admin-telegram-page .tg-shell {
  max-width: 1400px;
  margin: 0 auto;
}

.admin-telegram-page .tg-card {
  background: var(--tg-card);
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: var(--tg-text);
}

.admin-telegram-page .tg-header-card {
  padding: 1.5rem;
}

.admin-telegram-page .tg-title-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.admin-telegram-page .tg-title-row > div:nth-child(2) {
  flex: 1;
  min-width: 200px;
}

.admin-telegram-page .tg-title-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(34, 158, 217, 0.15);
  color: var(--tg-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.admin-telegram-page .tg-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--tg-text);
}

.admin-telegram-page .tg-subtitle {
  margin: 0.25rem 0 0;
  color: var(--tg-text-muted);
  font-size: 0.9rem;
}

.admin-telegram-page .tg-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 1rem;
}

@media (max-width: 992px) {
  .admin-telegram-page .tg-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-telegram-page .tg-stats-grid {
    grid-template-columns: 1fr;
  }
}

.admin-telegram-page .tg-stat-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--tg-border);
  background: #f8fafc;
}

.admin-telegram-page .tg-stat-card--blue { border-color: rgba(34, 158, 217, 0.35); background: rgba(34, 158, 217, 0.08); }
.admin-telegram-page .tg-stat-card--green { border-color: rgba(5, 150, 105, 0.35); background: rgba(5, 150, 105, 0.08); }
.admin-telegram-page .tg-stat-card--red { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.08); }
.admin-telegram-page .tg-stat-card--amber { border-color: rgba(217, 119, 6, 0.35); background: rgba(217, 119, 6, 0.08); }

.admin-telegram-page .tg-stat-icon {
  font-size: 1.25rem;
  opacity: 0.9;
}

.admin-telegram-page .tg-stat-label {
  display: block;
  font-size: 0.75rem;
  color: var(--tg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-telegram-page .tg-stat-value {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--tg-text);
}

.admin-telegram-page .tg-stat-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--tg-text-muted);
  margin-top: 2px;
}

.admin-telegram-page .tg-feature-flags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-telegram-page .tg-flag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--tg-border);
}

.admin-telegram-page .tg-flag.on {
  background: rgba(5, 150, 105, 0.12);
  color: var(--tg-green);
  border-color: rgba(5, 150, 105, 0.35);
}

.admin-telegram-page .tg-flag.off {
  background: rgba(107, 114, 128, 0.12);
  color: var(--tg-text-muted);
}

.admin-telegram-page .tg-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.admin-telegram-page .tg-tabs button {
  border: 1px solid var(--tg-border);
  background: var(--tg-card);
  color: var(--tg-text-muted);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-telegram-page .tg-tabs button.active {
  background: var(--tg-primary-light);
  border-color: rgba(255, 131, 6, 0.45);
  color: var(--tg-primary);
}

.admin-telegram-page .tg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 1rem;
}

.admin-telegram-page .tg-input,
.admin-telegram-page .tg-select,
.admin-telegram-page .tg-textarea {
  border: 1px solid var(--tg-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  background: #fff;
  color: var(--tg-text);
  min-width: 160px;
}

.admin-telegram-page .tg-textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
}

.admin-telegram-page .tg-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--tg-text);
  margin: 0;
}

.admin-telegram-page .tg-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.admin-telegram-page .tg-btn--primary {
  background: var(--tg-primary);
  color: #fff;
}

.admin-telegram-page .tg-btn--primary:hover:not(:disabled) {
  filter: brightness(0.95);
}

.admin-telegram-page .tg-btn--outline {
  background: transparent;
  border: 1px solid var(--tg-border);
  color: var(--tg-text);
}

.admin-telegram-page .tg-btn--ghost {
  background: transparent;
  color: var(--tg-text-muted);
  margin-left: auto;
}

.admin-telegram-page .tg-btn--sm {
  padding: 4px 10px;
  font-size: 0.78rem;
}

.admin-telegram-page .tg-btn--lg {
  padding: 10px 18px;
}

.admin-telegram-page .tg-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-telegram-page .tg-table-wrap {
  overflow-x: auto;
}

.admin-telegram-page .tg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-telegram-page .tg-table th,
.admin-telegram-page .tg-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--tg-border);
  color: var(--tg-text);
  vertical-align: top;
}

.admin-telegram-page .tg-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tg-text-muted);
  background: #f8fafc;
}

.admin-telegram-page .tg-table tbody tr:hover td {
  background: rgba(255, 131, 6, 0.04);
}

.admin-telegram-page .tg-user-cell strong {
  display: block;
  color: var(--tg-text);
}

.admin-telegram-page .tg-user-cell span {
  display: block;
  font-size: 0.78rem;
  color: var(--tg-text-muted);
}

.admin-telegram-page .tg-code {
  font-size: 0.78rem;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--tg-text);
}

.admin-telegram-page .tg-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-telegram-page .tg-badge--success { background: rgba(5, 150, 105, 0.15); color: var(--tg-green); }
.admin-telegram-page .tg-badge--danger { background: rgba(220, 38, 38, 0.15); color: var(--tg-red); }
.admin-telegram-page .tg-badge--warning { background: rgba(217, 119, 6, 0.15); color: var(--tg-amber); }
.admin-telegram-page .tg-badge--info { background: rgba(34, 158, 217, 0.15); color: var(--tg-blue); }
.admin-telegram-page .tg-badge--muted { background: #f1f5f9; color: var(--tg-text-muted); }

.admin-telegram-page .tg-channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin-telegram-page .tg-badge--channel-inapp {
  background: rgba(99, 102, 241, 0.15);
  color: #4f46e5;
}

.admin-telegram-page .tg-badge--channel-telegram {
  background: rgba(34, 158, 217, 0.15);
  color: var(--tg-blue);
}

.admin-telegram-page .tg-badge--channel-email {
  background: rgba(217, 119, 6, 0.15);
  color: var(--tg-amber);
}

.admin-telegram-page .tg-empty,
.admin-telegram-page .tg-loading {
  text-align: center;
  padding: 2rem;
  color: var(--tg-text-muted);
}

.admin-telegram-page .tg-error-panel {
  margin-top: 1rem;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--tg-text);
  font-size: 0.85rem;
}

.admin-telegram-page .tg-error-panel ul {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.admin-telegram-page .tg-section-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--tg-text);
}

.admin-telegram-page .tg-section-desc {
  margin: 0 0 1.25rem;
  color: var(--tg-text-muted);
  font-size: 0.9rem;
}

.admin-telegram-page .tg-broadcast-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}

.admin-telegram-page .tg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-telegram-page .tg-field > span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tg-text);
}

[data-theme="dark"] .admin-telegram-page {
  --tg-card: #1a1d27;
  --tg-text: #e8eaf0;
  --tg-text-muted: #9aa3c2;
  --tg-border: #2a2d3a;
  --tg-bg: #0f1117;
}

[data-theme="dark"] .admin-telegram-page .tg-stat-card {
  background: #13151f;
}

[data-theme="dark"] .admin-telegram-page .tg-input,
[data-theme="dark"] .admin-telegram-page .tg-select,
[data-theme="dark"] .admin-telegram-page .tg-textarea {
  background: #13151f;
  border-color: #2a2d3a;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-telegram-page .tg-table th {
  background: #13151f;
  color: #9aa3c2;
}

[data-theme="dark"] .admin-telegram-page .tg-table td {
  color: #e8eaf0;
}

[data-theme="dark"] .admin-telegram-page .tg-code {
  background: #232635;
  color: #e8eaf0;
}

[data-theme="dark"] .admin-telegram-page .tg-badge--muted {
  background: #232635;
  color: #9aa3c2;
}

[data-theme="dark"] .admin-telegram-page .tg-badge--channel-inapp {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

[data-theme="dark"] .admin-telegram-page .tg-badge--channel-telegram {
  background: rgba(34, 158, 217, 0.2);
  color: #7dd3fc;
}

[data-theme="dark"] .admin-telegram-page .tg-badge--channel-email {
  background: rgba(217, 119, 6, 0.2);
  color: #fcd34d;
}

[data-theme="dark"] .admin-telegram-page .tg-stat-card--blue { background: rgba(34, 158, 217, 0.12); }
[data-theme="dark"] .admin-telegram-page .tg-stat-card--green { background: rgba(5, 150, 105, 0.12); }
[data-theme="dark"] .admin-telegram-page .tg-stat-card--red { background: rgba(220, 38, 38, 0.12); }
[data-theme="dark"] .admin-telegram-page .tg-stat-card--amber { background: rgba(217, 119, 6, 0.12); }

[data-theme="dark"] .admin-telegram-page .tg-error-panel {
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
}

/* ---- Page shell ---- */
.admin-tv-page {
  padding: 0 8px 40px;
  width: 100%;
  max-width: none;
}

.admin-tv-hero {
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: var(--dash-radius, 12px);
  background: linear-gradient(135deg, #151823 0%, #1a1d27 55%, #231a14 100%);
  border: 1px solid #2a2d3a;
  position: relative;
  overflow: hidden;
}

.admin-tv-hero::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255, 131, 6, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.admin-tv-hero h1 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #f8fafc;
  position: relative;
}

.admin-tv-hero p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  position: relative;
}

.admin-tv-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 992px) {
  .admin-tv-layout {
    grid-template-columns: 1fr;
  }
}

.admin-tv-panel {
  background: var(--dash-card, #fff);
  border: 1px solid var(--dash-border, #e8eaf0);
  border-radius: var(--dash-radius, 12px);
  padding: 18px;
  box-shadow: var(--dash-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.admin-tv-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dash-border, #e8eaf0);
}

.admin-tv-panel-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dash-text-primary, #111827);
  letter-spacing: 0.02em;
}

.admin-tv-cat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-tv-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--dash-text-primary, #111827);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.admin-tv-cat-item:hover {
  background: var(--dash-accent-light, #fff4e8);
  border-color: rgba(255, 131, 6, 0.2);
}

.admin-tv-cat-item.active {
  background: var(--dash-accent-light, #fff4e8);
  border-color: rgba(255, 131, 6, 0.45);
  box-shadow: inset 3px 0 0 var(--dash-accent, #ff8306);
}

.admin-tv-cat-name {
  font-weight: 600;
  font-size: 0.88rem;
}

.admin-tv-cat-meta {
  font-size: 0.72rem;
  color: var(--dash-text-muted, #9ca3af);
  margin-top: 2px;
}

.admin-tv-cat-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.admin-tv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--dash-text-secondary, #6b7280);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.admin-tv-icon-btn:hover {
  background: rgba(255, 131, 6, 0.12);
  color: var(--dash-accent, #ff8306);
}

.admin-tv-icon-btn.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.admin-tv-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-tv-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.admin-tv-video-preview,
.admin-tv-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.admin-tv-video-card {
  border: 1px solid var(--dash-border, #e8eaf0);
  border-radius: 12px;
  overflow: hidden;
  background: var(--dash-bg, #f1f3f8);
  display: flex;
  flex-direction: column;
}

.admin-tv-video-thumb {
  aspect-ratio: 16 / 9;
  background: #0f1117;
  position: relative;
  overflow: hidden;
}

.admin-tv-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-tv-video-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 1.6rem;
}

.admin-tv-video-body {
  padding: 12px 14px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-tv-video-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dash-text-primary, #111827);
  line-height: 1.35;
}

.admin-tv-video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.75rem;
  color: var(--dash-text-muted, #9ca3af);
}

.admin-tv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-tv-badge.published {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.admin-tv-badge.draft {
  background: rgba(107, 114, 128, 0.15);
  color: var(--dash-text-secondary, #6b7280);
}

.admin-tv-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.admin-tv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--dash-border, #e8eaf0);
  background: var(--dash-card, #fff);
  color: var(--dash-text-primary, #111827);
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-tv-btn:hover {
  border-color: rgba(255, 131, 6, 0.45);
  color: var(--dash-accent, #ff8306);
}

.admin-tv-btn.primary {
  background: var(--dash-accent, #ff8306);
  border-color: var(--dash-accent, #ff8306);
  color: #fff;
}

.admin-tv-btn.primary:hover {
  background: var(--dash-accent-dark, #e07000);
  border-color: var(--dash-accent-dark, #e07000);
  color: #fff;
}

.admin-tv-btn.accent-outline {
  border-color: rgba(255, 131, 6, 0.5);
  color: var(--dash-accent, #ff8306);
  background: transparent;
}

.admin-tv-btn.danger {
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
  background: transparent;
}

.admin-tv-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.admin-tv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-tv-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--dash-border, #e8eaf0);
  border-radius: 12px;
  color: var(--dash-text-muted, #9ca3af);
}

.admin-tv-empty strong {
  display: block;
  color: var(--dash-text-primary, #111827);
  margin-bottom: 6px;
  font-size: 1rem;
}

/* ---- Modals ---- */
.admin-tv-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-tv-modal {
  background: var(--dash-card, #fff);
  border-radius: 14px;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px;
  border: 1px solid var(--dash-border, #e8eaf0);
  box-shadow: var(--dash-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
}

.admin-tv-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-tv-modal-head h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dash-text-primary, #111827);
}

.admin-tv-modal-close {
  border: none;
  background: var(--dash-bg, #f1f3f8);
  color: var(--dash-text-secondary, #6b7280);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-tv-modal-close:hover {
  color: var(--dash-text-primary, #111827);
}

.admin-tv-form-group {
  margin-bottom: 14px;
}

.admin-tv-form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--dash-text-secondary, #6b7280);
}

.admin-tv-form-group input,
.admin-tv-form-group textarea,
.admin-tv-form-group select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--dash-border, #e8eaf0);
  background: var(--dash-bg, #f1f3f8);
  color: var(--dash-text-primary, #111827);
  font-size: 0.88rem;
}

.admin-tv-form-group input:focus,
.admin-tv-form-group textarea:focus,
.admin-tv-form-group select:focus {
  outline: none;
  border-color: rgba(255, 131, 6, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 131, 6, 0.12);
}

.admin-tv-form-group textarea.admin-tv-textarea-dark {
  background: #0a0a0a;
  color: #f0f1f5;
  border-color: #2a2d3a;
  min-height: 100px;
}

.admin-tv-form-group textarea.admin-tv-textarea-dark:focus {
  border-color: rgba(255, 131, 6, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 131, 6, 0.12);
}

.admin-tv-upload-pending {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--dash-text-secondary, #6b7280);
}

.admin-tv-form-group input[type="file"] {
  padding: 8px;
  font-size: 0.82rem;
}

.admin-tv-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--dash-text-primary, #111827);
  font-size: 0.88rem;
}

.admin-tv-upload-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #059669;
  font-weight: 600;
}

.admin-tv-thumb-preview {
  max-width: 140px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid var(--dash-border, #e8eaf0);
}

.admin-tv-progress {
  height: 6px;
  background: var(--dash-border, #e8eaf0);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.admin-tv-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff8306, #ffa040);
  transition: width 0.2s ease;
}

.admin-tv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--dash-border, #e8eaf0);
}

/* ---- Dark mode ---- */
[data-theme="dark"] .admin-tv-panel,
[data-theme="dark"] .admin-tv-modal {
  background: var(--dash-card, #1a1d27);
  border-color: var(--dash-border, #2a2d3a);
}

[data-theme="dark"] .admin-tv-panel-head {
  border-bottom-color: var(--dash-border, #2a2d3a);
}

[data-theme="dark"] .admin-tv-panel-head h3,
[data-theme="dark"] .admin-tv-cat-item,
[data-theme="dark"] .admin-tv-video-title,
[data-theme="dark"] .admin-tv-modal-head h4,
[data-theme="dark"] .admin-tv-check-row,
[data-theme="dark"] .admin-tv-empty strong {
  color: var(--dash-text-primary, #f0f1f5);
}

[data-theme="dark"] .admin-tv-cat-item:hover,
[data-theme="dark"] .admin-tv-cat-item.active {
  background: rgba(255, 131, 6, 0.1);
}

[data-theme="dark"] .admin-tv-video-card {
  background: #13151f;
  border-color: #2a2d3a;
}

[data-theme="dark"] .admin-tv-btn {
  background: #13151f;
  border-color: #2a2d3a;
  color: var(--dash-text-primary, #f0f1f5);
}

[data-theme="dark"] .admin-tv-btn:hover {
  border-color: rgba(255, 131, 6, 0.5);
  color: var(--dash-accent, #ff8306);
}

[data-theme="dark"] .admin-tv-form-group textarea.admin-tv-textarea-dark {
  background: #0a0a0a;
  color: #f0f1f5;
  border-color: #333;
}

[data-theme="dark"] .admin-tv-upload-pending {
  color: #8b8fa8;
}

[data-theme="dark"] .admin-tv-form-group input,
[data-theme="dark"] .admin-tv-form-group textarea,
[data-theme="dark"] .admin-tv-form-group select {
  background: #13151f;
  border-color: #2a2d3a;
  color: #f0f1f5;
}

[data-theme="dark"] .admin-tv-form-group select option {
  background: #1a1d27;
  color: #f0f1f5;
}

[data-theme="dark"] .admin-tv-badge.published {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .admin-tv-badge.draft {
  background: rgba(107, 114, 128, 0.25);
  color: #c5c9d6;
}

[data-theme="dark"] .admin-tv-modal-close {
  background: #13151f;
  color: #8b8fa8;
}

[data-theme="dark"] .admin-tv-actions {
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .admin-tv-empty {
  border-color: #2a2d3a;
  color: #8b8fa8;
}

.training-videos-page {
  padding: 0 8px 40px;
  width: 100%;
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 18px;
}

.tv-card-preview,
.tv-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.tv-page-hero {
  margin-bottom: 22px;
  padding: 22px 24px;
  border-radius: var(--dash-radius, 12px);
  background: linear-gradient(135deg, #151823 0%, #1a1d27 50%, #1a1520 100%);
  border: 1px solid #2a2d3a;
  position: relative;
  overflow: hidden;
}

.tv-page-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255, 131, 6, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.tv-page-hero h1 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #f8fafc;
  position: relative;
}

.tv-page-hero p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}

.tv-filter-bar {
  margin-bottom: 22px;
}

.tv-filter-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dash-text-muted, #9ca3af);
  margin-bottom: 10px;
}

.tv-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tv-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--dash-border, #e8eaf0);
  background: var(--dash-card, #fff);
  color: var(--dash-text-secondary, #6b7280);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.tv-chip:hover {
  border-color: rgba(255, 131, 6, 0.45);
  color: var(--dash-accent, #ff8306);
  background: var(--dash-accent-light, #fff4e8);
}

.tv-chip.active {
  border-color: var(--dash-accent, #ff8306);
  background: var(--dash-accent, #ff8306);
  color: #fff;
  box-shadow: 0 2px 8px rgba(255, 131, 6, 0.35);
}

.tv-watched-badge {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.92);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
}

.tv-card {
  background: var(--dash-card, #fff);
  border: 1px solid var(--dash-border, #e8eaf0);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--dash-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tv-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dash-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
  border-color: rgba(255, 131, 6, 0.35);
}

.tv-card-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #0f1117, #1a1d27);
  position: relative;
  overflow: hidden;
}

.tv-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.tv-card:hover .tv-card-thumb img {
  transform: scale(1.04);
}

.tv-card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tv-card:hover .tv-card-play-overlay {
  opacity: 1;
}

.tv-card-play-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 131, 6, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.tv-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 2.2rem;
}

.tv-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
}

.tv-card-body {
  padding: 14px 16px 16px;
}

.tv-card-body h4 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dash-text-primary, #111827);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tv-card-meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dash-accent, #ff8306);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tv-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--dash-border, #e8eaf0);
  border-radius: 14px;
  color: var(--dash-text-muted, #9ca3af);
}

.tv-empty-icon {
  font-size: 2.5rem;
  color: var(--dash-text-muted, #9ca3af);
  margin-bottom: 12px;
  opacity: 0.6;
}

.tv-empty strong {
  display: block;
  color: var(--dash-text-primary, #111827);
  font-size: 1.05rem;
  margin-bottom: 6px;
}

/* ---- Detail modal ---- */
.tv-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tv-detail-modal {
  background: var(--dash-card, #fff);
  border-radius: 16px;
  width: min(920px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px 24px;
  border: 1px solid var(--dash-border, #e8eaf0);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.tv-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.tv-detail-head h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dash-text-primary, #111827);
}

.tv-detail-close {
  border: none;
  background: var(--dash-bg, #f1f3f8);
  color: var(--dash-text-secondary, #6b7280);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.tv-detail-close:hover {
  color: var(--dash-text-primary, #111827);
  background: var(--dash-accent-light, #fff4e8);
}

.tv-detail-modal video {
  width: 100%;
  border-radius: 12px;
  background: #000;
  margin: 4px 0 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.tv-detail-desc {
  color: var(--dash-text-secondary, #6b7280);
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--dash-border, #e8eaf0);
}

/* ---- Dark mode ---- */
[data-theme="dark"] .tv-chip {
  background: var(--dash-card, #1a1d27);
  border-color: #2a2d3a;
  color: var(--dash-text-secondary, #8b8fa8);
}

[data-theme="dark"] .tv-chip:hover {
  background: rgba(255, 131, 6, 0.12);
  color: var(--dash-accent, #ff8306);
}

[data-theme="dark"] .tv-chip.active {
  background: var(--dash-accent, #ff8306);
  color: #fff;
}

[data-theme="dark"] .tv-card,
[data-theme="dark"] .tv-detail-modal {
  background: var(--dash-card, #1a1d27);
  border-color: #2a2d3a;
}

[data-theme="dark"] .tv-card-body h4,
[data-theme="dark"] .tv-detail-head h3,
[data-theme="dark"] .tv-empty strong {
  color: var(--dash-text-primary, #f0f1f5);
}

[data-theme="dark"] .tv-detail-close {
  background: #13151f;
  color: #8b8fa8;
}

[data-theme="dark"] .tv-detail-close:hover {
  background: rgba(255, 131, 6, 0.15);
  color: #f0f1f5;
}

[data-theme="dark"] .tv-detail-desc {
  color: var(--dash-text-secondary, #8b8fa8);
  border-top-color: #2a2d3a;
}

[data-theme="dark"] .tv-empty {
  border-color: #2a2d3a;
  color: #8b8fa8;
}

/* Gang Sheet Studio — modern layout & tokens */
.gigi-gang-page {
  min-height: 100vh;
  width: 100%;
  --gang-accent: #2563eb;
  --gang-accent-hover: #1d4ed8;
  --gang-accent-muted: rgba(37, 99, 235, 0.08);
  --gang-surface: #ffffff;
  --gang-surface-2: #f8fafc;
  --gang-border: #e2e8f0;
  --gang-text: #0f172a;
  --gang-muted: #64748b;
  --gang-radius: 14px;
  --gang-radius-sm: 10px;
  --gang-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 20px rgba(15, 23, 42, 0.04);
  --gang-shadow-hover: 0 4px 24px rgba(37, 99, 235, 0.12);
}

.gigi-gang-sidebar {
  min-width: 220px;
  max-width: 280px;
  flex-shrink: 0;
}

.gigi-gang-main {
  flex: 1;
  min-width: 0;
  background: linear-gradient(180deg, #f1f5f9 0%, #e8eef5 50%, #f1f5f9 100%);
  min-height: 100vh;
  /* Allow inner scroll areas (e.g. review list) to work; avoid clipping both axes */
  overflow-x: hidden;
  overflow-y: visible;
}

.gigi-gang-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2.5rem;
}

.gigi-gang-hero {
  margin-bottom: 1.75rem;
}

.gigi-gang-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gang-accent);
  background: var(--gang-accent-muted);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

.gigi-gang-title {
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gang-text);
  line-height: 1.2;
  margin: 0 0 0.5rem 0;
}

.gigi-gang-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gang-muted);
  max-width: 58ch;
  margin: 0;
}

.gigi-gang-flash {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--gang-radius-sm);
  background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  color: #0c4a6e;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  box-shadow: var(--gang-shadow);
}

.gigi-gang-flash__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--gang-accent);
  font-size: 1.1rem;
}

.gigi-gang-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .gigi-gang-layout {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
    align-items: start;
  }

  /* Let the review list column shrink and scroll instead of squashing row content */
  .gigi-gang-layout > .gigi-gang-card {
    min-width: 0;
  }
}

.gigi-gang-card {
  background: var(--gang-surface);
  border-radius: var(--gang-radius);
  border: 1px solid var(--gang-border);
  box-shadow: var(--gang-shadow);
  padding: 1.25rem 1.35rem 1.35rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.gigi-gang-card:hover {
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07);
}

.gigi-gang-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gang-border);
}

.gigi-gang-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gang-muted);
  margin: 0;
}

.gigi-gang-card__title svg {
  color: var(--gang-accent);
  font-size: 1rem;
  opacity: 0.9;
}

.gigi-gang-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--gang-surface-2);
  color: var(--gang-muted);
  border: 1px solid var(--gang-border);
  white-space: nowrap;
}

.gigi-gang-badge--warn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.gigi-gang-panels {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gigi-gang-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1rem;
}

@media (min-width: 420px) {
  .gigi-gang-field-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gigi-gang-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.gigi-gang-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gang-text);
  letter-spacing: 0.01em;
}

.gigi-gang-input,
.gigi-gang-select,
.gigi-gang-textarea {
  width: 100%;
  font-size: 0.9rem;
  border: 1px solid var(--gang-border);
  border-radius: var(--gang-radius-sm);
  background: var(--gang-surface);
  color: var(--gang-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.gigi-gang-textarea {
  min-height: 9.5rem;
  padding: 0.75rem 0.9rem;
  line-height: 1.5;
  resize: vertical;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  font-size: 0.85rem;
}

.gigi-gang-textarea--compact {
  min-height: 5.5rem;
}

.gigi-gang-hint {
  line-height: 1.45;
  margin-top: 0.15rem;
}

.gigi-gang-input,
.gigi-gang-select {
  height: 2.5rem;
  padding: 0 0.65rem;
}

.gigi-gang-input--narrow {
  max-width: 6rem;
  width: 100%;
}

.gigi-gang-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gang-text);
  background: var(--gang-surface-2);
  border: 1px solid var(--gang-border);
  border-radius: var(--gang-radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.gigi-gang-btn-secondary:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.gigi-gang-btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * Scrollable review list: do NOT let flex children shrink (default flex-shrink: 1),
 * or every row collapses to a thin strip when many items share max-height.
 */
.gigi-gang-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: min(75vh, 920px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.25rem 0.5rem 0.5rem 0;
  margin-top: 0.35rem;
  align-items: stretch;
  -webkit-overflow-scrolling: touch;
}

/* Accordion row — compact list header + expandable editor */
.gigi-gang-review-tile {
  flex-shrink: 0;
  width: 100%;
  background: var(--gang-surface);
  border: 1px solid var(--gang-border);
  border-radius: var(--gang-radius-sm);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.gigi-gang-review-tile--open {
  border-color: #93c5fd;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.12);
  z-index: 1;
  position: relative;
}

.gigi-gang-review-tile--dirty:not(.gigi-gang-review-tile--open) {
  border-left: 3px solid #f59e0b;
}

.gigi-gang-review-tile__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  min-height: 5.25rem;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
}

.gigi-gang-review-tile__head:hover:not(:disabled) {
  background: var(--gang-surface-2);
}

.gigi-gang-review-tile__head:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.gigi-gang-review-tile__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 10px 10px;
  border: 1px solid var(--gang-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gigi-gang-review-tile__thumb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.gigi-gang-review-tile__thumb-ph {
  width: 38%;
  height: 38%;
  border-radius: 5px;
  background: #cbd5e1;
  opacity: 0.65;
}

.gigi-gang-review-tile__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.gigi-gang-review-tile__order {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gang-accent);
  text-transform: uppercase;
}

.gigi-gang-review-tile__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gang-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.gigi-gang-review-tile__sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gang-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  width: 100%;
}

.gigi-gang-review-tile__pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.gigi-gang-review-tile__chev {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.35rem;
  color: var(--gang-muted);
  transition: transform 0.22s ease, color 0.15s ease;
}

.gigi-gang-review-tile__chev--open {
  transform: rotate(180deg);
  color: var(--gang-accent);
}

.gigi-gang-review-tile__panel {
  flex-shrink: 0;
  position: relative;
  z-index: 0;
  border-top: 1px solid var(--gang-border);
  padding: 1rem 0.9rem 0.9rem;
  background: linear-gradient(180deg, #f8fafc 0%, var(--gang-surface) 48%);
  overflow: visible;
}

.gigi-gang-review-tile__panel-lead {
  margin: 0 0 0.85rem 0;
  font-size: 0.8rem;
  color: var(--gang-muted);
  line-height: 1.45;
}

.gigi-gang-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.55rem 0.75rem;
}

.gigi-gang-review-cell--wide {
  grid-column: span 2;
}

@media (max-width: 520px) {
  .gigi-gang-review-cell--wide {
    grid-column: span 1;
  }
}

.gigi-gang-review-cell .gigi-gang-label {
  font-size: 0.65rem;
  margin-bottom: 0.2rem;
}

.gigi-gang-review-cell .gigi-gang-input {
  height: 2.35rem;
  font-size: 0.82rem;
}

.gigi-gang-review-tile__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--gang-border);
}

.gigi-gang-review-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--gang-accent) 0%, #4f46e5 100%);
  border: none;
  border-radius: var(--gang-radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  transition: filter 0.15s, transform 0.12s;
}

.gigi-gang-review-save:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.gigi-gang-review-save:active {
  transform: translateY(0);
}

.gigi-gang-review-tile__uid {
  font-size: 0.65rem;
  color: var(--gang-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gigi-gang-review-tile__uid code {
  font-size: 0.64rem;
  background: var(--gang-surface-2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--gang-border);
  word-break: break-all;
}

.gigi-gang-input:focus,
.gigi-gang-select:focus,
.gigi-gang-textarea:focus {
  outline: none;
  border-color: var(--gang-accent);
  box-shadow: 0 0 0 3px var(--gang-accent-muted);
}

.gigi-gang-input:disabled,
.gigi-gang-select:disabled,
.gigi-gang-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--gang-surface-2);
}

.gigi-gang-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.9rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, var(--gang-accent) 0%, #4f46e5 100%);
  border: none;
  border-radius: var(--gang-radius-sm);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s;
}

.gigi-gang-cta:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: var(--gang-shadow-hover);
  transform: translateY(-1px);
}

.gigi-gang-cta:active:not(:disabled) {
  transform: translateY(0);
}

.gigi-gang-cta:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  filter: grayscale(0.2);
  transform: none;
}

.gigi-gang-cta__spin {
  width: 1.1rem;
  height: 1.1rem;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gigi-gang-spin 0.7s linear infinite;
}

@keyframes gigi-gang-spin {
  to {
    transform: rotate(360deg);
  }
}

.gigi-gang-progress {
  margin-top: 1rem;
  border-radius: var(--gang-radius-sm);
  background: var(--gang-surface-2);
  border: 1px solid var(--gang-border);
  overflow: hidden;
}

.gigi-gang-progress__bar {
  height: 4px;
  background: linear-gradient(90deg, var(--gang-accent), #6366f1, var(--gang-accent));
  background-size: 200% 100%;
  animation: gigi-gang-shimmer 1.2s ease-in-out infinite;
  transform-origin: left;
  transition: width 0.2s;
}

.gigi-gang-progress__bar--idle {
  display: none;
}

@keyframes gigi-gang-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.gigi-gang-progress__text {
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--gang-muted);
  line-height: 1.4;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.gigi-gang-progress__label {
  font-weight: 600;
  color: var(--gang-muted);
  display: block;
  margin-bottom: 0.25rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gigi-gang-outcome {
  margin-top: 1.5rem;
}

.gigi-gang-outcome .gigi-gang-card__head {
  margin-bottom: 1rem;
}

.gigi-gang-preview-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gang-muted);
  margin: 0 0 0.6rem 0;
  align-self: flex-start;
  width: 100%;
}

.gigi-gang-preview-box {
  border-radius: var(--gang-radius-sm);
  background: repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--gang-border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 120px;
  width: 100%;
  overflow: auto;
  max-height: min(92vh, 1400px);
}

.gigi-gang-preview {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
  background: #fff;
}

/* Cropped sheet; width from inline = ~real print size at 96 CSS px/inch */
.gigi-gang-preview--print {
  display: block;
  margin-left: auto;
  margin-right: auto;
  image-rendering: auto;
}

.gigi-gang-file-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gigi-gang-file-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--gang-muted);
  font-family: ui-monospace, monospace;
  padding: 0.4rem 0.55rem;
  background: var(--gang-surface-2);
  border-radius: 6px;
  border: 1px solid var(--gang-border);
  word-break: break-all;
}

.gigi-gang-file-list li::before {
  content: "✓";
  flex-shrink: 0;
  color: #059669;
  font-weight: 800;
  font-size: 0.75rem;
  font-family: system-ui, sans-serif;
}

@media (max-width: 768px) {
  .gigi-gang-page {
    flex-direction: column;
  }
  .gigi-gang-sidebar {
    max-width: none;
    min-height: auto;
  }
  .gigi-gang-content {
    padding: 1rem 1rem 2rem;
  }
  .gigi-gang-field-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gigi-gang-cta__spin,
  .gigi-gang-progress__bar,
  .gigi-gang-cta {
    animation: none;
    transition: none;
  }
}

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  /* padding: 0.6em 1.2em; */
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  /* border-color: #646cff; */
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}


/*# sourceMappingURL=main.ffe81602c19adbb2b5c8.css.map*/