/* =========================
   ROOT NAMESPACE
========================= */
.mrh-dns {
    font-family: "DM Sans", sans-serif;
}

/* =========================
   INPUTS & SELECTS
========================= */
.mrh-dns input{
    width: 100%;
    padding: 12px;
    border: 1px solid #d5dfff;
    border-radius: 6px;
    font-family: "DM Sans", sans-serif;
    transition: border-color 0.2s ease;
    background: #fff;
}

#dns-form-header {
    grid-column: 1 / -1;

    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-bottom: 10px;
}

#dns-form-header h3 {
    margin: 0;
    font-size: 20px;
}

#dns-form-header p {
    margin: 0;
    font-size: 14px;
    color: #5f6470;
    line-height: 1.5;
	color: black;
}

.mrh-dns-form #dns-form-header {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

.mrh-dns input:hover,
.mrh-dns select:hover,
.mrh-dns input:focus,
.mrh-dns select:focus {
    border-color: #7253ED;
    outline: none;
}

/* =========================
   SELECT FIX (WORKING ARROWS)
========================= */
.mrh-dns select,
.mrh-dns #dns-domain-select,
.mrh-dns #dns-type {

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background-color: #fff;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 7L10 12L15 7' fill='none' stroke='%23673DE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;

    padding-right: 42px !important;
}
.mrh-dns #dns-type {
	color: black;
}

.mrh-dns #dns-domain-select {
	color: black;
	padding: 15px;
}

/* tar bort IE pil */
.mrh-dns select::-ms-expand {
    display: none;
}

.mrh-dns #dns-domain-select:hover {
    border-color: #7253ED;
}

/* =========================
   LOADER
========================= */
.mrh-dns .dns-loader {
    width: 30px;
    height: 30px;
    border: 3px solid #d5dfff;
    border-top: 3px solid #673DE6;
    border-radius: 50%;
    animation: dns-spin 0.8s linear infinite;
    margin: 20px auto;
}

@keyframes dns-spin {
    to { transform: rotate(360deg); }
}

/* =========================
   FORM GRID
========================= */
.mrh-dns-form {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: #fff;
    padding: 20px;
    border: 1px solid #d5dfff;
    border-radius: 8px;
}

.mrh-dns-form.is-mx {
    grid-template-columns: repeat(5, 1fr);
}

.mrh-dns-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mrh-dns-form h3 {
    grid-column: 1 / -1;
}

.mrh-dns-form button {
    grid-column: 1 / -1;
}

/* =========================
   ADD BUTTON
========================= */
.mrh-dns-add-btn {
    padding: 12px;
    background: #673DE6;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s ease;
	font-size: 14px;
}

.mrh-dns-add-btn:hover {
    background: #5025D1;
}

/* =========================
   SEARCH
========================= */
.mrh-dns #dns-search {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #d5dfff;
}

.mrh-dns #dns-search:hover {
    border-color: #7253ED;
}

/* =========================
   TABLE
========================= */
.mrh-dns #dns-table-wrapper {
    margin-top: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mrh-dns #dns-table-wrapper::-webkit-scrollbar {
    display: none;
}

.mrh-dns table {
    width: 100%;
    border-collapse: separate;
	border-spacing: 0;
    border: 1px solid #d5dfff;
    border-radius: 8px;
    overflow: hidden;
    min-width: 700px;
    background: #fff;
}

.mrh-dns th,
.mrh-dns td {
    padding: 12px 14px;
    border-bottom: 1px solid #eef1ff;
    text-align: left;
    font-size: 14px;
}

.mrh-dns th {
	border-bottom: 1px solid #d5dfff;
}

.mrh-dns td {
    overflow-wrap: break-word;
    word-break: break-word;
}

.mrh-dns td:first-child {
    white-space: nowrap;
    word-break: normal;
}

/* =========================
   ACTION BUTTONS
========================= */
.mrh-dns-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 110px;
}

.mrh-dns-btn {
    padding: 8px 10px;
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    transition: 0.2s ease;
}

/* EDIT */
.mrh-dns-btn.edit {
    background: transparent;
    color: #673DE6;
    border: 1px solid #673DE6;
    font-weight: 500;
}

.mrh-dns-btn.edit:hover {
    background: #5025D1;
    color: #fff;
}

/* DELETE */
.mrh-dns-btn.delete {
    background: #673DE6;
    color: #fff;
    font-weight: 500;
}

.mrh-dns-btn.delete:hover {
    background: #5025D1;
}

/* =========================
   MODAL
========================= */
.mrh-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
	opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mrh-modal-overlay.active {
	opacity: 1;
    visibility: visible;
}

.mrh-modal {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    max-width: 480px;
    width: 90%;
    box-sizing: border-box;
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
	animation: mrhModalPop 0.2s ease;
}

@keyframes mrhModalPop {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mrh-modal input {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    margin-bottom: 10px;
    border: 1px solid #d5dfff;
    border-radius: 6px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mrh-modal input:focus {
    box-shadow: 0 0 0 3px rgba(114,83,237,0.12);
    outline: none;
}

.mrh-modal input:hover,
.mrh-modal input:focus {
    border-color: #7253ED;
}

/* modal buttons */
.mrh-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.mrh-modal-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: 350ms ease;
	font-size: 14px;
}

/* SAVE */
.mrh-modal-actions #save {
    background: #673DE6;
    color: #fff;
}

.mrh-modal-actions #save:hover {
    background: #5025D1;
}

/* DELETE BUTTON */
.mrh-modal-delete {
    background: #673DE6;
    color: #fff;
}

.mrh-modal-delete:hover {
    background: #5025D1;
}

/* CANCEL */
.mrh-modal-actions #cancel {
    background: #eee;
	color: black;
}

.mrh-modal-actions #cancel:hover {
    background: #ddd;
}

/* =========================
   PREVENT SCROLL
========================= */
body.modal-open {
    overflow: hidden;
}

/* =========================
   MOBILE FIXES
========================= */
@media (max-width: 768px) {

	.mrh-modal input {
		font-size: 16px;
	}
	.mrh-dns #dns-domain-select {
		font-size: 16px;
	}
	.mrh-dns #dns-search { 
		font-size:16px;
	}
    .mrh-dns-form {
        grid-template-columns: 1fr !important;
    }
	.mrh-dns-form input,
	.mrh-dns-form select {
		font-size: 16px;
	}

    /* FIX: knappar inte bryts */
    .mrh-dns-actions {
        min-width: 100%;
    }

    .mrh-dns-btn {
        white-space: nowrap;
        font-size: 14px;
    }
}

/* =========================
   GLOBAL BOX SIZING FIX
========================= */
.mrh-dns *,
.mrh-modal * {
    box-sizing: border-box;
}

/* =========================
   SELECT (GLOBAL FIX)
========================= */
.mrh-dns select {
    width: 100%;
    padding: 12px;
    padding-right: 42px;
    border: 1px solid #d5dfff;
    border-radius: 6px;
    font-family: "DM Sans", sans-serif;
    background-color: #fff;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7L10 12L15 7' stroke='%23673DE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;

    transition: border-color 0.2s ease;
}

/* =========================
   FIX MX ALIGNMENT
========================= */
.mrh-dns-form label {
    width: 100%;
}

#dns-priority-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* =========================
   MODAL FONT FIX
========================= */
.mrh-modal {
    font-family: "DM Sans", sans-serif;
}

.mrh-modal * {
    font-family: inherit;
}

/* =========================
   FIX TABLE WRAPPING (TYPE)
========================= */
.mrh-dns td:first-child {
    white-space: nowrap;
}

/* ta bort aggressiv wrap */
.mrh-dns td:nth-child(4) {
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mrh-dns td:nth-child(3),
.mrh-dns td:nth-child(5) {
    white-space: nowrap;
    width: 90px;
}

/* =========================
   INPUT SPACING FIX (MODAL)
========================= */
.mrh-modal input {
    width: 100%;
    padding: 10px;
}

/* =========================
   SMALL VISUAL POLISH (OPTIONAL)
========================= */
.mrh-dns-form label span,
.mrh-dns-form label {
    font-size: 14px;
}