/* TimeClock PRO Web - intentionally simple, "classic" look */

:root{
  --blue:#0a73b8;
  --blue2:#0b5f96;
  --bg:#d9d9d9;
  --panel:#ffffff;
  --line:#c9c9c9;
  --text:#222;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.page-bg{ background:var(--bg); }

.topbar{
  background:var(--blue);
  color:#fff;
  height:70px;
  border-bottom:1px solid #084e7a;
}
.topbar-inner{
  height:70px;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  width:44px; height:44px;
  background:#fff;
  color:var(--blue);
  font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
}
.brand-title{ font-size:22px; font-weight:bold; line-height:1; }
.brand-sub{ font-size:14px; font-weight:bold; line-height:1.1; }
.nav{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
}
.nav a{
  color:#fff;
  text-decoration:none;
}
.nav a:hover{ text-decoration:underline; }
.nav-inline{ margin:0; padding:0; }
.linkish{
  background:transparent;
  border:0;
  color:#fff;
  font:inherit;
  cursor:pointer;
  padding:0;
}
.linkish:hover{ text-decoration:underline; }

.shell{
  max-width:1200px;
  margin:0 auto;
  padding:18px 14px 0;
}
.content{
  background:transparent;
}

.page-title{
  text-align:center;
  font-weight:bold;
  font-size:12px;
  letter-spacing:0.5px;
  margin:10px 0 8px;
  color:#444;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px;
  margin:0 auto 18px;
}
.panel.small{ max-width:560px; }
.panel.device-panel{ max-width:560px; }

.panel-title{
  font-weight:bold;
  font-size:12px;
  margin-bottom:10px;
}
.panel-actions{ float:right; }

.msg{
  border:1px solid var(--line);
  padding:8px 10px;
  margin:8px 0 12px;
  font-size:13px;
}
.msg.error{ background:#ffecec; border-color:#e2a0a0; }
.msg.ok{ background:#ecffec; border-color:#9dd39d; }
.center{ text-align:center; }

.form-table{
  width:100%;
  border-collapse:collapse;
}
.form-table td{
  padding:6px 6px;
  vertical-align:middle;
}
.label{
  width:210px;
  font-size:12px;
  color:#333;
}
.input{
  width:260px;
  padding:4px 6px;
  border:1px solid var(--line);
  font-size:13px;
}
.input.small{ width:140px; }
select.input{ height:26px; }

.btnrow{
  display:flex;
  gap:10px;
  margin-top:10px;
}
.btn{
  display:inline-block;
  background:var(--blue2);
  color:#fff;
  border:1px solid #084e7a;
  padding:4px 10px;
  font-size:12px;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.05); }
.btn.secondary{
  background:#f2f2f2;
  color:#111;
  border:1px solid var(--line);
}
.btn.big{
  width:100%;
  padding:12px 10px;
  font-size:16px;
  font-weight:bold;
  margin-bottom:10px;
}
.btn.disabled, .btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.grid{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.grid th, .grid td{
  border-top:1px solid var(--line);
  padding:6px 6px;
  text-align:left;
}
.grid thead th{
  border-top:0;
  color:#333;
  font-size:12px;
}
.grid.tight td{ padding:4px 6px; }
.grid tr.subtot td{ background:#f6f6f6; }

.muted{ color:#777; }

.tabs{
  display:flex;
  gap:6px;
  margin:0 auto 10px;
  max-width:760px;
}
.tab{
  display:inline-block;
  background:#f7f7f7;
  border:1px solid var(--line);
  padding:4px 10px;
  font-size:12px;
  color:#444;
  text-decoration:none;
}
.tab.active{
  background:#fff;
  border-bottom-color:#fff;
  font-weight:bold;
}

.range{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 14px;
  font-size:12px;
}

.subpanel{
  border:1px solid var(--line);
  margin:12px 0;
}
.subpanel-title{
  background:#f6f6f6;
  padding:6px 8px;
  font-weight:bold;
  font-size:12px;
  border-bottom:1px solid var(--line);
}
.right{ float:right; }

.plain-list{ margin:0; padding-left:18px; }
.plain-list li{ margin:6px 0; }

.footer{
  margin-top:50px;
  padding:35px 0 50px;
  background:var(--bg);
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
  color:#9a9a9a;
}
.footer-logo{
  font-size:44px;
  font-weight:bold;
  opacity:.35;
  line-height:0.9;
}
.footer-logo span{ font-size:14px; letter-spacing:1px; }
.footer-small{ font-size:11px; margin-top:8px; }

/* Device */
.device .shell{ padding-top:18px; }
.pin-input{
  width:100%;
  font-size:22px;
  padding:10px 12px;
  border:1px solid var(--line);
  text-align:center;
  letter-spacing:4px;
}
.keypad{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  margin-top:10px;
}
.key{
  padding:12px 10px;
  font-size:18px;
  border:1px solid var(--line);
  background:#f6f6f6;
  cursor:pointer;
}
.key.primary{
  background:var(--blue2);
  color:#fff;
  border-color:#084e7a;
}
.key.key-wide{ grid-column: span 1; }
.device-summary{
  font-size:14px;
  margin-bottom:12px;
}
.status-in{ color:#0a6b1a; font-weight:bold; }
.status-out{ color:#9b1f1f; font-weight:bold; }
.device-actions{ margin-top:10px; }
.device-subactions{ margin-top:10px; text-align:center; }