/* ============================================================================
   Modern.css — Look-and-feel overlay for fonefunmembers.com
   Loaded after FoneFunMembers.css to soften the dated 2010s styling without
   touching the existing markup. Safe to remove by reverting Theme.php.
   ========================================================================= */

/* ---- Typography ------------------------------------------------------- */
body, body p, body td, body div, body input, body button, body select, body textarea, body a {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body { color: #2c3e50; background: #f4f6f8; }
body p { line-height: 1.55; }
body h1, body h2, body h3, body h4, body h5 { font-weight: 600; letter-spacing: -0.01em; }

/* ---- Wrappers / spacing ---------------------------------------------- */
body div.Wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; }
body div.Breadcrumbs { font-size: 12px; color: #6c7a89; }
body div.Breadcrumbs a { color: #4a90e2; text-decoration: none; }
body div.Breadcrumbs a:hover { text-decoration: underline; }

/* ---- Panels / cards --------------------------------------------------- */
body div.Panel,
body div.dash-section,
body div.Sidebar.Panel {
	background: #ffffff;
	border: 1px solid #e2e6ea;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	overflow: hidden;
}
body div.Panel h2,
body div.Sidebar.Panel h2 {
	background: #f8f9fb;
	border-bottom: 1px solid #e2e6ea;
	padding: 12px 16px;
	margin: 0;
	font-size: 14px;
	color: #2c3e50;
	letter-spacing: 0.3px;
}
body div.Panel-Inner { padding: 16px; }

/* ---- Folders list (Browse) ------------------------------------------- */
body ul.Folders > li,
body ul.Files > li {
	border-bottom: 1px solid #f0f2f4;
	padding: 4px 0;
}
body ul.Folders > li:last-child,
body ul.Files > li:last-child { border-bottom: none; }
body ul li a.FolderClosed,
body ul li a.FolderOpen,
body ul li a.Icon {
	color: #2c3e50;
	transition: color 0.15s ease;
}
body ul li a.FolderClosed:hover,
body ul li a.Icon:hover { color: #4a90e2; }

/* ---- Buttons --------------------------------------------------------- */
body input.Submit,
body input[type="submit"],
body input[type="button"],
body button {
	background: linear-gradient(135deg, #4a90e2 0%, #357ab8 100%);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	box-shadow: 0 2px 4px rgba(74,144,226,0.18);
	letter-spacing: 0.2px;
}
body input.Submit:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(74,144,226,0.25);
}
body input.Submit:active,
body input[type="submit"]:active,
body input[type="button"]:active,
body button:active { transform: translateY(0); }

/* ---- Inputs ---------------------------------------------------------- */
body input[type="text"],
body input[type="password"],
body input[type="email"],
body textarea,
body select {
	border: 1px solid #d8dde2;
	border-radius: 5px;
	padding: 9px 12px;
	font-size: 14px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	outline: none;
	box-sizing: border-box;
}
body input[type="text"]:focus,
body input[type="password"]:focus,
body input[type="email"]:focus,
body textarea:focus,
body select:focus {
	border-color: #4a90e2;
	box-shadow: 0 0 0 3px rgba(74,144,226,0.15);
}

/* ---- Tables (admin dash etc.) ---------------------------------------- */
body table.dash-table th { background: #f8f9fb; color: #6c7a89; }
body table.dash-table tr:hover td { background: #f6faff; }

/* ---- Messages -------------------------------------------------------- */
body div.Message.Success,
body div.Message.Error {
	border-radius: 6px;
	padding: 10px 14px;
	border: 1px solid;
	margin-top: 0;
}
body div.Message.Success { background: #e8f5e9; border-color: #c5e1c8; color: #1b5e20; }
body div.Message.Error { background: #fdecea; border-color: #f6c5c1; color: #b3261e; }

/* ---- Footer / copyright ---------------------------------------------- */
body div.Wrapper:last-of-type { color: #95a3b3; font-size: 12px; }

/* ---- Account / login form -------------------------------------------- */
body div.Sidebar.Panel form input[type="text"],
body div.Sidebar.Panel form input[type="password"] { width: 100%; margin-bottom: 8px; }

/* ---- Mobile responsiveness ------------------------------------------- */
@media (max-width: 900px) {
	body div.Wrapper { padding: 0 12px; box-sizing: border-box; }
	body div.Left-Side, body div.Right-Side { float: none; width: 100% !important; }
	body div.Right-Side { margin-top: 16px; }
	body div.dash-stats { gap: 8px; }
	body div.dash-stat-card { min-width: 110px; padding: 12px; }
	body div.dash-stat-card .stat-number { font-size: 26px; }
}
@media (max-width: 600px) {
	body ul.NavMenu li a { padding: 8px 10px; font-size: 12px; }
	body div.Breadcrumbs { font-size: 11px; }
}

/* ---- Subtle polish for legacy chrome --------------------------------- */
body hr {
	border: none;
	border-top: 1px solid #e2e6ea;
	margin: 14px 0;
}
body a { transition: color 0.12s ease; }

/* End of Modern.css */