on the dashboard, turning the
"Total number of posts" tile purple while .small-box h3/p kept their dark
text — an unreadable tile. Same specificity, later rule, so it won. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn.bg-success,
a.btn.bg-success,
button.bg-success,
.btn-success {
background-color: var(--dc-purple) !important;
border-color: var(--dc-purple) !important;
color: #fff !important;
}
.btn-primary:hover,
.btn.bg-success:hover,
.btn-success:hover {
background-color: var(--dc-purple-deep) !important;
border-color: var(--dc-purple-deep) !important;
}
.btn.bg-success a,
.btn-success a,
.btn-primary a {
color: #fff !important;
}
.btn-default,
.btn-secondary {
background-color: var(--dc-surface) !important;
border-color: var(--dc-border) !important;
color: var(--dc-text-2) !important;
}
.btn-default:hover,
.btn-secondary:hover {
background-color: var(--dc-surface-2) !important;
color: var(--dc-text) !important;
}
/* Destructive actions stay loud on purpose. An earlier draft made these a
soft pink, which looked better and read as harmless — wrong signal for a
button that deletes a user account. */
.btn-danger {
background-color: var(--dc-crit) !important;
border-color: var(--dc-crit) !important;
color: #fff !important;
}
.btn-danger:hover {
background-color: #8f2822 !important;
border-color: #8f2822 !important;
}
.btn-danger a,
.btn-danger a:hover {
color: #fff !important;
}
.btn-sm {
padding: 6px 11px;
font-size: 12px;
}
/* --------------------------------------------------------------- badges */
.badge {
border-radius: 6px;
font-size: 11.5px;
font-weight: 600;
padding: 4px 8px;
letter-spacing: 0;
}
.badge.badge-success,
.badge.bg-success {
background-color: var(--dc-pos-soft) !important;
color: var(--dc-pos) !important;
}
.badge.badge-warning,
.badge.bg-warning {
background-color: var(--dc-warn-soft) !important;
color: var(--dc-warn) !important;
}
.badge.badge-danger,
.badge.bg-danger {
background-color: var(--dc-crit-soft) !important;
color: var(--dc-crit) !important;
}
.badge.badge-primary,
.badge.bg-primary,
.badge.badge-info,
.badge.bg-info {
background-color: var(--dc-soft) !important;
color: var(--dc-purple) !important;
}
/* ---------------------------------------------------------------- forms */
.form-control,
.custom-select {
border: 1px solid var(--dc-border);
border-radius: var(--dc-radius-sm);
font-size: 13px;
padding: 10px 13px;
height: auto;
color: var(--dc-text);
background-color: var(--dc-surface);
}
.form-control:focus,
.custom-select:focus {
border-color: var(--dc-purple);
box-shadow: 0 0 0 3px rgba(133, 63, 172, 0.14);
}
label {
font-size: 12.5px;
font-weight: 600;
color: var(--dc-text-2);
margin-bottom: 6px;
}
.form-control::placeholder {
color: #a49bae;
}
/* ------------------------------------------------------------ modals etc */
.modal-content {
border: none;
border-radius: var(--dc-radius);
box-shadow: 0 18px 50px rgba(36, 20, 50, 0.18);
}
.modal-header {
border-bottom: 1px solid var(--dc-border);
padding: 16px 20px;
}
.modal-footer {
border-top: 1px solid var(--dc-border);
padding: 14px 20px;
}
/* Links */
a {
color: var(--dc-purple);
}
a:hover {
color: var(--dc-purple-deep);
}
/* Breadcrumb */
.breadcrumb {
background-color: transparent;
padding: 0;
font-size: 12.5px;
}
.breadcrumb-item.active {
color: var(--dc-muted);
}
/* Alerts */
.alert-success {
background-color: var(--dc-pos-soft);
border-color: var(--dc-pos-soft);
color: var(--dc-pos);
border-radius: var(--dc-radius-sm);
}
.alert-danger {
background-color: var(--dc-crit-soft);
border-color: var(--dc-crit-soft);
color: var(--dc-crit);
border-radius: var(--dc-radius-sm);
}
.alert-warning {
background-color: var(--dc-warn-soft);
border-color: var(--dc-warn-soft);
color: var(--dc-warn);
border-radius: var(--dc-radius-sm);
}
/* Login / registration cards, which sit outside the AdminLTE shell */
.login-box .card,
.register-box .card {
border-radius: var(--dc-radius);
border: 1px solid var(--dc-border);
}
.login-logo a,
.register-logo a {
color: transparent;
font-size: 0;
display: inline-block;
width: 230px;
height: 28px;
background: url("../img/dc-wordmark.png") center / contain no-repeat;
}
/* ================================================================
* Specificity overrides
*
* Everything below fights a NAMED rule that already exists, rather
* than a default. Each carries the file and line it is beating, so
* the next person can tell intent from cargo-cult !important.
* ================================================================ */
/* custom-style.css:268 — .layout-fixed .main-sidebar paints a purple gradient.
Two classes, so the plain .main-sidebar rule above loses to it. */
.layout-fixed .main-sidebar,
.layout-fixed .main-sidebar .sidebar {
background: var(--dc-surface);
}
/* custom-style.css:278 — brand-link is pinned to 100px with a 64px logo,
sized for the old cropped square. The real lockup wants ~30px. */
.main-sidebar .brand-link {
height: auto !important;
padding: 16px !important;
align-items: center;
}
.main-sidebar .brand-link .brand-image {
/* content:url() makes this a replaced element; width must be explicit or
it resolves to the source PNG's intrinsic 1058px and collapses. */
width: 30px !important;
height: auto !important;
max-height: none !important;
margin: 0 10px 0 0 !important;
}
.main-sidebar .brand-link .brand-text {
line-height: 1 !important;
margin-left: 0 !important;
}
/* custom-style.css:272 — .sidebar max-height assumed the 100px brand block */
.sidebar {
max-height: calc(100vh - 63px);
}
/* custom-style.css:300 — .nav-item .nav-link forces height:50px, which makes
every row a tall slab instead of a compact pill. */
.main-sidebar .nav-sidebar .nav-item .nav-link {
height: auto;
margin: 1px 8px;
padding: 9px 10px;
}
/* custom-style.css:312 AND adminlte.min.css both set a dark active pill
(#5e2a84 / #9b59b6) with a white border. The design is a soft lavender
pill with purple text. */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active:hover {
background-color: var(--dc-soft);
color: var(--dc-purple);
border: none;
box-shadow: none;
font-weight: 600;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active p {
color: var(--dc-purple);
}
/* adminlte.min.css — sidebar-dark-primary sets a pale grey link colour that
was legible on the old dark gradient and is not on white. */
.sidebar-dark-primary .nav-sidebar .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-link p {
color: var(--dc-text-2);
}
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link p {
color: var(--dc-muted) !important;
}
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover p {
background-color: var(--dc-surface-2);
color: var(--dc-text) !important;
}
/* custom-style.css:858 — submenu active state, set with !important */
.nav-treeview > .nav-item > .nav-link.active,
.nav-treeview > .nav-item > .nav-link.active p {
background-color: var(--dc-soft) !important;
color: var(--dc-purple) !important;
border: none !important;
}
/* The .form-control / .custom-select padding above is sized for full-height
inputs; DataTables' length menu and search use the -sm variants. */
.custom-select-sm,
select.custom-select-sm {
padding: 5px 26px 5px 9px;
min-width: 68px;
font-size: 12.5px;
height: auto;
}
.form-control-sm {
padding: 6px 10px;
font-size: 12.5px;
height: auto;
}
/* Decorative tile glyph — pull it clear of the number and label */
.small-box > .icon,
.small-box:hover > .icon {
font-size: 46px;
opacity: 0.09;
top: 12px;
right: 14px;
}
/* ================================================================
* Auth pages (login, forgot password, invalid email)
*
* These do NOT extend the shared layout — each is standalone HTML
* with its own , so they need the stylesheet linked directly
* and they carry their own .log-* class names rather than AdminLTE's.
*
* custom-style.css styles these with #681acc buttons and #6f42c1
* headings — two more off-brand purples. Selectors here are one class
* deeper than the rules they replace.
* ================================================================ */
.wrapper.log-page {
background: var(--dc-surface);
}
/* The left half is an empty div with no styling at all today — the login
screen is currently a blank white panel beside the form. This is the
brand panel from the Figma login screen. */
.log-page .log-left-section {
height: 100vh;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #853fac 0%, #5b2578 55%, #3d1b52 100%);
}
/* Real reverse wordmark, top-left */
.log-page .log-left-section::before {
content: "";
position: absolute;
top: 56px;
left: 56px;
width: 220px;
height: 27px;
background: url("../img/dc-wordmark-white.png") left center / contain no-repeat;
}
/* Heart watermark, bled off the bottom-right corner */
.log-page .log-left-section::after {
content: "";
position: absolute;
right: -70px;
bottom: -80px;
width: 440px;
height: 386px;
opacity: 0.08;
background: url("../img/dc-heart-white.png") center / contain no-repeat;
}
/* custom-style.css:.log-form-section .mentor-logo h2 re-types the wordmark
as text in #6f42c1. Replace it with the artwork, keeping the text in the
DOM for screen readers. */
.log-page .log-form-section .mentor-logo h2 {
display: block;
width: 200px;
height: 24px;
color: transparent;
font-size: 0;
background: url("../img/dc-wordmark.png") left center / contain no-repeat;
margin: 0;
}
.log-page .log-content h4 {
color: var(--dc-muted);
font-size: 15px;
font-weight: 400;
margin: 16px 0 34px;
}
.log-page .log-content h4 span {
color: var(--dc-text);
font-weight: 600;
}
.log-page .log-form .form-group label {
color: var(--dc-text-2);
font-size: 12.5px;
font-weight: 600;
margin-bottom: 6px;
}
/* Beats custom-style.css .log-form .form-group input (20px bold, 90% wide) */
.log-page .log-form .form-group input {
width: 100%;
padding: 12px 14px;
margin-bottom: 6px;
font-size: 14px;
font-weight: 400;
color: var(--dc-text);
border: 1px solid var(--dc-border);
border-radius: var(--dc-radius-sm);
background-color: var(--dc-surface);
}
.log-page .log-form .form-group input:focus {
border-color: var(--dc-purple);
box-shadow: 0 0 0 3px rgba(133, 63, 172, 0.14);
}
/* The submit button carries .btn.btn-default, which the theme's own ghost
rule would otherwise turn white-on-white. This is the primary action. */
.log-page .log-section button,
.log-page .log-section .btn.btn-default {
background: var(--dc-purple) !important;
background-color: var(--dc-purple) !important;
border: none !important;
color: #fff !important;
border-radius: var(--dc-radius-sm) !important;
padding: 12px 30px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.log-page .log-section button:hover,
.log-page .log-section .btn.btn-default:hover {
background-color: var(--dc-purple-deep) !important;
}
.log-page .log-form .forgotpsw label a {
color: var(--dc-purple);
font-size: 12.5px;
font-weight: 500;
}
.log-page .alert {
border-radius: var(--dc-radius-sm);
font-size: 13px;
padding: 11px 14px;
}
/* On narrow screens the two halves stack; hide the brand panel rather than
letting it take a full screen height above the form. */
@media (max-width: 991px) {
.log-page .log-left-section {
display: none;
}
.log-page .log-form-section {
width: 100% !important;
padding-left: 8% !important;
padding-right: 8% !important;
}
}
/* header.blade.php gives the logout popup's CANCEL and LOGOUT the same
.btn-primary class, so both render identically and the safe choice is
indistinguishable from the one that ends your session. Demote CANCEL to
the secondary style. Markup is untouched — this is selector-only. */
.pop-inner .btn.btn-primary.cancel {
background-color: var(--dc-surface) !important;
border: 1px solid var(--dc-border) !important;
color: var(--dc-text-2) !important;
}
.pop-inner .btn.btn-primary.cancel:hover {
background-color: var(--dc-surface-2) !important;
}
.pop-inner {
border-radius: var(--dc-radius);
}
.pop-inner .logouttext {
font-size: 17px;
font-weight: 600;
color: var(--dc-text);
margin-bottom: 18px;
}
/* ================================================================
* Wide tables
*
* Several list pages put a wide table straight into .card-body with
* no .table-responsive wrapper — mentorship_payment, counterformlist,
* mentor_report and uploadwebinarlist among them. The card clips, so
* the right-hand columns become unreachable rather than merely ugly.
*
* Scoped with :has() so it only applies to card bodies that actually
* contain a table. Checked first that no themed page puts a
* .dropdown-menu inside one, which a scroll container would clip —
* the only page that does is webinar_call, which is standalone and
* does not load this stylesheet.
* ================================================================ */
.card > .card-body:has(> table.table),
.card > .card-body:has(> form > table.table) {
overflow-x: auto;
}
.table-responsive {
overflow-x: auto;
}
/* btn-info is the "View" action on the company pages. Left as Bootstrap
teal by the first pass, which is the one off-brand colour remaining. */
.btn-info {
background-color: var(--dc-soft) !important;
border-color: var(--dc-soft) !important;
color: var(--dc-purple) !important;
}
.btn-info:hover {
background-color: var(--dc-purple) !important;
border-color: var(--dc-purple) !important;
color: #fff !important;
}
.btn-info a,
.btn-info:hover a {
color: inherit !important;
}
/* ================================================================
* Coloured table heads
*
* 36 of the themed pages write (and a few
* bg-info / bg-dark). Those Bootstrap utilities carry !important and
* paint the head a saturated colour behind the cells.
*
* custom-style.css:459 then sets .action { color:#fff } so the Action
* column's label is white — legible on the old blue head, invisible on
* a light one. Both have to be handled together or the column header
* disappears.
* ================================================================ */
.table thead[class*="bg-"],
table.dataTable thead[class*="bg-"] {
background-color: var(--dc-surface-2) !important;
}
.table thead[class*="bg-"] th,
.table thead[class*="bg-"] td,
table.dataTable thead[class*="bg-"] th,
table.dataTable thead[class*="bg-"] td {
background-color: var(--dc-surface-2) !important;
color: var(--dc-muted) !important;
}
/* custom-style.css:459 / :463 force this white */
.table thead th.action,
.table thead th.action span,
.table thead .action,
.table thead .action span {
color: var(--dc-muted) !important;
}
/* pages/user_report.blade.php builds its header row from
rather than
. Every header rule above keys off th, so those five cells picked up
no header styling at all and the labels rendered near-invisible. Covering
td inside thead costs nothing and stops one page looking broken. */
.table thead td {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dc-muted) !important;
background-color: var(--dc-surface-2) !important;
}