/*
 * 檔案名稱：assets/css/admin.css
 * 修改日期：2026/07/29 13:26（UTC+8）
 * 檔案用途：精科有限公司後台響應式工作介面
 * 修改說明：保留表格線條與網址代稱修正，新增分類產品導流、篩選摘要與操作按鈕樣式
 */

:root {
    --admin-navy-950: #07101c;
    --admin-navy-900: #0b1524;
    --admin-navy-800: #13233a;
    --admin-navy-700: #203956;
    --admin-red-700: #a31d18;
    --admin-red-600: #bd2a21;
    --admin-red-500: #d14338;
    --admin-green-600: #16835b;
    --admin-blue-50: #eef6ff;
    --admin-blue-100: #d8eaff;
    --admin-blue-200: #b8d8fb;
    --admin-blue-600: #2563a8;
    --admin-gold-600: #b67b1f;
    --admin-purple-600: #7357b5;
    --admin-gray-25: #fbfcfd;
    --admin-gray-50: #f5f7fa;
    --admin-gray-100: #edf1f5;
    --admin-gray-200: #dbe3eb;
    --admin-gray-300: #c8d2de;
    --admin-gray-400: #91a0b1;
    --admin-gray-600: #5d6b7b;
    --admin-gray-800: #273548;
    --admin-white: #ffffff;
    --admin-sidebar-width: 252px;
    --admin-sidebar-collapsed: 78px;
    --admin-radius-large: 24px;
    --admin-radius-medium: 16px;
    --admin-shadow: 0 18px 48px rgba(7, 16, 28, 0.08);
    --admin-transition: 180ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;

    color: var(--admin-gray-800);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
    line-height: 1.55;

    background: var(--admin-gray-50);
}

body.admin-modal-open {
    overflow: hidden;
}

/*
 * SweetAlert2 預設層級低於本系統的管理 Modal。
 * 將提示、確認與錯誤視窗固定提升至最上層，避免只看到後方遮罩。
 */
.swal2-container {
    z-index: 25000 !important;
}

.swal2-popup {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 10px 18px;

    font-weight: 800;
    line-height: 1;
    white-space: nowrap;

    border: 1px solid transparent;
    border-radius: 11px;
    transition: transform var(--admin-transition), box-shadow var(--admin-transition), background var(--admin-transition), border-color var(--admin-transition), color var(--admin-transition);
}

.button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.button-primary {
    color: var(--admin-white);

    background: linear-gradient(135deg, var(--admin-red-600), var(--admin-red-500));
    box-shadow: 0 10px 22px rgba(189, 42, 33, 0.22);
}

.button-outline {
    color: var(--admin-navy-900);

    background: var(--admin-white);
    border-color: var(--admin-gray-200);
}

.button-ghost {
    color: var(--admin-gray-600);

    background: transparent;
    border-color: var(--admin-gray-200);
}

.button-danger {
    color: var(--admin-white);

    background: var(--admin-red-700);
}

.admin-shell {
    display: grid;
    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);

    min-height: 100vh;
    transition: grid-template-columns var(--admin-transition);
}

.admin-shell.is-sidebar-collapsed {
    grid-template-columns: var(--admin-sidebar-collapsed) minmax(0, 1fr);
}

.admin-sidebar {
    position: sticky;
    top: 0;

    display: flex;
    flex-direction: column;

    height: 100vh;
    overflow: hidden;

    color: rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(circle at 20% 10%, rgba(209, 67, 56, 0.16), transparent 25%),
        var(--admin-navy-950);
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;

    min-height: 84px;
    padding: 18px 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-logo-full {
    width: 188px;
}

.admin-logo-mark {
    display: none;
    width: 40px;
}

.admin-shell.is-sidebar-collapsed .admin-logo-full {
    display: none;
}

.admin-shell.is-sidebar-collapsed .admin-logo-mark {
    display: block;
}

.admin-navigation {
    flex: 1;

    padding: 18px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-menu-group + .admin-menu-group {
    margin-top: 22px;
}

.admin-menu-label {
    display: block;
    padding: 0 12px 8px;

    color: rgba(255, 255, 255, 0.34);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.admin-shell.is-sidebar-collapsed .admin-menu-label {
    display: none;
}

.admin-menu-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 44px;
    padding: 9px 12px;

    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;

    border-radius: 11px;
    transition: color var(--admin-transition), background var(--admin-transition);
}

.admin-menu-item:hover,
.admin-menu-item.is-active {
    color: var(--admin-white);
    background: rgba(255, 255, 255, 0.08);
}

.admin-menu-item.is-active {
    box-shadow: inset 3px 0 var(--admin-red-500);
}

.admin-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    color: rgba(255, 255, 255, 0.74);
    font-size: 1rem;
}

.admin-shell.is-sidebar-collapsed .admin-menu-text {
    display: none;
}

.admin-shell.is-sidebar-collapsed .admin-menu-item {
    justify-content: center;
    padding-inline: 8px;
}

.admin-shell.is-sidebar-collapsed .admin-menu-item::after {
    position: fixed;
    z-index: 1500;

    display: none;
    padding: 7px 10px;

    color: var(--admin-white);
    font-size: 0.78rem;
    white-space: nowrap;

    content: attr(data-tooltip);

    background: var(--admin-navy-800);
    border-radius: 7px;
    box-shadow: var(--admin-shadow);
    transform: translateX(86px);
}

.admin-shell.is-sidebar-collapsed .admin-menu-item:hover::after {
    display: block;
}

.admin-sidebar-footer {
    padding: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-main-column {
    min-width: 0;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 900;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;

    min-height: 74px;
    padding: 12px 28px;

    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--admin-gray-200);
    backdrop-filter: blur(18px);
}

.admin-sidebar-toggle {
    width: 42px;
    height: 42px;

    color: var(--admin-navy-900);
    font-size: 1.1rem;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 11px;
}

.admin-topbar-title {
    display: grid;
    gap: 1px;
}

.admin-topbar-title span {
    color: var(--admin-gray-400);
    font-size: 0.72rem;
}

.admin-topbar-title strong {
    color: var(--admin-navy-900);
    font-size: 1rem;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.admin-view-site {
    color: var(--admin-gray-600);
    font-size: 0.84rem;
    font-weight: 700;
}

.admin-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: var(--admin-white);
    font-weight: 900;

    background: linear-gradient(135deg, var(--admin-navy-700), var(--admin-red-600));
    border-radius: 12px;
}

.admin-profile > div {
    display: grid;
}

.admin-profile strong {
    color: var(--admin-navy-900);
    font-size: 0.84rem;
}

.admin-profile small {
    color: var(--admin-gray-400);
    font-size: 0.68rem;
}

.admin-content {
    min-width: 0;
    padding: 32px;
}

.admin-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 26px;
}

.admin-page-heading h1 {
    margin: 6px 0 6px;

    color: var(--admin-navy-900);
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.2;
}

.admin-page-heading p {
    max-width: 760px;
    margin: 0;

    color: var(--admin-gray-600);
}

.admin-eyebrow {
    color: var(--admin-red-600);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.admin-heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.version-badge {
    padding: 10px 14px;

    color: var(--admin-navy-800);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 999px;
}

.admin-panel {
    min-width: 0;
    padding: 24px;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: var(--admin-radius-large);
    box-shadow: var(--admin-shadow);
}

.admin-panel + .admin-panel {
    margin-top: 24px;
}

.admin-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 20px;
}

.admin-panel-heading > div {
    display: grid;
    gap: 3px;
}

.admin-panel-heading span {
    color: var(--admin-gray-400);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.admin-panel-heading h2 {
    margin: 0;

    color: var(--admin-navy-900);
    font-size: 1.28rem;
}

.admin-panel-heading a {
    color: var(--admin-red-600);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-bottom: 24px;
}

.admin-stat-card {
    display: grid;
    gap: 6px;

    min-height: 150px;
    padding: 24px;

    color: var(--admin-white);
    border-radius: 20px;
    box-shadow: var(--admin-shadow);
    transition: transform var(--admin-transition), box-shadow var(--admin-transition);
}

.admin-stat-card:hover {
    box-shadow: 0 22px 52px rgba(7, 16, 28, 0.14);
    transform: translateY(-4px);
}

.admin-stat-card span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-stat-card strong {
    margin-top: auto;

    font-size: 2.5rem;
    line-height: 1;
}

.admin-stat-card small {
    color: rgba(255, 255, 255, 0.62);
}

.stat-blue { background: linear-gradient(135deg, #1e5795, #347bd0); }
.stat-green { background: linear-gradient(135deg, #116f50, #27a876); }
.stat-red { background: linear-gradient(135deg, #9d201a, #d3483d); }
.stat-gold { background: linear-gradient(135deg, #9f6a1a, #d99a35); }

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.admin-panel-span-2 {
    grid-column: span 2;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    min-width: 760px;

    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 15px 14px;

    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--admin-gray-200);
}

.admin-table th {
    color: var(--admin-gray-400);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.admin-table tbody tr {
    transition: background var(--admin-transition);
}

.admin-table tbody tr[data-row-link],
.admin-table tbody tr[data-inquiry-row] {
    cursor: pointer;
}

.admin-table tbody tr:hover {
    background: var(--admin-gray-25);
}

.admin-table td strong,
.admin-table td small {
    display: block;
}

.admin-table td strong {
    color: var(--admin-navy-900);
}

.admin-table td small {
    margin-top: 3px;

    color: var(--admin-gray-400);
    font-size: 0.74rem;
}

.table-actions-column {
    width: 150px;
    text-align: right !important;
}

.admin-table td.table-actions {
    width: 150px;

    text-align: right;
    white-space: nowrap;
}

.admin-table td.table-actions > .small-action-button + .small-action-button {
    margin-left: 7px;
}

.small-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 7px 10px;

    color: var(--admin-navy-800);
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 8px;
}

.small-action-button:hover {
    border-color: var(--admin-gray-300);
}

.small-action-button.danger {
    color: #b42318;
}

.small-action-button.warning {
    color: var(--admin-gold-600);
}


.category-admin-table .category-actions-column,
.category-admin-table td.category-actions {
    width: 260px;
}

.small-action-button.primary {
    color: var(--admin-white);

    background: var(--admin-navy-800);
    border-color: var(--admin-navy-800);
}

.small-action-button.primary:hover {
    background: var(--admin-navy-900);
    border-color: var(--admin-navy-900);
}

.category-product-count-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 34px;
    padding: 6px 10px;

    color: var(--admin-navy-800);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;

    background: var(--admin-blue-50);
    border: 1px solid var(--admin-blue-100);
    border-radius: 999px;
}

.category-product-count-link:hover {
    background: var(--admin-blue-100);
    border-color: var(--admin-blue-200);
}

.category-product-count-link strong {
    color: inherit;
    font-size: 0.92rem;
}

.category-product-count-icon {
    font-size: 0.9rem;
}

.admin-filter-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 14px;
    padding: 11px 14px;

    color: var(--admin-gray-600);
    font-size: 0.84rem;

    background: var(--admin-blue-50);
    border: 1px solid var(--admin-blue-100);
    border-radius: 12px;
}

.admin-filter-summary strong {
    color: var(--admin-navy-900);
}

.admin-filter-summary a {
    margin-left: auto;

    color: var(--admin-navy-800);
    font-weight: 800;
    white-space: nowrap;
}

.status-badge,
.role-badge,
.protected-label {
    display: inline-flex;
    align-items: center;

    padding: 5px 9px;

    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;

    border-radius: 999px;
}

.status-published,
.status-success,
.status-replied {
    color: #0e6b49;
    background: #e8f7f1;
}

.status-draft,
.status-running,
.status-processing {
    color: #8a5b10;
    background: #fff5dd;
}

.status-hidden,
.status-failed,
.status-new {
    color: #a3261e;
    background: #fff0ee;
}

.status-closed,
.status-rolled_back {
    color: #5b6674;
    background: #eef2f5;
}

.role-super_admin {
    color: #7f201a;
    background: #fff0ee;
}

.role-website_admin {
    color: #225ea3;
    background: #edf5ff;
}

.role-editor {
    color: #5c448f;
    background: #f3effc;
}

.role-sales {
    color: #0e6b49;
    background: #e8f7f1;
}

.protected-label {
    margin-left: 6px;

    color: var(--admin-gray-600);
    background: var(--admin-gray-100);
}

.status-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 9px;

    color: var(--admin-gray-600);
    font-size: 0.72rem;
    font-weight: 800;

    background: var(--admin-gray-100);
    border: 0;
    border-radius: 999px;
}

.status-toggle > span {
    width: 8px;
    height: 8px;

    background: var(--admin-gray-400);
    border-radius: 50%;
}

.status-toggle.is-active {
    color: var(--admin-green-600);
    background: #e8f7f1;
}

.status-toggle.is-active > span {
    background: var(--admin-green-600);
}

.admin-empty-state {
    padding: 58px 24px;

    color: var(--admin-gray-400);
    text-align: center;
}

.system-info-list {
    margin: 0;
}

.system-info-list > div {
    display: grid;
    grid-template-columns: 0.42fr 0.58fr;
    gap: 14px;

    padding: 12px 0;

    border-bottom: 1px solid var(--admin-gray-200);
}

.system-info-list dt {
    color: var(--admin-gray-400);
}

.system-info-list dd {
    margin: 0;

    color: var(--admin-navy-900);
    font-weight: 700;
    word-break: break-word;
}

.dashboard-news-list,
.quick-action-grid {
    display: grid;
    gap: 10px;
}

.dashboard-news-list a,
.quick-action-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 14px 16px;

    background: var(--admin-gray-25);
    border: 1px solid var(--admin-gray-200);
    border-radius: 12px;
}

.dashboard-news-list a:hover,
.quick-action-grid a:hover {
    border-color: var(--admin-gray-300);
}

.dashboard-news-list a > div {
    display: grid;
}

.dashboard-news-list strong {
    color: var(--admin-navy-900);
}

.dashboard-news-list span,
.dashboard-news-list time {
    color: var(--admin-gray-400);
    font-size: 0.72rem;
}

.quick-action-grid a {
    justify-content: flex-start;

    color: var(--admin-navy-800);
    font-weight: 800;
}

.admin-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 20px;
}

.admin-filter-bar select,
.admin-filter-bar input {
    min-height: 44px;
    padding: 10px 12px;

    color: var(--admin-gray-800);

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 10px;
    outline: none;
}

.admin-search-field {
    display: grid;
    grid-template-columns: minmax(220px, 420px) auto;
    gap: 8px;
}

.admin-search-field button {
    min-width: 80px;
    padding: 8px 14px;

    color: var(--admin-white);
    font-weight: 800;
    white-space: nowrap;

    background: var(--admin-navy-800);
    border: 0;
    border-radius: 10px;
}

.admin-editor-form {
    display: block;
}

.editor-topbar {
    position: sticky;
    top: 74px;
    z-index: 700;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin: -32px -32px 26px;
    padding: 16px 32px;

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--admin-gray-200);
    backdrop-filter: blur(16px);
}

.editor-heading {
    display: grid;
}

.editor-heading > a {
    color: var(--admin-red-600);
    font-size: 0.74rem;
    font-weight: 800;
}

.editor-heading h1 {
    margin: 2px 0 0;

    color: var(--admin-navy-900);
    font-size: 1.42rem;
}

.editor-heading > span {
    color: var(--admin-gray-400);
    font-size: 0.7rem;
}

.editor-actions {
    display: flex;
    gap: 10px;
}

.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 24px;
}

.editor-main-panel,
.editor-sidebar-card {
    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: var(--admin-radius-large);
    box-shadow: var(--admin-shadow);
}

.editor-main-panel {
    min-width: 0;
    padding: 26px;
}

.editor-sidebar {
    display: grid;
    gap: 18px;
}

.editor-sidebar-card {
    padding: 22px;
}

.editor-sidebar-card h2 {
    margin: 0 0 16px;

    color: var(--admin-navy-900);
    font-size: 1rem;
}

.sidebar-help {
    margin: 0;

    color: var(--admin-gray-400);
    font-size: 0.76rem;
}

.language-tabs {
    display: flex;
    gap: 7px;

    margin-bottom: 24px;
    padding-bottom: 12px;
    overflow-x: auto;

    border-bottom: 1px solid var(--admin-gray-200);
}

.language-tabs button {
    flex: 0 0 auto;

    min-height: 38px;
    padding: 8px 14px;

    color: var(--admin-gray-600);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 9px;
}

.language-tabs button.is-active {
    color: var(--admin-white);
    background: var(--admin-navy-800);
    border-color: var(--admin-navy-800);
}

.language-panel {
    display: none;
}

.language-panel.is-active {
    display: grid;
    gap: 20px;
}

.field {
    display: grid;
    gap: 7px;
}

.field > span {
    color: var(--admin-navy-800);
    font-size: 0.78rem;
    font-weight: 800;
}

.field > span small {
    color: var(--admin-gray-400);
    font-weight: 500;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;

    color: var(--admin-gray-800);

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 10px;
    outline: none;
    transition: border-color var(--admin-transition), box-shadow var(--admin-transition), background var(--admin-transition);
}

.field textarea {
    min-height: 110px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    background: var(--admin-white);
    border-color: var(--admin-blue-600);
    box-shadow: 0 0 0 3px rgba(37, 99, 168, 0.10);
}

.field .is-invalid,
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: #b42318;
}

.field-error {
    color: #b42318;
    font-size: 0.72rem;
}

.form-grid {
    display: grid;
    gap: 18px;
}

.form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-span-2 {
    grid-column: span 2;
}

.password-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 7px;
}

.password-field button {
    min-width: 58px;
    padding: 8px 10px;

    color: var(--admin-navy-800);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 9px;
}

.switch-field {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 44px;
}

.switch-field input {
    width: 18px;
    height: 18px;
}

.switch-field span {
    color: var(--admin-navy-800);
    font-size: 0.82rem;
    font-weight: 700;
}

.editor-field > span {
    display: block;
    margin-bottom: 7px;

    color: var(--admin-navy-800);
    font-size: 0.78rem;
    font-weight: 800;
}

.quill-editor {
    min-height: 360px;

    background: var(--admin-white);
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--admin-gray-200) !important;
}

.ql-toolbar.ql-snow {
    border-radius: 10px 10px 0 0;
}

.ql-container.ql-snow {
    border-radius: 0 0 10px 10px;
}

.ql-editor {
    min-height: 360px;

    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.8;
}

.seo-fields {
    display: grid;
    gap: 18px;

    padding-top: 20px;
    border-top: 1px solid var(--admin-gray-200);
}

.specification-input-row {
    display: grid;
    grid-template-columns: 0.45fr 0.55fr;
    gap: 7px;
}

.specification-input-row + .specification-input-row {
    margin-top: 8px;
}

.specification-input-row input {
    width: 100%;
    min-height: 42px;
    padding: 9px 10px;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 9px;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1800;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 24px;
}

.admin-modal.is-open {
    display: flex;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(7, 16, 28, 0.68);
    backdrop-filter: blur(5px);
}

.admin-modal-dialog {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;

    background: var(--admin-white);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(7, 16, 28, 0.30);
}

.large-modal {
    width: min(900px, 100%);
}

.inquiry-modal-dialog {
    width: min(960px, 100%);
}

.admin-modal-header,
.admin-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    flex: 0 0 auto;
    padding: 18px 22px;
}

.admin-modal-header {
    border-bottom: 1px solid var(--admin-gray-200);
}

.admin-modal-header > div {
    display: grid;
}

.admin-modal-header span {
    color: var(--admin-red-600);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.admin-modal-header h2 {
    margin: 2px 0 0;

    color: var(--admin-navy-900);
    font-size: 1.3rem;
}

.admin-modal-header > button {
    width: 40px;
    height: 40px;

    color: var(--admin-gray-600);
    font-size: 1.4rem;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 10px;
}

.admin-modal-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.admin-modal-body {
    flex: 1 1 auto;
    padding: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-modal-footer {
    justify-content: flex-end;

    border-top: 1px solid var(--admin-gray-200);
}

.media-library-panel {
    min-height: 420px;
}

.media-upload-button input {
    display: none;
}

.media-upload-progress,
.update-progress {
    display: grid;
    gap: 7px;

    margin-bottom: 20px;
    padding: 14px;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 12px;
}

.media-upload-progress > div,
.update-progress > div {
    height: 8px;
    overflow: hidden;

    background: var(--admin-gray-200);
    border-radius: 999px;
}

.media-upload-progress span,
.update-progress span {
    display: block;
    width: 0;
    height: 100%;

    background: linear-gradient(90deg, var(--admin-blue-600), var(--admin-green-600));
    border-radius: inherit;
    transition: width 180ms ease;
}

.media-upload-progress p,
.update-progress p {
    margin: 0;

    color: var(--admin-gray-600);
    font-size: 0.76rem;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
}

.media-card {
    overflow: hidden;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 15px;
    transition: box-shadow var(--admin-transition), transform var(--admin-transition);
}

.media-card:hover {
    box-shadow: var(--admin-shadow);
    transform: translateY(-3px);
}

.media-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 180px;
    padding: 12px;

    background: linear-gradient(135deg, #f7f9fb, #eef2f6);
}

.media-thumbnail img {
    max-width: 100%;
    max-height: 156px;

    object-fit: contain;
}

.media-card-body {
    display: grid;
    gap: 3px;

    padding: 13px;
}

.media-card-body strong {
    overflow: hidden;

    color: var(--admin-navy-900);
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-card-body span,
.media-card-body small {
    color: var(--admin-gray-400);
    font-size: 0.68rem;
}

.media-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid var(--admin-gray-200);
}

.media-card-actions button {
    min-height: 38px;

    color: var(--admin-gray-600);
    font-size: 0.72rem;
    font-weight: 800;

    background: var(--admin-white);
    border: 0;
}

.media-card-actions button + button {
    border-left: 1px solid var(--admin-gray-200);
}

.media-card-actions button.danger {
    color: #b42318;
}

.inquiry-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.inquiry-meta-grid > div {
    display: grid;
    gap: 4px;

    padding: 14px;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 12px;
}

.inquiry-meta-grid span {
    color: var(--admin-gray-400);
    font-size: 0.68rem;
}

.inquiry-meta-grid strong {
    color: var(--admin-navy-900);
    word-break: break-word;
}

.inquiry-message {
    margin: 18px 0;
    padding: 18px;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 14px;
}

.inquiry-message span {
    color: var(--admin-gray-400);
    font-size: 0.7rem;
    font-weight: 800;
}

.inquiry-message p {
    margin: 10px 0 0;

    color: var(--admin-gray-800);
    white-space: pre-wrap;
}

.settings-workspace {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.settings-sidebar {
    display: grid;
    gap: 8px;

    position: sticky;
    top: 98px;

    padding: 14px;

    background: var(--admin-navy-900);
    border-radius: 20px;
    box-shadow: var(--admin-shadow);
}

.settings-sidebar button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 1px 10px;

    padding: 13px;

    color: rgba(255, 255, 255, 0.64);
    text-align: left;

    background: transparent;
    border: 0;
    border-radius: 11px;
}

.settings-sidebar button.is-active,
.settings-sidebar button:hover {
    color: var(--admin-white);
    background: rgba(255, 255, 255, 0.08);
}

.settings-sidebar button > span {
    grid-row: span 2;

    color: var(--admin-red-500);
    font-size: 0.72rem;
    font-weight: 900;
}

.settings-sidebar strong {
    font-size: 0.84rem;
}

.settings-sidebar small {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.68rem;
}

.settings-content {
    min-width: 0;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 20px;
    box-shadow: var(--admin-shadow);
}

.settings-panel {
    display: none;
    padding: 28px;
}

.settings-panel.is-active {
    display: block;
}

.settings-panel-heading {
    margin-bottom: 24px;
}

.settings-panel-heading > span {
    color: var(--admin-red-600);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.settings-panel-heading h2 {
    margin: 4px 0 7px;

    color: var(--admin-navy-900);
    font-size: 1.5rem;
}

.settings-panel-heading p {
    margin: 0;

    color: var(--admin-gray-600);
}

.settings-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 18px 28px;

    background: var(--admin-gray-25);
    border-top: 1px solid var(--admin-gray-200);
    border-radius: 0 0 20px 20px;
}

.settings-save-bar span {
    color: var(--admin-gray-400);
    font-size: 0.76rem;
}

.feature-setting-list {
    display: grid;
    gap: 12px;
}

.feature-setting-list label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 17px;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 13px;
}

.feature-setting-list label > div {
    display: grid;
}

.feature-setting-list strong {
    color: var(--admin-navy-900);
}

.feature-setting-list span {
    color: var(--admin-gray-400);
    font-size: 0.76rem;
}

.feature-setting-list input {
    width: 20px;
    height: 20px;
}

.backup-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;

    margin-bottom: 24px;
}

.backup-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 16px;

    padding: 22px;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 18px;
    box-shadow: var(--admin-shadow);
}

.backup-action-card > .button {
    grid-column: span 2;
    width: 100%;
}

.backup-action-card-emphasis {
    border-color: rgba(189, 42, 33, 0.28);
}

.backup-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    color: var(--admin-white);
    font-size: 0.7rem;
    font-weight: 900;

    background: var(--admin-navy-800);
    border-radius: 14px;
}

.backup-action-card-emphasis .backup-action-icon {
    background: var(--admin-red-600);
}

.backup-action-card h2 {
    margin: 0 0 6px;

    color: var(--admin-navy-900);
    font-size: 1rem;
}

.backup-action-card p {
    margin: 0;

    color: var(--admin-gray-600);
    font-size: 0.78rem;
}

.update-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;

    margin-bottom: 24px;
}

.update-upload-panel,
.update-rules-panel {
    padding: 24px;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 20px;
    box-shadow: var(--admin-shadow);
}

.update-step-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;

    margin-bottom: 22px;
}

.update-step-list > div {
    display: grid;
    gap: 3px;

    padding: 12px;

    color: var(--admin-gray-400);
    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 11px;
}

.update-step-list > div.is-active {
    color: var(--admin-navy-900);
    border-color: rgba(189, 42, 33, 0.32);
}

.update-step-list span {
    color: var(--admin-red-600);
    font-size: 0.66rem;
    font-weight: 900;
}

.update-step-list strong {
    font-size: 0.74rem;
}

.update-dropzone {
    display: flex;
    align-items: center;
    flex-direction: column;

    padding: 46px 24px;

    text-align: center;

    background: var(--admin-gray-25);
    border: 2px dashed var(--admin-gray-300);
    border-radius: 18px;
    transition: border-color var(--admin-transition), background var(--admin-transition);
}

.update-dropzone.is-dragover,
.update-dropzone.has-file {
    background: #f2f7ff;
    border-color: var(--admin-blue-600);
}

.update-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 66px;
    height: 66px;

    color: var(--admin-white);
    font-size: 1.8rem;

    background: var(--admin-navy-800);
    border-radius: 18px;
}

.update-dropzone h2 {
    margin: 18px 0 8px;

    color: var(--admin-navy-900);
}

.update-dropzone p {
    margin: 0 0 20px;

    color: var(--admin-gray-600);
}

.update-dropzone > span {
    margin-top: 12px;

    color: var(--admin-gray-400);
    font-size: 0.76rem;
    word-break: break-word;
}

.update-execute-button {
    width: 100%;
    margin-top: 16px;
}

.update-rules-panel h2 {
    margin: 0 0 16px;

    color: var(--admin-navy-900);
}

.update-rules-panel ul {
    padding-left: 18px;
    margin: 0;

    color: var(--admin-gray-600);
    font-size: 0.82rem;
}

.update-rules-panel li + li {
    margin-top: 10px;
}

.admin-login-page {
    min-height: 100vh;
    overflow: auto;

    background: var(--admin-navy-950);
}

.admin-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);

    min-height: 100vh;
}

.admin-login-brand-panel {
    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 100vh;
    padding: 70px;
    overflow: hidden;

    color: var(--admin-white);
    background:
        linear-gradient(130deg, rgba(7, 16, 28, 0.92), rgba(19, 35, 58, 0.82)),
        url("../images/admin-login-system.svg") center / cover;
}

.admin-login-brand-panel::after {
    position: absolute;
    inset: 0;

    content: "";

    background: radial-gradient(circle at 18% 18%, rgba(209, 67, 56, 0.32), transparent 30%);
}

.admin-login-brand-content {
    position: relative;
    z-index: 2;

    max-width: 720px;
}

.admin-login-brand-content > img {
    width: 230px;
    margin-bottom: 80px;
}

.admin-login-brand-content .eyebrow {
    color: #ff8e86;
}

.admin-login-brand-content h1 {
    margin: 16px 0 18px;

    font-size: clamp(2.5rem, 4.5vw, 5rem);
    line-height: 1.08;
}

.admin-login-brand-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.66);
}

.admin-login-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 30px;
}

.admin-login-feature-list span {
    padding: 8px 12px;

    color: rgba(255, 255, 255, 0.78);
    font-size: 0.74rem;

    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.admin-login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px;

    background: var(--admin-gray-50);
}

.admin-login-form {
    width: min(460px, 100%);
    padding: 38px;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 24px;
    box-shadow: var(--admin-shadow);
}

.admin-login-heading {
    margin-bottom: 26px;
}

.admin-login-heading > span {
    color: var(--admin-red-600);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.admin-login-heading h2 {
    margin: 6px 0 8px;

    color: var(--admin-navy-900);
    font-size: 2rem;
}

.admin-login-heading p {
    margin: 0;

    color: var(--admin-gray-600);
}

.admin-login-form .field + .field {
    margin-top: 18px;
}

.captcha-field {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
}

.captcha-field strong {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 98px;
    padding: 8px 12px;

    color: var(--admin-white);
    font-size: 1.05rem;

    background: var(--admin-navy-800);
    border-radius: 10px;
}

.captcha-field button {
    min-width: 78px;
    padding: 8px;

    color: var(--admin-navy-800);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;

    background: var(--admin-gray-50);
    border: 1px solid var(--admin-gray-200);
    border-radius: 10px;
}

.admin-login-submit {
    width: 100%;
    margin-top: 24px;
}

.admin-login-back {
    display: block;
    margin-top: 18px;

    color: var(--admin-gray-600);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.admin-denied-page {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    padding: 24px;

    background: var(--admin-gray-50);
}

.admin-denied-card {
    max-width: 520px;
    padding: 44px;

    text-align: center;

    background: var(--admin-white);
    border: 1px solid var(--admin-gray-200);
    border-radius: 24px;
    box-shadow: var(--admin-shadow);
}

.admin-denied-code {
    color: var(--admin-red-600);
    font-size: 4rem;
    font-weight: 900;
}

.admin-denied-card h1 {
    color: var(--admin-navy-900);
}

.admin-denied-card p {
    color: var(--admin-gray-600);
}

.slug-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.slug-input-row .small-action-button {
    min-width: 92px;
}

.field-help,
.slug-preview,
.readonly-field-note {
    display: block;

    margin-top: 7px;

    color: var(--admin-gray-400);
    font-size: 0.74rem;
    line-height: 1.6;
}

.slug-preview {
    padding: 8px 10px;

    color: var(--admin-navy-700);
    word-break: break-all;

    background: var(--admin-gray-25);
    border: 1px solid var(--admin-gray-200);
    border-radius: 8px;
}

.field input[readonly] {
    color: var(--admin-gray-500);

    background: var(--admin-gray-50);
    cursor: not-allowed;
}

@media (max-width: 1180px) {
    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-panel-span-2 {
        grid-column: span 2;
    }

    .editor-layout,
    .update-workspace {
        grid-template-columns: 1fr;
    }

    .editor-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backup-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .admin-shell,
    .admin-shell.is-sidebar-collapsed {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .admin-logo-full,
    .admin-menu-text,
    .admin-menu-label {
        display: none !important;
    }

    .admin-logo-mark {
        display: block;
    }

    .admin-menu-item {
        justify-content: center;
        padding-inline: 8px;
    }

    .admin-menu-item::after {
        position: fixed;
        z-index: 1500;

        display: none;
        padding: 7px 10px;

        color: var(--admin-white);
        font-size: 0.78rem;
        white-space: nowrap;

        content: attr(data-tooltip);

        background: var(--admin-navy-800);
        border-radius: 7px;
        transform: translateX(86px);
    }

    .admin-menu-item:hover::after {
        display: block;
    }

    .admin-login-shell {
        grid-template-columns: 1fr;
    }

    .admin-login-brand-panel {
        display: none;
    }

    .admin-login-form-panel {
        min-height: 100vh;
    }

    .settings-workspace {
        grid-template-columns: 1fr;
    }

    .settings-sidebar {
        position: static;
        grid-template-columns: repeat(4, minmax(160px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 760px) {
    .admin-shell,
    .admin-shell.is-sidebar-collapsed {
        display: block;
    }

    .admin-sidebar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;

        display: block;
        width: 100%;
        height: 68px;
    }

    .admin-sidebar-brand,
    .admin-menu-label,
    .admin-sidebar-footer {
        display: none !important;
    }

    .admin-navigation {
        display: flex;
        gap: 3px;

        padding: 7px 8px;
        overflow-x: auto;
    }

    .admin-menu-group {
        display: contents;
    }

    .admin-menu-group + .admin-menu-group {
        margin: 0;
    }

    .admin-menu-item {
        flex: 0 0 62px;
        flex-direction: column;
        gap: 1px;

        min-height: 54px;
        padding: 4px 3px;

        font-size: 0.58rem;
        text-align: center;
    }

    .admin-menu-text {
        display: block !important;
        max-width: 58px;
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-menu-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .admin-menu-item::after {
        display: none !important;
    }

    .admin-main-column {
        padding-bottom: 74px;
    }

    .admin-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 64px;
        padding: 9px 14px;
    }

    .admin-sidebar-toggle,
    .admin-view-site,
    .admin-profile > div {
        display: none;
    }

    .admin-content {
        padding: 20px 14px;
    }

    .admin-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-heading-actions,
    .admin-page-heading > .button {
        width: 100%;
    }

    .admin-heading-actions .button,
    .admin-page-heading > .button {
        flex: 1;
    }

    .admin-stat-grid,
    .admin-dashboard-grid,
    .backup-action-grid {
        grid-template-columns: 1fr;
    }

    .admin-panel-span-2 {
        grid-column: span 1;
    }

    .admin-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .admin-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-search-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .editor-topbar {
        top: 64px;

        align-items: stretch;
        flex-direction: column;

        margin: -20px -14px 20px;
        padding: 12px 14px;
    }

    .editor-actions {
        width: 100%;
    }

    .editor-actions .button {
        flex: 1;
    }

    .editor-main-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .editor-sidebar {
        grid-template-columns: 1fr;
    }

    .form-grid-2,
    .inquiry-meta-grid {
        grid-template-columns: 1fr;
    }

    .field-span-2 {
        grid-column: span 1;
    }

    .admin-modal {
        align-items: stretch;
        padding: 0;
    }

    .admin-modal-dialog,
    .large-modal,
    .inquiry-modal-dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .admin-modal-body {
        padding: 18px;
    }

    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .media-thumbnail {
        height: 135px;
    }

    .settings-sidebar {
        grid-template-columns: repeat(4, 160px);
    }

    .settings-panel {
        padding: 20px;
    }

    .settings-save-bar {
        align-items: stretch;
        flex-direction: column;
        padding: 16px 20px;
    }

    .update-step-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-login-form-panel {
        padding: 20px;
    }

    .admin-login-form {
        padding: 26px;
    }

    .captcha-field {
        grid-template-columns: 1fr 1fr;
    }

    .captcha-field input {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .slug-input-row {
        grid-template-columns: 1fr;
    }

    .slug-input-row .small-action-button {
        width: 100%;
    }
}

@media (max-width: 460px) {
    .media-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card {
        min-height: 130px;
    }

    .password-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .password-field button:last-child:not(:only-child) {
        grid-column: span 2;
    }

    .captcha-field {
        grid-template-columns: 1fr;
    }

    .captcha-field input {
        grid-column: span 1;
    }
    .category-admin-table .category-actions-column,
    .category-admin-table td.category-actions {
        width: auto;
    }

    .admin-filter-summary a {
        width: 100%;
        margin-left: 0;
    }

}

.content-editor-modal-dialog {
    width: min(1480px, calc(100vw - 32px));
    height: calc(100vh - 32px);
    max-height: none;
}

.content-editor-modal-header {
    min-height: 76px;
}

.content-editor-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--admin-gray-50);
}

.admin-modal-loading {
    display: grid;
    place-items: center;

    min-height: 280px;
    padding: 32px;

    color: var(--admin-gray-500);
    font-weight: 800;
}

.is-modal-editor-form {
    min-height: 100%;
    padding: 0 28px 28px;
}

.is-modal-editor-form .editor-topbar {
    top: 0;

    margin: 0 -28px 24px;
    padding: 14px 28px;
}

.is-modal-editor-form .editor-heading h1 {
    font-size: 1.18rem;
}

.backup-check-results {
    display: grid !important;
    gap: 8px;

    text-align: left !important;
}

.backup-check-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.35fr) minmax(0, 0.65fr);
    gap: 12px;

    padding: 10px 12px;

    font-size: 0.82rem;

    border: 1px solid var(--admin-gray-200);
    border-radius: 10px;
}

.backup-check-row strong {
    color: var(--admin-navy-900);
}

.backup-check-row span {
    color: var(--admin-gray-600);
    overflow-wrap: anywhere;
}

.backup-check-row.is-success {
    background: #eefaf5;
    border-color: #b9e8d4;
}

.backup-check-row.is-failed {
    background: #fff1ef;
    border-color: #f1c0bb;
}

@media (max-width: 900px) {
    .content-editor-modal {
        padding: 0;
    }

    .content-editor-modal-dialog {
        width: 100%;
        height: 100%;

        border-radius: 0;
    }

    .content-editor-modal-header {
        min-height: 68px;
        padding: 14px 16px;
    }

    .is-modal-editor-form {
        padding: 0 16px 20px;
    }

    .is-modal-editor-form .editor-topbar {
        margin: 0 -16px 18px;
        padding: 12px 16px;
    }

    .backup-check-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}