/* ---------------------------------------------------------------------------
 * assets/css/dev-console.css
 *
 * WurmMaps theming for the Developer Console, Maintenance, API Clients,
 * Scheduled Tasks and Link Tracking pages. These pages were brought over from
 * the login-system repo and shipped with their own look; this restyles them in
 * WurmMaps' visual language so they match the rest of the site.
 *
 * Palette taken from custom-v208.css:
 *   text        #FDA        accent / borders  #DA8
 *   headings    #FD5        muted             #AAA
 *   panel       linear-gradient(rgba(18,13,8,.75) -> rgba(28,23,18,.75))
 *   control bg  rgba(16,32,48,0.75)
 * ------------------------------------------------------------------------ */

 a {
	color: #FF0;
	text-decoration: none;
}

textarea {
	background: rgba(32,48,64,0.75);
	box-shadow: inset 0 0 20px #000;
	color: #FDA;
	border: 1px solid #DA8;
}

.devc,
.lt {
    width: 80%;
    margin: 50px auto 60px auto;
    color: #FDA;
    font-size: 15px;
}

/* ---------- headers ---------- */
.devc-head,
.lt-head {
    border-bottom: 1px solid #DA8;
    padding-bottom: 8px;
    margin-bottom: 6px;
}

.devc-head h4,
.lt-head h4 {
    color: #FD5;
    margin: 0 0 4px 0;
    font-size: 24px;
}

.devc-sub,
.lt-sub {
    color: #DA8;
    font-size: 13px;
}

.devc-note {
    color: #AAA;
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 18px 0;
}

.devc-note code,
.lt-code {
    background: rgba(16, 32, 48, 0.75);
    border: 1px solid rgba(218, 170, 136, 0.35);
    border-radius: 4px;
    padding: 1px 5px;
    color: #FDA;
    font-family: monospace;
    font-size: 12px;
}

/* ---------- sub navigation ---------- */
.devc-nav,
.devc-subnav {
    margin: 0 0 18px 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(218, 170, 136, 0.35);
}

.devc-nav a,
.devc-subnav a {
    color: #DA8;
    text-decoration: none;
    margin-right: 16px;
    font-size: 14px;
}

.devc-nav a:hover,
.devc-subnav a:hover,
.devc-nav a.active,
.devc-subnav a.active {
    color: #FD5;
    text-decoration: underline;
}

/* ---------- panels ---------- */
.devc-group,
.lt-table-wrap,
.lt-detail,
.lt-recent-wrap,
.mnt-backup,
.mnt-dns-grid {
    background: linear-gradient(rgba(18, 13, 8, 0.75) 0%, rgba(28, 23, 18, 0.75) 10%, rgba(28, 23, 18, 0.75) 90%, rgba(18, 13, 8, 0.75) 100%);
    border: 1px solid #DA8;
    border-radius: 5px;
    padding: 16px;
    margin-bottom: 20px;
}

.mnt-dns-grid b {
    color: #DA8;
}

.devc-group-title,
.lt-detail-head {
    color: #FD5;
    margin: 0 0 12px 0;
    font-size: 18px;
    border-bottom: 1px solid rgba(218, 170, 136, 0.35);
    padding-bottom: 6px;
}

/* ---------- settings rows (feature toggles) ---------- */
.devc-rows { display: block; }

.devc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(218, 170, 136, 0.18);
}

.devc-row:last-child { border-bottom: none; }

.devc-row-label { color: #FDA; }
.devc-row-label small { display: block; color: #AAA; font-size: 12px; }
.devc-row-control { flex: 0 0 auto; }
.devc-locked { color: #AAA; font-style: italic; font-size: 12px; }

.mnt-row label { color: #DA8; }

/* toggle switch */
.devc-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.devc-switch input { opacity: 0; width: 0; height: 0; }

.devc-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(16, 32, 48, 0.75);
    border: 1px solid #DA8;
    border-radius: 24px;
    transition: 0.2s;
}

.devc-slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #DA8;
    border-radius: 50%;
    transition: 0.2s;
}

.devc-switch input:checked + .devc-slider { background: rgba(80, 130, 60, 0.55); }
.devc-switch input:checked + .devc-slider:before { transform: translateX(21px); background: #FD5; }

/* ---------- buttons ---------- */
.btn,
.mnt-btn,
.mnt-restore,
.mnt-delete,
.lt-create,
.lt-copy,
.lt-delete,
.lt-toggle,
.apic-create,
.apic-delete,
.apic-regen,
.apic-toggle {
    font-size: 14px;
    padding: 5px 12px;
    border: 1px solid #DA8;
    border-radius: 5px;
    background: rgba(16, 32, 48, 0.75);
    color: #FDA;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn:hover,
.mnt-btn:hover,
.lt-create:hover,
.lt-copy:hover,
.lt-toggle:hover,
.apic-create:hover,
.apic-toggle:hover {
    border-color: #FD5;
    color: #FD5;
}

.btn-primary,
.btn-success { border-color: #7CFC7C; color: #CFC; }
.btn-primary:hover,
.btn-success:hover { border-color: #7CFC7C; color: #FFF; }

.btn-danger,
.lt-delete,
.apic-delete,
.mnt-delete .btn { border-color: #8B1A1A; color: #FF9B9B; }
.btn-danger:hover,
.lt-delete:hover,
.apic-delete:hover { background: rgba(139, 26, 26, 0.35); color: #FFF; }

.btn-line { background: transparent; }

/* ---------- status / alerts ---------- */
.devc-status,
.lt-status,
.mnt-alert,
.acct-ok,
.acct-err,
.lt-err,
.field-error,
.devc-field-error,
.apic-warn {
    font-size: 13px;
    margin: 8px 0;
    display: block;
}

.devc-status.ok, .lt-status.ok, .acct-ok { color: #7CFC7C; }
.devc-status.err, .lt-status.err, .acct-err,
.field-error, .devc-field-error, .lt-err { color: #FF6B6B; }
.apic-warn, .mnt-alert { color: #FF0; }

/* ---------- tables ---------- */
.lt-table,
.devc table {
    width: 100%;
    border-collapse: collapse;
    color: #FDA;
    font-size: 14px;
}

.lt-table th,
.devc table th {
    text-align: left;
    color: #FD5;
    border-bottom: 1px solid #DA8;
    padding: 6px 8px;
    font-weight: normal;
}

.lt-table td,
.devc table td {
    border-bottom: 1px solid rgba(218, 170, 136, 0.18);
    padding: 6px 8px;
    vertical-align: middle;
}

.lt-table tr:hover td { background: rgba(218, 170, 136, 0.06); }

.lt-empty {
    text-align: center;
    color: #AAA;
    font-style: italic;
    padding: 18px 0;
}

.lt-muted { color: #AAA; font-size: 13px; }

.apic-ref {
	color: #DA8;
	background: rgba(0,0,0,0.5);
	padding: 20px;
}


/* ---------- inputs ---------- */
.devc input[type="text"],
.devc input[type="number"],
.devc input[type="password"],
.devc select,
.lt input[type="text"],
.lt input[type="url"],
.lt select {
    background: rgba(16, 32, 48, 0.75);
    border: 1px solid #DA8;
    border-radius: 4px;
    color: #FDA;
    padding: 5px 8px;
    font-size: 14px;
}

.devc label,
.lt label { color: #DA8; font-size: 13px; }

/* ---------- logs / output ---------- */
.devc-log,
.mnt-log {
    background: rgba(8, 10, 14, 0.85);
    border: 1px solid rgba(218, 170, 136, 0.35);
    border-radius: 4px;
    color: #CFC;
    font-family: monospace;
    font-size: 12px;
    padding: 12px;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
}

/* ---------- secrets ---------- */
.devc-secrets, .devc-secret {
    background: rgba(8, 10, 14, 0.85);
    border: 1px dashed #DA8;
    border-radius: 4px;
    padding: 10px;
    color: #FD5;
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
}

.devc-secret-intro { color: #AAA; font-size: 12px; margin-bottom: 6px; }

/* ---------- layout helpers ---------- */
.devc-row-inline,
.mnt-row,
.devc-actions,
.lt-row-actions,
.lt-form,
.lt-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.mnt-dns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* ---------- KPIs / bars (link tracking) ---------- */
.lt-kpis { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }

.lt-kpi {
    flex: 1 1 150px;
    background: linear-gradient(rgba(18, 13, 8, 0.75), rgba(28, 23, 18, 0.75));
    border: 1px solid #DA8;
    border-radius: 5px;
    padding: 12px;
    text-align: center;
    color: #FD5;
    font-size: 22px;
}

.lt-kpi span { display: block; color: #AAA; font-size: 12px; margin-top: 4px; }

.lt-bars { display: block; }

.lt-bar {
    background: rgba(218, 170, 136, 0.25);
    border-radius: 3px;
    height: 10px;
    margin: 4px 0;
}

/* ---------- badges ---------- */
.lt-badge,
.ug-badge {
    display: inline-block;
    border-radius: 3px;
    padding: 1px 7px;
    font-size: 12px;
    border: 1px solid #DA8;
    color: #FDA;
}

.ug-badge.ug-1 { border-color: #7CFC7C; color: #7CFC7C; }   /* success  */
.ug-badge.ug-0 { border-color: #FF6B6B; color: #FF6B6B; }   /* failure  */
.ug-badge.ug-2 { border-color: #DA8;    color: #DA8;    }   /* neutral  */

/* ---------------------------------------------------------------------------
   Messages editor (dev-console/messages.php)

   Follows the shared .devc-row shape — description on the left, control on the
   right — rather than stacking. The generic rule sizes the control with
   `flex: 0 0 auto`, which suits a checkbox; a text field needs a real width, so
   only that is overridden here.
   --------------------------------------------------------------------------- */
.msg-row {
    align-items: flex-start;   /* long descriptions shouldn't drag the field down */
}

.msg-row .devc-row-label {
    flex: 1 1 auto;
    min-width: 0;              /* lets long defaults wrap instead of pushing out */
    padding-right: 14px;
}

.msg-row .devc-row-label code {
    color: #FDA;
    font-size: 12px;
    letter-spacing: .02em;
}

.msg-row .devc-note {
    display: block;
    color: #AAA;
    font-size: 12px;
    margin-top: 2px;
    line-height: 1.45;
}

.msg-row .devc-row-control {
    flex: 0 0 auto;
}

.msg-input {
    width: 320px;
    max-width: 100%;
    background: rgba(16, 32, 48, 0.75);
    border: 1px solid #DA8;
    border-radius: 4px;
    color: #FDA;
    padding: 6px 9px;
    font-size: 14px;
}

.msg-input:focus {
    outline: none;
    border-color: #FDA;
    background: rgba(16, 32, 48, 0.92);
}

/* A customised message is marked on its left edge so overrides are obvious at a
   glance against the many rows still sitting at their default. */
.msg-row.is-overridden {
    border-left: 3px solid #7CFC7C;
    padding-left: 9px;
    margin-left: -12px;
}

.msg-row.is-overridden .msg-input { border-color: #7CFC7C; }

/* Narrow screens: the two-column row has nowhere to go, so stack it. */
@media (max-width: 700px) {
    .msg-row { flex-wrap: wrap; }
    .msg-row .devc-row-label { padding-right: 0; }
    .msg-row .devc-row-control { width: 100%; }
    .msg-input { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Banned IPs (dev-console/ipbans.php)
   --------------------------------------------------------------------------- */
.ipban-warn {
    border-left: 3px solid #E8A33D;
    padding: 8px 10px;
    margin: 10px 0 4px;
    background: rgba(232, 163, 61, 0.08);
    color: #EDC;
}

.ipban-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

.ipban-input {
    background: rgba(16, 32, 48, 0.75);
    border: 1px solid #DA8;
    border-radius: 4px;
    color: #FDA;
    padding: 5px 8px;
    font-size: 14px;
    flex: 1 1 190px;
    min-width: 0;
}

.ipban-input:focus {
    outline: none;
    border-color: #FDA;
    background: rgba(16, 32, 48, 0.92);
}

/* Horizontal scroll rather than a squashed table on narrow screens. */
.ipban-table-wrap { overflow-x: auto; }

.ipban-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ipban-table th {
    text-align: left;
    color: #DA8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(218, 170, 136, 0.35);
    white-space: nowrap;
}

.ipban-table td {
    color: #EDC;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(218, 170, 136, 0.15);
    white-space: nowrap;
}

.ipban-table tr:last-child td { border-bottom: none; }
.ipban-table tbody tr:hover td { background: rgba(218, 170, 136, 0.06); }

.ipban-ip {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #FDA;
}

/* .btn-danger is already defined above — reuse it rather than redefining. */

.ban-remove { font-size: 12px; padding: 3px 9px; }

/* ---------------------------------------------------------------------------
   Connected sign-in methods (profile-edit) + OAuth provider rows
   --------------------------------------------------------------------------- */
.oauth-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(218, 170, 136, 0.18);
}
.oauth-row:last-child { border-bottom: none; }
.oauth-row form { margin: 0; }
.oauth-row-name  { color: #FDA; font-weight: 700; min-width: 110px; }
.oauth-row-state { color: #EDC; flex: 1 1 auto; font-size: 13px; }
.oauth-row-note { color: #C9A; font-size: 12px; font-style: italic; }