.dmware-storage-admin {
    --dmw-blue: #3157d5;
    --dmw-navy: #14213d;
    --dmw-green: #16845b;
    --dmw-amber: #b66a08;
    --dmw-red: #c9364e;
    --dmw-border: #dce2ec;
    --dmw-muted: #667085;
    color: var(--dmw-navy);
    max-width: 1680px;
}

.dmware-storage-heading,
.dmware-storage-panel-heading {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.dmware-storage-heading {
    margin: 24px 0 18px;
}

.dmware-storage-heading h1 {
    color: var(--dmw-navy);
    font-size: 30px;
    margin: 2px 0 6px;
}

.dmware-storage-heading p,
.dmware-storage-panel-heading p {
    color: var(--dmw-muted);
    margin: 0;
}

.dmware-storage-eyebrow {
    color: var(--dmw-blue) !important;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dmware-storage-mode {
    align-items: center;
    background: #fff8e9;
    border: 1px solid #f0d58f;
    border-radius: 10px;
    display: flex;
    gap: 12px;
    margin: 16px 0;
    padding: 12px 16px;
}

.dmware-storage-mode.is-live {
    background: #ebf8f2;
    border-color: #aadbc8;
}

.dmware-storage-mode span {
    color: var(--dmw-muted);
}

.dmware-storage-cards {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 18px 0;
}

.dmware-storage-cards article,
.dmware-storage-panel {
    background: #fff;
    border: 1px solid var(--dmw-border);
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(20, 33, 61, .04);
}

.dmware-storage-cards article {
    border-top: 3px solid var(--dmw-blue);
    padding: 18px;
}

.dmware-storage-cards article.is-warning { border-top-color: var(--dmw-amber); }
.dmware-storage-cards article.is-muted { border-top-color: #9aa4b2; }
.dmware-storage-cards span { color: var(--dmw-muted); display: block; }
.dmware-storage-cards strong { display: block; font-size: 30px; margin-top: 8px; }
.dmware-storage-cards article > a { color: inherit; display: block; text-decoration: none; }

.dmware-storage-server-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}

.dmware-storage-server-grid article {
    background: #f8fafc;
    border: 1px solid var(--dmw-border);
    border-left: 4px solid #98a2b3;
    border-radius: 9px;
    padding: 14px;
}

.dmware-storage-server-grid article.is-success { border-left-color: var(--dmw-green); }
.dmware-storage-server-grid article.is-error { background: #fff7f8; border-left-color: var(--dmw-red); }
.dmware-storage-server-grid article > div { margin-bottom: 10px; }
.dmware-storage-server-grid article > div strong,
.dmware-storage-server-grid article > div span { display: block; }
.dmware-storage-server-grid article > div span,
.dmware-storage-server-grid article p { color: var(--dmw-muted); font-size: 12px; }
.dmware-storage-server-grid article p { margin: 9px 0 0; }
.dmware-storage-unmapped-wrap { margin-top: 18px; }

.dmware-storage-panel {
    margin: 18px 0;
    padding: 20px;
}

.dmware-storage-panel h2 { margin: 0 0 5px; }
.dmware-storage-filters { display: flex; gap: 8px; }
.dmware-storage-filters input { min-width: 280px; }

.dmware-storage-table-wrap {
    margin: 18px -20px -20px;
    overflow-x: auto;
}

.dmware-storage-table { border: 0; }
.dmware-storage-table th { background: #f7f9fc; color: #526071; font-size: 12px; letter-spacing: .025em; padding: 12px; text-transform: uppercase; }
.dmware-storage-table td { padding: 14px 12px; vertical-align: middle; }
.dmware-storage-table td > span,
.dmware-storage-table td > strong { display: block; }
.dmware-storage-table td > span { color: var(--dmw-muted); font-size: 12px; margin-top: 3px; }
.dmware-storage-table details { margin-top: 6px; }
.dmware-storage-table summary { color: var(--dmw-blue); cursor: pointer; font-size: 12px; }
.dmware-storage-table details ul { background: #fff; border: 1px solid var(--dmw-border); min-width: 280px; padding: 10px 10px 10px 28px; position: absolute; z-index: 5; }

.dmware-storage-usage { min-width: 155px; }
.dmware-storage-usage > strong,
.dmware-storage-usage > span { display: block; }
.dmware-storage-usage > span { color: var(--dmw-muted); font-size: 12px; margin-top: 3px; }

.dmware-storage-progress {
    background: #e7ebf2;
    border-radius: 999px;
    height: 6px;
    margin-top: 8px !important;
    overflow: hidden;
    width: 150px;
}

.dmware-storage-progress i { background: var(--dmw-green); display: block; height: 100%; }
.dmware-storage-usage.is-attention .dmware-storage-progress i { background: var(--dmw-amber); }
.dmware-storage-usage.is-warning .dmware-storage-progress i,
.dmware-storage-usage.is-notified .dmware-storage-progress i,
.dmware-storage-usage.is-critical .dmware-storage-progress i { background: var(--dmw-red); }

.dmware-storage-status {
    background: #edf1f6;
    border-radius: 999px;
    color: #566273;
    display: inline-block;
    font-size: 11px;
    font-weight: 750;
    padding: 5px 9px;
    white-space: nowrap;
}

.dmware-storage-status.is-normal,
.dmware-storage-status.is-recovered,
.dmware-storage-status.is-sent { background: #e7f6ef; color: #126a49; }
.dmware-storage-status.is-attention,
.dmware-storage-status.is-pending,
.dmware-storage-status.is-retry { background: #fff3d9; color: #935306; }
.dmware-storage-status.is-warning,
.dmware-storage-status.is-notified,
.dmware-storage-status.is-critical,
.dmware-storage-status.is-failed,
.dmware-storage-status.is-blocked { background: #fdebee; color: #ad2940; }

.dmware-storage-error { color: var(--dmw-red) !important; font-weight: 650; }
.dmware-storage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dmware-storage-actions a { color: var(--dmw-blue); text-decoration: none; }
.dmware-storage-empty { padding: 35px; text-align: center; }
.dmware-storage-empty strong,
.dmware-storage-empty span { display: block; }
.dmware-storage-empty span { color: var(--dmw-muted); margin-top: 6px; }

.dmware-storage-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(320px, .8fr) minmax(460px, 1.2fr);
}

.dmware-storage-grid .dmware-storage-panel { margin: 0; }
.dmware-storage-settings label:not(.dmware-storage-toggle) { border-bottom: 1px solid #edf0f5; display: grid; gap: 4px; grid-template-columns: 1fr 90px; padding: 13px 0; }
.dmware-storage-settings label > span { font-weight: 650; }
.dmware-storage-settings label small { color: var(--dmw-muted); grid-column: 1 / -1; }
.dmware-storage-settings input[type="number"] { width: 90px; }
.dmware-storage-toggle { align-items: center; display: flex; gap: 8px; margin-top: 16px; }

.dmware-storage-events { margin-top: 14px; max-height: 390px; overflow-y: auto; }
.dmware-storage-events article { align-items: flex-start; border-top: 1px solid #edf0f5; display: flex; gap: 12px; padding: 12px 0; }
.dmware-storage-events article:first-child { border-top: 0; }
.dmware-storage-events article div span,
.dmware-storage-events article div strong { display: block; }
.dmware-storage-events article div span { color: var(--dmw-muted); font-size: 12px; margin-top: 3px; }

.dmware-customer-storage {
    background: #f7f9fc;
    border: 1px solid #dce2ec;
    border-radius: 14px;
    color: #14213d;
    margin-top: 18px;
    padding: 18px;
}

.dmware-customer-storage.is-warning { background: #fff8f0; border-color: #efc889; }
.dmware-customer-storage-heading { align-items: flex-start; display: flex; gap: 15px; justify-content: space-between; }
.dmware-customer-storage-heading span:first-child { color: #667085; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dmware-customer-storage-heading h2 { font-size: 20px; margin: 3px 0 0; }
.dmware-customer-storage-value { margin-top: 16px; }
.dmware-customer-storage-value > strong { display: block; font-size: 17px; }
.dmware-customer-storage-value > span { color: #667085; display: block; font-size: 12px; margin-top: 4px; }
.dmware-customer-storage-value .dmware-storage-progress { width: 100%; }
.dmware-customer-mailbox { border-top: 1px solid #dce2ec; margin-top: 16px; padding-top: 14px; }
.dmware-customer-mailbox span,
.dmware-customer-mailbox strong,
.dmware-customer-mailbox small { display: block; }
.dmware-customer-mailbox span,
.dmware-customer-mailbox small { color: #667085; font-size: 12px; }
.dmware-customer-mailbox strong { margin: 3px 0; }
.dmware-customer-storage-advice { background: #fff; border-radius: 10px; margin-top: 16px; padding: 14px; }
.dmware-customer-storage-advice p { color: #5d6778; font-size: 13px; margin: 5px 0 10px; }
.dmware-customer-storage-advice div { display: flex; flex-wrap: wrap; gap: 12px; }
.dmware-customer-storage-advice a { color: #3157d5; font-size: 13px; font-weight: 700; }
.dmware-customer-storage-updated { color: #788395; font-size: 11px; margin: 14px 0 0; }

@media (max-width: 1180px) {
    .dmware-storage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dmware-storage-server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dmware-storage-grid { grid-template-columns: 1fr; }
}

@media (max-width: 782px) {
    .dmware-storage-heading,
    .dmware-storage-panel-heading,
    .dmware-storage-mode { align-items: stretch; flex-direction: column; }
    .dmware-storage-cards { grid-template-columns: 1fr; }
    .dmware-storage-server-grid { grid-template-columns: 1fr; }
    .dmware-storage-filters { flex-direction: column; }
    .dmware-storage-filters input { min-width: 0; width: 100%; }
}
