/* Shared dashboard design system (Home, Sale, Purchase, Inventory).
   Replaces home-dashboard.css, sale-dashboard.css, purchase-dashboard.css,
   inventory-dashboard.css. All dashboards use the rx-dash-* classes below. */

.rx-dash {
    color: #17283a;
}

/* ---------- Compact header ---------- */

.rx-dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #cfdde8;
    border-radius: 8px;
    background: linear-gradient(120deg, rgba(38, 109, 150, 0.96), rgba(30, 45, 61, 0.96));
    box-shadow: 0 10px 22px rgba(15, 35, 54, 0.12);
    color: #fff;
}

.rx-dash-kicker {
    margin-bottom: 2px;
    color: #aee3cb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rx-dash-header h1 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}

.rx-dash-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rx-dash-header-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #dcebf3;
    font-size: 12px;
    font-weight: 700;
}

.rx-dash-header-actions a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.rx-dash-header-actions a:hover,
.rx-dash-header-actions a:focus {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}

/* ---------- Metric cards ---------- */

.rx-dash-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.rx-dash-metric {
    display: grid;
    align-content: center;
    gap: 3px;
    min-height: 84px;
    padding: 11px 13px;
    border: 1px solid #d4e0ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 35, 54, 0.05);
    color: #17283a;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.rx-dash-metric:hover,
.rx-dash-metric:focus {
    border-color: #a9bed1;
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.rx-dash-metric-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #5f7488;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.rx-dash-metric-label i {
    color: #256d96;
    font-size: 13px;
}

.rx-dash-metric strong {
    color: #12283b;
    font-size: 21px;
    font-weight: 800;
}

.rx-dash-metric small {
    color: #62788c;
    font-size: 12px;
    font-weight: 600;
}

.rx-dash-metric-primary .rx-dash-metric-label i {
    color: #1f7a4f;
}

.rx-dash-metric-warning .rx-dash-metric-label i {
    color: #8a650a;
}

.rx-dash-metric-danger .rx-dash-metric-label i {
    color: #9a2119;
}

/* ---------- Workflow / status strip ---------- */

.rx-dash-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.rx-dash-strip > a,
.rx-dash-strip > div {
    display: grid;
    align-content: center;
    gap: 2px;
    min-height: 64px;
    padding: 9px 12px;
    border: 1px solid #d4e0ea;
    border-radius: 8px;
    background: #f9fbfd;
    color: #17283a;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.rx-dash-strip > a:hover,
.rx-dash-strip > a:focus {
    border-color: #a9bed1;
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.rx-dash-strip span {
    color: #5f7488;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.rx-dash-strip strong {
    color: #12283b;
    font-size: 20px;
    font-weight: 800;
}

.rx-dash-strip small {
    color: #62788c;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Layout ---------- */

.rx-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
    gap: 10px;
}

.rx-dash-main,
.rx-dash-side {
    display: grid;
    align-content: start;
    gap: 10px;
}

/* ---------- Cards ---------- */

.rx-dash-card {
    border: 1px solid #d4e0ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 35, 54, 0.05);
}

.rx-dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    border-bottom: 1px solid #e3ebf2;
}

.rx-dash-card-header h2 {
    margin: 0;
    color: #14283a;
    font-size: 15px;
    font-weight: 800;
}

.rx-dash-card-header p {
    margin: 2px 0 0;
    color: #5f7488;
    font-size: 11px;
    font-weight: 600;
}

.rx-dash-card-header strong {
    color: #12283b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.rx-dash-card-header a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #c9d8e4;
    border-radius: 6px;
    color: #256d96;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.rx-dash-card-header a:hover,
.rx-dash-card-header a:focus {
    background: #f0f6fa;
    color: #256d96;
    text-decoration: none;
}

.rx-dash-card-header-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---------- Row lists ---------- */

.rx-dash-list {
    display: grid;
    gap: 7px;
    padding: 9px;
}

.rx-dash-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #dce6ef;
    border-radius: 7px;
    background: #f9fbfd;
    color: #17283a;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

a.rx-dash-row:hover,
a.rx-dash-row:focus {
    border-color: #a9bed1;
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.rx-dash-row > span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.rx-dash-row > span:last-child {
    text-align: right;
}

.rx-dash-row strong {
    overflow: hidden;
    color: #12283b;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-dash-row small {
    overflow: hidden;
    color: #5f7488;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-dash-row a {
    color: inherit;
    text-decoration: none;
}

.rx-dash-row a:hover,
.rx-dash-row a:focus {
    color: #256d96;
    text-decoration: none;
}

/* ---------- Mini stat grid (2-up cells inside a card) ---------- */

.rx-dash-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
}

.rx-dash-mini-grid > div,
.rx-dash-mini-grid > a {
    display: grid;
    gap: 2px;
    padding: 9px 11px;
    border: 1px solid #dce6ef;
    border-radius: 7px;
    background: #f9fbfd;
    color: #17283a;
    text-decoration: none;
}

.rx-dash-mini-grid > a:hover,
.rx-dash-mini-grid > a:focus {
    border-color: #a9bed1;
    color: inherit;
    text-decoration: none;
}

.rx-dash-mini-grid span {
    color: #5f7488;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.rx-dash-mini-grid strong {
    color: #12283b;
    font-size: 17px;
    font-weight: 800;
}

/* ---------- Footer strip inside a card (e.g. vendor paid today) ---------- */

.rx-dash-foot-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 9px 9px;
    padding: 8px 11px;
    border: 1px dashed #c8d8e4;
    border-radius: 7px;
    color: #5f7488;
    font-size: 12px;
    font-weight: 700;
}

.rx-dash-foot-strip strong {
    color: #12283b;
    font-size: 14px;
    font-weight: 800;
}

/* ---------- Quick access link grid ---------- */

.rx-dash-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
}

.rx-dash-link-grid a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #dce6ef;
    border-radius: 7px;
    background: #f9fbfd;
    color: #17283a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.rx-dash-link-grid a:hover,
.rx-dash-link-grid a:focus {
    border-color: #a9bed1;
    color: inherit;
    text-decoration: none;
    transform: translateY(-1px);
}

.rx-dash-link-grid i {
    color: #256d96;
}

.rx-dash-link-grid strong {
    color: #12283b;
    font-weight: 800;
}

/* ---------- Segmented control + icon buttons ---------- */

.rx-dash-segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid #cfdde8;
    border-radius: 7px;
    background: #f5f8fb;
}

.rx-dash-segmented button {
    min-height: 28px;
    padding: 4px 11px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #526a7e;
    font-size: 12px;
    font-weight: 700;
}

.rx-dash-segmented button.active {
    background: #256d96;
    color: #fff;
}

.rx-dash-icon-buttons {
    display: flex;
    gap: 6px;
}

.rx-dash-icon-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #c9d8e4;
    border-radius: 6px;
    background: #fff;
    color: #256d96;
}

.rx-dash-icon-buttons button:disabled {
    cursor: wait;
    opacity: 0.55;
}

.rx-dash-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ---------- Chart body, loading, alert ---------- */

.rx-dash-chart-body {
    min-height: 225px;
    padding: 6px 8px;
}

.rx-dash-chart-body .dx-chart {
    height: 240px !important;
    min-height: 240px;
}

.rx-dash-chart-body.d-none {
    display: none;
}

.rx-dash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
    color: #60768a;
    font-weight: 700;
}

.rx-dash-alert {
    display: grid;
    gap: 4px;
    margin: 8px;
    padding: 12px 14px;
    border: 1px solid #f2bab5;
    border-radius: 8px;
    background: #fff5f4;
    color: #9a2119;
}

/* ---------- Empty state ---------- */

.rx-dash-empty {
    padding: 12px;
    border: 1px dashed #c8d8e4;
    border-radius: 7px;
    color: #60768a;
    font-weight: 600;
    text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
    .rx-dash-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .rx-dash-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .rx-dash-link-grid,
    .rx-dash-mini-grid {
        grid-template-columns: 1fr;
    }

    .rx-dash-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .rx-dash-row > span:last-child {
        text-align: left;
    }
}