/* Overview styling inspired by a minimal glass dashboard. */
#app {
  --surface: rgba(255,255,255,.72); --surface-solid: #fff; --line: rgba(79,102,133,.11);
  --muted: #6b7685; --strong: #243248; --accent: #3b82f6; --icon-bg: #ecf4ff;
  min-height: 100vh; padding: 42px 24px 28px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--strong); -webkit-font-smoothing: antialiased;
  background: linear-gradient(145deg,#fdfdfd,#f5f7fb 48%,#e6ecf5);
}
#app.dark {
  --surface: #252527; --surface-solid: #303034; --line: rgba(255,255,255,.075);
  --muted: #a7a7af; --strong: #f4f4f5; --accent: #60a5fa; --icon-bg: #303a49;
  background: #171719;
}
#app #bighead, #app #main-section { max-width: 1140px; margin: 0 auto; }
#app #bighead {position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 48px rgba(53,75,108,.075); overflow: hidden;}
#app.dark #bighead {box-shadow: 0 14px 40px rgba(0,0,0,.12);}
#app .first-line {padding: 2.35rem 2.7rem 2.65rem; background: transparent;}
#app .first-line .container { max-width: none; }
#app .first-line .logo, #app .first-line .dashboard-title {display: none !important;}
#app .gx-overview {min-height: 205px; display: flex; flex-direction: column; justify-content:center; color: var(--strong);}
#app .gx-overview-kicker { color: var(--muted); font-size: .9rem; font-weight: 600; margin: 0 0 1rem;}
#app .gx-overview-time {font-size: clamp(2.7rem,5vw,4.4rem); line-height: 1.04; font-weight: 700; letter-spacing: -.055em; font-variant-numeric: tabular-nums; margin:0;}
#app .gx-overview-date {font-size: 1rem; color: var(--muted); margin: .65rem 0 0;}
#app .gx-overview-welcome {font-size: 1.1rem; font-weight: 600; color:var(--strong); margin: 1.3rem 0 0;}
#app .container-fluid {position:absolute; right: 2rem; top: 1.8rem; padding:0; background: transparent;}
#app .navbar {min-height: 0; background: transparent;}
#app .navbar .container {min-height:0;}
#app .navbar-menu {display:flex !important; background:transparent; box-shadow:none; padding:0;}
#app .navbar-start, #app .navbar-burger, #app .search-bar, #app .navbar-end .navbar-item:not(:first-child) {display:none !important;}
#app .navbar-end > :not([aria-label="Toggle dark mode"]) { display: none !important; }
#app .navbar-end > :not([aria-label="Toggle dark mode"]) { visibility: hidden !important; position: absolute !important; pointer-events: none !important; }
#app .navbar-end {display:flex; margin:0;}
#app .navbar-item {display:flex; justify-content:center; align-items:center; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:13px; background:var(--surface-solid); color:var(--muted);}
#app .navbar-item:hover, #app .navbar-item:focus-visible {color:var(--accent); outline-color: var(--accent);}
#app #main-section { background:var(--surface); border:1px solid var(--line); border-radius:24px; margin-top: 22px; padding:2.25rem 2.7rem 2.7rem; box-shadow:0 18px 48px rgba(53,75,108,.075); }
#app #main-section > .container {max-width:none;}
#app .layout-vertical > .column.is-4 {width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;align-items:stretch;}
#app .layout-vertical > .column.is-4 > .group-title {grid-column:1/-1;}
#app .group-title {color:var(--strong);font-size:1.4rem;font-weight:700;margin:0 0 .45rem;}
#app .group-title i {color:var(--accent);}
#app .layout-vertical > .column.is-4 > div:not(.group-title) {grid-column:span 2;min-width:0;}
#app .layout-vertical > .column.is-4 > div:not(.group-title):nth-last-child(-n+2) {grid-column:span 3;}
#app .layout-vertical > .column.is-4 .card {height:100%;min-width:0;}
#app .card {background:var(--surface-solid);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 7px 20px rgba(52,70,100,.045);transition:transform .18s ease,box-shadow .18s ease;}
#app .card:hover {transform:translateY(-2px);box-shadow:0 12px 26px rgba(52,70,100,.1);}
#app .card > a {display:block;height:100%;color:inherit;}
#app .card > a:focus-visible {outline:3px solid var(--accent);outline-offset:-4px;}
#app .card-content {padding:1.65rem;min-height:10.5rem;display:flex;align-items:center;}
#app .card-content .media {width:100%;align-items:center;min-width:0;}
#app .card-content .media-content {min-width:0;overflow:visible;}
#app .card-content .media-left {margin-right:1.15rem;}
#app .card-content .image {display:flex;align-items:center;justify-content:center;width:3.65rem;height:3.65rem;border-radius:15px;background:var(--icon-bg);color:var(--accent);}
#app .card-content .image i {font-size:1.42rem !important;color:inherit;}
#app .card-content .title {color:var(--strong);font-size:1.18rem;font-weight:700;line-height:1.3;margin:0 0 .4rem;}
#app .card-content .subtitle {color:var(--muted);font-size:.9rem;line-height:1.4;margin:0;white-space:normal;overflow:visible;text-overflow:clip;}
#app .footer {position:static;max-width:1140px;margin:auto;padding:1.7rem;background:transparent;color:var(--muted);}
#app .footer .content {color:var(--muted);font-size:.8rem;}
@media(max-width:960px) {#app .layout-vertical > .column.is-4 {grid-template-columns:repeat(2,minmax(0,1fr));} #app .layout-vertical > .column.is-4 > div:not(.group-title), #app .layout-vertical > .column.is-4 > div:not(.group-title):nth-last-child(-n+2){grid-column:span 1;} #app .layout-vertical > .column.is-4 > div:not(.group-title):last-child {grid-column:1/-1;}}
@media(max-width:560px) {#app {padding:18px 15px 20px;} #app .first-line {padding:1.65rem 1.45rem 1.75rem;} #app .gx-overview {min-height:176px;} #app .container-fluid {right:1.1rem;top:1.1rem;} #app #main-section {margin-top:15px;padding:1.5rem 1.4rem 1.7rem;} #app .layout-vertical > .column.is-4 {grid-template-columns:minmax(0,1fr);gap:.75rem;} #app .layout-vertical > .column.is-4 > div:not(.group-title), #app .layout-vertical > .column.is-4 > div:not(.group-title):last-child {grid-column:auto;} #app .card-content {min-height:7rem;padding:1.2rem;} }
@media(prefers-reduced-motion:reduce){#app .card{transition:none;}}