/**
 * File: plugin-styles.css
 *
 * Description: This file contains the basic CSS styles for the frontend components
 * generated by the Skien Marked plugin. It aims to follow the minimalist design
 * principles outlined in the project prompt.
 *
 * @package SkienMarked
 */

/* General Body and Typography */
body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Prefer Inter, fallback to system fonts */
    color: #333333; /* Dark gray for text */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #1F1F1F; /* Dark gray for headings */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* General Dashboard Styling */
.sm-dashboard {
    background-color: #FFFFFF; /* White background */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.sm-dashboard-title {
    font-size: 2.2em;
    margin-top: 0;
    color: #1C2E45; /* Deep blue for main titles */
}

.sm-dashboard-subtitle {
    font-size: 1.2em;
    font-style: italic;
    color: #666666;
    margin-bottom: 30px;
}

.sm-section {
    background-color: #F7F7F7; /* Light gray for sections */
    padding: 25px;
    border-radius: 5px;
    margin-bottom: 25px;
}

.sm-section h3 {
    font-size: 1.5em;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* ACF Form Styling (Minimalist) */
.acf-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333333;
}

.acf-form input[type="text"],
.acf-form input[type="email"],
.acf-form input[type="password"],
.acf-form input[type="number"],
.acf-form textarea,
.acf-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    background-color: #F0F0F0; /* Light gray background for inputs */
    border-radius: 4px;
    box-sizing: border-box; /* Include padding in width */
}

.acf-form input[type="submit"],
.acf-form .acf-button {
    background-color: #4C8FDB; /* Accent blue */
    color: #FFFFFF;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.acf-form input[type="submit"]:hover,
.acf-form .acf-button:hover {
    background-color: #3A7AD1; /* Slightly darker blue on hover */
}

.acf-form input[type="submit"]:disabled,
.acf-form .acf-button.sm-submitting {
    background-color: #A0A0A0; /* Gray out when submitting */
    cursor: not-allowed;
}

/* Message List Styling */
.sm-message-list {
    list-style: none;
    padding: 0;
}

.sm-message-list li {
    background-color: #FFFFFF;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Responsive Message Grid */
.sm-messages-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column on mobile */
    gap: 20px;
}

@media (min-width: 768px) {
    .sm-messages-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 3 columns on desktop */
    }
}

.sm-message-item {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.sm-message-item h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #1F1F1F;
}

.sm-message-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto; /* Center image */
    border-radius: 4px;
}

.sm-message-item .sm-message-content {
    flex-grow: 1; /* Allow content to take available space */
    margin-bottom: 15px;
}

.sm-message-item .sm-message-meta {
    font-size: 0.9em;
    color: #666666;
    margin-top: auto; /* Push meta to bottom */
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.sm-date {
    display: block;
    margin-top: 5px;
}

/* Message Tags */
.sm-tag {
    display: inline-block;
    padding: 5px 10px;
    margin-right: 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}

.sm-tag-internal {
    background-color: #E0F2F7; /* Light blue */
    color: #0277BD; /* Darker blue */
}

.sm-tag-public {
    background-color: #E8F5E9; /* Light green */
    color: #2E7D32; /* Darker green */
}

/* Public Borettslag List (Card View) */
.sm-borettslag-list {
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column on mobile */
    gap: 25px;
    padding: 20px 0;
}

@media (min-width: 768px) {
    .sm-borettslag-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 3 columns on desktop */
    }
}

.sm-borettslag-item {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out;
}

.sm-borettslag-item:hover {
    transform: translateY(-5px);
}

.sm-borettslag-item img {
    width: 100%;
    height: 200px; /* Fixed height for images */
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.sm-borettslag-item h3 {
    font-size: 1.4em;
    margin: 15px 15px 5px 15px;
    color: #1C2E45;
}

.sm-borettslag-item p {
    font-size: 0.95em;
    color: #555555;
    padding: 0 15px 15px 15px;
    margin: 0;
}

.sm-borettslag-item a {
    display: block;
    text-align: center;
    padding: 10px 15px;
    background-color: #F0F0F0;
    color: #4C8FDB;
    font-weight: bold;
    text-decoration: none;
    border-top: 1px solid #E0E0E0;
}

.sm-borettslag-item a:hover {
    background-color: #E0E0E0;
}

/* Registration and Admin Forms */
.sm-registration-form, .sm-admin-form {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.sm-registration-form h3, .sm-admin-form h3 {
    font-size: 1.8em;
    color: #1C2E45;
    margin-top: 0;
    margin-bottom: 20px;
}

.sm-registration-form label, .sm-admin-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333333;
}

.sm-registration-form input[type="text"],
.sm-registration-form input[type="email"],
.sm-registration-form input[type="password"],
.sm-registration-form input[type="number"],
.sm-registration-form select,
.sm-admin-form input[type="text"],
.sm-admin-form input[type="email"],
.sm-admin-form input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: none;
    background-color: #F0F0F0;
    border-radius: 4px;
    box-sizing: border-box;
}

.sm-registration-form input[type="submit"],
.sm-registration-form .acf-button,
.sm-admin-form input[type="submit"] {
    background-color: #4C8FDB;
    color: #FFFFFF;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.sm-registration-form input[type="submit"]:hover,
.sm-registration-form .acf-button:hover,
.sm-admin-form input[type="submit"]:hover {
    background-color: #3A7AD1;
}

.sm-registration-form input[type="submit"]:disabled,
.sm-registration-form .acf-button.sm-submitting,
.sm-admin-form input[type="submit"]:disabled {
    background-color: #A0A0A0; /* Gray out when submitting */
    cursor: not-allowed;
}

.sm-error {
    color: #D32F2F; /* Red for errors */
    background-color: #FFEBEE;
    border: 1px solid #EF9A9A;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.sm-success {
    color: #388E3C; /* Green for success */
    background-color: #E8F5E9;
    border: 1px solid #A5D6A7;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* ACF Updated Message Styling */
.acf-notice.acf-success {
    background-color: #E8F5E9; /* Light green */
    color: #2E7D32; /* Darker green */
    border-color: #A5D6A7;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* Message Actions (Edit/Delete Buttons) */
.sm-message-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.sm-button {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sm-button-edit {
    background-color: #4C8FDB; /* Accent blue */
    color: #FFFFFF;
}

.sm-button-edit:hover {
    background-color: #3A7AD1;
}

.sm-button-delete {
    background-color: #D32F2F; /* Red */
    color: #FFFFFF;
    border: none;
}

.sm-button-delete:hover {
    background-color: #C62828;
}

/* Toggle Status Buttons */
.sm-button-deactivate {
    background-color: #4CAF50; /* Green */
    color: #FFFFFF;
    border: none;
}

.sm-button-deactivate:hover {
    background-color: #45A049;
}

.sm-button-activate {
    background-color: #FF9800; /* Orange */
    color: #FFFFFF;
    border: none;
}

.sm-button-activate:hover {
    background-color: #FB8C00;
}

.sm-delete-form {
    display: inline-block; /* To align with the edit button */
    margin: 0; /* Remove default form margin */
}

.sm-toggle-status-form {
    display: inline-block; /* To align with other buttons */
    margin: 0;
}