/* styles/print-settings.css
   Page-specific styles for print-settings.html
   Goal: match app.css look & feel, keep preview/controls responsive.
*/

/* Page title */
.ps-title{
  margin:0;
  font-size:20px;
  font-weight:800;
}

/* Two-column layout */
.ps-grid{
  display:grid;
  grid-template-columns: minmax(320px, 33%) 1fr;
  gap:16px;
  align-items:start;
}

/* Controls column */
.ps-controls .ps-label{
  display:block;
  margin:0 0 10px;
  font-weight:700;
}
.ps-controls .ps-hint,
.ps-controls .ps-hint small,
.ps-controls small.ps-hint{
  display:block;
  color: var(--muted);
  font-size:12px;
  margin:6px 0 12px;
}
.ps-controls input[type="file"]{
  display:none;
}
/* Editor */
.ps-editor-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin:8px 0 8px;
}

/* Toolbar buttons: make them neutral/grey in light theme, consistent with app styles */
.ps-editor-toolbar .btn.btn-small,
.ps-footer-toolbar .btn.btn-small{
  min-height:36px;
  padding:6px 10px;
  border-radius:12px;
  line-height:1;
  border:1px solid var(--line);
}

/* Light theme: grey buttons (avoid "black pills") */
html[data-theme="white"] .ps-editor-toolbar .btn.btn-small,
html[data-theme="white"] .ps-footer-toolbar .btn.btn-small{
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

html[data-theme="white"] .ps-editor-toolbar .btn.btn-small:hover,
html[data-theme="white"] .ps-footer-toolbar .btn.btn-small:hover{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

html[data-theme="white"] .ps-editor-toolbar .btn.btn-small:active,
html[data-theme="white"] .ps-footer-toolbar .btn.btn-small:active{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* Dark theme: keep contrast but still "soft" */
html[data-theme="black"] .ps-editor-toolbar .btn.btn-small,
html[data-theme="black"] .ps-footer-toolbar .btn.btn-small{
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
}

html[data-theme="black"] .ps-editor-toolbar .btn.btn-small:hover,
html[data-theme="black"] .ps-footer-toolbar .btn.btn-small:hover{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

html[data-theme="black"] .ps-editor-toolbar .btn.btn-small:active,
html[data-theme="black"] .ps-footer-toolbar .btn.btn-small:active{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.ps-editor{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  min-height:120px;
  background: var(--tile);
  color: var(--ink);
  outline:none;
}
.ps-editor:empty:before{
  content:"Введите текст для печати…";
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
html[data-theme="black"] .ps-editor:empty:before{
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* Preview area */
.ps-preview h2{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
}
.ps-preview-box{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  overflow-y:auto;
  overflow-x:hidden;
}

/* In dark theme make “desk” slightly darker */
html[data-theme="black"] .ps-preview-box{
  background: color-mix(in srgb, #000 30%, var(--panel));
}

/* Preview scaling */
.ps-preview-scale{
  /* Responsive preview: the sheet itself becomes fluid. */
  max-width: 794px;
  margin: 0 auto;
}

/* The A4 sheet (fluid, keeps A-series ratio) */
.ps-preview-scale .mgr-print{
  width: 100%;
  max-width: 794px;        /* A4 ~ 210mm */
  aspect-ratio: 210 / 297; /* A-series: 1 : √2 */
  height: auto;
  background:#fff;
  color:#000;
  padding:32px;
  box-sizing:border-box;
  box-shadow:0 0 14px rgba(0,0,0,.25);
  border-radius:6px;
}


/* Show print template only in preview */
.ps-preview-scale .mgr-print{
  display:block !important;
}

/* Prevent site header styles from affecting print header in preview */
.ps-preview-scale .mgr-print__header{
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Logo */
.ps-preview-scale .mgr-print__logo-wrap{
  margin-bottom:16px;
  background: transparent;
}
.ps-preview-scale .mgr-print__logo-wrap img{
  display:inline-block;
  max-height:90px;
  max-width:240px;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* Promo and footer spacing */
#ps-preview-promo{
  margin:16px 0;
  font-size:14px;
  line-height:1.4;
}
#ps-preview-footer{
  margin-top:18px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,0.12);
  font-size:13px;
  line-height:1.35;
  opacity:.9;
}

/* Responsive: stack columns, controls first */
@media (max-width:980px){
  .ps-grid{
    grid-template-columns: 1fr;
  }
  .ps-select{max-width:100%;}
  .ps-preview-box{padding:10px;}
  .ps-preview-scale .mgr-print{padding:18px;}
}
}

/* === Pseudo select (font family) === */
.ps-field{margin:0 0 12px;}
.ps-select{position:relative; max-width:260px;}
.ps-native-select{display:none;}
.ps-select-trigger{
  width:100%;
  min-height:36px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background: var(--tile);
  color: var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  user-select:none;
}
html[data-theme="white"] .ps-select-trigger{
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
html[data-theme="white"] .ps-select-trigger:hover{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-theme="white"] .ps-select-trigger:active{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
html[data-theme="black"] .ps-select-trigger{
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
html[data-theme="black"] .ps-select-trigger:hover{
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
html[data-theme="black"] .ps-select-trigger:active{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.ps-select-value{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ps-select-arrow{opacity:.8}

.ps-select-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  border:1px solid var(--line);
  border-radius:12px;
  background: var(--panel);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  padding:6px;
  max-height:260px;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:50;
}
.ps-select-item{
  width:100%;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  border:0;
  background: transparent;
  color: var(--ink);
  cursor:pointer;
  text-align:left;
}
.ps-select-item:hover{
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ps-select-item[aria-selected="true"]{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* === Step: light-theme save button should match grey UI (page-scoped, no global overrides) === */
html[data-theme="white"] #ps-save.btn{
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="white"] #ps-save.btn:hover{
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
html[data-theme="white"] #ps-save.btn:active{
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

/* File input (logo) - custom button */
.ps-file{
  margin: 0 0 10px;
}
.ps-file-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ps-file-btn{
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  border-radius:14px;
  background: var(--tile);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor:pointer;
  user-select:none;
  font-size:14px;
}
.ps-file-btn:hover{
  background: color-mix(in srgb, var(--ink) 6%, var(--tile));
}
.ps-file-btn:active{
  transform: translateY(0.5px);
}
.ps-file-name{
  color: var(--muted);
  font-size:14px;
}
.ps-file input[type="file"]{ display:none; }



/* === Font size sliders (compact, left-aligned) === */
.ps-font-sizes{
  margin: 12px 0 10px;
}

.ps-range-label{
  display:block;
  margin: 0 0 10px;
  font-weight: 700;
}

.ps-range-title{
  display:block;
  margin: 0 0 4px;
  font-weight: 700;
}

.ps-range{
  display:block;
  width: 260px;
  max-width: 100%;
  margin: 0;
}

.ps-actions{
  text-align: right;
  margin-top: 6px;
}