/*
 * Admin Panel Styles
 * Loads *after* os2.css to tweak the admin interface.
 */

/* === Main Layout & Toolbar === */

.admin-toolbar {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #888;
    background: #ccc;
    padding: 10px;
    margin: -10px -10px 20px -10px; /* Pull to edges of window content */
    border-top: 1px solid #fff;
}

.admin-toolbar .os2-button {
    margin-right: 5px;
}

/* === Form & Editor Styles === */

.editor-form .os2-form-group {
    margin-bottom: 15px;
}

.editor-form label,
.os2-form-group label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

/*
 * Fix OS/2 theme input sizing.
 * Ensures inputs, textareas, and selects fill 100%
 * of their container and respect padding.
 */
.os2-form-group input[type="text"],
.os2-form-group input[type="password"],
.os2-form-group input[type="file"],
.os2-form-group select,
.os2-form-group textarea {
    width: 100%;
    box-sizing: border-box; /* Crucial for 100% width + padding */
}

/* Make textareas more appropriate for code/markdown */
.os2-form-group textarea {
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
}

.os2-form-group small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #333;
}

/* === Button Styles === */

/* Make the primary save button stand out */
.os2-button-primary {
    font-weight: bold;
    background-color: #000080; /* OS/2 Blue */
    color: white;
    border-color: #000080;
}

.os2-button-primary:active,
.os2-button-primary:focus {
    background-color: #0000a0;
    color: white;
}

/* === Media Manager === */

.media-grid {
    display: grid;
    /* Creates a responsive grid that fills columns */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding-top: 10px;
    border-top: 1px solid #888;
}

.media-item {
    border: 2px solid #888;
    padding: 5px;
    text-align: center;
    background: #fff;
    box-shadow: 2px 2px 0 #888;
}

.media-item img,
.media-item video {
    max-width: 100%;
    height: 110px;
    object-fit: cover; /* Ensures images fill the space nicely */
    background: #eee;
    margin-bottom: 5px;
    border: 1px solid #ccc;
}

.media-item small {
    display: block;
    font-size: 10px;
    /* Break long filenames */
    word-break: break-all;
    height: 2.5em; /* Allow for ~2 lines of text */
    overflow: hidden;
}

.media-item .media-url {
    width: 100%;
    font-size: 11px;
    margin-top: 5px;
    padding: 4px;
    box-sizing: border-box;
}

#upload-status {
    margin-top: 15px;
    padding: 10px;
    border: 1px dashed #888;
    background: #eee;
    display: none; /* Will be shown by JS */
}

#upload-status.visible {
    display: block;
}