/* ============================================================================
   FILE: buttons.css
   VytalGuard Premium Global Button System
   Load after main.min.css and cards.css
============================================================================ */

:root{
  --vg-btn-font-size:.875rem;
  --vg-btn-font-weight:700;
  --vg-btn-height:38px;
  --vg-btn-radius:9px;
  --vg-btn-gap:.42rem;
  --vg-btn-px:.9rem;
  --vg-btn-ring:0 0 0 3px rgba(37,99,235,.2);
  --vg-btn-shadow:0 3px 8px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.08);
  --vg-btn-shadow-hover:0 7px 16px rgba(15,23,42,.16),0 2px 4px rgba(15,23,42,.08);
  --vg-btn-primary:#1e3a8a;
  --vg-btn-primary-hover:#1d4ed8;
  --vg-btn-secondary:#475569;
  --vg-btn-success:#15803d;
  --vg-btn-danger:#dc2626;
  --vg-btn-warning:#d97706;
  --vg-btn-info:#0369a1;
  --vg-btn-purple:#6d28d9;
}

/* 1. SHARED FOUNDATION */

.btn,
.app-btn,
.icon-btn,
.floating-btn,
.entity-card-btn{
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
  font-family:inherit;
}

.btn,
.app-btn,
.entity-card-btn,
.btn-submit,
.btn-cancel,
.add-btn-desktop,
.btn-search,
.btn-clear,
.btn-export{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--vg-btn-gap);
  min-height:var(--vg-btn-height);
  padding:.48rem var(--vg-btn-px);
  overflow:hidden;
  color:#fff;
  font-size:var(--vg-btn-font-size);
  font-weight:var(--vg-btn-font-weight);
  line-height:1.2;
  letter-spacing:.005em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  vertical-align:middle;
  border:1px solid transparent;
  border-radius:var(--vg-btn-radius);
  box-shadow:var(--vg-btn-shadow);
  cursor:pointer;
  user-select:none;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.btn::before,
.app-btn::before,
.entity-card-btn::before{
  position:absolute;
  inset:0;
  pointer-events:none;
  content:"";
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18),
      rgba(255,255,255,0) 52%
    );
  border-radius:inherit;
}

.btn:hover,
.app-btn:hover,
.entity-card-btn:hover{
  color:#fff;
  text-decoration:none;
  box-shadow:var(--vg-btn-shadow-hover);
  transform:translateY(-1px);
}

.btn:active,
.app-btn:active,
.entity-card-btn:active{
  box-shadow:0 2px 5px rgba(15,23,42,.14);
  transform:translateY(0) scale(.985);
}

.btn:focus-visible,
.app-btn:focus-visible,
.icon-btn:focus-visible,
.floating-btn:focus-visible,
.entity-card-btn:focus-visible{
  outline:0;
  box-shadow:var(--vg-btn-ring),var(--vg-btn-shadow);
}

.btn > *,
.app-btn > *,
.entity-card-btn > *{
  position:relative;
  z-index:1;
}

.btn i,
.app-btn i,
.icon-btn i,
.entity-card-btn i{
  flex:0 0 auto;
  font-size:1.05rem;
  line-height:1;
}

/* 2. BUTTON SIZES */

.btn-sm,
.btn.btn-sm,
.app-btn.is-small,
.entity-card-btn{
  --vg-btn-height:32px;
  --vg-btn-px:.68rem;
  --vg-btn-radius:7px;
  min-height:var(--vg-btn-height);
  padding:.34rem var(--vg-btn-px);
  font-size:.8rem;
}

.btn-lg,
.btn.btn-lg,
.app-btn.is-large{
  --vg-btn-height:46px;
  --vg-btn-px:1.2rem;
  --vg-btn-radius:11px;
  min-height:var(--vg-btn-height);
  padding:.65rem var(--vg-btn-px);
  font-size:1rem;
}

.btn-block,
.btn.is-full,
.app-btn.is-full{
  width:100%;
}

/* 3. PRIMARY BUTTONS */

.btn-primary,
.app-btn,
.btn-submit,
.add-btn-desktop{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #172554 0%,
      var(--vg-btn-primary) 48%,
      #2563eb 100%
    );
  border-color:#1e3a8a;
}

.btn-primary:hover,
.app-btn:hover,
.btn-submit:hover,
.add-btn-desktop:hover{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1e3a8a 0%,
      var(--vg-btn-primary-hover) 100%
    );
  border-color:#2563eb;
}

/* 4. SECONDARY AND NEUTRAL BUTTONS */

.btn-secondary,
.btn-cancel{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #334155,
      var(--vg-btn-secondary)
    );
  border-color:#475569;
}

.btn-secondary:hover,
.btn-cancel:hover{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #1e293b,
      #334155
    );
  border-color:#334155;
}

.btn-light{
  color:#334155;
  background:linear-gradient(180deg,#fff,#f8fafc);
  border-color:#dbe3ed;
  box-shadow:0 2px 6px rgba(15,23,42,.07);
}

.btn-light::before,
.btn-outline-primary::before,
.btn-outline-secondary::before,
.btn-outline-danger::before,
.btn-outline-success::before{
  display:none;
}

.btn-light:hover{
  color:#1e3a8a;
  background:#f1f5f9;
  border-color:#cbd5e1;
}

.btn-dark{
  color:#fff;
  background:linear-gradient(135deg,#0f172a,#1e293b);
  border-color:#0f172a;
}

.btn-dark:hover{
  color:#fff;
  background:#020617;
}

/* 5. SEMANTIC VARIANTS */

.btn-success,
.btn-enable,
.enable,
.btn-complete,
.complete,
.btn-finalize,
.finalize,
.btn-search{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #166534,
      var(--vg-btn-success)
    );
  border-color:#15803d;
}

.btn-success:hover,
.btn-enable:hover,
.enable:hover,
.btn-complete:hover,
.complete:hover,
.btn-finalize:hover,
.finalize:hover,
.btn-search:hover{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #14532d,
      #16a34a
    );
  border-color:#16a34a;
}

.btn-danger,
.btn-delete,
.delete,
.btn-clear,
.btn-reject{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #991b1b,
      var(--vg-btn-danger)
    );
  border-color:#dc2626;
}

.btn-danger:hover,
.btn-delete:hover,
.delete:hover,
.btn-clear:hover,
.btn-reject:hover{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #7f1d1d,
      #b91c1c
    );
  border-color:#b91c1c;
}

.btn-warning,
.warning{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #b45309,
      var(--vg-btn-warning)
    );
  border-color:#d97706;
}

.btn-warning:hover,
.warning:hover{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #92400e,
      #b45309
    );
  border-color:#b45309;
}

.btn-info,
.btn-view{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #075985,
      var(--vg-btn-info)
    );
  border-color:#0369a1;
}

.btn-info:hover,
.btn-view:hover{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #0c4a6e,
      #0284c7
    );
  border-color:#0284c7;
}

.btn-edit,
.edit{
  color:#fff;
  background:linear-gradient(135deg,#3730a3,#4f46e5);
  border-color:#4f46e5;
}

.btn-edit:hover,
.edit:hover{
  color:#fff;
  background:linear-gradient(135deg,#312e81,#4338ca);
  border-color:#4338ca;
}

.btn-purple{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #5b21b6,
      var(--vg-btn-purple)
    );
  border-color:#6d28d9;
}

.btn-purple:hover{
  color:#fff;
  background:linear-gradient(135deg,#4c1d95,#7c3aed);
  border-color:#7c3aed;
}

/* 6. OUTLINE VARIANTS */

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger{
  background:#fff;
  box-shadow:0 2px 5px rgba(15,23,42,.06);
}

.btn-outline-primary{
  color:#1d4ed8;
  border-color:#93b4f8;
}

.btn-outline-primary:hover{
  color:#fff;
  background:#1d4ed8;
  border-color:#1d4ed8;
}

.btn-outline-secondary{
  color:#475569;
  border-color:#cbd5e1;
}

.btn-outline-secondary:hover{
  color:#fff;
  background:#475569;
  border-color:#475569;
}

.btn-outline-success{
  color:#15803d;
  border-color:#86d5a2;
}

.btn-outline-success:hover{
  color:#fff;
  background:#15803d;
  border-color:#15803d;
}

.btn-outline-danger{
  color:#dc2626;
  border-color:#f4a3a3;
}

.btn-outline-danger:hover{
  color:#fff;
  background:#dc2626;
  border-color:#dc2626;
}

/* 7. ICON-ONLY BUTTONS */

.icon-btn,
.btn-icon,
.btn.btn-icon{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:36px;
  min-width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  color:#475569;
  background:linear-gradient(180deg,#fff,#f8fafc);
  border:1px solid #dbe3ed;
  border-radius:9px;
  box-shadow:0 2px 6px rgba(15,23,42,.07);
  cursor:pointer;
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.icon-btn::before,
.btn-icon::before{
  display:none;
}

.icon-btn:hover,
.btn-icon:hover{
  color:#1d4ed8;
  background:#eff6ff;
  border-color:#b9d2ff;
  box-shadow:0 5px 12px rgba(30,64,175,.14);
  transform:translateY(-1px);
}

.icon-btn.btn-edit{
  color:#4338ca;
  background:#eef2ff;
  border-color:#c7d2fe;
}

.icon-btn.btn-edit:hover{
  color:#fff;
  background:#4338ca;
  border-color:#4338ca;
}

.icon-btn.btn-view{
  color:#0369a1;
  background:#f0f9ff;
  border-color:#bae6fd;
}

.icon-btn.btn-view:hover{
  color:#fff;
  background:#0369a1;
  border-color:#0369a1;
}

.icon-btn.btn-delete,
.icon-btn.btn-reject{
  color:#dc2626;
  background:#fef2f2;
  border-color:#fecaca;
}

.icon-btn.btn-delete:hover,
.icon-btn.btn-reject:hover{
  color:#fff;
  background:#dc2626;
  border-color:#dc2626;
}

.icon-btn.btn-approve,
.icon-btn.btn-enable{
  color:#15803d;
  background:#f0fdf4;
  border-color:#bbf7d0;
}

.icon-btn.btn-approve:hover,
.icon-btn.btn-enable:hover{
  color:#fff;
  background:#15803d;
  border-color:#15803d;
}

/* 8. GROUPS AND ACTION AREAS */

.btn-group,
.button-group,
.actions-table,
.card-actions,
.form-actions,
.export-btn-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}

.btn-group{
  gap:0;
}

.btn-group > .btn{
  border-radius:0;
}

.btn-group > .btn:first-child{
  border-radius:
    var(--vg-btn-radius)
    0
    0
    var(--vg-btn-radius);
}

.btn-group > .btn:last-child{
  border-radius:
    0
    var(--vg-btn-radius)
    var(--vg-btn-radius)
    0;
}

.btn-group > .btn + .btn{
  margin-left:-1px;
}

.actions-table button,
.actions-table .btn,
.card-actions button,
.card-actions .btn{
  min-height:32px;
  padding:.34rem .65rem;
  font-size:.8rem;
  border-radius:7px;
}

.form-actions{
  justify-content:flex-end;
  margin-top:1rem;
}

.export-btn-group{
  margin:.75rem 0;
}

.btn-export{
  background:linear-gradient(135deg,#172554,#1d4ed8);
  border-color:#1d4ed8;
}

.btn-export:hover{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  border-color:#2563eb;
}

/* 9. ADD AND FLOATING ACTIONS */

.add-btn-desktop{
  min-height:38px;
  padding:.48rem .92rem;
}

.floating-btn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1050;
  display:none;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  padding:0;
  color:#fff;
  font-size:1.45rem;
  background:linear-gradient(135deg,#172554,#2563eb);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:0 12px 26px rgba(30,58,138,.32);
  cursor:grab;
  transition:
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.floating-btn:hover{
  color:#fff;
  box-shadow:0 15px 30px rgba(30,58,138,.4);
  transform:translateY(-2px) scale(1.04);
}

.floating-btn:active{
  cursor:grabbing;
  transform:scale(.97);
}

/* 10. DISABLED AND LOADING STATES */

.btn:disabled,
.app-btn:disabled,
.icon-btn:disabled,
.floating-btn:disabled,
.entity-card-btn:disabled,
.btn.disabled,
.app-btn.disabled,
.btn-disable,
.disable{
  opacity:.52;
  filter:saturate(.5);
  pointer-events:none;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

.btn.is-loading,
.app-btn.is-loading,
.entity-card-btn.is-loading{
  pointer-events:none;
  cursor:wait;
}

.btn.is-loading > *,
.app-btn.is-loading > *,
.entity-card-btn.is-loading > *{
  visibility:hidden;
}

.btn.is-loading::after,
.app-btn.is-loading::after,
.entity-card-btn.is-loading::after{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  content:"";
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:vg-button-spin .65s linear infinite;
}

@keyframes vg-button-spin{
  to{
    transform:rotate(360deg);
  }
}

/* 11. DROPDOWN BUTTONS */

.dropdown-toggle::after{
  margin-left:.15rem;
  vertical-align:.12em;
}

.dropdown-toggle-split{
  padding-right:.55rem;
  padding-left:.55rem;
}

/* 12. SAFETY AND COMPATIBILITY */

.export-ignore,
.icon-btn.export-ignore{
  display:inline-flex !important;
  visibility:visible !important;
}

a.btn,
a.app-btn{
  color:#fff;
}

button.btn,
input.btn{
  appearance:none;
}

/*
  Never globally shrink .btn-primary.
  Button sizing belongs to .btn-sm only.
*/

/* 13. DARK THEME */

[data-bs-theme="dark"] .btn-light,
[data-theme="dark"] .btn-light,
[data-bs-theme="dark"] .icon-btn,
[data-theme="dark"] .icon-btn{
  color:#e2e8f0;
  background:linear-gradient(180deg,#1e293b,#172033);
  border-color:#334155;
}

[data-bs-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .icon-btn:hover{
  color:#bfdbfe;
  background:#24324a;
  border-color:#475569;
}

/* 14. RESPONSIVE BUTTONS */

@media (max-width:767.98px){
  :root{
    --vg-btn-height:40px;
    --vg-btn-font-size:.9rem;
  }

  .actions-table,
  .card-actions{
    gap:.4rem;
  }

  .form-actions .btn,
  .form-actions .app-btn{
    flex:1 1 auto;
  }
}

@media (max-width:575.98px){
  .btn,
  .app-btn,
  .entity-card-btn,
  .btn-submit,
  .btn-cancel,
  .add-btn-desktop,
  .btn-search,
  .btn-clear,
  .btn-export{
    max-width:100%;
  }

  .form-actions{
    display:grid;
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
    width:100%;
  }

  .form-actions .btn,
  .form-actions .app-btn{
    width:100%;
  }

  .floating-btn{
    right:16px;
    bottom:16px;
    width:50px;
    height:50px;
  }
}

@media (max-width:389.98px){
  .form-actions{
    grid-template-columns:1fr;
  }
}

/* 15. TOUCH AND ACCESSIBILITY */

@media (hover:none) and (pointer:coarse){
  .btn:hover,
  .app-btn:hover,
  .icon-btn:hover,
  .entity-card-btn:hover{
    transform:none;
  }

  .icon-btn,
  .btn-icon,
  .btn.btn-icon{
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
  }
}

@media (prefers-reduced-motion:reduce){
  .btn,
  .app-btn,
  .icon-btn,
  .floating-btn,
  .entity-card-btn{
    transition:none;
  }

  .btn:hover,
  .app-btn:hover,
  .icon-btn:hover,
  .floating-btn:hover,
  .entity-card-btn:hover{
    transform:none;
  }
}

@media (forced-colors:active){
  .btn,
  .app-btn,
  .icon-btn,
  .floating-btn,
  .entity-card-btn{
    color:ButtonText;
    background:ButtonFace;
    border:1px solid ButtonText;
    box-shadow:none;
    forced-color-adjust:auto;
  }
}

/* ==========================================================================
   COMPLETE OUTLINE ACTION COLORS
========================================================================== */

.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark{
  background:#fff;
  box-shadow:0 2px 5px rgba(15,23,42,.06);
}

.btn-outline-warning::before,
.btn-outline-info::before,
.btn-outline-dark::before{
  display:none;
}

.btn-outline-warning{
  color:#b45309;
  border-color:#f5c56b;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus{
  color:#fff;
  background:#b45309;
  border-color:#b45309;
}

.btn-outline-info{
  color:#0369a1;
  border-color:#7dd3fc;
}

.btn-outline-info:hover,
.btn-outline-info:focus{
  color:#fff;
  background:#0369a1;
  border-color:#0369a1;
}

.btn-outline-dark{
  color:#1e293b;
  border-color:#94a3b8;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus{
  color:#fff;
  background:#1e293b;
  border-color:#1e293b;
}

/* Keep every action icon visible */

.btn[class*="btn-outline-"] i{
  color:inherit !important;
  opacity:1 !important;
  visibility:visible !important;
}