:root {
    --color-dsz-primary: #1f7a8c;
    --color-dsz-secondary: #a31621;
    --color-dsz-accent: #053c5e;
    --color-dsz-tertiary: #bf5b27;
    --color-dsz-quaternary: #793c78;
    --color-dsz-danger: #7a0e17;
  }

  h1{
    color:var(--color-dsz-primary);
    font-size: 1.5rem;
  }

  h2{
    color:var(--color-dsz-secondary);
    font-size: 1.4rem;
  }

  body {
    background-color: #f7f9fb;
  }

  a{
    color:var(--color-dsz-primary);
    text-decoration: none;
  }
  /* Add New Button */
  .btn-primary {
    background-color: var(--color-dsz-primary);
    border-color: var(--color-dsz-primary);
  }
  .btn-primary:hover {
    background-color: var(--color-dsz-accent);
    border-color: var(--color-dsz-accent);
  }

  .btn-danger {
    background-color: var(--color-dsz-danger);
    border-color: var(--color-dsz-danger);
  }
  .btn-danger:hover {
    background-color: var(--color-dsz-accent);
    border-color: var(--color-dsz-accent);
  }

  /* Edit Button */
  .btn-success {
    background-color: var(--color-dsz-tertiary);
    border-color: var(--color-dsz-tertiary);
  }
  .btn-success:hover {
    background-color: var(--color-dsz-primary);
    border-color: var(--color-dsz-primary);
  }

  /* Delete Button */
  .btn-danger {
    background-color: var(--color-dsz-secondary);
    border-color: var(--color-dsz-secondary);
  }
  .btn-danger:hover {
    background-color: #7a0e17;
    border-color: #7a0e17;
  }

  /* Info Button */
  .btn-info {
    background-color: var(--color-dsz-quaternary);
    border-color: var(--color-dsz-quaternary);
    color: white;
  }
  .btn-info:hover {
    background-color: #5e2a5d;
    border-color: #5e2a5d;
  }

 
 
  .nav-tabs .nav-link:hover {
    color: var(--color-dsz-tertiary);
  }
  .nav-tabs .nav-link.active {
    background-color: var(--color-dsz-tertiary) !important;
    border-color: var(--color-dsz-tertiary) !important;
    color: white !important;
  }

  /* Secondary (Offline) Button */
  .btn-secondary {
    background-color: var(--color-dsz-secondary);
    border-color: var(--color-dsz-secondary);
  }
  .btn-secondary:hover {
    background-color: var(--color-dsz-tertiary);
    border-color: var(--color-dsz-tertiary);
  }

  .btn-tertiary {
    background-color: var(--color-dsz-tertiary);
    border-color: var(--color-dsz-tertiary);
    color: white;
  }
  .btn-tertiary:hover {
    background-color: var(--color-dsz-primary);
    border-color: var(--color-dsz-primary);
  }

  /* Table Styling */
  .table {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  }
  .table thead {
    background-color: var(--color-dsz-primary);
    color: white;
  }
  .table th, .table td {
    vertical-align: middle;
    text-align: center;
  }
  .table td.action-buttons {
    white-space: nowrap;
  }

  /* Modal Styling */
  .modal-header {
    background-color: var(--color-dsz-quaternary);
    color: white !important;
  }
  .modal-title{
    color: white !important;
  }
  .btn-close{
    color: white !important;
    background-color: white !important;
  }
  .modal-footer .btn-secondary {
    background-color: var(--color-dsz-primary);
    border-color: var(--color-dsz-primary);
  }
  .modal-footer .btn-primary {
    background-color: var(--color-dsz-secondary);
    border-color: var(--color-dsz-secondary);
  }
  .modal-footer .btn-primary:hover {
    background-color: #7a0e17;
    border-color: #7a0e17;
  }
  .modal-body strong {
    color: var(--color-dsz-tertiary);
  }

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

.text-primary{
    color: var(--color-dsz-primary) !important;
}
.text-secondary{
    color: var(--color-dsz-secondary) !important;
}
.text-tertiary{
    color: var(--color-dsz-tertiary) !important;
}
.text-quaternary{
    color: var(--color-dsz-quaternary) !important;
}

.bg-dsz-primary{
    background-color: var(--color-dsz-primary) !important;
}
.bg-dsz-secondary{
    background-color: var(--color-dsz-secondary) !important;
}
.bg-dsz-tertiary{
    background-color: var(--color-dsz-tertiary) !important;
}
.bg-dsz-quaternary{
    background-color: var(--color-dsz-quaternary) !important;
}

.dsz-border-primary{
  border: 1px solid #ccc;
  border-radius: 4px;
}
.dsz-border-secondary{
  border: 1px solid var(--color-dsz-secondary);
}
.dsz-border-tertiary{
  border: 1px solid var(--color-dsz-tertiary);
}
.dsz-border-quaternary{
  border: 1px solid var(--color-dsz-quaternary);
}
 

.btn.active {
    background-color: var(--color-dsz-tertiary) !important;
    border-color: var(--color-dsz-tertiary) !important;
    color: white !important;
}

.pagination {
    display: inline-flex;
    list-style: none;
    padding-left: 0;
    gap: 5px;
}

.pagination li {
    display: inline;
}

.pagination a, .pagination span {
    color: white;
    background-color: var(--color-dsz-primary);
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}
.pagination-disabled a, .pagination-disabled span{
    background-color: #ccc !important;
    color: #666 !important;
    pointer-events: none !important;
    cursor:not-allowed !important;
}

.pagination a:hover {
    background-color: var(--color-dsz-accent);
}

.pagination .active {
    background-color: var(--color-dsz-tertiary);
}

.pagination .disabled {
    background-color: #ccc;
    color: #666;
    pointer-events: none;
}


/* Form container */
form.dsz-form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-top: 6px solid var(--color-dsz-primary);
  max-width: 500px;
  margin: 30px auto;
}

/* Form title */
.page-title {
  color: var(--color-dsz-primary);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Labels */
form.dsz-form label {
  font-weight: 600;
  color: var(--color-dsz-primary);
}

/* Inputs */
.form-control {
  border: 1px solid var(--color-dsz-accent);
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
}

.form-control:focus {
  border-color: var(--color-dsz-primary);
  box-shadow: 0 0 8px rgba(31, 122, 140, 0.4);
}