/* =============================
   Component Styles (Buttons, Cards, Forms)
   ============================= */

.btn{
    appearance:none;
    border:1px solid var(--border);
    background:var(--card);
    border-radius:var(--radius-lg);
    padding:12px 18px;
    font-size:14px;
    font-weight:600;
    letter-spacing:.3px;
    transition:background var(--transition) var(--ease), box-shadow var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease);
    box-shadow:var(--shadow-sm);
}

.btn:hover{
    background:var(--card-hover);
    box-shadow:var(--shadow);
    transform:translateY(-1px);
}

.btn:active{
    transform:translateY(0) scale(.98);
    box-shadow:var(--shadow-sm);
}

.btn.primary{
    background:var(--gradient-primary);
    border:1px solid var(--primary-dark);
    box-shadow:0 4px 10px rgba(59,130,246,.35);
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff;
    filter:none;
    opacity:1;
    text-shadow:0 1px 2px rgba(0,0,0,0.15);
}

.btn.primary:hover{
    box-shadow:0 6px 14px rgba(59,130,246,.4);
}

.btn.primary:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:3px;
}

.btn.ghost{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);
}

.btn.ghost:hover{
    background:var(--bg-secondary);
    color:var(--text);
}

.btn.tinted{
    background:var(--accent-light);
    color:var(--accent);
    border:1px solid var(--accent);
}

.btn.tinted:hover{
    background:var(--accent);
    color:#fff;
}

.btn.destructive{
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid var(--danger);
}

.btn.destructive:hover{
    background:var(--danger);
    color:#fff;
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:var(--shadow);
}

input,select,textarea{
    width:100%;
    border:1px solid var(--border);
    background:var(--bg-secondary);
    border-radius:var(--radius-lg);
    padding:14px 16px;
    font-size:15px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.04);
    transition: border var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
    font-family:inherit;
    /* Add touch-action optimization for interactive form elements to reduce iOS 300ms ghost tap */
    touch-action:manipulation;
}

input:focus,select:focus,textarea:focus{
    border-color:var(--primary);
    background:var(--card);
    box-shadow:0 0 0 4px rgba(59,130,246,0.15);
}

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

/* Improve select tap highlight removal */
select{-webkit-tap-highlight-color:transparent;}

label{
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    display:block;
    margin-bottom:6px;
    letter-spacing:0.3px;
}

.badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:var(--bg-secondary);
    border-color:var(--border);
    color:var(--text-secondary);
    font-size:13px;
    font-weight:700;
}

.badge[data-variant="accent"]{background:var(--accent-light);color:var(--accent);border-color:var(--accent);}

.muted{color:var(--muted);font-size:14px}

/* Floating add button */
.fab{
    position:fixed;
    bottom:28px;
    right:28px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border:none;
    color:#ffffff;
    font-size:32px;
    font-weight:300;
    box-shadow:var(--shadow-xl);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    transition:all 0.3s ease;
}
.fab:hover{
    transform:scale(1.1) rotate(90deg);
    box-shadow:0 25px 35px rgba(59, 130, 246, 0.4);
}
.fab:active{transform:scale(0.95) rotate(90deg)}

/* Hide FAB when side menus are open */
.side-menu.active ~ .fab,
.filter-panel.active ~ .fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Dynamic fields */
.field-group{margin-bottom:16px}
.field-group label{display:block;margin-bottom:6px}

.icon-btn{
  appearance:none;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  color:var(--text-secondary);
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease);
  box-shadow:var(--shadow-sm);
}
.icon-btn:hover{background:var(--card-hover);color:var(--text);box-shadow:var(--shadow);}
.icon-btn:active{transform:scale(.94);}
.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}