/* PETCLINIC Essential – foundation.css
   One shared visual baseline for the application shell and the clinic module.
   Replaces: typography.css (fonts now imported below), app-layout.css,
   ui-foundation.css, clinic-ui.css, pet-workspace.css, treatment-cases.css,
   goods-ui.css and goods-b2b.css (shared goods/transactions layout).
   Tokens mirror the Figma design system (file mNylehAzPDW33IPIlmYHJn):
   Primitives / Color / Spacing / Radius / Size. Legacy variable names
   (--app-*, --ui-*, --clinic-*, --pet-*) stay as aliases so untouched
   module stylesheets keep working. Load order: after bootstrap-custom.css and
   style.css, after b2b-style-redesign.css (the left-navigation shell) so the tablet layer wins. */
@import url("/css/typography.css?v=2");

:root {
  /* Primitives */
  --pc-blue-50:#eaf2fe; --pc-blue-100:#d2e3fc; --pc-blue-300:#8fb8f5; --pc-blue-500:#1769e0; --pc-blue-600:#1257bd; --pc-blue-700:#0e4699;
  --pc-navy-900:#172b4d; --pc-navy-800:#1f3a68;
  --pc-gray-0:#ffffff; --pc-gray-50:#f8fafc; --pc-gray-100:#f1f5f9; --pc-gray-200:#e2e8f0; --pc-gray-300:#cbd5e1; --pc-gray-400:#94a3b8; --pc-gray-500:#64748b; --pc-gray-600:#475569; --pc-gray-700:#334155; --pc-gray-900:#0f172a;
  --pc-green-50:#ecfdf5; --pc-green-600:#059669; --pc-green-700:#047857;
  --pc-amber-50:#fffbeb; --pc-amber-700:#b45309;
  --pc-red-50:#fef2f2; --pc-red-600:#dc2626; --pc-red-700:#b91c1c;

  /* Color (semantic) */
  --color-bg-page:#f5f7fb; --color-bg-surface:var(--pc-gray-0); --color-bg-surface-soft:var(--pc-gray-50);
  --color-bg-sidebar:var(--pc-navy-900); --color-bg-sidebar-active:var(--pc-navy-800);
  --color-bg-primary:var(--pc-blue-500); --color-bg-primary-hover:var(--pc-blue-600); --color-bg-primary-soft:var(--pc-blue-50);
  --color-bg-success:var(--pc-green-600); --color-bg-success-soft:var(--pc-green-50);
  --color-bg-warning-soft:var(--pc-amber-50); --color-bg-danger:var(--pc-red-600); --color-bg-danger-soft:var(--pc-red-50);
  --color-text-primary:var(--pc-navy-900); --color-text-secondary:var(--pc-gray-600); --color-text-muted:var(--pc-gray-500);
  --color-text-on-primary:var(--pc-gray-0); --color-text-link:var(--pc-blue-500);
  --color-text-success:var(--pc-green-700); --color-text-warning:var(--pc-amber-700); --color-text-danger:var(--pc-red-700);
  --color-border-default:#dce4ee; --color-border-strong:var(--pc-gray-300); --color-border-focus:var(--pc-blue-500);
  --color-icon-default:var(--pc-gray-500);

  /* Spacing / Radius / Size */
  --spacing-2xs:4px; --spacing-xs:8px; --spacing-sm:12px; --spacing-md:16px; --spacing-lg:24px; --spacing-xl:32px; --spacing-2xl:48px;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px;
  --size-touch-min:44px; --size-control:48px; --size-control-sm:40px; --size-icon:24px; --size-icon-sm:20px;
  --size-sidebar:260px; --size-sidebar-rail:72px; --size-action-bar:72px;
  --shadow-card:0 2px 8px rgba(23,43,77,.06); --shadow-action-bar:0 -4px 16px rgba(23,43,77,.12); --shadow-modal:0 12px 32px rgba(23,43,77,.2);

  /* Desktop control geometry (touch devices override below) */
  --pc-control-height:42px;
  --pc-control-height-sm:36px;
  --pc-button-height:40px;

  /* Legacy aliases kept for module stylesheets not yet migrated */
  --app-page-width:1680px; --app-page-gutter:24px; --app-page-gap:16px;
  --app-font-family:var(--pc-font,"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif);
  --app-text-primary:var(--color-text-primary); --app-text-secondary:var(--color-text-secondary); --app-text-muted:var(--color-text-muted);
  --app-border:var(--color-border-default); --app-surface:var(--color-bg-surface); --app-surface-soft:var(--color-bg-surface-soft);
  --app-background:var(--color-bg-page); --app-primary:var(--color-bg-primary);
  --ui-font:var(--app-font-family); --ui-text:var(--color-text-primary); --ui-text-secondary:var(--color-text-secondary); --ui-text-muted:var(--color-text-muted);
  --ui-border:var(--color-border-strong); --ui-focus:var(--color-border-focus); --ui-control-height:var(--pc-control-height); --ui-control-radius:7px;
  --clinic-blue:var(--color-bg-primary); --clinic-ink:var(--color-text-primary); --clinic-border:var(--color-border-default);
  --goods-primary:var(--color-bg-primary); --goods-ink:var(--color-text-primary);
}

/* Touch devices (iPad, Android tablets, phones): larger controls and tap targets. */
@media (pointer: coarse), (max-width: 1024px) {
  :root {
    --pc-control-height:var(--size-control);
    --pc-control-height-sm:var(--size-control-sm);
    --pc-button-height:var(--size-touch-min);
    --app-page-gutter:16px;
  }
}
/* ===================== Page geometry (ex app-layout.css) =====================
   The left-navigation shell (b2b-style-redesign.css) owns the main content offset;
   the legacy centred geometry below only applies when the shell is absent. */
/* Shared screen geometry. Page-specific styles own content, never the outer shell. */
@media screen {
 body { min-height:100vh; display:flex; flex-direction:column; background:var(--app-background); color:var(--app-text-primary); font-family:var(--app-font-family); }
 body:not(.petclinic-b2b-shell) main.app-page-main.container-fluid { box-sizing:border-box; width:100%; max-width:var(--app-page-width)!important; min-width:0; height:auto!important; margin:0 auto!important; padding:88px var(--app-page-gutter) 24px!important; flex:1 0 auto; overflow:visible!important; }
 body main.app-page-main>.container, body main.app-page-main>.container-fluid,
 body main.app-page-main .clinic-screen, body main.app-page-main .pet-profile,
 body main.app-page-main .tc-page, body main.app-page-main>.goods-workspace { width:100%; max-width:none!important; min-width:0; margin:0!important; padding:0!important; }
 body>footer.bg-light { position:static!important; width:100%; margin:0!important; padding:16px var(--app-page-gutter)!important; flex-shrink:0; }
 body main.app-page-main .component-pagination { width:100%; margin:16px 0 0!important; padding:12px 0; border-top:1px solid #dce4ee; }
 body main.app-page-main .component-pagination>.col-12 { padding:0; }
 body main.app-page-main .component-pagination .d-flex { flex-wrap:wrap; min-width:0; }
 body main.app-page-main .component-pagination label { white-space:nowrap; }
 body main.app-page-main .component-pagination select { flex:0 0 88px; width:88px!important; }
 body main.app-page-main .component-pagination .pagination { flex-wrap:wrap; gap:4px; }
 body main.app-page-main .table-responsive { max-width:100%; }
 body main.app-page-main .goods-filter-bar { margin-bottom:16px!important; }
 body main.app-page-main form.app-list-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:0; }
 body main.app-page-main form.app-list-filters>[class*="col-"] { flex:1 1 180px; width:auto; min-width:0; margin:0; padding:0; }
 body main.app-page-main form.app-list-filters .select2-container { width:100%!important; max-width:100%; }
 body main.app-page-main .app-list-filters .btn { white-space:nowrap; }
 body main.app-page-main .tc-filters label, body main.app-page-main .pet-filter-panel label { min-width:min(180px,100%); }
 @media(max-width:767px) { :root { --app-page-gutter:12px; } body main.app-page-main form.app-list-filters>[class*="col-"] { flex-basis:220px; } }
}

@media screen {
 html { scrollbar-gutter:stable; }
 body main.app-page-main .goods-heading.row { margin-left:0; margin-right:0; }
 body main.app-page-main .goods-heading.row>.col-12 { padding-left:0; padding-right:0; }
 body main.app-page-main .goods-sidebar .quick-date-widget .card-body { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px!important; }
 body main.app-page-main .goods-sidebar .quick-date-widget i { margin:0!important; }
 body main.app-page-main .goods-sidebar .quick-date-widget { min-height:38px; }
}

/* Transaction lists share the same filter row, independent of legacy wrappers. */
@media screen {
 body.goods-ui main.app-page-main form.transaction-filter-form,
 body.goods-ui main.app-page-main form.transaction-filter-form>.row,
 body.goods-ui main.app-page-main form.transaction-filter-form>.filter-inputs { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:0; padding:0; }
 body.goods-ui main.app-page-main form.transaction-filter-form:has(>.row,>.filter-inputs) { display:block; }
 body.goods-ui main.app-page-main form.transaction-filter-form>[class*="col-"],
 body.goods-ui main.app-page-main form.transaction-filter-form>.row>[class*="col-"],
 body.goods-ui main.app-page-main form.transaction-filter-form .filter-input { flex:1 1 180px; width:auto; min-width:0; padding:0; margin:0; }
 body.goods-ui main.app-page-main form.transaction-filter-form .form-label { font-size:13px; margin-bottom:6px; }
 body.goods-ui main.app-page-main form.transaction-filter-form .form-control,
 body.goods-ui main.app-page-main form.transaction-filter-form .form-select { min-height:38px; }
 body.goods-ui main.app-page-main form.transaction-filter-form .select2-container { width:100%!important; }
 body.goods-ui main.app-page-main form.transaction-filter-form .d-flex { flex-wrap:wrap; }
 body.goods-ui main.app-page-main form.transaction-filter-form .btn { white-space:nowrap; }
 body.goods-ui main.app-page-main .goods-table-panel>.card { margin-bottom:0; }
}

@media screen {
 body.goods-ui main.app-page-main .card-body:has(>form.transaction-filter-form) { padding:16px!important; }
 body.goods-ui main.app-page-main .goods-workspace>div:has(>.component-pagination) { margin-top:0!important; padding:0!important; }
body.goods-ui main.app-page-main .goods-workspace .card:has(> .card-body>form.transaction-filter-form) { margin-bottom:16px!important; }
}

/* Shared visual baseline: Clinic, Goods and Transactions. Keep this block last. */
@media screen {
 body,
 body.goods-ui {
  background:var(--app-background)!important;
  color:var(--app-text-primary)!important;
  font-family:var(--app-font-family)!important;
 }
 body.goods-ui:not(.petclinic-b2b-shell) main.app-page-main.container-fluid {
  width:100%!important;
  max-width:var(--app-page-width)!important;
  margin:0 auto!important;
  padding:88px var(--app-page-gutter) 24px!important;
 }
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace,#customerWorkspace),
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace) > .pet-profile {
  box-sizing:border-box;
  width:100%!important;
  max-width:none!important;
  min-width:0;
  margin:0!important;
  color:var(--app-text-primary)!important;
  font-family:var(--app-font-family)!important;
 }
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace,#customerWorkspace) :is(h1,h2,h3,h4,h5,h6) {
  color:var(--app-text-primary);
  font-family:inherit;
 }
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace,#customerWorkspace) :is(p,td,dd,label,input,select,textarea,button,a) {
  font-family:inherit;
 }
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace,#customerWorkspace) :is(.text-muted,small,.clinic-secondary,.pet-profile-note) {
  color:var(--app-text-muted)!important;
 }
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace,#customerWorkspace) :is(.card,.clinic-list,.tc-card,.pet-profile-card,.pet-filter-panel,.clinic-table-card) {
  border-color:var(--app-border)!important;
 }
 body main.app-page-main :is(.clinic-screen,.pet-profile-screen,.tc-page,.goods-workspace,#customerWorkspace) table thead th {
  color:var(--app-text-secondary)!important;
 }
 body main.app-page-main :is(.clinic-screen,.tc-page,.goods-workspace) {
  padding-left:0!important;
  padding-right:0!important;
 }
}

@media screen and (max-width:767px) {
 body.goods-ui:not(.petclinic-b2b-shell) main.app-page-main.container-fluid {
  padding:80px var(--app-page-gutter) 20px!important;
 }
}
/* The global topbar is the single page-title surface. The layout script marks
   only an exact duplicate first content heading, so section headings remain. */
.pc-repeated-content-title,
.pc-repeated-content-title-only,
.pc-repeated-content-title-row {
  display: none !important;
}

.pc-repeated-title-actions-row {
  justify-content: flex-end !important;
}
.pc-topbar-account-button{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:1px solid #d7e2ef;border-radius:999px;background:#fff;color:#526078;font:inherit;font-weight:700}.pc-topbar-account-button:hover,.pc-topbar-account-button:focus{border-color:#1769e8;color:#1769e8}.pc-topbar-account .dropdown-menu{min-width:210px}
/* ===================== Shared controls (ex ui-foundation.css) ===================== */
/* PETCLINIC Essential shared screen typography and form geometry.
   Loaded after page styles so legacy screens use one visual baseline. */
@media screen {
  html,
  body,
  button,
  input,
  select,
  textarea,
  .btn,
  .form-control,
  .form-select,
  .dropdown-menu,
  .modal,
  .select2-container {
    font-family: var(--ui-font) !important;
  }

  body {
    color: var(--ui-text);
    font-size: 14px;
    line-height: 1.5;
  }

  body :is(h1, .h1) { font-size: 30px; line-height: 1.25; }
  body :is(h2, .h2) { font-size: 24px; line-height: 1.3; }
  body :is(h3, .h3, h4, .h4, h5, .h5, h6, .h6) { font-size: 16px; line-height: 1.4; }
  body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
    color: var(--ui-text);
    font-family: var(--ui-font) !important;
    font-weight: 700;
  }

  body .form-label,
  body form label:not(.form-check-label):not(.visually-hidden):not(.btn),
  body .field > span {
    margin-bottom: 6px;
    color: var(--ui-text-secondary);
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px;
  }

  /* ===================== Typography standard (anh Huy đã duyệt) ===================== */
  /* Tiêu đề mục (h3–h6, .card-title, tiêu đề khối): 16px / 700 / #172B4D, text-transform: none */
  body main.app-page-main :is(h3, .h3, h4, .h4, h5, .h5, h6, .h6, .card-title, .clinic-block-title, .pets-title, .tc-card h2, .tc-card h3, .section-title h2, .api-card h2, .notifications-empty h2, .notification-item h2, .crm-care-page h1, .crm-care-page h2, .error-page h1, .error-page h2, .ins-card h2, .ins-empty h2, .attendance-card h2):not(.modal *):not(.modal-title) {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-text-primary) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
  }

  /* Thanh tiêu đề thẻ (.card-header): 14px / 600 / #172B4D */
  body main.app-page-main :is(.card-header, .summary-card-header):not(.modal *) {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text-primary) !important;
  }

  /* Tiêu đề cột bảng (thead th): 12px / 700 / #475569, uppercase, letter-spacing: 0.3px */
  body main.app-page-main table thead th:not(.modal *) {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--color-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
  }

  /* Nhãn ô nhập (.form-label, label trong form): 13px / 600 / #475569 */
  body main.app-page-main :is(.form-label, .form-check-label, form label:not(.visually-hidden):not(.btn), .field > span) {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.4 !important;
    margin-bottom: 6px;
  }

  body .form-control:not(textarea),
  body .input-group-text,
  body .input-group > .btn,
  body .form-control-sm {
    box-sizing: border-box;
    min-height: var(--pc-control-height) !important;
    height: var(--pc-control-height) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    color: var(--ui-text);
    font-size: 14px !important;
    line-height: normal;
    padding: 0 12px !important;
    text-align: left;
  }

  /* Nhiều dòng: textarea giữ chiều cao theo số dòng, chữ vẫn cách mép trái 13px như các ô khác. */
  body textarea.form-control {
    height: auto !important;
    padding: 10px 12px !important;
    line-height: 1.5;
  }

  body .form-select,
  body .form-select-sm {
    box-sizing: border-box;
    min-height: var(--pc-control-height) !important;
    height: var(--pc-control-height) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    color: var(--ui-text);
    font-size: 14px !important;
    line-height: normal;
    padding: 0 36px 0 12px !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    text-align: left;
  }

  body textarea.form-control {
    min-height: 84px;
    border: 1px solid #CBD5E1 !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    color: var(--ui-text);
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 8px 12px !important;
  }

  body :is(.form-control, .form-select)::placeholder,
  body input::placeholder,
  body textarea::placeholder,
  body .select2-container .select2-selection__placeholder {
    color: #7B8798 !important;
    font-size: 14px;
    opacity: 1;
  }

  body .select2-container {
    width: 100% !important;
    max-width: 100%;
    font-size: 14px !important;
  }

  body .select2-container .selection,
  body .select2-container .select2-selection--single {
    display: block;
    box-sizing: border-box;
    min-height: var(--pc-control-height) !important;
    height: var(--pc-control-height) !important;
  }

  body .select2-container .select2-selection--single {
    padding: 0 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    background-image: none !important;
    position: relative;
  }

  body .select2-container .select2-selection--single .select2-selection__rendered {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 36px 0 12px !important;
    margin: 0;
    color: var(--ui-text) !important;
    font-size: 14px !important;
    line-height: normal;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body .select2-container .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #6F7D97 transparent transparent transparent;
    border-width: 6px 6px 0 6px;
    margin-top: -3px;
    margin-left: -6px;
    left: 50%;
    top: 50%;
    position: absolute;
  }

  body .select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    right: 32px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  body .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    min-height: var(--pc-control-height) !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 7px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    padding: 3px 6px !important;
  }

  body .select2-container .select2-search--inline .select2-search__field {
    height: 28px !important;
    margin: 6px 4px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  body .select2-dropdown,
  body .select2-results__option {
    font-family: var(--ui-font) !important;
    font-size: 14px !important;
  }

  body .btn:not(.btn-sm):not(.btn-lg):not(.btn-close) {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--ui-control-radius);
    font-size: 14px !important;
    line-height: 20px;
    font-weight: 600;
  }

  body .input-group > :not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  body .input-group > :not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  body .modal-title { font-size: 20px !important; line-height: 1.35; }
  body .modal-header { min-height: 64px; }
  body .modal-body { color: var(--ui-text); font-size: 14px; }
  body .form-text,
  body small,
  body .text-muted { font-size: 12px; line-height: 1.45; }

  body table { color: var(--ui-text); font-size: 13px; }
  body table thead th { font-size: 12px; line-height: 1.4; }

  /* Editable table cells stay compact, but use one height within their row. */
  body table .form-control:not(textarea),
  body table .form-select,
  body table .input-group-text,
  body table .input-group > .btn {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px !important;
  }

  body :is(.form-control,.form-select,.select2-selection):focus,
  body .select2-container--focus .select2-selection,
  body .select2-container--open .select2-selection {
    border-color: var(--ui-focus) !important;
    box-shadow: 0 0 0 3px rgba(23,105,224,.12) !important;
  }

  /* Legacy module classes keep their structure, while sharing the same
     brand tokens and control geometry as the rest of the application. */
  body.goods-ui,
  body.clinic-ui,
  body.pet-workspace {
    color: var(--ui-text);
    font-family: var(--ui-font) !important;
  }

  body.goods-ui .form-control,
  body.goods-ui .form-select,
  body.clinic-ui .form-control,
  body.clinic-ui .form-select,
  body.pet-workspace .form-control,
  body.pet-workspace .form-select {
    font-family: var(--ui-font) !important;
    color: var(--ui-text);
  }

  body.goods-ui .btn-primary,
  body.clinic-ui .btn-primary,
  body.pet-workspace .btn-primary,
  body.goods-ui .page-item.active .page-link {
    background-color: var(--ui-focus) !important;
    border-color: var(--ui-focus) !important;
  }

  body.clinic-ui .clinic-screen { --clinic-blue: var(--ui-focus); --clinic-ink: var(--ui-text); --clinic-border: var(--ui-border); }
  body.goods-ui .form-label,
  body.clinic-ui .pet-form-label { color: var(--ui-text-secondary) !important; }
  body .pet-initial,
  body .clinic-actions a,
  body .clinic-actions button { color: var(--ui-focus) !important; }
  body .pet-form-control:focus { border-color: var(--ui-focus) !important; }

  @media (max-width: 767px) {
    body :is(h1, .h1) { font-size: 25px; }
    body :is(h2, .h2) { font-size: 21px; }
  }
}
/* ===================== Clinic screens (ex clinic-ui.css) ===================== */
.clinic-screen{--clinic-blue:var(--color-bg-primary);--clinic-border:var(--color-border-default);--clinic-ink:var(--color-text-primary);color:var(--clinic-ink);font-size:14px;max-width:1600px;margin:0 auto;padding:12px 8px 28px}
.clinic-screen .clinic-page-title{font-size:25px;font-weight:700;line-height:1.3;margin:0;letter-spacing:-.4px}
.clinic-screen .clinic-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;width:100%}
.clinic-screen .clinic-head-actions,.clinic-screen .clinic-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.clinic-screen .card,.clinic-screen .clinic-list{border:1px solid var(--clinic-border)!important;border-radius:12px;box-shadow:none!important;background:white;overflow:visible}
.clinic-screen .card-header{background:#f8fafc;border-bottom:1px solid var(--clinic-border)}
.clinic-screen .card-body{padding:20px}.clinic-screen .clinic-list{overflow:hidden;margin-bottom:18px}
.clinic-screen .clinic-data{margin:0;font-size:14px;vertical-align:middle}
.clinic-screen .clinic-data>thead>tr>th{background:#f8fafc!important;color:#53647b!important;font-size:12px;font-weight:600;white-space:nowrap;padding:13px 16px;border:0;border-bottom:1px solid var(--clinic-border)}
.clinic-screen .clinic-data>tbody>tr>td{padding:13px 16px;border-width:0 0 1px;border-color:#edf1f6;vertical-align:middle}
.clinic-screen .clinic-data>tbody>tr:hover{background:#f8fbff}.clinic-screen .clinic-data a{text-decoration:none}
.clinic-screen .clinic-secondary{display:block;color:#64748b;font-size:12px;margin-top:5px}.clinic-screen .clinic-summary-cell{max-width:260px;min-width:150px;overflow-wrap:anywhere}
.clinic-screen .clinic-icon{height:34px;width:34px;display:inline-grid;place-items:center;border:1px solid var(--clinic-border);border-radius:8px;background:white;color:var(--clinic-blue)}
.clinic-screen .clinic-icon:hover{background:#eff6ff}.clinic-screen .clinic-icon:has(.fa-trash){color:#b91c1c}.clinic-screen .clinic-icon:disabled{opacity:.4;cursor:not-allowed}
.clinic-screen .clinic-empty{text-align:center;padding:42px!important;color:#64748b}
.clinic-screen .btn{border-radius:8px;font-weight:600;min-height:var(--pc-button-height);padding:8px 14px;font-size:14px;white-space:nowrap}
.clinic-screen .btn-primary{background:var(--clinic-blue);border-color:var(--clinic-blue)}
.clinic-screen .form-label{font-weight:600;font-size:13px;color:var(--color-text-secondary);margin-bottom:6px}
.clinic-screen .form-control,.clinic-screen .form-select{border:1px solid var(--color-border-strong)!important;border-radius:var(--radius-md)!important;min-height:var(--pc-control-height);font-size:14px}
.clinic-screen textarea.form-control{min-height:88px;resize:vertical}
.clinic-screen :is(input,select,textarea,button,a):focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.clinic-screen .select2-container{max-width:100%}.clinic-screen .select2-selection--single{min-height:var(--pc-control-height)!important;height:var(--pc-control-height)!important;border:1px solid #cbd5e1!important;border-radius:7px!important}
.clinic-screen .modal-dialog{margin:24px auto}.clinic-screen .modal-xl{max-width:min(1120px,calc(100vw - 32px))}.clinic-screen .modal-lg{max-width:min(900px,calc(100vw - 32px))}
.clinic-screen .modal-content{border:1px solid var(--clinic-border);border-radius:14px;box-shadow:0 24px 70px #0f172a30;overflow:hidden}
.clinic-screen .modal-header{background:#fff;padding:18px 24px;border-bottom:1px solid var(--clinic-border);flex-shrink:0}
.clinic-screen .modal-title{font-size:20px;font-weight:700;color:var(--clinic-ink)}.clinic-screen .modal-body{background:#f8fafc;padding:24px}
.clinic-screen .modal-footer{background:white;position:sticky;bottom:0;z-index:3;padding:14px 24px!important;border-top:1px solid var(--clinic-border);gap:8px}
.clinic-screen .clinic-form-block{border:1px solid var(--clinic-border);border-radius:10px;background:#fff;padding:18px;margin-bottom:18px}
.clinic-screen .clinic-block-title{font-size:14px;font-weight:700;margin:0 0 18px;color:#334155}
.clinic-screen .clinic-jump-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}.clinic-screen .clinic-jump-nav button{border:1px solid var(--clinic-border);background:white;color:#475569;border-radius:20px;padding:6px 12px;font-size:12px}
.clinic-screen .clinic-form-block{scroll-margin-top:12px}.clinic-screen .badge{font-weight:600;font-size:12px;border-radius:6px;line-height:1.4}
.clinic-screen .badge.bg-success{background:#e8f6ef!important;color:#166534!important}.clinic-screen .badge.bg-danger{background:#fef2f2!important;color:#b91c1c!important}.clinic-screen .badge.bg-warning{background:#fff7df!important;color:#92400e!important}.clinic-screen .badge.bg-info,.clinic-screen .badge.bg-secondary{background:#eff4fa!important;color:#475569!important}
.clinic-screen .clinic-metrics{margin-bottom:20px;row-gap:12px}.clinic-screen .clinic-metrics .card{background:white!important;color:var(--clinic-ink)!important}.clinic-screen .clinic-metrics h5{color:#64748b;font-size:13px}.clinic-screen .clinic-metrics h3{font-size:25px;font-weight:700}
.clinic-screen .clinic-filter-row{display:flex;gap:14px;flex-wrap:wrap;align-items:end}.clinic-screen .clinic-filter-row>[class*=col-]{flex:1 1 180px;width:auto}.clinic-screen .clinic-filter-row>[class*=col-]:first-child{flex:2 1 300px}
@media(max-width:767px){.clinic-screen{padding:6px 0 20px}.clinic-screen .clinic-page-title{font-size:22px}.clinic-screen .clinic-head-actions{width:100%}.clinic-screen .clinic-data{min-width:820px}.clinic-screen .table-responsive{border-radius:10px}.clinic-screen .modal-dialog{margin:8px;max-width:calc(100vw - 16px)}.clinic-screen .modal-body{padding:14px}.clinic-screen .modal-header,.clinic-screen .modal-footer{padding:14px!important}.clinic-screen .clinic-form-block{padding:14px}.clinic-screen .clinic-filter-row>[class*=col-]{flex-basis:100%}.clinic-screen .clinic-metrics>[class*=col-]{width:50%}.clinic-screen .modal-body .row>[class*=col-lg-3]{width:100%}.clinic-screen .clinic-page-head{gap:12px}}
/* ===================== Pet workspace & profile (ex pet-workspace.css) ===================== */
.pet-workspace-heading>span{font-size:12px;font-weight:700;letter-spacing:.08em;color:#64748b}.pet-workspace-heading p{color:#64748b;margin:6px 0 16px}.pet-filter-panel{display:flex;flex-wrap:wrap;gap:14px;align-items:end;background:white;border:1px solid var(--color-border-default);border-radius:12px;padding:18px;margin-bottom:24px}.pet-filter-panel label{flex:1;min-width:150px;font-size:13px;font-weight:600}.pet-filter-panel label input,.pet-filter-panel label select{margin-top:6px}.pet-filter-panel strong{align-self:center;color:#475569;font-size:14px}.pet-card{border:1px solid var(--color-border-default)!important;border-radius:12px!important;box-shadow:none!important}.pet-card__info-value{overflow-wrap:anywhere}.pet-profile{max-width:1200px;margin:auto}.pet-profile-header{display:flex;gap:16px;align-items:center;margin:20px 0}.pet-profile-header img{width:76px;height:76px;object-fit:cover;border-radius:16px}.pet-profile-header h1{font-size:26px;margin:0 0 6px}.pet-profile-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.pet-profile-grid{display:grid;grid-template-columns:300px 1fr;gap:24px}.pet-profile-panel{background:white;border:1px solid var(--color-border-default);border-radius:12px;padding:22px;min-width:0}.pet-profile-panel h2{font-size:18px;margin-bottom:18px}.pet-profile-panel dl{margin:0}.pet-profile-panel dt{font-size:12px;color:#64748b;margin-top:16px}.pet-profile-panel dd{margin:4px 0;overflow-wrap:anywhere}.pet-history-controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.pet-history-controls>*{flex:1;min-width:170px}.pet-history-entry{border-left:3px solid #bfdbfe;padding:0 0 20px 18px;margin-left:5px;margin-top:14px;overflow-wrap:anywhere}.pet-history-entry p{white-space:pre-line;margin:8px 0}.pet-history-entry small{color:#64748b}.pet-history-entry header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}.pet-history-entry .badge{background:#eff6ff;color:#1d4ed8}.pet-profile-note{color:#64748b;font-size:13px}@media(max-width:700px){.pet-profile-grid{grid-template-columns:1fr}.pet-profile-header{flex-wrap:wrap}.pet-profile-actions{margin-left:0;width:100%}.pet-filter-panel label{min-width:100%;}.pet-profile-panel{padding:16px}}
.clinic-table-card{background:#fff;border:1px solid var(--color-border-default);border-radius:12px;overflow:hidden}.clinic-table{font-size:14px}.clinic-table thead th{background:#f8fafc;color:var(--color-text-secondary);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid var(--color-border-default);white-space:nowrap;padding:13px 12px}.clinic-table tbody td{padding:12px;border-color:#eef2f7}.pet-code{font-family:monospace;font-weight:700;text-decoration:none}.pet-name-link{display:flex;align-items:center;gap:9px;color:#0f172a;text-decoration:none;white-space:nowrap}.pet-initial{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#e8f0ff;color:var(--color-bg-primary);font-weight:800}.clinic-actions{display:flex;justify-content:flex-end;gap:5px}.clinic-actions a,.clinic-actions button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--color-border-default);border-radius:8px;background:#fff;color:var(--color-bg-primary);text-decoration:none}.clinic-actions button:last-child{color:#dc2626}.clinic-empty{display:flex;flex-direction:column;align-items:center;gap:9px;padding:40px;color:#64748b}.clinic-empty i{font-size:30px}.modal-content{border:0;border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.18)}.modal-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:18px 22px}.modal-footer{background:#fff;border-top:1px solid #e2e8f0;padding:14px 22px}.pet-form-grid{gap:18px!important}.pet-form-label{font-size:13px;font-weight:600;color:#334155}.pet-form-control{min-height:var(--pc-control-height);border:1px solid #cbd5e1!important;border-radius:7px!important;background:#fff!important;padding:0 12px!important;box-sizing:border-box}.pet-form-control:focus{border-color:var(--color-bg-primary)!important;box-shadow:0 0 0 3px rgba(23,105,224,.12)!important}@media(max-width:991px){.clinic-table{min-width:1050px}}@media(max-width:700px){.modal-dialog.modal-xl{margin:8px}.modal-body{padding:16px}.pet-form-grid{grid-template-columns:1fr!important}}

/* Pet profile v2 */
.pet-profile-screen{--pet-ink:#162033;--pet-muted:#64748b;--pet-line:#dce4ef;--pet-soft:#f6f8fc;--pet-blue:#1769e0;--pet-blue-soft:#edf4ff;padding-bottom:96px}.pet-profile{max-width:1280px;margin:0 auto}.pet-profile-breadcrumb{margin:4px 0 14px}.pet-profile-breadcrumb a{display:inline-flex;align-items:center;gap:8px;color:#526174;font-size:13px;font-weight:600;text-decoration:none}.pet-profile-breadcrumb a:hover{color:var(--pet-blue)}.pet-profile-hero{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,auto);gap:28px;align-items:start;margin:0 0 20px;padding:24px 26px;background:#fff;border:1px solid var(--pet-line);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05)}.pet-profile-identity{display:flex;align-items:center;gap:18px;min-width:0}.pet-profile-mark{display:grid;place-items:center;flex:0 0 76px;width:76px;height:76px;border-radius:22px;background:linear-gradient(145deg,#eef5ff,#dfeaff);color:var(--pet-blue);font-size:32px}.pet-profile-title{min-width:0}.pet-profile-eyebrow,.pet-profile-card-heading span,.pet-history-heading span,.pet-owner-content>span{display:block;margin-bottom:5px;color:#718096;font-size:11px;font-weight:800;letter-spacing:.1em}.pet-profile-title h1{margin:0;color:var(--pet-ink);font-size:29px;line-height:1.2;overflow-wrap:break-word;word-break:normal;min-width:0}.pet-profile-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.pet-profile-tags span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--pet-soft);color:#415067;font-size:12px;font-weight:600}.pet-profile-tags i{color:var(--pet-blue)}.pet-profile-owner-line{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px;color:var(--pet-muted);font-size:13px}.pet-profile-owner-line>a{color:#334155;font-weight:600;text-decoration:none}.pet-profile-actions{display:flex;flex-direction:column;align-items:flex-end;gap:9px;margin-left:0;min-width:0;max-width:100%}.pet-profile-actions-primary,.pet-profile-actions-secondary{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.pet-profile-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:9px;font-size:13px;font-weight:700;white-space:nowrap;flex:0 1 auto;max-width:100%}.pet-profile-actions-secondary .btn{background:#fff}.pet-profile-layout{display:grid;grid-template-columns:380px minmax(0,1fr);gap:20px;align-items:start}.pet-profile-sidebar{display:grid;gap:16px;min-width:0}.pet-profile-card{min-width:0;background:#fff;border:1px solid var(--pet-line);border-radius:15px;box-shadow:0 5px 18px rgba(15,23,42,.035)}.pet-profile-information{padding:22px}.pet-profile-card-heading,.pet-history-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.pet-profile-card-heading h2,.pet-history-heading h2{margin:0;color:var(--pet-ink);font-size:19px}.pet-profile-card-heading>a{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid var(--pet-line);border-radius:9px;color:var(--pet-blue);text-decoration:none}.pet-profile-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 0}.pet-profile-facts>div{min-width:0;padding:12px;background:var(--pet-soft);border:1px solid #edf1f6;border-radius:10px}.pet-profile-facts .pet-profile-fact-wide{grid-column:1/-1}.pet-profile-facts dt{margin:0 0 5px;color:var(--pet-muted);font-size:11px;font-weight:700}.pet-profile-facts dd{margin:0;color:var(--pet-ink);font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}.pet-profile-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.pet-owner-card{display:grid;grid-template-columns:48px minmax(0,1fr) 32px;gap:13px;align-items:start;padding:18px}.pet-owner-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#eef8f5;color:#138a72;font-size:18px}.pet-owner-content{min-width:0}.pet-owner-content h2{margin:0 0 8px;font-size:16px;line-height:1.35}.pet-owner-content h2 a{color:var(--pet-ink);text-decoration:none}.pet-owner-content>a,.pet-owner-content p{display:flex;align-items:flex-start;gap:8px;margin:6px 0;color:#536174;font-size:12px;text-decoration:none;overflow-wrap:anywhere}.pet-owner-content i{width:13px;margin-top:2px;color:#8290a3;text-align:center}.pet-owner-open{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--pet-line);border-radius:9px;color:#64748b;text-decoration:none}.pet-history-card{padding:22px 24px}.pet-history-heading h2{display:flex;align-items:center;gap:9px}.pet-history-heading b{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--pet-blue-soft);color:var(--pet-blue);font-size:12px}.pet-history-controls{display:grid;grid-template-columns:minmax(190px,.75fr) minmax(260px,1.25fr);gap:12px;margin:20px 0 8px;padding:14px;background:var(--pet-soft);border-radius:12px}.pet-history-controls label{min-width:0}.pet-history-controls label>span{display:block;margin:0 0 6px;color:#56657a;font-size:12px;font-weight:700}.pet-history-controls .form-select,.pet-history-controls .form-control{min-height:42px;border-color:#cbd5e1;border-radius:7px;font-size:13px}.pet-history-search{position:relative}.pet-history-search>i{position:absolute;z-index:1;top:14px;left:13px;color:#94a3b8}.pet-history-search .form-control{padding-left:36px}.pet-history-count{margin:10px 1px 14px;color:var(--pet-muted);font-size:12px}.pet-history-list{display:grid;gap:10px}.pet-history-entry{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;margin:0;padding:15px;border:1px solid #e4eaf2;border-left:1px solid #e4eaf2;border-radius:12px;background:#fff;overflow-wrap:anywhere}.pet-history-entry[hidden]{display:none}.pet-history-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#edf4ff;color:#1769e0}.pet-history-entry--vaccine .pet-history-icon{background:#eaf8f4;color:#138a72}.pet-history-entry--treatment .pet-history-icon{background:#fff6e8;color:#b56b00}.pet-history-entry--appointment .pet-history-icon{background:#f5efff;color:#7c3aed}.pet-history-content{min-width:0}.pet-history-content>header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}.pet-history-content>header>div:first-child>span{display:block;margin-bottom:2px;color:var(--pet-muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.pet-history-content>header strong{color:var(--pet-ink);font-size:14px}.pet-history-meta{display:flex;align-items:center;gap:8px;color:#64748b;font-size:12px}.pet-history-meta .clinic-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--pet-line);border-radius:8px;color:var(--pet-blue);text-decoration:none}.pet-history-entry p{margin:9px 0;color:#364152;font-size:13px;white-space:pre-line}.pet-history-footer{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--pet-muted);font-size:12px}.pet-history-footer .badge{padding:5px 8px;border-radius:999px;background:#edf4ff;color:#1769e0;font-weight:700}.pet-history-entry details{margin-top:11px;padding-top:10px;border-top:1px solid #eef2f7;font-size:12px}.pet-history-entry details summary{color:#42536a;font-weight:700;cursor:pointer}.pet-history-entry details dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0}.pet-history-entry details dl>div{padding:9px;background:var(--pet-soft);border-radius:8px}.pet-history-entry details dt{color:var(--pet-muted);font-size:11px}.pet-history-entry details dd{margin:3px 0 0}.pet-history-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:34px 18px;text-align:center}.pet-history-empty[hidden]{display:none}.pet-history-empty>div:first-child{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:var(--pet-blue-soft);color:var(--pet-blue);font-size:24px}.pet-history-empty h3{margin:16px 0 6px;color:var(--pet-ink);font-size:17px}.pet-history-empty p{margin:0 0 17px;color:var(--pet-muted);font-size:13px}.pet-history-empty>div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.pet-history-empty .btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;font-size:13px;font-weight:700}
@media(max-width:1120px){.pet-profile-hero{grid-template-columns:1fr}.pet-profile-actions{align-items:flex-start}.pet-profile-actions-primary,.pet-profile-actions-secondary{justify-content:flex-start}.pet-profile-layout{grid-template-columns:340px minmax(0,1fr)}}
@media(max-width:850px){.pet-profile-layout{grid-template-columns:1fr}.pet-profile-sidebar{grid-template-columns:1.2fr .8fr}.pet-profile-actions .btn{white-space:normal}}
@media(max-width:640px){.pet-profile-hero{padding:19px}.pet-profile-identity{align-items:flex-start}.pet-profile-mark{flex-basis:58px;width:58px;height:58px;border-radius:17px;font-size:24px}.pet-profile-title h1{font-size:24px}.pet-profile-actions,.pet-profile-actions-primary,.pet-profile-actions-secondary{width:100%}.pet-profile-actions .btn{flex:1 1 190px}.pet-profile-sidebar{grid-template-columns:1fr}.pet-profile-information,.pet-history-card{padding:18px}.pet-profile-facts{grid-template-columns:1fr}.pet-profile-facts .pet-profile-fact-wide{grid-column:auto}.pet-history-controls{grid-template-columns:1fr}.pet-history-content>header{display:block}.pet-history-meta{justify-content:space-between;margin-top:7px}.pet-history-entry details dl{grid-template-columns:1fr}}
@container pc-content (max-width:1120px){.pet-profile-hero{grid-template-columns:1fr}.pet-profile-actions{align-items:flex-start}.pet-profile-actions-primary,.pet-profile-actions-secondary{justify-content:flex-start}.pet-profile-layout{grid-template-columns:340px minmax(0,1fr)}}
@container pc-content (max-width:850px){.pet-profile-layout{grid-template-columns:1fr}.pet-profile-sidebar{grid-template-columns:1.2fr .8fr}.pet-profile-actions .btn{white-space:normal}}
@container pc-content (max-width:640px){.pet-profile-hero{padding:19px}.pet-profile-identity{align-items:flex-start}.pet-profile-mark{flex-basis:58px;width:58px;height:58px;border-radius:17px;font-size:24px}.pet-profile-title h1{font-size:24px}.pet-profile-actions,.pet-profile-actions-primary,.pet-profile-actions-secondary{width:100%}.pet-profile-actions .btn{flex:1 1 190px}.pet-profile-sidebar{grid-template-columns:1fr}.pet-profile-information,.pet-history-card{padding:18px}.pet-profile-facts{grid-template-columns:1fr}.pet-profile-facts .pet-profile-fact-wide{grid-column:auto}.pet-history-controls{grid-template-columns:1fr}.pet-history-content>header{display:block}.pet-history-meta{justify-content:space-between;margin-top:7px}.pet-history-entry details dl{grid-template-columns:1fr}}
.pet-id-export-dropdown .dropdown-menu{min-width:220px;padding:6px;border:1px solid var(--pet-line);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14)}.pet-id-export-dropdown .dropdown-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;color:#334155;font-size:13px;font-weight:600}.pet-id-export-dropdown .dropdown-item:hover,.pet-id-export-dropdown .dropdown-item:focus{background:var(--pet-blue-soft);color:var(--pet-blue)}.pet-id-export-dropdown .dropdown-item i{width:17px;text-align:center}.pet-id-export-dropdown .dropdown-divider{margin:5px 0}@media(max-width:640px){.pet-id-export-dropdown{flex:1 1 190px}.pet-id-export-dropdown>.btn{width:100%}.pet-id-export-dropdown .dropdown-menu{width:100%}}
/* ===================== Treatment cases (ex treatment-cases.css) ===================== */
#ownerRecordShareSection{min-width:0;padding:22px}
#ownerRecordShareSection .pet-record-share-code-row{display:flex;flex-wrap:wrap;gap:.5rem;min-width:0}
#ownerRecordShareSection .pet-record-share-code-row .form-control{flex:1 1 12rem;min-width:0;width:100%}
#ownerRecordShareSection .pet-record-share-code-row .btn{flex:0 1 auto;max-width:100%;white-space:normal}
#ownerRecordShareSection #ownerShareMatch,#ownerRecordShareSection #ownerShareLinked{min-width:0}
#ownerRecordShareSection #ownerShareMatch .pet-profile-facts{min-width:0}
#ownerRecordShareSection #ownerShareMatchError{overflow-wrap:anywhere}
#ownerRecordShareSection #btnOwnerShareConfirm{display:block;width:100%;max-width:100%;white-space:normal}
#ownerRecordShareSection #ownerShareRecords li{flex-wrap:wrap;min-width:0}
#ownerRecordShareSection #ownerShareRecords li>span{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){#ownerRecordShareSection{padding:18px}}
.tc-page{max-width:1400px;margin:auto;padding:12px 12px 110px;color:#18263b}.tc-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.tc-head h1{font-size:28px;margin:5px 0}.tc-page small{display:block;color:#64748b;font-size:12px}.tc-card{background:white;border:1px solid #dce4ee;border-radius:14px;padding:22px;margin-bottom:18px}.tc-page h2{font-size:18px;margin:0 0 16px}.tc-page h3{font-size:14px;margin:14px 0 6px}.tc-tabs{display:flex;gap:8px;margin-bottom:18px}.tc-tabs a{padding:10px 20px;border-radius:9px;color:#536276;text-decoration:none}.tc-tabs a.active{background:#eaf2ff;color:#1769e0;font-weight:700}.tc-filters,.tc-actions{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.tc-filters label:first-child{flex:2;min-width:240px}.tc-filters label{flex:1;min-width:140px}.tc-page label{display:block;font-size:13px;font-weight:600}.tc-page label .form-control,.tc-page label .form-select{margin-top:6px}.tc-columns{display:grid;grid-template-columns:350px minmax(0,1fr);gap:20px}.tc-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tc-wide{grid-column:1/-1}.tc-page dt{font-size:12px;color:#64748b;margin-top:14px}.tc-page dd{margin:5px 0;overflow-wrap:anywhere}.tc-page .btn{border-radius:9px;white-space:nowrap}.tc-pill{display:inline-block;padding:4px 9px;background:#edf4ff;color:#1769e0;border-radius:999px;font-size:12px}.tc-entry{border:1px solid #e4eaf2;border-left:3px solid #8fb8ef;border-radius:10px;padding:18px;margin-bottom:14px}.tc-entry header{display:flex;justify-content:space-between;gap:8px}.tc-pre{white-space:pre-wrap;overflow-wrap:anywhere}.tc-empty{padding:45px;text-align:center;color:#64748b}.tc-error{background:#fff0f0;color:#a01616;padding:12px;border-radius:8px;margin-bottom:12px}.tc-error[hidden]{display:none}.tc-charge{padding:12px;border-bottom:1px solid #e5eaf0}.tc-page .modal-content{border-radius:14px}.tc-page .modal-body{padding:22px}.tc-page .modal-title{margin:0}.tc-page table{font-size:13px}.tc-page th{background:#f6f8fc;color:#526176}.tc-page td{padding:13px 9px}.tc-page .modal-body>label{margin-bottom:15px}.tc-selected{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #eee}.tc-selected>span{flex:1}.tc-selected input{width:90px}@media(max-width:900px){.tc-columns{grid-template-columns:1fr}.tc-head{align-items:start;flex-direction:column}.tc-page table{min-width:950px}}@media(max-width:600px){.tc-form{grid-template-columns:1fr}.tc-wide{grid-column:auto}.tc-card{padding:16px}.tc-head h1{font-size:23px}.tc-tabs a{padding:9px}.tc-actions .btn{white-space:normal}}
/* ===================== Goods & transactions shared layout (ex goods-ui.css + goods-b2b.css) ===================== */
body.goods-ui{background:var(--color-bg-page);color:var(--color-text-primary);font-family:var(--app-font-family);overflow-x:hidden}body.goods-ui .app-page-main{padding:24px!important;margin:0!important;max-width:1680px;margin-inline:auto!important;min-width:0;height:auto!important;overflow:visible!important}body.goods-ui h1.h3{font-size:25px;font-weight:700;letter-spacing:-.5px}body.goods-ui .card{border:1px solid var(--color-border-default)!important;border-radius:12px!important;box-shadow:none!important;overflow:visible}body.goods-ui .card-header{background:#f8faff!important;border-bottom:1px solid #e2e8f0;padding:16px 20px;border-radius:12px 12px 0 0!important}body.goods-ui .card-body{padding:20px}body.goods-ui .btn{border-radius:7px!important;font-size:13px;font-weight:600;padding:9px 14px;box-shadow:none!important}body.goods-ui .btn-primary{background:#1769e0!important;border-color:#1769e0!important}body.goods-ui .btn-success{background:white!important;color:#1769e0!important;border-color:#bdcfe8!important}body.goods-ui .form-control,body.goods-ui .form-select{border:1px solid var(--color-border-strong);border-radius:7px!important;min-height:var(--pc-control-height);height:var(--pc-control-height);font-size:14px;box-shadow:none}body.goods-ui .form-control:focus,body.goods-ui .form-select:focus{border-color:#1769e0;box-shadow:0 0 0 3px #1769e014}body.goods-ui .form-label{font-size:13px;font-weight:600;color:var(--color-text-secondary)}body.goods-ui .table-responsive{max-width:100%;overflow-x:auto!important;border-radius:10px}body.goods-ui table{font-size:13px}body.goods-ui table th{background:#f3f6fa!important;color:var(--color-text-secondary)!important;font-size:12px!important;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap;border-bottom:1px solid var(--color-border-default)!important;padding:13px 12px!important}body.goods-ui table td{padding:12px!important;vertical-align:middle;border-bottom:1px solid #edf1f6}body.goods-ui table tbody tr:hover{background:#f6f9ff}body.goods-ui .badge{font-weight:600;border-radius:5px;padding:5px 8px}body.goods-ui .modal-content{border:1px solid var(--color-border-default);border-radius:14px!important;box-shadow:0 24px 80px var(--color-text-primary)30;overflow:hidden}body.goods-ui .modal-header{background:#f8faff!important;color:var(--color-text-primary)!important;padding:18px 24px;border-bottom:1px solid #e2e8f0}body.goods-ui .modal-title{font-size:19px;font-weight:700}body.goods-ui .modal-body{padding:24px;max-height:72vh;overflow-y:auto}body.goods-ui .modal-footer{background:#f8faff;padding:14px 24px;border-top:1px solid #e2e8f0}body.goods-ui .modal-header .btn-close{filter:none!important}body.goods-ui .pagination .page-link{border-radius:6px;margin:0 2px;color:#1769e0}body.goods-ui .page-item.active .page-link{background:#1769e0;color:white}body.goods-ui .row.mb-4>.col-xl-3 .card{padding:0!important;border-top:3px solid #dce8fa!important}body.goods-ui .row.mb-4>.col-xl-3 .card-body{padding:15px 18px}body.goods-ui .row.mb-4>.col-xl-3 .fa-2x{font-size:22px;color:#7190b7!important}body.goods-ui .row.mb-4>.col-xl-3 .text-uppercase{font-size:11px;color:var(--color-text-muted)!important}body.goods-ui .row.mb-4>.col-xl-3 .h5{font-size:22px;color:var(--color-text-primary);font-weight:700;margin-top:7px!important}body.goods-ui .d-flex.justify-content-between{gap:12px;flex-wrap:wrap}body.goods-ui .d-flex.justify-content-between>div:has(>.btn){display:flex;flex-wrap:wrap;gap:8px}body.goods-ui .d-flex.justify-content-between>div>.btn{margin:0!important}body.goods-ui>footer{position:static!important;margin-top:32px}body.goods-ui .container-fluid{min-width:0}body.goods-ui .row{min-width:0}@media(max-width:991px){body.goods-ui .row.mb-4>.col-xl-3{width:50%;margin-bottom:12px}body.goods-ui .app-page-main{padding:16px!important}body.goods-ui .modal-dialog{margin:12px;max-width:calc(100% - 24px)}}@media(max-width:575px){body.goods-ui h1.h3{font-size:22px}body.goods-ui .card-body,body.goods-ui .modal-body{padding:14px}body.goods-ui .modal-header,body.goods-ui .modal-footer{padding:14px}body.goods-ui .btn{padding:8px 11px}body.goods-ui .modal-body .col-md-3,body.goods-ui .modal-body .col-md-4,body.goods-ui .modal-body .col-md-6{width:100%}}@media print{body.goods-ui .app-page-main{padding:0!important}}
body.goods-ui .app-page-main{padding-top:84px!important}body.goods-ui .select2-container .select2-selection{border-radius:7px!important;border-color:var(--color-border-strong)!important;min-height:var(--pc-control-height);height:var(--pc-control-height)}@media print{body.goods-ui .app-page-main{padding-top:0!important}}
body.goods-ui .modal-header .modal-title{color:var(--color-text-primary)!important}

/* --- Fine-tune phase 2: spacing, tile rhythm, popup/form unity --- */
body.goods-ui .goods-workspace {
    --goods-space: 14px;
    gap: var(--goods-space);
}

body.goods-ui .goods-workspace h1,
body.goods-ui .goods-workspace h2,
body.goods-ui .goods-workspace h3,
body.goods-ui .goods-workspace h4,
body.goods-ui .goods-workspace h5,
body.goods-ui .goods-workspace h6 {
    margin-top: 0;
}

body.goods-ui .goods-workspace .card {
    border-radius: 12px;
    margin-bottom: var(--goods-space);
}

body.goods-ui .goods-workspace .card:last-child,
body.goods-ui .goods-workspace .card.no-gap {
    margin-bottom: 0;
}

body.goods-ui .goods-workspace .row,
body.goods-ui .goods-workspace .filter-form {
    --bs-gutter-x: 0.9rem;
    --bs-gutter-y: 0.9rem;
}

body.goods-ui .goods-workspace .form-label {
    margin-bottom: 6px;
}

body.goods-ui .goods-workspace .form-control,
body.goods-ui .goods-workspace .form-select,
body.goods-ui .goods-workspace textarea,
body.goods-ui .goods-workspace input[type="text"],
body.goods-ui .goods-workspace input[type="number"],
body.goods-ui .goods-workspace input[type="date"],
body.goods-ui .goods-workspace input[type="search"],
body.goods-ui .goods-workspace .input-group-text,
body.goods-ui .goods-workspace .select2-container .select2-selection {
    border-radius: 7px;
}

body.goods-ui .goods-workspace .mb-3,
body.goods-ui .goods-workspace .mb-4,
body.goods-ui .goods-workspace .mb-2 {
    margin-bottom: 0.7rem !important;
}

body.goods-ui .goods-workspace .quick-date-widget {
    border: 1px solid var(--color-border-default);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.goods-ui .goods-workspace .quick-date-widget:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px #10182818;
}

body.goods-ui .goods-workspace .table-responsive {
    border: 1px solid var(--color-border-default);
}

body.goods-ui .goods-workspace .modal-dialog {
    max-width: min(980px, calc(100% - 1.5rem));
}

body.goods-ui .goods-workspace .modal-content {
    border-radius: 14px;
    border: 1px solid var(--color-border-default);
}

body.goods-ui .goods-workspace .modal-header,
body.goods-ui .goods-workspace .modal-footer {
    padding: 14px 18px;
}

body.goods-ui .goods-workspace .modal-body {
    padding: 18px;
    max-height: 76vh;
}

body.goods-ui .goods-workspace .modal-footer {
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

body.goods-ui .goods-workspace .modal-footer .btn {
    min-width: 96px;
    justify-content: center;
}

body.goods-ui .goods-workspace .modal-footer .btn + .btn {
    margin-left: 0;
}

/* One horizontal list layout; Bootstrap rows keep their own field columns. */
body.goods-ui .goods-workspace { display:block; min-width:0; }
body.goods-ui .goods-heading { margin:0 0 14px; }
body.goods-ui .goods-summary { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; color:var(--color-text-muted); font-size:13px; }
body.goods-ui .goods-summary>span:first-child { background:var(--color-bg-surface-soft); border-radius:12px; padding:2px 8px; }
body.goods-ui .goods-sidebar { position:static; width:100%; margin:0 0 16px!important; }
body.goods-ui .goods-sidebar .card-body { padding:16px; }
body.goods-ui .goods-sidebar form:has(>.row) { display:block; }
body.goods-ui .goods-sidebar form:not(:has(>.row)) { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
body.goods-ui .goods-sidebar form:not(:has(>.row))>div { flex:1 1 180px; min-width:0; }
body.goods-ui .goods-sidebar form>.row { margin-top:0; }
body.goods-ui .goods-sidebar .form-label { font-size:13px; margin-bottom:6px; }
body.goods-ui .goods-sidebar .select2-container { width:100%!important; }
body.goods-ui .goods-sidebar .d-flex { flex-wrap:wrap; }
body.goods-ui .goods-sidebar .btn { white-space:nowrap; }
body.goods-ui .goods-table-panel { min-width:0; border:1px solid var(--color-border-default); border-radius:12px; background:white; padding:0!important; }
body.goods-ui .goods-table-panel .table-responsive { overflow:auto!important; max-height:none; }
body.goods-ui .goods-eyebrow { color:var(--color-text-muted); font-size:11px; font-weight:700; display:block; margin-bottom:5px; }
body.goods-ui #inventoryTable{margin:0!important;min-width:1120px;font-size:12px}
body.goods-ui #inventoryTable th{position:sticky;top:0;z-index:1;background:var(--color-bg-surface-soft)!important;font-size:10px;padding:12px!important;border-right:0!important;text-transform:none;letter-spacing:.3px}
body.goods-ui #inventoryTable td{height:51px;padding:10px 12px!important;border-right:0!important;border-left:0!important}
body.goods-ui #inventoryTable td:nth-child(3){min-width:205px;font-weight:600}
body.goods-ui #inventoryTable td:nth-child(3) small{display:none}
body.goods-ui #inventoryTable td:nth-child(4){color:#008c86;font-family:Consolas,monospace;font-size:11px}
body.goods-ui #inventoryTable tr:hover{background:#effbf8!important}
body.goods-ui #inventoryTable .badge{border-radius:20px;font-size:10px}
body.goods-ui #inventoryTable .bg-success{background:#e9fbf4!important;color:#00866b!important}
body.goods-ui #inventoryTable .form-control{min-height:30px;padding:4px 6px;font-size:12px}
body.goods-ui #inventoryTable .btn{padding:3px 6px;font-size:11px}
body.goods-ui #inventoryTable td{white-space:normal;overflow:hidden;height:auto;min-height:51px}
body.goods-ui #inventoryTable td:nth-child(4) .badge{background:transparent!important;color:#008c86!important;padding:0;font-family:Consolas,monospace;font-weight:500}
body.goods-ui #inventoryTable td:nth-child(3) strong{font-weight:500}
@media print { body.goods-ui .goods-sidebar { display:none; } }

/* ===================================================================
   Tablet-first layer (applies to every screen; clinic module is the first
   module rebuilt on it). Rules follow the Figma design system:
   - tap targets ≥ 44px, inputs and primary buttons 48px on touch devices
   - primary actions live in a sticky bottom action bar, never at the end
     of a long page
   - list rows 64px, no hover-only affordances, one column on portrait
   =================================================================== */
@media screen {
  /* Shared buttons: height follows the device, label never wraps. */
  body .btn:not(.btn-sm):not(.btn-lg):not(.btn-close) {
    min-height: var(--pc-button-height);
    border-radius: var(--radius-md);
  }
  body .btn.btn-lg { min-height: var(--size-control); border-radius: var(--radius-md) !important; font-size: 16px !important; font-weight: 600; }
  body .btn.btn-sm { min-height: 32px; }
  body :is(.btn-primary) { background: var(--color-bg-primary) !important; border-color: var(--color-bg-primary) !important; }
  body :is(.btn-primary):is(:hover,:focus-visible) { background: var(--color-bg-primary-hover) !important; border-color: var(--color-bg-primary-hover) !important; }

  /* Bottom action bar: holds the form's primary + secondary actions. */
  .pc-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) calc(var(--app-page-gutter) * -1) calc(var(--app-page-gutter) * -1);
    padding: var(--spacing-sm) var(--app-page-gutter);
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border-default);
    box-shadow: var(--shadow-action-bar);
  }
  .pc-action-bar > .btn.btn { min-height: var(--size-control) !important; padding-inline: var(--spacing-lg); font-size: 16px !important; }
  /* The shell hides horizontal overflow on <main>, which would turn it into a
     scroll container and break position: sticky. `clip` keeps the clipping
     without creating a scroll container. */
  body.petclinic-b2b-shell main.app-page-main { overflow-x: clip !important; overflow-y: visible !important; }
  .pc-action-bar .pc-action-bar-spacer { flex: 1 1 auto; }
  /* Inside a card body, keep the bar flush with the card edges. */
  .card-body > form > .pc-action-bar,
  .card-body > .pc-action-bar,
  .clinic-form-block > .pc-action-bar {
    /* No negative bottom margin: a sticky box must end inside its parent, or it
       sits partly below the viewport at the end of the page. */
    margin: var(--spacing-lg) calc(var(--spacing-lg) * -1) 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* Page head: title left, actions right, wraps on narrow screens. */
  .pc-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); }
  .pc-page-head > :first-child { min-width: 0; }
  .pc-page-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
  .pc-page-actions .btn { margin: 0 !important; }

  /* Status badges follow the Figma tone palette. */
  body .badge { font-weight: 600; font-size: 12px; line-height: 1.4; border-radius: var(--radius-full); padding: 4px 10px; }
  body .badge.bg-success { background: var(--color-bg-success-soft) !important; color: var(--color-text-success) !important; }
  body .badge.bg-warning { background: var(--color-bg-warning-soft) !important; color: var(--color-text-warning) !important; }
  body .badge.bg-danger { background: var(--color-bg-danger-soft) !important; color: var(--color-text-danger) !important; }
  body .badge.bg-info, body .badge.bg-primary { background: var(--color-bg-primary-soft) !important; color: var(--color-text-link) !important; }
  body .badge.bg-secondary, body .badge.bg-light { background: var(--color-bg-surface-soft) !important; color: var(--color-text-secondary) !important; }

  /* Cards: one radius, one border, one shadow everywhere. */
  body main.app-page-main .card { border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  body main.app-page-main .card > .card-header { background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default); border-radius: var(--radius-xl) var(--radius-xl) 0 0; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
}

/* Below the shell's breakpoint the navigation becomes a top bar (64px) plus the
   page title bar (68px); keep the content clear of both. */
@media screen and (max-width: 991.98px) {
  body.petclinic-b2b-shell main.app-page-main.container-fluid { padding: 152px var(--app-page-gutter) 28px !important; }
}

/* ---------- Tablet and phone ---------- */
@media screen and (max-width: 1024px) {
  /* Controls grow to the touch size; selects keep their arrow aligned. */
  /* Specificity (0,4,3) deliberately beats the shell's (0,4,2) `body.petclinic-b2b-shell main.app-page-main :is(... .btn:not(.btn-sm))` rule.
     `.pc-desktop-control` is an opt-out hook for a control that must stay compact (e.g. inside dense tables). */
  body.petclinic-b2b-shell main.app-page-main .form-control:not(textarea):not(.pc-desktop-control), body.petclinic-b2b-shell main.app-page-main .form-select:not(.pc-desktop-control),
  body.petclinic-b2b-shell main.app-page-main .input-group-text:not(.pc-desktop-control), body.petclinic-b2b-shell main.app-page-main .input-group > .btn:not(.pc-desktop-control),
  body.petclinic-b2b-shell main.app-page-main .pet-form-control:not(.pc-desktop-control), body.petclinic-b2b-shell .modal .form-control:not(textarea):not(.pc-desktop-control), body.petclinic-b2b-shell .modal .form-select:not(.pc-desktop-control),
  body:not(.petclinic-b2b-shell) .form-control:not(textarea), body:not(.petclinic-b2b-shell) .form-select {
    min-height: var(--size-control) !important; height: var(--size-control) !important; font-size: 16px !important; /* 16px stops iOS zoom-on-focus */
  }
  body.petclinic-b2b-shell main.app-page-main textarea.form-control, body.petclinic-b2b-shell .modal textarea.form-control { font-size: 16px !important; }
  body .select2-container .select2-selection--single,
  body .select2-container .selection { min-height: var(--size-control) !important; height: var(--size-control) !important; }
  body .select2-container .select2-selection--single .select2-selection__rendered { font-size: 16px !important; }
  body .form-check-input { width: 24px; height: 24px; margin-top: 0; }
  body .form-check { display: flex; align-items: center; gap: 10px; min-height: var(--size-touch-min); }
  /* Switches keep their pill shape and cannot shrink in flex rows. */
  body .form-switch .form-check-input {
    width: 44px;
    height: 24px;
    min-width: 44px;
    min-height: 24px;
    flex: 0 0 auto;
  }

  /* Every button and icon action is at least 44px. */
  body .btn, body .clinic-screen .btn, body .clinic-actions a, body .clinic-actions button, body .clinic-screen .clinic-icon,
  body .pet-profile-actions .btn, body .tc-page .btn, body .page-link {
    min-height: var(--size-touch-min) !important; min-width: var(--size-touch-min);
  }
  body .btn.btn-sm { min-height: var(--size-control-sm) !important; padding: 6px 12px; font-size: 14px !important; }
  body .clinic-actions a, body .clinic-actions button, body .clinic-screen .clinic-icon { width: var(--size-touch-min); height: var(--size-touch-min); }
  body table td a[data-bs-toggle="tooltip"] { display: inline-flex; align-items: center; justify-content: center; min-width: var(--size-touch-min); min-height: var(--size-touch-min); }

  /* Tables: taller rows, readable text, horizontal scroll only when needed. */
  body main.app-page-main table { font-size: 14px; }
  body main.app-page-main table thead th { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.3px; padding: 12px 14px; }
  body main.app-page-main table tbody td { padding: 12px 14px; vertical-align: middle; }
  body .clinic-screen .clinic-data { min-width: 0; }
  body .clinic-screen .clinic-data > tbody > tr > td { padding: 14px; }
  body .table-responsive { border-radius: var(--radius-lg); -webkit-overflow-scrolling: touch; }
  body main.app-page-main .component-pagination .page-link { min-height: var(--size-touch-min); display: inline-flex; align-items: center; }


  /* Toolbars built from bootstrap columns: let columns size to content and wrap. */
  body .pc-toolbar > [class*="col-"] { flex: 1 1 220px; width: auto; max-width: none; }
  body .pc-toolbar > .col-md-auto { flex: 0 1 auto; }
  body .pc-toolbar .btn { white-space: nowrap; }
  /* Row action groups never wrap into a tall column; the table scrolls sideways instead. */
  body .clinic-screen .clinic-row-actions, body .clinic-actions { flex-wrap: nowrap; gap: 6px; }
  body .clinic-screen .clinic-data td:has(> .clinic-row-actions), body table td:has(> .clinic-actions) { white-space: nowrap; width: 1%; }
  /* Filters and heads stack cleanly. */
  body .pet-filter-panel label, body .clinic-screen .clinic-filter-row > [class*="col-"] { flex-basis: calc(50% - 8px); min-width: calc(50% - 8px); }
  body .pc-page-head { flex-direction: column; align-items: stretch; }
  body .pc-page-actions { width: 100%; }
  body .pc-page-actions .btn { flex: 1 1 auto; }

  /* Action bar fills the width, primary button grows. */
  .pc-action-bar { margin-left: calc(var(--app-page-gutter) * -1); margin-right: calc(var(--app-page-gutter) * -1); padding: var(--spacing-sm) var(--app-page-gutter); }
  .pc-action-bar > .btn-primary { flex: 1 1 220px; }
  .pc-action-bar > .btn:not(.btn-primary) { flex: 0 1 auto; }

  /* Modals: full-width sheets with a sticky footer on tablets. */
  body .modal-dialog { margin: 12px auto; max-width: calc(100vw - 24px) !important; }
  body .modal-footer { position: sticky; bottom: 0; background: #fff; z-index: 3; }
  body .modal-footer .btn { min-height: var(--size-control) !important; }

  /* Two-column clinic layouts collapse to one column in portrait. */
  body .clinic-screen .row > [class*="col-lg-"], body .pet-profile-layout, body .tc-layout { width: 100%; flex: 0 0 100%; max-width: 100%; grid-template-columns: 1fr; }
  body .clinic-screen .clinic-metrics > [class*="col-"] { width: 50%; }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
  body .clinic-screen .row > [class*="col-lg-8"] { flex: 0 0 62%; max-width: 62%; }
  body .clinic-screen .row > [class*="col-lg-4"] { flex: 0 0 38%; max-width: 38%; }
}

/* No hover-only affordances on touch devices. */
@media (hover: none) {
  body .clinic-screen .clinic-data > tbody > tr:hover { background: transparent; }
  body .clinic-row-actions, body .clinic-actions { opacity: 1 !important; visibility: visible !important; }
}

/* Keep the safe-area clear on iPad/Android home indicators. */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pc-action-bar { padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom)); }
}

/* ===================== Giao dịch: quầy bán hàng / nhập hàng trên máy tính bảng =====================
   The shell and the counter stylesheets stack the catalogue and the cart below 992px.
   On tablets (768–1024px) the Figma design keeps two panes side by side: catalogue
   left, cart right, cart actions sticky. Phones (<768px) keep the stacked layout. */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body.petclinic-b2b-shell.goods-ui.payment-counter-page .bill-content-wrapper,
  body.petclinic-b2b-shell.goods-ui.purchase-counter-page .bill-content-wrapper {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; gap: 0;
  }
  body.petclinic-b2b-shell.goods-ui.payment-counter-page .bill-content-wrapper > .left-panel,
  body.petclinic-b2b-shell.goods-ui.purchase-counter-page .bill-content-wrapper > .left-panel {
    flex: 0 0 56% !important; width: 56% !important; max-width: 56% !important; border-right: 1px solid var(--color-border-default) !important; border-bottom: 0 !important;
  }
  body.petclinic-b2b-shell.goods-ui.payment-counter-page .bill-content-wrapper > .middle-panel,
  body.petclinic-b2b-shell.goods-ui.purchase-counter-page .bill-content-wrapper > .middle-panel {
    flex: 0 0 44% !important; width: 44% !important; max-width: 44% !important; border-top: 0 !important;
  }
  body.petclinic-b2b-shell.goods-ui .middle-panel-payment-flow { position: sticky; bottom: 0; background: var(--color-bg-surface); }
  body.petclinic-b2b-shell.goods-ui .payment-actions-row,
  body.purchase-counter-page .purchase-actions-row { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important; gap: 8px !important; }
  body.petclinic-b2b-shell.goods-ui .payment-actions-row .btn,
  body.purchase-counter-page .purchase-actions-row .btn { min-height: 40px !important; height: auto; white-space: normal !important; line-height: 1.25; }
  /* Search box gets its own full-width row; the three tool buttons sit below it. */
  body.petclinic-b2b-shell.goods-ui .product-search-toolbar { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.petclinic-b2b-shell.goods-ui .product-search-toolbar .product-search-input { grid-column: 1 / -1; width: 100%; min-height: var(--size-control) !important; font-size: 16px !important; }
  body.petclinic-b2b-shell.goods-ui .product-search-toolbar .btn { min-height: var(--size-touch-min) !important; }
  body.petclinic-b2b-shell.goods-ui .bill-items-table tbody td { padding: 10px 8px; }
  body.petclinic-b2b-shell.goods-ui .bill-items-table .quantity-input,
  body.petclinic-b2b-shell.goods-ui .bill-items-table .form-control { min-height: var(--size-touch-min) !important; height: var(--size-touch-min) !important; font-size: 16px !important; }
  body.petclinic-b2b-shell.goods-ui .bill-items-table .btn { min-width: var(--size-touch-min); min-height: var(--size-touch-min) !important; }
  body.petclinic-b2b-shell.goods-ui .payment-sticky-total .payment-sticky-total-value { font-size: 22px; }
}
@media screen and (max-width: 1024px) {
  /* Transaction lists: filter rows and summary chips wrap, table rows stay tappable. */
  body.goods-ui main.app-page-main form.transaction-filter-form > [class*="col-"],
  body.goods-ui main.app-page-main form.transaction-filter-form .filter-input { flex-basis: calc(50% - 6px); }
  body.goods-ui .goods-table-panel table tbody td { padding: 12px 10px; }
  body.goods-ui .goods-table-panel .btn-sm, body.goods-ui .goods-table-panel .btn-group .btn { min-height: var(--size-control-sm) !important; }
}

/* ===================== Hàng hóa: danh sách và form trên máy tính bảng ===================== */
@media screen and (max-width: 1024px) {
  /* Heading: title block on top, action buttons wrap below it at full tap size. */
  body.goods-ui .goods-heading > .col-12 > .d-flex { flex-wrap: wrap; gap: var(--spacing-sm); }
  body.goods-ui .goods-heading .btn, body.goods-ui .inventory-items-page .goods-heading .btn { min-height: var(--size-touch-min) !important; }
  /* Filters: two per row, 48px controls even inside the compact inventory filter bar. */
  body.goods-ui main.app-page-main form.app-list-filters > [class*="col-"] { flex-basis: calc(50% - 6px); }
  body.goods-ui .inventory-items-page .goods-filter-bar :is(.form-control, .form-select) { min-height: var(--size-control) !important; }
  body.goods-ui .inventory-items-page .goods-filter-bar .select2-selection { min-height: var(--size-control) !important; }
  /* Product grid rows: keep the wide grid, scroll sideways, grow the icon actions. */
  body.goods-ui .inventory-items-page .goods-table-panel .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* inventory-items-b2b.css is linked from the page body (after this file) and uses !important; out-rank it. */
  body.goods-ui.petclinic-b2b-shell .inventory-items-page #inventoryTable :is(th, td) { height: 64px !important; }
  body.goods-ui.petclinic-b2b-shell .inventory-items-page .goods-row-toggle, body.goods-ui.petclinic-b2b-shell .inventory-items-page .goods-icon-action { width: var(--size-touch-min) !important; height: var(--size-touch-min) !important; }
  body.goods-ui #inventoryTable .btn { min-height: var(--size-control-sm) !important; padding: 6px 10px; font-size: 13px; }
  body.goods-ui #inventoryTable .form-control { min-height: var(--size-control-sm) !important; height: var(--size-control-sm) !important; font-size: 15px; }
  /* Other goods tables (categories, suppliers, audits, stock moves). */
  body.goods-ui .goods-table-panel table tbody td { padding: 12px 10px; }
  body.goods-ui .goods-workspace .modal-body { max-height: none; }
}

/* ===================== Báo cáo: màn hình báo cáo (ex inline style trong views/reports/*) ===================== */
@media screen {
  :root { --app-header-height: 0px; --app-footer-height: 0px; }

  /* Kiểu báo cáo: danh sách radio dạng thẻ (sales-report, business-result) hoặc nút btn-check (sales-analysis...). */
  body.reports-ui .report-type-options { width: 100%; }
  body.reports-ui .report-type-choice {
    display: flex; align-items: center; gap: var(--spacing-sm); min-height: var(--size-touch-min);
    padding: 8px 14px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
    background: var(--color-bg-surface); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  body.reports-ui .report-type-choice input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
  body.reports-ui .report-type-choice-label { display: flex; align-items: center; gap: var(--spacing-xs); margin: 0; width: 100%; font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; }
  body.reports-ui .report-type-choice-label i { font-size: 15px; color: var(--color-icon-default); }
  body.reports-ui .report-type-choice.active { border-color: var(--color-bg-primary); background: var(--color-bg-primary-soft); box-shadow: 0 0 0 1px var(--color-bg-primary) inset; }
  body.reports-ui .report-type-choice.active .report-type-choice-label,
  body.reports-ui .report-type-choice.active .report-type-choice-label i { color: var(--color-text-link); }
  body.reports-ui .report-type-options .btn { font-size: 14px; padding: 8px 12px; border-radius: var(--radius-md); min-height: var(--size-touch-min); }
  body.reports-ui .report-type-options .btn-check:checked + .btn { background: var(--color-bg-primary) !important; color: var(--color-text-on-primary) !important; border-color: var(--color-bg-primary) !important; box-shadow: none; }

  /* Bộ lọc nhanh theo kỳ: nút rộng theo chữ, hàng tự xuống dòng khi cột lọc hẹp. */
  body.reports-ui .quick-date-btn { font-size: 14px; padding: 8px 12px; min-height: 40px; transition: background-color .2s ease, color .2s ease; }
  body.reports-ui .row.g-2:has(> [class*="col-"] > .quick-date-btn) { display: flex; flex-wrap: wrap; gap: 8px; }
  body.reports-ui .row.g-2 > [class*="col-"]:has(> .quick-date-btn) { flex: 0 0 auto; width: auto; max-width: 100%; min-width: max-content; padding: 0; }
  body.reports-ui .quick-date-btn { width: auto !important; flex: 0 0 auto; min-width: max-content; white-space: nowrap; }
  body.reports-ui .quick-date-btn.active { background: var(--color-bg-primary) !important; color: var(--color-text-on-primary) !important; border-color: var(--color-bg-primary) !important; }
  body.reports-ui .quick-range-wrapper .quick-range-btn {
    min-width: 125px; min-height: var(--size-touch-min) !important; border-radius: var(--radius-full); border: 1px solid var(--color-border-default);
    background: var(--color-bg-surface); color: var(--color-text-link); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  body.reports-ui .quick-range-btn i { color: inherit; }
  body.reports-ui .quick-range-btn.active { background: var(--color-bg-primary); color: var(--color-text-on-primary); border-color: var(--color-bg-primary); }
  @media (hover: hover) {
    body.reports-ui .quick-date-btn:not(.active):hover, body.reports-ui .quick-range-btn:not(.active):hover { background: var(--color-bg-primary-soft); }
  }

  /* Bảng số liệu: một kiểu chung cho mọi báo cáo (class pc-report-table), vùng cuộn do JS đặt max-height. */
  body.reports-ui .pc-report-table-wrap { max-height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - 2rem); overflow: auto; -webkit-overflow-scrolling: touch; }
  body.reports-ui .pc-report-table { font-size: 14px; }
  body.reports-ui .pc-report-table :is(th, td) { color: var(--color-text-primary); padding: 12px; vertical-align: middle; border: 1px solid var(--color-border-default); }
  body.reports-ui .pc-report-table thead th { background: var(--color-bg-surface-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--color-text-secondary); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
  body.reports-ui .pc-report-table tbody tr { border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); }
  body.reports-ui .pc-report-table tbody tr:hover { background: var(--color-bg-surface-soft); }
  body.reports-ui .pc-report-table tfoot tr, body.reports-ui .pc-report-table tfoot tr > td { background: var(--color-bg-primary-soft) !important; font-weight: 600; }
  body.reports-ui .pc-report-table .text-end { text-align: right; }
  body.reports-ui .pc-report-table .text-center { text-align: center; }
  /* Dòng tổng theo ngày/tháng/đối tượng và khối chi tiết mở rộng trong báo cáo bán hàng. */
  body.reports-ui :is(.day-summary-row, .month-summary-row) td, body.reports-ui .table-total-row { background: var(--color-bg-surface-soft); font-weight: 500; }
  body.reports-ui :is(.day-detail-row, .month-detail-row, .entity-detail-row, .category-detail-row) { display: none; background: var(--color-bg-surface); }
  body.reports-ui :is(.day-detail-row, .month-detail-row, .entity-detail-row, .category-detail-row).show { display: table-row; }
  body.reports-ui :is(.day-detail-container, .month-detail-container, .entity-detail-container, .category-detail-container) { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--spacing-md); }
  body.reports-ui .category-detail-header { font-weight: 600; margin-bottom: var(--spacing-sm); }
  body.reports-ui .category-detail-table th { background: var(--color-bg-surface-soft); }
  body.reports-ui .entity-day-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--spacing-sm); background: var(--color-bg-surface-soft); }
  body.reports-ui .entity-day-header .small { line-height: 1.35; }
  body.reports-ui .entity-detail-header { border-bottom: 1px solid var(--color-border-default); padding-bottom: var(--spacing-sm); }
  body.reports-ui .toggle-detail { width: var(--size-touch-min); height: var(--size-touch-min); min-width: var(--size-touch-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
  body.reports-ui .toggle-detail .fa-chevron-down { transition: transform .2s ease; }
  body.reports-ui .toggle-detail[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
  /* Ghi chú dài trong báo cáo dịch vụ / tiêm chủng. */
  body.reports-ui .note-cell { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; }
  body.reports-ui .note-preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; max-height: 2.7em; }
  body.reports-ui .note-toggle { color: var(--color-text-link); min-width: var(--size-touch-min); min-height: var(--size-touch-min); display: inline-flex; align-items: center; justify-content: center; }
  body.reports-ui .note-toggle:is(:hover, :focus) { color: var(--color-bg-primary-hover); text-decoration: none; }
  body.reports-ui .note-details-modal .modal-body { font-size: 15px; line-height: 1.5; }
  body.reports-ui .view-details-btn { white-space: nowrap; font-size: 13px; padding: 6px 10px; }
  body.reports-ui .form-label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }

  /* Tổng hợp doanh thu theo ngày: thẻ tổng và lưới chỉ số theo bảng màu hệ thống. */
  body.reports-ui .card-header { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
  body.reports-ui table.table-sm :is(td, th) { padding: 6px 8px; font-size: 14px; }
  body.reports-ui main.app-page-main .summary-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-card) !important; width: 100%; }
  body.reports-ui main.app-page-main .summary-card > .summary-card-header { background: var(--color-bg-surface); color: var(--color-text-primary); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--color-border-default); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  body.reports-ui .summary-widgets-grid { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--spacing-sm); }
  body.reports-ui .summary-widget { padding: 12px 16px; border-radius: var(--radius-lg); background: var(--color-bg-surface-soft); border: 1px solid var(--color-border-default); min-height: 86px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  body.reports-ui .summary-widget-label { font-size: 13px; line-height: 1.35; color: var(--color-text-secondary); word-break: normal; overflow-wrap: normal; }
  body.reports-ui .summary-widget-value { font-size: 20px; font-weight: 700; color: var(--color-text-primary); display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
  body.reports-ui .summary-widget-number { line-height: 1.1; }
  body.reports-ui .summary-widget-unit { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; opacity: .8; }
  body.reports-ui .summary-widget--primary { background: var(--color-bg-primary); border-color: var(--color-bg-primary); }
  body.reports-ui .summary-widget--accent { background: var(--color-bg-success); border-color: var(--color-bg-success); }
  body.reports-ui :is(.summary-widget--primary, .summary-widget--accent) :is(.summary-widget-label, .summary-widget-value) { color: var(--color-text-on-primary); }
  body.reports-ui .summary-widget--muted { background: var(--color-bg-surface); }
  body.reports-ui .summary-card table thead th { color: var(--color-text-secondary); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
  body.reports-ui .summary-card table tbody tr:is(.table-light, .table-active) > td { background: var(--color-bg-surface-soft) !important; }
  body.reports-ui .summary-card table tbody tr.table-secondary > td { background: var(--color-bg-primary-soft) !important; font-size: 15px; }
  body.reports-ui .summary-card table.table-sm :is(td, th) { padding: 5px 7px; font-size: 13px; }
}

/* Báo cáo trên máy tính bảng: kiểu báo cáo thành dải chọn ngang, bộ lọc 2 cột, bảng cuộn ngang với tiêu đề dính. */
@media screen and (max-width: 1024px) {
  body.reports-ui .report-type-options { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scroll-snap-type: x proximity; }
  body.reports-ui .report-type-options > * { flex: 0 0 auto; scroll-snap-align: start; }
  body.reports-ui .report-type-choice { padding-inline: 14px; }
  body.reports-ui .report-type-choice-label { white-space: nowrap; }
  body.reports-ui .report-type-options .btn { white-space: nowrap; }
  body.reports-ui .row > .col-lg-3 > .card + .card { margin-top: var(--spacing-md) !important; }
  body.reports-ui .row > .col-lg-9 { margin-top: var(--spacing-md) !important; }
  body.reports-ui .quick-date-btn, body.reports-ui .quick-range-wrapper .quick-range-btn { min-height: var(--size-touch-min) !important; }
  body.reports-ui .quick-range-wrapper { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) !important; }
  body.reports-ui .quick-range-wrapper .quick-range-btn { flex: 0 0 auto; min-width: max-content; }
  body.reports-ui :is(#applyFilters, #searchButton, #clearFilters, #loadReport) { min-height: var(--size-control) !important; width: 100%; }
  body.reports-ui .pc-report-filter .row > .col-md-2 { flex: 0 0 100%; max-width: 100%; }
  body.reports-ui #loadReport { white-space: nowrap; }
  /* Ô lọc xếp dọc cho cột hẹp trên desktop; khi cột rộng hết màn thì xếp hai ô một hàng. */
  body.reports-ui .col-lg-3 .row.g-2 > .col-12:has(:is(.form-control, .form-select)):not(:has(.btn)) { flex: 0 0 50%; max-width: 50%; }
  body.reports-ui .pc-report-table-wrap { max-height: none !important; overflow: auto; }
  body.reports-ui .pc-report-table { min-width: 720px; }
  body.reports-ui .pc-report-table :is(th, td) { padding: 12px 10px; }
  body.reports-ui .pc-report-table .btn { min-height: var(--size-control-sm) !important; padding: 6px 10px; font-size: 13px; }
  body.reports-ui .summary-widgets-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  body.reports-ui .goods-workspace .btn-group { display: flex; }
  body.reports-ui .goods-workspace .btn-group .btn { flex: 1 1 auto; min-height: var(--size-touch-min) !important; }
  body.reports-ui canvas { max-width: 100%; }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
  body.reports-ui .summary-widgets-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}

/* In báo cáo: giấu bộ lọc và nút, bảng gọn, tiêu đề lặp mỗi trang. */
@media print {
  /* Giấu khung ứng dụng, giữ đầu phiếu thương hiệu và bảng báo cáo. */
  body.reports-ui.petclinic-b2b-shell :is(.pc-shell-sidebar, .pc-shell-topbar, .pc-shell-page-title) { display: none !important; }
  body.reports-ui { background: #fff !important; }
  body.reports-ui main.app-page-main { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; background: #fff !important; }
  body.reports-ui :is(nav, footer, .btn, .pc-report-filter) { display: none !important; }
  body.reports-ui main { padding: 0 !important; }
  body.reports-ui .card { box-shadow: none !important; border: 0 !important; }
  body.reports-ui .table { font-size: 10px; }
  body.reports-ui thead { display: table-header-group; }
}

/* ===================== Dùng chung (ex admin.css, trước đây nạp toàn cục) ===================== */
@media screen {
  .page-title-box { padding: var(--spacing-md) 0; border-bottom: 1px solid var(--color-border-default); margin-bottom: var(--spacing-lg); }
  .page-title-box :is(h1, h4) { margin: 0; font-weight: 600; color: var(--color-text-primary); }
  .page-title-box .page-title { font-size: 22px; }
  body main.app-page-main code { background: var(--color-bg-surface-soft); padding: 2px 6px; border-radius: var(--radius-sm); font-size: .9em; color: var(--color-text-danger); }
  body main.app-page-main .form-text { color: var(--color-text-muted); font-size: 13px; }
  body main.app-page-main .alert { border: 0; border-radius: var(--radius-md); }
  body main.app-page-main .alert-info { background: var(--color-bg-primary-soft); color: var(--color-text-link); }
  body main.app-page-main .alert-success { background: var(--color-bg-success-soft); color: var(--color-text-success); }
  body main.app-page-main .alert-danger { background: var(--color-bg-danger-soft); color: var(--color-text-danger); }
  body .modal-header { background: var(--color-bg-surface-soft); border-bottom: 1px solid var(--color-border-default); }
  body .modal-title { color: var(--color-text-primary); font-weight: 600; }
  body .dropdown-menu { border: 1px solid var(--color-border-default); box-shadow: var(--shadow-modal); border-radius: var(--radius-md); }
  body .dropdown-item { color: var(--color-text-primary); font-weight: 500; }
  body .dropdown-item:hover { background: var(--color-bg-surface-soft); color: var(--color-text-link); }
}

/* ===================== Quản trị: người dùng, chi nhánh, quyền, công cụ (ex inline style) ===================== */
@media screen {
  /* Người dùng: thông báo nổi, thông báo lỗi dưới ô nhập, Select2 trong modal phải luôn hiện. */
  body.admin-ui .toast-notification { min-width: 300px; box-shadow: var(--shadow-modal); }
  body.admin-ui .toast-container { animation: pc-slide-in-right .3s ease; }
  @keyframes pc-slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
  body.admin-ui .error-message { font-size: 13px; margin-top: 4px; }
  body.admin-ui :is(#modal_role, #edit_modal_role, .select2-container, .select2-selection) { display: block !important; visibility: visible !important; }
  body.admin-ui .avatar-sm { width: 40px; height: 40px; font-size: 14px; }

  /* Chi nhánh: bảng kẻ ô, Select2 cùng chiều cao ô nhập, ô bị khóa ở chế độ xem. */
  body.admin-ui .branches-page .table { border-collapse: collapse; }
  body.admin-ui .branches-page .table :is(th, td) { border: 1px solid var(--color-border-default); padding: 12px; }
  body.admin-ui .branches-page .table thead th { border-bottom: 2px solid var(--color-border-default); background: var(--color-bg-surface-soft); }
  body.admin-ui .branches-page .table tbody tr:hover { background: var(--color-bg-surface-soft); }
  body.admin-ui .select2-container .select2-selection--single { height: var(--pc-control-height); border: 1px solid var(--color-border-strong); border-radius: 7px; }
  body.admin-ui .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--color-text-primary); }
  body.admin-ui #branchForm :is(input, select, textarea):disabled, body.admin-ui .select2-container--disabled .select2-selection--single { background: var(--pc-gray-100); opacity: 1; cursor: not-allowed; }

  /* Quyền: danh sách quyền và người dùng trong thẻ vai trò, ma trận quyền có tiêu đề dính. */
  body.admin-ui .permissions-list { max-height: 200px; overflow-y: auto; }
  body.admin-ui .permissions-list li { font-size: 13px; margin-bottom: 2px; }
  body.admin-ui .users-list { max-height: 300px; overflow-y: auto; }
  body.admin-ui .user-item { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid var(--color-border-default); font-size: 14px; }
  body.admin-ui .user-item:last-child { border-bottom: 0; }
  body.admin-ui .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-primary); color: var(--color-text-on-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 10px; flex: 0 0 auto; }
  body.admin-ui .permission-checkbox { margin-right: 8px; }
  body.admin-ui .list-group-item.active { background: var(--color-bg-primary); border-color: var(--color-bg-primary); }
  body.admin-ui #permissionsMatrix th { position: sticky; top: 0; z-index: 10; }
  body.admin-ui #permissionsMatrix thead.table-dark th { --bs-table-bg: var(--color-bg-surface-soft); --bs-table-color: var(--color-text-secondary); background: var(--color-bg-surface-soft); color: var(--color-text-secondary); }
  body.admin-ui .modal-xl { max-width: 90%; }

  /* Phím tắt. */
  body.admin-ui .shortcut-key, body.admin-ui kbd { background: var(--color-bg-surface-soft); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); padding: 2px 6px; color: var(--color-text-primary); font-size: 13px; }

  /* Thông báo hệ thống. */
  body.admin-ui .notifications-page { max-width: 1120px; margin: 0 auto; padding: var(--spacing-xl) var(--spacing-lg) 56px; }
  body.admin-ui .notifications-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
  body.admin-ui .notifications-header h1 { margin: 0; color: var(--color-text-primary); font-size: 24px; font-weight: 700; }
  body.admin-ui .notifications-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  body.admin-ui .notifications-empty { min-height: 340px; display: grid; place-items: center; padding: 48px 20px; text-align: center; }
  body.admin-ui .notifications-empty-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 50%; background: var(--color-bg-primary-soft); color: var(--color-text-link); font-size: 28px; }
  body.admin-ui .notifications-empty h2 { color: var(--color-text-primary); font-size: 16px; font-weight: 700; margin-bottom: 8px; text-transform: none; }
  body.admin-ui .notifications-empty p { color: var(--color-text-secondary); margin: 0; max-width: 520px; }
  body.admin-ui .notification-item { padding: 18px 20px; border-bottom: 1px solid var(--color-border-default); }
  body.admin-ui .notification-item:last-child { border-bottom: 0; }
  body.admin-ui .notification-item h2 { margin: 0 0 6px; color: var(--color-text-primary); font-size: 16px; font-weight: 700; }
  body.admin-ui .notification-item p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
  body.admin-ui .notification-meta { margin-top: 8px; color: var(--color-text-muted); font-size: 13px; }
  body.admin-ui .notifications-error { margin-bottom: var(--spacing-md); padding: 12px 14px; border: 1px solid #fed7aa; border-radius: var(--radius-lg); background: var(--color-bg-warning-soft); color: var(--color-text-warning); }

  /* Trang quản trị Sales feed (kiểu dùng chung của các trang cấu hình). */
  body.admin-ui .attendance-page { max-width: var(--app-page-width); margin: 0 auto; color: var(--color-text-primary); }
  body.admin-ui .attendance-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
  body.admin-ui .attendance-heading h1 { font-size: 28px; font-weight: 700; margin: 2px 0 4px; }
  body.admin-ui :is(.attendance-heading p, .section-title p) { color: var(--color-text-secondary); margin: 0; }
  body.admin-ui .eyebrow { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); letter-spacing: .08em; }
  body.admin-ui .status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: var(--size-touch-min); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); padding: 8px 12px; font-weight: 700; color: var(--color-text-secondary); background: var(--color-bg-surface); }
  body.admin-ui .status-pill i { font-size: 8px; }
  body.admin-ui .status-pill.is-on { color: var(--color-text-success); border-color: #bbf7d0; background: var(--color-bg-success-soft); }
  body.admin-ui .attendance-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); box-shadow: var(--shadow-card); }
  body.admin-ui .section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: 18px; }
  body.admin-ui :is(.section-title h2, .api-card h2) { font-size: 16px; font-weight: 700; margin: 0 0 3px; color: var(--color-text-primary); text-transform: none; }
  body.admin-ui .form-grid { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 14px; margin-bottom: 14px; }
  body.admin-ui .field span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; }
  body.admin-ui .connection-row { display: flex; align-items: center; gap: var(--spacing-md); margin-top: 18px; }

  /* Nhập dữ liệu ban đầu. */
  body.admin-ui .idi { max-width: 1160px; margin: 0 auto 36px; color: var(--color-text-primary); }
  body.admin-ui .idi-head { display: flex; align-items: end; justify-content: space-between; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
  body.admin-ui .idi-kicker { color: var(--color-text-link); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
  body.admin-ui .idi-head h2 { margin: 5px 0 7px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
  body.admin-ui :is(.idi-head p, .idi-block > p) { margin: 0; color: var(--color-text-secondary); }
  body.admin-ui .idi .btn { min-height: var(--pc-control-height); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; }
  body.admin-ui .idi-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 var(--spacing-lg); padding: 0; list-style: none; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
  body.admin-ui .idi-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 17px 20px; color: var(--color-text-muted); }
  body.admin-ui .idi-steps li:not(:last-child):after { content: ""; position: absolute; right: 0; width: 1px; height: 34px; background: var(--color-border-default); }
  body.admin-ui .idi-steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pc-gray-100); font-size: 13px; }
  body.admin-ui :is(.idi-steps span, .idi-file span, .idi-progress span, .idi-status) { display: grid; gap: 2px; }
  body.admin-ui .idi-steps strong { font-size: 14px; color: var(--color-text-secondary); }
  body.admin-ui .idi-steps small { font-size: 12px; }
  body.admin-ui .idi-steps .on b { background: var(--color-bg-primary); color: var(--color-text-on-primary); }
  body.admin-ui .idi-steps .on strong { color: var(--color-text-primary); }
  body.admin-ui .idi-panel { overflow: hidden; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  body.admin-ui .idi-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--spacing-md); padding: var(--spacing-lg); }
  body.admin-ui .idi-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius-lg); background: var(--color-bg-primary-soft); color: var(--color-text-link); font-size: 11px; font-weight: 900; }
  body.admin-ui :is(.idi-upload h3, .idi-block h3) { margin: 0 0 5px; font-size: 16px; font-weight: 700; color: var(--color-text-primary); text-transform: none; }
  body.admin-ui :is(.idi-upload p, .idi-block p) { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
  body.admin-ui .idi-file { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius-md); background: var(--color-bg-surface-soft); }
  body.admin-ui .idi-file > i { color: var(--color-text-success); }
  body.admin-ui .idi-file strong { font-size: 13px; overflow-wrap: anywhere; }
  body.admin-ui .idi-file small { font-size: 12px; color: var(--color-text-muted); }
  body.admin-ui :is(.idi-progress, .idi-status) { display: flex; align-items: center; gap: 12px; margin: 0 var(--spacing-lg) var(--spacing-lg); padding: 14px 16px; border-radius: var(--radius-lg); }
  body.admin-ui .idi-progress { background: var(--color-bg-primary-soft); color: var(--color-text-link); }
  body.admin-ui .idi-progress > i { width: 22px; height: 22px; border: 3px solid var(--pc-blue-100); border-top-color: var(--color-bg-primary); border-radius: 50%; animation: idi-spin .8s linear infinite; }
  body.admin-ui :is(.idi-progress small, .idi-status small) { font-size: 12px; }
  body.admin-ui .idi-status.ok { border: 1px solid #a7e5d4; background: var(--color-bg-success-soft); color: var(--color-text-success); }
  body.admin-ui .idi-status.bad { border: 1px solid #fecaca; background: var(--color-bg-danger-soft); color: var(--color-text-danger); }
  @keyframes idi-spin { to { transform: rotate(360deg); } }
  body.admin-ui .idi-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 var(--spacing-lg) var(--spacing-lg); }
  body.admin-ui .idi-summary article { display: grid; gap: 4px; padding: 15px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface-soft); }
  body.admin-ui .idi-summary span { font-size: 12px; color: var(--color-text-secondary); }
  body.admin-ui .idi-summary strong { font-size: 23px; }
  body.admin-ui .idi-summary small { font-size: 11px; color: var(--color-text-muted); }
  body.admin-ui .idi-block { padding: 22px var(--spacing-lg); border-top: 1px solid var(--color-border-default); }
  body.admin-ui .idi-table { max-width: 100%; margin-top: 14px; overflow: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
  body.admin-ui .idi-table table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
  body.admin-ui .idi-table th { padding: 11px 13px; background: var(--color-bg-surface-soft); color: var(--color-text-secondary); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
  body.admin-ui .idi-table td { padding: 12px 13px; border-top: 1px solid var(--color-border-default); }
  body.admin-ui .idi-table code { color: var(--color-text-link); background: transparent; font-weight: 700; }
  body.admin-ui .idi-chip { display: inline-flex; padding: 4px 7px; border-radius: var(--radius-sm); background: var(--color-bg-primary-soft); color: var(--color-text-link); font-size: 11px; font-weight: 700; }
  body.admin-ui .idi-errors section { margin-top: 12px; border: 1px solid #fecdd3; border-radius: var(--radius-lg); overflow: hidden; }
  body.admin-ui .idi-errors h4 { display: flex; justify-content: space-between; margin: 0; padding: 11px 14px; background: var(--color-bg-danger-soft); color: var(--color-text-danger); font-size: 13px; font-weight: 700; }
  body.admin-ui .idi-errors ul { margin: 0; padding: 0; list-style: none; }
  body.admin-ui .idi-errors li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 11px 14px; border-top: 1px solid #ffe4e6; font-size: 13px; }
  body.admin-ui .idi-errors li b { color: var(--color-text-danger); }
  body.admin-ui .idi-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); padding: 18px var(--spacing-lg); border-top: 1px solid var(--color-border-default); background: var(--color-bg-surface-soft); }
  body.admin-ui .idi-footer > div { display: grid; gap: 3px; }
  body.admin-ui .idi-footer strong { font-size: 13px; }
  body.admin-ui .idi-footer span { font-size: 12px; color: var(--color-text-muted); }

  /* Gói dịch vụ (ex subscription-plan.css + subscription-catalog.css). */
  body.admin-ui .subscription-page { width: min(1180px, 100%); max-width: none; margin: 0 auto; padding: var(--spacing-lg) clamp(16px, 2.5vw, 32px) 40px; color: var(--color-text-primary); }
  body.admin-ui .subscription-heading-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
  body.admin-ui .subscription-kicker { margin: 0 0 4px; color: var(--color-text-success); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
  body.admin-ui .subscription-page h2 { margin: 0; font-size: 24px; font-weight: 700; }
  body.admin-ui .subscription-lead { margin: 6px 0 0; color: var(--color-text-secondary); }
  body.admin-ui :is(.subscription-card, .subscription-empty) { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
  body.admin-ui .subscription-card { overflow: hidden; }
  body.admin-ui .subscription-current { margin-bottom: 18px; }
  body.admin-ui .subscription-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 18px; }
  body.admin-ui .subscription-plan-card { width: 100%; }
  body.admin-ui .subscription-card-main { display: flex; justify-content: space-between; align-items: center; padding: 28px 30px; background: linear-gradient(135deg, var(--pc-blue-50), var(--pc-green-50)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  body.admin-ui .subscription-card h3 { margin: 12px 0 3px; font-size: 28px; }
  body.admin-ui .subscription-card-main p { margin: 0; color: var(--color-text-secondary); }
  body.admin-ui .subscription-status { display: inline-flex; padding: 6px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; }
  body.admin-ui .subscription-status--success { color: var(--color-text-success); background: var(--color-bg-success-soft); }
  body.admin-ui .subscription-status--warning { color: var(--color-text-warning); background: var(--color-bg-warning-soft); }
  body.admin-ui .subscription-status--danger { color: var(--color-text-danger); background: var(--color-bg-danger-soft); }
  body.admin-ui .subscription-plan-mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--color-bg-primary); color: var(--color-text-on-primary); font-size: 30px; }
  body.admin-ui .subscription-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--color-border-default); border-top: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); }
  body.admin-ui .subscription-grid > div { padding: 22px 26px; background: var(--color-bg-surface); }
  body.admin-ui .subscription-grid dt { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  body.admin-ui .subscription-grid dd { margin: 5px 0 0; font-size: 16px; font-weight: 700; }
  body.admin-ui .subscription-features { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-lg); padding: var(--spacing-lg) 26px; border-bottom: 1px solid var(--color-border-default); }
  body.admin-ui .subscription-section-label { margin: 0 0 5px; color: var(--color-text-success); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
  body.admin-ui .subscription-features h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--color-text-primary); text-transform: none; }
  body.admin-ui .subscription-features ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
  body.admin-ui .subscription-features li { display: flex; gap: 8px; align-items: center; color: var(--pc-gray-700); font-weight: 600; }
  body.admin-ui .subscription-features li i { color: var(--color-bg-success); }
  body.admin-ui .subscription-actions { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: var(--spacing-lg) 26px; }
  body.admin-ui .subscription-actions p { margin: 0; color: var(--color-text-secondary); }
  body.admin-ui .subscription-empty { padding: 56px 24px; text-align: center; }
  body.admin-ui .subscription-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background: var(--color-bg-primary-soft); color: var(--color-text-link); font-size: 24px; }
  body.admin-ui .subscription-empty h3 { margin: 0 0 8px; font-size: 20px; }
  body.admin-ui .subscription-empty p { max-width: 600px; margin: 0 auto 20px; color: var(--color-text-secondary); }
  body.admin-ui .subscription-preview-note { display: flex; align-items: center; gap: 12px; margin-bottom: var(--spacing-md); padding: 12px 16px; border: 1px solid #f7c65f; border-radius: var(--radius-lg); background: var(--color-bg-warning-soft); color: var(--color-text-warning); }
  body.admin-ui .subscription-preview-note > i { font-size: 20px; }
  body.admin-ui .subscription-preview-note div { display: flex; flex: 1; flex-direction: column; }
  body.admin-ui .subscription-preview-note span { font-size: 13px; }
  body.admin-ui .subscription-preview-note a { color: var(--color-text-link); font-weight: 700; text-decoration: none; }
  body.admin-ui .subscription-checkout-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 8px 12px; width: 100%; }
  body.admin-ui .subscription-checkout-form label { grid-column: 1 / -1; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  body.admin-ui .subscription-checkout-form .form-select { min-height: var(--size-touch-min); }
  body.admin-ui .subscription-checkout-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--size-touch-min); padding-inline: 22px; white-space: nowrap; }
  body.admin-ui .subscription-role-note { display: flex; align-items: center; gap: 8px; }
  body.admin-ui .subscription-checkout-result { margin-top: 18px; padding: var(--spacing-lg) 26px; }
  body.admin-ui .subscription-checkout-result h3 { margin: 0 0 14px; font-size: 22px; }
  body.admin-ui .subscription-checkout-result .alert { margin: 0 0 14px; }
  body.admin-ui .subscription-qr { display: block; width: min(260px, 100%); height: auto; margin: 18px 0; }
  body.admin-ui .referral-card { margin-top: 18px; }
  body.admin-ui .referral-card-body { padding: var(--spacing-lg) 26px; }
  body.admin-ui .referral-card h3 { margin: 4px 0 14px; font-size: 22px; }
  body.admin-ui .referral-code { font-size: 32px; font-weight: 800; letter-spacing: .08em; color: var(--pc-blue-700, #0759d7); user-select: all; word-break: break-all; }
  body.admin-ui .referral-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 18px; }
  body.admin-ui .referral-actions .btn, body.admin-ui .referral-login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--size-touch-min); min-width: var(--size-touch-min); padding-inline: 18px; }
  body.admin-ui .referral-copy-status { color: var(--color-text-secondary); font-size: 13px; }
  body.admin-ui .referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
  body.admin-ui .referral-stats > div { padding: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); text-align: center; }
  body.admin-ui .referral-stats strong { display: block; font-size: 26px; line-height: 1.1; }
  body.admin-ui .referral-stats span { color: var(--color-text-secondary); font-size: 13px; }
  body.admin-ui .referral-conditions, body.admin-ui .referral-note { margin: 0 0 12px; color: var(--color-text-secondary); }
  body.admin-ui .referral-history { list-style: none; margin: 0; padding: 0; }
  body.admin-ui .referral-history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-border-default); font-size: 14px; }

  /* In tem mã vạch: khung xem trước, tem, khổ giấy, bảng hàng đã chọn. */
  body.admin-ui .barcode-preview-wrapper { border: 1px dashed var(--color-border-default); border-radius: var(--radius-md); padding: 12px; max-height: 600px; overflow: auto; background: var(--color-bg-surface); }
  body.admin-ui .barcode-label { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 4px 8px; background: #fff; text-align: center; box-sizing: border-box; }
  body.admin-ui .barcode-image { width: 100%; max-width: 180px; height: auto; margin-bottom: 2px; }
  /* EAN-13 ở mức 80%: 113 modules x 0,264 mm = 29,832 mm, đã gồm quiet zone trái 11X và phải 7X. Không kéo giãn theo khung. */
  body.admin-ui .ean13-label .barcode-image { width: 29.832mm; max-width: 29.832mm; height: 12.5mm; flex: 0 0 12.5mm; }
  body.admin-ui .barcode-text-main { font-weight: 300; letter-spacing: .08em; margin-bottom: 2px; white-space: nowrap; }
  body.admin-ui .barcode-product-name { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; line-height: 1.1; color: #111827; }
  body.admin-ui .barcode-product-price { font-size: 9px; font-weight: 700; line-height: 1.1; color: #111827; white-space: nowrap; }
  body.admin-ui .inventory-label-quantity { min-width: 72px; text-align: center; }
  body.admin-ui .paper-preset-item:not([data-preset-id="xprinter_3up_106x23"]) { display: none; }
  body.admin-ui .selected-products-panel { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); min-height: 330px; overflow: auto; }
  body.admin-ui .selected-products-table { width: 100%; border-collapse: collapse; }
  body.admin-ui .selected-products-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: var(--color-bg-surface-soft); color: var(--color-text-secondary); font-size: 12px; text-align: left; border-bottom: 1px solid var(--color-border-default); }
  body.admin-ui .selected-products-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-border-default); vertical-align: middle; }
  body.admin-ui .selected-product-name { font-weight: 700; color: var(--color-text-primary); }
  body.admin-ui .selected-product-code { color: var(--color-text-secondary); font-size: 12px; }
  body.admin-ui .label-qty-control { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: 18px; overflow: hidden; background: var(--color-bg-surface); }
  body.admin-ui .label-qty-control button { width: 30px; height: 30px; border: 0; background: var(--color-bg-primary-soft); color: var(--color-text-link); font-weight: 700; }
  body.admin-ui .label-qty-control input { width: 48px; height: 30px; border: 0; text-align: center; outline: none; }
  body.admin-ui .remove-selected-product { border: 0; background: transparent; color: var(--color-bg-danger); font-size: 18px; }
  body.admin-ui .print-settings-summary { padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--pc-blue-100); border-radius: var(--radius-md); background: var(--color-bg-primary-soft); font-size: 13px; text-align: left; }
  body.admin-ui .barcode-preview { display: flex; flex-wrap: wrap; align-items: flex-start; }
  body.admin-ui .paper-presets { display: flex; flex-direction: column; gap: 0; }
  body.admin-ui .paper-preset-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); text-align: left; transition: box-shadow .15s ease, border-color .15s ease; }
  body.admin-ui .paper-preset-item:hover { border-color: var(--pc-blue-100); box-shadow: var(--shadow-card); }
  body.admin-ui .paper-preset-item.is-selected { border-color: var(--color-bg-primary); box-shadow: 0 0 0 3px var(--pc-blue-100); }
  body.admin-ui .paper-preset-thumb { width: 74px; height: 48px; display: block; position: relative; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-bg-surface-soft), #fff); border: 1px solid var(--color-border-default); overflow: hidden; }
  body.admin-ui .paper-preset-thumb__roll { position: absolute; left: 6px; top: 10px; width: 20px; height: 28px; border-radius: 10px; background: #fff; border: 1px solid var(--color-border-strong); box-shadow: inset -6px 0 0 rgba(0,0,0,.03); }
  body.admin-ui .paper-preset-thumb__grid { position: absolute; left: 30px; top: 8px; right: 8px; bottom: 8px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: 6px; overflow: hidden; }
  body.admin-ui .paper-preset-thumb__grid::before { content: ""; position: absolute; inset: 0; opacity: .9; background: linear-gradient(#e9ecef 1px, transparent 1px) 0 0 / 100% 10px, linear-gradient(90deg, #e9ecef 1px, transparent 1px) 0 0 / 16px 100%; }
  body.admin-ui .paper-preset-thumb__grid--1::before { background: linear-gradient(#e9ecef 1px, transparent 1px) 0 0 / 100% 16px, linear-gradient(90deg, #e9ecef 1px, transparent 1px) 0 0 / 100% 100%; }
  body.admin-ui .paper-preset-thumb__grid--2::before { background: linear-gradient(#e9ecef 1px, transparent 1px) 0 0 / 100% 10px, linear-gradient(90deg, #e9ecef 1px, transparent 1px) 0 0 / 50% 100%; }
  body.admin-ui .paper-preset-thumb__grid--3::before { background: linear-gradient(#e9ecef 1px, transparent 1px) 0 0 / 100% 10px, linear-gradient(90deg, #e9ecef 1px, transparent 1px) 0 0 / 33.333% 100%; }
  body.admin-ui .paper-preset-title { display: block; font-weight: 700; color: var(--color-text-primary); line-height: 1.1; }
  body.admin-ui .paper-preset-sub { display: block; color: var(--color-text-secondary); font-size: 12px; margin-top: 2px; line-height: 1.2; }
  body.admin-ui .paper-preset-action .btn { pointer-events: none; }
}

/* Quản trị trên máy tính bảng: tiêu đề + nút wrap, bộ lọc 2 cột, thẻ vai trò 2 cột, bảng cuộn ngang, lưới công cụ xếp dọc. */
@media screen and (max-width: 1024px) {
  body.admin-ui .goods-workspace > .row > .col-12 > .d-flex.justify-content-between.mb-4,
  body.admin-ui .goods-workspace > .col-12.d-flex.justify-content-between,
  body.admin-ui .goods-workspace > .col-12 > .d-flex.justify-content-between.mb-4 { flex-wrap: wrap; gap: var(--spacing-sm); }
  body.admin-ui .goods-workspace :is(h1, h4) { font-size: 22px; margin: 0; }
  body.admin-ui .goods-workspace .d-flex.justify-content-between.mb-4 > div > .btn { margin-bottom: var(--spacing-xs); }
  body.admin-ui .goods-workspace form .row.g-3 > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  body.admin-ui .goods-workspace form .row.g-3 .d-inline-flex { width: 100%; }
  body.admin-ui .goods-workspace .row > :is(.col-md-3, .col-lg-3) { flex: 0 0 50%; max-width: 50%; }
  body.admin-ui main.app-page-main .table-responsive { overflow-x: auto; }
  body.admin-ui main.app-page-main table:is(#usersTable, .table-bordered, .table-hover) { min-width: 720px; }
  body.admin-ui main.app-page-main table tbody td { padding: 12px 10px; }
  body.admin-ui main.app-page-main table .btn { min-height: var(--size-control-sm) !important; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  body.admin-ui main.app-page-main table .btn-group .btn { min-width: var(--size-touch-min); }
  body.admin-ui #permissionsMatrix .form-check-input { width: 24px; height: 24px; }
  body.admin-ui .modal-xl { max-width: calc(100vw - 24px) !important; }
  body.admin-ui #categoryTabs .list-group-item { min-height: var(--size-touch-min); }
  body.admin-ui .status-pill { align-self: flex-start; }
  body.admin-ui .form-grid { grid-template-columns: 1fr; }
  body.admin-ui :is(.attendance-heading, .section-title, .connection-row) { align-items: stretch; flex-direction: column; }
  body.admin-ui .connection-row .btn { align-self: flex-end; }
  body.admin-ui .idi-head { align-items: stretch; flex-direction: column; }
  body.admin-ui .idi-head .btn { align-self: flex-start; }
  body.admin-ui .idi-steps { grid-template-columns: 1fr; }
  body.admin-ui .idi-steps li { padding: 13px 16px; }
  body.admin-ui .idi-steps li:not(:last-child):after { left: 29px; right: auto; bottom: 0; width: calc(100% - 58px); height: 1px; }
  body.admin-ui .idi-summary { grid-template-columns: repeat(2, 1fr); }
  body.admin-ui .idi-upload { grid-template-columns: auto 1fr; }
  body.admin-ui :is(.idi-upload .btn, .idi-file) { grid-column: 1 / 3; }
  body.admin-ui .idi-footer { align-items: stretch; flex-direction: column; }
  body.admin-ui .idi-footer .btn { width: 100%; }
  body.admin-ui :is(.subscription-grid, .subscription-features, .subscription-features ul) { grid-template-columns: 1fr; }
  body.admin-ui .subscription-actions { align-items: stretch; flex-direction: column; }
  body.admin-ui .subscription-actions .btn { width: 100%; }
  body.admin-ui .subscription-card-main { padding: 22px; flex-wrap: wrap; gap: 12px; }
  body.admin-ui .subscription-current .subscription-card-main > div { flex: 1 1 210px; }
  body.admin-ui .subscription-plan-mark { width: 56px; height: 56px; }
  body.admin-ui .subscription-card h3 { font-size: 22px; }
  body.admin-ui .subscription-checkout-form { grid-template-columns: 1fr; }
  body.admin-ui .subscription-checkout-form label { grid-column: auto; }
  body.admin-ui .subscription-checkout-form .btn { width: 100%; }
  body.admin-ui .subscription-preview-note { align-items: flex-start; flex-wrap: wrap; }
  body.admin-ui .barcode-preview-wrapper { max-height: 400px; }
  body.admin-ui .label-qty-control button { width: var(--size-touch-min); height: var(--size-touch-min); }
  body.admin-ui .label-qty-control input { height: var(--size-touch-min); }
  body.admin-ui .remove-selected-product { min-width: var(--size-touch-min); min-height: var(--size-touch-min); }
}
@media screen and (max-width: 520px) {
  body.admin-ui .idi-head h2 { font-size: 24px; }
  body.admin-ui .idi-summary { padding: 0 16px 18px; }
  body.admin-ui :is(.idi-upload, .idi-block) { padding: 18px 16px; }
  body.admin-ui :is(.idi-progress, .idi-status) { margin-inline: 16px; }
  body.admin-ui .idi-errors li { grid-template-columns: 1fr; gap: 4px; }
  body.admin-ui .subscription-page { padding: 18px 12px 32px; }
}

/* In tem mã vạch từ trang (chỉ khi trang có khung xem trước). */
@page { margin: 5mm 10mm 10mm; }
@media print {
  body:has(#barcodePreviewWrapper) * { visibility: hidden; }
  body:has(#barcodePreviewWrapper) #barcodePreviewWrapper, body:has(#barcodePreviewWrapper) #barcodePreviewWrapper * { visibility: visible; }
  body:has(#barcodePreviewWrapper) #barcodePreviewWrapper { position: absolute; left: 0; top: 0; width: 100%; border: none !important; }
  body:has(#barcodePreviewWrapper) #barcodePreview { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; }
  body:has(#barcodePreviewWrapper) .barcode-label { page-break-inside: avoid; break-inside: avoid; }
}

/* ===================== Hồ sơ pháp lý (trang trong app: danh sách, mẫu, lập, xem) ===================== */
@media screen {
  body.clinic-forms-ui .forms-status { font-weight: 600; }
  body.clinic-forms-ui .forms-status-DRAFT { background: var(--color-bg-surface-soft) !important; color: var(--color-text-secondary) !important; }
  body.clinic-forms-ui .forms-status-AWAITING_SIGNATURE { background: var(--color-bg-warning-soft) !important; color: var(--color-text-warning) !important; }
  body.clinic-forms-ui .forms-status-SIGNED { background: var(--color-bg-success-soft) !important; color: var(--color-text-success) !important; }
  body.clinic-forms-ui .forms-status-SUPERSEDED { background: var(--color-bg-primary-soft) !important; color: var(--color-text-link) !important; }
  body.clinic-forms-ui .forms-status-VOID { background: var(--color-bg-danger-soft) !important; color: var(--color-text-danger) !important; }
  body.clinic-forms-ui .forms-preview { font-size: 15px; }
  body.clinic-forms-ui .forms-block-title { font-weight: 700; margin: var(--spacing-md) 0 var(--spacing-sm); }
  body.clinic-forms-ui .forms-block-paragraph { text-align: justify; color: var(--color-text-primary); }
  body.clinic-forms-ui .forms-facts { padding: 12px 16px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface-soft); margin-bottom: var(--spacing-md); }
  body.clinic-forms-ui .forms-facts-grid { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
  body.clinic-forms-ui .forms-facts-grid dt { color: var(--color-text-muted); font-weight: 500; }
  body.clinic-forms-ui .forms-facts-grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
  body.clinic-forms-ui .forms-input-preview { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--color-border-default); }
  body.clinic-forms-ui .forms-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
  /* Điều khoản chưa tick là bản xem trước, xác nhận tại màn ký. */
  body.clinic-forms-ui .forms-clause-preview { opacity: .75; padding: 10px 14px; margin: 0 0 8px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); }
  body.clinic-forms-ui .forms-clause-preview.is-acked { opacity: 1; background: var(--color-bg-success-soft); border-color: #a7e5d4; }
  body.clinic-forms-ui .forms-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
  body.clinic-forms-ui .forms-choice { margin: 0; padding: 8px 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); }
  body.clinic-forms-ui .forms-signatures-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); text-align: center; }
  body.clinic-forms-ui .forms-signature-slot { padding: 12px; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
  body.clinic-forms-ui .forms-signature-img { display: block; max-width: 220px; max-height: 110px; margin: 8px auto; }
  body.clinic-forms-ui .forms-signature-empty { margin: 24px 0; color: var(--color-text-muted); }
  body.clinic-forms-ui .forms-template-row { min-height: 64px; }
  body.clinic-forms-ui .forms-table tbody td { padding: 12px 14px; }
  /* Thẻ hồ sơ pháp lý trong chi tiết bệnh án. */
  .clinic-forms-card .list-group-item { min-height: var(--size-touch-min); }
}
@media screen and (max-width: 1024px) {
  body.clinic-forms-ui .forms-facts-grid { grid-template-columns: max-content 1fr; }
  body.clinic-forms-ui .forms-choice { min-height: var(--size-touch-min); display: flex; align-items: center; }
  body.clinic-forms-ui .forms-table { min-width: 760px; }
}

/* ===================== Hồ sơ pháp lý F2: bộ soạn mẫu, danh sách chờ ký, cảnh báo mềm ===================== */
@media screen {
  body.clinic-forms-ui .forms-editor-list { display: grid; gap: var(--spacing-sm); }
  body.clinic-forms-ui .forms-editor-block { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
  body.clinic-forms-ui .forms-editor-block > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-surface-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  body.clinic-forms-ui .forms-editor-type { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-secondary); }
  body.clinic-forms-ui .forms-editor-tools { display: flex; gap: 4px; }
  body.clinic-forms-ui .forms-editor-tools .btn { min-height: 36px; min-width: 36px; padding: 4px 10px; }
  body.clinic-forms-ui .forms-editor-body { display: grid; gap: 10px; padding: 12px; }
  body.clinic-forms-ui .forms-editor-field label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 4px; }
  body.clinic-forms-ui .forms-editor-check { margin: 0; }
  body.clinic-forms-ui .forms-editor-rows { display: grid; gap: 6px; }
  body.clinic-forms-ui .forms-editor-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
  body.clinic-forms-ui .forms-editor-role { grid-template-columns: auto 1fr auto; }
  body.clinic-forms-ui .forms-editor-placeholders { display: flex; flex-wrap: wrap; gap: 4px; }
  body.clinic-forms-ui .forms-placeholder-chip { cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm); background: var(--color-bg-primary-soft); color: var(--color-text-link) !important; font-size: 12px; }
  body.clinic-forms-ui .forms-placeholder-chip.is-copied { background: var(--color-bg-success-soft); color: var(--color-text-success) !important; }
  body.clinic-forms-ui .forms-pending-list { display: grid; gap: var(--spacing-sm); }
  body.clinic-forms-ui .forms-pending-item .card-body { min-height: 72px; }
  body.clinic-forms-ui .forms-pending-actions .btn { min-height: var(--size-touch-min); min-width: 88px; }
  body.clinic-forms-ui .forms-audit .list-group-item { padding: 8px 12px; }
  .clinic-forms-warning { border-left: 4px solid var(--color-text-warning); }
  .clinic-forms-warning.alert-secondary { border-left-color: var(--color-border-strong); }
  .clinic-forms-warning .form-control-sm { min-width: 180px; }
}
@media screen and (max-width: 1024px) {
  body.clinic-forms-ui .forms-editor-row { grid-template-columns: 1fr; }
  body.clinic-forms-ui .forms-editor-row > .btn { justify-self: end; }
  body.clinic-forms-ui .forms-editor-add .btn { min-height: var(--size-touch-min); }
  body.clinic-forms-ui .forms-pending-actions { width: 100%; }
  body.clinic-forms-ui .forms-pending-actions .btn { flex: 1 1 auto; min-height: var(--size-control); }
  .clinic-forms-warning form { width: 100%; }
  .clinic-forms-warning .form-control-sm { flex: 1 1 auto; min-height: var(--size-touch-min); }
}

/* ===================================================================
   Content-width layout (tablet / small laptop)
   Breakpoints below measure .pc-shell-content (named container pc-content),
   which is the window minus the sidebar (264px open / 78px collapsed).
   Original @media rules stay as fallback for browsers without container
   queries. Do not restyle >=1440px windows or phones <=576px except to
   stop overflow.
   =================================================================== */

/* Date inputs: iOS Safari keeps an intrinsic min-width and centered
   native appearance, so the field spills into the next grid cell. */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
.pet-form-control[type="date"] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--pc-control-height) !important;
  height: var(--pc-control-height) !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 7px !important;
  background-color: #ffffff !important;
  padding: 0 12px !important;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.pet-form-field,
.pet-form-control-with-icon,
.pet-form-grid > * {
  min-width: 0;
  max-width: 100%;
}
.pet-form-control-with-icon {
  overflow: hidden;
}
.pet-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.modal-content,
.modal-body {
  container-type: inline-size;
}
.modal-dialog {
  max-height: calc(100dvh - 24px);
}
.modal-content {
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

/* Long text in a squeezed column wraps as words, never as one glyph per line. */
.pet-profile-title,
.pet-profile-identity,
.pet-profile-tags,
.goods-category-cell,
.goods-name-cell,
.customer-name {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.pet-name-link {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tables wider than the pane scroll inside their wrapper, not the page. */
body main.app-page-main .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body main.app-page-main .table-responsive.has-scroll-hint,
body.goods-ui .goods-table-panel .table-responsive,
body.reports-ui .pc-report-table-wrap,
body.admin-ui main.app-page-main .table-responsive,
.clinic-screen .table-responsive {
  background:
    linear-gradient(90deg, var(--color-bg-surface, #fff) 40%, transparent) 0 0 / 28px 100% local,
    linear-gradient(270deg, var(--color-bg-surface, #fff) 40%, transparent) 100% 0 / 28px 100% local,
    linear-gradient(90deg, rgba(23, 43, 77, .12), transparent) 0 0 / 12px 100% scroll,
    linear-gradient(270deg, rgba(23, 43, 77, .12), transparent) 100% 0 / 12px 100% scroll;
  background-repeat: no-repeat;
}

/* Inventory filter bar: wrap before placeholders are clipped.
   Other list filters keep the flex row until the content pane is narrow. */
body.goods-ui .inventory-items-page .goods-filter-bar .app-list-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
}
body.goods-ui .inventory-items-page .goods-filter-bar .select2-container {
  min-width: 0;
  width: 100% !important;
  max-width: 100%;
}
body.goods-ui .inventory-items-page .goods-filter-bar .select2-container .select2-selection--single .select2-selection__rendered,
body.goods-ui .inventory-items-page .goods-filter-bar .select2-selection__placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
body.goods-ui .inventory-items-page .goods-filter-bar .app-list-filters > [class*="col-"] {
  flex: unset;
  width: auto;
  min-width: 0;
  max-width: none;
}
@container pc-content (max-width: 1100px) {
  body main.app-page-main form.app-list-filters,
  body.goods-ui main.app-page-main form.transaction-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
  }
  body main.app-page-main form.app-list-filters > [class*="col-"],
  body.goods-ui main.app-page-main form.transaction-filter-form > [class*="col-"] {
    flex: unset;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/* Nearest-container queries for forms inside a modal (modal width, not the pane). */
@container (max-width: 700px) {
  .pet-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pet-form-field--full { grid-column: span 1; }
}

@container pc-content (max-width: 1199.98px) {
  .dashboard-overview-grid { grid-template-columns: 1fr; }
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-promo { min-height: 150px; }
  #customerWorkspace .customer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journal-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .journal-filters > div:first-child { grid-column: 1 / -1; }
}

@container pc-content (max-width: 1120px) {
  .pet-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-form-field--full { grid-column: span 2; }
}

@container pc-content (max-width: 1024px) {
  body .pet-filter-panel label,
  body .clinic-screen .clinic-filter-row > [class*="col-"] { flex-basis: calc(50% - 8px); min-width: calc(50% - 8px); }
  body .pc-page-head { flex-direction: column; align-items: stretch; }
  body .pc-page-actions { width: 100%; }
  body .clinic-screen .row > [class*="col-lg-"],
  body .pet-profile-layout,
  body .tc-layout { width: 100%; flex: 0 0 100%; max-width: 100%; grid-template-columns: 1fr; }
  body.goods-ui main.app-page-main form.transaction-filter-form > [class*="col-"],
  body.goods-ui main.app-page-main form.transaction-filter-form .filter-input { flex-basis: calc(50% - 6px); }
  body.goods-ui .goods-heading > .col-12 > .d-flex { flex-wrap: wrap; gap: var(--spacing-sm); }
  body.admin-ui .goods-workspace form .row.g-3 > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  body.admin-ui .goods-workspace .row > :is(.col-md-3, .col-lg-3) { flex: 0 0 50%; max-width: 50%; }
  body.admin-ui .form-grid { grid-template-columns: 1fr; }
  body.admin-ui :is(.subscription-grid, .subscription-features, .subscription-features ul) { grid-template-columns: 1fr; }
  body.reports-ui .summary-widgets-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  body.reports-ui .pc-report-table { min-width: 720px; }
  body.clinic-forms-ui .forms-facts-grid { grid-template-columns: max-content 1fr; }
  body.clinic-forms-ui .forms-editor-row { grid-template-columns: 1fr; }
  .tc-columns { grid-template-columns: 1fr; }
  .cp-page-grid { grid-template-columns: 1fr; }
  .cp-hero { grid-row: auto; }
}

@container pc-content (max-width: 900px) {
  .tc-columns { grid-template-columns: 1fr; }
  .tc-head { align-items: start; flex-direction: column; }
}

@container pc-content (max-width: 768px) {
  .pet-form-grid { grid-template-columns: minmax(0, 1fr); }
  .pet-form-field--full { grid-column: span 1; }
  .dashboard-kpi-grid,
  .dashboard-chart-grid { grid-template-columns: 1fr; }
  .dashboard-chart-card header { align-items: flex-start; flex-direction: column; }
  .journal-filters { grid-template-columns: minmax(0, 1fr); }
  #customerWorkspace .customer-header { align-items: start; flex-direction: column; }
  #customerWorkspace .customer-filters .customer-search { flex-basis: 100%; }
}

/* Fallback when container queries are missing: treat the window as if the
   sidebar (264px) is open, so layout still stacks before content overflows.
   1120 + 264 = 1384; 1024 + 264 = 1288. Windows >= 1440 stay on desktop. */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 1384px) {
    .pet-profile-hero { grid-template-columns: 1fr; }
    .pet-profile-actions { align-items: flex-start; }
    .pet-profile-actions-primary,
    .pet-profile-actions-secondary { justify-content: flex-start; }
    .pet-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pet-form-field--full { grid-column: span 2; }
  }
  @media screen and (max-width: 1288px) {
    .dashboard-overview-grid { grid-template-columns: 1fr; }
    .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #customerWorkspace .customer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tc-columns { grid-template-columns: 1fr; }
    body .pet-profile-layout { grid-template-columns: 1fr; }
  }
}

/* Touch: 40px minimum hit target (design system already uses 44px). */
@media (pointer: coarse) {
  body .btn,
  body .clinic-actions a,
  body .clinic-actions button,
  body .clinic-screen .clinic-icon,
  body .goods-row-toggle,
  body .goods-icon-action,
  body .page-link {
    min-height: 40px;
    min-width: 40px;
  }
  body .form-check-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }
  body table .form-check-input {
    width: 22px;
    height: 22px;
  }
  /* Switches keep their pill shape and cannot shrink in flex rows. */
  body .form-switch .form-check-input {
    width: 44px;
    height: 24px;
    min-width: 44px;
    min-height: 24px;
    flex: 0 0 auto;
  }
}

/* iOS zoom-on-focus: 16px only on coarse pointers / small windows. */
@media (pointer: coarse), (max-width: 1024px) {
  body.petclinic-b2b-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="color"]),
  body.petclinic-b2b-shell select,
  body.petclinic-b2b-shell textarea,
  body.petclinic-b2b-shell .form-control,
  body.petclinic-b2b-shell .form-select,
  body.petclinic-b2b-shell .pet-form-control {
    font-size: 16px;
  }
}

/* Preserve SSR action-row geometry when clinic-workspace wraps the heading. */
.clinic-screen .pc-repeated-title-actions-row > .clinic-page-head {
  flex: 1 1 100%;
  justify-content: flex-end;
  margin-bottom: 0;
}

.clinic-screen .pc-repeated-title-actions-row > .clinic-page-head > .clinic-head-actions {
  justify-content: flex-end;
}

/* ===================================================================
   Ô ngày/giờ/tệp: chữ nằm giữa theo chiều dọc và cách mép trái 13px.
   Các ô này không tự căn giữa chữ như ô nhập thường (nhất là Safari/iPad),
   nên dùng lề dọc thay vì padding 0.
   =================================================================== */
body input[type="date"],
body input[type="datetime-local"],
body input[type="time"],
body input[type="month"],
body input.pet-form-control[type="date"],
body input[type="file"].form-control {
  --pc-native-padding-y: calc((var(--pc-control-height) - 24px) / 2);
  padding: var(--pc-native-padding-y) 12px !important;
  line-height: 22px !important;
}
body input[type="date"]::-webkit-date-and-time-value,
body input[type="datetime-local"]::-webkit-date-and-time-value,
body input[type="time"]::-webkit-date-and-time-value,
body input[type="month"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
  min-height: 22px;
}
body input[type="date"]::-webkit-datetime-edit,
body input[type="datetime-local"]::-webkit-datetime-edit,
body input[type="time"]::-webkit-datetime-edit,
body input[type="month"]::-webkit-datetime-edit {
  padding: 0;
}
body input[type="file"].form-control::file-selector-button {
  margin: calc(0px - var(--pc-native-padding-y)) 12px calc(0px - var(--pc-native-padding-y)) -12px !important;
  padding: 0 12px !important;
  height: calc(var(--pc-control-height) - 2px);
  line-height: calc(var(--pc-control-height) - 2px);
}

/* Ô ngày có biểu tượng lịch riêng: chừa chỗ bên phải cho biểu tượng. */
body .pet-form-control-with-icon input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) {
  padding-right: 46px !important;
}

/* Nút chọn dạng nhãn (Loại phiếu...): quy tắc màu nhãn của biểu mẫu không được đè màu nút. */
body form label.btn[class*="btn-outline-"] { color: var(--bs-btn-color) !important; }
body form .btn-check:checked + label.btn[class*="btn-outline-"],
body form .btn-check:active + label.btn[class*="btn-outline-"],
body form label.btn[class*="btn-outline-"].active {
  color: var(--bs-btn-active-color) !important;
}
body form .btn-check:not(:disabled) + label.btn[class*="btn-outline-"]:hover {
  color: var(--bs-btn-hover-color) !important;
}