/* =========================================================================
   Pluto Theme — Neural Brand Colors
   =========================================================================
   Color-only overrides. All layout, typography, spacing, and structure
   use Pluto's defaults.
   ========================================================================= */


/* =========================================================================
   1. Color Design Tokens
   ========================================================================= */

:root {
	/* Brand colours — Neural identity
	   Base palette: #1B1548 · #3E97D1 · #AEAEAE · #FFFFFF
	   All derived values are WCAG AAA compliant (≥ 7:1 for text). */
	--pluto-primary:           #215070;
	--pluto-primary-light:     #3E97D1;
	--pluto-primary-dark:      #1B1548;
	--pluto-primary-bg:        rgba(33, 80, 112, 0.08);

	--pluto-secondary:         #1B1548;
	--pluto-secondary-light:   #565271;
	--pluto-secondary-dark:    #1B1548;

	--pluto-accent:            #215070;
	--pluto-accent-light:      #3E97D1;
	--pluto-accent-dark:       #1B1548;

	/* Neutral palette — blends of #AEAEAE → #1B1548, darkened for AAA text contrast */
	--pluto-white:             #FFFFFF;
	--pluto-gray-50:           #FAFAFA;
	--pluto-gray-100:          #F5F5F5;
	--pluto-gray-200:          #EDEDED;
	--pluto-gray-300:          #E3E3E3;
	--pluto-gray-400:          #D2D2D2;
	--pluto-gray-500:          #565271;
	--pluto-gray-600:          #4E4B6C;
	--pluto-gray-700:          #403B62;
	--pluto-gray-800:          #312C57;
	--pluto-gray-900:          #1B1548;
	--pluto-black:             #1B1548;

	/* Semantic / feedback colours — darkened for AAA on their light backgrounds */
	--pluto-success:           #0C5F2B;
	--pluto-success-light:     #dcfce7;
	--pluto-warning:           #714D02;
	--pluto-warning-light:     #fef9c3;
	--pluto-danger:            #951919;
	--pluto-danger-light:      #fee2e2;
	--pluto-info:              #215070;
	--pluto-info-light:        rgba(33, 80, 112, 0.12);
}

/* Dark mode overrides */
[data-theme="dark"] {
	--pluto-white:       #1B1548;
	--pluto-gray-50:     #221D4D;
	--pluto-gray-100:    #2A2452;
	--pluto-gray-200:    #312C57;
	--pluto-gray-300:    #403B62;
	--pluto-gray-400:    #4E4B6C;
	--pluto-gray-500:    #AEAEAE;
	--pluto-gray-600:    #D2D2D2;
	--pluto-gray-700:    #E3E3E3;
	--pluto-gray-800:    #F5F5F5;
	--pluto-gray-900:    #FFFFFF;
	--pluto-black:       #FFFFFF;

	--pluto-primary-bg:      rgba(33, 80, 112, 0.15);
	--pluto-success-light:   rgba(12, 95, 43, 0.20);
	--pluto-warning-light:   rgba(113, 77, 2, 0.20);
	--pluto-danger-light:    rgba(149, 25, 25, 0.20);
	--pluto-info-light:      rgba(33, 80, 112, 0.18);
}


/* =========================================================================
   2. Global Color Overrides
   ========================================================================= */

body {
	color: var(--pluto-gray-900);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--pluto-gray-900);
}

a {
	color: var(--pluto-primary);
}

a:hover {
	color: var(--pluto-primary-dark);
}

code {
	background: var(--pluto-gray-100);
	color: var(--pluto-accent-dark);
}

pre {
	background: var(--pluto-gray-900);
	color: var(--pluto-gray-100);
}

pre code {
	background: none;
	color: inherit;
}

.text-muted,
.text-secondary {
	color: var(--pluto-gray-500) !important;
}

::selection {
	background: var(--pluto-primary-dark);
	color: var(--pluto-white);
}


/* =========================================================================
   3. Navbar Colors
   ========================================================================= */

.navbar {
	background: var(--pluto-white) !important;
	border-bottom-color: var(--pluto-gray-200);
}

.navbar-brand {
	color: var(--pluto-gray-900) !important;
}

.navbar .nav-link,
.navbar .navbar-nav > li > a {
	color: var(--pluto-gray-700) !important;
}

.navbar .nav-link:hover,
.navbar .navbar-nav > li > a:hover {
	color: var(--pluto-primary) !important;
	background: var(--pluto-primary-bg);
}

.navbar .search-bar,
.navbar #navbar-search {
	border-color: var(--pluto-gray-300);
	background: var(--pluto-gray-50);
}

.navbar .search-bar:focus-within,
.navbar #navbar-search:focus {
	border-color: var(--pluto-primary-light);
	background: var(--pluto-white);
}

.navbar .navbar-right .dropdown-toggle {
	color: var(--pluto-gray-600) !important;
}

.navbar .navbar-right .dropdown-toggle:hover {
	color: var(--pluto-primary) !important;
}


/* =========================================================================
   4. Sidebar Colors
   ========================================================================= */

.desk-sidebar {
	background: var(--pluto-gray-50);
	border-right-color: var(--pluto-gray-200);
}

.desk-sidebar .sidebar-menu a,
.desk-sidebar .sidebar-menu .sidebar-label {
	color: var(--pluto-gray-700);
}

.desk-sidebar .sidebar-menu a:hover,
.desk-sidebar .sidebar-menu .sidebar-label:hover {
	background: var(--pluto-primary-bg);
	color: var(--pluto-primary);
}

.desk-sidebar .sidebar-menu a.active,
.desk-sidebar .sidebar-menu a.selected {
	background: var(--pluto-primary-bg);
	color: var(--pluto-primary);
}

.desk-sidebar .sidebar-menu .sidebar-icon {
	color: var(--pluto-gray-500);
}

.desk-sidebar .sidebar-menu a:hover .sidebar-icon,
.desk-sidebar .sidebar-menu a.active .sidebar-icon {
	color: var(--pluto-primary);
}

.layout-side-section {
	background: var(--pluto-gray-50);
	border-left-color: var(--pluto-gray-200);
}

.layout-side-section .sidebar-label {
	color: var(--pluto-gray-500);
}


/* =========================================================================
   5. Footer Colors
   ========================================================================= */

.web-footer,
footer {
	background: var(--pluto-gray-50);
	border-top-color: var(--pluto-gray-200);
	color: var(--pluto-gray-600);
}

footer a {
	color: var(--pluto-gray-700);
}

footer a:hover {
	color: var(--pluto-primary);
}

.footer-powered {
	color: var(--pluto-gray-500);
}


/* =========================================================================
   6. Button Colors
   ========================================================================= */

.btn-primary,
.btn-primary-dark {
	background: var(--pluto-primary) !important;
	border-color: var(--pluto-primary) !important;
	color: var(--pluto-white) !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
	background: var(--pluto-primary-dark) !important;
	border-color: var(--pluto-primary-dark) !important;
}

.btn-primary:active,
.btn-primary-dark:active {
	background: var(--pluto-primary-dark) !important;
}

.btn-default,
.btn-secondary {
	background: var(--pluto-white) !important;
	border-color: var(--pluto-gray-300) !important;
	color: var(--pluto-gray-800) !important;
}

.btn-default:hover,
.btn-secondary:hover {
	background: var(--pluto-gray-50) !important;
	border-color: var(--pluto-gray-400) !important;
}

.btn-success {
	background: var(--pluto-success) !important;
	border-color: var(--pluto-success) !important;
	color: var(--pluto-white) !important;
}

.btn-danger {
	background: var(--pluto-danger) !important;
	border-color: var(--pluto-danger) !important;
	color: var(--pluto-white) !important;
}

.btn-warning {
	background: var(--pluto-warning) !important;
	border-color: var(--pluto-warning) !important;
	color: var(--pluto-gray-900) !important;
}

.btn-info {
	background: var(--pluto-info) !important;
	border-color: var(--pluto-info) !important;
	color: var(--pluto-white) !important;
}

.like-active-item .like-action {
	color: var(--pluto-danger) !important;
}

.page-actions .btn-primary-dark,
.page-actions .primary-action {
	background: var(--pluto-primary) !important;
	border-color: var(--pluto-primary) !important;
}


/* =========================================================================
   7. Card & Panel Colors
   ========================================================================= */

.frappe-card,
.widget.widget-shadow,
.form-dashboard,
.number-widget-box,
.shortcut-widget-box {
	background: var(--pluto-white);
	border-color: var(--pluto-gray-200);
}

.frappe-card:hover,
.widget.widget-shadow:hover {
	border-color: var(--pluto-gray-300);
}

.widget .widget-head .widget-title {
	color: var(--pluto-gray-900);
}

.number-widget-box .widget-head .number {
	color: var(--pluto-gray-900);
}

.shortcut-widget-box:hover {
	background: var(--pluto-primary-bg);
	border-color: var(--pluto-primary-light);
}

.chart-container {
	background: var(--pluto-white);
	border-color: var(--pluto-gray-200);
}

.section-head {
	color: var(--pluto-gray-800);
}


/* =========================================================================
   8. Form & Input Colors
   ========================================================================= */

.form-control,
.input-with-feedback,
.frappe-control input[type="text"],
.frappe-control input[type="password"],
.frappe-control input[type="email"],
.frappe-control input[type="number"],
.frappe-control input[type="date"],
.frappe-control input[type="url"],
.frappe-control select,
.frappe-control textarea {
	border-color: var(--pluto-gray-300);
	background: var(--pluto-white);
	color: var(--pluto-gray-900);
}

.form-control:focus,
.input-with-feedback:focus,
.frappe-control input:focus,
.frappe-control select:focus,
.frappe-control textarea:focus {
	border-color: var(--pluto-primary) !important;
}

.form-control[disabled],
.form-control[readonly],
.form-group .control-value {
	background: var(--pluto-gray-50);
	color: var(--pluto-gray-600);
	border-color: var(--pluto-gray-200);
}

.frappe-control .control-label,
.form-group label {
	color: var(--pluto-gray-600);
}

.section-head,
.form-section .section-head {
	border-bottom-color: var(--pluto-gray-200);
}

.has-error .form-control,
.has-error .input-with-feedback {
	border-color: var(--pluto-danger) !important;
}

.reqd .control-label::after {
	color: var(--pluto-danger);
}

.form-layout {
	background: var(--pluto-white);
}

.comment-box .ql-editor,
.comment-input-control .ql-editor {
	border-color: var(--pluto-gray-300);
}

.comment-box .ql-editor:focus {
	border-color: var(--pluto-primary);
}

.frappe-control[data-fieldtype="Link"] .link-btn {
	color: var(--pluto-primary);
}

.frappe-control[data-fieldtype="Check"] .checkbox .label-area {
	color: var(--pluto-gray-700);
}


/* =========================================================================
   9. Modal & Dialog Colors
   ========================================================================= */

.modal-header {
	background: var(--pluto-white);
	border-bottom-color: var(--pluto-gray-200);
}

.modal-header .modal-title {
	color: var(--pluto-gray-900);
}

.modal-header .close,
.modal-header .btn-close {
	color: var(--pluto-gray-500);
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
	color: var(--pluto-gray-900);
}

.modal-body {
	color: var(--pluto-gray-800);
}

.modal-footer {
	background: var(--pluto-gray-50);
	border-top-color: var(--pluto-gray-200);
}

.modal-backdrop {
	background: var(--pluto-black);
}




/* =========================================================================
   11. Status Indicators, Badges & Tags
   ========================================================================= */

.indicator-pill.green,
.indicator-pill[data-indicator="green"] {
	background: var(--pluto-success-light);
	color: var(--pluto-success);
}

.indicator-pill.red,
.indicator-pill[data-indicator="red"] {
	background: var(--pluto-danger-light);
	color: var(--pluto-danger);
}

.indicator-pill.orange,
.indicator-pill[data-indicator="orange"] {
	background: var(--pluto-warning-light);
	color: #7D4514;
}

.indicator-pill.yellow,
.indicator-pill[data-indicator="yellow"] {
	background: var(--pluto-warning-light);
	color: #6D4F06;
}

.indicator-pill.blue,
.indicator-pill[data-indicator="blue"] {
	background: var(--pluto-info-light);
	color: var(--pluto-info);
}

.indicator-pill.purple,
.indicator-pill[data-indicator="purple"] {
	background: rgba(27, 21, 72, 0.10);
	color: var(--pluto-primary-dark);
}

.indicator-pill.gray,
.indicator-pill.grey,
.indicator-pill[data-indicator="gray"],
.indicator-pill[data-indicator="grey"] {
	background: var(--pluto-gray-100);
	color: var(--pluto-gray-600);
}

.tag-pill,
.tags .tag-pill {
	background: var(--pluto-gray-100);
	color: var(--pluto-gray-700);
}

.tag-pill:hover {
	background: var(--pluto-primary-bg);
	color: var(--pluto-primary);
}


/* =========================================================================
   10. List View & Report Colors
   ========================================================================= */

.frappe-list {
	background: var(--pluto-white);
}

.list-row-head {
	background: var(--pluto-gray-50);
	border-bottom-color: var(--pluto-gray-200);
}

.list-row-head .list-row-col {
	color: var(--pluto-gray-600);
}

.list-row {
	border-bottom-color: var(--pluto-gray-100);
}

.list-row:hover {
	background: var(--pluto-primary-bg);
}

.list-row .list-row-col {
	color: var(--pluto-gray-800);
}

.list-row .level-left .list-row--col .ellipsis,
.list-row .list-row-col.ellipsis a {
	color: var(--pluto-gray-900);
}

.list-row .level-left .list-row--col .ellipsis:hover,
.list-row .list-row-col.ellipsis a:hover {
	color: var(--pluto-primary);
}

.list-row .list-row-checkbox {
	accent-color: var(--pluto-primary);
}

.list-row.selected {
	background: var(--pluto-primary-bg) !important;
}

.list-paging-area {
	border-top-color: var(--pluto-gray-200);
}

.filter-section {
	border-bottom-color: var(--pluto-gray-100);
}

.report-wrapper .datatable .dt-header .dt-cell--header {
	background: var(--pluto-gray-50);
}

.report-wrapper .datatable .dt-cell {
	border-color: var(--pluto-gray-100);
}

.frappe-list .no-result {
	color: var(--pluto-gray-500);
}


/* =========================================================================
   12. Dropdown & Menu Colors
   ========================================================================= */

.dropdown-menu {
	border-color: var(--pluto-gray-200);
	background: var(--pluto-white);
}

.dropdown-menu .dropdown-item,
.dropdown-menu > li > a {
	color: var(--pluto-gray-800);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu > li > a:hover {
	background: var(--pluto-primary-bg);
	color: var(--pluto-primary);
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu > li > a:active {
	background: var(--pluto-primary);
	color: var(--pluto-white);
}

.dropdown-menu .dropdown-divider {
	border-color: var(--pluto-gray-100);
}

.dropdown-menu .dropdown-header {
	color: var(--pluto-gray-500);
}


/* =========================================================================
   13. Login & Signup Colors
   ========================================================================= */

.page-card {
	border-color: var(--pluto-gray-200) !important;
}

body.frappe-login-page,
#page-login {
	background: var(--pluto-gray-50);
}

.page-card-head .title {
	color: var(--pluto-gray-900);
}

.page-card .form-group input {
	border-color: var(--pluto-gray-300);
}

.page-card .form-group input:focus {
	border-color: var(--pluto-primary) !important;
}

.page-card .btn-login,
.page-card .btn-primary {
	background: var(--pluto-primary) !important;
	border-color: var(--pluto-primary) !important;
	color: var(--pluto-white) !important;
}

.page-card .btn-login:hover,
.page-card .btn-primary:hover {
	background: var(--pluto-primary-dark) !important;
	border-color: var(--pluto-primary-dark) !important;
}

.page-card .social-logins .btn-social {
	border-color: var(--pluto-gray-300);
}

.page-card .social-logins .btn-social:hover {
	background: var(--pluto-gray-50);
	border-color: var(--pluto-gray-400);
}

.page-card a,
.page-card .forgot-password {
	color: var(--pluto-primary);
}

.page-card a:hover {
	color: var(--pluto-primary-dark);
}

.page-card .or-divider {
	color: var(--pluto-gray-500);
}


/* =========================================================================
   14. Desk & Workspace Colors
   ========================================================================= */

.page-container,
#page-container,
.main-section {
	background: var(--pluto-gray-50);
}

.page-head {
	background: var(--pluto-white);
	border-bottom-color: var(--pluto-gray-200);
}

.page-head .page-title .title-text {
	color: var(--pluto-gray-900);
}

.page-head .breadcrumb-area .breadcrumb a {
	color: var(--pluto-gray-500);
}

.page-head .breadcrumb-area .breadcrumb a:hover {
	color: var(--pluto-primary);
}

.widget-group .widget-group-head {
	color: var(--pluto-gray-900);
}

.onboarding-widget-box {
	background: var(--pluto-primary-bg);
	border-color: var(--pluto-primary-light);
}

.form-page,
.form-group .form-layout {
	background: var(--pluto-white);
}

.timeline-item {
	border-bottom-color: var(--pluto-gray-100);
}

.timeline-item .timeline-badge {
	color: var(--pluto-gray-500);
}

.timeline-item .timeline-content {
	color: var(--pluto-gray-700);
}

.overlay-sidebar {
	background: var(--pluto-white);
	border-left-color: var(--pluto-gray-200);
}


/* =========================================================================
   15. Print Preview Colors
   ========================================================================= */

.print-preview {
	background: var(--pluto-white);
	border-color: var(--pluto-gray-200);
}