/* =====================================================
   COMPANY DATABASE VIEW
===================================================== */

.company-database-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 32px 16px;

  box-sizing: border-box;
}


/* =====================================================
   CONTAINER
===================================================== */

.company-database-container {

  width: 100%;

  max-width: 760px;

  margin: 0 auto;

}


/* =====================================================
   CARD
===================================================== */

.company-database-card {

  width: 100%;

  background: #ffffff;

  border-radius: 18px;

  padding: 36px 40px;

  box-sizing: border-box;

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.08);

  border: 1px solid #e8edf3;

}


/* =====================================================
   HEADER
===================================================== */

.database-header {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 30px;

}


.database-icon {

  width: 58px;

  height: 58px;

  flex: 0 0 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 15px;

  background: #eaf3ff;

  font-size: 27px;

}


.database-header .view-title {

  margin: 0;

  font-size: 24px;

  line-height: 1.25;

  color: #1f2937;

}


.database-subtitle {

  margin: 7px 0 0;

  color: #6b7280;

  font-size: 14px;

  line-height: 1.5;

}


/* =====================================================
   STATUS
===================================================== */

.database-status {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  padding: 18px;

  border-radius: 13px;

  box-sizing: border-box;

}


.database-status-warning {

  background: #fff8e6;

  border: 1px solid #f5df9b;

}


.status-icon {

  width: 32px;

  height: 32px;

  flex: 0 0 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

}


.status-content h3 {

  margin: 0 0 7px;

  font-size: 16px;

  font-weight: 600;

  color: #6b4e00;

}


.status-content p {

  margin: 0;

  font-size: 14px;

  line-height: 1.65;

  color: #6b5b2a;

}


/* =====================================================
   ACTION
===================================================== */

.database-action {

  display: flex;

  justify-content: center;

  margin-top: 28px;

}


.primary-button {

  min-width: 230px;

  height: 48px;

  padding: 0 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  border: none;

  border-radius: 10px;

  background: #1976d2;

  color: #ffffff;

  font-size: 15px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.18s ease,
    transform 0.12s ease,
    box-shadow 0.18s ease;

}


.primary-button:hover {

  background: #1565c0;

  box-shadow:
    0 5px 14px rgba(25, 118, 210, 0.25);

}


.primary-button:active {

  transform: translateY(1px);

}


.primary-button:disabled {

  cursor: not-allowed;

  opacity: 0.65;

  box-shadow: none;

}


.button-icon {

  font-size: 17px;

}


/* =====================================================
   PROGRESS
===================================================== */

.database-progress {

  margin-top: 30px;

  padding: 20px;

  border-radius: 13px;

  background: #f7faff;

  border: 1px solid #dcecff;

}


.progress-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 11px;

}


.progress-header span {

  font-size: 14px;

  font-weight: 600;

  color: #374151;

}


.progress-header strong {

  font-size: 15px;

  color: #1976d2;

}


.progress-track {

  width: 100%;

  height: 10px;

  overflow: hidden;

  border-radius: 999px;

  background: #e5eaf0;

}


.progress-bar {

  height: 100%;

  border-radius: inherit;

  background: #1976d2;

  transition: width 0.35s ease;

}


.progress-status {

  margin-top: 10px;

  font-size: 13px;

  color: #6b7280;

}


/* =====================================================
   SUCCESS
===================================================== */

.database-success {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 30px;

  padding: 18px;

  border-radius: 13px;

  background: #edf9f1;

  border: 1px solid #bfe8ca;

}


.success-icon {

  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #2e9d50;

  color: #ffffff;

  font-size: 19px;

  font-weight: 700;

}


.database-success h3 {

  margin: 0 0 5px;

  font-size: 15px;

  color: #216b35;

}


.database-success p {

  margin: 0;

  font-size: 13px;

  color: #477255;

}


/* =====================================================
   NOTE
===================================================== */

.database-note {

  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-top: 30px;

  padding: 18px;

  border-radius: 13px;

  background: #f8f9fb;

  border: 1px solid #e5e7eb;

}


.note-icon {

  width: 32px;

  height: 32px;

  flex: 0 0 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

}


.note-content h3 {

  margin: 0 0 7px;

  font-size: 14px;

  font-weight: 600;

  color: #374151;

}


.note-content p {

  margin: 0;

  font-size: 13px;

  line-height: 1.6;

  color: #6b7280;

}


.support-phone {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 11px;

  color: #1976d2;

  font-size: 15px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 640px) {

  .company-database-page {

    padding: 20px 12px;

    align-items: flex-start;

  }


  .company-database-card {

    padding: 26px 20px;

    border-radius: 15px;

  }


  .database-header {

    gap: 13px;

    margin-bottom: 24px;

  }


  .database-icon {

    width: 48px;

    height: 48px;

    flex-basis: 48px;

    border-radius: 12px;

    font-size: 23px;

  }


  .database-header .view-title {

    font-size: 21px;

  }


  .database-subtitle {

    font-size: 13px;

  }


  .database-status {

    padding: 15px;

  }


  .status-content p {

    font-size: 13px;

  }


  .database-action {

    margin-top: 23px;

  }


  .primary-button {

    width: 100%;

    min-width: 0;

  }


  .database-progress {

    padding: 16px;

  }


  .database-note {

    padding: 15px;

  }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

  .company-database-card {

    padding: 22px 16px;

  }


  .database-header .view-title {

    font-size: 19px;

  }


  .database-header {

    align-items: flex-start;

  }

}