/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

$brand-dark: #0d3d78;
$accent: #0ea5e9;

.home-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* ── Welcome Banner ── */
.welcome-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  background: linear-gradient(135deg, $brand-dark 0%, #1a5276 100%);
  border-radius: 10px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      108deg,
      transparent 0,
      transparent 80px,
      rgb(255 255 255 / 2.5%) 80px,
      rgb(255 255 255 / 2.5%) 160px
    );
    pointer-events: none;
  }
}

.welcome-left {
  position: relative;
  z-index: 1;
}

.welcome-greeting {
  h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: rgb(255 255 255 / 90%);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    strong {
      font-weight: 700;
      color: #fff;
    }
  }
}

/* ── DSC Verified badge (welcome banner) ── */
.dsc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  padding: 4px 12px 4px 6px;
  background: linear-gradient(135deg, rgb(34 197 94 / 18%) 0%, rgb(34 197 94 / 8%) 100%);
  border: 1px solid rgb(74 222 128 / 35%);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #bbf7d0;
  cursor: default;
  transition:
    transform 0.18s ease,
    background 0.18s ease;

  &:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgb(34 197 94 / 28%) 0%, rgb(34 197 94 / 14%) 100%);
  }

  &__shield {
    position: relative;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(22 163 74 / 90%);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgb(15 118 50 / 35%);
  }

  &__check {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 14px;
    height: 14px;
    background: #16a34a;
    color: #fff;
    border: 2px solid #1a5276; /* matches the banner's right edge so the ring blends in */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
  }

  &__label {
    color: #ecfdf5;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
}

.welcome-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgb(255 255 255 / 50%);
}

.welcome-right {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 6px;
  padding: 6px 14px;
  min-width: 280px;
  transition: background 0.15s;

  &:focus-within {
    background: rgb(255 255 255 / 18%);
    border-color: rgb(255 255 255 / 30%);
  }
}

.search-icon {
  color: rgb(255 255 255 / 50%);
  font-size: 13px;
}

.search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
  width: 100%;

  &::placeholder {
    color: rgb(255 255 255 / 45%);
  }
}

/* ── Quick Action Cards ── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.qa-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 8px;
  text-decoration: none;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
  cursor: pointer;

  &:hover {
    box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
    transform: translateY(-1px);
  }
}

.qa-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;

  &.blue {
    background: #e0f2fe;
    color: #0284c7;
  }

  &.green {
    background: #d1fae5;
    color: #059669;
  }

  &.purple {
    background: #ede9fe;
    color: #7c3aed;
  }

  &.amber {
    background: #fef3c7;
    color: #d97706;
  }

  &.teal {
    background: #ccfbf1;
    color: #0d9488;
  }

  &.red {
    background: #fee2e2;
    color: #dc2626;
  }
}

.qa-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qa-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.qa-desc {
  font-size: 10px;
  color: #999;
  white-space: nowrap;
}

/* ── Info Row ── */
.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-card {
  background: #fff;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 8px;
  overflow: hidden;
}

.info-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fafafa;
  border-bottom: 1px solid rgb(0 0 0 / 4%);
  font-size: 13px;
  font-weight: 600;
  color: #333;

  .info-icon {
    color: $accent;
    font-size: 13px;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  border-bottom: 1px solid rgb(0 0 0 / 3%);

  &:nth-last-child(-n + 2) {
    border-bottom: none;
  }
}

.info-label {
  font-size: 10px;
  color: #999;
  font-weight: 500;
}

.info-value {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 600;
}

.quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px 0;

  a {
    font-size: 12px;
    color: $brand-dark;
    text-decoration: none;
    padding: 7px 16px;
    transition: background 0.1s;
    border-bottom: 1px solid rgb(0 0 0 / 3%);

    &:hover {
      background: #f0f9ff;
      color: $accent;
    }

    &:nth-last-child(-n + 2) {
      border-bottom: none;
    }
  }
}

/* ── Dark Theme ── */
:host-context(.dark-theme) {
  .qa-card,
  .info-card {
    background: #1e1e2e;
    border-color: rgb(255 255 255 / 6%);
  }

  .qa-title {
    color: #e0e0e0;
  }

  .qa-desc {
    color: #666;
  }

  .info-card-header {
    background: #252536;
  }

  .info-value {
    color: #e0e0e0;
  }

  .info-label {
    color: #666;
  }

  .quick-links a {
    color: #7dd3fc;

    &:hover {
      background: rgb(255 255 255 / 4%);
    }
  }

  .search-input {
    color: #fff;
  }
}

/* ── Responsive ── */
@media (width <= 1024px) {
  .quick-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 768px) {
  .welcome-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px;
  }

  .search-box {
    min-width: unset;
  }

  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-row {
    grid-template-columns: 1fr;
  }
}

@media (width <= 480px) {
  .quick-actions {
    grid-template-columns: 1fr;
  }
}