:root{
  --header-height: 70px;
  --margin-top-header-height: 75px;
    --margin-bottom: 10px;

    --background-primary: #f1f5f9;
    --logo-dark: #031842;
    --logo-yellow: #ffda00;
    --logo-green: #bed029;
    --logo-orange: #e74518;

    --logo-dark-light: #03184282;
    --logo-yellow-light: #ffda005e;
    --logo-green-light: #bed02969;
    --logo-orange-light: #e7451861;
    --border-radius: 0.5rem;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
   font-family: "Roboto", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
  font-variation-settings: "wdth" 100;

  background: whitesmoke;
  color: var(--logo-dark);
  line-height: 1.6;
}
main{
    margin-top: var(--margin-top-header-height);
     margin-bottom: var(--margin-bottom);
}
.logo-text{
  width: 200px;
  margin-top: -15px;
  margin-left: -50px;
}

.logo-bird{
  width: 90px;
}

.app-footer{
  transition: transform 0.3s ease;
  will-change: transform;
}
 .app-footer.hide {
    transform: translateY(100%);
  }

/* Table styling */
.table-wrapper {
  overflow-x: auto;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #ffffff;
  color: #111827;
}

.responsive-table th,
.responsive-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.responsive-table th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
}

.responsive-table tr:hover {
  background: #f9fafb;
}

/* Mobile stacked table */
@media (max-width: 768px) {
  .responsive-table thead {
    display: none;
  }

  .responsive-table tr {
    display: block;
    margin-bottom: 15px;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
  }

  .responsive-table td {
    display: flex;
    justify-content: space-between;
    padding: 10px 8px;
    border: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .responsive-table td:last-child {
    border-bottom: none;
  }

  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--logo-dark);
  }

  /* Header controls on mobile */
  .table-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .table-title-area {
    width: 100%;
  }

  .table-search {
    width: 100%;
  }

  .table-actions {
    width: 100%;
    justify-content: space-between;
  }
}