*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto',sans-serif}
body{background:url('./img/background.png');background-size:cover;background-position:center;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:24px}
.container{background:#ffffff;opacity:.95;box-shadow:0 12px 30px rgba(0,0,0,.25);border-radius:10px;width:100%;max-width:700px}
.conteudo{padding:20px}
h1{font-size:22px;margin-bottom:10px}
.input-task{flex:1;border:1px solid #cfd8dc;padding:12px;border-radius:8px}
.button-add-task{background:#2ecc71;border:none;color:white;padding:12px 16px;border-radius:8px;cursor:pointer}
.button-add-task:hover{filter:brightness(1.05)}
.ghost{background:transparent;border:1px solid #9fb0c7;color:#2c3e50;padding:8px 12px;border-radius:8px;cursor:pointer}
.ghost.small{padding:6px 10px;font-size:12px;border-radius:6px}
.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.user-badge{font-size:14px;color:#37474f}
.list-tasks{list-style:none;margin-top:10px}
.task{background:#f5f7fa;border:1px solid #e1e8ee;border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.task.done p{text-decoration:line-through;opacity:.7}
.task img{width:28px;height:28px;cursor:pointer}
.task .owner{display:block;font-size:12px;color:#607d8b;margin-top:2px}
.login-card{background:rgba(255,255,255,.9);border-radius:10px;padding:16px;max-width:520px;width:100%;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.login-row{display:flex;gap:8px;margin-top:8px}
#userInput{flex:1;border:1px solid #cfd8dc;border-radius:8px;padding:10px 12px}
.help{color:#37474f;opacity:.9;font-size:14px;margin-top:6px}
/* Modal */ 
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999}
.modal-card{width:100%;max-width:520px;background:#ffffff;border-radius:10px;padding:16px;color:#111}
.modal-card .hint{background:#eef2ff;border:1px dashed #93c5fd;color:#1e3a8a;padding:10px;border-radius:8px;margin:8px 0}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.readonly-badge{font-size:12px;padding:4px 8px;border:1px solid #b0bec5;border-radius:8px;color:#607d8b}
.row-inputs { display: flex; gap: 10px; align-items: center; }
.input-time { width: 110px; min-width: 100px; padding: 10px 12px; border: 1px solid #cfd6d9; border-radius: 8px; background: #fff; outline: none;}
.time-badge { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.3; background: #eafaf1; color: #1e824c; border: 1px solid #cfeedd;}
/* ---------- Base mobile-friendly ---------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  /* se usa imagem de fundo, garanta o cover sem quebrar no mobile */
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* evita bug do 'fixed' em iOS */
}

/* container principal (login e app) centralizados e fluidos */
#loginCard, #app {
  width: min(92vw, 760px);
  margin: 20px auto;
}

/* linha dos inputs */
.row-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}

.input-task, .input-time {
  min-width: 0;           /* evita overflow */
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #cfd6d9;
  outline: none;
}

/* deixa os inputs crescerem corretamente */
.input-task { flex: 1 1 auto; }
.input-time  { width: 120px; }

#btnAdd {
  padding: 12px 16px;
  border-radius: 10px;
  flex: 0 0 auto;
}

/* botões da barra (Todos / Minha Tabela / Criar / Ordenar / Sair) */
.view-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* lista */
.list-tasks { list-style: none; margin: 0; padding: 0; }
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
}

/* texto quebra certinho no mobile */
.task p { margin: 0; word-break: break-word; }

/* ícones com área de toque maior */
.icons img {
  width: 28px; height: 28px;
  padding: 6px;
  border-radius: 999px;
  display: inline-block;
}

/* badge de horário (se você usa) */
.time-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.3;
  background: #eafaf1;
  color: #1e824c;
  border: 1px solid #cfeedd;
}

/* ---------- Breakpoints ---------- */

/* tablets e abaixo */
@media (max-width: 768px) {
  #loginCard, #app { width: min(94vw, 680px); }

  .task {
    align-items: flex-start;
  }
}

/* celulares */
@media (max-width: 600px) {
  #loginCard, #app { width: 94vw; margin: 16px auto; }

  .row-inputs {
    flex-direction: column; /* empilha */
    align-items: stretch;
  }
  .input-time, .input-task, #btnAdd {
    width: 100%;
  }

  .view-buttons button {
    flex: 1 1 calc(50% - 8px); /* 2 por linha */
  }

  .task {
    flex-direction: column;   /* texto em cima, ícones embaixo */
    align-items: stretch;
    gap: 10px;
  }
  .icons { display: flex; gap: 10px; }
}

/* telas muito pequenas */
@media (max-width: 360px) {
  .view-buttons button { flex: 1 1 100%; } /* 1 por linha */
}

/* garante que os ícones continuam clicáveis sempre */
.icons, .icons * { pointer-events: auto; }

/* se você tiver algum estilo que desabilita interação ao completar, isso mantém ativo */
.task.done .icons { pointer-events: auto; }