/* ItmenaanPK admin theme overrides — palette: white + #371a46 (primary) + #f0bc1b (accent) + black.
   Loaded AFTER style.css to rebrand the Ecom template. */
:root {
  --itm-primary: #371a46;
  --itm-primary-dark: #2a1336;
  --itm-accent: #f0bc1b;
  --itm-primary-soft: #f3eef7;
}

/* Brand text / links */
.text-brand,
a:hover,
.menu-aside .menu-item .submenu a:hover { color: var(--itm-primary) !important; }

/* Buttons */
.btn-primary {
  background-color: var(--itm-primary) !important;
  border-color: var(--itm-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus { background-color: var(--itm-primary-dark) !important; border-color: var(--itm-primary-dark) !important; }
.btn-outline-primary { color: var(--itm-primary) !important; border-color: var(--itm-primary) !important; }
.btn-outline-primary:hover { background-color: var(--itm-primary) !important; color: #fff !important; }

/* Accent button (gold) */
.btn-accent {
  background-color: var(--itm-accent) !important;
  border-color: var(--itm-accent) !important;
  color: #2a1336 !important;
  font-weight: 700;
}
.btn-accent:hover { filter: brightness(0.95); }

/* Sidebar */
.navbar-aside { border-right: 1px solid #efeaf3; }
.menu-aside .menu-item.active > .menu-link {
  background: var(--itm-primary-soft);
  color: var(--itm-primary);
  border-radius: 10px;
}
.menu-aside .menu-item.active > .menu-link .icon { color: var(--itm-primary) !important; }
.menu-aside .menu-link:hover { color: var(--itm-primary); }

/* Brand wordmark in sidebar */
.aside-top .brand-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--itm-primary);
}
.aside-top .brand-text span { color: var(--itm-accent); }

/* Pagination */
.pagination .page-item.active .page-link {
  background: var(--itm-primary);
  border-color: var(--itm-primary);
  color: #fff;
}
.pagination .page-link { color: var(--itm-primary); }

/* Form focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--itm-primary);
  box-shadow: 0 0 0 0.15rem rgba(55, 26, 70, 0.15);
}

/* Soft badge / icon backgrounds tinted to brand */
.bg-primary-light { background-color: var(--itm-primary-soft) !important; }
.text-primary { color: var(--itm-primary) !important; }

/* Progress bars */
.progress-bar { background-color: var(--itm-primary); }

/* Active top nav */
.nav-link.active { color: var(--itm-primary) !important; }

/* Stat card icon accent */
.icon.rounded-circle.bg-accent-light { background-color: #fdf3d2 !important; }
.icon.rounded-circle.bg-accent-light i { color: var(--itm-accent) !important; }

/* Tables */
.table thead.table-light th { background: #faf8fc; color: #4a3b57; }

/* Attribute builder rows */
.attr-row { border: 1px solid #ece7f1; border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fcfbfe; }
.attr-row .form-label { font-size: 12px; font-weight: 700; color: #6b5b78; margin-bottom: 4px; }

/* Account dropdown — keep it inside the viewport (no horizontal overflow) */
.main-header .nav .dropdown-menu-end {
  right: 12px !important;
  left: auto !important;
  max-width: calc(100vw - 24px);
  min-width: 220px;
}
.main-header .nav .dropdown-menu .px-3 strong,
.main-header .nav .dropdown-menu .px-3 small {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Logo sizing in sidebar */
.aside-top .brand-wrap .logo { max-height: 36px; width: auto; }

/* Image upload preview */
.img-preview {
  width: 84px; height: 84px; border-radius: 12px; object-fit: cover;
  border: 1px solid #ece7f1; background: #f6f4f9;
}

/* Font Awesome icon picker (category form) */
.itm-icon-preview {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px; background: #f3eef7;
  display: inline-flex; align-items: center; justify-content: center; color: #371a46; font-size: 20px;
}
.itm-icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.itm-icon-opt {
  aspect-ratio: 1; border: 1px solid #ece7f1; border-radius: 10px; background: #fff;
  color: #4a3b57; font-size: 16px; cursor: pointer; transition: .12s;
  display: inline-flex; align-items: center; justify-content: center;
}
.itm-icon-opt:hover { border-color: #371a46; color: #371a46; background: #faf8fc; }
.itm-icon-opt.active { background: #371a46; border-color: #371a46; color: #fff; }

/* Keep the absolute footer from overlapping page content (pagination clicks) */
.main-wrap .content-main { padding-bottom: 90px; }
.pagination-area { position: relative; z-index: 3; margin-bottom: 10px; }
footer.main-footer { z-index: 1; }

/* ============================================================
   Bootstrap modal styles — the admin template ships the modal JS
   (bootstrap.bundle) but NOT the modal CSS, so opened modals spilled
   across the page. These bring back a proper centered dialog.
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1055;
  display: none; width: 100%; height: 100%;
  overflow-x: hidden; overflow-y: auto; outline: 0;
}
.modal.show { display: block; }
.modal-dialog {
  position: relative; width: auto; margin: 1.75rem auto; max-width: 540px;
  pointer-events: none;
}
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-content {
  position: relative; display: flex; flex-direction: column; width: 100%;
  pointer-events: auto; background: #fff; background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.12); border-radius: 14px; outline: 0;
  box-shadow: 0 20px 60px rgba(20,16,26,.25);
}
.modal-header {
  display: flex; flex-shrink: 0; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #eef0f3;
  border-top-left-radius: 14px; border-top-right-radius: 14px;
}
.modal-title { margin: 0; line-height: 1.5; font-size: 18px; font-weight: 700; }
.modal-body { position: relative; flex: 1 1 auto; padding: 20px; }
.modal-footer {
  display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 14px 20px; border-top: 1px solid #eef0f3;
}
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1050; width: 100vw; height: 100vh; background: #000;
}
.modal-backdrop.show { opacity: .5; }
.modal-backdrop.fade { opacity: 0; transition: opacity .15s linear; }
.modal-backdrop.fade.show { opacity: .5; }
body.modal-open { overflow: hidden; }

/* close (X) button */
.btn-close {
  box-sizing: content-box; width: 1em; height: 1em; padding: .35em; margin: -.35em -.35em -.35em auto;
  color: #000; border: 0; border-radius: 8px; opacity: .5; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.btn-close:hover { opacity: .85; }

/* tall forms: let the dialog scroll within the viewport */
@media (max-height: 720px) { .modal-dialog { margin: 1rem auto; } }