/* ==========================================================================
   PupKit theme - light sidebar, orange accent, navy secondary.
   Sits on top of Bootstrap 5.3 (variables + component overrides).
   ========================================================================== */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --pk-orange: #ff9f43;
  --pk-orange-dark: #f08a24;
  --pk-orange-soft: #fff4e8;
  --pk-navy: #092c4c;
  --pk-navy-2: #123a5f;
  --pk-teal: #0e9f8a;
  --pk-blue: #1a66f0;
  --pk-red: #ea5455;
  --pk-green: #28c76f;
  --pk-ink: #212b36;
  --pk-muted: #6b7686;
  --pk-line: #e8ebef;
  --pk-bg: #f6f7f9;
  --pk-card: #ffffff;
  --pk-side-w: 264px;
  --pk-side-w-collapsed: 78px;
  --pk-top-h: 68px;
  --pk-radius: 10px;

  --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .9rem;
  --bs-body-color: var(--pk-ink);
  --bs-body-bg: var(--pk-bg);
  --bs-primary: var(--pk-orange);
  --bs-primary-rgb: 255, 159, 67;
  --bs-link-color: var(--pk-orange-dark);
  --bs-link-color-rgb: 240, 138, 36;
  --bs-link-hover-color: #d9761a;
  --bs-border-color: var(--pk-line);
  --bs-border-radius: 8px;
  --bs-heading-color: var(--pk-navy);
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--pk-bg); color: var(--pk-ink); font-weight: 500; letter-spacing: .005em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--pk-navy); font-weight: 800; }
a { text-decoration: none; }
code { color: #c2410c; background: #fff4e8; padding: .1em .4em; border-radius: 5px; font-size: .82em; }
.text-muted, .form-text { color: var(--pk-muted) !important; }
.form-text { font-weight: 500; font-size: .78rem; }
::selection { background: #ffe0bd; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-padding-x: 1rem; --bs-btn-padding-y: .5rem; --bs-btn-font-weight: 700; --bs-btn-border-radius: 8px; --bs-btn-font-size: .875rem; transition: all .15s ease; }
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .3rem; --bs-btn-font-size: .8rem; --bs-btn-border-radius: 7px; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--pk-orange); --bs-btn-border-color: var(--pk-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pk-orange-dark); --bs-btn-hover-border-color: var(--pk-orange-dark); --bs-btn-active-bg: #dd7a1c; --bs-btn-active-border-color: #dd7a1c; --bs-btn-disabled-bg: var(--pk-orange); --bs-btn-disabled-border-color: var(--pk-orange); --bs-btn-focus-shadow-rgb: 255, 159, 67; box-shadow: 0 2px 6px rgba(255, 159, 67, .28); }
.btn-outline-primary { --bs-btn-color: var(--pk-orange-dark); --bs-btn-border-color: #ffd2a1; --bs-btn-hover-bg: var(--pk-orange); --bs-btn-hover-border-color: var(--pk-orange); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--pk-orange-dark); --bs-btn-active-border-color: var(--pk-orange-dark); }
.btn-dark, .btn-navy { --bs-btn-color: #fff; --bs-btn-bg: var(--pk-navy); --bs-btn-border-color: var(--pk-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pk-navy-2); --bs-btn-hover-border-color: var(--pk-navy-2); --bs-btn-active-bg: #061f37; box-shadow: 0 2px 6px rgba(9, 44, 76, .22); }
.btn-outline-secondary { --bs-btn-color: #475467; --bs-btn-border-color: var(--pk-line); --bs-btn-hover-bg: #f2f4f7; --bs-btn-hover-color: var(--pk-navy); --bs-btn-hover-border-color: #d5dae1; --bs-btn-active-bg: #eaecf0; --bs-btn-active-color: var(--pk-navy); background: #fff; }
.btn-outline-danger { --bs-btn-color: var(--pk-red); --bs-btn-border-color: #f6c4c4; --bs-btn-hover-bg: var(--pk-red); --bs-btn-hover-border-color: var(--pk-red); }
.btn-outline-success { --bs-btn-color: #1e9e55; --bs-btn-border-color: #b7e8cd; --bs-btn-hover-bg: var(--pk-green); --bs-btn-hover-border-color: var(--pk-green); }
.btn-outline-warning { --bs-btn-color: #b97600; --bs-btn-border-color: #f4d99c; --bs-btn-hover-bg: #ffc247; --bs-btn-hover-color: #4a3300; --bs-btn-hover-border-color: #ffc247; }
.btn-danger { --bs-btn-bg: var(--pk-red); --bs-btn-border-color: var(--pk-red); --bs-btn-hover-bg: #d63f40; --bs-btn-hover-border-color: #d63f40; }
.btn-close:focus { box-shadow: none; }

/* square icon-only action buttons (eye / pencil / trash ...) */
.btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pk-line); border-radius: 8px; background: #fff; color: #475467; font-size: 1rem; transition: all .15s; }
.btn-icon:hover { background: var(--pk-orange-soft); color: var(--pk-orange-dark); border-color: #ffd2a1; }
.btn-icon.danger:hover { background: #fdecec; color: var(--pk-red); border-color: #f6c4c4; }
.btn-icon.success:hover { background: #e7f8ef; color: #1e9e55; border-color: #b7e8cd; }
.btn-icon.round { border-radius: 50%; }
form.inline { display: inline; margin: 0; }

/* ---------- Forms ---------- */
.form-label { font-weight: 700; color: var(--pk-navy); font-size: .84rem; margin-bottom: .35rem; }
.form-control, .form-select { border-color: #dfe3e8; border-radius: 8px; padding: .55rem .8rem; font-weight: 500; color: var(--pk-ink); background-color: #fff; min-height: 40px; }
.form-control-sm, .form-select-sm { min-height: 32px; padding: .3rem .6rem; border-radius: 7px; }
.form-control::placeholder { color: #a3acb9; font-weight: 500; }
.form-control:focus, .form-select:focus { border-color: var(--pk-orange); box-shadow: 0 0 0 .2rem rgba(255, 159, 67, .18); }
.form-control:disabled, .form-select:disabled, fieldset:disabled .form-control { background: #f5f6f8; }
.form-check-input:checked { background-color: var(--pk-orange); border-color: var(--pk-orange); }
.form-check-input:focus { border-color: var(--pk-orange); box-shadow: 0 0 0 .2rem rgba(255, 159, 67, .2); }
.form-check-input { border-color: #c9cfd8; }
.input-group > .btn { border-color: #dfe3e8; }
.req { color: var(--pk-red); font-weight: 800; }
fieldset { min-width: 0; }

/* ---------- Cards ---------- */
.card { background: var(--pk-card); border: 1px solid var(--pk-line); border-radius: var(--pk-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.card-header { background: #fff; border-bottom: 1px solid var(--pk-line); font-weight: 800; color: var(--pk-navy); padding: .9rem 1.1rem; border-radius: var(--pk-radius) var(--pk-radius) 0 0 !important; }
.card-body { padding: 1.1rem 1.25rem; }
.card > .table-responsive { border-radius: var(--pk-radius); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #fbfcfd; margin-bottom: 0; color: var(--pk-ink); }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-bottom-color: #eef0f3; }
.table thead th, .table > thead > tr > th { background: #f8f9fb; color: var(--pk-navy); font-weight: 800; font-size: .8rem; border-bottom: 1px solid var(--pk-line); white-space: nowrap; text-transform: none; }
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child { border-top-right-radius: 8px; }
.table-sm > :not(caption) > * > * { padding: .55rem .8rem; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #fbfcfd; }
.table .small, .table small { color: var(--pk-muted); }
.table td .fw-semibold { color: var(--pk-navy); }
.table-danger { --bs-table-bg: #fff3f3; --bs-table-border-color: #fbe3e3; }
.table-secondary { --bs-table-bg: #f7f8fa; color: #98a2b3; }
del { color: #98a2b3; }
.thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; border: 1px solid var(--pk-line); background: #f5f6f8; }
.thumb-ph { width: 44px; height: 44px; border-radius: 9px; background: #f3f5f8; color: #b5bdc9; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; border: 1px solid var(--pk-line); }

/* ---------- Badges (soft pills with a dot) ---------- */
.badge { font-weight: 700; border-radius: 6px; padding: .35em .65em; font-size: .72rem; }
.badge-soft { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .72rem; padding: .3rem .65rem; border-radius: 6px; line-height: 1; color: #fff; }
.badge-soft::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .95; }
.badge-soft.success { background: var(--pk-green); }
.badge-soft.secondary { background: #98a2b3; }
.badge-soft.danger { background: var(--pk-red); }
.badge-soft.warning { background: #ffc247; color: #4a3300; }
.badge-soft.info { background: #0dcaf0; color: #04384a; }
.text-bg-primary { background: var(--pk-orange) !important; color: #fff !important; }
.text-bg-secondary { background: #98a2b3 !important; }
.text-bg-success { background: var(--pk-green) !important; }
.text-bg-danger { background: var(--pk-red) !important; }
.text-bg-warning { background: #ffc247 !important; color: #4a3300 !important; }
.text-bg-dark { background: var(--pk-navy) !important; }
.text-bg-light { background: #f1f3f6 !important; color: #475467 !important; }

/* ---------- Alerts ---------- */
.alert { border: 0; border-radius: 9px; font-weight: 600; padding: .8rem 1rem; }
.alert-success { background: #e7f8ef; color: #167a42; }
.alert-danger { background: #fdeeee; color: #b42323; }
.alert-warning { background: #fff5e0; color: #8a5a00; }
.alert-info { background: #e8f2ff; color: #1748a6; }
.alert-banner { background: #fdeeee; color: #6b2b2b; border-radius: 9px; padding: .75rem 2.8rem .75rem 1rem; display: flex; align-items: center; gap: .6rem; }
.alert-banner > .bi { color: var(--pk-red); flex: 0 0 auto; }
.alert-banner .btn-close { padding: 1rem; }
.alert-banner strong { color: var(--pk-red); font-weight: 700; }
.alert-banner a { color: var(--pk-red); text-decoration: underline; font-weight: 700; }

/* ---------- Pagination / tabs / accordion / dropdown ---------- */
.pagination { gap: .3rem; align-items: center; }
.pagination .page-link { border: 0; border-radius: 50% !important; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #eff1f4; color: #475467; font-weight: 700; font-size: .82rem; }
.pagination .page-link:hover { background: var(--pk-orange-soft); color: var(--pk-orange-dark); }
.pagination .active > .page-link { background: var(--pk-orange); color: #fff; box-shadow: 0 2px 6px rgba(255, 159, 67, .35); }
.nav-tabs { border-bottom: 1px solid var(--pk-line); gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--pk-muted); font-weight: 700; padding: .7rem 1rem; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--pk-orange-dark); }
.nav-tabs .nav-link.active { color: var(--pk-orange-dark); border-bottom-color: var(--pk-orange); background: transparent; }
.accordion { --bs-accordion-border-color: var(--pk-line); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: var(--pk-orange-soft); --bs-accordion-active-color: var(--pk-orange-dark); --bs-accordion-border-radius: 10px; --bs-accordion-inner-border-radius: 9px; }
.accordion-button { font-weight: 800; color: var(--pk-navy); }
.accordion-button:not(.collapsed) { box-shadow: none; }
.dropdown-menu { border: 1px solid var(--pk-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .12); padding: .4rem; font-size: .875rem; }
.dropdown-item { border-radius: 7px; padding: .5rem .75rem; font-weight: 600; color: #344054; display: flex; align-items: center; gap: .6rem; }
.dropdown-item .bi { color: #98a2b3; font-size: 1rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--pk-orange-soft); color: var(--pk-orange-dark); }
.dropdown-item:hover .bi { color: var(--pk-orange-dark); }
.dropdown-item.active, .dropdown-item:active { background: var(--pk-orange-soft); color: var(--pk-orange-dark); }
.dropdown-header { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #98a2b3; padding: .4rem .75rem; }
.list-group-item { border-color: var(--pk-line); }
.list-group-item-action:hover { background: var(--pk-orange-soft); }
.list-group-item.active { background: var(--pk-orange); border-color: var(--pk-orange); }
.modal-content { border: 0; border-radius: 12px; }

/* ==========================================================================
   Shell: sidebar + top bar
   ========================================================================== */
.pk-shell { min-height: 100vh; }
.pk-side { position: fixed; inset: 0 auto 0 0; width: var(--pk-side-w); background: #fff; border-right: 1px solid var(--pk-line); z-index: 1040; display: flex; flex-direction: column; transition: width .22s ease, transform .22s ease; }
.pk-brand { height: var(--pk-top-h); display: flex; align-items: center; padding: 0 1.4rem; border-bottom: 1px solid var(--pk-line); flex: 0 0 auto; }
.pk-brand a { display: inline-flex; align-items: center; gap: .6rem; color: var(--pk-navy); font-weight: 900; font-size: 1.45rem; letter-spacing: -.01em; }
.pk-brand svg { flex: 0 0 auto; }
.pk-brand .pk-word b { color: var(--pk-orange); font-weight: 900; }
.pk-collapse-btn { position: absolute; top: 22px; right: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--pk-orange); color: #fff; border: 3px solid var(--pk-bg); display: flex; align-items: center; justify-content: center; font-size: .8rem; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(255, 159, 67, .4); padding: 0; }
.pk-collapse-btn .bi { transition: transform .2s; }
.pk-nav { flex: 1 1 auto; overflow-y: auto; padding: .6rem 1rem 1.5rem; scrollbar-width: thin; }
.pk-nav::-webkit-scrollbar { width: 6px; } .pk-nav::-webkit-scrollbar-thumb { background: #e2e5ea; border-radius: 3px; }
.pk-group { font-size: .74rem; font-weight: 800; color: #667085; padding: 1.1rem .7rem .4rem; letter-spacing: .02em; }
.pk-group + .pk-group { border-top: 0; }
.pk-sep { height: 1px; background: var(--pk-line); margin: .8rem .2rem .2rem; }
.pk-link { display: flex; align-items: center; gap: .8rem; padding: .62rem .8rem; margin: .1rem 0; border-radius: 8px; color: #475467; font-weight: 700; font-size: .9rem; cursor: pointer; position: relative; white-space: nowrap; }
.pk-link > .bi:first-child { font-size: 1.1rem; width: 1.25rem; text-align: center; color: #667085; flex: 0 0 auto; }
.pk-link:hover { background: #f6f7f9; color: var(--pk-navy); }
.pk-link.active, .pk-link[aria-expanded="true"].has-active { background: var(--pk-orange-soft); color: var(--pk-orange-dark); }
.pk-link.active > .bi:first-child, .pk-link.has-active > .bi:first-child { color: var(--pk-orange-dark); }
.pk-link .pk-chev { margin-left: auto; font-size: .7rem; color: #98a2b3; transition: transform .2s; }
.pk-link[aria-expanded="true"] .pk-chev { transform: rotate(90deg); }
.pk-sub { display: block; padding: .48rem .8rem .48rem 3.15rem; color: #667085; font-weight: 600; font-size: .86rem; border-radius: 8px; position: relative; white-space: nowrap; }
.pk-sub::before { content: ""; position: absolute; left: 1.75rem; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #c6ccd6; transform: translateY(-50%); }
.pk-sub:hover { color: var(--pk-navy); background: #f6f7f9; }
.pk-sub.active { color: var(--pk-orange-dark); font-weight: 800; }
.pk-sub.active::before { background: var(--pk-orange); }

.pk-main { margin-left: var(--pk-side-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .22s ease; min-width: 0; }
.pk-top { position: sticky; top: 0; z-index: 1030; height: var(--pk-top-h); background: #fff; border-bottom: 1px solid var(--pk-line); display: flex; align-items: center; gap: .85rem; padding: 0 1.5rem; }
.pk-burger { display: none; border: 0; background: #f2f4f7; width: 38px; height: 38px; border-radius: 9px; font-size: 1.3rem; color: var(--pk-navy); align-items: center; justify-content: center; }
.pk-search { position: relative; flex: 1 1 220px; max-width: 320px; min-width: 150px; }
.pk-search .bi-search { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #98a2b3; }
.pk-search input { padding-left: 2.3rem; padding-right: 3.6rem; background: #fff; border: 1px solid var(--pk-line); height: 42px; }
.pk-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #f2f4f7; color: #667085; font-family: inherit; font-weight: 700; font-size: .7rem; padding: .18rem .45rem; border-radius: 6px; border: 0; }
.pk-top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.pk-top-right .btn { white-space: nowrap; }
.pk-loc { display: inline-flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid var(--pk-line); border-radius: 10px; padding: .32rem .8rem .32rem .4rem; text-align: left; color: var(--pk-navy); min-width: 0; }
.pk-loc .pk-loc-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--pk-orange-soft); color: var(--pk-orange-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; }
.pk-loc small { display: block; font-size: .6rem; letter-spacing: .09em; font-weight: 800; color: #98a2b3; line-height: 1.1; text-transform: uppercase; }
.pk-loc span.n { display: block; font-weight: 800; font-size: .86rem; line-height: 1.2; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-loc.warn { border-color: #f6c4c4; background: #fff7f7; }
.pk-loc.warn .pk-loc-ico { background: #fdeeee; color: var(--pk-red); }
.pk-loc::after { color: #98a2b3; }
.pk-loc.no-caret::after { display: none; }
.pk-iconbtn { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--pk-line); color: #475467; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; position: relative; padding: 0; }
.pk-iconbtn:hover { background: var(--pk-orange-soft); color: var(--pk-orange-dark); border-color: #ffd2a1; }
.pk-iconbtn .dot { position: absolute; top: -5px; right: -5px; background: var(--pk-red); color: #fff; font-size: .62rem; font-weight: 800; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }
.pk-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--pk-orange), #ff7a2f); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; border: 0; padding: 0; text-transform: uppercase; }
.pk-avatar.lg { width: 44px; height: 44px; }
.pk-content { padding: 1.5rem 1.6rem 1rem; flex: 1 1 auto; }
.pk-foot { padding: 1rem 1.6rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; color: var(--pk-muted); font-size: .82rem; border-top: 1px solid var(--pk-line); background: #fff; margin-top: 1.5rem; }
.pk-foot a { color: var(--pk-orange-dark); font-weight: 700; }
.pk-overlay { display: none; }

/* collapsed sidebar (desktop) */
body.side-collapsed .pk-side { width: var(--pk-side-w-collapsed); }
body.side-collapsed .pk-main { margin-left: var(--pk-side-w-collapsed); }
body.side-collapsed .pk-collapse-btn .bi { transform: rotate(180deg); }
body.side-collapsed .pk-brand { padding: 0; justify-content: center; }
body.side-collapsed .pk-brand .pk-word, body.side-collapsed .pk-link > span, body.side-collapsed .pk-link .pk-chev, body.side-collapsed .pk-group, body.side-collapsed .pk-sub, body.side-collapsed .collapse.show { display: none !important; }
body.side-collapsed .pk-sep { margin: .6rem .4rem; }
body.side-collapsed .pk-nav { padding: .6rem .75rem; overflow-x: hidden; }
body.side-collapsed .pk-link { justify-content: center; padding: .7rem 0; }

/* mobile: off-canvas */
@media (max-width: 991.98px) {
  .pk-side { transform: translateX(-100%); width: var(--pk-side-w) !important; box-shadow: none; }
  body.side-open .pk-side { transform: none; box-shadow: 0 0 40px rgba(16, 24, 40, .25); }
  body.side-open .pk-overlay { display: block; position: fixed; inset: 0; background: rgba(16, 24, 40, .45); z-index: 1035; }
  .pk-main, body.side-collapsed .pk-main { margin-left: 0; }
  body.side-collapsed .pk-brand .pk-word, body.side-collapsed .pk-link > span, body.side-collapsed .pk-link .pk-chev, body.side-collapsed .pk-group, body.side-collapsed .pk-sub { display: initial !important; }
  body.side-collapsed .pk-link { justify-content: flex-start; padding: .62rem .8rem; }
  body.side-collapsed .pk-brand { justify-content: flex-start; padding: 0 1.4rem; }
  .pk-collapse-btn { display: none; }
  .pk-burger { display: inline-flex; }
  .pk-top { padding: 0 1rem; gap: .5rem; }
  .pk-search { flex: 1 1 auto; }
  .pk-content { padding: 1rem; }
  .pk-hide-md { display: none !important; }
}
@media (max-width: 575.98px) {
  .pk-search, .pk-hide-sm { display: none !important; }
  .pk-top { gap: .6rem; }
  .pk-top-right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .pk-top-right .dropdown:has(> .pk-loc) { flex: 1 1 auto; min-width: 0; }
  .pk-loc { width: 100%; max-width: none; }
  .pk-loc .text-start { min-width: 0; flex: 1 1 auto; }
  .pk-loc span.n { max-width: none; }
  .page-head h1 { font-size: 1.15rem; }
  .tbl-toolbar .search { max-width: none; flex-basis: 100%; }
  .tbl-toolbar .filters { width: 100%; }
  .tbl-toolbar .filters > .form-select, .tbl-toolbar .filters > [data-ac] { flex: 1 1 140px; }
  .pk-content { padding: .9rem .8rem; }
}
.pk-side-search { display: none; padding: .8rem 1rem 0; }
@media (max-width: 991.98px) { .pk-side-search { display: block; } }
.pk-side-search input { height: 40px; }

/* ==========================================================================
   Page building blocks
   ========================================================================== */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.15rem; }
.page-head h1 { font-size: 1.3rem; margin: 0; line-height: 1.25; }
.page-head p { margin: .15rem 0 0; color: var(--pk-muted); font-size: .86rem; font-weight: 600; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* legacy headings on pages that were not converted */
.pk-content > h1.h4, .pk-content > div > h1.h4 { font-size: 1.3rem; font-weight: 800; }
.pk-content > h1.h4 { margin-bottom: 1rem !important; }

/* Import/export wizard: a sticky footer bar so the primary actions (Back / Save / Continue) never scroll out of reach. */
.pk-stickybar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--pk-line); padding: .8rem 1rem; margin: 1rem -1rem -1rem; border-radius: 0 0 var(--pk-radius) var(--pk-radius); z-index: 5; }
.imp-map-row { display: grid; grid-template-columns: 1.3fr 1.3fr .9fr; gap: .6rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--pk-line); }
.imp-map-row.mapped { background: rgba(34, 160, 107, .05); } .imp-map-row.suggested { background: rgba(255, 194, 71, .08); } .imp-map-row.ignored { opacity: .55; } .imp-map-row.missing-required { background: rgba(240, 68, 56, .06); }
.imp-searchsel { position: relative; } .imp-searchsel input.ss-search { display: none; }
.imp-searchsel.open input.ss-search { display: block; }
.imp-searchsel .ss-list { position: absolute; z-index: 20; background: #fff; border: 1px solid var(--pk-line); border-radius: 8px; box-shadow: 0 6px 18px rgba(16, 24, 40, .12); max-height: 220px; overflow-y: auto; width: 100%; display: none; }
.imp-searchsel.open .ss-list { display: block; }
.imp-searchsel .ss-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .4rem .7rem; font-size: .85rem; }
.imp-searchsel .ss-list button:hover, .imp-searchsel .ss-list button.hi { background: var(--pk-bg); }
@media (max-width: 767px) { .imp-map-row { grid-template-columns: 1fr; } }
.imp-progress-wrap { max-width: 520px; margin: 2rem auto; text-align: center; }
.tbl-card { background: #fff; border: 1px solid var(--pk-line); border-radius: var(--pk-radius); box-shadow: 0 1px 2px rgba(16, 24, 40, .03); overflow: hidden; }
.tbl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--pk-line); }
.tbl-toolbar .search { position: relative; flex: 1 1 240px; max-width: 320px; }
.tbl-toolbar .search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #98a2b3; }
.tbl-toolbar .search input { padding-left: 2.2rem; }
.tbl-toolbar .filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tbl-toolbar .filters > * { min-width: 130px; }
.tbl-toolbar .filters > .form-select, .tbl-toolbar .filters > .form-control { width: auto; flex: 0 1 150px; }
.tbl-toolbar .filters > [data-ac] { flex: 0 1 175px; }
.tbl-toolbar .filters > .btn { flex: 0 0 auto; min-width: 0; }
.tbl-toolbar .filters .input-group .form-control { min-width: 0; width: 1%; }
.tbl-toolbar .filters .form-select, .tbl-toolbar .filters .form-control { min-height: 38px; font-size: .84rem; }
.tbl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-top: 1px solid var(--pk-line); color: var(--pk-muted); font-size: .84rem; font-weight: 600; }
.tbl-foot .perpage { display: flex; align-items: center; gap: .5rem; }
.tbl-foot .perpage select { width: auto; min-height: 34px; padding: .2rem 1.8rem .2rem .6rem; }
.tbl-card .table thead th:first-child, .tbl-card .table tbody td:first-child { padding-left: 1.1rem; }
.tbl-card .table thead th:last-child, .tbl-card .table tbody td:last-child { padding-right: 1.1rem; }
.acts { display: flex; gap: .35rem; justify-content: flex-end; }

/* ---------- Dashboard ---------- */
.stat-card { border-radius: 12px; padding: 1.15rem 1.25rem; color: #fff; display: flex; align-items: center; gap: 1rem; height: 100%; position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.stat-card .ico { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: 0 0 auto; z-index: 1; }
.stat-card .lbl { font-size: .84rem; font-weight: 700; opacity: .92; }
.stat-card .val { font-size: 1.55rem; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.stat-card small { display: inline-block; margin-top: .15rem; background: rgba(255, 255, 255, .92); color: #167a42; font-weight: 800; padding: .05rem .5rem; border-radius: 5px; font-size: .68rem; }
.stat-card.orange { background: var(--pk-orange); } .stat-card.orange .ico { color: var(--pk-orange-dark); }
.stat-card.navy { background: var(--pk-navy); } .stat-card.navy .ico { color: var(--pk-navy); }
.stat-card.teal { background: var(--pk-teal); } .stat-card.teal .ico { color: var(--pk-teal); }
.stat-card.blue { background: var(--pk-blue); } .stat-card.blue .ico { color: var(--pk-blue); }
.mini-card { background: #fff; border: 1px solid var(--pk-line); border-radius: 12px; padding: 1.1rem 1.25rem; height: 100%; }
.mini-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.mini-card .val { font-size: 1.4rem; font-weight: 900; color: var(--pk-navy); line-height: 1.2; }
.mini-card .lbl { color: var(--pk-muted); font-weight: 700; font-size: .84rem; }
.mini-card .ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
.mini-card .foot { border-top: 1px solid var(--pk-line); margin-top: .85rem; padding-top: .7rem; display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; }
.mini-card .foot a { color: var(--pk-navy); text-decoration: underline; }
.ico-teal { background: #e3f6f3; color: var(--pk-teal); } .ico-orange { background: #fff0df; color: var(--pk-orange-dark); }
.ico-red { background: #fdeaea; color: var(--pk-red); } .ico-violet { background: #efe9ff; color: #6d4bd8; } .ico-blue { background: #e6f0ff; color: var(--pk-blue); } .ico-green { background: #e5f8ee; color: #1e9e55; }
.panel { background: #fff; border: 1px solid var(--pk-line); border-radius: 12px; height: 100%; display: flex; flex-direction: column; }
.panel-h { display: flex; align-items: center; gap: .65rem; padding: .95rem 1.15rem; border-bottom: 1px solid var(--pk-line); }
.panel-h .pico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.panel-h h2 { font-size: 1rem; margin: 0; font-weight: 800; }
.panel-h .more { margin-left: auto; font-size: .8rem; font-weight: 700; padding: .3rem .8rem; border: 1px solid var(--pk-line); border-radius: 7px; color: var(--pk-navy); background: #fff; }
.panel-h .more:hover { background: var(--pk-orange-soft); color: var(--pk-orange-dark); border-color: #ffd2a1; }
.panel-b { padding: 1rem 1.15rem; flex: 1 1 auto; }
.panel .table { font-size: .86rem; }
.legend { display: flex; gap: 1rem; font-size: .8rem; font-weight: 700; color: var(--pk-muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }
.bars { display: flex; align-items: flex-end; gap: .55rem; height: 190px; padding-top: 6px; }
.bars .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.bars .pair { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bars .b { width: 42%; max-width: 20px; border-radius: 5px 5px 0 0; min-height: 3px; position: relative; }
.bars .b.in { background: var(--pk-orange); } .bars .b.out { background: #ffe0bd; }
.bars .b:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--pk-navy); color: #fff; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; white-space: nowrap; margin-bottom: 4px; z-index: 5; }
.bars .x { font-size: .68rem; color: #98a2b3; font-weight: 700; }
.empty { text-align: center; color: var(--pk-muted); padding: 1.6rem 1rem; font-weight: 600; }
.empty .bi { font-size: 1.8rem; color: #ccd2db; display: block; margin-bottom: .35rem; }
.quick { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; background: #f8f9fb; border: 1px solid var(--pk-line); border-radius: 10px; color: var(--pk-navy); font-weight: 800; height: 100%; }
.quick .qi { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--pk-orange-dark); font-size: 1.15rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.quick .bi-chevron-right { margin-left: auto; color: #98a2b3; font-size: .8rem; }
.quick:hover { border-color: #ffd2a1; background: var(--pk-orange-soft); color: var(--pk-orange-dark); }

/* ---------- Permission grid / autocomplete tweaks ---------- */
.perm-grid .form-check { min-width: 230px; }
.temp-password { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: .06em; user-select: all; }
.list-group.shadow-sm { border-radius: 10px; overflow: hidden; }
.tagchip { font-weight: 700; padding: .4em .7em; }

/* ---------- Auth pages ---------- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background:
  radial-gradient(900px 500px at 12% -10%, #ffe8cc 0, transparent 60%), radial-gradient(800px 500px at 100% 110%, #dbeafe 0, transparent 55%), var(--pk-bg); }
.auth-box { width: 100%; max-width: 440px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.auth-logo a { display: inline-flex; align-items: center; gap: .6rem; color: var(--pk-navy); font-weight: 900; font-size: 1.7rem; }
.auth-logo .pk-word b { color: var(--pk-orange); }
.auth-box .card { border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(16, 24, 40, .1); }
.auth-box .card-body { padding: 2rem !important; }
.auth-box h1 { font-size: 1.35rem; }

/* misc */
.min-vw-0 { min-width: 0; }
@media print { .pk-side, .pk-top, .pk-foot, .pk-overlay, .pk-collapse-btn { display: none !important; } .pk-main { margin: 0 !important; } .pk-content { padding: 0; } }

/* ---------- "Create new" pop-up (opened from search boxes with Enter) ---------- */
.pk-modal-back { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 1rem 2rem; overflow-y: auto; }
.pk-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 540px; box-shadow: 0 25px 60px rgba(16, 24, 40, .3); animation: pkPop .16s ease-out; }
@keyframes pkPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.pk-modal-h { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--pk-line); }
.pk-modal-h h2 { font-size: 1.05rem; margin: 0; }
.pk-modal-x { border: 0; background: #f2f4f7; width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: #475467; }
.pk-modal-x:hover { background: var(--pk-orange-soft); color: var(--pk-orange-dark); }
.pk-modal-b { padding: 1.1rem 1.25rem; }
.pk-modal-f { display: flex; justify-content: flex-end; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid var(--pk-line); background: #fafbfc; border-radius: 0 0 14px 14px; }
.pk-similar { background: #fff8ee; border: 1px solid #ffe0bd; border-radius: 10px; padding: .8rem; }
.pk-similar .list-group-item { border-color: #f5e3c8; }
body.pk-modal-open { overflow: hidden; }
.invalid-feedback { font-weight: 600; }
.form-control.is-invalid { border-color: var(--pk-red); }
.pk-modal-wide { max-width: 700px; }

/* ---------- Purchase entry grid ---------- */
.pt-wrap { overflow-x: auto; }
.pt-table { min-width: 1180px; }
.pt-table th { white-space: nowrap; font-size: .74rem; }
.pt-table td { padding: .4rem .45rem !important; vertical-align: middle; }
.pt-table .form-control, .pt-table .form-select { min-height: 32px; padding: .25rem .45rem; font-size: .82rem; }
.pt-table .w-qty { width: 78px; } .pt-table .w-money { width: 96px; } .pt-table .w-date { width: 128px; } .pt-table .w-batch { width: 108px; } .pt-table .w-tax { width: 118px; } .pt-table .w-disc { width: 66px; }
.pt-table tr.pt-flash > td { background: #fff4e8; transition: background .8s; }
.pt-table .pt-name { min-width: 190px; }
.pt-total-row td { font-weight: 800; }
.pt-side .row-line { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--pk-line); }
.pt-side .row-line.big { font-size: 1.05rem; font-weight: 900; border-bottom: 0; color: var(--pk-navy); }
.pt-hide { display: none !important; }

/* notification bell */
.pk-bell-dot{position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:#ea5455;border:2px solid #fff}

/* pets / customers */
.pk-avatar{width:56px;height:56px;border-radius:50%;background:#fff3e4;color:#e8890c;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex:0 0 auto}
.pk-avatar.lg{width:96px;height:96px;font-size:2rem}
.pk-pet-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pk-alert-banner{border-radius:12px;padding:.75rem 1rem;background:#fdecec;border:1px solid #f5b5b5;color:#8f1d1d}
.pk-alert-banner .badge{font-size:.85rem}
.pk-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #dfe3ea;border-radius:999px;padding:.2rem .7rem;cursor:pointer;user-select:none;font-size:.9rem;background:#fff}
.pk-chip input{display:none}.pk-chip:has(input:checked){background:#fff3e4;border-color:#ff9f43;color:#a85f05;font-weight:700}

/* ---- POS ---- */
.pos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: 16px; align-items: start; }
.pos-searchbar { position: sticky; top: 0; z-index: 5; background: var(--pk-bg, #f7f8fa); padding-bottom: 8px; }
.pos-search { display: flex; gap: 8px; align-items: center; position: relative; } .pos-search > i { position: absolute; left: 14px; font-size: 1.3rem; color: #888; z-index: 1; } .pos-search input { padding-left: 44px; }
.pos-msg { min-height: 1.4em; padding: 2px 4px; color: #555; } .pos-msg.err { color: #c0392b; font-weight: 700; } .pos-msg.ok { color: #1e8449; }
.pos-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pos-hint { grid-column: 1 / -1; text-align: center; padding: 60px 10px; color: #888; } .pos-hint > i { font-size: 3rem; display: block; margin-bottom: 8px; }
.pos-card { border: 1px solid #e3e6ec; border-radius: 12px; background: #fff; padding: 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 130px; }
.pos-card:hover, .pos-card.active { border-color: #ff9f43; box-shadow: 0 0 0 2px #ffe2c2; } .pos-card img, .pos-card .ph { width: 100%; height: 70px; object-fit: contain; border-radius: 8px; background: #f4f5f8; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #b0b6c3; }
.pos-card .nm { font-weight: 700; font-size: .9rem; line-height: 1.2; } .pos-card .pr { font-weight: 800; color: #e8890c; } .pos-card .st { font-size: .75rem; }
.pos-card.out { opacity: .55; }
.pos-cartcard { position: sticky; top: 8px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; }
.pos-cust { padding: 12px; border-bottom: 1px solid #eee; } .pos-petalert { margin-top: 8px; }
.pos-cart { overflow-y: auto; flex: 1 1 auto; min-height: 120px; padding: 6px 10px; }
.pl { border-bottom: 1px dashed #e3e6ec; padding: 8px 0; } .pl.warn { background: #fff6e8; } .pl.bad { background: #fdecec; }
.pl-main { display: flex; gap: 8px; align-items: center; } .pl-main img, .pl-main .ph { width: 38px; height: 38px; object-fit: contain; border-radius: 6px; background: #f4f5f8; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: #aaa; }
.pl-name { flex: 1 1 auto; min-width: 0; } .pl-name b { display: block; font-size: .92rem; line-height: 1.2; } .pl-name small { color: #777; }
.pl-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.pl .qty { display: inline-flex; align-items: center; } .pl .qty input { width: 64px; text-align: center; } .pl .qty button { width: 34px; height: 34px; padding: 0; }
.pl .price { display: inline-flex; align-items: center; gap: 2px; } .pl .price input { width: 84px; text-align: right; } .pl .disc { display: inline-flex; gap: 4px; } .pl .disc input { width: 70px; } .pl .disc select { width: 58px; }
.pl .tot { margin-left: auto; font-weight: 800; } .pl .wmsg { font-size: .78rem; color: #b45f06; margin-top: 2px; } .pl.bad .wmsg { color: #c0392b; }
.pl select.bsel { max-width: 200px; font-size: .8rem; }
.pos-totals { padding: 12px; border-top: 1px solid #eee; background: #fafbfc; border-radius: 0 0 12px 12px; } .pos-grand { font-size: 1.5rem; font-weight: 800; border-top: 1px solid #ddd; margin-top: 6px; padding-top: 6px; }
.pos-paysum { background: #f4f6f9; border-radius: 10px; padding: 10px 12px; } .payrow { border: 1px solid #e3e6ec; border-radius: 10px; padding: 8px; margin-bottom: 8px; } .payrow .row { --bs-gutter-x: .5rem; }
@media (max-width: 991px) { .pos { grid-template-columns: 1fr; } .pos-cartcard { position: static; max-height: none; } .pos-results { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* ---- Clinical: consultation workspace (Phase 24) ---- */
.pk-cw-grid { padding-bottom: 76px; }
.pk-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
button.pk-chip { border-width: 1px; background: #fff; }
.pk-chip.active, button.pk-chip.active { background: var(--pk-orange-soft); border-color: var(--pk-orange); color: var(--pk-orange-dark); font-weight: 700; }
.pk-cw-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--pk-orange-soft); color: var(--pk-orange-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; flex: 0 0 auto; text-transform: uppercase; }
.pk-cw-bar { position: sticky; bottom: 0; left: 0; right: 0; background: var(--pk-card); border-top: 1px solid var(--pk-line); padding: .7rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; border-radius: var(--pk-radius); box-shadow: 0 -2px 10px rgba(9,44,76,.06); z-index: 5; }
.pk-cw-bar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
#cwRxTable td { vertical-align: top; padding: .35rem; }
#cwRxTable input, #cwRxTable select { font-size: .8rem; }
.pk-cw .card { border-radius: var(--pk-radius); }
.pk-rec { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 1px solid var(--pk-line); border-radius: 8px; }
.pk-rec-actions .btn { font-size: .72rem; padding: .18rem .5rem; }
.pk-chip-sm { font-size: .75rem; padding: .12rem .55rem; }
@media (max-width: 991px) { .pk-cw-bar { position: static; margin: 1rem 0; } }
@media (max-width: 575.98px) {
  .pk-cw-bar { flex-direction: column; align-items: stretch; }
  .pk-cw-bar-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pk-cw-bar-actions .btn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk-kbd-hint { display: none; }
}