/**
 * Shared Styles for Mexam Plugin
 * Applies to forms, dashboard cards, alerts, and password fields
 */

body.cp-dashboard-page .site,
body.cp-dashboard-page .entry-content,
body.cp-dashboard-page .content-area,
body.cp-dashboard-page .site-content {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cp-dashboard-page .dashboard-grid {
  padding: 8px; /* Give it slight breathing room */
}



      .dashboard-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
        margin: 0 auto;
        padding: 10px 12px;    /* Reduce side padding */
        font-family: Arial, sans-serif;
        box-sizing: border-box;
      }

      .dashboard-card {
        background: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        border-left: 6px solid #0066cc;
      }

      .dashboard-card.alert {
        border-left-color: #cc0000;
        background: #fff0f0;
      }

      .dashboard-card h3 {
        margin-top: 0;
        background: #0066cc;
        color: #fff;
        padding: 8px;
        font-size: 1em;
      }

      .dashboard-card .password-wrapper {
      position: relative;
      }

      .dashboard-card .password-toggle {
      width: 100%;
      padding-right: 2em; /* space for the icon */
      }

    .dashboard-card .password-eye {
    position: absolute;
    right: 0.75em;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    font-size: 1.2em;
    user-select: none;
    }


      #cp-dashboard ul li::marker,
      #cp-dashboard ul li::before {
        content: none !important;
      }

      #cp-dashboard .dashboard-card ul,
      #cp-dashboard .dashboard-card ol {
        list-style-type: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
      }


      .dashboard-card ul li {
        margin-bottom: 5px;
      }

      .dashboard-card ul li.alert {
        background: #ffe6e6;
        padding: 4px;
      }

      .link {
        color: #0066cc;
        text-decoration: underline;
        cursor: pointer;
      }

      /* agents */

      .agent-entry {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 0;
        font-size: 1em;
      }

      .agent-form {
        display: inline;
        /* ✨ prevents it from breaking to the next line */
        margin: 0;
      }

      .agent-btn {
        background: transparent;
        border: none;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 4px;
        color: #cc0000;
        /* red ❌, blue ➕ is optional */
        min-width: 30px;
        text-align: center;
      }

      .agent-info {
        flex-grow: 1;
        color: #333;
        word-break: break-word;
      }