/* ==========================================================================
IteMod — Layout & editor styles
========================================================================== */
body:has(.modifier-panels){
display:flex;
flex-direction:column;
min-height:100vh;
}

#itemod-editor{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
}

.modifier-right .btn--export{
padding:2px 10px;
font-size:0.72rem;
}

.modifier-right .export-controls__label{
font-size:0.72rem;
}

/* --------------------------------------------------------------------------
Sheet controls
-------------------------------------------------------------------------- */
.sheet-controls{
padding:4px 10px;
gap:4px 8px;
border-bottom:1px solid var(--color-border);
margin-bottom:8px;
display:flex;
flex-wrap:wrap;
}

.sheet-controls__row{
display:contents;
}

.sheet-controls__pair{
display:flex;
align-items:center;
gap:4px;
}

.sheet-controls__label{
font-size:0.75rem;
color:var(--color-muted);
font-weight:bold;
white-space:nowrap;
}

.sheet-controls__select{
padding:2px 6px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.78rem;
}

.sheet-controls__zoom-group{
display:flex;
gap:2px;
}

.sheet-controls__zoom-btn,
.sheet-controls__zoom-level{
padding:2px 6px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
cursor:pointer;
font-size:0.78rem;
font-family:var(--font-body);
}

.sheet-controls__zoom-btn:hover,
.sheet-controls__zoom-level:hover{
background:var(--color-border);
}

.sheet-controls__dim-input{
width:50px;
padding:2px 4px;
border:1px solid var(--color-border);
border-radius:0;
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.72rem;
text-align:center;
-moz-appearance:textfield;
}

.sheet-controls__dim-input::-webkit-inner-spin-button,
.sheet-controls__dim-input::-webkit-outer-spin-button{
-webkit-appearance:none;
margin:0;
}

/* --------------------------------------------------------------------------
Preview viewport
-------------------------------------------------------------------------- */
.preview-viewport{
flex:1;
overflow:auto;
display:flex;
align-items:flex-start;
justify-content:center;
padding:24px;
}

#itemod-card-container{
transform-origin:top center;
}

/* --------------------------------------------------------------------------
Random button group + settings popover
-------------------------------------------------------------------------- */
.itemod-random-group{
display:flex;
flex:1;
}

.itemod-random-group__main{
flex:1;
border-top-right-radius:0;
border-bottom-right-radius:0;
}

.itemod-random-group__gear{
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left:none;
padding:6px 8px;
font-size:0.75rem;
}

.random-settings-popover{
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:0 4px 16px rgba(0,0,0,0.2);
padding:10px 12px;
width:320px;
}

.random-settings-popover__title{
font-size:0.72rem;
font-weight:700;
color:var(--color-primary);
text-transform:uppercase;
letter-spacing:0.03em;
margin-bottom:8px;
}

.random-settings-popover__field{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:6px;
font-size:0.78rem;
color:var(--color-text);
}

.random-settings-popover__field > span{
font-weight:600;
color:var(--color-muted);
flex-shrink:0;
}

.random-settings-popover__field .mod-dropdown{
flex:1;
min-width:0;
}

.random-settings-popover__field select{
flex:1;
padding:3px 6px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-text);
font-family:var(--font-body);
font-size:0.75rem;
}

/* --------------------------------------------------------------------------
Editor fields (matches Mon Mod builder-identity styling)
-------------------------------------------------------------------------- */
.itemod-field-row{
display:flex;
gap:8px;
}

.itemod-field-row > .itemod-field{
flex:1;
min-width:0;
}

.itemod-field-row--image{
align-items:center;
}

.itemod-field{
display:block;
margin-bottom:10px;
}

.itemod-field--disabled{
opacity:0.35;
pointer-events:none;
}

.itemod-field__header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:2px;
}

.itemod-field__header .itemod-field__label{
margin-bottom:0;
}

.itemod-richtext-toolbar{
display:flex;
align-items:center;
gap:1px;
}

.itemod-richtext-toolbar__btn{
padding:1px 5px;
border:1px solid var(--color-border);
border-radius:var(--radius);
background:var(--color-input-bg);
color:var(--color-muted);
font-size:0.7rem;
cursor:pointer;
line-height:1.2;
font-family:var(--font-body);
}

.itemod-richtext-toolbar__btn:hover{
color:var(--color-text);
border-color:var(--color-primary);
}

.itemod-richtext-toolbar__sep{
width:1px;
height:14px;
background:var(--color-border);
margin:0 3px;
}

.itemod-field--checkbox{
display:flex;
align-items:center;
gap:8px;
}

.itemod-field__label{
display:block;
font-size:0.78rem;
font-weight:700;
color:var(--color-primary);
margin-top:4px;
margin-bottom:2px;
text-transform:uppercase;
letter-spacing:0.03em;
}

.itemod-field__input,
.itemod-field__select{
display:block;
width:100%;
padding:4px 6px;
font-family:var(--font-body);
font-size:0.78rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-sizing:border-box;
}

.itemod-field__select{
cursor:pointer;
}

.itemod-field__input:focus,
.itemod-field__select:focus{
outline:none;
border-color:var(--color-secondary);
box-shadow:0 0 0 2px rgba(190,91,32,0.15);
}

.itemod-richtext{
display:block;
width:100%;
min-height:80px;
padding:4px 6px;
font-family:var(--font-body);
font-size:0.78rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
line-height:1.5;
overflow-y:auto;
box-sizing:border-box;
}

.itemod-richtext:focus{
outline:none;
border-color:var(--color-secondary);
box-shadow:0 0 0 2px rgba(190,91,32,0.15);
}

.itemod-richtext:empty::before{
content:attr(data-placeholder);
color:var(--color-muted);
pointer-events:none;
}

/* --------------------------------------------------------------------------
DM notice
-------------------------------------------------------------------------- */
.itemod-section-label{
font-size:0.72rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.04em;
color:var(--color-muted);
border-top:1px solid var(--color-border);
padding-top:8px;
margin:12px 0 8px;
}

.itemod-dm-notice{
font-style:italic;
color:var(--color-muted);
padding:6px 8px;
border:1px dashed var(--color-border);
border-radius:var(--radius);
background:var(--color-stat-bg);
font-size:0.78rem;
margin-bottom:10px;
}

/* --------------------------------------------------------------------------
My Items modal rows
-------------------------------------------------------------------------- */
.mi-row-wrapper{
border-bottom:1px solid var(--color-border);
position:relative;
}

.mi-row-wrapper.is-expanded{
background:var(--color-input-bg);
}

.mi-row{
display:flex;
align-items:center;
padding:6px 12px;
gap:8px;
cursor:pointer;
transition:background 0.1s;
font-size:0.85rem;
}

.mi-row:hover{
background:var(--color-input-bg);
}

.mi-row__dot{
display:inline-block;
width:8px;
height:8px;
border-radius:50%;
flex-shrink:0;
}

.mi-row__name{
flex:1;
font-weight:600;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:var(--color-text);
}

.mi-row__rarity{
width:80px;
font-size:0.75rem;
color:var(--color-muted);
white-space:nowrap;
flex-shrink:0;
overflow:hidden;
text-overflow:ellipsis;
}

.mi-row__type{
width:160px;
font-size:0.75rem;
color:var(--color-muted);
white-space:nowrap;
flex-shrink:0;
overflow:hidden;
text-overflow:ellipsis;
}

.mi-sort-header{
display:flex;
padding:4px 12px;
gap:8px;
border-bottom:1px solid var(--color-border);
font-size:0.7rem;
font-weight:600;
color:var(--color-muted);
text-transform:uppercase;
letter-spacing:0.03em;
position:sticky;
top:0;
background:var(--color-card);
z-index:1;
}

.mi-sort-header__col{
cursor:pointer;
user-select:none;
padding:4px 0;
}

.mi-sort-header__col:hover{
color:var(--color-text);
}

.mi-sort-header__col--name{
flex:1;
padding-left:16px;
}

.mi-sort-header__col--meta{
width:80px;
}

.mi-sort-header__col--type{
width:160px;
}

.mi-sort-header__col--btn{
width:28px;
cursor:default;
}

.mi-row__menu-anchor{
position:relative;
flex-shrink:0;
}

.mi-row__menu-btn{
width:28px;
padding:2px 4px;
font-size:1rem;
line-height:1;
background:none;
border:1px solid transparent;
border-radius:var(--radius);
color:var(--color-muted);
cursor:pointer;
}

.mi-row__menu-btn:hover{
color:var(--color-text);
border-color:var(--color-border);
}

.mi-row__menu{
position:absolute;
right:0;
top:100%;
z-index:20;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:0 4px 12px rgba(0,0,0,0.15);
min-width:120px;
padding:4px 0;
}

.mi-row__menu[hidden]{
display:none;
}

.mi-row__menu button{
display:block;
width:100%;
padding:6px 12px;
text-align:left;
background:none;
border:none;
color:var(--color-text);
font-size:0.78rem;
font-family:var(--font-body);
cursor:pointer;
}

.mi-row__menu button:hover{
background:var(--color-input-bg);
}

.mi-row__menu-danger{
color:#c44 !important;
}

.mi-row__menu-danger:hover{
background:rgba(204,68,68,0.08) !important;
}

.mi-detail{
padding:6px 12px 10px 30px;
font-size:0.78rem;
color:var(--color-text);
line-height:1.5;
}

.mi-detail__props{
color:var(--color-muted);
font-size:0.72rem;
margin-bottom:4px;
}

.mi-detail__text{
margin-bottom:4px;
}

.mi-detail__source{
font-size:0.68rem;
color:var(--color-muted);
font-style:italic;
margin-top:4px;
}

/* --------------------------------------------------------------------------
Popover (inline editing on card preview)
-------------------------------------------------------------------------- */
.itemod-popover{
position:absolute;
z-index:100;
background:var(--color-card);
border:1px solid var(--color-border);
border-radius:var(--radius);
box-shadow:0 4px 16px rgba(0,0,0,0.15);
padding:6px;
}

.itemod-popover__input{
min-width:200px;
padding:4px 6px;
font-family:var(--font-body);
font-size:0.78rem;
color:var(--color-text);
background:var(--color-input-bg);
border:1px solid var(--color-border);
border-radius:var(--radius);
}

.itemod-popover__input:focus{
outline:none;
border-color:var(--color-secondary);
box-shadow:0 0 0 2px rgba(190,91,32,0.15);
}

/* --------------------------------------------------------------------------
Version display
-------------------------------------------------------------------------- */
.app-version--mobile{
display:none;
}

/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width:900px){
.modifier-panels{
flex-direction:column;
}

.modifier-left{
min-width:0;
max-height:50vh;
}

}

@media (max-width:600px){
.modifier-toolbar__actions{
flex-wrap:wrap;
}

.modifier-toolbar .help-box{
display:none;
}

}