/* Capacity hierarchy: important limits stay visible, supporting details are expandable. */
#dashboard-screen .oci-capacity-card {
  --capacity-accent: #526f95;
  --capacity-success: #326558;
  --capacity-caution: #746348;
  --capacity-disabled-bg: #edf0f4;
  --capacity-disabled-text: #657287;
}
body.dark #dashboard-screen .oci-capacity-card {
  --capacity-accent: #87a0c0;
  --capacity-success: #94b6a9;
  --capacity-caution: #c2b397;
  --capacity-disabled-bg: #1a2636;
  --capacity-disabled-text: #8997aa;
}
#dashboard-screen .oci-capacity-card .status-label.ok { color: var(--capacity-success); }
#dashboard-screen .oci-capacity-card .status-label.warning { color: var(--capacity-caution); }
#dashboard-screen .oci-capacity-card .status-label::before { background: currentColor; box-shadow: none; }
#dashboard-screen .oci-capacity-card :is(.primary-button, .soft-button):disabled {
  background: var(--capacity-disabled-bg);
  color: var(--capacity-disabled-text);
  border-color: var(--line);
  opacity: 1;
}
#dashboard-screen .oci-free-tier-grid { gap: 16px; align-items: stretch; }
#dashboard-screen .oci-capacity-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-solid); box-shadow: none; align-self: stretch; }
#dashboard-screen .oci-capacity-card-head { align-items: flex-start; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
#dashboard-screen .oci-capacity-card-head .eyebrow { color: var(--text-3); font-size: 9px; font-weight: 500; }
#dashboard-screen .oci-capacity-card-head h3 { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
#dashboard-screen .oci-capacity-card-head > div > span { font-size: 11px; color: var(--text-2); }
#dashboard-screen .oci-capacity-card-head .status-label { font-size: 10px; line-height: 1.5; text-align: right; }
#dashboard-screen .oci-capacity-card-head .status-label { white-space: normal; flex-shrink: 0; max-width: 48%; }
#dashboard-screen .oci-capacity-card-head .status-label::before { flex-shrink: 0; }
#dashboard-screen .oci-capacity-meter-grid { gap: 13px; }
#dashboard-screen .oci-capacity-meter > div { font-size: 11px; color: var(--text-2); }
#dashboard-screen .oci-capacity-meter strong { font-size: 11px; font-weight: 500; color: var(--text); }
#dashboard-screen .oci-capacity-track { height: 4px; border-radius: 2px; background: var(--line); }
#dashboard-screen .oci-capacity-track i { background: var(--capacity-accent); }
#dashboard-screen .oci-capacity-remaining { gap: 0; padding-block: 3px; }
#dashboard-screen .oci-capacity-remaining > span { padding: 0 10px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; grid-template-columns: 1fr; gap: 5px; }
#dashboard-screen .oci-capacity-remaining > span:first-child { padding-left: 0; }
#dashboard-screen .oci-capacity-remaining > span:last-child { border: 0; padding-right: 0; }
#dashboard-screen .oci-capacity-remaining svg { display: none; }
#dashboard-screen .oci-capacity-remaining strong { font-size: 16px; line-height: 1.35; font-weight: 500; }
#dashboard-screen .oci-capacity-remaining small { font-size: 9px; color: var(--text-2); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
#dashboard-screen .oci-capacity-reason { border-radius: 6px; padding: 10px; font-size: 10px; line-height: 1.6; background: var(--surface-soft); border-color: var(--line); color: var(--capacity-caution); }
#dashboard-screen .oci-capacity-actions { gap: 8px; margin-top: auto; }
#dashboard-screen .oci-capacity-actions > :is(.primary-button, .soft-button) { font-size: 11px; min-height: 38px; }
#dashboard-screen .oci-capacity-actions > .icon-button { width: 34px; height: 38px; }
#dashboard-screen .oci-management-actions { gap: 8px; margin-top: -9px; }
#dashboard-screen .oci-management-actions > .soft-button { font-size: 10px; min-height: 36px; }
#dashboard-screen .oci-capacity-details { border-top: 1px solid var(--line); min-width: 0; }
#dashboard-screen .oci-capacity-details > summary { padding-top: 13px; color: var(--text-2); font-size: 11px; font-weight: 500; cursor: pointer; list-style-position: inside; }
#dashboard-screen .oci-capacity-details > summary:focus-visible { outline: 2px solid var(--control-focus); outline-offset: 4px; }
#dashboard-screen .oci-capacity-details[open] > summary { margin-bottom: 14px; }
#dashboard-screen .oci-capacity-details .oci-region-summary { margin-bottom: 14px; }
#dashboard-screen .oci-region-pills > span { border-radius: 6px; }
#dashboard-screen .oci-region-summary > p { font-size: 10px; line-height: 1.6; }
#dashboard-screen .oci-region-pills small { font-size: 10px; }
#dashboard-screen .oci-capacity-allocations strong { font-size: 11px; font-weight: 500; }
#dashboard-screen .oci-capacity-allocations span { font-size: 10px; line-height: 1.7; }
#dashboard-screen .oci-provider-limit-note { border-radius: 4px; }
#dashboard-screen .oci-capacity-footnote { padding-top: 0; border: 0; font-size: 9px; flex-wrap: wrap; }
#dashboard-screen .oci-capacity-footnote a { color: var(--text-2); font-weight: 400; text-underline-offset: 3px; }
#dashboard-screen .oci-capacity-heading h3 { font-weight: 500; }

/* A restrained notification inbox, without a large floating shadow. */
#dashboard-screen .notification-panel { width: min(390px, calc(100vw - 28px)); border: 1px solid var(--control-border); border-radius: 8px; box-shadow: none; top: calc(100% + 12px); }
#dashboard-screen .notification-panel:not(.hidden) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(560px, calc(100dvh - 100px)); }
#dashboard-screen .notification-panel > :is(header, footer) { min-width: 0; }
#dashboard-screen .notification-panel > header { padding: 17px 18px; background: var(--surface-solid); gap: 12px; }
#dashboard-screen .notification-panel > header strong { font-size: 15px; font-weight: 600; }
#dashboard-screen .notification-panel > header .eyebrow { display: none; }
#dashboard-screen .notification-panel > header .text-button { font-size: 10px; font-weight: 400; padding: 6px 0; }
#dashboard-screen .notification-list { max-height: min(440px, 57dvh); }
#dashboard-screen .notification-list { min-height: 0; overscroll-behavior: contain; }
#dashboard-screen .notification-item { grid-template-columns: 26px minmax(0, 1fr); gap: 11px; padding: 13px 18px; background: var(--surface-solid); }
#dashboard-screen .notification-item.is-unread { background: color-mix(in srgb, var(--surface-solid) 98%, var(--blue)); border-left: 2px solid #6a89b6; padding-left: 16px; }
#dashboard-screen .notification-item:hover { background: var(--surface-soft); }
#dashboard-screen .notification-item-icon { width: 26px; height: 26px; border-radius: 5px; background: transparent; }
#dashboard-screen .notification-item-icon svg { display: block; width: 16px; height: 16px; }
#dashboard-screen .notification-item-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
#dashboard-screen .notification-item-copy > span { display: contents; }
#dashboard-screen .notification-item-copy strong { grid-column: 1 / -1; grid-row: 1; }
#dashboard-screen .notification-item-copy small { grid-column: 1 / -1; grid-row: 2; }
#dashboard-screen .notification-item-copy em { grid-column: 1; grid-row: 3; }
#dashboard-screen .notification-item-copy time { grid-column: 2; grid-row: 3; }
#dashboard-screen .notification-item-copy strong { font-size: 11px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
#dashboard-screen .notification-item-copy time { font-size: 10px; color: var(--text-3); white-space: normal; }
#dashboard-screen .notification-item-copy small { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.7; }
#dashboard-screen .notification-item-copy :is(small, em) { overflow-wrap: anywhere; max-width: 100%; min-width: 0; }
#dashboard-screen .notification-item-copy em { display: inline-block; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: var(--text-3); font-size: 8px; font-weight: 500; letter-spacing: .08em; align-self: center; }
#dashboard-screen .notification-panel > footer { padding: 12px 18px; background: var(--surface-solid); }
@media (max-width: 1180px) and (min-width: 761px) {
  #dashboard-screen .oci-free-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #dashboard-screen .oci-free-tier-grid { grid-template-columns: minmax(0, 1fr); }
  #dashboard-screen .oci-capacity-card { padding: 18px; }
  #dashboard-screen .oci-capacity-remaining { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dashboard-screen .oci-capacity-remaining small { white-space: normal; line-height: 1.4; }
  /* Anchor to the actual wrapped header height, not a guessed fixed top offset. */
  #dashboard-screen .topbar { position: relative; }
  #dashboard-screen .notification-center { position: static; }
  #dashboard-screen .notification-panel { position: absolute; left: 16px; right: 14px; width: auto; max-width: none; top: calc(100% + 8px); }
  #dashboard-screen .notification-panel:not(.hidden) { max-height: max(120px, calc(100dvh - 180px)); }
  #dashboard-screen .notification-list { max-height: none; }
  #dashboard-screen .oci-capacity-card-head .status-label { max-width: 100%; text-align: left; }
}

/* Available content width changes when the sidebar expands; viewport breakpoints alone
   otherwise squeeze three capacity cards into ~850px at 1200px viewport width. */
#dashboard-screen #view-instances { container-type: inline-size; }
@container (max-width: 1000px) {
  #dashboard-screen .oci-free-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
  #dashboard-screen .oci-free-tier-grid { grid-template-columns: minmax(0, 1fr); }
}