/* =====================================================================
 * theme-modern.css  —  Cosmetic-only "modern look" refresh
 * ---------------------------------------------------------------------
 * Scope:   Public / Member site (main_theme layout: main, member, free)
 * Rule:    COSMETIC ONLY. Do not change layout — no width / margin / float /
 *          display / position changes. Only color, background, border,
 *          border-radius, box-shadow, outline, transition, font-weight.
 * Loaded:  last in the main_theme module so it refines existing components.
 * Rollback: remove this file + its resource line in ApplicationResources.
 * Brand:   keeps the existing brand pink (#d35684) — identity unchanged.
 * ===================================================================== */

:root {
	/* Brand — system button blue (#0776ca), matching the .btn / Preview button */
	--c-brand:        #0776ca;
	--c-brand-strong: #065fa3;
	--c-brand-soft:   rgba(7, 118, 202, 0.10);

	/* Neutrals (aligned to existing palette) */
	--c-text:        #1f2937;  /* headings / strong text */
	--c-text-strong: #344054;  /* table body — dark & readable */
	--c-text-2:      #4a5568;
	--c-muted:       #718096;
	--c-border:  #e6eaf0;
	--c-border-2:#edf2f7;
	--c-surface: #ffffff;
	--c-surface-2: #f8f9fa;

	/* Status */
	--c-success: #16a34a;
	--c-danger:  #ef4444;
	--c-info:    #2563eb;

	/* Shape & depth */
	--radius:    10px;
	--radius-sm: 6px;
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow:    0 2px 8px rgba(16, 24, 40, 0.08);
	--shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10);

	/* Focus ring */
	--ring: 0 0 0 3px var(--c-brand-soft);
}

/* ---------- Typography polish (no size changes) ---------- */
h1, h2, h3, h4, h5, h6 {
	color: var(--c-text);
	letter-spacing: -0.01em;
}

a {
	color: var(--c-brand);
	transition: color 0.15s ease;
}
a:hover {
	color: var(--c-brand-strong);
}

/* ---------- Buttons ---------- */
.btn,
button.save,
input[type="submit"] {
	border-radius: var(--radius-sm) !important;
	transition: all 0.18s ease !important;
}
.btn:hover {
	box-shadow: var(--shadow) !important;
}
.btn:focus,
button.save:focus {
	outline: none !important;
	box-shadow: var(--ring) !important;
}

.btn-primary {
	background: var(--c-brand) !important;
	border-color: var(--c-brand) !important;
	color: #fff !important;
}
.btn-primary:hover {
	background: var(--c-brand-strong) !important;
	box-shadow: 0 4px 12px var(--c-brand-soft) !important;
}

/* ---------- Form controls ---------- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea,
.form-control {
	border: 1px solid var(--c-border) !important;
	border-radius: var(--radius-sm) !important;
	background: var(--c-surface) !important;
	color: var(--c-text) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
	border-color: var(--c-brand) !important;
	box-shadow: var(--ring) !important;
	outline: none !important;
}
input:disabled,
select:disabled,
textarea:disabled {
	background: var(--c-surface-2) !important;
	color: var(--c-muted) !important;
}

/* ---------- Section header (form section dividers) ---------- */
.section-header {
	background: linear-gradient(0deg, var(--c-surface-2), var(--c-surface-2)) !important;
	border-left: 4px solid var(--c-brand) !important;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
	color: var(--c-text) !important;
}

/* ---------- Cards / info & stats boxes ---------- */
.info-box,
.stats-box,
.upload-preview-container,
.badge-radio-list {
	border-radius: var(--radius) !important;
	border-color: var(--c-border) !important;
	box-shadow: var(--shadow-sm) !important;
}

.badge-radio-item {
	border-radius: 999px !important;
	border-color: var(--c-border) !important;
	transition: all 0.15s ease !important;
}
.badge-radio-item:hover {
	border-color: var(--c-brand) !important;
	background: var(--c-brand-soft) !important;
}

/* ---------- Flash / validation messages ---------- */
.message {
	border-radius: var(--radius-sm) !important;
	box-shadow: var(--shadow-sm) !important;
}
ul.errors {
	border-radius: var(--radius-sm) !important;
	box-shadow: var(--shadow-sm) !important;
}
.text-danger { color: var(--c-danger) !important; }
.text-muted  { color: var(--c-muted)  !important; }

/* ---------- Tables — standard readable typography ---------- */
/* Bigger, darker, clearer text so list/data tables read like a modern grid */
/* Generic header — clean & readable (safe for all tables incl. grids) */
th {
	color: #475467 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-bottom-color: var(--c-border-2) !important;
}
/* Modern, distinct header for list tables: gradient bar, uppercase, brand accent */
.list-table th {
	background: linear-gradient(180deg, #f9fafb 0%, #eef2f7 100%) !important;
	color: #475467 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	border-bottom: 1px solid var(--c-border) !important;
}
td {
	color: var(--c-text-strong) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	border-bottom-color: var(--c-border-2) !important;
}
/* Links inside tables stay clearly tappable */
td a {
	font-size: 13px !important;
	font-weight: 500 !important;
}
tr:hover { background-color: var(--c-surface-2) !important; }

.table-responsive {
	border: 1px solid var(--c-border) !important;
	border-radius: var(--radius) !important;
	overflow: hidden;
}

/* jqGrid / w2ui data grids — same standard size for consistency */
.ui-jqgrid tr.jqgrow td,
.ui-jqgrid .ui-jqgrid-htable th,
.w2ui-grid .w2ui-grid-body td {
	font-size: 14px !important;
}

/* ---------- Cards / containers used in list & detail ---------- */
.mod-box,
.box,
.panel,
.well {
	border-radius: var(--radius) !important;
	border-color: var(--c-border) !important;
	box-shadow: var(--shadow-sm) !important;
}

/* ---------- View and table text: consistent black ---------- */
:root {
	--c-text: #000000;
	--c-text-strong: #000000;
	--c-text-2: #000000;
}

body,
.content,
.scaffold-list,
.scaffold-show,
.scaffold-create,
.scaffold-edit,
.property-list,
.property-list .property-label,
.property-list .property-value,
.fieldcontain,
.control-group,
.control-label,
.controls,
legend,
label:not(.error),
.show-total {
	color: #000000 !important;
}

table,
table th,
table td,
table th a,
table td a,
.list-table th,
.list-table td,
.list-table th a,
.list-table td a,
.ui-jqgrid tr.jqgrow td,
.ui-jqgrid .ui-jqgrid-htable th,
.w2ui-grid .w2ui-grid-body td {
	color: #000000 !important;
}

/* ---------- Pagination ---------- */
.pagination {
	margin-top: 16px !important;
	padding: 10px 12px !important;
	min-height: 0 !important;
	border: 1px solid var(--c-border) !important;
	border-radius: 12px !important;
	background: var(--c-surface) !important;
	box-shadow: var(--shadow-sm) !important;
	line-height: 38px;
}

.pagination a,
.pagination .currentStep {
	box-sizing: border-box;
	min-width: 36px;
	height: 36px;
	margin: 2px !important;
	padding: 0 10px !important;
	border: 1px solid transparent;
	border-radius: 8px !important;
	background: transparent !important;
	color: var(--c-brand) !important;
	font-weight: 600;
	line-height: 34px;
	text-decoration: none !important;
	vertical-align: middle;
	text-shadow: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.pagination a:hover,
.pagination a:focus {
	border-color: rgba(7, 118, 202, 0.22) !important;
	background: var(--c-brand-soft) !important;
	color: var(--c-brand-strong) !important;
	box-shadow: none !important;
	outline: none !important;
	transform: translateY(-1px);
}

.pagination .currentStep {
	border-color: var(--c-brand) !important;
	background: var(--c-brand) !important;
	color: #ffffff !important;
	box-shadow: 0 2px 5px rgba(7, 118, 202, 0.24) !important;
}

.pagination .prevLink a,
.pagination .nextLink a {
	min-width: 0;
	padding-right: 12px !important;
	padding-left: 12px !important;
}

.pagination .show-total {
	margin-left: 8px;
	padding: 0 8px;
	color: var(--c-muted) !important;
	font-size: 12px;
	font-weight: 500;
	vertical-align: middle;
}

@media (max-width: 576px) {
	.pagination {
		padding: 8px !important;
		line-height: 34px;
	}

	.pagination a,
	.pagination .currentStep {
		min-width: 32px;
		height: 32px;
		padding: 0 8px !important;
		line-height: 30px;
	}
}

/* ---------- Custom scrollbar (cosmetic) ---------- */
* {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }