/* Desk PMU – układ pulpitu, pasek zadań, Eksplorator, kreator, mobile (dokument designu, sekcje 2, 6, 7) */
:root {
  --desktop: #008080;
  --surface: #c0c0c0;
  --field: #ffffff;
  --error: #800000;
  --internal-note: #ffffe1;
  --accent: #008000;
  --taskbar-h: 30px;
}
html, body { height: 100%; }
body.desktop {
  margin: 0;
  background: var(--desktop);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 11px;
  line-height: 1.4;
}
body.readable, body.readable button, body.readable input, body.readable select, body.readable textarea, body.readable .title-bar-text, body.readable .status-bar-field {
  font-family: system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 14px;
}
a { color: #000080; }
.icon { vertical-align: -3px; image-rendering: pixelated; }
.inline-form { display: inline; margin: 0; }

/* Okno główne – zmaksymalizowane w ramce pulpitu */
.main-window {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 8px 8px calc(var(--taskbar-h) + 8px);
  min-height: 0;
}
.main-window > .window-body { flex: 1 1 auto; display: flex; min-height: 0; margin: 0; padding: 4px; }
.title-bar-controls form { margin: 0; }
.title-bar-controls .close-btn, .title-bar-controls button { font-family: inherit; }

/* Pasek menu (CSS-only, :focus-within) */
.menu-bar { display: flex; gap: 2px; padding: 2px 4px; border-bottom: 1px solid #808080; box-shadow: 0 1px 0 #fff; }
.menu-item { position: relative; padding: 1px 6px; cursor: default; }
.menu-item:hover, .menu-item:focus-within { background: #000080; color: #fff; }
.menu-item span::first-letter { text-decoration: underline; }
.menu-dropdown {
  display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 160px; margin: 0; padding: 2px; list-style: none;
  background: var(--surface); color: #000;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
}
.menu-item:focus-within .menu-dropdown, .menu-item:hover .menu-dropdown { display: block; }
.menu-dropdown li a, .menu-dropdown li button { display: block; width: 100%; text-align: left; padding: 3px 20px; color: #000; text-decoration: none; background: none; border: 0; box-shadow: none; min-width: 0; min-height: 0; font: inherit; }
.menu-dropdown li a:hover, .menu-dropdown li button:hover { background: #000080; color: #fff; }

/* Eksplorator: drzewo + treść */
.explorer { gap: 4px; }
.tree-panel { width: 220px; flex: 0 0 220px; overflow: auto; background: var(--field); padding: 4px; }
.tree-view { margin: 0; }
.tree-view li.active > a { background: #000080; color: #fff; }
.tree-view a { color: inherit; text-decoration: none; padding: 0 2px; }
.tree-view .count { color: #808080; }
.content-panel { flex: 1 1 auto; overflow: auto; padding: 4px 8px; min-width: 0; }

/* Pasek narzędzi */
.toolbar { display: flex; gap: 2px; padding: 2px 0 6px; border-bottom: 1px solid #808080; box-shadow: 0 1px 0 #fff; margin-bottom: 8px; }
.toolbar .tool { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 4px 6px; color: #000; text-decoration: none; border: 1px solid transparent; }
.toolbar .tool:hover { box-shadow: inset -1px -1px grey, inset 1px 1px #fff; }
.toolbar .tool:active { box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }

/* Listy */
.list-panel { background: var(--field); overflow: auto; }
table.list { width: 100%; border-collapse: collapse; }
table.list th { position: sticky; top: 0; background: var(--surface); text-align: left; padding: 2px 6px; box-shadow: inset -1px -1px grey, inset 1px 1px #fff; }
table.list td { padding: 2px 6px; vertical-align: top; white-space: nowrap; }
table.list td.empty { white-space: normal; color: #808080; padding: 12px; }
table.list tbody tr:hover { background: #e8e8e8; }
table.list td.actions form { display: inline; margin: 0 2px 0 0; }
table.kv th { text-align: left; padding: 2px 12px 2px 0; font-weight: normal; color: #444; }

/* Formularze */
.form-stack { display: flex; flex-direction: column; gap: 8px; }
.form-stack.narrow { max-width: 460px; }
.field-row-stacked input[type=text], .field-row-stacked input[type=email], .field-row-stacked input[type=password], .field-row-stacked select, .field-row-stacked textarea { width: 100%; box-sizing: border-box; }
.button-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.button-row form { margin: 0; }
.button-link { text-decoration: none; }
.hint { color: #444; margin: 2px 0; }
.filter-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
fieldset { margin: 0; }

/* Komunikaty */
.flash { display: flex; gap: 6px; align-items: flex-start; padding: 6px; margin-bottom: 8px; border: 1px solid #808080; background: var(--field); }
.flash-error { color: var(--error); }
.flash-success { color: var(--accent); }
.msgbox { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; }
.msgbox h3 { margin: 0 0 6px; }
.codes { font-family: monospace; font-size: 14px; padding: 8px; background: var(--field); }

/* Zakładki */
.tabs { margin-bottom: -1px; }
.tab-panel { max-width: 760px; }

/* Panel sterowania – siatka ikon */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cp-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; text-align: center; color: #000; text-decoration: none; border: 1px dotted transparent; }
.cp-icon:hover { border-color: #000; }
.cp-icon.disabled { color: #808080; }
.cp-icon small { color: #555; }

/* TOTP */
.enroll-grid { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: start; }
.qr { width: 164px; height: 164px; background: #fff; padding: 6px; image-rendering: pixelated; }
.qr svg { width: 100%; height: 100%; }
.secret { font-size: 12px; letter-spacing: 1px; }

/* Pasek stanu */
.status-bar { margin: 0; }
.status-clock { flex: 0 0 auto; }

/* Pasek zadań */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 30;
  display: flex; align-items: center; gap: 3px; padding: 2px 4px; box-sizing: border-box;
  background: var(--surface); border-top: 1px solid #fff; box-shadow: 0 -1px 0 #808080;
}
.task-btn {
  display: inline-flex; align-items: center; gap: 5px; min-width: 100px; height: 22px; padding: 0 8px; color: #000; text-decoration: none;
  background: var(--surface); box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.task-btn.start { font-weight: bold; min-width: 0; }
.task-btn.pressed { background: #e5e5e5; box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; font-weight: bold; }
.taskbar-sep { width: 2px; height: 20px; border-left: 1px solid #808080; border-right: 1px solid #fff; margin: 0 3px; }
.taskbar-spacer { flex: 1; }
.taskbar-tray { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; box-shadow: inset 1px 1px grey, inset -1px -1px #fff; }

/* Dialog bez logowania */
.desktop-dialog { justify-content: center; }
.dialog-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 8px calc(var(--taskbar-h) + 16px); }
.dialog { width: 100%; }
.dialog .window-body { padding: 10px; }
.close-link { color: #000; text-decoration: none; background: var(--surface); width: 16px; height: 14px; display: inline-flex; align-items: center; justify-content: center; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; font-weight: bold; line-height: 1; }

/* Druk kodów zapasowych */
@media print { .taskbar, .menu-bar, .tree-panel, .title-bar, .status-bar, .button-row { display: none !important; } body.desktop { background: #fff; } }

/* Tablet / telefon – sekcja 7 dokumentu designu */
@media (max-width: 767px), (pointer: coarse) {
  body.desktop { font-size: 14px; font-family: system-ui, "Segoe UI", Arial, sans-serif; }
  button, input, select, textarea, .title-bar-text, .status-bar-field { font-family: system-ui, "Segoe UI", Arial, sans-serif !important; font-size: 14px; }
  .main-window { margin: 0 0 var(--taskbar-h); }
  .main-window > .window-body { flex-direction: column; }
  .menu-bar { display: none; }
  .tree-panel { width: auto; flex: 0 0 auto; max-height: 160px; }
  button, .task-btn, .toolbar .tool { min-height: 44px; }
  input[type=text], input[type=email], input[type=password], select { min-height: 40px; font-size: 16px; }
  table.list td { white-space: normal; }
  .status-bar { display: none; }
  .enroll-grid { grid-template-columns: 1fr; }
  .taskbar { height: 48px; }
  .task-btn { height: 40px; flex: 1; justify-content: center; }
  .taskbar-tray { display: none; }
  .tabs li { padding: 8px 12px; }
}

/* Wysoki kontrast */
@media (prefers-contrast: more) {
  :root { --desktop: #000; --field: #fff; }
  .flash { border-width: 2px; }
}

/* Link wyglądający jak przycisk (zamiast <a><button>) */
a.btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 75px; min-height: 23px; padding: 0 12px;
  color: #000; text-decoration: none; background: var(--surface); border: none;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
a.btn:active { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; }
a.btn.default { box-shadow: inset -2px -2px #0a0a0a, inset 2px 2px #fff, inset -3px -3px grey, inset 3px 3px #dfdfdf, 0 0 0 1px #000; }
a.btn:focus { outline: 1px dotted #000; outline-offset: -4px; }
.sla-table input[type=text] { width: auto; }