:root{
  --yf-blue:#2B5DAA;
  --yf-green:#37B34A;
  --yf-dark:#0B1B3A;
  --yf-bg:#F4F7FB;

  --yf-card:rgba(255,255,255,0.90);
  --yf-topbar:rgba(255,255,255,0.72);
  --yf-border:rgba(10,40,80,0.10);

  --yf-shadow:0 18px 34px rgba(10,40,80,0.10);
  --yf-shadow-soft:0 10px 22px rgba(10,40,80,0.08);
  --yf-radius:18px;
}

/* ---------- Page background ---------- */
body{
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(55,179,74,0.12), transparent 50%),
    radial-gradient(900px 600px at 90% 20%, rgba(43,93,170,0.12), transparent 45%),
    linear-gradient(180deg, #f7fbff 0%, var(--yf-bg) 65%, #f7fbff 100%);
  min-height:100vh;
  color:var(--yf-dark);
}

/* Subtle illustration */
.yardflow-bg{ position:relative; background-color:transparent; }
.yardflow-bg::after{
  content:"";
  position:fixed;
  bottom:-44px;
  right:-68px;
  width:760px;
  height:520px;
  background-image:url("/static/yardflow_truck_2.png");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.085;
  filter:blur(0.2px);
  pointer-events:none;
  z-index:0;
}

/* ---------- Shell ---------- */
.yf-shell{ max-width:1200px; margin:0 auto; padding:0 18px; }

/* ---------- Topbar ---------- */
.yf-topbar{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: var(--yf-topbar);
  border-bottom:1px solid rgba(10,40,80,0.08);
}

.yf-topbar-inner{
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.yf-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 240px;
}

.yf-brand img{ height:36px; width:auto; }
.yf-brand .title{
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.1;
  font-size:1.06rem;
  color:var(--yf-dark);
}

.yf-muted{ color: rgba(11,27,58,0.55) !important; }
.yf-small{ font-size:.9rem; }

/* Pills */
.yf-pill{
  background: rgba(255,255,255,0.82);
  border:1px solid rgba(10,40,80,0.10);
  border-radius:999px;
  padding:8px 12px;
  box-shadow: var(--yf-shadow-soft);
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* Nav button group */
.yf-nav{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

/* ---------- Main ---------- */
main{ position:relative; z-index:1; padding:18px 0 36px; }

/* ---------- Cards ---------- */
.yf-card{
  background: var(--yf-card);
  border: 1px solid rgba(10,40,80,0.10);
  border-radius: var(--yf-radius);
  box-shadow: var(--yf-shadow);
  overflow: hidden;
}

.yf-card-header{
  padding: 18px 20px;
  border-bottom: 1px solid rgba(10,40,80,0.08);
  background: rgba(255,255,255,0.60);
}

.yf-card-body{ padding: 16px 20px 18px; }

.yf-card-header h1,
.yf-card-header h2,
.yf-card-header h3{
  margin:0;
  line-height:1.15;
}

.yf-card-header .sub{
  margin-top:.35rem;
  line-height:1.3;
  color: rgba(11,27,58,0.55);
}

/* Tables inside cards */
.yf-table-wrap{
  border: 1px solid rgba(10,40,80,0.08);
  border-radius: 14px;
  overflow:auto;
  background: rgba(255,255,255,0.65);
}
.yf-table-wrap .table{ margin:0; }
.yf-table-wrap thead th{
  font-size:.86rem;
  color: rgba(11,27,58,0.70);
  border-bottom-color: rgba(10,40,80,0.10) !important;
}
.yf-table-wrap tbody td{
  border-top-color: rgba(10,40,80,0.08) !important;
}

/* Chips */
.yf-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(10,40,80,0.10);
  box-shadow: 0 8px 18px rgba(10,40,80,0.06);
  font-size:.92rem;
}

/* Alerts */
.alert{ border-radius:14px; }

/* Make disabled nav still look intentional */
.btn.disabled, .btn:disabled{ opacity: .45 !important; cursor:not-allowed !important; }

/* ---------- YardFlow buttons ---------- */
.btn-yf-primary{
  background: linear-gradient(135deg, var(--yf-green), #2a9b3a);
  border:none;
  color:#fff;
  box-shadow: 0 10px 22px rgba(55,179,74,0.18);
}
.btn-yf-primary:hover{ filter:brightness(1.02); color:#fff; }

/* Alias: a kódban sok helyen ez szerepel, ezért NEM töröljük */
.btn-yf-success{
  background: linear-gradient(135deg, var(--yf-green), #2a9b3a);
  border:none;
  color:#fff;
  box-shadow: 0 10px 22px rgba(55,179,74,0.18);
}
.btn-yf-success:hover{ filter:brightness(1.02); color:#fff; }

.btn-yf-blue{
  background: linear-gradient(135deg, var(--yf-blue), #1e4a92);
  border:none;
  color:#fff;
  box-shadow: 0 10px 22px rgba(43,93,170,0.18);
}
.btn-yf-blue:hover{ filter:brightness(1.02); color:#fff; }

/* Fix: outline-secondary túl "lapos" volt a glass háttéren */
.btn-outline-secondary{
  border-color: rgba(11,27,58,0.25);
  color: rgba(11,27,58,0.82);
  background: rgba(255,255,255,0.65);
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,0.85);
  color: rgba(11,27,58,0.92);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .yf-shell{ max-width:100%; }
  .yardflow-bg::after{ width:620px; height:420px; opacity:0.10; right:-120px; bottom:-70px; }
  .yf-brand{ min-width: 180px; }
}

@media (max-width: 520px){
  .yf-pill{ width:100%; justify-content:space-between; }
  .yf-nav{ width:100%; }
}

.yf-week-grid { display: grid; grid-template-columns: 76px repeat(7, 1fr); gap: 6px; }
.yf-day-head, .yf-time-head {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  padding: .6rem .65rem;
  position: sticky; top: 0; z-index: 3;
  backdrop-filter: blur(10px);
}
.yf-time-col { display: grid; grid-template-rows: repeat(24, 64px); gap: 6px; }
.yf-day-col  { display: grid; grid-template-rows: repeat(24, 64px); gap: 6px; }

.yf-time-cell {
  display:flex; align-items:center; justify-content:center;
  font-size: .85rem; color: rgba(15,23,42,0.65);
  border-radius: 12px; border: 1px solid rgba(15,23,42,0.07);
  background: rgba(255,255,255,0.60);
}
.yf-slot {
  position: relative;
  border-radius: 12px;
  border: 1px dashed rgba(43,93,170,0.18);
  background: rgba(255,255,255,0.50);
  transition: filter .12s ease;
  user-select: none; touch-action: none;
}
.yf-slot:hover { filter: brightness(1.03); }
.yf-slot.yf-slot-disabled {
  background: rgba(15,23,42,0.05);
  border-style: solid; border-color: rgba(15,23,42,0.10);
}
.yf-slot.yf-slot-selected {
  border-style: solid;
  border-color: rgba(55,179,74,0.45);
  box-shadow: 0 10px 18px rgba(55,179,74,0.10);
}

.yf-event {
  position:absolute; left: 6px; right: 6px; top: 6px; bottom: 6px;
  border-radius: 12px;
  border: 1px solid rgba(43,93,170,0.25);
  padding: .25rem .4rem;
  display:flex; align-items:center; justify-content: space-between; gap: .35rem;
  overflow:hidden; cursor:pointer;
}

.yf-event.pending {
  background: linear-gradient(180deg, rgba(245,158,11,0.20), rgba(245,158,11,0.08));
  border-color: rgba(245,158,11,0.35);
}
.yf-event.approved {
  background: linear-gradient(180deg, rgba(34,197,94,0.20), rgba(34,197,94,0.08));
  border-color: rgba(34,197,94,0.35);
}
.yf-event.rejected {
  background: linear-gradient(180deg, rgba(100,116,139,0.18), rgba(100,116,139,0.08));
  border-color: rgba(100,116,139,0.30);
  opacity: 0.75;
}

.yf-event .mini { font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yf-count {
  font-weight: 800; font-size:.8rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(55,179,74,0.20);
  border: 1px solid rgba(55,179,74,0.25);
}
@media (max-width: 768px) { .yf-week-grid { min-width: 860px; } }

@media (max-width: 1400px) {
  .yf-time-col, .yf-day-col { grid-template-rows: repeat(24, 56px); gap: 5px; }
}
@media (max-width: 992px) {
  .yf-time-col, .yf-day-col { grid-template-rows: repeat(24, 52px); gap: 5px; }
}
/* szélesebb, de nem “sarokig” */
.yf-shell{
  max-width: 1520px;   /* eddig valószínű kisebb */
  margin: 0 auto;
  padding: 0 18px;
}

/* ultra-wide monitorokra még egy kicsi */
@media (min-width: 1600px){
  .yf-shell{ max-width: 1680px; }
}
/* több foglalás egy idősávban: stack */
/* több foglalás egy idősávban: oszlopos stack */
.yf-event-stack{
  position:absolute; left:6px; right:6px; top:6px; bottom:6px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 oszlop */
  gap:6px;
  align-items:stretch;
}

/* mini kártya: örökölje a státusz színeket */
.yf-event-mini{
  border-radius: 12px;
  border: 1px solid rgba(43,93,170,0.20);
  padding: .22rem .35rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2px;
  cursor:pointer;
  overflow:hidden;
  min-height: 0;
}

/* SZÍNEK VISSZA: ugyanaz, mint .yf-event */
.yf-event-mini.pending{
  background: linear-gradient(180deg, rgba(245,158,11,0.20), rgba(245,158,11,0.08));
  border-color: rgba(245,158,11,0.35);
}
.yf-event-mini.approved{
  background: linear-gradient(180deg, rgba(34,197,94,0.20), rgba(34,197,94,0.08));
  border-color: rgba(34,197,94,0.35);
}
.yf-event-mini.rejected{
  background: linear-gradient(180deg, rgba(100,116,139,0.18), rgba(100,116,139,0.08));
  border-color: rgba(100,116,139,0.30);
  opacity: .75;
}

/* kompakt tipó */
.yf-event-mini .mini{
  font-size: .78rem;              /* kisebb */
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yf-event-mini .mini2{
  font-size: .74rem;
  line-height: 1.05;
  color: rgba(15,23,42,0.60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* +N jelzés */
.yf-more{
  border-radius: 12px;
  border: 1px dashed rgba(15,23,42,0.18);
  background: rgba(255,255,255,0.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: .82rem;
  color: rgba(15,23,42,0.75);
}

/* 1 oszlop mobilon */
@media (max-width: 992px){
  .yf-event-stack{ grid-template-columns: 1fr; }
}
.yf-count{
  top: 6px;
  right: 6px;
  background: rgba(55,179,74,0.22);
}
.yf-truck-flag{
  font-size: .72rem;
  font-weight: 800;
  padding: .05rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.12);
  background: rgba(255,255,255,0.65);
  white-space: nowrap;
}
.yf-truck-flag--alert{
  border-color: rgba(220,53,69,0.25);
}
.yf-flow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.yf-step{
  display:flex;
  align-items:center;
  gap:8px;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.65);
  font-weight:800;
  font-size:.78rem;
  color: rgba(15,23,42,0.75);
}

.yf-step .dot{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(15,23,42,0.25);
}

.yf-step.done{
  border-color: rgba(55,179,74,0.25);
  background: rgba(55,179,74,0.12);
  color: rgba(15,23,42,0.85);
}
.yf-step.done .dot{ background: rgba(55,179,74,0.85); }

.yf-step.active{
  border-color: rgba(43,93,170,0.28);
  background: rgba(43,93,170,0.12);
  color: rgba(15,23,42,0.90);
  box-shadow: 0 10px 18px rgba(43,93,170,0.10);
}
.yf-step.active .dot{ background: rgba(43,93,170,0.90); }

.yf-step.bad{
  border-color: rgba(220,53,69,0.25);
  background: rgba(220,53,69,0.10);
  color: rgba(15,23,42,0.85);
}
.yf-step.bad .dot{ background: rgba(220,53,69,0.85); }

.yf-step .ts{
  font-weight:600;
  color: rgba(15,23,42,0.55);
  margin-left: 4px;
  white-space: nowrap;
}
/* --- Warehouse "Új kamion érkezett" riasztás --- */
.yf-alert{
  padding: 14px 18px;
  border: 1px solid transparent;
  box-shadow: 0 12px 30px rgba(2,6,23,.14);
}

/* ez a lényeg: mostantól PIROS */
.yf-alert-danger{
  color: #fff !important;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg,
    rgba(220, 38, 38, .96),
    rgba(185, 28, 28, .96)
  );
  position: relative;
  overflow: hidden;
}

/* kis “riasztó fény” csík */
.yf-alert-danger::before{
  content:"";
  position:absolute;
  inset:-40% -20%;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.22), transparent 45%);
  transform: rotate(10deg);
  pointer-events:none;
}

/* finom pulzálás, hogy “észrevedd” */
@keyframes yfPulse{
  0%   { box-shadow: 0 12px 30px rgba(185,28,28,.25); }
  50%  { box-shadow: 0 18px 44px rgba(185,28,28,.45); }
  100% { box-shadow: 0 12px 30px rgba(185,28,28,.25); }
}
.yf-alert-danger{
  animation: yfPulse 1.2s ease-in-out infinite;
}

/* a Láttam gomb legyen kontrasztos */
#btnAckArrival{
  font-weight: 700;
  border-radius: 14px;
}


/* ===== Calendar hard-stop overrides ===== */
#weekGrid .yf-slot{ overflow:hidden; }
#weekGrid .yf-event{ position:absolute; inset:3px; min-height:0; }
#weekGrid .yf-event-stack{
  position:absolute;
  inset:3px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:3px;
  align-items:stretch;
  justify-items:stretch;
  overflow:hidden;
}
#weekGrid .yf-event-mini{
  min-height:0;
  height:100%;
  max-height:100%;
  overflow:hidden;
}

/* =========================
   SINGLE EVENT (nagy kártya)
   ========================= */

#weekGrid .yf-event .yf-plate{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .4px;
}

#weekGrid .yf-event .yf-company{
  font-size: 12px;
}

#weekGrid .yf-event .yf-badge{
  font-size: 11px;
  padding: 2px 6px;
}

/* =========================
   STACKED EVENTS (2 db)
   ========================= */

#weekGrid .yf-event-mini .yf-plate{
  font-size: 12px;
  font-weight: 700;
}

#weekGrid .yf-event-mini .yf-company{
  font-size: 10px;
}

#weekGrid .yf-event-mini .yf-badge{
  font-size: 9px;
  padding: 1px 5px;
}