/* =============================================================
   KloPi Pages Management — Styles for the page rotation admin
   ============================================================= */

/* =============================================================
   PIN overlay — fullscreen overlay that blocks access until PIN
   ============================================================= */

.pin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0d1117;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.pin-box {
    background: #161b22;
    border: 2px solid #30363d;
    border-radius: 16px;
    padding: 32px 28px;
    max-width: 360px;
    width: 90%;
    text-align: center;
}

.pin-box h2 {
    color: #58a6ff;
    font-size: 20px;
    margin-bottom: 12px;
    text-transform: none;
    letter-spacing: 0;
}

.pin-box p {
    color: #8b949e;
    font-size: 14px;
    margin-bottom: 20px;
}

.pin-box input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 24px;
    text-align: center;
    letter-spacing: 8px;
    background: #0d1117;
    border: 2px solid #30363d;
    border-radius: 10px;
    color: #e6edf3;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 16px;
}

.pin-box input[type="password"]:focus {
    border-color: #58a6ff;
}

.pin-buttons {
    display: flex;
    gap: 10px;
}

.btn-pin-ok {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: #238636;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-pin-ok:hover { background: #2ea043; }

.btn-pin-cancel {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #8b949e;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-pin-cancel:hover { background: #292e36; }

.pin-error {
    color: #f85149;
    font-size: 14px;
    margin-top: 12px;
    min-height: 20px;
}

/* =============================================================
   Subtitle under header
   ============================================================= */

.subtitle {
    color: #8b949e;
    font-size: 13px;
    margin-top: 4px;
}

/* =============================================================
   Page entry card — one card per rotation page
   ============================================================= */

.page-entry {
    background: #161b22;
    border: 2px solid #30363d;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    position: relative;
}

/* Page entry header: page number + move/delete buttons */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.page-number {
    font-size: 14px;
    font-weight: 600;
    color: #58a6ff;
}

/* Move and delete buttons in a row */
.page-actions {
    display: flex;
    gap: 6px;
}

.btn-move, .btn-remove {
    width: 36px;
    height: 36px;
    border: 1px solid #30363d;
    border-radius: 8px;
    background: #21262d;
    color: #8b949e;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    padding: 0;
    font-family: inherit;
}

.btn-move:hover {
    background: #292e36;
    color: #e6edf3;
}

.btn-remove {
    color: #f85149;
    border-color: #da3633;
}

.btn-remove:hover {
    background: #2d1215;
}

/* Disabled move buttons (first up, last down) */
.btn-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* =============================================================
   Input fields within a page entry
   ============================================================= */

.page-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-field label {
    font-size: 12px;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-field input[type="text"],
.page-field input[type="number"],
.page-field input[type="url"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: #e6edf3;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.page-field input:focus {
    border-color: #58a6ff;
}

.page-field input::placeholder {
    color: #484f58;
}

/* Number inputs: narrower, inline with label */
.page-field-row {
    display: flex;
    gap: 10px;
}

.page-field-row .page-field {
    flex: 1;
}

/* Name field: smaller, inline */
.page-field-name {
    margin-bottom: 4px;
}

/* =============================================================
   Advanced toggle button — expands to show scale, wait time
   ============================================================= */

.btn-advanced-toggle {
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #8b949e;
    background: none;
    border: 1px solid #30363d;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-top: 6px;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-advanced-toggle:hover {
    color: #58a6ff;
    border-color: #58a6ff;
}

/* Advanced fields panel */
.advanced-fields {
    margin-top: 8px;
}

/* Select dropdown — same styling as text inputs */
.page-field select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    color: #e6edf3;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b949e' fill='none' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.page-field select:focus {
    border-color: #58a6ff;
}

/* =============================================================
   Add button
   ============================================================= */

.btn-add {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #58a6ff;
    background: #0d1117;
    border: 2px dashed #30363d;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    margin-top: 4px;
    font-family: inherit;
}

.btn-add:hover {
    background: #161b22;
    border-color: #58a6ff;
}

/* =============================================================
   Cancel button (same row as Apply)
   ============================================================= */

.btn-cancel {
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #8b949e;
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.btn-cancel:hover {
    background: #292e36;
}