.dashboard-wrapper {
  padding: 30px;
}

.dashboard-wrapper h2 {
  margin-bottom: 30px;
  font-size: 28px;
  color: #333;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 20px;
  text-align: center;
}

.card h3 {
  font-size: 18px;
  color: #555;
  margin-bottom: 10px;
}

.card p {
  font-size: 22px;
  font-weight: bold;
  color: #0d6efd;
}
.admin-header {
  background: #111827;
  color: white;
  padding: 15px 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.admin-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.admin-brand {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
}

.admin-menu {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.admin-menu li {
  margin-left: 25px;
}

.admin-menu a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  transition: color 0.3s;
}

.admin-menu a:hover {
  color: #60a5fa;
}

.admin-content {
  padding: 30px;
  background: #f9fafb;
  min-height: calc(100vh - 70px);
}
.login-body {
  background: #f4f6f9;
  font-family: 'Segoe UI', sans-serif;
}

.login-container {
  max-width: 400px;
  margin: 100px auto;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.login-container h2 {
  margin-bottom: 20px;
}

.login-container input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.login-container button {
  width: 100%;
  padding: 12px;
  background: #0d6efd;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

.login-container button:hover {
  background: #0b5ed7;
}

.login-error {
  color: red;
  margin-bottom: 15px;
}
.error-box {
  background: #fff0f0;
  color: #d8000c;
  border: 1px solid #ffbaba;
  padding: 25px;
  max-width: 500px;
  margin: 100px auto;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.file-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.file-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.file-name {
  font-weight: 500;
  color: #333;
}

.file-download {
  text-decoration: none;
  background: #0d6efd;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.2s ease;
}

.file-download:hover {
  background: #0b5ed7;
}
.host-line-list {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.host-line-item {
  background: #fff;
  padding: 15px 20px;
  border-left: 5px solid #0d6efd;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  font-size: 15px;
  line-height: 1.6;
}

.host-line-item span {
  display: block;
  margin-bottom: 4px;
}
.host-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.action-btn {
  background: #0d6efd;
  color: white;
  padding: 10px 18px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s ease;
}

.action-btn:hover {
  background: #0b5ed7;
}

.action-btn.red {
  background: #dc3545;
}

.action-btn.red:hover {
  background: #c82333;
}
/* Host Grid for 3 Cards */
.host-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.host-box {
  flex: 1;
  min-width: 280px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.host-box h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

.host-box input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.green-btn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.green-btn:hover {
  background: #218838;
}

/* Table Display */
.host-table-wrapper {
  margin-top: 20px;
  overflow-x: auto;
}

.host-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border-radius: 8px;
  overflow: hidden;
}

.host-table th, .host-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.host-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #333;
}

.pinned-row {
  background-color: #fffce8;
  font-weight: bold;
}
.edit-btn, .delete-btn {
  text-decoration: none;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 5px;
  margin-right: 5px;
  color: white;
}

.edit-btn {
  background: #ffc107;
}

.delete-btn {
  background: #dc3545;
}

.form-box {
  max-width: 400px;
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.search-bar {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  margin: 15px 0;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 15px;
}

.pin-btn {
  background: #0d6efd;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.pin-btn:hover {
  background: #0a58ca;
}
/* Search Bar */
.search-bar {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  margin: 15px 0;
  border-radius: 6px;
  border: 1px solid #0d6efd;
  font-size: 15px;
  background: #f9fcff;
}

/* Table */
.host-table-wrapper {
  margin-top: 20px;
  overflow-x: auto;
}

.host-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border-radius: 8px;
  overflow: hidden;
}

.host-table th,
.host-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eef0f5;
}

.host-table th {
  background: #0d6efd;
  color: white;
  font-weight: 600;
}

.pinned-row {
  background-color: #eaf3ff;
  font-weight: bold;
}

/* Buttons */
.green-btn {
  padding: 10px 16px;
  background: #0d6efd;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.green-btn:hover {
  background: #0a58ca;
}

/* Pin/Unpin Button */
.pin-btn {
  background: #0d6efd;
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.pin-btn:hover {
  background: #0b5ed7;
}

/* Edit/Delete */
.edit-btn,
.delete-btn {
  text-decoration: none;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 5px;
  color: white;
  margin-right: 6px;
}

.edit-btn {
  background: #ffc107;
}

.delete-btn {
  background: #dc3545;
}
.form-container {
  max-width: 500px;
  margin: 40px auto;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.form-container h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #0d6efd;
}

.styled-form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.styled-form input[type="text"],
.styled-form input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  transition: 0.2s border;
}

.styled-form input:focus {
  border-color: #0d6efd;
  outline: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font-weight: 500;
}

.blue-btn {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  font-weight: 600;
  font-size: 16px;
  background: #0d6efd;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.blue-btn:hover {
  background: #0b5ed7;
}
.search-bar {
  width: 100%;
  max-width: 300px;
  padding: 10px 14px;
  margin: 15px 0;
  border-radius: 6px;
  border: 1px solid #0d6efd;
  font-size: 15px;
  background: #f9fcff;
}

.host-table th {
  background: #0d6efd;
  color: white;
}

.expired-row td {
  background-color: #ffeaea;
  color: #b30000;
  font-weight: 500;
}

.pin-btn {
  background: #0d6efd;
  color: white;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.dashboard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.card-link {
  flex: 1 1 calc(33.333% - 20px);
  text-decoration: none;
  color: inherit;
  max-width: 300px;
}


.card:hover {
  background-color: #eaf4ff;
}

.card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #007BFF;
}

.card p {
  font-size: 26px;
  font-weight: bold;
  margin: 0;
  color: #111;
}
.card {
  position: relative;
  background: #f4f9ff;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

.card::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(270deg, #007BFF, #00C6FF, #007BFF);
  background-size: 600% 600%;
  border-radius: 14px;
  z-index: -1;
  animation: borderAnimation 4s linear infinite;
}

@keyframes borderAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.card:hover::before {
  filter: brightness(1.2);
}
.admin-header {
  background: #007bff;
  padding: 15px 0;
  color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.admin-container {
  width: 95%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-brand {
  font-size: 22px;
  font-weight: bold;
}

.admin-menu {
  list-style: none;
  display: flex;
  gap: 15px;
}

.admin-menu li {
  margin: 0;
}

.nav-btn {
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  color: white;
  transition: background 0.3s ease;
}

.blue-btn    { background-color: #007bff; }
.blue-btn:hover    { background-color: #0056b3; }

.green-btn   { background-color: #28a745; }
.green-btn:hover   { background-color: #1e7e34; }

.orange-btn  { background-color: #fd7e14; }
.orange-btn:hover  { background-color: #e8590c; }

.red-btn     { background-color: #dc3545; }
.red-btn:hover     { background-color: #bd2130; }