/* ===================================================================
   MIPACE — shared styles
   Edit the variables below to set the brand look. Deliberately not
   styled like a social profile: high contrast, minimal decoration,
   built to be read fast by someone who isn't the profile owner.
   =================================================================== */
:root{
  --mipace-bg:            #07aebe;
  --mipace-surface:       #ffffff;
  --mipace-border:        #e1e5e7;
  --mipace-radius:        14px;
  --mipace-text:          #16253b;
  --mipace-muted:         #5b6770;
  --mipace-primary:       #6e479c;  
  --mipace-primary-text:  #ffffff;
  --mipace-button-bg:      var(--mipace-primary);
  --mipace-button-text:    var(--mipace-primary-text);
  --mipace-button-hover-bg: var(--mipace-primary);
  --mipace-alert-bg:      #b9a1cd;
  --mipace-alert-border:  #2a0541;
  --mipace-alert-text:    #2a0541;
  --mipace-priority-bg:   #6e479c;
  --mipace-priority-border: #2a0541;
  --mipace-success:       #1c7c4c;
  --mipace-error:         #b3261e;
  --mipace-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.mipace-public-body{
  margin: 0;
  background: var(--mipace-bg);
  font-family: var(--mipace-font);
  color: var(--mipace-text);
}

.mipace-page{
  --mipace-box-width: 640px;
  --mipace-page-padding: 24px;
  --mipace-page-radius: var(--mipace-radius);
}

/*
 * Page-specific hooks. You can override these in Elementor Custom CSS
 * or in this stylesheet without touching the plugin PHP.
 * Available hooks:
 * .mipace-page-login
 * .mipace-page-register
 * .mipace-page-dashboard
 * .mipace-page-account
 * .mipace-page-profile
 * .mipace-page-devices
 * .mipace-page-public
 */
.mipace-page-login{ --mipace-box-width: 640px; }
.mipace-page-register{ --mipace-box-width: 640px; }
.mipace-page-dashboard{ --mipace-box-width: 640px; }
.mipace-page-account{ --mipace-box-width: 640px; }
.mipace-page-profile{ --mipace-box-width: 820px; }
.mipace-page-devices{ --mipace-box-width: 820px; }
.mipace-page-public{ --mipace-box-width: 640px; }

.mipace-box{
  max-width: var(--mipace-box-width, 640px);
  margin: 24px auto;
  padding: var(--mipace-page-padding, 24px);
  background: var(--mipace-surface);
  border: 1px solid var(--mipace-border);
  border-radius: var(--mipace-page-radius, var(--mipace-radius));
  box-sizing: border-box;
  font-family: var(--mipace-font);
  color: var(--mipace-text);
}
@media (max-width: 600px){
  .mipace-box{ margin-left: 5%; margin-right: 5%; width: 90%; }
}

.mipace-logo{
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--mipace-primary);
  font-size: 14px;
  margin-bottom: 10px;
}

.mipace-field{ margin: 0 0 14px; }
.mipace-field label{ display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.mipace-field input,
.mipace-field textarea,
.mipace-field select{
  width: 100%;
  padding: 11px;
  border: 1px solid #cfd6d9;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
}

.mipace-page .mipace-button,
.mipace-page a.mipace-button,
.mipace-page button.mipace-button,
.mipace-page input.mipace-button{
  display: inline-block;
  padding: 12px 18px;
  border: 0 !important;
  border-radius: 8px;
  background: var(--mipace-button-bg) !important;
  color: var(--mipace-button-text) !important;
  text-decoration: none !important;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  box-shadow: none !important;
}
.mipace-page .mipace-button:hover,
.mipace-page .mipace-button:focus,
.mipace-page .mipace-button:active,
.mipace-page a.mipace-button:hover,
.mipace-page button.mipace-button:hover{
  background: var(--mipace-button-hover-bg) !important;
  color: var(--mipace-button-text) !important;
  opacity: .92;
}
.mipace-button-small{ padding: 8px 12px !important; font-size: 13px !important; }
/* All MIPACE actions use the same button colour.
   'Danger' is retained as a semantic class for compatibility, but is no longer red. */
.mipace-page .mipace-button-danger{
  background: var(--mipace-button-bg) !important;
  color: var(--mipace-button-text) !important;
  border-color: var(--mipace-button-bg) !important;
}

.mipace-success{ color: var(--mipace-success); font-weight: 600; }
.mipace-error{ color: var(--mipace-error); font-weight: 600; }
.mipace-hint{ font-size: 12px; color: var(--mipace-muted); margin: 4px 0 12px; }
.mipace-links{ font-size: 14px; margin-top: 14px; }

.mipace-checkbox-row{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  font-size: 14px;
}

/* ---- Dashboard ---- */
.mipace-dash-links{ display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.mipace-dash-link{
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--mipace-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--mipace-text);
}
.mipace-dash-link strong{ color: var(--mipace-primary); }
.mipace-dash-link span{ font-size: 13px; color: var(--mipace-muted); margin-top: 2px; }

/* ---- Photo previews ---- */
.mipace-photo-preview img{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
}

/* ---- Devices list ---- */
.mipace-device-card{
  border: 1px solid var(--mipace-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.mipace-device-card-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mipace-device-meta{ font-size: 13px; color: var(--mipace-muted); margin: 4px 0 10px; }
.mipace-status-pill{ font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #eee; }
.mipace-status-active{ background: #e1f3ea; color: var(--mipace-success); }
.mipace-status-pending{ background: #fff4e5; color: var(--mipace-alert-text); }
.mipace-status-inactive{ background: #eee; color: var(--mipace-muted); }
.mipace-status-lost{ background: #fdecec; color: var(--mipace-error); }
.mipace-inline-form{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.mipace-inline-form input[type="text"]{ flex: 1; min-width: 140px; padding: 8px; border: 1px solid #cfd6d9; border-radius: 6px; }

/* ---- Device page controls ----
   Separate variables let the Devices page be branded independently.
   !important is used here because WordPress/Elementor themes commonly
   apply their own colours to buttons and links. */
.mipace-page-devices{
  --mipace-device-button-bg: var(--mipace-primary);
  --mipace-device-button-text: var(--mipace-primary-text);
  --mipace-device-button-hover-bg: var(--mipace-primary);
  --mipace-device-public-link: var(--mipace-primary);
  --mipace-device-public-link-hover: var(--mipace-primary);
}
.mipace-page-devices .mipace-inline-form .mipace-button:not(.mipace-button-danger){
  background: var(--mipace-device-button-bg) !important;
  color: var(--mipace-device-button-text) !important;
  border-color: var(--mipace-device-button-bg) !important;
}
.mipace-page-devices .mipace-inline-form .mipace-button:not(.mipace-button-danger):hover,
.mipace-page-devices .mipace-inline-form .mipace-button:not(.mipace-button-danger):focus{
  background: var(--mipace-device-button-hover-bg) !important;
  color: var(--mipace-device-button-text) !important;
}
.mipace-page-devices .mipace-public-profile-link{
  color: var(--mipace-device-public-link) !important;
  text-decoration: none;
  font-weight: 600;
}
.mipace-page-devices .mipace-public-profile-link:hover,
.mipace-page-devices .mipace-public-profile-link:focus{
  color: var(--mipace-device-public-link-hover) !important;
  text-decoration: underline;
}
.mipace-page-devices .mipace-button-danger{
  background: var(--mipace-device-button-bg) !important;
  color: var(--mipace-device-button-text) !important;
  border-color: var(--mipace-device-button-bg) !important;
}

/* ---- Profile editor ---- */
.mipace-section-editor{
  border: 1px solid var(--mipace-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.mipace-section-editor-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mipace-section-editor-head h3{ margin: 0; }
.mipace-toggle{ display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }

.mipace-contacts-editor{ margin-top: 10px; }
.mipace-contact-row{
  display: grid;
  grid-template-columns: repeat(1, 4fr) auto;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}
.mipace-contact-row input{ padding: 8px; border: 1px solid #cfd6d9; border-radius: 6px; font-size: 13px; }
.mipace-priority-input{ width: 70px; }
@media (max-width: 640px){
  .mipace-contact-row{ grid-template-columns: 1fr 1fr; }
}

.mipace-danger-zone{ margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--mipace-border); }

/* ===================================================================
   PUBLIC EMERGENCY PROFILE
   =================================================================== */
.mipace-public-profile{ padding: 0; overflow: hidden; }
.mipace-header{ padding: 28px 24px 20px; text-align: center; }
.mipace-avatar{
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  margin: 4px auto 12px;
  display: block;
  border: 3px solid var(--mipace-surface);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.mipace-header h1{ margin: 0 0 4px; font-size: 24px; }
.mipace-sub{ color: var(--mipace-muted); margin: 0 0 12px; font-size: 14px; }
.mipace-alert{
  background: var(--mipace-alert-bg);
  border: 1px solid var(--mipace-alert-border);
  color: var(--mipace-alert-text);
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
  margin-top: 10px;
}

.mipace-section{ padding: 18px 24px; border-top: 1px solid var(--mipace-border); }
.mipace-section h2{ font-size: 13px; letter-spacing: 1px; color: var(--mipace-muted); margin: 0 0 12px; }
.mipace-section-priority{ background: var(--mipace-priority-bg); }
.mipace-section-priority h2{ color: var(--mipace-priority-border); }

.mipace-field-label{ display: block; font-size: 12px; font-weight: 700; color: var(--mipace-muted); margin-top: 10px; }
.mipace-field-label:first-child{ margin-top: 0; }
.mipace-field-value{ display: block; font-size: 15px; line-height: 1.45; }

.mipace-contacts{ background: var(--mipace-priority-bg); }
.mipace-contact{ margin-bottom: 14px; }
.mipace-contact:last-child{ margin-bottom: 0; }
.mipace-contact-name{ font-weight: 700; margin-bottom: 6px; }
.mipace-contact-name span{ font-weight: 400; color: var(--mipace-muted); }
.mipace-action{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--mipace-primary);
  color: var(--mipace-primary-text);
  text-decoration: none;
  font-size: 14px;
  margin-right: 8px;
  margin-top: 4px;
}
.mipace-action-secondary{ background: transparent; border: 1px solid var(--mipace-primary); color: var(--mipace-primary); }

.mipace-footer{ padding: 16px 24px 24px; text-align: center; }
.mipace-footer p{ font-size: 12px; color: var(--mipace-muted); margin: 0; }

.mipace-status{ text-align: center; padding: 40px 24px; }


/* ===================================================================
   PER-PAGE CUSTOMISATION EXAMPLES
   Copy these selectors into Elementor Custom CSS or edit the values
   above. Each shortcode can also accept class="your-class" id="your-id".

   Example:
   [mipace_login class="brand-login" id="mipace-login"]

   Then style it with:
   .mipace-page-login.brand-login {
     --mipace-primary: #000000;
     --mipace-primary-text: #ffffff;
     --mipace-surface: #ffffff;
     --mipace-box-width: 720px;
     --mipace-page-padding: 32px;
     --mipace-page-radius: 4px;
   }

   Useful selectors inside every page:
   .mipace-page-login .mipace-button
   .mipace-page-login .mipace-field
   .mipace-page-login .mipace-logo
   .mipace-page-dashboard .mipace-dash-link
   .mipace-page-profile .mipace-section-editor
   .mipace-page-devices .mipace-device-card
   =================================================================== */

/*
   DEVICE PAGE QUICK CUSTOMISATION
   Example for a black/white MIPACE Devices page:

   .mipace-page-devices{
     --mipace-device-button-bg:#000000;
     --mipace-device-button-text:#ffffff;
     --mipace-device-button-hover-bg:#222222;
     --mipace-device-public-link:#000000;
     --mipace-device-public-link-hover:#555555;
   }
*/