:root{
  --primary: #001f3f; /* Navy blue */
  --secondary: #6c757d; /* Gray */
  --bg: #f5f6f8;
  --text: #222;
  --white: #fff;
}
*{ box-sizing: border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); }
.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background: var(--primary); color: var(--white);
}
.app-header .brand{ display:flex; flex-direction:column; }
.org-name{ font-size: 20px; font-weight:700; letter-spacing: .3px; }
.tagline{ font-size: 12px; opacity:.85; }
.user-box .btn{ margin-left:8px; padding:8px 12px; color: var(--white); text-decoration:none; border:1px solid rgba(255,255,255,.5); border-radius:10px; }
.user-box .btn.secondary{ background: var(--secondary); border-color: var(--secondary); }

.app-wrapper{ display:flex; min-height: calc(100vh - 100px); }
.sidebar{ width: 260px; background: #0a2a55; color: var(--white); padding:16px; }
.sidebar a{ display:block; padding:10px 12px; color:#e6eefc; text-decoration:none; border-radius:8px; margin-bottom:6px; }
.sidebar a:hover{ background:#123766; }
.content{ flex:1; padding:20px; }

.card{ background: var(--white); border-radius:14px; padding:16px; box-shadow: 0 4px 18px rgba(0,0,0,.06); margin-bottom:16px; }
.grid{ display:grid; gap:16px; }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat{ display:flex; flex-direction:column; }
.stat .label{ color: var(--secondary); font-size:13px; }
.stat .value{ font-size:28px; font-weight:700; color: var(--primary); }

table{ width:100%; border-collapse:collapse; background: var(--white); border-radius:14px; overflow:hidden; }
th, td{ padding:10px 12px; border-bottom:1px solid #e9eef3; }
th{ background:#f0f5ff; text-align:left; }
tr:hover td{ background:#f9fbff; }

input, select, textarea{ width:100%; padding:10px 12px; border:1px solid #d5dbe3; border-radius:10px; }
label{ display:block; font-size:13px; color:#444; margin-bottom:6px; }
.btn-primary{ background: var(--primary); color:var(--white); border:0; border-radius:10px; padding:10px 14px; cursor:pointer; }
.btn-outline{ background: transparent; color: var(--primary); border:1px solid var(--primary); border-radius:10px; padding:9px 14px; cursor:pointer; }
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.mt-2{ margin-top:8px;} .mt-3{ margin-top:12px;} .mt-4{ margin-top:16px;}
.status-badge{ padding:4px 8px; border-radius:8px; font-size:12px; background:#eef2ff; color:#152b68; }

/* Footer Styling - Fixed Bottom */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, #007BFF, #0056b3);
  color: white;
  text-align: center;
  padding: 8px 10px;   /* reduced padding */
  font-size: 14px;
  line-height: 1.0;   /* reduced line spacing */
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
  z-index: 999;
}

.app-footer a {
  color: #FFD700;
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

.app-footer .contact {
  margin-bottom: 2px;   /* smaller gap between contact and copyright */
}

.app-footer .copy {
  font-size: 12px;
  color: #f0f0f0;
}



/* Add space so content is not hidden behind footer */
body {
    padding-bottom: 60px; /* equal or slightly more than footer height */
}