.doc-availability {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: min(300px, calc(100vw - 2rem));
    max-width: 300px;
    min-width: 260px;
    flex: 0 1 300px;
    margin: .5rem .75rem;
    padding: .5rem .6rem;
    color: #18384b;
    background: linear-gradient(100deg, #e9f8fa 0%, #f7fbfc 62%, #edf5f8 100%);
    border: 1px solid #b8dde4;
    border-left: 4px solid #17a2b8;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(31, 73, 94, .08);
}
.doc-availability[hidden] { display: none !important; }
.doc-availability__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    color: #fff;
    background: linear-gradient(135deg, #168fa3, #21b4c8);
    border-radius: 10px;
}
.doc-availability__content { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.doc-availability__eyebrow { color: #608093; font: 600 .57rem/1.15 'IBM Plex Mono', monospace; letter-spacing: .06em; }
.doc-availability__title { font-size: .86rem; line-height: 1.15; }
.doc-availability__detail { color: #668090; font-size: .68rem; line-height: 1.2; }
.doc-availability__refresh {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: #257287;
    background: rgba(255,255,255,.8);
    border: 1px solid #c8dce3;
    border-radius: 9px;
}
.doc-availability.is-warning { background: linear-gradient(100deg, #fff8e8, #fffdf7); border-color: #efd28c; border-left-color: #e0a423; }
.doc-availability.is-warning .doc-availability__icon { background: linear-gradient(135deg, #d79a17, #edb83f); }
.doc-availability.is-empty, .doc-availability.is-blocked { background: linear-gradient(100deg, #fff0f0, #fffafa); border-color: #efb9bd; border-left-color: #d84b57; }
.doc-availability.is-empty .doc-availability__icon,
.doc-availability.is-blocked .doc-availability__icon { background: linear-gradient(135deg, #c93f4c, #e4616c); }
.doc-availability.is-loading .doc-availability__refresh i { animation: doc-availability-spin .8s linear infinite; }
@keyframes doc-availability-spin { to { transform: rotate(360deg); } }
@media (max-width: 576px) {
    .doc-availability {
        width: calc(100% - 1.3rem);
        max-width: none;
        min-width: 0;
        margin: .5rem .65rem;
    }
    .doc-availability__detail { white-space: normal; }
}