/*//////////////////////////////////////////////////////////////////
[ DESIGN TOKENS ]
Single source of truth for the visual language (DESIGN.md §2).
Petrol accent + warm paper neutrals; one elevation level, no inset shadows. */

:root {
  /* Accent — petrol, saturated enough to read as deliberate color */
  --brand:        #0d7494;
  --brand-dark:   #0a5872;
  --brand-tint:   #e1f1f8;
  --brand-focus:  rgba(13, 116, 148, 0.25);

  /* Surfaces — cool airy neutrals; color lives in the accents, not the stage */
  --surface-sunken: #e9edf0;   /* app chrome: topbar, sidebar, body */
  --surface:        #f5f7f8;   /* content pane */
  --surface-raised: #ffffff;   /* cards, tables, modals */

  /* Lines & text */
  --border:       #d9dee2;
  --ink:          #1d2a32;
  --ink-muted:    #5f6b76;
  --row-hover:    #e7f2f7;

  /* Elevation — the only shadow in the app */
  --shadow-1: 0 1px 3px rgba(29, 42, 50, 0.08);
}

/*//////////////////////////////////////////////////////////////////
[ FONT ]
One family, real weights — bold is font-weight: 700, not a family switch. */

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Medium.ttf');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Roboto/Roboto-Italic.ttf');
}

/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body, html {
	height: 100%;
	font-family: 'Roboto', sans-serif;
	color: var(--ink);
}

/*---------------------------------------------*/
a {
	line-height: 1.7;
	color: var(--brand);
	margin: 0px;
	transition: color 0.15s ease;
}

a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
	color: var(--brand-dark);
}

/*---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	color: var(--ink);
}

p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink);
	margin: 0px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}

/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
    -webkit-appearance: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-muted);
}

label {
  display: block;
  margin: 0;
}

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

iframe {
	border: none !important;
}

/*//////////////////////////////////////////////////////////////////
[ SURFACES ]
Flat panels: hairline border + at most one soft shadow. No bevels. */

.bg-darker {
	background-color: var(--surface-sunken);
}

.bg-main {
	background-color: var(--surface);
}

.box-shadow {
	background-color: var(--surface-raised);
	border: 1px solid var(--border);
	box-shadow: none;
}

/*//////////////////////////////////////////////////////////////////
[ TYPE SCALE ]
13px labels/meta · 14px body/data · 18/22/28px headings. Nothing below 12px. */

.txt1 {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.responsive-text {
  font-size: 13px;
}

.responsive-text-heading {
  font-size: 22px;
  font-weight: 500;
}

/* Breadcrumb trail at the top of the content pane (renders via pageBreadcrumb()). */
.app-breadcrumb {
  background: transparent;
  padding: 0.25rem 0.25rem 0;
  margin-bottom: 0.25rem;
  font-size: 13px;
}

.app-breadcrumb .breadcrumb-item.active {
  color: var(--ink);
  font-weight: 500;
}

.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A"; /* › */
  color: var(--ink-muted);
}

/* Registry data reads as a ledger: slightly denser, digits align in columns. */
.table {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.table .col-search-input {
  font-size: 14px;
}

/*//////////////////////////////////////////////////////////////////
[ BOOTSTRAP ACCENT OVERRIDES ]
Map Bootstrap's primary/info families onto the petrol accent so existing
markup picks up the palette without structural edits. */

.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-focus);
}

.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-info,
.badge-info {
  background-color: var(--brand);
  border-color: var(--brand);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn-outline-info {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.text-info {
  color: var(--brand) !important;
}

.border-info {
  border-color: var(--brand) !important;
}

.btn {
  font-weight: 500;
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 0.2rem var(--brand-focus);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem var(--brand-focus);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand);
}

.page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

.page-link {
  color: var(--brand);
}

.text-muted {
  color: var(--ink-muted) !important;
}

/*//////////////////////////////////////////////////////////////////
[ login ]*/

.limiter {
  width: 100%;
  margin: 0 auto;
}

.container-login100 {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: var(--surface-sunken);
}


.wrap-login100 {
  width: 670px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background-color: #f8f9fa;
  box-shadow: 1px 1px 5px #aaa;
  transition: margin .25s ease-out;
  border: 1px solid #888;
}

/*==================================================================
[ Title form ]*/
.page-title {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  padding: 10px 15px 20px 15px;
}

.page-title-1 {
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  max-height: 50px;
}

.page-title::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(11, 81, 105, 0.78);
}

.login100-form-title {
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  min-height: 240px;
  padding: 20px 15px 18px 15px;
}

.login100-form-title-1 {
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  max-height: 50px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

/* Brand-color filter over the photo — a flat petrol wash for a tinted look,
   with a slightly darker top so the title stays legible. */
.login100-form-title::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(11, 81, 105, 0.32);
  background-image: linear-gradient(180deg, rgba(11, 81, 105, 0.35), rgba(11, 81, 105, 0.10));
}


/*==================================================================
[ Form ]*/

.login100-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 18px 88px 28px 93px;
}


/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 1px solid #b2b2b2;
}

.label-input100 {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.2;
  text-align: right;

  position: absolute;
  top: 14px;
  left: -105px;
  width: 80px;

}

/*---------------------------------------------*/
.input100 {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.2;

  display: block;
  width: 100%;
  background: transparent;
  padding: 0 5px;
}

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;

  transition: all 0.6s;

  background: var(--brand);
}


/*---------------------------------------------*/
input.input100 {
  height: 45px;
}


.input100:focus + .focus-input100::before {
  width: 100%;
}

/* Login municipality dropdown: align the selected text with the input fields.
   bootstrap-select's button keeps the default .btn left padding (~12px), which
   pushes the text right of the inputs' 5px; match it. Scoped to the login form
   so in-app selectpickers are untouched. */
.login100-form .bootstrap-select > .dropdown-toggle {
  padding-left: 4px;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}

/*==================================================================
[ Restyle Checkbox ]*/

.input-checkbox100 {
  display: none;
}

.label-checkbox100 {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.4;

  display: block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}

.label-checkbox100::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-size: 13px;
  color: transparent;

  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid var(--border);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.input-checkbox100:checked + .label-checkbox100::before {
  color: var(--brand);
}

/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.login100-form-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-width: 160px;
  height: 50px;
  background-color: var(--brand);
  border-radius: 25px;

  font-size: 16px;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;

  transition: background-color 0.2s ease;
}

.login100-form-btn:hover {
  background-color: var(--brand-dark);
}


/*------------------------------------------------------------------
[ Responsive ]*/

@media (max-width: 576px) {
  .login100-form {
    padding: 43px 15px 57px 117px;
  }
}

@media (max-width: 480px) {
  .login100-form {
    padding: 43px 15px 57px 15px;
  }

  .login100-form-title-1{
      font-size: 20px;
  }

  .label-input100 {
    text-align: left;
    position: unset;
    top: unset;
    left: unset;
    width: 100%;
    padding: 0 5px;
  }
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 2px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  pointer-events: none;

  font-weight: 500;
  color: #c80000;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "!";
  font-weight: 500;
  border-radius: 50%;
  border: 1px solid #c80000;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 14px;
  display: block;
  position: absolute;
  color: #c80000;
  font-size: 14px;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}

.cursor_button {
  cursor: pointer;
}

.cursor_not_allowed {
  cursor: not-allowed;
}

table.table-hover tbody tr:hover {
    background-color: var(--row-hover);
}

.nav-item{
   text-align: right;
}

.custom_disabled{
  cursor: not-allowed !important;
  pointer-events: all !important;
}

.hover-red:hover{
  color: #BD2130 !important;
  transition: color 0.15s ease;
}

.specialTable th{
  padding: 0 !important;
  vertical-align: middle !important;
}

/*//////////////////////////////////////////////////////////////////
[ TOP NAVBAR + MODULE IDENTITY ]
Active top-level menu gets an accent underline (DESIGN.md §3.3).
The accent doubles as the module cue (§3.4): petrol = municipal
register, indigo = vet register, driven by the body class header.php sets. */

body.module-mun { --module-accent: var(--brand); }
body.module-vet { --module-accent: #4f46e5; }

.app-shell #wrapper .navbar {
  border-top: 3px solid var(--module-accent, var(--brand));
}

#wrapper .navbar .nav-link {
  position: relative;
  color: var(--ink-muted);
}

#wrapper .navbar .nav-link:hover,
#wrapper .navbar .nav-link:focus {
  color: var(--ink);
}

#wrapper .navbar .nav-link.active {
  color: var(--module-accent, var(--brand));
  font-weight: 500;
}

#wrapper .navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 1px;
  height: 4px;
  border: 0;            /* reset Bootstrap's dropdown-caret border so ALL active
                          items (plain nav-links like vet "Отчет" AND dropdowns)
                          get the same uniform bold underline */
  border-radius: 0;
  background-color: var(--module-accent, var(--brand));
}

/* Breadcrumb lives in the navbar (left of center) — costs no extra row.
   The register name appears only in the sidebar brand block. */
#wrapper .navbar .app-breadcrumb {
  margin: 0 0 0 0.75rem;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 991px) {
  #wrapper .navbar nav[aria-label="breadcrumb"] {
    display: none;
  }
}

/*//////////////////////////////////////////////////////////////////
[ SECTION HUES ]
Each functional area has its own hue, used by the header band, the
breadcrumb icons and the header icon chip: cards = petrol, reports = plum,
tools = amber, system = slate. pageNav() decides which section a page
belongs to; pageBreadcrumb()/pageHeader() emit the matching class. */

.section-cards,   .crumb-section-cards   { --sec: #0d7494; --sec-deep: #0a5872; --sec-tint: #e1f1f8; }
.section-reports, .crumb-section-reports { --sec: #8a4189; --sec-deep: #6b3169; --sec-tint: #f5e9f5; }
.section-tools,   .crumb-section-tools   { --sec: #b3750a; --sec-deep: #8a5a08; --sec-tint: #faf0d8; }
.section-system,  .crumb-section-system  { --sec: #51708e; --sec-deep: #3e566d; --sec-tint: #e9eff5; }
.section-home,    .crumb-section-home,
.section-profile, .crumb-section-profile { --sec: var(--brand); --sec-deep: var(--brand-dark); --sec-tint: var(--brand-tint); }

/* Crumb icons in the primary-button color. */
.app-breadcrumb .breadcrumb-item i {
  color: var(--brand);
}

/*//////////////////////////////////////////////////////////////////
[ PAGE HEADER ]
Compact header band replacing the photo banners (DESIGN.md §4.1):
breadcrumb above (rendered by mainmenu.php), tinted band with the title
left, metadata right, section icon in a filled chip at the far right. */

.page-head {
  padding: 0.4rem 0.9rem 0.3rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 6px;
  background:
    url(/images/decor/paws-band.svg) right 70px center / 100px auto no-repeat,
    linear-gradient(180deg, var(--brand-tint), rgba(255, 255, 255, 0.45)),
    var(--surface-raised);
  box-shadow: var(--shadow-1);
}

.page-head-main {
  min-width: 0;
}

.page-head-crumbs {
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-muted);
  margin-bottom: 0.2rem;
}

.page-head-crumbs .crumb-sep {
  color: var(--ink-muted);
  font-weight: 700;
  margin: 0 0.2rem;
}

.page-head-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--brand-dark);
}

.page-head-title .badge {
  font-size: 12px;
  vertical-align: middle;
}

.page-head-meta {
  font-size: 13px;
  color: var(--ink-muted);
}

.page-head-meta a {
  color: var(--brand);
}

.page-head-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background-color: var(--brand);
  color: #fff;
  font-size: 16px;
}

/* Registry tables: warm header band instead of bare white */
.table thead th {
  background-color: var(--surface-sunken);
}

/*//////////////////////////////////////////////////////////////////
[ SECONDARY BUTTONS ]
Quiet but real: enabled = solid card on the gray chrome, hover = petrol
tint, disabled = flat and clearly faded. (The stock outline ghosts made
enabled and disabled nearly indistinguishable.) */

.btn-outline-secondary {
  color: var(--ink);
  background-color: var(--surface-raised);
  border-color: #c6ced4;
}

.btn-outline-secondary:hover:not(:disabled):not(.disabled) {
  color: var(--brand-dark);
  background-color: var(--brand-tint);
  border-color: var(--brand);
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  box-shadow: 0 0 0 0.2rem var(--brand-focus);
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
  color: var(--brand-dark);
  background-color: var(--brand-tint);
  border-color: var(--brand);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: var(--ink-muted);
  background-color: transparent;
  border-color: var(--border);
  opacity: 0.55;
}

/*//////////////////////////////////////////////////////////////////
[ ALERTS ]
Same language as the header bands: pale tint, 4px colored left edge,
deep text — instead of stock Bootstrap pastels from another palette. */

.alert {
  border-left-width: 4px;
  border-radius: 6px;
}

.alert-success {
  color: #2b6332;
  background-color: #e7f3e8;
  border-color: #cfe6d2;
  border-left-color: #3c8a44;
}

.alert-danger {
  color: #8f3330;
  background-color: #fbecec;
  border-color: #f0d4d3;
  border-left-color: #c0443f;
}

.alert-warning {
  color: #8a5a08;
  background-color: #faf0d8;
  border-color: #ecdfbc;
  border-left-color: #b3750a;
}

.alert-info {
  color: var(--brand-dark);
  background-color: var(--brand-tint);
  border-color: #cfe5ee;
  border-left-color: var(--brand);
}

/*//////////////////////////////////////////////////////////////////
[ LINK AFFORDANCE ]
No static underlines; content links grow a 1px underline left-to-right
on hover (background-size animation), table-cell links included. */

#content a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.paginate_button):not(.col-search-input):not(.hover-red) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}

#content a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link):not(.paginate_button):not(.col-search-input):not(.hover-red):hover {
  background-size: 100% 1px;
}

/*//////////////////////////////////////////////////////////////////
[ DATATABLES EXPORT BUTTONS ]
CSV / PDF / Print above report tables — palette-consistent, format kept
recognisable by hue (green / brick / petrol). Overrides the btn-secondary
base the Bootstrap-4 integration applies. */

.dt-buttons .btn.dt-csv,
.dt-buttons .btn.dt-pdf,
.dt-buttons .btn.dt-print {
  color: #fff;
  border: 0;
  font-weight: 500;
}

.dt-buttons .btn.dt-csv   { background-color: #3c8a44; }
.dt-buttons .btn.dt-pdf   { background-color: #c0443f; }
.dt-buttons .btn.dt-print { background-color: #6c757d; }

.dt-buttons .btn.dt-csv:hover   { background-color: #347a3b; }
.dt-buttons .btn.dt-pdf:hover   { background-color: #a93b37; }
.dt-buttons .btn.dt-print:hover { background-color: #5a6268; }

/*//////////////////////////////////////////////////////////////////
[ BADGES ]
In-table status pills (duplicate finder, permissions, etc.) on the new
palette instead of stock Bootstrap colors. */

.badge-primary { background-color: var(--brand); }
.badge-success { background-color: #3c8a44; }
.badge-danger  { background-color: #c0443f; }
.badge-warning { background-color: #b3750a; color: #fff; }

/*//////////////////////////////////////////////////////////////////
[ LINK ANIMATION OVERRIDES ]
The hover-underline grow is for inline content links only. Keep it off
card links, dropdown/select option links and list-group items. */

#content table a,
#content a.text-decoration-none,
#content a.card,
#content a.list-group-item,
#content .dropdown-menu a,
#content .bootstrap-select a,
#content .select2-container a,
#content .nav-tabs a {
  /* !important: the underline rule above is far more specific (its :not() chain) */
  background-image: none !important;
}

/* Reusable animated underline for links outside #content (e.g. login). */
.link-anim {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}

.link-anim:hover {
  background-size: 100% 1px;
}

/*//////////////////////////////////////////////////////////////////
[ LOGIN FOOTER ]
Quiet credit line — small, muted, no boxed background. */

.login100-footer {
  width: 100%;
  padding: 14px 15px 10px;
  line-height: 1.5;
  background-color: rgba(0, 0, 0, 0.07);
  border-radius: 0 0 10px 10px;
}

.login100-footer .link-anim {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-muted);
}

.login100-footer .login100-footer-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  opacity: 0.8;
}

/* "Подписана декларация" radio is nested inside an input-group-text, so Bootstrap's
   default `.form-control:invalid ~ .invalid-feedback` selector can't reach its
   message. Reveal it via the surrounding input-group once the form is validated. */
.was-validated .input-group:has(input[name="chkDec"]:invalid) .invalid-feedback {
  display: block;
}

/* Clickable icon addons (date "today" fill, owner→dog address copy): flat addon
   that highlights in the brand color on hover. */
.input-group-text.ig-icon-btn {
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.input-group-text.ig-icon-btn:hover {
  background-color: var(--brand);
  color: #fff;
}
.input-group-text.ig-icon-btn:hover .fas {
  color: #fff;
}