/* Reset & base */
* { box-sizing: border-box; margin:0; padding:0 }
html,body { height:100%; font-family:Arial,sans-serif; background:#fafafa; color:#333; }

/* Container */
.container { max-width:960px; margin:0 auto; padding:16px; }

/* Toasts */
#toast-container {
  position:fixed; top:20px; right:20px;
  display:flex; flex-direction:column; gap:10px; z-index:2000;
}
.toast {
  padding:10px 15px; border-radius:4px; color:#fff;
  min-width:120px; animation:fadeout 0.5s ease-in-out 3s forwards;
}
.toast.loading { background:#555 }
.toast.success { background:#28a745 }
.toast.error   { background:#dc3545 }
@keyframes fadeout { to{ opacity:0 } }

/* Table */
#categories-table { width:100%; border-collapse:collapse; margin-bottom:24px; overflow-x:auto; }
#categories-table th, #categories-table td {
  padding:12px 8px; text-align:left; border-bottom:1px solid #e1e1e1;
}
#categories-table th:first-child,
#categories-table td:first-child { width:40px; text-align:center; }
#categories-table a { color:#007bff; text-decoration:none }
#categories-table a:hover { text-decoration:underline }
#categories-table button { background:none; border:none; cursor:pointer; font-size:1rem; }

/* Modal */
.modal {
  display:none; position:fixed; z-index:2000;
  top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);
}
.modal-content {
  background:#fff; margin:10% auto; padding:20px;
  border-radius:6px; width:90%; max-width:400px; position:relative;
}
.modal-content .close {
  position:absolute; top:10px; right:15px; font-size:24px; cursor:pointer;
}

/* FAB */
.fab {
  position:fixed; width:56px; height:56px; border-radius:50%;
  border:none; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.3);
  cursor:pointer; z-index:1000; transition:background .2s;
}
.fab:hover { opacity:0.9 }
.fab.primary { bottom:20px; right:20px; background:#007bff }
.fab.secondary { bottom:90px; right:20px; background:#28a745; display:none }

/* Mobile bottom nav (optional) */
@media(max-width:768px){
  .fab { display:none }
  /* .bottom-nav { display:flex … } */
}


/*//////////////////////////////////////*/



/* =============================
   Modal Form — Layout & Inputs
   ============================= */
.form {
  display: flex;
  flex-direction: column;
}

.form-title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #333;
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: #444;
  font-size: 0.95rem;
}

.form-group input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* =============================
   Button Styles
   ============================= */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.primary-btn {
  background-color: #007bff;
  color: #fff;
}

.primary-btn:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

/* Center the “Save” button */
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Reduce modal-content width on small screens */
@media (max-width: 480px) {
  .modal-content {
    width: 95%;
    margin: 20% auto;
    padding: 16px;
  }
}