/* Syafiq Command Center visual refinement
   Goals: calmer hierarchy, stronger grouping, better scan speed, and more readable cards. */

:root {
  --sd-bg: #060914;
  --sd-bg-soft: rgba(15, 23, 42, 0.78);
  --sd-panel: rgba(15, 23, 42, 0.58);
  --sd-panel-border: rgba(148, 163, 184, 0.16);
  --sd-card: rgba(15, 23, 42, 0.72);
  --sd-card-hover: rgba(30, 41, 59, 0.88);
  --sd-text: rgba(248, 250, 252, 0.94);
  --sd-muted: rgba(203, 213, 225, 0.72);
  --sd-faint: rgba(148, 163, 184, 0.52);
  --sd-accent: #38bdf8;
  --sd-accent-soft: rgba(56, 189, 248, 0.13);
}

body {
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 34rem),
    radial-gradient(circle at top right, rgba(129, 140, 248, 0.14), transparent 30rem),
    linear-gradient(135deg, #050816 0%, #0f172a 45%, #111827 100%) !important;
  color: var(--sd-text);
}

/* Let the dashboard breathe on desktop without losing the useful 4-column overview. */
.container {
  max-width: min(1780px, calc(100vw - 32px)) !important;
}

/* Header/status/search band: turn the raw widgets row into a command strip. */
.container > div:nth-of-type(2) {
  margin: 1.25rem 1.25rem 0 !important;
  padding: 1rem 1.1rem !important;
  border: 1px solid var(--sd-panel-border) !important;
  border-radius: 1.25rem !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.52)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(16px);
}

.information-widget-resource {
  min-width: 9.25rem;
  margin-right: 0.65rem !important;
  padding: 0.7rem 0.8rem !important;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.95rem;
  background: rgba(15, 23, 42, 0.54);
}

.information-widget-resource svg {
  opacity: 0.88;
}

.information-widget-resource .resource-usage {
  height: 0.35rem !important;
  background: rgba(148, 163, 184, 0.18) !important;
}

.information-widget-search input {
  height: 2.65rem !important;
  border-radius: 999px !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  background: rgba(2, 6, 23, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.information-widget-search button {
  width: 2.35rem !important;
  top: 0.175rem !important;
  right: 0.2rem !important;
  bottom: 0.175rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.36), rgba(129, 140, 248, 0.24)) !important;
}

.information-widget-search button svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Search control alignment: keep the provider button inside the input instead of floating low/right. */
.information-widget-search {
  min-width: min(36rem, 100%) !important;
}

.information-widget-search > div {
  height: 2.75rem !important;
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
  position: relative !important;
}

.information-widget-search input {
  padding-left: 1rem !important;
  padding-right: 3.35rem !important;
}

.information-widget-search div[data-headlessui-state][data-disabled] {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 2.95rem !important;
  height: 100% !important;
  z-index: 2;
}

.information-widget-search div[data-headlessui-state][data-disabled] > div {
  height: 100% !important;
}

.information-widget-search button {
  position: absolute !important;
  top: 0.25rem !important;
  right: 0.25rem !important;
  bottom: 0.25rem !important;
  width: 2.35rem !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.36), rgba(129, 140, 248, 0.24)) !important;
}

.information-widget-search button svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* Main grid: more space between sections and less cramped group edges. */
.container > div:nth-of-type(3) {
  margin: 1rem 1rem 1.75rem !important;
  gap: 0.85rem !important;
  align-items: flex-start !important;
}

.services-group {
  padding: 0.7rem !important;
  border: 1px solid var(--sd-panel-border);
  border-radius: 1.35rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.2));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18);
}

/* Utility bands: keep widget-heavy groups at the top and let them span the full row.
   Homepage's native layout options can still leave service groups in column cards on this build,
   so these targeted first-three group overrides preserve the intended flow explicitly. */
.container > div:nth-of-type(3) > .services-group:nth-child(-n + 3),
.services-group:nth-child(-n + 3) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

.container > div:nth-of-type(3) > .services-group:nth-child(-n + 3) .services-list,
.services-group:nth-child(-n + 3) .services-list {
  display: grid !important;
  align-items: stretch !important;
  gap: 0.7rem !important;
}

.container > div:nth-of-type(3) > .services-group:nth-child(1) .services-list,
.services-group:nth-child(1) .services-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.container > div:nth-of-type(3) > .services-group:nth-child(2) .services-list,
.services-group:nth-child(2) .services-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.container > div:nth-of-type(3) > .services-group:nth-child(3) .services-list,
.services-group:nth-child(3) .services-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.container > div:nth-of-type(3) > .services-group:nth-child(-n + 3) .service-card,
.services-group:nth-child(-n + 3) .service-card {
  height: 100%;
}

.service-group-name {
  font-size: 1.05rem !important;
  letter-spacing: 0.01em;
  color: rgba(226, 232, 240, 0.96) !important;
}

.services-group > button {
  padding: 0.1rem 0.15rem 0.35rem !important;
}

.services-list {
  margin-top: 0.55rem !important;
  gap: 0.58rem;
}

/* Cards: stronger shape, calmer hover, improved text hierarchy. */
.service-card {
  margin-bottom: 0 !important;
  padding: 0.42rem !important;
  min-height: 4.75rem;
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 1rem !important;
  background: linear-gradient(135deg, var(--sd-card), rgba(15, 23, 42, 0.5)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  overflow: hidden !important;
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-1px);
  border-color: rgba(56, 189, 248, 0.34);
  background: linear-gradient(135deg, var(--sd-card-hover), rgba(15, 23, 42, 0.72)) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(56, 189, 248, 0.05) !important;
}

.service-icon {
  width: 3.25rem !important;
}

.service-icon img {
  width: 2.15rem !important;
  height: 2.15rem !important;
  padding: 0.28rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.service-name {
  padding: 0.62rem 0.55rem !important;
  color: var(--sd-text) !important;
}

.service-name .text-sm,
.service-title-text {
  min-width: 0;
}

.service-description {
  margin-top: 0.12rem !important;
  color: var(--sd-muted) !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
}

.service-tags {
  top: 0.38rem !important;
  right: 0.48rem !important;
  margin-right: 0 !important;
}

.service-tag .ping-status,
.service-tag > div {
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.76) !important;
  color: rgba(226, 232, 240, 0.8) !important;
  border: 1px solid rgba(148, 163, 184, 0.13);
  font-size: 0.65rem !important;
}

/* Widget/stat blocks inside service cards: separate data from identity. */
.service-card .grid,
.service-card [class*="service-container"] {
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.service-card [class*="bg-theme-500\/10"],
.service-card [class*="dark:bg-theme-900\/20"],
.service-card [class*="dark:bg-theme-900\/50"] {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

/* Error panels should warn without visually swallowing the whole column. */
.service-card .bg-rose-500,
.service-card [class*="bg-rose"],
.service-card [class*="bg-red"] {
  background-color: rgba(127, 29, 29, 0.34) !important;
  border-color: rgba(248, 113, 113, 0.34) !important;
}

.service-card ul.p-4 {
  padding: 0.75rem !important;
  max-height: 8rem;
  overflow: auto;
  border-radius: 0.8rem;
}

/* Calendar and dense widgets need a little more visual containment. */
.service-card button,
.service-card a {
  outline-offset: 3px;
}

/* Group rhythm refinement: headings now sit outside their panels, and the panel begins at the service list. */
#layout-groups,
#services,
#bookmarks {
  gap: 1.35rem 1rem !important;
  align-items: flex-start !important;
}

#layout-groups > .services-group,
#services > .services-group,
#bookmarks > .services-group {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#layout-groups > .services-group > button,
#services > .services-group > button,
#bookmarks > .services-group > button {
  padding: 0 0.15rem 0.42rem !important;
  margin: 0 !important;
}

#layout-groups .service-group-name,
#services .service-group-name,
#bookmarks .service-group-name {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem !important;
  letter-spacing: 0.035em;
  text-transform: none;
}

#layout-groups .service-group-name::before,
#services .service-group-name::before,
#bookmarks .service-group-name::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--sd-accent);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.55);
}

#layout-groups .services-list,
#services .services-list,
#bookmarks .services-list,
#bookmarks .bookmark-list {
  margin-top: 0 !important;
  padding: 0.72rem !important;
  border: 1px solid var(--sd-panel-border) !important;
  border-radius: 1.25rem !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.44), rgba(15, 23, 42, 0.22)) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18) !important;
}

/* Keep the widget-heavy media automation row clean: calendar and non-widget app cards live in their own groups. */
#layout-groups > .services-group:nth-child(4) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

#layout-groups > .services-group:nth-child(4) .services-list {
  display: grid !important;
  grid-template-columns: minmax(18rem, 38rem) !important;
  justify-content: start !important;
}

#layout-groups > .services-group:nth-child(5) .services-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.7rem !important;
}

@media (max-width: 1280px) {
  .container {
    max-width: min(1280px, calc(100vw - 24px)) !important;
  }

  .services-group {
    border-radius: 1.1rem;
  }

  .container > div:nth-of-type(3) > .services-group:nth-child(-n + 3) .services-list,
  .services-group:nth-child(-n + 3) .services-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .container {
    max-width: 100vw !important;
  }

  .container > div:nth-of-type(2) {
    margin: 0.75rem !important;
    padding: 0.8rem !important;
  }

  .container > div:nth-of-type(3) {
    margin: 0.75rem !important;
    gap: 0.65rem !important;
  }

  .information-widget-resource {
    min-width: calc(50% - 0.5rem);
    margin-right: 0 !important;
  }

  .service-card {
    min-height: 4.35rem;
  }

  .container > div:nth-of-type(3) > .services-group:nth-child(-n + 3) .services-list,
  .services-group:nth-child(-n + 3) .services-list,
  #layout-groups > .services-group:nth-child(4) .services-list,
  #layout-groups > .services-group:nth-child(5) .services-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}