/* ==========================================================================
   Polaris theme for PIM Admin
   Restyles the existing Bootstrap 5 markup to match Shopify Polaris.
   Loaded AFTER bootstrap so these rules win.
   ========================================================================== */

:root {
  /* Surfaces & background */
  --p-bg:                 #f1f1f1;
  --p-surface:            #ffffff;
  --p-surface-secondary:  #f7f7f7;
  --p-surface-hover:      #f1f1f1;
  --p-surface-selected:   #f0f6ff;

  /* Borders */
  --p-border:             #e3e3e3;
  --p-border-strong:      #cdcdcd;
  --p-border-input:       #8a8a8a;

  /* Text */
  --p-text:               #303030;
  --p-text-secondary:     #616161;
  --p-text-disabled:      #b5b5b5;
  --p-text-on-dark:       #ffffff;

  /* Brand / interactive */
  --p-action:             #303030;   /* primary button bg */
  --p-action-hover:       #1a1a1a;
  --p-action-active:      #000000;
  --p-focus:              #005bd3;    /* Polaris focus / link blue */
  --p-link:               #005bd3;

  /* Radii */
  --p-radius-sm:          6px;
  --p-radius:             8px;
  --p-radius-lg:          12px;

  /* Shadows */
  --p-shadow-card:        0 0 0 1px rgba(0,0,0,.04), 0 1px 2px rgba(26,26,26,.07);
  --p-shadow-button:      0 1px 0 rgba(0,0,0,.05);
  --p-shadow-pop:         0 2px 8px rgba(26,26,26,.16);

  /* Typography */
  --p-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html, body {
  background-color: var(--p-bg) !important;
  color: var(--p-text);
  font-family: var(--p-font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { padding-bottom: 3rem; }

h1, h2, h3, h4, h5, h6 {
  color: var(--p-text);
  font-weight: 650;
  letter-spacing: -0.01em;
}
h1 { font-size: 1.5rem;  margin-bottom: 1rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }

a { color: var(--p-link); text-decoration: none; }
a:hover { color: var(--p-action-active); text-decoration: underline; }

.container, .container-fluid { max-width: 1200px; }

/* --------------------------------------------------------------------------
   Top bar (Bootstrap .navbar)
   -------------------------------------------------------------------------- */
.navbar {
  background-color: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  padding: .5rem 1rem;
  min-height: 56px;
}
.navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--p-text) !important;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.navbar .navbar-brand::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #303030, #5c5f62);
  display: inline-block;
}
.navbar .nav-link {
  color: var(--p-text-secondary) !important;
  font-weight: 550;
  font-size: .875rem;
  border-radius: var(--p-radius-sm);
  padding: .375rem .625rem !important;
  margin: 0 .0625rem;
  transition: background-color .12s ease, color .12s ease;
}
.navbar .nav-link:hover {
  color: var(--p-text) !important;
  background-color: var(--p-surface-hover);
}
.navbar .nav-link.active,
.navbar .nav-item.active > .nav-link {
  color: var(--p-text) !important;
  background-color: #ebebeb;
}
.navbar .navbar-text {
  color: var(--p-text-secondary) !important;
  font-size: .8125rem;
}
.navbar-toggler { border-color: var(--p-border); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow-card);
}
.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--p-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 {
  margin: 0;
}
.card-body   { padding: 1.25rem; }
.card-footer {
  background-color: var(--p-surface-secondary);
  border-top: 1px solid var(--p-border);
}
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--p-shadow-card) !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--p-radius);
  font-weight: 600;
  font-size: .8125rem;
  padding: .4375rem .875rem;
  line-height: 1.25;
  box-shadow: var(--p-shadow-button);
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 1px;
  box-shadow: none;
}

/* Primary -> Polaris primary (dark) */
.btn-primary {
  background-color: var(--p-action);
  border-color: var(--p-action);
  color: var(--p-text-on-dark);
}
.btn-primary:hover,
.btn-primary:focus { background-color: var(--p-action-hover); border-color: var(--p-action-hover); color:#fff; }
.btn-primary:active { background-color: var(--p-action-active) !important; border-color: var(--p-action-active) !important; }

/* Secondary / neutral */
.btn-secondary,
.btn-light,
.btn-outline-secondary {
  background-color: var(--p-surface);
  border-color: var(--p-border-strong);
  color: var(--p-text);
}
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
  background-color: var(--p-surface-hover);
  border-color: var(--p-border-strong);
  color: var(--p-text);
}

/* Outline-primary -> Polaris secondary look */
.btn-outline-primary {
  background-color: var(--p-surface);
  border-color: var(--p-border-strong);
  color: var(--p-text);
}
.btn-outline-primary:hover {
  background-color: var(--p-surface-hover);
  border-color: var(--p-border-strong);
  color: var(--p-text);
}

/* Success */
.btn-success {
  background-color: #29845a;
  border-color: #29845a;
  color: #fff;
}
.btn-success:hover { background-color: #1f6b48; border-color: #1f6b48; }

/* Destructive */
.btn-danger {
  background-color: #e0301e;
  border-color: #e0301e;
  color: #fff;
}
.btn-danger:hover { background-color: #c12a1a; border-color: #c12a1a; }
.btn-outline-danger {
  background-color: var(--p-surface);
  border-color: #e0b3ad;
  color: #8e1f0b;
}
.btn-outline-danger:hover { background-color: #fee9e8; border-color: #e0b3ad; color: #8e1f0b; }

.btn-sm { padding: .3125rem .625rem; font-size: .75rem; border-radius: var(--p-radius-sm); }
.btn-lg { padding: .625rem 1.125rem; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   Badges (Polaris tones)
   -------------------------------------------------------------------------- */
.badge {
  font-weight: 600;
  font-size: .75rem;
  padding: .25em .55em;
  border-radius: 8px;
  letter-spacing: .005em;
}
.badge.bg-secondary { background-color: #e3e3e3 !important; color: #4a4a4a !important; }
.badge.bg-primary   { background-color: #d6e8ff !important; color: #00407a !important; }
.badge.bg-info      { background-color: #d6e8ff !important; color: #00407a !important; }
.badge.bg-success   { background-color: #cdf6e4 !important; color: #0c5132 !important; }
.badge.bg-warning   { background-color: #ffe7b8 !important; color: #5e4200 !important; }
.badge.bg-danger    { background-color: #fee9e8 !important; color: #8e1f0b !important; }
.badge.bg-dark      { background-color: #303030 !important; color: #ffffff !important; }
.badge.bg-light     { background-color: #f1f1f1 !important; color: #4a4a4a !important; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
  color: var(--p-text);
  font-size: .8125rem;
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
.table > thead th {
  background-color: var(--p-surface-secondary);
  color: var(--p-text-secondary);
  font-weight: 600;
  font-size: .75rem;
  text-transform: none;
  border-bottom: 1px solid var(--p-border);
  padding: .625rem .75rem;
  vertical-align: middle;
}
.table > tbody td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--p-border);
  vertical-align: middle;
}
.table > tbody tr { transition: background-color .1s ease; }
.table > tbody tr:hover { background-color: var(--p-surface-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: transparent;
  background-color: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd):hover { background-color: var(--p-surface-hover); }

/* Rows that act as links */
tr[onclick] { cursor: pointer; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label {
  font-weight: 550;
  font-size: .8125rem;
  color: var(--p-text);
  margin-bottom: .25rem;
}
.form-control,
.form-select {
  border: 1px solid var(--p-border-input);
  border-radius: var(--p-radius);
  font-size: .8125rem;
  color: var(--p-text);
  padding: .4375rem .75rem;
  background-color: var(--p-surface);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
.form-control::placeholder { color: #8c8c8c; }
.form-control:focus,
.form-select:focus {
  border-color: var(--p-focus);
  box-shadow: 0 0 0 2px rgba(0,91,211,.25);
  outline: none;
}
.form-control-sm, .form-select-sm {
  font-size: .75rem;
  padding: .3125rem .5rem;
  border-radius: var(--p-radius-sm);
}
.form-check-input:checked {
  background-color: var(--p-action);
  border-color: var(--p-action);
}
.form-check-input:focus {
  border-color: var(--p-focus);
  box-shadow: 0 0 0 2px rgba(0,91,211,.25);
}

/* --------------------------------------------------------------------------
   Alerts (Polaris banners)
   -------------------------------------------------------------------------- */
.alert {
  border-radius: var(--p-radius-lg);
  border: 1px solid transparent;
  font-size: .8125rem;
  padding: .875rem 1rem;
}
.alert-danger  { background-color: #fee9e8; border-color: #f1c7c2; color: #8e1f0b; }
.alert-success { background-color: #cdf6e4; border-color: #a6e3c6; color: #0c5132; }
.alert-warning { background-color: #ffe7b8; border-color: #f0d49a; color: #5e4200; }
.alert-info,
.alert-primary { background-color: #d6e8ff; border-color: #b3d3f5; color: #00407a; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  color: var(--p-text-secondary);
  font-size: .75rem;
  margin-top: 3rem !important;
}

/* --------------------------------------------------------------------------
   jQuery DataTables
   -------------------------------------------------------------------------- */
.dataTables_wrapper {
  font-size: .8125rem;
  color: var(--p-text-secondary);
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--p-border-input);
  border-radius: var(--p-radius-sm);
  padding: .3125rem .5rem;
  font-size: .8125rem;
  color: var(--p-text);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--p-focus);
  box-shadow: 0 0 0 2px rgba(0,91,211,.25);
  outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--p-radius-sm) !important;
  border: 1px solid transparent !important;
  color: var(--p-text-secondary) !important;
  padding: .25rem .625rem !important;
  margin: 0 1px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--p-surface-hover) !important;
  border-color: var(--p-border) !important;
  color: var(--p-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--p-action) !important;
  border-color: var(--p-action) !important;
  color: #fff !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after { opacity: .4; }

/* --------------------------------------------------------------------------
   Rich text editors (CKEditor / Quill) borders to match Polaris
   -------------------------------------------------------------------------- */
.ql-toolbar.ql-snow,
.ck.ck-editor__top .ck-toolbar {
  border-color: var(--p-border-input) !important;
  border-top-left-radius: var(--p-radius) !important;
  border-top-right-radius: var(--p-radius) !important;
}
.ql-container.ql-snow,
.ck.ck-editor__main > .ck-editor__editable {
  border-color: var(--p-border-input) !important;
  border-bottom-left-radius: var(--p-radius) !important;
  border-bottom-right-radius: var(--p-radius) !important;
}

/* --------------------------------------------------------------------------
   Utility / misc
   -------------------------------------------------------------------------- */
hr { border-color: var(--p-border); opacity: 1; }
.text-muted { color: var(--p-text-secondary) !important; }
code, pre { background: var(--p-surface-secondary); border-radius: var(--p-radius-sm); }