@layer components {
    .course-products-page {
        @apply min-w-0;
    }

    .course-products-title {
        @apply mb-2 text-3xl font-extrabold text-slate-900;
    }

    .course-products-intro {
        @apply mt-3 mb-5 text-base text-slate-600;
    }

    .course-products-toolbar {
        @apply my-5;
    }

    .course-products-search {
        @apply relative block;
    }

    .course-products-search .fa-magnifying-glass {
        @apply pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400;
    }

    .course-products-search input {
        @apply block w-full rounded-xl border border-slate-200 bg-white py-4 pr-4 pl-11 text-base text-slate-800 shadow-sm outline-none transition;
    }

    .course-products-search input:focus {
        @apply border-primary ring-2 ring-primary/10;
    }

    .course-products-table-shell {
        @apply my-5 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    .course-products-table-shell .course-description {
        @apply mt-1 mb-0 text-sm text-slate-600;
    }

    .course-products-table-shell .more-links {
        @apply mt-1 mb-0 text-sm;
    }

    .course-products-table-shell .locale {
        @apply mt-2 mb-0;
    }

    /* Match Products pagination styling for the course index table. */
    #coursesTable_wrapper .dataTables_paginate {
        float: none;
        @apply flex items-center justify-end gap-[0.55rem];
    }

    #coursesTable_wrapper .dataTables_paginate .ellipsis {
        @apply text-slate-500;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button {
        min-width: 2.35rem;
        height: 2.35rem;
        margin: 0;
        padding: 0.35rem 0.7rem;
        display: inline-flex;
        @apply items-center justify-center rounded-[0.8rem] border border-slate-300 bg-white font-semibold text-slate-600 shadow-none;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button:hover,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.current,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.current:hover {
        @apply border-primary bg-primary text-white;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button.previous,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 0;
        color: transparent;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button.previous::before,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.next::before {
        font-family: "Font Awesome 6 Free";
        font-size: 0.95rem;
        font-weight: 900;
        color: #334155;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button.previous::before {
        content: "\f053";
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button.next::before {
        content: "\f054";
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button.previous:hover::before,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.next:hover::before,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.previous.current::before,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.next.current::before {
        color: #fff;
    }

    #coursesTable_wrapper .dataTables_paginate > span {
        @apply flex items-center gap-[0.55rem];
    }

    .course-completed-header {
        @apply mb-8;
    }

    .course-completed-title {
        @apply text-3xl font-bold text-slate-900;
    }

    .course-completed-subtitle {
        @apply mt-2 text-xl text-slate-500;
    }

    .course-page-header {
        @apply mb-8;
    }

    .course-page-title {
        @apply text-3xl font-bold text-slate-900;
    }

    .course-page-subtitle {
        @apply mt-2 text-xl text-slate-500;
    }

    .course-completions-toolbar,
    .course-list-toolbar {
        @apply grid gap-3;
    }

    @media (min-width: 992px) {
        .course-completions-toolbar,
        .course-list-toolbar {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }
    }

    .course-completions-search,
    .course-list-search {
        @apply relative;
    }

    .course-completions-search .fa-magnifying-glass,
    .course-list-search .fa-magnifying-glass {
        @apply pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-slate-400;
    }

    .course-completions-search input,
    .course-list-search input {
        @apply h-14 rounded-[0.9rem] border-primary pl-11 text-base;
    }

    .course-completions-select,
    .course-list-select {
        @apply h-14 min-w-30 rounded-[1rem] border border-slate-300 px-4 font-semibold text-slate-900 shadow-none;
    }

    .course-completions-table-shell,
    .course-list-table-shell {
        @apply mt-5 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    .course-index-page__title {
        @apply mb-2 text-3xl font-bold text-slate-900;
    }

    .course-index-page__intro {
        @apply mb-5 text-base text-slate-600;
    }

    .course-list-table-footer,
    .course-completions-table-footer {
        @apply flex flex-col gap-[0.85rem] px-5 py-4 pb-5;
    }

    @media (min-width: 768px) {
        .course-list-table-footer,
        .course-completions-table-footer {
            @apply flex-row items-center justify-between;
        }
    }

    .course-list-table-footer__summary,
    .course-completions-table-footer__summary {
        @apply text-[0.95rem] text-slate-600;
    }

    .course-list-table-footer__pagination,
    .course-completions-table-footer__pagination {
        @apply flex items-center gap-[0.55rem];
    }

    .trainings-page {
        @apply mt-2;
    }

    .trainings-page__header {
        @apply mb-8;
    }

    .trainings-list {
        @apply space-y-4;
    }

    .trainings-list__item {
        @apply flex flex-col gap-4 rounded-2xl border border-slate-200 bg-white px-5 py-5 shadow-sm md:flex-row md:items-center md:gap-5 md:px-6;
    }

    .trainings-list__icon {
        @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-xl text-primary;
    }

    .trainings-list__content {
        @apply min-w-0 flex-1;
    }

    .trainings-list__name {
        @apply text-[1.05rem] font-bold text-slate-900 md:text-[1.1rem];
    }

    .trainings-list__meta {
        @apply mt-2 flex items-center gap-2 text-[0.95rem] font-medium text-slate-500;
    }

    .trainings-list__score {
        @apply w-full md:w-auto md:min-w-[10.5rem] md:text-right;
    }

    .trainings-list__score-label {
        @apply text-[0.9rem] font-semibold text-slate-400;
    }

    .trainings-list__score-row {
        @apply mt-1 flex flex-wrap items-center gap-3 md:justify-end;
    }

    .trainings-list__score-value {
        @apply inline-flex items-center gap-2 text-[1.05rem] font-extrabold;
    }

    .trainings-list__score-value--excellent {
        @apply text-green-600;
    }

    .trainings-list__score-value--good {
        @apply text-blue-600;
    }

    .trainings-list__badge {
        @apply inline-flex items-center rounded-full px-4 py-1.5 text-[0.9rem] font-semibold;
    }

    .trainings-list__badge--excellent {
        @apply bg-green-100 text-green-700;
    }

    .trainings-list__badge--good {
        @apply bg-blue-100 text-blue-700;
    }

    /* Course index table shell (one-column layout like Products). */
    .container .panel:has(#coursesTable) {
        @apply rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    .container .panel:has(#coursesTable) .panel-heading {
        @apply hidden;
    }

    .container .panel:has(#coursesTable) .panel-body {
        @apply p-6 md:p-8;
    }

    #coursesTable_wrapper {
        @apply mt-5;
    }

    #coursesTable {
        margin: 0;
    }

    #coursesTable thead th {
        @apply border-b border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700;
    }

    #coursesTable tbody td {
        @apply border-t-0 border-b border-slate-100 px-4 py-3 align-middle text-sm text-slate-700;
    }

    #coursesTable tbody tr:last-child td {
        @apply border-b-0;
    }

    #coursesTable_wrapper .dataTables_filter input,
    #coursesTable_wrapper .dataTables_length select {
        @apply h-10 rounded-[0.8rem] border border-slate-300 px-3 text-sm text-slate-900 shadow-none;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button {
        @apply rounded-[0.8rem] border border-slate-300 bg-white;
    }

    #coursesTable_wrapper .dataTables_paginate .paginate_button.current,
    #coursesTable_wrapper .dataTables_paginate .paginate_button.current:hover,
    #coursesTable_wrapper .dataTables_paginate .paginate_button:hover {
        @apply border-primary bg-primary text-white;
    }

    /* Course completed page (two-column account shell like Submissions/Transactions). */
    section.course-index {
        @apply mx-auto mt-5 w-full max-w-[1170px] px-4 md:px-8;
    }

    section.course-index > .row {
        margin: 0 auto;
        max-width: 72rem;
        @apply overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    section.course-index > .row > [class*='col-'] {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        @apply p-0;
    }

    section.course-index .account-menu {
        @apply rounded-none border-0 bg-slate-50 p-4 shadow-none md:p-6;
    }

    section.course-index .account-menu > ul {
        @apply space-y-1;
    }

    section.course-index .account-menu .user-menu-item {
        @apply m-0;
    }

    section.course-index .account-menu a {
        @apply flex items-center rounded-2xl px-4 py-3 text-[1.05rem] font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900;
    }

    section.course-index .account-menu .active > a,
    section.course-index .account-menu a.active {
        @apply bg-primary text-white hover:bg-primary-strong hover:text-white;
    }

    section.course-index #courseCompletionsTable_wrapper {
        @apply p-4 md:p-8;
    }

    section.course-index .col-md-8.mt-4.pt-1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #courseCompletionsTable {
        margin: 0;
    }

    #courseCompletionsTable thead th {
        @apply border-b border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700;
    }

    #courseCompletionsTable tbody td {
        @apply border-t-0 border-b border-slate-100 px-4 py-3 align-middle text-sm text-slate-700;
    }

    #courseCompletionsTable tbody tr:last-child td {
        @apply border-b-0;
    }

    #courseCompletionsTable_wrapper .dataTables_filter input,
    #courseCompletionsTable_wrapper .dataTables_length select {
        @apply h-10 rounded-[0.8rem] border border-slate-300 px-3 text-sm text-slate-900 shadow-none;
    }

    #courseCompletionsTable_wrapper .dt-buttons .btn {
        @apply h-10 rounded-[0.8rem] border border-slate-300 bg-white px-4 text-sm font-semibold text-slate-700;
    }

    #courseCompletionsTable_wrapper .dt-buttons .btn:hover,
    #courseCompletionsTable_wrapper .dt-buttons .btn:focus {
        @apply border-primary bg-primary text-white;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button {
        @apply rounded-[0.8rem] border border-slate-300 bg-white;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.current,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.current:hover,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button:hover {
        @apply border-primary bg-primary text-white;
    }

    @media (min-width: 1024px) {
        section.course-index > .row {
            display: grid;
            grid-template-columns: 260px minmax(0, 1fr);
            align-items: stretch;
        }

        section.course-index > .row > .col-md-4,
        section.course-index > .row > .col-md-8 {
            width: auto !important;
        }
    }

    section.course-index #courseCompletionsTable_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    section.course-index #courseCompletionsTable_wrapper .col-md-6 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    @media (min-width: 992px) {
        section.course-index #courseCompletionsTable_wrapper .col-md-6 {
            width: 50%;
        }
    }

    section.course-index #courseCompletionsTable_wrapper .dataTables_filter,
    section.course-index #courseCompletionsTable_wrapper .dataTables_length,
    section.course-index #courseCompletionsTable_wrapper .dt-buttons {
        @apply mb-3 mt-0;
    }

    section.course-index #courseCompletionsTable_wrapper .dt-buttons {
        display: none !important;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate {
        float: none;
        @apply flex items-center justify-end gap-[0.55rem];
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .ellipsis {
        @apply text-slate-500;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button {
        min-width: 2.35rem;
        height: 2.35rem;
        margin: 0;
        padding: 0.35rem 0.7rem;
        display: inline-flex;
        @apply items-center justify-center rounded-[0.8rem] border border-slate-300 bg-white font-bold text-slate-600 shadow-none;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button:hover,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.current,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.current:hover {
        @apply border-primary bg-primary text-white;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.previous,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 0;
        color: transparent;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.previous::before,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.next::before {
        font-family: "Font Awesome 6 Free";
        font-size: 0.95rem;
        font-weight: 900;
        color: #334155;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.previous::before {
        content: "\f053";
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.next::before {
        content: "\f054";
    }

    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.previous:hover::before,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.next:hover::before,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.previous.current::before,
    #courseCompletionsTable_wrapper .dataTables_paginate .paginate_button.next.current::before {
        color: #fff;
    }

    #courseCompletionsTable_wrapper .dataTables_paginate > span {
        @apply flex items-center gap-[0.55rem];
    }

    /* Course index page should mirror Products single-column content card. */
    section.container > .panel:has(#coursesTable) {
        @apply mt-0 mb-0 rounded-2xl border border-slate-200 bg-white shadow-sm;
    }

    section.container > .panel:has(#coursesTable) .panel-heading {
        @apply hidden;
    }

    section.container > .panel:has(#coursesTable) .panel-body {
        @apply p-6 md:p-8;
    }

    #coursesTable_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    #coursesTable_wrapper .col-sm-6,
    #coursesTable_wrapper .col-sm-8,
    #coursesTable_wrapper .col-sm-4 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    @media (min-width: 992px) {
        #coursesTable_wrapper .col-sm-6 {
            width: 50%;
        }

        #coursesTable_wrapper .col-sm-8 {
            width: 66.666667%;
        }

        #coursesTable_wrapper .col-sm-4 {
            width: 33.333333%;
        }
    }

    #coursesTable_wrapper .dataTables_filter,
    #coursesTable_wrapper .dataTables_length {
        @apply mt-0 mb-3;
    }
}
