/*
    DJANGO Admin styles
*/

/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    --primary: #8fa3b8;
    --secondary: #4a5d6f;
    --accent: #7a94aa;
    --primary-fg: #f8f9fa;

    --body-fg: #4a4f57;
    --body-bg: #FAFAF8;
    --body-quiet-color: #9a9ea5;
    --body-medium-color: #747980;
    --body-loud-color: #383c42;

    --header-color: #eceef1;
    --header-branding-color: var(--accent);
    --header-bg: #3d4f5f;
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #b8bec5;
    --breadcrumbs-link-fg: #eceef1;
    --breadcrumbs-bg: #526778;

    --link-fg: #6d94b2;
    --link-hover-color: #567d9a;
    --link-selected-fg: var(--secondary);

    --hairline-color: #e0e1e3;
    --border-color: #d5d7db;

    --error-fg: #d09080;

    --message-success-bg: #f0f5f0;
    --message-warning-bg: #f5f3ed;
    --message-error-bg: #f5f0ec;

    --darkened-bg: #FCFBF9; /* Tab bars */
    --table-row-odd: #F4F6F8; /* Table odd rows - cool light gray-blue */
    --table-row-even: #E4E8ED; /* Table even rows - cool medium gray-blue */
    --table-header-bg: #9AA8C1; /* Table head background */
    --selected-bg: #e2e0db; /* E.g. selected table cells */
    --selected-row: #d8d5ce;
    --form-row-bg: #f0eeea; /* Form field rows */

    --button-fg: #f8f9fa;
    --button-bg: var(--secondary);
    --button-hover-bg: #3d4f5f;
    --default-button-bg: #5a7a94;
    --default-button-hover-bg: var(--secondary);
    --close-button-bg: #a0a6ad;
    --close-button-hover-bg: #9098a0;
    --delete-button-bg: #d0a090;
    --delete-button-hover-bg: #c09080;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --font-family-primary:
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace:
        ui-monospace,
        Menlo,
        Monaco,
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Oxygen Mono",
        "Ubuntu Monospace",
        "Source Code Pro",
        "Fira Mono",
        "Droid Sans Mono",
        "Courier New",
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";

    color-scheme: light;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    font-family: var(--font-family-primary);
    color: var(--body-fg);
    background: var(--body-bg);
}

/* LINKS */

a:link, a:visited {
    color: var(--link-fg);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

a:focus, a:hover {
    color: var(--link-hover-color);
}

a:focus {
    text-decoration: underline;
}

a img {
    border: none;
}

a.section:link, a.section:visited {
    color: var(--header-link-color);
    text-decoration: none;
}

a.section:focus, a.section:hover {
    text-decoration: underline;
}

/* GLOBAL DEFAULTS */

p, ol, ul, dl {
    margin: .2em 0 .8em 0;
}

p {
    padding: 0;
    line-height: 140%;
}

h1,h2,h3,h4,h5 {
    font-weight: bold;
}

h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 1.25rem;
}

h2 {
    font-size: 1rem;
    margin: 1em 0 .5em 0;
}

h2.subhead {
    font-weight: normal;
    margin-top: 0;
}

h3 {
    font-size: 0.875rem;
    margin: .8em 0 .3em 0;
    color: var(--body-medium-color);
    font-weight: bold;
}

h4 {
    font-size: 0.75rem;
    margin: 1em 0 .8em 0;
    padding-bottom: 3px;
    color: var(--body-medium-color);
}

h5 {
    font-size: 0.625rem;
    margin: 1.5em 0 .5em 0;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

ul > li {
    list-style-type: square;
    padding: 1px 0;
}

li ul {
    margin-bottom: 0;
}

li, dt, dd {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

dt {
    font-weight: bold;
    margin-top: 4px;
}

dd {
    margin-left: 0;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--hairline-color);
}

details summary {
    cursor: pointer;
}

blockquote {
    font-size: 0.6875rem;
    color: #777;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 5px solid #ddd;
}

code, pre {
    font-family: var(--font-family-monospace);
    color: var(--body-quiet-color);
    font-size: 0.75rem;
    overflow-x: auto;
}

pre.literal-block {
    margin: 10px;
    background: var(--darkened-bg);
    padding: 6px 8px;
}

code strong {
    color: #930;
}

hr {
    clear: both;
    color: var(--hairline-color);
    background-color: var(--hairline-color);
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

/* TEXT STYLES & MODIFIERS */

.small {
    font-size: 0.6875rem;
}

.mini {
    font-size: 0.625rem;
}

.help, p.help, form p.help, div.help, form div.help, div.help li {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}

div.help ul {
     margin-bottom: 0;
}

.help-tooltip {
    cursor: help;
}

p img, h1 img, h2 img, h3 img, h4 img, td img {
    vertical-align: middle;
}

.quiet, a.quiet:link, a.quiet:visited {
    color: var(--body-quiet-color);
    font-weight: normal;
}

.clear {
    clear: both;
}

.nowrap {
    white-space: nowrap;
}

.hidden {
    display: none !important;
}

/* TABLES */

table {
    border-collapse: collapse;
    border-color: var(--border-color);
}

td, th {
    font-size: 0.8125rem;
    line-height: 1rem;
    border-bottom: 1px solid var(--hairline-color);
    vertical-align: top;
    padding: 8px;
}

th {
    font-weight: 500;
    text-align: left;
}

thead th,
tfoot td {
    color: var(--body-quiet-color);
    padding: 5px 10px;
    font-size: 0.6875rem;
    background: var(--body-bg);
    border: none;
    border-top: 1px solid var(--hairline-color);
    border-bottom: 1px solid var(--hairline-color);
}

tfoot td {
    border-bottom: none;
    border-top: 1px solid var(--hairline-color);
}

thead th.required {
    font-weight: bold;
}

tr.alt {
    background: var(--darkened-bg);
}

tr:nth-child(odd), .row-form-errors {
    background: var(--table-row-odd);
}

tr:nth-child(even),
tr:nth-child(even) .errorlist,
tr:nth-child(odd) + .row-form-errors,
tr:nth-child(odd) + .row-form-errors .errorlist {
    background: var(--table-row-even);
}

/* SORTABLE TABLES */

thead th {
    padding: 5px 10px;
    line-height: normal;
    text-transform: uppercase;
    background: var(--table-header-bg);
    color: #fff;
}

thead th a:link, thead th a:visited {
    color: #fff;
}

thead th.sorted {
    background: #8494a9;
}

thead th.sorted .text {
    padding-right: 42px;
}

table thead th .text span {
    padding: 8px 10px;
    display: block;
}

table thead th .text a {
    display: block;
    cursor: pointer;
    padding: 8px 10px;
}

table thead th .text a:focus, table thead th .text a:hover {
    background: #8494a9;
}

thead th.sorted a.sortremove {
    visibility: hidden;
}

table thead th.sorted:hover a.sortremove {
    visibility: visible;
}

table thead th.sorted .sortoptions {
    display: block;
    padding: 9px 5px 0 5px;
    float: right;
    text-align: right;
}

table thead th.sorted .sortpriority {
    font-size: .8em;
    min-width: 12px;
    text-align: center;
    vertical-align: 3px;
    margin-left: 2px;
    margin-right: 2px;
}

table thead th.sorted .sortoptions a {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: url(../img/sorting-icons.svg) 0 0 no-repeat;
    background-size: 14px auto;
}

table thead th.sorted .sortoptions a.sortremove {
    background-position: 0 0;
}

table thead th.sorted .sortoptions a.sortremove:after {
    content: '\\';
    position: absolute;
    top: -6px;
    left: 3px;
    font-weight: 200;
    font-size: 1.125rem;
    color: var(--body-quiet-color);
}

table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
    color: var(--link-fg);
}

table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
    background-position: 0 -14px;
}

table thead th.sorted .sortoptions a.ascending {
    background-position: 0 -28px;
}

table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
    background-position: 0 -42px;
}

table thead th.sorted .sortoptions a.descending {
    top: 1px;
    background-position: 0 -56px;
}

table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
    background-position: 0 -70px;
}

/* FORM DEFAULTS */

input, textarea, select, .form-row p, form .button {
    margin: 2px 0;
    padding: 2px 3px;
    vertical-align: middle;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 0.8125rem;
}
.form-row div.help {
    padding: 2px 3px;
}

.form-row {
    background: var(--form-row-bg);
    padding: 10px 12px;
    margin: 0 0 4px 0;
    border-radius: 4px;
}

textarea {
    vertical-align: top;
}

/*
Minifiers remove the default (text) "type" attribute from "input" HTML tags.
Add input:not([type]) to make the CSS stylesheet work the same.
*/
input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=url], input[type=number], input[type=tel], textarea, select,
.vTextField {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

/*
Minifiers remove the default (text) "type" attribute from "input" HTML tags.
Add input:not([type]) to make the CSS stylesheet work the same.
*/
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=url]:focus, input[type=number]:focus,
input[type=tel]:focus, textarea:focus, select:focus, .vTextField:focus {
    border-color: var(--body-quiet-color);
}

select {
    height: 1.875rem;
}

select[multiple] {
    /* Allow HTML size attribute to override the height in the rule above. */
    height: auto;
    min-height: 150px;
}

/* FORM BUTTONS */

.button, input[type=submit], input[type=button], .submit-row input, a.button {
    background: var(--button-bg);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: var(--button-fg);
    cursor: pointer;
    transition: background 0.15s;
}

a.button {
    padding: 4px 5px;
}

.button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
.button:hover, input[type=submit]:hover, input[type=button]:hover {
    background: var(--button-hover-bg);
}

.button[disabled], input[type=submit][disabled], input[type=button][disabled] {
    opacity: 0.4;
}

.button.default, input[type=submit].default, .submit-row input.default {
    border: none;
    font-weight: 400;
    background: var(--default-button-bg);
}

.button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover {
    background: var(--default-button-hover-bg);
}

.button[disabled].default,
input[type=submit][disabled].default,
input[type=button][disabled].default {
    opacity: 0.4;
}


/* MODULES */

.module {
    border: none;
    margin-bottom: 30px;
    background: var(--body-bg);
}

.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
    padding-left: 10px;
    padding-right: 10px;
}

.module blockquote {
    margin-left: 12px;
}

.module ul, .module ol {
    margin-left: 1.5em;
}

.module h3 {
    margin-top: .6em;
}

.module h2, .module caption, .inline-group h2 {
    margin: 0;
    padding: 8px;
    font-weight: 400;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--header-bg);
    color: var(--header-link-color);
}

.module caption,
.inline-group h2 {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.module table {
    border-collapse: collapse;
}

/* MESSAGES & ERRORS */

ul.messagelist {
    padding: 0;
    margin: 0;
}

ul.messagelist li {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    padding: 10px 10px 10px 65px;
    margin: 0 0 10px 0;
    background: var(--message-success-bg) url(../img/icon-yes.svg) 40px 12px no-repeat;
    background-size: 16px auto;
    color: var(--body-fg);
    word-break: break-word;
}

ul.messagelist li.warning {
    background: var(--message-warning-bg) url(../img/icon-alert.svg) 40px 14px no-repeat;
    background-size: 14px auto;
}

ul.messagelist li.error {
    background: var(--message-error-bg) url(../img/icon-no.svg) 40px 12px no-repeat;
    background-size: 16px auto;
}

.errornote {
    font-size: 0.875rem;
    font-weight: 700;
    display: block;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    color: var(--error-fg);
    border: 1px solid var(--error-fg);
    border-radius: 4px;
    background-color: var(--body-bg);
    background-position: 5px 12px;
    overflow-wrap: break-word;
}

ul.errorlist {
    margin: 0 0 4px;
    padding: 0;
    color: var(--error-fg);
    background: var(--body-bg);
}

ul.errorlist li {
    font-size: 0.8125rem;
    display: block;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

ul.errorlist li:first-child {
    margin-top: 0;
}

ul.errorlist li a {
    color: inherit;
    text-decoration: underline;
}

td ul.errorlist {
    margin: 0;
    padding: 0;
}

td ul.errorlist li {
    margin: 0;
}

.form-row.errors {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--hairline-color);
    background: none;
}

.form-row.errors ul.errorlist li {
    padding-left: 0;
}

.errors input, .errors select, .errors textarea,
td ul.errorlist + input, td ul.errorlist + select, td ul.errorlist + textarea {
    border: 1px solid var(--error-fg);
}

.description {
    font-size: 0.75rem;
    padding: 5px 0 0 12px;
}

/* BREADCRUMBS */

div.breadcrumbs {
    background: var(--breadcrumbs-bg);
    padding: 10px 40px;
    border: none;
    color: var(--breadcrumbs-fg);
    text-align: left;
}

div.breadcrumbs a {
    color: var(--breadcrumbs-link-fg);
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: var(--breadcrumbs-fg);
}

/* ACTION ICONS */

.viewlink, .inlineviewlink {
    padding-left: 16px;
    background: url(../img/icon-viewlink.svg) 0 1px no-repeat;
}

.hidelink {
    padding-left: 16px;
    background: url(../img/icon-hidelink.svg) 0 1px no-repeat;
}

.addlink {
    padding-left: 16px;
    background: url(../img/icon-addlink.svg) 0 1px no-repeat;
}

.changelink, .inlinechangelink {
    padding-left: 16px;
    background: url(../img/icon-changelink.svg) 0 1px no-repeat;
}

.deletelink {
    padding-left: 16px;
    background: url(../img/icon-deletelink.svg) 0 1px no-repeat;
}

a.deletelink:link, a.deletelink:visited {
    color: #CC3434; /* XXX Probably unused? */
}

a.deletelink:focus, a.deletelink:hover {
    color: #993333; /* XXX Probably unused? */
    text-decoration: none;
}

/* OBJECT TOOLS */

.object-tools {
    font-size: 0.625rem;
    font-weight: bold;
    padding-left: 0;
    float: right;
    position: relative;
    margin-top: -48px;
}

.object-tools li {
    display: block;
    float: left;
    margin-left: 5px;
    height: 1rem;
}

.object-tools a {
    border-radius: 15px;
}

.object-tools a:link, .object-tools a:visited {
    display: block;
    float: left;
    padding: 3px 12px;
    background: var(--object-tools-bg);
    color: var(--object-tools-fg);
    font-weight: 400;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.object-tools a:focus, .object-tools a:hover {
    background-color: var(--object-tools-hover-bg);
}

.object-tools a:focus{
    text-decoration: none;
}

.object-tools a.viewsitelink, .object-tools a.addlink {
    background-repeat: no-repeat;
    background-position: right 7px center;
    padding-right: 26px;
}

.object-tools a.viewsitelink {
    background-image: url(../img/tooltag-arrowright.svg);
}

.object-tools a.addlink {
    background-image: url(../img/tooltag-add.svg);
}

/* OBJECT HISTORY */

#change-history table {
    width: 100%;
}

#change-history table tbody th {
    width: 16em;
}

#change-history .paginator {
    color: var(--body-quiet-color);
    border-bottom: 1px solid var(--hairline-color);
    background: var(--body-bg);
    overflow: hidden;
}

/* PAGE STRUCTURE */

#container {
    position: relative;
    width: 100%;
    min-width: 980px;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#container > .main {
    display: flex;
    flex: 1 0 auto;
}

.main > .content {
    flex:  1 0;
    max-width: 100%;
}

.skip-to-content-link {
    position: absolute;
    top: -999px;
    margin: 5px;
    padding: 5px;
    background: var(--body-bg);
    z-index: 1;
}

.skip-to-content-link:focus {
    left: 0px;
    top: 0px;
}

#content {
    padding: 20px 40px;
}

.dashboard #content {
    width: 600px;
}

#content-main {
    float: left;
    width: 100%;
}

#content-related {
    float: right;
    width: 260px;
    position: relative;
    margin-right: -300px;
}

@media (forced-colors: active) {
  #content-related {
      border: 1px solid;
  }
}

/* COLUMN TYPES */

.colMS {
    margin-right: 300px;
}

.colSM {
    margin-left: 300px;
}

.colSM #content-related {
    float: left;
    margin-right: 0;
    margin-left: -300px;
}

.colSM #content-main {
    float: right;
}

.popup .colM {
    width: auto;
}

/* HEADER */

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background: var(--header-bg);
    color: var(--header-color);
}

#header a:link, #header a:visited, #logout-form button {
    color: var(--header-link-color);
}

#header a:focus , #header a:hover {
    text-decoration: underline;
}

@media (forced-colors: active) {
  #header {
      border-bottom: 1px solid;
  }
}

#branding {
    display: flex;
}

#site-name {
    padding: 0;
    margin: 0;
    margin-inline-end: 20px;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--header-branding-color);
}

#site-name a:link, #site-name a:visited {
    color: #c0d0de;
}

#branding h2 {
    padding: 0 10px;
    font-size: 0.875rem;
    margin: -8px 0 8px 0;
    font-weight: normal;
    color: var(--header-color);
}

#branding a:hover {
    text-decoration: none;
}

#logout-form {
    display: inline;
}

#logout-form button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--font-family-primary);
}

#user-tools {
    float: right;
    margin: 0 0 0 20px;
    text-align: right;
}

#user-tools, #logout-form button{
    padding: 0;
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#user-tools a, #logout-form button {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

#user-tools a:focus, #user-tools a:hover,
#logout-form button:active, #logout-form button:hover {
    text-decoration: none;
    border-bottom: 0;
}

#logout-form button:active, #logout-form button:hover {
    margin-bottom: 1px;
}

/* SIDEBAR */

#content-related {
    background: var(--darkened-bg);
}

#content-related .module {
    background: none;
}

#content-related h3 {
    color: var(--body-quiet-color);
    padding: 0 16px;
    margin: 0 0 16px;
}

#content-related h4 {
    font-size: 0.8125rem;
}

#content-related p {
    padding-left: 16px;
    padding-right: 16px;
}

#content-related .actionlist {
    padding: 0;
    margin: 16px;
}

#content-related .actionlist li {
    line-height: 1.2;
    margin-bottom: 10px;
    padding-left: 18px;
}

#content-related .module h2 {
    background: none;
    padding: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hairline-color);
    font-size: 1.125rem;
    color: var(--body-fg);
}

.delete-confirmation form input[type="submit"] {
    background: var(--delete-button-bg);
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
}

.delete-confirmation form input[type="submit"]:active,
.delete-confirmation form input[type="submit"]:focus,
.delete-confirmation form input[type="submit"]:hover {
    background: var(--delete-button-hover-bg);
}

.delete-confirmation form .cancel-link {
    display: inline-block;
    vertical-align: middle;
    height: 0.9375rem;
    line-height: 0.9375rem;
    border-radius: 4px;
    padding: 10px 15px;
    color: var(--button-fg);
    background: var(--close-button-bg);
    margin: 0 0 0 10px;
}

.delete-confirmation form .cancel-link:active,
.delete-confirmation form .cancel-link:focus,
.delete-confirmation form .cancel-link:hover {
    background: var(--close-button-hover-bg);
}

/* POPUP */
.popup #content {
    padding: 20px;
}

.popup #container {
    min-width: 0;
}

.popup #header {
    padding: 10px 20px;
}

/* PAGINATOR */

.paginator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 22px;
    margin: 0;
    border-top: 1px solid var(--hairline-color);
    width: 100%;
    box-sizing: border-box;
}

.paginator a:link, .paginator a:visited {
    padding: 2px 6px;
    background: var(--button-bg);
    text-decoration: none;
    color: var(--button-fg);
}

.paginator a.showall {
    border: none;
    background: none;
    color: var(--link-fg);
}

.paginator a.showall:focus, .paginator a.showall:hover {
    background: none;
    color: var(--link-hover-color);
}

.paginator .end {
    margin-right: 6px;
}

.paginator .this-page {
    padding: 2px 6px;
    font-weight: bold;
    font-size: 0.8125rem;
    vertical-align: top;
}

.paginator a:focus, .paginator a:hover {
    color: white;
    background: var(--link-hover-color);
}

.paginator input {
    margin-left: auto;
}

.base-svgs {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EasyMDE Markdown Editor
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide "İçerik:" label for EasyMDE editor */
label.translatable-field[for="id_content"],
label[for="id_content"] {
    display: none !important;
}

/* Make EasyMDE editor full width */
.easymde-box,
.EasyMDEContainer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.EasyMDEContainer .CodeMirror:not(.CodeMirror-fullscreen) {
    width: 100% !important;
    height: 600px !important;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--border-color, #ccc);
    border-top: none;
    box-sizing: border-box !important;
}

/* CodeMirror-scroll handles the actual scrolling */
.EasyMDEContainer .CodeMirror-scroll {
    min-height: 100%;
    max-height: 100%;
}

/* Modern scrollbar styling for CodeMirror */
.EasyMDEContainer .CodeMirror-vscrollbar,
.EasyMDEContainer .CodeMirror-hscrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}

.EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar,
.EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-track,
.EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.5);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.7);
    background-clip: content-box;
}

.EasyMDEContainer .editor-toolbar:not(.fullscreen) {
    width: 100% !important;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--border-color, #ccc);
    background: var(--darkened-bg, #f5f5f5);
    padding: 8px;
    box-sizing: border-box !important;
    overflow: hidden;
}

.EasyMDEContainer .editor-toolbar button {
    margin: 2px;
}

/* Status bar styling */
.EasyMDEContainer .editor-statusbar:not(.fullscreen) {
    padding: 8px 10px;
    background: var(--darkened-bg, #f5f5f5);
    border: 1px solid var(--border-color, #ccc);
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-size: 12px;
    color: var(--body-quiet-color, #666);
    box-sizing: border-box !important;
}

/* Full width for the form row containing EasyMDE */
.form-row .easymde-box,
.form-row .EasyMDEContainer,
fieldset .easymde-box,
fieldset .EasyMDEContainer {
    width: 100% !important;
}

/* Ensure parent containers don't restrict width */
.field-content,
.form-row.field-content {
    width: 100% !important;
}

/* EasyMDE fullscreen mode padding fix */
.CodeMirror-fullscreen .CodeMirror-scroll {
    padding: 10px 16px !important;
    box-sizing: border-box !important;
}

.CodeMirror-fullscreen .CodeMirror-sizer {
    margin-left: 0 !important;
    padding-left: 8px !important;
}

/* Dark mode fullscreen support */
html[data-theme="dark"] .editor-toolbar.fullscreen {
    background: var(--darkened-bg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .CodeMirror-fullscreen {
    background: var(--body-bg) !important;
    color: var(--body-fg) !important;
}

/* EasyMDE preview left padding */
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
    padding-left: 12px !important;
}
.editor-preview-full,
.editor-preview-side.editor-preview-active-side {
    padding-left: 24px !important;
}

/* Full screen preview mode padding fix */
.CodeMirror-fullscreen .editor-preview-side,
.CodeMirror-fullscreen .editor-preview,
.CodeMirror-fullscreen .editor-preview-active-side {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

html[data-theme="dark"] .editor-preview-side {
    background: var(--body-bg) !important;
    color: var(--body-fg) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .editor-statusbar.fullscreen {
    background: var(--darkened-bg) !important;
    border-color: var(--border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phone Mockup Preview Modal
   Shows realistic iPhone simulation in a modal dialog
   ═══════════════════════════════════════════════════════════════════════════ */

/* EasyMDE Preview Toolbar */
.easymde-preview-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.easymde-preview-toolbar .separator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--border-color, #ddd);
    margin: 0 4px;
}

/* Toolbar preview button */
.easymde-phone-preview-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--body-quiet-color, #666) !important;
}

.easymde-phone-preview-btn:hover {
    background: var(--primary, #5ba4c9) !important;
    color: #fff !important;
}

.easymde-phone-preview-btn svg {
    display: block;
}

/* EasyMDE toolbar buttons */
.easymde-preview-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--body-quiet-color, #666);
}

.easymde-preview-toolbar button:hover {
    background: var(--primary, #5ba4c9);
    color: #fff;
}

.easymde-preview-toolbar button.active {
    background: var(--primary, #5ba4c9);
    color: #fff;
}

/* EasyMDE toolbar selects */
.easymde-device-select,
.easymde-zoom-select {
    height: 28px;
    padding: 0 6px;
    font-size: 11px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    background: var(--body-bg, #fff);
    color: var(--body-fg, #333);
    cursor: pointer;
}

.easymde-device-select:focus,
.easymde-zoom-select:focus {
    outline: none;
    border-color: var(--primary, #5ba4c9);
}

.easymde-zoom-select {
    width: 50px;
}

/* Opacity wrapper */
.easymde-opacity-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    color: var(--body-quiet-color, #666);
}

.easymde-opacity-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color, #ddd);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.easymde-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary, #5ba4c9);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.easymde-opacity-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary, #5ba4c9);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Floating phone preview modal (non-blocking) - PHONE ONLY */
.phone-preview-modal.phone-preview-floating {
    position: fixed;
    z-index: 9999;
    background: transparent;
    max-width: 90vw;
    max-height: 90vh;
    animation: modalSlideIn 0.25s ease-out;
    cursor: grab;
}

.phone-preview-modal.phone-preview-floating:active {
    cursor: grabbing;
}

.phone-preview-modal.is-dragging {
    cursor: grabbing;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Legacy overlay mode (kept for backwards compatibility) */
.phone-preview-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal container (in overlay mode) */
.phone-preview-modal-overlay .phone-preview-modal {
    background: var(--body-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn 0.25s ease-out;
}

/* Dragging state */
.phone-preview-modal.is-dragging {
    opacity: 0.9;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Phone Mockup - Device Specific Styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base phone mockup */
.phone-mockup {
    width: 300px;
    height: 650px;
    position: relative;
}

.phone-frame {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-radius: 50px;
    padding: 12px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 30px 60px rgba(0,0,0,0.5),
        0 15px 25px rgba(0,0,0,0.3);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Notch - Base style (hidden by default) */
.phone-notch {
    display: none;
}

/* Home indicator - iPhone style */
.phone-home-indicator {
    width: 120px;
    height: 5px;
    background: #333;
    border-radius: 3px;
    margin: 8px auto 0;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iPhone SE - Classic notch style
   ═══════════════════════════════════════════════════════════════════════════ */
.device-iphoneSE .phone-frame {
    border-radius: 45px;
    padding: 10px;
}

.device-iphoneSE .phone-notch {
    display: block;
    width: 140px;
    height: 30px;
    background: #000;
    border-radius: 0 0 18px 18px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.device-iphoneSE .phone-screen {
    border-radius: 35px;
}

.device-iphoneSE .phone-home-indicator {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iPhone 14 - Dynamic Island
   ═══════════════════════════════════════════════════════════════════════════ */
.device-iphone14 .phone-notch {
    display: block;
    width: 95px;
    height: 32px;
    background: #000;
    border-radius: 20px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.3);
}

.device-iphone14 .phone-screen {
    border-radius: 42px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iPhone 14 Pro Max - Larger Dynamic Island
   ═══════════════════════════════════════════════════════════════════════════ */
.device-iphone14ProMax .phone-notch {
    display: block;
    width: 110px;
    height: 35px;
    background: #000;
    border-radius: 22px;
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.3);
}

.device-iphone14ProMax .phone-frame {
    border-radius: 55px;
    padding: 10px;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f0f1a 50%, #050510 100%);
}

.device-iphone14ProMax .phone-screen {
    border-radius: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Android - Punch hole camera
   ═══════════════════════════════════════════════════════════════════════════ */
.device-android .phone-frame {
    border-radius: 35px;
    padding: 8px;
    background: linear-gradient(145deg, #1e1e1e 0%, #121212 100%);
}

.device-android .phone-notch {
    display: block;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 0 2px rgba(30,30,30,0.8);
}

.device-android .phone-screen {
    border-radius: 28px;
}

.device-android .phone-home-indicator {
    width: 100px;
    height: 4px;
    background: #444;
    margin: 6px auto 0;
}

.device-android .phone-status-bar {
    padding-top: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablet - iPad style
   ═══════════════════════════════════════════════════════════════════════════ */
.device-tablet .phone-frame {
    border-radius: 25px;
    padding: 15px;
    background: linear-gradient(145deg, #e0e0e0 0%, #c0c0c0 50%, #a0a0a0 100%);
}

.device-tablet .phone-notch {
    display: block;
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.device-tablet .phone-screen {
    border-radius: 12px;
}

.device-tablet .phone-home-indicator {
    width: 150px;
    height: 5px;
    background: #888;
}

.device-tablet .phone-app-header {
    padding: 16px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Minimized state - Small floating icon
   ═══════════════════════════════════════════════════════════════════════════ */
.phone-preview-modal.phone-preview-minimized {
    width: 60px !important;
    height: 100px !important;
}

.phone-preview-modal.phone-preview-minimized .phone-mockup {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

.phone-preview-modal.phone-preview-minimized .phone-frame {
    border-radius: 12px;
    padding: 4px;
}

.phone-preview-modal.phone-preview-minimized .phone-screen {
    border-radius: 10px;
}

.phone-preview-modal.phone-preview-minimized .phone-notch,
.phone-preview-modal.phone-preview-minimized .phone-status-bar,
.phone-preview-modal.phone-preview-minimized .phone-app-header,
.phone-preview-modal.phone-preview-minimized .phone-home-indicator {
    display: none !important;
}

.phone-preview-modal.phone-preview-minimized .phone-content {
    font-size: 4px !important;
    padding: 2px !important;
}

.phone-screen {
    width: 100%;
    flex: 1;
    min-height: 0; /* Important for nested flex scroll */
    background: #ffffff;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* iOS-style status bar */
.phone-status-bar {
    height: 54px;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 28px 8px 28px;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    position: relative;
    z-index: 5;
}

.phone-time {
    font-weight: 600;
    font-size: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.phone-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.phone-icons .signal-icon {
    width: 18px;
    height: 12px;
}

.phone-icons .battery-icon {
    width: 25px;
    height: 12px;
}

/* App header - like a typical mobile app */
.phone-app-header {
    background: linear-gradient(135deg, var(--primary, #13cfff) 0%, var(--secondary, #003166) 100%);
    padding: 12px 16px;
    color: white;
}

.phone-app-header .app-title {
    font-size: 17px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* Content area - this is where markdown renders */
/* Scoped styles to prevent admin CSS bleed */
.phone-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Important for flex scroll */
    /* scroll-behavior removed for sync scrolling */
    background: #fff !important;
    /* Realistic iOS typography */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.47 !important;
    letter-spacing: -0.022em !important;
    color: #1d1d1f !important;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    text-align: left !important;
    /* Modern thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Phone content scrollbar - iOS style thin scrollbar */
.phone-content::-webkit-scrollbar {
    width: 4px;
}

.phone-content::-webkit-scrollbar-track {
    background: transparent;
}

.phone-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.phone-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.phone-content h1 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px 0 !important;
    padding: 10px 12px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--secondary, #003166) 0%, #004a99 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    text-align: left !important;
    text-transform: none !important;
}

.phone-content h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 16px 0 10px 0 !important;
    padding: 8px 12px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--secondary, #003166) 0%, #004a99 100%) !important;
    border: none !important;
    border-radius: 6px !important;
    text-align: left !important;
    text-transform: none !important;
}

.phone-content h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 14px 0 8px 0 !important;
    padding: 6px 10px !important;
    color: #1d1d1f !important;
    background: #f0f0f5 !important;
    border: none !important;
    border-left: 3px solid var(--secondary, #003166) !important;
    border-radius: 0 4px 4px 0 !important;
    text-align: left !important;
}

.phone-content p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    color: #1d1d1f !important;
    background: none !important;
    text-align: left !important;
}

.phone-content ul,
.phone-content ol {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 0 20px !important;
    color: #1d1d1f !important;
    background: none !important;
    list-style-position: outside !important;
}

.phone-content ul {
    list-style-type: disc !important;
}

.phone-content ol {
    list-style-type: decimal !important;
}

.phone-content li {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    color: #1d1d1f !important;
    background: none !important;
    display: list-item !important;
}

.phone-content code {
    font-family: "SF Mono", Monaco, Consolas, monospace !important;
    font-size: 13px !important;
    background: #f5f5f7 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    color: #1d1d1f !important;
}

.phone-content pre {
    font-family: "SF Mono", Monaco, Consolas, monospace !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    background: #f5f5f7 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 0 0 12px 0 !important;
    color: #1d1d1f !important;
}

.phone-content pre code {
    background: none !important;
    padding: 0 !important;
}

.phone-content blockquote {
    border-left: 3px solid var(--primary, #13cfff) !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 0 12px !important;
    color: #6e6e73 !important;
    font-style: italic !important;
    font-size: 15px !important;
    background: none !important;
}

.phone-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    display: block !important;
}

.phone-content hr {
    border: none !important;
    border-top: 1px solid #d2d2d7 !important;
    margin: 16px 0 !important;
    padding: 0 !important;
    background: none !important;
    height: 0 !important;
    clear: none !important;
}

.phone-content a {
    color: #0066cc !important;
    text-decoration: none !important;
}

.phone-content strong {
    font-weight: 600 !important;
    color: inherit !important;
}

.phone-content em {
    font-style: italic !important;
    color: inherit !important;
}

.phone-content del {
    text-decoration: line-through !important;
    color: #86868b !important;
}

.phone-placeholder {
    color: #86868b !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 40px 16px !important;
    font-size: 14px !important;
}

/* Home indicator bar (iPhone style) */
.phone-frame::after {
    content: '';
    width: 120px;
    height: 5px;
    background: #000;
    border-radius: 3px;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Table & Form Dark Mode Support
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] thead th {
    background: var(--table-header-bg);
    color: #e0e0e0;
}

html[data-theme="dark"] thead th a:link,
html[data-theme="dark"] thead th a:visited {
    color: #e0e0e0;
}

html[data-theme="dark"] thead th.sorted {
    background: #1e3248;
}

html[data-theme="dark"] table thead th .text a:focus,
html[data-theme="dark"] table thead th .text a:hover {
    background: #1e3248;
}

html[data-theme="dark"] .form-row {
    background: var(--form-row-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EasyMDE Dark Mode Support
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .EasyMDEContainer .CodeMirror {
    background: var(--body-bg);
    color: var(--body-fg);
    border-color: var(--border-color);
}

/* Dark mode cursor - make it visible */
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor {
    border-left-color: #fff !important;
    border-left-width: 2px;
}

/* Dark mode active line background */
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-activeline-background {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Dark mode selected text */
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-selected {
    background: rgba(100, 150, 255, 0.3) !important;
}

/* Dark mode matching brackets */
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-matchingbracket {
    color: #0f0 !important;
    background: rgba(0, 255, 0, 0.2);
}

/* Dark mode gutter (line numbers area) */
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-gutters {
    background: var(--darkened-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .EasyMDEContainer .CodeMirror-linenumber {
    color: var(--body-quiet-color);
}

html[data-theme="dark"] .EasyMDEContainer .editor-toolbar {
    background: var(--darkened-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .EasyMDEContainer .editor-toolbar button {
    color: var(--body-fg) !important;
}

html[data-theme="dark"] .EasyMDEContainer .editor-toolbar button:hover,
html[data-theme="dark"] .EasyMDEContainer .editor-toolbar button.active {
    background: var(--primary);
    color: var(--primary-fg) !important;
}

html[data-theme="dark"] .EasyMDEContainer .editor-statusbar {
    background: var(--darkened-bg);
    border-color: var(--border-color);
    color: var(--body-quiet-color);
}

/* Dark mode phone mockup */
html[data-theme="dark"] .phone-frame {
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 50%, #000 100%);
}

html[data-theme="dark"] .phone-screen {
    background: #1c1c1e;
}

html[data-theme="dark"] .phone-status-bar {
    color: #fff;
}

html[data-theme="dark"] .phone-icons svg {
    fill: #fff;
}

html[data-theme="dark"] .phone-content {
    background: #1c1c1e !important;
    color: #f5f5f7 !important;
}

html[data-theme="dark"] .phone-content h1,
html[data-theme="dark"] .phone-content h2 {
    color: #fff !important;
    background: linear-gradient(135deg, #0a84ff 0%, #0066cc 100%) !important;
}

html[data-theme="dark"] .phone-content h3 {
    color: #f5f5f7 !important;
    background: #2c2c2e !important;
    border-left-color: #0a84ff !important;
}

html[data-theme="dark"] .phone-content p,
html[data-theme="dark"] .phone-content li {
    color: #f5f5f7 !important;
}

html[data-theme="dark"] .phone-content ul,
html[data-theme="dark"] .phone-content ol {
    color: #f5f5f7 !important;
}

html[data-theme="dark"] .phone-content code {
    background: #2c2c2e !important;
    color: #f5f5f7 !important;
}

html[data-theme="dark"] .phone-content pre {
    background: #2c2c2e !important;
    color: #f5f5f7 !important;
}

html[data-theme="dark"] .phone-content blockquote {
    color: #98989d !important;
}

html[data-theme="dark"] .phone-content hr {
    border-color: #38383a !important;
}

html[data-theme="dark"] .phone-content a {
    color: #0a84ff !important;
}

html[data-theme="dark"] .phone-placeholder {
    color: #636366 !important;
}

/* Dark mode phone preview header */
html[data-theme="dark"] .phone-preview-header {
    background: var(--darkened-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .phone-preview-title {
    color: var(--body-quiet-color);
}

html[data-theme="dark"] .phone-preview-toggle {
    background: var(--body-bg);
    color: var(--body-quiet-color);
}

/* Dark mode modal */
html[data-theme="dark"] .phone-preview-modal {
    background: var(--body-bg);
}

html[data-theme="dark"] .phone-preview-modal-header {
    background: var(--darkened-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .phone-preview-modal-header h3 {
    color: var(--body-fg);
}

html[data-theme="dark"] .phone-preview-modal-close {
    background: var(--body-bg);
    color: var(--body-quiet-color);
}

html[data-theme="dark"] .phone-preview-modal-close:hover {
    background: var(--error-fg);
    color: #fff;
}

html[data-theme="dark"] .easymde-phone-preview-btn {
    color: var(--body-quiet-color) !important;
}

html[data-theme="dark"] .easymde-phone-preview-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Dark mode - EasyMDE preview toolbar */
html[data-theme="dark"] .easymde-preview-toolbar .separator {
    background: var(--border-color);
}

html[data-theme="dark"] .easymde-preview-toolbar button {
    color: var(--body-quiet-color);
}

html[data-theme="dark"] .easymde-preview-toolbar button:hover,
html[data-theme="dark"] .easymde-preview-toolbar button.active {
    background: var(--primary);
    color: #fff;
}

html[data-theme="dark"] .easymde-device-select,
html[data-theme="dark"] .easymde-zoom-select {
    background: var(--body-bg);
    border-color: var(--border-color);
    color: var(--body-fg);
}

html[data-theme="dark"] .easymde-opacity-wrapper {
    color: var(--body-quiet-color);
}

html[data-theme="dark"] .easymde-opacity-slider {
    background: var(--border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Image Resize Dialog
   ═══════════════════════════════════════════════════════════════════════════ */

.image-resize-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.image-resize-dialog {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: dialogFadeIn 0.2s ease-out;
}

@keyframes dialogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.image-resize-dialog h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary, #003166);
}

.image-preview-container {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    text-align: center;
    max-height: 200px;
    overflow: hidden;
}

.image-preview {
    max-width: 100%;
    max-height: 180px;
    border-radius: 4px;
    object-fit: contain;
}

.image-resize-form .form-row {
    margin-bottom: 14px;
}

.image-resize-form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.image-resize-form input[type="number"],
.image-resize-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.image-resize-form input[type="number"]:focus,
.image-resize-form input[type="text"]:focus {
    border-color: var(--primary, #13cfff);
    outline: none;
}

.image-resize-form input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
}

.image-resize-form label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
}

.dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.dialog-buttons button {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.dialog-buttons .btn-cancel {
    background: #f0f0f0;
    color: #666;
}

.dialog-buttons .btn-cancel:hover {
    background: #e0e0e0;
}

.dialog-buttons .btn-insert {
    background: var(--secondary, #003166);
    color: #fff;
}

.dialog-buttons .btn-insert:hover {
    background: var(--primary, #13cfff);
    color: var(--secondary, #003166);
}

/* Dark mode dialog */
html[data-theme="dark"] .image-resize-dialog {
    background: #2c2c2e;
}

html[data-theme="dark"] .image-resize-dialog h3 {
    color: var(--primary, #13cfff);
}

html[data-theme="dark"] .image-preview-container {
    background: #1c1c1e;
}

html[data-theme="dark"] .image-resize-form label {
    color: #f5f5f7;
}

html[data-theme="dark"] .image-resize-form input[type="number"],
html[data-theme="dark"] .image-resize-form input[type="text"] {
    background: #1c1c1e;
    border-color: #3c3c3e;
    color: #f5f5f7;
}

html[data-theme="dark"] .dialog-buttons {
    border-color: #3c3c3e;
}

html[data-theme="dark"] .dialog-buttons .btn-cancel {
    background: #3c3c3e;
    color: #f5f5f7;
}

html[data-theme="dark"] .dialog-buttons .btn-cancel:hover {
    background: #4c4c4e;
}