/* DNS-Panel – Actcom */

:root,
[data-bs-theme="light"] {
    --pda-accent: #2563eb;
    --pda-accent-hover: #1d4ed8;
    --pda-accent-rgb: 37, 99, 235;
    --pda-fill: #2563eb;
    --pda-fill-hover: #1d4ed8;
    --pda-fill-text: #ffffff;
    --pda-danger: #b42318;
    --pda-danger-hover: #912018;
    --pda-danger-text: #ffffff;
    --pda-warning: #b45309;
    --pda-success: #15803d;
    --pda-page-bg: #f6f7f9;
    --pda-row-hover: #f1f4f9;
    --pda-diff-del-bg: rgba(220, 38, 38, 0.08);
    --pda-diff-add-bg: rgba(22, 163, 74, 0.08);
}

[data-bs-theme="dark"] {
    --pda-accent: #6b9cf7;
    --pda-accent-hover: #8fb4fa;
    --pda-accent-rgb: 107, 156, 247;
    --pda-fill: #2a4f9a;
    --pda-fill-hover: #335cb0;
    --pda-fill-text: #e6ecf7;
    --pda-danger: #d46a6a;
    --pda-danger-hover: #8a3030;
    --pda-danger-text: #f3dcdc;
    --pda-warning: #c79a4a;
    --pda-success: #6fae86;
    --pda-page-bg: #1b1e22;
    --pda-row-hover: #262a30;
    --pda-diff-del-bg: rgba(212, 106, 106, 0.12);
    --pda-diff-add-bg: rgba(111, 174, 134, 0.12);
}

:root {
    --bs-primary: var(--pda-accent);
    --bs-primary-rgb: var(--pda-accent-rgb);
    --bs-link-color: var(--pda-accent);
    --bs-link-color-rgb: var(--pda-accent-rgb);
    --bs-link-hover-color: var(--pda-accent-hover);
    --pda-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* Sidhuvud och sidbakgrund */
.app-main {
    background-color: var(--pda-page-bg);
}

.app-content-header .row > .col-sm-6:first-child {
    flex: 1 1 auto;
    width: auto;
}

.app-content-header .row > .col-sm-6:last-child {
    flex: 0 0 auto;
    width: auto;
}

.app-content-header h1 {
    font-size: 1.5rem;
    font-weight: 600;
}

.app-content-header .breadcrumb {
    font-size: 0.875rem;
}

/* Sidomeny: öppen undermeny ser inte vald ut */
.app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link:not(.active) {
    background-color: transparent;
    color: var(--lte-sidebar-color);
}

/* Användarmenyn */
.user-menu .user-header.text-bg-primary {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Kort */
.card.card-outline {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.app-content .card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
    margin-bottom: 1rem;
}

.app-content .card > .card-header {
    background: transparent;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app-content .card > .card-header .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 !important;
}

.app-content .card > .card-header .card-tools {
    margin-left: auto;
}

.app-content .card-footer {
    background: transparent;
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* Knappar
   Fylld: bara huvudhandlingen (primary/success).
   Lugn: sekundära handlingar, kantlinje.
   Farlig: röd kantlinje på sidor, fylld i bekräftelserutor. */
.btn {
    padding: 0.375rem 0.75rem !important;
    box-shadow: none !important;
}

.btn-sm {
    padding: 0.25rem 0.5rem !important;
}

.btn-primary,
.btn-success {
    --bs-btn-color: var(--pda-fill-text);
    --bs-btn-bg: var(--pda-fill);
    --bs-btn-border-color: var(--pda-fill);
    --bs-btn-hover-color: var(--pda-fill-text);
    --bs-btn-hover-bg: var(--pda-fill-hover);
    --bs-btn-hover-border-color: var(--pda-fill-hover);
    --bs-btn-active-color: var(--pda-fill-text);
    --bs-btn-active-bg: var(--pda-fill-hover);
    --bs-btn-active-border-color: var(--pda-fill-hover);
    --bs-btn-disabled-color: var(--pda-fill-text);
    --bs-btn-disabled-bg: var(--pda-fill);
    --bs-btn-disabled-border-color: var(--pda-fill);
}

.btn-outline-primary {
    --bs-btn-color: var(--pda-accent);
    --bs-btn-border-color: rgba(var(--pda-accent-rgb), 0.5);
    --bs-btn-hover-color: var(--pda-fill-text);
    --bs-btn-hover-bg: var(--pda-fill);
    --bs-btn-hover-border-color: var(--pda-fill);
    --bs-btn-active-color: var(--pda-fill-text);
    --bs-btn-active-bg: var(--pda-fill);
    --bs-btn-active-border-color: var(--pda-fill);
}

.btn-secondary,
.btn-outline-secondary,
.btn-warning,
.btn-info,
.btn-light,
.btn-default,
.app-content .card-tools .btn-outline-primary.btn-sm,
#zone-editor-card .card-tools .btn:not(.button_apply_changes),
.app-content td .dropdown > .btn,
.dashboard-v2-edit-button,
.history-info-button,
#tbl_settings .setting-save-button {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--pda-danger);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--pda-danger);
    --bs-btn-hover-color: var(--pda-danger-text);
    --bs-btn-hover-bg: var(--pda-danger-hover);
    --bs-btn-hover-border-color: var(--pda-danger-hover);
    --bs-btn-active-color: var(--pda-danger-text);
    --bs-btn-active-bg: var(--pda-danger-hover);
    --bs-btn-active-border-color: var(--pda-danger-hover);
}

[data-bs-theme="light"] .btn-danger,
[data-bs-theme="light"] .btn-outline-danger {
    --bs-btn-hover-bg: var(--pda-danger);
    --bs-btn-hover-border-color: var(--pda-danger);
    --bs-btn-active-bg: var(--pda-danger-hover);
}

.modal-footer .btn-danger {
    --bs-btn-color: var(--pda-danger-text);
    --bs-btn-bg: var(--pda-danger-hover);
    --bs-btn-border-color: var(--pda-danger-hover);
}

[data-bs-theme="light"] .modal-footer .btn-danger {
    --bs-btn-bg: var(--pda-danger);
    --bs-btn-border-color: var(--pda-danger);
}

.history-info-button {
    white-space: nowrap;
    padding: 0.25rem 0.5rem !important;
}

/* Tabeller */
.app-content table td,
.modal table td {
    font-family: inherit !important;
}

.app-content table.table,
.modal table.table {
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--pda-row-hover);
    --bs-table-accent-bg: transparent;
}

.app-content table.table > tbody > tr > *,
.modal table.table > tbody > tr > * {
    --bs-table-bg-type: transparent;
    box-shadow: none !important;
}

.app-content table.table.table-hover > tbody > tr:hover > * {
    background-color: var(--pda-row-hover);
}

.app-content table.table.table-bordered > :not(caption) > * > *,
.modal table.table.table-bordered > :not(caption) > * > * {
    border-left-width: 0;
    border-right-width: 0;
}

.app-content table.table td,
.app-content table.table th,
.app-content table.records td,
.app-content table.records th,
.modal table.table td {
    text-align: left !important;
    vertical-align: middle;
}

.app-content table.dataTable td {
    padding: 0.5rem 0.75rem;
}

.app-content table.table thead th,
.app-content table.table tr:first-child > th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.5rem 0.75rem;
    border-bottom-width: 1px;
}

/* Kolumner utan sortering visar inga sorteringspilar */
:is(#tbl_records, #tbl_users, #tbl_accounts, #tbl_keys, #tbl_template_list, [id^="tbl_domain_list"]) thead th:last-child::before,
:is(#tbl_records, #tbl_users, #tbl_accounts, #tbl_keys, #tbl_template_list, [id^="tbl_domain_list"]) thead th:last-child::after,
:is(#tbl_records, #tbl_users, #tbl_accounts, #tbl_keys, #tbl_template_list, [id^="tbl_domain_list"]) thead th:last-child .dt-column-order {
    display: none !important;
}

.pagination {
    --bs-pagination-color: var(--pda-accent);
    --bs-pagination-active-bg: var(--pda-fill);
    --bs-pagination-active-border-color: var(--pda-fill);
    --bs-pagination-active-color: var(--pda-fill-text);
    --bs-pagination-disabled-bg: transparent;
}

/* Fast teckenbredd bara där det är data */
#tbl_records td:nth-child(1),
#tbl_records td:nth-child(4),
#tbl_records td:nth-child(5),
[id^="tbl_domain_list"] td:nth-child(4),
.app-content table:has(a[href*="doc.powerdns.com"]) td:nth-child(2) {
    font-family: var(--pda-mono) !important;
    font-size: 0.875rem;
}

#tbl_records td :is(select, .form-select) {
    font-family: var(--bs-body-font-family) !important;
    min-width: 7.5rem;
}

#tbl_records td:nth-child(2) {
    font-weight: 600;
}

/* Namn i listor: vanlig text som blir länkfärgad vid hovring */
[id^="tbl_domain_list"] td:first-child a,
#tbl_template_list td:first-child a {
    text-decoration: none;
    color: var(--bs-body-color) !important;
}

[id^="tbl_domain_list"] td:first-child a strong,
#tbl_template_list td:first-child a strong {
    font-weight: 500;
}

[id^="tbl_domain_list"] td:first-child a:hover,
#tbl_template_list td:first-child a:hover {
    color: var(--pda-accent) !important;
    text-decoration: underline;
}

/* Statistik och konfiguration: namnet som länk, inte knapp */
.app-content td a.btn[href*="doc.powerdns.com"] {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--pda-accent);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    padding: 0 !important;
    text-align: left;
}

.app-content td a.btn[href*="doc.powerdns.com"] i {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

/* DNSSEC: av = dämpad */
.button_dnssec.btn-danger {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--bs-body-color);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Radknappar: diskreta ikoner, färg vid hovring */
#tbl_records td:last-child {
    display: table-cell !important;
    white-space: nowrap;
}

#tbl_records td:last-child .btn-sm,
#tbl_users td .btn-warning {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-color: var(--bs-body-color);
}

#tbl_records td:last-child .btn-sm.btn-warning { --bs-btn-hover-color: var(--pda-accent); }
#tbl_records td:last-child .btn-sm.btn-danger { --bs-btn-hover-color: var(--pda-danger); }

/* Dashboard v2: tydlig hovring på "Edit records" */
.app-content .dashboard-v2-edit-button {
    background-color: transparent !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color) !important;
}

.app-content .dashboard-v2-edit-button:hover,
.app-content .dashboard-v2-edit-button:focus-visible {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-secondary-color) !important;
}

/* Inställningar: av/på som brytare */
#tbl_settings td:nth-child(2) > .fa-toggle-on,
#tbl_settings td:nth-child(2) > .fa-toggle-off {
    display: none;
}

#tbl_settings td:last-child {
    width: 8rem;
}

#tbl_settings .setting-save-button {
    min-width: 5.5rem;
}

#tbl_settings .setting-toggle-button {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    padding: 0 !important;
    border-radius: 0.75rem;
    font-size: 0;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
    transition: background-color 0.15s ease;
}

#tbl_settings .setting-toggle-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.1875rem;
    width: 1.0625rem;
    height: 1.0625rem;
    border-radius: 50%;
    background-color: var(--bs-secondary-color);
    transform: translateY(-50%);
    transition: left 0.15s ease;
}

#tbl_settings .setting-toggle-button.btn-danger {
    background-color: var(--pda-fill);
    border-color: var(--pda-fill);
}

#tbl_settings .setting-toggle-button.btn-danger::after {
    left: calc(100% - 1.25rem);
    background-color: var(--pda-fill-text);
}

#tbl_settings .setting-toggle-button:hover {
    border-color: var(--bs-secondary-color);
}

#tbl_settings .setting-toggle-button.btn-danger:hover {
    background-color: var(--pda-fill-hover);
    border-color: var(--pda-fill-hover);
}

/* Redigeringsrad: Spara och Avbryt får plats i åtgärdskolumnen */
#tbl_records td:last-child :is(.button_save, .button_cancel) {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem;
}

/* Ändrad men ej sparad post */
#tbl_records td:last-child .button_edit:not(.btn-sm) {
    --bs-btn-color: var(--pda-accent);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--pda-accent-rgb), 0.5);
    --bs-btn-hover-color: var(--pda-fill-text);
    --bs-btn-hover-bg: var(--pda-fill);
    --bs-btn-hover-border-color: var(--pda-fill);
    padding: 0.25rem 0.5rem !important;
}

#tbl_records tr:has(.button_edit:not(.btn-sm)) > td {
    background-color: rgba(var(--pda-accent-rgb), 0.07);
}

#tbl_records tr:has(.button_edit:not(.btn-sm)) > td:first-child {
    box-shadow: inset 3px 0 0 var(--pda-accent) !important;
}

.app-content td .dropdown > .btn {
    padding: 0.25rem 0.5rem !important;
}

.dropdown-item.button_delete span {
    color: var(--pda-danger) !important;
}

/* Formulär */
.form-control,
.form-select {
    border-radius: 0.375rem;
}

.app-content td select:not(.form-select),
.app-content td :is(input[type="text"], input:not([type])):not(.form-control),
#user_name_filter {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
}

[data-bs-theme="light"] .form-check-input {
    border-color: #9aa1ab;
}

/* Meddelanden: neutral ruta med färgad kant */
.alert {
    --bs-alert-bg: var(--bs-tertiary-bg);
    --bs-alert-color: var(--bs-body-color);
    --bs-alert-border-color: var(--bs-border-color);
    --bs-alert-link-color: var(--pda-accent);
    border-left: 3px solid var(--pda-alert-edge, var(--bs-border-color));
}

.alert-info,
.alert-primary { --pda-alert-edge: var(--pda-accent); }
.alert-warning { --pda-alert-edge: var(--pda-warning); }
.alert-danger { --pda-alert-edge: var(--pda-danger); }
.alert-success { --pda-alert-edge: var(--pda-success); }

.alert .fa-triangle-exclamation { color: var(--pda-warning); }

/* Ändringslogg */
.diff-deletion,
[data-bs-theme="dark"] .diff-deletion {
    background-color: var(--pda-diff-del-bg);
    color: var(--bs-body-color);
    border-left: 3px solid var(--pda-danger);
}

.diff-addition,
[data-bs-theme="dark"] .diff-addition {
    background-color: var(--pda-diff-add-bg);
    color: var(--bs-body-color);
    border-left: 3px solid var(--pda-success);
}

/* Dialogrutor */
.modal-content {
    border-radius: 0.5rem;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-body :is(h3, h4) {
    font-size: 1rem;
    font-weight: 400;
}

.modal-footer {
    justify-content: flex-end;
    gap: 0.5rem;
}

.modal-footer .me-auto {
    margin-right: 0 !important;
}

/* Sidfot */
.app-footer {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color);
    background: transparent;
}

.app-footer a {
    color: inherit;
}

/* Inloggning */
.login-page,
.register-page {
    background-color: var(--pda-page-bg);
}

.login-box .card,
.register-box .card {
    border-top: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.5rem;
}

.login-box .card-header a,
.register-box .card-header a {
    text-decoration: none;
    font-weight: 600;
}