:root {
--sidebar-bg: #1a2236;
--body-bg: #0f172a;
--card-bg: #1e2d45;
--input-bg: #162032;
--hover-bg: #243352;
--border: #2a3a55;
--navbar-bg: #111827;
--green: #10b981;
--green-dark: #059669;
--green-glow: rgba(16, 185, 129, 0.15);
--text-primary: #e8edf8;
--text-secondary:#94a3b8;
--text-muted: #5a7399;
}
[data-theme=“light”], body.light-mode {
--sidebar-bg: #f0f4f8;
--body-bg: #f8fafc;
--card-bg: #ffffff;
--input-bg: #ffffff;
--hover-bg: #eaf5f0;
--border: #d0d9e4;
--navbar-bg: #1a2236;
--green: #059669;
--green-dark: #047857;
--green-glow: rgba(5, 150, 105, 0.12);
--text-primary: #0f172a;
--text-secondary:#334155;
--text-muted: #64748b;
}
html, body {
background: var(–body-bg) !important;
color: var(–text-primary) !important;
min-height: 100vh;
font-size: 13px !important;
}
a { color: var(–text-secondary) !important; text-decoration: none !important; }
a:hover { color: var(–green) !important; }
hr { border-color: var(–border) !important; }
.text-muted { color: var(–text-muted) !important; }
.login-content,
.for-login,
.login-card-container {
background: transparent !important;
}
/* The white card */
.login-card, .page-card,
[class*=“login”] .card {
background: var(–card-bg) !important;
border: 1px solid var(–border) !important;
border-radius: 14px !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
color: var(–text-primary) !important;
}
.login-card .form-control,
.login-card input {
background: var(–input-bg) !important;
border: 1px solid var(–border) !important;
color: var(–text-primary) !important;
border-radius: 7px !important;
}
.login-card .form-control:focus,
.login-card input:focus {
border-color: var(–green) !important;
box-shadow: 0 0 0 3px var(–green-glow) !important;
outline: none !important;
}
.login-card .btn-primary,
.login-content .btn-primary {
background: var(–green) !important;
border: none !important;
border-radius: 7px !important;
color: #fff !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
height: 40px !important;
}
.login-card .btn-primary:hover {
background: var(–green-dark) !important;
}
.login-card .btn-default,
.login-content .btn-default {
background: var(–hover-bg) !important;
border: 1px solid var(–border) !important;
color: var(–text-secondary) !important;
border-radius: 7px !important;
height: 40px !important;
}
.login-card label,
.login-card .forgot-password,
.login-card .forgot {
color: var(–text-muted) !important;
font-size: 12px !important;
}
.login-card .forgot-password:hover { color: var(–green) !important; }
/* App name / logo area above login card */
.application-home-title,
.login-content h4,
.login-content .app-name {
color: var(–text-primary) !important;
}
.navbar, header.navbar {
background: var(–navbar-bg) !important;
border-bottom: 1px solid var(–border) !important;
}
.navbar a, .navbar .nav-link { color: #94a3b8 !important; }
.navbar .nav-link:hover { color: var(–text-primary) !important; }
.navbar .search-bar input, .navbar .form-control {
background: #1e2d45 !important;
border: 1px solid var(–border) !important;
color: var(–text-primary) !important;
border-radius: 6px !important;
}
[data-theme=“light”] .navbar,
body.light-mode .navbar { background: var(–navbar-bg) !important; }
[data-theme=“light”] .navbar a,
[data-theme=“light”] .navbar .nav-link,
body.light-mode .navbar a { color: #94a3b8 !important; }
.desk-sidebar { background: var(–sidebar-bg) !important; }
.standard-sidebar-item > a,
.sidebar-item a {
color: var(–text-secondary) !important;
border-radius: 6px !important;
font-size: 13px !important;
}
.standard-sidebar-item.selected > a,
.standard-sidebar-item:hover > a {
background: var(–hover-bg) !important;
color: var(–green) !important;
}
.sidebar-label,
.standard-sidebar-section .sidebar-section-head {
color: var(–text-muted) !important;
font-size: 10px !important;
letter-spacing: 1px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
}
.layout-main-section,
.page-container,
.page-body {
background: var(–body-bg) !important;
color: var(–text-primary) !important;
}
.page-head {
background: var(–sidebar-bg) !important;
border-bottom: 1px solid var(–border) !important;
}
.page-title .title-text,
.page-head .title-text {
color: var(–text-primary) !important;
font-weight: 600 !important;
}
.breadcrumb-container a { color: var(–text-muted) !important; }
.breadcrumb-container a:hover { color: var(–green) !important; }
.frappe-card, .form-section, .section-body, .number-card {
background: var(–card-bg) !important;
border: 1px solid var(–border) !important;
border-radius: 10px !important;
color: var(–text-primary) !important;
}
.frappe-card .widget,
.section-body .widget {
border: none !important;
box-shadow: none !important;
}
.form-section .section-head {
color: var(–text-muted) !important;
border-bottom: 1px solid var(–border) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
padding-bottom: 8px !important;
margin-bottom: 12px !important;
}
/* ================================================
WORKSPACE WIDGETS
================================================ */
.widget.shortcut-widget-box,
.widget.links-widget-box {
background: var(–card-bg) !important;
border: 1px solid var(–border) !important;
border-radius: 10px !important;
}
.widget.shortcut-widget-box:hover,
.widget.links-widget-box:hover { border-color: var(–green) !important; }
.links-widget-box .widget-body a,
.links-widget-box .link-item a {
color: var(–text-secondary) !important;
font-size: 13px !important;
}
.links-widget-box .widget-body a:hover { color: var(–green) !important; }
.widget .widget-head .widget-title {
color: var(–text-primary) !important;
font-weight: 600 !important;
font-size: 13px !important;
}
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.frappe-control input,
.frappe-control textarea,
.frappe-control select {
background: var(–input-bg) !important;
border: 1px solid var(–border) !important;
color: var(–text-primary) !important;
border-radius: 6px !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-control:focus,
input.form-control:focus,
.frappe-control input:focus {
border-color: var(–green) !important;
box-shadow: 0 0 0 3px var(–green-glow) !important;
outline: none !important;
}
.frappe-control .control-label,
.control-label {
color: var(–text-secondary) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
margin-bottom: 4px !important;
}
.frappe-control .help-box { color: var(–text-muted) !important; font-size: 11px !important; }
/* Read-only / disabled */
.frappe-control .like-disabled-input,
.frappe-control input[disabled],
.frappe-control input[readonly] {
background: var(–sidebar-bg) !important;
color: var(–text-secondary) !important;
border-color: var(–border) !important;
}
input[type=“checkbox”],
input[type=“radio”] {
opacity: 1 !important;
visibility: visible !important;
display: inline-block !important;
position: relative !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
min-height: 15px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
/* Use accent-color for native styling */
accent-color: var(–green) !important;
/* Remove any custom appearance that hides them */
appearance: auto !important;
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
}
/* List view row checkboxes */
.list-row-col.col-checkbox,
.row-check {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.list-row input[type=“checkbox”],
.list-row-head input[type=“checkbox”],
.row-check input[type=“checkbox”],
.col-checkbox input[type=“checkbox”] {
accent-color: var(–green) !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
opacity: 1 !important;
visibility: visible !important;
}
.dt-cell input[type=“checkbox”],
.dt-cell–header input[type=“checkbox”],
.data-table .dt-row-header input[type=“checkbox”] {
accent-color: var(–green) !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Frappe Check field */
.frappe-control[data-fieldtype=“Check”] .control-input,
.frappe-control[data-fieldtype=“Check”] .input-area {
display: flex !important;
align-items: center !important;
min-height: 28px !important;
}
.custom-control-input {
opacity: 1 !important;
width: 15px !important;
height: 15px !important;
min-width: 15px !important;
accent-color: var(–green) !important;
position: relative !important;
z-index: 1 !important;
}
.toggle-switch input[type=“checkbox”] + label {
background: var(–border) !important;
transition: background 0.2s !important;
}
.toggle-switch input[type=“checkbox”]:checked + label {
background: var(–green) !important;
}
.datatable, .data-table {
background: var(–card-bg) !important;
border-radius: 10px !important;
overflow: hidden !important;
border: 1px solid var(–border) !important;
}
/* Header row */
.datatable .dt-header,
.data-table .dt-header,
.list-row-head {
background: var(–sidebar-bg) !important;
color: var(–text-muted) !important;
border-bottom: 2px solid var(–border) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-weight: 600 !important;
}
/* Column headers inside datatable */
.dt-cell–header,
.dt-cell.dt-cell–header {
background: var(–sidebar-bg) !important;
color: var(–text-muted) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-weight: 600 !important;
border-bottom: 1px solid var(–border) !important;
}
/* Data rows */
.list-row, .frappe-list .list-row {
background: var(–card-bg) !important;
color: var(–text-primary) !important;
border-bottom: 1px solid var(–border) !important;
transition: background 0.1s !important;
}
.datatable .dt-row { border-bottom: 1px solid var(–border) !important; }
.datatable .dt-row:hover, .list-row:hover {
background: var(–hover-bg) !important;
}
.datatable .dt-cell {
border-color: var(–border) !important;
color: var(–text-primary) !important;
}
/* List subject links */
.list-row-col .list-subject a {
color: var(–text-primary) !important;
font-weight: 500 !important;
}
.list-row-col .list-subject a:hover { color: var(–green) !important; }
/* Child tables inside forms */
.grid-heading-row {
background: var(–sidebar-bg) !important;
border-bottom: 1px solid var(–border) !important;
}
.grid-heading-row .col { color: var(–text-muted) !important; font-size: 11px !important; font-weight: 600 !important; }
.grid-row { background: var(–card-bg) !important; border-bottom: 1px solid var(–border) !important; }
.grid-row:hover { background: var(–hover-bg) !important; }
.grid-row .row-index { color: var(–text-muted) !important; }
.grid-footer { background: var(–card-bg) !important; border-top: 1px solid var(–border) !important; }
.btn-primary {
background: var(–green) !important;
border: none !important;
color: #fff !important;
border-radius: 6px !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
transition: background 0.15s !important;
}
.btn-primary:hover { background: var(–green-dark) !important; color: #fff !important; }
.btn-default, .btn-secondary {
background: var(–input-bg) !important;
border: 1px solid var(–border) !important;
color: var(–text-secondary) !important;
border-radius: 6px !important;
transition: background 0.15s, color 0.15s !important;
}
.btn-default:hover, .btn-secondary:hover {
background: var(–hover-bg) !important;
color: var(–text-primary) !important;
}
.btn-danger {
background: #dc2626 !important;
border-color: #991b1b !important;
color: #fff !important;
}
.btn-danger:hover { background: #b91c1c !important; }
.modal-content {
background: var(–card-bg) !important;
border: 1px solid var(–border) !important;
border-radius: 14px !important;
color: var(–text-primary) !important;
overflow: hidden !important;
}
.modal-header {
background: var(–sidebar-bg) !important;
border-bottom: 1px solid var(–border) !important;
}
.modal-header .modal-title { color: var(–text-primary) !important; font-weight: 600 !important; }
.modal-footer {
background: var(–sidebar-bg) !important;
border-top: 1px solid var(–border) !important;
}
.modal-backdrop { background: rgba(0,0,0,0.65) !important; }
.dropdown-menu, .awesomplete > ul {
background: var(–sidebar-bg) !important;
border: 1px solid var(–border) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
.dropdown-item { color: var(–text-primary) !important; border-radius: 5px; }
.dropdown-item:hover { background: var(–hover-bg) !important; color: var(–green) !important; }
.dropdown-divider { border-color: var(–border) !important; }
.indicator-pill.green, .indicator.green {
background: rgba(16,185,129,0.12) !important;
color: #10b981 !important;
border: 1px solid rgba(16,185,129,0.3) !important;
}
.indicator-pill.red, .indicator.red {
background: rgba(239,68,68,0.12) !important;
color: #ef4444 !important;
border: 1px solid rgba(239,68,68,0.3) !important;
}
.indicator-pill.blue, .indicator.blue {
background: rgba(59,130,246,0.12) !important;
color: #3b82f6 !important;
border: 1px solid rgba(59,130,246,0.3) !important;
}
.indicator-pill.orange, .indicator.orange {
background: rgba(245,158,11,0.12) !important;
color: #f59e0b !important;
border: 1px solid rgba(245,158,11,0.3) !important;
}
.indicator-pill.gray, .indicator.gray {
background: rgba(100,116,139,0.12) !important;
color: #94a3b8 !important;
border: 1px solid rgba(100,116,139,0.3) !important;
}
.alert-success { background: rgba(16,185,129,.1) !important; border-color: var(–green) !important; color: #10b981 !important; }
.alert-danger { background: rgba(239,68,68,.1) !important; border-color: #ef4444 !important; color: #ef4444 !important; }
.alert-warning { background: rgba(245,158,11,.1) !important; border-color: #f59e0b !important; color: #f59e0b !important; }
.alert-info { background: rgba(59,130,246,.1) !important; border-color: #3b82f6 !important; color: #3b82f6 !important; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(–border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(–green); }
/* Frappe tag editor */
.tag-editor { background: var(–input-bg) !important; border: 1px solid var(–border) !important; }
.tag-editor input { background: transparent !important; color: var(–text-primary) !important; }
/* Select2 / awesomplete */
.awesomplete > ul > li { color: var(–text-primary) !important; }
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected=“true”] {
background: var(–hover-bg) !important;
color: var(–green) !important;
}
/* Frappe comment input */
.comment-box { background: var(–input-bg) !important; border: 1px solid var(–border) !important; border-radius: 8px !important; }
.timeline-content { color: var(–text-secondary) !important; }
/* Toolbar actions */
.page-actions .btn { margin-left: 4px !important; }
/* Number card */
.number-card .card-body { color: var(–text-primary) !important; }
.number-card .card-title { color: var(–text-muted) !important; font-size: 12px !important; }
.number-card .number { color: var(–text-primary) !important; font-weight: 700 !important; }