@import url("../font-awesome/css/font-awesome.min.css");

html{height:100%;padding:0;margin:0;background-color:black}
body{font-family:'Helvetica Neue',Verdana,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:1.125em;color:#ddd;line-height:1.5em;min-height:100%;padding:0;padding-bottom:0;margin:0;background:linear-gradient(to bottom,rgba(30,82,142,0.1) 0,rgba(38,88,137,0.2) 50%,rgba(157,166,113,0.3) 100%);background-attachment:fixed}
#app{max-width:600px;margin:0 auto;padding:0;padding-bottom:.25em}
h1,h2,h3{color:#aaa}
h1{font-size:2.5em}
h2{font-size:2em}
h3{font-size:1em}
div{padding:0;margin:0}
a{text-decoration:none;color:#09f}
a:hover{text-decoration:underline}

/* Breadcrumbs */
#breadcrumbs {
  padding: 0.75em 1em;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  margin: 0.5em;
  font-size: 0.9em;
}
.breadcrumb-item {
  color: #09f;
  cursor: pointer;
  padding: 0.25em 0.5em;
  border-radius: 3px;
  transition: background 0.2s;
}
.breadcrumb-item:hover {
  background: rgba(0,153,255,0.2);
  text-decoration: none;
}
.breadcrumb-item.active {
  color: #ddd;
  cursor: default;
}
.breadcrumb-item.active:hover {
  background: transparent;
}
.breadcrumb-sep {
  color: #666;
  font-size: 0.8em;
  margin: 0 0.25em;
}

/* Toolbar */
#toolbar {
  padding: 0.5em 1em;
  margin: 0.5em;
}
.toolbar-buttons {
  display: flex;
  gap: 0.5em;
}
.btn-add, .btn-clear {
  background: rgba(0,153,255,0.3);
  border: 1px solid rgba(0,153,255,0.5);
  color: #09f;
  padding: 0.5em 1em;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s;
}
.btn-add:hover, .btn-clear:hover {
  background: rgba(0,153,255,0.5);
}
.btn-clear {
  background: rgba(255,100,100,0.2);
  border-color: rgba(255,100,100,0.4);
  color: #f99;
}
.btn-clear:hover {
  background: rgba(255,100,100,0.4);
}
#add-form, #add-task-form {
  display: flex;
  gap: 0.5em;
  align-items: center;
}
#add-form input, #add-task-form input {
  flex: 1;
  padding: 0.5em;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.9);
  color: #333;
  font-size: 1em;
}
#add-form button, #add-task-form button {
  background: rgba(0,153,255,0.3);
  border: 1px solid rgba(0,153,255,0.5);
  color: #09f;
  padding: 0.5em 0.75em;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1em;
}
#add-form button:hover, #add-task-form button:hover {
  background: rgba(0,153,255,0.5);
}
.hidden {
  display: none !important;
}

/* Item Lists */
.item-list, .task-list {
  list-style: none;
  padding: 0;
  margin: 0.5em;
}
.folder-item, .list-item, .task-item {
  display: flex;
  align-items: center;
  padding: 0.75em 1em;
  margin: 0.25em 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
}
.folder-item:hover, .list-item:hover {
  background: rgba(255,255,255,0.1);
}
.item-icon {
  font-size: 1.5em;
  margin-right: 0.75em;
  width: 1.5em;
  text-align: center;
}
.folder-item .item-icon {
  color: #f9c74f;
}
/* Folder status colors */
.folder-item.folder-complete .item-icon {
  color: #4dabf7;
}
.folder-item.folder-incomplete .item-icon {
  color: #ff6b6b;
}
.folder-item.folder-empty .item-icon {
  color: #f9c74f;
}
.list-item .item-icon {
  color: #90be6d;
}
/* List status colors */
.list-item.list-complete .item-icon {
  color: #4dabf7;
}
.list-item.list-incomplete .item-icon {
  color: #ff6b6b;
}
.list-item.list-empty .item-icon {
  color: #90be6d;
}
.list-complete .task-count {
  background: rgba(77,171,247,0.2);
  color: #4dabf7;
}
.list-incomplete .task-count {
  background: rgba(255,107,107,0.2);
  color: #ff6b6b;
}
.item-name {
  flex: 1;
  font-weight: bold;
}
.task-count {
  background: rgba(0,153,255,0.3);
  color: #09f;
  padding: 0.2em 0.6em;
  border-radius: 10px;
  font-size: 0.85em;
  margin-right: 0.5em;
}
.folder-task-count {
  background: rgba(100,100,100,0.3);
  color: #aaa;
  padding: 0.2em 0.6em;
  border-radius: 10px;
  font-size: 0.85em;
  margin-right: 0.5em;
}
.folder-complete .folder-task-count {
  background: rgba(77,171,247,0.2);
  color: #4dabf7;
}
.folder-incomplete .folder-task-count {
  background: rgba(255,107,107,0.2);
  color: #ff6b6b;
}
.item-actions {
  opacity: 0;
  transition: opacity 0.2s;
}
.folder-item:hover .item-actions,
.list-item:hover .item-actions {
  opacity: 1;
}
.btn-delete {
  background: transparent;
  border: none;
  color: #f66;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0.25em 0.5em;
}
.btn-delete:hover {
  color: #f99;
}

/* Task Items */
.task-item {
  cursor: default;
}
.task-checkbox {
  font-size: 1.5em;
  margin-right: 0.75em;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
}
.task-checkbox:hover {
  color: #09f;
}
.task-item.checked .task-checkbox {
  color: #4a4;
}
.task-text {
  flex: 1;
}
.task-item.checked .task-text {
  text-decoration: line-through;
  opacity: 0.6;
}
.task-actions {
  display: flex;
  align-items: center;
  gap: 0.5em;
  opacity: 0;
  transition: opacity 0.2s;
}
.task-item:hover .task-actions {
  opacity: 1;
}
.btn-delete-task {
  background: transparent;
  border: none;
  color: #f66;
  cursor: pointer;
  font-size: 1.2em;
  padding: 0.25em;
}
.btn-delete-task:hover {
  color: #f99;
}
.handle {
  cursor: move;
  cursor: -webkit-grabbing;
  color: #666;
  padding: 0.25em;
}
.handle:hover {
  color: #999;
}

/* Empty & Error Messages */
.empty-message, .error-message {
  text-align: center;
  color: #888;
  padding: 2em;
  font-style: italic;
}
.error-message {
  color: #f66;
}
.empty-message i, .error-message i {
  margin-right: 0.5em;
}

/* Oddeven backgrounds */
.oddeven-0 {
  background-color: rgba(255,255,255,0.05);
}
.oddeven-1 {
  background-color: transparent;
}

/* Sortable ghost */
.sortable-ghost {
  opacity: 0.4;
  background: rgba(0,153,255,0.2);
}

/* Loader */
#loader>div, #loader-inline>div {
  width:50px;height:50px;background:#555;border:1px solid #555;
  -webkit-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;
  animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite
}
#loader {
  position:absolute;left:50%;top:50%;margin-left:-25px;margin-top:-25px
}
#loader-inline {
  display: flex;
  justify-content: center;
  padding: 2em;
}

@keyframes square-spin{
  25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}
  50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}
  75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}
  100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}
}

/* Legacy styles for original app (in case extension doesn't load) */
.btn{color:#aaa;display:inline-block;background:0;border:0;margin:.25em;cursor:pointer;font-size:2.5em}
span.btn{margin:.5em}
.fa-stack{font-size:1.25em}
.fa-inverse{color:#2a2e37}
input,textarea{width:100%;box-sizing:border-box;font-size:1em;font-family:'Helvetica Neue',Verdana,Helvetica,Arial,sans-serif;color:#333;border-radius:3px;border:1px solid rgba(255,255,255,0.3);background-color:rgba(255,255,255,0.7);display:block;padding:.5em;min-height:3em}
li.todo-link>span{cursor:pointer;padding:.75em;padding-left:1em;font-weight:bold;display:block}
li.todo-link span.unchecked-count{float:right}
ul{padding-left:0;margin-top:0}
li{list-style-type:none;margin-left:.25em;margin-right:.25em;margin-top:.25em;margin-bottom:.25em;border-radius:3px;padding:.25em;padding-bottom:.25em;display:block;min-height:3em}
li.todo-line>span{display:block;padding-left:1em;padding-top:-1em}
li.todo-line>span.edit-mode{margin-bottom:3.5em}
.list-title{display:inline-block;margin:0;margin-left:.5em;font-size:1em;position:relative;top:-0.5em;color:#ddd}
#add-item{float:right;margin-right:.3em}
#clear-completed{float:right}
#add-item-container{padding:0;margin:1em;margin-top:.5em}
#add-item-done{display:block;text-align:right}
#back{margin-left:.275em}
#add-list{margin-right:.275em}
#list-edit-container{text-align:right;margin:0}
.update-item-done{float:right}
.delete-item{margin-left:-0.1em;float:right}
.edit-item-text{margin-top:.5em;margin-left:-0.5em}
.delete-list{float:right;margin-top:.1em}
.checkbox{display:inline-block;float:left;margin-left:-0.25em}
.todo-text{display:block;padding-bottom:1em;margin-left:2.5em;padding-top:1em}
.message{text-align:center;color:silver}