/* Components */

/* Buttons */
.btn{background:var(--gradient-primary);border:none;color:#fff;padding:var(--space-4) var(--space-6);border-radius:var(--radius);font-weight:var(--font-weight-bold);cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-3);transition:all 0.3s ease;box-shadow:var(--shadow-md);line-height:var(--line-height-tight);font-size:1rem;text-transform:uppercase;letter-spacing:0.5px}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);filter:brightness(1.1)}
.btn:active{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn.primary{background:var(--gradient-primary);color:#fff}
.btn.primary:hover{background:var(--gradient-primary);filter:brightness(1.2)}
.btn.small{padding:var(--space-3) var(--space-4);font-size:.9rem;text-transform:none;letter-spacing:0}
.btn.danger{background:var(--gradient-danger);color:#fff}
.btn.danger:hover{filter:brightness(1.2)}
.btn.success{background:var(--gradient-success);color:#fff}
.btn.success:hover{filter:brightness(1.2)}

/* Time Clock Buttons */
.tc-btn{
  padding:1rem 1.5rem;
  font-size:1.1rem;
  min-height:56px;
  border-radius:1rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:none;
  letter-spacing:0;
}

.tc-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px -5px rgba(0,0,0,0.25);
  filter:brightness(1.1);
}

.tc-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 15px -3px rgba(0,0,0,0.2);
}

.tc-btn.primary{
  background:var(--acc);
  color:#fff;
  box-shadow:0 4px 15px -3px rgba(59,130,246,0.4);
}

.tc-btn.primary:hover{
  background:var(--acc-hover);
  box-shadow:0 8px 25px -5px rgba(59,130,246,0.5);
}

.tc-btn.warn{
  background:var(--warn);
  color:#fff;
  box-shadow:0 4px 15px -3px rgba(239,68,68,0.4);
}

.tc-btn.warn:hover{
  background:var(--warn-hover);
  box-shadow:0 8px 25px -5px rgba(239,68,68,0.5);
}

.tc-btn.ghost{
  background:transparent;
  color:var(--text);
  border:2px solid var(--br);
  box-shadow:none;
}

.tc-btn.ghost:hover{
  background:var(--bg-light);
  border-color:var(--acc);
  color:var(--acc);
  transform:translateY(-2px);
  box-shadow:0 4px 15px -3px rgba(0,0,0,0.1);
}

.tc-btn:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.tc-btn:disabled:hover{
  transform:none;
  filter:none;
}

/* GPS Pin styling */
.gps-pin {
  cursor: pointer;
  color: var(--acc);
  text-decoration: underline;
  transition: all 0.2s ease;
}

.gps-pin:hover {
  color: var(--acc-hover);
  text-decoration: none;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Small time clock buttons for export and history */
.tc-btn.small{
  padding:0.5rem 0.75rem;
  font-size:0.85rem;
  min-height:36px;
  border-radius:0.5rem;
  font-weight:600;
}

.tc-btn.small:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px -3px rgba(0,0,0,0.2);
}

.tc-btn.small:active{
  transform:translateY(0);
  box-shadow:0 2px 8px -2px rgba(0,0,0,0.15);
}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}

/* Cards */
.card{background:linear-gradient(135deg, var(--card) 0%, rgba(255,255,255,0.02) 100%);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:var(--space-8);box-shadow:var(--shadow-lg);margin-bottom:var(--space-6);transition:all 0.3s ease;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);opacity:0;transition:opacity 0.3s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl);border-color:rgba(255,255,255,0.2)}
.card:hover::before{opacity:1}

/* Light theme card fixes */
[data-theme="light"] .card {
  background: var(--card);
  border: 1px solid var(--br);
  color: var(--ink);
}

[data-theme="light"] .card:hover {
  background: var(--card-hover);
  border-color: var(--br);
}

/* Form Elements */
label{font-size:.9rem;color:var(--sub);display:block;margin-bottom:.35rem}
input,select,textarea{width:100%;min-width:0;padding:var(--space-4);border-radius:var(--radius);border:2px solid rgba(255,255,255,0.1);background:rgba(255,255,255,.05);color:var(--ink);transition:all 0.3s ease;font-size:1rem;font-weight:var(--font-weight-medium)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(59,130,246,0.2);background:rgba(255,255,255,.08);transform:translateY(-1px)}

/* Light theme form fixes */
[data-theme="light"] label {
  color: var(--sub);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  color: var(--ink);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.2);
  background: var(--input-bg);
}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:.55rem .7rem;border-bottom:1px solid var(--br);white-space:nowrap}
th{text-align:left;color:var(--sub);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}

/* Light theme table fixes */
[data-theme="light"] th {
  background: var(--table-header);
  color: var(--sub);
}

[data-theme="light"] td {
  color: var(--ink);
  border-bottom: 1px solid var(--table-border);
}

[data-theme="light"] tr:hover {
  background: var(--table-row-hover);
}

/* Pills and Badges */
.badge{background:var(--gradient-primary);color:#fff;padding:var(--space-2) var(--space-3);border-radius:999px;font-weight:var(--font-weight-bold);font-size:.75rem;box-shadow:var(--shadow-md);text-transform:uppercase;letter-spacing:0.5px}
.namepill{border:2px solid rgba(255,255,255,0.2);padding:var(--space-3) var(--space-4);border-radius:999px;font-weight:var(--font-weight-bold);font-size:1rem;white-space:nowrap;background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);transition:all 0.3s ease}
.namepill:hover{border-color:var(--acc);background:rgba(59,130,246,0.1);transform:scale(1.02)}
.pill{background:var(--card);border:1px solid var(--br);border-radius:999px;padding:.35rem .7rem;font-weight:700}
.muted{color:var(--sub)}

/* Utility Classes */
.blue{background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-md)}
.green{background:var(--gradient-success);border:none;color:#fff;box-shadow:var(--shadow-md)}
.w-actions{width:120px}
.history{border:1px dashed var(--br);border-radius:.5rem;padding:.6rem;margin-top:.45rem}
.history-item{border:1px solid var(--br);border-radius:.5rem;padding:.45rem .6rem;margin:.35rem 0}
.gate-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}

/* Duplicate RO asterisk */
.ro-dup{color:#dc2626;font-weight:800;margin-left:2px;vertical-align:super;font-size:0.9em;}