/*
Theme Name: MHC Payroll App
Theme URI: https://devfl.us/
Author: DEV FL
Author URI: https://devfl.us/
Description: Minimal application shell for the MHC Payroll plugin. Renders the Vue SPA full-bleed and provides a branded login screen. Deliberately a classic theme: templates are files, so a fresh install renders correctly with no Site Editor steps and nothing to configure in the database.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mhc-app
*/

/* ---------------------------------------------------------------------------
   Colors come from Element Plus, which the plugin already enqueues site-wide in
   assets/dist/app.css. Reusing those custom properties means the login screen
   tracks the app exactly, including its light/dark toggle, with no second
   palette to keep in sync. The var() fallbacks cover the plugin being inactive.
   --------------------------------------------------------------------------- */

html,
body {
  margin: 0;
  padding: 0;
}

body.mhc-app-shell {
  background: var(--el-bg-color, #ffffff);
  color: var(--el-text-color-primary, #303133);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The SPA owns the whole viewport. No theme chrome, no width constraint. */
body.mhc-app-shell #vwp-plugin {
  width: 100%;
  min-height: 100vh;
  /* The plugin pulls #vwp-plugin up by 34px to tuck it under the WordPress admin
     bar. This theme hides the admin bar, so that compensation over-corrects and
     clips the app's own header. Neutralised here rather than in the plugin,
     which still runs on the frozen production site where the offset is right. */
  top: 0;
}

/* --------------------------------- Login --------------------------------- */

body.mhc-login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--el-bg-color-page, #f2f3f5);
}

.mhc-login-card {
  width: 100%;
  max-width: 400px;
  padding: 40px 36px;
  border-radius: 8px;
  background: var(--el-bg-color-overlay, #ffffff);
  border: 1px solid var(--el-border-color-light, #e4e7ed);
  box-shadow: var(--el-box-shadow-light, 0 0 12px rgba(0, 0, 0, .12));
  box-sizing: border-box;
}

.mhc-login-brand {
  text-align: center;
  margin-bottom: 28px;
}

/* Both axes bounded: the logo is uploaded per clinic, so nothing guarantees a
   landscape aspect ratio. Without max-height a portrait logo pushes the form
   off screen. */
.mhc-login-brand img {
  max-width: 180px;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: inline-block;
}

.mhc-login-brand h1 {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--el-text-color-primary, #303133);
}

/* wp_login_form() markup */
.mhc-login-card .login-username,
.mhc-login-card .login-password {
  margin-bottom: 18px;
}

.mhc-login-card label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--el-text-color-regular, #606266);
}

.mhc-login-card input[type="text"],
.mhc-login-card input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--el-text-color-primary, #303133);
  background: var(--el-fill-color-blank, #ffffff);
  border: 1px solid var(--el-border-color, #dcdfe6);
  border-radius: 4px;
  transition: border-color .2s;
}

.mhc-login-card input[type="text"]:focus,
.mhc-login-card input[type="password"]:focus {
  outline: none;
  border-color: var(--el-color-primary, #409eff);
}

.mhc-login-card .login-remember {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--el-text-color-regular, #606266);
}

.mhc-login-card .login-remember input {
  margin-right: 6px;
  vertical-align: middle;
}

.mhc-login-card .login-submit input[type="submit"] {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: var(--el-color-primary, #409eff);
  border: 1px solid var(--el-color-primary, #409eff);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .2s;
}

.mhc-login-card .login-submit input[type="submit"]:hover {
  opacity: .85;
}

/* The plugin's [mhc_app_login] appends the lost-password link in a bare <p>.
   wp_login_form() gives every field paragraph a class (login-username,
   login-password, ...), so :not([class]) isolates the links one and leaves the
   form fields left-aligned. */
.mhc-login-card .mhc-login > p:not([class]) {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
}

.mhc-login-card a {
  color: var(--el-color-primary, #409eff);
  text-decoration: none;
}

.mhc-login-card a:hover {
  text-decoration: underline;
}