/* v2 shared UI helpers
 * - Notifications (used by add_message)
 * - Generic form field styling
 * - v2 checkbox styling
 */

/* Notifications (copied from legacy main.css, reused in v2) */
.notification{
    position: fixed;
    top: 0; right: 0;
    opacity: 0;
    animation-name: fading;
    animation-duration: 1s;
    z-index: 100000;
}
.notification.a{
    opacity: 1;
}
.notification.success{
    background: rgb(25, 129, 117);
    color: #d2fff8;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 0;
    width:100%;
    text-align: center;
}
.notification.error{
    background: rgb(140, 22, 22);
    color: #ffe5e5;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 0;
    width:100%;
    text-align: center;
}

/* Generic form fields for v2 */
.field{
  position:relative;
}
.field__input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.32);
  color:var(--text);
  padding:22px 12px 10px;
  font:inherit;
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.field__input::placeholder{color:transparent}
.field__input:focus{
  border-color:rgba(246,162,26,.7);
  box-shadow:0 0 0 1px rgba(246,162,26,.25);
  background:rgba(0,0,0,.46);
}
.field__input--textarea{
  min-height:110px;
  resize:vertical;
}
.field__label{
  position:absolute;
  left:12px;
  top:9px;
  font-size:11px;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--muted);
  pointer-events:none;
}

/* Checkbox – v2 style */
.checkbox.checkbox--v2{
  position:relative;
  padding-bottom:10px;
}
.checkbox.checkbox--v2 label{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  padding-left:30px !important;
}
.checkbox.checkbox--v2 label::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:20px !important;
  height:20px !important;
  border-radius:7px !important;
  background:rgba(0,0,0,.5) !important;
  background-color:rgba(0,0,0,.5) !important;
  border:1px solid rgba(255,255,255,.26) !important;
}
.checkbox.checkbox--v2 input{
  position:absolute;
  left:0;
  top:0;
  width:20px;
  height:20px;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.checkbox.checkbox--v2 input:checked ~ label::before{
  background:linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  background-color:transparent !important;
  border-color:transparent !important;
}
.checkbox.checkbox--v2 input:checked ~ label::after{
  content:"";
  position:absolute;
  left:7px !important;
  top:4px !important;
  width:4px !important;
  height:9px !important;
  border-color:#121212 !important;
  border-style:solid;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* Breadcrumbs – v2 */
.breadcrumbs-v2{
  padding:10px 0 4px;
  font-size:12px;
  color:var(--muted);
}
.breadcrumbs-v2__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.breadcrumbs-v2__item{
  display:inline-flex;
  align-items:center;
  color:inherit;
}
.breadcrumbs-v2__item:not(:last-child)::after{
  content:"/";
  margin-left:6px;
  opacity:.5;
}
.breadcrumbs-v2__item a{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:rgba(245,246,251,.9);
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.breadcrumbs-v2__item a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-1px);
}
.breadcrumbs-v2__item--current .breadcrumbs-v2__current{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:var(--text);
  font-weight:600;
}

/* Pagination (Laravel links, v2) */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.pagination li{
  display:inline-flex;
}
.pagination li a,
.pagination li span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.35);
  color:rgba(245,246,251,.9);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.pagination li a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-1px);
}
.pagination li.active span,
.pagination li span[aria-current="page"]{
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  border-color:transparent;
  color:#111;
}
.pagination li.disabled span{
  opacity:.45;
  cursor:default;
}

/* Bootstrap 5 margin & padding utilities (scale: 0-5, 1rem base) */
:root{
  --spacer:1rem;
  --sp-0:0;
  --sp-1:calc(var(--spacer)*0.25);
  --sp-2:calc(var(--spacer)*0.5);
  --sp-3:var(--spacer);
  --sp-4:calc(var(--spacer)*1.5);
  --sp-5:calc(var(--spacer)*3);
}
.m-0{margin:0 !important}
.m-1{margin:var(--sp-1) !important}
.m-2{margin:var(--sp-2) !important}
.m-3{margin:var(--sp-3) !important}
.m-4{margin:var(--sp-4) !important}
.m-5{margin:var(--sp-5) !important}
.m-auto{margin:auto !important}
.mt-0{margin-top:0 !important}
.mt-1{margin-top:var(--sp-1) !important}
.mt-2{margin-top:var(--sp-2) !important}
.mt-3{margin-top:var(--sp-3) !important}
.mt-4{margin-top:var(--sp-4) !important}
.mt-5{margin-top:var(--sp-5) !important}
.mt-auto{margin-top:auto !important}
.mb-0{margin-bottom:0 !important}
.mb-1{margin-bottom:var(--sp-1) !important}
.mb-2{margin-bottom:var(--sp-2) !important}
.mb-3{margin-bottom:var(--sp-3) !important}
.mb-4{margin-bottom:var(--sp-4) !important}
.mb-5{margin-bottom:var(--sp-5) !important}
.mb-auto{margin-bottom:auto !important}
.ms-0{margin-inline-start:0 !important}
.ms-1{margin-inline-start:var(--sp-1) !important}
.ms-2{margin-inline-start:var(--sp-2) !important}
.ms-3{margin-inline-start:var(--sp-3) !important}
.ms-4{margin-inline-start:var(--sp-4) !important}
.ms-5{margin-inline-start:var(--sp-5) !important}
.ms-auto{margin-inline-start:auto !important}
.me-0{margin-inline-end:0 !important}
.me-1{margin-inline-end:var(--sp-1) !important}
.me-2{margin-inline-end:var(--sp-2) !important}
.me-3{margin-inline-end:var(--sp-3) !important}
.me-4{margin-inline-end:var(--sp-4) !important}
.me-5{margin-inline-end:var(--sp-5) !important}
.me-auto{margin-inline-end:auto !important}
.mx-0{margin-left:0 !important;margin-right:0 !important}
.mx-1{margin-left:var(--sp-1) !important;margin-right:var(--sp-1) !important}
.mx-2{margin-left:var(--sp-2) !important;margin-right:var(--sp-2) !important}
.mx-3{margin-left:var(--sp-3) !important;margin-right:var(--sp-3) !important}
.mx-4{margin-left:var(--sp-4) !important;margin-right:var(--sp-4) !important}
.mx-5{margin-left:var(--sp-5) !important;margin-right:var(--sp-5) !important}
.mx-auto{margin-left:auto !important;margin-right:auto !important}
.my-0{margin-top:0 !important;margin-bottom:0 !important}
.my-1{margin-top:var(--sp-1) !important;margin-bottom:var(--sp-1) !important}
.my-2{margin-top:var(--sp-2) !important;margin-bottom:var(--sp-2) !important}
.my-3{margin-top:var(--sp-3) !important;margin-bottom:var(--sp-3) !important}
.my-4{margin-top:var(--sp-4) !important;margin-bottom:var(--sp-4) !important}
.my-5{margin-top:var(--sp-5) !important;margin-bottom:var(--sp-5) !important}
.my-auto{margin-top:auto !important;margin-bottom:auto !important}
.p-0{padding:0 !important}
.p-1{padding:var(--sp-1) !important}
.p-2{padding:var(--sp-2) !important}
.p-3{padding:var(--sp-3) !important}
.p-4{padding:var(--sp-4) !important}
.p-5{padding:var(--sp-5) !important}
.pt-0{padding-top:0 !important}
.pt-1{padding-top:var(--sp-1) !important}
.pt-2{padding-top:var(--sp-2) !important}
.pt-3{padding-top:var(--sp-3) !important}
.pt-4{padding-top:var(--sp-4) !important}
.pt-5{padding-top:var(--sp-5) !important}
.pb-0{padding-bottom:0 !important}
.pb-1{padding-bottom:var(--sp-1) !important}
.pb-2{padding-bottom:var(--sp-2) !important}
.pb-3{padding-bottom:var(--sp-3) !important}
.pb-4{padding-bottom:var(--sp-4) !important}
.pb-5{padding-bottom:var(--sp-5) !important}
.ps-0{padding-inline-start:0 !important}
.ps-1{padding-inline-start:var(--sp-1) !important}
.ps-2{padding-inline-start:var(--sp-2) !important}
.ps-3{padding-inline-start:var(--sp-3) !important}
.ps-4{padding-inline-start:var(--sp-4) !important}
.ps-5{padding-inline-start:var(--sp-5) !important}
.pe-0{padding-inline-end:0 !important}
.pe-1{padding-inline-end:var(--sp-1) !important}
.pe-2{padding-inline-end:var(--sp-2) !important}
.pe-3{padding-inline-end:var(--sp-3) !important}
.pe-4{padding-inline-end:var(--sp-4) !important}
.pe-5{padding-inline-end:var(--sp-5) !important}
.px-0{padding-left:0 !important;padding-right:0 !important}
.px-1{padding-left:var(--sp-1) !important;padding-right:var(--sp-1) !important}
.px-2{padding-left:var(--sp-2) !important;padding-right:var(--sp-2) !important}
.px-3{padding-left:var(--sp-3) !important;padding-right:var(--sp-3) !important}
.px-4{padding-left:var(--sp-4) !important;padding-right:var(--sp-4) !important}
.px-5{padding-left:var(--sp-5) !important;padding-right:var(--sp-5) !important}
.py-0{padding-top:0 !important;padding-bottom:0 !important}
.py-1{padding-top:var(--sp-1) !important;padding-bottom:var(--sp-1) !important}
.py-2{padding-top:var(--sp-2) !important;padding-bottom:var(--sp-2) !important}
.py-3{padding-top:var(--sp-3) !important;padding-bottom:var(--sp-3) !important}
.py-4{padding-top:var(--sp-4) !important;padding-bottom:var(--sp-4) !important}
.py-5{padding-top:var(--sp-5) !important;padding-bottom:var(--sp-5) !important}