/* ============================================================
   REY CERA ERP - Shared styling for the standalone (pre-login)
   screens: select-company, login, forgot/reset password,
   create-company, and first-time setup.

   One source of truth so every entry screen matches the in-app
   look (Inter font, navy headings, brand-green buttons) instead
   of each page carrying its own slightly-different Arial styles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --navy: #1e3a5f;
    --green: #1EA362;
    --green-dark: #178750;
    --blue: #2563eb;
    --text: #23272f;
    --muted: #6b7280;
    --border: #e5e7eb;
    --input-border: #d1d5db;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font);
    background: #e7ebf2;
    background-image: linear-gradient(180deg, #f4f6fa 0%, #e7ebf2 100%);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; margin: 0; padding: 20px;
    -webkit-font-smoothing: antialiased;
}

.box {
    max-width: 420px; width: 100%; background: #fff;
    padding: 34px 32px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    border-top: 3px solid var(--navy);
}
.box.wide { max-width: 480px; }

/* Small "REY CERA ERP" wordmark that can sit at the top of a card */
.auth-brand {
    text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--navy); margin-bottom: 16px; opacity: 0.85;
}

h1 { font-size: 20px; font-weight: 600; margin: 0 0 5px; text-align: center; color: var(--navy); letter-spacing: -0.01em; }
.subtitle { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 20px; }

label { display: block; margin-top: 14px; font-weight: 600; font-size: 13px; color: #374151; }
.hint { font-weight: 400; color: var(--muted); font-size: 12px; }

input[type=text], input[type=email], input[type=password] {
    width: 100%; padding: 10px 12px; margin-top: 5px;
    border: 1px solid var(--input-border); border-radius: 6px; box-sizing: border-box;
    font-size: 14px; font-family: var(--font); color: var(--text);
}
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }

fieldset { margin-top: 20px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 15px 16px; }
legend { font-weight: 600; color: #444; padding: 0 6px; font-size: 12.5px; }

button {
    width: 100%; margin-top: 22px; background: var(--green); color: #fff; border: none;
    padding: 12px; border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: 600;
    font-family: var(--font); transition: background 0.15s;
}
button:hover { background: var(--green-dark); }

.error, .errors { background: #fef2f2; color: #b91c1c; padding: 11px 13px; border-radius: 6px; margin-bottom: 12px; font-size: 13.5px; border: 1px solid #fecdd3; }
.errors ul { margin: 0; padding-left: 20px; }
.success { background: #ecfdf3; color: #166534; padding: 12px 14px; border-radius: 6px; font-size: 13.5px; border: 1px solid #bbf0d0; }

.links { text-align: center; margin-top: 18px; font-size: 13px; }
.links a { color: var(--blue); text-decoration: none; margin: 0 8px; }
.links a:hover { text-decoration: underline; }

.empty { text-align: center; color: var(--muted); font-size: 14px; padding: 20px 0; }

/* ---- select-company.php : company chooser ---- */
.company-list { display: flex; flex-direction: column; gap: 10px; }
.company-card {
    display: flex; align-items: center; gap: 14px; padding: 14px;
    border: 1px solid var(--border); border-radius: 8px; text-decoration: none;
    color: var(--text); transition: box-shadow 0.15s, border-color 0.15s;
}
.company-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); border-color: var(--navy); }
.company-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fafafa; border: 1px solid #eee; flex-shrink: 0; }
.company-logo.placeholder { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--navy); background: #eef2f8; }
.company-name { font-weight: 600; font-size: 15px; }
.company-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.create-link { display: block; text-align: center; margin-top: 22px; padding: 12px; background: var(--green); color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 14px; transition: background 0.15s; }
.create-link:hover { background: var(--green-dark); }

/* ---- login.php : per-company logo header ---- */
.company-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.company-header .company-logo { width: 60px; height: 60px; margin-bottom: 10px; }
.company-header .company-logo.placeholder { font-size: 24px; }