/*
Theme Name: app
*/

:root {
    --success: #aef4bd;
    --neutral: #fff;
    --error: #f4aeae;
    --warning: #f4daae;
    --primary-color: #edaef4;
    --primary-text-color: rgb(255 255 255 / 100%);
    --primary-background-color: #121212;
    --success-background-color: #aef4bd;
    --success-text-color: #000;
    --error-background-color: #f4aeae;
    --error-text-color: #000;
    --borderColor: rgb(255 255 255 / 10%);
    --card: rgb(255 255 255 / 5%);
    --desktopDrawer: #222222;
    --radius: 4px;
    --labelPadding: 10px;
    --veryBig: 48px;
    --big: 32px;
    --large: 24px;
    --normal: 16px;
    --medium: 14px;
    --small: 12px;
    --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  badge { font-weight: 600; font-size: var(--small);height: 22px; padding-left: 8px; padding-right: 8px; border-radius:var(--radius); display: inline-block; max-width: fit-content;  display: flex; align-items: center; color: var(--primary-background-color);}
  badge.warning {background: var(--warning);}
  badge.success {background: var(--success);}
  badge.error {background: var(--error);}
 

button.naked.danger {
  color: var(--error);
}

.big {font-size: var(--veryBig);}

button.danger {
  background: var(--error);
  color: var(--primary-background-color)
}

button.ghost.danger {
 color: var(--error);
  border-color: var(--error)
}



tag {color: var(--primary-background-color); padding-left: 8px; padding-right: 8px; font-weight: 500; padding-top: 4px; padding-bottom: 4px; font-size: var(--small)}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, button, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align:middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard */
}

/* Tillåt textmarkering i formulärfält */
input,
textarea,
select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}



body,html {font-weight: 300; background: var(--primary-background-color); color: var(--primary-text-color); margin: 0; padding: 0; font-family: var(--font)}
input,select,textarea,button,[contentEditable] {color: var(--primary-text-color); background: none; height: 44px; width: 100%;
    border: 1px var(--borderColor) solid;
    outline: none;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    border-radius: var(--radius);
    font-family: var(--font)
}
textarea {padding-top: 12px; height: 120px; resize: none;}
input:focus,textarea:focus {  border: 1px var(--primary-text-color) solid;}


home {width: 100%; height: 100dvh; background: var(--primary-background-color); position: fixed; top: 0; left: 0; z-index: 100;}

.inner {padding: 24px; box-sizing: border-box;}
section {
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 100%;
  transition: left 0.25s ease-in-out;
  z-index: 10000000;
  display: flex;
  justify-content: flex-end;
}

section.active {
  left: 0;
}

section header {padding-top: 12px; padding: 16px; height: 44px; position: sticky; top: 0; display: flex; align-items: center; gap: 0px; background: var(--primary-background-color); z-index: 1;}
section footer {width: 100%; padding: 16px; position: sticky; bottom: 0; box-sizing: border-box; background: var(--primary-background-color); z-index: 1;}
section close {width: 100%; height: 100%; position: absolute; z-index: -1; background: none;}
section content {width: 100%; min-height: 100dvh; max-width: 600px; overflow: auto;background: var(--primary-background-color);}
 

  sectionbody {display: block; padding: 16px;}
  #pages sectionbody {padding-top: 0;}
button {cursor: pointer;}
button.cta {background: var(--primary-color); border: 1px var(--primary-color) solid; color: var(--primary-background-color); font-weight: 500;}
button.ghost {background: var(--desktopDrawer); border: 1px var(--borderColor) solid; color: var(--primary-text-color); font-weight: 500;}
button.naked {background: none; border: 0px var(--primary-color) solid; color: var(--primary-text-color); font-weight: 500;}
.flex {display: flex; position: relative;}
.gap16 {gap: 16px;}
.gap8 {gap: 8px;}
.gap12 {gap: 12px;}

.color {min-height: 32px; width: 32px; box-sizing: border-box; border: 1px var(--borderColor) solid; position: absolute; right: 6px; top: 6px; display: block; border-radius: var(--radius)}
login video {position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; z-index: 1;}
login .loginWrapper {
    position: absolute; top: 0; left: 0; width: 100%; max-width: 450px; z-index: 2; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    display: flex;
    padding: 24px;
    box-sizing: border-box;
}
login .loginWrapper .header {position: absolute; top: 0; left: 0; padding: 24px;}
login .loginWrapper .footer {position: absolute; bottom: 0; left: 0;  padding: 24px;}
login .loginWrapper .body {width: 100%;}
login .loginWrapper input {margin-bottom: 12px;}
login .header svg {
    height: 20px;
    width: auto;
    fill: var(--primary-color);
}



.row .image svg {
    height: 28px;
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}

toast {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: -100px;
    display: flex; 
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    transition: bottom 0.35s;
    z-index: 100000000000;
    font-weight: 600;
}
toast.active {bottom: 0;}
toast div {border-radius: var(--radius); width: fit-content; padding: 8px;}
toast div.success {
    background: var(--success-background-color);
    color: var(--success-text-color)
}
toast div.error {
    background: var(--error-background-color);
    color: var(--error-text-color)
}
button[disabled] {opacity: 0.5;}
#edit input[disabled] {padding: 0; border: 0; height: 24px;}



.loader {
    width: 24px;
    height: 24px;
    border: 2px solid var(--primary-text-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
   
    }

sum .loader {
    border: 2px solid var(--primary-text-color); border-bottom-color: transparent;  
}

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 



h1,h2,h3,h4,h5 {margin: 0; font-weight: 600;}
h1 {font-size: 24px;}
h2 {font-size: var(--large)}
button {box-sizing: border-box;}


.barWrapper {border-radius:var(--radius); overflow: hidden; background: var(--borderColor); border: 1px var(--borderColor) solid; display: block;}
bar { min-width: 60px; max-width: 60px; padding: 16px; display: block; color: var(--primary-background-color); font-weight: 600; transition: all 0.5s; width: 100%;}
bar.success {
  background: var(--success);
}

bar.warning {
  background: var(--warning);
}

bar.danger {
  background: var(--error);
}

@media only screen and (max-width: 600px) {
  #apps .grid button span {font-size: var(--normal) !important; padding-top: 8px;}
    .drawer .content,.drawer .header,.drawer .footer {
        background: var(--primary-background-color) !important;
    }


    
    table tr,table td, table th {display: block; height: auto; border: 0; border-radius: var(--radius);}
    table tr {padding: 24px; border-radius: 8px; margin-bottom: 24px; background:var(--card); border: 1px var(--borderColor) solid;}
    table tbody td{padding-top: 6px; padding-bottom: 6px;}

   
    table {background: none !important;}

    button.ghost {background: var(--primary-background-color);}

}


table {
    background: var(--card);
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: 16px;
    padding-top: 8px;
    color: var(--primary-text-color);
    table-layout: fixed;
    border: 1px var(--borderColor) solid;
   
    overflow: hidden;
}

.navigation .left svg, .navigation .right svg {position: absolute; top: 0; right: 0; padding: 16px;}

.marginLeftAuto {margin-left: auto;}
.inner {display: block; margin-left: auto; margin-right: auto; width: 100%; max-width: 600px;}
.navigation {display: flex; width: 100%; max-width: 600px; gap:24px;}
.navigation .left, .navigation .right {width: 100%; padding-top: 24px; padding-bottom: 24px; display: flex; flex-direction: column; gap: 24px; height: calc(100dvh);}
card {
  background: var(--card);
  border: 1px var(--borderColor) solid;
  width: 100%;
  border-radius: var(--radius);
  box-sizing: border-box;
  padding: 16px;
  color: var(--primary-text-color);
  display: block;
  position: relative;
}

card .text label {padding-top: 8px;}
card .text {position: absolute; bottom: 0; left: 0; padding: 16px;}

card:hover {opacity: 0.8;}

.left card {
  height: calc(25% - 54px);
}

.right card {
  height: calc(33.333% - 64px);
}

.search-wrapper input {
    background: var(--card);
    border: 1px var(--borderColor) solid;
    width: 100%;
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: 16px;
    color: var(--primary-text-color);
}

.list {margin-bottom: 24px;}
.listItem {
    display: flex;
    gap: 16px;
    border-bottom: 1px var(--borderColor) solid;
    box-sizing: border-box;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 8px; padding-right: 8px;
    width: 100%;
    cursor: pointer;
    transition: padding 0.25s;
    align-items: center;
}
.listItem .image {height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; border: 1px var(--borderColor) solid;}
.listItem span {display: block; font-weight: 500;}
.listItem div span:nth-child(2) {opacity: 0.7; font-weight: 400; padding-top: 8px;}
.listItem img {height: 40px; width: 40px; object-fit: cover;}
.listItem svg {height: 24px; width: 24px; }
.listItem:hover {background: var(--card); }
.listItem .arrow-right {margin-left: auto;}

.tightCard {
    background: var(--card);
    border: 1px var(--borderColor) solid;
    width: 100%;
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: 10px;
    color: var(--primary-text-color);
    position: relative;
}

.tightCard svg {
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}

.tightCard .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.search-wrapper {margin-bottom: 16px;}
.sort-wrapper {margin-bottom: 16px;}
select {text-align: center;}
th,td {text-align: left;
    overflow: hidden;

    white-space: nowrap;
    border: none;
    padding: 12px;
}
tr {height: 44px; cursor: pointer;}
tr img {width: 44px; height: 44px; object-fit: cover; border-radius:var(--radius)}
tbody tr { opacity: 0.9; }
tbody tr:hover {opacity: 1;}

th { color: var(--primary-text-color); }
td { color: var(--primary-text-color);}
td,th {border-bottom: 1px var(--borderColor) solid; font-weight: 400;}
th:hover, th.asc, th.desc {background: var(--card);}
[contentEditable] {outline: none; min-height: 80px; height: auto; padding-top: 12px; padding-bottom: 12px;}

input[type="file"] {
    display: none;
  }


hr {
  margin-top: 48px;
  margin-bottom: 48px;
  border: none;         
  height: 1px;          
  background-color: var(--borderColor);
}
  

.fullWidth {width: 100%;}

.marginTop8 {margin-top: 8px;}
.marginTop12 {margin-top: 8px;}
.marginTop24 {margin-top: 24px;}
.marginTop32 {margin-top: 32px;}
.marginTop48 {margin-top: 48px;}

.marginBottom24 {margin-bottom: 24px;}
.paddingBottom16 {padding-bottom: 16px;}
.padding16 {padding: 16px;}

input[type="color"] {padding: 0; width: 0px; height: 0px; border: 0; position: absolute; left: 0; top: calc(100% + 6px);}

.relative {position:relative;}

table svg {
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}

back{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 44px; min-width: 44px;
}

back svg {
    height: 28px;
    width: auto;
    margin-left: -4px;
}

trash svg {
    height: 20px;
}

trash {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: auto;
}

share svg {
    height: 20px;
}

share {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.fullscreenLoader {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%; height: 100dvh; z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    position: fixed;
}

.row {display: block; margin-bottom: 24px;}
label {display: block; font-size: var(--small); text-transform: uppercase; opacity: 0.7;letter-spacing: 0.5px; padding-bottom: var(--labelPadding); font-weight: 500;}
.row label.switch {padding: 0; opacity: 1;}
.row img {width: 80px; height: 80px; position: absolute; top: 0; left: 0; object-fit: cover;}
.row .image {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex; align-items: center; justify-content: center;
  }
  
  .row .imageWrapper {border: 1px var(--borderColor) solid; width: fit-content; border-radius: var(--radius)}
  

.content tabs {position: sticky; top: 50px; padding-top: 12px;}

tabs {display: flex; gap: 16px;}
.content tabs button { background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);}
tabs button.active {background: var(--borderColor)}
groupcontainer {border-radius: var(--radius); border: 1px var(--borderColor) solid; display: block; width: 100%; }
group {background: var(--card); margin-bottom: 0px; display: block; border-bottom: 1px var(--borderColor) solid;}
group header {display: flex; align-items: center; padding: 16px; }
group header svg {margin-left: auto;}
group header .handle svg {margin: 0; transform: none !important;}
group content {display: none; padding: 16px;}
group.active content {display: block;}
group h2 {font-size: var(--normal)}
group[expandable="true"] header {cursor: pointer;}
.tabcontent {display: none; padding-bottom: 24px; padding-top: 24px;}
.tabcontent.active {display: block;}
group:last-of-type {border-bottom: 0;}
group svg {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  group.active header svg {
    transform: rotate(90deg);
  }
  
.marginLeft {margin-left: auto;}
.marginLeft8 {margin-left: 8px;}
.marginTop12 {margin-top: 12px;}
.marginLeft16 {margin-left: 16px;}
.maxWidth100 {max-width: 100px; }
.maxWidth150 {max-width: 180px; }
.mainHeader {height: 44px; display: flex; align-items: center; padding-bottom: 24px;}

.no-select {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
  }

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    min-width: 44px;
    height: 28px;
    padding-bottom: 0;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: -3px;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 12px;
    border: 1px var(--borderColor) solid;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--primary-text-color);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 12px;
  }


  input[type="checkbox"]:checked + .slider {
    background-color: var(--primary-color);
  }
  
  input[type="checkbox"]:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
  }
  
  input[type="checkbox"]:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  .slider.round {
    border-radius: var(--radius);
  }
  
  .slider.round:before {
    border-radius: var(--radius);
  }

  input[type="checkbox"]:checked + .slider:before {
   background-color: var(--primary-background-color);
  }

  .success {
    background: var(--success)
  }

  .neutral {
    background: var(--neutral)
  }

  .error {
    background: var(--error)
}
#apps .grid button {
  aspect-ratio: 1 / 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#apps .grid button svg {height: 30%; width: auto;}
#apps .grid button span {display: block; font-size: var(--large); padding-top: 16px;}

  .grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  }

  widget {
    background:var(--card);
    padding: 16px;
    border-radius: var(--radius);
    border: 1px var(--borderColor) solid;
  }
  widget:hover {background: var(--borderColor)}

  
  widget sum {font-size: var(--big)}

 
  select {
    appearance: none;        /* Standard */
    -webkit-appearance: none; /* Safari / Chrome */
    -moz-appearance: none;    /* Firefox */
    background: none;         /* Ta bort bakgrund (valfritt) */
  }
  
  .sortable-ghost {background: var(--borderColor); opacity: 0;}

  .handle {min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;}
  .line {margin-bottom: 16px;}
  .trash {min-width: 30px; height: 44px; display: flex; align-items: center; justify-content: center;}
  .trash svg {height: 20px; width: auto;}
  [sub-data-id="shortTitle"] {
    white-space: nowrap;        /* ingen radbrytning */
    overflow: hidden;           /* göm överflödig text */
    text-overflow: ellipsis; 
    width: 100%;
    display: block;
  }



  .horizontal-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;       /* gör listan scrollbar i sidled */
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* “snäppar” till varje element */
    list-style: none;
    margin: 0;
    scroll-behavior: smooth; /* snygg scrolling */
    -webkit-overflow-scrolling: touch; /* bättre på iOS */

  }
  
  .horizontal-scroll::-webkit-scrollbar {
    height: 8px;
  }
  
  .horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--borderColor);
    border-radius: 4px;
  }
  
  .horizontal-scroll li {
    flex: 0 0 auto;         /* hindrar elementen från att krympa */
    scroll-snap-align: start;
    border-radius: var(--radius);
    border: 1px var(--borderColor) solid;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px; padding-right: 10px;
  }

  .horizontal-scroll li.active {background: var(--borderColor);}

  .plus {width: 100px; display: flex; align-items: center; height: 46px; padding: 0; padding-left: 10px; padding-right: 5px; position: absolute; top: 0; right: 0; background: var(--primary-background-color);
    box-shadow: -20px 0 10px -10px #000;


  }

  .plus svg {margin-left: auto; height: 20px;}

  .container {margin-top: 12px;}
  .contentContainer.sortable-chosen {max-height: 152px; transition: padding 0.25s; overflow: hidden;}
  .sortable-chosen {border: 1px var(--primary-color) solid !important; padding: 8px;} 
  .contentContainerObjects {
    min-height: 150px; position: relative;
    display: grid;
    gap: 8px;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  
  }
  .shrink {padding: 8px !important;}
  .contentContainerHeader {display: block; gap: 8px; width: 50px;}
  .contentContainerHeader button {margin-bottom: 8px; padding: 0; max-width: 44px;}
  .contentContainer {position: relative; margin-bottom: 24px; display: flex; gap: 8px;}
  .item {
    min-height: 150px;
    border: 1px var(--borderColor) solid;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: center;
    border-radius: var(--radius);
  }

  div.itemInner {padding: 8px;}

  div.itemInner h1,div.itemInner h2,div.itemInner h3,div.itemInner h4,div.itemInner h5 {
    font-size: 16px; font-weight: 500; padding-bottom: 6px;
  }

  div.itemInner p {
    font-size: 14px; font-weight: 300; padding-bottom: 6px;
  }

  div.itemInner img,  div.itemInner video {width: 100%; object-fit: cover; padding-bottom: 6px; border-radius: var(--radius); max-height: 175px;}

  .textAlignCenter {text-align: center; font-weight: 500;}

  .fit-content {width: fit-content;}

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .preview {height: 96px; width: 96px; object-fit: cover; border-radius: var(--radius); border: 1px var(--borderColor) solid;}


  .rightTopButton {
    max-width: 44px; padding: 0;
  }


  .alignCenter {align-items: center;}

  #domainUrl {line-height: 24px; padding-bottom: 4px; margin-bottom: 2px; display: inline-block; cursor: pointer; text-decoration: none; color: var(--primary-text-color); font-weight: 500;}