@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap");

/* ==========================================================================
   Blue Theme - cleaned up and unified
   (previously had duplicate/conflicting rules, dead selectors from old
   Frappe versions, and raw markdown accidentally pasted into the CSS)
   ========================================================================== */

:root {
	--color-primary: #17a2b8;
	--color-secondary: #0f6674;
	--color-accent: #d2e7fa;
	--color-bg-light: #f5fafd;
	--color-bg-dark: #ffffff;
	--color-text-main: #2c3e50;
	--color-text-muted: #888888;
	--color-border: #ccddee;
	--color-shadow: rgba(0, 0, 0, 0.12);

	--border-radius-lg: 14px;
	--border-radius-md: 10px;
	--border-radius-sharp: 6px; /* used for form fields - "boxed" look */
	--transition-speed: 0.3s;
	--navbar-height: 42px;
	--font-size-base: 1rem;

	--date-field-color: #f59e0b;
	--data-field-color: #4f46e5;
	--input-focus-color: #60a5fa;
}

/* --- 1. Base --- */
body, .chart-container, .page-container {
	font-family: "Cairo", sans-serif !important;
	color: var(--color-text-main);
	background-color: #a7cee5 !important;
	font-weight: 600;
}

*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
*::-webkit-scrollbar-track {
	background: var(--color-bg-light);
}
*::-webkit-scrollbar-thumb {
	background-color: var(--color-primary);
	border-radius: 10px;
	border: 2px solid var(--color-bg-light);
}
* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) var(--color-bg-light);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--color-secondary);
	font-weight: 700;
}

.text-muted {
	color: #000000 !important;
	font-weight: 600 !important;
}

img {
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-md);
}

.icon {
	stroke: var(--color-secondary) !important;
	stroke-width: 2.2;
	transition: all var(--transition-speed);
}
.btn-primary .icon {
	stroke: var(--color-bg-dark) !important;
}

/* --- 2. Navbar & Header --- */
header.navbar.sticky-top, .navbar {
	background-color: var(--color-primary) !important;
	height: var(--navbar-height);
	min-height: var(--navbar-height);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	border-radius: 0 !important;
	display: flex;
	align-items: center;
	padding: 0 12px;
}
.navbar-main {
	background-color: var(--color-primary);
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
.navbar-nav .icon {
	stroke: var(--color-bg-dark) !important;
	width: 18px;
	height: 18px;
	stroke-width: 2;
}
.navbar .navbar-nav .nav-link {
	color: var(--color-bg-dark) !important;
	font-weight: 600;
	transition: color var(--transition-speed) ease-in-out;
}
.navbar .navbar-nav .nav-link:hover {
	color: var(--color-bg-light) !important;
}
#navbar-breadcrumbs li.disabled a, #navbar-breadcrumbs a {
	color: var(--color-bg-dark) !important;
	font-weight: 600;
}
#navbar-breadcrumbs a::before {
	border-color: var(--color-bg-dark);
}
.navbar-form .form-control {
	height: 30px !important;
	border-radius: 15px;
	background-color: rgba(255, 255, 255, 0.9);
	border: none;
	color: var(--color-text-main);
}
.navbar-form .btn-search {
	color: var(--color-secondary) !important;
}
.dropdown-help {
	display: none !important;
}
.navbar-home img {
	max-height: 42px;
	width: auto;
}
.app-logo {
	width: 24px;
}

/* --- 3. Sidebar (Desk / Workspace sidebar - v15 class names) --- */
.layout-side-section {
	background-color: var(--color-accent) !important;
	border-right: none;
	border-radius: var(--border-radius-lg);
	padding: 4px !important;
	box-shadow: 2px 0 8px var(--color-shadow);
	min-width: 200px;
}
.desk-sidebar .standard-sidebar-item {
	background-color: var(--color-bg-dark);
	border: 1px solid var(--color-border);
	margin-bottom: 3px;
	padding: 5px 8px;
	border-radius: var(--border-radius-sharp);
	transition: all var(--transition-speed);
	font-weight: 600;
	font-size: 0.9rem;
}
.desk-sidebar .standard-sidebar-item:hover,
.desk-sidebar .standard-sidebar-item.selected {
	background-color: var(--color-primary) !important;
	color: var(--color-bg-dark) !important;
	font-weight: 700;
	border: 1px solid var(--color-secondary);
	box-shadow: 0 2px 5px rgba(0, 86, 179, 0.2);
}
.layout-side-section a {
	color: var(--color-text-main);
}
.layout-side-section .icon, .layout-side-section .sidebar-item-label .icon {
	stroke: var(--color-secondary) !important;
	width: 22px;
	height: 20px;
}
.desk-sidebar .standard-sidebar-item:hover .icon,
.desk-sidebar .standard-sidebar-item.selected .icon {
	stroke: var(--color-bg-dark) !important;
}
.sidebar-item-list-container::-webkit-scrollbar {
	width: 6px;
}
.sidebar-item-list-container::-webkit-scrollbar-thumb {
	background-color: var(--color-accent);
	border-radius: 10px;
}

/* --- 4. Widgets / Workspace cards --- */
.widget, .widget.dashboard-widget-box {
	border-radius: var(--border-radius-md);
	background: var(--color-bg-dark) !important;
	box-shadow: 0 3px 10px var(--color-shadow);
	border: 1px solid var(--color-border);
	margin-bottom: 10px !important;
	padding: 8px;
	transition: all var(--transition-speed);
}
.widget:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.widget .widget-head {
	background-color: var(--color-primary);
	color: #fff;
	font-size: 1em;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--border-radius-sharp) var(--border-radius-sharp) 0 0;
}
.widget-content {
	padding: 8px;
}

.widget.links-widget-box .link-item, .widget.shortcut-widget-box .link-item {
	color: var(--color-text-main);
	background-color: var(--color-bg-light);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-sharp);
	margin-bottom: 10px;
	padding: 10px;
	transition: all var(--transition-speed);
	display: flex;
	align-items: center;
}
.widget.links-widget-box .link-item:hover, .widget.shortcut-widget-box .link-item:hover {
	background-color: var(--color-accent) !important;
	color: var(--color-secondary) !important;
	border-color: var(--color-secondary);
}
.widget.links-widget-box .link-item .icon,
.widget.shortcut-widget-box .link-item .icon {
	stroke: var(--color-primary) !important;
	fill: var(--color-accent);
	padding: 6px;
	border-radius: 6px;
	margin-inline-end: 15px;
	box-shadow: 0 1px 4px rgba(23, 162, 184, 0.2);
}

/* --- 5. Form fields - unified "boxed / sharp" style ---
   Every field gets a crisp, fully-bordered box with a small radius (not the
   pill/rounded look) and a colour-coded left accent by field type so users
   can tell field types apart at a glance. */
.form-control, .awesomplete input {
	padding: 8px 12px;
	font-size: var(--font-size-base);
	background-color: var(--color-bg-dark) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--border-radius-sharp) !important;
	height: 36px !important;
	transition: all var(--transition-speed);
	font-weight: 600;
}
textarea.form-control {
	min-height: 80px;
	height: auto !important;
	padding: 8px 12px;
}
.form-control:focus, .form-control:active, .awesomplete input:focus {
	border-color: var(--input-focus-color) !important;
	outline: 2px solid var(--input-focus-color);
	outline-offset: -2px;
	box-shadow: none !important;
	background: var(--color-bg-dark) !important;
}

/* Colour-coded left accent by field type */
.frappe-control[data-fieldtype="Date"] .form-control,
.frappe-control[data-fieldtype="Datetime"] .form-control {
	border-left: 4px solid var(--date-field-color) !important;
	background-color: #fefcf3 !important;
}
.frappe-control[data-fieldtype="Data"] .form-control,
.frappe-control[data-fieldtype="Small Text"] .form-control,
.frappe-control[data-fieldtype="Int"] .form-control,
.frappe-control[data-fieldtype="Float"] .form-control,
.frappe-control[data-fieldtype="Currency"] .form-control {
	border-left: 4px solid var(--data-field-color) !important;
}

.form-section.card-section, .form-dashboard-section {
	border-bottom: 2px solid var(--color-secondary);
	border-radius: var(--border-radius-sharp);
	margin-top: 8px;
}
.form-tabs, .form-tab-content {
	padding-top: 6px;
}
.form-tabs-list {
	background-color: var(--color-primary) !important;
	border-radius: var(--border-radius-sharp) var(--border-radius-sharp) 0 0;
}
.form-tabs-list .nav-link.active {
	background-color: var(--color-secondary) !important;
	color: var(--color-bg-dark) !important;
	border-radius: var(--border-radius-sharp) var(--border-radius-sharp) 0 0;
	font-weight: 700;
}

/* --- 6. Buttons --- */
.btn-primary, .btn-primary.primary-action {
	color: #fff !important;
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	border-radius: var(--border-radius-sharp);
	padding: 8px 20px;
	font-size: 1rem;
	box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
	transition: all var(--transition-speed);
	font-weight: 700;
}
.btn-primary:hover, .btn-primary.primary-action:hover {
	background-color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(23, 162, 184, 0.5);
}
.btn-secondary {
	color: var(--color-primary) !important;
	background-color: transparent !important;
	border: 2px solid var(--color-primary) !important;
	border-radius: var(--border-radius-sharp);
	padding: 8px 20px;
	font-size: 1rem;
	transition: all var(--transition-speed);
	font-weight: 700;
}
.btn-secondary:hover {
	color: var(--color-bg-dark) !important;
	background-color: var(--color-primary) !important;
	transform: translateY(-2px);
}
.btn-primary.primary-action[data-label="Submit"],
.btn-primary.primary-action[data-label="%D8%AA%D8%B3%D8%AC%D9%8A%D9%84"],
.btn-primary.primary-action[data-label="%D8%AD%D9%81%D8%B8"] {
	background-color: #28a745 !important;
	border-color: #28a745 !important;
	box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
}

/* --- 7. Lists and data tables --- */
.frappe-list .level.list-row-head {
	background-color: #92cbff;
	border-radius: var(--border-radius-sharp);
}
.frappe-list .level.list-row-head .list-header-subject,
.frappe-list .level.list-row-head .list-count {
	color: var(--color-bg-dark);
	font-weight: 700;
}
.frappe-list .list-row-container {
	border-bottom: 1px solid var(--color-border);
}
.frappe-list .list-row-container:hover {
	background-color: var(--color-accent);
}
.datatable .dt-header .dt-cell--header .dt-cell__content {
	font-weight: 700;
	background-color: var(--color-accent);
	color: var(--color-secondary);
	border-bottom: 2px solid var(--color-primary);
	text-align: center;
}
.datatable .dt-row .dt-cell .dt-cell__content {
	border: 1px solid var(--color-border);
}
.datatable .dt-row:nth-child(even) {
	background-color: var(--color-bg-dark);
}
.datatable .dt-row:nth-child(odd) {
	background-color: var(--color-bg-light);
}

/* --- 8. Page header --- */
.page-head {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	min-height: 0 !important;
	background-color: var(--color-bg-dark) !important;
	border-bottom: 2px solid var(--color-secondary) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-bottom: 6px;
	z-index: 6;
	position: sticky;
	top: var(--navbar-height);
	transition: 0.5s top;
}
.page-head .page-title {
	margin-bottom: 0 !important;
}
.page-head .title-text {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--color-secondary) !important;
	line-height: 1.2;
}
.page-actions .btn-group .btn, .page-actions .btn {
	padding: 4px 12px;
	font-size: 0.85rem;
}
.page-form, .page-toolbar {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
	min-height: 0 !important;
}

/* ==========================================================================
   9. Login page - boxed fields, tidy centered card
   ========================================================================== */
.for-login {
	background-color: var(--color-bg-light);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.for-login .login-content.page-card {
	background: var(--color-bg-dark);
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-lg);
	box-shadow: 0 10px 30px var(--color-shadow);
	padding: 10px;
	max-width: 400px;
	width: 100%;
}
.for-login .page-card-head {
	text-align: center;
	padding-bottom: 10px;
}
.for-login .page-card-head .app-logo {
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
}
.for-login .page-card-body .form-group {
	margin-bottom: 16px;
}
.for-login .form-control {
	height: 42px !important;
	border-radius: var(--border-radius-sharp) !important;
	border: 1px solid var(--color-border) !important;
	border-left: 4px solid var(--color-primary) !important;
	background-color: var(--color-bg-light) !important;
	padding-inline-start: 40px;
}
.for-login .form-control:focus {
	border-color: var(--input-focus-color) !important;
	outline: 2px solid var(--input-focus-color);
	outline-offset: -2px;
	background-color: var(--color-bg-dark) !important;
}
.for-login .email-field, .for-login .password-field {
	position: relative;
}
.for-login .field-icon {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	stroke: var(--color-secondary);
	pointer-events: none;
}
.for-login .toggle-password {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 0.8rem;
}
.for-login .btn-login {
	height: 42px;
	border-radius: var(--border-radius-sharp);
	font-weight: 700;
}
.for-login .page-card-actions .btn-login {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}
.for-login .page-card-actions .btn-login:hover {
	background-color: var(--color-secondary) !important;
	border-color: var(--color-secondary) !important;
}
.for-login .forgot-password-message {
	text-align: center;
	margin-top: 10px;
	font-size: 0.85rem;
}
.for-login .login-divider {
	text-align: center;
	font-size: 0.8rem;
}
.for-login .btn-login-option {
	border-radius: var(--border-radius-sharp);
	border: 1px solid var(--color-border);
}