:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#24282b;background:#f6f7f8;font-size:14px;font-synthesis:none}*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}main{max-width:960px;margin:0 auto;padding:32px 28px 80px}button,input,select{outline-offset:3px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #697780}input{width:100%;min-width:0;height:44px;border:1px solid #dfe2e5;border-radius:6px;background:#fff;color:inherit;padding:10px 12px}label{display:block;font-size:12px;color:#656c72;margin:18px 0 7px}.icon-button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:1px solid transparent;border-radius:6px;color:#737b82;padding:0}.icon-button:hover{background:#e9ecee;color:#24282b}.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.add-button{background:#303a41;color:#fff}.add-button:hover{background:#17232b;color:#fff}.button{height:43px;border:1px solid transparent;border-radius:6px;padding:0 17px;font-size:13px}.primary{background:#303a41;color:white}.primary:hover{background:#17232b}.auth{width:100%;max-width:320px;margin:clamp(45px,15vh,140px) auto 0}.auth-tabs{display:flex;border-bottom:1px solid #dfe2e5;gap:25px;margin-bottom:25px}.auth-tabs button{border:0;border-bottom:2px solid transparent;background:none;color:#8b9197;padding:10px 0;font-size:13px;margin-bottom:-1px}.auth-tabs .active{color:#24282b;border-bottom-color:#303a41}.auth-submit{width:100%;margin-top:25px}.password-wrap{position:relative}.password-wrap input{padding-right:48px}.password-wrap .icon-button{position:absolute;right:2px;top:2px}.field-note{font-size:11px;color:#858c92;margin:10px 0}.toolbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:28px;min-height:40px}.username{font-size:12px;color:#8b9197;max-width:200px;overflow:hidden;text-overflow:ellipsis}.searchbar{display:flex;gap:10px;align-items:center}.search-wrap{display:flex;align-items:center;background:#fff;border:1px solid #dfe2e5;border-radius:7px;flex:1;min-width:0;padding:0 5px 0 14px}.search-wrap:focus-within{outline:2px solid #bac4ca;outline-offset:1px}.search-wrap input{border:0;background:transparent;outline:none;height:48px;padding:10px 12px}.search-wrap input:focus-visible{outline:none}.search-wrap input::-webkit-search-cancel-button{display:none}#search-icon{display:flex;color:#91999f}#search-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.searchbar>.add-button{width:48px;height:48px}.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px;padding:0 2px}.count{font-size:11px;color:#969da2;font-variant-numeric:tabular-nums}select{border:0;background:transparent;color:#858d93;font-size:11px;padding:6px 2px;max-width:140px}.table-wrap{background:#fff;border:1px solid #e2e5e8;border-radius:7px;overflow:hidden}table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}th{font-weight:400;font-size:11px;color:#92999f;padding:13px 18px;border-bottom:1px solid #e9ecee}th:nth-child(1){width:44%}th:nth-child(2),th:nth-child(3){width:22%}th:nth-child(4){width:96px}td{padding:16px 18px;border-bottom:1px solid #f0f1f3;overflow-wrap:anywhere;vertical-align:middle;font-size:13px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafbfc}.number{color:#48545d;font-size:12px;font-variant-numeric:tabular-nums}.location{font-weight:550;font-variant-numeric:tabular-nums}.row-actions{display:flex;justify-content:flex-end;gap:1px}.row-actions .icon-button{width:30px;height:36px}.row-actions svg{width:15px;height:15px}.row-actions-cell{padding:10px 12px 10px 0}.empty{text-align:center;padding:45px;color:#b0b6ba;font-size:17px}.error{font-size:12px;color:#a34136;background:#fff0ed;border:1px solid #f1dad4;border-radius:5px;padding:10px 12px;line-height:1.5}dialog{width:380px;max-width:calc(100% - 32px);border:1px solid #e2e5e8;border-radius:9px;padding:20px 24px 24px;background:#f8f9fa;color:inherit;box-shadow:0 16px 80px #17252c25}dialog::backdrop{background:#1c27354d}.dialog-top{display:flex;justify-content:flex-end;margin:-8px -12px -10px 0}.location-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.dialog-actions .icon-button{border-color:#e0e4e7}.dialog-actions .add-button{border-color:transparent}.delete-label{font-size:13px;margin-top:5px}#delete-description{color:#7f888f;font-size:13px;overflow-wrap:anywhere;margin:10px 0 0}.danger{color:#b75245;background:#fbefed;border-color:#f0dcd7!important}.danger:hover{background:#f4ded9;color:#9b382d}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);border:1px solid #e1e5e8;background:#fff;box-shadow:0 5px 25px #25354112;color:#606b73;font-size:12px;padding:11px 18px;border-radius:7px;max-width:90%;z-index:10}.loading{padding:100px;text-align:center;color:#a0a8ae}.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}@media(max-width:600px){main{padding:16px 16px 50px}.toolbar{margin-bottom:20px}.auth{margin-top:65px;max-width:320px}.search-wrap input{font-size:16px}.table-wrap{border-radius:6px}th{font-size:10px;padding:12px 9px}td{padding:15px 9px;font-size:12px}.number{font-size:11px}th:nth-child(1){width:40%}th:nth-child(2),th:nth-child(3){width:22%}th:nth-child(4){width:62px}.row-actions{gap:0}.row-actions .icon-button{width:27px;height:40px}.row-actions-cell{padding:5px 5px 5px 0}input{font-size:16px}.row-actions svg{width:14px;height:14px}.list-toolbar{margin-top:17px}.username{max-width:170px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Store lagertal med enkle placeringsskilte. */
:root { color: #161616; background: #f3f3f1; }
main { max-width: 1120px; }
.search-wrap { border: 2px solid #202020; border-radius: 2px; }
.search-wrap input { height: 62px; font-size: 26px; font-weight: 700; }
.search-wrap input::placeholder { color: #656565; font-weight: 400; }
.search-wrap:focus-within { outline-color: #202020; }
#search-icon { color: #252525; }
#search-icon svg { width: 24px; height: 24px; }
.searchbar > .add-button { width: 64px; height: 64px; border-radius: 2px; }
.add-button, .primary { background: #202020; }
.add-button:hover, .primary:hover { background: #000; }
.count, select, .username { color: #626262; font-size: 13px; }
.table-wrap { background: transparent; border: 0; border-radius: 0; overflow: visible; }
table { border-collapse: separate; border-spacing: 0 10px; }
th { color: #292929; font-size: 12px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; border: 0; padding: 8px 20px; }
th:nth-child(1) { width: 42%; }
th:nth-child(2), th:nth-child(3) { width: 24%; text-align: center; }
th:nth-child(4) { width: 100px; }
td { background: #fff; border-top: 1px solid #d3d3cf; border-bottom: 1px solid #d3d3cf; padding: 12px; }
td:first-child { border-left: 1px solid #d3d3cf; padding-left: 24px; }
td:last-child { border-right: 1px solid #d3d3cf; }
tbody tr:last-child td { border-bottom: 1px solid #d3d3cf; }
tbody tr:hover td { background: #fff; }
.number { color: #161616; font-size: 38px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.location-label { display: none; }
.location { text-align: center; font-size: 64px; font-weight: 850; line-height: 1.05; letter-spacing: -1.5px; }
.location .cell-value { display: block; background: #c52329; color: #fff; padding: 14px 8px; min-height: 96px; overflow-wrap: anywhere; }
.row-actions { gap: 0; }
.row-actions .icon-button { width: 40px; height: 44px; color: #626262; }
.row-actions svg { width: 19px; height: 19px; }
.row-actions-cell { padding: 10px 8px 10px 0; }
.empty { border: 1px solid #d3d3cf; background: #fff; color: #626262; }
label { color: #404040; font-size: 13px; }
#item-number, #item-shelf, #item-slot { height: 64px; font-size: 30px; font-weight: 750; color: #161616; }
#item-shelf, #item-slot { background: #c52329; color: #fff; border-color: #c52329; text-align: center; font-size: 38px; }
@media (max-width: 600px) {
  main { padding: 12px 14px 50px; }
  .toolbar { margin-bottom: 18px; }
  .search-wrap { padding-left: 12px; }
  .search-wrap input { height: 58px; font-size: 24px; }
  .searchbar > .add-button { width: 62px; height: 62px; }
  table, tbody { display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 14px; }
  tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 9px; padding: 16px; border: 1px solid #d3d3cf; background: #fff; }
  td, td:first-child, td:last-child, tbody tr:last-child td { border: 0; padding: 0; background: transparent; }
  tbody tr:hover td { background: transparent; }
  .number { grid-column: 1 / 3; font-size: 34px; padding: 0 0 9px !important; }
  .number::before { content: attr(data-label); display: block; font-size: 10px; color: #555; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
  .location { background: #c52329 !important; color: #fff; font-size: 60px; letter-spacing: -1.5px; }
  .location .location-label { display: block; padding-top: 12px; margin-bottom: 8px; font-size: 11px; font-weight: 750; letter-spacing: 1.4px; line-height: 1; text-transform: uppercase; }
  .location .cell-value { min-height: 82px; padding: 8px 5px 12px; background: transparent; }
  .row-actions-cell { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .row-actions { flex-direction: column; gap: 8px; }
  .row-actions .icon-button { width: 40px; height: 44px; }
  .row-actions svg { width: 19px; height: 19px; }
}

textarea { width: 100%; resize: vertical; min-height: 88px; border: 1px solid #dfe2e5; border-radius: 6px; background: #fff; color: #24282b; padding: 11px 12px; font: 15px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
#item-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
#item-image { height: auto; font-size: 12px; padding: 10px; }
#image-limit { display: block; margin-top: 7px; }
.attachment-preview { position: relative; margin-top: 12px; background: #eceeeb; border: 1px solid #d3d3cf; border-radius: 3px; padding: 10px; }
.preview-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.preview-button img { display: block; width: 100%; height: 180px; object-fit: contain; }
#remove-image { position: absolute; top: 6px; right: 6px; background: #fff; color: #303030; border: 1px solid #d3d3cf; }
.item-details { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.item-note { margin: 0; color: #454545; font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 6em; overflow-y: auto; }
.thumbnail-button { flex: 0 0 70px; width: 70px; height: 70px; background: #eee; border: 1px solid #d3d3cf; padding: 0; cursor: zoom-in; }
.thumbnail-button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-dialog { width: min(900px, calc(100% - 24px)); padding: 16px; background: #fff; }
.image-dialog .dialog-top { margin: -8px -6px 8px 0; }
#full-image { display: block; width: 100%; max-height: 75dvh; object-fit: contain; }
@media (max-width: 600px) { textarea { font-size: 16px; } .item-details { gap: 10px; } .item-note { font-size: 13px; } .thumbnail-button { flex-basis: 58px; width: 58px; height: 58px; } }

.dialog-actions .secondary { background: transparent; color: #404040; border-color: #d3d3cf; }
.dialog-actions .secondary:hover { background: #e9ecee; }

.storage-usage { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; font-size: 11px; color: #626262; }
.storage-usage progress { width: 110px; height: 5px; accent-color: #303a41; flex-shrink: 0; }
@media (max-width: 360px) { .storage-usage { gap: 8px; font-size: 10px; } .storage-usage progress { width: 65px; } }

.sync-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: #626262; font-size: 11px; }
.sync-status > div { display: flex; align-items: center; gap: 10px; }
.text-action { padding: 5px 0; border: 0; background: none; color: #943421; font-size: 12px; text-decoration: underline; }
.pending-row .number .cell-value::after { content: ' •'; color: #a97715; font-size: 18px; vertical-align: middle; }
.review-copy { font-family: inherit; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; border: 1px solid #ddd; padding: 12px; }
.review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.profile { position: relative; max-width: 100%; }
.profile summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px; cursor: pointer; list-style: none; border-radius: 3px; }
.profile summary::-webkit-details-marker { display: none; }
.profile summary:hover { background: #e9ecee; }
.profile summary:focus-visible { outline: 2px solid #202020; outline-offset: 3px; }
.profile summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.profile[open] summary svg { transform: rotate(180deg); }
.profile-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; width: 290px; max-width: calc(100vw - 28px); padding: 16px; border: 1px solid #d3d3cf; border-radius: 3px; background: #fff; box-shadow: 0 6px 20px #00000012; }
.profile .storage-usage { flex-direction: column; align-items: stretch; gap: 10px; margin: 0 0 12px; font-size: 12px; }
.profile .storage-usage progress { width: 100%; }
.profile-action { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 3px; background: transparent; color: #404040; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.profile-action:hover { background: #f1f2f0; }
#logout-icon { display: flex; }
.profile-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.profile-action:disabled { opacity: .5; cursor: wait; }

.searchbar > .add-button { width: auto; gap: 8px; padding: 0 16px; font-size: 15px; font-weight: 600; }
#new-item-icon { display: flex; }
@media (max-width: 360px) { .searchbar > .add-button { gap: 6px; padding: 0 12px; } }

@media (max-width: 600px) {
  #item-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overscroll-behavior: contain;
  }
  #item-form { display: flex; flex-direction: column; min-height: 100%; }
  #item-form > input, #item-form > textarea, #item-form > div { flex-shrink: 0; }
  #item-form .dialog-actions { margin-top: auto; padding-top: 24px; }
}

#item-form .item-top-actions { margin-top: 0; padding-top: 0; }