/*
 * SuiteSoft inherits the current TaskTrack.pro visual theme. Update this theme layer when TaskTrack branding changes.
 * Mirrored from /var/www/tasktrack.pro/public/assets/css/app.css.
 */
:root{
  --navy:#282a73;
  --navy-2:#1f215c;
  --navy-3:#151742;
  --navy-4:#0f1130;
  --gold:#febc2a;
  --gold-2:#ffd76a;
  --bg:#f3f5fb;
  --panel:#ffffff;
  --text:#18203a;
  --text-soft:#5f698a;
  --border:#dbe2f0;
  --input:#ffffff;
  --danger:#b23a3a;
  --success:#2d8a57;
  --shadow:0 10px 30px rgba(22,29,58,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}
body{min-height:100vh}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:none}

.topbar{
  min-height:84px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 26px;
  background:linear-gradient(90deg,var(--navy-3) 0%,var(--navy) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
}

.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand-mark{
  width:46px;
  height:46px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);
  color:#1d1d1d;
  font-weight:900;
  box-shadow:0 8px 18px rgba(254,188,42,.18);
}
.brand strong{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;color:#fff}
.brand small{display:block;color:rgba(255,255,255,.82);font-size:13px;margin-top:2px}
.nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.user-chip{color:rgba(255,255,255,.88);font-weight:700}

.container{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:28px 0 44px}
.hero{
  margin-bottom:18px;
  padding:24px;
  background:linear-gradient(135deg,#ffffff 0%,#f7f9ff 100%);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.compact-hero h1{font-size:32px}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);margin-bottom:8px;font-weight:700}

h1,h2,h3,p{margin:0 0 10px}
h1{font-size:36px;line-height:1.15;color:var(--navy)}
h2{font-size:23px;line-height:1.2;color:var(--navy)}
h3{font-size:20px;line-height:1.2;color:var(--navy)}
p{color:var(--text-soft);line-height:1.45}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px;
  box-shadow:var(--shadow);
}
.admin-panel{margin-bottom:18px}
.module-card{
  min-height:150px;
  display:flex;
  flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.module-card:hover{transform:translateY(-2px);border-color:#c8d2ea;box-shadow:0 14px 34px rgba(22,29,58,.10)}
.module-card p{color:var(--text-soft)}
.icon{
  width:54px;
  height:54px;
  border-radius:14px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  background:#eef2fb;
  border:1px solid #d5ddef;
  color:var(--navy);
  font-size:20px;
  font-weight:800;
}
.open-link{margin-top:auto;padding-top:18px;color:var(--navy);font-weight:800}

.button,button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);
  color:#1d1d1d;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(254,188,42,.18);
  text-decoration:none;
}
.button:hover,button:hover{filter:brightness(1.02)}
.button.primary{background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);color:#1d1d1d}
.button.ghost{
  background:#eef2fb;
  color:var(--navy);
  box-shadow:none;
  border:1px solid #d5ddef;
}
.topbar .button.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.16)}
.button-block{width:100%}
button:disabled{cursor:not-allowed;opacity:.55;filter:grayscale(.15)}

label{display:grid;gap:6px;font-size:14px;font-weight:700;color:var(--navy)}
input,select,textarea{
  width:100%;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #cad4e8;
  background:var(--input);
  color:var(--text);
  outline:none;
  font:inherit;
}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(254,188,42,.18)}
input[type="checkbox"]{width:auto;padding:0}
label:has(> input[type="checkbox"]){display:flex;align-items:center;gap:10px}
.form-row{margin-bottom:14px}

.login-page .topbar{display:none}
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:linear-gradient(135deg,var(--navy-4) 0%,var(--navy) 100%);
}
.login-card{width:100%;max-width:460px;padding:34px}
.login-card h2{font-size:36px;margin-bottom:4px}
.demo{border-top:1px solid var(--border);margin-top:20px;padding-top:16px;color:var(--text-soft);font-size:13px;line-height:1.5}
code{color:var(--navy)}

.error{
  background:#fff2f2;
  border:1px solid #efc6c6;
  color:#8f2f2f;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:16px;
}
.success{
  background:#eefaf3;
  border:1px solid #c7e7d3;
  color:#246845;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:18px;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:#eef2fb;
  border:1px solid #d5ddef;
  color:var(--navy);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}
.muted{color:var(--text-soft)}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:14px 12px;border-bottom:1px solid #e7edf7;text-align:left;color:var(--text);vertical-align:top}
.table th{color:var(--navy);font-size:13px;text-transform:uppercase;letter-spacing:.07em}
.user-table{min-width:940px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actions form{margin:0}
.calendar-nav form{margin:0}.calendar-nav input{min-height:44px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.quick-add-grid{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:12px}
.quick-line,.quick-logo{grid-column:span 2}
.screen-checkboxes{border:1px solid var(--border);border-radius:12px;padding:14px;margin:4px 0 16px;display:flex;gap:12px 18px;flex-wrap:wrap}
.screen-checkboxes legend{font-weight:800;color:var(--navy);padding:0 6px}
.screen-checkboxes label{display:flex;align-items:center;gap:7px}
.overlap-badge{background:#fff2d8;border-color:#efc36b;color:#7b4b00}
.hidden-event{opacity:.58;background:#f5f5f7}
.calendar-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.calendar-day{display:grid;gap:4px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#f8faff;color:var(--navy)}
.calendar-day.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(254,188,42,.2)}
.calendar-day span,.calendar-day small{color:var(--text-soft)}
.copy-day-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.copy-day-form label{min-width:190px}
.events-calendar-table{min-width:900px}
.display-url{font-size:12px}
@media print{.topbar,.eventscreens-preview .actions{display:none!important}.container{width:100%;padding:0}.hero,.card{box-shadow:none;border:0}.eventscreens-preview{font-size:12pt}}
.spacer{height:18px}
.small{font-size:13px}
.stack{display:grid;gap:16px}
.onboard-page .topbar{display:none}
.onboarding-card{display:grid;gap:14px;align-content:start}
.qr-placeholder{width:180px;height:180px;display:grid;place-items:center;align-content:center;gap:6px;border:12px solid var(--navy);background:#fff;color:var(--navy);box-shadow:inset 0 0 0 8px #fff, inset 0 0 0 14px var(--navy)}
.qr-placeholder strong{font-size:42px}.qr-placeholder span{font-size:11px;font-weight:800;text-transform:uppercase}

@media (max-width:760px){
  .topbar{position:static;align-items:flex-start;padding:14px 18px}
  .brand strong{font-size:22px}
  .brand small,.user-chip{display:none}
  .nav{gap:8px}
  .topbar .button{min-height:38px;padding:9px 12px}
  .container{width:min(100% - 24px,1180px);padding-top:18px}
  .hero,.card{padding:20px}
  .login-wrap{min-height:calc(100vh - 74px);padding:16px}
  .login-card{padding:24px}
  .actions{min-width:180px}
  .quick-add-grid{grid-template-columns:1fr}.quick-line,.quick-logo{grid-column:auto}
  .calendar-week{grid-template-columns:repeat(2,1fr)}
  .section-heading{align-items:flex-start;flex-direction:column}
}