/* ===========================================================================
   Apjakal Onyx — Internal UI Theme
   Site:    erp.apjakal.com  (Apjakal IT Solutions, internal ERP)

   Onyx:    #0A0A0F  (Page base)
   Surface: #13131A  (Cards)
   Red:     #F43024  (Apjakal corporate red — primary)
   Blue:    #3B82F6  (Electric — circuit-brain accent)
   =========================================================================== */

:root {
	/* Surfaces (dark) */
	--bg-base:          #0A0A0F;
	--bg-surface:       #13131A;
	--bg-elevated:      #1C1C26;
	--bg-input:         #1F1F2A;
	--bg-overlay:       rgba(10, 10, 15, 0.85);

	/* Brand */
	--primary:          #F43024;
	--primary-hover:    #FF4537;
	--primary-active:   #D62519;
	--primary-soft:     rgba(244, 48, 36, 0.12);
	--primary-glow:     rgba(244, 48, 36, 0.30);

	/* Accents */
	--accent-electric:  #3B82F6;
	--accent-purple:    #8B5CF6;

	/* Status */
	--success:          #10B981;
	--success-soft:     rgba(16, 185, 129, 0.12);
	--warning:          #F59E0B;
	--warning-soft:     rgba(245, 158, 11, 0.12);
	--danger:           #EF4444;
	--danger-soft:      rgba(239, 68, 68, 0.12);
	--info:             #06B6D4;
	--info-soft:        rgba(6, 182, 212, 0.12);

	/* Text */
	--text-hi:          #F4F4F5;
	--text-md:          #A1A1AA;
	--text-lo:          #71717A;
	--text-on-primary:  #FFFFFF;

	/* Borders / lines */
	--border:           #27272A;
	--border-strong:    #3F3F46;

	/* Shadows */
	--shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.40);
	--shadow-md:        0 4px 12px rgba(0, 0, 0, 0.50);
	--shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.60);
	--shadow-glow:      0 0 24px var(--primary-glow);

	/* Radii */
	--radius-sm:        6px;
	--radius-md:        10px;
	--radius-lg:        16px;
	--radius-pill:      9999px;

	/* Frappe core token overrides — drives buttons/links bench-wide */
	--primary-color:    #F43024;
	--primary-rgb:      244, 48, 36;
}

/* ── Light mode override ────────────────────────────────────────────────── */
[data-theme="light"] {
	--bg-base:        #FAFAFA;
	--bg-surface:     #FFFFFF;
	--bg-elevated:    #F4F4F5;
	--bg-input:       #FFFFFF;
	--bg-overlay:     rgba(250, 250, 250, 0.85);

	--text-hi:        #18181B;
	--text-md:        #52525B;
	--text-lo:        #A1A1AA;

	--border:         #E4E4E7;
	--border-strong:  #D4D4D8;

	--shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.12);
}

/* =========================================================================
   Frappe Desk overrides — buttons
   ========================================================================= */
.btn-primary,
.btn.btn-primary {
	background-color: var(--primary) !important;
	border-color:     var(--primary) !important;
	color:            var(--text-on-primary) !important;
	box-shadow:       0 1px 3px rgba(244, 48, 36, 0.20) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
	background-color: var(--primary-hover) !important;
	border-color:     var(--primary-hover) !important;
	color:            var(--text-on-primary) !important;
}
.btn-primary:active,
.btn.btn-primary:active {
	background-color: var(--primary-active) !important;
	border-color:     var(--primary-active) !important;
}
.btn-primary:focus,
.btn.btn-primary:focus {
	box-shadow:       0 0 0 0.2rem var(--primary-glow) !important;
	color:            var(--text-on-primary) !important;
}
.btn-primary:disabled,
.btn.btn-primary:disabled,
.btn-primary.disabled {
	opacity: 0.55 !important;
}

.btn-secondary,
.btn.btn-secondary,
.btn-default,
.btn.btn-default {
	background-color: var(--bg-elevated) !important;
	border-color:     var(--border) !important;
	color:            var(--text-hi) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-default:hover,
.btn.btn-default:hover {
	background-color: var(--bg-surface) !important;
	border-color:     var(--border-strong) !important;
}

/* Outline / link buttons */
.btn-link,
.btn.btn-link {
	color: var(--primary) !important;
}
.btn-link:hover {
	color: var(--primary-hover) !important;
}

/* =========================================================================
   Links, focus rings
   ========================================================================= */
a, .link {
	color: var(--primary);
}
a:hover, .link:hover {
	color: var(--primary-hover);
}

*:focus-visible {
	outline: 2px solid var(--primary) !important;
	outline-offset: 2px !important;
}

/* =========================================================================
   Navbar / page-head
   ========================================================================= */
.navbar,
.page-head {
	background-color: var(--bg-surface) !important;
	border-bottom: 1px solid var(--border) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
	color: var(--text-hi) !important;
}
.navbar-nav .nav-link:hover {
	color: var(--primary) !important;
}

/* =========================================================================
   Sidebar / left nav
   ========================================================================= */
.layout-side-section,
.desk-sidebar,
.sidebar {
	background-color: var(--bg-base);
	color: var(--text-md);
	border-right: 1px solid var(--border);
}

.standard-sidebar-item.selected,
.standard-sidebar-item.active,
.list-sidebar .list-link.selected {
	background-color: var(--primary-soft) !important;
	border-left: 3px solid var(--primary) !important;
	color: var(--text-hi) !important;
}

.standard-sidebar-item:hover,
.list-sidebar .list-link:hover {
	background-color: var(--bg-elevated) !important;
}

/* =========================================================================
   Form inputs — keep ONLY focus-ring (Apjakal red) for brand consistency.
   We deliberately do NOT override .form-control's background/border/text
   because this CSS loads on every Frappe Desk page (including the ones
   we embed in our iframe modal). Inheriting Frappe's native form styling
   means inputs always have visible borders against the light Desk surface.
   Only the focus ring gets re-tinted to Apjakal red.
   ========================================================================= */
.form-control:focus,
.input-with-feedback:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 0.15rem var(--primary-glow) !important;
}

/* Checkboxes — force the native control so the checked state is always clearly
   visible. The embedded Desk was rendering an ambiguous empty box (couldn't tell
   ticked vs unticked); accent-color tints the tick Apjakal red. */
input[type="checkbox"] {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	accent-color: var(--primary);
	width: 14px;
	height: 14px;
	cursor: pointer;
}

/* =========================================================================
   Indicators / pills
   ========================================================================= */
.indicator-pill.red,
.indicator.red {
	background-color: var(--danger-soft) !important;
	color: var(--danger) !important;
}
.indicator-pill.green,
.indicator.green {
	background-color: var(--success-soft) !important;
	color: var(--success) !important;
}
.indicator-pill.orange,
.indicator.orange,
.indicator-pill.yellow,
.indicator.yellow {
	background-color: var(--warning-soft) !important;
	color: var(--warning) !important;
}
.indicator-pill.blue,
.indicator.blue {
	background-color: var(--info-soft) !important;
	color: var(--info) !important;
}

/* =========================================================================
   Lists & tables
   ========================================================================= */
.list-row,
.list-row-container {
	border-bottom: 1px solid var(--border) !important;
	background-color: var(--bg-surface);
}
.list-row:hover,
.list-row-container:hover {
	background-color: var(--bg-elevated) !important;
}

table {
	color: var(--text-hi);
}
table thead {
	background-color: var(--bg-elevated);
	color: var(--text-md);
}
table tbody tr {
	border-bottom: 1px solid var(--border);
}

/* =========================================================================
   Modals, dropdowns, popovers
   ========================================================================= */
.modal-content,
.dropdown-menu,
.popover {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	color: var(--text-hi) !important;
	box-shadow: var(--shadow-lg) !important;
}

.dropdown-item:hover {
	background-color: var(--bg-elevated) !important;
	color: var(--primary) !important;
}

/* =========================================================================
   Workspace cards / shortcuts
   ========================================================================= */
.widget,
.shortcut-widget-box,
.number-widget-box,
.chart-widget-box {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
}

.widget:hover {
	border-color: var(--border-strong) !important;
	box-shadow: var(--shadow-md) !important;
}

/* =========================================================================
   Splash (Phase 1 primary surface)
   ========================================================================= */
.splash {
	background-color: var(--bg-base) !important;
}

/* =========================================================================
   Selection
   ========================================================================= */
::selection {
	background-color: var(--primary-soft);
	color: var(--text-hi);
}

/* =========================================================================
   Scrollbar (WebKit)
   ========================================================================= */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--text-lo);
}