/* HR Revo - one button system. Kinds and tones: settings/buttons.py; applied by static/ui/hr-buttons.js and
   components/button_layout.html. Loaded on every page after the shared skins, so !important wins over the
   older button rules (hr-consistency.css, page CSS). Tables: row actions are 28px flat icon squares.
   Every rule starts with body:not(#_) - an ID-level weight, so page CSS and older layers can never out-rank the button system. */

:root {
  --hrk-primary: linear-gradient(135deg, #6366f1, #8b5cf6 60%, #a855f7);
  --hrk-success: linear-gradient(135deg, #059669, #10b981);
  --hrk-danger:  linear-gradient(135deg, #e11d48, #f43f5e);
  --hrk-data:    linear-gradient(135deg, #0d9488, #14b8a6 55%, #06b6d4);
  --hrk-import:  linear-gradient(135deg, #0369a1, #0ea5e9);
}

/* ── full buttons ── */
body:not(#_) .hrk:not(.hr-ibtn):not(.hrk--icon) {
  display: inline-flex !important; align-items: center !important; justify-content: center; gap: 8px !important;
  height: 38px !important; min-height: 38px !important; padding: 0 16px !important; width: auto !important; flex: 0 0 auto;
  border-radius: 11px !important; font: 700 13px/1 var(--hr-font, Inter, system-ui, sans-serif) !important; letter-spacing: 0 !important;
  text-transform: none !important; text-decoration: none !important; white-space: nowrap; cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s, border-color .15s !important;
}
body:not(#_) .hrk:not(.hr-ibtn):not(.hrk--icon) i { font-size: 13px !important; margin: 0 !important; color: inherit !important; }
body:not(#_) .hrk:not(.hr-ibtn):not(.hrk--icon):hover { transform: translateY(-1px); }
body:not(#_) .hrk:not(.hr-ibtn):not(.hrk--icon):focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, .35) !important; }
body:not(#_) .hrk:disabled, body:not(#_) .hrk[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none !important; }

body:not(#_) .hrk.hrk--primary:not(.hr-ibtn) { background: var(--hrk-primary) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 18px rgba(99, 102, 241, .32) !important; }
body:not(#_) .hrk.hrk--primary:not(.hr-ibtn):hover { box-shadow: 0 0 0 1px rgba(34, 211, 238, .45), 0 10px 24px rgba(99, 102, 241, .42) !important; }
body:not(#_) .hrk.hrk--success:not(.hr-ibtn) { background: var(--hrk-success) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(16, 185, 129, .28) !important; }
body:not(#_) .hrk.hrk--danger:not(.hr-ibtn)  { background: var(--hrk-danger) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(244, 63, 94, .26) !important; }
body:not(#_) .hrk.hrk--data:not(.hr-ibtn)    { background: var(--hrk-data) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(20, 184, 166, .28) !important; }
body:not(#_) .hrk.hrk--import:not(.hr-ibtn)  { background: var(--hrk-import) !important; color: #fff !important; border: 0 !important; box-shadow: 0 6px 16px rgba(14, 165, 233, .26) !important; }
body:not(#_) .hrk.hrk--edit:not(.hr-ibtn)    { background: #eef0ff !important; color: #4338ca !important; border: 1px solid #c7d2fe !important; box-shadow: none !important; }
body:not(#_) .hrk.hrk--view:not(.hr-ibtn)    { background: #ecfeff !important; color: #0e7490 !important; border: 1px solid #a5f3fc !important; box-shadow: none !important; }
body:not(#_) .hrk.hrk--neutral:not(.hr-ibtn) { background: #fff !important; color: #2d3348 !important; border: 1px solid #dfe3f0 !important; box-shadow: 0 1px 2px rgba(13, 19, 48, .05) !important; }
body:not(#_) .hrk.hrk--neutral:not(.hr-ibtn):hover { border-color: #a5b4fc !important; color: #4338ca !important; }

/* small buttons inside tables / cards that are not row-action icons */
body:not(#_) table .hrk:not(.hr-ibtn):not(.hrk--icon), body:not(#_) .hrk.hrk--sm { height: 30px !important; min-height: 30px !important; padding: 0 11px !important; font-size: 12px !important; border-radius: 9px !important; }

/* ── row actions: 28px flat icon squares, colour by meaning ── */
body:not(#_) .hr-ibtn.hrk, body:not(#_) .hrk.hrk--icon {
  width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 0 !important; margin: 0 !important;
  display: inline-grid !important; place-items: center; border-radius: 8px !important; border: 0 !important; box-shadow: none !important; font-size: 12px !important; cursor: pointer;
  transition: transform .12s, background .12s, box-shadow .12s !important;
}
body:not(#_) .hr-ibtn.hrk i, body:not(#_) .hrk.hrk--icon i { font-size: 12px !important; margin: 0 !important; color: inherit !important; }
body:not(#_) .hr-ibtn.hrk:hover, body:not(#_) .hrk.hrk--icon:hover { transform: translateY(-1px); }
body:not(#_) .hr-ibtn.hrk--primary, body:not(#_) .hrk--icon.hrk--primary { background: #eef0ff !important; color: #6d28d9 !important; }
body:not(#_) .hr-ibtn.hrk--edit,    body:not(#_) .hrk--icon.hrk--edit    { background: #eef0ff !important; color: #4f46e5 !important; }
body:not(#_) .hr-ibtn.hrk--view,    body:not(#_) .hrk--icon.hrk--view    { background: #e6fbff !important; color: #0891b2 !important; }
body:not(#_) .hr-ibtn.hrk--success, body:not(#_) .hrk--icon.hrk--success { background: #e3f8ef !important; color: #059669 !important; }
body:not(#_) .hr-ibtn.hrk--danger,  body:not(#_) .hrk--icon.hrk--danger  { background: #ffe8ee !important; color: #e11d48 !important; }
body:not(#_) .hr-ibtn.hrk--data,    body:not(#_) .hrk--icon.hrk--data    { background: #e6fffa !important; color: #0d9488 !important; }
body:not(#_) .hr-ibtn.hrk--import,  body:not(#_) .hrk--icon.hrk--import  { background: #e0f2fe !important; color: #0284c7 !important; }
body:not(#_) .hr-ibtn.hrk--neutral, body:not(#_) .hrk--icon.hrk--neutral { background: #f1f2f6 !important; color: #48506e !important; }
body:not(#_) .hr-ibtn.hrk--edit:hover    { box-shadow: 0 0 0 1px #c7d2fe, 0 6px 14px rgba(79, 70, 229, .22) !important; }
body:not(#_) .hr-ibtn.hrk--danger:hover  { box-shadow: 0 0 0 1px #fecdd3, 0 6px 14px rgba(225, 29, 72, .22) !important; }
body:not(#_) .hr-ibtn.hrk--view:hover    { box-shadow: 0 0 0 1px #a5f3fc, 0 6px 14px rgba(8, 145, 178, .2) !important; }
body:not(#_) .hr-ibtn.hrk--success:hover { box-shadow: 0 0 0 1px #a7f3d0, 0 6px 14px rgba(5, 150, 105, .2) !important; }
body:not(#_) .hr-ibtn .hr-ibtn__txt, body:not(#_) .hrk--icon .hr-ibtn__txt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── page header (dark "2090" hero): tinted glass by tone, the main action stays the neon gradient ── */
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk:not(.hr-ibtn):not(.hrk--primary) { background: rgba(255, 255, 255, .07) !important; color: #e6ebff !important;
  border: 1px solid rgba(148, 163, 255, .35) !important; box-shadow: none !important; backdrop-filter: blur(6px); }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk--data:not(.hr-ibtn)    { border-color: rgba(45, 212, 191, .55) !important; }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk--data i                { color: #5eead4 !important; }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk--import:not(.hr-ibtn)  { border-color: rgba(56, 189, 248, .55) !important; }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk--import i              { color: #7dd3fc !important; }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk--danger i              { color: #fda4af !important; }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk--success i             { color: #6ee7b7 !important; }
body.hr-cb:not(#_) .hr-content .cb-hero.cb-hero .hrk:not(.hr-ibtn):hover    { border-color: #22d3ee !important; box-shadow: 0 0 18px rgba(34, 211, 238, .35) !important; }

/* same order everywhere: secondary actions left, the main action (New / Add / Save) right-most */
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > [data-hrtone="neutral"] { order: 1; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > [data-hrtone="view"]    { order: 2; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > [data-hrtone="import"]  { order: 3; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > [data-hrtone="data"]    { order: 4; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > [data-hrtone="edit"]    { order: 5; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > :is([data-hrtone="success"], [data-hrtone="danger"]) { order: 6; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > :is([data-hrtone="primary"], .cb-new) { order: 9; }
:is(.pm-hero__actions, .hr-page-actions, .cb-hero > div:last-child) > .cb-find { order: 0; }

/* ── confirm drawer (static/ui/hr-confirm.js replaces the browser's confirm box) ── */
.hr-cf { position: fixed; inset: 0; z-index: 2147483000; }   /* always above page pop-ups (old pages use 9999+): a hidden "Yes" blocked every confirm in a pop-up (2026-10-20) */
.hr-cf[hidden] { display: none; }
.hr-cf__scrim { position: absolute; inset: 0; background: rgba(6, 10, 28, .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s; }
.hr-cf__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: #fbfcff;
  border-left: 1px solid rgba(34, 211, 238, .35); box-shadow: -20px 0 50px rgba(6, 10, 28, .35); transform: translateX(100%); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.hr-cf.is-open .hr-cf__scrim { opacity: 1; }
.hr-cf.is-open .hr-cf__panel { transform: none; }
.hr-cf__hd { display: flex; align-items: center; gap: 12px; padding: 18px 20px; min-height: 76px; box-sizing: border-box; color: #fff;
  background: radial-gradient(300px 120px at 100% 0, rgba(34, 211, 238, .35), transparent 60%), linear-gradient(135deg, #060a1c, #1b1f4b); }
.hr-cf.is-danger .hr-cf__hd { background: radial-gradient(300px 120px at 100% 0, rgba(244, 63, 94, .40), transparent 60%), linear-gradient(135deg, #1a0610, #3b0d1f); }
.hr-cf__hd h3 { margin: 0 !important; font: 800 17px/1.25 var(--hr-font, Inter, sans-serif) !important; color: #fff !important; text-transform: none !important; }
.hr-cf__kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #22d3ee; }
.hr-cf.is-danger .hr-cf__kicker { color: #fda4af; }
.hr-cf__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #fff;
  background: conic-gradient(from 210deg, #22d3ee, #6366f1, #8b5cf6, #f472b6, #22d3ee); box-shadow: 0 0 20px rgba(34, 211, 238, .45); }
.hr-cf.is-danger .hr-cf__icon { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 0 20px rgba(244, 63, 94, .5); }
.hr-cf__x { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.hr-cf__bd { flex: 1; padding: 22px 20px; overflow: auto; }
.hr-cf__bd p { margin: 0; font: 600 15px/1.55 var(--hr-font, Inter, sans-serif); color: #0d1330; }
.hr-cf__ft { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid #e3e7f4; background: #fff; }
.hr-cf__btn { flex: 1; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 700 13.5px var(--hr-font, Inter, sans-serif); border: 1px solid #dfe3f0; background: #fff; color: #2d3348; }
.hr-cf__btn--yes { border: 0; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #22d3ee); box-shadow: 0 10px 24px rgba(99, 102, 241, .35); }
.hr-cf.is-danger .hr-cf__btn--yes { background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: 0 10px 24px rgba(244, 63, 94, .35); }
.hr-cf__btn kbd { font: 700 10px/1 ui-monospace, Consolas, monospace; padding: 3px 5px; border-radius: 5px; background: rgba(0, 0, 0, .08); border: 1px solid rgba(0, 0, 0, .1); }
.hr-cf__btn--yes kbd { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
.hr-cf-toast { position: fixed; right: 20px; bottom: 20px; z-index: 2147483001; display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #060a1c, #1b1f4b); color: #fff; font: 600 13px/1.4 var(--hr-font, Inter, sans-serif); border: 1px solid rgba(34, 211, 238, .35);
  box-shadow: 0 16px 40px rgba(6, 10, 28, .35); transform: translateY(20px); opacity: 0; transition: .25s; }
.hr-cf-toast.is-on { transform: none; opacity: 1; }
.hr-cf-toast i { color: #22d3ee; }
@media (prefers-reduced-motion: reduce) { .hr-cf__panel, .hr-cf__scrim, .hr-cf-toast { transition: none; } }

/* ── every page pop-up shown as a drawer (hr-enhance.js section 5) gets the same 2090 frame ── */
body:not(#_) .hr-drawer-panel :is(.modal-header, [class*="modal-header"], .popup-header, .drawer-header, .dialog-header):not(.hr-free) {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px; margin: 0 !important; padding: 18px 20px !important; min-height: 72px; box-sizing: border-box;
  border: 0 !important; border-radius: 0 !important; color: #fff !important; text-align: left !important;
  background: radial-gradient(300px 120px at 100% 0, rgba(34, 211, 238, .35), transparent 60%), linear-gradient(135deg, #060a1c, #1b1f4b) !important; }
body:not(#_) .hr-drawer-panel :is(.modal-header, [class*="modal-header"], .popup-header, .drawer-header, .dialog-header) :is(h1, h2, h3, h4, h5, h6, .modal-title, [class*="title"]) {
  margin: 0 !important; padding: 0 !important; flex: 1 1 auto; text-align: left !important; color: #fff !important; font: 800 17px/1.25 var(--hr-font, Inter, sans-serif) !important; text-transform: none !important; }
body:not(#_) .hr-drawer-panel :is(.modal-header, [class*="modal-header"], .popup-header, .drawer-header, .dialog-header) :is(h1, h2, h3, h4, h5, h6, .modal-title, [class*="title"]) i { color: #22d3ee !important; margin-right: 8px; }
body:not(#_) .hr-drawer-panel :is(.modal-header, [class*="modal-header"], .popup-header, .drawer-header, .dialog-header) :is(.close, .btn-close, .close-modal, .close-btn, [data-dismiss], [data-bs-dismiss], button:last-child) {
  margin: 0 0 0 auto !important; width: 34px !important; height: 34px !important; min-width: 34px; padding: 0 !important; flex: 0 0 34px !important; display: grid !important; place-items: center;
  border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, .25) !important; background: rgba(255, 255, 255, .08) !important; color: #fff !important;
  font-size: 18px !important; line-height: 1 !important; opacity: 1 !important; text-shadow: none !important; box-shadow: none !important; float: none !important; filter: none !important; }
body:not(#_) .hr-drawer-panel :is(.modal-header, [class*="modal-header"], .popup-header, .drawer-header, .dialog-header) :is(.close, .btn-close, .close-modal, .close-btn, [data-dismiss], [data-bs-dismiss]) * { color: #fff !important; background: none !important; font-size: 18px !important; line-height: 1 !important; }
body:not(#_) .hr-drawer-panel .btn-close { background-image: none !important; }
body:not(#_) .hr-drawer-panel .btn-close::before { content: "\00d7"; font-size: 20px; color: #fff; }
body:not(#_) .hr-drawer-panel :is(.modal-body, [class*="modal-body"]) { padding: 18px 20px !important; background: #fbfcff !important; }
body:not(#_) .hr-drawer-panel :is(.modal-footer, [class*="modal-footer"], .popup-footer, .drawer-footer, .form-actions) {
  display: flex !important; flex-wrap: wrap; justify-content: flex-end !important; align-items: center; gap: 10px !important; padding: 14px 20px !important; margin: 0 !important;
  border-top: 1px solid #e3e7f4 !important; background: #fff !important; }
body:not(#_) .hr-drawer-panel :is(.modal-footer, [class*="modal-footer"], .popup-footer, .drawer-footer, .form-actions) > :is(button, a, .btn) { flex: 0 0 auto !important; width: auto !important; min-width: 96px; white-space: nowrap; }
/* field captions only (a label right before a text field / select), never checkbox or option texts */
body:not(#_) .hr-drawer-panel :is(.form-label, label:has(+ :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input-group, .select2, .select2-container))):not(:has(input, select, textarea)) {
  font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; color: #6b7393 !important; }
body:not(#_) .hr-drawer-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select, textarea) {
  min-height: 40px; border-radius: 11px !important; border: 1px solid #dfe3f0 !important; background: #fff !important; box-shadow: none !important; }
body:not(#_) .hr-drawer-panel :is(input, select, textarea):focus { outline: none !important; border-color: #6366f1 !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18), 0 0 18px rgba(34, 211, 238, .18) !important; }
body:not(#_) .hr-drawer-panel :is(.form-check-label, .checkbox-label, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: #2d3348 !important; }

/* Bootstrap pop-ups: the dialog fills the drawer (no centred box with outer margins) */
body:not(#_) .hr-drawer-panel:is(.modal-content, [class*="modal-content"], [class*="modal-box"]) { padding: 0 !important; display: flex !important; flex-direction: column !important; background: #fbfcff !important; overflow: hidden !important; }
body:not(#_) .hr-drawer-panel:is(.modal-content, [class*="modal-content"], [class*="modal-box"]) > :is(.modal-body, [class*="modal-body"], form) { flex: 1 1 auto; overflow: auto; min-height: 0; }
body:not(#_) .hr-drawer-host .modal-dialog > .modal-content > .modal-body,
body:not(#_) .hr-drawer-host .modal-dialog > .modal-content > form > .modal-body { flex: 1 1 auto; overflow: auto; }
body:not(#_) .hr-drawer-host .modal-dialog > .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* a collapsed filter panel (hr-enhance.js "Filters" toggle) stays hidden whatever layout rules a page or layer adds */
body:not(#_) .hr-fx-collapsed.hr-fx-collapsed { display: none !important; }
/* filter bar buttons that were icon-only now carry their label: keep them natural width */
body:not(#_) .hrk.hrk--labelled:not(.hr-ibtn) { width: auto !important; min-width: 0 !important; padding: 0 14px !important; }