/* ─── Reset & Base ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-sans);background:var(--color-background);
  color:var(--color-text);line-height:1.5;min-height:100vh;}
a{color:var(--rl-red);text-decoration:none;}
a:hover{text-decoration:underline;}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;}

/* ─── App Shell ─────────────────────────────────────────────────────────────── */
#app{display:flex;flex-direction:column;min-height:100vh;}

/* ─── Header / Nav ──────────────────────────────────────────────────────────── */
.app-header{
  background:var(--color-nav-bg);
  border-bottom:2px solid var(--color-nav-border);
  position:sticky;top:0;z-index:100;
}
.app-header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;
  padding:0 16px;height:52px;gap:16px;
}
/* Logo image in nav — fixed height, natural width, no distortion */
.app-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.app-logo-img{
  height:32px;
  width:auto;
  display:block;
  object-fit:contain;
  object-position:left center;
  /* Slight brightness boost — dark logo on dark bg needs a touch of white push */
  filter:brightness(1.08);
}
.app-nav{display:flex;align-items:stretch;margin-left:16px;gap:2px;height:52px;}
.app-nav-item{
  display:flex;align-items:center;padding:0 14px;
  font-size:13px;color:#8899B5;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  white-space:nowrap;background:none;border-left:none;border-right:none;border-top:none;
  text-decoration:none;transition:color 0.15s;
}
.app-nav-item:hover{color:white;}
.app-nav-item.active{color:white;border-bottom-color:var(--rl-red);font-weight:600;}
.app-nav-spacer{flex:1;}
.app-nav-user{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:#8899B5;padding:0 0 0 16px;
  border-left:1px solid #333;
}
.app-nav-avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--rl-red);color:white;
  font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.app-nav-signout{
  background:none;border:none;color:#8899B5;
  font-size:12px;cursor:pointer;padding:4px 8px;
  border-radius:var(--radius-sm);
}
.app-nav-signout:hover{color:white;background:#333;}

/* ─── Main content ──────────────────────────────────────────────────────────── */
.app-main{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:24px 16px;}
@media(min-width:768px){.app-main{padding:32px 24px;}}

/* ─── Page header ───────────────────────────────────────────────────────────── */
.page-header{margin-bottom:24px;}
.page-title{font-size:20px;font-weight:700;color:var(--rl-charcoal);}
.page-subtitle{font-size:13px;color:var(--color-text-muted);margin-top:3px;}
.page-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;font-size:13px;font-weight:700;
  border-radius:var(--radius-sm);border:none;
  transition:background 0.15s,opacity 0.15s;
  white-space:nowrap;
}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-primary{background:var(--rl-red);color:white;}
.btn-primary:hover:not(:disabled){background:var(--rl-red-dark);}
.btn-ghost{background:transparent;color:var(--rl-red);border:1.5px solid var(--rl-red);}
.btn-ghost:hover:not(:disabled){background:var(--rl-red-muted);}
.btn-neutral{background:var(--rl-grey-100);color:var(--rl-charcoal);border:1.5px solid var(--rl-grey-300);}
.btn-neutral:hover:not(:disabled){background:var(--rl-grey-200);}
.btn-danger{background:#C2000D;color:white;}
.btn-danger:hover:not(:disabled){background:#8A0009;}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-lg{padding:12px 24px;font-size:14px;}

/* ─── Cards ─────────────────────────────────────────────────────────────────── */
.card{
  background:white;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:20px;
  margin-bottom:16px;
}
.card-title{
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--color-text-muted);
  margin-bottom:16px;padding-bottom:10px;
  border-bottom:1px solid var(--rl-grey-200);
}

/* ─── Form fields ───────────────────────────────────────────────────────────── */
.form-group{margin-bottom:16px;}
.form-row{display:grid;gap:12px;margin-bottom:0;}
.form-row.cols-2{grid-template-columns:1fr 1fr;}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:600px){
  .form-row.cols-2,.form-row.cols-3{grid-template-columns:1fr;}
}
label{
  display:block;font-size:11px;font-weight:600;
  color:var(--rl-charcoal);margin-bottom:5px;
}
label .req{color:var(--rl-red);}
.field-hint{font-size:11px;color:var(--color-text-muted);margin-top:3px;}
input[type=text],input[type=email],input[type=datetime-local],
input[type=date],input[type=time],select,textarea{
  width:100%;padding:9px 11px;font-size:13px;
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-sm);
  background:white;color:var(--color-text);
  transition:border-color 0.15s,box-shadow 0.15s;
  -webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--rl-red);
  box-shadow:0 0 0 3px var(--color-focus-ring);
}
input.error,select.error,textarea.error{
  border-color:var(--rl-red);
  background:var(--rl-red-muted);
}
.field-error{font-size:11px;color:var(--rl-red);font-weight:600;margin-top:4px;}
textarea{resize:vertical;min-height:72px;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}

/* ─── Status badges ─────────────────────────────────────────────────────────── */
.badge{
  display:inline-block;font-size:10px;font-weight:700;
  padding:3px 9px;border-radius:3px;letter-spacing:0.5px;
  text-transform:uppercase;
}
.badge-draft    {background:var(--status-draft-bg);    color:var(--status-draft-text);}
.badge-submitted{background:var(--status-submitted-bg);color:var(--status-submitted-text);}
.badge-approved {background:var(--status-approved-bg); color:var(--status-approved-text);}
.badge-rejected {background:var(--status-rejected-bg); color:var(--status-rejected-text);}

/* ─── Job list / table ──────────────────────────────────────────────────────── */
.job-list{display:flex;flex-direction:column;gap:8px;}
.job-card{
  background:white;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:16px;
  display:flex;flex-direction:column;gap:8px;
  cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s;
  text-decoration:none;color:inherit;
}
.job-card:hover{border-color:var(--rl-red);box-shadow:0 2px 8px rgba(243,0,16,0.08);}
.job-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.job-card-title{font-size:14px;font-weight:700;color:var(--rl-charcoal);}
.job-card-sub{font-size:12px;color:var(--color-text-muted);margin-top:2px;}
.job-card-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--color-text-muted);}
.job-card-meta span{display:flex;align-items:center;gap:4px;}

/* ─── Form sections ─────────────────────────────────────────────────────────── */
.form-section{
  background:white;border:1px solid var(--color-border);
  border-radius:var(--radius-lg);margin-bottom:16px;overflow:hidden;
}
.form-section-header{
  padding:14px 20px;border-bottom:1px solid var(--rl-grey-200);
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  user-select:none;
}
.form-section-title{
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--color-text-muted);
}
.form-section-body{padding:20px;}
.form-section-toggle{color:var(--rl-grey-400);font-size:12px;transition:transform 0.2s;}
.form-section-body.collapsed{display:none;}

/* ─── Parts repeater ────────────────────────────────────────────────────────── */
.part-block{
  border:1px solid var(--rl-grey-200);border-radius:var(--radius-md);
  padding:16px;margin-bottom:12px;position:relative;background:#FAFAFA;
}
.part-label{
  font-size:11px;font-weight:700;color:var(--rl-red);
  letter-spacing:0.5px;margin-bottom:12px;
}
.part-remove{
  position:absolute;top:12px;right:12px;background:none;
  border:none;color:var(--rl-grey-400);font-size:16px;
  cursor:pointer;line-height:1;padding:2px 4px;
}
.part-remove:hover{color:var(--rl-red);}

/* ─── Notes / ticket notes ──────────────────────────────────────────────────── */
.note-block{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--rl-grey-200);
}
.note-block:last-child{border-bottom:none;}
.note-time-field{flex-shrink:0;width:160px;}
.note-comment-field{flex:1;}
.note-remove{background:none;border:none;color:var(--rl-grey-400);cursor:pointer;padding:8px 4px;font-size:16px;}
.note-remove:hover{color:var(--rl-red);}
@media(max-width:600px){
  .note-block{flex-direction:column;}
  .note-time-field{width:100%;}
}

/* ─── Form footer / actions ─────────────────────────────────────────────────── */
.form-actions{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding-top:20px;border-top:1px solid var(--rl-grey-200);
  margin-top:20px;
}
.form-actions-right{margin-left:auto;display:flex;gap:8px;}

/* ─── Auth / login page ─────────────────────────────────────────────────────── */
.auth-page{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--rl-nav);padding:24px;
}
.auth-card{
  background:white;border-radius:var(--radius-lg);
  padding:32px;width:100%;max-width:380px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.auth-logo{text-align:center;margin-bottom:24px;}
/* Login logo image — natural aspect ratio, max width constrained to card */
.auth-logo-img{
  width:auto;
  max-width:200px;
  height:auto;
  display:block;
  margin:0 auto;
  object-fit:contain;
}
.auth-title{font-size:18px;font-weight:700;color:var(--rl-charcoal);margin-bottom:6px;}
.auth-subtitle{font-size:13px;color:var(--color-text-muted);margin-bottom:24px;}

/* ─── Alerts ────────────────────────────────────────────────────────────────── */
.alert{
  padding:12px 16px;border-radius:var(--radius-md);
  font-size:13px;margin-bottom:16px;line-height:1.5;
}
.alert-success{background:#D4EDDA;color:#155724;border:1px solid #C3E6CB;}
.alert-error  {background:var(--rl-red-muted);color:var(--rl-red-dark);border:1px solid #F5C6CB;}
.alert-info   {background:#EBF4FF;color:#1A56DB;border:1px solid #BFDBFE;}
.alert-warning{background:#FFF3CD;color:#7A5700;border:1px solid #FFCC00;}

/* ─── Empty state ───────────────────────────────────────────────────────────── */
.empty-state{
  text-align:center;padding:48px 24px;
  color:var(--color-text-muted);
}
.empty-state-icon{font-size:36px;margin-bottom:12px;}
.empty-state-title{font-size:15px;font-weight:700;color:var(--rl-charcoal);margin-bottom:6px;}

/* ─── Spinner ───────────────────────────────────────────────────────────────── */
.spinner{
  width:20px;height:20px;border:2.5px solid var(--rl-grey-300);
  border-top-color:var(--rl-red);border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);
  z-index:200;display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal{
  background:white;border-radius:var(--radius-lg);
  padding:24px;width:100%;max-width:440px;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.modal-title{font-size:16px;font-weight:700;margin-bottom:8px;}
.modal-body{font-size:13px;color:var(--color-text-muted);margin-bottom:20px;line-height:1.55;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;}

/* ─── Utilities ─────────────────────────────────────────────────────────────── */
.text-muted{color:var(--color-text-muted);}
.text-error{color:var(--rl-red);}
.text-sm{font-size:12px;}
.text-xs{font-size:11px;}
.font-mono{font-family:var(--font-mono);}
.mt-2{margin-top:8px;}
.mt-4{margin-top:16px;}
.hidden{display:none!important;}
.flex{display:flex;}
.items-center{align-items:center;}
.gap-2{gap:8px;}
.gap-4{gap:16px;}