:root{
  --navy:#1b2a6b;
  --sky:#f7fbff;

  --cloud-blue:#7fb2d6;
  --cloud-lav:#8b92e8;
  --cloud-grey:#aeb4c9;

  --info:#7fb2d6;
  --ink:#101318;

  --gap:10px;
  --stroke:5;
  --dot:10px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100svh;
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--sky);
  color:var(--ink);
  overflow-x:hidden;
}

/* ===== Stage + moving clouds ===== */
.stage{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding: clamp(24px, 5vw, 56px) 16px;
  overflow:hidden;
}

.cloud-layer{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.cloud{
  position:absolute;
  width:420px;
  height:220px;
  border-radius:140px;
  opacity:.95;
  filter: drop-shadow(0 10px 0 rgba(0,0,0,0.03));
  animation: drift var(--dur, 28s) ease-in-out infinite alternate;
  transform: translate3d(0,0,0) scale(var(--s, 1));
  will-change: transform;
}
.cloud::before,
.cloud::after{
  content:"";
  position:absolute;
  background:inherit;
  border-radius:999px;
}
.cloud::before{ width:62%; height:70%; left:6%; top:-18%; }
.cloud::after { width:55%; height:62%; right:8%; top:-8%; }

@keyframes drift{
  0%   { transform: translate3d(var(--x1, -12px), var(--y1, 10px), 0) scale(var(--s,1)); }
  100% { transform: translate3d(var(--x2, 18px),  var(--y2, -12px), 0) scale(var(--s,1)); }
}

.c1{ background:var(--cloud-blue); left:-130px; top:70px;    --s:1.05; --dur:34s; --x1:-30px; --x2:30px;  --y1:10px;  --y2:-10px;}
.c2{ background:var(--cloud-lav);  left:130px;  top:80px;    --s:.95;  --dur:26s; --x1:18px;  --x2:-22px; --y1:14px;  --y2:-8px;}
.c3{ background:var(--cloud-blue); right:-170px; top:80px;   --s:1.10; --dur:38s; --x1:26px;  --x2:-28px; --y1:8px;   --y2:-14px;}
.c4{ background:var(--cloud-grey); left:-60px;  bottom:70px; --s:.90;  --dur:30s; --x1:-18px; --x2:24px;  --y1:-8px;  --y2:12px;}
.c5{ background:var(--cloud-blue); left:170px;  bottom:50px; --s:.95;  --dur:24s; --x1:22px;  --x2:-18px; --y1:-6px;  --y2:10px;}
.c6{ background:var(--cloud-grey); right:120px; bottom:60px; --s:1.10; --dur:36s; --x1:-24px; --x2:28px;  --y1:-10px; --y2:14px;}

/* ===== Center "phone" ===== */
.phone{
  width:min(520px, 92vw);
  background:var(--navy);
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 40px rgba(0,0,0,0.18);
  position:relative;
  z-index:2;
}

.card{
  background:#fff;
  border-radius:24px;
  padding:38px 28px 28px;
  text-align:center;
}

.logo{
  width:190px;
  max-width:60%;
  height:auto;
  display:block;
  margin:0 auto 18px;
}

.subtitle{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:6px 0 10px;
  color:#1f2430;
}

.title{
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight:400;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 18px;
  color:#0f141d;
}

/* ===== Contacts ===== */
.contacts{
  width:100%;
  max-width:520px;
  margin:10px auto 34px;
}

.top-row{
  display:flex;
  justify-content:center;
  gap:var(--gap);
  align-items:stretch;
}

.contact-box{
  background:var(--info);
  padding:10px 14px;
  font-size:clamp(12px, 2.2vw, 13px);
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:0 1 auto;
}

.email-row{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

.email{
  display:inline-block;
  background:var(--info);
  padding:10px 16px;
  font-size:clamp(12px, 2.4vw, 13px);
  font-weight:600;
  border-radius:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* ===== Mobile: stack boxes ===== */
@media (max-width: 420px){
  .top-row{
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .contact-box{
    width: min(320px, 100%);
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  .email{
    width: min(320px, 100%);
    white-space:normal;
  }
}

.section-title{
  font-size:22px;
  font-weight:700;
  margin:0 0 8px;
}

.fine{
  font-size:12px;
  color:#2a3242;
  margin:0;
}

.social{
  margin-top:10px;
  font-size:12px;
}
.social a{
  color:var(--navy);
  font-weight:600;
  text-decoration:none;
}
.social a:hover{ text-decoration:underline; }


.portal{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.portal-btn{
  display: inline-block;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

.portal-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.16);
}

.portal-btn:active{
  transform: translateY(0);
}

.portal-title {
  margin-bottom: 25px;
  font-weight: 700;
}
/* ===== Portal Bento ===== */

.bento-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.bento-card {
  position: relative;
  overflow: hidden;

  /* Theme colors */
  background: #ffffff;
  color: var(--ink);

  border-radius: 18px;
  padding: 20px;
  min-height: 180px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* Outline + separation */
  border: 2px solid rgba(27, 42, 107, 0.18); /* navy tint */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);

  transition: transform .2s ease, box-shadow .2s ease;
}

/* Glow overlay (uses your palette) */
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      520px circle at var(--x, 50%) var(--y, 50%),
      rgba(139, 146, 232, 0.20), /* cloud-lav */
      rgba(127, 178, 214, 0.12), /* cloud-blue */
      transparent 60%
    );

  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  border-color: rgba(27, 42, 107, 0.35);
}

.bento-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--navy);
}

.bento-card p {
  font-size: 13px;
  margin: 0;
  color: rgba(16, 19, 24, 0.85);
}

/* Button styling to match your Portal button look */
.bento-button {
  margin-top: 12px;
  padding: 10px 14px;

  background: var(--navy);
  color: #fff;

  border-radius: 10px;
  text-decoration: none;
  display: inline-block;

  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;

  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.bento-button:hover {
  background: #263b94;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,0.14);
}

.bento-button:active {
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}



/* ===== Time Entries Table Spacing ===== */

.time-entries-table {
  width: 100%;
  border-collapse: separate;   /* important */
  border-spacing: 0 10px;      /* vertical spacing between rows */
}

.time-entries-table th,
.time-entries-table td {
  padding: 10px 18px;          /* horizontal spacing between columns */
  text-align: left;
  white-space: nowrap;
}

.time-entries-table th {
  font-weight: 700;
  color: var(--navy);
}

/* Optional: make the big “Today’s Shift” card feel special */
@media (min-width: 1024px) {
  .bento-card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    border-width: 3px;
  }
}
.password-wrapper{
  display:flex;
  gap:10px;
  align-items:center;
}

.show-password-btn{
  background: rgba(27,42,107,0.08);
  border: 1px solid rgba(27,42,107,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* =========================
   MOBILE FIX: BENTO GRID
========================= */
@media (max-width: 820px){

  .bento-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bento-card{
    min-height: auto;
    padding: 16px;
  }

  .bento-card h3{
    font-size: 15px;
  }

  .bento-card p{
    font-size: 13px;
  }

  .bento-button{
    width: 100%;
    text-align: center;
  }
}