/*
Theme Name:  Junnect Time Clocker
Theme URI:   https://junnect.nl
Author:      Junnect
Author URI:  https://junnect.nl
Description: Internal time-tracking system with Entra ID auth, kiosk attendance, project timers, Jira integration and a versioned REST API.
Version:     1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:     Proprietary
License URI: https://junnect.nl/license
Text Domain: junnect-time
*/

/* ── Reset & base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --clr-primary:#152918;
  --clr-primary-dark:#112013;
  --clr-success:#28a745;
  --clr-danger:#dc3545;
  --clr-warning:#ffc107;
  --clr-bg:#F1EAD8;
  --clr-surface:#FAF7F0;
  --clr-text:#1e1e1e;
  --clr-muted:#6c757d;
  --radius:8px;
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
}
html{font-size:16px}
body{font-family:var(--font);color:var(--clr-text);background:var(--clr-bg);line-height:1.6}
a{color:var(--clr-primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Hide wordpress admin bar */
#wpadminbar{display:none}

/* ── Layout ─────────────────────────────────────────────── */
.tc-wrap{max-width:1140px;margin:0 auto;padding:1.5rem}
.tc-card{background:var(--clr-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem}
.tc-grid{display:grid;gap:1.5rem}
.tc-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tc-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* ── Buttons ────────────────────────────────────────────── */
.tc-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s,transform .1s}
.tc-btn:active{transform:scale(.97)}
.tc-btn--primary{background:var(--clr-primary);color:#fff}
.tc-btn--primary:hover{background:var(--clr-primary-dark)}
.tc-btn--success{background:var(--clr-success);color:#fff}
.tc-btn--danger{background:var(--clr-danger);color:#fff}
.tc-btn--outline{background:transparent;border:2px solid var(--clr-primary);color:var(--clr-primary)}
.tc-btn--lg{padding:.875rem 2rem;font-size:1.15rem}
.tc-btn--block{width:100%;justify-content:center}
.tc-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Forms ──────────────────────────────────────────────── */
.tc-input,.tc-select{width:100%;padding:.625rem .875rem;border:1px solid #ccc;border-radius:var(--radius);font-size:.95rem}
.tc-input:focus,.tc-select:focus{outline:none;border-color:var(--clr-primary);box-shadow:0 0 0 3px rgba(0,120,212,.15)}
.tc-label{display:block;margin-bottom:.35rem;font-weight:600;font-size:.875rem}
.tc-form-group{margin-bottom:1rem}

/* ── Tables ─────────────────────────────────────────────── */
.tc-table{width:100%;border-collapse:collapse}
.tc-table th,.tc-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e8e8e8}
.tc-table th{background:#f8f9fa;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;color:var(--clr-muted)}
.tc-table tr:hover td{background:#fafbfc}

/* ── Badges ─────────────────────────────────────────────── */
.tc-badge{display:inline-block;padding:.2rem .6rem;border-radius:20px;font-size:.75rem;font-weight:700;line-height:1.4}
.tc-badge--active{background:#d4edda;color:#155724}
.tc-badge--inactive{background:#e2e3e5;color:#383d41}
.tc-badge--warn{background:#fff3cd;color:#856404}

/* ── Nav ────────────────────────────────────────────────── */
.tc-topbar{background:var(--clr-surface);box-shadow:0 1px 4px rgba(0,0,0,.06);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.tc-topbar__brand{font-size:1.15rem;font-weight:700;color:var(--clr-primary)}
.tc-topbar__nav{display:flex;gap:1.25rem;align-items:center}
.tc-topbar__nav a{font-weight:500;color:var(--clr-text);font-size:.9rem}
.tc-topbar__nav a:hover,.tc-topbar__nav a.active{color:var(--clr-primary);text-decoration:none}

/* ── Timer display ──────────────────────────────────────── */
.tc-timer{font-size:2.5rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;text-align:center;padding:1rem 0}
.tc-timer--running{color:var(--clr-success)}
.tc-timer--stopped{color:var(--clr-muted)}

/* ── Alerts ─────────────────────────────────────────────── */
.tc-alert{padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.9rem}
.tc-alert--info{background:#cfe2ff;color:#084298;border:1px solid #b6d4fe}
.tc-alert--success{background:#d1e7dd;color:#0f5132;border:1px solid #badbcc}
.tc-alert--danger{background:#f8d7da;color:#842029;border:1px solid #f5c2c7}

/* ── Toast notifications ────────────────────────────────── */
.tc-toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.tc-toast{pointer-events:auto;padding:.75rem 1.25rem;border-radius:var(--radius);font-size:.9rem;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.15);animation:tcToastIn .3s ease,tcToastOut .3s ease 3.7s forwards;max-width:380px;display:flex;align-items:center;gap:.5rem}
.tc-toast--success{background:#d1e7dd;color:#0f5132;border-left:4px solid var(--clr-success)}
.tc-toast--error{background:#f8d7da;color:#842029;border-left:4px solid var(--clr-danger)}
.tc-toast--info{background:#cfe2ff;color:#084298;border-left:4px solid #0d6efd}
@keyframes tcToastIn{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}
@keyframes tcToastOut{from{opacity:1}to{opacity:0;transform:translateY(-10px)}}

/* ── Inline confirm ─────────────────────────────────────── */
.tc-confirm-inline{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;animation:fadeIn .15s ease}
.tc-confirm-inline .tc-btn{padding:.2rem .5rem;font-size:.75rem}

/* ── Empty states ───────────────────────────────────────── */
.tc-empty-state{text-align:center;padding:2.5rem 1rem;color:var(--clr-muted)}
.tc-empty-state__icon{font-size:2.5rem;margin-bottom:.5rem}
.tc-empty-state__text{font-size:.95rem}

/* ── Bulk action bar ────────────────────────────────────── */
.tc-bulk-bar{display:none;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#e8f4fd;border-radius:var(--radius);margin-bottom:1rem;animation:fadeIn .2s ease}
.tc-bulk-bar.active{display:flex}
.tc-bulk-bar__count{font-weight:600;font-size:.9rem;color:var(--clr-text)}
.tc-bulk-bar__actions{display:flex;gap:.5rem;margin-left:auto}

/* ── Checkbox styling ───────────────────────────────────── */
.tc-table .tc-check-col{width:40px;text-align:center}
.tc-table input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--clr-primary)}

/* ── Duration totals footer ─────────────────────────────── */
.tc-table tfoot td{font-weight:700;background:#f0f1f3;border-top:2px solid #dee2e6}

/* ── Kiosk overrides ────────────────────────────────────── */
body.tc-kiosk{background:#111;color:#fff}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:768px){
  .tc-topbar{flex-direction:column;gap:.75rem}
  .tc-topbar__nav{flex-wrap:wrap;justify-content:center}
  .tc-timer{font-size:1.8rem}
  .tc-toast-container{left:.5rem;right:.5rem}
  .tc-toast{max-width:100%}
  .tc-bulk-bar{flex-wrap:wrap}
  .tc-bulk-bar__actions{margin-left:0;width:100%}
  .tc-grid--2{grid-template-columns:1fr}
  .tc-btn--lg{padding:.65rem 1.25rem;font-size:1rem}
  .tc-card{padding:1rem}
  h1{font-size:1.5rem}
  /* Stack filter bars vertically */
  [style*="display:flex"][style*="gap:.5rem"]{flex-direction:column!important;align-items:stretch!important}
}