/* ============================================
   BUTTON STYLESHEET (OPTIMIZED – OUTPUT SAFE)
   ============================================ */

/* ============================================
   BASE BUTTON
   ============================================ */

   .btn{
    cursor:pointer;
    background:#0f1722;
    color:var(--link);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 12px;
    font-weight:600;
    font-size:13px;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .2s ease;
    text-decoration:none;
    white-space:nowrap;
    font-family:inherit;
    line-height:1.4;
  }
  
  /* Light theme base */
  [data-theme="light"] .btn{
    background:#f1f5f9;
    color:var(--link);
    border-color:var(--line);
  }
  
  /* ============================================
     STATES
     ============================================ */
  
  .btn:hover{
    filter:brightness(1.1);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(0,0,0,.2);
  }
  [data-theme="light"] .btn:hover{
    filter:none;
    background:#e2e8f0;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
  }
  
  .btn:active{
    transform:translateY(0);
    box-shadow:0 1px 2px rgba(0,0,0,.1);
  }
  
  .btn:disabled,
  .btn:disabled:hover{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
    filter:none;
  }
  
  /* ============================================
     COLOR VARIANTS
     ============================================ */
  
  .btn.primary{
    background:var(--pri);
    border-color:#2f7fd1;
    color:#041019;
  }
  [data-theme="light"] .btn.primary{
    background:#81b6ec;
    border-color:#2f7fd1;
    color:#000000;
  }
  .btn.primary:hover{
    background:var(--pri-hover);
    border-color:#3a86e9;
  }
  
  /* Secondary */
  .btn.secondary{
    background:transparent;
    border-color:#3a86e9;
    color:var(--link);
  }
  .btn.secondary:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.2);
  }
  [data-theme="light"] .btn.secondary:hover{
    background:rgba(0,0,0,.05);
    border-color:rgba(0,0,0,.15);
  }
  
  /* Danger */
  .btn.danger{
    background:transparent;
    border-color:var(--danger);
    color:#ffb9b9;
  }
  .btn.danger:hover{
    background:rgba(255,107,107,.15);
    color:#ffe1e1;
    border-color:#ff8a8a;
  }
  [data-theme="light"] .btn.danger{
    color:#dc2626;
  }
  [data-theme="light"] .btn.danger:hover{
    background:rgba(220,38,38,.1);
    color:#991b1b;
    border-color:#dc2626;
  }
  
  /* Warning */
  .btn.warning{
    background:rgba(255,204,0,.15);
    border-color:var(--warn);
    color:#ffe598;
  }
  .btn.warning:hover{
    background:rgba(255,204,0,.25);
    color:#fff4c4;
    border-color:#ffd700;
  }
  [data-theme="light"] .btn.warning{
    color:#92400e;
  }
  [data-theme="light"] .btn.warning:hover{
    background:rgba(217,119,6,.15);
    color:#78350f;
    border-color:#d97706;
  }
  
  /* Edit */
  .btn.edit{
    background:rgba(20,184,166,.15);
    border-color:rgba(20,184,166,.5);
    color:#7dd3fc;
  }
  .btn.edit:hover{
    background:rgba(20,184,166,.25);
    color:#bae6fd;
    border-color:rgba(20,184,166,.7);
  }
  [data-theme="light"] .btn.edit{
    color:#0e7490;
  }
  [data-theme="light"] .btn.edit:hover{
    background:rgba(20,184,166,.2);
    color:#155e75;
    border-color:rgba(20,184,166,.6);
  }
  
  /* ============================================
     SIZE VARIANTS
     ============================================ */
  
  .btn.btn-clear{
    padding:6.5px 14px;
    min-height:29px;
  }

  .btn.sm{
    padding:6px 10px !important;
    font-size:12px !important;
    min-height:26px !important;
    font-weight:600;
  }

  .btn.xs{
    padding:3px 6px !important;
    font-size:11px !important;
    border-radius:8px !important;
    min-width:48px;
    min-height:32px !important;
    font-weight:600;
  }

  .btn.xxs{
    padding:2px 6px !important;
    font-size:12px !important;
    border-radius:8px !important;
    min-height:auto !important;
    font-weight:600;
  }

  /* Icon-only buttons */
  .btn.icon-only{
    padding:0 !important;
    width:24px;
    min-width:24px;
    height:24px;
    min-height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    font-weight:600;
    line-height:1;
  }
  .btn.icon-only.sm{
    width:28px;
    min-width:28px;
    height:28px;
    min-height:28px;
    font-size:1.1em;
  }
  
  /* ============================================
     TAB BUTTONS
     ============================================ */
  
  button.btn.tab{
    font-family:inherit;
    font-size:inherit;
  }
  .btn.tab{
    background:#0f1722;
    border:1px solid #1b2636;
    border-radius:12px;
    padding:8px 12px;
    color:#cfe3ff;
    font-weight:600;
    letter-spacing:.2px;
    min-height:32px;
  }
  .btn.tab:hover{ background:#122035; }
  .btn.tab.active{
    outline:2px solid #2f7fd1;
    background:#17314d;
  }
  
  [data-theme="light"] .btn.tab{
    background:#f1f5f9;
    border-color:#e2e8f0;
    color:#1e293b;
  }
  [data-theme="light"] .btn.tab:hover{ background:#e2e8f0; }
  [data-theme="light"] .btn.tab.active{
    outline:2px solid #2563eb;
    background:#dbeafe;
    color:#1e40af;
  }

  .templates-tabs{
    display:flex;
    gap:8px;
    margin-top:0;
    border-bottom:1px solid var(--line);
    padding-bottom:0;
    flex-wrap:wrap;
    overflow-y:hidden;
  }

  .templates-tabs .btn.tab{
    margin-top:5px;
    margin-left:1px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-bottom:none;
    margin-bottom:-1px;
  }

  .templates-tab-content{
    padding-top:24px;
  }

  .templates-title-badge{
    background:rgba(255,204,0,0.35);
    border:1px solid #ffd700;
    padding:2px 8px;
    border-radius:4px;
    display:inline-block;
  }

  .mfa-summary-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:12px;
    margin-bottom:20px;
  }

  .mfa-summary-card{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px;
    min-height:120px;
  }

  .mfa-summary-card h4{
    margin:0;
    font-size:0.95em;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--muted-text);
  }

  .mfa-summary-value{
    margin-top:8px;
    font-size:1.35em;
    font-weight:600;
    color:var(--text);
  }

  .mfa-summary-card small{
    display:block;
    margin-top:6px;
    color:var(--muted-text);
  }

  .mfa-summary-card ul{
    margin:10px 0 0 18px;
    padding:0;
    line-height:1.6;
  }

  .mfa-summary-card ul li{
    list-style:disc;
  }

  .mfa-toggle-card{
    background:rgba(255,255,255,0.02);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:nowrap;
  }

  .mfa-toggle-cards-row{
    display:flex;
    gap:12px;
    align-items:stretch;
    flex-wrap:nowrap;
  }

  .mfa-toggle-cards-row .mfa-toggle-card{
    flex:1 1 0;
    min-width:260px;
  }

  @media (max-width: 900px){
    .mfa-toggle-cards-row{
      flex-wrap:wrap;
    }
    .mfa-toggle-cards-row .mfa-toggle-card{
      flex:1 1 320px;
    }
  }

  .mfa-toggle-card h4{
    margin:0;
    font-size:1em;
    font-weight:600;
    color:var(--text);
  }

  .mfa-toggle-card p{
    margin:6px 0 0 0;
    font-size:0.9em;
    color:var(--muted-text);
  }

  .mfa-toggle-card .toggle-switch-label{
    margin:0;
    display:flex;
    align-items:center;
  }
  
  /* ============================================
     CONTEXTUAL LAYOUT HELPERS
     ============================================ */
  
  .card-actions-buttons .btn,
  .module-overview-header .btn{
    flex:0 0 auto;
    width:auto;
  }
  
  /* ============================================
     TABLE ACTION BUTTONS (GROUPED)
     ============================================ */
  
  .inspections-page .table tbody td.actions-right,
  #inspections-all-items-table tbody td.actions-right,
  #inspections-needs-config-table tbody td.actions-right,
  #overdue-inspections-table tbody td.actions-right{
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-end;
    white-space:normal;
  }
  
  .inspections-page .table tbody td.actions-right .btn,
  #inspections-all-items-table tbody td.actions-right .btn,
  #inspections-needs-config-table tbody td.actions-right .btn,
  #overdue-inspections-table tbody td.actions-right .btn{
    width:100%;
    text-align:center;
  }
  
  .inspections-page .table tbody td.actions-right .btn.xs,
  #inspections-all-items-table tbody td.actions-right .btn.xs,
  #inspections-needs-config-table tbody td.actions-right .btn.xs,
  #overdue-inspections-table tbody td.actions-right .btn.xs{
    padding:2px 8px !important;
    line-height:1.8 !important;
    min-height:auto !important;
  }
  
  /* ============================================
     RESPONSIVE
     ============================================ */
  
  @media (max-width:768px){
    .btn{
      padding:8px 11px;
      min-height:38px;
      font-size:14px;
    }
    .btn.xs{
      padding:2px 5px !important;
      font-size:10px !important;
      min-height:36px;
    }
  
    .card-header-actions,
    .module-overview-header{
      flex-direction:column !important;
      align-items:flex-start !important;
      gap:12px !important;
    }
  
    .card-actions-buttons,
    .module-overview-header > div{
      flex-wrap:wrap !important;
      width:100% !important;
    }
  
    .table-responsive table.table td.actions-right > div{
      flex-direction:column !important;
      gap:4px !important;
      align-items:stretch !important;
    }
  
    .table-responsive table.table td.actions-right .btn{
      width:100%;
      margin:0;
    }
  }

/* ============================================
   MENU/NAVIGATION BUTTONS
   Buttons used in top banner and navigation menus
   ============================================ */

/* Help button - blue background */
.btn.help{
  background:#2196F3;
  border-color:#2196F3;
  color:#fff;
  flex-shrink:0;
}

/* Icon buttons - no background, icon-sized */
.btn.icon,
.btn.icon-btn{
  background:none;
  border:none;
  color:var(--text);
  flex-shrink:0;
  font-size:1.8em;
  padding:0;
  text-decoration:none;
  cursor:pointer;
}

/* Reports button - icon button variant */
.btn.reports{
  background:none;
  border:none;
  color:var(--text);
  flex-shrink:0;
  font-size:1.8em;
  padding:0;
  text-decoration:none;
}

/* Theme switcher - icon button variant */
.btn.theme-switcher{
  background:none;
  border:none;
  color:var(--text);
  flex-shrink:0;
  font-size:1.8em;
  padding:0;
  cursor:pointer;
}

/* Flex shrink utility for buttons */
.btn.flex-shrink-0{
  flex-shrink:0;
}

/* Dropdown toggle buttons in settings tabs */
.btn.tab.dropdown-toggle{
  cursor:pointer;
  width:auto;
  height:auto;
  font-weight:600;
  letter-spacing:0.2px;
}

/* ============================================
   BUTTON UTILITY MODIFIERS
   Use these classes to modify button appearance
   ============================================ */

/* Margin utilities for buttons */
.btn.mt-0{margin-top:0 !important}
.btn.mt-4{margin-top:4px !important}
.btn.mt-8{margin-top:8px !important}
.btn.mt-12{margin-top:12px !important}
.btn.mt-16{margin-top:16px !important}
.btn.mt-20{margin-top:20px !important}
.btn.mr-4{margin-right:4px !important}
.btn.mr-8{margin-right:8px !important}
.btn.mb-0{margin-bottom:0 !important}
.btn.mb-4{margin-bottom:4px !important}
.btn.mb-8{margin-bottom:8px !important}

/* Padding utilities for buttons */
.btn.p-compact{padding:4px 8px !important;min-width:auto !important}
.btn.p-xs{padding:2px 5px !important}
.btn.p-sm{padding:4px 8px !important}

/* Width utilities for buttons */
.btn.w-auto{width:auto !important}
.btn.w-full{width:100% !important}
.btn.min-w-auto{min-width:auto !important}

/* Height utilities for buttons */
.btn.h-auto{height:auto !important;min-height:auto !important}

/* Opacity and cursor utilities for disabled states */
.btn.disabled,
.btn[disabled]{
  opacity:0.5 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}

/* Font size utilities for buttons */
.btn.text-xs{font-size:0.75em !important}
.btn.text-sm{font-size:0.85em !important}
.btn.text-md{font-size:0.9em !important}
.btn.text-base{font-size:1em !important}

/* Border utilities for buttons */
.btn.border-subtle{border:1px solid rgba(255,255,255,0.3) !important}

/* Flex utilities for buttons */
.btn.flex-1{flex:1 !important}

/* Quick date picker buttons (for date fields with month/year shortcuts) */
.btn.quick-date{
  padding:4px 8px !important;
  min-width:auto !important;
  font-size:0.75em !important;
  border:1px solid rgba(255,255,255,0.3) !important;
}

/* Generate password button */
.btn.generate-password{
  white-space:nowrap !important;
  min-height:auto !important;
  height:auto !important;
  padding:10px 14px !important;
  margin-top:28px !important;
  line-height:normal !important;
}

/* Copy button */
.btn.copy-btn{
  white-space:nowrap !important;
}

/* Menu toggle button */
.btn.menu-toggle{
  padding:8px 12px !important;
  font-size:1.2em !important;
  min-width:44px !important;
}

/* Search button in banner */
.btn.search-btn{
  padding:9px 14px !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
}

/* Tenant action icon buttons */
.btn.tenant-action-icon{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  min-height:36px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:30px !important;
  line-height:1 !important;
}

/* ============================================
   RESPONSIVE BUTTON ADJUSTMENTS
   ============================================ */

/* Tablet breakpoint (≤1366px) */
@media (max-width:1366px){
  .btn{
    padding:8px 14px;
    font-size:0.9em;
  }
}

/* Mobile breakpoint (≤768px) */
@media (max-width:768px){
  .btn{
    padding:8px 11px;
    min-height:38px;
    font-size:14px;
  }
  
  .btn.xs{
    padding:2px 5px !important;
    font-size:10px !important;
    min-height:36px;
  }
  
  .btn.tenant-action-icon{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    font-size:1em !important;
  }
  
  .btn.search-btn{
    min-width:32px !important;
    width:32px !important;
    height:32px !important;
    padding:0 !important;
  }
  
  .banner-user-container .btn{
    padding:6px 10px;
    font-size:0.85em;
  }
}

/* Small mobile breakpoint (≤480px) */
@media (max-width:480px){
  .btn.tenant-action-icon{
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    font-size:1em !important;
  }
}