:root{
  --utc-blue:#1e3a5f;
  --utc-blue-dark:#0f243e;
  --utc-blue-soft:#eaf3ff;

  --utc-gold:#f2b01e;
  --utc-red:#e84c4c;

  --utc-bg:#f5fbff;
  --utc-card:#ffffff;
  --utc-border:#e2e8f0;
  --utc-text:#0f172a;

  --utc-shadow:0 10px 30px rgba(0,0,0,.10);
  --utc-radius:16px;
}

html,body{height:100%}
body{
  font-family:'Kanit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg, var(--utc-bg), #ffffff 45%, #ffffff);
  color:var(--utc-text);
}

/* ===== Navbar UTC ===== */
.utc-navbar{
  background:linear-gradient(90deg, var(--utc-blue-dark), var(--utc-blue));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.utc-navbar .navbar-brand{
  color:#fff !important;
  font-weight:800;
  letter-spacing:.2px;
}
.utc-navbar .utc-sub{
  font-weight:500;
  color:rgba(255,255,255,.78);
  font-size:.85rem;
}
.utc-navbar .nav-link,
.utc-navbar .btn,
.utc-navbar .text-light{
  color:#fff !important;
}
.utc-navbar .btn-outline-light{
  border-color:rgba(255,255,255,.55);
}
.utc-navbar .btn-outline-light:hover{
  background:rgba(255,255,255,.12);
}

/* ===== Brand logo ===== */
.utc-logo{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  padding:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

@media (max-width: 575.98px){
  .utc-navbar .container{
    align-items:flex-start;
    gap:10px;
  }
  .utc-navbar .navbar-brand{
    min-width:0;
    max-width:100%;
  }
  .utc-navbar .navbar-brand > div{
    min-width:0;
  }
  .utc-navbar .navbar-brand span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .utc-navbar .ms-auto{
    margin-left:0 !important;
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .utc-navbar .btn{
    min-height:38px;
    padding:.45rem .7rem;
  }
}

/* ===== Cards / Buttons ===== */
.card{
  border:1px solid var(--utc-border);
  border-radius:var(--utc-radius);
  box-shadow:var(--utc-shadow);
}
.card .card-header{
  border-bottom:1px solid var(--utc-border);
}
.btn{
  border-radius:12px;
  font-weight:600;
}
.btn-primary{
  background:var(--utc-blue);
  border-color:var(--utc-blue);
}
.btn-primary:hover{
  background:var(--utc-blue-dark);
  border-color:var(--utc-blue-dark);
}
.btn-outline-primary{
  color:var(--utc-blue);
  border-color:rgba(30,58,95,.35);
}
.btn-outline-primary:hover{
  background:var(--utc-blue);
  border-color:var(--utc-blue);
  color:#fff;
}

/* badges สถานะ */
.badge.text-bg-secondary{ background:#64748b !important; }
.badge.text-bg-warning{ background:var(--utc-gold) !important; color:#1b1b1b !important; }
.badge.text-bg-success{ background:#0ea34a !important; }
.badge.text-bg-danger{ background:var(--utc-red) !important; }

/* ตาราง */
.table thead th{
  font-weight:700;
}
.table-hover tbody tr:hover{
  background:rgba(30,58,95,.05);
}

/* ===== Page container spacing ===== */
.utc-container{
  padding-top:22px;
  padding-bottom:28px;
}

/* ===== 작은 breadcrumb-like info box ===== */
.utc-info{
  background:var(--utc-blue-soft);
  border:1px dashed rgba(30,58,95,.25);
  color:var(--utc-blue-dark);
  border-radius:14px;
  padding:14px 16px;
}

/* ===== Notifications ===== */
.notification-head{
  align-items:flex-start;
  display:flex;
  gap:16px;
  justify-content:space-between;
}
.notification-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.notification-stats{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.notification-stat{
  background:#fff;
  border:1px solid var(--utc-border);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:76px;
  padding:14px 16px;
}
.notification-stat-value{
  color:var(--utc-blue-dark);
  font-size:1.55rem;
  font-weight:800;
  line-height:1;
}
.notification-stat-label{
  color:#64748b;
  font-size:.88rem;
}
.notification-panel{
  background:#fff;
  border:1px solid var(--utc-border);
  border-radius:16px;
  box-shadow:var(--utc-shadow);
  overflow:hidden;
}
.notification-list{
  display:grid;
}
.notification-item{
  align-items:flex-start;
  border-bottom:1px solid var(--utc-border);
  display:grid;
  gap:14px;
  grid-template-columns:12px minmax(0,1fr) auto;
  padding:16px;
}
.notification-item:last-child{
  border-bottom:0;
}
.notification-item.is-unread{
  background:linear-gradient(90deg, rgba(234,243,255,.96), #fff 56%);
}
.notification-marker{
  background:#cbd5e1;
  border-radius:999px;
  height:10px;
  margin-top:8px;
  width:10px;
}
.notification-item.is-unread .notification-marker{
  background:var(--utc-gold);
  box-shadow:0 0 0 4px rgba(242,176,30,.18);
}
.notification-title{
  color:var(--utc-blue-dark);
  font-weight:800;
}
.notification-time{
  color:#64748b;
  flex:0 0 auto;
  font-size:.85rem;
  white-space:nowrap;
}
.notification-message{
  color:#475569;
  font-size:.94rem;
  line-height:1.55;
  margin-top:4px;
}
.notification-tools{
  align-items:flex-end;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.notification-empty{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:220px;
  justify-content:center;
  padding:28px 16px;
  text-align:center;
}
.notification-empty-icon{
  align-items:center;
  background:var(--utc-blue-soft);
  border:1px solid rgba(30,58,95,.16);
  border-radius:999px;
  color:var(--utc-blue);
  display:flex;
  font-size:1.4rem;
  font-weight:800;
  height:52px;
  justify-content:center;
  width:52px;
}

@media (max-width: 767.98px){
  .notification-head{
    flex-direction:column;
  }
  .notification-actions{
    justify-content:flex-start;
    width:100%;
  }
  .notification-actions .btn,
  .notification-actions form{
    flex:1 1 auto;
  }
  .notification-actions .btn{
    width:100%;
  }
  .notification-stats{
    grid-template-columns:1fr;
  }
  .notification-item{
    grid-template-columns:12px minmax(0,1fr);
  }
  .notification-tools{
    align-items:flex-start;
    flex-direction:row;
    flex-wrap:wrap;
    grid-column:2;
  }
}

/* ===== FullCalendar tweaks ===== */
.fc .fc-toolbar-title{
  font-size:1.15rem;
  font-weight:800;
  color:var(--utc-blue-dark);
}
.fc .fc-button{
  border-radius:12px !important;
  font-weight:700;
}