/* Basic layout and styles for File Tracking System sample */
:root{--primary:#0f62fe;--muted:#6b7280;--bg:#f7fafc}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:#111}
.header{background:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e9ef}
.brand{font-weight:700;color:var(--primary)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:#fff;border-radius:10px;padding:18px;border:1px solid #e6e9ef;box-shadow:0 2px 6px rgba(15,22,39,0.03)}
.grid{display:grid;grid-template-columns:1fr 3fr;gap:18px}
.nav{min-height:300px;padding:12px}
.nav ul{list-style:none;padding:0;margin:0}
.nav li{padding:10px;border-radius:6px;margin-bottom:6px;color:var(--muted);cursor:pointer}
.nav li.active{background:linear-gradient(90deg, rgba(15,98,254,0.06), rgba(15,98,254,0.02));color:var(--primary);font-weight:600}
.header-right{display:flex;gap:12px;align-items:center;color:var(--muted)}
.kpi{display:flex;gap:12px;flex-wrap:wrap}
.kpi .item{background:#fff;padding:12px;border-radius:8px;min-width:140px;border:1px solid #eef2ff}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th, .table td{padding:10px;border-bottom:1px solid #f1f5f9;text-align:left;font-size:14px}
.btn{background:var(--primary);color:#fff;padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.input, textarea, select{padding:8px;border:1px solid #e6e9ef;border-radius:6px;width:100%}
.header .user{display:flex;gap:10px;align-items:center}
.hint{color:var(--muted);font-size:13px}
.small{font-size:13px;color:var(--muted)}
.flex{display:flex;gap:10px;align-items:center}
.footer{margin-top:20px;text-align:center;color:var(--muted);font-size:13px}
@media(max-width:900px){.grid{grid-template-columns:1fr;}}
.unread-row {
    font-weight: bold !important;
}

.scrolling-text {
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hides content outside the element */
  animation: marquee-animation 20s linear infinite; /* Defines the animation */
  color: white;
}

@keyframes marquee-animation {
  0% {
    transform: translateX(100%); /* Starts off-screen to the right */
  }
  100% {
    transform: translateX(-100%); /* Ends off-screen to the left */
  }
}