/* client-view.php */


.ald-portal{max-width:1100px;margin:7rem auto;padding:1rem 1.25rem 2rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif}
      .ald-portal-header{display:flex;justify-content:space-between;align-items:center;margin:1rem 0 1.25rem}
      .ald-portal-header h1{font-size:1.4rem;margin:0}
      .ald-portal-header .meta{color:#666}
      .ald-tabs{display:flex;gap:.5rem;border-bottom:1px solid #eee;margin-bottom:1rem}
      .ald-tab{padding:.6rem 1rem;border:1px solid #eee;border-bottom:none;border-top-left-radius:10px;border-top-right-radius:10px;background:#fafafa;cursor:pointer}
      .ald-tab.active{background:#fff;font-weight:600}
      .ald-panel{display:none;border:1px solid #eee;border-radius:0 10px 10px 10px;padding:1rem;background:#fff}
      .ald-panel.active{display:block}
      .ald-list{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:.75rem}
      .ald-card{border:1px solid #eee;border-radius:12px;padding:.9rem .95rem;background:#fff;display:flex;gap:.8rem;justify-content:space-between;align-items:center}
      .ald-title{font-weight:600}
      .ald-date{color:#666}
      .ald-actions a{text-decoration:none;color:#02142C;border:1px solid #02142C22;padding:.35rem .6rem;border-radius:8px}
      .ald-empty{color:#888}
      .ald-topbar{display:flex;gap:.5rem;align-items:center}
      .ald-logout{margin-left:auto}
      @media (min-width:740px){ .ald-list{grid-template-columns:1fr} }
      /* Modal */
      @media (min-width:740px) {
        /* Two-row header layout */
        .ald-portal-header {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.4rem;
          margin-bottom: 1.2rem;
        }

        /* First row: title only */
        .ald-topbar {
          display: block;
          width: 100%;
        }
        .ald-topbar h1 {
          margin-bottom: 0.4rem;
        }

        /* Second row: meta + logout on one line */
        .ald-meta-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
        .ald-topbar .meta,
        .ald-logout {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
        }
        .ald-logout { margin-left: auto; }
      }
      .ald-portal {    margin: 4rem auto;}
      .ald-modal{position:fixed;inset:0;display:none;z-index:9999}
      .ald-modal[aria-hidden="false"]{display:block}
      .ald-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
      .ald-dialog{position:relative;max-width:880px;margin:5vh auto;background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden}
      .ald-modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #eee}
      .ald-modal-title{margin:0;font-size:1.25rem}
      .ald-modal-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer}
      .ald-modal-meta{display:flex;gap:8px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid #f2f2f2}
      .ald-chip{background:#f6f7f9;border:1px solid #e9edf3;border-radius:999px;padding:4px 10px;font-size:.85rem;color:#334}
      .ald-modal-body{padding:16px 18px}
      
      @media (max-width:740px) {
        .ald-tab {font-size: 13px;
            padding: .5rem 0.3rem
          }
        /* Two-row header layout on small screens too */
        .ald-portal-header {
          display: grid;
          grid-template-columns: 1fr auto;
          grid-template-rows: auto auto; /* row1: title, row2: meta + logout */
          align-items: center;
          gap: 0.25rem 0.5rem;
        }
        /* Let h1 and .meta participate directly in the grid */
        .ald-topbar { display: contents; }

        /* Row 1: title spans full width */
        .ald-topbar h1 {
          grid-column: 1 / -1;
          margin: 0 0 0.25rem 0;
        }
        /* Row 2: meta left, logout right */
        .ald-topbar .meta { grid-column: 1 / 2; }
        .ald-logout {
          grid-column: 2 / 3;
          justify-self: end;
          margin-left: 0; /* override desktop auto push */
        }
      }





/* client-login.php */

      .cpl-wrap{max-width:760px;margin:4rem auto 2.5rem;padding:0 1rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;text-align:center}
      .cpl-title{font-size:36px;line-height:1.08;margin:0 0 .9rem;color:#02142C;font-weight:700}
      .cpl-form{max-width:560px;margin:0 auto}
      .cpl-row{max-width:560px;margin:0 auto .5rem}
      .cpl-input{width:100%;height:40px;font-size:15px;line-height:1;padding:0 12px;border:1px solid #96A7C2;border-radius:10px;box-shadow:0 2px 0 rgba(2,20,44,.08) inset;outline:none}
      .cpl-submit{display:block;width:100%;height:44px;margin:10px auto 12px;border:0;border-radius:10px;background:linear-gradient(90deg,#F7A600 0%, #CC0D14 100%);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
      .cpl-helper{margin-top:.15rem;color:#0A2342;font-size:15px}
      .cpl-alt{margin-top:6px;font-size:15px}
      .cpl-alt a{color:#CC0D14;text-decoration:none;font-weight:700}
      .cpl-notice{max-width:560px;margin:0 auto 10px;text-align:center;padding:8px 10px;border-radius:8px;font-size:13px}
      .cpl-success{background:#E8F7EE;color:#146B2E;border:1px solid #B6E4C3}
      .cpl-error{background:#FCE8E8;color:#8A1717;border:1px solid #F2C2C2}
      .cpl-forgot{margin-top:12px}
      .cpl-toggle{background:none;border:0;color:#02142C;text-decoration:underline;cursor:pointer;font-size:14px}
      .cpl-rec{display:none;max-width:520px;margin:8px auto 0}
      .cpl-rec .cpl-input{height:38px;font-size:14px}
      .cpl-rec .cpl-submit{height:42px;font-size:15px;margin-top:6px}