/* Theme Name: WPE Dashboard - EM4B */
/* === Global === */
/* Palette/type matched to vendasta.com (confirmed against their live site's own CSS -- primary
   green #3F9B63/#2E7655, dark navy #072337, gray body text #555, Raleway for headings). Kept as
   custom properties here rather than touching the pre-existing --color-one..five system in
   base.css/customStyles.php, which is separate (Customizer-driven) legacy scaffolding not
   actually used by any of the dashboard's real pages. */
:root {
	--vnd-green: #3F9B63;
	--vnd-green-dark: #2E7655;
	--vnd-green-light: #7BDCB5;
	--vnd-navy: #072337;
	--vnd-gray: #555555;
	--vnd-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

html, body {
    height: 100%;
	background-color: var(--vnd-navy);
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
}
body {
    margin: 0;
}
#our-login p.login-submit{
	margin:0; 
}
.dashboard-container {
    padding: 0;
	margin-top: 50px; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-head{ display: block;    width: 100%;    text-align: center;    font-size: 26px;    padding: 20px 0px;}
.popup-inner .content{border-bottom-left-radius:8px; border-bottom-right-radius:8px;  display: block; background:#fff;   padding: 40px;}
.popup-inner .content p{ color: #e65253;    font-weight: 700;    text-align: center;}
.popup-inner .content-title{     background: #e65353;    border-top-left-radius: 8px;    border-top-right-radius: 8px;    color: #fff;}
.popup {width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background: rgba(7, 35, 55, 0.64); z-index: 9999; }
.popup-inner { overflow-y: unset!important; padding: 0!important; max-width:1200px; height: auto;  width:768px;  position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); border:none; background: transparent; max-height: 90%; }
.popup-inner{  background:#fff;   border-radius: 8px;    box-shadow: var(--vnd-shadow);}
.popup-close::before {content: '\00D7';position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-weight: 400;font-size: 24px;line-height: 0;padding-top: 2px;}
.popup-close {width:30px;height:30px;display:inline-block;position:absolute; top: 0; right: 0; border-radius:1000px;background: #454955;font-family:Arial, Sans-Serif;font-size:20px;text-align:center;line-height:100%;color:#F3EFF5;}
.popup-close:hover { text-decoration:none; color: var(--vnd-green);}
.popup-inner img{height:-webkit-fill-avilable;}
.alert-message{
	padding: 20px;
    text-align: center;
    font-weight: 700;
    background: #f36060;
    border-radius: 8px;
    color: #fff;
}
.alert-message,.instance-link,.popup-close, #create-site{
	display:none;

}
.sugar-provisioned-warning {
	margin: 10px 0px;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	background: #f2f2f2;
}
.instance-name-conflict {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #b32d2e;
}
.high-usage-warning {
	margin: 0 0 20px;
	padding: 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	background: #fdeaea;
	color: #b32d2e;
}
.confirm-message{
	border: 1px solid #bbb;
    border-radius: 8px;
    margin: 10px 0px;
    padding: 20px;
	display:none;
}
.confirm-message .instance-url{
	display: inline;
}
.confirm-message .instance-url a{
	color: var(--vnd-green);

}

.visible { display: block; }
.hidden { display: none !important; }
#why { width: 100%; height: 100%; border: none; }
@media screen and ( max-width: 991px ) {.popup-inner {max-width: 95% !important; max-height: 500px !important; overflow:scroll;}}
.build-site{
	display:none;
	margin-bottom:20px;
}
.build-site h3{
	font-size: 18px;
	
}
#site-box,#repo-box {
	background:#fff;
    border-radius:8px;
    width:100%;
    text-align: center;
}

span.instance-url a{
	font-size: 15px;
    margin-left: 15px;
    color: #fff;
    text-decoration: underline;
}
#site-box .inner, #repo-box .inner{
	background: var(--vnd-navy);
	color: #ccc;
	padding:10px 0px;
	border-color: var(--vnd-navy);
	font-weight:700;
}
.retry-controls {
	margin-top: 8px;
	text-align: center;
}
.retry-btn {
	display: none;
	margin: 0 4px;
	font-size: 13px;
	padding: 4px 10px;
}

.flex-item {
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

#myProgress {
  width: 100%;
  margin-top: 50px;
  background-color: var(--vnd-navy);
}

#myBar {
  width: 0.25%;
  height: 30px;
  background-color: var(--vnd-green);
}
#our-login{
	border-color: #CFDDE9;
	background-color: #fff;
    border-color: #ddd #ddd #d8d8d8;
    box-shadow: 0 2px 0 rgb(175 175 175 / 12%);
	color: #5c6971;
	padding: 60px;
    position: relative;
    z-index: 10;
	position: relative;
    overflow: auto;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
}



#our-login input[type="text"], #our-login input[type="password"],#our-login select{
	border: 1px solid #bbb;
    height: 40px;
    background-color: #fff;
    border-color: #bbb;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
	padding: 10px 16px;
}
#our-login select{
	padding: 0px 16px; 
	color:#000;
}
#our-login button, #our-login input[type="submit"]{
	width:100%;
	height:40px;
	color: #fff;
    background-color: var(--vnd-green);
    background: linear-gradient(var(--vnd-green), var(--vnd-green-dark));
    border-radius: 50px;
	border:none;
	padding:10px 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	box-shadow: var(--vnd-shadow);
	transition: all ease .3s;
}
#our-login button:hover, #our-login input[type="submit"]:hover{
	background: linear-gradient(var(--vnd-green-dark), var(--vnd-green-dark));
}
/* #our-login input[type="text"]::placeholder{
	color:#fff;
}
 */

#loading{
	display:none;
	width:100%;
	height:100%;
	align-items: center;
	justify-content: center;
	position: absolute;
    top: 0;
    z-index: 9999;
    background: var(--vnd-navy);
}

.site-selector{
	margin: 10px;
	padding:10px;
	border-radius: 6px;
}
/* Whether it's reasonable to put a new site on this server -- based on the WORSE of its
   storage/bandwidth usage against its own plan limit, purely a visual judgment aid. Does not
   affect whether the server can actually be picked (that's still the hard site-count check). */
.site-selector.usage-good {
	background: #eafaf1;
}
.site-selector.usage-caution {
	background: #fff8e6;
}
.site-selector.usage-critical {
	background: #fdeaea;
}
.selector{
	padding: 20px;
    border: 2px solid #c0c0c0;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 75%);
    border-radius: 4px;
    text-align: center;
}
.selector span{
	display:inline-block;
	width:100%;
	margin-bottom: 4px;
	font-weight:700;
}
.site-usage-line {
	font-weight: 400 !important;
	font-size: 12px;
	color: #646970;
}

.server-picked{
	border: 2px solid var(--vnd-navy);
}

form{
	margin: 0 auto;
	width:50%; 
}
form .form-group{
	margin: 25px 0px;
}
.sugar-autocomplete-wrap {
	position: relative;
}
.sugar-suggestions {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-height: 220px;
	overflow-y: auto;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.sugar-suggestions li {
	padding: 8px 12px;
	cursor: pointer;
	color: var(--vnd-navy);
	font-size: 14px;
}
.sugar-suggestions li:hover {
	background: #f2f2f2;
}
#create-instance{
	display:none; 
}

.sp[pick-server="False"]{
	cursor: not-allowed;
}
.sp[pick-server="True"]{
	cursor: pointer; 
}

/* === Header/Nav === */

/* === Footer === */

/* === Home Page === */

.home-landing-title {
	text-align: center;
	margin-bottom: 40px;
}
.home-landing-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}
.home-landing-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 140px;
	border-radius: 12px;
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	box-shadow: var(--vnd-shadow);
	transition: all ease .3s;
}
a.home-landing-btn:hover, a.home-landing-btn:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.home-landing-btn-primary {
	background: linear-gradient(var(--vnd-green), var(--vnd-green-dark));
}
.home-landing-btn-secondary {
	background: var(--vnd-navy);
}
.home-landing-btn-disabled {
	background: #ccc;
	color: #888;
	cursor: not-allowed;
	box-shadow: none;
}

/* === Interior Pages === */

.server-status-link {
	text-align: center;
	margin-bottom: 10px;
}
.server-status-link a {
	color: #fff;
}

#server-status {
	background: #fff;
	border-radius: 8px;
	padding: 30px 40px;
	max-width: 900px;
	width: 100%;
}
.status-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.status-section {
	margin-top: 25px;
}
.status-section-future {
	opacity: 0.6;
}
.coming-soon {
	font-size: 13px;
	font-weight: 400;
	color: #888;
}
.heading-note {
	font-size: 13px;
	font-weight: 400;
	color: #888;
}
/* The DNS detail row server-status.js inserts directly under a checked install's own row (see
   applyDnsStatusResult()) -- a separate .status-detail-row <tr>, not part of that row's cells. */
tr.status-detail-row {
	background: #f9f9f9;
}
.status-table td.wpe-dns-detail {
	padding: 4px 8px 4px 32px;
	font-size: 11px;
	color: #646970;
	font-family: monospace;
}

.status-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
.status-tab-btn {
	background: #f2f2f2;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	line-height: 1.3;
	height: 80px!important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.status-tab-btn .tab-account-name {
	display: block;
	font-size: 11px;
	color: #fff;
	font-weight: 400;
}
.status-tab-btn.active {
	background: var(--vnd-navy);
	border-color: var(--vnd-navy);
	color: #fff;
}
.status-tab-btn.active .tab-account-name {
	color: #fff;
}
.status-tab-panel {
	display: none;
}
.status-tab-panel.active {
	display: block;
}
/* Only ever shown while searching across every server at once (see applySearchState() in
   server-status.js) -- labels which server a given group of matching rows belongs to now that
   the tab bar itself is hidden. */
.status-tab-panel-heading {
	margin: 20px 0 8px;
}
.status-tab-panel-heading:first-child {
	margin-top: 0;
}
#wpe-search-no-results {
	margin: 10px 0;
	color: #646970;
}

.status-table {
	width: 100%;
	border-collapse: collapse;
}
.status-table th, .status-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
}

.status-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #888;
}
.status-pill.status-active, .status-pill.status-success { background: var(--vnd-green); }
.status-pill.status-pending, .status-pill.status-in_progress, .status-pill.status-queued { background: #c98a1f; }
.status-pill.status-failure, .status-pill.status-cancelled, .status-pill.status-timed_out { background: #e04f4f; }
.status-pill.status-inactive { background: #888; }
.status-pill.status-transfer { background: #e07b00; margin-left: 6px; }

/* Sugar-flagged "Outside Transfer to WPE" installs (wpe_site_type_c/transfer_status_c) --
   see wpeDashboardInstallIsTransfer() in functions.php. Orange background on the whole row so
   it's easy to spot scanning the table, on top of the "Transfer" pill next to the install name
   (color alone shouldn't be the only signal). */
.status-table tr.wpe-install-transfer {
	background: #fdf0dc;
}

.wpe-inline-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	border: 2px solid #ccd0d4;
	border-top-color: var(--vnd-green);
	border-radius: 50%;
	vertical-align: middle;
	animation: wpe-spin 0.8s linear infinite;
}

@keyframes wpe-spin {
	to { transform: rotate(360deg); }
}

/* Full-page load spinner (page-home.php's #loading overlay) -- replaces the old stock blue
   loading.gif with an on-brand ring in the vendasta.com green, same spin animation as the
   inline SSH spinner above. */
.wpe-page-spinner {
	width: 56px;
	height: 56px;
	border: 5px solid rgba(255, 255, 255, 0.25);
	border-top-color: var(--vnd-green);
	border-radius: 50%;
	animation: wpe-spin 0.9s linear infinite;
}

/* Small dismiss-only popup (currently just the "consider staging instead" suggestion) -- unlike
   the Clean Up panel above, there's no long-running background process a close could orphan
   here, so a plain overlay + Confirm button is fine. */
.wpe-notice-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(7, 35, 55, 0.64);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wpe-notice-modal-inner {
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--vnd-shadow);
	padding: 30px;
	width: 420px;
	max-width: 90%;
}
.wpe-notice-modal-inner p {
	margin-top: 0;
}
/* Two-column button layout for modals with a Yes/No (or similar) pair of actions, e.g.
   #check-dns-modal -- side by side and equal width rather than each stacking full-width. */
.wpe-notice-modal-actions {
	display: flex;
	gap: 10px;
}
.wpe-notice-modal-actions .btn {
	flex: 1;
}

.wpe-cleanup-panel {
	margin-top: 15px;
	padding: 20px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
}
.wpe-cleanup-panel h3 {
	margin-top: 0;
}
.wpe-cleanup-log {
	margin-top: 15px;
	padding: 10px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	max-height: 250px;
	overflow-y: auto;
	font-family: monospace;
	font-size: 12px;
}
.wpe-cleanup-log div {
	padding: 3px 0;
	border-bottom: 1px solid #eee;
}
.wpe-cleanup-log div:last-child {
	border-bottom: none;
}
.status-table-pager {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 20px;
}
.status-pager-info {
	color: #646970;
	font-size: 13px;
}
.status-search-wrap {
	position: relative;
	margin: 10px 0 16px;
	max-width: 320px;
}
.status-search-wrap .form-control {
	padding-right: 32px;
}
/* #our-login button (login page's own submit-button styling) is an ID + element selector --
   higher specificity than a bare .status-search-clear class alone, so it was winning and
   stretching this button to that rule's width:100%/height:40px, covering the whole search box.
   Matching its #our-login prefix here (ID + class beats ID + element) is what actually wins. */
#our-login .status-search-clear {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ccc;
	color: #fff;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
}
#our-login .status-search-clear:hover {
	background: #999;
}
.status-table-no-matches {
	color: #646970;
	font-style: italic;
	margin: 10px 0 20px;
}

/* Bootstrap ships .btn-primary/.btn-secondary/.btn-danger with its own stock blue/gray/red --
   these override them to the vendasta.com palette wherever those classes are used across the
   dashboard's real pages (Refresh, Clean Up / Cancel, Start Clean Up, Run Code Cleanup, etc). */
.btn-primary, .btn-secondary, .btn-danger {
	border: none;
	border-radius: 50px;
	font-weight: 700;
	letter-spacing: 0.5px;
	box-shadow: var(--vnd-shadow);
	transition: all ease .3s;
}
.btn-primary {
	background: var(--vnd-green);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--vnd-green-dark);
	color: #fff;
}
.btn-secondary {
	background: var(--vnd-navy);
	color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
	background: #0c3a56;
	color: #fff;
}
.btn-danger {
	background: #e04f4f;
	color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
	background: #b32d2e;
	color: #fff;
}

/* === Media Queries === */
@media screen and (max-width: 991px) {

}
@media screen and (max-width: 767px) {

}