/* Only the home dashboard uses this palette while the other pages are migrated later. */
.app-main.dashboard-theme {
    background: #fff;
    color: #17263a;
}

.app-main.dashboard-theme > header {
    padding-bottom: 22px;
    border-bottom: 1px solid #d9e7f6;
}

.app-main.dashboard-theme #page-title {
    color: #14243d;
    letter-spacing: -.02em;
}

.app-main.dashboard-theme #page-subtitle { color: #596e86; }

.app-main.dashboard-theme > header .bg-slate-800 {
    background: #f2f8ff;
    border: 1px solid #cfe0f4;
}

.app-main.dashboard-theme > header .text-slate-300 { color: #305878; }
.app-main.dashboard-theme > header .text-green-400 { color: #16885e; }

.app-main.dashboard-theme #dashboard-page .glass-effect {
    background: #fff;
    border: 1px solid #cfe0f4;
    box-shadow: 0 8px 28px rgba(37, 91, 156, .06);
    backdrop-filter: none;
}

.app-main.dashboard-theme #dashboard-page .glass-effect:hover {
    border-color: #a8c9ed;
    box-shadow: 0 10px 30px rgba(37, 91, 156, .09);
}

.app-main.dashboard-theme #dashboard-page .text-white { color: #14243d; }
.app-main.dashboard-theme #dashboard-page .text-slate-400 { color: #536a84; }

.app-main.dashboard-theme #dashboard-page .bg-indigo-500\/20 { background: #e8f2ff; }
.app-main.dashboard-theme #dashboard-page .bg-green-500\/20 { background: #e6f7f0; }
.app-main.dashboard-theme #dashboard-page .bg-yellow-500\/20 { background: #fff3db; }
.app-main.dashboard-theme #dashboard-page .bg-purple-500\/20 { background: #f1ecff; }

.app-main.dashboard-theme #dashboard-page .text-indigo-400 { color: #286fc3; }
.app-main.dashboard-theme #dashboard-page .text-green-400 { color: #16885e; }
.app-main.dashboard-theme #dashboard-page .text-yellow-400 { color: #ad7113; }
.app-main.dashboard-theme #dashboard-page .text-purple-400 { color: #7350b5; }

@media (max-width: 1100px) {
    .app-main.dashboard-theme #dashboard-page > .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .app-main.dashboard-theme { padding: 20px; }
    .app-main.dashboard-theme #dashboard-page > .grid-cols-4,
    .app-main.dashboard-theme #dashboard-page > .grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}