/**
 * JetForm Location Clock-In - Greyscale / Muted Notifications (updated)
 * - Use Roboto regular for notification UI (font loaded via PHP)
 * - Background colors may be overridden via JS (admin choice)
 * - Text is white by default (JS enforces white or fallback dark if background very light)
 */

/* Hide location fields robustly */
[data-field-name="user_latitude"],
[data-field-name="user_longitude"],
[data-field-name="location_accuracy"],
input[name="user_latitude"],
input[name="user_longitude"],
input[name="location_accuracy"],
input[id*="user_latitude"],
input[id*="user_longitude"],
input[id*="location_accuracy"],
[data-name="user_latitude"],
[data-name="user_longitude"],
[data-name="location_accuracy"] {
    display: none !important;
}

/* Status container (class + legacy ID) */
.jflc-status,
#location-status {
    /* inherit global/site font and weight so plugin matches site typography */
    font-family: inherit;
    font-weight: inherit;

    padding: 12px;
    margin-bottom: 16px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
    line-height: 1.35;
}

/* maintain the same white text default behavior */
.jflc-status .status-text,
#location-status .status-text {
    font-size: 15px;
    font-weight: inherit;
    color: #ffffff;
}

.jflc-status .status-details,
#location-status .status-details {
    display: block;
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.95;
    color: #ffffff;
}

/* Greyscale fallback backgrounds (when admin leaves colors blank) */
.jflc-status--info {
    background-color: #fbfbfb; /* very light grey */
    border-color: #efefef;
}

.jflc-status--success {
    background-color: #f8f8f8; /* subtle grey */
    border-color: #e9e9e9;
}

.jflc-status--warning {
    background-color: #f6f6f6; /* slightly darker grey */
    border-color: #e7e7e7;
}

.jflc-status--error {
    background-color: #f4f4f4; /* muted grey for errors too */
    border-color: #e5e5e5;
}

/* If JS applies inline background colors, they will override these fallbacks.
   JS also sets inline text color (white or dark fallback) for legibility. */

/* responsive */
@media (max-width: 480px) {
    .jflc-status { font-size: 14px; padding: 10px; }
    .jflc-status .status-details { font-size: 12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .jflc-status { transition: none; }
}

/* Inline error block */
.jflc-inline-error {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: #fbfbfb;
    border: 1px solid #efefef;
    color: rgba(0,0,0,0.6);
    font-weight: 700;
    text-align: center;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
}