/* Prevent padding/borders from increasing element width (fixes tile overlap) */
*, *::before, *::after { box-sizing: border-box; }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  background:#f4f6fb;
  color:#111;
}

.header{
  background:#082650;
  padding:16px 20px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;

  /* Mobile/tablet: allow header content to wrap instead of squashing */
  flex-wrap:wrap;
  gap:10px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.header-admin-btn{
  display:inline-block;
  background:#007A80;
  border:1px solid #007A80;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:9px 14px;
  border-radius:12px;
  line-height:1;
  box-shadow:0 4px 10px rgba(0,0,0,.16);
}

.header-admin-btn:hover{
  filter:brightness(.96);
}

.header-signout-link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:18px;
}

.card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:16px;
}

/* ===== Dashboard grid: responsive ===== */
.grid{
  display:grid;
  /* Desktop layout: four cards across on wider screens. */
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
  justify-content:stretch;
  align-content:start;
  align-items:stretch;
}

/* ===== Tiles ===== */
.tile{
  position:relative;
  overflow:hidden;

  width:100%;
  max-width:none;
  min-height:165px;     /* consistent card height */
  padding:18px;         /* a touch more breathing space */
  border-radius:18px;

  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  /* #007A80 border + bevel: inset highlights on top/left, shadows on bottom/right */
  border:2px solid #007A80;
  box-shadow:
    inset 0  4px 0   rgba(255,255,255,.45),   /* top highlight  */
    inset 0 -4px 0   rgba(0,0,0,.35),          /* bottom shadow  */
    inset  4px 0 0   rgba(255,255,255,.25),    /* left highlight */
    inset -4px 0 0   rgba(0,0,0,.28),          /* right shadow   */
    0 8px 22px rgba(0,0,0,.22);                /* outer drop shadow */
}

.tile:hover{
  border-color:#33c4f5;
  box-shadow:
    inset 0  3px 0   rgba(255,255,255,.36),
    inset 0 -3px 0   rgba(0,0,0,.22),
    inset  3px 0 0   rgba(255,255,255,.18),
    inset -3px 0 0   rgba(0,0,0,.16),
    0 10px 26px rgba(0,0,0,.22);
}

.tile a{
  background:#007A80 !important;
  border:1px solid #007A80 !important;
  color:#fff !important;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  display:inline-block;
}

.badge{
  display:inline-block;
  background:rgba(255,255,255,.22);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
}

/* ===== Tile icon: crisp outline only (no frosted background, no glow) ===== */
.tile-icon{
  position:absolute;
  right:16px;        /* icon on the right */
  top:16px;
  left:auto;

  padding:0;
  background:none !important;
  backdrop-filter:none !important;
  opacity:1;
}

.tile-icon img{
  width:52px;         /* slightly bigger looks nicer on wide cards */
  height:52px;
  display:block;
  object-fit:contain;

  /* IMPORTANT: no filter by default */
  filter:none;
}

.tile-icon svg{
  width:44px;
  height:44px;
  display:block;
}

.tile-content{
  position:relative;
  z-index:1;
  padding-top:0;
  padding-right:76px;  /* make room so text doesn't collide with icon */
}

.small{
  font-size:13px;
  color:#5b647a;
}

form .row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

input,select{
  padding:10px 12px;
  border:1px solid #d7dbe8;
  border-radius:12px;
  font-size:15px;
}

button{
  padding:10px 12px;
  border:1px solid #007A80;
  border-radius:12px;
  background:#007A80;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

button:hover{ background:#007EA8; }

.msg{
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0;
  background:#fff7d6;
  border:1px solid #ffe39a;
}

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,.table td{
  padding:10px;
  border-bottom:1px solid #eef1f8;
  text-align:left;
}

/* ===== Login: Microsoft button sizing (not huge) ===== */
.ms-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:100%;
  max-width:300px;
  margin:0 auto;

  padding:10px 12px;
  background:#007A80;
  color:#fff;
  text-decoration:none;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  line-height:1;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.ms-btn:hover{ filter:brightness(0.98); }

/* ===== Mobile/tablet extras ===== */

/* Stop tables breaking page width on phones (wrap your table in <div class="table-wrap"> ... ) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table{ min-width:700px; }

/* Step the cards down neatly on smaller screens */
@media (max-width: 1120px){
  .grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Slightly tighter spacing on small screens */
@media (max-width: 620px){
  .grid{ grid-template-columns:1fr; }
  .container{ padding:12px; }
  .header{ padding:12px 14px; }
  .tile{ padding:14px; min-height:140px; }
  .tile-icon{ right:12px; top:12px; }
  .tile-icon img{ width:46px; height:46px; }
  .tile-content{ padding-right:66px; } /* still leaves room for icon */
}

/* Prevent iOS zoom on inputs */
input, select, button{ font-size:16px; }
.suite-brand-logo {
  display:block;
  width:clamp(160px, 28vw, 215px);
  height:auto;
  border-radius:8px;
}