/* ===== FONTS ===== */
@font-face {
  font-family: "kc";
  src: url("assets/kclike-writing-font.ttf");
}

/* ===== BASE STYLES ===== */
body {
  background: #fbfbf9;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.center-image {
  clip-path: circle(50%);
}

.hidden {
  display: none;
}

/* ===== TYPOGRAPHY ===== */
.dialog, 
.section, 
.goal-line, 
.progressDetailText {
  padding-left: 20px;
  padding-right: 20px;
}

.progressDetailText {
  word-wrap: break-word;
  white-space: normal;
  max-width: 360px;
  margin: 10px auto;
}

.dialog {
  margin-left: 10px;
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 28px;
  font-family: "Gloria Hallelujah", cursive;
  color: #0e0f0d;
}

.progressDetailText,
.goal-line {
  font-size: 18px;
  font-family: "Gloria Hallelujah", cursive;
  margin-left: 5px;
}

.row {
  font-family: "Gloria Hallelujah", cursive;
  font-size: 18px;
}

.button, 
.drop {
  font-family: "Gloria Hallelujah", cursive;
  font-size: 12px;
  vertical-align: middle;
  margin: auto;
}

.emoji-button {
  font-size: 18px;
}

/* ===== LAYOUT SECTIONS ===== */
.section {
  margin: 15px;
}

#header,
#footer {
  margin: auto;
  display: block;
}

#footer {
  font-size: 14px;
  font-family: 'Special Elite', Courier, monospace;
  color: #0e0f0d;
  text-align: center;
}

img#footer {
  vertical-align: middle;
  background: rgba(255, 0, 0, 0.05);
  overflow: visible;
}

#title {
  display: block;
  margin: 5px auto 35px;
}

#UserInfo {
  width: 490px;
}

/* ===== MENU AND NAVIGATION ===== */
.menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#menu-wrapper {
  position: relative;
  display: inline-block;
}

#kebab {
  cursor: pointer;
}

#dropdown {
  position: absolute;
  right: 0;
  top: 60px;
  background: white;
  padding: 5px 0;
  width: 150px;
  z-index: 1000;
}

.dropdown-item {
  padding: 8px 12px;
  font-family: "Gloria Hallelujah", cursive;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #eee;
  z-index: 999;
}

.tab-selected {
  background: #d3d3d3;
  font-weight: bold;
}

/* ===== DONUT CHART GRID ===== */
.die-5 {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  gap: 0px;
  width: fit-content;
}

.donut {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: none;
  margin: 0;
  overflow: visible;
}

.donut-1 {
  grid-column: 1;
  grid-row: 1;
  --dx: 40px;
  --dy: 40px;
}

.donut-2 {
  grid-column: 3;
  grid-row: 1;
  --dx: -40px;
  --dy: 40px;
}

.donut-3 {
  grid-column: 2;
  grid-row: 2;
  z-index: 0;
}

.donut-4 {
  grid-column: 1;
  grid-row: 3;
  --dx: 40px;
  --dy: -40px;
}

.donut-5 {
  grid-column: 3;
  grid-row: 3;
  --dx: -40px;
  --dy: -40px;
}

.donut-1,
.donut-2,
.donut-4,
.donut-5 {
  z-index: 1;
  transform: translate(var(--dx, 0px), var(--dy, 0px));
}

/* ===== FORM ELEMENTS ===== */
select {
  padding: 5px;
}

.wide {
  width: 120px;
}

.short {
  width: 90px;
}

.diversityActivity {
  width: 200px;
  font-size: 14px;
  margin-bottom: 5px;
}

#btnMay {
  color: #fbfbf9;
  background: #6B6B6B;
}

/* ===== DIVERSITY SECTION ===== */
#diverseContainer {
  display: flex;
  align-items: flex-start;
}

#diverseLeft {
  width: 50%;
  padding-left: 60px;
}

#diverseRight {
  width: 50%;
}

/* ===== EMOJI INTERFACE ===== */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

#emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 5px;
  width: 285px;
  height: 285px;
  overflow-y: auto;
  padding: 5px;
  font-size: 32px;
}

.emoji-option {
  cursor: pointer;
  text-align: center;
  font-size: 32px;
}

#search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
}

/* ===== PROGRESS SHARING ===== */
#share-progress-status {
  font-family: "Gloria Hallelujah", cursive;
  font-size: 16px;
}

#share-progress-value {
  font-size: 18px;
  font-family: 'Special Elite', Courier, monospace;
}

/* ===== THIRD-PARTY COMPONENTS ===== */
wired-dialog::part(container) {
  max-width: 400px;
}

#login-dialog::part(container) {
  max-width: 450px;
}

#login-status {
  min-height: 20px;
}

#login-email {
  margin-left: 10px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 700px) {
  .die-5 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    justify-items: center;
  }

  .donut-1,
  .donut-2,
  .donut-3,
  .donut-4,
  .donut-5 {
    grid-column: auto;
    grid-row: auto;
  }

  .donut {
    transform: none !important;
    margin: 0 !important;
  }
}